body {
  display: grid;
  place-items: center;
  height: 100vh;
}

body, h1, h2 {
  font-family: Montserrat, sans-serif;
  margin: 0;
  padding: 0;
}

.wf-active h1, .wf-active h2 {
   opacity: 1;
   transition: opacity .1s
}

@supports(display: grid) {
  .notice {
    display: none;
  }
}

.hidden {
    display: none !important;
}
.text-center, footer, header {
  text-align: center;
}


nav, aside{
	padding:0;
	margin:0;
}

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav content side"
    "footer footer footer";
  height: 100vh;
  grid-template-columns: 20px 1fr 20px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 0px;
}

header {
  background: #FFF;
  grid-area: header;
  padding: 1rem 0;

  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav, aside, main {
  text-transform: uppercase;
  color: lightslategray;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav {
  grid-area: nav;
}

main {
  grid-area: content;
  width: 100%;
  height:100%;
}

aside {
  grid-area: side;
}

footer {
  grid-area: footer;
}

@media only screen and (max-width: 768px) {
#btnSound {
	  top:41%!important;
	  left: 38%!important;
}
  nav, aside {
    margin: 0;
  }
}




@font-face {

        font-family: "BebasNeueRegular";

        src: url("fonts/BebasNeue-webfont.woff") format("woff"),

             url("fonts/BebasNeue-webfont.ttf") format("truetype");

}

#home_left, #home_right {

    opacity:0.75;
}


/* COMMON STYLES*/

h1 {

    line-height: 0.8!important;

    margin-bottom: 20px!important;

    line-height: 0.8!important;

    display: inline-block!important;

    padding: 10px 10px 3px!important;

    background: #96de01!important;

    color: #ffffff!important;

    border: 4px solid #ffffff!important;

    box-shadow: 0px 0px 0px 3px #96de01!important;

    font-size: 80px!important;

    font-style: normal!important;

    font-weight: normal!important;

    text-transform: none!important;

    font-family: 'BebasNeueRegular', sans-serif!important;

}

.view-content h1 {

    color: #42454a;

    font-size: 1.8em;

}



.view-content h1.welcome {

    text-align: center;

}



.view-content h3 {

    color: #42454a;

    font-size: 0.8em;

}



#home_center h3 {

    font-weight:normal;

    margin:0;

}



h4 {

    font-family: 'BebasNeueRegular', sans-serif!important;

    font-size: 2em!important;

    border-top: 1px dotted #ccc;

    padding-top: 15px;

    -webkit-margin-before: 0.5em;

    -webkit-margin-after: 0.25em;

}



.view-content p {

    color: #4a4e54;

    font-size: 1em;

}



/* IMAGE STYLES*/

.img {

    background-image: url(../css/images/appbuilder.png);

    background-repeat: no-repeat;

    text-align: center;

    width: 320px;

    height: 250px;

    margin: 0px auto;

}



.logo {

    background-image: url(../css/images/logo.png);

    background-repeat: no-repeat;

    width: 319px;

    height: 60px;

    margin: 40px auto;

}



.container {

  background: url(../img/reprocess-icon.svg);

  background-size: contain;

  background-position: center;

  background-repeat:no-repeat;

  width:100%;

}



#home_bpm {

    font-weight:700; 

    font-size:x-large!important;

    color:#96de01;

}



.topTag img {

    max-width:20%;
    margin-top:20px;

}

#btnSound {

  opacity:0.15;
  margin: 0 auto;
  width:30%;
  position: absolute;
  top:30%;
  left: 36%;
	display: inline-block;
	text-align: center;


}



.k-window  div.k-window-content

{

        overflow: hidden!important;

}



/* TABSTRIP STYLES*/

.km-ios7 .km-navbar, .km-ios7 .k-toolbar, .km-ios7 .km-tabstrip {

    background-color: rgba(244,244,244,0.95);

}



/* COMPONENT STYLES*/

.km-flat .km-rowinsert, .km-flat .km-state-active, .km-flat .km-scroller-pull, .km-flat .km-loader:before, .km-flat .k-slider-selection, .km-flat .km-touch-scrollbar, .km-flat .km-pages .km-current-page, .km-flat .k-slider .k-draghandle, .km-flat .k-slider .k-draghandle:hover {

    background: #96de01;

    color:#FFF;

}

.km-flat .km-tabstrip .km-state-active, .km-flat .km-scroller-refresh.km-load-more, .km-flat .km-popup .k-state-hover, .km-flat .km-popup .k-state-focused, .km-flat .km-popup .k-state-selected, .km-flat .km-actionsheet>li>a:active, .km-flat .km-actionsheet>li>a:hover, .km-flat li.km-state-active .km-listview-link, .km-flat li.km-state-active .km-listview-label, .km-flat .km-listview-label input[type=radio]:checked, .km-flat .km-listview-label input[type=checkbox]:checked {

    background: none;

    color:#96de01;

}



.km-flat .km-switch-handle, .km-flat .k-slider-selection, .km-flat .km-switch-background {

    color: #96de01;

}



/* Tabstrip Icons*/

.km-home:after, .km-home:before {

    content: "\e043";

}



.km-settings:after, .km-settings:before {

    content: "\e20f";

}



.position-left {

    float: left;

}



.position-right {

    float: right;

}



.position.center {

    position: absolute;

    margin: 0 auto;

    width: 100%;

}



/* DEVICE SPECIFIC STYLES*/

