/*
Theme Name: suwoow
Theme URI: http://emposicionamientodigital.com
Description: Theme modified by fer
Author URI: fer
Version: 1
*/
@media screen {
	

.menu_resp{
	display:none;
}
html{
	scroll-behavior: smooth;
}
/********************* estilos comun ****************************/
	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:white;
		width:100%;
		padding:0px;
		margin:0px;
		display:block;
		font-size:24px;
		font-family: 'Arsenal', sans-serif;
		font-weight: 400;
	}
	a{
		text-decoration:none;
		color: white;
	}
	
	section{
		width:100%;
		float:left;
	}
	#principal{
		overflow:hidden;
		width:100%;
	}
	#contenido{
		width:100%;
		float:left;
	}
	
	.cont-centrado{
		width:1200px;
		margin:auto;
		display: block;
	}
	section{
		width:100%;
		float:left;
	}
	
/*************************************************************/
	
	#encabezado{
		width:100%;
		height: 166px;
		display:block;
		float:left;
		z-index:9999;
		background-color: black;
		position: relative;
		color:white;
	}
	#encabezado .cont-centrado{
		height: 100%;
	}
	#encabezado .logo{
    	float: left;
    	margin-top: 0px;
    	margin-left: 0px;
		display:flex;
		width: 100%;
		height: 88px;
		justify-content: center;
	}

	#encabezado .logo img{
		width: auto;
		height: 100%;
	}
	
	
	/******************* menu ****************/
	.menumobil{
		display: none;
		transition: all 1s;
	}
	#menu{
		margin: auto;
		width:70%;
		transition:all 1s;
	}
	
	
	ul.nav-menu,
	div.nav-menu > ul {
		margin: 0;
		width:100%;
		list-style:none;
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
    	justify-content: space-between;
		align-items: center;
	}
	
		
	.nav-menu li {
		display: flex;
		align-items: center;
		height: 48px;
	}
	.nav-menu li a {
		color:#e82b88;
		text-decoration:none;
		font-size:17px;
		display:block;
		font-weight: 500;
		padding: 0px 10px;
		text-align: center;
		padding-bottom: 3px;
	}
	
	.sub-menu li:last-child{
		margin-right:0px;
	}
	.nav-menu li:hover > a,
	.nav-menu li a:hover,.nav-menu li > a.activo{
		color: white;
		border-bottom:2px solid white;
		margin-top:2px;
	}
	


	.nav-menu .sub-menu,
	.nav-menu .children {
		background-color: black;
    	padding: 10px;
		position: absolute;
		display: none;
	}
	.sub-menu li{
		margin-bottom:10px;
	}
	ul.nav-menu ul a,
	.nav-menu ul ul a {
		color: white;
		margin: 0;
	}
	ul.nav-menu ul a:hover,
	.nav-menu ul ul a:hover {
		color:white;
	}
	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: white;
	}
	.menu-nupki-container{
		display:block;
	}

	/************************************************* tema ******************************************/
	section{
		float:left;
		width:100%;
	}
	section h2{
		font-weight:700;
		font-size:100px;
		text-align:left;
		color: white;
	}
	section h3{
		font-weight:700;
		font-size:48px;
		text-align:center;
	}
	.btn_contacto{
		width: 210px;
		background-color: #e82b88;
		font-family: 'Lato', sans-serif;
		color: white;
		font-size: 18px;
		font-weight: 600;
		height: 44px;
		border-radius: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn_solicitar{
		background-color: #e82b88;
		border-radius: 40px;
		width: 228px;
		text-align: center;
		display: block;
		float: left;
		font-size: 18px;
		padding: 5px 40px;
		margin-top: 50px;
		line-height: 20px;
	}
	#animacion{
		width: 100vw;
		height: calc(100vh - 111px);
		display:block;
   	 	overflow: hidden;
    	background-image: url(../images/suwoow_fondo1.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		display: flex;
		align-items: center;
	}
	#animacion .col{
		width: 50%;
		float: left;
	}
	#animacion .social{
		background: linear-gradient(93deg, rgba(114,35,114,1) 0%, rgba(197,26,102,1) 100%);
		width: 210px;
		border-radius: 25px;
		padding: 4px 15px;
		font-family: 'Lato', sans-serif;
		color: white;
		font-size: 18px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 600;
	}
	#animacion .social a{
		display: inline-block;
		margin-right: 10px;
	}
	#animacion .social a img{
		float: left;
	}
	#animacion p{
		font-size: 100px;
		color: white;
		font-style: italic;
		font-weight: 600;
	}
	#animacion p span{
		font-size: 140px;
		color: #e02b80;
		font-style: italic;
		font-weight: 600;
	}
	#animacion .lnkcontacto{
		width: 74%;
		display: flex;
		justify-content: space-between;
	}

	#generaingresos{
		background-color: #f8bcc1;
	}
	#generaingresos .fondo{
		background-image: url(../images/suwoow_fondo_silueta.png );
		background-repeat: no-repeat;
		background-position: center top;
		padding: 100px 0px;
		background-size: cover;
	}
	#generaingresos .columnas{
		width: 100%;
		float: left;
		display: flex;
	}
	#generaingresos .columnas .col1{
		width: 40%;
		float: left;
		padding-right: 5%;
		margin-bottom: 40px;
	}
	#generaingresos .columnas .col2{
		width: 60%;
		float: left;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 7%;
	}
	#generaingresos .col2 img{
		filter: drop-shadow(2px 8px 12px #00000077);
	}
	#generaingresos .col1 h4{
		color: white;
		font-size: 44px;
		text-align: left;
		margin-top: -51px;
		margin-bottom: 40px;
	}
	#generaingresos .col1 h3{
		color:#c71a66;
		font-size: 80px;
		text-align: left;
	}
	#generaingresos .col1 p{
		font-size: 32px;
		color: white;
	}

	#por_que{
		background-image:url(../images/suwoow_fondo_por_que.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		padding: 120px 0px;
	}
	#por_que .columnas{
		width: 100%;
		float: left;
		display: flex;
	}
	#por_que .col{
		width: 50%;;
		float: left;
	}
	#por_que .columnas .col:nth-child(1){
		padding-right: 116px;
	}
	#por_que h2{
		margin-bottom: 50px;
	}
	#por_que p{
		color: white;
		margin-top:20px;
	}
	#por_que .columnas .col:nth-child(2){
		display: flex;
		align-items: flex-end;
	}
	#beneficios{
		padding: 85px 0px;
	}
	#beneficios h2{
		font-size: 60px;
		color:#e82b88;
		width: 100%;
		text-align: center;
		font-style: italic;
	}
	#beneficios .columnas{
		width: 100%;
		float: left;
		display: flex;
		justify-content: space-between;
	}
	#beneficios .columnas .col{
		width: 30%;
		color: #e82b88;
	}
	#beneficios .columnas .col .smlbubi{
		margin: auto;
		display: block;
		margin-bottom: 46px;
		margin-top: 40px;
	}
	#beneficios .txtinfo{
		font-weight: bold;
		color:#e82b88;
		width: 100%;
		float: left;
		text-align: center;
		padding: 0px 30%;
		margin-top: 55px;
	}
	#beneficios .btn_solicitar{
		width: 270px;
		margin-left: calc(50% - 135px);
	}
	#promociones .cont-centrado{
		overflow: visible;
	}
	#promociones h2{
		font-size: 100px;
		color:#e82b88;
		width: 100%;
		text-align: center;
		margin-top: 40px;
		margin-bottom: 80px;
	}
	#promociones .columnas{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	#promociones .columnas .col{
		width:358px;
		position: relative;
	}
	#promociones .columnas .col .kits{
		width: 186px;
		height: 186px;
		display: flex;
    	justify-content: center;
		font-size: 60px;
		text-align: center;
		font-weight: bold;
		line-height: 25px;
		margin: auto;
		z-index: 9999;
		position: relative;
		filter: drop-shadow(0px 5px 8px #000000bb);
	}
	#promociones .columnas .col .info{
		padding: 0px 40px;
		padding-top: 80px;
		padding-bottom: 30px;
		font-size: 20px;
		color: white;
		margin-top: -40px;
		z-index: 999;
		position: relative;
		filter: drop-shadow(0px 5px 8px #000000bb);
		border-radius: 40px;
	}
	#promociones .columnas .col .info h3{
		font-size: 160px;
		color:white;
		line-height: 95px;
	}
	#promociones .columnas .col .info h3 span{
		font-size: 60px;
	}
	#promociones .columnas .col:nth-child(1) .kits{
		background-image: url(../images/suwoow_bubi_op1.png);
		background-repeat: no-repeat;
		color:#e82b88;
	}
	#promociones .columnas .col:nth-child(2) .kits{
		background-image: url(../images/suwoow_bubi_op2.png);
		background-repeat: no-repeat;
		color:black;
	}
	#promociones .columnas .col:nth-child(3) .kits{
		background-image: url(../images/suwoow_bubi_op3.png);
		background-repeat: no-repeat;
		color:#712372;
	}
	#promociones .columnas .col .kits p{
		margin-top: 43%;
		text-align: center;
	}
	#promociones .columnas .col .kits span{
		font-size: 21px;
		font-weight: 400;
    	padding: 0;
    	margin: 0;
	}
	#promociones .columnas .col:nth-child(1) .info{
		background-color: #e82b88;
	}
	#promociones .columnas .col:nth-child(2) .info{
		background-color: #000;
		border:1px solid white;
	}
	#promociones .columnas .col:nth-child(3) .info{
		background-color: #712372;
	}
	#promociones .btn_adquirir{
		background-color: white;
		width: 170px;
		margin: auto;
    	display: block;
	    text-align: center;
    	padding: 10px 0px;
    	border-radius: 25px;
    	margin-top: 30px;
		font-weight: bold;
		font-size: 18px;
	}
	#promociones .columnas .col:nth-child(1) .btn_adquirir{
		color:#e82b88;
	} 
	#promociones .columnas .col:nth-child(2) .btn_adquirir{
		color:#000;
	} 
	#promociones .columnas .col:nth-child(3) .btn_adquirir{
		color:#712372;
	} 
	#distribuidor{
		background-image: url(../images/suwoow_fondo_distribuidor.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		color:white;
		padding-top: 230px;
		margin-top: -130px;
		padding-bottom: 100px;
	}
	#distribuidor h2{
		width: 100%;
		text-align: center;
		margin-bottom: 100px;
	}
	#distribuidor ul{
		color: white;
		columns: 2;
		column-gap: 100px;
		list-style: none;
		margin-left: 125px;
		margin-bottom: 100px;
	}
	#distribuidor ul li{
		background-repeat: no-repeat;
		background-position: left center;
		background-size: contain;
		padding-left: 100px;
		height: 80px;
		padding-right: 135px;
		margin-bottom: 40px;
	}
	#distribuidor ul li:nth-child(1){
		background-image: url(../images/suwoow_distribuidor_1.png);
	}
	#distribuidor ul li:nth-child(2){
		background-image: url(../images/suwoow_distribuidor_2.png);
	}
	#distribuidor ul li:nth-child(3){
		background-image: url(../images/suwoow_distribuidor_3.png);
	}
	#distribuidor ul li:nth-child(4){
		background-image: url(../images/suwoow_distribuidor_4.png);
	}
	#distribuidor ul li:nth-child(5){
		background-image: url(../images/suwoow_distribuidor_5.png);
	}
	#distribuidor ul li:nth-child(6){
		background-image: url(../images/suwoow_distribuidor_6.png);
	}
	#distribuidor .btn_adquirir{
		background-color: white;
		width: 270px;
		margin: auto;
    	display: block;
	    text-align: center;
		padding: 11px 45px;
    	border-radius: 25px;
    	margin-top: 30px;
		font-weight: bold;
		font-size: 18px;
		color: #e82b88;
	}
	#testimonios{
		width: 100%;
		float: left;
		padding: 100px 0px;
	}
	#testimonios .cont-centrado{
		overflow: visible;
		padding: 0px 300px;
	}
	#testimonios h2{
		color: #e82b88;
		text-align: center;
	}
	#testimonios .columnas{
		width: 100%;
	}
	#testimonios .columnas .testimonio{
		width: 440px;
		padding: 30px;
	}
	#testimonios .columnas .testimonio img{
		width:135px;
		height: 135px;
		display: block;
		margin: auto;
		background-color: blue;
		border-radius: 50%;
		z-index: 9999;
		position: relative;
		overflow: hidden;
	}
	#testimonios .columnas .testimonio{
		width: 100%;
		height: 650px;
	}
	#testimonios .columnas .testimonio .info{
		width: 100%;
		border-radius: 40px;
		overflow: hidden;
		filter: drop-shadow(4px 4px 10px #000000bb);
		position: relative;
		z-index: 999;
		margin-top: -50px;
	}
	#testimonios .columnas .testimonio .info .tit{
		width: 100%;
		height: 148px;
		text-align: center;
		color:white;
		background-color: #e82b88;
		font-weight: bold;
		padding-top: 80px;
		font-size: 30px;
		line-height: 23px;
	}
	#testimonios .columnas .testimonio .info .tit span{
		font-size: 16px;
	}
	#testimonios .columnas .testimonio .info .txt{
		padding: 50px 50px;
		font-size: 22px;
		color: #e82b88;
		background-color: white;
	}
	#testimonios .separador{
		margin-top: 60px;
		display: block;
		float: left;
	}
	#faq{
		padding-bottom: 80px;
	}
	#faq h2{
		color:#e82b88;
		margin-bottom: 60px;
	}
	#faq .pregunta.color1{
		background-color: #e82b88;
		color:white;
	}
	#faq .pregunta.color1 h3{
		color: white;
	}
	
	#faq .pregunta{
		width: 100%;
		height: 113px;
		padding: 13px 40px;
		color: #e82b88;
		position: relative;
		transition: height 500ms;
		filter: drop-shadow(2px 4px 6px #000000bb);
		background-color: white;
		z-index: 999;
		padding-right: 150px;
	}
	#faq .pregunta .info::after{
		content: " ";
		border: 38px solid #e82b88;
		border-width: 40px 90px 0px 90px;
		border-color: #e82b88 transparent transparent transparent;
		position: absolute;
		top: 112px;
		left: 1020px;
		transition: all 500ms;
	}
	#faq .pregunta.color2:hover .info::after{
		top: 210px;
		border-width: 0px 90px 0px 90px;
		transition: all 500ms;
	}
	#faq .pregunta.color2 .info::after{
		content: " ";
		border: 38px solid white;
		border-width: 40px 90px 0px 90px;
		border-color: white transparent transparent transparent;
		position: absolute;
		top: 112px;
		left: 1020px;
		transition: all 500ms;
	}
	#faq .pregunta:hover .info::after{
		top: 210px;
		border-width: 0px 90px 0px 90px;
		transition: all 500ms;
	}
	#faq .pregunta.pos1{
		z-index: 200;
	}
	#faq .pregunta.pos2{
		z-index: 190;
	}
	#faq .pregunta.pos3{
		z-index: 180;
	}
	#faq .pregunta.pos4{
		z-index: 170;
	}
	#faq .pregunta.pos5{
		z-index: 160;
	}
	#faq .pregunta.pos6{
		z-index: 150;
	}
	#faq .pregunta.pos7{
		z-index: 140;
	}
	#faq .pregunta.pos8{
		z-index: 130;
	}
	#faq .pregunta h3{
		font-size: 32px;
		text-align: left;
		height: 80px;
		display: flex;
		align-items: center;
	}

	#faq .pregunta p{
		margin-top: 10px;
		opacity: 0;
		transition: opacity 300ms;
	}
	#faq .pregunta:hover p{
		opacity: 1;
		transition: opacity 2s;
	}
	
	#faq .pregunta:hover{
		height: 210px;
		transition: height 500ms;
	}
	#pag_404 #animacion .info h2.titbln{
		color:white;
		text-shadow:  2px 2px 5px  #00000090;
		letter-spacing: -2px;
		position: relative;
		z-index: 9999;
		width: 780px;
		padding-left: 5px;
	}
	#pag_404 #animacion .info h2:before{
		content:"Página no encontrada";
		text-shadow:  5px 5px 1px  #00783f ,-5px -5px 1px  #00783f, 5px 0px 1px  #00783f,0px 5px 1px  #00783f,-5px -5px 1px  #00783f,-5px 0px 1px  #00783f,0px -5px 1px  #00783f,-5px 5px 1px #00783f, 5px -5px 1px #00783f ;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: -1;
		padding-left: 5px;
	}
	

/***********************************************************************************************************************/
	#footer{
		color:white;
		background-color:#e82b88;
		height: auto;
		display: block;
		font-size: 21px;
		padding: 80px 0px;
	}
	#footer .columnas{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#footer .columnas .col img{
		display: block;
		margin: auto;
	}
	#footer .columnas .col p{
		text-align: center;
	}
	#footer .columnas .col:nth-child(2) p{
		text-align: left;
	}
	#footer .aviso{
		width: 100%;
		text-align: center;
    	display: block;
    	font-size: 17px;
	}
	
	
}