/*#region algus */
body {
    display: block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: hidden;
}

.preloader {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: dimgray;
    z-index: 9999;
}

.preloaderFront {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 50%;
    background-color: lightgray;
    animation: preloaderFrontAnimation 3s infinite;
}

@keyframes preloaderFrontAnimation {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    50% {
        transform: scale(2);
        opacity: 0;
    }

    100% {
        transform: scale(0);
        opacity: 1;
    }
}

.preloaderBack {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 40px;
    width: 40px;
    border: none;
    border-radius: 50%;
    background-color: lightgray;
    animation: preloaderBackAnimation 3s infinite;
}

@keyframes preloaderBackAnimation {
    0% {
        transform: scale(2);
        opacity: 0;
    }

    50% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/*#endregion */
/*#region aside */

aside {
    display: flex;
    flex: auto;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    box-shadow: rgba(0, 0, 0, 0.7) 10px 0 20px;
    background-color: rgba(255, 255, 255, 0.85);
    transition-duration: 4s;
    z-index: 1000;
    overflow: hidden;
    transition: 2s;
}

.asideDefault {
    left: 100%;
    transition-duration: 2s;
    transition-delay: 1s;
}

.asideOut {
    left: 0;
    transition-duration: 2s;
}

.sulgemiseNupp {
    position: absolute;
    display: block;
    height: 32px;
    width: 32px;
    top: calc((100%-32px)/2);
}

    .sulgemiseNupp img {
        width: 32px;
        height: 32px;
    }

.lisaInfo {
    position: absolute;
    left: 8%;
    height: 100%;
    width: 90%;
    margin: 0 0;
    padding: 0 1%;
    margin-right: 5%;
    overflow: hidden;
    overflow-y: scroll;
}

.sisu {
    display: block;
    position: absolute;
    padding-right: 5%;
}

.kiri {
    background-image: url("kiri.svg");
    background-size: cover;
    min-height: 100%;
    min-width: 100%;
}

    .kiri h3 {
        margin: 2% 30% 2%;
    }

    .kiri p {
        margin-right: 3%;
    }
#arhiiv {
	height: 100%;
	width: 100%;
	margin: 0 0;
	padding: 0 0;
	overflow: hidden;
}
embed {
	height: 768px;
	width: 1250px;

}
/*#endregion */
/*#region sectionOmadused */
.above {
    top: -100%;
}

.center {
    top: 0;
    left: 0;
    transition-duration: 2s;
}

.below {
    top: 100%;
    transition-duration: 2s;
}

.visible {
    opacity: 1;
    transition-duration: 2s;
}

.longVisible {
    opacity: 1;
    transition-duration: 6s;
}

.invisible {
    opacity: 0;
    transition-duration: 2s;
}

.longInvisible {
    opacity: 0;
    transition-duration: 4s;
}

.delay {
    transition-delay: 2s;
}

.nodisplay {
    display: none;
}

.display {
    display: normal;
}

.scroll {

    overflow-y: scroll;

}
/*#endregion */
/*#region suuremadJaotused */

.mainWindow {
    position: absolute;
    display: flex;
    justify-content: space-between;
    height: 100vh;
    width: 100vw;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background-color: rgb(80, 90, 96);
    background-image: url("tagaTaust.svg");
    background-size: cover;
}

.farBack {
    position: relative;
    height: 100vh;
    width: 100vw;
    max-height: 768px;
    max-width: 1366px;
    margin: auto;
    padding: 0 0 0 0;
    background-image: url(farBack.webp);
    background-position-y: bottom;
    background-position-x: left;
    box-shadow: rgba(26, 26, 26, 0.9) 0 25px 40px;
    overflow: hidden;
}

