@charset "UTF-8";

/* CSS Document */

/************************************************************
* NOTE: BODY STYLING IN THE FINAL PAGE MUST HAVE DEFAULT
* MARGIN & PADDING SET TO AVIOD BROSWER DIFFERENCES ********/

.magazine-timeline-wrapper html,
.magazine-timeline-wrapper body {
  font-family: sans-serif;
  margin: 0;
  color: #888;
  background-color: #ffffff;
}

.magazine-timeline-wrapper:after {

}

/*************************************************************************/

/**********  NOTE: BEGIN STYLING FOR THE OPTOS TIMELINE ANIMATION ********/

.magazine-timeline-wrapper * {
  box-sizing: border-box;
}

.magazine-timeline-wrapper .clearfix {
  content: "";
  clear: both;
  display: table;
}

.magazine-timeline-wrapper .strong {
  font-weight: bold;
}

#m_Base {
  position: relative;
  z-index: 1;
  height: 550px;
  border: 2px solid #002c76;
  /*	border-color: #002c76;*/
  background-color: #FFFFFF;
  width: 100%;
  max-width: 1170px;
  min-width: 320px;
  margin-left: auto;
  margin-right: auto;
  /*	KEEP TEXT FROM BEING SELECTED WHILE DRAGGING   */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.magazine-timeline-wrapper #m_Grid {
  position: absolute;
  left: 0px;
  top: 0px;
  /*	width:1170px;*/
  width: 100%;
  /*	height:550px;*/
}

/*******   The BODY CONTENT (1st) row    ******/

.magazine-timeline-wrapper #m_row1_body {
  position: relative;
  left: 0px;
  top: 0px;
  /*	width:932px;*/
  width: 100%;
  height: 485px;
  background: url("/static/images/news-interactive/base_elements/bodyBG-8.png") no-repeat;
  background-size: 100% 100%;
  /*	background-position: bottom right;*/
  /*	default text color*/
  color: #545861;
}

.magazine-timeline-wrapper #m_row2_footer {
  /*
	position: absolute;
	top: 485px;
*/
  position: relative;
  display: block;
}

.magazine-timeline-wrapper #m_row2_footerPH {
  position: relative;
  vertical-align: bottom;
}

.magazine-timeline-wrapper #m_row2_footerPH,
.magazine-timeline-wrapper #m_row2_footer {
  background-image: url(/static/images/news-interactive/base_elements/footerBar-8.png);
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  width: 100%;
  height: 50px;
}

.magazine-timeline-wrapper .Optos_baseLogo {
  position: relative;
  top: 14px;
  left: 20px;
  background-image: url(/static/images/news-interactive/base_elements/OptosFooterLogo-8.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 191px;
  height: 40px;
  display: inline-block;
}

.magazine-timeline-wrapper .m_footerPrompt {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  font-family: "myriad-pro",sans-serif;
  font-size: 0.8em;
  line-height: 1.1 em;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #E8E8E8;
  color: rgb(232, 232, 232);
  opacity: 0.75;
  display: none;
}

.magazine-timeline-wrapper .m_row2_logoID_PH,
.magazine-timeline-wrapper .m_row2_logoID {
  position: absolute;
  top: 2px;
  right: -2px;
}

.magazine-timeline-wrapper .m_row2_logoID_PH {
  display: none;
}

/***** SLIDER CONTAINER ELEMENTS  *******/

.magazine-timeline-wrapper .m_Container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  /* toggle this on/off to see the start/end positions of the content div */
  overflow: hidden;
}

.magazine-timeline-wrapper .m_Content {
  /*   holder of the boxes */
  /* \\ we don't need to to set a width \\  */
  /*width: 12000px;*/
  height: 100%;
  /* \\ Uneccesary for relative position unless not 0 \\  */
  /*top: 0;
  	left: 0;*/
  position: relative;
  /* \\ This is what will allow  the contents to not wrap
     	\\ so our container can grow horizontally
  	*/
  white-space: nowrap;
  /* \\ Deals with spaces in the markup so they are not
     	\\ rendered as 4px gaps
  	*/
  font-size: 0;
}

.magazine-timeline-wrapper .m_Box {
  /* Since the container's font-size is 0, let's reset here */
  font-family: "myriad-pro",sans-serif;
  font-size: 25px;
  width: calc(33.3%);
  /*  	width: 100%;*/
  height: 100%;
  margin: 0px;
  /*	margin-top: 25px;*/
  /* \\ Floating has a  lot of inherent issues
     	\\ we'll go with inline-block' */
  /*float: left;*/
  display: inline-block;
  vertical-align: top;
  color: #545861;
  /*	border: 2px solid blue;*/
  /*	border: none;*/
  /* \\ Because the parent is set to nowrap, this inherits that
     	\\ we want the content of the tile to behave "normally" */
  white-space: normal;
  /*	text-align: center;*/
}

