/* fonts */
@font-face {
	font-family: 'Poppins Regular';
	src: url('fonts/poppins-regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Poppins Bold';
	src: url('fonts/poppins-bold.ttf') format('truetype');
}

@font-face {
	font-family: 'Poppins Regular';
	font-weight: bold;
	src: url('fonts/poppins-bold.ttf') format('truetype');
}

@font-face {
	font-family: 'Poppins Medium';
	src: url('fonts/poppins-medium.ttf') format('truetype');
}

@font-face {
	font-family: 'Roboto Regular';
	src: url('fonts/roboto-regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Roboto Black';
	src: url('fonts/roboto-black.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto Regular';
	font-weight: bold;
	src: url('fonts/roboto-black.woff2') format('woff2');
}

/* reset */
* {
	font-family: 'Poppins Regular', sans-serif;
	font-size: 18px;
	line-height: 26px;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

article {
	margin: auto;
	max-width: 525px;
	background: url('images/Rectangle.png') no-repeat;
    background-size: cover;
}

header {
	display: grid;
	grid-gap: 17px;
	grid-template-columns: 24.14vw auto;
	grid-template-rows: 24.14vw auto;
	height: 214.235vw;
	padding: 13.55vw 4.106vw 0;
}

header > img {
	grid-column: 1;
	height: 105.41px;
	width: 250px;
    margin-left: 10px;
}

header h1 {
	align-self: center;
	color: #fff;
	font-family: 'Poppins Medium', sans-serif;
	font-size: 8.44vw;
	font-weight: normal;
	grid-column: 2;
	line-height: 7.72vw;
	width: 125px;
}

header .info {
	grid-column: 1 / span 2;
	padding: 1vw 0 0 7.96vw;
  z-index: 1;
}

header h2 {
	color: #fff;
	font-family: 'Poppins Medium', sans-serif;
	font-size: 6.03vw;
	font-weight: normal;
}

header .info ul {
	list-style-position: inside;
	margin: 6.03vw 0 7.95vw;
}

header .info li {
	color: #fff;
	font-size: 16px;
}

header .info p {
	color: #fff;
	font-family: 'Poppins Medium', sans-serif;
	font-size: 5vw;
	font-weight: normal;
	margin-bottom: 5.5vw;
}

header .apple-store {
	height: 11.1vw;
	margin-right: 3.85vw;
	width: 33vw;
}

header .google-play {
	height: 11.1vw;
	width: 36.7vw;
}

main {
	color: #fff;
	position: relative;
}

main .diagonal {
	background: url('images/diagonal.png?rev=1') no-repeat center bottom;
	background-size: cover;
	bottom: 185vw;
	height: 110vw;
	position: absolute;
	width: 100%;
}

main section {
	margin-bottom: 11vw;
	position: relative;
}

main section .icon {
	height: 28.98vw;
	left: 5vw;
	position: absolute;
	width: 28.98vw;
}

main section .zoom {
	height: 36.22vw;
	width: 36.22vw;
}

main section .info {
	left: 8.93vw;
	position: absolute;
	right: 8.93vw;
}

main section h3 {
	font-family: 'Roboto Black', sans-serif;
	font-size: 6.74vw;
	line-height: 7.72vw;
}

main section p {
	font-family: 'Roboto Regular', sans-serif;
	line-height: 26px;
	margin-top: 16px;
}

main section.radio {
	height: 132.84vw;
	height: 132.84vw;
    margin-top: -108.3vw;
}

main section.radio .device {
	background: url('images/radio-device.png?rev=1') no-repeat;
	background-size: cover;
	bottom: 37vw;
	height: 94.58vw;
	left: 42.5vw;
	position: absolute;
	width: 48.3vw;
}

main section.radio .icon {
	bottom: 33vw;
}

main section.radio .zoom {
	background: url('images/radio-zoom.png?rev=1') no-repeat;
	background-size: cover;
	left: 26.32vw;
	position: absolute;
	top: 25.28vw;
}

main section.radio .info {
	top: 103vw;
}

main section.podcast {
	height: 132vw;
}

main section.podcast .device {
	background: url('images/podcast-device.png?rev=1') no-repeat;
	background-size: cover;
	bottom: 34vw;
	height: 92.25vw;
	left: 42.5vw;
	position: absolute;
	width: 45.88vw;
}

main section.podcast .icon {
	bottom: 29vw;
}

main section.podcast .zoom {
	background: url('images/podcast-zoom.png?rev=1') no-repeat;
	background-size: cover;
	bottom: 75vw;
	left: 26.32vw;
	position: absolute;
}

main section.podcast .info {
	top: 105vw;
}

main section.music {
	height: 137vw;
}

main section.music .device {
	background: url('images/music-device.png?rev=1') no-repeat;
	background-size: cover;
	bottom: 39vw;
	height: 92.25vw;
	left: 8.93vw;
	position: absolute;
	width: 45.88vw;
}

main section.music .icon {
	bottom: 35vw;
	left: auto;
	right: 4vw;
}

main section.music .zoom {
	background: url('images/music-zoom.png?rev=1') no-repeat;
	background-size: cover;
	bottom: 80vw;
	left: 33.8vw;
	position: absolute;
}

main section.music .info {
	text-align: right;
	top: 104vw;
}

main section.music h3,
main section.music p {
	text-align: left;
}

main section.library {
	height: 130.42vw;
}

main section.library .device {
	background: url('images/library-device.png?rev=1') no-repeat;
	background-size: cover;
	bottom: 38.5vw;
	height: 91.77vw;
	left: 44.92vw;
	position: absolute;
	width: 45.88vw;
}

main section.library .icon {
	bottom: 34vw;
}

main section.library .zoom {
	background: url('images/library-zoom.png?rev=1') no-repeat;
	background-size: cover;
	bottom: 67.5vw;
	left: 26.81vw;
	position: absolute;
}

main section.library .info {
	top: 98vw;
}

main section.app {
	background: white;
	color: black;
	height: 161.34vw;
	text-align: center;
}

main section.app .uforia {
	height: 31.39vw;
	margin-top: 16.37vw;
	width: 31.39vw;
}

main section.app h3 {
	color: black;
	font-family: 'Poppins Medium', sans-serif;
	font-size: 5.55vw;
	margin-bottom: 9.64vw;
}

main .apple-store {
	height: 11.58vw;
	width: 35vw;
}

main .google-play {
	height: 11.58vw;
	width: 38.7vw;
}

main section.app p {
	color: black;
	font-family: 'Poppins Regular', sans-serif;
	font-size: 3.1vw;
	margin-top: 4px;
}

main section.app .contact {
	margin-top: 30px;
}

main section.app .contact .twitter {
	background: url('images/twitter.png?rev=1') no-repeat center center;
	background-size: cover;
	display: inline-block;
	height: 22px;
	margin: 0 6px -7px 30px;
	width: 24px;
}

main section.app p,
main section.app p strong,
main section.app p a {
	color: black;
}

footer {
	position: relative;
	text-align: center;
	background: #F6F6F6;
    margin-top: -51px;
}

footer h3 {
	font-family: 'Roboto Black', sans-serif;
	text-transform: uppercase;
	padding-top: 46px;
}

footer > h3 {
	font-size: 22px;
	margin-bottom: 38px;
}

footer .apps {
	overflow-x: scroll;
	width: 100%;
	padding-bottom: 25px;
}

footer .transparency {
	background: rgb(255, 255, 255);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	bottom: 0;
	position: absolute;
	top: 0;
	width: 75px;
}

footer .transparency-left {
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	left: 0;
}

footer .transparency-right {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	right: 0;
}

footer ul {
	width: 1150px;
}

footer li {
	display: inline-block;
	margin-right: 20px;
}

footer li p {
	color: #a2a2a2;
	font-size: 11px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

footer img.app {
	height: 116px;
	width: 116px;
}

footer .apple-store {
	height: 35.2px;
	width: 108.5px;
}

footer .google-play {
	height: 35.2px;
	width: 123.3px;
}

@media screen and (max-width: 385px) {

	header {
		display: grid;
		grid-gap: 17px;
		grid-template-columns: 24.14vw auto;
		grid-template-rows: 24.14vw auto;
		height: 214.235vw;
		padding: 13.55vw 8px 0;
	}

	header .info {
		grid-column: 1 / span 2;
		padding: 1vw 0 0 2.96vw;
	  	z-index: 1;
	}

	header .info li {
		color: #fff;
		font-size: 12px;
	}

	main section.radio {
		height: 132.84vw;
		height: 132.84vw;
		margin-top: -105.3vw;
	}

	main section.radio .info {
		left: 5.50vw;
		top: 103vw;
	}

	main section.podcast .info {
		left: 5.50vw;
        margin-right: 13px;
	}

	main section.music .icon {
		bottom: 35vw;
    	left: auto;
    	right: 17vw;
	}

	main section.music .info {
		text-align: right;
    	top: 104vw;
		left: 4.93vw;
		margin-right: 10px;
	}

}

@media screen and (min-width: 414px) {

	header .info li {
		color: #fff;
		font-size: 16px;
	}

	header .info ul {
		list-style-position: inside;
    	margin: 6.03vw -18px 7.95vw;
	}

	main section {
		position: relative;
	}

	main section h3{
		font-size: 38px;
	}

	main section.radio {
		height: 132.84vw;
		height: 132.84vw;
		margin-top: -90.3vw;
	}

	main section.radio .device {
		background: url('images/radio-device.png?rev=1') no-repeat;
        background-size: cover;
        bottom: 37vw;
        height: 500px;
        left: 43.5vw;
        position: absolute;
        width: 302.91px;
	}

	main section.radio .zoom {
		background: url('images/radio-zoom.png?rev=1') no-repeat;
        background-size: cover;
        left: 3.32vw;
        position: absolute;
        top: -8.72vw;
        height: 218.75px;
        width: 218.75px;
	}

	main section.radio .info {
		top: 91vw;
	}

	main section.radio .icon {
		bottom: 46vw;
	}

	main section.podcast .device {
		background: url('images/podcast-device.png?rev=1') no-repeat;
        background-size: cover;
        bottom: 20vw;
        height: 500px;
        left: 45.5vw;
        position: absolute;
        width: 302.91px;
	}
	
	main section.podcast .icon {
		bottom: 38vw;
	}
	
	main section.podcast .zoom {
		background: url('images/podcast-zoom.png?rev=1') no-repeat;
        background-size: cover;
        bottom: 67vw;
        left: 7.32vw;
        position: absolute;
        height: 218.75px;
        width: 218.75px;
	}
	
	main section.podcast .info {
		top: 98vw;
	}

	main section.music {
		height: 137vw;
	}
	
	main section.music .device {
		background: url('images/music-device.png?rev=1') no-repeat;
        background-size: cover;
        bottom: 21vw;
        height: 500px;
        left: 6.93vw;
        position: absolute;
        width: 302.91px;
	}
	
	main section.music .icon {
		bottom: 35vw;
		left: auto;
		right: 4vw;
	}
	
	main section.music .zoom {
		background: url('images/music-zoom.png?rev=1') no-repeat;
        background-size: cover;
        bottom: 73vw;
        left: 39.8vw;
        position: absolute;
        height: 218.75px;
        width: 218.75px;
	}
	
	main section.music .info {
		text-align: right;
		top: 104vw;
	}	

	main section.library {
		height: 130.42vw;
	}
	
	main section.library .device {
		background: url('images/library-device.png?rev=1') no-repeat;
        background-size: cover;
        bottom: 13.5vw;
        height: 500px;
        left: 44.92vw;
        position: absolute;
        width: 302.91px;
	}
	
	main section.library .icon {
		bottom: 34vw;
	}
	
	main section.library .zoom {
		background: url('images/library-zoom.png?rev=1') no-repeat;
		background-size: cover;
		bottom: 67.5vw;
		left: 7.81vw;
		position: absolute;
		height: 218.75px;
        width: 218.75px;
	}
	
	main section.library .info {
		top: 98vw;
	}

}

@media screen and (min-width: 768px) {
	article {
		max-width: 1440px;
	}

	header {
		grid-template-columns: 7.7vw auto;
		grid-template-rows: 7.7vw auto;
		height: 66vw;
		padding: 3.3vw 6.1vw 0;
		position: relative;
	}

	header > img {
		height: 103px;
		width: 350px;
	}

	header h1 {
		font-size: 2.4vw;
		line-height: 2.3vw;
		width: 125px;
	}

	header .info {
		padding: 2vw 0 0 0;
	}

	header h2 {
		font-size: 2.6vw;
	}

	header .info ul {
		margin: 2.5vw 0 3.5vw;
	}

	header .info li {
		font-size: 1.5vw;
	}

	header .info p {
		font-size: 22px;
		margin-bottom: 30px;
		margin-top: 15px;
	}

	header .apple-store {
		height: 3.33vw;
		margin-right: 1vw;
		width: 10vw;
	}

	header .google-play {
		height: 3.33vw;
		width: 11.1vw;
	}

	header .android-home {
		background: url('images/android-home.png?rev=1') no-repeat top center;
		background-size: cover;
		height: 62.06vw;
		position: absolute;
		right: 6vw;
		top: 5.8vw;
		width: 29.9vw;
	}

	main .diagonal {
		background: url('images/diagonal-desktop.png?rev=1') no-repeat center bottom;
		background-size: cover;
		bottom: 35vw;
		height: 79.2vw;
		width: 100%;
	}

	main section .icon {
		height: 9vw;
		left: 12.5vw;
		width: 9vw;
	}

	main section h3 {
		font-size: 2.64vw;
		line-height: 3.053vw;
	}

	main section div.zoom {
		height: 20vw;
		width: 20vw;
	}

	main section div.info {
		bottom: 0;
		left: 13.7vw;
		right: 13.7vw;
	}

	main section.radio {
		height: 60vw;
		margin: -45vw 0 10vw;
	}

	main section.radio .device {
		background: url('images/radio-device-desktop.png?rev=1') no-repeat;
		background-size: cover;
		bottom: 6vw;
		height: 53.1vw;
		left: 55vw;
		width: 26.5vw;
	}

	main section.radio .icon {
		bottom: 11vw;
	}

	main section.radio .zoom {
		background: url('images/radio-zoom-desktop.png?rev=1') no-repeat;
		background-size: cover;
		bottom: 24vw;
		left: 46vw;
		top: auto;
	}

	main section.radio .info {
		bottom: auto;
		top: 51vw;
	}

	main section.podcast {
		height: 34vw;
	}

	main section.radio .info .break {
		display: block;
	}

	main section.podcast .device {
		background: url('images/podcast-device-desktop.png?rev=1') no-repeat;
		background-size: cover;
		bottom: -2vw;
		height: 41.7vw;
		left: auto;
		right: 17vw;
		width: 20.8vw;
	}

	main section.podcast .icon {
		bottom: 18.5vw;
	}

	main section.podcast .zoom {
		background: url('images/podcast-zoom-desktop.png?rev=1') no-repeat;
		background-size: cover;
		bottom: 12vw;
		left: auto;
		right: 27vw;
	}

	main section.podcast .info {
		top: 17vw;
		width: 514px;
	}

	main section.music .device {
		background: url('images/music-device-desktop.png?rev=1') no-repeat;
		background-size: cover;
		bottom: -2vw;
		height: 41.7vw;
		left: 13.7vw;
		width: 20.8vw;
	}

	main section.music .icon {
		bottom: 25vw;
		left: 49vw;
	}

	main section.music {
		height: 34vw;
	}

	main section.music .zoom {
		background: url('images/music-zoom-desktop.png?rev=1') no-repeat;
		background-size: cover;
		left: 22vw;
		top: 8vw;
	}

	main section.music .info {
		left: 50vw;
		text-align: left;
		top: 10vw;
		width: 40vw;
	}

	main section.library {
		height: 38vw;
		z-index: 2;
	}

	main section.library .device {
		background: url('images/library-device-desktop.png?rev=1') no-repeat;
		background-size: cover;
		bottom: 6vw;
		height: 41.7vw;
		left: auto;
		right: 13.68vw;
		width: 20.8vw;
	}

	main section.library .icon {
		bottom: 26vw;
	}

	main section.library .zoom {
		background: url('images/library-zoom-desktop.png?rev=1') no-repeat;
		background-size: cover;
		bottom: 15vw;
		left: auto;
		right: 23vw;
	}

	main section.library .info {
		top: 13vw;
		width: 35vw;
	}

	main section.app {
		height: 44vw;
		z-index: 1;
		margin-bottom: 35px;
	}

	main section.app .uforia {
		height: 9vw;
		margin-top: 8vw;
		width: 9vw;
	}

	main section.app h3 {
		font-size: 2.6vw;
		margin-bottom: 2.5vw;
	}

	main .apple-store {
		height: 4.02vw;
		width: 12.22vw;
	}

	main .google-play {
		height: 4.02vw;
		width: 13.9vw;
	}

	main section.app .contact {
		margin-top: 2.5vw;
	}

	main section.app p,
	main section.app p strong,
	main section.app p a {
		font-size: 1vw;
		margin-top: 0;
	}

	footer h3 {
		font-family: 'Poppins Medium', sans-serif;
		font-size: 12px;
	}

	footer .transparency {
		display: none;
	}

	footer ul {
		width: 100%;
	}

	footer li {
		margin-right: 3vw;
	}

	footer img.app {
		height: 8vw;
		width: 8vw;
	}

	footer .apple-store {
		height: 2.76vw;
		width: 8.3vw;
	}

	footer .google-play {
		height: 2.76vw;
		width: 9.3vw;
	}
}

@media screen and (min-width: 1440px) {
	header {
		grid-template-columns: 111px auto;
		grid-template-rows: 111px auto;
		height: 950px;
		padding: 49px 88px 0;
	}

	header > img {
		height: 103px;
		width: 350px;
		margin-left: -53px;
	}

	header .info {
		padding-top: 0px;
	}

	header h2 {
		font-size: 38px;
	}

	header .info ul {
		margin: 0px 0 10px;
	}

	header .info li {
		font-size: 16px;
		margin-bottom: 10px;
	}

	header .apple-store {
		height: 48px;
		margin-right: 15px;
		width: 144px;
	}

	header .google-play {
		height: 48px;
		width: 160px;
	}

	header .android-home {
		height: 894px;
		right: 87px;
		top: 84px;
		width: 431px;
	}

	main section .icon {
		height: 130px;
		left: 179.875px;
		width: 130px;
	}

	main .diagonal {
		bottom: 504px;
		height: 1141px;
		width: 1440px;
	}

	main section h3 {
		font-size: 38px;
		line-height: 44px;
	}

	main section div.zoom {
		height: 288px;
		width: 288px;
	}

	main section.radio {
		height: 863.391px;
		margin: -647.55px 0 144px;
	}

	main section.radio .device {
		left: 660px;
		top: 0px;
		width: 694.27px;
		height: 1146px;
	}

	main section.radio .icon {
		bottom: 184px;
		width: 105px;
		height: 105px;
	}

	main section.radio .zoom {
		bottom: 314.36px;
		left: 529px;
		width: 316px;
		height: 316px;
	}

	main section.radio .info {
		left: 193px;
		top: 678px;
		width: 414px;
	}

	main section.podcast {
		height: 490px;
	}

	main section.podcast .device {
		right: -8px;
    	top: -32px;
    	width: 484.65px;
    	height: 800px;
	}

	main section.podcast .icon {
		bottom: 350.215px;
		width: 105px;
		height: 105px;
	}

	main section.podcast .zoom {
		bottom: -25px;
		left: auto;
		right: 359px;
		width: 350px;
		height: 350px;
	}

	main section.podcast .info {
		left: 198px;
		top: 135.63px;
	}

	main section.music {
		height: 490px;
	}

	main section.music .device {
		left: 132px;
    	top: -135px;
    	width: 484.65px;
    	height: 800px;
	}

	main section.music .icon {
		bottom: 359.750px;
		left: 705.11px;
		width: 105px;
		height: 105px;
	}

	main section.music .zoom {
		left: 317px;
		top: 116px;
		width: 350px;
		height: 350px;
	}

	main section.music .info {
		left: 719.5px;
		top: 143.9px;
	}

	main section.library {
		height: 548px;
	}

	main section.library .device {
		bottom: -32.66px;
    	right: -16px;
		width: 484.65px;
    	height: 800px;
	}

	main section.library .icon {
		bottom: 374.14px;
		width: 105px;
		height: 105px;
	}

	main section.library .zoom {
		bottom: 216px;
		right: 332px;
		width: 350px;
		height: 350px;
	}

	main section.library .info {
		left: 198px;
		top: 188px;
		width: 504px;
	}

	main section.app {
		height: 566px;
    	margin-top: 0px;
    	background: white;
	}

	main section.app .uforia {
		height: 130px;
    	margin-top: 99px;
    	width: 130px;
	}

	main section.app h3 {
		font-size: 38px;
		margin-bottom: 36px;
	}

	main .apple-store {
		height: 58px;
		width: 176px;
	}

	main .google-play {
		height: 58px;
		width: 201px;
	}

	main section.app .contact {
		margin-top: 36px;
	}

	main section.app p,
	main section.app p strong {
		font-size: 15px;
	}

	footer img.app {
		height: 116px;
		width: 116px;
	}

	footer .apple-store {
		height: 40px;
		width: 120px;
	}

	footer .google-play {
		height: 40px;
		width: 134px;
	}
}