@charset "UTF-8";

@media screen and (min-width: 64.063em) /*1025px*/   
    {
        /*INDEX*/
        #contact:hover .btn_mail:before   {background-image: url(../img/assets/launch.svg);
                                        height: 28px;
                                        width:28px;
                                        margin: 0.875em 0 0 16px;
                                        border:none;    
                                        } 
        #contact:hover .btn_mail { border: 0.063em solid #e03445;  
                                background-color: #e03445;
                                    }
        

                
        #contact:hover .btn_mail:after {display:none;
                                    }
        
        
        #contact:hover  #speech {display:block;
                                }
        
        .preview:hover,
        .restore_toggle {border: 0.063em solid rgba(232, 53, 71, 1);
                            -ms-transform: scale(1.01); 
                            -webkit-transform: scale(1.01);
                            transform: scale(1.01);            
                }

        .preview:hover img,
        .restore_toggle     {opacity:0;
                            -ms-transform: scale(1.02); 
                            -webkit-transform: scale(1.02);
                            transform: scale(1.02);
                            }
    
        
        .preview:hover .preview_title{-webkit-animation: TransDynamicTitle 0.2s none;
                                    -moz-animation: TransDynamicTitle 0.2s none;
                                    animation: TransDynamicTitle 0.2s none; 
                                    } 
        
        .preview:hover .preview_subtitle   {-webkit-animation: TransDynamicSubtitle 0.2s none;
                                            -moz-animation: TransDynamicSubtitle 0.2s none;
                                            animation: TransDynamicSubtitle 0.2s none; 
                                            }
        
        
        /*PROJECTS*/ 
        
        #prev:hover .vertical_rect {height:0.875em;
                                    top: 14px;
                                    margin: 0 auto 0;
                                    }
        
        #prev:hover .vertical_rect_b    {opacity: 1;
                                        top: -13px;
                                        }
        
        #prev:hover .title_container    {top:18px;
                                        }
        
        #next:hover #project_footer {background-color: rgba(19, 33, 51, 1);
                                    }
        
        #next:hover #project_background {opacity: 0.1;
                                        }

        #next:hover .vertical_rect {height:0.875em;
                                    top:-16px;
                                    }
        
        #next:hover .title_container    {top:-8px;
                                         
                                        }

        #next:hover .vertical_rect_b    {opacity: 1;
                                        top: -4px;
                                        }
        
        .full_img_link:hover .full_size:before  {background-image: url(../img/assets/full_active.svg); 
                                                } 
        
        
        #cancel:hover   {-ms-transform: scale(1); 
                        -webkit-transform: scale(1);
                        transform: scale(1);
                        opacity:1;
                        }
        

        #cancel:hover .btn_r:after,
        #backtotop:hover .btn_r:after   {background-color: #132134;
                                        width:3.5em;
                                        height:3.5em;
                                        opacity:1;
                                        }
        
    
        
        /*FOOTER*/
        #footer a:hover     {color:#e03445;
                            }
        
        #btn_behance:hover svg path, 
        #btn_vimeo:hover svg path, 
        #btn_xing:hover svg path    {fill:#e03445;
                                    }
        
    }



/*BORDER-BOX*/
*, *:after, *:before {margin:0;
                      padding:0; 
                      -moz-box-sizing: border-box; 
                      -webkit-box-sizing: border-box; 
                      box-sizing: border-box;
                      border:none; 
                      }


/*FONTS*/



@font-face {
    font-family: 'loraitalic';
    src: url('../font/lora-italic-webfont.eot');
    src: url('../font/lora-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/lora-italic-webfont.woff2') format('woff2'),
         url('../font/lora-italic-webfont.woff') format('woff'),
         url('../font/lora-italic-webfont.ttf') format('truetype'),
         url('../font/lora-italic-webfont.svg#loraitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'lorabold_italic';
    src: url('../font/lora-bolditalic-webfont.eot');
    src: url('../font/lora-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/lora-bolditalic-webfont.woff') format('woff'),
         url('../font/lora-bolditalic-webfont.ttf') format('truetype'),
         url('../font/lora-bolditalic-webfont.svg#lorabold_italic') format('svg');
}

@font-face {
    font-family: 'montserratlight';
    src: url('../font/montserrat-light-webfont.eot');
    src: url('../font/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/montserrat-light-webfont.woff2') format('woff2'),
         url('../font/montserrat-light-webfont.woff') format('woff'),
         url('../font/montserrat-light-webfont.ttf') format('truetype'),
         url('../font/montserrat-light-webfont.svg#montserratlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'montserratbold';
    src: url('../font/montserrat-bold-webfont.eot');
    src: url('../font/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/montserrat-bold-webfont.woff2') format('woff2'),
         url('../font/montserrat-bold-webfont.woff') format('woff'),
         url('../font/montserrat-bold-webfont.ttf') format('truetype'),
         url('../font/montserrat-bold-webfont.svg#montserratbold') format('svg');
    font-weight: normal;
    font-style: normal;

}









@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'loraitalic';
    src: url('../font/lora-bolditalic-webfont.svg#loraitalic') format('svg');
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'lorabold_italic';
    src: url('../font/lora-bolditalic-webfont.svg#lorabold_italic') format('svg');
  }
}



