/* Story Styles */
.story-area {
	background-color: #DAF1FA;
}

.story-area .story-pic {
	position: relative; 
}

.story-area .story-pic figure {
	padding-bottom: 150%;
}

.story-area .story-pic .logo {
    position: absolute;
    top: 16%;
    left: 0;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    padding: .5em;
    width: 6.667em;
    height: 6.667em;
    color: var(--primary-color);
}

.story-pic.light-green-leaf .logo {
	color: var(--light-tertiary-color);
}

.story-pic.dark-green-leaf .logo {
	color: var(--tertiary-color);
}

.story-pic.light-blue-leaf .logo {
	color: var(--primary-color);
}

.story-pic.dark-blue-leaf .logo {
	color: var(--dark-primary-color);
}

.story-pic.orange-leaf .logo {
	color: var(--secondary-color);
}

.story-area .story-pic .logo > svg {
	font-size: 3em;
}

.story-area .story-content {
	height: 100%;
}

.story-area .story-content p {
	font-size: 1.7em;
	line-height: 1.2;
	color: var(--dark-primary-color);
	margin: 0;
	font-style: italic;
}

/* End Story Styles */

/* Responsive Min-Width 1025px */
@media screen and (min-width: 1025px) {
	.story-area .story-pic .logo {
	    -ms-transform: translate(-50%, -2rem);
	    -webkit-transform: translate(-50%, -2rem);
	    transform: translate(-50%, -2rem);
	    filter: blur(1.5rem);
	    opacity: 0;
	    transition: .7s ease 0s;
	}
	
	.story-area.visible .story-pic .logo {
	    -ms-transform: translate(-50%, 0);
	    -webkit-transform: translate(-50%, 0);
	    transform: translate(-50%, 0);
	    filter: blur(0);
	    opacity: 1;
	}
	
	.story-area .story-pic .logo > svg {
	    -ms-transform: translateY(-1rem);
	    -webkit-transform: translateY(-1rem);
	    transform: translateY(-1rem);
	    opacity: 0;
	    transition: .7s ease .2s;
	}
	
	.story-area.visible .story-pic .logo > svg {
		-ms-transform: translateY(0);
	    -webkit-transform: translateY(0);
	    transform: translateY(0);
	    opacity: 1;
	}
	
}
/* End Responsive Min-Width 1025px */

/* Responsive Width 1280px */
@media screen and (max-width: 1280px) {
	.story-area .story-pic .logo {
	    -ms-transform: translateX(-30%);
	    -webkit-transform: translateX(-30%);
	    transform: translateX(-30%);
	}
}
/* End Responsive Width 1280px */

/* Responsive Width 1024px */
@media screen and (max-width: 1024px) {
	.story-area .story-content {
		padding-left: 0;
	}
	
	.story-area .story-content p {
		font-size: 1.5em;
	}
}
/* End Responsive Width 1024px */

/* Responsive Width 800px */
@media screen and (max-width: 800px) {
	.story-area .story-content p {
		font-size: 1.1em;
	}
	
	.story-area .story-pic {
		margin-left: auto;
		margin-right: auto;
		max-width: 20em;
	}
}
/* End Responsive Width 800px */

/* Responsive Width 550px */
@media screen and (max-width: 550px) {
	.story-area .story-pic .logo {
		width: 3.33em;
		height: 3.33em;
	}
	
	.story-area .story-pic .logo svg {
		font-size: 1.5em;
	}
}
/* End Responsive Width 550px */