/* Bengin fix*/
body {
margin: 0;
padding: 0;
font-size: 15px;
color: #333333;
background: #f4f4f4;
font-family: 'Roboto',sans-serif;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased
}

#footer_bg_cl {
    background-color: #d81921;
}

a {
color: #333333;
text-decoration: none
}

a:hover {
    color: #2196F3
}

img {
border: none;
}

ul, li {
margin: 0;
padding: 0;
list-style: none
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: 500;
line-height: 1.4;
}

p, figure, figcaption, blockquote, dl, dt, dd, ol, caption, table, tbody, tfoot, thead, tr, th, td, fieldset, embed, object, applet, canvas, caption, embed, hgroup, iframe, output, pre, strike, sub, summary, sup, time, video {
border: 0;
margin: 0;
padding: 0;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

::-webkit-input-placeholder {
color: #555;
opacity: 100
}

:-ms-input-placeholder {
color: #555;
opacity: 100
}

::placeholder {
color: #555;
opacity: 100
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
box-shadow: 0 0 0 1000px white inset;
}

input::-ms-clear {
display: none;
}

select::-ms-expand {
display: none;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
/*input,select,textarea,button */
input, select, textarea {
float: left;
width: 100%;
border: solid 1px #e0e0e0;
margin: 0;
box-shadow: none;
outline: none;
font-family: 'Roboto';
font-size: 14px;
font-weight: 400;
line-height: inherit;
border-radius: 2px;
webkit-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
text-overflow: "";
appearance: none;
}

input, select {
height: 40px;
padding: 0 10px;
}

select {
background: url(../images/arow.svg) no-repeat;
background-position: right 8px top 50%;
padding-right: 24px;
}

textarea {
height: 100px;
padding: 10px;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border: solid 1px #6cc0e5;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

button {
background: none;
cursor: pointer;
outline: none;
border: 0;
padding: 0;
margin: 0;
font-family: 'Roboto';
font-size: 14px;
font-weight: 400;
line-height: inherit;
}

button:focus {
    outline: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

table td, table th {
    padding: 10px;
    border: 1px solid #e0e0e0;
    vertical-align: top
}
/* End fix*/

/* Bengin container */
.container {
float: left;
width: 100%;
overflow: hidden
}

.main {
float: left;
width: 100%;
position: relative;
margin-bottom: 100px;
}

.main-content {
margin: auto;
width: 100%;
max-width: 1000px;
}

.header {
float: left;
width: 100%;
position: relative;
margin-bottom: 50px;
background: #d81921;
}

.logo {
float: left;
margin-left: 24px;
margin-top: 10px;
margin-right: 30px;
}

.top-right {
float: right;
margin-right: 20px;
position: absolute;
right: 0;
top: 0;
}

.top-right-item:first-child {
border-left: 0;
}

.top-right-item {
float: left;
border-left: solid 1px #b40d14;
}

.top-right-item-link {
color: #fff;
height: 48px;
line-height: 48px;
padding: 0 15px;
float: left;
}

.top-right-item-link:hover {
    background: #333;
    color: #fff;
}

.btn-user {
color: #fff;
height: 48px;
padding: 0 20px;
}

.btn-user:hover {
    background: #333;
}

.iccard {
margin-right: 8px;
}

.item-user {
width: 100%;
float: left;
border-bottom: solid 1px #e0e0e0;
padding: 15px;
position: relative;
padding-left: 40px;
}

.item-user:hover {
    background: #f2f2f2;
}

.icon-user {
position: absolute;
left: 15px;
top: 18px;
}

.footer {
z-index: 99;
width: 100%;
position: fixed;
box-shadow: 2px 0 5px 0 rgba(0,0,0,0.16),5px 0 10px 0 rgba(0,0,0,0.12);
background: #fff;
bottom: 0;
left: 0;
right: 0;
}
/* End container */

/* Bengin Form */
.form-group {
float: left;
width: 100%;
position: relative;
margin-bottom: 15px;
display: table
}

.form-group:last-child {
    margin-bottom: 0
}

.icon_form {
position: absolute;
left: 0;
top: 7px;
color: #757575;
z-index: 9;
}

.icon_form2 {
position: absolute;
left: 12px;
top: 10px;
color: #757575;
z-index: 9;
}

.item-sex {
float: left;
margin-right: 20px
}

.item-sex:last-child {
    margin-right: 0
}

.btn1 {
border: solid 2px #2196F3;
padding: 0 16px;
height: 40px;
color: #2196F3;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

.btn2 {
background: #2196F3;
padding: 0 16px;
height: 40px;
color: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

.btn2:hover {
    color: #fff;
}

.btn_a1 {
background: #f2f2f2;
display: inline-block;
line-height: 36px;
border: solid 2px #e0e0e0;
padding: 0 16px;
height: 40px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

.btn_a2 {
background: #d81921;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 16px;
color: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
cursor: pointer
}

.btn_a2:hover {
    color: #fff;
}

.btn-full {
width: 100%
}

/* radio label */
.label-input {
display: block;
position: relative;
padding-left: 30px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.input-1 {
position: absolute;
opacity: 0;
cursor: pointer;
display: none;
left: 0;
right: 0;
width: 10px;
margin: 0;
padding: 0;
top: 0;
height: 10px
}

.input-2 {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border: solid 1px #2196F3
}

.input-2:after {
    left: 5px;
    top: 3px;
    width: 6px;
    height: 9px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.input-1 ~ .input-2 {
background-color: #fff;
border: solid 1px #e0e0e0;
border-radius: 2px
}

.input-1:checked ~ .input-2 {
background-color: #2196F3;
border: solid 1px #2196F3;
box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.input-2:after {
content: "";
position: absolute;
display: none
}

.input-1:checked ~ .input-2:after {
display: block
}
/* checked label  */
.label-radio {
display: block;
position: relative;
padding-left: 30px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.radio-1 {
position: absolute;
opacity: 0;
cursor: pointer;
display: none;
left: 0;
right: 0;
width: 10px;
margin: 0;
padding: 0;
top: 0;
height: 10px
}

.radio-2 {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border: solid 1px #e0e0e0;
border-radius: 100%
}

.radio-2:after {
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #2196F3
}

.labelradio:hover .radio-1 ~ .radio-2 {
background-color: #fff
}

.radio-1:checked ~ .radio-2 {
background-color: #fff;
border: solid 1px #2196F3;
box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.radio-2:after {
content: "";
position: absolute;
display: none
}

.radio-1:checked ~ .radio-2:after {
display: block
}

/* Bengin group_11*/
.group_11:first-child {
margin-top: 16px;
}

.group_11 {
float: left;
width: 100%;
position: relative;
margin-top: 26px;
}

.input_11 {
float: none;
height: auto;
padding: 10px 0;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #e0e0e0;
}

.input_11:focus {
    border: none;
    outline: none;
    box-shadow: none;
}


.label_11 {
color: #999;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}

.input_11:focus ~ .label_11, .input_11:valid ~ .label_11 {
top: -16px;
font-size: 12px;
color: #2196F3;
box-shadow: none;
}

.input_11:focus ~ .bar_11:before, .input_11:focus ~ .bar_11:after {
width: 50%;
box-shadow: none;
}

.bar_11 {
position: relative;
display: block;
width: 100%;
}

.bar_11:before, .bar_11:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 0;
    position: absolute;
    background: #2196F3;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.bar_11:before {
    left: 50%;
}

.bar_11:after {
    right: 50%;
}
/* End group_11*/
/* End Form */

/*Bengen section */
.section {
float: left;
width: 100%;
margin-bottom: 40px;
position: relative
}

.cat-box-title {
float: left;
width: 100%;
position: relative
}

.cat-box-content {
float: left;
width: 100%;
position: relative
}
/* Bengin breadcrumbs */
.breadcrumb {
float: left;
width: 100%;
margin-bottom: 10px;
}

.breadcrumb-item {
display: contents;
color: #2196F3
}

.breadcrumb-item + .breadcrumb-item:before {
    padding: 0 5px;
    color: #555;
    content: "/\00a0"
}

.breadcrumb-item a {
    color: #2196F3;
}

    .breadcrumb-item a:hover {
        color: #2196F3;
    }
/* End breadcrumbs */

/*Bengin pagination */
.pagination {
float: left;
width: 100%
}

.pagination-right {
float: right
}

.pagination-pages {
margin-left: 10px;
float: left;
height: 36px;
width: 36px;
text-align: center;
line-height: 36px;
background-color: #f2f2f2;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px
}

.pagination-pages:first-child {
    margin-left: 0
}

.pagination-pages:hover {
    background-color: #2196F3;
    color: #fff
}

.pagination-pages.active {
    background-color: #2196F3;
    color: #fff
}

.pagination-pages1 {
margin-left: -1px;
float: left;
height: 36px;
width: 36px;
text-align: center;
line-height: 36px;
background-color: #fff;
border: solid 1px #e0e0e0
}

.pagination-pages1:first-child {
    margin-left: 1px;
    border-radius: 3px 0 0 3px
}

.pagination-pages1:last-child {
    border-radius: 0 3px 3px 0
}

.pagination-pages1:hover {
    background-color: #d81921;
    color: #fff;
    border: solid 1px #d81921
}

.pagination-pages1.active {
    background-color: #d81921;
    color: #fff;
    border: solid 1px #d81921
}

.pagination-pages.o {
border-radius: 100%
}

.pagination-load {
float: left;
width: 100%;
margin-bottom: 15px;
text-align: center
}

.pagination-loadmore {
float: left;
width: 100%;
background: #f2f2f2;
height: 40px;
line-height: 40px
}

.load-more {
float: left;
margin-top: 15px;
width: 100%;
text-align: center
}
/* End pagination */
/*Bengen col - column */
.col1 {
float: left;
width: 100%;
position: relative
}

.col2 {
float: left;
width: 48.5%;
margin-right: 3%;
position: relative
}

.col2:nth-child(2n+2) {
    margin-right: 0
}

.col3 {
float: left;
width: 31.3%;
margin-right: 3%;
position: relative
}

.col3:nth-child(3n+3) {
    margin-right: 0
}

.col4 {
float: left;
width: 22.7%;
margin-right: 3%;
position: relative
}

.col4:nth-child(4n+4) {
    margin-right: 0
}

.col5 {
float: left;
width: 17.6%;
margin-right: 3%;
position: relative
}

.col5:nth-child(5n+5) {
    margin-right: 0
}

.column1 {
float: left;
width: 100%;
position: relative
}

.column2 {
float: left;
width: 48.5%;
margin-right: 3%;
position: relative
}

.column2:nth-child(2n+2) {
    margin-right: 0
}

.column3 {
float: left;
width: 31.3%;
margin-right: 3%;
position: relative
}

.column3:nth-child(3n+3) {
    margin-right: 0
}

.column4 {
float: left;
width: 22.7%;
margin-right: 3%;
position: relative
}

.column4:nth-child(4n+4) {
    margin-right: 0
}
/*End col - column */
.text-center {
text-align: center
}

.text-left {
text-align: left
}

.text-right {
text-align: right
}
/*End section */

/* Bengin accordion-menu*/
.accordion-menu {
width: 100%;
float: left;
}

.accordion_item {
position: relative;
width: 100%;
float: left;
}

.accordion_title {
float: left;
padding: 10px 0;
width: 100%;
padding-right: 36px;
border-bottom: solid 1px #e0e0e0;
}

.accordion_content {
display: none;
width: 100%;
float: left;
}

.accordion_list {
padding: 10px 0;
float: left;
width: 100%;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out
}

.accordion_icon {
background: url(../images/down3.svg) no-repeat center;
cursor: pointer;
display: block;
position: absolute;
right: 0;
background-size: 12px;
width: 32px;
height: 32px;
z-index: 9;
top: 5px;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

.accordion_open .accordion_icon {
background: url(../images/down3.svg) no-repeat center;
background-size: 12px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out
}
/* End accordion-menu*/

/* Bengin menu_down*/
.menu_down {
position: relative;
width: 100%;
float: left;
}

.menu_down_sub {
overflow: hidden;
display: none;
}

.content_menu_down_sub {
padding: 10px;
display: block;
}

.menu_down_item1 {
width: 100%;
padding: 10px;
transition: background .3s ease;
border-bottom: 1px solid #e0e0e0;
display: block;
}

.menu_down_item1:hover {
    background-color: #f5f6fa;
}

.downarrow {
background-image: url("../images/down3.svg");
background-size: 12px;
position: relative;
z-index: 99;
background-repeat: no-repeat;
background-position: center;
background-position: right;
}

.uparrow {
background-image: url("../images/down4.svg");
background-size: 12px;
position: relative;
z-index: 99;
background-repeat: no-repeat;
background-position: center;
background-position: right;
}
/* End menu_down*/

/* Begin menu css3 all */
.cs3_menu_ul {
float: left;
}

.cs3_menu_li {
float: left;
position: relative
}

.cs3_menu_a {
padding: 0 15px;
float: left;
width: 100%;
height: 48px;
line-height: 48px;
color: #fff;
-webkit-transition: color 0.2s linear,background 0.2s linear;
-moz-transition: color 0.2s linear,background 0.2s linear;
-o-transition: color 0.2s linear,background 0.2s linear;
transition: color 0.2s linear,background 0.2s linear
}

.cs3_menu_a:hover {
    background: #b40d14;
    color: #fff
}

.cs3_menu_a.active {
    background: #b40d14;
    color: #fff
}

.cs3_menu_ul li:hover > .sub_menu_down {
visibility: visible;
opacity: 1
}

.sub_menu_down li {
width: 100%
}

.sub_menu_down {
width: 180px;
background: #fff;
position: absolute;
opacity: 0;
visibility: hidden;
z-index: 99999;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-transition: opacity 0.2s linear,visibility 0.2s linear;
-moz-transition: opacity 0.2s linear,visibility 0.2s linear;
-o-transition: opacity 0.2s linear,visibility 0.2s linear;
transition: opacity 0.2s linear,visibility 0.2s linear
}

.sub_menu_down1 {
top: 48px;
left: 0;
}

.sub_menu_down2 {
top: 0;
left: 180px
}

.sub_menu_down3 {
top: 0;
left: 180px
}

.item_sub_menu {
padding: 12px 15px;
float: left;
width: 100%;
position: relative;
}

.item_sub_menu:hover {
    background: #f2f2f2;
    color: #2196F3
}

.icright {
font-size: 16px;
position: absolute;
right: 15px;
top: 13px;
}

.ic-down-menu {
font-size: 12px;
margin-left: 5px;
}
/* End menu css3 all */

/* Bengin dropdown*/
.btn-dropdown1 {
position: relative;
float: left;
}

.content-drop {
background: #fff;
display: none;
position: absolute;
right: 0;
z-index: 999;
min-width: 14rem;
max-height: 400px;
overflow-y: auto;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}

.content-drop.left0 {
    left: 0;
}

.dropdowncontent {
float: left;
width: 100%;
padding: 15px;
}

.nav-drop4 {
width: 300px;
padding: 15px;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
right: 0;
position: absolute;
float: left;
z-index: 9
}

.btn.btn-open {
width: 32px;
background: #f2f2f2;
height: 32px;
border-radius: 2px
}

.btn.btn-close {
background: #2196F3;
color: #fff;
position: absolute;
z-index: 1;
margin-top: -32px;
width: 32px;
height: 32px;
border-radius: 2px
}

.dropdowncontent5 {
display: none;
float: left;
width: 100%;
padding: 15px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}

.li-group {
float: left;
width: 100%;
white-space: nowrap;
position: relative;
margin-bottom: 15px;
display: table;
}
/*End dropdown*/
/*Bengin Popup Example 1 (n+id) */
.item-popup1 {
float: left;
margin-right: 10px
}

.popup-bg {
background: rgba(0,0,0,0.6);
position: fixed;
display: none;
z-index: 9999;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.popup-wrapper {
position: relative;
margin: auto;
max-width: 480px;
top: 5%;
}

.popup-body {
float: left;
width: 100%;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

.popup-header {
float: left;
width: 100%;
background: #e3e3e3;
padding: 12px 20px;
}

.popup-title {
font-size: 18px;
font-weight: 500;
}

.close-popup {
position: absolute;
right: 5px;
z-index: 999;
font-size: 32px;
width: 36px;
height: 36px;
text-align: center;
line-height: 36px;
cursor: pointer;
top: 8px;
}

.popup-content {
float: left;
width: 100%;
padding: 20px;
max-height: 75vh;
overflow-y: auto;
}
/*End Popup Example 1 (n+id) */

/* Bengin tabs */
.tabs-main {
float: left;
width: 100%;
}

.js-tab-content {
float: left;
width: 100%
}

.tabs-content {
display: none;
float: left;
width: 100%;
}

.tabs-active {
display: block;
}

.tabs-nav {
width: 100%;
float: left;
background: #f2f2f2;
border-bottom: solid 3px #d81921;
}

.tabs-item1 {
float: left;
line-height: 48px;
height: 48px;
padding: 0 20px;
font-size: 18px;
font-weight: 500
}

.tabs-item1:hover {
    background: #d81921;
    transition: .5s ease;
    color: #fff;
}

.tabs-item1.tabs-active {
    background: #d81921;
    transition: .5s ease;
    color: #fff;
}
/* End tabs */

/* Bengin tooltip 2 */
.tooltip_icon {
float: left
}

.btn_tooltip {
align-items: center;
display: flex
}
/* TOOLTIP */
.tooltip {
position: relative;
overflow: hidden
}

.tooltip:hover {
    overflow: visible
}

    .tooltip:hover .tooltip-content {
        opacity: 1
    }

.tooltip .tooltip-content {
    background: #05a8ff;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    color: #ffffff;
    font-size: 12px;
    z-index: 9999;
    border-radius: 2px;
    max-width: 200px;
    min-width: 200px;
    padding: 1em;
    position: absolute;
    opacity: 0;
    transition: all .3s ease
}

    .tooltip .tooltip-content::after {
        background: #05a8ff;
        content: "";
        height: 10px;
        position: absolute;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 10px
    }

.tooltip.top .tooltip-content {
    bottom: calc(100% + 1em);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

    .tooltip.top .tooltip-content::after {
        bottom: -5px;
        left: 50%;
        margin-left: -5px
    }

.tooltip.bottom .tooltip-content {
    bottom: calc(-100% - 7em);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

    .tooltip.bottom .tooltip-content::after {
        top: -5px;
        left: 50%
    }

.tooltip.right .tooltip-content {
    left: calc(100% + 1em);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

    .tooltip.right .tooltip-content::after {
        left: -5px;
        margin-top: -5px;
        top: 50%
    }

.tooltip.left .tooltip-content {
    right: calc(100% + 1em);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

    .tooltip.left .tooltip-content::after {
        right: -5px;
        margin-top: -5px;
        top: 50%
    }
/* End tooltip 2 */

/*Bengin article */
.article {
float: left;
width: 100%;
position: relative
}

.article-title {
width: 100%;
float: left;
font-size: 24px;
padding-bottom: 5px
}

.article-time {
width: 100%;
float: left;
padding-bottom: 5px
}

.article-share {
width: 100%;
float: left;
margin-bottom: 10px;
}

.entry {
font-size: 15px;
padding-top: 15px;
float: left;
width: 100%;
margin-bottom: 15px;
}

.entry h2, .entry h3, .entry h4 {
    padding: 7px 0;
    font-size: 16px;
}

.entry p {
    padding: 7px 0;
    color: #222
}

.entry-dropcap {
display: block;
float: left;
margin: 0 8px 0 0;
font-size: 50px;
line-height: 50px
}

.entry-thumb {
padding: 8px 0;
text-align: center;
position: relative
}

.entry-thumb img {
    max-width: 640px;
    width: 100%
}

.entry-figcaption-title {
font-size: 13px;
color: #555;
padding: 0 10px;
font-style: italic;
}

.entry-blockquote {
border-left: 3px solid #757575;
color: #555;
font-style: italic;
margin: 15px auto;
padding: 0px 15px;
width: 85%;
}

.entry strong {
font-weight: 500
}
/*End */

/* Bengin waves effect  */
.waves-effect {
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
z-index: 1;
will-change: opacity, transform;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.waves-effect .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
}

.waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45);
}

.waves-effect.waves-red .waves-ripple {
    background-color: rgba(244, 67, 54, 0.7);
}

.waves-effect.waves-yellow .waves-ripple {
    background-color: rgba(255, 235, 59, 0.7);
}

.waves-effect.waves-orange .waves-ripple {
    background-color: rgba(255, 152, 0, 0.7);
}

.waves-effect.waves-purple .waves-ripple {
    background-color: rgba(156, 39, 176, 0.7);
}

.waves-effect.waves-green .waves-ripple {
    background-color: rgba(76, 175, 80, 0.7);
}

.waves-effect.waves-teal .waves-ripple {
    background-color: rgba(0, 150, 136, 0.7);
}

/* Firefox Bug: link not triggered */
.waves-effect .waves-ripple {
    z-index: -1;
}
/* End waves effect  */

/*animations*/

.w3-animate-fading {
animation: fading 10s infinite
}

@keyframes fading {
0% {
    opacity: 0
}

50% {
    opacity: 1
}

100% {
    opacity: 0
}
}

.w3-animate-opacity {
animation: opac 0.8s
}

@keyframes opac {
from {
    opacity: 0
}

to {
    opacity: 1
}
}

.w3-animate-top {
animation: animatetop 0.4s
}

@keyframes animatetop {
from {
    top: -300px;
    opacity: 0
}

to {
    top: 0;
    opacity: 1
}
}

.w3-animate-left {
animation: animateleft 0.4s
}

@keyframes animateleft {
from {
    left: -300px;
    opacity: 0
}

to {
    left: 0;
    opacity: 1
}
}

.w3-animate-right {
animation: animateright 0.4s
}

@keyframes animateright {
from {
    right: -300px;
    opacity: 0
}

to {
    right: 0;
    opacity: 1
}
}

.w3-animate-bottom {
animation: animatebottom 0.4s
}

@keyframes animatebottom {
from {
    bottom: -300px;
    opacity: 0
}

to {
    bottom: 0;
    opacity: 1
}
}

.w3-animate-zoom {
animation: animatezoom 0.6s;
}

@keyframes animatezoom {
from {
    transform: scale(0)
}

to {
    transform: scale(1)
}
}

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}

.slow {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}

.slower {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}

.slowest {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
/* Added by Andy Meetan */
.delay-250 {
-webkit-animation-delay: 0.25s;
-moz-animation-delay: 0.25s;
-o-animation-delay: 0.25s;
animation-delay: 0.25s
}

.delay-500 {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s
}

.delay-750 {
-webkit-animation-delay: 0.75s;
-moz-animation-delay: 0.75s;
-o-animation-delay: 0.75s;
animation-delay: 0.75s
}

.delay-1000 {
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
-o-animation-delay: 1.0s;
animation-delay: 1.0s
}

.delay-1250 {
-webkit-animation-delay: 1.25s;
-moz-animation-delay: 1.25s;
-o-animation-delay: 1.25s;
animation-delay: 1.25s
}

.delay-1500 {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s
}

.delay-1750 {
-webkit-animation-delay: 1.75s;
-moz-animation-delay: 1.75s;
-o-animation-delay: 1.75s;
animation-delay: 1.75s
}

.delay-2000 {
-webkit-animation-delay: 2.0s;
-moz-animation-delay: 2.0s;
-o-animation-delay: 2.0s;
animation-delay: 2.0s
}

.delay-2500 {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
animation-delay: 2.5s
}

.delay-2000 {
-webkit-animation-delay: 2.0s;
-moz-animation-delay: 2.0s;
-o-animation-delay: 2.0s;
animation-delay: 2.0s
}

.delay-2500 {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
animation-delay: 2.5s
}

.delay-3000 {
-webkit-animation-delay: 3.0s;
-moz-animation-delay: 3.0s;
-o-animation-delay: 3.0s;
animation-delay: 3.0s
}

.delay-3500 {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s
}

.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown {
opacity: 0;
-webkit-transform: translateX(400px);
transform: translateX(400px)
}

.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown {
opacity: 0;
-webkit-transform: translateX(400px);
transform: translateX(400px)
}

.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, .rotateInDownLeft, .rotateDownUpRight, .rollIn {
opacity: 0
}

.lightSpeedInRight, .lightSpeedInLeft {
opacity: 0;
-webkit-transform: translateX(400px);
transform: translateX(400px)
}
/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn {
0% {
    opacity: 0;
    -webkit-transform: scale(.3)
}

50% {
    opacity: 1;
    -webkit-transform: scale(1.05)
}

70% {
    -webkit-transform: scale(.9)
}

100% {
    -webkit-transform: scale(1)
}
}

@keyframes bounceIn {
0% {
    opacity: 0;
    transform: scale(.3)
}

50% {
    opacity: 1;
    transform: scale(1.05)
}

70% {
    transform: scale(.9)
}

100% {
    transform: scale(1)
}
}

.bounceIn.go {
-webkit-animation-name: bounceIn;
animation-name: bounceIn
}
/****************
* bounceInRight *
****************/
@-webkit-keyframes bounceInRight {
0% {
    opacity: 0;
    -webkit-transform: translateX(400px)
}

60% {
    -webkit-transform: translateX(-30px)
}

80% {
    -webkit-transform: translateX(10px)
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0)
}
}

@keyframes bounceInRight {
0% {
    opacity: 0;
    transform: translateX(400px)
}

60% {
    transform: translateX(-30px)
}

80% {
    transform: translateX(10px)
}

100% {
    opacity: 1;
    transform: translateX(0)
}
}

.bounceInRight.go {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight
}
/******************
* Bounce in left *
*******************/
@-webkit-keyframes bounceInLeft {
0% {
    opacity: 0;
    -webkit-transform: translateX(-400px)
}

60% {
    -webkit-transform: translateX(30px)
}

80% {
    -webkit-transform: translateX(-10px)
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0)
}
}

@keyframes bounceInLeft {
0% {
    opacity: 0;
    transform: translateX(-400px)
}

60% {
    transform: translateX(30px)
}

80% {
    transform: translateX(-10px)
}

100% {
    opacity: 1;
    transform: translateX(0)
}
}

.bounceInLeft.go {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft
}
/******************
* Bounce in up *
*******************/
@-webkit-keyframes bounceInUp {
0% {
    opacity: 0;
    -webkit-transform: translateY(400px)
}

60% {
    -webkit-transform: translateY(-30px)
}

80% {
    -webkit-transform: translateY(10px)
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0)
}
}

@keyframes bounceInUp {
0% {
    opacity: 0;
    transform: translateY(400px)
}

60% {
    transform: translateY(-30px)
}

80% {
    transform: translateY(10px)
}

100% {
    opacity: 1;
    transform: translateY(0)
}
}

.bounceInUp.go {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp
}
/******************
* Bounce in down *
*******************/
@-webkit-keyframes bounceInDown {
0% {
    opacity: 0;
    -webkit-transform: translateY(-400px)
}

60% {
    -webkit-transform: translateY(30px)
}

80% {
    -webkit-transform: translateY(-10px)
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0)
}
}

@keyframes bounceInDown {
0% {
    opacity: 0;
    transform: translateY(-400px)
}

60% {
    transform: translateY(30px)
}

80% {
    transform: translateY(-10px)
}

100% {
    opacity: 1;
    transform: translateY(0)
}
}

.bounceInDown.go {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown
}
/**********
* Fade In *
**********/

@-webkit-keyframes fadeIn {
0% {
    opacity: 0
}

100% {
    opacity: 1;
    display: block
}
}

@keyframes fadeIn {
0% {
    opacity: 0
}

100% {
    opacity: 1;
    display: block
}
}

.fadeIn {
opacity: 0
}

.fadeIn.go {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}
/**********
* Grow in *
***********/
@-webkit-keyframes growIn {
0% {
    -webkit-transform: scale(0.2);
    opacity: 0
}

50% {
    -webkit-transform: scale(1)
}

100% {
    -webkit-transform: scale(1);
    opacity: 1
}
}

@keyframes growIn {
0% {
    transform: scale(0.2);
    opacity: 0
}

50% {
    transform: scale(1)
}

100% {
    transform: scale(1);
    opacity: 1
}
}

.growIn {
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0
}

.growIn.go {
    -webkit-animation-name: growIn;
    animation-name: growIn
}
/********
* Shake *
********/
@-webkit-keyframes shake {
0%,100% {
    -webkit-transform: translateX(0)
}

10%,30%,50%,70%,90% {
    -webkit-transform: translateX(-10px)
}

20%,40%,60%,80% {
    -webkit-transform: translateX(10px)
}
}

@keyframes shake {
0%,100% {
    transform: translateX(0)
}

10%,30%,50%,70%,90% {
    transform: translateX(-10px)
}

20%,40%,60%,80% {
    transform: translateX(10px)
}
}

.shake.go {
-webkit-animation-name: shake;
animation-name: shake
}
/********
* ShakeUp *
********/
@-webkit-keyframes shakeUp {
0%,100% {
    -webkit-transform: translateY(0)
}

10%,30%,50%,70%,90% {
    -webkit-transform: translateY(-10px)
}

20%,40%,60%,80% {
    -webkit-transform: translateY(10px)
}
}

@keyframes shakeUp {
0%,100% {
    transform: translateY(0)
}

10%,30%,50%,70%,90% {
    transform: translateY(-10px)
}

20%,40%,60%,80% {
    transform: translateY(10px)
}
}

.shakeUp.go {
-webkit-animation-name: shakeUp;
animation-name: shakeUp
}
/*************
* FadeInLeft *
*************/
@-webkit-keyframes fadeInLeft {
0% {
    opacity: 0;
    -webkit-transform: translateX(-400px)
}

50% {
    opacity: 0.3
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0)
}
}

@keyframes fadeInLeft {
0% {
    opacity: 0;
    transform: translateX(-400px)
}

50% {
    opacity: 0.3
}

100% {
    opacity: 1;
    transform: translateX(0)
}
}

.fadeInLeft {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px)
}

.fadeInLeft.go {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}
/*************

* FadeInRight *
*************/
@-webkit-keyframes fadeInRight {
0% {
    opacity: 0;
    -webkit-transform: translateX(400px)
}

50% {
    opacity: 0.3
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0)
}
}

@keyframes fadeInRight {
0% {
    opacity: 0;
    transform: translateX(400px)
}

50% {
    opacity: 0.3
}

100% {
    opacity: 1;
    transform: translateX(0)
}
}

.fadeInRight {
opacity: 0;
-webkit-transform: translateX(400px);
transform: translateX(400px)
}

.fadeInRight.go {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}
/*************
* FadeInUp *
*************/
@-webkit-keyframes fadeInUp {
0% {
    opacity: 0;
    -webkit-transform: translateY(400px)
}

50% {
    opacity: 0.3
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0)
}
}

@keyframes fadeInUp {
0% {
    opacity: 0;
    transform: translateY(400px)
}

50% {
    opacity: 0.3
}

100% {
    opacity: 1;
    transform: translateY(0)
}
}

.fadeInUp {
opacity: 0;
-webkit-transform: translateY(400px);
transform: translateY(400px)
}

.fadeInUp.go {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}
/*************
* FadeInDown *
*************/
@-webkit-keyframes fadeInDown {
0% {
    opacity: 0;
    -webkit-transform: translateY(-400px)
}

50% {
    opacity: 0.3
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0)
}
}

@keyframes fadeInDown {
0% {
    opacity: 0;
    transform: translateY(-400px)
}

50% {
    opacity: 0.3
}

100% {
    opacity: 1;
    transform: translateY(0)
}
}

.fadeInDown {
opacity: 0;
-webkit-transform: translateY(-400px);
transform: translateY(-400px)
}

.fadeInDown.go {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}
/*****************
* rotateIn *
*****************/
@-webkit-keyframes rotateIn {
0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0
}

100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1
}
}

@keyframes rotateIn {
0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0
}

100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1
}
}

.rotateIn.go {
-webkit-animation-name: rotateIn;
animation-name: rotateIn
}
/*****************
* rotateInUpLeft *
*****************/
@-webkit-keyframes rotateInUpLeft {
0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0
}

100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1
}
}

@keyframes rotateInUpLeft {
0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0
}

100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1
}
}

