/* ==========================================================================
	Structural
	========================================================================= */

	.primary-column {
		width: 65.5%;
	}

	.secondary-column {
		width: 30.5%;
	}

  .dimmed {
  position: relative;
}

.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
}

  .secondary-column > a:first-child {
    margin-top: 20px;
  }

	.primary-column *,
	.secondary-column * {
		max-width: 100%;
	}

	.btn-group .btn {
		margin: 3px 0;
	}

  /* Tablet */
  @media (max-width: 1155px) {

  }

  /* Phone */
  @media (max-width: 766px) {

    #headerLogo {
      display: none;
    }

    #headerLogoNext {
      display: block;
    }

    .primary-column, .secondary-column {
      width: 100%;
      margin: 0;
      -webkit-box-szing: border-box;
      -moz-box-szing: border-box;
      box-szing: border-box;
    }

    img { height: auto; }

    .videoContainer-feature iframe {
      height: auto;
    }

  }



/* ==========================================================================
	Cosmetic
	========================================================================= */

	.boxed {
		padding: 20px;
    background-color: #fff;
    border: 1px solid rgba(188, 188, 188, .20);
  }

	.brand-txt {
		color: #ea1a38 !important;
	}

  .txt-color {
    color: #222 !important;
  }

	.brand-alt-txt {
		color: #444 !important;
	}

	.section-header {
		padding-bottom: .25em;
		border-bottom: 1px solid #cccccc;
	}

/* ==========================================================================
  Performances List
  ========================================================================= */

  .show-info {
    padding: 25px;
  }

  .show-meta {
    display: block;
  }

/* SHL @ 12/21/2018

Title margin increased to make room for National Theatre Live Event Cards


  .show-info .title {
    margin: 25px 0 15px;
    font-size: 1.8em;
  }
*/

  .show-info .title {
    margin: 25px 0 5px; /*increased from 25px 0 15px*/
    font-size: 1.8em;
  }

/* ==========================================================================
	Performances List // Responsive
	========================================================================= */

  @media (min-width: 767px) and (max-width: 999px) {
    .eBox {
      width: 48%;
    }

    .eBox .show-info .btn {
      padding: 10px;
    }

    .eBox .show-info {
      padding: 10px;
    }

    .secondary-column .lg-btn {
      width: 100%;
      padding: 10px;
      font-size: 1em;
    }
  }

  @media (max-width: 999px) {
    .secondary-column .hasDatepicker {
      display: none;
    }
  }

/* ==========================================================================
	Performance Detail
	========================================================================= */

	.performance-info .show-title {
		margin-top: 20px;
		font-weight: bold;
		font-size: 36px;
	}

	.performance-info .show-date {
		margin: .5em 0 .1em;
	}

	.performance-info .show-billing {
		margin: 1em 0 .25em;
	}

	.performance-support {
		padding: 20px 0;
		margin: 20px 0;
		border-top: 1px solid #cccccc;
	}

 /* ==========================================================================
  Performance Detail // Responsive
  ========================================================================= */

  .performance-detail-wrapper {
    display: block;
    width: 100%;
  }

  .performance-detail-wrapper > .eight.columns {
    margin: 0;
  }

  /* ==========================================================================
  	Newsroom
  	========================================================================= */
    .singlePostsDivider{
      margin:0 0 20px 0;
    }
    .news-btn.btn{
      background-color: #555;
      color: white;
      font-family: 'Droid Sans', sans-serif;
      padding: 6px 12px;
    }

    .news-btn.btn:hover{
      background-color: #ea1a38;
    }

  .singlePostsDivider{
    margin:0 0 20px 0;
  }

  .news-btn.btn{
    background-color: #555;
    color: white;
  }

/* ==========================================================================
  Masthead
  ========================================================================= */

  .masthead {
    width: 100%;
    position: relative;
    margin: 0 0 0;
    padding: 0;
  }

  .masthead-img-link {
    display: block;
  }

  .masthead-img {
    max-width: 100%;
    display: block;
  }

  .masthead-img-left {
    float: left;
    width: 49.8%;
  }

  .masthead-img-right {
    margin-left: 50.2%;
    width: 49.8%;
  }

.masthead-img-right img, .masthead-img-left img {
  width: 100%;
}

