/*!
 * Citi Clean v2.0 (http://citiclean.com.au)
 * Copyright (c) 2014 Web Choice Online (http://webchoiceonline.com.au).
 * Design & Front-end Author skyyalone (http://twitter.com/skyyalone)
 */

*{
    -webkit-font-smoothing: antialiased;
    translate3d( 0, 0, 0)
}

body, html{
    font-size:16px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 400;
    color: #72aad9; 
}

a:hover{
    text-decoration: none;
}

ul, ol{
    padding: 0;
    margin:0; 
}

.btn-success {
    background-color: #428bca;
    border-color: #418DCE;
}
.btn-success:hover {
    background-color: #3180C5;  
    border-color: #3180C5;
}

/*! CSS Common Variables */

.wrapper{
    width: 100%;
    max-width: 1134px;
    height: auto;
    margin: 0 auto;
    padding: 0 40px;
}

.fullWidth{width: 100%;}
.displayNone{display: none;}
.visibilityNone{visibility: hidden;}

/*============================*/
/*==== Header Area Styles ====*/
/*============================*/

header{
    height: 130px;
    background-color: #fff;
    box-shadow: 0 0 5px #969696;
    position: relative;
    z-index: 20;
}

header:before{
    content:'';
    height: 10px;
    width: 1134px;
    display: block;
    margin: 0 auto;
    margin-top: -5px;
    padding: 0;
    background-color: #64a7eb;
    -webkit-border-radius: 50px;  
    -moz-border-radius: 50px;  
    border-radius: 50px;
}

header .wrapper{
    overflow: hidden;
}

/* Logo */

header .logo{
    height: 120px;
    line-height: 120px;
}
header .logo a{display: inline-block;}
header .logo a img{display: inline-block;}

/* Navigation */

header .navigation{
    height: 120px;
    line-height: 120px;
}
header .navigation > ul{}
header .navigation > ul li{
    float: left;
    list-style: none;
}

header .navigation > ul li a{
    color: #908f8f;
    font-size: 18px;
    margin-left: 50px;
    position: relative;
    line-height: 1;  
    -webkit-transition: all .3s ease;  -moz-transition: all .3s ease;  transition: all .3s ease;
}

header .navigation > ul li a:hover,
header .navigation > ul li a:focus,
header .navigation > ul li a.active{
    color: #3c85c9;
}

header .navigation > ul li a:hover:before,
header .navigation > ul li a:focus:before,
header .navigation > ul li a.active:before{
    content: '\f0d7';
    font-family: "FontAwesome";
    color: #3c85c9;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    float: left;
    margin: auto;
    height: 10px;
    width: 10px;  
    -webkit-transition: all .3s ease;  -moz-transition: all .3s ease;  transition: all .3s ease;
}

header .navigation > #main-nav ul{}
header .navigation > #main-nav ul li{
    float: left;
    list-style: none;
}

header .navigation > #main-nav ul li a{
    color: #908f8f;
    font-size: 18px;
    margin-left: 50px;
    position: relative;
    line-height: 1;  
    -webkit-transition: all .3s ease;  -moz-transition: all .3s ease;  transition: all .3s ease;
}

header .navigation > #main-nav ul li a:hover,
header .navigation > #main-nav ul li a:focus,
header .navigation > #main-nav ul li a.active{
    color: #3c85c9;
}

header .navigation > #main-nav ul li a:hover:before,
header .navigation > #main-nav ul li a:focus:before,
header .navigation > #main-nav ul li a.active:before{
    content: '\f0d7';
    font-family: "FontAwesome";
    color: #3c85c9;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    float: left;
    margin: auto;
    height: 10px;
    width: 10px;  
    -webkit-transition: all .3s ease;  -moz-transition: all .3s ease;  transition: all .3s ease;
}

/*============================*/
/*==== Slider Area Styles ====*/
/*============================*/

#slider{
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    height: 534px;
}

#slider .slideContent{
    position: relative;
    width: 100%;
    background-size: cover;
    height: 534px;
    background-position: center;
}

#slider .slideContents {
    position: absolute;
    top: 0;
    z-index: 99;
    width: 100%;
    max-width: 1134px;
    margin: auto;
    right: 0;
    left: 0;
    padding: 40px;
    margin-top: 60px;
    color: #fff;
    /* background: rgba(255, 255, 255, 0.31); */
    border-radius: 5px;
}

#slider h1{
    font-size: 85px;
    font-weight: 500;
    text-shadow: 0 1px 2px #7F7F7F;
}

#slider h2{
    font-size: 32px;
    font-weight: 400;
    text-shadow: 0 1px 2px #7F7F7F;
    margin-top: -15px;
}



