/*
 *	Hippo Page Custom CSS
 */

body{
	color: #555F61 !important;
}

h1{
  margin-top: 0 !important;
}

.blue-line{
	border-top: 1px solid #0086A1;
}

.grey{
	color: #555F61 !important;
}

p strong{
	color: #0086A1;
}

.anchor{
  display: block;
  position: relative;
  top: -100px;
  visibility: hidden;
}

.bigger{
	font-size: 1.3em !important;
}
.big{
	font-size: 2em !important;
}
.medium-big{
  font-size: 2.8em !important;
}
.super-big{
	font-size: 3.5em !important;
}
.too-big{
	font-size: 4.5em !important;
}

.right-border-white{
	border-right: 1px solid white;
}

.font-weight-300{
	font-weight: 300;
}
.font-weight-500{
	font-weight: 500;
}
.font-weight-700{
	font-weight: 700;
}
.font-weight-900{
	font-weight: 900;
}

section hr{
  border-color: #0086A1;
}

.text-white{
  color: white !important;
}

.grey-overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.55);
}

.vertical-align-img{
  margin-top: 0;
}

.homeImg1, .homeImg2{
  margin-top: 45px  !important;
}
/* PRICING */
.pricing-title{
	font-weight: 900 !important;
}
.pricing-price, .pricing-saving {
	font-size: 3.5em !important;
	font-weight: 900 !important;
}
.pricing-price-small{
	font-size: 2em !important;
	font-weight: 900 !important;
}
.pricing-plan img{
	width: 50px;
}

.plans-price{
	font-size: 1.6em !important;
}
.plans-price span{
	font-weight: 900;
}

h2.subtitle{
	font-size: 2em;
}

.features h3{
	font-size: 2.5em;
	text-transform: uppercase;
	color: #0086A1;
}

a{
	transition: all 0.25s ease;
}

a.or-sign-up{
	text-decoration: none;
	color: #555F61;
	transition: all 0.25s ease;
}

a.or-sign-up:hover{
	text-decoration: none;
	color: #0086A1;
}
.top-image{
	background-image: url('../img/_new/top1.jpg');
	background-position: 0 41%;
	background-size: cover;
	padding-bottom: 60px;
  height: auto;
  color: white !important;
}

.top-image-features{
	background-image: url('../img/_new/top2.jpg');
	background-position: 0 70%;
	height: auto;
}

.top-image-how-to{
	background-image: url('../img/_new/top2.jpg');
	background-position: 0 54%;
	height: auto;
}

.top-image-pricing{
	background-image: url('../img/_new_v2/howToBg.jpg');
	background-position: 0 45%;
	height: auto;
}

.top-image-referral{
	background-image: url('../img/_new/top5.jpg');
	background-position: 0 0%;
	height: auto;
}

.top-image-contact{
	background-image: url('../img/_new_v2/contactBg.jpg');
	background-position: 0 80%;
	height: auto;
}

section.homeVacancies{
  background-image: url('../img/_new_v2/homeBg1Wide.png') !important;
  background-position: 80% 25%;
  background-size: cover;
  position: relative;
}
section.referralCallToAction1{
  background-image: url('../img/_new_v2/referralBg1.jpg') !important;
  background-position: 0% 40% !important;
  background-size: cover;
  position: relative;
}
section.referralWhatsapp{
  background-image: url('../img/_new_v2/referralWhatsapp.png') !important;
  background-position: 17% 40% !important;
  background-size: cover;
  position: relative;
}
section.homeAttracting{
  background-image: url('../img/_new_v2/homeAttracting.jpg') !important;
  background-position: 0% 0% !important;
  background-size: cover;
  position: relative;
}


.top-image .container{
	color: white;
}

.top-image h2{
	font-size: 4.5em;
	margin-top: 250px;
	line-height: 0.9em !important;
}

.top-image p{
	font-size: 2em;
	line-height: 1.2em;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 30px;
	margin-bottom: 48px;
}

