html,
body {
  width: 100%;
  height: 100%;
}

* {
  font-family: 'Nunito Sans', sans-serif;
  letter-spacing: 1.5px;
}

body {
  background-color: white;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

ul,
li {
  list-style-type: none;
}

a,
a:hover {
  text-decoration: none;
  cursor: pointer;
}

button,
button:hover,
button:visited {
  border: none;
}

#dis {

  background-color: rgba(255, 255, 255, 0.432);
  opacity: .3;
  filter: alpha(opacity=00);
  pointer-events: none;
}

#dis-booked {
  position: absolute;
  z-index: 999;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 30%;
  text-align: center;
  font-weight: 900;
  font-size: 42px;
}

/* Jumbotron */

#hero-image {
  height: 100vh;
  width: auto;
  /* dark overlay Image location */
  background-image: linear-gradient(rgba(0, 0, 0, 0.603), hsla(0, 0%, 0%, 0.603)),
    url('https://images.unsplash.com/photo-1537758069025-b07fb3548d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1976&q=80');

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Background image doesn't tile */
  background-repeat: no-repeat;

  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;

  display: flex;
  flex-direction: column;

}


#main-text {
  display: flex;
  margin-left: 100px;
  margin-top: 30vh;
  margin-bottom: 100px;
  padding: 0;
  width: 80%;
}

#cta-button {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-right: 200px;
}

#cta-button button {
  font-size: 2em;
  width: 250px;
  font-weight: bold;
}

#cta-button button:hover {
  background-color: black;
}

#main-text h1 {
  /* Text properties */
  font-size: 5em;
  font-weight: bold;
  color: white;
}

#header-div {
  padding-bottom: 50px;
}

/* Main Section */

#heading {
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  margin-left: 100px;
}

#heading h2 {
  font-size: 2em;
  font-weight: bold;
}

#heading p {
  font-size: 1.2em;
}

#photographers_container {
  padding: 0;
  margin-right: auto;

  /* Change this 85px to have it left skewed */
  margin-left: 100px;
}

#photographers {
  display: flex;
  margin-top: 1%;
  margin-right: 0;
  margin-left: auto;
  padding: 0;
}


#profilecard {
  display: flex;
  flex-direction: column;
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.1s;
  width: 250px;
  height: 445px;
  border-radius: 15px;
  margin: 15px;
  margin-top: 15px;
}

#mainImg {
  object-fit: contain;
  border-radius: 15px 15px 0 0;
}

#items label {
  padding-top: 5px;
  padding-left: 20px;
  font-size: 1.2em;
}

#items {
  /* We are limiting the size of the div the image is in. This way, the image can overflow just slightly without affecting the other elements in the card.
   */
  max-width: 300px;
  height: 375px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
}

#items img {
  height: auto;
  width: 250px;
}

#tags {
  font-size: 0.8em;
}

/* Photographer Profile Image for Main */

#togInfo {
  display: flex;
  justify-content: end;
  align-items: center;
  position: relative;
  padding-bottom: 15px;
}

#proimg {
  width: 20%;
  height: auto;
  border-radius: 50%;

}

#categories {
  padding-top: 5px;
  padding-left: 35px;
}

.fa-star {
  margin-top: 5px;
  margin-right: -2px;
  font-size: 12px;
  color: #F15B22;
}

figcaption {
  padding-left: 10px;
}

#pname {
  margin-top: 10px;
  font-weight: bold;
  font-size: 1em;
  margin-bottom: -5px;
}

#price {
  font-size: 0.8em;
  margin-top: 5px;
}

/* Dots for slider */

.flickity-page-dots {
  bottom: 0;
}

/* Standardized Buttons for profile */
.btn {
  border-radius: 50px;
  width: 150px;
}

#topBook {
  border: none;
  background-color: #F15B22;
  font-size: 0.9em;
  font-weight: bold;
}

#topBook:hover {
  border: none;
  background-color: black;
}

#topBook {
  margin-bottom: 10px;
}

#view {
  margin-top: 25px;
  margin-left: 15px;
}

#view a i {
  font-size: 1.5em;
  margin-left: 5px;
}

#mobileslider #view {
  display: flex;
  justify-content: center;
  margin-left: 0px;
}



/*Media Queries*/

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1025px) {

  #mobileslider {
    display: none;
  }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {


  #photographers_container {
    padding: 0;
    margin-right: auto;

    /* Change this 85px to have it left skewed */
    margin-left: auto;
  }

  #heading h2 {
    font-size: 2em;
  }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

  #photographers_container {
    padding: 0;
    margin-right: auto;

    /* Change this 85px to have it left skewed */
    margin-left: auto;
  }

  #mobileslider {
    display: none;
  }

  /* Jumbotron */

  #hero-image {
    width: 100%;
  }


  #main-text {
    display: flex;
    margin: 30vh 100px 50px 25px;
    padding: 0;
    width: auto;
  }


  #cta-button {
    display: flex;
    justify-content: flex-start;
    margin: 25px;
  }


  #main-text h1 {
    /* Text properties */
    font-size: 3em;
  }

  #cta-button button {
    font-size: 1.5em;
    width: 200px;
  }

  #heading {
    display: flex;
    flex-direction: column;
    padding-top: 25px;
    margin-left: auto;
  }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #mobileslider {
    display: none;
  }


  #hero-image {
    width: 100%;
  }



  #heading {
    display: flex;
    flex-direction: column;
    padding-top: 25px;
    margin-left: 0px;
  }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  #heading {
    display: flex;
    margin-top: 5%;
  }

  #items {
    margin-top: 25px;
    padding: 0;
  }

  #photographers_container {
    display: none;
  }


  #heading {
    display: flex;
    flex-direction: column;
    padding-top: 25px;
    margin-left: 0px;
  }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

  /* Hero Image */

  #main-text {
    display: flex;
    margin: 25vh 25px 50px 25px;
    padding: 0;
  }

  #cta-button {
    display: flex;
    justify-content: flex-start;
    margin: 25px;
  }

  #cta-button button {
    font-size: 1em;
    width: 150px;
  }

  #main-text h1 {
    /* Text properties */
    font-size: 2.5em;
  }


  #heading {
    display: flex;
    flex-direction: column;
    padding-top: 25px;
    margin-left: 0px;
  }

  #heading h2 {
    font-size: 1.5em;
  }

  #heading p {
    font-size: 0.8em;
  }

  /* Profile Cards */
  #profilecard {
    margin: 25px;
  }

  #photographers_container {
    display: none;
  }

}