style.css

/*
Theme Name: cc_theme
Text Domain: cc_theme
Version: 1.2
Description: New CC Theme Test
*/


:root {
  --primary-color: #A51515;
  --secondary-color: #DE2C2C;
  --dark-contrast: #060e15;  
  --light-contrast: #fff;

  --dark-grey: #0a0a0a;
  --light-grey: #0f0f0f;

  --alarm-color: #ff3939;

  --scroll-bg: #0d0606;
  --scroll-thumb: #360707;
}





html {
  scroll-behavior: smooth;
}

body{
  background-color: var(--dark-grey)
}

body, a, input, textarea, button {
  font-family: "Roboto", sans-serif;
  font-weight: 200;
  font-style: normal;
  color: var(--light-contrast);
}
.nav_li a,
#navbar ul li a{
    font-family: "Roboto Condensed", sans-serif;
}

a:not(.casestudies_dropdown){
  text-decoration: underline;
  color: var(--secondary-color);
  font-weight: 300;
  cursor: pointer;
}

a.header_link{
  font-size: 16px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
  text-decoration: underline;
  color: var(--light-contrast);
}

a.linked_btn{
  text-decoration: none;
}

b{
  font-weight: 300;
}

.unordered_list{
  padding: 15px;
  padding-left: 25px;
  display: inline-block;
  width: calc(100% - 40px);
  text-align: left;
}

.unordered_list h4{
  text-align: left;
}

.unordered_list.yellow_bg{
  background-color: var(--secondary-color);
  color: var(--dark-contrast);
}

.unordered_list ul {
  list-style-type: square;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0.04em; 
}

.unordered_list ul li{
  position: relative;
  left: 20px;
}

.unordered_list.yellow_bg h4{
  padding-top: 0;
}


h1.padding_40,
h2.padding_40,
h3.padding_40,
h4.padding_40,
h5.padding_40,
h6.padding_40{
  padding-top:40px;
}


.padding_bottom_0{
  padding-bottom: 0;
}

.padding_top_20{
  padding-top: 20px;
}

.padding_bottom_100{
  padding-bottom: 100px;
}

.text-center{
  text-align: center;
}

/* ============================== LOADING SCREEN ==== */


#loading_screen {
  position: fixed;
  height: 100%;
  width: 100%;
  top:0;
  left: 0;
  background: #000;
  z-index:9999; 
  font-size: 20px;
  text-align: center;
  color: var(--secondary-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.loading_text{

}

.loading2Wrap{
  position: relative;
  align-self: center;
  width: 48px;
  height: 48px;
  margin-top: 50px;
}
.loading2_1,.loading2_2,.loading2_3,.loading2_4,.loading2_5,.loading2_6,.loading2_7,.loading2_8{
  position: absolute;
  border: 4px solid transparent;
  border-radius: 100%;
}
.loading2_1{
  top: 0;
  left: 20px;
  animation: loading2 1s infinite;
}
.loading2_2{
  top: 5px;
  right: 5px;
  animation: loading2 1s infinite 0.125s;
}
.loading2_3{
  top: 20px;
  right: 0;
  animation: loading2 1s infinite 0.25s;
}
.loading2_4{
  bottom: 5px;
  right: 5px;
  animation: loading2 1s infinite 0.375s;
}
.loading2_5{
  bottom: 0;
  left: 20px;
  animation: loading2 1s infinite 0.5s;
}
.loading2_6{
  bottom: 5px;
  left: 5px;
  animation: loading2 1s infinite 0.625s;
}
.loading2_7{
  top: 20px;
  left: 0;
  animation: loading2 1s infinite 0.75s;
}
.loading2_8{
  top: 5px;
  left: 5px;
  animation: loading2 1s infinite 0.875s;
}
@keyframes loading2 {
  0% {border-color: var(--dark-contrast);}
  100% {border-color: var(--light-contrast);}
}

/* =====================================================  */


.text-center{
  text-align: center;
}


.alert{
  background-color: rgba(0,0,0,.8);
  border-radius: 5px;
  position: fixed;
  top: 50%;
  left: calc(50% - 150px);
  width: 250px;
  padding: 15px;
  z-index: 999999999;
}


/* ******************************** */
/* ******************************** FONTS & COLORS */
/* ******************************** */


#top_btn{
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='9' fill='rgba(165,21,21,1)' stroke='none'><path d='M0 0.10199V8.10199L6 4.10199L0 0.10199Z'></path></svg>");  
  transform: rotate(-90deg);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: 62% 56%;
}

.counter{
  font-weight: 500;
  font-size: 18px;
}

.case_studies_gallery .content h2{
  padding: 0;
}

.case_studies_gallery .description p{
}

.description{
  font-weight: 200;
  font-size: 15px;
  line-height: 1.5em;
}

.leistungen .content{
  margin: 10px;
  margin-bottom: 0px;
  -webkit-transition: 1.67s;
  -o-transition: 1.67s;
  transition: 1.67s;
}

.section_title{
  font-family: "Roboto Condensed", sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.leistungen .title,
.core_values .title{
  display: flex;
  flex-wrap: wrap;
  color: var(--light-contrast);
  font-size: 26px;
  font-weight: 500;
  width: 100%;
  justify-content:center;
  align-items: start;
  padding-bottom: 50px;  
}
  
.core_values .wrapper > .iconbox{
  margin-bottom: 50px;
}

h1{
  font-size: 72px;
  font-weight: 700;
  line-height: 1em;
}

h2{
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 56px;  
  line-height: 1em;
  font-style: normal;
}

h3{
  -webkit-box-flex: 1;
          -ms-flex: 1 1 25px;
      flex: 1 1 25px;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2em;
  /* identical to box height */
  letter-spacing: 0.04em;
}

h4{
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: normal;
  font-size: 32px;
  line-height: 100%;
}

h5{  
  font-weight: 500;
  font-size: 28px;  
  line-height: 1.5em;
}

h6{
  font-weight: 300;
  letter-spacing: .06em;
  font-size: 16px;  
  line-height: 1.5em;
}


.tag-wrapper{
  display: inline-block;
  margin: 5px 5px 0px 0px;
}

.project-tags{
}

.project-tags label{
  padding: 7px 13px 7px 13px;
  position: relative;
  z-index: 200;
  color: var(--light-contrast);
  display: block;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 300;
  background-color: #4a111d;
}
  

.vorteile .title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5em;
  letter-spacing: 0.05em;
}

.article .title {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1em;
}


.article .subtitle {
  font-family: "Roboto Condensed", sans-serif;
  font-style: normal;
  font-size: 26px;
  font-weight: 400;
  padding-top: 10px;
}

.red_subtitle{
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5em;
  color: var(--primary-color);
  margin-top: 15px;
}


p{
  font-weight: 100;
  font-size: 16px;
  line-height: 1.5em;
  letter-spacing: 0.04em;
  padding: 20px 0;
}

.article p{
  font-family: "Roboto Condensed", sans-serif;  
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5em;  
  padding: 20px 0;
  font-style: normal;
  letter-spacing: 0;
}

p.menu{
  font-weight: 100;
  font-size: 15px;
  line-height: 1.5em;
  padding: 10px 0;
}

.menu{
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5em;
  text-align: center;  
}

.copyright{
  font-size: 12px;
}



/* ******************* FONT STYLES CONTACT-FORM ************* */
.trenner_contact{
  background-size: cover;
  background-position: center;
  padding-bottom: 100px;
}

.trenner_contact h2{
  line-height: 90%;
}

.form-group .form-control {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--light-contrast);
}

.trenner_contact .content, #contact-form {
  font-weight: 300;
  color: var(--light-contrast);
}

.trenner_contact button{
  display: block;  
  position: relative;  
  width: 100%;
}

.checkbox_datenschutz {
  font-weight: 300;
  font-size: 12px;
}

.contact_phone{
  font-size: 24px;
  color: var(--secondary-color);
}

#contact-form label {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5em;
}


#contact-form .with-errors li{
    font-size: 14px;
    padding-top: 5px;
    color: var(--alarm-color);
}

.text-muted {
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5em;
  padding-top: 10px;
}

.trenner_contact .content .contact_name {
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3em;
  margin-top: auto;
}

.trenner_contact .content .contact_title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4em;
  letter-spacing: .04em;
}

/* ************************************************************ */

.container.full_page_contact{
  padding-top: 350px;
  height: auto;
}

.full_page_contact .content .contact_name{
  margin-top: auto;
}

/* ******************* COLORS & IMAGES*/

.noise_bg{
  background: url("../images/noise_bg.png");
}

.blue_bg{
    background-color: var(--dark-contrast);
}

.yellow_bg{
    background-color: var(--secondary-color);
    color:var(--dark-contrast);
}

.grey{
    color: var(--dark-grey);
}

.gold{
  color: var(--secondary-color);
}

.l_gradient_left {
  background: -o-linear-gradient(197.82deg, rgba(0,0,0,0) 35.18%, var(--primary-color) 98.7%), url("../images/noise_bg.png");
  background: linear-gradient(252.18deg, rgba(0,0,0,0) 35.18%, var(--primary-color) 98.7%), url("../images/noise_bg.png");
}


.l_gradient_right {
  background: -o-linear-gradient(201.65deg, var(--primary-color) 1.24%, rgba(0,0,0,0) 65.31%), url("../images/noise_bg.png");
  background: linear-gradient(248.35deg, var(--primary-color) 1.24%, rgba(0,0,0,0) 65.31%), url("../images/noise_bg.png");
}

