/* STANDARD ***********************************************************************************************************************/
body {background-color: #fcfae3; font-family: 'Roboto', sans-serif;}
ul {padding: 0;}
li {list-style-type: none;}
.navbar-brand img, .navbar-default .navbar-nav li a, .navbar-default .navbar-toggle, .projects img, .episoden-container ul li input, .project-files ul li, .nav-pills li a, .btn, .navbar-footer ul li a, .fa-2x  {transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms;}

#preloader {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1000; background-color: #222b37; opacity: 1;}
#preloader-dots {width: 90px; position: absolute; top: 50%; left: 50%; z-index: 1001; transform: translateX(-50%) translateY(-50%)}
#preloader p {width: 100%; margin: 0 0 30px 0; color: #fff; font-size: 13px; text-align: center;}
#preloader .dot {width: 15px; height: 15px; float: left; margin: 0 10px 0 0; background: #fff; border-radius: 15px; animation: infinite 500ms ease-in-out;}
#preloader .dot:last-child {margin: 0 0 0 0;}
@keyframes preloader_1 {0% { background:#fff; transform:translateY(0);} 25% { background:#337ab7; transform:translateY(-5px);} 50% { background:#fff; transform:translateY(0);}}
@keyframes preloader_2 {25% { background:#fff; transform:translateY(0);} 50% { background:#337ab7; transform:translateY(-5px);} 75% { background:#fff; transform:translateY(0);}}
@keyframes preloader_3 {50% { background:#fff; transform:translateY(0);} 75% { background:#337ab7; transform:translateY(-5px);} 100% { background:#fff; transform:translateY(0);}}
@keyframes preloader_4 {75% { background:#fff; transform:translateY(0);} 100% { background:#337ab7; transform:translateY(-5px);} 25% { background:#fff; transform:translateY(0);}}

/* HEADER *************************************************************************************************************************/
.header {background-color: #fcfae3; border-radius: 0; border: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);}
.navbar {margin: 0;}
.navbar-brand {padding: 10px 10px;}
.navbar-brand img {width: 32px; opacity: 0.8;}
.navbar-brand img:hover {opacity: 1; cursor: pointer;}
.navbar-default .navbar-nav li a {color: #000; opacity: 1.0;}
.navbar-default .navbar-nav li a:hover {color: #999; opacity: 1; cursor: pointer;}
.navbar-default .navbar-nav li a:active, .navbar-default .navbar-nav li a:focus {color: #fff;}
.navbar-default .navbar-nav .open .dropdown-menu {background-color: #fcfae3}
.navbar-default .navbar-nav .open .dropdown-menu li a {color: #000; opacity: 0.8;}
.navbar-default .navbar-nav .open .dropdown-menu li a:hover {color: #000; background-color: #fff;}
.navbar-default .navbar-nav .open .dropdown-menu .divider {background-color: #333; opacity: 0.3;}

/* FOOTER *************************************************************************************************************************/
.footer {padding: 15px 0 15px 0; background-color: #fcfae3; color:#999; overflow: hidden;}
#copyright {font-size: 12px;}

.navbar-footer ul li {float: right; margin: 46px 0 15px 0; padding-left: 25px;}
.navbar-footer ul li a {font-size: 12px;}
.navbar-footer ul li a:hover {color: #000; text-decoration: none;}
.navbar-footer ul li a:active, .navbar-footer ul li a:focus {text-decoration: none;}
.navbar-footer ul li:last-child {margin: 48px 0 15px 0;}

.fa-2x, .navbar-footer ul li a {color:#999;}
.fa-twitter:hover {color: #4099ff;} .fa-youtube-play:hover {color: #c4302b;}

@media (max-width: 991px) {.navbar-footer ul li {clear: right; float:left;} .navbar-footer ul li {padding-left: 0; padding-right: 25px;}}

/* HOME ***************************************************************************************************************************/
#particles-js {width: 100%; position: absolute; margin-top: 80px;}
.home h1, .home h2 {color: #000; text-align: center;}
.home h1 {font-size: 60px; margin: 200px 0 50px 0;}
.home hr {width: 50px; margin-bottom: 200px;}

/* HOME PROJECTS ******************************************************************************************************************/

.projects h2 {font-size: 26px; margin: 0 0 30px 0; opacity: 1;}
.projects li {margin-bottom: 50px; padding: 20px; background-color: #fcfae3; border: 8px solid #333e4c; border-radius: 12px;}

.projects img {width: 100%; border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);}
.projects img:hover {transform: scale(1.07); opacity: 0.8;}
.projects .container-img {overflow: hidden;}

.projects h3 {color: #000; font-size: 18px; text-align: center; padding-bottom: 15px;}
.projects h4 {color: #000; font-size: 12px; text-align: center; opacity: 0.6;}

.projects .fa-youtube-play {font-size: 11px; color: #d85651;}
.projects .fa-clock-o {color: #337ab7;}
.projects .fa-circle {font-size: 11px;} .circle-green {color: #72e272;}
.projects .fa-circle {font-size: 11px;} .circle-orange {color: #e2ac72;}

.projects-btn {margin: 0; padding: 0 5%; margin-bottom: 180px;}
.projects .btn {width: 100%; font-size: 16px; display: block; margin: 0 auto; outline: none;}
.projects a {text-decoration: none;}

/* ALL PROJECTS *******************************************************************************************************************/

.all-projects ul {margin-top: 70px;}

/* PROJECT ************************************************************************************************************************/

.project h2 {color: #fff; margin: 60px 0 30px 0;}

/* PROJECT PLAYLIST ***************************************************************************************************************/

.video-player {width: 100%; min-height: 420px; padding-bottom: 56.25%;}
iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);}

@media (max-width: 991px) {.video-player {min-height:auto;}}

.episoden-container ul {height: 420px; max-height: 420px; overflow: scroll; overflow: hidden;}
.episoden-container-styling {background-color: #222b37; border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);}
ul li input {width: 100%; color: #fff; border: none; background: none; outline: none; padding: 20px 0 20px 30px;}
ul li input:hover {background-color: #121820;}

/* PROJECT FILES ******************************************************************************************************************/

.nav-pills {margin-top: 50px; background-color: #222b37; border-radius: 3px 3px 0 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);}
.nav-pills li {padding: 25px 0 25px 25px;}

.project-files {margin-bottom: 150px; height: 380px; max-height: 380px; color:#999; background-color: #222b37; border-radius: 0 0 3px 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); word-wrap: break-word; overflow: scroll; overflow: hidden;}
.project-files ul li {height: 60px; padding: 15px 0 15px 25px;}
.project-files ul li:hover {background-color: #121820;}
.project-files a {font-size: 18px; color: #999;}
.project-files a:hover, .project-files a:active, .project-files a:focus {text-decoration: none;}
.project-files i {color: #337ab7; margin-right: 20px;}

/* PROJECT FILES TOGGLE ***********************************************************************************************************/

.toggle-episode-hl {font-size: 18px; color: #999;}
.hidden-project-files {display: none;}
.hidden-project-files li i{padding-left: 35px;}

/* IMPRESSUM **********************************************************************************************************************/

.impressum h1 {font-size: 30px; color: #000; margin: 60px 0 50px 0;}
.impressum h2 {font-size: 18px; color: #111;}
.impressum p {font-size: 14px; color: #959595;}
.impressum p:last-child {margin-bottom: 150px;}
.impressum hr {opacity: 0.7;}