html, body {
    height: 100%;
    margin: 0;
  }

body {
    font-family: 'Roboto', sans-serif;
  }
  
  * {
    box-sizing: border-box;
  }
  
  h2, h3 {
    font-family: 'Baloo Tammudu', cursive;
    color: #222b3f
  }

  .mobile-only {
      display: none;
  }

img.bg {
    /* Set rules to fill background */
    /* min-height: 100%;
    min-width: 1024px;
      
    width: 100%;
    height: auto; */
    min-height: 100%;
    max-width: 58.33%;
      
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
  }

  /* .wrapper {
    width:100%;
    min-height:100%;
    margin-bottom: -100px;
} */

.wrapper {
    width:100%;
    height:100%;
    margin-bottom: -101px;
    display: table;
    /* overflow: hidden; */

    /* background: url(/theme/img/Archive/Images/euidImg1.jpg), no-repeat, scroll, top, left;
    background-repeat: no-repeat;
    background-size: cover; */
}

.nopad {
    padding:0;
    height: 100%;
}

.whole {
    height: 100%;
    /* background-color: #fff; */
}


.desktop-bg{
    /* visibility: hidden; */
    /* height: 100%; */
    /* height: max-content; */
    min-height: 100%;
    min-width: 58.33%;
    max-width: 58.33%;
    max-height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-attachment: absolute; */
    position: fixed;
    background-position: center;

}

/* .bg1{
    min-height: 100%;
    min-width: 58.33%;
    max-width: 58.33%;
    max-height: 100%;
    background: url(/theme/img/Archive/Images/euidImg11.jpg) center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;

} */

.bg1{

    background-image: url(/theme/img/Archive/Images/euidImg11.jpg);
}

.bg2{
    background-image: url(/theme/img/Archive/Images/euidImg22.jpg);
}

.bg3{
    background-image: url(/theme/img/Archive/Images/euidImg33.jpg);
}

.bg4{
    background-image: url(/theme/img/Archive/Images/euidImg44.jpg);
}

.bg5{
    background-image: url(/theme/img/Archive/Images/euidImg55.jpg);
}

.bg6{
    background-image: url(/theme/img/Archive/Images/euidImg66.jpg);
}

.bg7{
    background-image: url(/theme/img/Archive/Images/euidImg77.jpg);
}

.bg8{
    background-image: url(/theme/img/Archive/Images/euidImg88.jpg);
}

  div {
    border-style: solid;
    border-width: 0px;
    border-color: red;
  }

    .header{
        display:block;
        height: 150px;
        transition: all 0.6s;
    }

  .header .logo{
    display: inline-block;
    float: left;
  }
  .btn-mobile-redirect {
    float: right;
    margin-top: 30px;
    margin-right: 30px;
  }

  .header .logo img {
    max-width: 144px;
    width: 144px;
    margin-top: 20px;
    transition: all 0.6s;
    margin-left: 30px;
  }
  /* ratio logo user pic is about 12 to 5 */
  .header .user-pic img {
    /* padding: 2.5em 20px 2.5em; */
    max-width: 60px;
    transition: all 0.6s;
    float: right;
    margin-top: 30px;
    margin-right: 30px;
    line-height: 54px;

  }