.magazine-timeline-wrapper .m_clickContainer {
  top: 0px;
  left: 0px;
  width: 100%;
  /*	height: 100%;*/
  /*	FIXES  */
  text-align: right;
  white-space: nowrap;
  height: 485px;
}

.magazine-timeline-wrapper .m_SubdueBG {
  /*	position: absolute;*/
  /*
	top: 0px;
	left: 0px;
*/
  width: 100%;
  height: 100%;
  visibility: hidden;
  display: none;
  background: rgba(255, 255, 255, 0.92);
}

.magazine-timeline-wrapper .m_SubdueBG,
.magazine-timeline-wrapper .helper {
  display: inline-block;
  height: 100%;
  /*	width: 1px;*/
  vertical-align: middle;
}

.magazine-timeline-wrapper .m_clickImage {
  position: relative;
  vertical-align: middle;
  width: 67%;
  height: auto;
  max-width: 340px;
  max-height: 450px;
  cursor: pointer;
  /*	display: inline-block;*/
}

/*************** DATA PANELS  *********/

.magazine-timeline-wrapper .m_closeBtn {
  position: absolute;
  right: 0px;
  top: 0px;
  /*	width:932px;*/
  width: 48px;
  height: 48px;
  background: url("/static/images/news-interactive/base_elements/closeBox.png") no-repeat;
  background-size: auto;
  background-position: 0px 0px;
  cursor: pointer;
  margin: 5px;
  padding: 0;
  display: block;
  visibility: visible;
}

.magazine-timeline-wrapper .m_closeBtn:hover {
  background-position: -48px 0px;
}

.magazine-timeline-wrapper .m_dataBox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /*	visibility: hidden;*/
  display: none;
}

.magazine-timeline-wrapper .m_screenSubdue {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  visibility: hidden;
  /*	display: none;*/
  background: rgba(255, 255, 255, 0.92);
}

.magazine-timeline-wrapper .m_inline {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  /*	border: 2px solid purple;*/
  background-color: rgba(255, 255, 255, 0.0);
  /*	visibility: hidden;*/
  display: none;
}

.magazine-timeline-wrapper .m_dataImgCont {
  text-align: right;
  /*	padding-top: 2%;*/
  /*	padding-left: 50px;*/
}

.magazine-timeline-wrapper .m_dataImgCont {
  padding-top: 2%;
  /*	padding-left: 0px;*/
}

.magazine-timeline-wrapper .m_dataImage {
  width: 100%;
  max-width: 367px;
}

.magazine-timeline-wrapper .m_dataImgCont_PH {
  display: none;
  background-color: rgba(255, 255, 255, 0.92);
}

.magazine-timeline-wrapper .m_data {
  padding-left: 3%;
  padding-right: 3%;
  /*	border: 2px solid green;*/
}

.magazine-timeline-wrapper .m_Headr {
  font-family: "myriad-pro",sans-serif;
  font-weight: 800;
  line-height: 1.2em;
  font-size: 1.5em;
  color: #002c76;
  margin: 50px 0px 0px 0px;
  /*	visibility: hidden;*/
}

.magazine-timeline-wrapper .m_volInfo {
  font-family: "myriad-pro",sans-serif;
  font-weight: 200;
  /*	margin: 0px 0px 5px 0px;*/
  line-height: 1em;
  font-size: 1.35em;
  color: #002c76;
  /*	visibility: hidden;*/
}

.magazine-timeline-wrapper .m_data p {
  font-family: "myriad-pro",sans-serif;
  /*	text-align: left;*/
  line-height: 1.1em;
  font-size: 1.35em;
  color: #545861;
  margin-top: 12px;
  margin-bottom: 10px;
  /*	margin-right: 5%;*/
}

/***********  THE BODY COPY AREA   **********/

.magazine-timeline-wrapper [class*="col-"] {
  float: left;
  /*    padding: 25px;*/
  margin: auto;
  width: 100%;
}

/*
@media only screen and (min-width: 480px){
	.col-p-1 {width: 8.33%;}
    .col-p-2 {width: 16.66%;}
    .col-p-3 {width: 25%;}
    .col-p-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
	.col-p-5 {width: 40%;}
    .col-p-6 {width: 50%;}
    .col-p-7 {width: 58.33%;}
    .col-p-8 {width: 66.66%;}
    .col-p-9 {width: 75%;}
    .col-p-10 {width: 83.33%;}
    .col-p-11 {width: 91.66%;}
    .col-p-12 {width: 100%;}
	.m_dataImgCont_PH {
		display: none;
	}
}
*/

