@charset "UTF-8";
/* CSS Document */

/* Fonts */

@font-face { 
font-family: Raleway; 
src: url('../fonts/Raleway-Regular.ttf');
font-weight: 400;
} 
@font-face { 
font-family: Raleway; 
src: url('../fonts/Raleway-Italic.ttf');
font-weight: 400;
font-style: italic;
} 
@font-face { 
font-family: Raleway; 
src: url('../fonts/Raleway-ExtraBold.ttf');
font-weight: 800;
} 
@font-face { 
font-family: Raleway; 
src: url('../fonts/Raleway-ExtraBoldItalic.ttf');
font-weight: 800;
font-style: italic;
} 

/* Body */

body {
font-family: Raleway;
margin: 0;
padding: 0;
background: rgb(221,221,220);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
strong {
font-weight: 800;
}
em {
font-style: italic;
}
strong em, em strong {
font-style: italic;
font-weight: 800;
}

/* Links */

a {
text-decoration: none;
padding: 0;
margin: 0;
color: rgb(34,34,35);
font-weight: 800;
}

/* Headings */

h1 {
font-weight: 800;
font-size: 7.5vw;
margin: 0;
}
h1 sup {
font-size: 1.25vw;
vertical-align: text-top;
}
h2 {
font-weight: 800;
font-size: 5vw;
margin: 0;
}
h3, h4, h5, h6, h7 {
font-weight: 800;
font-size: 2.5vw;
margin: 2.5vw 0 1.25vw 0;
}
h4 span, h5 span, h6 span, h7 span {
padding-left: 5vw;
display: block;
}


/* Header */

.header {
padding: 5vw;
background: rgb(34, 34, 35);
color: rgb(221, 221, 220);
}
.logo {
float: right;
width: 8.5vw;
-webkit-transition: all 100ms ease;
transition: all 100ms ease;
transform: translate3d(0px, 0px, 0px);
opacity: 0.25;
}
.logo:hover {
-webkit-transform: scale(1.2) rotate(-16deg);
transform: scale(1.2) rotate(180deg);
opacity: 1;
}
.landing-bg {
background: rgba(34, 34, 35, 0.75);
}
.inner-landing {
padding: 5vw;
}
.hero-tagline-landing {
padding: 5vw 7.5vw;
}
.tagline-landing {
padding: 2.5vw 7.5vw;
}
.hero-tagline-landing, .tagline-landing {
background: rgb(34, 34, 35);
color: rgb(221, 221, 220);
text-align: center;
}
.hero-tagline-landing h3, .tagline-landing h3, .hero-start h3, .hero-faq h3 {
font-weight: 400;
font-size: 2.5vw;
margin: 2.5vw 0 1.25vw 0;
line-height: 2;
}
.hero-tagline-landing p, .tagline-landing p {
font-size: 1.25vw;
line-height: 2;
font-weight: 400;
margin: 0 0 2.5vw 0;
}
.hero {
background: rgb(34, 34, 35);
}
.hero img {
width: 100vw;
height: auto;
}
.header a, .hero-tagline-landing a, .tagline-landing a {
color: rgb(221, 221, 220);
}
i.fa.fa-bullseye, i.fa.fa-certificate, i.fa.fa-lightbulb-o, i.fa.fa-cogs {
font-size: 10vw;
padding-bottom: 2.5vw;
}
.arrow-down {
width: 0;
height: 0;
margin: 0 auto;
border-left: 10vw solid transparent;
border-right: 10vw solid transparent;
border-top: 10vw solid rgb(34, 34, 35);
margin-top: -1px;
}
.arrow-up {
width: 0;
height: 0;
margin: 0 auto;
border-left: 10vw solid transparent;
border-right: 10vw solid transparent;
border-bottom: 10vw solid rgb(34, 34, 35);
margin-bottom: -1px;
}
.arrow-down-spek {
width: 0;
height: 0;
margin: 0 auto;
border-left: 10vw solid transparent;
border-right: 10vw solid transparent;
border-top: 10vw solid rgba(34, 34, 35, 0.25);
}

/* Chart */

#wrap {
position: relative;
width: 47.5%;
float: left;
}
#wrap:before{
content: "";
display: block;
padding-top: 100%;
}
#chart_div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#chart_inner{
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
}
#chart_x_axis{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
border-top: 1px rgb(221,221,220) solid;
}
#chart_y_axis {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
border-right: 1px rgb(221,221,220) solid;
}
#dot {
position: absolute;
bottom: 0;
left: 0;
background-color:rgb(221,221,220);
border-radius: 1vw;
padding: 1vw;
margin: 0 0 -1vw -1vw;
}

