/*! Custom CSS for Shades of the Rainbow LaGCC */

#gr-bill {
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
	margin: auto;
	font-family: 'Overpass', sans-serif;
	/*background-color: rgba(255, 255, 255, 0.8);*/
	/*overflow: auto;*/
	/* background-color: rgba(195, 161, 110, 0.6); */
	background-color: rgba(4, 129, 128, 0.3);
}

#gr-topics-nav {
 margin: 1rem;
}

/* .even {
	background: red;
	color: white;
}

.odd {
	background: darkred;
	color: white;
} */

.grb-whitey-b {
	background-color: rgba(255, 255, 255, 0.8);
}

.grb-hero {
	margin-right: -15px; 
	margin-left: -15px; 
	width: 100%;
	background-size: cover;
}

./*grb-landscape {
	padding-top: 4rem;
}*/

.grb-quote {
	padding-top: 3rem;
}

.grb-images-inrow {
	padding-top: 4rem;
}

.grb-border {
	outline: .5px solid rgba(4, 129, 128, 0.3);
	border-radius: 3px;
	margin: 0.3rem;
}

.grb-pdf {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

/* .interview-transcript {
	background-color: rgba(255, 255, 255, 0.6);
}

.interview-youtube {
	background-color: rgba(4, 129, 128, 0.3);
}

.interview-th {
	background-color: rgba(4, 129, 128, 0.3);
} */

/* Grid for masonry on landing page */
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

 #GRBgrid {
	margin: 0 auto;
}

#GRBposts { margin: 30px auto;

}

.post {
	margin: 0 0 50px;
	text-align: center;
	width: 100%;

}

.post img { padding: 0 15px; width: 100%; 
}

.h-gutter {
    margin: 2rem 0 3rem;
}

 #GRBgrid.container .post img { padding: 0; }

 #GRBgrid.container {
	margin: 0 auto;
}

 /* Typography styling*/

.gr-bill-intro {
 	font-family: 'Titillium Web', sans-serif;
 	font-weight: 300;
 	font-size: 1.31rem;
	line-height: normal;
 	text-align: justify;
 }

.grb-txt-only {
	font-family: 'Titillium Web', sans-serif;
}

.gr-bill-topics {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 600;
	font-size: 1.31rem;
	text-align: left;	
	padding-left: 1rem;		
}

ul.gr-bill-topics a li {
	color: rgb(52, 52, 52) !important;}

ul.gr-bill-topics a :hover {
	color: rgb(41, 99, 146) !important;}

ul.gr-bill-topics a :active {
	color: rgb(41, 99, 146) !important;
}

.gr-bill-text {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 300;
	font-size: 1rem;
	text-align: justify;
	line-height: normal;
	color: rgb(0, 0, 0);
}

.gr-bill-head {
	font-family: 'Titillium Web', sans-serif;
	font-size: 2.8rem;
	text-align: center;
	color: rgb(52, 52, 52);
	line-height: normal;
	padding-top: 2rem;
}

  .pquote {
	float: center;
	width: 100%;
	color: gray;
	font-size: 2.0rem;
	line-height: 1.7;
	font-weight: 400;
	text-indent: 0px;
	text-align: justify;
	font-family: 'Titillium Web', sans-serif;

  }

.credits {
		float: center;
		width: 100%;
		font-size: .9rem;
		line-height: 1.5;
		font-weight: 300;
		text-indent: 0px;
		text-align: left;
		font-family: 'Titillium Web', sans-serif;
}

 .dropcaps:first-letter {
    margin: 0.08em 0 -0.05em -0.05em;
    padding: 0 0.065em 0 0;
    font-size: 5em;
    line-height: 0.7em;
	float: left;
	font-weight: 700;
	font-family: 'Titillium Web',
		sans-serif;

  }

  .photo-caption {
	padding-bottom: -2rem;
	margin-bottom: -2rem;
	font-family: 'Titillium Web', sans-serif;
	color: #212529;
	line-height: .1rem;
	text-align: left;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	padding: 0px;
	text-transform: none;
  }
  
  .photo-attribution {
	margin-bottom: -2rem;
	margin-top: -2rem;
	padding-top: -5rem;
	font-family: 'Titillium Web', sans-serif;
	color: gray;
	line-height: .1rem;
	text-align: left;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 400;
	padding: 0px;
  }

  .single-spaced {
	  margin-top: .2rem;
	  line-height: 1.1rem;
  }

  .pquote-landing {
	float: center;
	width: 100%;
	color: gray;
	font-size: 1.0rem;
	line-height: 1.3rem;
	font-weight: 300;
	text-indent: 0px;
	text-align: justify;
	font-family: 'Titillium Web', sans-serif;
	margin-top: 1%;
	margin-bottom: 1%;
	padding: 0 15px;
  }

  .shades-contact-text {
	float: center;
	width: 100%;
	color:rgb(255, 255, 255);
	font-size: 1.3rem;
	line-height: 1.5;
	font-weight: 400;
	text-indent: 0px;
	text-align: justify;
	font-family: 'Titillium Web', sans-serif;
	margin-top: 1%;
	margin-bottom: 1%;
  }  

