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

Table of Contents

1. Mocups container
2. Mockup block
3. Mockup block info
4. Mockup block plugin
5.1 Mockup one
5.2 Mockup two
5.3 Mockup three
5.4 Mockup four
5.5 Mockup five
5.6 Mockup six

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



/* 1. Mockups container */

#mockups {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}



/* 2. Mockup block */

.mockup-block {
	display: flex;
	width: calc(50% - 20px);
	margin-bottom: 40px;
}

.mockup-block:nth-child(even) {
	flex-direction: row-reverse;
}



/* 3. Mockup block info */

.mockup-info {
	display: flex;
	flex-direction: column;
	width: 320px;
	box-sizing: border-box;
	padding: 0 20px;
	background-color: #18191a;
}

.mockup-info > h4 {
	display: block;
	box-sizing: border-box;
	padding: 0 10px 13px;
	margin: 0;
	color: #585c60;
	font-size: 16px;
	font-weight: 800;
	border-bottom: 1px solid #3a3b3c;
}

.mockup-description {
	flex-grow: 1;
}

.mockup-description > p {
	font-size: 14px;
	color: #adb0b5;
}

.mockup-description > p strong {
	font-weight: 500;
	color: #e4e6eb;
}

.mockup-info > .button {
	width: 100%;
	margin: 20px 0 0;
}



/* 4. Mockup block plugin */

.mockup-plugin {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #242526;
}



/* 5.1 Mockup one  */

#mockup-one {
	width: calc(100% - 20px);
	margin: 10px auto;
}



/* 5.2 Mockup two */

#mockup-two-layout {
	position: relative;
	width: calc(100% - 20px);
	margin: 10px auto;
}

#mockup-two {
	width: 100%;
}

#mockup-two-cntnt {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 0;
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	transform: translateY(-50%);
	background-color: #3a3b3c;
}



/* 5.3 Mockup three */

#mockup-three-layout {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: calc(100% - 20px);
	margin: 10px auto;
}

#mockup-three {
	width: 100%;
}

#mockup-three-cntnt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #3a3b3c;
}

#mockup-three-cntnt h4 {
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	margin: 0;
}



/* 5.4 Mockup four */

#mockup-four {
	width: calc(100% - 20px);
	margin: 10px auto;
}



/* 5.5 Mockup five */

#mockup-five {
	width: calc(100% - 20px);
	margin: 10px auto;
}



/* 5.6 Mockup six */

#mockup-six-layout {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	width: calc(100% - 20px);
	margin: 10px auto;
}

#mockup-six {
	z-index: 1;
	width: 100%;
}

#mockup-six-cntnt {
	position: absolute;
	z-index: 2;
}

#mockup-six-cntnt > div {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

#mockup-six-cntnt > div span {
	display: block;
	position: relative;
	z-index: 3;
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
}

#mockup-six-cntnt > div:before {
	content: '';
	position: absolute;
	z-index: 1;
	top: 20%;
	left: 20%;
	right: 20%;
	bottom: 20%;
	background: #3a3b3c;
	transform: rotate(45deg);
}



@media screen and (max-width: 1440px) { 
	
	.mockup-description > p {
		font-size: 13px;
	}
}

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

	#mockups {
		display: block;
	}

	.mockup-block {
		width: 100%;
	}
}

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

	.mockup-block,
	.mockup-block:nth-child(even) {
		flex-direction: column-reverse;
	}

	.mockup-plugin {
		width: 100%;
	}

	.mockup-info {
		padding: 20px 20px 0;
	}
}

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

	.mockup-info {
		padding: 20px 10px 0;
	}
}