@import 'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i';
*{
	box-sizing: border-box;
}
body{
	overflow-y: scroll;
	overflow-x: hidden;
}
::-webkit-scrollbar{
	width: 10px;
	background: #d0d2d4;
}
-webkit-scrollbar-track{
	background-color: #fefefe;
}
::-webkit-scrollbar-thumb {
    background-color: #fefefe;
}
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ececec;
    z-index: 9999999999999999;
}
#status {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    background: #ececec;
    height: 36px;
    width: 36px;
    margin-left: -18px;
    margin-top: -18px;
}
.spinner {
  width: 60px;
  height: 60px;
  background-color: #000;
  margin: auto;
  border-radius: 50%;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
#main-header{
	width: 100%;
	min-height: 6em;
	background-color: #edeeef;
	border-bottom: 1px solid #ececec;
	z-index: 999999;
	display: table;
}
.container{
	width: 100%;
	max-width: 1200px;
	min-width: 320px;
	margin-left: auto;
	margin-right: auto;
	display: table;
}
.padded{
	padding-top: 90px;
	padding-bottom: 90px;
}
#logo{
	width: 40%;
	min-height: 5em;
	float: left;
}
#logo img{
	margin-left: 4em;
	margin-top: 0.5em;
}
.responsive-logo{
	width: 350px;
	height: auto;
	z-index: 9999999;
	position: absolute;
}
#main{
	width: 60%;
	min-height: 5em;
	float: right;
}
#contac-tenos{
	width: 320px;
	min-height: 3em;
	border: solid 1px #3963A5;
	float: right;
	margin-top: -4em;
}
#contac-tenos p{
	font-size: 13px;
	display: inline-block;
	color: #3963A5;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
}
#contac-tenos span{
	content: "";
	color: #3963A5;
	background-color: transparent;
}
#main_02{
	width: 60%;
	min-height: 5em;
	float: right;
	margin-top: -8em;
}
.contenedor-2{
	width: 100%;
	min-height: 5em;
	float: right;
}
header label{
	cursor: pointer;
	color: #FFF;
	width: 50px;
	height: 50px;
	display: none;
}
#btn-menu{
	display: none;
}
.menu ul{
	list-style: none;
	display: flex;
}
.menu ul ul{
	display: none;
}
.menu a{
	padding: 49px 20px;
	text-align: center;
	color: #000000;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300i;
	line-height: 3em;
	transition: all .5s ease-in-out;
	text-decoration: none;
}
.menu a:hover{
	background-color: rgba(255,255,255,0.79);
	color: #044da2;
	border-bottom: 1px #044da2 solid;
}
.menu a.active{
	content: "";
	background-color: rgba(255,255,255,0.79);
	color: #044da2;
	border-bottom: 1px #044da2 solid;
}
/*****  Slider *****/
#contenedor-slider{
	width: 100%;
	display: table;
}
#c-slider{
	margin: auto;
	width: 100%;
	min-width: 200px;
	position: relative;
	overflow: hidden;
}
#slider{
	display: flex;
	width: 400%;
}
#slider section{
	width: 100%;
}
#slider img{
	display: block;
	width: 100%;
	height: 100%;
}
#btn-prev, #btn-next{
	width: 40px;
	height: 40px;
	background: #000;
	position: absolute;
	top: 50%;
	transform: translateY(-50%;);
	line-height: 40px;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	font-family: monospace;
	cursor: pointer;
	color: #fff;
}
#btn-prev:hover, #btn-next:hover{
	background: rgba(41,87,164,0.8);
}
#btn-prev{
	left: 0px;
}
#btn-next{
	right: 0px;
}
.responsive{
	width: 100%;
	height: auto;
}
/****** Bienvenido ******/
#contenedor-welcome{
	width: 100%;
	min-height: 10em;
	background-color: #f7f7f7;
	display: table;
}
#welcome-left{
	width: 35%;
	min-height: 10em;
	float: left;
}
#welcome-right{
	width: 65%;
	min-height: 10em;
	float: right;
}
.maxi-container-1{
	width: 90%;
	min-height: 10em;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	display: table;
}
#welcome-left h1{
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
	margin-left: 1em;
}
#welcome-right h1{
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
	margin-left: 1em;
}
.lineal{
	width: 180px;
	height: 3px;
	margin-left: 1.3em;
	margin-top: -0.5em;
	background-color: #044da2;
}
#contenedor-1{
	width: 90%;
	min-height: 10em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5em;
}
#contenedor-1 p{
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
	color: #000;
}
#contenedor-2{
	width: 90%;
	min-height: 5em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5em;
}
#contenedor-2 p{
	margin: 0em;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
	color: #848688;
}
#contenedor-block{
	width: 90%;
	min-height: 10em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5em;
}
#contenedor-block-2{
	width: 90%;
	min-height: 10em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5em;
}
#box{
	width:100%;
	height:27px;
	background-color: #D2D3D5;
	color:#000000;
}
.menu_03 ul{
	display: block;
	list-style: none;
	text-align: left;
}
.menu_03 ul ul{
	display: none;
}
.menu_03 a{
	display: block;
	margin-left: -3em;
	padding: 8px 50px;
	color: #000;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
	text-decoration: none;
}
.menu_03 a:hover{
	background-color: #d2d3d5;
}
.menu_03 a.active{
	background-color: #d2d3d5;
}
.icon-angle-right{
	color: #FFF;
	font-size: 20px;
	background-color: #044da2;
	background: -webkit-linear-gradient(#044da2, #1f86c2);
    background: -o-linear-gradient(#044da2, #1f86c2);
    background: -moz-linear-gradient(#044da2, #1f86c2);
    background: linear-gradient(#044da2, #1f86c2);
}
#contenedor-img{
	width: 80%;
	min-height: 10em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: table;
}
.responsive-2{
	margin-top: 5em;
	margin-bottom: 4em;
	width: 80%;
	height: auto;
}
#contenedor-medio{
	width: 100%;
	background-attachment: fixed;
	background-position: center bottom;
	background-image: url(../img/banner-01.jpg);
	background-size: 100% auto;
	display: table
}
#back-portada{
	white-space:100%;
	min-height:5em;
	background-color: rgba(41,87,164,0.8);
}
/******* medio *******/
#main-back{
	width: 100%;
	min-height: 8em;
}
#main-logo{
	width: 40%;
	min-height: 5em;
	text-align: center;
	float: left;
}
.responsive-logo-2{
	width: 350px;
	margin-top: 3em;
}
section label{
	cursor: pointer;
	color: #FFF;
	width: 50px;
	height: 50px;
	display: none;
}
#btn_menu{
		display: none;
}
.menu-02 ul{
	list-style: none;
	display: flex;
}
.menu-02 ul ul{
	display: none;
}
.menu-02 a{
	padding: 61px 20px;
	text-align: center;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300i;
	line-height: 7em;
	transition: all .5s ease-in-out;
	text-decoration: none;
}
.menu-02 a:hover{
	background-color: rgba(255,255,255,0.93);
	color: #044da2;
	border-bottom: 1px #044da2 solid;
}
.menu-02 a.active{
	content: "";
	background-color: rgba(255,255,255,0.79);
	color: #044da2;
	border-bottom: 1px #044da2 solid;
}
/******** Productos ******/
#contenedor-produtos{
	width: 100%;
	min-height: 10em;
	background-color: #f7f7f7;
	display: table;
}
#titulo-productos{
	width: 100%;
	min-height: 5em;
	text-align: center;
	display: table;
}
#titulo-productos h1{
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
	color: #044da2;
	text-align: center;
}
#titulo-productos p{
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
	text-align: center;
}
.lineal-2{
    width: 140px;
	height: 3px;
	margin-left: auto;
	margin-right: auto;
	background-color: #044da2;
}
#cotenedor-productivos{
	width: 100%;
	min-height: 10em;
	margin-top: 3em;
	display: table;
}
.grid-25{
	width: 25%;
	min-height: 10em;
	display: inline-flex;
}
.contenedor-img{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	height: auto;
}
.grid-tri{
	width: 90%;
	min-height: 2em;
	margin-left: auto;
	margin-right: auto;
}
.grid-tri a{
	color: #000000;
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
}
.grid-00{
	width: 90%;
	min-height: 13em;
	margin-left: auto;
	margin-right: auto;
	display: table;
}
.grid-00 p{
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
	text-align: left;
}
.grid-tri a{
	text-decoration: none;
}
/********** Contactenos **********/
#contenedor-contactenos{
	width: 100%;
	min-height: 8em;
	background-color: #FFFFFF;
	display: table;
}
#titulo-conctactenos{
	width: 100%;
	min-height: 5em;
	display: table;
}
#titulo-conctactenos h1{
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
	color: #044da2;
	text-align: center;
}
#titulo-conctactenos p{
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
	text-align: center;
}
#contenedor-form{
	width: 100%;
	min-height: 10em;
	background-color: #f7f7f7;
	display: table;
}
#contenedor-conta-left{
	width: 50%;
	min-height: 10em;
	float: left;
}
.maxi-container-2{
	background-color: transparent;
	width: 90%;
	min-height: 10em;
	margin-left: auto;
	margin-right: auto;
	display: table;
}
#contenedor-conta-right{
	width: 50%;
	min-height: 10em;
	float: right;
}
#tittle-1{
	width: 90%;
	min-height: 4em;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid #161616;
}
#tittle-2{
	width: 90%;
	min-height: 4em;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid #FFFFFF;
	}
