/*
= IMPORTING STUFF AND SETTING DEFAULT STYLES
------------------------------------------------------------------------------------- */
@import url("reset.css");

/*
= FONT EMBEDING
------------------------------------------------------------------------------------- */

@font-face {
    font-family:'galano';
    src:url('../fonts/galano_grotesque_light-webfont.eot');
    src:url('../fonts/galano_grotesque_light-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/galano_grotesque_light-webfont.woff2') format('woff2'),
        url('../fonts/galano_grotesque_light-webfont.woff') format('woff'),
        url('../fonts/galano_grotesque_light-webfont.ttf') format('truetype'),
        url('../fonts/galano_grotesque_light-webfont.svg#galano_grotesquelight') format('svg');
    font-weight:normal;
    font-style:normal;
	}
@font-face {
    font-family:'galano-medium';
    src:url('../fonts/galano_grotesque_medium-webfont.eot');
    src:url('../fonts/galano_grotesque_medium-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/galano_grotesque_medium-webfont.woff2') format('woff2'),
        url('../fonts/galano_grotesque_medium-webfont.woff') format('woff'),
        url('../fonts/galano_grotesque_medium-webfont.ttf') format('truetype'),
        url('../fonts/galano_grotesque_medium-webfont.svg#galano_grotesquemedium') format('svg');
    font-weight:normal;
    font-style:normal;
	}

