/**
 * Lemon v1.0.1 (https://appalaszynski.github.io/lemon/))
 * Copyright (c) 2018 appalaszynski (https://github.com/appalaszynski)
 * Licensed under MIT (https://github.com/appalaszynski/lemon/blob/master/LICENSE)
 */
/**

/**
 * Basic reset of font-size, box-sizing, margin and padding.
 *
 * 1. Thanks to this declaration You can easily build layout based on rem unit.
 *    The rem unit is relative to the font-size of the root element html.
 *    By default html element font size is 16px, but px-to-percent function converts it to 10px.
 *    Therefore from now 1rem is equal to 10px.
 */
html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;/* base font size of 10 */
}

@media (max-width: 56.25em) {
html {
	font-size: 56.25%;/* base font size of 9 */
}
}
*, *::after, *::before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}
/* Media */
img {
	max-width: 100%;
	width: 100%;
	height: auto;
	border: 0;
}
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed, .video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.container {
	margin: 0 auto;
	max-width: 150rem;
	/* padding: 0 2rem;/*delete padding if you don't like it*/ */
	/* border: thin solid #6C8AEA; */
}
.container.medium {
	max-width: 100rem;
}
.container.small {
	max-width: 80rem;
}
.box {
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	min-height: 500px;
}
.row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	flex-wrap: wrap;
}
.row_lg {
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	align-items: flex-start;
}
#grid {
	padding-top:40px;
	padding-bottom:50px;
	display: grid;
	 grid-template-columns:repeat(auto-fill, minmax(500px, 1fr));
  grid-gap: 20px;
  padding: 10px;
	/*grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: minmax(100px, auto);
	grid-gap: 20px;*/

}
#overlap, #shapes {padding-top:40px;
	padding-bottom:40px;
	display: grid;
    grid-template-columns:repeat(12, 1fr);
grid-template-rows:repeat(12, 100px);
}

.over {display: flex;
	align-items: center;
	justify-content: center;
	/* outline: thin blue solid; */
	padding: 1rem;}
#one {grid-column: 1 /8; grid-row: 1/6;}
#two {grid-column: 2 /10; grid-row: 5/10;}
#three {grid-column: 3 /8; grid-row: 9/12;}
#four {grid-column: 9 /13; grid-row: 1/12;}
#shape_1 {grid-column: 1 /6; grid-row: 1/6;background-image:url(../img/blue_jacket.jpg);background-repeat:no-repeat;background-size:cover;-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);}
#shape_2 {grid-column: 6 /12; grid-row: 2/7;background-image:url(../img/blue_print_shirt.jpg);background-repeat:no-repeat;background-size:cover;-webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);}
#shape_3 {grid-column: 1 /7; grid-row: 7/12;background-image:url(../img/grey_jacket.jpg);;background-repeat:no-repeat;background-size:cover;-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);}
#shape_4 {grid-column: 7 /13; grid-row: 8/13;background-image:url(../img/stripe_shirt.jpeg);background-repeat:no-repeat;background-size:cover;-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);}

/* my shape style here */
#shape_5 {
	grid-column: 1 /8;
	 grid-row: 1/12;
	 background-image:url(../img/oil.jpg);;
	 background-repeat:no-repeat;
	 background-size:cover;
	 -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
	 clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
background-color: #fEDA2F;
}

#modular {display:grid;
grid-template-columns:repeat(5, 1fr);
grid-template-rows:232px 232px 232px;}
#modular > div {outline: thin blue solid;}
#a {grid-column: 1/3; grid-row:1/3;}
#d {grid-column: 3/5; grid-row:1/4;}
#modular h1 {font-size:60px;padding: 10px;}
#modular p {padding:8px;}

#fade {display:grid;
grid-template-columns:repeat(12, 1fr);
	grid-template-rows:repeat(12, 100px);}
