@charset "utf-8";
@font-face{
	 font-family:Bebas-Neue;
	src: url("../fuentes/BebasNeue.otf");
}
@font-face{
	 font-family:Misses;
	src: url("../fuentes/Misses-Font.otf");
}
@font-face{
	 font-family:Montserrat-bold;
	src: url("../fuentes/Montserrat-Bold.otf");
}	
@font-face{
	 font-family:Montserrat-Regular;
	src: url("../fuentes/Montserrat-Regular.otf");
}

*{
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.container{
	max-width:500px;
	margin:auto;
}
.menu_bar{
	display:none;
}
#logo_first{
    position:absolute;
    width:50%;
    top:5%;
    left:20%;
}
header{
	width:100%;
	top:-80px;
	position:relative;
}
header nav{
	background:#801519;
	z-index:1000;
	max-width:500px;
	width:100%;
	text-align:center;
}
header nav ul{
	list-style:none;
}
header nav ul li{
	display:inline-block;
	position:relative;
}
header nav ul li a{
	color:white;
	text-decoration:none;
	display:block;
	padding:20px;
	font-family:Bebas-Neue;
	font-size:53px;
}
header nav ul li a img{
	text-align:center;
	margin-left:15%;
	float:left;
}
#btclose{
   margin-left:90%;
    width:5%;
    margin-top:5%;
    margin-bottom:5%;
    z-index:300;
}
.img_menu{
	margin-left:20%;
}
header nav ul li a p{
	display:inline-block;
	margin-top:2%;
}

.redes_nav a{
	display:inline-table;
}
.redes_nav img{
	width:70px;
	height:70px;
}
footer{
	color:white;
	background-color:#801519;
}
footer a{
	text-decoration:none;
	color:white;
}
footer h1{
	padding-top:5%;
	text-align:center;
	font-family:Bebas-Neue;
	font-size:45px;
}
#redes_f{
	width:100%;
	text-align:center;
	margin-top:5%;
	font-family:Montserrat-Regular;
	font-size:17px;
}
.t1{
    margin-top:5%;
}
#redes_f div a p{
    font-size:13px;
    margin-left:16%;
}
#redes_f div{
width:20%;
display:inline-block;
margin-left:5%;
margin-right:5%;
}
#redes_f img{
	margin-left:20%;
}
#tel{
	width:100%;
	text-align:center;
	margin-top:5%;
}
#tel img{
	float:left;
	margin-left:3%;
}
#tel p{
	display:inline-table;
	margin-top:1%;
	font-family:Montserrat-Regular;
	font-size:17px;
	}
#privacidad{
	margin-top:5%;
	text-align:center;
	font-family:Montserrat-Regular;
	font-size:19px;
}
#dsw{
	text-align:center;
	background:#5E1405;
	padding-top:2%;
	padding-bottom:2%;
	margin-top:5%;
	font-family:Montserrat-Regular;
	font-size:14px;
}
.modal1{
	position:fixed;
	width:40%;
	bottom:5%;
	left:5%;
	z-index:100;
}
.modal1 img{
	width:100%;
}
.modal2{
	position:fixed;
	width:40%;
	bottom:15%;
	left:5%;
	z-index:100;
}
.modal2 img{
	width:100%;
}
.modal{
	position:fixed;
	width:17%;
	bottom:5%;
	right:5%;
	z-index:100;
}
.modal img{
	width:100%;
}

	.modal3{
	    width:100%;
	    height:100%;
	    background: rgba(0,0,0,0.8);
	    z-index:1200;
	    position:fixed;
	    top:0;
	    left:0;
	    display:flex;
	    
	    animation: modal 2s 3s forwards;
	    visibility: hidden;
	    opacity:0;
	}
	.contain{
	    margin:auto;
	    width:90%;
	    height:120%;
	    margin-top:30%;
	    border-radius:15px;
	}
	.contain img{
	    width:100%;
	    border-radius:15px;
	}
	#cerrar{
	    display:none;
	}
	#cerrar + label {
	    position:fixed;
	    color:white;
	    font-size:15px;
	    z-index:1500;
	    background:darkred;
	    width:40px;
	    line-height:40px;
	    padding-left:3.5%;
	    border-radius:50%;
	    right:10px;
	    top:10px;
	    cursor:pointer;
	    
	    animation: modal 2s 3s forwards;
	    visibility: hidden;
	    opacity:0;
	}
	
	#cerrar:checked + label, #cerrar:checked ~ .modal3{
	    display:none;
	}
	
	@keyframes modal{
	    100%{
	      visibility: visible;
	    opacity:1;  
	    }
	}
@media screen and (max-width: 5000px){
	body{
		padding-top:80px;
	}
	.menu_bar{
		display:block;
		max-width:500px;
		width:30%;
		top:0;
		margin-left:65%;
		
	}
	.menu_bar .bt_menu{
		display:block;
		padding:20px;
		color:white;
		overflow:hidden;
		font-size:25px;
		text-decoration:none;
	}
	.menu_bar span{
		float:right;
		font-size:40px;
	}
	header nav{
		width:100%;
		position:fixed;
		bottom:110%;
		margin-top:0px;
		height:100%;
			}
	header nav ul li{
		display:block;
		
		-webkit-box-shadow: 2px 2px 5px #5B0B0E;
  		-moz-box-shadow: 2px 2px 5px #5B0B0E;
  		box-shadow: 2px 2px 5px #5B0B0E;
	
	}
	header nav ul li a{
		display:block;
	}

}
@media screen and (max-width: 500px){
	.menu_bar{
		display:block;
		max-width:500px;
		width:40%;
		top:0;
		left:60%;
		
	}
}