.mainFrame {
    margin: auto;
    width: 60%;
    /* border: 3px solid green; */
    /* padding: 10px; */
    text-align: center;
    position: relative;
    margin-bottom: 151px;
    /* margin-bottom: 151px;
    padding-top: 20%; */
    /* top: 15%;
    left: 15%;
    -ms-transform: translate(-25%, -25%);
    transform: translate(-25%, -25%); */
  }

  .center-hv {
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

  /* .center2 {
    margin: 0;
    width:60%;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 10px;
    margin-bottom: 101px;
  } */



  /* .footer img.footer-icon {
    max-width: 145px;
    margin-bottom: 10px;
  } */

  .btn {
    border: none;
    /* background-color: #222b3f; */
    color: #fff;
    /* width:90%; */
    border-radius: 10px;
    padding: 1em 1em 0.6em;
    font-size: 14px;
    font-family: 'Baloo Tammudu', cursive;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    display: inline-block;
    /* margin-top: 0.4em; */
    /* margin-bottom: 0.4em */
  }

  .btn-add {
    padding: 1em 1em 0.5em;
    background-color: #ecf4f5;
    color: #222b3f;
    border-radius: 0px;
    margin-top: 0.4em;
    margin-bottom: 0.4em
  }
  .btn-checkbox {
    padding: 0.5em 1em ;
    background-color: #ecf4f5;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    color: #222b3f;
    border-radius: 0px;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
    width: 100%;
    display: flex;
    justify-content: space-between;
    
  }
  .companyInfo {
    background-color: #ecf4f5;
    border-color: #ecf4f5;
    border-width: 20px;
    max-width: 430px;
    width: 100%;
		border-radius: 25px;
		margin-top: 20px;
		display: table;
  	padding: 20px /*75px*/;
    color: #222b3f;
    margin: auto;
    margin-bottom: 20px;
    text-align: left;
  }
  .companyInfo td{
    padding: 3px;
    padding-left: 20px!important;
    padding-right: 20px!important;
    min-width: 20px;
    max-width: 200px;
  }

  .companyInfo tr:empty::after{
    content: "\00a0";
    min-width: 20px;
  }

  .infoTitle{
    font-size: 14px;
    font-weight: 600;
  }

  .pricingPlan {
    background-color: #ecf4f5;
    max-width: 430px;
		border-radius: 25px;
		margin-top: 20px;
		display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  	padding: 20px /*75px*/;
    color: #222b3f;
    margin: auto;
    margin-bottom: 20px;
  } 
  .pricing_line{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 10px;
  }
  .pricing_title{
    font-size: 24px;
    font-family: 'Baloo Tammudu', cursive;
    margin-bottom: 0%;
  }
  .pricing_value{
    font-size: 16px;
    font-weight: 400;
  }
  .pricing_title_left{
    width:28px;
    height:46px;
    background-image: url(/theme/img/Archive/SVGs/right-arrow-green.png)
  }
  .pricing_title_right{
    width:28px;
    height:46px;
    background-image: url(/theme/img/Archive/SVGs/left-arrow-green.png)
  }

  .custom-swal .swal-footer {
    display: flex;
    justify-content: flex-end;
  }

  .custom-swal .swal-button-container {
    width: auto;
    min-width: 20%;
    }
  
  .btn-large {
      width: 90%;
  }

  .btn-small {
    width:40%;
    max-width: 145px;
  }

  .swal-button-container {
    width: 20%;
    }

  .btn-swal {
    width: 100%;
    max-width: 145px;
  }

  .btn-dark {
    background-color: #222b3f;
  }

  .btn-light {
    background-color: #2f5aaf;
  }

  .btn-red {
    background-color: #e0565a;
  }

  .btn-light:hover {
    background-color: #213E8E;
  }

  .btn-dark:hover {
    background-color: #3b475a;
  }

  .btn-red:hover {
    background-color: #A33F42;
  }

  .menu-for-btns {
  }

  /* onclick="this.blur();" if you want them to unfocus */

  /* .btn-back {
    border: none;
    background-color: #222b3f;
    color: #fff;
    width:45%;
    border-radius: 10px;
    padding: 0.8em 0.4em 0.4em;
    font-size: 20px;
    font-family: 'Baloo Tammudu', cursive;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    display: inline-block;
    margin: 0.2em;
  }

  .btn-next {
    border: none;
    background-color: #2f5aaf;
    color: #fff;
    width:45%;
    border-radius: 10px;
    padding: 0.8em 0.4em 0.4em;
    font-size: 20px;
    font-family: 'Baloo Tammudu', cursive;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    display: inline-block;
    margin: 0.2em;
  } */

  .btn-icon {
    border: none;
    background-color: #ecf4f5;
    color: #000;
    width:50px;
    height: 50px;
    border-radius: 0;
    padding: 0.8em 1em 0.4em;
    font-size: 20px;
    font-family: 'Baloo Tammudu', cursive;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    display: inline-block;
    background-position: center;
    background-size: cover;
  }

  .btn-camera {
    background-image: url(/theme/img/Archive/SVGs/EUPay-Assets-Camera.png);
  }

  .btn-upload {
    background-image: url(/theme/img/Archive/SVGs/EUPay-Assets-Upload.png);
  }

  .btn-video {
    background-image: url(/theme/img/Archive/SVGs/EUPay-Assets-Film.png);
  }

  .btn-view-change {
    border: none;
    /* background-color: #1e2530; */
    background-color: #f9ce59;
    color: #222b3f;
    width: 104px;
    height: 50px;
    border-radius: 0;
    padding: 1.4em 0em 0.5em;
    font-size: 14px;
    font-family: 'Baloo Tammudu', cursive;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    display: inline-block;
    /* margin: 0.2em; */
    text-align: center;
  }

  .menu-for-btns {
    width: 90%;
    margin: auto;
  }


  .upload-style {
    border: none;
    background-color: #ecf4f5;
    color: #000;
    width:50px;
    height: 50px;
    border-radius: 0;
    padding: 0.8em 1em 0.4em;
    /* transition: all 0.4s;
    -webkit-transition: all 0.4s; */
    display: inline-block;
    background-position: center;
    background-size: cover;
    background-image: url(/theme/img/Archive/SVGs/EUPay-Assets-Upload.png);
    cursor: pointer;
    position: relative;
    float: right;
  }

  .upload-style.add-director {
    background-image: url(/theme/img/Archive/SVGs/eupay-assets-plus.png);
  }

  .upload-style.remove-director {
    width: 37.19px;
    height: 37.19px;
    margin: 8px 5px 5px;
    background-image: url(/theme/img/Archive/SVGs/eupay-assets-x.png);
  }

  .upload-style.remove-file {
    width: 50px;
    height: 50px;
    margin: 0px 5px 5px;
    background-image: url(/theme/img/Archive/SVGs/eupay-assets-x.png);
  }

  .upload-ok {
    border: none;
    background-color: #ecf4f5;
    color: #000;
    width:50px;
    height: 50px;
    border-radius: 0;
    padding: 0.8em 1em 0.4em;
    /* transition: all 0.4s;
    -webkit-transition: all 0.4s; */
    display: inline-block;
    background-position: center;
    background-size: cover;
    background-image: url(/theme/img/Archive/SVGs/green-checkmark.png);
    cursor: pointer;
    position: relative;
    float: right;
  }

  .upload-style:hover ,.upload-ok:hover{
    border: 1px dotted transparent;
  }


  

  .invis {
    visibility: hidden;
    width: 0;
    /* opacity: 0;
    position: absolute;
    z-index: -1; */
  }

  input[type=file].invis{
    display: none;
  }
  .info-span{
    color: #337ab7;

  }

  /* input[type=text], select { */
  input[type=text] {
    width: 100%;
    padding: 0.6em 1em;
    margin: 0.5em 0em;
    background-color: #ecf4f5;
    color: #222b3f;
    font-size: 16px;
    display: inline-block;
    border: none;
    box-sizing: border-box;
  }

  /* input[type=text], select { */
  input[type=number] {
    width: 100%;
    padding: 0.6em 1em;
    margin: 0.5em 0em;
    background-color: #ecf4f5;
    color: #222b3f;
    font-size: 16px;
    display: inline-block;
    border: none;
    box-sizing: border-box;
    -moz-appearance: textfield;
  }

  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }

  textarea{
    resize: vertical;
    width: 100%;
    padding: 0.6em 1em;
    margin: 0.5em 0em;
    background-color: #ecf4f5;
    color: #222b3f;
    font-size: 16px!important;
    display: inline-block;
    border: none;
    box-sizing: border-box;
  }

  select[type=text] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    width: 100%;
    padding: 0.6em 1em;
    margin: 0.5em 0em;
    background-color: #ecf4f5;
    color: #222b3f;
    font-size: 16px;
    display: inline-block;
    border: none;
    box-sizing: border-box;
  }

  .style-chooser .vs__search::placeholder{
    color: inherit;
    opacity: 0.5;
  }
  /* .style-chooser .vs__dropdown-toggle, */
  .style-chooser .vs__dropdown-menu {
    background-color: #ecf4f5;
    color: #222b3f;
    font-size: 16px;
    line-height: 1.15;
    font-family: 'Roboto', sans-serif;
    min-width: 250px !important;
  }

  .style-chooser.v-select {
    padding: 0.5em 0em;
  }

  .style-chooser .vs__dropdown-toggle {
    width: 100%;
    padding: 0.3em 0.5em 0.4em;
    /* padding: 0.3em 1em 0.4em; */
    /* margin: 0.5em 0em; */
    background-color: #ecf4f5;
    color: #222b3f;
    font-size: 16px;
    display: inline-block;
    border: none;
    box-sizing: border-box;
    line-height: 1.15;
    border-radius: 0;
    /* white-space: nowrap; */
    text-align: justify;
  }

  .style-chooser .vs__search, .style-chooser .vs__search:focus {
    padding: 0;
  }

  .style-chooser .vs__search::placeholder {
    color: inherit;
    opacity: 0.5;
    /* margin: 0;
    padding: 0; */
  }

  .style-chooser .vs__selected-options {
    padding-left: 8px;
    padding-right: 8px;
    flex-wrap: nowrap;
  }

  .style-chooser .vs__selected {
    color: #222b3f;
    overflow: hidden;
    /* margin: 0; */
    margin-left: 0;
    padding: 0;
  }

  .style-chooser .vs__actions {
    display: none;
  }

  .style-chooser .vs__clear,
  .style-chooser .vs__open-indicator {
    fill: #394066;
  }

  .hidden {
    display: none;
    z-index: -99;
  }
  .notHidden {
    display: inherit;
    z-index: 10;
  }

  body.modal-open .background-blur{
    -webkit-filter: blur(6px);
    -moz-filter: blur(6px);
    -o-filter: blur(6px);
    -ms-filter: blur(6px);
    filter: blur(6px);
  }

  .loader-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .loader {
    border: 10px solid #f3f3f3; /* Light grey */
    border-top: 10px solid #222b3f;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 1.5s linear infinite;
    margin: 32px;
  }
  
  .loader-small {
    display: inline-block;
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #222b3f; /* Blue */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
  }
  
  span.loader {
    display: inline-block;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .caret {
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 6px dashed;
    border-top: 6px solid \9;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    position: absolute;
    right: 7px;
    top: 25px;
    z-index: 100000;
  }

  .select-relative{
    position: relative;
  }

  input[type="date"].form-c {
    width: 100%;
    padding: 0.6em 1em;
    margin: 0.5em 0em;
    background-color: #ecf4f5;
    color: #222b3f;
    font-size: 16px;
    display: inline-block;
    border: none;
    box-sizing: border-box;
  }

  .dont-display{
    display: none;
  }

  .slct-country {
    position: relative;
  }

  /* select.country-select:valid + div {
    display: none;
  } */

  .fake-placeholder {
    width: 90%;
    padding: calc(0.6em - 2px) 1em;
    margin: 0.5em 0em;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events:none;
    text-align: left;
    color: #222b3f;
    opacity: 0.5;
    z-index: 100;
  }

  /* input:invalid{
      border: 1px solid red;
  } */

  .checkbox-label {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    width: 80%;
    margin: auto;
    margin-bottom: 12px;
  }

  /* Hide the browser's default radio button */
  .checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border-radius: 50%;
    border: 4px solid #f9ce59;
  }
  
  /* On mouse-over, add a grey background color */
  .checkbox-label:hover input ~ .checkmark {
    background-color: #eee;
  }
  
  /* When the radio button is checked, add a blue background */
  .checkbox-label input:checked ~ .checkmark {
    background-color: #f9ce59;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .checkbox-label input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .checkbox-label .checkmark:after {
       /* top: 9px;
      left: 9px;
      width: 8px;
      height: 8px; */
      /* top: 4px;
      left: 4px;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: white; */
  }

  .hideRadio{
    display: none;
  }

  .view-modal-body {
    width: 100%;
    height: 100%;
  }

  .modal-title {
    display: inline
  }

  .view-change {
    min-height: 480px;
    max-width: fit-content;
    margin: auto;
  }

  .uploader{
    width:100%;
    /* min-width: 300px; */
    text-align: left;
    display: block;
    /* height: 50px; */
    margin: auto;

  }

  label[for="uploader"] {
    /* width: 60%; */
    /*width: calc(100% - 60px);*/
    padding: 0.6em 0.5em;
    margin: 0 0 1em 0;
    background-color: #ffffff;
    color: #222b3f;
    font-size: 16px;
    display: inline-block;
    border: none;
    box-sizing: border-box;
    text-align: left;
    display: inline-block;
  }

    .uploader-up {
    height: 50px;
    display: inline;
    box-sizing: border-box;
    float: right;
  }

  ::placeholder{
      color:#222b3f;
      opacity: 0.5; /* for firefox */
      /* font-weight: bold; */
  }

  ::-webkit-input-placeholder {
    color:#222b3f;
    opacity:0.5
  }

  :-ms-input-placeholder {
    color:#222b3f;
    opacity:0.5
  }

  ::-ms-input-placeholder {
    color:#222b3f;
    opacity:0.5
  }

  /* .input-form {
    border: none;
    background-color: #ecf4f5;
    color: #ecf4f5;
    width: 15em;
    height: 3em;
    padding: 0;
    font-size: 20px;
    font-family: 'Baloo Tammudu', cursive;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    display: block;
    margin: auto;
  } */

  .clearfix{
      overflow:auto;
  }


 .media__icons ul {
    display: inline-block;
    float: right;
  }
  
  .media__icons ul li {
    display: inline-block;
    padding: 10px;
  }
  
  .media__icons ul li:last-child {
    padding-right: 0;
  }
  
  .media__icons ul li {
    transition: all 0.3s;
  }
  
  .media__icons ul li:hover {
    opacity: 0.8;
  }

  /* .media__icons ul li {
    padding: 5px 0;
  }

  .media__icons ul li img {
    width: 70%;
  } */

  .fluid-wrapper {
    width: 100%;
  }

  .media-section {
    position: relative;
    z-index: 10;
    /* margin-top: -5%; */
    /* padding-bottom: 5em; */
  }
  
  .media__lang {
    float: left;
    padding-top: 5px;
  }
  
  .media__lang a {
    color: #1e2530;
    font-weight: bold;
    font-size: 22px;
    border-bottom: 3px solid #1e2530;
    padding: 5px 0;
    transition: all 0.3s;
  }

  .media__lang a:hover {
    opacity: 0.8;
  }

  /* .footer2 {
      height: 100px;
      width: 41.67%;
      position: fixed;
      padding-right: 30px;
      bottom: 0;
      box-sizing: border-box;
  } */