#fade > div {outline: thin blue solid;display: flex; align-items: center; justify-content: center;}
#fade_1 {grid-column: 1/5; grid-row:2/8;}
#fade_2 {grid-column: 4/8; grid-row:3/9;}
#fade_3 {grid-column: 9/13; grid-row:6/10;}
#fade_4 {grid-column: 3/6; grid-row:9/12;}

@media screen and (max-width:1100px){
	/*if you need it*/
}


@media screen and (max-width:800px){
	#one {grid-column: 1/7; grid-row: 1/7;}
#two {grid-column: 7/13; grid-row: 1/7;}
#onee {grid-column: 1/7; grid-row: 1/7;} /* responsive my code here*/
#two0 {grid-column: 7/13; grid-row: 1/7;} /* responsive my code here*/
#three {grid-column: 1/7; grid-row: 7/13;}
#four {grid-column: 7 /13; grid-row: 7/13;}
	#a {grid-column: 1/6; grid-row:1/2;}
	#b {grid-column: 1/2; grid-row:2/3;}
#d {grid-column: 4/6; grid-row:2/4;}
	#modular p {line-height: 15px;
		font-size: 13px;}
#fade_1 {grid-column: 1/6; grid-row:2/6;}
#fade_2 {grid-column: 6/12; grid-row:2/6;}
#fade_3 {grid-column: 1/6; grid-row:6/12;}
#fade_4 {grid-column: 6/12; grid-row:6/12;}

}
@media screen and (max-width:600px){
	#one {grid-column: 1/13; grid-row: 1/3;}
#two {grid-column: 1/13; grid-row: 3/6;}
#onee {grid-column: 1/7; grid-row: 1/7;} /* responsive my code here*/
#two0 {grid-column: 7/13; grid-row: 1/7;} /* responsive my code here*/
#three {grid-column: 1/13; grid-row: 6/9;}
#four {grid-column: 1 /13; grid-row: 9/12;}
	#modular {display:grid;
grid-template-columns:repeat(2, 1fr);
grid-template-rows:1fr 1fr 1fr 1fr 1fr;}
}

