body {
    margin: 0;
    top: 0;
    font-family: PTSans-Regular !important;
    font-size: 18px !important;
    background-color: #cac7c7 !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    /*890000*/
}

.button {
    background-color: #bddfba; /* Green */
    border: none;
    color: black;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 2px 2px;
    cursor: pointer;
    width: 300px;
}

    .button:hover {
        background-color: #90d989;
        color: black;
    }
@font-face {
    font-family: 'PTSans-Regular';
    src: url('../fonts/PTSans-Regular.ttf') format('truetype');
}

.containers {
    top: 0;
    width: 100%;
    /*margin: auto;*/
    background: #fff;
}
/*.content {
    padding: 16px; #054c0c
}*/
.header {
    background-color: #eaeaea;
    /*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
    position: relative;
    width: 100%;
    z-index: 5;
    color: black;
}

    .header ul {
        top: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        background-color: white;
        color: white;
    }

    .header li a {
        display: block;
        padding: 20px 20px;
        border-top: 0.01px solid #ededed;
        border-bottom: 1px solid #ededed;
        text-decoration: none;
        color: black;
        /*border-style: solid;*/
        border-width: 1px 0 0;
        /*border-top-color: white;
        border-top-width: 1px;
        border-top: 0.01px solid #808080;
        border-bottom: 0.01em solid #808080;
        border-bottom-color: #ededed;
            border-bottom: 1px solid #ededed;
        */
    }

        .header li a:hover,
        .header .menu-btn:hover {
            background-color: #f4f4f4;
            color: black;
        }

    .header .logo {
        display: block;
        float: left;
        font-size: 2em;
        padding: 5px 5px;
        text-decoration: none;
        color: #000;
    }

    /* menu */

    .header .menu {
        clear: both;
        max-height: 0;
        transition: max-height .2s ease-out;
        color: black;
        width: 100%;
    }

    /* menu icon */

    .header .menu-icon {
        cursor: pointer;
        display: inline-block;
        float: right;
        right: 5px;
        padding: 28px 20px;
        position: absolute;
        user-select: none;
    }

        .header .menu-icon .navicon {
            background: #000;
            display: block;
            height: 1px;
            position: absolute;
            transition: background .2s ease-out;
            width: 18px;
        }

            .header .menu-icon .navicon:before,
            .header .menu-icon .navicon:after {
                background: #000;
                content: '';
                display: block;
                height: 100%;
                position: absolute;
                transition: all .2s ease-out;
                width: 100%;
            }

            .header .menu-icon .navicon:before {
                top: 5px;
            }

            .header .menu-icon .navicon:after {
                top: -5px;
            }

    /* menu btn */

    .header .menu-btn {
        display: none;
    }

        .header .menu-btn:checked ~ .menu {
            max-height: 740px;
        }

        .header .menu-btn:checked ~ .menu-icon .navicon {
            background: transparent;
        }

            .header .menu-btn:checked ~ .menu-icon .navicon:before {
                /*transform: rotate(40deg);*/
            }

            .header .menu-btn:checked ~ .menu-icon .navicon:after {
                /*transform: rotate(45deg);*/
            }

        .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
        .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
            top: 0;
        }

.top-container {
    display: none;
    /*background-color: #f1f1f1;
    padding: 10px;
    text-align: center;*/
}

.logos {
    display: block;
    float: left;
    color: black;
}

.footer {
    background: #eaeaea;
    color: #000;
    height: 150px;
    padding-left: 15px;
    padding-top: 2px;
    padding-bottom: 8px;
    /*width:100%;*/
}

img {
    width: 100%;
}

* {
    box-sizing: border-box;
}
/* 48em = 768px */
.column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    padding: 0px;
}

/* Remove extra left and right margins, due to padding */
.row {
    margin: 0 -5px;
}

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

.card {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
    padding: 16px;
    width: 90%;
    background-color: #fff;
    margin-top: 20px;
}

.top-container2 {
    /*padding: 2px;*/
    width: 88%;
}

.dexin {
    display: none;
    background-color: white;
    top: 20px;
    padding-left: 0;
    width: auto;
}

