/* jura-regular - latin */
@font-face {
    font-family: 'Jura';
    font-style: normal;
    font-weight: 400;
    src: url('../res/fonts/jura/jura-v15-latin-regular.eot');
    src: local(''),
        url('../res/fonts/jura/jura-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../res/fonts/jura/jura-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('../res/fonts/jura/jura-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('../res/fonts/jura/jura-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../res/fonts/jura/jura-v15-latin-regular.svg#Jura') format('svg'); /* Legacy iOS */
}

body {  margin: 0px; background-image: url('../res/images/background.png'); background-position: center; background-repeat: no-repeat; background-size: cover}

.blink { animation: blink-animation 1s steps(5, start) infinite; -webkit-animation: blink-animation 1s steps(5, start) infinite;}
@keyframes blink-animation {
    to { visibility: hidden; }
}
@-webkit-keyframes blink-animation {
    to { visibility: hidden; }
}

.fg {color: #F2F261}
.bg {background-color: #404040}
.noul { text-decoration: none; }

* {font-family: 'Jura'; color: #F2F261 }
.header { font-size: 66px; font-weight: bold; margin: 0px 0px 0px 12px; }
.tagline { font-size: 22px; margin: 0px 0px 0px 12px; }
.cmd { color: #33AA33; font-size: 24px;}
.codebackgrnd { color: rgba(160, 182, 247, 1.0); }

.videoframe {width: 560px; height: 315px }

.epi_paginator {height: 107px; min-height: 107px; text-align: center; padding: 5px; border:1px solid #F2F261; border-radius: 3px; margin-top: 5px; margin-left: 3px; margin-right: 3px; white-space: nowrap; overflow-x: hidden;}
.img_thumb {margin-top: 3px; margin-left: 5px; margin-right: 5px; border: 1px dashed #F2F261; border-radius: 6px; max-width: 179px;}

.dd { width: 30%; border: 1px dashed #F2F261; border-radius: 6px; margin: 0 auto; }
.dd_table { width: 100%; }
.dd_td { text-align: left; padding-left: 5px; }
.dd_button { cursor: pointer; }
.dd_arrow { width: 100px }
.dd_menu { position: absolute; width: 30%; height: 350px; overflow-x: hidden; overflow-y: auto;border:1px dashed #F2F261; border-radius: 6px; visibility: hidden; opacity: 0;}
.dd_item { text-align: left; background-color: #292826; }
.dd_item:hover { background-color: #292855; }
.dd_img { vertical-align: top; margin: 4px 0px 4px 4px }
.dd_text { display: inline-block; width: 350px; white-space: normal; font-size: 20px; }

.hide { opacity: 0; transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; }
.show { opacity: 1; transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear;}

.epi_content {padding: 5px; margin: 5px 0px 5px 0px; text-align: center;}
.epi_title {font-size: 40px; font-weight: bold; margin-bottom: 5px;}
.epi_desc {font-size: 20px; margin: 5px 20vw 5px 20vw; text-align:left;}
.epi_expr {margin: 5px 2px 5px 2px; text-align: center; padding: 5px;}
.epi_canvas {border: 1px dashed #e1e1e1;}
.epi_source {word-wrap: normal; margin: 5px 0px 5px 0px; padding: 5px; }
.link_button {background-color: #F2F261; color: #292826; padding: 5px; margin: 5px; border-radius: 5px; font-size: 20px;}

.ft {text-align: center; display: table}
.ft_ln { opacity: 0.5 }
.ft_tc { display: table-cell; width: 50%}
.ft_hd { margin-bottom: 10px; font-weight: bold; font-size: 22px; }
.ft_dsc { width: 40%; font-size: 16px; text-align: left; margin: 0 auto; }
.ft_lnk { display: block; margin-bottom: 10px }
.ft_lnk:hover { color: #FFAA21 }
.ft_lnk:active { color: #FFAA21 }
.ft_cpy { margin: 40px 10px 10px 10px; text-align: center; font-size: 14px; opacity: 0.7 }

/* Large desktop */
@media (min-width: 1008px) {
    .header { font-size: 66px; margin: 0px 0px 0px 12px; }
    .tagline { font-size: 22px; margin: 0px 0px 0px 12px; }
    .epi_paginator {height: 107px; min-height: 107px; padding: 5px; margin-top: 5px; margin-left: 3px; margin-right: 3px;}
    .img_thumb {margin-top: 3px; margin-left: 5px; margin-right: 5px; border-radius: 6px; max-width: 179px;}

    .dd { width: 40%; border-radius: 6px; }
    .dd_td { padding-left: 5px; }
    .dd_arrow { width: 100px }
    .dd_menu { width: 40%; height: 350px; border-radius: 6px;}
    .dd_img { margin: 4px 0px 4px 4px }
    .dd_text { width: 380px; font-size: 20px; margin: 4px 0px 0px 0px;}

    .videoframe {width: 560px; height: 315px; }

    .epi_content {padding: 5px; margin: 5px 0px 5px 0px;}
    .epi_title {font-size: 40px; margin-bottom: 5px;}
    .epi_desc {font-size: 20px; margin: 5px 20vw 5px 20vw;}
    .epi_expr {margin: 5px 2px 5px 2px; padding: 5px;}
    .epi_source {margin: 5px 0px 5px 0px; padding: 5px; }
    .link_button {padding: 5px; margin: 5px; border-radius: 5px; font-size: 20px;}

    .ft_hd { margin-bottom: 10px; font-size: 22px; }
    .ft_dsc { font-size: 16px; }
    .ft_lnk { margin-bottom: 10px }
    .ft_cpy { margin: 40px 10px 10px 10px; font-size: 14px; }
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 641px) and (max-width: 1007px) {
    .header { font-size: 56px; margin: 0px 0px 0px 10px; }
    .tagline { font-size: 20px; margin: 0px 0px 0px 10px; }
    .epi_paginator {height: 85px; min-height: 85px; padding: 4px; margin-top: 4px; margin-left: 2px; margin-right: 2px;}
    .img_thumb {margin-top: 2px; margin-left: 4px; margin-right: 4px; border-radius: 4px; max-width: 143px;}

    .dd { width: 50%; border-radius: 5px; }
    .dd_td { padding-left: 4px; }
    .dd_arrow { width: 75px }
    .dd_menu { width: 50%; height: 280px; border-radius: 5px;}
    .dd_img { margin: 4px 0px 4px 4px }
    .dd_text { width: 225px; font-size: 16px; margin: 4px 0px 0px 0px}

    .epi_content {padding: 4px; margin: 4px 0px 4px 0px;}
    .epi_title {font-size: 30px; margin-bottom: 4px;}
    .epi_desc {font-size: 16px; margin: 4px 10vw 4px 10vw;}
    .epi_expr {margin: 4px 2px 4px 2px; padding: 4px;}
    .epi_source {margin: 4px 0px 4px 0px; padding: 4px; }
    .link_button {padding: 4px; margin: 4px; border-radius: 4px; font-size: 16px;}

    .ft_hd { margin-bottom: 10px; font-size: 18px; }
    .ft_dsc { width: 60%; font-size: 12px; }
    .ft_lnk { margin-bottom: 10px }
    .ft_cpy { margin: 40px 10px 10px 10px; font-size: 12px; }
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 640px) {
    .header { font-size: 46px; margin: 0px 0px 0px 8px;}
    .tagline { font-size: 16px; margin: 0px 0px 0px 8px; }
    .epi_paginator {height: 45px; min-height: 45px; padding: 3px; margin-top: 3px; margin-left: 1px; margin-right: 1px;}
    .img_thumb {margin-top: 1px; margin-left: 3px; margin-right: 3px; border-radius: 3px; max-width: 70px;}

    .dd { width: 90%; border-radius: 4px; }
    .dd_td { padding-left: 3px; }
    .dd_arrow { width: 35px }
    .dd_menu { width: 90%; height: 155px; border-radius: 4px;}
    .dd_img { margin: 2px 0px 2px 2px }
    .dd_text { width: 235px; font-size: 14px; margin: 2px 0px 0px 0px}

    .videoframe {width: 320px; height: 178px; }

    .epi_content {padding: 4px; margin: 3px 0px 3px 0px;}
    .epi_title {font-size: 20px; margin-bottom: 3px;}
    .epi_desc {font-size: 14px; margin: 3px 5vw 3px 5vw;}
    .epi_expr {margin: 3px 1px 3px 1px; padding: 3px;}
    .epi_source {margin: 3px 0px 3px 0px; padding: 3px; }
    .link_button {padding: 3px; margin: 3px; border-radius: 3px; font-size: 14px;}

    .ft_hd { margin-bottom: 10px; font-size: 16px; }
    .ft_dsc { width: 70%; font-size: 10px; }
    .ft_lnk { margin-bottom: 10px }
    .ft_cpy { margin: 20px 10px 10px 10px; font-size: 10px; }
}