html {
	-webkit-font-smoothing: antialiased;
} 

body {
	margin: 0px;
	overflow-x: hidden;

	background-color: black;
}

#navbar a {
	text-decoration: none;
	color: white;
}

#timeline-play img {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-top: -3px;
	margin-right: 10px;
}

#timeline-play {
	margin-left: 18px;
	color: #3990f5;
	font-weight: 500;
	margin-top: 40px;
}

#timeline-play:hover {
	cursor: pointer;
}

#redirect-partner {
	width: auto;
	display: inline-block;
}

#redirect-partner:hover {
	cursor: pointer;
	opacity: 0.8;
}

#contact-modal {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 9999;
}

#contact-modal input {
	display: block;
	width: 60%;
	font-size: 100%;
	padding: 5px;
	padding-left: 8px;
	padding-right: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#contact-modal #success {
	color: #3990f5;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 10px;

	font-weight: 400;
}

#contact-error {
	color: red;
	text-align: center;
	margin-top: 20px;
	font-size: 90%;
	margin-bottom: 10px;
}

#contact-modal .loader {
	font-size: 3px;
	width: 24px;
	height: 24px;
	margin-left: auto;
	margin-right: auto;

	animation-duration: 0.9s!important;
}

#contact-modal textarea {
	width: 99%;
	padding: 5px;
	padding-left: 8px;
	padding-right: 8px;
	font-size: 100%;
	border: 1px solid #d2d2d2;
	resize: none;

	height: 150px;

	margin-top: 15px;
	margin-bottom: 15px;
}

#contact-modal #send-message {
	margin-left: auto;
	margin-right: auto;
	width: 125px;

	color: white;

	background-color: #3990f5;

	text-align: center;

	padding-top: 5px;
	padding-bottom: 6px;

	border-radius: 4px;

	margin-top: 5px;
	margin-bottom: 5px;
}

#contact-modal #send-message:hover {
	cursor: pointer;
	background-color: #157ded;
}

#modal-title {
	margin-bottom: 30px;
	font-size: 130%;
}

#contact-modal .ng-modal-dialog {
	width: 700px;
	margin-left: -350px!important;
}

#player-controller-view {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(18,20,25,0.55);
	z-index: 99;

	top: 0%;

	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#player-controller-view.ng-hide {
	opacity: 0;
	transform: scale(1.1);
}

#music-content #album-title {
	margin-bottom: 18px;
	font-size: 220%;
	color: white;
	font-family: "Lato";
}

#creations {
	position: absolute;
	overflow-y: scroll;
	max-height: 85%;

	width: 100%;

	text-align: center;
	top: 65px;
	padding-top: 35px;

	font-family: "Lato";
}

#album {
	color: white;
	margin-bottom: 70px;
	margin-top: 30px;
}

#track #index {
	display: inline-block;
	opacity: 0.5;
	width: 40px;
}

#album-header {
	height: 80px;
	width: 1046px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;

	background-color: rgb(25,25,25);
}

#streaming-services img {
	vertical-align: bottom;
	height: 30px!important;
	opacity: 0.80;
}

#streaming-services img:hover {
	opacity: 1;
	cursor: pointer;
}

#streaming-services {
	margin-top: 25px;
	display: inline-block;
	float: right;
}

#empty-album {
	width: 210px;
	height: 210px;
	background-color: rgba(250,250,250,0.06);
	display: inline-block;

	margin-left: 34px;
	margin-right: 33px;
}

#download-sheet {
	float: right;
	width: 23px;
	height: 23px;
	background-image: url('/img/download.svg');
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 9px;

	display: inline-block;

	padding-left: 10px;
	padding-right: 10px;
}

#download-sheet:hover {
	cursor: pointer;
	opacity: 0.6;
}

#album-list img {
	width: 210px;
	height: 210px;
	margin-left: 33px;
	margin-right: 34px;
	margin-top: 0px;
}

#track-wrapper {
	display: inline-block;
	padding-left: 18px;
	width: 960px;
}

#about {
	background-color: rgb(245,245,245);
	width: 100%;

	position: absolute;

	top: 100%;

	min-height: 500px;

	text-align: center;

	padding-top: 40px;
}

#about #history {
	background-color: rgb(210,210,210);
	width: 100%;
	padding-top: 40px;
}

