@charset "UTF-8";
@import url("https://use.typekit.net/gtj3ozp.css");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*:before
*:after{box-sizing:border-box
}
html,body{
	height:calc(100vh - 200px);
	position: relative;
	background-color:#0B0B0B;
}
a { color: whitesmoke}
h1 {
	color: #000000;
	font-size: 2em;
	letter-spacing: 0em;
	font-family:"garamond-atf-subhead", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-display:auto;font-style:normal;font-weight:600;
	
}
h2 {
	font-family:"garamond-atf-subhead", Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-display:auto;font-style:normal;font-weight:600;
	font-size: 1.25em
	
}
h3{
	font-family:"Junicode-BoldCondensed";
	font-size: 4vh;
	font-display:auto;font-style:normal;font-weight:600;
}
h4{
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: clamp(1rem, 1vw, 4rem);
	font-display:auto;font-style:normal;font-weight:normal;
}
p{
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 1em;
	font-display:auto;font-style:normal;font-weight:400;
	}
.page_container{
	min-height: 100vh;
	overflow: hidden;
 	display: block;
	position: relative;
	padding-bottom: 10em
}
html footer{
	position: absolute;
	display: block;
	bottom: 0;
	width: 100%;

}
	.title {
	width: 100%;
	bottom: -5em;
	position: relative;
 	}	

.title_follow {
	display: block;
	width: 50%;
	top: 0.25em;
	left: 0.75em;
	
	padding: 0 0;
	position: fixed;
	z-index: 5;	
}

#title a{
	text-decoration: none;
}
.title_text{
	position: relative;
	float: left;
	top: 8vh;
	display: block !important;
	width: 75%;
	padding: 0;
	opacity: 1;
	background: none;	
	margin-left: 1.5%;
	padding-bottom: 2em;
	overflow:auto
}

.navigation	{
	position: fixed;
	float: left;
	top: 1.25em;
	display: block !important;
	width: 91.3%;
	padding: 3px 0 0 0.75%;
	opacity: 1;
	background: none;	
	margin-right: 2%;
	
}
.site-nav ul {
	list-style-type:none ;
	margin: 0;
	text-align: right;
}
.site-nav ul li {
	display: inline-flex;
	margin-bottom: 0;
	margin-left: 3%;
	margin-right: 0em
}
.site-nav ul li a {
	padding-bottom: 0em;
	text-decoration: none;
	letter-spacing: 0em;
	
	-webkit-transition: color .3s;
	transition: color .3s;
}
.site-nav ul li a:hover {
	outline: none;
	border-bottom: 1px solid black;
}
.footer-content	{
	position: relative;
	float: left;
	display: block !important;
	width: 100%;
	opacity: 1;
	background: none;
	top: 0;
}
.footer-details ul {
	list-style-type:none ;
	margin-left: 2%;
	top: 0em;
	text-align: left;
}
.footer-details ul li {
	display: inline-block;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 3%
}
.footer-details ul li a {
	font-size: 14px;
	padding-bottom: 0em;
	text-decoration: none;
	letter-spacing: 0em;
	
	color: #000000;
	-webkit-transition: color .3s;
	transition: color .3s;
}
.footer-details ul li a:hover {
	outline: none;
	border-bottom: 1px solid black;
}
.footer-legal{
	position: relative;
	float:right;
	text-align: right;
	bottom: 0;
	margin-right: 0.75%;
	font-size: 10px;
	width: 100%
}
aside{
	display: inline-block;
	float: right;
	width: 23.5%;
	padding-right: 1%;
	top: 6rem
	
}

