/**
 * Layout CSS definitions
 *
 * @package WordPress
 * @subpackage kaos
 * @since kaos 1.0
 */


/**
 * Mobile devices (below 480px)
 */


/**
 * HTML
 */
html
{
    width:  100%;
    height: 100%;
}


/**
 * Body
 */
body
{
    width:            100%;
    /*height:           100%;*/
    font-size:        14px;
    line-height:      1.5;
    background-color: #ffffff;
}


/**
 * Grid
 */
.grid
{
    margin:   auto;
    overflow: hidden;
    width:    100%;
}

.row
{
    margin:   0.0000% auto;
    overflow: hidden;
    width:    auto;
}

.column
{
    margin:   0.0000%;
    display:  block;
    overflow: hidden;
    float:    left;
}

.element1   { width: 100.0000%; }
.element2   { width: 100.0000%; }
.element3   { width: 100.0000%; }
.element4   { width: 100.0000%; }
.element5   { width: 100.0000%; }
.element6   { width: 100.0000%; }
.element7   { width: 100.0000%; }
.element8   { width: 100.0000%; }
.element9   { width: 100.0000%; }
.element10 { width: 100.0000%; }
.element11 { width: 100.0000%; }
.element12 { width: 100.0000%; }

.space1   { margin-left: 0.0000%; }
.space2   { margin-left: 0.0000%; }
.space3   { margin-left: 0.0000%; }
.space4   { margin-left: 0.0000%; }
.space5   { margin-left: 0.0000%; }
.space6   { margin-left: 0.0000%; }
.space7   { margin-left: 0.0000%; }
.space8   { margin-left: 0.0000%; }
.space9   { margin-left: 0.0000%; }
.space10 { margin-left: 0.0000%; }
.space11 { margin-left: 0.0000%; }

.content
{
    margin: 0.0em 0.75em;
    width:  auto;
}

.grid:after
{
    display:    block;
    visibility: hidden;
    clear:      bloth;
    height:     0;
    content:    '\0020';
}

.clear
{
    display:    block;
    visibility: hidden;
    overflow:   hidden;
    clear:      both;
    width:      0;
    height:     0;
}

.row,
.clear
{
    zoom: 1;
}

.row:before,
.row:after,
.clear:before,
.clear:after
{
    display:    block;
    visibility: hidden;
    overflow:   hidden;
    width:      0;
    height:     0;
    content:    '\0020';
}

.row:after,
.clear:after
{
    clear: both;
}


/**
 * Spacing
 */
.row.spacing:first-child
{
    margin-top: 0.0em !important;
}

.row.spacing
{
    margin-top: 1.5em;
}

.column.spacing:first-child
{
    margin-top: 0.0em !important;
}

.column.spacing
{
    margin-top: 1.5em;
}

.column.center
{
    margin-left:  auto !important;
    margin-right: auto !important;
    float:        none !important;
}


/**
 * Directions
 */
.column.ltr
{
    float: left !important;
}

.column.rtl
{
    float: right !important;
}


/**
 * Visibility
 */
.overflow
{
    overflow: visible !important;
}

.hidden
{
    display:    none;
    visibility: hidden;
}

.hidden-mobile     { display: none    !important; }
.hidden-tablet     { display: inherit !important; }
.hidden-desktop   { display: inherit !important; }

.visible-mobile   { display: inherit !important; }
.visible-tablet   { display: none    !important; }
.visible-desktop { display: none    !important; }


/**
 * Container
 */
#container
{
    width:            100%;
    background-color: #f7f7f7;
}


/**
 * Header
 */
#header
{
    padding:          1.5em 0.0em;
    width:            100%;
    background-color: #ffffff;
}


/**
 * Main
 */
#main
{
    padding:          3.0em 0.0em;
    width:            100%;
    min-height:       450px;
    background-color: #f7f7f7;
}

#main .section
{
    padding-top: 3.0em;
}

#main .section:first-child
{
    padding-top: 0.0em !important;
}


/**
 * Footer
 */
#footer
{
    padding:          1.5em 0.0em;
    width:            100%;
    background-color: #ffffff;
}


/**
 * Logo
 */
#logo
{
    margin:  0.0em auto;
    display: block;
    width:   220px;
    height:  auto;
}


/**
 * Menu
 */
#menu
{
}


/**
 * Menu toggle
 */
#menu-toggle
{
    margin:  0.0em auto;
    display: block;
    width:   2.0em;
    height:  2.0em;
}


/**
 * Navigation menu
 */
