html {
	height: 100%;
	overflow: hidden;

}

body {
    width: 100%;
    height: 100%;
	overflow: auto;	
    
    background-image: url(../images/logos-sketch.jpg);
    background-size: cover;
    background-attachment: fixed;
    
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: center;

	font-family: Rubik;
	font-variation-settings: 'wdth' 400, 'wght' 98;

}


/* header */

header {
	display: none;
}

@media only screen 
	and (min-width: 760px) 
	and (orientation: landscape){

	header {
		display: block;
	}

	.header-logo {
		position: fixed;
		top: 20rem;
		left: 20rem;
		padding: 4rem;
		width: 58rem;
		height: 58rem;
	}

	.header-logo img {
		width: 50rem;
		height: 50rem;

	}

	a.header-logo {
		transition: background-color 0.5s ease;
		background-color: rgba(52, 58, 67, 0);
	}

	a.header-logo:hover, 
	a.header-logo:focus {
		background-color: rgba(52, 58, 67, 1.0);
	}

}




/* info box */ 

.flexbox-container {
}

.flexbox-item {
	max-width: 100%;
	padding: 10%;	
}

@media only screen 
	and (min-width: 760px) 
	and (orientation: landscape){

	.flexbox-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: auto;
		margin: 0;
		min-height: 100%; 
	}

	.flexbox-item {
		max-width: 70%;
		padding: 0;
	}

	.fixed {
		flex: none;
		max-width: 70%;
	}

}



/* content */

content {
    background-image: url(../images/artcoded-logo-white.svg);
    background-repeat: no-repeat;
    
    background-size: 240rem;
    background-position: -23rem 0;
	    
    max-width: 100%;
    padding: 290rem 10rem 10rem;
	box-sizing: border-box;
	text-align: left;
	display: block;
	position: relative;
}

content h1, 
content h2, 
content p { 
	display: block;
}

content h1, 
content h2 {
	margin: 0;
	padding: 0;
}

content h1 {
	font-weight: 900;
	font-variation-settings: 'wdth' 400, 'wght' 900;
	font-size: 22rem;
	line-height: 90%;
}

content h2 {
	font-weight: 400;
	font-variation-settings: 'wdth' 400, 'wght' 300;
	font-size: 14rem;
}

content p { 
	font-weight: 100;
	font-variation-settings: 'wdth' 400, 'wght' 300;
	font-size: 30rem;
	margin: 30rem 0 20rem;
	line-height: 100%;
	word-break: break-word;
}

footer {
	padding-top: 10rem;
	padding-left: 11rem;
	text-align: left;
}


@media only screen 
	and (min-width: 960px) 
	and (orientation: landscape){

	content {
	    background-size: 270rem;
	    background-position: 10rem 8rem;

	    min-height: 295rem;
	    max-width: 960rem;
		text-align-last: left;

		padding: 30rem 50rem 20rem 350rem;
		font-weight: 300;
		font-size: 22rem;

		border: 10rem solid #fff;

	}

	content:before {
		content: ' ';
		display: block;
		position: absolute;
		top: 0;
		left: 290rem;
		border-left: 10rem solid #fff;
		width: 1px;
		height: 100%;
	}

	content h1 {
		font-size: 28rem;
	}

	content h2 {
		font-size: 20rem;
	}

	footer {
		padding-top: 12rem;
		padding-left: 0;
		text-align: right;
	}



	/* link fx */

	a.hfx {
		position: relative;
		text-decoration: none;
		padding-bottom: 8px;
		margin-right: 7rem;
	}

	a.hfx:before, a.hfx:after {
		content: '';
		position: absolute;
		bottom: 2px;
		left: 0;
		right: 0;
		height: 2px;
		background-color: #FFF;
	}

	a.hfx:before {
		opacity: 0;
		-webkit-transform: translateY(-8px);
		transform: translateY(-8px);
		-webkit-transition: opacity 0s, -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: opacity 0s, -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
		transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s, -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	a.hfx:after {
		opacity: 0;
		-webkit-transform: translateY(4px);
		transform: translateY(4px);
		-webkit-transition: opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
		transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	a.hfx:hover:before, a.hfx:hover:after, a.hfx:focus:before, a.hfx:focus:after {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	a.hfx:hover:before, a.hfx:focus:before {
		-webkit-transition: opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
		transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	a.hfx:hover:after, a.hfx:focus:after {
		-webkit-transition: opacity 0s 0.2s, -webkit-transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: opacity 0s 0.2s, -webkit-transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
		transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s, -webkit-transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

}