/* header.css */

/* header parts */
/*--------------------------------------*/
#wrapper {
}

#header {
    position:fixed;
    top:0;
    width:100%;
    height:80px;
    background-color:rgba(255,255,255,0.75);
    margin:0;
    padding:0;
    text-align:center;
    z-index:101;
}

#headerInner {
    position:relative;
    width:100%;
    max-width:1200px;
    height:80px;
    margin:0 auto;
    padding:0;
    transition:all .5s ease;
    display: flex;
}


/* logo */
#logo {
    position:relative;
    float:left;
    width:23%;
    max-width:256px;
    height:80px;
    margin-left:25px;
    z-index:10;
    transition:all .3s ease;
}
#logo img {
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    max-width:100%;
    margin:auto;
}



/* main navigation */
#navigation {
    /*! float:right; */
    width:65%;
    /*! padding-right:7%; */
}

#navigation ul {
    width:100%;
    height:80px;
    margin:auto;
    text-align:right;
    letter-spacing:-0.5em;
}
#navigation ul li {
	position: relative;
	display: inline-block;
	margin: 0 0 0 1.5em;
	vertical-align: middle;
	text-align: center;
	line-height: 80px;
	font-size: 1.0em;
	font-weight: bold;
	letter-spacing: normal;
	transition: all .3s ease;
}
#navigation ul li:nth-child(2) {
    margin:0;
}
#navigation ul li.top {
    display:none;
}
#navigation ul li a,
#navigation ul li a:visited {
    color:#000000;
    text-decoration:none;
}
#navigation ul li a:hover,
#navigation ul li a:active {
    color:#999999;
}

/* current */
body#top #navigation ul li.top a,
body#about #navigation ul li.about a,
body#service #navigation ul li.service a,
body#products #navigation ul li.products a,
body#news #navigation ul li.news a,
body#shop #navigation ul li.shop a,
body#company #navigation ul li.company a {
    color:#999999;
}


/* contact */
#navigation ul li.contact {
    margin:0 0 0 2em;
    font-family:'Abel',sans-serif;
    font-size:1.2em;
}
#navigation ul li.contact a,
#navigation ul li.contact a:visited {
    display:block;
    background-color:#201011;
    padding:0 1em;
    color:#ffffff;
}
#navigation ul li.contact a:hover,
#navigation ul li.contact a:active {
    background-color:#aaaaaa;
    color:#000000;
}



/* lang navigation */
ul#lang {
	width: 8%;
	padding: 0em 0% 0% 1%;
	text-align: right;
	display: flex;
	flex-wrap: wrap;
	gap: 0 5px;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
ul#lang li {
    width:100%;
    color:#7d7d7d;
    font-family:'Abel',sans-serif;
    text-align:center;
    line-height:2.0;
    font-size:1.2em;
    font-weight:bold;
    transition:all .3s ease;
}
ul#lang li {
	width: 46%;
}
ul#lang li:first-child {
    border-bottom:1px solid #7d7d7d;
}
ul#lang li:nth-child(3) {
    border-bottom:1px solid #7d7d7d;
}
ul#lang li a,
ul#lang li a:visited {
    color:#000000;
    text-decoration:none;
}
ul#lang li a:hover,
ul#lang li a:active {
    color:#7d7d7d;
}


/* header change */
#header.change,
#header.change #headerInner,
#header.change #logo,
#navigation ul {
    height:54px;
}
#header.change #navigation ul li {
    line-height:54px;
}
#header.change ul#lang {
	padding: 0 0% 0 1%;
}
#header.change ul#lang li {
	font-size: 1.0em;
	line-height: 1.8;
}


/* - 1200px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 1200px) {
ul#lang {
	width: 10%;
	align-items: center;
}
ul#lang li {
	width: calc(55% - 22px);
}
/* logo */
#logo {
    width:20%;
}

/* main navigation */
#navigation {
    width:76%;
}

#navigation ul li {
    margin:0 0 0 2em;
}


}
/* - 1200px end */



/* - 1100px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 1100px) {


/* main navigation */
#navigation {
}
#navigation ul li {
    margin:0 0 0 1.5em;
}


