#loader,.turnyourdevice {
  font-family: "boldfont";
  background-color: #000;
  color: #fff;
  font-size: 12px;
  letter-spacing: 2.4px;
  position: fixed;
  top:0px;
  bottom:0px;
  right:0px;
  left: 0px;
  z-index: 1400;
  text-align: center;
}
#loader .loaderinside, .turnyourdevice .tyd_inside {
  position: absolute;
  top:50%;
  left:50%;
    -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.turnyourdevice {
  display: none;
  z-index: 100;
}

#loader .loaderinside span {
  display: block;
  padding-top: 20px;
  text-transform: uppercase;
}
#superloading {
  z-index: 2000;
    position: fixed;
    width:  200px;
    height: 200px;
    top:50%;
    left:50px;
    background-color: #c00;
    color: #fff;
}

html,
body {
  margin:0;
  height: 100%;
  width: 100%;
  overflow: auto;
}
body {
background-color: #000;
color: #212121;
font-family: "lightfont";
line-height: 22px;
font-size: 16px;
margin:0;
}
* {
  margin:0px;
}
@font-face {
    font-family: "lightfont";
    font-weight: 100;
    src: url("fonts/favorit-light.woff");
}
@font-face {
    font-family: "boldfont";
    font-weight: 100;
    src: url("fonts/favorit-bold.woff");
}
h1,h2,h3,h4 {
  font-family: "boldfont";
  font-weight: normal;
  margin:0px;
  padding:0px;
  display: block;
}


 .navleft, .navright, .grid, .maingrid, .gridleft, .gridright, .opportunitiessection .cl, .opportunitiessection_inside, .video_container, .cinside,.contactsection_inside, .cc, .contactsection .cl {
  min-height: 100vh;
}

.noscroll {
  overflow: hidden;
}
a {
  text-decoration: none;
  color: #212121;
}

::selection {
  background: #000;
  color: #fff;
}
::-moz-selection {
  background: #000;
  color: #fff;
}

.supercontainer {
  display: block;
  position: relative;
  overflow: hidden;
}
.scrollable {
  overflow-y:auto;
}
.header {
z-index: 1200;
display: block;
position: fixed;
top: -150px;
left: 60px;
right: 60px;

 -webkit-transition: top 1s ease-in-out;
  transition:        top 1s ease-in-out;
}
.headervisi {
  top:0px;
}
/*
.logohome {
  padding-top: 30px;
padding-bottom: 38px;
padding-left: 46px;
padding-right: 46px;
  float: left;
  width: calc(62.5% - 92px);
  background-color:  #fff;
}
*/
.logohome {
  padding-top: 30px;
padding-bottom: 38px;
padding-left: 46px;
padding-right: 46px;
  float: left;
  width: calc(100% - 92px);
  background-color:  #fff;
}
.logohome img {
  height: 23px;
  width: auto;
  float: left;
}

.logohome h3 {
  display: inline;
}

img.res {display: none;}
.hj2 {
  padding-left: 20px;
  font-size: 13px;
  letter-spacing: 0.03em;
}
.hj2 strong {
  font-family: "boldfont";
  font-weight: normal;
}
.mainnav {
  position: relative;
}
.mainnav .navpoint {
  cursor: pointer;
 width: calc(12.5% + 1px);
 text-align: center;
 position: absolute;
 height: 100%;

 -webkit-transition: background-color 0.3s ease-in-out;
  transition:        background-color 0.3s ease-in-out;
}
.mainnav .navpoint .navbg {
  position: absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom: 0px;
  opacity: 1;
  background-color: #fff;
   -webkit-transition: opacity 0.3s ease-in-out;
  transition:          opacity 0.3s ease-in-out;
}
.mainnav .navpoint:hover .navbg {
  opacity: 0.3;
}
.mainnav .navpoint:hover h1 {
  color: #ffffff;
  font-family: "boldfont";
}

.mainnav .navpoint#n_people {
  right: 0%;
}
.mainnav .navpoint#n_work {
  right: 12.5%;
}
.mainnav .navpoint#n_clients {
  right: 25%;
}
.mainnav .navpoint h1 {

  position: absolute;
  top:0px;
  left:0px;
  right: 0px;
  z-index: 2;
  padding-top: 32px;
  font-size: 18px;
  color: #212121;
  font-family: "lightfont";
}