#history-container {
	margin-top: 50px;
	width: 1050px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 80px;
}

#history-container #history-container-bg {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 420px;
}

#timeline {
	width: 100%;
	height: 220px;
	background-color: white;
}

#about-container {
	z-index: 9;
}

.about-section {
	text-align: center;
	text-align: left;
	margin-bottom: 60px;
}

#about-header {
	width: 100%;
	height: 100%;

	background-image: url('/img/studio_6.jpg');
	
	background-size: cover;
	background-repeat: no-repeat;
	top:0px;

	position: absolute;
}

#mission-subtitle {
	font-size: 80%;
	font-style: italic;
	margin-bottom: 20px;
	font-weight: 300;
}

#about-title {
	font-size: 260%;
	font-weight: 400;
	margin-bottom: 20px;
	margin-top: 38vh;
}

#about-nav-title {
	font-size: 175%;
	font-weight: 300;
	margin-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	text-shadow: 0px 0px 3px rgba(255,255,255,0.3);
}

#facts-container {
	text-align: center;
}

#about-arrow {
	background-image: url('/img/arrow_bottom.svg');
	width: 40px;
	height: 40px;
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	display: block;
}

#about-arrow:hover {
	cursor: pointer;
	opacity: 0.7;
}

#fact {
	display: inline-block;
	font-family: "Lato";
	margin-top: 40px;

	margin-left:35px;
	margin-right:35px;
	text-align: center;

	width: 170px;

	vertical-align: top;
}

#fact-title {
	margin-top: 23px;
	margin-bottom: 5px;
	font-size: 105%;

	color: rgb(25, 60, 90);
}

#fact-number-container {
	margin-top: 25px;
}

#fact-number {
	margin-left: auto;
	margin-right: auto;
	font-size: 130%;

	width: 80px;
	height: 80px;
	border: 2px solid rgb(57, 144, 245);

	color: rgb(57, 144, 245);

	vertical-align: middle;
	border-radius: 50%;
}

#about .subtitle {
	text-align: center;
	font-family: "Lato";
	font-size: 110%;
	margin-top: 40px;
}

#mission {
	background-color: rgb(57, 144, 245);
	width: 630px;
	padding-top: 12px;
	padding-bottom: 12px;

	border-radius: 28px;

	font-size: 96%;

	font-family: "Helvetica Neue";

	left: 50%;
	margin-left: -320px;

	position: absolute;
	bottom: -20px;
}

#about-nav {
	background-color: rgba(0, 0, 0, 0.15);
	height: 100%;

	position: absolute;

	font-family: "Lato";

	color: white;

	width: 100%;

	text-align: center;
}

#header-title {
	color: rgba(0,0,0,0.8);

	font-size: 150%;

	padding-top: 100px;

	font-weight: 500;

	height: 240px;
	text-align: center;

	letter-spacing: 1px;

	font-family: "Myriad Pro";

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

#track {
	font-size: 90%;
	font-family: "Helvetica";
	vertical-align: middle;
	line-height: 45px;
	height: 43px;
	border-bottom: 1px solid rgba(45,45,45, 0.7);
}

#track:hover {
	cursor: pointer;
	background-color: rgba(255,255,255,0.05);
}

#album-player {
	border: 1px solid rgb(30,30,30);
	text-align: left;
	height: 290px;
	width: 1044px;
	background-color: rgba(20,20,20,0.7);
	margin-left: -7px;

	margin-left: auto;
	margin-right: auto;

	overflow-y: scroll;
}

#album-titles-container {
	display: inline-block;
}

#album img {
	margin-right: 20px;
	height: 80px;
	display: inline-block;
	vertical-align: top;
}

#creations #album-title {
	font-size: 150%;
	margin-bottom: 10px;
	margin-top: 9px;
}

#creations #album-subtitle {
	font-size: 100%;
	font-weight: 300;
}

#close {
	background-image: url('/img/close.svg');
	width: 30px;
	height: 30px;
	background-size: cover;

	position: absolute;

	top: 10px;

	right: 6%;
	z-index: 9999;
}

#close:hover {
	cursor: pointer;
	opacity: 0.7;
}

#music-content #album-subtitle {
	font-size: 130%;
	color: white;
	font-weight: 300;
	font-family: "Lato";
	margin-bottom: 85px;
}