.magazine-timeline-wrapper .col-1 {
  width: 8.33%;
}

.magazine-timeline-wrapper .col-2 {
  width: 16.66%;
}

.magazine-timeline-wrapper .col-3 {
  width: 25%;
}

.magazine-timeline-wrapper .col-4 {
  width: 33.33%;
}

/*	CHANGED COL 5 & 7 FOR OUR CUSTOM LAYOUT  */

.magazine-timeline-wrapper .col-5 {
  width: 40%;
}

.magazine-timeline-wrapper .col-6 {
  width: 50%;
}

.magazine-timeline-wrapper .col-7 {
  width: 58.33%;
}

.magazine-timeline-wrapper .col-8 {
  width: 66.66%;
}

.magazine-timeline-wrapper .col-9 {
  width: 75%;
}

.magazine-timeline-wrapper .col-10 {
  width: 83.33%;
}

.magazine-timeline-wrapper .col-11 {
  width: 91.66%;
}

.magazine-timeline-wrapper .col-12 {
  width: 100%;
}

@media only screen and (max-width: 1170px) {
  .magazine-timeline-wrapper .col-1 {
    width: 8.33%;
  }

  .magazine-timeline-wrapper .col-2 {
    width: 16.66%;
  }

  .magazine-timeline-wrapper .col-3 {
    width: 25%;
  }

  .magazine-timeline-wrapper .col-4 {
    width: 33.33%;
  }

  /*	CHANGED COL 5 & 7 FOR OUR CUSTOM LAYOUT  */

  .magazine-timeline-wrapper .col-5 {
    width: 40%;
  }

  .magazine-timeline-wrapper .col-6 {
    width: 50%;
  }

  .magazine-timeline-wrapper .col-7 {
    width: 58.33%;
  }

  .magazine-timeline-wrapper .col-8 {
    width: 66.66%;
  }

  .magazine-timeline-wrapper .col-9 {
    width: 75%;
  }

  .magazine-timeline-wrapper .col-10 {
    width: 83.33%;
  }

  .magazine-timeline-wrapper .col-11 {
    width: 91.66%;
  }

  .magazine-timeline-wrapper .col-12 {
    width: 100%;
  }
}

@media only screen and (max-width: 1035px) {
  .magazine-timeline-wrapper .m_data p {
    font-size: 1.2em;
  }

  .magazine-timeline-wrapper .m_Headr {
    font-size: 1.4em;
  }

  .magazine-timeline-wrapper .m_volInfo {
    font-size: 1.25em;
  }
}

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

}

@media only screen and (max-width: 798px) {
  .magazine-timeline-wrapper .col-1 {
    width: 8.33%;
  }

  .magazine-timeline-wrapper .col-2 {
    width: 16.66%;
  }

  .magazine-timeline-wrapper .col-3 {
    width: 25%;
  }

  .magazine-timeline-wrapper .col-4 {
    width: 33.33%;
  }

  /*	CHANGED COL 5 & 7 FOR OUR CUSTOM LAYOUT  */

  .magazine-timeline-wrapper .col-5 {
    width: 40%;
  }

  .magazine-timeline-wrapper .col-6 {
    width: 50%;
  }

  .magazine-timeline-wrapper .col-7 {
    width: 58.33%;
  }

  /* 58.33*/

  .magazine-timeline-wrapper .col-8 {
    width: 66.66%;
  }

  .magazine-timeline-wrapper .col-9 {
    width: 75%;
  }

  .magazine-timeline-wrapper .col-10 {
    width: 83.33%;
  }

  .magazine-timeline-wrapper .col-11 {
    width: 91.66%;
  }

  .magazine-timeline-wrapper .col-12 {
    width: 100%;
  }

  .magazine-timeline-wrapper .m_Headr {
    margin: 18px 0px 0px 0px;
  }

  .magazine-timeline-wrapper .m_data p {
    font-size: 1.1em;
  }

  .magazine-timeline-wrapper .Optos_baseLogo {
    top: 16px;
    left: 15px;
    background-size: contain;
    width: 170px;
    height: 44px;
  }
}

