.parain_collection {
	padding:0px;
	font-size:30px;
	text-align:center;
	color:#224606
}
.full-length {
	width: 100%;
	float: left;
	padding-bottom: 80px;
}
.btn {
	display: inline-block;
	padding: 2px 40px;
	font-size: 22px;
	color: #fff;
	border: 2px solid #51a746;
	background-color: #51a746;
	text-decoration: none;
	transition: 0.4s;
	font-family:'fonts/AlwaysTogether-Regular';
}
.btn:hover {
	background-color: transparent;
	color: #51a746;
	transition: 0.4s;
}
.text-desc {
	position: absolute;
	left: 0;
	top: 0;
	background:#fff;
	height: 100%;
	opacity: 0;
	width: 100%;
	padding: 20px;
}
/*= Reset CSS End
================= *

/* effect-1 css */
.port-1 {
	float: left;
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 4px solid rgba(255, 255, 255, 0.9);
}
.port-1 .text-desc {
	opacity: 0.9;
	top: -100%;
	transition: 0.5s;
	color: #000;
	padding: 45px 20px 20px;
}
.port-1 img {
	transition: 0.5s;
}
.port-1:hover img {
	transform: scale(1.2);
}
.port-1.effect-1:hover .text-desc {
	top: 0;
}
.port-1.effect-2 .text-desc {
	top: auto;
	bottom: -100%;
}
.port-1.effect-2:hover .text-desc {
	bottom: 0;
}
.port-1.effect-3 .text-desc {
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	overflow: hidden;
	padding: 0;
}
.port-1.effect-3:hover .text-desc {
	width: 100%;
	top: 0;
	left: 0;
	height: 100%;
	padding: 45px 20px 20px;
}
/* effect-1 css end */

/* effect-2 css */
.port-2 {
	float: left;
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 4px solid rgba(255, 255, 255, 0.9);
	perspective: 800px;
}
.port-2 .text-desc {
	z-index: -1;
	transition: 0.6s;
}
.port-2 .image-box {
	transition: 0.4s;
}
.port-2:hover .image-box {
	transform: rotateX(80deg);
	transform-origin: center bottom 0;
	transition: 0.4s;
}
.port-2.effect-1:hover .text-desc {
	opacity: 1;
}
.port-2.effect-2 .text-desc {
	opacity: 1;
	top: -100%;
}
.port-2.effect-2:hover .text-desc {
	top: 0;
}
.port-2.effect-3 .text-desc {
	opacity: 1;
	top: auto;
	bottom: -100%;
}
.port-2.effect-3:hover .text-desc {
	bottom: 0;
}
/* effect-2 css end */

/* effect-3 css */
.port-3 {
	float: left;
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 4px solid rgba(255, 255, 255, 0.9);
	perspective: 500px;
}
.port-3 img {
	transition: 0.5s;
}
.port-3.effect-1 .text-desc {
	z-index: -1;
	transition: 0.5s;
	transform: rotateX(80deg);
	transform-origin: center top 0;
	padding: 45px 20px 20px;
	opacity: 1;
}
.port-3.effect-1:hover .text-desc {
	transform: none;
}
.port-3.effect-1:hover img {
	opacity: 0;
	transform: scale(1.2)
}
.port-3.effect-2 .text-desc {
	z-index: -1;
	transition: 0.5s;
	transform: rotateX(80deg);
	transform-origin: center bottom 0;
	top: auto;
	bottom: 0;
	padding: 45px 20px 20px;
}
.port-3.effect-2:hover .text-desc {
	transform: none;
	opacity: 1;
}
.port-3.effect-2:hover img {
	transform: translateY(-100%)
}
.port-3.effect-3 .text-desc {
	z-index: -1;
	transition: 0.5s;
	transform: rotateX(80deg);
	transform-origin: center top 0;
	padding: 45px 20px 20px;
}
.port-3.effect-3:hover .text-desc {
	transform: none;
	opacity: 1;
}
.port-3.effect-3:hover img {
	transform: translateY(100%)
}
/* effect-3 css end */