.mainnav .navpoint.active h1 {
  font-family: "boldfont";
  color: #212121;
}
.mainnav .navpoint.active:hover h1 {
  color: #fff;
}
.navleft {
  cursor: pointer;
  z-index: 100;
  position: fixed;
  left:-100px;
  top:0px;
  bottom: 0px;
  width: 60px;
  text-align: center;
      -webkit-transition:    left 0.5s ease-in-out;
  transition:                left 0.5s ease-in-out;
}
.navleft.visi {
  left:0px;

}
.navleft h2 {
  position: absolute;
  display: block;
  font-family: "boldfont";
  letter-spacing: 0.2em;
  font-size: 11px;
  white-space: nowrap;
  color: #fff;
  height: 15px;
  width: 210px;
  top: 50%;
  margin-top: -7px;
  left: -78px;
  z-index: 2;
-webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.navright {
  z-index: 101;
  position: fixed;
  right:-100px;
  top:0px;
  bottom: 0px;
  width: 60px;
  text-align: center;
  cursor: pointer;
      -webkit-transition:    right 0.5s ease-in-out;
  transition:                right 0.5s ease-in-out;
}
.navright.visi {
  right:0px;
}
.navright .bg, .navleft .bg {
  position: absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  opacity: 0;
  background-color: #fff;
        -webkit-transition:    opacity 0.2s ease-in-out;
  transition:                  opacity 0.2s ease-in-out;
}
.navright:hover .bg, .navleft:hover .bg {
  opacity: 0.3;
}
.navright h2 {
  position: absolute;
  display: block;
  font-family: "boldfont";
  letter-spacing: 0.2em;
  font-size: 11px;
  white-space: nowrap;
  color: #fff;
  height: 15px;
  width: 80px;
  top: 50%;
  z-index: 2;
  margin-bottom: -7px;
  right: -14px;
-webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}
#overlayer {
  width: calc(100vw - 120px);
}



*:focus {outline:none !important;} 



#thegrid {
z-index: 50;
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}


#thegridlines {
z-index: 51;
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
#thegridlines .grid {
  width: 1px;
  opacity: 1;
 -webkit-transition: all 0.5s ease-in-out;
  transition:        all 0.5s ease-in-out;
}
#thegridlines .grid.nolines {
  opacity: 0;
}
#thegridlines .gridright {
  opacity: 1;
   -webkit-transition: all 0.5s ease-in-out;
  transition:        all 0.5s ease-in-out;
}
#thegridlines .gridright.nolines {
  opacity: 0;
}
.grid {
   border-left: 1px solid rgba(255, 255, 255, .3);
  width: calc(100% + 120px);
  position: absolute;
  overflow: hidden;

}
#thegrid .grid {
  background-size: cover;
  background-repeat: no-repeat;
  background-position:  center center;  
       -webkit-transition: background-position 1.5s ease-in-out;
  transition:              background-position 1.5s ease-in-out;
}

.sidelogos {
  z-index: 99;
  position: absolute;
  right:-50%;
  bottom:84px;
  width: 12.5%;
  -webkit-transition:    right 0.75s ease-in-out;
  transition:            right 0.75s ease-in-out;
}
.sidelogos.visi {
  right:0px;
}
.sidelogos .logoholder {
  display: block;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 40px;

}
.sidelogos .logoholder img {
  opacity: 1;
    -webkit-transition:  all  0.25s ease-in-out;
  transition:            all  0.25s ease-in-out;
}
.sidelogos .logoholder a:hover img {
  opacity: 0.2;
}
.sidelogos .logoholder img {
  width: 100%;
  height: auto;
}
.titler {
  z-index: 100;
    font-family: "boldfont";
  font-size: 32px;
  line-height: 40px;

position: absolute;
left: 0px;
bottom:-100%;
max-width: 1000px;
color: #fff;
  -webkit-transition:    bottom 0.75s ease-in-out, opacity  0.15s ease-in-out;
  transition:            bottom 0.75s ease-in-out, opacity  0.15s ease-in-out;
}
.bigtitler {
font-family: "lightfont";
font-size: 34px;
line-height: 48px;
padding-top: 22px;
}