.rotateInUpLeft.go {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft
}
/*******************
* rotateInDownLeft *
*******************/
@-webkit-keyframes rotateInDownLeft {
0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0
}

100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1
}
}

@keyframes rotateInDownLeft {
0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0
}

100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1
}
}

.rotateInDownLeft.go {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft
}
/******************
* rotateInUpRight *
*******************/
@-webkit-keyframes rotateInUpRight {
0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0
}

100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1
}
}

@keyframes rotateInUpRight {
0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0
}

100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1
}
}

.rotateInUpRight.go {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight
}
/********************
* rotateInDownRight *
********************/
@-webkit-keyframes rotateInDownRight {
0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0
}

100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1
}
}

@keyframes rotateInDownRight {
0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0
}

100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1
}
}

.rotateInDownRight.go {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight
}
/*********
* rollIn *
**********/
@-webkit-keyframes rollIn {
0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg)
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg)
}
}

@keyframes rollIn {
0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg)
}

100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg)
}
}

.rollIn.go {
-webkit-animation-name: rollIn;
animation-name: rollIn
}
/*********
* wiggle *
**********/
@-webkit-keyframes wiggle {
0% {
    -webkit-transform: skewX(9deg)
}

10% {
    -webkit-transform: skewX(-8deg)
}

20% {
    -webkit-transform: skewX(7deg)
}

30% {
    -webkit-transform: skewX(-6deg)
}

40% {
    -webkit-transform: skewX(5deg)
}

50% {
    -webkit-transform: skewX(-4deg)
}

60% {
    -webkit-transform: skewX(3deg)
}

70% {
    -webkit-transform: skewX(-2deg)
}

80% {
    -webkit-transform: skewX(1deg)
}

90% {
    -webkit-transform: skewX(0deg)
}

100% {
    -webkit-transform: skewX(0deg)
}
}

