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

/* HEADER & TELEPHONE NUMBERS  */
#header {position: relative;@import url('file:///C:\Users\dimitrisp\Desktop\FRONT END WEB DEVELOPMENT\A Ebay Store Design\14 UK Mobility\LIVE\css\header.css');font-family:'open sans';}
.header-text-container i {color: #025597;font-size: 26px;margin-right: 0px;vertical-align: middle;}
.header-text-container.contact-details, .header-text-container.contact-details p {text-align: right;}
.header-text-container  .help {color:#000;  font-size:14px;font-weight: normal; margin:0;}
.header-text-container  a.tel  {font-size:22px;font-weight:bold;color: #025597;}
.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{position:relative;margin-top:0;display: block!important;}
.search-form input{border:medium none;color:#000;font-size:15px!important;height: 40px;outline:medium none;padding: 0 45px 0 15px;font-family:'open sans';background:transparent;border: 2px solid #ccc;}
.search-button{background:transparent;border:medium none;color:#fff;cursor:pointer;height: 40px;width: 40px;outline:medium none;position: absolute;top: 0;right: 0;background: #65b343;}
.search-button > i{font-size:14px}
 
/* NAVBAR */
.nav-link{/* color:#fff!important; */font-family:'open sans';/* font-size:14px; *//* font-weight:700; */padding: 14px 11px;text-align:left;}
#nav-bar-container{color:#fff;font-weight:700;margin:0 auto;padding:0; background-color: #65b343;}
#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 > *{font-size:16px;text-align:center}
#nav-bar ul,#navbar li,#navbar ul li {margin: 0;padding: 0;list-style-type: none;}
#nav-bar > a{font-size:15px;padding:15px 21px;border-right:0;letter-spacing:.3px;font-family:'open sans'!important;border-right:1px solid #333;border-left:1px solid #999;position: relative;}
#nav-bar > a:hover{color:#666;background:#333!important}
 
/* TOGGLE BUTTONS */
.toggle-menu-btn { background:#174a7c; width:40px;    display:block; padding:7px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin:2px 10px;}
.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;position: absolute;top: 0px;font-size: 17px;right: auto;text-align: center;width: 100%;height: 100%;}
.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) {
.header-logo img {max-width:100%;}
#nav-bar{padding:0!important}
#nav-bar > a,
#nav-bar ul > li > a{display:block;width:100%;padding:10px;border-bottom: 1px solid #86bb3f;border-left:none;border-right:none;background: #65b343;text-align: center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family: open sans;color: #fff;}
#nav-bar div.submenu ul li a {background: #68c8ff;color:#000;font-size: 15px;border-top: 1px solid #a6d4f3;border-bottom: 1px solid #6eafda;color:#fff;}
.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}
#nav-bar .header-search .search-form {margin:10px;}
#header .header-search,#header .header-add-info{display:block!important;width:100%!important;text-align:center}
#header .header-search{border:none}
#header .header-add-info {margin:0!important;}
#header .text-container{margin-top:0!important;}
.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: #65b343;}
.nav-bar-mobile{display:block}
.nav-bar-mobile label{width:100%;display:block;cursor:pointer;height: 100%;line-height: 50px;}
#nav-bar{overflow:hidden;max-height:0;-webkit-transition:all .3s ease}
#menu-toggle:checked + #nav-bar{max-height: 750px;}
#header .header-banner {float:none; margin:10px 0!important;display:block; width:100%; text-align:center;}
#header .header-add-info,  
#header .header-search{margin:20px 0;}
}

/**** TARGET ELEMENTS FOR TABLET VIEW */
@media screen and (max-width: 1023px)  {
.header-logo {width:100%; text-align:center;}
#header  .header-search,
#header  .header-add-info {
    float: left;
}
#header  .header-first {margin-bottom:15px;}
#header  .header-add-info {float:right;text-align: right;}
#header .header-add-info {margin: 30px 0;}
#header .header-banner {float:left; margin: 15px 10px 15px 0;}
#nav-bar > a {padding: 20px 15px;border: 0;font-size: 14px;}.header-search {
    margin: 10px 0;
}
}
 

/***********************************
            TABLET VIEW
************************************/
@media screen and (min-width: 768px) {

/* LEVEL 1 */
#nav-bar > ul {display: table;vertical-align: middle;width: 100%;}
#nav-bar > ul > li {display: table-cell;vertical-align: middle; position:relative;}
#nav-bar > ul > li > a {display: table-cell;color: #fff;font-family: 'open sans';display: block;float: none!important;font-size: 16px;text-align: center;}
#nav-bar > ul > li > a span {background: url(../img/nav-arrow.jpg) center no-repeat;width: 30px;height: 10px;display: inline-block;}
#nav-bar > ul > li a:hover {text-decoration:none;}
#nav-bar > ul > li a.prods:hover {background:#68c8ff;} 
/*** LEVEL 2 *****/
#nav-bar div.submenu {    position: absolute;left: auto;display: none;width: 250px;top: 46px;z-index: 123456789;background: #68c8ff;width: 100%;min-width: 250px;}
#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; text-decoration:none;border-top: 1px solid #97d3f5;color:#fff;border-bottom: 1px solid #5ab1e3;padding: 10px 20px;font-size: 15px;-webkit-transition:background-color linear 1s;-moz-transition:background-color linear 1s;transition:background-color linear 1s;}
#nav-bar div.submenu ul li a:hover {background:#55a2ce}


.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}
.header-add-info > *{vertical-align:middle}
.header-logo img{width:100%;max-width:250px}
#header .header-search{margin:40px 0}
.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;}
#nav-bar .header-search,#nav-bar .search-form, nav-link {display:table-cell;vertical-align:middle;text-align:center;}
.search-form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
}
 
