@font-face {
    font-family: Montserrat;
    src: url("../fonts/montserrat/Montserrat-Thin.otf") format("opentype");
    font-weight: 100;
}

@font-face {
    font-family: Montserrat;
    src: url("../fonts/montserrat/Montserrat-ExtraLight.otf") format("opentype");
    font-weight: 200;
}

@font-face {
    font-family: Montserrat;
    src: url("../fonts/montserrat/Montserrat-Light.otf") format("opentype");
    font-weight: 300;
}

@font-face {
    font-family: Montserrat;
    src: url("../fonts/montserrat/Montserrat-Regular.otf") format("opentype");
    font-weight: 400;
}

@font-face {
    font-family: Montserrat;
    src: url("../fonts/montserrat/Montserrat-Bold.otf") format("opentype");
    font-weight: 700;
}

@font-face {
    font-family: Montserrat;
    src: url("../fonts/montserrat/Montserrat-ExtraBold.otf") format("opentype");
    font-weight: 800;
}

@font-face {
    font-family: Montserrat;
    src: url("../fonts/montserrat/Montserrat-Black.otf") format("opentype");
    font-weight: 900;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url("../fonts/helveticaneue/HelveticaNeueLt.ttf");
    font-weight: 400;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url("../fonts/helveticaneue/HelveticaNeueBold.ttf");
    font-weight: bold;
}

*{
	font-family: 'Helvetica Neue','Helvetica', sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Montserrat';font-weight: bold;
}

p{
	font-size: 1em;
}

a{
  color: inherit;text-decoration: 
}
ul{
  padding: inherit;
}

ul li{
	font-family: 'Helvetica Neue','Helvetica'; margin-bottom: 1em;
}

ul li:before{
	color:#3ACCE1;
}

body{
	width: 100%;
	overflow-x: hidden;
}

button{
	cursor: pointer;
}

.screen{
	height: auto;
	min-height: 100vh;
}

.screen::after{
	content: "";position: absolute;top: 0;bottom: 0;
	background: linear-gradient(to right, rgba(255,255,255,0.9) 10%,rgba(255,255,255,0.7) 15%,rgba(255,255,255,0),
              rgba(255,255,255,0)),url('../img/blue.png'),url('../img/green.png');
	background-repeat: no-repeat;background-position: bottom;background-size: 100%;
	height: auto;min-height: 100vh;width: 100%;padding: 0;margin: 0;pointer-events: none;
}

@media (max-width: 767px){
  .screen::after{
    background: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0)),url('../img/blue.png'),url('../img/green.png');
  background-repeat: no-repeat;background-position: bottom;background-size: 100%;
  }
}

.screen-left{
	padding: 3em 4em;
	z-index: 1;
}

