body{background-color: gainsboro;width: 90%; }


h1{font-family: 'Exo 2', sans-serif; text-align:center; color: hsl(0, 0%, 20% );font-size: 1.1em;margin-bottom: 0;}
h3{font-family: 'Exo 2', sans-serif; text-align:center; color: darkgray;font-style: italic;font-size: 1em; font-size: 1em;margin-top: 0;
padding-bottom: 1em}
h2{font-family: sans-serif; text-align:center;margin-bottom:0;font-weight: 200;color: darkgray;
}
p{font-family: 'Exo 2', sans-serif; text-align:center; margin-top: 0;font-style: italic;color: rgb(180, 178, 185);}
a{font-family: 'Exo 2', sans-serif; text-align:center; margin-top: 0;font-style:normal;font-weight: 800;}

.thumbnail{width:100%;margin-left: auto;}


.main-area
{margin-left:auto;width: 90%;  
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */;
justify-content: center;background-color:gainsboro;}

#big-picture{margin-left:auto;width: 90%;margin-bottom: .5em;margin-top: .5em;}

.centered{margin-left: auto;margin-right: auto;width: 100%; text-align: center; 
    
 }


img{   width: 100%; 
    height: auto; }

.header{margin-left:auto;width: 90%;background-color:gainsboro ;margin-bottom:0;height:40px;}

.previous { 
    background-color: darkgray;
    color: white;float: right;
height:100%;width: auto;
    font-size: 10px;
    border: none;
    cursor: pointer;
}

.next { 
    background-color: darkgray;
    color: white;float: right;
height:100%;
    font-size: 10px;
    border: none;
    cursor: pointer;
}


/*dropdown-menu*/






.dropbtn { 
    background-color: gainsboro;
    color: darkgray;
height:100%;
    font-size: 18px;
    border: none;
    cursor: pointer;
}

.dropdown {height:100%;
    float: left;
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color:black;
    min-width: 100%;
  
}

.dropdown-content a {font-family: 'Exo 2', sans-serif;
    color: rgb(229, 229, 150);
    padding: 12px 16px;
    text-decoration: none;
    display: block;/* text-shadow: 2px 2px hsl(0, 0%, 20% );*/text-align: left;
}

.dropdown-content a:hover {background-color: hsl(0, 0%, 20% )}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: gainsboro;
}
/*dropdown-menu-end*/


.site-branding{color: cornsilk;text-align: center;}



.card a{color: black;text-decoration: none;width: 100%}

.card a:hover{box-shadow: 3px 3px 8px hsl(0, 0%, 20% );}



.card-content{text-align:center;margin-top: 0;margin-bottom: 5em;font-weight: normal;}

.card-content p{font-size: 95%;}

.card{ background:white;margin-bottom:.5em;padding-top:.25em;padding-bottom: .25em;{margin-left:auto;width: 90%;  
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */;
justify-content: center;} }



@media screen and (min-width:40em){

 .main-area
{margin-left:auto;width: 90%;  
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */;
flex-wrap: wrap;
    
    
    justify-content: center;background-color:gainsboro;}
    
        
    
    
  .previous { 
    background-color: darkgray;
    color: white;float: right;
height:100%;width: auto;
    font-size: 14px;
    border: none;
    cursor: pointer;margin-left: 1em;margin-top: 10%
}

.next { 
    background-color: darkgray;
    color: white;float: right;
height:100%;
    font-size: 14px;
    border: none;
    cursor: pointer;
}
  
    
    
    
    
.cards{
    

 
   display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */      
    justify-content: space-between;flex-wrap:wrap;margin-top: -1em;}

    .card{ 
        
display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */ 
        
flex: 0 1 calc(50% - .5em); background:white;margin-bottom: 2em;
 font-weight: 200;
    
    justify-content: space-between;flex-wrap:wrap;}
    
    h1{font-family: 'Exo 2', sans-serif; cursive; text-align:center; color: hsl(0, 0%, 20% );font-size: 1.5em;font-weight: 200;}
   
    h3{font-family: 'Exo 2', sans-serif; text-align:center; color: darkgray;font-style: italic;font-size: 1em;font-size: 1.2em; margin-top: 0;}
    h2{font-family: sans-serif; text-align:center; color:darkgray; }

    #big-picture{margin-bottom: 2em;}

.header{margin-left:auto;width: 90%;background-color:gainsboro;margin-bottom:0;height:60px;}
    .dropbtn { 
    background-color: gainsboro;
    color: darkgray;
height:100%;
    font-size: 34px;
    border: none;
    cursor: pointer;
}}

@media screen and (min-width:64em){
   .main-area{margin-left:auto;width: 90%;  
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */;
justify-content: center;background-color: gainsboro;flex-wrap: wrap;}
 
    
    
    .card{flex: 0 1 calc(33% - 1em); background:white;margin-bottom: 2em;}
    .cards{margin-top: inherit;}
    h1{font-family: 'Exo 2', sans-serif; text-align:center; color: hsl(0, 0%, 20% );font-size: 2.5em;}
    h3{font-family: 'Exo 2', sans-serif; text-align:center; color:darkgray;font-style: italic;font-size: .5em;font-weight: 400;font-size: 2em; margin-top: 0;font-weight: 200;}
    h2{font-family: sans-serif; text-align:center;  }
    #big-picture{margin-bottom: 1em;}
    .header{margin-left:auto;width: 90%;background-color: gainsboro;margin-bottom:0;height:100px;}
   .dropbtn { 
    background-color: gainsboro;
    color: darkgray;
height:100%;
    font-size: 48px;
    border: none;
    cursor: pointer;
}
}