/*
= COMMON
------------------------------------------------------------------------------------- */
		
	html, 
	body {height:100%; font-family:'galano'; -webkit-text-size-adjust: none;}
		a {text-decoration:none;}
		ul {margin:0px; list-style:none;}
		section {}
			.holder {
				overflow:hidden; 
				width:80%; max-width:1580px;
				margin:0px auto;
				}
				h1, h2, h3, h4 {font-weight:400;}
				h1 strong,
				h2 strong, 
				h3 strong {display:block; font-family:'galano-medium'; font-weight:400;}
				h2 {
					margin-bottom:1em;
					font-size:0.9em; letter-spacing:1px; line-height:1.1em;
					}
					.third h2:before,
					.fourth h2:before {
						content:"";
						display:block;
						margin-bottom:25px;
						width:55px; height:55px;
						background:url(../img/bgr-title.png) no-repeat;
						}			
				h3 {color:#2e4050; font-size:0.9em; letter-spacing:1px; line-height:1.1em;}
				p {font-size:0.45em; color:#4a5d71; line-height:1.5em;}
				.btn {
					display:inline-block;
					padding:0 2em 0;
					font-family:'galano-medium' !important; color:#ffffff; line-height:2.8em; font-size:0.4em;
					background:#28d9c1;
					border:none; border-radius:2.8em;
					outline:none !important;
					-webkit-transition:all 300ms ease-in-out;
					-moz-transition:all 300ms ease-in-out;
					-o-transition:all 300ms ease-in-out;
					-ms-transition:all 300ms ease-in-out;
					transition:all 300ms ease-in-out;
					}
					.btn:hover,
					.btn:active {background:rgba(40,217,193,0.7);}
				.mobile-img {display:none !important; width:100%; height:auto;}

	/* 
	+ Preloading */
		
		#preloader {
			position:fixed; top:0; left:0; z-index:9999;
			width:100%; height:100%;
			background:#f4f6f6;
			}
			#preloader .loader_overlay {
				position:absolute; top:0; left:0;
				width:100%; height:100%;
				background:#f4f6f6;
				}
			#preloader .loader {
				position:absolute; top:0; left:0;
				width:100%; height:30px;
				}
				#preloader .progress_notification {display:none;}
				#preloader .progress_bar {
					position:absolute; top:0;
					width:100%; height:0;
					border-bottom: 2px solid #f4f6f6;
					}
				#preloader .progress_loaded {
					position:relative;
					width:0; height:100%;
					border-bottom:2px solid #28d9c1;
					}

	/* 
	+ Intro */
	
		.first {
			overflow:hidden; position:relative; 
			height:100%;
			background:#f4f6f6;
			}
			.first .bgr {
				position:absolute; left:0px; top:0px;
				width:100%; height:100%;
				background:url(../img/bgr-intro.jpg) right top no-repeat; background-size:cover;
				-webkit-backface-visibility:hidden; backface-visibility:hidden;
				}
			.nav-trigger-holder {position:absolute; left:10%; top:10%; display:block; z-index:9999; visibility:hidden;}
				.nav-trigger {
					float:left;
					width:34px; height:23px;
					margin-right:24px;
					-webkit-transform:rotate(0deg);
					-moz-transform:rotate(0deg);
					-o-transform:rotate(0deg);
					transform:rotate(0deg);
					-webkit-transition:.5s ease-in-out;
					-moz-transition:.5s ease-in-out;
					-o-transition:.5s ease-in-out;
					transition:.5s ease-in-out;
					cursor:pointer;
					backface-visibility:hidden;
					}
					.nav-trigger span {
						display:block; position:absolute; left:0; opacity:1;
						height:2px; width:100%;
						background:#ffffff;
						-webkit-transform:rotate(0deg);
						-moz-transform:rotate(0deg);
						-o-transform:rotate(0deg);
						transform:rotate(0deg);
						-webkit-transition:.25s ease-in-out;
						-moz-transition:.25s ease-in-out;
						-o-transition:.25s ease-in-out;
						transition:.25s ease-in-out;
						}
						.nav-trigger span:nth-child(1) {top:0px;}
							.nav-trigger-holder.open .nav-trigger span:nth-child(1) {
								top:10px;
								-webkit-transform:rotate(135deg);
								-moz-transform:rotate(135deg);
								-o-transform:rotate(135deg);
								transform:rotate(135deg);
								}
						.nav-trigger span:nth-child(2) {top:10px;}
							.nav-trigger-holder.open .nav-trigger span:nth-child(2) {opacity:0; left:-60px;}
						.nav-trigger span:nth-child(3) {top:20px;}
							.nav-trigger-holder.open .nav-trigger span:nth-child(3) {
								top:10px;
								-webkit-transform:rotate(-135deg);
								-moz-transform:rotate(-135deg);
								-o-transform:rotate(-135deg);
								transform:rotate(-135deg);
								}
				.nav-trigger-holder a {
					float:left; display:none; position:relative;
					font-size:18px; line-height:23px; color:#ffffff;
					}
					.nav-trigger-holder a:after {
						content:"";
						display:block; position:absolute; left:0; bottom:0px; opacity:0;
						width:0px; height:1px;
						background:#ffffff;
						-webkit-transition:all ease-in-out 300ms;
						-moz-transition:all ease-in-out 300ms;
						-o-transition:all ease-in-out 300ms;
						-ms-transition:all ease-in-out 300ms;
						transition:all ease-in-out 300ms;
						}
						.nav-trigger-holder a:hover:after,
						.nav-trigger-holder a:active:after {opacity:1; width:100%;}
					
			.first .holder {
				position:relative; z-index:2;
				-webkit-backface-visibility:hidden; backface-visibility:hidden;
				}
				.first .holder .logo,
				.first .bgr .logo {
					display:block !important;
					width:270px; height:72px;
					margin-bottom:2em;
					text-indent:-9999px; letter-spacing:1px;
					background:url(../img/bgr-logo.png) center no-repeat; background-size:100% 100%;
					outline:none;
					}
					.first .bgr .logo {display:none !important; margin-bottom:0px;}
				.first .holder h1 {
					width:55%;
					margin-bottom:0.6em;
					font-size:1.3em; letter-spacing:1px; color:#ffffff;
					}
					.first .holder h1 strong {font-family:'galano'; color:#28d9c1;}

	/* 
	+ We've built a seriously human software */
	
		.second {}
			.second .holder {padding:2.5em 0;}
				.second h2 {float:left; width:30%; margin-bottom:0px;}
				.second p {float:right; width:50%;}

	/* 
	+ Improving Quality of Care */
	
		.third {height:85%; background:url(../img/bgr-quality-of-care.png) center left no-repeat #fafafa; background-size:100% auto;}
			.third .text {float:right; width:50%;}
	
	/* 
	+ Compliance finally made easy */
	
		.fourth {height:85%; background:url(../img/bgr-compliance.png) center right no-repeat #fafcfd; background-size:100% auto;}
			.fourth .text {float:left; width:40%;}

	/* 
	+ Stay updated with new features */

		.fifth {}
			.fifth .holder {padding:2.5em 0;}
			.fifth h3 {
				padding:1.5em 10%;
				color:#ffffff;
				background:#28d9c1;
				}
			.fifth form {overflow:hidden;}
				.fifth form fieldset {
					float:left; 
					width:35%; 
					margin:0 0 3em 15%;
					font-size:0.45em;
					}
					.fifth form fieldset ul {}
						.fifth form fieldset > ul > li {display:block; position:relative; margin-bottom:2.5em;}
							.fifth form input,
							.fifth form textarea {
								font-size:1em; font-family:'galano'; line-height:1.8em; 
								border-radius:0px;
								box-shadow:none;
								}
								.fifth form .text-field::-webkit-input-placeholder,
								.fifth form textarea::-webkit-input-placeholder {color:#4a5d71;}
								.fifth form .text-field:-moz-placeholder,
								.fifth form textarea:-moz-placeholder {opacity:1; color:#4a5d71;}
								.fifth form .text-field::-moz-placeholder,
								.fifth form textarea::-moz-placeholder {opacity:1; color:#4a5d71;}
								.fifth form .text-field:-ms-input-placeholder,
								.fifth form textarea:-ms-input-placeholder {color:#4a5d71;}
								.fifth form .text-field:placeholder-shown,
								.fifth form textarea:placeholder-shown {color:#4a5d71;}
							.fifth form .text-field {
								display:block;
								width:100%;
								padding:0px;
								color:#4a5d71;
								border:none; border-bottom:1px solid #c7ccd1;
								-webkit-transition:all ease-in-out 300ms;
								-moz-transition:all ease-in-out 300ms;
								-o-transition:all ease-in-out 300ms;
								-ms-transition:all ease-in-out 300ms;
								transition:all ease-in-out 300ms;								
								-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
								}
								.fifth form .text-field:focus {border-color:#28d9c1;}
							.fifth form fieldset label {color:#4a5d71;}
								.fifth form .message-holder label {display:block; margin-bottom:0.5em;}
							.fifth form textarea {
								display:block;
								width:100%; height:8em;
								padding:5px 10px;
								line-height:1.5em;
								border:1px solid #c7ccd1;
								-webkit-transition:all ease-in-out 300ms;
								-moz-transition:all ease-in-out 300ms;
								-o-transition:all ease-in-out 300ms;
								-ms-transition:all ease-in-out 300ms;
								transition:all ease-in-out 300ms;								
								-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
								resize:none;								
								}
								.fifth form textarea:focus {border-color:#28d9c1;}
							.fifth form .jcf-select {position:relative; display:block;}
								.fifth form select {left:0px; top:0px; width:100%; height:100%;}
								.fifth form .jcf-select-text {
									display:block;
									width:100%; height:1.8em;
									padding:0px 0 1px;
									color:#4a5d71; line-height:1.8em;
									border-bottom:1px solid #c7ccd1;
									-webkit-transition:all ease-in-out 300ms;
									-moz-transition:all ease-in-out 300ms;
									-o-transition:all ease-in-out 300ms;
									-ms-transition:all ease-in-out 300ms;
									transition:all ease-in-out 300ms;								
									-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
									}
									.fifth form .jcf-focus .jcf-select-text {border-color:#28d9c1;}
								.fifth form .jcf-select-opener {
										position:absolute; right:12px; top:50%;
										width:6px; height:6px;
										margin-top:-3px;
										border-right:1px solid #5a6978; border-top:1px solid #5a6978;
										-webkit-transform:rotate(135deg);
										-moz-transform:rotate(135deg);
										-o-transform:rotate(135deg);
										-ms-transform:rotate(135deg);
										transform:rotate(135deg);
										-webkit-transition:all ease-in-out 300ms;
										-moz-transition:all ease-in-out 300ms;
										-o-transition:all ease-in-out 300ms;
										-ms-transition:all ease-in-out 300ms;
										transition:all ease-in-out 300ms;								
										}
										.fifth form .jcf-focus .jcf-select-opener {border-color:#28d9c1;}
							.fifth form fieldset p {
								font-size:1em; line-height:1.8em;
								border-bottom:1px solid #c7ccd1;
								-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
								}
							.fifth form .radio-btns {border-bottom:1px solid #c7ccd1;}
								.fifth form .radio-btns li {
									overflow:hidden;  position:relative;
									min-height:18px; 
									margin-bottom:0.8em; padding-left:28px;
									}
									.fifth form .jcf-radio {
										position:absolute; left:0px; top:50%; 
										width:16px; height:16px;
										margin-top:-9px;
										border:1px solid #c7ccd1; border-radius:50%;
										-webkit-transition:all ease-in-out 300ms;
										-moz-transition:all ease-in-out 300ms;
										-o-transition:all ease-in-out 300ms;
										-ms-transition:all ease-in-out 300ms;
										transition:all ease-in-out 300ms;
										}
										.fifth form .jcf-radio.jcf-checked {border-color:#28d9c1;}
										.fifth form .jcf-radio input {
											display:block; left:0px; top:0px; 
											width:100%; height:100%;
											}
										.fifth form .jcf-radio span {
											position:absolute; left:50%; top:50%; opacity:0;
											width:12px; height:12px;
											margin:-6px 0 0 -6px;
											background:#28d9c1; 
											border-radius:50%;
											-webkit-transition:all ease-in-out 300ms;
											-moz-transition:all ease-in-out 300ms;
											-o-transition:all ease-in-out 300ms;
											-ms-transition:all ease-in-out 300ms;
											transition:all ease-in-out 300ms;								
											-webkit-transform:scale(0.5);								
											-moz-transform:scale(0.5);								
											-o-transform:scale(0.5);								
											-ms-transform:scale(0.5);								
											transform:scale(0.5);								
											}
											.fifth form .jcf-radio.jcf-checked span {
												opacity:1;
												-webkit-transform:scale(1);								
												-moz-transform:scale(1);								
												-o-transform:scale(1);								
												-ms-transform:scale(1);								
												transform:scale(1);								
												}
							.fifth form fieldset.left ul li:last-child,
							.fifth form fieldset.right .like-to-holder,
							.fifth form fieldset.right .like-to-holder ul li:last-child {margin:0px;}
							.fifth form fieldset.right .message-holder {display:none;}
							.fifth form fieldset > ul > li em {
								position:absolute; left:0px; top:100%;
								font-style:normal; color:#fc6769; font-size:0.85em; line-height:2em;
								}
						.fifth form fieldset.left {margin-left:0px;}		
				.fifth form button {float:left; clear:both; margin-right:30px;}
				.fifth form #info {
					float:left;
					color:#28d9c1; line-height:2.8em; font-size:0.4em;
					}
				
	/* 
	+ Footer */
	
		footer {padding:3em 0 1em; background:#2b3e51; color:#7e8aa2;}
			footer dl {}
				footer dt {padding-bottom:1.2em; text-align:center;}
					.social-nav {}
						.social-nav li {display:inline-block; margin:0 18px 0.5em;}
							.social-nav li a {
								display:block;
								width:56px; height:56px;
								text-indent:-9999px;
								background-image:url(../img/btns-social.png); background-repeat:no-repeat;
								border:1px solid rgba(189,195,199,0.45); border-radius:50%;
								-webkit-transition:all ease-in-out 300ms;
								-moz-transition:all ease-in-out 300ms;
								-o-transition:all ease-in-out 300ms;
								-ms-transition:all ease-in-out 300ms;
								transition:all ease-in-out 300ms;
								outline:none;
								}
								.social-nav li a:hover {border-color:rgba(189,195,199,1);}
								.social-nav li a.facebook {background-position:0px 0px;}
								.social-nav li a.twitter {background-position:-56px 0px;}
								.social-nav li a.linkedin {background-position:-112px 0px;}
					.contact {}
						.contact li {display:inline-block; margin:0 18px; font-size:0.4em;}
							.contact li:first-child a {position:relative; color:#28d9c1;}
								.contact li:first-child a:after {
									content:"";
									display:block; position:absolute; left:50%; bottom:0px; opacity:0;
									width:0px; height:1px;
									background:#28d9c1;
									-webkit-transition:all ease-in-out 300ms;
									-moz-transition:all ease-in-out 300ms;
									-o-transition:all ease-in-out 300ms;
									-ms-transition:all ease-in-out 300ms;
									transition:all ease-in-out 300ms;
									}
									.contact li:first-child a:hover:after,
									.contact li:first-child a:active:after {left:0px; opacity:1; width:100%;}
							.contact li:last-child a {
								color:#7e8aa2; text-decoration:underline;
								-webkit-transition:all ease-in-out 300ms;
								-moz-transition:all ease-in-out 300ms;
								-o-transition:all ease-in-out 300ms;
								-ms-transition:all ease-in-out 300ms;
								transition:all ease-in-out 300ms;
								}
								.contact li:last-child a:hover,
								.contact li:last-child a:active {color:#28d9c1;}
				footer dd {
					overflow:hidden; 
					padding-top:0.4em;
					border-top:1px solid rgba(255,255,255,0.05);
					}
					footer dd p {float:left; font-size:0.34em; color:#7e8aa2;}
					footer dd .top-btn {
						float:right; 
						font-size:0.34em; color:#7e8aa2;
						padding-right:2em;
						background:url(../img/btn-top.png) right center no-repeat; background-size:auto 70%;
						-webkit-transition:all ease-in-out 300ms;
						-moz-transition:all ease-in-out 300ms;
						-o-transition:all ease-in-out 300ms;
						-ms-transition:all ease-in-out 300ms;
						transition:all ease-in-out 300ms;
						}
						footer dd .top-btn:hover,
						footer dd .top-btn:active {color:#28d9c1;}

/*
= RESPONSIVE
------------------------------------------------------------------------------------- */

	@media screen and (max-width: 1080px) {
		
		.first .holder h1 {width:60%;}
		
		}

	@media screen and (max-width: 1024px) {
		
		.holder {width:90%;}
		
		.fourth, .third {background-size:100% auto;}
		
		.fifth h3 {padding-left:5%; padding-right:5%;}

		}

	@media screen and (max-width: 980px) {
		
		.fifth form fieldset {width:45%; margin-left:10%;}
			.fifth form fieldset:first-child {margin-left:0px;}		
		
		}	

	@media screen and (max-width: 760px) {

		h2 {margin-bottom:0px; font-size:1em;}
			.third h2:before,
			.fourth h2:before {width:40px; height:40px; background-size:100% 100%;}
		.mobile-img {display:block !important;}
		.btn {font-size:0.5em;}
			button.btn {padding: 0 1em 0; margin-right:20px !important;}
		.fifth form #info {font-size:0.5em;}
		p {font-size:0.52em; line-height:1.8em;}
		
		.first {height:auto; background:#ffffff;}
			.first .bgr {position:relative; background-image:url(../img/bgr-intro-mobile.jpg); margin-top:0px !important;}
				.first .bgr .logo {
					display:block !important; position:absolute; left:5%; top:50%;
					width:149px; height:40px;
					}
			.first .nav-trigger-holder {left:5%; top:5%;}
				.nav-trigger {margin-right:15px;}
			.first .holder {padding:1.5em 0px !important;}
				.first .holder .logo {display:none !important;}
				.first .holder h1 {width:100%; margin-bottom:1em; font-size:1em; line-height:1.1em; color:#2e4050;}
		
		.second .holder {padding:1.5em 0;}
		.second h2,
		.second p {float:none; width:100%;}
			.second h2 {margin-bottom:1.5em;}

		.third,
		.fourth {height:auto; background-image:none;}
			.third .holder,
			.fourth .holder,
			.fifth .holder {padding:1.5em 0 !important;}
				.third .text,
				.fourth .text {float:none; width:100%;}
		.fourth {overflow:hidden;}
		.fourth .holder {overflow:visible;}
			.fourth .mobile-img {margin-left:10%;}
	
		.fifth .holder {padding:1em 0;}
			.fifth h3 {padding-top:1em; padding-bottom:1em;}
			.fifth form fieldset {width:100%; margin-left:0px; font-size:0.52em;}
				.fifth form textarea {-webkit-appearance:none;}
				.fifth form fieldset:first-child {margin-bottom:0em;}
				.fifth form fieldset.left ul li:last-child,
				.fifth form fieldset.right .like-to-holder,
				.fifth form fieldset.right .like-to-holder ul li:last-child {margin:0px;}
				.fifth form fieldset.right .like-to-holder {margin-bottom:2.5em;}
				.fifth form fieldset.left ul li:last-child {display:none;}
				.fifth form fieldset.right .message-holder {display:block; margin-bottom:0px;}
				
		footer {padding:1em 0;}
			.social-nav,
			.contact {text-align:left;}
				.social-nav li {margin:0 5px 0.5em;}
					.social-nav li a {width:40px; height:40px; background-size:100% 100%;}
						.social-nav li a.facebook {background-size:auto 100%;}
						.social-nav li a.twitter {background-size:auto 100%; background-position:-40px 0;}
						.social-nav li a.linkedin {background-size:auto 100%; background-position:-80px 0;}
					.social-nav li:first-child {margin-left:0px;}
				.contact li {display:block; margin:0px; font-size:0.5em; line-height:2em;}
			footer dd p {font-size:0.4em;}
			.top-btn {display:none !important;}
	
		}

/*
= RETINA
-------------------------------------------------------------------------------------- */

	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

		.second h2:before,
		.third h2:before {background-image:url(../img/bgr-title.png); background-size:100% 100%;}
		
		.social-nav li a {background-size:100% 100%; background-position:0px 0px !important;}
			.social-nav li a.facebook {background-image:url(../img/btn-facebook@2.png);}
			.social-nav li a.twitter {background-image:url(../img/btn-twitter@2.png);}
			.social-nav li a.linkedin {background-image:url(../img/btn-linkedin@2.png);}	
		
		}
	
/*
= PRINT
------------------------------------------------------------------------------------- */

	@media print {
		* { background:transparent !important; color:#444 !important; text-shadow:none !important;}
		a, a:visited {color:#444 !important; text-decoration:underline;}
		a:after {content:"("attr(href)")";}
		abbr:after {content:"("attr(title)")";}
		.ir a:after {content:"";}
		pre, blockquote {border:1px solid #999; page-break-inside:avoid;}
		thead {display:table-header-group;}
		tr, img {page-break-inside:avoid;}
		@page {margin:0.5cm;}
		p, h2, h3 {orphans:3; widows:3;}
		h2, h3 {page-break-after:avoid;}
		}