@charset "utf-8";
/* CSS Stylesheet | Franz Reel - Industrie Design */

body 
	{
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	line-height: 22px;
	margin: 0;
    height: 110%;
    position: relative;
    padding: 0px 15px;    
	}

/* ----------  Generelles ---------- */

#releaseclick
    {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
        z-index: -1;
    }

h1
    {
    font-size: 23px;
            margin: 0 0 30px 0;
    }

#container
	{
	/*width: 92%;*/
	margin: 0 auto;
	margin-top: 35px;
	width: 720px;
    
	}

.wrap-text
	{
	
	padding-right: 12%;
	}	

#container a
	{
	color: #cc071e;
	}

#header
	{
	width: 100%;	
	margin-bottom: 70px;
	}

#header img
	{
	height: 50px;
	}

/* ----------  Footer ---------- */

#footer
	{
	margin-top: 15px;
        margin-bottom: 35px;
	}

.links-footer
	{
	font-size: 13px;	
	line-height: 17px;
	float: left;
	}

.links-footer a
	{
	color: #bbbbbb !important;
	text-decoration: none;
	}	

.links-footer a:hover
	{
	color: #cc071e !important;
	text-decoration: none;
    }	
	

.awards-footer
	{
	width: 200px;
	float: right;
    }

.award1
	{
	float:right;
    background-image:url(award1hover.JPG);
	background-image:url(award1.JPG);
	background-size:cover;
	width: 105px;
	height: 51px;
	margin-right:15px;
        position: relative;
	}

.award1:hover > .annotation_box1
    {
    visibility: visible;
    }

.annotation_box1 {
	position: absolute;
	background: rgba(255,255,255,0.93);
	border: 1px solid #bbbbbb;
    color: #666666;
    font-size: 13px;
    line-height: 17px;
    top: -60px;
    left: -72px;
    padding: 2px 7px;
    width: 180px;
    text-align: center;
    visibility: hidden;
    }

.annotation_box1:after, .annotation_box1:before 
    {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    }

.annotation_box1:after 
    {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 10px;
	margin-left: -10px;
    }

.annotation_box1:before 
    {
	border-color: rgba(187, 187, 187, 0);
	border-top-color: #bbbbbb;
	border-width: 11px;
	margin-left: -11px;
    }

.award2:hover > .annotation_box2
    {
    visibility: visible;
    }

.annotation_box2 
    {
    position: absolute;
	background: rgba(255,255,255,0.93);
	border: 1px solid #bbbbbb;
    color: #666666;
    font-size: 13px;
    line-height: 17px;
    top: -60px;
    left: -83px;
    padding: 2px 7px;
    width: 180px;
    text-align: center;
    visibility: hidden;
    }

.annotation_box2:after, .annotation_box2:before 
    {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    }

.annotation_box2:after 
    {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 10px;
	margin-left: -10px;
    }

.annotation_box2:before 
    {
	border-color: rgba(187, 187, 187, 0);
	border-top-color: #bbbbbb;
	border-width: 11px;
	margin-left: -11px;
    }

.award3:hover > .annotation_box3
    {
    visibility: visible;
    }

.annotation_box3 
    {
    position: absolute;
	background: rgba(255,255,255,0.93);
	border: 1px solid #bbbbbb;
    color: #666666;
    font-size: 13px;
    line-height: 17px;
    top: -60px;
    left: -85px;
    padding: 2px 7px;
    width: 180px;
    text-align: center;
    visibility: hidden;
    }

.annotation_box3:after, .annotation_box3:before 
    {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    }

.annotation_box3:after 
    {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 10px;
	margin-left: -10px;
    }

.annotation_box3:before 
    {
	border-color: rgba(187, 187, 187, 0);
	border-top-color: #bbbbbb;
	border-width: 11px;
	margin-left: -11px;
    }


.award1:hover
	{
	background-image:url(award1hover.JPG);
	}
	
	
.award2
	{
	float:right;
    background-image:url(award2hover.JPG);
	background-image:url(award2.JPG);
	background-size:cover;
	width: 32px;
	height: 51px;
	margin-right:15px;
        position: relative;
	}
.award2:hover
	{
	background-image:url(award2hover.JPG);
	}
	
.award3
	{
	float:right;
        background-image:url(award2hover.JPG);
	background-image:url(award3.JPG);
	background-size:cover;
	width: 25px;
	height: 51px;
        position: relative;
	}
.award3:hover
	{
	background-image:url(award3hover.JPG);
	}


/* ----------  Portfolio ---------- */

.thumbnails-container
	{
	margin-top: 70px;
	height: 15%;
	position: relative;
	}
		