.homegrid .titler {
font-size: 32px;
line-height: 36px;
}
.homegrid .bigtitler {
  padding-top: 13px;
  font-size: 28px;
line-height: 28px;
}

.titler sup {
  font-family: "boldfont";
}
.titler.hometitler {
  font-family: "boldfont";
}
.titler.hometitler strong {
  display: block;
  font-family: "boldfont";
  font-weight: normal;
}
.titler_visi {
  bottom:84px;
}
#t1 {
  padding-right: 60px;
  z-index: 101;
}
.ssA {
-moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}
.ssY {
-moz-font-feature-settings: "ss03";
  -webkit-font-feature-settings: "ss03";
  font-feature-settings: "ss03";
}
.ssEt {
  -moz-font-feature-settings: "ss04";
  -webkit-font-feature-settings: "ss04";
  font-feature-settings: "ss04";
}


.maingrid {
  display: block;
  position: absolute;
  left:60px;
  right:60px;
}


.g1 { opacity:1; left:0px;   z-index: 2;}
.g2 { opacity:1; left:12.5%; z-index: 3;}
.g3 { opacity:1; left:25%  ; z-index: 4;}
.g4 { opacity:1; left:37.5%; z-index: 5;}
.g5 { opacity:1; left:50%  ; z-index: 6;}
.g6 { opacity:1; left:62.5%; z-index: 7;}
.g7 { opacity:1; left:75%  ; z-index: 8;}
.g8 { opacity:1; left:87.5%; z-index: 9;}

#thegrid .g1 { background-position: -150px 50%}
#thegrid .g2 { background-position: -380px 50%}
#thegrid .g3 { background-position: -250px 50%}
#thegrid .g4 { background-position: -400px 50%}
#thegrid .g5 { background-position: -500px 50%}
#thegrid .g6 { background-position: -350px 50%}
#thegrid .g7 { background-position: -550px 50%}
#thegrid .g8 { background-position: -150px 50%}


.fadeOuter {
    opacity: 0;
   -webkit-transition: opacity 1s;
  transition:          opacity 1s;
}
 .gridleft {
    z-index: 1;
  width: 100%;
  position: absolute;
  left:0px;
  display: block;
  background-position: -150px 50%;
   -webkit-transition: left 0.15s,background-position 1.5s  ease-in-out;
  transition:          left 0.15s,background-position 1.5s  ease-in-out;
 }
#thegrid .gridleft {
  background-position:-60px 50%;
  background-size: cover;
}

.gridright {
  background-repeat: no-repeat;
  z-index: 10;
  position: absolute;
  left:calc(100% - 60px);
  border-right: 0px;
  border-left: 1px solid rgba(255, 255, 255, .3);
  width: 100%;
   -webkit-transition: left 0.15s ease-in-out;
  transition:          left 0.15s ease-in-out;
}
#thegrid .gridright {
  background-size: cover;
    background-position: 150px 50%;
   -webkit-transition: background-position 1.5s  ease-in-out;
  transition:          background-position 1.5s  ease-in-out;
}



.c {
  overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
  transition:           all 0.5s ease-in-out;
  position: absolute;
  top:0px;
  bottom:0px;
  right: 0px;
  left:100%;
  z-index: 1000;
}
.o {
  overflow: hidden;
    -webkit-transition: right 0.5s ease-in-out;
  transition:           right 0.5s ease-in-out;
  position: absolute;
  top:0px;
  bottom:0px;
  left: 0px;
  right:100%;
  z-index: 1000;
}
.c.copen {
  left:0px;
}
.o.copen {
  right:0px;
}
.cinside {
  position: relative;
  width: calc(100% - 120px);
  margin-left: 120px;
}
.oinside {
  position: relative;
  width: calc(100% - 120px);
  margin-right: 120px;
}

.contactsection {
  z-index: 2;
  position: relative;
  margin-left: calc(62.5% - 61px);
  background-color: #fff;
  padding-left: 12.5%;
  overflow: hidden;
}
.opportunitiessection {
  z-index: 2;
  position: relative;
  margin-right: calc(62.5% - 60px);
  background-color: #fff;
  overflow: hidden;
}

.contactsection_inside {
  display: block;
  position: relative;
   margin-right: 60px;
}
.opportunitiessection_inside {
  display: block;
  position: relative;
  margin-left: 60px;
}

