html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:var(--main);text-shadow:none;color:#fff;}::selection{background:var(--main);text-shadow:none;color:var(--accent);}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
:root {
  --main: #EEE7BA;
  --yellow: #FFCC00;
  --orange: #F59C00;
  --red: #B70E0C;
  --white: #ffffff;
  --offwhite: #fafafa;
  --black: #1a1a1a;
  --dark: #3C3C3B;

}

body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--yellow) var(--dark);
}
body::-webkit-scrollbar-track {
  background: var(--dark);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--yellow);
  border-radius: 6px;
  border: 3px solid var(--yellow);
}





html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
/* body, html{height: 100%; width: 100%;} Caused sticky problems. Whya was it there??*/

a{-webkit-transition:all 0.3 ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease; text-decoration: none; color: var(--red);}
a:hover{color: var(--dark);}
a img{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
.smoothie{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
p{margin-top: 0;}
img{max-width: 100%;}

h1,h2,h3,h4,h5,h6{padding: 0; margin-top: 0; font-family: 'Oswald', sans-serif; text-transform: uppercase;}
body{font-family: 'Aleo', serif;}
.editor{position: fixed; top: 0; left: 0; background: var(--red); padding: 0px 10px; z-index: 100000;font-family: 'Oswald', sans-serif; text-transform: uppercase; line-height: 34px;}
.editor a{color: #fff;}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.header{width: 100%; position: relative; background: var(--dark); padding: 20px 20px 20px 30px;}
.innerheader{width: 100%; max-width: 1200px; margin: 0 auto; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap;}

.logo{position: relative; width: 140px; z-index: 1001;}
.notlogo{width: calc(100% - 160px); display: flex; justify-content: flex-end; flex-direction: column;}
.logo img{width: 100%; position: absolute;}

.bordered{border-top:1px solid var(--dark);
    border-bottom:1px solid var(--dark); display: inline-block;}
.bordered i{vertical-align: top; margin-top: 7px; font-size: 30px; margin-right: 10px;}
.pageheadtitle i{vertical-align: top; margin-top: 7px; font-size: 30px; margin-right: 10px;}
.primarynav{ width: 100%; display: flex; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 20px;}
.primarynav {}
.primarynav a{font-family: 'Oswald', sans-serif; color: var(--main); font-size: 20px; text-transform: uppercase; margin-left: 10px;}
.primarynav a.subnav{font-size: 14px;}
.primarynav a.current{color: var(--orange);}
.primarynav a:hover{color: var(--orange);}


.menu{background-color:var(--dark);border:none;cursor:pointer;display:flex;padding:0}.line{fill:none;stroke:var(--white);stroke-width:6;transition:stroke-dasharray 600ms cubic-bezier(.4,0,.2,1),stroke-dashoffset 600ms cubic-bezier(.4,0,.2,1)}.line1{stroke-dasharray:60 207;stroke-width:6}.line2{stroke-dasharray:60 60;stroke-width:6}.line3{stroke-dasharray:60 207;stroke-width:6}.opened .line1{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6}.opened .line2{stroke-dasharray:1 60;stroke-dashoffset:-30;stroke-width:6}.opened .line3{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6}

.searchnav{display: none;}

.secnav{background: var(--yellow); text-align: right; width: 100%; padding: 0 20px; position: relative; z-index: 1000;}

.innersecnav{width: 100%; max-width: 1200px; margin: 0 auto;}

.secondarynav{display: flex; justify-content: flex-end; flex-wrap: wrap;}
.secondarynav a.last{padding-right: 0;}
.secondarynav a{ font-size: 14px; color: var(--dark); font-weight: 700; position: relative; z-index: 10001; padding: 0px 12px; display: block; line-height: 46px;font-family: 'Oswald', sans-serif; text-transform: uppercase}
.secondarynav a.current{color: var(--dark); background: rgba(25,25,25,0.1);}
.secondarynav a:hover{color: var(--main);}


.search_social{width: 100%; text-align: right;}

.social-circle{display: inline-block; vertical-align: top;}
.social-circle [class*="fa fa-"] {
    width: 31px;
    height: 31px;
    color: var(--dark);
    background-color: var(--orange);
    border-radius: 2px;
    display: inline-block;
    line-height: 31px;
    margin: 0 0 0 3px;;
    font-size: 15px;
    text-align: center;
}

.social-circle [class*="fab fa-"] {
    width: 31px;
    height: 31px;
    color: var(--dark);
    background-color: var(--orange);
    border-radius: 2px;
    display: inline-block;
    line-height: 31px;
    margin: 0 0 0 3px;;
    font-size: 15px;
    text-align: center;
}
.fa-facebook:hover { 
    background-color: #3B5A9B; color: #fff;
}
.fa-facebook-f:hover { 
    background-color: #3B5A9B; color: #fff;
}
.fa-twitter:hover { 
    background-color: #4FC6F8; color: #fff;
}

.content{width: 100%; height: auto; background: var(--main); padding: 0 20px;  }
.innercontent{width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 0;  min-height: 100vh;}
/*.homecontent{background: url(../img/usage.jpg); background-size: cover;}
.homecontent .headtext{color: var(--dark); color: #fff;}
.homecontent .headtext .bordered{border-top:1px solid #fff; border-bottom:1px solid #fff; }*/




.isnlogo{background: url(../img/weelogo.png) no-repeat; transition:all 0.4s ease;}
.isnfree{position: relative; background: none;}



.secnavcover{width: 100%; height: 100%; background: rgba(26,26,26,0.5); position: absolute; top: 0; left: 0;
    -webkit-transition: all 0.25s;
	transition: all 0.25s;
    -webkit-transform: translate3d(0,-50px,0);
	transform: translate3d(0,-50px,0);
    z-index: 1000002;
}
.secondarynav li:hover .secnavcover{
   background: rgba(26,26,26,1); 
-webkit-transform: translate3d(0,-46px,0);
	transform: translate3d(0,-46px,0);
}


.boxes{width: 100%; height: auto; text-align: left; height: auto; position: relative; overflow: hidden; margin: 0;
    }
.holder{width: 100%; text-align: left;font-family: font-family: 'Aleo', serif; padding-top: 0px;}

.eachbox{ overflow: hidden; display: inline-block; vertical-align: top; border-radius: 10px;}
.largebox{width: 48%; height: auto; min-height: 400px; min-width: 400px;}
.twobox{width: 24.0%; height: 400px; padding: 0; min-width: 200px; position: relative;}

.headtext p:first-of-type{font-size: 22px;}
.headtext p{font-size: 16px;}
.hometext1{font-size: 26px;}
.hometext2{font-size: 20px;}

.smallbox{width: 100%; height: 48%; background: #fff; overflow: hidden; }
.fullbox{width: 100%; height: 100%; margin-bottom: 0; background: #fff; overflow: hidden; position: relative;}

.smallbox1{ position: absolute; top: 0; left: 0;}
.smallbox2{ position: absolute; bottom: 0; left: 0;}

.headtext{font-size: 18px; padding: 0; font-weight: 400; font-family: 'Aleo', serif;}
.headtext h6{font-size: 10px; font-weight: 700; text-transform: uppercase;}

.ghostlink{border: 1px solid var(--orange); padding: 10px 15px; font-size: 16px; font-weight: 300; text-transform: uppercase; background: var(--orange); color: #fff; font-family: 'Oswald', sans-serif; height: auto;}
.ghostlink:hover{background: var(--black); color: #f5f5f5; border: 1px solid var(--black);}
.ghostholder{width: 100%; padding: 20px 0;}


.smallcover{width: 100%; height: 100%; background: rgba(245,146,0,0.5); position: absolute; top: 0; left: 0; z-index: 2;}
.hoverbox:hover .smallcover{background: rgba(245,146,0,0.9);}
.hoverbox:hover .smallimage{-webkit-transform: scale(1);
	transform: scale(1);}


.smallclient{position: absolute; bottom:30px; left: 10px; z-index: 3; padding: 0; color: #fff; font-weight: 400;
-webkit-transition: all 0.35s; display: block;
	transition: all 0.35s;
    -webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
}
.smalltype{position: absolute; bottom: 0px; left: 0; z-index: 5; width: 100%; padding: 10px; color:#fff;
    opacity: 0; font-family: 'Oswald', sans-serif;
-webkit-transition: all 0.45s;
	transition: all 0.45s;
    -webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}
.hoverbox:hover .smalltype,
.hoverbox:hover .smallclient,
.hoverbox:hover .smallfoot{
    opacity: 1; color: #fff;
-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


.smallboxbg{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;
    -webkit-filter: grayscale(0);
  filter: grayscale(0);
        }
.c1{background: rgba(245,156,0,0.9);}
.c2{background: rgba(255,204,0,0.9);}
.c4{background: rgba(183,14,12,0.9);}
.c5{background: rgba(25,25,25,0.9);}
                    .hoverbox:hover .smallcover{background: rgba(245,146,0,0.5);}
                    .headtext{width:100%; text-align:left; margin-bottom:20px; overflow:hidden;}
                    .eachbox{width:32.5%; height:200px; position:relative; border-radius:0;}
                    .homeboxes{width:100%; 
                    display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-between;
                    }
            

.smallclient{position: absolute; bottom:30px; left: 10px; z-index: 3; padding: 0; color: #fff; font-weight: 400;
-webkit-transition: all 0.35s; display: block;
	transition: all 0.35s;
    -webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
}
.smalltype{position: absolute; bottom: 0px; left: 0; z-index: 5; width: 100%; padding: 10px; color:#fff;
    opacity: 0; font-family: 'Oswald', sans-serif;
-webkit-transition: all 0.45s;
	transition: all 0.45s;
    -webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}



.gmap3{width: 100%; height: 400px;}
.gmap4{width: 100%; height: 300px;}
.gmap5{width: 100%; height: 700px;}

.mapper{width: 100%;background: var(--dark);}

.mapheader{width: 100%; max-width: 1200px; margin: 0 auto; height: auto; position: relative; min-height: 60px; margin-bottom: 0px;  overflow: hidden; padding: 20px 0; color: #fff}
.mapimage{ width:100px; float: right; margin-left: 20px; }

.rangerholder{width: 90%; margin: 0 auto; padding: 10px 0;}
.ranger{width: 100%;}
.rangervalue{width: 100%; text-align: center; font-size: 22px; font-weight: 800; color: var(--orange);}

.firstHeading{color: var(--orange);}

.searcher{width: 100%;  padding: 20px 0; overflow: hidden;}
.searchtext{float: left; width: calc(100% - 380px);}

.footer{width: 100%; position: relative; background: var(--dark); padding: 20px;}
.footer a{color:var(--orange);}
.innerfooter{width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;outline: 0px solid red;}
.footerlogo{text-align: left; display: flex; justify-content: flex-start; flex-wrap: wrap; outline: 0px solid red;}
.eachfooterlogo{width: 120px; margin-right: 20px; }
.eachfooterlogo img{width: 100%;}
.footnav{ text-align: right; margin-bottom: 10px;}
.footnav li{list-style-type: none; display: inline-block; margin-left: 10px;}
.footnav a{font-family: 'Oswald', sans-serif; color: #C9C9C9; font-size: 14px; text-transform: uppercase;}
.footnav a.subnav{display: none; font-size: 14px;}
.footnav a.current{color: var(--orange);}
.footnav a:hover{color: var(--orange);}
.footsocial{margin-bottom: 10px;}
.subnav2{font-size: 10px;font-family: 'Aleo', serif; text-align: right;}
.subnav2 a{ margin-left: 10px;}
.subdetails{color: #fff; text-align: right;}
.footsocial-circle [class*="fa fa-"] {
    width: 25px;
    height: 25px;
    color: var(--dark);
    background-color: var(--orange);
    border-radius: 2px;
    display: inline-block;
    line-height: 25px;
    margin: 10px 0 0 3px;;
    font-size: 15px;
    text-align: center;
}
.footsocial-circle [class*="fab fa-"] {
    width: 25px;
    height: 25px;
    color: var(--dark);
    background-color: var(--orange);
    border-radius: 2px;
    display: inline-block;
    line-height: 25px;
    margin: 10px 0 0 3px;;
    font-size: 15px;
    text-align: center;
}
.headform{
    display: inline-block;
     vertical-align: top;
    
    text-align: center;

    font: bold 13px sans-serif;
    max-width: 360px;
    position: relative;
}


.headform input{
    width: 230px;
    box-sizing: border-box;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    background-color:  var(--white);
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
    padding: 8px 10px 6px;
    border: 1px solid var(--orange);;
    border-right: 0;
    color:#4E565C;
    outline: none;
    -webkit-appearance: none;
    font-family: 'Aleo', serif;
}

.headform button{
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    background-color:  var(--orange);
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
    color: var(--white);
    padding: 6.5px 22px 7px;
    margin-left: -4px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
}



/* Placeholder color */

.headform input::-webkit-input-placeholder {
    color:  #879097;
    font-family: 'Aleo', sans-serif;
    font-weight: 300;
}

.headform input::-moz-placeholder {
    color:  #879097;
    opacity: 1;
    font-family: 'Aleo', sans-serif;
    font-weight: 300;
}

.headform input:-ms-input-placeholder {
    color:  #879097;
    font-family: 'Aleo', sans-serif;
    font-weight: 300;
}


.form-search{
    float: right;
    clear: right;
    margin: 5px 0 0 0;
    text-align: center;

    font: bold 13px sans-serif;
    max-width: 360px;
    position: relative;
}


.form-search input{
    width: 230px;
    box-sizing: border-box;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    background-color:  var(--white);
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
    padding: 7px 10px 7px 40px;
    border: 1px solid var(--orange);;
    border-right: 0;
    color:#4E565C;
    outline: none;
    -webkit-appearance: none;
    font-family: 'Aleo', serif;
}

.form-search button{
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    background-color:  var(--orange);
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
    color: var(--white);
    padding: 6px 22px 8px;
    margin-left: -4px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
}

.form-search i{
    position: absolute;
    top: 7px;
    left: 15px;
    font-size: 16px;
    color: var(--orange);
}

/* Placeholder color */

.form-search input::-webkit-input-placeholder {
    color:  #879097;
    font-family: 'Aleo', sans-serif;
    font-weight: 300;
}

.form-search input::-moz-placeholder {
    color:  #879097;
    opacity: 1;
    font-family: 'Aleo', sans-serif;
    font-weight: 300;
}

.form-search input:-ms-input-placeholder {
    color:  #879097;
    font-family: 'Aleo', sans-serif;
    font-weight: 300;
}

hr.style-one { border: 0; height: 1px; background:  var(--dark); background-image: linear-gradient(to right, var(--main),  var(--dark), var(--main)); }
.sitemap{list-style-type: none; width: 100%; max-width: 500px;}
.togglee{display: none; padding-top: 7px;}
.toggler{padding: 10px 20px; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: 700;}
.t1{background: var(--dark); color: #fff;}
.t2{background: #fff; color: var(--dark);}
.toggler:hover{background: #fff; color: var(--dark);}
.cpanel{width: 100%; padding: 20px; background: #fff;}
.smallprint{font-size: 10px;}


/* ==========================================================================
   HOME CAROUSEL
   ========================================================================== */

.caseboxes{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 40px 15%;}
.caseboxestitle{width: 100%; font-size: 18px; padding-bottom: 20px; font-weight: 600;}

.casebox{background: rgba(255,255,255,0.3); box-sizing: border-box;}
.caseboximage{width: 100%; height: 240px; overflow: hidden; padding: 20px;}
.caseboxcover{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--main); opacity: 0.0; z-index: 3;}
.caseboximage img{width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2;}
.caseboxtitle{font-size: 14px; color: var(--black); transition: all 0.3s ease; padding: 0 20px 10px;}
.caseboxtext{font-size: 14px; color: var(--red); font-weight: 600; transition: all 0.3s ease; padding: 0 20px 20px;}
.caseboxtext span{color: var(--black); font-size: 12px;}
.casebox:hover img{transform: scale(1.05,1.05);}
.casebox:hover .caseboxtext{color: var(--black);}

.caseboxesfooter{width: 100%; display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; padding-top: 40px;}
.caseboxesfooter a{position: relative;}
.caseboxesfooter a i{color: var(--accent);}

.nocasebox:hover img{ transform: none;}
.nocasebox img{filter: grayscale(0);}
.homeservices{width: 100%; position: relative; padding: 0;}
.swiper-arrow{position: absolute; transition: all 0.3s ease; cursor: pointer;}
        .swiper-arrow:hover{opacity: 0.7;}
        .swiper-prev{top: 45%; right: -30px;}
        .swiper-next{top: 45%; left: -30px;}
/* ==========================================================================
   ABOUT
   ========================================================================== */
.pagehead{ width: 100%; height: 200px; position: relative; overflow: hidden; background-size: cover; }
.logowhite{position: absolute; bottom: 20px; right:20px; width: 60px; z-index: 10;}
.logowhite img{width: 100%;}
.abouthead{background: url(../img/barley.jpg); }
.pageheadcover{width: 100%; height: 100%; position: absolute; z-index: 5; background: var(--orange); opacity: 0.8;}
.pageheadimage{width: 100%; height: 100%; position: absolute; z-index: 4; }
.pageheadimage img{width: 100%; height: 100%; object-fit: cover;}

.pageheadtitle{position: absolute; top:20px; left: 20px; color: #fff; display: block; border-top:1px solid #fff; border-bottom:1px solid #fff; z-index: 10; max-width: 65%;}
.pagecontent{padding: 20px 0; text-align: left; }
blockquote {
  background: #f9f9f9;
  border-left: 10px solid var(--orange);;
  margin: 1.5em 0px;
  padding: 20px 10px;
  
}
blockquote:before {
  color:var(--orange);
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

blockquote.quotelink {
  background: #f9f9f9;
  border-left: 10px solid var(--orange);;
  margin: 1.5em 0px;
  padding: 10px 10px;
  
}
blockquote.quotelink:before {
  color:var(--orange);
  content: "\f0c1";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
  font-size: 2em;
  line-height: 0.1em;
  margin-right: 0.25em;
  
}
.linktitle{font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 26px; font-weight: 700; margin-top: 0; vertical-align: top; margin-top: 0 !important;}
.quotecredit{font-weight: bold; font-size: 12px;}
/* ==========================================================================
   FORM
   ========================================================================== */

.contactcontent{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.contactcontentleft{width: 60%;}
.contactcontentright{width: 35%;}

.theform{width:100%; background: rgba(255,255,255,0.3); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0;  padding: 40px; margin: 40px 0 0;}
.participateform{box-shadow: 0 15px 45px rgba(0,0,0,0.25), 0 7px 10px rgba(0,0,0,0.05);}
.halfinput{width:  49%; position: relative;}
.fullinput{width: 100%; position: relative;}
.theform label{font-size: 16px; color: #676767; display: block; font-weight: 600; margin-bottom: 10px;}
.textinput{width: 100%; border:1px solid #f9f9f9; padding: 16px; font-size: 16px; background: rgba(0,0,0,0.0); outline: 1px solid #aaa; color: #0C0C0B; margin-bottom: 20px;}
.textinput:focus{outline: 1px solid #0f0f0f; background: rgba(255,255,255,0.5);}
.submitbutton{width: 100%; border:0px solid var(--dark); border-radius: 2px; color: #fff; padding: 15px; transition: 0.4s; cursor: pointer; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; background: var(--dark)}
.submitbutton:hover{background: var(--red);}
textarea{height: 200px; text-align: left;}
.smallprint{font-size: 12px;}
.selectinput{width: 100%; border:1px solid #f9f9f9; padding: 17px 10px; font-size: 1rem; background: rgba(0,0,0,0.05); background: #fff; outline: 1px solid #aaa; color: #0C0C0B; margin-bottom: 0px;}
/* ==========================================================================
   TABS
   ========================================================================== */

/* Android 2.3 :checked fix */
@-webkit-keyframes fake {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@keyframes fake {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}


.worko-tabs {
  margin: 0;
  width: 100%;
}
.worko-tabs .state {
  position: absolute;
  left: -10000px;
}
.worko-tabs .flex-tabs {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.worko-tabs .flex-tabs .tab {
  flex-grow: 1;
  max-height: 40px;
}
.worko-tabs .flex-tabs .panel {
  background-color: rgba(255,255,255,0.3);
  padding: 20px;
  min-height: 300px;
  display: none;
  width: 100%;
  flex-basis: auto;
}
.worko-tabs .tab {
  display: inline-block;
  padding: 10px;
  vertical-align: top;
  background-color: #eee;
  cursor: hand;
  cursor: pointer;
  border-left: 10px solid #ccc;
}
.worko-tabs .tab:hover {
  background-color: #fff;
}

#tab-one:checked ~ .tabs #tab-one-label,
#tab-two:checked ~ .tabs #tab-two-label,
#tab-three:checked ~ .tabs #tab-three-label,
#tab-four:checked ~ .tabs #tab-four-label {
  background-color: rgba(255,255,255,0.5);
  cursor: default;
  border-left-color: var(--orange);
}

#tab-one:checked ~ .tabs #tab-one-panel,
#tab-two:checked ~ .tabs #tab-two-panel,
#tab-three:checked ~ .tabs #tab-three-panel,
#tab-four:checked ~ .tabs #tab-four-panel {
  display: block;
}

@media (max-width: 600px) {
  .flex-tabs {
    flex-direction: column;
  }
  .flex-tabs .tab {
    background: #fff;
    border-bottom: 1px solid #ccc;
  }
  .flex-tabs .tab:last-of-type {
    border-bottom: none;
  }
  .flex-tabs #tab-one-label {
    order: 1;
  }
  .flex-tabs #tab-two-label {
    order: 3;
  }
  .flex-tabs #tab-three-label {
    order: 5;
  }
  .flex-tabs #tab-four-label {
    order: 7;
  }
  .flex-tabs #tab-one-panel {
    order: 2;
  }
  .flex-tabs #tab-two-panel {
    order: 4;
  }
  .flex-tabs #tab-three-panel {
    order: 6;
  }
  .flex-tabs #tab-four-panel {
    order: 8;
  }

  #tab-one:checked ~ .tabs #tab-one-label,
#tab-two:checked ~ .tabs #tab-two-label,
#tab-three:checked ~ .tabs #tab-three-label,
#tab-four:checked ~ .tabs #tab-four-label {
    border-bottom: none;
  }

  #tab-one:checked ~ .tabs #tab-one-panel,
#tab-two:checked ~ .tabs #tab-two-panel,
#tab-three:checked ~ .tabs #tab-three-panel,
#tab-four:checked ~ .tabs #tab-four-panel {
    border-bottom: 1px solid #ccc;
  }
}

.embed-container {/*box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);*/
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0;
	height: 0;
}
.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    border: none;
}
/* ==========================================================================
   NEWS
   ========================================================================== */
.newscontent{padding: 0; text-align: left; overflow: hidden;}
.newshead{width: 100%; height: 300px; position: relative; overflow: hidden; background-size: cover; }
.mysteryhead{width: 100%; height: auto; position: relative; overflow: hidden; }
.mysteryhead img{width: 100%;}
.newsimage{width: 100%;}
.newsimage img{width:100%;}
.newsdate{position: absolute; bottom: 10px; left: 10px; margin: 0; color: #fff; z-index: 10;}
.newsstory{padding: 20px 0;}
.newshead:hover .pageheadcover{ background: rgba(245,156,0,0.4);}

.archivehead{width: 100%; height: auto; min-height: 80px; position: relative; overflow: hidden; background-size: cover; padding-bottom: 30px;}
.archiveimage{width: 100%;}
.archiveimage img{width:100%;}
.archivedate{position: absolute; bottom: 10px; right: 10px; margin: 0; color: #fff; z-index: 10; font-size: 12px;} 
.archivehead:hover .archivecover{ background: rgba(245,156,0,0.4);}
.archiveheadtitle{position: absolute; top:10px; left: 10px; color: #fff; display: block; border-top:1px solid #fff; border-bottom:1px solid #fff; z-index: 10; font-size: 16px; max-width: 65%; padding: 5px 0;}

.archivecover{width: 100%; height: 100%; position: absolute; z-index: 5; 
-webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 1s ease;}
.cover1{background: rgba(245,156,0,0.8);}
.cover2{background: rgba(238,231,186,0.8);}
.cover3{background: rgba(256,204,0,0.8);}
.cover4{background: rgba(183,14,12,0.8);}
.cover5{background: rgba(25,25,25,0.8);}
.eachnewsarchive{margin-bottom: 10px; display: block;}

.nofont{display: none;}
.routedetails{margin-bottom: 20px;}
/* ==========================================================================
   EACH BUSINESS / BUILDING / PERSON / PLACE
   ========================================================================== */
.breadcrumbs{font-size: 12px; width: 100%; margin:0; padding: 20px;  background: rgba(255,255,255,0.5);}
.breadcrumbs a{color: #676767;}
.breadcrumbs a:hover{color: var(--red);}
.breadcrumbs span{margin: 0 5px;}
.ug-slider-wrapper {
  background-color: var(--dark) !important;
}
.businesseshead{background: url(../img/businesseshead.jpg); margin-bottom: 20px; }
.buildingshead{background: url(../img/buildingshead.jpg); margin-bottom: 20px; }
.tourhead{background: url(../img/pints.jpg); margin-bottom: 20px; }
.peoplehead{background: url(../img/peoplehead.jpg); margin-bottom: 20px; }
.placeshead{background: url(../img/placeshead.jpg); margin-bottom: 20px; }
.objectshead{background: url(../img/objectshead.jpg); margin-bottom: 20px; }


.thebusiness{padding-top: 0; width: 100%; overflow: hidden;}
.businessinfo{width: 100%; }

.businesshead{position: relative; width: 100%; padding: 20px; margin-bottom: 20px; overflow: hidden; background: rgba(255,255,255,0.3); display: flex; justify-content: space-between; flex-wrap: wrap;}

.businesstitle{ width: 100%;}
.businesstext{ width: 70%;}


.trademark{ width: 22.25%; }
.trademark img{width: 100%;  }
.trademarktitle{margin: 0 0 10px; text-align: center;  background: #fff; font-size: 12px; padding: 5px}

.townlist{ width: 22.25%; float: right; height: 300px; overflow: auto; }

ul.tlist { 
   list-style-type: disc; 
   list-style-position: inside; 
}

ul.tlist li { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}

.noimage{width: 100%; height: 500px; background: var(--main); text-align: center; padding: 20px; font-size: 22px;display: flex;
    justify-content: center;
    align-items: center;}
.mirrored{display: none;}
.businesssection{width: 100%; background: rgba(255,255,255,0.3);  margin-bottom: 20px; padding: 20px;}
.flexmap{width: 100%; height: 100%;}
.businessvisual{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.businesslocation{width: 70%; position: relative;}
.businesslocationtitle{text-align: center; background: #fff; font-size: 12px; padding: 10px; position: absolute; bottom: 0; left: 0; width: 100%;}

.businessvisualimage{width: 28%;}

.businessvisualimage img{width: 100%; }
.businessvisualtitle{margin: 0; text-align: center; background: #fff; font-size: 12px; padding: 5px;}


.businesssources{width: 100%; height: auto; background: #fff; background: rgba(255,255,255,0.3);  margin-bottom: 20px; overflow: hidden;  padding: 20px; font-size: 12px; }
.eachobject{}
.slide{overflow: hidden; height: auto;}
.slide img{width: 200px; height: auto;}
.bx-clone{display: none;}
.eachchildtype{float: left; margin-right: 40px;}
.chocolat-image:hover{opacity: 0.6;}

.minheight{min-height: 100vh;}

.choc{height: 150px; width: auto;}
.item img{height: 150px; width: auto;}

.imagecredit{font-size: 11px; font-style: italic; margin-top: 5px; font-weight: 800;}

.thenandnow{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}

.thenimage{width: 49.5%; background: rgba(255,255,255,0.3);  margin-bottom: 20px; padding: 20px;}
.thenimage img{display: block; width: 100%;}
.nowimage{width: 49.5%; background: rgba(255,255,255,0.3);  margin-bottom: 20px; padding: 20px;}
.nowimage iframe{width: 100%; height: 554px;}

.buildingtm p{font-size: 14px;}




.noselect select{visibility: hidden;}
.thetable{margin-bottom: 20px; background: rgba(255,255,255,0.3); padding: 20px;}
.display{margin-bottom: 20px;}

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 0px solid white;
    
    /*required for proper track sizing in FF*/
    width: 100%;
}
input[type=range]::-webkit-slider-runnable-track {
     width: 100%;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
     width: 100%;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
     width: 100%;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

.routestreetview{width: 100%; max-width: 300px; height:200px; margin-bottom: 20px; overflow: hidden;}
.routestreetview iframe{max-width: 100%; height: 200px;}
.mymap iframe{width: 100%; height:600px;}
.paginator{width: 100%; padding: 10px 0;}

.acknowledgementul{list-style-type: none; margin-bottom: 20px;}
.acknowledgementul li{padding-left: 40px; margin-bottom: 5px;}

.termscontent ul
{
    list-style: initial;
    margin: initial;
    padding: 0 0 0 40px;
}

.termscontent li
{
    display: list-item;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 1220px) {.primarynav{display: flex!important;}.ham{display: none; order: 2;}}

@media only screen and (max-width: 1199px) {
.mapheader{padding: 20px;}
}
@media only screen and (max-width: 1219px) {
    .innerheader{display: flex; justify-content: space-between; flex-wrap: wrap;}
    .logo{order: 1;}
    .notlogo{ display: flex; justify-content: flex-start; flex-direction: column; order: 2;}
    .ham{order: 4; display: flex; justify-content: flex-end; margin-bottom: 20px;}
    .search_social{order: 5; margin: 20px 0 0;}
    .primarynav{display: none; width: 100%; height: auto; text-align: right; padding: 40px 10px; order: 6;}

    .primarynav li{ margin: 0 5px 10px; list-style-type: none; display: block; width: 100%;}
    .primarynav a{font-size: 16px; display: block; margin-bottom: 10px;}
    
    .secondarynav{padding: 0 20px; justify-content: center;}
    .secnavcover{display: none;}
    .secnav{position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; flex-wrap: wrap; width: 100%; padding: 0 0 0 0; margin: 0;  height: 46px; border: none; z-index: 10000;}
    .isnlogo{background: none;}
    .secondarynav a{color: #fff; margin: 0;}
    .secondarynav a:hover{ background: rgba(25,25,25,0.1);}
    .secondarynav a{font-size: 14px; color: var(--dark); padding:0 8px;}
    
    .largebox{width: 100%; height: auto; margin: 0; padding: 0 20px; min-width: 10px; min-height: 100px; }
    .twobox{width: 67%; height: 200px; padding: 0; min-width: 20px;}
    .smallbox{position: relative; height: 100%; margin: 0; float: left; width: 50%;}
    .eachbox{border-radius: 0;}
     .box1{margin-right: 0;}
    .box1{float: left;}
    .box3{float: right; width: 33%;}

 
    
    .overflow{overflow: hidden;}
    .logo{width: 120px;}
    .flourish{display: none;}
    .weeflourish{display: none;}
 
    .largebox{margin: 0 0 20px;}
    .content{  overflow: hidden; padding: 0;}
    
    .hometext1{font-size: 30px;}
    .hometext2{font-size: 23px;}
  
    .mapimage{margin-bottom: 15px;}
    
    .burger-menu-button{top: 80px !important; right: 20px !important;}
    .burger-menu{width: 100%;}
    .search_social{margin-top: 0px;}
    .contentbusinesses2{padding: 80px 20px 60px; width: auto; height: auto; max-width: 1500px; font-size: 16px;}
    .contentbusinesses{padding: 80px 0 60px; width: auto; height: auto; max-width: 1500px; font-size: 16px;}
    .holder{width: 100%; text-align: left; font-family: 'Aleo', serif; padding: 20px;}
     .footer{padding-bottom: 60px;}
    .innercontent{padding:20px;}
    .pageleft{width: 100%; ; margin-bottom: 20px;}
    .pageright{width: 100%; ; margin-bottom: 20px;}
    .sideimage{display: none;}
    .eachdetail{float: left; margin-right: 20px;}
    .eventmap{clear: both;}
    
    .thenimage{width: 100%; ; height: auto; background: #fff; background: rgba(255,255,255,0.3);  margin-bottom: 20px; padding: 20px; }
    .thenimage img{width: 100%; max-width: 554px; margin: 0 auto;}
.nowimage{width: 100%; ; height: auto; background: #fff; background: rgba(255,255,255,0.3);  margin-bottom: 20px; padding: 20px;}
.gmap3{width: 100%; height: 400px; margin: 0 auto;}
.gmap4{width: 100%; height: 300px; margin: 0 auto;}
.gmap5{width: 100%; height: 700px; margin: 0 auto;}
    
       .swiper-prev{top: 45%; right: 0px; z-index: 10000}
        .swiper-next{top: 45%; left: 0px; z-index: 10000}
}

    
@media only screen and (max-width: 800px) {
    .header{padding: 10px;} .innerheader{padding: 10px;}
    .businessinfo{; width: 100%; margin-bottom: 20px; }
.businessvisual{width: 100%; ;}
    .ham{margin-top: 30px;}
    .logo img{position: relative;}
    .search_social{display: none;}
    .primarynav{padding-bottom: 0;}
    .searchnav{display: block;}
    .subdetails{text-align: center;}
    .footright{width: 100%;}
.footerlogo{; margin: 0 auto 20px; width: auto; text-align: center;}
    .eachfooterlogo{display: inline-block; margin: 0 10px; width:100px;}
.eachfooterlogo img{width: 100%;}
.footnav{ margin: 0; padding: 0; text-align: center;}
.footnav li{list-style-type: none; display: inline-block; margin: 0 5px;}
.footnav a{font-family: 'Oswald', sans-serif; color: #C9C9C9; font-size: 14px; text-transform: uppercase;}
.footnav a.subnav{display: none; font-size: 14px;}
.footnav a.current{color: var(--orange);}
.footnav a:hover{color: var(--orange);}
.footsocial{text-align: center;}
.subnav2{text-align: center; font-size: 10px;font-family: 'Aleo', serif; list-style-type: none; }
.subnav2 li{ margin:0 10px;}
    
    .businesstitle{ width: 100%;}
    .businesstext{ width: 100%;}


.trademark{ width: 100%;  margin-top: 20px; padding: 20px 0 0; border-top: 2px solid var(--dark);}
.trademark img{width: 100%;  }


.eachbox{width:100%; height:200px; position:relative; border-radius:0;margin-bottom: 10px;}
                    .homeboxes{width:100%; 
                    display: block;
                    
                    }
.headtext p:first-of-type{font-size: 22px;}
.headtext p{font-size: 16px;}
    
}
@media only screen and (max-width: 600px) {
.secondarynav a{ font-size: 12px; color: var(--dark); font-weight: 700; position: relative; z-index: 10001; padding: 0px 4px; display: block; line-height: 46px;font-family: 'Oswald', sans-serif; text-transform: uppercase}
    .eventdetail{; width: 100%; margin-bottom: 20px;}
}
@media only screen and (max-width: 400px) {
    
    .twobox{width: 100%; }
    .fullbox{width: 100%; height: 200px; }
    .smallbox{height: 50%; margin: 0; width: 100%;}
    .box2{height: 400px; }
    .box1{margin-right: 0;}
    .box1{float: left;}
    .box3{float: right;}

    .largebox{text-align: center; margin-bottom: 20px;}
    .fullbox{height: 200px;}
    .twobox{width: 100%;}
    .hometext1{font-size: 20px;}
    .hometext2{font-size: 14px;}
    .mapimage{; margin: 0 auto 20px;}
    .mapheader{text-align: center;}
    .maptext{width: 100%;}
    .searchtext{text-align: center;}
    .form-search{float: left; text-align: left;}
    .form-search input{width: 200px;}
    
    .gmap3{width: 100%; margin: 0 auto; height: 400px;}
    .gmap5{width: 100%; margin: 0 auto; height: 700px;}
    .mapheader{width: 90%; margin: 0 auto;}
    
    .secondarynav a{font-size: 12px;}
    
    .eachdetail{; width: 100%; margin-bottom: 20px;}
    .eventdetail{; width: 100%; margin-bottom: 20px;}
    .eventmap{clear: both;}
    .headtext p:first-of-type{font-size: 18px;}
.headtext p{font-size: 14px;}
    .bordered{font-size: 22px;}
    .pageheadtitle{font-size: 22px;}
.bordered i{vertical-align: top; margin-top: 7px; font-size: 22px; margin-right: 10px;}
    
    
}

/* ==========================================================================
   HONEYCOMB
   ========================================================================== */

.homehead{overflow: hidden; position: relative; width: 100%; }
.hometext{width: 58%; float: left; }
.homebox{width: 40%; float: right;}
.homeslide{position: relative; width: 100%; height: auto; }
.homecover{width: 100%; position: relative; z-index: 10; pointer-events: none;}
.homecover img{width: 100%;}

.homeslider{width: 100%; height: 100%; position: absolute; top: 0; left:0;  z-index: 5; }
.slideimage{ width:100%; height:100%; position:relative;}
.slidecover{width: 100%; height: 100%; background: rgba(25,25,25,0.4);}

.slideclient{position: absolute; bottom:170px; left: 0px; z-index: 7; padding: 0; color: #fff; font-weight: 400; font-size: 32px; width: 100%; text-align: center;
-webkit-transition: all 0.35s; display: block;
	transition: all 0.35s;
    -webkit-transform: translate3d(0,--40px,0);
	transform: translate3d(0,-40px,0);
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
}
.slidetype{position: absolute; bottom: 150px; left: 0px; z-index: 7; width: 100%; padding: 10px; color:#fff; width: 100%; text-align: center;
    opacity: 0; font-family: 'Oswald', sans-serif;
-webkit-transition: all 0.45s;
	transition: all 0.45s;
    -webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}
.homeslide:hover .slidetype,
.homeslide:hover .slideclient{
opacity: 1; color: #fff;
-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.homeslide:hover .slidecover{background: rgba(245,156,0,0.7);}



only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*,*:before,*:after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}