@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


h1 {font-family:'Montserrat', sans-serif!important; font-size:34px; font-weight:600; color:#999; margin-bottom:30px!important; line-height:1;}
h2 {font-family:'Montserrat', sans-serif!important; font-size:26px; font-weight:600; color:#999; margin-bottom:20px!important; line-height:1;}
h3 {font-family:'Montserrat', sans-serif!important; font-size:20px; font-weight:600; margin-bottom:30px!important; line-height:1;}
h4 {font-family:'Montserrat', sans-serif!important; font-size:16px; width:86%; margin-left:7%!important; border-bottom:1px solid #999; line-height:0.1em; margin:10px 0 20px;} 
h4 span {background:#fff; padding:0 10px;}
p, li {font-family:'Roboto', sans-serif; color:#555; line-height:1.3!important; margin-bottom:15px!important}
.btn-secondary {background-color:#999; border:none!important}


#topbar {background-color:#999; padding:10px 0!important; font-family:'Montserrat', sans-serif; font-weight:600;}
.navbar {background-color:#FFF!important; border-bottom:10px solid #f7f7f7; padding-top:0!important; padding-bottom:0!important}
.navbar-brand img {width:150px; height:auto}



#main {padding-top:40px}
section {margin:40px 0}


/* TOP IMAGE =========================*/
.title-img {width:100%; background: url("../img/top.jpg"); background-size:cover; background-repeat: no-repeat;}
.title-img h1 {text-align:center; color:rgba(255, 255, 255, 0.75)!important;}


.services .img-box {margin-bottom:30px}
.services img {width:100%; height:auto; padding:0 10% 15px}
.services h2 {font-size:20px!important;}


.about-img {width:100%; min-height:260px; height:100%; background: url("../img/about-us_01.jpg") no-repeat right center / cover;}


.carousel-item {height:65vh; min-height:300px; background:no-repeat center center scroll; -webkit-background-size:cover; -moz-background-size:cover;
  -o-background-size:cover; background-size:cover;}
.carousel-indicators {margin:0; overflow:auto; position:static; text-align:left; white-space:nowrap; width:100%; height:auto;}
.carousel-indicators li {background-color:transparent; -webkit-border-radius:0; border-radius:0; display:inline-block; height:auto; margin:0!important; width:auto;}
.carousel-indicators li img {width:100%; height:auto; display:block;}


.clearfix {overflow:auto;}
.clearfix::after {content:""; clear:both; display:table;}


#form {}


footer {padding:60px 0; background-color:#999; text-align:center}
footer p {font-size:12px; color:#000!important;}
footer hr {width:60px; border-top-color:#555}

.modal-dialog {position:fixed; top:auto; right:15px; left:auto; bottom:0; max-width:360px!important}
.modal-body {background:#555; padding-bottom:0}
.modal-body h1, .modal-body p {color:#000}

.modal-footer {background:#555; text-align:center!important; border:none;}
.modal-footer .btn {background:#000; color:#FFF; width:100%;}

@media (min-width:992px) {
	.services {padding:0 20%!important}
	
}

@media (min-width:768px) {
	.cel {display:none}
	.navbar .active, .navbar li:hover {border-bottom:2px solid #999}
	.title-img {background-position:center -300px}
	.title-img h1 {padding:7% 15px}	
	#hm-complementary {padding:0 8%!important}
	#hm-complementary p {line-height:2.5!important;}	
}
@media (max-width:767px) {
	#topbar {padding:10px 0 0!important}
	#topbar p {line-height:1.1!important; text-align:center!important; margin-bottom:10px!important}
	#topbar br {margin-bottom:10px!important}	
	.title-img {background-position:center}
	.title-img h1 {font-size:20px; padding:15% 10px}
	#hm-complementary {padding-top:25px}
	.carousel-item {height:30vh; min-height:150px; 
	
}