.contactsection .cl.cl1 { left:0%; }
.contactsection .cl.cl2 { left:50%; } 
.contactsection .cl.cl3 { display: none; } 
.opportunitiessection .cl.cl1 { left: 33.33%; }
.opportunitiessection .cl.cl2 { left: 66.66%; } 

.cc {
  right: 0px;
  cursor: pointer;
  position: absolute;
  width: 60px;
  z-index: 2;
  color: #000;
  border-left:1px solid #eee;
}
.o .cc {
  left: 0px;
  cursor: pointer;
  position: absolute;
  width: 60px;
  z-index: 2;
  color: #000;
  border-right:1px solid #eee;
}
.ccloser {
  position: absolute;
  top:50%;
  margin-top: -7px;
  left:50%;
  margin-left: -7px;
  height: 15px;
  width: 15px;
  background-image: url("img/close.svg");
  background-repeat: no-repeat;
  background-position: center center;
    -webkit-transition: transform 0.2s ease-in-out;
  transition:           transform 0.2s ease-in-out;
}
.cc:hover .ccloser{
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.cl {
  width: 1px;
  z-index: 1;
  position: absolute;
  border-left:1px solid #eee;
}
.ctext {
z-index: 1;
font-size: 18px;
font-family: "boldfont";
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
min-width: 100vw;
top: 50%;
left:0px;
    -webkit-transition: left 0.5s ease-in-out;
  transition:           left 0.5s ease-in-out;
  -webkit-transition-delay: 0.5s;
  transition-delay:         0.5s;
}

.ctext small {
  font-family: "lightfont";
  display: block;
  font-size: 11px;
  line-height: 11px;
  color: #757575;
}
.ctext .spacer {
  display: block;
  min-height: 100px;
}
.ctext img {
  display: block;
  margin-bottom: 25px;
}
.cbottom {
  white-space: nowrap;
  padding-left: 20px;
  padding-right: 20px;
  opacity: 0;
  border-top:1px solid #eee;
  padding-top: 20px;
  padding-bottom: 21px;
  text-align: center;
  position: absolute;
  left:0px;
  right:0px;
  bottom:0px;
  z-index: 4;
  font-size: 10px;
  background-color: #fff;
  color: #bdbdbd;
  overflow: hidden;



}
.copen .cbottom {
  opacity: 1;
}
.cbottom a {
  color: #bdbdbd;
}

.c_overlay {
  z-index: 1;
  position: absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
}

#follow {
  display: none;
  z-index: 995;
  position: absolute;
}
.follow2 {
  top:-100%;
  left:-100%;
  display: block;
  z-index:100;
  position: absolute;
}

.closer {
  position: absolute;
  width: 66px;
  height:66px;
  top:-33px;
  left:-33px;
  z-index: 101;
  border:2px solid #fff;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("img/close_white.svg");
}
#playpause {
  position: absolute;
  top:-33px;
  left:-93px;
  width: 66px;
  height:66px;
  border:2px solid #fff;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
}

#playpause.active {
  -webkit-animation-name: clicky;
    animation-name: clicky;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;

     -webkit-transition: background-color 0.1s ease-in-out;
  transition:            background-color 0.1s ease-in-out;
}
@-webkit-keyframes clicky {
    from {
    }
    to {
    background-color: #fff;
    }
}
@keyframes clicky {
    from {
    }
    to {
    background-color: #fff;
    }
}
#play {
  display: block;
  left:29px;
  top:28px;
position: absolute;
-webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  width: 0; 
  height: 0; 
  border-left:  6px solid transparent; 
  border-right: 6px solid transparent; 
  border-bottom: 10px solid #fff; 
}
#pause {
  display: none;
  left:28px;
  top:27px;
  position: absolute;
  height: 12px;
  width: 4px;
  border-left:  3px solid #fff;
  border-right: 3px solid #fff;
}
#mobplay /*, #mobpause  */{
  z-index: 3000;
  cursor: pointer;
  position: fixed;
  top:40%;
  left:50%;
  margin-left: -33px;
  margin-top: -33px;
  width: 66px;
  height:66px;
  border:2px solid #fff;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
}
#mobpause {
  position: fixed;
  z-index: 100;
  top:0px;
  bottom:0px;
  right:0px;
  left:0px;
}
#mobplayplay {
  left:29px;
  top:28px;
