/*
Sitio web soluciona
dev: Fernando

*/

	
@media screen {
	div,h1,h2,h3,h4,p{
		margin:0;
		padding:0;
		display:block;
	}
	* { margin: 0; padding: 0;
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	a{
		text-decoration:none;
	}
	body {
		background-color: white;
		width:100%;
		padding:0px;
		margin:0px;
		display:block;
		font-family: 'Fira Sans';
		font-weight:400;
	}
	#contenido{
		/*scroll-snap-type: y mandatory;
		scroll-snap-points-x: repeat(100vh);
		overflow-y: scroll;
		scroll-behavior: smooth;
		height:100vh;*/
	}
	
	.cont_centrado{
		max-width:1200px;
		min-width:500px;
		display:block;
		margin:auto;
	}
	p{
		font-size:20px;
		font-weight:300;
		color:#2e2f32;
		line-height:25px;
		float:left;
	}
	
	
	h2{
		font-size:55px;
		font-weight:300;
		color:#838a91;
		margin-bottom: 4vh;
		float: left;
		margin-top: 6vh;
	}
	section {
		width:100%;
		height:100vh;
		display:block;
		float:left;
		overflow:hidden;
		/*scroll-snap-align: start;*/
	}
	#principal{
		background-image:url(../images/fondo.jpg);
		background-attachment:fixed;
		background-position:0px;
		background-repeat:no-repeat;
		background-size:cover;
		position:relative;
		float:left;
		height:100vh;
	}
	
	.logo{
		float:right;
		margin-top:20px;
	}
	
	
	#principal .text{
		width:400px;
		margin-top:35vh;
		position:absolute;
		margin-left:50px;
	}
	#principal .text h1{
		font-size:32px;
		text-align:center;
		font-weight:600;
	}
	#principal .text h3{
		font-size:18px;
		text-align:center;
		font-weight:400;
		margin-bottom:15px;
		
	}
	
	#principal .logoesponsor {
		width: 80px;
		bottom: 5vh;
		position: absolute;
		right: 100px;
	}
	
	.btncontactar{
		color:white;
		font-weight:400;
		font-size:18px;
		padding:10px 20px;
		background-color:#dcaa00;
		margin-left:20%;
		margin-top:20px;
		width: 214px;
		float:left;
	}
	#parallax{
		width:100vw;
		height:calc(100vh - 50px);
		background-image:url(../images/soluciona_47.png);
		background-repeat:no-repeat;
		background-position:0px center;
		background-attachment:fixed;
		background-size:cover;
		float:left;
		display:flex;
		align-content:space-between;
		flex-direction:column;
	}
	#parallax h2{
		font-family: "Century Gothic";
		font-size:7vh;
		font-weight:bold;
		color:#ffd200;
		text-shadow:3px 3px 4px black;
		width:100%;
		text-align:center;
		float:left;
	}
	
	.btncontacto{
		color:#5c6670;
		background-color:#ffd200;
		padding:7px 25px;
		margin:auto;
		width:140px;
		display:block;
	}
	
	#soluciones ul{
		column-count:2;
		float:left;
		font-size:22px;
		line-height:28px;
		font-weight:300;
		margin-left:47px;
		column-gap: 60px;
	}
	
	#soluciones ul li{
		margin-bottom:30px;
		list-style-image:url(../images/palomita.png);
	}
	#soluciones .cintilla{
		width:100%;
		float:left;
		margin-top: 4vh;
	}
	#home-office h2{
		margin-top: 4vh;
	}
	#home-office .opciones{
		float: left;
		margin-left: 40px;
		font-size: 20px;
		font-weight: 300;
		color: #2e2f32;
		list-style:none;
		column-count: 2;
		column-gap: 60px;
		margin-top: 4vh;
	}
	#home-office .opciones li{
		background-repeat:no-repeat;
		background-size: 60px 60px;
		padding-left:80px;
		height: 60px;
		margin-bottom: 1vh;
		line-height: 30px;
	}
	
	#home-office .opciones li:nth-child(1){
		background-image:url(../images/icon-renta.png);
	}
	#home-office .opciones li:nth-child(2){
		background-image:url(../images/icon-nube.png);
	}
	#home-office .opciones li:nth-child(3){
		background-image:url(../images/icon-software.png);
	}
	#home-office .opciones li:nth-child(4){
		background-image:url(../images/icon-antivirus.png);
	}
	#home-office .opciones li:nth-child(5){
		background-image:url(../images/icon-vpn.png);
	}
	#home-office .opciones li:nth-child(6){
		background-image:url(../images/icon-wifi-casa.png);
	}
	#home-office .opciones li:nth-child(7){
		background-image:url(../images/icon-remoto.png);
	}
	#home-office .opciones li:nth-child(8){
		background-image:url(../images/icon-video.png);
	}
	#home-office .opciones li:nth-child(9){
		background-image:url(../images/icon-soporte.png);
	}
	#home-office .opciones li:nth-child(10){
		background-image:url(../images/icon-soporte24.png);
	}
	
	#home-office .marcas{
		float: left;
		list-style:none;
		margin-top: 3vh;
		display:flex;
		justify-content:space-around;
		width:100%;
	}
	#home-office .lider{
		font-size:14px;
	}
	
	#home-office .soporte{
		margin-top: 4vh;
	}
	#ventajas{
		background-color:#eaeaea;
		padding-top:9vh;
	}
	#ventajas .columnas{
		width:100%;
		float:left;
	}
	#ventajas .columnas .col{
		width:50%;
		float:left;
	}
	#ventajas .columnas .col:nth-child(1) img{
		width:80%;
		border-radius:50%;
		box-shadow: 3px 6px 10px black;
		border: 7px solid #5d5d5d;
	}
	
	#ventajas .columnas .col:nth-child(2){
		padding-left:50px;
	}
	#ventajas h3{
		font-size:32px;
		margin-bottom:20px;
		font-weight:400;
	}
	#ventajas ul{
		margin-left:0px;
		font-size:22px;
		line-height:28px;
		font-weight:300;
		list-style-position: outside;
		
	}
	#ventajas ul li{
		margin-bottom:2vh;
		background-image:url(../images/palomita.png);
		background-repeat:no-repeat;
		list-style:none;
		padding-left:50px;
	}
	#ventajas .iconos{
		display:flex;
		justify-content:space-around;
	}
	#ventajas .icon{
		min-width:13vh;
		max-width:14vh;
		display:block;
		float:left;
	}
	#ventajas .icon img{
		width:100%;
	}
	#ventajas .titvntj{
		margin-top:10px;
		margin-bottom:10px;
		font-size:32px;
		font-weight: 500;
		color:black;
	}
	#ventajas .titvntj span{
		font-size:26px;
	}
	#ventajas .pasos{
		width:100%;
		margin-top:0px;
		float:left;
		
	}
	#ventajas .paso{
		width:25%;
		float:left;
		background-color:#0083ff;
		height:120px;
		padding:10px;
		
	}
	#ventajas .paso:nth-child(1),#ventajas .paso:nth-child(2),#ventajas .paso:nth-child(3){
		border-right:1px solid white;
	}
	#ventajas .paso:nth-child(1) span{
		background-color:#e0df00;
		color:white;
		border-radius:50%;
		padding:5px 10px;
		margin-right:10px;
	}
	#ventajas .paso:nth-child(2) span{
		background-color:#9c732c;
		color:white;
		border-radius:50%;
		padding:5px 10px;
		margin-right:10px;
	}
	#ventajas .paso:nth-child(3) span{
		background-color:#15ab07;
		color:white;
		border-radius:50%;
		padding:5px 10px;
		margin-right:10px;
	}
	#ventajas .paso:nth-child(4) span{
		background-color:#1da4de;
		color:white;
		border-radius:50%;
		padding:5px 10px;
		margin-right:10px;
	}
	
	#ventajas .paso p{
		font-size:16px;
		color:white;
		display:initial;
		float: initial;
		line-height:23px;
	}
	
	
	footer{
		width:100%;
		background-color:#838a91;
		float:left;
		padding-top:20px;
		padding-bottom:20px;
	}
	
	footer .derechos{
		width:100%;
		background-color:#5c6670;
		color:white;
		float:left;
		padding:10px;
	}
	footer .derechos p{
		color:white;
		float:left;
	}
	footer .derechos .aviso{
		float:right;
	}
	.popup{
		position:fixed;
		top:0px;
		left:0px;
		background-color:#00000094;
		width:100vw;
		height:100vh;
		display:flex;
		align-items: center;
		justify-content: center;
		
	}
	.popup .infopop{
		position:relative;
		width: 715px;
	}
	.popup .cerrar{ 
		cursor:pointer;
		color:white;
		width:100%;
		text-align:right;
		float:left;
		padding:5px;
		font-weight:normal;
		font-size:32px;
		font-family: "Century Gothic";
	}
	.popup .cerrar span{
		font-size:18px;
	}
	.popup img{
		float:left;
		width:100%
	}
	.popup .btnsolicitar{
		background-color:#dcaa00;
		color:white;
		font-size:22px;
		padding:10px 15px;
		position:absolute;
		top: 534px;
		left: 98px;
		font-family: "Century Gothic";
		font-weight:bold;
	}
}	
	/*********************************** paginas intermedias ***************************************/
