* {
	box-sizing:border-box;
	transition:all 0.3s;
	-webkit-transition:all 0.3s;
	}

.arrow {
	7878background-color: rgba(0,0,0,5);
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E") !important;
	}

.container-thumbs {
	position:relative;
	width:75px; 
	height: 55px; 
	padding: 0; 
	border: 0px;
	}

.arrow-collection {
	position:relative;
	float:left;
	margin:10%;
	}

/* ARROW 1 */
#arrow-1 #arrow-mask-check {display:none;}

#arrow-1 .arrow {
	position:relative;
	float:left;
	7878border:4px solid #FFF;
	border-radius:100%;
	7878width:40px;
	7878height:40px;
	}



/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	#arrow-1 .arrow {
		width:32px;
		height:32px;
		/** border: 3px solid #FFF; **/
		border: 0px;   transform: translateX(20px) !important; 
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	#arrow-1 .arrow {
		width:27px;
		height:27px;
		/** border: 3px solid #FFF; **/
		border: 0px;   transform: translateX(20px) !important;
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	#arrow-1 .arrow {
		width:27px;
		height:27px;
		/** border: 3px solid #FFF; **/
		border: 0px;  transform: translateX(20px) !important;
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	#arrow-1 .arrow {
		width:29px;
		height:29px;
		/** border: 3px solid #FFF; **/
		border: 0px;   transform: translateX(20px) !important;
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	#arrow-1 .arrow {
		width: 30px;
		height: 30px; 
		/** border: 4px solid #FFF; **/
		border: 0px;   transform: translateX(20px) !important; 
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	#arrow-1 .arrow {
		width:31px;
		height:31px;
		/** border: 4px solid #FFF; **/
		border: 0px;     transform: translateX(20px) !important;  
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	#arrow-1 .arrow {
		width:32px;
		height:32px;
		/** border: 4px solid #FFF; **/
		border: 0px;    transform: translateX(20px) !important; 
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	#arrow-1 .arrow {
		width:33px;
		height:33px; 
		/** border: 4px solid #FFF; **/
		border: 0px;   transform: translateX(35px) !important;   transform: translateX(20px) !important;  
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	#arrow-1 .arrow {
		width:40px; width: 34px;
		height:40px; height: 34px;
		border:4px solid #FFF; 
		/** border: 4px solid #FFF; **/
		border: 0px;  777transform: translateX(90px) !important; transform: translateX(20px) !important; 
		} 
	}











#arrow-1 .arrow .arrow-mask {
	position:relative;
	float:left;
	11top:-33px;
	11left:-33px;
	11border:21px solid transparent;  
	}

#arrow-1 .arrow .arrow-mask:before {
	content:'';
	position:relative;
	float:left;
	11top:16px;
	11left:28px;
	11width:4px;
	11height:16px;
	background-color:#FFF;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transition:all 0.3s;
	-webkit-transition:all 0.3s;
	}

#arrow-1 .arrow .arrow-mask:after {
	content:'';
	position:relative;
	float:left;
	11top:9px;
	11left:28px;
	11width:4px;
	11height:16px;
	background-color:#FFF;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transition:all 0.3s;
	-webkit-transition:all 0.3s;
	}





