


#offering {
    overflow-x: hidden;
	margin-top: -50vh;
	margin-bottom: -20vh;
    padding-top: 20vh;
    padding-bottom: 20vh;
}
@media (min-width: 1000px) {
	#offering {
        margin-top: -45vw;
        margin-bottom: -20vw;
        padding: 20vw 0;
        width: 100%;
        margin-left: 0;
	}
}

@font-face {
    font-family: "Organize";
    src: url("../fonts/OrganizeVF.woff2") format("woff2");
    optical-size: 0 300;
    font-style: normal;
}

.about_display {
	z-index: 1;
	margin-top: 15vw;
}
@media (min-width: 1000px) {
	.about_display {
		margin-top: 0;
	}
}

.about_display p {
	z-index: 2;
    position: relative;
}
.about_display .display {
    height: 20vw;
}

#establish .display {
	background: url(../img/about/establish.gif) no-repeat top left;
    background-size: contain;
	height: 30vw;
	width: 100%;
    margin: 0 0 -4vw -2.5vw;
}
#establish .display img {
	opacity: 0;
}
@media (min-width: 1000px) {
	#establish .display {
		height: inherit;
        width: 70%;
	}
	#establish .display img {
		opacity: 1;
	}
	#establish:hover .display img {
		opacity: 0;
	}
	#establish .display {
		background: none;
	}
	#establish:hover .display {
		background: url(../img/about/establish.gif) no-repeat top left;
		background-size: contain;
	}
}
#organize .display {
    width: 100%;
	margin: 0 0 7vw -1.5vw;
}
@media (min-width: 1000px) {
	#organize .display {
		margin: -6vw 0 -2vw -.35vw;
	}
}
#organize .display h2 {
	font-family: 'Organize';
	text-transform: uppercase;
	font-feature-settings: normal;
	margin: 11vw 0 -11vw;
    display: inline-block;
	font-variation-settings: "opsz" 0;
	font-size: 18vw;
}
#organize .display h2 {
    animation: organize_animation_2 infinite;
    animation-timing-function: cubic-bezier(0.750, 0.000, 0.250, 1.000);
    animation-duration: 4s;
}
@media (min-width: 1000px) {
	#organize .display h2 {
		animation: none;
        font-size: 7vw;
        margin: 10vw 0 -10vw;
	}
	#organize:hover .display h2 {
		animation: organize_animation_2 infinite;
		animation-timing-function: cubic-bezier(0.750, 0.000, 0.250, 1.000);
		animation-duration: 4s;
	}
}
@keyframes organize_animation {
    0%   { font-variation-settings: 'opsz' 0; }
    7%   { font-variation-settings: 'opsz' 4; }
    11%   { font-variation-settings: 'opsz' 11; }
    15%   { font-variation-settings: 'opsz' 33; }
    17%   { font-variation-settings: 'opsz' 50; }
    19%   { font-variation-settings: 'opsz' 67; }
    23%   { font-variation-settings: 'opsz' 89; }
    27%   { font-variation-settings: 'opsz' 96; }
    33.33%  { font-variation-settings: 'opsz' 100; }
    40%   { font-variation-settings: 'opsz' 104; }
    44%   { font-variation-settings: 'opsz' 111; }
    48%   { font-variation-settings: 'opsz' 133; }
    50%   { font-variation-settings: 'opsz' 150; }
    52%   { font-variation-settings: 'opsz' 167; }
    56%   { font-variation-settings: 'opsz' 189; }
    60%   { font-variation-settings: 'opsz' 196; }
    66.66%  { font-variation-settings: 'opsz' 200; }
    73%   { font-variation-settings: 'opsz' 204; }
    77%   { font-variation-settings: 'opsz' 211; }
    81%   { font-variation-settings: 'opsz' 233; }
    83%   { font-variation-settings: 'opsz' 250; }
    85%   { font-variation-settings: 'opsz' 267; }
    89%   { font-variation-settings: 'opsz' 289; }
    93%   { font-variation-settings: 'opsz' 296; }
    100% { font-variation-settings: 'opsz' 300; }
}
@keyframes organize_animation_2 {
    0%   { font-variation-settings: 'opsz' 0; }
    33.33%  { font-variation-settings: 'opsz' 100; }
    66.66%  { font-variation-settings: 'opsz' 200; }
    100% { font-variation-settings: 'opsz' 300; }
}




#renovate .display {
    margin: 0 0 3vw;
    display: inline-block;
    width: 100%;
}

#renovate .renovate_1, #renovate .renovate_2 {
    position: absolute;
    left: -2%;
    top: -13%;
    width: 90%;
}

#renovate .renovate_1:before, #renovate .renovate_2:before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 100%;
}

