/* ==========================================================================
   Base
   ========================================================================== */
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

body {
  background: rgb(122,70,72);
  background: -moz-linear-gradient(top,  rgba(122,70,72,1) 50%, rgba(0,0,0,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(122,70,72,1)), color-stop(100%,rgba(0,0,0,1)));
  background: -webkit-linear-gradient(top,  rgba(122,70,72,1) 50%,rgba(0,0,0,1) 100%);
  background: -o-linear-gradient(top,  rgba(122,70,72,1) 50%,rgba(0,0,0,1) 100%);
  background: -ms-linear-gradient(top,  rgba(122,70,72,1) 50%,rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom,  rgba(122,70,72,1) 50%,rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a4648', endColorstr='#000000',GradientType=0 );
}

.main {
	position:relative;
	padding-top:133%;
	height:0;
	background:url(../images/bg-main-mobile.jpg) #000 center top no-repeat;
	background-size:cover;
}

p.intro {
  font-size: 1.438em;
}

/*-- Links --*/
a {
  color: #F1733A;
  text-decoration: none;
  font-weight: bold;
}
a:hover, a:active {
  color: #008382;
}

/*-- Splash Ad --*/
aside.box-sets {
  background: transparent;
}

.splash-ad {
  position: fixed;
  visibility:visible;
  top:5%;
  left: 10px;
  right: 10px;
  font-family: serif;
  color: white;
  padding: 10px;
  border: 10px solid #E7E1D0;
  background-color: rgba(0,0,0,.5);
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
  z-index: 99;
  background: url(../images/splash/background-main.jpg) transparent top center no-repeat;
  background-size: cover;
}
.splash-ad p {
  margin: 0;
}
.splash-ad .close-button {
  position: absolute;
  top: -10px;
  right: -10px;
  height: 30px;
  width: 30px;
  background-color: #E7E1D0;
  line-height: 30px;
  font-size: 30px;
  font-family: sans-serif;
  color: black;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}
.splash-ad h2 {
  display: block;
  width: 90%;
  margin: 0 auto;
  height:0;
  padding-top: 25%;
  background-color: pink;
  text-indent: -900px;
  overflow: hidden;
  background: url(../images/splash/csny-title.png) transparent center center no-repeat;
  background-size: contain;
}
.splash-ad .splash-content-mobile {
  margin-top: 20px;
  background: #E7E1D0;
  background: rgba(211,201,172,0.8);
  padding: 10px;
  font-size: 16px;
  color: black;
}
.splash-ad .splash-content-mobile p {
  text-align: center;
  margin: 0;
}
.splash-ad .splash-content,
.splash-ad aside {
  display: none;
}
.splash-ad .button {
  display: block;
  width: 75%;
  margin: -10px auto 0 auto;
  text-align: center;
  color: white;
  box-shadow: 1px 1px rgba(0,0,0,.5);
  text-shadow:  1px 1px rgba(0,0,0,.5);
  line-height: 40px;
  font-size: 25px;
  background: #e15149;
  background: -moz-linear-gradient(top,  #e15149 0%, #e15149 50%, #dc3229 51%, #dc3229 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e15149), color-stop(50%,#e15149), color-stop(51%,#dc3229), color-stop(100%,#dc3229));
  background: -webkit-linear-gradient(top,  #e15149 0%,#e15149 50%,#dc3229 51%,#dc3229 100%);
  background: -o-linear-gradient(top,  #e15149 0%,#e15149 50%,#dc3229 51%,#dc3229 100%);
  background: -ms-linear-gradient(top,  #e15149 0%,#e15149 50%,#dc3229 51%,#dc3229 100%);
  background: linear-gradient(to bottom,  #e15149 0%,#e15149 50%,#dc3229 51%,#dc3229 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e15149', endColorstr='#dc3229',GradientType=0 );
}

.splash-ad .button:hover {
  color: white;
  background: #e15149;
  background: -moz-linear-gradient(top,  #e15149 0%, #e4645e 50%, #e04a42 51%, #dc3229 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e15149), color-stop(50%,#e4645e), color-stop(51%,#e04a42), color-stop(100%,#dc3229));
  background: -webkit-linear-gradient(top,  #e15149 0%,#e4645e 50%,#e04a42 51%,#dc3229 100%);
  background: -o-linear-gradient(top,  #e15149 0%,#e4645e 50%,#e04a42 51%,#dc3229 100%);
  background: -ms-linear-gradient(top,  #e15149 0%,#e4645e 50%,#e04a42 51%,#dc3229 100%);
  background: linear-gradient(to bottom,  #e15149 0%,#e4645e 50%,#e04a42 51%,#dc3229 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e15149', endColorstr='#dc3229',GradientType=0 );
}

.splash-ad a {
  color: #DC3229;
  text-decoration: none;
}
.splash-ad a:hover {
  color: #E15149;
}
.splash-ad .close-link {
  display: block;
  font-weight: bold;
  text-shadow:  0px 0px 5px rgba(255,255,255,.5);
  text-align: center;
  background: #E7E1D0;
  background: rgba(211,201,172,0.9);
  margin: 10px -10px -10px -10px;
  clear: both;

}
.dimmer {
  position: fixed;
  visibility:visible;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
  opacity: .7;
  z-index: 98;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
.splash-ad.closed,
.dimmer.closed {
  visibility:hidden;
  opacity:0;
}

.splash-ad.hide-me,
.dimmer.hide-me {
 display: none;
}

.splash-ad .mobile-cta {
  display: block;
  padding: 5px 10px;
  margin: 10px;
  background-color: #691F00;
  color: white;
  border-radius: 3px;
}

/*--Nav--*/
nav {
	position:absolute;
	top: 61%;
	width:100%;
}

nav ul {
	margin:0;
	padding:0;
	list-style:none;
}

nav ul li {
	list-style:none;
}

nav a {
	-webkit-transition:all 125ms ease-in-out;
	-moz-transition:all 125ms ease-in-out;
	-ms-transition:all 125ms ease-in-out;
	-o-transition:all 125ms ease-in-out;
	transition:all 125ms ease-in-out;
}

nav a:focus {
  outline: none;
}

.main-nav li {
	display:block;
	float:left;
	width:50%;
	text-align:center;
	position: relative;
}

.main-nav a {
	display:block;
	padding:.25em;
	width:100%;
	color:#fff;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:400;
	font-size:20px;
	font-family: "Alegreya", serif;
}

.main-nav span {
  font-size: .3em;
  display: block;
  line-height: 0px;
}

.main-nav li:nth-child(1) a {
	background-color:#008483;
}

.main-nav li:nth-child(1) a:hover {
	background-color:#006C6A;
}

.main-nav li:nth-child(2) a {
	background-color:#D94C4E;
}

.main-nav li:nth-child(2) a:hover {
	background-color:#B74244;
}

.social {
	margin-left:10px;
}

.social li {
	display:block;
	float:left;
	margin:10px 5px;
	width:40px;
	height:40px;
}

.social a {
	display:block;
	overflow:none;
	width:40px;
	height:40px;
	text-indent:-999px;
  opacity:.75;
}

.social a:hover {
	opacity:1;
}

.social .twitter,
.social .facebook {
	background:url(../images/social.png) transparent left bottom no-repeat;
}
.social .facebook {
  background-position: -44px bottom;
}


/*-- Aside --*/
aside {
  position: relative;
  background: #F5F5F5;
}
aside article {
	padding:1em;
}

aside img {
	width:100%;
	height:auto;
}

img.short {display: block;}
img.tall {display: none;}

aside h2 {
  margin-bottom: .5em;
  line-height: 1.2em;
}

.promo {
  border-bottom: 1px solid #ccc;
}

.front-banner {
  margin: 0;
  background: url('/images/csny-homepage-july.jpg') no-repeat scroll center top / contain transparent;
  width: 100%;
  height: 0px;
  padding-top: 65%;
  overflow: hidden;
  position: relative;
}

.front-banner a {
  display: block;
  width: 50%;
  position: absolute;
  bottom: 10px;
  left: 25%;
  text-align: center;
  color: white;
  box-shadow: 1px 1px rgba(0,0,0,.5);
  text-shadow:  1px 1px rgba(0,0,0,.5);
  line-height: 30px;
  font-size: 20px;
  font-family: serif;
  font-weight: normal;
  background: #dc3229;
  background: -moz-linear-gradient(top,  #e15149 0%, #e15149 50%, #dc3229 51%, #dc3229 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e15149), color-stop(50%,#e15149), color-stop(51%,#dc3229), color-stop(100%,#dc3229));
  background: -webkit-linear-gradient(top,  #e15149 0%,#e15149 50%,#dc3229 51%,#dc3229 100%);
  background: -o-linear-gradient(top,  #e15149 0%,#e15149 50%,#dc3229 51%,#dc3229 100%);
  background: -ms-linear-gradient(top,  #e15149 0%,#e15149 50%,#dc3229 51%,#dc3229 100%);
  background: linear-gradient(to bottom,  #e15149 0%,#e15149 50%,#dc3229 51%,#dc3229 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e15149', endColorstr='#dc3229',GradientType=0 );
}
.front-banner a:hover {
  background: #dc3229;
}

/*--Footer--*/

footer {
  background-color: #1d1d1d;
  padding: 10px;
  color: #6f6f6f;
  font-family: sans-serif;
  font-size: .7rem;
  text-align: center;
  border-top: 1px solid #303030;
}
footer a {
  color: #6f6f6f;
  text-decoration: none;
}
footer a:hover {
  color: #008483;
}
footer p {
  margin: 0;
  padding: 0;
}

/*-- Youtube video --*/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*-- Sky video iFrames -
  needed because the padding trick dosent work with these guys --*/

.sky-iframe {
  width: 100%;
  height: 255px;
}
@media only screen and (min-width: 480px) {
  .sky-iframe {
    width: 445px;
    height: 260px;
  }
}
@media only screen and (min-width: 600px) {
  .sky-iframe {
    width: 265px;
    height: 160px;
  }
}
@media only screen and (min-width: 900px) {
  .sky-iframe {
    width: 250px;
    height: 150px;
  }
}
@media only screen and (min-width: 1140px) {
  .sky-iframe {
    width: 335px;
    height: 200px;
  }
}
@media only screen and (min-width: 1600px) {
  .sky-iframe {
    width: 455px;
    height: 270px;
  }
}


/* =========================================================================
   Media Queries
============================================================================ */

@media only screen and (min-width: 480px) {
  .main-nav a {
    font-size: 26px;
  }
  .splash-ad {
  }

}

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

  .splash-ad {
    left: 40px;
    right: 40px;
  }
  .splash-ad .splash-content-mobile {
    display: none;
  }
  .splash-ad .splash-content {
    display: block;
    margin: 30px -20px 0 0;
    background: #E7E1D0;
    background: rgba(232,226,209,0.8);
    padding: 20px 20px 30px 20px;
    font-size: 16px;
    color: black;
  }
  .splash-ad .button {
    margin-top: -10px;
  }

  .main {
    padding-top: 132%;
    background:url(../images/bg-main.jpg) #000 center top no-repeat;
    background-size:cover;
  }
  .main-nav a {
    font-size: 40px;
  }

  img.short {display: none;}
  img.tall {display: block;}

  aside .feature {
    width: 50%;
    float: left;
  }
  aside .promo {
    border-left: 1px solid #ccc;
  }
  aside article {
    width: 50%;
    float: right;
  }
  footer {
    clear: both;
  }
}



@media only screen and (min-width: 768px) {
  /* For general iPad layouts */
  .splash-ad h2 {
    width: 50%;
    float: left;
    padding-top: 14%;
  }
  .splash-ad .splash-content {
    width: 40%;
    float: right;
    padding: 20px;
  }
  .splash-ad .splash-content p {
    margin: 0;
  }

  .splash-ad aside {
    display: block;
    clear: both;
  }
  .splash-ad .button {
    clear: both;
    float: right;
    width: 30%;
    margin: -14px 0 20px 0;
  }
  .splash-ad aside ul {
    margin: 0;
    padding: 0;
  }
  .splash-ad aside li {
    margin: 0 2%;
    padding: 0;
    width: 29.33333%;
    float: left;
  }
  .splash-ad aside li a {
    position: relative;
    padding: 5px 5px 82% 10px;
    height: 0;
    width: 100%;
    display: block;
    color: white;
    background: url(../images/splash/boxset-1.jpg) transparent no-repeat center bottom;
    background-size: contain;
    background-color: #843D00;
    background-color: rgba(0,0,0,.5);
    text-shadow: 0px 0px 4px black;
    text-transform: uppercase;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
  }
  .splash-ad aside li:nth-child(1) a {
    background-image: url(../images/splash/boxset-1.jpg);
  }
  .splash-ad aside li:nth-child(2) a {
    background-image: url(../images/splash/boxset-2.jpg);
  }
  .splash-ad aside li:nth-child(3) a {
    background-image: url(../images/splash/boxset-3.jpg);
  }
  .splash-ad aside li a:hover {
    color: white;
    background-color: black;
    background-color: rgba(0,0,0,.8);
  }
  .splash-ad aside li a:before {
    content: "";
    position: absolute;
    top: -5px;
    right: 0px;
  	width: 0;
  	height: 0;
  	border-top: 10px solid transparent;
  	border-bottom: 10px solid transparent;
  	border-left: 10px solid red;
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
  }
  .splash-ad .close-link {
    margin: 20px -10px -10px -10px;
  }
}

@media only screen and (min-width: 900px) {
  body {
    background: black;
  }
  .splash-ad aside {
    float: none;
    width: 100%;
    padding-top: 5%;
  }
  .main {
    width: 65%;
    float: left;
    padding-top: 85%;
  }
  nav {
    top: 61%;
    bottom: inherit;
  }
  .main-nav a {
    font-size: 3em; /*-- 48px --*/
  }
  aside {
    width: 35%;
    float: right;
  }
  aside .promo {
    border-left: 0;
  }
  img.short {display: block;}
  img.tall {display: none;}

  aside .feature {
    width: 100%;
    float: none;
    clear: both;
  }
  aside article {
    width: 100%;
    float: none;
    padding: 1em;
    clear: both;
  }
}
@media only screen and (min-width: 960px) {
  .splash-ad aside li a {
    position: relative;
    padding: 5px 5px 69% 10px;
  }
}

@media only screen and (min-width: 1140px) {
  .tour-pass-img {
    float: right;
    width: 50%;
  }
  .tour-pass-title {
    float: left;
    width: 50%;
  }
}

@media only screen and (min-width: 1140px) {

  .splash-ad {
    width: 1060px;
    left: 50%;
    margin-left: -530px;
  }
  .splash-ad aside {
    padding-top: 60px;
  }

  .main-nav a {
    font-size: 3.313em; /*-- 53px --*/
  }
  aside article {
    padding: 1em;
  }
}


/*-- Short screens --*/
@media only screen and (max-height: 650px) {

  .splash-ad aside {
    padding-top: 0%;
  }

  .splash-ad .splash-content {
      width: 100%;
      float: none;
      margin-top: 80px;
      padding: 10px;
    }

  .splash-ad aside li a {
    padding: 5px 5px 79% 10px;
    line-height: 1.2em;
  }
}

@media only screen and (max-height: 650px) and (min-width: 600px) {
  .splash-ad h2 {
    width: 100%;
    float: none;
    padding-top: 20%;
  }
  .splash-ad .close-link {
    margin-top: 20px;
  }
}

@media only screen and (max-height: 650px) and (min-width: 768px) {
  .splash-ad h2 {
    width: 30%;
    float: left;
    padding-top: 10%;
  }

  .splash-ad .splash-content {
    width: 70%;
    float: right;
    margin-top: -10px;
    padding: 10px 30px 10px 10px;
  }
  .splash-ad .button {
    margin: -10px 0 20px 0;
  }
}


@media only screen and (max-height: 650px) and (min-width: 920px) {

  .splash-ad h2 {
    width: 30%;
    float: left;
    padding-top: 10%;
  }
  .splash-ad .splash-content {
    width: 70%;
    float: right;
    margin-top: -10px;
    padding: 10px;
  }

  .splash-ad aside {
    padding-top: 8%;
  }

  .splash-ad aside li a {
    padding: 5px 5px 67% 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media only screen and (max-height: 650px) and (min-width: 1000px) {
}


/*== Media Queries Tags - not for production ==*/
.screen-width {
	position:fixed;
	right:0;
	bottom:0;
	z-index:99999;
	display:none;
	padding:0 10px;
	border-radius:5px 0 0 0;
	background-color:rgba(0,0,0,.5);
	color:#fff;
	font-size:12px;
	font-family:sans-serif;
}

.s1 {
	display:block;
}

.window-width {
	position:fixed;
	right:0;
	bottom:45px;
	z-index:99999;
	padding:5px 10px;
	border-radius:3px 0 0 3px;
	background-color:rgba(0,0,0,.5);
	color:#fff;
	text-shadow:1px 1px rgba(0,0,0,.75);
	font-size:12px;
	font-family:sans-serif;
}

@media only screen and (min-width: 480px) {
	.screen-width {
		display:none;
	}

	.s2 {
		display:block;
	}
}

@media only screen and (min-width: 768px) {
	.screen-width {
		display:none;
	}

	.s3 {
		display:block;
	}
}

@media only screen and (min-width: 1140px) {
	.screen-width {
		display:none;
	}

	.s4 {
		display:block;
	}
}

/*======== END Media Queries Tags - not for production =============*/