@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'montserratlight';  
    src: url('../font/montserrat-light-webfont.svg#montserratlight') format('svg');
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'montserratbold';
    src: url('../font/montserrat-bold-webfont.svg#montserratbold') format('svg');
  }
}






@media screen and (-webkit-min-device-pixel-ratio:0) {
.btn_container i {line-height:1.313em !important;
                margin:1em 0 0 0.85em !important;
                }
}

html, body {height: 100%;
			padding:0px;
			margin:0px;
			background-color:#fafafa;  
			font-size:16px;
			font-family: 'montserratlight','Open Sans', sans-serif;
			font-style:normal;
            font-weight: normal;
			color:#132133;
            -webkit-font-smoothing: antialiased;
            -webkit-backface-visibility: hidden;
            -webkit-margin-before:0em;
            -webkit-margin-after:0em;
            } 


/*GLOBAL*/
.orange {
    color: #e03445; 
}

.fst_trans    {-webkit-transition: all 0.2s ease;
                -moz-transition: all 0.2s ease;
                -ms-transition: all 0.2s ease;
                -o-transition: all 0.2s ease;
                transition: all 0.2s ease;
                }

.slw_trans    {-webkit-transition: all 0.4s ease;
                -moz-transition: all 0.4s ease;
                -ms-transition: all 0.4s ease;
                -o-transition: all 0.4s ease;
                transition: all 0.4s ease;
                }
 

.small_scale    {-ms-transform: scale(0.8); 
                -webkit-transform: scale(0.8);
                transform: scale(0.8);
                opacity:0.75;
                }

a   {text-decoration: none !important;
     font-style: normal !important;
    }




#project_title  {color:#e03445;
                font-size: 1.250em;
                float:left;
                display: none;
                }



#preview_wrap,
#imprint_wrap   {text-align: center;
                margin: auto;
                max-width: 51.875em;
                max-height: auto;
               
                } 
.big_wrap   {margin:auto;
            max-width: 83.750em;
            max-height: auto;
            }

.inner_wrap     {width:88.06%;
                margin:auto;
                }

.inner_header_wrap  {width:100%; 
                    max-width: 100%;
                    margin: -21.875em auto 0;
                    position: relative;
                    z-index: 8;
                    } 

.inner_footer_wrap  {width:73.1%;
                    margin:auto;
                    }

.rsp_break  {display:none;
            }

.rsp_line   {display: block;
            }

#cancel {height: 3.438em;
        width: 3.438em;
        text-decoration: none !important;
        font-style: normal !important;
        position: fixed;
        right:1.25em;
        top: 1.25em;
        }

#backtotop  {position: fixed;
            right:1.250em;
            top: 5.50em;
            height: 3.438em;
            width: 3.438em;
            }

#imp_header #cancel {margin: 0.938em 0.938em 0 0;
                    }

#cancel .btn_r:before    {display:block;
                            content:"";
                            background-image: url(../img/assets/cancel.svg);
                            background-position: top;
                            height:0.875em;
                            width:0.875em;
                            margin: 1.313em 0 0 1.313em;
                            background-repeat: no-repeat;
                            position: absolute;
                            z-index: 2;
                            }


#backtotop .btn_r:before    {display:block;
                            content:"";
                            background-image: url(../img/assets/arrow_up.svg);
                            background-position: top;
                            height:0.875em;
                            width:0.875em;
                            margin: 1.313em 0 0 1.26em;
                            background-repeat: no-repeat;
                            position: absolute;
                            z-index: 2;
                            }



.btn_r,
.btn_r:visited  {cursor: pointer;
                text-align: center;
                height:3.438em;
                width:3.438em;
                }





.btn_r:after,
.btn_r:visited:after  {display:block;
                        content:"";
                        border-radius:50%; 
                        height:3.500em;
                        width:3.500em;
                        position: absolute;
                        z-index: 0;
                        opacity:0.8;
                        -webkit-transition: opacity 0.2s ease-in-out;
                        -moz-transition: opacity 0.2s ease-in-out;
                        -ms-transition: opacity 0.2s ease-in-out;
                        -o-transition: opacity 0.2s ease-in-out;
                        transition: opacity 0.2s ease-in-out;
                        background-color: #132133;
                        }

.btn_r:active:after  {-webkit-animation: fade_effect 1.8s;
                        -moz-animation: fade_effect 1.8s;
                        animation: fade_effect 1.8s;  
                       }

@-webkit-keyframes fade_effect {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
	}
	25%, 50% {
        -webkit-transform: scale3d(1.2, 1.2, 1);
	} 
	100% {
		-webkit-transform: scale3d(1, 1, 1);
        opacity: 0.8;
	}
}