.top-image a{
	font-size: 1.5em;
	font-weight: 700;
	text-transform: none;
	color: white;
	text-decoration: none;
}
.top-image a:hover{
	color: #0086A1;
}

.navbar-default .navbar-brand{
	background: transparent !important;
}

.navbar-default .navbar-brand > img{
	width: 255px;
}
.navbar-brand p.subtitle{
	margin-top: 5px;
	font-size: 14px;
	text-transform: uppercase;
}
.navbar-default .navbar-brand:hover{
	background: transparent;
}

.nav > li > a {
	padding: 0 10px 15px 10px;
	transition: all 0.25s ease;
}

.nav > li > a.active {
	color: #0086A1 !important; 
}

/*stanalone bullets*/
.bullet-icon{
	height: 35px;
}
.bullet-title{
	margin-top: 5px;
	position: absolute;
	margin-left: 25px;
}

.bullet-point{
	margin-top: 25px;
	
	text-align: left;
	 list-style: none;
    padding-left: 0;
}

.bullet-point li{
	position: relative;
  padding-left: 100px;
	margin-top: 45px;
}
.bullet-point li:before{
	content: '';
	width: 74px;
	height: 55px;
	position: absolute;
	background-image: url('../img/_new/hippoPoint.png');
	background-size: cover;
	background-position: center;
	left: 0;
	top: 30px;
	transform: translateY(-50%);
}

.bullet-point.white li:before{
	background-image: url('../img/_new/hippoPointWhite.png');
}

.bullet-point.centered li:before{
	top: 50%;
}
.bullet-point.centerBlock{
  display: table;
  top: 25%;
  margin-top: 25%;
}
.bullet-point.centerBlock li{
  margin-top: 0;
}

.bullet-point.edge li:before {
  top: 30px;
}

.bullet-point h3{
	text-transform: uppercase;
	margin-top:0;
	margin-bottom: 0;
	font-size: 2.5em;
	line-height: 0.9em;
	color: #0086A1;
}

.free-trial-button{
  background-color: #5DAE76;
  padding-bottom: 5px !important;
  color: white !important;
}

.bullet-point.nocaps h3{
	text-transform: none !important;
}

.bullet-point.light h3{
  font-weight: 500;
  line-height: 1em;
}

.bullet-point.black h3{
	color: #555F61;
}

.bullet-point p{
	font-size: 2em;
	line-height: 1em;
	margin-top: 5px;
	padding-right: 60px;
}

.bullet-point.referral p{
	font-size: 2em;
	line-height: 1em;
	margin-top: 5px;
	padding-right: 35px;
}

.bullet-point.prices li{
	margin-top: 60px;
}

.bullet-icon img{
	width: 60px;
	margin-top: 4px;
	text-align: left;
}

.bullet-text{
	text-align: left;
}
.bullet-text p{
	color: #0086A1;
	font-size: 1.3em;
	margin-top: 5px;
}
.bullet-text h3{
	text-transform: uppercase;
	margin-top:0;
	margin-bottom: 0;
}

.flex-center{
  display: flex;
  align-content: center;
}
.flex-center-self{
  align-self: center;
}
.flex-end-self{
  align-self: flex-end;
}

/* TITLE WITH TITLE LINE */
.title-line{
	border-top: 1px solid #0086A1;
	position: relative;
	margin-left: -1000%;
}
.title-line.white{
	border-top: 1px solid white;
}

.title-with-line{
	display: table;
}
.title-with-line h1{
	margin-top: 20px;
}

.bulletsTitle{
  text-transform: capitalize;
  font-size: 2.5em;
}

.conceptDesc p{
  font-size: 2em;
  line-height: 1em;
  padding-right: 20%;
}

/* FEATURES */

.features-side-img{
	margin-top: 15px !important;
}

/* TRY IT SECTION */
section.try-it{
	background-image: url('../img/_new/try-it-edited2.jpg');
	background-position: center;
	background-size: cover;
}