.warning{
	text-align: justify;
	text-justify: inter-character;
	padding: 2em 0
}
.line_1{
	width: 100%
}
.project_name{
	font-size: 1.1em;
}
.container_1 {
	position: relative;
	float: left;
	top: 0;
	display: block !important;
	width: 70%;
	padding: 0em;
	text-align: left		
}
.container_1 a{
	text-decoration: none;
	color: #000000;
	-webkit-transition: color .3s;
	transition: color .3s;
}
.container_2{
	position: relative;
	float: left;
	top: 0;
	display: block !important;
	width: 30%;
	padding: 0 0 0 1%;
	text-align: left;
}
.container_2 a{
	text-decoration: none;
	color: #000000;
	-webkit-transition: color .3s;
	transition: color .3s;
}
.container_3{
	position: relative;
	float: left;
	top: 0;
	display: block;
	width: 50%;
	padding: 0 0% 0 0%;
	text-align: left;
}
.container_3 a{
	text-decoration: none;
	color: #000000;
	-webkit-transition: color .3s;
	transition: color .3s;
}
.container_4{
	position: relative;
	float: left;
	top: 0;
	display: block;
	width: 100%;
	padding: 0 0% 0 0%;
	text-align: left;
}
.container_4 a{
	text-decoration: none;
	color: #000000;
	-webkit-transition: color .3s;
	transition: color .3s;
}
.img_1{
	float: left;
	max-width: 100%;
	object-fit: contain;
	overflow: hidden;
	padding: 1% 1% 0 0;	
	
}

.img_2{
	width:100%;
	height:65vh;
	object-fit: cover;
	overflow: hidden;
	padding: 0  0 0 1%;
	float: right

}

.img_3{
	float: left;
	max-width: 50%;
	object-fit: contain;
	overflow: hidden;
	padding: 1% 1% 0 0;	
	
}
.line_2{
	margin:1em 0 0 0;
	float: left;
	width: 100%
}
.line_3{
	margin:1em 0 0 0;
	float: left;
	width: 100%
}
.line_4{
	margin:1em 0 0 0;
	float: left;
	width: 100%;	
}
.line_5{
	margin:1em 0 0 0;
	float: left;
	width: 100%;	
}



/* fonts */

@font-face {
  font-family: Junicode-BoldCondensed;
  src: url("fonts/Junicode-BoldCondensed.woff") format('woff');
}

/*Big*/

@media screen and (min-width: 48.1em){
	.mobilenav{
		display: none;
	}
	#n2{
		display: none;
	}
	#n1{
		display: inline;
	}
	#n4{
		display: none;
	}	
	#n3 {
		display: block;
	}
}
.info{
	position: fixed;
	padding-left: 1%;
	width: 100%;
	
}
.block_container{
	margin: 0% 8% 0% 12.5%;
}



/* small*/

