@charset "UTF-8";
/* CSS Document */

@media screen and (min-width: 1920px){
    
    main{
        
        height:1700px;
        overflow:hidden;
    }
    
    #bottom{
        
        top:-600px;
    }
}

@media screen and (max-width: 1366px){
    
    #tile{
        
        height:683px;
    }
    
    #tile_2{
        
        height:683px;
    }
    
    #tile_3{
        
        height:683px;
    }
    
    #tile_4{
        
        height:683px;
    }
    

}

@media screen and (max-width: 1280px){
    
    #tile{
        
        height:640px;
    }
    
    #tile_2{
        
        height:640px;
    }
    
    #tile_3{
        
        height:640px;
    }
    
    #tile_4{
        
        height:640px;
    }
    

}







@media screen and (max-width: 1024px){
    
    main{
    
height:2055px;
    
}
    
   
    

    
#title{
    
    width:300px;
    height:136px;
    position:absolute;
    left:45px;


  
    
    
}    
    
    #descript{
        
    width: 100%;
    height:685px;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    }   
    
   #design_problem{
    
    width:1440px;
    height:1500px;
    position:relative;
    top:0px;

    
    
} 

    #problem_copy{

    width:716px;
    height:1550px;
    position:relative;
    top:100px;
    left:70px;
    
}
    

    
    
#tile{
        
        height:512px;
    }
    
#tile_2{
        
        height:512px;
    } 
    
#tile_3{
        
        height:512px;
    } 
    
#tile_4{
        
        height:512px;
    } 
    

    
    
    
    
    
  
    
    
#design_solution{
    
    width:716px;
    height:900px;
    left:70px;
    position:relative;
    top:100px;
    
    
}    
    

    
    #bottom{
        
        top:-500px;
    }
    
        #info{
        
        left:70px;
    }
    
}


@media screen and (max-width:800px){
    
      main{
        
        height:7550px;
        overflow:hidden;
    }
    
    #logo{
        
        left:20px;
    }
    
    #menu{
        
        right:20px;
    }
    
    #title{
        
        left:20px;
    }
    
    #descript{
        
    width: 100%;
    height:685px;
    background: url("img/IMG_0755%20copy%202_.jpg");
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    } 
    
    #design_problem{
        
        height:1800px;
    }   
    
    #problem_copy{
        
        top:30px;
        left:42px;
        width:537px;
    }
    
    #tile{
        
        width:100%;
        height:768px;
    }
    
    #tile_2{
        
        width:100%;
        height:768px;
    }
    
    #tile_3{
  
        width:100%;
        height:768px;
    }
    
    #tile_3{
        
        width:100%;
        height:768px;
    }
    
    #tile_4{
        
        width:100%;
        height:768px;
    }
    

    
#design_solution{
    
    left:42px;
    width:537px;

    }
    
    p1{
        
        font-size:40px;
    }
    
    p9{
        
        font-size:40px;
    }
    
    #bottom{
        
        top:3800px;
    }
    
    #info{
        
        left:42px;
    }  
    
    
}

@media screen and (max-width: 768px){
    
    main{
        
        height:2150px;
        overflow:hidden;
    }
    
    #logo{
        
        left:20px;
    }
    
    #menu{
        
        right:20px;
    }
    
    #title{
        
        left:20px;
    }
    
    #descript{
        
    width: 100%;
    height:685px;
    background: url("img/IMG_0755%20copy%202_.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    } 
    
    #design_problem{
        
        height:1800px;
    }   
    
    #problem_copy{
        
        top:30px;
        left:42px;
        width:537px;
    }
    
    #tile{
        
        width:100%;
        height:768px;
    }
    
    #tile_2{
        
        width:100%;
        height:768px;
    }
    
    #tile_3{
  
        width:100%;
        height:768px;
    }
    
    #tile_3{
        
        width:100%;
        height:768px;
    }
    
    #tile_4{
        
        width:100%;
        height:768px;
    }
    

    
