/*
Theme Name: Trip Ad Lib (25.06.2019)
Theme URI: http://tripadlib.com
Description: Bootstrap Template für Trip Ad Lib
Author: Guilherme Maggessi
Author URI: http://atelier-voyage.de
*/

@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700&display=swap');

/* #1 GENERAL STYLING */

*{box-sizing: border-box;}

html, body{background-color:black;}

.black{background-color: rgba(0,0,0,0.8);}
.grey{background-color: #1F1F1F;}
.opacity{opacity: 0.8;}


/* #1.1 ELEMENT STYLING */

polygon{
    fill:#727272;
    opacity:0.5;
    stroke:#727272;
    stroke-width:0px;
    cursor:pointer;
    transform: scale(1);
    transition: 0.2s;
}

polygon:hover{
    /*stroke-width:4px;*/
    transform: scale(1.01);
    opacity:0.8;
}

svg{transition: .2s;}

.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
}

svg.blur:hover{
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
    
}

.logo{
    margin-left:calc(50vw - 234px);
    margin-top: calc(50vh - 235px);
}

@media only screen and (max-width: 736px) {
  .logo{
    margin-left:calc(50vw - 194px);
    margin-top: calc(50vh - 235px);
    }
    .content{padding-top:10px;}
}

@media only screen and (max-width: 600px) {
  .logo{
    margin-left:5px;
    margin-top:100px;
    }
    .content{padding-top:10px;}
}

.active{fill:none;}

.some{height:1.5em; width:1.5em;}
.stream{height:3em; width:3em;}

a{
    text-decoration: none;
    color:white;
    transition:.3s;
}

a:hover{
    text-decoration: none;
    color:black;
}

.card{border-radius:0;}

.btn{
    background-color: #1F1F1F;
    border: 2px solid white;
    border-radius: 50px;
}

.btn:hover{
    background-color: white;
    color:black;
    border: 2px solid white;
    border-radius: 50px;
}

a.btn:hover{
    color:black;
    opacity: 1;
}

.btn:hover a > h6{
    color:black;
    opacity: 1;
}

.btn:active{
    background-color: white;
    color:black;
    border: 2px solid white;
    border-radius: 50px;
    box-shadow: 0 0 0 0;
}

.form-control{
    border: 2px solid white;
    border-radius: 50px;
}

.z-max{z-index: 2000;}
.z-hoch{z-index: 1000;}
.z-niedrig{z-index: 1;}

/* #1.2 IMAGE STYLING */

.bg-img{
    background-attachment:scroll;
    background-size: cover;
    background-position: center;
    opacity:1;
    box-shadow: 80px 30px 50px rgba(0,0,0,1) inset;
}

@media only screen and (max-width: 736px) {
    .bg-img{
        opacity: 0.5;
    }
}

/* 1.3 MOBILE MENU STYLING */

@media only screen and (max-width: 736px) {
  #topnav li .nav-link{
    font-size:30px;
    }
}

/* #2 TYPOGRAPHY STYLING */

*{
    font-family: 'Inconsolata', monospace; 
    color:white;
}

p{font-size: 12.5px;}

li{transition: .2s;}

.nav-link{
    font-size:15px;
    color:white;
    transition: .3s;
}

.nav-link:hover{
    color:white; 
    opacity: 0.5;
}

/* #3 VIDEO */

#myVideo{
    position:;
    right: 0;
    max-height:100vh;
}

/* #4 ANIMATION */

.show{
    opacity: 1;
    transition: .3s ease-in-out;
}
.hide{
    opacity: 0;
    transition: .3s ease-in-out;
}

/* #4.1 FADE-IN */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in{
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.fade-in-1{
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}