/* CSS Document */



@media only screen 
    and (max-device-width: 959px) 
    ,
    only screen 
    and (max-width: 959px) {

        #header,
        #content,
        footer {
            width: 100%;
        }
        .content_main {
            width: calc(100% - 300px);
            border-right: none;
            padding-right: 30px;
            padding-left: 30px;
        }

        .ce-gallery img {
            width: 100%;
            height: auto;
        }
        .ce-row {
        	margin-bottom: 1%;
        }
        .ce-gallery[data-ce-columns="2"] .ce-column {
            width: 49.4%;
            margin-right: 1%;
        }
        .ce-gallery[data-ce-columns="3"] .ce-column {
            width: 32.6%;
            margin-right: 1%;
        }
        .ce-gallery[data-ce-columns="4"] .ce-column {
            width: 24.24%%;
            margin-right: 1%;
        }
        .ce-gallery[data-ce-columns="5"] .ce-column {
            width: 19.15%;
            margin-right: 1%;
        }
        .ce-column:last-child {
            margin-right: 0 !important;
        }

        iframe {
            width: 100%;
        }

        #navi_main > ul > li > a {
            font-size: calc(4.4vw - 16px);
        }
        #navi_main li li a {
            font-size: 15px;
        }


}



@media only screen 
    and (max-device-width: 767px) 
    ,
    only screen 
    and (max-width: 767px) {

        body {
            font-size: 16px;
            line-height: 22px;
        }
        .home-logo {
            height: 60px;
            width: 157px;
            top: 60px;
            right: 20px;
        }
        .home-logo a {
            background-image: url(/fileadmin/massano-logo.svg);
        }
        .content_left {
            padding-top: 120px;
            width: 200px;
        }
        .content_left h1 {
            font-size: 30px;
            line-height: 34px;
        }
        .content_left a {
            font-weight: normal;
        }
        #navi_main {
            border-left-width: 200px;
        }
        .content_main {
            width: calc(100% - 200px);
        }
        .ce-gallery[data-ce-columns="4"] .ce-column {
            width: 49.4%;
        }
        .ce-gallery[data-ce-columns="4"] .ce-column:nth-of-type(2n+0) {
            margin-right: 0;
        }
        .ce-gallery[data-ce-columns="4"] .ce-column:nth-of-type(4n+1),
        .ce-gallery[data-ce-columns="4"] .ce-column:nth-of-type(4n+2) {
            margin-bottom: 1%;
        }
        .ce-gallery[data-ce-columns="5"] .ce-column:nth-of-type(5n+1),
        .ce-gallery[data-ce-columns="5"] .ce-column:nth-of-type(5n+2),
        .ce-gallery[data-ce-columns="5"] .ce-column:nth-of-type(5n+3) {
            width: 32.6%;
            margin-bottom: 1%;
        }
        .ce-gallery[data-ce-columns="5"] .ce-column:nth-of-type(5n+4),
        .ce-gallery[data-ce-columns="5"] .ce-column:nth-of-type(5n+0) {
            width: 49.4%;
        }
        .ce-gallery[data-ce-columns="5"] .ce-column:nth-of-type(5n+3), 
        .ce-gallery[data-ce-columns="5"] .ce-column:nth-of-type(5n+0) {
            margin-right: 0;
        }

        #navi_main > ul > li > a {
            font-size: calc(4.4vw - 10px);
        }
        #navi_main > ul > li {
            padding: 0 1.2vw;
        }



}



@media only screen 
    and (max-device-width: 580px) 
    ,
    only screen 
    and (max-width: 580px) {

        .content_left {
            top: -130px;
            width: 100%;
            height: 90px;
            padding: 8px 20px 0px 65px;
            float: none;
        }
        .content_left h1 {
            font-size: 4.4vw;
            line-height: 4.6vw;
            margin-bottom: 130px;
        }
        .home-logo {
            height: 110px;
            width: 30px;
            top: 8px;
            right: auto;
            left: 8px;
        }
        .home-logo a {
            background-image: url(/fileadmin/massano-logo-up.svg);
        }
        #navi_main {
            border-left-width: 65px;
        }
        .content_main {
            width: 100%;
        }
        #navi_main > ul > li > a {
            font-size: calc(3.7vw);
        }
        #navi_main > ul > li {
            padding: 0 1.5vw;
        }


}






@media only screen 
    and (max-device-width: 459px) 
    ,
    only screen 
    and (max-width: 459px) {


        .content_left h1 {
            font-size: 6.4vw;
            line-height: 6.9vw;
        }

        .content_main {
            padding-left: 15px;
            padding-right: 15px;
        }

}



@media only screen 
    and (max-device-width: 372px) 
    ,
    only screen 
    and (max-width: 372px) {



        .ce-gallery .ce-column {
            width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-bottom: 1% !important;
        }
}