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


@media screen and (min-width: 1680px){
    
        main{
        
        height:1000px;
            position:absolute;
    }
    
    #descript{
    
    width: 100%;
    height:985px;
    background-size: cover;
    background-attachment: fixed;
    background-position:center;
        background-repeat: no-repeat;}
   
    
    
    #tile{
        
        height:924px;
        top:100px;
    }
    
    #tile_2{
        
        height:742px;
        top:200px;
    }
    
    #tile_3{
        
        height:1124px;
        top:40px;
    }
    
    #tile_4{
        
        height:742px;
        top:80px;
    }
    
    #tile_5{
        
        height:1142px;
        top:-300px;
    }
    
    #tile_6{
        
        height:1142px;
        top:-300px;
    } 
    
      #tile_7{
        
        height:1142px;
        top:-250px;
    } 
    
       #tile_8{
        
        height:1142px;
        top:-150px;
    } 
    
    #bottom{
        
        top:-800px;
    }
    
}

@media screen and (max-width: 1366px){
    
    main{
        
        height:7068px;
    }
    #tile{
        
        height:751px;
    }
    
    #tile_2{
        
        height:535px;
    }
    
    #tile_3{
        
        height:751px;
        top:0px;
    }
    
    #tile_4{
        
        height:535px;
        top:100px;
    }
    
    #tile_5{
        
        height:751px;
        top:100px;
    }
    
    #tile_6{
        
        height:751px;
        top:150px;
    }
    
    #tile_7{
        
        height:751px;
        top:200px;
    }
    
    #tile_8{
        
        height:535px;
        top:300px;
    } 
    
        #tile_9{
        
        height:887.9px;
    }
    
    #tile_10{
        
        height:887.9px;
    }
}

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

    }
    
    #tile_7{
        
        height:704px;
    } 
    
    #tile_8{
        
       height:832px;
    }
    
    
    #tile_9{
        
        height:832px;
    }
    
    #tile_10{
        
        height:832px;
    }
    
}







@media screen and (max-width: 1024px){
    
main{
    
    width:100%;
    height:2500px;
    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;


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

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

    
    
#tile{
        
        height:563px;
    }
    
#tile_2{
        
        height:535px;
    } 
    
#tile_3{
        
        height:563px;
    top:50px;
    } 
    
#tile_4{
        
        height:535px;
    } 
    
#tile_5{
        
        height:563px;
    top:150px;
    } 
    
#tile_6{
        
        height:563px;
    top:200px;
    }
    
#tile_7{
        
        height:563px;
    top:250px;
    } 
    
#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:200px;
    }
    
        #info{
        
        left:70px;
    }
    
}

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

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

    
    #tile_4{
        
        width:96%;
        height:400px;
    }
    
    #tile_5{
        
        width:96%;
        height:768px;
    }
    
    #tile_6{
        
        width:96%;
        height:768px;
    } 
    
    #tile_7{
        
        width:96%;
        height:768px;
    }
    
    #tile_8{
        
        width:96%;
        height:800px
    }
    
    #tile_9{
        
        width:100%;
        height:800px;
    }
    
    #tile_10{
        
        width:100%;
        height:800px;
    }
    
    
    #design_solution{
        
        left:42px;
    }
    
    #bottom{

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



@media screen and (max-width: 768px){
    
    main{
        
        height:7250px;
        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:737px;
    }
    
    #tile_2{
        
        width:96%;
        height:400px;
    }
    
    #tile_3{
  
        width:96%;
        height:737px;
        top:100px;
    }
    

    #tile_4{
        
        width:96%;
        height:400px;
        top:200px;
    }
    
    #tile_5{
        
        width:96%;
        height:737px;
        top:300px;
    }
    
    #tile_6{
        
        width:96%;
        height:737px;
        top:400px;
    }
    
    #tile_7{
        
        width:96%;
        height:737px;
        top:500px;
    } 
    
    #tile_8{
        
        width:100%;
        height:600px;
        top:600px;
    }  
    
    #tile_9{
        
        width:100%;
        height:768px;
    }
    
    #tile_10{
        
        width:100%;
        height:768px;
    }    
    
#design_solution{
    
    left:42px;
    width:537px;

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

    
    
}

@media screen and (max-width: 480px){
    
    main{
        
        height:6650px;
        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:460px;
    }
    
#tile_2{
        
        height:320px;
    }
    
