@import url(https://fonts.googleapis.com/css?family=Lato:300,400,800;);

@font-face {font-family: "Fontdinerdotcom Loungy";
    src: url("fonts/344784ebebbed1e219f623f78d1456b1.eot"); /* IE9*/
    src: url("fonts/344784ebebbed1e219f623f78d1456b1.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/344784ebebbed1e219f623f78d1456b1.woff2") format("woff2"), /* chrome firefox */
    url("fonts/344784ebebbed1e219f623f78d1456b1.woff") format("woff"), /* chrome firefox */
    url("fonts/344784ebebbed1e219f623f78d1456b1.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
    url("fonts/344784ebebbed1e219f623f78d1456b1.svg#Fontdinerdotcom Loungy") format("svg"); /* iOS 4.1- */
}

*,:after,:before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}

.clearfix:before,.clearfix:after {
content:'';
display:table
}

.clearfix:after {
clear:both
}

html {
scroll-behavior:smooth
}

body {
background:#fff;
color:#2e2e2e;
font-size:100%;
line-height:1.25;
font-family:'Lato',sans-serif;
font-weight:300
}

.back{
background:url(../img/aros.jpg) #fff no-repeat left top;
}

a {
color:#ff2a48;
text-decoration:none;
outline:none
}

a:hover,a:focus {
color:#2e2e2e
}

.footer {
width:100%;
text-align:center;
background:#84ac32;
border-top:#693 solid 10px;
margin:50px auto 0
}

.footer p {
color:#fff;
padding:20px
}

.olympics-header {
margin:0 auto;
padding:0 2em 2em;
text-align:center
}

.olympics-header h1,.olympics-header-home h1,.textohome h1 {
margin:0;
font-family:'Fontdinerdotcom Loungy',sans-serif;
font-size:3.2em;
letter-spacing:5px;
}

.olympics-header h1.blue {
color:#1e88e5
}

.olympics-header h1.black {
color:#2e2e2e
}

.olympics-header h1.red {
color:#e53935
}

.olympics-header h1.yellow {
color:#ffb300
}

.olympics-header h1.green {
color:#43a047
}

.olympics-header p {
display:block;
margin:0 auto;
padding:.6em;
font-size:1.4em;
font-weight:300;
max-width:960px
}

span.right {
float:right
}

section {
padding:1em;
text-align:center
}

.related {
padding:2em 0 3em;
clear:both
}

.related p {
font-size:1.5em
}

.related > a {
display:inline-block;
text-align:center;
margin:20px 0;
padding:0
}

.related a img {
max-width:80%;
opacity:.8
}

.related a:hover img,.related a:active img {
opacity:1
}

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

.grid-wrap {
clear:both;
margin:0 auto;
padding:0;
max-width:1200px
}

.grid {
margin:30px auto;
padding:0;
list-style:none;
min-height:500px
}

.js .grid {
background:url(../img/loading.gif) no-repeat 50% 100px
}

.js .grid.loaded {
background:none
}

.grid li {
display:inline-block;
overflow:hidden;
width:300px;
text-align:left;
vertical-align:top
}

.js .grid li {
display:none;
float:left
}

.js .grid.loaded li {
display:block
}

.grid li > a,.grid li img {
display:block;
outline:none;
border-radius:8px
}

.grid li > a {
position:relative;
overflow:hidden;
margin:7px
}

.grid .curtain {
position:absolute;
top:0;
left:0;
z-index:100;
width:100%;
height:100%;
background:#fafafa
}

.grid.swipe-right .curtain {
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}

.grid.swipe-down .curtain {
-webkit-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0)
}

.grid.swipe-rotate .curtain {
width:200%;
height:200%;
-webkit-transform:rotate3d(0,0,1,90deg);
transform:rotate3d(0,0,1,90deg);
-webkit-transform-origin:top left;
transform-origin:top left
}

.grid .curtain::after {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,1);
content:''
}

.grid.swipe-right .curtain::after,.grid.swipe-rotate .curtain::after {
left:-100%
}

.grid.swipe-down .curtain::after {
top:-100%
}

.grid li h3 {
position:absolute;
bottom:0;
left:0;
margin:0;
padding:20px;
width:100%;
color:#fff;
text-align:right;
text-transform:uppercase;
letter-spacing:1px;
font-weight:800;
font-size:1em;
-webkit-transition:-webkit-transform 0.2s,color .2s;
transition:transform 0.2s,color .2s
}

