/* =============================================================================
  GOOGLE FONTS
============================================================================= */
@import url("https://fonts.googleapis.com/css?family=Poppins:400,600,700");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700");

/* =============================================================================
  RESET
============================================================================= */
* {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block;
}

/* =============================================================================
  BOX SIZING AND CLEARFIX
============================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* =============================================================================
  HTML & BODY
============================================================================= */
body, html {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Roboto", Helvetica, sans-serif;
    color: #727272;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    background-color: #eeeeee;
    /* -webkit-font-smoothing: antialiased; */
}

body.administration-overlay-active {
    overflow: hidden;
}

/* =============================================================================
  HEADINGS
============================================================================= */
h1, h2, h3,
h4, h5, h6 {
    color: #212121;
    line-height: 1;
    margin-bottom: 22px;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 22px;
}

/* =============================================================================
  TEXT
============================================================================= */
p {
    margin-bottom: 22px;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: #82b440;
    text-decoration: none;
}

/* =============================================================================
  Click-Ripple ANIMATION
============================================================================= */
.click-ripple {
    position: relative;
    display: block;
    width: 100%;
    color: #101010;
    text-decoration: none;
    overflow: hidden;
    -webkit-transition: all 220ms ease;
    transition:	all 220ms ease;
}

.ink {
    position: absolute;
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.animate {
    animation-name: ripple;
    animation-delay: 0ms;
    animation-duration: 650ms;
    animation-timing-function: linear;
}

@keyframes ripple {
    100%{ opacity: 0; transform: scale(2.5); }
}

/* =============================================================================
  PRIMARY LAYOUT
============================================================================= */
.wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 86px 0 0 0;
    z-index: 1;
}

#administration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0, 0.75);
    overflow-x: hidden;
    opacity: 0;
    z-index: -1;
    -webkit-transition: z-index	5ms		400ms,
    opacity	400ms	0ms;
    transition: z-index	5ms		400ms,
    opacity	400ms	0ms;
}
#administration-overlay.active {
    opacity: 1;
    z-index: 50;
    -webkit-transition: opacity	400ms	5ms,
    z-index	5ms		0ms;
    transition: opacity	400ms	5ms,
    z-index	5ms		0ms;
}

#admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: #e6e6e6;
    box-shadow: none;
    overflow-y: auto;
    overflow-x: visible;
    z-index: 100;
    -webkit-transition: -webkit-transform 400ms ease-in-out;
    transition:	transform 400ms ease-in-out;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
#admin-sidebar.active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

#admin-sidebar .admin-sidebar-logo-holder {
    display: flex;
    width: 100%;
    height: 190px;
    background-color: #101010;
    align-items: flex-end;
    justify-content: flex-start;
}


