@charset "utf-8";
/* CSS Document */

/* Table of Contents
-----------------------------------------------------------------------------
	1. Mobile
	2. Large Mobile
	3. iPad
	4. large desktop
	5. Other
*/

/* 1. Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (max-width:640px) {
    /*--------- HOME PAGE ------------*/
     .container{ padding: 0 10px;}
    .banner-content .container{ padding:50px 10px;}
    h1{ font-size: 30px; line-height: 34px; margin-bottom: 10px;}
    h2{ font-size: 28px; line-height: 32px; margin-bottom: 10px;}
    h3{ font-size: 24px; line-height: 28px; margin-bottom: 10px;}
    h5{ font-size: 28px; line-height: 32px; margin-bottom: 20px;}
    p{ font-size: 16px; line-height: 20px;}
    .banner-content .container p{ font-size: 18px; line-height: 28px;}
    .middle{ padding: 50px 0 20px;}
    .middle .progressbar-content{ padding: 0;}
    .middle .progressbar-content .progress-bar-block{ padding: 0 15px; width: 48.5%; margin-bottom: 30px;}
    .progressbar-content .progress-bar-block .progress-bar{ margin-bottom: 10px;}
    .progressbar-content .progress-bar-block .progress-bar span{ font-size: 28px; line-height: 30px;}
    .progressbar-content .progress-bar-detail{ font-size: 18px; line-height: 22px;}
    
    .bottom{ padding: 50px 0 20px;}
    .title, .sub-title{ margin-bottom: 30px;}
    .bottom .progressbar-content .progress-bar-block{ padding: 0 20px; width: 48.2%; margin-bottom: 30px;}
    .bottom .progressbar-content .progress-bar-block .progress-bar span{ font-size: 20px; line-height: 24px;}
    .archive-blocks-grp .archive-block{ width: 100%; margin-left: 0; margin-bottom: 30px;}

    /*--------- Q1 REPORT PAGE ------------*/
    .logo{ margin-bottom: 30px;}
    .radio-report{ padding: 50px 0;}
    .radio-report .radio-report-content h3{ margin-bottom: 20px;}
    .radio-report .radio-report-content p{ font-size: 18px; line-height: 23px;}
    .amount-block{ font-size: 22px; line-height: 40px;}
    .amount-block .num-grp{ margin-bottom: 30px;}
    .amount-block .num-grp:before{ width:100%; left: 0;}
    .amount-block .num{ margin-left: 0; width: 23px; height: inherit;}
    .payment-block{ padding: 15px 0;}
    .payment-block .payment-title{ font-size: 26px; line-height: 30px;}
    .payee-count-blocks-grp{ padding: 27px 0 21px;}
    .payee-base{ padding-left: 0; }
    .soundxchange-effect{ padding: 50px 0;}
    .soundxchange-effect .effect-blocks-grp .effect-block-left .title{ font-size: 20px; line-height: 24px;}
    .soundxchange-effect .effect-blocks-grp .effect-block-right{ padding-right: 0; width: 100%;}
    .soundxchange-effect .effect-blocks-grp .effect-block-right .view-report-link{ padding: 10px;}
    .find-sound{ padding: 50px 0;}
    .find-sound .bg-img{display: none;}
    .find-sound .container{ padding-right: 10px;}
    .find-sound .container .find-sound-top{ padding:0 0px 0 0; margin-bottom: 30px;}
    .find-sound .find-sound-top h2{ margin-bottom: 20px;}
    .find-sound .find-sound-top p.title{ font-size: 18px; line-height: 26px; margin-bottom: 20px;}
    blockquote{ padding:15px 15px 15px 35px; padding-bottom: 0; -webkit-background-size: 25px;
    background-size: 25px; background-position: 0 19px;}
    blockquote p{ font-size: 18px; line-height: 22px; margin-bottom: 10px;}
    blockquote span{ font-size: 14px; line-height: 18px;}
    .video-content{ padding:50px 0 30px;}
    .video-content .play-video-block{ margin-bottom: 20px; height: 280px;}
    .video-content .play-video-block .play-video-btn{ width: 50px;height: 50px; margin:-25px 0 0 -25px;}
    .video-content .play-video-block .play-video-btn img{ width: 20px; margin: -12px 0 0 -10px;}
    .video-content .video-text p{ font-size: 16px; line-height: 24px;}
    .q1-report footer .q1-footer-txt{ padding: 20px;}
    .soundxchange-effect .effect-blocks-grp .effect-block-left{ width: 100%;}
    footer{ padding: 50px 0;}
    .q1-report footer .q1-footer-txt p{ font-size: 18px; line-height: 22px;}
    
    .paid-to-blocks-grp .paid-to-blocks-inner .paid-to-block img{ width: 30px; margin-right: 5px;}
    .paid-to-blocks-grp .paid-to-blocks-inner .paid-to-block .text{ width: 80px; font-size: 16px; line-height: 20px;}
    .paid-to-blocks-grp .paid-to-blocks-inner .plus-block{ font-size: 40px; line-height: 58px; margin: 0 10px;}
    
    .payee-count-blocks-grp .payee-count .payee-count-left{ width: 100%;}
    .payee-count-blocks-grp .payee-count .payee-count-right{ width: 100%;}
    .payee-count-blocks-grp .payee-count .payee-count-left .payee-title{ font-size: 22px; line-height: 28px;}
    .payee-count-blocks-grp .payee-count .payee-count-left .payee-num{ font-size: 30px; line-height: 34px;}
    .radio-report-bottom .tweet-btn{ padding: 10px;}
    .radio-report-bottom .share-news a{ margin-right: 0;}
    
    /*--------- Q2 REPORT PAGE ------------*/
    .q2-report-payee-count-blocks-grp { padding: 0;}
    .q2-report-payee-count-blocks-grp .payee-count { width: 100%;}
    .q2-report-payee-count-blocks-grp .payee-count:first-child{ margin-bottom: 30px;}
    .soundxchange-q2-payments .q2-payments-block { max-width: 540px; width: 100%;}
    .soundxchange-q2-payments .q2-payments-block .payment { font-size: 37px; line-height: 41px; padding: 15px;}
    
    /*--------- Q2 REPORT PAGE ------------*/
    .q3-report .money-status-blocks-grp { width: 100%; margin-bottom: 30px;}
    .q3-report .increase-payment-block { width: 100%; text-align: center;}
    .increase-payment-block .progressbar-content .progress-bar-block .progress-bar-percent { width: auto;}
    .increase-payment-block .progressbar-content .progress-bar-block .progress-bar-detail { text-align: center;}
    .q3-report .increase-payment-blocks-grp { padding: 25px 0px 50px;}
    .q3-report .increase-payment-blocks-grp .increase-payment-block { width: 100%; padding: 30px 0; border-left: 0;}
    .q3-report .increase-payment-blocks-grp .increase-payment-block .progress-bar-detail { max-width: 100%;}
    .q3-report .q3-report-payee-count-blocks-grp .payee-count { border-left: 0; padding: 30px 0px 20px}  
    .q3-report footer .q3-footer-txt { padding: 40px 20px;}
    .soundxchange-honer p, .q3-report .soundxchange-effect p { font-size: 18px; line-height: 24px;}
    .soundxchange-honer { padding: 50px 0 30px;}
    .q2-report-payee-count-blocks-grp .payee-count .payee-count-left { text-align: center; margin-bottom: 20px;}
    
    /*--------- Q4 REPORT PAGE ------------*/
    .q4-report .radio-report-bottom .tweet-btn { width: auto; font-size: 20px; line-height: 24px; margin-bottom: 20px;}
    .q4-report .big-title { font-size: 38px; line-height: 43px;}
    .q4-report .increase-payment-block .progressbar-content .progress-bar-block .progress-bar-detail { max-width: 100%;}
    .soundx-top20-charts h5 { font-size: 28px; line-height: 32px;}
    .soundx-top20-charts .top20-txt p { font-size: 20px; line-height: 26px;}
    .soundx-top20-charts .read-more { margin-top: 10px;}
    .soundx-top20-charts .top20-imgs { margin-bottom: 0;}
    .soundx-top20-charts .top20-imgs .img-block { width: 100%; margin: 10px 0;}
    footer .report-footer-txt.orange-bg { padding: 40px 20px;}
}

