/*-------------------------------------------------
Global Styling: Content Pane Layout

Laura: Organize this Post-Beta!!!
-------------------------------------------------*/
.skinWidth {
    margin: 0 Auto;
    width: 95%; /* Change width of the skin here */
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
}
.ContentWrapDark {
    background-color: #292929;
    color:#fff;
}

.contentWrap {
    /*overflow: hidden;*/
    overflow: visible; /*To make Search Journals dropdown overlaps the footer: http://evoq-eval.siam.org/Publications/Journals*/
}

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -58px;
  background-color: #F5F4F2;
}
.page-wrap:after {
  content: "";
  display: block;
}
.page-wrap:after {
  height: 58px;
}
/* Content Pane */
.topPane{
	margin: 0 0 20px 0;
}
/* Content Pane */
.flexible-columns,
.flexible-columns > div,
.flexible-columns > div > div {
  display: flex;
  justify-content: space-around;
}

.contentPane,
.BottomContentPane {
	width: 100%;
}
.FullWidthLeftPane,
.FullWidthRightPane,
.MiddleFullWidthLeftPane,
.MiddleFullWidthRightPane,
.BottomFullWidthLeftPane,
.BottomFullWidthRightPane {
  width: 50%;
  float: left;
}
.flex-container {
    display: flex;
}
.FullWidthThirdsLeftPane,
.FullWidthThirdsMiddlePane,
.FullWidthThirdsRightPane,
.SecondTopFullWidthThirdsLeftPane,
.SecondTopFullWidthThirdsMiddlePane,
.SecondTopFullWidthThirdsRightPane,
.BottomFullWidthThirdsLeftPane,
.BottomFullWidthThirdsMiddlePane,
.BottomFullWidthThirdsRightPane,
.ThirdTopThirdsLeftPane,
.ThirdTopThirdsMiddlePane,
.ThirdTopThirdsRightPane,
.topHeroThirds1Left, .topHeroThirds1Middle, .topHeroThirds1Right,
.topHeroThirds2Left, .topHeroThirds2Middle, .topHeroThirds2Right,
.topHeroThirds3Left, .topHeroThirds3Middle, .topHeroThirds3Right {
  width: 33.3%;
  float: left;
  margin-left: auto;
  margin-right: auto;
}
#dnn_FooterPane.footer-content.DNNEmptyPane {
  margin: 0;
  padding: 0;
}
.leftPaneNarrow {
	float: left;
	width: 240px;
  margin-top: 20px;
}
.leftPaneNarrow.DNNEmptyPane {
  margin: 0;
}
.middleDarkHero,
.bottomDarkHero {
  background-color: #333;
}
.middleDarkHero.DNNEmptyPane {
  margin: 0;
}
.topHero, .TopHeroDark,
.bottomHero, .middleDarkHero,
.middleHero, .bottomDarkHero {
    width: 100%;
}
.TopHeroDark {
  text-align:center;
}
.topHero img, .TopHeroDark,
.bottomHero, .middleDarkHero,
.middleHero, .bottomDarkHero {
    margin-left: auto;
    margin-right: auto;
}
.TopHeroDark p {
    padding: 0;
    margin: 0;
}
.TopPane {
    width: 100%;
    margin: 0;
}
.TopPane:empty {
    display: none;
}
.BottomThirdsLeftPane,
.BottomThirdsMiddlePane,
.BottomThirdsRightPane {
  width: 300px;
  float: left;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;
}
.GrayBottomThirdsLeftPane,
.GrayBottomThirdsMiddlePane,
.GrayBottomThirdsRightPane {
  width: 300px;
  float: left;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
.BottomThirdsLeftPane,
.BottomThirdsMiddlePane,
.GrayBottomThirdsLeftPane,
.GrayBottomThirdsMiddlePane {
  margin-right: 7px;
}
.light-gray-pane {
  background-color: #f6f7f8;
}
.TopDuoLeftPane, .TopDuoRightPane,
.BottomDuoLeftPane, .BottomDuoRightPane,
.GrayBottomDuoLeftPane, .GrayBottomDuoRightPane {
  width: 46%;
  float: left;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;
}
.TopFourthsFirstPane,
.TopFourthsSecondPane,
.TopFourthsThirdPane,
.TopRow2FourthsFirstPane,
.TopRow2FourthsSecondPane,
.TopRow2FourthsThirdPane {
  width: 205px;
  margin-right: 25px;
  float: left;
  margin-top: 20px;
}
.TopFourthsFourthPane,
.TopRow2FourthsFourthPane {
  width: 200px;
  float: left;
  margin-top: 20px;
}
.flex-centered {
  justify-content: center;
}

.flex-space-around {
  justify-content: space-around;
}

.GrayTopFourthsFirstPane,
.GrayTopFourthsSecondPane,
.GrayTopFourthsThirdPane,
.GrayTop2FourthsFirstPane,
.GrayTop2FourthsSecondPane,
.GrayTop2FourthsThirdPane,
.GrayTopThirdsLeftPane,
.GrayTopThirdsMiddlePane,
.GrayTopDuoLeftPane {
  width: 295px;
  margin: 0 auto;
  margin-right: 25px;
  margin-top: 20px;
}
.GrayTopFourthsFourthPane,
.GrayTop2FourthsFourthPane,
.GrayTopThirdsRightPane,
.GrayTopDuoRightPane,
.GrayTopSoloPane {
  margin: 0 auto;
  width: 295px;
  margin-top: 20px;
}
.TopDuoLeftPane.DNNEmptyPane, .TopDuoRightPane.DNNEmptyPane,
.BottomDuoLeftPane.DNNEmptyPane, .BottomDuoRightPane.DNNEmptyPane {
  margin: 0;
}
.TopDuoRightPane, .BottomDuoRightPane {
  margin-left: 15px;
}
.darkContentPane {
    color:#fff;
    width:100%;
    float:left;
}
.ContentPane,
.BottomContentPane {
    width: 980px;
}
.ContentPane:empty,
.BottomContentPane:empty {
    display: none;
  }
.whitePane {
    background-color: #fff;
    color: #000;
}
.GreyPaneWrap {
    min-width: 980px;
    background-color: #F5F4F2;
}
.GreyPaneWide {
    background-color: #F5F4F2;
    color: #000;
    width:980px;
    margin-right:auto;
    margin-left:auto;
}
.LeftPane {
    float: left;
    width:670px;
    margin-top:20px;
}
.rightPaneWide {
  float: right;
  width: 670px;
}
.LeftPane.noRightPane{
    width: 100%;
}
.RightPane {
    float: right;
    width: 245px;
    margin-top:20px;
}
.RightPane.DNNEmptyPane + .ContentPane {
    width: 980px;
}

.FlexPaneWrap{margin:20px auto;max-width:295px;}
.FeePaneWrap{margin:20px 10px 0px 10px;}
.FeePaneWrap div, .FeePaneWrap div div{width:100%;}

@media only screen and (min-width: 580px) and (max-width: 768px) {
  .rightPaneWide {
    width: calc(100% - 255px);
  }
}
@media only screen and (max-width: 575px) {
	.topPane{
		float: none;
        width: 95%;
        margin: 0 auto 0 auto;
	}
	.contentPane,
  .BottomContentPane {
		float: none;
        width: 95%;
        margin: 15px auto 0 auto;
	}
	.leftPaneNarrow{
		float: none;
        width: 95%;
        margin: 15px auto 0 auto;
	}
	.rightPaneWide{
		float: none;
        width: 95%;
        margin: 15px auto 15px auto;
	}
  .FullWidthLeftPane,
  .FullWidthRightPane,
  .MiddleFullWidthLeftPane,
  .MiddleFullWidthRightPane,
  .BottomFullWidthLeftPane,
  .BottomFullWidthRightPane,
  .FullWidthThirdsLeftPane,
  .FullWidthThirdsMiddlePane,
  .FullWidthThirdsRightPane,
  .SecondTopFullWidthThirdsLeftPane,
  .SecondTopFullWidthThirdsMiddlePane,
  .SecondTopFullWidthThirdsRightPane,
  .BottomFullWidthThirdsLeftPane,
  .BottomFullWidthThirdsMiddlePane,
  .BottomFullWidthThirdsRightPane,
  .ThirdTopThirdsLeftPane,
  .ThirdTopThirdsMiddlePane,
  .ThirdTopThirdsRightPane  {
    width: 100%;
    float: none;
  }
	.header-copy {
		padding: 15px;
	}
    .header-image {
        display: none;
    }
    .CTA-btn {
		padding-bottom: 10px;
	}
}
@media only screen and (max-width: 414px) {
  .SecondTopFullWidthThirdsLeftPane{padding-top:20px;}
}

@media only screen and (max-width: 800px) {
  .topBar {
      display: none;
      padding: 0;
}
  .header > .skinWidth,
  .topBar.skinWidth {
      width: 100%;
  }
}
@media only screen and (max-width: 1025px) {
  .topBar.skinWidth {
      width: 95%;
      margin: 5px auto 0 auto;
      padding: 8px 0 4px 0;
  }
  .skinWidth {
      width: 95%;
    }
  .topHero img,
  .bottomHero img,
  .middleDarkHero img,
  .bottomDarkHero img {
    margin-left: auto;
    margin-right: auto;
    width:100%;
    display: block;
  }
  .footerPane {
      display: none;
  }
  .TopPane {
    width: 99%;
    float: none;
  }
  .ContentPane, .BottomContentPane,
  .RightPane.DNNEmptyPane + .ContentPane {
    width: 99%;
    float: none;
    margin: 0 auto 0 auto;
    display: block;
  }
  .flexible-columns, .flexible-columns > div.FullWidthLeftPane, .flexible-columns > div.FullWidthRightPane,.flexible-columns > div.FullWidthLeftPane > div, .flexible-columns > div.FullWidthRightPane > div{display: block;justify-content: center;}
  
  .RightPane, .leftPaneNarrow,
  .rightPaneWide,
  .TopFourthsFirstPane, .TopFourthsSecondPane, .TopFourthsThirdPane, .TopFourthsFourthPane,
  .TopRow2FourthsFirstPane, .TopRow2FourthsSecondPane, .TopRow2FourthsThirdPane, .TopRow2FourthsFourthPane,
  .FullWidthLeftPane, .FullWidthRightPane,
  .MiddleFullWidthLeftPane, .MiddleFullWidthRightPane,
  .BottomFullWidthLeftPane, .BottomFullWidthRightPane,
  .FullWidthThirdsLeftPane, .FullWidthThirdsMiddlePane, .FullWidthThirdsRightPane, .SecondTopFullWidthThirdsLeftPane, .SecondTopFullWidthThirdsMiddlePane, .SecondTopFullWidthThirdsRightPane, .BottomFullWidthThirdsLeftPane, .BottomFullWidthThirdsMiddlePane, .BottomFullWidthThirdsRightPane, .TopDuoLeftPane, .TopDuoRightPane, .BottomDuoLeftPane, .BottomDuoRightPane,
  .BottomThirdsLeftPane, .BottomThirdsMiddlePane, .BottomThirdsRightPane,
  .GrayBottomThirdsLeftPane, .GrayBottomThirdsMiddlePane, .GrayBottomThirdsRightPane,
  .ThirdTopThirdsLeftPane, .ThirdTopThirdsMiddlePane, .ThirdTopThirdsRightPane,
  .GrayBottomDuoLeftPane, .GrayBottomDuoRightPane,
  .GrayTopFourthsFirstPane, .GrayTopFourthsSecondPane, .GrayTopFourthsThirdPane, .GrayTop2FourthsFirstPane, .GrayTop2FourthsSecondPane, .GrayTop2FourthsThirdPane, .GrayTopThirdsLeftPane, .GrayTopThirdsMiddlePane, .GrayTopDuoLeftPane, .GrayTopFourthsFourthPane, .GrayTop2FourthsFourthPane, .GrayTopThirdsRightPane, .GrayTopDuoRightPane, .GrayTopSoloPane,
  .topHeroThirds1Left, .topHeroThirds1Middle, .topHeroThirds1Right,
  .topHeroThirds2Left, .topHeroThirds2Middle, .topHeroThirds2Right,
  .topHeroThirds3Left, .topHeroThirds3Middle, .topHeroThirds3Right   {
    float: none;
    width: 99%;
    margin: 0 auto 0 auto;
    display: block;
    text-align:center; /* Added 5/30/2018 to center content on smaller screens */
  }
  .GrayBottomDuoLeftPane {
	padding-top: 5px;
  }
  .GrayBottomDuoRightPane {
	padding-bottom: 10px;
  }
  .flexible-columns, .flexible-columns > div, .flexible-columns > div > div {
    display: block;
  } 
  .LeftPane {
      float: none;
      width: 99%;
  }
  .footerPane {
      display: none;
  }
  .BottomFullWidthThirdsLeftPane, .BottomFullWidthThirdsMiddlePane, .BottomFullWidthThirdsRightPane {
    margin-left: auto!important;
    margin-right: auto!important;
    width: auto!important;
  }
}
/*-------------------------------------------------
Global Styles: Make it look better on larger screens
Skin Structure Media Queries - Min Width 1100px
-------------------------------------------------*/
@media only screen and (min-width: 1100px) {
  .skinWidth {
      margin: 0 Auto;
      width: 80%; /* Change width of the skin here */
  }

  .spacingRight {
      margin-right: 0;
    }
  .spacingLeft {
      margin-left: 0;
  }
  .ContentPane,
  .BottomContentPane {
      width: 100%;
  }
  .LeftPane {
      float: left;
      width:70%;
      margin-top:20px;
  }
  .RightPane {
    float: right;
    width: 23%;
    margin-top: 20px;
}
  .leftPaneNarrow {
  	float: left;
  	width: 23%;
    margin-top: 20px;
  }
  .rightPaneWide {
    float: right;
    width: 70%;
  }
  .FullWidthLeftPane,
  .FullWidthRightPane,
  .MiddleFullWidthLeftPane,
  .MiddleFullWidthRightPane,
  .BottomFullWidthLeftPane,
  .BottomFullWidthRightPane {
    width: 50%;
    float: left;
  }
  .TopFourthsFirstPane,
  .TopFourthsSecondPane,
  .TopFourthsThirdPane,
  .TopRow2FourthsFirstPane,
  .TopRow2FourthsSecondPane,
  .TopRow2FourthsThirdPane {
    width: 23%;
    margin-right: 2%;
    float: left;
    margin-top: 20px;
  }
  .TopFourthsFourthPane,
  .TopRow2FourthsFourthPane  {
    width: 24%;
    float: right;
    margin-top: 20px;
  }
  .TopDuoLeftPane, .BottomDuoLeftPane,
  .GrayBottomDuoLeftPane {
    width: 46%;
    float: left;
    margin-top: 50px;
}
  .TopDuoRightPane, .BottomDuoRightPane,
  .GrayBottomDuoRightPane {
  width: 46%;
  float: right;
  margin-top: 50px;
}
.BottomThirdsLeftPane,
.BottomThirdsMiddlePane,
.BottomThirdsRightPane {
  width: 30%;
  float: left;
  margin-right: 3%;
}
.GrayBottomThirdsLeftPane,
.GrayBottomThirdsMiddlePane,
.GrayBottomThirdsRightPane {
  width: 30%;
  float: left;
  margin-right: 3%;
}
}
/*-------------------------------------------------
Reset all spacing on empty panes
-------------------------------------------------*/
.DNNEmptyPane {
    min-height: inherit;
    padding:0;
    margin:0;
    margin-top: 0;
    margin-bottom: 0;
}