/* Add here all your css styles (customizations) */
/* FONTS 

// Black
font-family: myriad-pro,sans-serif;
font-weight: 900;
font-style: normal;

// Black italic
font-family: myriad-pro,sans-serif;
font-weight: 900;
font-style: italic;

// Bold
font-family: myriad-pro,sans-serif;
font-weight: 700;
font-style: normal;

// Semi
font-family: myriad-pro,sans-serif;
font-weight: 600;
font-style: normal;

// Reg
font-family: myriad-pro,sans-serif;
font-weight: 400;
font-style: normal;


*/
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-variant-ligatures: no-common-ligatures;
  font-variant-ligatures: no-common-ligatures;
}
* {
  font-variant-ligatures: no-common-ligatures;
}
::selection {
  background: #00ADE9 none repeat scroll 0 0;
  color: #fff;
}
body {
  letter-spacing: 0.3px;
  font-family: myriad-pro, sans-serif;
}
/* GLOBAL */
h1 {
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 28px;
  color: #003E6E;
  line-height: 36px;
  margin-bottom: 15px;
  -webkit-font-variant-ligatures: no-common-ligatures;
  font-variant-ligatures: no-common-ligatures;
}
h2 {
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 26px;
  color: #003E6E;
  line-height: 36px;
  margin-bottom: 15px;
  -webkit-font-variant-ligatures: no-common-ligatures;
  font-variant-ligatures: no-common-ligatures;
}
h3 {
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 24px;
  color: #003E6E;
  line-height: 32px;
  margin-bottom: 15px;
  text-rendering: geometricPrecision;
}
.col-lg-4 h4 {
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #003E6E;
  line-height: 25px;
  margin-bottom: 15px;
  text-transform: uppercase;
}
h5 {
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 20px;
  color: #003E6E;
  line-height: 25px;
  margin-bottom: 15px;
}
p.introText {
  font-size: 20px;
  color: #1A1A1A;
  line-height: 34px;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 15px;
}
p {
  font-size: 19px;
  color: #1A1A1A;
  line-height: 32px;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 25px;
}

p.italic {
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  font-style: italic;
  margin-bottom: 25px;
}

/* 5 Column Layout */

.col-2dot4,
.col-sm-2dot4,
.col-md-2dot4,
.col-lg-2dot4,
.col-xl-2dot4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;	
}
.col-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
@media (max-width: 540px) {
    .col-sm-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;		
        max-width: 100%;
    }
}
@media (max-width: 720px) {
    .col-md-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;		
    }
}
@media (max-width: 960px) {
    .col-lg-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;	
    }
}
@media (max-width: 1140px) {
    .col-xl-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;	
    }
}

/*Payback Styles*/

.payback h3 {
	font-size: 20px;
}

.paybackImg img {
	width: 150px;
}

.container-payback {
	margin-top: 105px;
	margin-bottom: 80px;
	margin-left: 40px;
	margin-right: 40px;		
}

.example p {
	font-size: 13px;
}

@media (max-width: 768px) {
	.container-payback {
	margin-left: 40px;
	margin-right: 40px;		
}
}

@media (max-width: 540px) {
.container-payback {
	margin-top: 105px;
	margin-bottom: 80px;
	margin-left: 20px;
	margin-right: 20px;			
}

}

p a {
  color: #1A1A1A;
  text-decoration: underline;
}
.g-mt--10 {
  margin-top: -10px;
}
a:focus, a:hover {
  color: #00ADE9;
}
a:hover {
  color: #00ADE9;
  text-decoration: none;
}
h2.header25mb {
  margin-bottom: 25px;
}
img.brd-rounded {
  border-radius: 20px;
}
.img-rounded {
  border-radius: 20px;
}
.u-link-v5:hover, .u-link-v5:focus {
  text-decoration: underline;
}
.g-right-50 {
  right: 3.557rem;
}
.u-go-to-v1:hover, .u-go-to-v1:focus:hover {
  text-decoration: none;
  color: #fff;
  background-color: #00ADE9;
}
.col-xs-offset-right-12 {
  margin-right: 100%;
}
.col-xs-offset-right-11 {
  margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
  margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
  margin-right: 75%;
}
.col-xs-offset-right-8 {
  margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
  margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
  margin-right: 50%;
}
.col-xs-offset-right-5 {
  margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
  margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
  margin-right: 25%;
}
.col-xs-offset-right-2 {
  margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
  margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
  margin-right: 0;
}
@media (min-width: 768px) {
  .col-sm-offset-right-12 {
    margin-right: 100%;
  }
  .col-sm-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-sm-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-sm-offset-right-9 {
    margin-right: 75%;
  }
  .col-sm-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-sm-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-sm-offset-right-6 {
    margin-right: 50%;
  }
  .col-sm-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-sm-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-sm-offset-right-3 {
    margin-right: 25%;
  }
  .col-sm-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-sm-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-sm-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .col-md-offset-right-12 {
    margin-right: 100%;
  }
  .col-md-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-md-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-md-offset-right-9 {
    margin-right: 75%;
  }
  .col-md-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-md-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-md-offset-right-6 {
    margin-right: 50%;
  }
  .col-md-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-md-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-md-offset-right-3 {
    margin-right: 25%;
  }
  .col-md-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-md-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-md-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-offset-right-12 {
    margin-right: 100%;
  }
  .col-lg-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-lg-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-lg-offset-right-9 {
    margin-right: 75%;
  }
  .col-lg-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-lg-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-lg-offset-right-6 {
    margin-right: 50%;
  }
  .col-lg-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-lg-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-lg-offset-right-3 {
    margin-right: 25%;
  }
  .col-lg-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-lg-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-lg-offset-right-0 {
    margin-right: 0;
  }
}

