/* Add here all your CSS customizations */

/*Font euro*/

@font-face {
    font-family: 'Eurostile';
    src: url(../euro/EurostileMedium.ttf) format("truetype");
}

@font-face {
    font-family: 'Eurostile Medium';
    src: url(../euro/EurostileMedium.ttf) format("truetype");
}

@font-face {
    font-family: 'Eurostile Bold';
    src: url(../euro/EurostileBold.ttf) format("truetype");
}

.euro{
	font-family: 'Eurostile';
}

.euro-m{
	font-family: 'Eurostile Medium';
}

.euro-b{
	font-family: 'Eurostile Bold'; 
}

.arial{
	font-family: Arial;
}

/**/

:root{
	--rojo: #e20613;

}

.p-no-margin{
	margin: 0;
}

.l-blanca{
	color: #fff !important;
}

.l-roja{
	color: #e20613;
}

.mb-5-title{
	margin-bottom: 3rem!important;
}

.padd-0{
	padding: 0;
}

.cut-img-2{
	position: relative;
	left: -4.9%;
}

.cut-img-3{
	position: relative;
	left: -40%;
}

.card{
	background-color: #000;
}

.featured-box{
	background: #000;
	min-height: 360px;
}

.modelo-home{
	background: url('../img/home/conectividad-y-funcionamiento.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 800px;
}

.modelo-cedis{
	background: url('../img/cedis/conectividad-y-funcionamiento-cedis.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 800px;
}

.modelo-retail{
	background: url('../img/retail/conectividad-y-funcionamiento-retail.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 800px;
}

/**/
.back-cedis{
	background: url('../img/cedis/s4u-cedis.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

.back-retail{
	background: url('../img/retail/s4u-retail.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

/**/
.card-title{
	text-align: center;
}

.camera{
	background: rgba(226, 6, 19, 0.6);
    border-radius: 50%;
    height: 210px;
    width: 210px !important;
}

.span-camera{
	position: absolute;
    top: 50%;
    line-height: 30px;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
}

.logos{
	text-align: center;
}

.justi-p{
	text-align: justify;
}

.tp-caption{
	letter-spacing: 1px!important;
}

.left-footer{
	text-align: left;
}

.center-footer{
	text-align: center;
}

.right-footer{
	text-align: right;
}

.logo-leadme{
	width: 175px;
	height: 48px;
}

.hide{
	display: none;
}

.list-red{
	list-style: disc;
	color: red;
	text-align: left;
}

.logos img{
	width: 150px;
}

.linea1{
	position: absolute;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	width: 75px;
	height: 75px;
	top: 45px;
	left: 45px;
}

.linea2{
	position: absolute;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 75px;
	height: 75px;
	top: 45px;
	right: 45px;
}

.linea3{
	position: absolute;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	width: 75px;
	height: 75px;
	bottom: 45px;
	left: 45px;
}

.linea4{
	position: absolute;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 75px;
	height: 75px;
	bottom: 45px;
	right: 45px;
}

.frame-circle{
	position: absolute;
    width: 25px;
    border-radius: 50%;
    background: #e20613;
    height: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


/*Home Camera*/
.linea1-home{
	position: absolute;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	width: 75px;
	height: 75px;
	top: 45px;
	left: 45px;
}

.linea2-home{
	position: absolute;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 75px;
	height: 75px;
	top: 45px;
	right: 45px;
}

.linea3-home{
	position: absolute;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	width: 75px;
	height: 75px;
	bottom: 45px;
	left: 45px;
}

.linea4-home{
	position: absolute;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 75px;
	height: 75px;
	bottom: 45px;
	right: 45px;
}

.frame-circle-home{
	position: absolute;
    width: 25px;
    border-radius: 50%;
    background: #e20613;
    height: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/**/

/*Home Carousel*/
.linea1-carousel{
	position: absolute;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	width: 75px;
	height: 75px;
	top: 45px;
	left: 45px;
	z-index: 99;
}

.linea2-carousel{
	position: absolute;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 75px;
	height: 75px;
	top: 45px;
	right: 45px;
	z-index: 99;
}

.linea3-carousel{
	position: absolute;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
	width: 75px;
	height: 75px;
	bottom: 45px;
	left: 45px;
	z-index: 99;
}

.linea4-carousel{
	position: absolute;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	width: 75px;
	height: 75px;
	bottom: 45px;
	right: 45px;
	z-index: 99;
}

.frame-circle-carousel{
	position: absolute;
    width: 25px;
    border-radius: 50%;
    background: #e20613;
    height: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.wasa-mobile{
	display: none;
}

/**/

.two-screen-services{
	padding: 0 50px;
}

.separate-line{
	border-right: 1px solid #e20613;

}
/**/

.round-img{
	border-radius: 50%;
	border: 1px solid red;
	transition: all .6s ease-in-out;
	padding: 7px;
}

.round-img:hover{
	border-radius: 50%;
	border: 5px solid red;
	transition: all .6s ease-in-out;
	padding: 3px;
}

.reverse-button:hover{
	background: transparent;
	color: #fff;
	transition: all .4s ease-in-out;
	border: 1px solid #e20613;
}

::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}

::-webkit-scrollbar-thumb {
  background: #e20613;
}

::-webkit-scrollbar-track {
  background: #b8c0c8;
}


/*size-font*/

.f-18{
	font-size: 18px !important;
}

.f-20{
	font-size: 20px !important;
}

.sist-23{
	font-size: 20px !important;
}

.socials{
	display: flex;
	padding: 0;
}

.w-600{
	font-weight: 600;
}

.no-upper{
	text-transform: none;
}

.lh-normal{
	line-height: normal;
}

/*Redes*/
.redes{
	font-size: 30px;
	margin-left: 30px;
	margin-bottom: 25px;
	margin-top: 30px;
}

.redes i{
	margin-right: 10px;
}

#redes-mobile{
	display: none;
}

#redes-float{
	position: fixed;
    bottom: 150px;
    right: -95px;
    z-index: 99999;
    background: #25d366;
    padding: 1px 10px;
    border-radius: 5px;
    transition: all .5s ease-in-out;
}

#redes-float:hover{
	right: 0;
	transition: all .5s ease-in-out;
}

.cont-whats{
	display: flex;
	align-items: center;
}

.cont-whats:hover{
	text-decoration: none;
}

img.whats-float{
	width: 50px;
	height: 50px;
	margin-right: .5rem;
}

.whats-float{
	-webkit-animation-name: pulse-whats;
	        animation-name: pulse-whats;
	-webkit-animation-iteration-count: infinite;
  			animation-iteration-count: infinite;
	-webkit-animation-duration: 1s;
  			animation-duration: 1s;
  	-webkit-animation-fill-mode: both;
  			animation-fill-mode: both;
}

@-webkit-keyframes pulse-whats {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse-whats {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


/*Capa transparente*/

.capa-transparente:after{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	background: rgba(0,0,0,0.55);
	transition: all 0.3s ease-in-out;
}

.hover-two-screen:hover .capa-transparente:after{
	background: none;
	transition: all 0.3s ease-in-out;
}


/******Responsive**********/

@media screen and (max-width: 1440px){
	.linea1-home{top: 160px;}
	.linea2-home{top: 160px;}
}

@media screen and (max-width: 768px){
	section.section{margin: 15px 0; padding: 15px 0;}
	.mt-5, .my-5{margin-top: 1rem!important;}
	.mb-5, .my-5{margin-bottom: 1rem!important;}
	.mb-5-title{margin-bottom: 1rem!important;}
	h2{font-size: 1.7em; line-height: 28px;}
	.sist-23{font-size: 14px !important;}
	.span-camera{line-height: 22px;}
	.camera{height: 150px; width: 150px !important;}
	.modelo-home, .modelo-cedis, .modelo-retail{background-size: contain; height: 26vh;}
	.mt-3, .my-3 {margin-top: .8rem!important;}
	.featured-box{min-height: 315px;}
	.left-footer, .right-footer{text-align: center;}
	.socials{margin: 15px 0;}
	.feature-box{display: block;}
	.form-control{height: calc(3.85rem + 2px); padding-bottom: 0; padding-top: 0; font-size: 18px !important;}
	.pr-5{padding-left: 35px;}
	.linea1{top: 40px; left: 20px; width: 40px; height: 40px;}
	.linea2{top: 40px; right: 20px;  width: 40px; height: 40px;}
	.linea3{bottom: 20px; left: 20px; width: 40px; height: 40px;}
	.linea4{bottom: 20px; right: 20px; width: 40px; height: 40px;}
	.frame-circle{width: 10px; height: 10px;}
	/*lineasHome*/
	.linea1-home{left: 20px; width: 40px; height: 40px;}
	.linea2-home{right: 20px;  width: 40px; height: 40px;}
	.linea3-home{bottom: 20px; left: 20px; width: 40px; height: 40px;}
	.linea4-home{bottom: 20px; right: 20px; width: 40px; height: 40px;}
	.frame-circle-home{width: 10px; height: 10px;}
	/**/
	/*lineaCarousel*/
	.linea1-carousel{top: 10px; left: 20px; width: 30px; height: 30px;}
	.linea2-carousel{top: 10px; right: 20px;  width: 30px; height: 30px;}
	.linea3-carousel{bottom: 30px; left: 20px; width: 30px; height: 30px;}
	.linea4-carousel{bottom: 30px; right: 20px; width: 30px; height: 30px;}
	.frame-circle-carousel{width: 10px; height: 10px;}
	/**/
	.separate-line{border: none;}
	.logos{padding: 30px 0;}
	#footer .footer-copyright{padding-bottom: 50px;}
	.logo-leadme{margin-top: 15px;}
	.wasa-desktop{display: none;}
	.wasa-mobile{display: inline;}
	#redes-float{display: none;}
	#redes-mobile{display: flex; padding: 4px 0; justify-content: center; background: #25d366; position: fixed; bottom: 0; width: 100%; z-index: 9999;}
	.cont-whats{font-size: 22px;}
	.cut-img-2{left: 0%;}
	.cut-img-3{left: 0%;}
}