.screen-right{
	background: linear-gradient(#3ACCE1, #5757C9,#5757C9);height: auto;min-height: 100vh;
}


.screen-right .content{
	width: 100%;position: relative;min-height: 100%;
}
.screen-right.smaller .content{
	width: -webkit-calc(100% - 190px);
    width:    -moz-calc(100% - 190px);
    width:         calc(100% - 190px);
}

.header{
	position: relative;
}
.header .nav{
	padding: 3em;
}

.header .nav a{
	color:#fff;text-transform: uppercase;font-size: 0.8em; line-height: 2em;
}

.header .nav a.active{
	background: #5653d1;border-radius: 500px;
}

.btn-menu-side{
	/*position: absolute;right: 0; top: 0;
	width: 50px;height: 50px;padding-top: 3em;
	cursor: pointer;*/
}

.overlay-right{
	position: absolute;top: 0; bottom: 0;right: -15px;content: "";height: auto;
  min-height: 100%;width: 50px;
  background: rgba(0,0,0,0.4);pointer-events: none;
}

.overlay-right.swipe{
  right: 175px;z-index: 3;
}


.side-nav{
	height:auto;min-height: 100%;position: absolute;right: 0px;top: 0px;width: 0px; 
	background: rgba(0,0,0,0.7);
}

.side-nav.open{
	width: 190px;padding: 3em 1em 0.5em 1em;z-index: 3;
}

.side-nav .nav-link{
	color:#fff; border-bottom: 1px solid #fff; padding: 0.2em 0px 0.8em 0px; margin-bottom: 1em;color:#fefefe;
	font-size: 0.8em;font-family: 'Montserrat';
}

.side-nav .nav-link:first-child{
	padding-top: 0px;
}

.pricing{
	padding-bottom: 3em;margin-bottom: 5em;position: relative;z-index: 2;height: auto;overflow: hidden;
}
.pricing .card{
	border: none; background: transparent;border-radius: 0.8em;
	overflow: hidden;
}

.pricing .card-body{
	background: rgba(98, 175, 229,0.8);color:#fff;
}
.pricing .card-footer{
	border-radius: 0;
}
.pricing-box{
	padding: 1em;
}

.pricing-box input{
	width: 100%;
}

.btn-start-pricing{
  cursor: pointer;
}

.faq-right{
  position: relative;z-index: 2;height: auto;overflow: hidden;
}

.footer{
	padding-left: 4em;position: absolute;bottom: 20px;margin-top: 20px;z-index: 1;font-size: 0.8em;
}

.footer a{
	color:#3ACCE1;
}

.register-login.nav-tabs{
	border-bottom: none;
}

.register-login.nav-tabs .nav-item a{
	color: #ddd;font-weight: bold;
}

.register-login.nav-tabs .nav-link:hover {
	border-color:#fff;
}

.register-login.nav-tabs .nav-link.active {
    border:none;
    text-decoration: underline;
    text-underline-position: under
    /*border-bottom:1px solid #4acbe4;*/
}

.register-login.nav-tabs .nav-link.active.login{
	color: #3ACCE1;
}

.register-login.nav-tabs .nav-link.active.register{
	color: #FF9057;
}

.under-form{
	font-size: 0.8em;
}

.text-tosca{
	color:#3ACCE1;
}
.text-orange{
	color:#FF9057;
}

.text-dark-gray{
	color:#555555;
}

.text-black{
  color:#000;
}

.text-gray{
	color: #999;
}

.text-yellow{
	color:#F1F700;
}

.text-white{
	color: #fff;
}
.text-title{
	font-size: 1.5em;
}

.text-highlight{
	font-size: 1.2em;font-family: 'Montserrat';
}

.text-normal{
	font-size: 0.9em;
}

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

.text-light{
	font-weight: lighter;
}

.text-helvetica{
	font-family: 'Helvetica Neue','Helvetica';
}

.text-montserat{
	font-family: "Montserrat"
}

.bg-transparent{
	background: transparent;
}

.bg-tosca{
	background-color: #3ACCE1;
}

.bg-purple{
  background-color: #5757C9;
}

.bg-orange{
	background-color: #FF9057;
}

.bg-blue{
  background: rgba(98, 175, 229,1);
}

.bg-white{
  background: #fff;
}

.ls-3{
  letter-spacing: 3px;
}

.btn-rounded{
	border-radius: 500px;
}

.border-silver{
	border: 1px solid #CCCCCC;
}

.pl-3em{
	padding-left: 3em;
}

.pr-3em{
	padding-right: 3em;
}


.img-icon{
	width: 24px; margin-right: 5px;
}
 a:hover, a:focus{
 	text-decoration: none;color: inherit;
 }

.text-line{
    display: table;
    white-space: nowrap;
}

.text-line:before { right: 1.5%; }
.text-line:after { left: 1.5%; }

.text-line:before, .text-line::after {
      border-top: 1px solid #ccc;
      content: '';
      display: table-cell;
      position: relative;
      top: 0.5em;
      width: 45%;
 }

 /*range slider */
 .barCnt {
  position: relative;
  height: 10px;
  padding: 5px 0px;
}

.barCnt .preBar {
  position: absolute;
  background-color: #F86F28;
  height: 5px;
  line-height: 5px;
  z-index: 200;
  border-radius: 3px;
  padding: 0px;
  margin: 0px;
  pointer-events: none;
}

input[type=range].colorized {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  position: absolute;
  padding: 0px;
  margin: 0px;
  cursor: ew-resize;
  z-index: 100;
  left: 0px
}

input[type=range].colorized::-webkit-slider-runnable-track {
  height: 5px;
  background: #555;
  border: none;
  border-radius: 3px;
}

input[type=range].colorized::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #F86F28;
  margin-top: -4px;
  z-index: 400;
}

input[type=range].colorized:focus {
  outline: none;
}

input[type=range].colorized:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range].colorized::-moz-range-track {
  width: 100%;
  height: 5px;
  background: #555;
  border: none;
  border-radius: 3px;
}

input[type=range].colorized::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #F86F28;
  z-index: 400;
}

input[type=range].colorized::-moz-focus-outer {
  border: 0;
}


.hidden{
  display: none;
}


@media (max-width: 767px) {
  .header{
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 20;
      background-color: #3dc2df;
      border-radius: 2px;
      box-shadow: 0px 1px 10px #999;
  }

  .header .nav{
    padding: 5px 3em
  }

  .header ul li{
    margin-bottom: 0px;
  }


  .screen-left {
      padding-top: 4em;
  }

  .side-nav.open{
    position: fixed;
    z-index: 30;
    width: 240px;
  }

  .screen-right .content{
    padding-top: 1em;
  }
}