/*
|||||||||||||||||||||||||||||||
------------------------------------------------
Dependencies :
------------------------------------------------
Bootstrap4
-----------------------------------------------
Google fonts: Libre frankin
------------------------------------------------

------------------------------------------------
Content :                                                       
-------------------------------------------------
1. color                                                          
-------------------------------------------------
2. typography                                                
-------------------------------------------------
3. tables                                                         
-------------------------------------------------
4. breadcrumb                                               
-------------------------------------------------
5. buttons                                                      
-------------------------------------------------
6. modals                                                       
-------------------------------------------------
7. typography                                                
-------------------------------------------------
8. form                                                           
-------------------------------------------------
8. ui                                                                
-------------------------------------------------
9. pages                                                         
-------------------------------------------------                                
*/
/* 
|||||||||||||||||||||||||||||||
fonts 
|||||||||||||||||||||||||||||||
*/
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@500;600&family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
/* 
font-family: 'Lora', serif;
font-family: 'Roboto', sans-serif;
 */
/* 
|||||||||||||||||||||||||||||||
color 
|||||||||||||||||||||||||||||||
*/
/* define variable */
/* class */
.color-primary {
  color: #1714FF;
}

.color-dark-primary {
  color: #34548A;
}

.color-light-primary {
  color: #85D5FA;
}

.color-danger {
  color: rgb(241, 93, 93);
}

.color-success {
  color: rgb(30, 190, 78);
}

.color-warning {
  color: rgb(241, 198, 78);
}

.color-secondary {
  color: rgb(160, 160, 160);
}

.color-white {
  color: rgb(255, 255, 255);
}

.color-black {
  color: rgb(0, 0, 0);
}

.color-light {
  color: #EDEDED;
}

.color-dark {
  color: rgb(45, 45, 45);
}

/* 
|||||||||||||||||||||||||||||||
Animation
|||||||||||||||||||||||||||||||
*/
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
/* 
|||||||||||||||||||||||||||||||
Typography
|||||||||||||||||||||||||||||||
*/
.fs-1 {
  font-size: 54px;
  line-height: 60px;
}

.fs-2 {
  font-size: 44px;
  line-height: 52px;
}

.fs-3 {
  font-size: 36px;
  line-height: 40px;
}

.fs-4 {
  font-size: 24px;
}

.fs-5 {
  font-size: 18px;
}

.fs-6 {
  font-size: 16px;
}

.fs-7 {
  font-size: 14px;
}

.fs-8 {
  font-size: 12px;
}

.fs-9 {
  font-size: 10px;
}

.fs-10 {
  font-size: 8px;
}

