@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:#40a8f5}
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:0 auto 20px;width:90%;max-width:800px}
.gridtop{width:90%;max-width:1100px !important}
.grid a{float:left;max-width:250px;width:25%;color:#333}
.grid figure{position:relative;overflow:hidden;margin:5px;background:transparent}
.grid figure img{position:relative;display:block;width:100%;-webkit-transition:opacity .3s;transition:opacity .3s}
.grid figcaption{position:absolute;top:0;z-index:11;width:100%;height:100%;text-align:center}
.grid figcaption h2{margin-top:-25px;color:#000;text-transform:none;letter-spacing:1px;font-weight:500;font-size:130%;-webkit-transition:-webkit-transform .3s;transition:transform .3s}
.grid figcaption p{padding:0 20px;color:#aaa;font-weight:300;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}
.grid figcaption h2,.grid figcaption p{-webkit-transform:translateY(50px);transform:translateY(50px)}
.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 figcaption,.grid figcaption h2,.grid figcaption p,.grid figure button{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid svg{position:absolute;top:-1px;z-index:10;width:100%;height:100%}
.grid svg path{fill:#83c2c9}
.grid a:hover figure img{opacity:1}
.grid a:hover figcaption h2,.grid a:hover figcaption p{-webkit-transform:translateY(0);transform:translateY(0)}
.grid a:hover figcaption p{opacity:0}
.grid a:hover figcaption h2{opacity:0}
.grid2{margin:40px auto 120px;max-width:1250px;width:90%;margin-left:43%}
.grid2 a{float:left;max-width:435px;width:25%;color:#333}
.grid2 figure{position:relative;overflow:hidden;margin:5px;background:#333}
.grid2 figure img{position:relative;display:block;width:100%;-webkit-transition:opacity .3s;transition:opacity .3s}
.grid2 figcaption{position:absolute;top:0;z-index:11;width:100%;height:100%;text-align:center}
.grid2 figcaption h2{margin-top:-25px;color:#000;text-transform:none;letter-spacing:1px;font-weight:500;font-size:130%;-webkit-transition:-webkit-transform .3s;transition:transform .3s}
.grid2 figcaption p{padding:0 20px;color:#aaa;font-weight:300;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}
.grid2 figcaption h2,.grid2 figcaption p{-webkit-transform:translateY(50px);transform:translateY(50px)}
.grid2 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}
.grid2 figcaption,.grid2 figcaption h2,.grid2 figcaption p,.grid2 figure button{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid2 svg{position:absolute;top:-1px;z-index:10;width:100%;height:100%}
.grid2 svg path{fill:#83c2c9}
.grid2 a:hover figure img{opacity:1}
.grid2 a:hover figcaption h2,.grid2 a:hover figcaption p{-webkit-transform:translateY(0);transform:translateY(0)}
.grid2 a:hover figcaption p{opacity:0}
.grid2 a:hover figcaption h2{opacity:0}

.demo-2 .grid2 figcaption h2{color:#FFF}
.demo-2 .grid2 figcaption p{-webkit-transition-delay:.05s;transition-delay:.05s}
.demo-2 .grid2 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 .grid2 a:hover figure button{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transform:translateY(0);transform:translateY(0)}
.demo-2 .grid2 figcaption h2,.demo-2 .grid2 figcaption p,.demo-3 .grid2 figcaption h2,.demo-3 .grid2 figcaption p{-webkit-transition-timing-function:cubic-bezier(0.250,0.250,0.115,1);-webkit-transition-timing-function:cubic-bezier(0.250,0.250,0.115,1.445);timing-function:cubic-bezier(0.250,0.250,0.115,1.445)}
.demo-2 .grid2 a:hover figcaption p,.demo-3 .grid2 a:hover figcaption p{-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:.1s;transition-duration:.1s}

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


@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}
.grid2 a{width:33.333%}
.grid2 a:nth-child(odd){margin:0}
.grid2 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}
.grid figcaption h2{margin-bottom:0;-webkit-transform:translateY(30px);transform:translateY(30px)}
.grid figcaption p{margin:0;padding:0 10px}
.grid2{max-width:500px;margin:0 auto}
.grid2 a{width:50%}
.grid2 a:nth-child(3n-1){margin:0}
.grid2 a:nth-child(even){margin:30px 0 -30px 0}
.grid2 figcaption h2{margin-bottom:0;-webkit-transform:translateY(30px);transform:translateY(30px)}
.grid2 figcaption p{margin:0;padding:0 10px}
}
@media screen and (max-width:27em){.grid{max-width:250px}
.grid a{width:100%}
.grid a:nth-child(even){margin:0}
.grid2{max-width:250px;margin:0 auto}
.grid2 a{width:100%}
.grid2 a:nth-child(even){margin:0}
}
.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}

.g1{animation-delay:500ms}
.g2{animation-delay:1000ms}
.g3{animation-delay:1500ms}
.g4{animation-delay:2000ms}
.g5{animation-delay:2500ms}
.g6{animation-delay:3000ms}

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