@charset "UTF-8";

@font-face {
  font-family: "socialmedia";
  src:url("/fonts/socialmedia.eot");
  src:url("/fonts/socialmedia.eot?#iefix") format("embedded-opentype"),
    url("/fonts/socialmedia.woff") format("woff"),
    url("/fonts/socialmedia.ttf") format("truetype"),
    url("/fonts/socialmedia.svg#socialmedia") format("svg");
  font-weight: normal;
  font-style: normal;

}



.wallartarea button{
    display: inline-block;
    vertical-align: top;
    padding: .4em .8em;
    margin: 0;
    background: #68b8c4;
    border: 0;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
  
  }

  .wallartarea form{
  width: 100%;
  float: left;
  }
   
  .wallartarea button:focus{
    outline: 0 none;
  }
   
  .wallartarea .controls{
    background: #333;
    padding: 2%;
  }
   
  .wallartarea fieldset{
    display: block;
    vertical-align: top;
    margin: 0;
    width: auto;
    width: 100%;
  }
  
  .wallartarea .checkbox{
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-bottom: 8px;
    background-color: #fff;
    padding: 4px;
  }
  
  .wallartarea .checkbox input[type="checkbox"]{
    position: absolute;
    display: block;
    top: 4px;
    left: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    margin: 0;
    opacity: 0;
    z-index: 1;
    float: left;
  }
  
  .wallartarea  .checkbox label{
    display: block;
    vertical-align: top;
    text-align: left;
    padding-left: 24px;
    margin: 0px;
    color: #000;
  }
  
  .wallartarea .checkbox label:before,
  .wallartarea .checkbox label:after{
    content: '';
    display: block;
    position: absolute;
  }
  
  .wallartarea .checkbox label:before{
    left: 4px;
    top: 8px;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background: #ddd;
    border-radius: 3px;
    border: 1px solid #c5c5c5;
  }
  
  .wallartarea .checkbox label:after{
    content: '';
    position: absolute;
    top: 10px;
    left: 6px;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: #ff5c38;
    opacity: 0;
    pointer-events: none;
  }
  
  .wallartarea .checkbox input:checked ~ label:after{
    opacity: 1;
  }
  
  .wallartarea .checkbox input:focus ~ label:before{
    background: #eee;
  }
  

  
  .container .fail-message{
    position: relative;
   width: 100%;
    float:left;
    text-align: center;
    padding: 16px;
  }

  




[data-icon]:before {
  font-family: "socialmedia" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "socialmedia" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook-circle:before {
  content: "\61";
}
.icon-twitter-circled:before {
  content: "\62";
}
.icon-twitter:before {
  content: "\63";
}
.icon-facebook:before {
  content: "\64";
}
.icon-instagram:before {
  content: "\65";
}
.icon-instagrem:before {
  content: "\66";
}
.icon-vimeo:before {
  content: "\67";
}
.icon-youtube-alt:before {
  content: "\68";
}
.icon-youtube:before {
  content: "\69";
}
.icon-phone:before {
  content: "\6a";
}
.icon-clock:before {
  content: "\6b";
}
.icon-mail:before {
  content: "\6c";
}
.icon-pin:before {
  content: "\6d";
}
.icon-search:before {
  content: "\6e";
}
.icon-search-1:before {
  content: "\6f";
}
.icon-up-open-big:before {
  content: "\70";
}
.icon-down-open-big:before {
  content: "\71";
}
.icon-right-open-big:before {
  content: "\72";
}
.icon-left-open-big:before {
  content: "\73";
}
.icon-dot-circle-o:before {
  content: "\74";
}
.icon-circle:before {
  content: "\75";
}
.icon-folder-open:before {
  content: "\76";
}
.icon-folder:before {
  content: "\77";
}
.icon-users-1:before {
  content: "\79";
}
.icon-question-circle:before {
  content: "\78";
}
.icon-question:before {
  content: "\7a";
}
.icon-home:before {
  content: "\41";
}
.icon-wrench:before {
  content: "\42";
}
.icon-wrench-1:before {
  content: "\43";
}
.icon-rss:before {
  content: "\44";
}
.icon-feed-rss-2:before {
  content: "\46";
}
.icon-camera:before {
  content: "\45";
}
.icon-social-youtube-outline:before {
  content: "\47";
}
.icon-info:before {
  content: "\49";
}
.icon-info-circled:before {
  content: "\48";
}
.icon-camera-1:before {
  content: "\4a";
}
.icon-medal-rank-star:before {
  content: "\4c";
}
.icon-locked:before {
  content: "\4b";
}
.icon-pound:before {
  content: "\4d";
}
.icon-linkedin-alt:before {
  content: "\4e";
}
.icon-linkedin-alt-1:before {
  content: "\4f";
}
.icon-arrow-down-1:before {
  content: "\30";
}
.icon-arrow-right-1:before {
  content: "\31";
}
.icon-arrow-up-1:before {
  content: "\32";
}
.icon-arrow-left-1:before {
  content: "\33";
}
.icon-arrow-circle-right:before {
  content: "\34";
}
.icon-arrow-circle-up:before {
  content: "\35";
}
.icon-arrow-circle-left:before {
  content: "\36";
}
.icon-arrow-circle-down:before {
  content: "\37";
}
.icon-arrow-curve-right:before {
  content: "\50";
}
.icon-link:before {
  content: "\51";
}
.icon-link-external:before {
  content: "\52";
}
.icon-external-link-sqaure:before {
  content: "\53";
}
.icon-hyperlink:before {
  content: "\54";
}
.icon-file:before {
  content: "\55";
}
.icon-download:before {
  content: "\56";
}
.icon-install:before {
  content: "\57";
}
.icon-download-1:before {
  content: "\58";
}
.icon-in:before {
  content: "\59";
}
.icon-call-old-telephone:before {
  content: "\5a";
}
.icon-home-1:before {
  content: "\38";
}
.icon-triangle:before {
  content: "\39";
}
.icon-triangle-stroked:before {
  content: "\21";
}
.icon-pinterest:before {
  content: "\22";
}
.icon-university:before {
  content: "\23";
}
.icon-eye:before {
  content: "\24";
}
.icon-eye-1:before {
  content: "\25";
}
.icon-school:before {
  content: "\26";
}
.icon-graduation-cap:before {
  content: "\27";
}
.icon-pencil:before {
  content: "\29";
}
.icon-ribbon-b:before {
  content: "\2a";
}
.icon-ribbon-a:before {
  content: "\2d";
}
.icon-dofe:before {
  content: "\2f";
}
.icon-handprint-1:before {
  content: "\3a";
}
.icon-military:before {
  content: "\3b";
}
.icon-schools:before {
  content: "\3c";
}
.icon-visual:before {
  content: "\3d";
}
.icon-yearbook:before {
  content: "\3e";
}
.icon-phone-1:before {
  content: "\3f";
}
.icon-smart-phone-2:before {
  content: "\40";
}
.icon-phone-on:before {
  content: "\5b";
}
.icon-triangle-up:before {
  content: "\5d";
}
.icon-ninesidedthree:before {
  content: "\5e";
}
.icon-triangleone:before {
  content: "\5f";
}
.icon-triangletwo:before {
  content: "\60";
}
.icon-picassa:before {
  content: "\7b";
}
.icon-whatsapp:before {
  content: "\7c";
}
.icon-orderonline:before {
  content: "\28";
}
.icon-certificate-file:before {
  content: "\2b";
}
.icon-dofe-1:before {
  content: "\2c";
}
.icon-cart-shopping-1:before {
  content: "\2e";
}
.icon-basket:before {
  content: "\7d";
}





@charset "UTF-8";
.da-thumbs li a div span,
.grid figure button,
.person,
.stuff h1 {
    text-transform: uppercase
}

.rslides1_nav,
.rslides2_nav,
.rslides3_nav {
    -webkit-tap-highlight-color: transparent;
    overflow: hidden
}

.rslides1_nav:focus,
.rslides2_nav:focus,
.rslides3_nav:focus,
button:focus {
    outline: 0
}

.da-thumbs li a,
.grid figure,
.productbox,
.rslides,
.rslides1_nav,
.rslides2_nav,
.rslides3_nav,
.rslides_tabs a {
    overflow: hidden
}

.da-thumbs,
.rslides,
.rslides_tabs,
ol,
ul {
    list-style: none
}

*,
html {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300
}

.da-thumbs {
    width: 100%;
    position: relative;
    margin: 20px auto;
    padding: 0
}

.da-thumbs li {
    float: left;
    margin: 0;
    background: #fff;
    padding: 1px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    width: 33.333333333333333%
}


.websitelaunchlink a {
  font-size: 16px;
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  background-color: #ff5c39;
  border-radius: 16px;
  position: absolute;
  top: 16px;
  right: 0px;
}

.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative
}

.da-thumbs li a div {
    position: absolute;
    background: #333;
    background: rgba(75, 75, 75, .7);
    width: 100%;
    height: 100%
}

.da-thumbs li a div span {
    display: block;
    padding: 10px 0;
    margin: 40px 20px 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, .9);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 -10px 0 rgba(255, 255, 255, .3)
}

.expander,
.headerbutton {
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-box-shadow: 0 1px 1px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    -webkit-box-shadow: 1px 2px 2px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5)
}

.noshow {
    display: none
}

.row {
    padding: 16px;
    width: 100%;
    float: left;
}

.headerbutton {
  background: #eee; 
    background: -moz-linear-gradient(top, #fff 0, #ebebeb 50%, #dbdbdb 50%, #b5b5b5);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(.5, #fff), color-stop(.5, #fff), to(#ccc));
    border-radius: 16px;
    box-shadow: 0 1px 1px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    padding: 4px;
    font-size: 14px;
    line-height: 24px;
    height: 30px;
    float: left;
    width: 84px
}

.clienttext {
    float: right;
    padding-left: 4px;
    padding-right: 4px
}

.headerbutton.icon-locked:before {
    content: "\4b";
    font-size: 20px
}

.lightgallery {
    display: inline-block;
    width: 100%;
    max-width: 1180px;
    margin-top: 16px;
}

.lightgallery .ind_photo {
    width: 16.6666666666%;
    position: relative;
    float: left;
    padding: 1px;
}

.lightgallery .ind_photo a {
    position: relative;
  float: left;
}

.public .imagetitle {
    display: none
}

.imagetitle {
    width: auto;
    padding: 4px;
    background-color: #ff5c39;
    position: absolute;
    bottom: 0;
    color: #fff;
    font-size: 10px
}

.imagetitle.public {
   display: none;
}

.productgallery,
.productgallery {
    text-align: left;
    background-color: #000;
    margin-top: 12px
}
.productbox:nth-child(odd) {
    float: left;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, .2);
    width: 100%;
    position: relative;
    font-size: .8em;
    height: auto;
    background-color: #444;
    border-radius: 8px;
     background-image: url(/images/producttexture.png);
    background-repeat: repeat;

}



