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

@media screen and (min-width: 1920px){
    
    main{
        
        height:2050px;
        overflow:hidden;
    }
    
    #descript{
        
        height:980px;
    }
    
    #title{
        
        top:730px;
    }
       #tile{
        
        height:639.9999936px;
    } 
    
       #tile_2{
        
        height:639.9999936px;
    } 
    
       #tile_3{
        
        height:639.9999936px;
    } 
    
       #tile_4{
        
        height:639.9999936px;
    } 
    
       #tile_5{
        
        height:639.9999936px;
    } 
    
       #tile_6{
        
        height:639.9999936px;
    } 
    
       #tile_7{
        
        height:639.9999936px;
    } 
    
       #tile_8{
        
        height:639.9999936px;
    } 
    
       #tile_9{
        
        height:639.9999936px;
    }     
    
    
    #bottom{
        
        top:700px;
    } 
    
}


@media screen and (max-width: 1366px){
    
    
    main{
        
        height:1535px;
    }
    #descript{
        
        height:668px;
    }
    
    #tile{
        
        height:455.33333332878px;
    }
    
    #tile_2{
        
        height:455.33333332878px;
    }  
    
    #tile_3{
        
        height:455.33333332878px;
    }
    
    #tile_4{
        
        height:455.33333332878px;
    }
    
    #tile_5{
        
        height:455.33333332878px;
    }
    
    #tile_6{
        
        height:455.33333332878px;
    } 
    
    #tile_7{
        
        height:455.33333332878px;
    }
    
    #tile_8{
        
        height:455.33333332878px;
    }
    
    #tile_9{
        
        height:455.33333332878px;
    }    
    
    
    
}

@media screen and (max-width: 1280px){
    
    main{
        
        height:1520px;
    }
    #descript{
        
        height:700px;
    }
    
    #tile{
        
        height:426.66666624px;
    }
    
    #tile_2{
        
        height:426.66666624px;
    }  
    
    #tile_3{
        
        height:426.66666624px;
    }
    
    #tile_4{
        
        height:426.66666624px;
    }
    
    #tile_5{
        
        height:426.66666624px;
    }
    
    #tile_6{
        
        height:426.66666624px;
    } 
    
    #tile_7{
        
        height:426.66666624px;
    }
    
    #tile_8{
        
        height:426.66666624px;
    }
    
    #tile_9{
        
        height:426.66666624px;
    }
    
    #bottom{
        
        top:450px;
    }
}









@media screen and (max-width: 1024px){
    
    main{
        
        height:1470px;
    }
    
    #title{
        
        float:right;
        margin-right:20px;

        
    }
    
    #tile{
        
        height:341px;
        width:33.333%;
        background-size: cover;
    }
    
    #tile_2{
        
        height:341px;
        width:33.333%;
        background-size: cover;
        
    }
    
    #tile_3{
        
        height:341px;
        width:33.333%;
        background-size:cover;
    }
    
    #tile_4{
        
        height:512px;
        width:50%;
        background-size: cover;
    }
    
    #tile_5{
        
        height:512px;
        width:50%;
        background-size: cover;
    }
    
    #tile_6{
        
        height:512px;
        width:50%;
        background-size:cover;
    }
    
    #tile_7{
        
        height:512px;
        width:50%;
        background-size:cover;
    }
    
    #tile_8{
        
        height:512px;
        width:50%;
        background-size:cover;
    }
    
    #tile_9{
        
        height:512px;
        width:50%;
        background-size:cover;
    }
    
    
    p3{
        
        line-height:50px;
        font-size: 32px;
 
    }
    
    #bottom{
        
        top:400px;
    }
    
}

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

        height:3570px;
    
    }
    
    #logo{
        
        left:20px;
    }
    
    #menu{
        
        right:20px;
    }
    
    #title{
        
        float:none;
        margin:0px auto;
        right:0px;
    }
    
    #descript{
        
        background-image: url(img/hero-image-portfolio-mobile.jpg);
        background-attachment: scroll;
    }
    
    
    #tile{

        height:800px;
        width:100%;
    }
    
    #tile_2{
        
        height:800px;
        width:100%;
    }
    
    #tile_3{
        
        height:800px;
        width:100%;
    }
    
    #tile_4{
        
        height:800px;
        width:100%;
    }
    
    #tile_5{
        
        height:800px;
        width:100%;
    }
    
    #tile_6{
        
        height:800px;
        width:100%;
    
    }
    
    #tile_7{
        
        height:800px;
        width:100%;
    }
    
    #tile_8{
        
        height:800px;
        width:100%;
    }
    
    #tile_9{
        
        height:800px;
        width:100%;
    }
    
    #bottom{
        
        top:2500px;
    
    }

    
}

