@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;900&display=swap');
html {
	scroll-behavior: smooth;
}
body {
    background: #ffffff;
    color: #1d2124;
    font-family: "Red Hat Display", sans-serif;
}
h1,h2,h3,h4,h5,h6{ font-weight: 400 !important; color: #F6D355; text-transform: uppercase;}
/* Back to top button */
.back-to-top {
  position: fixed;
  display: none;
  background: #333;
  color: #fff;
  display: inline-block;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 1;
  font-size: 16px;
  border-radius: 50%;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
  z-index: 11;
}
.back-to-top i {
  padding-top: 12px;
  color: #fff;
}
@media (max-width: 768px) {
  .back-to-top {
    bottom: 15px;
  }
}
/*HEADER*/
#header {padding: 25px 0;
    height: 92px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    transition: all 0.5s;
    z-index: 997;}
/*nav bar*/
.navbar{ background-color: #1d212442 !important;}
.nav-link{ padding-right: 1.5rem !important; }
.nav-item a, .nav-item a:link, .nav-item a:visited { color: #ffffff !important; transition: all 0.5s; text-transform: uppercase !important; font-size: 0.85rem !important; font-weight: 600 !important;}
.nav-item a:hover {color: rgba(255,255,255,.5) !important; text-transform: uppercase !important;}

@media (max-width: 768px){
.navbar{
    padding: 0.5rem !important;
}
}
/*fin nav bar*/
.btn{ border-radius: 0 !important;}

/* intro Section
--------------------------------*/
#intro {
  background: url("../imgs/main-backg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 60px 0 40px 0;
height: 100vh;
}
#intro h2{ font-size: 1.8rem;}
#intro h6{ font-size: 1.1rem; color: #ffffff; line-height: inherit;}
#intro hr{ border-top: 1px solid #F6D355;}
#infointro{ background-color: #1d21248c; text-align: left; margin: 40% 5% 0%; padding: 1%;}
#intro i {
  font-size: 60px;
  padding: 0;
  margin: 0;
  color: #F6D355;
  transition: 0.3s;
}
#intro :hover i {
  color: #ffffff;
}
@media (max-width: 768px){
#infointro{margin: 70% 5% 0%; padding: 3%;}
#intro h2{ font-size: 1.4rem;}
}
#intro .container, #videos .container, #contacto .container, #convenios .container{
  position: relative;
  z-index: 10;
}
#intro .img {
  position: relative;
}
#intro .col-sm-5{ padding: 0 !important; margin: 0 !important;}
#intro .img img {
  border-radius: 4px 4px 0 0;
}
#intro .icon {
  width: 64px;
  height: 64px;
  padding-top: 8px;
  text-align: center;
  position: absolute;
  background-color: #008EAC;
  border-radius: 50%;
  text-align: center;
  border: 4px solid #fff;
  left: calc( 50% - 32px);
  bottom: -30px;
  transition: 0.3s;
}
/* about us Section
--------------------------------*/
.aboutcontainer{background: url("../imgs/about-backg.jpg") left top no-repeat;
background-size: cover;
padding: 0 !important;
height: 550px;}
@media (max-width: 768px){
  .aboutcontainer{ height: 100%;}
}
#aboutcont{background: rgb(240 240 240 / 75%);
    padding: 35px;
    text-align: justify;
  margin-top: 17%;}
  @media (max-width: 768px){
    #aboutcont{ margin-top: 0;}
  }
.titleblue{ color: #003871;}

/* Services Section
--------------------------------*/
#services{ height: 490px; background-color: #003871; display: contents;}
#servicestitle { height: 490px; background: url("../imgs/services-backg.jpg") left top no-repeat;
background-size: cover;
padding-left: 20%;}
#servicestitle p{ font-size: 18px; font-weight: 400; text-align:left; padding: 0; margin: 0; width: 75%;}
.servicescard{ margin: 0 0 0 -150px;}
@media (max-width: 768px){
  .servicescard{ margin: 0 auto;}
}
#servicescard{ height: 100%; background-color: #fff; display: block;}
.card-title{ font-weight: 900 !important; color: #b99c34; font-size: 0.9rem;}
.card-img-top{ width: 40%; padding-top: 1.25rem;}
.card{ margin-top: 15px;}

/* disinfecting Section
--------------------------------*/
#disinfecting{ margin: 140px 0 140px 0; }
@media (max-width: 768px){
  #disinfecting { margin: 60px 0;}
}
.disinfecting{ margin: 0; height: 660px; background: url("../imgs/disinfecting-backg.jpg")center top no-repeat;}
#disinfectcont{background: rgb(240 240 240 / 75%);
    padding: 35px;
    text-align: left;
    font-size: 18px;
  z-index: 500; margin-left: -210px;}
  @media (max-width: 768px){
    #disinfectcont { margin: 0 auto;}
  }