/* Statements */

p {
font-weight: 800;
font-size: 2.5vw;
line-height: 1.5;
margin: 0;
padding: 0 0 0.5em 0;
}
form {
width: 47.5%;
color: rgb(221, 221, 220);
float: right;
position: relative;
}
form:before{
content: "";
display: block;
padding-top: 100%;
}
label {
cursor: pointer;
font-weight: 400;
display: inline-block;
margin: 0;
font-size: 2.5vw;
width: 10%;
text-align: center;
}
input[type="radio"] {
display:none;
}

input[type="radio"] + span:before {
font-family: 'FontAwesome';
display: block;
font-size: 100%;
vertical-align: middle;
}
input[type="radio"] + span:before {
content: "\f10c"; /* toggle-off */
}
input[type="radio"]:checked + span:before {
content: "\f111"; /* toggle-on */
}
#info {
font-size: 2.5vw;
margin: 1em 0;
line-height: 2;
}
.qnum {
font-weight: 400;
float: right;
border-right: 1px solid rgb(34,34,35);
}
.qtot {
float: right;
}
.space {
width: 100%;
height: 100%;
display: none;
line-height: 1.5;
top: 0;
bottom: 0;
position: absolute;
}
strong {
font-weight: 800;
}
.faq {
display: block;
text-transform: uppercase;
opacity: 0.5;
}
.spek-link {
display: block;
margin-top: 1em;
font-weight: 800;
text-transform: uppercase;
}
#spek:before {
content: "You were spekd as ";
}
.spek-number, .spek-statement {
display: table-row;
}
.spek-number {
height: 10%;
font-size: 3.5vw;
}
.spek-check {
position: absolute;
left: 0;
bottom: 0;
right: 0;
display: block;
text-align: center;
}

i.fa.fa-thumbs-up {
font-size: 5vw;
opacity: 0.5;
width: 15%;
text-align: left;
}
i.fa.fa-thumbs-down {
font-size: 5vw;
opacity: 0.5;
width: 15%;
text-align: right;
}

.score {
width: 47.5%;
color: rgb(221, 221, 220);
float: right;
display: none;
position: relative;
}
.score:before {
content: "";
display: block;
padding-top: 100%;
}
.score-full {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.score-top-half {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
.score-bottom-half {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
}
.score-centre {
position: relative;
width: 100%;
height: 100%;
}
.score-centre-inner {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
height: 75%;
}
.score-title {
display: block;
text-align: center;
text-transform: uppercase;
letter-spacing: 2.5vw;
font-size: 2.5vw;
padding-left: 2.5vw;
}
#economic, #cultural {
display: block;
font-size: 15vw;
font-weight: 800;
line-height: 15vw;
text-align: center;
}
.result {
padding: 5vw;
text-align: center;
display: none;
}
.result .fa-share {
color: rgba(34,34,35,0.5);
}
.spek-nav {
background: rgba(34, 34, 35, 0.25);
color: rgb(34,34,35);
}
.inner-spek-nav {
padding: 2.5vw 5vw;
font-size: 6vw;
}
.inner-spek-nav i:hover, .result a i:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#share-spek {
margin: 2.5vw auto 0 auto;
text-align: center;
font-size: 7.5vw;
line-height: 1;
border: 1px solid rgb(34, 34, 35);
padding: 2.5vw 0;
border-radius: 1.25vw;
width: -moz-calc(42.5vw - 2px);
width: -webkit-calc(42.5vw - 2px);
width: calc(42.5vw - 2px);
}
#start:hover, .share-icons i:hover, .share-icons img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.anaarkei img:hover {
-webkit-transform: scale(1.2) rotate(-16deg);
transform: scale(1.2) rotate(-16deg);
}
.next, .finish {
float: right;
cursor: pointer;
}
.back {
float: left;
cursor: pointer;
}
#back001, #next101, .finish {
display: none;
}
.clear {
clear: both;
}

