/* ------------------------------ */
/* ------------------------------ */
/* HEADER */
.Header {
   display: block;
   width: 100%;
   height: 91px;
   background-color: #fff;
   border-top: 10px solid #2d97e5;
   border-bottom: 1px solid #ddd;
   margin-bottom: 0px;
}

.Header .center {
   position: relative;
   display: block;
   width: 100%;
   height: 80px;
   padding: 0px 25px;
   margin: auto;
}

.Header .logo {
   display: block;
   width: auto;
   height: 80px;
   padding: 23px 0px;
   color: #000;
   font-size: 30px;
   font-weight: 600;
   line-height: 1;
   float: left;
}

.Header .nav {
   display: block;
   width: auto;
   height: 80px;
   padding: 20px;
   padding-right: 0px;
   color: #ddd;
   font-size: 15px;
   font-weight: 200;
   line-height: 1;
   word-spacing: 15px;
   text-align: right;
   float: right;
}

.Header .link {
   display: none;
   width: auto;
   height: 15px;
   color: #000;
   font-size: 15px;
   font-weight: 400;
   line-height: 1;
   word-spacing: normal;
}

.Header+.page-nav {
   position: relative;
   display: block;
   width: 100%;
   height: 60px;
   padding: 22.5px;
   background-color: #eee;
   border-bottom: 1px solid #ddd;
   color: #000;
   font-size: 14px;
   font-weight: 200;
   line-height: 1;
   text-align: left;
   letter-spacing: 2.5px;
}

.Header+.page-nav::after {
   content: '\00BB';
   position: absolute;
   top: 17.5px;
   right: 20px;
   font-size: 25px;
}


/* ------------------------------ */
/* ------------------------------ */
/* INTRO */
.Intro {
   display: block;
   width: 100%;
   min-height: 200px;
   overflow: auto;
   padding: 50px;
   background-color: #eee;
   border-bottom: 1px solid #ddd;
}

.Intro .center {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   margin: auto;
}

.Intro .right,
.Intro .left {
   display: block;
   width: 50%;
   height: auto;
   overflow: auto;
   padding: 0px;
   float: left;
}

.Intro .button {
   display: block;
   width: 200px;
   height: 74px;
   padding: 25px;
   background-color: #2d97e5;
   border-radius: 5px;
   color: #fff;
   font-size: 24px;
   font-weight: 500;
   line-height: 1;
   text-align: center;
   float: right;
}

.Intro h1 {
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
   color: #333;
   font-size: 40px;
   font-weight: 500;
   line-height: 1;
   text-align: left;
   margin-bottom: 10px;
}

.Intro p {
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
   color: #333;
   font-size: 20px;
   font-weight: 200;
   line-height: normal;
   text-align: left;
   margin-bottom: 0px;
}


/* ------------------------------ */
/* ------------------------------ */
/* CONTENT */
.Content {
   display: block;
   width: calc(100% - 20px);
   min-height: calc(100vh - 182px);
   overflow: auto;
   padding: 0px;
   background-color: #eee;
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
   margin: 0px 10px;
}

.Main {
   display: block;
   width: 100%;
   min-height: calc(100vh - 182px);
   overflow: auto;
}

.Sidebar {
   position: fixed;
   display: none;
   top: 0px;
   left: 0px;
   width: 300px;
   padding: 0px;
   height: 100vh;
   overflow: auto;
   background-color: #fff;
   border-left: 10px solid #ddd;
   z-index: 10;
}


/* ------------------------------ */
/* ------------------------------ */
/* MENU */
.Menu {
   position: fixed;
   display: none;
   top: 0px;
   left: 0px;
   width: 300px;
   padding: 15px;
   height: 100vh;
   overflow: auto;
   background-color: #eee;
   border-left: 10px solid #2d97e5;
   z-index: 10;
}

.Menu.b {
   border-left: 10px solid #000;
}

.Menu .link {
   position: relative;
   display: block;
   width: 100%;
   height: 60px;
   padding: 20px;
   background-color: #eee;
   border: 1px solid #ddd;
   border-radius: 5px;
   color: #000;
   font-size: 18px;
   font-weight: 500;
   line-height: 1;
   text-align: left;
   margin-bottom: 15px;
}

.Menu .link::after {
   content: '\00BB';
   position: absolute;
   top: 15px;
   right: 20px;
   font-size: 30px;
}


