/* Mobile -------------------------------------------------- ------------------------------------------------*/ @media screen and (max-width : 480px) { body { font-size: 1em; line-height: 1em; } .subfooter_box h5, .subfooter_boxt h5, #body h1, #body h4, h1, h2, h3, h4, h5, h6 { font-size: 1.4em; line-height: 1.4em; } .subfooter_box h5 a, .subfooter_boxt h5 a { font-size: 1.4em; } .button { font-size: 1em; margin: 2% 0; padding: 2%; } #menu { display: none; } /* slider --------------------------------*/ .header_banner img, .nivoSlider, #slider { height: 400px; } /* navigation --------------------------------*/ #navigation, #navigation2 { width: 100%; height: 60px; margin:0; padding:0; background: url(https://staininglodgevenue.co.uk/uploads/prem01.seesites.biz_--_789736362.jpg) no-repeat; background-size: auto; background-position: right; position: absolute; top:0; right: 0; z-index: 9999; } #nav { width: 96%; top:-1000px; float: none; display: none; margin: 60px auto 0; padding: 2%; position: relative; z-index: 9999; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #nav li { float: none; margin:0; } #nav a { padding: 5% 0; font-size: 2em; line-height: 1.5em; text-align: center; } #nav ul { position: static; width: 92%; padding: 4%; margin: 0; } .nav-open { top:0 !important; display: block !important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /* header --------------------------------*/ #header { width: 100%; height: 60px; position: absolute; padding: 0; z-index: 9999; background-size: 50% auto; background-position: 4% center; } #header h5, #header h6 { display: none; } #header form { display: none; } /* subfooter top - bottom --------------------------------*/ .subfooter_box, .subfooter_boxt { width:92%; margin: 2%; padding: 2%; line-height: 1.2em; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /* content ------------------------------*/ #body { line-height: 1.4em; } #body_text { width: 100%; margin: 0; } #body_text_inner { padding: 4%; } /* footer -------------------------------*/ #footer { padding-bottom: 10px; font-size: 1em; line-height: 1.2em; background-image: none; } #footer_inner { width: 100%; margin: 0; text-align: center; } #toTop, .seo-pin { display: none !important; } body, body #body { font-size: 4vw; line-height: 6vw; } #body h5, #body h1 { font-size: 5vw; line-height: 6vw; } #main { width: 100%; overflow: hidden; } /* header -----------------------------------*/ #main #header { width: 100%; margin: 7vw 0 0; background-size: auto 100%; border: none; position: relative; z-index: initial; } #header::before { display: none; } #main #header h6, #main #header h5 { width: 50%; height: 7vw; padding: 0; display: block; position: absolute; top: 0; left: 0; background: #333; font-size: 3.3vw; line-height: 7vw; text-align: center; transform: translateY(-7vw); } #main #header h6 { left: 50%; } /* navigation open / close ---------------------------------------*/ #header, #navigation, .slider, #body, .subfooter, #footer { transform: translateX(0); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; } #body { transform: translateX(0) translateY(0); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; } html.nav-open #main #header, html.nav-open #main #navigation, html.nav-open #main .slider, html.nav-open #main .subfooter, html.nav-open #main #footer { transform: translateX(-200px); } html.nav-open #main #body { transform: translateX(-200px) translateY(0); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; } #main::before { content: ""; width: 200px; background: #333; position: absolute; top: 0; right: 0; bottom: 0; transform: translateX(200px); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; } html.nav-open #main::before { transform: translateX(0); } /* navigation ----------------------------------*/ #navigation, #navigation2 { width: 40px; height: 40px; background: url(https://cms.pm/uploads/prem02-v2.seesite.biz_--_612353780.png) center no-repeat rgba(0, 0, 0, 0.9); background-size: 40%; top: 50%; right: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; overflow: visible; transform: translateY(-50%); cursor: pointer; } #nav { width: 200px; margin: 0; padding: 0; background-color: #333; background-image: none; right: -50px; top: -29px !important; display: block; } #nav li { width: 100%; display: block; font-size: 1vw; } #nav li.navArrow > a { padding-left: 30px; padding-right: 30px; } #main #nav a { width: 100%; margin: 0; color: #fff; border: none; font-size: 3.5vw; line-height: 4vw; } #nav ul { width: 100%; padding: 5px; transform: translateX(0); } #main #nav ul a { color: #333; } #nav a, #nav .current a, #nav li:hover > a { background: none; } #nav .current a::before, #nav li:hover > a::before, #navigation2::before { display: none; } #main #nav .current a, #main #nav li:hover > a { border: none; } .navArrow.white:after { top: 22px; } #header.scroll-down #navigation2 { right: 10px; transform: translateY(20px); } /* Basic Banner -----------------------*/ #main .slider { padding: 0; border: none; } #main .slider .slide img { width: 100%; } #main .button-outer { display: none; } #main .slide .slide-outer-text { padding: 0; } #main .slide .slide-inner-text .slide-text { font-size: 3vw; line-height: 3.5vw; } #main .slide a .slide-inner-text .slide-text-button::before { font-size: 4vw; line-height: 4vw; } /* top subfooter -------------------------------------------------*/ .subfootert { width: 100%; padding: 0; } .subfooter_innert { padding: 0; } #body .subfooter_boxt { width: 100%; margin: 0; padding: 5vw; font-size: 4.5vw; line-height: 5vw; } .subfooter_boxt:first-child { margin-left: 0; } #body .subfooter_boxt:last-child { padding: 5vw; margin-top: 30px; } /* sidebar -------------------------------------------------*/ #menu { display: none; } #menu_box { padding: 0; } /* content -------------------------------------------------*/ #body { width: 100%; margin: 0; } #body_text { padding: 3vw 2vw; } #main #body_text form #captchaimg { display: block; clear: both; margin: 0 auto; } #main #body_text form b { width: 100%; display: block; } .imgs { width: 100%; } /* contact -------------------------------------------------*/ #body_text_inner fieldset form textarea, #body_text_inner fieldset form input { width: 90% !important; } #body_text_inner fieldset form #captchaimg { margin: 0; } #body_text_inner fieldset form .button { margin: 20px auto !important } /* Gallery -----------------------------------------------*/ #main .ad-gallery .ad-image-wrapper { height: 60vw; } #main .ad-image { width: 100%; left: 0%; } .ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { border: 3px solid; border-right: none; border-bottom: none; } /* products ---------------------------------------------*/ #main #body_text #prod_description { width: 100%; } #main .prods { display: none; } .products img { width: 100%; padding: 0; margin-bottom: 20px; } .products .button { font-size: 3.5vw; } /* testimonials --------------------------------*/ .reviews { font-size: 3.5vw; } /* news ----------------------------------------*/ #feedback .button { font-size: 3.5vw; } /* bottom subfooter ----------------------------------------*/ .subfooter { padding: 0; } .subfooter_inner { padding: 1vw 0; } .subfooter_box { width: 100%; padding: 5vw; margin: 0 0 4vw; } .subfooter_box form textarea, .subfooter_box form input { width: 100% !important; } .subfooter_box form #captchaimg { margin: 0 auto; } .subfooter_box form .button { margin: 20px auto !important } /* footer ----------------------------------------*/ #footer { padding: 3vw 2vw; font-size: 4.5vw; line-height: 5vw; } #footer_inner { text-align: center; } #footer_inner a { display: inline-block; } #footer_inner img { margin: 0 10px 10px; } #footer_inner span { display: none; } }