.boldgrey{ font-size: 23px; font-weight: 900; color: #616161;}
#disinfectcont a, #disinfectcont a:link, #disinfectcont a:visited { color: #ffffff !important; transition: all 0.5s; text-transform: uppercase !important; font-size: 0.85rem !important; font-weight: 600 !important;}
#disinfectcont a:hover {color: rgba(255,255,255,.5) !important; text-transform: uppercase !important;}

/* clients Section
--------------------------------*/
#clients {
  background: url("../imgs/clients-backg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 55px 0 20px 0;
height: 60vh;
}
#clients p{ color: #ffffff; font-size: 18px; font-weight: 400; padding-top: 20px;}
#clients h5{ font-size: 14px; font-weight: 900 !important; color: #ffffff;}
#clients h6 { font-size: 12px; color: #ffffff; padding: 0 !important; margin: 0 !important;}
#clients img { margin: 10px;}
.carousel-caption{ position: unset !important; width: 50%; margin: 0 auto; text-align: center; margin-bottom:2%;}
.captions{ font-size: 23px !important; line-height: 1.9rem;}
/*testimonial carousel*/
@media (max-width: 768px){
  #clients { height: 100vh;}
  #clients p{ padding-top: 15px;}
  .d-none { display: block !important;}
  .carousel-caption{ width: 80%;}
}

/* Partners Section
--------------------------------*/
#partners{ margin: 0; font-size: 18px;}
.partners{ margin: 0; width: 100%; height: 545px; background: url("../imgs/partners-backg.jpg")center top no-repeat; padding-right: 10px;}
.partnerstitle { height: 100%; text-align: left;}
.partnerscard{ margin: 0 0 0 -25px;}
.pcard { background-color: rgb(255 255 255 / 75%); border-radius: 0; padding: 5px;}
@media (max-width: 768px){
  #partners { margin: 70px 0;}
  .partners { margin: 0 auto; padding: 0; height: 100%; background: none;}
  .partnerscard { margin: 0 auto;}
}
/* Contact Section
--------------------------------*/
#contact{
  background: url("../imgs/contact-backg.jpg") center top no-repeat fixed;
  background-size: cover;
height: 570px;
}
.contact { height: 570px;}
#contact hr{ border-top: 1px solid; padding: 0; margin: 0;}
.icons{ font-size: 1.4rem; color:#2d2c25; margin-right: 30px;}
.iconsgold{ color: #ffde9a !important;}
#contact p{ color: #ffffff; font-size: 20px; font-weight: 400;}
#contact h4{ text-align:left; color: #000;}
#contact h6 { font-size: 12px; color: #ffffff; padding: 0 !important; margin: 0 !important;}
.form-control { border-radius: 0 !important; margin-bottom: 30px;}
#contact form{ text-align: right;}

@media (max-width: 768px){
  #contact, .contact{ height: 100%; padding: 20px 0;
  }
  #contact form{ margin-top: 30px;}
}

/* Footer
--------------------------------*/
#footer{ height: 440px; padding: 10px 0; background-color: #323131; color: #ffde9a;}
.foot{ height: 400px;}
.footertext{ text-align: left; width:260px; margin: 0 auto; padding: 20px 0;}
.footline { border-right: 1px solid #ffde9a;}
#footer a, #footer a:link, #footer a:visited{ color: #fff; text-decoration: none; transition: all 0.5s;}
#footer a:hover{ color: #b99c34;}
.legal{ font-size: 0.9rem;}
@media (max-width: 768px){
#footer, .foot { height: 100%; padding: 30px 0;}
.footline { border-right: none;}
.margleft{ margin-left: 45px;}
.legal { margin-top: 50px;}
}
/* Application Modal
--------------------------------*/
.modal.left .modal-dialog {
	position:fixed;
	right: 0;
	margin: auto;
	width: 80%;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	-ms-transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content {
	height: 100%;
	overflow-y: auto;
}

.modal.right .modal-body {
	padding: 15px 15px 80px;
}

.modal.right.fade .modal-dialog {
	left: -80%;
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
	-o-transition: opacity 0.3s linear, left 0.3s ease-out;
	transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
	right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
	border-radius: 0;
	border: none;
}

.modal-header {
	border-bottom-color: #eeeeee;
	background-color: #fafafa;
}