@import url('https://fonts.googleapis.com/css?family=Montserrat');

body{
    margin: 0; 
    padding: 20;
}

.homePage h1{
    font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.homePage h2{
    font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.homePage h3{
    font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.summary{
}

.heroImage{
    
}

.imgFullWidth{
    width: 600;
}


.tokubotsAvatar{
    width: 90px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}



.homePage h1{
font-size: 76px;
color: #000000;
}

.homePage h2{
font-size: 20px;
color: #000000;
line-height: 36px;
}

.content{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100;
}

.homePage grid{

    width: 900px;
    margin-left: auto;
    margin-right: auto;
}


.grid 
{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    display: block;
}

.grid-item 
{
    float: left;
    font-size: 24;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border: 15px solid white;
}

.grid-item img 
{
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    max-width: none;
    border-radius: 20px;
}

.zanzibar-tile img 
{
    border-radius: 0;
}

.grid-sizer, .grid-item 
{
    width: 400px;
}

.grid-item.p_two_third
{
    width: 800px;
}

.grid-item.p_one
{
    width: 1200px;
}

.grid-hover-tile
{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.grid-hover-tile_container{
    margin-top: auto;
    margin-bottom: auto;
}

.grid-hover-tile_title{
    font-family: 'Montserrat','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #000000;
    text-align: center;

}

.grid-hover-tile_description{
    line-height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18;
    font-weight: 300;
        color: black;    
    padding-top: 20px;
    padding-left: 5px;


}


/* RESPONSIVE PART */

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

    .content-1170
    {
        max-width: 90%;
    }

    .header-holder
    {
        max-width: 90%;
    }

    .content-970, .single-post .site-content
    {
        max-width: 90%;
    }       

    .content-770
    {
        max-width: 90%;
    } 

    .progress_bar_field_holder
    {
        width: 337px;
        max-width: 50%; 
    }

}

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

    .one_half,  .one_third,  .two_third,  .three_fourth, .one_fourth
    {
        margin-right: 8%;
        float: left;
        position: relative;
        margin-bottom: 37px;
    }

    .one_half{
        width: 46%;
    }
    .one_third{
        width: 28%;
    }
    .two_third{
        width: 64%;
    }
    .one_fourth{
        width: 19%;
    }
    .three_fourth{
        width: 73%;
    }

    .last.col-570 
    {
        margin-left: 0;
    }


 

    blockquote.inline-blockquote
    {
        display: block;
        margin: 50px 0;
        width: auto;
    }

    .grid-sizer, .grid-item 
    {
        width: 340px;
    }

    .grid-item.p_two_third
    {
        width: 680px;
    }

    .grid, .grid-item.p_one
    {
        width: 1050px;
    }
    .content{
        width: 1050px;
    }

}

@media screen and (max-width: 1220px) {   
    .content{
        width: 960px;
    }
    .grid-item.p_one, .grid
    {
        width: 960px;       
    }    

    .grid-sizer, .grid-item 
    {
        width: 320px;
    }

    .grid-item.p_two_third
    {
        width: 640px;
    }

    blockquote:before
    {
        line-height: 150px;
        font-size: 150px;
        position: relative;
        top: 0;
        left: 0;    
        text-align: center;
        display: block;
    }

}

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

    .content{
        width: 810px;
    }

    .grid-item.p_one, .grid
    {
        width: 810px;
    }

    .grid-sizer, .grid-item 
    {
        width: 270px;
    }

    .grid-item.p_two_third
    {
        width: 540px;
    }

  

}

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

    .one_half, .one_third, .one_fourth, .two_third, .three_fourth, .one_half.margin-0, .one_third.margin-0, .two_third.margin-0, .one_fourth.margin-0, .three_fourth.margin-0
    {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-left: 0;
    }

    .single-portfolio .one_half.margin-0 img, .single-portfolio .one_third.margin-0 img, .single-portfolio .two_third.margin-0 img, .single-portfolio .one_fourth.margin-0 img, .single-portfolio .three_fourth.margin-0 img
    {
        width: 100%;
        height: auto;
    } 

    .progress_bar_field_holder
    {
        width: 100%;
        margin-top: -15px;
        max-width: 100%;
    }    

}


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

    .content{
        width: 690px;
    }

    .grid, .grid-item.p_one
    {
        width: 690px;
    }

    .grid-item
    {
        border: 10px solid white;
    }  

    .grid-sizer, .grid-item 
    {
        width: 230px;
    }

    .grid-item.p_two_third
    {
        width: 460px;
    }

    .grid-hover-tile 
    {

    }   


}

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

    .content{
        width: 570px;
    }

    .grid, .grid-item.p_one
    {
        width: 570px;
    }

    .grid-sizer, .grid-item 
    {
        width: 190px;
    }

    .grid-item.p_two_third
    {
        width: 380px;
    } 

    .grid-hover-tile
    {
        font-size: 14px;
    }

    .single-post .entry-content
    {
        font-size: 20px;
        line-height: 35px;
    }    

    .single-post .post-info div
    {
        display: block;
    }

    .single-post .post-info div:after
    {
        display: none;
    }

    blockquote.inline-blockquote 
    {
        font-size: 20px;
        line-height: 32px;
    }  

}

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

    blockquote:before 
    {
        line-height: 110px;
        font-size: 110px;
    }

    .content{
        width: 100%;
    }
}


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


    .grid, .grid-sizer, .grid-item, .grid-item.p_one, .grid-item.p_two_third
    {
        width: 100%;
    }

    .grid-hover-tile 
    {
        font-size: 20px;
    }    

    .content{
        width: 100%;
    }

    .homePage h1{
        font-size: 56px;
        }
        
        .homePage h2{
        font-size: 16px;
        }



}