* {
    margin: 0;
}

  html{
    width:100%;
    height:100%;
    background-color:#000;
    font-family: "Segoe UI","Roboto","Calibri","Trebuchet MS", "Verdana", "Helvetica", "Sans-Serif";
    background:#000 url('../../assets/images/bg.jpg') ;
}

header{
    height:320px;
    background:url('../../assets/images/bg_header.png') repeat-x;
}

body {
    /*width: calc(100vw - 34px);*/
    outline: none;
    font-size: 17px;
    font-family: "Segoe UI","Roboto","Calibri","Trebuchet MS", "Verdana", "Helvetica", "Sans-Serif";
    line-height:20px;
    color: #fff;
    width: 100vw;
    height: 100vh !important;
    min-height: 100vh !important;
    /*width: 100% !important;*/
    letter-spacing: 0.08em;
    overflow-y: scroll;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    padding: 0px;
    margin:0px;
    line-height:24px;
    text-align: justify;
    text-justify:inter-word;
    letter-spacing: 0.5px;    
    background:#000 url('../../assets/images/bg.jpg') ;
}

.bt_home_on             {display:inline-block; content: url("../../assets/images/bt_home_on.png")       ; width:100%; max-width:182px;max-height:79px; }
.bt_home_off            {display:inline-block; content: url("../../assets/images/bt_home_off.png")      ; width:100%; max-width:182px;max-height:79px; }
.bt_home_off:hover      {display:inline-block; content: url("../../assets/images/bt_home_hover.png")    ; width:100%; max-width:182px;max-height:79px; }
.bt_members_on          {display:inline-block; content: url("../../assets/images/bt_members_on.png")    ; width:100%; max-width:182px;max-height:79px; }
.bt_members_off         {display:inline-block; content: url("../../assets/images/bt_members_off.png")   ; width:100%; max-width:182px;max-height:79px; }
.bt_members_off:hover   {display:inline-block; content: url("../../assets/images/bt_members_hover.png") ; width:100%; max-width:182px;max-height:79px; }
.bt_about_on            {display:inline-block; content: url("../../assets/images/bt_about_on.png")      ; width:100%; max-width:182px;max-height:79px; }
.bt_about_off           {display:inline-block; content: url("../../assets/images/bt_about_off.png")     ; width:100%; max-width:182px;max-height:79px; }
.bt_about_off:hover     {display:inline-block; content: url("../../assets/images/bt_about_hover.png")   ; width:100%; max-width:182px;max-height:79px; }
.bt_contact_on          {display:inline-block; content: url("../../assets/images/bt_contact_on.png")    ; width:100%; max-width:182px;max-height:79px; }
.bt_contact_off         {display:inline-block; content: url("../../assets/images/bt_contact_off.png")   ; width:100%; max-width:182px;max-height:79px; }
.bt_contact_off:hover   {display:inline-block; content: url("../../assets/images/bt_contact_hover.png") ; width:100%; max-width:182px;max-height:79px; }

.bg-gradient{
    /*background: radial-gradient(circle, #183313 0%, #061e01 100%); */
    background: radial-gradient(circle, #163b0e 0%, #072b00 100%); 
}

.title{
    font-weight: 700;
    font-style: normal;
    font-family: "Segoe UI", Antonio,"Arial Narrow";
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: none;
    background-color:#8f150c;
    color:#fff;
    width:100%;
    text-align:center;
    background: rgb(181,49,40);
    background: linear-gradient(180deg, rgba(181,49,40,1) 0%, rgba(143,21,12,1) 24%, rgba(111,12,5,1) 100%);
    background:  url('../../assets/images/bgtitle.jpg') repeat;
    /*background:  url('../../assets/images/bgtitle.jpg') repeat;*/
}

.subtitle{
    font-weight: 700;
    font-style: normal;
    font-family: "Segoe UI", Antonio,"Arial Narrow";
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: none;
    color:#8f150c;
    width:100%;
    text-align:center;
    background-color:#fcd6a2;
}

.topic-title{
    font-weight: 700;
    font-style: normal;
    font-family: "Segoe UI", Antonio,"Arial Narrow";
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: none;
    /*border-bottom: solid 1px #8f150c;*/
    background-color:#f5f5f5;
    color:#4a4a4a;
    color:#fff;
    width:100%;
    padding:7px;
    height:40px;
    vertical-align:middle;
    padding-left:14px;
    background: rgb(245,247,245);
    background: linear-gradient(180deg, rgba(245,247,245,1) 0%, rgba(241,241,241,0.969625350140056) 24%, rgba(235,234,234,1) 100%);
    background:  url('../../assets/images/bgtitle.jpg') repeat;
    border: solid 2px #6e0c0d;
    border-bottom: none;
}
.topic-content{
    padding: 20px;
    padding-top: 10px;
    color:#4a4a4a;
    color:#7e0001;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: justify;
    text-justify: inter-word;
    border: solid 2px #6e0c0d;
    background-color:#fffcf2;
}

.champion-title{
    font-weight: 700;
    font-style: normal;
    font-family: "Segoe UI", Antonio,"Arial Narrow";
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: none;
    background-color:#8f150c;
    color:#fff;
    width:100%;
    padding:7px;
    padding-left:14px;
    text-align:center;
    background: rgb(181,49,40);
    background: linear-gradient(180deg, rgba(181,49,40,1) 0%, rgba(143,21,12,1) 24%, rgba(111,12,5,1) 100%);
    border-bottom: none;
    border: solid 2px #8f150c;
}
.champion-content{
    padding: 20px;
    padding-top: 10px;
    color:#4a4a4a;
    color:#7e0001;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: justify;
    text-justify: inter-word;
    border: solid 2px #6e0c0d;
    background-color:#ffffff;
}


ul {
    line-height: 30px;
}
li{
    line-height: 30px;
}

.router-tag {
}

.router-tag-noauth {
    padding:0px;
}

.red-14{
    color: #8f150c !important;
}

.red-14 a{
    color: #8f150c !important;
    font-weight:700 !important;
}

.footer {
    width: 100%;
    text-align: center;
    position: absolute;
    vertical-align: middle;
    border-top: 0px solid #0099ff !important;
    background: #fff !important;
    height: 36px;
    max-height: 60px;
    color: #cfcfcf !important;
    font-size: 12px;
    background: #000  url('../../assets/images/bg_footer.png') repeat-x bottom !important;
}

.shadow {
    box-shadow: 0 0 6px 2px rgba(0,0,0,0.15), 0 0px 6px rgba(0,0,0,0.04);
}
.shadow-top {
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.05), 0 0px 0px rgba(0,0,0,0.04);
}

