html, body {
    background-color: white;
    font-family: 'Open Sans', Helvetica, Verdana, Arial, sans-serif;
    font-weight: 400;
    font-size: 100%;
    color: #7d7d7d;
}

/* headers and defaults */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Open Sans', Helvetica, Verdana, Arial, sans-serif;
    font-weight: 400;
    font-size: 100%;
}
h1 {
    font-weight: 600;
    font-size: 300%;
    color: #2cb4ec;
}
h1 em {
    font-weight: 800;
    text-transform: uppercase;
}

h2 {
    font-weight: 700;
    font-size: 200%;
    color: #2cb4ec;
}
h3 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 250%;
    color: #ec592c;
}
h4 {
    font-weight: 300;
    font-size: 200%;
    color: #484848;
}
h5 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 180%;
    color: #ec592c;
}
h6 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 150%;
    color: #424242;
}

/* buttons */

.btn-default, .btn-default:focus {
    border-radius: 0;
    background-color: #ec592c;
    border-color: #ec592c;
    color: white;
    font-size: 150%;
    font-weight: 700;
}
.btn-default:hover {
    color: white;
    background-color: #ec592c;
    border-color: red;
    box-shadow: 0 0 7px #494949;
}
.btn-primary, .btn-primary:focus {
    color: white;
    font-size: 180%;
    font-weight: 700;
    border-radius: 0;
    background-color: #2cb4ec;
    padding: 10px 14px;
    border-color: #3A98EA;
    box-shadow: 0 0 2px #494949;
}
.btn-primary:hover {
    color: white;
    background-color: #2cb4ec;
    border-color: #3A98EA;
    box-shadow: 0 0 7px #494949;
}
.alert {
    border-radius: 0;
}
.btn-group-vertical .btn-default {
    border: 1px solid #ddd;
    background-color: #fff;
    font-weight: 400;
    font-size: 100%;
    color: #555;
}
.btn-group-vertical .btn-default:hover {
    background-color: #f5f5f5;
    box-shadow: none;
}
.btn-blue, .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
    background-color: #2cb4ec;
    border-color: #3A98EA;
}
#product-list .btn-blue {
    border-radius: 0;
}
.btn.imaged img, .btn-blue.imaged img {
	float: left;
}
.btn-sm, .btn-sm:focus {
    font-size: 16px;
}
.btn-lg, .btn-lg:focus {
    font-size: 32px;
}
.btn-success, .btn-success:hover, .btn-success:focus {
    background-color: #4ab734;
    border-color: #4ab734;
}
/* structure */

/* header */

div#shadow {
    z-index: 2;
    top: 0;
    right: 45%;
}

header .logo {
    margin-top: 50px;
    left: 0;
    display: block;
    width: 289px;
    height: 61px;
    background: transparent url(../images/logo.png) no-repeat 0 0;
}

#top-nav {
    margin-top: 10px;
}
#top-nav li:first-child a em {
    color: #ec592c;
    font-style: normal;
}
#top-nav li:first-child a:hover {
    background-color: transparent;
}
#top-nav a {
    font-size: 1.5em;
    color: #757575;
}
#top-nav a.btn-default {
    margin-top: 7px;
    font-size: 110%;
    color: #fff;
}
#bottom-nav nav.navbar {
    padding-top: 20px;
    clear: both;
    background-color: transparent;
    border-color: transparent;
}
#bottom-nav .navbar.navbar-default {
    margin: 3px;
    padding: 0;
    min-height: 0;
}
#bottom-nav nav.navbar .caret {
    display: none;
}
#bottom-nav nav.navbar a.main {
    border: 1px solid transparent;
    border-bottom: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.2em;
    color: #757575;
}
#bottom-nav nav.navbar a.main:hover {
    color: #fff;
}
#top-nav .dropdown-menu a:hover, #bottom-nav nav.navbar a:hover, #bottom-nav nav.navbar li.active a.main {
    background-color: #2cb4ec;
    color: white;
}
#top-nav .dropdown-menu, #bottom-nav nav.navbar .dropdown-menu {
    border-radius: 0;
    margin-top: -1px;
}
#top-nav .open>a.btn-default, #top-nav .open>a.btn-default:hover, #top-nav .open>a.btn-default:focus, #bottom-nav .navbar-default .navbar-nav>.open>a.main, #bottom-nav .navbar-default .navbar-nav>.open>a.main:hover, #bottom-nav .navbar-default .navbar-nav>.open>a.main:focus {
    color: #757575;
    background-color: white;
    z-index: 1001;
    border: 1px solid rgba(0,0,0,0.15);
    border-bottom: none;
    box-shadow: none;
    /*box-shadow: 0 6px 12px rgba(0,0,0,0.175);*/
}
#top-nav .dropdown-menu {
    padding-right: 20px;
    padding-left: 20px;
}
#top-nav a#forgot:hover {
    color: #000;
}
#top-nav .dropdown-menu {
    border-top: 0;
}

