@font-face{
	font-family: "Raleway-Regular";
    src: url('../fonts/Raleway-Regular.ttf');
}
@font-face{
    font-family: "Raleway-Medium";
    src: url('../fonts/Raleway-Medium.ttf');
}
@font-face{
	font-family: "Raleway-Light";
    src: url('../fonts/Raleway-Light.ttf');
}
@font-face{
    font-family: "BebasNeue-Bold";
    src: url('../fonts/BebasNeue Bold.otf');
}

* {
	padding: 0;
	margin: 0;
}
*, *:before, *:after {
  box-sizing: border-box;
}

/*****************	#smallWrapper for Small screens	**********************/
.logo img {
	width: 52px;
}
#smallWrapper {
	display: none;
	opacity: 0;
}
#smallWrapper p {
	font-family: "Raleway-Regular";
	font-size: 1em;
	line-height: 1.5em;
	color: #6A6F7B;
}
#smallWrapper h1 {
	font-size: 2.5em;
    line-height: 1.2em;
    padding-bottom: 5%;
    color: #4A4A4A;
}
.small-section {
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
 	display: -webkit-flex;
	flex-flow: row;
	justify-content: space-around;
	align-items: center;
	padding-left: 5%;
	padding-right: 5%;
}
.small-container {
	position: relative;
}
#phoneSmall {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.small-section > div {
	margin-bottom: 65px;
}
#phoneGif {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-46%, -54.5%);
}
#smallWrapper .small-section:first-child {
	padding-top: 65px;
}

#smallWrapper .small-section{
	padding-bottom: 5%;
}
/*************************************************************************/

.fix {
	position: fixed;
	top: 0;
	background-color: rgba(255, 255, 255, 0.98);
	transition: background-color 1s ease;
	-webkit-backface-visibility: hidden;
}
.move {
	position: absolute;
	top: 50px;
	/*transition: background-color 0.5s ease-in;*/
}
#fixedMenu {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	width: 250px;
	background-color: rgba(0, 195, 228, 0.98);
	z-index: 5000;
}
#fixedMenu ul {
	list-style: none;
	padding: 2em;
	text-align: center;
}
#fixedMenu ul li {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}
#fixedMenu ul a {
	font-family: "Raleway-Regular";
	font-size: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
	color: #FFF;
	text-decoration: none;
	border-bottom: 5px solid transparent;
}
#fixedMenu ul a:hover {
	border-bottom: 5px solid #FFF;
}

#hamburger{
	display: none!important;
	font-size: 1.5em!important;
	text-decoration: none;
	color: #00C3E4!important;
	cursor: pointer!important;
}
#iconBottom {
	position: absolute;
	bottom: 0;
	right: 0;
	padding-right: 5%;
	padding-bottom: 5%;
}
button, input[type=submit] {
	background-color: #00C3E4;
	color: #FFF;
	padding: 1em 2em;
	border-radius: 4px!important;
	border: none;
	outline: none;
	font-family: "Raleway-Medium";
	font-size: 1em;
	cursor: pointer;
}

#container-banner {
	background: url("../img/herobanner.png");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
#banner{
	text-align: left;
	color: #FFF;
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex;
    flex-flow: column wrap;
    justify-content: flex-end;
    padding: 25% 40% 1% 5%;
}
.banner-padding {
	padding-bottom: 4%;
}

