/*
Theme Name: Coral Reef Child
description: Client Theme - Coral Reef
Template: coral-reef-parent
Version: 1.0.0
Text Domain: coral-reef-child
Author: BCW
*/

.vid {position: relative;padding-top:48%;}
.vid video {border:none;position: absolute; top:50%; transform:translateY(-50%); left: 0; width:100%;}
.quotehp {font-weight: bold; font-style: italic; font-size: 1.3em;}
.galleriesgal {
    flex-direction: row;
    display: flex;
    column-gap: 15px;
    row-gap: 15px;
    flex-wrap: wrap;
}
.galsec {margin:0; padding: 0;}
.galsec .gallery-section-inner {padding: 30px 0;}
.galsec .gallery {flex-wrap: wrap; row-gap: 15px; justify-content: center;}
.galleriesgal {display: flex; flex-direction: column; column-gap: 15px; row-gap: 15px; flex: 0 1 calc(32.4% - 6px);}
.galleriesgal img {object-fit: cover; height:21vw; width: 100%; max-width: 100%; object-position: top;}
.cap {font-style: italic; font-size: 15px; text-align: center;}
.contop {padding-top: 50px; border-top: 1px solid #000;}
.botcon {padding-bottom: 30px;}
.galleriesgal a {position: relative; z-index: 1;}
.galleriesgal a:hover:after {content: ""; background:var(--color-2); opacity: .4; position:absolute; top:0;left:0; width:100%; height: 100%; z-index: 2;}

.resources {background:var(--color-2); color:#fff; padding:30px;margin-bottom: 50px;}
.resources .btn {background:var(--color-3); color: #000;}
.resources .btn:hover {background:var(--color-1); color:#fff;}
.resource-item {margin:30px 0;padding:30px 0; border-top:1px solid #fff; text-align: center;}
.resource-item h2 {text-align: center;}
.linksrow {display: flex;justify-content: center; row-gap: 15px; column-gap: 15px; flex-wrap: wrap;}

.btn {background:var(--color-2); color:#fff;}
.btn:hover {background:var(--color-3); color:#000;}

.primary-footer .sitemap .menu li a {color:#fff;}
.primary-footer .sitemap .menu li a:hover {color: var(--color-3);}

.sitemap-page a {color:var(--color-2);}
.sitemap-page a:hover {color:var(--color-3);}

.gform_button {background:var(--color-2); color:#fff;}
.gform_button:hover {background:var(--color-3); color:#000;}

@media screen and (max-width:767px) {
.galsec .gallery {flex-direction: column;}
.galleriesgal img {height:57vw; width:90%;}
}