.img-center {
  text-align: center;
}
a:not([href]):not([tabindex]) {
  color: #FFF;
  text-decoration: none;
}
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: #00ADE9;
  text-decoration: none;
}
.margin-bottom-50 {
  margin-bottom: 50px;
}
/* BUTTONS */
.btn-ccs-header {
  border: 3px solid #FFF;
  padding: 17px;
  color: #FFF;
  font-size: 13px !important;
  font-family: myriad-pro, sans-serif;
  font-weight: 900 !important;
  font-style: normal;
  border-radius: 30px;
  text-transform: uppercase;
  margin-top: -10px;
  vertical-align: middle;
  background: linear-gradient(to right, #FFF 50%, #003E6E 50%);
  background-size: 202% 100%;
  background-position: right bottom;
  transition: all .3s ease-out;
}
.btn-ccs-header i {
  margin-right: 5px;
}
.btn-ccs-header:hover {
  color: #003E6E;
  text-decoration: none !important;
  background-position: left bottom
}
.btn-ccs-footer {
  border: 3px solid #FFF;
  padding: 24px 22px;
  color: #FFF;
  font-size: 13px !important;
  font-family: myriad-pro, sans-serif;
  font-weight: 900 !important;
  font-style: normal;
  border-radius: 40px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-right: 10px;
  background: linear-gradient(to right, #FFF 50%, #003E6E 50%);
  background-size: 202% 100%;
  background-position: right bottom;
  transition: all .3s ease-out;
}
.btn-ccs-footer i {
  margin-right: 5px;
}
.btn-ccs-footer:hover {
  color: #003E6E;
  text-decoration: none !important;
  background-position: left bottom;
}
.btn-ccs-tps {
  border: 3px solid #FFF;
  color: #FFF;
  padding: 17px 40px;
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: 30px;
  text-transform: uppercase;
  background: linear-gradient(to right, #FFF 50%, #00ADE9 50%);
  background-size: 202% 100%;
  background-position: right bottom;
  transition: all .3s ease-out;
}
.btn-ccs-tps:hover {
  border: 3px solid #FFF;
  color: #00ADE9 !important;
  text-decoration: none !important;
  background-position: left bottom
}
.btn-ccs-db {
  border: 3px solid #003E6E;
  color: #FFF;
  padding: 17px 40px;
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: 30px;
  text-transform: uppercase;
  background: linear-gradient(to right, #FFF 50%, #003E6E 50%);
  background-size: 205% 100%;
  background-position: right bottom;
  transition: all .3s ease-out;
}
.btn-ccs-db:hover {
  border: 3px solid #003E6E;
  color: #003E6E !important;
  text-decoration: none !important;
  background-position: left bottom
}
.btn-ccs-lb {
  border: 3px solid #00ADE9;
  color: #FFF;
  padding: 17px 40px;
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: 30px;
  text-transform: uppercase;
  background: linear-gradient(to right, #FFF 50%, #00ADE9 50%);
  background-size: 205% 100%;
  background-position: right bottom;
  transition: all .3s ease-out;
}

.btn-ccs-lb:focus {
  color: #FFF;
}

.btn-ccs-lb:hover {
  border: 3px solid #00ADE9;
  color: #00ADE9;
  text-decoration: none !important;
  background-position: left bottom
}
.btn-ccs-lb-rev {
  border: 3px solid #FFF;
  color: #00ADE9;
  padding: 17px 40px;
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: 30px;
  text-transform: uppercase;
  background: linear-gradient(to right, #00ADE9 50%,#FFF 50%);
  background-size: 202% 100%;
  background-position: right bottom;
  transition: all .3s ease-out;
}
.btn-ccs-lb-rev:hover {
  border: 3px solid #FFF;
  color: #FFF;
  text-decoration: none !important;
  background-position: left bottom
}
.btn-ccs-project {
  border: 3px solid #FFF;
  color: #003E6E;
  padding: 17px 40px;
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: 30px;
  text-transform: uppercase;
  background: linear-gradient(to right, #003E6E 50%, #FFF 50%);
  background-size: 202% 100%;
  background-position: right bottom;
  transition: all .3s ease-out;
}
.btn-ccs-project:hover {
  border: 3px solid #FFF;
  color: #FFF;
  text-decoration: none !important;
  background-position: left bottom
}
.btn-ccs-workWith {
  border: 3px solid #FFF;
  color: #00ADE9;
  padding: 17px 40px;
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: 30px;
  text-transform: uppercase;
  background: linear-gradient(to right, #00ADE9 50%, #FFF 50%);
  background-size: 202% 100%;
  background-position: right bottom;
  transition: all .3s ease-out;
}
.btn-ccs-workWith:hover {
  border: 3px solid #FFF;
  color: #FFF;
  text-decoration: none !important;
  background-position: left bottom
}
.btn-ccs-slider {
  border: 3px solid #FFF !important;
  color: #FFF;
  padding: 13px 54px !important;
  font-size: 16px;
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  border-radius: 30px;
  text-transform: uppercase;
  background: linear-gradient(to right, #FFF 50%, transparent 50%) !important;
  background-size: 202% 100% !important;
  background-position: right bottom !important;
  transition: all .3s ease-out !important;
}
.btn-ccs-slider:hover {
  border: 3px solid #FFF;
  color: #003E6E !important;
  text-decoration: none !important;
  background-position: left bottom !important;
}
.btn-ccs-whyCCS {
  border: 3px solid #003E6E;
  color: #FFF;
  padding: 17px 40px;
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: 30px;
  text-transform: uppercase;
  background: linear-gradient(to right, #FFF 50%, #003E6E 50%);
  background-size: 202% 100%;
  background-position: right bottom;
  transition: all .3s ease-out;
}
.btn-ccs-whyCCS:hover {
  border: 3px solid #003E6E;
  color: #003E6E;
  text-decoration: none !important;
  background-position: left bottom
}
/* HEADER */
.topBar {
  background: #003E6E;
}
.headerList li {
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #FFF;
  font-size: 18px;
  line-height: 22px;
  padding: 0 10px;
  vertical-align: middle;
}
.headerList li.listBorderSpace {
  border-right: 2px solid #00ADE9;
  padding: 0 1px;
  width: 2px;
  height: 40px;
}
.headerList li a {
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #FFF;
  font-size: 18px;
}
.lbBG {
  background: #00ADE9;
}
.navbar-nav.nav-justified {
  width: 100%;
}
.navbar-expand-lg .navbar-nav .nav-link {
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 900 !important;
  font-style: normal;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
}
.navbar-nav .nav-link:hover {
  background: #007BC3;
  color: #FFF;
}
.g-brd-x--lg {
  border-right: solid 1px #05A2CC;
}
.g-brd-right--lg {
  border-right: solid 1px #05A2CC !important;
}
.u-header--sticky-top .js-header-change-moment {
  bottom: auto;
  top: -120px;
}
.g-bg-CCSLight {
  background: #00ADE9;
}
.hamburger--slider .hamburger-inner::after {
  background: #FFF;
}
.hamburger--slider .hamburger-inner::before {
  color: #FFF;
  background: #FFF;
}
.hamburger--slider .hamburger-inner {
  color: #FFF;
  background: #FFF;
}
.hs-mega-menu span {
  text-align: left;
}
.hs-mega-menu a, .hs-mega-menu span {
  text-decoration: none;
  position: relative;
  text-align: left;
  color: #003E6E;
  font-weight: 900;
}
.hs-mega-menu a:hover, .hs-mega-menu .list-unstyled li a:hover {
  color: #00ADE9;
}
.hs-mega-menu a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #00ADE9;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.hs-mega-menu a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.hs-mega-menu .list-unstyled li a {
  font-size: 19px;
  color: #000;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
}
.ccsNav .nav-justified .nav-item {
  border-right: 1px solid #05A2CC;
}
.ccsNav .hs-mega-menu {
  border-top: 10px solid #007BC3;
  border-bottom: 10px solid #003E6E;
  transform: translateY(-2em);
  z-index: -1;
  transition: all 0.4s linear;
}
.hs-mega-menu-opened:focus .hs-mega-menu, .hs-mega-menu-opened:focus-within .hs-mega-menu, .hs-mega-menu-opened:hover .hs-mega-menu {
  opacity: 1;
  z-index: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
.ccsNav .maintenHeader {
  color: #00ADE9;
  vertical-align: middle;
}
.ccsNav .caliHeader {
  color: #007BC3;
  vertical-align: middle;
}
.ccsNav .installHeader {
  color: #003E6E;
  vertical-align: middle;
}
.ccsNav .installHeader a {
  text-decoration: none;
  position: relative;
  text-align: left;
  color: #003E6E;
  font-weight: 900;
  display: block;
  padding-bottom: 15px;
}
.ccsNav .installHeader a:hover {
  color: #00ADE9;
}
.ccsNav .installHeader a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #00ADE9;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.ccsNav .installHeader a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.ccsNav .caliHeader a {
  text-decoration: none;
  position: relative;
  text-align: left;
  color: #003E6E;
  font-weight: 900;
  display: block;
  padding-bottom: 15px;
}
.ccsNav .caliHeader a:hover {
  color: #00ADE9;
}
.ccsNav .caliHeader a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #00ADE9;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.ccsNav .caliHeader a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.ccsNav .maintenHeader a {
  text-decoration: none;
  position: relative;
  text-align: left;
  color: #003E6E;
  font-weight: 900;
  display: block;
  padding-bottom: 15px;
}
.ccsNav .maintenHeader a:hover {
  color: #00ADE9;
}
.ccsNav .maintenHeader a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #00ADE9;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.ccsNav .maintenHeader a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.ccsNav h3 {
  font-size: 26px;
  margin-bottom: 20px;
}
.colorCali {
  color: #007BC3;
}
.colorInstall {
  color: #003E6E;
}
.colorMainten {
  color: #00ADE9;
}

#home-active .navbar-nav .nav-link.home-active, 
#about-active .navbar-nav .nav-link.about-active,
#solutions-active .navbar-nav .nav-link.solutions-active,
#projects-active .navbar-nav .nav-link.projects-active,
#sectors-active .navbar-nav .nav-link.sectors-active,
#careers-active .navbar-nav .nav-link.careers-active,
#news-active .navbar-nav .nav-link.news-active,
#contact-active .navbar-nav .nav-link.contact-active
{
  background: #007BC3;
  color: #FFF;
}



.topBar .navbar-brand .img-fluid {
  max-width: 100%;
}
/* CONTENT */
.g-slider-mt-ipad {
  margin-top: 150px;
}

.alert-ccs {
    background-color: #E1F4F9;
    border-color: #E1F4F9;
    margin-bottom: 0px;
	padding: 10px 50px;
}

.alert-ccs p, .alert-ccs a {
    color: #000;
    margin-bottom: 0px;	
}

/* Homepage Service Hover */
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
  background-color: #003E6E;
}
.overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
  background-color: #007BC3;
}
.overlay3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
  background-color: #00ADE9;
}
.column1:hover .overlay {
  opacity: 0.9;
}
.column2:hover .overlay2 {
  opacity: 0.9;
}
.column3:hover .overlay3 {
  opacity: 0.9;
}
/*.column1:hover .overlay {
  opacity: 1;
  top: -100%;
}
.column2:hover .overlay2 {
  opacity: 1;
  top: -100%;
}
.column3:hover .overlay3 {
  opacity: 1;
  top: -100%;
}*/
.overlayImage {
  position: absolute;
  top: 28%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 70px;
}
.overlayHeader {
  font-size: 24px;
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  position: absolute;
  top: 46%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.overlayHeader h3 {
  color: #FFF;
  font-weight: 700 !important;
}
.overlayText {
  color: #FFF;
  font-size: 18px;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  position: absolute;
  top: 65%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 80%;
}
.overlayText a {
  margin-top: 10px;
  display: block;
  color: #FFF;
  text-decoration: underline;
}
.hpServicesHoverIpad .column1 {
  background-color: #003E6E;
  padding: 60px;
  text-align: center;
}
.hpServicesHoverIpad .column2 {
  background-color: #007BC3;
  padding: 60px;
  text-align: center;
}
.hpServicesHoverIpad .column3 {
  background-color: #00ADE9;
  padding: 60px;
  text-align: center;
}
.hpServicesHoverIpad img {
  margin-bottom: 15px;
  width: 60px;
}
.hpServicesHoverIpad h3 {
  color: #FFF;
  font-weight: 700 !important;
}
.hpServicesHoverIpad p {
  color: #FFF;
  font-size: 18px;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
.hpServicesHoverIpad p a {
  margin-top: 10px;
  display: block;
  color: #FFF;
  text-decoration: underline;
}
.hpServicesHover {
  display: block;
}
.hpServicesHoverIpad {
  display: none;
}
.overlayText a {}
/* Why Section */
.whyCCS {
  padding: 120px 0;
  background: #E1F4F9;
}
.whyCCS [class*="u-nav-v5"].u-nav-primary .nav-link.active {
  border-color: #003E6E;
  color: #000;
  border-bottom-width: 3px;
}
.whyCCS [class*="u-nav-v5"] .nav-link {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #B2B2B2;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  text-transform: uppercase;
  color: #989898;
  padding: 0.8rem 1rem;
  letter-spacing: 0.1px;
}
.textPadding {
  padding: 80px 20px;
}
.textPadding h3 {
  margin-bottom: 10px;
}
.g-bg-primary-dark-v1 {
  background-color: #00ADE9 !important;
}
.g-bg-primary-dark-v1:hover {
  background-color: #FFF !important;
  color: #00ADE9;
}
.g-color-primary--hover:hover {
  color: #00ADE9 !important;
}
/* Our Projects */
.ourProjects {
  padding: 100px 0 0;
}
.js-slide.g-bg-colorSectors {
  background: #003e6e !important;
}
.js-slide.g-bg-colorAston, .g-bg-colorAston {
  background: #004225 !important;
}
.js-slide.g-bg-colorVolvo, .g-bg-colorVolvo {
  background: #003057 !important;
}
.js-slide.g-bg-colorDerbyshirecc, .g-bg-colorDerbyshirecc {
  background: #8d2f88 !important;
}
.js-slide.g-bg-colorNorthg, .g-bg-colorNorthg {
  background: #00b259 !important;  
}
.js-slide.g-bg-colorLanes, .g-bg-colorLanes {
  background: #ce0058 !important;  
}
.js-slide.g-bg-colorAdamsM, .g-bg-colorAdamsM {
  background: #343434 !important;     
}
.js-slide.g-bg-colorTamesideC, .g-bg-colorTamesideC {
  background: #f7a822 !important;     
}
.js-slide.g-bg-colorHomeBargains, .g-bg-colorHomeBargains {
  background: #ca0016 !important;
}
.js-slide.g-bg-colorLandRover, .g-bg-colorLandRover {
  background: #033605 !important;
}
.js-slide.g-bg-colorBiffa, .g-bg-colorBiffa {
  background: #d62326 !important;
}
.js-slide.g-bg-colorRyder, .g-bg-colorRyder {
  background: #000000 !important;
}
.js-slide.g-bg-colorMPolice, .g-bg-colorMPolice {
  background: #004d72 !important;
}
.js-slide.g-bg-colorMclaren, .g-bg-colorMclaren {
  background: #333333 !important;
}
.js-slide.g-bg-colorFord, .g-bg-colorFord {
  background: #345c9a !important;
}
.js-slide.g-bg-colorSwansea, .g-bg-colorSwansea {
  background: #A1A1A1 !important;
}
.js-slide.g-bg-colorCoop, .g-bg-colorCoop {
  background: #00b1e7 !important;
}
.js-slide.g-bg-colorRenault, .g-bg-colorRenault {
  background: #000 !important;
}
.js-slide.g-bg-colorManair, .g-bg-colorManair {
  background: #196ED5 !important;
}
.js-slide.g-bg-color, .g-bg-colorBMW {
  background: #1C69D4 !important;
}
.js-slide.g-bg-colorToyota, .g-bg-colorToyota {
  background: #343434 !important;
}
.js-slide.g-bg-colorKia, .g-bg-colorKia {
  background: #a5a5a5 !important;
}
.js-slide.g-bg-colorTip, .g-bg-colorTip {
  background: #A71C21 !important;
}
.js-slide.g-bg-colorTip, .g-bg-colorNwas {
  background: #233165 !important;	
}
.ourProjects .g-bg-primary .js-slide img {
  margin-bottom: 30px;
}
.ourProjects .js-slide h3 {
  font-weight: 700;
}
.ourProjects .js-slide h3, .ourProjects .js-slide p {
  color: #FFF;
}
p.smallText {
  font-size: 15px;
  color: #FFF;
  font-weight: 700;
  margin-top: 5px;
}
p.smallText a {
  font-size: 15px;
  color: #FFF;
  text-decoration: underline;
  font-weight: 700;
  font-style: italic;
}
p.smallText a:hover {
  text-decoration: none;
}

.projectCards p {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
}

.projectCards h3 {
  font-size: 21px;
  line-height: 29px;
  margin-bottom: 1rem;
}

.projectCards .roundedCardTop {
    border-radius: 10px 10px 0px 0px;
    min-height: 150px;
    position: relative;
}

.projectCards .roundedCardTop img {
    position: absolute;
    bottom: 0;
}

.projectCards .roundedCardBottom {
    border-radius: 0px 0px 10px 10px;
}

.projectCards .roundedCard {
    border-radius: 10px;
}

.serviceUsed .projectPoint {
    background: #FFF;
    padding: 25px;
    border-radius: 10px;
}

.serviceUsed .projectPoint h4 {
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 21px;
  color: #003E6E;
  line-height: 27px;
  margin-bottom: 15px;
  text-rendering: geometricPrecision;
}

/*Intro Section */
.introSection {
  padding: 120px 0;
}
.introSection img {
  border-radius: 20px
}
/* Testimonials Section */
.testimonials3 {
  padding-top: 100px;
  background: #E1F4F9;
}
.hpLogoSlider .lead {
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-size: 26px;
  color: #003E6E;
  line-height: 40px;
  margin: 0 auto 15px auto;
  font-style: italic;
  text-align: center;
  width: 80%;
}
.hpLogoSlider .g-color-gray-light-v5 {
  color: #FDE6F1 !important;
}
.hpLogoSlider .media span {
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-size: 21px;
  line-height: 32px;
  color: #00ADE9;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
}
.testimonialLogos {
  padding: 80px 0;
  background: #E1F4F9;
}
/* Blog Section */
.blogSection {
  padding: 120px 0;
  background: #FFF;
}
.blogSection h3 {
  font-weight: 700;
}
.blogSection p {
  margin-bottom: 15px;
}
.blogSection p a {
  margin-bottom: 15px;
  font-weight: 700;
  color: #000;
  text-decoration: underline;
}
.blogSection p a:hover {
  text-decoration: none;
}
/* Bottom CTA */
.bottomCTA {
  background: #00ADE9;
  padding: 100px 0;
}
.bottomCTA h2, .bottomCTA p {
  color: #FFF;
}
/* Solutions Intro Header */
.dzsparallaxer div h3 {
  font-size: 15px;
  color: #00ADE9;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.dzsparallaxer div h1 {
  color: #FFF;
  font-size: 50px;
  font-weight: 800;
  line-height: 55px;
}
.dzsparallaxer div p {
  color: #FFF;
  font-size: 50px;
  font-weight: 900;
  line-height: 55px;
}
.dzsparallaxer .headerPad {
  padding: 80px 0px 60px;
}
/* 50/50 Split Section */
.g-padding-100 {
  padding: 120px 140px;
}

/* Homepage News Feed Section */

#IframeStyle {width:100%; height:575px; border:0; float:left;}

 @media (max-width: 1200px) {
#IframeStyle {height:560px;}	 
}

 @media (max-width: 992px) {
#IframeStyle {height:1100px;} 
} 

 @media (max-width: 767px) {
#IframeStyle {height:1650px;}	 
}

/* Services Service by CCS */
.installationServices {
  padding: 120px 0;
  background: #E1F4F9;
}
.installationServices h2 {
  margin-bottom: 25px;
}
.installationServices h3 {
  font-weight: 700;
}
.servicePadding {
  padding: 0px;
}
/* Related Services Section */
.relatedServicesSec {
  padding: 100px 0px;
}
.relatedServicesSec .col-md-12 p {
  font-weight: 600;
  text-align: center;
  margin-bottom: 15px;
}
.img-container {
  position: relative;
  display: inline-block;
}
.img-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #007BC3;
  opacity: 1;
  transition: opacity 500ms ease-in-out;
  border-radius: 20px;
}
.img-container .overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00ADE9;
  opacity: 1;
  transition: opacity 500ms ease-in-out;
  border-radius: 20px;
}
.img-container .overlay3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #003E6E;
  opacity: 1;
  transition: opacity 500ms ease-in-out;
  border-radius: 20px;
}
.img-container .borderRad20 {
  border-radius: 20px;
}
.img-container:hover .overlay {
  opacity: 0.5;
}
.img-container:hover .overlay2 {
  opacity: 0.5;
}
.img-container:hover .overlay3 {
  opacity: 0.5;
}
.overlay span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  width: 70%;
}
.overlay span h3, .overlay span a, .overlay span p {
  color: #FFF;
}
.overlay span a, .overlay2 span a, .overlay3 span a {
  text-decoration: underline;
}
.overlay span a:hover, .overlay2 span a:hover, .overlay3 span a:hover {
  text-decoration: none;
}
.overlay2 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  width: 70%;
}
.overlay3 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  width: 70%;
}
.overlay2 span h3, .overlay2 span a, .overlay2 span p, .overlay3 span h3, .overlay3 span a, .overlay3 span p {
  color: #FFF;
}
/* Fastlign Service Page */

