/*!
Theme Name: willarong
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
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: willarong
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.

willarong 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/
*/

@font-face {
        font-family: 'Gilroy-Bold';
        src: url('assets/fonts/gilroy-bold/Gilroy-Bold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Gilroy-Regular';
        src: url('assets/fonts/gilroy-bold/Gilroy-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }


    @font-face {
        font-family: 'SFPRODISPLAYREGULAR';
        src: url('assets/fonts/sf-pro-display/assets/fonts/sf-pro-display/SFPRODISPLAYREGULAR.OTF') format('opentype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    body {
        overflow-x: hidden;
    }

    body.mainContent {
        font-family: 'SFPRODISPLAYREGULAR', sans-serif;
    }

    .headerTitle {
        text-transform: uppercase;
        font-size: 4rem;
        color: #000000;
        margin-bottom: 1rem;
        font-family: 'Gilroy-Bold', sans-serif;
    }

    .MainWrapper {
        display: flex;
        align-items: center;
        background-color: #ffffff;
    }
    
    .page-template-t-home .MainWrapper {
        height: 98.2vh;
    }

    .column {
        width: 50%;
    }

    .contentRight {
        height: 100%;
        background: url('Images/The Willarong_LG_Source.jpg') center center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #000000;
    }
    
    
    .page-template-t-work-with-us .contentRight,
    .page-template-t-default-page .contentRight{
        height: 100vh;
        position: fixed;
        right: 0;
        top: 0;
    }

    .contentLeftContentWrapper {
        padding-left: 9rem;
        padding-right: 9rem;
        color: #000000;
    }

    .contentLeftContentWrapper p {
        font-size: 1.1rem;
        font-weight: 300;
        margin-bottom: 4rem;
        line-height: 1.4rem;
    }
    
    .page-template-t-default-page .contentLeftContentWrapper p {
        font-size: 1rem;
        margin-bottom: 0.5em;
        margin-top: 0;
    }
    
    .page-template-t-work-with-us .contentLeftContentWrapper p{
        font-size: 1rem;
    }

    body:not(.page-template-t-default-page) .contentLeftContentWrapper a {
        font-size: 1.1rem;
        color: #000000;
        text-decoration: none;
        border: 2px solid #000000;
        padding: 10px 15px;
        font-weight: 600;
        font-family: 'Gilroy-Regular', sans-serif;
    }

    body:not(.page-template-t-default-page) .contentLeftContentWrapper a:hover {
        color: #4a5a40;
        background-color: #ffffff;
        -webkit-transition: 0.2s ease-out;
        -moz-transition: 0.4s ease-out;
        -o-transition: 0.4s ease-out;
        transition: 0.4s ease-out;
    }

    .contentRight img {
        width: 100%;
    }


    .navbar-toggler{
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: 99999;
    }

    .navbar-toggler-icon {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        content: "";
        background: no-repeat center center;
        background-size: 100% 100%;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

    .navbar-toggler:not(:disabled):not(.disabled) {
        cursor: pointer;
    }

    .navbar-toggler {
        outline: none !important;
        border: none;
    }

    .navbar-toggler {
        padding: .25rem .75rem;
        font-size: 1.25rem;
        line-height: 1;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: .25rem;
    }

    .navbar-dark .navbar-toggler {
        color: rgba(0, 0, 0, .5);
        border-color: rgba(0, 0, 0, .1);
    }
    
    .ts-side-panel {
        font-size: 90%;
        height: 100%;
        position: absolute;
        /* padding: 1.25rem; */
        overflow-y: scroll;
        right: 0;
        top: 0;
        width: 100%;
        transform: translateX(101%);
        transition: 1s cubic-bezier(.77, 0, .18, 1);
        z-index: 999;
        display: flex;
        height: 98.2vh;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .contact_wrapper {
        /*max-width: 500px;*/
        font-family: 'SFPRODISPLAYREGULAR', sans-serif;
        font-size: 1rem;
        letter-spacing: 0.3px;
    }
    
    .contact_wrapper label{
        
    }
    
    .contentLeftContentWrapper .buttonStyle {
      margin-top: 1rem;
      display: inline-block;
    }
    
    .wpcf7-form-control.wpcf7-submit.has-spinner.buttonStyle {
    	font-size: 1rem;
    	color: #000000;
    	text-decoration: none;
    	border: 1px solid #ffffff;
    	padding: 10px 15px;
    	font-weight: 600;
    	font-family: 'Gilroy-Regular', sans-serif;
    	cursor: pointer;
    	background: rgba(255,255,255, 0.8);
    	border-radius: 5px;
    }
    
    .page-template-t-work-with-us .wpcf7-form-control.wpcf7-submit.has-spinner.buttonStyle {
        border: 1px solid #000000;
        background: rgba(0,0,0, 0.8);
        color: #fff;
    }

    body.ts-side-panel-active .ts-side-panel {
        transform: translateX(0%);
    }

    .MainWrapper{
        transition: 1s cubic-bezier(.77, 0, .18, 1);
    }
    .col-1{
        padding-bottom: 1px;
    }
    
    .col-2.flex {
        display: flex;
        /*gap: 15px;*/
        gap: 2%;
        flex-wrap: wrap;
    }
    .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-date {
    	width: 100%;
    	padding: 10px;
    	border: 1px solid #ffffff;
    	border-radius: 5px;
    	background-color: rgba(255,255,255, 0.8);
    	margin-top: 10px;
    }
    
    .wpcf7-form-control{
        box-sizing: border-box;
    }
    
    .wpcf7-form-control.wpcf7-textarea {
        width: 100%;
        padding: 10px;
    	border: 1px solid #ffffff;
    	border-radius: 5px;
    	background-color: rgba(255,255,255, 0.8);
    	margin-top: 10px;
    }
    
    .page-template-t-work-with-us p{
        margin-bottom: 1rem;
    }
    
    .page-template-t-work-with-us .wpcf7-form-control.wpcf7-text,
    .page-template-t-work-with-us .wpcf7-form-control.wpcf7-textarea,
    .page-template-t-work-with-us .wpcf7-date {
        border: 1px solid #ced4da;
        background-color: RGB(248, 249, 250);
    }
    
    .col-2.flex .col-6 {
        width: 49%;
    }
    
    .col-4.flex {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    
    .col-3.flex {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .wpcf7-form-control.wpcf7-file {
        margin-top: 0.7rem;
    }
    
    .wpcf7-form-control.wpcf7-radio{
        display: block;
        padding-top: 0.5rem;
    }
    
    .col-1.radio p {
      margin-bottom: 0.3rem;
    }
    
    .mobile-only {
        display: none;
    }
    
    .wpcf7-form h3{
        margin-top: 2rem;
        margin-bottom: 0;
        font-family: 'Gilroy-Bold', sans-serif;
        letter-spacing: 1px;
    }
    @media (min-width: 75rem) {

        body.ts-side-panel-active .MainWrapper {
            transform: translateX(-50%);
        }

        .ts-side-panel {
            /* padding: 2rem; */
            margin: 8px;
            width: 49.1%;
        }
    }
    

    @media(max-width: 1440px) {
        .contentLeftContentWrapper {
            padding-left: 5rem;
            padding-right: 5rem;
        }
    }

    @media(max-width: 1280px) {
        .headerTitle {
            font-size: 3rem;
        }

        .contentLeftContentWrapper p {
            font-size: 1.1rem;
        }
        .page-template-t-work-with-us .contentLeftContentWrapper p{
            font-size: 1rem;
        }

        .contentLeftContentWrapper a {
            font-size: 1.3rem;
        }
    }

    @media(max-width: 806px) {
        .page-template-t-home .contentLeftContentWrapper {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        
        .contentLeftContentWrapper{
            padding-left: 0;
            padding-right: 0;
        }

        .headerTitle {
            font-size: 2rem;
        }

        .page-template-t-home .contentLeftContentWrapper p {
            font-size: 1.1rem;
            margin-bottom: 3rem;
        }
        
        .contentLeftContentWrapper p {
            font-size: 1rem;
            margin-bottom: 1rem;
        }
        
        .page-template-t-work-with-us .contentLeftContentWrapper p{
            font-size: 1rem;
        }

        .contentLeftContentWrapper a {
            font-size: 1rem;
        }
    }

    @media(max-width: 768px) {
        .mobile-only {
            display: block;
            margin-bottom: 1.5rem;
        }
        
        .desktop-only {
            display: none;
        }
        
        .MainWrapper {
            display: flex;
            flex-wrap: wrap;
            
            flex-direction: column-reverse;
        }
        
        .page-template-t-home .MainWrapper {
            height: 98.2vh;
        }
        
        .page-template-t-work-with-us .MainWrapper, 
        .page-template-t-default-page .MainWrapper{
            display: block;
        }
        
        .col-4.flex {
          grid-template-columns: repeat(2, 1fr);
        }
        
        .col-3.flex {
          grid-template-columns: repeat(2, 1fr);
        }
        
        

        .page-template-t-home .column.imageSec {
            height: 30%;
        }
        
        .page-template-t-home .column.content {
            height: 70%;
        }
        
        .column {
            width: 100%;
        }
        
        .page-template-t-work-with-us .contentRight,
        .page-template-t-default-page .contentRight{
            height: 20vh;
            position: relative;
            /*right: 0;*/
            /*top: 0;*/
        }
        
        /*.page-template-t-work-with-us .column {*/
        /*    height: auto;*/
        /*}*/

        .ContentLeft.column {
            display: flex;
            align-items: center;
        }
        
        .page-template-t-work-with-us .ContentLeft.column {
            display: block;
        }

        .contentLeftContentWrapper {
            width: 100%;
            text-align: center;
        }
        
        .page-template-t-work-with-us .contentLeftContentWrapper,
        .privacy-policy .contentLeftContentWrapper{
            text-align: left;
        }
        
        .col-1.txtarea p {
          margin-bottom: 0;
        }
        
        .col-1.radio p {
          margin-bottom: 0;
        }

    }
    
    @media (max-width: 664px) {
        .navbar-toggler {
            top: 1rem;
            right: 1rem;
        }
        
        .col-2.flex{
            display: block;
        }
        
        .ts-side-panel{
            height: 100%;
        }
        
        .col-4.flex {
          grid-template-columns: repeat(1, 1fr);
          gap: 0;
        }
        
        .col-3.flex {
          grid-template-columns: repeat(1, 1fr);
          gap: 0;
        }
        
        .col-4.flex p, .col-3.flex p{
            margin-bottom: 0;
        }
        
        .col-2.flex .col-6 {
            width: 100%;
        }
    }
    
    @media (max-width: 375px) {

        .headerTitle {
            font-size: 1.8rem;
            margin-top: 0px;
        }

        .contentLeftContentWrapper p {
            font-size: 1rem;
        }
    }
    
    @media (max-width: 350px) {
        .page-template-t-home .column.imageSec {
            height: 20%;
         }
        .page-template-t-home .column.content {
            height: 80%;
        }
    }