/*=== Table of Content ===
*
* Shared
* Font Styles
* Header
* Welcome
* Reference
  * Frontend
  * Backend
  * Teaching
* Philosophy
* Summary
* 404
* Mobile 
*/







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

                                  Shared

==============================================================================*/
body, h1, h2, h3, h4, h5, h6, button, .button{
  font-family: 'Open Sans' !important;
  text-rendering: optimizeLegibility;
}


.no-shadow{
  text-shadow: none;
}

::selection{
  background-color: #88c540;
  color: white;
}

section{
  padding: 100px 0px;
}

section.grey{
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  background-color: #f9f9f9;
}

section.grey .section-headline{
  margin: 0 auto 20px auto;
  position: relative;
  padding: 40px 0px;
  background: initial;
  top: initial;  
  display: inline-block;
}

section .headline{
  margin-bottom: 35px;
  margin-top: 45px;
  line-height: 40px;
}
.reference p{
  line-height: 28px;
}


.rounded{
  -moz-border-radius: 7px !important;
  -webkit-border-radius: 7px !important;
  border-radius: 7px !important;
}

.clickable{
  cursor: pointer;
}
.has-tip{
  border-bottom: dotted 1px #ccc;
  cursor: help;
  font-weight: 300;
  color: #c4c4c4; 
}
.has-tip:hover{
  color: #c4c4c4;
}


.button{
  background-color: #139dd9;
}
.button:hover{
  background-color: #008cba;
}
.button.orange{
  background-color: #f37344;
}
.button.orange:hover{
  background-color: #f2632f;
}
.button.green{
  background-color: #94cb53;
}
.button.green:hover{
  background-color: #88c541;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea{
  border: 1px solid #ededed !Important;
  box-shadow: initial;
}

#up-btn{
  background: #303030;
  background-position: center;
  display: inline-block;
  vertical-align: middle;
  position: fixed;
  right: 40px;
  bottom: 0px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  opacity: 0.4;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  transition: all .2s ease-in-out;
  margin-bottom: -50px;
  z-index: 99;
  color: white;
  text-align: center;
  line-height: 40px;
  vertical-align: middle;
}

table.expand{
  width: 100%;
}

hr.dotted{
  border-style: dotted;
  border-color: white;
}

.floating{   
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floatingf;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: Floatingms;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease-in-out;
    animation-name: Floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; 
}

@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    50% {-webkit-transform:translate(0, 15px);}
    to {-webkit-transform: translate(0, -0px);}    
}
    
@-moz-keyframes Floatingf{
    from {-moz-transform:translate(0, 0px);}
    50% {-moz-transform:translate(0, 15px);}
    to {-moz-transform: translate(0, -0px);}    
}
@-ms-keyframes Floatingms{
    from {-ms-transform:translate(0, 0px);}
    50% {-ms-transform:translate(0, 15px);}
    to {-ms-transform: translate(0, -0px);}    
}
@keyframes Floating{
    from {transform:translate(0, 0px);}
    50% {transform:translate(0, 15px);}
    to {transform: translate(0, -0px);}    
}

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

                                  Font Styles

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

.uppercase{
  text-transform: uppercase;
}
.centered-text{
  text-align: center;
}

/*Colors*/
.light-grey-text{
  color: #848484 !important;
}
.headline-grey-text{
  color: #555 !important;
}
.dark-grey{
  color: #303030 !important;
}
.white{
  color: #f9f9f9 !important;
}
.breadcrumb-grey{
  color: #7c7c7c;
}
.btn-headline{
  color: #9c9c9c;
  margin-top: 25px;
}
.green-text{
  color: #94cb53 !important;
}
.red-text{
  color: #f37344 !important;
}


/*Font-Weight*/
.light{
  font-weight: 300 !important;
}
.semibold{
  font-weight: 600 !Important;
}
.bold{
  font-weight: 700 !Important;
}

/*Font-Size*/
.f14{
  font-size: 14px !Important;
}
.f16{
  font-size: 16px !Important;
}
.f18{
  font-size: 18px !Important;
}
.f20{
  font-size: 20px !Important;
}
.f22{
  font-size: 22px !Important;
}
.f24{
  font-size: 24px !Important;
}
.f28{
  font-size: 28px !Important;
}
.f30{
  font-size: 30px !important;
}
.f32{
  font-size: 32px !important;
}
.f42{
  font-size: 42px !important;
}
.f52{
  font-size: 52px !important;
}
.f64{
  font-size: 64px !important;
}
.f120{
  font-size: 120px !important;
}



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

                                  Header

==============================================================================*/
header{
  height: 100%;
  width: 100%;
  background-color: white;
  position: relative;
  color: #a4a4a4;
}
#logo{
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 100%;
 
}
#down-arrow{
  cursor: pointer;  
  position: absolute;
  bottom: 5%;
}
#header-text-wrapper{
  top: 30%;
  position: relative;
}
#header-text-headline{
  line-height: 24px;
  
}
#header-text-main{
  line-height: 100px;
  margin-left: -8px;
  margin-bottom: 200px;
}
#header-text-wrapper span{
  line-height: 42px;
}

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

                                  Welcome

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

