:root
{		
	--color-vis-gis:            		hsla(300, 50%, 40%, 1);
	--color-vis-gis-08:         		hsla(300, 50%, 40%, 0.8);
	--color-vis-gis-05:         		hsla(300, 50%, 40%, 0.5);
	--color-vis-gis-02:         		hsla(300, 50%, 40%, 0.2);

	--main-color:               		var(--color-vis-gis);

    --text-color:                   	#000;

	--headline-text-color:          	var(--color-vis-gis);

    --menu-background-color:        	var(--color-vis-gis-05);
	
	--header-box-headline-text-color: 	#FFF;
    --header-box-headline-background-color: var(--color-vis-gis-08);

	--map-filter-brightness: 			80%;
	--map-adressbox-background-color: 	#888;

    --impressum-background-color: 		#777;
    --dse-background-color: 			#666;

    --splashscreen-background-color: 	var(--main-color);
}


body
{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: sourcesanspro-light, Arial, Helvetica, sand-serif;
    font-size: calc(12px + 0.7vw);
    color: #FFF;
    overflow: hidden;  /* will be set to overflow-y:scroll after splashscreen */
    -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 640px)
{
    body
    {
        font-size: calc(12px + 1.2vw);
    }
}
@media (min-width: 1280px)
{
    body
    {
        font-size: 22px;
    }
}


*
{
    box-sizing: border-box;
    color: var(--text-color);
}

h1,h2,h3
{
    margin: 0px;
    color: var(--headline-text-color);
    font-family: sourcesanspro-thin;
    user-select: none;
    word-wrap: break-word;
}

p
{
    margin: 5px;
    color: var(--text-color);
    user-select: none;
}

a
{
    font-family: "sourcesanspro-regular";
    text-decoration: none;
    cursor: pointer;
}
a:hover
{
    text-decoration: underline;
}

b
{
    font-family: 'sourcesanspro-regular' !important;
}

/* ====== splashscreen ======= */
.splashscreen
{
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-vis-gis);
    background-color: var(--splashscreen-background-color);
    z-index: 10000;
    transition: opacity 1s ease-in-out;
}
.splashscreen.fadeout
{
    opacity: 0;
}

.splashscreen img
{
    width: 40%;
    max-height: 40%;
    transition: all .5s ease-in-out;
    opacity: 0;
}
.splashscreen img.fadein
{
    opacity: 1;
}
.splashscreen img.fadeout
{
    opacity: 0;
}
@media (max-width: 480px)
{
    .splashscreen img
    {
        width: 80vw;
    }
}