section.try-it p{
	font-size: 1.3em;
}

.try-it-text-block{
	padding-right: 76px;
}

/*  FOOTER */
address, .contact-button{
	text-align: left;
}

a{
	color: #0086A1;
	font-weight: 500;
}

.white-text p, .white-text h1, .white-text h2, .white-text h3, .white-text h4, .white-text h5, .white-text h6, .white-text a, .white-text small{
  color: white !important;
}

.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse{
	max-height: 540px !important;
}
p.white-text {
	color: white;
}

.white-text{
	color: white !important;
}

.white-text strong{
	color: white !important;
}

.pricing-plan.selected > li{
	font-size: 1.3em;
}

section p{
	color: #555F61;
	font-size: 1.1em;
}

.page-preview{
	display: inline-block;
	position: relative;
	cursor: pointer;
	text-decoration: none;
}
.page-preview:hover{
	text-decoration: none;
}
.page-preview h4{
	text-transform: uppercase;
	margin-bottom: 0;
}
.page-preview:hover .page-preview-overlay{
	opacity: 1;
}
.page-preview-overlay{
  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	opacity: 0;
	transition: all 0.25s ease;
}

.page-preview-overlay h2{
  width: 100%;
  color: white;
	position: absolute;
	top:50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	text-align: center;
	text-transform: uppercase;
}

.btn{
	border-radius: 0;
	font-weight: 700;
	font-size: 1.6em;
}
.btn-outline{
  background-color: transparent;
  border: 1px solid #0086A1;
  font-weight: 700 !important;
  padding: 10px 20px;
}
.btn-default.btn-outline{
	color: white;
}
.btn-primary.btn-outline{
	color: #0086A1;
}
.btn-default.btn-outline:hover, .btn-default.btn-outline:active, .btn-default.btn-outline:focus{
	border-color: navy;
  background-color: transparent;
  color: #555F61;
}
.btn:hover{
	transition: all 0.25s ease;
}

.btn.green{
  background-color: #96a126 !important;
  color: white;
  border-color: #96a126 !important;
}
.btn.green:hover{
  color: white;
}

.btn.orange{
  background-color: #E94E1B !important;
  color: white;
  border-color: #E94E1B !important;
}
.btn.orange:hover{
  color: #E94E1B !important;
  background-color: white !important;
}

.btn.white{
  background-color: white !important;
  color: #0086A1 !important;
  border-color: #0086A1 !important;
}

.btn.btn-primary:hover{
  color: #0086A1 !important;
  background-color: white !important;
  border-color: #0086A1 !important;
}

.btn-underline{
  border-bottom: 2px solid #0086A1;
  font-size: 1.4em;
  padding-bottom: 5px;
  text-decoration: none;
  font-weight: 700;
}

.btn-underline:hover{
  text-decoration: none;
}

.features-block small{
	color: #555F61;
}

.features-block h1{
	color: #0086A1;
}

.features-block{
	margin-top: 30px;
}

.blue{
	color: #0086A1;
}

small.blue{
	color: #0086A1;
}

.blue-bg{
	background-color: #0086A1;
	color: white !important;
}

.form-control{
	border-radius: 0 !important;
}

.bigShadow{
	box-shadow:  15px 15px 50px rgba(0,0,0,0.25), 0 0px 50px rgba(0,0,0,0.22);
}

.numberUnderlay{
	padding: 25px;
	border-radius:  1000px;
	background-color: rgba(0,0,0,0.02);
	width: 25vw;
	height:  25vw;
	position: absolute;
	left: 25%;
	top: 0;
	z-index: -1;
}

.numberUnderlay .number{
	font-size: 15em;
	text-align:  center;
	color:  rgba(0,0,0,0.05);
}

.navbar-nav >li{padding-top:20px;}
.navbar-brand{margin-top:15px;}

.contact-p{
	font-size: 2.2em;
}