.productbox:nth-child(even) {
    float: left;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, .2);
    width: 100%;
    position: relative;
    font-size: .8em;
    height: auto;
    background-color: #555;
    border-radius: 8px;
    /*! z-index: -1; */
    background-image: url(/images/producttexture.png);
    background-repeat: repeat;
   
}




.productbox:nth-child(odd)  .product_thumb
 {
    float: right;
    width: 50%;
    border: 4px solid #eee;
}

.productbox:nth-child(even)  .product_thumb {
    float: left;
    width: 50%;
    border: 4px solid #eee;
}

.product_thumb img {
    float: left;
    width: 100%;
}

.productbox:nth-child(odd)  .proddesc {
    float: left;
    width: 50%;
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
}

.productbox:nth-child(even) .proddesc {
    float: right;
    width: 50%;
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
}

.product_title,
.productgallery,
.productgallery .lightgallery ind_photo img {
    width: 100%;
    float: left
}

.product_title {
    text-align: left;
    font-size: 1.7em;
    color: #ff5c39
}



.productgallery {
    float: left;
    width: 100%;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    height: auto;
    opacity: 1;
    padding: 8px
}

.productgallery .lightgallery .ind_photo {
    float: left;
    width: 16.6666666666%;
}

.clicked .expander,
.expander {
    background: -moz-linear-gradient(top, #fff 0, #ebebeb 50%, #dbdbdb 50%, #b5b5b5);
    padding: 4px;
    font-size: 14px;
    line-height: 24px;
    height: 30px;
    float: left;
    width: 84px;
    bottom: 20px;
    right: 4px;
    position: absolute;
    cursor: pointer
}

.productgallery .lightgallery {
    margin: 0;
    float: left;
}

.expander {
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(.5, #fff), color-stop(.5, #fff), to(#ccc));
    border-radius: 16px;
    box-shadow: 0 1px 1px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    color: #333;
    text-align: center
}

.clicked .expander {
    background: -webkit-gradient(linear, left top, left bottom, from(#ff9f8a), color-stop(.5, #ff3a0f), color-stop(.5, #ff5c39), to(#d24729));
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    -moz-box-shadow: 0 1px 1px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    -webkit-box-shadow: 1px 2px 2px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    box-shadow: 0 1px 1px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    color: #fafafa;
    text-align: center
}

.expander:before {
    content: "MORE";
    top: 4px;
    left: 0;
    width: 100%;
    position: absolute
}

.clicked .expander:before {
    content: "LESS"
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline
}


.productfilters {
  text-align: left;
  display: grid;
  padding: 0px;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 0;
  padding: 12px;
  background-color: rgba(256,256,256,0.1);
  margin-bottom: 16px;
}


.wallartproduct .productdescription p {
    float: left;
    width: 100%;
    /* color: #424242; */
    font-size: 16px;
    padding: 8px
}



.productfilter:nth-child(2) {
  grid-column: 2 / 4;
}


.subjectfilters {
  text-align: left;
  display: grid;
  padding: 0px;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 0;
  padding: 12px;
  background-color: rgba(256,256,256,0.1);
  margin-bottom: 16px;
}


.filtername {
  font-size: 18px;
  color: #ff5c38;
  font-weight: 600;
  padding-bottom: 12px;
}

.productfilter label {
  display: block;
  float: left;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  z-index: 0;
  text-align: left;
  line-height: 1;
  font-size: 18px;
  height: 12px;
}

.productfilter input {
  display: block;
  float: left;
  width: auto;
  padding: 0px;
  position: relative;
  z-index: 0;
  text-align: left;
  margin-right: 8px !important;
  line-height: 1;
   font-size: 18px;
}


.wallartproducts {
  display: grid;
  padding: 0px;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  z-index: 0;
  margin-bottom: 32px;
}


.wallartproduct {
  color: #2d2d2d;
  padding: 8px;
  position: relative;
  float: left;
  width: 100%;
}

.backtoprevious {
float: left;
  width: 100%;
  
}

.backtoprevious a{float: left;width: auto;padding: 4px;background-color: #ff5c38;}


.wallartproduct  .lightgallery .ind_photo {
    width: 50%;
    position: relative;
    float: left;
    padding: 4px;
}

.wallartproduct  .lightgallery .ind_photo:after {
    width: 48px;
  height: 48px;
  line-height: 1;
  content: "+";
    position: absolute;
    bottom: 16px;
  right: 16px;
  background-color: #ff5c38;
  font-size: 48px;
  color: #fff;
  pointer-events: none;
}

.wallartproduct  .lightgallery {
    width: 100%;
    position: relative;
    float: left;
    padding: 4px;
    clear: both;
    margin-bottom: 24px;
    background-color: #000;
}

.wallartproduct h3 {
  color: #fff;
  font-size: 32px;

}

.wallartproduct h1 {
  color: #fff;
  font-size: 44px;
}

.productcode {
  display: inline-block;
  padding: 4px 16px;
  margin-top: 12px;
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  float: left;
  width: 100%;
}

.productcode span {
  background-color: #ff5c38;
  display: inline-block;
  padding: 4px 16px;
  margin-top: 12px;
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  width: auto;
}


.wallartproduct .productprice {
    float: left;
    width: 100%;
    background-color: rgba(0,0,0,0);
    font-size: 1.4em;
    padding: 8px;
  margin-bottom: 12px;
  color: #2d2d2d;
  text-align: center;
  line-height: 1;
}



.wallartyproduct .productprice {
    float: left;
    width: 100%;
    background-color: #fff;
    font-size: 1.4em;
    padding: 8px;
  margin-bottom: 12px;
  color: #ff5c39;
  text-align: center;
  line-height: 1;
}

.wallartyproduct {
  border: 1px solid #333;
  padding: 8px;
  background-color: #fff;
  
}

.wallartyproduct {
  color: #333;
  
}

.wallartproducts .lightgallery {
    width: 100%;
    display: grid;
    padding: 0px;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}

.wallartproducts .lightgallery .ind_photo {
    display: block;
    width: 100%;
   float: left;
  padding: 0px;
  height: auto !important;
}



.wallarttype {
  width: auto;
  height: auto;
  background-color: #00bac2;
  position: absolute;
  right: 0px;
  top: 0px;
}



.wallartproducts .lightgallery .ind_photo a{
    display: block;
    width: 100%;
  float: left;
  padding: 0px;
}


.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
  padding: 32px;
}

#form1_generalcontact {
  float: left;
  width: 100%;
  padding: 32px;
  border: 1px solid rgb(255 255 255 / 20%);
  margin-top: 16px;
}


.hiddendiv {
  float: left;
  width: 100%;
  clear: both;
  display: block !important;
  color: #fff;
  line-height: 2.4  !important;
}

.contactline {
  float: left;
  width: 100%;
  clear: both;
   font-size: 24px;
   color: #fff;
  margin-bottom: 4px;
}

.contactformwrapper {border: 4px solid #fa5c39;display: block;float: left;padding: 24px;width: 100%;}

h3.keymessage,

.emailline {
  float: left;
  width: 100%;
  clear: both;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  padding-bottom: 12px;
}

.telicon {
  position: relative;
  padding: 4px 36px;
  padding-left: 36px;
  display: inline-flex;
  clear: both;
  font-size: 24px;
  background-color: rgba(256,256,256,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  border-radius: 8px;
  padding-right: 12px;
}

.telicon:before {
  content: "\6a";
  font-family: socialmedia;
  top: 4px;
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  left: 6px;
  color: #fff;
}

.emailicon {
  position: relative;
  padding: 4px 36px;
  padding-left: 36px;
  display: inline-flex;
  clear: both;
  font-size: 24px;
  background-color: rgba(256,256,256,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  border-radius: 8px;
  padding-right: 12px;
  
}

.emailicon:before {
  content: "\6c";
  font-family: socialmedia;
  top: 4px;
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  left: 6px;
  color: #fff;
}

.emailline a{
  float: left;
  width: 100%;
  clear: both;
  font-size: 24px;
  font-weight: 600;
   color: #fff;
}

.telicon a{
  float: left;
  width: 100%;
  clear: both;
  font-size: 24px;
  font-weight: 600;
   color: #fff;
}

.membersarea,
.privatepages {
    padding: 12px;
    text-align: center
}

.floater {
  
  float: left;
  width: 50%;
}

.contentbreak,
.portfolioheader {
    width: 100%;
    padding-top: 8px;
    float: left;
}

#relatedpages {
    float: left;
    margin-top: 16px;
    width: 100%;

    
}


#relatedpages h3{
    padding: 4px;
    width: auto;
    margin-bottom: 12px;
}

#relatedpages li{
    padding: 8px;
    width: 33%;
    margin: -8px -8px -4px -8px;
    display: inline-block;
}

#relatedpages li a{
    display: block;
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    background-color: #fff;
    font-size: 14px;
    
}

.whitebox {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1024px;
  
}


.internalpagelinks {
    float: left;
    width: 100%;
}


.calltoactionnew {
    float: left;
    width: 100%;
  padding: 16px;
}







.internalpagelinks a{
    width: auto;
    display: inline-block;
    padding: 6px 12px 6px 12px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff5c39+0,e03333+50,ff5c39+52,e03333+100 */
background: #ff5c39; /* Old browsers */
background: -moz-linear-gradient(top,  #ff5c39 0%, #e03333 50%, #ff5c39 52%, #e03333 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ff5c39 0%,#e03333 50%,#ff5c39 52%,#e03333 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ff5c39 0%,#e03333 50%,#ff5c39 52%,#e03333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c39', endColorstr='#e03333',GradientType=0 ); /* IE6-9 */

   -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 1px 1px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    -webkit-box-shadow: 1px 2px 2px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    box-shadow: 0 1px 1px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    color: #fafafa;
    text-align: center;
}




.externalpagelinks {
    float: left;
    width: 100%;
}

.externalpagelinks a{
    width: auto;
    display: inline-block;
    padding: 6px 12px 6px 12px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff5c39+0,e03333+50,ff5c39+52,e03333+100 */
background: #ff5c39; /* Old browsers */
background: -moz-linear-gradient(top,  #ff5c39 0%, #e03333 50%, #ff5c39 52%, #e03333 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ff5c39 0%,#e03333 50%,#ff5c39 52%,#e03333 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ff5c39 0%,#e03333 50%,#ff5c39 52%,#e03333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c39', endColorstr='#e03333',GradientType=0 ); /* IE6-9 */

   -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 1px 1px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    -webkit-box-shadow: 1px 2px 2px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    box-shadow: 0 1px 1px rgba(000, 000, 000, .5), inset 0 1px 1px rgba(255, 255, 255, .5);
    color: #fafafa;
    text-align: center;
}





.membersarea {
    float: left;
    width: 100%;
    background-color: #2b2b2b;
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 12px
}

.privatepages {
    float: left;
    width: 100%;
    background-color: #ff5c39;
    border: 4px dashed #333;
    margin-top: 12px;
    margin-bottom: 12px;
    border-radius: 8px
}

.contentbreak {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.contentbreak p{
    padding-bottom: 12px;
}

.mainportfolioarea {
    position: relative;
    border: 1px solid rgba(0, 0, 0, .1);
    float: left;
    width: 100%
}

.portfolioheader {
    padding-bottom: 24px;
    text-align: left
}

.textinnerleft {
    float: left;
    width: 50%;
    text-align: left;
    padding-right: 24px
}

.textinnerleft h3 {
    margin-top: 16px;
    color: #ff5c39;
    width: 100%;
    margin-bottom: 8px
}

.textinnerright {
    float: left;
    width: 50%
}

#prevnext {
    float: left;
    width: 100%;
    border-top: 2px solid #ff5c39;
    margin-top: 24px;
    padding: 24px;
    position: relative;
    z-index: 1;
    background-color: rgba(0, 0, 0, .2)
}

.mainportfolioarea:before {
    content: "";
    background-image: url(/images/maingridoverlay.png);
    opacity: .15;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    background-repeat: repeat;
    /*! z-index: 1 */
}

.videoarea {
    padding: 8px;
    background-color: #333;
    width: 49%;
    display: inline-block
}

.casevideoarea {
    padding: 8px;
    background-color: #333;
    width: 100%;
    display: inline-block
}

.diagonalgrey .videoarea h3, .videoarea h3 {
    color: #ff5c39
}

.videoarea video {
    margin-top: 12px
}

video {
    width: 100%;
    height: auto;
    background-size: cover;
    transition: 1s opacity;
    display: block;
    line-height: 0;
    padding: 0;
    margin: 0
}

video .controls {
    background-color: #ff5c39
}

[id*=tabbedpanels],
[id^=tabbedpanels] {
    width: 100%;
    float: left;
    text-align: left;
    position: relative;
    margin-top: 12px;
    margin-bottom: 24px;
    border: 1px solid #eee;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

[id*=tabbedpanels] h3,
[id^=tabbedpanels] h3 {
    font-weight: 400;
    font-size: 17px;
    line-height: auto;
    margin-top: 0;
    margin-bottom: 0;
    color: #333
}

.diagonalone [id*=tabbedpanels] p,
.diagonalone [id^=tabbedpanels] p {
  color: #333;
}

[id*=tabbedpanels] h3 a,
[id^=tabbedpanels] h3 a {
    width: 100%;
    float: left;
    position: relative;
    padding: 8px 8px 8px 32px;
    background-color: #eee;
    border-bottom: 1px solid #505050;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

[id*=tabbedpanels] div,
[id^=tabbedpanels] div {
    padding: 8px;
    float: left;
    background-color: #fff;
    color: #333;
    width: 100%
}

[id*=tabbedpanels] td div,
[id^=tabbedpanels]td div {
    padding: 0;
    float: left;
    background-color: #fff;
    color: #333
}

[id*=tabbedpanels] td p,
[id^=tabbedpanels]td p {
    padding: 0;
    margin: 0;
    float: left;
    background-color: #fff;
    color: #333
}

[id*=tabbedpanels] h3 a:before,
[id^=tabbedpanels] h3 a:before {
    position: absolute;
    top: 8px;
    left: 4px;
    content: 'r';
    font-size: 24px;
    font-family: SocialMedia;
    color: #ff5c39
}

[id*=tabbedpanels] .open a,
[id^=tabbedpanels] .open a {
    width: 100%;
    float: left;
    position: relative;
    padding: 8px 8px 8px 32px;
    background-color: #7b7b7b;
    color: #eee
}

[id*=tabbedpanels] .open a:before,
[id^=tabbedpanels] .open a:before {
    position: absolute;
    top: 8px;
    left: 4px;
    content: 'q';
    font-size: 24px;
    font-family: SocialMedia;
    color: #FFF
}

.controls {
    padding: 0;
    color: #ff5c39
}

.filterbox,
.filterbox label,
.sortbox,
.sortbox label {
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%
}

.filterbox label,
.sortbox label {
    float: left
}

label {
    margin: 0px;
}

button {
    display: inline-block;
    padding: 4px;
    background: #fff;
    border: 0 solid #ddd;
    color: #333;
    font-size: 14px;
    border-radius: 0;
    cursor: pointer;
    font-weight: 200
}

button.active {
    background: #ff5c39
}

button+label {
    margin-left: 1em
}

.container {
    padding: 0;
    margin-top: 0;
    text-align: justify;
    -webkit-backface-visibility: hidden
}

.container:after {
    content: '';
    display: inline-block;
    width: 100%
}

.container .gap,
.container .mix {
    display: inline-block;
    width: 33.3333%;
    float: left;
}

.container .mix {
    text-align: left;
    background: #03899c;
    margin-bottom: 0%;
    display: none;
    position: relative;
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  float: left;
}

.grid a {
    float: left;
    width: 100%;
    color: #333
}

.grid figure {
    position: relative;
    font-weight: 300;
    font-size: 12px;
    margin: 0;
    background: #333
}

.grid figure:after {
    content: "";
    position: absolute;
    width: auto;
    height: auto;
    padding: 4px;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 14px;
    background-color: #ff5c39;
    color: #fff;
    font-family: SocialMedia
}

.grid figcaption,
.grid svg {
    width: 100%;
    position: absolute
}

.grid .aerial figure:after,
.grid .commercial figure:after,
.grid .schoolsprimary figure:after,
.grid .schoolssenior figure:after,
.grid .behindscenes figure:after,
.grid .products figure:after {
    content: "r";
    background-color: #ff5c39;
    color: #fff
}

.grid figure img {
    position: relative;
    display: block;
    width: 100%;
    opacity: .5;
    -webkit-transition: opacity .3s;
    transition: opacity .7s
}

.grid figcaption {
    top: 10%;
    z-index: 11;
    padding: 10px;
    height: 40%;
    text-align: center
}

.grid figcaption h2 {
    color: #FFF;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s;
    font-size: 19px
}

.grid figcaption p {
    padding: 0 20px;
    color: #eee;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, transform .3s
}

.grid figcaption h2,
.grid figcaption p {
    -webkit-transform: translateY(80px);
    transform: translateY(40px)
}

.grid figcaption,
.grid figcaption h2,
.grid figcaption p,
.grid figure button {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-weight: 300
}

#slider-wrapper:after,
.rslides li {
    -webkit-backface-visibility: hidden
}

.grid svg {
    top: -1px;
    z-index: 10;
    height: 100%
}

.grid svg path {
    fill: #fff
}

.grid a:hover figure img {
    opacity: 1
}

.grid a:hover figcaption h2,
.grid a:hover figcaption p {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    font-size: 18px
}

.grid a:hover figcaption p {
    opacity: 0
}

.grid figure button {
    position: absolute;
    padding: 4px 20px;
    letter-spacing: 1px;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, transform .3s;
    top: 50%;
    left: 50%;
    max-width: 100%;
    background: 0 0;
    color: #fff;
    opacity: 0;
    -webkit-transform: translateY(-50%) translateX(-50%) scale(.25);
    transform: translateY(-50%) translateX(-50%) scale(.25);
    border: 2px solid #fff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 40px
}

.grid a:hover figure button {
    opacity: 1;
    -webkit-transform: translateY(-50%) translateX(-50%) scale(1);
    transform: translateY(-50%) translateX(-50%) scale(1)
}

.mb-style-3 {
    width: 100%
}

.mb-style-3 blockquote {
    background: #eee;
    padding: 16px;
    padding-bottom: 32px;
    border-radius: 5px;
    margin: 12px 0 0;
    color: #333;
    position: relative;
    float: left;
    width: 100%;
}

.stuff h1,
.stuff h2 {
    background-color: rgba(0, 0, 0, .5)
}

.mb-style-3 blockquote p {
    font-size: 12px;
    color: #333;
    font-weight: 400;
    font-style: normal;
    position: relative;
    padding-top: 8px
}

.mb-style-3 blockquote h4 {
    font-family: 'Over the Rainbow';
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    font-weight: 400;
    position: relative
}

.person,
.picturenavtext,
h1,
h2,
h3,
h4,
h5 {
    /* font-family: Oswald, sans-serif; */
}

#profilestwo,
.diagonalgrey,
.diagonalone,
.stuff h1,
.stuff h2,
h1,
h2,
h3,
h4,
h5 {
    font-weight: 600;
}

.mb-style-3 blockquote:before {
    content: '\201C';
    position: absolute;
    font-size: 140px;
    top: -72px;
    left: -12px;
    color: #ff5c39;
    text-shadow: 7px 14px 10px rgba(0, 0, 0, .1)
}

.mb-style-3 .mb-attribution {
    text-align: right;
    float: left;
    width: 100%;
    position: relative;
    padding-right: 90px;
    margin-bottom: 24px
}

.mb-style-3 .mb-attribution p {
    line-height: 1;
    padding-top: 12px;
    padding-right: 24px;
    margin: 0
}

cite {
    font-style: normal;
    padding-right: 24px;
    font-size: 13px
}

.mb-style-3 .mb-thumb {
    display: block;
    width: 90px;
    height: 90px;
    border: 5px solid #ff5c39;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: -25px;
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .6);
    overflow: hidden
}

.mb-style-3 .mb-thumb img {
    width: 100%;
    height: auto
}

.mb-style-3 .mb-author {
    font-size: 18px;
    color: #ff5c39
}

.mb-style-3 cite a {
    font-style: normal;
    color: #fff;
    line-height: 1;
    padding-right: 24px;
    margin: 0
}

.mb-style-3 cite a:hover {
    color: rgba(188, 147, 200, 1);
    text-shadow: 0 1px 1px rgba(255, 255, 255, .7)
}

p {
    color: #3f3f3f;
    line-height: 1.5;
    font-size: 18px;
}

body {
    line-height: 1.5;
    font-size: 18px;
}

.navigationarea {
    float: left;
    position: relative: z-index: 1000000000000000
}

#logoarea,
#logoarea.smaller {
    position: fixed;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    line-height: 0;
    margin: 0
}

#logoarea {
    padding-left: 24px;
    width: 300px;
    transition: all .3s ease-in;
}

#logoarea.smaller {
    width: 148px;
    padding: 10px;
    border: 0;
    transition: all .3s ease-in;
}

.burger,
.has-push-right .burger {
    z-index: 100000000000000000;
    float: right;
    position: absolute
}

.burger span,
.burger span.colourchange {
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in
}

h1 {
    color: #ff5c39;
    font-size: 32px
}

.stuff h1 {
    color: #a7aeb7;
    line-height: 1.4;
    margin: 0;
    padding: 0
}

.stuff h2 {
    color: #fff;
    line-height: 1;
    font-size: 17px;
    margin: 0;
    padding: 0 0 12px
}

#logoarea img {
    width: 100%;
    height: auto;
    line-height: 0
}

.burger {
    width: 54px;
    height: 54px;
    border: 0 solid #e17200;
    right: 8px;
    top: 0;
    border-radius: 20%
}

.has-push-right .burger {
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    background-color: rgba(256, 256, 256, 0);
    right: 4px;
    top: 4px;
    border-radius: 50%
}

.testimonials,
.textinner {
    position: relative;
    /*! z-index: 2; */
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
    display: inline-block;
}

.has-push-right .burger.colourchange {
    border: 3px solid #333
}

.textinner {
    width: 100%;
  padding: 12px;
}

.testimonials {
    padding-top: 8px;
    font-size: 19px;
    line-height: 1.4;
    color: #1d1d1d
}

.testimonials h3 {
    color: #444;
    padding-bottom: 12px;
    font-size: 24px
}

.burger span {
    display: block;
    padding: 2px;
    background-color: #ff5c39;
    color: #fff;
    width: 48px;
    position: absolute;
    right: -1px;
    text-align: right;
    transition: all .3s ease-in;
    opacity: 1;
}

header,
header.scrolled {
    position: fixed;
    z-index: 12
}

#mainarea,
#picturenav ul,
.diagonalgrey,
.diagonalone {
    text-align: center
}

.burger span.colourchange {
    background-color: #333;
    transition: all .3s ease-in
}

.has-push-right .burger span:nth-child(1),
.has-push-right .burger span:nth-child(2) {
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in
}

.has-push-right .burger span.colourchange:nth-child(1),
.has-push-right .burger span.colourchange:nth-child(3) {
    background-color: #333
}

.burger span:nth-child(1) {
    top: 8px
}

.burger span:nth-child(2) {
    top: 20px
}

.burger span:nth-child(3) {
    top: 32px
}

.has-push-right .burger span:nth-child(1) {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 20px;
    transition: all .3s ease-in;
    background-color: #fff
}

.has-push-right .burger span:nth-child(2) {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 0;
    transition: all .3s ease-in
}

.has-push-right .burger span:nth-child(3) {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 20px;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    background-color: #fff
}


.minicart table.cart img {
    max-width: 80px
}

table.cart img {
    max-width: 240px
}

table.cart {
    width: 100%;
    margin-bottom: 12px;
    float: left;
    clear: both;
  background-color: #fff;
}

table.cart td {
    padding: 8px;
    max-width: 120px
}

.guestcheckout a {
  padding: 4px;
  background-color: #ff5c39;
  color: #fff;
  font-family: Oswald, sans-serif;
  
}

.confirmation {
    width: 100%;
    margin-bottom: 12px;
    float: left;
    clear: both;
}

.checkoutnow {
    float: right;
  clear: both;
}

.updatebutton {
    float: right;
    margin-top: 0px;
    padding: 4px;
    color: #eee;
  clear: both;
  margin-bottom: 12px;
}

.updatebutton input[type="submit"] {
    color: #eee
}

.checkoutnow a {
    float: right;
    padding: 12px;
    font-size: 24px;
    background-color: #ff5c39;
    color: #eee;
}

.checkoutstep a {
    float: right;
    padding: 12px;
    font-size: 24px;
    background-color: #ff5c39;
    color: #eee;
}

table img {
    max-width: 200px;
    width: 100%
}

.minicart {
    float: left;
    width: 100%;
    padding: 8px;
    color: #2d2d2d;
    background-color: #212a29
}

.minicart p{
    
    color: #fff;
   
}

.leftcolumn {
    float: left;
    width: 50%;
    padding: 12px
}

.rightcolumn {
    float: left;
    width: 50%;
    padding: 12px
}


.catimages {
  width: 100%;
  float: left;
  margin-bottom: 24px;
}

.productsarea {
    float: left;
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
    background-color: rgba(256,256,256,0.6);
    padding: 12px;
}

.perchproduct {
    display: inline-block;
    width: 70%;
    margin: 0.5%;
    padding: 8px;
  height:500px;
    background-color: #fff;
    background-size: 6px
}





.perchproduct.threecolumn {
    float: left;
    width: 32%;
    margin: 0.5%;
    padding: 8px;
    background-color: #fff;
    background-size: 6px
}

.perchproduct.fourcolumn {
   
    float: left;
    width: 24%;
    margin: 0.5%;
    padding: 8px;
    background-color: #fff;
    background-size: 6px;
  text-align: center;
}








.perchproductimage {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
    width: auto;
    height: 500px;
    background-color: #eee;
  border: 8px solid #2d2d2d;
} 


.perchproduct.fourcolumn
.perchproductimage {

    height: 320px;

} 

.perchproduct.threecolumn
.perchproductimage {

    height: 300px;

} 


.smallcatarea {
    float: left;
    text-align: center;
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 12px;
}

.smallcat {
    display: inline-block;
    width: 23%;
    margin: 0.5%;
    padding: 8px;
    color: #eee;
    border: 1px solid #4f4d46;
    border-bottom: 4px solid #4f4d46;
    background-color: #615e57;
    background-size: 6px
}


.productsareasmall .perchproduct {
    float: left;
    width: 100%;
    margin: 0.5%;
    padding: 8px;
   border-bottom: 2px solid rgba(0,0,0,0.4);
    margin-bottom: 4px;
}

.productsareasmall .productimage {
    float: left;
    width: 30%;
    margin: 0;
    padding: 0px;
    border: none;
    background-color: #615e57;
    background-image: url(/images/maingridoverlay3.png);
    background-size: 6px
}


.productsareasmall .productdetail{
    float: left;
    width: 70%;
    margin: 0;
    padding: 0px;
    border: none;
    background-size: 6px
}


.perchproduct img {
    float: left;
    width: auto;
    max-width: 100%;
  width: 100% !important;
    
}

.productname {
    float: left;
    width: 100%;
    font-size: 1.4em;
    padding: 8px
}

.leftcolumn .productsku {
    float: left;
    width: 100%;
    color: #d73733;
    font-size: 18px;
    padding: 8px
}

.leftcolumn .productname {
    float: left;
    width: 100%;
    color: #d73733;
    font-size: 2.4em;
    padding: 8px
}

.productsku {
    float: left;
    width: 100%;
    color: #eee;
    font-size: 1.4em;
  padding: 8px;
}

.productimage {
    float: left;
    width: 100%;
    color: #eee;
    font-size: 1.4em;
    /*! padding: 8px; */
    border: 12px solid #fff
}

.productdescription {
    float: left;
    width: 100%;
    color: #ffffff;
    font-size: 14px;
    padding: 8px
}

.productname {
    float: left;
    width: 100%;
    color: #ff5c39;
    font-size: 1.7em;
    padding: 8px;
}


.basketdropdown {
    float: left;
    width: 100%;
    /*! background-image: url(/images/maingridoverlay3.png); */
background-size: 4px;
    padding: 0px;
    position: relative;
    height: 48px;
    /*! border-bottom: 1px solid rgba(0,0,0,0.2); */
    margin-bottom: 24px;
  clear: both;
}


.backtoshop {
  float: left;
  width: 100%;
  display: inline-block;
  clear: both;
  
  
}

.backtoshop a {
  float: right;
  width: auto;
  clear: both;
  padding: 4px;
  background-color: #ff5c39;
  color: #eee;
  font-size: 24px;
  
  
}

.shoplinks {
    width: auto;
    padding-top: 8px;
    padding-bottom: 8px;
  padding-left: 140px;
    float: left;
    margin-bottom: 16px;
    font-size: 12px;
       float: right;
  clear: both;
  text-align: right;
}


.shoplinks li {
    display: inline-block;
    padding-right: 4px
}



.shoplinks a {
    /*! color: #eee; */
    padding: 4px;
    font-size: 14px
}

.shoplinks li:nth-child(1) a {
    position: relative;
    padding-left: 32px
}



.largecat {
    float: left;
    width: 31.33333%; 
    padding: 8px;
    background-color: #fff;
    margin: 1%;
    font-size: 16px;
}

.largecat .catimage {
    float: left;
    width: 100%;  
}

.largecat h4 {
    float: left;
    width: 100%; 
    font-size: 32px;
}

.rightcolumn .productname {
    color: #333
}

.rightcolumn .productname {
    color: #333;
    font-size: 40px
}

.rightcolumn .productsku {
    color: #615e57;
    font-size: 14px
}

.rightcolumn .productdescription {
    color: #333;
    font-size: 16px
}

.rightcolumn .productprice {
    float: left;
    width: 100%;
    color: #ff5c39;
    font-size: 2em;
    padding: 8px
}

.productprice {
    float: left;
    width: 100%;
    background-color: #2d2d2d;
    font-size: 1.4em;
    padding: 8px;
  margin-bottom: 12px;
  color: #ff5c39;
  text-align: center;
  line-height: 1;
}


.discount {
  max-width: 300px;
  float: right;
  text-align: right;
}

.productsaleprice {
    float: left;
    width: 100%;
    color: #d73733;
    font-size: 1.4em;
    padding: 8px;
    display: none
}

.productvariants {
    float: left;
    width: 100%;
    color: #ccc;
    font-size: 18px;
    padding: 8px;
    background-color: #333;
    margin-bottom: 16px;

}

.productvar {
    float: left;
    width: 100%;
    font-size: 18px;
    padding: 4px;
    border: 1px solid #ddd;
    background-color: #fff;
    margin-top: 16px;
    margin-bottom: 16px;
}

.addtocart {
    float: right;
    font-size: 18px];
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    color: #eee
}