position: absolute;
-webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  width: 0; 
  height: 0; 
  border-left:  6px solid transparent; 
  border-right: 6px solid transparent; 
  border-bottom: 10px solid #fff; 
}
/*
#mobpausepause {
  left:29px;
  top:28px;
position: absolute;
  height: 12px;
  width: 4px;
  border-left:  3px solid #fff;
  border-right: 3px solid #fff;
}
*/


#mainvideo_wrapper {
  z-index: 10;
}
#clientsvideo_wrapper {
  z-index: 1;
}
#workvideo_wrapper {
  z-index: 2;
}
#peoplevideo_wrapper {
  z-index: 2;
}
#contactvideo_wrapper {
  z-index: 3;
}
#opportunities_wrapper {
  z-index: 3;
}




.video_container {
  background-size: cover;
  background-position:  0px center;
  display: block;
  background-repeat: no-repeat;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
 .backgroundvid {
  opacity: 1;
  position: absolute;

  top: 50%;
  left: 50%;
  -webkit-transform:  translate(-50%,-50%);
  transform:          translate(-50%,-50%);


 
}
.novideohover .backgroundvid {
  opacity: 0;

         -webkit-transition:  opacity 0.5s ease-in-out;
  transition:                 opacity 0.5s ease-in-out;
}
.videohover {
  z-index: 11 !important;
}
.videohover .backgroundvid {
  opacity: 1;
         -webkit-transition:  opacity 0.5s ease-in-out;
  transition:                 opacity 0.5s ease-in-out;
}


#op {
        -webkit-transition:   top 0.5s ease-in-out;
  transition:                 top 0.5s ease-in-out;
}


.byline {
  position: fixed;
  z-index: 5000;
  bottom:-300px;
  left:100px;
  min-height: 50px;
  color: #fff;
      -webkit-transition:   all 0.25s ease-in-out;
  transition:               all 0.25s ease-in-out;
}
.byline.visi {
   bottom:100px;
}
.byline img {
  padding-top: 6px;
  padding-bottom: 6px;
  float: left;
  padding-right: 45px;
  height: 57px;
  width: auto;
  border-right:1px solid #fff;
}
.byline .btext {
  float: left;
color: #fff;
padding-left: 50px;
padding-top: 6px;
}

.byline .btext h1 {
  display: block;
  white-space: nowrap;
   font-family: "boldfont";
  font-size: 32px;
  line-height: 27px;
}
.byline .btext h2 {
  display: block;
  white-space: nowrap;
   font-family: "lightfont";
  font-size: 24px;
  line-height: 40px;
}
#op #title {
  width: 12.5%;
  margin-top: -45px;
  cursor: pointer;
 float: right;
  padding-top: 11px;
  padding-bottom: 12px;
  font-size: 14px;
  background-color: #fff;
  text-align: center;
}

#jobform {
  opacity: 0;
  background-color: #fff;
  z-index: 99;
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;

        -webkit-transition:  opacity 0.25s ease-in-out;
  transition:                opacity 0.25s ease-in-out;
}
.copen #jobform {
  opacity: 1;
    -webkit-transition-delay:0.5s;
  transition-delay:0.5s;
}
.optext {
  white-space: nowrap;
  font-family: "boldfont";
  font-size: 24px;
  color: #212121;
  z-index: 55;
  max-width: 380px;
  margin-left: 42px;
  padding-top: 30px;
  position: absolute;
  z-index: 1;
}

.oprow {
  border-left:1px solid #eee;
  border-top:1px solid #eee;
  background-color: #fff;
  position: relative;
  font-size: 12px;
  font-family: "boldfont";
  line-height: 14px;
  padding-top:27px;
  padding-bottom: 28px;
  padding-left: 39px;
  padding-right: 39px;
  display: block;
}
.oprownopad {
  padding: 0px;
}
.oprow input {
  border:1px solid #fff;
}
::-webkit-input-placeholder {
    color: #ccc;
    opacity: 1 !important; /* for older chrome versions. may no longer apply. */
}