.btn-yt a {
	color: #FFF;
	font-weight: 800;
	text-align: left;		
	font-size: 1.2rem;	
	padding-left: 5px;
}

.btn-yt i {
	margin-right: 15px;
}

.btn-yt {
	background: #ff0000;
	border-radius: 100px;
	padding: 12px 25px;
}

.btn-yt:hover {
	background: #d71e18;
	border-radius: 100px;
	padding: 12px 25px;
	transition-duration: 0.5s;
   -moz-box-shadow:    inset 0 0 4px #ac1813;
   -webkit-box-shadow: inset 0 0 4px #ac1813;
   box-shadow:         inset 0 0 4px #ac1813;
}
.pdfMockup {
	display: flex;
	justify-content: center;
}

.pdfMockup img {
	margin-bottom: 35px;
	max-width: 285px;
    max-height: 230px;
}	
/* Contact Form Area #2 */
.contactForm2 {
  padding: 120px 0;
  background: #E1F4F9;
}
.contactForm2 .middleCol {
  margin: 0 auto;
}
.contactForm2 .sky-form .label {
  display: block;
}
.contactForm2 .sky-form .label {
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #003E6E;
}
.contactForm2 .sky-form p label, .sky-form p {
  color: #264A61;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  text-align: left;
}
.contactForm2 .sky-form .form-control {
  background-color: #FFF;
  font-size: 19px;
  height: 55px;
  border-color: #FFF;
  font-weight: 600;
  border-radius: 3px;
}
.contactForm2 .sky-form textarea.form-control {
  min-height:150px;
}
.contactForm2 h2 {
  margin-bottom: 25px;
}