.l_gradient_top{
  background: linear-gradient(180deg, var(--primary-color) 0%, rgba(0,0,0,0) 100%), url('../images/noise_bg.png');
}

.l_gradient_bottom{
  background: linear-gradient(0deg, var(--dark-contrast) 0%, rgba(0,0,0,0) 100%), url('../images/noise_bg.png');
}


/*  ============= IMAGE TEXT HOVER ==================== */

.image_hover_wrapper 
{
  vertical-align:top;
  display: block;
  position: relative;
  display: inline-block;
}

.image_hover_wrapper .hover_text 
{
  position: absolute;

  top: auto;
  bottom: 0px;
  padding: 15px 20px;
  opacity: 0;
  background: rgba(138,138,138, 0.65);
  text-align: left;
  cursor: default;
  transition: opacity 0.2s linear;
}

.image_hover_wrapper .hover_text
{
  color: var(--dark-contrast);
  font-size: 15px;
  display: block;
  max-width: 1096px;
}


/*
 ==== ICONS
*/
.icono-arrow2-up,
.icono-arrow2-down {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.icono-arrow2 {
  width: 0;
  height: 0;
  border-width: 3px;
  border-style: solid;
  border-bottom-color: transparent;
  border-left-color: transparent;
  margin: 0px;
}

.icono-arrow2:before {
  right: 0;
  top: -1px;
  position: absolute;
  height: 2px;
  -webkit-box-shadow: inset 0 0 0 32px;
          box-shadow: inset 0 0 0 32px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  width: 20px;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
      transform-origin: right top;
}

.icono-arrow2-up {
  -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  color: var(--light-contrast);
}

.icono-arrow2-down {
  -webkit-transform: rotate(135deg);
          -ms-transform: rotate(135deg);
      transform: rotate(135deg);
  color: var(--light-grey);

}

.icono {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; 
          top: 15px;
          left:50%;
}

.icono:after,
.icono:before {
  content: "";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a.external_link {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 511.6 511.6' xmlns='http://www.w3.org/2000/svg' fill='rgba(248, 205, 124)' stroke='none'><g><g><path d='M392.9,292.4h-18.3c-2.7,0-4.9,0.9-6.6,2.6c-1.7,1.7-2.6,3.9-2.6,6.6v91.4c0,12.6-4.5,23.3-13.4,32.3 c-8.9,8.9-19.7,13.4-32.3,13.4H82.2c-12.6,0-23.3-4.5-32.3-13.4c-8.9-8.9-13.4-19.7-13.4-32.3V155.3c0-12.6,4.5-23.3,13.4-32.3 c8.9-8.9,19.7-13.4,32.3-13.4h201c2.7,0,4.9-0.9,6.6-2.6c1.7-1.7,2.6-3.9,2.6-6.6V82.2c0-2.7-0.9-4.9-2.6-6.6 c-1.7-1.7-3.9-2.6-6.6-2.6h-201c-22.6,0-42,8-58.1,24.1C8,113.3,0,132.7,0,155.3v237.5c0,22.6,8,42,24.1,58.1 c16.1,16.1,35.5,24.1,58.1,24.1h237.5c22.6,0,42-8,58.1-24.1c16.1-16.1,24.1-35.4,24.1-58.1v-91.4c0-2.7-0.9-4.9-2.6-6.6 C397.7,293.2,395.5,292.4,392.9,292.4z'/><path d='M506.2,42c-3.6-3.6-7.9-5.4-12.9-5.4H347.2c-4.9,0-9.2,1.8-12.8,5.4c-3.6,3.6-5.4,7.9-5.4,12.8 s1.8,9.2,5.4,12.8l50.2,50.2L198.4,304.1c-1.9,1.9-2.9,4.1-2.9,6.6c0,2.5,1,4.7,2.9,6.6l32.5,32.5c1.9,1.9,4.1,2.9,6.6,2.9 s4.7-0.9,6.6-2.9l186.1-186.1l50.3,50.2c3.6,3.6,7.9,5.4,12.8,5.4s9.2-1.8,12.9-5.4c3.6-3.6,5.4-7.9,5.4-12.8V54.8 C511.6,49.9,509.8,45.6,506.2,42z'/></g></g></svg>");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  padding-left: 20px; /* Adjust according to image size to push text across. */
}


/* **********************************  LOGO, NAVIGATION AND DROPDOWNS */


.logo {
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  opacity: 1;
  width: 190px;
  height: 43px;
  left: 40px;
  top: 25%;
  z-index: 999999;
  -webkit-transition: top 0.3s;
  -o-transition: top 0.3s;
  transition: top 0.3s;
  transition: opacity 1s;
}


/* *************************************  */

.header {
  position: fixed;
  width: 100vw;
  z-index: 3;
}

/* ********************************** SCROLL TO TOP BUTTON */


#top_btn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 40px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 1; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgba(255,255,255,.25); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px; /* Some padding */
  font-size: 15px; /* Increase font size */
  height: 40px;
  width: 40px;
  transition: all 0.3s;
}

#top_btn:hover {
  background-color: rgba(255,255,255,.5); /* Add a dark-grey background on hover */
}

/* ***************************** MOBILE COLAPSING MECHANISM LIST-MENU */

#list {
  max-height: 0;
  overflow: hidden;
  transition: 0.5s linear;
}

a:focus ~ #list {
  max-height: 10em;
}

a[href="nowhere"]:focus {
  pointer-events: none;
}

/* ******************************************* */
.mobile_menu_socials,
.mobile_menu_bottoms{
  display: flex;
  flex-direction: row;
  justify-content: center;  
  margin-bottom: 25px;
}

.mobile_submenu:not(:last-child){
  border-right: 1px solid white;
}


.mobile_menu_icons,
.mobile_submenu{
  vertical-align: middle;
  font-weight: 300;
  font-size: 14px;
  padding: 10px;
}

.mobile_menu_icons{
  height: 42px;
  width: 42px;
}

.mobile_menu_icons img{
  padding: 0;
}

#mobile_trigger a{
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.5em;  
  color: var(--light_contrast);
}

#mobile_trigger{
  height: 25px;
  width: 72px;
  position: absolute;
  background-color: var(--primary-color);
  /* opacity: .1; */
  display: none;
  text-align: center;
  color: var(--light-contrast);
  top: calc(50vh - 25px);
  font-weight: 500;
  left: calc(100vw - 48px);
  z-index: 999;
  vertical-align: middle;

  transform: rotate(-90deg);
}

.mobile_menu .navbar{
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

.mobile_menu ul:first-child{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.mobile_menu a{
  text-decoration: none;
}

.mobile_menu a:focus{
    color: var(--primary-color) ;
}

.mobile_menu li:first-child{
  padding-top: 20px;
}

#list li{
  list-style: none;
  font-weight: 300;
  font-size: 16px;  
}

#list li:before {
 content: "\0BB \020";
 color: var(--primary-color);
 }



.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.mobile_menu li a{
  color: var(--light-contrast);
  font-weight: 700;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.1em;
  line-height: 1.5em;  
}

.mobile_menu li{
  padding-bottom: 20px;
  text-align: center;  

}

.mobile_menu{
  display: none;
  width: 100vw;
  height: 100%;
  position: absolute;
  left:1200px;
  background: radial-gradient(172.15% 100% at 100% 0%, #1e1e1e  0%, var(--dark-grey) 100%);
  transition: all .8s;  
  z-index: 1;
}


.bottom_navbar_container{
  display: flex;
  flex-direction: row;
  align-self: center;
}

#navbar,#bottom_navbar {
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          -ms-flex-direction: row;
      flex-direction: row;
  -webkit-box-pack: end;
          -ms-flex-pack: end;
  -webkit-box-align: end;
          -ms-flex-align: end;
      align-items: flex-end;
  position: relative;
  z-index: 999;
  transition: all 0.3s;
  background-color: var(--light-grey);
  padding: 10px 0px;  
  padding-left: 280px;
}

#bottom_navbar{
  justify-content: center;
  padding-left: 0;
  height: 60px;
  background-color: var(--dark-grey);  
}

.navbar_left .menu-item-description{
  display: none;
}

.bottom_navbar_container,
.navbar_left, .navbar_right{
  display: flex;
  flex-direction: row;
  align-self: center;
}

.navbar_left ul li,
.navbar_right ul li{
  float: left;
}


.navbar_left ul li,
.bottom_navbar_container .nav_li{
      border-left:1px solid #fff;
}

.nav_li:first-child,
#navbar ul li:first-child{
  border: none;
}

.bottom_navbar_container a,
#navbar ul li a{
  text-decoration: none;
  text-transform: uppercase;
  color: var(--light-contrast);
  font-weight: 700;
  padding: 0 50px;
}


#navbar .navbar_right ul li a{
  padding: 0px 25px;
}

#navbar .navbar_right{
    padding-right: 35px;
}

#navbar ul li a:hover,
#bottom_navbar .nav_li a:hover{
  color: var(--secondary-color);
  transition: 0.5s;
}

/* Highlight using list element */
#navbar ul li.current_page_item{
  color: var(--secondary-color);

}
 
/* Highlight using link element */
#navbar ul li.current_page_item a{
  color: var(--secondary-color);

}
 
/* Highlight using div element */
#bottom_navbar div.current_page_item a{
  color: var(--secondary-color);

}

#navbar ul li a:active{
  color: var(--secondary-color);
  text-decoration: underline;
  font-weight: 700;
}

