@import "//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css";

@import url(//fonts.googleapis.com/css?family=Open+Sans:100,300,400italic,400,600,700,800);

@import url(//fonts.googleapis.com/css?family=Lato:100,300,400italic,400,600,700,800);
.btn {
  font-family: "Open sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  display: inline-block;
  padding: 0.6em 0.75em;
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  color: #fff;
}
.btn:focus {
  outline: none;
}
.btn:active {
  -webkit-box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55) inset;
  -moz-box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55) inset;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55) inset;
}
.btn.disabled:active {
  -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.lt-ie9 .btn {
  font-family: 'open_sansextrabold' !important;
}
.btn .locked-text {
  display: none;
}
.btn.locked {
  cursor: default;
}
.btn.locked .locked-text {
  display: inline;
}
.btn.locked .text {
  display: none;
}
.btn.locked .spin {
  display: inline-block;
}
.btn .spin {
  display: none;
  height: 7px;
  margin-left: 15px;
}
.btn .spin .spinner {
  left: 0 !important;
  top: 0 !important;
}
.btn.signin {
  background: #fff;
  color: #333;
  font-size: 18px;
}
.btn.signin:hover {
  color: #fff;
}
.btn.primary {
  background: #8a5cd7;
  color: #fff;
  font-size: 14px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.btn.primary:hover {
  color: #fff;
}
.btn.primary:hover.locked {
  background: #8a5cd7;
}
.btn.register {
  background: #8a5cd7;
  color: #fff;
  font-size: 24px;
  padding: 0.95em 1.2em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.btn.register:hover {
  color: #fff;
}
.btn.register:hover.locked {
  background: #8a5cd7;
}
.btn.facebook {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  background: #37599a;
}
.btn.facebook .share-icon {
  background-image: url('../img/facebook.png');
  width: 10px;
  height: 20px;
}
.svg .btn.facebook .share-icon {
  background-image: url('../img/social-facebook.svg');
}
.btn.facebook:hover {
  background: #2c477c;
}
.btn.twitter {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  background: #00acf0;
}
.btn.twitter .share-icon {
  background-image: url('../img/twitter.png');
  width: 27px;
  height: 20px;
}
.svg .btn.twitter .share-icon {
  background-image: url('../img/social-twitter.svg');
}
.btn.twitter:hover {
  background: #0091ca;
}
.btn.pinterest {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  background: #ca2922;
}
.btn.pinterest .share-icon {
  background-image: url('../img/pinterest.png');
  width: 18px;
  height: 22px;
}
.svg .btn.pinterest .share-icon {
  background-image: url('../img/social-pinterest.svg');
}
.btn.pinterest:hover {
  background: #a6211b;
}
.btn.tumblr {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  background: #34506b;
}
.btn.tumblr .share-icon {
  background-image: url('../img/tumblr.png');
  width: 15px;
  height: 22px;
}
.svg .btn.tumblr .share-icon {
  background-image: url('../img/social-tumblr.svg');
}
.btn.tumblr:hover {
  background: #24384b;
}
.btn.instagram {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  background: #3f6f98;
}
.btn.instagram .share-icon {
  background-image: url('../img/instagram.png');
  width: 22px;
  height: 22px;
}
.svg .btn.instagram .share-icon {
  background-image: url('../img/social-instagram.svg');
}
.btn.instagram:hover {
  background: #2f5372;
}
.btn.google {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  background: #dc4e32;
}
.btn.google .share-icon {
  background-image: url('../img/social-google.png');
  width: 25px;
  height: 23px;
}
.svg .btn.google .share-icon {
  background-image: url('../img/social-google.svg');
}
.btn.google:hover {
  background: #c1442b;
}
.btn:hover {
  background: #f78e56;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.share-icon {
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
.icon-play-custom {
  background-image: url('../img/icon-play.png');
  background-repeat: no-repeat;
  background-position: left center;
  width: 9px;
  height: 21px;
  display: inline-block;
  vertical-align: top;
}
.svg .icon-play-custom {
  background-image: url('../img/icon-play.svg');
}
body {
  background-color: #fff;
  color: #333;
  padding: 0;
  margin: 0;
  font-family: "Open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 600px;
  height: 425px;
}
header {
  background-color: #41c4dd;
  height: 86px;
  color: #fff;
  font-size: 20px;
  line-height: 94px;
  font-weight: 800;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  text-align: center;
}
.kahoot-logo {
  background-image: url(../img/logo-kahoot.png);
  width: 162px;
  height: 72px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
}
.instructions {
  padding: 25px 0 10px 0;
  text-align: center;
  background-color: #f1f1f1;
}
.step {
  width: 170px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.step:first-child {
  margin-right: 20px;
}
.step:last-child {
  margin-left: 20px;
}
.step-media {
  width: 135px;
  height: 87px;
  margin: 15px 0 5px 35px;
}
.step-media img {
  width: 100%;
}
.step-intro {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 14px;
  line-height: 14px;
  padding-left: 35px;
  margin: 0;
  text-align: left;
}
.step-detail {
  text-align: left;
  padding-left: 35px;
  margin: 0 0 15px 0;
  font-size: 14px;
  line-height: 17px;
}
.icon-number-circle {
  float: left;
  background-image: url('../img/number-circle.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 1px;
  display: block;
  width: 25px;
  height: 25px;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 25px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.svg .icon-number-circle {
  background-image: url('../img/number-circle.svg');
}
footer {
  position: relative;
  padding: 20px 0;
}
footer i {
  display: block;
  width: 40px;
  height: 35px;
  float: left;
  font-size: 36px;
  margin: 9px 10px 0 30px;
}
footer p {
  padding: 0 210px 0 80px;
  margin: 6px 0;
  line-height: 17px;
  font-size: 16px;
}
footer .btn {
  float: right;
  display: block;
  position: absolute;
  right: 20px;
  top: 20px;
  padding: 0.7em 0.9em;
}