@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
      font-family: 'Raleway';
      src: url('../fonts/Raleway-Black.ttf') format('truetype');
      font-weight: 900;
      font-style: normal;
    }
    @font-face {
      font-family: 'Raleway';
      src: url('../fonts/Raleway-SemiBold.ttf') format('truetype');
      font-weight: 600;
      font-style: normal;
    }
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

#sitecontent {
  font-family: 'Raleway', sans-serif;
}

html {font-size: 100%;}
@media (max-width: 1536px) {
  html {font-size: 90%;}
  @media (max-width: 1280px) {
    html {font-size: 70%;}
    @media (max-width: 1024px) {
      html {font-size: 60%;}
      @media (max-width: 768px) {
        html {font-size: 60%;}
        @media (max-width: 640px) {
          html {font-size: 60%;}
        }
      }
    }
  }
}

.font-bold {
  font-weight: 700 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.text-base {
  font-size: 1rem !important;
}
.text-lg {
  font-size: 1.125rem !important;
}
.text-xl {
  font-size: 1.25rem !important;
}
.text-2xl {
  font-size: 1.5rem !important;
}
.text-4xl {
  font-size: 2.25rem !important;
}
.text-6xl {
  font-size: 3.75rem !important;
}


.faqelem{
    border-radius: 20px;
    border: 1px solid #3f94cf !important;
    margin-bottom: 1.5rem;
}
.faqelem summary{
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
}

.faqelem[open] summary{
    color: #3f94cf;
}
.borderrad{
    border-radius: 35px;
}
.relatop{
  position: relative;
  z-index: 2;
}
.border-primary{
    border: 1px solid #3f94cf !important;
}
.home-hero-img1{
    border-radius: 10px;
    width: 100%;
    height: 100%;
}
.home-hero-img2{
    border-radius: 10px;
    width: 50%;
    height: auto;
    padding-top: 45%;
    padding-bottom: 5%;
    margin-left: 8%;
}
.home-hero-img3{
    border-radius: 10px;
    width: 50%;
    height: auto;
    padding-top: 8%;
    padding-bottom: 40%;
    margin-left: 46%;
}
.home-hero-img4{
    border-radius: 10px;
    width: 80%;
    height: auto;
    margin-left: 5%;
    padding-top: 5%;
}
.header-site-dot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.ArrowHeroTitle{
  position: absolute;
  right: -50%;
  top: -100%;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.Vector21{
  position: absolute;
  right: -11%;
  top: -7%;
  width: 70%;
  height: 70%;
  z-index: 0;
}
.Vector22{
  position: absolute;
  right: -15%;
  top: -4%;
  width: 70%;
  height: 70%;
  z-index: 0;
}
.Vector212{
  position: absolute;
  right: -45%;
  top: 40%;
  width: 70%;
  height: 70%;
  z-index: 0;
}
.Vector222{
  position: absolute;
  right: -40%;
  top: 45%;
  width: 70%;
  height: 70%;
  z-index: 0;
}
.Vector4{
  position: absolute;
  left: -6%;
    top: 3%;
    width: 20%;
    height: 20%;
  z-index: 0;
}
.Vector7{
  position: absolute;
  left: -20%;
    top: 1%;
    width: 45%;
    height: 45%;
    z-index: 0;
    transform: rotate(180deg);
}
.Vector42{
    position: absolute;
    left: -6%;    
    top: 50%;
      width: 20%;
      height: 20%;
    z-index: 0;
}
.Vector6{
    position: absolute;
    left: -20%;
      top: 1%;
      width: 45%;
      height: 45%;
      z-index: 0;
}
#randosubroot{
  position: relative;
  z-index: 2;
}

@media (min-width: 576px) {
    @media (min-width: 768px) {
        @media (min-width: 992px) {
            @media (min-width: 1200px) {
                #randosubroot{
                    position: relative;
                    top: -30px;
                }
                @media (min-width: 1600px) {  
                    #randosubroot{
                        position: relative;
                        top: -75px;
                    }
                    @media (min-width: 1800px) {
                        #randosubroot{
                            position: relative;
                            top: -120px;
                        }
                    }
                }
            }
        }
    }
}
.bordernewrando{
    position: relative;
    padding-left: 5%;
    padding-right: 5%;
}
.bordernewrando::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  width: 1px;
  height: 75%;
  border-left: 3px solid #000;
}
.difficulty-icon{
  width: 1.5rem;
  height: 1.5rem;
}