.lead { padding: 40px 0; }


/* Modal video style */

.btn-grb {
	border: 0em;
	padding: 0 2rem;
	margin-top: 1rem;
	/* outline: .5px solid rgba(4, 129, 128, 0.3); */
	background-color: rgba(4, 129, 128, 0.3);
	border-radius: 3px;
	flex: auto;
}

	.btn-grb:hover {
		background-color: rgb(41, 99, 146,0.8);
	}


.modal-dialog {
	max-width: 800px;
	margin: 30px auto;
	
}

.modal-body {
	position: relative;
	padding: 0px;
	
}

.close {
	position: absolute;
	right: -30px;
	top: 0;
	z-index: 999;
	font-size: 2rem;
	font-weight: normal;
	color: #fff;
	opacity: 1;
}






/*1986GRB colors*/

.color-fill-1 {
	background-color: rgb(253, 73, 52);
	opacity: .2;
}


hr.seat {
	background: linear-gradient(to right,
		#FF3515 0%, #FF3515 20%,
		#F2A900 20%, #F2A900 40%, 
		#B3875A 40%, #B3875A 60%, 
		#0077C8 60%, #0077C8 80%, 
		#002d72 80%, #002d72 100%);
	height: 5px;
	opacity: 0.9;	
}

hr.seat-navy {
		background-color: #002d72;
		opacity: .85;
		height: .3rem;
}

.seat-navy {
	background-color: #002d72;
	opacity: .85;
}

.seat-orange {
	background-color: #FF3515;
	opacity: .85;
}

.seat-opacity {
	opacity: .85;
}



/* Graphic elements !!!!!*/

.card-img.gallery {
	padding-bottom: 2rem;
}


/* .row .column {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
} */

/* Create two equal columns that sits next to each other */
/* .column {
	flex: 50%;
	padding: 0 4px;
}

.column img {
	margin-top: 8px;
	vertical-align: middle;
} */



/* Small devices */
@media (max-width: 767px) {

	p.gr-bill { font-size: 0.9rem; }
	.pquote { font-size: 0.8rem; }
	.credits { font-size: 0.7rem;}
	.gr-bill-topics { font-size: .8rem;}
	.gr-bill-head { font-size: 2rem;}
	.gr-bill-intro { font-size: .9rem;}

}
/* Medium devices */

@media (min-width: 768px) {
	 #GRBgrid > #GRBposts .post { width: 160px; }
	 #GRBgrid > #GRBposts .post.cs2 { width: 250px; }
	.post img { padding: 0; }
	p.gr-bill { font-size: 0.7rem; }
	/*.gr-bill-head { font-size: 2.3rem; }*/
	.gr-bill-intro { font-size: 1rem; }
	p.gr-bill-text { font-size: 1rem; }
	.pquote { font-size: 1.0rem; }
	.gr-bill-topics { font-size: .8rem; }

}
/* Medium devices */

@media (min-width: 992px) {
	 #GRBgrid > #GRBposts .post { width: 200px }
	 #GRBgrid > #GRBposts .post.cs2 { width: 300px; }
	p.gr-bill-text { font-size: 1.1rem; }
	.pquote { font-size: 1.3rem; }
	.gr-bill-topics { font-size: .8rem; }
	.gr-bill-intro { font-size: 1rem; }
	.gr-bill-intro { font-size: 1rem; }

}

/* Large devices */

@media (min-width: 1200px) {
	 #GRBgrid > #GRBposts .post { width: 300px; }
	 #GRBgrid > #GRBposts .post.cs2 { width: 400px;}
	p.gr-bill-text { font-size: 1.1rem; }
	.pquote { font-size: 1.6rem; }
	.gr-bill-topics { font-size: 1rem; }
	.gr-bill-intro {font-size: 1.3rem;}

}

/* Large devices min-width (1200px) + a .post margin (50px) * 2 (100px) = 1300px */
/* 1300px gives me the clearance I need to keep the margins of the entire  #GRBgrid (the
bleed if you will) the same width as the .post margins posts (50px). Basically I'm
being really picky about whitespace. */

/* @media (min-width: 1300px) {
	 #GRBgrid {
		left: -50px;
		padding-left: 50px;
		padding-right: 50px;
		position: relative;
		}
	}