@media only screen and (max-width: 1700px) {
  .transitions {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background-image: url(../images/Custom_Cone.jpg), url(../images/Airation.png);
    background-position: 
        left,
        right;
    
    background-size: 
        50%,
        50%;
    background-repeat: no-repeat;
    background-color: hsla(210, 100%, 5%, 0.6) !important;
    background-blend-mode: darken;
  }

  .transitions img {
    display: none !important;
  }

  article {
    width: 80% !important;
    background-color: hsla(210, 100%, 5%, 0.603);
    margin: 10px;
  }
}

@media only screen and (max-width: 1475px) {
  .graphics {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .aeration {
    margin-left: 10px !important;
    margin-right: 10px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .graphics img {
    margin: 5px !important;
    width: 70% !important;
  }

  .aeration p {
    width: 75%;
  }
}

@media only screen and (max-width: 1200px) {
  .tran-main {
    padding-top: 55px !important;
  }
}

@media only screen and (max-width: 765px) {
  .transitions {
    background-image: url(../images/Airation.png) !important;
    background-size: cover !important;
    background-position: center;
  }
}


@media only screen and (max-width: 540px) {
  .tran-main h1 {
    font-size: 2.5rem !important;
  }

  article p{
    font-size: 1.2rem !important;
  }
}










* {
    font-family: Copperplate, "Copperplate Gothic Light", "Crimson Text", Georgia, serif;
       /* border: red solid 1px */
    
}

.tran-body {
    margin: 0;
  width: 100%;
  background-color: rgb(0, 0, 2);
}



.tran-main {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 150px;
    top: 15px;
    width: 100%;
    text-align: center;
    justify-content: center;
    background-image: url(../images/gallery_photos/inside_outside_band.jpg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

.tran-main h1 {
    font-size: 5rem;
    color: hsl(199, 61%, 93%);
    text-shadow: rgb(37, 0, 247) 2px 2px 10px,
                 rgb(0, 110, 255) -2px -2px 10px,
                 red -2px 2px 10px;
}



  .transitions p,
  .transitions h4,
  .transitions li,
  .transitions h2 {
    font-family: "Radio Canada", Georgia, 'Times New Roman', Times, serif;
    letter-spacing: 0.2rem;
    line-height: 2rem;
    color: rgb(226, 226, 245);
  }

.transitions p {
    font-size: 1.5rem;
    line-height: 3rem;
    padding-top: 1.5rem;

}


  .transitions {
    display: flex;
    flex-direction: row;
    color:rgb(226, 226, 245);
    background-color: hsla(210, 100%, 5%, 0.9);
    margin: 10px;
    margin-bottom: 50px;
    padding-bottom: 5px;
    
    
  }

  .transitions img {
    width: 25%;
    height: auto;
    align-self: center;
    border: 3px solid hsl(214, 96%, 90%);
    box-shadow: 0 0 20px 2px rgba(0, 25, 253, 0.589);
  }

  .transitions ul {
    transform: translateX(-20px);

  }

#wide {
    margin-right: 25px;
}

article {
  width: 50%;
}

#close {
    margin-left: 25px;
}

.aeration {
    margin-bottom: 5rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: hsla(210, 100%, 8%, 0.833);
}

.graphics {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.aeration p {
    margin-top: 40px !important;
    color:hsl(199, 61%, 93%);
    font-family: "Radio Canada", Georgia, 'Times New Roman', Times, serif;
    font-size: 1.5rem;

}

.graphics img {
    width: 30rem;
    height: auto;
    border: 3px solid hsl(214, 96%, 90%);
    box-shadow: 0 0 20px 2px rgba(0, 25, 253, 0.589);
}

ul {
  font-size: 1.5rem;
  margin-top: 16px;
}