// compass
@import "compass";

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

/*
 * Mobile
 */
@media only screen 
and (min-width : 320px) 
and (max-width : 767px) {
	.mobile-show {
		display: block !important;
	}

	.mobile-only-hide {
		display: none !important;
	}

	span.mobile-show,
	a.mobile-show {
		display: inline !important;
	}

	.button {
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		padding: 0 13px 0 26px;
		min-width: 128px;

		&.movie-link {
			padding-right: 26px;

			.playbutton {
				margin-right: 16px;
			}

			&:hover {
				padding-right: 60px;
			}
		}

		&:before {
			left: 8px;
			top: 8px;
			bottom: 8px;
		}

		&:after {
			border-left: 16px solid $bright-background-color;
			border-bottom: 40px solid transparent;
		}
		
		&:hover {
			min-width: 163px;
			padding-right: 48px;

			&:after {
				border-top: 40px solid transparent;
				border-bottom: 0px solid transparent;
			}
		}

		&.green {

			&:after {
				border-left: 16px solid $green-background-color;
			}
		}

		&.white {
			
			&:after {
				border-left: 16px solid #fff;
			}
		}
	}

	.title1 {
		display: block;
		font-size: 28px;
		line-height: 32px;
	}

	.title2 {
		line-height: 22px;
		font-size: 15px;
		padding: 5px 15px;
	}

	.title3 {
		font-size: 28px;
		line-height: 32px;
	}

	.title4 {
		font-size: 22px;
		line-height: 26px;
	}

	.wrapper {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	header {
		#mobile-menu,
		.mobile-submenu {
			li {
				.title1 {
					font-size: 16px !important;
					line-height: 24px !important;
				}
			}
		}
	}

	footer {
		#footer-top {
			height: auto;

			.wrapper {

				.contact-data {
					width: 100%;
					padding-bottom: 0;
					margin-bottom: 30px;

					.floatleft,
					.floatright {
						width: 50%;
						max-width: 100%;
						min-width: 190px;
						float: left;
						margin-bottom: 30px;
					}
				}

				ul {
					width: 50%;
					margin-right: 0;
					padding-right: 10px;

					&:first-of-type {
						width: 50%;
					}

					&:last-of-type {
						width: 50%;
					}
				}
			}
		}

		#footer-bottom {
			margin-top: 30px;
		}
	}
}

/*
 * Tablet
 */
@media only screen 
and (min-width : 768px) 
and (max-width : 1023px) {
	.wrapper {
		width: 100%;
		max-width: 980px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.tablet-show {
		display: block !important;
	}

	span.mobile-show,
	a.mobile-show {
		display: inline !important;
	}

	#mobile-menu {
		padding-top: 140px !important;
	}

	#mobile-menu,
	.mobile-submenu {

		li {

			a,
			span {
				padding-top: 15px !important;
				padding-bottom: 15px !important;
			}
		}
	}
}

/*
 * Tablet & Mobile
 */