@keyframes wiggle {
0% {
    transform: skewX(9deg)
}

10% {
    transform: skewX(-8deg)
}

20% {
    transform: skewX(7deg)
}

30% {
    transform: skewX(-6deg)
}

40% {
    transform: skewX(5deg)
}

50% {
    transform: skewX(-4deg)
}

60% {
    transform: skewX(3deg)
}

70% {
    transform: skewX(-2deg)
}

80% {
    transform: skewX(1deg)
}

90% {
    transform: skewX(0deg)
}

100% {
    transform: skewX(0deg)
}
}

.wiggle.go {
-webkit-animation-name: wiggle;
animation-name: wiggle;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
/********
* swing *
*********/
@-webkit-keyframes swing {
20%,40%,60%,80%,100% {
    -webkit-transform-origin: top center
}

20% {
    -webkit-transform: rotate(15deg)
}

40% {
    -webkit-transform: rotate(-10deg)
}

60% {
    -webkit-transform: rotate(5deg)
}

80% {
    -webkit-transform: rotate(-5deg)
}

100% {
    -webkit-transform: rotate(0deg)
}
}

@keyframes swing {
20% {
    transform: rotate(15deg)
}

40% {
    transform: rotate(-10deg)
}

60% {
    transform: rotate(5deg)
}

80% {
    transform: rotate(-5deg)
}

100% {
    transform: rotate(0deg)
}
}

.swing.go {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing
}
/*******
* tada *
********/
@-webkit-keyframes tada {
0% {
    -webkit-transform: scale(1)
}

10%,20% {
    -webkit-transform: scale(0.9) rotate(-3deg)
}

30%,50%,70%,90% {
    -webkit-transform: scale(1.1) rotate(3deg)
}

40%,60%,80% {
    -webkit-transform: scale(1.1) rotate(-3deg)
}

100% {
    -webkit-transform: scale(1) rotate(0)
}
}

@keyframes tada {
0% {
    transform: scale(1)
}

10%,20% {
    transform: scale(0.9) rotate(-3deg)
}

30%,50%,70%,90% {
    transform: scale(1.1) rotate(3deg)
}

40%,60%,80% {
    transform: scale(1.1) rotate(-3deg)
}

100% {
    transform: scale(1) rotate(0)
}
}

.tada.go {
-webkit-animation-name: tada;
animation-name: tada
}
/*********
* wobble *
**********/
@-webkit-keyframes wobble {
0% {
    -webkit-transform: translateX(0%)
}

15% {
    -webkit-transform: translateX(-25%) rotate(-5deg)
}

30% {
    -webkit-transform: translateX(20%) rotate(3deg)
}

45% {
    -webkit-transform: translateX(-15%) rotate(-3deg)
}

60% {
    -webkit-transform: translateX(10%) rotate(2deg)
}

75% {
    -webkit-transform: translateX(-5%) rotate(-1deg)
}

100% {
    -webkit-transform: translateX(0%)
}
}

@keyframes wobble {
0% {
    transform: translateX(0%)
}

15% {
    transform: translateX(-25%) rotate(-5deg)
}

30% {
    transform: translateX(20%) rotate(3deg)
}

45% {
    transform: translateX(-15%) rotate(-3deg)
}

60% {
    transform: translateX(10%) rotate(2deg)
}

75% {
    transform: translateX(-5%) rotate(-1deg)
}

100% {
    transform: translateX(0%)
}
}

.wobble.go {
-webkit-animation-name: wobble;
animation-name: wobble
}
/********
* pulse *
*********/
@-webkit-keyframes pulse {
0% {
    -webkit-transform: scale(1)
}

50% {
    -webkit-transform: scale(1.1)
}

100% {
    -webkit-transform: scale(1)
}
}

@keyframes pulse {
0% {
    transform: scale(1)
}

50% {
    transform: scale(1.1)
}

100% {
    transform: scale(1)
}
}

.pulse.go {
-webkit-animation-name: pulse;
animation-name: pulse
}
/***************
* lightSpeedInRight *
****************/
@-webkit-keyframes lightSpeedInRight {
0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0
}

60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    opacity: 1
}