.productvar label {
    float: left;
    width: 100%;
    font-size: 18px;
    padding: 4px;
    background-color: #fff;
    margin-top: 0px
}

.status {
    float: left;
    width: 100%;
    color: #d73733;
    font-size: 1.4em;
    padding: 8px;
    display: none
}

.productcategory {
    float: left;
    width: 100%;
    color: #d73733;
    font-size: 1.4em;
    padding: 8px;
    display: none
}

.producttradeprice {
    float: left;
    width: 100%;
    color: #d73733;
    font-size: 1.4em;
    padding: 8px;
    display: none
}

.saleprice,
.taxgroup,
.hiddendetails {
    display: none
}

.productbrand {
    float: left;
    width: 100%;
    color: #d73733;
    font-size: 1.4em;
    padding: 8px;
    display: none
}

.productslug {
    float: left;
    width: 100%;
    color: #d73733;
    font-size: 1.4em;
    padding: 8px;
    display: none
}





/* Dropdown Button */
.dropbtn {
 width: auto;
 height: 40px;
 display:block;

 font-size: 16px;
 padding:8px;
 padding-left: 36px;
 text-align:center;
 cursor:pointer;
 color: #ffffff;
display: none;
    background-color: #333;
 border: 1px solid #eee;
    font-family: 'Arima Madurai', cursive;
font-weight: 300 !important;

}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: rgba(0,0,0,0.7);
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: absolute;
    display: none;
    top: 4px;
    left: 4px;
    
}