h1 {
	font-family: "BebasNeue-Bold";
}
#banner h1 {
	font-size: 3.5em;
	line-height: 1.3em;
}
#banner p{
	font-family: "Raleway-Light";
	font-size: 1.4em;
	line-height: 1.7em;	
}
#wrapper2 p {
	font-family: "Raleway-Light";
	font-size: 1.4em;
	line-height: 1.7em;	
	color: #FFF;
}
#wrapper6 p {
	font-family: "Raleway-Light";
	font-size: 1.4em;
	line-height: 1.7em;	
	color: #6A6F7B;
	padding-bottom: 5%;
}
#wrapper6 p a {
	text-decoration: none;
	color: #00C3E4;
}
#fixy {
	position: fixed;
	/*width: 100%;*/
	width: 45%;
	z-index: 10;
	display: none;
	padding-right: 5%;
	padding-left: 5%;
}
.carousel-dots {
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex;
    flex-direction: column;
	align-items: center;
	justify-content: center;
}
.carousel-dots > * {
	list-style: none;
}  	
.dot {
	border-radius: 50%;
	width: 10px;
	height: 10px;
	background-color: #D8D8D8;
	margin-bottom: 0.6em;
}
.dot.scale {
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: 1.8px solid #0B9BFF;
}

.phone-wrapper {
	display: inline-block;
	position: relative;
	
}
#gif {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-46%, -54.5%);
}
.gif {
	display: none;
}
/*************** mediumWrapper ****************/
#mediumWrapper {
	padding-top: 5%;
	padding-bottom: 5%;
	display: none;
	opacity: 0;
}
.medium-container {
	width: 100%;
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex;
    flex-flow: row;
	justify-content: space-around;
	align-items: center;
}
#mediumWrapper p {
	font-family: "Raleway-Regular";
	font-size: 1em;
	line-height: 1.5em;
	color: #6A6F7B;
}

.phone-wrapper-medium {
	position: relative;
}
.gifMedium {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-46%, -54.5%);
}
.section-medium {
	max-width: 500px;
}

/********************************************/
#wrapper1 {
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 5%;
	padding-bottom: 5%;
	background-color: #F7F8FA;
	font-family: "Raleway-Regular";
	font-size: 1em;
	line-height: 1.5em;
	color: #6A6F7B;
	position: relative;
	opacity: 0;
}
#carousel {
	display: inline-block;
	width: 50%;
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 5%;
	padding-right: 5%;
	max-width: 720px;
}

#carousel > div {
	width: 100%;
	height: 100%;
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex;
    
	flex-flow: row no-wrap;
	justify-content: space-around;
	align-items: center;
}
#sections {
	display: inline-block;
	width: 50%;
	position: absolute;
	top: 0;
	right: 0;
	padding-left: 5%;
	padding-right: 5%;
}
.relative {
	position: relative;
}
.section {
	max-width: 500px;
}
.absolute {
	position: absolute;
}
.flex-basis {
	flex-basis: 100%;
}
.filler{
	background-color: gold;
}
#phone90 {
	display: none;
}
#right a {
	text-transform: uppercase;
	text-decoration: none;
	color: #0E4E8D;
	font-weight: bold;
	font-size: 1.3em;
}
.margin-bottom {
	margin-bottom: 8%;
}
.max-width{
	max-width: 1440px; 
	margin-right: auto;
	margin-left: auto;
}
.full-width {
	width: 100%;
}
#wrapper2 {
	background-image: url("../img/handphone.jpg");
	background-position: top right;
	text-align: left;
	height: 724px;
	padding-top: 15%;
	padding-bottom: 15%;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
}
#wrapper2 h1 {
	font-size: 3em;
	line-height: 1.5em;
	color: #fff;
	padding-bottom: 5%;
}
#container2 {
	padding-right: 5%;
	padding-left: 5%;
	width: 45%;
}
.padding-bottom {
	padding-bottom: 5%;
}
#wrapper3 {
	text-align: center;
	padding: 5%;
}
.set-height {
	height: 54px;
}
#wrapper3 h1 {
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
}
#wrapper3 h1, #wrapper5 h1, #wrapper6 h1, #wrapper1 h1, #mediumWrapper h1 {
	font-size: 3em;
	line-height: 1.2em;
	padding-bottom: 5%;
	color: #4A4A4A;
}

#wrapper3 h2 {
	font-family: "BebasNeue-Bold";
	font-size: 1.5em;
	color: #6A6F7B;
	padding-top: 10%;
	padding-bottom: 10%;
}