/* main */
section#content {
    padding-bottom: 30px;
}

body.HomePage section#content {
    background-color: #2cb4ec;
    color: white;
}

.jumbotron {
    margin-bottom: 0;
    padding: 0;
}
body.HomePage .jumbotron #slideshow {
    position:relative;
    overflow:hidden;
    width: 100%;
    height: 640px;
}

body.HomePage .jumbotron #slideshow .items  {
    height: 640px;
}

body.HomePage .jumbotron #slideshow .items .slide-container  {
    background-color: white;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: right;
    padding-top: 50px;
    height: 640px;
    width: 100%;
}
body.HomePage .jumbotron #slideshow .items .slide-container h1 {
    font-size: 250%;
    color: #2cb4ec;
    margin-left: 400px;
    padding-top: 0;
    text-shadow: 0 1px 1px #000, 0 0 2px white, 0 0 1em white, 0 0 0.2em white;
}

body.HomePage .jumbotron #slideshow .items .slide-container h4 {
    font-size: 150%;
    margin-left: 400px;
    text-shadow: 0 0 35px white, 0 0 35px white, 0 0 35px white, 0 0 35px white, 0 0 35px white, 0 0 45px white;
    padding: 12px 8px;
    font-weight: bold;
}
body.HomePage .jumbotron #slideshow .items .slide-container.dark-bkg {
    background-color: black;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
}
body.HomePage .jumbotron #slideshow .items .slide-container.dark-bkg h4 {
    color: #ccc;
    text-shadow: 0 0 35px black, 0 0 35px black, 0 0 35px black, 0 0 35px black, 0 0 35px black, 0 0 45px black;
    background: none;
}
body.HomePage .jumbotron #slideshow .items .slide-container.dark-bkg h1, body.HomePage .jumbotron #slideshow .items .slide-container.dark-bkg h4 {
    text-shadow: 0 1px 1px #000, 0 0 1em #000, 0 0 0.2em #000;
}
body.HomePage .jumbotron #slideshow .items .slide-container .btn-default {
    font-size: 100%;
}
section#main-content.kbcategorylist h3 {
    text-transform: capitalize;
    font-size: 150%;
}
section#main-content.kbcategorylist h3 .alert {
    text-transform: capitalize;
}
div.blog-posts {
    margin-top: 50px;
}
div.blog-posts h3 {
    text-transform: capitalize;
    font-size: 150%;
    margin-top: 0;
}
div.blog-posts article {
    margin-bottom: 50px;
}
div.blog-posts article .day-name {
    font-size: 150%;
    font-weight: 600;
    color: #2cb4ec;
}
body.ProductPage div#content-text img.hero {
    display: block;
    width: 72%;
}

/* cta */