@media screen and (max-width: 768px){
    
    #title{

        top:450px;
        right:0px;
    
    }
    
    #tile{
        
        height:768px;
        
    }
    
    #tile_2{
        
        height:768px;
    }
    
    #tile_3{
        
        height:768px;
    }
    
    #tile_4{
        
        height:768px;
    }
    
    #tile_5{
        
        height:768px;
    }
    
    #tile_6{
        
        height:768px;
    }
    
    #tile_7{
        
        height:768px;
    }
    
    #tile_8{
        
        height:768px;
    }
    
    #tile_9{
        
        height:768px;
    }

}

@media screen and (max-width: 480px){
    
    main{
        
        height:2520px;
    }
    
    #descript{
        
        height:650px;
    }
    
    p3{
        
        font-size: 24px;
        line-height:36px;
        font-weight:300;
    }
    
    #title{

        width:350px;
        height:500px;
    
    }
    
    #tile{
        
        height:480px;
    }
    
    #tile_2{
        
        height:480px;
    }
    
    #tile_3{
        
        height:480px;
    }
    
    #tile_4{
        
        height:480px;
    }
    
    #tile_5{
        
        height:480px;
    }
    
    #tile_6{
        
        height:480px;
    }
    
    #tile_7{
        
        height:480px
    }
    
    #tile_8{
        
        height:480px;
    }
    
    #tile_9{
        
        height:480px;
    }
    
    #bottom{
        
        top:1500px;
    }
    
    #info{
        
        left:20px;
    }
    
}

@media screen and (max-width:414px){
    
    main{
        
        height:2320px;
    }
    
    #tile{
        
        height:414px;
    }
    
    #tile_2{
        
        height:414px;
    }
    
    #tile_3{
        
        height:414px;
    }
    
    #tile_4{
        
        height:414px;
    }
    
    #tile_5{
        
        height:414px;
    }
    
    #tile_6{
        
        height:414px;
    }
    
    #tile_7{
        
        height:414px;
    }
    
    #tile_8{
        
        height:414px;
    }
    
    #tile_9{
        
        height:414px;
    
    }
    
    #bottom{
        
        top:1300px;
    }
}

@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;
    }
    
    #tile_7{
        
        height:412px;
    }
    
    #tile_8{
        
        height:412px;
    }
    
    #tile_9{
        
        height:412px;
    
    }


}

@media screen and (max-width:375px){
    main{
        
        height:2220px;
    }
    
    #menu{
        
        right:20px;
    }
    
    #logo{
        
        left:20px;
    }
    
    #tile{
        
        height:375px;
    }
    
    #tile_2{
        
        height:375px;
    }
    
    #tile_3{
        
        height:375px;
    }
    
    #tile_4{
        
        height:375px;
    }
    
    #tile_5{
        
        height:375px;
    }
    
    #tile_6{
        
        height:375px;
    }
    
    #tile_7{
        
        height:375px;
    }
    
    #tile_8{
        
        height:375px;
    }
    
    #tile_9{
        
        height:375px;
    
    } 
    
    #bottom{
        
        top:1200px;
    }
    
    
}

@media screen and (max-width:360px){
    
    #title{
        
        width:330px;
        left:5px;
    }
    
    p3{
        
        font-size:22px;
    }
    
    #tile{
        
        height:360px;
    }
    
    #tile_2{
        
        height:360px;
    }
    
    #tile_3{
        
        height:360px;
    }
    
    #tile_4{
        
        height:360px;
    }
    
    #tile_5{
        
        height:360px;
    }
    
    #tile_6{
        
        height:360px;
    }
    
    #tile_7{
        
        height:360px;
    }
    
    #tile_8{
        
        height:360px;
    }
    
    #tile_9{
        
        height:360px;
    
    } 
        
    
}