@media screen and (min-width: 1400px) {

	#soluciones ul {
    column-count: 2;
    float: left;
    font-size: 22px;
    line-height: 28px;
    font-weight: 300;
    margin-left: 25px;
	margin-bottom: 11vh;
	}
	#ventajas ul li {
		margin-bottom: 4vh;
	}
	#ventajas .columnas .col:nth-child(1) img {
		width: 98%;
	}
	
	
}

@media screen and (max-width: 1390px) {
	#ventajas .columnas .col:nth-child(1) img {
		width: 77%;
	}
	#ventajas {
    	padding-top: 4vh;
	}
	#ventajas .titvntj{
		font-size: 26px;
	}
	#ventajas .titvntj span{
		font-size: 22px;
	}
	#home-office h2 {
		margin-top: 1vh;
		margin-bottom: 0vh;
	}
}
@media screen and (max-width: 580px) {
	section{
		padding:10px;
		height:auto;
	}
	h2 {
		font-size: 40px;
	}
	.logo{
		width:20%;
	}
	.logo img{
		width:100%;
	}
	#soluciones ul {
		font-size: 18px;
		line-height: 24px;
	}
	#principal{
		height:100vh;
		background-position: -48px 0px;
		background-attachment:fixed;
		background-image:url(../images/fondo_resp.jpg);
	}
	#principal .text {
		width: 100%;
		max-width: 400px;
		margin-left: 0px;
		position: relative;
		margin-left: auto;
		clear: both;
		margin-top: 15px;
		display: block;
		float:left;
	}
	#principal .text p{
		width: 62%;
	}
	
	#principal .logoesponsor {
		width: 59px;
		bottom: 0vh;
		position: absolute;
		right: 19px;
	}
	#principal .logoesponsor img{
		width:100%;
	}
	
	
	#soluciones ul {
		column-count: 1;
	}
	#ventajas .columnas .col {
		width: 100%;
	}
	#ventajas .paso {
		width: 50%;
	}
	.cont_centrado {
		
		min-width: 100%;
	}
	#ventajas .columnas .col:nth-child(1) img {
		margin-left: 11%;
		margin-bottom:20px;
	}
	#ventajas .columnas .col:nth-child(2) {
		padding-left: 0px;
	}
	#ventajas ul {
		margin-left: 0px;
		font-size: 18px;
	}
	#ventajas .paso {
		height: 212px;
		border-bottom:1px solid white;
	}
	.dersitio{
		font-size:16px;
	}
	#home-office h2 {
		margin-top: 4vh;
		margin-bottom: 2vh;
	}
	#home-office .opciones{
		margin-left: 0px;
		column-count:1;
		font-size: 17px;
	}
	#home-office .opciones li{
		height:auto;
		margin-bottom: 4vh;
		line-height: 23px;
	}
	#home-office .marcas {
		flex-wrap: wrap;
	}
	#home-office .marcas li{
		margin-bottom: 20px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.popup img{
		width:100%;
	}
	.popup .btnsolicitar{
		top: 410px;
		left: calc(50% - 135px)
	}
}