/*!==============================
* web design by post-gallery.online
* Kelli Gedvil and Kristen Rästas
* 2021
*/

body {
background-color: rgb(0, 0, 0);
overflow:hidden;
}

.circle {
	position: absolute;
	width: 250px; 
	height: 250px; 
  border-radius: 50%;
  background-image: radial-gradient(rgb(255, 255, 255) 1%, rgba(0, 0, 0, 0) 60%);
}

.preloader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background-image: url(../img/loading.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8%;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100%;
  height: 98vh;
  position: relative;
  cursor: none;
}

.flex-container > #intro, #one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve, #thirteen, #fourteen, #fifteen, #sixteen, #seventeen, #eighteen, #nineteen, #twenty, #twentyone, #twentytwo, #twentythree, #twentyfour, #twentyfive, #twentysix, #twentyseven, #twentyeight, #twentynine, #thirty, #thirtyone, #thirtytwo, #thirtythree, #thirtyfour, #thirtyfive, #thirtysix, #thirtyseven, #thirtyeight, #thirtynine, #forty, #fortyone, #fortytwo, #fortythree, #fortyfour, #fortyfive, #fortysix, #fortyseven, #fortyeight, #fortynine, #fifty, #fiftyone, #fiftytwo, #fiftythree, #fiftyfour, #fiftyfive, #fiftysix, #fiftyseven, #fiftyeight, #fiftynine, #sixty{
  background-color:rgba(0, 0, 0, 0);
}

/*

.flex-container > #intro{
  background-color:rgba(107, 255, 22, 0.384);
}

.flex-container > #one{
  background-color:rgba(37, 151, 117, 0.384);
}

.flex-container > #two {
  background-color:rgba(119, 29, 29, 0.425);
}

.flex-container > #three {
  background-color:rgba(30, 121, 30, 0.486);
}

.flex-container > #four {
  background-color:rgba(124, 25, 124, 0.37);
}

.flex-container > #five {
  background-color:rgba(29, 38, 119, 0.425);
}

.flex-container > #six {
  background-color:rgba(115, 121, 30, 0.486);
}

.flex-container > #seven {
  background-color:rgba(124, 84, 25, 0.37);
}

.flex-container > #eight {
  background-color:rgba(25, 101, 124, 0.37);
}

.flex-container > #nine {
  background-color:rgba(56, 124, 25, 0.37);
}

.flex-container > #ten {
  background-color:rgba(25, 124, 107, 0.37);
}

.flex-container > #eleven {
  background-color:rgba(25, 43, 124, 0.37);
}

.flex-container > #twelve {
  background-color:rgba(124, 89, 25, 0.37);
}

.flex-container > #thirteen {
  background-color:rgba(121, 92, 30, 0.486);
}

.flex-container > #fourteen {
  background-color:rgba(32, 25, 124, 0.37);
}

.flex-container > #fifteen {
  background-color:rgba(29, 38, 119, 0.425);
}

.flex-container > #sixteen {
  background-color:rgba(121, 30, 94, 0.486);
}

.flex-container > #seventeen {
  background-color:rgba(124, 25, 25, 0.37);
}

.flex-container > #eighteen {
  background-color:rgba(25, 124, 91, 0.37);
}

.flex-container > #nineteen {
  background-color:rgba(25, 124, 74, 0.37);
}

.flex-container > #twenty {
  background-color:rgba(89, 124, 25, 0.37);
}

.flex-container > #twentyone {
  background-color:rgba(93, 25, 124, 0.37);
}

.flex-container > #twentytwo {
  background-color:rgba(124, 122, 25, 0.37);
}

.flex-container > #twentythree {
  background-color:rgba(121, 30, 73, 0.486);
}

.flex-container > #twentyfour {
  background-color:rgba(25, 109, 124, 0.37);
}

.flex-container > #twentyfive {
  background-color:rgba(118, 119, 29, 0.425);
}

.flex-container > #twentysix {
  background-color:rgba(30, 121, 121, 0.486);
}

.flex-container > #twentyseven {
  background-color:rgba(96, 25, 124, 0.37);
}

.flex-container > #twentyeight {
  background-color:rgba(55, 25, 124, 0.37);
}

.flex-container > #twentynine {
  background-color:rgba(65, 124, 25, 0.37);
}

.flex-container > #thirty {
  background-color:rgba(124, 25, 74, 0.37);
}

.flex-container > #thirtyone {
  background-color:rgba(25, 124, 58, 0.37);
}

.flex-container > #thirtytwo {
  background-color:rgba(122, 124, 25, 0.37);
}

.flex-container > #thirtythree {
  background-color:rgba(30, 110, 121, 0.486);
}

.flex-container > #thirtyfour {
  background-color:rgba(124, 25, 79, 0.37);
}

.flex-container > #thirtyfive {
  background-color:rgba(119, 88, 29, 0.425);
}

.flex-container > #thirtysix {
  background-color:rgba(30, 121, 86, 0.486);
}

.flex-container > #thirtyseven {
  background-color:rgba(124, 25, 58, 0.37);
}

.flex-container > #thirtyeight {
  background-color:rgba(124, 25, 86, 0.37);
}

.flex-container > #thirtynine {
  background-color:rgba(124, 114, 25, 0.37);
}

.flex-container > #forty {
  background-color:rgba(25, 124, 94, 0.37);
}

.flex-container > #fortyone {
  background-color:rgba(25, 35, 124, 0.37);
}

.flex-container > #fortytwo {
  background-color:rgba(124, 109, 25, 0.37);
}

.flex-container > #fortythree {
  background-color:rgba(25, 96, 124, 0.37);
}

.flex-container > #fortyfour {
  background-color:rgba(25, 104, 124, 0.37);
}

.flex-container > #fortyfive {
  background-color:rgba(103, 119, 29, 0.425);
}

.flex-container > #fortysix {
  background-color:rgba(30, 121, 53, 0.486);
}

.flex-container > #fortyseven {
  background-color:rgba(32, 25, 124, 0.37);
}

.flex-container > #fortyeight {
  background-color:rgba(124, 25, 30, 0.37);
}

.flex-container > #fortynine {
  background-color:rgba(124, 89, 25, 0.37);
}

.flex-container > #fifty {
  background-color:rgba(25, 93, 124, 0.37);
}

.flex-container > #fiftyone {
  background-color:rgba(79, 25, 124, 0.37);
}

.flex-container > #fiftytwo {
  background-color:rgba(124, 73, 25, 0.37);
}

.flex-container > #fiftythree {
  background-color:rgba(73, 124, 25, 0.37);
}

.flex-container > #fiftyfour {
  background-color:rgba(25, 48, 124, 0.37);
}

.flex-container > #fiftyfive {
  background-color:rgba(88, 30, 121, 0.486);
}

.flex-container > #fiftysix {
  background-color:rgba(30, 121, 45, 0.486);
}

.flex-container > #fiftyseven {
  background-color:rgba(124, 25, 107, 0.37);
}

.flex-container > #fiftyeight {
  background-color:rgba(44, 56, 97, 0.37);
}

.flex-container > #fiftynine {
  background-color:rgba(38, 121, 30, 0.486);
}

.flex-container > #sixty {
  background-color:rgba(44, 30, 121, 0.486);
}

*/

.hide{
  display:none;
}

@media screen and (max-width:1024px) {
  .circle {
    position: absolute;
    width: 150px; 
    height: 150px; 
    margin: 45px;
    border-radius: 50%;
    background-image: radial-gradient(rgb(255, 255, 255) 1%, rgba(0, 0, 0, 0) 60%);
  }
}