/* ------------------------------ */
/* ------------------------------ */
/* SIDEBAR */
.Sidebar .Ad {
   display: block;
   width: calc(100% - 30px);
   min-height: 200px;
   overflow: auto;
   background-color: #ddd;
   border-radius: 5px;
   margin: 15px;
}

.Sidebar .category {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ccc;
   border-radius: 0px;
   color: #000;
   font-size: 18px;
   font-weight: 200;
   line-height: 1;
   margin-bottom: 0px;
}

.Sidebar .user {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 5px;
   margin-bottom: 10px;
}

.Sidebar .user .username {
   display: block;
   width: 100%;
   height: 75px;
   padding: 25px;
   border-bottom: 1px solid #ddd;
   color: #2d97e5;
   font-size: 25px;
   font-weight: 600;
   line-height: 1;
   text-align: center;
}

.Sidebar .user .image {
   display: block;
   width: 100%;
   min-height: 250px;
   overflow: auto;
   padding: 10px;
   background-color: #eee;
   background-image: url('../images/patterns/a.png');
   border-bottom: 10px solid #2d97e5;
}

.Sidebar .user .info {
   display: block;
   width: 100%;
   height: 65px;
   padding: 25px;
   border-bottom: 1px solid #ddd;
   color: #000;
   font-size: 15px;
   font-weight: 100;
   line-height: 1;
   text-align: left;
}

.Sidebar .info:last-child {
   border-bottom: none;
}

.Sidebar .link {
   position: relative;
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   padding-left: 75px;
   background-color: transparent;
   border: 1px solid #ddd;
   border-radius: 5px;
   color: #000;
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
   text-align: left;
   margin-bottom: 10px;
}

.Sidebar .link.a {
   padding-left: 25px;
}

.Sidebar .link.x,
.Sidebar .link:hover {
   background-color: #fff;
}

.Sidebar .link:last-child {
   margin-bottom: 0px;
}

.Sidebar .icon {
   position: absolute;
   display: block;
   top: 25px;
   left: 25px;
   width: auto;
   height: 20px;
}


/* ------------------------------ */
/* ------------------------------ */
/* LISTINGS */
.Listings {
   position: relative;
   display: block;
   width: 100%;
   min-height: 222px;
   overflow: auto;
   padding: 25px;
   padding-right: 0px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
}

.Listings:last-child {
   border-bottom: none;
}

.Listings .image {
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: #ddd;
   border-radius: 5px;
   float: left;
}

.Listings .info {
   display: block;
   width: calc(100% - 200px);
   min-height: 200px;
   padding: 25px;
   padding-bottom: 0px;
   padding-top: 15px;
   float: left;
}

.Listings .name {
   display: block;
   width: 100%;
   min-height: 30px;
   overflow: auto;
   font-size: 24px;
   font-weight: 500;
   color: #333;
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 20px;
}

.Listings .description {
   display: block;
   width: 100%;
   min-height: 75px;
   overflow: auto;
   color: #666;
   font-size: 18px;
   font-weight: 200;
   line-height: normal;
   margin-bottom: 20px;
}

.Listings .row {
   display: block;
   width: 100%;
   height: 20px;
   color: #333;
   font-size: 20px;
   font-weight: 500;
   line-height: 1;
}


/* ------------------------------ */
/* ------------------------------ */
/* LISTING */
.Listing {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   background-color: #fff;
   border-radius: 0px;
}

.Video {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   background-color: #333;
   border-radius: 5px 5px 0px 0px;
}

.Article {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 25px;
   color: #333;
   font-size: 20px;
   line-height: 1.5;
}


/* ------------------------------ */
/* ------------------------------ */
/* CATEGORIES */
.Categories {
   display: block;
   width: 100%;
   min-height: 222px;
   overflow: auto;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
}

.Categories:last-child {
   border-bottom: none;
}

.Categories .image {
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: #ddd;
   border-radius: 5px;
   float: left;
}

.Categories .info {
   display: block;
   width: calc(100% - 200px);
   min-height: 200px;
   padding: 25px;
   padding-bottom: 0px;
   padding-top: 15px;
   float: left;
}

.Categories .name {
   display: block;
   width: 100%;
   min-height: 30px;
   overflow: auto;
   font-size: 24px;
   font-weight: 500;
   color: #333;
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 20px;
}

.Categories .description {
   display: block;
   width: 100%;
   min-height: 75px;
   overflow: auto;
   color: #666;
   font-size: 18px;
   font-weight: 200;
   line-height: normal;
   margin-bottom: 20px;
}

