/* Theme Name: Norfolk Scouts 2015 Theme URI: http://www.norfolkscouts.org.uk Description: Responsive bespoke template for Norfolk Scouts Author: Norwich Designer Author URI: http://www.norwichdesigner.com Version: 1.0 */ @import url("font/font.css"); @import url("popup.css"); html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } * { font-family: "Nunito Sans", Arial, Helvetica, sans-serif; font-weight: normal; margin: 0; outline: none; padding: 0; -webkit-font-smoothing: antialiased; text-decoration: none; } ::-moz-selection { background: #7413DC; color: #fff; text-shadow: none; } ::selection { background: #7413DC; color: #fff; text-shadow: none; } a.popup, a.lightbox, a.video, .scoutsgallery a, .gallery a { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; } body { color: #000; height: 100%; margin: 0 auto; } body.home { background: url(https://www.norfolkscouts.org.uk/wp-content/uploads/2017/04/bg-water.jpg) no-repeat center top; background-size: 100% auto; } body.offline { background: #7413DC; } img { border:none; } .clear { clear: both; } .aligncenter { clear: both; display: block; margin: 0 auto; text-align: center; } .alignleft { float: left; } .alignright { float: right; } img.aligncenter, iframe.aligncenter, div.wp-caption.aligncenter { clear: both; display: block; margin: 0 auto 20px auto; } img.alignleft, iframe.alignleft, div.wp-caption.alignleft { margin: 0 20px 20px 0; } img.alignright, iframe.alignright, div.wp-caption.alignright { margin: 0 0 20px 20px; } iframe { max-width: 100% !important; } div.wp-caption.alignleft, img.alignleft[class*='wp-image-'], div.wp-caption.alignright, img.alignright[class*='wp-image-'] { height: auto !important; width: 35% !important; } div.wp-caption img, img.aligncenter, img.alignleft, img.alignright { height: auto; max-width: 100% !important; } div.wp-caption { background: #eee; width: auto !important } div.wp-caption.aligncenter img { max-width: 100%; } p.wp-caption-text { font-size: 80%; margin: 0 !important; padding: 0 2% 2% 2%; text-align: center; } .mobile-only, .tablet-only { display: none; } .mb0 { margin-bottom: 0 !important; } .maincontainer { max-width:1260px; min-width:920px; margin:0 auto; padding:0 20px; } .col1of1, .col1of2, .col1of3, .col2of3, .col1of4, .col2of4, .col3of4, .col1of5, .col2of5, .col3of5, .col4of5 { margin:0 2%; float:left; } .col1of1 { width:96%; } .col1of2 { width:46%; } .col1of3 { width:29.33%; } .col2of3 { width:62.66%; } .col1of4 { width:21%; } .col2of4 { width:46%; } .col3of4 { width:71%; } .col1of5 { width:16%; } .col2of5 { width:36%; } .col3of5 { width:56%; } .col4of5 { width:76%; } /* TRANSITIONS */ article.tile.bg .content, aside a.block.logo:hover, article.tile:hover { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; } header nav ul li.button a, article.tile p.button a, input[type=submit], span.button a, .menu--slide-right ul li a, .close, #maincontent a, aside a, p.button span, p.button a { -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease; } nav a, nav a i, section.dots article.tile * { -webkit-transition: color 400ms ease; -moz-transition: color 400ms ease; -o-transition: color 400ms ease; -ms-transition: color 400ms ease; transition: color 400ms ease; } hr { border: 0; height: 2px; background: #7413DC; margin: 0 0 20px 0; } /* TEXT */ h1, h1 a { color: #7413DC; font-size: 50px; font-weight: 900; line-height: 0.8em; margin: 0 0 20px 0; } section#intro h1 { font-size: 74px; } section#title h1 { font-size: 74px; } h2, h2 a { color: #7413DC; font-size: 26px; font-weight: 800; line-height: 1.2em; margin: 0 0 20px 0; } h3, h3 a { color: #7413DC; font-size: 22px; font-weight: 900; line-height: 0.9em; margin: 0 0 20px 0; } h4 { color: #7413DC; font-size: 12px; font-weight: 400; line-height: 1em; margin: 0 0 20px 0; } h4 a, h4 strong { font-weight: 900; } h5, h5 a { color: #7413DC; font-size: 18px; font-weight: 800; line-height: 1.2em; margin: 0 0 20px 0; } p { font-size: 16px; font-weight: 400; line-height: 1.4em; margin: 0 0 20px 0; } p strong, strong { font-weight: 800; } blockquote { background: #eee; margin: 0 0 20px 0; padding: 2%; width: 96%; } blockquote *:last-child { margin-bottom: 0; } a { color: #00A794; font-weight: 800; } a:hover { color: #7413DC; } .button, .button * { text-shadow: none !important; } #maincontent ul { list-style: square; } #maincontent ol, #maincontent ul, .contact div ul { margin: 0 0 0 1.4em; padding: 0 0 10px 0; } #maincontent li, .contact div li { font-size: 16px; font-weight: 400; line-height: 1.4em; margin: 0 0 10px 0; padding: 0; } /* HEADER */ header nav { background: #7413DC; display: block; height: 100px; width: 100%; } /* .home header nav { background: url(https://www.norfolkscouts.org.uk/wp-content/uploads/2017/04/overlay-e1491733058363.png) center bottom repeat-x; background-size: auto 100px; } .home header nav ul li { text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); } */ header nav ul { float: left; list-style: none; padding: 0; z-index: 600; } header nav ul.getinvolved {margin-top: 3px;} header nav ul li { display: inline; font-size: 14px; margin: 0 0 0 15px; padding-bottom: 19px; position: relative; z-index: 599; } header nav ul li:hover { position: relative; z-index: 599; } header nav ul li a { color: #fff; } header nav ul li a:hover, header nav ul li.current-menu-item a, header nav ul li.current-menu-parent a, header nav ul li.current-menu-ancestor a { color: #00A794; } header nav ul.social { display: inline; margin: 0; padding: 0; } header nav ul.social li { font-size: 22px; line-height: 29px; margin: 0; padding: 0; } header nav .social a.icon i { color: #fff; font-size: 22px; line-height: 29px; margin: 0 15px 0 0; padding: 0; } header nav .social a.icon:hover i { color: #00A794; } header nav ul li.button { } header nav ul li.button a { background: #00A794; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 5px 8px; } header nav ul li.button a:hover { background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); color: #00A794; } header nav ul ul { visibility: hidden; position: absolute; top: 100%; right: 0; margin-top: 0; padding: 0; width: 180px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); z-index: 590; } header nav ul li.menu-item-has-children { z-index: 600; } header nav ul li.menu-item-has-children:hover { background: transparent url(images/arrow.gif) no-repeat center bottom; background-size: 20px 10px; z-index: 600; } /* header nav ul ul li:first-child a { -webkit-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-topleft: 3px; border-top-right-radius: 3px; border-top-left-radius: 3px; padding-top: 10px; } */ header nav ul ul li:first-child a { padding-top: 10px; } header nav ul ul li:last-child a { -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding-bottom: 10px; } header nav ul ul li { margin: 0; padding: 0; text-shadow: none !important; z-index: 590; } header nav ul ul li a { background: #fff; display: block; font-size: 12px; margin: 0; padding: 5px 10px; text-align: right; width: 160px; } header nav ul ul li a, header nav ul li.current-menu-item ul li a, header nav ul li.current-menu-ancestor ul li a { color: #7413DC; } header nav ul ul li a:hover, header nav ul ul li.current-menu-item a, header nav ul ul li.current-menu-ancestor a { color: #00A794 !important; } header nav ul li:hover > ul { visibility: visible; } header nav ul ul li ul { display: none !important; } a#logo { background: transparent url(https://www.norfolkscouts.org.uk/wp-content/uploads/2020/05/ns-logo-2020.png) no-repeat left center; background-size: 100% auto; display: block; float: left; height: 100px; width: 150px; } section#intro { margin: 100px auto 80px auto; width: 100%; } section#intro * { color: #fff; text-align: center; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); } .promo section#intro { margin-left: 0; margin-right: 0; width: 100%; } .promo section#intro * { text-align: left; } .promo .col1of4 img { max-height: 160px; margin: 100px 0; float: right; } .offline section#intro { margin: 80px auto; width: 100%; } .offline section#intro h1 { margin: 20px auto; width: 70%; } /* PAGES */ section#title { background: transparent no-repeat center center; background-size: 100% auto; margin-bottom: 50px; } section#title h1 { color: #fff; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); } .overlay { background: rgba(0, 0, 0, 0.25); } section#title .overlay { padding: 50px 0 30px 0; } #maincontent { padding-bottom: 80px; } #maincontent h2 { padding-top: 20px; } .navigation { text-align: center; } .navigation p { margin: 20px 0 0 0; } .navigation p.button a { display: inline-block; margin: 0 10px; width: auto !important; } /* GALLERY */ div.scoutsgallery a img { float: left; margin: 0 2% 4% 2%; width: 22%; } div.scoutsgallery a:nth-child(4n+1) img { margin-left: 0; } div.scoutsgallery a:nth-child(4n+0) img { margin-right: 0; } /* GALLERY */ div.gallery { background: #eee; margin: 0 0 20px 0 !important; padding: 0; width: 100%; } div.gallery a { float: none; display: block; margin: 5% 0; padding: 0; } div.gallery img { border: none !important; height: auto; margin: 0 !important; max-width: 90% } .gallery-caption { display: none; } div.gallery .gallery-item { margin: 0 !important; } /* SIDEBAR */ .aside { margin-bottom: 100px; } aside .dots { border-top: 1px dotted #7413DC; } aside .block, aside div[class^="menu"] { display: block; margin-bottom: 1%; padding: 5%; width: 90%; } aside .white { display: block; margin-bottom: 0; padding: 5%; width: 90%; } aside .block, aside div[class^="menu"] { background-color: #7413dc; } aside.beavers .block, article.section.beavers { background-color: #006ddf; } aside.cubs .block, article.section.cubs { background-color: #23a950; } aside.scouts .block, article.section.scouts { background-color: #004851; } aside.explorers .block, article.section.explorers { background-color: #003982; } aside.network .block, article.section.network { background-color: #000000; } aside.activesupport .block, article.section.activesupport { background-color: #7413dc; } aside .block a:hover, aside div[class^="menu"] a:hover { color: #00A794; } aside.beavers a:hover { color: #ffe627; } aside.cubs a:hover { color: #003982; } aside.scouts a:hover { color: #00a794; } aside.explorers a:hover { color: #23a950; } aside.network a:hover { color: #F5F5F5; } aside.activesupport a:hover { color: #00a794; } aside.beavers .white * { color: #006ddf; } aside.cubs .white * { color: #006ddf; } aside.scouts .white * { color: #004851; } aside.explorers .white * { color: #003982; } aside.network .white * { color: #000000; } aside.activesupport .white * { color: #7413dc; } aside .block *, aside div[class^="menu"] * { color: #fff; } aside ul { list-style: square; } aside ol, aside ul { margin: 0 0 0 1.4em !important; padding: 0; } aside li { font-size: 14px; font-weight: 400; line-height: 1.4em; margin: 0 0 10px 0; padding: 0; } aside li:last-child { margin-bottom: 0; } aside.meta * h3, aside.meta * p { margin-bottom: 10px; } aside p { font-size: 14px; } aside * *:last-child { margin-bottom: 0; } aside img.side-thumb { background-color: #7413DC; } aside .block.logo, aside .white.logo { background-repeat: no-repeat; background-position: center center; background-size: 70% auto; display: block; padding-bottom: 30%; } article.tile.section.logo { background-repeat: no-repeat; background-position: center center; background-size: 70% auto; } aside.beavers .block.logo, article.tile.section.logo.beavers { background-image: url(images/sections/beavers-white.png); } aside.cubs .block.logo, article.tile.section.logo.cubs { background-image: url(images/sections/cubs-white.png); } aside.scouts .block.logo, article.tile.section.logo.scouts { background-image: url(images/sections/scouts-white.png); } aside.explorers .block.logo, article.tile.section.logo.explorers { background-image: url(images/sections/explorers-white.png); } aside.network .block.logo, article.tile.section.logo.network { background-image: url(images/sections/network-white.png); } aside.activesupport .block.logo, article.tile.section.logo.activesupport { background-image: url(images/sections/activesupport-white.png); } aside.beavers .white.logo { background-image: url(images/sections/beavers.png); } aside.cubs .white.logo { background-image: url(images/sections/cubs.png); } aside.scouts .white.logo { background-image: url(images/sections/scouts.png); } aside.explorers .white.logo { background-image: url(images/sections/explorers.png); } aside.network .white.logo { background-image: url(images/sections/network.png); } aside.activesupport .white.logo { background-image: url(images/sections/activesupport.png); } aside a.block.logo:hover, article.tile.section:hover { opacity: 0.7; } /* TILES */ .tiles { display: block; margin: 0 0 100px 0; width:100%; } aside.tiles { margin-bottom: 0; } article.tile { background: #7413DC; float: left; position: relative; display:table-cell; vertical-align:middle; margin-bottom: 0.2%; overflow:hidden; } article.tile:hover { background: #00A794; } article.tile * { color: #fff; } article.tile h2 { margin: 0; padding: 0; } article.tile h4 a { display: block; } article.tile p { font-size: 14px; margin: 5px 0 0 0; } .col3of4 article.tile p { display: none; } article.tile p.button { display: block; margin: 15px 0 10px 0; } p.button a, article.tile p.button span { background: #00A794; color: #fff; font-weight: 800; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 5px 8px; } p.button a:hover, article.tile:hover p.button span { background: #fff; color: #00A794; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); } article.tile .content { position:absolute; height: 86%; width: 86%; padding: 7%; display: block; } article.tile .content .bottom { bottom: 0; margin: 0 0 5% 0; position:absolute; width: 86%; } article.tile.bg { background-size: cover; background-position: center center; } article.tile.bg .content { background: rgba(0, 0, 0, 0.15) url(images/overlay.png) no-repeat bottom center; background-size: cover; } article.tile.bg:hover .content { background-color: rgba(0, 167, 148, 0.5); } article.tile.bg * { text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); } article.tile.bg a h4, article.tile.bg a h4 * { text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); } .thirds article.tile { width: 33.2%; padding-bottom: 33.2%; } .thirds article.tile:nth-child(3n+2) { margin: 0 0.2% 0.2% 0.2%; } .quarters article.tile { width: 24.85%; padding-bottom: 24.8%; } .quarters article.tile:nth-child(4n+2) { margin: 0 0.2% 0.2% 0.2%; } .quarters article.tile:nth-child(4n+3) { margin: 0 0.2% 0.2% 0; } .full article.tile { margin-bottom: 1%; width: 100%; padding-bottom: 100%; } div.more { background: #7413DC; padding: 1% 2.5%; width: 95%; } div.more p { color: #fff; margin: 0; } /* DOTS */ section.dots { display: table; margin: 0 0 100px 0; width:100%; } section.dots article.tile { background: none; margin: 0 !important; } section.dots article.tile .content { border-left: 1px dotted #7413DC; } section.dots article.tile * { color: #7413DC; } section.dots article.tile p, section.dots article.tile:hover p { color: #000; } section.dots article.tile:hover * { color: #00A794; } section.dots.thirds article.tile { width: 33.3%; padding-bottom: 33.3%; } section.dots.quarters article.tile { width: 25%; padding-bottom: 25%; } section.dots.quarters article.tile:nth-child(4) .content { border-right: 1px dotted #7413DC; padding-right: 6%; } /* FOOTER */ footer { margin-bottom: 100px; } footer *, footer a { color: #707070; } footer .small p { font-size: 12px; } footer p.social { font-size: 20px; } footer p.social a i { color: #7413DC; margin-left: 10px; } #swoosh { float: left; height: 82px; margin: 0 0 20px 0; width: auto; } footer input[type=text], footer input[type=password] { margin-right: 20px; width: 30%; } /* FORMS */ input[type=email], input[type=tel], input[type=text], input[type=password], textarea { background: #fff; border: none; color: #7413DC; height: 20px; font-size: 14px; line-height: 20px; margin: 0 0 20px 0; max-width: 100%; outline: none; } input[type=email], input[type=tel], input[type=text], input[type=password] { border-bottom: 1px dotted #8c857b; height: 22px; padding: 5px 0 4px 0; width: 100%; } textarea { border: 1px dotted #8c857b; height: 190px; padding: 10px 1% 9px 1%; resize: none; width: 98%; } input[type=email]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=email]:hover, input[type=tel]:hover, input[type=text]:hover, input[type=password]:focus, input[type=password]:hover { border-bottom: 1px dotted #7413DC; } textarea:focus, textarea:hover { border: 1px dotted #7413DC; } input[type=submit], span.button a { background: #00A794; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #fff; cursor: pointer; font-size: 14px; font-weight: 800; height: auto !important; line-height: 20px; margin: 0; outline: none; padding: 6px 10px; width: auto; } input[type=submit]:hover, span.button a:hover { background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); color: #00A794; text-decoration: none; } .wpcf7-not-valid-tip { display: none !important; } .contact .alignleft, .contact .alignright { width: 48%; } .wpcf7-validation-errors, .wpcf7-mail-sent-ok { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 14px; line-height: 22px; width: 90%; margin: 0 auto 20px auto !important; text-align: center; border: 0!important; color: #fff !important; float: left; font-weight: 700; padding: 8px 5% !important; } .wpcf7-validation-errors { background: #7413DC; } .wpcf7-mail-sent-ok { background: #84a40b; } span.wpcf7-form-control-wrap { width: 100%; } ::-webkit-input-placeholder { color: #8c857b; } :-moz-placeholder { color: #8c857b; } ::-moz-placeholder { color: #8c857b; } :-ms-input-placeholder { color: #8c857b; } aside input { margin-bottom: 10px !important; } input[type=email], input[type=tel], input[type=text], input[type=password], input[type=submit], textarea { -webkit-appearance: none; } form#login p { margin-bottom: 0; } form#login input[type=text], form#login input[type=password] { width: 50%; } form#login label { display: none; } /* MOBILE MENU AND SEARCH BAR */ ul.mainmenu { background-color: #7413DC; position: fixed; z-index: 7500; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .close { background: #00A794; border: none; border-radius: none; box-shadow: none; color: #fff; cursor: pointer; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .close, .close i { color: #fff; } .close:hover, .close:hover i { background: #F79C58; color: #fff; } .close:focus { outline: none; } /* MOBILE MENU AND SEARCH BAR: SIDE MENU */ .menu--slide-right { height: 100%; overflow-y: scroll; text-align: center; width: 100%; } .menu--slide-right ul { list-style: none; margin: 0; padding: 0; width: 100%; } .menu--slide-right ul li { font-size: 20px; line-height: 40px; margin: 0; } .menu--slide-right ul li a { border-top: 0px solid #ad1aac; color: #fff; display: block; font-weight: 400; } .menu--slide-right ul li a:hover { background: #fff; color: #7413DC; } @media all and (min-width: 320px) { .menu--slide-right { width: 250px; } } .menu--slide-right .close { font-size: 20px; font-weight: 700; line-height: 40px; padding: 0; width: 100%; } .menu--slide-right { top: 0; right: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } @media all and (min-width: 320px) { .menu--slide-right { -webkit-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); } } .menu--slide-right.is-active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } /* MOBILE MENU AND SEARCH BAR: TECHNICAL STUFF */ body.has-active-menu { overflow: hidden; } .mask { background-color: #000; height: 0; left: 0; overflow: hidden; position: fixed; top: 0; width: 0; z-index: 7000; opacity: 0; -webkit-transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s; transition: opacity 0.3s, width 0s 0.3s, height 0s 0.3s; } .mask.is-active { height: 100%; width: 100%; opacity: 0.7; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } /* TABLET LAYOUT */ @media screen and (max-width: 960px) { .maincontainer { max-width:940px; min-width:660px; margin:0 auto; padding:0 15px; } .col1of1, .col1of2, .col1of3, .col2of3, .col1of4, .col2of4, .col3of4, .col1of5, .col2of5, .col3of5, .col4of5 { margin:0 1%; float:left; } .col1of1 { width:98%; } .col1of2 { width:48%; } .col1of3 { width:31.33%; } .col2of3 { width:64.66%; } .col1of4 { width:23%; } .col2of4 { width:48%; } .col3of4 { width:73%; } .col1of5 { width:18%; } .col2of5 { width:38%; } .col3of5 { width:58%; } .col4of5 { width:78%; } .tablet-hide { display: none; } .tablet-only { display: block; } /* TEXT */ h1, h1 a, section#intro h1, section#title h1 { font-size: 40px; } h2, h2 a { font-size: 22px; } h3, h3 a { font-size: 18px; } p { font-size: 14px; } article.tile h2 { font-size: 18px; } /* HEADER */ header nav ul li { font-size: 12px; } header nav ul li.button { margin: 0 0 0 20px; } section#intro, .promo section#intro { margin: 100px auto 80px auto; width: 90%; } .promo .col1of4 img { max-height: 160px; margin: 50px 0;} .offline section#intro { margin: 80px auto; width: 100%; } .offline section#intro h1 { margin: 20px auto; width: 80%; } select.menu { margin: 0 auto 20px auto; width: 100%; } /* PAGES */ section#title { margin-bottom: 30px; } section#title .overlay { padding: 30px 0 10px 0; } /* TILES */ .quarters article.tile p, aside article.tile p { display: none; } article.tile p.button { display: block; } /* SIDEBAR */ aside li, aside p { font-size: 12px !important; } /* FORMS */ textarea { padding: 10px 3% 9px 3%; resize: none; width: 94%; } } /* MOBILE LAYOUT */ @media screen and (max-width: 700px) { .maincontainer { max-width:680px; min-width:240px; margin:0 auto; padding:0 10px; } .col1of1, .col1of2, .col1of3, .col2of3, .col1of4, .col2of4, .col3of4, .col1of5, .col2of5, .col3of5, .col4of5 { margin:0 2%; float:left; } .col1of1 { width:96%; } .col1of2 { width:46%; } .col1of3 { width:96%; } .col2of3 { width:96%; } .col1of4 { width:96%; } .col2of4 { width:96%; } .col3of4 { width:96%; } .col1of5 { width:96%; } .col2of5 { width:96%; } .col3of5 { width:96%; } .col4of5 { width:96%; } body.home { background-size: auto 500px; } .mobile-only { display: block; } .mobile-hide { display: none; } /* TEXT */ h1, h1 a { font-size: 30px; } section#intro h1, section#title h1 { font-size: 40px; } h2, h2 a { font-size: 20px; } h3, h3 a { font-size: 18px; } h5, h5 a { font-size: 14px; } p { font-size: 14px; } #maincontent li { font-size: 14px; } /* HEADER */ header nav { height: auto; } header nav ul.social { display: none; } header nav .mobile { display: inline; margin: 0; padding: 0; } header nav .mobile li { display: inline; margin: 0; padding: 0; } header nav .mobile a.icon i { color: #fff; font-size: 30px; margin: 0 0 0 15px; padding: 16px 0 14px 0; } header nav ul li.button { margin: 0; } section#intro, .promo section#intro { margin: 50px auto 40px auto; width: 100%; } .promo section#intro * { text-align: center; } .offline section#intro { margin: 40px auto; width: 100%; } .offline section#intro h1 { margin: 20px auto; width: 100%; } a#logo { height: 60px; width: 140px; margin: 0; } /* PAGES */ section#title { background-size: cover; } #maincontent { padding-bottom: 30px; } /* GALLERY */ div.scoutsgallery a img { width: 48%; } div.scoutsgallery a:nth-child(odd) img { float: left !important; margin: 0 0 4% 0 !important; } div.scoutsgallery a:nth-child(even) img { float: right !important; margin: 0 0 4% 0 !important; } /* TILES */ .tiles { margin: 0 0 50px 0; } article.tile p.button { display: none; } article.tile a h2 { display: block; } .thirds article.tile { width: 100%; display: block; position: inherit; vertical-align: top; height: auto !important; margin: 0 0 1% 0 !important; overflow: visible; padding: 0; } .thirds article.tile p { display: block; } .thirds article.tile .content { position:inherit; height: auto; width: 90%; padding: 5%; display: block; } .thirds article.tile .content .bottom { top: 0; margin: 0; position:inherit; width: 100%; } article.tile.bg .content { background-color: rgba(0, 0, 0, 0.5); background-image: none; } .quarters article.tile, aside.full article.tile { width: 49.5% !important; margin: 0 0 1% 0 !important; padding-bottom: 49.5% !important } .quarters article.tile:nth-child(odd), aside article.tile:nth-child(odd) { float: left; } .quarters article.tile:nth-child(even), aside article.tile:nth-child(even) { float: right; } /* DOTS */ section.dots { margin: 0 0 50px 0; } section.dots article.tile { width: 100% !important; display: block; position: inherit; vertical-align: top; height: auto !important; margin: 0; overflow: visible; padding: 0 !important; } section.dots article.tile .content { position:inherit; height: auto; width: 90%; padding: 5%; display: block; border-left: 0; border-top: 1px dotted #7413DC; } section.dots article.tile .content .bottom { top: 0; margin: 0; position:inherit; width: 100%; } section.dots article.tile a h2 { margin: 0; } section.dots article.tile:nth-child(4) { border-bottom: 1px dotted #7413DC !important; } section.dots.quarters article.tile:nth-child(4) .content { border-right: 0; } /* SIDEBAR */ .aside { margin-bottom: 50px; } article.tile.section.logo { background-image: none !important; } /* FOOTER */ footer { margin-bottom: 50px; } footer .col1of2 { width: 96%; text-align: left !important } #swoosh { height: auto; margin: 0 0 20px 0; width: 100px; } footer p { font-size: 12px; } footer p.social { float: right; font-size: 30px; line-height: 82px; margin: 0; text-align: right; } footer p.social a i { margin-left: 10px; } footer input[type=text] { margin: 0 0 20px 0 !important; width: 35% !important; } footer input[type=password] { margin: 0 5% 20px 5% !important; width: 35% !important; } footer input[type=submit] { margin: 0 0 20px 0; padding: 6px 0; width: 20% !important; } /* FORMS */ textarea { padding: 10px 4% 9px 4%; resize: none; width: 92%; } .contact .alignleft, .contact .alignright { float: none; width: 100%; } }