.cta {
    font-weight: 400;
    font-size: 150%;
    color: #fff;
    background-color: #2cb4ec;
}
.cta.bg {
    background-color: #ffffff;
}
.cta.bg .container:first-child {
    background-image: url('../images/home-girl-on-tablet-white.jpg');
    background-position: bottom right;
    background-repeat: no-repeat;
}
.cta h2 {
    color: #fff;
    font-size: 175%;
    width: 500px;
}
.cta h3 {
    margin-top: 50px;
    font-size: 125%;
}
.cta .btn-default {
    font-size: 100%;
}
.cta .awards {
    margin-bottom: -20px;
}
.cta .awards img {
    margin-right: 10px;
    height: 100px;
}

/* other */

.offers {
    margin: 40px auto;
    background-color: #2cb4ec;
}
.offers .sale, .offers .sale-20 {
    background-image: url(/themes/nnotte/images/sale-flag-20pc-off.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 70px;
    height: 70px;
    float: right;
    margin-right: 10px;
    margin-top: 2px;
}
.offers .sale-25 {
    background-image: url(/themes/nnotte/images/sale-flag-25pc-off.png);
}
.offers .sale-10 {
    background-image: url(/themes/nnotte/images/sale-flag-10pc-off.png);
}
.offers .sale-30 {
    background-image: url(/themes/nnotte/images/sale-flag-30pc-off.png);
}
.offers .sale-40 {
    background-image: url(/themes/nnotte/images/sale-flag-40pc-off.png);
}
.offers .sale-50 {
    background-image: url(/themes/nnotte/images/sale-flag-50pc-off.png);
}
.offers h4 {
    text-align: center;
    width: auto;
    color: white;
}
.offer-box {
    background-color: white;
    color: #474747;
    font-size: 90%;
    margin: 10px;
    box-shadow: 0 2px 7px #2189B2;
    padding: 15px 0;
}
.offers .best-value {
    background-image: url(/themes/nnotte/images/sale-best-value.png);
    background-repeat: no-repeat;
    background-position: top left;
    height: 75px;
    width: 75px;
    position: absolute;
    right: 24px;
    top: 100px;
    z-index: 6;
}
.offer-box p, .offer-box ul {
    text-align: center;
}
.offer-box ul {
    list-style: none;
    font-size: 85%;
    height: 150px;
}
.offer-box ul li {
    text-align: left;
}
.offer-box .offer-name {
    font-size: 110%;
    color: #2189B2;
    font-weight: 700;
    text-shadow: 0 1px #494949;
    padding: 10px 0;
}
.offer-box .price-per-device {
    width: 100%;
    font-size: 105%;
    color: white;
    font-weight: bold;
    background-color: #2189B2;
    padding: 15px 0;
}
.offer-box ul li:before {
    content: "\00BB \0020";
    color: #2189B2;
}
.offer-box .normal-price {
    font-size: 105%;
    color: #494949;
    font-weight: 700;
    text-decoration: line-through;
}
.offer-box .price-per-year {
    font-size: 105%;
    color: #2189B2;
    font-weight: 700;
}
.offer-box .price-per-year em {
    color: red;
}
.offer-box .btn-default {
    font-size: 150%;
}

.visible-sm-block, .visible-xs-block {
    display: none;
}
#left-nav h4 {
    font-size: 120%;
}
#left-nav p {
    font-size: 80%;
}

#main-content h2 {
    text-align: center;
    text-transform: uppercase;
    color: #ec592c;
    margin: 30px;
}
#main-content .feature-table h3 {
    font-size: 110%;
    text-align: center;
    margin: 0;
}
#main-content .feature-table h3 a {
    color: #ffffff;
}
#main-content .feature-table * {
    text-align: center;
}
#main-content .feature-table p {
    font-size: 80%;
    color: #555;
}
.feature-icon {
    /*display: table-cell;
    width: 100%;*/
    text-align: center;
    height: 120px;
    vertical-align: middle;
}
section#content .add-to-cart-box .btn-primary {
    width: 100%;
    border-radius: 4px;
    font-size: 150%;
}
body.ProductPage #main-content h2, body.FeaturePage #main-content h2 {
    color: #494949;
    font-weight: 300;
    font-size: 160%;
    text-transform: capitalize;
    text-align: left;
    margin-left: 0;
}
body.ProductPage #main-content h3, body.FeaturePage #main-content h3 {
    font-weight: 300;
    font-size: 130%;
    text-transform: capitalize;
}

