@font-face {
    font-family: BebasNeue;
    src: url(../BebasNeue-Regular.ttf);
  }

/* Have to be Thin, but don't have propper font.
@font-face {
font-family: BebasNeueThin;
src: url(../BebasNeue-Thin.ttf);
}
*/
html {
    overflow-x: hidden;
    max-width: 100%;
}
.body-main {
    margin:0px;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-width: 100vw;
    width: 100vw;
    overflow-x: hidden;
}

.body-main-dark {
    margin:0px;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-width: 100vw;
    width: 100vw;
    overflow-x: hidden;
	color: white;
	background-color: #242020;
}

.wrapper-main {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.cover2 {
    height: 450px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-image: url(../img/Workshop-6_3k.jpg);
    margin-top: -60px;
    padding-top: 47px;
}

.coverTalv {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    align-self: center;
    justify-content: center;
    background-color: #231f20;
    color: white;
    font-weight: 900;
    letter-spacing: 3px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    overflow-x: hidden;
}

#cog-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* so clicks pass through */
    z-index: 0; /* behind main content */
}

#cog-container div {
    filter: invert(100%) brightness(0.2);;
}

}
body.body-main-dark #cog-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

body.body-main-dark #cog-container div {
    filter: invert(0%);
}

.Cog1{
    position: absolute;
    top: 60%;
    left: 12%;
    background-image: url(../img/g40.png);
    background-repeat: no-repeat;
    height: 100px;
    width: 100px;
}

.Cog2{
    position: absolute;
    top: 3%;
    left: 1%;
    background-image: url(../img/g43.png);
    background-repeat: no-repeat;
    height: 300px;
    width: 300px;
    overflow-x: hidden;
}

.Cog3{
    position: absolute;
    top: 35%;
    right: 5%;
    background-image: url(../img/g37.png);
    background-repeat: no-repeat;
    height: 200px;
    width: 200px;
    overflow-x: hidden;
}

.Cog4{
    position: absolute;
    top: 0%;
    right: 0%;
    background-image: url(../img/g46.png);
    background-repeat: no-repeat;
    height: 169px;
    width: 342px;
    overflow-x: hidden;
}

.Talveperiood{
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    text-align: center;
    display:flex;
    width: 100%;
}

.pTalv{ 
    width: 100%;
    height: 30px;
    text-align: center;
}

.string1{
    font-family: BebasNeue;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    font-size: 52px;
    align-self: center;
    align-content: center;
    width: 80%;
}

.string2{ 
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    font-size: 30px;
    align-self: center;
    align-content: center;
    width: 80%;
}

.Talv1{
    flex-wrap: wrap;
    display:flex;
    font-weight: 900;
    height: 60px;
    margin-right: 10px;
    align-self: center;
    justify-content: end;
}

.Kuu1{
    font-family: BebasNeue; /* Thin */
    color: rgb(140, 140, 140);
    display:flex;
    font-weight: 100;
    height: 60px;
    margin: unset;
    align-self: center;
    justify-content: start;
}

.Meh1{
    display:flex;
    font-weight: 900;
    width: 550px;
    margin: unset;
    align-self: center;
}

.Space{
    display:flex;
    height: 10px;
    width: 270px;
    align-self: center;
    margin: unset;
}
.EEL{
    font-family: BebasNeue; /* Thin */
    display:flex;
    text-align: center;
    color: rgb(140, 140, 140);
    font-weight: 100;
    height: 40px;
    align-self: center;
    margin: unset;
}

.Too{
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-self: center;
    margin: unset;
}

.Too1{
    font-family: BebasNeue;
    display:flex;
    font-weight: 900;
    width: 158px;
    margin: unset;
    align-self: center;
    justify-content: center;
}
.Too2{
    font-family: BebasNeue; /* Thin */
    display:flex;
    color: rgb(140, 140, 140);
    font-weight: 100;
    margin: unset;
    align-self: center;
    justify-content: center;
}

.Orange{
    font-family: BebasNeue;
    display:flex;
    flex-wrap: wrap;
    color: #F05A28;
    font-weight: 900;
    font-size: 52px;
    text-align: center;
    align-self: center;
    margin: unset;
}

.mhdiv{
    display:flex;
    flex-flow: wrap;
    justify-content: space-between;
    margin: 0px;
    padding: 10px;

}

.hdiv1{
    width: 10px;
    height: 10px;
    margin-top: 50px;
    flex-shrink: 1;
}

