/* === Allgemein ===*/

/* Schriften*/

body,
p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}


h1,
h2,
h3,
h4,
h5,
h6,

.font-alt {
	         font-family: 'Francois One', sans-serif;
}


.bigger {
	font-size: 400%;
}

/* Button */
.btn-round {
	border-radius: 30px;
}

/* Farben */
.showreel-overlay{
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgba(51,51,51,.7);
  top: 0;
}

.bg-overlay{
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgba(51,51,51,.7);
  top: 0;
}

a.text-white:hover,
a.text-white:hover{
	color: #dc3545 !important;
	text-decoratio: none;
}

/* Section */




/* Hilfsklassen */
.d-relative {
	position: relative;
}


/* === Navigation ===*/

.navbar {
	background-color:rgba(51,51,51,1);
  text-align: center;
  display: none;
}

.navbar.navbar-dark button: hover,
.navbar.navbar-dark button: focus,
.navbar.navbar-dark .nav-link:  hover {
	color: #dc3545;
}

.navbar-collapse{
	background-color: rgba(51,51,51,.7);
	width: 50vw;
}
.navbar-toggler {
  border: none;
  outline: none;
}

/* === Hero ===*/

.hero-bg{
	background: url(../img/Filmplakate/BlackPanther.jpg),url(../img/Filmplakate/ronMan3.jpg), url(../img/Filmplakate/AfterEarth.jpg);
	background-position:left bottom, right bottom, center top;
	background-attachment: fixed;
	background-repeat: repeat-y,  repeat-y,repeat-y;
	height: 50vh;
	background-size: 33.33% ;
}

#home{
  text-align: center;
}
#freelance{
  padding: 2vw;
}

/* === showreel Button/Modal ===*/
@media only screen and (min-width: 1000px) {
    #showreelButton {
    font-size: 150%;
    }
    #freelance{
      padding: 7vw;
    }
}

.btn-outline-danger {
	border: solid 3px;
}

#showreelButton {

  font-weight: bold;


  /* Standard syntax */
  animation-name:myfirst;
  animation-duration:10s;
  animation-timing-function:linear;
  animation-delay:0s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:running;
  }

  /* Standard syntax */
  @keyframes myfirst
  {
  0%   {color: #16a085; left:0px; top:0px;}
  25%  {color: #1abc9c; left:0px; top:0px;}
  50%  {color: #9b59b6; left:0px; top:0px;}
  75%  {color: #8e44ad; left:0px; top:0px;}
  100% {color: #16a085; left:0px; top:0px;}
  }

#showreel-modal{
    position: absolute;
    text-align: center;
    padding-top: 5%;
  }
  .Modal{
    position: relative;
    align-self: center;
  }

  /* === aboutme ===*/



/* === Slider ===*/

#slider {
  position: relative;
	padding: 3%;
	text-align: center;

}

.image-ba {
  position: relative;
  display: inline-block;
}

.image-ba * {
  -webkit-user-select: none;
  display: block;
  width: 70vw;
}

.image.before {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.splitter {
  position: absolute;
  right: 0;
  top: 0;
  width: 0px;
  height: 10%;
  background: #000;
  cursor: col-resize;
  z-index: 3;
}

/* === VideoControls ===*/


#video-controls {
  position: relative;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0px;
	opacity: 1;
  z-index: 4;
}

.rangeSlider{
  z-index: 5;
}
#slider:hover #video-controls {
	opacity: .9;
}

/*
.tnb.playpause {
  background-color: #99ddff;
  outline: none;
  width: 5%;
}*/
/*.icon-control-play{
  visibility: hidden;
}*/

.seekBar {
  width: 25%;
}

/* === Galerie ===*/


.card-columns {
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	-o-column-gap: 0;
	column-gap: 0;
  column-count: 4;
}

.card-columns .card{
	margin-bottom: -1px;
	border: 0;
}

.card-img {
 /*border-radius: 0px !important;*/
	border-radius: 0px;
}




/* === Kontakt ===*/


#kontakt{
  padding: 3%;
}

/* === Footer ===*/

.bg-black {
	background-color: #333;
  padding: 3%;
}
/*
#socials {
	display: none;
}*/

/* === Back to top butoon ===*/



#back-to-top-button{
  display: none;
	position: fixed;
	right: 40px;
	bottom: 40px;
}



/* === under Construction Overlay ===*/

#overlay {
  background: url("../img/underConstruction.png") 100%  repeat;
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.3); /* Black background with opacity */
  z-index: 0; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}


/* === CVbutton/ Modal ===*/

.cvbutton{
	position: fixed;
	right: 0;
  top: 40%;
	z-index: 10;
  font-size: 20px;
  font-weight: bold;
}

#CVModal{
    position: center;
    padding-top: 5%;
    height: 100%;
  }