@media screen and (min-width: 576px) {
  .fs-sm-1 {
    font-size: 54px;
    line-height: 60px;
  }
  .fs-sm-2 {
    font-size: 44px;
    line-height: 52px;
  }
  .fs-sm-3 {
    font-size: 36px;
    line-height: 40px;
  }
  .fs-sm-4 {
    font-size: 24px;
  }
  .fs-sm-5 {
    font-size: 18px;
  }
  .fs-sm-6 {
    font-size: 16px;
  }
  .fs-sm-7 {
    font-size: 14px;
  }
  .fs-sm-8 {
    font-size: 12px;
  }
  .fs-sm-9 {
    font-size: 10px;
  }
  .fs-sm-10 {
    font-size: 8px;
  }
}
@media screen and (min-width: 768px) {
  .fs-md-1 {
    font-size: 54px;
    line-height: 60px;
  }
  .fs-md-2 {
    font-size: 44px;
    line-height: 52px;
  }
  .fs-md-3 {
    font-size: 36px;
    line-height: 40px;
  }
  .fs-md-4 {
    font-size: 24px;
  }
  .fs-md-5 {
    font-size: 18px;
  }
  .fs-md-6 {
    font-size: 16px;
  }
  .fs-md-7 {
    font-size: 14px;
  }
  .fs-md-8 {
    font-size: 12px;
  }
  .fs-md-9 {
    font-size: 10px;
  }
  .fs-md-10 {
    font-size: 8px;
  }
}
@media screen and (min-width: 992px) {
  .fs-lg-1 {
    font-size: 54px;
    line-height: 60px;
  }
  .fs-lg-2 {
    font-size: 44px;
    line-height: 52px;
  }
  .fs-lg-3 {
    font-size: 36px;
    line-height: 40px;
  }
  .fs-lg-4 {
    font-size: 24px;
  }
  .fs-lg-5 {
    font-size: 18px;
  }
  .fs-lg-6 {
    font-size: 16px;
  }
  .fs-lg-7 {
    font-size: 14px;
  }
  .fs-lg-8 {
    font-size: 12px;
  }
  .fs-lg-9 {
    font-size: 10px;
  }
  .fs-lg-10 {
    font-size: 8px;
  }
}
@media screen and (min-width: 1200px) {
  .fs-xl-1 {
    font-size: 54px;
    line-height: 60px;
  }
  .fs-xl-2 {
    font-size: 44px;
    line-height: 52px;
  }
  .fs-xl-3 {
    font-size: 36px;
    line-height: 40px;
  }
  .fs-xl-4 {
    font-size: 24px;
  }
  .fs-xl-5 {
    font-size: 18px;
  }
  .fs-xl-6 {
    font-size: 16px;
  }
  .fs-xl-7 {
    font-size: 14px;
  }
  .fs-xl-8 {
    font-size: 12px;
  }
  .fs-xl-9 {
    font-size: 10px;
  }
  .fs-xl-10 {
    font-size: 8px;
  }
}
@media screen and (max-width: 575px) {
  .fs-xs-1 {
    font-size: 54px;
    line-height: 60px;
  }
  .fs-xs-2 {
    font-size: 44px;
    line-height: 52px;
  }
  .fs-xs-3 {
    font-size: 36px;
    line-height: 40px;
  }
  .fs-xs-4 {
    font-size: 24px;
  }
  .fs-xs-5 {
    font-size: 18px;
  }
  .fs-xs-6 {
    font-size: 16px;
  }
  .fs-xs-7 {
    font-size: 14px;
  }
  .fs-xs-8 {
    font-size: 12px;
  }
  .fs-xs-9 {
    font-size: 10px;
  }
  .fs-xs-10 {
    font-size: 8px;
  }
}
.txt-strike {
  text-decoration: line-through;
}

.txt-underline {
  text-decoration: underline;
}

.txt-overline {
  text-decoration: overline;
}

.txt-full-strike {
  text-decoration: underline line-through overline;
}

.txt-wavy {
  -webkit-text-decoration: #000 underline overline wavy;
          text-decoration: #000 underline overline wavy;
}

.txt-normal {
  font-style: normal;
}

.txt-italic {
  font-style: italic;
}

.txt-bold {
  font-weight: bold;
}

.txt-headline {
  font-family: "Lora", serif;
}

/* 
|||||||||||||||||||||||||||||||
UI
|||||||||||||||||||||||||||||||
*/
.preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 125;
}
.preloader.hide {
  display: none !important;
}
.preloader img {
  height: 40px;
  animation-name: scale;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

* {
  padding: 0;
  scroll-behavior: smooth;
  scroll-margin-top: 100px;
  font-family: "Montserrat", sans-serif;
}

.pointer {
  cursor: pointer;
}

#pageContent {
  position: relative;
  min-width: 320px;
  width: 100%;
  overflow: hidden;
}
#pageContent .content {
  padding-bottom: 60px;
}

h1.section-title {
  color: #666666;
  font-size: 24px;
}

