* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; width: 100%; font-family: 'Hind', sans-serif;}

IFRAME { border: 0; width: 100% }

.container { width: 1024px; margin: 0 auto; }
.container_flex { display: flex; flex-direction: row; }

#GT_DialogMask { background-color: rgba(0, 0, 0, 0.5); }
#GT_DialogBasic {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
    width: auto;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #2e6da4;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
}
.btn:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}

.GT_DialogTitle { font-size: 18px; line-height: 22px; padding: 15px; border-bottom: 1px solid #e5e5e5; }
.GT_DialogText { padding: 15px; font-size: 14px; }
.GT_DialogButtons {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

.form-group {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}
.form-group label { display: block; color: #333333; }
.form-group input, .form-group select { width: 100%; margin-top: 5px; }
.anti_container { margin-top: 5px; width: 100%; }
.form-group textarea { width: 100%; margin-top: 5px; height: 50px; }

input, select, textarea {
    vertical-align: middle;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.1) inset;
    box-shadow: 0 0 3px rgba(0,0,0,0.1) inset;
    border: 1px solid #c1c1c1;
    font-size: 13px;
    color: #333;
    height: 30px;
    line-height: 17px;
    box-sizing: border-box;
    background: #ffffff;
    padding: 0;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    font-family: inherit;
}
.UploadContainer input { transition: none; }

input[type=text], textarea, input[type=date] {
    padding: 0 5px;
}
input:focus, textarea:focus, select:focus {
    border-color: #0699AE;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(6, 153, 174, 0.40);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(6, 153, 174, 0.40);
}
input[type=submit], button.button {
    vertical-align: top;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 12px;
    font-weight: normal;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid #008cc9;
    border-radius: 3px;
    height: 26px;
    line-height: 26px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
    color: #fff !important;
    background-color: rgba(20, 158, 165, 1);
    transition: all ease-in-out .15s;
}
input[type=submit]:hover, button.button:hover {
    background-color: #042885;
    border: 1px solid #04225b;
}

HEADER { background-image: url('../img/johnny-watcher_header_background.jpg'); background-repeat: no-repeat; background-position: center top; height: 495px; width: 100%; }

.header_box { padding:0; position: relative; height: 100%; background-image: url('../img/johnny-watcher_logo.png'); background-repeat: no-repeat; background-position: left center; }
.header_box P { width: 50%; padding:0 20px 0 0;  position: absolute; right: 0; margin-top: 180px; color: #ffffff; font-weight: normal; font-size: 20px; line-height: 25px; }
.header_box P A { font-weight: bold; text-decoration: underline; color: #ffffff; line-height: 48px; }

.msf_link { position: absolute; right: 30px; bottom: 50px; }

.website_configuration { display: block; float: right; font-size: 25px; color: #9dabd2; padding: 6px 6px 5px 6px; }
.website_configuration:hover { color: #ffffff; }

NAV { background-color: #efa931; width: 100%; }
NAV UL { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: row; }
NAV UL LI { padding: 20px 20px 5px 0; flex-grow: 1; flex-basis: 0; }
NAV UL LI.not-yet { opacity: 0.2; }
NAV UL LI:last-child { padding-right: 0; }
NAV UL LI A { outline: 0; text-decoration: none; display: block; }
NAV UL LI A.title { font-size: 14px; color: #201707; }
NAV UL LI SPAN {
    font-size: 18px;
    color: #201707;
    font-family: 'Oswald', sans-serif;
    display: inline-block;
    max-width: 154px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 1px;
}
NAV UL LI.active A SPAN { color: white; }
NAV UL LI A .nav_icon { position: relative; display: inline-block; width: 100%; background-size: cover; background-position: center; height: 116px; }
NAV UL LI A .nav_icon .nav_btn_play { position: absolute; left: 0; bottom: 0; display: inline-block; width: 40px; height: 40px; line-height: 36px; background-color: #000000; color: #ffffff; text-align: center; }
NAV UL LI.active A .nav_icon .nav_btn_play { background-color: #ff0528; }
NAV UL LI A .nav_icon .nav_btn_play .fa { vertical-align: middle; font-size: 22px; }

.episode_content { flex-grow: 1; }
.episode_content IFRAME { display: none; }

.grow0 { flex-grow: 0; }

.episode_content_box { padding: 40px 0; }

.episode_video_box { flex-grow: 1; flex-basis: 0; min-height: 550px; cursor: pointer; }
.episode_video_image_box { position: relative; margin-bottom: 10px; font-size: 0; width: 640px; padding-top: 64%; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; }
.episode_video_image_box iframe { display: none; }

.episode_video_box .play_icon { position: absolute; width: 100px; height: 100px; top: 140px; left: calc(50% - 50px); background-color: #f4b631; color: #ffffff; text-align: center; line-height: 100px; font-size: 40px; }
.episode_video_box .play_icon:hover { background-color: #ff0528; }
.episode_video_box P { font-family: 'Oswald', sans-serif; font-weight: bold; font-size: 24px; color: #ffffff; margin-top: 0; }
.episode_description_box { flex-grow: 1; flex-basis: 0; display: flex; justify-content: flex-end; color: #565656; font-size: 16px; }
.episode_description_box P { width: 250px; word-break: break-word; margin-bottom: 50px; }

.episode_video_box IMG { width: 100% }

.episode_description_box H1 { font-size: 25px; }
.episode_description_box H2 { font-size: 23px; }
.episode_description_box H3 { font-size: 21px; }
.episode_description_box H4 { font-size: 19px; }
.episode_description_box H5 { font-size: 17px; }
.episode_description_box H6 { font-family: 'Oswald', sans-serif; font-size: 15px; margin: 0 0 20px; }

.episode_content .content { cursor: pointer; display: block; height: 100%; width: calc(100% - 20px); position: relative; color: #ffffff; font-size: 0; font-weight: bold; text-decoration: none; margin-left: 20px; text-overflow: ellipsis; }
.episode_content .content span { position: absolute; display: inline-block; top: 0; left: 0; font-size: 20px; padding: 15px; z-index: 2; text-overflow: ellipsis; word-break: break-word; overflow: hidden; max-height: 100%;    width: 100%;
    white-space: nowrap; }
.episode_content .content span.content_img { position: static; height: 100%; width: 100%; min-width: 314px; background-size: cover; }
.episode_content .content span.opacity_layout { height: 100%; width: 100%; min-width: 314px; z-index: 1; background-color: rgba(0, 0, 0, 0.5); }
.episode_content .content span.content_btn { top: auto; bottom: 0; left: 0; width: 50px; height: 50px; line-height: 50px; background-color: #ff0528; margin: 0; padding: 0; text-align: center; z-index: 2;}
.episode_content .content span.content2_btn { background-image: url('../img/pencil.png'); background-size: cover; }
.episode_content .content:hover span.content_btn { background-color: #f4b631; }
.episode_content .content span.content_btn .fa { vertical-align: middle; font-size: 28px; }
.episode_content .content span.content3_btn { bottom: 0; }

.episode_title { font-family: 'Oswald', sans-serif; font-size: 25px; margin: 0; }

.vertical_content { height: 50%; }
.vertical_content .content { margin: 0; width: 100%; }
.vertical_content:first-child .content { padding-bottom: 10px; }
.vertical_content:first-child .opacity_layout { height: calc(100% - 10px); }
.vertical_content:first-child .content span.content_btn { bottom: 11px; }
.vertical_content:last-child .content { padding-top: 10px; }
.vertical_content:last-child .opacity_layout { height: calc(100% - 10px); top: 10px; }

.list_module { margin: 0; padding: 0; }

FOOTER { height: 50px; background-color: #353535; width: 100% }
FOOTER P { color: #a8a8a8; text-align: right; line-height: 50px; margin: 0; }
FOOTER P .fa { font-size: 24px; vertical-align: middle; margin:0 15px; }
FOOTER a { color: #a8a8a8; text-decoration: none; display: inline-block; line-height: 50px; }
FOOTER a:hover { color: white; }
FOOTER span { font-family: 'Oswald', sans-serif; font-size: 14px; display: inline-block; vertical-align: middle; margin-right: 20px; }

.random_footer_box { background-image: url('../img/Desk_Footer_2050px.png'); background-position: center top; background-repeat: no-repeat;  }
.random_footer_box P { margin: 0; }

.GifLoading { background-image: url(../img/Loading.gif); width: 32px; height: 32px; display: inline-block; }
.GifLoadingMini { background-image: url(../img/LoadingMini.gif); width: 16px; height: 16px; display: inline-block; }
#Tooltip { font-family: "Roboto"; background-color: rgb(75, 75, 75); color: white; font-size: 14px; max-width: 300px; }

.random_footer { display: flex; flex-direction: row; align-items: center; height: 260px; padding-top: 30px; }
.random_footer > div { flex-basis: 0; flex-grow: 1; }
.random_footer P { font-family: 'Hind', sans-serif; font-size: 23px; color: #ffffff; }
.random_footer P .fa { color: #f4b631; font-size: 26px; vertical-align: middle; width: 30px; text-align: center; }
.random_footer .bigger { font-family: 'Oswald', sans-serif; font-size: 20px; line-height: 24px; margin-bottom: 20px; margin-top: 10px; letter-spacing: 1px; }
.random_footer .big { margin-top: 20px; font-family: 'Oswald', sans-serif; font-size: 74px; line-height: 100px; }
.random_footer .hashtag { font-family: 'Oswald', sans-serif; font-size: 40px; line-height: 40px; color: #f4b631; }
.random_footer a { text-decoration: none; color: #ffffff; line-height: 25px; display: inline-block; }
.random_footer_links_box p { line-height: 48px; }
.facebook-share-button { margin-top: 20px; }

#GT_DialogMask2 { background-color: rgba(2,34,94,0.80); }
.GT_DialogContainer { max-width: 50%; min-width: 50%; }
.GT_DialogContainer_box { background-color: white; float: left; overflow: auto; width: 100%; }
.GT_DialogContainer IMG { width: 100%; float: left; }
.GT_DialogContainer_box IMG { float: none; }
.GT_DialogContainer_box:after { content: ''; width: 100%; display: block; clear: both; height: 0; line-height: 0; }

.content1 { display: none; padding: 20px; }
.content2 { display: none; padding: 20px; }
.content3 { display: none; padding: 20px; }
.see_more_modal { display: none; padding: 20px; text-align: center; }
.see_more_modal p { padding: 0; }
@media (max-width: 1024px) {

}

.le-labbo_ref { display:none; float: left; font-size: 12px; margin: 0 0 0 20px; }
@media (min-width: 768px) {
    #GT_DialogBasic {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
        max-width: 600px;
    }
}
@media (min-width: 500px) {
    .le-labbo_ref {
        display: inline-block;
    }
}