@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('stylesheet.css');


*{
	margin: 0;
	padding: 0;
	font-family: 'Quattrocento Sans', sans-serif;

	box-sizing:border-box;
}

:focus{
    outline: none;
	}

/*------------------------------------------------------------*/

header {
	display: inline-block;
	position: absolute;
	float: left;
	width:100%;
 	height:100%;
 	margin:auto;
/*	background-color: yellow;*/
	}
	

.subheader {
/*background-color: #efe;*/
width: 100%;
height: 180px;
margin-top: 2px; }

.menu_bar{ 
	float: right;
	margin: 7px 10px;
	display: inline-block;
	width:100%;
	height: 30px;
	position: absolute;
/*	background-color: yellow;*/
	}
.menu_bar .botonmenu{ 
	display: inline-block;
	float: right;
	margin-top: 12px;
	height: 20px;
	width: 108px;
	color: #1b2c6b;
	text-align: center;
	font-size: 1.0em;
	text-decoration: none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	}
	.menu_bar a p { 
		display: block;
		margin: auto;
		float: right;
		width: 50px;
		margin-right: 18px;
		font-family: 'Quattrocento Sans', serif;
		font-size: 1.0em;
		color: #1b2c6b;

		}
		.menu_bar span {
			display: inline-block;
			float: left;
			margin: auto;
			line-height: 16px;
			text-align: center;
			font-size: 20px;
			
			}
.navbar {
	display: block;
	float: left;
	top: 0px;
	left: -100%;
	width: 80%;
	max-width: 190px;
	position: fixed;
	padding-bottom: 10px;
	background-color: #1b2c6b;

	}
	.navbar ul {
		display: block;
		float: left;
		width: 100%;
		padding: 0;
		margin: auto;
		overflow: hidden;
		list-style: none;
		border: 1px solid #fff;/*#8d8d8d*/
		}
	.navbar ul li a { background-color: #f6f6f6;/*#ebebeb*/
		display: block;
		width: 100%;
		float: left;
		margin: auto;
		line-height: 54px;
		text-decoration: none;
		font-family: 'Quattrocento Sans','serif';
		text-align: center;
		font-size: 1.0em;
		color: #8d8d8d;
		border-bottom: 1px solid #dddddd;
		}
		.navbar ul li a#last { border-bottom: 1px solid #f6f6f6;
		}



/*---------------------------TOP---------------------------*/
/*---------------------------TOP---------------------------*/

.brandcontain{
	display: inline-block;
	float: left;
	margin: auto;
	margin-top: 50px;
	width: 100%;

/*	background-color: red;*/

	display: flex;
/*	justify-content: space-between;*/
	align-items:center;

	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}	

	img.baclogo{ display:block;	margin-top:5px; }
	.brandcontain .line {
		display:block;
		margin: 10px auto;
		width:320px;
		height: 1px;
		background-color: #5d6c75;}
	.brandcontain .slogan {
		text-align: center;
		color:#1b2c6b;
		font-family: 'Quattrocento Sans';
		font-size: 1.1em; }

/*--------------------------- productos hover ------------------------------*/
/*--------------------------- productos hover ------------------------------*/
/*--------------------------- productos hover ------------------------------*/

.containerprod{
	
	margin: 100px auto 90px auto;
	width:90%;
	max-width: 1000px;
	height:230px;
/*	background-color: #fef;*/
	}
.containerdwntitle{
	margin: auto;
	width: 395px;
	height:80px;
/*	background-color: #fef;*/
	}
	img.title2{display: block; margin: auto; width: 320px;}
	p.slogan2{
		text-align: center;
		color:#1b2c6b;
		font-family: 'Quattrocento Sans';
		font-size: 0.98em; }

.contenedor{
	width: 200px;
	height: 230px;
	float:left;
	-webkit-transition: height .5s;
}

.contenedor#uno{
	background-color: rgb(0,125,131);}
.contenedor#dos{
	background-color: rgb(0,96,146);}
.contenedor#tres{
	background-color: rgb(144,25,34);}
.contenedor#cuatro{
	background-color: rgb(211,146,30);}
.contenedor#cinco{
	background-color: rgb(167,90,35);}