/*Do not rename to pagination -- it's default bootstrap pagination*/
.pagination2 {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0 0px;
}

.pagination2>li {
  display: inline;
}

.pagination2>li{
  position: relative;
  float: left;
  padding: 5px;
  background-color: #222b3f;
  /* border: 4px solid #fff; */
  margin: 4px 5px;
  border-radius: 50%;
}

.pagination2>li.current {
  border: 4px solid;
  background-color: #fff;
  border-color: #f9ce59;
  margin: 0 1px;
}
 
.pagination2>.active {
  margin: 0 1px;
  border: 4px solid;
  background-color: #f9ce59;
  border-color: #f9ce59;
}

  .footer {
    height: 100px;
    width: 90%;
    position: relative;
    bottom: 0;
    margin: auto;
    transition: all 0.6s;
}
.rowtitle_wide {
  display: block;
}
.rowtitle_narrow {
  display: none;
}
/* .footer,
.push {
  height: 100px;
} */

/* #more {display: none;}
#less {display: none;} */

@media (max-width: 1340px) {
    .mainFrame {
        width: 85%;
    }
}

@media (max-width: 991px) {

    .mbg1{

        background-image: url(/theme/img/Archive/Images/euidImg11.jpg);
    }
    
    .mbg2{
        background-image: url(/theme/img/Archive/Images/euidImg22.jpg);
    }
    
    .mbg3{
        background-image: url(/theme/img/Archive/Images/euidImg33.jpg);
    }
    
    .mbg4{
        background-image: url(/theme/img/Archive/Images/euidImg44.jpg);
    }
    
    .mbg5{
        background-image: url(/theme/img/Archive/Images/euidImg55.jpg);
    }
    
    .mbg6{
        background-image: url(/theme/img/Archive/Images/euidImg66.jpg);
    }
    
    .mbg7{
        background-image: url(/theme/img/Archive/Images/euidImg77.jpg);
    }
    
    .mbg8{
        background-image: url(/theme/img/Archive/Images/euidImg88.jpg);
    }

    .wrapper{
        /* display: block; */
    }

    .mobile-bg {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        /* background: url(/theme/img/Archive/Images/euidImg11.jpg) center center; */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: fixed;
        overflow: scroll;
        padding-bottom: 151px;
    }
    
    .mainFrame {
        /* width: 50%; */
        height: 100%;
        /* height: 400px; */
        background-color: white;
        padding: 15px;
        border-radius: 10px;
        /* overflow: scroll; */
    }

    .desktop-only {
      display: none!important;
    }

    .mobile-only {
        display: block!important;
    }

    .footer {
        /* height: 100px; */
        width: 90%;
        position: relative;
        bottom: 0;
    }

    .media__lang .mobile-only a{
        color: white;
        border-bottom: 3px solid white;
    }

    .checkbox-label {
        width: 280px;
    }
    .rowtitle_wide {
      display: none;
    }
    .rowtitle_narrow {
      display: block;
    }
    
}

