/* Theme Name: California Beaches Author: Derek Ashauer Author URI: http://www.ashwebstudio.com */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700); /* Resets */ 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%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 120%; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input { vertical-align: middle; } input[type="submit"] { cursor: pointer; } /* WordPress required styles */ .alignright { float: right; margin: 0 0 10px 15px; } .alignleft { float: left; margin: 0 15px 10px 0; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption-dd { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } /* ----------------------------------- */ /* COMMON /* ----------------------------------- */ body { background: #007296 url(images/bg.png) center top repeat; text-align: center; } p, div, li, h1, h2, h3, h4, td, th, input, select, textarea { font: normal 15px/1.6 "Open Sans", sans-serif; font-weight: 400; color: #4d4d4d; } p, h1, h2, h3, h4, section ul, section ol, section table { margin-bottom: 15px; } h1, h2, h3 { line-height: 1.1; } a img, :link img, :visited img { border: none } a { color: #007295; text-decoration: underline; } a:hover { color: #2e9dbf; } div.clear { clear: both; overflow: hidden; height: 1px; } input { vertical-align: middle; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .gfield { margin-left: 0 !important; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin: 0 0 25px 0; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .container { width: 100%; max-width: 960px; margin: 0 auto; text-align: left; } /* ----------------------------------- */ /* HEADER /* ----------------------------------- */ #header { background: #FFF; box-shadow: 0 4px 3px 3px rgba(0,0,0,.06); padding: 12px 0; position: relative; width: 100%; z-index: 777; } #logo { float: left; margin: 0 50px 0 0; } #header nav { float: left; margin-top: 15px; display: block; } #header nav li { list-style: none; float: left; margin: 0 35px 0 0; font-size: 20px; } #header nav li a { color: #767676; text-decoration: none; } #header nav li a:hover { color: #e9a129; } #quick-search { float: right; margin-top: 5px; } #quick-search a { text-decoration: none;color: #e9a129; font-size: 34px; } #quick-search a:hover { color: #edb557; } #quick-search-form { display: none; background: #007296 url(images/bg.png) center top repeat; padding: 10px 0; font-size: 18px; color: #FFF; } #quick-search-form input[type="text"] { border: none; background: #FFF; padding: 3px 8px; } #quick-search-form input[type="submit"] { font-family: "FontAwesome"; color: #e9a129; font-size: 18px; border: none; background: none; } #mobile-menu { display: none; float: right; margin: 7px 10px 0 0; } #mobile-menu { text-decoration: none;color: #e9a129; font-size: 34px; } #mobile-menu:hover { color: #edb557; } /* ----------------------------------- */ /* HOME /* ----------------------------------- */ #banner { position: relative; height: 480px; } #search { padding-top: 140px; text-align: center; width: 550px; max-width: 100%; margin: 0 auto; position: relative; z-index: 555; } #search h1 { font-size: 42px; font-style: italic; font-weight: 600; color: #FFF; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); } #search-box { background: rgba(0,0,0,.5); border-radius: 8px; padding: 5px 30px; } #search-box input { border: none; background: transparent; color: #FFF; font-size: 22px; vertical-align: middle; } #search-box ::-webkit-input-placeholder { color: #FFF; } #search-box :-moz-placeholder { color: #FFF; } #search-box ::-moz-placeholder { color: #FFF; } #search-box :-ms-input-placeholder { color: #FFF; } #search input[type="text"] { width: 80%; } #search input[type="submit"] { font-family: "FontAwesome"; font-size: 32px; padding: 0; } #slideshow { position: absolute; top: 0; width: 100%; } #slideshow li { height: 480px; background-size: cover; } #slideshow li .links { position: absolute; bottom: 30px; text-align: left; width: 96%; max-width: 96%; padding: 0 2%; } #slideshow li .links a { text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); color: #FFF; text-decoration: none; } #slideshow li .links a.photo-credit { font-size: 15px; } #slideshow li .links a.beach-link { float: right; font-size: 18px; font-weight: 600; } #slideshow li .links a.beach-link i { color: #e9a129; } #slideshow span { font-family: "FontAwesome"; position: absolute; top: 40%; z-index: 999; } #slideshow span a { font-size: 60px; color: #FFF; text-decoration: none; } #slideshow-next { right: 25px; } #slideshow-prev { left: 25px; } .home #main section ol li { list-style: none; margin: 0 0 40px 0; clear: left; } .home #main section ol li img { float: left; max-width: 25%; height: auto; } .home #main section ol li h2, .home #main section ol li p { margin: 0 0 4px 30%; } .home #main section ol li h2 a { color: #000; text-decoration: none; } .home #main section ol li h2 { font-size: 20px; } .home #main section ol li p a { color: #e9a129; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 12px; } #county-map { position: relative; background: #FFF; min-height: 575px; } #county-map .container { position: relative; z-index: 999; } #county-map section { width: 100%; float: left; padding: 75px 0; } #county-map section h1 { font-size: 36px; font-weight: 600; font-style: italic; color: #007295; } #county-map li { list-style: none; clear: both; padding-top: 25px; } #county-map li h2 { font-size: 22px; } #county-map li a { color: #000; text-decoration: none; } #county-map li li { width: 33%; float: left; clear: none; font-size: 14px; padding: 0 0 5px 0; } .map-item a { white-space: nowrap; text-decoration: none; } #county-map li .image { display: none; } /* #county-map #map { position: absolute; width: 50%; right: 0; top: 0; height: 100%; background: #000; z-index: 9999; } */ a[href^="https://maps.google.com/maps"]{ display:none !important; } .gmnoprint a, .gmnoprint span { display:none; } /* ----------------------------------- */ /* MAIN CONTENT /* ----------------------------------- */ #main { background: #e4e3d8 url(images/bg-sand.jpg) center top repeat; padding: 20px 0; } #main section { float: left; width: 64.5%; } #main .wide section { width: 100%; float: none; } #main section li { margin-left: 25px; } #main section h1 { font-size: 36px; font-weight: 700; font-style: italic; color: #007295; margin-bottom: 40px; } #main section h2 { font-size: 24px; color: #000; font-style: normal; font-weight: bold; } #main section h3 { font-size: 17px; color: #000; margin: 0 0 5px 0; font-weight: bold; } #main section h2 a, #main section h3 a { text-decoration: none; } .content .share { clear: both; margin: 30px 0; padding: 30px 0; border-top: 1px solid #EFEFEF; } .content .share span { display: block; float: left; margin: 0 15px 0 0; font-size: 18px; font-weight: bold; } #crumb { color: #007295; font-style: italic; margin: 0 0 4px 0; } #crumb a { text-decoration: none; } #main aside { float: right; width: 31.3%; min-width: 300px; } #main aside img, #main section img { max-width: 100%; height: auto; } #main section #map img { max-width: none; } #main aside .widget h2 { font-weight: bold; font-size: 14px; text-transform: uppercase; } #main aside .widget li { list-style: none; } #region-header { padding: 60px 0; background-size: cover; background-position: center center; position: relative; } #region-header h1 { font-size: 42px; font-style: italic; font-weight: 600; color: #FFF; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); } #region-header .subtitle a { background: #FFF; padding: 5px 15px; color: #e9a129; text-decoration: none; border-radius: 5px; font-size: 12px; text-transform: uppercase; } #region-header .subtitle a:hover { background: #e9a129; color: #FFF; } #region-header #crumb { text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); font-weight: 600; font-size: 16px; } #region-header #crumb, #region-header #crumb a { color: #FFF; } #region-header .links { position: absolute; bottom: 30px; text-align: left; width: 96%; max-width: 96%; padding: 0 2%; } #region-header .links a { float: right; font-size: 15px; font-weight: 600; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); color: #FFF; text-decoration: none; } #region-header .links a.previous { float: left; } #region-header .links a i { color: #e9a129; text-shadow: none; } #beach-list li { list-style: none; float: left; width: 30%; margin: 0 0 40px 5%; background: #FFF; } #beach-list li:hover { box-shadow: 0 0 5px rgba(0,0,0,.2); } #beach-list li:nth-child(3n+1) { margin-left: 0; clear: left; } #beach-list li img { width: 100%; height: auto; margin: 0 0 25px 0; } #beach-list li h2, #beach-list li p { padding: 0 30px; } #beach-list li h2 { font-size: 20px; margin: 0 0 4px 0; } #beach-list li h2 a { color: #000; text-decoration: none; } #beach-list li p a { color: #e9a129; font-size: 12px; text-transform: uppercase; text-decoration: none; } /* Beach Landing Page */ #main section ul#regions li { list-style: none; margin: 0 0 40px 0; clear: left; } #main section ul#regions li li { margin: 0 0 15px 0; } #main section ul#regions img { float: left; margin: 0 0 15px 0; } #main section ul#regions h3, #main section ul#regions p { margin: 0 0 4px 115px; } #main section ul#regions h3 { font-size: 18px; } #main section ul#regions li p.more a { color: #e9a129; font-size: 12px; text-transform: uppercase; text-decoration: none; } /* Region */ .tax-region #map { height: 450px; display: none; } .tax-region #main section { width: 55%; } .tax-region #beach-list { margin-bottom: 50px; } .tax-region #main aside { width: 40%; } .tax-region #main section h2, .tax-region #main aside h2 { font-size: 22px; color: #000; font-weight: 600; clear: both; } .tax-region #main section ul li { list-style: none; margin: 0 0 25px 0; clear: left; } .tax-region #main section ul li img { max-width: 75px; height: auto; float: left; margin: 0 0 25px 0; } .tax-region #main section ul li h3, .tax-region #main section ul li p { margin-left: 85px; } .tax-region #main section ul li h3 { margin-bottom: 4px; font-weight: bold; } .tax-region #main section ul li h3 a { color: #000; text-decoration: none; } .tax-region #main section ul li p { font-size: 13px; margin-bottom: 4px; } .tax-region #main section ul li p a { color: #e9a129; font-size: 12px; text-transform: uppercase; text-decoration: none; } /* Beach */ #beach-header { border-bottom: 1px solid #cbcac0; padding-bottom: 10px; margin-bottom: 25px; } #beach-header h1 { float: left; color: #007295; font-size: 34px; font-style: italic; font-weight: 600; margin: 0; } #beach-header .share, #review-info { float: right; margin: -10px 0 0 15px; text-align: center; } #review-info a { text-decoration: none; font-size: 18px; font-weight: 600; font-style: italic; } #review-info .stars { font-size: 16px; color: #e9a129; } .tabs ul.tab-menu { padding: 0; margin: 0; display: block; } .tabs ul.tab-menu li { list-style: none; display: inline-block; margin: 0 0 0 30px; } .tabs ul.tab-menu li:first-child { margin-left: 0; } .tabs ul.tab-menu li a { color: #9f9f9f; text-decoration: none; font-size: 16px; padding-bottom: 12px; display: block; } .tabs ul.tab-menu li a.active { color: #007295; font-weight: 600; position: relative; } .tabs ul.tab-menu li a.active i { color: #e9a129; } .tabs ul.tab-menu li a.active:before { content: ' '; width: 0px; height: 8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #FFF; position: absolute; left: 50%; margin-left: -5px; bottom: 0; overflow: hidden; } .tabs .tab-content { display: none; border: 10px solid #FFF; } .tabs .tab-content.active, .tabs .tab-content:first-of-type { display: block; } .tabs #tab-photos #slideshow { text-align: center; visibility: hidden; } .tabs #tab-photos #slideshow .bx-clone { display: none !important; } .tabs #tab-photos #slideshow img { max-width: 100%; max-height: 350px; height: auto; width: auto; margin: 0 auto; } #slideshow-thumbnails { margin: 10px 0 0 0; } .tabs #tab-map { text-align: center; } #tab-map #map { height: 400px; margin: 0 0 10px 0; } #tab-map a { margin: 0 5px; text-decoration: none; font-size: 16px; } #tab-map a i { color: #e9a129; } #tab-photos #slideshow img { margin: 0 0 5px 0; } #tab-photos #slideshow-thumbnails img { width: 50px; height: 50px; } #tab-weather { padding: 50px 25px; background-size: cover; background-position: center center; } #tab-weather > div { width: 100% !important; } #tab-info { padding: 20px; } #main section #tab-info li { margin: 0 0 4px 0; list-style: none; font-size: 13px; } /* #main section #tab-info .col { width: 30%; float: left; margin: 0 0 30px 5%; } #main section #tab-info .col:nth-child(3n+1) { margin-left: 0; } */ #tab-pano .photonav .container { height: 300px !important; } .content, .tab-content { background: #FFF; box-shadow: 0 0 5px rgba(0,0,0,.2); margin: 0 0 20px 0; } .content { padding: 30px; } .content .block { box-shadow: inset 1px 4px 12px -6px rgba(0,0,0,.2); padding: 30px; margin: 0 -30px; } .content .block:first-child { box-shadow: none; padding-top: 0; } .content .block h2 { color: #007295; } .content .block h2 i { color: #e9a129; } #beach-data { width: 35%; float: right; } #beach-data dt { font-weight: 600; color: #000; } #beach-data dd { margin: 0 0 5px 0; font-size: 13px; } #beach-data p.note { font-style: italic; } #beach-description { width: 60%; float: left; } #beach-description .ad { margin: 30px 0 0 0; } #beach-posts ul li { list-style: none; margin: 0 0 25px 0; } #beach-posts ul li img { float: left; } #beach-posts ul li h3, #beach-posts ul li p { margin-left: 115px; } #beach-posts ul li h3 { margin-bottom: 4px; font-weight: bold; } #beach-posts ul li h3 a { color: #000; text-decoration: none; } #beach-posts ul li p { font-size: 13px; margin-bottom: 4px; } #beach-posts ul li p a { color: #e9a129; font-size: 12px; text-transform: uppercase; text-decoration: none; } #main section #tab-events li { list-style: none; clear: left; margin: 0 0 20px 0; } #tab-events .event-date { border: 1px solid #c5c5c5; float: left; padding: 10px; line-height: 1.1; text-align: center; color: #007295; font-size: 18px; text-transform: uppercase; } #tab-events .event-date .event-day { font-size: 26px; display: block; } #tab-events li h3, #beach-events li p { margin: 0 0 4px 75px; } #tab-events li h3 { margin-bottom: 4px; font-weight: bold; } #tab-events li h3 a { color: #000; text-decoration: none; } #tab-events li p { font-size: 13px; margin-bottom: 4px; } #tab-events li p a { color: #e9a129; font-size: 12px; text-transform: uppercase; text-decoration: none; } #main section .image-list ul li { list-style: none; margin: 0 0 25px 0; clear: left; } .image-list ul li img { float: left; margin: 0 0 25px 0; } #main section .image-list ul li h3, .image-list ul li p { margin-left: 115px; } .image-list ul li h3 { margin-bottom: 4px; font-weight: bold; } .image-list ul li h3 a { color: #000; text-decoration: none; } .image-list ul li p { font-size: 13px; margin-bottom: 4px; } .image-list ul li p a { color: #e9a129; font-size: 12px; text-transform: uppercase; text-decoration: none; } #secondary-tabs .tab-content { padding: 20px 20px; } #respond h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; } #respond label { width: 100px; display: inline-block; vertical-align: top; } #respond input#submit { background: #007295; border: none; color: #FFF; padding: 5px 15px; } #main section #comments li { list-style: none; margin: 0 0 25px 0; } .comment-author, .comment-meta { display: inline; } .comment-author, .comment-author a { color: #e9a129; font-size: 12px; text-transform: uppercase; text-decoration: none; font-weight: 400; } .comment-meta, .comment-meta a { color: #999; font-size: 12px; text-decoration: none; } #main section textarea { max-width: 99%; } .single-beach aside .ad, .single-beach aside #nearby { margin: 0 0 10px 0; } .single-beach aside img { max-width: 100%; height: auto; } #nearby { background: #007295; padding: 20px; } #nearby h2 { font-size: 20px; color: #FFF; font-style: italic; padding-bottom: 4px; border-bottom: 1px solid #308da9; } #nearby li { list-style: none; margin: 0 0 15px 0; clear: both; } #nearby li img { float: left; max-width: 25%; height: auto; } #nearby li h3, #nearby li p { margin-left: 30%; margin-bottom: 4px; } #nearby li h3 { font-size: 17px; } #nearby li h3 a { color: #bedbe4; text-decoration: none; } #nearby li p { color: #7ab5c7; } #nearby li p a { color: #e9a129; font-size: 12px; text-transform: uppercase; text-decoration: none; } #nearby p.more { margin: 15px -20px -20px -20px; background: #026989; } #nearby p.more a { padding: 7px 20px; color: #FFF; display: block; text-decoration: none; } #nearby p.more a i { color: #e9a129; } #hotel-form label { display: inline-block; margin: 0 10px 8px 0; font-size: 12px; } #hotel-form label span { display: block; } #hotel-form label input { font-size: 12px; } /* Page */ #page-header { border-bottom: 1px solid #cbcac0; padding-bottom: 10px; margin-bottom: 25px; } #page-header h1 { color: #007295; font-size: 34px; font-style: italic; font-weight: 600; margin: 0; float: left; } #page-header .share { float: right; margin: 0 0 0 15px; text-align: center; } /* Search Results */ .search-result { margin: 0 0 25px 0; } .search-result img { float: left; } .search-result h2, .search-result p { margin-left: 115px; } .search-result h2 { margin-bottom: 4px; font-weight: 400; } .search-result h2 a { color: #000; text-decoration: none; } .search-result p { font-size: 13px; margin-bottom: 4px; } .search-result p a { color: #e9a129; font-size: 12px; text-transform: uppercase; text-decoration: none; } /* Blog */ #main section article.post { clear: left; margin: 0 0 40px 0; } #main section article.post img { float: left; max-width: 25%; height: auto; margin: 0 0 15px 0; } #main section article.post h2, #main section article.post p { margin: 0 0 4px 30%; } #main section article.post h2 a { color: #000; text-decoration: none; } #main section article.post h2 { font-size: 20px; font-weight: bold; } #main section article.post p a { color: #e9a129; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 12px; } .single-post #main section img.wp-post-image.attachment-large { width: 100%; height: auto; margin: 0; display: block; } p.tags { font-size: 12px; text-transform: uppercase; color: #666; } .popular-posts li { margin: 0 0 20px 0; clear: both; } .popular-posts li img { width: 60px; height: 60px; float: left; margin: 0 20px 20px 0; } .popular-posts li span.wpp-excerpt { display: block; font-size: 12px; } .popular-posts li a { text-decoration: none; } /* Maps */ .page-id-8 #map { margin: 0 0 15px 0; } #main section #maps-list li { list-style: none; margin: 0 0 40px 0; } #main section #maps-list li img { float: left; max-width: 25%; height: auto; } #main section #maps-list li h3, #main section #maps-list li p { margin: 0 0 4px 30%; } #main section #maps-list li h3 a { color: #000; text-decoration: none; } #main section #maps-list li h3 { font-size: 20px; font-weight: bold; } #main section #maps-list li p a { color: #e9a129; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 12px; } .single-map #map { margin: 0 0 15px 0; box-shadow: 0 0 5px rgba(0,0,0,.2); } .single-map .marker-window, .single-map .image { text-align: center; overflow: hidden; white-space: nowrap; } .single-map #map > div:nth-child(2), .tax-region #map > div:nth-child(2) { display: none; } .postid-96271 #map { display: none; } .postid-58497 #map { display: none; } .postid-58355 #map { display: none; } .postid-58494 #map { display: none; } .postid-98968 #map { display: none; } .postid-47218 #map { display: none; } .postid-47196 #map { display: none; } .postid-96524 #map { display: none; } .postid-56782 #map { display: none; } .postid-21329 #map { display: none; } .postid-58851 #map { display: none; } .postid-86763 #map { display: none; } .postid-102960 #map { display: none; } .postid-3612 #map { display: none; } .postid-104977 #map { display: none; } .postid-58529 #map { display: none; } .postid-3769 #map { display: none; } .postid-105893 #map { display: none; } .postid-58356 #map { display: none; } .postid-58496 #map { display: none; } .postid-46055 #map { display: none; } .postid-106996 #map { display: none; } .postid-100670 #map { display: none; } .postid-18121 #map { display: none; } .postid-94173 #map { display: none; } .postid-98084 #map { display: none; } .postid-4558 #map { display: none; } .postid-4394 #map { display: none; } .postid-58853 #map { display: none; } .postid-47267 #map { display: none; } .postid-97253 #map { display: none; } .postid-58357 #map { display: none; } .postid-47191 #map { display: none; } .postid-58374 #map { display: none; } .postid-24436 #map { display: none; } .postid-26177 #map { display: none; } .postid-102670 #map { display: none; } .postid-97097 #map { display: none; } .postid-56912 #map { display: none; } .postid-99003 #map { display: none; } .postid-103587 #map { display: none; } .postid-95261 #map { display: none; } .postid-58540 #map { display: none; } .postid-104924 #map { display: none; } .postid-94213 #map { display: none; } .postid-94208 #map { display: none; } .postid-99016 #map { display: none; } .postid-58272 #map { display: none; } .postid-20972 #map { display: none; } .postid-101077 #map { display: none; } .postid-58536 #map { display: none; } .postid-106518 #map { display: none; } .postid-105976 #map { display: none; } .postid-58343 #map { display: none; } .postid-27217 #map { display: none; } .postid-104398 #map { display: none; } .postid-21331 #map { display: none; } .postid-99372 #map { display: none; } .postid-56857 #map { display: none; } .postid-103041 #map { display: none; } .postid-58328 #map { display: none; } .postid-58361 #map { display: none; } .postid-106503 #map { display: none; } #main section ul.markers li { list-style: none; margin: 0 0 25px 0; clear: both; } #main section ul.markers li img { float: left; margin: 0 0 25px 0; } #main section ul.markers li h3, ul.markers li p { margin-left: 115px; } #main section ul.markers li h3 { margin-bottom: 4px; font-weight: bold; } #main section ul.markers li h3 a { color: #000; text-decoration: none; } #main section ul.markers li p { font-size: 13px; margin-bottom: 4px; } #main section ul.markers li p a { color: #e9a129; font-size: 12px; text-transform: uppercase; text-decoration: none; } /* Inspiration / Photo of the Day */ .page-id-27056 #main section { width: 100%; } #main section #inspiration li { width: 48%; float: left; list-style: none; margin: 0 0 20px 0; position: relative; } #main section #inspiration li:nth-child(even) { float: right; } #main section #inspiration li:nth-child(odd) { clear: both; } #inspiration li img { width: 100%; height: auto; display: block; } #inspiration li:hover .overlay { opacity: 1; } .overlay { opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.8); z-index: 99; -webkit-transition: color, background-color, opacity 0.7s; -moz-transition: color, background-color, opacity 0.7s; -o-transition: color, background-color, opacity 0.7s; transition: color, background-color, opacity 0.7s; } .overlay-table { display: table; height: 100%; width: 100%; } .overlay-content { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10%; } .overlay-content a { color: #FFF; font-size: 18px; text-decoration: none; } /* ----------------------------------- */ /* FOOTER /* ----------------------------------- */ #footer { padding: 40px 0; } #footer .col { float: left; margin-left: 70px; } #footer .col:first-child { margin-left: 0; } #footer a { color: #FFF; text-decoration: none; } #footer a:hover { color: #b6d9e4; } #footer p.header { color: #77b6ca; font-size: 12px; text-transform: uppercase; margin: 0 0 4px 0; } #footer p { color: #FFF; } #footer li { list-style: none; } #footer a i.fa-inverse { color: #007295; } #footer .col1 p { font-size: 12px; text-align: center; } #footer .col4 { max-width: 250px; } #signup-box { border-bottom: 1px solid #59a3bb; padding-bottom: 5px; } #signup-box i { color: #FFF; font-size: 18px; } #signup-box input { border: none; color: #FFF; background: transparent; } #signup-box input[type="submit"] { float: right; text-transform: uppercase; font-size: 12px; } #signup-box ::-webkit-input-placeholder { color: #59a3bb; } #signup-box :-moz-placeholder { color: #59a3bb; } #signup-box ::-moz-placeholder { color: #59a3bb; } #signup-box :-ms-input-placeholder { color: #59a3bb; } /* ----------------------------------- */ /* MOBILE /* ----------------------------------- */ @media screen and (max-width: 980px) { .container { width: 90%; padding-left: 5%; padding-right: 5%; } #county-map li li { width: 50%; } } @media screen and (max-width: 650px) { #mobile-menu { display: block; } #header nav { display: none; width: 100%; } #header nav.active { display: block; } #header nav li { float: none; margin: 0 0 1px 0; width: 100%; } #header nav li a { display: block; background: #e9a129; color: #FFF; padding: 5px 10px; } #header nav li a:hover { background: #edb557; color: #FFF; } .tabs li a span { display: none; } .tabs li a i { font-size: 30px; } section, aside, #beach-data, #beach-description { width: 100% !important; margin: 0 0 40px 0 !important; } #county-map #map { display: none; } #county-map li li { width: 100%; float: none; clear: both; } } @media screen and (max-width: 480px) { #logo { max-width: 55%; height: auto; } #search { padding: 70px 10% 0 10%; max-width: 80%; } #search h1 { font-size: 24px; } #search-box input { font-size: 16px; } #search input[type="text"] { width: 70%; } #search input[type="submit"] { font-size: 20px; -webkit-appearance: none; } #slideshow li, #banner { height: 300px; } #slideshow span a { font-size: 30px; } #slideshow li .links a.photo-credit, #slideshow li .links a.beach-link { font-size: 13px; } .tabs #tab-photos #slideshow img { max-height: 200px; } #beach-list li { width: 100%; margin-left: 0; } #footer .col { float: none; margin: 0 0 30px 0; } #footer .col p { text-align: left; } #beach-header h1, #share, #review-info { float: none; margin: 0 0 10px 0; text-align: left; } .content .share span { float: none; } }