#navigation-menu
{
    width: 100%;
    font:  400 normal normal 1.0em/1.0 var(--kaos-font);
}

#navigation-menu ul
{
    width:      100%;
    text-align: center;
}

#navigation-menu li
{
    margin:     0.0em;
    display:    block;
    width:      100%;
    text-align: center;
}

#navigation-menu li a
{
    padding:         0.25em 0.0em/*0.375em*/;
    display:         inline-block;
    width:           auto;
    text-decoration: none;
    color:           #69696b;
}


/**
 * User menu
 */
#user-menu
{
    width: 100%;
    font:  400 normal normal 1.0em/1.0 var(--kaos-font);
}

#user-menu > ul
{
    width:      100%;
    text-align: center;
}

#user-menu > ul > li
{
    margin:     0.0em;
    display:    block;
    text-align: center;
}

#user-menu > ul > li > a
{
    padding:         0.375em 0.375em;
    display:         inline-block;
    width:           auto;
    text-decoration: none;
    color:           #cfcfcf;
}


/**
 * Language list
 */
#language-list
{
    margin: 0.375em auto;
    width:  auto;
}

#language-list ul
{
    width:      100%;
    text-align: center;
}

#language-list li
{
    margin-left: 0.375em !important;
    display:     inline;
}

#language-list li:first-child
{
    margin-left: 0.0em !important;
}

#language-list li a
{
    display:    inline-block;
    text-align: center;
}

#language-list .flag
{
    margin:  0.0em auto;
    padding: 0.0em;
    display: block;
    width:   1.6666em;
    height:  1.0em;
}


/**
 * Legal menu
 */
#legal-menu
{
    width: 100%;
    font:  400 normal normal 1.0em/1.5 var(--kaos-font);
    color: #69696b;
}

#legal-menu ul
{
    width:      100%;
    text-align: center;
}

#legal-menu li
{
    margin:     0.0em 0.5em;
    display:    inline-block;
    text-align: left;
}

#legal-menu li a
{
    text-decoration: none;
    color:           #69696b;
}


/**
 * Client menu
 */
#client-menu
{
}

#client-menu a
{
    padding:          0.75em 1.0em;
    display:          block;
    width:            auto;
    font:             400 normal normal 1.0em/1.5 var(--kaos-font);
    text-decoration:  none;
    color:            #69696b;
    background-color: #ffffff;
}


/**
 * Page
 */
#page
{
}


/**
 * Events
 */
#events
{
}

#events article
{
    padding:          0.75em 0.0em;
    display:          block;
    width:            100%;
    border-top:       1px solid #e7e7e7;
    font:             400 normal normal 1.0em/1.5 var(--kaos-font);
    text-decoration:  none;
}

/*#events article:last-child
{
    border-bottom: 1px solid #e7e7e7;
}*/

#events .all-events
{
    margin:           1.5em auto 0.0em auto;
    padding:          0.75em 1.0em;
    display:          block;
    width:            10.0em;
    border:           none;
    font:             400 normal normal 1.0em/1.5 var(--kaos-font);
    text-align:       center;
    text-decoration:  none;
    color:            #69696b;
    background-color: #ffffff;
}


/**
 * Maintainance
 */
#maintainance
{
    width: 100%;
}

#maintainance .container
{
    margin:    10.0% auto;
    padding:   3.0em;
    max-width: 300px;
}

#maintainance .logo
{
    margin-bottom: 1.5em;
    display:       block;
    width:         100%;
    height:        auto;
}




/**
 * Tablets (768px and up)
 */
