@import url(../variables/colorVariables.css);
@import url(../variables/variables.css);

:root {

}


#contact-us-container{
    height: auto;
    width: 62%;
    padding: var(--pages-main-padding);
}

#contact-us{
    height: 100%;
    box-shadow: var(--default-shadow);
    border-radius: var(--default-border-radius);
    border: 1px solid var(--default-border-color);
}

#contact-us #contact-email {
    font-size: 55px;
}


.facebook-container, .youtube-container{
    cursor: pointer;
    box-shadow: var(--default-shadow);
    border-radius: var(--full-radius);
    border: 1px solid var(--default-border-color);
    width: 270px;
    height: 55px;
    text-decoration: none;
    /*padding: ;*/
}

.facebook-container{
    color: #39599F;
    font-size: 40px;
}

.youtube-container {
    color: #FF0000;
    font-size: 40px;
}

.facebook-container:hover, .youtube-container:hover{
    color: var(--site-primary);
}

/*input::placeholder, textarea::placeholder{*/
/*    color: var(--site-primary) !important;*/
/*}*/

@media screen and (min-width: 600px) and (max-width: 1100px) {
    #contact-us #contact-email {
        font-size: 45px;
    }

    #contact-us-container{
        width: 100%;
        padding: 15px 23px;
    }

    .socials-container{
        height: 150px;
    }

}

@media screen and (min-width: 0px) and (max-width: 600px) {

    #contact-us #contact-email {
        font-size: 40px;
    }


    #contact-us-container{
        width: 100%;
        padding: 15px 23px;
    }

    .socials-container{
        height: 150px;
    }


}

/* this part is regarding the height of the screen, and should not leave a certain height */
@media screen and (min-height: 0) and (max-height: 600px) {

}