/*Litir*/
:root {
    /* light theme */
    --main-bg: #fffdfdd5; 
	--text-bg: #000000;
    --form-bg: #c3c1c1;
    --blue-bg:rgb(13, 144, 219);
    --blue-bg-2:rgb(8, 102, 156); 
    --red-bg:rgb(227, 0, 4);
    --button-bg:rgb(247, 2, 177);

			

	/* Dark theme */
	--main-bg-d: #424242;
    --text-bg-d: #ffffff;
    --form-bg-d: #ababab;
    --blue-bg-d:rgb(8, 102, 156); 
    --blue-bg-2d:rgb(13, 144, 219); 
    --red-bg-d:rgb(169, 1, 3);
    --button-bg-d:rgb(198, 34, 152);
}

@media (prefers-color-scheme: dark) {
	:root {
		--main-bg: var(--main-bg-d);
		--text-bg: var(--text-bg-d);
        --form-bg:var(--form-bg-d);
        --blue-bg: var(--blue-bg-d);
        --blue-bg-2:var(--blue-bg-2d); 
		--red-bg: var(--red-bg-d);
        --button-bg:var(--button-bg-d);
	}
}
html {
	scroll-behavior: smooth;
}

body {
    background-color: var(--main-bg);
    color: var(--text-bg);
}

/*Font*/
.oswald-uniquifier{
	font-family: "Oswald", serif;
	font-optical-sizing: auto;
	font-weight: weight;
	font-style: normal;
}

/*Grid*/
.container {
    padding: 0.5rem;
}
.col-1, 
.col-2,
.col-3 { 
display: grid;
grid-template-columns: 1fr;
}

/*Topmenu*/
#toggle {
    display: none;
}
.topnav {
    margin: 0;
}
.topmenu {
    display: flex;
    flex-flow: column;
    margin: 0;
    position: fixed;
    width: 90%;
    top: 3.5rem;
    right: -80rem;
    z-index: 10;
    background-color: var(--blue-bg);
    transition: all 2s ease;
}
.topmenu a {
    display: block;
    text-align: center;
    width: 100%;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--nd-tx-1);
    border-bottom: 1px solid var(--main-bg);
}
.topnav label {
    position: fixed;
    top: 2rem;
    right: 1rem;
    padding:  0 0.3rem;
    font-size: 1.5rem;
    border: 1px solid var(--text-bg);
    z-index: 20;
    border-radius: 2%;
}
.topnav label:hover,
.topnav label:active {
    background-color: var(--blue-bg);
}
.socialbutts {
    display: flex;
    flex-flow:row;
    justify-content: space-around;
}
.socialbutts a {
    padding: 0.5rem 1rem;
    border: 0;
}
#toggle:checked ~ .topmenu {
    right: 1rem;
    transition: all 0.5s ease;
}
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
  }
.overlay:target {
    visibility: visible;
    opacity: 1;
    z-index: 20;
  }

/*Popup*/
.popup {
    margin: 2rem;
    padding: 1rem;
    background: var(--blue-bg-2);
    border-radius: 5px;
    max-width: 37.5rem;
    position: relative;
    /*transition: all 5s ease-in-out;*/
  }
.popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--button-bg);
  }
.popup .close:hover {
    color: #03f6fe;
  }

/*Tafla*/
table {
	border-collapse: collapse;
	width: 100%
}
td,
th {
	border: 1px solid black;
	text-align: left;
	padding: .5rem;
}
th {
	background: var(--blue-bg);
}
tr:nth-child(odd) {
	background: var(--blue-bg-2);
}

tr:nth-child(even) {
	background: var(--blue-bg);
}
table {
	font-weight: bold;
	margin: 0;
}
table a {
	text-decoration: none;
	color: var(--text-bg);
}
textarea {
	max-width: 100%;
}

/*Iframe*/
iframe {
  padding: 1rem;
  align-items: center;
}

