.inline-block { display: inline-block; }
.block { display: block; }
.relative { position: relative; }
.clickable { cursor: pointer; }

.nowrap { white-space: nowrap; }
.wrap-long-string {
	overflow-wrap: break-word;
  	word-wrap: break-word;
  	-ms-word-break: break-all;
  	word-break: break-all;
  	word-break: break-word;
  	-ms-hyphens: auto;
  	-moz-hyphens: auto;
  	-webkit-hyphens: auto;
	hyphens: auto;
}

.italics { font-style: italic; }
.bold { font-weight: bold; }
.normal-weight { font-weight: normal !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
.overflow-hidden { overflow: hidden; }
.vertical-mid { vertical-align: middle !important; }
.uppercase { text-transform: uppercase !important; }

.katana-oneline {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.font-8 { font-size: 8px; }		.font-10 { font-size: 10px; }
.font-12 { font-size: 12px; }	.font-14 { font-size: 14px; }	
.font-16 { font-size: 16px; }	.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }	.font-22 { font-size: 22px; }
.font-24 { font-size: 24px; }	.font-26 { font-size: 26px; }

.indent { text-indent: 32px; }
.font-black { color: #000; }
.small-grey-text { color: #AAA; font-size: 80%; margin-left: 8px; }

/* MARGINS AND PADDING */

.margin-0, .no-margin { margin: 0px !important; }
.margin-left-0 { margin-left: 0px !important; }			.margin-right-0 { margin-right: 0px !important; }
.margin-bottom-0 { margin-bottom: 0px !important; }		.margin-top-0 { margin-top: 0px !important; }

.margin-4 { margin: 4px !important; }
.margin-left-4 { margin-left: 4px !important; }			.margin-right-4 { margin-right: 4px !important; }
.margin-bottom-4 { margin-bottom: 4px !important; }		.margin-top-4 { margin-top: 4px !important; }

.margin-8 { margin: 8px !important; }
.margin-left-8 { margin-left: 8px !important; }			.margin-right-8 { margin-right: 8px !important; }
.margin-bottom-8 { margin-bottom: 8px !important; }		.margin-top-8 { margin-top: 8px !important; }

.margin-12 { margin: 12px !important; }
.margin-left-12 { margin-left: 12px !important; }		.margin-right-12 { margin-right: 12px !important; }
.margin-bottom-12 { margin-bottom: 12px !important; }	.margin-top-12 { margin-top: 12px !important; }

.margin-16 { margin: 16px !important; }
.margin-left-16 { margin-left: 16px !important; }		.margin-right-16 { margin-right: 16px !important; }
.margin-bottom-16 { margin-bottom: 16px !important; }	.margin-top-16 { margin-top: 16px !important; }

.margin-24 { margin: 24px !important; }
.margin-left-24 { margin-left: 24px !important; }		.margin-right-24 { margin-right: 24px !important; }
.margin-bottom-24 { margin-bottom: 24px !important; }	.margin-top-24 { margin-top: 24px !important; }

.margin-32 { margin: 32px !important; }
.margin-left-32 { margin-left: 32px !important; }		.margin-right-32 { margin-right: 32px !important; }
.margin-bottom-32 { margin-bottom: 32px !important; }	.margin-top-32 { margin-top: 32px !important; }

.margin-40 { margin: 40px !important; }
.margin-left-40 { margin-left: 40px !important; }		.margin-right-40 { margin-right: 40px !important; }
.margin-bottom-40 { margin-bottom: 40px !important; }	.margin-top-40 { margin-top: 40px !important; }

.margin-48 { margin: 48px !important; }
.margin-left-48 { margin-left: 48px !important; }		.margin-right-48 { margin-right: 48px !important; }
.margin-bottom-48 { margin-bottom: 48px !important; }	.margin-top-48 { margin-top: 48px !important; }

.padding-0 { padding: 0px !important; }
.padding-4 { padding: 4px !important; }
.padding-8 { padding: 8px !important; }
.padding-16 { padding: 16px !important; }
.padding-24 { padding: 24px !important; }
.padding-32 { padding: 32px !important; }
.padding-36 { padding: 36px !important; }
.padding-40 { padding: 40px !important; }
.padding-48 { padding: 48px !important; }
.padding-60 { padding: 60px !important; }

.padding-left-0, .no-padding-left { padding-left: 0px !important; }			.padding-right-0, .no-padding-right { padding-right: 0px !important; }
.padding-top-0, .no-padding-top { padding-top: 0px !important; }			.padding-bottom-0, .no-padding-bottom { padding-bottom: 0px !important; }

.padding-left-4 { padding-left: 4px !important; }		.padding-right-4 { padding-right: 4px !important; }
.padding-top-4 { padding-top: 4px !important; }			.padding-bottom-4 { padding-bottom: 4px !important; }

.padding-left-8 { padding-left: 8px !important; }		.padding-right-8 { padding-right: 8px !important; }
.padding-top-8 { padding-top: 8px !important; }			.padding-bottom-8 { padding-bottom: 8px !important; }

.padding-left-16 { padding-left: 16px !important; }		.padding-right-16 { padding-right: 16px !important; }
.padding-top-16 { padding-top: 16px !important; }		.padding-bottom-16 { padding-bottom: 16px !important; }

.padding-left-24 { padding-left: 24px !important; }		.padding-right-24 { padding-right: 24px !important; }
.padding-top-24 { padding-top: 24px !important; }		.padding-bottom-24 { padding-bottom: 24px !important; }

.padding-left-32 { padding-left: 32px !important; }		.padding-right-32 { padding-right: 32px !important; }
.padding-top-32 { padding-top: 32px !important; }		.padding-bottom-32 { padding-bottom: 32px !important; }

.padding-left-36 { padding-left: 36px !important; }		.padding-right-36 { padding-right: 36px !important; }
.padding-top-36 { padding-top: 36px !important; }		.padding-bottom-36 { padding-bottom: 36px !important; }

.padding-left-40 { padding-left: 40px !important; }		.padding-right-40 { padding-right: 40px !important; }
.padding-top-40 { padding-top: 40px !important; }		.padding-bottom-40 { padding-bottom: 40px !important; }

.padding-left-48 { padding-left: 48px !important; }		.padding-right-48 { padding-right: 48px !important; }
.padding-top-48 { padding-top: 48px !important; }		.padding-bottom-48 { padding-bottom: 48px !important; }

.padding-left-60 { padding-left: 60px !important; }		.padding-right-60 { padding-right: 60px !important; }
.padding-top-60 { padding-top: 60px !important; }		.padding-bottom-60 { padding-bottom: 60px !important; }

/* COLLAPSIBLES AND RESPONSIVENESS*/

.hide-on-desktop { display: none; }
.mobile .hide-on-mobile { display: none; }
.mobile .hide-on-desktop { display: inherit; }

@media all and (max-width: 500px) { .hide-500 { display: none; } }
@media all and (max-width: 640px) { .hide-640 { display: none; } }
@media all and (max-width: 767px) { .hide-767 { display: none; } }
@media all and (max-width: 991px) { .hide-991 { display: none; } }
@media all and (max-width: 1024px) { .hide-1023 { display: none; } }


/* ANIMATIONS */

.gfx-zoomup {
	-webkit-animation: zoomup 400ms ease-out;
	-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes zoomup {
    0% {-webkit-transform: scale(0.8, 0.8); opacity: 0.0;}
    100% {-webkit-transform: scale(1.0, 1.0); opacity: 1.0;}
}

.gfx-fade-in-down {
	-webkit-animation: fadeindown 400ms ease-out;
	-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes fadeindown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}


.gfx-dropin {
	-webkit-animation: dropin 400ms ease-out;
	-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes dropin {
    0% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
    100% {-webkit-transform: scale(1.0, 1.0); opacity: 1.0;}
}


.gfx-screwdown {
	-webkit-animation: screwdown 400ms ease-out;
	-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes screwdown {
    0% {opacity: 0; -webkit-transform: rotate(-180deg) scaleX(2.00) scaleY(2.00);}
    100% {opacity: 1; -webkit-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);}
}


.gfx-heartbeat {
	-webkit-animation: heartbeat 1.2s ease-out;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes heartbeat {
    0% {-webkit-transform: scale(1.0, 1.0);}
    7% {-webkit-transform: scale(1.1, 1.1);}
    14% {-webkit-transform: scale(1.0, 1.0);}
    21% {-webkit-transform: scale(1.05, 1.05);}
    35% {-webkit-transform: scale(1.0, 1.0);}
}

.gfx-pulse {
	-webkit-animation: pulse 0.9s ease-in-out;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes pulse {
    0% {-webkit-transform: scale(1.0, 1.0);}
    25% {-webkit-transform: scale(1.1, 1.1);}
    75% {-webkit-transform: scale(0.9, 0.9);}
    100% {-webkit-transform: scale(1.0, 1.0);}
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.gfx-rubberband {
  -webkit-animation: rubberBand 1.4s ease-in-out;
	-webkit-animation-iteration-count: infinite;
}

@keyframes periodic-bounce {
	0%, 50%, 75%, 90%, 100% {
		-webkit-transform: translateY(0);
    	transform: translateY(0);
  	}
	70% {
		-webkit-transform: translateY(-16px);
    	transform: translateY(-16px);
  	}
	80% {
		-webkit-transform: translateY(-8px);
    	transform: translateY(-8px);
  	}
}
.gfx-periodic-bounce {
    -webkit-animation: periodic-bounce 3s;
	-webkit-animation-iteration-count: infinite;
}

/* VIDEO STUBS */

.max-width-640 {
	max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.aspect-ratio {
	height: 0px;
	padding-bottom: 56.25%;
  	margin-bottom: 1em;
	position: relative;
  	text-align: center;
}
.aspect-ratio iframe, 
.aspect-ratio object, 
.aspect-ratio object embed {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0; top: 0;
}

/* EXPERIMENTAL */

.vertical-centering-container {
	display: -webkit-box;
	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}