@media screen and ( max-width : 48.1em ){
	
	.block_container{
	margin: 30% 0% 0% 0%;
}
	
	.info{
		position: relative;
		margin: 10% 0% 0% 4%;
		width: 100%;
		display: block !important;
	}
	.page_container{
	min-height: 100vh;
	overflow: hidden;
 	display: block;
	position: relative;
	padding-bottom: 10em
}
	html footer{
	position: absolute;
	display: block;
	bottom: 0;
		width: 100%;}	
	.title {
	width: 50%;
	top: 0.5em;
	left: 5%;
	bottom: -2em;
	padding: 0 0 ;
	position: relative;
		z-index: 5}	
	.footer-content{
	position: relative;
	float: left;
	display: block !important;
	width: 100%;
	text-align: center;
	opacity: 1;
	background: none;
	top: 0;
	}
	.footer-details ul {
	list-style-type:none ;
	margin-left: 3%;
	top: 0em;
	text-align: center;
		padding-bottom: 0.5em
}
	.footer-details ul li {
	display: inline-block;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 3%
}
	.footer-details ul li a {
	font-size: 1em;
	padding-bottom: 0em;
	text-decoration: none;
	letter-spacing: 0em;
	color: #000000;
	-webkit-transition: color .3s;
	transition: color .3s;
}
	.footer-details ul li a:hover {
	outline: none;
	border-bottom: 1px solid black;
}
	.footer-legal{
	position: relative;
	float:right;
	width: 100%;
	text-align: center;
	bottom: 0;
	margin-right: 0%;
	font-size: 10px;
		padding-bottom: 2em
	}
	.mobilenav{
		position: fixed;
		width: 100%;
		z-index: 3;
		background-color: #0B0B0B;
		height: 3em
	}
	.mobilenav ul {
  		margin: 2.5%;
 		padding: 3em 0 0 0;
  		list-style-type: none;
		overflow:hidden;
		background-color: #0B0B0B;
	}
	.mobilenav ul li a {
  		display:block;
		background-color: #0B0B0B;
  		padding: 1em 1em;
		font-size: 1em;
		text-decoration: none;
		letter-spacing: 0em;
		color: whitesmoke;
		-webkit-transition: color .3s;
		transition: color .3s;
	}
	.mobilenav ul li a:hover {
  		text-decoration:underline;
		background-color: #0B0B0B;
		
}
	.mobilenav .menu {
  		clear: both;
 		max-height: 0;
 		transition: max-height .2s ease-out;
		background-color: #0B0B0B;
}
	.mobilenav .menu-icon {
  		cursor: pointer;
  		display: inline-block;
  		float: right;
  		padding: 2.25em 5% 0 0;
  		position: relative;
  		user-select: none;
}
	.mobilenav .menu-icon .navicon {
  		background: #000000;
 		display: block;
 		height: 2px;
 		position: relative;
  		transition: background .2s ease-out;
  		width: 1em;
}
	.mobilenav .menu-icon .navicon:before,
	.mobilenav .menu-icon .navicon:after {
 		background: #000000;
 		content: '';
 		display: block;
 		height: 100%;
 		position: absolute;
 		transition: all .2s ease-out;
 		width: 100%;
}
	.mobilenav .menu-icon .navicon:before {
  		top: 5px;
}
	.mobilenav .menu-icon .navicon:after {
 		top: -5px;
}
	.mobilenav .menu-btn {
  		display: none;
}
	.mobilenav .menu-btn:checked ~ .menu {
  		max-height: 240px;
}
	.mobilenav .menu-btn:checked ~ .menu-icon .navicon {
  		background: transparent;
}
	.mobilenav .menu-btn:checked ~ .menu-icon .navicon:before {
  		transform: rotate(-45deg);
}
	.mobilenav .menu-btn:checked ~ .menu-icon .navicon:after {
  		transform: rotate(45deg);
}
	.mobilenav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
	.mobilenav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
 		top: 0;
}
	.navigation{
		display: none;
	}
	.site-nav{
		display: none;
	}
	h3 {
		font-size: 1.5em
	}
	
	
	aside{
	float: left;
	width: 100%;
		left: 1%;
		top: 0%;
		
	
}
	#n2{
		display: inline;
	}	
	#n1 {
		display: none;
	}
		#n4{
		display: block;
	}	
	#n3 {
		display: none;
	}
	.title_text{
		position: relative;
		float: left;
		top: 0vh;
		display: block!important;
		width: 90%;
		padding: 0em;
		opacity: 1;
		background: none;	
		margin-left: 5%;
		padding-bottom: 2em;
		overflow:auto	
	}
	.line_1{
		display: flex;
		flex-direction: column;
	}
	.container_1 {
		position: relative;
		float: left;
		top: 0;
		display: block !important;
		width: 100%;
		padding: 0em;
		text-align: left;
		order: 1
	}
	.container_2 {
		position: relative;
		float: left;
		top: 0;
		display: block !important;
		width: 100%;
		padding: 1em 0 0 0;
		text-align: left;
		order: 2	
	}
	.img_2{
		width:100%;
		height:60vh;
		object-fit: cover;
		overflow: hidden;
		padding: 0;
	}
	
}








/*small landscape*/

@media screen and ( orientation : landscape ) and ( max-width : 48.1em ){
		
	.block_container{
	margin: 0% 0% 0% 0%;
}
	
	.img{
	width:100%;
	height:50vh;
	object-fit: none;
	overflow: hidden
	}
	.page_container{
	min-height: 100vh;
	overflow: hidden;
 	display: block;
	position: relative;
	padding-bottom: 10em
}
html footer{
	position: absolute;
	display: block;
	bottom: 0;
	width: 100%;

}
}