/* Progress Bar */

.progress-bar {
position: absolute;
background: rgb(34, 34, 35);
height: 4vw;
border-radius: 5vw;
overflow: hidden;
width: 75%;
margin: 1.5vw auto;
left:12.5%;
right: 12.5%;
}

.progress-percent {
height: 5vw;
background: rgba(221, 221, 220, 0.25);
}

#pc001 {
width: 1%;
}
#pc002 {
width: 2%;
}
#pc003 {
width: 3%;
}
#pc004 {
width: 4%;
}
#pc005 {
width: 5%;
}
#pc006 {
width: 6%;
}
#pc007 {
width: 7%;
}
#pc008 {
width: 8%;
}
#pc009 {
width: 9%;
}
#pc010 {
width: 10%;
}
#pc011 {
width: 11%;
}
#pc012 {
width: 12%;
}
#pc013 {
width: 13%;
}
#pc014 {
width: 14%;
}
#pc015 {
width: 15%;
}
#pc016 {
width: 16%;
}
#pc017 {
width: 17%;
}
#pc018 {
width: 18%;
}
#pc019 {
width: 19%;
}
#pc020 {
width: 20%;
}
#pc021 {
width: 21%;
}
#pc022 {
width: 22%;
}
#pc023 {
width: 23%;
}
#pc024 {
width: 24%;
}
#pc025 {
width: 25%;
}
#pc026 {
width: 26%;
}
#pc027 {
width: 27%;
}
#pc028 {
width: 28%;
}
#pc029 {
width: 29%;
}
#pc030 {
width: 30%;
}
#pc031 {
width: 31%;
}
#pc032 {
width: 32%;
}
#pc033 {
width: 33%;
}
#pc034 {
width: 34%;
}
#pc035 {
width: 35%;
}
#pc036 {
width: 36%;
}
#pc037 {
width: 37%;
}
#pc038 {
width: 38%;
}
#pc039 {
width: 39%;
}
#pc040 {
width: 40%;
}
#pc041 {
width: 41%;
}
#pc042 {
width: 42%;
}
#pc043 {
width: 43%;
}
#pc044 {
width: 44%;
}
#pc045 {
width: 45%;
}
#pc046 {
width: 46%;
}
#pc047 {
width: 47%;
}
#pc048 {
width: 48%;
}
#pc049 {
width: 49%;
}
#pc050 {
width: 50%;
}
#pc051 {
width: 51%;
}
#pc052 {
width: 52%;
}
#pc053 {
width: 53%;
}
#pc054 {
width: 54%;
}
#pc055 {
width: 55%;
}
#pc056 {
width: 56%;
}
#pc057 {
width: 57%;
}
#pc058 {
width: 58%;
}
#pc059 {
width: 59%;
}
#pc060 {
width: 60%;
}
#pc061 {
width: 61%;
}
#pc062 {
width: 62%;
}
#pc063 {
width: 63%;
}
#pc064 {
width: 64%;
}
#pc065 {
width: 65%;
}
#pc066 {
width: 66%;
}
#pc067 {
width: 67%;
}
#pc068 {
width: 68%;
}
#pc069 {
width: 69%;
}
#pc070 {
width: 70%;
}
#pc071 {
width: 71%;
}
#pc072 {
width: 72%;
}
#pc073 {
width: 73%;
}
#pc074 {
width: 74%;
}
#pc075 {
width: 75%;
}
#pc076 {
width: 76%;
}
#pc077 {
width: 77%;
}
#pc078 {
width: 78%;
}
#pc079 {
width: 79%;
}
#pc080 {
width: 80%;
}
#pc081 {
width: 81%;
}
#pc082 {
width: 82%;
}
#pc083 {
width: 83%;
}
#pc084 {
width: 84%;
}
#pc085 {
width: 85%;
}
#pc086 {
width: 86%;
}
#pc087 {
width: 87%;
}
#pc088 {
width: 88%;
}
#pc089 {
width: 89%;
}
#pc090 {
width: 90%;
}
#pc091 {
width: 91%;
}
#pc092 {
width: 92%;
}
#pc093 {
width: 93%;
}
#pc094 {
width: 94%;
}
#pc095 {
width: 95%;
}
#pc096 {
width: 96%;
}
#pc097 {
width: 97%;
}
#pc098 {
width: 98%;
}
#pc099 {
width: 99%;
}
#pc100 {
width: 100%;
}

