/* Theme Name: Sarah Jane Photography Author: Big Fish Creative Version: 9999 */ /* ---------------------------------------------------------------- RESET -----------------------------------------------------------------*/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, main, footer, header, hgroup, menu, nav, section { display: block; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: #000; } body { line-height: 1; } ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } [hidden] { display: none; } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } input[type="text"], input[type="email"], input[type="password"], textarea { -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; } input[type="submit"], input[type="reset"] { -webkit-appearance: none; } .input-block-level { display: block; width: 100% !important; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix { display: inline-block; *zoom:1;} * html .clearfix { height: 1%;} /* Hides from IE-mac \*/ .clearfix { display: block;} .clear { height: 0; background: transparent; width: 100% !important; clear: both; margin: 0 !important; } /* ---------------------------------------------------------------- STRUCTURE -----------------------------------------------------------------*/ .wrapper { width: 100%; padding: 0 4%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { margin: 0 auto; padding: 0 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container-1400 { max-width: 1400px; } .container-800 { max-width: 800px; } .inset { padding: 6% 8%; } .align-left { float: left; } .align-right { float: right; } .col-full { width: 100%; } .col-half { width: 48%; } .col-one-third { width: 30.63%; } .col-two-third { width: 65.33%; } .col-one-fourth { width: 22%; } .col-three-fourth { width: 74%; } .col-one-fifth { width: 16.8%; } .col-two-fifth { width: 37.6%; } .col-three-fifth { width: 58.4%; } .col-four-fifth { width: 79.2%; } .col-one-sixth { width: 13.33%; } .col-five-sixth { width: 82.67%; } .col-full, .col-half, .col-one-third, .col-two-third, .col-three-fourth, .col-one-fourth, .col-one-fifth, .col-two-fifth, .col-three-fifth, .col-four-fifth, .col-one-sixth, .col-five-sixth { display: block; position: relative; margin-right: 4%; margin-bottom: 50px; float: left; } .col-full { clear: both; float: none; margin-right: 0; } .col-last { margin-right: 0; clear: right; } /* ---------------------------------------------------------------- REPEATABLE PATTERNS -----------------------------------------------------------------*/ ::selection { background: #a7cecf; color: #fff; } ::-moz-selection { background: #a7cecf; /* Firefox */ color: #fff; } ::-webkit-selection { background: #a7cecf; /* Safari */ color: #fff; } html, body { width: 100%; height: 100%; background: #fff; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* TABLES */ table { border-left: 1px solid #040404; border-top: 1px solid #040404; width: 100%; margin-top: 30px; } th, td {border-bottom: 1px solid #040404; border-right: 1px solid #040404; padding: 10px 15px; text-align: left; } th { background: #f7941d; color: #fff; font-weight: bold; } hr { width: 100%; clear: both; height: 1px; background: transparent; border: none; border-bottom: 1px dashed #c5c5c5; outline: none; margin: 20px 0; } /* FORMS */ label { display: inline-block; padding-bottom: 5px; font-size: 16px; font-weight: 400; } label span { color: #a7cecf; font-size: 20px; } small span { color: #a7cecf; font-size: 18px; font-style: normal; } input[type="text"], input[type="email"], input[type="password"], select, textarea { display: block; background: #f9f9f9; color: #A7A9AC; padding: 10px 14px; border: 1px solid #d3d3d3; outline: 0; font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 18px; line-height: 24px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08); -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08); -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } input[type="text"], input[type="email"], input[type="password"], textarea { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } textarea { height: 150px; } input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="password"]:focus, select:focus, textarea:focus { background-color: #f1ffff; border-color: #a7cecf; color: #a1caca; -webkit-box-shadow: 0 0 5px rgba(180, 222, 223, 1); -moz-box-shadow: 0 0 5px rgba(180, 222, 223, 1); box-shadow: 0 0 5px rgba(180, 222, 223, 1); } input[type="submit"] { font-family: 'Raleway', sans-serif; font-size: 18px; line-height: 22px; color: #fff; text-transform: uppercase; letter-spacing: 1px; background-color: #a7cecf; padding: 14px 20px 12px 20px; display: inline-block; position: relative; cursor: pointer; border: none; -webkit-transition: background 0.15s ease-in-out; -moz-transition: background 0.15s ease-in-out; -o-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } input[type="submit"]:hover { background-color: #75bcbe; } #captcha { margin-bottom: 20px; } div.wpcf7-response-output { margin: 2em 0 1em 0 !important; padding: 12px 15px !important; border: none; } div.wpcf7-validation-errors { border-left: 5px solid #e90e0e; background-color: #ffe7e7 !important; color: #e90e0e !important; } span.wpcf7-not-valid-tip { font-size: 14px !important; font-style: italic; width: auto !important; padding: 3px 8px; color: red !important; text-shadow: none; font-weight: 400; } div.wpcf7-mail-sent-ok { background-color: #d0ebc3 !important; border-left: 5px solid #398F14; padding: 12px 20px; color: #398F14 !important; } /* LISTS */ ul, ol, dl { margin: 0 0 50px 35px; } ul { list-style: disc; } ol { list-style: decimal; } ul li, ol li { margin-bottom: 8px; } .list-reset { margin: 0; padding: 0; list-style: none; } /* IMAGES */ img { max-width: 100%; height: auto; } .rounded { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .full-width-image { width: 100%; } .alignleft, .alignright, .aligncenter, .alignnone { margin-bottom: 15px; } .alignleft, .alignright { display: inline; } .alignleft { margin-right: 25px; float: left; } .alignright { margin-left: 25px; float: right; } p img, .wp-caption { margin-top: 5px; } .wp-caption { margin-bottom: 15px; } .alignleft, .alignright, .aligncenter, .alignnone, .wp-caption { border: none; background: transparent; padding: 0; width: auto !important; } .wp-caption img { display: block; line-height: 0; width: 100%; } .wp-caption-text { background: #dcdcdc; font-size: 13px; line-height: 18px; padding: 10px; margin: 0; } .wp-caption.alignleft .wp-caption-text, .wp-caption.alignright .wp-caption-text { max-width: 430px; } /* BUTTONS */ .btn { font-family: 'Raleway', sans-serif; font-size: 18px; line-height: 22px; color: #A7A9AC; padding: 10px 25px 12px 20px; display: inline-block; position: relative; cursor: pointer; border: 1px solid #A7A9AC; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #a7cecf; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: transform 0.3s ease-in-out; -moz-transition: transform 0.3s ease-in-out; -o-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .btn i { font-size: 24px; position: relative; top: 4px; left: 6px; } .btn:hover, .btn:focus, .btn:active { color: #fff; border-color: #a7cecf; } .btn:hover:before, .btn:focus:before, .btn:active:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform: scaleX(1); } /* SOCIAL */ .social-links li { display: inline-block; margin: 0 3px; } .social-links a { width: 40px; height: 40px; display: block; text-align: center; } .social-links i { font-size: 22px; line-height: 42px; } .social-links a:hover, .social-links a:focus, .social-links a:active { background-color: #a7cecf !important; color: #fff !important; } /* ---------------------------------------------------------------- TYPOGRAPHY -----------------------------------------------------------------*/ body { font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 18px; line-height: 28px; color: #A7A9AC; } p, blockquote, table, fieldset, form { margin-bottom: 25px; } strong { font-weight: 700; } em, i { font-style: italic; } small { font-size: 13px; font-style: italic; } caption { text-align: left; } .kicker { font-size: 22px; line-height: 32px; font-weight: 400; } .success { background: #f1ffeb; color: #398F14; border: 1px solid #398F14; padding: 15px 20px; font-weight: 700; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; position: absolute !important; } .centered { text-align: center;} .upper { text-transform: uppercase; } /* HEADINGS */ h1, h2, h3, h4, h5, h6 { margin: 0 0 15px 0; color: #7a7a7a; font-weight: 400; } h1 { font-size: 42px; line-height: 48px; margin-bottom: 60px; padding-bottom: 30px; position: relative; } h1:after { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: -35px; width: 70px; height: 3px; background-color: #7a7a7a; } h2 { font-size: 36px; line-height: 40px; } h3 { font-size: 30px; line-height: 34px; } h4 { font-size: 24px; line-height: 28px; } h5 { font-size: 22px; line-height: 26px; } h6 { font-size: 18px; line-height: 22px; } .section-heading { display: table; white-space: nowrap; font-size: 24px; line-height: 28px; margin-bottom: 35px; width: 100%; } .section-heading:before, .section-heading:after { background: url("gfx/bg-section-heading.png") repeat-x center; content: ""; display: table-cell; width: 50%; } .section-heading span { font-family: 'Work Sans', sans-serif; display: inline-block; padding: 0 20px; text-transform: uppercase; } /* LINKS */ a { text-decoration: none; color: #a7cecf; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } a:hover, a:active { color: #72e2e5; } .swipe { display: inline-block; position: relative; } .swipe:before { content: ""; position: absolute; z-index: -1; left: 0%; right: 100%; bottom: -3px; background-color: transparent; height: 1px; -webkit-transition: right 0.3s ease-out; -moz-transition: right 0.3s ease-out; transition: right 0.3s ease-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .swipe:hover { color: #58585a; } .swipe:hover:before { background-color: #58585a; right: 0; } /* ---------------------------------------------------------------- HEADER -----------------------------------------------------------------*/ #masthead { overflow: hidden; background-color: #fff; position: relative; z-index: 10; padding-top: 20px; padding-bottom: 20px; } /* LOGO */ #logo a { display: block; line-height: 0; } #logo img { width: 145px; } /* MAIN NAV */ #responsive-nav { display: none; } #menu-main-navigation { zoom: 1; list-style: none; padding: 0; margin: 65px 0 0 0; text-align: center; } #menu-main-navigation > li { display: inline-block; margin: 0 25px; position: relative; letter-spacing: 1px; } #menu-main-navigation > li:last-child { margin-right: 0; } #menu-main-navigation > li > a { display: inline-block; position: relative; padding-bottom: 4px; color: #A7A9AC; font-weight: 400; } #menu-main-navigation > li > a:before { content: ""; position: absolute; z-index: -1; left: 0%; right: 100%; bottom: 0; background-color: transparent; height: 2px; -webkit-transition: right 0.2s ease-out; -moz-transition: right 0.2s ease-out; transition: right 0.2s ease-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } #menu-main-navigation > li > a:hover, #menu-main-navigation > li > a:focus, #menu-main-navigation > li > a:active, #menu-main-navigation > li.current-menu-item > a { color: #7a7a7a; } #menu-main-navigation > li:hover > a:before, #menu-main-navigation > li > a:hover:before, #menu-main-navigation > li > a:focus:before, #menu-main-navigation > li > a:active:before, #menu-main-navigation > li.current-menu-item > a:before { background-color: #7a7a7a; right: 0; } /* SOCIAL */ #header-social { position: absolute; top: 20px; right: 30px; z-index: 10; } #header-social a { color: #fff; background-color: #A7A9AC; } /* ---------------------------------------------------------------- MAIN CONTENT -----------------------------------------------------------------*/ #main-content { background-color: #fff; overflow: hidden; position: relative; z-index: 1; padding-top: 30px; padding-bottom: 50px; } .page-id-6 #main-content { padding-top: 0; } /* ---------------------------------------------------------------- CONTENT -----------------------------------------------------------------*/ /* HOME */ #slides { max-width: 1800px; margin: 0 auto; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; width: 100%; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden, .slick-arrow.slick-disabled { display: none !important; } .slick-arrow { width: 48px; height: 48px; font-size: 30px; line-height: 48px; position: absolute; top: 50%; z-index: 100; display: block; margin-top: -24px; cursor: pointer; color: #fff; background-color: #a7cecf; background-color: rgba(167,206,207,0.6); text-align: center; } .slick-arrow:hover { background-color: #a7cecf; -webkit-transition: background 0.15s ease-in-out; -moz-transition: background 0.15s ease-in-out; -o-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .slick-prev { left: 20px; } .slick-prev:before { padding-right: 3px; } .slick-next { right: 20px; } .slick-next:before { padding-left: 3px; } #page-home { padding: 50px 0 60px 0; } #page-home blockquote p { font-size: 22px; line-height: 30px; font-weight: 400; margin-bottom: 10px; font-style: italic; } #page-home blockquote cite { font-size: 20px; } #page-home p { margin-bottom: 40px; } #page-home .btn { margin: 0 8px; } /* ABOUT */ #page-about h1 { margin-bottom: 30px; } /* GALLERY */ .filter-images { text-align: center; margin-bottom: 25px; padding: 0 20px; } .filter-images li { display: inline-block; margin: 0 10px 15px 10px; font-weight: 400; } .filter-images li#title-li { margin-left: 0; color: #7a7a7a; } .filter-images a { color: #A7A9AC; line-height: 24px; padding-bottom: 4px; position: relative; border-bottom: 2px solid transparent; } .filter-images a:hover, .filter-images li.active a { color: #a7cecf; } .filter-images li.active a { border-color: #a7cecf; } .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } #gallery-images { max-width: 1800px; margin: 0 auto 50px auto; padding: 0 2.3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #gallery-images .grid-item, #gallery-images .grid-sizer { width: 30.1% } #gallery-images .gutter-sizer { width: 4% } #gallery-images .grid-item { margin-bottom: 2%; line-height: 0; overflow: hidden; } .gallery-thumb a { display: block; } .gallery-thumb img { width: 100%; display: block; position: relative; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;-webkit-backface-visibility: hidden; filter: url(data:image/svg+xml;utf8,#grayscale); filter: gray; -webkit-filter: grayscale(100%); } .gallery-thumb a:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); filter: none; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); filter: none; -webkit-filter: grayscale(0%); } .gallery-thumb a .hover-icon { font-size: 40px; text-align: center; background: rgba(180, 222, 223, 0.5); line-height: 64px; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; position: absolute; z-index: 10; transition: .3s ease-in-out; -webkit-transform: scale(.8) rotate(-30deg); -moz-transform: scale(.8) rotate(-30deg); -ms-transform: scale(.8) rotate(-30deg); transform: scale(.8) rotate(-30deg); opacity: 0; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.4); box-shadow: 0 0 15px rgba(0,0,0,0.4); } .gallery-thumb a .hover-icon:before { padding-left: 4px; } .gallery-thumb a:hover .hover-icon { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; color: #fff; } /* PRICING */ .package { width: 100%; clear: both; overflow: hidden; border-bottom: 1px solid #d3d3d3; margin-bottom: 40px; padding-bottom: 30px; } .package div { margin-bottom: 0; } .package .price { color: #a7cecf; font-weight: 600; display: inline-block; margin: 0 30px 20px 0; } #packages li:last-child .package { border-bottom: none; } /* CONTACT */ #contact-details i { display: inline-block; font-size: 22px; position: relative; top: 3px; padding-right: 4px; } #contact-details #contact-phone i { padding-right: 12px; } #contact-details #social-fb i { padding-right: 12px; } #contact-details #social-insta i { padding-right: 5px; } #captcha { margin-bottom: 20px; } /* ---------------------------------------------------------------- FOOTER -----------------------------------------------------------------*/ #global-footer { overflow: hidden; clear: both; padding: 40px 0; background-color: #A7A9AC; color: #fff; } #footer-contact { margin-bottom: 25px; } #footer-contact li { display: inline-block; margin: 0 15px; } #footer-contact i { padding-right: 5px; } #footer-contact a { color: #fff; } #footer-contact .swipe:hover:before { background-color: #fff; z-index: 100; } #footer-social { margin-bottom: 25px; } #footer-social a { color: #A7A9AC; background-color: #fff; } #footer-meta { font-size: 14px; } /* ---------------------------------------------------------------- BACK TO TOP -----------------------------------------------------------------*/ #back-to-top { display: none; z-index: 999; position: fixed; top: auto; left: auto; right: 15px; bottom: 15px; cursor: pointer; } #back-to-top span { position: absolute; left: -5000px; } #back-to-top i { padding: 0; background-color: #7a7a7a; color: #fff; display: inline-block; height: 40px; width: 40px; text-align: center; font-size: 20px; line-height: 38px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.2); box-shadow: 0 0 15px rgba(0,0,0,0.2); } #back-to-top:hover i, #back-to-top:active i { background-color: #a7cecf; }