/*
Theme Name: smartflex
Theme URI: http://emposicionamientodigital.com
Description: Theme modified by fer
Author URI: fer
Version: 1
*/

@media screen {
	div,h1,h2,h3,h4,p{
		margin:0;
		padding:0;
		display:block;
	}
	* { margin: 0; padding: 0;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	body {
		background-color: #fff;
		width:100%;
		padding:0px;
		margin:0px;
		font-family: 'Roboto', sans-serif;
	}
	a{
		text-decoration:none;
		display:block;
	}
	
	.fondo{
		background-image:url(images/fondo-principal.jpg);
		background-position:center;
		background-size:cover;
	}
	
	#principal{
		overflow-y:scroll;
		overflow-x: hidden;
		width:100%;
		scroll-snap-type:y mandatory;
		height:100vh;
	}
	.fondo{
		width:100vw;
		height:100vh;
		display:block;
		scroll-snap-align:start;
	}
	#encabezado{
		width:100%;
		height:150px;
		
	}
	.contenido-cent{
		margin:auto;
		width:1300px;
		position:relative;
	}
	#encabezado .logo{
		width:254px;
		height:auto;
		float:left;
		margin-top:17px;
		margin-bottom:20px;
		margin-left: 50px;
	}
	#encabezado .logo img{
		width:100%;
	}
	#encabezado .social{
		color:white;
		float:right;
		margin-top:17px;
		
	}
	#encabezado .tel{
		float:right;
		color:#7E7F7F;
		font-weight:200;
		vertical-align:middle;
		margin-top:28px;
		font-size:14px;
		margin-right:29px;
	}
	#encabezado .social .icono{
		float:left;
		margin-right:15px;
		width:26px;
	}
	#encabezado .social .icono img{
		width:100%;
	}
	.menu-resp{
		display:none;
	}
	

	#contenido{
		width:100%;
		overflow:hidden;
		float:left;

	}
	.sin-margenr{
		margin-right:0px!important;
	}

	.contacto-desp{
		float:right;
	}
	.contacto-desp img{
		float:right;
		z-index: 9999;
		position: relative
	}
	
	.formulario-desp{
		background-color:#e8e9e9;
		width:370px;
		height: 357px;
		padding: 15px 15px;
		color:#333333;
		float:right;
		position: absolute;
		right: 0px;
		top: 44px;
		display: none;
		z-index: 99;
		border-radius: 15px;
	}
	.formulario-desp h3{
		margin-bottom:15px;
	}
.formulario-desp input[type=text],.formulario-desp input[type=email],.formulario-desp input[type=tel],.formulario-desp textarea{
	width: 100%;
	padding: 6px;
	border: none;
	margin-bottom: 13px;
	font-size: 16px;
	font-family: 'Roboto Condensed', sans-serif;
	color:#333333;
}
.formulario-desp textarea{
	height: 70px;
}
.formulario-desp .acepto{
	color:#333333;;
	float: left;
}
	.formulario-desp .acepto a{
		display:inline;
	}