#renovate .display img {
	position: absolute;
	left: 0;
    top: -28%;
	width: 100%;
	height: 100%;
}
#renovate .display .renovate_2 img {
    opacity: 0;
}

#renovate {
	--reno-ani-speed: 3s;
}

#renovate .display .renovate_1 img {
	animation: renovate_animation_1_1 infinite;
	animation-timing-function: cubic-bezier(0.750, 0.000, 0.250, 1.000);
	animation-duration: var(--reno-ani-speed);
}
#renovate .display .renovate_1 img.reno_img_2 {
	animation: renovate_animation_1_2 infinite;
	animation-timing-function: cubic-bezier(0.750, 0.000, 0.250, 1.000);
	animation-duration: var(--reno-ani-speed);
}
#renovate .display .renovate_1 img.reno_img_3 {
	animation: renovate_animation_1_3 infinite;
	animation-timing-function: cubic-bezier(0.5, 0.000, 0.5, 1.000);
	animation-duration: var(--reno-ani-speed);
}
#renovate .display .renovate_1 img.reno_img_4 {
	animation: renovate_animation_1_4 infinite;
	animation-timing-function: cubic-bezier(0.5, 0.000, 0.5, 1.000);
	animation-duration: var(--reno-ani-speed);
}

#renovate .display .renovate_2 img {
	animation: renovate_animation_2_1 infinite;
	animation-timing-function: cubic-bezier(0.750, 0.000, 0.250, 1.000);
	animation-duration: var(--reno-ani-speed);
}
#renovate .display .renovate_2 img.reno_img_2 {
	animation: renovate_animation_2_2 infinite;
	animation-timing-function: cubic-bezier(0.750, 0.000, 0.250, 1.000);
	animation-duration: var(--reno-ani-speed);
}
#renovate .display .renovate_2 img.reno_img_3 {
	animation: renovate_animation_2_3 infinite;
	animation-timing-function: cubic-bezier(0.5, 0.000, 0.5, 1.000);
	animation-duration: var(--reno-ani-speed);
}
#renovate .display .renovate_2 img.reno_img_4 {
	animation: renovate_animation_2_4 infinite;
	animation-timing-function: cubic-bezier(0.5, 0.000, 0.5, 1.000);
	animation-duration: var(--reno-ani-speed);
}

@media (min-width: 1000px) {
	#renovate .renovate_1, #renovate .renovate_2 {
		width: 83%;
	}
	#renovate .display img {
		top: 0;
	}
	#renovate .display .renovate_1 img, #renovate .display .renovate_1 img.reno_img_2, #renovate .display .renovate_1 img.reno_img_3, #renovate .display .renovate_1 img.reno_img_4, #renovate .display .renovate_2 img, #renovate .display .renovate_2 img.reno_img_2, #renovate .display .renovate_2 img.reno_img_3, #renovate .display .renovate_2 img.reno_img_4 {
		animation: none;
	}

	#renovate:hover .display .renovate_1 img {
		animation: renovate_animation_1_1 infinite;
		animation-timing-function: cubic-bezier(0.750, 0.000, 0.250, 1.000);
		animation-duration: var(--reno-ani-speed);
	}
	#renovate:hover .display .renovate_1 img.reno_img_2 {
		animation: renovate_animation_1_2 infinite;
		animation-timing-function: cubic-bezier(0.750, 0.000, 0.250, 1.000);
		animation-duration: var(--reno-ani-speed);
	}
	#renovate:hover .display .renovate_1 img.reno_img_3 {
		animation: renovate_animation_1_3 infinite;
		animation-timing-function: cubic-bezier(0.5, 0.000, 0.5, 1.000);
		animation-duration: var(--reno-ani-speed);
	}
	#renovate:hover .display .renovate_1 img.reno_img_4 {
		animation: renovate_animation_1_4 infinite;
		animation-timing-function: cubic-bezier(0.5, 0.000, 0.5, 1.000);
		animation-duration: var(--reno-ani-speed);
	}
	
	#renovate:hover .display .renovate_2 img {
		animation: renovate_animation_2_1 infinite;
		animation-timing-function: cubic-bezier(0.750, 0.000, 0.250, 1.000);
		animation-duration: var(--reno-ani-speed);
	}
	#renovate:hover .display .renovate_2 img.reno_img_2 {
		animation: renovate_animation_2_2 infinite;
		animation-timing-function: cubic-bezier(0.750, 0.000, 0.250, 1.000);
		animation-duration: var(--reno-ani-speed);
	}
	#renovate:hover .display .renovate_2 img.reno_img_3 {
		animation: renovate_animation_2_3 infinite;
		animation-timing-function: cubic-bezier(0.5, 0.000, 0.5, 1.000);
		animation-duration: var(--reno-ani-speed);
	}
	#renovate:hover .display .renovate_2 img.reno_img_4 {
		animation: renovate_animation_2_4 infinite;
		animation-timing-function: cubic-bezier(0.5, 0.000, 0.5, 1.000);
		animation-duration: var(--reno-ani-speed);
	}
}

