@charset "utf-8";
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
/* CSS Document */

/*----------------------------------------------------------------*/
/*- Common Styles ------------------------------------------------*/
/*----------------------------------------------------------------*/

body {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #666666;
}
header {}
footer {}
h1, h2, h3, h4, h5, h6 { font-weight: 300; }

#banner {}
#bannerMid {}
#headphone {}

a {}
a:hover {}

#sidebar .formHolder {}
#mainContent .formHolder {}

.formResponse {}

/* Standard CSS */
@media (min-width: 768px) {
    #block2Element1, #block2Element2, #block2Element3, #block2Element4, #block2Element { width: 25%;}
}
#block2Element5, #block2Element6 {display: none;}
@media (max-width: 767px) { #block3Element1 { width: 100% !important;} }
#extraFormsContainer .modal-dialog {background: rgba(0, 0, 0, 0.3); border-radius: 0px; left: 50%; margin: 0; padding: 20px; top: 40%; transform: translate(-50%, -5%); }
#emailContact_formModalForm { background-color: transparent; min-height: 600px; color: #fff !important; border-radius: 0px; }
#block3 ul>li:before { font-family: 'FontAwesome'; content: '\f046'; margin: 0 5px 0 0px; color: #B4AEAE !important; }

/* Custom Styles */
#block2 p {
    position: relative;
    height: 100px;
    width: 100px;
    margin: 0 auto 20px;
}
#block2 img {
    margin: 0 auto;
    height: auto !important;
    position: absolute;
    bottom: 0;
    margin: auto;
    right: 0;
    left: 0;
    top: 0;
}
@media (min-width: 1024px) {
    #block1Element1 {
        padding: 110px 0;
    }
}

@media (min-width: 1440px) {
    #block1Element1 {
        padding: 150px 0;
    }
}


#headElement1 {
    font-size: 30px;
    color: #63666a;
    margin-top: 9px;
}
#headElement1 img {
    display: inline-block;
}
#headElement2a {
    font-size: 26px;
}
#headElement2b {
    font-size: 13px;
    color: #999999;
    font-weight: 300;
}
#block1, #block2, #block3, #block4, #block5 {
    border-bottom: 1px solid #eeeeee;
}
#wrapper #block1, #wrapper #block4 {
    background: -moz-linear-gradient(to bottom,#fff,#fbfcfb);
    background: -webkit-linear-gradient(to bottom,#fff,#fbfcfb);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#fbfcfb));
    background: linear-gradient(to bottom,#fff,#fbfcfb);
}
#block1 img {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
    padding: 0;
    border-radius: 5px;
    max-width: 90%;
}
@media (min-width: 1024px) {
    #block1 img {
        max-width: 100%;
    }    
}
#block1 #block1Element1 a.formLink {
    background-color: #4173c9;
    background-image: -moz-linear-gradient(top,#5e8ee4,#4173c9);
    background-image: -webkit-linear-gradient(top,#5e8ee4,#4173c9);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#5e8ee4),color-stop(1,#4173c9));
    background-image: linear-gradient(top,#5e8ee4,#4173c9);
    color: #ffffff;
    border: 0 none;
    padding: 15px 33px;
    margin: 20px auto 40px;
    border-radius: 4px;
}
#block1 #block1Element1 a.formLink:hover {
    background-color: #396bbc;
    background-image: -moz-linear-gradient(top,#5587d7,#396bbc);
    background-image: -webkit-linear-gradient(top,#5587d7,#396bbc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#5587d7),color-stop(1,#396bbc));
    background-image: linear-gradient(top,#5587d7,#396bbc);
}
@media (min-width: 767px) {
    #block1 #block1Element1 a.formLink {
        margin: auto;

    }
}
#block2, #block4 {
    padding: 60px 0;
}
@media (min-width: 1440px) {
    #block2, #block4 {
        padding: 100px 0;
    }   
}
#block2 h1, #block2 h2, #block2 h3, #block2 h4, #block2 h5, #block2 h6 {
    color: #666666 !important;
    text-shadow: 1px 1px 1px #ffffff;
    margin-bottom: 50px;
}
.roundicon {
    background: transparent;
    width: 140px;
    height: 140px;
    position: relative;
    margin-bottom: 20px;
    display: inline-block;
}
.roundicon img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    color: #666666;
}

#block5 .formHolder,
#block3 .formHolder {
    background: #fcfcfc;
    border-radius: 0;
    border: 1px solid #eeeeee;
}
#block3 input, #block3 textarea,
#block5 input, #block5 textarea {
    border: 1px solid #dddddd;
}
#block3 input[type=submit],
#block5 input[type=submit] {
    background: #4173c9 !important;
    color: white !important;
    margin: 1em 0;
    font-weight: 400;
}
.formHolder label {
    font-size: 0.8em;
    font-weight: 400;
}
.formbuilder-form label.error {
    font-size: 0.8em
}

/*----------------------------------------------------------------*/
/*- Media Queries ------------------------------------------------*/
/*----------------------------------------------------------------*/

@media (max-width: 1199px) {

}

@media (max-width: 979px) {

}

@media (max-width: 767px) {

#sidebar .formHolder { display:none; }

}

@media (max-width: 480px) {

}

@media (max-width: 320px) {

}

#__email__ {
    height: 0;
    margin: 0;
    min-height: 0;
    padding: 0;
    visibility: hidden;
}

.galleryHolder { text-align:center; }
    .galleryHolder img {
        display:inline-block;
        text-align:center;
        margin:0 1% 20px;
        vertical-align:top;
        padding:2px;
        border:1px solid #ddd;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        background:white;
        height: auto !important;
    }

        .itemTile1, .galleryHolder1 img { width:97% !important; } /* 1 product/image per row */
        .itemTile2, .galleryHolder2 img { width:47% !important; } /* 2 products/images per row */
        .itemTile3, .galleryHolder3 img { width:30% !important; } /* 3 ppr */
        .itemTile4, .galleryHolder4 img { width:22% !important; } /* etc */
        .itemTile5, .galleryHolder5 img { width:17% !important; }
        .itemTile6, .galleryHolder6 img { width:13% !important; }



@media (max-width: 767px) {
   .itemTile { border-bottom: 1px dotted #ccc; width: 100% !important; margin:0 0 10px; }
   .galleryHolder img { width: auto !important; margin:0 0 10px; }
}
@media (max-width: 480px) {
    .itemFull { padding:10px 10px 0; text-align: center; }
    .itemFull img { float: none;  margin: 0 auto 10px; width: 100% !important; }
}