/* Grid
---------------------------------------- */

.container{padding:0 20px}.row{width:100%;max-width:1000px;margin:0 auto}.row .row{min-width:0}.column,.columns{margin-left:4.4%;float:left;min-height:1px;position:relative}.column:first-child,.columns:first-child{margin-left:0}[class*="column"] + [class*="column"]:last-child{float:right}.row .one{width:4.3%}.row .two{width:13%}.row .three{width:21.679%}.row .four{width:30.37%}.row .five{width:39.1%}.row .six{width:47.8%}.row .seven{width:56.5%}.row .eight{width:65.2%}.row .nine{width:73.9%}.row .ten{width:82.6%}.row .eleven{width:91.3%}.row .twelve{width:100%}.row .offset-by-one{margin-left:13.1%}.row .offset-by-two{margin-left:21.8%}.row .offset-by-three{margin-left:30.5%}.row .offset-by-four{margin-left:39.2%}.row .offset-by-five{margin-left:47.9%}.row .offset-by-six{margin-left:56.6%}.row .offset-by-seven{margin-left:65.3%}.row .offset-by-eight{margin-left:74.0%}.row .offset-by-nine{margin-left:82.7%}.row .offset-by-ten{margin-left:91.4%}.row .centered{float:none;margin:0 auto}.row .offset-by-one:first-child{margin-left:8.7%}.row .offset-by-two:first-child{margin-left:17.4%}.row .offset-by-three:first-child{margin-left:26.1%}.row .offset-by-four:first-child{margin-left:34.8%}.row .offset-by-five:first-child{margin-left:43.5%}.row .offset-by-six:first-child{margin-left:52.2%}.row .offset-by-seven:first-child{margin-left:60.9%}.row .offset-by-eight:first-child{margin-left:69.6%}.row .offset-by-nine:first-child{margin-left:78.3%}.row .offset-by-ten:first-child{margin-left:87%}.row .offset-by-eleven:first-child{margin-left:95.7%}.push-two{left:17.4%}.push-three{left:26.1%}.push-four{left:34.8%}.push-five{left:43.5%}.push-six{left:52.2%}.push-seven{left:60.9%}.push-eight{left:69.6%}.push-nine{left:78.3%}.push-ten{left:87%}.pull-two{right:17.4%}.pull-three{right:26.1%}.pull-four{right:34.8%}.pull-five{right:43.5%}.pull-six{right:52.2%}.pull-seven{right:60.9%}.pull-eight{right:69.6%}.pull-nine{right:78.3%}.pull-ten{right:87%}img,object,embed{max-width:100%}img{-ms-interpolation-mode:bicubic}#map_canvas img,.map_canvas img{max-width:none !important}.row:before,.row:after,.clearfix:before,.clearfix:after{content:"";display:table}.row:after,.clearfix:after{clear:both}.row,.clearfix{zoom:1}.block-grid{display:block;overflow:hidden}.block-grid > li{display:block;height:auto;float:left}.block-grid.two-up{margin-left:-4%}.block-grid.two-up > li{margin-left:4%;width:46%}.block-grid.three-up{margin-left:-2%}.block-grid.three-up > li{margin-left:2%;width:31.3%}.block-grid.four-up{margin-left:-2%}.block-grid.four-up > li{margin-left:2%;width:23%}.block-grid.five-up{margin-left:-1.5%}.block-grid.five-up > li{margin-left:1.5%;width:18.5%}@media only screen and (max-width: 797px){body{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0}.container{min-width:0;margin-left:0;margin-right:0}.row{width:100%;min-width:0;margin-left:0;margin-right:0}.row .row .column,.row .row .columns{padding:0}.column,.columns{width:auto !important;float:none;margin-left:0;margin-right:0}.column:last-child,.columns:last-child{margin-right:0;float:none}[class*="column"] + [class*="column"]:last-child{float:none}[class*="column"]:before,[class*="column"]:after{content:"";display:table}[class*="column"]:after{clear:both}.offset-by-one,.offset-by-two,.offset-by-three,.offset-by-four,.offset-by-five,.offset-by-six,.offset-by-seven,.offset-by-eight,.offset-by-nine,.offset-by-ten,.offset-by-eleven,.centered{margin-left:0 !important}.push-two,.push-three,.push-four,.push-five,.push-six,.push-seven,.push-eight,.push-nine,.push-ten{left:auto}.pull-two,.pull-three,.pull-four,.pull-five,.pull-six,.pull-seven,.pull-eight,.pull-nine,.pull-ten{right:auto}.row .phone-one:first-child,.row .phone-two:first-child,.row .phone-three:first-child,.row .phone-four:first-child{margin-left:0}.row .phone-one:last-child,.row .phone-two:last-child,.row .phone-three:last-child,.row .phone-four:last-child{float:right}.row .phone-one,.row .phone-two,.row .phone-three,.row .phone-four{margin-left:4.4%;float:left;min-height:1px;position:relative;padding:0}.row .phone-one{width:21.68% !important}.row .phone-two{width:47.8% !important}.row .phone-three{width:73.9% !important}.row .phone-four{width:100% !important}.row .push-one-phone{left:26.08%}.row .push-two-phone{left:52.2%}.row .push-three-phone{left:78.3%}.row .pull-one-phone{right:26.08%}.row .pull-two-phone{right:52.2%}.row .pull-three-phone{right:78.3%}}@media only screen and (max-width: 767px){.block-grid.mobile{margin-left:0}.block-grid.mobile > li{float:none;width:100%;margin-left:0}}