/* Contact Form Area #3 */
.contactForm3 {
  background: #00ADE9;
}
.contactForm3 .middleCol {
  margin: 0 auto;
}
.contactForm3 .sky-form .label {
  display: block;
}
.contactForm3 .sky-form .label {
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #003E6E;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.contactForm3 .sky-form p label, .sky-form p {
  color: #264A61;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  text-align: left;
}
.contactForm3 .sky-form .form-control {
  background-color: #FFF;
  font-size: 19px;
  height: 55px;
  border-color: #FFF;
  margin-top: 10px;
  margin-bottom: 20px;
  font-weight: 600;
  border-radius: 0 !important;
}
.contactForm3 .sky-form textarea.form-control {
  height: auto;
}
.contactForm3 h2 {
	color: #FFF;
}

.contact-padding {
  padding: 120px 90px;
}

.logo-row {
	justify-content: center;
}

.backdoorServices {
	background: #E1F4F9;
}

.quform-error
{color: red;
font-weight: bold;
text-transform: uppercase;
}

/* Contact Form Area #4 */
.contactForm4 {
  padding: 120px 0;
  background: #00ADE9;
}
.contactForm4 .middleCol {
  margin: 0 auto;
}
.contactForm4 .sky-form .label {
  display: block;
}
.contactForm4 .sky-form .label {
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #FFF;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.contactForm4 .sky-form p label, .sky-form p {
  color: #FFF;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  text-align: left;
}
.contactForm4 .sky-form .form-control {
  background-color: #FFF;
  font-size: 19px;
  height: 55px;
  border-color: #FFF;
  margin-top: 10px;
  margin-bottom: 20px;
  font-weight: 600;
  border-radius: 0 !important;
}
.contactForm4 .sky-form textarea.form-control {
  height: auto;
}
.contactForm4 h2 {
  margin-bottom: 25px;
  color: #FFF;
}

