@media only screen and (min-width : 300px){
    header .top .logo img{
        padding-top: 15px;
    }
    header .top .show-menu{
        margin-top: -35px;
        margin-left: 82%;
    }
}
@media only screen and (min-width : 400px){
    header .top .logo img{
        padding-top: 10px;
    }
    header .top .show-menu{
        margin-top: -40px;
        margin-left: 85%;
    }
}
@media only screen and (min-width : 450px){
    header .top .logo img{
        padding-top: 10px;
        width: 25%;
    }
    header .top .show-menu{
        margin-top: -35px;
        margin-left: 85%;
    }
}
@media only screen and (min-width : 500px){
    header .top .logo img{
        padding-top: 5px;
        width: 23%;
    }
    header .top .show-menu{
        margin-top: -45px;
        margin-left: 88%;
    }
}
@media only screen and (min-width : 650px){
    header .top{
        height: 90px;
    }
    header .top .logo img{
        max-width: 35%;
        width: 25%;
        padding-top: 5px;
    }
    header .top .show-menu{
        display: none;
    }
    /************** social ****************/
    header .social-box .social{
        font-size: 1.2em;
        display: block;
        position: absolute;
        margin-top: -65px;
        margin-left: 78.5%;
        color: #FFFFFF;
        border: 1.2px solid #FFFFFF;
        border-radius:5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        padding: 5px 6px 0px 6px;
    }
    header .social-box .social a{
        color: #FFFFFF;
    }
    header .social-box .social a .facebook{
        background-image: url('../../../../pic/social_icon/f1.png');
        background-size: 100%;
        margin: 0;
        height: 20px;
        width: 20px;
    }
    header .social-box .social a .facebook:hover{
        background-image: url('../../../../pic/social_icon/f2.png');
    }
    header .social-box .social a .youtube{
        background-image: url('../../../../pic/social_icon/y1.png');
        background-size: 100%;
        margin: 0;
        height: 20px;
        width: 20px;
    }
    header .social-box .social a .youtube:hover{
        background-image: url('../../../../pic/social_icon/y2.png');
    }
    header .social-box .social a .line{
        background-image: url('../../../../pic/social_icon/l1.png');
        background-size: 100%;
        background-repeat: no-repeat;
        margin: 0;
        height: 20px;
        width: 51px;
    }
    header .social-box .social a .line:hover{
        background-image: url('../../../../pic/social_icon/l2.png');
    }
    /******************************/
    header .register{
        font-size: 1.2em;
        display: block;
        position: absolute;
        margin-top: -105px;
        margin-left: 82%;
        color: #FFFFFF;
        border: 1px solid #FFFFFF;
        padding: 2px 15px 2px 15px;
    }
    header .register a{
        color: #FFFFFF;
    }
    header .nav-mobile{
        display: none;
    }
    header .nav{
        padding-top: 0px;
        padding-bottom: 0px;
        font-size: 1em;
        line-height: 35px;
        background-color: #ffffff;
        display: block;
    }
    header .nav div{
        border: 0px;
        display: inline-block;
        padding-right: 2%;
        padding-left: .4%;
        margin-top: 5px;
        margin-bottom: 5px;
        letter-spacing: -.2px;
    }
    header .nav div:nth-last-child(1){
        border-right: 0px;
        padding-right: 0;
    }
    header .nav div a{
        color: #ed7498;
        display: inline-block;
        text-decoration: none;
    }


    /* *****************  admin  ***************** */
    /* *****************  eng for daily life  ***************** */

    .dropbtn {
        font-family: 'Nunito' !important;
        background-color: white;
        color: #ed7498;
        padding: 6px 0 6px 0;
        font-size: 1em;
        border: none;
        cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {

    }

    .dropdown {
        position: relative;
        display: block;

    }

    .dropdown .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        overflow: auto;
        box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
        margin-top: -5px;
        margin-left: -10px;

    }

    .dropdown .dropdown-content a {
        font-family: 'Nunito' !important;
        color: #ed7498;
        font-size: 16px;
        padding: 0px 10px;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #ed7498;
    }

    .dropdown a:hover {background-color: #f1f1f1}



    .menu_logout{
        background-color: white;
        border: none;
        box-shadow: none;
    }
    .menu_logout:hover {background-color: #f1f1f1}

    .width102 {
        width: 102px;
    }
    .width165 {
        width: 165px;
    }
    .width200 {
        width: 198px;
    }
    .show {display:block;}
    .hidden {display:none;}
    /* *****************  END admin  ***************** */
}
/*
@media only screen and (min-width : 650px){
    header .top .logo img{
        padding-top: 8px;
    }
    header .nav{
        font-size: 1.2em;
    }
    header .social-box .social{
        margin-left: 81%;
    }

}
*/
@media only screen and (min-width : 760px){
    header .top .logo img{
        padding-top: 5px;
    }
    header .nav{
        font-size: 1.1em;
    }
    /************** social ****************/

    header .social-box .social{
        margin-left: 81%;
    }
    /******************************/

}

@media only screen and (min-width : 780px){
    /************** social ****************/
    header .social-box .social{
        font-size: 1.2em;
        display: block;
        position: absolute;
        margin-top: -65px;
        margin-left: 77%;
        color: #FFFFFF;
        border: 1.2px solid #FFFFFF;
        border-radius:5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        padding: 5px 7px 0px 7px;
    }
    header .social-box .social a .facebook{
        background-size: 100%;
        margin: 0;
        height: 30px;
        width: 30px;
        display: inline-block;
    }
    header .social-box .social a .youtube{
        background-size: 100%;
        margin: 0;
        height: 30px;
        width: 30px;
        display: inline-block;
    }
    header .social-box .social a .line{
        background-size: 100%;
        margin: 0;
        height: 30px;
        width: 74px;
        display: inline-block;
    }
    header .nav{
        font-size: 1.2em;
    }
    /******************************/

}
@media only screen and (min-width : 850px){
    header .nav{
        font-size: 1.3em;
    }
}
@media only screen and (min-width : 1024px){
    header .social-box {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        left: auto;
        right: auto;
    }
    header .social-box .social{
        margin-left: 780px;
    }
}