/* 2. Large Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (min-width:641px) and (max-width:767px) {
    /*--------- HOME PAGE ------------*/
    .container{ padding: 0 10px;}
    .banner-content .container{ padding:145px 10px;}
    h1{ font-size: 40px; line-height: 44px;}
    h2{ font-size: 34px; line-height: 38px;}
    h3{ font-size: 26px; line-height: 30px;}
    h5{ font-size: 44px; line-height: 48px;}
    
    .banner-content .container p{ font-size: 20px; line-height: 30px;}
    .middle .progressbar-content{ padding: 0;}
    .middle .progressbar-content .progress-bar-block{ padding: 0 15px; width: 23.5%;}
    .progressbar-content .progress-bar-block .progress-bar span{ font-size: 28px; line-height: 30px;}
    .progressbar-content .progress-bar-detail{ font-size: 18px; line-height: 22px;}
    .bottom .progressbar-content .progress-bar-block{ padding: 0 10px; width: 23.2%;}
    .bottom .progressbar-content .progress-bar-block .progress-bar span{ font-size: 20px; line-height: 24px;}
    .archive-blocks-grp .archive-block{ width: 100%; margin-left: 0; margin-bottom: 30px;}
    
    /*--------- Q1 REPORT PAGE ------------*/
    .radio-report{ padding: 50px 0;}
    .radio-report .radio-report-content h3{ margin-bottom: 30px;}
    .radio-report .radio-report-content p{ font-size: 21px; line-height: 26px;}
    .amount-block{ font-size: 46px; line-height: 92px;}
    .amount-block .num-grp:before{ width: calc( 100% + 4px ); left: -4px;}
    .amount-block .num{ margin-left: -4px; width: 50px; height: 92px;}
    .payment-block{ padding: 30px 0;}
    .payee-count-blocks-grp{ padding: 37px 0 31px;}
    .payee-base{ padding-left: 0; }
    .soundxchange-effect{ padding: 50px 0;}
    .soundxchange-effect .effect-blocks-grp .effect-block-left .title{ font-size: 22px; line-height: 26px;}
    .soundxchange-effect .effect-blocks-grp .effect-block-right{ padding-right: 0; width: 100%;}
    .soundxchange-effect .effect-blocks-grp .effect-block-right .view-report-link{ padding: 10px;}
    .find-sound{ padding: 50px 0;}
    .find-sound .bg-img{ width: 130px;}
    .find-sound .container{ padding-right: 10px;}
    .find-sound .container .find-sound-top{ padding:0 120px 0 0; margin-bottom: 30px;}
    .find-sound .find-sound-top h2{ margin-bottom: 20px;}
    .find-sound .find-sound-top p.title{ font-size: 22px; line-height: 30px; margin-bottom: 30px;}
    blockquote{ padding-right: 30px; padding-bottom: 0;}
    blockquote p{ font-size: 22px; line-height: 26px;}
    blockquote span{ font-size: 16px; line-height: 20px;}
    .video-content{ padding-top: 50px;}
    .video-content .play-video-block .play-video-btn{ width: 150px;height: 150px; margin:-75px 0 0 -75px;}
    .video-content .play-video-block .play-video-btn img{ width: 60px; margin: -37px 0 0 -30px;}
    .video-content .video-text p{ font-size: 20px; line-height: 28px;}
    .q1-report footer .q1-footer-txt{ padding: 40px;}
    .soundxchange-effect .effect-blocks-grp .effect-block-left{ width: 100%;}
    footer{ padding: 50px 0;}
    .q1-report footer .q1-footer-txt p{ font-size: 22px; line-height: 24px;}
    
    /*--------- Q2 REPORT PAGE ------------*/
    .q2-report-payee-count-blocks-grp { padding: 0;}
    .q2-report-payee-count-blocks-grp .payee-count { width: 100%;}
    .q2-report-payee-count-blocks-grp .payee-count:first-child{ margin-bottom: 30px;}
    
    /*--------- Q2 REPORT PAGE ------------*/
    .q3-report .money-status-blocks-grp { width: 100%; margin-bottom: 30px;}
    .q3-report .increase-payment-block { width: 100%; text-align: center;}
    .increase-payment-block .progressbar-content .progress-bar-block .progress-bar-percent { width: auto;}
    .increase-payment-block .progressbar-content .progress-bar-block .progress-bar-detail { text-align: center;  max-width: 50%;}
    .q3-report .increase-payment-blocks-grp { padding: 25px 0px 50px;}
    .q3-report .increase-payment-blocks-grp .increase-payment-block { width: 100%; padding: 30px 0; border-left: 0;}
    .q3-report .increase-payment-blocks-grp .increase-payment-block .progress-bar-detail { max-width: 50%;}
    .q3-report .q3-report-payee-count-blocks-grp .payee-count { border-left: 0;}
    
    /*--------- Q4 REPORT PAGE ------------*/
    .q4-report .big-title { font-size: 43px; line-height: 43px;}
    .q4-report .increase-payment-block .progressbar-content .progress-bar-block .progress-bar-detail { max-width: 100%;}
    .soundx-top20-charts h5 { font-size: 44px;}
}

