/*-------------------- Hero Styles --------------------*/
.hero-content {
	max-width: 1210px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	display: table;
	width: 100%;
	height: inherit;
}

.hero-content > .inner {
	width: 100%;
	margin-top: 196px;
    max-width: 715px;
	position: relative;
	
}

.hero-content h1 {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 64px;
	font-weight: normal;
	margin-bottom: 20px;
	color: #fff;
	position :relative;
	text-shadow: #000 0em 0em 0.2em;
}

.hero-content .video-link {
	position: relative;
	/*z-index: 4;*/
	cursor:pointer;
}

.hero-content .video-link span {
	font-size: 28px;
	color: #fff;
	padding-left: 20px;
}

.hero-content .video-link img {
	position: relative;
	bottom: -30px;
}

.hero-tagline {
	font-size: 28px;
}

.hero-tagline .left-dotted-border {
  border-left: 1px dotted #fff;
  padding-left: 5px;
}

#HeroSlide .featured-video a .video-button{
    display: table-cell;
    vertical-align: middle;
}

#HeroSlide .featured-video a .video-button img{
    margin-right: 25px;
}

#HeroSlide .featured-video {
    max-width: 1210px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: table;
  width: 100%;
  height: inherit;
  margin-top: 70px;
}

#HeroSlide .featured-video a {
    color: #fff;
    font-size: 26px;
    text-decoration: none;
    display: table;
}

#HeroSlide .featured-video a span {
    display: table-cell;
    vertical-align: middle;
}



/* Video Styles */
#video-modal {
    display: none;
}

#video-modal.active {
    display: block;
}

#video-modal .window {
  z-index: 101;
  position: fixed;
  max-width: 752px;
  background: #000;
}

#video-modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#d3000000, endColorstr=#d3000000);
  z-index: 100;
}

#video-modal .close {
  position: absolute;
  top: -22px;
  right: 0;
  height: 22px;
  width: 35px;
  background-image: url('/-/media/shared/verticalscroller/images/video_modal_close_v2.png');
  cursor: pointer;
}

/*-------------------- Other Sections --------------------*/
.section {
	background: transparent center no-repeat;
	background-size: cover;
	max-height: 960px;
	position: relative;
    overflow: hidden;
}

.spacer.stick-right {
	background-position: right;
}

.spacer.stick-left {
	background-position: left;
}

.content-panel {
	width: 100%;
	position: relative;
}

.content-panel.blue.bottom-right {
	padding-top: 128px;
	padding-bottom: 60px;
}

.content-panel {
	padding-top: 100px;
	padding-bottom: 140px;
}

.content-panel.right  .panel {
	float: right;
}

.content-panel > .inner {
	max-width: 1210px;
	padding: 0 20px;
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
}

.content-panel .panel {
	box-sizing: border-box;
	color: #fff;
}

.content-panel.left .panel {
	top: 100px;
	left: 20px;/*equal to padding of .content-panel > .inner*/
	padding: 50px;
	width: 600px;
	border-radius: 0 0 0 80px;
}

.content-panel.right .panel {
	top: 100px;
	right: 20px;/*equal to padding of .content-panel > .inner*/
	padding: 50px;
	width: 50%;
	border-radius: 0 0 0 80px;
}

.content-panel.bottom-right .panel {
	padding: 31px 30px;
	border-radius: 0 0 0 40px;
	float: right;
}

.content-panel.blue .panel {
	background-color: rgba(0, 187, 229, .8);
}

#CeoSlide .content-panel.blue .panel {
    min-height: 620px;
 }

.content-panel.blue .panel .header {
	margin-bottom: 40px;
}

.content-panel.green .panel {
	background-color: rgba(183, 209, 16, .8);
}

.content-panel.orange .panel {
	background-color: rgba(222, 110, 13, .8);
}

.content-panel.magenta .panel {
	background-color: rgba(194, 29, 99, .8)
}

.content-panel.light-orange .panel {
	background-color: rgba(253, 184, 19, .8);
}

.panel-content h2 {
	font-size: 32px;
	margin-bottom: 16px;
	font-weight:normal;
}
.panel-content .intro-text{
	font-size:20px;
	padding-bottom:18px; 
	margin-bottom:20px; 
	border-bottom: 1px dotted white;
}

