@charset "UTF-8";
/* CSS Document */

/* 

CSS Contents


Somewhat Modern Times YELLOW hex code: #FFD617

*/

/* Below code is for when you highlight text */
::selection {
  background: #FFD617; /* WebKit/Blink Browsers */
  color:#ffffff;
}
::-moz-selection {
  background: #FFD617; /* Gecko Browsers */
  color:#ffffff;
}

.youTubeIFrame {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body {
    /*
	background-color:#FFD617;
	*/
	/* max-width:1440px;*/
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:0px;
	/*
	background: url(https://www.somewhatmoderntimes.com/img/_MG_0493.JPG);
    background-repeat: no-repeat;
    background-size: contain;
    */
    background-color:#FFD617;
}



h1  {
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#FFD617;
	display:inline;
	font-weight: normal;
	}
	
/* the css links below are to make sure that the browser dosn't attach any of its own formats, underline,  visted link, hover, 
etc and sets it to none. Allowing me to display the links exactly as I want with my own css class */
a:link {
    	text-decoration: none;
    	color: #FFD617;
}

a:visited {
    	text-decoration: none;
    	color: #FFD617;
}

a:hover {
    	text-decoration: none;
    	color: #FFD617;
}

a:active {
    	text-decoration: none;
    	color: #FFD617;
}


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

.article-img{
    width:100%;
}

.pull-out-article-img{
    width:100%;
border-radius: 0px 0px 0px 0px;
}



/* 2. logo-header-grid */

.logo-header-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1.6%;
          position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

.logo {
    grid-column: span 12;
    margin-top:15px;
    margin-bottom:5px;
    margin-left:10px;
    margin-right:10px;
    /* position:relative; */
}

@media screen and (min-width:970px){
.logo {
    grid-column: 1/6;
    margin-top:15px;
    margin-bottom:5px;
    margin-left:10px;
    margin-right:10px;
    /* position:relative; */
}

}

.navigation-button {
    grid-column: span 12;
    margin-top:15px;
    margin-bottom:5px;
    margin-right:10px;
    margin-left:10px;
    text-align:left;
}

@media screen and (min-width:970px){
.navigation-button {
    grid-column: 11/13;
    margin-top:15px;
    margin-bottom:5px;
    margin-right:10px;
    margin-left:10px;
    text-align:right;
}

}

.navigation-button-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size:20px;
    color:#ffffff;
    font-weight:bold;
}

@media screen and (min-width:970px){
.navigation-button-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size:25px;
    color:#ffffff;
    font-weight:bold;
}
}

.logo img{
    /* position:absolute; 
    bottom:0;*/
}


.fixed-logo-header{
  position: -webkit-sticky;
  position: sticky;
  top: 0; 
  z-index: 98;
}
/* logo-header-grid ENDS */


/* 3.navigation-grid */ 

.navigation {
    grid-column: span 12;
    margin-top:25px;
    margin-bottom:5px;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 35px;
    color: #000000;
    text-align:center;
}

.navigation-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 35px;
    color: #000000;
}

/* 3.navigation-grid */ 

/* 3.video-grid */ 

.video-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1.6%;
    max-width:100%;
    background-color:#FFD617;
}

.videos {
    grid-column: span 12;
    margin-top:25px;
    margin-bottom:25px;
    margin-left:10px;
    margin-right:10px;
}

@media screen and (min-width:650px){
.videos {
    grid-column: span 4;
    margin-top:25px;
    margin-bottom:25px;
    margin-left:10px;
    margin-right:10px;
}

}

@media screen and (min-width:970px){
.videos {
    grid-column: span 3;
    margin-top:25px;
    margin-bottom:25px;
    margin-left:10px;
    margin-right:10px;
}

}

/* 3.video-grid */ 




/* inside-the-issue-modal-box (background) */
.inside-the-issue-modal-box {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(255,214,23); /* Fallback color */
  background-color: rgba(255,214,23,0.9); /* Black w/ opacity */
  
}

.inside-the-issue-modal-box-close-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1.6%;
    margin-left:10px;
    margin-right:10px;
    text-align:right;
}

.inside-the-issue-modal-box-close {
  grid-column: 12/13;
}

.inside-the-issue-modal-box-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-left:20px;
    margin-right:20px;
    position:relative;
}

.inside-the-issue-modal-box-issue-contents {
  grid-column: 2/12;
}

.inside-the-issue-modal-box-issue-contents-download-now {
    grid-column: 2/12;
    position:absolute;
    top:0;
    left:0;
    background-color: rgba(0,141,209,0.8);
    padding-top:10px;
    padding-bottom:10px;
    padding-right:20px;
    padding-left:10px;
    text-align:right;
    border-top: 7px solid #138dcd;
}

.inside-the-issue-modal-box-issue-contents-issue-image{
    grid-column: 3/5;
    position:absolute;
    top:0;
    Margin-top:85px;
}

.inside-the-issue-modal-box-issue-content{
    grid-column: 6/12;
    position:absolute;
    top:0;
    background-color: rgba(0,141,209,0.8);
    Margin-top:100px;
    Margin-left:0px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:20px;
    padding-left:10px;
    text-align:right;
    border-top: 7px solid #138dcd;
}

.inside-the-issue-button {
    background-color: Transparent;
    outline:none;
    border: none;
    text-align: right;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size:25px;
    color:#ffffff;
    margin:0px;
    padding:0px;
    font-weight:bold;
}

.close-inside-the-issue-modal-box-text {
    cursor: pointer;
}


.parallax {
  /* The image used */
  background-image: url("https://www.somewhatmoderntimes.com/img/_MG_0493.JPG");

  /* Set a specific height */
  height: 600px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-garyoke-karaoke {
  /* The image used */
  background-image: url("https://www.somewhatmoderntimes.com/img/_MG_0493.JPG");

  /* Set a specific height */
  height: 600px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-naked-news-reader {
  /* The image used */
  background-image: url("https://www.somewhatmoderntimes.com/img/the-naked-news-reader.jpg");

  /* Set a specific height */
  height: 600px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.parallax-fiction {
  /* The image used */
  background-image: url("https://www.somewhatmoderntimes.com/img/fiction.jpg");

  /* Set a specific height */
  height: 600px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}