@media only screen and (min-width: 768px)
{

/**
 * Body
 */
body
{
    font-size:   14px;
    line-height: 1.5;
}


/**
 * Grid
 */
.grid
{
    margin: auto;
    width:  768px;
}

.element1   { width:   8.3333%; }
.element2   { width:  16.6666%; }
.element3   { width:  25.0000%; }
.element4   { width:  33.3333%; }
.element5   { width:  41.6666%; }
.element6   { width:  50.0000%; }
.element7   { width:  58.3333%; }
.element8   { width:  66.6666%; }
.element9   { width:  75.0000%; }
.element10 { width:  83.3333%; }
.element11 { width:  91.6666%; }
.element12 { width: 100.0000%; }

.space1   { margin-left:  8.3333%; }
.space2   { margin-left: 16.6666%; }
.space3   { margin-left: 25.0000%; }
.space4   { margin-left: 33.3333%; }
.space5   { margin-left: 41.6666%; }
.space6   { margin-left: 50.0000%; }
.space7   { margin-left: 58.3333%; }
.space8   { margin-left: 66.6666%; }
.space9   { margin-left: 75.0000%; }
.space10 { margin-left: 83.3333%; }
.space11 { margin-left: 91.6666%; }


/**
 * Spacing
 */
.column.spacing
{
    margin-top: 0.0em;
}


/**
 * Visibility
 */
.hidden-mobile     { display: inherit !important; }
.hidden-tablet     { display: none    !important; }
.hidden-desktop   { display: inherit !important; }

.visible-mobile   { display: none    !important; }
.visible-tablet   { display: inherit !important; }
.visible-desktop { display: none    !important; }


/**
 * Logo
 */
#logo
{
    margin: 1.075em 0.0em;
    width:  15.5em;
    height: 3.1em;
}


/**
 * Navigation menu
 */
#navigation-menu
{
    margin-top: 0.75em;
    width:      100%;
}

#navigation-menu ul
{
    float: right;
    width: auto;
}

#navigation-menu li
{
    margin-left: 1.5em;
    display:     block;
    float:       left;
    width:       auto;
    text-align:  center;
}

#navigation-menu li:first-child
{
    margin-left: 0.0em !important;
}

#navigation-menu li a
{
    display:         block;
    width:           auto;
    text-decoration: none;
    color:           #69696b;
}


/**
 * User menu
 */
#user-menu
{
    margin-top:    0.75em;
    margin-bottom: 0.375em;
    width:         100%;
}

#user-menu > ul
{
    float: right;
    width: auto;
}

#user-menu > ul > li
{
    margin-left: 0.375em;
    display:     inline-block;
    float:       left;
}

#user-menu > ul > li:first-child
{
    margin-left: 0.0em !important;
}

#user-menu > ul > li > a
{
    text-decoration: none;
    color:           #cfcfcf;
}


/**
 * Language list
 */
#language-list
{
    margin-left: 0.75em;
}

}




/**
 * Desktops (960px and up)
 */
@media only screen and (min-width: 960px)
{

/**
 * Body
 */
body
{
    font-size:   16px;
    line-height: 1.5;
}


/**
 * Grid
 */
.grid
{
    margin: auto;
    width:  960px;
}


/**
 * Visibility
 */
.hidden-mobile     { display: inherit !important; }
.hidden-tablet     { display: inherit !important; }
.hidden-desktop   { display: none    !important; }

.visible-mobile   { display: none    !important; }
.visible-tablet   { display: none    !important; }
.visible-desktop { display: inherit !important; }


/**
 * Logo
 */
#logo
{
    margin: 0.925em 0.0em;
    width:  17.0em;
    height: 3.4em;
}

}




/**
 * 1600px and up
 */
@media only screen and (min-width: 1600px)
{

/**
 * Body
 */
body
{
    font-size:   18px;
    line-height: 1.5;
}


/**
 * Grid
 */
.grid
{
    margin: auto;
    width:  1200px;
}

}

/**
 * Interactions (replace the old jQuery animations)
 */
#navigation-menu a
{
    transition: color 0.25s linear;
}

#navigation-menu a:hover,
#navigation-menu a:focus
{
    color: #9b1142;
}

#user-menu > ul > li > a
{
    transition: color 0.15s linear;
}

#user-menu > ul > li > a:hover,
#user-menu > ul > li > a:focus
{
    color: #69696b;
}

#legal-menu a
{
    transition: color 0.15s linear;
}

#legal-menu a:hover,
#legal-menu a:focus
{
    color: #9b1142;
}

#events .all-events,
#client-menu a
{
    transition: color 0.25s linear, background-color 0.25s linear;
}

#events .all-events:hover,
#events .all-events:focus,
#client-menu a:hover,
#client-menu a:focus
{
    color:            #ffffff;
    background-color: #9b1142;
}

/* Mobile menu: collapsed until the toggle is used (only when JavaScript runs) */
@media only screen and (max-width: 767px)
{
    .js #menu
    {
        overflow:   hidden;
        max-height: 0;
        transition: max-height 0.25s linear;
    }
}

/* The toggle is only needed on small screens, and only with JavaScript */
html:not(.js) #menu-toggle
{
    display: none;
}

@media only screen and (min-width: 768px)
{
    #menu-toggle
    {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce)
{
    #menu, #navigation-menu a, #user-menu a, #legal-menu a,
    #events .all-events, #client-menu a
    {
        transition: none !important;
    }
}