:root {
  --oldyellow: #e6df44;
  --newoldyellow: #f5f546;
  --a12313yellow: #fff942;
  --previusyellow: #f5e446;
  --yellow: #ffe446;
  --yellowdark: hsl(51, 100%, 44%);

  --yellowopac: #f5e44675;

  --red: #e62e4f;
  --redligth: hsl(349, 100%, 54%);
  --reddark: hsl(349, 30%, 54%);

  --redopac: #e62e4f75;

  --cyan: #5ce6c3;
  --cyandark: hsl(165, 30%, 63%);

  --cyanpac: #5ce6c375;

  --violet: #d439e6;
  --violetdark: hsl(294, 30%, 56%);

  --violetopac: #d439e675;
  --oldblue: #243eb3;
  --blue: #4682b4;
  --blueopac: #4682b475;

  --green: #68b324;
}
.italic {
  font-style: italic;
}
html {
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
.oldprice {
  text-decoration: line-through;
}
.highligted {
  font-size: 30px;
  /*             background-color: rgba(230, 46, 79, 0.5);

*/
  color: #243eb3;
  /* Mørke blå  */
  color: #68b324;
  /* Grøn */
  color: #d439e6;
  /* Lilla */
  color: #e62e4f;
  /* Lyse rød */
  color: #5ce6c3;
  /* Lyse grøn blå */
  text-transform: uppercase;
}
.twocolumns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.colored .highligted:nth-of-type(3n) {
  color: var(--violet);
  text-transform: uppercase;
}

.colored .highligted:nth-of-type(3n-2) {
  text-transform: uppercase;
  color: var(--red);
}

.colored .highligted:nth-of-type(3n-1) {
  color: var(--cyan);
  text-transform: uppercase;
}

.redhigh .highligted {
  text-transform: uppercase;
  color: var(--red);
}
.purplehigh .highligted {
  text-transform: uppercase;
  color: var(--violet);
}
/* .colored .highligted:nth-of-type(4n+1) {
    color: #243EB3;
    text-transform: uppercase;

} */

.purpletext {
  color: var(--violet);
}

.greentext {
  color: #68b324;
}

.bluetext {
  color: var(--blue);
}

.redtext {
  color: var(--red);
}

.lightblue {
  color: var(--cyan);
}

.yellowtext {
  color: var(--yellow);
}

.quotes {
  background-color: var(--yellow);
  color: black;
  font-style: italic;
  padding: 2px;
}

.quotesdiv {
  text-align: center;
  max-width: 750px;
  margin: 8vh auto 8vh auto;
}

.fade-in-section {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.highligtedsmall {
  color: var(--violet);
  /* Lilla */
  font-size: 140%;
}

/* Hamburger */
.hamburger {
  width: 110px;
  height: 20px;
  background-color: white;
  margin: 20px 20px;
}

/* End */
body {
  background-color: black;
  background-image: url(black.webp);

  margin-top: 40px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  color: #f0e9f4;
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  font-size: 18px;
  text-align: left;
  text-justify: inter-word;
  min-height: 100%;
}

#PhoneLinks {
  display: none;
  overflow: hidden;
  background-color: rgba(22, 31, 34, 0.95);
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  left: 0;
  /* Position the navbar at the top of the page */
  width: 100vh;
  padding: 10px 0 10px 0;
}

#PhoneLinks div {
  width: 100vh;
  padding: 20px;
}

#PhoneLinks div a {
  font-size: 50px;
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
}

.services {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto auto;
  grid-column-gap: 20px;
}

.icon {
  color: white;
  padding: 20px 30px;
  text-decoration: none;
  font-size: 60px;
  display: block;
}

.topmeny {
  overflow: hidden;
  background-color: rgba(22, 31, 34, 0.9);
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 1400px;
  padding: 10px 0 10px 0;
}

.pagedesign {
  max-width: 75ch;
  height: 65vh;
  background-color: rgba(255, 255, 255, 1);
  padding: 75px;
  color: black;
  overflow-y: scroll;
  box-shadow: 10px 10px var(--yellow);
  margin-left: auto;
  margin-right: auto;
}

.center {
  display: flex;
  place-items: center;
}

.highlight {
  color: var(--yellow);
}

.red {
  color: red;
}

hr {
  border: none;
  border-top: 3px dashed var(--yellow);
}

p {
  margin: 0px;
}

.pages {
  width: 100%;
  /*	border-bottom: thick dotted #ff0000; */
  display: block;
}

.signupdiv3 {
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 20px;
  width: 600px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  display: block;
  overflow: auto;
  border: double;
}

.signupdiv {
  min-width: 150px;
  max-width: 50%;
  background-color: #e4572e;
  border: none;
  border-radius: 5px;
  font-size: 30tpx;
  color: white;
  margin: 0px auto 0px auto;
  padding: 15px;
  text-align: center;
  font-family: "Lato", sans-serif;
  transition: background 0.3s ease-in-out;
}

.signupdiv:hover {
  background-color: red;
}

.content {
  padding-top: 30px;
  padding-bottom: 50px;
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  display: block;
  overflow: auto;
}

