/* --------------------------------------
   Layout
   -------------------------------------- */

html {
    -ms-overflow-style: scrollbar;
    overflow:hidden;
    height:100%;
}
body {
    padding: 0px 0px 0px 0px;
    font-family:'DinRegular', Helvetica,Arial,sans-serif;
    font-size:16px;
    overflow:auto;
    height:100%;
}
.modal-open {
    overflow:auto;
}
#features {
    text-align: center;
}

#features img {
    margin: 0 0 20px;
}

#inputMessage {
    margin-bottom: 15px;
}

footer {
    background: #e8e8e8;
    border-top:1px solid #6d6e71;
    font-size: 13px;
    padding: 20px;
    margin-top:30px;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-left: auto;
}
.navbar {
    background-color:#e8e8e8;
    border-bottom:11px solid #005F9f;
    -webkit-box-shadow: 0px 4px 7px 0px rgba(50, 50, 50, 0.59);
    -moz-box-shadow:    0px 4px 7px 0px rgba(50, 50, 50, 0.59);
    box-shadow:         0px 4px 7px 0px rgba(50, 50, 50, 0.59);
}
.navbar-toggle .icon-bar {
    background-color: #98C33C;
}
.navbar-nav>li>a {
    color:#005F9F;
}
.navbar-nav>li>a:hover {
    color:#98C33C;
}
.navbar .container {
    position:relative;
}

.jumbotron {


    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:400px;
    position:relative;
}
.jumbotron.opt1 {
    background-image:url('../../images/jumbotron1.jpg');
    background-position:right bottom;
}
.jumbotron.opt2 {
    background-image:url('../../images/jumbotron2.jpg');
    background-position:left 50%;
}
.jumbotron.opt3 {
    background-image:url('../../images/jumbotron3.jpg');
    background-position:right 75%;
}
.jumbotron.opt4 {
    background-image:url('../../images/starwars-protocols-notext.jpg');
    background-position:40% 40%;
}

.jumbotron span {
    font-family: 'DinBold';
    display:block;
    font-size:50px;
    color:#FFF;
    -webkit-text-stroke: 1px black;
    text-shadow:
        2px 2px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    line-height:40px;
}


.jumbotron.leftstart span.first {

}
.jumbotron.leftstart span.second {
    position:absolute;
    right:5%;
    bottom:10%;
    text-align:right;
}
.jumbotron.rightstart span.first {
    position:absolute;
    right:5%;
    top:10%;
    text-align:right;
}
.jumbotron.rightstart span.second {
    position:absolute;
    left:5%;
    bottom:10%;
    text-align:left;
}
.panel-heading.purple {
    background-color:#7b58a5;
}


/* --------------------------------------
   Typography
   -------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;

}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family:"DinBold" "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500;
    line-height: 1.1;
}
h1 {
    margin-bottom:30px;
}

.well .page-header {
    margin-top: 0;
}

.well .page-header h1 {
    margin-top: 0;
}

ul.unstyled {
    list-style: none;
    padding: 0;
}
.panel-title {
    color:#FFF;
}
.panel-heading {
    background-color:#98c33c;
}
.quote {
    font-family:"LubalinGraph", arial, helvetica, sans-serif;
    margin-top:20px;
    font-size: 24px;
    color: #98c33c;
}
.quotebox {
    margin-bottom:10px;
}
.buyNow {
    padding:10px 0;
}
.listiconsm {
    margin-bottom:30px;
}
.listiconsm span {
    font-size:10px;
}
.guarantee {
    font-family:"LubalinGraph", arial, helvetica, sans-serif;
    margin: 0 0 -3px;
    padding: 7px 0 0;
    font-size: 90px;
    color: #98c33c;

    line-height: 45px;
    text-align:center;
    margin-top:30px;
}
.guarantee span {
    font-size:20px;
    font-family:"DinBold",Helvetica,Arial,sans-serif;
    color:#333;
    display:block;
}
.officeguarantee .guarantee {
    text-align:left;
}
.officeguarantee .guarantee span {
    padding-left:40px;
}

.roundedcorners {
    border-radius:10px;
}
/* --------------------------------------
   Helper Page Styles
   -------------------------------------- */