#design_solution{
    
    left:42px;
    width:537px;

    }
    
    p1{
        
        font-size:40px;
    }
    
    p9{
        
        font-size:40px;
    }
    
    #bottom{
        
        top:-700px;
    }
    
    #info{
        
        left:42px;
    }
    
    
}

@media screen and (max-width: 480px){
    
    main{
        
        height:2370px;
        overflow:hidden;
    }
    

    #title{
        
        left:10px;
        width:225px;
        height:102px;
    }  
    
 
    
    #descript{
    height:600px;
    background: url("img/IMG_0755%20copy%202_.jpg");
    background-size: cover;
    background-attachment: scroll;
    background-position:  center center;
    background-repeat: no-repeat;
    } 

    #design_problem{
        
        top:50px;
        height:2500px;
        width:96%;
    }    
    
    
#problem_copy{
        
        top:50px;
        left:30px;
    width:90%;
    } 
    
    
    p1{
        
        font-size:28px;
    }
    
        p6{
        
        font-size:32px;
    } 
    

    
#tile{
        
        height:480px;
    }
    
#tile_2{
        
        height:480px;
    }
    
#tile_3{
        
        height:480px;
    }
    
#tile_4{
        
        height:480px;
    }
    

    
    #design_solution{
        
        top:40px;
        left:30px;
        width:420px;
    
    
    } 
    
    p7{
        
        line-height:32px;
        font-size:24px;
    }
    
    p9{

        font-size: 28px;
    
    }
    

 

    

    
    #bottom{
        
        top:-1100px;
    } 
    
    #info{
        
        left:20px;
    }
}


@media screen and (max-width: 414px){
    
    main{
        
        height:1870px;
        
    }
    #design_problem{
        
        height:1800px;
        width:96%;
    }
    
    #problem_copy{
        
        left:20px;
        width:90%;
        top:50px;
    }
    
    #design_solution{
        
        width:350px;
        height:1500px;
        left:20px;
    }
    
    #tile{
        
        height:414px;
    }
    
    #tile_2{
        
        height:414px;
    }
    
    #tile_3{
        
        height:414px;
    }
    
    #tile_4{
        
        height:414px;
    }

    p1{
        
        font-size: 24px;
    } 
    
    p5{
        font-size: 14px;
        line-height: 20px;
    }
 
   
    
p9{
        
        font-size:20px;
    }
    

    #bottom{
        
        top:-900px;
    }
}

@media screen and (max-width: 375px){
    
    
    main{
        
        height:1970px;
        overflow:hidden;
    }
    
  
    #title{
        
        left:20px;
        width:180px;
        height:81.6px;
    }
    
 
    
    #design_problem{
        
        height:2000px;
        width:375px;
    }
    
    #problem_copy{
        
        left:20px;
        width:315px;
        top:-10px;
        height:300px;
        
    }
    
    p1{
        
        font-size: 20px;
    }
    p5{
        
        line-height:20px;
    }
    
    p9{
        
        font-size:20px;
    }
    

    
    #tile{
        
        height:375px;
    }
    
    #tile_2{
        
        height:375px;
    }
    
    #tile_3{
        
        height:375px;
    }
    
    #tile_4{
        
        height:375px;
    } 
    
  
    
    
    #design_solution{

        left:20px;
        width:90%;
    
    }
    
    p7{
        
        font-size:24px;
    }
    
    
    #info{
        
        left:24px;
        width:330px;
    }
    
    #bottom{
        
        top:-1000px;
    }
    
    
}

@media screen and (max-width: 360px){
    
    main{

        height:1970px;
    }
    #title{
        
        left:10px;
    }
    
    
    #design_problem{
        
        height:2000px;
    
    }
    
    #problem_copy{
        

        top:30px;
    }
    
    #tile{
        
        height:360px;
    }
    
    #tile{
        
        height:360px;
    }
    
    #tile_2{
        
        height:360px;
    }
    
    #tile_3{
        
        height:360px;
    }
    
    #tile_4{
        
        height:360px;
    }
    

    
    
    #bottom{
        
        top:-1000px;
    }
}