/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body{
	font-family: 'Open Sans', sans-serif;
	background: #fff;
}

header{
	background: #01869a;
	padding: 20px 0px;
}

.sts-logo{ height: 65px; }
.sts-logo-mobile{ display: none; height: 65px; }

.sts-content{
	padding: 90px 0px 0px;
	background: #fff url(img/sts-content-bg.jpg) no-repeat center / cover;
	background-position-y: 0;
	background-attachment: fixed;
	min-height: 500px;
}

.sts-page-title{
	font-size: 40px;
	color: #01869a;
	text-transform: uppercase;
	text-align: center;
	margin: 0 auto 50px;
}


/****************BUTTONS**************************************************/

.sts-create-your-own-mix{ position: relative; cursor: pointer; }
.sts-create-your-own-mix:after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 105px;
	height: 105px;
	background: url(img/sts-note.png) no-repeat center / contain;
	transform: translate(-50%, -50%);
	transition: all .3s ease-in;
}
.sts-create-your-own-mix:hover:after{ transform: translate(-50%,-50%) scale(1.1); }
.sts-create-your-own-mix>div{
	display: inline-block;
	padding: 17px 28px;
	width: 250px;
	color: #fff;
	font-size: 22px;
	text-transform: uppercase;
	border-radius: 50px;
	transition: all .3s ease-in;
}
.sts-create-your-own-mix>div:first-child{ text-align: left; background: #fa8a65; }
.sts-create-your-own-mix:hover>div:first-child{ background: #fc64af; }
.sts-create-your-own-mix>div:last-child{ text-align: right; background: #fc64af; }
.sts-create-your-own-mix:hover>div:last-child{ background: #fa8a65; }


.sts-top-links{
	height: 65px;
	vertical-align: middle;
	border-bottom: 1px solid #39a1b0;
	text-align: right;
	padding-top: 10px;
}

.sts-top-links a,
#signupform-submit,
#loginform-submit,
#forgotform-submit,
#supportform-submit,
#resetform-submit{
	padding: 10px 15px;
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
	border-radius: 5px;
	transition: all .3s ease-in;
	display: inline-block;
	vertical-align: middle;
}
.user-guide-btn{
	border: 1px solid #fa8a65;
	margin-right: 95px;
}
.user-guide-btn:hover,
.user-guide-btn:active,
.user-guide-btn:focus{ color: #fff; text-decoration: none; border-color: #fc64af; }

.sts-top-links a i{ display: none; }

.sts-top-links a.member-area-btn,
.sts-top-links a.signup-btn,
#signupform-submit,
#loginform-submit,
#forgotform-submit,
#supportform-submit,
#resetform-submit{
	background: #fa8a65;
	padding: 10px 25px;
	margin-right: 10px;
}

.sts-top-links a.member-area-btn:hover,
.sts-top-links a.signup-btn:hover,
#signupform-submit:hover,
#loginform-submit:hover,
#forgotform-submit:hover,
#supportform-submit:hover,
.sts-top-links a.member-area-btn:focus,
.sts-top-links a.signup-btn:focus,
#signupform-submit:focus,
#loginform-submit:focus,
#forgotform-submit:focus,
#supportform-submit:focus,
.sts-top-links a.member-area-btn:active,
.sts-top-links a.signup-btn:active,
#signupform-submit:active,
#loginform-submit:active,
#forgotform-submit:active,
#supportform-submit:active,
#resetform-submit:hover,
#resetform-submit:focus,
#resetform-submit:active{ color: #fff; text-decoration: none; background: #fc64af;}

.sts-top-links a.login-btn,
.sts-top-links a.logout-btn{
	background: #5d5d5d;
	padding: 10px 25px; 	
}

.sts-top-links a.login-btn:hover,
.sts-top-links a.logout-btn:hover,
.sts-top-links a.login-btn:focus,
.sts-top-links a.logout-btn:focus,
.sts-top-links a.login-btn:active,
.sts-top-links a.logout-btn:active{ color: #fff; text-decoration: none; background: #555; }


#signupform-submit,
#loginform-submit,
#forgotform-submit,
#supportform-submit,
#resetform-submit{ border: none; outline: none; box-shadow: none; }
/****************BUTTONS**************************************************/


/****************HOME PROMO***********************************************/
.sts-home-promo{
	background: url(img/sts-home-promo-bg.jpg) no-repeat center / cover;
	padding: 20px 0px 50px;
}
.sts-site-title{
	font-size: 72px;
	font-weight: 500;
	color: #01869a;
	margin-bottom: 35px;
}

h3.sts-site-title{
	font-size: 40px;
	margin-bottom: 35px;
}

.sts-site-subtitle{
	font-size: 28px;
	color: #01869a;
	margin-bottom: 20px;
}

.sts-home-promo-video{ height: 330px; width: 585px; margin: 0 auto 20px; position: relative; border-radius: 50px; border: 2px solid #fff; overflow: hidden; cursor: pointer;}
.sts-home-promo-poster{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; transition: all .3s ease-in; z-index: 2; border-radius: 50px;}
.sts-home-promo-video video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; border-radius: 50px;}
.sts-home-promo-video:after{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 65px;
	height: 65px;
	content: '';
	background: url(img/sts-video-controls.png) no-repeat top center;
	transform: translate(-50%, -50%);
	z-index: 3;
	transition: all .3s ease-in;
}
.sts-home-promo-video.playing .sts-home-promo-poster{ opacity: 0; }
.sts-home-promo-video.playing:after{
	background-position: bottom center;
	opacity: 0;
}
.sts-home-promo-video.playing:hover:after{ opacity: 1; }

/****************HOME PROMO***********************************************/


/****************CONTENT*********************************************/
.sts-home-content{
	padding: 110px 0px 0px;
	background: #fff url(img/sts-home-content-bg.png) no-repeat center / cover;
	background-position-y: -180px;
	background-attachment: fixed;
}

.sts-guide-content,
.sts-text-content{
	margin-top: 75px;
}

.sts-home-content-item,
.sts-guide-content-item,
.sts-text-content-item{ text-align: center; margin-bottom: 100px; padding-bottom: 30px; position: relative; }

.sts-home-content-item h3,
.sts-guide-content-item h3,
.sts-text-content-item h3{ 
	font-size: 36px;
	color: #695db6;
	margin-bottom: 30px;
}

.sts-home-content-item-text,
.sts-guide-content-item-text{ height: 128px; overflow: hidden; transition: all 1s linear; position: relative; }
.sts-home-content-item-text.active,
.sts-guide-content-item-text.active{ height: auto; }

.sts-home-content-item p,
.sts-guide-content-item p{
	font-size: 16px;
	line-height: 1.5em;
	color: #547688;
	max-width: 760px;
	margin: 0 auto 15px;
	text-align: justify;
}

.sts-home-content-item p b,
.sts-guide-content-item p b{
	color: #000;
	font-weight: 600;
}

.sts-home-content-item ul,
.sts-guide-content-item ul{
	list-style: disc;
	margin: 0;
	display: block;
	width: 100%;
	max-width: 760px;
	margin: 0 auto 35px;
	text-align: left;
}

.sts-home-content-item ul li,
.sts-guide-content-item ul li{
	margin-bottom: 15px;
	margin-left: 60px;
	font-size: 16px;
	line-height: 1.5em;
}

.sts-home-content-item button,
.sts-guide-content-item button{
	background: transparent;
	color: #01869a;
	border: none;
	outline: none;
	width: 66px;
	height: 32px;
	padding: 0;
	margin: 0;
	margin-left: -33px;
	position: absolute;
	bottom: 0px;
	left: 50%;
	transition: all .3s ease-in;
}

.sts-home-content-item button:hover,
.sts-guide-content-item button:hover{
	transform: scale(1.1);
}

.sts-guide-content-item,
.sts-text-content-item{
	max-width: 600px;
	margin: 0px auto 50px;
}

.sts-guide-content-item p,
.sts-text-content-item p{
	font-size: 18px;
	line-height: 1.5em;
	color: #547688;
	margin: 0 auto 15px;
	text-align: justify;
}


.sts-guide-content-item p b,
.sts-text-content-item p b,
.sts-text-content-item ul li b{ font-weight: 600; color: #000; }

.sts-text-content-item a{
	color: #01869a;
	font-size: 18px;
	line-height: 1.5em;
	display: inline-block;
	text-decoration: none;
	transition: all .3s linear;
	white-space: pre-wrap; /* CSS3 */    
    word-wrap: break-word; 
    cursor: pointer;
}

.sts-text-content-item a:hover,
.sts-text-content-item a a:focus,
.sts-text-content-item a a:active{
	color: #fc64af;
	text-decoration: none;
}

.sts-text-content-item i{ font-style: italic; }

.sts-text-content-item ul{
	list-style: disc;
	margin: 0;
	display: block;
	width: 100%;
	max-width: 600px;
	margin: 0 auto 35px;
	text-align: left;
}

.sts-text-content-item ul li{
	margin-bottom: 15px;
	margin-left: 60px;
	font-size: 18px;
	line-height: 1.5em;
}
/****************CONTENT*********************************************/

/****************HOME WAVES**********************************************/
.sts-home-waves-container{
	color: #fff;
	background: #9bdae8;
	padding: 65px 0px 30px;
	text-align: center;
}

.footer-waves-title{
	font-size: 30px;
	color: #01869a;
	margin: 55px auto 25px;
	font-weight: 500;
}

.wave-type-item-icon{ margin-bottom: 25px; }
.wave-type-item-title{ font-size: 24px; color: #01869a; margin-bottom: 8px; text-transform: uppercase; }
.wave-type-item-hz{ font-size: 14px; color: #29b6f6; margin-bottom: 30px; }
.wave-type-item-description ul li{ font-size: 18px; color: #fff; margin-bottom: 10px; }

.sts-main-footer-container{
	background: #01869a; 
	padding: 30px 0px;
}

/****************HOME WAVES**********************************************/

/****************FOOTER**************************************************/
.footer-menu-title{ text-align: center; font-size: 20px; color: #fff; margin-bottom: 20px; }
.footer-menu-container{ text-align: center; }
.footer-menu-container ul li{ display: inline-block; }
.footer-menu-container ul li:last-child .comma{ display: none; }
.footer-menu-container ul li .comma,
.footer-menu-container ul li a{ font-size: 14px; color: #b3afb7; transition: all .3s ease-in; }
.footer-menu-container ul li a:hover,
.footer-menu-container ul li a:active,
.footer-menu-container ul li a:focus{ color: #fff; text-decoration: none; }
/****************FOOTER**************************************************/

/****************FORMS***************************************************/
.sts-content-form-wrapper{
	padding: 40px;
	border-radius: 30px;
	background: url(img/sts-modal-bg.jpg) no-repeat center / cover;
	border: 1px solid #01869a;
	width: 90%;
	max-width: 650px;
	margin: 80px auto;
	position: relative;
}

.sts-content-form{
	background: #fff;
	border: 1px solid #01869a;
	padding: 30px 60px;
	border-radius: 30px;
	text-align: center;
}

.sts-content-form h4{
	color: #01869a;
	font-size: 40px;
	margin-bottom: 30px;
}

.sts-content-form label{
	display: block;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 21px;
	color: #01869a;
	margin-bottom: 8px;
}

.sts-content-form input,
.sts-content-form textarea{
	background: #01869a;
	color: #fff;
	font-size: 16px;
	text-align: center;
	border-radius: 5px;
	box-shadow: 5px 5px 8px #888, -5px 5px 8px #888;
	border: 1px solid transparent;
	outline: none;
	width: 100%;
	margin-bottom: 30px;
	padding: 12px 15px;
}

.sts-content-form textarea{ resize: vertical; }

/****************FORMS***************************************************/

/****************MODALS**************************************************/
.sts-modal{
	padding: 40px;
	border-radius: 30px;
	background: url(img/sts-modal-bg.jpg) no-repeat center / cover;
	border: 1px solid #01869a;
	max-width: 650px;
	margin: 0 auto;
	position: relative;
}

.sts-modal-mixer-preview{ max-width: 720px; width: 95%; }

.sts-mixer-preview-wrapper{
	background: #fff;
	border: 1px solid #01869a;
	padding: 30px;
	border-radius: 30px;
	text-align: center;
}

.sts-modal form{
	background: #fff;
	border: 1px solid #01869a;
	padding: 30px 60px;
	border-radius: 30px;
	text-align: center;
}

.sts-modal form h4{
	color: #01869a;
	font-size: 40px;
	margin-bottom: 30px;
}
.sts-modal form h4 small{
	color: #01869a;
	font-size: 32px;
}

.sts-modal form label{
	display: block;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 21px;
	color: #01869a;
	margin-bottom: 8px;
}

.sts-modal form input:not([type="chheckbox"]){
	background: #01869a;
	color: #fff;
	font-size: 16px;
	text-align: center;
	border-radius: 5px;
	box-shadow: 5px 5px 8px #888, -5px 5px 8px #888;
	border: 1px solid transparent;
	outline: none;
	width: 100%;
	margin-bottom: 30px;
	padding: 12px 15px;
}

.loginform-signup-link a,
.loginform-forgot-link a{
	color: #01869a;
	font-size: 18px;
	line-height: 1.5em;
	display: inline-block;
	margin: 15px auto;
	text-decoration: none;
	transition: all .3s linear;
}

.loginform-signup-link a:hover,
.loginform-forgot-link a:hover,
.loginform-signup-link a:focus,
.loginform-forgot-link a:focus,
.loginform-signup-link a:active,
.loginform-forgot-link a:active{
	color: #fc64af;
	text-decoration: none;
}

.mfp-bg { background-color: rgba(13, 28, 80, 0.65); }
.mfp-close-btn-in .mfp-close{
	color: #fff;
    font-size: 24px;
    right: 15px;
    top: 15px;
    width: 24px;
    height: 24px;
    background: #3fadbd;
    border: 1px solid transparent;
    border-top-color: #3fadbd;
    line-height: 24px;
    border-radius: 3px;
}


@-webkit-keyframes autofill {
    0%,100% {
        color: #fff;
        background: #01869a;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

.notie-container{ font-size: 21px; z-index: 1050;}
.notie-background-success{ background-color: #007E33; }
.notie-background-error{ background-color: #cc0000; }
.notie-background-warning{ background-color: #FF8800; }
.notie-background-info{ background-color: #01869a; }

.sts-activation-message,
.sts-empty-content-message{
	font-size: 30px;
	font-weight: 600;
	color: #2d0a25;
	text-align: center;
	max-width: 450px;
	margin: 50px auto;
	line-height: 1.5em;
}
.sts-empty-content-message{ color: #cc0000; }

/****************MODALS**************************************************/


/****************MIXER***************************************************/
#mixer-popup{
	position: relative;
	border-radius: 30px;
	background: #fff;
	border: 1px solid #01869a;
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.sts-mixer-header{
	padding: 25px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	background: url(img/sts-mixer-header-bg.jpg) no-repeat top center / cover;
}

.sts-mixer-header ul{
	display: inline-block;
	list-style: none;
	margin: 0 auto;
}

.sts-mixer-header ul li a{
	display: inline-block;
	margin: 0px 10px;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	text-shadow: 1px 1px #01869a;
	transition: all .3s ease-in;
	cursor: default;
}

.sts-mixer-header ul li a.active{
	color: #01869a;
	text-shadow: 1px 1px #fff;
	cursor: default;
}

.sts-mixer-footer{
	padding: 25px 70px;
}

.sts-mixer-header.translated{
	transform: translateY(-110%);
	transition: all .3s ease-in;	
}


.sts-mixer-footer.translated{
	transform: translateY(110%);
	transition: all .3s ease-in;	
}

.sts-mixer-footer>div{ display: inline-block; width: 49%; }

.sts-mixer-footer button{
	padding: 10px 30px;
	font-size: 18px;
	color: #fff;
	border-radius: 3px;
	border: none;
	outline: none;
	box-shadow: none;
	background: #38d1bc;
	text-transform: uppercase;
	display: inline-block;
	line-height: 1em;
	transition: all .3s ease-in;
}

.sts-mixer-footer button:hover{
	outline: none;
	box-shadow: none;
	background: #119cd3;
}

.sts-mixer-footer button[disabled="disabled"]{ opacity: 0.3; cursor: not-allowed; }

.sts-mixer-screens{ width: 100%; height: 570px; overflow: hidden; overflow-y: auto;  }
.sts-mixer-screen{ padding: 0px 70px; opacity: 0; display: none; transition: all .3s ease-in; }
.sts-mixer-screen.active{opacity: 1; display: block;}

.sts-mixer-screen-title{
	font-size: 40px;
	color: #01869a;
	margin: 30px auto;
}

.sts-mixer-screen-subtitle{
	font-size: 18px;
	color: #01869a;
	margin: 0 auto 30px;
	line-height: 1.3em;
}

.sts-mixer-screen-subtitle a{ color: rgb(250,138,101); transition: all .3s ease-in; }
.sts-mixer-screen-subtitle a:hover,
.sts-mixer-screen-subtitle a:focus,
.sts-mixer-screen-subtitle a:active{ color: rgb(252,100,175); }

.sts-mixer-screen-demo-notice{
	padding: 15px;
	border-radius: 30px;
	color: #fff;
	text-transform: uppercase;
	font-size: 18px;
	text-align: center;
	display: inline-block;
	margin: 0 auto;
	background: url(img/sts-orange-pink.jpg) no-repeat center / cover;
}


.sts-mixer-category>div{
	width: 180px;
	height: 180px;
	position: relative;
	background-image: -moz-linear-gradient( 45deg, rgb(250,138,101) 0%, rgb(252,100,175) 100%);
	background-image: -webkit-linear-gradient( 45deg, rgb(250,138,101) 0%, rgb(252,100,175) 100%);
	background-image: -ms-linear-gradient( 45deg, rgb(250,138,101) 0%, rgb(252,100,175) 100%);
	padding: 50px;
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
}

.sts-mixer-category>div:before,
.sts-mixer-category>div:after{
	width: 130px;
	height: 130px;
	position: absolute;
	content: '';
	top: 25px;
	left: 25px;
	transition: all .5s ease-in;
}
.sts-mixer-category>div:after{ opacity: 0; }
.sts-mixer-category>div:hover:after,
.sts-mixer-category.active>div:after{ opacity: 1; }

.sts-mixer-category-1>div:before{ background: url(img/sts-mixer-category-1.png) no-repeat center / contain; }
.sts-mixer-category-1>div:after{ background: url(img/sts-mixer-category-1-active.png) no-repeat center / contain; }
.sts-mixer-category-2>div:before{ background: url(img/sts-mixer-category-2.png) no-repeat center / contain; }
.sts-mixer-category-2>div:after{ background: url(img/sts-mixer-category-2-active.png) no-repeat center / contain; }
.sts-mixer-category-3>div:before{ background: url(img/sts-mixer-category-3.png) no-repeat center / contain; }
.sts-mixer-category-3>div:after{ background: url(img/sts-mixer-category-3-active.png) no-repeat center / contain; }
.sts-mixer-category-4>div:before{ background: url(img/sts-mixer-category-4.png) no-repeat center / contain; }
.sts-mixer-category-4>div:after{ background: url(img/sts-mixer-category-4-active.png) no-repeat center / contain; }
.sts-mixer-category-5>div:before{ background: url(img/sts-mixer-category-5.png) no-repeat center / contain; }
.sts-mixer-category-5>div:after{ background: url(img/sts-mixer-category-5-active.png) no-repeat center / contain; }
.sts-mixer-category-6>div:before{ background: url(img/sts-mixer-category-6.png) no-repeat center / contain; }
.sts-mixer-category-6>div:after{ background: url(img/sts-mixer-category-6-active.png) no-repeat center / contain; }

.sts-mixer-category h4{
	margin: 15px auto;
	font-size: 21px;
	color: #695db6;
}


.sts-mixer-collection,
.sts-mixer-beat,
.sts-mixer-affirmation{ min-height: 220px; }

.sts-mixer-collection>div,
.sts-mixer-beat>div,
.sts-mixer-affirmation>div{
	width: 150px;
	height: 150px;
	display: inline-block;
	border: 3px solid transparent;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin: 0 auto;
	transition: all .3s ease-in;
	cursor: pointer;
}

.sts-mixer-collection.active>div,
.sts-mixer-beat.active>div,
.sts-mixer-affirmation.active>div,
.sts-mixer-collection:hover>div,
.sts-mixer-beat:hover>div,
.sts-mixer-affirmation:hover>div{
	border-color: #fb7986;
}

.sts-mixer-collection h4,
.sts-mixer-beat h4,
.sts-mixer-affirmation h4{
	margin: 15px auto;
	font-size: 18px;
	line-height: 1.3em;
	color: #022463;
	min-height: 40px;
}

/****************MIXER***************************************************/

/****************PLAYLIST************************************************/
.sts-playlist-content .sts-text-content-item{ max-width: 800px; }

#sts-playlist{
	table-layout: fixed;
	width: 95%;
	max-width: 720px;
	margin: 30px auto;
	text-align: center;
}

#sts-playlist th{ text-align: center; font-size: 16px; font-weight: 600; vertical-align: middle; padding: 10px; }

#sts-playlist tr{
	border-bottom: 2px solid #01869a;
	cursor: pointer;
	transition: all .3s ease-in; 
}

#sts-playlist tbody tr:nth-child(even){
	background: rgb(250, 138, 101, .2);
}

#sts-playlist tbody tr:nth-child(odd){
	background: rgb(252, 100, 175, .2);
}

#sts-playlist tbody tr:hover{
	background: rgba(0,0,0,.2);
}

#sts-playlist tr > *:nth-child(1) { width:5%; }
#sts-playlist tr > *:nth-child(2) { width:45%; }
#sts-playlist tr > *:nth-child(3) { width:12.5%; }
#sts-playlist tr > *:nth-child(4) { width:12.5%; }
#sts-playlist tr > *:nth-child(5) { width:12.5%; }
#sts-playlist tr > *:nth-child(6) { width:12.5%; }


#sts-playlist tr td{ padding: 10px 3px; vertical-align: middle; }

#sts-playlist tr td span.fa{
	color: rgba(118,103,255,1);
	transition: all .3s ease-in;
}

#sts-playlist tr td span.fa:hover,
#sts-playlist tr td span.fa:focus,
#sts-playlist tr td span.fa:active{
	color: rgba(41,12,255,1);
	transform: scale(.9) rotate(10deg);
}
/****************PLAYLIST************************************************/


/****************PLAYER**************************************************/
.sts-audioplayer
{
	height: 60px;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    border: 2px solid #01869a;
    position: relative;
    z-index: 1;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(41,12,255,1) 35%, rgba(118,103,255,1) 65%, rgba(0,0,0,1) 100%);
    box-shadow: 0 0 30px #01869a;
    border-radius: 30px;
    max-width: 600px;
    margin: 50px auto;
}

.sts-audioplayer > div{ position: absolute; }

.sts-audioplayer-playpause,
.sts-audioplayer-volume{
	width: 40px;
	height: 100%;
	cursor: pointer;
	z-index: 2;
	top: 0;
	left: 0;
	text-align: right;
	line-height: 60px;
}

.sts-audioplayer-volume{
	left: unset;
	right: 0;
	text-align: left;
}

.sts-audioplayer-playpause .fa-pause,
.sts-audioplayer-volume .fa-volume-mute{ display: none; }

.sts-audioplayer.playing .fa-play{display: none;}
.sts-audioplayer.playing .fa-pause{display: inline;}

.sts-audioplayer-playpause span,
.sts-audioplayer-volume span{ transition: color .3s ease-in; filter: drop-shadow( 1px 1px 0 #000 ); }
.sts-audioplayer-playpause:hover span,
.sts-audioplayer-volume:hover span{ color: #29b6f6; }
		
.sts-audioplayer-time{
	width: 70px;
	height: 100%;
	line-height: 60px;
	text-align: center;
	z-index: 2;
	top: 0;
}
.sts-audioplayer-time-current { left: 40px;}
.sts-audioplayer-time-duration{ right: 40px;}

.sts-audioplayer-bar {
	height: 10px;
	background-color: #222;
	cursor: pointer;
	z-index: 1;
	top: 50%;
	right: 110px;
	left: 110px;
	margin-top: -2px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
}
.sts-audioplayer-bar div { width: 0; height: 100%; position: absolute; left: 0; top: 0; }
		
.sts-audioplayer-bar-loaded{ background-color: #333; z-index: 1; }
.sts-audioplayer-bar-played{
	background: rgb(252,100,175);
	background: linear-gradient(90deg, rgba(252,100,175,1) 0%, rgba(250,138,101,1) 100%);
	box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
	z-index: 2;
}
	
	
/****************PLAYER***************************************************/


.row.reorder-xs {
	transform: rotate(180deg);
	direction: rtl;
}

.row.reorder-xs > [class*="col-"] {
	transform: rotate(-180deg);
	direction: ltr;
}



.ten-columns > .col-sm-2 { width: 20% !important; }

@media (max-width: 767px) {

	.sts-home-promo-video {
    	height: 225px;
		width: 400px;
	}

	
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

@media (max-width: 480px) {
	.sts-home-promo-video {
    	height: 158px;
		width: 280px;
	}
}

@media (max-width: 991px) {

	header{ padding: 10px 0; }
	.sts-logo{ display: none; }
	.sts-logo-mobile{ display: inline-block; }

	.sts-top-links{ height: 55px; }
	.sts-top-links a{
		width: 30px;
		height: 30px;
		line-height: 25px;
		text-align: center;
	 	background: transparent;
	 	border-radius: 50%;
	 	border-width: 2px;
	 	padding: 0;
	 }
	.sts-top-links a span{ display: none; }
	.sts-top-links a i{ display: inline-block; color: #fa8a65; }
	.sts-top-links a.signup-btn,
	.sts-top-links a.member-area-btn,
	.sts-top-links a.login-btn,
	.sts-top-links a.logout-btn{ padding: 0; background: transparent; border: 2px solid #fa8a65;  }
	.user-guide-btn{ margin-right: 12px; }

	.sts-top-links a.member-area-btn:hover, .sts-top-links a.signup-btn:hover,
	.sts-top-links a.member-area-btn:focus, .sts-top-links a.signup-btn:focus,
	.sts-top-links a.member-area-btn:active, .sts-top-links a.signup-btn:active,
	.sts-top-links a.login-btn:hover, .sts-top-links a.logout-btn:hover,
	.sts-top-links a.login-btn:focus, .sts-top-links a.logout-btn:focus,
	.sts-top-links a.login-btn:active, .sts-top-links a.logout-btn:active{
		background: transparent;
		color: #fa8a65;
		border-color: #fc64af;
	}


	.sts-site-title{ font-size: 32px; margin-bottom: 10px; }
	h3.sts-site-title{ font-size: 26px; }
	.sts-site-subtitle{ font-size: 14px; margin-bottom: 20px; }

	.sts-create-your-own-mix>div{ font-size: 14px; width: 140px; padding: 10px 15px; }
	.sts-create-your-own-mix>div:last-child{ padding-right: 44px; }
	.sts-create-your-own-mix:after{ width: 60px; height: 60px; }

	.sts-home-content{ padding-top: 50px; }

	.footer-waves-title{ font-size: 21px; }
	.wave-type-item-icon{ margin-bottom: 15px; }
	.wave-type-item-icon img{ height: 46px; }
	.wave-type-item-title{ font-size: 16px; }
	.wave-type-item-hz{ font-size: 11px; margin-bottom: 10px; }
	.wave-type-item-description ul li{ font-size: 14px; }

	.footer-menu-title{ margin-bottom: 10px; margin-top: 30px; }

	.sts-main-footer-container{ padding: 0 0 60px;  }

	.sts-modal,
	.sts-content-form-wrapper{ padding: 10px; border-radius: 15px; }
	.sts-modal form,
	.sts-content-form-wrapper form{ padding: 15px; border-radius: 10px; }
	.sts-modal form h4,
	.sts-content-form-wrapper form h4{ font-size: 30px; }
	.sts-modal form h4 small,
	.sts-content-form-wrapper form h4 small{ font-size: 21px; }
	.sts-modal form label,
	.sts-content-form-wrapper form label{ font-size: 14px; margin-bottom: 5px; }
	.loginform-signup-link a, .loginform-forgot-link a{ font-size: 12px; }

	.sts-home-content-item h3, .sts-guide-content-item h3, .sts-text-content-item h3{
		font-size: 24px;
		margin-bottom: 15px;
	}
	.sts-home-content-item, .sts-guide-content-item, .sts-text-content-item{
		margin-bottom: 50px;
	}

	.sts-home-content-item, .sts-guide-content-item, .sts-text-content-item{
		padding-top: 30px;
	}

	#mixer-popup{ width: 98%; border-radius: 10px;}
	.sts-mixer-screen{ padding: 0 15px; }
	.sts-mixer-screen-title{ font-size: 28px; margin: 15px 0; }
	.sts-mixer-screen-subtitle{ font-size: 16px; }
	.sts-mixer-screen-demo-notice{ font-size: 12px; }
	.sts-mixer-header{ padding: 15px; border-radius: 10px; background: #fff;}
	.sts-mixer-header ul li a{
		width: 10px;
		height: 10px;
		border-radius: 10px;
		background: #92e9f6;
		color: #92e9f6;
		font-size: 1px;
		text-indent: -9999px;
	}

	.sts-mixer-header ul li a.active{ background: #2d92a3; color: #2d92a3; }


	.sts-mixer-category>div{
		width: 120px;
		height: 120px;
	}

	.sts-mixer-category>div:before,
	.sts-mixer-category>div:after{
		width: 90px;
		height: 90px;
		top: 15px;
		left: 15px;
	}

	.sts-mixer-category h4 {
	    margin: 5px auto;
	    font-size: 12px;
	    min-height: 30px;
	}

	.ten-columns > .col-sm-2 { width: 50% !important; }

	.sts-mixer-footer{ padding: 15px; }

	.sts-mixer-collection, .sts-mixer-beat, .sts-mixer-affirmation{
		min-height: 180px;
	}
	.sts-mixer-collection>div, .sts-mixer-beat>div, .sts-mixer-affirmation>div{
		width: 120px;
		height: 120px;
	}
	.sts-mixer-collection h4, .sts-mixer-beat h4, .sts-mixer-affirmation h4{
		margin: 5px auto;
		font-size: 12px;
	}

	.sts-audioplayer-playpause, .sts-audioplayer-volume{
		width: 25px; font-size: 14px;
	}

	.sts-audioplayer-time{ width: 40px; font-size: 14px; }
	.sts-audioplayer-time-current{ left: 30px; }
	.sts-audioplayer-time-duration{ right: 30px; }
	.sts-audioplayer-bar{ left: 70px; right: 70px; }

	#sts-playlist th{ color: transparent; }

    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (max-width: 1199px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}