#music-content {
	font-family: "Lato";
	text-align: center;
	top: 17%;

	width: 100%;

	height: 70%;

	overflow: scroll;

	position: absolute;

	margin-left: 12px;
}

#music-meta {
	display: inline-block;
	height: 180px;
	margin-top: 35px;
	color: white;
}

#music-meta-play {
	color: #3990f5!important;
	margin-bottom: 40px;
}

#music-meta-pause {
	color: #3990f5!important;
	margin-bottom: 40px;
}

#meta-play-icon {
	width: 22px!important;
	height: 22px!important;
	margin-left: 3px;
	margin-right: 12px;
}

#view-icon {
	background-image: url('/img/view_album.svg');
	margin-left: 3px;
	width: 24px!important;
	height: 24px!important;
}

#meta-pause-icon {
	width: 20px!important;
	height: 20px!important;
	margin-left: 3px;
	margin-right: 13px;
}

.meta-button {
	margin-top: 20px;
	text-align: left;
	opacity: 0.8;
}

.progress-mobile {
	display: none!important;
}

.meta-button:hover {
	cursor: pointer;
	opacity: 1;
}

.meta-icon {
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	height: 26px;
	margin-top: -4px;
	margin-right: 10px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#download-icon {
	background-image: url('/img/download.svg');
}

#meta-pause-icon {
	background-image: url('/img/pause_blue.svg');
}

#meta-play-icon {
	background-image: url('/img/play_blue.svg');
}

#music-content img {
	vertical-align: top;
	width: 250px;
	height: 250px;
	display: inline-block;
	margin-right: 80px;
}

#music-meta-title {
	font-size: 170%;
	font-weight: 300;
	color: white;
}

#selected-sheet {
	width: 7px;
	height: 7px;
	border-radius: 50%;

	background-color: #3990f5;
	margin-top: 7px;
	margin-left: auto;
	margin-right: auto;
}

.sheet img {
	height: 120px;
	display: block;
	margin-bottom: 10px;

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

.sheet:hover {
	cursor: pointer;
	opacity: 0.8;
}

.sheet {
	vertical-align: top;

	font-size: 90%;
	text-align: center;
	font-family: "Play";
	color: white;

	overflow: hidden;
	text-overflow: ellipsis;

	max-width: 150px;
	margin-left: 15px;
	margin-right: 15px;
}

#shelf {
	width: 100%;
	margin-top: 85px;
}

#facts-text {
	width: 90%;
	max-width: 1000px;
	padding-left: 5%;
	padding-right: 5%;
	margin-left: auto;
	margin-right: auto;
	font-family: "Lato";

	text-align: justify;

	margin-top: 55px;

	opacity: 0.85;
}

.blur-view {
	margin:-1px;
   	padding:1px;

	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-ms-filter: blur(20px);
	-o-filter: blur(20px);
	filter: blur(20px);

	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.album img {
	width: 190px;
	height: 190px;
}

.empty-album {
	width: 186px;
	height: 186px;
	display: inline-block;
	border: 1px solid #d6d6d6;

	margin-right: 43px;
}

#creations .introduction-bg {
	filter: blur(10px)!important;
	-webkit-filter: blur(10px)!important;
	-moz-filter: blur(10px)!important;
	-o-filter: blur(10px)!important;
	-ms-filter: blur(10px)!important;
}

.album {
	display: inline-block;
	margin-right: 43px;
}

#shelf-sliding-list {
	height: 170px;
	white-space: nowrap;
	width: 100%;
	overflow-x: scroll;

	position: absolute;

	z-index: 999;
}

#shelf-background {
	border-bottom: 1px solid rgba(57, 144, 245, 0.10);

	background-attachment: scroll;
	background: linear-gradient(rgba(57, 144, 245, 0), rgba(57, 144, 245, 0.05), rgba(57, 104, 245, 0.10));
	background: -moz-linear-gradient(rgba(57, 144, 245, 0), rgba(57, 144, 245, 0.05), rgba(57, 104, 245, 0.10));
	/* FF3.6+ */
	background: -webkit-gradient(rgba(57, 144, 245, 0), rgba(57, 144, 245, 0.05), rgba(57, 104, 245, 0.10));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(rgba(57, 144, 245, 0), rgba(57, 144, 245, 0.05), rgba(57, 104, 245, 0.10));
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(rgba(57, 144, 245, 0), rgba(57, 144, 245, 0.05), rgba(57, 104, 245, 0.10));
	/* Opera11.10+ */
	background: -ms-linear-gradient(rgba(57, 144, 245, 0), rgba(57, 144, 245, 0.05), rgba(57, 104, 245, 0.10));
	/* IE10+ */
	height: 168px;
	width: 100%;
	position: absolute;
}