@-moz-keyframes fade_effect {
	0% {
		transform: scale3d(1, 1, 1);
	} 
	25%, 50% {
        transform: scale3d(1.2, 1.2, 1);
	}
	100% { 
		transform: scale3d(1, 1, 1);
        opacity: 0.8;
	}
}

@keyframes fade_effect {
	0% {
		transform: scale3d(1, 1, 1);
	}
	25%, 50% {
        transform: scale3d(1.2, 1.2, 1);
	}
	100% {
		transform: scale3d(1, 1, 1);
        opacity: 0.8;
	}
}




.btn_mail,
.btn_mail:visited {border-radius:50%;
                border: 0.063em solid #e03445;  
                background-color: #e03445;
                height:3.750em;
                width:3.750em;
                cursor: pointer;
                }




/*INDEX*/
#intro  {position: relative;
        top:0px;
        overflow: hidden;
        -webkit-transform-origin: 50% 0%;
          -moz-transform-origin: 50% 0%;
           -ms-transform-origin: 50% 0%;
            -o-transform-origin: 50% 0%;
               transform-origin: 50% 0%;
        }

#para   {position: absolute;
        height: 100%;
        width: 100%;
        }

#main_img_container {height:100vh; 
                    width:100%;
                    overflow: hidden;
                    position: relative;
                    }

#main_img	{background-image: url(../img/assets/main_img.jpg);
            background-position: center -2em;
            height:100%;      
            background-repeat: no-repeat;
            background-size: cover;      
            }  

#main_overlay   {position: absolute;
                top:0;
                width:100%; 
                height: 100%;
                background-color: #1b1f23;
                opacity:0;
                }

#contact    { width: 14.9em;
            line-height: 1em;
            font-size: 1em;
            float:right;
            cursor: pointer;
            padding: 0.75em 2.2500em 0 0;
            position: relative;
            display: block;
            z-index: 1;
            }

.clear_float    { clear: both;
                  display: block;
                } 

#mail      {float:right; 
            opacity: 1;
            height: 3.125em;
            width: 3.125em;
            text-decoration: none !important;
            font-style: normal !important;
            background-color: rgba(254, 254, 254, 0);                      
            } 

#contact .btn_mail:before  {display:block;
                        content:"";
                        background-image: url(../img/assets/paperplane.svg);
                        background-position: top;
                        height:21px;
                        width:26px;
                        margin: 1.188em 0 0 15px;
                        background-repeat: no-repeat;
                        opacity: 1;
                        }  


#contact .btn_mail:active  {background-color: #e03445;       
                            }


#btn_text  {font-size: 1em;
            line-height: 1em;
            color:#fefefe;
            display: inline-block;
            overflow: hidden;
            letter-spacing: 0.0625em;
            margin:1.45em 1em 0 0;
            }

#btn_text span  {position: relative;
                display: inline-block;
                text-align: right;
                -webkit-transition: -webkit-transform 0.2s;
                -moz-transition: -moz-transform 0.2s;
                transition: transform 0.2s;
                letter-spacing: 0.045em;
                }


#speech {position: relative;
        top:-3.750em;
        left:-0.5em;
        display:none;
        z-index: -1;
            }

#contact #btn_text span::before    {position: absolute;
                                    top: 100%;
                                    content: attr(data-hover);
                                    -webkit-transform: translate3d(0,0,0);
                                    -moz-transform: translate3d(0,0,0);
                                    transform: translate3d(0,0,0);
                                    }

#contact:active .btn_mail:after {display:none;
                            }

#contact:hover #btn_text span,
#contact:focus #btn_text span   {-webkit-transform: translateY(-100%);
                                -moz-transform: translateY(-100%);
                                transform: translateY(-100%);
                                }


#contact:active  #speech {display:block;
                         }



#contact:active .btn_mail:before   {background-image: url(../img/assets/launch.svg);
                                        height: 28px;
                                        width:28px;
                                        margin: 0.875em 0 0 16px;
                                        border:none;   
                                }


#lead_container {position: relative;
                margin: 0 auto 3.438em;           
                }

#main_gradient   {height:6.250em;
                width:100%;


                }

#lead   {height: 18.750em; 
        width:100%;
        max-width: 100%;
        background-color: #fafafa;
        } 

.lead_text {
    text-align: center; 
    padding-top: 3.250em;
    margin-left: auto;
    margin-right: auto;
    max-width: 36.250em;
    width: 80%;
}

.lead_text .title {font-family: 'lorabold_italic';
                    font-size:2.688em;
                    margin-bottom: 0.222em;
                    }

.lead_text p    {font-size: 1.250em; 
                line-height:1.500em;  
                }


.arrow_down_big {margin-top: 2.438em; 
                width:0.813em;
                height:6.25em;
                }

#content    {height:auto;
            width:100%;
            }


#preview_content {position:relative;
                top:0;
                z-index: 8;
                padding: 4em 0 0 0;
                }

