* { 
	box-sizing: border-box; 
}

html,body {
	margin: 0;
	width:100%;
	height:100%;
	background:#222222;
}

html {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	font-family: 'Open Sans', Helvetica, sans-serif;
}

h1, h2, h3 {
	margin: 0;
	color: #FFFFFF;
   	text-transform: uppercase;
	pointer-events: none;
}

.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.main {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%,-50%);
	width: 95%;
	overflow: hidden;
}

@media only screen and (min-width: 600px) {

.logo {
	width: 90px;
	height: 90px;
}

h1 {
	padding: 0 0 5px 0;
	font-size: 4em;
	font-weight: 200;
	letter-spacing: 15px;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 1.2);
	text-align: center;
}
h2 {
	padding: 5px 0 5px 0;
   	font-size: 1.2em;
    	font-weight: 200;
    	letter-spacing: 5px;
	text-align: center;
   	text-shadow: 0px 2px 4px rgba(0, 0, 0, 1.2);
}
h3 {
	padding:15px 0 5px 0;
    	font-size: 0.8em;
    	font-weight: 100;
    	letter-spacing: 5px;
	text-align: center;
    	text-shadow: 0px 2px 4px rgba(0, 0, 0, 1.2);
}
}

@media only screen and (min-device-width : 360px) and (max-device-width : 667px) and (orientation: portrait) {

.logo {
	width: 90px;
	height: 90px;
}

h1 {
	padding: 0 0 5px 0;
	font-size: 5.5em;
	font-weight: 200;
	letter-spacing: 15px;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 1.2);
	text-align: center;
}
h2 {
	padding: 5px 0 5px 0;
   	font-size: 2em;
    	font-weight: 200;
    	letter-spacing: 5px;
	text-align: center;
   	text-shadow: 0px 2px 4px rgba(0, 0, 0, 1.2);
}
h3 {
	padding:15px 0 5px 0;
    	font-size: 1.5em;
    	font-weight: 100;
    	letter-spacing: 5px;
	text-align: center;
    	text-shadow: 0px 2px 4px rgba(0, 0, 0, 1.2);
}
}

/* ---- particles.js container ---- */

#particles-js {
	position : absolute;
    width:100%;
    height:100%;
	background: $background
}

canvas {
	display: block;
	vertical-align: bottom;
}

/* ---- Animation ---- */
.animLogo {
	animation: animLogo 6s ease infinite;
	}

        @keyframes animLogo {
          0% {
            filter: blur(3px);
          }
          10% {
	    transform: translate(-3px, 0);
	    filter: blur(2px);
          }
          20% {
            transform: translate(1px, 1px);
            filter: blur(1px);
          }
          30% {
            transform: translate(2px, 0);
            filter: blur(2px);
          }
          40% {
            transform: translate(-2px, 0);
          }
          49.9% {
            transform: scale(0.95);
            filter: blur(2px);
            opacity: 0.8;
          }
          50% {
            opacity: 1;
            transform: scale(1);
            filter: blur(3px);
          }
          54,9% {
            transform: translate(1px, 1px);
            filter: blur(6px);
	    opacity: 0.5;
          }
	  55% {
            transform: translate(-1px, -1px);
            filter: blur(6px);
	    opacity: 1;
          }
          60% {
            transform: translate(3px, 1px);
            filter: blur(2px);
            opacity: 1;
          }
          79,9% {
	    transform: scale(0.95);
            filter: blur(4px);
            opacity: 0;
          }
	  80% {
	    transform: scale(1);
            opacity: 1;
            filter: blur(2px);
          }
          90% {
	    transform: translate(-1px, -1px);
            opacity: 1;
          }
          100% {
            transform: translate(-2px, -2px);
            filter: blur(2px);
          }
        }
