html{
  height:100%;
}
body{
  margin:0;
  padding:0;
  color:rgb(2, 17, 41);
  font-family: sans-serif;
  background-image:  url("card_pictures/card1.jpg");
  background-size: 900px 450px;
  background-repeat: no-repeat;
  background-color: black;
  font-family: 'Raleway', sans-serif;

  /*background-color: red;*/
}


 #intro{
    opacity: 1;
    position: fixed;
    top: 58%;
    left: 20%;
    width: 300px;
    padding: 2em;
    font-size: 1.6em;
    color: white;
    line-height: 38px;
  }
#part1{
  opacity: 0.0;
}
#part2{
  opacity: 0.0
}
#part3{
  opacity: 0.0;
}
#part4{
  opacity: 0;
}
#part5{
  opacity: 0.0;
}

  /*set up photo to be fluid*/
  /*set widtch of parent container*/
  /*figure{
    width: 90%;
    margin: 0 auto;
  }*/
  /*set image to max-width:100%*/
 /* img{
    max-width: 100%
  }*/


/*=========================================== Media Queries ==========================================*/
@media screen and (min-width: 500px){
  body{
    /*background-color: red;*/
    /*background-image: url("pic1.jpg");*/
    background-image:  url("card_pictures/card1.jpg");

    background-size: 900px 450px;    
    background-repeat: no-repeat;
    background-color: black;
  }
  #intro{
    opacity: 1;
    position: fixed;
    top: 58%;
    left: 20%;
    width: 300px;
    padding: 2em;
    color: white;
    line-height: 38px;
  }
} /* end of MEDIUM media query */

/*============================================== 2nd =================================================*/
@media screen and (min-width: 520px){
  body{
    /*background-color: darkred;*/
    background-image:  url("card_pictures/test.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  
  /* #intro{
    opacity: 1;
    position: fixed;
    top: 62%;
    left: 20%;
    width: 300px;
    padding: 2em;
    font-size: 1.6em;
    color: white;
    line-height: 38px;

  }
  #part1{
    opacity: 0.0;
  }*/
  




}
/*============================================== 4th =================================================*/
@media screen and (min-width: 540px){
  body{
    /*background-color: orange;*/
    background-image:  url("card_pictures/test.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
  #intro{
    opacity: 0.0;
  }
  #part1{
    opacity: 1;
     position: fixed;
    top: 58%;
    left: 22%;
    width: 300px;
    padding: 2em;
    color: white;
    font-size: 1.6em;
    line-height: 38px;

  }
}
/*============================================== 5th =================================================*/
@media screen and (min-width: 560px){
  body{
    /*background-color: darkblue;*/
    background-image:  url("card_pictures/card4.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 6th =================================================*/
@media screen and (min-width: 580px){
  body{
    /*background-color: blue;*/
    background-image:  url("card_pictures/card5.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 7th =================================================*/
@media screen and (min-width: 600px){
  body{
    /*background-color: lightblue;*/
    background-image:  url("card_pictures/card6.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 8th =================================================*/
@media screen and (min-width: 620px){
  body{
    /*background-color: violet;*/
    background-image:  url("card_pictures/card7.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 9th =================================================*/
@media screen and (min-width: 640px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card8.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 10th =================================================*/
@media screen and (min-width:660px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card9.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
  #part1{
    opacity: 0.0;
  }
  #part2{
    opacity: 1;
    position: fixed;
    top: 58%;
    left: 25%;
    width: 300px;
    padding: 2em;
    color: white;
    font-size: 1.6em;
    line-height: 38px;
  }
}
/*============================================== 11th =================================================*/
@media screen and (min-width: 680px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card10.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 12th =================================================*/
@media screen and (min-width: 700px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card11.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 13th =================================================*/
@media screen and (min-width: 720px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card12.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 14th =================================================*/
@media screen and (min-width: 740px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card13.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 15th =================================================*/
@media screen and (min-width: 760px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card14.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
  #part2{
    opacity: 0.0;
  }
  #part3{
    opacity: 1;
    position: fixed;
    top: 58%;
    left: 18%;
    width: 550px;
    padding: 2em;
    color: white;
    font-size: 1.6em;
    line-height: 38px;
  }
}
/*============================================== 16th =================================================*/
@media screen and (min-width: 780px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card15.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 17th =================================================*/
@media screen and (min-width: 800px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card16.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 18th =================================================*/
@media screen and (min-width: 820px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card17.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 19th =================================================*/
@media screen and (min-width: 840px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card18.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
  #part3{
    opacity: 0.0;
  }
  #part4{
    opacity: 1;
     position: fixed;
    top: 58%;
    left: 24%;
    width: 500px;
    padding: 2em;
    color: white;
    font-size: 1.6em;
    line-height: 38px;

  }
  

}
/*============================================== 20th =================================================*/
@media screen and (min-width: 860px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card19.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 21st =================================================*/
@media screen and (min-width: 880px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card20.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 22nd =================================================*/
@media screen and (min-width: 900px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card21.jpg");
    background-size: 900px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 23rd =================================================*/
@media screen and (min-width: 920px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card22.jpg");
    background-size: 920px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 24th =================================================*/
@media screen and (min-width: 940px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card23.jpg");
    background-size: 940px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 25th =================================================*/
@media screen and (min-width: 960px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card24.jpg");
    background-size: 960px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 26th =================================================*/
@media screen and (min-width: 980px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card25.jpg");
    background-size: 980px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 27th =================================================*/
@media screen and (min-width: 1000px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card26.jpg");
    background-size: 1000px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 28th =================================================*/
@media screen and (min-width: 1020px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card27.jpg");
    background-size: 1020px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 29th =================================================*/
@media screen and (min-width: 1040px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card28.jpg");
    background-size: 1040px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 30th =================================================*/
@media screen and (min-width: 1060px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card29.jpg");
    background-size: 1060px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 31st =================================================*/
@media screen and (min-width: 1080px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card30.jpg");
    background-size: 1080px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  #part4{
    opacity: 0.0;
  }
  #part5{
    opacity: 1;
    position: fixed;
    top: 58%;
    left: 22%;
    width: 500px;
    padding: 2em;
    color: white;
    font-size: 1.6em;
    line-height: 38px;
  }
}
/*============================================== 32nd =================================================*/
@media screen and (min-width: 1100px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card31.jpg");
    background-size: 1100px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 33rd =================================================*/
@media screen and (min-width: 1120px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card32.jpg");
    background-size: 1120px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 34th =================================================*/
@media screen and (min-width: 1140px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card33.jpg");
    background-size: 1140px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 35th =================================================*/
@media screen and (min-width: 1160px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card34.jpg");
    background-size: 1160px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 36th =================================================*/
@media screen and (min-width: 1180px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card35.jpg");
    background-size: 1180px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
}
/*============================================== 37th =================================================*/
@media screen and (min-width: 1200px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card36.jpg");
    background-size: 1200px 450px;
    background-repeat: no-repeat;
    background-color: black;

  }
  p{
    font-size: .9em;
  }
}

/*============================================== 38th =================================================*/
@media screen and (min-width: 1220px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card37.jpg");
    background-size: 1220px 450px;
    background-repeat: no-repeat;
    background-color: black;

  }
  p{
    font-size: .9em;
  }
}
/*============================================== 39th =================================================*/
@media screen and (min-width: 1240px){
  body{
    /*background-color: purple;*/
    background-image:  url("card_pictures/card38b.jpg");
    background-size: 1500px 450px;
    background-repeat: no-repeat;
    background-color: black;
  }
  p{
    font-size: .9em;
  }
 
}