/* ====== logo ======= */
.img.logo
{
    background-image: url("../img/vis.gis.logo.svg");
    filter: drop-shadow(3px 3px 6px #FFF);
    position: absolute;
    left: 40px;
    top: 20px;
    height: 15vh;
    width: 100%;
    max-width: 40vw;
    z-index: 1000;
	background-repeat: no-repeat;
    background-size: contain;
}
@media (max-width: 800px)
{
    .img.logo
    {
        left: 20px;
    }
}
@media (max-width: 480px)
{
    .img.logo
    {
        left: 10px;
        top: 10px;
        max-width: 50vw;
    }
}


/* ====== boxes ======= */
.box
{
    position: relative;
    width: 100vw;
    xoverflow-x: hidden;
    xoverflow-y: visible;
}

/* === contact box  */

.box.contact
{
    width: 100vw;
    height: 60vh;
    min-height: 400px;
	background-color: var(--contact-box-background-color);
    clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
}
/* === map */
#map
{
    position: absolute;
    right: 0px;
    width: 75vw;
    max-width: calc(100vw - 180px);
    min-width: calc(100vw - 350px);
    height: 100%;
}
#map .leaflet-tile-pane
{
  -webkit-filter: grayscale(100%) brightness(var(--map-filter-brightness));
  filter: grayscale(100%) brightness(var(--map-filter-brightness));
}
#map-adressbox
{
    position: absolute;
    height: 100%;
    width: 25vw;
    min-width: 180px;
    max-width: 350px;
    bottom: 0px;
    float: left;
    text-align: right;
    padding: 10vh 2vw 0vh 0vw;
    z-index: 1000;
    overflow: hidden;
	background-color: var(--map-adressbox-background-color);
}
#map-adressbox img
{
    width: 70%;
    max-width: 200px;
}
#map-adressbox *
{
	color: #FFF;
    font-size: 80%;
    line-height: 100%;
}
#map-adressbox a
{
    font-family: "sourcesanspro-regular";
    display: block;
    line-height: 140%;
}


/* === impressum box */

.box.impressum
{
    padding: 0 5vw 0 7vw;
    width: 100vw;
	max-height: 0px;
	overflow: hidden;
	transition-duration: 0.5s;
	background-color: var(--impressum-background-color);
	margin-top: -2px;
}
.box.impressum *
{
    color: #FFF;
    font-size: 90%;
}

.box.impressum p
{
    margin-left: 0px;
    margin-right: 0px;
}

.box.impressum h1
{
    font-family: "sourcesanspro-regular";
    font-size: 120%;
    margin-bottom: 10px;
    margin-left: -2vw;
}
.box.impressum h2
{
    font-family: "sourcesanspro-regular";
}

.box.impressum.open
{
    padding: 1vh 5vw 1vh 7vw;
    max-height: 700px;
}

/* === dse box */

.box.dse
{
    padding: 0 5vw 0 7vw;
    width: 100vw;
	max-height: 0px;
	overflow: hidden;
	transition-duration: 0.5s;
	background-color: var(--dse-background-color);
}
.box.dse p
{
    color: #FFF;
    font-size: 90%;
}
.box.dse h1
{
    color: #FFF;
    font-size: 120%;
    font-family: "sourcesanspro-regular";
    margin-bottom: 10px;
    margin-left: -2vw;
}
.box.dse h2
{
    color: #FFF;
    font-size: 100%;
    font-family: "sourcesanspro-regular";
}
.box.dse h3
{
    color: #FFF;
    font-size: 90%;
    font-family: "sourcesanspro-regular";
    text-align: left;
}

.box.dse h2:first-child
{
    margin-left: -2vw;
}
.box.dse ul h2:first-child
{
    margin-left: unset;
}

.box.dse.open
{
    padding: 1vh 5vw 1vh 7vw;
    max-height: 2000px;
}

/* === footer box  */

.box.footer
{
    width: 100vw;
    height: fit-content;
	background-color: var(--contact-box-background-color);
}



/* ====== header ======== */

.heroimage
{
    transform: unset;
    max-height: 70vh;
    position: relative;
}
.heroimage .img
{
    transform: unset;
    filter: grayscale(100%);
    background-image: url("../img/hero.jpg");
}
.heroimage::after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 30%;
    top: 71%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    xbackground: green;
}

.box.header .headline
{
    top: 35vh;
    z-index: 100;
}
.box.header .headline h1
{
    font-size: 200% !important;
    font-weight: lighter !important;
    font-family: "nasalization" !important;
}