.dropdown_black_background{
  background-color: var(--dark-contrast);

  visibility: hidden;
  opacity: 0;

  z-index: 1;  
  width: 100vw;
  height: 100vh;
  position: fixed;
  transition: all 200ms ease-in;
}

.casestudies_dropdown .wrapper,
.leistungen_dropdown .wrapper,
.core_values .wrapper{
  display: flex;
  justify-content: center;
  width: 552px;
  flex-basis: auto;  
}

.casestudies_dropdown .wrapper{
  transition: all 200ms ease-in;
  width: 537px;
}


.casestudies_dropdown .case_dropdown_article.customer_www{
  background: linear-gradient( rgba(0, 0, 0, 0), rgba(255,255,255, 0.9) ), url('../images/dropdown/www.png');
}

.casestudies_dropdown .case_dropdown_article.customer_degewo{
  background: linear-gradient( rgba(0, 0, 0, 0), rgba(255,255,255, 0.9) ), url('../images/dropdown/degewo.png');
}

.casestudies_dropdown .case_dropdown_article.customer_edward_roth{
  background: linear-gradient( rgba(0, 0, 0, 0), rgba(255,255,255, 0.9) ), url('../images/dropdown/edward_roth.png');
}   

.casestudies_dropdown .case_dropdown_article.customer_ikea{
  background: linear-gradient( rgba(0, 0, 0, 0), rgba(255,255,255, 0.9) ), url('../images/dropdown/ikea.png');
}



.casestudies_dropdown .case_dropdown_article.customer_www:hover{
  background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) ), url('../images/dropdown/www.png');
}

.casestudies_dropdown .case_dropdown_article.customer_degewo:hover{
  background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) ), url('../images/dropdown/degewo.png');
}

.casestudies_dropdown .case_dropdown_article.customer_edward_roth:hover{
  background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) ), url('../images/dropdown/edward_roth.png');
}   

.casestudies_dropdown .case_dropdown_article.customer_ikea:hover{
  background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) ), url('../images/dropdown/ikea.png');
}


.casestudies_dropdown .case_dropdown_article{
  height: 130px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.5);
}
.casestudies_dropdown .case_dropdown_category{
  text-align: left;
  padding: 3px 0;

  font-weight: bold;
  font-size: 16px;
  color: var(--secondary-color);  
}

.casestudies_dropdown .case_dropdown_article .content{
  font-weight: bold;
  font-size: 34px;
  color: var(--dark-contrast);
  text-shadow: 0px 0px 8px rgba(255,255,255, 0.5);
}




.casestudies_dropdown .case_dropdown_article .customer{
  font-weight: 500;
  font-size: 20px;
  color: var(--dark-contrast);
  text-shadow: 0px 0px 8px rgba(255,255,255, 0.5);
}

.casestudies_dropdown .wrapper{
  margin: 13px;
  flex-direction: column;
}


.core_values .iconbox:hover{
    cursor: default;
}

  
.core_values .content_wrapper{
    align-self: center;
}
    


.leistungen_dropdown .wrapper:nth-child(-n+2){
  margin-bottom: 50px;
}

.casestudies_dropdown .wrapper:nth-child(-n+2){
  margin-bottom: 20px;
}

.leistungen_dropdown .iconbox,
.core_values .iconbox{
  height: auto;
  justify-content: flex-start;
  min-width: 164px;
  max-width: 165px;  
  margin-right: 30px;
  margin-top: 0;
}

.leistungen_dropdown p,
.leistungen_dropdown .subtitle,
.core_values .content,
.core_values p{
  text-align: left;
  justify-content: flex-end;
  word-break: break-all;
}

.core_values p.text-center{
  text-align: center;
}


.casestudies_dropdown{
  background: linear-gradient(5.8deg, #AB1A39 7.24%, rgba(171, 26, 57, 0) 89.44%), url("../images/noise_bg.png");
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0px;
  margin-top: -584px;
  position: fixed;
  height: 584px;
  text-align: center;
  width: 100vw;
  -webkit-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  z-index: 2;
}


.leistungen_dropdown {
  background: linear-gradient(5.8deg, #AB1A39 7.24%, rgba(171, 26, 57, 0) 89.44%), url("../images/noise_bg.png");
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0px;
  margin-top: -584px;
  position: fixed;
  height: 584px;
  text-align: center;
  width: 100vw;
  -webkit-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  z-index:2;
}

.casestudies_dropdown .container,
.leistungen_dropdown .container {
  width: 1136px;
  padding: 0;
  position: sticky;
  top: 170px;
}

.casestudies_dropdown .content{
  margin: auto;
  margin-bottom: 2px;
}

.casestudies_dropdown .customer{
  margin: auto;
  margin-top: 2px;
}



/* ***************************************************** MAIN HERO */

.main_header {
  background-image: url("../images/header/startseite_2.png");
  background-size: cover;

  background-position: 50% 50%;
  z-index: -1;
  overflow: hidden;
  /* The following styles are required for the "scroll-over" effect */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed !important;
  display: flex;  
  flex-direction: column;  
  justify-content: center;
  align-items: center;  
}

.header_index{
  margin: 30px 30px;
  height: 50px;
}

.video_unmute,
.video_fullscreen{
  height: 58px;
  width: 58px;
}

.header_text_intro{
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}


.header_title{
  font-size: 96px;
  font-family: "Roboto COndensed";
  font-weight: 700;
  text-transform: uppercase;
}

.header_subtitle{
  font-size: 26px;
  font-family: "Roboto COndensed";
  font-weight: 300;
}

.main_header.waschen_wie_walter,
.main_header.degewo_energierechner,
.main_header.gamification,
.main_header.edlen_yuman{
  height: 80%;
}

.main_header.startseite{
  background-image: url("../images/header/startseite.png");
}

.main_header.digital_design{
  background-image: url("../images/header/digital_design.png");
}

.main_header.corporate_design{
  background-image: url("../images/header/corporate_design.png");
}

.main_header.branding_kampagnen{
  background-image: url("../images/header/branding.png");
}

.main_header.neue_technologien{
  background-image: url("../images/header/new_technologies.png");
}

.main_header.landingpage_webdesign{
  background-image: url("../images/header/landingpage_webdesign.png");
}

.main_header.landingpage_technologien{
  background-image: url("../images/header/new_technologies.png");
}

.main_header.waschen_wie_walter{
  background-image: url("../images/header/waschen_wie_walter.png");
}

.main_header.degewo_energierechner{
  background-image: url("../images/header/degewo_energierechner.png");
}

.main_header.gamification{
  background-image: url("../images/header/gamification.png");
}

.main_header.edlen_yuman{
  background-image: url("../images/header/edlen_yuman.png");
}

.main_header.about{
  background-image: url("../images/header/about.png");
}

.main_header .content {
  text-align: center;
  text-transform: uppercase;
}

.background_scroll_wrapper .scroll_down_wrapper{
  position: absolute;
  top:auto;
  bottom:30px;
  left:50%;
  z-index: 99;
}


.scroll_down {
  position: relative;
  width: 36px;
  height: 36px;
  margin-bottom: 50px;
}

.chevron {
  position: absolute;
  width: 36px;
  height: 15px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 6s ease-out infinite;
}

.chevron:first-child {
  animation: move 6s ease-out 2s infinite;
}

.chevron:nth-child(2) {
  animation: move 6s ease-out 4s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: var(--primary-color);
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(45px);
  }
  100% {
    opacity: 0;
    transform: translateY(60px) scale3d(0.5, 0.5, 0.5);
  }
}


/* *********************************** */

/* *********************************** MAIN AREA */

/* *********************************** */



.background_scroll_wrapper {
  overflow: hidden;
  position: absolute;
  z-index: 2;
}

.scroll_wrapper {
/*  -ms-scroll-snap-type: both proximity;
      scroll-snap-type: both proximity;*/
  width: 100%;
  height: 100vh;
  overflow: auto;
  position: fixed;
  scroll-behavior: smooth;
}


.container {
/*  scroll-snap-align: center;
*/  scroll-snap-stop: unset;
  
  background-color: var(--dark-grey);

  -webkit-overflow-scrolling: touch;
  -ms-scroll-snap-points-y: repeat(100px);
      scroll-snap-points-y: repeat(100px);
  -ms-scroll-snap-points-x: repeat(100px);
      scroll-snap-points-x: repeat(100px);
  
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  
  -webkit-box-pack: center;
          -ms-flex-pack: center;
      justify-content: center;
  
  -webkit-box-align: center;
          -ms-flex-align: center;
      align-items: center;
  
  padding-top: 100px; 
  width: 100%;
}


.container .wrapper > div:first-child:not(.address){
  padding-bottom: 40px;
}


.container.ghost {
  overflow: hidden;  
  height: 55vh;
  margin-top: 100px;
  padding: 0;
  position: relative;
  background: none;
  -webkit-transition-duration: 0.8s;

}

.container.ghost.gradient::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
  transition: all 2s linear;
}

.container.ghost.index{
  height: 85vh;
  display: flex;
  justify-content: left;
  align-content: flex-end;
}