.child {
	display: flex;
	align-items: center;
	justify-content: center;
	/* outline: thin blue solid; */
	padding: 1rem;
	min-height: 600px;
}
.item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 250px;
	/* outline: thin blue solid; */
	padding: 1rem;
	min-height: 300px;
}
/* Justify Row  borrowed fron thimble*/
.justify-start {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.justify-end {
	-webkit-justify-content: flex-end;
	-moz-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
.justify-center {
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.justify-space {
	-webkit-justify-content: space-between;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.justify-around {
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
/* Row Direction */
.reverse {
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve, .fifths, .half, .third, .noflex {
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
}
/*grid borrowed from thimble*/
.twelve {
	width: 100%;
}
.eleven {
width:calc(100%/12 * 11);
}
.ten {
width:calc(100%/12 * 10);
}
.nine {
	width: 75%;
}
.eight {
width:calc(100%/12 * 8);
}
.seven {
width:calc(100%/12 * 7);
}
.six, .half {
	width: 50%;
}
.five {
width:calc(100%/12 * 5);
}
.four, .third {
width:calc(100%/12 * 4);
}
.three {
	width: 25%;
}
.two {
width:calc(100%/12 * 2);
}
.one {
	width: calc(100%/12);
}
.fifths {
	width: 20%;
}

/* ALIGNMENT  borrowed from thimble*/
.align-top {
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-align-self: flex-start;
	-ms-flex-item-align: start;
	align-self: flex-start;
}
.align-bottom {
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-align-self: flex-end;
	-ms-flex-item-align: end;
	align-self: flex-end;
}
.align-center {
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;
}
.align-baseline {
	-webkit-align-items: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}
.align-stretch {
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}


@media (max-width: 600px) {
.row {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}
.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve, .fifths, .half, .third, .noflex {
	width: 100%;
}
}

/* ORDERING  borrowed from thimble*/
.o1 {
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
}
.o2 {
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
}
.o3{
	-ms-flex-order: 3;
	-webkit-order: 3;
	order: 3;
}
.o4 {
	-ms-flex-order: 4;
	-webkit-order: 4;
	order: 4;
}
.o5 {
	-ms-flex-order: 5;
	-webkit-order: 5;
	order: 5;
}
.o6 {
	-ms-flex-order: 6;
	-webkit-order: 6;
	order: 6;
}
.o7 {
	-ms-flex-order: 7;
	-webkit-order: 7;
	order: 7;
}
.o8 {
	-ms-flex-order: 8;
	-webkit-order: 8;
	order: 8;
}
.o9 {
	-ms-flex-order: 9;
	-webkit-order: 9;
	order: 9;
}
.o10{
	-ms-flex-order: 10;
	-webkit-order: 10;
	order: 10;
}
.o11 {
	-ms-flex-order: 11;
	-webkit-order: 11;
	order: 11;
}
.o12{
	-ms-flex-order: 12;
	-webkit-order: 12;
	order: 12;
}
.column {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 0 1.0rem;
	outline: thin blue solid;
	min-height:200px;
}
.column.column-50 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	display: flex;
}
.clearfix:after {
	clear: both;
	content: ' ';
	display: table;
}
.float-left {
	float: left;
}
.float-right {
	float: right;
}
.mb {
	margin-bottom: 2rem;
}
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}
input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.btn, .btn:link, .btn:visited, button, input[type='button'], input[type='reset'], input[type='submit'] {
	background-color: #dbbb2b;
	border: 0.1rem solid #dbbb2b;
	border-radius: 0.4rem;
	color: white;
	cursor: pointer;
	display: inline-block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	line-height: 3.8rem;
	padding: 0 3rem;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	vertical-align: middle;
	margin-bottom: 1rem;
}
.btn:focus, .btn:hover, .btn:link:focus, .btn:link:hover, .btn:visited:focus, .btn:visited:hover, button:focus, button:hover, input[type='button']:focus, input[type='button']:hover, input[type='reset']:focus, input[type='reset']:hover, input[type='submit']:focus, input[type='submit']:hover {
	background-color: #ca4d46;
	border: 0.1rem solid #ca4d46;
	outline: 0;
	color: white;
}
.btn:disabled, .btn:link:disabled, .btn:visited:disabled, button:disabled, input[type='button']:disabled, input[type='reset']:disabled, input[type='submit']:disabled {
	cursor: default;
	opacity: 0.5;
}
.btn:disabled:focus, .btn:disabled:hover, .btn:link:disabled:focus, .btn:link:disabled:hover, .btn:visited:disabled:focus, .btn:visited:disabled:hover, button:disabled:focus, button:disabled:hover, input[type='button']:disabled:focus, input[type='button']:disabled:hover, input[type='reset']:disabled:focus, input[type='reset']:disabled:hover, input[type='submit']:disabled:focus, input[type='submit']:disabled:hover {
	background-color: #dbbb2b;
	border-color: #dbbb2b;
}
.btn.outline, .btn:link.outline, .btn:visited.outline, button.outline, input[type='button'].outline, input[type='reset'].outline, input[type='submit'].outline {
	background-color: transparent;
	color: #dbbb2b;
}
.btn.outline:focus, .btn.outline:hover, .btn:link.outline:focus, .btn:link.outline:hover, .btn:visited.outline:focus, .btn:visited.outline:hover, button.outline:focus, button.outline:hover, input[type='button'].outline:focus, input[type='button'].outline:hover, input[type='reset'].outline:focus, input[type='reset'].outline:hover, input[type='submit'].outline:focus, input[type='submit'].outline:hover {
	color: #ca4d46;
}
.btn.outline:disabled:focus, .btn.outline:disabled:hover, .btn:link.outline:disabled:focus, .btn:link.outline:disabled:hover, .btn:visited.outline:disabled:focus, .btn:visited.outline:disabled:hover, button.outline:disabled:focus, button.outline:disabled:hover, input[type='button'].outline:disabled:focus, input[type='button'].outline:disabled:hover, input[type='reset'].outline:disabled:focus, input[type='reset'].outline:disabled:hover, input[type='submit'].outline:disabled:focus, input[type='submit'].outline:disabled:hover {
	background-color: inherit;
	border-color: inherit;
	color: #dbbb2b;
}
.btn.btn-full, .btn:link.btn-full, .btn:visited.btn-full, button.btn-full, input[type='button'].btn-full, input[type='reset'].btn-full, input[type='submit'].btn-full {
	display: block;
	width: 100%;
}
code {
	background-color: #f6f6f6;
	padding: 0.2rem 0.5rem 0.2rem 0.5rem;
	font-size: 120%;
	border-radius: 0.4rem;
	margin: 0 0.2rem;
}
pre {
	background-color: #2196F3;
	overflow-y: scroll;
	padding: 1rem;
	border-bottom: 0.4rem solid #dbbb2b;
	margin-bottom: 2rem;
}
pre > code {
	padding: 0;
	font-size: 1.6rem;
}
blockquote {
	border-left: 0.4rem solid #dbbb2b;
	padding: 1rem 2rem;
	background-color: #f6f6f6;
	margin-bottom: 2rem;
}
blockquote *:last-of-type {
	margin-bottom: 0;
}
blockquote cite {
	display: block;
	text-align: right;
}
hr {
	margin: 3rem 0;
	border: 0;
	border-top: 0.1rem solid #dbbb2b;
}
a, a:link {
	color: #ca4d46;
	text-decoration: none;
}
a:hover, a:focus, a:active, a:link:hover, a:link:focus, a:link:active, a:visited:hover, a:visited:focus, a:visited:active {
	color: #ca4d46;
	outline: 0;
}
input[type='email'], input[type='number'], input[type='password'], input[type='search'], input[type='tel'], input[type='text'], input[type='url'], input[type='color'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input:not([type]), textarea, select {
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0.1rem solid #363c41;
	font-size: 1.6rem;
	border-radius: .4rem;
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
	height: 3.8rem;
	padding: .6rem 1.0rem;
	margin-bottom: 1.5rem;
	color: #363c41;
}
input[type='email']:focus, input[type='number']:focus, input[type='password']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='url']:focus, input[type='color']:focus, input[type='date']:focus, input[type='month']:focus, input[type='week']:focus, input[type='datetime']:focus, input[type='datetime-local']:focus, input:not([type]):focus, textarea:focus, select:focus {
	border-color: #dbbb2b;
	outline: 0;
}
textarea {
	min-height: 6.5rem;
}
label, legend {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: .5rem;
}
input[type='checkbox'], input[type='radio'] {
	display: inline;
}
select {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa/EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf+b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo/Ma2bajrGtbaC58kCdZ1RZ7nl/4/4d5EsO/7nzl7IUtodBexMMagaRrs+06JLMvcNWmaOv2W/C/TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye+QDMDz1D6yuj9wAAAABJRU5ErkJggg==) right center no-repeat;
}
.label-inline {
	display: inline-block;
	font-weight: normal;
	margin-left: .5rem;
	margin-bottom: 0;
}

::-webkit-input-placeholder, ::-moz-placeholder, :-moz-placeholder, :-ms-input-placeholder {
 color: #363c41;
}
dl, ol, ul {
	list-style: none;
	margin-top: 0;
	padding-left: 0;
	margin-bottom: 2rem;
}
dl dl, dl ol, dl ul, ol dl, ol ol, ol ul, ul dl, ul ol, ul ul {
	margin: 0 0 0 1.5rem;
}
ol {
	list-style: decimal inside;
}
ul {
	list-style: none;
}