/* Slick
---------------------------------------- */
.slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

/* Sticky Footer - hoogtes ed aan te passen per project
---------------------------------------- */
html, body {height: 100%;}

#wrap {min-height: 100%;
  height:auto;}

#main {
  overflow:hidden;
}  

@font-face {
  font-family: 'Desigers Bold';
  src: url('../fonts/desib.eot');
  src: url('../fonts/desib.eot?#iefix') format('embedded-opentype'),
  url('../fonts/desib.woff') format('woff'),
  url('../fonts/desib.ttf') format('truetype'),
  url('../fonts/desib.svg#42') format('svg');
  font-weight: normal;
  font-style: normal;
} 

/*Opera Fix*/
body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;
}

/* Buttons
---------------------------------------- */
a.button, input[type="submit"] {
  background: url(../images/buttons.svg) no-repeat;
  background-position:0 -120px;
  background-size:800px 210px;
  color:#ff9045;
  font-family:'Desigers Bold',serif;
  font-size:1.4em;
  height:90px;
  line-height:1.7em;
  margin:5px auto;
  padding:22px 0;
  text-transform:none;
  width:255px;

  transition:all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
}

a.button:hover, input[type="submit"]:hover {color:#ff9045;}

a.button.btn-orange, a.button.btn-green, a.button.btn-red {
  height:85px;
  padding:20px 0;
  font-size:1.4em;
  margin-top:10px;
}

a.button.btn-orange {
  background-position:0 0;
}
a.button.btn-green {
  background-position:-282px 0;
  /*text-align:left;*/
  text-indent:-1.5%;
}
a.button.btn-red {
  background-position:-560px 0;
  text-indent:-15px;
}

a.button:hover, input[type="submit"]:hover  {transform:scale(1.1);}

/* Header
---------------------------------------- */
header {
  position:fixed;
  width:100%;
  z-index:200;

  background: -moz-linear-gradient(top, rgba(16,6,6,0.4) 0%, rgba(16,6,6,0) 99%, rgba(16,6,6,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(16,6,6,0.4)), color-stop(99%,rgba(16,6,6,0)), color-stop(100%,rgba(16,6,6,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(16,6,6,0.4) 0%,rgba(16,6,6,0) 99%,rgba(16,6,6,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(16,6,6,0.4) 0%,rgba(16,6,6,0) 99%,rgba(16,6,6,0) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(16,6,6,0.4) 0%,rgba(16,6,6,0) 99%,rgba(16,6,6,0) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66100606', endColorstr='#00100606',GradientType=0 ); /* IE6-9 */
}

header:after{clear:both;}
header a {
  height:15px;
  display:inline-block;
  cursor:pointer;
}
header a:hover {border:none;}

/* toggle menu */
header a .menu, header a .menu:after, header a .menu:before {
  display:block;
  width:20px;
  margin:10px 0;
  height:1px;
  background:#FFF;
  position:relative;
  transition:all 0.3s ease-in;
  -webkit-transition:all 0.3s ease-in;
}
header a .menu:after, header a .menu:before {
  content:'';
  position:absolute;
  top:-5px;
  left:0;
}

header a .menu:after {
  top:auto;
  bottom:-5px;
}

header a:hover .menu, header a:hover .menu::after, header a:hover .menu:before{background-color:#ff9045;}

header nav ul{
	margin:0px;
	padding:0px;
  display:inline-block;
}
header nav ul li, .play-button{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:15px 25px;
}

header nav ul li a {color:#fff;}

header nav ul li a:hover , #logo a:hover{
  color:#ff9045;
  border:none;
}
header nav ul li a.play-button {
  color:#ff9045;
  font-weight:700;
}

header nav ul li a.play-button:hover {color:#fff;}

.small-menu , .expanded-menu {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}

.expanded-menu ul {
  opacity:0;
  -webkit-transition: all 0.8s ease-in;
  -moz-transition: all 0.8s ease-in;
  -o-transition: all 0.8s ease-in;
  transition: all 0.8s ease-in;

  transform:translateX(-400px);
}

.main-navigation.active .expanded-menu ul, .sub-navigation.active ul {
  opacity:1;
  transform:translateX(0%);
}
.main-navigation.active .small-menu .menu  {background:none;}
.main-navigation.active .small-menu .menu:after {
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
  top:-10px;
  bottom:auto;
}
.main-navigation.active .small-menu .menu:before  {
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  top:-10px;
}

#logo {
  max-width:100px;
  float:left;
  margin:5px 15px 5px 0;
}

#logo em {font-weight:300;}
.main-navigation {float:left;}
.sub-navigation {float:right;}
.sub-navigation ul li {padding:15px 10px;}
.register {
  border-left: 1px solid #fff;
  padding-left:20px;
}

.register:hover {border-left: 1px solid #fff;}

.facebook {color:#3b5997;}
.twitter {color:#55aaec;}
.beta {
  position:absolute;
  top:40px;
  left:0;
  color:#ff9045;
}

/* Form
---------------------------------------- */

form {
  display:inline-block;
}

input {
  background:none;
  border:none;
  outline:none;
  color:#ffd3b6;
}

input[type="email"] {
  display:inline-block;
  width:250px;
  border-bottom:1px solid rgba(255, 211, 180, 0.5);
  padding:10px;
  transition:all 0.3s ease-in;
}
::-webkit-input-placeholder {color:rgba(255, 211, 180, 0.5);}
:-moz-placeholder {color:rgba(255, 211, 180, 0.5);}
::-moz-placeholder {color:rgba(255, 211, 180, 0.5);}
:-ms-input-placeholder {color:rgba(255, 211, 180, 0.5);}

input[type="email"]:focus {
  border-bottom:1px solid rgba(255, 211, 180, 1);
}

input[type="submit"] {
  background-size: 400px 105px;
  background-position:0 2px;
  width:130px;
  height:45px;
  padding:0;

}
/* Header
---------------------------------------- */
.main, #main {
  background-color:#100606;
  font-size:1.2em;
  font-weight:300;
}
section {padding:50px 0;}

.no-margin {
  margin:0 auto;
  padding:0;
}

.container.green {
  background:#00a569;
  color:#FFF;
}

/* intro */
.home-container {
  position:relative;
  padding:0;
  max-height:100vh;
}
#home{
  padding-top:0;
  background:url(../images/bg.jpg) no-repeat;
  background-size:cover;
  left:0;
  width:100vw;
  height:100vh;
}

.header-img {
  border-bottom:5px solid #ff9045;
  height:425px;
  margin-top: 45px;
  overflow:hidden;
  position:relative;
  
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -ms-webkit-transform: rotate(-2deg);
}
.header-img .intro-ted, .header-img .intro-art ,.header-img .intro-guitar, .header-img .intro-robot, .header-img .intro-flowers {
  position:absolute;
  bottom:0;
  left:0;

}
.header-img .intro-ted {
  max-width:520px;
  left: 0;
  right: 0;
  bottom:-45%;
  margin:auto;
  z-index:5;
}

.header-img .intro-art {
  max-width:180px;
  left:auto;
  bottom:-15%;
  animation: intro-art 1s ease-in forwards;
  -webkit-animation: intro-art 1s ease-in forwards;
}
.header-img .intro-guitar {
  max-width:340px;
  left:auto;
  right:8%;
  bottom:-27%;
  animation: intro-guitar 5s infinite ease-in ;
  -webkit-animation: intro-guitar 5s infinite ease-in ;
}
.header-img .intro-robot {
  max-width:200px;
  left:30%;
  bottom:-18%;
  animation: intro-robot 10s infinite ease-in;
  -webkit-animation: intro-robot 10s infinite ease-in;
}
.header-img .intro-flowers {
  max-width:80px;
  left:25%;
  bottom:60%;
}

.header-img .intro-butterfly {
  width:20px;
  height:100px;
  position:absolute;
  top:40%;
  left:15%;
  transform:rotate(30deg);
}

.header-img .intro-butterfly:before, .header-img .intro-butterfly:after {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  background:url(../images/banner/butterfly.png) no-repeat;
  background-size:100%;
  top:0;
  animation: leftwing 2s infinite;
}
.header-img .intro-butterfly:after {
  top:0;
  transform:rotateY(180deg);
  animation: rightwing 2s infinite;
}

#home ul, #news ul{padding:0;}
#home .header-text {
  transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -ms-webkit-transform: rotate(-2deg);
  margin:2vh auto;
}
#home .header-text, #home .header-text h1 {color:#ff9045;}

.header-text a {color:#ff9045; border-color:#ff9045;}

#home .header-text h1 {
  margin-top:50px;
  font-size:1.9em;
  text-align:right;
}
#home .header-text ul {
  font-size:1.1em;
  line-height:180%;
  color:#ffd3b6;
}
#home .header-text ul li {
  position:relative;
  padding-left:20px;
}

#prices ul li:before, #home .header-text ul li:before {
  content:' ';
  display:block;
  width:15px;
  height:15px;
  background:url('../images/list-style.svg');
  background-size:cover;
  position:absolute;
  top:3px;
  left:-10px;
}

#home .header-text ul li:before {top:10px;}

.creator a.button.btn-green {
  text-indent:-25px;
  text-align:center;
}

.party a.button.btn-green {
  text-indent:-6%;
  font-size:1.35em;
}


/* Learn QuizWitz */
#learn {
  background: -moz-radial-gradient(center, ellipse cover, #00c46f 0%, #00925d 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00c46f), color-stop(100%,#00925d)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #00c46f 0%,#00925d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, #00c46f 0%,#00925d 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, #00c46f 0%,#00925d 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c46f', endColorstr='#00925d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#learn .tv {
  background:url(../images/retrotv_single.svg) no-repeat ;
  min-height:500px;
}

.tv .slick-slide:focus {outline:none;}

.tv-slides {
  width:93%;
  margin:auto;
  top:33px;
}

/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;
    position: absolute;
    bottom: 0%;
    right:0;
    display: block;
    width: 50px;
    height: 55px;
    margin-top: -10px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    transition:all 0.3s ease-in;
    -webkit-transition:all 0.3s ease-in;
}

.slick-prev {
  bottom:-27%;
  right:14.3%;
}

.slick-next {
  bottom:-27%;
  right:0.7%;
}

.slick-prev:hover, .slick-next:hover, .slick-dots li button:hover:after {
  background:rgba(73, 40, 48, 0.3);
}

/* dots */
.slick-dots
{
  position: absolute;
  bottom: -35%;
  display: block;
  width: 21%;
  padding: 0;
  right:25%;
  list-style: none;
  text-align: left;
}
.slick-dots li
{
  position: relative;
  display: inline-block;
  margin: 10px 5%;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button
{
  font-size: 0;
  line-height: 0;
  position:relative;
  display: block;
  width: 15px;
  height: 15px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  border-radius:50%;
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%;
  overflow:hidden;
  background: rgb(255,255,240); /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,240,1) 0%, rgba(255,255,142,1) 40%, rgba(255,193,27,1) 70%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,240,1)), color-stop(40%,rgba(255,255,142,1)), color-stop(70%,rgba(255,193,27,1))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,240,1) 0%,rgba(255,255,142,1) 40%,rgba(255,193,27,1) 70%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,240,1) 0%,rgba(255,255,142,1) 40%,rgba(255,193,27,1) 70%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,240,1) 0%,rgba(255,255,142,1) 40%,rgba(255,193,27,1) 70%); /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(255,255,240,1) 0%,rgba(255,255,142,1) 40%,rgba(255,193,27,1) 70%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffff0', endColorstr='#ffc11b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  -webkit-box-shadow: 0px 0px 5px 0px rgba(255,26,0,0.9);
  -moz-box-shadow: 0px 0px 5px 0px rgba(255,26,0,0.9);
  box-shadow: 0px 0px 5px 0px rgba(255,26,0,0.9);
}