.contactForm4 p {
  color: #FFF;
}

.contactForm4 .checkbox {
  color: #FFF;
}

@media (min-width: 768px) {
.backdoor-contact .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 100%;
}
}	

@media (min-width: 768px) {
.logo-row .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 20%;
}
}

@media (max-width: 768px) {
.logo-row div {
		padding-bottom: 20px;
}
}

@media (min-width: 769px) and (max-width: 991px) {
.logo-row div {
		padding-right: 200px;
}
}

@media (min-width: 992px) and (max-width: 1200px) {
.logo-row div {
		padding-right: 200px;
}
}
/* Contact Form Area #2 RESPONSIVE*/
/* Project Page */
.projectsIntro {
  padding: 100px 0;
}
.projectTestimonial {
  padding: 120px 0;
  background: #003E6E;
}
.projectTestimonial .testiText {
  color: #FFF;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
  line-height: 35px;
}
.projectTestimonial .testiName {
  color: #00ADE9;
  font-size: 20px;
  font-weight: 900;
  font-style: normal;
  margin-bottom: 0;
  text-align: center;
  text-transform: uppercase;
}

.projectTestimonialLB {
  padding: 120px 0;
  background: #00ADE9;
}
.projectTestimonialLB .testiText {
  color: #FFF;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
  line-height: 35px;
}
.projectTestimonialLB .testiName {
  color: #FFF;
  font-size: 20px;
  font-weight: 900;
  font-style: normal;
  margin-bottom: 0;
  text-align: center;
  text-transform: uppercase;
}
.serviceUsed {
  padding: 120px 0;
  background: #E1F4F9;
}
.serviceUsed p {
  font-weight: 600;
}
.benefitsPadding {
  padding: 120px 90px;
  background: #003E6E;
}
.benefitsPadding .likeHeading {
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 700;
  color: #FFF;
}
.benefitsPadding .media-body h5 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
  color: #FFF;
  text-transform: uppercase;
}
.benefitsPadding .media-body p {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 0;
  color: #FFF;
}
.benefitsPadding .media span {
  font-size: 23px;
  font-weight: 900;
  color: #00ADE9;
  line-height: 28px;
}
/* Projects Gallery Page */
.projectList {
  background: #00ADE9;
  padding: 0px;
  position: inherit;
  top: 0;
  left: 0;
  min-height: 100%;
  height: 100%;
  width: 98%;
}
.projectList ul.ccsProjects {
  padding-left: 0;
  list-style: none;
}
.projectList ul.ccsProjects li a {
  display: block;
  padding: 20px 15px;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
}
.projectList ul.ccsProjects li a.active {
  background: #007BC3;
}
.projectList ul.ccsProjects li a.active {
  background: #007BC3;
}
.projectList ul.ccsProjects li a:hover {
  background: #007BC3;
}

.projectTab a {
  padding: 10px 10px 10px 50px;
  height: 100%;
  display: inline-block;
  width: 100%;
}

.highlightsBox {
  background: #FFF;
  padding: 25px;
  border-radius: 20px;

  box-shadow: 0 1rem 1.75rem 0 rgba(45,55,75,.1);
  border: rgba(220, 224, 229, 0.6) solid 0.1025rem;
}

/*Button Dropdown Styles*/
button#dropdownMenuButton
{width: 100%;
}



button#dropdownMenuButton:focus {
  border-radius: 30px 30px 0px 0px;
}

.dropdown-menu.show
{
 width: 100%;
 max-height: 50vh;
 overflow: hidden;
 overflow-y: scroll;
 border-radius: 0px 0px 30px 30px;
 margin-top: 0px;
 transform: translate3d(0px, 62px, 0px) !important;
}

.dropdown-menu
{font-size:1.2em;
border-radius: 10px;
}

a.dropdown-item
{font-family: myriad-pro, sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 15px;
font-weight: 900;
font-style: normal;
padding: 15px 0;
color: #003E6E;
}

