html {
    height: 101%;
}

body {
    background-color: #fff;
    color:#333;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight:300;
    line-height: 1.6;
    
    opacity:0; 
    -webkit-animation:fadeIn ease-in 1;  
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:.5s;
    -moz-animation-duration:.5s;
    animation-duration:.5s;
    
    -webkit-animation-delay:.4s;
    -moz-animation-delay:.4s;
    animation-delay:.4s;
}

/* fade in animation for whole page onload */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.container {
    width:75%;
    max-width:1200px;
}

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

::selection{
    background: #333;
    color: #fff;
}

.imageContainer {
    margin-bottom: 50px;
}

.row{
    margin-bottom: 20px;
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 18px;
    margin: 0 0 0 0;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size:20px;
    font-weight: 300;
}

h5 {
    font-size:14px;
    margin: 0 0 0px 0;
    font-weight: 500;
}

strong {
    font-weight: 500;
}

.font-medium{
    font-weight: 400;
}

.light-font{
    font-weight: 300;
}

.date-cv{
    padding-right: 8px;
}


.dash {
    margin-top: 22px;
}

a {
    text-decoration:none;
    color: #333;
    font-weight: 400;
    font-style: normal;
}

a:hover{
    text-decoration:none;
    color: #333;
    font-weight: 400;
}



hr {
    border-bottom: solid 2px #444;
	border-top: none;
border-left: none;
border-right: none;
    margin: -2px 0 0 0;
}

.medium-font {
    font-weight: 500;
}

.light-font {
    font-weight: 300;
}

.border {
    border: 2px solid #333;
}


/***************************************
Header
***************************************/
#header{
    height:125px;
    padding-top: 30px;
}

#header a {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 1px;
    margin-right: 30px;
    
}

#header a:hover{
    text-decoration:none;
    font-weight: 500;
    color: #333;
}

#navigation a{
    margin-bottom: -1px;
    font-weight: 300;
    display: inline-block;
}

#navigation a:hover{
    text-decoration:none;
    font-weight: 300;
    margin-bottom:-3px;
    border-bottom: 2px solid;
    display: inline-block;
}


/***************************************
first container
***************************************/
.first-container{
    margin-top:30px;
}


/***************************************
social
***************************************/
#social {
    
}

#social img {
    float: right;
    margin-left: 3px;
    margin-top: 6px;
    width:18px;
    opacity: 0.7;
}

#social img:hover {
    opacity: 1.0;
}


/***************************************
col
***************************************/
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    padding-left: 10px;
    padding-right: 10px;
}

/***************************************
project thumbnails
***************************************/
.short-introduction{
    margin-top: 50px;
    margin-bottom: 50px;

}

.short-introduction h3{
    margin-bottom: 10px;
}

/***************************************
project thumbnails
***************************************/
.work-container .row {
    margin-bottom:0px;
}
.thumb{
    margin-bottom:30px;
}

.thumbcaption {
    margin-top:8px;
}

.thumbcaption h2{

}


.tags-work-page{
    display: none;
    
    width:100%;
    overflow: hidden;
    height:20px;
    font-size:14px;
    font-weight: 300;
    word-spacing: 2px;
}

.thumb-divider{
    border-bottom:1px solid #777;
    margin-top: 35px;
    margin-bottom: -15px;
    
    display:none;
}


.blackcaption {
    color:#000;
}

.whitecaption {
    color:#fff;
}

/***************************************
single project pages
***************************************/
/***************************************
header
***************************************/
#project-header{
    margin-top:15px;
    margin-bottom: -2px;
}

#project-header h2{
    font-size:36px;
    font-weight:500;
    letter-spacing: 1px;
    margin-top:0px;
}

.title-container{
    /*height:110px;*/
}

.subtitle{
    /*
    position:absolute;
    bottom:0px;
    margin-bottom:0;
    */
    
    margin-top: 15px;
}

.tags-project-outer{
    height:95px;
}

.tags-project-inner{
    text-align: right;
    position:absolute;
    bottom:-3px;
    right:10px;
    margin-bottom:0;
    /*font-style: italic;*/
    line-height: 1.75;
    word-spacing: 3px;
}

.date{
    font-weight:400;
}

#project-header hr{
    margin-top:-12px;
}

.project-images{
    margin-top: 30px;
}

.project-images img{
    margin-bottom: 20px;
}

.project-images h3{
    margin-bottom: 10px;
}

.project-images p{
    margin-bottom: 20px;
}


/***************************************
single project pages
***************************************/
/***************************************
description
***************************************/
.project-description{
    margin-top: 20px;
    margin-bottom: 15px;
}

/***************************************
text blocks
***************************************/

.project-one-col{
    margin-top: 30px;
    
}


/* description */
.description-one-col {
    position:absolute;
    bottom:0px;
    margin-bottom:0;
}


.description{
    font-size:14px;
    font-weight:300;
    height:187px;
}

.description h3{
    margin-top:-5px;
    font-size:20px;
}

.tags{
    position:absolute;
    bottom:0px;
    margin-bottom:0;
    font-style: italic;
}

