/* HOMEPAGE */

	/* Sector Intro */

		.sector-intro {
			font-size: 30px;
			border-bottom: 2px solid #1cbbb4;
			margin-bottom: 2em;
			padding-bottom: 0.6em;
		}

		
		.sector-intro-logo {
			overflow: hidden;
		}

			.sector-intro-logo img {
				height: 100px; 
				margin-right: 10px; 
				float:left;
				position: relative;
				top: 3px;
			}

			.sector-intro-logo p {
				font-size: 22px;
				font-size: 2.2rem;
				margin-bottom: 12px;
			}

	/* Turquise Bar */

		.homepage-turquoise-bar {
			height: 210px;
		}
			
	/* Slideshows */
		.sector-phone-slideshow-container {
			position: relative;
			height: 442px;
		}

		/* Controls */
			.cycle-prev {
				display: block;
				width: 51px;
				height: 51px;
				background: url(../../../../img/marketing/btn-previous.png) no-repeat;
				position: absolute;
				left: 15%;
				top: 55%;
			}

			.cycle-next {
				display: block;
				width: 51px;
				height: 51px;
				background: url(../../../../img/marketing/btn-next.png) no-repeat;
				position: absolute;
				right: 15%;
				top: 55%;
			}

		/* Description */
			.sector-phone-slideshow-description {
				width: 285px;
				/*margin-bottom: 120px;*/
			}
				.sector-phone-slideshow-description h2 {
					font-size:30px;
					font-size: 3rem;
					margin-bottom: 0.5em;
				}
				.sector-phone-slideshow-description p {
					font-size:22px;
					font-size: 2.2rem;
				}
		
		/* Phone Slideshow */
			.sector-phone-slideshow {
				background: url(../../../../img/marketing/home/phone-with-wifi-slideshow-container.png) no-repeat center top;
				height: 643px;
				left:50%;
				margin-left:-284px;
				position: absolute;
				top: -25px;
				width: 568px;
			}
				.sector-phone-slideshow .cycle-slideshow {
					width: 216px;
					height: 384px;
					margin: 80px auto;
				}

		/* Features Slideshow */
			.sector-features-slideshow {
				position: absolute;
				top: 0;
				right: 0;
				width: 280px;
			}
				.sector-features-slideshow .cycle-slideshow div {
					width: 100%;
				}
				.sector-features-slideshow p {
					font-size: 22px;
					font-size: 2.2rem;
					margin-bottom: 1em;
				}
				.sector-features {
					font-size: 22px;
					font-size: 2.2rem;
					font-weight: normal;
					text-transform: uppercase;
				}

				.cycle-pager {
					text-align: center;
					margin-bottom: 24px;
					text-align: center;
					margin-bottom: 24px;
					position: relative;
					top: 90px;
				}
					.cycle-pager span {
						font-family: arial;
						font-size: 60px;
						width: 24px;
						height: 16px;
						display: inline-block;
						color: #8dddd9;
						cursor: pointer;
					}
						.cycle-pager span.cycle-pager-active {
							color: #ffffff;
						}

		/* Mobile text */
			.sector-features-mobile-slideshow{
				display:none;
			}


	/* Toolkits */
		.sector-toolkits {
			padding: 2.5em 0 1.5em;
			padding: 46px 0 9px 0;
			overflow: hidden;
			clear: both;
		}

		.sector-toolkits h2 {
			margin-bottom: 1em;
		}

		.toolkit {
			
			margin-bottom: 41px;
			float: left;
			width: 32%;
			position: relative;
		}
			.toolkit-container {
				width: 240px;
				text-align: left;
				display: inline-block;
			}
			.toolkit i.download {
				background: url(../../../../img/marketing/icon-download.png) no-repeat;
				width: 42px;
				height: 51px;
				display: inline-block;
				margin-right: 10px;
				vertical-align: top;
			}
		.sector-toolkits a {
			
			display: inline-block;
			height: 51px;
			font-size: 22px;
			font-size: 2.2rem;
		}

		.sector-toolkits .item-0 { text-align: left; }
		.sector-toolkits .item-1 { text-align: center; margin: 0 2% 41px 0;}
		.sector-toolkits .item-2 { text-align: right; }
		
		.sector-toolkits span {
			bottom: 0;
			/*left: 52px;*/
			display: inline-block;
			max-width: 182px;
			padding-top: 3px;
		}

	/* Case Studies */
		.sector-case-studies {
			overflow: hidden;
			clear: both;
			padding: 42px 0 0 0;
		}
		.sector-case-studies h2 {
			margin-bottom: 42px;
		}

		.sector-case-studies:after {
			content: "";
			display: inline-block;
			width: 100%;
		}

		.case-study {
			margin-bottom: 25px;
			float: left;
			width: 32%;
			position: relative;
		}
			.item-0 { clear: left; }
			.item-1 { margin: 0 2%;	}

			.case-study-container {
				width: 240px;
				max-width: 100%;
			}
				.item-1 .case-study-container { margin: 0 auto; }
				.item-2 .case-study-container { margin: 0 auto; }
				.item-2 .case-study-container { position: absolute; right: 0; }

			.case-study h3 {
				font-weight: 300;
				text-transform: none;
			}
			.case-study img {
				border-bottom: 7px solid #111940;
				margin-bottom: 3px;
			}

	/* Admin */

		.sector-admin {
			position: relative;
			padding: 42px 0 110px 0;
		}

		.sector-admin-description,
		.sector-admin-text-section {
			width: 32%;
			margin-right: 2%;
			float: left;
		}
		.sector-admin-description h2 {
			margin-bottom: 29px;
		}
		.sector-admin-description p {
			font-size: 24px;
			font-size: 2.4rem;
		}

		.sector-screen-slideshow {
			background: url(../../../../img/marketing/sector/screen-slideshow-container.png) no-repeat center top;
			height: 643px;
			position: absolute;
			top: 0;
			right: 0;
			width: 64%;
		}

		.sector-screen-slideshow .cycle-slideshow {
			width: 434px;
			height: 260px;
			margin: 20px auto;
		}

		.sector-admin-text-sections {
			clear: both;
			overflow: hidden;
			border-top: 2px solid #ffffff;			
		}

		.sector-admin-slideshow-section {
			min-height: 450px
		}

		.sector-admin-text-section h3 {
			margin: 1em 0;
		}

		.sector-admin-text-section p,
		.sector-admin-text-section h3 {
			font-size: 22px;
			font-size: 2.2rem;
		}