.projectImages .proImageSec {
  margin-bottom: 15px;
}
.projectImages {
  margin: 30px 0;
}
.projectImages .proImageSec p {
  margin: 0;
  padding: 15px;
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  color: #003E6E;
  text-align: center;
  text-transform: uppercase;
}
/* Stacked Carousel */
/* Masonry Grid */
.fullWidthMason {
  padding-bottom: 100px;
}
.masonry {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  column-gap: 30px;
  -moz-column-fill: initial;
  -webkit-column-fill: initial;
  column-fill: initial;
  margin-bottom: 50px;
}
.masonry .brick {
  margin-bottom: 30px;
}
.masonry .brick img {
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.masonry.bordered {
  -moz-column-rule: 1px solid #eee;
  -webkit-column-rule: 1px solid #eee;
  column-rule: 1px solid #eee;
  -moz-column-gap: 50px;
  -webkit-column-gap: 50px;
  column-gap: 50px;
}
.masonry.bordered .brick {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
}
.masonry.gutterless {
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
}
.masonry.gutterless .brick {
  margin-bottom: 0;
}
.span {
  -moz-column-span: all;
  -webkit-column-span: all;
  column-span: all;
  *margin: 30px 0;
}
@media only screen and (min-width: 1024px) {
  .desc {
    font-size: 1.25em;
  }
  .intro {
    letter-spacing: 1px;
  }
  .wrapper {
    width: 80%;
    padding: 2em;
  }
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .wrapper {
    width: 85%;
    padding: 1.5em;
  }
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
/* Accreditation Section */
.accreditationSection {
  padding: 120px 0;
  background: #E1F4F9;
}
.accreditationSection img {
  vertical-align: middle !important;
  align-items: center;
  opacity: 0.3;
}
/* Team Page Sec */
.teamSec {
  padding: 120px 0;
  background: #003E6E;
}
.teamSec h2 {
  color: #FFF;
  margin-bottom: 40px;
}
.teamSec h5 {
  color: #00ADE9;
  line-height: 20px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 22px;
}
.teamSec img {
  margin-bottom: 30px;
}
.teamSec .teamJob {
  color: #00ADE9;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 7px;
}
.teamSec p {
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
}

/* Backdoor Page */

@media (min-width: 992px) {
.col-lg-4-backdoor .col-lg-4 {
    order: 1;
}
}	

/* 2 Col Layout */
.TwoColLayout {
  padding: 120px 0;
  background: #E1F4F9;
}
/* Full Width Intro */
.fullWidthIntro {
  padding: 120px 0;
  background: #FFF;
}
.equipmentTypes {
  padding: 120px 0;
  background: #003E6E;
}
.equipmentTypes h2, .equipmentTypes p {
  color: #FFF;
}
.equipmentTypes .u-accordion__body p {
  color: #000;
  font-size: 18px;
}
.equipmentTypes .u-accordion__body p:last-child {
  margin-bottom: 0;
}
/* Accordians */
.equipmentTypes .u-accordion__body {
  padding: 25px;
}
.u-accordion-bg-primary .u-accordion__header [aria-expanded="false"] {
  background-color: #003E6E !important;
  border-color: #FFF !important;
  color: #FFF !important;
  border-bottom: 4px solid #FFF !important;
}
.u-accordion-bg-primary .u-accordion__header [aria-expanded="true"] {
  background-color: #00ADE9 !important;
  border-color: #003E6E !important;
  color: #FFF !important;
}
.u-accordion__header h5 {
  font-weight: 700;
}
.u-accordion__control-icon i {
  color: #00ADE9;
}
.u-accordion__control-icon i.fa-minus {
  color: #FFF;
}

.equipmentTypes .u-accordion__body {
  padding: 25px;
}
.u-accordion-bg-secondary .u-accordion__header [aria-expanded="false"] {
  background-color: #00ADE9 !important;
  border-color: #FFF !important;
  color: #FFF !important;
  border-bottom: 4px solid #FFF !important;
}
.u-accordion-bg-secondary .u-accordion__header [aria-expanded="true"] {
  background-color: #00ADE9 !important;
  border-color: #003E6E !important;
  color: #FFF !important;
}
.u-accordion__header h5 {
  font-weight: 700;
  font-size: 18px;
}
.u-accordion-bg-secondary h5 .u-accordion__control-icon i {
  color: #FFF;
}
.u-accordion-bg-secondary h6 {
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 17px;
  color: #003E6E;
  line-height: 25px;
  margin-bottom: 0px;
}
.u-accordion-bg-secondary h6:hover {
  color: #00ADE9;
  transition: 0.3s ease-in;
}
.u-accordion-bg-secondary .projectTab {
  padding: 0px;
  background: #E1F4F9;
}
.u-accordion-bg-secondary .projectTab:hover {
  background: #FFF;
}

.u-accordion-bg-secondary .projectTab:hover h6 {
  color: #00ADE9;
  transition: 0.3s ease-in;
}
.u-accordion__control-icon i.fa-minus {
  color: #FFF;
}
.g-pa-20-25 {
  padding: 1.67143rem 1.02857rem !important;
}
.fullWidthTestimonial {
  padding: 100px 0;
  background: #E1F4F9;
}
.fullWidthTestimonial p.testimonialQuote {
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 25px;
  line-height: 36px;
  text-align: center;
  color: #003E6E;
  margin-bottom: 10px;
}
.fullWidthTestimonial p.testimonialName {
  font-family: myriad-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 21px;
  line-height: 32px;
  text-align: center;
  color: #00ADE9;
  text-transform: uppercase;
}
.installServices {
  padding: 120px 0 0;
}
.installServices h3, .installServices p, .installServices a {
  color: #FFF;
}
.designSer {
  background: #003E6E url()no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  text-align: center;
  position: relative;
  min-height: 380px;
}
.designSer:hover {
  background: #003E6E;
  opacity: 1;
}
.installSer {
  background: #003E6E url("../../images/ccs-solutions/installation/installation-of-garage-equipment.jpg") no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  text-align: center;
  position: relative;
  min-height: 380px;
}
.installSer:hover {
  background: #003E6E;
  opacity: 1;
}
.supplySer {
  background: #003E6E url("../../images/ccs-solutions/installation/supply-of-garage-equipment-for-commercial-and-retail-workshops.jpg") no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  text-align: center;
  position: relative;
  min-height: 380px;
}
.supplySer:hover {
  background: #003E6E;
  opacity: 1;
}
.installServices .layer {
  background-color: rgba(0, 62, 110, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 95px;
}
/* Clients Carosel or Static */
.installClients {
  padding: 100px 0;
  background: #E1F4F9;
}
/* SIDEBARS */
.sidebarList li {
  font-size: 19px;
  color: #1A1A1A;
  line-height: 30px;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
.sidebarList li a {
  font-size: 19px;
  color: #1A1A1A;
  text-decoration: underline;
}
.sidebarList li a:hover {
  color: #00ADE9;
}
.sidebarList li span {
  font-weight: 700;
}
.normalList {
  padding-left: 17px;
}
.normalList li {
  font-size: 19px;
  color: #1A1A1A;
  line-height: 30px;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 6px;
}
.normalList li a {
  color: #1A1A1A;
  text-decoration: underline;
}
.normalList li a:hover {
  color: #00ADE9;
}

.tickList {
  padding-left: 0px;
  list-style: none;
}
.tickList li {
  font-size: 19px;
  color: #1A1A1A;
  line-height: 30px;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  margin-bottom: 6px;
}
.tickList li a {
  color: #1A1A1A;
  text-decoration: underline;
}
.tickList li a:hover {
  color: #00ADE9;
}

.tickList li i {
  color: #003E6E;
}

/* FOOTERS */
footer {
  background: #003E6E;
}
footer h5 {
  font-size: 20px;
  color: #FFF;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  margin-bottom: 13px;
  line-height: 26px;
  text-transform: uppercase;
}
footer h5 a {
  color: #FFF;
  text-decoration: none;
}
footer h5 a:hover {
  color: #FFF;
  text-decoration: underline;
}
footer .u-link-v6 {
  font-size: 16px;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  line-height: 27px;
  color: #FFF;
  margin-bottom: 5px;
  letter-spacing: 0.7px;
}
footer address {
  font-size: 16px;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  line-height: 28px;
  color: #FFF;
}
footer .u-link-v6 a {
  color: #FFF;
}
footer .u-link-v6:hover {
  text-decoration: underline;
}
footer .contactsList {
  padding-left: 0;
}
footer .contactsList li {
  list-style: none;
}
footer .contactsList li a {
  font-size: 16px;
  font-family: myriad-pro, sans-serif;
  font-weight: 600;
  line-height: 28px;
  color: #FFF;
  text-decoration: underline;
}
footer .contactsList li a:hover {
  text-decoration: none;
}
.g-color-lb {
  color: #00ADE9 !important;
}
.g-color-db {
  color: #003E6E !important;
}
.g-bg-db-opacity-0_1 {
  background-color: rgba(0, 62, 110, 0.9) !important;
}
.g-bg-lb-opacity-0_1 {
  background-color: rgba(0, 173, 233, 0.9) !important;
}
.g-bg-secondary {
  background-color: #00ADE9 !important;
}
.g-color-db--hover:hover {
  color: #003E6E !important;
}
.g-color-lb--hover:hover {
  color: #00ADE9 !important;
}
i.g-line-height-1 {
  line-height: 1 !important;
}
i.g-font-size-default {
  font-size: 1.1rem !important;
}
.u-icon-v1.u-icon-size--sm, .u-icon-v1.u-icon-size--sm .u-icon__elem-regular, .u-icon-v1.u-icon-size--sm .u-icon__elem-hover {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.3rem;
}
.g-bg-primary--hover:hover {
  background-color: #FFF !important;
}
.g-color-white--hover:hover {
  color: #00ADE9 !important;
}
.u-icon-v3 > i::before {
  left: -11% !important;
  position: relative;
}
.u-icon-v3 {
  border: 2px solid #00ADE9;
}
.g-bg-blue-dark-v1 {
  background: #003E6E;
}
.border-top-white {
  border-top: 2px solid #FFF;
}
.copywrite p {
  font-size: 15px;
  font-weight: 700;
  line-height: 27px;
  color: #FFF;
  margin-bottom: 0;
}
.copywrite p a {
  font-weight: 600;
  color: #FFF;
  text-decoration: underline;
}
.copywrite p a:hover {
  text-decoration: none;
}
/* RESPONSIVE */
@media (min-width: 2200px) {
  .u-header--sticky-top .js-header-change-moment {
    bottom: auto;
    top: -65px;
  }
  .overlayImage {
    top: 35%;
    left: 50%;
  }
  .overlayHeader {
    top: 50%;
    left: 50%;
  }
  .overlayText {
    top: 62%;
    left: 50%;
  }
}
@media (max-width: 1800px) {
  .overlayText {
    width: 90%;
  }
}
@media (max-width: 1550px) {
  .overlayImage {
    top: 23%;
    left: 50%;
  }
  .overlayText {
    font-size: 17px;
    top: 70%;
    left: 50%;
    width: 90%;
  }
  .overlayHeader {
    top: 46%;
    left: 50%;
  }
  .hpServicesHoverIpad img {
    width: 50px;
  }
}
@media (max-width: 1400px) {
  .g-hidden-ipadLand {
    display: none;
  }
  .ccsNav .navbar-nav .nav-link {
    font-size: 12px;
  }
  .g-px-17 {
    padding-left: .7rem !important;
    padding-right: .7rem !important;
  }
  .hoverServices {
    display: none;
  }
  .hpServicesHoverIpad {
    display: block;
  }
  .hpServicesHover {
    display: none;
  }
  .relatedServicesSec {
    padding-bottom: 0;
  }
}
@media (max-width: 1199px) {
  .btn-ccs-footer {
    padding: 18px 16px;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
}
@media (max-width: 1025px) {
  .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
    width: 100%;
    height: 3px;
    border-radius: 0;
  }
  .u-header--sticky-top, .u-header--sticky-bottom {
    position: relative;
  }
  .navbar-toggler {
    margin: auto;
  }
  .topBar .navbar-brand .img-fluid {
    max-width: 100%;
  }
  .g-slider-mt-ipad {
    margin-top: 0px !important;
  }
  .g-topSec-mt-ipad {
    margin-top: 0 !important;
  }
  .nav-justified .nav-item {
    border-right: none;
  }
  .g-slider-mb-ipad {
    margin-bottom: 0 !important;
  }
  .headerList li {
    font-weight: 700;
    font-size: 15px;
    line-height: 21px;
    padding: 0 2px;
    width: 100%;
  }
@media only screen and (min-width: 576px) and (max-width: 1025px) {
  .headerList .calButton {
    width: 48%;
  }
  .headerList .servButton {
    width: 41%;
  }	
  .topBar .container-fluid .align-items-center .ml-auto {
	display: flex;
	justify-content: center;
  }
}	
  .u-header--sticky-top .js-header-change-moment {
    bottom: auto;
    top: 0;
  }
  .topBar img {
    display: block;
    margin: 0 auto;
  }
  .headerList li a {
    color: #FFF;
    font-size: 15px;
    display: block;
    margin-top: 20px;
  }
  .btn-ccs-header {
    padding: 12px 13px;
    font-size: 12px;
    margin-top: 0;
    text-align: center;
  }
  .column1:hover .overlay {
    opacity: 1;
    top: 0;
  }
  .column2:hover .overlay2 {
    opacity: 1;
    top: 0;
  }
  .column3:hover .overlay3 {
    opacity: 1;
    top: 0;
  }
  .designSer {
    background: #003E6E no-repeat;
    background-size: cover;
    text-align: center;
    position: relative;
    min-height: auto;
  }
  .designSer:hover {
    background: #003E6E;
    opacity: 1;
  }
  .installSer {
    background: #003D3D;
    background-size: cover;
    height: 100%;
    width: 100%;
    text-align: center;
    position: inherit;
    min-height: auto;
  }
  .installSer:hover {
    background: #003E6E;
    opacity: 1;
  }
  .supplySer {
    background: #003A1A;
    background-size: cover;
    height: 100%;
    width: 100%;
    text-align: center;
    position: inherit;
    min-height: auto;
  }
  .supplySer:hover {
    background: #003E6E;
    opacity: 1;
  }
  .installServices .layer {
    background-color: none;
    position: inherit;
    padding: 45px 25px;
  }
  .overlayImage {
    position: absolute;
    top: 30%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .overlayHeader {
    font-size: 24px;
    font-family: myriad-pro, sans-serif;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .overlayHeader h3 {
    color: #FFF;
  }
  .overlayText {
    color: #FFF;
    font-size: 18px;
    font-family: myriad-pro, sans-serif;
    font-weight: 600;
    font-style: normal;
    position: absolute;
    top: 58%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .overlay, .overlay2, .overlay3 {
    height: 70%;
  }
  .btn-ccs-footer {
    padding: 18px 14px;
  }
  .image {
    height: 70%;
  }
  .js-mega-menu .g-pa-0 {
    padding: 10px !important;
  }
  .md-text-center {
    text-align: center !important;
  }
  .resMarginTop {
    margin-top: 40px;
  }
  .whyCCS [role="tablist"] .nav-item {
    display: block;
  }
  [data-tabs-mobile-type="slide-up-down"].u-nav-primary .nav-link.active, [data-tabs-mobile-type="slide-up-down"].u-nav-primary .nav-item.show .nav-link, [data-tabs-mobile-type="slide-up-down"].nav-pills .nav-link.active, [data-tabs-mobile-type="slide-up-down"].nav-pills .nav-item.show .nav-link {
    border-color: #003E6E !important;
    border-width: 2px;
  }
  [data-tabs-mobile-type="slide-up-down"].u-nav-primary .nav-link, [data-tabs-mobile-type="slide-up-down"].nav-pills .nav-link {
    border-color: #003E6E !important;
    border-width: 2px;
    margin-bottom: 10px;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    font-size: 14px;
  }
  .g-padding-100 {
    padding: 80px 100px;
  }
  .servicePadding {
    padding: 30px 0px;
  }
  .hs-menu-initialized.g-slider-mt-ipad {
    margin-top: 0;
  }
  .hs-menu-initialized.g-topSec-mt-ipad {
    margin-top: 0;
  }
  .benefitsPadding {
    padding: 50px 20px;
    background: #003E6E;
  }
  .ccsNav .nav-justified .nav-item {
    text-align: left;
    border-right: 0;
  }
  .ccsNav .nav-justified .nav-item a {
    padding: 15px !important;
  }
  .ccsNav .nav-justified .nav-item a.d-flex {
    padding: 10px 0 !important;
  }
  .navbar-nav.nav-justified {
    padding: 0 15px;
  }
  .mobileTextCenter {
    text-align: center;
  }
  .hpServicesHoverIpad {
    margin-bottom: 50px;
  }
  .projectList {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .projectGallery .col-lg-3 {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 770px) {
  .whyCCS [class*="u-nav-v5"] .nav-link {
    font-size: 16px;
  }
  .g-padding-100 {
    padding: 60px 80px;
  }
  .g-mb-40--md {
    margin-bottom: 40px;
  }
  .installServices .layer {
    background-color: none;
    position: inherit;
    padding: 65px 25px;
  }
}
@media (max-width: 520px) {
  .g-slider-mt-ipad {
    margin-top: 0 !important;
  }
  .g-topSec-mt-ipad {
    margin-top: 0 !important;
  }
  .hs-menu-initialized.g-slider-mt-ipad {
    margin-top: 0;
  }
  .g-slider-mb-ipad {
    margin-bottom: 0 !important;
  }
  .u-header--sticky-top .js-header-change-moment {
    bottom: auto;
    top: 0;
  }
  .btn-ccs-footer {
    display: block;
    margin-top: 15px;
  }
  .g-padding-100 {
    padding: 40px 20px;
  }
  .morePAMobile {
    padding: 0 20px 40px 20px;
  }
  .servicePadding {
    padding: 10px 0px;
  }
  [data-tabs-mobile-type="slide-up-down"].u-nav-primary .nav-link.active, [data-tabs-mobile-type="slide-up-down"].u-nav-primary .nav-item.show .nav-link, [data-tabs-mobile-type="slide-up-down"].nav-pills .nav-link.active, [data-tabs-mobile-type="slide-up-down"].nav-pills .nav-item.show .nav-link {
    border-color: #003E6E !important;
    border-width: 2px;
    border-radius: 30px;
  }
  [data-tabs-mobile-type="slide-up-down"].u-nav-primary .nav-link, [data-tabs-mobile-type="slide-up-down"].nav-pills .nav-link {
    border-color: #003E6E !important;
    border-width: 2px;
    margin-bottom: 10px;
    border-radius: 30px !important;
  }
}
@media only screen and (max-width: 991px) {
  #first {
    order: 1;
  }
  #second {
    order: 2;
  }
  #third {
    order: 3;
  }
  #fourth {
    order: 4;
  }
}

@media only screen and (max-width: 991px) {
  .first {
    order: 1;
  }
  .second {
    order: 2;
  }
}

@media only screen and (max-width: 991px) {
  .twoLineButton {
    word-spacing: 100vw;
  }    
    
}

/*MAILCHIMP SIGN-UP STYLE**/

#mc_embed_signup, #mc_embed_signup a
{color: #FFF;
font-family: myriad-pro, sans-serif;
}

#mc_embed_signup a
{text-decoration: underline;}

#mc_embed_signup label
{background: none;
font-size: 20px;
font-weight: 700;
}

#mc_embed_signup.input-group
{display: inline;}

#mc_embed_signup input#mce-EMAIL, #mc_embed_signup input#mce-FNAME, #mc_embed_signup input#mce-LNAME
{   font-size: 20px;
	font-weight: 700;
    color: #003F6E;
    background-color: #fff;
    line-height: 46px;
	border: 3px solid #003F6E;
    padding: 10px 15px;
	border-radius: 40px;
    cursor: text;
    width: 99%;
    margin-bottom: 0px;
}

#mc_embed_signup input.button {
  border: 3px solid #003E6E;
  color: #FFF;
  padding: 17px 50px;
  font-size: 15px;
  font-family: myriad-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  border-radius: 40px;
  text-transform: uppercase;
  background: linear-gradient(to right, #FFF 50%, #003E6E 50%);
  background-size: 202% 100%;
  background-position: right bottom;
  transition: all .3s ease-out;
  cursor: pointer;
}

#mc_embed_signup input.button:hover {
  border: 3px solid #003E6E;
  color: #003E6E !important;
  text-decoration: none !important;
  background-position: left bottom;
}

div.mc-field-group.input-group
{display: inline;}

#mc_embed_signup p
{margin-bottom: 0px;}

#mc_embed_signup .mc-field-group.input-group ul li
{display: inline;
margin-right: 20px;
font-size: 20px;
font-weight: 700;}

div#mc_embed_signup div.col-lg-4.g-mb-30 div.mc-field-group div.mce_inline_error
{background: none;
font-weight: bold;
z-index: 1;
color: #000000;
text-decoration: underline;
}


/*MODAL STYLES*/

.modal-content {
position: relative;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: 1.3rem;
outline: 0;
}

.modal-content p {
font-size: 17px;
line-height: 22px;
margin-bottom: 15px;
color: #003E6E;
font-weight: bold;
}

.modal-content p.sideFormMessage {
font-size: 15px;
font-weight: normal;
}

.modal-content h3 {
font-size: 21px;
line-height: 28px;
color: #003E6E;
}

#bookModal h3
{margin-bottom:0px;
}

.modalForm {
  padding: 10px;
  background:#003E6E;
  border-radius:10px;
}
.modalForm .form-control {
  height: 50px;
  margin-bottom:0px;
  font-size: 16px;
  color: #003E6E;
  transition: none;
  border-radius:4px;
  border: none;
}
.modalForm .form-control.textArea {
  min-height:150px;
}
.modalForm .form-check-inline .g-absolute-centered--y {
  top: 35% !important;
}
.modalForm .form-check-inline {
  font-family: myriad-pro, sans-serif;
  color: #003E6E;
  font-size: 15px;
}

.clientTestimonial {
padding: 20px;
margin: 0 0 30px 0;
background: #f8f8f8;
}

.fullWidthIntro .clientTestimonial p {
font-family: myriad-pro, sans-serif;
font-weight: 200;
font-size: 17px;
line-height: 30px;
}

.aboutImages {
    width:100%;
    height:100%;
    object-fit:cover;   
}

.aboutCards {
    display: block;
}


.aboutCardsImage {
    width:1200px;
}

.textPaddingCarousel {
    padding: 80px 20px;
}

@media only screen and (max-width: 980px) {
  .whyCCS .js-carousel .g-left-minus-50 {
    left: 0.571rem;
    top: 0.571rem; 
  }
}

@media only screen and (max-width: 980px) {
  .whyCCS .js-carousel .g-right-minus-50 {
    right: 0.571rem;
    
  }
}

@media only screen and (max-width: 500px) {
  .textPaddingCarousel {
    padding: 20px 20px;;
  }
}    

@media only screen and (max-width: 500px) {
  .textPaddingCarousel h3{
    margin-top: 160px;
  }
}

@media only screen and (max-width: 500px) {
  .projectDesc {
    display: none;
  }
}