/* Table Of Contents
 1.) Media Query for Desktop
 2.) Media Query for Tablet
 3.) Media Query for mobile
 3.) Media Query for retina
 ===============================================*/

/* 1.) Media Query for Desktop ===============================*/

@media only screen and (min-width: 768px) {
	#wrapper { background:url("../../graphics/desk-bg.jpg") no-repeat center top /cover; height:100vh }
	.logo { padding:19px 0 24px }
	.content-info { padding:44px 0 62px; text-align:center }
	h1 { font-size:5.5rem; margin-bottom:26px }
	p { font-size:2.4rem; letter-spacing:0.1px; line-height:31px; padding:22px 85px 28px }
	#content span { font-size:3.5rem }
	.button { font-size:2.6rem; letter-spacing:0; line-height:1.1; padding:8px 46px; display:inline-block }
	#footer { text-align:center; padding:22px 0 17px }
	#footer a { display:inline-block; margin:0 0.7% }
}


/* 2.) Media Query for Tablet ===============================*/

@media only screen and (min-width : 768px) and (max-width : 991px) {
	#wrapper { padding:0 }
	h1 { margin-bottom:21px }
	.content-info { padding:44px 0 47px }
	#content span { line-height:32px; padding:0 9% }
	p { padding:6px 10% 18px }
}

@media only screen and (max-width : 767px) {
	.no-padding-xs { padding-left:0; padding-right:0 }
	.no-margin-xs { margin-left:0; margin-right: 0 }
}


/* 3.) Media Query for Retina ===============================*/

@media all and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 768px) {
	#wrapper { background:url("../../graphics/desk-bg@2x.jpg") no-repeat center top }
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 767px){
	#wrapper { background:url("../../graphics/bg-mobile@2x.jpg") no-repeat center top }
}