#slider .slideContents h2 small{
    color: #fff;
}
#slider .slideContents p{
    font-weight: 300;
    font-size: 20px;
    max-width: 750px;
    margin-top: 30px;
    padding-right: 50px;
    text-shadow: 0 1px 2px #7F7F7F;
}


/*==== Slider Mobile Banner Styles ====*/
img.responsive-img {
    padding: 10px;
    background-color: #DBE8F1;
}



/*==============================*/
/*==== Services Area Styles ====*/
/*==============================*/


#services{}
#services .wrapper{
    overflow: hidden;
    padding: 85px 40px;
}
#services .heading{
    margin-bottom: 60px;
}
#services .heading h2{
    font-size: 36px;  color: #219cd7;
    margin: 0;
    text-shadow: 0px 1px 1px #A2A2A2;
}
#services .servicesMenu{
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
}
#services .servicesMenu li{
    display: inline;
    list-style: none;
    float: left;
    width: 14.28%;
    text-align: center;
}
#services .servicesMenu li a{
    color: #80b2dc;
    float: left;
    width: 100%;
}
#services .servicesMenu li a span{}
#services .servicesMenu li a .roundIcon{
    height: 93px;
    width: 93px;
    display: inline-block;
    clear: both;
    border: 3px solid #78cdf0;
    position: relative;
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
    border-radius: 50%;
    transition: background .1s;
    -webkit-transition: background .1s;
    -moz-transition: background .1s;
}
#services .servicesMenu li a .roundIcon img{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}
#services .servicesMenu li a .serviceLabel{
    float: left;
    clear: both;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 300;
}

#services .servicesMenu li a:hover .roundIcon{
    background: #72aad9;
}

#services .servicesMenu li a:hover .serviceLabel{
    color: #1f68b7;
}

/*==================================*/
/*==== Company Info Area Styles ====*/
/*==================================*/

#companyInfo{
    background-color: #dbe8f1;
    padding: 85px 0;
}
#companyInfo .wrapper{}
#companyInfo .heading{}
#companyInfo .heading h2{
    font-size: 36px;
    color: #219cd7;
    margin: 0;
    margin-bottom: 35px;
    text-shadow: 0px 1px 1px #A2A2A2;
}
#companyInfo .content{}
#companyInfo .content p{
    line-height: 28px;
    font-size: 18px;
    font-weight: 300;
    color: #4c4c4c;
}

/*================*/
/*==== Footer ====*/
/*================*/

footer{
    background-color:#1b3a60; 
    text-align: center;
    font-size: 12px;
    color: #1373b5;
}
footer .wrapper{
    text-align: center;
    height: 95px;
    padding: 40px 40px;
}
footer .copyRights{
    text-align: left;
    float: left;
}

footer .footNav a{
    margin: 0 15px;
    color: #8eb7d3;
    font-size: 15px;
}
footer .footNav {
    text-align: center;
}
footer .footNav a:hover{
    color: #bab8b7;
}
footer .webCopyRight{
    float: right;
}

.webCopyRight a { color: #428bca !important; font-size: 12px !important; }

/*==================================*/
/*==== Inside page Elements ========*/
/*==================================*/

#insidePage{
    background: #f3f8fb;
}

/*! Banner Area =====>>> */

#banner{
    height: 467px;
    background-size: cover;
    background-position: center;
}

/*! Page content area =====>>> */

#pageContent{}

#pageContent .wrapper{
    background: #f3f8fb;
    padding: 0;
}

#pageContent .contentArea{
    background: #f3f8fb;
    margin-top: 0px;
    float: left;
    padding: 0 40px;
    padding-bottom: 50px;
    min-height: 545px;
    -webkit-border-top-left-radius: 20px;  
    -webkit-border-top-right-radius: 20px;  
    -moz-border-radius-topleft: 20px;  
    -moz-border-radius-topright: 20px;  
    border-top-left-radius: 20px;  
    border-top-right-radius: 20px;
    position: relative;
}

#pageContent .contentArea:before {
    content: '';
    background-image: url(../images/misc/shadow-left.png);
    width: 45px;
    height: 509px;
    float: left;
    position: absolute;
    left: -44px;
    top: 15px;
}

#pageContent .contentArea:after {
    content: '';
    background-image: url(../images/misc/shadow-right.png);
    width: 45px;
    height: 509px;
    position: absolute;
    right: -44px;
    top: 15px;
}

#pageContent .servicesMenu{
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: -50px;
}

#pageContent .servicesMenu li{
    display: inline;
    list-style: none;
    float: left;
    width: 14.28%;
    text-align: center;
}

#pageContent .servicesMenu li a{
    color: #80b2dc;
    float: left;
    width: 100%;
}