.contenedor#seis{
	background-color: rgb(21,40,54);}


.containerprod .contenedor .boxprod{

	display: block;
	margin: 66px auto;
	background-color: rgba(255,255,255,.05);
	width:55px;
	height: 60px;
	padding: 0 ;
	-webkit-border-radius: 50%;
	-webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
	-webkit-transition:box-shadow .6s;

}
.containerprod .contenedor img.prodindx{
	display: block;
	margin: auto;
	margin-top:-180px;
	height: 180px;
	
}

.containerprod .contenedor img.morfos{
	display: block;
	height: 34px;
	margin: 4px auto;

    opacity: .6;
	-webkit-transition: margin-top .5s;
	}

	.contenedor:hover {height: 250px}/*230px*/
	.contenedor:hover img.morfos { height: 34px; margin-top: 20px; opacity: 1;}
	.contenedor:hover .boxprod{
	-webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,.6);
	}

/*--------------------------- CONTACFORM ------------------------------*/
/*--------------------------- CONTACFORM ------------------------------*/
/*--------------------------- CONTACFORM ------------------------------*/


.contacform {
	display: block;
	float: left;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	position: fixed;
	margin-top: 64px;
	padding-bottom: 6px;
	background: rgba(0,0,0, .5);

	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	flex-direction: column;
	align-items: center;
   	justify-content: center;
	}


	.form-contain {
		background: #fff;
		display: block;
		float: left;
		margin: auto;
		width: 60%;
		height: 60%;
		
	    overflow: hidden;
	    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); 

	    display: -webkit-flex;
	    display: -moz-flex;
	    display: -ms-flex;
	    display: -o-flex;
	    display: flex; 
		}

		.form-column1::before{
		    content: '';
		    width: 100%;
		    height: 100%;

		    position: absolute;
		    top: 0;
		    left: 0;

		    background: green;
		    opacity: 0.9;
			}
		.form-column1{ 
			width: 38%;
    		position: relative;
			font-family: 'Quattrocento Sans';
			font-size: 1.4em;
			color: #fff;

			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			
			justify-content: center;
		    align-items: center;
    		
			flex-direction: column;
			flex-wrap:wrap;

    		background-image: url('../images/inst.jpg');
		    background-size: cover;
		    background-position: center center;
			}
			.infograles {
				position: relative;
				z-index: 2;
/*				display: block;*/ display: none;
				float: left;
				margin: auto;
				width: 90%;
				
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				-webkit-flex-direction: column;
				-moz-flex-direction: column;
				-ms-flex-direction: column;
				-o-flex-direction: column;
				flex-direction: column;
			}
			.form-column1 img {
				position: relative;
				z-index: 2;
				
				display: block;
				margin: auto;
				width: 160px;
				}
			.form-column1 span {
				
				display: block;
				margin: auto;
				margin-top: 20px;
				margin-bottom: 10px;
				}
			.form-column1 p { 				
				display: block;
				margin: auto;
				width: 100%;
				text-align: center;
				font-size: 0.6em;
				}
		.form-column2{
			display: block;
			float: left;
			margin: auto;
			width: 66%;
			height: 90%;
			font-family: 'Quattrocento sans';
			font-size: 0.6em;
			color: #fff;
			
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
	
			justify-content: space-between;
    		
			flex-direction: column;
			flex-wrap:no-wrap;

			}

		/* Formulario de contacto---------------------------*/

			form.form_contact{ width: 96%; padding: 10px; }

			form.form_contact .user_info{
				display: block;
				float: left;
				margin: auto;
				width: 100%;
				margin-top: 10px;
			    display: flex;
			    flex-direction: column;
				}

			form.form_contact label{
				font-size: 1.4em ;
			    font-weight: 400;
			    color: #5d6c75;
				}

			form.form_contact input,
			form.form_contact textarea{
			    width: 100%;
			    padding: 8px 0px 5px;
			    margin-bottom: 20px;
				border: none;
			    border-bottom: 2px solid #d1d6da;
			    font-family: 'Quattrocento Sans';
				color: #5d6c75;
				font-size: 14px;
				font-weight: 400;
				}

			form.form_contact textarea{
			    max-width: 100%;
			    min-width: 100%;
			    max-height: 90px;
				}

			form.form_contact input[type="submit"]{
			    width: 180px;
				background: green;
				padding: 10px;
				border: none;
				border-radius: 10px;

			    align-self: flex-end;

			    color: #fff;
				font-family: 'Quattrocento Sans';
				font-size: 1.2em;
				font-weight: 400;
				cursor: pointer;
				}

			form.form_contact input[type="submit"]:hover{
			    background: #036E05;
			}

			.form-column2 .cerrar{
				display: block;
				margin: auto;
				float: left;
				margin-bottom: 0;
				width: 100%;
				height: 60px;
				font-family: 'merriweather';
				text-align: center;
				font-weight: lighter;
				font-size: 1.5em;
				color: green;
				}

				.cerrar	p#menorque{
						-webkit-transform: rotate(270deg);
						text-align: center;
						color: green;
						font-size: 1.4em;
						}

		/*--- Ventana de errores--------------------------------------*/

			.modal_wrap{
			    width: 100%;
			    height: 100vh;
			    background: rgba(0,0,0,0.6);

			    position: fixed;
			    top: 0;
			    left: 0;
			    z-index: 3;

			    display: flex;
			    justify-content: center;
			    align-items: center;
			}

			.mensaje_modal{
			    background: #fff;
			    box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
			    width: 400px;
			    padding: 30px 20px 15px;
			}

			.mensaje_modal h3{
			    text-align: center;
			    font-family: 'Quattrocento Sans';
				font-size: 1.4em;
				font-weight: 400;
			}

			.mensaje_modal h3:after{
			    content: '';
				display: block;
				width: 100%;
				height: 1px;
				background: #d71812;
				margin: 10px 0px 0px;
				}

			.mensaje_modal p{
			    font-size: 16px;
			    color: #606060;
				}

			.mensaje_modal p:before{
			    content: "X";
			    font-family: 'Quattrocento Sans';
			    font-weight: 700;
			    display: inline-block;
			    color: #d71812;
			    margin-right: 8px;
				}

			#btnClose{
			    display: inline-block;
				padding: 3px 10px;
				margin-top: 10px;

				background:  #d71812;
				color: #fff;
				border: 1px solid #7d0a06;
				cursor: pointer;

				float: right;
				}

		/*--- MENSAJE ENVIADO-----------------------------------*/

			.bckimg{ background: url(../images/inst.jpg);
				display: block;
				width: 100%;
				height: 100%;}

			.mensaje-exito{
			    width: 100%;
			    background-color: #fff;
			    display: flex;
			    flex-direction: column;
			    justify-content: center;
			    align-items: center;
				}

			.mensaje-exito h1{
			    display: block;
			    width: 90%;
			    height: 40px;
			    font-family: 'Quattrocento Sans';
			    font-size: 1.3em;
			    text-align: center;
			    margin-bottom: 10px;
			    color: #036E05;
				}
				.mensaje-exito p {
					display: block;
					float: left;
					margin: 20px auto;
					width: 90%;
					height: 30px;
					font-family: 'Quattrocento Sans';
					font-size: 0.9em;
					text-align: center;
					color: #036E05
					}

				.mensaje-exito a{
				    display: block;
				    padding: 10px 30px;
				    background: green;
				    margin-bottom: 20px;
				    text-decoration: none;
				    color: #fff;
				    border-radius: 10px;
					}

				.mensaje-exito a:hover{
				    background: #036E05;
					}


