@charset "UTF-8";
/* Contact Template */
@media only screen and (min-width:768px) and (orientation:portrait)
    {#page-body{font-size:3vh;}}

@media only screen and (max-width:768px) and (orientation:landscape)
    {#page-body{font-size:3.5vw;}}
@media only screen and (min-width:769px) and (max-width:1024px) and (orientation:landscape)
    {#page-body{font-size:2vw;}}
@media only screen and (min-width:1025px) and (max-width:1399px) and (orientation:landscape)
    {#page-body{font-size:2vw;}}
@media only screen and (min-width:1400px) and (max-width:1999px) and (orientation:landscape)
    {#page-body{font-size:1.8vw;}}
@media only screen and (min-width:2000px) and (orientation:landscape)
    {#page-body{font-size:1.6vw;}}

* {
    box-sizing: border-box; /**For flexbox**/
}
.background {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-content: center;
    width:100vw;
}
#page-wrapper{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 3vw auto;
}
#page-body{
    display:flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    width: 96vw;
}
@media only screen and (min-width:2000px) and (orientation: landscape)
    {#page-body{width:80vw;}}
@media only screen and (min-width:1400px) and (max-width:1999px) and (orientation: landscape)
    {#page-body{width:95rem;}}


#top-box {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom:5vw;
}
@media only screen and (min-width:1024px) and (orientation: landscape)
    {#top-box{flex-flow:row nowrap;height:calc(75vw * 0.46)}}


#left-column-image-box {
    position:relative;
    background: url(../Assets/contact/contact-headline.png) no-repeat center;
    background-size: cover;
    width:100%;
    height:calc(100vw * 0.46);
    border:0.2em solid #CCC;
}
@media only screen and (min-width:1024px) and (orientation: landscape)
    {#left-column-image-box{width:75%; height:100%;margin-right:1vw;}}
@media only screen and (max-width:768px) and (orientation:landscape)
    {#left-column-image-box{margin-bottom:2vw;}}

@media only screen and (orientation: portrait)
    {#left-column-image-box{margin-bottom:2vw;}}


#image-text{
    position:absolute;
    top:0;
    right:0;
    margin:2% 3% 0 0;
    font-size: 0.5em;
	color:#CCC;
	text-align: right;
	width:80%;
	line-height: 1.3em;
	display: none;
    font-weight:100;
}
@media only screen and (min-width:1025px) and (orientation:landscape)
    {#image-text{font-size:0.8em;}}


#header-box{
    width:100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: 24vw;
}
@media only screen and (min-width:1024px) and (orientation: landscape)
    {#header-box{width:25%;flex-flow: column nowrap;height:100%;}}


#header-image{
    width:24vw;
    height:100%;
    margin-right:2vw;
}
@media only screen and (min-width:1024px) and (orientation: landscape)
    {#header-image{flex: 1 1 50%;width:100%; height:25vw;margin-right:0;margin-bottom:1vw;}}


#header-label{
    display:flex;
    align-items: center;
    font-size: 2em;
    padding: 0 2% 0 4%;
    width:75%;
    height:100%;
    background-color:#e0e0e0;
}
@media only screen and (min-width:1024px) and (orientation: landscape)
    {#header-label{flex: 2 1 50%;padding:0 15%; width:100%;height:100%;text-align:center;}}

/*Contact button cluster************************************************************************/
#middle-box {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width:100%;
    margin-bottom: 5vw;
}
@media only screen and (min-width:1024px) and (orientation: landscape)
    {#middle-box{flex-flow:row nowrap;}}


.contact-info-box,
.contact-info-box-info-address,
.contact-info-box-info-hours{
    width:49%;
    aspect-ratio:1/1;
    background-color:transparent;
    margin-bottom:3vw;
}
@media only screen and (min-width:2000px) and (orientation:landscape)
    {.contact-info-box,.contact-info-box-info-address,.contact-info-box-info-hours {width: 25%; height: calc(78vw / 4);margin-right:1vw;margin-bottom:0;}}
@media only screen and (min-width:1400px) and (max-width:1900px) and (orientation:landscape)
    {.contact-info-box,.contact-info-box-info-address,.contact-info-box-info-hours {width: 25%; height: calc(93rem / 4);margin-right:1vw;margin-bottom:0;}
    #middle-box .contact-info-box:last-child{margin-right:0;}}
@media only screen and (min-width:1024px) and (max-width:1399px) and (orientation: landscape)
    {.contact-info-box,.contact-info-box-info-address,.contact-info-box-info-hours {width:24.5%; height: calc(95vw / 4);margin-right:1vw;margin-bottom:0;}
    #middle-box .contact-info-box:last-child{margin-right:0;}}


.flip-card-front{
    background:url('../Assets/contact/contact-hours.png') no-repeat 5% 5% ;background-size:65%;
}
.contact-info-box-info-address{
    background:url('../Assets/contact/contact-address.png') no-repeat 5% top;background-size:65%;
}
.contact-info-box.info-email{
    background:url("../Assets/contact/contact-email.png") no-repeat 5% top;background-size:65%;
}
.contact-info-box.info-telephone{
    background:url("../Assets/contact/contact-telephone.png") no-repeat 5% top;background-size:65%;
}
.contact-info-box-text{
    position:absolute;
    bottom:0;
    right:0;
    height:35%;
    width:100%;
    text-align:right;
    padding: 0 5% 8% 3%;
    font-size:1em;
    display:flex;
    flex-flow:column nowrap;
    justify-content: space-between;
}
.info-hours-line1{padding-top:0.5em;}
.info-hours-line2{font-size:150%}
.info-email-line1{font-size:75%;padding-top:6%;}
.info-email-line2{color:#646464}
.info-telephone{font-size:100%;padding-top:2%;}
.info-address{font-size:80%;}
@media only screen and (max-width:768px){
    .info-hours-line1{padding-top:0.2em}
    .info-hours-line2{font-size:110%}
    .info-address{font-size:65%;}
    .info-email-line1{font-size:61%;}
    .info-email-line2{font-size:61% !important;}  
}

.contact-info-box-info-address,
.contact-info-box.info-email,
.contact-info-box.info-telephone{
    position:relative;
}
.contact-info-box-info-address:hover,
.contact-info-box.info-email:hover,
.contact-info-box.info-telephone:hover,
.contact-info-box-info-address:active,
.contact-info-box.info-email:active,
.contact-info-box.info-telephone:active{
    background-color:rgba(146,146,146,0.5);transition:1s;
}
.box-text-hover{
    color:#ffffff;
    font-size:0.8em;
}
.contact-info-box-info-address:hover .box-text-hover,
.contact-info-box.info-email:hover .box-text-hover,
.contact-info-box.info-telephone:hover .box-text-hover,
.contact-info-box-info-address:active .box-text-hover,
.contact-info-box.info-email:active .box-text-hover,
.contact-info-box.info-telephone:active .box-text-hover{
    transition:1s;
}
.contact-flip-card-inner{
    position:relative;
    width:100%;
    height:100%;
    transition:1s;
    transform-style: preserve-3d;
    
}
.contact-flip-card-inner.flip{
    transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back{
    position:absolute;
    width:100%;
    height:100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-card-back{
    background-color:#929292;
    color:#ffffff;
    transform: rotateY(180deg);
    padding: 7% 7%;
    font-size:0.85em;
}
@media only screen and (max-width:768px) and (orientation:landscape)
    {.flip-card-back{font-size:1em;}}

/*Email Box*************************************************************/
#contact-email-banner{
    width:100%;
    margin:2vw 0;
    font-size:1.2em;
    color:#696969;
    padding: 1% 4%;
}
#contact-parent-box{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width:100%;
    margin-bottom:3vw;
}
form {
    font-size: 1em;
    color:#696969;
}
@media only screen and (min-width:768px) and (orientation:portrait)
    {form {font-size:0.8em;}}

@media only screen and (max-width:1024px) and (orientation:landscape)
    {form {font-size:0.6em;}}
@media only screen and (min-width:1025px) and (orientation:landscape)
    {form {font-size:0.8em;}}

.contact-email-box{
    background-color:#e0e0e0;
    padding:2% 4% 3% 4%;
    height: 100%;
    margin-bottom: 1vw;
}
.contact-email-box.active{
    transition: 1.2s ease-out;
    background-color:#939393;
    color:#ffffff;
}

.grecaptcha-badge {visibility: hidden;margin-top:-60px;}

.contact-email-box a{color:#696969 !important;}

.contact-mail-buttons{
    margin-top:0.5em;
    display:flex;
    justify-content: space-between;
    column-gap:5%;
    flex-flow:row wrap;
}
.contact-mail-buttons > * {flex:1 100%;}
.contact-mail-buttons input{flex:1 0 0;}

input, 
textarea{
    width: 100%;
    font-size: 1em;
}
::placeholder {
    color:#9D9899;
    font-style: italic;
}
input[type='button'],
input[type='submit'],
input[type='reset'] {
    border: none;
    color: white;
    padding: 1.3% 2%;
    text-decoration: none;
    cursor: pointer;
    font-size:1em;
    /*width: 30%;*/
    height: 3em;
}
input[type='text'], 
input[type='tel'], 
input[type='email'],
textarea
{
    border:none;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus{
    border: 1px solid #888;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/*@media only screen and (max-width:768px) and (orientation:portrait){
    input[type=button],
    input[type=submit],
    input[type=reset]{width:40%;height:150%;}
}*/
input, 
textarea,
input[type='button'],
input[type='submit'],
input[type='reset'],
input[type='text'], 
input[type='tel'], 
input[type='email'],
::placeholder{
    font-family: "Lato";
}