.grid li.blue-o h3 {
background:#e1771a
}

.grid li.blue h3 {
background:#1e88e5
}

.grid li.black-o h3 {
background:#3f729b
}

.grid li.black h3 {
background:#1c2331
}

.grid li.red h3 {
background:#e53935
}

.grid li.yellow h3 {
background:#ffb300
}

.grid li.green-o h3 {
background:#a66aa3
}

.grid li.green h3 {
background:#43a047
}

.grid li > a::before {
position:absolute;
top:0;
left:0;
width:100.5%;
height:100.5%;
border:0 solid transparent;
background:rgba(0,0,0,0);
content:'';
-webkit-transition:border-width 0.2s,border-color .2s;
transition:border-width 0.2s,border-color .2s
}

.grid li.shown:hover h3 {
color:#fff;
-webkit-transform:translate3d(0,-30px,0);
transform:translate3d(0,-30px,0)
}

.grid li.shown:hover > a::before {
border-width:12px
}

.grid li.blue-o.shown:hover > a::before {
border-color:#e1771a
}

.grid li.blue.shown:hover > a::before {
border-color:#1e88e5
}

.grid li.black-o.shown:hover > a::before {
border-color:#3f729b
}

.grid li.black.shown:hover > a::before {
border-color:#1c2331
}

.grid li.red-o.shown:hover > a::before {
border-color:#1ac6ca
}

.grid li.red.shown:hover > a::before {
border-color:#e53935
}

.grid.swipe-down li.animate .curtain {
-webkit-animation:swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
animation:swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards
}

@-webkit-keyframes swipeDown {
50%,60% {
-webkit-transform:translate3d(0,0,0)
}

100% {
-webkit-transform:translate3d(0,100%,0)
}
}

@keyframes swipeDown {
50%,60% {
-webkit-transform:translate(0);
transform:translate(0)
}

100% {
transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0)
}
}

.grid li.animate .curtain::after {
-webkit-animation:fadeOut 1.5s ease forwards;
animation:fadeOut 1.5s ease forwards;
-webkit-animation-delay:inherit;
animation-delay:inherit
}

@-webkit-keyframes fadeOut {
50%,60% {
opacity:1
}

100% {
opacity:0
}
}

@keyframes fadeOut {
50%,60% {
opacity:1
}

100% {
opacity:0
}
}

.js .grid li img,.js .grid li h3 {
visibility:hidden
}

.grid li.animate img,.grid li.animate h3 {
-webkit-animation:showMe 1.5s step-end forwards;
animation:showMe 1.5s step-end forwards
}

@-webkit-keyframes showMe {
from {
visibility:hidden
}

60%,100% {
visibility:visible
}
}

@keyframes showMe {
from {
visibility:hidden
}

60%,100% {
visibility:visible
}
}

.grid li.shown img,.grid li.shown h3 {
visibility:visible
}

#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#7cb342;
text-indent:-9999px;
display:none;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px
}

#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#fff
}

#scroll:hover {
background-color:#834cbd;
opacity:1;
filter:alpha(opacity=100);
-ms-filter:alpha(opacity=100)
}

.homegrid-wrap {
text-align:center;
margin:50px auto 100px;
max-width:1090px;
width:100%;
padding:0;
-webkit-perspective:1500px;
perspective:1500px
}

.homegrid {
position:relative;
-webkit-transition:all .5s cubic-bezier(0,0,0.25,1);
transition:all .5s cubic-bezier(0,0,0.25,1);
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d
}

.homegrid figure,.homegrid .placeholder {
width:270px;
height:270px
}

.homegrid figure {
margin:0 40px 40px;
display:inline-block;
cursor:pointer;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}

.homegrid figure a img {
opacity:1
}

.homegrid figure a:hover img,.homegrid figure a:active img {
opacity:.8
}

#modal {
position:absolute;
width:80vw;
height:80vh;
left:10vw;
top:10vh;
background:rgba(0,0,0,0.8);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px
}

#homemodal {
position:absolute;
width:80vw;
height:80vh;
left:10vw;
top:10vh;
background:rgba(255,255,255,0)
}

video {
display:block;
margin:15vh auto
}

#close {
color:#fff;
position:absolute;
cursor:pointer;
top:20px;
right:20px;
font-weight:800;
text-transform:uppercase
}