.header_still{
  position: absolute;
  border: none;
  z-index: -100;
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.header_still.live{
  background-image: url('../cc_movinapes/images/header/bg_live.jpg'); 
}

.header_still.about{
  background-image: url('../cc_movinapes/images/header/corona_team.jpg');
}

.ghost.case_header{
  height: 66%;
}



.container.trenner_website,
.container.trenner_technologien{
  height: 352px;
}


.container.vorteile {
  -webkit-box-align: center;
          -ms-flex-align: center;
      align-items: center;
  padding: 0px;
  flex-direction: column;
  width: 50%;
}

.container.vorteile.fullwidth{
  width: 100%;
  padding: 50px 0;
  flex-direction: row;
}


.container.case_studies_gallery {
  display: block;
  height: 360px;
}


.container.trenner_contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          -ms-flex-direction: row;
      flex-direction: row;
  -webkit-box-pack: center;
          -ms-flex-pack: center;
      justify-content: center;
  -webkit-box-align: inherit;
          -ms-flex-align: inherit;
      align-items: inherit;
  -ms-flex-wrap: inherit;
      flex-wrap: inherit;
}

.container.core_values{
/*  scroll-snap-align: center;
*/}

.double_text {
  padding: 50px 0px;
}

.double_text .wrapper img{
  padding: 0;
}

.double_text .wrapper .text:first-child:not(img) {
  padding-right: 20px;
}


.container.single_text .wrapper,
.container.double_text .wrapper,
.container.double_column .wrapper{
  display: flex;
  flex-direction: row;
  max-width: 1136px;
}

.container.single_text .wrapper{
  flex-direction: column;
}

.container.double_column .wrapper{
  flex-direction: column;
}

.container.single_text .text,
.container.double_text .text{
  width: 50%;
  padding: 0;
}


.image_article .text:nth-of-type(2){
  margin-left: 15px;
}

.double_text:not(.image_article){
  padding: 50px 0;
}

.double_text.image_article .text:not(.image){
  width: 25%;
}

.double_text.image_article .image{
  width: 100%;
}

.image_hover_wrapper .image{
  width: 100%;
}


.double_text .image{
}

.container.double_column .content{
  column-count: 2;
  column-gap: 40px;
  padding: 20px 0;
}

.content_wrapper .content{
  padding: 20px 0;
}

.content p:first-child{
/*  padding-top: 0;
*/}

.container.double_column h6:not(:first-child){
  padding-bottom: 20px;
}


.core_values > .wrapper{
  flex-direction: row;
  width: 1136px;
  padding: 0 20px;
}

.core_values .wrapper .row{
  padding-top: 0px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: auto;
  justify-content: center;  
  padding: 20px;
}

.core_values > .row{
  padding-top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;    
  width: 1136px;
}

/* *****************************  */



.fullvid {
  width: 110%;
  height: 110%;
  position: absolute;
  bottom: 50%;
  left: 50%;
  z-index: -1;
  -webkit-transform: translate(-50%, 50%);
  -moz-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
  -webkit-transition: all 400ms ease-out 400ms;
  -moz-transition: all 400ms ease-out 400ms;
  -ms-transition: all 400ms ease-out 400ms;
  transition: all 400ms ease-out 400ms;
}


/* ************************************* ABOUT US */


.core_monkeys{
  flex-direction: column;
}