.preview {width:94.2%;
        max-height:23.875em;
        margin: 0 auto 15%; 
        position:relative;
        top:0;
        opacity: 1;
        overflow: hidden;
        cursor: pointer;
        order: 0.063em solid rgba(250, 250, 250, 1);
        }


.preview:before     {   content: "";
                        display: block;
                        padding-top: 48.42%; 
                    }

.preview img    {width:100%;
                max-height:30.000em;
                opacity 1;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                -ms-transform: scale(1); 
                -webkit-transform: scale(1);
                transform: scale(1);
                        }

.preview_text  {position:absolute;
                z-index: -1;
                width:100%;
                text-align: center;
                top:0;
                left:0;
                display:block;
                -ms-transform: scale(0.9); 
                -webkit-transform: scale(0.9);
                transform: scale(0.9);
                }

.preview_title, 
.preview_subtitle   {color:#e03445;
                    }


.preview_title, 
#dynamic_preview_title  {margin: 18.8% 0 0;  
                        font-size: 3.000em; 
                        font-family: 'montserratbold';
                        line-height: 1em;
                        text-decoration: none !Important;
                        opacity: 1;
                        letter-spacing: -0.013em;
                        } 

.preview_subtitle, 
#dynamic_preview_subtitle,
#project_preview_subtitle   {
                            margin: 1.00em 0 0 !important;
                            font-size: 0.875em;
                            text-decoration: none !Important;  
                            opacity: 1;
                            }




#project_preview_title  {margin: 25% 0 0; 
                        font-size: 4.625em; 
                        font-family: 'montserratbold';
                        line-height: 0.979em;
                        text-decoration: none !Important;
                        } 


#dynamic_lead   {z-index: 0;
                position: absolute;
                font-size: 1em;
                text-decoration: none !Important;
                text-align: center; 
                color:#e03445;
                }

 


.TransDynamicTitle {-webkit-animation: TransDynamicTitle 0.2s none;
                    -moz-animation: TransDynamicTitle 0.2s none;
                    animation: TransDynamicTitle 0.2s none; 
                    }

@-webkit-keyframes TransDynamicTitle {
    0%  {-webkit-transform: translateY(-34px); opacity: 0.2;
        }
    100%  {-webkit-transform: translateY(0); opacity: 1;
        }

}

@-moz-keyframes TransDynamicTitle {
    0%  {transform: translateY(-34px); opacity: 0.2;
        }
    100%  {transform: translateY(0px); opacity: 1;
        }
}

@keyframes TransDynamicTitle {
    0%  {opacity: 0; transform: translateY(-34px); 
        }
    100%  {opacity: 1; transform: translateY(0px); 
        }
}


.TransDynamicSubtitle {-webkit-animation: TransDynamicSubtitle 0.2s none;
                    -moz-animation: TransDynamicSubtitle 0.2s none;
                    animation: TransDynamicSubtitle 0.2s none; 
                    } 

@-webkit-keyframes TransDynamicSubtitle {
    0%  {-webkit-transform: translateY(34px); opacity: 0.2;
        }
    100%  {-webkit-transform: translateY(0); opacity: 1;
        }

}

@-moz-keyframes TransDynamicSubtitle {
    0%  {transform: translateY(34px); opacity: 0.2;
        }
    100%  {transform: translateY(0px); opacity: 1;
        }
}

@keyframes TransDynamicSubtitle {
    0%  {transform: translateY(34px); opacity: 0.2;
        }
    100%  {transform: translateY(0px); opacity: 1;
        }
}







.ScaleUpAndFadeIntro    {-webkit-animation: ScaleUpAndFadeIntro 0.5s forwards;
                    -moz-animation: ScaleUpAndFadeIntro 0.5s forwards;
                    animation: ScaleUpAndFadeIntro 0.5s forwards;
                    } 


@-webkit-keyframes ScaleUpAndFadeIntro {
    0%  {opacity: 1;
        }
    25%  {opacity: 1; top: 0px;
        }
    100%  {opacity: 0; top: -2000px;
        }

}

@-moz-keyframes ScaleUpAndFadeIntro {
    0%  {opacity: 1;
        }
    25%  {opacity: 1; top: 0px;
        }
    100%  {opacity: 0; top: -2000px;
        }
}


@keyframes ScaleUpAndFadeIntro {
    0%  {opacity: 1; 
        }
    25%  {opacity: 1; top: 0px;
        }
    100%  {opacity: 0; top: -2000px;
        }
}


.ScaleUpAndFade    {-webkit-animation: ScaleUpAndFade 0.5s forwards;
                    -moz-animation: ScaleUpAndFade 0.5s forwards;
                    animation: ScaleUpAndFade 0.5s forwards;
                    } 

@-webkit-keyframes ScaleUpAndFade {
    0%  {opacity: 1; top: 0px; -webkit-transform: scale(1);
        }
    20%  {opacity: 1; top: 0px; -webkit-transform: scale(0.98); 
        }
    100%  {opacity: 0; top: -150px; -webkit-transform: scale(2); 
        }

}

