/* Main CSS Document */
body,html,p,h1,h2,h3,h4,h5,h6,ul,li,ol,div,span,input,textarea {
margin: 0;
padding: 0;
}
body {
color: #5d5d5d;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #ffffff;
overflow-y: scroll;
}
.clear {
clear: both;
}
img { border: 0; }
a {
text-decoration: none;
color: #006eab;
cursor: pointer;
}
a:hover { text-decoration: underline; }
p { margin-bottom: 18px; line-height: 1.5em; }
li { margin: 10px 16px 0; }
.pagewrap {
width: 100%;
max-width: 1100px;
margin: 0 auto 0;
position: relative;
box-sizing: border-box;
}
.pagewrap.wider {
max-width: 1400px;
}
@media screen and (max-width: 1100px) {
.pagewrap {
padding: 0 20px 0;
}
.pagewrap.standard_content {
padding: 0;
}
.header .pagewrap {
padding: 0 10px 0;
}
}
section {
}
section.grey { background-color: #e6e7e8; }
.popup_container {
position: fixed;
top: 0px;
left: 0px;
height: 100%; width: 100%;
background: rgba(56,49,27,0.8);
z-index: 100;
display: none;
}
/* ================================================================================================= */
/* ============================================= HEADERS =========================================== */
/* ================================================================================================= */
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
color: #1b487f;
}
h3, h4, h5, h6 {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
h1, h2 {
font-weight: bold;
font-size: 28px;
color: #1b487f;
margin: 0 0 20px;
text-align: left;
text-shadow: none;
line-height: inherit;
}
h1.with_sub {
margin-bottom: 2px;
}
.search_bar h1 {
color: #ffffff;
padding: 22px 0 22px 20px;
margin: 0;
}
@media screen and (max-width: 700px) {
.search_bar h1 { font-size: 22px; padding: 18px 10px 14px;}
}
h2 {
}
h3 {
font-size: 32px;
margin: 0px 0 10px;
padding: 14px 0 0;
font-weight: bold;
}
h4 {
font-size: 20px;
font-weight: bold;
margin-bottom: 12px;
}
h5 {
color: #ffffff;
font-size: 20px;
font-weight: bold;
margin: 0 0 20px;
}
h6 {
color: #1b487f;
font-weight: bold;
text-align: left;
font-size: 16px;
margin: 0 0 12px;
}
/* ================================================================================================= */
/* ============================================= /HEADERS ========================================== */
/* ================================================================================================= */
/* ===================================================================================================== */
/* ============================================= TOP HEADER BAR ======================================== */
/* ===================================================================================================== */
.header {
width: 100%;
height: 114px;
background-color: #1b487f;
z-index: 10;
transition: all 0.3s;
}
.header_top {
height: 14px;
background-color: #ffffff;
}
.basket_summary {
float: right;
margin-top: 20px;
color: #000;
font-weight: bold;
font-size: 13px;
}
.basket_summary a {
color: #000;
}
.logo {
width: 260px;
position: absolute;
left: 1%;
top: -10px;
transition: all 0.3s;
}
.smaller .logo {
top: -0px;
width: 130px;
}
.header.fixed {
position: fixed;
top: 0px;
}
.header.smaller {
height: 55px;
}
.header.smaller .header_top {
height: 0px;
}
.header.smaller .basket_summary {
margin-top: 3px;
}
.gradient_bg {
background: #1b487f;
background: -moz-linear-gradient(-60deg, #1b487f 40%, #006eab 60%);
background: -webkit-linear-gradient(-60deg, #1b487f 40%,#006eab 60%);
background: linear-gradient(120deg, #1b487f 40%,#006eab 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b487f', endColorstr='#006eab',GradientType=1 );
}
/* ===================================================================================================== */
/* ============================================= /TOP HEADER BAR ======================================= */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= NAVIGATION ============================================ */
/* ===================================================================================================== */
.main_nav_container {
float: right;
}
.main_nav_container {
transition: all 0.3s;
height: 100px;
}
.smaller .main_nav_container { height: 55px; }
.main_nav {
transition: all 0.3s;
height: 100%;
}
.main_nav li {
margin: 0; padding: 0;
list-style-type: none;
float: left;
height: 100%;
min-width: 80px;
max-width: 180px;
transition: all 0.2s;
}
.main_nav li a {
display: block;
height: 100%;
padding: 28px 24px 0 12px;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.5px;
color: #fff;
text-transform: uppercase;
box-sizing: border-box;
}
.smaller .main_nav li a {
padding-top: 9px;
font-size: 14px;
}
.main_nav li:hover {
text-decoration: none;
/*background: rgba(0,110,171,0.5);*/
background: rgba(255,255,255,0.2);
color: #ffffff;
}
.main_nav li:hover a { text-decoration: none; }
.hamburger_menu {
position: absolute;
top: 45px;
right: -1530px;
opacity: 0;
transition: 0.3s all;
font-size: 32px;
cursor: pointer;
color: #fff;
}
.hamburger_menu.on {
color: #ffffff;
}
.smaller .hamburger_menu {
top: 5px;
}
.right_nav {
float: right;
}
.right_nav li {
float: right;
}
.right_nav li a {
letter-spacing: normal;
}
.right_nav li .fa {
display: block;
font-size: 26px;
}
.basket_link {
position: relative;
}
.right_nav li.basket_link a:hover {
background-color: transparent;
color: #38311b;
}
.basket_total_num {
position: absolute;
bottom: 2px;
right: 20px;
width: 18px; height: 18px;
border-radius: 9px;
background-color: #d1539a;
color: #ffffff;
font-size: 12px;
text-align: center;
padding: 2px 0px 0px 0px;
box-sizing: border-box;
transition: 0.3s all;
}
.basket_link:hover .basket_total_num, .basket_link .basket_total_num.white {
background-color: #ffffff;
color: #d1539a;
}
.basket_total_num.off {
display: none;
}
.hide_on_wide { display: none; }
.hide_on_narrow { }
@media screen and (max-width: 930px) {
.hamburger_menu {
display: block;
opacity: 1;
right: 30px;
z-index: 15;
}
.main_nav_container, .smaller .main_nav_container {
opacity: 1;
z-index: 14;
top: 0px;
right: 0;
position: absolute;
float: none;
padding-bottom: 20px;
overflow: hidden;
width: 0;
height: auto;
}
.main_nav_container.on {
width: 100%;
}
.main_nav, .main_nav_container {
background-color: #006eab;
margin-top: 0;
}
.main_nav {
margin-left: 70px;
margin-top: 45px;
width: 100%;
}
.header.smaller .main_nav_container {
margin-top: 0px;
}
.header.smaller .main_nav {
margin-top: 25px;
}
.main_nav li {
width: 100%;
height: 55px;
float: none;
display: block;
max-width: 10000px;
}
.main_nav li a {
color: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
}
.main_nav li a:hover {
background: rgba(255,255,255,0.2);
}
.hide_on_wide { display: block; }
.hide_on_narrow { display: none; }
}
/* ===================================================================================================== */
/* ============================================= /NAVIGATION =========================================== */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= SUB NAVIGATION ======================================== */
/* ===================================================================================================== */
.submenu {
background-color: #006eab;
color: #ffffff;
}
.submenu ul, .submenu li {
margin: 0;
padding: 0;
list-style-type: none;
color: #fff;
display: block;
}
.submenu li {
min-height: 40px;
transition: all 0.3s;
}
.submenu li.sub {
background: rgba(255,255,255,0.2);
}
.submenu li:hover, .submenu li.on {
background: rgba(255,255,255,0.5);
}
.submenu a {
color: #ffffff;
font-weight: bold;
display: block;
/*height: 100%;*/
padding: 10px 20px;
box-sizing: border-box;
}
.submenu a:hover {
text-decoration: none;
}
.show_hide_submenu {
display: none;
position: absolute;
left: 20px;
top: 10px;
font-size: 30px;
}
@media screen and (max-width: 880px) {
.show_hide_submenu {
display: block;
}
.submenu {
padding-top: 44px;
padding-bottom: 7px;
transition: all 0.5s;
}
.submenu ul {
overflow: hidden;
height: 0;
max-height: 0px;
min-height: 0px;
transition: all 0.5s;
}
.submenu.open {
padding-bottom: 20px;
}
.submenu.open ul {
height: auto;
max-height: 900px;
min-height: 50px;
transition: all 0.5s;
}
}
/* ===================================================================================================== */
/* ============================================= SUB NAVIGATION ======================================== */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= BANNER ================================================ */
/* ===================================================================================================== */
section.banner {
width: 100%;
height: 450px;
background-color: #fff;
position: relative;
overflow: hidden;
}
.banner .pagewrap { height: 100%; box-sizing: border-box; z-index: 2; }
.banner_container {
height: 100%;
}
.slide {
height: 100%;
outline: none;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
box-sizing: border-box;
}
.slide .bg_img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
.slide .bg_img.img2 {
display: none;
}
@media screen and (max-width: 600px) {
.slide .bg_img {
display: none;
}
.slide .bg_img.img2 {
display: block;
}
}
.first_section {
border-top: 114px solid #ffffff;
}
.first_section.smaller {
border-top: 80px solid #38311b;
}
.banner h1 {
margin-bottom: 0px;
}
.move_down {
position: absolute;
width: 54px;
margin-left: -27px;
left: 50%;
bottom: 30px;
color: #ffffff;
cursor: pointer;
transition: bottom 0.3s;
}
.caption {
background: rgba(27,72,127,0.7);
color: #fff;
padding: 20px 20px 20px 20px;
float: left;
margin: 26px 0 0 20px;
}
.caption.right {
float: right;
margin: 26px 20px 0 0;
text-align: right;
}
.caption h3 {
color: #ffffff;
}
.caption a {
display: inline-block;
background: white;
color: #1b487f;
font-weight: bold;
text-decoration: none;
padding: 1px 10px;
transition: 0.2s all;
}
.caption a:hover {
color: #fff;
background: #006eab;
}
@media screen and (max-width: 720px) {
}
@media screen and (max-width: 540px) {
}
@media screen and (max-width: 460px) {
.caption {
padding: 12px 40px 12px 12px;
margin-left: 14px;
}
.caption.right {
padding: 12px 12px 12px 40px;
margin-right: 14px;
}
.caption h3 {
font-size: 22px;
}
}
/* ===================================================================================================== */
/* ============================================= /BANNER =============================================== */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= SEARCH BAR ============================================ */
/* ===================================================================================================== */
.search_bar {
background-color: #1b487f;
height: 90px;
text-align: center;
}
.search_bar .line {
width: 100%;
max-width: 1100px;
position: absolute;
top: 0px;
left: 0px;
height: 2px;
background: white;
margin-top: 18px;
z-index: 1;
box-sizing: border-box;
}
.label_container {
display: inline-block;
margin-top: 0px;
background-color: #1b487f;
position: relative;
z-index: 2;
padding: 4px 20px 4px;
margin: 0 0 5px;
}
.search_bar label {
display: inline-block;
width: auto;
color: #fff;
font-weight: normal;
font-size: 20px;
cursor: pointer;
margin: 0 10px 0;
letter-spacing: 1px;
}
.search_bar label input[type="radio"] {
display: inline-block;
width: auto;
padding: 0;
margin: 0;
margin-right: 5px;
cursor: pointer;
height: 25px;
vertical-align: text-bottom;
}
.search_bar select, .search_bar input[type="submit"] {
/*float: left;*/
display: inline-block;
width: 15.8%;
margin: 0 1% 0 0;
border-radius: 0px;
font-family: "Open Sans", sans-serif;
color: #006eab;
padding-top: 0;
font-size: 14px;
}
.search_bar select {
border: none;
}
.search_bar input[type="submit"] {
margin-right: 0;
}
input[type="submit"], .search_bar input[type="submit"] {
background: rgba(228,27,35,1);
color: #fff;
font-weight: bold;
cursor: pointer;
transition: 0.3s all;
}
input[type="submit"]:hover, .search_bar input[type="submit"]:hover {
background: #006eab;
}
@media screen and (max-width: 870px) {
.search_bar select, .search_bar input[type="submit"] {
font-size: 11px;
}
}
@media screen and (max-width: 712px) {
.search_bar {
height: auto;
padding-bottom: 10px;
}
.search_bar label {
letter-spacing: normal;
}
.search_bar select, .search_bar input[type="submit"] {
width: 100%;
margin-right: 0;
font-size: 14px;
margin-bottom: 6px;
}
}
/* ===================================================================================================== */
/* ============================================= /SEARCH BAR =========================================== */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= FORM ================================================== */
/* ===================================================================================================== */
/* ========================= FORM =========================== */
input,textarea,select {
display: block;
background: none; border: none;
background-color: #ffffff;
border-radius: 8px;
box-sizing: border-box;
width: 100%;
height: 33px;
outline: none;
margin: 4px 0 10px;
padding: 3px 10px 0;
}
textarea {
height: 80px;
}
input[type="checkbox"], input[type="radio"] { display: inline-block; height: auto; width: auto; }
input[type="radio"] { display: inline-block; width: auto; }
input.mini {
width: 30%;
margin-right: 5%;
float: left;
}
input.mini:last-child { margin-right: 0; }
input.invalid, textarea.invalid, select.invalid, div.invalid {
border: 1px solid #e41b16 !important;
animation: invalidcolour 2.5s 1;
}
.captacha_invalid {
border-left: 2px solid #e41b16 !important;
}
select.delivery {
/*background-color: #fff;*/
background: rgba(255,255,255,0.5);
border-radius: 0px;
padding: 2px;
margin: 0px 0 2px 10px;
height: auto;
font-size: 16px;
}
@keyframes invalidcolour {
0% { background: #e41b16; }
100% { background: #fff; }
}
.contactwarning {
color: #e41b16;
padding-bottom: 15px;
}
.contactwarning.green {
color: #1c9522;
font-weight: bold;
}
.dual_leg {
display: none;
}
button, .btn {
background: none; border: none;
background-color: #fff;
text-align: center;
padding: 4px 0 0;
font-size: 18px;
color: #1b487f;
transition: all 0.3s;
cursor: pointer;
font-weight: bold;
display: block;
width: 200px;
height: 30px;
margin: 0 auto 4px;
outline: none;
}
.btn.autowidth { width: auto; display: inline-block; padding: 4px 20px 0; }
button:hover, .btn:hover, .big_button:hover .btn {
background-color: #1b487f;
color: #fff;
text-decoration: none;
}
.btn.inverse {
background-color: #1b487f;
color: #fff;
}
.btn.inverse:hover {
background-color: #006eab;
color: #fff;
}
.btn.selector {
float: left;
width: 30%;
margin: 0 5% 1% 0;
height: 30px;
font-size: 14px;
box-sizing: border-box;
padding-top: 7px;
background-color: #ccc;
}
.btn.selector.on {
background-color: #d1539a;
color: #38311b;
}
fieldset {
border: none;
}
label, legend {
display: block;
font-weight: bold;
width: 100%;
-webkit-padding-start: 0px;
-webkit-padding-end: 0px;
}
legend {
margin: 0 0 6px;
}
label .infolink, legend .infolink {
float: right;
}
.infolink {
opacity: 0.8;
cursor: pointer;
font-size: 17px;
}
.infolink:hover {
opacity: 1;
}
label input[type="checkbox"] {
width: auto;
display: inline-block;
vertical-align: top;
cursor: pointer;
}
.accessories label {
float: left;
width: 50%;
overflow: hidden;
cursor: pointer;
transition: opacity 0.2s;
}
.accessories label:hover, fieldset label:hover, .tabs_right label:hover {
opacity: 0.6;
}
fieldset label { cursor: pointer; }
/* ===================================================================================================== */
/* ============================================= /FORM ================================================= */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= PATTERN SLIDER ======================================== */
/* ===================================================================================================== */
.caravan-slider { /* Requires height if using background images */
height: 190px;
padding-left: 10px;
margin: 10px 35px 30px;
/*overflow: hidden;*/
}
.caravan-slider .slick-prev {
left: -25px;
}
.caravan-slider .slick-next {
right: -25px;
}
.caravan-slider .slick-prev:before, .caravan-slider .slick-next:before {
color: rgb(0,110,171);
font-family: "FontAwesome", "Open sans", sans-serif;
content: "\f054";
}
.caravan-slider .slick-prev:before {
content: "\f053";
}
/*.slick-slider .slick-track, .slick-slider .slick-list { height: 100%; }*/
.slider-slide {
cursor: pointer;
outline: none;
position: relative;
overflow: visible;
margin-right: 10px;
background-color: #006eab;
}
.slider-slide.on {
}
.slider-img {
width: 100%;
height: 114px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
overflow: hidden;
}
.slider-slide .slider_caption {
padding: 4px 10px 0;
box-sizing: border-box;
width: 100%;
display: block;
font-size: 15px;
font-weight: bold;
color: #fff;
line-height: 18px;
}
.slider_price {
font-weight: bold;
color: #fff;
line-height: 18px;
text-align: right;
font-size: 24px;
padding-top: 7px;
position: absolute;
bottom: 10px;
right: 10px;
}
.slider-img .img_overlay {
position: absolute;
left: 0;
top: 0;
background-color: #e41b23;
color: #fff;
text-align: center;
font-size: 10px;
font-weight: bold;
box-sizing: border-box;
}
.slider-img .img_overlay.base {
top: auto;
bottom: 0;
width: 100%;
height: 20px;
padding: 3px 0 0;
}
.slider-img .img_overlay.corner {
transform: rotate(-45deg);
width: 100px;
height: 53px;
line-height: 40px;
font-size: 20px;
text-transform: uppercase;
margin: -11px 0 0 -34px;
padding: 21px 0 0;
}
@media screen and (max-width: 560px) {
.slider-slide .slider_caption {
font-size: 14px;
}
}
/* ===================================================================================================== */
/* ============================================= /PATTERN SLIDER ======================================= */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= POPUP ================================================= */
/* ===================================================================================================== */
.popup {
width: 60%;
height: auto;
background: rgba(100,100,100,1);
border-radius: 10px;
position: absolute;
margin-left: -30%;
left: 50%;
top: 100px;
padding: 20px;
color: #ffffff;
box-sizing: border-box;
}
.close_popup {
position: absolute;
top: 20px; right: 20px;
cursor: pointer;
font-weight: 200;
font-size: 28px;
opacity: 0.6;
transition: 0.3s opacity;
}
.close_popup:hover {
opacity: 1;
}
@media screen and (max-width: 650px) {
.popup {
width: 96%;
left: 2%;
margin-left: 0;
}
}
/* ===================================================================================================== */
/* ============================================= /POPUP ================================================ */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= CONTENT =============================================== */
/* ===================================================================================================== */
section.bg_img {
background-size: cover;
background-repeat: no-repeat;
background-image: url('../images/tymawrholidaysheaderfade.jpg');
background-position: center center;
}
.pagewrap.padding {
padding: 20px 40px 40px;
}
p.intro {
font-size: 17px;
font-weight: bold;
}
.col_container {
text-align: center;
padding-top: 30px;
}
.col {
display: inline-block;
box-sizing: border-box;
text-align: center;
margin: 0 2% 20px 0;
vertical-align: top;
}
.alignleft {
text-align: left !important;
}
.alignright {
text-align: right !important;
}
.col50 {
width: 48%;
padding: 20px;
}
.col50:nth-child(2n), .col.col33:nth-child(3n), .col:last-child {
margin-right: 0;
}
.col.centre, .col.col50.centre {
float: none;
margin: 0 auto 20px;
}
.col33, .col.col33 {
width: 31%;
margin: 0 3% 20px 0;
}
.leftcol, .rightcol {
float: left;
min-height: 100px;
width: 75%;
box-sizing: border-box;
}
.leftcol {
width: 25%;
}
.rightcol {
padding: 40px 35px 100px;
}
.col_img {
width: 100%;
text-align: center;
margin-bottom: 20px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover
}
.col_img.bg {
height: 190px;
}
.col_img img {
width: 80%;
display: inline-block;
border-radius: 8px;
}
@media screen and (max-width: 980px) {
.full_width_text.small {
padding: 0 30px 0;
}
}
@media screen and (max-width: 880px) {
.leftcol {
width: 100%;
min-height: 20px;
}
.rightcol {
width: 100%;
}
}
@media screen and (max-width: 830px) {
.col, .col.col33, .col.col50 {
width: 100%;
margin: 0;
}
.col_img.bg {
height: 250px;
}
}
@media screen and (max-width: 400px) {
.pagewrap.padding {
padding: 20px 20px 20px;
}
.col_img.bg {
height: 180px;
}
}
/* ===================================================================================================== */
/* ============================================= /CONTENT ============================================== */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= BIG BUTTON============================================= */
/* ===================================================================================================== */
.big_button {
float: left;
width: 32%;
height: 250px;
margin: 0 2% 2% 0;
background-color: #1b487f;
transition: all 0.2s;
cursor: pointer;
box-sizing: border-box;
text-decoration: none;
color: #ffffff;
position: relative;
}
.big_button_inner {
margin: 0 18px 0;
padding: 18px 0;
height: 100%;
box-sizing: border-box;
position: relative;
}
.big_button:hover {
text-decoration: none;
background-color: #006eab;
color: #ffffff;
}
.big_button:nth-child(3n) {
margin-right: 0;
}
.big_button .btn {
width: 100%;
bottom: 18px;
position: absolute;
left: 0px;
margin: 0;
}
@media screen and (max-width: 900px) {
.big_button {
width: 49%;
margin-right: 2%;
}
.big_button:nth-child(2n) {
margin-right: 0;
}
.big_button:nth-child(3n) {
margin: 0 auto 2%;
display: block;
float: none;
clear: both;
}
}
@media screen and (max-width: 620px) {
.big_button {
width: 100%;
margin-right: 0%;
}
.big_button:nth-child(2n) {
margin-right: 0;
}
.big_button:nth-child(3n) {
margin: 0 0%;
display: block;
float: left;
clear: both;
}
}
/* ===================================================================================================== */
/* ============================================= /BIG BUTTON ============================================= */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= FEATURE STRIPS ======================================== */
/* ===================================================================================================== */
section.lightblue { background-color: #006eab; }
section.blue { background-color: #1b487f; }
.feature {
height: 200px;
overflow: hidden;
}
.feature .pagewrap {
position: relative;
height: 100%;
padding-top: 20px;
padding-bottom: 20px;
box-sizing: border-box;
}
.feature .textleft, .feature .textright, .feature img {
float: left;
}
.feature .textleft, .feature .textright {
width: 75%;
color: #ffffff;
box-sizing: border-box;
}
.feature .textleft { padding: 0 30px 0 0; }
.feature .textright { padding: 0 0 0 30px; }
.feature img {
width: 25%;
}
.textright .btn {
float: right;
}
.blue .btn:hover {
background-color: #006eab;
}
.youtube_container {
background-color: #1a1a1a;
padding: 30px;
}
.youtube_container iframe {
width: 100%;
height: 500px;
}
.youtube_container.small {
padding: 10px;
width: 80%;
float: right;
}
.youtube_container.small iframe {
width: 100%;
height: 150px;
}
@media screen and (max-width: 900px) {
.feature {
height: auto;
}
.youtube_container iframe {
width: 100%;
height: 300px;
}
}
@media screen and (max-width: 600px) {
.feature .textleft, .feature .textright, .feature img {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.feature .btn {
font-size: 14px;
padding: 4px 10px;
height: auto;
float: left;
}
.youtube_container iframe {
width: 100%;
height: 240px;
}
}
.
/* ===================================================================================================== */
/* ============================================= FEATURE STRIPS ======================================== */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= CHECKOUT ============================================== */
/* ===================================================================================================== */
.qty_repeat { display: none; }
.checkout_table {
width: 100%;
}
.checkout_table td:first-child {
width: 150px;
padding: 10px 0 10px;
}
.checkout_table td:nth-child(3), .checkout_table th:nth-child(3) { text-align: right; width: 75px; }
/*.checkout_table td:nth-child(4), .checkout_table th:nth-child(4) { text-align: right; width: 50px; }*/
.checkout_table td:nth-child(4) { text-align: right; width: 170px; }
.checkout_table td,.checkout_table th {
padding: 20px 0 20px;
border-bottom: 1px solid #38311b;
font-size: 16px;
vertical-align: top;
}
.checkout_table p {
margin-bottom: 6px;
}
.basket_img_container {
width: 130px;
height: 122px;
position: relative;
}
.basket_img, .basket_badge {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
width: 100%;
}
.basket_badge {
z-index: 2;
}
.delete_basket_item {
cursor: pointer;
transition: 0.3s all;
font-size: 20px;
}
.delete_basket_item:hover {
opacity: 0.6;
}
.summary td:first-child {
border: none;
text-align: right;
padding: 10px 0;
}
.summary td:nth-child(2) {
text-align: right;
border: none;
padding: 10px 0;
}
.checkout_table button {
float: right;
width: 310px;
}
.checkout_table tr:last-child td {
border: none;
}
@media screen and (max-width: 890px) {
.checkout_table tr.head {
display: none;
}
.checkout_table td {
display: block;
width: 100% !important;
border-bottom: none;
text-align: center !important;
padding: 8px 0;
}
.basket_img_container {
display: inline-block;
}
.checkout_table p {
margin-bottom: 0px;
}
.checkout_table tr td:last-child {
border-bottom: 1px solid #38311b;
}
.qty_repeat { display: inline; }
td.qty_td { display: none; }
}
@media screen and (max-width: 420px) {
.checkout_table button {
width: 100%;
font-size: 18px;
}
}
/* ===================================================================================================== */
/* ============================================= /CHECKOUT ============================================= */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= CARAVANS ============================================= */
/* ===================================================================================================== */
.summary_bar {
height: 30px;
width: 100%;
padding: 10px 0;
font-size: 16px;
}
.summary_bar a {
text-decoration: underline;
}
.caravan_leftcol, .caravan_rightcol {
float: left;
width: 60%;
}
.caravan_rightcol {
width: 40%;
box-sizing: border-box;
padding: 0 0px 20px 20px;
}
.price {
text-align: right;
font-size: 50px;
line-height: 48px;
}
.descr {
text-align: right;
font-style: italic;
padding-left: 10%;
}
img.floorplan {
float: right;
margin: 20px 0 ;
}
/* ===================== IMAGE VIEWER ==================== */
.img_viewer {
width: 100%;
height: auto;
}
.main_img {
width: 100%;
height: 400px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.main_img .img_overlay {
position: absolute;
left: 0;
top: 0;
background-color: #e41b23;
color: #fff;
text-align: center;
font-size: 22px;
font-weight: bold;
box-sizing: border-box;
}
.main_img .img_overlay.base {
top: auto;
bottom: 0;
width: 100%;
height: 40px;
padding: 3px 0 0;
}
.main_img .img_overlay.corner {
transform: rotate(-45deg);
width: 191px;
height: 97px;
line-height: 40px;
font-size: 36px;
text-transform: uppercase;
margin: -15px 0 0 -64px;
padding: 54px 0 0 3px;
}
.main_img_bar {
width: 100%;
height: 30px;
box-sizing: border-box;
background-color: #1b497d;
color: #ffffff;
padding: 4px 10px;
}
.main_img_bar .left { float: left; color: white; }
.main_img_bar .right { float: right; }
.imgslider {
width: 100%;
height: 100px;
margin: 8px 0 8px;
}
.img_thumb {
margin: 0 8px 0 0;
float: left;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
cursor: pointer;
transition: all 0.3s;
border: 2px solid transparent;
box-sizing: border-box;
outline: none;
}
.img_thumb:hover, .img_thumb.on {
border: 2px solid #1b497d;
}
/* ===================== /IMAGE VIEWER ==================== */
.linksbar {
text-align: justify;
text-justify: distribute-all-lines;
}
.linksbar .btn {
display: inline-block;
*display: inline;
width: auto;
padding-left: 24px;
padding-right: 24px;
margin: 0 0px 0 0;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
/* ===================== FINANCE FORM ==================== */
.col.noleftpad { padding-left: 0; }
.finance_box {
padding: 14px 20px;
box-sizing: border-box;
background-color: #f3f3f3;
}
.col .finance_box, .col.leftalign { text-align: left; }
.calcform_info {
font-size: 11px;
}
.finance_disclaimer {
font-size: 9px;
}
.finance_box .btn {
font-size: 14px;
height: 25px;
width: auto;
}
table.calcform {
width: 100%;
}
table.calcform td {
vertical-align: top;
width: 25%;
}
.calcform input, .calcform select {
border-radius: 0px;
margin: 0 10px 0 0;
}
/* ===================== /FINANCE FORM ==================== */
.caravan_features {
margin: 0 0 40px;
}
@media screen and (max-width: 1010px) {
.linksbar .btn {
font-size: 14px;
height: 28px;
}
}
@media screen and (max-width: 820px) {
.caravan_rightcol, .caravan_leftcol {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.caravan_rightcol *, .descr {
text-align: left;
padding-left: 0;
}
img.floorplan { float: left; }
.youtube_container.small {
width: 100%;
box-sizing: border-box;
}
.youtube_container.small iframe {
height: 300px;
}
.linksbar .btn {
width: 50%;
height: 30px;
display: block;
float: left;
box-sizing: border-box;
border: 2px solid white;
}
}
@media screen and (max-width: 560px) {
.main_img {
height: 250px;
}
.linksbar .btn {
width: 100%;
height: 30px;
border: none;
margin-bottom: 4px;
}
.col50.caravancol {
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
.specifications {
font-size: 12px;
}
table.calcform {
width: 100%;
}
table.calcform tr {
display: block;
width: 100%;
}
table.calcform td {
width: 100%;
padding-bottom: 4px;
display: block;
}
}
/* ===================================================================================================== */
/* ============================================= /CARAVANS ============================================= */
/* ===================================================================================================== */
/* ===================================================================================================== */
/* ============================================= FOOTER ================================================ */
/* ===================================================================================================== */
footer {
color: #fff;
min-height: 90px;
}
footer .pagewrap {
padding: 30px 0;
}
footer, footer a {
color: #fff;
}
.footnav {
float: left;
min-width: 200px;
}
.footnav li {
list-style-type: none;
}
footer .col {
float: left;
padding-bottom: 0;
margin: 0;
box-sizing: border-box;
color: #fff;
text-align: left;
}
footer .col1 {
width: 20%;
}
footer .col2 {
width: 50%;
}
footer .col3 {
width: 30%;
text-align: right;
}
.social_icon {
font-size: 26px;
transition: all 0.2s;
}
.social_icon:hover {
opacity: 0.6;
}
@media screen and (max-width: 1120px) {
footer .pagewrap {
padding: 30px 20px;
}
}
@media screen and (max-width: 900px) {
footer .col2 {
display: none;
}
footer .col {
width: 50%;
}
}
@media screen and (max-width: 400px) {
footer .col2 {
display: none;
}
footer .col {
width: 100%;
text-align: center !important;
}
}
/* ===================================================================================================== */
/* ============================================= /FOOTER =============================================== */
/* ===================================================================================================== */
input[type="text"], textarea {
border: 1px solid #ccc;
}
.generic_form input,
.generic_form textarea,
.generic_form select {
width: 430px;
border: 1px solid #ddd;
outline: none;
font-family: "Open sans", sans-serif;
font-size: 14px;
display: inline-block;
box-sizing: border-box;
padding: 6px 10px;
border-radius: 0px;
margin: 0 0 4px;
}
.generic_form input:focus,
.generic_form textarea:focus,
.generic_form select:focus {
border: 1px solid #006eab;
}
.generic_form input[type="submit"] {
width: 100px;
border: none;
}
@media screen and (max-width: 800px) {
.generic_form td {
width: 100%;
display: block;
}
.generic_form input,
.generic_form textarea,
.generic_form select {
width: 100%;
}
}
.product_brief {
display: block;
min-height: 130px;
width: 100%;
box-sizing: border-box;
padding: 0px 0 20px;
margin: 0 0 20px;
border-bottom: 2px solid #006eab;
}
.product_brief .slider-img {
float: left;
width: 300px;
height: 200px;
}
.product_brief .slider-img .img_overlay.base {
display: none;
}
.product_brief h2 {
font-size: 34px;
}
.product_brief h2 span {
float: right;
}
.product_brief h6 {
text-align: right;
color: #e41723;
font-size: 24px;
}
.product_brief .description {
text-align: right;
width: 100%;
float: none;
padding: 0 28% 0 320px;
box-sizing: border-box;
}
.description span {
margin-bottom: 3px;
display: inline-block;
}
.description .singleline
{
padding: 7px 0 9px;
height: 10px;
}
.product_brief .btn {
float: right;
margin-top: 24px;
}
.product_brief .floorplan {
float: right;
width: 25%;
}
.product_brief .floorplan.repeat { display: none; }
.product_brief .floorplan img {
float: right;
width: 100%;
}
.orderby {
float: right;
margin: 10px 0 0;
}
.orderby {font-size: 12px; margin-bottom: 30px;}
.orderby span {margin-right: 6px;}
.orderdropdown
{
width: 365px;
border-style: solid;
border-width: 1px;
border-color: #eaeceb;
}
@media screen and (max-width: 900px) {
.product_brief .slider-img {
width: 220px;
}
.product_brief .description {
width: 100%;
padding: 0 28% 0 240px;
}
.product_brief .btn {
width: 90%;
}
}
@media screen and (max-width: 715px) {
.product_brief .slider-img {
width: 100%;
}
.product_brief .slider-img .img_overlay.base {
display: block;
font-size: 14px;
height: 26px;
}
.product_brief .description {
text-align: left;
width: 100%;
float: left;
padding: 20px 10px 0 10px;
box-sizing: border-box;
}
.product_brief h6 {
display: none;
}
.product_brief h2 {
font-size: 26px;
}
.product_brief .floorplan { display: none; }
.product_brief .floorplan.repeat {
display: block;
width: 100%;
}
.product_brief .btn {
width: 100%;
}
}
@media screen and (max-width: 500px) {
.orderby {
float: none;
width: 100%;
}
.orderby form {
width: 100%;
}
.orderdropdown
{
width:100%;
border-style: solid;
border-width: 1px;
border-color: #eaeceb;
}
}
/*.floorplan .darklink{margin-top: 25px;}
.desc_text, .specifications
{
text-align: left;
color: #5f6565;
font-size: 12px;
}
.desc_text {margin: 20px 0 20px 0;}
.specifications{width: 100%;}
.specifications th {padding: 20px 0 3px 0;}
.specifications td{ padding: 3px 0 3px 0;}
.table_width {width: 145px;}
.specifications li {padding: 1px 0 1px 0;}
*/
/* ===================================================================================================== */
/* ============================================= HIRE QUOTATION ======================================== */
/* ===================================================================================================== */
.quote_form { margin-top: 30px; }
.quote_form td { vertical-align: top; }
.quote_form h4, .quote_form h4 .TotalCost {
color: #63605F;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 20px;
}
.bluebox {
background-color: #e1f4fb;
padding: 5px 6px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 10px;
box-sizing: border-box;
width: 100%;
}
.quote_form label {
display: inline-block;
width: auto;
}
.quote_form input[type="text"], .quote_form select {
width: auto;
display: inline-block;
border-radius: 3px;
margin: 0 0 0 6px;
}
.quote_first_row td {
width: 33%;
}
.quote_first_row td .bluebox {
min-height: 180px !important;
}
.quote_second_row td .bluebox {
min-height: 100px !important;
}
.quote_third_row td .bluebox {
min-height: 50px !important;
}
.bluebox.big { width: 220px; margin: 0 10px; }
.bluebox.full { width: auto; padding-bottom: 10px; }
.formdate, .formdate2 { float: left; margin-right: 40px; }
.TotalCost { border: 0; }
.bluebox .TotalCost { background-color: #e1f4fb; }
.noheight { width: 0; height: 0; }
.left { float: left; }
h4.left { padding-top: 3px; }
.redlink { color: #ff0000; float: right; font-size: 20px; margin-top: 4px; }
.inner_table { border-collapse: collapse; width: 100%; }
.inner_table td { vertical-align: middle; }
@media screen and (max-width: 930px) and (min-width: 768px) {
.quote_first_row td .bluebox {
min-height: 330px !important;
}
.makesmaller { font-size: 12px; }
}
@media screen and (max-width: 656px) {
table.quote_form_table>tbody>tr>td {
display: block;
width: 100%;
}
.quote_first_row td .bluebox,
.quote_second_row td .bluebox,
.quote_third_row td .bluebox
{ width: 100% !important; margin: 8px 0 8px; }
.quote_third_row td .bluebox {
height: 100px;
}
}
/* ===================================================================================================== */
/* ============================================= /HIRE QUOTATION ======================================= */
/* ===================================================================================================== */
.duein_table {
width: 100%;
}
.duein_table .head {
background-color:#2f63a2;
color:white;
font-weight: bold;
font-size: 16px;
}
.duein_table .head span {
font-style: italic;
}
.duein_table td {
padding:6px;
}
@media screen and (max-width: 800px) {
.duein_table {
font-size: 14px;
}
}