.col-md-4 > p{
    width:100%;
}

.textblock12{
    padding: 20px 20px 20px 20px;
    border: solid 2px #000;
}

.textblock6{
    padding: 20px 20px 20px 20px;
    border: solid 2px #000;
}

.textblock p{
    margin: 12px 0 0 0;
    line-height: 1.5;
}

/***************************************
zentrierte Bildunterschriften
***************************************/
.centered {
    text-align: center;
}

.emphasized-box{
    background-color: #eee;
    padding-top:15px;
}

.mini-description{
    margin:auto;
    margin-top:20px;
    background-color: #eee;
    width: 100%;
    padding: 20px 20px 20px 20px;
    border-top: solid 2px #333;
}

.mini-description h3{
    margin-bottom: 10px;
}

/***************************************
single project pages
***************************************/
/***************************************
video
***************************************/
.videocontainer{
    position: relative;
    padding-bottom: 56.25%;
    height: 0; 
    overflow: hidden;
}

.videocontainer iframe,
.videocontainer object,
.videocontainer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/***************************************
bilder spalte innerhalb einer reihe
***************************************/
.img-col-inside-row img{
    margin-bottom:20px;
}

.img-col-inside-row-3d img{
    margin-bottom:80px;
    
    -webkit-box-shadow: 0px 17px 60px -7px rgba(0,0,0,0.71);
    -moz-box-shadow: 0px 17px 60px -7px rgba(0,0,0,0.71);
    box-shadow: 0px 17px 60px -7px rgba(0,0,0,0.71);
}

/***************************************
db_avg
***************************************/
.img-shadow {
    -webkit-box-shadow: -17px 17px 60px -7px rgba(0,84,84,0.71);
    -moz-box-shadow: -17px 17px 60px -7px rgba(0,84,84,0.71);
    box-shadow: -17px 17px 60px -7px rgba(0,84,84,0.71);
}

.comp-description{
    font-weight: 400;
    font-size: 16px;
    padding-top: 5px;
    text-align: center;
}

.comp-description-big{
    padding-top: 5px;
    text-align: center;
}

.comp-description-666{
    font-weight: 400;
}


#about {
    margin-top:22px;
    
}

#about p{
    font-size: 16px;
    margin: 0px;
}

/***************************************
identical walk
***************************************/
.virtual-walking-screenshot {
    border: 2px #bbb solid;
}

/***************************************
food data
***************************************/
.plate-container {
    
}

.plate-container img {
    width: 100%;
    display: block;
    margin: 20px auto;
}

.fd-description-center {
    margin-top:20px;
    margin-bottom:20px;
}
.crumb-description{
    font-weight: 400;
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.divider{
    width:50px;
    border-bottom:2px solid #333;
}



/*************
responsive
*************/

/*biggest screens*/
@media screen and (min-width: 1201px) {
    .desktop-hidden{
        display: none;
    }
}

/*Smaller screens*/
@media screen and (max-width: 1200px) {
    
    
    /*Projekt überschrift */
    #project-header h2{
        font-size:36px;
        font-weight:500;
        letter-spacing: 1px;
        margin-top:5px;
    }
    
    .thumbcaption h2{
        font-size: 16px;
    }
    
    .tags-work-page{
        
    }
    
    p {
        font-size: 18px;
        line-height: 1.7;
    }
    
    .desktop-hidden{
        display: none;
    }
}

/*Very Small Screens*/
@media screen and (max-width: 991px) {
    .my-margin-bottom {
        margin-bottom: 20px;
    }
    
    .thumbcaption h2{
        font-size: 16px;
    }
    
    .tags-work-page{
        
    }
    
    .desktop-hidden{
        display: none;
    }
}


/*Smartphones*/
@media screen and (max-width: 767px) {
    #about p{
        margin: 8px 0 8px 0;
    }
    
    .mobile-hidden{
        display: none;
    }
    
    .desktop-hidden{
        display:block;
    }
    
    
    .container {
        width:100%;
    }
    .my3-margin-bottom {
        margin-bottom: 20px;
    }
    
    .thumbnail{
        width:370px;
    }
    
    .thumbcaption{
        margin-bottom: 30px;
    }
    
    /*slideshow anpassen*/
    .rslides_tabs{
      left:-59px;
      text-align: left;
    }
   
    .rslides_tabs li {
      margin-right: 15px;
    }
    
    .rslides_tabs a {
      position: absolute;
      bottom: -50px;
      width: 20px;
      height: 3px;
      margin-top:10px;
      margin-bottom: 0px;
    }
    
    /* database average portraits - abstand der kleinen bilder */
    /*
    .avg-xs-left{
        padding-right: 5px;
        padding-left: 5px;
    }
    
    .avg-xs-mid{
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .avg-xs-right{
        padding-left: 5px;
        padding-right: 5px;
    }
    */
    
    .db_avg_small{
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .avg-row-xs {
        margin-bottom: 0px;
    }
    
    .avg-xs-top {
        margin-bottom: 0px;
    }
}