.core_monkeys .wrapper{
  width: 1540px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.core_monkeys .wrapper.title{
  flex-direction: column;
  text-align: center;
}

.core_monkeys .section_title_big{
  font-family: "Roboto COndensed";
  font-style: normal;
  font-weight: bold;
  font-size: 76px;
}

.core_monkeys .section_title{
}

.core_monkeys.helpful_monkeys .user_profile{
  width: 226px;
}

.user_profile{
  padding: 0px 15px;
  width: 226px;
}

.user_name,
.user_position{
  text-align: center;
  text-transform: uppercase;
}

.user_mail{
  text-align: center;
}

.user_picture{
  background-position: center;
  background-size: cover;
  height: 320px;
}

.user_name{
  font-family: "Roboto COndensed", sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}

.user_name,
.user_mail{
  padding-top: 10px;
}

.user_position{
  font-family: "Roboto COndensed", sans-serif;  
  font-size: 14px;
  padding-top:  5px;
}


/* ***************************** INTRO TEXT HEADER */


.intro_ghost{
  background-color: rgba(0,0,0,.75);  
  position: absolute;
  min-height: 100px;
  max-width: 60vw;
  width: auto;
  right: 50%;
  bottom: 50%;
  text-align: right;  
  padding: 50px;
  z-index: -1;
}

.intro_ghost p{
  padding-top: 10px;
  padding-bottom: 0;
}

.intro_ghost h1{
  padding: 0;
}


/* *********************************** ARTICLE ELEMENT ********** */


  .container .wrapper .article{
    width: 1540px;
  }

  .article{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .article.reverse{
      flex-direction: row-reverse;
  }

  .article.reverse .text-wrapper .title,
  .article.reverse .text-wrapper .subtitle,
  .article.reverse .text-wrapper p{
    text-align: left;
  }

  .article.reverse .image-wrapper,
  .article.reverse .video_tile{
    margin-left: 0;
    margin-right: 30px;
  }

  .article a{
    display: inline-flex;
  }

  .article btn{
    width: 100%;
    margin-top:10px;
  }

  .article .text-wrapper{
    width: 60%;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-self: flex-start;    
  }

  .article.text-article .text-wrapper{
    width: 100%;
  }

  .article .text-wrapper.multiple-image{
    align-self: flex-start;
  }

.article .image-wrapper,
.article .video_tile{
  width: 40%;
  height: 340px;
  margin-left: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 5px;
  overflow: hidden;
}

.article .image-wrapper > img{
  height: 100%;
  width: 100%;
}


.article .video_tile .video_area{
    display: flex;
    align-items: center;
    justify-content: center;
}

.video_panel .video_tile .video_area:before{
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 1;
  bottom: 0;
  transition: opacity 0.5s ease-out;
  background: linear-gradient(to bottom, transparent 0%, black 100%);
}

.video_panel .video_tile .video_area:hover:before{
  opacity: 0;
}

  .article .text-wrapper .title{
    text-align: right;
  }

  .article .text-wrapper .subtitle{    
    text-align: right;
  }

  .article .text-wrapper p{
    text-align: right;
  }


  .text-article .text-wrapper .title,
  .text-article .text-wrapper .subtitle,
  .text-article .text-wrapper p{
    text-align: left;
  }

/* ***************************** WIP ARTICLE */

.article.wip_article .text-wrapper p{
  font-size: 20px;
  text-align: left;
}


.article.wip_article .text-wrapper .title,
.article.wip_article .text-wrapper .subtitle,
.article.wip_article .text-wrapper .details{
  text-align: left;
}

.article.wip_article .text-wrapper .subtitle,
.article.wip_article .text-wrapper .details{
  padding-top: 15px;
}

.article.wip_article .text-wrapper .details{
  text-transform: uppercase;
  font-size: 18px;
}

.article.wip_article .text-wrapper .subtitle{
  font-style: italic;
  font-size: 32px;
}

.article.wip_article .details{
  font-family: "Roboto COndensed", sans-serif;
  font-weight: 700;
}

/* ***************************** BOX WITH ICON & SUNSET */


.iconbox {
  margin: 15px;
  margin-bottom: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          -ms-flex-direction: column;
      flex-direction: column;
  -webkit-box-align: center;
          -ms-flex-align: center;
      align-items: center;
  width: 260px;
  height: 178px;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}
.iconbox:hover {
  cursor: pointer;
}
.iconbox:hover > .icon {
  -webkit-transform: scale(1.1);
          -ms-transform: scale(1.1);
      transform: scale(1.1);
}
.iconbox:hover > .content {
}

.iconbox .icon {
  -webkit-transition: .8s;
  -o-transition: .8s;
  transition: .8s;
  width: 136px;
  height: 136px;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(2px 2px 8px rgba(40, 0, 10, .5));
}

.leistungen_lp .iconbox .icon{
  position: relative;
  filter: none;  
}

/* ========= MAIN ICONS */

.iconbox .digital-design {
  background-image: url("../images/icons/wacom_white_alternative.png");
}
.iconbox .corporate-design {
  background-image: url("../images/icons/corporate_design.png");
}
.iconbox .branding-kampagne {
  background-image: url("../images/icons/coffee_cup.png");
}
.iconbox .neue-technologien {
  background-image: url("../images/icons/microcontroller_b.png");
}


/* ========= DIGITAL DESIGN ICONS */



.iconbox .ux-design {
  background-image: url("../images/icons/UX.png");
}

.iconbox .concept-design {
  background-image: url("../images/icons/concepts.png");
}

.iconbox .responsive-webdesign {
  background-image: url("../images/icons/responsive_webdesign.png");
}

.iconbox .graphic-design {
  background-image: url("../images/icons/wacom_white_alternative.png");
}


/* ========= CORPORATE DESIGN ICONS */



.iconbox .corporate-identity {
  background-image: url("../images/icons/corporate_design.png");
}

.iconbox .logos-icons {
  background-image: url("../images/icons/stamp.png");
}

.iconbox .print-design {
  background-image: url("../images/icons/mags.png");
}

.iconbox .packaging-design {
  background-image: url("../images/icons/packaging.png");
}


/* ========= BRANDING DESIGN ICONS */



.iconbox .strategie-beratung {
  background-image: url("../images/icons/strategie.png");
}

.iconbox .branding {
  background-image: url("../images/icons/coffee_cup.png");
}

.iconbox .messen-events {
  background-image: url("../images/icons/messe.png");
}

.iconbox .kampagnen {
  background-image: url("../images/icons/megaphone.png");
}

/* ========= NEUE TECHNOLOGIEN ICONS */



.iconbox .augmented-reality {
  background-image: url("../images/icons/AR_Holo.png");
}

.iconbox .virtual-reality {
  background-image: url("../images/icons/htc_vive.png");
}

.iconbox .hardware-prototyping {
  background-image: url("../images/icons/cnc_mill.png");
}

.iconbox .experimental-design {
  background-image: url("../images/icons/microcontroller.png");
}





.leistungen_lp .iconbox .step_1 {
  background-image: url("../images/icons/I.png");
}



.leistungen_lp .iconbox .step_2 {
  background-image: url("../images/icons/II.png");
}



.leistungen_lp .iconbox .step_3 {
  background-image: url("../images/icons/III.png");
}



.leistungen_lp .iconbox .step_4 {
  background-image: url("../images/icons/IV.png");
}

.iconbox .sunset {
  display: -webkit-box;
  display: -ms-flexbox;
  background: -o-linear-gradient(67.67deg, rgba(171, 26, 57, 0) 29.18%, #ab1a39 87.87%);
  background: linear-gradient(22.33deg, rgba(171, 26, 57, 0) 29.18%, #ab1a39 87.87%);
  margin-top: 10px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.core_values .iconbox .sunset,
.core_values .iconbox .icon{
  width: 160px;
  height: 160px;
}

.iconbox .content {
  text-align: center;
  padding: 5px;
  padding-bottom: 0px;
}


/* ***************************** */

.trenner_website .row {
  display: -webkit-box;
  display: flex;
  width: 100%;
}

.trenner_website .col {
  -webkit-box-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: flex;
}

.trenner_website .left {
  -webkit-box-pack: end;
          justify-content: flex-end;
}

.trenner_website .description {
  max-width: 567px;
}



button, btn {
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  overflow: hidden;
  background-color: var(--secondary-color);
  border: none;
  -ms-flex-item-align: left;
  -ms-grid-row-align: left;
  align-self: flex-start;
  color: var(--light-contrast);
  padding: 15px 18px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .03em;
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  font-family: "Roboto COndensed", sans-serif;
  margin-top: 50px;
  cursor: pointer;
  /* secondary */

  background: var(--secondary-color);
  border-radius: 36px;
  white-space: nowrap;  
}

button{
  margin-top: 20px;
}

btn .insider {
  background-color: var(--light-contrast);
  width: 100%;
  height: 20px;
  position: absolute;
  left: -75%;
  transform: rotateZ(45deg);
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
}


btn.btn_desktop{
  margin-top: 20px;
  margin-bottom: 10px;
}


btn:hover {
  background-color: var(--light-contrast);
  color: var(--dark-contrast);
}

btn:hover .insider {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  left: 75%;
}




.btn_mobile {
  display: none;
}


/* ************************************************* */



.trenner_website .content{
  align-items: flex-start;
  text-align: left;
  color: var(--light-contrast);
  font-weight: bold;
  transition: .5s;
  z-index:999;

}

  
.trenner_website .content .title{
    font-weight: 600;
    font-size: 60px;
    color: var(--light-contrast); 
  }
  
.trenner_website .content .subtitle{
    font-weight: 500;
    font-size: 18px;
    padding-top: 5px;
  }
  
.trenner_website .content p{
    font-family: "Real Text Pro";
    font-style: normal;
    font-weight: 350;
    font-size: 16px;
    line-height: 1.5em;
    letter-spacing: 0.04em;    
    padding-top: 30px;
  }

.trenner_website .right{
  position:relative;
}

.trenner_website .right .image{
  position: absolute;
  height: 552px;
  width: 100%;
  margin-top: -150px;
  background-size: contain;
  background-repeat: no-repeat;
}

.trenner_website .image.shadow {
  background-image: url("../images/trenner/macbook_2k_shadow_b.png");
  -webkit-animation: trenner_website_shadow 6s infinite;
          animation: trenner_website_shadow 6s infinite;
}

.trenner_website .image {
  background-image: url("../images/trenner/macbook_2k_edit_cropped.png");
  -webkit-animation: trenner_website_image 6s infinite;
          animation: trenner_website_image 6s infinite;
}

.trenner_website .image.additional {
  background-image: url("../images/trenner/escalator_2k_key_cropped.png");
  -webkit-animation: trenner_website_additional 6s infinite;
          animation: trenner_website_additional 6s infinite;
}


@-webkit-keyframes trenner_website_image {
  0% {
    background-position-y: calc(50% + 10px);
  }
  50% {
    background-position-y: calc(50% - 20px);
  }
  100% {
    background-position-y: calc(50% + 10px);
  }
}

@keyframes trenner_website_image {
  0% {
    background-position-y: calc(50% + 10px);
  }
  50% {
    background-position-y: calc(50% - 20px);
  }
  100% {
    background-position-y: calc(50% + 10px);
  }
}

@-webkit-keyframes trenner_website_shadow {
  0% {
    background-position-x: calc(0% - 10px);
  }
  50% {
    background-position-x: calc(0% + 20px);
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: .7;
  }
  100% {
    background-position-x: calc(0% - 10px);
  }
}

@keyframes trenner_website_shadow {
  0% {
    background-position-x: calc(0% - 10px);
  }
  50% {
    background-position-x: calc(0% + 20px);
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: .7;
  }
  100% {
    background-position-x: calc(0% - 10px);
  }
}

@-webkit-keyframes trenner_website_additional {
  0% {
    -webkit-filter: hue-rotate(-45deg);
            filter: hue-rotate(-45deg);
  }
  50% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(-45deg);
            filter: hue-rotate(-45deg);
  }
}

@keyframes trenner_website_additional {
  0% {
    -webkit-filter: hue-rotate(-45deg);
            filter: hue-rotate(-45deg);
  }
  50% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(-45deg);
            filter: hue-rotate(-45deg);
  }
}

/* ****************************************************** */

.container.vorteile .row {
  background-size: 80px 80px;
  background-repeat: no-repeat;
  width: 358px;
  height: 132px;
  margin: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          -ms-flex-direction: row;
      flex-direction: row;
}

.container.vorteile .row.itassistent {
  background-image: url("../images/icons/icon_IT_balloon.png");
}

.container.vorteile .row.bachelorofarts {
  background-image: url("../images/icons/icon_BA_balloon.png");
}

.container.vorteile .row.fifteen_years {
  background-image: url("../images/icons/icon_15_balloon.png");
}

.container.vorteile .column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          -ms-flex-direction: column;
      flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 17px;
  width: 261px;
}

.container.vorteile .title {
  -webkit-box-flex: 1;
          -ms-flex: 1 1 25px;
      flex: 1 1 25px;
}

.container.vorteile .column .description {
  -webkit-box-flex: 1;
          -ms-flex: 1 1 119px;
      flex: 1 1 119px;
  margin-top: 8px;
}



/* ****************************************************** */


.trenner_technologien .row {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.trenner_technologien .col {
  -webkit-box-flex: 1;
          -ms-flex: 1;
      flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.trenner_technologien .left {
  -webkit-box-pack: end;
          -ms-flex-pack: end;
      justify-content: flex-end;
}

.trenner_technologien .description {
  max-width: 567px;
}

.trenner_technologien btn {
  margin-left: auto;
}

.trenner_website btn {
  margin-right: auto;
}

.trenner_technologien .content {
  -webkit-box-align: right;
  -ms-flex-align: right;
  align-items: flex-start;
  text-align: right;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  z-index: 999;
}

.trenner_technologien .col .image {
  background-image: url("../images/trenner/escalator_2k_cropped.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: -100px;
  animation: trenner_shadow 6s infinite;
  width: 100%;
  height: 552px;
}


.trenner_technologien .col .image_movement {
  background-image: url("../images/trenner/escalator_2k_key_cropped.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: contain;  
  animation: trenner_movement_key 6s infinite;
  
  width: 100%;
  height: 100%;
}

@keyframes trenner_movement_key{
  0% {
    background-position-y: calc(50% - 10px);  
  }
  
  50% {
    background-position-y: calc(50% - -20px);  
  } 
  
  100% {
    background-position-y: calc(50% - 10px);  
  }  
}

@keyframes trenner_shadow{
  0% {
  background-image: url("../images/trenner/escalator_2k_shadowless_cropped.png");
  }
  
  50% {
  background-image: url("../images/trenner/escalator_2k_cropped.png");
  } 
  
  100% {
  background-image: url("../images/trenner/escalator_2k_shadowless_cropped.png");
  }  
}

/* ****************************************************** */


/* ********************************************* CASE STUDIES & IMAGES */

.image_wrapper + h6{
  padding-top:20px;
}

.image_wrapper,
.image_wrapper img{
  width: 100%;
}

.image_quadro_wrapper.image_wrapper{  
  text-align: center;
  height: auto;
  width: 100%;    
}

.image_viewport_width.image_wrapper{
  display: inline-flex;
  align-items: center;
  place-content: center;  
}


.image_viewport_width .image_container{
  display: inline-block;
  height: auto;
  width: 100%;
  max-width: 1136px;
}

.double_content {
  padding: 20px 0;
}

.double_content video,
.double_content img{
  width: 50%;
}


#cases_forward,
#cases_backward{
  min-height: 50px;
  min-width: 80px;
}

#cases_backward .icono{
  top: 40px;
}

#cases_forward:hover,
#cases_backward:hover{
  cursor: pointer;
}

.case_studies_gallery .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          -ms-flex-direction: row;
      flex-direction: row;
  height: 360px;
  -webkit-box-pack: center;
          -ms-flex-pack: center;
      justify-content: center;
}

.case_studies_gallery .col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 552px;
  -ms-flex-line-pack: center;
      align-content: center;
}

.case_studies_gallery .left {
  width: 455px;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.case_studies_gallery .casestudies_navigation {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  width: 97px;
  height: 150px;
  margin: 0px;
}

.case_studies_gallery .content {
  -webkit-box-align: left;
  -ms-flex-align: left;
  align-items: flex-start;
  text-align: left;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  z-index: 999;
  margin-right: 20px;
}


.case_studies_gallery .col .counter {
  text-align: center;
  height: 50px;
  margin-top: 20px;
}

.case_studies_gallery .right .image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 100%;
}

/* ****************************************************** */

.trenner_contact .row .form_checkboxes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          -ms-flex-direction: row;
      flex-direction: row;
  margin-bottom: 20px;
}

