@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');


HTML,BODY
	 {
 	scrollbar-track-color:#111;
 	scrollbar-face-color:#000;
	scrollbar-3dlight-color:#333;
	scrollbar-darkshadow-color:#333;
	scrollbar-shadow-color:#333;
	scrollbar-arrow-color:#333;
	 }
::-webkit-scrollbar {
    height:12px;
    width:12px;
    background:#000;
}

::-webkit-scrollbar-thumb {
    background:#000;
    border:1px solid #333;
    /*-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);*/
}

::-webkit-scrollbar-corner {
    background: #000;
}
body {
    font-family:'Open Sans', sans-serif;
    }
.container-fluid {
    padding:0;
    margin:0;
    }
#topbar {
    background:#0a132b;
    width:100%;
    max-width:414px;
    height:50px;
    position:fixed;
    top:0;
    left:0;
    z-index:9999999999999999999;
    }
#topbar img {
    display:block;
    margin:0 auto;
    padding:14px 0;
    }
#topbar button.btn-menu {
    background:url('../img/btn-home.png') no-repeat;
    background-size:27px 27px;
    width:27px;
    height:27px;
    border:0;
    position:absolute;
    top:10px;
    left:15px;
    }
#topbar button.btn-search {
    background:url('../img/btn-search.png') no-repeat;
    background-size:27px 27px;
    width:27px;
    height:27px;
    border:0;
    position:absolute;
    top:10px;
    right:15px;
    }
#menu {
    z-index:9999999;
    width:100%;
    position:fixed;
    top:-500px;
    left:0;
    transition:top 0.25s;
    background-image:linear-gradient(#0a132b, #043557);
    }
#menu.active {
	top:50px;
    }
#menu ul {
    list-style-type:none;
    padding-left:0;
    margin:0;
    }
#menu li {
    color:white;
    padding:20px 0 20px 80px;
    border-bottom:1px solid white;
    font-size:18px;
    font-weight:300;
    background:url('../img/btn-blue-play.png') no-repeat;
    background-size:30px 30px;
    background-position:90% 20px;
    }
#menu li:before {
    background:none;
    }
#menu #btn-menu-home {
    text-transform:uppercase;
    font-size:24px;
    background:url('../img/btn-blue-play.png') no-repeat;
    background-size:30px 30px;
    background-position:8% 20px;
    }
footer {
    background:#0a132b;
    width:100%;
    height:75px;
    }


/* Text Styles */

h1 {
    font-size:36px;
    font-weight:600;
    color:white;
    text-transform:uppercase;
    }
h2 {
    font-size:24px;
    }
h2.green {
    color:LimeGreen;
    text-transform:uppercase;
    margin:30px 0;
    }
h2.live {
    color:Chartreuse;
    font-style:italic;
    text-align:right;
    font-weight:400;
    }
h3 {
    font-size:16px;
    font-weight:600;
    color:white;
    }
h3.centered {
    text-align:center;
    }
h4 {
    font-size:12px;
    font-weight:300;
    color:white;
    line-height:1.5em;
    }
p{
    font-size:16px;
    color:white;
    font-weight:300;
    }
ul {
    list-style-type:none;
    padding-left:0;
    }
li {
    font-size:16px;
    line-height:1.82em;
    color:white;
    font-weight:300;
    padding:0 0 20px 32px;
    }
li:before{
   content:'';
   display:inline-block;
   height:30px;
   width:30px;
   background:url('../img/bullet-icon.png') top left no-repeat;
   background-size:15px 15px;
   position:absolute;
   left:30px;
   margin-top:8px;
}
span.thin {
    font-weight:300;
    text-transform:uppercase;
    }
span.medium {
    font-weight:400;
    text-transform:uppercase;
    }


/* Buttons */

button.icon-btn.login-btn {
    padding:0;
    border:none;
    height:42px;
    background:none;
    margin:0 auto;
    display:block;
    }
