@charset "utf-8";


@media screen and (max-height: 50.000em) /*800px*/   
	{  
        /*INDEX*/
        #lead_container {margin: 0 auto 0;
                        }
        
        #lead   {height: 11.250em;
                }
        
        .lead_text  {padding-top: 2.000em;
                    }
        
        .arrow_down_big {display: none;
                        }
        
        .inner_header_wrap  {margin:-17.500em auto 0;
                        }
        
        
        .lead_text .title {font-size: 2.250em;
                            }
        
        .lead_text p    {font-size: 1.125em;
                        }
        
 

        
    }






@media screen and (max-height: 20.063em) /*321px*/  
    {   #main_img_container  {display: none;
                            }
    
        #lead   {margin:14em auto 0;
                            }
    }


@media screen and (max-width: 85.375em) /*1366px*/   
	{
        #main_img   {height: 110%;
                    } 
    }
        
@media screen and (max-width: 1024px) /*1025px*/   
	{
        /*INDEX*/
        #contact {
                    padding: 1em 2em 0 0;
                    width: 14.5em;
                }
        
        
        /*PROJECTS*/
        .lead_text  {padding-top: 2.000em;
                    }
        
        .lead_text .title {font-size: 2.250em;
                            }
        
        .lead_text p    {font-size: 1.125em;
                        }
        
        #project_desc   {margin: 2em 0 2em 0;
                        } 
        
        .desc_spacer {
                        height: 2.25em;
                        width: 100%;
                    }
        
        .desc_l,
        .desc_r {width:55%;
                margin:1.500em auto 0;
                text-align: center;
                }
        
        .text_r,
        .text_l {width:72%;
                margin: 0 0 3.563em 25%;
                }
        
        .img_half   {margin: 0 auto 0;
                    width: 100%;
                    }
        
        .half_container {width:62%;
                        margin-left:19%;
                        margin-right:19%;
                        }
        
         .img_title  {margin: 8% 0 0;
                    font-size: 0.938em;
                    } 
        
        .img_desc   {
                    font-size: 0.938em;
                    line-height: 1.538em;
                    text-align: left;
                    }
        
        #project_footer {background-color: rgba(19, 33, 51, 1);                     
                        }
        #project_background  {opacity: 0.1;
                            margin-top:-8.5em;
                                }
        

        #next .link_container  {padding-top: 8.5em;
                                    }
        
    }


@media screen and (max-width: 50.000em) /*800px*/
    {   #main_img  {background-position: 40% top;
                    background-size: auto 95%;
                    }
    
    }


@media screen and (max-width: 47.938em) /*767px*/   
	{
        
        /*INDEX*/
        .btn_w,
        .btn_w:after,
        .btn_r  {height:2.500em;
                width:2.500em;
                }
        
        #backtotop  {top: 4.250em;
                    }
        
        #btn_text   {display: none;
                    }
        
        #main_img   {height: 56em;
                    }

                
        .inner_header_wrap  {position: absolute;
                            margin:0;
                            top:0.625em;
                            }
        
        #lead_container  {margin:-17.500em auto 0;
                        }
        
        #contact    {padding: 0 1.250em 0 0;
                    }
        
        #mail   {margin:0;
                }
        
        .arrow_down_big {display: none;
                        }
        
 
        
        .preview    {width: 84%;
                    }

         .preview_title,
        #dynamic_preview_title  {font-size: 2.750em;
                                }

        #dynamic_preview_title  {margin: 18% 0 0;
                                }

        /*PROJECT*/
        
        #cancel  {right:0.250em;
                  top: 0.250em;
                    } 

        #backtotop  {right:0.250em;
                    }
        
        #imp_header #cancel {margin: 0;
                            }

        
        .link_container,
        .footer_container    {height: 3.750em;
                            }
        
        #project_footer {height: 14.5em;
                        }
        #project_background  {
                            margin-top:-5.5em;
                                }
        
        
        #next .title_container  {height: 2.1em;
                                }
        
        #next .link_container   { padding-top: 5.5em;
                                }
        
        
        #next .vertical_rect,
        #next:visited .vertical_rect    {height:2.7em;
                                        top:0;
                                        margin: 0 auto 0;
                                        }
       
        
        #next:active .vertical_rect_b,
        #next:focus .vertical_rect_b  {
                                        top: -1px;
                                    }


        #next .title_container p,
        #next:visited .title_container p, 
        #next:active .title_container p,
        #next:focus .title_container p {font-size: 1.3em;
                                            }

        #project_preview_title  {margin: 35% 0 0;
                                }
        
        #project_desc   {margin: 2em 0 2em 0;
                        }
        

        .desc_wrap  {width:80%;
                    text-align: center;
                    margin: auto;
                    }
        .text_wrap  {width:100%;
                    text-align: left;
                    }
        
        
        .desc_l,
        .desc_r {width:75%;
                margin:1.500em auto 0;
                }
        .normal,
        .animation  {width: 92%;
                    }
        
        .top_spacing  {padding-top: 4.688em;
                            width: 100%;
                            } 
        
        .img_half   {margin: 0 auto 0;
                    width: 100%;
                    }
        
        .half_container {width:76%;
                        margin-left:12%;
                        margin-right:12%;
                        }

        
        .text_r,
        .text_l {width:80%;
                margin: 0 auto 3.333em;
                color: #415168;
                }  
        
        
        .img_title  {margin: 3.692em 0 0 10%;
                    width:85%;
                    } 
        
        .img_desc   {margin: 0.857em  0 1.857em 10%;
                    width:80%;
                    text-align: left;
                    }
  
        
        #next_project   {margin: 4.688em auto 7.188em;
                        }
        
        /*FOOTER*/
        #index_footer {margin:5.688em auto 0;
                        height: 8.750em;
                        }
        
        
        #btn_behance svg, 
        #btn_vimeo svg, 
        #btn_xing svg     { -ms-transform: scale(1.1); 
                            -webkit-transform: scale(1.1);
                            transform: scale(1.1);
                            }
         
        #social     {width:13.88em;
                    margin:0 auto;
                    }

        #links  {height:auto;
                width:11.375em; 
                margin: 2.188em auto 0;
                }
        

        
        #logo_b     { opacity: 0.7;
                    margin: -0.4em 0 0;
                    -ms-transform: scale(0.74); 
                    -webkit-transform: scale(0.74);
                    transform: scale(0.74);
                    }
        
        #links p, 
        #links a    {color: #71777d;
                    }
        
        #links p    { margin-left: 0.7em;
                    }
        
        .inner_footer_wrap  {width:80%;
                            } 
        
        
        #btn_vimeo   {margin: 0 3.125em 0 0;
                    }
        
        #btn_xing   {margin: 0 3.250em 0 0;
                    }

        #btn_behance    {margin:0; 
                        }
        
        
        /*IMPRINT*/
        #imp_close  {position: absolute;
                    margin: 0;
                    top: 1em;
                    right: 1em;
                    }
        
        
        #imprint_header {margin: 2.500em auto 0;
                        }
        .imp_title  {margin: 3.778em 0 0;
                    }  
    } 
	 
 