.slick-dots li button:after {
  transition:all 0.3s ease-in;
  -webkit-transition:all 0.3s ease-in;
  content:'';
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#learn .icons ul {
  font-size:5.5em;
  margin:0;
}

#learn ul {
  color:#ffffcd;
  margin-top:5px;
}

#learn .icons ul li{padding-bottom:20px;}
#learn .steps ul {margin-top:20px;}
#learn .steps ul li {padding-bottom:61px;}
#learn ul h3, #learn ul p {margin:0;}

.how-to-play {
  margin-bottom:50px;
}
#learn .latest-quiz {
  height: 0;
  width:25%;
  padding-bottom: 25%;
  text-align:center;
  position:relative;
  margin:50px auto 50px 8%;
}
#learn .latest-quiz:after {
  content:'';
  width:114%;
  height:114%;
  position:absolute;
  top:-7%;
  left:-7%;
  background:url(../images/latest-quiz.svg) no-repeat;
  background-size: auto 100%;
  background-position:0 0;
}

#learn .latest-quiz.quiz-wrapper-1:after {background-position:49% 0;}

#learn .latest-quiz-link {
  display:block;
  width:100%;
  padding-bottom:100%;
  background-size:cover;
  z-index:20;
  position:relative;
}

#learn .latest-quiz-link:hover {border:none;}

