@charset "utf-8";
* {margin:0;padding:0;font-family:sans-serif;font-weight:100;text-transform:uppercase;}
br{clear:both;}
.logo, .logo-start, .screen, .video{margin:2vw auto 2vw auto;text-shadow:1px 1px 3px #000F1F;}
.ink {width: 10%;}
.logo,.logo img{width:50vw;border:0;}
.logo-start,.logo-start img{width:80vw;border:0;}
.screen,.screen img{width:80vw;border:0;margin: auto;}
.flyer,.flyer img{width:75vw;border:0;margin:2vw auto 5vw auto;text-shadow:1px 1px 3px #000F1F;}
.video,.video video{width:80vw;border:0;}
.bannercontainer{width:75vw;}
#color{width:100%;height:100%;margin:0;padding:0;}
.color-chooser{float:left;width:60vw;margin:20px 20vw;}
.color-chooser a,.color-chooser img{width:18vw;float:left;border:0;margin:0 1vw;}
.left{margin:50px 0 10px 0;padding:0 0 0 2.5%;float:left;width:30%;}
.center{margin:50px 0 10px 0;padding:0;float:left;text-align:center;width:35%;}
.right{margin:50px 0 10px 0;padding:0 2.5% 0 0;float:right;width:30%;text-align:right;line-height:25px;}
a{text-decoration: none;}
.important{font-weight: 700;}
.icon{width:14vw;margin:10px 32vw;}
.show-nothing{display:none;}
.show{display:block;}
.content{font-size:3.6vw;font-weight:300;margin:10px 10vw;line-height:5vw;}
.content-center{text-align:center;line-height:6vw;}
h1,h2,h3{letter-spacing:4px;text-align:center;}
h1{font-size:11vw;font-weight:700;margin-top:10vw;}
h2{font-size:4.6vw;font-weight:400;margin-bottom:20px;line-height:6vw;}
h3{font-size:3vw;font-weight:300;margin-bottom:10px;}
.appstore{width:30vw;margin:0 25vw 0 25vw;}
.appstore img{width:30vw;}
.container > .color-chooser{display: inline-block;}
.only-for-black,.only-for-white {display:none;}

/* Black */
.color-black{background-color: #1A1A1A;}
.color-black .only-for-black{display:block;}
.color-black h1{text-shadow:1px 1px 3px #000000;color:#FFF8EB;}
.color-black h2{text-shadow:1px 1px 2px #000000;color:#9F988C;}
.color-black .footer{color:#FFF8EB;}
.color-black .content{color:#9F988C;}
.color-black a{color:#FFF8EB;}

/* White */
.color-white{background-color: #DDDDDD;}
.color-white .only-for-white{display:block;}
.color-white h1{text-shadow:1px 1px 3px #000000;color:#000A0E;}
.color-white h2{text-shadow:1px 1px 2px #000000;color:#626768;}
.color-white .footer{color:#000A0E;}
.color-white .content{color:#626768;}
.color-white a{color:#000A0E;}


.box{position:relative;width:90%;margin:5px auto 25px auto;background-size:contain;}
.box:before {content:"";display:block;padding-top:100%;}

iframe {margin-left: auto; margin-right:auto;}

.preview{margin:5% 25% 5% 25%;width:50%;}
.bannercontainer{position:relative;margin:0 auto;padding:5px;max-width:640px}.banner{position:relative;max-width:640px;height:500px;overflow:hidden}.fullwidthbanner-container{position:relative;width:100% !important;padding:0;max-height:500px !important;overflow:hidden}.fullwidthbanner-container .fullwidthbanner{position:relative;width:100% !important;max-height:500px !important}.fullscreenbanner-container{width:100% !important;position:relative;padding:0;height:100%}

@media screen and (min-width: 504px) {
	.logo,.logo img,.video,.video video{width:500px;}
	.logo-start,.logo-start img{width:500px;}
	.screen,.screen img{width:400px; margin: auto;}
	.flyer,.flyer img{width:500px;}
	.bannercontainer{width:378px;}
	.box{width:378px;}
	iframe#twitter-widget-0.twitter-timeline.twitter-timeline-rendered, iframe#twitter-widget-1.twitter-timeline.twitter-timeline-rendered{width:378px !important;}
}

@media screen and (min-width: 700px) {
	.content{font-size:25px;line-height:36px;width:600px;margin:auto;}
	.logo-start,.logo-start img{width:700px;}
	h1{font-size:76px;}
	h2{font-size:34px;line-height:40px;}
	h3{font-size:20px;}
	.icon{width:100px;margin:10px auto;}
	.content-center{line-height:40px;}
	.appstore{width:240px;margin:0 auto;}
	.appstore img{width:240px;}
	#color .footer{font-size:16px;}
}