﻿

/*CONTACT PAGE STYLES*/

/*.contactPanelBG2 { background-image: url('../Images/contentPanelBG.jpg'); height:700px; margin-bottom:60px; }*/
.contactPanelBG2 h1 { color: #f7941e; font-family:Orbitron; }

.contactPanelBG2 .contactAddress p { color: #fff; font-family: Arial; }
.contactPanelBG2 .contactAddress a { color: #fff; font-family: Arial; text-decoration: none; }






.contactAddress { text-align: left; max-width: 100%; padding-left: 0%; }
    .contactAddress a { font-size: 22px; font-family: MicroFLF-Bold; }

.contactMap { position: relative; padding-bottom: 80%; margin: 5% auto 10% auto; height: 0; overflow: hidden; }
    .contactMap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

.contactForm { float: right; padding-right: 0%; }
    .contactForm td { padding-right: 5px; padding-bottom:5px; padding-left:5px; font-weight:bold; }
        .contactForm input, textarea { width:118%; background-color:#f7941e ; color:#fff }
            .contactForm textarea:active { color:#000; background-color:#fff }
            .contactForm input:active { background-color:#fff; color:#000;}
            .contactForm input:hover{ background-color:#fff; color:#000}
            .contactForm textarea:hover { color:#000; background-color:#fff }
        input { height: 30px; }
            .contactForm table tbody tr:nth-of-type(6) td { text-indent:11%; }
                .contactForm table tbody tr:nth-of-type(6) td textarea { width:111%; }
        .contactForm > div > span:nth-of-type(1) {position:relative; left:10%; top:-8px; color:#fff;}

        .contactForm > div > span:nth-of-type(2) { position: relative; left: 10%; color:#fff; }
        .contactForm > div > table:nth-of-type(2) {width:112%;  }
            .contactForm > div > table:nth-of-type(2) tr td:nth-of-type(1) { padding-left:0; text-align:left;}
                .contactForm > div > table:nth-of-type(2) tr td:nth-of-type(1) img {height:28px; }
            .contactForm > div > table:nth-of-type(2) tr td:nth-of-type(2) {text-align:left; }
            .contactForm > div > table:nth-of-type(2) tr td:nth-of-type(3) input { width:100%;}


    
td, th { color: #fff; }
input, button, select { color: #000; font-weight:normal; }
.row.fade.address { padding-top: 70px; padding-left:5%; padding-right:5%;  }
    .row.fade.address > div {padding:0;}









@media screen and (max-width: 1440px) {
    .contactPanelBG2 h1 { font-size: 16px; }
    .contactPanelBG2 .contactMap iframe { width: 400px; height: 280px; }
}

@media screen and (max-width:1024px){
    .contactForm input, textarea { width:100%; }
}

@media (max-width:991px) {

    .marginMax h1 { padding-top: 12%; margin: 0 auto; text-align: center; max-width: 96%; font-size: 28px; }
    .contactAddress { text-align: center; padding-bottom: 4%; padding-left: 0; width: 100%; }
        .contactAddress a { font-size: 16px; }
        .contactAddress h1 { font-size: 3.5vw; width: 100%; }

    .row { text-align: justify; }

    .contactMap { margin-top: 10%; margin-left: 20%; padding-bottom: 0; }
    .row > div {padding:0;}

    .contactForm { padding-right: 0; text-align: center; float: none; align-items: center; justify-content: center; }

        .contactForm table { width: 80%; display: table; 
margin: 1% auto;
    text-align: center;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 10px;
    display: table;
    justify-content: center;
    align-items: center;
        }
        .contactForm table tbody tr:nth-of-type(6) td textarea {
    width: 100%;
}
            .contactForm table tbody tr { width: 100%; text-align: left;  display:table;}
        .contactForm > div > span:nth-of-type(2) { left: 0%; }
        .contactForm td { padding-top: 5px; font-size: 14px; font-family: Helvetica, sans-serif; min-width:100px;  }
    input, button, select, textarea { width: 90%; }


    .contactForm > div > span:nth-of-type(1) { left:0; }

    .contactForm > div > table:nth-of-type(2) { width:100%; }
    .contactForm table:nth-of-type(2) tbody tr td:nth-of-type(1) { padding-top: 7px; padding-right: 20px; }
    .contactForm table:nth-of-type(2) tbody tr td:nth-of-type(2) input { width: 60px !important; margin-bottom: 0 !important; }
    .contactForm table:nth-of-type(2) tbody tr td:nth-of-type(3) { width: 72px; }

    .contactPanelBG2 .contactMap {
    position:relative;
    width: 60%;
    margin-top: 10%;
    padding-bottom: 50%;
    margin: 5% auto 10% auto;
    overflow: hidden;
}


        /*.contactPanelBG2 .contactMap iframe { width: auto; height: 300px; }*/

    .contactPanelBG2 .contactForm { float: left; margin-top: 98px; width: 100%; color: #fff; font-family: Arial; margin: 38px auto; }
    .contactForm table:nth-of-type(2) { display: flex; margin: 2% auto !important; padding-right: 0; text-align: center; float: none; align-items: center; justify-content: center; }
}



@media screen and (max-width:800px) {
    .contactAddress h1 { font-size: 36px; }
        .contactAddress h1:nth-of-type(1) { padding-top: 0 !important; }
    .contactAddress p { font-size: 18px; }
    .contactHeader h1 { font-size: 38px; }
    .productCatalog > div > div { top: 60%; }
}
  


@media screen and (max-width:768px) {
    .contactForm > div > span:nth-of-type(2) { left: 0%; }
}



@media screen and (max-width:480px) {
    .fade { text-align: left; }
    .row.fade.address { padding-top: 20px; }
    .contactAddress { padding-bottom: 10%; }
    .contactForm { padding-top: 10%; }
    .productCatalog p { min-height: 0; }

}



@media screen and (max-width:415px) {
    .contactForm { padding-top: 5%; }
    .contactAddress h1 { font-size: 22px; }

    .panel2.siteMap { background-position-x: -90px; }
    .contactForm table:nth-of-type(2) tbody tr td:nth-of-type(1) {
    padding-top: 7px;
    padding-right: 10px;
}

}



@media screen and (max-width:320px) {
    .contactMap { width: 80%; padding-bottom: 70%; }
}








































/*FONT STYLE*/

@font-face { font-family: 'Orbitron'; src: url('../fonts/Orbitron-Black.ttf') format('truetype'); }