.animH1 {
	animation: animH1 6s ease infinite;
	}

        @keyframes animH1 {
          0% {
            transform: translate(1px, 1px);
            text-shadow: 0 0 12px rgba(255,255,255,1);
            filter: blur(2px);
          }
          10% {
            transform: translate(-1px, -1px);
	    filter: blur(1px);
          }
          15% {
            text-shadow: 0 0 4px rgba(255,255,255,0.5);
            filter: blur(1px);
          }
          19% {
            transform: translate(6px, 1px);
            text-shadow: 0 0 12px rgba(255,255,255,1);
            filter: blur(2px);
          }
          20% {
            /* transform: translate(20px, 1px); */
            text-shadow: 0 0 6px rgba(255,255,255,1);
            filter: blur(1px);
          }
          30% {
            transform: translate(-2px, -2px);
            text-shadow: 0 0 0 rgba(255,255,255,0.3);
            filter: blur(1px);
          }
          40% {
            text-shadow: 0 0 4px rgba(255,255,255,1);
            filter: blur(1px);
          }
          50% {
            text-shadow: 0 0 0 rgba(255,255,255,0.5);
            opacity: 1;
            transform: scale(1);
            filter: blur(2px);
          }
          52.1% {
	    transform: translate(2px, 2px);
            transform: scale(0.9);
            filter: blur(1px);
            opacity: 0;
          }
          52.2% {
            text-shadow: 0 0 0 rgba(255,255,255,0.5);
            opacity: 1;
            transform: scale(1);
            filter: blur(2px);
          }
          56% {
            transform: translate(1px, 1px);
            text-shadow: 0 0 20px rgba(255,255,255,1);
            filter: blur(6px);
          }
          56.1% {
            /* transform: translate(1px, 1px); */
            text-shadow: 0 0 2px rgba(255,255,255,1);
            filter: blur(1px);
	  }
          80% {
            transform: translate(-3px, -3px);
            text-shadow: 0 0 0 rgba(255,255,255,0.4);
            filter: blur(2px);
            opacity: 1;
          }
          89,9% {
            filter: blur(1px);
            opacity: 0;
          }
          90% {
            text-shadow: 0 0 0 rgba(255,255,255,0.4);
            opacity: 1;
	    filter: blur(2px);
          }
          100% {
            transform: translate(-2px, -2px);
            text-shadow: 0 0 12px rgba(255,255,255,0.3);
            filter: blur(1px);
          }
        }

        .animH2 {
	animation: animH2 6s ease infinite;
	}

        @keyframes animH2 {
          0% {
            text-shadow: 0 0 8px rgba(255,255,255,1);
            filter: blur(1px);
            opacity: 1;
          }
          30% {
            transform: translate(1px, -1px);
            opacity: 0.8;
          }
          51% {
            transform: translate(0, 0);
            filter: blur(2px);
            opacity: 0.9;
          }
	  52.1% {
            transform: scale(1.1);
            opacity: 0.8;
          }
          52.2% {
            transform: translate(0, 0);
            filter: blur(2px);
            opacity: 0.9;
          }
          55% {
            transform: translate(-1px, 1px);
            filter: blur(1px);
            text-shadow: 0 0 16px rgba(255,255,255,0.8);
            opacity: 0.8;
          }
          60% {
            transform: translate(0, 0);
            filter: blur(1px);
          }
          65% {
            transform: translate(1px, -1px);
            filter: blur(2px);
          }
          100% {
            transform: translate(0, 0);
            text-shadow: 0 0 10px rgba(255,255,255,0.6);
            filter: blur(1px);
            opacity: 1;
          }
        }

        .animH3 {
	animation: animH3 6s ease infinite;
	}

        @keyframes animH3 {
          0% {
            text-shadow: 0 0 8px rgba(255,255,255,1);
            filter: blur(1px);
            opacity: 1;
          }
          20% {
            transform: translate(1px, -1px);
            opacity: 0.8;
          }
          41% {
            transform: translate(0, 0);
            filter: blur(2px);
            opacity: 0.9;
          }
	  42.1% {
            transform: scale(1.1);
            opacity: 0.8;
          }
          42.2% {
            transform: translate(0, 0);
            filter: blur(2px);
            opacity: 0.9;
          }
          45% {
            transform: translate(-1px, 1px);
            filter: blur(1px);
            text-shadow: 0 0 16px rgba(255,255,255,0.8);
            opacity: 0.8;
          }
          65% {
            transform: translate(0, 0);
            filter: blur(1px);
          }
          70% {
            transform: translate(1px, -1px);
            filter: blur(2px);
          }
          100% {
            transform: translate(0, 0);
            text-shadow: 0 0 10px rgba(255,255,255,0.6);
            filter: blur(1px);
            opacity: 1;
          }
        }