.title {
    background-image: url("title.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

section {
    top: 0;
    left: 0;
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: hidden;
}

.container {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    height: 100%;
    width: 100%;
    top: 0;
}


/*#endregion */
/*#region textStyleDefaults */
h1 { /*pealkirjad*/
    color: rgb(49, 49, 49);
    margin: 0 20%;
    text-align: center;
    font-family: 'Josefin Sans';
}

h2 { /*suurem tekst*/
    color: rgb(49, 49, 49);
    margin: 0 0;
    text-align: center;
    font-family: 'Josefin Sans';
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2rem;
}

span {
    white-space: nowrap;
}



h4 { /*suurema teksti em jutt*/
    margin: 2% 2%;
    padding: 2%;
    font-family: 'Josefin Sans';
    font-size: 1.5rem;
}



.author {
    margin: 0 30%;
}

h3 { /*tsitaadi autor*/
    font-family: 'Playfair Display';
    font-size: 2rem;
    text-align: center;
    border: 2px solid black;
    border-left: none;
    border-right: none;
}

h5 { /*suurem tekst tsitaat*/
    background-size: cover;
    text-align: left;
    font-family: 'Playfair Display';
    font-size: 2rem;
    line-height: 3rem;
}

p {
    margin: 0;
    font-family: 'Josefin Sans';
    padding-bottom: 2%;
}

pre {
    width: 100% inherit;
    font-family: 'Josefin Sans';
}

li {
    list-style: none;
}

a:link, a:visited {
    color: rgb(71, 169, 120);
    font-weight: 700;
}

span {
    white-space: nowrap;
}
/*#endregion */
/*#region backgroundInformation */
.herder {
    background-image: url(farBack.webp);
    background-position-y: bottom;
    background-position-x: left;
}

.marx {
    background-image: url(marx.jpg);
    background-size: cover;
    background-position: bottom;
}

.tormis {
    background-image: url(tormis.jpg);
    background-size: cover;
    background-position: bottom;
}

.enneTeist {
    background-image: url(enneTeist.jpg);
    background-size: cover;
    background-position: bottom;
}

.piimjasUdu {
    background-color: rgba(228, 228, 228, 0.7);
}

.blueMist {
    background: rgba(115, 164, 212, 0.80);
}

.helePiimjasUdu {
    background: rgba(165, 165, 165, 0.44);
}

.laulupidu {
    background-image: url(laulupidu.jpg);
    background-size: cover;
    background-position: bottom;
}

.herderHupel {
    background-image: url(herderHupel.jpg);
    background-size: cover;
    background-position: bottom;
}

.riia {
    background-image: url(riia.webp);
    background-size: cover;
    background-position: bottom;
}

.talupojadPidu {
    background-image: url(talupojadPidu.jpg);
    background-size: cover;
    background-position: top;
}

.liivimaaKaart {
    background-image: url(liivimaaKaart.jpg);
    background-size: cover;
    background-position: bottom;
}

.liivimaaKaartB {
    background-image: url(liivimaaKaartB.webp);
    background-size: cover;
    background-position: bottom;
}

.kasikiri {
    background-image: url(kasikiri.jpg);
    background-size: cover;
    background-position: bottom;
}

.kasikiri2 {
    background-image: url(kasikiri.jpg);
    background-size: cover;
    background-position: top;
}

.kogu {
    background-image: url(kogu.jpg);
    background-size: cover;
    background-position: bottom;
}

.yleskutse {
    background-image: url(yleskutse.jpg);
    background-size: cover;
    background-position: top;
}

.kaardirakendus {
    background-color: rgb(49, 49, 49);
}

    .kaardirakendus img {
        height: 100%;
    }

.metsikud {
    background-image: url(metsikud.jpg);
    background-size: cover;
    background-position: top;
}

.threeCover {
    background-color: rgb(57, 77, 57);
    opacity: 0.8;
}

.endPage {
    padding: 30%;
    background-color: rgb(54, 60, 83);
    opacity: 0.8;
}

.toredadMaakad {
    background-image: url(toredad-maakad.gif);
    background-size: cover;
    background-position: top;
}

.viimane {
    background-image: url(viimane.jpg);
    background-size: cover;
    background-position: bottom;
}
/*#endregion */
/*#region nuppAlla */

.nuppAlla {
    position: absolute;
    display: block;
    top: 95%;
    left: calc((100%-32px)/2);
    height: 32px;
    width: 32px;
    transition: 1s ease;
}

    .nuppAlla img {
        opacity: 0.8;
    }

    .nuppAlla:hover {
        opacity: 0.7;
        transform: scale(1.1);
    }

/*#endregion */
.tagasiyles {
    position: absolute;
    display: block;
    top: 1%;
    left: calc((100%-32px)/2);
    height: 32px;
    width: 32px;
    transition: 1s ease;
    z-index: 9000;
}

tagasiyles img {

    opacity: 0.8;

}

.tagasiyles:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

/*#region alaJaotused */
.valgeRuut {
    background-color: rgba(255, 255, 255, 0.95);
    margin: auto 30%;
    padding: 0.5% 0.5%;
    box-shadow: rgba(0, 0, 0, 0.7) 10px 10px 20px;
}

.valgeRuut__inner {
    padding: 15% 11%;
    border: 2px solid black;
    border-style: double;
}

.ruut {
    background-image: url("jutumargid.svg");
    background-position-x: top;
    background-position-y: left;
    background-repeat: no-repeat;
    background-size: 300px 300px;
    margin: auto 20%;
}

    .ruut img {
        float: left;
    }

.double {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1% 1%;
    margin: 5% 5%;
    border: 2px solid black;
    box-shadow: rgba(0, 0, 0, 0.7) 10px 10px 20px;
}

.triple {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 0;
    padding: 0 0;
}

.triple__child {
    display: block;
    height: auto;
    width: 33%;
    margin: auto 2%;
    object-fit: contain;
}

.triple__child--vahe {
    width: 2%;
}

.triple__child__portrait {
    height: 100%;
    width: 562px;
    margin: 1% 0;
    background-position-x: center;
    background-size: contain;
    background-repeat: no-repeat;
}


/*#endregion */

/*#region name */

.text--top {
    vertical-align: top;
    padding: 2% 2%;
}

.herderPortree--liikuv {
    height: 500px;
    width: 399px;
    background-image: url("JGH.gif");
}

.herderPortree {
    height: 349px;
    width: 276px;
    margin: 0 0;
    padding: 0 0;
    background-image: url("JGH.gif");
    background-size: cover;
    transform: scaleX(-1);
}

.hupelPortree {
    height: 349px;
    width: 276px;
    margin: 0 0;
    padding: 0 0;
    background-image: url("AH.gif");
    background-size: cover;
    transform: scaleX(-1);
}

. /*#endregion */