/* colors */

.gray {
    background-color: #f5f5f5;
    color: #000;
}

.gray a, .gray a:hover, .gray:hover {
    color: #000;
}

.gray2 {
    background-color: #e8e8e8;
    color: #000;
}

.gray2 a, .gray2 a:hover, .gray2:hover {
    color: #000;
}

.yellow {
    background-color: #ffeeb1;
    color: #000;
}

.yellow a, .yellow a:hover, .yellow:hover {
    color: #000;
}

.yellow2 {
    background-color: #f3cf4f;
    color: #000;
}

.yellow2 a, .yellow2 a:hover, .yellow2:hover {
    color: #000;
}


.red {
    background-color: #f2c7c7;
    color: #000;
}

.red a, .red a:hover, .red:hover {
    color: #000;
}

.reddark {
    background-color: #d37171;
    color: #fff;
}

.reddark a, .reddark a:hover,.reddark:hover {
    color: #fff;
}

.violet {
    background-color: #dcd8fa;
    color: #000;
}

.violet a, .violet a:hover, .violet:hover {
    color: #000;
}

.green {
    background-color: #def6db;
    color: #000;
}

.green a, .green a:hover, .green:hover {
    color: #000;
}

.blue {
    background-color: #c8e3f8;
    color: #000;
}

.blue a, .blue a:hover, .blue:hover {
    color: #000;
}

.orange {
    background-color: #f58026;
    color: #fff;
}

.orange a, .orange a:hover, .orange:hover {
    color: #fff;
}

.orangedark {
    background-color: #ff983c;
    color: #fff;
}

.orangedark a, .orangedark a:hover, .orangedark:hover {
    color: #fff;
}

.orangedark h1, .orangedark .h1,
.orangedark h2, .orangedark .h2,
.orangedark h3, .orangedark .h3,
.orangedark h4, .orangedark .h4,
.orangedark p,
.orangedark ul,
.orangedark li {
    color: #fff;
}

.violetdark {
    background-color: #8881b0;
    color: #fff;
}

.violetdark a, .violetdark a:hover, .violetdark:hover {
    color: #fff;
}

.violetdark h1, .violetdark .h1,
.violetdark h2, .violetdark .h2
.violetdark h3, .violetdark .h3,
.violetdark h4, .violetdark .h4,
.violetdark p,
.violetdark ul,
.violetdark li {
    color: #fff;
}

.violetdark2 {
    background-color: #5d3db0;
    color: #fff;
}

.violetdark2 a, .violetdark2 a:hover, .violetdark2:hover {
    color: #fff;
}

.violetdark2 h1, .violetdark2 .h1,
.violetdark2 h2, .violetdark2 .h2,
.violetdark2 h3, .violetdark2 .h3,
.violetdark2 h4, .violetdark2 .h4,
.violetdark2 p,
.violetdark2 ul,
.violetdark2 li {
    color: #fff;
}

.greendark {
    background-color: #558b4e;
    color: #fff;
}

.greendark a, .greendark a:hover, .greendark:hover,
.greendark h1, .greendark  .h1,
.greendark h2, .greendark  .h2,
.greendark h3, .greendark  .h3,
.greendark h4, .greendark  .h4,
.greendark h5, .greendark  .h5,
.greendark p,
.greendark ul,
.greendark li {
    color: #fff;
}


.greendark2, 
.greendark2 a,
.greendark2 a:hover,
.greendark2:hover,
.greendark2 h1, .greendark2 .h1,
.greendark2 h2, .greendark2 .h2,
.greendark2 h3, .greendark2 .h3,
.greendark2 h4, .greendark2 .h4,
.greendark2 h5, .greendark2 .h5,
.greendark2 p,
.greendark2 ul,
.greendark2 li {
    background-color: #5f8d59 !important;
    color: #fff !important;
}


.bluedark,
.bluedark a,
.bluedark a:hover,
.bluedark:hover,
.bluedark h1, .bluedark .h1,
.bluedark h2, .bluedark .h2,
.bluedark h3, .bluedark .h3,
.bluedark h4, .bluedark .h4,
.bluedark h5, .bluedark .h5,
.bluedark p,
.bluedark ul,
.bluedark li {
    background-color: #85b5db;
    color: #fff !important;
}


.bluedark2,
.bluedark2 a,
.bluedark2 a:hover,
.bluedark2:hover,
.bluedark2 h1, .bluedark2 .h1,
.bluedark2 h2, .bluedark2 .h2,
.bluedark2 h3, .bluedark2 .h3,
.bluedark2 h4, .bluedark2 .h4,
.bluedark2 h5, .bluedark2 .h5,
.bluedark2 p,
.bluedark2 ul,
.bluedark2 li {
    background-color: #4B84C9 !important;
    color: #fff !important;
}

.back_black,
.back_black a,
.back_black a:hover,
.back_black:hover,
.back_black h1, .back_black .h1,
.back_black h2, .back_black .h2,
.back_black h3, .back_black .h3,
.back_black h4, .back_black .h4,
.back_black h5, .back_black .h5,
.back_black p,
.back_black ul,
.back_black li {
    background-color: #000 !important;
    color: #fff;
}

.magentadark,
.magentadark:hover,
.magentadark a,
.magentadark a:hover,
.magentadark h1, .magentadark .h1,
.magentadark h2, .magentadark .h2,
.magentadark h3, .magentadark .h3,
.magentadark h4, .magentadark .h4,
.magentadark p,
.magentadark ul,
.magentadark li {
    background-color: #b85fb3 !important;
    color: #fff !important;
}

.bgwhite {
    background-color: #fff;
    color: #333
}

.bgblack {
    background-color: #000;
    color: #fff
}

.bgblack a,
.bgblack a:hover {
    color: #fff;
}

.white a,
.white a:hover {
    color: #333;
}

.text-gray {
color: #898989 !important
}

.text-greendark {
    color: #558b4e  !important;
}

.text-greendark2 {
    color: #00a651  !important;
}



.text-bluedark2 {
    color: #4B84C9  !important;
}

.text-blue {
    color: #00aeef  !important;
}


.text_bluedark {
    color: #85b5db  !important;
}


.text_magentadark {
    color: #b85fb3  !important;
}

.text_magentadark2 {
    color: #9c298d  !important;
}

.text_orangedark {
    color: #ff983c  !important;
}

.text_reddark {
    color: #d37171  !important;
}

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

.text-yellow {
    color: #fffb60  !important;
}

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

/**/
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: #4ca517;
    border-color: #89b583;
}

.pagination>li>a,
.pagination>li>span {
    color: #4ca517;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #89b583;
}

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    z-index: 2;
    color: #333;
    background-color: #def6db;
    border-color: #89b583;
}

/**/



.button {
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

.button a {
    display: inline-block;
    padding: 10px 12px;
    background: #4B84C9;
    color: #fff !important;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    border-radius: 5px;
}

.button a:hover {
    color: #fff !important;
    background: #4B84C9;
    box-shadow: none
}

/**/
.grey_button {
    display: table;
    width: 100%
}

.grey_button a {
    display: block;
    float: left;
    text-decoration: none;
    background: #777;
    color: #fff;
    padding: 0.1rem 0.8rem .3rem 0.8rem;
    border-radius: 0.2rem;
}

.grey_button a:hover {
    color: #fff;
    text-decoration: none;
    background: #4B84C9;
}