/* RESET STYLES for .admin-sidebar-toggle */
button.admin-sidebar-toggle {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* PASSIVE STATE of .admin-sidebar-toggle */
.admin-sidebar-toggle {
    position: fixed;
    top: 24px;
    left: 24px;
    width: 48px;
    height: 36px;
    font-size: 0;
    text-indent: -9999px;
    z-index: 9900;
}

.admin-sidebar-toggle span {
    display: block;
    width: 48px;
    height: 8px;
    background-color: #661111;
    content: "";
}

.admin-sidebar-toggle span.spn2 {
    display: none;
    position: absolute;
    top: 16px;
    left: -2px;
    height: 4px;
    width: 48px;
    background-color: #661111;
    content: "";
}

.admin-sidebar-toggle::before,
.admin-sidebar-toggle::after {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: #661111;
    content: "";
}

.admin-sidebar-toggle::before {
    top: 0;
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
}

.admin-sidebar-toggle::after {
    bottom: 0;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

.admin-sidebar-toggle,
.admin-sidebar-toggle::before,
.admin-sidebar-toggle::after {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

/* ACTIVE STATE of .admin-sidebar-toggle */
.admin-sidebar-toggle.active {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

.admin-sidebar-toggle.active span {
    left: -2px;
    background-color: #ffffff;
}

.admin-sidebar-toggle.active span.spn2 {
    display: none;
    background-color: #ffffff;
}

.admin-sidebar-toggle.active::before {
    width: 66%;
    background-color: #ffffff;
    -webkit-transform: translateX(2px) translateY(15px) rotate(-45deg);
    -ms-transform: translateX(2px) translateY(15px) rotate(-45deg);
    transform: translateX(2px) translateY(15px) rotate(-45deg);
}

.admin-sidebar-toggle.active::after {
    width: 66%;
    background-color: #ffffff;
    -webkit-transform: translateX(2px) translateY(-15px) rotate(45deg);
    -ms-transform: translateX(2px) translateY(-15px) rotate(45deg);
    transform: translateX(2px) translateY(-15px) rotate(45deg);
}


@media (max-width: 479px) {

    /* PASSIVE STATE of .admin-sidebar-toggle */
    .admin-sidebar-toggle {
        top: 24px;
        left: 24px;
        width: 24px;
        height: 18px;
    }

    .admin-sidebar-toggle span {
        width: 24px;
        height: 4px;
    }

    .admin-sidebar-toggle span.spn2 {
        top: 8px;
        left: -2px;
        height: 3px;
        width: 24px;
    }

    .admin-sidebar-toggle::before,
    .admin-sidebar-toggle::after {
        left: 0;
        width: 100%;
        height: 4px;
    }

    .admin-sidebar-toggle.active span {
        left: -2px;
    }

    /* PASSIVE STATE of .admin-sidebar-toggle */
    .admin-sidebar-toggle {
        top: 24px;
        left: 24px;
        width: 24px;
        height: 18px;
    }

    .admin-sidebar-toggle span {
        width: 24px;
        height: 4px;
    }

    .admin-sidebar-toggle span.spn2 {
        top: 16px;
        left: -2px;
        height: 3px;
        width: 24px;
    }

    .admin-sidebar-toggle::before,
    .admin-sidebar-toggle::after {
        left: 0;
        width: 100%;
        height: 4px;
    }

    .admin-sidebar-toggle.active span {
        left: -2px;
    }

    .admin-sidebar-toggle.active::before {
        width: 66%;
        background-color: #ffffff;
        -webkit-transform: translateX(-2px) translateY(5px) rotate(45deg);
        -ms-transform: translateX(-2px) translateY(5px) rotate(45deg);
        transform: translateX(-2px) translateY(5px) rotate(45deg);
    }

    .admin-sidebar-toggle.active::after {
        width: 66%;
        background-color: #ffffff;
        -webkit-transform: translateX(-2px) translateY(-5px) rotate(-45deg);
        -ms-transform: translateX(-2px) translateY(-5px) rotate(-45deg);
        transform: translateX(-2px) translateY(-5px) rotate(-45deg);
    }

}


/* =============================================================================
  PULIT.at Logo
============================================================================= */
#top_logo {
    display: block;
    height: auto;
    width: 200px;
    margin: auto auto 10px auto;
}
#top_logo .std_wht {
    fill: #ffffff;
}
#top_logo .std_gradient {
    fill: url(#pulit-gradient);
}
#top_logo .std_black {
    fill: #000000;
}
#top_logo.alternative .alt_white {
    fill: #fff;
}


