/* @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"; */

html,body {
	margin: 0;
	padding: 0;
	background: #f1deb9;
}

.tiles {
	/* width: 750px;
	height: 450px;
    perspective: 1000px; */
    margin-left: 22%;
    margin-right: 22%;
    margin-top: 22%;
    padding-bottom: 19%;
}

.col {
	position: relative;
	float: left;
	margin: 6px;
	width: calc(150px);
	height: calc(106px)
}

.col a {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2
}

.col a:nth-child(1) {
	-webkit-clip-path: polygon(0 0,100% 0,50% 50%);
	clip-path: polygon(0 0,100% 0,50% 50%)
}

.col a:nth-child(2) {
	-webkit-clip-path: polygon(100% 0,100% 100%,50% 50%);
	clip-path: polygon(100% 0,100% 100%,50% 50%)
}

.col a:nth-child(3) {
	-webkit-clip-path: polygon(0 100%,50% 50%,100% 100%);
	clip-path: polygon(0 100%,50% 50%,100% 100%)
}

.col a:nth-child(4) {
	-webkit-clip-path: polygon(0 0,50% 50%,0 100%);
	clip-path: polygon(0 0,50% 50%,0 100%)
}

.col a:hover {
	z-index: 3;
	-webkit-clip-path: none;
	clip-path: none
}

.col a:nth-child(1):hover~.box {
	transform: rotateX(180deg)
}

.col a:nth-child(2):hover~.box {
	transform: rotateY(180deg)
}

.col a:nth-child(3):hover~.box {
	transform: rotateX(-180deg)
}

.col a:nth-child(4):hover~.box {
	transform: rotateY(-180deg)
}

.col a:nth-child(1):hover~.box:after,.col a:nth-child(3):hover~.box:after {
	transform: rotateX(-180deg)
}

.col a:nth-child(2):hover~.box:after,.col a:nth-child(4):hover~.box:after {
	transform: rotateY(-180deg)
}

.col .box {
	position: absolute;
	width: 100%;
	height: 100%;
	font-family: open sans,sans-serif;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
	transform-style: preserve-3d;
	transition: transform .3s ease-in-out
}

.col .box:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: 10px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	border-radius: 2px;
	z-index: 2;
	backface-visibility: hidden
}

.col .box:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #333;
	color: #fff;
	font-size: 10px;
	border-radius: 2px;
	transition-delay: .15s
}

.col:nth-child(1) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	/* background-size: 50% 50%;
	background-position: 50% 50%; */
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #3f51b5;
	/* background: #3f51b5 */
}

.col:nth-child(1) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #3f51b5;
}

.col:nth-child(2) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #1da1f2
}

.col:nth-child(2) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #1da1f2
}

.col:nth-child(3) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #dc4a38
}

.col:nth-child(3) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #dc4a38
}

.col:nth-child(4) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #069
}

.col:nth-child(4) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #069
}

.col:nth-child(5) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #536c8f
}

.col:nth-child(5) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #536c8f
}

.col:nth-child(6) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #f16528
}

.col:nth-child(6) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #f16528
}

.col:nth-child(7) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #0170ba
}

.col:nth-child(7) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #0170ba
}

.col:nth-child(8) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #21759b
}

.col:nth-child(8) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #21759b
}

.col:nth-child(9) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #c356d1
}

.col:nth-child(9) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #c356d1
}

.col:nth-child(10) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: rgb(245, 180, 82)
}

.col:nth-child(10) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: rgb(245, 180, 82)
}

.col:nth-child(11) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #fec540
}

.col:nth-child(11) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #fec540
}

.col:nth-child(12) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #ef8043
}

.col:nth-child(12) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #ef8043
}

.col:nth-child(13) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #2c74be
}

.col:nth-child(13) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #2c74be
}

.col:nth-child(14) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #409ed4
}

.col:nth-child(14) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #409ed4
}

.col:nth-child(15) .box:before {
	content: attr(data-app_text);
	background-repeat: no-repeat;
	background-size: 50% 50%;
	background-position: 50% 50%;
    width:100%;
	height:100%;
	padding-top: 50px;
	font-size: 15px;
	padding-left: 5px;
	padding-right: 5px;
	background: #cc0f15
}

.col:nth-child(15) .box:after {
	content: attr(data-text);
	padding:12px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	background: #cc0f15
}
.title_img{
	margin-top: 6%;
	margin-left: 33.5%;
	width: 31%;
	height: 41.5%;
}
.tweet-it-left-img {
	position: fixed;
	top: 10.5em;
	left: 4%;
	z-index: 1000;
	/* opacity: .5; */
	-webkit-transition: 1s opacity;
	transition: 1s opacity;
	width: 17%;
    height: 58%;
}
.font_img{
	width: 80%;
	height: 100%;
	top:2em;
}