@font-face {
    font-family: 'Avenir Rounded';
    src: url("../fonts/AvenirNextRoundedPro-Demi.otf");
}
@font-face {
    font-family: 'Avenir Regular';
    src: url("../fonts/AvenirNextRoundedPro-Reg.ttf");
}

body{
	margin: 0;
	background-color: #3392ca;
	font-family: 'Avenir Regular';
}

html, body{
	width: 100vw;
	height: 100vh;
	position: fixed;
	overflow: hidden;
	background-image: url('../images/background.png');
    background-size: cover;
    background-position: center center;
}


.logo-header{

	margin: auto;
	display: block;
}

.logo-header__wrapper{
	padding-top: 50px;
}

.button{
	width: auto;
	height: auto;
	padding: 20px 40px;
	font-size: 21px;
	line-height: 33px;
	color: white;
	text-align: center;
}
.button p{
	margin: 0;
}
.button .underline{
	text-decoration: underline;
}
.button strong{	
	font-family: 'Avenir Rounded'
}
.button__wrapper{
	width: 420px;
	height: 140px;
	background-color: #49baff;
	border: 4px white solid;
	border-radius: 70px;
	display: inline-block;
	margin: 20px;
	text-decoration: none;
}
.button__wrapper.centered{
	left: 50%;
    position: relative;
    transform: translateX(-60%);
}

.content{
	display: block;
	margin: auto;
	width: 940px;
	
    text-align: center;
}

.content__wrapper{
	padding-top: 0;
}

@media (max-height: 940px) and (orientation: landscape) {
	.content {
		width: auto;
		text-align: center;
	}
	.button__wrapper{
		margin: 10px;		
		height: 85px;	
		width: 300px;
    	position: relative;	        	
	}

	.button{
		padding: 10px;		
		line-height: 22px;
		font-size: 17px;
	}
	.button__wrapper.right{
		/*float: right;*/
		/*transform: translateX(-100%);*/
	}

	.button__wrapper.centered{
		left:0;
		transform: none;
		/*transform: translateX(-100%);*/
	}
}

@media (max-width: 940px) and (orientation: portrait) {
    .content{	
		width: 100vw;
		left: 50%;
	    transform: translateX(-50%);
	    position: relative;
	    margin: 0;
	}
	.button__wrapper{
		margin: 10px 0;
		width: 95vw;	
		height: 105px;	
		max-width: 500px;		
    	position: relative;
	    left: 50%;
    	transform: translateX(-50%);
	}
	.button__wrapper.right{
		float: none;		
	}

	.button__wrapper.centered{
		transform: translateX(-50%);		
		transform: translateX(-50%);		
	}

	.button{
		/*padding: 10px 0;		*/
		line-height: 22px;
		font-size: 17px;
	}
}

@media (max-width: 360px) {

	.button{		
		line-height: 22px;
		font-size: 17px;
		padding: 20px 0;
	}
}

@media (max-height: 360px) and (orientation: landscape){
	.content__wrapper{
		padding-top: 0;
	}

	.button{		
		line-height: 22px;
		font-size: 17px;
		padding: 10px;
	}
	.button__wrapper.right{			
		width: auto;
	}
	.logo-header__wrapper{
		padding-top: 20px;
	}
}

@media (max-height: 320px) and (orientation: landscape){

	.button{		
		line-height: 22px;
		font-size: 17px;
		padding: 10px;
	}	
}