/* DESIGN BY */
#design-by {color: #a6a6a6;font-size: 12px; margin: 0;padding: 0 !important;right: 0; padding: 15px 0 0;}

/* HEADER TOP  */
.header-contact-details {background-color: #2c2c2c;color: #fff;font-size: 13px;text-transform: uppercase;width: 100%;}
.header-contact-details > div {margin: 0 auto;max-width: 990px;}
.header-contact-details > div > div {box-sizing: border-box; display: inline-block;padding: 7px;vertical-align: middle;}
.header-contact-details > div > div.telephone-number {background: #cc0c13 none repeat scroll 0 0;}
.header-contact-details > div > div.telephone-number .fa {margin-right: 5px;}

/* HEADER & TELEPHONE NUMBERS  */
#header {position: relative;font-family:'Lato';-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width: 100%;}
.header-text-container i {color:#4d4d4d;font-size: 26px;margin-right: 0px;vertical-align: middle;}
.header-text-container.contact-details, .header-text-container.contact-details p {text-align: right; margin:0}
.header-text-container  .help {color:#000;  font-size:14px;font-weight: normal;}
.header-text-container  a.tel  {font-size:22px; font-weight:bold;color: #000;}
.header-text-container  .opening-times {color:#fff;}
.header-text-container.contact-details {margin: 0;padding: 0;}
.phone-number { font-size: 25px;font-weight: bold;}
 
/* HEADER SEARCH FORM */
.search-form{background: #ededed;height:35px;position:relative;position: relative;margin: 30px auto;max-width: 380px;}
.search-form input{border:medium none;color:#000;font-size:15px!important;height:  35px;outline:medium none;font-family:'Lato';background: #e5e5e5;position: relative;width: 100%;padding: 0 45px 0 15px;box-sizing: border-box;}
.search-button{background: #ffb806;border:medium none;color: #fff;cursor:pointer;height:35px;width:35px;outline:medium none;position: absolute;top: 0;right: 0;}
.search-button > i{font-size:14px}
 
/* NAVBAR */
.nav-link{color:#fff!important;font-size:14px;font-weight:700;padding: 14px 11px;text-align:left;text-decoration:none!important;font-family: Lato;}
#nav-bar-container{color:#fff;/* font-weight:700; */margin:0 auto;padding:0;font-family: Lato;background-color: #326270;}
#nav-bar{margin:0 auto;max-width:990px;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#nav-bar ul,#navbar li,#navbar ul li {margin: 0;padding: 0;list-style-type: none;}
 
/* TOGGLE BUTTONS */
.toggle-menu-btn {background: #333;width:40px;display:block;padding:7px;-webkit-box-sizing:border-box;-mozbox-sizing:border-box;box-sizing:border-box;margin:2px 5px;}
.toggle-menu-btn > span {display:block; margin:3px 5px; height:3px; background:#fff; vertical-align:middle;}
.nav-bar-mobile {display:none;text-align: center;color: #fff;text-transform: uppercase;position: absolute;top: 0;font-size: 17px;right: auto;text-align: center;width: 100%;height: 50px;line-height: 50px;}
.toggle-menu-btn-cont {display:none;}

/* THE TICK BOX SHOULD ALWAYS BE INVISIBLE NO MATTER THE SCREEN RESOLUTION */
#menu-toggle {display: none;}

/***********************************
            MOBILE VIEW
************************************/
@media screen and (max-width: 767px) {
#nav-bar{padding:0!important}
#nav-bar > a,
#nav-bar ul > li > a{display:block;width:100%;padding:10px;border-bottom: 1px solid #203d46;border-left:none;border-right:none;background: #326270;text-align: center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family: Lato;}
#nav-bar div.submenu ul li a {background: #ccc;color:#000;font-size: 12px;border-bottom: 1px solid #eee;color:#fff}
#nav-bar .header-search {padding:10px;}
.header-text-container.contact-details{margin:0 auto!important}
.header-text-container.contact-details,.header-text-container.contact-details p{text-align:center}
.header-text-container{display:block!important}
.search-form {width:100%}
#header .header-search,#header .header-add-info{display:block!important;width:100%!important;text-align:center}
#header .header-search{border:none}
#header .header-search .search-form {display:block;}
#header .text-container{margin-top:20px}
#header .header-banner {float: none;margin: 10px 0!important;display: block;width: 100%;text-align: center;}
.header-logo img {margin:0; max-width:100%;}
.toggle-menu-btn-cont{display:block;width:100%;position:relative;cursor:pointer;padding:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background: #326270;}
.nav-bar-mobile{display:block}
.nav-bar-mobile label{width:100%;display:block;cursor:pointer}
#nav-bar{overflow:hidden;max-height:0;-webkit-transition:all .3s ease}
#menu-toggle:checked + #nav-bar{max-height: 750px;}
}
 
/***********************************
            TABLET VIEW
************************************/
@media screen and (min-width: 768px) {
/* LEVEL 1 */
#nav-bar > ul {width: 100%;display: block;margin: 0 auto;text-align: center;}
#nav-bar > ul > li {display: inline-block;}
#nav-bar > ul > li > a {display: block;color: #fff;font-family: 'Lato';text-align: center;font-size: 16px;padding: 20px;font-weight: bold;}
#nav-bar > ul > li > a.first-child {border-left:0;}
#nav-bar > ul > li > a.last-child {border-right:0;}
/*** LEVEL 2 *****/
#nav-bar div.submenu {position:absolute;left:auto;display: none;width: 250px;top: 46px;z-index: 123456789;background: #333;}
#nav-bar div.submenu ul {list-style: none;text-align: left;padding: 0;}
#nav-bar > ul li:hover div.submenu {display:block!important;}
#nav-bar div.submenu ul li {display:block;float:none;}
#nav-bar div.submenu ul li a {display:block;border-bottom: 1px solid #000;border-top: 1px solid #666;padding: 10px 20px;font-size: 13px;-webkit-transition:background-color linear 1s;-moz-transition:background-color linear 1s;transition:background-color linear 1s;color:#fff}

.padas{width:100%;box-sizing:border-box}
.header-text-container{display:inline-block;float:none;margin:0 5px;padding:10px;position:relative;text-align:center;width:auto}
.header-add-info{margin:0;text-align: right;}
.header-add-info > *{vertical-align:middle}
.header-logo img{/* width:100%; *//* max-width:  250px; */}
.text-container{display:inline-block;text-align:right}
#nav-bar{box-sizing:border-box;/* display:table; */float:none;margin:0 auto;table-layout:auto;width:100%;position: relative;width: 100%;}
#nav-bar .header-search,#nav-bar .search-form, nav-link {display:table-cell;vertical-align:middle;text-align:center;}
.search-form input{width: 100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
}
 
@media screen and (max-width: 989px)  {
/* ALWAYS USE -1PX AFTER WIDTH CONTAINER I.E. IF 960PX THEN IT SHOULD BE 959PX TO PREVENT HEADER BREAKINGS */
.header-logo {width:100%; text-align:center;}
#header  .header-search,
#header  .header-add-info {display:inline-block;width:auto;}
#header  .header-search {float:left; margin-top:30px;}
#header  .header-add-info {float:right;text-align: right;}
.header-add-info {margin: 20px auto !important;text-align: right !important;}
#header .header-banner {float: left;margin: 15px 10px 15px 0;}
}

/***********************************
     HORIZONTAL TABLET + PC VIEW
************************************/

/* HEADER BANNERS */
.header-banner {color:#fff;background-color:#174a7c;padding: 0 15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width: 240px;margin-right:10px;border: 5px solid;}
.header-banner > * {display:inline-block; vertical-align:middle}
.header-banner h2 {font-weight:normal;}
.header-banner i {margin-right: 5px;font-size:30px;}
.header-banner span.msg {font-size:14px; display:block;}

/* FLOAT ELEMENTS ON LARGE TABLET VIEW */
@media screen and (min-width: 990px)  {
#nav-bar-container > .container {padding:0}
#header{height: 116px;background: #326270;border-top:0;margin:0 auto;position: relative;}
.header-logo img{/* margin-right: 0; *//* position: absolute; *//* top: -50px; *//* left: 50%; */margin: -51px 0 0 0;}
.header-first{display:table;float:none;margin:0 auto;table-layout:auto;width:100%}
.header-first > *{display: table-cell;vertical-align:middle;}
.header-logo{float:none;list-style-type:none;/* padding:10px 0; */position:relative;text-align: center;width: 100%;}
.header-text-container i.fa-phone{left:20px;top:42px}
.right{float:right}
.text-container{display:inline-block;text-align:right;max-width: 200px;}}