.Categories .row {
   display: block;
   width: 100%;
   height: 20px;
   color: #333;
   font-size: 20px;
   font-weight: 500;
   line-height: 1;
}


/* ------------------------------ */
/* ------------------------------ */
/* ORDERS */
.Orders {
   display: block;
   width: 100%;
   min-height: 125px;
   overflow: auto;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   border-radius: 0px;
   margin-bottom: 0px;
}

.Orders:last-child {
   border-bottom: none;
}

.Orders .image {
   display: block;
   width: 125px;
   height: 125px;
   overflow: hidden;
   background-color: #ddd;
   border-radius: 5px;
   float: left;
}

.Orders .info {
   display: block;
   width: calc(100% - 125px);
   min-height: 125px;
   padding: 25px;
   padding-bottom: 0px;
   padding-top: 5px;
   padding-right: 0px;
   float: left;
}

.Orders .date {
   display: block;
   width: 100%;
   min-height: 20px;
   overflow: auto;
   font-size: 20px;
   font-weight: 500;
   color: #333;
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 15px;
}

.Orders .row {
   display: block;
   width: 100%;
   height: 16px;
   color: #333;
   font-size: 16px;
   font-weight: 100;
   line-height: 1;
   margin-bottom: 10px;
   text-indent: 0px;
}


/* ------------------------------ */
/* ------------------------------ */
/* TABLE */
.Table {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
}

.Table .row {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   color: #333;
   font-size: 20px;
   font-weight: 100;
   line-height: 1;
   margin-bottom: 0px;
}

.Table .date {
   display: inline-block;
   width: 37%;
}

.Table .data {
   display: inline-block;
   width: 20%;
   text-align: right;
}


/* ------------------------------ */
/* ------------------------------ */
/* Stats */
.Stats {
   display: block;
   width: 50%;
   float: left;
}

.Stats .header {
   display: block;
   width: 100%;
   height: 80px;
   padding: 25px;
   border-top: 1px solid #ccc;
   color: #333;
   font-size: 30px;
   font-weight: 200;
   line-height: 1;
   margin: 0px;
   float: left;
}

.Stats .stat {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   border-top: 1px solid #ccc;
   color: #333;
   font-size: 20px;
   font-weight: 200;
   line-height: 1;
   margin-bottom: 0px;
   float: left;
}


/* ------------------------------ */
/* ------------------------------ */
/* FORM */
.Form {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
}

.Form .dollar {
   display: block;
   width: 20px;
   height: 80px;
   padding-top: 33px;
   float: left;
   margin-right: 5px;
}

.Form .field {
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
   margin-bottom: 0px;
}

.Form .field.x {
   padding: 25px;
}

.Form .icon {
   position: absolute;
   top: 15px;
   left: 15px;
   width: auto;
   height: auto;
}

.Form .textfield {
   display: block;
   width: 100%;
   height: 80px;
   padding: 25px;
   margin-bottom: 0px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   border-radius: 0px;
   color: #333;
   font-size: 20px;
   font-weight: 200;
   line-height: 1.3;
   text-indent: 55px;
}

.Form .textarea:focus,
.Form .textfield:focus {
   background-color: #fff;
}

.Form .textfield.short {
   width: 100%;
}

.Form .textarea {
   display: block;
   width: 100%;
   height: 300px;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   border-radius: 0px;
   color: #333;
   font-size: 20px;
   font-weight: 200;
   margin-bottom: 0px;
   resize: none;
   float: none;
}

.Form .select {
   position: relative;
   display: block;
   width: 100%;
   height: 80px;
   overflow: visible;
   margin-bottom: 0px;
}

.Form .selectfield {
   display: block;
   width: 100%;
   height: 80px;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   border-radius: 0px;
   color: #333;
   font-size: 20px;
   font-weight: 200;
   line-height: 1.3;
}

.Form .selectfield::after {
   content: '\21B4';
   position: absolute;
   top: 25px;
   right: 25px;
   color: #333;
   font-size: 20px;
}

.Form .selectfield+.options {
   position: absolute;
   display: none;
   top: 77px;
   left: 0px;
   width: 100%;
   max-height: 180px;
   overflow: auto;
   background-color: #eee;
   border-bottom: 1px solid #ddd;
   border-radius: 0px;
   z-index: 5;
}