/* =============================================================================
  ADMIN SIDEBAR NAVIGATION
============================================================================= */
.admin-sidebar-nav__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point {
    display: block;
    max-width: 100%;
    box-sizing: content-box;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #727272;
    -webkit-transition: background-color 500ms;
    transition: background-color 500ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point:active,
.admin-sidebar-nav__items li.admin-sidebar-nav__point.active,
.admin-sidebar-nav__items li.admin-sidebar-nav__point:focus,
.admin-sidebar-nav__items li.admin-sidebar-nav__point.focus,
.admin-sidebar-nav__items li.admin-sidebar-nav__point:hover {
    background-color: #ffffff !important;
}

.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item {
    display: block;
    width: 100%;
    opacity: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.in-view {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-1 {
    -webkit-transition: -webkit-transform	500ms 100ms,
    opacity				500ms 100ms;
    transition: transform			500ms 100ms,
    opacity				500ms 100ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-2 {
    -webkit-transition: -webkit-transform	500ms 200ms,
    opacity				500ms 200ms;
    transition: transform			500ms 200ms,
    opacity				500ms 200ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-3 {
    -webkit-transition: -webkit-transform	500ms 300ms,
    opacity				500ms 300ms;
    transition: transform			500ms 300ms,
    opacity				500ms 300ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-4 {
    -webkit-transition: -webkit-transform	500ms 400ms,
    opacity				500ms 400ms;
    transition: transform			500ms 400ms,
    opacity				500ms 400ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-5 {
    -webkit-transition: -webkit-transform	500ms 500ms,
    opacity				500ms 500ms;
    transition: transform			500ms 500ms,
    opacity				500ms 500ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-6 {
    -webkit-transition: -webkit-transform	500ms 600ms,
    opacity				500ms 600ms;
    transition: transform			500ms 600ms,
    opacity				500ms 600ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-7 {
    -webkit-transition: -webkit-transform	500ms 700ms,
    opacity				500ms 700ms;
    transition: transform			500ms 700ms,
    opacity				500ms 700ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-8 {
    -webkit-transition: -webkit-transform	500ms 800ms,
    opacity				500ms 800ms;
    transition: transform			500ms 800ms,
    opacity				500ms 800ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-9 {
    -webkit-transition: -webkit-transform	500ms 900ms,
    opacity				500ms 900ms;
    transition: transform			500ms 900ms,
    opacity				500ms 800ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-10 {
    -webkit-transition: -webkit-transform	500ms 1000ms,
    opacity				500ms 1000ms;
    transition: transform			500ms 1000ms,
    opacity				500ms 1000ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-11 {
    -webkit-transition: -webkit-transform	500ms 1100ms,
    opacity				500ms 1100ms;
    transition: transform			500ms 1100ms,
    opacity				500ms 1100ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-12 {
    -webkit-transition: -webkit-transform	500ms 1200ms,
    opacity				500ms 1200ms;
    transition: transform			500ms 1200ms,
    opacity				500ms 1200ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-13 {
    -webkit-transition: -webkit-transform	500ms 1300ms,
    opacity				500ms 1300ms;
    transition: transform			500ms 1300ms,
    opacity				500ms 1300ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-14 {
    -webkit-transition: -webkit-transform	500ms 1400ms,
    opacity				500ms 1400ms;
    transition: transform			500ms 1400ms,
    opacity				500ms 1400ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-15 {
    -webkit-transition: -webkit-transform	500ms 1500ms,
    opacity				500ms 1500ms;
    transition: transform			500ms 1500ms,
    opacity				500ms 1500ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-16 {
    -webkit-transition: -webkit-transform	500ms 1600ms,
    opacity				500ms 1600ms;
    transition: transform			500ms 1600ms,
    opacity				500ms 1600ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-17 {
    -webkit-transition: -webkit-transform	500ms 1700ms,
    opacity				500ms 1700ms;
    transition: transform			500ms 1700ms,
    opacity				500ms 1700ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-18 {
    -webkit-transition: -webkit-transform	500ms 1800ms,
    opacity				500ms 1800ms;
    transition: transform			500ms 1800ms,
    opacity				500ms 1800ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-19 {
    -webkit-transition: -webkit-transform	500ms 1900ms,
    opacity				500ms 1900ms;
    transition: transform			500ms 1900ms,
    opacity				500ms 1900ms;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__item.admin-sidebar-nav__item-20 {
    -webkit-transition: -webkit-transform	500ms 2000ms,
    opacity				500ms 2000ms;
    transition: transform			500ms 2000ms,
    opacity				500ms 2000ms;
}

.admin-sidebar-nav__items li.admin-sidebar-nav__point .admin-sidebar-nav__link {
    position: relative;
    display: flex;
    margin: 0;
    padding: 12px 0 12px 15px;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    color: #101010 !important;
    font-size: 16px;
    text-decoration: none;
    -webkit-transition: background 0.5s, color 0.5s;
    transition: background 0.5s, color 0.5s;
}
.admin-sidebar-nav__items li.admin-sidebar-nav__point:active .admin-sidebar-nav__link,
.admin-sidebar-nav__items li.admin-sidebar-nav__point.active .admin-sidebar-nav__link,
.admin-sidebar-nav__items li.admin-sidebar-nav__point:focus .admin-sidebar-nav__link,
.admin-sidebar-nav__items li.admin-sidebar-nav__point.focus .admin-sidebar-nav__link,
.admin-sidebar-nav__items li.admin-sidebar-nav__point:hover .admin-sidebar-nav__link {
    color: #F52935 !important;
}
.admin-sidebar-nav__link i.zmdi {
    display: inline-block;
    padding: 0 4px 0 7px;
    font-weight: normal;
}

.admin-sidebar-nav__link span.admin-sidebar-nav__link-text {
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

i.png-ico {
    display: inline-block;
    width: 48px;
    height: 32px;
    margin: 0;
    background-position: left center;
	background-repeat: no-repeat;
    background-size: 32px 32px;
}

/* =============================================================================
  SITE HEAD BAR
============================================================================= */
header.head-bar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 86px;
    overflow: hidden;
    background-color: #c4212a;
    z-index: 50;
    /*
    -webkit-box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,
                        rgba(0,0,0,0.09804) 0px 1px 2px 0px;
       -moz-box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,
                        rgba(0,0,0,0.09804) 0px 1px 2px 0px;
            box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,
                        rgba(0,0,0,0.09804) 0px 1px 2px 0px;
    */
    border-bottom: 2px solid #89171d;
    -webkit-transition: .7s;
    transition: .7s;
}
/*
header.head-bar.head-bar--extended {
      background-color: transparent;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
*/

header.head-bar .container {
    height: 100%;
    text-align: left;
}
header.head-bar .inner {
    display: inline-flex;
    height: 100%;
    color: #fff;
    font-size: 32px;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    justify-content: flex-start;
    align-items: center;
}

ul.plain {
    list-style: none;
    padding: 0 0 0 10px;
}
ul.plain li {
    position: relative;
    padding-left: 23px;
    list-style: none;
}
ul.plain li i {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 5px;
}

section.top-section {
    padding-top: 80px;
}