.hlogo1 {
    display: block;
    flex-basis: 260px;
    width: 265px;
    height: 120px;
    background-image: url(../img/Logo-KRR-text-Big2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    margin: 30px;
    padding-top: 0px;
    filter: drop-shadow(3px 3px 2.5px #373737);
}

.hnav1{
    width: 10px;
    height: 10px;
    margin-top: 50px;
    flex-shrink: 1;
}

.main {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    padding: 10px;
    align-self: center;
    width: 100%;
}
.section1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    padding: 10px;
    align-self: center;
    width: 100%;
}

.s1-d1{
    display:flex;
    height: 50px;
    margin: 0;
}

.s1-d1:hover .phone{
    background-image: url(../img/phone-icon3b.png);
}

body.body-main-dark .s1-d1:hover .phone{
    background-image: url(../img/phone-icon3w.png);
}

.s1-d1:hover{
    color: #F05A28;
    
}

.s1-d2{
    display:flex;
    height: 50px;
    margin: 0;
}

.s1-d2:hover .location{
    background-image: url(../img/location-icon3b.png);
}

body.body-main-dark .s1-d2:hover .location{
    background-image: url(../img/location-icon3w.png);
}

.s1-d3{
    display:flex;
    justify-content: center;
    width: 330px;
    height: 50px;
    margin: 0;
}

.textI {
    width: 260px;   
    height: 30px;
    font-size: x-large;
    margin: 10px;
    align-self: center;
}

body.body-main-dark .textI:hover {
    color: #F05A28;
}

body.body-main-dark .textI {
    width: 260px;   
    height: 30px;
    font-size: x-large;
    margin: 10px;
    align-self: center;
	color: #8c8c8c;
}

.c-main2 {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    padding: 10px;
    align-self: center;
    align-content: normal;
    align-items: start;
    width: 50%;

}

.h1 {
    width: 100%;
    height: 30px;
    font-size: 48px;
    text-align: center;
}

.h2 {
    width: 100%;
    height: 30px;
    font-size: 32px;
    text-align: left;

}
.h2a {
    width: 100%;
    height: 30px;
    font-size: 32px;
    text-align: center;
    color: #F05A28;

}

.h2m {
    width: 100%;
    height: 30px;
    font-size: 32px;
    height: 100px;
}

.p1 {
    width: 345px;
    height: 30px;
    font-size: x-large;
    
}
.pT {
    width: 100%;
    text-align: left;
    font-size: 24px;
}

.hlogoX {
    display: block;
    width: 270px;
    height: 120px;
    background-image: url(../img/Logo-KRR-text-Big-Tr.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    margin: 10px;
    padding-top: 0px;
    filter: drop-shadow(2px 2px 3px #F05A28);
}

.map1{
    display:flex;
    flex-basis: 500px;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
}

.mapI{
    display:flex;
    align-self: center;
    width: 100vw;
    background-position: center;
}

.gmap{
    width:100vw;
    height:450px; 
}

.phone{
    width: 50px;
    height: 50px;
    background-image: url(../img/phone-icon3.png);
    align-self: center;
}

.location{
    width: 50px;
    height: 50px;
    background-image: url(../img/location-icon3.png);
}

.facebook{
    width: 50px;
    height: 50px;
    background-image: url(../img/facebook-icon3.png);
    background-repeat: no-repeat;
    padding-left: 5px;
}

.facebook:hover{
    background-image: url(../img/facebook-icon3b.png);   
}

body.body-main-dark .facebook:hover{
    background-image: url(../img/facebook-icon3w.png);   
}

.facebook:active{
    filter: drop-shadow(0px 0px 2px black);
   
}

.insta{
    width: 50px;
    height: 50px;
    background-image: url(../img/insta-icon3.png);
    background-repeat: no-repeat;
    padding-left: 5px;
}

.insta:hover{
    background-image: url(../img/insta-icon3b.png);
}

body.body-main-dark .insta:hover{
    background-image: url(../img/insta-icon3w.png);
}

.insta:active{
    filter: drop-shadow(0px 0px 2px black);
}


a:link {
    text-decoration: none;
    color: black;
}
 
a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
}
  
a:hover {
    color: #F05A28;
}
  
a:active {
  filter: drop-shadow(0px 0px 2px black);
}
/* Tablet Version 1000*/

@media only screen and (max-width: 1000px) {



}

/* Mobile Version 610*/

@media only screen and (max-width: 610px) {

    .wrapper-main {
        width: 100%;
    }
    .c-main2 {
        width: 100%;
    }

    .string1{ 
        font-size: 30px;
        width: 100%;
    }
    
    .string2{ 
        font-size: 18px;
        width: 60%;
    }

    .Talv1{
        flex-wrap: wrap;
        display:flex;
        font-weight: 900;
        height: 40px;
        width: 80%;
        margin: unset;
        align-self: center;
        justify-content: center;
    }
    
    .Kuu1{
        color: rgb(140, 140, 140);
        display:flex;
        font-weight: 100;
        height: 40px;
        width: 80%;
        margin: unset;
        align-self: center;
        justify-content: center;
    }
    
    .Meh1{
        display:flex;
        font-weight: 900;
        width: 350px;
        margin: unset;
        align-self: center;
    }

    .Too1{
        display:flex;
        font-weight: 900;
        height: 40px;
        width: 158px;
        margin: unset;
        align-self: center;
        justify-content: center;
    }

    .Too2{
        display:flex;
        color: rgb(140, 140, 140);
        font-weight: 100;
        height: 60px;
        width: 390px;
    }
    
    .Orange{
        font-size: 30px;
    }
}