.uppercase {
	text-transform: uppercase;
}
#wrapper3 p {
	font-family: "Raleway-Light";
	font-size: 1em;
	line-height: 1.5em;
	color: #6A6F7B;
	margin-bottom: 50px;
}

.groups-wrapper3 {
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex;
    
	flex-flow: row wrap;
	justify-content: space-around;
	
}
.box-users {
	width: 240px;
}

.padding-btm {
	padding-bottom: 10%;
}
#wrapper4 {
	background-color: #F7F8FA;
	text-align: center;
}
#wrapper4 img {
	width: 100%;
}
#wrapper5 {
	text-align: center;
	padding: 5%;
}
.groups-wrapper5 {
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex;
    
	flex-flow: row wrap;
	justify-content: space-around;

}
.box {
	width: 264px;
}
.border-box {
	border-top: 1px solid #DADADA;
	border-bottom: 1px solid #DADADA;
	margin-bottom: 50px;
}

#wrapper5 h2 {
	font-family: "Raleway-Medium";
	font-size: 1em;
	color: #212121;
	padding-top: 10%;
	padding-bottom: 8%;
}
#wrapper5 p {
	font-family: "Raleway-Regular";
	font-size: 1em;
	color: #6A6F7B;
}
#wrapper6 {
	text-align: center;
	padding: 5%;
	background-color: #F7F8FA;
}

.form-field {
	font-family: "Raleway-Medium";
	font-size: 1em;
	padding: 1em;
	outline: 0; 
	border: 2px solid #DEE2E5;
	border-radius: 5px;
}
#fields1{
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex;
    
	flex-flow: row wrap;
	justify-content: center;

}

.wrapper-field {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
}
.wrapper-field > * {
	width: 300px;
}
#fields2 {
	padding-bottom: 20px;
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex;
    
	flex-flow: row wrap;
	justify-content: center;
}
#message {
	width: 680px;
}

#navigation{
	width: 100%;
	font-family: "Raleway-Regular";
	font-size: 1em;
	color: #6A6F7B;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	text-align: center;
	z-index: 20;
}

#navigation > ul {
	list-style: none;
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex;
    
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	padding-left: 5%;
	padding-right: 5%;
}
#navigation a {
	font-family: "Raleway-Regular";
	font-size: 1em;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	color: #FFF;
	text-decoration: none;
	border-bottom: 5px solid transparent;
}	
.nav:hover {
  border-bottom: 5px solid #00C3E4!important;
}
.move #navigation a {
	color: #fff;
}
/*#navigation.fix {
	padding-top: 0.1em;
	padding-bottom: 0.1em;
}
#navigation.move {
	padding-top: 1em;
	padding-bottom: 1em;
}*/
#navigation.fix a {
	color: #4A4A4A;
}
#navigationBottom {
	background-color: #F7F8FA;
	padding: 5%;
	border-top: 2px solid #EFF0F2;
	border-bottom: 2px solid #EFF0F2;
	font-family: "Raleway-Regular";
	font-size: 1em;
	color: #6A6F7B;
	text-align: center;
}

#navigationBottom > ul {
	list-style: none;
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex;
    
	flex-flow: row;
	justify-content: space-between;
}
#navigationBottom a {
	font-family: "Raleway-Regular";
	font-size: 1em;
	color: #6A6F7B;
	text-decoration: none;
}
.padding-nav-bottom {
	padding-left: 2%;
	padding-right: 2%;
}
.logo {
	padding-right: 5%;
}
.logo-footer {
	padding-right: 5%;
}
.grow {
	flex-grow: 1;
	text-align: right;
}
.padding-nav-sides {
	padding-left: 2%;
	padding-right: 2%;
}
#footer {
	padding: 2% 5%;
	text-align: center;
	border-bottom: 2px solid #EFF0F2;
	margin-bottom: 5%;
}
#footer > * {
	padding-left: 1em;
	padding-right: 1em;
}

/***************************************************************************************/
/*************************************	MEDIA QUERIES	********************************/
/***************************************************************************************/