/* PRICES */
.pricesBlock{
  border: 1px solid #0086A1 !important;
  padding: 30px 80px;
}
.pricesBlock h2{
  font-size: 2.5em;
  color: #0086A1;
  padding-top: 35px;
}
.pricesBlock p.price{
  font-size: 3em;
  font-weight: 700;
  margin-bottom:0;
}
.pricesBlock .pricesDesc{
  font-size: 2.2em;
}

/* MOBILE */
@media(max-width: 668px){
  .flex-center{
    display: block;
  }
	.bigger{
		font-size: 0.8em;
	}
	.big{
		font-size: 1.5em;
	}
	.super-big{
		font-size: 3em;
	}
	.too-big{
		font-size: 4em;
	}
	
	h2{
		font-size: 1.7em;
	}
	
	.navbar-collapse{
		margin-left: -30px !important;
		margin-right: -20px !important;
		background-color: white !important;
	}
	
	.navbar-default{
		background-color: transparent;
	}
	.navbar-default .navbar-toggle .icon-bar{
		background-color: white;
	}
	
	.navbar-default .navbar-brand > img{
		width: 170px !important;
	}
	.navbar-brand p.subtitle{
		display: none;
	}
	.navbar-wrapper .navbar{
		border: none;
	}
	.navbar-default .navbar-toggle{
		border: none;
	}
	.navbar-toggle{
		margin-top: 24px;
  }
  
  .navbar-scroll .navbar-nav>li>a {
    padding: 10px 10px;
  }
  
  .navbar-brand p.subtitle{
    font-size: 3.5vw;
  }

	.top-image{
		background-position: 65% 50%;
	}
	
	.top-image h2{
		font-size: 3.2em !important;
		margin-top: 40% !important;
	}
	.top-image p{
		margin-bottom: 10% !important;
		font-size: 1.7em !important;
	}
	
	h1{
    font-size: 2.5em;
    margin-top: 0 !important;
	}
	h1.subtitle{
		font-size: 2.5em;
	}
	
	/*general bullets*/
	.bullet-title{
		margin-top: 3px !important;
		margin-left: 15px !important;
	}
	.bullet-icon{
		height: 25px !important;
	}
	
	/* home bullet points */
	.bullet-point h3{
		font-size: 2.1em !important;
	}	
	.bullet-point p{
		font-size: 1.5em !important;
		padding-right: 40px !important;
	}
	
	.pricing-plan.selected {
		border: none;
		margin-bottom: 40px;
	}
	
	.features-side-img{
		margin-top: 0 !important;
	}
	
	section.try-it{
		background-image: url('../img/_new/try-it-dark.jpg') !important;
		background-position: 78% 50% !important;
	}

	section.try-it p{
		font-size: 1.3em;
		color: white !important;
	}
	
	section.try-it h1{
		color: white !important;
	}
	.try-it-text-block{
		padding-right: 42px !important;
	}
	
	address, .contact-button, .about-qsxl{
		text-align: left !important;
	}
	.about-qsxl{
		padding-right: 0 !important;
		margin-top: 20px !important;
	}
	.vertical-align-img{
    margin-top: 0 !important;
  }

  .homeImg1, .homeImg2{
    margin-top: 0px  !important;
  }

  section.homeVacancies {
    background-position: 40% 24% !important;
  }
  section.referralWhatsapp {
    background-position: 40% 40% !important;
  }

  .conceptDesc{
    text-align: center;
  }
  .conceptDesc p{
    padding-right: 0;
  }
  .conceptTitle{
    text-align: center;
  }

  .pricesBlock {
    padding: 30px 10px;
  }
}

@media (min-width: 1224px){

  .homeVacancies {
    background-position: 47% 25% !important;
  }
}

@media (min-width: 1224px) and (max-width: 1440px){

  .top-image{
    height: 100vh;
  }

  .top-image h2{
    margin-top: 30vh;
    font-size: 8vh;
  }
  .top-image p{
    font-size: 4vh;
    margin-bottom: 8vh;
  }
}