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


@media screen and (min-width: 1920px){
    
     main{
        
        height:5130px;
    }
    
    #design_problem{
        
        background-size:contain;
        background-repeat:repeat-x;
    }
    
    #tile{
        
        height:960px;
    }
    
    #tile_2{
        
        height:960px;
    }
    
    #tile_3{
        
        height:960px;
    }
    
    #tile_4{
        
        height:960px;
    }
    
    #tile_5{
        
        height:960px;
    }
    
    #tile_6{
        
        height:960px;
    } 
    
    #bottom{
        
        top:2900px;
    }
}

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

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







@media screen and (max-width: 1024px){
    
    main{
    
    width:100%;
    height:2000px;
    position:relative;
    margin:0px auto;
    background:#fcfcfc;
    overflow:auto;
    
}
    
    #logo{
        
        left:70px;
    }    
    
    #menu{
        
        right:70px;
    }
    
#title{
    
    width:300px;
    height:136px;
    top:150px;
    position:absolute;
    left:70px;

  
    
    
}    
    
  
    
    #problem_copy{

    width:716px;
    height:200px;
    position:relative;
    top:40px;
    left:70px;
    
}
    

    
    
#tile{
        
        height:512px;
    }
    
#tile_2{
        
        height:512px;
    } 
    
#tile_3{
        
        height:512px;
    } 
    
#tile_4{
        
        height:512px;
    } 
    
#tile_5{
        
        height:512px;
    } 
    
#tile_6{
        
        height:512px;
    }     
    
    
    
    
    
 p1{
    
    font-family: 'Merriweather', serif;
    line-height:60px;
    font-weight:900;
    font-size:40px;
    letter-spacing:1px;
    color:#fcfcfc;
} 
    
    
p5{
    
    font-family: 'Montserrat', sans-serif;
    font-weight:300;
    color:#fcfcfc;
    font-size:20px;
    line-height:36px;
}
    
  
    
    
#design_solution{
    
    width:716px;
    height:900px;
    left:70px;
    position:relative;
    top:100px;
    
    
}    
    
p6{
    
    font-family: 'Merriweather', serif;
    line-height:80px;
    font-weight:900;
    font-size:40px;
    letter-spacing:1px;
    color:#16161d;
} 
    
p7{
    
    font-family: 'Montserrat', sans-serif;
    font-weight:300;
    color:#16161d;
    font-size:20px;
    line-height:40px;

} 
    
    #bottom{
        
        top:1700px;
    }
    
        #info{
        
        left:70px;
    }
    
}

@media screen and (max-width:800px){
    
    main{
        
        height:7230px;
        overflow: hidden;
    }
    
    #logo{
        
        left:20px;
    }
    
    #menu{
        
        right:20px;
    }
    
    #problem_copy{
        
        left:42px;
    }

    
    #tile{
        
        width:100%;
        height:800px;
    }
    
    #tile_2{
        
        width:100%;
        height:800px;
    }
    
    #tile_3{
  
        width:100%;
        height:800px;
    }
    
    #tile_3{
        
        width:100%;
        height:800px;
    }
    
    #tile_4{
        
        width:100%;
        height:800px;
    }
    
    #tile_5{
        
        width:100%;
        height:800px;
    }
    
    #tile_6{
        
        width:100%;
        height:800px;
    } 
    
    
    #design_solution{
        
        left:42px;
    }
    
    #bottom{

        top:5000px;
    
    }
    
    #info{
        
        left:20px;
    }
    
    
}



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

    
    #title{
        
        left:42px;
    }
    
    #descript{
        
        background-attachment: scroll;
    }
    
    #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;
    }
    
    #tile_5{
        
        width:100%;
        height:768px;
    }
    
    #tile_6{
        
        width:100%;
        height:768px;
    }
    
#design_solution{
    
    left:42px;
    width:537px;

    }
    
    #bottom{
        
        top:5000px;
    }
    

    
    
}

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

    
    #title{
        
        left:30px;
        width:218.4px;
        height:102px;
    }  
    

    


    #design_problem{
        
        height:480px;
    }    
    
    
#problem_copy{
        
        top:100px;
        left:30px;
        width:400px;
    } 
    
    
    p1{
        
        font-size:32px;
    }
    
        p6{
        
        font-size:32px;
    }  
    
#tile{
        
        height:480px;
    }
    
#tile_2{
        
        height:480px;
    }
    
#tile_3{
        
        height:480px;
    }
    
#tile_4{
        
        height:480px;
    }
    
#tile_5{
        
        height:480px;
    }
    
#tile_6{
        
        height:480px;
    } 
    
    #design_solution{
        
        top:40px;
        left:30px;
        width:420px;
    
    
    } 
    
    p7{
        
        line-height:28px;
        font-size:20px;
    }
    
    #bottom{
        
        top:3000px;
    }    
}


@media screen and (max-width: 414px){
    
    main{
        
        height:5300px;
        
    }
    #design_problem{
        
        height:414px;
    }
    
    #problem_copy{
        
        width:350px;
        top:50px;
    }
    
    #design_solution{
        
        width:350px;
    }
    
#tile{
        
        height:414px;
    }
    
#tile_2{
        
        height:414px;
    }
    
#tile_3{
        
        height:414px;
    }
    
#tile_4{
        
        height:414px;
    }
    
#tile_5{
        
        height:414px;
    }
    
#tile_6{
        
        height:414px;
    } 
    
    #bottom{
        
        top:2932px;
    }
}

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



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

    
    #title{
        
        left:20px;
        width:187.2px;
        height:81.6px;
    }
    
    #design_problem{
        
        height:375px;
        width:375px;
    }
    
    #problem_copy{
        
        left:30px;
        width:315px;
        top:40px;
        height:300px;
        
    }
    
    p5{
        
        line-height:32px;
    }
    
    #tile{
        
        height:375px;
    }
    
    #tile_2{
        
        height:375px;
    }
    
    #tile_3{
        
        height:375px;
    }
    
    #tile_4{
        
        height:375px;
    } 
    
    #tile_5{
        
        height:375px;
    } 
    
    #tile_6{
        
        height:375px;
    }    
    
    
    #design_solution{

        left:20px;
        width:90%;
    
    }
    
    p7{
        
        font-size:18px;
    }
    
    

    
    #bottom{
        
        top:2570px;
    }
    
    
}

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

        height:4785px;
    }
    #title{
        
        left:25px;
    }
    
    
    #design_problem{
        
        height:360px;
    
    }
    
    #problem_copy{
        
        left:25px;
        top:30px;
    }
    
    #tile{
        
        height:360px;
    }
    
    #tile{
        
        height:360px;
    }
    
    #tile_2{
        
        height:360px;
    }
    
    #tile_3{
        
        height:360px;
    }
    
    #tile_4{
        
        height:360px;
    }
    
    #tile_5{
        
        height:360px;
    }
    
    #tile_6{
        
        height:360px;
    }
    
    
    
    #bottom{
        
        top:2470px;
    }
}