@media only screen 
and (min-width : 320px) 
and (max-width : 1023px) {
	body {
		height: auto;

		&.no-scroll {
			position: fixed;
		}
	}

	.img-placeholder {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;

		&:after {
			content: "";
			display: block;
			width: 56px;
			height: 42px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -21px -28px;
			background: image-url('sprite_retina.png') no-repeat -757px -13px;
			background-size: $retina-width $retina-height;
		}
	}

	#content {
		width: 100%;
		min-height: 0;
		margin-bottom: 0;
		position: relative;

		&:after {
			display: none;
		}
	}

	#page-content {
		padding-top: 110px;
	}

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

	header {
		background-color: transparent;
		@include transition(top 0.3s, background-color 0.5s);

		&.block-content {
			bottom: 0;
			background-color: rgba(255, 255, 255, 0.7);
		}

		#header-top {
			position: relative;
			z-index: 11;
			ul {
				li {
					span {
						&.stock-change {
							border: none;
						}
					}
				}				
			}
		}

		#header-main {
			height: 60px;
			position: relative;
			z-index: 10;
			nav {
				padding-top: 10px;

				a#logo {
					@include transform(scale(0.8, 0.8));
					// transform: scale(0.8, 0.8);
					margin-left: -20px;
				}

				#mobile-menu-button {
					height: 40px;
					line-height: 40px;
					font-family: "frescobold";
					margin-left: 20px;
					color: $dark-text-color;
					@include transition(color 0.3s);
					position: relative;
					display: block;

					&:after {
						content: "";
						display: block;
						position: absolute;
						left: 10px;
						top: 10px;
						background: image-url('sprite_retina.png') no-repeat -116px -10px;
						background-size: $retina-width $retina-height;
						width: 21px;
						height: 20px;
						opacity: 0;
						@include transform(translateX(100px));
						@include transition(opacity 0.3s, transform 0.3s);
					}

					&.active {
						color: #fff;

						&:after {
							@include transform(translateX(0));
							opacity: 1;
						}
					}
				}

				#mobile-search-button {
					height: 40px;
					width: 40px;
					position: relative;
					display:none !important;

					&:after {
						content: "";
						display: block;
						position: relative;
						background: image-url('sprite_retina.png') no-repeat -234px -343px;
						background-size: $retina-width $retina-height;
						width: 20px;
						height: 20px;
						top: 10px;
						left: 10px;
					}

					&.active:after {
						background-position: -234px -364px;
					}
				}
			}
		}

		#mobile-search-container {
			padding: 20px;
			width: 100%;
			background-color: $default-background-color;
			@include transform(translateY(0));
			z-index: 8;
			position: absolute;
			top: 0px;
			@include transition(transform 0.5s);
			@include box-shadow(0 2px 2px 0 rgba(0, 0, 0, 0.08));

			&.active {
				@include transform(translateY(110px));
			}

			#search-form-mobile {
				position: relative;
				max-width: 400px;
				margin: 0 auto;

				.input {
					margin-bottom: 0;
					padding-left: 40px;
				}
			}
		}

		#mobile-menu,
		.mobile-submenu {
			position: fixed;
			padding-top: 110px;
			background-color: #fff;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			overflow-y: scroll;
			@include transition(transform 0.5s);
			@include transform(translateY(-100%));

			&.active {
				@include transform(translateY(0));
			}

			li {
				margin-left: 67px;
				margin-right: 20px;
				border-bottom: 1px solid $default-border-color;
				display: block;
				font-family: "frescobold";
				font-size: 16px;
				position: relative;

				.title1 {
					margin: 30px 0 10px;
					text-transform: uppercase;
				}

				.toggle-children {
					display: block;
					height: 100%;
					width: 40px;
					position: absolute;
					top: 0;
					right: 0;

					&:after {
						content: "";
						display: block;
						background: image-url('sprite_retina.png') no-repeat -175px -17px;
						background-size: $retina-width $retina-height;
						width: 10px;
						height: 6px;
						position: absolute;
						right: 0;
						top: calc(50% - 3px);
					}

					&.closed:after {
						background-position: -150px -17px;
					}
				}

				a,
				span {
					line-height: 30px;
					padding: 10px 0;
					display: block;
					color: $dark-text-color;
					position: relative
				}

				&.has-submenu a:after {
					content: "";
					display: block;
					height: 11px;
					width: 7px;
					background: image-url('sprite_retina.png') no-repeat -405px -26px;
					background-size: $retina-width $retina-height;
					position: absolute;
					right: 0;
					top: calc(50% - 5px);
				}

				&.active a,
				&.active span,
				a.active {
					color: $bright-text-color;
				}

				&.children {
					display: none;
					opacity: 0;
					@include transition(opacity 0.3s);

					ul {

						li {
							margin: 0 0 0 20px;

							&:last-of-type {
								border-bottom: none;
							}
						}
					}

					&.open {
						display: block;
						opacity: 1;
					}
				}

				&.submenu-title,
				&:last-of-type {
					border-bottom: none;
				}
			}
		}

		.mobile-submenu {
			@include transform(translateY(0));
			@include transform(translateX(1000px));

			&.active {
				@include transform(translateX(0));
			}

			li.back-link {
				margin-left: 0;
				margin-right: 0;
				padding: 0 20px;

				.arrowed-back-link {
					padding-left: 20px;
					font-family: "frescobold";
					margin-top: 0;

					&:after {
						background-position: -259px -24px;
					}
				}
			}
		}
	}

	footer {
		#footer-top {
			height: auto;

			.wrapper {

				.contact-data {
					margin-bottom: 50px;
				}

				ul {
					width: 170px;
					margin-right: 0;
					padding-right: 10px;

					&:first-of-type {
						width: 170px;
					}

					&:last-of-type {
						width: 170px;
					}
				}
			}
		}

		#footer-bottom {
			margin-top: 30px;
		}
	}
}

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

				ul li {
					margin-left: 30px;
				}
			}
		}

		#header-main {
			nav {
				width: 1180px;

				& > ul > li {
					margin-left: 30px;
				}
			}
		}
	}

	footer {
		.wrapper {
			width: 1180px;

			ul {
				margin-right: 70px;
			}
		}
	}

	.detail-menu {
		.wrapper {
			width: 1180px;
		}
	}

	.wrapper {
		width: 1180px;
	}
}