#pageContent .servicesMenu li a .roundIcon{
    height: 93px;
    width: 93px;
    display: inline-block;
    clear: both;
    border: 3px solid #78cdf0;
    background: #fff;
    position: relative;
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
    border-radius: 50%;
    transition: background .1s;
    -webkit-transition: background .1s;
    -moz-transition: background .1s;
}

#pageContent .servicesMenu li a:hover .roundIcon,
#pageContent .servicesMenu li a.active .roundIcon{
    background: #72aad9;
}

#pageContent .servicesMenu li a .roundIcon img{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}

/*.servImage1{
     background:url(../images/icons/001.png);
     width: 32px;
     height: 34px;
     background-position: 0px 0px;
     display: inline-block;
}

.servImage1:hover{
     background-position: 0px -44px;
}*/

#pageContent .servicesMenu li a .serviceLabel{
    float: left;
    clear: both;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

#pageContent .servicesMenu li a:hover .serviceLabel,
#pageContent .servicesMenu li a.active .serviceLabel{
    color: #1f68b7;
}

/*! Breadcumb =====>>> */

#breadcumb{
    height: 35px;
    line-height: 35px;
    background-color: #b6d6f1;
    background-image: url(../images/misc/breadcumbBG.png);
    padding: 0 40px;
    padding-left: 0;
    /* background-attachment: fixed; */
    background-position: left center;
    position: absolute;
    right: 0;
    top: 185px;
}

#breadcumb:before {
    content: '';
    height: 35px;
    width: 160px;
    background-image: url(../images/misc/breadcumbBG.png);
    position: absolute;
    left: -160px;
    background-position: left;
}

#breadcumb li{
    float: left;
    list-style: none;
    font-size: 12px;
    color: #1F68B7;
}
#breadcumb li a{
    float: left;
    font-size: 12px;
    color: #1F68B7;
    margin: 0 5px;
}

#breadcumb li a:hover,
#breadcumb li a.active{
    color: #FFFFFF;
}

/*! Page h1 =====>>> */

.pageHeading {
  clear: both;
  float: left;
  margin-bottom: 40px;
  margin-top: 120px;
  text-align: center;
  width: 100%;
}

.pageHeading h2{
    font-weight: 600;
    font-size: 32px;
    color: #219cd7;
}

.main-title {
    text-align: center;
}

.main-title h1{
    font-weight: 600;
    font-size: 48px;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    margin-top: 180px;
    /*text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;*/
}



/*! Page Article =====>>> */

.pageArticle{
    float: left;
    width: 100%;
    clear: both;
    font-size: 16px;
    line-height: 24px;
    color: #72aad9;
    text-align: center;
}
.pageArticle *{
    font-size: 16px;
    line-height: 25px;
    color: #72aad9;
    font-weight: 300;
    margin-bottom: 25px;
}

.pageArticle p {
    color: #4c4c4c;
}

.pageArticle h3,
.pageArticle h4,
.pageArticle h5 {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px dotted;
    display: inline-block;
    min-width: 210px;
    color: #219cd7;
}

.pageArticle b {
    font-weight: 600;
    color: #4c4c4c;
}

.pageArticle a {
    color: #4c4c4c;
}

.pageArticle ul {
    text-align: left;
    line-height: 10px;
    display: inline-block;
    margin: 10px 0;
    margin-bottom: 30px;
}
.pageArticle ul li {
    margin: 0;
}

/*! Contact us Form =====>>> */

#contactUs{
    float: left;
    width: 100%;
}
/*#contactUs .contactForm{
    width: 620px;

}*/
#contactUs .form-horizontal{}
#contactUs .form-horizontal .fieldset{}
#contactUs .form-horizontal .form-group{
    margin: 0;
    margin-bottom: 20px;
}
#contactUs .form-horizontal .form-group label{
    float: left;
    width: 20%;
    text-align: left;
    font-weight: 400;
}
#contactUs .form-horizontal .form-group input[type="text"],
#contactUs .form-horizontal .form-group textarea{
    float: left;
    width: 80%;
    border: 1px solid #A3CAEB;
    border-radius: 3px;
    box-shadow: none;
    background: #FDFEFF;
    font-weight: 300;
    color: #8A8A8A;
}
#contactUs .form-horizontal .form-group input[type="email"]{}

/*! Contact us Details =====>>> */
/*#contactUs .contactDetails{
    width: 330px;
    margin-left: 60px;
}*/
#contactUs .contactDetails .row{
    margin: 0;
}
#contactUs .contactDetails .row span{
    margin-bottom: 20px;
}
#contactUs .contactDetails .row span h6{
    margin: 0;
    padding: 0;
    font-size: 21px;
    margin-bottom: 10px;
}
#contactUs .contactDetails .row span p{
    margin: 0;
    font-weight: 300;
}