button.icon-btn.login-btn .btn-box {
    background-image: linear-gradient(#28aee8, #31e8de);
    color:#fff;
    font-style:italic;
    font-size:28px;
    padding:0 30px;
    float:left;
    margin-right:10px;
    }
button.icon-btn.login-btn .btn-icon {
    background-image:url('../img/btn-icon-login.png');
    width:40px;
    height:40px;
    background-size:40px 40px;
    float:left;
    }
button.section-btn {
    display:block;
    padding:0;
    margin-bottom:30px;
    -webkit-appearance:none;
	border-radius:0;
	background:none;
	border:0;
	width:100%;
	padding-top:30px;
	border-top:4px solid DarkGray;
    }
button.section-btn h3 {
    border:1px solid white;
    padding:8px 22px;
    background:#231f20;
    float:left;
    margin:0 6px 0 0;
    }
button.section-btn .btn-box  span {
	font-weight:600;
	}
button.section-btn .btn-icon {
    background:url('../img/btn-blue-play.png');
    background-size:35px 35px;
    width:35px;
    height:35px;
    float:left;
    }
.content {
    height:100%;
    }


/* Log In Page */

.content.login {
/*    background-image:linear-gradient(#34587b, black);*/
    background-image:url('../img/bkg-login.jpg'), linear-gradient(#34587b, #011519, black);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:100% auto;
    height:100vh;
    }
.login-logo {
    background:url('../img/logo-tech-caddie.png') center center no-repeat;
    background-size:100% auto;
    width:93%;
    height:100px;
    margin:0 15px;
    }
.content.login a {
    color:Cyan;
    text-decoration:none;
    text-align:center;
    width:auto;
    margin:0 auto;
    display:block;
    margin-top:50px;
    font-size:16px;
    text-shadow:3px 3px 3px 10px black;
    }
.content.login .subtext {
    font-size:16px;
    font-weight:300;
    color:DarkGray;
    text-align:center;
    width:100%;
    letter-spacing:2px;
    margin-bottom:50px;
    }
.login-box {
    position:absolute;
    top:28%;
    width:100%;
    }


/* Landing Page */

.logo {
    background:url('../img/logo-tech-caddie.png') center center no-repeat;
    background-size:contain;
    width:180px;
    height:40px;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:5px;
    cursor:pointer;
    }
.content.landing {
    background:#000;
    }
.content.landing #main-story {
    width:100%;
    height:330px;
    /*background:black;
    background:url('../img/bkg-landing-main-story.jpg') top left no-repeat;
    background-size:100% auto;*/
    margin-top:50px;
    position:relative;
    }
.content.landing .video-bg {
    position: absolute;
    top:50px;
    left:0;
    z-index:0;
    width:100%;
    height:330px;
    overflow:hidden;
	}
.video-bg video {
    width:600px;
    height:478px;
    position:absolute;
    top:-75px;
    left:-30px;
    }
.main-story-container {
    position:absolute;
    top:50px;
    left:0;
    z-index:999;
    padding:0 30px;
    }
.vid-bottom-gradient {
    background-image: linear-gradient(transparent, black);
    width:100%;
    height:150px;
    position:absolute;
    bottom:-9px;
    left:0;
    z-index:999;
    }
.content.landing #main-story .main-story-label {
    background:none;
    border:1px solid white;
    padding:2px 6px;
    font-size:12px;
    font-weight:400;
    color:white;
    display:inline-block;
    margin-bottom:5px;
    }
.content.landing #main-story h2 span {
    font-weight:600;
    }
.content.landing #main-story h1, .content.landing #main-story h2, .content.landing .main-story-label {
    text-shadow:3px 3px 10px #333;
    }
#search, #top3, #categories {
    width:100%;
    padding-bottom:40px;
    display:inline-block;
    }
#search {
    padding-top:20px;
    }
#search input {
    height:40px;
    float:left;
    margin-left:64px;
    margin-right:4px;
    width:56%;
    text-align:center;
    border-radius:0;
    border:none;
    }
#search button {
    background:url('../img/btn-search.png') top left no-repeat;
    background-size:40px 40px;
    width:40px;
    height:40px;
    border:none;
    float:left;
    }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color:#ccc;
	}
::-moz-placeholder { /* Firefox 19+ */
	color:#ccc;
	}
:-ms-input-placeholder { /* IE 10+ */
	color:#ccc;
	}
:-moz-placeholder { /* Firefox 18- */
	color:#ccc;
	}
#categories, #blue-gradient-bkg {
    padding:0 30px;
    }
#top3 {
    padding:0 15px;
    margin-bottom:30px;
    }
#top3 .top3-box:last-child {
    margin-right:0;
    }
#top3 .top3-box img {
    border:1px solid #ccc;
	}
#top3 .overlay-icon {
    width:40px;
    height:40px;
    background:yellow;
    margin:0 auto;
    margin-top:12px;
    position:absolute;
    top:24px;
    left:0;
    right:0;
    margin:auto;
    }
#top3 .overlay-icon.jobaids {
    background:url('../img/overlay-btn-jobaids.png') top left no-repeat;
    background-size:40px 40px;
    }
