/* 
	@elements
--------------------------------------
  Base element styles
-------------------------------------- */

/* 
	@grid
--------------------------------------
    Bootstrap grid customizations
-------------------------------------- */

/* Default XS */

/* 
	@well
--------------------------------------
  Wells with responsive modifiers
-------------------------------------- */

/* 
	@thumbs
--------------------------------------
  thumb
-------------------------------------- */

/* 
	@body
--------------------------------------
  Body layout styles
-------------------------------------- */

/* 
	@typography
--------------------------------------
  Typography styles
-------------------------------------- */

/* 
	@header
--------------------------------------
  The site header
-------------------------------------- */

/* 
	@footer
--------------------------------------
  Custom styles for site-footer
-------------------------------------- */


/* 
	@sections
--------------------------------------
  Custom styles per section
-------------------------------------- */

@media (min-width: 480px) {
	
	
}
@media (min-width: 640px) {
	
	
}

/* --------------
	photobook 
   -------------- */

#photobook {
	margin-top: 36px;
}
#photobook .section-title {
    text-align: center;
    position: relative;
    margin-bottom: 8%;
}
#photobook .section-title:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 3px;
    background: black;
    width: 8%;
}

.photobook-1-well,
.photobook-2-well,
.photobook-3-well,
.photobook-4-well,
.photobook-5-well,
.photobook-6-well {
  	padding: 9% 10% 0%;
}
.photobook-1,
.photobook-2,
.photobook-3,
.photobook-4,
.photobook-5,
.photobook-6 {
	position: relative;
	background: black;
	box-shadow: 28px 28px 57px rgba(0,0,0,.25);
}
.shop-2 {
	position: relative;
	background: black;
	box-shadow: 28px 28px 57px rgba(0,0,0,.25);
}
.photobook-1 img,
.photobook-2 img,
.photobook-3 img,
.photobook-4 img,
.photobook-5 img,
.photobook-6 img {
	position: relative;
	z-index: 1;
	opacity: 1;
	-webkit-backface-visibility: hidden;
  	backface-visibility: hidden;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
}
.photobook-1,
.photobook-2,
.photobook-3,
.photobook-4,
.photobook-5,
.photobook-6 {
	position: relative;
	overflow: hidden;
}
.shop-2 {
	position: relative;
	overflow: hidden;
}
.photobook-1::after,
.photobook-2::after,
.photobook-3::after,
.photobook-4::after,
.photobook-5::after,
.photobook-6::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	right: -1px;
	width: 50%;
	background: #2D4059;
	mix-blend-mode: multiply; /*low support*/
	opacity: .9; /* for other browsers */
	-webkit-transform: translateX(100%);
  	transform: translateX(100%);
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
}
.shop-2::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	right: -1px;
	width: 50%;
	background: #2D4059;
	mix-blend-mode: multiply; /*low support*/
	opacity: .9; /* for other browsers */
	-webkit-transform: translateX(100%);
  	transform: translateX(100%);
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
}
.photobook-2::after {
	background: #617C8C;
}
.shop-2::after {
	background: #617C8C;
}
.photobook-3::after {
	background: #8C1178;
}
.photobook-4::after {
	background: #73193A;
}
.photobook-5::after {
	background: #026873;
}
.photobook-6::after {
	background: #3F4D59;
}
/*.photobook-1:hover::after,
.photobook-2:hover::after,
.photobook-3:hover::after,
.photobook-4:hover::after,
.photobook-5:hover::after,
.photobook-6:hover::after {
  	-webkit-transform: translateX(0);
  	transform: translateX(0);
}*/

.photo-3-well {
  	padding: 9% 10% 25%;
}
.photo-4 {
	position: relative;
	background: black;
	box-shadow: 28px 28px 57px rgba(0,0,0,.25);
}
.photo-4 img {
	position: relative;
	z-index: 1;
	opacity: 1;
	-webkit-backface-visibility: hidden;
  	backface-visibility: hidden;
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
}
.photo-4 {
	position: relative;
	overflow: hidden;
}
.photo-4::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	right: -1px;
	width: 50%;
	/*background: #e90063; claire*/
	background: #60B6BF;
	mix-blend-mode: multiply; /*low support*/
	opacity: .9; /* for other browsers */
	-webkit-transform: translateX(100%);
  	transform: translateX(100%);
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s;
}
.photo-4:hover::after {
  	-webkit-transform: translateX(0);
  	transform: translateX(0);
}