/* footer */

footer {
    padding-bottom: 20px;
    color: #494949;
}
footer .logo {
    margin: 0 auto;
    margin-top: 30px;
    padding-bottom: 15px;
}
footer a, footer h2, footer a h2 {
    color: #494949;
    font-weight: 300;
}
footer ul li {
    list-style: none;
}
footer #footer-content {
    padding-top: 20px;
    font-size: 85%;
}
footer #footer-content .footer-social {
    margin-top: 10px;
    height: 64px;
}
footer #footer-content .footer-social .nav-pills {
    padding-top: 10px;
}
footer #footer-content ul {
    padding: 0;
    margin: 0;
}
footer #footer-content .nav-pills li a {
    border-radius: 0;
    padding: 2px 6px;
    font-size: 100%;
}
footer #footer-content .nav-pills li a h2 {
    font-size: 120%;
}
footer #footer-content .nav-pills li a:hover {
    color: black;
}
footer #footer-content .nav-pills .nav-pills li {
    padding-left: 10px;
}

/*/ medium devices >= 992 /*/
@media only screen and (max-width: 1199px) {
    body.HomePage .jumbotron #slideshow .items .slide-container {
        padding-top: 10px;
    }
    body.HomePage .jumbotron #slideshow .items .slide-container h1 {
        font-size: 160%;
        margin-left: 50%;
    }
    body.HomePage .jumbotron #slideshow .items .slide-container h4 {
        font-size: 110%;
        margin-left: 50%;
    }    
	div.visible-sm-block {
		display: none;
	}
    .offer-box ul {
        height: 150px;
    }
    body.HomePage .jumbotron #slideshow, body.HomePage .jumbotron #slideshow .items, body.HomePage .jumbotron #slideshow .items .slide-container {
        height: 377px;
    }
}
/*/ small devices >= 768 /*/
@media only screen and (max-width: 991px) {
    body.HomePage .jumbotron #slideshow .items .slide-container {
        padding-top: 10px;
    }
    body.HomePage .jumbotron #slideshow .items .slide-container h1 {
        font-size: 140%;
        margin-left: 40%;
    }
    body.HomePage .jumbotron #slideshow .items .slide-container h4 {
        font-size: 80%;
        margin-left: 40%;
    }    
    .offer-box {
        margin-bottom: 40px;
    }
    .offer-box ul {
        height: auto;
    }
    .offers .sale, .offers .sale-20 {
        margin-top: -8px;
    }    
	div.visible-sm-block {
		display: block;
	}
    footer #footer-content .footer-social .pull-right {
        float: none !important;
    }
    body.HomePage .jumbotron #slideshow, body.HomePage .jumbotron #slideshow .items, body.HomePage .jumbotron #slideshow .items .slide-container {
        height: 330px;
    }
}

/*/ extra small devices < 768 /*/
@media only screen and (max-width: 767px) {
    body.HomePage .jumbotron #slideshow .items .slide-container {
        padding-top: 4px;
    }
    body.HomePage .jumbotron #slideshow .items .slide-container h1 {
        font-size: 120%;
    }
    body.HomePage .jumbotron #slideshow .items .slide-container h4 {
        font-size: 66%;
        padding: 3px 1px;
    }
    .cta.bg {

    }
    .cta.bg h2 {
        font-size: 140%;
        width: auto;
    }
    .cta.bg h3 {
        font-size: 70%;
    }
	br.visible-sm-block {
		display: none;
	}    
	div.visible-xs-block {
		display: block;
	}
    #bottom-nav .navbar {
        z-index: 20;
    }
    #menu.navbar div.navbar-collapse {
        background-color: white;
    }
    #bottom-nav .navbar button.navbar-toggle {
        margin-right: 20px;
    }
    .cta.bg .container:first-child {
        background-image: none;
    }
    body.HomePage .jumbotron #slideshow, body.HomePage .jumbotron #slideshow .items, body.HomePage .jumbotron #slideshow .items .slide-container {
        height: 256px;
    }
}

