/* ————— GLOBAL ————— */

/*Text Styles*/

h1{
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:2.85vw;
  letter-spacing: -.12vw;
  text-align:left;
  line-height: 28px;
}

p {
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:2.4vw;
  text-align:left;
  max-width: 34ch;

}

footer{
  font-size:0.8vw;
  font-family:"aktiv-grotesk", sans-serif;
  font-weight: 600;
  letter-spacing:.1vw;
  text-align:left;
  opacity:.4;
  transition:opacity .3s;
  position: absolute;
  padding-top: 200px;
}

a{
  color:unset;
  text-decoration:underline;
  border:none;
  outline:none;
  box-shadow:none;
  transition: opacity 0.3s ease;
}

a:visited{
  color:unset;
  stroke:unset;
}

a:hover{
  opacity: 80%;
}

/*Global Page Styles*/

body{
  display:flex;
  justify-content: center;
}

.main{
  transition:padding .2s;
  box-sizing: border-box;
  padding:12%;
  text-align: center;
}

.pageright{
  display:flex;
  width:75vw;
  max-width:1080px;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items:flex-end;
  padding-top:2vw;
}

.logo{
  max-width:15vw;
  max-height:15vw;
  display: flex;
  flex-direction: column;
}


#toplogo{
  border-top-right-radius: 100px;
  width:100%;
  background-color: rgb(51, 114, 238);
}

#middlelogo{
  border-bottom-right-radius: 100px;
  width:50%;
  margin-left:50%;
  background-color: rgb(65, 194, 78);
}

#middle2logo{
  border-top-left-radius: 100px;
  width:50%;
  background-color: rgb(241, 188, 1);
}

#bottomlogo{
  border-bottom-left-radius: 100px;
  width:100%;
  background-color: rgb(225, 69, 66);
}

#toplogo.default-color {
    background-color: rgb(51, 114, 238);
}
#middlelogo.default-color {
    background-color: rgb(65, 194, 78);
}
#middle2logo.default-color {
    background-color: rgb(241, 188, 1);
}
#bottomlogo.default-color {
    background-color: rgb(225, 69, 66);
}

#toplogo,
#middlelogo,
#middle2logo,
#bottomlogo {
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    height:100px;
    cursor: pointer;
}

#toplogo:hover,
#middlelogo:hover,
#middle2logo:hover,
#bottomlogo:hover {
    opacity: 0.7; 
}

/* Setting the logo colors to WHITE in a COLORED state */
#landing.colored-state #toplogo,
#landing.colored-state #middlelogo,
#landing.colored-state #middle2logo,
#landing.colored-state #bottomlogo {
    background-color: #FFFFFF;
}

/* ————— LANDING PAGE ————— */


/*Landing page themes*/


/*Landing Page Styles*/

#landing{
  font-size:16px;
  box-sizing: border-box;
  height:100%;
  width:100%;
  color:#FFF;
  background-color:rgb(0, 0, 0);
}



#landing{
  transition: background-color 0.3s ease;
}


@media only screen and (min-width: 1440px) {

h1{
  font-size:41.04px;
  letter-spacing: -1.728px;
}

p {
  font-size:34.56px;
}

footer {
  font-size: 11.52px;
  letter-spacing: 1.44px;

}

.logo{
  max-width:216px;
  max-height:216px;
}

.pageright{
  padding-top:28.8px;
}


}


@media only screen and (max-width: 900px) {

h1{
  font-size:39px;
  letter-spacing: -1.7px;

}

p {
  font-size:30px;
  width: 18ch;
  padding-top: 100px;
  line-height: 32px;
}

footer{
  font-size: 10px;
  letter-spacing: 1px;
}

.logo{
  max-width:216px;
  max-height:216px;
  padding-top:100px;
}

.pageright{
  display:flex;
  width:250px;
  padding-top: 40px;
  flex-direction:column;
  flex-wrap: wrap;
  justify-content:space-between;
  align-items:flex-start;
}

.main{
  padding:0px;
}


}