/* ------------------------------------------
>>> HOMEPAGE
 ------------------------------------------ */

@media only screen and (min-width: 1200px) {
  .ui.grid.container {
    width: 1140px !important;
  }
  .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child {
    border:none;
  }
  .benefit .text.pdg-left {
    padding-left: 50px !important;
  }
  .benefit .text.pdg-right {
    padding-right: 50px !important;
  }
  .about .text.pdg-left {

  }
}

.muli-font-page p,
.muli-font-page h1,
.muli-font-page h2,
.muli-font-page h3,
.muli-font-page h4,
.muli-font-page h5,
.muli-font-page h6,
.muli-font-page a,
.muli-font-page span,
.muli-font-page section {
  font-family: 'Muli', sans-serif !important;
}
p {
  font-weight: 200;
}
.green-btn {
  border-radius: 5px;
  background-color: #52c2d3 !important; 
  padding: 18px 35px !important;
  letter-spacing: 2px;
}
.green-btn:hover {
  background-color: #6ED9E9 !important; 
}
.green-btn, .green-btn:active {
  background-color: #45B1C2 !important; 
}
.ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover {
  background: none !important;
}
.navbar {
  height: 50px;
  transition:  all 0.3s ease;
  border-bottom: 1px solid rgba(34,36,38,.15) !important;
}
.navbar.active {
  height: 88px;
  transition:  all 0.3s ease;
  border: none !important;
}
.navbar .logo {
  width: 150px;
  transition:  width 0.3s ease;
}
.navbar .grid:first-child {
  padding-left:0px !important;
}
.navbar .grid .right.menu:last-child {
  padding-right:0 !important;
}
.navbar .button {
  margin-top: 10px;
  margin-left: 27px;
  font-size: 9px !important;
  letter-spacing: 0.9px;
  padding: 10px 20px !important;
  transition:  all 0.3s ease;
}
.navbar.active  .button {
  margin-top: 25px;
  margin-left: 27px;
  font-size: 9px;
  letter-spacing: 0.9px;
  font-weight: 900;
  padding: 14px 18px !important;
  transition:  all 0.3s ease;
}
.m-menu-button {

}

.navbar.active .logo {
  width: 230px;
  transition:  width 0.3s ease;
}
.navbar.menu .item:before {
  background: none !important;
}
.navbar .right {
  float: right;
}
.navbar .logo {
  border: none !important;
}
.ui.menu {
  box-shadow: none;
}
.mobile {

}
.mobile .navbar {
  width: 100%;
  padding: 0 20px;
}
.mobile .vertical.menu {
  z-index: 2;
  width: 100%;
  padding: 50px 20px 5px 20px;
  margin-top: 15px !important;
  width: 100%;
  position: fixed;
  left: 0;
  transform: translateY(-100%);
  transition:  transform 0.5s ease-out;
}
.mobile .vertical.menu.active {
  transform: translateY(0%);
  transition:  transform 0.5s ease-in;
}