/*Form*/
a button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	font-size: 1rem;
	display: inline-block;
	padding: 6px 12px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	background: var(--button-bg);
	color: var(--text-bg);
	border: 0;
	border-radius: 4px;
	box-sizing: border-box;
	cursor: pointer;
}
a button[disabled],
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
	cursor: default;
	opacity: .5;

	/* Set the [X] cursor while hovering a disabled link */
	cursor: not-allowed;
}
.button:focus,
.button:enabled:hover,
button:focus,
button:enabled:hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
	background: var(--red-bg);
}
fieldset {
	margin-top: 1rem;
	padding: 2rem;
	border: 1px solid var(--form-bg);
	border-radius: 4px;
}
legend {
	padding: auto .5rem;
	font-weight: 600;
}
textarea,
select,
input {
	padding: 6px 12px;
	margin-bottom: .5rem;
	background: var(--main-bg);
	color: var(--text-bg);
	border: 1px solid var(--form-bg);
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="time"],
input[type="date"],
textarea,
select {
	width: 100%;
}
::-webkit-calendar-picker-indicator {
	background-color: var(--red-bg);
	padding: 0.2rem;
	border-radius: 50%;
}
.form-text {
	margin-top: 2rem;
}
.center {
    text-align: center;
}

/*Details*/
details {
	padding: 0.6rem 1rem;
    background-color: var(--red-bg);
	border: 1px solid var(--text-bg);
	border-radius: 4px;
    margin-bottom: 2rem;
}
summary {
	cursor: pointer;
	font-weight: bold;
}
details[open] {
	padding-bottom: .75rem;
}
details[open] summary {
	margin-bottom: 6px;
}
details[open]>*:last-child {
	margin-bottom: 0;
}
details img {
  height: 250px;
  width: 150px;
}

/*Footer*/
footer {
	padding: 2rem;
	background-color: var(--blue-bg);
}
footer ul{
	list-style-type: none;
}
footer a{
	color: var(--text-bg);
}
footer a:hover {
	color: var(--button-bg);
}

/*Spjallbox*/
#merki {
	display: none;
  }
.bottomnav label {
	position: fixed;
	bottom: 2rem;
	right: 1rem;
	font-size: 1.5rem;
	border: 1px solid var(--blue-bg-2);
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	text-align: center;
	justify-content: center;
	background-color: var(--blue-bg-2);
	z-index: 10;
  }
.bottommenu {
	margin: 0;
	position: fixed;
	bottom: 3.5rem;
	right: -80rem;
	z-index: 9;
	transition: all 2s ease;
  }
#merki:checked ~ .bottommenu {
	right: 2rem;
	transition: all 0.5s ease;
  }
.Spjallbox {
	border-radius: 2.5%;
	padding: 1rem;
	background-color: var(--red-bg);
  }
 
/*Media screen*/
@media screen and (max-width: 600px) {
  table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    
  table tr {
      display: block;
    }
    
  table td {
      display: block;
      text-align: right;
    }
    
  table td::before {
      content: attr(data-label);
      float: left;
      font-weight: 600;
    }
  }

@media screen and (min-width: 23rem) {
  .logo{
      height: 300px;
	    width: 350px;
      position: relative; 
      left: 3%;
      right: 3%;
      margin-bottom: -5rem;
    }
  iframe {
      width: 200px;
      height: 200px;
    }
  }

@media screen and (min-width: 37.5rem) {
  .popup{
      margin: 2rem auto;
    }
  }