.sheet {
	display: inline-block;
}

#footer {
	background-color: rgba(50,50,50, 0.8);
	width: 100%;
	height: 200px;
	color: white;

	font-family: "Lato";
}

#controls .loader {
	display: inline-block;
	font-size: 3px;

	width: 23px!important;
	height: 23px!important;

	margin-left: 26px;
	margin-right: 26px;
}

#copyright {
	font-size: 80%;
	font-weight: 300;
	opacity: 0.8;
	margin-left: 22px;
}

#footer-logo {
	margin-left: 70px;
	width: 230px;
	margin-top: 18px;
}

.introduction {
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;

	background-image: url('/img/starry.png');

	background-color: black;
}

.introduction-bg {
	width: 100%;
	height: 100%;
	position: absolute;

	background-image: radial-gradient(at 80%, rgba(57,87,245,0.40) 5%, rgba(11, 2, 16, 0.00) 70%), 
					  radial-gradient(farthest-side at 70% 200%, rgba(82, 88, 97, 0.4) 30%, rgba(11, 2, 16, 0.00) 80%), 
					  radial-gradient(ellipse closest-corner at 60% 40%, rgba(47, 44, 111, 0.3) 0%, rgba(16, 15, 45, 0.4) 90%), 
					  radial-gradient(circle farthest-side at 0% 90%, rgba(255, 255, 255, 0) 0%, rgba(11, 2, 16, 0.00) 80%), 
					  radial-gradient(100% 40%, rgba(82, 68, 107, 0.4) 5%, rgba(11, 2, 16, 0.00) 90%);
}

#other {
	top: 100%;
	width: 100%;
	position: absolute;
}

#player {
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	-o-user-select: none;
	user-select: none;

	bottom: 0px;
	position: fixed;
	z-index: 9999;
	background-color: rgba(0,0,0,0.9);
	width: 100%;
	height: 50px;

	line-height: 48px;

	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);

	border-top: 1px solid rgb(30,30,30);

	font-family: "Lato";
}

#player #controls div {
	width: 16px;
	height: 16px;

	vertical-align: middle;

	background-size: contain;

	background-repeat: no-repeat;

	background-position: center;

	display: inline-block;

	opacity: 0.8;
}

#player #controls {
	display: inline-block;
	margin-right: 50px;
	margin-left: 50px;

	width: 125px;
}

#player #progress {
	width: 500px;
	display: inline-block;

	height: 10px;

	font-size: 75%;
	letter-spacing: 1px;
}

#player #time-elapsed {
	color: #3990f5;
}

#player #progress div {
	display: inline-block;
}

#player #progress-bar {
	width: 400px;
	height: 2px;
	background-color: rgb(30,30,30);

	z-index: 1;
}

#player #progress-bar-wrapper {
	margin-left: 15px;
	margin-right: 15px;

	display: inline-block;
	height: 10px;
	vertical-align: middle;
	padding-top: 6px;
}

#player #progress-bar-wrapper:hover {
	cursor: pointer;
}

#player #total-time {
	color: white;
}

#player #progress-bar-time {
	z-index: 99!important;
	position: relative;
	width: 0%;
	height: 2px;
	top: -26px;	
	background-color: #3990f5;

	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#player #controls div:hover {
	cursor: pointer;
	opacity: 1;
}

.pause {
	background-image: url('/img/pause.svg')!important;
}

#play {
	padding-left: 26px;
	padding-right: 24px;

	width: 23px!important;
	height: 23px!important;

	background-image: url('/img/play.svg');
}

#previous {
	background-image: url('/img/previous.svg');
}

#next {
	background-image: url('/img/next.svg');
}

#titles {
	height: 85%;
	top: 15%;
	z-index: 9;
	position: absolute;
	width: 100%;
}