/*/ even smaller devices < 360 /*/
@media only screen and (max-width: 360px) {
    body.HomePage .jumbotron #slideshow .items .slide-container h1 {
        font-size: 80%;
    }
    body.HomePage .jumbotron #slideshow .items .slide-container h4 {
        display: none;
    }
    body.HomePage .jumbotron #slideshow .items .slide-container .btn-default {
        font-size: 50%;
    }
    .cta.bg .container:first-child {
        background-image: none;
        text-align: center;
    }
    .cta.bg h2 {
        font-size: 80%;
    }
    .cta.bg h3 {
        display: none;
    }
    .cta.bg .btn-default {
        font-size: 60%;
    }    
	div.visible-xs-block {
		display: block;
	}
    #bottom-nav .navbar button.navbar-toggle {
        margin-right: 10px;
        margin-top: 0;
        height: auto;
    }
    body.HomePage .jumbotron #slideshow, body.HomePage .jumbotron #slideshow .items, body.HomePage .jumbotron #slideshow .items .slide-container {
        height: 120px;
    }
}

/*/ styles for video test /*/

.slide-container div.slide-content {
    padding: 0 50px 0 100px;
}
body.HomePage .jumbotron #slideshow.solo-item .items {
    width: 100%;
}

@media only screen and (min-width: 1200px) {
	.slide-container div.responsive-video {
		float: left;
		position: relative;
		overflow: hidden;
		width: 480px;
		height: 270px;
		top: 15px;
		left: 15px;
	}
	.slide-container div.responsive-video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 480px;
		height: 270px;
	}
    #videoContainer {
        padding-top: 35px;
    }
}
@media only screen and (max-width: 1199px) {
	.slide-container div.responsive-video {
		float: left;
		position: relative;
		overflow: hidden;
		width: 480px;
		height: 270px;
		top: 15px;
		left: 15px;
	}
	.slide-container div.responsive-video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 480px;
		height: 270px;
	}
    #videoContainer {
        padding-top: 70px;
    }
}
@media only screen and (max-width: 991px) {
	.slide-container div.responsive-video {
		float: left;
		position: relative;
		overflow: hidden;
		width: 320px;
		height: 180px;
		top: 10px;
		left: 8px;
	}
	.slide-container div.responsive-video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 320px;
		height: 180px;
	}
    #videoContainer {
        padding-top: 0;
    }
}
@media only screen and (max-width: 767px) {
    body.HomePage .jumbotron #slideshow.solo-item, body.HomePage .jumbotron #slideshow.solo-item .items, body.HomePage .jumbotron #slideshow.solo-item .items .slide-container {
        height: 380px;
    }
	.slide-container div.responsive-video {
		position: relative;
		overflow: hidden;
		width: 100%;
        height: 210px;
		top: 0;
		left: 0;
		padding: 0;
	}
    .slide-container div.slide-content {
        clear: left;
        height: 200px;
        width: 100%;
        text-align: center;
        padding: 10px 40px;
    }
    body.HomePage .jumbotron #slideshow .items .slide-container div.slide-content h1, body.HomePage .jumbotron #slideshow .items .slide-container div.slide-content h4, body.HomePage .jumbotron #slideshow .items .slide-container div.slide-content p {
        text-align: center;
        margin: 0;
    }
	.slide-container div.responsive-video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
    #videoContainer {
        padding-top: 0;
    }
}