@media (max-width: 640px) {

    .mainFrame {
        width: 100%;

    }

    .header{
        /* height: 100px; */
        height: 65px;
        transition: all 0.6s;
    }

  .header .logo{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .btn-mobile-redirect{
    margin-top: 10px;
    margin-right: 0px;
  }

  .header .logo img {
    /* max-width: 120px; */
    max-width: 96px;
    margin-top: 5px;
    /* margin-left: 30px; */
  }
  /* ratio logo user pic is about 12 to 5 */
  .header .user-pic img {
    /* padding: 2.5em 20px 2.5em; */
    /* max-width: 50px; */
    max-width: 40px;
    position: absolute;
    top: 0;
    right: 0;
    float: none;
    margin-top: 17px;
    /* margin-right: 30px; */
  }

  .mainFrame{
    /* margin-bottom: 50px; */
  }

  .wrapper {
      /* height: 90%; */
      margin-bottom: -51px;
      /* display: block; */
  }

  .footer{
    height: 50px;
    margin:auto;
  }

  .mobile-bg {    
    padding-bottom: 51px;
    overflow: hidden;
  }

  

}

/* upload */
@media (max-width: 440px) {

    .uploader{
        /* width:90%; */
        /* min-width: 286px; */
        text-align: left;
        display: block;
        /* height: 50px; */
        margin: auto;
    
      }
    
      label[for="uploader"] {
        /* width: 60%; */
        padding: 0.6em 0.5em;
        margin: auto;
        background-color: #ffffff;
        color: #222b3f;
        font-size: 16px;
        border: none;
        box-sizing: border-box;
        text-align: center;
        display: block;

      }

    .upload-style:not(.upload-style.remove-director) {
      display: block;
      box-sizing: border-box;
      float: none;
      margin: auto
    }

    .upload-ok {
      display: block;
      box-sizing: border-box;
      float: none;
      margin: auto
    }

    .uploader-up {
        height: 50px;
        width: 104px;
        display: block;
        box-sizing: border-box;
        float: none;
        margin: auto
      }

      .checkbox-label {
        width: 90%;
    }

    .pricing_title_left{
      display:none!important;
    }
    .pricing_title_right{
      display:none!important;
    }

}

@media (max-width: 300px) {
    .media__icons ul li {
    padding: 10px 0;
  }
  .pricing_title_left{
    display:none!important;
  }
  .pricing_title_right{
    display:none!important;
  }
}




/*
base colors:
#222b3f - dark blue
#2f5aaf - normal blue
#3f8789 - darker green
#1ee3de - light teal
#b38fbb - viola
#e0565a - red
#f9ce59 - yellow

Dark green variations
#3f8789 - base darker green
#2B6263 - btn hover

Normal blue variations
#2f5aaf - base normal blue
#213E8E - btn hover

Viola variations
#b38fbb - base viola
#99799F - btn hover
*/



/*== start of code for tooltips ==*/

.position-change {
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .position-change {
    /*position: relative;*/
    z-index: 0;
  }
}


[data-tooltip].tooltip-left:before,
[data-tooltip].tooltip-left:after {
	left: auto;
	right: calc(100% + 5px);
	bottom: 50%;
  }
  
  /* Tooltip */
  [data-tooltip].tooltip-left:before {
    transform: translate(-5px, 50%) scale(0.5);
    }
    [data-tooltip].tooltip-left:hover:before {
    transform: translate(-5px, 50%) scale(1);
    }
    
    /* Arrow */
    [data-tooltip].tooltip-left:after {
    border-width: 5px 0px 5px 5px;
    border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
    transform-origin: left;
    transform: translateY(50%) scaleX(0);
    }
    [data-tooltip].tooltip-left:hover:after {
    transform: translateY(50%) scaleX(1);
    }


[data-tooltip] {
	position: relative;
	z-index: 100;
  }
  
  /* Positioning and visibility settings of the tooltip */
  [data-tooltip]:before,
  [data-tooltip]:after {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	left: 50%;
	bottom: calc(100% + 5px);
	pointer-events: none;
	transition: 0.2s;
	will-change: transform;
  }
  
  /* The actual tooltip with a dynamic width */
  [data-tooltip]:before {
	content: attr(data-tooltip);
  font-family: 'Roboto', sans-serif;
	padding: 10px 18px;
	min-width: 50px;
	max-width: 300px;
	width: max-content;
	width: -moz-max-content;
	border-radius: 6px;
	font-size: 14px;
	background-color: rgba(59, 72, 80, 0.9);
	background-image: linear-gradient(30deg,
	  rgba(59, 72, 80, 0.44),
	  rgba(59, 68, 75, 0.44),
	  rgba(60, 82, 88, 0.44));
	box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
	color: #fff;
	text-align: center;
	white-space: pre-wrap;
	transform: translate(-50%, -5px) scale(0.5);
  }

  .srcFundsTool[data-tooltip]:before {
    max-width: 500px;
    text-align: left;
  }

  @media(max-width: 860px){
    .srcFundsTool[data-tooltip]:before {
      max-width: 300px;
      text-align: left;
    }
  }
  
  /* Tooltip arrow */
  [data-tooltip]:after {
	content: '';
	border-style: solid;
	border-width: 5px 5px 0px 5px;
	border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
	transition-duration: 0s; /* If the mouse leaves the element, 
								the transition effects for the 
								tooltip arrow are "turned off" */
	transform-origin: top;   /* Orientation setting for the
								slide-down effect */
	transform: translateX(-50%) scaleY(0);
  }
  
  /* Tooltip becomes visible at hover */
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after {
	visibility: visible;
	opacity: 1;
  }
  /* Scales from 0.5 to 1 -> grow effect */
  [data-tooltip]:hover:before {
	transition-delay: 0.3s;
	transform: translate(-50%, -5px) scale(1);
  }
  /* Slide down effect only on mouseenter (NOT on mouseleave) */
  [data-tooltip]:hover:after {
	transition-delay: 0.5s; /* Starting after the grow effect */
	transition-duration: 0.2s;
	transform: translateX(-50%) scaleY(1);
  }

  /* LEFT */
  /* Tooltip + arrow */
  [data-tooltip-location="left"]:before,
  [data-tooltip-location="left"]:after {
	left: auto;
	right: calc(100% + 5px);
	bottom: 50%;
  }
  
  /* Tooltip */
  [data-tooltip-location="left"]:before {
	transform: translate(-5px, 50%) scale(0.5);
  }
  [data-tooltip-location="left"]:hover:before {
	transform: translate(-5px, 50%) scale(1);
  }
  
  /* Arrow */
  [data-tooltip-location="left"]:after {
	border-width: 5px 0px 5px 5px;
	border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
	transform-origin: left;
	transform: translateY(50%) scaleX(0);
  }
  [data-tooltip-location="left"]:hover:after {
	transform: translateY(50%) scaleX(1);
  }
  
  
  
  /* RIGHT */
  [data-tooltip-location="right"]:before,
  [data-tooltip-location="right"]:after {
	left: calc(100% + 5px);
	bottom: 50%;
  }
  
  [data-tooltip-location="right"]:before {
	transform: translate(5px, 50%) scale(0.5);
  }
  [data-tooltip-location="right"]:hover:before {
	transform: translate(5px, 50%) scale(1);
  }
  
  [data-tooltip-location="right"]:after {
	border-width: 5px 5px 5px 0px;
	border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
	transform-origin: right;
	transform: translateY(50%) scaleX(0);
  }
  [data-tooltip-location="right"]:hover:after {
	transform: translateY(50%) scaleX(1);
  }
  
  
  
  /* BOTTOM */
  [data-tooltip-location="bottom"]:before,
  [data-tooltip-location="bottom"]:after {
	top: calc(100% + 5px);
	bottom: auto;
  }
  
  [data-tooltip-location="bottom"]:before {
	transform: translate(-50%, 5px) scale(0.5);
  }
  [data-tooltip-location="bottom"]:hover:before {
	transform: translate(-50%, 5px) scale(1);
  }
  
  [data-tooltip-location="bottom"]:after {
	border-width: 0px 5px 5px 5px;
	border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
	transform-origin: bottom;
  }


  /* trasform flex direction*/
  .transform-width {
    flex-direction: row;
  }

  @media(max-width: 441px){
    .transform-width {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }

  .initNotice1{
    font-size: larger; 
    color: #222b3f
  }

  .initNotice2{
    font-size: smaller; 
    color: #222b3f
  }