﻿@media screen and (max-width: 767px)
{




    nav {
        width: 100vw;
        height: 60px;
        background: #fff;
        display: grid;
        grid-template-columns: 70% 15% 15%;
        position: fixed;
        z-index: 10;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
       }

        nav.navShadow {
            grid-template-columns: 70% 15% 15%;
            -webkit-box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2);
            height: 60px;
            background-color: #000000;
        }


    #brand {
        width: 100%;
        display: block;
            background-color: #adadad;
    }



    #logo {
     width: 125px;
    height: 49px;
        background-image: url("../img/logo.png");
        cursor: pointer;
        margin-left:10px;
        margin-top: 10px;
        background-repeat: no-repeat;
       
    }


    #logo.logoshow 
    {
     width: 125px;
    height: 49px;
        margin-left:10px;
    }


    #content-tel {
        display: block;
        width: 100%;
        background-color: #adadad;
        padding-top: 5px;
    }

    #menu {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        background-color: #adadad;

    }

    #menu-toggle {
        margin-left: auto;
        margin-right: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        
    }




    #menu-list {
        display: inline-block;
        width: 100vw;
        height: 0;
        position: absolute;
        top: 60px;
        background-color: #adadad;
        -webkit-transform: translate(, );
        transform: translate(, );
        -webkit-box-shadow: 0 5px 30px -4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 30px -4px rgba(0, 0, 0, 0.2);
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        /*
        display: inline-block;
        width: 100vw;
        height: 0;
        background: #79EDFC;
        position: absolute;
        top: 60px;
        -webkit-transform: translate(, );
        transform: translate(, );
        -webkit-box-shadow: 0 5px 30px -4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 30px -4px rgba(0, 0, 0, 0.2);
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
            */
    }

        #menu-list.showMenu {
            width:100%;
            height: 360px;
        }

            #menu-list.showMenu li {
                height: 20px;
                opacity: 1;
                visibility: visible;
            }

    li {
        width: 100%;
        height: 20px;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.3s 0.1s;
        transition: all 0.3s 0.1s;

    }
    #menu-list li:hover {
        background: #555;
        padding-top: 10px;
        height:40px;
        vertical-align:middle;
    }
        li a {
            width: 100%;
            height: 30px;
            display: block;
            text-align: center;
            vertical-align: middle;
             padding: 0; 
        }

        li:first-child, li:nth-child(2), li:nth-child(3), li:nth-child(4), li:nth-child(5), li:nth-child(6) {
            margin-top: 30px;
        }

    #head-line {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    
#home-section 
{
     padding-top:50px;
}

/**************** flickity *******************/

.flickity-page-dots { bottom: 500px;}
.container-silder-home img { width:80%;}

/**************** font *******************/

    .txt-title
    {
        padding:50px 0px 30px 0px;
    }
    .txt-desc
    {
        padding:15px 10px 15px 10px;
    }
    .txt-item
    {
        padding:0px 0px 0px 0px; 
    }
/**************** grid *******************/    
    .grid-container 
    {
        padding-top:0px;
        display:block;
    }
    .grid-item
    {
        padding:15px 0px 15px 0px ;
    }
    
    P
    {
        padding:25px;
    }
    
    
p:nth-child(4) {
  padding:20px;
}

.grid-item:nth-child(5)
{
    padding:50px;
}

/* p{ padding:10px 0px 10px 0px ;}
           .grid-item:nth-child(2), .grid-item:nth-child(3)
            {
                padding-bottom:30px;
            -webkit-box-shadow:0 25px 0 -24px rgba(0, 0, 0, 0.2);
            -moz-box-shadow:0 25px 0 -24px rgba(0, 0, 0, 0.2);
            box-shadow:0 25px 0 -24px rgba(0, 0, 0, 0.2);

        }

           .grid-item:nth-child(2), .grid-item:nth-child(3),.grid-item:nth-child(4),.grid-item:nth-child(5)
            {
                padding-bottom:70px;

        }*/
   .line
{
    
    display:block;
    width:50px;
    height:1px;
    background-color:rgba(0, 0, 0, 0.2);
    margin-left:auto ;
    margin-right:auto; 
} 

#map{width:80%;}

.gallery-container 
{
  grid-template-columns: 100%;
}

.img-gallery 
{
    width:80%;
}

#container-map 
{
 display:table;

}

.item-map-right 
{
  width:100%;
  display:block;
  text-align:center;
  padding-left:1%;
  padding-right:1%;
}

.item-map-left 
{
  width:100%;
   display:block;
  text-align:center;
  padding-left:1%;
  padding-right:1%;
}

    @media (max-width: 800px) {

        .pro-container {
            flex-direction: column;
        }

        /*


.item-map-right 
{
  width:100%;
  text-align:center;
  padding-right:0%;
}

.item-map-left 
{
  width:100%;
  text-align:center;
  padding-left:0%;
}*/
    }
