.grey {
    background-color: #9e9e9e !important;
}

.grey-text {
    color: #9e9e9e !important;
}

.grey.lighten-4 {
    background-color: #f5f5f5 !important;
}

.grey-text.text-lighten-1 {
    color: #bdbdbd !important;
}

.grey.darken-2 {
    background-color: #616161 !important;
}

.grey-text.text-darken-2 {
    color: #616161 !important;
}

.grey-text.text-darken-3 {
    color: #424242 !important;
}

.black {
    background-color: #000000 !important;
}

.black-text {
    color: #000000 !important;
}

.white {
    background-color: #FFFFFF !important;
}

.white-text {
    color: #FFFFFF !important;
}

html {
    line-height: 1.15;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

body {
    margin: 0;
}

/**
   * Add the correct display in IE 9-.
   */

footer, header, nav, section {
    display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
         ========================================================================== */

/**
   * Add the correct display in IE 9-.
   * 1. Add the correct display in IE.
   */

main {
    /* 1 */
    display: block;
}

a {
    background-color: transparent;
    /* 1 */
    -webkit-text-decoration-skip: objects;
    /* 2 */
}

img {
    border-style: none;
}

/**
   * Hide the overflow in IE.
   */

svg:not(:root) {
    overflow: hidden;
}

button {
    font-family: sans-serif;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */

button {
    /* 1 */
    overflow: visible;
}

button {
    /* 1 */
    text-transform: none;
}

button, html [type="button"] {
    -webkit-appearance: button;
    /* 2 */
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */

button:-moz-focusring, [type="button"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

[hidden] {
    display: none;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

ul:not(.browser-default) {
    padding-left: 0;
    list-style-type: none;
}

ul:not(.browser-default)>li {
    list-style-type: none;
}

a {
    color: #039be5;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* 2dp elevation modified*/

nav, .card, .btn {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn:hover {
    /*  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);*/
}

/* 6dp elevation modified*/

/* 12dp elevation modified*/

/* 16dp elevation */

/* 24dp elevation */

.modal {
    -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}

i {
    line-height: inherit;
}

i.left {
    float: left;
    margin-right: 15px;
}

i.right {
    float: right;
    margin-left: 15px;
}

.pagination li {
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    vertical-align: top;
    height: 30px;
}

.pagination li a {
    color: #444;
    display: inline-block;
    font-size: 1.2rem;
    padding: 0 10px;
    line-height: 30px;
}

.pagination li i {
    font-size: 2rem;
}

@media only screen and (max-width: 992px) {
    .pagination {
        width: 100%;
    }
}

/*********************
        Media Query Classes
  **********************/

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}

/*******************
        Utility Classes
  *******************/

.hide {
    display: none !important;
}

.right-align {
    text-align: right;
}

.center, .center-align {
    text-align: center;
}

.left {
    float: left !important;
}

.right {
    float: right !important;
}

/* This is needed for some mobile phones to display the Google Icon font properly */

.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}

@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }
}

@media only screen and (min-width: 993px) {
    .container {
        width: 70%;
    }
}

.col .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.section {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

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

.row .col {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0.75rem;
    min-height: 1px;
}

.row .col[class*="push-"], .row .col[class*="pull-"] {
    position: relative;
}

.row .col.s1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s6_5 {
    width: 45%;
    margin: 0 auto;
    left: auto;
    right: auto;
}

.row .col.s8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
}

@media only screen and (min-width: 601px) {
    .row .col.m1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.m12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
}

@media only screen and (min-width: 993px) {
    .row .col.l1 {
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l3_5 {
        width: 22%;
        margin: initial;
        margin-left: auto;
        left: auto;
    }
    .row .col.l3_5:last-child {
        margin-right: auto;
    }
    .row .col.l4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l6_5 {
        width: 49%;
        margin: 0 auto;
        left: auto;
        right: auto;
    }
    .row .col.l8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.l12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .row .col.pull-l6 {
        right: 50%;
    }
    .row .col.push-l6 {
        left: 50%;
    }
}

nav {
    color: #fff;
    background-color: #D97D54;
    width: 100%;
    height: 56px;
    line-height: 56px;
}

nav a {
    color: #fff;
}

nav i {
    display: block;
    font-size: 24px;
    height: 56px;
    line-height: 56px;
}

nav ul {
    margin: 0;
}

nav ul li {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    padding: 0;
}

nav ul a {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    font-size: 1rem;
    color: #fff;
    display: block;
    padding: 0 15px;
    cursor: pointer;
}

nav ul a.btn {
    margin-top: -2px;
    margin-left: 15px;
    margin-right: 15px;
}

nav ul a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

nav ul.left {
    float: left;
}

@media only screen and (min-width: 601px) {
    nav {
        height: 64px;
        line-height: 64px;
    }
}

a {
    text-decoration: none;
}

html {
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.87);
}

@media only screen and (min-width: 0) {
    html {
        font-size: 14px;
    }
}

@media only screen and (min-width: 992px) {
    html {
        font-size: 14.5px;
    }
}

@media only screen and (min-width: 1200px) {
    html {
        font-size: 15px;
    }
}

h1, h2, h3, h4 {
    font-weight: 400;
    line-height: 1.3;
}

h1 a, h2 a, h3 a, h4 a {
    font-weight: inherit;
}

h1 {
    font-size: 4.2rem;
    line-height: 110%;
    margin: 2.8rem 0 1.68rem 0;
}

h2 {
    font-size: 3.56rem;
    line-height: 110%;
    margin: 2.3733333333rem 0 1.424rem 0;
}

h3 {
    font-size: 2.92rem;
    line-height: 110%;
    margin: 1.9466666667rem 0 1.168rem 0;
}

h4 {
    font-size: 2.28rem;
    line-height: 110%;
    margin: 1.52rem 0 0.912rem 0;
}

.card {
    position: relative;
    margin: 0.5rem 0 1rem 0;
    background-color: #fff;
    -webkit-transition: -webkit-box-shadow .25s;
    transition: -webkit-box-shadow .25s;
    transition: box-shadow .25s;
    transition: box-shadow .25s, -webkit-box-shadow .25s;
    border-radius: 2px;
}

.card .card-image {
    position: relative;
}

.card .card-image img {
    display: block;
    border-radius: 2px 2px 0 0;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
}

.btn {
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}

.btn:disabled {
    pointer-events: none;
    background-color: #DFDFDF !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #9F9F9F !important;
    cursor: default;
}

.btn:disabled:hover {
    background-color: #DFDFDF !important;
    color: #9F9F9F !important;
}

.btn {
    font-size: 14px;
    outline: 0;
}

.btn i {
    font-size: 1.3rem;
    line-height: inherit;
}

.btn:focus {
    /*background-color: #1d7d74;*/
}

.btn {
    text-decoration: none;
    color: #fff;
    background-color: #D97D54;
    text-align: center;
    letter-spacing: .5px;
    -webkit-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
    cursor: pointer;
}

.btn.cwhite {
    background-color: white;
    border: 1px solid black;
    color: black;
}

.btn.cgrey {
    color: #ffffff;
    background: #404040;
    border: 1px solid black;
}

.btn:hover {
    /*background-color: #2bbbad;*/
}

.btn:hover.cwhite {
    background: #1B1B1B;
    color: #fff;
}

.btn:hover.cgrey {
    color: #ffffff;
    background: #666666;
    border: 1px solid #666666;
}

/*!
   * Waves v0.6.0
   * http://fian.my.id/Waves
   *
   * Copyright 2014 Alfiana E. Sibuea and other contributors
   * Released under the MIT license
   * https://github.com/fians/Waves/blob/master/LICENSE
   */

/* Firefox Bug: link not triggered */

.modal {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 0;
    max-height: 70%;
    width: 55%;
    margin: auto;
    overflow-y: auto;
    border-radius: 2px;
    will-change: top, opacity;
}

.modal:focus {
    outline: none;
}

@media only screen and (max-width: 992px) {
    .modal {
        width: 80%;
    }
}

.modal h1, .modal h2, .modal h3, .modal h4 {
    margin-top: 0;
}

.modal .modal-content {
    padding: 24px;
}

.modal .modal-close {
    cursor: pointer;
}

.modal.modal-fixed-footer {
    padding: 0;
    height: 70%;
}

.modal.modal-fixed-footer .modal-content {
    position: absolute;
    height: calc(100% - 56px);
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
}

button:focus {
    outline: none;
    /*background-color: #2ab7a9;*/
}

@-webkit-keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes fill-unfill-rotate {
    to {
        -webkit-transform: rotate(1080deg);
    }
}

@keyframes fill-unfill-rotate {
    12.5% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    /* 0.5 * ARCSIZE */
    25% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    /* 1   * ARCSIZE */
    37.5% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
    /* 1.5 * ARCSIZE */
    50% {
        -webkit-transform: rotate(540deg);
        transform: rotate(540deg);
    }
    /* 2   * ARCSIZE */
    62.5% {
        -webkit-transform: rotate(675deg);
        transform: rotate(675deg);
    }
    /* 2.5 * ARCSIZE */
    75% {
        -webkit-transform: rotate(810deg);
        transform: rotate(810deg);
    }
    /* 3   * ARCSIZE */
    87.5% {
        -webkit-transform: rotate(945deg);
        transform: rotate(945deg);
    }
    /* 3.5 * ARCSIZE */
    to {
        -webkit-transform: rotate(1080deg);
        transform: rotate(1080deg);
    }
    /* 4   * ARCSIZE */
}

@keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    26% {
        opacity: 0;
    }
    89% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes red-fade-in-out {
    from {
        opacity: 0;
    }
    15% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    51% {
        opacity: 0;
    }
}

@keyframes yellow-fade-in-out {
    from {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    76% {
        opacity: 0;
    }
}

@keyframes green-fade-in-out {
    from {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/**
   * Patch the gap that appear between the two adjacent div.circle-clipper while the
   * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
   */

@-webkit-keyframes left-spin {
    to {
        -webkit-transform: rotate(130deg);
    }
}

@keyframes left-spin {
    from {
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }
    50% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    to {
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }
}

@-webkit-keyframes right-spin {
    to {
        -webkit-transform: rotate(-130deg);
    }
}

@keyframes right-spin {
    from {
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }
    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    to {
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }
}

@-webkit-keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes pulse-animation {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
}


/* Media Queries */

@media only screen and (max-width: 768px) {
    ul:not(.browser-default)>li {
        list-style-type: none;
        text-align: center;
        border-bottom: solid 1px #c7c7c7;
    }
}
.fa, .fas, .far {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.fa-3x {
    font-size: 3em;
}

.fa-fw {
    text-align: center;
    width: 1.25em;
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */

.fa-adjust:before {
    content: "\f042";
}

.fa-bold:before {
    content: "\f032";
}

.fa-calendar-alt:before {
    content: "\f073";
}

.fa-calendar-check:before {
    content: "\f274";
}

.fa-calendar-plus:before {
    content: "\f271";
}

.fa-caret-right:before {
    content: "\f0da";
}

.fa-chevron-right:before {
    content: "\f054";
}

.fa-clipboard-list:before {
    content: "\f46d";
}

.fa-envelope:before {
    content: "\f0e0";
}

.fa-flag-checkered:before {
    content: "\f11e";
}

.fa-home:before {
    content: "\f015";
}

.fa-user:before {
    content: "\f007";
}

.fa-user-alt:before {
    content: "\f406";
}

.fa-user-cog:before {
    content: "\f4fe";
}

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url("../../webfonts/fa-brands-400.eot");
    src: url("../../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../../webfonts/fa-brands-400.woff2") format("woff2"), url("../../webfonts/fa-brands-400.woff") format("woff"), url("../../webfonts/fa-brands-400.ttf") format("truetype"), url("../../webfonts/fa-brands-400.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url("../../webfonts/fa-regular-400.eot");
    src: url("../../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../webfonts/fa-regular-400.woff2") format("woff2"), url("../../webfonts/fa-regular-400.woff") format("woff"), url("../../webfonts/fa-regular-400.ttf") format("truetype"), url("../../webfonts/fa-regular-400.svg#fontawesome") format("svg");
}

.far {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url("../../webfonts/fa-solid-900.eot");
    src: url("../../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../webfonts/fa-solid-900.woff2") format("woff2"), url("../../webfonts/fa-solid-900.woff") format("woff"), url("../../webfonts/fa-solid-900.ttf") format("truetype"), url("../../webfonts/fa-solid-900.svg#fontawesome") format("svg");
}

.fa, .fas {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}


.drawer-open {
    overflow: hidden !important;
}

.drawer-nav {
    position: fixed;
    z-index: 101;
    top: 0;
    overflow: hidden;
    width: 16.25rem;
    height: 100%;
    color: #222;
    background-color: #fff;
    backdrop-filter: blur(3px);
}

.drawer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.drawer-menu-item {
    font-size: 1rem;
    display: block;
    padding: .75rem;
    text-decoration: none;
    color: #222;
    border-top: solid 2px #fff0;
}

.drawer-menu-item:hover {
    color: #555;
    background-color: transparent;
}

/*! overlay */

.drawer-overlay {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
}

.drawer-open .drawer-overlay {
    display: block;
}

.drawer--right .drawer-nav {
    right: -16.25rem;
    -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--right.drawer-open .drawer-nav, .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
    right: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.drawer--right.drawer-open .drawer-hamburger {
    right: 16.25rem;
}

/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/

.drawer-hamburger {
    z-index: 104;
    top: 0;
    display: block;
    box-sizing: content-box;
    width: 2rem;
    padding: 0;
    padding-top: 16px;
    padding-right: .75rem;
    padding-bottom: 30px;
    padding-left: .75rem;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border: 0;
    outline: 0;
    background-color: transparent;
}

.drawer-hamburger:hover {
    cursor: pointer;
    background-color: transparent;
}

.drawer-hamburger-icon {
    position: relative;
    display: block;
    margin-top: 10px;
}

.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
    width: 100%;
    height: 2px;
    -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    background-color: #222;
}

.drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
    position: absolute;
    top: -10px;
    left: 0;
    content: ' ';
}

.drawer-hamburger-icon:after {
    top: 10px;
}

.drawer-open .drawer-hamburger-icon {
    background-color: transparent;
}

.drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after {
    top: 0;
}

.drawer-open .drawer-hamburger-icon:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.drawer-open .drawer-hamburger-icon:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.sr-only {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}
@media only screen and (min-width: 769px) {
    /*! Left */
    /*! Right */
    /*! container */
}

@media (min-width: 75em) {
    /*! container */
}

/*!------------------------------------*\
    Navbar
\*!------------------------------------*/

.drawer-navbar .drawer-navbar-header {
    border-bottom: 1px solid #ddd;
    background-color: #fff;
}

.drawer-navbar {
    z-index: 102;
    top: 0;
    width: 100%;
}

/*! .drawer-navbar modifier */

.drawer-navbar-header {
    position: relative;
    z-index: 102;
    box-sizing: border-box;
    width: 100%;
    height: 3.75rem;
    padding: 0 .75rem;
    text-align: center;
}

.drawer-navbar .drawer-nav {
    padding-top: 3.75rem;
}

.drawer-navbar .drawer-menu {
    padding-bottom: 7.5rem;
}

@media only screen and (min-width: 769px) {
    .drawer-navbar {
        /*height: 3.75rem;*/
        /*border-bottom: 1px solid #ddd;*/
        /*background-color: #fff;*/
    }
    .head_user p {
        margin: 10px 0;
    }
    .drawer-navbar .drawer-navbar-header {
        position: relative;
        display: block;
        float: left;
        width: auto;
        padding: 0;
        border: 0;
    }
    .drawer-navbar .drawer-menu--right {
        float: right;
    }
    .drawer-navbar .drawer-menu li {
        float: left;
    }
    .drawer-navbar .drawer-menu-item {
        line-height: 3.75rem;
        padding-top: 0;
        padding-bottom: 0;
    }
    .drawer-navbar .drawer-hamburger {
        display: none;
    }
    .drawer-navbar .drawer-nav {
        position: relative;
        left: 0;
        overflow: visible;
        width: 1100px;
        height: 3.75rem;
        padding-top: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .drawer-navbar .drawer-menu {
        padding: 0;
    }
    /*! dropdown */
}


/*!------------------------------------*\
    Container
\*!------------------------------------*/

.drawer-container {
    margin-right: auto;
    margin-left: auto;
}

@media only screen and (min-width: 769px) {
    .drawer-container {
        max-width: 100%;
    }
}

@media (min-width: 75em) {
    .drawer-container {
        max-width: 100%;
    }
}

/*===============================
        PC
================================*/

@media only screen and (min-width: 769px), print {
    header.drawer-navbar {
        background: white;
    }
    header .drawer-container {
        max-width: 1280px;
    }
    header .hp_top_logo {
        height: 80px;
    }
    .drawer-navbar.d_header .drawer-nav {
        width: 100%;
        height: 80px;
    }
    header .drawer-navbar-header {
        margin-left: 3rem;
    }
    header .drawer-menu.drawer-menu--right {
        margin-right: 3rem;
    }
    header .h_d_menu li {
        padding-top: 6vh;
    }
    header .drawer-menu-item {
        margin-left: 3vw;
    }
    header .up_bar {
        position: absolute;
        right: 0;
    }
    header.drawer-navbar .drawer-menu-item {
        line-height: 2.5rem;
    }
    .menu_select {
        border-top: solid 2px #585858;
    }
    h1.h1_logo {
        margin: 0;
    }
    header li a:hover {
        text-decoration: none;
        border-top: solid 2px #585858;
    }
    /*2021.11.11メガメニューを追加*/
    .drawer-nav {
        position: relative;
    }
    .drawer-menu>li:hover .megamenu {
        max-height: 9999px;
        opacity: 1;
    }
    .megamenu {
        background: #3e3e3e;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        width: 70%;
        max-width: 1280px;
        position: absolute;
        top: 80px;
        left: 0;
        left: 50%;
        transform: translateX(-50%);
        transition: all .2s ease-in;
        z-index: 999;
    }
    .megamenu li {
        padding: 20px!important;
    }
    .megamenu-inner {
        display: flex;
        flex-wrap: wrap;
    }
    .megamenu-inner li {
        width: calc( (100% / 2));
        padding: 0;
    }
    .megamenu-inner a {
        border-left: none;
    }
    nav .megamenu p {
        line-height: 1rem;
    }
}

/*===============================
     SmartPhone
================================*/

@media only screen and (max-width: 768px) {
    header .hp_top_logo {
        max-width: 300%;
        width: 6.5rem;
        margin-top: -0.4rem;
    }
    header .drawer-navbar-header {
        text-align: left;
        height: 5rem;
    }
    header .drawer-hamburger {
        position: absolute;
        margin-right: 10px;
        padding-bottom: 0px;
    }
    header .menu_button {
        font-size: 10px;
        width: 160%;
        margin-left: -30%;
        margin-top: 20px;
    }
    header .logo_font {
        font-size: 0.5rem;
        color: #222;
        margin-top: 5px;
        display: block;
    }
    header .color_link {
        color: #222;
    }
    header .sp_menu div.col {
        padding: 0;
        padding-right: 0.2rem;
        padding-top: 1.0rem;
    }
    .drawer-navbar .drawer-nav {
        padding-top: 5rem;
    }
    header .drawer-menu-item {
        padding: 0rem;
    }
    header .bel_menu {
        padding: 4px 10px;
        border-radius: 10px;
        font-size: 20px;
    }
}

@font-face {
    font-family: 'icomoon';
    src: url('../../webfonts/icomoon.eot?r2smai?v=0.12');
    src: url('../../webfonts/icomoon.eot?r2smai#iefix?v=0.12') format('embedded-opentype'), url('../../webfonts/icomoon.ttf?r2smai?v=0.12') format('truetype'), url('../../webfonts/icomoon.woff?r2smai?v=0.12') format('woff'), url('../../webfonts/icomoon.svg?r2smai#icomoon?v=0.12') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-footer_point:before {
    content: "\e948";
}

.icon-footer_scale:before {
    content: "\e949";
}

/*===============================
            pc　769px以上
    ================================*/

@media only screen and (min-width: 769px), print {
    .row .col.top_w_8_box {
        padding: 0 0.75rem 0 0;
    }
    .row .col.top_w_4_box {
        padding: 0 0 0 0.75rem;
    }
    .photo_box img {
        max-height: 500px;
    }
}

/*===============================
            スマホ・タブレット 768px以下
    ================================*/

@media only screen and (max-width: 768px) {
    .hp_top_belsana_img {
        background-image: none!important;
    }
    .sp_only_top_img {
        height: 200px;
    }
}

/*===============================
            PCとスマホの共通
    ================================*/

.container {
    max-width: 1280px;
}

.thumbnail {
    background-size: cover;
    background-position: center center;
    padding-top: 56.25%;
    width: 100%;
}

.content_box {
    overflow: hidden;
}

.hp_top_belsana_img {
    background-position: 100% 100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

a.img_a_link:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}

/*--------------------
     *◆TOPアイコン
    --------------------*/

.sub_title_box {
    max-height: 400px;
    padding-top: 15%;
    padding-bottom: 20%;
}

.circle_icon_b i {
    width: 80px;
    height: 80px;
    margin: 0;
    border-radius: 50%;
    background: black;
    line-height: 80px;
    text-align: center;
}

.circle_icon_b i:before {
    color: white;
    padding: 0;
    line-height: 80px;
}

.circle_icon_b svg {
    padding: 8px;
    margin-top: 5px;
}

/*--------------------
     *◆Button
    --------------------*/

.btn_technology {
    border: 2px solid white;
}

.btn_technology:hover {
    opacity: 0.6;
}