@charset "utf-8";




@media print,screen and (min-width: 769px) {

    #about{
        padding-top: 150px;
    }
    #about h2 {
        display: block;
        background-image: url(../img/about_title.png);
        -webkit-background-size: cover;
        background-size:cover ;
        width: 366px;
        height: 92px;
        font-size: 180%;
        font-weight: bold;
        line-height: 1em;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items:center ;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }


    #about .boxes{
        margin-top: 50px;
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content:space-between;
    }

    #about .boxes .box{
        width: 360px;
        position: relative;
        padding-bottom: 75px;
        margin-bottom: 70px;
    }

    #about .boxes .g .image{
        box-shadow: 10px 10px 0 rgba(0,211,154,0.2);
    }
    #about .boxes .y .image{
        box-shadow: 10px 10px 0 rgba(255,228,0,0.2);
    }

    #about .boxes .box h3{
        margin-top: 40px;
        font-weight: bold;
        font-size: 130%;
        text-align: center;

    }

    #about .boxes .box .body{
        margin-top: 20px;
    }

   

    #about .boxes .box .more{
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: calc(-194px / 2);
    }






    #about .boxes .box .body.center{
        text-align: center;
    }



}


@media only screen and (max-width: 1250px) and (min-width: 769px) {


    #about .boxes{
        width: 1000px;
    }

    #about .boxes .box{
        width: 300px;
    }


}


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



    #about{
        padding-top: 120px;
    }
    #about h2 {
        display: block;
        background-image: url(../img/about_title.png);
        -webkit-background-size: calc(14vw / 92 * 366) calc(14vw );
        background-size: calc(14vw / 92 * 366) calc(14vw );
        background-repeat: no-repeat;
        background-position: center center;
        height: calc(16vw);
        font-size: 150%;
        font-weight: bold;
        line-height: 1em;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items:center ;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }


    #about .boxes{
        margin-left: 12vw;
        margin-right: 12vw;
    }

    #about .boxes .box{
        margin-top: 40px;
    }

    #about .boxes .g .image{
        box-shadow: 10px 10px 0 rgba(0,211,154,0.2);
    }
    #about .boxes .y .image{
        box-shadow: 10px 10px 0 rgba(255,228,0,0.2);
    }
    
    #about .boxes .box h3{
        margin-top: 30px;
        font-weight: bold;
        font-size: 130%;
        text-align: center;

    }

    #about .boxes .box .body{
        margin-top: 20px;
    }


    #about .boxes .box .more{
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }







}