:-moz-placeholder { /* Firefox 18- */
    color: #ccc;
    opacity: 1 !important;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: #ccc;
    opacity: 1 !important;
}

:-ms-input-placeholder {  
   color: #ccc;
}
.oprow select {
    background-color: #fff;
color: #ccc !important;
-moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      border: none;
        padding-bottom: 10px;
     padding-top: 0px;
      padding-left: 0px;
width: 100%;
outline: none;
cursor: pointer;
}
.oprow select:focus {
  color: #212121 !important;
}
.oprow select option {
  padding:0px;
}
.oprow input:focus, .oprow textarea:focus  {
  color: #212121;
}

.oprow select option:checked {
  color: #c00 !important
}
.oprow select#interestedin.focused {
  color: #212121 !important;
}

.oprow input, .oprow select, .oprow textarea {
  font-size: 18px;
  color: #212121;
  font-family: "lightfont";
  margin-top: -7px;
  border:none;
  position: absolute;
}
.oprow textarea {
resize: none;
position: relative;
width: 69%;
float: right;
padding:0px;
margin-top: -4px;
}
.oprow label {
  min-width: 30%;
  float: left;
  display: inline-block;
  white-space: nowrap;
}
.select_wrapper {
  position: relative;
  display: block;
  width: 70%;
  float: right;
}
.select_wrapper:before {
    content:url("img/arrow-grey-down.png");
      position: absolute;
      right: 0px;
      top: 0px;
      height: 15px;
      width: 15px;
      z-index: 2;
      pointer-events: none;
}
.tick {
  z-index: 2;
  position: absolute;
  background-image: url("img/tick.png");
  background-position: center right;
  background-repeat: no-repeat;
  height: 16px;
  width: 0px;
  right: 30px;
  top:50%;
  margin-top: -12px;
  -webkit-transition-delay:1s;
  transition-delay: 1s;
  -webkit-transition:   all 0.5s ease-in-out;
  transition:           all 0.5s ease-in-out;
}
.tick.sent {
  width: 16px;
}
.arrowright {
  z-index: 1;
  position: absolute;
  background-image: url("img/arrow-grey-copy.png");
  background-position: center right;
  background-repeat: no-repeat;
  height: 16px;
  width: 16px;
  right: 30px;
  top:50%;
  margin-top: -12px;
  -webkit-transition-delay:1s;
  transition-delay: 1s;
  -webkit-transition:   all 0.5s ease-in-out;
  transition:           all 0.5s ease-in-out;
}
.arrowright.sent {
  width: 0px;
}
#send_message {
  border-top: 1px solid #eee;
  position: relative;
  background-image: url("img/bg.svg");
  background-position: 100% 50%;
  color: #fff;
   font-size: 14px;
   display: block;
   padding-left: 39px;
   padding-right: 39px;
   padding-top: 25px;
   padding-bottom: 26px;
   text-align: left;
   width: 100%;
        -webkit-transition:   all 1.3s ease-in-out;
  transition:                 all 1.3s ease-in-out;
}
#why {
  height: 200px;
}
#send_message.sent {
border-top: 1px solid #eee;
  background-position: 0% 50%;
  color: #212121;
}
#send_message.notsent {
}
.error {
  color: #c00 !important;
}

.hambholder {
cursor: pointer;
display: none;
float: right;
width: 18px;
height: 15px;
position: relative;
margin-right: 30px;
margin-top: 33px;

}
.hambholder.active {
  height: 18px;
  -webkit-transition:   all 0.25s ease-in-out;
  transition:           all 0.25s ease-in-out;
}
.hambline {
  width: 18px;
  display: block;
  height: 1px;
  background-color: #212121;
  position: absolute;
  -webkit-transition:   all 0.25s ease-in-out;
  transition:           all 0.25s ease-in-out;
}
#l1 {top:0px;}
#l2 {top:49%;}
#l3 {bottom:0px;}