.bg-white {
  background: rgb(255, 255, 255) !important;
}
.bg-light {
  background: #EDEDED !important;
}
.bg-black {
  background: rgb(0, 0, 0) !important;
}
.bg-dark {
  background: rgb(45, 45, 45) !important;
}
.bg-danger {
  background: rgb(241, 93, 93) !important;
}
.bg-success {
  background: rgb(30, 190, 78) !important;
}
.bg-warning {
  background: rgb(241, 198, 78) !important;
}
.bg-gradient {
  background: linear-gradient(top, #85D5FA, #1714FF) !important;
}
.bg-secondary {
  background: rgb(160, 160, 160) !important;
}
.bg-primary {
  background: #1714FF !important;
}
.bg-primary-light {
  background: #85D5FA !important;
}
.bg-primary-dark {
  background: #34548A !important;
}

.line {
  border: black 1px solid;
}
.line.white {
  border: white 1px solid;
}

.line-0-5 {
  border: rgba(0, 0, 0, 0.5) 1px solid;
}
.line-0-5.white {
  border: rgba(255, 255, 255, 0.5) 1px solid;
}

.shadow {
  box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.2);
}

.shadow-strong {
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
}

.shadow-top {
  box-shadow: 6px 0px 6px 0 rgba(0, 0, 0, 0.2);
}

.shadow-top-strong {
  box-shadow: 9px 0px 9px 0 rgba(0, 0, 0, 0.2);
}

.shadow-bottom-light {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.shadow-bottom {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.shadow-bottom-strong {
  box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.2);
}

.form-input input, .form-input textarea {
  padding: 10px 10px;
  background: #C4C4C4;
  outline: none;
  border: none;
}
.form-input .dropdown-account {
  background: #C4C4C4;
  padding: 10px 15px;
}
.form-input .dropdown-account .option {
  position: absolute;
  background: #C4C4C4;
  top: 0px;
  left: 15px;
  width: calc(100% - 30px);
  z-index: 40;
}
.form-input .dropdown-account .option .item {
  padding: 20px 15px;
}
.form-input .dropdown-account .option .item:hover {
  background: #85D5FA;
}
.form-input .dropdown-account .option.hide {
  display: none;
}

.form-input-2 input, .form-input-2 select, .form-input-2 textarea {
  padding: 10px 20px;
  outline: 0;
  width: 100%;
  border-radius: 100px;
  border: 0;
}
.form-input-2 input[type=checkbox] {
  width: -moz-fit-content;
  width: fit-content;
}

.blue-dot {
  background: #1714FF;
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

/* bars dashboard user */
.bars-dashboard div {
  background-color: #1714FF;
  margin: 5px 0px;
  border-radius: 3px;
  height: 5px;
  width: 35px;
  transition: 0.2s;
}
.bars-dashboard.x .one {
  transform: rotate(45deg) translateY(7.5px);
}
.bars-dashboard.x .two {
  transform: rotate(-45deg) translateY(-7.5px);
}
.bars-dashboard:hover div {
  background-color: #34548A;
}

/* dashboard user */
.dashboard {
  background-color: rgb(45, 45, 45);
  min-height: 100vh;
  font-family: "Montserrat";
}

#dashboard {
  font-family: "Montserrat";
  background: url(../images/v2/bg_dashboarddds.png);
  background-size: cover;
  min-height: 100vh;
  color: white;
}
#dashboard #dashboard {
  background: none;
}
#dashboard table {
  color: white;
}

.sidebar-user {
  margin-top: 80px;
  width: 250px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100%;
  min-height: calc(100vh - 80px);
  overflow: auto;
  box-shadow: 2px 0 20px 0px rgba(0, 0, 0, 0.2);
}
.sidebar-user a {
  color: rgb(255, 255, 255);
  text-decoration: none;
}
.sidebar-user a.active {
  color: #1714FF;
}
@media screen and (max-width: 991px) {
  .sidebar-user {
    min-width: 100%;
    z-index: 30;
    transition: 0.2s;
  }
  .sidebar-user.hide {
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
  }
}

#app-dashboard {
  margin-top: 80px;
  margin-left: 250px;
}
@media screen and (max-width: 991px) {
  #app-dashboard {
    margin-left: 0;
  }
}

.input-subscribe {
  background: #1E2124;
  padding: 10px;
  border-radius: 60px;
  display: flex;
}
@media screen and (max-width: 991px) {
  .input-subscribe {
    padding: 5px;
  }
}
.input-subscribe input {
  border: none;
  background: transparent;
  outline: none;
  padding: 15px;
  color: rgb(255, 255, 255);
  width: 100%;
}
.input-subscribe input:focus, .input-subscribe input:active {
  border: 0 !important;
}
@media screen and (max-width: 991px) {
  .input-subscribe input {
    padding: 10px;
  }
}
.input-subscribe button {
  padding: 15px 35px;
  border-radius: 40px;
}
@media screen and (max-width: 991px) {
  .input-subscribe button {
    padding: 10px 25px;
  }
}