.trenner_contact .form_checkboxes iframe {
  max-height: 76px;
  text-align: center;
}

.checkbox_datenschutz, .g-recaptcha {
  width: 50%;
}

.g-recaptcha {
  text-align: center;
}



.checkbox_datenschutz {
  line-height: 1.5em;
  text-align: left;
  padding-right: 20px;
}

.form_names .form-group:first-of-type,
.form_contacts .form-group:first-of-type {
  margin-right: 30px;
}


.trenner_contact .row {
  margin: 0px;
}

input.form_checkbox {
  height: 15px;
  width: auto;
  padding: 0px;
  vertical-align: middle;
  margin: 0px;
  margin-right: 5px;
  margin-top: auto;
}

textarea{
  max-width: 766px;
}

textarea, input:not(.form_checkbox) {
  margin-top: 5px;
  padding: 5px 10px;
}

input {
  height: 40px;
}

.trenner_contact .row.content,
.trenner_contact .row.contact_form {
  width: 746px;
  margin: 0 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          -ms-flex-direction: column;
      flex-direction: column;
}

.trenner_contact .row.content {
  width: 358px;
}

.form-group {
  margin-bottom: 20px;
  width: 100%;
}

#contact-form {
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.form_names, .form_contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.form-group .form-control {
  display: block;
  width: 100%;
  background-color: var(--light-grey);
  opacity: .75;
  border-radius: 0px;
  border: 0px;
  background-clip: padding-box;
  -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}


/* ****************************************************** */

.cookie_message {
  display: none;
  flex-direction: column;
  position: fixed;
  bottom: -100px;
  left: 0;
  right: 0;
  background: var(--dark-contrast);
  color: var(--light-contrast);
  padding: 20px 32px;
  z-index: 999;
  transition: 400ms;
}

.cookie_message.active {
  bottom: 0;
  display: flex;
}

.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 130px;  
  text-align: center;
  -ms-flex-line-pack: center;
      align-content: center;
  padding: 50px 0px;
  flex-wrap: wrap;
  background-color: var(--light-grey);  
}

.footer .wrapper{
  width: 1136px;
  display: flex;
  flex-direction: row;  
}

.footer p{
  font-size: 13px;
  line-height: 1.5em;
  padding: 0
}

.footer a{
  font-size: 13px;
}

.address{
  display: flex;
  justify-content: center;
  align-items: flex-end;  
}

.address.impressum{
  justify-content: flex-start;
}

.address.impressum p{
  margin: 0;
}

.address p{
  text-align: left;
  margin-left: 20px;
}

.copyright_frame{
  flex-grow: 2;
  display: flex;
  justify-content: flex-end;  
  flex-direction: column;
}

.footer_links{
  margin-right: 20px;
  display: flex;
  justify-content: right;
  align-items: flex-end;  
}


.social_icon{
  width: 42px;
  height: 42px;
  padding:10px;
}


/* *********************************** LOGOS ***************** */

.brands_container{
  display: flex;
  justify-content: center;
}

.brands_container .wrapper{
    display: flex;
    max-width: 1280px;
    width: 100vw;
    flex-direction: column;  
}

.partner_links{
  padding-top: 50px;
  text-align: center;    
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.partner_links p{
  padding: 0;
  line-height: 1em;
}

.partner_links a{
  text-transform: uppercase;
  font-weight: 700;
  font-size: 15px;
}

.brands {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: center;
}

.brands_item {
  width: 200px;
  height: 100px;
  margin-top: 20px;
  text-align: center;
}

.brands_item img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 filter: grayscale(100%);
 filter: gray; /* IE 6-9 */      
}

.brands_item img:hover {
 -webkit-filter: none;
 -moz-filter: none;
 -ms-filter: none;
 filter: none;
}

.brands_item a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* *********************************** LEISTUNGEN ***************** */


.black_gradient{
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 1s;
}

.leistungen_quadro{
  display: flex;
  flex-direction: row;
  text-align: center;
  height: 855px;
  align-items: center;  
}

.leistungen_quadro > div{  
  height: 100%;
  width: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  position: relative;  
  overflow: hidden;  
}

.bg_image{
  position: absolute;  
  width: 100%;
  height: 100%;  
  background-size: cover;
  background-position: center;
  transition: all 1s;  
}

.leistungen_quadro > div:hover .black_gradient{
  opacity: 0;
}

.leistungen_quadro > div:hover .bg_image{
transform: scale(1.2);
}

.leistungen_quadro .title{
  font-family: "Roboto COndensed", sans-serif;
  font-size: 2.2em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0px 50px;  
  position: relative;  
}

.leistungen_quadro .description{
  font-family: "Roboto COndensed", sans-serif;
  font-size: 16px;
  font-weight: 300;  
  padding: 0px 50px;
  position: relative;  
}

.container.doublebox .wrapper{
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 1136px;
}



.container.doublebox .image_wrapper{
  background-size: cover;
  background-position: center center;
  min-height: 320px;
}


.container.doublebox .image_wrapper.vr{
  background-image: url('../images/articles/vr_article.png');
}

.container.doublebox .image_wrapper.about{
  background-image: url("../images/header/about.png");
}



.container.doublebox .image_wrapper.prototyping{
  background-image: url('../images/articles/prototyping_article.png');
}

.doublebox .article{
  padding :15px;
  min-width: 400px;
}

.container.doublebox .title{
  padding-top: 10px;
}


.leistungen_minimal{
    flex-direction: column;  
    padding-top: 0;
}

.container.leistungen_minimal .wrapper{
  display: flex;
  flex-wrap: wrap;
  width: 1136px;
  height: 50px;
  align-items: center;
  flex-direction: row;
}


.container.leistungen_minimal .content{
  flex: 1 0 24%; /* explanation below */
  margin: 5px;
  text-align: center;
  flex-basis: auto;
}



/*********************** VIDEO PLAYER */


/* Fullscreen Overlay */
.video_overlay {
  width: 100%;
  height: 100vh;
  /* 50% opacity black */
  background: rgba(0,0,0,.8);
  /* Stays locked on scroll */
  position: fixed;
  /* On top of the rest*/
  z-index: 99;
  /* Hidden */
  opacity: 0;
  /* No interference */
  left: -100%;
  /* CSS3 Transition */
  transition: opacity .5s;
  -webkit-transition: opacity .5s;
}

/* 90% width container */
.video_container {
  width: 95%;
  /* Centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.video_close {
  width: 20px;
  fill: white;
  position: absolute;
  right: 0;
  /* Bring above video */
  top: -30px;
}

.video_close:hover {
  /* 50% opacity white */
  fill: rgba(255,255,255,0.5);
  cursor: pointer;
}

/* Class to fade in overlay */
.show {
  opacity: 1;
}

/* *********************** 3 IMAGE PANEL *********  */


.image_text_overlay{
  position: relative;
  height: 65px;
  bottom: 65px;
  overflow: hidden;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
}


.image_tile{
  width: 33.33%;
}

.image_tile:hover .image_text_overlay{
  bottom: calc(100% - 87%);
  bottom: 105px;
  background-color: var(--secondary-color);
  transition: all .5s;
}

.image_tile:hover .image_text_overlay .text{
  opacity:1;
}

.image_text_overlay > div:first-child{
  padding-bottom: 7px;
  font-family: "Roboto COndensed";
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 23px;
  text-transform: uppercase;  
}

.image_text_overlay .text{
  font-family: "Roboto COndensed";
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  opacity: 0;
}

.image_panel_3 .wrapper{
  width: 100%;/**/
}

.image_3_element{
  height: 480px;
  display: flex;
  flex-direction: row;
  max-height: 480px;
  flex-wrap: wrap;  
  overflow: hidden;
}

/* *********************** SELECTED WORK *********  */

.selected_work .wrapper{
  width: 100%;
  
}

.video_element div > iframe{
  width: 100%;
  height: 100%;
}


.selected_work .video_element img{
  /*max-width: 33.22vw;*/
}

.video_element .video_play,
.video_element .video_pause{
  text-transform: uppercase;
  z-index: 9999;
  height: 58px;
  width: 58px;
  position: absolute;
  background-position: center;
  background-size: cover;
}
.video_element .video_title.hide,
.video_element .video_play.hide,
.video_panel .video_play.hide{
  opacity: 0;
  transition: opacity 1s;    
}

.video_tile .video_title{
  opacity: 1; 
  transition:opacity 1s;   
}

.video_tile:hover .video_title,
.video_tile:hover .video_play{
  opacity: 1;
  transition: opacity 1s;  
}

.selected_work .video_element .mobile_tile{
  display: none;
}


.video_pause{
  opacity: 0;
}