80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    opacity: 1
}

100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1
}
}

@keyframes lightSpeedInRight {
0% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0
}

60% {
    transform: translateX(-20%) skewX(30deg);
    opacity: 1
}

80% {
    transform: translateX(0%) skewX(-15deg);
    opacity: 1
}

100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1
}
}

.lightSpeedInRight.go {
-webkit-animation-name: lightSpeedInRight;
animation-name: lightSpeedInRight;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
/***************
* lightSpeedInLeft *
****************/
@-webkit-keyframes lightSpeedInLeft {
0% {
    -webkit-transform: translateX(-100%) skewX(30deg);
    opacity: 0
}

60% {
    -webkit-transform: translateX(20%) skewX(-30deg);
    opacity: 1
}

80% {
    -webkit-transform: translateX(0%) skewX(15deg);
    opacity: 1
}

100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1
}
}

@keyframes lightSpeedInLeft {
0% {
    transform: translateX(-100%) skewX(30deg);
    opacity: 0
}

60% {
    transform: translateX(20%) skewX(-30deg);
    opacity: 1
}

80% {
    transform: translateX(0%) skewX(15deg);
    opacity: 1
}

100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1
}
}

.lightSpeedInLeft.go {
-webkit-animation-name: lightSpeedInLeft;
animation-name: lightSpeedInLeft;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
/*******
* Flip *
*******/
@-webkit-keyframes flip {
0% {
    -webkit-transform: perspective(400px) rotateY(0);
    -webkit-animation-timing-function: ease-out
}

40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
    -webkit-animation-timing-function: ease-out
}

50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in
}