footer .logo {
  max-width: 300px;
}
@media screen and (max-width: 575px) {
  footer .logo {
    max-width: 200px;
  }
}
footer .mt5 {
  max-width: 200px;
}
@media screen and (max-width: 575px) {
  footer .mt5 {
    max-width: 140px;
  }
}

/* 
|||||||||||||||||||||||||||||||
form 
|||||||||||||||||||||||||||||||
*/
.form-group .file-upload {
  position: relative;
  background: transparent;
  width: 100%;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #1714FF;
  border-radius: 5px;
  border: 2px dashed #1714FF;
  transition: 0.2s;
}
.form-group .file-upload input[type=file] {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.form-group .file-upload:hover {
  background: rgba(133, 213, 250, 0.2);
}
.form-group .file-upload img {
  height: 100px;
}
.form-group .file-upload video {
  height: 200px;
}

input:focus, input:active {
  border: 1px solid #1714FF !important;
  box-shadow: none !important;
}

select:focus, select:active {
  border: 1px solid #1714FF !important;
  box-shadow: none !important;
}

/* 
|||||||||||||||||||||||||||||||
tables
|||||||||||||||||||||||||||||||
*/
/* 
|||||||||||||||||||||||||||||||
card
|||||||||||||||||||||||||||||||
*/
.card.card-image img {
  width: 100%;
  height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 1199px) {
  .card.card-image.card-image img {
    height: 145px;
  }
}
@media screen and (max-width: 991px) {
  .card.card-image.card-image img {
    height: 225px;
  }
}
@media screen and (max-width: 557px) {
  .card.card-image.card-image img {
    height: 150px;
  }
}
@media screen and (max-width: 475px) {
  .card.card-image.card-image img {
    height: 130px;
  }
}
@media screen and (max-width: 340px) {
  .card.card-image.card-image img {
    height: 110px;
  }
}
.card.card-news {
  height: -moz-fit-content;
  height: fit-content;
}
.card.card-news img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 1199px) {
  .card.card-news.card-image img {
    height: 145px;
  }
}
@media screen and (max-width: 991px) {
  .card.card-news.card-image img {
    height: 225px;
  }
}
@media screen and (max-width: 557px) {
  .card.card-news.card-image img {
    height: 150px;
  }
}
@media screen and (max-width: 475px) {
  .card.card-news.card-image img {
    height: 130px;
  }
}
@media screen and (max-width: 340px) {
  .card.card-news.card-image img {
    height: 110px;
  }
}
.card.card-profile {
  height: -moz-fit-content;
  height: fit-content;
}
.card.card-profile img {
  width: 120px;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100%;
}
@media screen and (max-width: 1199px) {
  .card.card-profile.card-image img {
    height: 145px;
  }
}
@media screen and (max-width: 991px) {
  .card.card-profile.card-image img {
    height: 225px;
  }
}
@media screen and (max-width: 557px) {
  .card.card-profile.card-image img {
    height: 150px;
  }
}
@media screen and (max-width: 475px) {
  .card.card-profile.card-image img {
    height: 130px;
  }
}
@media screen and (max-width: 340px) {
  .card.card-profile.card-image img {
    height: 110px;
  }
}
.card.card-header {
  height: -moz-fit-content;
  height: fit-content;
}
.card.card-header .icon {
  font-size: 48px;
}