/* ==========================================================================
  Masthead Drawer
  ========================================================================= */

  .drawer-container {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }

  /* Open button, not open state */
  .drawer-container .slider-open {
    display: inline-block;
    padding: 10px 40px;

    position: absolute;
    right: 0;
    top: 20px;
    background-color: rgba(0, 0, 0, .85);
    border: 1px solid #fff;
    border-right: 0;
    border-radius: 5px 0 0 5px;

    color: #fff;
    text-transform: uppercase;
    line-height: 1.4;
    font-size: 18px;
  }

  .drawer-container .slider-target {
    height: 100%;
    overflow: hidden;
  }

  .drawer-container .slider-open .trigger-text {
    position: relative;
  }

  .drawer-container .slider-open .trigger-text:before {
    content: "\25C0";

    position: absolute;
    left: -20px;
    top: 2px;
    font-size: .75em;
    color: #ea1a38;
  }

  .drawer-container.open .slider-open {
    display: none;
  }

  .drawer-container .slider-open:hover {
    background-color: rgba(0, 0, 0, .95);
    text-decoration: none;
  }

  .drawer-container .slider-close {
    position: absolute;
    top: 15px;
    right: 10px;
    font-size: 1.5em;
  }

  .drawer-container .slider-close:hover {
    text-decoration: none;
    color: #fff;
  }

  .drawer-list {
    width: 450px;
    height: 100%;
    padding: 10px;
    margin: 0;
    list-style: none;
    background-color: rgba(0, 0, 0, .85);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  .drawer-list .drawer-item {
    display: block;
    height: 20%;
    padding: 10px 0;
    margin: 0;
    font-size: 0;
    border-top: 1px solid #555;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  .drawer-list .drawer-item:first-child {
    border-top: 0;
  }

  .drawer-list .drawer-img-link {
    max-width: 50%;
    display: inline-block;
    vertical-align: middle;
    padding-right: 5%;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  .drawer-list .drawer-img {
    max-width: 100%;
    display: block;
  }

  .drawer-list .show-data {
    width: 50%;
    display: inline-block;
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
  }

  .drawer-list .show-title {
    margin: 0;
    line-height: 1.1;
    font-size: 20px;
    font-weight: bold;
  }

  .drawer-list .ticket-link {
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    margin-top: 1em;
  }

  .drawer-list .ticket-link:hover {
    color: #ea1a38;
    text-decoration: none;
  }

  /* Tablet */
  @media (max-width: 1155px) {
    .drawer-list,
    .drawer-list .drawer-item {
      height: auto;
    }
  }

  /* Phone */
  @media (max-width: 766px) {
    .drawer-container {
      display: none;
    }
  }

/* ==========================================================================
  Frontpage Responsive // Phone
  ========================================================================= */

  @media (max-width: 766px) {
    .frontpage-grid {
      margin: 0 2% 2%;
    }

    .frontpage-grid .column {
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      margin: 2% 0;
    }

    .frontpage-grid a {
      display: block;
    }

    .frontpage-grid img {
      width: 100%;
      display: block;
    }
  }

/* ==========================================================================
  Override
  ========================================================================= */

/* footer bar overrides */
.respAsidesText {
  display: none;
  font-family: 'Droid Sans';
  width: 100%;
}

.asidesText:after {
  content: "\25B6";
  color: #ea1a38;
}

@media (max-width: 735px) {
  .respAsidesText {
    display: block;
  }

  .asidesBanner .asidesTitle {
    border-right: 0;
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #fff;
  }

  .asidesWrapper {
    text-align: center;
    display: block;
    width: 75% !important;
  }

  .asidesWrapper .arrow-right {
    display: none;
  }
}

  .main-content h1{
    padding-top: 15px;
    /*adding some padding between
    the H1 tag and featured image*/
  }
  h6{
	  font-weight: bold;
	  font-size: 2rem;
	}

  hr{
    margin-bottom:2rem;
  }

	.customNavBox{
    /*for some reason this in combination with .boxed padding fixes custom nav
    spacing on that one page*/
	  margin:3px 5px;
	}

	.customNavText p{
	  text-shadow: 1px 1px 10px #333;
	}

	.featuredImageContainer img{
	  width:785px;
		margin: 0 0 10px 0;
	}
	.videoContainer{
		margin:5px 0 10px 0;
	}

	.featuredAllMedia {
		/*adds horizontal rule to seperate featured media item
		in watch and listen page*/
    border-bottom: 3px solid #dddedf;
    margin-bottom: 10px;
	}
  .subTertiaryTitle h5 a{
    /*text-transform: uppercase;*/
    /*font-size: 18px;*/
    font-weight: 300;
  }

	#nav-terriary ul{
	  text-indent: -1.8em
	}
  #nav-tertiary .tertiaryLi li{
    line-height: 25px;
    margin-bottom:10px;
    border-bottom: none;
  }
  #nav-tertiary ul li a:hover{
    text-decoration: underline;
    color:#ea1a38
  }

  #nav-tertiary .tertiaryLi .page_item{
    border-bottom:1px solid #E1E1E1;
    padding-bottom: 10px;
  }

  .postsSideBar .secondary-column{
    /*sidebar width for posts page*/
    width:100%
  }
  .asidesWrapper{
    padding:15px 0;
  }
  /*Filter for watch and listen page*/
  .filterBy .filter-header h3{
    font-size: 1em;
    padding-bottom: -1px;
    text-transform: none;
    margin:10px 0 0 0;
  }
  .seasonSelector .filter-head h3{
    font-size:1.1em;
    padding-bottom: 1px;
    text-transform: none;
    border-bottom: 3px solid #dddedf;
  }
  .filter-list p{
    font-weight: bold;
    margin: 3px 0;
  }

  a.inlineBtn{
  /*this style has been associated with green buttons. this turns them red.*/
    background:#ea1a38;
    border-radius: 4px;
  }
  a.inlineBtn:hover{
    background:#bd1212;
  }