@keyframes renovate_animation_1_1 {
    0%   { transform: rotate(0deg); opacity: 1; }
    40%  { transform: rotate(360deg); opacity: 0; }
    50%  { transform: rotate(360deg); opacity: 0; }
    90%  { transform: rotate(720deg); opacity: 1; }
    100% { transform: rotate(720deg); opacity: 1; }
}
@keyframes renovate_animation_1_2 {
    0%   { transform: rotate(0deg); opacity: 1; }
    35%  { transform: rotate(-360deg); opacity: 0; }
    50%  { transform: rotate(-360deg); opacity: 0; }
    85%  { transform: rotate(-720deg); opacity: 1; }
    100% { transform: rotate(-720deg); opacity: 1; }
}
@keyframes renovate_animation_1_3 {
    0%   { transform: rotate(0deg); opacity: 1; }
    43%  { transform: rotate(360deg); opacity: 0; }
    50%  { transform: rotate(360deg); opacity: 0; }
    93%  { transform: rotate(720deg); opacity: 1; }
    100% { transform: rotate(720deg); opacity: 1; }
}
@keyframes renovate_animation_1_4 {
    0%   { transform: rotate(0deg); opacity: 1; }
    38%  { transform: rotate(-360deg); opacity: 0; }
    50%  { transform: rotate(-360deg); opacity: 0; }
    88%  { transform: rotate(-720deg); opacity: 1; }
    100% { transform: rotate(-720deg); opacity: 1; }
}



@keyframes renovate_animation_2_1 {
    0%   { transform: rotate(0deg); opacity: 0; }
    40%  { transform: rotate(360deg); opacity: 1; }
    50%  { transform: rotate(360deg); opacity: 1; }
    90%  { transform: rotate(720deg); opacity: 0; }
    100% { transform: rotate(720deg); opacity: 0; }
}
@keyframes renovate_animation_2_2 {
    0%   { transform: rotate(0deg); opacity: 0; }
    35%  { transform: rotate(-360deg); opacity: 1; }
    50%  { transform: rotate(-360deg); opacity: 1; }
    85%  { transform: rotate(-720deg); opacity: 0; }
    100% { transform: rotate(-720deg); opacity: 0; }
}
@keyframes renovate_animation_2_3 {
    0%   { transform: rotate(0deg); opacity: 0; }
    43%  { transform: rotate(360deg); opacity: 1; }
    50%  { transform: rotate(360deg); opacity: 1; }
    93%  { transform: rotate(720deg); opacity: 0; }
    100% { transform: rotate(720deg); opacity: 0; }
}
@keyframes renovate_animation_2_4 {
    0%   { transform: rotate(0deg); opacity: 0; }
    38%  { transform: rotate(-360deg); opacity: 1; }
    50%  { transform: rotate(-360deg); opacity: 1; }
    88%  { transform: rotate(-720deg); opacity: 0; }
    100% { transform: rotate(-720deg); opacity: 0; }
}


