/* SETTINGS */

html {
    height: 100%;
    min-height: 100%;
    --oceanblue: #33e6ff;
}

body {
    position: relative !important;
    margin: 0 !important;
}

main {
    position: relative !important;
    margin: 0 !important;
}



/* FONTS */

@font-face {
  font-family: "vollkorn";
  src: url('../fonts/vollkorn/Vollkorn-VariableFont_wght.ttf');
}

@font-face {
  font-family: "cursive";
  src: url('../fonts/greatvibes/GreatVibes-Regular.ttf');
}

@font-face {
  font-family: "indie-flower";
  src: url('../fonts/indieflower/IndieFlower-Regular.ttf');
}

@font-face {
  font-family: "bagel";
  src: url('../fonts/bagel/Bagel.ttf');
}

.indie-flower {
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
}

.cursive-title {
  font-family: "cursive", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.page-title {
  font-family: "bagel", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.vollkorn-section-title {
  font-family: "Vollkorn", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.lh-075 {
    line-height: 0.75;
}

/* TEXT UTILITIES & COLORS */

.text-earth {
    color: #7A5206;
}

.text-upright {
    writing-mode: vertical-rl;
    text-orientation: upright !important;
}

.text-face-left {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.text-face-right {
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

.text-primary-subtle {
    color: #9ec5fe;
}

/* EMOJIS */


.emoji-happy {

    background-image: url("../media/images/library/feedback/emojis/happy.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;

}
.modal-absolute-top-md {

    position: absolute !important;
    top: 10vh;
    left: 25%;
    right: 25%;

}
.modal-fixed-top-md {

    position: fixed !important;
    top: 10vh;
    left: 25%;
    right: 25%;

}

/* FOOTER */

footer {
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    position: sticky !important;
    width: 100%;
}

#footer-toggler {
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    position: sticky !important;
    width: 100%;

}
/* LINKS */

a:link, a:visited, a:active {
  text-decoration: none !important;
}

.highlightfxn:hover {
    font-weight: semi-bold !important;
    font-stretch: extra-expanded !important;
    font-variant-caps: all-petite-caps !important;
    font-size: 25px;
}

/* SCROLLERS */

.scroll-y {
    overflow-x: hidden;
    overflow-y: scroll;
}

.overflow-hidden {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* OPACITY & VISIBILITY */

.opacity-50 {
    opacity: 0.5;
}

.hide {
    display: none !important;
}
.z-modal {
    z-index: 100 !important;
}
.z-20 {
    z-index: 20 !important;
}

.z-10 {
    z-index: 10 !important;
}

.z-1 {
    z-index: 1 !important;
}

.z-behind {
    z-index: 0 !important;
}

.z-2 {
    z-index: 2 !important;
}

.z-5 {
    z-index: 5 !important;
}

/* BACKGROUNDS: ALERTS */

.bg-alert-warning {
    background-color: #fff3cd;
}
.bg-alert-success {
    background-color: #eafced;
}
.bg-alert-info {
    background-color: #c4fbfb;
}
.bg-alert-error {
    background-color: #fceae6;
}


/* BACKGROUNDS: ADJUSTED OPACITY */

.bg-dark-50 {
    background-color: rgba(39, 37, 37, 0.5) !important;
}

.bg-secondary-50 {
    background-color:rgba(255,255,255,0.5);
}

.bg-deep-sky-20 {
    background-color:rgba(0, 191, 255,0.2);
}

.bg-plum-10 {
    background-color:rgba(221, 160, 221, 0.1);
}


.bg-plum-50 {
    background-color:rgba(221, 160, 221, 0.5);
}

.bg-fixed-sky-20 {
    background-color:rgba(0, 191, 255,0.2);
    position: fixed;
}

.bg-fixed-sunrise-50 {
    background-color:rgba(250, 226, 22, 0.5);
    position: absolute;
}

/* BACKGROUNDS: REGULAR COLORS */

.bg-plum {
    background-color: plum;
}

.bg-blue-violet {
    background-color: blueviolet;
}

.bg-indigo {
    background-color: indigo;
}

.bg-bright-lavender {
    background-color: #a806ff;
}

.bg-light-yellow {
    background-color: LightYellow;
}

.bg-moccasin {
    background-color: Moccasin;
}

.bg-papaya {
    background-color: PapayaWhip;
}

.bg-light-ruby {
    background-color: #f9a5b0;
}

.bg-light-lavender {
    background-color: #e4c7f4;
}

.bg-steel-blue {
    background-color: LightSteelBlue;
}

.bg-pale-green {
    background-color: PaleGreen;
}

.bg-pastel-green {
    background-color: #d1fcbe;
}

.bg-pastel-blue {
    background-color: #c9e1fa;
}

.bg-sea-green {
    background-color: #cbdf9f;
}

.bg-dark-sea-green {
    background-color: DarkSeaGreen;
}

.bg-light-aquamarine {
    background-color: #c8f7e4;
}

.bg-light-aqua {
    background-color: #a8fcfd;
}

/* CUSTOM SCROLLBARS */
.scroll-leaf::-webkit-scrollbar {
    width: 25px;
}
.scroll-leaf::-webkit-scrollbar-thumb {
    background: #297A06;
}
.scroll-leaf::-webkit-scrollbar-track {
    background: #B9E8A5;
}
/* BACKGROUNDS: IMAGES */

.bg-waterton {

  background-image: url("../media/images/library/gallery/waterton/5.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

}

.bg-mono {

  background-image: url("../media/images/backgrounds/bw.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

}

.bg-wooden {

  background-image: url("../media/images/backgrounds/wooden.jpg");
  background-repeat: no-repeat;
  background-size: cover;

}

.bg-game-blue {

  background-image: url("../media/images/backgrounds/gameblue.png");
  background-repeat: no-repeat;
  background-size: cover;

}

.bg-pearl {

  background-image: url("../media/images/backgrounds/pearl.png");
  background-repeat: repeat-x;
  background-size: contain;

}


/* BACKGROUNDS: ANIMATED */

.bg-mountains-animate-blur {

  background-image: url("../media/images/backgrounds/mountainsspring.png");
  background-repeat: no-repeat;
  background-size: cover contain;
  background-position: center;
  animation: mountains-voila 1s infinite alternate;

}

.bg-ripples-welcome {

  background-image: url("../media/images/global/ripples.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 120px;

}

/* BACKGROUNDS: GRADIENTS */

.bg-badge-silver {
    background: rgb(153,153,156);
    background: linear-gradient(90deg, rgba(153,153,156,1) 0%, rgba(255,255,255,1) 35%, rgba(207,235,245,1) 76%, rgba(196,206,209,1) 96%);
}

.bg-cucumber-water {
    background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%);
}

.bg-pinkish-soil {
    background: rgb(175,43,3);
    background: linear-gradient(0deg, rgba(175,43,3,1) 0%, rgba(241,143,164,1) 33%, rgba(122,60,5,1) 100%);
}

.bg-gradient-neon-green {
    background: rgb(21,175,3);
    background: linear-gradient(0deg, rgba(21,175,3,1) 0%, rgba(175,240,6,1) 33%, rgba(5,122,50,1) 100%);
}

.bg-gradient-ocean {
    background: rgb(29,3,175);
    background: linear-gradient(0deg, rgba(29,3,175,1) 0%, rgba(6,172,240,1) 33%, rgba(5,74,122,1) 100%);
}

.bg-gradient-deep-blue {
    background: rgb(2,0,36);
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

.bg-gradient-sunrise {
    background: rgb(241,147,4);
    background: linear-gradient(0deg, rgba(241,147,4,1) 0%, rgba(240,198,6,0.5998774509803921) 33%, rgba(244,220,1,1) 100%);
}

.bg-gradient-candy {
    background: #26b3eb;
    background: linear-gradient(0deg,rgba(38, 179, 235, 1) 3%, rgba(123, 205, 237, 1) 13%, rgba(87, 199, 133, 1) 30%, rgba(237, 221, 83, 1) 51%, rgba(235, 190, 221, 1) 71%, rgba(203, 155, 242, 1) 84%, rgba(245, 130, 164, 1) 96%);
    animation: gradient-background-candy 3s ease infinite;
    animation-timing-function: linear;
}

/* BORDERS: GRADIENTS */

.border-ocean {
    border-image: linear-gradient(45deg, rgba(29,3,175,1) 0%, rgba(6,172,240,1) 33%, rgba(5,74,122,1) 100%);
    border-image-slice: 1;
}

.border-lg {
    border-width: 15px !important;
}
.border-curve-50rem {
    border-radius: 50rem !important;
}



/* LIST STYLES */

.square-list {
    list-style-type: square !important;
}

/* BADGE STYLES */

.badge-architect-corner {
    background-image: url("../media/images/library/badges/badge-softhauz.png");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: contain;
    width: 35px;
    height: 35px;
    position: sticky !important;
}

/* ANIMATIONS */


/* SOFTHAUZ ROBOT STYLES */

.bot {

    position: fixed;
    width: 35px;
    height: 35px;
    bottom: 0;
    right: 0;
    background-image: url("../media/images/global/avatar.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 2;

}


.bot-online {

    border: 5px solid #75f90a;

}

.bot-avatar {

    width: 35px;
    height: 35px;
    background-image: url("../media/images/global/avatar.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}

.bot-default {

    width: 35px;
    height: 35px;
    background-image: url("../media/images/avatars/default.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}


/* ICONS */



.icon-calculus-small {
    width: 35px !important;
    height: 35px !important;
    background-image: url("../media/images/global/calculus.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}

.icon-geek-large {
    width: 100px !important;
    height: 100px !important;
    background-image: url("../media/images/library/feedback/emojis/geek.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}


.icon-happy-small {
    width: 35px !important;
    height: 35px !important;
    background-image: url("../media/images/library/feedback/emojis/happy.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}
.icon-sad-small {
    width: 35px !important;
    height: 35px !important;
    background-image: url("../media/images/library/feedback/emojis/sad.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}

.icon-sad-large {
    width: 100px !important;
    height: 100px !important;
    background-image: url("../media/images/library/feedback/emojis/sad.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}

.icon-calculus-large {
    width: 100px !important;
    height: 100px !important;
    background-image: url("../media/images/global/calculus.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}

.icon-haven-small {
    width: 35px !important;
    height: 35px !important;
    background-image: url("../media/images/global/haven.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}

.icon-haven-large {
    width: 100px !important;
    height: 100px !important;
    background-image: url("../media/images/global/haven.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}

.icon-community-small {
    width: 35px !important;
    height: 35px !important;
    background-image: url("../media/images/global/shop.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}

.icon-community-large {
    width: 100px !important;
    height: 100px !important;
    background-image: url("../media/images/global/shop.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}

.icon-library-small {
    width: 35px !important;
    height: 35px !important;
    background-image: url("../media/images/global/artsandcrafts.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}

.icon-library-large {
    width: 100px !important;
    height: 100px !important;
    background-image: url("../media/images/global/artsandcrafts.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-size: contain;
}

/* PROGRESS BAR */
/* POPOVER STYLES */

.popover-header {
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%) !important;
    border-color: transparent !important;
    color: white;
    opacity: 0.8;
}

.popover-body {
    background-color: rgba(225,249,251,0.3) !important;
    opacity: 0.7;
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,
.bs-popover-bottom>.popover-arrow::after {
    border-bottom-color: black/ /* rgba(10, 182, 246, 0.25) !important; */
}

/* CIRCULAR PROGRESS BAR */


.skill {
  width: 200px;
  height: 200px;
  position: relative;
}

.outer {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* border: 1px solid cornflowerblue; */
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
    -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
  padding: 15px;
}

.inner {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  /* border: 1px solid cornflowerblue; */
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
    inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
    -0.5px -0.5px 0 rgba(255, 255, 255, 1), 0.5px 0.5px 0 rgba(0, 0, 0, 0.15),
    0px 12px 10px -10 rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.number {
  font-weight: 600;
  color: #555;
}

circle .circle-progress {
  fill: none;
  stroke: url(#GradientAlgebra);
  stroke-width: 20px;
  stroke-dasharray: 472; /* animation fill */
  stroke-dashoffset: 472; /* animation fill */
}

circle.algebra {
  animation: algebra 2s ease forwards;
}
circle.geometry {
  stroke: url(#GradientGeometry);
  animation: geometry 2s ease forwards;
}
circle.trigonometry {
  stroke: url(#GradientTrigonometry);
  animation: trigonometry 2s ease forwards;
}

svg {
  position: absolute;
  top: 10px;
  left: 10px;
}


/* SUPPORT PAGES */


.support-article {
    width: 75vw;
    height: 75vh;
    overflow-x: transparent;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    align-content: center;
    align-self: center;
}

/* FORM SWITCH */

.form-switch-lg .form-check-input {
    padding: 15px !important;
    width: 4em !important;
}

/* PROFILE PAGES */

.mood {
  animation: backgloweffect 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);

}

/* NAVIGATION */

#navigation-main {
    position: fixed !important;
    width: 100% !important;
}

/* SPACES */

.spacer {
    margin: 0 !important;
}

/* HOVER STYLES */

.parent-hover-warning:hover > li {
    background-color: yellow;
}

.hover-spin:hover {
    animation: spin 3s ease infinite;
    animation-timing-function: linear;
}

.hover-highlight-bright-yellow:hover {
    background-color: #E7F527;
    padding: 10px;
    border-radius: 5px;
}

/* IMAGE EFFECTS */

.zoom-small {
    animation: scale-150 5s ease infinite;
    animation-timing-function: linear;

}

.zoom-150:hover {
    transform: scale(1.5,1.5);

}


/* CHEMISTRY */

.chemical {
    width: 95px;
    height: 125px;
}

.fixed {
    position: fixed !important;
}

.relative {
    position: relative !important;
}


.element-search-container {
    margin-left: 280px;
    margin-top: 100px;
    height: 250px;
}

/* ANIMATIONS */


@keyframes mountains-voila {
  0% {
      filter: blur(0);
      -webkit-filter: blur(0);
  }
  100% {
      filter: blur(10px);
      -webkit-filter: blur(10px);
  }
}


@keyframes gradient-background-candy {
    0% {
        background: #26b3eb;
        background: linear-gradient(0deg,rgba(38, 179, 235, 1) 3%, rgba(123, 205, 237, 1) 13%, rgba(87, 199, 133, 1) 30%, rgba(237, 221, 83, 1) 51%, rgba(235, 190, 221, 1) 71%, rgba(203, 155, 242, 1) 84%, rgba(245, 130, 164, 1) 96%);
	}
	15% {
        background: #26b3eb;
        background: linear-gradient(30deg,rgba(38, 179, 235, 1) 3%, rgba(123, 205, 237, 1) 13%, rgba(87, 199, 133, 1) 30%, rgba(237, 221, 83, 1) 51%, rgba(235, 190, 221, 1) 71%, rgba(203, 155, 242, 1) 84%, rgba(245, 130, 164, 1) 96%);
    }
	25% {
        background: #26b3eb;
        background: linear-gradient(45deg,rgba(38, 179, 235, 1) 3%, rgba(123, 205, 237, 1) 13%, rgba(87, 199, 133, 1) 30%, rgba(237, 221, 83, 1) 51%, rgba(235, 190, 221, 1) 71%, rgba(203, 155, 242, 1) 84%, rgba(245, 130, 164, 1) 96%);
    }
	40% {
        background: #26b3eb;
        background: linear-gradient(90deg,rgba(38, 179, 235, 1) 3%, rgba(123, 205, 237, 1) 13%, rgba(87, 199, 133, 1) 30%, rgba(237, 221, 83, 1) 51%, rgba(235, 190, 221, 1) 71%, rgba(203, 155, 242, 1) 84%, rgba(245, 130, 164, 1) 96%);
    }
	50% {
        background: #26b3eb;
        background: linear-gradient(135deg,rgba(38, 179, 235, 1) 3%, rgba(123, 205, 237, 1) 13%, rgba(87, 199, 133, 1) 30%, rgba(237, 221, 83, 1) 51%, rgba(235, 190, 221, 1) 71%, rgba(203, 155, 242, 1) 84%, rgba(245, 130, 164, 1) 96%);
    }
	60% {
        background: #26b3eb;
        background: linear-gradient(180deg,rgba(38, 179, 235, 1) 3%, rgba(123, 205, 237, 1) 13%, rgba(87, 199, 133, 1) 30%, rgba(237, 221, 83, 1) 51%, rgba(235, 190, 221, 1) 71%, rgba(203, 155, 242, 1) 84%, rgba(245, 130, 164, 1) 96%);
    }
	75% {
        background: #26b3eb;
        background: linear-gradient(270deg,rgba(38, 179, 235, 1) 3%, rgba(123, 205, 237, 1) 13%, rgba(87, 199, 133, 1) 30%, rgba(237, 221, 83, 1) 51%, rgba(235, 190, 221, 1) 71%, rgba(203, 155, 242, 1) 84%, rgba(245, 130, 164, 1) 96%);
    }
	90% {
        background: #26b3eb;
        background: linear-gradient(315deg,rgba(38, 179, 235, 1) 3%, rgba(123, 205, 237, 1) 13%, rgba(87, 199, 133, 1) 30%, rgba(237, 221, 83, 1) 51%, rgba(235, 190, 221, 1) 71%, rgba(203, 155, 242, 1) 84%, rgba(245, 130, 164, 1) 96%);
    }
	100% {
        background: #26b3eb;
        background: linear-gradient(360deg,rgba(38, 179, 235, 1) 3%, rgba(123, 205, 237, 1) 13%, rgba(87, 199, 133, 1) 30%, rgba(237, 221, 83, 1) 51%, rgba(235, 190, 221, 1) 71%, rgba(203, 155, 242, 1) 84%, rgba(245, 130, 164, 1) 96%);
    }
}


@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


@keyframes algebra {
  100% {
    stroke-dashoffset: 45;
  }
}

@keyframes geometry {
  100% {
    stroke-dashoffset: 118; /* animation fill 165.2 = 472 - (65% of 472) */
  }
}

@keyframes trigonometry {
  100% {
    stroke-dashoffset: 35;
  }
}


@keyframes backgloweffect { /* profile photograph border effect */
  0% {
    box-shadow:
    0 0 15px rgba(255, 255, 255, 0.8),
    0 0 25px rgba(255, 255, 255, 0.8),
    0 0 35px rgba(255, 255, 255, 0.8),
    0 0 45px rgba(242, 208, 13, 0.8),
    0 0 55px rgba(242, 238, 13, 0.8),
    0 0 70px rgba(242, 191, 13, 0.5),
    0 0 80px rgba(66, 220, 219, 0.5),
    0 0 90px rgba(66, 220, 219, 0.5);
  }
  100% {
    box-shadow:
    0 0 2px rgba(255, 255, 255, 0.8),
    0 0 8px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(66, 220, 219, 0.8),
    0 0 30px rgba(66, 220, 219, 0.8),
    0 0 40px rgba(175, 13, 242, 0.8),
    0 0 50px rgba(175, 13, 242, 0.5),
    0 0 80px rgba(175, 13, 242, 0.5);
  }
}


@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes scale-150 {
  from {
    transform: scale(0,0);
  }
  to {
    transform: scale(1.5,1.5);
  }
}

/* FLIP CARD ANIMATION */

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 400px;
  perspective: 1200px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.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-front {
  background-color: transparent;
  color: black;
}

.flip-card-back {
  transform: rotateY(180deg);
  color: #CC0A37;
  padding: 25px;
}