.shadow-light {
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.05), 0 0px 6px rgba(0,0,0,0.04);
}


.align-top {
    display: table-cell;
    vertical-align: top;
    height: 100% !important;
}

.topbar {
    width: 100% !important;
    text-align: center !important;
    padding: 3px;
    padding-top: 10px;
    max-width: 1330px;
    display: inline-block;
}




.center {
    min-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
}

.content {
    width: 100%;
    max-width: 920px;
    display: inline-block;
    min-height: 200px;
}
.inner-content {
}



.login-icon {
    background: #ffffff;
    border-width: 0.001em;
    width: 100%;
    display: block;
    color: #b3b2b2;
}

.border-blue-full{
    border:2px solid #0099ff;
}
.border-blue{
    border-top: 1px solid #a7dfff;
}
.border-grey{
    border-top: 1px solid #c7c7c7;
}
.border-orange{
    border-top: 1px solid #fce6b0;
}


.heavy-header {
    min-height: 16px;
    line-height: 16px;
    padding: 9px !important;
    vertical-align: middle;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    max-width: 1330px;
    width: 100%;
    text-align: left;
    background-color: #902800;
}
.light-header {
    min-height: 16px;
    line-height: 16px;
    padding: 9px !important;
    vertical-align: middle;
    border: 1px solid #b0defc;
    color: #0099ff;
    font-size: 14px;
    font-weight: 700;
    max-width: 1330px;
    width: 100%;
    text-align: left;
    background-color: #f7fcff;
    background-color: #f2fbff;
}
.light-header-grey {
    min-height: 16px;
    line-height: 16px;
    padding: 9px !important;
    vertical-align: middle;
    border: 1px solid #c7c7c7;
    color: #a0a0a0;
    font-size: 14px;
    font-weight: 700;
    max-width: 1330px;
    width: 100%;
    text-align: left;
    background-color: #f7fcff;
    background-color: #e9e9e9;
}
.light-header-orange {
    min-height: 16px;
    line-height: 16px;
    padding: 9px !important;
    vertical-align: middle;
    border: 1px solid #fce6b0;
    color: #ff8500;
    font-size: 14px;
    font-weight: 700;
    max-width: 1330px;
    width: 100%;
    text-align: left;
    background-color: #f7fcff;
    background-color: #fffaf2;
}
.line-header {
    min-height:  16px;
    line-height: 16px;
    padding:8px !important;
    vertical-align: middle;
    border-bottom: 1px solid #b0defc;
    color: #0099ff;
    font-size: 14px;
    font-weight:700;
    max-width: 1330px;
    width: 100%;
    text-align:left;
    background-color:#eaf7ff;
    background-color:#f1faff;
}
.card-header {
    min-height: 28px;
    line-height: 28px;
    vertical-align: middle;
    background-color: #0099ff;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px !important;
    /*border-radius: 10px;
    max-width: 1330px;*/
    width: 100%;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12);
    border-radius: 4px 4px 0px 0px;
    text-align: left;
}

.card-header-slim {
    min-height: 22px;
    line-height: 22px;
    vertical-align: middle;
    background-color: #0099ff;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px;
    /*border-radius: 10px;*/
    max-width: 1330px;
    width: 100%;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12);
    border-radius: 4px 4px 0px 0px;
    text-align:left;
}



