@font-face {
  font-family: Transport;
  src: url(Typefaces/Transport-Medium.otf) format("opentype");
  font-style:normal;font-weight:400;
}
@font-face {
font-family:"Puffin";
src:url("https://use.typekit.net/af/ec56f1/00000000000000007735e71a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/ec56f1/00000000000000007735e71a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/ec56f1/00000000000000007735e71a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
@font-face {
font-family:"Puffin-Medium";
src:url("https://use.typekit.net/af/6ac2ee/00000000000000007735e713/31/l?subset_id=2&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/6ac2ee/00000000000000007735e713/31/d?subset_id=2&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/6ac2ee/00000000000000007735e713/31/a?subset_id=2&fvd=n5&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}
@font-face {
font-family:"Puffin-Heavy";
src:url("https://use.typekit.net/af/71046a/00000000000000007735e708/31/l?subset_id=2&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/71046a/00000000000000007735e708/31/d?subset_id=2&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/71046a/00000000000000007735e708/31/a?subset_id=2&fvd=n6&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}
@font-face {
font-family:"Elza-Medium";
src:url("https://use.typekit.net/af/771774/00000000000000007735f906/31/l?subset_id=2&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/771774/00000000000000007735f906/31/d?subset_id=2&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/771774/00000000000000007735f906/31/a?subset_id=2&fvd=n5&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}
@font-face {
font-family:"Elza";
src:url("https://use.typekit.net/af/c87b5e/00000000000000007735f910/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/c87b5e/00000000000000007735f910/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/c87b5e/00000000000000007735f910/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
@font-face {
font-family:"Hoss-Heavy";
src:url("https://use.typekit.net/af/fd9ce7/00000000000000007735ea09/31/l?subset_id=2&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/fd9ce7/00000000000000007735ea09/31/d?subset_id=2&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/fd9ce7/00000000000000007735ea09/31/a?subset_id=2&fvd=n6&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}
@font-face {
font-family:"IM-FELL";
src:url("https://use.typekit.net/af/87dc6e/000000000000000077359afd/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/87dc6e/000000000000000077359afd/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/87dc6e/000000000000000077359afd/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
@font-face {
font-family:"Kit";
src:url("https://use.typekit.net/af/30e613/00000000000000007750e695/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/30e613/00000000000000007750e695/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/30e613/00000000000000007750e695/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}
@font-face {
font-family:"Neue-Kabel";
src:url("https://use.typekit.net/af/515011/00000000000000007735bb1c/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/515011/00000000000000007735bb1c/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/515011/00000000000000007735bb1c/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}
@font-face {
font-family:"Neue-Haas-Grotesk";
src:url("https://use.typekit.net/af/912d1e/00000000000000007735bb33/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/912d1e/00000000000000007735bb33/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/912d1e/00000000000000007735bb33/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}


* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #FDFDF7;
  color: #09523c;
  overflow-x: hidden;
}


/*standard header*/

.headingtext {
  display: inline-block;
  position: relative;
}
.headingtext::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 0.1564vw;
  bottom: 0vw;
  left: 0vw;
  background-color: #09523c;
  transform-origin: bottom left;
  transition: transform 0.4s ease-out;
}
.headingtext:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.standard {
  position:fixed; 
  top: 1.48vw; 
  float:right; 
  color:#09523c; 
  font-family:Transport; 
  font-size: 1.2517vw;
  text-align: center;
}
header {
  padding: 1.1734vw 1.56458vw;
  text-align: left;
  position: fixed;
  width: 100%;
  z-index: 10;
  height: 4.69375vw;
}


/*atmosphere header*/

.headingtextatmosphere {
  display: inline-block;
  position: relative;
}
.headingtextatmosphere::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 0.1564vw;
  bottom: 0;
  left: 0;
  background-color: #218380;
  transform-origin: bottom left;
  transition: transform 0.4s ease-out;
}
.headingtextatmosphere:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.atmosphereheader {
  position:fixed; 
  top: 1.675vw; 
  float:right; 
  color:#218380; 
  font-family:Puffin-Medium; 
  font-size: 1.2517vw;
  text-align: center;
}


/*eyebot header*/

.headingtexteyebot {
  display: inline-block;
  position: relative;
}
.headingtexteyebot::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 0.1564vw;
  bottom: 0vw;
  left: 0vw;
  background-color: #102237;
  transform-origin: bottom left;
  transition: transform 0.4s ease-out;
}
.headingtexteyebot:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.eyebotheader {
  position:relative; 
  top:3.5985vw; 
  float:right; 
  color:#102237; 
  font-family:Elza-Medium; 
  font-size:1.32989vw;
  text-align: center;
}



/*frog header*/

.headingtextfrog {
  display: inline-block;
  position: relative;
}
.headingtextfrog::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 0.1564vw;
  bottom: 0vw;
  left: 0vw;
  background-color: #98C772;
  transform-origin: bottom left;
  transition: transform 0.4s ease-out;
}
.headingtextfrog:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.frogheader {
  position:relative; 
  top:3.5985vw; 
  float:right; 
  color:#98C772; 
  font-family:Hoss-Heavy; 
  font-size:1.29078vw;
  text-align: center;
}







headerghost {
  background: #030911;
  color: #F5F5F5;
  padding: 15px 20px;
  text-align: left;
  position: fixed;
  width: 100%;
  z-index: 10;
  height: 60px;
}
headerdegree {
  background: #ffffef;
  color: #001D1D;
  padding: 15px 20px;
  text-align: left;
  position: fixed;
  width: 100%;
  z-index: 10;
  height: 60px;
}
headerfibro {
  background: #F9F7F3;
  color: #313C25;
  padding: 15px 20px;
  text-align: left;
  position: fixed;
  width: 100%;
  z-index: 10;
  height: 60px;
}
headersectionghost {
    font-family: IM-FELL;
    font-size: 20px;
    text-align: center;
}
headersectionghost:hover {
  font-size: 21.9px;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
headersectiondegree {
    font-family: Kit;
    font-size: 16px;
    text-align: center;
}
headersectiondegree:hover {
  font-size: 17.5px;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
headersectionfibro {
    font-family: Neue-Kabel;
    font-size: 19px;
    text-align: center;
}
headersectionfibro:hover {
  font-size: 20.8px;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}


main {
  max-width: 100%;
  margin: 0 auto;
  padding: 3.1291vw 1.5645vw;
}
section {
  background: transparent;
  border-radius: 0.93875vw;
  padding: 1.8775vw;
  margin-bottom: 1.8775vw;
}
.background {
  z-index: 0;
  position: relative;
}
h1 {
  font-family: Transport;
  color: #09523c;
  width: 40vw;
  font-size: 3.75vw;
  text-align: right;
  font-weight: 400;
  line-height: 4.225vw;
}
section h2 {
  margin-top: 0;
  color: #04AA6D;
}
footer {
  padding: 1.1734375vw;
  text-align: center;
  width: 100%;
  height: 9.7786vw;
}
a:link {
    text-decoration: none;
}
.go-transparent {
  opacity: 1;
}
.go-transparent:hover {
  opacity: 0;
}
.colour-accessibility {
  color: #644478;
}
.colour-accessibility:hover {
  color: #A797C7;
}
.colour-design {
  color: #5D9346;
}
.colour-design:hover {
  color: #B1D460;
}
.projects {
  width: 30vw;
  padding:0vw 3.9vw 0vw 3.9vw;
  text-decoration:none;
  font-size:0;
  position: relative;
  top: 1vw;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;

}
.projects:hover {
  width: 31vw;
  top: -0.5vw;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.about {
  font-family: Verdana;
  font-size: 1.2517vw;
  color: #09523c;
  position: relative;
  padding: 0vw 5.8672vw 0vw 0vw;
  top:7.0406vw;
}
.contact {
  font-family: Verdana;
  font-size: 1.2517vw;
  color: #09523c;
  position: absolute;
  padding: 0vw 19.5573vw 0vw 0vw;
  top: 7.0406vw;
}

.atmospherebackground {
  background-color: #FFFDF5;
  position: absolute;
  top: 54.76042vw;
  width: 78.2292vw;
  height: 203.3958vw;
}

/*atmosphere guidelines*/

.guidelinecontainer {
  display: none;
  position: fixed;
  z-index: 20;
  padding: 0.78229vw 4.8502vw 0vw 4.8502vw;
  left: 0vw;
  top: 0vw;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #FFFDF5;
}
.GuidelineImage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 100%;
  top: 3.5203vw;
}
.close {
  color: #218380;
  position: absolute;
  top: 4.3026vw;
  right: 1.9557vw;
  font-size: 2.738vw;
  font-weight: 500;
  font-family: Puffin;
  opacity: 1;
}
.close:hover,
.close:focus {
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}
.pointer {
  cursor: pointer;
}



/* Atmosphere Leaflets */

.col1 {
  float: left;
  width: 18.3838vw;
  height: 16.4281vw;
}
.LeafletContainer1 {
  display: none;
  position: fixed;
  z-index: 20;
  padding: 0.78229vw 4.8502vw 0vw 4.8502vw;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #FFFDF5;
}
.LeafletContainer1-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 75%;
  top: 1.1734vw;
}
.LeafletPage1 {
  display: none;
}
.image-LeafletPage1 {
  width: 100%;
}
.LeafletPrevious1,
.LeafletNext1 {
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  padding: 1.2517vw;
  margin-top: -3.9114vw;
  color: #218380;
  font-weight: 500;
  font-size: 1.56458vw;
  transition: 0.6s ease;
  border-radius: 0vw 0.2346875vw 0.2346875vw 0vw;
  user-select: none;
  -webkit-user-select: none;
  font-family: Puffin;
  opacity: 1;
}
.LeafletNext1 {
  right: 0;
  border-radius: 0.2346875vw 0vw 0vw 0.2346875vw;
}
.LeafletPrevious1:hover,
.LeafletNext1:hover {
  background-color: #FFFDF5;
  opacity: 0.75;
  cursor: pointer;
}
.closeleaflet1 {
  color: #218380;
  position: absolute;
  top: 1.1734vw;
  right: 11.734375vw;
  font-size: 2.738vw;
  font-weight: 500;
  font-family: Puffin;
  opacity: 1;
}
.closeleaflet1:hover,
.closeleaflet1:focus {
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}
.leafletcover1{
  z-index: 5;
  position: relative;
  bottom: 13.2989vw;
  transition-duration: 0.3s;
  left: 1.486354vw;
  rotate: -2deg;
}
.leafletcover1:hover{
  z-index: 7;
  position: relative;
  bottom: 14.8635vw;
}
.col2 {
  float: left;
  width: 18.3838vw;
  height: 16.428125vw;
}
.LeafletContainer2 {
  display: none;
  position: fixed;
  z-index: 20;
  padding: 0.78229vw 4.8502vw 0vw 4.8502vw;
  left: 0vw;
  top: 0vw;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #FFFDF5;
}
.LeafletContainer2-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 75%;
  top: 1.1734vw;
}
.LeafletPage2 {
  display: none;
}
.image-LeafletPage2 {
  width: 100%;
}
.LeafletPrevious2,
.LeafletNext2 {
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  padding: 1.2517vw;
  margin-top: -3.9114vw;
  color: #8F2D56;
  font-weight: 500;
  font-size: 1.56458vw;
  transition: 0.6s ease;
  border-radius: 0vw 0.2346875vw 0.2346875vw 0vw;
  user-select: none;
  -webkit-user-select: none;
  font-family: Puffin;
  opacity: 1;
}
.LeafletNext2 {
  right: 0;
  border-radius: 0.2346875vw 0vw 0vw 0.2346875vw;
}
.LeafletPrevious2:hover,
.LeafletNext2:hover {
  background-color: #FFFDF5;
  opacity: 0.75;
  cursor: pointer;
}
.closeleaflet2 {
  color: #8F2D56;
  position: absolute;
  top: 1.1734vw;
  right: 11.734375vw;
  font-size: 2.738vw;
  font-weight: 500;
  font-family: Puffin;
  opacity: 1;
}
.closeleaflet2:hover,
.closeleaflet2:focus {
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}
.leafletcover2{
  z-index: 4;
  position: relative;
  bottom: 13.2989vw;;
  transition-duration: 0.3s;
  right: 2.738vw;
  rotate: 3deg;
}
.leafletcover2:hover{
  z-index: 7;
  position: relative;
  bottom: 14.8635vw;
}
.col3 {
  float: left;
  width: 18.3838vw;
  height: 16.428125;
}
.LeafletContainer3 {
  display: none;
  position: fixed;
  z-index: 20;
  padding: 0.78229vw 4.8502vw 0vw 4.8502vw;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #FFFDF5;
}
.LeafletContainer3-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 75%;
  top: 1.1734vw;
}
.LeafletPage3 {
  display: none;
}
.image-LeafletPage3 {
  width: 100%;
}
.LeafletPrevious3,
.LeafletNext3 {
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  padding: 1.2517vw;
  margin-top: -3.9114vw;
  color: #218380;
  font-weight: 500;
  font-size: 1.56458vw;
  transition: 0.6s ease;
  border-radius: 0vw 0.2346875vw 0.2346875vw 0vw;
  user-select: none;
  -webkit-user-select: none;
  font-family: Puffin;
  opacity: 1;
}
.LeafletNext3 {
  right: 0;
  border-radius: 0.2346875vw 0vw 0vw 0.2346875vw;
}
.LeafletPrevious3:hover,
.LeafletNext3:hover {
  background-color: #FFFDF5;
  opacity: 0.75;
  cursor: pointer;
}
.closeleaflet3 {
  color: #218380;
  position: absolute;
  top: 1.1734vw;
  right: 11.734375vw;
  font-size: 2.738vw;
  font-weight: 500;
  font-family: Puffin;
  opacity: 1;
}
.closeleaflet3:hover,
.closeleaflet3:focus {
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}
.leafletcover3{
  z-index: 3;
  position: relative;
  bottom: 10.5609vw;
  transition-duration: 0.3s;
  rotate: 8deg;
  right: 7.76239vw;
}
.leafletcover3:hover{
  z-index: 7;
  position: relative;
  bottom: 12.1255vw;
}




.colbooklet {
  width: 18.3838vw;
  height: 16.428125;
}
.BookletContainer {
  display: none;
  position: fixed;
  z-index: 20;
  padding: 0.78229vw 4.8502vw 0vw 4.8502vw;
  left: 0vw;
  top: 0vw;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #FFFDF5;
}
.BookletContainer-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  height: 48.1109vw;
  width: 76.5%;
  top: 1.1734vw;
}
.BookletPage {
  display: none;
}
.image-BookletPage {
  height: 48.1109vw;
}
.BookletPrevious,
.BookletNext {
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  padding: 1.2517vw;
  margin-top: -3.9114vw;
  color: #73D2DE;
  font-weight: 500;
  font-size: 1.56458vw;
  transition: 0.6s ease;
  border-radius: 0vw 0.2346875vw 0.2346875vw 0vw;
  user-select: none;
  -webkit-user-select: none;
  font-family: Puffin;
  opacity: 1;
}
.BookletNext {
  right: 0%;
  border-radius: 0.2346875vw 0vw 0vw 0.2346875vw;
}
.BookletPrevious:hover,
.BookletNext:hover {
  background-color: #FFFDF5;
  opacity: 0.75;
  cursor: pointer;
}
.closebooklet {
  color: #218380;
  position: absolute;
  top: 1.1734375vw;
  right: 11.734375vw;
  font-size: 2.738vw;
  font-weight: 500;
  font-family: Puffin;
  opacity: 1;
}
.closebooklet:hover,
.closebooklet:focus {
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}
.bookletcover{
  z-index: 5;
  position: absolute;
  bottom: 13.2989vw;
  transition-duration: 0.3s;
  right: 2.65979vw;
}
.bookletcover1:hover{
  z-index: 7;
  position: absolute;
  bottom: 14.86354vw;
}



/* RX Card */

.colRX {
  float: left;
  width: 15.64583vw;
  height: 16.428125vw;
}
.RXContainer {
  display: none;
  position: fixed;
  z-index: 20;
  padding: 0.78229vw 4.8502vw 0vw 4.8502vw;
  left: 0vw;
  top: 0vw;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #cddae5;
}
.RXContainer-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 75%;
  top: 1.1734vw;
}
.RXPage {
  display: none;
}
.image-RXPage {
  width: 100%;
}
.RXPrevious,
.RXNext {
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  padding: 1.2517vw;
  margin-top: -3.9114vw;
  color: #102237;
  font-weight: 500;
  font-size: 1.5646vw;
  transition: 0.6s ease;
  border-radius: 0vw 0.2346875vw 0.2346875vw 0vw;
  user-select: none;
  -webkit-user-select: none;
  font-family: Puffin;
  opacity: 1;
}
.RXNext {
  right: 0;
  border-radius: 0.2346875vw 0vw 0vw 0.2346875vw;
}
.RXPrevious:hover,
.RXNext:hover {
  background-color: #cddae5;
  opacity: 0.75;
  cursor: pointer;
}
.closeRX {
  color: #102237;
  position: absolute;
  top: 1.1734vw;
  right: 11.7344vw;
  font-size: 2.738vw;
  font-weight: 500;
  font-family: Puffin;
  opacity: 1;
}
.closeRX:hover,
.closeRX:focus {
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}
.RXcover{
  z-index: 5;
  position: relative;
  transition-duration: 0.3s;
  left: 1.4863vw;
}
.flip-card {
  background-color: transparent;
  height: 19.5573vw;
  perspective: 78.2292vw;
  position: relative;
  float:right;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  left:0vw;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
}



/* Eyebot Business Card */

.colEyeBusinessCard {
  float: left;
  width: 15.64583vw;
  height: 16.428125vw;
}
.EyeBusinessCardContainer {
  display: none;
  position: fixed;
  z-index: 20;
  padding: 0.78229vw 4.8502vw 0vw 4.8502vw;
  left: 0vw;
  top: 0vw;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #102237;
}
.EyeBusinessCardContainer-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 75%;
  top: 3.1292vw;
}
.EyeBusinessCardPage {
  display: none;
}
.image-EyeBusinessCardPage {
  width: 100%;
}
.EyeBusinessCardPrevious,
.EyeBusinessCardNext {
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  padding: 1.2517vw;
  margin-top: -3.9114vw;
  color: #102237;
  font-weight: 500;
  font-size: 1.5646vw;
  transition: 0.6s ease;
  border-radius: 0vw 0.2346875vw 0.2346875vw 0vw;
  user-select: none;
  -webkit-user-select: none;
  font-family: Puffin;
  opacity: 1;
}
.EyeBusinessCardNext {
  right: 0;
  border-radius: 0.2346875vw 0vw 0vw 0.2346875vw;
}
.EyeBusinessCardPrevious:hover,
.EyeBusinessCardNext:hover {
  background-color: #7b9ec6;
  opacity: 0.75;
  cursor: pointer;
}
.closeEyeBusinessCard {
  color: #FAFCFB;
  position: absolute;
  top: 3.1291vw;
  right: 11.734375vw;
  font-size: 2.738vw;
  font-weight: 500;
  font-family: Puffin;
  opacity: 1;
}
.closeEyeBusinessCard:hover,
.closeEyeBusinessCard:focus {
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}
.EyeBusinessCardcover{
  z-index: 5;
  position: relative;
  transition-duration: 0.3s;
  left: 1.4863vw;
}




/* Frog Books */

.OpenBookContainer {
  display: none;
  position: fixed;
  z-index: 20;
  padding: 0.7823vw 4.8502vw 0vw 4.8502vw;
  left: 0vw;
  top: 0vw;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #FBFDFD;
}
.OpenBookContainer-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 75%;
  top: 1.1734vw;
}
.OpenBookPage {
  display: none;
}
.image-OpenBookPage {
  width: 100%;
}
.OpenBookPrevious,
.OpenBookNext {
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  padding: 1.2517vw;
  margin-top: -3.9114vw;
  color: #98C772;
  font-weight: 500;
  font-size: 1.5646vw;
  transition: 0.6s ease;
  border-radius: 0vw 0.2346875vw 0.2346875vw 0vw;
  user-select: none;
  -webkit-user-select: none;
  font-family: Puffin;
  opacity: 1;
}
.OpenBookNext {
  right: 0;
  border-radius: 0.2346875vw 0vw 0vw 0.2346875vw;
}
.OpenBookPrevious:hover,
.OpenBookNext:hover {
  background-color: #FBFDFD;
  opacity: 0.75;
  cursor: pointer;
}
.closeOpenBook {
  color: #98C772;
  position: absolute;
  top: 1.1734vw;
  right: 11.7344vw;
  font-size: 2.738vw;
  font-weight: 500;
  font-family: Puffin;
  opacity: 1;
}
.closeOpenBook:hover,
.closeOpenBook:focus {
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}
.OpenBookcover1{
  rotate: 6deg;
  transition-duration: 0.3s;
}
.OpenBookcover1:hover{
  rotate: 0deg;
}
.OpenBookcover2{
  rotate: -4deg;
  transition-duration: 0.3s;
}
.OpenBookcover2:hover{
  rotate: 0deg;
}
.OpenBookcover3{
  rotate: -3deg;
  transition-duration: 0.3s;
}
.OpenBookcover3:hover{
  rotate: 0deg;
}
.OpenBookcover4{
  rotate: -7deg;
  transition-duration: 0.3s;
}
.OpenBookcover4:hover{
  rotate: 0deg;
}
.OpenBookcover5{
  rotate: 5deg;
  transition-duration: 0.3s;
}
.OpenBookcover5:hover{
  rotate: 0deg;
}
.OpenBookcover6{
  rotate: -6deg;
  transition-duration: 0.3s;
}
.OpenBookcover6:hover{
  rotate: 0deg;
}




/* Shapes */

.eyebotcirlce {
  height: 46.9375vw;
  width: 46.9375vw;
  background-color: #cddae5;
  border-radius: 100%;
  display: inline-block;
}
.frogrectangle {
  height: 2.738vw;
  width: 24.251vw;
  background-color: #FBFDFD;
  position: relative;
  bottom: 35.2031vw;
  left: 1.721vw;
  float: right;
  z-index: 2;
}



/*sewing guidelines*/

.Sewingcontainer {
  display: none;
  position: fixed;
  z-index: 20;
  padding: 0.7823vw 4.8502vw 0vw 4.8502vw;
  left: 0vw;
  top: 0vw;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #FBFDFD;
}
.SewingImage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  height: 95%;
  right: 1.5646vw;
  top: 0.78229vw;
}
.closeSewing {
  color: #98C772;
  position: absolute;
  top: 4.3026vw;
  right: 9.7786vw;
  font-size: 2.738vw;
  font-weight: 500;
  font-family: Puffin;
  opacity: 1;
}
.closeSewing:hover,
.closeSewing:focus {
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}




/*scroll atmosphere insta posts*/

.scrollableAreaContainer {
   width: 96vw;
   height: 40vw;
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
   right: 3vw;
   scrollbar-color: #218380 #FFFDF5;
   bottom: 6vw;
}

.scrollableItems {
  display: flex;
  justify-content: center;
}

.atmossocials{
  width: 27vw;
  position: relative;
}