/*below button styles associated with support pages*/
  button.donateBtn{
    background-color: #ea1a38;
    text-align: center;
    color: white;
    margin: 0;
    padding: 5px 75px 5px 65px;
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: 20px;
    height:auto;
		border: 1px solid #bbb;
  }
  form.donateButton{
    text-align: center;
    width:100%;

  }
  button.donateBtn:hover{
    background-color: #bd1212;

  }
.respNavTertiary{
		display:none;
	}


	div.fourStack{
		/*applies to gray boxes sometimes located in accordians*/
		width:335px;
		padding:10px 15px;
	}

	.btn-group {
		/*for buttons on responsive individual performance pages*/
    font-family: 'Droid Sans', sans-serif;
}

.accordion-title{
	/*make all dem titles uppercase in accordions*/
	text-transform: uppercase;
}


  /* ==========================================================================
  	Responsive
    This is dealing with overriding a few things already media queried in the
    main style.css. Breakpoints below are:
    1200px
    1000px
    860px
    735px
    600px
    360px
  	========================================================================= */

@media (max-width:1200px) {

  /*footer stuff*/
  .two.columns.boxOfficeColumn{
    width:50%;
    padding-left:10px;

  }
  .three.columns.visitUs{
    width:50%;
  }
  .centerBold.visitUsFooterTitle{
    text-align: right;
  }
  .visitWrapper{
    text-align: right;
    width:100%;
    margin-top:0;
		display: -webkit-flex;
	  display: flex;
	-webkit-flex-direction: row;
	 flex-direction: row;
	 -webkit-justify-content: flex-end;
	 justify-content: flex-end;
  }
  #menu-red-bar-menu{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  }
	.mainNavBar .menu-item a{
		background-color:#4D4D4D;
	}
	.navigationBar .menu-item .sub-navLink a {
		background-color: #cccccc;
	}
}
@media (max-width:1000px) {
  /*footer stuff*/
  .visitWrapper{
    margin-top: 20px;
  }
  #footer > div {
    border-right: 1px solid #999;
  }
  .columns{
    padding:0 15px;
  }
  .three.columns{
    padding:0 15px;
  }
	.four.columns{
	display:none;
	}

	.respNavTertiary{
	 display: block !important;
	width:96%;
	background-color: white;
	padding: 20px;
	border: 1px solid RGBA(188, 188, 188, .20);
	margin-bottom: 10px;
	}
	.boxed {
    margin: 0;
    width:100%;
	}
	.navDivider{
	width:95%;
	}

}
@media (max-width:860px) {
  /*footer stuff*/
  .visitWrapper{
    margin-top: 20px;
  }
  #footer > div {
    border-right: 1px solid #999;
  }
  .columns{
    padding:0 15px;
  }
  .three.columns{
    padding:0 15px;
  }

  .gform_wrapper .top_label .gfield_description,
  .gform_wrapper .gfield_checkbox li label,
  .gform_wrapper .gfield_radio li label {
    white-space: normal;
  }

  #lightbox-container-image-box {
    max-width: 100% !important;
  }

  /* attempted fix for sidebar wierdness */
 .boxed .boxed {
    padding: 0;
    border: 0;
}


}

@media (max-width:735px) {
  /*footer stuff*/
  .asidesText{
    display:none;
  }
  .asidesWrapper{
    width:25%;
    height:auto;
  }
  .asidesTitle{
    margin:0 auto;
  }
  .asidesTitle img{
    margin:0 auto;
  }
  .arrow-right{
    left:20px;
    top:15px;
  }
  .centerBold.visitUsFooterTitle{
    text-align:left;
  }
  .visitWrapper{
    text-align: left;
    width:100%;
		-webkit-justify-content: flex-start;
	  justify-content: flex-start;
  }
  .three.columns{
    padding:0;
    width: 100% !important;
  }
  #footer > div {
    border-right: none;
  }

  .two.columns.boxOfficeColumn{
    width:100%;
    margin-top:30px;
    padding-left:0;
  }
  .three.columns.visitUs{
    width:75%;
  }
  .allRights{
    display:block;
    padding-left:5px;
    text-align: left:
  }

}
@media (max-width:600px){
  /*footer stuff*/
  .copyRightText{
    text-align: left;
  }


  .allMediaContainer .mediaItem img,
  li.mediaItem {
    width: 100%;
    height: 265px;
  }

	.buyOnline a{
		display:block;
		text-transform: uppercase;
	}
	.boxOfficeColumn .centerBold{
		margin-top:20px;
	}


}

