/*Använder mig av vh istället för pixlar, använder mig av en "converter" på google. Dubbelcheackar så att storlekarna stämmer även efter*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #E8E8E8;
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3 {
    font-family: 'Archivo', sans-serif;
}


/*Header*/
header {
    background: #fff;
    font-family: 'Segoe UI';
}

.header {
    display: flex;
    height: 9.6vh;
    width: 85%;
    margin: auto;
    align-items: center;
}

#logga {
    flex: 3;
    color: #000;
    font-weight: bolder;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 3.2vh;
}


/*Nav-links*/
nav {
    flex: 2;
}

.nav-links {
    display: flex;
    justify-content: flex-end;
    list-style: none;
}

.nav-link a {
    color: #000;
    text-decoration: none;
    font-size: 3.2vh;
    font-weight: 300;
    padding: 2.7vh 5.3vh;
}

.nav-link a:hover {
    background: #E8E8E8;
    transition: ease-in 0.5s;
}

nav a.active {
    background: #E8E8E8;
}


/*Om*/

/*Presentation*/
.presentation {
    margin: auto;
    width: 116.2vh;
    height: 60.8vh;
    display: flex;
    font-family: 'Segoe UI';
}

.intro {
    flex: 1;
}

.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.intro-tabell {
    display: flex;
    align-items: center;
}

.intro-text h3 {
    color: #0E86E2;
    font-size: 3.2vh;
}

.intro-text h1 {
    font-size: 7.5vh;
    line-height: 6.4vh;
    letter-spacing: 0.5vh;
}

.knappar {
    margin-top: 4.3vh;
}

.knappar a {
    text-decoration: underline;
    color: #000; 
    font-size: 2.76vh;
}

.knappar button {
    margin-right: 3.2vh;
    border: #0E86E2 0.4vh solid;
}

.knappar button:hover {
    color: #000;
    background: #E8E8E8;
    border: #000 0.4vh solid;
}

.mer {
    background: #0E86E2;
    color: white;
    border: none;
    font-size: 3.2vh;
    padding: 1.1vh 6.4vh;
    border-radius: 3.2vh;
}

.rektangel {
    width: 41.6vh;
    height: 40vh;
    background: #fff;
    border-radius: 8%;
    display: flex;
}

.cirklar {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: -2.7vh;
}

.cirkel {
    background: #00FF00;
    height: 5.7vh;
    width: 5.7vh;
    border-radius: 50%;
    display: flex;
    margin: 1.3vh 0 ;
    justify-content: center;
    align-items: center;
}

.rek-text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 2.7vh;
    margin-left: 1.6vh;
}

.fa-check {
    color: #fff;
}

/*Content*/
.content {
    margin: auto;
    font-size: 2.1vh;
}

.content h2 {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.1vh;
    margin-left: -20.3vh;
}

.syfte-innehall, .innehall-innehall {
    color: #E8E8E8;
}

.syfte-innehall, .kursen-innehall, .innehall-innehall {
    display: flex;
    align-items: center;
    width: 145.6vh;
    height: 64vh;
}

.content img {
    border-radius: 2pc;
    width: 42.7vh;
}

/*Syfte*/
.syfte {
    background: #444;
    width: 100%;
    display: flex;
    justify-content: center;
}

.syfte-text {
    flex: 1;
}

/*Kursen*/
.kursen {
    display: flex;
    justify-content: center;
}

.kursen-bild {
    flex: 1;
}
.kursen-text h2 {
    margin-left: -4.3vh;
}

/*Innehall*/
.innehall {
    background: #0E86E2;
    width: 100%;
    display: flex;
    justify-content: center;
}

.innehall-innehall {
    height: 85vh;
}

.innehall-knapp {
    display: flex;
    justify-content: center;
    margin-left: -20.3vh;
    margin-top: 3.2vh;
}

.innehall-innehall a {
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    font-size: 2.1vh;
    padding: 1.1vh 3.2vh;
    background: #fff;
    border-radius: 4pc;
}

.innehall-text {
    flex: 1;
}


/*Kontakt*/
.kontakt {
    height: 96vh;
}

.kontakt {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.kontakt h1 {
    font-size: 5.3vh;
    text-transform: uppercase;
}

.kontakt form {
    display: flex;
    flex-direction: column;
    font-size: 2.1vh;
    margin-top: 5.3vh;
}

.kontakt input[type=text], textarea {
    padding: 1.1vh;
    border: 0.1vh solid #bbb;
    border-radius: 2.1vh;
    resize: vertical;
}

.kontakt label {
    font-weight: bold;
    margin-left: 2vh;
    margin-top: 3.2vh;
}

.kontakt input[type=submit] {
    display: block;
    width: 15%;
    margin: 2.1vh auto; 
    background: #0E86E2;
    color: #E8E8E8;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 3.2vh;
    padding: 1.3vh 2.1vh;
    border: 0.2vh solid #E8E8E8;
}

.kontakt input[type=submit]:hover {
      background: #E8E8E8;
      color: #0E86E2;
      border: 0.2vh solid #0E86E2;
}


/*Synpunkter*/
.synpunkter {
    margin: auto;
    font-size: 2.1vh;
}

.synpunkter h2 {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.1vh;
}

.asikt, .tips, .fs {
    width: 100%;
    display: flex;
    justify-content: center;
}

.asikt-innehall, .tips-innehall, .fs-innehall {
    display: flex;
    align-items: center;
    width: 145.6vh;
    height: 70vh;
}

.synpunkter img {
    border-radius: 2pc;
    width: 42.7vh;
}

/*Mina åsikter*/
.asikt-bild {
    flex: 1 ;
}

.asikt h2 {
    margin-left: -6.5vh;
}

/*Tips*/
.tips {
    background: #0E86E2;
    color: #E8E8E8;
}

.tips-text {
    flex: 1;
}

.tips h2 {
    margin-left: -34vh;
}

.tips-text a {
    color: #E8E8E8;
    text-decoration: none;
    font-weight: bold;
}
.tips-text a:hover {
    color: black;
    text-decoration: underline;
}

/*Frågor & svar*/
.fs-bild {
    flex: 1;
}


/*Exempel*/
.exempel {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ex1, .ex2, .ex3, .ex4 {
    margin: 7.3vh 6.3vh;
    background: #fff;
    padding: 5.3vh 5.3vh 3.2vh 5.3vh;
    border-radius: 2pc;
    box-shadow: #AAA 0.5vh 0.5vh 6.3vh;
}

.exempel img {
    border-radius: 2pc;
    box-shadow: #000 1.1vh 1.1vh 4.3vh;
    width: 53.4vh;
}

.exempel h3 {
    margin-top: 2.1vh;
    font-size: 2.1vh;
}


/*Footer*/
footer {
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2.1vh;
    height: 12.8vh;
}