body,
div.dropdown button.dropbtn,
button#retailerButton {
  margin: 0;
}

div.XMES1E4,
div.XMES1E5,
div.XMES1E3 {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 0 20px;
}

div.XMES1E4  {
  background-image: url("/images/thumbnails/x-men/x-men-evolution/season-1/X-Men-Evolution-S1E4.png");  
  padding-bottom: 32px;  
}

div.XMES1E5,
div.XMES1E3 {
  padding-bottom: 200px;
}

div.XMES1E5 {
  background-image: url("/images/thumbnails/x-men/x-men-evolution/season-1/X-Men-Evolution-S1E5.png");  
}

div.XMES1E3 {
  background-image: url("/images/thumbnails/x-men/x-men-evolution/season-1/X-Men-Evolution-S1E3.png");
}

div.navbar a, 
div.dropdown button.dropbtn, 
div.navbar a:hover, 
div.dropdown:hover button.dropbtn, 
div.dropdown-content a, h1,  
h2, h3, h4, p, li, 
ul, button,
button a:link,
button a:visited,
a:visited, .overview,
a.reference:link,
a.reference:visited, 
a.retailerLink:visited {
  font-family: avenir-light;    
}

div.navbar a, 
div.dropdown button.dropbtn, 
div.navbar a:hover, 
div.dropdown:hover button.dropbtn, 
div.dropdown-content a, 
h1, h2, h3, h4, p, li, 
ul, a:visited, 
p.overview,
a.reference:link,
a.reference:visited,
button.x-men-evolution a,
button.next a,
button.contentHider,
button#retailerButton {
  color: white;  
}

div.navbar a, 
div.dropdown,
div.dropdown-content a {
  float: left;
}

div.dropdown-content a, 
div.dropdown:hover div.dropdown-content,
img.x-men-evolution-logo-top, 
img.x-men-evolution-logo-bottom, 
img.tv-y7-fv-rating,
img.tv-pg-v-rating,
button.next {
  display: block;
}

div.navbar, 
div.dropdown {
  overflow: hidden;  
}

div.navbar, 
div.modal {
  width: 100%;  
}

div.navbar {
  background-color: #333;
}

div.navbar a, 
div.dropdown button.dropbtn {
  font-size: 16px;  
}

div.navbar a, 
div.dropdown button.dropbtn {
  padding: 14px 16px;
}

div.navbar a, h1, h2, h3, 
p, p.overview, button {
  text-align: center;
}

span.close:hover,
span.close:focus,
div.navbar a {
  text-decoration: none;
}

div.dropdown button.dropbtn { 
  outline: none;
  background-color: inherit; 
}

div.dropdown button.dropbtn,
button.contentHider,
button#retailerButton,
button.apple-tv-button,
button.microsoft-store-button,
button.amazon-prime-video-button,
button.vudu-button,
button.google-play-button,
button.youtube-button,
a.retailerLink:visited,
button.x-men-evolution, 
button.next {
  border: none;  
}

div.navbar a:hover, 
div.dropdown:hover button.dropbtn {
  background-color: red;
}

div.dropdown-content,
div.modal {
  z-index: 1;  
}

div.dropdown-content,
#violenceAndDisturbingContentArea,
#suggestiveContentArea,
#drinkingDrugAndGamblingContentArea,
#languageArea,
div.modal {
  display: none;
}

div.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

div.dropdown-content a, 
div.dropdown-content a:visited,
h2.retailersHeading,
button.apple-tv-button,
button.microsoft-store-button,
button.amazon-prime-video-button,
button.vudu-button,
button.google-play-button,
button.youtube-button,
a.retailerLink:link,
a.retailerLink:active,
a.retailerLink:visited,
span.close:hover,
span.close:focus {
  color: black;
}

div.dropdown-content a {
  float: none;
  padding: 12px 16px;
  text-decoration: none;
  text-align: left;
}

div.dropdown-content a:hover {
  background-color: #ddd;
}

img.x-men-evolution-logo-top,
img.x-men-evolution-logo-bottom, 
img.tv-y7-fv-rating,
img.tv-pg-v-rating,
button.next,
button.apple-tv-button,
button.microsoft-store-button,
button.amazon-prime-video-button,
button.vudu-button,
button.google-play-button,
button.youtube-button,
img.disneyplus,
img.apple-TV-logo,
img.microsoft-store-logo,
img.amazon-prime-video-logo,
img.vudu-logo,
img.google-play-logo,
img.youtube-logo {
  margin: auto;
}

img.x-men-evolution-logo-top,
img.x-men-evolution-logo-bottom {
  height: 150px;  
  width: 260px;
}

img.x-men-evolution-logo-bottom  {
  padding-top: 200px;
  padding-bottom: 50px;
}

p.overview {
  margin-left: 10%;
  margin-right: 10%;
}