.dropdown:before {
    position: absolute;
    content: "}";
    font-family: SocialMedia;
    top: 4px;
    left: 4px;
    color: #eee;
    font-size: 28px;
    
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    left: 0px;
    z-index: 1;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      transition: all 0.8s ease-in-out;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 8px;
    text-decoration: none;
    display: block;
    width: 100%;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}



/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}



.checkoutnowsmall a {
    float: left;
    color: #fff;
    background-color: #ff5c39;
}

.checkoutnowsmall a:hover {
    color: #333;
    background-color: #ccc;
}





header {
    width: 100%;
    background-color: rgba(256, 256, 256, 0);
    height: 148px;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    border-bottom: 1px solid transparent
}

header.scrolled {
    background-color: rgba(256, 256, 256, .9);
    height: 68px;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    border-bottom: 1px solid rgba(0, 0, 0, 1)
}

#mainarea,
#picturenav ul li a,
.diagonalone,
.rslides,
.rslides_container {
    position: relative
}

body,
html {
    margin: 0;
    overflow-x: hidden;
    width: 100%
}

.rslides h1 {
    top: 30vw;
    font-size: 3.5vw;
    width: 100%;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, .8)
}

.rslides h2 {
    top: 36vw;
    font-size: 1.4vw;
    width: 100%;
    color: #fff
}