/* Colours */
#red {
background: rgb(249, 66, 58);
}
#blue {
background: rgb(48, 127, 226);
}
#green {
background: rgb(38, 208, 124);
}
#purple {
background: rgb(104, 91, 199);
}

/* Footer */

.footer-landing {
padding: 2.5vw 5vw 0 5vw;
background: rgb(34, 34, 35);
color: rgb(221, 221, 220);
}
.footer-landing a {
color: rgb(221, 221, 220);
}
.footer-social {
float: right;
font-size: 5vw;
}
.footer-social .fa-share {
color: rgba(221, 221, 220, 0.25);
}
.footer-social a i:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.footer-spekr {
padding: 0 !important;
}
.footer-tagline {
padding-bottom: 2.5vw;
margin: 0;
font-size: 1.25vw;
line-height: 2;
font-weight: 400;
}
.ongoing {
width: 26vw;
float: left;
padding: 0 1vw;
}
.project-logos {
text-align: center;
height: 5vw;
width: 5vw;
margin: 2.5vw 0 -1.25vw 0;
}
.project-logos:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.w-line {
border-bottom: 1px solid rgb(221,221,220);
width: 100%;
margin-bottom: 2.5vw;
clear: both;
}

/* Posters */
.posters {
text-align: center;
margin: 5vw 0;
}
.posters h2 {
padding-bottom: 5vw;
}
.first-poster, .second-poster, .third-poster, .fourth-poster {
display: inline-block;
}
.posters img {
height: 26vw;
width: 18.4vw;
margin: 0 2.5vw;
background: white;
border-radius: 1.25vw;
}
.posters img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.tagline-landing h3 {
font-weight: 400;
font-size: 2.5vw;
margin: 2.5vw 0 1.25vw 0;
line-height: 2;
}
.tagline-landing h3 a {
font-weight: 800;
}
.tagline-landing p {
font-size: 1.25vw;
line-height: 2;
font-weight: 400;
margin: 0 0 1em 0;
}

/* Ultra Large Screen */

@media only screen and (min-width: 2560px) and (orientation: landscape) {
.header, .inner-landing, .result {
padding: 2.5vw 15vw;
}
.tagline-landing {
padding: 5vw 15vw 1.25vw 15vw;
}
.inner-spek-nav {
padding: 1.25vw 15vw;
}
.progress-bar {
height: 2.5vw;
width: 60%;
margin: 1.15vw auto;
left: 17.5%;
right: 17.5%;
}
.footer-landing {
padding: 2.5vw 15vw 0 15vw;
}
.posters img {
height: 18.975vw;
width: 13.4vw;
}
h1, .poster-share {
font-size: 5vw;
}
h2, .footer-social, input#search, .search, .download-list-box h2 i, .subject-nav-bg h3, i.fa.fa-thumbs-up, i.fa.fa-thumbs-down {
font-size: 3vw;
}
h3, h4, h5, h6, h7, .quiz span, .tagline-landing h3, .hero-start h3, .download-list-box h2, .review h3, .resources h3, .resources-faq h3, .RQ, .subject a:hover span, h3.faq-t, .subject-nav-bg p, .hero-tagline-landing h3, .hero-faq h3, .spek-statement p, label {
font-size: 1.5vw;
}
p, .tagline-landing p, .download-list-box h3, ol, ol li:before, ul, ul li:before, .resource-item h3, h1 sup {
font-size: 0.75vw;
}
p {
margin: 0 0 0.75vw 0;
}
.logo {
width: 5.5vw;
}
.quiz i, i.fa.fa-cogs, i.fa.fa-lightbulb-o, i.fa.fa-superpowers, .hero-faq i.fa-info-circle, .hero-start i.fa-hand-o-down, i.fa-folder-open, i.fa-book, i.fa.fa-bullseye, i.fa.fa-certificate {
font-size: 6vw;
padding-bottom: 1.5vw;
}
.arrow-black {
border-top: 7vw solid rgb(34, 34, 35);
}
.arrow-down {
border-left: 7vw solid transparent;
border-right: 7vw solid transparent;
border-top: 7vw solid rgb(34, 34, 35);
}
.arrow-up {
border-left: 7vw solid transparent;
border-right: 7vw solid transparent;
border-bottom: 7vw solid rgb(34, 34, 35);
}
.arrow-down-spek {
border-left: 7vw solid transparent;
border-right: 7vw solid transparent;
border-top: 7vw solid rgba(34, 34, 35, 0.25);
}
.inner-spek-nav {
font-size: 4vw;
}
.footer-tagline {
font-size: 0.75vw;
}
.score-title {
font-size: 2vw;
}
#economic, #cultural {
font-size: 10vw;
line-height: 10vw;
}
.ongoing {
width: 21.33vw;
}
.project-logos {
height: 3vw;
width: 3vw;
margin: 2.5vw 0 -2.5vw 0;
}
.tagline-landing h3 {
margin: 2.5vw 0 0.75vw 0;
}
#share-spek {
margin: 2.5vw auto 2.5vw auto;
}
}