.dexin2 {
    display: block;
    background-color: white;
    /*top: 20px;*/
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.hh {
    display: none;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

    .sticky + .content {
        padding-top: 102px;
    }

.linkabove {
    color: darkgrey;
    padding: 2px;
    text-decoration: none;
}

.linkabovelink {
    text-decoration: none;
}

.card2 {
    width: 45px;
    position: relative;
    display: inline-block;
}

    .card2 .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }

    .card2:hover .img-top {
        display: inline;
    }

.advertisement {
    position: fixed;
    top: 0;
    padding-left: 20px;
    ;
    background: #fff;
    z-index: 1;
    transition: all 1s;
    height: 50px;
    left: 50px;
    display: none;
}

.hide {
    opacity: 0;
    left: -100%;
    display: none;
}

.show {
    opacity: 1;
    left: 70px;
    display: none;
}

@media only screen and (min-width: 768px)
/*@media (min-width: 48em)*/ {
    * {
        box-sizing: border-box;
    }

    .advertisement {
        position: fixed;
        top: 0;
        padding-left: 10px;
        ;
        background: #fff;
        z-index: 1;
        transition: all 1s;
        height: 50px;
        left: 50px;
    }
    .button {
        background-color: #bddfba; /* Green */
        border: none;
        color: black;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 2px 2px;
        cursor: pointer;
        width: 300px;
    }

        .button:hover {
            background-color: #90d989;
            color: black;
        }
    .hide {
        opacity: 0;
        left: -100%;
    }

    .show {
        opacity: 1;
        left: 70px;
    }

    .card2 {
        width: 45px;
        position: relative;
        display: inline-block;
    }

        .card2 .img-top {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
        }

        .card2:hover .img-top {
            display: inline;
        }

    .linkabove {
        color: darkgrey;
        padding: 20px;
        text-decoration: none;
    }

    .linkabovelink {
        text-decoration: none;
    }

    .dexin {
        display: block;
        background-color: white;
        top: 20px;
        padding-left: 40px;
        padding-right: 40px;
        width: 100%;
    }

    .dexin2 {
        display: none;
        background-color: white;
        /*top: 20px;*/
        padding-left: 0;
        width: auto;
    }
    /* Float four columns side by side */
    .column {
        float: left;
        width: 32.3%;
        padding: 0 5px;
    }

    /* Remove extra left and right margins, due to padding */
    .row {
        margin: 0 -5px;
    }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

    .card {
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
        padding: 15px;
        background-color: #fff;
    }

    .header {
        width: 1020px;
        background-color: #ffffff;
    }

        .header ul {
            left: 0;
            right: 0;
            margin: auto;
            align-items: center;
            background-color: white;
            color: black;
            border-bottom-color: #ededed;
            border-bottom: 1px solid #ededed;
            position: relative;
            list-style: none;
        }

        .header li {
            float: left;
            left: auto;
            right: auto;
            align-items: center;
            background-color: #ffffff;
            color: black;
            /*position:relative;*/
        }

        .header ul li {
            list-style: none;
            position: relative;
        }

            .header ul li ul {
                position: absolute;
                left: 0;
                background-color: #ffffff;
            }

                .header ul li ul li {
                    display: block;
                }

            .header ul li:hover ul {
                display: block;
                width: 200px;
            }
            .active, .header ul li:hover ul {
                background-color: #666;
                color: black;
            }
            .header ul li ul li.sub-menu {
                position: absolute;
                left: 0;
                background-color: #ffffff;
                display: none;
                list-style: none;
            }
        /*.header li li {
            display:block;
        }*/
        /*.header li a {
                padding: 20px 30px;
                vertical-align: middle;

                
            }*/
        .header li a {
            display: block;
            padding: 20px 20px;
            vertical-align: middle;
            border-top: 1px solid #ffffff;
            text-decoration: none;
            color: black;
            border-style: solid;
            border-color: #ffffff;
            border-width: 1px 1px 0;
        }



    .menu {
        align-self: center;
    }

        .menu .active {
            background-color: #808080;
        }

    .logos {
        display: none;
    }

    .header .menu {
        clear: none;
        float: right;
        max-height: none;
        vertical-align: middle;
    }

    .header .menu-icon {
        display: none;
    }

    .containers {
        width: 1020px !important;
        margin: auto;
    }

    .top-container {
        display: block;
        background-color: #808080;
        font-weight: bold;
        text-align: center;
        /*font-size: 50px;*/
    }

    .top-container2 {
        padding-top: 10px;
        width: 1020px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .hh {
        display: block;
    }

    .sticky {
        position: fixed;
        top: 0;
        width: 1020px;
    }

        .sticky + .content {
            padding-top: 102px;
        }

    .footer {
        background: #eaeaea;
        color: #000;
        height: 150px;
        padding-left: 15px;
        padding-top: 2px;
        padding-bottom: 5px;
        width: 1020px;
    }
}

/*article {
    -webkit-columns: 2 200px;
    -moz-columns: 2 200px;
    columns: 2 200px;
    -webkit-column-gap: 4em;
    -moz-column-gap: 4em;
    column-gap: 4em;
}

p {
    margin-bottom: 1.3em;
}

h1, h2, h3, h4 {
    margin: 1.414em 0 0.5em;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    margin-top: 0;
    font-size: 3.157em;
}

h2 {
    font-size: 2.369em;
}

h3 {
    font-size: 1.777em;
}

h4 {
    font-size: 1.333em;
}

small, .font_small {
    font-size: 0.75em;
}*/