div.slide-left p {
    animation: slide-left 10s
}

.rslides_container_small {
    padding: 8px;
    background-color: #fff;
    border: 1px solid #eee;
    float: left;
    position: relative
}

.rslides_tabs {
    font-size: 1.4vw;
    padding: 6px 0;
    z-index: 10000000
}

.rslides_tabs a {
    width: 9px;
    line-height: 20px;
    padding: 2px
}

#picturenav,
.picturenavtext {
    line-height: 1;
    width: 100%;
    float: left
}

.rslides_tabs a:hover {
    border: 0
}

.rslides_tabs li:first-child {
    margin-left: 0
}

.rslides_tabs .rslides_here a {
    color: #fff
}

.rslides1_nav {
    top: 70%;
    margin-top: -45px;
    background-size: 190%
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0
}

.diagonalgrey .membersarea h3,
.membersarea h3 {
    color: #919191
}


.contentbreak h3 {
    color: #ff5c39;
    font-family: 'Open Sans', sans-serif;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 21px;
}

h2 {
    /* color: #ffffff; */
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 24px;
}


.whitebox h2 {
    color: #333;
   
}

#mainarea {
    float: left;
    clear: both;
    /*! z-index: 1; */
    padding: 0;
    width: 100%
}

a {
    color: inherit;
    text-decoration: none
}


.diagonalgrey .photogallery_link a{
  background-color: #333;
  padding: 8px;
  width: auto;
  display: inline-block;
  border-radius: 8px;
  padding-left: 32px;
  position: relative;
}


.diagonalgrey .photogallery_link a:before {
  content: "K";
  left: 4px;
  font-family: socialmedia;
  position: absolute;
  font-size: 24px;
}



#picturenav {
    z-index: 0
}

.picturenavtext {
    background-color: #2b2b2b;
    padding: 8px;
    z-index: 3
}

.picturenavimagearea {
    float: left;
    width: 100%
}

#picturenav ul {
    width: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 0;
    z-index: 0
}

#picturenav ul li {
    display: inline-block;
    width: 32.3%;
    margin: 0;
    line-height: 0;
    max-width: 250px;
}

#picturenav ul li a {
    font-size: 18px;
    float: left;
    width: 100%
}

#picturenav ul li img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 8px solid #555
}

.diagonalgrey:before,
.diagonalone:before {
    background-position: bottom left;
    background-repeat: no-repeat;
    width: 100%;
    background-size: 100% 48px;
    height: 48px;
    content: " ";
    left: 0;
    top: -48px;
  z-index: 1;
}

#breadcrumbarea {
    width: 100%;
    float: left;
    padding-top: 8px;
    margin-bottom: 16px
}

.breadcrumbs {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    padding-top: 8px;
    padding-bottom: 8px;
    float: left;
    margin-bottom: 12px
}

.breadcrumbs li {
    float: left;
    padding-right: 4px;
    color: #ff5c39
}

.breadcrumbs a {
    color: #919191;
    padding: 4px
}

.person {
    font-size: 12px;
    color: #ff5c39
}

.clippingarea {
    float: left;
    width: 100%
}


.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
    margin-top: 12px;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.diagonalone {
    float: left;
    clear: both;
    padding: 16px 16px 16px;
    width: 100%;
    background-color: #2b2b2b;
    color: #eee;
}

.diagonalone p {
    color: #eee
}



.diagonalone .hentry p {
    color: #333
}

.diagonalone:before {
    background-image: url(/images/darkgreydiagonal.png);
    position: absolute
}

.diagonalgrey {
    float: left;
    clear: both;
    position: relative;
    padding: 16px;
    width: 100%;
    background-color: #eee;
    color: #eee
}

.diagonalgrey h3 {
    color: #333;
    margin-bottom: 12px
}

.diagonalgrey:before {
    background-image: url(/images/lightgreydiagonal.png);
    position: absolute
}

#profilestwo,
#socialmedia,
.diagonaltwo {
    position: relative;
    text-align: center;
    width: 100%;
    float: left;
    clear: both
}

#profilestwo {
    background: url(../images/pattern.png) top left #ff5c39;
    padding: 16px;
    color: #eee
}

.diagonaltwo {
    margin-top: 60px;
    padding: 16px;
  padding-bottom: 32px;
    background-color: #919191
}

#socialmedia {
    margin-top: 0;
    padding: 32px;
    background-color: #ff5c39;
    color: #000
}


.ctainsert {
    margin-top: 0;
    padding: 16px;
    background-color: #ff5c39;
  width: 100%;
  float: left;
  margin: 24px 0px;
  border-radius: 8px;
  
}

#footerbase:after {
    content: "";
    background-image: url(/images/jolt_full_logo.png);
    opacity: 1;
    position: absolute;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: auto 70px;
    background-position: right 0 top 0;
    width: 150px;
    height: 74px;
    bottom: 8px;
    right: 20px;
}

.caption1,
.caption2 {
    position: absolute;
    display: block;
    padding: 8px;
    z-index: 1000;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    width: 100%;
    left: 0;
    color: #fff;
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
    text-align: center
}

.diagonaltwo:before {
    background-image: url(/images/midgreydiagonal.png);
    background-position: bottom left;
    background-repeat: no-repeat;
    width: 100%;
    background-size: 100% 48px;
    height: 48px;
    content: " ";
    position: absolute;
    top: -48px;
    left: 0
}

.caption1 {
    font-weight: 400;
    bottom: 20%;
    font-size: 5vw;
}

.caption1.smaller {
    opacity: .1;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-filter: blur(4px);
    filter: blur(4px)
}

.caption2 {
    bottom: 32%;
    font-size: 3vw;
    z-index: 2
}

.caption2.smaller {
    font-size: 60px;
    opacity: .1;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-filter: blur(4px);
    filter: blur(4px)
}

.rslides {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    z-index: 0;
    background-color: #fff
}

.rslides ul {
    padding: 0;
    margin: 0
}

.rslides li {
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0
}

.rslides li:first-child {
    position: relative;
    display: block;
    float: left
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0
}

#overlaybox {
    position: absolute;
    z-index: 0;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 180px
}

body.sixthformstyle .rslides_container {
    margin-bottom: 0;
    position: relative;
    float: left;
    width: 100%;
    padding: 0;
    border: 0;
    margin-top: 12px
}

.rslides_container {
    margin-bottom: 12px;
    position: relative;
    float: left;
    width: 100%;
    margin-top: 0
}

#slider-wrapper:after {
    width: 100%;
    height: 60px;
    position: absolute;
    background-color: #fff;
    bottom: -30px;
    left: 0;
    -ms-transform: skewX(-2deg);
    -webkit-transform: skewX(-2deg);
    transform: skewX(-2deg);
    -ms-transform: skewY(-2deg);
    -webkit-transform: skewY(-2deg);
    transform: skewY(-2deg);
    backface-visibility: hidden;
    z-index: 0
}

#slider-wrapper:before {
    content: "";
    background-image: url(mainbanneroverlay.png);
    background-repeat: repeat;
    opacity: .3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    
    z-index: 1
}

#slider-wrapper,
.bannerwrapper {
    position: relative;
    float: left;
    height: auto;
    width: 100%
}

#slider-wrapper {
    z-index: 1
}


.rslides:before {
    content: "";
    /* background-image: url(/images/overlaygrad.png); */
    background-repeat: repeat-x;
    opacity: 1.0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 10;
}



