@import url(https://fonts.googleapis.com/css?family=Lato);
 @font-face {
    font-family:"Mattor";
    src: url("steps/mottertektura.ttf") /* TTF file for CSS3 browsers */
	}


body {
	margin:0;
	padding:0;
	overflow-x:hidden;
	background-image: url("steps/pattern.jpg");
    background-repeat: repeat;
    background-size: 500px 333px;
}

#workout-room {
	display:none;
	position:absolute;
	background-color:#000;
	width:100%;
	height:100%;
	z-index:101;
}

#workout-video {
	display:none;
	width:100%;
	height:95%;
}

.fa-times {
	color:blue;
	font-size:30px;
}

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

#work-out {
	width:100%;
	min-height:100%;
	
}

#basic {
	width:50%;
	margin-left:5%;
	background-color:#fff;
	padding:20px;
	color:#000;
	border:1px solid #ff3333;
}
.step-1 {
	margin-bottom:60px;
	width:100vw;
	height:auto;
}
.workout-name {
	font-family: "Mattor";
	color:#ff3333;
	text-align: center;
	font-size:30px;
}

.basic {
	font-family: 'Lato', sans-serif;
	line-height:22px;
	text-align: justify;
	font-size:18px;
}

#buttons {
	margin-top:-415px;
}

.ready-go {
	font-family: "Mattor";
	color:#ff3333;
	text-align: center;	
	font-size:30px;
	padding-top:10px;
}


#sparkle-1 {
	width:150px;
	height:50px;
	background-image: url("steps/pink_and_blue_stars.gif");
	margin-left:75%;
	border:1px solid #ff3333;
	box-shadow:0px 0px 5px 5px #ff3333;
	margin-bottom:65px;
}
#sparkle-1:hover,
#sparkle-1:focus {
	-webkit-animation-name: shaking;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	
	-moz-animation-name: shakingx;
	-moz-animation-duration: 0.8s;
	-moz-transform-origin:50% 50%;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
}

@-webkit-keyframes shaking {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

@-moz-keyframes shakingx {
	0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
	10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
	40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
	50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
	100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}

#sparkle-2 {
	width:150px;
	height:50px;
	background-image: url("steps/pink_and_blue_stars.gif");
	margin-left:65%;
	border:1px solid #ff3333;
	box-shadow:0px 0px 5px 5px #ff3333;
	margin-bottom:65px;
	-webkit-animation: glow2 1.0s infinite alternate;  
     -webkit-transition: border 1.0s linear, box-shadow 1.0s linear;
       -moz-transition: border 1.0s linear, box-shadow 1.0s linear;
            transition: border 1.0s linear, box-shadow 1.0s linear;
}

@-webkit-keyframes glow2 {
    to {
         border-color: #ff3333;
    -webkit-box-shadow: 0 0 25px #ff3333;
       -moz-box-shadow: 0 0 25px #ff3333;
            box-shadow: 0 0 25px #ff3333;
    }
}

@-keyframes glow2 {
    to {
         border-color: #ff3333;
    -webkit-box-shadow: 0 0 25px #ff3333;
       -moz-box-shadow: 0 0 25px #ff3333;
            box-shadow: 0 0 25px #ff3333;
    }
}

@-moz-keyframes glow2 {
    to {
         border-color: #ff3333;
    -webkit-box-shadow: 0 0 25px #ff3333;
       -moz-box-shadow: 0 0 25px #ff3333;
            box-shadow: 0 0 25px #ff3333;
    }
}


#sparkle-3 {
	width:150px;
	height:50px;
	background-image: url("steps/pink_and_blue_stars.gif");
	margin-left:78%;
	border:1px solid #ff3333;
	box-shadow:0px 0px 5px 5px #ff3333;
	margin-bottom:65px;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
}

#sparkle-3:hover {
	transform: scale(0.5);
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
}

#sparkle-4 {
	width:150px;
	height:50px;
	background-image: url("steps/pink_and_blue_stars.gif");
	margin-left:60%;
	border:1px solid #ff3333;
	box-shadow:0px 0px 5px 5px #ff3333;
	margin-bottom:0px;
}

#sparkle-5 {
	width:150px;
	height:50px;
	background-image: url("steps/pink_and_blue_stars.gif");
	margin-left:83%;
	border:1px solid #ff3333;
	box-shadow:0px 0px 5px 5px #ff3333;
	-webkit-animation: glow2 1.0s infinite alternate;  
     -webkit-transition: border 2.0s linear, box-shadow 2.0s linear;
       -moz-transition: border 2.0s linear, box-shadow 2.0s linear;
            transition: border 2.0s linear, box-shadow 2.0s linear;
	
}
@-webkit-keyframes glow2 {
    to {
         border-color: #ff3333;
    -webkit-box-shadow: 0 0 25px #ff3333;
       -moz-box-shadow: 0 0 25px #ff3333;
            box-shadow: 0 0 25px #ff3333;
    }
}

@-keyframes glow2 {
    to {
         border-color: #ff3333;
    -webkit-box-shadow: 0 0 25px #ff3333;
       -moz-box-shadow: 0 0 25px #ff3333;
            box-shadow: 0 0 25px #ff3333;
    }
}

