Website css
/* ---------------------------------- */
/* ------ MAIN BODY OF WEBSITE ------ */
/* ---------------------------------- */
html {
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
}
body {
background: #fff;
font: 14px Arial, verdana, helvetica, sans-serif;
color: #333;
line-height: 1.4em;
}
a {
color: #555;
transition:all .3s ease;
}
a:hover {
color: #000;
}
/* ---------------------------------- */
/* ------------ HEADINGS ------------ */
/* ---------------------------------- */
h1, h2, h3, h4 {
font-weight: 500;
font-family: inherit;
line-height: 1em;
}
h1 {
font-size: 1.8em;
color: #111;
margin-top: 0px;
margin-bottom: 15px;
}
h2 {
font-size: 1.5em;
color: #111;
margin-top: 0px;
margin-bottom: 15px;
}
h3 {
font-size: 1.4em;
color: #333;
margin-top: 5px;
margin-bottom: 5px;
}
h4 {
font-size: 1.2em;
color: #333;
margin-top: 0px;
margin-bottom: 3px;
}
section {
width: 100%;
}
.container {
max-width: 1100px;
width: 100%;
margin: auto;
position: relative;
}
/* ---------------------------------- */
/* ---------- CONTENT AREA ---------- */
/* ---------------------------------- */
.siteTop {
background: none;
}
.siteBottom .container {
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
/*------ END FLEX ALIGN -----*/
box-sizing: border-box;
padding: 0 10px;
}
.siteContent {
width: 100%;
-ms-flex: 1 1 auto;
}
.contentCopy {
padding: 20px 0;
}
#subBanner img {
width: 100%;
height: auto;
}
#callbacks {
display: none;
}
.buttonSection .siteContent, .buttonSection .container {
padding: 0;
}
/* ---------------------------------- */
/* ------------ SIDEBAR ------------- */
/* ---------------------------------- */
.sidebar {
display:none;
width: 230px;
padding: 0 15px;
margin: 0px 15px 0px 0;
box-sizing: border-box;
/*------ FLEX SIZE -----*/
flex-shrink: 0;
-webkit-flex-shrink: 0;
/*---- END FLEX SIZE ---*/
background: rgba(0, 0, 0, 0.1);
line-height: 1.5em;
}
.sidebar .item, #outerSidebar .item {
width: 100%;
margin-top: 15px;
}
.sidebar .item .contentImg, #outerSidebar .item .contentImg {
width: 100%;
height: 0;
padding-bottom: 80%;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
.sidebar .item .caption, #outerSidebar .item .caption {
font-size: .8em;
}
#outerSidebar {
display: none;
}
#cartContent .sidebar {
display: none;
}
/*
@media (min-width:600px){
.siteBottom {
width: 100%;
max-width: 1100px;
margin: auto;
display: -ms-flexbox;
display: -webkit-box;
display: box;
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
-webkit-box-pack: justify;
box-pack: justify;
}
.sidebar {
display: none;
}
#outerSidebar {
width: 200px;
padding: 0 15px;
flex-shrink: 0;
-webkit-flex-shrink: 0;
background: rgba(0, 0, 0, 0.1);
display: inline-block;
}
.contentWrap {
width: 100%;
-ms-flex:0 1 auto;
}
}
*/
/* ---------------------------------- */
/* ------------- BANNER ------------- */
/* ---------------------------------- */
#banner {
position: relative;
}
/* ---------------------------------- */
/* ---------- VIEW CART BTN --------- */
/* ---------------------------------- */
#viewCart .container {
position: relative;
}
.viewCart {
position: absolute;
top: 0;
left: 0;
padding: 0;
background: rgba(255, 255, 255, 0.2);
overflow: hidden;
height: 38px;
z-index: 1000;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
cursor: pointer;
color: #fff;
}
.viewCart:before, .viewCart:after {
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
}
.viewCart:before {
font: 1.5em FontAwesome;
content: "\f07a";
padding: 0px 10px;
}
.viewCart:after {
content: "View Cart";
padding: 0px 10px;
}
.viewCart:hover {
background: rgba(255, 255, 255, 0.3);
}
.viewCartCurrent {
background: rgba(255, 255, 255, 0.4);
}
/* ---------------------------------- */
/* -------- CONTACT DETAILS --------- */
/* ---------------------------------- */
.contact a:before, .contact div:before, .contact p:before {
font-family: FontAwesome;
display: inline-block;
position: relative;
margin-right: 10px;
color: #fff;
}
.phone:before {
content: "\f095";
}
.mobile:before {
content: "\f10b";
}
.email:before {
content: "\f0e0";
}
.fax:before {
content: "\f1ac";
}
.address:before {
content: "\f041";
}
/* ---------------------------------- */
/* ---------- SOCIAL LINKS ---------- */
/* ---------------------------------- */
.socialLinks {
width: 100%;
position: relative;
z-index: 2;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: flex-end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
color: #f2f2f2;
margin-top: 3px;
}
.socialLinks span {
font-size: 1.1em;
font-weight: 700;
margin-right: 20px;
}
.socialLinks a {
display: inline-block;
position: relative;
text-decoration: none;
vertical-align: top;
margin: 0 2px;
}
.socialLinks a:hover:after {
padding: 2px 0 0px 0;
/* background:rgba(0,0,0,.3);*/
}
.socialLinks a:after {
font-family: FontAwesome;
width: 30px;
height: 30px;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
color: #fff;
font-size: 1.6em;
line-height: 1.5em;
padding: 1px 0 1px 0;
}
.facebook {
background: #49639E;
}
.facebook:after {
content: "\f09a";
}
.instagram {
background: #555;
}
.instagram:after {
content: "\f16d";
}
.twitter {
background: #5EA9DD;
}
.twitter:after {
content: "\f099";
}
.googlePlus {
background: #DD4B39;
}
.googlePlus:after {
content: "\f0d5";
}
.pinterest {
background: #BD081C;
}
.pinterest:after {
content: "\f0d2";
}
.linkedIn {
background: #0177B5;
}
.linkedIn:after {
content: "\f0e1";
}
.youTube {
background: #E22D24;
}
.youTube:after {
content: "\f167";
}
/* ---------------------------------- */
/* --Standard for HR line styling -- */
/* ---------------------------------- */
hr {
border: 0;
height: 1px;
color: #c1c1c1;
background-color: #c1c1c1;
width: 100%;
}
/* ---------------------------------- */
/* ----------- NAVIGATION ----------- */
/* ---------------------------------- */
#menu {
position: relative;
z-index: 100;
background: #515151;
}
#menu nav {
max-width: 1100px;
width: 100%;
margin: auto;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX WRAP ------*/
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
/*------ END FLEX WRAP ------*/
}
#menu nav li {
list-style: none;
float: left;
display: inline-block;
margin: 0;
}
#menu nav li a {
display: inline-block;
text-decoration: none;
width: 100%;
padding: 10px;
color: #fff;
box-sizing: border-box;
vertical-align: top;
font-size: 1em;
}
#menu nav li a:hover {
background: rgba(255, 255, 255, 0.2);
}
#menu nav li .current {
background: rgba(0, 0, 0, 0.2);
}
#menu nav .parent > a:after {
font-family: FontAwesome;
margin-left: 8px;
content: "\f107";
line-height: 1em;
}
#menu nav .subContainer .current a {
background: rgba(0, 0, 0, 0.1);
}
#mobileMenu {
display: none;
}
/* ---------------------------------- */
/* ------------ SUB MENU ------------ */
/* ---------------------------------- */
#menu nav ul {
position: absolute;
width: 150px;
margin: 0;
padding: 0;
display: none;
font-size: .85em;
}
#menu .subContainer {
background: #333;
margin-top: 10px;
position: relative;
display: inline-block;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
#menu .subContainer:after {
position: absolute;
top: -10px;
left: 30px;
width: 0px;
height: 0px;
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #333;
}
#menu nav ul li {
width: 100%;
display: inline-block;
}
#menu nav ul li a {
padding: 5px 10px;
}
/*-----------------------------------*/
/*------------ SIDE MENU ------------*/
/*-----------------------------------*/
.sideMenu li {
width: 100%;
list-style: none;
margin-bottom: 5px;
position: relative;
}
.sideMenu li a {
width: 100%;
display: inline-block;
background: #333;
text-decoration: none;
color: #fff;
padding: 10px;
box-sizing: border-box;
}
.sideMenu li a:hover {
background: #ccc;
color: #333;
}
.sideMenu li ul {
position: absolute;
z-index: 1000;
top: 0;
left: 200px;
width: 210px;
margin: 0;
padding: 0;
display: none;
}
.sideMenu .subContainer {
padding-left: 10px;
}
.sideMenu .current ul a {
background: #666;
}
.sideMenu .current a, .sideMenu ul .current a {
background: #222;
}
/* ---------------------------------- */
/* --------- PHOTO SECTION ---------- */
/* ---------------------------------- */
.contentImgRow {
width: 100%;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*------ FLEX ALIGN -----*/
align-items: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
/*------ END FLEX ALIGN -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
}
.contentImgRow .item:nth-child(1) {
margin-left: 0;
}
.contentImgRow .item:nth-last-child(1) {
margin-right: 0;
}
.contentImgRow .item {
width: 24%;
display: inline-block;
margin: 0 5px 10px;
}
.contentImgRow .contentImg {
width: 100%;
height: 0;
padding-bottom: 80%;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center center !important;
margin: 0;
}
.contentImgRow .caption {
font-size: .8em;
margin-top: 5px;
}
/* ---------------------------------- */
/* ---------- FONT AWESOME ---------- */
/* ---------------------------------- */
.fontAwesome {
font-family: FontAwesome;
}
/*----------------------------------------------*/
/*--------------- ENQUIRY FORM -----------------*/
/*----------------------------------------------*/
#enquiry {
width: auto;
background: #f4f4f4;
float: right;
padding: 0;
width: 400px;
color: #333;
box-sizing: border-box;
margin-left: 20px;
font-size: .8em;
}
.enqHeader {
background: #444;
color: #fff;
padding: 12px 10px 8px;
margin-bottom: 15px;
font-size: 1.3em;
}
.enqRow {
width: 100%;
overflow: hidden;
padding: 3px 10px;
box-sizing: border-box;
}
.enqLeft {
padding: 0 5px;
float: left;
width: 25%;
box-sizing: border-box;
font-size: 1.2em;
}
.enqRight {
width: 75%;
float: left;
}
#enquiry input, #enquiry textarea {
width: 100%;
border: none;
padding: 7px 5px;
box-sizing: border-box;
font-size: .9em;
-webkit-appearance: none;
border-radius: 0;
border:1px solid #ccc;
}
#enquiry textarea {
height: 80px;
}
#enquiry input[type="radio"] {
width: 10%;
-webkit-appearance: radio;
}
#enquiry input[type="checkbox"] {
-webkit-appearance: checkbox;
width: 10%;
}
#enquiry input[type="submit"] {
margin-bottom: 10px;
border: 0;
color: #fff;
padding: 10px 0;
background: #666;
cursor: pointer;
width:100px;
float:right;
}
#enquiry select {
width: 100%;
}
/* ---------------------------------- */
/* ------------- FOOTER ------------- */
/* ---------------------------------- */
footer {
width: 100%;
background: #1e1e1e;
font-size: .8em;
padding: 20px 0;
}
footer .container {
overflow: hidden;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
}
.footerRight {
text-align: right;
margin-right: 10px;
}
/*-------- FOOTER TEXT STYLES ---------*/
footer, footer a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
footer a:hover {
color: white;
}
/*------------ FOOTER MENU ------------*/
footer nav {
width: 60%;
display: inline-block;
}
footer nav li {
list-style: none;
float: left;
display: inline-block;
}
footer nav li a {
text-decoration: none;
padding: 5px 10px;
display: inline-block;
}
footer nav li a:hover {
/**/
}
/* ----------------------------------------- */
/* -----------------TO TOP ----------------- */
/* ----------------------------------------- */
#toTop {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
width: 45px;
height: 30px;
border-radius: 100%;
background: #818181;
text-align: center;
padding-top: 14px;
text-decoration: none;
color: transparent;
font: .9em fontAwesome;
opacity: .8;
filter: alpha(opacity=80);
-webkit-transition: .5s;
transition: .5s;
}
#toTop:before {
font: 1.3em fontAwesome;
content: "\f062";
width: 100%;
height: auto;
position: absolute;
color: #fff;
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
}
#toTopHover {
display: none;
}
#toTop:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: .5s;
transition: .5s;
}
/*-----------------------------------*/
/*--------- SHOPPING CART -----------*/
/*-----------------------------------*/
.cartItems {
width: 100%;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX WRAP ------*/
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
/*------ END FLEX WRAP ------*/
/*------ FLEX ALIGN -----*/
align-items: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
/*------ END FLEX ALIGN -----*/
color: #333;
margin: 15px 0;
}
.cartItems a {
text-decoration: none;
}
.cartItem {
width: 24%;
background: #e3e3e3;
margin: 0 .5%;
margin-bottom: 20px;
border-bottom: 4px solid #ccc;
}
.cartItem:nth-child(1) {
margin-left: 0;
}
.cartItem:nth-last-child(1) {
margin-right: 0;
}
.cartItemImage {
width: 100%;
position: relative;
}
.cartItemSale {
position: absolute;
top: 0;
left: 0;
background: #737373;
color: #f2f2f2;
padding: 8px 10px 10px;
border-radius: 0 0 10px 0;
z-index: 1000;
}
.cartItemThumb {
width: 100%;
height: 0;
padding-bottom: 80%;
background-size: cover !important;
position: relative;
cursor: pointer;
}
.cartItemThumb:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 70px;
height: 70px;
content: "\f002";
background: rgba(0, 0, 0, 0.8);
border-radius: 35px;
font: 2.5em FontAwesome;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
color: #fff;
margin: auto;
transform: scale(0);
-webkit-transform: scale(0);
-moz-transition: 0.15s ease-in;
-webkit-transition: 0.15s ease-in;
-ms-transition: 0.15s ease-in;
-o-transition: 0.15s ease-in;
transition: 0.15s ease-in;
}
.cartItemThumb:hover:after {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transition: 0.15s ease-in;
-webkit-transition: 0.15s ease-in;
-ms-transition: 0.15s ease-in;
-o-transition: 0.15s ease-in;
transition: 0.15s ease-in;
}
.cartItemInfo {
height: 60px;
overflow: hidden;
background: #fafafa;
padding: 10px;
box-sizing: border-box;
}
.cartItemName {
font-weight: 700;
color: #737373;
}
.cartItemCat {
font-weight: 300;
font-size: .9em;
text-decoration: none;
}
.cartItemPrice {
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
box-sizing: border-box;
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
padding: 10px;
font-size: 1.1em;
font-weight: 700;
}
.cartItemPrice span {
text-decoration: line-through;
opacity: .8;
font-weight: 500;
font-size: .85em;
margin-right: 20px;
}
.cartItemBtns {
padding: 5px 10px;
font-size: .9em;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
box-sizing: border-box;
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
}
.cartItemBtns a, .cartItemBtns div {
background: #333;
color: #f2f2f2;
border-radius: 3px;
padding: 5px 15px;
text-align: center;
display: inline-block;
cursor: pointer;
text-decoration: none;
}
.cartItemBtns a span, .cartItemBtns div span {
margin-right: 5px;
}
.cartItemBtns a:hover {
background: #555;
}
.categoriesHeading {
color: #444;
}
.categoriesHeading:before {
content: "Shop Categories";
line-height: 1.5em;
}
.cartItemsCategories {
list-style: none;
padding: 0;
margin: 0 0 10px 0;
}
.cartItemsCategories a {
text-decoration: none;
color: #555;
width: 100%;
display: inline-block;
padding: 5px 10px;
font-weight: bold;
background: rgba(255, 255, 255, 0.5);
box-sizing: border-box;
margin: 10px 0 5px;
font-size: 1.1em;
}
.cartItemsCategories .subCat {
padding-left: 20px;
background: none;
font-weight: 500;
margin: 0;
border-bottom: 1px dashed #666;
}
.cartItemsCategories a:hover {
background: rgba(255, 255, 255, 0.5);
}
.cartItemsCategories a:after {
font-family: FontAwesome;
content: "\f054";
font-size: .7em;
float: right;
opacity: .7;
}
.cartItemOutOfStock {
width: 100%;
}
.shoppingContent h1, .shoppingContent h2, .shoppingContent h3, .shoppingContent h4 {
margin-top: 5px;
}
.cartItemContent {
line-height: 1.7em;
color: #555555;
width: 100%;
}
.cartItemTop {
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
/*------ END FLEX ALIGN -----*/
padding: 10px 0;
}
.cartItemImages {
width: 40%;
padding-right: 15px;
box-sizing: border-box;
}
.cartItemHeading {
line-height: 1.1em;
margin: 15px;
}
.cartItemMain {
width: 60%;
}
.cartItemMain .cartItemPrice {
font-size: 1.5em;
text-align: right;
display: inline-block;
width: 100%;
}
.cartItemMain .cartItemPrice div {
font-weight: 300;
font-size: .9em;
display: inline-block;
width: 100%;
}
.cartItemMain .cartItemPrice div span {
display: inline-block;
margin-top: 10px;
}
.cartItemMain .cartItemCode {
text-align: right;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}
.cartItemOptions {
width: 80%;
margin-left: 20%;
}
.cartItemOptions .cartItemOption {
width: 100%;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
padding: 2px 0;
}
.cartItemOptions .cartItemOption .cartItemOptionHeading {
width: 30%;
text-align: right;
padding-right: 10px;
box-sizing: border-box;
}
.cartItemOptions .cartItemOption select, .cartItemOptions .cartItemOption input {
width: 70%;
padding: 3px 5px;
color: #333;
box-sizing: border-box;
}
.cartItemMainPanel {
background: rgba(0, 0, 0, 0.03);
border-radius: 5px;
padding: 10px;
box-sizing: border-box;
}
.cartItemAction {
margin-top: 20px;
background: rgba(0, 0, 0, 0.15);
border-radius: 5px;
padding: 5px 15px;
box-sizing: border-box;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
}
.cartItemAction .button, .cartItemAction a {
text-decoration: none;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
.cartItemAction .button span, .cartItemAction a span {
margin-right: 10px;
font-size: 1.3em;
margin-top: 2px;
}
.cartItemAction .cartItemAdd {
background: #737373;
box-shadow: inset 0 -3px 0 #404040;
}
.cartItemAction .cartItemPrev {
background: rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.5);
}
.cartItemAction .cartItemPrev:hover {
background: rgba(0, 0, 0, 0.4);
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.6);
}
.cartItemAction .cartItemAdd:hover {
background: #5a5a5a;
box-shadow: inset 0 -3px 0 #272727;
}
.cartItemQty {
color: #555555;
}
.cartItemQty span {
margin-right: 15px;
display: inline-block;
}
.cartItemQty .cartItemQtyCount {
position: relative;
display: inline-block;
background: #737373;
border-radius: 3px;
padding: 2px 20px 2px 2px;
}
.cartItemQty .cartItemQtyCount input {
padding: 3px 5px;
height: 30px;
box-sizing: border-box;
width: 30px;
}
.cartItemQty .cartItemQtyCount .cartItemQtyUp, .cartItemQty .cartItemQtyCount .cartItemQtyDown {
position: absolute;
right: 0;
width: 20px;
height: 18px;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
color: #fff;
cursor: pointer;
}
.cartItemQty .cartItemQtyCount .cartItemQtyUp:hover, .cartItemQty .cartItemQtyCount .cartItemQtyDown:hover {
background: rgba(255, 255, 255, 0.2);
}
.cartItemQty .cartItemQtyCount .cartItemQtyUp {
top: 0;
}
.cartItemQty .cartItemQtyCount .cartItemQtyDown {
bottom: 0;
}
.cartItemShortDesc {
margin: 10px 0;
padding: 10px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.03);
border-radius: 5px;
}
.cartItemHero .flickerplate {
position: relative;
width: 100%;
overflow: hidden;
}
.cartItemHero .flicks {
width: 10000%;
height: 100%;
padding: 0px;
margin: 0px;
list-style: none;
}
.cartItemHero .flickerplate {
border-radius: 3px 3px 0 0;
overflow: hidden;
background: rgba(255, 255, 255, 0.2);
height: auto !important;
}
.cartItemHero .flickerplate li {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
list-style: none;
float: left;
width: 1%;
height: 100%;
background-position: center;
background-size: cover;
display: table;
}
.cartItemHero .flick-inner {
height: 0 !important;
padding: 0 0 100% 0 !important;
}
.cartItemHero .arrow-navigation {
display: none;
}
.cartItemHero .dot-navigation {
display: none !important;
}
.cartItemHero .flickerplate.animate-transform-slide ul.flicks {
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
transform: translate3d(0%, 0px, 0px);
-webkit-transform: translate3d(0%, 0px, 0px);
-webkit-transition: -webkit-transform 0.6s ease-out;
-o-transition: -o-transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
.cartItemHero .flickerplate.animate-transition-slide ul.flicks {
position: relative;
left: 0%;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.cartItemHero .flickerplate.animate-jquery-slide ul.flicks {
position: relative;
left: 0%;
}
.cartItemHero .flickerplate.animate-scroller-slide {
padding-bottom: 0px;
overflow: auto;
}
.cartItemHero .flickerplate.animate-scroller-slide ul.flicks {
position: auto;
}
.cartHeroThumbs {
width: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.03);
padding: 10px;
border-radius: 0 0 5px 5px;
box-sizing: border-box;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
}
.cartHeroThumbs .cartHeroThumb {
display: inline-block;
width: 24%;
cursor: pointer;
}
.cartHeroThumbs .cartHeroThumb div {
width: 100%;
position: relative;
height: 0;
padding-bottom: 100%;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
.cartHeroThumbs .cartHeroThumb div:hover:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: white;
opacity: .3;
}
.cartItemOther {
margin: 10px 0;
}
.cartItemOther h3 {
margin: 0 0 10px 0;
}
.cartItemCatHeading {
padding-left: 15px;
}
.cartItemImages .cartItemHeading, .cartItemImages .cartItemCatHeading {
display: none;
}
.cartItemLongDesc, .cartItemOther {
padding: 10px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.03);
}
.cartItemOther {
width: 100%;
box-sizing: border-box;
}
.cartItemOther .cartItems {
margin-bottom: 0;
}
.viewCartContent {
width: 100%;
}
.viewCartSummary {
background: rgba(0, 0, 0, 0.03);
border-radius: 5px;
padding: 10px;
width: 100%;
margin-top: 10px;
box-sizing: border-box;
}
.viewCartItems {
background: white;
border-radius: 5px;
padding: 10px;
width: 100%;
box-sizing: border-box;
margin-top: 20px;
}
.viewCartItems .cartItemAction {
width: 100%;
}
.viewCartItems .cartSubTotal {
float: right;
padding: 20px 10px;
margin: 20px 0;
border-radius: 5px;
background: rgba(0, 0, 0, 0.03);
color: #555555;
font-size: 1.1em;
}
.viewCartItems .cartSubTotal span {
font-weight: 700;
margin-left: 10px;
}
.viewCartItems .cartUpdate {
float: left;
margin: 30px 0;
background: #404040;
border-radius: 5px;
padding: 10px;
color: #fff;
font-size: 1.1em;
}
.viewCartItems .cartUpdate span {
margin-right: 10px;
}
.viewCartRow {
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
font-weight: 300;
padding: 10px 10px;
font-size: .9em;
background: rgba(0, 0, 0, 0.03);
}
.viewCartRow .viewCartDelete {
width: 30px;
font-size: 1.5em;
text-align: center;
color: #D91E18;
cursor: pointer;
background: none;
border: 0;
padding: 0;
margin: 0;
}
.viewCartRow .viewCartItem {
width: 80px;
padding: 5px;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #ccc;
}
.viewCartRow .viewCartItem .viewCartThumb {
width: 100%;
height: 0;
padding-bottom: 100%;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
border-radius: 3px;
}
.viewCartRow .viewCartDescription {
width: 40%;
}
.viewCartRow .viewCartPrice {
width: 100px;
text-align: Center;
}
.viewCartRow .viewCartTotal {
width: 100px;
text-align: Center;
}
.viewCartRow .viewCartQuantity {
text-align: Center;
width: 110px;
}
.viewCartRow:nth-child(even) {
background: rgba(0, 0, 0, 0.01) !important;
}
.viewCartRowHeader {
padding-bottom: 10px;
font-weight: 700;
border-bottom: 3px solid rgba(0, 0, 0, 0.15);
font-size: 1em;
background: none !important;
}
.viewCartRowHeader .viewCartItem {
border: none;
}
.checkoutSection {
width: 100%;
float: right;
border-radius: 5px;
padding: 5px 10px;
background: rgba(0, 0, 0, 0.03);
box-sizing: border-box;
margin: 10px 0;
font-size: 1.1em;
position: relative;
}
.checkoutSection .checkoutSectionInner {
background: #fff;
border-radius: 5px;
padding: 10px;
}
.checkoutSection .cartPriceRow {
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
margin: 5px 0;
}
.checkoutSection .priceHeading {
display: inline-block;
margin-right: 20px;
text-align: left;
width: 100px;
}
.checkoutSection .cartPricePrice {
font-weight: 700;
color: #555;
display: inline-block;
width: 100px;
text-align: right;
}
.checkoutSection h2 {
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
margin: 10px 10px 10px 0;
}
.checkoutSection h2 .checkoutStep {
background: #737373;
width: 30px;
height: 28px;
color: #fff;
padding-bottom: 2px;
border-radius: 5px;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
font-size: .7em;
float: left;
margin-top: 5px;
margin-right: 10px;
}
.priceSection {
width: 300px;
margin-left: auto;
}
.priceTotal {
width: 100%;
border-radius: 5px;
padding: 10px;
background: #737373;
box-sizing: border-box;
margin: 10px 0;
color: #fff;
margin-top: 15px !important;
box-shadow: 0 3px 0 #4d4d4d;
}
.priceTotal .cartPricePrice {
color: #fff;
}
.checkoutSingle {
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
padding: 5px 10px;
}
.checkoutSingle h2 {
margin: 10px 10px 10px 0;
}
.checkoutSingle .checkoutSectionInner {
width: 80%;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
}
.checkoutSingle .singleInput {
padding: 7px 5px;
border-radius: 3px;
width: 300px;
}
.checkoutNext, .checkoutApply {
border-radius: 5px;
padding: 12px 20px;
background: #737373;
margin-left: 10px;
color: #fff;
box-shadow: inset 0 -3px 0 #4d4d4d;
display: inline-block;
cursor: pointer;
margin-left: auto;
}
.checkoutNext span, .checkoutApply span {
margin-right: 10px;
}
.checkoutNext:hover {
background: #8d8d8d;
box-shadow: inset 0 -3px 0 #737373;
}
.checkoutApply {
margin-left: 5px;
background: #555;
box-shadow: inset 0 -3px 0 #2f2f2f;
}
.checkoutApply:hover {
background: #6e6e6e;
box-shadow: inset 0 -3px 0 #555;
}
.checkoutReview {
width: 100%;
margin-bottom: 10px;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
/*------ END FLEX ALIGN -----*/
}
.checkoutReview .checkoutFinalPrice {
width: 48%;
}
.checkoutReview .checkoutPaypal {
width: 47%;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
}
.checkoutReview .checkoutPaypal .payPalLogo {
background: url(PP-logo.png);
width: 129px;
height: 49px;
}
.checkoutReview .checkoutEmail {
width: 47%;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
}
.checkoutReview .checkoutEmail .cartBtn {
margin-left: 0;
}
.checkoutReviewMessage {
background: white;
border-radius: 5px;
padding: 10px;
width: 100%;
box-sizing: border-box;
margin: 10px 0;
}
.UpdateQuantity {
background: #26A65B;
color: #fff;
border: none;
border-radius: 3px;
display: inline-block;
padding: 4px 6px;
}
.cartBtn {
border: none;
border-radius: 5px;
padding: 8px 15px;
margin-left: 10px;
color: #fff;
display: inline-block;
cursor: pointer;
margin-left: auto;
box-shadow: inset 0 -3px 0 #2f2f2f;
background: #555555;
text-decoration: none;
}
.cartBtn span {
margin-right: 10px;
}
.cartBtn:hover {
background: #6e6e6e;
box-shadow: inset 0 -3px 0 #555555;
color: #fff;
}
.cartBtnHL {
box-shadow: inset 0 -3px 0 #4d4d4d;
background: #737373;
}
.cartBtnHL:hover {
background: #8d8d8d;
box-shadow: inset 0 -3px 0 #737373;
}
.resumeShopping {
position: absolute;
top: 15px;
right: 15px;
}
.DiscountNotValid, .DiscountValid {
display: inline-block;
padding: 10px;
border-radius: 5px;
background: #cf000f;
color: white;
margin-left: 10px;
box-shadow: inset 0 1px 0 #360004, 0 1px 0 rgba(255, 255, 255, 0.5);
}
.DiscountValid {
background: #26a65b;
box-shadow: inset 0 1px 0 #1c7d44, 0 1px 0 rgba(255, 255, 255, 0.5);
}
.checkoutStageComplete {
background: #26a65b;
box-shadow: inset 0 -3px 0 #186839;
line-height: 1em;
padding: 5px;
font-size: 1em;
color: white;
margin-left: auto;
border-radius: 5px;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
}
.checkoutStageComplete span {
font-size: 1.8em;
line-height: 1em;
margin-left: 10px;
padding-top: 3px;
}
.shipTo {
margin-right: 10px;
}
/*--- SHOPPING QUESTIONS --*/
.cartQuestionRow {
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
width: 80%;
max-width: 700px;
margin: 5px auto;
}
.cartQuestionRow .cartQuestion {
width: 25%;
}
.cartQuestionRow .cartQuestionInput {
margin-left: 10px;
width: 70%;
}
.cartQuestionRow .cartQuestionInput input {
width: 100%;
}
/*--- SHOPPING QUESTIONS REVIEW --*/
.reviewQuestions {
margin-bottom: 10px;
}
.reviewQuestionRow {
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
width: 80%;
max-width: 700px;
margin: 5px auto;
}
.reviewQuestionRow .reviewQuestion {
width: 25%;
}
.reviewQuestionRow .reviewQuestionAnswer {
margin-left: 10px;
width: 70%;
background: rgba(0, 0, 0, 0.05);
padding: 3px;
min-height: 25px;
}
/*-----------------------------------*/
/*-------------- FORMS -------------*/
/*-----------------------------------*/
.formError {
z-index: 990;
}
.formError .formErrorContent {
z-index: 991;
}
.formError .formErrorArrow {
z-index: 996;
}
.ui-dialog .formError {
z-index: 5000;
}
.ui-dialog .formError .formErrorContent {
z-index: 5001;
}
.ui-dialog .formError .formErrorArrow {
z-index: 5006;
}
.inputContainer {
position: relative;
float: left;
}
.formError {
position: absolute;
top: 300px;
left: 300px;
display: block;
cursor: pointer;
text-align: left;
}
.formError.inline {
position: relative;
top: 0;
left: 0;
display: inline-block;
}
.ajaxSubmit {
padding: 20px;
background: #55ea55;
border: 1px solid #999;
display: none;
}
.formError .formErrorContent {
width: 100%;
background: #ba0000;
position: relative;
color: #fff;
min-width: 120px;
font-size: 13px;
border: 2px solid #ddd;
box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
-o-box-shadow: 0 0 6px #000;
padding: 4px 10px 4px 10px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
}
.formError.inline .formErrorContent {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
border: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-o-border-radius: 0;
}
.greenPopup .formErrorContent {
background: #33be40;
}
.blackPopup .formErrorContent {
background: #393939;
color: #FFF;
}
.formError .formErrorArrow {
width: 15px;
margin: -2px 0 0 13px;
position: relative;
}
body[dir='rtl'] .formError .formErrorArrow, body.rtl .formError .formErrorArrow {
margin: -2px 13px 0 0;
}
.formError .formErrorArrowBottom {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
margin: 0px 0 0 12px;
top: 2px;
}
.formError .formErrorArrow div {
border-left: 2px solid #ddd;
border-right: 2px solid #ddd;
box-shadow: 0 2px 3px #444;
-moz-box-shadow: 0 2px 3px #444;
-webkit-box-shadow: 0 2px 3px #444;
-o-box-shadow: 0 2px 3px #444;
font-size: 0px;
height: 1px;
background: #ba0000;
margin: 0 auto;
line-height: 0;
font-size: 0;
display: block;
}
.formError .formErrorArrowBottom div {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
}
.greenPopup .formErrorArrow div {
background: #33be40;
}
.blackPopup .formErrorArrow div {
background: #393939;
color: #FFF;
}
.formError .formErrorArrow .line10 {
width: 15px;
border: none;
}
.formError .formErrorArrow .line9 {
width: 13px;
border: none;
}
.formError .formErrorArrow .line8 {
width: 11px;
}
.formError .formErrorArrow .line7 {
width: 9px;
}
.formError .formErrorArrow .line6 {
width: 7px;
}
.formError .formErrorArrow .line5 {
width: 5px;
}
.formError .formErrorArrow .line4 {
width: 3px;
}
.formError .formErrorArrow .line3 {
width: 1px;
border-left: 2px solid #ddd;
border-right: 2px solid #ddd;
border-bottom: 0 solid #ddd;
}
.formError .formErrorArrow .line2 {
width: 3px;
border: none;
background: #ddd;
}
.formError .formErrorArrow .line1 {
width: 1px;
border: none;
background: #ddd;
}
/*-----------------------------------*/
/*------------ FANCYBOX -------------*/
/*-----------------------------------*/
/*! fancyBox 3.0.0 Beta 1 fancyapps.com | fancyapps.com/fancybox/#license */
#fancybox-loading,
#fancybox-lock,
.fancybox-wrap,
.fancybox-skin,
.fancybox-inner,
.fancybox-error,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-wrap embed,
a.fancybox-close,
a.fancybox-expand,
a.fancybox-nav,
a.fancybox-nav span,
.fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
background-color: transparent;
background-repeat: no-repeat;
background-image: none;
text-shadow: none;
}
#fancybox-lock {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 8020;
overflow-y: scroll;
overflow-y: auto;
overflow-x: auto;
-webkit-transition: -webkit-transform 0.5s;
-webkit-transform: translateX(0px);
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
-webkit-transform: translate3d(0, 0, 0);
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-skin {
border-style: solid;
border-color: #fff;
background: #fff;
color: #444;
}
.fancybox-inner {
position: relative;
overflow: hidden !important;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.fancybox-spacer {
position: absolute;
top: 100%;
left: 0;
width: 1px;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
zoom: 1;
}
a.fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
border-radius: 154px;
height: 30px;
cursor: pointer;
z-index: 8040;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
color: #fff;
text-decoration: none;
background: #222;
border: 2px solid #fff;
box-shadow: 0 2px 2px #000;
}
a.fancybox-close:after {
content: "\f00d";
font: 1.2em FontAwesome;
line-height: 1.5em;
}
a.fancybox-nav {
position: absolute;
top: 0;
width: 50%;
height: 100%;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
z-index: 8040;
overflow: hidden;
font: 2em FontAwesome;
color: #fff;
}
.fancybox-type-iframe a.fancybox-nav,
.fancybox-type-inline a.fancybox-nav,
.fancybox-type-html a.fancybox-nav {
width: 70px;
}
a.fancybox-prev {
left: 0px;
}
a.fancybox-next {
right: 0px;
}
a.fancybox-nav span {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
margin-top: -23px;
cursor: pointer;
z-index: 8040;
text-shadow: 0 2px 2px #000;
}
a.fancybox-prev span {
text-align: left;
padding-left: 5px;
}
a.fancybox-next span {
text-align: right;
padding-right: 5px;
}
a.fancybox-next span:after {
content: "\f054";
}
a.fancybox-prev span:after {
content: "\f053";
}
a.fancybox-prev span {
left: 0;
background-position: 0 -50px;
}
a.fancybox-next span {
right: 0;
background-position: 0 -100px;
}
.fancybox-mobile a.fancybox-nav {
max-width: 80px;
}
.fancybox-desktop a.fancybox-nav {
opacity: 0.5;
filter: alpha(opacity=50);
}
.fancybox-desktop a.fancybox-nav:hover {
opacity: 1;
filter: alpha(opacity=100);
}
a.fancybox-expand {
position: absolute;
bottom: 0;
right: 0;
width: 46px;
height: 46px;
z-index: 8050;
opacity: 0;
filter: alpha(opacity=0);
background-position: 0 -150px;
zoom: 1;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.fancybox-wrap:hover a.fancybox-expand {
opacity: 0.5;
filter: alpha(opacity=50);
}
.fancybox-wrap a.fancybox-expand:hover {
opacity: 1;
filter: alpha(opacity=100);
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
width: 60px;
height: 60px;
background-color: #111;
background-position: center center;
opacity: 0.85;
filter: alpha(opacity=85);
cursor: pointer;
z-index: 8060;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.fancybox-tmp {
position: absolute !important;
top: -99999px;
left: -99999px;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
.fancybox-title {
font: normal 14px "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.5;
position: relative;
text-shadow: none;
z-index: 8050;
display: block;
visibility: hidden;
}
.fancybox-title-float-wrap {
position: relative;
margin-top: 10px;
text-align: center;
zoom: 1;
left: -9999px;
}
.fancybox-title-float-wrap > div {
display: inline-block;
padding: 7px 20px;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 2px #222;
background: transparent;
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 15px;
background: #000;
background: rgba(0, 0, 0, 0.8);
max-height: 50%;
overflow: auto;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 8010;
}
.fancybox-overlay-fixed {
position: fixed;
width: 100%;
height: 100%;
}
/* Default theme */
.fancybox-default-skin {
border-color: #f9f9f9;
background: #f9f9f9;
}
.fancybox-default-skin-open {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-default-overlay {
background: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
.fancybox-default a.fancybox-close,
.fancybox-default a.fancybox-expand,
.fancybox-default a.fancybox-nav span {
background-size: 46px auto;
}
}
/* Dark theme */
.fancybox-dark-skin {
background: #2A2A2A;
border-color: #2A2A2A;
color: #fff;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset !important;
}
.fancybox-dark-overlay {
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.fancybox-dark a.fancybox-close,
.fancybox-dark a.fancybox-expand,
.fancybox-dark a.fancybox-nav span {
background-size: 46px auto;
}
}
/* Light theme */
.fancybox-light-skin-open {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
.fancybox-light a.fancybox-close,
.fancybox-light a.fancybox-expand,
.fancybox-light a.fancybox-nav span {
background-size: 46px auto;
}
}
.fancybox-light-overlay {
opacity: 0.9;
filter: alpha(opacity=90);
background: #555555;
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #999999 0%, #555555 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #999999), color-stop(100%, #555555));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #999999 0%, #555555 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #999999 0%, #555555 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #999999 0%, #555555 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, #999999 0%, #555555 100%);
/* W3C */
}
#fancybox-thumbs {
position: fixed;
left: 0;
width: 100%;
z-index: 8080;
background: rgba(0, 0, 0, 0.3);
}
#fancybox-thumbs.bottom {
bottom: 0px;
}
#fancybox-thumbs.top {
top: 0px;
}
#fancybox-thumbs .outer {
padding: 10px 34px 10px 30px;
}
#fancybox-thumbs .inner {
width: 100%;
overflow: hidden;
}
#fancybox-thumbs ul {
list-style: none;
margin: 0 auto;
padding: 0;
left: 0;
overflow: hidden;
}
#fancybox-thumbs ul li {
float: left;
padding: 3px;
margin: 0 4px;
list-style: none;
}
#fancybox-thumbs ul li a {
display: block;
overflow: hidden;
outline: none;
background: #222;
box-shadow: 1px 1px 2px #000;
border-radius: 2px;
border: 3px solid #fff;
zoom: 1;
}
#fancybox-thumbs ul li img {
display: block;
border: 0;
margin: 0;
padding: 0;
border-radius: 2px;
max-width: none;
}
#fancybox-thumbs ul li.fancybox-thumb-active {
padding: 0;
}
#fancybox-thumbs ul li.fancybox-thumb-active a {
opacity: 1;
border-width: 6px;
border-color: #fff;
}
.fancybox-thumb-prev, .fancybox-thumb-next {
position: absolute;
top: 10px;
bottom: 10px;
width: 20px;
background: #222;
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
display: none;
}
.fancybox-thumb-prev {
left: 4px;
}
.fancybox-thumb-next {
right: 4px;
}
.fancybox-thumb-prev:hover, .fancybox-thumb-next:hover {
background: #111;
background: rgba(0, 0, 0, 0.5);
}
.fancybox-thumb-prev span, .fancybox-thumb-next span {
position: absolute;
top: 50%;
width: 8px;
height: 12px;
margin-top: -6px;
background-repeat: no-repeat;
}
.fancybox-thumb-prev span {
left: 5px;
}
.fancybox-thumb-next span {
right: 5px;
}
/* ---------------------------------- */
/* -------- BANNER OF WEBSITE ------- */
/* ---------------------------------- */
#banner .container{
padding:0px;
max-width:none !important;
width:100% !important;
}
#logo{
width:80%;
max-width:250px;
padding:30px 0px;
}
#logo > img {
width:100%;
height:auto;
}
.contact {
font-size:1em;
color:inherit;
}
.contact p, .contact a{
display:block;
color:inherit;
text-decoration:none;
line-height:1.2em;
text-align:right;
}
.bannerContainer{
width:100%;
max-width:1100px;
margin:auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.topBar{
background:rgba(0,0,0,.5);
color:#fff;
}
.topBar .bannerContainer p, .topBar .bannerContainer a{
display:inline-block;
font-size:.9em;
padding:10px 0;
}
/* ---------------------------------- */
/* ---------- SOCIAL LINKS ---------- */
/* ---------------------------------- */
.socialLinks {
position: relative;
display:block;
margin-left:0px;
}
.socialLinks span {
font-size: .9em;
font-weight: 700;
margin-right: 20px;
}
.socialLinks a {
color:#fff;
position: relative;
text-decoration: none;
vertical-align: top;
margin: 0px;
}
.socialLinks a:after {
font-family: FontAwesome;
width: 23px;
height: 23px;
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
padding:1px 0px 0px;
}
/* ---------------------------------- */
/* ---------- BASIC BTNS ---------- */
/* ---------------------------------- */
.basicFrame {
width: 24%;
padding: 20px 0px;
background: #ccc;
color: #222;
cursor: pointer;
border-radius: 2px;
text-align: center;
margin-bottom: 10px; }
.basicFrame:hover {
background: #222;
color: #f1f1f1; }
/* ---------------------------------- */
/* -------- GRAPHICAL BUTTONS ------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* -------- SLIDESHOW STYLES -------- */
/* ---------------------------------- */
#slText{
position:Absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:50;
}
#slText .cont {
width:100%;
height:100%;
max-width:1100px;
margin:auto;
position:relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: center;
justify-content: center;
}
#slText .cont h1{
font-weight:300;
color:#222;
font-size:3em;
display:inline-block;
line-height:1em;
margin-bottom:5px;
clear:both;
float:left;
width:45%;
}
#slText .cont p{
font-weight:300;
color:#222;
font-size:1.2em;
padding:20px 0px;
display:inline-block;
line-height:1.5em;
margin-bottom:5px;
clear:both;
float:right;
width:35%;
}
#slText .cont a{
font-weight:300;
color:#fff;
font-size:1em;
float:right;
clear:both;
padding:15px 10px;
display:block;
line-height:1em;
margin-bottom:5px;
background:rgba(38,80,148,0.8);
text-decoration:none;
width:140px;
text-align:center;
}
/* ---------------------------------- */
/* ----------- MODULE CSS ---------- */
/* ---------------------------------- */
.moduleTable, .moduleTable * {
box-sizing: border-box;
}
.moduleTable tr, .moduleTable td {
height: auto !important;
}
.moduleTable > tbody > tr > td {
vertical-align: top;
}
.twoColumn > tbody > tr > td {
width: 50%;
}
.moduleTable img {
width: 100% !important;
height: auto !important;
}
.sidebarLeft > tbody > tr > td:first-child {
width: 30%;
padding-right: 3%;
}
.sidebarLeft > tbody > tr > td:last-child {
width: 70%;
}
.sidebarRight > tbody > tr > td:first-child {
width: 70%;
padding-right: 3%;
}
.sidebarRight > tbody > tr > td:last-child {
width: 30%;
}
.threeColumn > tbody > tr > td {
width: 33%;
}
.twoColumn > tbody > tr > td:first-child, .threeColumn > tbody > tr > td:first-child {
padding-right: 3%;
}
.twoColumn > tbody > tr > td:last-child, .threeColumn > tbody > tr > td:last-child {
padding-left: 3%;
}
.menuTable > tbody > tr:nth-child(odd) {
background: rgba(0,0,0,0.06);
}
.menuTable > tbody > tr > td:last-child {
width: 100px;
vertical-align: bottom;
text-align: right;
}
@media all and (max-width: 900px) and (min-width: 700px) {
.moduleTable.threeColumn > tbody > tr > td {
display: inline-block !important;
width: 48% !important;
box-sizing: border-box;
}
.moduleTable.threeColumn > tbody > tr > td:first-child {
padding-right: 3%;
}
.moduleTable.threeColumn > tbody > tr > td:last-child {
padding-left: 0;
}
.moduleTable.threeColumn > tbody > tr > td.thirdColumn {
display: block !important;
width: 98% !important;
}
}
@media all and (max-width: 700px) {
.moduleTable.twoColumn > tbody > tr > td, .moduleTable.threeColumn > tbody > tr > td, .moduleTable.sidebarLeft > tbody > tr > td, .moduleTable.sidebarRight > tbody > tr > td {
display: block !important;
width: 100% !important;
padding: 10px 0;
}
.overflowTable td {white-space: nowrap; padding: 0 0.5em 0 0;}
}
@media all and (max-width: 980px) {
.moduleTable .moduleTable.twoColumn > tbody > tr > td, .moduleTable .moduleTable.threeColumn > tbody > tr > td, .moduleTable .moduleTable.sidebarLeft > tbody > tr > td, .moduleTable .moduleTable.sidebarRight > tbody > tr > td {
display: block !important;
width: 100% !important;
padding: 10px 0;
}
}
.accordion * {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.accordion > tbody > tr {
display: block;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
cursor: pointer;
}
.accordion > tbody > tr > td {
display: block;
width: 100%;
}
.accordion > tbody > tr > td:last-child {
overflow: hidden;
padding-top: 0;
}
.expand {
display: block;
margin-top: -200%;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}
.accordion > tbody > tr.on .expand {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
margin-top: 0;
background: rgba(0,0,0,0.06);
padding: 0.8em 1.2em;
border-radius: 1em;
}
.accordion > tbody > tr > td:first-child:before {
content: "\f055";
display: inline-block;
font-family: FontAwesome;
margin-right: 10px;
font-size: 1.6em;
-webkit-transition: all 0.5s;
transition: all 0.5s;
color: #999;
}
.accordion > tbody > tr > td:first-child > *:first-child {
display: inline-block;
}
.accordion > tbody > tr.on > td:first-child:before {
content: "\f056";
}
.accordion > tbody > tr:hover > td:first-child:before {
color: #333
}
.accordion.readMoreAccordian > tbody > tr > td:first-child:after {
content: "read more";
display: block;
margin-left: 3px;
margin-top: 0;
font-size: 0.9em;
color: #999;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.accordion.readMoreAccordian > tbody > tr.on > td:first-child:after {
margin-top: -10px;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.accordion.readMoreAccordian > tbody > tr > td:hover:first-child:after {
color: #333;
}
.accordion.readMoreAccordian > tbody > tr > td:first-child:before {display: none;}
.responsiveTable th {
text-align: left;
}
.responsiveTable tr:nth-child(odd) {
background: rgba(0,0,0,0.05);
}
@media screen and (max-width: 700px) {
.responsiveTable tr {
display: block;
border-bottom: 4px solid rgba(0,0,0,0.2);
}
.responsiveTable tr:first-of-type {
display: none;
}
.responsiveTable td {
display: block;
border: none;
line-height: 1.8em;
width: 100%;
padding-left: 90px;
position: relative;
overflow:hidden;
text-overflow:ellipsis;
box-sizing: border-box;
}
.responsiveTable td:before {
display: block;
position: absolute;
left: 0;
width: 90px;
font-weight: bold;
overflow:hidden;
text-overflow:ellipsis;
}
.responsiveTable tr:nth-child(odd) {
background: rgba(0,0,0,0.0);
}
.responsiveTable td:nth-child(odd) {
background: rgba(0,0,0,0.05);
}
}
/*Add to Home Screen Button */
.addtohome, .addtohome * {
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.addtohome {
position: fixed;
left: 10px;
right: 10px;
bottom: 20px;
margin: auto;
display: none;
z-index: 1000000;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
padding: 8px 2%;
}
.addToHome .flexCenter {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.addToHomeLogo {
display: inline-block;
width: 65px;
background: #fff;
border-radius: 5px;
overflow: hidden;
}
.addToHomeLogo img {
width: 100%;
height: auto;
}
.addtohome .addHomeText {
display: inline-block;
width: calc(94% - 65px);
margin-left: 2%;
color: #fff;
font-weight: 300;
font-size: 0.85em;
line-height: 1.4em;
padding: 8px 0 6px;
}
.addIcon {
margin: 0 2px;
width: 12px;
height: 12px;
display: inline-block;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
position: relative
}
.addIcon:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
box-sizing: border-box;
height: 1px;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
}
.addIcon:after {
content: "\f176";
font-family: FontAwesome;
font-size: 10px;
position: absolute;
top: -10px;
left: 3px;
margin: auto;
}
.addtohome:after {
position: absolute;
bottom: -10px;
left: 46%;
width: 0px;
height: 0px;
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0, 0, 0, .8);
}
.addtohome:before {
content: "\f057";
font-family: FontAwesome;
color: #fff;
position: absolute;
top: 1px;
right: 3px;
}
/*------- Drop Down Enquiry -------------*/
#enquire-dropdown {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.95);
display: none;
overflow: hidden;
}
#enquire-dropdown .container {
width: 100%;
height: 100%;
height: 100vh;
max-width: 1100px !important;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: initial;
}
#enquire-dropdown .flexRow {
width: 100%;
text-align: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
/*-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;*/
-webkit-justify-content: space-between;
-ms-flex-pack: justfiy;
justify-content: space-between;
}
#enquire-dropdown .col-2 {
width: calc(50% - 20px);
margin: 10px;
}
#enquire-dropdown #enquiry {
color: #fff;
background: none;
font-size: 1em;
width: 100%;
max-width: 450px;
margin: auto;
float: none;
}
.dropContact {
text-align: center;
color: #fff;
border-right: 1px solid rgba(255,255,255,0.5);
}
#enquire-dropdown h3 {
color: #fff;
margin-bottom: 25px;
font-size: 1.8em;
font-weight: inherit;
text-align: center;
}
#enquire-dropdown #enquiry input,
#enquire-dropdown #enquiry textarea {
border: none;
padding: 7px 15px 7px 45px;
-webkit-appearance: none;
/*border-radius: 15px;*/
font-family: inherit;
background: rgba(255, 255, 255, 0.05);
color: #fff;
width: 100% !important;
font-size: 0.9em;
box-sizing: border-box;
}
#enquire-dropdown #enquiry input[type="submit"] {
margin-bottom: 10px;
border: 0;
color: #fff;
padding: 10px 0;
cursor: pointer;
width: 100%;
}
.alignLeft {
text-align: left;
padding: 4px 25px;
font-size: 0.9em;
}
#enquire-dropdown #enquiry .alignLeft input {
width: auto !important;
display: inline-block;
margin: 0 15px;
background: rgba(255, 255, 255, 0);
-webkit-appearance: checkbox;
}
.required {
font-size: 0.9em;
text-align: left;
}
.closeBtn {
color: #fff !important;
background: none !important;
font-size: 2.8em;
font-weight: 100;
letter-spacing: 1px;
padding: 2px 13px;
position: absolute;
right: 20px;
text-decoration: none;
text-transform: uppercase;
top: 20px;
line-height: 1.6em;
font-family: FontAwesome;
cursor: pointer;
}
.closeBtn,
#enquire-dropdown #enquiry input[type="submit"] {
-moz-transition: .25s;
-webkit-transition: .25s;
-ms-transition: .25s;
-o-transition: .25s;
transition: .25s;
}
/* INPUT ICONS */
#enquire-dropdown .enqRow {
position: relative;
}
#enquire-dropdown .enqRow span.FontAwesome {
position: absolute;
top: 8px;
left: 28px;
font-size: 0.9em;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#enquire-dropdown .enqRow span.FontAwesome:before {
font-family: FontAwesome;
}
#enquire-dropdown .phone:before {
content: "\f095";
}
#enquire-dropdown .email:before {
content: "\f003";
}
#enquire-dropdown .name:before {
content: "\f007";
}
#enquire-dropdown .question:before {
content: "\f0e6";
}
#enquire-dropdown .clock:before {
content: "\f017";
}
#enquire-dropdown ::-webkit-input-placeholder {
color: #fff;
opacity: 0.6;
}
#enquire-dropdown :-moz-placeholder {
color: #fff;
opacity: 0.6;
}
#enquire-dropdown ::-moz-placeholder {
color: #fff;
opacity: 0.6;
}
#enquire-dropdown :-ms-input-placeholder {
color: #fff;
opacity: 0.6;
}
/* MEDIA QUERIES */
@media all and (max-width: 700px) and (min-width: 0px) {
#enquire-dropdown .mobile-hide {
display: none !important;
}
#enquire-dropdown .col-2 {
width: calc(100% - 20px);
}
}
/* COLOR MODIFIER */
.closeBtn:hover,
.closeBtn:active,
#enquire-dropdown .enqRow span.FontAwesome:before, #enquire-dropdown a {
color: #2ea547 !important;
}
#enquire-dropdown a:hover {
color: #fff;
}
#enquire-dropdown #enquiry input[type="submit"] {
background: #2ea547 !important;
}
#enquire-dropdown #enquiry input[type="submit"]:hover, #enquire-dropdown #enquiry input[type="submit"]:active {
background: #000 !important;
}
/* ---------------------------------- */
/* ---------- CUSTOM FOOTER --------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ----------- ULTIMATE CSS --------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ----------- CUSTOM CSS ----------- */
/* ---------------------------------- */
/*-----------------------------------------------*/
/*------------- IPAD PORTRAIT FIX ---------------*/
/*-----------------------------------------------*/
@media all and (max-width: 781px) and (min-width: 600px){
}
/* ---------------------------------- */
/* ------ MAIN BODY OF WEBSITE ------ */
/* ---------------------------------- */
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust: none;
/* This stops the iPhone from automatically changing the size of the text when you flip the phone */
}
/* ---------------------------------- */
/* ---------- VIEW CART BTN --------- */
/* ---------------------------------- */
.viewCart {
position: relative;
width: 100%;
margin-bottom: 10px;
/*--- JUSTIFY CONTENT ---*/
justify-content: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
/*--- END JUSTIFY CONTENT ---*/
}
/* ---------------------------------- */
/* ------------ Tables ------------- */
/* ---------------------------------- */
td {
display:block;
width:100%;
}
/* ---------------------------------- */
/* ------------ SIDEBAR ------------- */
/* ---------------------------------- */
.sidebar, #outerSidebar {
display: none;
}
/* --------- MOBILE MENU -------------*/
body {
padding-top: 50px;
}
#mobileMenu {
position: fixed;
z-index: 1005;
top: 0;
left: 0;
right: 0;
bottom: auto;
}
.activeNav #mobileMenu {
/* height: 100%; */
bottom: 0;
box-sizing: border-box;
padding-bottom: 60px;
}
#mobileMenu nav {
overflow-y: auto;
height: 100%;
}
#mobileMenu span {
padding: 10px !important;
padding: 2.5vh 10px !important;
}
#navMenuWrap {
display: flex;
background: #111; /*color*/
}
#mobileMenu #navMenuWrap > * {
display: block;
flex: 1;
border-right: 1px solid rgba(255,255,255,0.1);
display: flex;
flex-direction: column;
justify-content: center;
text-decoration: none;
padding: 10px 5px;
box-sizing: border-box;
background: none;
}
.link0 #homeLink:before, .link0 #homeLink:after {
opacity: 0.3;
}
#mobileMenu #navMenuWrap > *:last-child {
border-right: 0px solid transparent;
}
#mobileMenu #navMenuWrap > *:before, #mobileMenu #navMenuWrap > *:after {
line-height: 1em;
text-align: center;
display: block;
color: #fff;
}
#mobileMenu #navMenuWrap > *:before {
font-family: FontAwesome;
margin-bottom: 5px;
font-size: 1em;
}
#mobileMenu #navMenuWrap > *:after {
font-size: 0.8em;
}
#mobileMenu #navMenuWrap > #navToggle:before {
content: "\f0c9";
}
#mobileMenu #navMenuWrap > #homeLink:before {
content: "\f015";
}
#mobileMenu #navMenuWrap > #emailLink:before {
content: "\f0e0";
}
#mobileMenu #navMenuWrap > #phoneLink:before {
content: "\f095";
}
#mobileMenu #navMenuWrap > #addressLink:before {
content: "\f041";
}
#mobileMenu #navMenuWrap > #navToggle:after {
content: "Menu";
}
#mobileMenu #navMenuWrap > #homeLink:after {
content: "Home";
}
#mobileMenu #navMenuWrap > #emailLink:after {
content: "Enquire";
}
#mobileMenu #navMenuWrap > #phoneLink:after {
content: "Phone";
}
#mobileMenu #navMenuWrap > #addressLink:after {
content: "Address";
}
/* --------- active nav -------------*/
#mobileMenu #navMenuWrap > #navToggle.activeNav:before {
content: "\f00d";
}
#mobileMenu #navMenuWrap > #navToggle.activeNav:after {
content: "Close";
}
html.activeNav body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
overflow-y: none;
}
#mobileMenu {
transition: 0.3s;
}
.mobileScroll.mobileScrollStart #mobileMenu {
transform: translatey(-100%);
}
html.activeNav .mobileScroll.mobileScrollStart #mobileMenu {
transform: translatey(0%);
}
#menu {
display: none;
}
#navToggle {
width: 100%;
background: #222;
color: #f4f4f4;
padding: 10px 0;
position: relative;
text-align: left;
cursor: pointer; }
#navToggle:before {
font-family: FontAwesome;
margin-left: 8px;
content: "\f0c9 ";
line-height: 1em;
font-size: 1.5em; }
#navToggle:after {
margin-left: 8px;
content: "Menu";
line-height: 1em;
font-size: 1.5em; }
#mobileMenu {
display: inline-block;
background: #222;
}
#mobileMenu nav {
display: none; }
#mobileMenu li {
list-style-type: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#mobileMenu li a {
width: 100%;
text-decoration: none;
display: inline-block;
box-sizing: border-box; }
#mobileMenu li span {
display: block;
padding: 20px 10px;
color: #fff;
}
#mobileMenu .current {
background: rgba(0, 0, 0, 0.3);
}
#mobileMenu li a:hover {
background: rgba(255, 255, 255, 0);}
/* #mobileMenu li:active {
background: rgba(255, 255, 255, 0.1); } */
#mobileMenu .parent > span:after {
position: relative;
display: inline-block;
font-family: FontAwesome;
margin-left: 10px;
content: "\f107";
line-height: 1em; }
#mobileMenu .parent.clicked > span:after {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
/* ---------------------------------- */
/* ----------- SUB MENU ----------- */
/* ---------------------------------- */
#mobileMenu li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
background: rgba(255,255,255,0.07); }
#mobileMenu li ul a {
padding-left: 30px; }
#mobileMenu li a:hover {
background: rgba(255, 255, 255, 0); }
/* #mobileMenu li:active {
background: rgba(255, 255, 255, 0.1); } */
#mobileMenu .parent > a:after {
font-family: FontAwesome;
margin-left: 8px;
content: "\f107";
line-height: 1em; }
/* ---------------------------------- */
/* --------- PHOTO SECTION ---------- */
/* ---------------------------------- */
.imageSection .item {
width: 46%;
margin: 0;
}
.contentImgRow {
/*--- JUSTIFY CONTENT ---*/
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
/*--- END JUSTIFY CONTENT ---*/
/*------ FLEX WRAP ------*/
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
/*------ END FLEX WRAP ------*/
}
/* ---------------------------------- */
/* ----------- CUSTOM DIVS ---------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ------------- FOOTER ------------- */
/* ---------------------------------- */
footer {
padding: 0 0 10px 0;
}
footer .container {
-webkit-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
footer nav {
width: 100%;
text-align: center;
padding: 10px 0;
background: rgba(0, 0, 0, 0.2);
/*---- DISPLAY FLEX -----*/
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
/*---- END DISPLAY FLEX -----*/
/*------ FLEX ALIGN -----*/
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
/*------ END FLEX ALIGN -----*/
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
footer .footerRight {
text-align: center;
}
/*----------------------------------------------*/
/*--------------- ENQUIRY FORM -----------------*/
/*----------------------------------------------*/
#enquiry, .enqLeft, .enqRight {
width: 100%;
}
/* ---------------------------------- */
/* --------- CART ITEM PAGE --------- */
/* ---------------------------------- */
.cartItemTop {
display: inline-block;
}
.cartItemTop .cartItemImages, .cartItemTop .cartItemMain {
padding: 0 10px;
width: 100%;
box-sizing: border-box;
}
.cartItemHeading {
font-size: 1.4em;
}
.cartItemImages .cartItemHeading, .cartItemImages .cartItemCatHeading {
display: inline-block;
}
.cartItemHeading {
margin: 10px 0;
}
.flicker {
margin-top: 10px;
}
.cartItemAction {
/*------ FLEX WRAP ------*/
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
/*------ END FLEX WRAP ------*/
}
.cartItemAction a {
box-sizing: border-box;
margin-bottom: 10px;
font-size: .9em;
}
.cartItemQty {
text-align: center;
width: 100%;
margin-bottom: 10px;
}
.cartItemOptions {
width: 100%;
margin: 0;
}
.cartItemOptions .cartItemOptionHeading {
width: 20%;
text-align: left !important;
}
.cartItemOptions select, .cartItemOptions input {
width: 80%;
}
.cartItemContent .cartItemMain .cartItemPrice {
text-align: right;
font-size: 1.7em;
height: 42px;
}
.cartItemContent .cartItemMain .cartItemPrice div {
width: 100%;
}
.cartItemContent .cartItemMain .cartItemPrice span {
display: inline-block;
width: auto;
/*------ FLEX ORDER -----*/
order: 1;
-webkit-order: 1;
-ms-flex-order: 1;
/*------ END FLEX ORDER -----*/
margin: 5px 0 0;
}
.cartItemContent .cartItemMain .cartItemCode {
text-align: right;
font-size: .8em;
padding: 0 10px;
}
.cartItemShortDesc {
padding: 10px 0;
}
.cartItemBottom {
padding: 0 10px;
}
/* ---------------------------------- */
/* ----------- CART ITEMS ----------- */
/* ---------------------------------- */
.cartItem {
width: 48%;
margin-bottom: 10px;
}
.cartItem:nth-last-child(1), .cartItem:nth-last-child(2), .cartItem:nth-last-child(3), .cartItem:nth-last-child(4) {
margin-bottom: 10px;
}
.cartItem:nth-last-child(1), .cartItem:nth-last-child(2) {
margin-bottom: 0px;
}
.cartItemPrice {
display: inline-block;
text-align: center;
height: 58px;
width: 100%;
box-sizing: border-box;
}
.cartItemPrice span {
width: 100%;
display: inline-block;
font-size: .7em;
}
.cartItemBtns a {
padding: 5px;
box-sizing: border-box;
}
.cartItemBtns a span {
width: 100%;
display: inline-block;
text-align: center;
}
.viewCartRow {
/*------ FLEX WRAP ------*/
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
/*------ END FLEX WRAP ------*/
}
.viewCartDescription {
width: 60% !important;
}
.viewCartRow {
font-size: .8em;
padding: 5px;
}
.viewCartRow .viewCartTotal {
width: 50px;
text-align: left;
}
.viewCartRow .viewCartDelete {
width: 25px;
}
.viewCartItem, .viewCartPrice {
display: none;
}
.cartUpdate, .cartSubTotal {
width: 100%;
text-align: center;
box-sizing: border-box;
}
.cartItemAction a {
margin-bottom: 0;
}
.viewCartQuantity {
display: none;
}
.cartItemAction .cartItemPrev, .cartItemAction .cartItemAdd {
width: 100%;
margin-top: 3px;
text-align: center;
}
/*-- CHECKOUT --*/
.checkoutSection {
font-size: .9em;
}
.resumeShopping {
display: none;
}
.checkoutSingle {
display: inline-block;
}
.singleInput {
width: 100% !important;
margin-bottom: 10px;
}
.checkoutStageComplete {
width: 100%;
text-align: center;
/*--- JUSTIFY CONTENT ---*/
justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
/*--- END JUSTIFY CONTENT ---*/
}
.cartBtn {
width: 100%;
}
.checkoutNext {
margin-top: 10px;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.reviewQuestionRow {
display: inline-block;
width: 100%;
}
.reviewQuestionRow .reviewQuestion, .reviewQuestionRow .reviewQuestionAnswer {
width: 100%;
margin: 0;
box-sizing: border-box;
}
.checkoutReviewMessage {
word-wrap: break-word;
}
.checkoutReview {
display: inline-block;
}
.checkoutSectionInner {
width: 100% !important;
box-sizing: border-box;
margin-top: 5px;
}
.cartQuestionRow, .cartQuestion, .cartQuestionInput {
width: 100% !important;
display: inline-block;
margin: 3px 0 !important;
}
/* ---------------------------------- */
/* -------- BANNER OF WEBSITE ------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* -------- GRAPHICAL BUTTONS ------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* -------- SLIDESHOW STYLES -------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ---------- CUSTOM FOOTER --------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ----------- ULTIMATE CSS --------- */
/* ---------------------------------- */
/* ---------------------------------- */
/* ----------- CUSTOM CSS ----------- */
/* ---------------------------------- */
#logo {margin:auto;}
.contact {display:none;}
.flickerplate{height:250px;}
.butFrame {width:49%;}
/*# sourceMappingURL=small.css.map */