#player #volume {
	background-image: url('/img/volume.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 24px;
	height: 24px;

	opacity: 0.8;

	padding-left: 35px;
	padding-right: 2px;
}

#player-wrapper {
	margin-left: auto;
	margin-right: auto;
}

#player #volume-container {
	display: inline-block;
	vertical-align: middle;
}

#player #volume:hover {
	cursor: pointer;
	opacity: 1;
}

#music-title {
	display: inline-block;
	color: white;
	vertical-align: middle;
	margin-top: -1px;
	font-size: 95%;

	max-width: 200px;

	height: 48px;
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#right-controls {
	display: inline-block;
	float: right;
}

#right-controls #menu {
	background-image: url('/img/menu.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	width: 17px;
	height: 17px;
	
	padding-left: 40px;
	padding-right: 40px;
}

#menu-bottom-pointer {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 9px 0 9px;
	border-color: rgba(0,0,0,0.9) transparent transparent transparent;

	position: absolute;
	bottom: -8px;
	right: 25px;
}

#menu-wrapper {
	display: inline-block;
	vertical-align: middle;
}

#right-controls #menu:hover {
	cursor: pointer;
	opacity: 0.8;
}

.title-animated {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.title-animated.ng-hide {
	opacity: 0;
	transform: scale(0.8);
}

#listen {
	background: #3990f5;
	width: 215px;
	text-align: center;
	color: white;
	padding-top: 8px;
	padding-bottom: 8px;
	border-radius: 20px;

	margin-left: auto;
	margin-right: auto;

	font-family: "Lato";

	bottom: -50%;
	position: relative;

	left: -15px;
}

#listen:hover {
	cursor: pointer;
	background-color: #157ded;
}

#listen img {
	width: 11px;
	margin-right: 10px;
	vertical-align: middle;
	margin-top: -2px;
}

#canvas {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 280px;
	height: 280px;
	left: -6px;
}

.arrow-button-left {
	margin-right: 0px!important;
	margin-left: 20px;
	background-image: url('/img/arrow_left.svg')!important;
	background-position: 40% center!important;
	float: left!important;
}

#arrow-buttons {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	background-image: url('/img/arrow_right.svg');
	background-size: 50%;
	background-position: 52% center;
	background-repeat: no-repeat;
	border-radius: 50%;
	width: 50px;
	background-color: white;
	height: 50px;
	border: 1px solid rgb(150, 150, 150);
	margin-right: 20px;
	margin-top: 340px;
	float: right;
}

#menu-mobile {
	display: none;
	background-image: url('/img/menu.svg');
	width: 20px;
	height: 20px;
	background-size: cover;
	margin-top: 22px;
	float: right;
	margin-right: 30px;
}

#menu-mobile:hover {
	cursor: pointer;
	opacity: 0.8;
}

#arrow-buttons:active {
	transform: scale(0.7)!important;
	-webkit-transform: scale(0.7)!important;
	-o-transform: scale(0.7)!important;
	-moz-transform: scale(0.7)!important;
}

#arrow-buttons:hover {
	cursor: pointer;
	transform: scale(0.9);
	-webkit-transform: scale(0.9);
	-o-transform: scale(0.9);
	-moz-transform: scale(0.9);
}

#timeline {
	font-family: "Helvetica Neue", "Arial";
	padding-top: 20px;
	color: rgb(30,30,30);
}

#timeline-description {
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 25px;
	text-align: justify;
	opacity: 0.8;
}

#timeline-tracker {
	display: inline-block;
	float: right;
	padding-right: 20px;
	opacity: 0.8;
}

#menus-mobile {
	line-height: 30px;
	padding-left: 30px;
	padding-bottom: 5px;
	display: none;
	background-color: rgba(0,0,0,0.4);
	top: 0px;
	position: absolute;
	width: 100%;
	z-index: -1;

	height: 200px;
	overflow: hidden;

	-webkit-backdrop-filter: blur(5px);

	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#menus-mobile.ng-hide {
	height: 0px;
}

#menus-mobile .menu {
	display: block;
	margin-top: 15px;
	margin-bottom: 15px;
}

#timeline-title {
	display: inline-block;
	font-size: 150%;
	padding-left: 20px;
}