.panel-content .header-image {
  float: left;
  /*width: 40px;*/
  margin-right: 10px;
}

.panel-content  .panel-text {
	width: 100%;
}

.panel-content h3{
	font-size:22px; 
	font-weight: bold; 
	margin-bottom: 20px;
    position: relative;
    top: 5px;
}

.panel-content p {
	font-size: 18px;
	margin-bottom: 16px;
	line-height: 1.3;
}

.main-content-area {
	height: 100%;
	width: 100%;
	position: relative;
}


@media screen and (max-width: 767px) {
	.spacer {
		height: auto;
	}
	
	.main-content-area {
		position: static;
	}

    #HeroSlide .featured-video a {
        font-size: 22px;
    }

    #HeroSlide .featured-video a .video-button {
        margin-right: 10px;
    }

    #HeroSlide .featured-video a span {
      top: 23px;
    }

	.stick-right, .stick-left {
		background-image: none !important;
  		position: relative; 
		max-height: none;
	}
	
	.content-panel {
		position: static;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	.content-panel .panel {
		position: static;
	}
	
	.content-panel > .inner {
		padding: 0 0 0px 0;
	}
	
	.content-panel.left .panel, .content-panel.right .panel {
		width: 100%;
		padding: 20px;
		left: 0px;
		border-radius: 0px;
	}
	
	.content-panel.right .panel {
		margin-bottom: 0px;
	}
	
	.content-panel.bottom-right .panel {
		display: inline-block;
		width: 100%;
		max-width: 100%;
		background-color: rgba(49, 189, 230, 1);
	}
	
	.content-panel.blue.bottom-right {
	    padding-top: 60px;
	    padding-bottom: 0px;
	    position: relative;
		z-index: 7;
  		top: 70px;
	}
	
	.content-panel.blue .panel .header {
	   margin-bottom: 0px;
	}
	
	.content-panel > .inner > .panel  {
	    height: 57px;        
		margin-top: -57px;
	    overflow: hidden;
		border-radius: 0px 0px 0px 28px;
	}

    #CeoSlide .content-panel.blue .panel {
        min-height: 0px;
    }

	#HeroSlide {
		position: relative; 
		z-index: 9;
        overflow: visible;
	}
	
	#HeroSlide .content-panel > .inner > .panel {
		height: auto;
        margin-top: 0px;
	}

 
	
	.content-panel > .inner > .panel.on  {
	    height: auto;
		border-radius: 0px 0px 0px 0px;
	}
	
	.panel-content h2 {
		margin-top: 0px;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 36px;
		float: left;
        width: 80%;
	}
	
	.panel-content h3 {
		margin-bottom: 5px;
	}
	
	.panel-content .intro-text {
		font-size: 26px;
		border-bottom: 3px dotted white;
		margin-top: 20px;
	}
	
	.panel-content .header-image {
		float: left;
	    width: 15%;
        height: 80px;
	    margin-right: 3%;
	}
	
	.panel-content  .panel-text {
		float: left;
		width: 82%;
	}
	
	#CeoSlide .panel-content p{
		font-size: 24px;
	}

    .panelToggle {
        padding: 0px 5px;
        margin-top: -10px;
        width: 25px;
        height: 37px;
        float: right;
        background:url('/-/media/shared/verticalscroller/images/arrowsoff.png') no-repeat; 
        background-position: right;
    }
	
    .panelToggle:hover {
        cursor: pointer;
    }
	
    .panelToggle.on {
        background:url('/-/media/shared/verticalscroller/images/arrowson.png') no-repeat; 
    }
	.hero-tagline {
	  font-size: 16px;
	  text-align: center;
	}
		
	.hero-content > .inner {
		margin-top: 60px;
	}

	.hero-content h1 {
		font-size: 26px;
		text-shadow: #000 0em 0em 0.2em;
	}
	
	#QualitySlide .windowImage {
  		margin-top: 151px;
		margin-bottom: -3px;
	}
	
	.windowImage {
		background-size: 103%;
		background-repeat: no-repeat;
		border-radius: 0 0 0 35px;
	}
	
	.windowImage img {
		width: 100%;
	}
}

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

    #video-modal .window {
        top: 0px !important;
    }
}