/* 
|||||||||||||||||||||||||||||||
buttons
|||||||||||||||||||||||||||||||
*/
.btn {
  border: 0;
  border-radius: 100px !important;
  padding: 10px 25px;
}
.btn.btn-primary {
  background-color: #1714FF !important;
  color: #fff;
  transition: 0.2s;
}
.btn.btn-primary.active {
  background-color: #fff !important;
  color: #000 !important;
}
.btn.btn-primary:hover {
  background-color: #34548A !important;
  color: #fff;
}
.btn.btn-primary-dark {
  background-color: #34548A !important;
  color: #fff;
  transition: 0.2s;
}
.btn.btn-primary-dark:hover {
  background-color: #2d4570 !important;
  color: #fff;
}
.btn.btn-info {
  background-color: #85D5FA !important;
  color: #fff;
  transition: 0.2s;
}
.btn.btn-info:hover {
  background-color: rgb(71, 199, 231) !important;
  color: #fff;
}
.btn.btn-white {
  background-color: rgb(255, 255, 255) !important;
  color: #000;
  transition: 0.2s;
}
.btn.btn-white:hover {
  background-color: #EDEDED !important;
  color: rgb(0, 0, 0);
}
.btn.btn-black {
  background-color: rgb(45, 45, 45) !important;
  color: #fff;
  transition: 0.2s;
}
.btn.btn-black:hover {
  background-color: rgb(0, 0, 0) !important;
  color: rgb(255, 255, 255);
}
.btn.btn-secondary {
  background-color: rgb(160, 160, 160) !important;
  color: #fff;
  transition: 0.2s;
}
.btn.btn-secondary:hover {
  background-color: rgb(131, 131, 131) !important;
  color: #fff;
}
.btn.btn-success {
  background-color: rgb(30, 190, 78) !important;
  color: #fff;
  transition: 0.2s;
}
.btn.btn-success:hover {
  background-color: rgb(19, 156, 60) !important;
  color: #fff;
}
.btn.btn-outline-success {
  background-color: transparent !important;
  color: rgb(30, 190, 78);
  border: 1px solid rgb(30, 190, 78);
  transition: 0.2s;
}
.btn.btn-outline-success:hover {
  background-color: rgb(30, 190, 78) !important;
  color: #fff;
}
.btn.btn-danger {
  background-color: rgb(241, 93, 93) !important;
  color: #fff;
  transition: 0.2s;
}
.btn.btn-danger:hover {
  background-color: rgb(216, 61, 61) !important;
}
.btn.btn-outline-danger {
  background-color: transparent !important;
  color: rgb(241, 93, 93);
  border: 1px solid rgb(241, 93, 93);
  transition: 0.2s;
}
.btn.btn-outline-danger:hover {
  background-color: rgb(241, 93, 93) !important;
  color: #fff;
}
.btn.btn-warning {
  background-color: rgb(241, 198, 78) !important;
  color: #fff;
  transition: 0.2s;
}
.btn.btn-warning:hover {
  background-color: rgb(221, 180, 67) !important;
}
.btn.btn-outline-warning {
  background-color: transparent !important;
  color: rgb(241, 198, 78);
  border: 1px solid rgb(241, 198, 78);
  transition: 0.2s;
}
.btn.btn-outline-warning:hover {
  background-color: rgb(241, 198, 78) !important;
  color: #fff;
}

button:focus, button:active {
  border: 0px !important;
  box-shadow: none !important;
}

/*  
|||||||||||||||||||||||||||||||
modals POPUP
|||||||||||||||||||||||||||||||
*/
.popup {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  justify-content: center;
  align-items: center;
  padding: 20px;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.2s;
  display: none;
}
.popup.show {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
.popup .box {
  background: rgb(12, 12, 12);
  border-radius: 10px;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 90%;
  width: 100%;
  max-width: 450px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.popup .box .header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.555);
  padding: 10px 20px;
  margin-bottom: 10px;
}
.popup .box .footer {
  border-top: 1px solid rgba(0, 0, 0, 0.555);
  margin-top: 10px;
  padding: 10px 20px;
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.popup .box .header, .popup .box .footer {
  height: 70px;
}
.popup .box .body {
  padding: 0px 20px;
  height: 100%;
  overflow-y: auto;
}

/* 
|||||||||||||||||||||||||||||||
navigation  
|||||||||||||||||||||||||||||||
*/
/* main navbar */
.navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 75;
}

.navbar-wrapper {
  position: fixed;
  width: 100%;
}