#contactUs .pull-left p {
    color: #4c4c4c;
}

.bootstrap-validator-form .help-block {
    margin-bottom: 0;
    float: right;
    font-size: 12px;
}

.navbar-toggle .icon-bar {
  background-color: #64a7eb;
}

.navbar-toggle {
  margin-right: 0;
  margin-top: 25px;
}

.footer-nav-mobile { display: none; }

.navbar-collapse.nav-items-wrapper.collapse.in{
  background-color: #64a7eb;
}

.navbar-collapse.in {
  overflow-y: unset;
}

.flexslider .desktop-banner-rmz {
  display: block;
}

.flexslider .mobile-banner-rmz {
  display: none;
}


@media only screen and (max-width : 1300px) {
    #pageContent .contentArea::after { right: -34px; width: 34px; }
}

@media only screen and (max-width : 1200px) {
    header::before { width: 970px; }
    .wrapper { max-width: 970px; }
    footer .footNav a { margin: 0 8px; }
    #pageContent .contentArea::after { right: -34px; width: 34px; }
    #pageContent .contentArea::after { right: -1px; width: 3px; }
    #slider h1{font-size: 70px;}
    #slider h2{font-size: 30px;}
}

@media only screen and (max-width : 991px) {
    header::before { width: 750px; }
    .wrapper { max-width: 750px; }
    .footer-nav-desktop { display: none; }
    .footer-nav-mobile { display: block; }
    .footNav { margin-bottom: 15px; }
    footer .webCopyRight { margin-bottom: 20px; }
    footer .copyRights { margin-bottom: 20px; }
    #contactUs .form-horizontal .form-group label { width: 30%; }
    #contactUs .form-horizontal .form-group input[type="text"], #contactUs .form-horizontal .form-group textarea { width: 70%; }
    #pageContent .contentArea::after { right: 0; }
}

@media only screen and (max-width : 767px) {
    header::before { width: 100%; }
    #services .servicesMenu li { width: 50%; margin-bottom: 20px; height: 165px; }
    #services .servicesMenu li:last-child { width: 100%; }
    #pageContent .servicesMenu { margin: -30px 0 0; }
    #pageContent .servicesMenu li a .roundIcon { height: 60px; width: 60px; }
    #pageContent .servicesMenu li a .serviceLabel { font-size: 14px; }
    .contactDetails { margin-top: 20px; }
    .wrapper { padding: 0 15px; }
    #main-nav > li {
      width: 100%;
    }
    .collapse.in ul { width: 100%; float: none; }
    header .navigation > #main-nav ul li a { line-height: 1; margin-left: 0; color: #1f68b7;}
    header .navigation > #main-nav ul li { float: left; line-height: 3.5; width: 100%; }
    .main-title h1 { font-size: 36px; }

@media only screen and (max-width : 600px) {
    #pageContent .servicesMenu li { height: 150px; width: 33%; }
    #pageContent .servicesMenu li:last-child { width: 100%; }
    #breadcumb { top: 460px; }
}

@media only screen and (max-width : 495px) {
    .copyRights { width: 100%; text-align: center !important; }
    .webCopyRight { width: 100%; text-align: center; }
}

@media only screen and (max-width : 480px) {
    #slider .slideContents { margin: 80px auto auto; }
    
    #slider h1{font-size: 50px;}
    #slider h2{font-size: 25px;}
    #slider .slideContents p { font-size: 16px; padding-right: 0;}
    #services .servicesMenu li { width: 100%; margin-bottom: 20px; }
    footer .footNav a { margin: 0px 3px; font-size: 10px; }
    #pageContent .servicesMenu li a .roundIcon { height: 40px; width: 40px; }
    #pageContent .servicesMenu li a .roundIcon img { width: 55%; }
    #pageContent .servicesMenu li a .serviceLabel { font-size: 12px; }
    #pageContent .servicesMenu li { width: 33%; }
    #pageContent .servicesMenu li:last-child { width: 100%; }
    #pageContent .servicesMenu { margin: -20px 0 0; }
    #breadcumb li a { font-size: 9px; margin: 0 2px; }
    #breadcumb { padding: 0 10px 0 0; }
    .flexslider .desktop-banner-rmz { display: none; }
    .flexslider .mobile-banner-rmz { display: block; width: 100%; }
    
}


@media only screen and (max-width : 420px) {
    #slider .slideContents p { font-size: 14px; padding-right: 0;}
}

@media only screen and (max-width : 380px) {
    #slider .slideContents p { font-size: 13px; padding-right: 0;}
}