@-webkit-keyframes load {

	0%,

	40%,

	100% {

		transform: scaleY(0.05);

		-webkit-transform: scaleY(0.05);

	}	

	20% {

		transform: scaleY(1);

		-webkit-transform: scaleY(1);

	}

}

@keyframes load {

	0%,

	40%,

	100% {

		transform: scaleY(0.05);

		-webkit-transform: scaleY(0.05);

	}

	20% {

		transform: scaleY(1);

		-webkit-transform: scaleY(1);

	}

}

body {

	-webkit-font-smoothing: antialiased;

	/*&.is-changing{

	&:before,

	&:after{

	transform: translateY(0);

	}

	}*/

}

body:before, body:after {

	content: "";

	height: 50vh;

	width: 100%;

	position: fixed;

	left: 0;

	background: #000;

	z-index: 9999;

}

body:before {

	top: 0;

	border-top:2px solid #1c2020;

}

body:after {

	bottom: 0;

}

.loader {
    margin: 0 auto;
    width: 200px;
    height: 90px;
    text-align: center;
    font-size: 10px;
    position: absolute;
    top: calc((50% - 100px) + 4vh);
    left: calc((50% - 90px) - 10px);
    z-index: 99999;
    float: left;
    background-color: transparent;
    opacity: 1.0;
}


.logo-container {
  position: relative;
}

.logo-container:before {
  content: "";
  position: absolute;
  top: calc(100% - 2px);
  left:0px;
  width: 100%;
  height: 4px;
  background-color: #cf0000;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-animation: line-animation 3s ease infinite alternate;
          animation: line-animation 3s ease infinite alternate;
}

.logo-container h1#page-logo {
  font-family: Airxonicons!important;
  color: #ffe0de!important;
  -webkit-animation: clip-path-reveal-1 3s ease infinite alternate;
          animation: clip-path-reveal-1 3s ease infinite alternate;
}

.logo-container .icon {
    margin: 0;
    margin-right: 10px;
    padding: 13px;
    height: 90px;
    width: 200px;
    color: #ffffff !important;
    font-size: 170px;
    text-shadow: 0 0 6px rgba(228, 202, 202, 0.92), 0 0 20px rgba(228, 202, 202, 0.34), 0 0 2px rgba(242, 30, 30, 0.52), 0 0 11px rgba(242, 30, 30, 0.92), 0 0 20px rgba(242, 30, 30, 0.78), 0 0 25px rgba(242, 30, 30, 0.92)!important;
}

@font-face {
  font-family: "Airxonicons";
  src:url("../fonts/Airxonicons.eot");
  src:url("../fonts/Airxonicons.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Airxonicons.woff") format("woff"),
    url("../fonts/Airxonicons.ttf") format("truetype"),
    url("../fonts/Airxonicons.svg#Airxonicons") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "Airxonicons" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-Airxon"]:before,
[class*=" icon-Airxon"]:before {
  font-family: "Airxonicons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon.icon-Airxon:before {
  content: "\6d";
}


@-webkit-keyframes line-animation {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  15% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  20%,
 25% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    top: calc(100% - 2px);
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    top: 0px;
  }
  70% {
    -webkit-transform: scaleX(0.2);
            transform: scaleX(0.2);
    top: 0px;
  }
  80%,
 100% {
    -webkit-transform: scaleX(0.2);
            transform: scaleX(0.2);
    top: 0px;
  }
}

@keyframes line-animation {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  15% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  20%,
 25% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    top: calc(100% - 2px);
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    top: 0px;
  }
  70% {
    -webkit-transform: scaleX(0.2);
            transform: scaleX(0.2);
    top: 0px;
  }
  80%,
 100% {
    -webkit-transform: scaleX(0.2);
            transform: scaleX(0.2);
    top: 0px;
  }
}

@-webkit-keyframes clip-path-reveal-1 {
  0%,
 25% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  50% {
  	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

@keyframes clip-path-reveal-1 {
  0%,
 25% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}




body.finish-load:before {

	top:0px;

	height: 0vh;

	-webkit-transition: height 1s, top 1s;

	transition: height 1s, top 1s;

	-webkit-transition-delay:0.75s;

	transition-delay: 0.75s;

}

body.finish-load:after {

	bottom:0px;

	height: 0vh;

	-webkit-transition: height 1s, bottom 1s;

	transition: height 1s, bottom 1s;

	-webkit-transition-delay:0.75s;

	transition-delay: 0.75s;

}

body.finish-load .loader {

	opacity: 0.0;

	-webkit-transition: opacity 0.3s;

	transition: opacity 0.3s;

	-webkit-transition-delay:0.0s;

	transition-delay: 0.0s;

}