.thumbnails
	{
	width: 15%;
	border: 1px solid #bbbbbb;
	padding-bottom: 15%;	
	float: left;
	box-sizing: border-box;
	}

.thumbnails-annotation 
    {
    position: absolute;
	background: rgba(255,255,255,0.93);
	border: 1px solid #bbbbbb;
    color: #666666;
    font-size: 13px;
    line-height: 17px;
    top: 38px;
    left: -122px;
    padding: 8px 9px 8px 8px;
    width: 91px;
    height: 16px;
    text-align: left;
    opacity: 0;
    -webkit-animation: flyin 7s;
	animation: flyin 7s;
    }

    /* ----------  Animation Anmerkung ---------- */
    @keyframes flyin {
        0% {
            opacity: 0;
            left: -180px;
        }
        33% {
            opacity: 0;
            left: -180px;
        }
        40% {
            opacity: 1;
            left: -122px;
        }
        90% {
            opacity: 1;
            left: -122px;
        }
        100% {
             opacity: 0;
            left: -122px;
        }
    }

.thumbnails-annotation:after, .thumbnails-annotation:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.thumbnails-annotation:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #ffffff;
	border-width: 6px;
	margin-top: -6px;
}
.thumbnails-annotation:before {
	border-color: rgba(187, 187, 187, 0);
	border-left-color: #bbbbbb;
	border-width: 7px;
	margin-top: -7px;
}
	


.t1:hover ~ .t1-content, .spacer1:hover ~ .t1-content, .t1:focus ~ .t1-content, .spacer1:focus ~ .t1-content
	{	
	visibility: visible;
	}
.t2:hover ~ .t2-content, .spacer2:hover ~ .t2-content
	{	
	visibility: visible;
	}
.t3:hover ~ .t3-content, .spacer3:hover ~ .t3-content
	{	
	visibility: visible;
	}
.t4:hover ~ .t4-content, .spacer4:hover ~ .t4-content
	{	
	visibility: visible;
	}
.t5:hover ~ .t5-content, .spacer5:hover ~ .t5-content
	{	
	visibility: visible;
	}
.t6:hover ~ .t6-content, .spacer6:hover ~ .t6-content
	{	
	visibility: visible;
	}	

.t-content
	{
	width: 100%;
	padding-bottom: 58%;
	background: #ffffff;
	position: absolute;
	bottom: 182px;
	left: 0;
	font-size: 15px;
	line-height: 20px;
	}

.t-content-text-border
	{
	position: absolute;
	width: 100%;
	color: #000000;
	left: 0px;
	height: 36px;
	bottom: -43px;	
	text-align: left;
	background: #ffffff;
	padding-top: 7px;
	}
	
.t-content-text-borderless
	{
	position: absolute;
	width: 100%;
	color: #000000;
	left: 0px;
	bottom: -43px;	
	height: 36px;
	text-align: left;
	background: #ffffff;
	padding-top: 7px;
	}
	
.t1
	{
	background-image:url(thumbnail_1.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	}
		
.t1-content
	{
	visibility: hidden;
	
	background-image:url(t1-content.jpg);
	background-size: cover;
	}

.t2-content
	{
	visibility: hidden;
	background-image:url(t2-content.jpg);
	background-size: cover;
	}

.t2
	{
	background-image:url(thumbnail_2.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	}	

.t3
	{
	background-image:url(thumbnail_3.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	}	
	
.t3-content
	{
	visibility: hidden;
	background-image:url(t3-content.jpg);
	background-size: cover;
    }

.t4
	{
	background-image:url(thumbnail_4.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	}	

.t4-content
	{
	visibility: hidden;
	background-image:url(t4-content.jpg);
	background-size: cover;}	

.t5
	{
	background-image:url(thumbnail_5.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	}

.t5-content
	{
	visibility: hidden;
	background-image:url(t5-content.jpg);
	background-size: cover;
    }

.t6
	{
	background-image:url(thumbnail_6.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	float: right;
	}	

.t6-content
	{
	visibility: hidden;
	background-image:url(t6-content.jpg);
	background-size: cover;
    }	

.spacer1, .spacer2, .spacer3, .spacer4, .spacer5, .spacer6
    {
    width: 1%;
    float: left;
    padding-bottom: 15%;
    }

.thumbnails:hover
	{
	border: 1px solid #666666;
	}
	
.thumbnails.last
	{
	margin-right: 0;	
	}


/* Basic Media Queries */

@media screen and ( min-height: 950px ) and ( min-width: 800px; ) {

    #header
        {
        margin-bottom:120px;
        }

    .thumbnails-container
        {
            margin-top:120px;
        }

    .t-content
        {
        bottom: 232px;
        }
}