@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

@import url('https://fonts.cdnfonts.com/css/switzer');

@font-face {
	font-family: 'kuro';
	src: url('../fonts/kuro-medium-webfont.woff') format('woff'),
	 url('../fonts/kuro-medium-webfont.ttf') format('truetype'),
	 url('../fonts/kuro-medium-webfont.svg#roboto_slab') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Nohemi";
	src: url('../fonts/Nohemi-Medium.woff2') format('woff2');
	font-style: normal;
    font-weight: 500;
    text-rendering: optimizeLegibility;
}

html, body {
	font-family: 'Open Sans', sans-serif;
}

* {
/*	outline: 1px solid #ff000070 !important; */
  }

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  height: 100%;
}

body {
	height: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  /* Set the fixed height of the footer here */
  height: 60px;

  &.index-footer {
	position: inherit;
	.img {
		position: relative;
		img {
			position: absolute;
			margin-left: calc(50% - 400px);
			bottom: -30px; left: 0;
		}
	}
  }
}

.nohemi {
	font-family: "Nohemi";
}

h1, h2, h3 {
	font-family: 'Nohemi', sans-serif;
	margin: 0 0 15px;
}

h1.form-signin-heading {
	font-size: 48px;
	color: #626262;
}

.gray { color: #626262; }
.gray2 { color: #909090; }
.navyblue { color: #183959; }
.green { color: #97C009; }

.black1 { color: #232020; }

.leftpad { padding-left: 40px !important; }

.fileinput.input-group { display: inline-table; margin-bottom: 0; }

.form-filter-url, .form-filter-file { min-width: 500px; }

hr {
	margin-top: 30px;
	margin-bottom: 30px;
	border-top: 1px solid #ddd;
}

ul.spad { padding-left: 20px; }

.btn {
	border-radius: 16px;
	padding: 16px 20px;
	font-size: 18px;
	font-weight: 600;

	&.small {
		border-radius: 12px;
		font-size: 16px;
		padding: 8px 16px;
	}

	&.btn1 {
		color: white;
		background-color: #232020;
		border: 2px solid #232020;
		&:hover {
			background-color: #181515;
		}
	}

	&.btn2 {
		border: 2px solid rgba(35, 32, 32, 0.06) ;
		&:hover {
			border-color: transparent;
			background-color: rgba(35, 32, 32, 0.06);
		}
	}
}

/*  INDEX   */

.index-container {

	.main-zone-ruler {
		display: none;
		width: 1170px;
		height: 3000px;
		left: 50%;
		margin-left: -585px;
		background-color: #f4f8e6;
		z-index: -1; position: fixed
	}

	.container {
		padding-left: 0;
		padding-right: 0;
	}

	font-family: "Switzer", sans-serif;
	font-weight: 400;
	color: #786D67;
	font-size: 18px;
	line-height: 175%;

	.pt-120 {
		padding-top: 120px;
	}

	h2, h3 {
		font-family: "Nohemi", sans-serif;
		color: #232020;
	}

	h2 {
		font-size: 56px;
	}

	h3 {
		font-size: 48px;
	}

	section {
		position: relative;
		z-index: 1;
	}

	.bullet {
		display: inline-block;
		height: 32px;
		line-height: 28px;
		border-radius: 16px;
		padding: 2px 10px;
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 24px;
		&.white {
			color: #191501;
			background-color: #FFFFFF;
		}
		&.orange {
			color: #FF6200;
			background-color: #FF62001A;
		}
	}

	.panel {
		border-radius: 40px;
 		/* override bootstrap */
		box-shadow: none;
		border: none;
	}

	.screenshot {
		border-radius: 40px;
		background-color: transparent;
		width: 100%;
		padding-bottom: 53.5%;
		position: relative;
		border: 11px solid #232020;
		border-radius: 32px;

		&::after {
			content: '';
			position: absolute;
			width: 200px;
			height: 260px;
			left: -150px;
			bottom: 50px;
			background: transparent url('../img/index/smile5.png') left top no-repeat;
		}

		&::before {
			content: '';
			position: absolute;
			width: 288px;
			height: 264px;
			top: -120px;
			right: -115px;
			z-index: -1;
			background: transparent url('../img/index/smile2.png') left top no-repeat;
		}

		> img {
			width: 100%;
			position: absolute;
			z-index: -1;
			top: 0; left: 0;
			border-radius: 20px;
		}

	}

	section.padded {
		padding-top: 120px;
		padding-bottom: 120px;
	}

	.section-1 {
		padding: 0 64px 64px;
		.panel {
			height: 716px;
			background-color: #FAF8F7;
			padding-top: 64px;
			padding-left: 96px;
			padding-right: 0px;
			display: flex;
			flex-direction: row;
			overflow: hidden;

			.text {
			    padding-top: 48px;
				flex-basis: 40%;
			}
			.background {
				flex-basis: 60%;
				background-image: url('../img/index/bg-smile1.png');
				background-position: right bottom;
				background-size: contain;
				background-repeat: no-repeat;
			}

			h2 { margin-bottom: 34px; }

			.btn { margin-top: 32px;}
		}
	}

	.section-2 {
		padding-top: 48px;
		text-align: center;

		img {
			position: absolute;
			left: -100px;
		}
	}

	.section-3 {
		position: relative;
		overflow: hidden;
		.container {
			position: relative;
			z-index: 3;
		}
		h4 {
			font-weight: bold;
			margin-top: 16px;
			margin-bottom: 8px;
		}
		.small {
			font-size: 16px;
		}
		.screenshot {
			margin-top: 54px;
			margin-bottom: 54px;
		}

		.circle {
			width: 903px;
			height: 903px;
			border-radius: 903px;
			border: 120px solid #FFE97A;
			position: absolute;
			left: 50%;
			top: 120px;
			z-index: 1;
			margin-left: 160px;
		}

	}


	.section-4 {
		h3 { margin-bottom: 16px; }
		.text { margin-bottom: 24px; }
		ul { padding: 0; }
		li {
			color: #FF6200;
			list-style-type: none;
			margin-bottom: 1rem;
			padding-left: 32px;
			background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNoZWNrIj4KPHBhdGggaWQ9Ikljb24iIGQ9Ik0yMCA2LjE3MDY1TDkgMTcuMTcwN0w0IDEyLjE3MDciIHN0cm9rZT0iI0ZGNjIwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8L3N2Zz4K) no-repeat left 4px;
		}

	}


	.section-5 {
		overflow: hidden;
		.container {
			z-index: 1;
			position: relative;
		}

		.text {
			text-align:center;
			padding-bottom: 80px;
			h3 { margin-bottom: 24px; }
		}

		.cards {
			display: flex;
			flex-direction: row;
		}

		.panel {
			display: flex;
			z-index: 1;
			position: relative;
			width: calc((100% - 64px) / 2);
			color: #232020;

			.content {
				padding: 56px;
				border-radius: 32px;
				z-index: 3;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
			}

			h4 {
				font-family: "Nohemi", sans-serif;
				font-size: 40px;
				margin-bottom: 32px;
			}

			& + & {
				margin-left: 64px;
			}

			.btn-holder {
				justify-content: flex-end;
				flex-direction: column;
				position: relative;
			}

			.btn {
				width: 100%;
			}

			.free {
				position: relative;
				height: 80px;
				img {
					position: absolute;
					height: 100px;
					top: -20px;
					right: -40px;
				}
			}

			ul { padding: 0; }
			li {
				list-style-type: none;
				margin-bottom: 1rem;
				padding-left: 32px;
				background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDYuMTcwOUw5IDE3LjE3MDlMNCAxMi4xNzA5IiBzdHJva2U9IiMyMzIwMjAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=) no-repeat left 4px;
			}
		}

		.smile3, .smile4 {
			position: absolute;
			z-index: -1;
		}

		.smile3 {
			width: 261px;
			height: 253px;
			left: -150px;
			bottom: -90px;
			background: transparent url('../img/index/smile3.png') left top no-repeat;
		}

		.smile4 {
			width: 303px;
			height: 304px;
			right: -165px;
			bottom: 270px;
			background: transparent url('../img/index/smile4.png') left top no-repeat;
		}
	}

	.section-6 {
		padding-bottom: 120px;
		h3 {
			font-size: 40px;
			margin-bottom: 16px;
		}

		.panel {
			position: relative;
			padding: 60px;
			min-height: 448px;
		}

		.btn { margin-top: 24px; }

		.background {
			position: absolute;
			right: -32px;
			bottom: 0px;
		}
	}

	.section-7 {
		h3 {
			font-size: 40px;
		}
		font-size: 16px;
	}

	.section-footer {
		padding: 64px 64px 32px;
		.panel {
			background-color: #FAF8F7;
			padding: 64px;
		}
		a {
			color: #786D67;
		}
		img.logo {
			width: 150px;
		}
		.small {
			color: #786D67;
			font-size: 16px;
			margin-top: 20px;
			margin-bottom: 20px;
		}
		div.email {
			font-size: 16px;
			color: #232020;
			text-decoration: underline;
			> span:nth-child(2) {
				display: none;
			}
		}
	}
}

@media (max-width: 991px) {

	.index-container {

		min-width: 375px;

		font-size: 16px;

		.btn {
			padding: 12px 20px;
		}

		.main-zone-ruler {
			width: 311px;
			margin-left: -155px;
		}


		h2 {
			font-size: 38px;
		}

		h3 {
			font-size: 32px;
		}

		.panel {
			border-radius: 32px;
		}

		.container {
			padding-left: 32px;
			padding-right: 32px;
		}

		section.padded {
			padding-top: 64px;
			padding-bottom: 64px;
		}

		.section-1 {
			padding: 0 10px;
			.panel {
				height: auto;
				padding: 37px 0 0;
				flex-direction: column-reverse;
				.background {
					width: 100%;
					flex-basis: 380px;
					background-image: url('../img/index/bg-smile1_sm.png');
					background-size: auto;
				}
				.text {
					padding: 0 32px 64px;
					.btn {
						width: 100%;
					}

				}
			}
		}

		.section-2 {
			text-align: left;
			padding-top: 0px!important;
			margin-top: 80px;
			img {
				width: 110px;
				left: -30px;
				top: -140px;
			}
		}

		.section-3 {
			overflow: hidden;

			.btn {
				width: 100%;
			}

			.col-xs-12:not(:first-child) {
				margin-top: 40px;
			}

			.screenshot {
				width: 170%;
				padding-bottom: 92%;
				margin-top: 70px;
				border-width: 6px;
				margin-bottom: 64px;

				&::before {
					background-image: url('../img/index/smile2_sm.png');
					left: -32px;
					top: -52px;
				}

				&::after {
					background-image: url('../img/index/smile5_sm.png');
					width: 132px;
					height: 159px;
					left: 36%;
					top: auto;
					bottom: -90px;
				}
			}

			.circle { display: none; }

		}

		.section-4 {
			.col-xs-12:not(:first-child) {
				margin-top: 40px;
			}
		}

		.section-5 {
			.text {
				text-align: left;
				padding-bottom: 64px;
				h3 { margin-bottom: 16px; }
			}

			.cards {
				flex-direction: column;
			}

			.panel {
				width: 100%;
				.content {
					padding: 32px;
				}
				.free {
					height: 32px;
					img {
						height: 75px;
						top: -35px;
						right: -55px;
						transform: rotate(5deg);
					}
				}
				& + & {
					margin-left: 0;
					margin-top: 80px;
					.btn-holder {
						margin-top: 32px;
					}
				}
				h4 {
					font-size: 28px;
				}
				.bullet {
					margin-bottom: 16px;
				}
			}

			.smile3  {
				top: -45px;
				left: auto;
				right: -30px;
				width: 105px;
				height: 114px;
				z-index: 4;
				background-image: url('../img/index/smile3_sm.png');
			}

			.smile4   {
				top: -60px;
				left: -30px;
				background-image: url('../img/index/smile4_sm.png');
			}
		}

		.section-6 {
			padding: 0 10px;
			h3 { font-size: 28px; }
			.panel {
				padding-bottom: 96px;
				overflow: hidden;
			}
			.background {
				height: 215px;
			}
		}

		.section-7 {
			h3 {
				font-size: 28px;
				margin-bottom: 16px;
			}
			margin-bottom: 64px;
		}

		.section-footer {
			padding: 0 10px;

			.links {
				margin-top: 24px;
			}
		}

	}
}


.bg-yellow {
	background-color: #FFDC30;
	color: #3B3204;
}

.bg-white {
	background-color: white;
}

.bg-grey {
	background-color: #FAF8F7;
}


/* LOGIN */

.login-container {
    padding-top: 32px;
    padding-bottom: 32px;
    min-height: 100%;

	h1 {
		font-size: 40px;
		margin-bottom: 8px;
	}

	img.logo {
		width: 150px;
		margin: 5px 0 92px -23px;
	}

	.btn {
		margin-top: 32px;
	}
}

.form-signin {
  max-width: 480px;
  padding: 15px;
  margin: 0 auto;

	font-size: 16px;

  input[type=text], input[type=email], input[type=password] {
	border-radius: 12px;
	border: 2px solid rgba(35, 32, 32, 0.06);
	background-color: #FAF8F7;
	box-shadow: none;
  }

  .form-group {
	margin-bottom: 24px;
  }

  .form-group:first-of-type {
	margin-top: 32px;
  }
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
  margin-left: 20px;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 16px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}

/* NAVBAR & HEADER */

.navbar {
	margin-bottom: 0 !important;
	background: #183959;
	border-bottom: none;

	h1 { margin: 0; }

	.navbar-brand {
		height: 40px;
		padding: 4px 0 0;
	}

	.container {
		> div {
			display: flex;
			width: 100%;
			justify-content: space-between;
		}
	}

	img.logo {
		width: 150px;
	}

	&.navbar-main {
		background: transparent;
		padding-top: 32px;
		padding-bottom: 32px;
		a:not(.btn1) { color: #232020; }

		.btn.small {
			line-height: 20px;
		}

		.navbar-nav {
			margin: 0 -15px 0 0;
		}

		.navbar-right {
			li { display: inline-block; }
			li + li { margin-left: 12px; }
		}

	}

	.navbar-center {
		li {
			a {
				padding: 0;
				line-height: 40px;
				&:active, &.active {
					font-weight: bold;
				}
			}
			& + & {
				margin-left: 40px;
			}
		}
	}



}

@media (max-width: 991px) {
	.navbar.navbar-main {
		padding-top: 16px;
		padding-bottom: 24px;
		.navbar-nav {
			margin: 0;
		}
	}

	.login-container {
		padding-top: 16px;
		img.logo {
			margin-bottom: 32px;
			margin-left: 0;
		}
	}

	.footer.index-footer img {
		display: none;
	}
}

@media (max-width: 550px) {
	.hidden-xxs	{
		display: none!important;
	}
}

.navbar-nav > li > a {
	color: white;
	font-size: 16px;
}


.nav > li > a:focus,
.nav > li > a:hover,
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover
 {
	background-color: rgba(255,255,255,.10);
}

header {
	background: #FCF8E2 url('../img/header_bg.jpg') right top no-repeat;
	height: 150px;
	width: 100%;
	margin: 0 auto 50px;
	display: table;
}

header .container {
	height: 150px;
	margin: 0 auto;
	display: table;
}

header .container > div {
	display: table-cell;
	vertical-align: middle;
}

header h1, header h2, header h3 {
	margin-bottom: 10px;
	text-shadow: 2px 2px 1px #FCF8E2, -1px -1px 1px #FCF8E2;
}

header h2, header h3 {
	font-size: 24px;
	color: #97C009;
}

header h1, header h2.large {
	font-size: 36px;
	color: #000000;
}

header h1.small {
	font-size: 24px;
	color: #626262;
}


/* TABLES */

tr.disabled { color: #999999; }
tr.text-center > th { text-align: center; }

.table.table-valign tbody > tr > td,
.table.table-valign tbody > tr > th {
    vertical-align: middle;
}

.table .btn-cell {
	padding: 2px;
}


.table .url-cell {
	min-width: 400px;
}

.table .network-cell {
	position: relative;
}

.table .network-cell:before {
	font-family: 'Glyphicons Halflings';
	font-size: 24px;
	content:"\e233";
	display: block;
	position: absolute;
	left: 8px;
	top: 50%;
	margin-top: -15px;
}

.table .network-cell > div {
	max-width: calc(100% - 40px);
}

.table tbody td.row-spacer {
  background: white;
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  padding: 10px 0 20px;
}

.table th {
	font-size: 18px;
}

.table > thead > tr > th {
	color: #626262;
	text-transform: uppercase;
	border: none;
}

.table tr.no-border {
 	border-top: 1px solid white;
 	border-left: 1px solid white;
 	border-right: 1px solid white;
}

.table > thead > tr.no-border > th {
	padding: 0 8px 27px;
}

.table th.grayed {
	background-color: #e5e5e5 !important;
}

.table th.sortable {
	cursor: pointer;
	position: relative;
}

.table th.sortable .sort-up,
.table th.sortable .sort-down {
	display: none;
	position: absolute;
	right: 2px; top: 10px;
}

.table th.sortable.active {
	background-color: transparent;
}

.table th.sortable:hover {
	background-color: #FCF8E2 ;
}

.table th.sortable.active:not(.reverse):not(:hover) .sort-down,
.table th.sortable:not(.active):hover .sort-down,
.table th.sortable.active:not(.reverse):hover .sort-up,
.table th.sortable.active.reverse:not(:hover) .sort-up,
.table th.sortable.active.reverse:hover .sort-down
{
	display: block;
}

.table th.sortable.active:hover {
	background-color: #E8F9EF;
}

.table .celllink {
	cursor: pointer;
	position: relative;
}

.table .celllink a {
	text-decoration: none;
	font-weight: inherit;
	color: inherit;
}

.table .celllink:after {
	font-family: 'Glyphicons Halflings';
	/* content:"\e065"; */
	content:"\e019";
	/* content:"\e136"; */
	font-size: 18px;
	position: absolute;
	right: 5px;
	bottom: 5px;
	font-weight: normal;
	color: #183959;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

.table .celllink:hover {
	background-color: #FCF8E2 ;
}

.table .celllink:hover:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}

.table .celllink.celllink-noicon:after {
	display: none;
}

.table .hover-only {
	visibility: hidden;
}

.table td:hover .hover-only, .table th:hover .hover-only {
	visibility: visible;
}

.btn {
	background-image: none !important;
}


.btn-primary {
	background: #97C009;
	border: 1px solid #6BA815 !important;
}

.btn-primary:hover,
.btn-primary:active, .btn-primary.active,
.btn-primary:focus, .btn-primary.focus,
.btn-primary:active:hover
 {
	background: #6BA815;
}

#cookie-notice {
    width: 100%;
    min-height: 46px;
    background-color: black;
    position: fixed;
    bottom: 0; left: 0;
    z-index: 100000;
}

#cookie-notice .cookie-notice-container {
	padding: 3px 10px;
}

#cookie-notice .cookie-notice-container .cn-notice-text {
    color: white;
	text-align: center;
	height: 40px;
	line-height: 40px;
}

#cookie-notice .cookie-notice-container .cn-buttons {
	height: 40px;
	text-align: center;
	padding-top: 3px;
}

#cookie-notice .cookie-notice-container .cn-buttons .btn {
	text-align: center;
	margin-left: 10px;
	overflow: hidden;
}