@-webkit-keyframes onda { 0% {top: 430px; opacity:0;} 25% {top: 420px;opacity:0.8;} 50% {top: 430px; opacity:0;} 100% {top: 430px; opacity:0;}  }
@keyframes onda { 0% {top: 430px; opacity:0;} 25% {top: 420px;opacity:0.8;} 50% {top: 430px; opacity:0;} 100% {top: 430px; opacity:0;} }

@-webkit-keyframes ondab { 0% {top: 630px; opacity:0;} 25% {top: 620px;opacity:0.8;} 50% {top:630px; opacity:0;} 100% {top: 630px; opacity:0;} }
@keyframes ondab { 0% {top:630px; opacity:0;} 25% {top: 620px;opacity:0.8;} 50% {top:630px; opacity:0;} 100% {top: 630px; opacity:0;} }

@-webkit-keyframes ondac { 0% {top: 830px; opacity:0;} 25% {top: 820px;opacity:0.8;} 50% {top:830px; opacity:0;} 100% {top: 830px; opacity:0;} }
@keyframes ondac { 0% {top:830px; opacity:0;} 25% {top: 820px;opacity:0.8;} 50% {top:830px; opacity:0;} 100% {top: 830px; opacity:0;} }

@-webkit-keyframes ondad { 0% {top: 930px; opacity:0;} 25% {top: 920px;opacity:0.8;} 50% {top:930px; opacity:0;} 100% {top: 930px; opacity:0;} }
@keyframes ondad { 0% {top:930px; opacity:0;} 25% {top:920px;opacity:0.8;} 50% {top:930px; opacity:0;} 100% {top:930px; opacity:0;} }


body {background-color:#4527e0; margin:0; min-width:480px;}

header {font-family: 'Finger Paint', cursive; color: #fff; width: 100%; height: 50px; font-size: 25px; text-align: center; background-color: #b05c00; border-bottom: solid 2px #944e04; position: fixed; top: 0; left: 0; z-index: 99; min-width:480px;background-image:url(img/topo.png); background-repeat:repeat-x;background-position:center;}

.menu-link {display: inline-block;vertical-align: middle;color: #fff;text-decoration: none; opacity: 0.8;    -webkit-transition: opacity 0.4s; /* Safari */ transition: opacity 0.4s;}
.menu-link:hover {opacity:1;}
#menu-1 {display: block;height: 100%;margin: 0 auto;text-align: center;}
#menu-1 .menu-link {margin:6px 10px 0 10px;}
#menu-2 {position:absolute; right:5px; top:0;height: 100%;float:right;}
#menu-2 .menu-link {margin: 6px 2px 0 4px;}

#section-video {width: 100%; height: 110vw;     min-height: 740px; max-height: 1040px; margin: 0 auto; overflow: hidden; position: relative; background-image: url(img/section-video-bg.jpg);    background-repeat: repeat-x; text-align: center; background-position:top;}
#logo {margin:0 auto; position:relative; display:block;margin-top:110px;    width: 77.5%;  max-width: 630px; }
#section-video p {color: #fafaff;font-family: 'Finger paint'; position: relative; margin: 0; text-shadow: -3px 1px 4px #000;font-size: 26px;}
#try p {color: #fafaff;font-family: 'Finger paint'; position: relative; margin: 0; text-shadow: -3px 1px 4px #000;font-size: 26px;}
#video {width: 80vw;height: 45vw;     background-color: #000; position: relative;       margin: 80px auto 0; z-index: 30; border:solid 16px; max-width:900px;     max-height: 507px;    min-width: 480px; min-height: 270px; -webkit-border-image: url(img/wood-border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(img/wood-border.png) 30 round; /* Opera 11-12.1 */border-image: url(img/wood-border.png) 30 round;}
#video iframe {width:100%; height:100%;}

#section-content {background-color:#591000; overflow:hidden; background-image:url(img/content-bg.png); position:relative; width:100%; min-width:850px;     height: max-content;    padding: 40px 0; border-top: solid 18px rgb(68, 11, 0);  -webkit-border-image: url(img/wood-border2.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(img/wood-border2.png) 30 round; /* Opera 11-12.1 */border-image: url(img/wood-border2.png) 30 round;}
#artwork, #text {display:inline-block; vertical-align:middle;z-index:5; position:relative;}
#text {width:48%;}
#text p, #text h3 {width:80%; margin:0 auto 30px; color:#fff;     font-size: 30px; text-shadow: #e86627 3px 3px 1px;}
#text h3 {font-family: 'Finger paint';min-width: 380px; max-width: 440px; }
#text h2 {font-family: 'Finger paint';min-width: 380px; max-width: 440px; color:#fff; font-size: 16px; text-shadow: #e86627 1px 1px 1px;}
#text p {font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 18px;letter-spacing: 1; line-height:1.6;text-shadow: #e86627 2px 2px 1px;      min-width: 380px; max-width: 440px; }
#artwork {width:48%; max-width:610px;height:auto; border: 15px solid transparent;  -webkit-border-image: url(img/wood-border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(img/wood-border.png) 30 round; /* Opera 11-12.1 */border-image: url(img/wood-border2.png) 30 round;}
#artwork img {width:100%;height:auto; max-width:610px;;}

#extras {
margin: 0 auto 30px;
max-width: 440px;
min-width: 380px;
}

#extras>div {
display: inline-block;
width: 200px;
height: 220px;
margin: 0 5px 0;
vertical-align: top;
}

.pixo {position:absolute;    position: absolute;
    opacity: 0.2; z-index:0;}
#pixo1 { top: -35px;left: -40px;}
#pixo3 { top: 240px; right: -20px;}
#pixo2 {right: -26px;top: -30px;}
#pixo4 {bottom:-10px;left:auto; right:-3px; }
#pixo5 {bottom:-10px; left:-3px;}


.onda {position: absolute; height: auto;}
#onda1 {left: 5vw; width: 30px;}
#onda2 {left: 20vw; width: 35px;}
#onda3 {left: 30vw; width: 20px;}
#onda4 {left: 90vw; width: 50px;}
#onda5 {left: 60vw; width: 35px;}
#onda6 {left: 90vw; width: 20px;}
#onda7 {left: 75vw; width: 35px;}

#onda8 {left: 10vw; width: 45px;}
#onda9 {left:5vw; width: 65px;}
#onda10 {left: 90vw; width: 70px;}
#onda11 {left: 70vw; width: 60px;}

#onda12 {left: 3vw; width:80px;}
#onda13 {left: 90vw; width: 80px;}

/**  ***/

#onda1, #onda5 {-webkit-animation: onda 5s infinite;
animation: onda 5s infinite both;}

