*{margin: 0; padding: 0; list-style: none; text-decoration: none; }
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');

@font-face{
	font-family: "Chunk";
	src: url(fonts/ChunkfiveEx2.ttf);
    font-weight: 100;
}
.mobile{ display: none;}
.desktop{display: block; }
.wrap80{
    width: 80%; margin: 50px auto; 
}
body{ font-family: 'Montserrat', sans-serif;}
p{line-height: 1.5; text-indent: 30px; padding: 10px 0;}
nav{
	position: fixed;
	width: 100vw;
	height: 75px;
	background: rgba(42,12,08, .6) url(images/BE4DBC186C212596.png) center 5px/50% repeat-x; 
	z-index: 99; 
}

nav ol{width: 100%; height: 65px; position: absolute; top: 0;}
nav ol li{ height: 60px; position: relative; display: inline-block; vertical-align: top;}
#logito{ width: 80px; margin: -10px; }

/*#logito{ position: absolute; height: 40px; bottom: 0px; left: 0; margin: 0;}

nav ol li:first-child{ width: 50px; height: 55px;left: 20px; top: 0; margin-right: 50px; }*/
nav a{color: #e49b1b; display: block ; padding: 30px 20px 0 20px;}

nav ol ol{display: none ; position: absolute; top:60px; left: 0;}
nav ol li:hover ol{display: block;}
nav ol ol li{ width: 200%;margin-right: 0; display: block;}
nav ol ol li a{width: 100%; height: 45px; display: block;background-color: rgba(42,12,08, 1) ;}

#myVideo{position: absolute; top: 0; left: 0; width: 100vw; z-index: 0; min-height: 100vh; min-width: 100vw; width: 177vh;}

header{
	width: 100vw;
	height: 80vh;
	position: relative;
    overflow: hidden;
}

#menucomida{
    z-index: 1;
    background-color:#e49b1b ;
    width: auto;
    padding: 20px 100px;
    border-radius: 20px;
    font-size: 1.25em;
    display: block;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    text-align: center;
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -50%);
}

h1{ 
	width: 350px; height: 250px; background: url(images/tomochilogo.svg) center center no-repeat; 
	z-index: 1;
	position: absolute;
	top: 35%; left: 50%;
	transform: translateX(-50%);
	text-indent: -2250px;
	overflow: hidden;

}
h1,h2,h3,h4,h5{
	font-family: "Chunk";
    letter-spacing: 2px;
}
#home header h2{
    width: 100%;
	position: absolute;
	top: 82%;
    text-align: center;
	z-index: 1;
	color:#e49b1b; 
	color:white;
    text-shadow: 0 0 10px black ;
	font-size: 2em;
    letter-spacing: 3px;
}

#slider{
	width: 100vw;
	min-height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
header #slider img{ min-width: 110%; width: 100%;	
    min-height: 100vh; height: 100vh;
 /*transform: translateY(-15%);*/}

main{ 
    width: 100vw;
    height: auto;
    position: relative;
    border: solid 1px white;
}


#home main h2{
    margin: 50px auto 20px auto;
    text-align: center;
    width: 80%;
}

#home main p {
    font-size: 2em; 
    text-align: center;
}
#home main p:nth-child(2) {
    width: 80%; margin: 50px auto;
}

#home main #whats{
    display: block; background-color:#e49b1b;
    width: 200px;
    padding: 20px;
    border-radius: 20px;
    color: black;
    font-family: sans-serif;
    font-size: 1.5em;
    text-align: center;
    margin: 20px auto;
    line-height: 1;
    position: relative;
    text-indent: 25px;
}

main a img{ width: 45px; height: 45px; position: absolute; left: 15px; top: 5px; }

footer{
    background-image:  url(images/BE4DBC186C212596.png),url(images/BE4DBC186C212596.png);
    background-position:  center 25px, center 90%;
    background-size: 50%;
    background-repeat:  repeat-x;
    background-color: #e49b1b;
    width: 100vw;
    height: 200px;
    padding: 50px 0;
}

footer ol{
    text-align: center;
    margin: auto;
    padding: 25px 0;
    width: 75%;
    display: flex;
}
footer li{ width: 25%;}
#phone{ transform: translateY(20%); width: 30px;}
footer a[id]{display: inline-block;
    width: 25px; height: 25px; overflow: hidden; text-indent: 500px; background-repeat: no-repeat;
}
footer ol p{text-indent: 0;}
footer ol a{color: black;}

#fb{ background-image: url(images/fb.svg);}
#in{background-image: url(images/insta.svg);}
#di{ background-image: url(images/didilogo.svg);}

/* paginas secundarias */

#banner{
    width: 100vw;
    height: 350px;
    text-align: center;
    position: absolute;
    top: 0; left: 0;
    font-size: 3em;
    margin: 0; padding: 0;
    line-height: 6;
    color: white;
    letter-spacing: 2px;
}
#historia header{ height: 300px;}
#historia #banner{
    background: url(images/historia.jpg) center/100% no-repeat; 
}