@media all and (min-width: 631px) and (max-width: 1024px) {
	#mediumWrapper {
		display: block;
	}
	#wrapper1 {
		display: none;
	}
	#smallWrapper {
		display: none;
	}
}	

/*The ackward height;*/
@media all and (min-width: 1025px) and (max-height: 770px) {
	#mediumWrapper {
		display: block;
	}
	#wrapper1 {
		display: none;
	}
	#smallWrapper {
		display: none;
	}
	#banner {
		padding: 18% 40% 1% 5%;
	}
}

@media all and (max-width: 900px) {
	#demo {
		display: none!important;
	}
	#fixedMenu {
		display: none;
	}
	#hamburger {
		display: block!important;
	}
	.nav {
		display: none;
	}
	#navigation a {
		padding-top: 0.4em;
		padding-bottom: 0.4em;
	}	
	#banner {
		padding: 38% 20% 1% 5%;
	}
	#iconBottom img{
		width: 80%;
	}
	#iconBottom {
		text-align: right;
	}
	#wrapper2 {
		background-image: url("../img/handphoneSmall.jpg");
		text-align: center;
		height: auto;
	}
	#container2 {
		width: 100%;
	}
	.section-medium {
		max-width: 300px;
	}
	#mediumWrapper h1 {
		font-size: 2.5em;
    	line-height: 1.2em;
    }
}

@media all and (max-width: 760px) {
	#banner {
		padding: 40% 5% 1% 5%;
	}
	#iconBottom img {
		opacity: 0;
	}
	#navigationBottom > ul {
		flex-flow: column;
	}
	.grow {
		flex-grow: 0;
		text-align: center;
	}
	.logo-footer {
		padding-bottom: 2%;
	}
	.padding-nav-bottom {
		padding-bottom: 2%;
	}
	#message {
		width: 300px;
	}
}

@media all and (max-width: 680px) {
	.section-medium {
		max-width: 250px;
	}
	#mediumWrapper h1 {
		font-size: 2.25em;
    	line-height: 1.2em;
    }
}

@media all and (max-width: 630px) {
	.paddings {
		padding-left: 5%;
		padding-right: 5%;
	}
	.small-section:first-child {
		padding-left: 0;
		padding-right: 0;
	}

	#wrapper1 {
		display: none;
	}
	.small-section {
		display: block;
		text-align: center;
	}
	#smallWrapper {
		display: block;
	}
	#mediumWrapper {
		display: none;
	}
	/*#navigation {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}*/
	.move {
		top: 10px;
	}
	#banner {
		padding: 40% 5% 1% 5%;
	}
	#banner h1 {
		font-size: 3em;
		line-height: 1.2em;
	}
	#banner p, #wrapper2 p, #wrapper6 p {
		font-size: 1.3em;
		line-height: 1.5em;	
	}
	#wrapper2 h1, #wrapper3 h1, #wrapper5 h1, #wrapper6 h1 {
		font-size: 1.8em;
		line-height: 1.2em;
	}
	#wrapper3 h1, #wrapper5 h1 {
		margin-top: 65px!important;
	}
	.margin-btm {
		margin-bottom: 65px!important;
	}
	.groups-wrapper3 {
		flex-flow: row wrap;
	}
	.groups-wrapper5 {
		flex-flow: row wrap;
		justify-content: space-around;
	}
	#footer > * {
		padding-left: 0.3em;
		padding-right: 0.3em;
	}
}

@media all and (max-width: 320px) {
	#phone90 {
		display: block;
	}
	#phoneSmall {
		display: none;
	}
	
}
/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { 
	.paddings {
		padding-left: 0;
		padding-right: 0;
	}
	.small-section:first-child {
		padding-left: 5%;
		padding-right: 5%;
	}
}

/*Small phones in landscape*/
@media all and (max-height: 320px) {
	#fixedMenu ul {
		padding: 0;
	}
	#fixedMenu ul li {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
}