#learn .latest-quiz-link:after, #learn .latest-quiz-link:hover:before  {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;

  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(70%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.5) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */
  z-index:25;

  transition:all 0.3s ease-in;
  -webkit-transition:all 0.3s ease-in;
}

#learn .latest-quiz-link:hover:after {
  background:rgba(0,0,0,0.3);
}

#learn .latest-quiz-link:hover:before {
  background:url(../images/playbutton.svg) no-repeat;
  width:20%;
  height:20%;
  bottom:0;
  right:0;
  margin:auto;
  z-index:35;
}


#learn .latest-quiz-link span {
  color:#ffd3b6;
  font-weight:400;
  position:absolute;
  bottom:20px;
  left:0;
  right:0;
  margin:auto;
  z-index:30;
}

/* pricees */
#prices {color:#ffd3b6;}
#prices h2, #prices h1 {color:#ff9045;}
#prices a.button {margin-top:50px;}
#prices ul {margin-top:20px;}

#prices .account-type {
  margin-bottom:50px;
  background: -moz-radial-gradient(center, ellipse cover, #8c3a1f 0%, #100606 65%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 65%, color-stop(0%,#8c3a1f), color-stop(100%,#100606)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #8c3a1f 0%,#100606 65%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, #8c3a1f 0%,#100606 65%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, #8c3a1f 0%,#100606 65%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c3a1f', endColorstr='#100606',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#prices ul li {
  position:relative;
  margin-top:10px;
  padding-left:20px;
}

#prices .prices-img img {
  max-width:70%;
  margin:auto;
  display:block;
}

#prices .account-type.premium img {
  margin-left:0;
  max-width:100%;
}