/* contact */
#navigation ul li.contact {
    font-size:1.em;
}
#navigation ul li.contact a,
#navigation ul li.contact a:visited {
    padding:0 0.5em;
}


/* lang navigation */
ul#lang {
	width: 10%;
	padding: 0.8em 0% 0;
}
ul#lang li {
    font-size:1.0em;
}




@media only screen and (max-width: 975px) {
#navigation ul li {
	margin: 0 0 0 0.5em;
}
}


}
/* - 1100px end */



/* - 940px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 940px) {


/* logo */
#logo {
    width:16%;
}

/* main navigation */
#navigation {
    width:80%;
}
#navigation ul li {
    font-size:0.9em;
}

ul#lang li {
	width: calc(60% - 22px);
}




}
/* - 940px end */



/* - 860px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 860px) {
ul#lang li:first-child {
	padding: 0 5px;
}
ul#lang li:not(:last-child) {
	border-right: 1px solid #7d7d7d;
	border-bottom: 0;
	padding: 0 5px;
}
ul#lang li:nth-child(2) {
	border-bottom: 0;
}
/* logo */
#logo {
    position:absolute;
    top:10px;
    width:25%;
    height:auto;
    margin-left:2%;
}
#logo img {
    position:static;
}

/* main navigation */
#navigation {
    float:none;
    width:100%;
    margin:0 auto;
    padding-right:0;
}

#navigation ul {
    position:relative;
    height:auto;
    padding-top:3.5em;
    text-align:center;
}
#navigation ul li {
    margin:0 1.5em;
    text-align:center;
    line-height:1.4;
}

/* contact */
#navigation ul li.contact {
    position:absolute;
    top:0;
    right:0;
    margin:0;
    line-height:2.8;
    font-size:1.0em;
}
#navigation ul li.contact a,
#navigation ul li.contact a:visited {
    padding:0 1.5em;
}


/* lang navigation */
ul#lang {
	position: absolute;
	top: 0;
	right: 7.5em;
	width: auto;
	padding: 0.5em 0 0;
	letter-spacing: -0.5em;
	display: flex;
	white-space: nowrap;
	flex-wrap: nowrap;
	flex-direction: initial;
}
ul#lang li {
    display:inline-block;
    width:50%;
    line-height:1.6;
    font-size:1.2em;
    letter-spacing:normal;
}
ul#lang li:first-child {
    border-right:1px solid #7d7d7d;
    border-bottom:0;
}


/* header change */
#header.change #logo {
    top:3px;
    width:20%;
    height:auto;
}
#header.change #navigation ul {
    padding-top:2.0em;
}
#header.change #navigation ul li {
    line-height:1.6;
}
#header.change #navigation ul li.contact {
    line-height:1.8;
}
#header.change ul#lang {
    padding:0;
}
#header.change ul#lang li {
    line-height:1.4;
    font-size:1.0em;
}



}
/* - 860px end */





/* - 750px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 750px) {


/* burger menu */
#toggle {
    position:absolute;
    top:18px;
    right:0;
    cursor:pointer;
    z-index:3;
}

#toggle,
#toggle span {
    display:inline-block;
    transition:all .4s;
    box-sizing:border-box;
}
#toggle div {
    position:relative;
    width:60px;
    height:20px;
    transition:all .3s ease;
}
#toggle div span {
    position: absolute;
    left:0;
    width:100%;
    height:2px;
    background-color:#ffffff;
}
#toggle div span:nth-of-type(1) {
    top:0;
}
#toggle div span:nth-of-type(2) {
    top:9px;
}
#toggle div span:nth-of-type(3) {
    bottom:0;
}


/* #toggle animation */
.open #toggle span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}
.open #toggle span:nth-of-type(2) {
  opacity: 0;
}
.open #toggle span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}


body.open {
    overflow-y:hidden;
}