#expand .display {
	margin: 0;
    display: inline-block;
	width: 100%;
	margin: -6vw 0 6vw;

	--expand-ani-speed: .1s;
	--ex-dur: calc(var(--expand-ani-speed)*30);
}
#expand .display .expand_primary {
	position: absolute;
	left: 0;
    top: 54%;
	width: 60%;
}
.expand_secondary {
	position: absolute;
	left: 0;
    top: 54%;
	width: 60%;
	opacity: 0;
}
@media (min-width: 1000px) {
	#expand .display .expand_primary, .expand_secondary {
		width: 55%;
	}
	#expand .display {
		margin: 0;
	}
}
#expand .expand_secondary {
    animation: expand_animation infinite;
    animation-timing-function: linear;
    animation-duration: 0;
}
@keyframes expand_animation_1 {
    0%   { opacity: 0; }
    1%, 70%  { opacity: 1; }
    71%, 100% { opacity: 0; }
}
@keyframes expand_animation_2 {
    0%, 4.9%  { opacity: 0; }
    5%, 65%  { opacity: 1; }
    66%, 100% { opacity: 0; }
}
@keyframes expand_animation_3 {
    0%, 9.9%  { opacity: 0; }
    10%, 60%  { opacity: 1; }
    61%, 100% { opacity: 0; }
}
@keyframes expand_animation_4 {
    0%, 14.9%  { opacity: 0; }
    15%, 55%  { opacity: 1; }
    56%, 100% { opacity: 0; }
}
@keyframes expand_animation_5 {
    0%, 19.9%  { opacity: 0; }
    20%, 50%  { opacity: 1; }
    51%, 100% { opacity: 0; }
}
#expand .expand_secondary.expand_secondary_1 {	top: 104%; left: -25%; animation: var(--ex-dur) expand_animation_5 infinite;	}
#expand .expand_secondary.expand_secondary_2 {	top: 94%; left: -20%; animation: var(--ex-dur) expand_animation_4 infinite;	}
#expand .expand_secondary.expand_secondary_3 {	top: 84%; left: -15%; animation: var(--ex-dur) expand_animation_3 infinite;	}
#expand .expand_secondary.expand_secondary_4 {	top: 74%; left: -10%; animation: var(--ex-dur) expand_animation_2 infinite;	}
#expand .expand_secondary.expand_secondary_5 {	top: 64%; left: -5%; animation: var(--ex-dur) expand_animation_1 infinite;	}
#expand .expand_secondary.expand_secondary_6 {	top: 44%; left: 5%; animation: var(--ex-dur) expand_animation_1 infinite;	}
#expand .expand_secondary.expand_secondary_7 {	top: 34%; left: 10%; animation: var(--ex-dur) expand_animation_2 infinite;	}
#expand .expand_secondary.expand_secondary_8 {	top: 24%; left: 15%; animation: var(--ex-dur) expand_animation_3 infinite;	}
#expand .expand_secondary.expand_secondary_9 {	top: 14%; left: 20%; animation: var(--ex-dur) expand_animation_4 infinite;	}
#expand .expand_secondary.expand_secondary_10 {	top: 4%; left: 25%; animation: var(--ex-dur) expand_animation_5 infinite;	}

@media (min-width: 1000px) {
    #expand .expand_secondary {
        animation: none;
    }
    #expand .expand_secondary.expand_secondary_1 {	animation: none;	}
    #expand .expand_secondary.expand_secondary_2 {	animation: none;	}
    #expand .expand_secondary.expand_secondary_3 {	animation: none;	}
    #expand .expand_secondary.expand_secondary_4 {	animation: none;	}
    #expand .expand_secondary.expand_secondary_5 {	animation: none;}
    #expand .expand_secondary.expand_secondary_6 {	animation: none; }
    #expand .expand_secondary.expand_secondary_7 {	animation: none;}
    #expand .expand_secondary.expand_secondary_8 {	animation: none;}
    #expand .expand_secondary.expand_secondary_9 {	animation: none;}
    #expand .expand_secondary.expand_secondary_10 {	animation: none;}

    #expand:hover .expand_secondary {
        animation: expand_animation infinite;
        animation-timing-function: linear;
        animation-duration: 0;
    }
    #expand:hover .expand_secondary.expand_secondary_1 {	top: 79%; left: -25%; animation: var(--ex-dur) expand_animation_5 infinite;	}
    #expand:hover .expand_secondary.expand_secondary_2 {	top: 74%; left: -20%; animation: var(--ex-dur) expand_animation_4 infinite;	}
    #expand:hover .expand_secondary.expand_secondary_3 {	top: 69%; left: -15%; animation: var(--ex-dur) expand_animation_3 infinite;	}
    #expand:hover .expand_secondary.expand_secondary_4 {	top: 64%; left: -10%; animation: var(--ex-dur) expand_animation_2 infinite;	}
    #expand:hover .expand_secondary.expand_secondary_5 {	top: 59%; left: -5%; animation: var(--ex-dur) expand_animation_1 infinite;	}
    #expand:hover .expand_secondary.expand_secondary_6 {	top: 49%; left: 5%; animation: var(--ex-dur) expand_animation_1 infinite;	}
    #expand:hover .expand_secondary.expand_secondary_7 {	top: 44%; left: 10%; animation: var(--ex-dur) expand_animation_2 infinite;	}
    #expand:hover .expand_secondary.expand_secondary_8 {	top: 39%; left: 15%; animation: var(--ex-dur) expand_animation_3 infinite;	}
    #expand:hover .expand_secondary.expand_secondary_9 {	top: 34%; left: 20%; animation: var(--ex-dur) expand_animation_4 infinite;	}
    #expand:hover .expand_secondary.expand_secondary_10 {	top: 29%; left: 25%; animation: var(--ex-dur) expand_animation_5 infinite;	}
}




@media (min-width: 1000px) {
    #establish .display, #organize .display, #renovate .display, #expand .display {
        margin: 2vw 0 -3vw -.25vw;
        height: 20vw;
    }
    #establish .display {
        margin: 7.5vw 0 -8.5vw -1.25vw;
    }
}