@-moz-keyframes ScaleUpAndFade {
    0%  {opacity: 1; transform: scale(1);
        }
    20%  {opacity: 1; transform: scale(0.98); top: 0px;
        }
    100%  {opacity: 0; transform: scale(2); top: -150px;
        }
}

@keyframes ScaleUpAndFade { 
    0%  {opacity: 1; transform: scale(1);
        }
    20%  {opacity: 1; transform: scale(0.98); top: 0px;
        }
    100%  {opacity: 0; transform: scale(2); top: -150px;
        }
}



.FadeAndScaleDown    {-webkit-animation: FadeAndScaleDown 0.7s forwards;
                -moz-animation: FadeAndScaleDown 0.7s forwards;
                animation: FadeAndScaleDown 0.7s forwards;
                } 

@-webkit-keyframes FadeAndScaleDown {
    0%  {opacity: 0; top: 150px; -webkit-transform: scale(2);
        }
    100%  {opacity: 1; top: 0px; -webkit-transform: scale(1); 
        }

}

@-moz-keyframes FadeAndScaleDown {
    0%  {opacity: 0; transform: scale(2); top: 150px;
        }
    100%  {opacity: 1; transform: scale(1); top: 0px;
        }
}

@keyframes FadeAndScaleDown {
    0%  {opacity: 0; transform: scale(2); top: 150px;
        }
    100%  {opacity: 1; transform: scale(1); top: 0px;
        }
}


/*PROJECT*/
#project_lead   {height:auto;
                text-align:center;
                }       

#project_desc   {text-align: left;
                position:relative;
                margin: 7.188em 0 0;
                }

#project_preview_subtitle   {color: #6f7e92;
                            }

.desc_l, 
.desc_r,
.text_r,
.text_l,
.imp_desc   {font-family: 'montserratlight';
            font-size: 0.875em;
            letter-spacing: -0.01em;
            line-height: 1.533em;
            color: #6f7e92; 
            } 

.desc_wrap  {width:95%;
            }

.text_wrap  {width: 78%;
            }

.desc_l,
.text_l {width:65.7%;
        margin: 0 0 3.563em 34.7%;
        } 

.text_l {width:55%;
        }

.desc_r {width:65.7%; 
        margin: 0 0 3.563em 1.250em;
        }

.desc_spacer  {height: 6.250em;
                width: 100%;
                }

.relative_pos   {position: relative;
                opacity: 0;
                } 

.text_r {margin: 0 0 0 20.81%;
        width: 55%;
        }


.vertical_divide    {width: 2.04%;
                    height:0.001em;
                    float:left;
                   }

.top_spacing   {width: 100%;
                display: block;
                padding-top: 7.188em;
                }

.normal {width: 83.05%;
        display: block;
        margin: 0 auto;
        }


.animation  {width: 50.85%;
            display: block;
            margin: 0 auto;
            }

.video  {position: relative;
        padding-bottom: 53.6%;
        padding-top: 35px;
        height: 0;
        overflow: hidden;
        }

.video iframe   {position: absolute;
                top:0;
                left: 0;
                width: 100%;
                height: 100%;
                }

.img_normal,
.img_full   {display: block;
            margin: 0 auto 0; 
            width: 100%;
            }

.img_half   {width: 86.5%;
            margin: 0 0 4.688em 0;
            }
.img_left   {float: right;
            }

.img_title  {margin: 75.25% 0 0 0;
            font-size: 1.200em;
            font-family: 'montserratbold';
            color: #132133;
            letter-spacing: 0.003em;
            }

.img_desc   {margin: 1.333em 0 0 0;
            }





.triangle      {float:right;
                position:relative;
                margin: -3.86em 0 0 0;
                opacity: 1;
                height: 0;
                width: 0;
                border-bottom: 5.000em solid rgba(254, 254, 254, 1);  
                border-left: 5.000em solid transparent;                  
                } 

.full_size  {height: 1.625em;
            width: 2.125em; 
            position: relative;
            margin: -2.188em 0 0 0 ;
            float:right;
            }

.full_size:before    {display:block;
                    content:"";
                    position: relative;
                    background-image: url(../img/assets/full_normal.svg);
                    background-position: bottom right;
                    height: 1.625em;
                    width: 2.125em;    
                    margin: 0 0 0.375em -0.063em;
                    background-repeat: no-repeat;
                    opacity: 1;
                    z-index: 3;
                    }  


.full_img_link:active .full_size:before {background-image: url(../img/assets/full_active.svg); 
                                        } 




.ScaleAndMoveUp   {-webkit-animation: ScaleAndMoveUp 0.4s forwards;
                -moz-animation: ScaleAndMoveUp 0.4s forwards;
                animation: ScaleAndMoveUp 0.4s forwards;
                }

@-webkit-keyframes ScaleAndMoveUp {
    0%  {opacity: 0.3; -webkit-transform: scale(0.99); top: 5px;
        }
    100%  {opacity: 1; -webkit-transform: scale(1); top: -5px;
         } 

}

