/*******************************
            Global
*******************************/

@font-face {
font-family: Track;
src: url("../fonts/Track/Track.otf") format("opentype");
}
@font-face {
font-family: Segoe UI Semibold;
src: url("../fonts/Segoe/segiusb.ttf") format("truetype");
}
@font-face {
font-family: Roboto-Bold;
src: url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
}
@font-face {
font-family: Roboto-Regular;
src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
}

body {
font-family: 'Roboto-Regular', Fallback, sans-serif;
font-size: 15px;
}

/*--------------
    NAVIGATION
---------------*/


.nav_wrapper {
  padding:0px 20px 0px 20px;
  position:fixed;
  width:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.nav_wrapper.active { 
  background-color: #222a35
}
.nav_wrapper_impressum { 
  background-color: #222a35
}

.nav {
  width:100%;
  height:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.anchor {
  display: block; 
  height: 70px;  /* height of sticky navigation header */
  margin-top: -70px; 
  visibility: hidden;  
}

/*-----Logo-------*/
.nav_logo{
min-width:10%;
padding-bottom: 5px;
} 
.logo_img {
  max-height:84%;
  max-width:84%;
  padding-top: 20px;
  transition: all 0.4s ease;
}

.logo_img.active {
  max-height:70%;
  max-width:70%;
  padding-top: 10px;
}

/*-----Menu Items-------*/
.nav_menu {
  min-width:40%;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: white;
  justify-content: flex-end;
}

.nav_item {
  padding:20px;
  text-align: center;
  font-family: 'Oswald', Fallback, sans-serif;
  color:white; 
  font-size: 16px;
  transition: all 0.4s ease;
}

.nav_item.active {
  padding:0px 20px 0px 20px;
}

.nav a:link {
  color: white;
}
.nav a:hover {
  color: white;
}

.menu_link:hover {
  border-bottom: 2px solid #fff;
  color: white;
}

.nav_spacer {
  margin: 0 11px;
}

/*-----Contact Button-------*/
.nav_contact_button {
  padding:0px 20px 0px 20px;
  background-color: #f46e24;
  color:white;
}
.contact_nav a:link {
  font-family: 'Roboto-Regular';
  color: white;
  font-size: 14px;  
}
.contact_nav a {
  border: 1px solid #f46e24;
}
.contact_nav a:hover {
  border: 1px solid #fff;
}
.nav_logo a:hover {
  border: none;
}


@media (max-width: 890px) {
    .nav_wrapper {
      background-color: #222a35;
    }
    .nav {
        flex-direction: column;
    }
    .nav_logo {
      text-align: center;
      padding-bottom: 5px;
    }
    .logo_img {
      max-height:80%;
      max-width:80%;
      padding-top: 10px;
    }
    .logo_img.active {
      max-height:80%;
      max-width:80%;
      padding-top: 10px;
    }

    .nav_menu {
      display:none;
    }

}



/*-----------------
    INTRO
------------------*/

.intro {
  height:100vh;
  background-image: url("../assets/intro_background.png");
  background-size: cover;
  padding: 28vh 5% 3% 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: white;
  line-height: 1;
}

.intro_text_1 {
  color:#f46e24;
  font-family: 'Track', Fallback, sans-serif; 
  font-size: 11vh; 
}
.intro_text_2 {
  color:white;
  font-family: 'Track', Fallback, sans-serif; 
}
.intro_text_3 {

  padding-top:40px;
  padding-bottom:100px;
  color:#f46e24;
  font-family: 'Track', Fallback, sans-serif; 
  font-size: 7vh; 
  line-height: 1;
}

.down_arrow {
   width: 7vw;
}

.intro_item_top {
}
.intro_item_bottom {
}

@media (max-width: 700px) {

      .intro {
      padding: 28vh 5% 3% 5%;
      justify-content: center;
    }
    .intro_text_1 {
      font-size: 6vh; 
    }
    .intro_text_3 {
      padding-top:30px;
      padding-bottom:0px;
      font-size: 4vh; 
    }
    .down_arrow {
      min-width: 30px;
      max-width:50px;
      width: 16vw;
    }
}

@media (max-height: 500px) {
  .intro_text_3 {
    padding-top:15px;
    padding-bottom:15px;
    font-size: 4vh; 
  }
  .down_arrow {
    min-width: 30px;
    max-width:50px;
    width: 16vw;
  }

}

@media (max-width: 400px) {
  .intro {
      padding: 10vh 5% 3% 5%;
      justify-content: center;
  }
  .intro_text_3 {
    padding-top:40px;
    padding-bottom:25px;
    font-size: 4vh; 
  }
  .down_arrow {
    display:none;
    min-width: 30px;
    max-width:50px;
    width: 16vw;
  }

}

/*iPad Portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2)  { 

  .down_arrow {
    display:none;
  }
  .intro_text_1 {
  font-size: 6.5vh; 
  }
  .intro_text_3 {
  font-size: 4vh; 
  }

}


/*--------------
    WELCOME
---------------*/

.welcome_welcome {
  padding: 32px 10% 40px 10%;
  background-color: #d6dce5;
  display: flex; /* or inline-flex */
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #222a35;
}
.welcome_welcome_text_1 {
font-size: 30px;
font-family: 'Track', Fallback, sans-serif;
text-align: center;
}
.welcome_welcome_text_2 {
font-size: 15px;
font-family: 'Roboto-Regular', Fallback, sans-serif;
text-align: center;
}



/*--------------
    PRODUCTION
---------------*/

.production_main {
  padding: 40px 10% 40px 10%;
  background-color: #1f4e79;
  display: flex;
  flex-wrap: wrap;
  color: white;
}
.production_title {
font-size: 26px;
font-family: 'Track', Fallback, sans-serif;
}
.production_main_content {
font-size: 15px;
font-family: 'Roboto-Regular', Fallback, sans-serif;
}
.production_request a {
  font-size: 15px;
  color:#f46e24;
}
.production_request a:hover {
  color:#ffe699;
}

.production_main_item_left {
  padding-top: 5px;
  background-color: ;
  max-width: 40%;
}
.prod_img {
  width:100%;
}

.production_main_item_right {
  padding-left:20px;
  background-color: ;
  min-width:60%;
  max-width:60%;
}


@media (max-width: 700px) {
  .welcome_welcome {
  padding: 20px 5% 20px 5%;
  }
  .production_main {
  padding: 20px 5% 20px 5%;
  }
  .welcome_welcome_text_1 {
  font-size: 24px;
  }
  .production_main_item_left {
    min-width: 100%;
    padding-bottom: 20px;
  }
  .production_main_item_right {
    padding-left:0px;
    min-width: 100%; 
  }
}

/*iPad Landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 1),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 2)  { 
   
  .production_main_item_right {
  width:50%;
  }
  .production_main_item_left {
  width: 50%;
  }

}

/*iPad Portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2)  { 

  .production_main_item_right {
  width:50%;
  }
  .production_main_item_left {
  width: 50%;
  }

}


/*--------------
    DJING
---------------*/

.djing {
  padding: 40px 10% 40px 10%;
  background-color: #bf4a09;
  display: flex;
  flex-wrap: wrap;
  color: white;
}

.djing_title {
  font-size: 26px;
  font-family: 'Track', Fallback, sans-serif;
}
.djing_content {
font-size: 15px;
font-family: 'Roboto-Regular', Fallback, sans-serif;
}
.djing_request a {
  font-size: 15px;
  color:#bdd7ee;
}
.djing_request a:hover {
  color:#000011;
}

.djing_item_left {
  background-color: ;
  min-width:60%;
  max-width:60%;
}
.djing_img {
  width:100%;
}

.djing_item_right {
  background-color: ;
  max-width:40%;
}

@media (max-width: 700px) {
  .djing {
  flex-direction:column-reverse;
  padding: 20px 5% 20px 5%;
  }
  .djing_item_left {
    min-width: 100%; 
  }
  .djing_item_right {
    min-width: 100%; 
    padding-bottom: 20px;
  }
}

/*iPad Landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 1),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 2)  { 
   
  .djing_item_right {
  width:50%;
  }
  .djing_item_left {
  width: 50%;
  padding-right: 10px;
  }
  
}

/*iPad Portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2)  { 

  .djing_item_right {
  width:50%;
  }
  .djing_item_left {
  width: 50%;
  padding-right: 10px;
  }

}

/*--------------
  SOUND SCOUTING
---------------*/

.sound {
  padding: 40px 10% 40px 10%;
  background-color: #44546a;
  display: flex;
  flex-wrap: wrap;
  color: white;
}
.sound_title {
  font-size: 26px;
  font-family: 'Track', Fallback, sans-serif;
}
.sound_content {
  font-size: 15px;
  font-family: 'Roboto-Regular', Fallback, sans-serif;
}
.sound_request a {
  font-size: 15px;
  color:#ffe699;
}
.sound_request a:hover {
  color:#000011;
}

.sound_item_left {
  padding-top: 5px;
  background-color: ;
  max-width: 40%;
}
.sound_img {
  width:100%;
}

.sound_item_right {
  padding-left:20px;
  background-color: ;
  min-width:60%;
  max-width:60%;
}


@media (max-width: 700px) {
  .sound {
  padding: 20px 5% 20px 5%;
}
  .sound_item_left {
    min-width: 100%; 
    padding-bottom: 20px;
  }
  .sound_item_right {
    padding-left:0px;
    min-width: 100%; 
  }
}

/*iPad Landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 1),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 2)  { 
   
  .sound_item_right {
  width:50%;
  }
  .sound_item_left {
  width: 50%;
  }
  
}

/*iPad Portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2)  { 

  .sound_item_right {
  width:50%;
  }
  .sound_item_left {
  width: 50%;
  }

}


/*--------------
    CONTACT
---------------*/

.contact {
  padding: 5% 10% 5% 10%;
  background-image: url("../assets/contact_img_2.jpg");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  color: white;
}
.contact_text_1 {
  font-size: 4.5vw;
  font-family: 'Track', Fallback, sans-serif;
}
.contact_text_2 {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 4vw;
  font-family: 'Roboto-Regular', Fallback, sans-serif;
  text-align: center;
}
.contact_mail a {
  color:#f46e24;
}
.contact_phone a {
    color:#bdd7ee;
}

.contact_text_3 {
  font-size: 4vw;
  font-family: 'Roboto-Regular', Fallback, sans-serif;
  text-align: center;
  color:#bdd7ee;
}
.contact_text_4 {
  font-size: 15px;
  font-family: 'Roboto-Regular', Fallback, sans-serif;
}

@media (max-width: 700px) {
  .contact {
  padding: 5% 5% 5% 5%;
  }
  .contact_text_1 {
  font-size: 10vw;
  text-align: center;
  }
  .contact_text_2 {
    font-size: 8vw;
  }
  .contact_text_3 {
    font-size: 8vw;
  }

}


/*--------------
    FOOTER
---------------*/

.footer {
  min-height:40vh;
  padding: 5% 10% 5% 10%;
  background-color: black;
  color: #8497b0; 
  display: flex;
  flex-direction: column;
  flex: 1;
}
.footer a {
  color: #8497b0;
  font-family: 'Roboto-Regular', Fallback, sans-serif;
  font-size: 15px;
}

.footer a:hover {
  color: orange;
}

@media (max-width: 700px) {
  .footer {
  padding: 5% 5% 5% 5%;
  }

}

/*--------------
    CONTENT PAGE
---------------*/

.treasures_header {
  height:50vh;
  padding: 25vh 10% 5% 10%;
  display: flex; /* or inline-flex */
  flex-direction: column;
  justify-content: space-between;
  color: white;
}

.treasures_main {
  min-height:100vh;
  padding: 2% 10% 5% 10%;
  background-color: #d6dce5;
  display: flex;
  flex-wrap: wrap;
  color: #222a35;
}
.treasures_title {
  font-size: 30px;
  font-family: 'Track', Fallback, sans-serif; 
  text-align: left; 
}

.treasures_sub_title {
  font-size: 20px;
  font-family: 'Roboto-Regular', Fallback, sans-serif;
  text-align: left; 
}

.treasures_main_text {
  padding:20px 5% 5px 0px;
  color: #000000;
  font-size: 15px;
  font-family: 'Roboto-Regular', Fallback, sans-serif;
}
.treasures_main_text a {
  color: #434c8d;
  font-size: 15px;
  font-family: 'Roboto-Regular', Fallback, sans-serif;
}
.treasures_main_text a:hover {
  color: #f46e24;
}

.treasures_main_item_left {
  background-color: ;
  max-width: 64%;
  min-width: 64%;
  font-size: 15px;
  font-family: 'Roboto-Regular', Fallback, sans-serif;
}

.treasures_main_item_right {
  padding:22px 0px 5px 0px;
  background-color: ;
  max-width:36%;
  font-size: 15px;
  font-family: 'Roboto-Regular', Fallback, sans-serif;
}
.treasures_main_item_right a {
  color: #f46e24;
}
.treasures_main_item_right a:hover {
  color: #222a35;
}

/*-- BULLET LIST WITH ARROWS --*/

ul.icon
{
	list-style-type: none;
	list-style: none; 
	margin-left: 0; 
	padding-left: 1em; 
	text-indent: -1em; 
  	font-size: 15px;
  	font-family: 'Roboto-Regular', Fallback, sans-serif;
}
ul.icon li
{
	text-indent: -1em;
}
ul.icon li:before
{
	content: ">";
	float: left;
	width: 1em;
}
ul.icon li.arrow:before { content: ">"; }


@media (max-width: 700px) {

  .treasures_header {
    padding: 35vh 5% 15% 5%;
    height:70vh;
    justify-content: flex-end;
  }
  .treasures_main {
    padding: 5% 5% 5% 5%;
  }
  .treasures_main_item_left {
    min-width: 100%; 
  }
  .treasures_main_item_right {
    min-width: 100%; 
  }
  .treasures_img{
    max-width: 100%;
  }
}

/*iPad Landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 1),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 2)  { 
   
  .treasures_main_item_right {
  width:50%;
  }
  .treasures_main_item_left {
  width: 50%;
  padding-right: 10px;
  }
    .treasures_img{
    width: 100%;
  }
  
}

/*iPad Portrait*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2)  { 

  .treasures_main_item_right {
  width:50%;
  }
  .treasures_main_item_left {
  width: 50%;
  padding-right: 10px;
  }
  .treasures_img{
  width: 100%;
  }
  .treasures_header {
  height:30vh;
  padding: 15vh 10% 5% 10%;
  }

}

/*--------------
    Impressum
---------------*/

.impressum {
  height:100vh;
  padding: 25vh 10% 5% 10%;
  background-color: #d6dce5;
  color: #222a35;
}