/* 3. iPad responsive css 768px to 1023px
------------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:1023px) {
    .container{ padding: 0 10px;}
    .banner-content .container{ padding:145px 10px;}
    h1{ font-size: 70px;}
    h2{ font-size: 50px; line-height: 54px;}
    h3{ font-size: 32px; line-height: 36px;}
    h5{ font-size: 44px; line-height: 48px;}
    /*--------- HOME PAGE ------------*/
    .banner-content .container p{ font-size: 24px; line-height: 34px;}
    .middle .progressbar-content{ padding: 0;}
    .middle .progressbar-content .progress-bar-block{ padding: 0 25px;}
    .progressbar-content .progress-bar-block .progress-bar span{ font-size: 38px; line-height: 40px;}
    .bottom .progressbar-content .progress-bar-block{ padding: 0 5px; width: 23.2%;}
    .bottom .progressbar-content .progress-bar-block .progress-bar span{ font-size: 20px; line-height: 24px;}
    
    /*--------- Q1 REPORT PAGE ------------*/
    .amount-block .num-grp:before{ width: calc( 100% + 4px ); left: -4px;}
    .amount-block{ font-size: 50px; line-height: 102px;}
    .amount-block .num{ margin-left: -4px; width: 60px; height: 102px;}
    .soundxchange-effect{ padding: 80px 0;}
    .soundxchange-effect .effect-blocks-grp .effect-block-left .title{ font-size: 26px; line-height: 30px;}
    .soundxchange-effect .effect-blocks-grp .effect-block-right{ padding-right: 0;}
    .soundxchange-effect .effect-blocks-grp .effect-block-right .view-report-link{ padding: 10px;}
    .find-sound{ padding: 80px 0;}
    .find-sound .bg-img{ width: 170px;}
    .find-sound .container{ padding-right: 10px;}
    .find-sound .container .find-sound-top{ padding:0 120px 0 0;}
    .find-sound .find-sound-top p.title{ font-size: 26px; line-height: 34px; margin-bottom: 30px;}
    blockquote{ padding-right: 30px;}
    blockquote p{ font-size: 26px; line-height: 30px;}
    .video-content{ padding-top: 80px;}
    .video-content .play-video-block .play-video-btn{ width: 200px;height: 200px; margin: -100px 0 0 -100px;}
    .video-content .play-video-block .play-video-btn img{ width: 80px; margin: -50px 0 0 -40px;}
    .q1-report footer .q1-footer-txt{ padding: 40px;}
    
    /*--------- Q2 REPORT PAGE ------------*/
    .q2-report-payee-count-blocks-grp { padding: 0;}
    .q2-report-payee-count-blocks-grp .payee-count { width: 100%;}
    .q2-report-payee-count-blocks-grp .payee-count:first-child{ margin-bottom: 30px;}
    
    /*--------- Q2 REPORT PAGE ------------*/
    .q3-report .money-status-blocks-grp { width: 100%; margin-bottom: 30px;}
    .q3-report .increase-payment-block { width: 100%; text-align: center;}
    .increase-payment-block .progressbar-content .progress-bar-block .progress-bar-percent { width: auto;}
    .increase-payment-block .progressbar-content .progress-bar-block .progress-bar-detail { text-align: center;}
    .q3-report .increase-payment-blocks-grp { padding: 25px 0px 50px;}
    .q3-report .increase-payment-blocks-grp .increase-payment-block { width: 100%; padding: 30px 0; border-left: 0;}
    .q3-report .increase-payment-blocks-grp .increase-payment-block .progress-bar-detail { max-width: 100%;}
    .q3-report .q3-report-payee-count-blocks-grp .payee-count { border-left: 0;}
}

