/*------------------------------------------ Defining variables */

:root                                                                       { 
                                                                              --padding: 24px;
                                                                              --half-padding: 12px;
                                                                              --doble-padding: 48px;
                                                                              --interface-height: 78px;
                                                                              --v-separation: 50px;
                                                                            }



/*------------------------------------------ Switches */

.mob-only                                                                   { display: block; }
.tab-only                                                                   { display: none; }
.lap-only                                                                   { display: none; }
.des-only                                                                   { display: none; }

.mob-off                                                                    { display: none; }
.tab-off                                                                    { display: block; }
.lap-off                                                                    { display: block; }
.des-off                                                                    { display: block; }

.big-only                                                                   { display: none; }
.big-off                                                                    { display: block; }

.hover-only                                                                 { display: none; }
.hover-off                                                                  { display: block; }

.off                                                                        { display: none; }
.obliterate                                                                 { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.admin-bar .admin-off                                                       { display: none; }



/*------------------------------------------ Padding and margin */

.padding                                                                    { padding-top: var(--padding); padding-right: var(--padding); padding-bottom: var(--padding); padding-left: var(--padding); }
.padding-v                                                                  { padding-top: var(--padding); padding-bottom: var(--padding); }
.padding-h                                                                  { padding-left: var(--padding); padding-right: var(--padding); }
.padding-no-top                                                             { padding-right: var(--padding); padding-bottom: var(--padding); padding-left: var(--padding); }
.padding-no-bottom                                                          { padding-top: var(--padding); padding-right: var(--padding); padding-left: var(--padding); }
.padding-no-left                                                            { padding-top: var(--padding); padding-right: var(--padding); padding-bottom: var(--padding); }
.padding-no-right                                                           { padding-top: var(--padding); padding-bottom: var(--padding); padding-left: var(--padding); }
.padding-top                                                                { padding-top: var(--padding); }
.padding-bottom                                                             { padding-bottom: var(--padding); }
.padding-left                                                               { padding-left: var(--padding); }
.padding-right                                                              { padding-right: var(--padding); }

.padding-grid                                                               { padding-top: var(--half-padding); padding-right: var(--half-padding); padding-bottom: var(--half-padding); padding-left: var(--half-padding); }
.padding-grid-v                                                             { padding-top: var(--half-padding); padding-bottom: var(--half-padding); }
.padding-grid-h                                                             { padding-left: var(--half-padding); padding-right: var(--half-padding); }
.padding-grid-no-top                                                        { padding-right: var(--half-padding); padding-bottom: var(--half-padding); padding-left: var(--half-padding); }
.padding-grid-no-bottom                                                     { padding-top: var(--half-padding); padding-right: var(--half-padding); padding-left: var(--half-padding); }
.padding-grid-no-left                                                       { padding-top: var(--half-padding); padding-right: var(--half-padding); padding-bottom: var(--half-padding); }
.padding-grid-no-right                                                      { padding-top: var(--half-padding); padding-bottom: var(--half-padding); padding-left: var(--half-padding); }
.padding-grid-top                                                           { padding-top: var(--half-padding); }
.padding-grid-bottom                                                        { padding-bottom: var(--half-padding); }
.padding-grid-left                                                          { padding-left: var(--half-padding); }
.padding-grid-right                                                         { padding-right: var(--half-padding); }

.margin-top                                                                 { margin-top: var(--padding); }
.margin-bottom                                                              { margin-bottom: var(--padding); }
.margin-left                                                                { margin-left: var(--padding); }
.margin-right                                                               { margin-right: var(--padding); }

.margin-grid-top                                                            { margin-top: var(--half-padding); }
.margin-grid-bottom                                                         { margin-bottom: var(--half-padding); }
.margin-grid-left                                                           { margin-left: var(--half-padding); }
.margin-grid-right                                                          { margin-right: var(--half-padding); }

.interface-height                                                           { padding-top: var(--interface-height); }
.v-separation                                                               { padding-top: var(--v-separation); }



@media(min-width: 900px){ /* -------------------------------------------- */
    
    /*------------------------------------------ Defining variables */

    :root                                                                       { 
                                                                                  --padding: 30px;
                                                                                  --half-padding: 15px;
                                                                                  --doble-padding: 60px;
                                                                                  --interface-height: 78px;
                                                                                  --v-separation: 60px;
                                                                                }
    
    
    
    /*------------------------------------------ Switches */
    
    .mob-only                                                                   { display: none; }
    .tab-only                                                                   { display: block; }
    .lap-only                                                                   { display: none; }
    .des-only                                                                   { display: none; }

    .mob-off                                                                    { display: block; }
    .tab-off                                                                    { display: none; }
    .lap-off                                                                    { display: block; }
    .des-off                                                                    { display: block; }
    
}



@media(min-width: 1200px){ /* -------------------------------------------- */
    
    /*------------------------------------------ Defining variables */

    :root                                                                       { 
                                                                                  --padding: 40px;
                                                                                  --half-padding: 20px;
                                                                                  --doble-padding: 80px;
                                                                                  --interface-height: 118px;
                                                                                  --v-separation: 70px;
                                                                                }
    
    

    /*------------------------------------------ Switches */
    
    .mob-only                                                                   { display: none; }
    .tab-only                                                                   { display: none; }
    .lap-only                                                                   { display: block; }
    .des-only                                                                   { display: none; }

    .mob-off                                                                    { display: block; }
    .tab-off                                                                    { display: block; }
    .lap-off                                                                    { display: none; }
    .des-off                                                                    { display: block; }
    
    .big-only                                                                   { display: block; }
    .big-off                                                                    { display: none; }
    
}



@media(hover: hover) { /* -------------------------------------------- */

    /*------------------------------------------ Switches */
    
    .hover-only                                                                 { display: block; }
    .hover-off                                                                  { display: none; }
    
}