.hambholder.active #l1 {
  width:24px;
  top:9px;

  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.hambholder.active #l2 {
  background-color: #fff;
  width: 0px;
}
.hambholder.active #l3 {
  width:24px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  bottom:8px;
}
.resnav {
  display: none;
  background-color: #fff;
  border-top: 1px solid #eeeeee;
}
.resnavpoint {
  cursor: pointer;
  color: #bdbdbd;
  font-size: 18px;
  display: block;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 23px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eeeeee;
}
.resnavpoint.active {
  font-family: "boldfont";
  color: #212121;
}
.resbottomline {
line-height: 15px;
padding-left: 30px;
padding-right: 30px;
font-size: 9px;
padding-top: 11px;
padding-bottom: 12px;
font-family: "boldfont";
color: #bdbdbd;
letter-spacing: 0.1em;
}
.resbottomline br {
  display: none;visibility: hidden;
}
.scroll {
  overflow: visible !important;
  position: relative !important;
}
.legal {
  overflow: scroll;
  position: fixed;
  z-index: 99;
  text-align: left;
  background-color: #e3e3e3;
  display: block;
  padding-left: 60px;
  padding-right: 60px;
  color: #212121;
  top:0px;
  bottom:0px;
  right:0px;
  left:0px;
}
.legal .legal_inside {
  max-width: 50%;
  margin:0 auto;
  padding-top: 150px;
  padding-bottom: 60px;
}
.legal a {
  color: #212121;
}
.legalgrey {
  color: #e3e3e3;
}

/* start res thingzzzz */
@media (max-width: 1400px) { 
.hometitler {
max-width: 990px;
}
}

@media (max-width: 1225px) { 
.g5,.g6,.g7,.g8 {
  display: none;
}
.g1,.g2,.g3,.g4 {
  width: 25%;
}
.g1 {left:0px;}
.g2 {left:25%;}
.g3 {left:50%;}
.g4 {left:75%;}

.contactsection {
margin-left: calc(25% - 61px);
padding-left: 0px;
}
.ctext {
  left: calc(25% + 60px);
}
.contactsection .cl.cl1{left: calc(75% - 65px);}
.contactsection .cl.cl2 {left: calc(25% + 60px);}
.opportunitiessection .cl.cl1 {left:50%;}
.opportunitiessection .cl.cl2 {display: none;}

.opportunitiessection {margin-right: calc(50% - 60px);}

#t1 {
  padding-right: 30px;
}
.sidelogos {
  width: 25%;
}
.sidelogos .logoholder {
    display: block;
    padding-top: 30px;
    max-width: 30%;
    margin: 0 auto;
}

} /* ende 1225 */


@media (max-width: 950px) { 
.g3,.g4 {display: none;}
.g1,.g2 {width: 50%;}
.g2 {left:50%;}
.navpoint {display: none;}
.navleft, .navright {display: none;}
#overlayer {width: calc(100vw - 60px);}
.maingrid {left: 30px;right: 30px;}
.gridright {left: calc(100% - 30px);}
.header {left:30px;right:30px;background-color: #fff;}
.titler {font-size: 21px;line-height: 24px;}
.bigtitler {
    font-size: 24px;
    line-height: 28px;
    padding-top: 10px;
}
.logohome {
    padding-top: 20px;
    padding-bottom: 23px;
    padding-left: 30px;
    padding-right: 30px;
    width: initial;
}

#t1.hometitler {
  padding-right: 25%;
}
.sidelogos .logoholder {
    padding-top: 20px;
    max-width: 75px;
}

#t1 br { display: none; visibility: hidden; }
img.notres {
  display: none;
}
img.res {
display: block;
height: 32px;
width: auto;
margin-top: 5px;
margin-bottom: 6px;
float: none;
}
.hj2 {
    padding-left: 0px;
    font-size: 11px;
    display: block;
    clear: both;
    padding-top: 5px;
}
.hambholder {display: block;}
.c {
  overflow: visible;
  background-color: #fff;
  bottom: -200%;
  left:0px;
  right:0px;
  top:unset !important;
}
.c.copen {
  bottom:0px;
}
.c_overlay, .cbottom {display: none;}
.cinside {
    position: relative;
    width: unset !important;
    margin-left: 0px;
}
.cc {
  height: 100%;
  width: 30px;
}
.contactsection {
  overflow: visible;
    margin-left: 0px;
    padding-left: 60px;
    padding-right: 60px;
}
.ctext {
  font-size: 16px;
  line-height: 18px;
  -webkit-transform:none !important;
  transform:none !important;
  position: relative;
  left:unset !important;
}

.contactsection_inside {
    position: relative;
    margin-right: 0px;
    padding-top: 53px;
    padding-bottom: 52px;
}
.cbottom {position: relative;}
.ctext img { margin-bottom: 10px;}
.ctext .spacer {
    min-height: 40px;
}
.contactsection .cl.cl1 {
    left: -30px;
    top: 0px;
    bottom: 0px;
}
.contactsection .cl.cl2 {
    left: 50%;
    top: 0px;
    bottom: 0px;
}
.contactsection .cl.cl3 { 
  display: block;
right: -31px;
    top: 0px;
    bottom: 0px;
  } 

 .opportunitiessection .cl, .opportunitiessection_inside, .video_container, .cinside,.contactsection_inside, .cc, .contactsection .cl {
  min-height: unset !important;
}
.legal {
  padding-left: 30px;
  padding-right: 30px;
}
.legal .legal_inside {
    max-width: unset;
    margin: 0 auto;
}
.legal h1 {
  font-size: 21px;
 line-height: 24px;
}
.legal h2 {
  font-size: 21px;
 line-height: 24px;
}
.legal .legal_inside { padding-top: 90px;}
.byline { 
left:30px;
}
.byline.visi {
  bottom:60px;
}
.byline .btext {
  float: none;
  padding:0px;
  padding-top: 30px;
}
.byline img {
  float: none;
  padding:0px;
  border-right: none;
}
.byline#video_Clients_B1 img,
.byline#video_Clients_B5 img
 {
  height: 40px;
}
.byline .btext h1 {
  font-size: 21px;
  line-height: 24px;
}
.byline .btext h2 {
  font-size: 18px;
  line-height: 22px;
}
.titler, .homegrid .titler, .homegrid .bigtitler {
    font-size: 21px;
    line-height: 24px;
}
.homegrid .bigtitler  {
  font-size: 19px;
    line-height: 24px;
}


}/* ende 950px */