.whitepage #slider-wrapper img {
    width: 100%
}

#slider-wrapper p {
    font-size: 20px;
    line-height: 28px;
    padding-left: 290px
}

#slider-wrapper-small {
    max-width: 1080px;
    z-index: 0;
    margin-top: -8px;
    border: 8px solid #fff
}

.rslides1_nav {
    position: absolute;
    bottom: 50%;
    left: 0;
    z-index: 1;
    opacity: .7;
    text-indent: -9999px;
    text-decoration: none;
    height: 48px;
    width: 48px;
    background: url(themes.png) left top no-repeat
}

.rslides1_nav:active {
    opacity: 1
}

.rslides1_nav.next {
    left: auto;
    background-position: right top;
    right: 0
}

.rslides2_nav {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=1);
    width: auto;
    text-indent: -9999px;
    height: 91%
}

.rslides2_nav.next {
    left: auto;
    right: 0
}

.rslides3_nav {
    position: absolute;
    opacity: .6;
    text-indent: -9999px;
    top: 0;
    bottom: 0;
    left: 0;
    background: url(themes.gif) left 50% no-repeat #000;
    width: 38px
}

.rslides3_nav:active {
    opacity: 1
}

.rslides3_nav.next {
    left: auto;
    background-position: right 50%;
    right: 0
}

.rslides_tabs {
    position: absolute;
    width: 100%;
    bottom: 80px;
    text-align: center
}

.rslides_tabs li {
    display: inline;
    float: none;
    margin-right: 5px;
    z-index: 3;
    position: relative
}

.rslides_tabs a {
    text-indent: -9999px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background: #ff5c39;
    display: inline-block;
    height: 9px
}

.rslides_tabs .rslides_here a {
    background: #222;
    background: rgba(0, 0, 0, .8)
}

#horizontal {
    background-image: url(/images/animated1.gif);
    background-repeat: repeat-x;
    -webkit-transition: background 4s ease-in-out;
    -moz-transition: background 4s ease-in-out;
    -o-transition: background 4s ease-in-out;
    transition: background 4s ease-in-out;
    height: 120px;
    background-size: 300px 200px;
    border-top: 1px solid #eee;
    float: left;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 0;
    background-position: center center;
    display: none
}

#horizontal.moving {
    -webkit-transition: background 4s ease-in-out;
    -moz-transition: background 4s ease-in-out;
    -o-transition: background 4s ease-in-out;
    transition: background 4s ease-in-out
}

.servicesarea {
    display: inline-block;
    max-width: 1180px;
    width: 100%;
    padding: 16px
}

.servicesarea a {
    padding: 4px;
    float: left;
    width: 33.333333333333%;
}

.servicedesc,
.serviceheader,
.servicesingle {
    float: left;
    width: 100%
}

.serviceheader {
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
    padding: 14px 2px 2px;
    font-size: 20px;
    line-height: 24px;
    height: 64px;
}

.servicedesc {
    font-size: .8em;
    padding-bottom: 12px
}

.servicesingle {
    display: inline-block;
    background-color: #fff;
    border-radius: 4px;
    border-bottom: 2px solid #ccc
}

.serviceimage {
    width: 60%;
    opacity: 1;
    height: auto;
    line-height: 0;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    z-index: 0
}

.servicesingle .serviceimage:after,
.servicesingle:hover .serviceimage:after {
    position: absolute;
    content: "";
    transition: all .2s ease-in-out;
    opacity: 1;
    margin-left: auto;
    margin-right: auto
}

.servicesingle .serviceimage:after {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 8px solid #eee;
    border-radius: 50%;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    background-color: #c1c1c1;
    z-index: -1;
}

.servicesingle:hover .serviceimage:after {
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
    border: 12px solid #ff5c39;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    background-color: #777
}

.servicesingle:hover img {
    border-radius: 50%;
    border: 1px solid #555;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    background-color: #777;
    opacity: 1
}

.hoverlink,
.mix .hoverlink {
    background-color: #333;
    overflow: hidden;
    position: relative;
    float: left
}

.servicesingle img {
    width: 100%;
    padding: 8px;
}

#hoverlinkarea {
    float: left;
    width: 100%;
    padding: 16px
}