nav#main {
  height: 80px;
  /* lang dropdown */
}
nav#main img.logo {
  height: 30px;
}
nav#main .menus li {
  list-style: none;
  margin: 0 14px;
}
nav#main .menus li a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  opacity: 1;
  transition: 0.2s;
}
nav#main .menus li a:hover {
  opacity: 1;
}
nav#main .menus li.active a {
  opacity: 1;
}
nav#main .bars div {
  background-color: #1714FF;
  margin: 5px 0px;
  border-radius: 3px;
  height: 5px;
  width: 35px;
  transition: 0.2s;
}
nav#main .bars.x .one {
  transform: rotate(45deg) translateY(7.5px);
}
nav#main .bars.x .two {
  transform: rotate(-45deg) translateY(-7.5px);
}
nav#main .bars:hover div {
  background-color: #34548A;
}
@keyframes hide-after {
  0% {
    display: none;
  }
  100% {
    display: none;
  }
}
nav#main .lang-dropdown {
  position: absolute;
  background: #fff;
  transition: 0.2s;
  transform: translateY(0);
  opacity: 1;
  top: 55px;
  right: 12px;
  box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px;
}
nav#main .lang-dropdown.hide {
  transform: translateY(20px);
  opacity: 0;
  animation: hide-after;
  animation-delay: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

/* sub nav */
.sub-nav {
  height: 70px;
  overflow: hidden;
  transition: 0.2s;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
.sub-nav a {
  color: #000;
  text-decoration: none;
}
.sub-nav.hide {
  height: 0px;
  border-bottom: 2px solid rgba(255, 255, 255, 0);
  border-top: 2px solid rgba(255, 255, 255, 0);
}

/* navbar small */
.navbar.small#main {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  opacity: 1;
  z-index: 50;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 60;
  transition: 0.2s;
  transform: translateX(0);
}
.navbar.small#main .box {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: 500px;
  background: rgb(255, 255, 255);
  box-shadow: 2px 2px 5px 4px rgba(0, 0, 0, 0.2);
}
.navbar.small#main .bars {
  position: absolute;
  top: 50px;
  right: 50px;
}
.navbar.small#main .bars div {
  background-color: #1714FF;
  margin: 5px 0px;
  border-radius: 3px;
  height: 5px;
  width: 35px;
  transition: 0.2s;
}
.navbar.small#main .bars.x .one {
  transform: rotate(45deg) translateY(7.5px);
}
.navbar.small#main .bars.x .two {
  transform: rotate(-45deg) translateY(-7.5px);
}
.navbar.small#main .bars:hover div {
  background-color: #34548A;
}
.navbar.small#main ul li {
  list-style: none;
}
.navbar.small#main ul li.link a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-size: 20px;
  transition: 0.2s;
}
.navbar.small#main ul li.active a {
  color: #1714FF;
}
.navbar.small#main ul li.active .account-dropdown a {
  color: rgb(0, 0, 0);
}
.navbar.small#main.hide {
  transform: translateX(100%);
  opacity: 0;
}

/* 
|||||||||||||||||||||||||||||||
pages
|||||||||||||||||||||||||||||||
*/
/* 
|||||||||||||||||||||||||||||||
Homepage
|||||||||||||||||||||||||||||||
*/
#homepage #main-header {
  height: 700px;
  width: 100%;
}
#homepage .selling-point .icon {
  height: 70px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}
#homepage .slider {
  position: relative;
}
#homepage .slider .slide {
  height: 450px;
}
#homepage .arrows .next, #homepage .arrows .prev {
  position: absolute;
  top: calc(50% - 20px);
}
@media screen and (max-width: 575px) {
  #homepage .arrows .next, #homepage .arrows .prev {
    top: 84%;
  }
}
#homepage .arrows .next {
  right: 4%;
}
@media screen and (max-width: 575px) {
  #homepage .arrows .next {
    right: 0;
    left: 60px;
  }
}
#homepage .arrows .prev {
  left: 4%;
}
@media screen and (max-width: 575px) {
  #homepage .arrows .prev {
    left: 15px;
  }
}

