/* BASE For iPhone X max-width 375px: */

#Img1 {
    width: 18%;
    position: absolute;
    top: 33%;
    left: 9%;
    cursor: pointer;
    }

#Img2 {
  width: 22%;
  position: absolute;
  top: 80%;
  left: 60%;
  cursor: pointer;
}

#Img3 {
  width: 22%;
  position: absolute;
  top: 45%;
  left: 30%;
  cursor: pointer;
}

#Img4 {
  width: 22%;
  position: absolute;
  top: 8%;
  left: 50%;
  cursor: pointer;
}

#Img5 {
  width: 18%;
  position: absolute;
  top: 58%;
  left: 2%;
  cursor: pointer;
}

#Img6 {
  width: 18%;
  position: absolute;
  top: 81%;
  left:41%;
  cursor: pointer;
}

#Img7 {
   width: 18%;
  position: absolute;
  top: 25%;
  left: 70%;
  cursor: pointer;
}
.lookbook1 {
	display: block;
	width: 95%;
	height: auto;
	margin: 0;
	padding-top: 6%;
	margin-left: auto;
	margin-right: auto;
}
.lookbook {
	display: block;
	width: 95%;
	height: auto;
	margin: 0;
	padding-top: 2%;
	margin-left: auto;
	margin-right: auto;
}

.linesheet {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding-top: 6%;
	margin-left: auto;
	margin-right: auto;
}

.gif {
	display: block;
	width: 78%;
	height: auto;
	margin: 0;
	padding-top: 0%;
	margin-left: auto;
	margin-right: auto;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: absolute; 
  z-index: 2; /* Sit on top */
  padding-top: 0; /* Location of the box */
  top: 20%;
  margin-left: auto;
  margin-right: auto;
  width: 100%; 
  height: auto; 
  background-color: transparent;
}
.modal2 {
  display: none; /* Hidden by default */
  position: absolute; 
  z-index: 2; /* Sit on top */
  padding-top: 0; /* Location of the box */
  top: 18%;
  margin-left: auto;
  margin-right: auto;
  width: 100%; 
  height: auto; 
  background-color: transparent;
}

/* Modal Content (image) */
.modal-content {
  position: relative;
  background-color: white;
  margin: auto;
  padding: 0;
  border: 3px solid black;
  width: 70%;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15),0 6px 20px 0 rgba(0,0,0,0.15);
}

/* Modal Content (slideshow) */
.modal-content2 {
  position: relative;
  background-color: white;
  margin: auto;
  padding: 0;
  border: 3px solid black;
  width: 75%;
  height: 575px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15),0 6px 20px 0 rgba(0,0,0,0.15);
  overflow-y: auto;
}

.scroll-content {
  width:100%;
  height: 100%;
  position: relative;
  margin: auto;
  overflow: auto;
}

.modal-header {
  width: 100;
  margin: auto;
  padding: 1%;
  background-color: transparent;
  border-bottom: 3px solid black;
  color: black;
}
.modal-header2 {
  position: fixed;
  width: 74.5%;
  margin: auto;
  padding: .25%;
  background-color: white;
  border-bottom: 3px solid black;
  color: black;
}

/* The Close Button */
.close {
 position: relative;
  left: -20%;
}

.close:hover,
.close:focus {
  color: #E0E0E0;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.active,
.demo:hover {
  opacity: 0;
}



@media only screen and (min-width:768px) {
  /* For iPad: */
    
#Img1 {
    width: 18%;
    top: 31%;
    left: 9%;
    }
    
#Img2 {
    width: 18%;
    top: 73%;
    left: 65%;
    }
    
#Img3 {
    width: 18%;
    }
    
#Img4 {
    width: 18%;
    }
    
#Img5 {
  width: 18%;
  top: 57%;
  left: 2%;
}
    
#Img6 {
  width: 18%;
  top: 78%;
  left:44%;
}
    
#Img7 {
  top: 29%;
  left: 67%;
}
    
.modal {
    top: 10%;
    }
    
.modal2 {
    top: 14%;  
    }

        
@media only screen and (min-width:992px) {
  /* For Desktop: */
    
#Img1 {
    width: 10%;
    top: 22%;
    left: 2%;
    }
    
#Img2 {
    width: 10%;
    top: 68%;
    left: 45%;
    }
    
#Img3 {
    width: 10%;
    top: 31%;
    left: 22%;
    }
    
#Img4 {
    width: 10%;
    left: 45%;
    }
    
#Img5 {
  width: 10%;
    top: 61%;
  left: 17%;
}
    
#Img6 {
  width: 10%;
  top: 64%;
  left:62%;
}
    
#Img7 {
  width: 10%;
  top: 20%;
  left: 70%;
}
    
.modal2 {
    top: 9%;
    }
    
.modal-content {
  width: 28%;
  height: auto;
    }
    
.modal-content2 {
  width: 60%;
  height: 625px;
    }
    
.modal-header2 {
  position: fixed;
  width: 59.5%;
  margin: auto;
  padding: .25%;
  background-color: white;
  border-bottom: 3px solid black;
  color: black;
}