@media (min-width:768px){
    .increase-payment-block .progressbar-content .progress-bar-block .progress-bar-percent { width: auto;}
    .increase-payment-block .progressbar-content .progress-bar-block .progress-bar-detail { text-align: center;}
    .q3-report .increase-payment-blocks-grp { padding: 25px 0px 0px;}
    .q3-report .increase-payment-blocks-grp .increase-payment-block { width: 100%; padding: 30px 0; border-left: 0;}
    .q3-report .increase-payment-blocks-grp .increase-payment-block .progress-bar-detail { max-width: 50%;}
    .q3-report .q3-report-payee-count-blocks-grp .payee-count { border-left: 0;}
}

/* 4. large desktop responsive css 1024px to 1199px
------------------------------------------------------------------------------*/
@media (min-width:1024px) and (max-width:1080px) {	
    .container{ padding: 0 10px;}
    .banner-content .container{ padding: 145px 10px;}
    
    /*--------- Q2 REPORT PAGE ------------*/
    .q2-report-payee-count-blocks-grp { padding: 0;}
    
    
}

/* 5. Other media-query
------------------------------------------------------------------------------*/
@media (min-width:1024px) and (max-width:1400px) {	
    /*--------- Q1 REPORT PAGE ------------*/
    .find-sound .bg-img{ width: 200px;}
}