@charset "utf-8";
/* CSS Document - Backyard Bathrooms */
body, html {height: 100%; width: 100%;}
body {background: #fff; font-family:Century Gothic,arial,sans-serif; font-size: 12px; }

.c5wrapper {}
.c5wrapper .wrapper {min-height: 100%;}

.c5wrapper .top-head{background:#fff}
.c5wrapper .top-bg{background:#4dc6de; height:10px; margin-bottom:10px}
.c5wrapper .top-contact{color:#4dc6de; text-align:right }
.c5wrapper .top-contact p{display:block; font-size:15px; margin:0; line-height:30px}
.c5wrapper .top-contact span{font-weight:bold; font-size:48px}

.c5wrapper header { background: #f2f2f2; border:1px solid #ddd; border-right: none; border-left: none;}
.c5wrapper .nav {}
.c5wrapper .nav .mob-nav {display: none; background:#4dc6de; padding: 4px; font-size: 24px; letter-spacing: -1px; color: #fff; line-height: 38px; cursor: pointer;}
.c5wrapper .nav .mob-nav .icon-menu {background: rgba(255,255,255,0.18) url(/themes/theme_backyardbathrooms_theme//img/icon-menu.png) no-repeat center center; height: 38px; width: 38px; display: inline-block;position: absolute; left:4px ;top: 4px;}
.c5wrapper .nav ul {display: block; font-size: 0; float:right; margin-top:25px}
.c5wrapper .nav ul li {display: inline-block; font-size: 18px; font-weight:bold; margin: 0; position: relative;}
.c5wrapper .nav ul li a {display: block; padding: 20px 18px 50px 18px; color:#000; font-weight: bold; text-align: center;}
.c5wrapper .nav ul li a:hover, .c5wrapper .nav ul li .nav-selected {background-image: url(/themes/theme_backyardbathrooms_theme//img/icon-arrowb.png); background-color:#4dc6de; color:#fff;background-repeat:no-repeat;  background-position: 50% 85%;
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;} 


/* --- Submenu -- */
.c5wrapper .nav ul li ul {display: block; z-index: -1111; height: 0; overflow: hidden; position: absolute; left:0; top: 100%; width: 220px; background: #fafafa; border: 1px solid #ddd; border-bottom: none; text-align: left; box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.8); opacity: 0; margin: 0; padding: 0;
	-webkit-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
    -moz-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
    -ms-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
     -o-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
        transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); /* custom */
}
.c5wrapper .nav ul li ul li {display: block;}
.c5wrapper .nav ul li ul a {border-bottom: 1px solid #ddd; border-right: none; text-align: left; background-image: none; padding: 15px 18px 15px 18px}
.c5wrapper .nav ul li ul a:hover, .c5wrapper .nav ul li ul .nav-selected {background-image: none;}
.c5wrapper .nav ul li:hover ul { top: 100%; opacity: 1; z-index: 100; height: auto;
	-webkit-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
    -moz-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
    -ms-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
     -o-transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); 
        transition: all 500ms cubic-bezier(0.810, 0.010, 0.455, 0.945); /* custom */
}

/* Middle Section */
.c5wrapper .theme-middle-bg{padding-top:35px;
-webkit-box-shadow: inset 0px 20px 36px 0px rgba(218,218,218,1);
   -moz-box-shadow: inset 0px 20px 36px 0px rgba(218,218,218,1);
        box-shadow: inset 0px 20px 36px 0px rgba(218,218,218,1);
}
.c5wrapper .theme-middle {padding-bottom: 100px; min-height:650px;}
.c5wrapper .highlights{background:#626262;  color:#fff; width:640px; display:table-cell; border-right:2px solid #fff; border-top:2px solid #fff }
.c5wrapper .highlights h2{font-weight:bold; font-size:22px; line-height:32px; text-align:center; vertical-align:middle; min-height:80px; padding:24px 10px; margin-bottom:0px;}
.c5wrapper .enquiry{background:#71db00; margin:1px; color:#fff; width:300px; position:relative; display:table-cell; vertical-align:middle;border-top:2px solid #fff; text-align: center;
  -webkit-transition: background 0.5s ease-out;
  -moz-transition: background 0.5s ease-out;
  -o-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;}
.c5wrapper .enquiry a {display: inline-block; padding-left: 60px;}
.c5wrapper .enquiry:hover{background-color: #4DC6DE;}
.c5wrapper .enquiry a h2{ text-align:left; font-weight:bold; font-size:22px; color:#fff; line-height: 50px; margin-bottom:0px;}
.c5wrapper .enquiry img{float: left; margin-left:-60px;}

.c5wrapper .services{margin:20px 0 90px; text-align:center}
.c5wrapper .services h3{margin-top:20px}
.c5wrapper .services p{font-weight:bold;font-size:14px}
.c5wrapper .services img { -webkit-transition: all .2s ease-in-out; }
.services img:hover { -webkit-transform: scale(1.1); }

.c5wrapper .thumb-right {margin:0 0 10px 0;}
.c5wrapper .hidden-mob {display: inline-block;}

/* Content List Styles */
.c5wrapper .theme-middle ul {list-style:square; list-style-position:inside; font:normal 16px/28px Century Gothic, Arial, Helvetica, sans-serif; margin-bottom:12px; color:#333333; padding-left: 30px;
text-indent: -16px;}
.c5wrapper .theme-middle ul li, ol li {margin-bottom:12px;}

/* Footer */
.c5wrapper .footer-wrapper {height: 80px; margin-top: -80px;}
.c5wrapper footer span{line-height:50px}

/* Form Styles */
.c5wrapper label{margin-top:15px; font:bold 16px/28px Century Gothic,arial,sans-serif; color:#333333;}
.c5wrapper input,select,textarea{margin:5px 0}
.c5wrapper input[type="text"], select, input[type="email"], input[type="tel"], textarea{width:100%; padding:7px 10px; color:#666; font-size:14px; -webkit-border-radius: 3px; border-radius: 3px; border:1px solid #ccc; -webkit-box-shadow:inset 0px 1px 5px 1px #ccc); /* box-shadow:inset 0px 1px 5px 1px #ccc; */}
.c5wrapper select{padding:6px 10px;}
.c5wrapper .ccm-input-date{width:100%; padding:7px 7px; color:#666; font-size:14px; -webkit-border-radius: 3px; border-radius: 3px; border:1px solid #ccc; -webkit-box-shadow:inset 0px 1px 5px 1px #ccc);}
.c5wrapper input[type="submit"]{background-color:#4dc6de; font-size:22px; color: #fff; padding: 15px 50px; border:none; border-radius:5px;}
.c5wrapper input[type="submit"]:hover{background-color:#2092AA;}
.c5wrapper .ccm-captcha-image {margin-top:5px;}
.c5wrapper .checkboxPair label{font-weight:normal;}
.c5wrapper .field field-text{padding-top:20px !important;}
.c5wrapper .field field-email{padding-top:20px !important;}
.c5wrapper .field field-telephone{padding-top:20px !important;}

/* Button */
.c5wrapper .btn-readmore{background: #71db00;
border-radius:-webkit-border-radius: 5px; border-radius: 5px;border:0; font-size:18px; font-family:Century Gothic, Arial, Helvetica, sans-serif; color:#fff; padding:7px 20px 9px 20px ; /*text-shadow: 1px 1px 0px #666;*/ margin-bottom:50px; margin-top:20px; display:block; text-wrap:normal; white-space:normal;
  -webkit-transition: background 0.5s ease-out;
  -moz-transition: background 0.5s ease-out;
  -o-transition: background 0.5s ease-out;
  transition: background 0.5s ease-out;
}
.c5wrapper .btn-readmore:hover{background-color: #4DC6DE; color:#FFFFFF;}

/* Concrete5 Hacks */
.ccm-ui input, .ccm-ui textarea, .ccm-ui select, .ccm-ui .uneditable-input {height: 28px;}
.theme-default .nivoSlider {box-shadow: none; margin-bottom:0px;}
.chzn-container-multi .chzn-choices .search-field input {height: 28px;}

/* =================================================================================
--------------------------    Media queries      -----------------------------------
================================================================================= */


/* ------------ Desktop, Laptop's and Tablets ----------------- */
@media (max-width:1023px){
    .c5wrapper .nav ul li a {padding:20px 14px 50px 14px;}

}
/* ---------------- Tablets and mobiles ---------- */
@media (max-width: 959px) {
}   
/* ---------------- Tablets and mobiles ---------- */
@media (max-width: 767px) {
    .c5wrapper .top-head {padding: 46px 0 20px 0;}
    .c5wrapper header, .c5wrapper .top-contact {text-align: center;}
    .c5wrapper .top-bg {display: none;}
    .c5wrapper .top-contact span {font-size: 38px;}
    .c5wrapper .nav {position: fixed; top: 0; left: 0; width: 100%; z-index: 3000; border-bottom: 1px #FFFFFF solid;}
    .c5wrapper .nav .mob-nav {display: block;}
    .c5wrapper .nav ul {display: none; margin: 0; float: none; background: #4dc6de; margin-top:47px;}
    .c5wrapper .nav ul li {display: block; text-align: center;}
    .c5wrapper .nav ul li a {padding: 16px; color: #fff; background-image: none; display: block; text-align: center;}
    .c5wrapper .nav ul li a:hover {background: #2CB3CE;}
    .c5wrapper .nav ul li ul {position: static; display: block; width:auto; top: auto; left: auto; background: #2CB3CE; border: none !important;}
    .c5wrapper .nav ul li ul li {border: none;}
    .c5wrapper .nav ul li ul li a {border: none !important; border-bottom:1px solid #2DA2B9 !important;}
    .c5wrapper .nav ul li ul li a:hover {background: #6BD8EE;}
    .c5wrapper .services .col-sm-6 {margin-bottom: 40px;}
    .c5wrapper .services p {color: #4dc6de;}
    .c5wrapper .thumb-right {float: none; text-align: center; margin:0 0 15px 0;}  
    .c5wrapper .footer-wrapper, .footer-wrapper .text-right {text-align: center;}  
    .c5wrapper .highlights, .enquiry {display: block;text-align: center; width: auto; min-height: 80px; border: none; margin: 2px 0 0;}
    .c5wrapper .highlights {background: #4dc6de;}
    .c5wrapper .enquiry {padding: 15px 0;}
    .c5wrapper footer span {display: block;}
    .c5wrapper .hidden-mob {display: none;}
}
/* ---------------- mobiles ---------- */
@media (max-width: 599px) {
}
/* ---------------- mobiles ---------- */
@media (max-width: 479px) {

}