@-moz-keyframes ScaleAndMoveUp {
    0%  {opacity: 0.3; transform: scale(0.99); top: 5px;
        }
    100%  {opacity: 1; transform: scale(1); top: -5px;
        }
}


@keyframes ScaleAndMoveUp {
    0%  {opacity: 0.3; transform: scale(0.99); top: 5px;
        }
    100%  {opacity: 1; transform: scale(1); top: -5px;
        }
}


.LoadNext   {-webkit-animation: LoadNext 0.9s forwards;
            -moz-animation: LoadNext 0.9s forwards;
            animation: LoadNext 0.9s forwards;
            }  


@-webkit-keyframes LoadNext {
    0%  {opacity: 1; -webkit-transform: scale(1);
        }
    25%  {opacity: 1; -webkit-transform: scale(0.9); top: 0px;
        }
    100%  {opacity: 0; -webkit-transform: scale(0.9); top: -2000px;
        }

}

@-moz-keyframes LoadNext {
    0%  {opacity: 1; transform: scale(1);
        }
    25%  {opacity: 1; transform: scale(0.9); top: 0px;
        }
    100%  {opacity: 0; transform: scale(0.9); top: -2000px;
        }
}


@keyframes LoadNext {
    0%  {opacity: 1; transform: scale(1);
        }
    25%  {opacity: 1; transform: scale(0.9); top: 0px;
        }
    100%  {opacity: 0; transform: scale(0.9); top: -2000px;
        }
}



.LoadNextPart2   {-webkit-animation: LoadNextPart2 0.2s forwards;
            -moz-animation: LoadNextPart2 0.2s forwards;
            animation: LoadNextPart2 0.2s forwards;
            }  


@-webkit-keyframes LoadNextPart2 {
    0%  {opacity: 0; top: 400px;
        }
    100%  {opacity: 1; top: 0px;
        }

}

@-moz-keyframes LoadNextPart2 {
    0%  {opacity: 0; top: 400px;
        }
    100%  {opacity: 1; top: 0px;
        }
}


@keyframes LoadNextPart2 {
    0%  {opacity: 0; top: 400px;
        }
    100%  {opacity: 1; top: 0px;
        }
}



.LoadPrev   {-webkit-animation: LoadPrev 0.6s forwards;
            -moz-animation: LoadPrev 0.6s forwards;
            animation: LoadPrev 0.6s forwards;
            }  


@-webkit-keyframes LoadPrev {
    0%  {opacity: 1; -webkit-transform: scale(1);
        }
    25%  {opacity: 1; -webkit-transform: scale(0.9); top: 0px;
        }
    100%  {opacity: 0; -webkit-transform: scale(0.9); top: 2000px;
        }

}

@-moz-keyframes LoadPrev {
    0%  {opacity: 1; transform: scale(1);
        }
    25%  {opacity: 1; transform: scale(0.9); top: 0px;
        }
    100%  {opacity: 0; transform: scale(0.9); top: 2000px;
        }
}


@keyframes LoadPrev {
    0%  {opacity: 1; transform: scale(1);
        }
    25%  {opacity: 1; transform: scale(0.9); top: 0px;
        }
    100%  {opacity: 0; transform: scale(0.9); top: 2000px;
        }
}

.LoadPrevPart2   {-webkit-animation: LoadPrevPart2 0.2s forwards;
            -moz-animation: LoadPrevPart2 0.2s forwards;
            animation: LoadPrevPart2 0.2s forwards;
            }  


@-webkit-keyframes LoadPrevPart2 {
    0%  {opacity: 0; top: -400px;
        }
    100%  {opacity: 1; top: 0px;
        }

}

@-moz-keyframes LoadPrevPart2 {
    0%  {opacity: 0; top: -400px;
        }
    100%  {opacity: 1; top: 0px;
        }
}


@keyframes LoadPrevPart2 {
    0%  {opacity: 0; top: -400px;
        }
    100%  {opacity: 1; top: 0px;
        }
}




.ScaleDownAndFade   {-webkit-animation: ScaleDownAndFade 0.5s forwards;
            -moz-animation: ScaleDownAndFade 0.5s forwards;
            animation: ScaleDownAndFade 0.5s forwards;
            }  


@-webkit-keyframes ScaleDownAndFade {
    0%  {opacity: 1; -webkit-transform: scale(1);
        }
    20%  {opacity: 1; -webkit-transform: scale(1.01); 
        }
    100%  {opacity: 0; -webkit-transform: scale(0.7);
        }

}

@-moz-keyframes ScaleDownAndFade {
    0%  {opacity: 1; transform: scale(1);
        }
    20%  {opacity: 1; transform: scale(1.01); 
        }
    100%  {opacity: 0; transform: scale(0.7);
        }
}


@keyframes ScaleDownAndFade {
    0%  {opacity: 1; transform: scale(1);
        }
    20%  {opacity: 1; transform: scale(1.01); 
        }
    100%  {opacity: 0; transform: scale(0.7); 
        }
}