#welcome{
  height: 100%;
  width: 100%;
  background-image: url('../img/bg_red.jpg');
  background-size: cover;
  background-position: center center;
  //background-attachment: fixed;
  color: white;
  padding-top: 150px;
}
#welcome p{
    font-weight: 300;
    font-size: 16px;
}
#signature{
  font-family: 'Dancing Script', cursive;
  margin-right: 40px;
}
#clients{
  margin-top: 75px;
}
/*==============================================================================

                                  Reference

==============================================================================*/
  
.reference{
  position: relative;
}


.clearing-thumbs li, [data-clearing] li{
  margin-right: 0px;
  text-align: center;
}
.clearing-thumbs li img{
  width: 100%;
 
}
.clearing-caption{
  background: rgba(51,51,51,0.77)
}


.clearing-blackout, .clearing-assembled .clearing-container .visible-img{
  background-color: rgba(51,51,51,0.6);
  height: 100%;
}
.clearing-assembled .clearing-container .visible-img img{
  box-shadow: 0px 1px 2px #000;

  
}
.clearing-container .carousel{
  display: none;
}


.reference-img-big{
  position: absolute;
  bottom: 0px; 
  display: none;
}
#frontend .reference-img-big{
  width: 550px;
  left: 51%;
}
#backend .reference-img-big{
  width: 550px;
  right: 51%;
}
#teaching .reference-img-big{
  width: 550px;
  left: 51%;
}

.reference-image-thumb{
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  border: 5px solid white;
  position: relative;
  margin-bottom: 30px;
}
.reference-image-thumb-overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  padding-top: 70px;
  color: white;
  font-size: 18px;
  text-align: center;
  background: rgba(150,00,00,0.55);
  z-index: 2;
  transition: all .3s ease-in-out;
  opacity: 0;
}
.reference-image-thumb-overlay strong{
  font-size: 22px;
}
.reference-image-thumb img{
  transition: all .2s ease-in-out;
  z-index: 1;
  
}
.reference-image-thumb:hover img{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.reference-image-thumb:hover .reference-image-thumb-overlay{
  opacity: 1;
}



/* Frontend */

/* Backend */

/* Teaching */



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

                               Philosophy

==============================================================================*/
#philosophy{
  height: 60%;
  width: 100%;
  background-image: url('../img/philosophy.jpg');
  background-size: cover;
  background-attachment: fixed;
  color: white;
  padding: 100px 0px;
  text-align: center;
}

#philosophy-text{
  font-style: italic;
  line-height: 38px;
  margin-bottom: 50px;
}
#philosophy-quote{
  line-height: 64px;
}

#philosophy-clarification{
}



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

                                  Summary

==============================================================================*/
#summary{
  position: relative;
}

#summary-list{
  margin: 0px !important;
  list-style: none;
}
#summary-list li{
  margin: 15px 0px;
}
#summary-list li:before {
  content: "+";
  color: rgb(201,0,18);
  float: left;
  height: 30px;
  padding-right: 5px;
}


#summary i{
  margin-top: 5px;
  margin-right: 5px;
}
#summary a{
  color: #848484;
}
#summary a:hover{
  text-decoration: underline;
}


#cc{
  border: 4px solid white;
  box-shadow: 0px 1px 2px #555;
  margin-top: -10px;
}


#contact{
  padding-top: 35px;
}

#skillset{
  margin-top: 35px;
}
#skillset-list{
  margin: 20px 0px !important;
  padding: 0px !important;
  list-style: none;
}
.skillset-tag{
  margin: 0px 5px 5px 0px !important;
  padding: 0px 10px !important;
  list-style: none;
  //background-color: rgb(201,0,18);
  background-color: #c4c4c4;
  color: white;
  font-size: 14px;
  font-weight: 300;
}


#impressum{
  position: relative;
  bottom: -100px; 
  width: 980px;
  margin: 0 auto;
  
}


#imprintModal{
  background-image: url('../img/deer.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  height: 400px;
}
#imprintModal .row{
  margin-top: 100px;
}


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

                                  404

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

/*=== Header ===*/
#fof{
  height: 100%;
  width: 100%;

}





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

                                  Mobile

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


#mobile-overlay{
  visibility: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  background: #fff url('../img/deer.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  z-index: 9999;
  top: 0px;
  left: 0px;
  text-align: left;
  padding: 0 5px;
}  
#mobile-overlay p{
  position: absolute;
  bottom: 5px;
}



/*Small*/
@media only screen and (max-width: 1000px) { 
 
 #mobile-overlay{
  visibility: visible;
 }
  

}

/*Tablet*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
  #logo{
    z-index: -1;
  }
  
}