/*

Bakgrund: 
#FFFFFF

Textfärg: 
#000000

Ljus 1:
#99C1D1 

Ljus 2: 
#5296B1

Mörk 1: 
#315C6D

Mörk 2: 
#12303C

*/
@import "animation.css";

body {
    margin: 0 auto; 
    font-family: 'Lato';
    font-size: 20px; 
    overflow-x: hidden; 
}

.content, footer {
    animation: fadeIn ease 2s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 
}
@keyframes fadeIn {
    0% {
        opacity: 0; 
    }
    100% {
        opacity: 1; 
    }
}



.content {
    margin: auto; 
    padding: 100px 70px 60px 70px; 
}
.content-index {
    margin: auto; 
    position: absolute; 
    top: 20%; 
}


nav { /* hela naven */
    top: 0; 
    box-shadow: 0 -30px 30px 50px rgba(255,255,255,0.7);
    padding: 20px 30px 0 30px;
    display: flex;
    width: 100%; 
}
nav, footer {
    background: rgba(255,255,255,0.7); 
    position: sticky; 
    right: 0; 
    width: 100%; 
    height: 5%; 
    z-index: 10; 
}
nav a, footer p {
    font-size: 80%; 
}

footer {
    bottom: 0;  
    box-shadow: 0 30px 30px 50px rgba(255,255,255,0.8);
    padding: 0 20px 20px 30px;
}
footer p {
    text-align: right; 
    margin-right:10%; 
    margin-bottom: 10px; 
}
.nav-left { /* "tillbaka till startsidan" */
    margin-left: 70px;  
    width: 50%; 
    padding-top: 2px; 
}
.nav-left a {
    position: relative; 
}
.nav-right { /* dropdwon div */
    right: 10%; 
    position:absolute; 
}

.nav-drop { /* nav ul */
    display: flex; 
    margin-top: 2px; 
    padding-right: 0; 
}
.nav-drop li {
    position: relative; 
    padding: 0; 
}
.nav-topli {
    margin: 0 10px; 
    text-align: center; 
}
.nav-topli:last-child {
    margin-right: 0; 
}
.nav-drop li, .nav-left a {
    background:rgba(255,255,255,0.4);
    box-shadow: 0 0 30px 30px rgba(255,255,255,0.4);
}
.nav-topli li:first-child {
    box-shadow: 0 20px 20px 20px rgba(255,255,255,0.3);
}

/* under del drop */
.nav-drop, .nav-drop ul {
    list-style: none; 
}
.nav-topli li {
    float:none; 
    margin: 15px 0; 
}
.nav-topli li a {
    position: relative
}
.nav-topli li:last-child {
    padding-top: 15px; 
}
.nav-topli ul {
    display: none; 
    left: 0; 
    top: 100%; 
    text-align: left; 
    position: absolute; 
    padding: 0; 
}
.nav-topli:hover > ul {
    display:block; 
}

nav a {
    color: black; 
    text-transform: uppercase; 
    text-decoration: none; 
}
.nav-arrow {
    float:right; 
    margin-right: 10px; 
}


.nav-toplink {
    position: relative; 
}
.nav-toplink::after, .active::after, .nav-left a::after, .nav-topli li a::after {
    background: #5296B1; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 0%;
    height: 2px; 
    content: '';
}
.active::after {
    width: 100%; 
}
.nav-toplink:hover::after, .nav-left a:hover::after, .nav-topli li a:hover::after {
    width: 100%;
    transition: 1s; 
}



h1 {
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 500%; 
    margin-left: 30px; 
}
h1, mark {
    color: black;
}
.sitelink {
    text-align: center; 
    margin-left: 30px;
}
/*.pagebreak {
    padding-bottom: 20vh;
}*/

mark {
    background: none; 
    border-bottom: 10px solid #5296B1; 
}

h3 {
    text-transform: uppercase; 
    font-weight: bold; 
    font-size: 45px;
}
.div {
    margin: 150px 60px; 
    display: flex;  
}

.div:last-child {
    margin-bottom: 50px; 
}

p {
    color: #444; 
    line-height: 32px; 
}