@media (max-height: 500px) {
  .sidelogos {
  left:0px;
  right:0px;
  bottom:20px;
  width: unset;
  display: block;
  padding-top: 20px;
}
.sidelogos .logoholder {
  float: left;
  padding-top: 0px;
  max-width: unset;
  padding:0px;
  padding-right: 20px;
  
}
.sidelogos .logoholder img#lg1 { height: 65px; width: auto; }
.sidelogos .logoholder img#lg2 { height: 65px; width: auto; }
.sidelogos .logoholder img#lg3 { height: 65px; width: auto; }

#t1.hometitler {
  padding-right: 20px;
}
.titler_visi {
    bottom: 64px;
}
.hometitler.titler_visi {
    bottom: 104px;
}
}

@media (max-width: 550px) { 
#t1.hometitler {
  padding-right: 20px;
}
.titler_visi {
    bottom: 84px;
}
.hometitler.titler_visi {
    bottom: 184px;
}
.sidelogos {
  left:0px;
  right:0px;
  bottom:110px;
  width: unset;
  display: block;
  padding-top: 20px;
}
.sidelogos .logoholder {
  float: left;
  padding-top: 0px;
  max-width: unset;
  padding:0px;
  padding-right: 20px;
  
}
.sidelogos .logoholder img#lg1 { height: 65px; width: auto; }
.sidelogos .logoholder img#lg2 { height: 65px; width: auto; }
.sidelogos .logoholder img#lg3 { height: 65px; width: auto; }

.resbottomline br {
  display: block;visibility: visible;
}
.hometitler.titler_visi {
    bottom: 200px;
}


}/* ende 550px */

@media (max-height: 680px) {
  .optext {
    padding-top: 30px;
    position: relative;
    margin-left: 20px;
  }
  #jobform {
    
  }
  #why {
    height: 50px;
  }
  .oprow {
    padding-top:    15px;
    padding-bottom: 15px;
    padding-left:   20px;
    padding-right:  20px;
  }
}

@media (max-height: 440px) { 
.contactsection_inside {
    margin-right: 0px;
    padding-top: 10px;
    padding-bottom:10px;
}
.ctext img {margin-bottom: 3px;}
.ctext br.hidden{display: none; visibility: hidden;}
.ctext .spacer {min-height: 10px;}
.resnavpoint, .resbottomline {padding-top: 7px;padding-bottom: 8px;}
}