#homemodal .textohome {
margin:0 auto;
padding:10vh;
background:rgba(255,255,255,1);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px
}

#homemodal .textohome p {
font-size:14px;
font-style:normal;
font-variant:normal;
font-weight:400;
line-height:23px
}

#closehome {
color:#ff2a48;
position:absolute;
cursor:pointer;
top:20px;
right:20px;
font-weight:800;
text-transform:uppercase
}

.jumbohome {
padding-top:100px;
text-align:center;
height:700px;
background:url(../img/fondo-imagen-web.jpg) #fff no-repeat center bottom;
background-size:cover
}

.homebutton {
background:#84ac32;
border-radius:5px;
border:2px solid #693;
display:inline-block;
cursor:pointer;
color:#fff;
font-family:'Fontdinerdotcom Loungy',sans-serif;
font-size:2em;
letter-spacing:2px;
padding:6px 24px;
text-decoration:none;
margin:15px 0 0
}

.homebutton:active {
position:relative;
top:1px
}

.olympics-header img {
-webkit-animation:roll 1s ease-out both,fadeIn 1s ease-out both;
-moz-animation:roll 1s ease-out both,fadeIn 1s ease-out both;
-o-animation:roll 1s ease-out both,fadeIn 1s ease-out both;
-ms-animation:roll 1s ease-out both,fadeIn 1s ease-out both;
animation:roll 1s ease-out both,fadeIn 1s ease-out both
}

.olympics-header h1 {
-webkit-animation:moveUp 1s ease-in-out both;
-moz-animation:moveUp 1s ease-in-out both;
-o-animation:moveUp 1s ease-in-out both;
-ms-animation:moveUp 1s ease-in-out both;
animation:moveUp 1s ease-in-out both
}

.olympics-header p,.right {
-webkit-animation:fadeIn .5s linear .5s both;
-moz-animation:fadeIn .5s linear .5s both;
-o-animation:fadeIn .5s linear .5s both;
-ms-animation:fadeIn .5s linear .5s both;
animation:fadeIn .5s linear .5s both
}

.container,#modal,#homemodal {
-webkit-animation:fadein 2s;
-moz-animation:fadein 2s;
-ms-animation:fadein 2s;
-o-animation:fadein 2s;
animation:fadein 2s
}

@keyframes fadein {
from {
opacity:0
}

to {
opacity:1
}
}

@-moz-keyframes fadein {
from {
opacity:0
}

to {
opacity:1
}
}

@-webkit-keyframes fadein {
from {
opacity:0
}

to {
opacity:1
}
}

@-ms-keyframes fadein {
from {
opacity:0
}

to {
opacity:1
}
}

@-o-keyframes fadein {
from {
opacity:0
}

to {
opacity:1
}
}

@-webkit-keyframes roll {
0% {
-webkit-transform:translateX(500px) rotate(360deg)
}

100% {
-webkit-transform:translateX(0px) rotate(0deg)
}
}

@-moz-keyframes roll {
0% {
-moz-transform:translateX(500px) rotate(360deg);
opacity:0
}

100% {
-moz-transform:translateX(0px) rotate(0deg);
opacity:1
}
}

@-o-keyframes roll {
0% {
-o-transform:translateX(500px) rotate(360deg);
opacity:0
}

100% {
-o-transform:translateX(0px) rotate(0deg);
opacity:1
}
}

@-ms-keyframes roll {
0% {
-ms-transform:translateX(500px) rotate(360deg);
opacity:0
}

100% {
-ms-transform:translateX(0px) rotate(0deg);
opacity:1
}
}

@keyframes roll {
0% {
transform:translateX(500px) rotate(360deg);
opacity:0
}

100% {
transform:translateX(0px) rotate(0deg);
opacity:1
}
}

@-webkit-keyframes moveUp {
0% {
-webkit-transform:translateY(40px)
}

100% {
-webkit-transform:translateY(0px)
}
}

@-moz-keyframes moveUp {
0% {
-moz-transform:translateY(40px)
}

100% {
-moz-transform:translateY(0px)
}
}

@-o-keyframes moveUp {
0% {
-o-transform:translateY(40px)
}

100% {
-o-transform:translateY(0px)
}
}

@-ms-keyframes moveUp {
0% {
-ms-transform:translateY(40px)
}

100% {
-ms-transform:translateY(0px)
}
}

@keyframes moveUp {
0% {
transform:translateY(40px)
}

100% {
transform:translateY(0px)
}
}