/* effect-4 css */
.port-4 {
	float: left;
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 4px solid rgba(255, 255, 255, 0.9);
	z-index: 10;
}
.port-4.effect-1 img {
	transition: 0.5s;
	transform: rotateY(360deg) scale(1, 1);
}
.port-4.effect-1 .text-desc {
	transform: rotateY(0deg) scale(0, 0);
	transition: 0.5s;
	opacity: 0;
	padding: 45px 20px 20px;
}
.port-4.effect-1:hover .text-desc {
	transform: rotateY(360deg) scale(1, 1);
	opacity: 1;
}
.port-4.effect-1:hover img {
	transform: rotateY(0deg) scale(0, 0);
}
.port-4.effect-2 {
	z-index: 12;
}
.port-4.effect-2 img {
	transition: 0.5s;
	transform: rotateX(360deg) scale(1, 1);
}
.port-4.effect-2 .text-desc {
	transform: rotateX(0deg) scale(0, 0);
	transition: 0.5s;
	opacity: 0;
	padding: 45px 20px 20px;
}
.port-4.effect-2:hover .text-desc {
	transform: rotateX(360deg) scale(1, 1);
	opacity: 1;
}
.port-4.effect-2:hover img {
	transform: rotateX(0deg) scale(0, 0);
}
.port-4.effect-3 img {
	transition: 0.5s;
	transform: rotate(360deg) scale(1, 1);
}
.port-4.effect-3 .text-desc {
	transform: rotate(0deg) scale(0, 0);
	transition: 0.5s;
	opacity: 0;
	padding: 45px 20px 20px;
}
.port-4.effect-3:hover .text-desc {
	transform: rotate(360deg) scale(1, 1);
	opacity: 1;
}
.port-4.effect-3:hover img {
	transform: rotate(0deg) scale(0, 0);
}
/* effect-4 css end */

/* effect-5 css */
.port-5 {
	float: left;
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 4px solid rgba(255, 255, 255, 0.9);
	overflow: visible;
}
.port-5.effect-1 {
	z-index: 9;
}
.port-5.effect-1 img {
	transition: 0.5s;
}
.port-5.effect-1:hover img {
	transform: scale(0.5) translateX(-100%);
	position: relative;
	z-index: 9;
	border: 6px solid rgba(255, 255, 255, 0.9);
}
.port-5.effect-1 .text-desc {
	transform: translateX(100%);
	opacity: 0;
	padding: 40px 20px 20px 90px;
	transition: 0.5s;
}
.port-5.effect-1:hover .text-desc {
	transform: translateX(0px);
	opacity: 1;
}
.port-5.effect-2 {
	z-index: 10;
}
.port-5.effect-2 img {
	transition: 0.5s;
	transform: none);
}
.port-5.effect-2:hover img {
	transform: scale(0.5) translateY(100%);
	position: relative;
	z-index: 9;
	border: 6px solid rgba(255, 255, 255, 0.9);
}
.port-5.effect-2 .text-desc {
	transform: translateY(-100%);
	opacity: 0;
	padding: 20px;
	transition: 0.5s;
}
.port-5.effect-2:hover .text-desc {
	transform: translateY(0px);
	opacity: 1;
}
.port-5.effect-3 img {
	transition: 0.5s;
}
.port-5.effect-3:hover img {
	transform: scale(0.5) translateX(100%);
	position: relative;
	z-index: 9;
	border: 6px solid rgba(255, 255, 255, 0.9);
}
.port-5.effect-3 .text-desc {
	transform: translateX(-100%);
	opacity: 0;
	padding: 40px 90px 20px 20px;
	transition: 0.5s;
}
.port-5.effect-3:hover .text-desc {
	transform: translateX(0px);
	opacity: 1;
}
/* effect-5 css end */