80% {
    -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in
}

100% {
    -webkit-transform: perspective(400px) scale(1);
    -webkit-animation-timing-function: ease-in
}
}

@keyframes flip {
0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out
}

40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out
}

50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in
}

80% {
    transform: perspective(400px) rotateY(360deg) scale(.95);
    animation-timing-function: ease-in
}

100% {
    transform: perspective(400px) scale(1);
    animation-timing-function: ease-in
}
}

.flip.go {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flip;
backface-visibility: visible !important;
animation-name: flip
}
/**********
* flipInX *
**********/
@-webkit-keyframes flipInX {
0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0
}

40% {
    -webkit-transform: perspective(400px) rotateX(-10deg)
}

70% {
    -webkit-transform: perspective(400px) rotateX(10deg)
}

100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1
}
}

@keyframes flipInX {
0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0
}

40% {
    transform: perspective(400px) rotateX(-10deg)
}

70% {
    transform: perspective(400px) rotateX(10deg)
}

100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1
}
}

.flipInX.go {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX
}
/**********
* flipInY *
**********/
@-webkit-keyframes flipInY {
0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0
}

40% {
    -webkit-transform: perspective(400px) rotateY(-10deg)
}

70% {
    -webkit-transform: perspective(400px) rotateY(10deg)
}

100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1
}
}