.video_panel .video_text_overlay .video_title{
  font-family: "Roboto";
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

.video_panel .video_text_overlay .video_title div{
    max-height: 2em;
    overflow: hidden;
}

.video_panel .video_text_overlay .customer_name{
  font-size: 16px;
  font-weight: 400;
  padding-top: 5px;
}

.video_panel .video_text_overlay .time_stamp{
  font-size: 14px;
  padding-top: 5px;  
  font-weight: 400;  
}

.video_panel .video_player{
  height: 100%;
  width: 100%;
}

.video_tile .video_player{
  position: absolute;
}

.selected_work .video_text_overlay{
  font-family: "Roboto COndensed";
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 42px;
  text-align: center;
  opacity: 1;
  z-index: 1;
}

.video_text_overlay .video_controls{
  width: calc(100% - 58px);
  height: 58px;
}

.video_tile,
.image_tile{
  background-size: cover;
  background-position: center;
  position: relative;
}

.selected_work .video_tile:first-child{
    flex-basis: 100%;
    height: 480px;
}

.selected_work .video_tile{
  width: 100%;
}
.video_element{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.article.video_panel{
}

.video_panel .video_element{
  height: 570px;
}

.video_panel .video_tile .video_area,
.image_panel_3 .image_area{
  height: 480px;
}

.video_panel .video_text_overlay{
    position: relative;
    padding: 20px 30px;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.video_panel .video_tile:hover .video_text_overlay{
  background-color: var(--secondary-color);
}

.video_panel .video_tile:hover .video_play,
.video_panel .video_tile:hover .video_pause{
  background-color: var(--light-contrast);
  color: var(--secondary-color);  
}

.video_panel .video_tile:hover .btn_play_icon{
  border-left-color: var(--secondary-color);
}


.video_panel .video_play,
.video_panel .video_pause{
  background-color: var(--secondary-color);
  border-radius: 30px;
  width: 170px;
  height: 20px;
  padding: 15px 10px;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  line-height: 1.1;
}

.article .video_play,
.article .video_play{
  position: absolute;
}

.video_play.relative{
  position: relative;
}

.btn_play_icon.btn_pause_icon{
  width: 0px;
  height: 24px;
  border-style: double;
  border-width: 0px 0px 0px 20px;
  border-color: #fff;
}

.btn_play_icon{
  width: 0; 
  height: 0; 
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 16px solid white;
  margin-right: 15px;
}


.video_panel .wrapper{
  width: 100%;
}

.video_panel .video_element > div{
  width: 33.33%;
}


.selected_work .video_element > div{
  height: 18.7vw;
  flex: 1;
  display: flex;
  place-content: center;    
  align-items: center;
}
.defs {
  position: absolute;
  top: -9999px;
  left: -9999px;
}



/* ************************************ */
/* ************************************  MEDIA SECTION */
/* ************************************   */

@media (max-width: 1580px) {

  .container .wrapper .article{
    width: 1024px;
  }

  .article .image-wrapper
  {
    height: 100%;
  }

  .article .video_tile{
    height: 340px;
    width: 100%;
  }

  .leistungen_quadro{
    height: 600px;
  }

  .video_panel .video_element{
    height: 410px;    
  }

  .image_3_element{
    height: 320px;
  }

  .video_panel .video_tile .video_area,
  .image_panel_3 .image_area{
    height: 320px;
  }

  .core_monkeys .wrapper{
    width: 100%;
  }

  .bottom_navbar_container a,
  #navbar ul li a{
    padding: 0 25px;
  }

  .video_panel .video_text_overlay .video_title{
    font-size: 16px;
  }

  .selected_work .video_text_overlay{
    font-size: 1.6em;
  }

}


@media (max-width: 1280px) {


  .article,
  .article.reverse{
    flex-direction: column;
  }

  
  .title h2 :not(.trenner_contact .title h2),  
  .article .text-wrapper .title,
  .article .text-wrapper .subtitle,
  .article .text-wrapper p,
  .article.reverse .text-wrapper .title,
  .article.reverse .text-wrapper .subtitle,
  .article.reverse .text-wrapper p{
    text-align: center;
  }

  .article .text-wrapper,
  .article .image-wrapper{
    width: 100%;
  }

  .article .image-wrapper{
    margin: 0;
  }

  .image_3_element{
    height: 470px;
  }


  .image_text_overlay{
    bottom: 0;
    height: 75px;
  }

  .image_text_overlay .text{
    opacity: 1;
    font-size: 1em;
    line-height: 1em;
  }

  .image_tile:hover .image_text_overlay{
    bottom: 0;
  }

  .selected_work .video_text_overlay{
    font-size: 1.2em;
  }

}

@media (max-width: 1280px) and (min-width: 1024px) {

  .container .wrapper .article{
    width: 768px;
  }

  .article .image-wrapper
  {
    height: 240px;
  }

  .article .video_tile,
  .article .image-wrapper{
    height: 100%;
    margin: 0 10px;
    width: 100%;
    padding: 0;
    padding-top: 20px;
    margin: 0;
  }
  .article .video_tile{
    height: 420px;
  }

  .article .text-wrapper{
    width: 100%;
  }

  .image_text_overlay{
    height: 95px;
    padding: 10px 15px;
  }

  .image_text_overlay .text{
    font-size: 1em;
    line-height: 1em;
  }

  #navbar ul li a,
  #navbar .navbar_right ul li a{
    padding: 0 15px;
  }

  .selected_work .video_text_overlay{
    font-size: 1.4em;
    line-height: 1em;
  }

  .leistungen_quadro .title{
    font-size: 1.4em;
    padding: 0px 25px;
  }

  .leistungen_quadro .description{
    padding: 0px 25px;
  }

  .leistungen_quadro btn{
    font-size: 0.8em;
  }


}

@media(max-width: 1280px) and (min-width: 768px){


  .video_panel .video_text_overlay{
    height: 110px;
    flex-direction: column;
  }

}


@media(max-width: 1024px){

  .header_title{
    font-size: 5em;
  }

  .header_subtitle{
    font-size: 2em;
    padding: 0 80px;
    text-align: center;
  }

  .leistungen_quadro .title{
    padding: 10px 25px;
    font-size: 1.4em;
  }

  .description{
    line-height: 1.3em;
  }


  .container .wrapper .article{
    width: 90vw;
  }

}



@media(max-width: 1024px) and (min-width: 769px){

  .logo{
    width: 150px;
    top: 33%;
  }

  #navbar{
    padding-left: 220px;
  }

  #navbar ul li a,
  #navbar .navbar_right ul li a{
    padding: 0 15px;
  }

  .container.ghost.index{
    height: 45vh;
  }

  .fullvid{
    height: 100%;
  }

  .video_panel .video_tile .video_area,
  .image_panel_3 .image_area{
    height: 240px;
  }

  .video_panel .video_play,
  .video_panel .video_pause{
    width: 110px;
  }

  .image_text_overlay > div:first-child{
    font-size: 1em;
  }

  .container.full_page_contact{
    padding-top: 230px;
  }

}

@media(max-width: 1024px) and (orientation:  landscape){

  .container.ghost.index,
  .container.ghost{
    height: 100vh;
    margin: 0;
  }

  .container .ghost .fullvid{
    height: 120%;
  }


  .article .text-wrapper .title,
  .article .text-wrapper .subtitle,
  .article .text-wrapper p,
  .article.reverse .text-wrapper .title,
  .article.reverse .text-wrapper .subtitle,
  .article.reverse .text-wrapper p{
    margin: 0 50px;
    text-align: left;
  }

  .article .image-wrapper,
  .article .video_tile,
  .article.reverse .image-wrapper,
  .article.reverse .video_tile{
    margin: 0;
    padding: 0;
  }

  .container .wrapper .article{
    width: 100%;
  }


  .selected_work .video_text_overlay{
    font-size: 1.4em;
  }

}