.mix .hoverlink {
    width: 100%;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

.hoverlink,
.hoverlink:hover {
    transition: all .8s ease-in-out
}

.hoverlink {
    width: 33.333333%;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

.hoverlink:hover {
    background-color: #4bbdd3;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

#hoverlinkarea a:nth-child(1) div.hoverlink:hover {
    background-color: #D346A2;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

#hoverlinkarea a:nth-child(2) div.hoverlink:hover {
    background-color: #4bbdd3;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

#hoverlinkarea a:nth-child(3) div.hoverlink:hover {
    background-color: #856898;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

#hoverlinkarea a:nth-child(4) div.hoverlink:hover {
    background-color: #D346A2;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

#hoverlinkarea a:nth-child(5) div.hoverlink:hover {
    background-color: #4bbdd3;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

#hoverlinkarea a:nth-child(6) div.hoverlink:hover {
    background-color: #856898;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

.hoverlink .bottomline,
.hoverlink .topline {
    width: 0;
    transition: all .8s ease-in-out;
    height: 4px;
    background-color: #fff;
    z-index: 2;
    position: absolute
}

.hoverlink .topline {
    top: 12px;
    right: 0;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

.hoverlink .bottomline {
    left: 0;
    bottom: 12px;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

.hoverlink img,
.hoverlink:hover .topline {
    transition: all .8s ease-in-out;
    width: 100%
}

.hoverlink:hover .topline {
    height: 4px;
    position: absolute;
    top: 12px;
    background-color: #fff;
    z-index: 2;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

.hoverlink:hover .bottomline {
    width: 100%;
    height: 4px;
    position: absolute;
    bottom: 12px;
    background-color: #fff;
    z-index: 2
}

.hovertextbox,
select[multiple],
textarea[rows] {
    height: auto
}

.scrolllink a,
.scrolllinkbottom a {
    background-color: rgba(256, 256, 256, .8)
}

.hoverlink img {
    top: 0;
    float: left;
    opacity: .6;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

.hoverlink:hover img {
    float: left;
    opacity: 1;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

.hovertextbox {
    position: absolute;
    width: 100%;
    padding: 8px;
    text-align: center;
    color: #fff;
    bottom: 20px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out
}

.hoverlink:hover .hovertextbox {
    position: absolute;
    width: 100%;
    height: auto;
    padding: 8px;
    text-align: center;
    color: #fff;
    bottom: 30px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out
}

.hoverheader {
    font-size: 15px;
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
}

.hoverexcerpt {
    font-family: Oswald, sans-serif;
    font-size: 26px;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    text-transform: uppercase;
    line-height: 32px;
}

.hoverlink:hover .hoverexcerpt {
    font-size: 32px;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out
}

.hovermore {
    font-size: 16px;
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
    padding: 4px;
    width: 100%;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto
}

.scrolllink a,
.scrolllinkbottom a:after {
    font-family: SocialMedia
}

.fb-like,
article.h-entry {
    padding: 8px
}

.hoverlink img.hover,
.hoverlink:hover img.portfolioimage {
    display: none
}

.hoverlink:hover img.hover {
    display: block
}

.scrolllink {
    position: absolute;
    width: 100%;
    z-index: 100000;
    bottom: 16px;
    text-align: center
}

.scrolllink a {
    width: 60px;
    height: 60px;
    font-size: 32px;
    position: relative;
    border: 1px solid #ff5c39;
    border-radius: 4px
}

.scrolllinkbottom a {
    border: 1px solid #ff5c39;
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 20000;
    border-radius: 4px;
    right: 4px;
    bottom: 4px
}

.blogbanner img,
article.h-entry {
    background-color: #fff;
    float: left;
    width: 100%
}

.scrolllinkbottom a:after {
    content: "p";
    position: absolute;
    font-size: 24px;
    width: 100%;
    text-align: center;
    right: 0
}

.address,
.blogdetails,
.hentry,
.hentrytwo,
footer {
    position: relative
}

.h-entry h1 a {
    font-family: 'Over the Rainbow';
    color: #333
}

.fb-like {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    float: left;
    border: 1px solid #eee;
    text-align: center
}

.archivearea {
    float: left;
    width: 100%;
    padding: 12px;
    border-top: 4px solid #ff5c39
}

.meta {
    color: #333;
    float: left;
    width: 100%
}

.nuvo_textarea {
    float: left;
    width: 100%
}

#facebook {
    width: 100%
}

.blogbanner {
    width: 100%;
    float: left;
    margin-bottom: 32px
}

.h-entry p {
    margin-top: 12px;
    margin-bottom: 12px;
    color: #333
}

.blogbanner img {
    padding: 4px;
    border: 1px solid #ccc
}

fieldset[disabled] input[type=color],
fieldset[disabled] input[type=date],
fieldset[disabled] input[type=datetime-local],
fieldset[disabled] input[type=datetime],
fieldset[disabled] input[type=email],
fieldset[disabled] input[type=month],
fieldset[disabled] input[type=number],
fieldset[disabled] input[type=password],
fieldset[disabled] input[type=search],
fieldset[disabled] input[type=tel],
fieldset[disabled] input[type=text],
fieldset[disabled] input[type=time],
fieldset[disabled] input[type=url],
fieldset[disabled] input[type=week],
fieldset[disabled] textarea,
input[type=color]:disabled,
input[type=color][disabled],
input[type=color][readonly],
input[type=date]:disabled,
input[type=date][disabled],
input[type=date][readonly],
input[type=datetime-local]:disabled,
input[type=datetime-local][disabled],
input[type=datetime-local][readonly],
input[type=datetime]:disabled,
input[type=datetime][disabled],
input[type=datetime][readonly],
input[type=email]:disabled,
input[type=email][disabled],
input[type=email][readonly],
input[type=month]:disabled,
input[type=month][disabled],
input[type=month][readonly],
input[type=number]:disabled,
input[type=number][disabled],
input[type=number][readonly],
input[type=password]:disabled,
input[type=password][disabled],
input[type=password][readonly],
input[type=search]:disabled,
input[type=search][disabled],
input[type=search][readonly],
input[type=tel]:disabled,
input[type=tel][disabled],
input[type=tel][readonly],
input[type=text]:disabled,
input[type=text][disabled],
input[type=text][readonly],
input[type=time]:disabled,
input[type=time][disabled],
input[type=time][readonly],
input[type=url]:disabled,
input[type=url][disabled],
input[type=url][readonly],
input[type=week]:disabled,
input[type=week][disabled],
input[type=week][readonly],
select:disabled,
textarea:disabled,
textarea[disabled],
textarea[readonly] {
    background-color: #DDD;
    cursor: default
}

.textinner input,
.textinner textarea {
    font-family: Oswald, sans-serif;
    text-align: center;
    font-size: 1.2em;
    color: #ff5c39
}

.address:after,
.emailaddress:after,
.openingtimes:after,
.telephone:after {
    left: 0;
    top: 0;
    font-family: SocialMedia
}

fieldset,
fieldset a,
fieldset p {
    color: #ff5c39;
}

input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
textarea {
    -webkit-appearance: none;
    border-radius: 4px;
    background-color: #d3d3d3;
    border-style: solid;
    border-width: 1px;
    border-color: #2b2b2b;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    display: block;
    padding: 4px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all .15s linear;
    margin-bottom: 8px
}

input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
textarea:focus {
    background: #fafafa;
    border-color: #999;
    outline: 0
}

input[type=color].radius,
input[type=date].radius,
input[type=datetime-local].radius,
input[type=datetime].radius,
input[type=email].radius,
input[type=month].radius,
input[type=number].radius,
input[type=password].radius,
input[type=search].radius,
input[type=tel].radius,
input[type=text].radius,
input[type=time].radius,
input[type=url].radius,
input[type=week].radius,
textarea.radius {
    border-radius: 3px
}

form .row .prefix-radius.row.collapse button,
form .row .prefix-radius.row.collapse input,
form .row .prefix-radius.row.collapse select,
form .row .prefix-radius.row.collapse textarea {
    border-radius: 0 3px 3px 0;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px
}

form .row .postfix-radius.row.collapse button,
form .row .postfix-radius.row.collapse input,
form .row .postfix-radius.row.collapse select,
form .row .postfix-radius.row.collapse textarea,
form .row .prefix-radius.row.collapse .prefix {
    border-radius: 3px 0 0 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px
}

form .row .postfix-radius.row.collapse .postfix {
    border-radius: 0 3px 3px 0;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px
}

form .row .prefix-round.row.collapse button,
form .row .prefix-round.row.collapse input,
form .row .prefix-round.row.collapse select,
form .row .prefix-round.row.collapse textarea {
    border-radius: 0 1000px 1000px 0;
    -webkit-border-bottom-right-radius: 1000px;
    -webkit-border-top-right-radius: 1000px
}

form .row .postfix-round.row.collapse button,
form .row .postfix-round.row.collapse input,
form .row .postfix-round.row.collapse select,
form .row .postfix-round.row.collapse textarea,
form .row .prefix-round.row.collapse .prefix {
    border-radius: 1000px 0 0 1000px;
    -webkit-border-bottom-left-radius: 1000px;
    -webkit-border-top-left-radius: 1000px
}

form .row .postfix-round.row.collapse .postfix {
    border-radius: 0 1000px 1000px 0;
    -webkit-border-bottom-right-radius: 1000px;
    -webkit-border-top-right-radius: 1000px
}

input[type=submit] {
    -webkit-appearance: none;
    border-radius: 0;
    font-size: 14px;
    color: #fff;
    padding: 4px 12px;
    margin-top: 0;
    border: 0 solid #ccc;
    background-color: #5C504C;
  display: inline-block;
}

textarea {
    max-width: 100%
}

select {
    background-color: #FAFAFA;
    background-image: url('data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+');
    background-position: 100% center;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    padding: .5em;
    font-size: .875em;
    color: rgba(0, 0, 0, .75);
    line-height: normal;
    border-radius: 0;
    height: 2.3125em
}

select::-ms-expand {
    display: none
}

select.radius {
    border-radius: 3px
}

select:hover {
    background-color: #f3f3f3;
    border-color: #999
}

input[type=checkbox],
input[type=file],
input[type=radio],
select {
    margin: 0 0 1em
}

input[type=checkbox]+label,
input[type=radio]+label {
    display: inline-block;
    margin-left: .5em;
    margin-right: 1em;
    margin-bottom: 0;
    vertical-align: baseline
}

input[type=file] {
    width: 100%
}

fieldset {
    /*! background-color: #2b2b2b; */
    width: 100%;
    float: left
}

fieldset legend {
    font-weight: 700;
    /*! background: #2b2b2b; */
    padding: 0;
    margin-bottom: 12px;
    float: left;
    width: 100%
}

[data-abide] .error small.error,
[data-abide] .error span.error,
[data-abide] small.error,
[data-abide] span.error {
    display: block;
    padding: .375em .5625em .5625em;
    margin-top: -1px;
    margin-bottom: 1em;
    font-size: .75em;
    font-weight: 400;
    font-style: italic;
    background: #f04124;
    color: #FFF
}

[data-abide] small.error,
[data-abide] span.error {
    display: none
}

.error small.error,
small.error,
span.error {
    display: block;
    padding: .375em .5625em .5625em;
    margin-top: -1px;
    font-size: .75em;
    font-style: italic;
    background: #f04124;
    font-weight: 400
}

small.error,
span.error {
    margin-bottom: 1em;
    color: #FFF
}

.error input,
.error select,
.error textarea {
    margin-bottom: 0
}

.error input[type=checkbox],
.error input[type=radio] {
    margin-bottom: 1em
}

.error label,
.error label.error {
    color: #f04124
}

.error small.error {
    margin-bottom: 1em;
    color: #FFF
}

.error>label>small {
    color: #676767;
    background: 0 0;
    padding: 0;
    text-transform: capitalize;
    font-style: normal;
    font-size: 60%;
    margin: 0;
    display: inline
}

.error span.error-message {
    display: block
}

input.error,
select.error,
textarea.error {
    margin-bottom: 0
}

label.error {
    color: #f04124
}

#form1_submit {
    margin-top: 12px;
    width: 20%;
    padding: 4px;
    margin-bottom: 4px;
  background-color: #ff5c39;
  font-size: 24px;
}

.hentry,
.hentrytwo,
.hfeed {
    width: 100%;
    float: left
}

.hfeed {
    background-color: #fff;
    text-align: left
}

.hentry p,
.hentrytwo p {
    color: #333
}

.hentry .blogimage {
    width: 50%;
    float: left
}

.hentrytwo .blogimage {
    width: 50%;
    float: right
}

.blogimage {
    width: 50%;
    float: left
}

.blogimage img,
.entry-published {
    width: 100%;
    float: left
}

.entry-published {
    border-bottom: 1px solid #939393;
    padding-bottom: 12px;
    margin-bottom: 12px
}

.blogdetails {
    width: 50%;
    float: left;
    padding: 16px
}


footer {
    width: 100%;
    float: left;
}

#slickslidesarea {
  width: 100%;
  float: left;
  background-color: #d7d5d5;
  padding-bottom: 24px;
}

.blogdetails .shinybuttons a {
    float: left;
    padding: 8px;
    border: 1px solid #939393;
    margin-top: 24px;
    color: #939393
}

.hi-icon,
.hi-icon:after,
.nuvo_imagearea.circularpic img {
    border-radius: 50%
}

.blogdetails h3 {
    font-size: 20px;
    color: #ff5c39
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.thirdcolumn {
    width: 33.3333333333%;
    float: left;
    text-align: left
}


form .thirdcolumn {
    width: 32%;
    display: inline-block;
  float: none;
  padding: 4px;
    text-align: center;
}

form .quartercolumn {
    width: 24%;
    display: inline-block;
  float: none;
  padding: 4px;
    text-align: center;
}


form .quartercolumn select {
    width: 100%;
  float: left;
  padding: 4px;
    text-align: center;
}

form .quartercolumn label {
    width: 100%;
  float: left;
  padding: 4px;
    text-align: center;
}


.bespokeotpions {
  width: 100%;
  float: left;
  background-color: rgba(256,256,256,0.1);
  padding: 12px;
}

form .thirdcolumn label:nth-child(1){
    width: 100%;
  float: left;
  color: #fff;
  padding-top: 8px;
}


#form1_prospectusform {
  border: 1px solid #fff;
  float: left;
  padding: 8px;
  
}
form .thirdcolumn select{
  width: 100%;
  text-align: center;
}

.addressinfo {
    text-align: left;
    padding-left: 12px;
    padding-right: 12px
}

.address,
.emailaddress,
.openingtimes,
.telephone {
    padding-left: 32px
}

.address:after {
    content: "m";
    position: absolute
}

.openingtimes {
    position: relative
}

.openingtimes:after {
    content: "k";
    position: absolute
}

.telephone {
    position: relative
}

.telephone:after {
    content: "j";
    position: absolute
}

.emailaddress {
    position: relative
}

.emailaddress:after {
    content: "l";
    position: absolute
}

.thirdcolumn li {
    list-style: disc;
    margin-left: 16px;
    padding-top: 4px
}

.thirdcolumn h3 {
    text-align: left;
    color: #232174;
    font-size: 18px
}

#footerbase,
.downloadname,
.hi-icon {
    text-align: center
}

#footerbase {
    position: relative;
    float: left;
    width: 100%;
    padding: 8px;
    background-color: #333;
    color: #ccc;
    font-size: 12px;
    height: 100px
}

.hi-icon {
    display: inline-block;
    font-size: 0;
    cursor: pointer;
    margin: 8px;
    width: 54px;
    height: 54px;
    position: relative;
    z-index: 1;
    color: #fff
}

.hi-icon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.hi-icon:before {
    speak: none;
    font-size: 32px;
    line-height: 54px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased
}

.hi-icon-effect-1 .hi-icon {
    background: rgba(255, 255, 255, .1);
    margin: 0;
    -webkit-transition: background .2s, color .2s;
    -moz-transition: background .2s, color .2s;
    transition: background .2s, color .2s
}

.hi-icon-effect-1 .hi-icon:after {
    top: -7px;
    left: -7px;
    padding: 7px;
    box-shadow: 0 0 0 4px #fff;
    -webkit-transition: -webkit-transform .2s, opacity .2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform .2s, opacity .2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    transition: transform .2s, opacity .2s;
    transform: scale(.8);
    opacity: 0
}

.hi-icon-effect-1a .hi-icon:hover {
    background: rgba(255, 255, 255, 1);
    color: #333
}

#profilesone,
.box {
    background-color: #fff;
    float: left
}

.hi-icon-effect-1a .hi-icon:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.nuvo_imagearea {
    width: 33.333%;
    padding: 4px;
    margin-bottom: 8px;
    float: left;
    /* max-width: 300px; */
}

.nuvo_imagearea img {
    
    padding-bottom: 8px;
   
}

.nuvo_imagearea figcaption {
    font-size: 12px;
    padding-bottom: 8px;
    color: #aaa;
}

#profilesone {
    position: relative;
    width: 100%;
    color: #eee;
    font-weight: 300;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px
}

.box .description,
.box.clicked .description {
    position: absolute;
    top: 8px;
    border-left: 8px solid #fff;
    border-right: 8px solid #fff
}

.usefulforms {
  text-align: center;
  float: left;
  width: 100%;
  
}

.usefulforms .box {
  display: inline-block;
  text-align: center;
 
  
}


.usefulforms .box{
  display: inline-block;
  float: none;
  color: #333;
  padding: 8px;
  padding-right: 48px;
  position: relative;
  
}

.usefulforms .box:after {
 content: "E";
 font-family: socialmedia;
 right: 4px;
 position: absolute;
 font-size: 24px;

  
}

.usefulforms .filename {
  float: left;
  color: #333;
  
}

.usefulforms .filesize {
  float: right;
  color: #333;
  
}

.box {
    width: 33.3333333%;
    height: auto;
   display: inline-block;
}

.box img {
    width: 100%;
    height: auto;
    float: left
}

.productcaption {
    float: left;
    height: 40px;
    width: 100%;
    color: #333;
    padding: 8px
}

.box .description {
    opacity: 0;
    width: 100%;
    background-color: #555;
    -moz-transition: all .15s ease-in;
    -o-transition: all .15s ease-in;
    -webkit-transition: all .15s ease-in;
    transition: all .15s ease-in;
    z-index: 10;
    left: 0;
    padding: 12px
}

.box .description p {
    color: #fff
}

.box.clicked .description {
    opacity: 1;
    display: block;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    width: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 10000000;
    color: #fff
}

.right {
    float: right;
    margin-right: 0;
    margin-left: 8px
}

.left {
    float: left;
    margin-left: 0;
    margin-right: 8px
}

img {
    max-width: 100%;
    vertical-align: top;
    height: auto;
}

.ind_photo img {
    width: 100%;
    vertical-align: top;
    height: auto;
}

.downloads {
    float: left;
    clear: both;
    width: 100%
}

.downloadtab {
    padding: 0;
    border: 2px solid #fff;
    background-color: #043465;
    float: left;
    color: #FFF;
    width: 33.3333%;
    margin-top: 24px;
    margin-bottom: 24px;
    position: relative
}

.downloadtab:after {
    content: "1";
    position: absolute;
    font-size: 32px;
    font-family: school!important;
    bottom: 4px;
    right: 4px;
    line-height: 32px;
    color: #4bbdd3;
    pointer-events: none
}

.downloadname,
.downloadtab img {
    color: #FFF;
    float: left;
    width: 100%
}

.downloadtab img {
    padding: 0;
    line-height: 0;
    margin: 0;
    -ms-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg)
}

.downloadname {
    padding: 8px 8px 40px;
    margin-top: 20px;
    line-height: 100%;
    font-size: 20px
}

.downloadname .filesize {
    float: left;
    width: 100%;
    margin-top: 8px;
    padding-top: 4px;
    border-left: none;
    padding-left: 8px;
    padding-right: 0;
    font-size: 11px;
    color: #4bbdd3
}

@media screen and (max-width:1180px) {

 form .thirdcolumn {
    width: 48%;
    display: inline-block;
   
   
  
 
}
  
   form .quartercolumn {
    width: 48%;
    
}
  
  
  
  }

@media screen and (max-width:768px) {
  
  
  form .thirdcolumn {
    width: 48%;
    display: inline-block;
 
}
  
  .perchproduct.fourcolumn {
   

    width: 48%;
    margin: 1%;
   
}




  #picturenav ul li {
    width: 49%;

}




    #relatedpages li{
    
    width: 50%;
    
}
    .portfolioheader,
    .proddesc,
    .textinnerleft {
        text-align: left
    }
    #horizontal,
    .scrolllink a {
        display: none
    }

    .hoverlink
   
 {
       float: left;
    width: 100%;
}

   
    .productbox:nth-child(odd)  .product_thumb {
       float: left;
    width: 100%;
    border: 4px solid #eee;
}

.productbox:nth-child(even)  .product_thumb {
    float: left;
    width: 100%;
    border: 4px solid #eee;
}


.productbox:nth-child(odd)  .proddesc {
    float: left;
 width: 100%;
    text-align: left;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 16px;
}

.productbox:nth-child(even) .proddesc {
    float: right;
    width: 100%;
    text-align: left;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 16px;
}
   


    .box {
        width: 50%;
        height: auto;
        background-color: #fff;
        float: left
    }
    .lightgallery .ind_photo {
        float: left;
        width: 33.333333333333%;
        position: relative
    }
    .videoarea {
        width: 100%;
        max-width: 480px
    }
    .textinnerleft {
        width: 100%;
        padding-bottom: 24px
    }
    .textinnerright {
        width: 100%
    }
    .diagonalgrey:before,
    .diagonalone:before,
    .diagonaltwo:before {
        background-size: 100% 32px;
        height: 32px;
        top: -32px
    }
    .hentry,
    .hentrytwo {
        width: 100%;
        float: left;
        position: relative;
        padding: 12px;
        border: 1px solid #eee;
        margin-bottom: 12px
    }
    .hentry .blogimage {
        width: 100%;
        float: left
    }
    .blogdetails {
        width: 100%
    }
    .hentrytwo .blogimage {
        width: 100%;
        float: left
    }
    .container .gap,
    .container .mix {
        width: 50%;
    }
    #horizontal {
        height: 80px
    }
    #slider-wrapper {
        margin-top: 60px
    }
    .servicesarea a {
        width: 50%;
        padding: 4px
    }
    .serviceimage {
        width: 40%;
        opacity: 1;
        height: auto;
        line-height: 0;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        z-index: 0
    }
    .burger span {
        background-color: #333;
        -moz-transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
        transition: all .3s ease-in
    }
    header {
        position: fixed;
        z-index: 12;
        background-color: rgba(256, 256, 256, 1.0);
        height: 68px;
        transition: all .8s ease-in-out;
        -webkit-transition: all .8s ease-in-out;
        -moz-transition: all .8s ease-in-out;
        -o-transition: all .8s ease-in-out;
        border-bottom: 1px solid rgba(0, 0, 0, 1)
    }
    #logoarea {
        position: fixed;
        width: 148px;
        padding: 12px;
        margin: 0;
        border: 0;
        -moz-transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
        transition: all .3s ease-in;
        line-height: 0
    }
    .hoverlink {
        width: 50%;
        background-color: #333;
        transition: all .8s ease-in-out;
        -webkit-transition: all .8s ease-in-out;
        -moz-transition: all .8s ease-in-out;
        -o-transition: all .8s ease-in-out;
        position: relative
    }
    .hi-icon {
        display: inline-block;
        font-size: 0;
        cursor: pointer;
        margin: 0;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        text-align: center;
        position: relative;
        z-index: 1;
        color: #fff
    }
    .hi-icon:before {
        speak: none;
        font-size: 34px;
        line-height: 58px;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        display: block;
        -webkit-font-smoothing: antialiased
    }
}