/* Large Screen */

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
.header, .tagline-landing, .inner-landing, .result {
padding: 4vw 10vw;
}
.inner-spek-nav {
padding: 2.5vw 10vw;
}
.progress-bar {
width: 65%;
height: 3vw;
}
.footer-landing {
padding: 2.5vw 10vw 0 10vw;
}
.posters img {
height: 22.6vw;
width: 16vw;
}
h1 {
font-size: 6vw;
}
h2, .footer-social, input#search, .search, i.fa.fa-thumbs-down, i.fa.fa-thumbs-up {
font-size: 4vw;
}
p, h3, .quiz span, .subject-info-about p, .subject-info-about ul, .subject-info-about ul li:before, .subject a:hover span, #info, label {
font-size: 2vw;
}
.subject-nav, .nav-section, ul, ul li:before, ol, ol li:before, .footer-tagline {
font-size: 1vw;
}
.logo {
width: 6.5vw;
}
i.fa.fa-bullseye, i.fa.fa-certificate, .quiz i, .poster-share, .subject i, #share-spek, i.fa.fa-lightbulb-o, i.fa.fa-cogs {
font-size: 8vw;
}
.arrow-black {
border-top: 8vw solid rgb(34, 34, 35);
}
.arrow-down {
border-left: 8vw solid transparent;
border-right: 8vw solid transparent;
border-top: 8vw solid rgb(34, 34, 35);
}
.arrow-up {
border-left: 8vw solid transparent;
border-right: 8vw solid transparent;
border-bottom: 8vw solid rgb(34, 34, 35);
}
.arrow-down-spek {
border-left: 8vw solid transparent;
border-right: 8vw solid transparent;
border-top: 8vw solid rgba(34, 34, 35, 0.25);
}
.inner-spek-nav {
font-size: 5vw;
}
.ongoing {
width: 24.25vw;
}
}

/* Phone */

@media only screen and (max-width: 768px) {
html {
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust:none;
}
}

