body {
		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
		color:#ffffff;
		font-weight: 100;
		border: 0px;
		margin: 0px;
		padding: 0px;
		z-index: 1;


	  background-repeat: no-repeat; 
  background-size: cover;

		background-color:#000000;

}

.bodyImpage {

		background-image: url('/_img/mainTheme1.png');
}

.bodyImpage2 {

		background-image: url('/_img/mainTheme2.png');
}



a {
		color:#FFFFFF;
		border: 0px;
		text-decoration: none;
	
}

a:Hover {
		color:#FF5733;
	
}

button
{
		margin-left:20px;

}

input
{
         background: transparent;
         border: none;
         outline-width: 0;
		 border-bottom-style:solid;
		border-bottom-color:#ffffff;
		border-bottom-width:1px;
		margin-left:20px;
		width:200px;
		color:#ffffff;
}

input:focus
{
         background: #ffffff;
         border: none;
         outline-width: 0;
		 border-bottom-style:solid;
		border-bottom-color:#ffffff;
		border-bottom-width:1px;
		opacity: 0.5;
		margin-left:20px;
		width:200px;
		outline:none;
			color:#000000;
}


#logo {
	
	padding: 4%;
	padding-top:2%;
	float:right;
	
	
	

}

.leftInfo {
	
	padding-top: 10%;
	padding-left: 4%;
	float:left;
	width: 30%;
	
}

.leftInfo2 {
	
	padding-top: 15%;
	padding-left: 0%;
	float:left;
	width: 15%;
	
}


#dot {
  height: 150px;
  width: 150px;
  background-color: #676767;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  align-items:center;
			  background-repeat: no-repeat; 
  background-size: cover;
	
		   
		   	border-style:solid;
	border-color:#ffffff;
	border-width:px;
			background-image: url('/mockup/_img/smoke.png');
}


#innerDot {
  align-items:center;
  height: 32px;
  width: 50px;
  margin-top:52px;
  padding-top:18px;
  background-color: #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  text-align: center;

   		   	border-style:solid;
	border-color:#ffffff;
	border-width:0px;


}

.play {

	padding-top: 2%;
	padding-right: 4%;
	float:left;
	width: 50%;
	text-align:right;
}

#titleSpan {
	border-top-style:solid;
	border-top-color:#676767;
	border-top-width:1px;
    margin-top:6%;
	padding-top:5%;
	width: 100%;
	font-size: 26px;
	font-family: 'Raleway';
	font-style: lighter;
	font-weight: 800;
	display:block;
}

#titleSpan2 {
	border-top-style:solid;
	border-top-color:#676767;
	border-top-width:1px;
    margin-top:6%;
	padding-top:12%;
	width: 20%;
	display:block;
}


.white {
	
	color: #FFFFFF;
}


#textSpan {
		padding-top:5%;
	width: 100%;
	font-size: 13px;
	display:block;
}


#infoSpan {
		padding-top:5%;
	width: 100%;
	font-size: 13px;
	display:block;
}


#arrow {
	color:#FF5733;
	font-size: 11px;

}


footer {
    position: absolute;
	float:left;
	text-align:left;
    bottom: 0;
	margin-right:4%;
	margin-left:4%;
	margin-bottom:2%;
    width: 92%;
}

#promo {
	float:left;
	width: 32%;
	vertical-align:middle;
	font-size: 13px;
	border-top-style:solid;
	border-top-color:#676767;
	border-top-width:1px;
	padding-top:1%;
}
.svg-item {
		text-align:right;
    width: 100%;
    font-size: 16px;
    animation: donutfade 1s;
}

@keyframes donutfade {
  /* this applies to the whole svg item wrapper */
    0% {
        opacity: .2;
    }
    100% {
        opacity: 1;
    }
}



.donut-ring {
    stroke: #676767;
}

.donut-segment {
    transform-origin: center;
    stroke: #FF6200;
}

.donut-segment-2 {
    stroke: aqua;
    animation: donut1 3s;
}

.donut-segment-3 {
    stroke: #ffffff;
    animation: donut2 3s;
}

.donut-segment-4 {
    stroke: #ed1e79;
    animation: donut3 3s;
}

.segment-1{fill:#ccc;}
.segment-2{fill:aqua;}
.segment-3{fill:#ffffff;}
.segment-4{fill:#ed1e79;}

.donut-percent {
    animation: donutfadelong 1s;
}

@keyframes donutfadelong {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes donut1 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 69, 31;
    }
}

@keyframes donut2 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 30, 70;
    }
}

@keyframes donut3{
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 1, 99;
    }
}

.donut-text {
    font-family: Arial, Helvetica, sans-serif;
    fill: #FF6200;
}
.donut-text-1 {
    fill: aqua;
}
.donut-text-2 {
    fill: #ffffff;
}
.donut-text-3 {
    fill: #ffffff;
}

.donut-label {
    font-size: 0.28em;
    font-weight: 100;
    line-height: 1;
    fill: #000;
    transform: translateY(0.25em);
}

.donut-percent {
    font-size: 0.5em;
    line-height: 1;
    transform: translateY(0.5em);
	    font-weight: 100;
}

.donut-data {
    font-size: 0.12em;
    line-height: 1;
    transform: translateY(0.5em);
    text-align: center;
    text-anchor: middle;
    color:#666;
    fill: #666;
    animation: donutfadelong 1s;
	    font-size: 0.28em;
    font-weight: 100;
}