.box.header .img.pin
{
    position: absolute;
    top: 20vh;
    right: 0;
    width: 43vw;
    height: 38vw;    
    min-width: calc(430px * 0.8);
    min-height: calc(380px * 0.8);    
    background-image: url("../img/vis.gis.pinpath2.svg");
    background-repeat: no-repeat;
    background-position-x: 10vw;
    filter: drop-shadow(3px 3px 9px #FFF);
}



/* ====== blocks ======== */

/* === intro */

.block.intro
{
    width: 70vw;
    text-align: center;
    font-size: 160%;
    line-height: 150%;
    margin-top: -42vh;
}


/* === features */

.img.features
{
    position: relative;
    width: 30vw;
    height: 60vh;
    min-width: 200px;
    min-height: 250px;
    float: left;
    background-image: url("../img/features.jpg");
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    shape-outside: polygon(0 0, 100% 50%, 0 100%);
    shape-margin: 10px;
    margin-left: -5vw
}
.img.features::after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: calc(175px * 0.8);
    height: calc(285px * 0.8);
    top: 30%;
    left: 30%;
    background-image: url("../img/vis.gis.pinpath.svg");
    background-repeat: no-repeat;
    filter: drop-shadow(3px 3px 9px #FFF);
}


/* === benefits */

.img.benefits
{
    position: relative;
    width: 30vw;
    height: 30vw;
    min-width: 200px;
    min-height: 200px;
    float: right;
    background-image: url("../img/benefits.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: circle(48% at 50% 50%);
    -webkit-clip-path: circle(48% at 50% 50%);
    shape-outside: circle(50% at 50% 50%);
    shape-margin: 20px;
    margin-right: -10vw
}
.img.benefits::after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: calc(80px * 0.8);
    height: calc(140px * 0.8);
    top: calc(50% - 100px);
    left: calc(50% - 30px);
    background-image: url("../img/vis.gis.pin.svg");
    background-repeat: no-repeat;
    filter: drop-shadow(3px 3px 9px #FFF);
}

.block.benefits .bulletlist
{
    float: unset;
    margin-left: 5vw;
}


/* === usecases */

.block.usecases
{
    margin-bottom: 10vh !important;
}

.block.usecases h2
{
    text-align: right
}

.block.usecases .bulletlist
{
    width: calc(100% - 28vw)
}

.img.usecases
{
    position: relative;
    width: 30vw;
    height: 35vw;
    min-width: 200px;
    min-height: 240px;
    float: left;
    background-image: url("../img/usecases.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: polygon(50% 3%, 97% 25%, 97% 75%, 50% 97%, 3% 75%, 3% 25%);
    -webkit-clip-path: polygon(50% 3%, 97% 25%, 97% 75%, 50% 97%, 3% 75%, 3% 25%);
    shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    shape-margin: 10px;
    margin-left: -5vw
}
.img.usecases::after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: calc(80px * 0.8);
    height: calc(140px * 0.8);
    top: calc(50% - 100px);
    left: calc(51% - 30px);
    background-image: url("../img/vis.gis.pin.svg");
    background-repeat: no-repeat;
    filter: drop-shadow(3px 3px 9px #FFF);
}


@media (max-width: 800px)
{
    .img.features {
        margin-left: -10vw;
    }

    .img.benefits {
        margin-right: -10vw;
    }

    .img.benefits:after {
        top: 15%;
        left: calc(50% - 15px);
        width: calc(80px * 0.5);
        height: calc(140px * 0.5);
    }

    .img.usecases {
        margin-left: -10vw;
    }

    .img.usecases:after {
        top: 20%;
        left: calc(50% - 15px);
        width: calc(80px * 0.5);
        height: calc(140px * 0.5);
    }

    .headline.usecases h1 {
        font-size: 300% !important;
    }  

    .block.usecases h2
    {
        text-align: center;
    }

}

@media (max-width: 480px)
{
    .box.header .headline {
        width: 100vw;
        font-size: 110%;
        top: 48vh;
    }
    
    .block.intro {
        font-size: 120%;
        width: 90vw;
    }
    .block {
        width: 80vw;
    }
    
    .box.main .headline {
        margin: 0px;
        padding: 0px;
        font-size: 100%;
    }

    .bulletlist {
        width: 100%;
        float: unset;
    }
        
}


/*  === gui elements ================================================ */
/*  ================================================================= */


/* ====== hero image ======= */

.heroimage
{
	transform: skew(0,-2deg);
	overflow: hidden;
	margin-top: -2vw;
}

.heroimage .img
{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	transform: skew(0,2deg);
	margin-bottom: -2vw;
    height: 85vh
}


/* ====== header box ======= */

.box.header
{
    height: 100vh;
    margin-bottom: 15vh;
}

.box.header .headline
{
    position: absolute;
    left: 0px;
    top: 30vh;
    width: auto;
    padding: 3vh 5vw 5vh 3vw;
    margin-top: 0px;
    border: unset;
    text-align: center;
	transform: skew(0,-2deg);
	color: var(--header-box-headline-text-color);
    background-color: var(--header-box-headline-background-color);
}
.box.header .headline *
{
	color: var(--header-box-headline-text-color);
}
.box.header .subheadline
{
    position: absolute;
    right: 0px;
    top: 80vh;
    width: auto;
    padding: 20px 60px 20px 60px;
    border: unset;
	transform: skew(0,-2deg);
    background-color: var(--header-box-subheadline-background-color);
}
.box.header .subheadline *
{
	color: var(--header-box-subheadline-text-color) !important;
}

.box.header h1
{
    font-size: 160% !important;
    text-shadow: unset !important;
}
.box.header h2
{
    font-size: 120% !important;
    text-shadow: unset !important;
}


/* ====== headlines ======= */

.box .headline
{
    position: relative;
    width: 60vw;
    padding: 3vh 6vw 3vh 6vw;
    margin: 10vh 0vh 0vh 0vh;
    border: unset;
	transform: skew(0,-2deg);
    background-color: var(--headline-background-color);
    color: var(--headline-text-color);
    font-family: mosk-regular;
    font-size: 140%;
}

.box .subheadline
{
    position: relative;
    width: 80vw;
    float: right;
    padding: 20px 60px 20px 60px;
    margin: -3vh 0vh 10vh 20vh;
    border: unset;
	transform: skew(0,-2deg);
    background-color: var(--subheadline-background-color);
    color: var(--subheadline-text-color);
}

.box .subheadline + .block
{
  clear: both;
}


/* ====== blocks ======= */

.block
{
    position: relative;
    width: 70vw;
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 5vh;
    text-align: justify;
}
.block p
{
    margin-bottom: 10px;
}
.block .label
{
    padding: 2vh 2vw 10vh 2vw;
    margin: 0 1vw 1vh 5px;
    float: left;
    width: fit-content;
    height: fit-content;
    background-color: var(--label-background-color);
    color: var(--label-text-color);
    font-size: 140%;
    font-family: mosk-regular;
}
.block .label.right
{
    margin: 0 5px 1vh 1vw;
    float: right;
}


/* ====== buttons ======= */

.button
{
	display: inline-block;
    position: relative;
    padding: 0px 20px 0px 20px;
    height: 30px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(33,33,33,.1);
    transition: box-shadow .2s; 
}
.button:hover
{
    box-shadow: 0 0 20px rgba(33,33,33,.4);
}
.button:active
{
    transition: box-shadow .01s;
    box-shadow: 0 0 10px rgba(33,33,33,.8);
}


/* ====== lists ======== */

ul
{
    list-style-position: inside;
    text-align: left;
    margin-left: 10vw;
}

li
{
    line-height: 1.4em;
    margin-bottom: 1em;
}

/* checkmark list */
ul.checkmark
{
    list-style: none;
    margin-left: -3vw;
    line-height: 2em;
    text-align: center;
}
ul.checkmark li:before
{
  font-size: 120%;
  font-weight: bold;
  content: "\2713";
  margin-right: 10px;
}

/* folding list */
ul.folding
{
    list-style: none;
    list-style-position: inside;
    padding-left: 0px;
    margin-left: 0px;
    margin-top: 5px;
    margin-bottom: 0px;
}

ul.folding li
{
    overflow: hidden;
    max-height: 30px;
    transition-duration: 1s;
    margin-bottom: 5px;
}
ul.folding li:before
{
    transition-duration: 1s;
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path style="fill:white" d="M0 128.032v255.93c0 28.425 34.488 42.767 54.627 22.627l128-127.962c12.496-12.496 12.497-32.758 0-45.255l-128-127.968C34.528 85.305 0 99.55 0 128.032zM160 256L32 384V128l128 128z"/></svg>');
    display: block;
    width: 10px;
    height: 20px;
    position:relative;
    left: 10px;
    margin-top: -5px;
}

ul.folding li.open
{
    max-height: 800px;  /* workaround as height:auto does not work */
}
ul.folding li.open:before
{
    transition-duration: 0.5s;
    transform: rotate(90deg);
    transform-origin: 5px 13px;
}
 
ul.folding li *
{
    margin-left: 30px;
}
ul.folding li h2:first-child
{
    margin: -20px 0 5px 30px !important;
}



/* ======  grid ======= */

.grid
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
}

.grid-cell
{
    flex: 0 0 auto;
    margin: 10px;
}

.grid-cell.header
{
    width: 1100px;
}
@media (max-width: 1140px)
{
    .grid-cell.header
    {
        width: 760px;
    }
}
@media (max-width: 750px)
{
    .grid-cell.header
    {
        width: 380px;
    }
}


/* ====== menu ======= */

.menu
{
    display: flex; 
    flex-direction: row;
    position: fixed;
    right: 0px;
    top: 0px;
    padding: 2px 20px 2px 20px;
    transition: background-color 0.5s;
    z-index: 1000;
    background-color: var(--menu-background-color);
}
.menu *
{
    color: rgba(255,255,255,1);
    font-family: sourcesanspro-regular;
}
.menu .item
{
    position: relative;
    display: inline-block;
    width: fit-content;
    margin: 0px 10px 0px 10px;
    float: right;
    cursor: pointer;
}
.menu .item:hover
{
    text-decoration: underline;
}
.menu .item.selected
{
    border-bottom: 2px solid white;
}
.menu .item.selected:hover
{
     text-decoration: none;
}
.menu.background-blue
{
    background-color: var(--header-box-subheadline-background-color);
}
.menu-button
{
    position: fixed;
    top: 0px;
    right: 0px;
    display: none;
    height: 40px;
    width: 40px;
    z-index: 1001;
    color: white;
    cursor: pointer;
    background-color: var(--menu-background-color);
}
@media (max-width: 640px)
{
    .menu-button
    {
        display: block;
    }
    .menu
    {
        flex-direction: column;
        top: 40px;
        right: -200px;
        transition: all 0.5s;
    }
    .menu.open
    {
        right: 0px;
    }
    .menu .item
    {
        margin: 3px 10px 3px 10px;
    }
}


/* menu icon animation */

.hamburger {
  padding: 8px 5px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: #FFF;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
.hamburger:hover { opacity: 0.7; }
.hamburger.is-active:hover { opacity: 0.7; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after { background-color: #FFF; }

.hamburger-box {
  width: 30px;
  height: 20px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 30px;
height: 4px;
background-color: #FFF;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; }

.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s 0.13s linear; }
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important; }
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(-45deg); }



/* ===== vis.gis specific ====== */
/* at the end to overwrite defaults */

.box.main .headline
{
    width: unset !important;
    text-align: center;
    transform: unset !important;
}
.box.main .headline h1
{
    font-size: 350%;
    font-weight: lighter;
    font-family: "nasalization";
    opacity: 90%;
}

.box.main h2
{
    margin-bottom: 20px;
    text-align: center;
}

.box.main h3
{
    font-family: "sourcesanspro-regular";
    color: var(--main-color);
}

li
{
    margin-bottom: 0px;
}
li::before
{
    color: var(--main-color);
    font-size: 150% !important;
}
ul
{
    margin-top: 0px;
}

.bulletlist
{
    float: right;
    width: calc(100% - 25vw)
}
.bulletlist ul
{
    text-align: left;
}

.leaflet-popup-content-wrapper a
{
	color: #666;
}


/*  === fonts ====================================================== */
/*  ================================================================ */


/*  sourcesanspro ======== */

@font-face {
    font-family: 'sourcesanspro-regular';
    src: url('fonts/sourcesanspro.eot');
    src: url('fonts/sourcesanspro.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-bold';
    src: url('fonts/sourcesanspro-bold.eot');
    src: url('fonts/sourcesanspro-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-light';
    src: url('fonts/sourcesanspro-light.eot');
    src: url('fonts/sourcesanspro-light.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-thin';
    src: url('fonts/sourcesanspro-extralight.eot');
    src: url('fonts/sourcesanspro-extralight.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*  mosk =========== */

@font-face {
    font-family: 'mosk-regular';
    src: url('fonts/MoskNormal400.eot');
    src: url('fonts/MoskNormal400.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskNormal400.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mosk-bold';
    src: url('fonts/MoskBold700.eot');
    src: url('fonts/MoskBold700.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskBold700.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mosk-light';
    src: url('fonts/MoskLight300.eot');
    src: url('fonts/MoskLight300.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskLight300.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mosk-thin';
    src: url('fonts/MoskThin100.eot');
    src: url('sMoskThin100.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskThin100.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*  FontAwesome =========== */

@font-face {
  font-family: 'awesome-light';
  font-style: normal;
  font-weight: 300;
  font-display: auto;
  src: url("fonts/fa-light-300.eot");
  src: url("fonts/fa-light-300.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-light-300.woff") format("woff"); 
}

@font-face {
  font-family: 'awesome-regular';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/fonts/fa-regular-400.eot");
  src: url("fonts/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-regular-400.woff") format("woff");
}

@font-face {
  font-family: 'awesome-solid';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("fonts/fonts/fa-solid-900.eot");
  src: url("fonts/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-solid-900.woff") format("woff");
}

@font-face {
  font-family: 'awesome-brands';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/fa-brands-400.eot");
  src: url("fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-brands-400.woff") format("woff");
}

@font-face {
  font-family: 'awesome-duotone';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("fonts/fa-duotone-900.eot");
  src: url("fonts/fa-duotone-900.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-duotone-900.woff") format("woff");
}

/*  Nasalization =========== */

@font-face {
  font-family: 'nasalization';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/nasalization.eot");
  src: url("fonts/nasalization.eot?#iefix") format("embedded-opentype"),
       url("fonts/nasalization.woff") format("woff"); 
}

/*  Lucida Handwrite =========== */

@font-face {
  font-family: 'lucida';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/LucidaHandwrite.eot");
  src: url("fonts/LucidaHandwrite.eot?#iefix") format("embedded-opentype"),
       url("fonts/LucidaHandwrite.woff") format("woff"); 
}