@font-face {
	font-family: "Graphik";
	font-style: normal;
	font-weight: 500;
	src: url("./Graphik-Medium.otf") format("opentype");
}

@font-face {
	font-family: "Graphik";
	font-style: normal;
	font-weight: 700;
	src: url("./Graphik-Bold.otf") format("opentype");
}


html, body{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

html
{
    background-color: #00713b;
}

body
{
    height: 100vh; /*fallback*/
    height: 100dvh;
    width: 100vw;
}

#background {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: -2;
    overflow: hidden;
}

#scrollingBackground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 300vh; /*fallback*/
    height: 300dvh;
    background-image: url(./../images/wb-elfar-splash-bg-tile.png);
    background-repeat: repeat;
    background-size: 76dvh;
    animation: scroll 10s linear infinite;
}

@keyframes scroll {
    0% {
      transform: translate(0);
    }
    100% {
      transform: translate(0, 76dvh);
    }
  }

#snowflakes
{
    position: absolute;
	top: 2vh;  /*fallback*/
    top: 2dvh;
	height: 17dvh;
}

#glow
{
    position: absolute;
    top: 0vh; /*fallback*/
    top: 0dvh;
    height: 100vh; /*fallback*/
    height: 100dvh;
}

#container
{
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
}

img {
    object-fit: contain;
}

#logo {
    height: 22vh; /*fallback*/
    height: 22dvh;
    padding-top: 1dvh;
}

#phones {
    height: 44vh; /*fallback*/
    height: 44dvh;
    max-width: 95vw; /*fallback*/
    max-width: 95dvw;
    padding-top: 2%; /*fallback*/
    padding-top: 2dvh;
    z-index: -1;
}

#trynow {
    height: 41vh; /*fallback*/
    height: 41dvh;
    bottom: -10vh; /*fallback*/
    bottom: -10dvh;
    position: absolute;
    z-index: -1;
}

#buttons {
    position: absolute;
    bottom: 4.4vh; /*fallback*/
    bottom: 4.4dvh;
	margin-left: 1.9vh; /*fallback*/
	margin-left: 1.9dvh;
}

#buttons img {
    height: 11.1vh; /*fallback*/
    height: 11.1dvh;
    max-width: 25vw; /*fallback*/
    max-width: 25dvw;
    padding: 0 1vh 0 0.85vh; /*fallback*/
    padding: 0 1dvh 0 0.85dvh;
}

#footer {
    position: absolute;
	bottom: 1dvh;
}

#footer p, #footer p a {
	font-size: 1.2vh;  /*fallback*/
	font-size: 1.2dvh;
	color: #92c77b;
}

#cta {
    margin-top: -1vh; /*fallback*/
    margin-top: -1dvh;
}

#cta p {
    font-size: 3vh; /*fallback*/
    font-size: 3dvh;
    font-weight: 700;
    font-family: 'Graphik';
    line-height: 3.5vh; /*fallback*/
    line-height: 3.5dvh;
}

#share {
    position: absolute;
    bottom: 17vh; /*fallback*/
    bottom: 17dvh;
}

#share p{
    font-size: 2.5vh; /*fallback*/
    font-size: 2.5dvh;
    font-weight: 500;
    font-family: 'Graphik';
    color: #d11241;
}

#share span{
    font-weight: 700;
}

p {
    color: #fff;
    font-size: 1.5vh; /*fallback*/
    font-size: 1.5dvh;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0;
}

a { 
    text-decoration: none;
    color: #fff;
}

#footer a:hover {
    text-decoration: underline;
}

a img{
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
}

a img:hover {
    transform: scale(1.1);
}