*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'IM Fell Great Primer', 'Helvetica', 'sans-serif';
}

.main-div{
	margin-left: 5vw;
}
#dynamicheight{width: 90vw;} /* this is for the js to set height of the main-div */

.main-container{
    width: 100%;
}

.div-heading{
    width: 90%;
    margin-left: 5%;
}

.main-container h1{
    margin: 40px;
    font-size: 200%;
    text-align: center;
    font-weight: 400;
    color: #550093;
}

.main-container h2{
    font-size: 140%;
    text-align: center;
    font-style: italic;
}

.main-container a, .insta-link a{
    color: #550093;
    transition: color 0.5s;
}

.main-container a:hover, .insta-link a:hover{
    color: #ec73ec;
}

.col-1-of-8{
	width: 12.5%;
	height: 100%;
	float: left;
}

@media only screen and (max-width: 900px){
	.hide-tab{display: none;}
	.hide-phone{display: block;}
	.col-1-of-8{width: 33.3333%;}
}

@media only screen and (max-width: 500px){
	.hide-phone{display:none;}
	.col-1-of-8{width: 50%;}
}

/*---------------- end of size and positioning --------------*/

.row{
  display: inline-block;
  width: 100%;
  margin-top: 2%;
}

.insta-link{
  margin-left: 5%;
  display: inline-block;
}

.insta-link h3{
  font-size: 120%;
  display: inline-block;
}

.insta-link a{
  text-decoration: none;
}

.insta-link i{
  font-size: 1.3em;
}

.flip-all{
  float: right;
  margin-right: 5%;
  
  display: block;
  
}

.flip-all button{
    margin: 5px 0;
    background-color: yellow;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 120%;
  font-weight: 700;
  cursor: pointer;
}


/*-----------------flipping animation -------------------------*/
.flip-card p{
	margin-top: 30%;
}


.flip-card {
  background-color: transparent;
  width: 100%;
  height: 33.333%;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.flip-card img{
	width: 100%;
	height: 100%;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card.active .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-back, .flip-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  color: black;
width: 100%;
  height: 100%;
}

/* Style the back side */
.flip-card-back {
  background-color: white;
  color: white;
  transform: rotateY(180deg);
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/*-----------------end of flipping animation -------------------------*/

/* ----------------------color the front of the blocks----------------*/
.front-one{background-color: #f11;}
.front-two{background-color: #ffab11;}
.front-three{background-color: #ff0;}
.front-four{background-color: #009100;}
.front-five{background-color: #11f;}
.front-six{background-color: #550093;}
.front-seven{background-color: #ec73ec;}
.front-eight{background-color: #f22;}
.front-nine{background-color: #ffab11;}
.front-ten{background-color: #ff1;}
.front-eleven{background-color: #00a200;}
.front-twelve{background-color: #22f;}
.front-thirteen{background-color: #5f00a4;}
.front-fourteen{background-color: #ee82ee;}
.front-fifteen{background-color: #f33;}
.front-sixteen{background-color: #ffb122;}
.front-seventeen{background-color: #ff2;}
.front-eighteen{background-color: #00b300;}
.front-nineteen{background-color: #33f;}
.front-twenty{background-color: #6800b5;}
.front-twentyone{background-color: #f091f0;}
.front-twentytwo{background-color: #f44;}
.front-twentythree{background-color: #ffb733;}
.front-twentyfour{background-color: #ff3;}

.flip-card-front:hover{
    opacity: 0.7;
}




.some-space{
    height: 60px;
}