/*
Starts With ABC - contact Page Styles
Author: Jonathan Ferragut
Company: Alkemy, Inc.
*/


/* Page */

.wrap{
    max-width: 1920px;
    margin: 0 auto;
}

@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {
    * {
        -webkit-overflow-scrolling: touch;
    }
}

.page--contact .wrap p,
.page--contact .wrap h2,
.page--contact .wrap h3,
.page--contact .wrap h4,
.page--contact .wrap h5,
.page--contact .wrap li,
.page--contact .wrap form textarea{
    font-family: 'Lato',sans-serif;
}

.page--contact .subheader--title {
    transform: none;
}

.page--contact .wrap .contact--hero>div>h2,
.page--contact .wrap .contact--hero>div>p {
    font-family: 'Montserrat';
    font-weight: normal;
}

.widget--questions i,
.widget--questions p,
.page--contact .wrap .contact--hero>div>h2,
.page--contact .wrap .contact--hero>div>p
{
    color: white;
}

.page--contact .wrap .contact--hero .widget--questions i{
    font-size: 3.875rem;
}
.page--contact .wrap .contact--hero .widget--questions p{
    font-size: 1.375rem;
}

@media screen and (min-width: 768px) {
    .widget--questions .row>div:not(:last-of-type) {
        border-color: white;
    }
}

.page--contact .wrap .contact--hero h2 {
    font-size: 3.5rem;
    line-height: 5rem;
}

.page--contact .wrap h2 {
    font-size: 2.875rem;
    line-height: 3.875rem;
}

.page--contact .wrap .contact--hero p {
    font-size: 2rem;
    line-height: 3.125rem;
}

.page--contact .wrap h3 {
    font-size: 2rem;
    line-height: 3rem;
}

.page--contact .wrap p {
    font-size: 1.125rem;
    line-height: 2.25rem;
}

/* Navs */

.nav--breakdown{
    font-size: 1rem;
}

.nav--breakdown>li>a{
    padding: .25em .75em;
}

.nav--breakdown>li:not(:last-of-type) {
    border-right: 1px solid black;
}

.nav--breakdown>li>a.active{
    font-weight: bold;
    color: black;
}

.nav--breakdown>li>a{
    color: var(--secondary);
}


/* Color */

.list--green li::before{
    color: rgb(var(--main-green));
}

.list--blue li::before{
    color: rgb(var(--main-blue));
}

.list--white li::before{
    color: white;
}

/* Buttons */

.page--contact .btn.btn-primary-contact,
.page--contact .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-button {
    font-family: 'Montserrat';
    font-weight: normal;
    font-size: 1.2rem;
    background-color: rgb(var(--main-green));
    border-color: rgb(var(--main-green));
    color: black;
    padding: 10px 40px;
    line-height: 1.5;
    transition: .35s ease-in-out;
}

.page--contact .btn.btn-primary-contact:hover,
.page--contact .ctct-form-embed.form_1 .ctct-form-custom .ctct-form-button:hover {
    color: white;
    background-color: rgb(var(--main-blue));
    border-color: white;
    transform: scale(1.05);
    box-shadow: none;
}

/* Form */

.page--contact form {
    padding: 3.25rem 2.5rem;
    width: 100%;
    max-width: 830px;
    border: 1px solid #aaa;
    background: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.page--contact form input{
    margin-bottom: 1rem;
}
.page--contact form textarea {
    margin-bottom: 1.5rem;
}



.page--contact form input[type="text"],
.page--contact form input[type="phone"],
.page--contact form input[type="email"],
.page--contact form textarea {
    border-radius: 0;
    padding: 1.35rem 1rem;
    font-size: 1.125rem;
}

.page--contact .contact--hero form>.row>div>input[type="button"] {
    padding: 1rem 5rem;
    width: 100%;
    cursor: pointer;
    background: rgb(var(--main-green));
    color: white;
    border-radius: 6px;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.125rem;
    height: auto;
    letter-spacing: -0.015em;
}

@media screen and (min-width: 768px) {
    .page--contact form button[type="submit"] {
        cursor: pointer;
        padding: .75rem 8rem;
        background: rgb(var(--main-green));
        color: white;
        border-radius: 6px;
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        font-size: 1.125rem;
        line-height: 1.125rem;
        letter-spacing: -0.015em;
    }
}


/* Containers */

.page--contact .container-fluid {
    padding-left: 30px;
    padding-right: 30px;
}

/* Sections */

.page--contact section:not(.contact--hero){
    margin: 8rem 0;
}

.contact--hero{
    background: url('../images/climb-with-help.jpg') center no-repeat;
    background-size: cover;
    background-attachment: local;
    position: relative;
}

@media screen and (min-width: 990px){
    .contact--hero {
        background-attachment: fixed;
    }
}
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1),
(min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .contact--hero {
        background-attachment: local;
    }
}

@media screen and (min-width: 412px) and (max-width: 599px) {
    .contact--hero {
        background-position-x: -45rem;
    }
}

@media screen and (max-width: 411px) {
    .contact--hero {
        background-position-x: -50rem;
    }
}

.contact--hero > div {
    z-index: 10;
    position: relative;
    padding: 5rem 0;
}

.contact--hero>div>h2,
.contact--hero>div>h3,
.contact--hero>div>p,
.contact--hero>div.row>div>h2,
.contact--hero>div.row>div>h3,
.contact--hero>div.row>div>p{
    color: white;
    text-shadow: 1px 1px 1px gray;
}


.contact--hero::after{
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: linear-gradient(to right,rgba(0,0,0,.75), transparent);
}

.contact--map h2{
    color: black;
    font-weight: bold;
    font-size: 3.5rem;
}

.contact--map address,
div.abc--social>div.row>div>p {
    font-size: 2rem;
    line-height: 3.125rem;
}

.abc--social i.fa-facebook-square{
    font-size: 2.875rem;
    line-height: 50px;
    letter-spacing: -0.015em;
    color: #3B5998;
}


.abc--social i.fa-instagram{
    font-size: 2.875rem;
    line-height: 50px;
    letter-spacing: -0.015em;
}

@media screen and (max-width: 990px){
    .abc--social svg{
        font-size: 2.875rem;
    }
    .abc--social p>a{
        font-size: 2rem;
        display: inline-block;
    }
}

.abc--social i.fa-instagram::before{
    background-image: url('../images/instagram-icon-color-12.jpg');
    background-position: center;
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}