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

html {
	height: 100%;
	margin: 0;
	padding: 0;
	cursor: url('image/pinktriangle.ico'), auto;	

  }

body {
    line-height: auto;
    font-style: normal;
    font-weight: 100;
    font-size: 1rem;
    cursor: url('image/pinktriangle.png'), auto;
    
}

/* Grid for masonry on landing page */

#posts {
    margin: 30px auto 0;
   
}
.post {
    margin: 0 0 50px;
    text-align: justify;
    width: 100%;
    /*float: left;*/
}
    .post img {
        padding: 0 15px;
        width: 100%;
        /*float: left;*/
    }

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


 /* Typography styling*/

  p.shadesfont {
    font-family: 'Titillium Web', sans-serif;
    font-size: 1rem;
    text-align: justify;

  }

	/* used to be p.shadesfont-head, now a class applied to <h> for titles of video clips */
  .shadesfont-head {
    font-family: 'Titillium Web', sans-serif;
	font-size: 1.2rem;
	text-align: justify;
	color: gray;
	/* end new */

  }
  .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;

  }


 .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: 500;

  }

  .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;
  }
  
  .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;
  }

  /****NEW style for credits at bottom of page****/

.shades-note {
    font-family: 'Titillium Web', sans-serif;
    font-weight:bold;
    color: rgb(60, 60, 60);
    line-height: normal;
    margin: 15px;
}


.shades-credits {
    font-family: 'Titillium Web', sans-serif;
    color: rgb(60, 60, 60);
    /*color: black;*/
    /*font-weight: bold;*/
    line-height: normal;
    margin: 15px;
}

  ul.shades-credits {
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: left;
	margin: 15px;
	width: 100%;
	height: auto;
	padding-left: 2em;
    text-indent: -2em;
  }
    /****END NEW style for credits at bottom of page****/

  .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%;
  }

  .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; }

/*not in use at this point*/
.rainbow-text {
	/*background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );*/
  	background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.20, #f2f), color-stop(0.4, #22f), color-stop(0.6, #2ff), color-stop(0.8, #f2f), color-stop(1.0, rgb(245, 245, 28)));
	float: center;
	width: 100%;
	font-size: 1.3rem;
	line-height: 1.3;
	font-weight: 400;
	text-indent: 0px;
	text-align: justify;
	font-family: 'Titillium Web', sans-serif;
	margin-top: 1%;
	margin-bottom: 1%;
	color:transparent;
	border: 2px dotted white;
	-webkit-background-clip: text;
  	background-clip: text;
  
  }
  
/* Color styling!!!!*/
.shades-yellow {
	background-color: rgb(255, 200, 67);
	padding-top: 3rem;
}

.shades-green {
	background-color: rgb(70, 185, 120);
	padding-top: 3rem;
}

.shades-blue {
	background-color: rgb(0, 179, 226);
	padding-top: 3rem;
}

.shades-orange {
	background-color: rgb(243, 108, 33);
	padding-top: 3rem;
}

.shades-red {
	background-color: rgb(216, 33, 38);
	padding-top: 3rem;
}

.shades-magenta {
	background-color: rgb(198, 74, 155);
	padding-top: 3rem;
}

.shades-purple {
	background-color: rgb(198, 74, 155);
	padding-top: 3rem;
}

.shades-plum {
	background-color: plum;
	opacity: .95;
}

div#rainbow {
    background: linear-gradient(180deg,
        red 0%,  rgb(216, 33, 38) 16.7%, 
        rgb(243, 108, 33) 16.7%, rgb(243, 108, 33) 33.3%,
		rgb(255, 200, 67) 33.3%, rgb(255, 200, 67) 50%, 
        rgb(70, 185, 120) 50%, rgb(70, 185, 120) 66.7%, 
        rgb(0, 179, 226) 66.7%, rgb(0, 179, 226) 83.3%, 
		rgb(198, 74, 155) 83.3%, rgb(198, 74, 155) 100%);
	opacity: 0.9;
	min-height: 100%;

}

.rainbow {
	background: linear-gradient(to right,
		red 0%,  rgb(216, 33, 38) 16.7%, 
		rgb(243, 108, 33) 16.7%, rgb(243, 108, 33) 33.3%,
		rgb(255, 200, 67) 33.3%, rgb(255, 200, 67) 50%, 
		rgb(70, 185, 120) 50%, rgb(70, 185, 120) 66.7%, 
		rgb(0, 179, 226) 66.7%, rgb(0, 179, 226) 83.3%, 
		rgb(198, 74, 155) 83.3%, rgb(198, 74, 155) 100%);
	height: 5px;
	opacity: 0.9;	

/*	border-top: .25rem solid pink;*/

}
/* Graphic elements !!!!!*/

.triangle {
width: 100%;
float: right;
/*background: red;*/
padding: 20px;
/*clip-path: polygon(0% 7%, 50% 100%, 100% 7%);
shape-outside: polygon(0% 7%, 50% 100%, 100% 7%);
-webkit-shape-outside: polygon(0% 7%, 50% 100%, 100% 7%);*/

}

.arrow-down {
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;
background-color: rgb(198, 74, 155);

}

.col-8-shades{
width: 10%;
margin: auto;

}





/* Small devices */
p.shadesfont { font-size: 0.9rem; }
.pquote { font-size: 0.8rem; }
.shades-credits { font-size: 0.8rem; }
.shades-note {
    font-size: 0.8rem;
}
/* Medium devices */
@media (min-width: 768px) {
    #grid > #posts .post { width: 335px; }
	#grid > #posts .post.cs2 { width: 100%; }
	.post img { padding: 0; }
	p.shadesfont { font-size: 1rem; }
	.pquote { font-size: 1.0rem; }
	.shades-credits { font-size: 0.9rem; }
    .shades-note {
        font-size: 0.9rem;
    }
}

/* Medium devices */

@media (min-width: 992px) {
	#grid > #posts .post { width: 445px; }
	#grid > #posts .post.cs2 { width: 100%; }
	p.shadesfont { font-size: 1.1rem; }
	.pquote { font-size: 1.3rem; }
	.shades-credits { font-size: 1rem; }
    .shades-note {
        font-size: 1rem;
    }

/* Large devices */

@media (min-width: 1200px) {
    #grid > #posts .post {
        width: 346px;
        
    }
	#grid > #posts .post.cs2 { width: 742px; }
	p.shadesfont { font-size: 1.1rem; }
	.pquote { font-size: 1.6rem; }
	.shades-credits { font-size: 1rem; }   
}

/* 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 #grid (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) {
    #grid {
        left: -50px;
        padding-left: 50px;
        padding-right: 50px;
        position: relative;
        /*float: left;*/
    }

        #grid.container {
            left: auto;
            padding-left: 15px;
            padding-right: 15px;
    
        }
}