/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	#arrow-1 .arrow .arrow-mask {
		position:relative;
		float:left;
		top:-33px; top: -40px;
		left:-33px; left: -40px;
		border:21px solid transparent;  
  		}

	#arrow-1 .arrow .arrow-mask:before {
		content:'';
		position:relative;
		float:left;
		top:16px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}

	#arrow-1 .arrow .arrow-mask:after {
		content:'';
		position:relative;
		float:left;
		top:9px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */  	
	#arrow-1 .arrow .arrow-mask {
		position:relative;
		float:left;
		top:-33px; top: -40px;
		left:-33px; left: -40px;
		border:21px solid transparent;   

  		}

	#arrow-1 .arrow .arrow-mask:before {
		top:16px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}

	#arrow-1 .arrow .arrow-mask:after {
		content:'';
		position:relative;
		float:left;
		top:9px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	#arrow-1 .arrow .arrow-mask {
		position:relative;
		float:left;
		top:-33px; top: -40px;
		left:-33px; left: -40px;
		border:21px solid transparent;   
  		}

	#arrow-1 .arrow .arrow-mask:before {
		content:'';
		position:relative;
		float:left;
		top:16px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}

	#arrow-1 .arrow .arrow-mask:after {
		content:'';
		position:relative;
		float:left;
		top:9px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	#arrow-1 .arrow .arrow-mask {
		position:relative;
		float:left;
		top:-33px; top: -39px;
		left:-33px; left: -38px; left: -39px;
		border:21px solid transparent;  
  		}

	#arrow-1 .arrow .arrow-mask:before {
		content:'';
		position:relative;
		float:left;
		top:16px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}

	#arrow-1 .arrow .arrow-mask:after {
		content:'';
		position:relative;
		float:left;
		top:9px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	#arrow-1 .arrow .arrow-mask {
		position:relative;
		float:left;
		top:-33px; top: -39px;
		left:-33px; 77left: -38px; left: -39px;
		border:21px solid transparent;  
  		}

	#arrow-1 .arrow .arrow-mask:before {
		content:'';
		position:relative;
		float:left;
		top:16px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}

	#arrow-1 .arrow .arrow-mask:after {
		content:'';
		position:relative;
		float:left;
		top:9px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	#arrow-1 .arrow .arrow-mask {
		position:relative;
		float:left;
		top:-33px; top: -37px;
		left:-33px; left: -37px;
		border:21px solid transparent;  
  		}

	#arrow-1 .arrow .arrow-mask:before {
		content:'';
		position:relative;
		float:left;
		top:16px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}

	#arrow-1 .arrow .arrow-mask:after {
		content:'';
		position:relative;
		float:left;
		top:9px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	#arrow-1 .arrow .arrow-mask {
		position:relative;
		float:left;
		top:-33px; top: -37px;
		left:-33px; left: -37px;
		border:21px solid transparent;  
  		}

	#arrow-1 .arrow .arrow-mask:before {
		content:'';
		position:relative;
		float:left;
		top:16px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}

	#arrow-1 .arrow .arrow-mask:after {
		content:'';
		position:relative;
		float:left;
		top:9px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	#arrow-1 .arrow .arrow-mask {
		position:relative;
		float:left;
		top:-33px; top: -37px;
		left:-33px; left: -37px;
		border:21px solid transparent;  
  		}

	#arrow-1 .arrow .arrow-mask:before {
		content:'';
		position:relative;
		float:left;
		top:16px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}

	#arrow-1 .arrow .arrow-mask:after {
		content:'';
		position:relative;
		float:left;
		top:9px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	#arrow-1 .arrow .arrow-mask {
		position:relative;
		float:left;
		top:-33px; top: -36px;
		left:-33px; left: -36px;
		border:21px solid transparent;  
  		}

	#arrow-1 .arrow .arrow-mask:before {
		content:'';
		position:relative;
		float:left;
		top:16px;
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}

	#arrow-1 .arrow .arrow-mask:after {
		content:'';
		position:relative;
		float:left;
		top:9px; 
		left:28px;
		width:4px;
		height:16px;
		background-color:#FFF;
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transition:all 0.3s;
		-webkit-transition:all 0.3s;
		}
	}










#arrow-1 .arrow:hover {cursor:pointer;border-color:#E0346A;}

#arrow-1 .arrow:hover .arrow-mask:before {background-color:#E0346A;}

#arrow-1 .arrow:hover .arrow-mask:after {background-color:#E0346A;}

#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow {border-color:transparent;border-width:0;}

#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {
	7878left:-10px;
	7878top:-29px;
	}



/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {
		left:-10px; left: -35px;
		top:-29px; top: -34px; ;
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {
		left:-10px; left: -35px;
		top:-29px; top: -34px; 
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {
		left:-10px; left: -35px;
		top:-29px; top: -34px;  
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {
		left:-10px; left: -35px;
		top:-29px; 11top: -34px; 
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {
		left:-10px; left: -35px;
		top:-29px; top: -34px; 
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {
		left:-10px; left: -35px;
		top:-29px; top: -34px; 
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {
		left:-10px; left: -35px;
		top:-29px; top: -34px;  
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {
		left:-10px; left: -35px;
		top:-29px; top: -34px;  
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask {
		left:-10px; left: -35px;
		top:-29px; top: -34px;  
		} 
	}


#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask:before {background-color:#E0346A;transform:rotate(405deg);-webkit-transform:rotate(405deg);}

#arrow-1 #arrow-mask-check:checked ~ .arrow-mask-label .arrow-mask:after {background-color:#E0346A;transform:rotate(-405deg);-webkit-transform:rotate(-405deg);}