*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	border: none;
	outline: none;
}

 		@font-face {
			font-family: oswald;
			src: url('../Oswald.ttf');
}
		@font-face {
			font-family: anton;
			src: url('../Anton-Regular.ttf');
}
		@font-face {
			font-family: bebasneue;
			src: url('../BebasNeue-Regular.ttf');
}
		@font-face {
			font-family: opensans-italic;
			src: url('../OpenSans-Italic.ttf');
}
		@font-face {
			font-family: opensans;
			src: url('../OpenSans.ttf');
}
		@font-face {
			font-family: Roboto-Black;
			src: url('../Roboto-Black.ttf');
}
		@font-face {
			font-family: Roboto-Bold;
			src: url('../Roboto-Bold.ttf');
}
		@font-face {
			font-family: Roboto-Light;
			src: url('../Roboto-Light.ttf');
}
		@font-face {
			font-family: Roboto-Regular;
			src: url('../Roboto-Regular.ttf');
}
		@font-face {
			font-family: exo;
			src: url('../exodemi-bold.otf');
}
		@font-face {
			font-family: exo-light;
			src: url('../exolight.otf');
}


		body{
			font-size: 10px;
			overflow-x: hidden;

		}
		.conteiner-arriba{
			
			width: 100%;
			height: 5vh;
			background: #000D58;
			border-bottom: 2px solid #000;
		}
		.caja1-ul{
			position: relative;
			display: inline;
			margin-left: 15px;
			top: 6px;
			
		}
		.caja1-li{
			display: inline;
			padding-right: 15px;
			font-size: 1.5em;

		}
		
		#icono-instagram{
			display: inline;
			position: relative;
			
			right: 1px;
			color:  #F7FF4D;
		}
		#icono2-instagram{
			display: inline;
			position: relative;
			
			right: 1px;
			color:  #F7FF4D;
		}
		#icono3-instagram{
			display: inline;
			position: relative;
			
			right: 1px;
			color:  #F7FF4D;
		}
		.caja1-a{
			color: #fff;
			font-family: opensans;
			text-shadow: 0 0 5px #fff;
			font-size: 1em;

			
		}
		.caja1-a:hover{
			font-size: 1.1em;
			transition: 0.5s;
		}

		.logo{	
			display: inline-block;
			width: 18%;
		}
		.conteiner{ 
			position: relative;
			display: inline-block;
			width: 100%;
			height: 12vh;
			
			background: linear-gradient(to bottom, #22B4FF, #ffff);
			
			
		}
		.conteiner-a-1{
		 	color: #000;
		 	left: 0;
		 	position: absolute;
		}
		.conteiner-nav{
			position: relative;
			text-align: center;
		}
		
		.conteiner-li-img{
			display: inline;
			position: relative;	
		}
		.conteiner-li{
			font-family: oswald;
			font-weight: 900;
			display: inline-block;
			position: relative;
			background: linear-gradient(to top, #FFFA5B, #ffff);
			margin-right: 14px;
			font-size: 1.8em;
			border: 2px solid #000;
			border-bottom-left-radius: 20px;
			border-top-right-radius: 20px;
			padding: 6px;
			margin-top: 15px;
		}
		.conteiner-li:hover{
			font-size: 2.2em;
			transition: 0.5s;
		}
		.conteiner-a{
			color: #000;
		}
		.rotate{
			transform: rotate(180deg) !important;
		}
		.toggle{
			border: 2px solid #000;
			width: auto;
			height: auto;
			color: #fff;
			position: absolute;
			top: 10px;
			right: 40px;
			font-size: 40px;
			transform: rotate(90deg);
			cursor: pointer;
			transition: 1s;
			background-color: rgba(0, 0, 0, 0.3);
			display: none;
			
		}
		.p-toggle{
			width: 100%;
			height: 100%;
		}
		.section-descripcion{
			position: relative;
			display: flex;
			width: 100vw;
			min-height: 50vh;
			
		}
		.div-img-descripcion{
			width: 40%;
			min-height: 50vh;
			border: 2px solid black;
			display: inline-block;
		}
		.img{
			display: inline-block;
			position: relative;
			width: 100%;
			height: 100%;
			object-fit: cover;

		}
		.botones{
			font-size: 30px;
			width: 50px;
			height: 50px;
			line-height: 50px;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.7);
			text-align: center;
			font-weight: bold;
			position: absolute;

			color: #fff;
			box-shadow: 0 0 10px rgba(255, 255, 255, .6);
			-webkit-transition:  all .3s ease;
			-o-transition:  all .3s ease;
			transition: all .3s ease;

		}
		.botones:hover{
			cursor: pointer;
			transform: scale(1.2,1.2);

		}
		.atras{
			left: 2%;
			bottom: 2%;
		}
		.adelante{
			right: 62%;
			bottom: 2%;
		}
		.div-texto-descripcion{
			width: 57%;
			min-height: 50vh;
			position: relative;
			
			
		}
		.h1-descripcion{
			width: 100%;
			
			height: 20%;
			
			text-align: center;

		}
		.h1{
			font-size: 3em;
			font-family: exo;
			padding-top: 2%;

		}
		.h1::after, .h1::before{
			content: '';
			position: absolute;
			width: 19%;
			height: 3px;
			background-color: #000;
			margin-top: 15px;
		}
		.h1::After{
			left: 6%;
		}
		.h1::before{
			right: 6%;
		}
		.div-p-descripcion{
			width: 100%;
			height: 78%;
			display: inline-block;
			
		}
		.p{
			font-family: exo-light;
			font-size: 2em;
			text-align: justify;
			padding-left: 18px;
			padding-right: 10px;
			line-height: 28px;

		}
		.icono-descripcion{
			width: 30px;
			height: auto;
			position: relative;
			display: inline-block;
			top: 2px;
		}
		.contenido-pagina{
			width: 99.5%;
			height: auto;
			display: inline-block;
			position: relative;
			

		}
		.section-ascanalli{
			position: relative;
			display: inline-block;
			margin-top: 20px;


		}
		.section-mancini{
			position: relative;
			display: inline-block;
			height: auto;
			
			
			
		}
		.section-azulado{
			position: relative;
			display: inline-block;
			height: auto;
			
		}
		.h2-div{
			display: inline-block;
			position: relative;
			width: 100vw;
			height: auto;
			text-align: center;
			
			padding-top: 1%;
		}
		.h2-ascanelli{
			font-family: exo;
			font-size: 3.8em;

		}
		.h2-ascanelli::after, .h2-ascanelli::before{
			content: '';
			position: absolute;
			width: 22%;
			height: 3px;
			background-color: #000;
			margin-top: 25px;
		}
		.h2-ascanelli::After{
			left: 6%;
		}
		.h2-ascanelli::before{
			right: 6%;
		}
		.h2-azulado{
			font-family: exo;
			font-size: 3.8em;
		}
		.h2-azulado::after, .h2-azulado::before{
			content: '';
			position: absolute;
			width: 22%;
			height: 3px;
			background-color: #000;
			margin-top: 25px;
		}
		.h2-azulado::After{
			left: 6%;
			top: 33%;
		}
		.h2-azulado::before{
			right: 6%;
			top: 33%;
		}
		.conteiner-grid-maquinarias{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
			grid-template-rows: repeat(auto-fill ,minmax(400px, 1fr));
			grid-auto-rows: 400px;
			grid-gap: 2%;
			margin-left: 2%;
			margin-right: 2%;
			margin-top: 1%;
			margin-bottom: 2%;
			
			padding-bottom: 2%;
			
		}
		.grid-ascanalli{
			background-color: #CFFFF8;
			display: inline-block;
			position: relative;
			border: 2px solid black;
			border-bottom-left-radius: 40px;
			border-top-right-radius:  40px;

		}

		.div-h3{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 20%;
			text-align: center;
			
		}
		.h3-grid{
			font-family: exo;
			font-size: 2.6em;
					
		}
		
		.div-foto{
			display: flex;
			justify-content: center;
			align-items: center;
			float: left;
			float: top;
			width: 48%;
			height: 60%;
			
			flex-direction: column;
		}
		.img-producto{
			width: 100%;
			padding-left: 5px;
			
			
		}

		.div-descripcion{
			float: right;
			float: top;
			width: 48%;
			height: 70%;
			background-color: #FFF;
			display: inline-block;
			border: 1px solid black;
			border-bottom-left-radius: 20px;
			border-top-right-radius:  20px;
			margin-right: 5px;
			text-align: center;
		}
		h4{
			font-family: exo-light;
			font-size: 1.7em;
		}
		.p-descripcion{
			font-family: exo-light;
			font-size: 1.3em;
			padding-left: 5px;
			padding-top: 5px;
			line-height: 17px;
		}
		.logo-ascanelli{
			position: absolute;
			display: inline-block;
			width: 50%;
			bottom: 0;
			left: 0;
			text-align: center;
		}
		.logo-montenegro{
			width: 85%;
			margin-bottom: 10px;
		}
		.img-ascanelli{
			width: 100%;
			margin-left: 10px;
		}
		.conteiner-footer{
			display: flex;
			width: 100%;
			min-height: 80vh;
			border: 1px solid black;
			margin-top: 15px;
			background: #0E3655; 
			
		}
		.footer-div-info{
			
			display: inline-block;
			position: relative;
			width: 25%;
			min-height: 60vh;
			margin-left: 2.3%;
			margin-top: 1%;
			margin-bottom: 1%;
			border-right: 2px solid	black;
			text-align: center;
		}
		.h4-redirecciones{
			color: #fff;
			font-size: 3em;
		}
		.ul-redirecciones{
			text-align: left;

		}
		.li-redirecciones{
			color: #fff;
			margin-top: 25px;
		
		}
		.iconos-redirecciones{
			display: inline-block;
			color: #F7FF4D;
			margin-right: 5px;

		}
		.a-redirecciones{
			color: #fff;
			font-family: exo-light;
			font-size: 2em;
		}
		.a-redirecciones:hover{
			text-shadow: 0 0 5px #000;
			font-size: 2.3em;
		}
		.footer-div-formulario{
			display: inline-block;
			position: relative;
			border-right: 2px solid	black;
			width: 40%;
			min-height: 60vh;
			margin-left: 2.66%;
			margin-top: 1%;
			text-align: center;
			margin-bottom: 1%;

		}
		.h4-formulario{
			font-size: 3em;
			font-family: exo;
			margin-bottom: 15px;
			color: #fff;
		}
		.footer-div-extra{
			display: inline-block;
			position: relative;
			
			width: 25%;
			min-height: 60vh;
			margin-left: 2.66%;
			margin-top: 1%;
			margin-bottom: 1%;
			text-align: center;
		}
		.label{
			display: block;
			color: #fff;
			font-size: 2.5em;
			padding-top: 15px;
			padding-bottom: 15px;
			font-family: exo-light;
			font-weight: 600;
		}
		.input{
			width: 50%;
			height: 25px;
			border: 2px solid #EBF21F;
			font-family: exo-light;
		}
		
		
		.boton-enviar{
			display: block;
			position: relative;
			width: 20%;
			left: 40%;
			top: 18px;
			height: auto;
			font-size: 2.2em;
			border: 2px solid #000;
			border-bottom-left-radius: 15px;
			border-top-right-radius: 15px;
		}
		.boton-enviar:hover{
			font-size: 2.8em;
			transition: 0.5s;
		}

		.footer-contacto{
			color: #fff;
			font-size: 3.5em;
			font-family: exo ;
			margin-top: 10px;
		}
		.div-ul-footer{
			
			
			text-align: left;
		}
		.li-footer{
			font-size: 1.8em;
			color: #fff;
			margin-bottom: 10px;
			margin-top: 18px;
		}
		.los-p-contacto{
			display: inline-block;
			font-family: eox-ligth;
			color: #fff;
		}
		.los-a-contacto{
			display: inline-block;
			font-family: eox-ligth;
			color: #fff;
		}
		.los-a-contacto:hover{
			font-size: 1.1em;
			transition: 0.5s;

		}
		.p-maria{
			margin-left: 20px;
		}
		.iconos-contactos{
			color: #F7FF4D;
			display: inline-block;
			
			margin-right: 5px;
		}
		.div-whatsapp{
			display: flex;
			position: fixed;
			width: 7%;
			z-index: 3;
			right: 0;
			bottom: 0;
		}
		.img-whatsapp{
			width: 100%;

		}
		.div-whatsapp:hover{
			width: 8.5%;
			transition: 0.5s;
		}
@media only screen and (max-width: 1020px) 
	{
		.h2-ascanelli::after, .h2-ascanelli::before{
			
			display: none;
		}
		.h2-azulado::after, .h2-azulado::before{
			
			display: none;
		}
		.section-mancini{
			margin-top: 25px;
		}
		.h1::after, .h1::before{
			display: none;
		}
		.div-whatsapp{
			width: 15%;
		}
	}

		
	@media only screen and (max-width: 688px) 
	{

			body{
				font-size: 8px;
				overflow-x: scroll;
			}
			.logo{

				width: 48%;
			}
			
			.toggle{
				display: inline-block;
			}
			.links{
				position: absolute;
				display: flex;
				flex-direction: column;
				background: #021222;
				text-align: center;
				overflow: hidden;
				height: 100vh;
				width: 100%;
				top: -100vh;
				z-index: 2;
				transition: .5s;
			}
			.active{
				top: 12vh;
			}

			.conteiner-li{
				margin: 0 auto;
				margin-top: 50px;
				width: 40%;
				font-size: 2.5em;
			}
			.conteiner-arriba{
				height: 0vh;
			}
			.conteiner-footer{
				display: block;
				width: 100%;
				height: auto;
			
			
			}
			.section-descripcion{
				height: 90vh;
				display: inline-block;

			}
			.div-texto-descripcion{
				display: block;
				width: 100%;
				min-height: 30vh;
			}
			.div-img-descripcion{
				display: block;
				width: 100%;
				height: 40vh;
			}
			.adelante{
				right: 6%;
				top: 40%;
			}
			.atras{
				left: 2%;
				top: 40%;
			}
			.img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				
			}
			.section-mancini{
				margin-top: 250px;
			}
			.section-ascanalli{
				margin-top: 0px;
			}
			.section-azulado{
				margin-top: 40px;
				margin-bottom: 40px;
			}
			.section-descripcion{
				height: auto;
			}
			.conteiner-grid-maquinarias{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			grid-template-rows: repeat(auto-fill ,minmax(400px, 1fr));
			grid-auto-rows: 400px;
			grid-gap: 2%;
			margin-left: 2%;
			margin-right: 2%;
			margin-top: 1%;
			margin-bottom: 2%;
			
			padding-bottom: 2%;
			}
			.footer-div-info{
			
				display: block;
				width: 100%;
				min-height: 32vh;
				border-bottom: 3px solid #000;
				border-right: 0px;
			}
			.footer-div-formulario{
				display: block;
				width: 100% ;
				min-height: 50vh;
				border-bottom: 3px solid #000;
				border-right: 0px;

			}
			.footer-div-extra{
				display: block;
				width: 100% ;
				min-height: 32vh;
			}
			

	}

	@media only screen and (min-width: 1420px){
		body{
			font-size: 13px;
		}
		.conteiner-grid-maquinarias{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(490px, 1fr));
			grid-template-rows: repeat(auto-fill ,minmax(430px, 1fr));
			grid-auto-rows: 430px;
			grid-gap: 2%;
			margin-left: 2%;
			margin-right: 2%;
			margin-top: 1%;
			margin-bottom: 2%;
			
			padding-bottom: 2%;
			
		}
	}