/*!
Theme Name: whalewatch
Theme URI: https://www.impartmedia.com/
Author: impartmedia
Author URI: https://www.impartmedia.com/
Description: Custom theme for Whale Watch Western Australia
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: whalewatch
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

whalewatch is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Image */
.image-max-width { max-width: 100%; }

/* Button */
a.button, .button { display: inline-block; border-radius: 0; text-decoration: none; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; }
a.button-secondary, .button-secondary { background-color: var(--blue); color: #fff; border-radius: 2px; padding: 9px 15px; text-transform: none; }
.button-secondary:hover, .button-secondary:focus, .button-secondary:active { color: #fff; }
a.button-primary, .button-primary { background-color: var(--orange); border-radius: 2px; padding: 9px 15px; color: #fff; }
a.button-ghost-white, .button-ghost-white { color: #fff; border: 1px solid #fff; border-radius: 0; padding: 15px 25px; }
a.button-ghost-white:hover, .button-ghost-white:hover { background-color: #fff; color: var(--blue); }
a.button-link, .button-link { font-weight: 700; }
.button-link:hover, .button-link:focus, .button-link:active { color: var(--blue); }

.ul-tick ul { padding-left: 0; list-style-type: none; }
.ul-tick ul li { position: relative; padding-left: 35px; margin-bottom: 10px; line-height: 1.8; }
.ul-tick ul li:before { font-family: 'Font Awesome 5 Pro'; content: "\f00c"; color: var(--blue); position: absolute; top: 0; left: 0; }

/* Contact Form 7 */
.wpcf7-spinner { position: absolute; }

/* Slick */
.slick-arrow { cursor: pointer; font-size: 0; border: 1px solid #323a45; border-radius: 50%; width: 66px; height: 66px; background-color: transparent; z-index: 300; }
.slick-arrow:hover { border-color: #323a45; background-color: #323a45; }
.slick-arrow:hover:before { color: #fff; } 
.slick-arrow:before { font-family: 'Font Awesome 5 Pro'; font-size: 23px; }
.slick-prev:before { content: "\f053"; }
.slick-next:before { content: "\f054"; }

.arrows-white .slick-arrow { border-color: #fff; }
.arrows-white .slick-arrow:hover { background-color: #fff; }
.arrows-white .slick-arrow:hover:before { color: var(--font-main-colour); }
.arrows-white .slick-prev:before,
.arrows-white .slick-next:before { color: #fff; }

@media (max-width: 1199px){
	.slick-arrow { width: 40px; height: 40px; }
	.slick-arrow:before { font-size: 16px; }
}

/* Gravity forms */
.ginput_container input { border-color: var(--font-main-colour); border-radius: 2px; }
.gform_submission_error { font-family: 'Gotham'; } 
body .gform_legacy_markup_wrapper li.hidden_label input { margin-top: 0; }
body .gform_legacy_markup_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { padding-left: 10px; padding-right: 10px; }
body .gform_legacy_markup_wrapper textarea { padding-left: 10px; padding-right: 10px; border-color: var(--font-main-colour); }
body .gform_legacy_markup_wrapper textarea:focus { border-color: var(--blue); }
.gform_legacy_markup_wrapper .gform_footer input[type=submit] { border: 0; background-color: var(--blue); font-size: 15px; font-weight: 700; color: #fff; padding: 17px 40px; cursor: pointer; }

/* Header */
.admin-bar .site-header { margin-top: 32px; }

/* Subscription */
.panel-subscribe { text-align: center; padding-top: 80px; padding-bottom: 60px; }
.panel-subscribe h4,
.panel-subscribe p {  }
.panel-subscribe h4 { margin-bottom: 10px; }
.panel-subscribe p { margin-bottom: 30px; }
.panel-subscribe input[type="email"] { color: #323a45; padding-left: 45px; padding-right: 100px; width: 100%; height: 100px; border-radius: 2px; border: 2px solid #323a45; }
.panel-subscribe .wpcf7-submit { border: 0; background: url(images/icon-arrow-right.png) no-repeat; position: absolute; right: 20px; top: 17px; width: 65px; height: 65px; border: 0; background-size: contain; font-size: 0; cursor: pointer; }
.panel-subscribe form { position: relative; }

@media (max-width: 767px){
	.panel-subscribe .wpcf7-spinner { left:0; }
	.panel-subscribe .wpcf7-submit { width:36px; height:36px; }
	.panel-subscribe input[type="email"] { padding-left: 20px; padding-right: 50px; height: 70px; font-size: 15px; }
}
@media (max-width: 350px) {
	.panel-subscribe .wpcf7-submit { right:10px; }
	.panel-subscribe input[type="email"] { padding-left: 10px; padding-right: 50px; height: 70px; font-size: 14px; }
}

/* Social Links */
.social-links ul { list-style-type: none; }
.social-links ul li { display: inline-block; }
.social-links ul li a { text-align: center; font-size: 20px; width: 45px; height: 45px; display: inline-block; border: 1px solid #fff; border-radius: 50%; }
.social-links ul li a:hover { color: var(--blue); border-color: var(--blue); }
.social-links ul li.ig a { padding-top: 12px; }
.social-links ul li.fb a { padding-top: 11px; }
.social-links ul li.yt a { padding-top: 11px; }
.social-links ul li.ta a { padding-top: 11px; }

/* Panel - breadcrumb */
.panel-breadcrumb { padding: 18px 0; }
.panel-breadcrumb .container { position:relative; }
.panel-breadcrumb .delimiter:before { content: "/";  }
.panel-breadcrumb span,
.panel-breadcrumb a { font-weight: 700; }
.panel-breadcrumb span { color: #000; }
.panel-breadcrumb a { text-decoration: none; color: var(--blue); }
.panel-breadcrumb .share-button-wrapper { position:absolute; top:-10px; right:15px; }
@media (max-width:767px) {
	.panel-breadcrumb .share-button-wrapper { display:none; }
}

/* Blog Post */
.panel-single-post-content { padding-top: 90px; }
.panel-single-post-content .col-sidebar { padding-top: 40px; }
.panel-single-post-content .col-sidebar h3 { margin-top: 0; padding-bottom: 19px; }
.panel-single-post-content .col-sidebar h3,
.panel-single-post-content .col-sidebar p { color: #fff; border-bottom: 1px solid #82caea; padding-bottom: 20px; margin-bottom: 20px; }
.panel-single-post-content .col-sidebar p:last-of-type { border-bottom: 0; padding-bottom: 0; }
.panel-single-post-content .col-sidebar .inner { padding: 30px; max-width: 360px; margin-left: auto; background-color: var(--blue); color: #fff; }
.panel-single-post-content .col-sidebar svg { width: 42px; margin-right: 10px; }
.panel-single-post-content .col-sidebar svg path { fill: #fff; }

.single-post .entry-meta { padding: 10px 0 10px 0; border-style: solid; border-width: 1px 0px 1px 0px; border-color: #d6d8da; margin-bottom: 60px; }
.single-post .entry-meta a { text-decoration: none; }
.single-post .entry-meta a:visited { color: var(--blue); }
.single-post .entry-meta .byline { position: relative; padding-right: 14px; margin-right: 14px; }
.single-post .entry-meta .byline:after { content: ''; position: absolute; right: 0; height: 12px; top: 5px; width: 1px; background-color: #000; }
.single-post .entry-meta .byline { display: inline-block; }
.single-post .entry-meta .cat-links,
.single-post .entry-meta .posted-on { font-size: 0; display: inline-block; }
.single-post .entry-meta .byline,
.single-post .entry-meta .posted-on { margin-right: 15px; }
.single-post .entry-meta .edit-link { margin-left: 15px; }
.single-post .entry-meta .byline span,
.single-post .entry-meta .posted-on a,
.single-post .entry-meta .cat-links a { font-size: 15px; }
.single-post .entry-meta .cat-links a { margin-right: 8px; }
/*.single-post .entry-meta .byline a:before { content: "\f2bd"; color: var(--blue); font-family: 'Font Awesome 5 Pro'; margin-right: 4px; }*/
.single-post .entry-meta .posted-on a:before { content: "\f133"; color: var(--blue); font-family: 'Font Awesome 5 Pro'; font-weight: 900; margin-right: 4px; }
.single-post .entry-meta .cat-links a:before { content: "\f02b"; color: var(--font-main-colour); font-family: 'Font Awesome 5 Pro'; font-weight: 400; margin-right: 4px; }
.single-post .entry-content a[role="button"] { background-color: var(--blue); color:#fff; border-radius: 2px; }
.single-post .nav-links a { text-decoration: none; }
.single-post .nav-links .nav-previous:before { content: 'Previous article'; display: block; font-weight: 700; margin-bottom: 10px; }
.single-post .nav-links .nav-next:before { content: 'Next article'; display: block; font-weight: 700; margin-bottom: 10px; }
.single-post .nav-links .nav-previous .nav-title:before { content: "\f053"; font-family: 'Font Awesome 5 Pro'; color: var(--font-main-colour); margin-right: 6px; }
.single-post .nav-links .nav-next { text-align: right; }
.single-post .nav-links .nav-next .nav-title:after { content: "\f054"; font-family: 'Font Awesome 5 Pro'; color: var(--font-main-colour); margin-left: 6px; }
.single-post .nav-links .nav-subtitle { display: none; }
.single-post .comment-form { border-radius: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -30px; margin-right: -30px; }
.single-post .comment-form p { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-left: 30px; padding-right: 30px; }
.single-post .comment-form textarea { border-radius: 0; height: 180px; resize: none; }
.single-post .comment-form p input { border: 1px solid #d7d7d7; border-radius: 0; }
@media (min-width:992px) {
	.single-post .comment-form .comment-form-author,
	.single-post .comment-form .comment-form-email,
	.single-post .comment-form .comment-form-url { -webkit-box-flex: 0; -ms-flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }
}
@media (max-width:767px) {
	.single-post .comment-form { margin-right:-15px; }
	.single-post .comment-form p { padding-right:15px; }
}
.single-post .comment-form .comment-form-author label,
.single-post .comment-form .comment-form-email label,
.single-post .comment-form .comment-form-url label,
.single-post .comment-form .comment-form-comment label { display: block; font-weight: 700; }
.single-post .comment-form .comment-form-author input,
.single-post .comment-form .comment-form-email input,
.single-post .comment-form .comment-form-url input,
.single-post .comment-form .comment-form-comment input { padding: 12px 15px; width: 100%; }
.comment-list { margin: 0; padding:0 0 0.5em 0; word-wrap: break-word; list-style: none; }
.comment-list li { list-style: none; }
.comment-list li.depth-1 .comment, .comment-list li.depth-2 .comment { border-bottom: 1px solid #eeeeee; }
.comment-list .children { margin-left: 2em; }
.comment { padding: 1em 0; }
.comment-author .avatar { float:left; margin-right:15px; width:50px; height:50px; }
.comment-content { clear:both; padding-top:0.8em; }
.comment .reply { -js-display: flex; display: flex; justify-content: flex-end; }

.single-post-details p { font-size: 20px; }
.single-post-details h1 { font-size: 50px; font-weight: 700; line-height: 1; margin-bottom: 30px; text-transform: uppercase; }
.panel-news-image-list { padding-bottom: 30px; }
.panel-news-image-list .row { margin-left: -6px; margin-right: -6px; }
.panel-news-image-list .item { padding-left: 6px; padding-right: 6px; margin-bottom: 12px; }
.panel-news-image-list .item img { /* DO NOT USE height 100% as it causes problems in safari --- height:100%;*/ object-fit:cover; }
.panel-news-image-list .col-md-12 img { width: 100%; }
.panel-news-blockquote { padding-bottom: 40px; }
.panel-news-blockquote p { position: relative; font-size: 22px; letter-spacing: 0; padding-left: 30px; }
.panel-news-blockquote p:before { content: ''; position: absolute; left: 0; background-color: var(--blue); width: 3px; height: calc(100% - 20px); top: 10px; }
.panel-news-blockquote .inner { padding-left: 80px; }
.panel-news-video { padding-bottom: 40px; }
.panel-news-video iframe { width: 100%; aspect-ratio: 1.77; height: auto; }

@media (max-width:767px) {
	.panel-news-blockquote p { font-size: 19px; padding:12px 2px 12px 22px; }
	.panel-news-blockquote .inner { padding-left: 0; }
}

.panel-news-text { padding-bottom: 30px; }
.panel-news-text ul { padding-left: 0; margin-left: 0; list-style-type: none; } 
.panel-news-text ul li { position: relative; color: var(--blue); padding-left: 12px; margin-bottom: 10px; } 
.panel-news-text ul li:before { content: ""; background-color: #000; border-radius: 50%; width: 4px; height: 4px; position: absolute; display: block; left: 0; top: 9px; }

.panel-news-button { padding-bottom: 45px; }
.panel-news-button .button { padding:13px 25px; text-transform: uppercase; letter-spacing: 1.5px; }

.single-post .comments-area { padding-top: 30px; border-top: 1px solid #d6d8da; }
.single-post .col-comments .nav-links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 35px 0; border-top: 1px solid #d6d8da; border-bottom: 1px solid #d6d8da; }
.single-post .col-comments .nav-links .nav-previous,
.single-post .col-comments .nav-links .nav-next { float: none; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.single-post .col-comments .nav-links .nav-previous { border-right: 1px solid #d6d8da; }
.single-post .col-comments .form-submit { margin-top: 40px; margin-bottom: 50px; }
.single-post .col-comments input[type="submit"] { background-color: var(--blue); color: #fff; padding: 17px 36px; display: inline-block; border: 0; border-radius: 2px; text-decoration: none; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }

/* Footer Top */
.site-footer { background-color: #323a45; color: #fff; }
.site-footer a { color: #fff; text-decoration: none; }
.footer-top { padding-top: 60px; padding-bottom: 60px; }
.footer-top h4 { color: #fff; font-weight: 700; text-transform: uppercase; }
.footer-top ul { padding-left: 0; list-style-type: none; margin-left: 0; }
.footer-top ul li { margin-bottom: 10px; }
.footer-top ul li a {}
.footer-top .image-one { margin-bottom: 20px; }
.footer-top .col-one .inner { max-width: 280px; }
.footer-top .col-one,
.footer-top .col-five { -ms-flex: 0 0 27%; flex: 0 0 27%; max-width: 27%; }
.footer-top .col-two,
.footer-top .col-six { -ms-flex: 0 0 23%; flex: 0 0 23%; max-width: 23%; }
.footer-top .col-one p { font-size: 14px; line-height: 1.5; color: #fff; }
.footer-top .col-two { margin-bottom: 40px; }
.footer-top .col-four .image-wrapper img { max-width: 200px; width: 100%; margin-bottom: 15px; }
.footer-top .col-four .image-wrapper-same-line img {  }
.footer-top .col-seven .image-one { margin-right: 16px; }

@media (max-width: 1199px){
	.footer-top .col-six .image-one { max-width: 98px; }
	.footer-top .col-seven .image-one { max-width: 80px; }
	.footer-top .col-seven .image-two { max-width: 98px; }
}
@media (max-width: 991px){
	.footer-top .col-one { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 30px; }
	.footer-top .col-one .inner { max-width: 100%; }

	.footer-top .col-two,
	.footer-top .col-three,
	.footer-top .col-four,
	.footer-top .col-five,
	.footer-top .col-six,
	.footer-top .col-seven { -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; }

	.footer-top .col-four { margin-bottom: 30px; }
}
@media (max-width: 767px){
	.footer-top .col-two,
	.footer-top .col-three,
	.footer-top .col-four,
	.footer-top .col-five,
	.footer-top .col-six,
	.footer-top .col-seven { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; text-align:center; }
	.footer-top .col-two { margin-bottom: 20px; }
	.footer-top .col-four { margin-bottom: 30px; }
}
@media (max-width: 480px){
	.footer-top .col-four,
	.footer-top .col-five,
	.footer-top .col-six,
	.footer-top .col-seven { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; max-width:230px; margin:0 auto; }
	.footer-bottom .container .col-two { text-align:center; }
	.footer-bottom { padding-bottom:70px; }
}

/* Footer Bottom */
.footer-bottom { border-top: 1px solid #70757d; padding-top: 25px; }
.footer-bottom p { color: #fff; font-size: 14px; }
.footer-bottom ul { list-style-type: none; margin-left: 0; padding-left: 0; }
.footer-bottom ul li { display: inline-block; font-size: 14px; }
.footer-bottom ul li:after { content: '/'; padding-left: 11px; padding-right: 7px; }
.footer-bottom ul li:last-of-type:after { content: none; }
.footer-bottom ul li a {  }
.footer-bottom .col-two { text-align: right; }

/* Panel pages which have Banner panel + elementor */
section.elementor-section:first-child { margin-top:0 !important; }
section.elementor-section div,
section.elementor-section span,
section.elementor-section h1,
section.elementor-section h2,
section.elementor-section h3,
section.elementor-section h4,
section.elementor-section h5,
section.elementor-section h6,
section.elementor-section p,
section.elementor-section b,
section.elementor-section strong,
section.elementor-section li { font-family:inherit !important; color:inherit; }

/* Blog posts which have elementor content */
.panel-single-post-content .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding-left:0; padding-right:0; }

/* Panel - Light widget */
.panel-lightwidget { padding-top: 60px; padding-bottom: 60px; }
@media (max-width: 530px){
	.panel-lightwidget h4.large { font-size: 4vw; }
}

/* Panel - logo list */
.panel-logo-list h4 { margin-bottom: 30px; }
.panel-logo-list .item { text-align: center; margin-bottom: 30px; }
.panel-logo-list.panel-class-footer { padding-top: 60px; padding-bottom: 110px; }
@media (max-width: 991px){
	.panel-logo-list.panel-class-footer .item { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 480px){
	.panel-logo-list.panel-class-footer .item { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}

/* Gadgets overrides for mobile */
@media (max-width: 480px){
	body .bd-control-multiselect label.checkbox-inline { background-position:left top; padding-left:30px; padding-right:10px; }
	body #utopiaFiltersModal .modal-header .close { position:absolute; top:20px; right:15px; }
	body #utopiaFiltersModal .modal-dialog { margin:15px; }
	body #utopiaFiltersModal .modal-content { border-radius:0; }
	body #utopiaFiltersModal h3 { margin:0 0 15px 0; font-size:20px; }
	body #utopiaFiltersModal .modal-dialog { height:100%; overflow:auto; padding-bottom:30px; }
}