/*
Theme Name: Hocker Sport
Theme URI: https://hockersport.com/
Description: Hocker is a new kind of sport
Version: 1.0
Author: Philip Sousa
Author URI: https://darkhorsedesigns.ca/
*/


:root {
--primary: #222;
--secondary: #019934;
--Tertiary: #00e74e;
--con1: 1300px;
}

:root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img) {border-radius: 28px !important;}

html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
body {font: 18px 'Open Sans', sans-serif; background:#222; color: #fff; margin: 0;}
img {display:block; max-width: 100%;}
h1,h2{font-family: "Tourney", sans-serif; text-transform: uppercase; font-weight: 500;}
h3,h4,h5,h6 {font-family: 'Open Sans', sans-serif; font-weight: 500;}
h1 {font-size: 3.2rem;}
h2 {font-size: 2.4rem;}
h3 {font-size: 1.8rem;}
h4 {font-size: 1.6rem;}
h5 {font-size: 1.4rem;}
p {line-height: 1.4;}
.noscroll {  position: fixed; overflow-y: scroll; width: 100%;}

.green {color:#00e74e;}

a:link {color:#ffffff;}
a:visited {color:#ffffff;}
a:hover {color:#ffffff;}

.master-container {max-width: var(--con1); margin:auto;}
.sub-container {padding: 0 50px; position: relative; z-index: 1;}

.headrow {display: grid; grid-template-columns: 260px 1fr min-content; height: 145px; position: relative; z-index: 10000000;}
.video1{width: 100%; height:100%; display: block;}
.video2{width: 1200px; height:auto; display: block;}
.video-con {border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; overflow: hidden;}
.blocklogo {background: #222; padding: 20px 20px 20px 0; border-bottom-right-radius: 60px; position: relative;}
.blocklogo figure {margin:0;}
.blocknav {background: #222; padding: 20px 0 20px 20px; border-bottom-left-radius: 60px; position: relative; display:grid; grid-template-columns: 250px 1fr;
    gap: 18px;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;}

.abcenter {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content;}

#stickyhead {display: inline-block; transition: all 1.0s; }
.stickycontent {}
.stickycontent .nav-master {margin-top:11px;}
.stickycontent .nav-master a {padding: 14px 4px 12px 4px;}
.stickylogo img {margin-top: 6px; max-width: 150px; -webkit-filter: drop-shadow(0px 0px 2px #666); filter: drop-shadow(0px 0px 2px #666);}
.cart-link {color: #fcf5e9 !important; font-size: 1.2rem;font-family: var(--font1); text-decoration: none; position: relative; top: 16px; text-transform: uppercase; transition: all 0.6s;}
.cart-link:hover {text-decoration: none; color:#ffae00 !important;}
.ic-cart {top: 5px; position: relative;}

/* hamburger */

.hamburger {position: relative; width: 1em; height: 1em; font-size: inherit; transition: all 0.3s ease; cursor: pointer; color: #fff;}
.hamburger.is-sm {font-size: 1rem;}
.hamburger.is-md {font-size: 1.5rem;}
.hamburger.is-lg {font-size: 2rem;}
.hamburger-line {position: absolute; right: 0; width: 100%; height: 0.125em; border-radius: 0.125em; background: currentColor; transition: inherit;}
.hamburger-line:nth-child(1) {top: 0.125em;}
.hamburger.is-active .hamburger-line:nth-child(1), .w-nav-button.w--open .hamburger-line:nth-child(1) {top: 50%; transform: translateY(-50%) rotateZ(-135deg);}
.hamburger-line:nth-child(2) {top: 0.438em;}
.hamburger.is-active .hamburger-line:nth-child(2), .w-nav-button.w--open .hamburger-line:nth-child(2) {right: 50%; width: 0;}
.hamburger-line:nth-child(3) {top: 0.75em; width: 0.625em;}
.hamburger.is-active .hamburger-line:nth-child(3), .w-nav-button.w--open .hamburger-line:nth-child(3) {top: 50%; width: 100%; transform: translateY(-50%) rotateZ(135deg);}

.mobilecon {padding: 100px; position: fixed; max-width: 1200px; width: 100%; height: 120%; background:#222; background-image: url('images/court-floor.jpg'); background-size: 100% 100%;  z-index: 10000; top: 0; color: #fff; display:none; opacity:0; transition: all 0.6ms;} 
.show-m {display:block; opacity:1.0; -webkit-animation: fadeIn 0.25s ease-out; animation: fadeIn 0.25s ease-out;}
.mobilerows {display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-content: center; align-items: center; height: 80%;}

.hp img {transform: translate(-2000px, 0px); filter: drop-shadow(5px 5px 15px #222);}

.puckmove img {animation: movepuck 4s ease; animation-fill-mode: forwards;}

@keyframes movepuck {
0%{transform: translate(-2000px, 500px) rotate(0deg);}
100%{transform: translate(0px, 0px) rotate(180deg);}
}

.bghocker {background-image: url('images/bg-hocker.jpg'); background-repeat: no-repeat; background-position: center right; background-size: contain;}

.col2 {display: grid !important; grid-template-columns: 1fr 1fr; gap: 60px; margin: 40px auto;}
.col2 figure {margin:0;}
.col2 h2:first-child {margin-top:0;}

.col2 video {border-radius: 28px;}

.wp-block-button__link {background-color: var(--secondary) !important; color: #fff; margin: 24px 0; padding: 14px 36px !important;}

.servicebox a img {transition: all 0.6s;}
.servicebox a:hover img {scale: 1.2; transition: all 0.6s;}
.servicebox div {border-radius: 28px; overflow: hidden;}


.row1 {display: flex; flex-wrap: nowrap;  height: 200px; align-items: center; }
.row1 > div {width: 400px; margin: 68px;}

.row2 {display: flex; flex-wrap: nowrap; align-items: center; }
.row2 > div:first-child {flex-grow:1;}

.header1 {background: rgb(34,34,34); background: linear-gradient(180deg, rgba(34,34,34,1) 0%, rgba(34,34,34,0) 100%); position: fixed;
    z-index: 100;
    width: 100%;
    max-width: var(--con1); top: 0;}
.logged-in .header1 {top:32px;}
.banner {display: flex; flex-direction: column; justify-content: center;  background-image: url('images/bg-home-theatre-1.jpg'); background-size: cover; background-position: center; position: relative; width: 100%; height: 600px; border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;}
.banner h1 {font-family: "Tourney", sans-serif; text-transform: uppercase; font-size: 48px; display:block; font-weight: normal; line-height: 1.0; margin: auto; text-align: center; background-color: rgba(0, 0, 0, 0.6); padding: 38px; border-radius: 28px;}
.container {max-width: 1350px; width:100%; margin:auto;}

.sm-ticker {display: block;
    text-align: center;
    font-size: 16px;
    font-style: italic;
    margin-top: 30px;}

.pad1 {padding: 0px 48px; margin: 80px auto;}
.pad2 {margin: 80px auto;}
.pad3 {max-width: 900px; margin:auto !important;}

.page-id-19 .banner {background-image: url('images/bg-hocker-001.jpg'); background-position: center -100px;}
.page-id-21 .banner {background-image: url('images/bg-hocker-004.jpg'); background-position: center 0;}
.page-id-25 .banner {background-image: url('images/bg-hocker-005.jpg'); background-position: center -100px;}


.feat1 {display: flex; flex-wrap: nowrap; align-items: center;}
.feat1 > div {width: 50%;}
.feat1 h2 {display:inline-block; font-size: 36px; font-weight: normal; margin:0 0 12px 0;}
.feat1 a {display:inline-block; border: 1px solid #ffae00; background-color: rgba(255,174,0,0.1); padding: 10px 14px; text-decoration: none; text-transform: uppercase; transition: all 0.6s;}
.feat1 a:hover {background-color: rgba(255,174,0,0.3);}

.block1 {background:#1a0056; background-image: url('images/bg-film.png'); background-repeat: no-repeat; background-position: left; padding: 1px;}
.block1 h2 {font-size: 36px; font-weight: normal;}
.block1 h2:first-child {margin-top: 0;}

.block2 {background: #100f3e; padding: 1px;}
.block2 h2 {font-size: 36px; font-weight: normal;} 

.partners {display: flex; flex-wrap: wrap; justify-content: left; margin-left: -18px;}
.partners div {width: 16.666%; padding: 18px;}

.but1 {display:inline-block; border: 1px solid var(--secondary); color:var(--secondary); background-color: var(--primary); padding: 10px 40px; text-decoration: none; text-transform: uppercase; transition: all 0.6s; border-radius: 24px;}
.but1:hover {background-color: var(--secondary); color: #fff;}

.liner {width:100%; height:7px; margin-top: 8px; border-radius: 18px; background: linear-gradient(288deg, #019934, #019934, #ffffff, #019934, #019934); background-size: 200% 200%; -webkit-animation: gradmove 8s ease infinite; -moz-animation: gradmove 8s ease infinite; -o-animation: gradmove 8s ease infinite; animation: gradmove 8s ease infinite;}
    
@-webkit-keyframes gradmove {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@-moz-keyframes gradmove {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@-o-keyframes gradmove {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@keyframes gradmove {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}

.logo {max-width: 100%; height: auto;}


.nav-main ul {margin: 0; padding: 0; list-style: none;}
.nav-main li {display: block;}
.nav-main a {font-family: "Tourney", sans-serif; text-transform: uppercase; border-radius: 18px;
    font-size: 38px;
    text-align: center;
    color: #fff;
    display: block;
    padding: 6px 0;
    font-weight: 500;
    font-style: oblique;
    text-decoration: none;
    background: var(--primary);
    margin: 18px 0;
    padding: 18px; outline: 3px solid var(--secondary); outline-offset: -12px; transition: all 0.5s;}
.nav-main a:hover {background: var(--secondary); outline: 3px solid #fff;}


.nav-master a {display: block; position: relative; padding: 18px 4px 12px 4px; margin: 0 8px; color: #fff; text-shadow: none; transition: color 0.3s; text-decoration: none;}
.nav-master a::after { position: absolute; left: 50%; margin-left:-15px; width: 30px; height: 2px; background: #ffae00; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); }
.nav-master a::after {bottom: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px);}
.nav-master a:hover,.nav-master a:focus {color: #ffae00;}
.nav-master a:hover::before,.nav-master a:focus::before,.nav-master a:hover::after,.nav-master a:focus::after {opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px);transform: translateY(0px); }

.nav-master > ul > li {position: relative;}
.nav-master > ul {position: relative;}
.nav-master li:hover > ul {display: inline-block; font-size: 14px; width: 250px; visibility: visible; opacity: 1; z-index: 1; -webkit-transform:translateY(0%); -ms-transform:translateY(0%); transform: translateY(0%); transition-delay: 0s, 0s, 300ms;}
.nav-master li ul li {display:block;}
.nav-master > ul > li > ul {width: 250px; top: 58px; left:0px; background: #333; padding: 16px 4px; font-size: 14px; text-align:left; visibility: hidden; opacity: 0; position: absolute; -webkit-transform:translateY(-2em); -ms-transform:translateY(-2em); transform: translateY(-2em); z-index: 100; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;}
.nav-master > ul > li > ul > li.current-menu-item > a {font-weight: bold;}
.nav-master .menu-item-has-children a {display: inline-block; padding-right: 30px;}
.nav-master .menu-item-has-children:before {content: "\f078"; font-family: FontAwesome; font-size: 12px; display: inline-block; width: 1.3em; color: #ffae00; position: absolute; right: 10px; top: 50%; margin-top: 2px; transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%);}

.nav-footer {margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--secondary); font-size: 16px;}
.nav-footer ul {margin: 0; padding: 0; list-style: none;}
.nav-footer li {display: inline-block;}
.nav-footer a {margin-right: 12px; text-decoration: none; transition: color 0.3s;}
.nav-footer a:hover {color:#ffae00;}


.page-id-8 .nav-master li {opacity: 0;}
.page-id-8 .nav-master li ul li {opacity: 100;}


.page-id-15 #gallery-2 .gallery-item {width: 24% !important; margin: 1.33% 1.33% 1.33% 0; overflow:hidden;}
.page-id-15 #gallery-2 .gallery-item:nth-child(5n+4) {margin-right:0;}
.page-id-15 #gallery-2 img {border: 0px !important; max-width: 100%; width: 100%; height: auto; transition: all 0.6s; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity:0.8;}
.page-id-15 #gallery-2 img:hover {-webkit-filter: grayscale(0%); filter: grayscale(0%); transform: scale(1.1); opacity:1.0;}
.page-id-15 .gallery-caption {display:none;}

.gallery {margin-top: 36px !important;}
.gallery .gallery-item {width: 48% !important; margin: 2% 2% 2% 0; overflow:hidden; max-height: 400px;}
.gallery {margin-top: 36px;}
.gallery img {border: 0px !important; max-width: 100%; width: 100%; height: auto; transition: all 0.6s;}
.gallery img:hover {transform: scale(1.1);}
.gallery-caption {display:none;}




.developer {font-size: 12px; margin-top: 4px;}

.txtl {text-align: left;}
.txtc {text-align: center;}
.txtr {text-align: right;}

img.aligncenter {display:block; margin:auto;}


.form {margin-top: 60px; text-align: center;}
.form-col {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;}

.form input[type=text], .form input[type=email], .form input[type=tel],  .form textarea, .form select {background: rgba(255, 255, 255, 0.6); border: none; transition: all 0.3s; width: 100%; padding: .4em; margin: 0; display: inline-block; border: 0.063em solid #ccc; border-radius: 0.250em; vertical-align: middle; font-size: 1.000em;}
.form label {margin: 0 0 4px 0; display:block; text-align: left;}
.form input[type=submit] {background-color: var(--primary); border-radius: 24px; font-size: 18px; padding: 12px 28px 12px 28px; border: 2px solid var(--secondary); text-decoration: none; color: #fff; cursor: pointer; margin: 40px auto 18px auto; display: inline-block; transition: all 0.3s; text-transform: uppercase;}
.form input:hover[type=submit] {background-color: var(--secondary);}
.form input:focus, .form textarea:focus, .form-service select:focus {background: white;}
.form .wpcf7-spinner {display: none;}

.social-mobile:before {content:""; display:block; width:100%; height:7px; margin-bottom: 24px; border-radius: 18px; background: linear-gradient(288deg, #ffae00, #ffae00, #ffffff, #ffae00, #ffae00); background-size: 200% 200%; -webkit-animation: gradmove 8s ease infinite; -moz-animation: gradmove 8s ease infinite; -o-animation: gradmove 8s ease infinite; animation: gradmove 8s ease infinite;}}
.social-mobile {text-align: center; padding-top: 18px;}
.social-mobile a {display: inline-block !important; padding:0 !important;}
.social-mobile i {font-size: 42px !important;}

.grecaptcha-badge {display: none !important;}


@media only screen and (max-width:1700px) {

.row1 > div {width: 20%;}
.banner,.subpage {height: 600px;}

}

@media only screen and (max-width:1600px) {
    .nav-main {margin-top: 175px;}
    .headrow {grid-template-columns: 240px 1fr min-content;}
    .blocklogo {padding: 10px 20px 10px 0;}

.container {max-width: 1050px;}
.row1 > div {margin: 48px;}
.banner h1 {font-size: 46px; width: 520px;}
.banner h2 {font-size: 24px; width: 520px;}
}


@media only screen and (max-width:1350px) {

.row1 > div {margin: 28px;}
.banner,.subpage {padding: 100px; height: 600px;}
    
}


@media only screen and (max-width:1280px) {

:root {
--con1: 100%;
}

.blocklogo {padding: 10px 20px 10px 20px;}
.blocknav {padding: 20px;}
.mobilecon {left:0;}

body {font-size: 16px}
.container {max-width: 850px;}
.feat1 h2 {font-size: 28px;}
.pad1 {padding: 0; margin: 60px auto;}
.pad2 {padding: 0 36px 80px 0;}
.pad3 {padding: 0 0 80px 36px }

.banner, .subpage {height: 525px;}

    
}
    
@media only screen and (max-width:950px) {

.header1 {background: rgb(34,34,34); background: linear-gradient(180deg, rgba(34,34,34,1) 0%, rgba(34,34,34,0) 0%);}

.row1 {display: block; height: 200px;}
.row1 > div {width: 100%; margin: 0px;}
.nav-master, .logo, .social1 {display: none;}

.row2 {flex-wrap: wrap-reverse;}
.row2 > div {width: 100%;}
.row2 > div:nth-of-type(even) {padding-bottom: 36px;}


.banner {padding: 24px; height: 430px; margin-top: 50px;}
.banner h1 {font-size: 24px; width: 80%;}
.banner h2 {font-size: 18px; width: 80%;}
.subpage {padding: 24px; height: 250px;}
.subpage h1 {font-size: 24px; padding: 18px;}


.feat1:nth-of-type(even) {flex-wrap: wrap;}
.feat1:nth-of-type(odd) {flex-wrap: wrap-reverse;}
.feat1 > div {width: 100% !important;}
.feat1 h2 {font-size: 24px; margin:-12px 0 12px 0;}

.partners {margin-left: 0px;}
.partners div {width: 50%; padding: 18px;}

.block1 {background-image: none;}
.block1 h2 {font-size: 24px;}

.pad1 {padding: 0px 24px;}
.pad2 {padding: 0px 24px 42px 24px;}
.pad3 {padding: 0px 24px 42px 24px;}

.sub-container {padding: 0 24px;}
.video1,.video2 {margin-top: 50px;}
.videoban {padding:0 !important; margin-top:0 !important;}
.mobilecon {padding: 50px; height: 100%;}

}


@media only screen and (max-width:700px) {

    .video-con {border-radius: 0;}
        .video1{ margin-top: 115px;}
        .video2 {margin-top:0; width: 130%;}
        .videoban {margin-top: 115px !important;}
            .banner {height: 300px; margin-top: 115px; border-radius: 0; 
        background-size: 130%;}
        .col2 {grid-template-columns: 1fr; margin: 40px auto;}
        .blocknav {grid-template-columns: max-content 1fr; padding: 30px 18px 18px 0;}
        .blocknav .but1 {padding: 10px 18px;}
        .pad1 {margin: 40px auto;}
        .pad2 {margin: 40px auto;}
        .pad3 {padding: 0 24px;}
        .alt div:first-child {order: 2;}

        .header1 {    background: #222222;
    border-bottom: 3px solid #019934;}
    .headrow {height: auto; grid-template-columns: 160px 1fr min-content;}
    .blocklogo {    background: transparent;
    padding: 10px;}
    .blocklogo img {max-height: 100px; width: auto;}
    .sub-container {padding:0;}
    .form-col {grid-template-columns: 1fr;}
    .mobilecon {
        padding: 115px 70px;
        height: 100%;}
        .mobilerows {display:block;}
        .nav-main {margin-top:0; margin-bottom: 24px;}
        .nav-main a {font-size: 24px;}
        .mobilerows {gap: 24px;}

}

@media only screen and (max-width:360px) {
.blocknav {gap: 12px;}
.blocknav .but1 {padding: 10px 16px;}
}