.streaming-services-mobile {
	display: none;
}

#navbar {
	color: white;

	font-family: "Play";

	line-height: 60px;

	top: 0px;
	position: absolute;

	width: 100%;
	z-index: 999;
}

#logo {
	margin-left: 150px;
	display: inline-block;
	font-size: 150%;

	color: white;
}

#logo img {
	width: 40px;
	vertical-align: middle;
	margin-right: 12px;
	margin-top: -2px;
}

#co-founder img {
	width: 200px;
	height: 200px;
	display: inline-block;
	vertical-align: top;
	margin-right: 70px;
	border-radius: 50%;
}

#co-founder-details {
	display: inline-block;
}

#collaboration-container {
	padding-bottom: 50px;
}

#partners-logo {
	text-align: center;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

#partners-logo img {
	height: 50px;

	margin-left: 60px;
	margin-right: 60px;
	margin-top: 50px;
	margin-bottom: 100px;
}

#co-founder-description {
	width: 780px;
	text-align: justify!important;
	margin-top: 20px;
	font-size: 95%;
	opacity: 0.9;
}

#co-founder {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 80px;
	font-family: "Helvetica", "Arial", "Lato";
	color: rgb(40,40,40);
}

#collaboration-container {
	background-color: rgb(210,210,210);
	padding-top: 40px;
}

#co-founder-name {
	margin-top: 20px;
	margin-bottom: 5px;
	font-size: 145%;
	text-align: left;
}

#co-founder-position {
	padding-right: 5px;
	font-style: italic;
	opacity: 0.9;
	text-align: left;
}

#menus {
	margin-right: 150px;
	font-size: 110%;
	margin-top: 2px;
	display: inline-block;
	float: right;
}

.menu {
	margin-right: 25px;
	display: inline-block;
}

.menu:hover {
	cursor: pointer;
	color: #3990f5!important;
}

#presents {
	font-size: 125%;
	font-weight: 400;
	color: white;

	font-family: "Lato";

	text-align: center;
	width: 100%;
	letter-spacing: 1px;
	z-index: 88;
}

#title {
	z-index: 88;
	font-size: 460%;
	color: white;
	font-weight: 300;
	font-family: "Lato";
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
	letter-spacing: 18px;

	text-shadow: 0px 0px 7px rgba(140,200,255,0.3);
}

#title img {
	width: 300px;
}

@media(max-width: 1300px) {
	#album-list img {
		width: 170px;
		height: 170px;
	}

	#empty-album {
		width: 170px;
		height: 170px;
	}

	#track-wrapper {
		width: 800px;
	}

	#album-header {
		width: 887px;
	}

	#album-player {
		width: 887px;
	}
}

@media(max-width: 1100px) {
	#co-founder-description {
		width: 450px;
	}

	#navbar #logo {
		margin-left: 50px!important;
	}

	#navbar #menus {
		margin-right: 35px!important;
	}

	#history-container {
		width: 100%;
		padding-bottom: 0px;
	}

	#timeline-title {
		padding-left: 30px;
	}

	#timeline-tracker {
		padding-right: 30px;
	}

	#timeline-description {
		padding-left: 30px;
		padding-right: 30px;
	}

	#timeline-play {
		margin-left: 30px;
	}
	
	#player #progress-bar {
		width: 250px;
	}

	#player #controls {
		margin-left: 25px;
		margin-right: 25px;
	}

	#player #menu {
		padding-right: 25px;
		padding-left: 20px;
	}

	#player #progress {
		width: 350px;
	}

	#player #music-title {
		font-size: 80%;
	}
	
	#album-list img {
		width: 135px;
		height: 135px;
		margin-left: 12px;
		margin-right: 12px;
	}

	#empty-album {
		width: 135px;
		height: 135px;
		margin-left: 12px;
		margin-right: 12px;
	}

	#player-controller-view #close {
		width: 20px;
		height: 20px;
	}

	#track-wrapper {
		width: 540px;
	}

	#album-header {
		width: 618px;
	}

	#album-player {
		width: 618px;
	}
}

@media (max-width: 850px) {
	#player #music-title {
		display: none;
	}

	#player #menu {
		padding-left: 0px;
		padding-right: 0px;
		margin-right: 20px;
	}

	#about-title {
		font-size: 200%;
	}

	#about-nav-title {
		font-size: 130%;
	}
}