/*PAGE CONTROL*/ 
#index_project_header,
#project_header  {position:absolute;
                top:0;
                left:50%;
                width:12.500em;
                margin:0 0 0 -6.250em;
                background-color: none;
                z-index:5;    
                height: 6.250em;
                }


#footer_container, 
#project_footer {position: relative;
                width: 100%;
                margin: 12.875em auto 0;
                height: auto;
                }

 
#project_footer {
                height: 20.500em;
                margin: 0;
                background-color: rgba(19, 33, 51, 0);
                }

#project_background {background-position: top center;
                    background-size: cover;
                    width: 100%;
                    height: 100%;
                    margin-top: -9.5em;
                    opacity: 0;
                    }


#index_project_header,
#footer_container   {display:block;
                        }
#footer_wrap    {display:none;
                }
#prev,
#next   {width:100%;
         text-decoration: none; 
        cursor: pointer;
        display: block;
        }


.link_container {width:11.250em;
                padding-top: 9.5em;
                display: block;
                height:6.250em;
                text-align: center;
                margin: 0 0 0 -5.625em;
                position: relative;
                left: 50%;
                }

#prev .vertical_rect  {width:0.063em;
                height:1.625em;
                background-color: #e03445;
                position: relative;
                top: 0;
                margin: 0 auto 0.625em;
                }

#prev .vertical_rect_b {width:0.063em;
                        height:14px;
                        background-color: #e03445;
                        position: relative;
                        top: 0;
                        opacity: 0;
                        margin: 0 auto 0.625em;
                        }

#next .vertical_rect_b {width:0.063em;
                        height:14px;
                        background-color: #e03445;
                        position: relative;
                        top: -12px;
                        opacity: 0;
                        margin: 0 auto 0.625em;
                        }

#prev .title_container,
#prev:visited .title_container  {width:7.500em;
                                height:3.750em; 
                                margin:0 auto 0;
                                position: relative;
                                top:0;
                                }
 
#next .title_container,
#next:visited .title_container  {width:10em;
                                height:2.9em;
                                margin:auto; 
                                position:relative;
                                top: 0;
                                }


#prev .title_container p,
#prev:visited .title_container p,
#next .title_container p,
#next:visited .title_container p    {font-size: 1em;
                                    line-height: 1.231em;
                                    color: #e03445;
                                    font-weight: normal;
                                    text-decoration: none;
                                    -webkit-transition: all 0.2s ease;
                                    -moz-transition: all 0.2s ease;
                                    -ms-transition: all 0.2s ease;
                                    -o-transition: all 0.2s ease;
                                    transition: all 0.2s ease;
                                    }


#next .title_container p,
#next:visited .title_container p    {font-size: 1.6em;
                                    }

#next .vertical_rect  {width:0.063em;
                height:2.500em;
                background-color: #e03445;
                position: relative;
                top: 0px;
                margin: 0 auto;
                }




#scroll_header  {position:fixed;
                top:0;
                left:0;
                width:100%;                
                display: none;
                z-index:2;    
                height: 5.000em;
}

#scroll_overlay {background-color: rgba(251, 251, 251, 0.95);
                width: 100%;
                height: 5.000em;
                position: absolute;
                top: 0;
                left:0;
                display: none;
                z-index: -5;
                }
 
#fading_header  {height: 6.25em;
            width:  9.375em;
            
            }


 h2,
 h2:visited   {font-size: 0.938em;
                        font-style: none;
                        font-weight: normal; 
                        padding: 2.000em 0 0 2.667em;
                        color: #e03445;
                        cursor: pointer;
                        }

 h2:hover,
 h2:active    {color: #e03445;
                        }


