/************* GENERAL STYLES ***/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline; }

:focus { outline: 0; }

* { box-sizing: border-box; }

body {
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	line-height: 1.5;
	color: #222;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }

ul, ol { margin: 0 0 1.5rem 30px; }
	
	ul li, ol li { margin: 0 0 8px; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0; }

caption, th, td {
	text-align: left;
	font-weight: normal; }

blockquote:before, blockquote:after,
q:before, q:after {
	content: ""; }

blockquote, q { quotes: "" ""; }

img {
	max-width: 100%;
	height: auto; }

figure { margin: 0; }

/*** FONT STYLES ***/
h1,
.h1 { 
	margin: 0 0 1.5rem;
	font-size: 36px;
	font-weight: 300;
	line-height: 1.2; }

h2 { 
	margin: 0 0 1.5rem;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.2; }

a { 
	color: #222;
	text-decoration: none; }
	
a:hover { text-decoration: underline; }

p { margin-bottom: 1.5rem; }

strong { font-weight: bold; }

em { font-style: italic; }

sup, sub { 
	font-size: 75%;
	line-height: 0;
	position: relative; }

sup { top: -0.5em; }
sub { bottom: -0.25em; }

.txt--center { text-align: center; }

.spacing--1 { letter-spacing: 1px; }
.spacing--2 { letter-spacing: 2px; }

/************* STRUCTURE STYLES ***/
.wrapper {
	width: 1109px;
	max-width: 100%;
	padding: 0 40px;
	margin: 0 auto; }

.wrapper2 {
	width: 1380px;
	max-width: 100%;
	padding: 0 40px;
	margin: 0 auto; }


/*** COLS ***/
.col-row {
	margin-right: -12px;
	margin-left: -12px; }

.col {
	float: left;
	padding-right: 12px;
	padding-left: 12px; }

.col--12 { width: 100%; }
.col--9 { width: 75%; }
.col--8 { width: 66.6666%; }
.col--6 { width: 50%; }
.col--4 { width: 33.3333%; }
.col--3 { width: 25%; }


/*** BUTTONS ***/
.btn {
	display: inline-block;
	padding: 12px 24px;
	background-color: #fff;
	border: 1px solid #222;
	border-radius: 50px;
	color: #222;
	font-size: 16px;
	font-weight: bold;
	transition: 0.3s ease all; }

.btn:hover {
	background-color: #222;
	color: #fff;
	text-decoration: none; }


/*** PAGE ***/
.page {
	width: 100%;
	float: left;
	background: linear-gradient(#fff, #f2f6f6); }


/*** SECTIONS ***/
.section {
	width: 100%;
	float: left;
	padding: 140px 0; }


/*** SECTION 1 ***/
.section-1 {
	background: url(../images/bg_lines.svg) bottom center no-repeat;
	background-size: cover; }

	.section-1 .grid {
		display: -ms-grid;
		display: grid;
		-ms-grid-rows: none;
		grid-template-rows: none;
		-ms-grid-columns: 60% 40%;
		grid-template-columns: 60% 40%; }

	.section-1 .content { 
		-ms-grid-row: 1;
		grid-row: 1;
		-ms-grid-column: 1;
		grid-column: 1;
		margin-top: 15%; }

	.section-1 .bottle { 
		-ms-grid-row: 1;
		grid-row: 1;
		-ms-grid-column: 2;
		grid-column: 2;
		text-align: center; }

	.section-1 .bottle__img {
		max-width: 70%;
		position: relative;
		animation: 3s ease-in-out infinite bounce; }

	@keyframes bounce {
		from {
			top: 0;
		}
		50% {
			top: -15px;
		}
		to {
			top: 0;
		}
	}

	.section-1 .bottle__shadow {
		width: 1px;
		height: 1px;
		margin: 30px auto 0;
		background-color: #bbb;
		border-radius: 50%;
		box-shadow: 0 0 100px 50px rgba(0,0,0,.6);
		transform: scale(1,.5);
		animation: 3s ease-in-out infinite bounce-shadow; }

	@keyframes bounce-shadow {
		from {
			opacity: 1;
		}
		50% {
			opacity: .8;
		}
		to {
			opacity: 1;
		}
	}


/*** SECTION 2 ***/
.section-2 { padding: 0 !important; }

.studies { margin-top: 40px; }

	.studies .flex {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: stretch;
		align-items: stretch;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap; }

	.studies .card {
		height: 100%;
		overflow: hidden;
		background-color: #fff;
		border: 1px solid #eee;
		border-radius: 10px;
		box-shadow: 0 10px 30px -15px rgba(0,0,0,.3); }

		.studies .card--grid {
			display: -ms-grid;
			display: grid;
			-ms-grid-columns: none;
			grid-template-columns: none;
			-ms-grid-rows: auto minmax(0,1fr);
			grid-template-rows: auto minmax(0,1fr); }

		.studies .card__figure {
			width: 100%;
			-ms-grid-row: 1;
			grid-row: 1;
			-ms-grid-column: 1;
			grid-column: 1;
			margin: 0;
			overflow: hidden; }

			.studies .card__figure div {
				width: 100%;
				height: 0;
				padding-top: 56.25%;
				margin: 0;
				background-color: #eee;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				transition: .3s ease all; }

			.studies .card__figure.bg-1 div { background-image: url(../images/news_1.jpg); }
			.studies .card__figure.bg-2 div { background-image: url(../images/news_2.jpg); }
			.studies .card__figure.bg-3 div { background-image: url(../images/news_3.jpg); }
			.studies .card__figure.bg-4 div { background-image: url(../images/news_4.jpg); }

			.studies .card__figure:hover div { 
				-ms-transform: scale(1.1);
				transform: scale(1.1); }

		.studies .card__content { 
			width: 100%;
			-ms-grid-row: 2;
			grid-row: 2;
			-ms-grid-column: 1;
			grid-column: 1;
			padding: 24px; }

		.studies .card__content--grid {
			display: -ms-grid;
			display: grid;
			-ms-grid-columns: none;
			grid-template-columns: none;
			-ms-grid-rows: minmax(0,1fr) auto;
			grid-template-rows: minmax(0,1fr) auto; }

		.studies .card__content-title { 
			-ms-grid-row: 1;
			grid-row: 1;
			-ms-grid-column: 1;
			grid-column: 1;
			margin-bottom: 40px;
			font-size: 16px;
			font-weight: bold; }

		.studies .card__content-foot {
			-ms-grid-row: 2;
			grid-row: 2;
			-ms-grid-column: 1;
			grid-column: 1;
			color: #999;
			font-size: 14px; }


/*** SECTION 3 ***/
.prices__img { padding-left: 24px; }

.prices__price {
	margin-top: 24px;
	font-size: 36px;
	font-weight: 300; }

.prices__info { font-size: 15px; }

	.prices__info span { margin: 0 8px; }


/*** SECTION 4 ***/
.contact {
	width: 700px;
	max-width: 100%;
	margin: 0 auto; }

.contact__form {
	width: 464px;
	max-width: 100%;
	margin: 40px auto 0;
	text-align: center; }

.contact__form-input {
	width: 100%;
	padding: 10px 16px;
	margin-bottom: 16px;
	background-color: #fff;
	border: 1px solid #222;
	border-radius: 4px;
	font: inherit;
	font-size: 16px;
	text-align: center; }

.contact__form-submit {
	width: 100%;
	padding: 11px 16px;
	background-color: #222;
	border: 0;
	border-radius: 4px;
	text-align: center;
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer; }

/*** SECTION 5 ***/
.section-5 { padding: 0 !important; }

.hair-growth__images {
	width: 100%;
	float: left;
	margin-bottom: 64px; }

	.hair-growth__images figure {
		position: relative;
		box-shadow: 0 10px 30px -15px rgba(0,0,0,.3); }

		.hair-growth__images figure img {
			display: block;
			border-radius: 10px; }

	.hair-growth__images figcaption {
		width: 100px;
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 10;
		padding: 8px 0;
		background-color: #f3d71e;
		color: #222;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		line-height: 1;
		transform: translate(-50%, -50%); }

.hair-growth__text {
	width: 700px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center; }

	.hair-growth__text .text--large { font-size: 1.5rem; }
	
/*** FOOTER ***/
.footer {
	width: 100%;
	float: left;
	padding: 48px 0;
	border-top: 1px solid #222; }

.footer__left { 
	float: left;
	color: #555;
	font-size: 15px; }

.footer__right { float: right; }

.footer__right img { width: 80px; }
	
	
/*** MEDIA QUERIES ***/


/*** 1024px ***/
@media screen and (max-width: 1024px) {

	.studies .col--3 { 
		width: 50%;
		margin-bottom: 24px; }
	
}


/*** 800px ***/
@media screen and (max-width: 800px) {

	body { font-size: 16px; }

	.wrapper,
	.wrapper2 {
		padding: 0 24px; }

	.col-row {
		margin-right: -8px;
		margin-left: -8px; }

	.col {
		float: left;
		padding-right: 8px;
		padding-left: 8px; }

	.section { padding: 100px 0; }

	.section-1 .content { margin-top: 5%; }

	.studies .col--3 { margin-bottom: 16px; }

	.prices__price { font-size: 28px; }
	
}


/*** 600px ***/
@media screen and (max-width: 600px) {

	h1,
	.h1 { 
		font-size: 30px; }

	h2 { font-size: 20px; }

	.section-1 { 
		background-position: top 160px center;
		background-size: 900px auto; }

	.section-1 .grid { 
		-ms-grid-rows: none;
		grid-template-rows: none;
		-ms-grid-columns: none;
		grid-template-columns: none; }

	.section-1 .bottle { 
		-ms-grid-row: 1;
		grid-row: 1;
		-ms-grid-column: 1;
		grid-column: 1; }

	.section-1 .bottle__img { 
		width: 100px;
		max-width: 100%; }

	.section-1 .bottle__shadow { box-shadow: 0 0 75px 37px rgba(0,0,0,.4); }

	.section-1 .content { 
		-ms-grid-row: 1;
		grid-row: 2;
		-ms-grid-column: 1;
		grid-column: 1;
		margin-top: 40px; }

	.section-1 .btn { display: none; }

	.studies .card__content { padding: 16px; }

	.studies .card__content-title { 
		margin-bottom: 32px;
		font-size: 15px; }

	.prices .col--4 { 
		width: 100%;
		margin-bottom: 56px; }

	.prices .col--4:last-child { margin-bottom: 0; }
	
	.hair-growth__images { margin-bottom: 24px; }

	.hair-growth__images .col--3 { 
		width: 50%;
		margin-bottom: 40px; }	
}


/*** 414px ***/
@media screen and (max-width: 414px) {

	.section { padding: 80px 0; }

	.studies .col--3 { width: 100%; }

	.studies .col--3:last-child { margin-bottom: 0; }
	
	.hair-growth__images figcaption {
		width: 90px;
		font-size: 17px; }
}


/*** 375px ***/
@media screen and (max-width: 375px) {

	.footer__left,
	.footer__right {
		width: 100%;
		text-align: center; }

	.footer__right { margin-top: 16px; }
	
}