@media (max-width:360px) {
  /*footer stuff*/
  .three.columns.visitUs{
    width:100%;
  }
  .visitWrapper{
    -webkit-box-flex-wrap: wrap;   /* OLD - iOS 6-, Safari 3.1-6 */
    -webkit-flex-wrap: wrap;       /* Safari 6.1+. iOS 7.1+, BB10 */
    -ms-flex-wrap: wrap;           /* IE 10 */
    flex-wrap: wrap;               /* NEW, Spec - Firefox, Chrome, Opera */
  }
  .locationTwo{
    margin-top:30px;
  }
  .asidesBanner .asidesTitle{
    line-height: 30px;
  }
    /*custom nav boxes*/
    .mediaItemOverlayText p{
      width:65%;
    }
    /*remove white space below hamburger*/
    .logoAndSearchWrapper{
      margin-bottom:0;
      height:75px;
    }

}

@media (max-width:320px){
  /*custom nav boxes*/
    .mediaItemOverlayText p{
      width:55%;
  }
}

/* ==========================================================================
  Gravity Form Customization
  ========================================================================= */

.gform_wrapper .ginput_complex label {
  margin-top: -10px;
  margin-bottom: 15px;
  font-weight: normal;
  color: #888;
}


/* ==========================================================================
  Target IE 10 to fix bugs
  ========================================================================= */


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
{ .selector { property:value\9; }

    .logoAndSearchWrapper {
      display: block;
      margin-bottom: 10px;
      height:120px;
    }

    .logoAndSearchWrapper a {
      display: inline-block;
      width: 70%;
      max-width: 388px;
    }

    .mainNavWrapper.sticky .logoAndSearchWrapper img,
    .logoAndSearchWrapper img {
      width: 100%;
      height: auto;
    }

    .searchField {
      display: none;
    }

    .collapsing-nav-trigger {
      display: block;
      position: absolute;
      top: 20px;
      right: 15px;
      z-index: 99999;
      height: 28px;
    }

    .menu-icon {
      display: block;
      width: 25px;
      height: 4px;
      background: #000;
      font-size: 0;
      position: relative;
      top: 14px;
    }

    .menu-icon:before,
    .menu-icon:after {
      content: '';
      display: block;
      width: 25px;
      height: 4px;
      background: #000;
      position: absolute;
      z-index: -1;
    }
    .menu-icon:before { top: 8px }
    .menu-icon:after { top: -8px }

    .open .menu-icon { background: transparent; }

    .open .menu-icon:before,
    .open .menu-icon:after {
      top: 0;
      bottom: initial;
    }

    .open .menu-icon:before { transform: rotate(-45deg); }
    .open .menu-icon:after { transform: rotate(45deg); }

    .mainNavWrapper,
    .mainNavWrapper.sticky {
      height: auto;
      position: relative;
      padding: 10px 0 0;
    }

    .mainNavBar .navigationBar {
      display: block;
      margin: 0;
    }

    .mainNavBar {
      max-height: 0;
      overflow: hidden;
    }

    .mainNavBar.open { max-height: none; }

    .mainNavBar .menu-item {
      padding: 0;
    }

    .mainNavBar .menu-item a {
      display: block;
      width: 100%;
      padding: 8px 0;
      text-align: center;
      line-height: 1;
      background-color: rgba(38, 38, 38, 0.95);
      border-bottom: 1px solid #fff;
      color: #fff;
    }

    .navigationBar .menu-item .sub-nav {
      position: relative;
      margin: 0;
      height: auto;
    }

    .megamenuBorder {
      height: auto;
    }

    .navigationBar .menu-item .sub-navLink {
      padding: 0;
    }

    .navigationBar .menu-item .sub-navLink a {
      background-color: #999;
      color: #ea1a38;
    }

    .mainNavBar .leftBox,
    .mainNavBar .leftBoxWrapper {
      padding: 0;
      width: 100%;
      margin: 0;
    }

    .middleBox,
    .rightBox {
      display: none;
    }

    /*temporary removal of utility bar fix later */
    .redBar {
      display:none;
    }

}