@keyframes flipInY {
0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0
}

40% {
    transform: perspective(400px) rotateY(-10deg)
}

70% {
    transform: perspective(400px) rotateY(10deg)
}

100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1
}
}

.flipInY.go {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInY;
backface-visibility: visible !important;
animation-name: flipInY
}
/*****************
* Out animations *
*****************/

/************
* bounceOut *
*************/
@-webkit-keyframes bounceOut {
0% {
    -webkit-transform: scale(1)
}

25% {
    -webkit-transform: scale(.95)
}

50% {
    opacity: 1;
    -webkit-transform: scale(1.1)
}

100% {
    opacity: 0;
    -webkit-transform: scale(.3)
}
}

@keyframes bounceOut {
0% {
    transform: scale(1)
}

25% {
    transform: scale(.95)
}

50% {
    opacity: 1;
    transform: scale(1.1)
}

100% {
    opacity: 0;
    transform: scale(.3)
}
}

.bounceOut.goAway {
-webkit-animation-name: bounceOut;
animation-name: bounceOut
}
/************
* bounceOutUp *
*************/
@-webkit-keyframes bounceOutUp {
0% {
    -webkit-transform: translateY(0)
}

20% {
    opacity: 1;
    -webkit-transform: translateY(20px)
}

100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px)
}
}

@keyframes bounceOutUp {
0% {
    transform: translateY(0)
}

20% {
    opacity: 1;
    transform: translateY(20px)
}

100% {
    opacity: 0;
    transform: translateY(-2000px)
}
}

.bounceOutUp.goAway {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp
}
/************
* bounceOutDown *
*************/
@-webkit-keyframes bounceOutDown {
0% {
    -webkit-transform: translateY(0)
}

20% {
    opacity: 1;
    -webkit-transform: translateY(-20px)
}

100% {
    opacity: 0;
    -webkit-transform: translateY(2000px)
}
}

@keyframes bounceOutDown {
0% {
    transform: translateY(0)
}

20% {
    opacity: 1;
    transform: translateY(-20px)
}

100% {
    opacity: 0;
    transform: translateY(2000px)
}
}

.bounceOutDown.goAway {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown
}
/************
* bounceOutLeft *
*************/
@-webkit-keyframes bounceOutLeft {
0% {
    -webkit-transform: translateX(0)
}

20% {
    opacity: 1;
    -webkit-transform: translateX(20px)
}

100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px)
}
}

@keyframes bounceOutLeft {
0% {
    transform: translateX(0)
}

20% {
    opacity: 1;
    transform: translateX(20px)
}

100% {
    opacity: 0;
    transform: translateX(-2000px)
}
}

.bounceOutLeft.goAway {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft
}
/************
* bounceOutRight *
*************/
@-webkit-keyframes bounceOutRight {
0% {
    -webkit-transform: translateX(0)
}

20% {
    opacity: 1;
    -webkit-transform: translateX(-20px)
}

100% {
    opacity: 0;
    -webkit-transform: translateX(2000px)
}
}

@keyframes bounceOutRight {
0% {
    transform: translateX(0)
}

20% {
    opacity: 1;
    transform: translateX(-20px)
}

100% {
    opacity: 0;
    transform: translateX(2000px)
}
}

.bounceOutRight.goAway {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight
}
/************
* fadeOut *
*************/
@-webkit-keyframes fadeOut {
0% {
    opacity: 1
}

100% {
    opacity: 0
}
}

@keyframes fadeOut {
0% {
    opacity: 1
}

100% {
    opacity: 0
}
}

.fadeOut.goAway {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}
/************
* fadeOutUp *
*************/
@-webkit-keyframes fadeOutUp {
0% {
    opacity: 1;
    -webkit-transform: translateY(0)
}

100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px)
}
}

@keyframes fadeOutUp {
0% {
    opacity: 1;
    transform: translateY(0)
}

100% {
    opacity: 0;
    transform: translateY(-2000px)
}
}

.fadeOutUp.goAway {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp
}
/************
* fadeOutDown *
*************/
@-webkit-keyframes fadeOutDown {
0% {
    opacity: 1;
    -webkit-transform: translateY(0)
}

100% {
    opacity: 0;
    -webkit-transform: translateY(2000px)
}
}

@keyframes fadeOutDown {
0% {
    opacity: 1;
    transform: translateY(0)
}

100% {
    opacity: 0;
    transform: translateY(2000px)
}
}

.fadeOutDown.goAway {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown
}
/************
* fadeOutLeft *
*************/
@-webkit-keyframes fadeOutLeft {
0% {
    opacity: 1;
    -webkit-transform: translateX(0)
}

100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px)
}
}

@keyframes fadeOutLeft {
0% {
    opacity: 1;
    transform: translateX(0)
}

100% {
    opacity: 0;
    transform: translateX(-2000px)
}
}

.fadeOutLeft.goAway {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft
}
/************
* fadeOutRight *
*************/
@-webkit-keyframes fadeOutRight {
0% {
    opacity: 1;
    -webkit-transform: translateX(0)
}

100% {
    opacity: 0;
    -webkit-transform: translateX(2000px)
}
}

@keyframes fadeOutRight {
0% {
    opacity: 1;
    transform: translateX(0)
}

100% {
    opacity: 0;
    transform: translateX(2000px)
}
}

.fadeOutRight.goAway {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight
}
/************
* flipOutX *
*************/
@-webkit-keyframes flipOutX {
0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1
}

100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0
}
}

@keyframes flipOutX {
0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1
}

100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0
}
}

.flipOutX.goAway {
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
animation-name: flipOutX;
backface-visibility: visible !important
}
/************
* flipOutY *
*************/
@-webkit-keyframes flipOutY {
0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1
}

100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0
}
}

@keyframes flipOutY {
0% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1
}

100% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0
}
}

.flipOutY {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
backface-visibility: visible !important;
animation-name: flipOutY
}
/************
* lightSpeedOutRight *
*************/
@-webkit-keyframes lightSpeedOutRight {
0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1
}

100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0
}
}

@keyframes lightSpeedOutRight {
0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1
}

100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0
}
}

.lightSpeedOutRight.goAway {
-webkit-animation-name: lightSpeedOutRight;
animation-name: lightSpeedOutRight;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
/************
* lightSpeedOutLeft *
*************/
@-webkit-keyframes lightSpeedOutLeft {
0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1
}

100% {
    -webkit-transform: translateX(-100%) skewX(30deg);
    opacity: 0
}
}

@keyframes lightSpeedOutLeft {
0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1
}

100% {
    transform: translateX(-100%) skewX(30deg);
    opacity: 0
}
}

.lightSpeedOutLeft.goAway {
-webkit-animation-name: lightSpeedOutLeft;
animation-name: lightSpeedOutLeft;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
/************
* rotateOut *
*************/
@-webkit-keyframes rotateOut {
0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1
}

100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(200deg);
    opacity: 0
}
}

@keyframes rotateOut {
0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1
}

100% {
    transform-origin: center center;
    transform: rotate(200deg);
    opacity: 0
}
}

.rotateOut.goAway {
-webkit-animation-name: rotateOut;
animation-name: rotateOut
}
/************
* rotateOutUpLeft *
*************/
@-webkit-keyframes rotateOutUpLeft {
0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1
}

100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0
}
}

@keyframes rotateOutUpLeft {
0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1
}

100% {
    -transform-origin: left bottom;
    -transform: rotate(-90deg);
    opacity: 0
}
}

.rotateOutUpLeft.goAway {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft
}
/************
* rotateOutDownLeft *
*************/
@-webkit-keyframes rotateOutDownLeft {
0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1
}

100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0
}
}

@keyframes rotateOutDownLeft {
0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1
}

100% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0
}
}

.rotateOutDownLeft.goAway {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft
}
/************
* rotateOutUpRight *
*************/
@-webkit-keyframes rotateOutUpRight {
0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1
}

100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0
}
}

@keyframes rotateOutUpRight {
0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1
}

100% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0
}
}

.rotateOutUpRight.goAway {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight
}
/************
* rollOut *
*************/
@-webkit-keyframes rollOut {
0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg)
}

100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg)
}
}

@keyframes rollOut {
0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg)
}

100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg)
}
}

.rollOut.goAway {
-webkit-animation-name: rollOut;
animation-name: rollOut
}
/*****************
* Short Animations
*******************/