.flip-h{
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
.flip-icon-h i{
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}


.text {
    text-align: left;
    font-size: 17px;
    text-align: justify;
    text-justify: inter-word;
}



.title-grey{
    font-weight: 600;
    font-style: normal;
    font-family: "Segoe UI", Antonio,"Arial Narrow";
    font-size: 19px;
    letter-spacing: 2px;
    text-transform: none;
    color:#525252;
}

.line-top {
    border-top: 1px solid #c0e8ff !important;
}
.line-bottom {
    border-bottom: 1px solid #c0e8ff !important;
}
.border-top {
    border-top: 1px solid #c0e8ff !important;
}
.border-bottom {
    border-bottom: 1px solid #c0e8ff !important;
}


q-video {
    max-width:  calc(100% - 40px);
    max-height:  calc(100% - 200px);
    /*top: 0;
    left: 0;
    z-index: -1;
    padding: 20px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;*/
}

.color-white {
    color: #fff !important;
}
.color-blue {
    color: #0099ff !important;
}
.color-green {
    color: #00d158;
    color: #00a903 !important;
}
.color-orange {
    color: #ff8500 !important;
}
.color-red {
    color: #ff007d !important;
}
.color-grey {
    color: #888888 !important;
}



.background-blue {
    background-color: #0092ff !important;
    color: white;
}

.background-green {
    background-color: #00d158;
    background-color: #01c707;
    color: #fff;
}

.background-orange {
    background-color: #ff8500 !important;
    color: #fff;
}

.background-red {
    background-color: #ff0056;
    color: #fff;
}

.background-grey {
    background-color: #949494;
    color:#fff;
}



.color-info {
    color: #0099ff;
}

.color-success {
    color: #00ca99;
    color: #00d158;
    color: #01c707;
}

.color-warning {
    color: #ff8500;
}

.color-error {
    color: #ff0056;
}


.pb {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE */
}

h3{
    font-weight: 300;
    font-style: normal;
    font-family: "Segoe UI",Antonio,"Arial Narrow";
    font-size: 50px;
    line-height: 0.2em !important;
    letter-spacing: 2px;
    text-transform: none;
}
h3 span{
  font-size: 18px;
  display:block;
  color:#919191;
  padding-top:26px;
}

.section{
    background:#000 !important; 
    color:#9d9d9d;
}
.bg-section-white{
    background:#fff !important; 
    color:#1E1E1E;
}
.bg-section-white-alt{
    background:#F7F7F7 !important; 
    color:#1E1E1E;
}
.bg-white2{
    background:#fff !important; 
    color:#1E1E1E;
}
.bg-black2{
    background:#000; 
    color:#E1E1E1;
}
.bg-yellow2{
    background:#FDF8C3; 
}
.bg-blue2{
    background:#2A55FF; 
}


.separator-blue{
    min-width:100%;
    display:block;
    height:1px;
    background-color:#77C6FB;
}
.separator-gray{
    min-width:100%;
    display:block;
    height:1px;
    background-color:#E0E0E0;
}

.blue {
    color: #0099ff !important;
}
.green {
    color: #12ce7a !important;
}
.gray {
    color: rgb(196, 196, 196) !important;
}
.gray-light {
    color: #EBEBEB !important;
}

a, a:link, a:visited{ color:#FAC533; font-size:inherit; text-decoration:none; font-size:16px; }
a:hover{color:#fade33;}

a, a:link, a:visited{ color:#00d158; font-size:inherit; text-decoration:none; font-size:16px; }
a:hover{color:#06ff6f;}




.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.9s;
}

.fade-enter-active {
  transition-delay: 0.2s;
}

.fade-enter, .fade-leave-active {
  transition-duration: 0.05s;
  opacity: 0
}




video {
    height: 100%;
    width: 100%;
    background-color: #000;
    border: 1px solid #808080
}


/*
    @media (min-width: 1500px) {
        .body-content {
            padding-left:   0px !important;
            padding-right:  0px !important;
            margin-left:    8% !important;
            margin-right:   8% !important;
        }

        .header, #header {
            padding-left:   8% !important;
            padding-right:  8% !important;
        }

        footer {
            padding-left:   8% !important;
            padding-right:  9% !important;
        }
    }



    @media (min-width: 1800px) {
        .body-content {
            margin-left:    10% !important;
            margin-right:   10% !important;
        }

        .header, #header {
            padding-left:   10% !important;
            padding-right:  10% !important;
        }

        footer {
            padding-left:   10% !important;
            padding-right:  11% !important;
        }
    }


    @media (min-width: 1900px) {
        .body-content {
            margin-left:    20% !important;
            margin-right:   20% !important;
        }

        .header, #header {
            padding-left:   20% !important;
            padding-right:  20% !important;
        }

        footer {
            padding-left:   20% !important;
            padding-right:  21% !important;
        }
    }


    @media (min-width: 2100px) {
        .body-content {
            margin-left:    26% !important;
            margin-right:   26% !important;
        }

        .header, #header {
            padding-left:   26% !important;
            padding-right:  26% !important;
        }

        footer {
            padding-left:   26% !important;
            padding-right:  25% !important;
        }
    }
    */