#prices .account-type.pro img {
  max-width:100%;
  margin-top:50px;
}


/* news */ 
.about-catlab {
  background:#ff9045;
  color:#51232d;
}

.about-catlab a.button {
  background-position: -280px -120px;
  margin-top:50px;
}

.about-catlab img {
  margin-top:-30px;
}

#news ul li {margin-bottom:20px;}

#news a {
  color:#100606;
  width:100%;
  display:block;
  padding:0px;
}

#news a:hover {
  border:0;
  opacity:0.5;
}

#news .news-title h3 {
  margin:0;
  line-height:1.3em;
}
#news .news-date {font-style:italic;}

/* about */
.about-text {margin-top:-1em;}

/* Footer
---------------------------------------- */
footer ul li {
  display:inline;
}

footer .copy {float:left;}
footer .partners{float:right;}

/* Animation */

.animation-target-left, .animation-target-right {
  -webkit-animation-duration: 700ms;
  animation-duration: 700ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

.animation-target-left {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.animation-delay-1 {
  -webkit-animation-delay: 200ms; /* Chrome, Safari, Opera */
  animation-delay: 200ms;
}

.animation-delay-2 {
  -webkit-animation-delay: 400ms; /* Chrome, Safari, Opera */
  animation-delay: 400ms;
}

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
    -webkit-transform: skew(5deg, 0);
    -moz-transform: skew(5deg, 0);
    -o-transform: skew(5deg, 0);
    -ms-transform: skew(5deg, 0);
    transform: skew(5deg, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
    -webkit-transform: skew(10deg, 0);
    -moz-transform: skew(10deg, 0);
    -o-transform: skew(10deg, 0);
    -ms-transform: skew(10deg, 0);
    transform: skew(10deg, 0);
  }

  85% {
     -webkit-transform: skew(7deg, 0);
    -moz-transform: skew(7deg, 0);
    -o-transform: skew(7deg, 0);
    -ms-transform: skew(7deg, 0);
    transform: skew(7deg, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
    -webkit-transform: skew(5deg, 0);
    -moz-transform: skew(5deg, 0);
    -o-transform: skew(5deg, 0);
    -ms-transform: skew(5deg, 0);
    transform: skew(5deg, 0);
  }

  95% {
    -webkit-transform: skew(2deg, 0);
    -moz-transform: skew(2deg, 0);
    -o-transform: skew(2deg, 0);
    -ms-transform: skew(2deg, 0);
    transform: skew(2deg, 0);
  }


  100% {
    -webkit-transform: none;
    transform: none;
    -webkit-transform: skew(0deg, 0);
    -moz-transform: skew(0deg, 0);
    -o-transform: skew(0deg, 0);
    -ms-transform: skew(0deg, 0);
    transform: skew(0deg, 0);
  }
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
    -webkit-transform: skew(5deg, 0);
    -moz-transform: skew(5deg, 0);
    -o-transform: skew(5deg, 0);
    -ms-transform: skew(5deg, 0);
    transform: skew(5deg, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
    -webkit-transform: skew(10deg, 0);
    -moz-transform: skew(10deg, 0);
    -o-transform: skew(10deg, 0);
    -ms-transform: skew(10deg, 0);
    transform: skew(10deg, 0);
  }

  85% {
     -webkit-transform: skew(7deg, 0);
    -moz-transform: skew(7deg, 0);
    -o-transform: skew(7deg, 0);
    -ms-transform: skew(7deg, 0);
    transform: skew(7deg, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
    -webkit-transform: skew(5deg, 0);
    -moz-transform: skew(5deg, 0);
    -o-transform: skew(5deg, 0);
    -ms-transform: skew(5deg, 0);
    transform: skew(5deg, 0);
  }

  95% {
    -webkit-transform: skew(2deg, 0);
    -moz-transform: skew(2deg, 0);
    -o-transform: skew(2deg, 0);
    -ms-transform: skew(2deg, 0);
    transform: skew(2deg, 0);
  }


  100% {
    -webkit-transform: none;
    transform: none;
    -webkit-transform: skew(0deg, 0);
    -moz-transform: skew(0deg, 0);
    -o-transform: skew(0deg, 0);
    -ms-transform: skew(0deg, 0);
    transform: skew(0deg, 0);
  }
}

@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
    -webkit-transform: skew(-5deg, 0);
    -moz-transform: skew(-5deg, 0);
    -o-transform: skew(-5deg, 0);
    -ms-transform: skew(-5deg, 0);
    transform: skew(-5deg, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
    -webkit-transform: skew(-10deg, 0);
    -moz-transform: skew(-10deg, 0);
    -o-transform: skew(-10deg, 0);
    -ms-transform: skew(-10deg, 0);
    transform: skew(-10deg, 0);
  }

  85% {
     -webkit-transform: skew(-7deg, 0);
    -moz-transform: skew(-7deg, 0);
    -o-transform: skew(-7deg, 0);
    -ms-transform: skew(-7deg, 0);
    transform: skew(-7deg, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
    -webkit-transform: skew(-5deg, 0);
    -moz-transform: skew(-5deg, 0);
    -o-transform: skew(-5deg, 0);
    -ms-transform: skew(-5deg, 0);
    transform: skew(-5deg, 0);
  }

  95% {
    -webkit-transform: skew(-2deg, 0);
    -moz-transform: skew(-2deg, 0);
    -o-transform: skew(-2deg, 0);
    -ms-transform: skew(-2deg, 0);
    transform: skew(-2deg, 0);
  }


  100% {
    -webkit-transform: none;
    transform: none;
    -webkit-transform: skew(0deg, 0);
    -moz-transform: skew(0deg, 0);
    -o-transform: skew(0deg, 0);
    -ms-transform: skew(0deg, 0);
    transform: skew(0deg, 0);
  }
}

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
    -webkit-transform: skew(-5deg, 0);
    -moz-transform: skew(-5deg, 0);
    -o-transform: skew(-5deg, 0);
    -ms-transform: skew(-5deg, 0);
    transform: skew(-5deg, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
    -webkit-transform: skew(-10deg, 0);
    -moz-transform: skew(-10deg, 0);
    -o-transform: skew(-10deg, 0);
    -ms-transform: skew(-10deg, 0);
    transform: skew(-10deg, 0);
  }

  85% {
     -webkit-transform: skew(-7deg, 0);
    -moz-transform: skew(-7deg, 0);
    -o-transform: skew(-7deg, 0);
    -ms-transform: skew(-7deg, 0);
    transform: skew(-7deg, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
    -webkit-transform: skew(-5deg, 0);
    -moz-transform: skew(-5deg, 0);
    -o-transform: skew(-5deg, 0);
    -ms-transform: skew(-5deg, 0);
    transform: skew(-5deg, 0);
  }

  95% {
    -webkit-transform: skew(-2deg, 0);
    -moz-transform: skew(-2deg, 0);
    -o-transform: skew(-2deg, 0);
    -ms-transform: skew(-2deg, 0);
    transform: skew(-2deg, 0);
  }


  100% {
    -webkit-transform: none;
    transform: none;
    -webkit-transform: skew(0deg, 0);
    -moz-transform: skew(0deg, 0);
    -o-transform: skew(0deg, 0);
    -ms-transform: skew(0deg, 0);
    transform: skew(0deg, 0);
  }
}

/* header animations */
@-webkit-keyframes intro-art {
  0% {right:40%;opacity:0;}
  100% {right:25%;opacity:1;}
}
@keyframes intro-art {
  0% {right:40%;opacity:0;}
  100% {right:25%;opacity:1;}
}

@-webkit-keyframes intro-guitar {
  0% {transform:rotate(5deg);-webkit-transform:rotate(5deg);}
  50% {transform:rotate(0deg);-webkit-transform:rotate(0deg);}
  100% {transform:rotate(5deg);-webkit-transform:rotate(5deg);}
}
@keyframes intro-guitar {
  0% {transform:rotate(5deg);-webkit-transform:rotate(5deg);}
  50% {transform:rotate(0deg);-webkit-transform:rotate(0deg);}
  100% {transform:rotate(5deg);-webkit-transform:rotate(5deg);}
}

@-webkit-keyframes intro-robot {
  0% {-webkit-transform: translate(0,0) rotateY(0deg);}
  49% {-webkit-transform: translate(-80%,0) rotateY(0deg);}
  50% {-webkit-transform: translate(-80%,0) rotateY(180deg);}
  99% {-webkit-transform: translate(0,0) rotateY(180deg);}
  100% {-webkit-transform: translate(0,0) rotateY(0deg);}
}
@keyframes intro-robot {
  0% { transform: translate(0,0) rotateY(0deg);}
  49% {transform: translate(-80%,0) rotateY(0deg);}
  50% { transform: translate(-80%,0) rotateY(180deg);}
  99% {transform: translate(0,0) rotateY(180deg);}
  100% { transform: translate(0,0) rotateY(0deg);}
}

@keyframes intro-flowers {
  0% {transform:rotate(-5deg); -webkit-transform:rotate(-5deg);}
  50% {transform:rotate(0deg); -webkit-transform:rotate(0deg); }
  100% {transform:rotate(-5deg); -webkit-transform:rotate(-5deg);}
}

@-webkit-keyframes rightwing {
  0% {-webkit-transform: rotate3d(0, 1, 0, 180deg); left:100%;}
  15% {-webkit-transform: rotate3d(0, 1, 0, 100deg);left:50%;}
  30% , 50%, 100% {-webkit-transform: rotate3d(0, 1, 0, 180deg);left:100%;}
}

@keyframes rightwing {
  0% {transform: rotate3d(0, 1, 0, 180deg);left:100%;}
  15% {transform: rotate3d(0, 1, 0, 100deg);left:50%;}
  30%, 50%, 100%{transform: rotate3d(0, 1, 0, 180deg);left:100%;}
}

@-webkit-keyframes leftwing {
  0% {-webkit-transform: rotate3d(0, 1, 0, 0deg);left:0%;}
  15% {-webkit-transform: rotate3d(0, 1, 0, 80deg);left:50%;}
  30% , 50%, 100% {-webkit-transform: rotate3d(0, 1, 0, 0deg);left:0%;}
}

@keyframes leftwing {
  0% {transform: rotate3d(0, 1, 0, 0deg);left:0%;}
  15% {transform: rotate3d(0, 1, 0, 80deg);left:50%;}
  30%, 50%, 100%{transform: rotate3d(0, 1, 0, 0deg);left:0%;}
}


/* ---------------------
    FEEDBACK
------------------------*/

.feedback {
  background:#ff9045;
  color:#51232d;
  text-transform:uppercase;
  display:block;
  transition:all 0.3s ease-in;
  -webkittransition:all 0.3s ease-in;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  border:1px solid white;
  

  position:fixed;
  left:-40px;
  top:50%;
  z-index:1500;
  font-weight:700;
  cursor:pointer;
}

.feedback a , .feedback a:hover {
  color:#51232d;
  border:none;
  display:block;
  padding:10px;
}

.feedback:hover {
  background:#00a569;
}

/* Responsive
---------------------------------------- */

/*-------------------------------------------------- 
  MOBILE VISIBILITY
---------------------------------------------------*/
.show-on-phones {display:none !important;}  
.show-on-tablets {display:none !important;}
.show-on-desktops {display:block !important;}
  
.hide-on-phones {display:block !important;} 
.hide-on-tablets {display:block !important;}
.hide-on-desktops {display:none !important;}
  
  
/* Modernizr-enabled tablet targeting */
@media only screen and (max-width: 1280px) and (min-width: 768px) {

.touch .hide-on-phones {display:block !important;}
.touch .hide-on-tablets {display:none !important;}
.touch .hide-on-desktops {display:block !important;}
    
.touch .show-on-phones {display:none !important;}
.touch .show-on-tablets {display:block !important;}
.touch .show-on-desktops {display:none !important;}

}
  
  
@media only screen and (max-width: 767px) {

.hide-on-phones {display:none !important;}
.hide-on-tablets {display:block !important;}
.hide-on-desktops {display:block !important;}
    
.show-on-phones {display:block !important;}
.show-on-tablets {display:none !important;}
.show-on-desktops {display:none !important;}

}
  
  
/* Specific overrides for elements that require something other than display:block */
table.show-on-desktops {display:table !important;}
table.hide-on-phones {display:table !important;}  
table.hide-on-tablets {display:table !important;}
  
  
@media only screen and (max-width: 1280px) and (min-width: 768px) {

.touch table.hide-on-phones {display:table !important;}
.touch table.hide-on-desktops {display:table !important;}
.touch table.show-on-tablets {display:table !important;}

}

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

table.hide-on-tablets {display:table !important;}
table.hide-on-desktops {display:table !important;}
table.show-on-phones {display:table !important;}
  
}


/*--------------------------------------------------
    Video - Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
-------------------------------------------------- */
.flex-video {
  position:relative;
  padding-top:25px;
  padding-bottom:67.5%;
  height:0;
  margin-bottom:16px;
  overflow: hidden;}
  
.flex-video.widescreen {
  padding-bottom:57.25%;}
.flex-video.vimeo { 
  padding-top:0;}
  
.flex-video iframe, .flex-video object, .flex-video embed {
  position:absolute; top:0; left:0;
  width:100%;
  height:100%;}

/* Video */
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {

.flex-video {
  padding-top:0;}

}



/* Custom Media Queries 
---------------------------------------- */

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


@media only screen and (max-width:980px) {
  header nav ul li, .play-button {padding:15px 10px;}
  header .small-menu span.menu {padding:0;}

  header .sub-navigation ul li {padding:15px 5px;}
  .register {padding-left:15px;}
  
}

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

  /* header */
  header .expanded-menu {
    position:absolute;
    margin-top:30px;
  }
  header .expanded-menu ul li {
    display:block;
  }
  .sub-navigation {
    display:block;
    width:100%;
    position:relative;
    left:75px;
    padding-left:4%;
    clear:both;
    margin-top:-10px;
    overflow:hidden;
  }

  .sub-navigation ul{
    opacity:0;
    -webkit-transition: all 0.8s ease-in;
    -moz-transition: all 0.8s ease-in;
    -o-transition: all 0.8s ease-in;
    transition: all 0.8s ease-in;

    transform:translateX(-400px);
  } 

  header.active {
    min-height:210px;
    background: -moz-linear-gradient(top, rgba(16,6,6,0.8) 0%, rgba(16,6,6,0) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(16,6,6,0.7)), color-stop(100%,rgba(16,6,6,0))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, rgba(16,6,6,0.8) 0%,rgba(16,6,6,0) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, rgba(16,6,6,0.8) 0%,rgba(16,6,6,0) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, rgba(16,6,6,0.8) 0%,rgba(16,6,6,0) 100%); /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66100606', endColorstr='#00100606',GradientType=0 ); /* IE6-9 */
  }

  /* intro */
  .home-container, #home {
    max-height:initial;
    height:initial;
  }

  #home .header-text h1 {text-align:center;}
  #home .header-text ul {
    max-width:50%;
    margin:auto;
  }

  #home .button {margin:30px auto;}
  .header-img .intro-guitar {right:0;}
  .header-img .intro-robot {left:15%;}
  .header-img .intro-flowers {
    left:15%;
    bottom:60%;
  }

  .header-img .intro-butterfly {
    top:40%;
    left:5%;
  }

  a.button {
    background-size:1000px 263px;
    width:320px;
    padding:30px 0;
    text-align:center;
    background-position:10px -160px;
    height:100px;
    
  }

  a.button.btn-orange, a.button.btn-green, a.button.btn-red {
    height:110px;
    line-height:2.5em;
  }

  a.button.btn-green {
    background-position:-340px 0;
    text-indent:0;
    text-align:center;
  }

  a.button.btn-red {
    background-position:-695px 0;
  }

  /* learn */
  #learn .tv {min-height:560px;}
  .slick-dots{bottom:-36%;}

  #learn .icons {
    width:20% !important;
    float:left;
  }

  #learn .icons ul {font-size:4em;}

  #learn .steps {
    width:80% !important;
    float:left;
  }

  #learn .latest-quiz {
    width:50% !important;
    margin:50px auto;
    padding-bottom:50%;
  }

  /* account types */
  .account-type.premium   { display:table; }
  .account-type.premium .premium-bottom   {display: table-footer-group; }
  .account-type.premium .premium-top { display: table-header-group; }

  .account-type {
    max-width:500px;
    margin:auto;
  }

  .account-type h2, .account-type p {
    text-align:center;
  }

  #prices ul {
    padding-left:20%;
  }

  /* about */
  #about .about-img {
    display:none;
  }

  #about, #news {
    max-width:500px;
    margin:auto;
  }

  .about-catlab a.button {
    background-position:-350px -150px;
    height:250px;
  }

  /* animations */
  @-webkit-keyframes intro-art {
    0% {right:40%;opacity:0;}
    100% {right:15%;opacity:1;}
  }
  @keyframes intro-art {
    0% {right:40%;opacity:0;}
    100% {right:15%;opacity:1;}
  }
}