.topcontent {
  padding-top: 30px;
  padding-bottom: 50px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  display: block;
  overflow: auto;
  font-size: 22px;
}

.course {
  padding-top: 30px;
  padding-bottom: 30px;
  padding: 30px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  clear: both;
  display: block;
  overflow: auto;
  box-sizing: border-box;
  text-decoration: none;
  color: #f0e9f4;
  box-shadow: 6px 6px 1px rgba(255, 0, 179, 0.75);
}

.lessmargin {
  margin-top: 0px;
  padding: 0px;
}

.helv {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
    Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

a,
.course {
  text-decoration: none;
}

.extern {
  border-bottom: 1px solid red;
}

.redbg {
  background-color: rgba(255, 0, 85, 0.1);
}

.redbg:hover {
  background-color: rgba(255, 0, 85, 0.3);
}

.bluebg {
  background-color: rgba(0, 195, 255, 0.1);
}

.bluebg:hover {
  background-color: rgba(0, 195, 255, 0.3);
}

.greenbg {
  background-color: rgba(0, 255, 0, 0.1);
}

.greenbg:hover {
  background-color: rgba(0, 255, 0, 0.3);
}

.halfpage {
  width: 50%;
  overflow: auto;
  float: left;
  padding: 15px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.halfpagebg {
  width: 50%;
  height: 450px;
  padding-top: 100px;
  padding-left: 50px;
  padding-right: 50px;
  text-transform: uppercase;
  overflow: auto;
  float: left;
  background-image: url(alicon.png);
  background-size: cover;
  box-sizing: border-box;
}

div {
  overflow: auto;
}

.infobox {
  padding: 6px;
  width: 22%;
  float: right;
  text-transform: uppercase;
  border: 3px solid #fff;
  font-weight: 600;
}

/* TEXT */

h1 {
  color: var(--yellow);
  font-family: "Lato", sans-serif;
  font-size: 80px;
  font-weight: normal;
  letter-spacing: -1px;
  line-height: 1;
  text-align: left;
  margin: 0;
  text-transform: uppercase;
  margin-bottom: 30px;
  /*     margin-top: 30px;
 */
  text-shadow: 4px 4px 1px rgba(40, 40, 40, 0.3);
  text-decoration: none;
}

h3 {
  /*	color: #2A3132; */
  color: var(--yellow);
  font-family: "Lato", sans-serif;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: -1px;
  line-height: 1;
  text-align: left;
  margin: 0;
  margin-bottom: 20px;
  text-shadow: 4px 4px 1px rgba(40, 40, 40, 0.3);
  /*     text-transform: lowercase;
 */
}

h2 {
  color: var(--yellow);
  font-family: "Lato", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  /*     font-weight: 600;
 */
  /*     line-height: 32px;
 */
  margin: 0px;
  margin-bottom: 10px;
  /*     margin-top: 10px;
 */
  text-align: left;
  /*     text-transform: lowercase;
 */
  font-weight: normal;
}

.subtitle {
  text-transform: uppercase;
  font-weight: 300;
  font-family: "Lato", sans-serif;
  font-size: 30px;
  color: var(--cyan);
}

.biggerh2 {
  line-height: normal;
  text-transform: uppercase;
  font-size: 50px;
}

a {
  /* color: #F0E9F4; */
  color: var(--red);
}

a:hover {
  color: #299ce9;
}

a:active {
  color: var(--yellow);
}

.topmeny a {
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  padding: 0px 15px 0 15px;
}

.center {
  text-align: left;
}

.helpbig {
  font-size: 40px;
}

.fourrows {
  color: aliceblue;
  text-align: left;
  height: auto;
  padding-top: 0px;
  padding-bottom: 3px;
  margin-bottom: 0px;
}

.topicimg {
  width: 100%;
  /* padding-bottom: 56.25%; */
  padding-bottom: 46.25%;
  margin-bottom: 10px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 18px;
  color: blue;
  text-align: center;
  /* ine-height: 315px;*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-transform: uppercase;
  font-weight: bolder;
  position: relative;
  display: block;
  border-radius: 500px;
}

.fourrow {
  color: white;
  text-align: left;
  justify-content: left;
  align-items: left;
  display: block;
}

.cdivider {
  text-align: left;
  justify-content: left;
  align-items: left;
  display: block;
}

.fourcontent {
  width: 100%;
  height: auto;
  clear: left;
}

.subcontainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.nobutton {
  background: none;
  border: none;
}

.extragap {
  grid-column-gap: 75px;
  grid-row-gap: 75px;
}

.subcontainer3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  padding-bottom: 25px;
}

.calendar {
  display: grid;
  grid-template-columns: 70px repeat(2, auto);
  grid-template-rows: auto auto auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.calendar div {
  text-transform: uppercase;
  padding: 5px;
  font-size: 17px;
  background-color: rgba(255, 0, 0, 0.2);
}

.calendar div:nth-child(3n + 4) {
  background-color: rgba(0, 247, 255, 0.4);
}

.calendar div:nth-child(2) {
  background-color: rgba(0, 247, 255, 0.4);
}

.calendar div:nth-child(3) {
  background-color: rgba(0, 247, 255, 0.4);
}

.alone {
  /*     min-height: 60vh;
 */
  width: 100%;
  padding-top: 5vh;
  padding-bottom: 10vh;
}

.helptopics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}

.helptopics5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}

