/* ----------------------  LOAD FONTS FROM SERVER ------------------------------ */

@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);
}

/* ----------------------  SITE STYLES  ------------------------------------- */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ----------------------  HAMBURGER NAV and MENU --------------------------- */

a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

a:hover
{
  color: #d3222a;
}

/*
 * Bar with logo
 */

.dropdown {   
    background-color: #bdf229;
    height: 55px;
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/cleanlogo2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 37px;
}

#menuToggle
{
  display: block;
  position: relative;
  top: 18px;
  left: 20px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 25px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  
  background: #1c1c1c;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 20%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}


.dropdowncontent
{
  position: absolute;
left:-20px;
  width: 280px;
  margin: -100px 0px 0px 0px;
  padding: 0px;
  padding-top: 125px;
  
  background-color: #ededed;
    opacity: 0.9;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.dropdowncontent a {
    font-size: 1.3em;
    font-family: "GrotzecCond-Demibold","Helvetica",sans-serif;
    display: block;
    padding: 10px 0px 10px 10px;
}

.dropdowncontent a:hover {
      background-color: orangered;
    color:white;
}

.dropdowncontent li {
    border-bottom: 1px solid white;
}

.dropdowncontent span {
    font-size: 13px;
    display: inline;
    font-family: "GrotzecCond-Demibold","Helvetica",sans-serif;
    padding: 1px 3px;
    color:white;
    background-color: #d3222a;
      border-radius: 0px;


}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

.dropdowncontent ul a:link li {
    font-family: "GrotzecCond-Demibold","Impact",sans-serif;
    font-size: 2em;
    line-height: 28px;
    text-transform: uppercase;
}

.dropdowncontent ul a:hover li {
    color:#24608D;
}

.clickhome {
    width: 50%;
    height: 50px;
    margin: 0 25%;
    position: absolute; 
    top:0;
    z-index:5;
}


/* --------------------------------- SITE STYLES ---------------------------- */
html, body {
    margin:0;
}

body {
    width:100%;
}

/* TEASER STYLES */

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

@media only screen and (min-width:601px) {
.container {
    width: 50%;
    margin: 0 auto;
}
}

.teaserhadjis {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-hadjis.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}

.teaserhadjis:hover {
    filter: grayscale(70%);
}

.teasercinamon {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-cinamon.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}

.teasercinamon:hover {
    filter: grayscale(70%);
}

.teaserbendaly {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-bendaly.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-color: gold;
}

.teaserbendaly:hover {
    filter: grayscale(70%);
}

.teaserkemp {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-kemp.png");
    background-repeat: no-repeat;
    background-size:cover;
}

.teaserkemp:hover {
    filter: grayscale(70%);
}

.teasersaint-val {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-saint-val.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}

.teasersaint-val:hover {
    filter: grayscale(70%);
}

.teaserpereira {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-pereira.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}

.teaserpereira:hover {
    filter: grayscale(70%);
}

.teaseraurard {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-aurard.jpeg");
    background-repeat: no-repeat;
    background-size:cover;
}

.teaseraurard:hover {
    filter: grayscale(70%);
}

.teasersegill {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-segill.png");
    background-repeat: no-repeat;
    background-size:cover;
}

.teasersegill:hover {
    filter: grayscale(70%);
}

.teaserjing {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-jing.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}

.teaserjing:hover {
    filter: grayscale(70%);
}

.teaseralvarado {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-alvarado.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}

.teaseralvarado:hover {
    filter: grayscale(70%);
}

.teaserdicorpo {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-dicorpo.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}

.teaserdicorpo:hover {
    filter: grayscale(70%);
}

.teasernyi {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-nyi.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}

.teasernyi:hover {
    filter: grayscale(70%);
}

.teasercasali {
    background-image: url("https://journalismdesign.camd.northeastern.edu/clean/images/thumb-casali.jpeg");
    background-repeat: no-repeat;
    background-size:cover;
}

.teasercasali:hover {
    filter: grayscale(70%);
}



.teaser img {
    width:100%;
}

.teaserblock {
    min-height: 200px;
}


@media only screen and (max-width:600px) {
.teaser {
    display:block;
    background-color: #ededed;
    text-decoration: none;
    margin-top: 30px;
    cursor: auto;
    border-bottom: 6px solid #3ED666;
}


.teaser:hover {
    display:block;
    background-color: #bdf229;
    text-decoration: none;
    margin-top: 30px;
    border-bottom: 6px solid #666;

}
}

@media only screen and (min-width:601px) {
.teaser {
    display:grid;
    grid-template-columns: 50% 50%;
    background-color: #ededed;
    text-decoration: none;
    margin-top: 30px;
    border-bottom: 6px solid #bdf229;
}


.teaser:hover {
    display:grid;
    grid-template-columns: 50% 50%;
    background-color: #bdf229;
    text-decoration: none;
    margin-top: 30px;
    border-bottom: 6px solid #666;
}
}

a .teaserblock h2 {
    font-family: "GrotzecCond-Demibold","Impact",sans-serif;
    font-weight: 100;
    color: black;
    font-size: 2em;
    line-height:1;
    text-transform: uppercase;
    margin: 30px 30px 5px 30px;
}

a .teaserblock p {
    font-family: "Georgia",serif;
    line-height: 1.4;
    margin: 0px 30px 5px 30px;
    color:#666;
    font-weight: 100;

}