/* @override http://localhost:8888/masters/themes/simple/css/layout.css?m=1515750374 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582047195 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582067639 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582125357 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582147008 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582151522 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582152199 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582152924 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582153574 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582194157 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582195707 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582197161 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582197253 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582199519 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582199697 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582199972 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582233563 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582237463 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582239356 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582313504 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582459660 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582477083 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582491319 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582494898 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582496595 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582536351 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582561217 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582581492 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582659357 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582705392 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582706294 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582706689 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582740588 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582752010 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582753975 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582755422 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582839836 http://localhost:8888/masters/themes/simple/css/layout.css?m=1582973858 http://localhost:8888/masters/themes/simple/css/layout.css?m=1583092184 http://localhost:8888/masters/themes/simple/css/layout.css?m=1583098656 http://localhost:8888/masters/themes/simple/css/layout.css?m=1583163148 http://localhost:8888/masters/themes/simple/css/layout.css?m=1583184054 http://localhost:8888/masters/themes/simple/css/layout.css?m=1583184985 http://localhost:8888/masters/themes/simple/css/layout.css?m=1583188109 http://localhost:8888/masters/themes/simple/css/layout.css?m=1583188800 http://www.mastersosteopaths.co.uk/themes/simple/css/layout.css?m=1583238501 http://www.mastersosteopaths.co.uk/themes/simple/css/layout.css?m=1583779405 http://localhost:8888/masters/themes/simple/css/layout.css?m=1583835529 http://localhost:8888/masters/themes/simple/css/layout.css?m=1584972878 http://mastersosteopaths.co.uk/themes/simple/css/layout.css?m=1584973251 http://mastersosteopaths.co.uk/themes/simple/css/layout.css?m=1584973941 */ /** ---------------------------------------------------------- * * Contains the main layout of the page and the individual styles. * Acts as the main stylesheet for theme. * * Include your notes or table of contents below.... * Include color hex's or values of your grid * * 1. OOCSS GRID * 2. MAIN LAYOUT * 3. HEADER * - Brand * - Search Form * 4. Navigation * - Primary Navigation * - tablet Navigation * - Secondary Navigation * - Secondary Nav 2-5 Levels deep * 5. Mixed * 6. Footer * 7. Page Specific Layout * - Homepage * - Search Results * 8. Device and Responsive Layout * - Breakpoint 960px * - Breakpoint 640px * - Search Form * - Main Content * 9. Print Styles * - Simple Theme custom print styles * * @author Your Name * ------------------------------------------------------- */ /* OOCSS Grid * https://github.com/stubbornella/oocss/wiki/grids */ .line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */ .lastUnit { overflow:hidden; *overflow:visible; *zoom:1; padding:0 0px; } .unit { /* unit - Base class which divides a line into sections (columns). */ float:left; padding:0 0px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* box-sizing:border-box; creates a box-model where padding and border are NOT added onto the width - they are included in the width, so a 200px wide element with 20px padding will be 200px, NOT 240px wide */ } .unitRightv { /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */ float:right; } /* sizeXofY - Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space. The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5 */ /* It is possible to add more columns if you wish you will just have to add the fractions that are missing eg: .size1of6 {width:16.66666%;} */ .size1of1 { float:none; } .size1of2 { width:50%; } .size1of3 { width:33.33333%; } .size2of3 { width:66.66666%; } .size1of4 { width:25%; } .size3of4 { } .size1of5 { width:20%; } .size2of5 { width:40%; } .size3of5 { width:60%; } .size4of5 { width:80%; } .lastUnit { /* lastUnit - Extends unit. Applied to the last child of every line. */ float:none; width:auto; _position:relative; /* Bug fix for IE6 - Internet Explorer 6 and below wouldn't fail on properties that were prefixed with non-alphanumeric characters. meaning that anything prefixed with _ wouldn't be picked up by any other browsers */ } /* MAIN LAYOUT */ body { height: 100%; min-height: 100vh; margin: 0; background: #CFE5FF linear-gradient(#CFE5FF, white 20%) no-repeat; min-width: 240px; -webkit-text-size-adjust: none; /* The text size is not adjusted for Safari on iPhone */ } .ie7 body, .ie8 body { min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */ } .main { margin: auto; min-height: 300px; padding: 40px 0 0; } .covid19 article, .spacer, .Security article{ max-width: 1100px; margin-right: auto; margin-top: auto; margin-left: auto; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } div#video { width: 100%; /background-image: url(../images/masters-osteopths-westcliff.jpg); background-size:cover; } video{ width: 100%; background: url(../images/ajax-loader.gif) no-repeat center center; height: auto; background-size: 250px auto; } div#about-content { columns:2; column-gap: 50px; text-align: left; margin-bottom: 50px; } #con2 { margin-top: 80px; margin-bottom: 80px; text-align: center; } #con4 { margin-top: 80px; margin-bottom: 80px; text-align: center; padding-top: 50px; padding-bottom: 30px; background-color: #CFE5FF; } div#con1.workshop-content.spacer { columns:2; column-gap: 50px; } div.workshops-titles { margin-bottom: 80px; } a.book-online { display: flex; height: 90px; background: #FFA69E; box-shadow:10px 10px #FF7E6B; color: white; text-align: center; margin-right: auto; margin-left: auto; justify-content:center; letter-spacing: 4px; width: 330px; max-width: 100%; position: relative; top: 0; right: 0; font: normal 30px/35px montserrat, sans-serif; align-items:center; } .EventsPage a.book-online:hover, a.book-online:hover{ color: white; box-shadow: 7px 7px #FF7E6B; top: 3px; } .EventsPage a.book-online { display: flex; height: 45px; background: #FFA69E; box-shadow:10px 10px #FF7E6B; color: white; text-align: center; margin-right: auto; margin-left: 0; justify-content:center; letter-spacing: 4px; width: 220px; max-width: 75%; position: relative; top: 0; right: 0; font: 400 15px/35px montserrat, sans-serif; align-items:center; } .contact a.book-online { margin-right: auto; margin-left: 0; } a.book-online span { vertical-align: middle; } div#c1.content { columns:2; column-gap: 50px; margin-bottom: 80px; } div#c2.content { padding-top: 40px; padding-bottom: 25px; margin-bottom: 80px; background-color: #CFE5FF; } #c3-img{ width: 45%; height: 100%; float: left; margin-right: 5%; position: absolute; bottom: 0; left: 0; top: 0; background-size:cover; } div.clm-50 { width: 45%; margin-left: 55%; } #c5 .clm-50 { margin-left: 0; display: inline-block; vertical-align: top; } .about #spinner { right: -15%; top: -15%; } .home #spinner { left: -15%; top: -15%; } .contact #spinner { right: 0%; top: 13%; } .treatments #spinner { top: -100px; right: 0%; width: 200px; } .spin-wrap { position: relative; } .contact div.content { position: relative; } #opening-times { margin-bottom: 80px; } span.day { display: block; float: left; width: 200px; } #spinner { position: absolute; width: 30%; min-width: 100px; /transform: translate(-50%,50%); / bottom: -20%; -webkit-animation:spin 10s linear infinite; -moz-animation:spin 10s linear infinite; animation:spin 10s linear infinite; } div#about-image { position: relative; margin-bottom: 180px; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } div#c4.content { margin-top: 200px; } div#c3.content { position: relative; margin-bottom: 50px; min-height: 700px; } div#c4.content { margin-bottom: 80px; margin-top: 80px; } div#c5.content { background-color: #CFE5FF; padding-top: 65px; padding-bottom: 50px; margin-bottom: 80px; } #con3 div.clm { float: left; width: 47.5%; padding-right: 2.5%; } .home article { background: url(../images/Masters_BlueShape-11.svg) no-repeat right 65%; background-size:45%; } div.btn-wrp { width: 100%; margin-bottom: 90px; text-align: center; } .header .inner { max-width: 1600px; width: 100%; margin: 0 auto; padding: 0 30px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .ie6 .inner { width: 960px; } .no-sidebar .content-container { float: left; width:100%; /* makes content container full width when there is no sidebar */ } .sidebar { /* this is the sidebar element */ margin-top: 12px; } .no-sidebar .sidebar { display: none; } /* HEADER */ div#menuArea { position: relative; top: 25px; right: 20px; z-index: 5; max-width: 1600px; margin: auto; } .header .inner { padding-top: 44px; position: relative; } input#menuToggle { display: none; } #logo{ margin: auto; width: 16%; max-width: 300px; min-width: 100px; transition:all ease 0.3s; } #logo-img{ transition:all ease 0.3s; } img{ max-width: 100%; } /* Brand */ header .brand, header .brand:hover { color: #fff; } .brand h1 { margin: 0; padding: 0; font-size: 48px; font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; font-weight: 600; font-stretch: normal; /* default value. No font stretching */ line-height: 1em; } .brand p { color: #888; margin-bottom: 22px; } /* Search form */ .search-bar { position: absolute; right: 13px; top: 12px; } .search-bar .field { margin: 0; padding: 0; } .search-bar form input.text { width: 155px; padding: 5px 34px 5px 15px; color: #888; margin: 0; border: none; -moz-border-radius: 14px; border-radius: 14px; background: #fff; } .search-bar form input.action { /* positions the search button icon over the top of the search input */ font-size: 14px; position: absolute; right: 5px; top: 0; cursor: pointer; border: none; padding: 5px; background: none; font-family: 'WebSymbolsRegular'; color: #848484; border-radius: 0; margin: 0; } .search-bar form input.active, .search-bar form input.action:hover { color: #000; } .search-bar form input:focus, .header textarea:focus { outline: none; /* removes default browser outlining on focus */ } .search-dropdown-icon { display: none; /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */ } /* TREATMENTS */ div#content1.content.spacer { columns:2; margin-bottom: 80px; column-gap: 50px; } #content8 { margin-bottom: 80px; } div#content9.content.spcer { margin-top: 80px; margin-bottom: 80px; } img#img2.treatment-img { width: 100%; float: left; } #content5 { overflow: auto; margin-bottom: 80px; } #content6 { columns:2; column-gap: 50px; margin-bottom: 80px; } div#content7.content.spacer { position: relative; overflow: auto; margin-bottom: 80px; } div#content7.content.spacer:after{ content:; width: 200px; height: 2px; background: black; display: block; margin: auto; } #content7 div.img-wrap { width: 50%; float: left; } .img-wrap{ background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: auto; } img#img3.treatment-img { opacity: 0; float: left; } .img-wrap img{ opacity: 0; } #content7 div.clm-wrap { display: flex; align-items: flex-end; width: 50%; float: left; position: absolute; right: 0; bottom: 0; top: 0; vertical-align: middle; background-color: #CFE5FF; padding: 20px 30px 20px 35px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } #content7 div.clm-wrap p { position: relative; } div#content2.content { margin-bottom: 80px; margin-top: 80px; } #content3 { margin-bottom: 80px; } #content4, #content10 { margin-bottom: 80px; padding-top: 50px; padding-bottom: 30px; background-color: #CFE5FF; text-align: center; } #content11 div.clm-wrap, #content5 div.clm-wrap, #content9 div.clm-wrap { width: 47.5%; padding-right: 2.5%; float: left; margin-right: 2.5%; } #content11 { margin-bottom: 80px; } div#content9.content.spacer { margin-top: 80px; margin-bottom: 80px; } /* NAVIGATION */ input { /display: none; z-index: 5; } .open { background-color: black; width: 40px; height: 2px; display: block; border-radius: 2px; cursor: pointer; position: relative; top: 14px; } .open:before { content: ""; background-color: #3c3c3c; width: 40px; height: 2px; display: block; border-radius: 2px; position: relative; top: -12px; transform: rotate(0deg); transition: all 0.3s ease; } .open:after { content: ""; background-color: #3c3c3c; height: 2px; display: block; border-radius: 2px; position: relative; top: 10px; transform: rotate(0deg); transition: all 0.3s ease; width: 40px; } .menuOpen { width: 40px; height: 28px; display: block; cursor: pointer; float: right; padding: 15px; } .menuOpen:hover .open:before { //top: -5px; } .menuOpen:hover .open:after { top: 8px; } .menu { position: fixed; width: 100vw; height: 100vh; left: 0; background: #CFE5FF; z-index: 2; top: 0; } .menu label { width: 30px; height: 30px; position: absolute; right: 40px; top: 40px; background-size: 100%; cursor: pointer; color: black; } .menu .menuContent { position: relative; top: 50%; font-size: 35px; text-align: center; transform:translatey(-50%); line-height: 28px; } .menu ul { list-style: none; padding: 0; margin: 0 auto; } .menu ul li a { display: block; color: black; text-decoration: none; transition: color 0.2s; padding: 10px 0 20px; font-family: montserrat; letter-spacing: 3px; } .menu ul li.current a{ color: white; } .menu ul li a:hover { color: white; position: relative; top: -3px; } .menuEffects { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; } .menuEffects ul { transform: translateY(0%); transition: all 0.5s; } #menuToggle:checked ~ .menuEffects { opacity: 1; visibility: visible; transition: opacity 0.5s; } #menuToggle:checked ~ .menuEffects ul { opacity: 1; } #menuToggle:checked ~ .menuOpen .open { background-color: transparent; } #menuToggle:checked ~ .menuOpen .open:before { content: ""; background-color: white; transform: rotate(45deg); position: absolute; top: 0; right: 0; z-index: 10; } #menuToggle:checked ~ .menuOpen .open:after { content: ""; background-color: white; transform: rotate(-45deg); position: relative; top: 0; right: 0; z-index: 10; } #menuToggle:not(:checked) ~ .menuEffects ul { transform: translateY(-30%); } /* Primary navigation */ .header .inner .unit { position: relative; text-align: center; margin-bottom: 40px; width: 100%; z-index: -1; top: -15px; } .header .primary ul { position:absolute; bottom:0; right:0; /* positions the main navigation */ } .header .primary li { float: left; padding-bottom: 14px; margin: 0 5px; position: relative; white-space: nowrap; /* forces text to never wrap onto a second line */ } .header .primary li a { color: #888; font-size: 15px; font-family: Helvetica, Arial, sans-serif; padding: 6px 8px; font-weight: bold; display: block; } .header .primary li a:hover { color: #fff; } .header .primary li.section a, .header .primary li.current a { color: #fff; } .header .primary li.section:after, .header .primary li.current:after { content: '}'; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */ display: block; position: absolute; left: 50%; margin-left: -7px; bottom: -7px; font-family: 'WebSymbolsRegular'; font-size: 30px; color: #fff; text-align: center; line-height: 20px; } /* Tablet Navigation */ /* When navigation and logo overlap tablet-nav is initialized */ .tablet-nav .brand p { margin-bottom: 0; } .tablet-nav .header .inner { padding-top: 20px; } .tablet-nav .header .primary ul { float: left; clear: both; position: relative; margin: 20px 0 0 -13px; white-space: nowrap; right: auto; /* resets the right property value that is set for the desktop site */ } .tablet-nav .header .primary ul li { white-space: nowrap; } .tablet-nav .header .primary ul li a { /* there is no hover on touch devices so no transition on hover is necessary */ -moz-transition: none; -webkit-transition: none; transition: none; } .tablet-nav .footer .right { float: left; width: 100%; } .sizer { width: 80%; max-width: 900px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } /* Secondary navigation */ .main .secondary h3 { font-size: 20px; color: #AAA; margin: 0 0 8px 0; font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; font-weight: normal; } .main .secondary { border-bottom: 1px solid #e5e5e5; } .main .secondary ul { padding: 0; margin: 0; } .main .secondary li { border-top: 1px solid #e5e5e5; position: relative; list-style-type: none; margin-bottom: 0; } .main .secondary li .arrow { color: #b80000; padding-right: 5px; display: block; font-size: 15px; line-height: 20px; position: absolute; left: 2px; top: 7px; -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.2s; transition: 0.2s; } .main .secondary li a:hover .arrow { left: 6px; /* this sets the final position for the arrow transition */ } .main .secondary li a { /* side nav link styling */ padding: 10px 0; display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: #333; line-height: 17px; border-bottom: none; font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif; } .main .secondary li .text { padding-left: 28px; display: block; } .main .secondary li.current a.current { color: #b80000; background-color: #EDEDED; } .main .secondary li.section, .main .secondary li.current { background-color: #F3F3F3; } .main .secondary li.section a, .main .secondary li.current a { color: #000; } /* Secondary navigation 2-5 levels deep */ .main .secondary ul ul { display: none; } .secondary ul li.current ul, .secondary ul li.section ul { /* Only show child pages from selected parent */ display: block; } .secondary li.current ul ul { display: none; } .main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/ .main .secondary ul ul li a .arrow { left: 12px; } .main .secondary ul ul li a:hover .arrow { left: 16px; } .main .secondary ul ul ul li a { padding-left: 20px; } .main .secondary ul ul ul li a .arrow { left: 22px; } .main .secondary ul ul ul li a:hover .arrow { left: 26px; } .main .secondary ul ul ul ul li a { padding-left: 30px; } .main .secondary ul ul ul ul li a .arrow { left: 32px; } .main .secondary ul ul ul ul li a:hover .arrow { left: 36px; } .main .secondary ul ul ul ul ul li a { padding-left: 40px; } .main .secondary ul ul ul ul ul li a .arrow { left: 32px; } .main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; } .main .secondary li a:hover, .main .secondary li.section a:hover, .main .secondary li.current a:hover { color: #b80000; } /* PRICES */ .prices article { max-width: 900px; margin: auto; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; padding-right: 25px; padding-left: 25px; } .prices .clm1 { float: left; padding-right: 20px; width: 75%; } li#price-wrapper { margin-bottom: 80px; overflow: auto; } div.prices-about { float: left; } div.prices-titles { margin-bottom: 10px; overflow: auto;} div.prices-about { margin-left: 35px; margin-top: 20px; } .prices .clm2 { float: right; text-align: right; } /* MIXED */ header:after, .main:after, #Root:after, .search-bar:after, header .inner:after, footer:after { /* clearfix */ height: 0; content: "."; display: block; clear: both; visibility: hidden; } .search-bar form input.action, .header .primary li a, .footer a { /* adds color transition when links/inputs on hover */ -moz-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; } .footer a.brand { color: #333; margin-left: 0; } .footer a.brand:hover { color: #B80000; } body h1 span.amp { font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; font-style: italic; } /* FOOTER */ .footer { color: black; padding: 50px 0; font-size: 13px; line-height: 19px; background: #D3D3D3 url(../images/Masters_WhiteShape.png) no-repeat left center; background-size:contain; font-family: montserrat, sans-serif; font-weight: 200; background-origin: content-box; letter-spacing: 1px; } .footer div.unit.size4of4.lastUnit { display: flex; justify-content:space-between; width: 100%; max-width: 900px; margin-right: auto; margin-left: auto; } img.foot-logo { height: 90px; width: auto; max-width: 100%; margin-left: 20px; vertical-align: bottom; display: inline-block; padding-bottom: 20px; } .foot-clm { position: relative; } #foot-clm-2 { margin-right: 20px; margin-left: 20px; } div#foot-clm-3.foot-clm { align-self:center; text-align: right; } .footer a { color: black; } .footer .inner { width: 90%; max-width: 900px; padding: 0 0 20px; border-bottom: 1px white solid; margin: 15px auto 20px; } #top-book { position: absolute; height: 30px; background: white; padding: 15px 10px 5px; box-shadow: 4px 4px #4154CE; color: black; transition: all ease 0.3s; z-index: 1; letter-spacing: 2.5px; float: left; font: 16px montserrat, sans-serif; } #top-book:hover{ box-shadow: 4px 4px #FF7E6B; cursor: pointer; } .footer a:hover { color: #FFA69E; } .footer .left { float: left; color: #000; display: block; margin-bottom: 10px; } .footer .right { float: right; display: block; margin-bottom: 10px; } div.foot-spc { padding-bottom: 8px; } .contact-details h5.typography { display: none; } .contact-details div.foot-spc { padding-bottom: 18px; } div.foot-clm.contact-details { margin-bottom: 80px; } .footer .primary, .footer .primary ul { display: inline; margin: 0; padding: 0; } .footer .primary li { display: block; } .ie6 .footer .primary li, .ie7 .footer .primary li { /* this is a bugfix for ie6/7 */ display: inline; zoom: 1; margin-right: 10px; } .footer .primary li:after { /* adds '/' to separate the footer navigation items */ } .footer .primary li:last-child:after { content: ''; /* makes sure last nav item doesn't have a '/' following it */ } .footer .arrow { padding: 0 8px 0 5px; color: #b80000; font-size: 13px; } .footer .primary .nav-open-button { display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */ } /* PAGE SPECIFIC LAYOUT */ /* Homepage */ /* currently no Hompage specific styles - feel free to add your own */ /* Search Results */ .typography .searchResults h1 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .searchResults p.searchQuery { margin-bottom: 10px; font-size: 15px; font-weight: bold; } .searchResults ul#SearchResults { padding: 0; border-bottom: 1px solid #e5e5e5; margin:0; } .searchResults ul#SearchResults li { border-top: 1px solid #e5e5e5; padding: 20px 0; list-style-type: none; } .searchResults ul#SearchResults p { margin-bottom: 10px; } .searchResults #PageNumbers a { padding: 0 5px; } .searchResults #PageNumbers .pagination { border-bottom: 1px solid #e5e5e5; padding: 20px 0; display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */ width:100%; } .searchResults #PageNumbers .pagination span{ display:table-cell; /* each element in the pagination div displays as a table cell */ } .searchResults #PageNumbers p { text-align: center; padding:20px 0; } .searchResults #PageNumbers .next, .searchResults #PageNumbers .prev { font-size: 14px; padding: 0 20px; display:table-cell; /* each element in the pagination div displays as a table cell */ vertical-align: middle; border-bottom:0 !important; } .searchResults #PageNumbers .next { margin-left: 15px; } .searchResults #PageNumbers .prev { margin-right: 15px; } /* DEVICE & RESPONSIVE LAYOUT */ .header .nav-open-button { display: none; /* removes the nav toggle button for desktop site */ } #media-query-trigger { /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries) instead to trigger the hiding/showing of nav and search in mobile mode */ display: none; visibility: hidden; } .prices .mobile{ display: none; } .prices .desktop{ display: block; } @media only screen and (max-width: 1100px) { .covid19 article, .spacer{ margin-left: 30px; margin-right: 30px; } } /* BREAKPOINT 960px */ @media only screen and (max-width: 960px) { div#c3.content img{ position: absolute; width: 30%; min-width: 200px; /transform: translate(-50%,50%); -webkit-animation:spin 10s linear infinite; -moz-animation:spin 10s linear infinite; animation:spin 10s linear infinite; left: -30px; top: -8%; } div#about-image { margin-bottom: 50px; } img.foot-logo{ height: 40px; } } /* BREAKPOINT 640px */ /* when changing the breakpoint below, change it ito the same value in the script.js file as well */ @media only screen and (max-width: 640px) { body { max-width: 640px; } div#c4.content { margin-bottom: 30px; margin-top: 60px; } #pop_inner .desktop{ display: none; }#pop_inner .mobile{ display: block; } #message_popup { width:300px; } .mfp-container button { position: absolute; top: 20px; right: 14px; } #content6 { columns:1; margin-bottom: 30px; } #content7 div.clm-wrap { display: block; / align-items: flex-end; width: 100%; float: none; position: static; right: 0; bottom: 0; top: 0; vertical-align: middle; background-color: #CFE5FF; padding: 20px 30px 20px 35px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } #content7 div.img-wrap { width: 100%; float: none; margin-bottom: 50px; } #content8 { margin-bottom: 30px; } div#content9.content.spcer { margin-top: 30px; margin-bottom: 30px; } div#content9.content.spacer { margin-top: 50px; margin-bottom: 50px; } div#about-content { columns:1; text-align: left; margin-bottom: 50px; } div#c6.content.clm-50, div.clm-50 { width: 100%; margin-left: 0%; } div#c5-p.clm-50 { padding-bottom: 0; margin-bottom: 40px; } div#c5-p.clm-50:after { height: 20px; display: block; width: 100px; border-bottom: 2px #FF7E6B solid; content: ''; margin-right: auto; margin-left: auto; } a.book-online { display: flex; height: 68px; background: #FFA69E; box-shadow:10px 10px #FF7E6B; color: white; text-align: center; margin-right: auto; margin-left: auto; justify-content:center; letter-spacing: 4px; width: 330px; position: relative; top: 0; right: 0; font: 600 22px/35px montserrat, sans-serif; align-items:center; } #top-book { position: absolute; background: white; padding: 7px 0 5px; box-shadow: 0px 4px #4154CE; color: black; transition: all ease 0.3s; z-index: 1; letter-spacing: 2.5px; float: left; font: 12px montserrat, sans-serif; width: 100%; text-align: center; margin: 0 auto; top: 0; height: auto; } div#menuArea { position: relative; top: 59px; right: 20px; z-index: 5; } #c3-img{ width: 100%; height: 550px; float: left; position: relative; bottom: 0; left: 0; top: 0; background-size:cover; margin-right: auto; margin-left: auto; margin-bottom: 50px; } div#c1.content { columns:1; margin-bottom: 60px; } .home article { background: url(../images/Masters_BlueShape-11.svg) no-repeat right 59%; background-size:65%; } div#c5.content { text-align: center; } div#c4.content p { max-width: 95%; margin-bottom: 55px; } div#content2.content { margin-bottom: 30px; margin-top: 30px; } #content3{ margin-bottom: 30px; } #content11 div.clm-wrap, #content5 div.clm-wrap, #content9 div.clm-wrap { width: 100%; padding-right: 0; float: none; margin-right: 0; } .spacer{ columns: 1 !important; } div#video { margin-top: 30px; } .clm{ width: 100% !important; padding: 0 !important; float: none !important; } div.btn-wrp { width: 85%; text-align: center; margin-right: auto; margin-left: auto; } .typography .intro { font-size: 25px; line-height: 53px; padding-left: 48px; background-size:contain; //box-decoration-break: clone; // -webkit-box-decoration-break: clone; background-repeat: no-repeat; background-position: left center; } .prices .clm1 { float: left; //margin-right: 20%; padding-right: 0; width: 100%; } .prices .clm2 { float: left; text-align: left; } .prices .mobile{ display: block; } .prices .desktop{ display: none; } .footer div.unit.size4of4.lastUnit { display: block; justify-content:space-between; width: 100%; max-width: 900px; margin-right: auto; margin-left: auto; } .contact .foot-clm{ text-align: left; } .contact #spinner { right: 0%; top: 0%; } span.day { width: 120px; } .footer .foot-clm { text-align: center; margin-bottom: 30px; } .footer { color: black; padding: 30px 0 0; font-size: 13px; line-height: 19px; background: #D3D3D3 url(../images/Masters_WhiteShape.png) no-repeat left center; background-size:40%; font-family: montserrat, sans-serif; font-weight: 200; background-origin: content-box; letter-spacing: 1px; } div#footer-logos { display: flex; justify-content:space-evenly; border-bottom: 1px white solid; margin-bottom: 20px; text-align: center; } .footer div.inner { border: none; padding-bottom: 0; margin-bottom: 0; } img.foot-logo { max-width: 100%; margin-left: 0; vertical-align: bottom; padding-bottom: 20px; width: auto; height: 60px; } img.foot-logo.2 { flex-grow:2; } div.copyright { text-align: center; } #media-query-trigger { visibility: visible; } /* Navigation*/ .tablet-nav .header .brand { float: none; display: inline-block; width: 100%; } .brand h1 { font-size: 40px; } .brand h1 { padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */ } .tablet-nav .header { padding: 0px; } .tablet-nav .header .inner { padding: 20px 0 0 0; min-height: 0; height: 140px; } .tablet-nav .header .primary .nav-open-button { /* styling and positioning of the nav toggle button */ z-index: 100; width: 20px; height: 20px; position: absolute; right: 20px; top: 35px; display: block; cursor: pointer; font-family: 'WebSymbolsRegular'; font-size: 20px; color: #ededed; } .tablet-nav .header .primary ul { z-index: 10; position: relative; display: none; /* initially hiding the navigation */ float: left; margin: 0; padding: 0; white-space: normal; width: 100%; } .tablet-nav .header .primary ul li { width: 100%; margin: 0; padding: 0; float: none; /* displays list items vertically */ background: none; position: relative; text-shadow: 0 1px #fff; } .tablet-nav .header .primary ul li:after { /* creates the arrow for the primary nav links */ content: '\003e'; display: block; position: absolute; right: 20px; top: 0px; font-family: 'WebSymbolsRegular'; font-size: 14px; color: #999; text-align: center; vertical-align: middle; line-height: 38px; } .tablet-nav .header .primary ul li a, .tablet-nav .header .primary ul li.current a, .tablet-nav .header .primary ul li.section a { /* styling the top level nav links */ padding: 10px 0 10px 22px; font-weight: bold; border-bottom: 1px solid #bbb; color: #434343; background: #e7e7e7; } .tablet-nav .header .primary ul li.current a, .tablet-nav .header .primary ul li.section a { background: #CCCCCC; /* makes background on current top level page slightly darker */ } .tablet-nav .header .primary ul li a:hover { color: inherit; } .tablet-nav .header .primary li.section:after, .tablet-nav .header .primary li.current:after { display: none; /* hides the link arrow on current top level page */ } .tablet-nav .tablet-nav .header nav.primary ul li { padding: 0; } /* Search Form */ .search-bar { /* adds new styling to mobile search bar */ width: 100%; position: relative; top: 0; right: 0; display: none; /* hides searchbar initially */ padding: 20px 0; margin: 0; background-color: #E7E7E7; } .search-dropdown-icon { /* styling for search toggle button */ display: block; cursor: pointer; width: 20px; height: 20px; position: absolute; right: 60px; top: 34px; font-family: 'WebSymbolsRegular'; font-size: 20px; color: #ededed; text-align: center; line-height: 20px; } .search-bar form { margin: 0; width: 100%; } .search-bar form fieldset { padding: 0 18px; left: 0; right: 0; position: relative; } .search-bar div.field { margin-bottom: 0; } .search-bar form input.text { width: 89%; /* makes search input full width - allowing for space either side */ max-width: 89%; padding: 8px 10% 8px 1%; text-indent: 15px; position: relative; display: block; right: 0; left: 0; border: 1px solid #e5e5e5; background: #fff; font-size: 17px; -moz-border-radius: 20px; /* increase border radius due to increased padding */ border-radius: 20px; } .search-bar form input.action { right: 5%; top: 2px; font-size: 18px; } /* Main Content */ .main { padding: 20px 0 0; /* decrease padding so that more content can fit on screen */ } .content-container, .sidebar { width: 100%; /* sidenav is now shown above the page content */ margin-bottom: 0; } .typography h1 { /* decrease size of page heading due to smaller screen */ font-size: 30px; line-height:35px; margin-bottom: 15px; padding-bottom: 10px; } .typography p { font-size: 23px; line-height: 34px; } p.intro { font-size: 19px; line-height: 27px; } /* Secondry Nav */ .secondary li a { line-height: 24px; } .secondary li .arrow { line-height: 26px; } /* Footer */ .footer .right { float: left; width: 100%; } } /* Print Styles */ /* Based on HTML5 boilerplate print styles */ @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; } a, a:visited { text-decoration: underline } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } thead { display: table-header-group } tr, img { page-break-inside: avoid } img { max-width: 100% !important } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } /* Simple theme custom print styles */ .header, .footer, .nav-open-button, .search-bar, .search-dropdown-icon, nav.primary { display: none; } }