@media only screen and (max-width: 768px) {
  .magazine-timeline-wrapper .col-1 {
    width: 8.33%;
  }

  .magazine-timeline-wrapper .col-2 {
    width: 16.66%;
  }

  .magazine-timeline-wrapper .col-3 {
    width: 25%;
  }

  .magazine-timeline-wrapper .col-4 {
    width: 33.33%;
  }

  /*	CHANGED COL 5 & 7 FOR OUR CUSTOM LAYOUT  */

  .magazine-timeline-wrapper .col-5 {
    width: 40%;
  }

  .magazine-timeline-wrapper .col-6 {
    width: 50%;
  }

  .magazine-timeline-wrapper .col-7 {
    width: 60%;
  }

  /* 58.33*/

  .magazine-timeline-wrapper .col-8 {
    width: 66.66%;
  }

  .magazine-timeline-wrapper .col-9 {
    width: 75%;
  }

  .magazine-timeline-wrapper .col-10 {
    width: 83.33%;
  }

  .magazine-timeline-wrapper .col-11 {
    width: 91.66%;
  }

  .magazine-timeline-wrapper .col-12 {
    width: 100%;
  }

  .magazine-timeline-wrapper .m_dataImgCont {
    width: 30%;
    /*		max-height: 20px;*/
    margin-left: 4%;
  }

  #m_Base {
    height: 365px;
  }

  .magazine-timeline-wrapper .m_clickContainer {
    height: 300px;
  }

  .magazine-timeline-wrapper #m_row1_body {
    height: 300px;
  }

  /*
	#m_row2_footer {
		top: 300px;
	}
*/

  .magazine-timeline-wrapper .m_data {
    padding-right: 0%;
    /*	border: 2px solid green;*/
  }

  .magazine-timeline-wrapper .m_Headr {
    line-height: 0.9em;
    font-size: 0.9em;
    margin: 10px 0px 0px 0px;
  }

  .magazine-timeline-wrapper .m_volInfo {
    font-size: 1em;
  }

  .magazine-timeline-wrapper .m_data p {
    font-size: 0.75em;
  }
}

/*
@media (max-width: 641px){
	.m_volInfo {
		line-height: 1em;
	}

	.m_data p {
		font-size: 0.45em;
	}
}
*/

@media (max-width: 568px) {
  .magazine-timeline-wrapper .m_volInfo {
    line-height: 1em;
  }

  .magazine-timeline-wrapper .m_data p {
    font-size: 0.45em;
  }
}

/*

@media only screen and (min-width : 481px ){
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
	.col-s-5 {width: 40%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
*/

@media only screen and (max-width: 480px) {
  .magazine-timeline-wrapper .col-p-1 {
    width: 8.33%;
  }

  .magazine-timeline-wrapper .col-p-2 {
    width: 16.66%;
  }

  .magazine-timeline-wrapper .col-p-3 {
    width: 25%;
  }

  .magazine-timeline-wrapper .col-p-4 {
    width: 33.33%;
  }

  /*    .col-s-5 {width: 41.66%;}*/

  .magazine-timeline-wrapper .col-p-5 {
    width: 40%;
  }

  .magazine-timeline-wrapper .col-p-6 {
    width: 50%;
  }

  .magazine-timeline-wrapper .col-p-7 {
    width: 58.33%;
  }

  .magazine-timeline-wrapper .col-p-8 {
    width: 66.66%;
  }

  .magazine-timeline-wrapper .col-p-9 {
    width: 75%;
  }

  .magazine-timeline-wrapper .col-p-10 {
    width: 83.33%;
  }

  .magazine-timeline-wrapper .col-p-11 {
    width: 91.66%;
  }

  .magazine-timeline-wrapper .col-p-12 {
    width: 100%;
  }

  /*
	.m_inline {
		background-color: rgba(255, 255, 255, 0.92);
	}
*/

  .magazine-timeline-wrapper .m_dataImgCont {
    display: none;
  }

  .magazine-timeline-wrapper .m_dataImgCont_PH {
    display: inline-block;
  }

  .magazine-timeline-wrapper .m_Headr {
    line-height: 0.9em;
    font-size: 0.9em;
    margin: 10px 0px 0px 0px;
  }

  .magazine-timeline-wrapper .m_volInfo {
    font-size: 0.9em;
  }

  .magazine-timeline-wrapper .m_data p {
    font-size: 0.9em;
  }

  .magazine-timeline-wrapper #m_row1_body {
    height: 300px;
    background-size: auto 100%;
    background-position: -240px;
    /*
		overflow: hidden;
		background-position: top left;
		background-size: auto auto;
*/
  }

  .magazine-timeline-wrapper .Optos_baseLogo {
    top: 24px;
    left: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 44px;
  }

  .magazine-timeline-wrapper .m_row2_logoID_PH {
    display: block;
  }

  .magazine-timeline-wrapper .m_row2_logoID {
    display: none;
  }

  .magazine-timeline-wrapper .m_footerPrompt {
    font-size: 0.2em;
    width: 40%;
    left: 37%;
  }

  /*
	.m_footerPrompt {
		display: none;
	}
*/
}