@media(max-width: 768px){

  .header_title{
    font-size: 3em;
  }

  .header_subtitle{
    font-size: 1.8em;
  }

  btn{
    margin: 20px;
  }

  .article,
  .article.reverse{
    flex-direction: column;
  }

  .container .wrapper .article{
    width: 100%;
  }

  .article .text-wrapper p{
    text-align: center;
  }

  .article .text-wrapper,
  .article .image-wrapper,
  .article .video_tile{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0;
  }

  .article .video_tile{
    height: 430px;
  }

  .article .text-wrapper .title,
  .article .text-wrapper .subtitle,
  .article .text-wrapper p,
  .article.reverse .text-wrapper .title,
  .article.reverse .text-wrapper .subtitle,
  .article.reverse .text-wrapper p{
    margin: 0 30px;
    text-align: center;
  }

  .leistungen_quadro{
    height: 100vh;
    width: 100vw;
    flex-direction: column;    
  }

  .leistungen_quadro > div{
    width: 100vw;
  }


  .selected_work .video_text_overlay{
    font-size: 1.2em;
  }
  
  .bottom_navbar_container a{
    padding: 0 15px;
  }

  .brands_item{
    width: 140px;
  }

  .partner_links{
    margin: 0 50px;
  }

  .image_panel_3 .image_3_element,
  .video_panel .video_element{
    height: 470px;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
  }

  .image_panel_3 .image_3_element{
    max-height: none;
  }

  .image_panel_3 .image_3_element .image_tile,
  .video_panel .video_element .video_tile{
    width: 100vw;
    text-align: center;
  }

  .image_panel_3 .image_3_element .image_text_overlay{
    height: 80px;
  }

  .video_panel .video_text_overlay{
    height: 110px;
    flex-direction: column;
  }

  .selected_work .video_element {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .selected_work .video_element .mobile_tile{
  display: flex;
  } 

  .selected_work .video_element .desktop_tile{
    display: none;
  }

  .selected_work .video_element .video_tile{
   aspect-ratio:  16/9;
  }



  .black_gradient{
    background:  linear-gradient(0deg, rgba(10,10,10,1) 20%, rgba(0, 0, 0, 0) 100%);
  }
  .core_monkeys.helpful_monkeys .user_profile,
  .user_profile{
    width: 176px;
  }
  .core_monkeys.helpful_monkeys .user_profile .user_picture,
  .user_profile .user_picture{
    height: 260px;
  }

}

@media(max-width: 768px) and (orientation: portrait){
  .container.ghost.index{
    height: 75vh;
  }
}


@media (max-width: 1166px) {

  .container.leistungen_minimal .content{
    margin: 10px;
  }

  .container.leistungen_minimal .wrapper{
    flex-direction: column;
    height: auto;
  }

  .container.leistungen_minimal .wrapper{
    width: auto;
  }

  .casestudies_dropdown .wrapper,
  .leistungen_dropdown .wrapper{
    width: 452px;
  }

  .leistungen_dropdown p{
    font-size: 14px;
    line-height: 1.4em;
  }
  
  .main_header {
    background-size: cover;
    display: flex;
    justify-content:center;
    align-items:center;
  }



  h1 {
    font-size: 52px;  
  }
  
  h2{
    font-size: 42px;
  }
  
  h3 {
    font-size: 17px;
  }
  
  h4 {
    font-size: 22px;
  }

  p {
    font-size: 15px;
  }  
  

  .single_text .wrapper,
  .double_text .wrapper,
  .double_column .wrapper{
    padding: 0 20px;
  }


  .doublebox .article {
    width: calc(50% - 60px);
  }
    
  .container.vorteile.fullwidth .row{
    width: 290px; 
  }

  .container.vorteile.fullwidth .column{
    width: 200px;
  }

}


@media (max-width: 1166px) and (min-width: 960px) and (orientation: landscape){

  .trenner_website .image.shadow{
      background-position-y: 50px;
  }

}


@media (max-width: 1166px) and (orientation: portrait) {

  .main_header.startseite{
    background-image: url("../images/header/startseite_mobile.png");
  }

  .form_names,
  .form_contacts {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .form_names .form-group:first-of-type,
  .form_contacts .form-group:first-of-type {
    margin-right: 0px;
  }

  h2 {
    font-size: 46px;
  }

}


@media (max-width: 1166px) and (orientation: landscape) {

  .intro_ghost{
    bottom: 50px;
  }

  .core_values .row .wrapper{
    width: 552px;
    flex-direction: row;    
  }
  
}


@media (orientation: landscape){

  .mobile_menu ul:first-child{
  }
  
}


@media (max-width: 960px){

  .leistungen_quadro{
    height: 200vh;
    width: 100vw;
    flex-direction: column;
  }

  .leistungen_quadro > div{
    width: 100%;
  }

  .cookie_message {
    font-size: 12px;
  }

  h1,h2,h3,h4,h5,h6{
    word-break: break-word;
    text-align: center;
  }

  .case_studies_gallery h2{
    text-align: left;
  }

  .article h6{
    text-align: left;
  }

  .intro_ghost{
    max-width: inherit;
  }

  .container.double_text{
    text-align: center;
  }

  .unordered_list ul{
    text-align: center;
    list-style-position: inside;  
  }

  .unordered_list ul li{
    left:0;
  }

  .unordered_list h4{
    text-align: center;
  }


  .image_hover_wrapper .hover_text{
    display: none;
  }

  #first_element{
    padding-top:0px;
  }


  .image_article .text:nth-of-type(2){
    margin: 0;
  }

  .double_column{
    padding:50px 0px;
  }


  p,
  p.menu{
    font-weight: 100;
    font-size: 14px;
    line-height: 1.5em;   
  }
  
  .container.agbdi .content p{
    text-align: center;
  }
  
  #navbar {
    display: none;
  }
  
  
  .mobile_menu_icons{
    height: 42px;
    width: 42px;
  }
  
  #mobile_trigger{
    display: block;
  }

  .logo {
    top: 30px;
    left: 0;
    width: 100%;
    background-position-x: center;
  }

  .leistungen_dropdown,
  .casestudies_dropdown,
  .dropdown_black_background{
    display: none;
  }
  
  .container.core_values,
  .container.leistungen {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-line-pack: space-evenly;
        align-content: space-evenly;
    padding: 50px 0px;
  }
  
  .container.leistungen{
    height: calc(100vh - 100px);
  }

  .container.leistungen .title {
    display: none;
  }

  
  .unordered_list.mobile_setback{
    order: -1;
  }
  

  .grey_description {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.5em;
  }  


  .red_subtitle {
    font-size: 18px;
    margin: 0px;
  }


  .unordered_list ul{
    padding-top: 0px;
    font-size: 13px;
  }

  
  .container.trenner_contact {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 50px 0;
    padding-top: 150px;
  }


  .form_checkboxes {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .checkbox_datenschutz,
  .g-recaptcha {
    width: 100%;
    text-align: -webkit-center;
  }

  .checkbox_datenschutz {
    margin-bottom: 20px;
    padding: 0;
  }

  .trenner_contact .content .description {
    display: none;
  }

  .trenner_contact .content .contact_name,
  .trenner_contact .content .contact_title {
    text-align: center;
  }

  .trenner_contact .content .contact_title {
    margin-bottom: 50px;
  }

  .trenner_contact .content .title {
    text-align: center;
    margin-bottom: 50px;
  }
  
  .container.double_column .content,
  .container.double_column h2{
    column-count: 1;
    text-align: center;
  }
  .container.double_text .wrapper,  
  .container.single_text .wrapper{
    flex-direction: column;
  }

  .container.single_text .text,
  .container.double_text .text,
  .double_text.image_article .text.image,  
  .double_text.image_article .text:not(.image){
    width: 100%;
  }
  
  .double_text.image_article .text.image{
    padding: 0;
  }
   

  .double_text .wrapper .text:nth-child(2):not(img) {
    padding-top: 20px;  
  }


  
  .intro_ghost{
    width: 100%;
    height: auto;
    text-align: center;
    background: none;
    padding: 0;
    bottom: 0;
    position: relative;
  }
  
  .intro_ghost p{
    display: none;
  }
  
  .intro_ghost h1{
    font-size: 10vmin;
    line-height: inherit;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
    text-transform: uppercase;
  }


  .footer {
    height: auto;
  }

  .footer .wrapper{
    flex-direction: column;
  }


  .footer p{
    font-size: 13px;
    line-height: 1.5em;
    padding: 0
  }

  .address{  
    text-align: center;  
    width: 100%;
  }

  .address p{
    text-align: center;
    margin-left: 0px;
  }

  .copyright_frame{
    margin-top: 20px;
    width: 100%;
    order: 1;
  }

  .footer_links{
    margin-top: 20px;  
    width: 100%;  
    margin-right: 0px;
    justify-content: center;
  }

  .double_text.reset_order .wrapper .text:nth-child(2){
    order:-1;
  }

  .double_text .wrapper .text:nth-child(2),
  .double_text .wrapper .text:first-child{
    padding-left: 0px;
    padding-right: 0px;
  }


  #bottom_navbar{
    height: 380px;
  }
  
  .bottom_navbar_container{
    flex-direction: column;
    align-items: center;
  }

  .bottom_navbar_container .nav_li{
    border: none;
    padding: 20px 0;
  }

}


@media (max-width: 960px) and (orientation: portrait) {


  .case_studies_gallery .col {
    margin: 0px;
  }

  .btn_desktop,
  .case_studies_gallery .description {
    display: none;
  }

  .btn_mobile {
    margin: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
 
  .mobile_menu ul{
    margin-top: 50px;
  }

}


@media (max-width: 960px) and (orientation: landscape) {
  
  /* ****************** MOBILE MENU */
  
  .mobile_menu_socials,
  .mobile_menu_bottoms{
    flex-direction: column;
    justify-content: center;
  }
  
  .mobile_menu .navbar{
    flex-direction: row;
    justify-content: space-evenly;
  }
  .mobile_menu_bottoms{
    order: -2;
  }
  
  .mobile_menu_socials{
    order: -1;
  }
  
  .mobile_menu_bottoms .mobile_submenu{
    border: 0px; 
    text-align: left;
  }
  
  
  .mobile_menu ul:first-child{
  }


  /* P needs to get assigned specifically to an object */
  
  p {
    font-size: 15px;
    line-height: 1.5em;    
    padding-top: 15px;
  }

  h2{
    font-size: 36px;
  }


}


@media (max-width: 960px) and (max-height: 420px) and (orientation: landscape) {

  .casestudies_navigation{
    order: -2;
  }

}


@media (max-width: 640px) {

  .leistungen a{
    width: 45%;
  }

  h1 {
    font-size: 28px;  
  }
  
  h2{
  }

}


@media(min-width: 960px){

  .padding_top_0{
    padding-top: 0;
  }

  ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: var(--scroll-bg);
      z-index: 99999;
  }

  ::-webkit-scrollbar-corner {
      background-color: var(--scroll-bg);;    
          z-index: 99999;

  }
   
  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.5);
      z-index: 99999;
  }
   
  ::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);;
    outline: 5px solid transparent;
    border-radius: 3px;
      z-index: 99999;
  }

}