@import url('https://fonts.googleapis.com/css?family=Changa:300,400,600');
*{ font-family: 'Changa', sans-serif; color:#000000; font-size: 14px; font-weight: 300; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body{ margin: 0; padding: 0; }
b, strong{ font-weight: 600; }

.fancybox-button, .fancybox-button path, .fancybox-button svg{ color:#ffffff !important; }

.TitleBlack{ font-size: 48px; color:#000000; font-weight: 600; text-transform: uppercase; line-height: 38px; border-bottom: 6px solid #e74c3c; float:left; padding-bottom: 4px; }
.TitleBlackBlue{ font-size: 48px; color:#000000; font-weight: 600; text-transform: uppercase; line-height: 38px; border-bottom: 6px solid #21aad9; float:left; padding-bottom: 4px; }
.TitleWhite{ font-size: 48px; color:#ffffff; font-weight: 600; text-transform: uppercase; line-height: 38px; border-bottom: 6px solid #21aad9; float:left; padding-bottom: 4px; }

.Title2Black{ font-size: 28px; color:#000000; font-weight: 600; text-transform: uppercase; line-height: 28px; border-bottom: 6px solid #e74c3c; float:left; text-align: left; max-width: 75%; padding-bottom: 4px; clear: both; }

.sep{ display: block; height: 20px; clear: both; }

.MenuContainer{ position: fixed; top:0px; left:0; right:0; margin: auto; height:110px; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 18%,rgba(0,0,0,0) 97%,rgba(0,0,0,0) 100%); z-index: 9999; transition: 0.6s all; }
.MenuInner{ max-width: 1100px;  width:100%; margin: auto; position: relative; height:90px; }
.MenuLogo{ position: absolute; left:0; top:0; bottom:0; padding-top: 22px; width: 260px; }
.MenuLogo img{ width: 100%; }
.MenuLinks{ position: absolute; width: calc(100% - 355px); right:0; top:0; bottom:0; text-align: right; }
.MenuLinks a{ text-decoration: none; font-size: 16px; color:#ffffff; font-weight: 600; height:40px; padding: 0 10px; line-height: 40px; margin:25px 10px 0 10px;  display: inline-block; border-bottom:2px solid rgba(255,255,255,0);   transition: 0.5s all; }
.MenuLinks a:hover{ border-bottom:2px solid rgba(255,255,255,1); }



.HeaderMobileContainer{ width: 100%; height:60px; background-color: var(--dark-gray); border-bottom:10px solid #000000; clear: both; display: none; }
.HeaderMobileMenuLink, .HeaderMobileMenuLink i{ width: 60px; height:140px; line-height: 140px; float:right; text-align: center; color:#ffffff; font-size: 24px; text-decoration: none; position: relative; }
.HeaderMobileMenuLink span{ font-size: 14px; font-weight: 700; text-decoration: none; color:#ffffff; width: 25px; height:25px; border-radius: 2px; line-height: 25px; position: absolute; top:0; bottom:0; margin: auto; left:0; right:0; }
.HeaderMobileMenuLink:hover span{ background-color:#ffffff; color:var(--dark-gray); }

.HeaderMobileMenu div{ height:1px; background-color:var(--main-color-1); }
.HeaderMobileMenu{ background-color: #000000; overflow: hidden !important; display: none; height:0; transition: 0.5s all; }
.HeaderMobileMenuExpanded{ height:auto !important; transition: 0.5s all; }
.HeaderMobileMenu a{ color:#ffffff; padding: 15px 0; text-align: center; display: block; text-decoration: none; text-transform: uppercase; font-size: 14px; border-bottom:1px solid var(--dark-gray); }
.HeaderMobileMenu a i{ color:#ffffff; font-size: 12px; margin-right: 5px; }
.HeaderMobileMenu a:last-of-type{ border-bottom:0; margin-bottom: 10px; }



@media only screen and (max-width: 920px) {
    .MenuContainer{ display: none !important; }
    .MenuCompactContainer{ display: none !important; }
    .HeaderMobileMenu{ display: block !important; }
    .HeaderMobileContainer{ display: block !important; }
    .HomPageSlideShowContainer{ margin-top: 60px; }
}





.MenuCompactContainer{ position: fixed; top:-50px; left:0; right:0; margin: auto; background-color: rgba(0,0,0,1); z-index: 9999; transition: 0.6s all; opacity: 0; }
.MenuCompactInner{ max-width: 1100px;  width:100%; margin: auto; position: relative; height:50px; }
.MenuCompactLogo{ position: absolute; left:0; top:0; bottom:0; padding-top: 9px; width: 200px; overflow: hidden; }
.MenuCompactLogo img{ width: 100%; }
.MenuCompactLinks{ position: absolute; width: calc(100% - 355px); right:0; top:0; bottom:0; text-align: right; }
.MenuCompactLinks a{ text-decoration: none; font-size: 16px; color:#ffffff; font-weight: 600; height:30px; padding: 0 10px; line-height: 30px; margin:12px 10px 0 10px;  display: inline-block; border-bottom:2px solid rgba(255,255,255,0); transition: 0.5s all; }
.MenuCompactLinks a:hover{ border-bottom:2px solid rgba(255,255,255,1); }


.HomPageSlideShowContainer{ position: relative; width: 100%; z-index: 1; }
.HomePageSlideShowSlide{ position: relative; overflow: hidden; width:100vw; height:100vh; }
.HomePageSlideShowSlideTitle{  width: 100%; left:0; right:0; top:0; bottom:0; position: absolute; margin: auto; display: table; }
.HomePageSlideShowSlideTitleTR{ display: table-row; }
.HomePageSlideShowSlideTitleTD{ color:#ffffff; font-size: 24px; text-align: center; transition: 1s all; transform: translate(0px, -100px); opacity: 0; width:100vw; height:100vh; display:flex; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; flex-wrap:wrap; justify-content:center; align-content:center;  }
.HomePageSlideShowSlideTitleTD div{ font-size: 56px; color:#ffffff; font-weight: 600;  transition: 1s all; line-height: 0.8; width:100%; }
.HomePageSlideShowSlideTitleTD a{ display: inline-block; background-color: #e74c3c; margin-top: 10px; padding: 10px 40px; font-size: 14px; text-transform: uppercase; color:#ffffff; text-decoration: none; font-weight: 600; border-radius: 20px; transition: 0.5s all; }
.HomePageSlideShowSlideTitleTD a:hover{ background-color: #ffffff; color: #e74c3c; }
.owl-item.active .HomePageSlideShowSlideTitleTD{ transform: translate(0px, 0px); opacity: 1; transition: 1s all;  }
.HomePageSlideShowMouse{ position: absolute; width: 200px; height:80px; bottom:0; left:0; right:0; margin: auto; z-index: 9999; background-image: url("../img/scroll.gif"); background-position: center; background-repeat: no-repeat; background-size: contain; }
@media only screen and (max-width: 800px) {
    .HomePageSlideShowSlideTitleTD{ font-size: 18px !important; }
    .HomePageSlideShowSlideTitleTD div{ font-size: 32px !important; }
    .HomePageSlideShowMouse{ display: none; }
    .HomePageSlideShowSlideTitleTD a{ display: none; }
}








.HomePageAboutContainer{ position: relative; width: 100%; }
.HomePageAbout{ max-width: 1100px;  width:calc(100% - 40px); position: relative; display: table; margin: auto; padding: 100px 0; }
.HomePageAboutTR{ display: table-row; }
.HomePageAboutSection1{ display: table-cell; width: 30%; vertical-align: middle; text-align: left;  }
.HomePageAboutSection2{ display: table-cell; width: 20%; vertical-align: middle; text-align: left; }
.HomePageAboutSection3{ display: table-cell; width: 50%;  vertical-align: middle; font-size: 14px !important; text-align: justify; }
@media only screen and (max-width: 800px) {
    .HomePageAboutTR{ display: block !important; }
    .HomePageAboutSection1{ display: block !important; width: 100% !important; }
    .HomePageAboutSection2{ display: block !important; width: 100% !important; max-width: 300px; margin: auto !important; text-align: center !important; }
    .HomePageAboutSection2 img{ margin-top:40px; }
    .HomePageAboutSection3{ display: block !important; width: 100% !important; }
}


.HomePageAboutSection2 img{ width: 75%; border-radius: 50%; }


.HomPagePartnersContainer{ width: 100%; padding: 60px 0; background-color: #e9eef1; }
.HomPagePartnersCarouselSlide{ filter: grayscale(100%); opacity: 0.4; width: 100px; height:100px; background-position: center; background-size: 80%; background-repeat: no-repeat; margin: auto; transition: 0.5s all; cursor: pointer; }
.HomPagePartnersCarouselSlide:hover{ filter: grayscale(0%); opacity: 1;  }


.HomePageServicesContainer{ position: relative; width: 100%; background-color: #000000; overflow: hidden; }
.HomePageServices{ max-width: 1100px;  width:calc(100% - 40px); position: relative; display: table; margin: 100px auto; }
.HomePageServicesTR{ display: table-row; }
.HomePageServicesSection1{ display: table-cell; width: 300px; vertical-align: middle; text-align: left;  }
.HomePageServicesSection2{ display: table-cell; width: calc(100% - 300px); vertical-align: middle; text-align: left; }
.HomePageServicesSection2 a{ float:left; width: 244px; margin: 10px; height:180px; position: relative; background-position: center; background-size: cover; display: block; background-color: rgba(33,170,217,1); overflow: hidden; }
.HomePageServicesSection2Overlay{ position: absolute; left:0; right:0; bottom:0; margin: auto; background-color: rgba(0,0,0,0.7); padding: 5px; text-align: center; color:#ffffff; transition: 0.5s all; }
.HomePageServicesSection2Overlay2{ display: table; width: 100%;  height:180px; top:0; bottom:0; margin: auto; position: absolute; background-color: rgba(33,170,217,0.95); transition: 0.5s all; opacity: 0; }
.HomePageServicesSection2Overlay2 section{ display: table-row; }
.HomePageServicesSection2Overlay2 section span{ display: table-cell; color:#ffffff; text-align: center; vertical-align: middle; padding: 20px; font-size: 18px; line-height: 24px; }
.HomePageServicesSection2 a:hover .HomePageServicesSection2Overlay2, .HomePageAboutLink:hover .HomePageServicesSection2Overlay2{ opacity: 1; }
.HomePageServicesSection2 a:hover .HomePageServicesSection2Overlay,  .HomePageAboutLink:hover .HomePageServicesSection2Overlay{ height:0; padding: 0; }
@media only screen and (max-width: 800px) {
    .HomePageServicesTR{ display: block !important; }
    .HomePageServicesSection1{ display: block !important; width: 100% !important; clear: both; }
    .HomePageServicesSection2{ display: block !important; width: 100% !important; max-width: 300px; margin: auto !important; text-align: center !important; clear: both; padding-top: 40px; }
}






.HomePageArticlesContainer{ position: relative; width: 100%; overflow: hidden; }
.HomePageArticles{ max-width: 1100px;  width:calc(100% - 40px); position: relative; margin: 100px auto; }
.HomePageHeaderMobileContainerArticles{ max-width: 1100px;  width:100%; position: relative; display: table; margin: 100px auto; }
.HomePageArticlesSection1{  }
.HomePageArticleItem{ width: calc(33.3333333% - 20px); margin-right: 20px; float:left; text-decoration: none; border-bottom:1px solid #eaeaea; padding-bottom: 30px; transition: 0.5s all; }
.HomePageArticleItem:hover{ border-bottom:5px solid rgba(33,170,217,1); opacity: 0.6; padding-bottom: 26px; }
.HomePageArticleItem:hover .HomePageArticleItemPicture, .HomePageArticleItem:hover .HomePageArticleItemTitle, .HomePageArticleItem:hover .HomePageArticleItemDescription{ opacity: 0.6 }

.HomePageArticleItemPicture{ width: 100%; padding-bottom: 66%; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; transition: 0.5s all; }
.HomePageArticleItemPicture div{ position: absolute; left:-10px; bottom:10px; background-color: rgba(33,170,217,1); color:#ffffff; text-align: center; padding: 3px 10px; font-size: 24px; font-weight: 600; }
.HomePageArticleItemPicture div span{ display: block; color:#ffffff; margin-top: -15px; font-size: 14px; text-align: center; }
.HomePageArticleItemTitle{ font-size: 16px; font-weight: 600; color:#000000; text-transform: uppercase; margin: 10px 0 5px 0; line-height: 20px; text-align: justify;  transition: 0.5s all; }
.HomePageArticleItemDescription{ color:#888888; line-height: 18px;  transition: 0.5s all; }

@media only screen and (max-width: 800px) and (min-width: 501px) {
    .HomePageArticleItem{  width: calc(50% - 20px); margin-right: 20px !important; }
}
@media only screen and (max-width: 500px) {
    .HomePageArticleItem{  width: calc(100% - 0px); margin-right: 0px !important; }
}




.HomePageContactContainer{ position: relative; width: 100%; overflow: hidden; background-color: #2c3e50; }
.HomePageContact{ max-width: 1100px;  width:calc(100% - 40px); position: relative; display: table; margin: 100px auto; }
.HomePageContactSection1{ width: calc(50% - 20px); float:left; color:#ffffff; }
.HomePageContactSection1 a{ width: 33.333%; float:left; color:#ffffff; text-decoration: none; font-weight: 600; transition: 0.5s all; }
.HomePageContactSection1 a i{ color:#ffffff; margin-right: 5px; font-size: 10px; transition: 0.5s all; }
.HomePageContactSection1 a:hover{ color:#e74c3c; }
.HomePageContactSection1 a:hover i{ color:#e74c3c; margin-right: 10px; }
.HomePageContactSection2{ width: calc(50% - 20px); float:right; }
@media only screen and (max-width: 800px) {
    .HomePageContactSection1{  width: 100% !important; margin-bottom: 40px; }
    .HomePageContactSection2{ width: 100% !important; }
}



.CommonFooterContainer{ position: relative; width: 100%; padding: 60px 0;  }
.CommonFooter{ max-width: 1100px;  width:100%; position: relative; display: table; margin: auto; text-align: center; color:#888888; }
.CommonFooter a{ color:#888888; text-decoration: none; }
.CommonFooterSocial{ display: inline-block; background-color: #2c3e50; color:#ffffff; border-radius: 50%; width: 36px; height:36px; line-height: 36px; text-align: center; margin-left: 3px; transition: 0.5s all; }
.CommonFooterSocial i{ color:#ffffff; line-height: 36px; }
.CommonFooterSocial:hover{ background-color: #e74c3c; }

.HeaderMobileContainer{ display: none; top:0; left:0; right:0; margin: auto; background-color: #000000; position: fixed; z-index: 99999; }
.HeaderMobileMenu{ position: fixed; top:60px; left:0; right:0; z-index: 9999; }
.HeaderMobileMenuLink{ position: absolute; right:0; bottom:0; top:0; margin: auto }


.ContactFormInput{ display: block; width: 100%; padding: 10px; border:0; color:#000000; border-radius: 5px; margin-bottom: 20px; outline: none; }
.ContactFormBtn{ float:right; display: inline-block; background-color: #e74c3c; padding: 10px 40px; font-size: 14px; border:0px; min-width: 250px; text-transform: uppercase; color:#ffffff; text-decoration: none; font-weight: 600; border-radius: 20px; transition: 0.5s all; }
.ContactFormBtn:hover{ background-color: #ffffff; color: #e74c3c; }

.CommonFooterScroll{ display: block; position: absolute; top:-85px; left:0; right:0; margin: auto; width:50px; height:50px; background-color: rgba(33,170,217,1); border-radius: 50%; text-align: center; transition: 0.5s all; }
.CommonFooterScroll:hover{ background-color: #e74c3c; }
.CommonFooterScroll i{ line-height: 50px; color:#ffffff; font-size: 22px; }



.ServiceHeaderContainer{ position:relative; overflow: hidden; }
.ServiceHeaderBackground{ background-position: center; background-size: cover; position: absolute; top:0; left:0; right:0; bottom:0; margin: auto; z-index: 1; }
.ServiceHeaderMask{ background-color: rgba(0,0,0,0.7); position: absolute; top:0; left:0; right:0; bottom:0; margin: auto; z-index: 2; }
.ServiceHeader{ margin: 300px auto; padding: 0 40px; max-width: 1100px; font-size: 48px; color:#ffffff; text-align: center; z-index: 3; position: relative; line-height: 48px; }


.ServiceInfoContainer{ position:relative; overflow: hidden; }
.ServiceInfo{ max-width: 1100px;  width:calc(100% - 40px); position: relative; margin: 100px auto; }
.ServiceInfoParagraph{ display: block; padding: 40px 0; clear: both; overflow: hidden; }
.ServiceInfoParagraph .ServiceInfoParagraphText{ width: calc(50% - 10px); text-align: justify; line-height: 24px; font-weight: 300; }
.ServiceInfoParagraph img{ width: calc(50% - 10px); }
.ServiceInfoParagraph:nth-of-type(odd) .ServiceInfoParagraphText{ float:left; }
.ServiceInfoParagraph:nth-of-type(odd) img{ float:right; }
.ServiceInfoParagraph:nth-of-type(even) img{ float:left; }
.ServiceInfoParagraph:nth-of-type(even) .ServiceInfoParagraphText{ float:right; }
@media only screen and (max-width: 800px) {
    .ServiceInfoParagraph .ServiceInfoParagraphText{  width: calc(100% - 0px); margin-bottom: 20px; }
    .ServiceInfoParagraph img{ width: 100%; margin-bottom: 40px; }
}





.ArticleHeaderContainer{ position:relative; overflow: hidden; padding-bottom: 50%; }
.ArticleHeaderBackground{ background-position: center; background-size: cover; position: absolute; top:0; left:0; right:0; bottom:0; margin: auto; z-index: 1; }
.ArticleHeaderMask{ background-color: rgba(0,0,0,0.7); position: absolute; top:0; left:0; right:0; bottom:0; margin: auto; z-index: 2; }

.ArticleInfoContainer{ position:relative; overflow: hidden; }
.ArticleInfo{ max-width: 1100px;  width:calc(100% - 40px);  position: relative; margin: 100px auto; }
.ArticleInfoSection1{ float:left; width: 70%; text-align: justify; }
.ArticleInfoSection2{ float:right; width: calc(30% - 40px); }
@media only screen and (max-width: 800px) {
    .ArticleInfoSection1 { width: 100%;  }
    .ArticleInfoSection2 { width: 100%; margin-bottom: 40px;}
}




.ContactViewContainer{ padding: 40px; }
.ContactViewTitle{ font-weight: 600; height:20px; line-height: 20px; }
.ContactViewInfo{ line-height: 20px; margin-bottom: 20px; }


.HomePageAboutLinksContainer{ width:100%; max-width: 1100px; margin: auto; }
.HomePageAboutLink{  float:left; width: calc(33.33333333% - 20px); margin: 10px; height:180px; position: relative; background-position: center; background-size: cover; display: block; background-color: rgba(33,170,217,1); overflow: hidden; }
@media only screen and (max-width: 500px) {
    .HomePageAboutLink{ width: calc(100% - 20px); }
}