#top3 .overlay-icon.events {
    background:url('../img/overlay-btn-events.png') top left no-repeat;
    background-size:40px 40px;
    }
#top3 .overlay-icon.handson{
    background:url('../img/overlay-btn-handson.png') top left no-repeat;
    background-size:40px 40px;
    }
#top3 .overlay-icon.concepts {
    background:url('../img/overlay-btn-concepts.png') top left no-repeat;
    background-size:40px 40px;
    }
#categories .categories-box {
    border:1px solid #ccc;
    height:150px;
    width:100%;
    margin-bottom:20px;
    background-size:cover !important;
    padding:0 30px;
    position:relative;
    }
.categories-box .overlay-icon {
    width:50px;
    height:50px;
    background:yellow;
    margin:0 auto;
    margin-top:12px;
    position:absolute;
    bottom:30px;
    left:42%;
    }
.categories-box .overlay-icon.blue-play {
    width:50px;
    height:50px;
    background:url('../img/overlay-btn-blue-play.png');
    background-size:50px 50px;
    margin:0 auto;
    margin-top:12px;
    position:absolute;
    bottom:30px;
    left:0;
    /*left:42%;*/
    /*opacity:0.6;*/
    }
.categories-box#video-orm {
    background:url('../img/vid-thumb-orm.jpg') center center no-repeat;
    }
.categories-box#video-airpressure {
    background:url('../img/vid-thumb-airpressure.jpg') center center no-repeat;
    }
.categories-box#video-eosh {
    background:url('../img/vid-thumb-eosh.jpg') center center no-repeat;
    }
.categories-box#video-surveillance {
    background:url('../img/vid-thumb-surveillance.jpg') center center no-repeat;
    }
.categories-box#video-communication {
    background:url('../img/vid-thumb-communication.jpg') center center no-repeat;
    }
.categories-box#video-navaids {
    background:url('../img/vid-thumb-navaids.jpg') center center no-repeat;
    }
.categories-box#video-environmental {
    background:url('../img/vid-thumb-environmental.jpg') center center no-repeat;
    }
.categories-box#video-automation {
    background:url('../img/vid-thumb-automation.jpg') center center no-repeat;
    }
#blue-gradient-bkg {
    background-image:linear-gradient(black, #032745);
    padding-top:20px;
    }
footer {
    padding:10px;
    }
footer img {
    display:block;
    margin:0 auto;
    padding:10px 0;
    }
footer p {
    text-align:center;
    color:white;
    font-size:8px;
    margin-bottom:0;
    }
.new-ribbon {
    position:absolute;
    top:0;
    right:0;
    width:400px;
    background:url('../img/new-ribbon.png') top right no-repeat;
    background-size:70px 70px;
    width:70px;
    height:70px;
    }


/* Main Story Page */

.content.main-story {
    background-color:#000;
    background-image:url('../img/bkg-blue-gradient.jpg');
    background-position:0 300px;
    background-repeat:no-repeat;
    background-size:100% auto;
    /*padding:0 30px;*/
    height:100vh;
    }
.content.main-story h2 {
    color:white;
    font-weight:600;
    text-transform:uppercase;
    padding:10px 30px;
    }
.content.main-story p {
    padding:0 30px;
    }
.content.main-story .live-gif {
    position:absolute;
    top:60px;
    right:20px;
    z-index:999999999;
    width:20%;
    height:auto;
    }
.content.main-story .vid-container {
    margin-top:50px;
    }


/* Top 3 */

.content.top3 {
    padding:80px 30px 0 30px;
    background:url('../img/bkg-blue-gradient.jpg') top right no-repeat;
    background-size:cover;
    }
.content.top3 h2 {
    border:1px solid white;
    padding:5px 10px;
    color:white;
    font-weight:600;
    text-transform:uppercase;
    width:180px;
    text-align:center;
    margin:0 auto;
    font-style:italic;
    }
.content.top3 h2 span {
    font-weight:300;
    font-style:normal;
    }
.content.top3 h3 {
    margin-top:0;
    }
    }
.content.top3 img {
    border:1px solid white;
    }
.content.top3 .row.top3-item {
    padding:20px 0;
    }
.overlay-icon {
    width:50px;
    height:50px;
    background:yellow;
    margin:0 auto;
    margin-top:12px;
    position:absolute;
    top:50px;
    left:0;
    right:0;
    margin:auto;
    }
.overlay-icon.jobaids {
    background:url('../img/overlay-btn-jobaids.png') top left no-repeat;
    background-size:50px 50px;
    }