@-moz-keyframes glow2 {
    to {
         border-color: #ff3333;
    -webkit-box-shadow: 0 0 25px #ff3333;
       -moz-box-shadow: 0 0 25px #ff3333;
            box-shadow: 0 0 25px #ff3333;
    }
}

.rotate {
	-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}


.star {
	position:absolute;
	margin-left:87%;
	margin-top:30px;
	font-size:30px;
	color:#ff3333;
}

.design {
	font-size:12px;
	color:#000;
	vertical-align: middle;
	margin-left:-5px;
	margin-top:-25px;
}

#sign-up {
	width:90%;
	margin:0 auto;
	margin-top:100px;
	background-color:#fff;
	padding-top:10px;
	border:1px solid #ff3333;
	text-align:center;
}
.do-it {
	font-size:20px;
	font-family: "Mattor";
	display:inline-block;
	top:-20px;
	padding-bottom:10px;
	margin-left:40px;

}

.event {
	text-decoration: underline;
}

.event:hover {
	color:#ff3333;
}

#sweat1 {
	padding-top:10px;
	width:5%;
	-webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    margin-left:20px;
}
#sweat2 {
	width:5%;
	-webkit-transform: rotate(-80deg);
    -moz-transform: rotate(-80deg);
    -o-transform: rotate(-80deg);
    -ms-transform: rotate(-80deg);
    transform: rotate(-80deg);
    margin-left:-80px;
}
#sweat3 {
	width:5%;
	-webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    transform: rotate(-120deg);
    margin-left:-80px;
}
#sweat4 {
	width:5%;
	-webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    margin-left:0px;
}
#sweat5 {
	width:5%;
	-webkit-transform: rotate(-350deg);
    -moz-transform: rotate(-350deg);
    -o-transform: rotate(-350deg);
    -ms-transform: rotate(-350deg);
    transform: rotate(-350deg);
    margin-left:0px;
}
#sweat6 {
	width:5%;
	-webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    margin-left:0px;
}

#cool-down {
	overflow-x:hidden;
	background-color:#fff;
	margin-top:80px;
}
.cool {
	margin-top:5px;
	display:inline-block;
	width:24.75%;
	margin:0 auto;
} 


.images {
	width:60%;
}

.right {
	float:right;
}

.big {
	width:100%;
}

.small {
	font-size:12px;
	padding-left:15px;
}

.link {
	color:#ff3333;
}

.foot {
	font-size:12px;
}

#advanced {
	margin:0 auto;
	width:70%;
	font-family: 'Lato', sans-serif;
	padding:10px;
	text-align: justify;
	font-size:18px;
}

.sign-up {
	font-family: 'Lato', sans-serif;
	padding-left:10px;
	font-size:16px;
}

#signup {
	text-decoration: underline;
}

.hurry {	
	padding-left:5px;
	padding-right:5px;
	font-family: "Mattor";
	color:#ff3333;
	background-image: url("steps/pink_and_blue_stars.gif");
}


@media screen and (min-width: 1681px) and (max-width: 2000px) {
	#sparkle-1 {
		margin-top:80px;
	}
	.star {
	position:absolute;
	margin-left:92%;
	margin-top:30px;
	font-size:30px;
	color:#ff3333;
	}

}
@media screen and (max-width: 1024px) {
	.do-it {
		font-size: 16px;
		font-family: "Mattor";
		display: inline-block;
		top: -20px;
		padding-bottom: 10px;
		margin-left: 70px;
	}
	.star {
		position: absolute;
		margin-left: 85%;
		margin-top: 30px;
		font-size: 30px;
		color: #ff3333;
	}
	.cool {
		margin-top: 5px;
		display: inline-block;
		width: 24.7%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 768px) {
	#buttons {
		margin-top:-535px;
	}
	.do-it {
		font-size: 16px;
		font-family: "Mattor";
		display: inline-block;
		top: -20px;
		padding-bottom: 10px;
		margin-left: 80px;
	}
	.star {
		position: absolute;
		margin-left: 80%;
		margin-top: 30px;
		font-size: 30px;
		color: #ff3333;
	}
	.cool {
		margin-top: 5px;
		display: inline-block;
		width: 24.57%;
		margin: 0 auto;
	}
	#basic {
		width: 50%;
		margin-left: 3%;
		background-color: #fff;
		padding: 20px;
		color: #000;
		border: 1px solid #ff3333;
	}
	#sign-up {
		width:95%;
	}

}

@media screen and (min-width: 2879px) {
	#basic {
    width: 50%;
    /* margin-left: 5%; */
    background-color: #fff;
    padding: 20px;
    color: #000;
    border: 1px solid #ff3333;
	} 
	
}

@media screen and (max-width: 640px) {

	.cool {
	margin-top:5px;
	display:inline-block;
	width:24%;
	margin:0 auto;
	}
	.star {
	position:absolute;
	margin-left:45%;
	margin-top:30px;
	font-size:30px;
	color:#ff3333;
	}
	#basic {
	width:80%;
	margin-left:5%;
	background-color:#fff;
	padding:20px;
	color:#000;
	border:1px solid #ff3333;
	}
	#buttons {
	margin-top:20px;
	margin-left:-450px;
	} 
	#sparkle-4 {
		margin-bottom:20px;
	}

}