.formulario-desp .enviar input{
	color:white;
	background: none;
	border:none;
	background-color:#f4a400;
	float:right;
	clear:both;
	padding: 8px 15px;
	border-radius: 15px;
	font-size: 20px;
	margin-top: 10px;
}
.formulario-desp input[type="checkbox"]{
	width: 15px;
	height: 15px;
	border-color: #C13132;
}
	
	
	/******************* menu ****************/

	ul.nav-menu,
	div.nav-menu > ul {
		margin: 0;
		width:52%;
		list-style:none;
		margin-left: 22px;
		float:right;
	}
	#menu{
		float:left;
		clear:both;
		width:100%;
		height:44px;
		background-color:#303030e6;
	}
	#menu-principal{
		float:right;
	}
	.nav-menu li {
		display: inline-block;
		float:left;
		margin-right:33px;
		height:44px;
	}
	.nav-menu li a {
		color:white;
		font-weight:200;
		text-decoration:none;
		font-size:17px;
		display: block;
		text-transform:uppercase;
		line-height: 48px;
	}
	.sub-menu li:last-child{
		margin-right:0px;
	}
	.sub-menu li a {
		height: 25px;
	}
	.nav-menu li:hover{

	}
	.nav-menu li:hover > a,
	.nav-menu li a:hover{
		color: #ffbe00;
	}
	.nav-menu .sub-menu,
	.nav-menu .children {
		background-color: #566060;
		border-top: 0;
		display: none;
		position: absolute;
		left: calc(50% - 480px);
		z-index: 99999;
		padding: 10px;
		top: 42px;
		border-radius: 0px 0px 10px 10px;
	}

	.nav-menu .sub-menu ul,
	.nav-menu .children ul {
		border-left: 0;
		left: 100%;
		top: 0;
	}
	.sub-menu li{
		display: inline;
		font-size: 16px;
		text-shadow: none;
		margin-right: 29px;
	}
	#menu-item-22 .sub-menu li{
		margin-right: 46px;
	}
	#menu-item-22 .sub-menu li:last-child{
		margin-right: 0px;
	}
	#menu-item-418 .sub-menu li{
		margin-right: 42px;
	}
	#menu-item-418 .sub-menu li:last-child{
		margin-right: 0px;
	}
	.sub-menu li a{
		font-size: 16px;
	}
	#menu-principal #menu-item-22 .sub-menu{
		left:calc(50% - 280px);
	}
	ul.nav-menu ul a,
	.nav-menu ul ul a {
		color: #fff;
		margin: 0;
	}
	ul.nav-menu ul a:hover,
	.nav-menu ul ul a:hover {
		color:#ffbe00;
	}
	ul.nav-menu li:hover > ul,
	.nav-menu ul li:hover > ul {
		display: block;
	}
	.nav-menu .current_page_item > a,
	.nav-menu .current_page_ancestor > a,
	.nav-menu .current-menu-item > a,
	.nav-menu .current-menu-ancestor > a {
		color: #ffbe00;
	}
	
	#menu .formulario_rapido{
		float:right;
	}
	#menu .formulario_rapido .formulario{
		display:none;
	}
