﻿@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {


    .header { display: none; }
    .header2 { display: none; }

    .header_mobile { float: left; display: block; width: 100%; margin: 0 auto; height: 40px; position: fixed; top: 0; background-image: url(../images/navbg.gif); background-position: top center; background-repeat: repeat-x; background-position-y: -1px; z-index: 999; }
    .headercontent_mobile { width: 985px; margin: 0 auto; height: 40px; }

        .headercontent_mobile .logo img { height: 40px; }

    .header_mobile .menu-main-navigation-container { position: relative; right: auto; top: auto; display: block; background: #2a2d33; color: #FFF; padding: 22px 30px; font-size: 1.2em; display: none; }

        .header_mobile .menu-main-navigation-container ul li { display: block; }
            .header_mobile .menu-main-navigation-container ul li a { margin: 0; color: #FFF; padding: 8px 0; display: block; }

            .header_mobile .menu-main-navigation-container ul li .sub-menu { display: block; position: relative; top: auto; background: rgba(0,0,0,0.1); border-top: 1px solid rgba(255,255,255,0.1); padding: 0; margin-bottom: 15px; }
                .header_mobile .menu-main-navigation-container ul li .sub-menu li a { color: #FFF; border-bottom: 1px solid rgba(255,255,255,0.1); margin: 0; padding: 10px; font-weight: 300; }

    .header_mobile #menuToggle i.fa { top: 1px; }

    .header_mobile #menuToggle { position: absolute; top: 0; color: #FFF; text-decoration: none; /* border-radius: 0 0 5px 5px; */ font-size: 1.4em !important; padding: 20px; z-index: 210; }
    .header_mobile #menuToggle { background: #2a2d33; right: 0; display: block; padding: 12px 20px; }


    h1 { font-family: 'Roboto', sans-serif; font-weight: 100; color: #f4f4f4; font-size: 19px; line-height: 32px; text-transform: uppercase; }

    h2 { font-family: 'Roboto', sans-serif; font-weight: 100; color: #f4f4f4; font-size: 13px; line-height: 13px; text-transform: uppercase; }
    #section0 { height: 376px; }
    #slide1 { background-image: url(../images/heros/1_m.jpg); background-size: cover; background-position-y:10px; height:260px }
    #slide2 { background-image: url(../images/heros/2_m.jpg); background-size: cover; background-position-y:10px;}
    #slide3 { background-image: url(../images/heros/3_m.jpg); background-size: cover; background-position-y:10px; }

    .homeblockred { background-color: #c90c31; padding: 5px 30px 8px 0px; display: block; float: left; width: 100%; position: relative; z-index: 100; text-align: center;  }
    .homeblockredsub { background-color: #c90c31; padding: 9px 30px 10px 0px; display: block; float: left; width: 100%; position: relative; z-index: 100; text-align: center;  }
        .homeblockredsub h2 { font-size: 21px;}
    .fp-controlArrow.fp-prev { left: 10px; width: 0; border-width: 10px 10px 10px 0; border-color: transparent #cb0028 transparent transparent; }
    .fp-controlArrow.fp-next { right: 10px; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #cb0028; }
    .whitelogo img { width: 90%; }
    .subp h2 { font-size: 20px; line-height: 20px; }

    .vidholder iframe { width: 100%; }

    .subp .subb { text-align: center; font-size: 11px; font-weight: 300; color: white; display: inline-block;  }
    .printerpic { width: 100%; display: inline-block; }
        .printerpic img { width: 80%; margin-top:14px }
    .printtext { width: 100%; display: inline-block; }
        .printtext h2 { font-size: 18px; line-height: 18px; }
        .printtext p { font-size: 15px; font-weight: 300; margin-top: 4px; line-height: 15px; }
        .printtext img { display:none}
    .appholder img {  }
    .appholder { margin-top: 10px; }
    .homeblockgreen { top: -15px; }
    .videoWrapper { position: relative; padding-bottom: 68.25%; padding-top: 0px; height: 0; }
        .videoWrapper iframe { position: absolute; top: 25px; left: 0; width: 100%; height: 80%; }
    .magsec img { width: 77%; }
    .magsec h3 { padding: 10px 1%; font-size: 14px; line-height: 15px; }
    .magsec h2 { font-size: 24px; line-height: 24px; }
    .social { margin-top: 38px; }
    .social h2 { font-size: 20px; line-height: 20px; }
    .social h3 { font-size: 16px; line-height: 16px; display:block}
    .social .blog h2 {font-size: 14px;line-height: 14px;font-weight: bold;}
    .social .blog .blogblock img { display: none; }
    .social .blog { background-color: #83ccec; padding: 5px; margin: 7px 0; }
        .social .blog .blogblock { width: 100%; display: inline-block; margin: 8px 0; text-align: center; }
            .social .blog .blogblock .copy p { color: #ffffff; font-size: 12px; margin-bottom: 10px; line-height: 15px;padding: 0 35px; }
            .social .twtt {display: inline-block;width: 100%;}
                .social .twtt p { color: white; font-size: 12px; margin: 4px 0; font-family: 'Roboto', sans-serif; font-weight: 300; line-height: 13px; }
                .social .twtt img { width: 30%; }
    
    .extra {margin: 34px 0 0 0;text-align: center;}
    
    .extra .ina .extrablock1 {
width: 280px;
display: inline-block;
padding: 20px;
background-color: #565656;
vertical-align: top; min-height:0
}


    .extra h3 { line-height: 28px; font-weight: 300; margin-top: 0px; }
    .extra .ina { text-align: center; width: 100%; display: inline-block; }
    .extra p { color: white; font-size: 13px; margin: 2px 0; font-family: 'Roboto', sans-serif; font-weight: 300; line-height: 13px; }
    .extra a {color: #ffffff;font-size: 18px;}
        .extra .ina .extrablock3 { min-height: 0; }  
    .extra .gar {background-color: #3c4057;margin: 5px 0 0 0;text-align: center;padding: 10px;}
    .gar img { display: none; }
    .extra .gar p {color: #b7b9c1;padding: 0px 15px;}

    .conrade img { width: 23%; }
    .conrade h2 {font-size: 18px;color: #00152e;line-height: 20px;font-weight: 300;margin-top: 0px;}
    .conrade p { color: #00152e; font-size: 12px; margin: 5px 0; font-family: 'Roboto', sans-serif; font-weight: 400; line-height: 13px; padding: 0 10px; }
    .footer2 { width: 100%; margin: 0 auto; background: #223640; height: 60px; margin-top: 0px; position: relative; z-index: 99; position: absolute; bottom: 0; }
    .footercontent {width: 100%;height: 60px;margin: 0 auto;}
    .flink2 {float: left;width: 100%;margin-top: 7px;font-size: 10px;text-align: center;}
        .flink2 a { color: #f4f4f4; margin-left: 2px; font-size: 10px; line-height:10px }
        .flink1 {
float: left;
width: 100%;
margin-top: 2px;
color: #f4f4f4;
text-align: center;
font-size: 10px;
}


    .buynow {
position: absolute;
top: 0;
left: 0;
z-index: 999;
display: none;
margin: 384px 0 0 24px;
}
        .buynow .vertical-text { background: #cb0028; -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -ms-transform-origin: right top 0; -moz-transform-origin: right top 0; -webkit-transform-origin: right top 0; transform-origin: right top 0; color: #fff; margin-left: 35px; padding: 10px; border: 1px solid #ccc; text-transform: uppercase; text-transform: 1px 1px 0px rgba(0, 0, 0, 0.5); box-shadow: 2px -2px 0px rgba(0, 0, 0, 0.1); float: left; }
        .buynow a { color: white; display: block; }
            .buynow a:hover { text-decoration: none; }

    .twittericon { position: fixed; top: 310px; right: 0; z-index: 999; display:none }

    .watchtvad { position: fixed; top: 478px; right: 0; z-index: 999; display:none }
        .watchtvad .vertical-text { background: #000; -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -ms-transform-origin: right top 0; -moz-transform-origin: right top 0; -webkit-transform-origin: right top 0; transform-origin: right top 0; color: #fff; padding: 10px; border: 1px solid #ccc; text-transform: uppercase; text-transform: 1px 1px 0px rgba(0, 0, 0, 0.5); box-shadow: 2px -2px 0px rgba(0, 0, 0, 0.1); float: right; }
        .watchtvad a { color: white; display: block; }
            .watchtvad a:hover { text-decoration: none; }
    .footer { height: 85px; }
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {

        #slide1 { background-size:contain; background-repeat:no-repeat; background-position-y:200px }
    #slide2 { background-size: contain; background-position-y:10px}
    #slide3 {  background-size: contain; background-position-y:10px}
}