/*********************
* fadeInUpShort
*********************/
@-webkit-keyframes fadeInUpShort {
0% {
    opacity: 0;
    -webkit-transform: translateY(20px)
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0)
}
}

@keyframes fadeInUpShort {
0% {
    opacity: 0;
    transform: translateY(20px)
}

100% {
    opacity: 1;
    transform: translateY(0)
}
}

.fadeInUpShort {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px)
}

.fadeInUpShort.go {
    -webkit-animation-name: fadeInUpShort;
    animation-name: fadeInUpShort
}
/*********************
* fadeInDownShort
*********************/
@-webkit-keyframes fadeInDownShort {
0% {
    opacity: 0;
    -webkit-transform: translateY(-20px)
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0)
}
}

@keyframes fadeInDownShort {
0% {
    opacity: 0;
    transform: translateY(-20px)
}

100% {
    opacity: 1;
    transform: translateY(0)
}
}

.fadeInDownShort {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}

.fadeInDownShort.go {
    -webkit-animation-name: fadeInDownShort;
    animation-name: fadeInDownShort
}
/*********************
* fadeInRightShort 
*********************/
@-webkit-keyframes fadeInRightShort {
0% {
    opacity: 0;
    -webkit-transform: translateX(20px)
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0)
}
}

@keyframes fadeInRightShort {
0% {
    opacity: 0;
    transform: translateX(20px)
}

100% {
    opacity: 1;
    transform: translateX(0)
}
}

.fadeInRightShort {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px)
}

.fadeInRightShort.go {
    -webkit-animation-name: fadeInRightShort;
    animation-name: fadeInRightShort
}
/*********************
* fadeInLeftShort 
*********************/
@-webkit-keyframes fadeInLeftShort {
0% {
    opacity: 0;
    -webkit-transform: translateX(-20px)
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0)
}
}

@keyframes fadeInLeftShort {
0% {
    opacity: 0;
    transform: translateX(-20px)
}

100% {
    opacity: 1;
    transform: translateX(0)
}
}

.fadeInLeftShort {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px)
}

.fadeInLeftShort.go {
    -webkit-animation-name: fadeInLeftShort;
    animation-name: fadeInLeftShort
}


/*********************
* content
*********************/

.title-home {
font-size: 22px;
text-align: center;
padding-bottom: 40px;
}

.col-rows1 {
width: 100%;
float: left;
text-align: center;
position: relative;
height: 48px;
display: grid;
place-items: center;
}

.span_b123 {
background: #d81921;
color: #fff;
border-radius: 100%;
width: 48px;
height: 48px;
position: absolute;
font-size: 24px;
font-weight: bold;
line-height: 48px;
display: grid;
place-items: center;
}

.col-rows2 {
width: 100%;
float: left;
text-align: center;
position: relative;
font-size: 21px;
font-weight: bold;
padding: 20px 0;
}

.col-rows3 {
width: 100%;
float: left;
text-align: center;
position: relative;
height: 44px;
display: grid;
place-items: center;
}

.dk_b123 {
color: #d81921;
border: solid 2px #d81921;
border-radius: 3px;
width: 160px;
height: 44px;
position: absolute;
font-size: 16px;
line-height: 40px;
display: grid;
place-items: center;
}

.dk_b123:hover {
    color: #fff;
    border: solid 2px #d81921;
    background: #d81921;
}

.col_123:hover {
background: #fbf7e7;
}

.col_123 {
float: left;
position: relative;
padding: 24px;
background: #fff;
width: 30%;
height: 230px;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

.img_123 {
float: left;
width: 5%;
text-align: center;
line-height: 230px;
}

.boxvideo {
max-width: 500px;
margin: auto
}


.title-home2 {
font-size: 18px;
text-align: center;
font-weight: normal;
padding: 20px 0;
}

.blue {
color: #2196f3
}

.footer-right {
padding-right: 20px;
float: right;
line-height: 48px;
}

.footer-right a {
    margin: 0 10px
}

.footer-left {
float: left;
padding-left: 20px;
line-height: 48px;
}

.footer-left a {
    margin: 0 10px
}


.tabs-nav2 {
width: 100%;
float: left;
background: #f2f2f2;
border-bottom: solid 3px #d81921;
}

.tabs-item2 {
background: #d81921;
float: left;
line-height: 48px;
height: 48px;
padding: 0 20px;
font-size: 18px;
font-weight: 500;
color: #fff;
}

/* End tabs */
.box-shadow {
float: left;
position: relative;
background: #fff;
width: 100%;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

.accordion_content.pad {
padding: 15px 20px;
padding-right: 0;
}

.box-content {
padding: 24px;
float: left;
width: 100%;
}

.rows-content {
float: left;
width: 100%;
margin-bottom: 30px;
}

.box-many {
background: #ffe99b;
float: left;
padding: 20px;
width: 240px;
}

.page-head {
float: left;
width: 100%;
margin-bottom: 20px;
position: relative;
}

.page-title {
float: left;
font-size: 24px;
font-weight: bold;
}

.item-input {
float: left;
position: relative;
margin-right: 15px;
width: 160px;
display: table
}

.icon-form {
position: absolute;
float: right;
right: 10px;
cursor: pointer;
margin-top: 8px;
z-index: 9;
}

.btn_green {
background: #62a849;
}

.fixright {
float: right;
position: relative;
}

.fixleft {
float: left;
position: relative;
}

.pagination-left {
float: left;
width: 100px;
}

.pagination-text {
float: left;
margin-right: 10px;
line-height: 36px;
}

.title-font20 {
font-size: 20px;
padding-bottom: 20px;
}

.textbox {
width: 100%;
float: left;
margin-bottom: 16px;
}

.form-control {
width: 100%;
float: left;
}

.textbox p {
padding-bottom: 10px;
}

.textbox p:last-child {
    padding-bottom: 0;
}

.box-6 {
float: left;
background: #6a6a6a;
width: 28%;
margin-right: 20px;
height: 130px;
margin-bottom: 20px;
text-align: center;
border-radius: 2px;
color: #fff;
padding: 20px;
}

.box-6:hover {
    color: #fff;
    opacity: 0.80
}

.box-6.bg-xanh {
    background: #2196f3;
}

.box-6.bg-cam {
    background: #ffa030;
}

.box-6.bg-xanh2 {
    background: #587e39;
}

.box-6.bg-tim {
    background: #a138bb;
}

.box-6.bg-do {
    background: #b21a20;
}

.icon-Pay {
float: left;
width: 100%;
margin-bottom: 15px;
}

.text-Pay {
width: 100%;
float: left;
font-size: 16px;
}

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

.btn-item:last-child {
    margin-right: 0;
}

.btn-span {
background: #f2f2f2;
text-align: center;
display: inline-block;
border: solid 1px #2892f2;
height: 40px;
line-height: 40px;
padding: 0 10px;
border-radius: 2px;
color: #2892f2;
cursor: pointer;
}

.btn-span:hover {
    background: #2892f2;
    color: #fff;
}

.label-text {
width: 100%;
float: left;
padding-bottom: 5px;
}

.search-group {
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
padding: 0 10px;
border: solid 1px #e0e0e0;
border-radius: 0 3px 3px 0;
cursor: pointer;
background: #f2f2f2;
}

.btn-toggle1 {
cursor: pointer;
}

.boxs-bell {
max-width: 380px;
border: solid 1px #e0e0e0;
float: left;
position: relative;
}

.close_item_button {
position: absolute;
right: 0;
font-size: 32px;
width: 36px;
height: 36px;
cursor: pointer;
line-height: 36px;
text-align: center;
margin-top: 5px;
}

.scrol_content {
width: 100%;
float: left;
}

.btn-upload-file {
position: relative;
border: solid 1px #e0e0e0;
width: 100%;
float: left;
}

.btn-upload {
height: 40px;
padding: 10px;
border-radius: 2px;
font-size: 14px;
float: right;
}

.inputupload {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}

.file-name {
float: left;
padding: 8px;
}

.boxs-ac {
background: #ffe99b;
float: left;
width: 100%;
position: relative;
margin-bottom: 20px;
padding: 16px;
border-radius: 2px;
}

.brandname-group {
font-size: 16px;
font-weight: 500;
}

.list-news {
position: relative;
width: 100%;
padding: 10px 0;
padding-left: 20px;
float: left;
border-top: solid 1px #e0e0e0;
}

.iconcircle {
position: absolute;
left: 0;
top: 12px;
}

.col-campaign1 {
float: left;
width: 55%;
}

.col-campaign2 {
float: right;
width: 40%;
text-align: center
}

.form-left {
float: left;
width: 150px;
font-size: 16px;
font-weight: bold;
line-height: 38px;
margin-right: 20px;
}

.form-right {
display: grid
}

.checkbox-right {
padding-top: 10px;
}

.btn-ctn {
cursor: pointer
}

.tabs-item1.fixtabs {
font-size: 14px;
font-weight: 400;
height: 40px;
line-height: 42px;
}

.close_item {
padding: 10px;
background: #f2f2f2;
border: solid 1px #e0e0e0;
position: relative;
font-weight: 500;
}

.close_item_btn {
position: absolute;
right: 10px;
height: 22px;
line-height: 24px;
font-weight: 400;
color: #2892f2;
cursor: pointer;
}

.title-b2 {
float: left;
font-size: 24px;
font-weight: bold;
line-height: 40px;
}

.title-group {
width: 100%;
float: left;
margin-bottom: 5px;
position: relative;
}

.item-3 {
float: left;
width: 33.33%;
margin: 7px 0;
}

.fix-scrol {
width: 100%;
float: left;
overflow-y: auto;
max-height: 78px;
}

.btn-group {
float: left;
width: 100%;
padding-top: 24px;
position: relative;
}

.fixcenter {
width: 240px;
margin: auto;
}

.group-content {
margin-bottom: 15px;
width: 100%;
float: left;
}

.accordion_title2 {
padding-left: 36px;
padding-right: 0;
border: solid 1px #e0e0e0;
background: #f2f2f2;
font-size: 16px;
}

.accordion_icon2 {
left: 0;
width: auto;
background: url(../images/check1.png) no-repeat center;
background-position: 10px;
}

.accordion_open .accordion_icon2 {
background: url(../images/check2.png) no-repeat center;
background-position: 10px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

.screenshot {
margin: auto;
position: relative;
width: 222px;
}

.screenshot-sms {
position: absolute;
left: 0;
top: 30px;
padding: 25px;
text-align: left;
}

.bg-sms {
background: #c4f1fe;
float: left;
width: 100%;
padding: 10px;
border-radius: 5px;
}
/* Bengin progress step*/
.progress-step {
width: 100%;
float: left;
margin-top: 40px;
margin-bottom: 100px;
}

.step-font {
font-size: 24px;
font-weight: bold;
}

#checkout-progress {
position: relative;
width: 50%;
margin: auto;
}

#checkout-progress:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 3px;
    width: 100%;
    background-color: #ccc;
    -webkit-transform: translateY(-50%) perspective(1000px);
    transform: translateY(-50%) perspective(1000px);
}

#checkout-progress:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 3px;
    width: 100%;
    background-color: #d81921;
    -webkit-transform: scaleX(0) translateY(-50%) perspective(1000px);
    transform: scaleX(0) translateY(-50%) perspective(1000px);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

#checkout-progress.step-2:after {
    -webkit-transform: scaleX(0.333) translateY(-50%) perspective(1000px);
    transform: scaleX(0.333) translateY(-50%) perspective(1000px);
}