.mobile .vertical.menu .button {
  margin-top:20px;
  font-size: 9px;
  letter-spacing: 0.9px;
  font-weight: 900;
  padding: 14px 18px !important;
}
.bg-white {
  background-color: #ffffff !important;
}
.bg-white .ui.menu {
  border:none;
}
.nopaddingx {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.nopaddingy {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-hp {
  height: 655px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  /*mix-blend-mode: soft-light;*/
  background-image: linear-gradient(to bottom, rgba(60, 75, 99, 0.02), #212a39);
}
.header-hp .ui.segment {
  position: absolute;
  bottom: 53px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: center;
  box-shadow: none;
}
.page-title .ui.segment h1 {
  font-size: 45px;
  font-weight: 900;
  margin-bottom: 20px;
}
.header-hp .ui.segment h1 {
  color: #ffffff;
}
.header-hp .ui.segment h2 {
  font-size: 25px;
  text-align: center;
  color: #ffffff;
  margin-top: 0;
  width: 751px;
  margin: 0 auto;
}
.header-hp .ui.segment a {
    margin-top: 40px;
}
.blue {
  background-color: #3c4b63;
}
.blue .segment {
  background-color: #3c4b63;
}
.blue h1, .blue h2, .blue h3, .blue h4, .blue h5, .blue h6,
.blue p, .blue span {
  color: #fff !important;
}
.blue p {
  font-size: 20px !important;
}
.segment {
  box-shadow: none !important;
  border: none !important;
}
.sec {
  padding: 80px 0;
}
.sec h2 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 20px;
  margin-top: 0;

}
.sec h3 {
  font-size: 25px;
  font-weight: bold;
  color: #3c4b63;
}
.sec p {
  font-size: 18px;
  line-height: 1.44;
  color: #54647f;
  margin-bottom: 40px;
}
.sec .title p {
  font-size: 20px;
}
.sec img {
  width: 90%;
}
.about {
  position: relative;
  padding-top: 185px;
  padding-bottom: 70px;
  background-repeat: repeat-x;
  background-position: top;
  background-size: 100% auto;
  background-color: #fff !important;
}
.about .bg-white {
  background-color: transparent !important;
}
.about .text h3 {
    margin-top: 80px;
    margin-bottom: 25px;
}
.magic-arrow img {
  margin-top: 80px;
}
.how-it-works {
  position: relative;
  padding-bottom: 0 !important;


}
.how-it-works h2,
.how-it-works p {
  color: #fff;
}
.bg-image {
  width: 100%;
  height: 100%;
  background-color: #3c4b63;
  position: absolute;
  top: 0;
  background-repeat: repeat;
  background-position: top;
  background-size: 100% auto;
}
.how-it-works .newsales_img {
  margin-top: 70px;
}

.item>i.icon {
  margin-top: -4px !important; 
  margin-right: 10px !important;
  margin-left: 20px !important;
  font-size: 22px;
}

.how-it-works span {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.benefit {
  padding: 120px 0;
  background-color: #fff !important;
}
.benefit .grid {
  margin-bottom: 80px;
}
.benefit .text h3 {
    margin-top: 80px;
}


.getstarted {
  padding: 46px 0;
}
.getstarted h2 {
  margin: 0;
}
.testimonial {
    background-color: #fff !important;
}

.testimonial .text {
  font-size: 25px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.28;
  color: #54647f;
  margin-top: 20px;
}
.testimonial span {
  font-size: 13px;
  font-weight: bold;
  line-height: 2;
  color: #54647f;
}
.testimonial-content {
  margin-bottom: 100px;
}
.testimonial .faq-list {
  margin-bottom: 0px !important;
}
.faq-list .item .title i.icon {
  margin-top: -25px;
}
.faq .faq-item {
  border-radius: 4px;
  background-color: #ffffff;
  border: solid 1px #e0e6f2;
  width: 100%;
  float: left;
  padding: 17px;
  font-size: 18px;
  font-weight: 600;
  color: #33a0b1;
  margin-bottom: 10px;
}
.faq .see-more {
  font-size: 18px;
  font-weight: bold;
  color: #3c4b63;
}
.footer {
    background-color: #fff !important;
}
.footer .page .row{
  padding: 100px 0;
}
.footer ul {
  list-style: none;
  margin: 0 auto 35px;
  padding: 0;
  width: 400px;
}
.footer li {
  float: left;
}
.footer a {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.86;
  text-align: center;
  color: #3c4b63;
  margin: 0 20px;
  font-weight: 600;
}
.footer span {
  font-size: 12px;
  color: #3c4b63;
  margin-top: 37px;
  width: 100%;
}
.footer .line {
  border-top: solid 1px #d4dbea;
}

.faq-list {
  margin-bottom: 130px;
}
.faq-list .item {
  border: solid 1px #d4dbea;
  padding: 20px;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 0px 0px 0 rgba(86, 102, 139, 0.21);
  transition: box-shadow 0.2s ease;
}
.faq-list .item.active_ {
  box-shadow: 0 4px 15px 0 rgba(86, 102, 139, 0.21);
  transition: box-shadow 0.2s ease;
  border: solid 1px #fff;
}
.faq-list .item:hover {
  box-shadow: 0 4px 15px 0 rgba(86, 102, 139, 0.21);
  transition: all 0.2s ease;
  border: solid 1px #fff;
}
.faq-list .item .title h4 {
  font-size: 25px;
  font-weight: bold !important;
  color: #33a0b1 !important;
  margin-bottom: 0;
}
.faq-list .item .title i.icon {
  float: right !important;
  font-size: 20px !important;
  font-weight: bold !important;
  color: #33a0b1 !important;
}
.faq-list .item .content {
  font-size: 18px !important;
  line-height: 1.44 !important;
  color: #54647f !important;
}
/* ------------------------------------------
>>> PAGES
 ------------------------------------------ */
.pm-page {
  margin-top: 150px;
  margin-bottom: 100px;
}
.pm-page .page-title h1 {
  margin-bottom: 136px !important;
}
.faq-page {

}
.faq-list .title {
    line-height: 1.2;
}
.terms-page p {
  font-size: 18px;
  line-height: 1.44;
  text-align: justify;
  color: #54647f;
}
.contact-page h2 {
  font-size: 25px;
  font-weight: bold;
  color: #33a0b1;
}
.contact-page h3 {
  font-size: 25px;
  color: #3c4b63;
  font-weight: 400;
  margin-top: 50px;
}
.contact-page .ui.selection.dropdown.phone {
  min-width: 9em !important; 
}
.contact p {
  font-size: 18px;
  line-height: 1.44;
  color: #54647f;
}
.contact .submit {
  width: 200px;
  padding: 17px;
  font-size: 14px;
}
.mag .ui.form textarea {
  padding: 10px;
  font-size: 20px;
  border-radius: 3px;
  border: solid 1px #dfe3eb;
}
.mag .ui.form textarea:focus {
  border: solid 1px #53c1d2;
}
.ui.mag-form {
  padding-left: 20px;
}

@media only screen and (max-width: 1024px) {
  .m-hide {
    display: none;
  }
  .js-burger-btn {
    padding-right:0 !important;
  }
  .m-center {
    text-align: center !important;
  }
  .m-nopaddingx {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .header-hp {
    //height:100%; 
  }
  .header-hp .ui.segment {
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .header-hp .ui.segment h1 {
    font-size: 32px;
  }
  .header-hp .ui.segment h2 {
    width: auto !important;
  }
  .how-it-works .ui.horizontal.list>.item {
    display: block !important; 
  }
  .how-it-works .ui.horizontal.list:not(.celled)>.item  {
    margin-left: 0 !important;
  }
  .how-it-works .ui.centered.grid, .ui.centered.grid>.row, .ui.grid>.centered.row {
    text-align: left;
  }
  .about .text h3,
  .benefit .text h3,
  .testimonial .text {
    margin-top: 20px;
  }
  .testimonial-content {
    margin-bottom: 20px;
  }
  .testimonial span {
    line-height: 1.2;
  }
  .benefit .row {
    margin-bottom: 10px;
  }
  .benefit .row .segment {
    padding-bottom: 0px !important;
  }


  .benefit .grid {
    margin-bottom: 50px;
  }
  
  .sec {
    padding: 60px 0;
  }
  
  
  .footer {
    padding: 40px 0;
  }
  .footer ul {
    width: auto;
  }
  .footer li {
    float: none;
    margin-bottom:10px;
  }
  .faq-list {
    padding: 0 15px;
  }
  
  .faq-list .title h4 {
    margin-right: 70px;
    font-size: 20px !important;

  }
  .magic-arrow {
    height: 250px;
  }
  .magic-arrow img {
    transform: rotate(90deg) scale(0.4);
  }
  .pm-page .page-title h1 {
    margin-bottom: 50px !important;
  }
  .contact .mag-form {
    padding-left: 0;
  }
  .contact .segment {
    padding: 0 !important;
  }
  .contact-page h3 {
    margin-top: 0px;
  }
  .m-add-mrg-btm {
    margin-bottom:70px;
  }
}

.ui.button.mag-button {
  font-family: 'Muli';
}

/*INPUT*/
.ui.form.mag-form input:not([type]), 
.ui.form.mag-form input[type=text], 
.ui.form.mag-form input[type=email], 
.ui.form.mag-form input[type=search], 
.ui.form.mag-form input[type=password], 
.ui.form.mag-form input[type=date], 
.ui.form.mag-form input[type=datetime-local], 
.ui.form.mag-form input[type=tel], 
.ui.form.mag-form input[type=time], 
.ui.form.mag-form input[type=file], 
.ui.form.mag-form input[type=url], 
.ui.form.mag-form input[type=number], 
.ui.form.mag-form textarea,
.ui.form.mag-form input:not([type]):-webkit-autofill, 
.ui.form.mag-form input[type=text]:-webkit-autofill, 
.ui.form.mag-form input[type=email]:-webkit-autofill, 
.ui.form.mag-form input[type=search]:-webkit-autofill, 
.ui.form.mag-form input[type=password]:-webkit-autofill, 
.ui.form.mag-form input[type=date]:-webkit-autofill, 
.ui.form.mag-form input[type=datetime-local]:-webkit-autofill, 
.ui.form.mag-form input[type=tel]:-webkit-autofill, 
.ui.form.mag-form input[type=time]:-webkit-autofill, 
.ui.form.mag-form input[type=file]:-webkit-autofill, 
.ui.form.mag-form input[type=url]:-webkit-autofill, 
.ui.form.mag-form input[type=number]:-webkit-autofill, 
.ui.form.mag-form textarea:-webkit-autofill {
  border-bottom: solid 1px #dfe3eb !important;
}

.ui.form.mag-form input:not([type]):focus, 
.ui.form.mag-form input[type=text]:focus, 
.ui.form.mag-form input[type=email]:focus, 
.ui.form.mag-form input[type=search]:focus, 
.ui.form.mag-form input[type=password]:focus, 
.ui.form.mag-form input[type=date]:focus, 
.ui.form.mag-form input[type=datetime-local]:focus, 
.ui.form.mag-form input[type=tel]:focus, 
.ui.form.mag-form input[type=time]:focus, 
.ui.form.mag-form input[type=file]:focus, 
.ui.form.mag-form input[type=url]:focus, 
.ui.form.mag-form input[type=number]:focus, 
.ui.form.mag-form textarea:focus,
.ui.form.mag-form input:not([type]):focus:-webkit-autofill, 
.ui.form.mag-form input[type=text]:focus:-webkit-autofill, 
.ui.form.mag-form input[type=email]:focus:-webkit-autofill, 
.ui.form.mag-form input[type=search]:focus:-webkit-autofill, 
.ui.form.mag-form input[type=password]:focus:-webkit-autofill, 
.ui.form.mag-form input[type=date]:focus:-webkit-autofill, 
.ui.form.mag-form input[type=datetime-local]:focus:-webkit-autofill, 
.ui.form.mag-form input[type=tel]:focus:-webkit-autofill, 
.ui.form.mag-form input[type=time]:focus:-webkit-autofill, 
.ui.form.mag-form input[type=file]:focus:-webkit-autofill, 
.ui.form.mag-form input[type=url]:focus:-webkit-autofill, 
.ui.form.mag-form input[type=number]:focus:-webkit-autofill, 
.ui.form.mag-form textarea:focus:-webkit-autofill {
  border-bottom: solid 1px #53c1d2 !important;
}

.ui.form.mag-form .ui.search.selection.dropdown>input.search {
  padding-bottom: 9px;
}
/**/

/*
DROPDOWN
*/
.ui.form.mag-form .ui.selection.dropdown {
  border-bottom: solid 1px #dfe3eb;
}

.ui.form.mag-form .ui.selection.active.dropdown {
  border-bottom: solid 1px #53c1d2;
}

.ui.form.mag-form .ui.selection.dropdown {
  height: 43px;
}
/**/