#tile_3{
        
        height:460px;
    top:400px;
    }
    
#tile_4{
        
        height:300px;
    top:500px;
    }
    
#tile_5{
        
        height:460px;
    top:900px;
    }
    
#tile_6{
        
        height:460px;
    top:1000px;
    }
    
    #tile_7{
        

        height:460px;
        top:1100px;
    } 
    
    #tile_8{
        
        height:480px;
        top:1150px;
    }
    
    #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:1500px;
    } 
    
    #ankr{
        
        right:10px;
    }
}


@media screen and (max-width: 414px){
    
    main{
        
        height:6320px;
        
    }
    #design_problem{
        
        height:750px;
    }
    
    #problem_copy{
        
       
        top:50px;
    }
    
    #design_solution{
        
        width:350px;
    }
    
#tile{
        
        height:397px;
    }
    
#tile_2{
        
        height:214px;
    }
    
#tile_3{
        
        height:397px;
    top:600px;
    }
    
#tile_4{
        
        height:200px;
    top:650px;
    }
    
#tile_5{
        
        height:397px;
    top:1250px;
    }
    
#tile_6{
        
        height:397px;
    top:1300px;
    } 
    
    #tile_7{
        
        height:397px;
        top:1350px;
    }    
    
    #tile_8{
        
        height:414px;
        top:1400px;
    }
    
    #tile_9{
        
        height:414px;
    }
    
    #tile_10{
        
        height:414px;
    }     
    
    #bottom{
        
        top:1700px;
    }
}

@media screen and (max-width:412px){
  
      main{
        
        height:6320px;
        
    }
    #design_problem{
        
        height:750px;
    }
    
    #problem_copy{
        
       
        top:50px;
    }
    
    #design_solution{
        
        width:350px;
    }
    
#tile{
        
        height:397px;
    }
    
#tile_2{
        
        height:214px;
    }
    
#tile_3{
        
        height:397px;
    top:600px;
    }
    
#tile_4{
        
        height:200px;
    top:650px;
    }
    
#tile_5{
        
        height:397px;
    top:1250px;
    }
    
#tile_6{
        
        height:397px;
    top:1300px;
    } 
    
    #tile_7{
        
        height:397px;
        top:1350px;
    }    
    
    #tile_8{
        
        height:414px;
        top:1400px;
    }
    
    #tile_9{
        
        height:414px;
    }
    
    #tile_10{
        
        height:414px;
    }     
    
    #bottom{
        
        top:1700px;
    }
    
    
}

@media screen and (max-width: 375px){
    
    
    main{
        
        height:6450px;
        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:360px;
    }
    
    #tile_2{
        
        height:200px;
    }
    
    #tile_3{
        
        height:360px;
        top:650px;
    }
    
    #tile_4{
        
        height:200px;
        top:700px;
    } 
    
    #tile_5{
        
        height:360px;
        top:1350px;
    } 
    
    #tile_6{
        
        height:360px;
        top:1400px;
    } 
    
    #tile_7{
        
        height:360px;
top:1450px;
    } 

    
    #tile_8{
        
        height:375px;
        top:1500px;
    } 
    
    #tile_9{
        
        height:375px;
    }
    
    #tile_10{
        
        height:375px;
    }     
    
    
    #design_solution{

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

    
    #bottom{
        
        top:2000px;
    }
    
    
}

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

        height:6350px;
    }
    #title{
        
        left:25px;
    }
    
    
    #design_problem{
        
        height:800px;
    
    }
    
    #problem_copy{
        
        left:25px;
        top:30px;
    }
    
     #tile{
        
        height:345px;
    }
    
    #tile_2{
        
        height:200px;
    }
    
    #tile_3{
        
        height:345px;
        top:700px;
    }
    
    #tile_4{
        
        height:200px;
        top:750px;
    } 
    
    #tile_5{
        
        height:345px;
        top:1450px;
    } 
    
    #tile_6{
        
        height:345px;
        top:1500px;
    }
    
    #tile_7{
        
        height:345px;
        top:1550px;
    } 
    
    #tile_8{
        
        height:360px;
        top:1600px;
    } 
    
    #tile_9{
        
        height:360px;
    }
    
    #tile_10{
        
        height:360px;
    }     
    
    
    
    #bottom{
        
        top:2000px;
    }
}