/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/

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

		.sector-intro {
			margin-bottom: 1.6em;
		}

		.sector-phone-slideshow-description {
			width: 100%;
		}

		.sector-phone-slideshow,
		.sector-phone-slideshow-container {
			position: static;
			margin-left: 0px;
			width: auto;
			margin-top: 2em;
		}
		.sector-phone-slideshow-container {
			height: auto;
		}

		.sector-features-slideshow {
			display: none;
		}

		.homepage-turquoise-bar {
			margin-top: -250px;
		}

		.sector-phone-slideshow{
			padding-top: 80px;
			position: relative;
			left: 0;
			top: 0;
		}
		.sector-phone-slideshow .cycle-slideshow {
			margin-top: 0;
		}

		.cycle-overlay {
			background-color: rgba(0,0,0,0.9);
			color: #fff;
			width: 91%;
			height: 95%;
			padding: 5%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			display: block;
		}

		.cycle-overlay {
			opacity: 0;
			transition-property: opacity;
			/*
			transition-timing-function: linear;
			transition-delay: 500ms;
			transition-duration: 500ms;
			*/
		}
		.cycle-slide-active .cycle-overlay {
			transition-delay: 3s;
			opacity: 0.9;
		}

			.cycle-overlay-close{
				color:#ffffff;
				position:absolute;
				top:5px;
				right:5px;
				font-size:17px;
			}

	}

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

		.case-study {
			max-width: 32%;
			text-align: left;
		}
		.sector-case-studies img {
			max-width: 100%;
		}
		
		.toolkit {
			float: none;
		}

		.sector-toolkits { padding: 46px 0 25px 0; }
			.sector-toolkits .item-0,
			.sector-toolkits .item-1,
			.sector-toolkits .item-2 {
				text-align: left;
				margin: 0 0 25px 0;
			}

		.sector-phone-slideshow {
			background: url(../../../../img/marketing/home/phone-with-wifi-slideshow-container-no-shadow.png) no-repeat center top;
		}

		.sector-screen-slideshow {
			position: static;
			width: 100%;
			height: 460px;
			padding-top: 1px; /* No idea why this works but positions slideshow vertically in the correct place */
		}
		.cycle-pager {
			top: 96px;
		}

		.sector-admin-description, .sector-admin-text-section {
			width: 100%;
			float: none;
		}

	}

	@media screen and (max-width: 745px) {
		.cycle-next, .cycle-prev {
			display: none;
		}
	}

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

		.sector-screen-slideshow {
			background-size: 268px;
			height: 290px;
		}

		.cycle-pager {
			text-align: center;
			margin-bottom: 24px;
			text-align: center;
			margin-bottom: 24px;
			position: relative;
			top: 55px;
		}

		.sector-screen-slideshow .cycle-slideshow {
			height: auto;
			width: 255px;
			margin: 8px auto;
		}
		.sector-screen-slideshow .cycle-slideshow img {
			max-width: 100%;
		}
	}

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

		.case-study {
			max-width: 100%;
		}

		.case-study {
			float: none;
			width: 100%;
			position: relative;
		}
			.item-1 { margin: 0 0 25px 0; }

			.case-study-container {
				width: 100%;
			}
				.item-1 .case-study-container { margin: 0 auto; }
				.item-2 .case-study-container { margin: 0 auto; }
				.item-2 .case-study-container { position: static; }

	}