@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500');

body {
    font-family: Montserrat, Verdana, sans-serif;
    font-weight: normal;
}   

h1 {
    /*font: normal 42px/40px Montserrat;*/
    font-size: 42px/40px;
    color: #303334;
}

h2 {
    /*font: normal 42px/40px Montserrat;*/
    font-size: 42px/40px;
    color: #303334;
}

h3 {
    /*font: normal 22px/28px Montserrat;*/
    font-size: 22px/28px;
    color: #333239;
}

h4 {
    /*font: normal 14px/20px Montserrat;*/
    font-size: 14px/20px;
    color: #333333;
}

h5 {
    /*font: normal 12px/18px Montserrat;*/
    font-size: 12px/18px;
    color: #333333;
}

h6 {
    /*font: normal 12px/18px Montserrat;*/
    font-size: 12px/18px;
    color: #333333;
}

.logo_h__txt, .logo_link {
    /*font: normal 40px/48px Montserrat;*/
    font-size: 40px/48px;
    color: #049CDB;
}

/*.sf-menu > li > a {
    font: normal 17px/24px Montserrat;
    color: #949398;
}*/

.nav.footer-nav a {
    /*font: normal 10px/18px Montserrat;*/
    font: 10px/18px;
    color: #818181;
}


/* The Modal (background) */
.modal1 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3500; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* The Modal (background) */
.modal2 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3500; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal2-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    max-width: 1024px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    border-radius: 15px 15px 15px 15px;
}


/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

/* The Close Button */
/* NEW Close Button */
.closeNew {
    z-index: 3510; /* Sit on top */
    color: dimgrey;
    float: right;
    font-size: 40px;
    font-weight: bold;
    padding: 10px 8px 10px 8px;
    border-radius: 25px 25px 25px 25px;
    border: solid 2px silver;
    background-color: #fefefe;
    position: relative;
    top: -20px;
    right: -20px;
}

/* The Close Button */
.close {
    z-index: 3510; /* Sit on top */
    color: dimgrey;
    float: right;
    font-size: 50px;
    font-weight: bold;
    padding: 10px 8px 10px 8px;
}

    .closeNew:hover,
    .closeNew:focus,
    .close:hover,
    .close:focus {
        z-index: 3510; /* Sit on top */
        color: #000000;
        text-decoration: none;
        cursor: pointer;
    }
/*
        .close {
          color: dimgrey;
          float: right;
          font-size: 40px;
          font-weight: bold;
        }

        .close:hover,
        .close:focus {
          color: #000000;
          text-decoration: none;
          cursor: pointer;
        }
         */
.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {
    padding: 2px 16px;
}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}


.modal-sidenavbar {
    background-color: transparent;
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
}

.icon-bar {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

    .icon-bar a {
        display: block;
        text-align: center;
        height: 60px;
        width: 60px;
        transition: all 0.3s ease;
        color: white;
        font-size: 20px;
        border-bottom: 1px solid gray;
    }

        .icon-bar a:hover {
            background-color: #000;
        }

.classContactImage {
    width: 100%;
}

@media (max-width: 569px) and (min-width: 1px) {

    /* Modal Content */
    .modal1 {
        padding-top: 10px; /* Location of the box */
    }

    .modal-content {
        width: 95%;
        height: 95%;
        max-height: 480px;
    }

    .modal2 {
        padding-top: 10px; /* Location of the box */
    }

    .modal2-content {
        width: 95%;
        height: 95%;
        max-height: 480px;
    }
}

@media (orientation: landscape) {

    @media (max-height: 500px) and (min-height: 1px) {

        /* Modal Content */
        .modal1 {
            padding-top: 10px; /* Location of the box */
        }

        .modal-content {
            width: 95%;
            max-height: 450px;
        }

        .modal2 {
            padding-top: 10px; /* Location of the box */
        }

        .modal2-content {
            width: 95%;
        }
    }
}




.responsive-iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.parallax-content {
    padding: 10px 0 0 0 !important;
}