// compass
@import "compass";

// scss config
@import "imports/config";

/*
 * Mobile
 */
@media only screen 
and (min-width : 320px) 
and (max-width : 767px) {
	#home-top {
		padding: 20px 0 0;

		.column {
			width: 100%;
			margin-right: 0;
			margin-bottom: 50px;

			.about-top-content {
				margin: 0;
				min-height: 0;

				.subtitle {
					margin-top: -10px;
				}
			}

			.news-container,
			.events-container {
				min-height: 0px;
				margin: 0;
			}

			&:last-of-type {
				margin-bottom: 30px;
			}
		}
	}

	.home-block {
		min-height: 0;
		padding-bottom: 50px;

		.content-text {
			width: 100%;
		}

		.button {
			min-width: 215px;

			&:hover {
				min-width: 250px;
			}
		}
	}

	#markets {
		background: $default-background-color;
	}

	#careers {
		background: $bright-background-color;

		#jobs {
			width: 100%;
		}

		.button {
			min-width: 180px;

			&:hover {
				min-width: 210px;
			}
		}

		#circles-container {
			display: none;
		}

		#bg-circles {
			left: auto;
			right: -208px;
			top: -213px;
		}
	}

	#cr {
		background: $dark-background-color;
		max-height: none;

		.title2 {
			color: $dark-text-color;
			background-color: #fff;
			font-family: "frescobold";
		}

		.score {
			line-height: 36px;
			font-size: 18px;
			margin-bottom: 30px;

			.year {
				font-size: 28px;
			}

		.score-bar {
			position: absolute;
			left: 0;
			bottom: -4px;
			height: 4px;
			@include transition(width 0.5s);
		}
	}

		.overlay,
		#cr-icons {
			display: none;
		}
	}

	#about-us {
		background: $default-background-color;

		.bg-overlay {
			.bottom {
				height: 20px;
			}
			.top {		
				bottom: 20px;

				&:before {
					right: calc(50% + 100px);
				}

				&:after {
					left: calc(50% - 100px);
				}
			}
		}

		#key-figures-container {
			width: 100%;
			margin-bottom: 30px;
			max-width: 460px;

			.key-figure {
				width: 50%;
				font-size: 16px;
				height: 160px;

				.number {
					font-size: 32px;
					line-height: 50px;
				}

				.icon {
					width: 60px;
					height: 60px;
					top: calc(50% - 5px);
					left: calc(50% - 30px);
				}
			}
		}
	}

	#update-page {

		.title1 {
			display: inline-block;
		}

		.browser-container {
			width: 100%;
			max-width: 780px;

			#chrome,
			#firefox {
				width: 100%;
			}

			#chrome {
				border-right: none;
				margin-bottom: 50px;
			}
		}
	}
}

/*
 * Tablet
 */
@media only screen 
and (min-width : 768px) 
and (max-width : 1023px) {
	#home-top {
		padding: 30px 0 40px;

		.column {
			width: calc(50% - 25px);
			margin-right: 50px;
			margin-top: 0;
			margin-bottom: 0;

			&:nth-of-type(1) {
				margin-right: 0;
				width: 100%;
				margin-bottom: 40px;
			}

			&:last-of-type {
				margin-bottom: 0;
			}

			.about-top-content {
				margin: 0;
				min-height: 0;

				.subtitle {
					margin-top: -10px;
				}
			}

			.news-container,
			.events-container {
				min-height: 0px;
				margin: 0;
			}
		}
	}

	.home-block {
		min-height: 0;
		padding-bottom: 50px;

		.content-text {
			width: 50%;
		}
	}

	#careers {
		background-size: 800px;

		#circles-container {
			left: calc(50% + 72px);
			transform: scale(0.8, 0.8);
		}
	}

	#cr {
		.title1,
		.content-text {
			width: 360px;
		}

		#cr-icons {
			left: auto;
			top: auto;
			right: 40px;
			bottom: 20px;
		}
	}
}

/*
 * Tablet & Mobile
 */

@media only screen
and (min-width : 320px)
and (max-width : 1023px) {
	#markets {

		#markets-accordion {
			display: block;
			width: 100%;
			background-color: #fff;

			.accordion-market {
				height: 55px;
				overflow: hidden;
				@include transition(height 0.6s);

				.market-title {
					height: 55px;
					width: 100%;
					background-color: #ff3a5e;
					line-height: 20px;
					padding: 17px 52px 13px 20px;
					color: #fff;
					font-family: "fresco";
					font-size: 17px;
					position: relative;
					cursor: pointer;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

					&:after {
						content: "";
						display: block;
						height: 8px;
						width: 12px;
						background: image-url('sprite_retina.png') no-repeat -157px -308px;
						background-size: $retina-width $retina-height;
						position: absolute;
						right: 20px;
						top: calc(50% - 4px);
					}
				}

				&:nth-of-type(2) .market-title {
					background-color: #f22a55;
				}
				&:nth-of-type(3) .market-title {
					background-color: #e5144c;
				}
				&:nth-of-type(4) .market-title {
					background-color: #d80043;
				}
				&:nth-of-type(5) .market-title {
					background-color: #cc003a;
				}
				&:nth-of-type(6) .market-title {
					background-color: #bf0031;
				}
				&:nth-of-type(7) .market-title {
					background-color: #b20029;
				}
				&:nth-of-type(8) .market-title {
					background-color: #a60021;
				}
				&:nth-of-type(9) .market-title {
					background-color: #99001a;
				}
				&:nth-of-type(10) .market-title {
					background-color: #900014;
				}
				&:nth-of-type(11) .market-title {
					background-color: #87000d;
				}
				&:nth-of-type(12) .market-title {
					background-color: #7e0002;
				}
				&:nth-of-type(13) .market-title {
					background-color: #740002;
				}
				&:nth-of-type(14) .market-title {
					background-color: #6b0003;
				}
				&:nth-of-type(15) .market-title {
					background-color: #610004;
				}
				&:nth-of-type(16) .market-title {
					background-color: #580004;
				}

				.market-content {
					padding: 20px;
					position: relative;

					.intro {
						margin-bottom: 20px;
						position: relative;
						z-index: 2;
					}

					.button {
						min-width: 168px;
						position: relative;
						z-index: 2;

						&:hover {
							min-width: 200px;
						}
					}

					.circles {
						height: 160px;
						width: 160px;
						position: absolute;
						right: -80px;
						bottom: -50px;
						background: image-url('circles_gray.png') no-repeat center center;
						background-size: 160px 160px;
						z-index: 1;

						@include animation-duration(6s);
						@include animation-fill-mode(both);
						@include animation-timing-function(linear);
						@include animation-iteration-count(infinite);
						@include animation-name(rotate_clockwise);
					}
				}

				&.active {
					height: auto;

					.market-title:after {
						background-position: -157px -288px;
					}
				}
			}
		}
	}
}

/*
 * Large screens
 */
@media only screen 
and (min-width: 1300px) {
	.wrapper {
		width: 1180px;
	}

	#home-top {
		.wrapper {

			.column {
				width: 360px;
			}
		}
	}

	#markets {

		#piechart {
			margin-left: 270px;
		}

		#markets-fallback {
			margin-left: 120px;
		}

		.market-slides {
			left: 750px;
		}
	}

	#cr {
		min-height: 680px;

		#cr-icons {
			top: 110px;
		}
	}
}