@media screen and (max-width:540px) {
  
  
   form .thirdcolumn {
    width: 100%;
 
}
  
  
  .shoplinks {
    display: none;
}
  
  
  .leftcolumn {
    width: 100%;
    padding: 0px
}

.rightcolumn {
    width: 100%;
    padding: 0px
}
  
  
    .perchproduct.fourcolumn {
   

    width: 100%;
    margin: 0%;
   
}


   .container .gap,
    .container .mix {
        width: 100%;
    }


    .hoverlink {
        width: 100%;
        background-color: #333;
        transition: all .8s ease-in-out;
        -webkit-transition: all .8s ease-in-out;
        -moz-transition: all .8s ease-in-out;
        -o-transition: all .8s ease-in-out;
        position: relative
    }


    .servicesarea a {
        width: 100%;
        padding: 4px
    }


    
    #relatedpages li{
    
    width: 100%;

  }

.productbox:nth-child(odd)  .product_thumb,
.productbox:nth-child(even)  .product_thumb {
    float: left;
    width: 100%;
    border: 4px solid #eee;
}


.productbox:nth-child(odd)  .proddesc,
.productbox:nth-child(even) .proddesc {
float: left;
        width: 100%;
        padding: 12px
}









    #footerbase {
        height: 80px;
        text-align: left;
        padding: 12px
    }
    #footerbase:after {
        background-size: auto 60px;
        height: 60px;
        bottom: 8px
    }
    .picturenavtext {
        width: 70%;
        float: left;
        padding-top: 10vw;
        padding-left: 12px;
        text-align: left;
        font-size: 6vw
    }
    .picturenavimagearea {
        float: left;
        width: 30%
    }
    #picturenav ul li {
        width: 100%;
        max-width: 100%;
        margin-bottom: 8px;
        padding: 4px;
        border: 1px solid rgba(256, 256, 256, .2);
        border-radius: 8px
    }
    #picturenav ul li a {
        font-size: 18px;
        float: left;
        width: 20%;
        position: relative
    }
    #picturenav ul li img {
        border: 1px solid #222;
        border-radius: 4px
    }
    button {
        max-width: 60px;
        overflow: hidden;
        padding: 4px;
        margin: 0
    }
    .servicesarea a {
        width: 50%;
        padding: 4px
    }
    .container .gap,
    .container .mix,
    .hoverlink {
        width: 100%
    }
    .diagonalone:before,
    .diagonaltwo:before {
        background-size: 100% 24px;
        height: 24px;
        top: -24px
    }
    .hoverlink {
        float: left;
        background-color: #333;
        overflow: hidden;
        transition: all .8s ease-in-out;
        -webkit-transition: all .8s ease-in-out;
        -moz-transition: all .8s ease-in-out;
        -o-transition: all .8s ease-in-out;
        position: relative
    }
}

@media all and (device-width:768px) and (device-height:1024px) and (orientation:portrait) {
    .rslides_container,
    .rslides_container li,
    .rslides_container li .stuff {
        height: 1024px
    }
}

@media all and (device-width:768px) and (device-height:1024px) and (orientation:landscape) {
    .rslides_container,
    .rslides_container li,
    .rslides_container li .stuff {
        height: 768px
    }
}