.Form .selectfield+.options>.option {
   display: block;
   width: 100%;
   height: 80px;
   padding: 25px;
   background-color: #eee;
   color: #333;
   font-size: 20px;
   font-weight: 200;
   line-height: 1.3;
}

.Form .selectfield+.options>.option:hover {
   background-color: #fafafa;
   color: #333;
   cursor: pointer;
}

.Form .submit-wrapper {
   display: block;
   width: calc(100% - 50px);
   height: 80px;
   padding: 0px;
   background-color: #ccc;
   border-radius: 5px;
   margin: 25px;
   margin-top: 35px;
}

.Form .submit {
   display: block;
   width: 100%;
   height: 80px;
   padding: 0px;
   background-color: #333;
   border: 1px solid #333;
   border-radius: 5px;
   color: #fff;
   font-size: 20px;
   font-weight: 400;
   text-align: center;
   text-transform: uppercase;
   transform: translateY(-10px);
}

.Form .submit:hover {
   cursor: pointer;
   background-color: #2d97e5;
   border: 1px solid #2d97e5;
}

.Form .submit:active {
   cursor: pointer;
   background-color: #2d97e5;
   border: 1px solid #2d97e5;
   transform: translateY(0px);
}


/* ------------------------------ */
/* ------------------------------ */
/* FOOTER */
.Footer {
   display: block;
   width: 100%;
   height: 91px;
   background-color: #fff;
   border-bottom: 10px solid #000;
   border-top: 1px solid #ddd;
   margin-top: 0px;
}

.Footer .center {
   position: relative;
   display: block;
   width: 100%;
   height: 80px;
   padding: 0px 25px;
   margin: auto;
}

.Footer .logo {
   display: block;
   width: auto;
   height: 80px;
   padding: 23px 0px;
   color: #000;
   font-size: 30px;
   font-weight: 600;
   line-height: 1;
   float: right;
}

.Footer .nav {
   display: block;
   width: auto;
   height: 80px;
   padding: 20px;
   padding-left: 0px;
   color: #ddd;
   font-size: 15px;
   font-weight: 200;
   line-height: 1;
   word-spacing: 15px;
   text-align: left;
   float: left;
}

.Footer .link {
   display: inline-block;
   width: auto;
   height: 15px;
   color: #000;
   font-size: 15px;
   font-weight: 400;
   line-height: 1;
   word-spacing: normal;
}

.Footer .link.x,
.Footer .link:hover {
   cursor: pointer;
   color: #2d97e5;
}


/* ------------------------------ */
/* ------------------------------ */
/* GLOBALS */
.GLOB-Title {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   border-bottom: 1px solid #ddd;
   color: #333;
   font-size: 20px;
   font-weight: 500;
   line-height: 1;
}

.GLOB-SubTitle {
   display: block;
   width: 100%;
   height: 65px;
   padding: 25px;
   border-bottom: 1px solid #ddd;
   color: #333;
   font-size: 15px;
   font-weight: 200;
   line-height: 1;
}

.GLOB-Empty {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   color: #333;
   font-size: 18px;
   font-weight: 100;
   line-height: 1;
   text-align: center;
   text-transform: capitalize;
}

.MORE {
   display: block;
   width: calc(100% - 50px);
   height: 80px;
   padding: 0px;
   background-color: #ccc;
   border-radius: 5px;
   margin: 25px;
   margin-top: 35px;
}

.MORE button {
   display: block;
   width: 100%;
   height: 80px;
   padding: 0px;
   background-color: #333;
   border: 1px solid #333;
   border-radius: 5px;
   color: #fff;
   font-size: 20px;
   font-weight: 400;
   text-align: center;
   text-transform: uppercase;
   transform: translateY(-10px);
}

.MORE button:hover {
   cursor: pointer;
   background-color: #2d97e5;
   border: 1px solid #2d97e5;
}

.MORE button:active {
   cursor: pointer;
   background-color: #2d97e5;
   border: 1px solid #2d97e5;
   transform: translateY(0px);
}

.ERRORS {
   display: none;
   width: calc(100% - 50px);
   height: auto;
   padding: 25px;
   background-color: #fcecc3;
   border: 1px solid #fcecc3;
   border-radius: 5px;
   color: #000;
   font-size: 18px;
   font-weight: 200;
   line-height: normal;
   text-align: left;
   margin: 25px;
}

#CLOSE {
   position: fixed;
   display: none;
   top: 0px;
   right: 0px;
   width: calc(100% - 300px);
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 20;
}

.DESKTOP {
   display: none !important;
}