@media (max-width: 767px) {

	#album-list {
		display: none;
	}

	#album-header {
		width: 98%;
	}

	#album-player {
		width: 98%;
	}

	#player-controller-view #close {

	}

	#album-titles-container #album-title {
		font-size: 125%;
	}

	#album-titles-container #album-subtitle {
		font-size: 90%;
	}

	.streaming-services-desktop {
		display: none!important;
	}

	.streaming-services-mobile {
		color: white;
		display: block;
		margin-bottom: 200px;
	}

	.streaming-services-mobile #streaming-services {
		text-align: center;
		width: 100%;
	}

	.streaming-services-mobile img {
		margin-left: 20px;
		margin-right: 20px;
	}

	#track-wrapper {
		width: 75%;
	}

	#track {
		font-size: 80%;
		max-height: 85px;
		height: auto;
	}

	#music-content #close {
		right: 28px;
	}

	#album-subtitle {
		margin-bottom: 50px!important;
	}

	#music-content img {
		margin-right: 50px;
		width: 180px;
		height: 180px;
		margin-top: 32px;
	}

	#music-content {
		margin-left: 0px;
	}

	#music-meta {
		font-size: 90%;
	}

	#co-founder-description {
		width: 100%;
	}

	#co-founder {
		margin-left: auto;
		margin-right: auto;
		width: 85%;
	}

	#co-founder img {
		display: block;
		margin-left: auto;
		margin-right: auto;

		width: 190px;
		height: 190px;
	}

	#co-founder-name {
		text-align: center;
	}

	#co-founder-position {
		text-align: center;
	}

	#contact-modal .ng-modal-dialog {
		width: 100%!important;
		margin-left: 0!important;
		left: 0%;
		border-radius: 0px;
	}

	#contact-modal input {
		width: 98%;
	}

	#menus {
		display: none!important;
	}

	#canvas {
		width: 200px;
		height: 200px;
	}

	#menu-mobile {
		display: block;
	}

	#title {
		font-size: 320%;
		letter-spacing: 0px;
	}

	#presents {
		width: 90%;
		margin-left: 5%;
		font-size: 100%;
	}

	#menus-mobile {
		display: block;
	}

	#navbar #logo {
		margin-left: 30px!important;
	}

	#mission {
		margin-left: 0%;
		left: 0%;

		border-radius: 0px;

		width: 92%;
		padding-left: 4%;
		padding-right: 4%;
		padding-top: 15px;
		padding-bottom: 15px;
		bottom: -30px;
	}

	#timeline-description {
		font-size: 95% !important;
	}

	#partners-logo img {
		margin-bottom: 0px;
	}

	#mission-title {
		display: block;
		font-weight: 500;
		font-size: 130%;
		margin-bottom: 10px;
	}

	#navbar #menus {
		display: block;
	}

	#fact {
		width: 110px;
		margin-top: 20px;
	}

	#about .subtitle {
		margin-top: 10px;
		margin-bottom: 10px
	}

	#timeline {
		height: auto;
		padding-bottom: 25px;
	}
}

@media (max-width: 700px) {
	#player #progress-bar {
		width: 150px;
	}

	#player #controls {
		margin-right: 22px;
		width: auto;
	}

	#progress-bar-wrapper {
		margin-left: 6px!important;
		margin-right: 6px!important;
	}

	#player #play {
		padding-left: 18px;
		padding-right: 18px;
	}

	#player #progress {
		width: 228px;
	}

	#player #music-title {
		font-size: 80%;
	}
}

@media (max-width: 550px) {
	#player-controller-view #close {
		width: 24px;
		height: 24px;
	}

	#music-content #album-title {
		font-size: 170%!important;
		display: none;
	}

	#music-content #album-subtitle {
		font-size: 100%!important;
		margin-bottom: 5px!important;

		display: none;
	}

	#music-content img {
		display: none;
	}

	.progress-mobile {
		display: inline-block!important;
		width: auto!important;
	}

	.progress-desktop {
		display: none!important;
	}

	#progress-slash {
		width: 10px;
		text-align: center;
		color: white;
	}
}

@media (max-width: 360px) {
	#volume-container {
		display: none!important;
	}
}