@media only screen 
  and (max-width: 414px) 
  and (orientation: portrait) {
h1 {
font-size: 10vw;
}
h1 sup, .tagline-landing p {
font-size: 2.5vw;
}
h2, h3, h4, h5, h6, h7 {
font-size: 6.5vw;
}
p, ul, ol, table, .tagline-landing p, .resources-faq h3, h3.faq-t, .resource-item h3 {
font-size: 3.25vw;
}
label, .footer-tagline {
font-size: 3.25vw;
}
.RQ, .subject-info-about ul li:before, .subject-info-about ul, .subject-info-about p, .subject-nav-bg p, .tagline-landing h3, .subject a:hover span, .hero-start h3, .hero-faq h3, .review h3, .resources h3, .hero-tagline-landing h3, .spek-statement p {
font-size: 4.875vw;
}
.logo {
width: 11.5vw;
margin: 0 auto;
float: none;
}
.tagline-landing {
padding: 15vw 7.5vw 1.25vw 7.5vw;;
}
.hero-tagline-landing {
padding: 7.5vw 7.5vw 15vw 7.5vw;
}
.posters {
margin: 7.5vw 5vw;
}
.posters img {
margin: 0;
padding: 0;
background: white;
border-radius: 2.5vw;
width: 100%;
height: auto;
}
.first-poster, .second-poster, .third-poster, .fourth-poster {
display: inline-block;
float: left;
width: 40vw;
margin: 2.5vw;
}
i.fa.fa-bullseye, i.fa.fa-certificate, i.fa.fa-lightbulb-o, i.fa.fa-cogs {
font-size: 15vw;
}
.score, #wrap, form {
float: none;
width: 100%;
}
#dot {
border-radius: 4vw;
padding: 2vw;
margin: 0 0 -2vw -2vw;
}
.score {
margin-top: 5vw;
width: 100%;
float: none;
}
.inner-landing {
padding: 7.5vw;
}
.inner-spek-nav {
padding: 2.5vw 7.5vw;
font-size: 12vw;
}
.progress-bar {
width: 50%;
height: 8vw;
margin: 3vw auto;
}
.progress-percent {
height: 9vw;
}
.score-title {
font-size: 5vw;
}
#economic, #cultural {
font-size: 30vw;
line-height: 30vw;
}
#share-spek {
width: calc(85vw - 2px);
font-size: 17.5vw;
border-radius: 2.5vw;
margin: 7.5vw 0 0 0;
}
#info {
font-size: 5vw;
}
.result {
padding: 15vw 7.5vw;
}
form {
margin-top: 5vw;
}
form:before{
content: "";
display: block;
padding-top: 60%;
}
label {
font-size: 5vw;
}
i.fa.fa-thumbs-up, i.fa.fa-thumbs-down {
font-size: 10vw;
}
.footer-landing {
padding: 7.5vw 0;
}
.footer-social, .subject-landing h2, .footer-landing, .footer-freeblr, .footer-tagline, .header {
float: none;
text-align: center;
}
.footer-landing .footer-social {
padding: 2.5vw 0 7.5vw 0;
}
.footer-social i {
font-size: 200%;
padding: 0 2.5vw;
}
.w-line {
margin: 0 7.5vw 7.5vw 7.5vw;
width: 85vw;
}
.project-logos {
width: 10vw;
height: 10vw;
margin: 2.5vw 0 -1.25vw 0;
}
.ongoing {
width: 37.5vw;
padding: 7.5vw 2.5vw 0 2.5vw;
}
.arrow-black {
border-top: 20vw solid rgb(34, 34, 35);
}
.arrow-down, .hero-arrow-down {
border-left: 20vw solid transparent;
border-right: 20vw solid transparent;
}
.arrow-down, .hero-arrow-down {
border-top: 20vw solid rgb(34, 34, 35);
}
.arrow-down-spek {
border-left: 20vw solid transparent;
border-right: 20vw solid transparent;
border-top: 20vw solid rgba(34, 34, 35, 0.25);
}
.arrow-up {
border-left: 20vw solid transparent;
border-right: 20vw solid transparent;
border-bottom: 20vw solid rgb(34, 34, 35);
padding-top: 5vw;
}
.arrow-red {
border-top: 20vw solid rgb(249, 66, 58);
}
.arrow-orange {
border-top: 20vw solid rgb(255, 158, 27);
}
.arrow-yellow {
border-top: 20vw solid rgb(255, 209, 0);
}
.arrow-green {
border-top: 20vw solid rgb(38, 208, 124);
}
.arrow-blue {
border-top: 20vw solid rgb(48, 127, 226);
}
.arrow-black {
border-top: 20vw solid rgb(34, 34, 35);
padding-bottom: 7.5vw;
}
.hero-arrow-black {
border-top: 20vw solid rgb(34, 34, 35);
padding-bottom: 15vw;
}
.hero-arrow-up {
border-left: 20vw solid transparent;
border-right: 20vw solid transparent;
border-bottom: 20vw solid rgb(34, 34, 35);
padding-top: 15vw;
}
.hero-arrow-down {
padding-bottom: 20vw;
}
}