.overlay-icon.events {
    background:url('../img/overlay-btn-events.png') top left no-repeat;
    background-size:50px 50px;
    }
.overlay-icon.handson{
    background:url('../img/overlay-btn-handson.png') top left no-repeat;
    background-size:50px 50px;
    }
.overlay-icon.concepts {
    background:url('../img/overlay-btn-concepts.png') top left no-repeat;
    background-size:50px 50px;
    }
.content.categories {
    background:url('../img/bkg-blue-gradient.jpg') top right no-repeat;
    background-size:cover;
    padding:80px 30px 0 30px;
    }


/* Top 3 Story Pages */

.content.top3-story, .content.story {
    background:#000;
    padding:50px 0;
    height:100vh;
    }
.content.top3-story .story-text, .content.story .story-text {
    padding:30px 30px 0 30px;
    height:auto;
    }
.content.top3-story .story-text h2, .content.story .story-text h2 {
    color:white;
    font-weight:600;
    text-align:left;
    text-transform:uppercase;
    background:url('../img/overlay-btn-jobaids.png') no-repeat;
    background-size:26px 26px;
    padding-left:30px;
   /* height:26px;*/
    margin:5px 0 20px 0;
    padding-left:40px;
    }
.content.top3-story .story-text h2.concepts, .content.story .story-text h2.concepts {
    background:url('../img/overlay-btn-concepts.png') no-repeat;
    background-size:26px 26px;
    }
.content.top3-story .story-text h2.handson, .content.story .story-text h2.handson {
    background:url('../img/overlay-btn-handson.png') no-repeat;
    background-size:26px 26px;
    }
.content.top3-story .story-text h2.jobaids, .content.story .story-text h2.jobaids {
    background:url('../img/overlay-btn-jobaids.png') no-repeat;
    background-size:26px 26px;
    }
.content.top3-story .story-text h2.events, .content.story .story-text h2.events {
    background:url('../img/overlay-btn-events.png') no-repeat;
    background-size:26px 26px;
    }
/*.content.top3-story .story-text p, .content.story .story-text p {
    color:white;
    line-height:1.82em;
    font-size:12px;
    font-weight:300;
    }*/
.content.top3 .categories-box {
    border:1px solid #ccc;
    height:120px;
    width:100%;
    margin-bottom:20px;
    background:green;
    position:relative;
    padding:0 30px;
    }


/* Categories Page */

.content.categories {
    background:url('../img/bkg-blue-gradient.jpg') top right no-repeat;
    background-size:cover;
    padding:80px 30px 0 30px;
    }
.content.categories h2 {
    border:1px solid white;
    padding:5px 10px;
    color:white;
    font-weight:300;
    text-transform:uppercase;
    width:220px;
    text-align:center;
    margin:0 auto;
    }
.content.categories .categories-box:first-of-type {
	margin-top:40px;
    }
.content.categories .categories-box:last-of-type {
	margin-bottom:40px;
    }
.content.categories .categories-box {
    border:1px solid #ccc;
    height:120px;
    width:100%;
    margin-bottom:20px;
    background:green;
    position:relative;
    padding:0 30px;
    }
.content.categories .categories-box .link-title {
    font-size:12px;
    font-weight:600;
    padding-top:15px;
    text-align:center;
    color:white;
    }
.content.categories .categories-box .link-title span {
    font-weight:300;
    text-transform:uppercase;
    }
.content.categories .categories-box .overlay-icon {
    width:50px;
    height:50px;
    margin:0 auto;
    margin-top:12px;
    left:0;
    }


/* Links Page */

.content.links {
    padding:80px 30px 0 30px;
    background:url('../img/bkg-blue-gradient.jpg') top right no-repeat;
    background-size:cover;
    height:100vh;
    }
.content.links h2 {
    border:1px solid white;
    padding:5px 10px;
    color:white;
    font-weight:300;
    text-transform:uppercase;
    width:140px;
    text-align:center;
    margin:0 auto;
    }
.content.links ul {
    padding-left:10px;
    padding-top:50px;
    }
.content.links li {
    padding-bottom:30px;
    font-weight:300;
    }



/* Filters Page */

.content.filters {
    padding:80px 30px 0 30px;
    background:url('../img/bkg-blue-gradient.jpg') top right no-repeat;
    background-size:cover;
    height:100vh;
    }
.content.filters h2 {
    border:1px solid white;
    padding:5px 10px;
    color:white;
    font-weight:300;
    text-transform:uppercase;
    width:140px;
    text-align:center;
    margin:0 auto;
    margin-bottom:30px;
    }
