/** ====================

base.css

==================== **/



/** google fonts
==================== **/




/** basics
==================== **/

	body {
		font-family: 'Libre Franklin', sans-serif;
		font-size: 16px;
		color: #000;
		line-height: 1.6;
		overflow-y: scroll;
		overflow-x: hidden;
		background: #fff;
	}

	*,
	*::before,
	*::after {
		margin: 0;
		padding: 0;
		outline: 0;
		border: 0;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
	}


/** grid
==================== **/

	.container {
		max-width: 1440px;
		margin: 0 auto;
		padding: 0 100px;
		position: relative;
	}

	.column {
		float: left;
		padding: 0 25px;
		position: relative;
	}

	.column:first-child { padding-left: 0; }
	.column:last-child { padding-right: 0; }

	.column.col-1 { width: 8.333%; }
	.column.col-2 { width: 16.666%; }
	.column.col-3 { width: 25%; }
	.column.col-4 { width: 33.333%; }
	.column.col-5 { width: 41.666%; }
	.column.col-6 { width: 50%; }
	.column.col-7 { width: 58.333%; }
	.column.col-8 { width: 66.666%; }
	.column.col-9 { width: 75%; }
	.column.col-10 { width: 83.333%; }
	.column.col-11 { width: 91.666%; }
	.column.col-12 { width: 100%; }

	/** clear */
	.container::after,
	.row::after,
	.clear::after {
		content: '';
		display: block;
		clear: both;
	}


/** links
==================== **/

	a {
		text-decoration: none;
		color: inherit;
	}

	a.link {
		color: #24ddaa;
		border-bottom: 2px solid transparent;

		-webkit-transition: all 0.3s ease;
				transition: all 0.3s ease;
	}

	a.link:hover {
		border-bottom: 2px solid #24ddaa;
	}


/** typography
==================== **/

	h1, h2, h3, h4, h5, h6 { font-weight: 600; }

	h1 { font-size: 42px; }
	h2 { font-size: 36px; }
	h3 { font-size: 30px; }
	h4 { font-size: 26px; }
	h5 { font-size: 22px; }
	h6 { font-size: 18px; }


/** blockquote
==================== **/

	blockquote {
		font-size: 20px;
		font-style: italic;
		padding: 25px 50px;
		border-left: 5px solid #24ddaa;
	}





/** forms
==================== **/



	textarea {
		max-width: 100%;
		min-height: 120px;
		line-height: inherit;
		padding: 15px;
	}

	label {
		display: block;
		position: relative;
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 5px;
	}


/** misc
==================== **/

	.float-right { float: right; }
	.float-left { float: left; }

	img {
		max-width: 100%;
		vertical-align: middle;
	}

	.text-center { text-align: center; }
	.text-right { text-align: right; }
	.text-left { text-align: left; }