@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@font-face{font-weight:normal;font-style:normal;font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg')}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}


body{color:#fff;font-weight:400;font-size:1em;font-family:'Lato',Arial,sans-serif;overflow-x:hidden;background:#161b37}
header img {width:300px}
#afx {position:absolute; top:20px; right:50px; height:20px; font:bold 42px calibri,helvetica,arial; color:#fff;cursor:pointer}

a,button{outline:0}
a {color:#f0f0f0;text-decoration:none}
a:hover,a:focus{color:#333}
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.santi-header{margin:0 auto;padding:2em;text-align:center}
.santi-header h1{margin:0;font-weight:700;font-size:2.5em;line-height:1.3;font-family:'Roboto Slab',serif}
.santi-top{width:50%;text-transform:uppercase;font-weight:700;font-size:.69em;line-height:2.2;margin:0 auto;background:#696999;padding:10px}
.santi-top2{width:50%;text-transform:uppercase;font-weight:700;font-size:.69em;line-height:2.2;margin:0 auto;background:#5d9da8;padding:10px}
.santi-top3{width:50%;text-transform:uppercase;font-weight:700;font-size:.69em;line-height:2.2;margin:0 auto;background:#F66;padding:10px}
.santi-top img{max-width:80%;height:auto}
.santi-top img{max-width:80%;height:auto}
.bold{color:#694799;font-weight:700}
.left{max-width:400px;text-align:left;margin:0 auto}
.right{float:right}


figure{cursor:pointer}

.da{opacity:.5;cursor:auto}
.santi-links a:hover,.santi-links a.current-demo,.santi-links a.current-demo:hover{background:linear-gradient(to right,#00ecfc,#80ffb2);color:#000f3d}
.orange{border-color:#8fefd4;color:#8fefd4;background-color:none}

.santi-links{padding-top:1em;font-size:.8em}
.santi-links a{display:inline-block;margin:.5em;padding:.7em 1.1em;outline:0;border:2px solid #fff;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-radius:9px}
.related{text-align:center;font-size:1.5em}

footer{position:fixed;bottom:0;left:0}
.footer-basic-centered{background-color:#535353;box-shadow:0 1px 1px 0 rgba(0,0,0,0.12);box-sizing:border-box;width:100%;text-align:center;font:normal 18px sans-serif;padding:5px;margin-top:80px}
.footer-basic-centered .footer-santillana{color:#8f9296;font-size:.6em;margin:0;padding:0px}
.footer-basic-centered img{max-width:80%}


@media screen and (max-width:25em){.codrops-icon span{display:none}
}


@media(max-width:600px){.footer-basic-centered{padding:5px}
.footer-basic-centered .footer-santillana{font-size:12px}
}

.grid{margin:10px auto;max-width:1200px;width:90%}
.grid a{float:left;max-width:200px;width:25%;color:#333}
.grid figure{position:relative;overflow:hidden;margin:5px;background:#333}
.grid figure img{position:relative;display:block;width:100%;-webkit-transition:opacity .3s;transition:opacity .3s}
.grid figure button{position:absolute;padding:4px 20px;border:0;text-transform:uppercase;letter-spacing:1px;font-weight:bold;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}
.grid a:hover figure img{opacity:1}



@media screen and (max-width:58em){
.grid a{width:33.333%}
.grid a:nth-child(odd){margin:0}
.grid a:nth-child(3n-1){margin:30px 0 -30px 0}
}
@media screen and (max-width:45em){
.grid{max-width:500px}
.grid a{width:50%}
.grid a:nth-child(3n-1){margin:0}
.grid a:nth-child(even){margin:30px 0 -30px 0}
}

@media screen and (max-width:27em){
.grid{max-width:250px}
.grid a{width:100%}
.grid a:nth-child(even){margin:0}
}

.pic{transition:all 200ms ease-in-out;opacity:0}
.fadein{-webkit-animation-name:fadein;animation-name:fadein;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:700ms;animation-duration:700ms;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
.g1{animation-delay:500ms}
.g2{animation-delay:1000ms}
.g3{animation-delay:1500ms}
.g4{animation-delay:2000ms}
.g5{animation-delay:2000ms}

@-webkit-keyframes fadein{
0%{opacity:0;-webkit-transform:translateY(500px) perspective(400px) translateZ(-500px);transform:translateY(500px) perspective(400px) translateZ(-500px)}
40%{-webkit-transform:perspective(400px) translateZ(-250px);transform:perspective(400px) translateZ(-250px)}
100%{opacity:1;-webkit-transform:translateY(0) perspective(400px) translateZ(0);transform:translateY(0) perspective(400px) translateZ(0)}
}
@keyframes fadein{
0%{opacity:0;-webkit-transform:translateY(500px) perspective(400px) translateZ(-500px);transform:translateY(500px) perspective(400px) translateZ(-500px)}
40%{-webkit-transform:perspective(400px) translateZ(-250px);transform:perspective(400px) translateZ(-250px)}
100%{opacity:1;-webkit-transform:translateY(0) perspective(400px) translateZ(0);transform:translateY(0) perspective(400px) translateZ(0)}
}