ul, li, 
p, h2, 
button {
  margin: 0 20px auto;
}

h1, h2, h3, 
p.overview, 
p, ul, li,
button.contentHider,
button#retailerButton {
  text-shadow: 0px 2px 5px blue;  
}

h1, 
h2.synopsisHeader,
h3 {
  margin-bottom: 0;  
}
 
h1 {
  font-size: 30pt;
}

h2, 
p.overview {
  margin-bottom: 30pt;  
}

h2,
button.x-men-evolution,
button.next,
button#retailerButton {
  font-size: 25pt;
}

h3 {
  font-size: 18pt;

}

p.age {
  font-size: 15pt;
  margin-top: 0;
  margin-bottom: 20pt;  
}

h2.retailerHeader {
  margin: 20pt 0 20pt 0;
}

button.contentHider,
button#retailerButton,
button.apple-tv-button,
button.microsoft-store-button,
button.amazon-prime-video-button,
button.vudu-button,
button.google-play-button,
button.youtube-button,
a.retailerLink:visited {
  background: none;
  text-decoration: underline;
}

button.contentHider {
  font-size: 40px;  
  font-weight: 900;  
  margin: 40px 0;  
}

button#retailerButton {
  padding: 0;
  font-weight: 700;
}

div.rating-areas {
  margin-top: 5%;
}

div.retailers,
div.retailer {
  display: flex;
  flex-direction: column;
}

div.retailers,
div.retailer {
  margin-top: 5%;  
}

h2.retailersHeading,
button.apple-tv-button,
button.microsoft-store-button,
button.amazon-prime-video-button,
button.vudu-button,
button.google-play-button,
button.youtube-button,
a.retailerLink:visited {
  text-shadow: none;
  margin-top: 5%;
}

h2.retailersHeading.digital {
  margin-top: 80px;
}

a.retailerLink {
  font-size: 13pt;
}

img.disneyplus,
img.apple-TV-logo,
img.microsoft-store-logo,
img.amazon-prime-video-logo,
img.vudu-logo,
img.google-play-logo,
img.youtube-logo,
a.retailerLink:visited {
  width: 150px;
}

img.disneyplus {
  position: relative;   
  bottom: -22px;
}  

img.amazon-prime-video-logo {
  border-radius: 25px;
}

img.google-play-logo {
  height: 30px;
  margin-top: 4%;
}

button.x-men-evolution, 
button.next {
  background-color: red;  
  border-radius: 10px;
}

button.x-men-evolution a, 
button.next a {
  text-decoration: none;
}

button.next {
  margin-top: 100px;
}

a:link.reference {
  text-decoration: underline;
  color: white;
}

a:hover.reference, 
a:active.reference {
  text-decoration: underline;
}

a:visited.reference {
  color: white;
}

div.rating-areas {
  flex-direction: column;
  margin: 30px 0 50px auto;
}

div.original-rating-area, 
div.proposed-rating-area {
  height: 150px;
  margin: 0 auto;
}

img.tv-y7-fv-rating, 
img.tv-pg-v-rating {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 0px;
  margin-top: 20px;
}

div.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4); 
}

div.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 40px;
  width: 55%;
  border-radius: 25px;  
}

span.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

span.close:hover,
span.close:focus {
  cursor: pointer;
}

@media screen and (min-width: 500px) {
  div.retailer {
    margin-bottom: 10%;
  }
}

@media screen and (min-width: 700px) {
  div.rating-areas {
    flex-direction: row;
  }

  div.retailer {
    margin-bottom: 10%;
  }  
}

@media screen and (min-width: 800px) {
  iframe {
    height: 420px;
    width: 750px;
  }

  p.overview {
    margin-left: 25%;
    margin-right: 25%;
  }

  h3 {
    font-size: 20pt;
  }

  div.retailer {
    margin: auto;    
  }

  img.vudu-logo {
    margin-top: 20%;
  } 

  div.rating-areas,  
  div.retailer,
  div.retailerRow {
    display: flex;
    flex-direction: row;    
  }

  div.retailer {
    margin-top: 20pt;
  }

  button.apple-tv-button,
  button.microsoft-store-button,
  button.vudu-button,
  button.amazon-prime-video-button {
    margin-top: 20%;
  }
}

@media screen and (min-width: 1000px) {
  img.x-men-evolution-logo-top,
  img.x-men-evolution-logo-bottom  {
    height: 300px;
    width: 500px;
  }

  div.retailers {
    margin-top: 0%;
    margin-bottom: 0%;
  }

  img.vudu-logo {
    margin-top: 15%;
  }

  button.apple-tv-button,
  button.microsoft-store-button,
  button.amazon-prime-video-button,  
  button.vudu-button,
  button.google-play-button,
  button.youtube-button {
    margin-left: 15px;
  }

  button.google-play-button,
  button.youtube-button {
    margin-top: 5%;
  }  
}