@charset "UTF-8" !important;


nav ul li a:hover,
nav ul li a:visited:hover {
  background: #2581DC !important;
  color: #ffffff !important;
}


nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  color: #ffffff;
  text-decoration: none !important;
}

.brand {
  position: absolute;
  padding-left: 20px;
  float: left;
  line-height: 70px;
  text-transform: uppercase !important;
  font-size: 1.4em !important;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}

.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none !important;
}


header{
    width: 100%;
    height: 100vh;
    background-image: url(slike/ussr-space-program-laika.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: black;
    position: relative;
}

.headerInfo{
    position: absolute;
    right: 100px;
    top: 200px;
    width: 400px;
    height: auto;
    background-color: rgba(0, 0, 0, 0.8);
    animation: infoDolazak;
    animation-duration: 2s;
}

@keyframes infoDolazak{
    0% {right: 2000px;}
    100%{right: 100px;}
}

.headerInfo h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    width: 100%;
    background-color: darkred;
    color: white;
    padding: 10px;
    border-right: 10px solid white;
}

.headerInfo p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    color: white;
    padding: 20px;
}

#SR1{
    width: 100%;
    height: 120vh;
    position: relative;
    background-image: url(slike/sssr-space.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.SR2{
    position: absolute !important;
    width: auto;
    height: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    z-index: 1000 !important;
    
}

.SR2 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
}

.SR2 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    line-height: 40px;
    width: 60%;
}

#SR3{
    width: 100%;
    height: 80vh;
    background-color: white;
    display: grid;
    grid-template-columns: 40% 20% 40%;
    grid-template-rows: 85% 15%;
    grid-template-areas: 
        "textSR3 slikaSR3 textSR4"
        ". opisSR .";
       
}

.tekstSR3{
    padding: 10px;
    grid-area: textSR3;
}

.tekstSR4{
    padding: 10px;
    grid-area: textSR4;
}

.tekstSR3 h1{
    color: darkred;
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
}

.tekstSR3 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.tekstSR4 h1{
    color: darkred;
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
}

.tekstSR4 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaSR3{
    background-image: url(slike/sssr-scientist.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaSR3;
}

.opisSR{
    background-color: black;
    color: white;
    padding: 10px;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    grid-area: opisSR;
}

#SR4{
    margin-top: 50px;
    width: 100%;
    height: 60vh;
    background-color: black;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 100%;
    grid-template-areas: 
        "tekstSR5 slikaSR4";
}

.tekstSR5{
    padding: 10px;
    grid-area: tekstSR5;
    color: white;
}

.tekstSR5 h1{
    font-family: 'Fjalla One', sans-serif;
    color: white;
    font-size: 2em;
}

.tekstSR5 p{
    font-size: 1.5em;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.slikaSR4{
    background-image: url(slike/sssr-scientist2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    grid-area: slikaSR4;
}

#SR5{
    width: 100%;
    height: 40vh;
    background-color: darkred;
    color: white;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 100%;
    grid-template-areas: 
        ". tekstSR6 .";
}


.tekstSR6{
    grid-area: tekstSR6;
    padding: 10px;
}

.tekstSR6 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    text-align: center;
}

.tekstSR6 p{
    font-size: 1.5em;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    text-align: center;
    border-top: 4px solid white;
    padding-top: 10px;
}

#SR6{
    width: 100%;
    height: 60vh;
    background-color: black;
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 100%;
    grid-template-areas: 
        "slikaSR5 tekstSR7";
}

.slikaSR5{
    background-image: url(slike/sssr-satelite.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    grid-area: slikaSR5;
}

.tekstSR7{
    grid-area: tekstSR7;
    padding: 10px;
    color: white;
}

.tekstSR7 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
}

.tekstSR7 p{
    font-size: 1.5em;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

#SR7{
    margin: 150px auto;
    width: 100%;
    position: relative;
    height: 600px;
    background-color: rgba(0, 0, 0, 0.7);
    background-image: url(slike/sssr-scientist3-1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

.tekstSR8{
    position: absolute;
    width: 85%;
    height: 100%;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    left: 115px;
    line-height: 50px;
}

.tekstSR8 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
}

.tekstSR8 p{
    margin-top: 50px;
    font-size: 1.6em;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}




.mySlides{
    width: 100%;
}


.w3-content h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 1.5em;
}

#SR8{
    margin-top: 150px;
    width: 100%;
    height: 60vh;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 100%;
    grid-template-areas: 
        ". tekstSR9 slikaSR6 .";
}

.tekstSR9{
    grid-area: tekstSR9;
    border-right: 10px solid darkred;
    padding: 10px;
}

.tekstSR9 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    color: darkred;
}

.tekstSR9 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaSR6{
    background-image: url(slike/sssr-mir-space-station.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaSR6;
}


#SR9{
    margin-top: 150px;
    width: 100%;
    height: 70vh;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 100%;
    grid-template-areas: 
        ". slikaSR7 tekstSR10  .";
}

.tekstSR10{
    grid-area: tekstSR10;
    border-left: 10px solid darkred;
    padding: 10px;
}

.tekstSR10 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    color: darkred;
}

.tekstSR10 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaSR7{
    background-image: url(slike/sssr-soyuz45.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    grid-area: slikaSR7;
}

#SR10{
    margin-top: 100px;
    width: 100%;
    height: 50vh;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 100%;
    grid-template-areas: 
        ". tekstSR11 .";
}


.tekstSR11{
    grid-area: tekstSR11;
}

.tekstSR11 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    text-align: center;
}

.tekstSR11 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}


#SR11{
    width: 100%;
    height: 65vh;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    grid-template-areas: 
        "tekstSR12 tekstSR13";
}

.tekstSR12{
    grid-area: tekstSR12;
    background-color: black;
    color: white;
    padding: 20px;
}

.tekstSR12 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    text-align: center;
    border-bottom: 5px solid darkred;
}

.tekstSR12 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.tekstSR13{
    grid-area: tekstSR13;
    background-color: darkred;
    color: white;
    padding: 20px;
}

.tekstSR13 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    text-align: center;
}

.tekstSR13 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    margin-top: 70px;
}

#SR12{
    width: 100%;
    height: 100px;
    margin-top: 50px;
}

#SR12 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
    text-align: center;
}
.table-dark{
    margin: 50px auto;
    width: 80% !important;
    background-color: black !important;
}

#SR13{
    width: 100%;
    height: 200vh;
}


table{
    margin: 0 auto;
    background-color: black;
    color: white;
    width: 80%;
}

thead, td{
    width: 50%;
    text-align: left;
    border-bottom: 1px solid white;
}




/******************Space*******************/
canvas {
  position: relative !important;
  width: 100%;
  height: 100vh;
  background: #111a22;
     z-index: 100 !important;
}

#space{
    position: relative;
    z-index: 100 !important;
}
/******************Space-Kraj*******************/