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

@media screen and (min-width: 1920px){
    
    
    #tile{
        
        height:300px;
        top:100px;
    }
    
    #tile_2{
        
        height:300px;
        top:200px;
    }
    
    #tile_3{
        
        height:300px;
        top:300px;
    }
    
    #tile_4{
        
        height:300px;
        top:400px;
    }
    
    #tile_5{
        
        height:300px;
        top:500px;
    }
    
    #tile_6{
        
        height:300px;
        top:300px;
    }
    
    #tile_7{
        
        top:300px;
        width:58%;
    }
}


@media screen and (min-width: 1680px){
    
        main{
        
        height:8624px;
    }
    
        #tile{
        
        height:742px;
    }
    
    #tile_2{
        
        height:742px;
    }
    
    #tile_3{
        
        height:742px;
    }
    
    #tile_4{
        
        height:742px;
    }
    
    #tile_5{
        
        height:742px;
    }
    
    #tile_6{
        
        height:742px;
    } 
    
    #tile_7{
        
        height:2958px;
    }
    
    #bottom{
        
        top:234px;
    }
    
}

@media screen and (max-width: 1366px){
    
    main{
        
        height:8050px;
    }
    #tile{
        
        height:635px;
    }
    
    #tile_2{
        
        height:635px;
    }
    
    #tile_3{
        
        height:635px;
    }
    
    #tile_4{
        
        height:635px;
    }
    
    #tile_5{
        
        height:735px;
    }
    
    #tile_6{
        
        height:635px;
    }
    
    #tile_7{
        
        height:2236px;
        top:auto;
    } 
    
    #tile_8{
        
        height:887.9px;
    } 
    
        #tile_9{
        
        height:887.9px;
    }
    
    #tile_10{
        
        height:887.9px;
    }
}

@media screen and (max-width: 1280px){
    
    main{
        
        height:5540px;
        overflow:inherit;
    }
    #tile{
        
        height:635px;
    }
    
    #tile_2{
        
        height:635px;
    }
    
    #tile_3{
        
        height:635px;
    }
    
    #tile_4{
        
        height:635px;
    }
    
    #tile_5{
        
        height:735px;
    }
    
    #tile_6{
        
        height:635px;

    }
    
    #tile_7{
        
     height:3032px;
        background-size: contain;
        top:-450px;
    } 
    
    #tile_8{
        
       height:832px;
    }
    
    
    #tile_9{
        
        height:832px;
    }
    
    #tile_10{
        
        height:832px;
    }
    
     #bottom{
        
        top:-800px;
    }
}
    







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


  
    
    
}  
    
    #design_problem{
        height: 650px;
    
    }
    
 
    
    #problem_copy{

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

    
    
#tile{
        
        height:535px;
    }
    
#tile_2{
        
        height:535px;
    } 
    
#tile_3{
        
        height:535px;
    } 
    
#tile_4{
        
        height:535px;
    } 
    
#tile_5{
        
        height:435px;
    } 
    
#tile_6{
        
        height:1035px;
    }
    
#tile_7{
        
        height:2200px;
    } 
    
#tile_8{
        
        height:665.6px;
    }
    
#tile_9{
        
        height:665.6px;
    }
    
#tile_10{
        
        height:665.6px;
    }    
    
    
    
    
    
 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:16px;
    line-height:32px;
}
    
  
    
    
#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:-600px;
    }
    
        #info{
        
        left:70px;
    }
    
}

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

    
    #tile{
        
        width:96%;
        height:600px;
    }
    
    #tile_2{
        
        width:96%;
        height:600px;
    }
    
    #tile_3{
  
        width:96%;
        height:600px;
    }
    

    
    #tile_4{
        
        width:96%;
        height:600px;
    }
    
    #tile_5{
        
        width:90%;
        height:700px;
    }
    
    #tile_6{
        
        width:96%;
        height:600px;
    } 
    
    #tile_7{
        
        width:100%;
        height:1800px;
        top:100px;
    }
    
    #tile_8{
        
        width:100%;
        height:800px
    }
    
    #tile_9{
        
        width:100%;
        height:800px;
    }
    
    #tile_10{
        
        width:100%;
        height:800px;
    }
    
    
    #design_solution{
        
        left:42px;
    }
    
    #bottom{

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



@media screen and (max-width: 768px){
    
    main{
        
        height:7355px;
        overflow:hidden;
    }
    
    #descript{
        
        background-attachment: scroll;
    }
    
    #title{
        
        left:42px;
    }
    

    
    #problem_copy{
        
        top:30px;
        left:42px;
        width:537px;
    }
    
    #design_copy{

    width:90%;
    height:200px;
    position:relative;
    margin: 0px auto;    


}
    
    #tile{
        
        width:96%;
        height:600px;
    }
    
    #tile_2{
        
        width:96%;
        height:600px;
    }
    
    #tile_3{
  
        width:96%;
        height:600px;
    }
    

    #tile_4{
        
        width:96%;
        height:600px;
    }
    
    #tile_5{
        
        width:90%;
        height:700px;
    }
    
    #tile_6{
        
        width:96%;
        height:600px;
    }
    
    #tile_7{
        
        width:96%;
        height:1700px;
    } 
    
    #tile_8{
        
        width:100%;
        height:768px;
    }  
    
    #tile_9{
        
        width:100%;
        height:768px;
    }
    
    #tile_10{
        
        width:100%;
        height:768px;
    }    
    
