@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/* Basic stöff */
:root {
    --text: #0b2c81;
    --underline: #ffc823;
    --background: #f8f8f8;
    --white: #ffffff;
    --green: #47a829;
    --red: #fd1015;
    --blue: #0b2b81;
    --yellow: #ffc800;
    --mainlogo: #434343;
    --altlogo-dark: #441515;
    --altlogo-light: #ced4e5;
}

body {
    font-family:  'Lato', sans-serif;
    background-color: var(--background);
    color: var(--text);
    margin: 0;
    padding: 0;
}

.st4{font-family:'Lato'; text-align: center!important;}


.row {
    margin:0!important;
}



select {
    font-family:  'Lato', sans-serif;
    font-weight: bolder;
    background-color: unset;
    border: none;
    margin-left: 5px;
    height: 18px;
}

h1 {
    font-size: 1.6rem;
    font-weight: 700;
}

h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
}

p {
    font-size: .9rem;
    text-align: justify;
}

.maincontent{
    padding: 0 20px;
}

.maincontent a:link {
    text-decoration: none;
}
.maincontent a:visited {
    text-decoration: none;
}
.maincontent a:hover {
    text-decoration: none;
}
.maincontent a:active {
    text-decoration: none;
}


#se-pre-con {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../media/icon/gimlipreloader-faster.gif) center no-repeat #fff;
    -moz-animation: cssAnimation 0s ease-in 1.5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 1.5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 1.5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 1.5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
        display: none;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
        display: none;
    }
}

.headerlogo {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 65px;
}

.dropdown {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;}

header {
    display: inline;
}

.headcard {
    background-color: var(--white);
    border-radius: 0 0 25px 25px;
}

.headcard-sub{
    background-color: var(--white);
    border-radius: 25px;
    margin-top: -15%;
}

.headcard-drop{
    background-color: var(--white);
    border-radius: 25px;
    padding: 20px;
}

.headcard-sub h2 {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left;
    color: var(--text);
}

.headcard-drop h2 {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left;
    color: var(--text);
}

.cardtext {
    padding: 10px 20px;
    margin-bottom: 20px;
}

.cardtext p {
    margin:0!important;
    padding: 20px 0;
}

.cardtext:last-child{
    text-align: center;
}

.lesameira {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    font-weight: 800;
    font-size: 1.2rem;
}

#moreTexti {display: none;}

.litaspjald {
    border-radius: 25px;
    height: calc(100vw - 40px);
    margin-bottom: 20px;
    position: relative;
}