/* 
|||||||||||||||||||||||||||||||
About
|||||||||||||||||||||||||||||||
*/
#about header {
  width: 100%;
  height: 500px;
}
#about .funds {
  width: 100%;
  height: 400px;
}
#about .funds .fs-ultra {
  font-size: 64px;
}
@media screen and (max-width: 991px) {
  #about .funds .fs-ultra {
    font-size: 54px;
  }
}
@media screen and (max-width: 767px) {
  #about .funds .fs-ultra {
    font-size: 48px;
  }
}
@media screen and (max-width: 575px) {
  #about .funds .fs-ultra {
    font-size: 36px;
  }
}

.logo-legal {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.logo-legal .logo {
  width: 20%;
}
@media screen and (max-width: 991px) {
  .logo-legal .logo {
    width: 30%;
  }
}
@media screen and (max-width: 575px) {
  .logo-legal .logo {
    width: 100%;
  }
}

/* 
|||||||||||||||||||||||||||||||
Partnership
|||||||||||||||||||||||||||||||
*/
#partnership header, #partnership .slider .slide {
  width: 100%;
  height: 500px;
}
#partnership .slider {
  position: relative;
}
#partnership .slider .slide img {
  width: 100px;
}
@media screen and (max-width: 991px) {
  #partnership .slider .slide img {
    width: 80px;
  }
}
@media screen and (max-width: 767px) {
  #partnership .slider .slide img {
    width: 100px;
  }
}
@media screen and (max-width: 575px) {
  #partnership .slider .slide img {
    width: 100px;
  }
}
#partnership .slider .arrows .next, #partnership .slider .arrows .prev {
  position: absolute;
  top: calc(50% - 20px);
}
@media screen and (max-width: 575px) {
  #partnership .slider .arrows .next, #partnership .slider .arrows .prev {
    top: 84%;
  }
}
#partnership .slider .arrows .next {
  right: 4%;
}
@media screen and (max-width: 575px) {
  #partnership .slider .arrows .next {
    right: calc(50% - 45px);
  }
}
#partnership .slider .arrows .prev {
  left: 4%;
}
@media screen and (max-width: 575px) {
  #partnership .slider .arrows .prev {
    left: calc(50% - 45px);
  }
}

/* 
|||||||||||||||||||||||||||||||
account
|||||||||||||||||||||||||||||||
*/
#account header {
  width: 100%;
  height: 500px;
}
#account .selling-point .icon {
  height: 70px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}
#account .card {
  width: 100%;
  max-width: 300px;
  margin: auto;
}

/* 
|||||||||||||||||||||||||||||||
product
|||||||||||||||||||||||||||||||
*/
#product header {
  width: 100%;
  height: 500px;
}

/* 
|||||||||||||||||||||||||||||||
contact
|||||||||||||||||||||||||||||||
*/
.contact-area-detail {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.contact-area-detail .cc {
  width: 20%;
}
@media screen and (min-width: 992px) {
  .contact-area-detail .cc {
    width: 20%;
  }
}
@media screen and (max-width: 991px) {
  .contact-area-detail {
    justify-content: start;
  }
  .contact-area-detail .cc {
    width: 30%;
  }
}
@media screen and (max-width: 767px) {
  .contact-area-detail .cc {
    width: 50%;
  }
}

/* 
|||||||||||||||||||||||||||||||
product
|||||||||||||||||||||||||||||||
*/
#legal header {
  width: 100%;
  height: 500px;
}

/* 
|||||||||||||||||||||||||||||||
Login
|||||||||||||||||||||||||||||||
*/
#login .selling-point .icon {
  height: 70px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}

/* 
|||||||||||||||||||||||||||||||
Override
|||||||||||||||||||||||||||||||
*/
.slick-prev, .slick-next {
  display: none !important;
}

.slick-slide {
  outline: none !important;
}

.pagin .page-link {
  color: #1714FF !important;
  border: 1px solid #1714FF !important;
}
.pagin .page-item.active .page-link {
  background-color: #1714FF !important;
  color: #fff !important;
}/*# sourceMappingURL=main.css.map */