#skin-change {

    position: absolute;

    right: 10px;

    top: 10px;

}



.km-ios .km-listview-wrapper .km-listinset li {

    background-color: #fff;

    border-color: #ababab;

}



.km-ios .km-view .km-content {

    background-image: none;

    background: #f0f0f0;

}



.km-tablet .km-ios .km-navbar .km-view-title {

    color: #000;

    text-shadow: 0 -1px rgba(255,255,255,0.3);

}



.km-android .view-content h1 {

    color: #8a8b8f;

}



.km-android .view-content p,

.km-android .view-content h3 {

    color: #2e5968;

}



.km-flat .km-list > li {

    box-shadow: none;

}



.km-ios .km-list > li,

.km-flat .km-list > li {

    background: none;

}



/* Separator Style*/

.separator > .dark {

    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 100%);

    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(30%,rgba(0,0,0,0.2)), color-stop(50%,rgba(0,0,0,0.2)), color-stop(70%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0)));

    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%);

    background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%);

    background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%);

    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0) 100%);

    height: 1px;

    border: none;

    width: 100%;

    opacity: 0.3;

}



.separator > .light {

    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);

    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));

    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);

    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);

    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);

    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);

    height: 1px;

    border: none;

    width: 100%;

    opacity: 0.3;

}



.soundWrap {

    margin:0px 20px;

}



ul#select-sound{

    display:inline-block;

}



#select-sound  li{

    float:left;

    width:100%;

    margin:5px 0;

}





/* RETINA DISPLAY STYLES*/

@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {

    .img {

        background-image: url(../css/images/appbuilder2x.png);

        background-repeat: no-repeat;

        background-size: 100%;

    }



    .logo {

        background-image: url(../css/images/logo2x.png);

        background-repeat: no-repeat;

        background-size: 100%;

    }



}









/* RETINA IPAD LANDSCAPE*/



@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 2) {



    .topTag {

        display: none;

    }

}



/* RETINA IPAD MINI LANDSCAPE*/



@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 1)  {





.topTag {

    display: none;

}

.tabout { 

    display:none!important;

} 

}





/* RETINA IPAD MINI PORTRAIT*/



@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 1)  { 



.topTag img {

    max-width:40%!important;

}





}



/* iPOD Touch PORTRAIT*/





@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) 

and (orientation : portrait) { 

    

.topTag img {

    max-width:70%;

} 



    

}





/* iPOD Touch LANDSCAPE*/





@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) 

and (orientation : landscape) { 





#home_center .topTag {

    display:none;

}







.tabout { 

    display:none!important;

} 



}





/* RETINA iPHONE 6 LANDSCAPE*/



@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 667px) 

and (orientation : landscape) { 



#home_center .topTag {

    display:none;

}



.tabout { 

    display:none!important;

} 



}



/* RETINA iPHONE 6 PORTRAIT*/



@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {







    .topTag img {

        max-width: 59% !important;

    }

}







/* Samsung Galaxy S4 Portrait */

@media 

(-webkit-min-device-pixel-ratio: 3), 

(min-resolution: 144dpi) and (device-width: 1080px) and (orientation : portrait) {



    #home_center {

      height: 657px!important;

    }

}









/*  ANIMATIONS  */



.animated-fadeIn { 

    -webkit-animation-duration: 1s; 

    animation-duration: 1s; 

    -webkit-animation-fill-mode: both; 

    animation-fill-mode: both; 

    -webkit-animation-timing-function: ease-in; 

    animation-timing-function: ease-in; 

} 



@-webkit-keyframes fadeIn { 

    0% {opacity: 0;} 

    100% {opacity: 1;} 

} 

@keyframes fadeIn { 

    0% {opacity: 0;} 

    100% {opacity: 1;} 

} 

.fadeIn { 

    -webkit-animation-name: fadeIn; 

    animation-name: fadeIn; 

}







.animated-fadeInUp { 

    -webkit-animation-duration: 1s; 

    animation-duration: 1s; 

    -webkit-animation-fill-mode: both; 

    animation-fill-mode: both; 

    -webkit-animation-timing-function: ease-in; 

    animation-timing-function: ease-in; 

} 



@-webkit-keyframes fadeInUp { 

    0% { 

        opacity: 0; 

        -webkit-transform: translateY(20px); 

    } 

    100% { 

        opacity: 1; 

        -webkit-transform: translateY(0); 

    } 

} 



@keyframes fadeInUp { 

    0% { 

        opacity: 0; 

        transform: translateY(20px); 

    } 

    100% { 

        opacity: 1; 

        transform: translateY(0); 

    } 

} 



.fadeInUp { 

    -webkit-animation-name: fadeInUp; 

    animation-name: fadeInUp; 

}







.animated-pulse { 

    -webkit-animation-duration: 1s; 

    animation-duration: 1s; 

    -webkit-animation-fill-mode: both; 

    animation-fill-mode: both; 

    -webkit-animation-timing-function: ease-in; 

    animation-timing-function: ease-in; 

} 



@-webkit-keyframes pulse { 

    0% { -webkit-transform: scale(1); } 

    50% { -webkit-transform: scale(1.1); } 

    100% { -webkit-transform: scale(1); } 

} 

@keyframes pulse { 

    0% { transform: scale(1); } 

    50% { transform: scale(1.1); } 

    100% { transform: scale(1); } 

} 

.pulse { 

    -webkit-animation-name: pulse; 

    animation-name: pulse; 

}