/* effect-6 css */
.port-6 {
	float: left;
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 4px solid rgba(255, 255, 255, 0.9);
	overflow: visible;
}
.port-6.effect-1 {
	z-index: 8;
}
.port-6.effect-1 img {
	transition: 0.5s;
}
.port-6.effect-1:hover img {
	transform: scale(0.3) translateY(110%);
	position: relative;
	z-index: 9;
}
.port-6.effect-1 .text-desc {
	transform: translateY(-100%);
	opacity: 0;
	padding: 10px 20px;
	transition: 0.5s;
}
.port-6.effect-1:hover .text-desc {
	transform: translateY(0px);
	opacity: 1;
}
.port-6.effect-2 {
	z-index: 7;
}
.port-6.effect-2 img {
	transition: 0.6s;
	z-index: 1;
}
.port-6.effect-2:hover img {
	transform: scale(0.3) translateX(110%);
	position: relative;
	z-index: 9;
}
.port-6.effect-2 .text-desc {
	transform: translateX(-100%);
	opacity: 0;
	padding: 40px 120px 20px 20px;
	transition: 0.6s;
}
.port-6.effect-2:hover .text-desc {
	transform: translateX(0px);
	opacity: 1;
}
.port-6.effect-3 img {
	transition: 0.5s;
}
.port-6.effect-3:hover img {
	transform: scale(0.3) translateY(-110%);
	position: relative;
	z-index: 9;
}
.port-6.effect-3 .text-desc {
	transform: translateY(100%);
	opacity: 0;
	padding: 85px 20px 10px;
	transition: 0.5s;
}
.port-6.effect-3:hover .text-desc {
	transform: translateY(0px);
	opacity: 1;
}
/* effect-6 css end */

/* effect-7 css */
.port-7 {
	float: left;
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 4px solid rgba(255, 255, 255, 0.9);
	overflow: hidden;
}
.port-7 .text-desc {
	opacity: 0;
	transition: 0.5s;
	color: #000;
}
.port-7.effect-1 img {
	transition: 0.5s;
	position: relative;
	width: 100%;
	left: 0;
}
.port-7.effect-1:hover img {
	left: 50%;
}
.port-7.effect-1 .text-desc {
	transform: perspective(600px) rotateY(90deg);
	transform-origin: left center 0;
	width: 50%;
	position: absolute;
	left: 0;
	top: 0;
	padding: 18px 10px;
}
.port-7.effect-1:hover .text-desc {
	opacity: 1;
	transform: perspective(600px) rotateY(0deg);
	z-index: 99;
}
.port-7.effect-2 img {
	transition: 0.5s;
	position: relative;
	width: 100%;
	top: 0;
}
.port-7.effect-2:hover img {
	top: 50%;
}
.port-7.effect-2 .text-desc {
	transform: perspective(600px) rotateX(90deg);
	transform-origin: top center 0;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	height: 50%;
	padding: 5px 10px;
}
.port-7.effect-2:hover .text-desc {
	opacity: 1;
	transform: perspective(600px) rotateX(0deg);
	z-index: 99;
}
.port-7.effect-3 img {
	transition: 0.5s;
	position: relative;
	width: 100%;
	right: 0;
}
.port-7.effect-3:hover img {
	right: 50%;
}
.port-7.effect-3 .text-desc {
	transform: perspective(600px) rotateY(-90deg);
	transform-origin: right center 0;
	width: 50%;
	position: absolute;
	left: auto;
	right: 0;
	top: 0;
	padding: 18px 10px;
}
.port-7.effect-3:hover .text-desc {
	opacity: 1;
	transform: perspective(600px) rotateY(0deg);
	z-index: 99;
}
/* effect-7 css end */

