/*default version*/
@font-face {
    font-family: 'Moderat';
    src: url('src/fonts/Moderat-Regular.otf') format('opentype');
    font-weight: 'regular';
}

/*bold version*/
@font-face {
    font-family: 'ModeratBold';
    src: url('src/fonts/Moderat-Bold.otf') format('opentype');
    font-weight: bold;
}


body {

    font-family: 'Moderat';
    font-weight: 'regular';
    color: rgb(71, 77, 164);
    cursor: none;
}

.bluefont{
color: rgb(71, 77, 164);
   transition-delay: 0.1s;
}
.whitefont{
    color:rgb(253, 247, 238);
    transition-delay: 0.1s;
}

html,
body {

    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(92, 184, 86);
}

h1 {
    font-family: 'ModeratBold';
    font-size: 6em;
    line-height: 0.9;
    pointer-events: none;
    -webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;
}

h2 {
    font-family: 'Moderat';
    font-size: 2.5em;
    line-height: 1.1;
    -webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;

}

h3 {
    font-family: 'ModeratBold'

}



li {
    list-style: none;
}


a {
    color: rgb(71, 77, 164);
     -webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;
}

p {
    font-family: 'Moderat';
}




.intro {
    height: 100%;
    width: 100%;
    margin: auto;

    display: table;
    background-size: cover;
    position: absolute;
    z-index: 100;

}

.intro .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
    height: auto;
    z-index: 1;


}

.content {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;



}

.contentimp {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 5em;



}





.MegaMouse {

    width: 3.5em;
    height: 3.5em;
/*        background: url(src/img/smiley.svg);*/
    background-size: 100%;
    background-repeat: no-repeat;
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: rgb(233, 219, 192);
    transition: width 0.05s ease-in, height 0.05s ease-in;
    z-index: 999;
}

.zoom {
    width: 5em !important;
    height: 5em !important;
    transition: width 0.05s, height 0.05s ease-in;

}

.MausBlue {
    background-color: rgb(24, 32, 62);
}

.MausGreen {
    background-color: rgb(233, 219, 192);
}

.MausBrown {
    background-color: rgb(220, 154, 115);
}

.MausBlueTwo {
    background-color: rgb(183, 146, 199);}


.Overlay {
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;

    position: fixed;
    pointer-events: none;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.0);
    z-index: 1000;
    overflow: hidden;

}

#paint {
    display: none;
}



@media only screen and (max-width: 600px) {
    .MegaMouse {
        display: none;
    }

    .Overlay {
        display: none;
    }

    body {
        cursor: auto;

    }

    h1 {
        font-family: 'ModeratBold';
        font-size: 4em;
        line-height: 0.9;
        padding: 20px;

    }

    contentimp {
        width: 90%;
        padding: 2em;
        margin: 2em;
    }

    p {
        padding: 20px;
    }

    h2 {
        padding-left: 20px;

    }

    h3 {
        padding-left: 20px;
    }



    .logosvg {
    max-width: 90%;
    height: 8em;
    margin-bottom: 4.7em;
    margin-top: 3.7em;
    margin-left:0;
    margin-right:0;

    background-image: url(src/img/simplemask_logo_blue.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
    overflow: visible;


/*     display: table-cell;*/
    vertical-align: middle;
}

}

.bttn {

    /*    max-width: 150px;*/
    /*    height: 30px;*/
    padding: .4em 1.4em;
    border: .11em;
    border-style: none;
    Border-radius: 22em;
    background-color: rgb(86, 163, 90);
    text-decoration: none;
    position: absolute;
    transform: translateX(-50%);

    top: 90%;
    cursor: none;

    font-size: 1, 5em;
}

.bttnblue {
    background-color: rgb(85, 90, 163);
    transition-delay: background .3s;
    color: rgb(253, 247, 238);
}

.bttngreen {
    background-color: rgb(86, 163, 90);
}

.bttnbrown {
    background-color: rgb(171, 131, 114);
}

.bttnbluetwo {
    background-color: rgb(85, 90, 163);
    transition-delay: background .3s;
    color:rgb(253, 247, 238);
}


.bttn:hover {
    background-color: white;
    color: white !important;
    transition-delay: 0 !important;
}






.colorcontainer {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}




}

.hold {
    transform: translateY(100%);

}

.holdBeige {
    transform: translateY(0%);

}

.show {
    transform: translateY(0%);
    transition: all 0.5s;

}

.adress {}

ul {
    margin-right: 0;
    padding-right: 0;
}

/*BACKGROUND*/
.colorchanger {

    width: 100%;
    height: 100%;
    display: inline-block;
    background-size: 200% 200%;
    transition: background-position 0.5s;
    background-position: top;

}

.brown {
    background-image: linear-gradient(to top, rgb(160, 116, 98) 50%, rgb(92, 184, 86) 0);
    background-position: bottom;
}

.blue {
    background-image: linear-gradient(to top, rgb(160, 116, 98) 50%, rgb(71, 77, 164) 0);
    background-position: top;
}

.green {
    background-image: linear-gradient(to top, rgb(92, 184, 96) 50%, rgb(71, 77, 164)0);
    background-position: bottom;
}

.bluetwo {
    background-image: linear-gradient(to top, rgb(92, 184, 96) 50%, rgb(71, 77, 164) 0);
    background-position: top;
}

.logosvg {
    max-width: 100%;
    height: 10em;
    margin-bottom: 4.7em;
    margin-top: 3.7em;
    margin-left:0;
    margin-right:0;

    background-image: url(src/img/simplemask_logo_blue.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: visible;


/*     display: table-cell;*/
    vertical-align: middle;
}

.logoblue {  background-image: url(src/img/simplemask_logo_blue.svg) !important;
transition-delay: 0.1S;}

.logowhite{  background-image: url(src/img/simplemask_logo_white.svg) !important; }

.logo {
    display:none;
}

.default {
    fill: rgb(253, 247, 238);
}