/* 
   JRW Default Layout
   v1.0 | 20200624
   License: private domain
*/

.wrapper { width:1200px; padding:0; margin:0 auto; }

.clearfix { clear:both; }

.fl { float:left !important; }
.fr { float:right !important; }
.cn { margin:0 auto !important; }

.txt-cn { text-align:center; }

.default-show { display:none; }
.mobile-show, .mb-show { display:none; }

/* 
================================
   GRID CLASSES
================================
*/

.grid { float:left; margin-right:3%; box-sizing:border-box; }
/* {{{BEGIN}}} GRID : TEST STYLING */
/*.grid { background-color:#ccc; padding:25px; }*/
/* {{{END}}} GRID : TEST STYLING */
.grid:last-of-type, .grid-last { margin-right:0 !important; }

.grid-5,
.grid-10,
.grid-15,
.grid-20,
.grid-25,
.grid-33,
.grid-40,
.grid-50,
.grid-60,
.grid-66,
.grid-75,
.grid-80,
.grid-90 
{ }

.grid-5 { width:2%; }
.grid-10 { width:7%; }
.grid-15 { width:14.165%; }
.grid-20 { width:17.6%; }
.grid-25 { width:22.75%; }
.grid-33 { width:31.33%; }
.grid-40 { width:38.5%; }
.grid-50 { width:48.5%; }
.grid-60 { width:58.5%; }
.grid-66 { width:65.65%; }
.grid-75 { width:72%; }
.grid-80 { width:77%; }
.grid-90 { width:87%; }
.grid-100 { width:100%; }


/* 
================================
    DEFAULT : LARGE SCREEN
================================
*/
@media (min-width: 1600px) and (max-width: 3200px) {
    
     /*.grid { background-color:#ff0000; }*/
     
    .default-show { display:block; }
    .mobile-show, .mb-show { display:none; }
}

/* 
================================
    DEFAULT : MEDIUM SCREEN
================================
*/
@media (min-width: 1300px) and (max-width: 1599px) {
    
     /*.grid { background-color:#e500ff; }*/
     
    .default-show { display:block; }
    .mobile-show, .mb-show { display:none; }

     .wrapper { padding:0; }
}
 
/* 
================================
    DEFAULT : SMALL LAPTOP
================================
*/
@media (min-width: 1025px) and (max-width: 1299px) {
    
     /*.grid { background-color:#ff6a00; }*/
 
    .default-show { display:block; }
    .mobile-show, .mb-show { display:none; }

     .wrapper { width:100%; box-sizing:border-box; padding:0 3%; margin:0; }
}
 
/* 
================================
        MOBILE : TABLET
================================
*/
@media (min-width: 769px) and (max-width: 1024px) {
    
    /*.grid { background-color:#ffd800; }*/
    
    .default-show { display:none; }
    .mobile-show, .mb-show { display:block !important; }

    .wrapper { width:100%; box-sizing:border-box; padding:0 4%; margin:0; }

    .grid-15:last-of-type,
    .grid-20:last-of-type,
    .grid-25:last-of-type
    { margin-right:0; }

    .grid-15,
    .grid-20,
    .grid-25
    { width:48.5%; margin-right:3%; margin-bottom:3%; }

    .grid-15:nth-child(2n+2),
    .grid-20:nth-child(2n+2),
    .grid-25:nth-child(2n+2)
    { margin-right:0; }
}

/* 
================================
      MOBILE : LARGE PHONE
================================
*/
@media (min-width: 451px) and (max-width: 768px) {

    /*.grid { background-color:#0094ff; }*/
  
    .default-show { display:none; }
    .mobile-show, .mb-show { display:block !important; }

    .wrapper { width:100%; box-sizing:border-box; padding:0 5%; margin:0; }

    .grid-15:last-of-type,
    .grid-20:last-of-type,
    .grid-25:last-of-type,
    .grid-33:last-of-type,
    .grid-40:last-of-type,
    .grid-60:last-of-type,
    .grid-66:last-of-type
    { margin-right:0; }

    .grid-15,
    .grid-20,
    .grid-25,
    .grid-33,
    .grid-40,
    .grid-60,
    .grid-66
    { width:48.5%; margin-right:3%; margin-bottom:3%; }

    .grid-15:nth-child(2n+2),
    .grid-20:nth-child(2n+2),
    .grid-25:nth-child(2n+2),
    .grid-33:nth-child(2n+2),
    .grid-40:nth-child(2n+2),
    .grid-60:nth-child(2n+2),
    .grid-66:nth-child(2n+2)
    { margin-right:0; }
}

/* 
================================
     MOBILE : REGULAR PHONE
================================
*/

@media (min-width: 280px) and (max-width: 450px) {
    
    /*.grid { background-color:#00ff21; }*/
    
    .default-show { display:none; }
    .mobile-show, .mb-show { display:block !important; }

    .wrapper { width:100%; box-sizing:border-box; padding:0 6%; margin:0; }

    .grid { float:none; margin-right:0; margin-bottom:5%; }

    .grid-5,
    .grid-10,
    .grid-15,
    .grid-20,
    .grid-25,
    .grid-33,
    .grid-40,
    .grid-50,
    .grid-60,
    .grid-66,
    .grid-75,
    .grid-80,
    .grid-90 
    { width:100%; }
}