/* Spotlight */

	.spotlight {

		background-position: center center;
		background-size: cover;
		box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
		height: 400px;
		overflow: hidden;
		position: relative;
	}

		.spotlight:nth-last-of-type(1) {
			z-index: 1;
		}

		.spotlight:nth-last-of-type(2) {
			z-index: 2;
		}

		.spotlight:nth-last-of-type(3) {
			z-index: 3;
		}

		.spotlight:nth-last-of-type(4) {
			z-index: 4;
		}

		.spotlight:nth-last-of-type(5) {
			z-index: 5;
		}

		.spotlight:nth-last-of-type(6) {
			z-index: 6;
		}

		.spotlight:nth-last-of-type(7) {
			z-index: 7;
		}

		.spotlight:nth-last-of-type(8) {
			z-index: 8;
		}

		.spotlight:nth-last-of-type(9) {
			z-index: 9;
		}

		.spotlight:nth-last-of-type(10) {
			z-index: 10;
		}

		.spotlight:nth-last-of-type(11) {
			z-index: 11;
		}

		.spotlight:nth-last-of-type(12) {
			z-index: 12;
		}

		.spotlight:nth-last-of-type(13) {
			z-index: 13;
		}

		.spotlight:nth-last-of-type(14) {
			z-index: 14;
		}

		.spotlight:nth-last-of-type(15) {
			z-index: 15;
		}

		.spotlight:nth-last-of-type(16) {
			z-index: 16;
		}

		.spotlight:nth-last-of-type(17) {
			z-index: 17;
		}

		.spotlight:nth-last-of-type(18) {
			z-index: 18;
		}

		.spotlight:nth-last-of-type(19) {
			z-index: 19;
		}

		.spotlight:nth-last-of-type(20) {
			z-index: 20;
		}

		.spotlight:before {
			background-image: url("images/overlay.png");
			content: '';
			display: block;
			height: 100%;
			left: 0;
			top: 0;
			width: 100%;
		}



			.spotlight .image.main img {
				position: relative;
				
			}

		.spotlight .content {
			-moz-transform:translate(0,0);
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			transform:translate(0,0);
			-moz-transition:-moz-transform 1s ease, opacity 1s ease;
			-webkit-transition:-webkit-transform 1s ease, opacity 1s ease;
			-ms-transition:-ms-transform 1s ease, opacity 1s ease;
			transition:transform 1s ease, opacity 1s ease;
			background:rgba(23, 24, 32, 0.5);
			opacity:1;
			position:absolute;
		}



		.spotlight.top .content, .spotlight.bottom .content {
			left: 0;
			padding: 5.1em 0 3.1em 0;
			width: 100%;
		}

		.spotlight.top .content {
	
			top: 0;
		}

		.spotlight.bottom .content {

			bottom: 0;
		}

		.spotlight.left .content, .spotlight.right .content {
			height:130px;
			top: 120px;
			width: 100%;
		}

		.spotlight.left .content {

			left: 0;
		}

		.spotlight.right .content {

			right: 0;
		}

		.spotlight.style1 .content {
			border-color: #e44c65;
		}

		.spotlight.style2 .content {
			border-color: #5480f1;
		}

		.spotlight.style3 .content {
			border-color: #39c088;
		}

		.spotlight.inactive .content {
			opacity: 0;
		}



		.spotlight.inactive.top .content {
			-moz-transform:translate(0,-5em);
			-webkit-transform:translate(0,-5em);
			-ms-transform:translate(0,-5em);
			transform:translate(0,-5em);
		}

		.spotlight.inactive.bottom .content {
			-moz-transform:translate(0,5em);
			-webkit-transform:translate(0,5em);
			-ms-transform:translate(0,5em);
			transform:translate(0,5em);
		}

		.spotlight.inactive.left .content {
			-moz-transform:translate(-5em,0);
			-webkit-transform:translate(-5em,0);
			-ms-transform:translate(-5em,0);
			transform:translate(-5em,0);
		}

		.spotlight.inactive.right .content {
			-moz-transform:translate(5em,0);
			-webkit-transform:translate(5em,0);
			-ms-transform:translate(5em,0);
			transform:translate(5em,0);
		}

	body.is-touch .spotlight {
		background-attachment: scroll;
	}



/* Dropotron */

	.dropotron {
		background: rgba(39, 40, 51, 0.965);
		border-radius: 4px;
		box-shadow: 0 0.075em 0.35em 0 rgba(0, 0, 0, 0.125);
		list-style: none;
		margin-top: calc(-0.25em + 1px);
		min-width: 12em;
		padding: 0.25em 0;
	}

		.dropotron > li {
			border-top: solid 1px rgba(255, 255, 255, 0.035);
			padding: 0;
		}

			.dropotron > li a, .dropotron > li span {
				border: 0;
				color: rgba(255, 255, 255, 0.75);
				display: block;
				padding: 0.1em 1em;
				text-decoration: none;
			}

			.dropotron > li:first-child {
				border-top: 0;
			}

			.dropotron > li.active > a, .dropotron > li.active > span {
				color: #e44c65;
			}

		.dropotron.level-0 {
			font-size: 0.8em;
			margin-top: 1em;
		}

			.dropotron.level-0:before {
				-moz-transform:rotate(45deg);
				-webkit-transform:rotate(45deg);
				-ms-transform:rotate(45deg);
				transform:rotate(45deg);
				background: #272833;
				content: '';
				display: block;
				height: 1em;
				position: absolute;
				right: 1.5em;
				top: -0.5em;
				width: 1em;
			}






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


	.spotlight {

		background-position: center center;
		background-size: cover;
		box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
		height: 200px;
		overflow: hidden;
		position: relative;
	}
		.spotlight.left .content, .spotlight.right .content {
			height:90px;
			top: 50px;
			width: 100%;
		}
	
	}
/*
	@media screen and (max-width: 980px) {


			.spotlight {
				background-attachment: scroll;
				
				height: auto;
			}

				.spotlight .image.main {
					display: block;
					margin: 0;
					max-height: 40vh;
					overflow: hidden;
				}


				.spotlight .goto-next {
					display: none;
				}

			.spotlight .image.main img {
				position: relative;
				width:100%;
			}

	}


	@media screen and (max-width: 736px) {
			.spotlight {
				background-attachment: scroll;
				height: auto;
			}

				.spotlight .image.main {
					display: block;
					margin: 0;
					max-height: 40vh;
					overflow: hidden;
				}


				.spotlight .goto-next {
					display: none;
				}

			.spotlight .image.main img {
				position: relative;
				width:100%;
				height:100%;
			}
			


	}

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

					.spotlight.left .content, .spotlight.right .content {
			height:100px;
			top: 80px;
			width: 100%;
		}


	}