#onda2  {-webkit-animation: onda 5s 800ms infinite;
animation: onda 5s 800ms infinite both;}
 #onda7 {-webkit-animation: onda 5s 1700ms infinite;
animation: onda 5s 1700ms infinite both;}

#onda3, #onda6 {-webkit-animation: onda 5s 1500ms infinite;
animation: onda 5s 3000ms infinite both;}

#onda8  {-webkit-animation: ondab 5s 50ms infinite;
animation: ondab 5s 800ms infinite both;}
#onda11 {-webkit-animation: ondab 5s 800ms infinite;
animation: ondab 5s 50ms infinite both;}
 #onda4 {-webkit-animation: ondab 5s 2050ms infinite;
animation: ondab 5s 2050ms infinite both;}

#onda9 {-webkit-animation: ondac 5s 3050ms infinite;
animation: ondac 5s 3050ms infinite both;}

#onda10 {-webkit-animation: ondac 5s 1050ms infinite;
animation: ondac 5s 1050ms infinite both;}

 #onda12 {-webkit-animation: ondad 5s infinite;
animation: ondad 5s infinite both;}

#onda13  {-webkit-animation: ondad 5s 4800ms infinite;
animation: ondad 5s 4800ms infinite both;}


@media (max-width: 600px) {
	#video {margin: 40px auto 0;}
	#text {width: 100%;}
#artwork, #text {display: block;}
#artwork {    width: 570px;    margin-bottom: 160px;}
#section-content {min-width: 600px;}
#pixo4 {right: -73px;}
#pixo5 {left: -93px;}

#menu-1 {display: inline-block; height: 100%;float: left;}
#menu-1 .menu-link {margin:6px 10px 0 10px;}
#menu-2 {display: inline-block; height: 100%;float:right;}
#menu-2 .menu-link {margin:6px 10px 0 10px;}
}