/*------------------------------- footer -------------------------------*/

	
.footer {
	display: block;
	position: absolute;
	bottom: 0;
	margin: auto;
	float: left;
	width: 100%;

/*	background-color: #efe;*/
	}

	.wrapper { 
		width: 96%;
		max-width: 800px;
		margin: auto;
/*		background-color: red;*/
		}

		.copyright {
			display: block;
			float: left;
			width: 100%;
			margin-top: 2px;
			margin-bottom: 0px;
					}
			.copyright p {
				display: inline-block;
				width: 100%;
				font-family: 'Quattrocento Sans';
				font-size: 0.7em;
				text-align: center;
				color: #1b2c6b;
				}


/*--------------firma ollin---------------------------------*/
/*--------------firma ollin---------------------------------*/
/*--------------firma ollin---------------------------------*/

.firmafooter {
	display: inline-block;
	width: 100%;
	height: 23px;
	margin-top: 4px;
	margin-bottom: 0px;
/*	background-color: gray;*/
	}
	.firmafooter .firmaollin {
		display: block;
		margin: auto;
		width: 384px;
		height: 23px;
		padding: 0px 10px;
		}
	.firmaollin p {
		display: block;
		float: left;
		width: 95px;
		font-family: 'work_sansregular';
		line-height: 26px;
		color: #61a5c9;
		font-size: 0.55em;	
		}
	.firmaollin p a {
		display: block;
		float: left;
		width: 250px;
		font-family: 'work_sansregular';
		line-height: 26px;
		color: #61a5c9;
		font-size: 1.03em;
		text-decoration: none;
		}
	.firmaollin a:hover {
		font-family: 'work_sansregular';
		color: #fff;
		font-size: 1.03em;
		text-decoration: none;
		}
	.firmaollin img.firma{
		display: block;
		float: left;
		width: 22px;
		margin: 0px 5px;
		}




