/*

 -yyyyyyyyyso:`           
:MMMNNNNNNNNMNh-         
:MMM`     `:sNMNo        
:MMM`        :NMM:       
:MMM`         mMMo       
:MMM`        /NMN-       
:MMM-.....-/hNMMs.`      
:MMMNNNNNNMMMMMNNmdy+.   
.ooooooooooooooosydNMmo` 
                  `:mMMy 
                    -MMN-
                    -MMN-
                  `:mMMy 
.ooooooooooooooosydNMmo` 
:NNNNNNNNNNNNNNNNmdy+.   
`.................`      
`:::                     
:NNN`                    
:MMM`                    
:MMM`                    
:MMM`                    
-yyy`                          


Brand Purist
brandpurist.com
2020

 
█████████████████████████████████████████████████████████████████████████████████████████████████████████████████
*/



@import "typography.css";
@import "layout.css";
@import "design.css";



/* 
█████████████████████████████████████████████████████████████████████████████████████████████████████████████████
*/


:root                       { --pad:                80px; /* 60 */
                              --font-size:          40px; /* 50 */
                              --line-height:        60px; /* 75 */
                              --btn-radius:         100px;
                              --box-radius:         20px;
                              
                              --max-width:          100%;
                              --nav-height:         80px;
                              --line-weight:        1px;
                                  
                              --base-rgba:          255, 250, 240;
                              --dark-rgba:           40,  40,  42;
                              --accent-rgba:        219, 160, 160;
                              --primary-rgba:       230, 195, 160;
                              --secondary-rgba:     162, 188, 188;
                              --tertiary-rgba:      180, 200, 220;
                              --quaternary-rgba:    195, 170, 200;

                              --valid-rgba:          50, 255, 160;
                              --alert-rgba:         255,  50,  70;
                              --warning-rgba:       225, 160,  90;

                              --base:               rgb( var(--base-rgba)       );
                              --dark:               rgb( var(--dark-rgba)       );
                              --accent:             rgb( var(--accent-rgba)     );
                              --primary:            rgb( var(--primary-rgba)    );
                              --secondary:          rgb( var(--secondary-rgba)  );
                              --tertiary:           rgb( var(--tertiary-rgba)    );
                              --quaternary:         rgb( var(--quaternary-rgba)  );

                              --valid:              rgb( var(--valid-rgba)      );
                              --alert:              rgb( var(--alert-rgba)      );
                              --warning:            rgb( var(--warning-rgba)    );                              }



/* 
█████████████████████████████████████████████████████████████████████████████████████████████████████████████████

M E D I A             
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

@media screen and ( min-width:  1921px ) {
    
    :root                       { --nav-height:             120px;
                                  --pad:                    calc( 80px * 1.5 ); 
                                  --font-size:              calc( 40px * 1.5 );
                                  --line-height:            calc( 60px * 1.5 );                                 
                                  --line-weight:            3px;                                                }
}

@media screen and ( max-width:  1440px ) {
    
    :root                       { --pad:                    calc( 80px / 1.5 ); 
                                  --font-size:              calc( 40px / 1.5 );
                                  --line-height:            calc( 60px / 1.5 );                                 }
}


@media screen and ( max-width:  1000px ) {
    
    :root                       { --pad:                    calc( 80px / 3 );                                   }
    
    .col-1-8                    { flex:                     0 0 50%;                                            }
    
    .col-2-8,
    .col-3-8,
    .col-4-8,
    .col-5-8,
    .col-6-8,
    .col-7-8,
    #posts_wrap .col-3-8        { flex:                     0 0 100%;                                           }
    
}

@media screen and ( max-width:  650px ) {
    
    :root                       { --pad:                    calc( 80px / 5 );                                   }
    
}


/* All in One Security Maintenance Mode Styling */
 body                           { background-color:         var(--base-color) !important;                       }
.aiowps-site-lockout-msg        { color:                    var(--font-color) !important;                       }
.aiowps-site-lockout-box        { border-color:             var(--font-color);!important;                       }