@font-face {
    font-family: 'Roobert';
    src: url('../font/roobert-bold-webfont.woff2') format('woff2'),
         url('../font/roobert-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: bold;

}


@font-face {
    font-family: 'Roobert';
    src: url('../font/roobert-medium-webfont.woff2') format('woff2'),
         url('../font/roobert-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body, html {
	margin   			: 0;
	padding  			: 0;
	width 	 			: 100%;
	height 	 			: 100%;
	/*overflow 			: hidden;*/
}

body {
	font-family: 'Roobert', sans-serif;
	font-weight: normal;
	color 	: white;
}


body * {
	box-sizing 	: border-box;
}

nav {
	margin: 0;
	padding: 56px;
}

h1 {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.20em;
	margin: 0;
}

h2 {
	font-weight: normal;
	font-size: 36px;
}

main {
	position: absolute;
	left : 10vw;
	top  : 	50%;
	transform: translateY(-50%);
}

footer {
	position: absolute;
	left: 56px;
	bottom: 56px;
}

.button  {
	background 	: white;
	color 	 		: black;
	border-radius: 1000px;
	text-decoration: none;
	position: relative;
	line-height: 40px;
	display: inline-block;
	font-size: 16px;
	transition 	: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);;
}

.button .text {
	margin: 16px 24px 16px 48px;
	transition 	: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);;
}

.button .ico {
	background: black;
	border-radius: 1000px;
	border: 3px solid white;
	position: absolute;
	top 	: 0;
	width: 40px;
	bottom: 0;
	left: 0;
	transition 	: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);;
}

.button .ico svg {
	position: absolute;
	top : 50%;
	left: 50%;
	background: none;
	transform : translateX(-50%) translateY(-50%);
}

.button:hover .ico {
 	left 	: calc(100% - 40px);
 	background: white;
 	border-color: black;
}

.button:hover .ico path {
	fill: black;
}

.button:hover .text {
	margin-left: 16px;
	margin-right: 48px;
}

.button:hover {
	background: black;
	color: white;
}

@media screen and (max-width: 600px) {
		body {
			background 	: url(../images/backdrop_mobile.jpg) no-repeat center;
			background-size 	 		: cover;
		}
		nav {
			padding: 32px;
		}
		footer {
			left: 32px;
		}
}

@media screen and (min-width: 600px) {
		body {
			background 	: url(../images/backdrop_1.jpg) no-repeat center;
			background-size 	 		: cover;
		}
}