/* Tablet -------------------------------------------------- ------------------------------------------------*/ @media screen and (min-width : 481px) and (max-width : 1024px) { body { font-size: 1.2em; line-height: 1.4em; } .subfooter_box h5, .subfooter_boxt h5, #body h1, #body h4, h1, h2, h3, h4, h5, h6 { font-size: 1.8em; line-height: 1.8em; } .subfooter_box h5 a, .subfooter_boxt h5 a { font-size: 1.8em; } .button { width: auto; font-size: 1.8em; margin: 2% 0; padding: 2%; } #menu { display: none; } /* slider --------------------------------*/ .header_banner img, .nivoSlider, #slider { height: 400px; } /* navigation --------------------------------*/ #navigation, #navigation2 { width: 100px; height: 80px; margin:0; padding:0; background: url(https://staininglodgevenue.co.uk/uploads/prem01.seesites.biz_--_839997548.png) center no-repeat #fff; background-size: 60%; position: absolute; top:0; right: 0; z-index: 9999; } #nav { width: 300px; display: none; margin-top: 80px; float: right; position: relative; z-index: 9999; } #nav li { float: none; margin: 0; } #nav a { padding: 5% 15%; font-size: 1.4em; text-align: center; } #nav ul { width: 295px; position: static; z-index: 9999; } .nav-open { display: block !important; } /* header --------------------------------*/ #header { width: 100%; height: 80px; position: absolute; padding: 0; z-index: 9999; background-size: 50% auto; background-position: 4% center; } #header h5 { width: 100%; height: 60px; padding: 10px 0; margin: 0; position: fixed; bottom: 0; left:0; background: #eee; z-index: 999; line-height: 1em; font-size: 2.8em; text-align:center; } #header h6 { display: none; } #header form { display: none; } /* subfooter top - bottom --------------------------------*/ .subfooter_box, .subfooter_boxt { width:42%; margin: 2%; padding: 2%; line-height: 1.4em; -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 { font-size: 0.6em; 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: 1.5vw; line-height: 2vw; } #body h5, #body h1 { font-size: 2.5vw; line-height: 3vw; } #main { width: 100%; overflow: hidden; } /* header -----------------------------------*/ #main #header { width: 100%; height: 100px; padding: 0 10vw; margin: 3vw auto 0; background-color: rgba(52, 50, 61, 0.8); background-position: 10vw center; background-size: auto calc(100% + 30px); border-top: 15px solid rgba(255, 255, 255, 0.1); border-bottom: 15px solid rgba(255, 255, 255, 0.1); position: absolute; top: 0; left: 0; z-index: 9; } #header::before { display: none; } #main #header h6, #main #header h5 { width: 50%; height: 3vw; padding: 0; display: block; position: absolute; top: 0; left: 0; background: #333; font-size: 2.5vw; line-height: 3vw; text-align: center; transform: translateY(calc(-3vw - 15px)); } #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: 60px; height: 60px; 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: -210px; top: -35px; 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: 1.5vw; line-height: 2vw; } #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 { border: none; padding: 0; } #main .slide .slide-inner-text .slide-text { font-size: 1.5vw; line-height: 2vw; } #main .slide .slide-outer-text { padding-top: 100px; } #main .button-outer { bottom: calc(50% - 50px); } /* top subfooter -------------------------------------------------*/ .subfootert { width: 100%; padding: 0; } .subfooter_innert { padding: 0; } #body .subfooter_boxt { width: 50%; margin: 0; padding: 5vw; font-size: 2.5vw; line-height: 3vw; } #body .subfooter_boxt:nth-child(3) { clear: left; } #body .subfooter_boxt:first-child { margin: 0; } #body .subfooter_boxt:last-child { width: 100%; padding: 3vw 5vw; margin-top: 30px; } /* sidebar -------------------------------------------------*/ #menu { display: none; } #menu_box { padding: 0; } /* content -------------------------------------------------*/ #body { width: 100%; margin: 0; } #body_text { padding: 0; } #main #body_text form #captchaimg { display: block; clear: both; margin: 0 auto; } #main #body_text form b { width: 100%; display: block; } /* 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 -----------------------------------------------*/ .ad-gallery .ad-image-wrapper { height: 40vw; } /* products ---------------------------------------------*/ .products .button { font-size: 1.5vw; } /* testimonials --------------------------------*/ .reviews { font-size: 1.5vw; } /* news ----------------------------------------*/ #feedback .button { font-size: 1.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: 1.5vw; line-height: 2vw; } #footer_inner { text-align: center; } }