body,
h1,
html,
p {
    padding: 0
}
body,
html {
    /* height: 100%; */
    margin: 0px!important
}

a, a:hover, a:active, a:focus {
   outline: 0!important;
}

body {
	background-color: #000;
	color: #FFF;
	font-family: 'Source Sans Pro', sans-serif, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	-webkit-text-size-adjust: none;
	overflow-x: hidden;
	overflow-y: hidden;
	padding: 0px;
}
@media screen and (max-width: 960px) {
	
	body {
		font-size: 16px!important;
	}

}


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@-webkit-keyframes bugfix {
	
    from,
    to {
        padding: 0
    }
	
}

:focus,
a:active {
    outline: 0
}

#canvaswrapper {
	display: block;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 100vw;
	height: 100vh;
}
#canvas {
	display: block;
	position: relative;
	width: 450px;
	height: 170px;
}
#icon {
	display: block;
	position: relative;
	width: 170px;
	height: 170px;
	overflow: hidden;
}
.icon {
	display: block;
	position: absolute;
	width: 170px;
	height: 170px;
	background-image: url(images/icon.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-repeat: no-repeat;
}
.icon1 {
    -webkit-animation: spin 16s linear infinite;
    -moz-animation: spin 16s linear infinite;
    animation: spin 16s linear infinite;
}
.icon2 {
    -webkit-animation: spin2 20s linear infinite;
    -moz-animation: spin2 20s linear infinite;
    animation: spin2 20s linear infinite;
}
.icon3 {
    -webkit-animation: spin 30s linear infinite;
    -moz-animation: spin 30s linear infinite;
    animation: spin 30s linear infinite;
}
.icon4 {
    -webkit-animation: spin2 40s linear infinite;
    -moz-animation: spin2 40s linear infinite;
    animation: spin2 40s linear infinite;
}

@-ms-keyframes spin { 
	from { 
		-ms-transform: rotate(0deg); 
	} to { 
		-ms-transform: rotate(360deg); 
	}
}
@-moz-keyframes spin { 
	from { 
		-moz-transform: rotate(0deg); 
	} to { 
		-moz-transform: rotate(360deg); 
	}
}
@-webkit-keyframes spin { 
	from { 
		-webkit-transform: rotate(0deg); 
	} to { 
		-webkit-transform: rotate(360deg); 
	}
}
@keyframes spin { 
	from { 
		transform: rotate(0deg); 
	} to { 
		transform: rotate(360deg); 
	}
}


@-ms-keyframes spin2 { 
	from { 
		-ms-transform: rotate(180deg); 
	} to { 
		-ms-transform: rotate(-180deg); 
	}
}
@-moz-keyframes spin2 { 
	from { 
		-moz-transform: rotate(180deg); 
	} to { 
		-moz-transform: rotate(-180deg); 
	}
}
@-webkit-keyframes spin2 { 
	from { 
		-webkit-transform: rotate(180deg); 
	} to { 
		-webkit-transform: rotate(-180deg); 
	}
}
@keyframes spin2 { 
	from { 
		transform: rotate(180deg); 
	} to { 
		transform: rotate(-180deg); 
	}
}


#logo1 {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 170px;
	height: 170px;
	overflow: hidden;
}
#logo1 svg {
	width: 170px;
	height: 170px;
  .fills {
    stroke: transparent
  }
}

#logo2 {
	display: block;
	position: absolute;
	left: 130px;
	top: 0px;
	width: 320px;
	height: 170px;
}
#logo2 img {
	width: 320px;
	height: 170px;
}
#logo2 svg {
	width: 320px;
	height: 170px;
  .fills {
    stroke: transparent
  }
}