.text-container span {max-width: 170px;display: inline-block;word-wrap: break-word;}
/***********************************
     HORIZONTAL TABLET + PC VIEW
************************************/

/* FLOAT ELEMENTS ON LARGE TABLET VIEW */
@media screen and (min-width: 1024px)  {
#header{height:126px;background:#fff;border-top:0;margin:0 auto}
.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;margin-right: 0;padding:10px 0;position:relative;text-align:left;width:auto;}
.header-text-container i.fa-phone{left:20px;top:42px}
.right{float:right}
#nav-bar {padding-left:0; padding-right:0;}
#header > .container {width:990px;}
#header .header-first {margin-bottom:0}
#nav-bar-container > .container {width:990px;} /* SAFARI FIX */
.text-container{display:inline-block;text-align:right;max-width: 200px;}
 

/* AS THE HEADER BECOMES QUITE TRICKY WE CAN EITHER USE MARGINS OR CREATE FLEX */
.header-logo {margin-right: 43px;}
.header-banner {margin-right:10px!important;}
.header-add-info {text-align: right; /* AS THERE IS NO JAVASCRIPT FLOAR THIS TO RIGHT */float: right;margin-top: 20px;}
}

/* HEADER CONTACT DETAILS OVERWRITES (USE THESE SIZES ONLY WHEN WE HAVE FULL WIDTH NAVBAR */
.header-text-container a.tel {font-size:26px;}
.text-container{display:inline-block;text-align:right;max-width: 430px;}
.text-container span {max-width: 230px;display: inline-block;word-wrap: break-word;color: #3477bd;font-size: 13px;font-weight: bold;margin: 5px 0 0;}
 
/* FLEX STYLES HERE (IE10+) */

/***************************************************
    OVERWRITE RULES TO INCLUDE SEARCH BAR IN THE BOTTOM  
****************************************************/
 
.header-text-container.contact-details {margin-left: 0;}
.header-banner {color:#fff;background-color:#174a7c;padding: 0 15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-right:10px;border: 6px solid #fff;}
.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;}
.search-form input {width: 100%;box-sizing: border-box;}

@media all and (min-width:768px) and (max-width:1023px) {#nav-bar-container > .container {padding:0 15px;} #nav-bar > a {}}
@media all and (min-width:768px) {.header-search {display: table-cell;vertical-align: middle;}#nav-bar .header-search .search-form {}

#nav-bar > ul > li > a.first-child {text-align: left;}
#nav-bar > ul > li > a.last-child {text-align: right;}
}