#historia article{display: flex; padding: 0px 10vw 50px 10vw;}
#historia article p,#historia article h2 {padding: 20px;}

#historia h3{ text-align: center;}
#historia #parallax{
    width: 100vw;
    height: 700px;
    background: url(images/historiarest.jpg) center/100% fixed no-repeat;
    position: relative;
}
#historia #parallax h3{color: white; text-align: center; padding: 10px 10px 20px 10px; font-size: 2em; }

#historia #parallax div{ background: rgba(42,12,08, .6); padding: 50px 10vw; color: white; position: absolute; top: 0;}

#historia main h3{
    width: 80%;
}
.hide{display: none;}
.show{display: block;}
#promesa header{ height: 300px;}
#promesa #banner{
    background: url(images/promesa.jpg) center/cover no-repeat; 
}
#promesa #parallax{
    width: 100vw;
    height: 600px;
    background: url(images/tomochi.jpg) center/100% no-repeat fixed;
}
#promesa main{
    width: 80vw;
    display: flex; padding: 50px 10vw;
}
#promesa main section{
    padding: 2.5vw;
}
#promesa main p{
    line-height: 1.5;
    padding: 10px 0;
}

#promesa span{	font-family: "Chunk"; font-size: 1.5em;}

#eventos header,#unete header,#gastronomia header{ height: 300px;}
#eventos main, #unete main{ height: auto; display: flex;}
#eventos form, #msg, #unete form{ width: 50%; padding: 0 25px;}
#eventos input, #eventos select, #eventos textarea,#unete input, #unete select, #unete textarea{width: 100%;}
#eventos textarea{height: 100px;}

#eventos #eventosimagen, #unete #eventosimagen{
    height: 35vw; width: 50%;
    background: url(images/eventos.jpg) center/cover no-repeat;
}
#unete #eventosimagen{ background: url(images/unete.jpg) center/cover no-repeat;}

#eventos #banner,#unete #banner{background: url(images/contacto.jpg) center 75%/100% no-repeat; }

#gastronomia #banner{
    background: url(images/gastronomia.jpg) center/cover no-repeat; 
}

#gastronomia div{display: flex;}
#gastronomia div img{ height: 35vw; margin: 1vw;}


@keyframes fadein{
    0%{opacity: 0;}
    5%{opacity: 1;}
    33%{opacity: 1;}
    35%{opacity: 0;}
    100%{opacity: 0;} 
}

#slider li{
    opacity: 0;
    position: absolute; top: 0; left: 0;
    animation: fadein 10s 0s infinite linear;
}
#slider li:nth-child(1){animation: fadein 20s 0s infinite linear;}
#slider li:nth-child(2){animation: fadein 20s 6.6s infinite linear;}
#slider li:nth-child(3){animation: fadein 20s 13.2s infinite linear;}

#noticias{
    background-color: saddlebrown;
    width: 100%; height: 300px;
    color: white;
    padding: 50px 0;
    text-align: center;
}
#noticias h3{ font-size: 2em; letter-spacing: 3px; font-weight: lighter;}


#cocina{
    width: 100vw;
    height: 100;
    background: url(images/cocina.jpg) center/cover no-repeat;
}

@media screen and (max-width:800px){
    *{width: 100%;}
    #banner{font-size: 2.5em; line-height: 1; padding-top: 100px; height: 150px;}
    .mobile{ display: block;}
    #video2{background: url(images/background1.jpg) center/cover; 	width: 100vw;
	min-height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;}
    #menucomida{width: auto;}
    .desktop{display: none; }
    nav *{text-align: center; }
    #menuicon{font-size: 3em; padding: 0;}
    nav ol{display: none; }
    nav:target > ol{display: block;}
    nav ol a{ height: auto; background-color: rgba(42,12,08, .85) ; padding: 30px 0;}
    nav ol ol li{ width: 100%; height: 80px; margin-right: 0; display: block;}
    nav ol li{ height: 75px; position: relative; display: inline-block; vertical-align: top;}
    nav ol li:target ol{ display: block;}
    footer{ display: block; height: auto;}
    footer ol{display: block;}
    footer ol li{ width: 100%; margin: 20px auto;  text-align: center;}
    #historia #parallax{
    background: url(images/historiarest.jpg) right/100vh fixed no-repeat;}
    #historia #parallax h3{color: white; text-align: center; padding: 10px 10px 20px 10px; font-size: 2em; }
    #historia #parallax div{width: auto;}
    #historia article{display: flex; padding: 0px 10vw 50px 10vw; width: 80vw;}
    #historia article p,#historia article h2 {padding: 20px;}
    #promesa main{width: 80vw;display: inherit; padding: 50px 10vw;}
    #promesa main section{padding: 2.5vw;}
    #eventosimagen{display: none;}
    #eventos form, #unete form{ width: 80%;  margin: auto; padding: 0 25px;}
    #gastronomia div{display: inherit;}
    #gastronomia div img{ height: auto; width: 80vw; margin: 1vw;}



}