/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/


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


.containerprod{	width:100%; /*	background-color: #fef;*/} 

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

.contenedor{width: 20%;	}

}

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

/*	.form-contain {	width: 90%;	height: 64%;}
		.form-column1{ 
			width: 36%;
			}

			.form-column1 span { font-size: 1.2em;}
			.form-column1 p { font-size: 0.7em;	}
*/
.containerprod .contenedor img.morfos{ height: 30px;}
}

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

.containerprod .contenedor img.morfos{ height: 25px;}

}


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

	.containerprod .contenedor img.morfos{ height: 22px; }
}
	
@media screen and (max-width: 620px){

	img.baclogo{ margin-top:0px; }
	.brandcontain .line { margin: 4px auto; }

.containerprod{
	margin: 10px auto 30px auto;
	width:80%;
	height:690px;
	}
	.contenedor{width: 50%;	}

	.contenedor#cinco{ width:100%;}
	.containerprod .contenedor img.morfos{ height: 28px; opacity: 1; }

	.containerprod .contenedor:hover{ height: 230px; }
	.containerprod .contenedor:hover img.morfos{height: 28px; margin-top: 0px; }

	.containerdwntitle{display: block;	margin-bottom: 30px;width: 80%;/*background-color: #fef;*/}

	.footer { position: relative; /*background-color: #efe;*/}
}

@media screen and (max-width: 595px){
	.wrapper { 
		width: 100%;
		margin: auto;
/*		background-color: red;*/

		display: flex;
	/*	justify-content: space-between;*/
		align-items:center;

		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;

		}
	.copyright {
			width: 80%;	margin-bottom: 10px;}

}

@media screen and (max-width: 545px){
	
	.containerprod{	width:86%;	}

}

@media screen and (max-width: 500px){
	
	.containerprod{	width:90%;	}

}


@media screen and (max-width: 433px){
	.brandcontain .line { width:70%; min-width: 260px}
	.brandcontain .slogan {width: 90%;	font-size: 1.1em; }
	.containerprod{	width:98%;	}

	.firmafooter {height: 70px;}

		.firmafooter .firmaollin {
			width: 94%;
			height: 100%;
			border-top: 1px solid #61a5c9;

			display: flex;
			justify-content:center;
			align-items:center;

			flex-direction:column;
			flex-wrap:wrap;
			}
		.firmaollin p { 
			width: 100%;
			text-align: center;
			line-height: 10px;
			font-size: 0.6em;
			}
		.firmaollin p a {
			width: 100%;
			text-align: center;
			line-height: 12px;
			font-size: 1.06em;
			text-decoration: none;
			}
			.firmaollin a:hover {}
		.firmaollin img.firma { margin: 2px auto; }
}


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


.form-contain {	margin-top: 10px; width: 96%; height: 80%;}		
}


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

	.containerdwntitle{	display: block;	margin-bottom: 24px; width: 98%;}
}

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

	img.title2{ width: 96%;}
	p.slogan2{ font-size: 0.94em; }
}