/********************* secciones ****************************/	
	section{
		width:100%;
		height:100vh;
		display:block;
		overflow:hidden;
		float:left;
		min-height:688px;
		scroll-snap-align:start;
	}
	section h2{
		font-size:40px;
		font-weight:300;
		width:100%;
		text-align:center;
		color:#333333;
	    margin-top: 3vh;
		margin-bottom: 3vh;
	}
	.fondo .animacion{
		position:relative;
		width:456px;
		float:left;
		height:515px;
	}
	
	svg {
		width:1100px;
		margin: auto;
		display: block;
		overflow:visible;
		margin-top: -7vh;
	}
	.anmop1,.anmop2,.anmop3,.anmop4,.anmop5,.anmop6{
		opacity:0;
	}
	#imgop1,#imgop2,#imgop3,#imgop4,#imgop5,#imgop6{
		opacity:0;
	}
	svg text{
		font-family: 'Roboto', sans-serif;
	}
	
	#circuloOp1,#circuloOp2,#circuloOp3,#circuloOp4,#circuloOp5,#circuloOp6{
		visibility:hidden;
	}
	.controles{
		float: right;
		position: absolute;
		right: 113px;
		bottom: 4vh;
		height: 20px;
	}
	#play{
		border:none;
		background:transparent;
		float:left;
	}

	#slider{
		width: 250px;
		float:left;
		height: 14px;
		border: 1px solid black;
		background-color:#EAECEB;
		margin-top: 13px;
		margin-right: 20px;
		border-radius: 7px;
	}
	.ui-slider-handle {
		border: 1px solid #A0BE37;
		background-color:#A0BE37;
		border-radius: 4px;
	}


	#inteligente{
		background-color:#eaeceb;
		position:relative;
	}
	#inteligente #anim-intelig{
		height:72vh;
		width:100%;
		float:left;
		min-height:495px;
	}
	#inteligente #pasos{
		background-color:#7a7b7b;
		height:28vh;
		width:100%;
		padding-top: 2vh;
		padding-bottom: 2vh;
		float:left;
		min-height:192px;
	}
	#inteligente #pasos .contenido-cent{
		display:flex;
		flex-direction: column;
		justify-content: space-around;
		height:100%;
	}
	#inteligente #pasos img{
		width:100%;
	}
	#inteligente  .obj-int{
		height:59vh;
		position:relative;
	}
	#inteligente .persona{
		height:203px;
		position:absolute;
		bottom:0px;
		max-height:290px;
	}
	#inteligente .aireacon{
		height: 69px;
		position: absolute;
		top: 0px;
		left: 115px;
		max-height: 82px;
	}
	#inteligente .asistente{
		height: 81px;
		position: absolute;
		bottom: 0px;
		left: 172px;
		max-height: 117px;
	}
	#inteligente .sillon{
		height: 130px;
		position: absolute;
		bottom: 0px;
		left: 272px;
		max-height: 186px;
	}
	#inteligente .lampara{
		height: 276px;
		position: absolute;
		bottom: 0px;
		left: 484px;
		max-height: 378px;
	}
	#inteligente .luz{
		height: 79px;
		position: absolute;
		bottom: 140px;
		left: 407px;
		opacity:0;
	}
	#inteligente .tv{
		height: 118px;
		position: absolute;
		top: 25vh;
		left: 765px;
		max-height: 154px;
	}
	#inteligente .tvnet{
		height: 118px;
		position: absolute;
		top: 25vh;
		left: 765px;
		max-height: 154px;
		opacity:0;
	}
	
	#inteligente .planta{
		height: 114px;
		position: absolute;
		bottom: 0px;
		left: 1035px;
		max-height: 168px;
	}
		
	#inteligente .persiana{
		height: 183px;
		position: absolute;
		top: 20vh;
		left: 1117px;
		max-height: 229px;
	}
	#inteligente .persianab{
		height: 183px;
		position: absolute;
		top: 20vh;
		left: 1117px;
		max-height: 229px;
		opacity:0;
	}
	
	#inteligente .aire{
		height: 72px;
		position: absolute;
		top: 72px;
		left: 142px;
		opacity:0;
	}
	.ordenes{
		opacity:0;
		height: 62px;
		width: 80px;
		position: absolute;
		bottom: 179px;
		left: 78px;
		background-image:url(images/ordenar.png);
		background-repeat:no-repeat;
		font-size:12px;
		text-align: center;
		color: white;
		padding: 5px;
		font-family: 'Roboto Condensed', sans-serif;
		
	}
	.asistentevoz{
		opacity:0;
		height: 62px;
		width: 80px;
		position: absolute;
		bottom: 84px;
		left: 118px;
		font-size:12px;
		text-align: center;
		color: white;
		padding: 5px;
		background-image:url(images/activando.png);
		background-repeat:no-repeat;
		font-family: 'Roboto Condensed', sans-serif;
		
	}
	.noactivo{
		display:none;
	}
	.ord1,.ord2,.ord3,.ord4{
		display:none;
		text-align:center;
	}
	.act1,.act2,.act3,.act4{
		display:none;
		text-align:center;
	}
	
	
	
	#productos #tabs div ul li img{
		height:250px;
		padding-top: 25px;
		padding-bottom: 25px;
		margin:auto;
		width:200px;
		display: block;
	}
	#productos #tabs h2{
		font-size:17px;
		font-weight:600;
		color:#7A7B7B;
		margin-bottom:7px;
		margin-top:0px;
		
	}
	#productos #tabs h3{
		font-size:16px;
		font-weight:300;
		color:#7A7B7B;
		text-align:center;
		height: 57px;
		padding: 0px 15px;
		font-family: 'Roboto', sans-serif;
	}
	#productos{
		display:flex;
		justify-content:flex-end;
		flex-flow: row wrap;
		position:relative;
	}
	#productos .tabs-prod{
		height:77vh;
		min-height:529px;
	}
	#productos .catalogo{
		height:23vh;
		min-height:158px;
	}
	.infocat{
		display:flex;
		flex-direction: column;
		justify-content: space-around;
		height:23vh;
	}
	#productos .catalogo p{
		font-size: 19px;
		font-weight: 200;
		line-height: 26px;
		text-align: center;
		width: 100%;
		/*margin-bottom: 1.5vh;*/
	}
	#productos .catalogo .btn-catalog{
		font-size:19px;
		font-weight:600;
		padding: 9px 0px;
		border: 2px solid white;
		width: 400px;
		border-radius: 19px;
		text-align: center;
		margin:auto;
		color:white;
	}
	
	#productos .tab3 a{
		padding-top:13px;
	}
	
	#productos .tab1 img{
		width:93px;
	}
	#productos .tab2 img{
		width:110px;
	}
	#productos .tab3 img{
		width:114px;
	}
	#productos .tab4 img{
		width:127px;
	}
	#productos .tab5 img{
		width:142px;
	}
	
	
	#productos #tabs .btns{
		display:flex;
		justify-content: space-around;
		margin-top: 5px;
		margin-bottom: 10px;
	}
	#productos #tabs .descarga{
		background-color:#A3BD31;
		color:white;
		border-radius:10px;
		padding:9px 8px;
		float:left;
	}
	#productos #tabs .compra{
		background-color:#1ba1d4;
		color:white;
		border-radius:10px;
		padding:9px 8px;
		float:right;
	}
	#productos ul{
		list-style:none;
	}
	#productos .item{
		width:325px;
		float:left;
		height:450px;
		
	}
	#productos .fondogris{
		background-color:#E8E9E9;
		position:absolute;
		width:100%;
		height:70px;
		z-index:-1;
		top:95px;
		left:0px;
	}
	
	
	.left-nav-btn{
		position:absolute;
		width:34px;
		height:58px;
		top:207px;
		cursor:pointer;
		opacity:0.8;
		background:transparent url('images/flecha-caso-izq.png')top left no-repeat;
		-webkit-transition: opacity0.2s linear;
		-moz-transition: opacity0.2s linear;
		-o-transition: opacity0.2s linear;
		transition: opacity0.2s linear;
		
	}
	.right-nav-btn {
		position:absolute;
		width:34px;
		height:58px;
		top:207px;
		cursor:pointer;
		opacity:0.8;
		background:transparent url('images/flecha-caso-der.png')top left no-repeat;
		-webkit-transition: opacity0.2s linear;
		-moz-transition: opacity0.2s linear;
		-o-transition: opacity0.2s linear;
		transition: opacity0.2s linear;
	}

	
	.left-nav-btn {
		left:0px;
	}
	.right-nav-btn {
		right:0px;
	}

	.left-nav-btn:hover, 
	.right-nav-btn:hover{
		opacity:1;	
	}

	#proyectos{
		background-color:#eaeceb;
	}
	
	#proyectos .marcas ul{
		display:flex;
		justify-content:space-between;
		list-style:none;
	}
	#proyectos .compatibilidad{
		width:100%;
		float:left;
		background-color:#fff;
	}
	#proyectos .compatibilidad p{
		text-align:center;
		font-size:19px;
		font-weight:300;
		color:#7A7B7B;
		margin-bottom:0vh;
	}
	#proyectos .animproy{
		height: 70vh;
		float:left;
		display: block;
		width: 100%;
		overflow: hidden;
	}
	#proyectos .compatibilidad{
		height:30vh;
		float:left;
	}
	.ui-widget-header{
		border: none!important;
		background:none!important;
	}
	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
		
	}
	:focus{
		outline:none;
	}
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
			
	}
	
	.tab1,.tab2,.tab3,.tab4{
		
	}
	.catalogo{
		width:100%;
		float:left;
		background-color:#a3bd31;
		color:white;
	}
	
	
	
	#contacto{
		background-color: #696a68;
		color: white;
		font-size: 16px;
		font-weight: 300;
		display: flex;
		width: 100%;
		float: left;
		flex-direction: column;
	}
	#contacto .form{
		height:65vh;
		min-height:447px;
	}
	#contacto h2{
		color:white;
	}
	#contacto .columnas{

	}
	
	#contacto .columnas .col3{
		width:30%;
		float:left;
	}
	#contacto .columnas .col3:last-child{
		margin-top:40px;
	}
	#contacto .requerido{
		color: #a3bd31;
		font-size: 17px;
		font-weight: 500;
	}
	#contacto input[type=text],#contacto input[type=tel],#contacto input[type=email]{
		padding: 7px;
		width:85%;
		margin-bottom:25px;
	}
	#contacto textarea{
		padding: 7px;
		width:85%;
		margin-bottom:10px;
		height: 96px;
	}
	#contacto input[type=radio]{
		margin-bottom:25px;
		margin-top: 10px;
	}
	#contacto input[type=submit]{
		margin-bottom:25px;
		background:none;
		border:none;
		background-color:#a3bd31;
		color:white;
		padding:7px 10px;
		font-size:22px;
		float:left;
		clear:both;
		margin-top:20px;
	}
	
	
	#contacto .tel, #contacto .mail, #contacto .direccion{
		float:left;
		width:100%;
		margin-top: 20px;
	}
	
	#contacto .tel img{
		float:left;
		width:19px;
	}
	
	#contacto .mail img{
		float:left;
		width:25px;
	}
	
	#contacto .direccion img{
		float:left;
		width:33px;
	}
	#contacto .tel p, #contacto .mail p, #contacto .direccion p{
		float:right;
		width:87%;
	}
	#contacto .acepto{
		float:left;
	}
	#contacto .acepto a{
		display:inline;
		color:white;
	}
	