/* effect-8 css */
.port-8 {
	float: left;
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 4px solid rgba(255, 255, 255, 0.9);
	overflow: hidden;
}
.port-8 .text-desc {
	opacity: 0;
	transition: 0.5s;
	color: #000;
	padding: 45px 20px 20px;
}
.port-8.effect-1 img {
	transition: 0.5s;
}
.port-8.effect-1:hover img {
	transform: scale(1.1);
}
.port-8.effect-1 .text-desc {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	transform: scale(0);
	backface-visibility: hidden;
}
.port-8.effect-1:hover .text-desc {
	opacity: 1;
	transform: scale(1);
	border-radius: 20%;
}
.port-8.effect-2 img {
	transition: 0.5s;
}
.port-8.effect-2:hover img {
	transform: scale(1.1);
}
.port-8.effect-2 .text-desc {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	transform: scale(0);
	backface-visibility: hidden;
}
.port-8.effect-2:hover .text-desc {
	opacity: 1;
	transform: scale(1);
	border-radius: 50% 0 50% 0;
}
.port-8.effect-2 img {
	transition: 0.5s;
}
.port-8.effect-2:hover img {
	transform: scale(1.1);
}
.port-8.effect-2 .text-desc {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	transform: scale(0);
	backface-visibility: hidden;
}
.port-8.effect-2:hover .text-desc {
	opacity: 1;
	transform: scale(1);
	border-radius: 50% 0 50% 0;
}
.port-8.effect-3 img {
	transition: 0.5s;
}
.port-8.effect-3:hover img {
	transform: scale(1.1);
}
.port-8.effect-3 .text-desc {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	transform: scale(0);
	backface-visibility: hidden;
	background: none;
	padding: 40px 70px 20px;
}
.port-8.effect-3 .text-desc:before, .port-8.effect-3 .text-desc:after {
	background-color: #fff;
	border-radius: 50% 50% 0 0;
	content: "";
	height: 100%;
	left: 50%;
	position: absolute;
	top: 0;
	transform: rotate(-50deg);
	transform-origin: 0 100% 0;
	width: 50%;
	z-index: -1;
}
.port-8.effect-3 .text-desc:after {
	left: 0;
	transform: rotate(50deg);
	transform-origin: 100% 100% 0;
}
.port-8.effect-3:hover .text-desc {
	opacity: 1;
	transform: scale(1);
}
/* effect-8 css end */


/*= Media Screen CSS
==================== */
@media only screen and (max-width: 1090px) {
/* ul {
width: 340px;
margin: 0 auto;
}
 li {
width: 100%;
margin: 20px 0;
}
 .port-5.effect-1 {
z-index: 19;
}*/
}
 @media only screen and (max-width: 360px) {
/* ul {
width: 300px;
}*/
 .port-1 .text-desc, .port-1.effect-3:hover .text-desc, .port-3.effect-1 .text-desc, .port-3.effect-3 .text-desc, .port-4.effect-1 .text-desc, .port-4.effect-2 .text-desc, .port-4.effect-3 .text-desc, .port-8 .text-desc {
padding: 20px;
}
 .text-desc {
padding: 7px;
}
 .port-5.effect-1 .text-desc {
padding: 13px 20px 20px 90px;
}
 .port-5.effect-2 .text-desc {
padding: 10px;
}
 .port-5.effect-3 .text-desc {
padding: 16px 90px 20px 20px;
}
 .port-6.effect-1 .text-desc .btn, .port-6.effect-2 .text-desc .btn, .port-6.effect-3 .text-desc .btn, .port-7.effect-1 .text-desc .btn, .port-7.effect-2 .text-desc .btn, .port-7.effect-3 .text-desc .btn, .port-8.effect-3 .text-desc .btn {
display: none;
}
 .port-6.effect-2 .text-desc {
padding: 20px 120px 20px 20px;
}
 .port-6.effect-3 .text-desc {
padding: 75px 20px 10px;
}
 .port-7.effect-1 .text-desc {
padding: 12px 10px;
}
 .port-8.effect-3 .text-desc {
padding: 28px 70px 20px;
}
}
/*= Media Screen CSS End
======================== */

#pinBoot {
	position: relative;
	max-width: 100%;
	width: 100%;
}
/*img {
	width: 100%;
	max-width: 100%;
	height: auto;
}*/
.white-panel {
	position: absolute;
	background: white;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
	padding: 1px;
}
/*
stylize any heading tags withing white-panel below
*/

.white-panel h1 {
	font-size: 1em;
}
.white-panel h1 a {
	color: #A92733;
}
.white-panel:hover {
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
	margin-top: -5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
/****************************collection_page***************************/