nav {
	position: absolute;
	top: -1200px;
	width: 100%;
	background: #9a000b;
	margin: 0;
	padding: 0;
	z-index: 101;
	transition: all .5s ease-in-out;
	font-size: 1.2em;
	left: 0;
}
/* slide down */
.open nav {
    /* height */
    -moz-transform:translateY(1260px);
    -webkit-transform:translateY(1260px);
    transform:translateY(1260px);
}


/* header parts */
/*--------------------------------------*/
#wrapper {
    padding-top:60px;
}

#header {
    height:60px;
    background-color:rgba(0,0,0,0.7);
}

#headerInner {
    width:100%;
    height:60px;
    margin:0;
    padding:0;
}

#logo {
    position:relative;
    top:0;
    width:38%;
    max-width:322px;
    height:60px;
    margin-left:3%;
    padding:0;
}
#logo img {
    position:absolute;
}


/* navigation */
/*--------------------------------------*/

/* main navigation */
#navigation {
    float:none;
    width:100%;
    margin:0;
    padding:0;
}

#navigation ul {
    position:static;
    background:#9a000b;
    padding:1.5em 0 0;
    -webkit-overflow-scrolling:touch;
}
#navigation ul li {
    display:block;
    width:100%;
    background-color:#9a000b;
    margin:0;
    padding:0.7em 0;
    text-align:center;
    line-height:1.4;
    font-size:1.0em;
    font-weight:normal;
}
#navigation ul li.top,
#navigation ul li.company {
    display:block;
}
#navigation ul li a,
#navigation ul li a:visited {
    display:block;
    width:100%;
    color:#ffffff;
}


/* contact */
#navigation ul li.contact {
    position:static;
    margin-top:1em;
    line-height:1.4;
}
#navigation ul li.contact a,
#navigation ul li.contact a:visited {
    width:54%;
    max-width:400px;
    margin:0 auto 2em;
    padding:2em 0;
}


/* lang navigation */
ul#lang {
    top:16px;
    right:70px;
    width:14em;
    margin:auto;
    padding:0;
    transition:all .3s ease;
}
ul#lang li {
    line-height:1.2;
    font-size:1.6em;
    font-weight:normal;
}
ul#lang li a,
ul#lang li a:visited {
    color:#ffffff;
}


/* header change */
#header.change,
#header.change #headerInner,
#header.change #logo {
    height:46px;
}
#header.change #logo {
    top:0;
    width:38%;
}
#header.change #navigation ul li {
    line-height:1.4;
}
#header.change #navigation ul li.contact {
    line-height:1.4;
}
#header.change ul#lang {
    top:10px;
    padding:0;
}
#header.change ul#lang li {
    line-height:1.2;
    font-size:1.6em;
}
#header.change #toggle {
    top:12px;
}
#header.change #toggle div {
    width:50px;
}
.open #header.change nav {
    -moz-transform:translateY(1246px);
    -webkit-transform:translateY(1246px);
    transform:translateY(1246px);
}
.open #header,
.open #header.change {
    background-color:#9a000b;
}

/* logo change */
.open #logo a {
    display:block;
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    height:0;
    background:url("../images/logo_open.png") no-repeat center top;
    background-size:contain;
    margin:auto;
    padding-top:16.15%;
    transition-property:background;
}
.open #logo img {
    display:none;
}




}
/* - 750px end */



/* - 480px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 480px) {


#toggle div {
    width:40px;
}

#logo {
    width:48%;
}


#navigation ul li {
    font-size:0.9em;
}

/* contact */
#navigation ul li.contact {
    font-size:1.0em;
}

/* lang navigation */
ul#lang {
	right: 45px;
	width: auto;
}
ul#lang li {
    font-size:1.2em;
}






/* header change */
#header.change ul#lang {
    top:10px;
}
#header.change ul#lang li {
    font-size:1.2em;
}
#header.change #toggle {
    top:12px;
}
#header.change #toggle div {
    width:40px;
}





}
/* - 480px end */

/* none lang */
/*-------------------------------------------------------------*/
/**
ul#lang {display:none;}

#navigation {
    padding-right:0;
}

@media only screen and (max-width: 1100px) {
#navigation {
    padding-right:0;
}
}
**/
/*-------------------------------------------------------------*/