.helptopics3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}

.coursecontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-column-gap: 20px;
}

.commoncontainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 100px;
}

.threecontainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  padding-top: 20px;
}

.mepicture {
  width: 500px;
}

.hideme {
  opacity: 0;
}

.fade {
  opacity: 0;
}

@media (min-width: 1001px) {
  .phonemenu {
    display: none;
  }

  .content {
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
  }

  .squarecontainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 100px;
    padding-bottom: 6px;
    padding-right: 6px;
    transition: opacity 0.5s;
  }

  .squarecontainer div {
    aspect-ratio: 1;
    box-shadow: 6px 6px 1px rgba(255, 0, 179, 0.75);
  }

  .squarecontainer div div {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .squarecontainer div div div {
    height: 100%;
    width: 100%;
    padding: 50px;
    box-sizing: border-box;
    transition: background-image 2s ease-out;
  }

  .squarecontainer div div div:hover {
    background-image: url("http://ransby.biz/pics/playb.png");
    background-size: cover;
  }
}

/* PHONE */

@media (max-width: 1000px) {
  .topmeny {
    display: none;
  }
  .threecontainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-top: 20px;

  }
  .twocolumns {
    display: grid;
    grid-template-columns: 1fr;
  }
  .phonemenu {
    display: show;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
  }

  body {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 70px;
    font-size: 150%;
  }

  .content {
    max-width: 100%;
    margin-left: 40px;
    margin-right: 40px;
    clear: both;
    display: block;
    overflow: auto;
    box-sizing: border-box;
  }

  .topcontent {
    width: 100%;
    max-width: 100%;
  }

  .subcontainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .subcontainer3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .phonegrid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .commoncontainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .coursecontainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .mepicture {
    width: 100%;
  }

  /*     .pagedesign {
        padding: 5px;
        width: 100%;
    } */
  .right2 {
    grid-column: 1;
    grid-row: 1;
  }

  .why {
    grid-column: 1;
    grid-row: 2;
  }
}

.coverpic {
  background-size: cover;
  background-position: center;
  min-height: 200px;
}

.centersquare {
  margin: 0;
  position: absolute;
  top: 50%;
  width: 100%;
  height: auto;
  padding: 10px 0px 10px;
  /* font-size: 28px; */
  font-size: 32px;
  text-align: center;
  -ms-transform: translateY(-50%);
  /*     background-color: rgba(238, 226, 211, 0.5);
 */
  color: #f52533;
  transform: translateY(-50%);
}

.collapsible {
  cursor: pointer;
  background-color: Transparent;
  padding: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  /* color: #0ff; */
  color: #3dc8f2;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  margin: 0px;
  margin-bottom: 20px;
  text-align: left;
  text-transform: uppercase;
}

.active,
.collapsible:hover {
  color: var(--yellow);
}

.contentdiv {
  padding: 0 0px;
  display: none;
  overflow: hidden;
  width: 100%;
  margin-bottom: 25px;
}



.big {
  /*	color: #2A3132; */
  color: var(--yellow);
  font-family: "Roboto", sans-serif;
  font-size: 80px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  text-align: left;
  margin: 0;
  text-transform: capitalize;
  margin-bottom: 20px;
  text-shadow: 4px 4px 1px rgba(40, 40, 40, 0.3);
  text-decoration: none;
}

.big:hover {
  color: #f52533;
}



/* SIGN UP */

.textbox {
  width: 100%;
  height: 4em;
}
input[type="email"],
input[type="number"],
input[type="text"] {
  background-color: rgba(0, 0, 0, 0);
  border-style: none;
  border-bottom-color: white;
  border-bottom-style: dashed;
  color: #3ffc5b;
  font-family: "Roboto Mono", monospace;
  font-size: 16px;
  overflow: hidden;
}

textarea {
  background-color: rgba(0, 0, 0, 0);
  border-style: none;
  border-bottom-color: white;
  border-bottom-style: none;
  color: #3ffc5b;
  font-family: "Roboto Mono", monospace;
  font-size: 16px;
  background-color: rgba(255, 0, 191, 0.123);
}
input[type="email"],
input[type="number"],
input[type="text"]:focus {
  background-color: rgba(0, 0, 0, 0);
  border-style: none;
  border-bottom-color: white;
  border-bottom-style: dashed;
  color: #3ffc5b;
  font-family: "Roboto Mono", monospace;
  outline: none;
  font-size: 18px;
  overflow: hidden;
}
input::placeholder {
  opacity: 0.5;
  font-size: 80%;
}
/*
 *  STYLE 9
 */

.style-9::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

.style-9::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

.style-9::-webkit-scrollbar-thumb {
  background-color: #f90;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}