@media only screen and (max-width:550px) {
    .slick-dots li button {
    width:10px;
    height:10px;
  }

  h1 {font-size:1.7em;}
  .howtoplay {margin-bottom:10px;}

  /* intro */
  #home .header-text ul {max-width:75%;}
  .header-img {height:260px;}
  .header-img .intro-ted {
    max-width:300px;
    bottom:-130px;
  }
  .header-img .intro-art {
    max-width:80px;
    bottom:-10px;
  }
  .header-img .intro-guitar {
    max-width:150px;
    bottom:-50px;
    right:40px;
  }
  .header-img .intro-robot {
    max-width:100px;
    bottom:-50px;
    animation:none;
  }
  .header-img .intro-flowers {
      max-width:50px;
  }

  .header-img .intro-butterfly:before, .header-img .intro-butterfly:after {
    animation:none;
  }

  .header-img .intro-butterfly {
    width:10px;
    height:50px;
  }

  

  /* animations */
  @-webkit-keyframes intro-art {
    0% {right:50%;opacity:0;}
    100% {right:50px;opacity:1;}
  }
  @keyframes intro-art {
    0% {right:50%;opacity:0;}
    100% {right:50px;opacity:1;}
  }
    

}

@media only screen and (max-width:480px) {
  a.button, input[type="submit"] {
    background: url(../images/buttons.svg) no-repeat;
    background-position:0 -120px;
    background-size:800px 210px;
    color:#ff9045;
    font-family:'Desigers Bold',serif;
    font-size:1.4em;
    height:90px;
    line-height:1.7em;
    margin:5px auto;
    padding:22px 0;
    text-transform:none;
    width:255px;

    transition:all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
  }

  a.button.btn-orange, a.button.btn-green, a.button.btn-red {
    height:85px;
    padding:20px 0;
    font-size:1.4em;
    margin-top:10px;
  }

  a.button.btn-orange {
    background-position:0 0;
  }
  a.button.btn-green {
    background-position:-282px 0;
    text-align:left;
    text-indent:6.5%;
  }
  a.button.btn-red {
    background-position:-560px 0;
  }

  .about-catlab a.button {
    background-position: -280px -120px;
    margin-top:50px;
  }

  header .expanded-menu {
    position:absolute;
    margin-top:60px;
    left:0px;
  }

  header.active {
    min-height:300px;
  }

  .sub-navigation {
    left:0px;
    padding-left:0;
    margin-top:10px;
  }

  #learn .tv {min-height:380px;}
  #learn .steps ul li {padding-bottom:40px;}
  #learn .icons ul {
    line-height:1.38em;
    margin-top:5px;
  }
  .header-img .intro-guitar {right:0px;}
  .slick-dots {display:none !important; visibility:hidden;}
  .slick-prev, .slick-next {
    width:35px;
    height:35px;
    bottom:-23%;
  }

  #prices ul {
    padding-left:10%;
  }

  footer .partners {
    clear:both;
    display:block;
    width:100%;
  }
  footer .copy {margin-bottom:0;}
  
}

@media only screen and (max-width:350px) {
  #learn .tv {min-height:250px;}
}