body {
    font-family:'Roboto', sans-serif;
}

#navbar {color:#FFF;}
#navbar a {color:#FFF;}





.sidebar { position: fixed; top: 116px; bottom: 0; left: 0; z-index: 1000; padding: 0px; overflow-x: hidden; overflow-y: auto; border-right: 1px solid #eee; }
.sidebar .nav { margin-bottom: 20px; margin-top:20px; }
.sidebar .nav-item { width: 100%; height:30px; overflow:hidden; text-wrap:none; }
.sidebar .nav-item + .nav-item { margin-left: 0; }
.sidebar .nav-link { border-radius: 0; }
.sidebar .nav-link i {width:20px;}
.sidebar .card {border-left:0px;border-right:0px;border-radius:0px;border-top:0px;}
.sidebar .card-header {cursor:pointer;padding-left:5px;}
.sidebar .card-body {padding:10px;}

#userMenu {min-width:250px;max-width:100%;position:absolute;right:0px;background-color:#666;color:#FFF;top:57px;z-index:9999;}
#userMenu a, #userMenu .label {display:block;padding-top:7px;padding-bottom:7px;padding-left:20px;color:#FFF;padding-right:10px;}
#userMenu .label {font-weight:600;color:#DDD;}
#userMenu a:hover {text-decoration:none;background-color:#777;}
#userMenu .divider {border-top:1px solid #999;}
#userAdvertisers a {padding-left:30px;}
#userToggle {text-decoration:none;height:20px;overflow-y:hidden;white-space:nowrap;}

.imageField {max-width:100%; max-height:75px;}

.videoWrapper {position: relative;padding-bottom: 56.25%;padding-top: 25px;height: 0;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}






/*
    #08a0cc - blue
    #7a7a7a - gray
    #7fa109 - green
*/
.btn-info {background-color:#08a0cc;}

#hero { background-color: #262624; background-image:url('../images/home/hero/bg.webp'); background-size:cover;color:#FFF;padding-bottom:100px;padding-top:20px;}
#heroTv {margin-top:20px;background-image:url('../images/home/hero/tv.png'); background-size:cover; width:536px; height:310px; margin-left:auto;margin-right:auto;}
#heroTv img {width:515px;height:290px;margin-left:0px;margin-top:10px;}
#heroTv video {width:515px;height:291px;margin-left:0px;margin-top:9px;}
#hero h1 {text-align:center;font-size:50px;margin-top:30px;}
#hero p {font-size:30px;text-align:center;margin-top:10px;}
#hero .btn { text-transform:uppercase; border-radius:0px; }
#hero .btn-success {background-color:#7fa109;border-color:#7fa109;}
        
#benefits { color:#7a7a7a;  padding-top:40px; padding-bottom:80px; }
#benefits h2 { color:#08a0cc;font-size:40px; font-weight:bold; margin-bottom:40px; }
#benefits h2 span { color:#7fa109; }
#benefits .col-md-3 img {height:58px;margin-top:25px;}
#benefits .col-md-3 b, #benefits .col-md-4 b {display:block;color:#7fa109;text-transform:uppercase;font-size:17px;margin-top:15px;}

#different { background-image:url('../images/home/different/bg.webp'); background-size:cover; background-position:center; color:#FFF;  padding-top:40px; padding-bottom:80px; }
#different h2 { color:#FFF;font-size:40px; font-weight:bold; margin-bottom:40px; }
#feeds a {display:block; border:1px solid #FFF; height:50px;text-align:center;color:#FFF; padding-top:10px;text-transform:uppercase;font-size:18px;font-weight:bold;margin-bottom:10px;text-decoration:none}
#feeds a:hover, #feeds a.active { background-color:#FFF; color: #08a0cc; }
#screenContainer {margin-top:40px;}
#screen {width:942px;height:592px;background-image:url('../images/home/different/screen.png'); background-position-x:right;}
#screen>div {display:none;}
#screen>div.active {display:block;}
#screen img {width:736px;height:414px;margin-left:8px;margin-top:10px;margin-bottom:60px;}
#screen video {width:736px;height:414px;margin-left:8px;margin-top:10px;margin-bottom:60px;}
#screen p {font-size:32px; font-weight:bold;width:740px;margin-bottom:30px;}

#setup { background-image:url('../images/home/setup/bg.png'); background-size:cover; background-position:center; color:#7a7a7a;  padding-top:40px; padding-bottom:80px; }
#setup h2 { color:#08a0cc;font-size:40px; font-weight:bold; margin-bottom:40px; }
#setup h2 span { color:#7fa109; }
#setup .step {min-height:128px;}
#setup .step b a {display:block;font-size:18px;color:#08a0cc;}
#setupDevices {margin-top:70px;}

#testimonials { background-image:url('../images/home/testimonials/bg.webp'); background-size:cover; background-position:center; color:#7a7a7a;  padding-top:40px; padding-bottom:80px; }
#testimonials h2 { color:#08a0cc;font-size:40px; font-weight:bold; margin-bottom:40px; }
#testimonials h2 span { color:#7fa109; }
#testimonials .img-thumbnail {margin-bottom:30px;}
        

#stats { background-image:url('../images/home/stats-bg.webp'); background-size:cover; background-position:center; color:#7a7a7a;  padding-top:60px; padding-bottom:60px; }
#stats h2 { color:#FFF;font-size:40px; font-weight:bold; margin-bottom:0px;}

#signUp { background-image:url('../images/home/signup-bg.webp'); background-size:cover; background-position-x:center; background-position-y:top; padding-top:70px; color:#7a7a7a; padding-bottom:50px; }
#signUp h2 { color:#08a0cc;font-size:40px; font-weight:bold; }
#registrationForm {margin-top:30px;}
#registrationForm .header {background-color:#08a0cc;height:75px;text-transform:uppercase;font-size:40px;vertical-align:middle;color:#FFF;text-align:center;padding-top:10px;}
#registrationForm .content {background-color:#FFF;padding:25px;}
#registrationForm .content input, #registrationForm .content select {padding:10px !important;}
#registrationForm .content select {height:50px;}


#footer {height:355px;background-image:url('../images/footer/bg.png');background-size:cover;background-position:center center;color:#FFF;text-align:center;}
#footerLogo {text-align:center;padding-top:50px;padding-bottom:30px;}
#footerSocial {text-align:center;padding-top:20px;}
#footerSocial img {margin-left:10px;margin-right:10px;}

        
@media (max-width: 991px) { 
    #screen {width:471px;height:296px; background-size:100%; background-repeat:no-repeat;}
    #screen img, #screen video {width:368px;height:207px;margin-left:4px;margin-top:5px;margin-bottom:60px;}
    #screen p {font-size:22px; width:390px;}
}

@media (max-width: 600px) { 
    #heroTv {margin-top:20px; width:268px; height:155px; margin-left:auto;margin-right:auto;}
    #heroTv img, #heroTv video {width:258px;height:145px;margin-left:0px;margin-top:5px;}
}

@media (max-width: 520px) {
    #screen {width:314px;height:197px; background-size:100%; background-repeat:no-repeat;}
    #screen img, #screen video {width:245px;height:138px;margin-left:3px;margin-top:3px;margin-bottom:40px;}
    #screen p {font-size:18px; width:250px;}
}



@media (max-width: 767px) { 
    #sidebarToggle {display:block!important;margin-top:10px;font-size:20px;color:#000;}
}