body {
        background: #eb9392;}


@font-face {
font-family: "GrotzecCond-Demibold";
src: url(https://journalismdesign.camd.northeastern.edu/clean/fonts/GrotzecCond-Demibold3.woff2);
}
@font-face {
font-family: "GrotzecCond-DemiboldItalic";
src: url(https://journalismdesign.camd.northeastern.edu/clean/fonts/GrotzecCond-DemiboldItalic.woff2);
}
@font-face {
font-family: "LeJeunePoster-Regular";
src:url(https://journalismdesign.camd.northeastern.edu/clean/fonts/LeJeunePoster-Regular.woff2);
}
@font-face {
font-family: "LeJeunePoster-RegularItalic";
src:
url(https://journalismdesign.camd.northeastern.edu/clean/fonts/LeJeunePoster-RegularItalic.woff2);
}

*{
    box-sizing:border-box;
    margin:0;
}

@media only screen and (max-width:500px){
div.article{
    width: 90%;
    margin:0 auto 0 auto;
    }
}

@media only screen and (min-width:501px){
div.article{
    width:55%;
    margin:0 auto 0 auto;
    }
}


@media only screen and (max-width:500px){
h1 {
    font-family: "LeJeunePoster-Regular", "Georgia",serif;
    text-transform: uppercase;
    color:#f5efe6;
    font-size: 1.4em;
    text-align:center;
    margin: -40 0 0 0
}
}

@media only screen and (min-width:501px){
h1 {
    font-family: "LeJeunePoster-Regular", "Georgia",serif;
    text-transform: uppercase;
    color:#f5efe6;
    font-size: 2.5em;
    text-align:center;
    margin: -40 0 0 0
}
}


@media only screen and (max-width:500px){
h2 {
    font-family: "LeJeunePoster-RegularItalic", "Georgia", sans-serif;
    color:#f9d9b3;
    font-size: 100%;
    text-align:center
}
}

@media only screen and (min-width:501px){
h2 {
    font-family: "LeJeunePoster-RegularItalic", "Georgia", sans-serif;
    color:#f9d9b3;
    font-size: 200%;
    text-align:center
}
}

h3.byline {
    color:#f9d9b3;
    font-size: 150%;
    text-align:center; 
    text-transform: uppercase;
    font-family:"GrotzecCond-Demibold","Impact", sans-serif;
    letter-spacing: 10;
    margin: 20px 0;
}

h4{
      font-family: "GrotzecCond-Demibold", "Impact", serif;
    width: 100%;
     color:#bb2d96;
    margin: -10 0 0 6;
    font-size: 70%;
    text-align: center
}


@media only screen and (max-width:500px) {
.headingphoto {
  background-image: url("../images/ringpopintro.jpg");
    height: 500px;
    background-repeat: none;
    position: relative;
    background-size: cover;
    width:100%
}
}

@media only screen and (min-width:501px) {
.headingphoto {
  background-image: url("../images/ringpopintro.jpg");
    height: 1000px;
    background-repeat: none;
    position: relative;
    background-size: cover;
    width:100%
}
}

.headingcaption {
        position: absolute;
    top: 70px;
    z-index: 10;
}


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

div.slider-caption {
   font-family: "LeJeunePoster-RegularItalic", "Georgia", sans-serif;
    color:#d91da4;
    font-size: 24px;
    text-align:center ;
    height: 130px;
    overflow: hidden;    
    margin: -150 90 0 90;
    margin-bottom: 5px
}

div.Title-mySlides {
    font-family: "LeJeunePoster-RegularItalic", "Georgia", sans-serif;
    color:#90d8f1;
    font-size: 150%;
    text-align:center ;
    background-color: #d91da4;
    border-style: ridge;
    border-width: 10px 7px 10px 7px;
    border-color: #7c3080;
                margin-top: 5px

    
}
}

@media only screen and (min-width:501px) { 

div.slider-caption {
   font-family: "LeJeunePoster-RegularItalic", "Georgia", sans-serif;
    color:#d91da4;
    font-size: 42px;
    text-align:left ;
    margin: -300px 200 0 200;
    overflow: hidden;    
    height: 400px;
}

div.Title-mySlides {
    font-family: "LeJeunePoster-RegularItalic", "Georgia", sans-serif;
    color:#90d8f1;
    font-size: 400%;
    text-align:center ;
    background-color: #d91da4;
    border-style: ridge;
    border-width: 10px 7px 10px 7px;
    border-color: #7c3080   ;
                margin-top: 5px

}
}

div.buttons {
    text-align: center;
            margin-bottom: 100px

}

/*div.Heading {
     background: #7c3080;
    border-width: 2px 1px 1px 2px;
}*/



p {
    font-family: "LeJeunePoster-Regular", "Georgia",serif;
    color:#640433;
    font-size:20px;
    line-height: 130%;
    margin-bottom: 30;
    text-align: justify

}

@media only screen and (min-width:501px) { 
blockquote {
    font-family:"GrotzecCond-Demibold";
    color: #f9d9b3;
    font-size:400%;
    text-align: center;
    letter-spacing: .2;
    width:50%;
    margin-left: 50%;
    margin-right:10%;
     background: #cd5691;
            border-style: ridge;
                    border-width: 10px 7px 10px 7px;
    border-color: #7c3080

}
}

@media only screen and (max-width:500px) { 
blockquote {
    font-family:"GrotzecCond-Demibold";
    color: #f9d9b3;
    font-size:300%;
    text-align: center;
    letter-spacing: .2;
    width:100%;
     background: #cd5691;
            border-style: ridge;
                    border-width: 10px 7px 10px 7px;
    border-color: #7c3080

}
}


@media only screen and (max-width:500px) { 
figure {
    text-align: center;
    position: relative    
}

 figcaption {
    font-family: "GrotzecCond-Demibold", "Impact", serif;
    width: 100%;
     color:#bb2d96;
    margin: 20 0 0 10
    }

div.floatleft {
    width: 100%;
    margin: 0 20 0 0 
}

div.floatright {
    width: 100%;
    margin: 0 0 0 10 
    
}
}

@media only screen and (min-width:501px) { 
figure {
    text-align: center;
    position: relative    
}

 figcaption {
    font-family: "GrotzecCond-Demibold", "Impact", serif;
    width: 100%;
     color:#bb2d96;
    margin: 20 0 0 10
    }

div.floatleft {
    float:left;
    width: 50%;
    margin: 0 30 0 0 
}

div.floatright {
    float:right;
    width: 50%;
    margin: 0 0 0 20 
    
}
}


@media only screen and (max-width:500px) { 
p.closing {
     background: #cd5691;
        margin: 0 0 0 10 ;
            border-style: ridge;
                    border-width: 10px 7px 10px 7px;
    border-color: #7c3080;
    width: 100%;
    font-family:"GrotzecCond-Demibold";
    color: #f9d9b3;
    font-size:100%;
    text-align: left;
    letter-spacing: .2;
    text-transform: uppercase;
    
}

p.closing2 {
    font-family:"GrotzecCond-DemiboldItalic";
    color: #bb2d96;
    font-size:150%;
    text-align: left;
    letter-spacing: .2;
    width:50%;
    margin-right:50% 
}
}



@media only screen and (min-width:501px) { 
p.closing {
     background: #cd5691;
        margin: 0 0 0 10 ;
            border-style: ridge;
                    border-width: 10px 7px 10px 7px;
    border-color: #7c3080;
    font-family:"GrotzecCond-Demibold";
    color: #f9d9b3;
    font-size:350%;
    text-align: left;
    letter-spacing: .2;
    text-transform: uppercase;
    width:50%;
    margin-right:50% 
}
    p.closing2 {
    font-family:"GrotzecCond-DemiboldItalic";
    color: #bb2d96;
    font-size:150%;
    text-align: left;
    letter-spacing: .2;
    width:50%;
    margin-right:50% 
    
}
}

div.stickers {
    float:center;
    width: 100%;
    margin: auto;
    
}

/*.article { width: min(75ch, 75%); margin: 0 auto; }*/
.article p:first-of-type::first-letter {
  float: left;
  font-size: 6.2rem;
  line-height: .6;
  padding-right: 0.35rem;
  color: #7c3080;
  font-family: "Georgia", serif;
}




a:link {
    color:#803030;
    text-decoration: dotted; 
}

a:visited {
    color:#7c3080;
    text-decoration: dotted
}

a:hover {
    text-decoration: underline;
    background-color:#f6defd   
}

a.active {
    color:aqua
}
/*-------------------------- slide show --------------------------*/


/*-------------------------- nav bar --------------------------*/

ul.nav {
    background-color: #cd5691;
    color: white;
    padding: 5x;
    font-family: "GrotzecCond-Demibold", "Impact", sans-serif;
    font-size: 2em;
    overflow: hidden;
    list-style-type :none;
    margin: 0 0 0 0
}
    
ul.nav li {
    float: left;
         margin: 0 0 0 0
}

ul.nav li.logo {
 position:relative;
     left:40%
}

ul.nav li a:link {
    text-decoration: none;
    color:white
}

ul.nav li a:visted {
    color:white
}
    
div.dropdowncontent{
    display: none;
    position: absolute;
    background-color: #cd5691;
    min-width: 160x;
    box-shadow: 0 8 16 0 #7c3080 ;
        z-index: 1;
}

ul.nav li.logo a:hover {
    text-decoration: none;
    background-color: #eb9392;
    letter-spacing: 2;
    transition: letter-spacing 0.3s ease-in
    
}

ul.nav li.dropbutton a:hover {
    text-decoration: none;
    background-color: #eb9392;
}

li.dropbutton:hover div.dropdowncontent {
    display: block;

}
li.dropbutton:hover div.dropdowncontent a:link {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: .6em;
border-bottom: 1px solid #7c3080;
}

li.dropbutton:hover div.dropdowncontent a:visited { /* The same as above */
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: .6em;
border-bottom: 1px solid #7c3080;
}

li.dropbutton:hover div.dropdowncontent a:hover {
color: white;
background-color: white;
transition: background-color 0.2s ease-in;
}