@import url('./animation.css');


/***
*
Flexible
*
***/

@media (max-width: 767px) {
    /*xs*/
    nav #logo a img{
        height:30px;
    }
    #socials{
        width:35px;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    /*sm*/
    nav #logo a img{
        height:35px;
    }
    #socials{
        width:45px;
    }
}
@media (min-width: 992px){
    /*md*/
    nav #logo a img{
        height:40px;
    }
    #socials{
        width:50px;
    }
}

/***
*
COMMON
*
***/

a{
    text-decoration: none;
    color:inherit;
}
a:hover{
    text-decoration: none;
    color:inherit;
}
.skew{
    transform: skew(0deg, 9.5deg);
    transform-origin: right 0px;
}
.skew_rev{
    transform: skew(0deg, -9.5deg);
    transform-origin: right 0px;
}

nav{
    position:fixed;
    z-index: 5;
}

/***
*
NAVIGATION BAR
*
***/

nav .container{
    width:100%;
}
nav #logo a{
    display:inline-block;
    padding: 0em 6em 2em 3em;
    background-image: url("../img/logo_bg.png");
    background-size: contain;
    background-repeat: no-repeat;
}
nav #menu{
    padding:0;
    display:none;
}
nav #menu div{
    float:right;
    display: inline-block;
    padding: 0em 0em 2em 5em;
    background-image: url("../img/menu_bg.png");
    background-size: contain;
    background-repeat: no-repeat;
}
nav #menu div a{
    display: inline-block;
    padding: 0.5em 1em;
    font-size:1.5em;
}

/*
SOCIALS
*/
#socials{
    position:fixed;
    right:0;
    z-index: 5;
}
#socials a{
    display: block;
    width:100%;
}
#socials a img{
    width:100%;
}

/*
LANGUAGES
*/
#langs .container{
    width:100%;
}
#langs .col{
    text-align: center;
}
#langs .col p{
    margin:0;
    width:90%;
    margin:5px 5%;
}
#langs .col span{
    display: inline-block;
    width:100%;
    font-size:1.0em;
    padding:0.5em 1.5em;
    background-color: #f3f3f3;
    cursor: pointer;
    
}

/*
FOOTER
*/
footer{
    margin-top:5.0em;
    position:relative;
    color:#fff;
    background-color:#000;
    /*background-image: url("../img/bg/tsutsuji_gold.jpg");*/
    background-size: cover;
}
footer .logo img{
    height:50px;
}
footer .hokosha_link img{
    height:50px;
    padding:10px;
    opacity: 0.1;
}
footer .logo copy_right{
    padding:10px;
}