@media screen and (min-width:48rem) {
  .container {
        padding: 0 1rem;
    }
  .col-2 {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
  .col-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
  .logo{
      height: 500px;
	  width: 600px;
      position: relative; 
      left: 10%;
      right: 10%;
      margin-bottom: -10rem;
    }
  iframe {
      width: 300px;
      height: 300px;
    }
}

@media screen and (min-width:60rem) {
  .col-2,
  .col-3 {
        gap: 2rem;
    }
  .topmenu {
      flex-flow: row;
      justify-content: space-around;
      transition: none;
      position: relative;
      width: 100%;
      top: 0;
      right: 0;
  }
  .topnav label {
      display: none;
  }
}
@media screen and (min-width:80rem) {
  .container {
        max-width: 80rem;
        margin: auto;
    }
  .logo {
      height: auto;
      width: auto;
      position: relative; 
      left: 20%;
      right: 20%;
      margin-bottom: 0rem;
  }
  iframe {
    width: 400px;
    height: 250px;
  }
}

@media screen and (min-width:100rem) {
  .logo {
    height: auto;
    width: auto;
    position: relative; 
    left: 30%;
    right: 30%;
    margin-bottom: 0rem;
}
}

/*Animation*/
@-webkit-keyframes fadeInDown {
	from {
	  opacity: 0;
	  transform: translate3d(0, -100%, 0);
	}
  
	to {
	  opacity: 1;
	  transform: translate3d(0, 0, 0);
	}
  }
@keyframes fadeInDown {
	from {
	  opacity: 0;
	  transform: translate3d(0, -100%, 0);
	}
  
	to {
	  opacity: 1;
	  transform: translate3d(0, 0, 0);
	}
  }
.animate__fadeInDown {
	animation-name: fadeInDown;
	animation-duration: 1s;
	animation-iteration-count: 1;
  }
  
@keyframes lightSpeedInRight {
	from {
	  transform: translate3d(100%, 0, 0) skewX(-30deg);
	  opacity: 0;
	}
  
	60% {
	  transform: skewX(20deg);
	  opacity: 1;
	}
  
	80% {
	  transform: skewX(-5deg);
	}
  
	to {
	  transform: translate3d(0, 0, 0);
	}
  }
.animate__lightSpeedInRight {
	animation-name: lightSpeedInRight;
	animation-timing-function: ease-out;
	animation-duration: 1s;
	animation-iteration-count: 1;
  }
  
#slideset6 {
	  height: 24rem; 
	  position: relative
	}
	
#slideset6 > * {
	  animation: 24s autoplay6 infinite linear;
	  position: absolute; 
	  top: 0; 
	  left: 0; 
	  opacity: 0.0
	}
	
@keyframes autoplay6 {
	  0% {opacity: 0.0}
	  4% {opacity: 1.0}
	  16.67% {opacity: 1.0}
	  18.75% {opacity: 0.0}
	  100% {opacity: 0.0}
	}
  #slideset6 > *:nth-child(1) {animation-delay: 0s}
  #slideset6 > *:nth-child(2) {animation-delay: 4s}
  #slideset6 > *:nth-child(3) {animation-delay: 8s}
  #slideset6 > *:nth-child(4) {animation-delay: 12s}
  #slideset6 > *:nth-child(5) {animation-delay: 16s}
  #slideset6 > *:nth-child(6) {animation-delay: 20s}
	
.slideset6 {
	  padding: 1rem;
	}
.slideset6 img {
		height: 350px;
		width: 250px;
	}

/*Icomoon*/  
@font-face {
	font-family: 'icomoon';
	src:  url('fonts/icomoon.eot?o6m4d3');
	src:  url('fonts/icomoon.eot?o6m4d3#iefix') format('embedded-opentype'),
	  url('fonts/icomoon.ttf?o6m4d3') format('truetype'),
	  url('fonts/icomoon.woff?o6m4d3') format('woff'),
	  url('fonts/icomoon.svg?o6m4d3#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	/*speak: never;*/
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  
.icon-home:before {
	content: "\e900";
  }
.icon-office:before {
	content: "\e903";
  }
.icon-video-camera:before {
	content: "\e914";
  }
.icon-coin-dollar:before {
	content: "\e93b";
  }
.icon-credit-card:before {
	content: "\e93f";
  }
.icon-phone:before {
	content: "\e942";
  }
.icon-location:before {
	content: "\e947";
  }
.icon-clock:before {
	content: "\e94e";
  }
.icon-calendar:before {
	content: "\e953";
  }
.icon-bubble:before {
	content: "\e96b";
  }
.icon-user:before {
	content: "\e971";
  }
.icon-users:before {
	content: "\e972";
  }
.icon-link:before {
	content: "\e9cb";
  }
.icon-mail4:before {
	content: "\ea86";
  }
  
span {
	padding-right: 3px;
  }