.helpercallout {
    position:relative;
    text-align:center;
    font-size:34px;
    color:#FFF;
    font-family:"DinBold",Helvetica,Arial,sans-serif;
    padding:30px 0;
    margin:60px 0;
    -webkit-box-shadow:inset 0px 4px 7px 0px rgba(50, 50, 50, 0.59);
    -moz-box-shadow:inset    0px 4px 7px 0px rgba(50, 50, 50, 0.59);
    box-shadow: inset        0px 4px 7px 0px rgba(50, 50, 50, 0.59);
}
.helpercallout p {
    font-size:16px;
    margin-bottom:25px;
    font-family:'DinRegular', Helvetica,Arial,sans-serif;
    z-index:20;
}
.helpercallout.blue {
    background: #005f9f url('../../images/crossed_stripes2.png') repeat;



}
.helpercallout.purple {
    background: #7b58a5;

}
.wifibroken {
    background:url('../../images/wifi-icon-white.png') left top no-repeat;
    background-size:40px;
    padding-left:50px;
}
.buffering {
    position:relative;
    /*background:url('../../images/imac.png') left top no-repeat;
    background-size:100%;*/
}
.helpercallout.green {
    background:#98c33c;
    background: #98c33c url('../../images/crossed_stripes.png') repeat;
}
.helpercallout.gray {
    background:#6d6e71;
}
.helpercallout.black {
    background:#000;
}
.helpercallout p span {
    font-family:"DinBold",Helvetica,Arial,sans-serif;
}
.stepslist li {
    margin-bottom:20px;
}
.helpercallout .container {
    position: relative;
}
.quotesymbol {
    font-size:500px;
    position:absolute;
    z-index:1;
    left:0;
    bottom:50px;
    font-family:Helvetica,Arial,sans-serif;
    line-height:0px;
    letter-spacing: 20px;
    opacity:0.2;
    filter:alpha(opacity=20); /* For IE8 and earlier */
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #FFF;
    position:absolute;
    top:0;
    left:48%;
}
.mgshape {
    -webkit-border-radius: 50%;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius: 50%;
    -moz-border-radius-bottomright: 0;
    border-radius: 50%;
    border-bottom-right-radius: 0;
}
/*
.deck .panel {
   min-height:335px;
   position:relative;
}
.deck .deckbuy {
   position:absolute;
   bottom:10px;
   width:100%;
   left:0;
}
*/
.cardcallout {
    border:1px solid #005f9f;
}
.cardcallout .panel-heading {
    background-color:#005f9f;
}
.panel-title span {font-size:14px;}
.leadbigger {
    font-size:24px;
}

.freeShipBody, .international {
    display:none;
    font-size:20px;
    font-weight:bold;
    font-family: "LubalinGraph", arial, helvetica, sans-serif;

    padding: 7px 0 0;
    font-size: 30px;
    color: #005f9f;
}
/* --------------------------------------
   Navbar
   -------------------------------------- */
.navbar-brand {
    max-width:224px;
}

.language {
    clear:both;
    font-size:12px;
}
.language a {
    color:#005F9F;
}

/* --------------------------------------
   Global Styles
   -------------------------------------- */
.alert {
    margin-top: 20px;
    display: none;
}

.well {
    margin: 20px 0;
}

.tabbable img.thumbnail {
    margin: 0 20px 10px 0;
}

.thumbnails {
    margin: 20px 0;
}

.thumbnail {
    position: relative;
}

.thumbnail h3 {
    font-size: 16px;
    margin: 0 0 10px;
    line-height: 20px;
}

.thumbnail .price {
    font-size: 22px;
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 10px;
}

.thumbnail .price sup{
    font-weight: normal;
    font-size: 12px;
}

.thumbnail span.glyphicon {
    margin-right: 5px;
}

#newsletter {
    background-color: #;
}

.laptopImg {
    width: 500px;
    height: auto;
}

.carousel-control.left, .carousel-control.right {
    background:none;
}
.carousel-caption {
    /* top:-50px; */
    background: rgb(112, 112, 112) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(112, 112, 112, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.carousel-caption h3 {
    font-size:22px;
    color:#fff;
    font-family:"DinBold" "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-shadow:none;

}
.carousel .item img {
    width:80%;
}
strong {font-family:"DinBold" "Helvetica Neue",Helvetica,Arial,sans-serif;}
.spanish > div {
    display:none;
    font-weight:bold;
    margin-bottom:20px;
    font-size:20px;
}

.ekko-lightbox-nav-overlay .glyphicon-chevron-right {margin-left:10px;}
/* --------------------------------------
   Media Queries
   -------------------------------------- */

/* Portrait & landscape phone */
@media (max-width: 480px) {
    .thumbnail .price {
        font-size: 14px;
    }

    .thumbnail .price sup {
        font-size: 10px;
    }

    body {
        padding: 0px 0px 10px 0px;
    }
    .jumbotron span {
        font-size:16px;
    }
    .carousel-caption, .hidemobile {
        display:none;
    }
    /*.deck .panel.taller {
    min-height:400px;
    position:relative;
    }*/
}
@media (max-width: 315px) {
    /*.deck .panel.taller {
    min-height:460px;
    position:relative;
    }*/
}

/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
    #myCarousel .item { height: 310px; }

    .carousel-caption {
        font-size: 16px;
    }

    .carousel-caption h4 {
        font-size: 22px;
    }

    #slide1 {
        background: url('../../images/carousel_small_01.jpg') top left no-repeat;
    }

    #slide2 {
        background: url('../../images/carousel_small_02.jpg') top left no-repeat;
    }

    #slide3 {
        background: url('../../images/carousel_small_03.jpg') top left no-repeat;
    }
    .jumbotron span {
        font-size:40px;
    }
    .firstbuy {
        padding-bottom:30px;
    }
    .officeguarantee .guarantee {
        text-align:center;
    }
    .officeguarantee .guarantee span {
        padding-left:0px;
    }
}
@media (min-width: 900px) {
    .modal-lg {
        width: 900px;
    }
}

/* Large desktop */
@media (min-width: 1200px) {
    #myCarousel .item {height: 500px;}

    #slide1 {
        background: url('../../images/carousel_large_01.jpg') top left no-repeat;
    }

    #slide2 {
        background: url('../../images/carousel_large_02.jpg') top left no-repeat;
    }

    #slide3 {
        background: url('../../images/carousel_large_03.jpg') top left no-repeat;
    }
    .modal-lg {
        width: 1000px;
    }
}