@-webkit-keyframes BottomToTop {
	0% {-webkit-transform: translateY(-0%);
    }
    49% {
		-webkit-transform: translateY(-200%);
	}
	50% {
        opacity: 0;
		-webkit-transform: translateY(200%);
	}
	51% {
		opacity: 1;
	}
    100% {opacity: 1;
    }
}
@-moz-keyframes BottomToTop {
	49% {
		-moz-transform: translateY(-200%);
	}
	50% {
		opacity: 0;
		-moz-transform: translateY(200%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes BottomToTop {
	49% {
		transform: translateY(-200%);
	}
	50% {
		opacity: 0;
		transform: translateY(200%);
	}
	51% {
		opacity: 1;
	}
}


@-webkit-keyframes TopToBottom {
	0% {-webkit-transform: translateY(0%);
    }
    49% {
		-webkit-transform: translateY(200%);
	}
	50% {
        opacity: 0;
		-webkit-transform: translateY(-200%);
	}
	51% {
		opacity: 1;
	}
    100% {opacity: 1;
    }
}
@-moz-keyframes TopToBottom {
	49% {
		-moz-transform: translateY(200%);
	}
	50% {
		opacity: 0;
		-moz-transform: translateY(-200%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes TopToBottom {
	49% {
		transform: translateY(200%);
	}
	50% {
		opacity: 0;
		transform: translateY(-200%);
	}
	51% {
		opacity: 1;
	}
}


@-webkit-keyframes CenterPopUp {
	0% {-webkit-transform: scale(1);
    }
    49% {
		-webkit-transform: scale(1.4);
	}
	50% {
        opacity: 0;
		-webkit-transform: scale(0.2);
	}
    100% {opacity: 1;
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes CenterPopUp {
	49% {
		-moz-transform: scale(1.4);
	}
	50% {
		opacity: 0;
		-moz-transform: scale(0.2);
	}
	100% {
		opacity: 1;
        -moz-transform: scale(1);
	}
}
@keyframes CenterPopUp {
	49% {
        transform: scale(1.4);
	}
	50% {
		opacity: 0;
		transform: scale(0.2);
	}
	100% {
		opacity: 1;
        transform: scale(1);
	}
}


.FadeAndFall {-webkit-animation: FadeAndFall 0.2s forwards;
            -moz-animation: FadeAndFall 0.2s forwards;
            animation: FadeAndFall 0.2s forwards;
            }

@-webkit-keyframes FadeAndFall {
    0%  { opacity: 0.3; -webkit-transform: scale(1.2); 
        }
    20%  { opacity: 1; 
        }
    100%  { opacity: 1; -webkit-transform: scale(1);
         } 
}

@-moz-keyframes FadeAndFall {
    0%  { opacity: 0.3; transform: scale(1.2); 
        }
    20%  { opacity: 1;  
        }
    100%  { opacity: 1; transform: scale(1);
         }
}

@keyframes FadeAndFall {
    0%  { opacity: 0.3; transform: scale(1.2); 
        }
    20%  { opacity: 1;  
        }
    100%  { opacity: 1; transform: scale(1);
         }
}


.FadeAndRise {-webkit-animation: FadeAndRise 1.3s forwards;
            -moz-animation: FadeAndRise 1.3s forwards;
            animation: FadeAndRise 1.3s forwards;
            }

@-webkit-keyframes FadeAndRise {
    0%  { opacity: 1;  -webkit-transform: translate (0px,0px);
                     
        }
    80%  { opacity: 0.3; -webkit-transform: translate (0px,10px);
        }
    100%  { opacity: 0; -webkit-transform: translate (0px,-100px);
         } 
}

@-moz-keyframes FadeAndRise {
    0%  { opacity: 1; -moz-transform: translateY(0%);
        }
    80%  { opacity: 0.3;  -moz-transform: translateY(2%);
        }
    100%  { opacity: 0; -moz-transform: translateY(-50%);
         }
}

@keyframes FadeAndRise {
    0%  { opacity: 1; transform: translate (0px,0px);
        }
    80%  { opacity: 0.3;  transform: translate (0px,10px);
        }
    100%  { opacity: 0; transform: translate (0px,-100px);
         }
}


/*FOOTER*/
#index_footer   {position: relative;
                width: 100%;
                margin: 16.625em auto 0;
                height: auto;
                }

#index_footer a {  color:#132133;
            text-decoration:none;
            text-align:center;
            font-weight: 100;
            }

#index_footer a:active   {color:#e03445;
                    }




.imprint    {float:left;
            font-size: 0.688em;
            }

.inner_footer_wrap {height:5.813em;
                    }

 
.btn_social {float:right;
            height:2.500em;
            width: 2.500em;
            margin-top: -0.750em;
            
            }

#btn_vimeo  {margin: -0.750em 2.750em 0 0;
            }

#btn_xing   {margin: -0.750em 2.438em 0 0;
            }



#btn_behance svg, 
#btn_vimeo svg, 
#btn_xing svg       {display:block;
                    margin: 0.75em auto;
                    }



#btn_behance:active svg path, 
#btn_vimeo:active svg path, 
#btn_xing:active svg path    {fill:#e03445;
                            }

#links  {margin: 0 auto 0.750em;
        }

#links p    {color:#132133;
            font-size:0.688em;
            margin-left:1em;
            float: left; 
            font-family: 'montserratlight';
            }

#logo_b     {margin-top: -0.500em;
            float: left; 
            }


/*IMPRINT*/

#imp_header  {
            width: 100%;
            height: 5em;
 
            }

#imprint_wrap {margin: 0 auto 0;
                }

#bottom_spacer  {height: 10em;
                width: 100%;
                }

#imprint_header {margin: 8.000em auto 0;
                }



#logo_imprint   {margin:0 0 10px -7px;
                -ms-transform: scale(1.75); 
                -webkit-transform: scale(1.75);
                transform: scale(1.75);
                }

.imp_title   {margin: 3.778em 0 0 0;
            font-size: 1.125em; 
            font-family: 'montserratbold';
            color: #132133;
            }

.imp_desc   {margin: 1.133em auto 0;
            width:74.6%;
            }

.end {font-size:0.813em;
    margin: 2.833em auto 0;
    color: #132133;
    }