@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&subset=latin-ext');

/* ========================================================= BASIC ========================================================= */
body{
	background-color: #f3f3f3;
	font-family: 'Open Sans', sans-serif;}	
	
h1{
	font-size: 1.3em;
	text-transform: uppercase;}	

a{
	text-decoration: none;
	color: #303133;}	

.container{
	background-color: #fff;
	margin: -20px 13% 0 13%;
	padding: 20px;
	min-height: 1200px;}
	
.p-logo{
	display: block;
	margin: 0 auto 0 auto;
	width: 25%;}



/* ========================================================= FOOTER ========================================================= */
footer{
	text-align: center;
	color: #bbbbbb;
	font-size: 1.3em;
	background-color: #fff;
	margin: 0 13% -20px 13%;
	padding: 0 0 25px 0;}	
	
	
	
/* ========================================================= BUTTON ========================================================= */
button{
	font-family: 'Montserrat', sans-serif;
	text-transform:uppercase;
	text-align: center;
	text-decoration:none;
	font-size: 1em;
	font-weight: 600;
	color: #454648;
	background-color: #d5d5d5;
	border: 0.15em solid #97989b;
	padding: 0.8em 3em;
	margin: 1% 0 0 0;
	cursor: pointer;
	transition: all 0.15s;}

button:hover{
	color:#303133;
	background-color: rgba(255, 255, 255, 0.2);
	border-color:#303133;}
	
	
	
/* ========================================================= BOTTOM CONSOLE (prev-next portfolio) ========================================================= */	
.bottom-console{
	text-align: center;
	margin: 10% 0 7% 0;}
	
.bottom-console li{
	display: inline;
	list-style: none;}		
	
.fa-chevron-left, .fa-chevron-right, .fa-home{
	color: #949494;
	width: 10%;}	
	
	
	
/* ========================================================= CONTACT ========================================================= */
.contact{
	display: inline-flex;
	font-family: 'Montserrat', sans-serif;
	color: #303133;
	background-color: #edecec;
	margin-bottom: 5%;
	padding: 10px 20px 10px 20px;
	text-align: center;
	max-width: 100%;
	min-height: 500px;}	
		
.contact h4{
	text-transform: uppercase;
	font-size: 1.3em;}

.contact-img{
	max-width: 50%;
	max-height: 80%;
	/*padding-bottom: 50px;*/}

/*.contact-form{
	display: flex;
	width: 100%;}*/
.contact-form{
	display: block;
	width: 100%;
	margin: auto;}
	
.contact-form img{
	width: 10%!important;}	
	
.contact-me{
	display: block;
	width: 100%;
	margin: auto 0 auto 0;}
	
form{
	width: 100%;
	margin: auto 0 auto 0;}	
	
input[type=text], input[type=email]{
	width: 100%;
	padding: 12px 20px;
	margin: 3px 0;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;}
	
textarea{
	width: 100%;
	height: 200px;
	padding: 12px 20px;
	margin: 3px 0;
	display: inline-block;
	border: 1px solid #ccc;
	resize: none;}	


/* ========================================================= ERROR PAGE/THANK YOU PAGE ========================================================= */
.sendmail-resp{
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	color: #303133;
	margin: 6% 0 0 0;}
	
.sendmail-resp h1{
	font-size: 4em;}	
	
.error-send{
	width: 10%;
	position: absolute;
	top: 25%;
	left: 58%;}	
	
.error-crashed{
	width: 40%;}
	
.elkuldve{
	width: 40%;}		
	
	
	

/* ========================================================= CARDS (portfolio list) ========================================================= */
.wrapper{
	display: block;
	margin: 8% auto 0 auto;
	width: 100%;}
	
*, *::before, *::after{
	box-sizing: border-box;}

.cards{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;}
  
.cards-item{
	position: relative;
	display: flex;
	padding: 1em;
	margin: 0 auto;}

.card{
	background-color: #edecec;
	display: flex;
	flex-direction: column;
	overflow: hidden;}
		  
.card-content{
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1em;}
	
.card-icon{
	width: 35%;
	margin: 30% auto;}
	
.card-logo{
	width: 100%;
	margin: auto;}
	
.overlay{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #fff;
	padding: 35% 25% 15% 25%;}
	
.overlay-description{
	text-align: center;
	line-height: 0.6;}	
	
.overlay-description h1{
	font-size: 1em;
	text-transform: uppercase;
	padding-bottom: 10px;}

.overlay-description h2{
	font-size: 1em;
	font-weight: normal;}	

.card:hover .overlay{
	opacity: 1;}
	
.card:hover h2{
	-webkit-animation-name: zoom;
	        animation-name: zoom;
	-webkit-animation-duration: 400ms;
	        animation-duration: 400ms;}	

@keyframes zoom{
	0%{
		-webkit-transform: translateY(100px);
		        transform: translateY(100px);}

	100%{
		-webkit-transform: translateY(-1px);
		        transform: translateY(-1px);}
}
	
@media (min-width: 80rem){
	.cards-item{
		width: 50%;}
}

@media (min-width: 85rem){
	.cards-item{
		width: 33.3333%;}
		
	.overlay-description h1{
		line-height: 18px;}		
}



/* ========================================================= SUB-CARDS (portfolio more) ========================================================= */
.sub-wrapper{
	display: block;
	margin: 8% 0 0 0;
	width: 100%;}	

.sub-fullwrapper{
	display: flex;}
	
.sub-halfwrapper{
	display: flex;
	/*flex-direction: initial;*/
	width: 100%;
	margin: -5px 0 0 0;}
	
.sub-wrapper img{
	width: 100%;
	height: 100%!important;}

.sub-halfwrapper img{
	width: 50%!important;
	height: 100%;}

.sub-description{
	font-family: 'Montserrat', sans-serif;
	color: #303133;
	margin-bottom: 5%;
	text-align: justify;}	
		
.sub-description h4{
	text-transform: uppercase;
	font-size: 1.3em;}

.sub-des-icon{
	width: 35px!important;}	
	
	
	
/* ========================================================= MEDIA QUERY ========================================================= */	
@media screen and (max-width: 1680px) {
	.p-logo{
		width: 30%;}
		
	.card-icon{
		margin: 30% auto;}
		
	.bottom-console{
		margin: 10% 10% 8% 0;}
		
	.fa-chevron-left, .fa-chevron-right, .fa-home{
		width: 15%;}
		
	.error-send{
		width: 10%;
		position: absolute;
		top: 20%;
		left: 60%;}	
		
	.error-crashed{
		width: 40%;}
		
	.elkuldve{
		width: 40%;}
		
	.contact-img{
		max-width: 60%;}
		
	input[type=text], input[type=email]{
		margin: 0;}
		
	textarea{
		margin: 0;}		
}

@media screen and (max-width: 1280px) {
	.p-logo{
		width: 40%;}
		
	.card-icon{
		margin: 30% auto;}
		
	.card-logo{
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		padding: 0;}	
		
	.overlay-description h4{
		font-size: 1.5em;
		line-height: 24px;}
		
	.bottom-console{
		margin: 20% 10% 10% 0;}
		
	.fa-chevron-left, .fa-chevron-right, .fa-home{
		width: 30%;}
		
	.error-send{
		width: 15%;
		position: absolute;
		top: 25%;
		left: 60%;}	
		
	.error-crashed{
		width: 50%;}
		
	.elkuldve{
		width: 50%;}
		
	.contact-img{
		max-width: 70%;}
		
	input[type=text], input[type=email]{
		margin: 0;}
		
	textarea{
		margin: 0;}					
}

@media screen and (max-width: 980px) {
	.p-logo{
		width: 50%;}
		
	.card-icon{
		margin: 30% auto;}
		
	.card-logo{
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		padding: 0;}	
		
	.overlay-description h4{
		font-size: 1.5em;
		line-height: 25px;}
		
	.sub-halfwrapper{
		margin: 0 0 0 0;
		flex-direction: column;}	
		
	.sub-halfwrapper img{
		width: 100%!important;}	
		
	.sub-halfwrapper img{
		max-width: 100%;
		max-height: 100%;}
		
	.bottom-console{
		margin: 15% 15% 10% 0;}
		
	.fa-chevron-left, .fa-chevron-right, .fa-home{
		width: 30%;}
		
	.error-send{
		width: 20%;
		position: absolute;
		top: 25%;
		left: 60%;}	
		
	.error-crashed{
		width: 70%;}
		
	.elkuldve{
		width: 70%;}
		
	.contact{
		display: block;
		min-height: 300px;}
		
	.contact-img{
		max-width: 50%;
		margin: 20px 0;}
		
	.contact-form img{
		width: 20%!important;}
		
	.contact-me{
		width: 100%;
		margin: auto 0 -30px 0;}	
		
	input[type=text], input[type=email]{
		margin: 0;}
		
	textarea{
		height: 250px;
		margin: 0;}
		
	.contact button{
		width: 100%;}					
}

@media screen and (max-width: 830px) {
	.p-logo{
		width: 55%;}
		
	.card-icon{
		margin: 30% auto;}
		
	.card-logo{
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		padding: 0;}		
		
	.overlay-description h4, .overlay-description p{
		font-size: 1.1em;}
		
	.sub-halfwrapper{
		margin: 0 0 0 0;
		flex-direction: column;}	
		
	.sub-halfwrapper img{
		width: 100%!important;}	
		
	.sub-halfwrapper img{
		max-width: 100%;
		max-height: 100%;}
		
	.bottom-console{
		margin: 15% 15% 10% 0;}
		
	.fa-chevron-left, .fa-chevron-right, .fa-home{
		width: 30%;}
		
	.error-send{
		width: 23%;
		position: absolute;
		top: 23%;
		left: 60%;}	
		
	.error-crashed{
		width: 80%;}
		
	.elkuldve{
		width: 80%;}
		
	.contact{
		display: block;
		min-height: 300px;}
		
	.contact-img{
		max-width: 60%;
		margin: 20px 0;}
		
	.contact-form img{
		width: 20%!important;}
		
	.contact-me{
		width: 100%;
		margin: auto 0 -30px 0;}	
		
	input[type=text], input[type=email]{
		margin: 0;}
		
	textarea{
		height: 250px;
		margin: 0;}
		
	.contact button{
		width: 100%;}				
}

@media screen and (max-width: 736px) {
	.container{
		margin: -20px 5% 0 5%;
		padding: 10px;}
		
	footer{
		margin: 0 5% -20px 5%;}	
		
	.p-logo{
		width: 60%;}
		
	.card-icon{
		margin: 30% auto;}		
		
	.card-logo{
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		padding: 0;}	
		
	.cards-item{
		padding: 0.5em;}
		
	.sub-halfwrapper{
		margin: 0 0 0 0;
		flex-direction: column;}	
		
	.sub-halfwrapper img{
		width: 100%!important;}	
		
	.sub-halfwrapper img{
		max-width: 100%;
		max-height: 100%;}
		
	.bottom-console{
		margin: 20% 15% 10% 0;}
		
	.fa-chevron-left, .fa-chevron-right, .fa-home{
		width: 30%;}	
		
	.error-send{
		width: 23%;
		position: absolute;
		top: 30%;
		left: 65%;}	
		
	.error-crashed{
		width: 80%;}
		
	.elkuldve{
		width: 80%;}
		
	.contact{
		display: block;
		min-height: 300px;}
		
	.contact-img{
		max-width: 60%;
		margin: 20px 0;}
		
	.contact-form img{
		width: 20%!important;}
	
	.contact-me{
		width: 100%;
		margin: auto 0 -30px 0;}	
		
	input[type=text], input[type=email]{
		margin: 0;}
		
	textarea{
		height: 250px;
		margin: 0;}
		
	.contact button{
		width: 100%;}					
}

@media screen and (max-width: 610px) {
	.container{
		margin: -20px 5% 0 5%;
		padding: 10px;}
		
	footer{
		margin: 0 5% -20px 5%;}	
		
	.p-logo{
		width: 70%;}
		
	.card-icon{
		margin: 30% auto;}
		
	.card-logo{
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		padding: 0.5em 0;}	
		
	.cards-item{
		padding: 0.5em;}
		
	.overlay-description h4, .overlay-description p{
		font-size: 1em;
		line-height: 18px;}
		
	.sub-halfwrapper{
		margin: 0 0 0 0;
		flex-direction: column;}	
		
	.sub-halfwrapper img{
		width: 100%!important;}	
		
	.sub-halfwrapper img{
		max-width: 100%;
		max-height: 100%;}
		
	.bottom-console{
		margin: 30% 15% 10% 0;}
		
	.fa-chevron-left, .fa-chevron-right, .fa-home{
		width: 30%;}
		
	.errorpage h1{
		font-size: 3em;}	
		
	.error-send{
		width: 25%;
		position: absolute;
		top: 28%;
		left: 65%;}	
		
	.error-crashed{
		width: 90%;}
		
	.elkuldve{
		width: 90%;}
		
	.contact{
		display: block;
		min-height: 300px;}
		
	.contact-img{
		max-width: 70%;
		margin: 20px 0;}
		
	.contact-form img{
		width: 20%!important;}
		
	.contact-me{
		width: 100%;
		margin: auto 0 -30px 0;}	
		
	input[type=text], input[type=email]{
		margin: 0;}
		
	textarea{
		height: 250px;
		margin: 0;}
		
	.contact button{
		width: 100%;}			
}

@media screen and (max-width: 400px) {
	.container{
		margin: -20px 3% 0 3%;
		padding: 10px;}
		
	footer{
		margin: 0 3% -20px 3%;}	
	
	.p-logo{
		width: 90%;}	
		
	.cards-item{
		padding: 0.2em;}
		
	.overlay-description h4, .overlay-description p{
		font-size: 0.9em;
		line-height: 15px;}
		
	.sub-halfwrapper{
		margin: 0 0 0 0;
		flex-direction: column;}	
		
	.sub-halfwrapper img{
		width: 100%!important;}	
		
	.bottom-console{
		margin: 40% 15% 10% 0;}
		
	.fa-chevron-left, .fa-chevron-right, .fa-home{
		width: 30%;}
		
	.errorpage h1{
		font-size: 3em;}	
		
	.error-send{
		width: 40%;
		position: absolute;
		top: 17%;
		left: 58%;}	
		
	.error-crashed{
		width: 100%;}
		
	.elkuldve{
		width: 100%;}
		
	.contact{
		display: block;
		min-height: 300px;}
		
	.contact p{
		font-size: 0.7em;}	
		
	.contact-img{
		max-width: 100%;
		margin: 20px 0;}
		
	.contact-form img{
		width: 20%!important;}	
		
	.contact-me{
		width: 100%;
		margin: auto 0 -30px 0;}	
		
	input[type=text], input[type=email]{
		margin: 0;}
		
	textarea{
		height: 250px;
		margin: 0;}
		
	.contact button{
		width: 100%;}
}



/* ========================================================= ROW ========================================================= */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.3333333333%;
		}

		.row > .off-1 {
			margin-left: 8.3333333333%;
		}

		.row > .col-2 {
			width: 16.6666666667%;
		}

		.row > .off-2 {
			margin-left: 16.6666666667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.3333333333%;
		}

		.row > .off-4 {
			margin-left: 33.3333333333%;
		}

		.row > .col-5 {
			width: 41.6666666667%;
		}

		.row > .off-5 {
			margin-left: 41.6666666667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.3333333333%;
		}

		.row > .off-7 {
			margin-left: 58.3333333333%;
		}

		.row > .col-8 {
			width: 66.6666666667%;
		}

		.row > .off-8 {
			margin-left: 66.6666666667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.3333333333%;
		}

		.row > .off-10 {
			margin-left: 83.3333333333%;
		}

		.row > .col-11 {
			width: 91.6666666667%;
		}

		.row > .off-11 {
			margin-left: 91.6666666667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0px;
			margin-left: 0px;
		}

			.row.gtr-0 > * {
				padding: 0px 0 0 0px;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0px;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0px;
				}

		.row.gtr-25 {
			margin-top: -12.5px;
			margin-left: -12.5px;
		}

			.row.gtr-25 > * {
				padding: 12.5px 0 0 12.5px;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -12.5px;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 12.5px;
				}

		.row.gtr-50 {
			margin-top: -25px;
			margin-left: -25px;
		}

			.row.gtr-50 > * {
				padding: 25px 0 0 25px;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -25px;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 25px;
				}

		.row {
			margin-top: -50px;
			margin-left: -50px;
		}

			.row > * {
				padding: 50px 0 0 50px;
			}

			.row.gtr-uniform {
				margin-top: -50px;
			}

				.row.gtr-uniform > * {
					padding-top: 50px;
				}

		.row.gtr-150 {
			margin-top: -75px;
			margin-left: -75px;
		}

			.row.gtr-150 > * {
				padding: 75px 0 0 75px;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -75px;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 75px;
				}

		.row.gtr-200 {
			margin-top: -100px;
			margin-left: -100px;
		}

			.row.gtr-200 > * {
				padding: 100px 0 0 100px;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -100px;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 100px;
				}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.3333333333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.3333333333%;
				}

				.row > .col-2-xlarge {
					width: 16.6666666667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.6666666667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.3333333333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.3333333333%;
				}

				.row > .col-5-xlarge {
					width: 41.6666666667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.6666666667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.3333333333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.3333333333%;
				}

				.row > .col-8-xlarge {
					width: 66.6666666667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.6666666667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.3333333333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.3333333333%;
				}

				.row > .col-11-xlarge {
					width: 91.6666666667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.6666666667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -12.5px;
					margin-left: -12.5px;
				}

					.row.gtr-25 > * {
						padding: 12.5px 0 0 12.5px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -12.5px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 12.5px;
						}

				.row.gtr-50 {
					margin-top: -25px;
					margin-left: -25px;
				}

					.row.gtr-50 > * {
						padding: 25px 0 0 25px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -25px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 25px;
						}

				.row {
					margin-top: -50px;
					margin-left: -50px;
				}

					.row > * {
						padding: 50px 0 0 50px;
					}

					.row.gtr-uniform {
						margin-top: -50px;
					}

						.row.gtr-uniform > * {
							padding-top: 50px;
						}

				.row.gtr-150 {
					margin-top: -75px;
					margin-left: -75px;
				}

					.row.gtr-150 > * {
						padding: 75px 0 0 75px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -75px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 75px;
						}

				.row.gtr-200 {
					margin-top: -100px;
					margin-left: -100px;
				}

					.row.gtr-200 > * {
						padding: 100px 0 0 100px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -100px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 100px;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.3333333333%;
				}

				.row > .off-1-large {
					margin-left: 8.3333333333%;
				}

				.row > .col-2-large {
					width: 16.6666666667%;
				}

				.row > .off-2-large {
					margin-left: 16.6666666667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.3333333333%;
				}

				.row > .off-4-large {
					margin-left: 33.3333333333%;
				}

				.row > .col-5-large {
					width: 41.6666666667%;
				}

				.row > .off-5-large {
					margin-left: 41.6666666667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.3333333333%;
				}

				.row > .off-7-large {
					margin-left: 58.3333333333%;
				}

				.row > .col-8-large {
					width: 66.6666666667%;
				}

				.row > .off-8-large {
					margin-left: 66.6666666667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.3333333333%;
				}

				.row > .off-10-large {
					margin-left: 83.3333333333%;
				}

				.row > .col-11-large {
					width: 91.6666666667%;
				}

				.row > .off-11-large {
					margin-left: 91.6666666667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -8.75px;
					margin-left: -8.75px;
				}

					.row.gtr-25 > * {
						padding: 8.75px 0 0 8.75px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -8.75px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 8.75px;
						}

				.row.gtr-50 {
					margin-top: -17.5px;
					margin-left: -17.5px;
				}

					.row.gtr-50 > * {
						padding: 17.5px 0 0 17.5px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -17.5px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 17.5px;
						}

				.row {
					margin-top: -35px;
					margin-left: -35px;
				}

					.row > * {
						padding: 35px 0 0 35px;
					}

					.row.gtr-uniform {
						margin-top: -35px;
					}

						.row.gtr-uniform > * {
							padding-top: 35px;
						}

				.row.gtr-150 {
					margin-top: -52.5px;
					margin-left: -52.5px;
				}

					.row.gtr-150 > * {
						padding: 52.5px 0 0 52.5px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -52.5px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 52.5px;
						}

				.row.gtr-200 {
					margin-top: -70px;
					margin-left: -70px;
				}

					.row.gtr-200 > * {
						padding: 70px 0 0 70px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -70px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 70px;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.3333333333%;
				}

				.row > .off-1-medium {
					margin-left: 8.3333333333%;
				}

				.row > .col-2-medium {
					width: 16.6666666667%;
				}

				.row > .off-2-medium {
					margin-left: 16.6666666667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.3333333333%;
				}

				.row > .off-4-medium {
					margin-left: 33.3333333333%;
				}

				.row > .col-5-medium {
					width: 41.6666666667%;
				}

				.row > .off-5-medium {
					margin-left: 41.6666666667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.3333333333%;
				}

				.row > .off-7-medium {
					margin-left: 58.3333333333%;
				}

				.row > .col-8-medium {
					width: 66.6666666667%;
				}

				.row > .off-8-medium {
					margin-left: 66.6666666667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.3333333333%;
				}

				.row > .off-10-medium {
					margin-left: 83.3333333333%;
				}

				.row > .col-11-medium {
					width: 91.6666666667%;
				}

				.row > .off-11-medium {
					margin-left: 91.6666666667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -12.5px;
					margin-left: -12.5px;
				}

					.row.gtr-25 > * {
						padding: 12.5px 0 0 12.5px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -12.5px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 12.5px;
						}

				.row.gtr-50 {
					margin-top: -25px;
					margin-left: -25px;
				}

					.row.gtr-50 > * {
						padding: 25px 0 0 25px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -25px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 25px;
						}

				.row {
					margin-top: -50px;
					margin-left: -50px;
				}

					.row > * {
						padding: 50px 0 0 50px;
					}

					.row.gtr-uniform {
						margin-top: -50px;
					}

						.row.gtr-uniform > * {
							padding-top: 50px;
						}

				.row.gtr-150 {
					margin-top: -75px;
					margin-left: -75px;
				}

					.row.gtr-150 > * {
						padding: 75px 0 0 75px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -75px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 75px;
						}

				.row.gtr-200 {
					margin-top: -100px;
					margin-left: -100px;
				}

					.row.gtr-200 > * {
						padding: 100px 0 0 100px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -100px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 100px;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.3333333333%;
				}

				.row > .off-1-small {
					margin-left: 8.3333333333%;
				}

				.row > .col-2-small {
					width: 16.6666666667%;
				}

				.row > .off-2-small {
					margin-left: 16.6666666667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.3333333333%;
				}

				.row > .off-4-small {
					margin-left: 33.3333333333%;
				}

				.row > .col-5-small {
					width: 41.6666666667%;
				}

				.row > .off-5-small {
					margin-left: 41.6666666667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.3333333333%;
				}

				.row > .off-7-small {
					margin-left: 58.3333333333%;
				}

				.row > .col-8-small {
					width: 66.6666666667%;
				}

				.row > .off-8-small {
					margin-left: 66.6666666667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.3333333333%;
				}

				.row > .off-10-small {
					margin-left: 83.3333333333%;
				}

				.row > .col-11-small {
					width: 91.6666666667%;
				}

				.row > .off-11-small {
					margin-left: 91.6666666667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -7.5px;
					margin-left: -7.5px;
				}

					.row.gtr-25 > * {
						padding: 7.5px 0 0 7.5px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -7.5px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 7.5px;
						}

				.row.gtr-50 {
					margin-top: -15px;
					margin-left: -15px;
				}

					.row.gtr-50 > * {
						padding: 15px 0 0 15px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -15px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 15px;
						}

				.row {
					margin-top: -30px;
					margin-left: -30px;
				}

					.row > * {
						padding: 30px 0 0 30px;
					}

					.row.gtr-uniform {
						margin-top: -30px;
					}

						.row.gtr-uniform > * {
							padding-top: 30px;
						}

				.row.gtr-150 {
					margin-top: -45px;
					margin-left: -45px;
				}

					.row.gtr-150 > * {
						padding: 45px 0 0 45px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -45px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 45px;
						}

				.row.gtr-200 {
					margin-top: -60px;
					margin-left: -60px;
				}

					.row.gtr-200 > * {
						padding: 60px 0 0 60px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -60px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 60px;
						}

		}