.gulur {
    background-color: var(--yellow);
    background-image: url("../media/icon/Joga4_white.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
    background-size: 60% 60%;
}

.blar {
    background-color: var(--blue);
    background-image: url("../media/icon/Joga5_white.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
    background-size: 60% 60%;
}

.raudur {
    background-color: var(--red);
    background-image: url("../media/icon/Joga3_white.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
    background-size: 90% 90%;
}

.graenn {
    background-color: var(--green);
    background-image: url("../media/icon/Joga2_white.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
    background-size: 70% 70%;
}

.topbogi {

    margin-top: -20%;
    background-color: #f8f8f8;
    width:100%;
    height:100px;
    border-top-left-radius:50%;
    border-top-right-radius:50%;
}

.mainwhite {
text-align: center;
padding-top: 70vw;
line-height: 2rem;
}
.mainwhitegreen {
text-align: center;
padding-top: 80vw;
}

.gulurheader {
background-color: var(--yellow);
height: 25vh;
width: 100vw;
padding: 0 -20px!important;
}

.blarheader {
background-color: var(--blue);
height: 25vh;
width: 100vw;
padding: 0 -20px!important;
}

.raudurheader {
    background-color: var(--red);
    height: 25vh;
    width: 100vw;
    padding: 0 -20px!important;
}
.graennheader {
    background-color: var(--green);
    height: 25vh;
    width: 100vw;
    padding: 0 -20px!important;
}

.jogaspjold {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.jogaspjald {
    margin-top: 10px;
    width: 20vw;
    height: 20vw;
    border-radius: 15px;
}

.jogaspjald-stada {
    position: absolute;
    width: 30vw;
    height: 30vw;
    border-radius: 15px;
    left: -10px;
    top: 20vw
}
.gult {
    background-color: var(--yellow);
}

.rautt {
    background-color: var(--red);
}

.graent {
    background-color: var(--green);
}

.blatt {
    background-color: var(--blue);
}

.spacer {
    height: 75px;
}

.tre {
    background-image: url("../media/icon/Icon_Tre.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.treen {
    background-image: url("../media/icon/Icon_TreEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.trepl {
    background-image: url("../media/icon/Icon_TrePol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.steinn {
    background-image: url("../media/icon/Icon_Steinn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.steinnen {
    background-image: url("../media/icon/Icon_SteinnEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.steinnpl {
    background-image: url("../media/icon/Icon_SteinnPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.fjall {
    background-image: url("../media/icon/Icon_Fjall.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.fjallen {
    background-image: url("../media/icon/Icon_FjallEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.fjallpl {
    background-image: url("../media/icon/Icon_FjallPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.rigning {
    background-image: url("../media/icon/Icon_Rigning.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.rigningen {
    background-image: url("../media/icon/Icon_RigningEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.rigningpl {
    background-image: url("../media/icon/Icon_RigningPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.hundur {
    background-image: url("../media/icon/Icon_Hundur.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.hunduren {
    background-image: url("../media/icon/Icon_HundurEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.hundurpl {
    background-image: url("../media/icon/Icon_HundurPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.fugl {
    background-image: url("../media/icon/Icon_Fugl.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.fuglen {
    background-image: url("../media/icon/Icon_FuglEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.fuglpl {
    background-image: url("../media/icon/Icon_FuglPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.kisa {
    background-image: url("../media/icon/Icon_Kisa.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.kisaen {
    background-image: url("../media/icon/Icon_KisaEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.kisapl {
    background-image: url("../media/icon/Icon_KisaPl.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.blom {
    background-image: url("../media/icon/Icon_Blom.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.blomen {
    background-image: url("../media/icon/Icon_BlomEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.blompl {
    background-image: url("../media/icon/Icon_BlomPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.fidrildi {
    background-image: url("../media/icon/Icon_Fidrildi.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.fidrildien {
    background-image: url("../media/icon/Icon_FidrildiEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.fidrildipl {
    background-image: url("../media/icon/Icon_FidrildiPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.kongulo {
    background-image: url("../media/icon/Icon_Kongulo.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.konguloen {
    background-image: url("../media/icon/Icon_KonguloEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.kongulopl {
    background-image: url("../media/icon/Icon_KonguloPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.sol {
    background-image: url("../media/icon/Icon_Sol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.solen {
    background-image: url("../media/icon/Icon_SolEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.solpl {
    background-image: url("../media/icon/Icon_SolPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.tungl {
    background-image: url("../media/icon/Icon_Tungl-Mani.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.tunglen {
    background-image: url("../media/icon/Icon_TunglEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.tunglpl {
    background-image: url("../media/icon/Icon_TunglPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.hvalur {
    background-image: url("../media/icon/Icon_Hvalur.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.hvaluren {
    background-image: url("../media/icon/Icon_HvalurEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.hvalurpl {
    background-image: url("../media/icon/Icon_HvalurPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.hakarl {
    background-image: url("../media/icon/Icon_Hakarl.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.hakarlen {
    background-image: url("../media/icon/Icon_HakarlEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.hakarlpl {
    background-image: url("../media/icon/Icon_HakarlPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.snjor {
    background-image: url("../media/icon/Icon_Snjor.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.snjoren {
    background-image: url("../media/icon/Icon_SnjorEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.snjorpl {
    background-image: url("../media/icon/Icon_SnjorPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.vindur {
    background-image: url("../media/icon/Icon_vindur.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.vinduren {
    background-image: url("../media/icon/Icon_vindurEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.vindurpl {
    background-image: url("../media/icon/Icon_vindurPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.hjol {
    background-image: url("../media/icon/Icon_Hjol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.hjolen {
    background-image: url("../media/icon/Icon_HjolEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.hjolpl {
    background-image: url("../media/icon/Icon_HjolPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.fiskur {
    background-image: url("../media/icon/Icon_Fiskur.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.fiskuren {
    background-image: url("../media/icon/Icon_FiskurEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.fiskurpl {
    background-image: url("../media/icon/Icon_FiskurPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.bolti {
    background-image: url("../media/icon/Icon_Bolti.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.boltien {
    background-image: url("../media/icon/Icon_BoltiEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.boltipl {
    background-image: url("../media/icon/Icon_BoltiPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.byfluga {
    background-image: url("../media/icon/Icon_Byfluga.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.byflugaen {
    background-image: url("../media/icon/Icon_ByflugaEn.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}
.byflugapl {
    background-image: url("../media/icon/Icon_ByflugaPol.svg");
    background-repeat: no-repeat;
    background-position: 50% 25%;
}

.drop-links {
    margin-top: 5px;
    width: 100%;
    border-bottom: 1px solid #ffc822;
}

.drop-links a{
    color: var(--text);
}

.headcard-drop a{
    color: var(--text);
}

.headcard-drop p{
    font-size: .75rem;
}

.downfont {
    float: right;
    color: #ffc822;
    margin-top: 5px;
}

.backbutton {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
}
.backbuttonmenu {
    color: inherit;
    position: absolute;
    top: 19vh;
    left: 20px;
    padding: 0;
    border: none;
    font: inherit;
    background-color: transparent;
}
@media only screen and (min-width: 600px) {

    body {
        margin: auto;
        width: 400px;
        height: 70vh!important;
    }
    .litaspjald{
        height: 400px;
    }
    .mainwhite{
        padding-top: 300px;
    }
    .mainwhitegreen{
        padding-top: 350px;
    }
    .gulurheader{
        width: 100%;
    }
    .headerlogo{
        position: relative;
    }
    .backbuttonmenu{
        position: relative;
        top: -5vh;
    }
    .blarheader{
        width: 100%;
    }
    .jogaspjald {
        margin-top: 10px;
        width: 75px;
        height: 75px;
        border-radius: 10px;
    }
    .jogaspjald-stada {
        position: relative;
        height: 100px;
        width: 100px;
        top: -15vw;
    }

    .raudurheader{
        width: 100%;
    }

    .graennheader {
        width: 100%;
    }

}