@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: #5d54e7}
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:20px auto 20px;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}
.demo-2 .grid figure button{bottom:0;left:0;padding:15px;width:100%;background:#F9C;color:#333;font-weight:300;-webkit-transform:translateY(100%);transform:translateY(100%)}
.demo-2 .grid a:hover figure button{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transform:translateY(0);transform:translateY(0)}

.gd {margin:10px auto 10px;max-width:1200px;width:100%;font: 22px calibri,helvetica;color:#fff; height:54px;line-height:1.5}
.gd a {float:left;font:18px calibri,helvetica;color:#fff;margin-right:30px}
.gd img {height:16px}

.pic{-webkit-transition:all 200ms ease-in-out;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}

#pic2,#pic3,#pic4,#pic5,#pic6,#pic7, .ln1 {animation-delay: 200ms}
#pic8,#pic9,#pic10,#pic11,#pic12,#pic13 {animation-delay: 500ms}
#pic14,#pic15,#pic16,#pic17,#pic18,#pic19 {animation-delay: 800ms}
#pic20,#pic21,#pic22,#pic23,#pic24,#pic25 {animation-delay: 1100ms}
#pic26,#pic27,#pic28,#pic29,#pic30,#pic31,#pic32 {animation-delay: 1400ms}
.gr3 {animation-delay: 1400ms}
.gr4  {animation-delay: 1800ms}



@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}
}

@-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)}
}