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

/* Tablet (Portrait), Design for a width of 768px */
@media (max-width: 1023px) {
    body                                                    {min-width: 768px !important;}  
    .desktop, .mobile                                       {display: none;}
    .tablet                                                 {display: block;}                       
    .main-wrapper                                           {width: 768px;}     
    .contents-wrapper                                       {width: 740px;} 
    footer                                                  {max-width: 740px;} 
    

    /* Form */
    .row-frequency-recurring input[type=radio]              {margin: 2px 4px 0 4px;}        
    
    /* Others */
    .container-premium-box                                  {position: static;} 
    .container-premium-box .wrapper                         {width: 100%; padding-right: 18px;}
    .container-premium-box .bg img                          {width: 100%;}
    .container-premium-box .body                            {width: 100%; max-width: 360px;}
    .button-pink                                            {padding: 12px 20px 10px;}      
    
    .container-plugins > .wrapper .left                     {width: 100%; text-align: center; float: none;}
    .container-plugins > .wrapper .right                    {width: 100%; padding-top: 25px;  float: none;} 
    .container-goal-met                                     {top: 0px; left: 0px; margin: 0; text-align: center;}
    
    .iframe-body                                            {position: relative; left: -20px;}  
    
        
}

/* Mobile (Landscape), Design for a width of 480px */
@media (max-width: 767px) {
    .desktop, .tablet                                       {display: none;}
    .mobile                                                 {display: block;}   
    
    /* Wrapper */       
    body                                                    {min-width: 480px !important; font-size: 16px;}
    .main-wrapper                                           {width: 480px;}
    .contents-wrapper                                       {width: 460px;}
    .video-wrapper                                          {width: 440px;} 
    footer                                                  {max-width: 480px;}     
    
    /* Video */ 
    .container-video .body                                  {width: 440px; height: 247px;} /* width: 460px; height: 258px; */                   
    
    /* Form */
    .container-form                                         {background: none; border-top: none;}
    form .fieldPremium span                                 {width: 91%;}
    .mobile-row-cardtype                                    {width: 100%; display: block; margin: 0 0 0.3em; overflow: hidden; height: 44px;}       
    .button-green,
    .button-blue                                            {padding: 12px 20px 10px;}  
    .row-frequency span                                     {width: 90%;}
    
    /* Others */    
    /*.premium-01, .premium-02                              {display: none;}*/
    h1                                                      {font-size: 1.3em;}
    h2                                                      {font-size: 1.2em;} 
    .container-contents .contents-wrapper                   {padding: 0px 8px;} 
    .body-content .left .content-wrapper                    {padding-right: 0px;}
    .iframe-body                                            {left: 0px;}        
    .container-headline                                     {margin-bottom: 0px;}

    .fix-me-01                                              {padding: 20px 10px 0px;}
    .container-story                                        {padding-top: 0px !important;}
    
}

/* Mobile (Portrait), Design for a width of 320px */
@media (max-width: 479px) {
    body                                                    {min-width: 320px !important;}
    .main-wrapper                                           {width: 320px;}
    .contents-wrapper                                       {width: 320px;}
    .video-wrapper                                          {width: 300px;}     
    .container-video .body                                  {width: 300px; height: 169px;}              
    footer                                                  {max-width: 300px;}     
    
    /* Video */
    .container-video .body                                  {width: 300px; height: 169px;}              
    
    /* Form */  
    .row-frequency-recurring input[type=radio]              {margin: 2px 4px 0 4px;}    
    .form-wrapper .wrapper                                  {padding: 20px 10px;}       
    
    /* Others */
    .container-premium-box .body                            {bottom: 10px;} 
    .iframe-body                                            {width: 100%; height: 450px; }
    
        
}