#design_solution{
    
    left:42px;
    width:537px;

    }
    
    #bottom{
        
        top:300px;
    }
    
    p5{
        
        font-size: 14px;
        line-height: 24px;
    }
    
    #design_problem{
        
        height:600px;
    }
    

    
    
}

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

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

    #descript{
        
        background-attachment:scroll;
    }
    


    #design_problem{
        
        height:680px;
    }    
    
    
#problem_copy{
        
        top:30px;
        left:30px;
        width:80%;
    } 
    
    
    p1{
        
        font-size:32px;
    }
    
        p6{
        
        font-size:32px;
    }  
    
#tile{
        
        height:320px;
    }
    
#tile_2{
        
        height:320px;
    }
    
#tile_3{
        
        height:320px;
    }
    
#tile_4{
        
        height:300px;
    }
    
#tile_5{
        
        height:1080px;
    }
    
#tile_6{
        
        height:320px;
    }
    
    #tile_7{
        

        height:1080px;
    } 
    
    #tile_8{
        
        height:480px;
    }
    
    #tile_9{
        
        height:480px;
    }
    
    #tile_10{
        
        height:480px;
    }    
    
    #design_solution{
        
        top:40px;
        left:30px;
        width:420px;
    
    
    } 
    
    p7{
        
        line-height:28px;
        font-size:20px;
    }
    
    #bottom{
        
        top:300px;
    } 
    
    #ankr{
        
        right:10px;
    }
}


@media screen and (max-width: 414px){
    
    main{
        
        height:5700px;
        
    }
    #design_problem{
        
        height:750px;
    }
    
    #problem_copy{
        
       
        top:50px;
    }
    
    #design_solution{
        
        width:350px;
    }
    
#tile{
        
        height:314px;
    }
    
#tile_2{
        
        height:314px;
    }
    
#tile_3{
        
        height:314px;
    }
    
#tile_4{
        
        height:314px;
    }
    
#tile_5{
        
        height:1214px;
    }
    
#tile_6{
        
        height:314px;
    } 
    
    #tile_7{
        
        height:914px;
    }    
    
    #tile_8{
        
        height:414px;
    }
    
    #tile_9{
        
        height:414px;
    }
    
    #tile_10{
        
        height:414px;
    }     
    
    #bottom{
        
        top:200px;
    }
}

@media screen and (max-width:412px){
  
    main{
        
        height:5700px;
        
    }    
    
#tile{
        
        height:314px;
    }
    
#tile_2{
        
        height:314px;
    }
    
#tile_3{
        
        height:314px;
    }
    
#tile_4{
        
        height:314px;
    }
    
#tile_5{
        
        height:1214px;
    }
    
#tile_6{
        
        height:314px;
    } 
    
    #tile_7{
        
        height:914px;
    }
    
    #tile_8{

    height:412px;
    
    
    }
    
    #tile_9{
        
    height:412px;
    }
    
    #tile_10{
        
    height:412px;
    } 
    
    
}

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

    
    #title{
        
        left:20px;
        width:190px;
        height:81.6px;
    }
    
    #design_problem{
        
        height:820px;
        width:375px;
    }
    
    #problem_copy{
        
        left:30px;
        top:40px;
        height:300px;
        
    }
    
    p5{
        
        line-height:24px;
    }
    
    #tile{
        
        height:300px;
    }
    
    #tile_2{
        
        height:300px;
    }
    
    #tile_3{
        
        height:300px;
    }
    
    #tile_4{
        
        height:300px;
    } 
    
    #tile_5{
        
        height:1175px;
    } 
    
    #tile_6{
        
        height:300px;
    } 
    
    #tile_7{
        
        height:900px;
        top:50px;
    } 
    
    #tile_8{
        
        height:375px;
    } 
    
    #tile_9{
        
        height:375px;
    }
    
    #tile_10{
        
        height:375px;
    }     
    
    
    #design_solution{

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

    
    #bottom{
        
        top:100px;
    }
    
    
}

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

        height:5530px;
    }
    #title{
        
        left:25px;
    }
    
    
    #design_problem{
        
        height:800px;
    
    }
    
    #problem_copy{
        
        left:25px;
        top:30px;
    }
    
     #tile{
        
        height:300px;
    }
    
    #tile_2{
        
        height:300px;
    }
    
    #tile_3{
        
        height:300px;
    }
    
    #tile_4{
        
        height:300px;
    } 
    
    #tile_5{
        
        height:1275px;
    } 
    
    #tile_6{
        
        height:300px;
    }
    
    #tile_7{
        
        height:800px;
    } 
    
    #tile_8{
        
        height:360px;
    } 
    
    #tile_9{
        
        height:360px;
    }
    
    #tile_10{
        
        height:360px;
    }     
    
    
    
    #bottom{
        
        top:100px;
    }
}