#tittle-2 h2{
	content: "";
	background-color: rgba(41,87,164,0.8);
	margin-top: -0.7em;
	color: #FFFFFF;
	float: left;
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
}
#tittle-1 h2{
	content: "";
	background-color: #FFFFFF;
	margin-top: -0.7em;
	color: #044da2;
	float: left;
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
}
#contene-2-down{
	width: 90%;
	min-height: 10em;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid #161616;
}
#contene-3-down{
	width: 90%;
	min-height: 10em;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid #FFFFFF;
}
#contene-3-down span{
	line-height: 2em;
	color: #FFFFFF;
}
#contene-3-down p{
	color: #FFFFFF;
}
#contene-2-down span{
	line-height: 2em;
	color: #FFFFFF;
}
#contene-2-down p{
	color: #A9A9A9;
}
.icon-phone,.icon-whatsapp,.icon-mail-alt,.icon-laptop{
	width: 80px;
	height: 80px;
	font-size: 20px;
	background-color: #2957A4;
}
#form-1{
	width: 90%;
	min-height: 10em;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid #161616;
}
#form-2{
	width: 90%;
	min-height: 10em;
	margin-top: -9em;
	margin-left: auto;
	margin-right: auto;
}
#form-1 h2{
	content: "";
	background-color: #FFFFFF;
	margin-top: -0.7em;
	color: #044da2;
	float: left;
	font-size: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
}
.c1{
	width: 100%;
	height: 40px;
	margin-top: 1em;
	outline: none;
}
.c2{
	width: 100%;
	height: 150px;
	margin-top: 1em;
	outline: none;
}
.c3{
	width: 150px;
	height: 40px;
	background-color: #A9A9A9;
	color: #FFFFFF;
	cursor: pointer;
}
/******** Footer Sociales *********/
#main-sociales{
	width: 100%;
	min-height: 3em;
	background-color: #f7f7f7;
	display: table;
}
.sociales{
	width: 250px;
	min-height: 5em;
	float: right;
	display: inline-block;
}
.sociales-2{
	width: 250px;
	min-height: 5em;
	float: right;
	color: #FFFFFF;
	display: inline-block;
}
.icon-facebook-2,.icon-twitter-1,.icon-youtube-1,.icon-gplus-2{
    text-align: center;
    font-size: 23px;
    float: left;
    line-height: 1.6em;
    margin-left: 0.5em;
    height: 40px;
    margin-top: 0.3em;
    color: #FFFFFF;
    border: solid 1px #FFFFFF;
}
.icon-facebook-1,.icon-twitter-2,.icon-youtube-play,.icon-gplus-1{
    text-align: center;
    font-size: 23px;
    float: left;
    line-height: 1.6em;
    margin-left: 0.5em;
    height: 40px;
    margin-top: 0.3em;
    color: #2957A4;
    border: solid 1px #2957A4;
}
#contenedor-imagenes{
	width: 100%;
	min-height: 8em;
	margin-top: 5em;
	margin-bottom: 5em;
	display: table;
}
.ir-arriba {
	display: none;
	padding: 20px;
	background: #c3c5c8;
	font-size: 20px;
	color: #fff;
	cursor: pointer;
	position: fixed;
	bottom: 20px;
	right: 20px;
}
/****** 2 pagina  *****/
#contenedor-grid{
	width: 100%;
	min-height: 10em;
	background-color: #f7f7f7;
	display: table;
}
#grid-100-1{
	width: 100%;
	min-height: 9em;
	display: table;
}
#main-footer{
	width: 100%;
	min-height:10em;
	background-image: url(../img/banner-02.jpg);
	background-attachment:fixed;
	background-position: center bottom;
	background-size: 100% auto;
	display:table;
}
#contenedor-footer{
	width:100%;
	min-height: 15em;
    background-color: rgba(41,87,164,0.8);
	display: table;
}
.nopadded{
	padding-top: 30px;
	padding-bottom: 30px;
}
#cont_foot{
	width: 100%;
	min-height: 10em;
	display: table;
}
/****** *******/
#conte-1{
	width: 100%;
	min-height: 10em;
	background-color: #f7f7f7;
	display: table;
}
#cont_foot2{
	width: 100%;
	min-height: 10em;
	display: table;
}
#method-1{
	width: 90%;
	min-height: 10em;
	margin-top: -3em;
	margin-left: auto;
	margin-right: auto;
	display: table;
}
.c50l{
	width: 48%;
	margin-top: 1em;
	height: 30px;
	outline: none;
	float: left;
}
.c50r{
	width: 48%;
	height: 30px;
	margin-top: 1em;
	outline: none;
	float: right;
}
.c100c{
	width: 100%;
	height: 150px;
	outline: none;
	margin-top: 1em;
}
.cvalue{
	width: 150px;
	height: 40px;
	background-color: #A9A9A9;
	color: #FFFFFF;
	cursor: pointer;
}
/*****/
#ontenedor-gracias{
	width: 100%;
	min-height: 10em;
	background-color: #f7f7f7;
	display: table;
}
#contenedor-gracias h1{
	text-align: center;
	font-size: 35px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700i;
}
#contenedor-gracias p{
	text-align: center;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
}
/*****************/
#contenedor-wlide{
	width: 100%;
	min-height: 8em;
	display: table;
}
#arti-img{
	width: 50%;
	min-height: 8em;
	float: left;
}
#art-info{
	width: 50%;
	min-height: 8em;
	float: right;
}
#art-info h3{
	margin-left: 1em;
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	font-weight: 600i;
}
#art-info p{
	margin-left: 2em;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
}
.botton-contactac{
	width: 50%;
	min-height: 2em;
	float: right;
	text-align: center;
	line-height: 2em;
	border: solid 1px #000;
}
a{
	text-decoration: none;
	color: #000;
}
#contenedor-2{
	width: 100%;
	min-height: 8em;
	display: table;
}
.grid-img{
	width: 50%;
	min-height: 5em;
	display: inline-flex;
}
.info-2-con{
	width: 100%;
	min-height: 3em;
	display: table;
}
.info-2-cont h3{
	text-align: center;
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	font-weight: 600i;
}
.info-2-cont p{
	margin-left: 2em;
	text-align: left;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300i;
}
@media screen and (max-width: 1230px){
	#contac-tenos{
		display: none;
	}
}
@media screen and (max-width: 990px){
	.responsive-logo{
		width: 245px;
		height: auto;
		z-index: 888;
	}
	#logo{
		width: 60%;
	}
	#main{
		width: 40%;
	}
	#main{
		min-height: 4em;
	}
	#main-header{
		min-height: 4em;
	}
	#logo{
		min-height: 4em;
	}
	#main-logo{
		width: 100%;
	}
	#main_02{
		width:100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 3em;
	}
	header label{
		display: block;
		font-size: 20px;
		float: right;
	}
	.icon-menu-2{
		line-height: 3em;
	}
	.menu {
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		transform: translateX(-100%);
		transition: all .5s;
		z-index: 10000;
	}
	.menu ul{
		display: block;
		background: #ffffff;
		float: none;
	}
	.menu a{
		text-align: left;
		padding: 15px 20px;
	    color: #000;
	    text-decoration: none;
	}
	.menu ul li:hover ul{
		display: none;
		position: static;
	}
	.menu a span{
		position: absolute;
		right: 5px;
	}
	#btn-menu:checked ~ .menu{
		transform: translateX(0%);
		display: table;
	}
	.menu ul ul{
		background: rgba(0,0,0,0.4);
	}
	.menu ul li:hover ul{
		width: 100%;
	}
	.menu ul ul a{
		padding: 15px 20px;
	}
	.contenedor-2{
		width: 50%;
		min-height: 5em;
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
	.menu-02{
		text-align: center;
	}
	.menu-02 ul{
		display: block;
	}
	.menu-02 a{
		padding: 10px 50px;
		line-height: 3em;
	}
	#contenedor-medio{
		background-size: auto;
	}
}
@media screen and (max-width: 850px){
	.responsive-logo{
		width: 200px;
	    height: auto;
	    z-index: 9999999;
	}
	#logo{
		width: 70%;
	}
	#main{
		width: 30%;
	}
	#welcome-left{
		width: 100%;
	}
	#welcome-right{
		width: 100%;
		margin-top: 1em;
	}
	#contenedor-img{
		width: 100%;
		margin-top: 1em;
	}
	.grid-25{
		width: 100%;
	}
	#contenedor-conta-left{
		width: 100%;
	}
	#contenedor-conta-right{
		width: 100%;
	}
	#contenedor-imagenes{
		margin-bottom: 3em;
	}
	.c50l{
		width: 100%;
	}
	.c50r{
		width: 100%;
	}
	#contenedor-footer{
		background-size: auto;
		background-position: bottom;
	}
	#arti-img{
		width: 100%;
	}
	#art-info{
		width: 100%;
	}
	.grid-img{
		width: 100%;
		display: block;
		margin: 0 auto;
	}
}
@media screen and (max-width: 600px){
	.responsive-logo{
		width: 205px;
	    height: auto;
	    z-index: 9999999;
	}
	.responsive-logo-2{
		width: 350px;
	}
	.contenedor-2{
		width: 70%;
	}
	#main-02{
		width: 100%;
	}
}
@media screen and (max-width: 400px){
	.contenedor-2{
		width: 100%;
	}
	#main-02{
		width: 100%;
	}
}