/********************* footer ****************************/

	#footer{
		background-color:#333333;
		clear:both;
		float:left;
		width:100%;
		height: 30vh;
		min-height:206px;
	}
	#footer .logof{
		width:395px;
		margin:auto;
		margin-top: 4vh;
	}
	#footer .social{
		width: 206px;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		margin: auto;
		margin-top: 5vh;
	}
	#footer .social icono{
		float:left;
	}
	#subfooter{
		width:100%;
	}
	#footer .creditos{
		float:left;
	}
	#footer .aviso{
		float:right;
	}
	.subfooter{
		margin-top:30px;
	}
	.subfooter .empresa{
		float:left;
	}
	.subfooter .creado{
		float:left;
		margin-left:30%;
		color:white;
	}
	.subfooter .aviso{
		float:right;
	}
/********************** nuevo *********************************/
	
	.columnas{
		float:left;
		width:100%;
	}
	
}

/******* media screen responsive 1386px x 686px*****************/
@media screen and (max-width: 1386px) and (max-height: 686px){

#productos .fondogris {
    
    top: 84px;
    left: 0px;
}
}
/******* media screen responsive 815px *****************/
@media screen and (max-width: 815px) {
	section{
		height:auto;
		min-height: 595px;
	}
	#principal{
		scroll-snap-type:none;
	}
	.fondo .animacion{
		width:100%;
		
	}
	.contenido-cent{
		width:100%;
	}
	#menu{
		margin-top: 15px;
	}
	#menu ul{
		display:none;
		z-index: 999;
    	position: relative;
    	background-color: #a3bd31;
    	float: left;
    	padding: 20px;
    	margin-top: -15px;
    	margin-left: 0px;
	}
	section h2 {
		font-size: 25px;
	}
	svg{
		width:100%;
	}
	.controles {
    	right: 0px;
	}
	#soluciones .animacion{
		margin-top: 12vh;
		height: 60vh;
	}
	#encabezado .social {
    	margin-top: 0px;
	}
	#encabezado .tel {
		margin-top: 10px;
	}
	.menu-resp{
		display:block;
		width:32px;
		margin-top: 6px;
    	margin-left: 20px;
    	float: left;
	}
	.menu-resp img{
		width:100%;
	}
	#inteligente .obj-int{
		transform: scale(0.55);
		margin-left: -185px;
	}
	#productos #tabs div ul li img {
    	height: 200px;
    	padding-top: 0px;
    	padding-bottom: 0px;
    	width: 200px;
    	display: block;
	}
	#proyectos .animproy,#proyectos .compatibilidad {
    height: auto;
	}
	#proyectos .compatibilidad p {
    	font-size: 16px;
		padding: 0 10px;
	}
	#contacto .form {
    	height: auto;
    	min-height: 847px;
	}
	.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
		padding: 20px 20px!important;
	}
}
/******* media screen responsive 570px *****************/
@media screen and (max-width: 570px) {
	.controles {
    	right: 35px;
		bottom: 5vh;
	}
	.ui-tabs .ui-tabs-nav li {
    	height: 53px!important;
	}
	.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    	padding: 11px 19px!important ;
    }
	#inteligente .obj-int {
		transform: scale(0.27);
		margin-left: -185px;
	}
	#productos .tab1 img {
    	width: 57px;
	}
	#productos .tab2 img {
    	width: 88px;
	}
	#productos .tab3 img {
    	width: 89px;
	}
	#productos .tab4 img {
    	width: 112px;
	}
	#productos .tab5 img {
    	width: 130px;
	}
	#productos .item {
		width: 375px;
	}
	#productos .catalogo p {
    	font-size: 15px;
    	line-height: 18px;
	}
	#productos .catalogo .btn-catalog {
    	font-size: 16px;
    	padding: 6px 0px;
	}
	.infocat{
		padding: 5px;
	}
	#productos .catalogo .btn-catalog {
		width: 100%;
	}
	#proyectos .marcas ul {
    	display: flex;
    	justify-content: space-around;
    	list-style: none;
    	flex-wrap: wrap;
		align-items: center;
	}
	#proyectos .marcas ul li{
		margin-bottom:10px;
	}
	#contacto .columnas .col3 {
    	width: 100%;
    	float: left;
		padding-left: 7%;
	}
	#contacto .columnas .col3:last-child {
    	margin-top: 40px;
    	padding-left: 20px;
		margin-bottom: 45px;
	}
	#footer .logof {
    	width: 100%;
    	margin: auto;
    	margin-top: 4vh;
	}
	#footer .logof img{
		width:80%;
		margin: auto;
    	display: inherit;
	}
	#footer{
		height: 41vh;
	}
	.subfooter .creado {
    	float: right;
       	color: white;
   		font-size: 12px;
    	width: 36%;
		margin-left: 0%;
	}
	#footer .aviso {
    	float: right;
    	margin-top: 20px;
		clear: both;
		display: inherit;
    	text-align: center;
    	width: 100%;
	}
	#productos .fondogris {
		height: 107px;
		top: 73px;
    }
}

/******* media screen responsive 480px *****************/
@media screen and (max-width: 480px) {
	.ui-tabs .ui-tabs-nav {
    	width: 100%!important;
	}
	#productos .item {
		width: 375px;
	}
	
}
/******* media screen responsive 380px *****************/
@media screen and (max-width: 320px) {
	#productos .item {
		width: 325px;
	}
}