@charset "UTF-8";

/* general */

body {
	font-family: SSV, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1.5;
	text-align: justify;
	text-justify: inter-word;
	color: #000;
	background-color: #425566;
}
em  {
	font-style: italic;
}
::selection {
	color: rgba(0, 0, 0, 0.5);
	background: #52afcc;
}

/* toggle nav */

#toggle-side-nav {
	width: 30px;
	height: 15px;
	position: fixed;
	top: auto;
	bottom: 30px;
	right: 30px;
	padding: 0px;
	z-index: 7;
	cursor: pointer;
}
#toggle-side-nav-background {
	width: 100vw;
	height: 75px;
	position: fixed;
	top: auto;
	bottom: 0;
	right: 0;
	z-index: 5;
	background-color: #425566;
	display: block;
}
#top-bar,
#middle-bar,
#bottom-bar {
	width: 30px;
    height: 2px;
    position: absolute;
    left: 0;
	background-color: #000;
	transition: 0.5s ease;
}
#top-bar {
	transform: rotate(0deg);
	margin-top: 0;
}
#middle-bar {
	margin-top: 6.5px;
}
#bottom-bar {
	transform: rotate(0deg);
	margin-top: 13px;
}

/* side nav */

#side-nav {
	width: 0px;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	transition: 0.5s ease;
	background-color: #FFF;
	overflow: hidden;
	z-index: 6;
}
#side-nav .logotype-sv {
	width: 129px;
	height: 100px;
	position: absolute;
	top: calc(25vh - 50px);
	left: calc(50vw - 65px);
	right: auto;
}
#side-nav .logotype-sv img {
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
}
#side-nav .company {
	width: 100vh;
	height: auto;
	position: absolute;
	top: calc(50vh - 10px);
	right: calc(-50vh + 10px);
	transform: rotate(-90deg);
	font-size: 10px;
	line-height: 1;
	color: #425566;
}
#side-nav .lang {
	width: 75px;
	height: auto;
	position: absolute;
	top: 30px;
	right: 30px;
	line-height: 18px;
	text-align: right;
	color: #425566;
}
#side-nav .website-nav {
	width: calc(100vw - 60px);
	height: auto;
	position: absolute;
	top: 50vh;
	left: 30px;
	right: auto;
	padding: 0px 0vw 0px 0vw;
	color: #425566;
	display: block;
}
#side-nav .policy {
	width: 100vw;
	height: auto;
	position: absolute;
	bottom: 0;
	right: 0;
}

/* content */

.logotype {
	width: calc(100vw - 4px);
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 4;
}
.logotype img {
	width: 100%;
	height: auto;
	position: absolute;
	display: block;
	padding: 2px 2px 15px 2px;
	background-color: #425566;
}
.pictogram {
	width: 75px;
	height: 100px;
	position: absolute;
	top: calc(25vh - 50px);
	left: calc(50vw - 37.5px);
	z-index: 3;
}
.pictogram img {
	width: auto;
	height: 100%;
	position: absolute;
	display: block;
}
.instagram {
	width: 100px;
	height: auto;
	position: absolute;
	top: 12.5vh;
	left: 30px;
	right: auto;
	line-height: 13px;
	text-align: left;
	z-index: 3;
}
.main {
	width: 100vw;
	height: auto;
	position: absolute;
	top: 50vh;
}
.section {
	width: 100vw;
	height: auto;
	position: relative;
	top: auto;
}
.section.right {
	margin-top: 0;
	left: 0;
}
.section.right img,
.section.right video {
	width: auto;
	height: auto;
	max-width: 100vw;
	max-height: calc(100vh - 150px);
	position: relative;
	margin: 0 auto 5px auto;
	display: block;
}
.chapter {
	width: 100%;
	height: auto;
	position: relative;
	top: auto;
	margin-bottom: 60px;
	line-height: 1.5;
	text-align: center;
}
.cit {
	width: calc(100% - 60px);
	height: auto;
	position: relative;
	top: auto;
	margin-bottom: 60px;
	padding: 0px 30px 0px 30px;
	font-size: 15px;
	font-style: italic;
	text-align: right;
}
.text {
	width: calc(100% - 60px);
	height: auto;
	position: relative;
	top: auto;
	padding: 0px 30px 25vh 30px;
}
.text.index {
	text-align: left;
}
.text .manifesto {
	text-align: left;
}
.info {
	width: calc(100% - 60px);
	height: auto;
	position: relative;
	margin-top: auto;
	padding: 0px 30px 0 30px;
}
.gallery {
	margin: 60px 0 0 0;
	padding: 0 0 calc(50vh - 15px) 0;
}
.back {
	width: calc(100% - 60px);
	height: auto;
	position: relative;
	margin-top: 55px;
	padding: 0px 30px 0 30px;
}

/* links */

a  {
	transition: 1s ease;
}
a:link,
a:visited {
	color: #000;
	background-color: transparent;
	text-decoration: none;
	opacity: 0.5;
}
a:hover {
	color: #000;
	background-color: transparent;
	text-decoration: none;
	opacity: 1;
}
.logotype a:link,
.logotype a:visited {
	opacity: 1;
}
.logotype a:hover {
	opacity: 0.5;
}
.instagram a:link,
.instagram a:visited,
#side-nav a:link,
#side-nav a:visited {
	opacity: 1;
}
.instagram a:hover,
#side-nav a:hover {
	opacity: 0.5;
}
#down a:link,
#down a:visited,
#down a:hover {
	opacity: 1;
}

/* fonts */

@font-face {
	font-family: SSV;
	src: url("../fonts_v001/GT America/GT-America-Regular.otf");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: SSV;
	src: url("../fonts_v001/GT America/GT-America-Regular-Italic.otf");
	font-weight: normal;
	font-style: italic;
}