@media screen and (max-width: 32.500em) /*520px*/   
	{
        /*INDEX*/
        .rsp_break  {display:block;
                    }
        
        .rsp_line   {display: none;
                    }
        
        #main_img   {background-position: 40% top;
                    background-size: auto 95%;
                    height:100%;
                    }
        #mail   {-webkit-transform:  scale(0.9);
                -moz-transform: scale(0.9);
                transform: scale(0.9);
                }
        #lead   {height: auto;
                }
        
        #lead_container  {margin: -15.500em auto 0;
                            }
        
        .lead_text  {padding-top:1.375em;
                    }
        
        .lead_text .title {font-size: 1.900em;
                            }
        
        .lead_text p    {font-size: 0.9em;
                        }
        
        .rsp_break  {display:none;
                    }
        
        .preview_title,
        #dynamic_preview_title  {font-size: 2.150em;
                                }

        #dynamic_preview_title  {margin: 16% 0 0;
                                }
        
        #project_preview_title  {font-size: 3.375em;
                                margin: 55% 0 0;
                                }
        
        .inner_wrap {width:100%;
                    margin: 0;
                    }
        
        
        /*IMPRINT*/
        #logo_imprint   {-ms-transform: scale(1.5); 
                        -webkit-transform: scale(1.5);
                        transform: scale(1.5);
                        }

    }


@media screen and (max-width: 25.000em) /*400px*/   
	{
        
        /*INDEX*/
        #main_img   {height:100%;
                    }
        
        #lead_container  {margin: -16.500em auto 0;
                            }

        .preview    {margin: 0 auto 3.000em;
                    width: 84%;
                    }
        
        .preview_title,
        #dynamic_preview_title  {font-size: 1.575em;
                                }

        #dynamic_preview_title  {margin: 16% 0 0;
                                }
      
        
        #project_preview_title  {font-size: 3.2em;
                                 
                                }
        
        .preview_subtitle,
        #dynamic_preview_subtitle, 
        #project_preview_subtitle  {font-size: 0.625em;
                                    margin: 1em 0 0 !important;
                                    } 
        
        /*PROJECTS*/
        .btn_r:after, 
        .btn_r:visited:after    {height: 2.813em;
                                width: 2.813em; 
                                }
        #cancel .btn_r:before   {margin: 1em 0 0 1em;
                                }
        
        #backtotop .btn_r:before    {margin: 1em 0 0 0.96em;
                                    }
        
        #cancel, 
        #backtotop     {height: 2.813em;
                        width: 2.813em;
                        }
        
        #backtotop  {
                     top: 3.500em;
                    }
        .top_spacing    {padding-top:2.813em;
                        }
        
        
        #project_desc   {font-size: 0.875em;
                        line-height: 1.500em;
                        }
        
        .desc_wrap  {width:100%;
                    }
        
        /*PAGE CONTROL*/
        #page_control   {top: 0; 
                        }
        
        #footer_container   {margin: 8.875em auto 0;
                            }

    }

@media screen and (max-width: 20.063em) /*321px*/   
	{

        /*INDEX*/
        .preview_title,
        #dynamic_preview_title  {font-size: 1.4em;
                                }

        #dynamic_preview_title  {margin: 17% 0 0;
                                }
        
       
        #project_preview_title  {font-size: 2.525em;
                                }
        
        .preview_subtitle,
        #dynamic_preview_subtitle, 
        #project_preview_subtitle  {font-size: 0.625em;
                                    margin: 0.5em 0 0 !important;
                                    }
    }