#checkout-progress.step-3:after {
    -webkit-transform: scaleX(0.666) translateY(-50%) perspective(1000px);
    transform: scaleX(0.666) translateY(-50%) perspective(1000px);
}

#checkout-progress.step-4:after {
    -webkit-transform: scaleX(1) translateY(-50%) perspective(1000px);
    transform: scaleX(1) translateY(-50%) perspective(1000px);
}

#checkout-progress.step-5:after {
    -webkit-transform: scaleX(1) translateY(-50%) perspective(1000px);
    transform: scaleX(1) translateY(-50%) perspective(1000px);
}

#checkout-progress .progress-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    #checkout-progress .progress-bar .step {
        z-index: 2;
        position: relative;
    }

        #checkout-progress .progress-bar .step .step-label {
            position: absolute;
            left: 6px;
            top: calc(100% + 10px);
            -webkit-transform: translateX(-50%) perspective(1000px);
            transform: translateX(-50%) perspective(1000px);
            transition: 0.3s ease;
            width: 100px;
            text-align: center;
        }


        #checkout-progress .progress-bar .step span {
            color: #ccc;
            transition: 0.3s ease;
            display: block;
            -webkit-transform: translate3d(0, 0, 0) scale(1) perspective(1000px);
            transform: translate3d(0, 0, 0) scale(1) perspective(1000px);
        }

        #checkout-progress .progress-bar .step .fa-check {
            color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transition: -webkit-transform 0.3s ease;
            transition: transform 0.3s ease;
            transition: transform 0.3s ease, -webkit-transform 0.3s ease;
            -webkit-transform: translate3d(-50%, -50%, 0) scale(0) perspective(1000px);
            transform: translate3d(-50%, -50%, 0) scale(0) perspective(1000px);
        }

        #checkout-progress .progress-bar .step.valid .fa-check {
            -webkit-transform: translate3d(-50%, -50%, 0) scale(1) perspective(1000px);
            transform: translate3d(-50%, -50%, 0) scale(1) perspective(1000px);
        }

        #checkout-progress .progress-bar .step.active span, #checkout-progress .progress-bar .step.active .step-label {
            color: #d81921;
        }

        #checkout-progress .progress-bar .step.valid span {
            color: #d81921;
        }

        #checkout-progress .progress-bar .step.valid .step-label {
            color: #d81921 !important;
        }

        #checkout-progress .progress-bar .step:after {
            content: "";
            position: absolute;
            z-index: -1;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%) perspective(1000px);
            transform: translate(-50%, -50%) perspective(1000px);
            width: 48px;
            height: 48px;
            background-color: #fff;
            border-radius: 50%;
            border: 3px solid #ccc;
            transition: 0.3s ease;
        }

        #checkout-progress .progress-bar .step.active:after {
            border: 3px solid #d81921;
        }

        #checkout-progress .progress-bar .step.valid:after {
            background-color: #d81921;
            border: 3px solid #d81921;
        }



.content_step {
width: 100%;
float: left;
display: none;
}

.content_step.show_step {
    display: block
}

.content_step.pad {
    padding: 0 200px;
}

.btn_confirm {
display: none;
}

.btn_confirm.btn_confirm_show {
    display: block;
}

/* End progress step*/

.link-active {
cursor: pointer;
}

.link-active:hover {
    cursor: pointer;
    background: #e5e5e5;
}

.label-input.fixposition {
position: absolute;
left: 10px;
}

@media only screen and (max-width:640px) {
.footer {
    position: relative;
    background: #fff;
    float: left;
}

.footer-left {
    line-height: 36px;
}

.footer-right {
    line-height: 36px;
}

.main {
    margin-bottom: 0;
    padding: 10px;
}

.col_123 {
    width: 100%;
    height: auto;
    margin-bottom: 24px;
}

.img_123 {
    display: none;
}

.col-campaign1 {
    width: 100%;
    margin-bottom: 24px;
}

.col-campaign2 {
    float: left;
    width: 100%;
}

.col2 {
    float: left;
    width: 100%;
    margin-right: 0;
    position: relative;
    margin-bottom: 24px;
}

.popup-wrapper {
    width: 90%;
}

.tabs-item1 {
    padding: 0 12px;
}

.box-content {
    padding: 16px;
}

#checkout-progress {
    width: 80%;
}

    #checkout-progress .progress-bar .step .step-label {
        width: 70px;
    }

.content_step.pad {
    padding: 20px 0;
}

.item-3 {
    margin: 7px 0;
    font-size: 13px;
    height: 28px;
}

.box-6 {
    width: 46%;
    margin: 2%;
}

.header {
    margin-bottom: 20px;
}

.title-home2 {
    padding-top: 0;
}

.item-input {
    width: 100% !important;
    margin-bottom: 10px;
}

.tabs-item1 {
    font-size: 16px;
}
}

.css_next_stp1 {
    position: absolute;
    margin-top: -85px;
    margin-left: 5em
}

.css_next_stp1_cskh {
    margin-left: 5em;
    margin-bottom: 2em;
}

.remove-left5em{
    margin-left: 0em !important;
}