.cont {
	overflow: hidden;
	position: relative;
	z-index:1;
	left: 0px;
    bottom: 0px;
    right: 0px;
    top: 0px;
    padding: 0;

}

.cont .overlayAlt {
	overflow: hidden !IMPORTANT;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 0px;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	animation: color-me-in 6s infinite;
  	z-index:1;
  	padding-left: 25px;
	padding-top: 20px;
	padding-bottom: 10px;
	padding-right: 25px;
}

@keyframes color-me-in {
  0% {
    background: #ff72cb;
  }
  33.4% {
    background: #ffea00;
  }
  66.4% {
    background: #42cbed;
    }
	100% {
    background: #ff72cb;
   } 
}

.cont .overlayAlt .expo-text {
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding-bottom: 0px;
	opacity: 1;
	
}

.cont:hover .overlayAlt {
	opacity: 0.95;
	width: 100%;
	height: 100%;
	transition-delay: 0s;
}

.cont .overlaySide {
	overflow: hidden !IMPORTANT;
	position: absolute;
	bottom: 0px;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 0px;
	opacity: 0;
	transition: .3s ease;
	animation: color-me-in 6s infinite;
  	z-index:1;
  	padding-left: 25px;
	padding-top: 20px;
	padding-bottom: 10px;
	padding-right: 25px;
}

@keyframes color-me-in {
  0% {
    background: #ff72cb;
  }
  33.4% {
    background: #ffea00;
  }
  66.4% {
    background: #42cbed;
    }
	100% {
    background: #ff72cb;
   } 
}

.cont .overlaySide .expo-text {
	
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding-bottom: 0px;
	opacity: 1;
	
}

.cont:hover .overlaySide {
	opacity: 0.95;
	width: 100%;
	height: 100%;
	transition-delay: 0s;
}


j {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 2em;
	letter-spacing: 0.004em;
	line-height: 1.25em;
	text-transform: "";
	display: inline-block;
	margin-top: 0em;
	margin-bottom: 0.5em;
	

	color: #ffffff;
}

@media only screen and (max-width: 475px) {
    j {
    font-size: 1.75em;
	letter-spacing: 0.005em;
	line-height: 1.5em;
	
    }
}

@media only screen and (max-width: 415px) {
    j {
    font-size: 1.65em;
	letter-spacing: 0.005em;
	line-height: 1.3em;
	margin-bottom: 0.3em;
    }
}

@media only screen and (max-width: 370px) {
    j {
    font-size: 1.4em;
	letter-spacing: 0.005em;
	line-height: 1.1em;
    }
}


g {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 1.5em;
	letter-spacing: 0.005em;
	line-height: 1.5em;
	text-transform: "";
	color: #ffffff;
	display: inline-block;
	padding-bottom: 0.8em;
}

@media only screen and (max-width: 475px) {
    g {
    font-size: 1.4em;
	letter-spacing: 0.005em;
	line-height: 1.25em;
    }
}

@media only screen and (max-width: 415px) {
    g {
    font-size: 1.2em;
	letter-spacing: 0.005em;
	line-height: 1.2em;
	padding-bottom: 0.6em;
    }
}

@media only screen and (max-width: 370px) {
    g {
    font-size: 1.15em;
	letter-spacing: 0.005em;
	line-height: 1.2em;
	padding-bottom: 0.9em;
    }
}

f {
	font-family: 'Merriweather Sans', sans-serif;
	font-weight: 700;
	text-align: left;
	font-size: 1em;
	line-height: 5.5em;
	text-transform: uppercase;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding-bottom: 0px;
	color: #000000;
	opacity: 1;
	display: inline;
	padding: 20px 20px 20px 20px;
	background: #FFFFFF;
	position: relative;
	margin-top: 10px;

}

@media only screen and (max-width: 415px) {
    f {
    font-size: 0.8em;
	line-height: 5em;
	padding: 15px 15px 15px 15px;
    }
}

@media only screen and (max-width: 370px) {
    f {
    font-size: 0.7em;
	line-height: 3.5em;
	padding: 10px 10px 10px 10px;
    }
}

f:hover {
	color: #FFFFFF;
	background: #000000;
}


/*///////////// ARROWS /////////////*/


#arrow-turn {
	transition: transform .2s ease-in-out;
	transform: rotate(-90deg);
	float: right;

}

#arrow-turn:hover {
	transform: rotate(90deg);
}

.cont-arrow {
	position: relative;
	display: block;
	padding: 0px 15px 0px 0px;
	width: 100%;
	float: right;
	margin-top: 35px;
	
}

.arrow-text {
	font-family: 'Merriweather Sans', sans-serif;
	font-weight: 300;
	letter-spacing: 0.05em;
	color: #42cbed;
	font-size: 1em;
	line-height: 1.5em;
	text-transform: uppercase;
	padding: 0em 0em 0em 0em;
	text-align: right;
	position: absolute;
	right: 65px;
	top: 10px;	
}

/*///////////// SHAKE /////////////*/




.plus-sign {
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
	color: #42cbed;
	font-size: 5em;
	line-height: 1.5em;
	margin-top: 0px;
	padding: 0em 0em 0em 0em;
	display: inline-block;	
}

.plus-sign:hover, .plus-sign:active {
	animation: shake 0.6s;
	animation-iteration-count: 12;
	color: #e41923;
	transition: 10s;
}

@keyframes shake {
	0% { 	transform: translate(-2px, -2px)
			rotate(0deg); }
	5% {	transform: translate(2px, 2px)
			rotate(0deg); }
	10% {	transform: translate(-2px, -2px)
			rotate(0deg); }
	15% { 	transform: translate(2px, 2px)
			rotate(0deg); }
	20% {	transform: translate(-2px, -2px)
			rotate(0deg); }
	25% {	transform: translate(2px, 2px)
			rotate(0deg); }
	30% { 	transform: translate(-2px, -2px)
			rotate(0deg); }
	35% {	transform: translate(2px, 2px)
			rotate(0deg); }
	40% {	transform: translate(-2px, -2px)
			rotate(0deg); }
	45% { 	transform: translate(2px, 2px)
			rotate(0deg); }
	50% {	transform: translate(-2px, -2px)
			rotate(0deg); }
	55% { 	transform: translate(2px, 2px)
			rotate(0deg); }
	60% {		transform: translate(-2px, -2px)
			rotate(0deg); }
	65% {		transform: translate(2px, 2px)
			rotate(0deg); }
	70% { 	transform: translate(-2px, -2px)
			rotate(0deg); }
	75% {		transform: translate(2px, 2px)
			rotate(0deg); }
	80% {		transform: translate(-2px, -2px)
			rotate(0deg); }
	85% { 	transform: translate(2px, 2px)
			rotate(0deg); }
	90% {		transform: translate(-2px, -2px)
			rotate(0deg); }
	95% {		transform: translate(2px, 2px)
			rotate(0deg); }
	10% { 	transform: translate(0px, 0px)
			rotate(0deg); }
}