.content.filters .filter-box {
    float:left;
    width:46%;
    margin-top:25px;
    position:relative;
    height:210px;
    }
.content.filters .filter-box:nth-child(even) {
	margin-right:25px;
	}
.content.filters .filter-box.concepts {
    background:url('../img/overlay-btn-concepts.png') top left no-repeat;
    background-size:contain;
    }
.content.filters .filter-box.handson {
    background:url('../img/overlay-btn-handson.png') top left no-repeat;
    background-size:contain;
    }
.content.filters .filter-box.jobaids {
    background:url('../img/overlay-btn-jobaids.png') top left no-repeat;
    background-size:contain;
    }
.content.filters .filter-box.events {
    background:url('../img/overlay-btn-events.png') top left no-repeat;
    background-size:contain;
    }
.content.filters .filter-box h3 {
    color:white;
    text-transform:uppercase;
    font-weight:300;
    font-size:22px;
    text-align:center;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    }
.content.filters .filter-box img {
    border:1px solid white;
    }
.filter-icon {
    width:50%;
    margin:0 auto;
    margin-top:30px;
    background:url('../img/overlay-btn-concepts.png') top left no-repeat;
    height:212px;
    background-size:207px 212px;
    }
.filter-icon.concepts {
    background:url('../img/overlay-btn-concepts.png') top left no-repeat;
    background-size:207px 212px;
    }
.filter-icon.handson {
    background:url('../img/overlay-btn-handson.png') top left no-repeat;
    background-size:207px 212px;
    }
.filter-icon.jobaids {
    background:url('../img/overlay-btn-jobaids.png') top left no-repeat;
    background-size:207px 212px;
    }
.filter-icon.events {
    background:url('../img/overlay-btn-events.png') top left no-repeat;
    background-size:207px 212px;
    }
.video-info.filter h2 {
    border:none !important;
    margin-bottom:40px !important;
    }



/* Video Pages */

.content.video {
    padding-top:50px;
    background:url('../img/bkg-blue-gradient.jpg') top right no-repeat;
    background-size:cover;
    }
.content.video .overlay-icon {
    top:30%;
    }
.mejs-overlay-button {
    background:url('../img/vid-play-btn.png') no-repeat;
    background-size:100px 100px;
    left:50%;
    top:45%;
    }
.video-list-box {
    background:white;
    display:block;
    overflow:auto;
    margin:20px;
    }
.video-list-box .video-list-text {
    padding:10px 10px 10px 20px;
    }
.video-list-box h3 {
    color:black;
    text-transform:uppercase;
    margin-top:0;
    }
.video-list-box p {
    color:black;
    }
.video-list-box .video-list-img {
    padding:10px 0 10px 10px;
    }
.video-list-box .video-list-icon {
    padding:40px 0 0 0;
    width:30px;
    height:30px;
    position:relative;
    }
.video-list-box .video-list-icon img {
    position:absolute;
    top:40px;
    right:0;
    }


/* Style from Recurrent WBT */
.mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a { 
	cursor:default;
    }
.mejs-captions-layer {
	font-size:20px;
	line-height:29px;
	}
.mejs-captions-position {
	bottom:40px;
	}
.mejs-captions-text {
	background:rgba(20, 20, 20, 0.8);
	white-space:normal;
	}
.mejs-container .mejs-controls div {
    width:22px;
    }
.mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a {
    border-radius:0;
    }
.mejs-controls .mejs-time-rail {
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    height:8px;
    }
.mejs-controls .mejs-time-rail .mejs-time-total {
    border:1px solid #fff;
    height:10px;
    background:#000;
    }
.mejs-controls .mejs-time-rail .mejs-time-loaded, .mejs-controls .mejs-time-rail .mejs-time-current {
    height:8px;
    }
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background:#000;
    }
.mejs-controls .mejs-time-rail .mejs-time-current {
    background:#fff;
    }
.slide.fullslide-video .slide-content {
    margin-top:-30px;
    }
.slide.fullslide-video .footer-logos {
    bottom:32px;
    }
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background:#fff;
    border-radius:0;
    }
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    background:#000;
    border:1px solid #fff;
    border-radius:0;
    }

.content.video .video-info h2 {
    border:1px solid white;
    padding:5px 10px;
    color:white;
    font-weight:300;
    text-transform:uppercase;
    width:100px;
    text-align:center;
    margin:0 auto;
    margin-bottom:15px;
    margin-top:30px;
    }
.content.video .video-info h3 {
    text-align:center;
    width:100%;
    padding:0 30px 15px 30px;
    }