.innehall-ul, .prg ul {
    font-size: 21px; 
    line-height: 35px; 
}
.innehall-ul li, .prg ul li {
    list-style: none; 
    background: url(bilder/listicon.png) 0 12px no-repeat; 
    background-size: 20px; 
    padding-left: 45px;
    margin-top: 20px; 
}
.innehall-ul {
    width: 45%; 
}


.readmore-div {
    text-align: center; 
    margin: 0 50px; 
}
.readmore-p {
    padding-bottom: 50px;
    width: 80%; 
    text-align: justify; 
    margin:auto; 
}
.readmore-a {
    margin-top: 100px; 
}
.readmore-a, .skolverket-a, .sitelink {
    text-transform: uppercase; 
    color: #5296B1; 
    text-decoration: none; 
    background: rgba(82, 150, 177, 0.2); 
    border-radius: 20px; 
    font-size: 120%;
    padding: 10px
}

.skolverket-img {
    padding-right: 230px; 
    margin-left: 70px; 
}
.skolverket-div {
    text-align: right; 
    margin-right: 0; 
}
.skolverket-p {
    padding-bottom: 30px; 
    text-align: justify; 
}
.skolverket-a {
    text-align: right; 
}
.readmore-a:hover, .skolverket-a:hover, .sitelink:hover {
    color: #315C6D; 
    transition: 0.75s; 
}

.betyg {
    width: 33%; 
    margin-right: 30px;
    margin-bottom: 0; 
}
.betyg:last-child {
    margin: 0; 
}
.betyg-rubrik {
    font-size: 100px; 
}
.betyg-p {
    text-align: left; 
}

em {
    font-style: normal; 
    color: #5296B1; 
}

.faq {
    margin: 50px 0; 
}
.faq:first-child {
    margin-top: 0; 
}
.faq div:hover {
    cursor: pointer; 
}
.faq-chevron {
    float:right;  
}
.faq-question {
    text-decoration: none; 
    color: black; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 30px; 
}

.faq-answer {
    width: 100%; 
    display: none; 
    text-align: justify; 
}

.website-div {
    display: flex; 
    margin:auto; 
}
.website-div div {
    display: block; 
    width: 33%;
}
.website-div img {
    width: 95%;
    border-radius: 15px; 
    box-shadow: 2px 2px 10px 5px rgba(200, 200, 200, 0.3); 
    z-index: 5;
    position: relative;
}
.website-div p {
    background: rgba(82, 150, 177, 0.2); 
    color: #5296B1; 
    padding: 5px 0 10px 10px; 
    border-radius: 15px 15px 0 0; 
    text-transform: uppercase; 
    margin-bottom: -50px; 
    font-size: 18px; 
    width: 91%; 
}

.website-div div:hover p {
    transform: translateY(-40px);
    transition: 0.2s; 
}



.kontakt {
    width: 80%; 
    margin:auto; 
}
.kontakt div {
    width: 50%; 
    text-align: left; 
}
.kontakt-uppgifter {
    margin-top: 0; 
}
.kontakt-uppgifter p {
    padding-left: 50px; 
}


input[type=text],input[type=email], textarea {
    width: 100%; 
}
input[type=text], input[type=email], textarea, input[type=submit] {
    margin: 10px 0; 
}
input[type=text] {
    margin-top: 0; 
}
input[type=text], input[type=email] {
    height: 20px; 
}
textarea {
   height: 50px; 
    resize: none; 
}


.prg-all {
    display: flex; 
    flex-wrap: wrap; 
    width: 100%; 
}
.prg {
    margin: 20px 10px; 
    width: 45%; 
}
.prg:last-child {
    margin-bottom: 0; 
}
.prg h3 {
    font-size: 25px; 
    margin-bottom: 10px; 
    text-transform: uppercase; 
}
.prg li {
    margin: 10px 0; 
}




#lightani {
    z-index: -1; 
}



/*

Bakgrund: 
#FFFFFF

Textfärg: 
#000000

Ljus 1:
#99C1D1 

Ljus 2: 
#5296B1

Mörk 1: 
#315C6D

Mörk 2: 
#12303C

*/