/* 

	@xs
===========================================
	XS Breakpoint 480px 
=========================================== */

@media (min-width: 480px) {
	
}

/* 

	@custom bp
===========================================
	Breakpoint 640, no classes assoc.
=========================================== */

/* 

	@sm
===========================================
	SM Breakpoint 768px 
=========================================== */


@media (min-width: 768px) {
	
	/* --------------
		photobook 
	   -------------- */
	#photobook {
		margin-bottom: -17%;
	}
	#photobook:before {
		content: "";
		position: absolute;
		top: 6%;
		left: -2%;
		right: -2%;
		height: 42%;
	}
	
	#photobook .section-title {
	  	text-align: left;
	  	position: relative;
	  	left: -2%;
	  	margin-bottom: 2vw;
	  	padding-left: 67px;
	}
	#photobook .section-title:before {
	  	content: "";
	  	position: absolute;
	  	top: 50%;
	  	left: 0;
	  	height: 2px;
 	 	background: black;
	  	width: 8%;
	}
	
	#photobook-1,
	#photobook-2,
	#photobook-3,
	#photobook-4,
	#photobook-5,
	#photobook-6 {
		position: relative;
		padding-top: 5%;
		padding-right: 10%;
		width:100%;
	}
	.photobook-1-well,
	.photobook-2-well,
	.photobook-3-well,
	.photobook-4-well,
	.photobook-5-well,
	.photobook-6-well {
		padding: 0% 0 0% 16%;
	}
	.col-sm-5 {
		margin-bottom: 0px;
		padding-bottom: 0px;
		padding-top: 0;
	}
		


}

/* 

	@custom bp
===========================================
	Breakpoint 856, no classes assoc.
=========================================== */



@media (min-width: 865px) {
	
}

/* 

	@md
===========================================
	MD Breakpoint, 992px
=========================================== */

@media (min-width: 992px) {
	
	/* --------------
		photobook 
	   -------------- */	
	#photobook {
		margin-top: 10%;
	}
	#photobook:before {
		top: -1%;
		height: 53%;
	}
	#photobook .section-title {
		/*position: absolute;
		z-index: 5;
		-webkit-transform: rotate(90deg);
		-webkit-transform-origin: right bottom;
		transform: rotate(90deg);
		transform-origin: right bottom;
		right: 6.5%;
		top: 12%;
		left: auto;
		padding: 0 0 0 212px;
		margin: 0;*/
	}
	#photobook .section-title:before {
		width: 5%;
	}

	#photobook-1,
	#photobook-2,
	#photobook-3,
	#photobook-4,
	#photobook-5,
	#photobook-6 {
    	top: -30px;
	}
	.photobook-1-well,
	.photobook-2-well,
	.photobook-3-well,
	.photobook-4-well,
	.photobook-5-well,
	.photobook-6-well {
		padding-top: 2%;
	}

	#photo-3 {
    	top: -30px;
	}
	.photo-3-well {
		padding-top: 18%;
	}

}


/* 

	@lg
===========================================
	LG Breakpoint, 1200px
=========================================== */

@media (min-width: 1200px) {
	
	 /* -------- 
          Photo
         ------- */
	#photobook:before {
		top: 1.25%;
		left: -4%;
		right: -4%;
		height: 51%;
	}
	#photobook:before {
		top: 1.25%;
		left: -4%;
		right: -4%;
		height: 51%;
	}
	#photobook .section-title {
		/* top: 45%; */
		padding-left: 260px;	
		top: auto;
		bottom: 86%;
	}
	#photobook .section-title:before {
		width: 230px;
	}

	#photobook-1,
	#photobook-2,
	#photobook-3,
	#photobook-4,
	#photobook-5,
	#photobook-6 {
    	top: -1.25vw;
	}
	.photobook-1-well,
	.photobook-2-well,
	.photobook-3-well,
	.photobook-4-well,
	.photobook-5-well,
	.photobook-6-well {
		padding: 3% 10% 0%;
	}

	#photo-3 {
    	top: -1.25vw;
	}
	.photo-3-well {
		padding: 20% 10%;
	}




}


/* 

	@custom for xl
===========================================
	1300px
=========================================== */

@media (min-width: 1300px) {



}


/* 

	@custom for xxl
===========================================
	1450px
=========================================== */

@media (min-width: 1450px) {



}