/*
8.0 Animations

8.1 General Images
8.2 Icons

*/


/* 8.1 Fade-In/Out Animations */

/* Standard syntax */
@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* Standard syntax */
@keyframes fade-out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* Standard syntax */
@keyframes fade-in-partial-out {
	0% {
		opacity: 0
	}

	30% {
		opacity: 1;
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: .3;
	}
}

/* Standard syntax */
@keyframes fade-in-out {
	0% {
		opacity: 0
	}

	30% {
		opacity: 1;
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: .0;
	}
}

div#illus-mq-animated {
	margin: 10px auto 0px auto;
	position: relative;
	height: 225px;
	width: 100%;
	background: #fff;
}

#illus-mq-animated>* {
	margin: 0px auto 0px auto;
	height: 225px;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	animation: 6s autoplay infinite;
}


div#illus-mq-animated span.illus#step-1 {
	background-image: url('../images/reports/gartner-magic-quadrant-for-network-firewalls-2021.png');
}

div#illus-mq-animated span.illus#step-2 {
	background-image: url('../images/reports/gartner-magic-quadrant-for-sse-2022.png');
}

div#illus-mq-animated span.illus#step-3 {
	background-image: url('../images/reports/gartner-magic-quadrant-for-wan-edge-infrastructure-2021.png');
}

@keyframes autoplay {
	0% {
		visibility: visible
	}

	33.33% {
		visibility: hidden
	}
}

#illus-mq-animated>*:nth-child(1) {
	animation-delay: 0s
}

#illus-mq-animated>*:nth-child(2) {
	animation-delay: 2s
}

#illus-mq-animated>*:nth-child(3) {
	animation-delay: 4s
}





/* 8.2 Solution Overview Animation */

div#solution-overview-animated {
	margin: 40px auto 50px auto;
	opacity: 100;
	position: relative;
	width: 100%;
	min-height: 500px;
}

@media all and (max-width: 1100px) {
	div#solution-overview-animated {
		width: 100%;
		min-height: 400px;
	}
}


@media all and (max-width: 900px) {
	div#solution-overview-animated {
		width: 100%;
		min-height: 300px;
	}
}


@media all and (max-width: 650px) {
	div#solution-overview-animated {
		margin-left: -5%;
		margin-right: -5%;
		width: 110%;
		min-height: 200px;
	}
}



div#solution-overview-animated span.illus {
	margin: 0px auto 0px auto;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	animation-name: fade-in;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-direction: forwards;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.note {
	padding: 15px 15px 15px 15px;
	width: 200px;
	text-align: center;
	background-color: #eee;
	border-radius: 5px;
	position: absolute;
	opacity: 0;
	animation-name: fade-in-out;
	animation-duration: 6s;
	animation-iteration-count: 1;
	animation-direction: forwards;
	animation-fill-mode: forwards;
	display: block;
	z-index: 20;
}

@media all and (max-width: 1100px) {
	div#solution-overview-animated span.note {
		display: none;
	}
}


div#solution-overview-animated span.illus#step-0 {
	/*background-image: url('../images/illus/illus-solution-overview-0.html');*/
	animation-duration: 1s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.illus#step-1 {
	/*background-image: url('../images/illus/illus-solution-overview-1.html');*/
	animation-duration: 1s;
	animation-delay: .7s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.illus#step-1a {
	/*background-image: url('../images/illus/illus-solution-overview-1a.html');*/
	animation-name: fade-in-partial-out;
	animation-duration: 6s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.note#note-1 {
	animation-delay: .5s;
	top: 20%;
	left: 20%;
}

div#solution-overview-animated span.illus#step-2 {
	/*background-image: url('../images/illus/illus-solution-overview-2.html');*/
	animation-duration: 1s;
	animation-delay: 5.7s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.illus#step-2a {
	/*background-image: url('../images/illus/illus-solution-overview-2a.html');*/
	animation-name: fade-in-partial-out;
	animation-duration: 6s;
	animation-delay: 5.5s;
	animation-fill-mode: forwards;
}


div#solution-overview-animated span.note#note-2 {
	animation-delay: 5.5s;
	top: 85%;
	left: 35%;
}

div#solution-overview-animated span.illus#step-3 {
	/*background-image: url('../images/illus/illus-solution-overview-3.html');*/
	animation-duration: 1s;
	animation-delay: 10.7s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.illus#step-3a {
	/*background-image: url('../images/illus/illus-solution-overview-3a.html');*/
	animation-name: fade-in-partial-out;
	animation-duration: 6s;
	animation-delay: 10.5s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.note#note-3 {
	animation-delay: 10.5s;
	top: 65%;
	left: 64%;
}

div#solution-overview-animated span.illus#step-4 {
	/*background-image: url('../images/illus/illus-solution-overview-4.html');*/
	animation-duration: 1s;
	animation-delay: 15.7s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.illus#step-4a {
	/*background-image: url('../images/illus/illus-solution-overview-4a.html');*/
	animation-name: fade-in-partial-out;
	animation-duration: 3.5s;
	animation-delay: 15.5s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.note#note-4 {
	animation-delay: 15.5s;
	top: 20%;
	left: 60%;
}

div#solution-overview-animated span.illus#step-5 {
	/*background-image: url('../images/illus/illus-solution-overview-5.html');*/
	animation-name: fade-in-partial-out;
	animation-duration: 3.5s;
	animation-delay: 18s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.illus#step-6 {
	/*background-image: url('../images/illus/illus-solution-overview-6.html');*/
	animation-duration: 1s;
	animation-delay: 20.7s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.illus#step-6a {
	/*background-image: url('../images/illus/illus-solution-overview-6a.html');*/
	animation-name: fade-in-partial-out;
	animation-duration: 6s;
	animation-delay: 20.5s;
	animation-fill-mode: forwards;
}

div#solution-overview-animated span.note#note-6 {
	animation-delay: 20.5s;
	top: 72%;
	left: 20%;
}


/* 8.3 Logo Dissolve Animation */

@keyframes fade-in-out-10sec {
	0% {
		opacity: 0
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: .0;
	}
}

@keyframes fade-in-out-10sec-repeat {
	0% {
		opacity: 0
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: .0;
	}
}


@keyframes fade-in-1sec {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-in-1sec-repeat {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-out-1sec {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0;
	}
}


div#logos-dissolve div.column {
	min-height: 95px;
	position: relative;
}

div#logos-dissolve div.column.full {
	min-height: initial;
}


div#logos-dissolve a.logo-dissolve {
	margin: 0px auto 0px auto;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	display: block;
	animation-name: fade-in-out-10sec;
	animation-duration: 10s;
	animation-iteration-count: 1;
	animation-direction: forwards;
	animation-fill-mode: forwards;
}



div#logos-dissolve a.logo-dissolve#logo-1a {
	animation-name: fade-in-1sec, fade-out-1sec, fade-in-out-10sec, fade-in-1sec-repeat;
	animation-duration: 1s, 1s, 10s, 1s;
	animation-delay: 0s, 6.5s, 37.5s, 77.5s;
}

div#logos-dissolve a.logo-dissolve#logo-1b {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 7.5s, 47.5s;
}

div#logos-dissolve a.logo-dissolve#logo-1c {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 17.5s, 57.6s;
}

div#logos-dissolve a.logo-dissolve#logo-1d {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 27.5s, 67.5s;
}



div#logos-dissolve a.logo-dissolve#logo-2a {
	animation-name: fade-in-1sec, fade-out-1sec, fade-in-out-10sec, fade-in-1sec-repeat;
	animation-duration: 1s, 1s, 10s, 1s;
	animation-delay: 0s, 13.5s, 44.5s, 84.5s;
}

div#logos-dissolve a.logo-dissolve#logo-2b {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 14.5s, 54.5s;
}

div#logos-dissolve a.logo-dissolve#logo-2c {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 24.5s, 64.5s;
}

div#logos-dissolve a.logo-dissolve#logo-2d {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 34.5s, 74.5s;
}



div#logos-dissolve a.logo-dissolve#logo-3a {
	animation-name: fade-in-1sec, fade-out-1sec, fade-in-out-10sec, fade-in-1sec-repeat;
	animation-duration: 1s, 1s, 10s, 1s;
	animation-delay: 0s, 10.5s, 41.5s, 81.5s;
}

div#logos-dissolve a.logo-dissolve#logo-3b {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 11.5s, 51.5s;
}

div#logos-dissolve a.logo-dissolve#logo-3c {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 21.5s, 61.5s;
}

div#logos-dissolve a.logo-dissolve#logo-3d {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 31.5s, 71.5s;
}




div#logos-dissolve a.logo-dissolve#logo-4a {
	animation-name: fade-in-1sec, fade-out-1sec, fade-in-out-10sec, fade-in-1sec-repeat;
	animation-duration: 1s, 1s, 10s, 1s;
	animation-delay: 0s, 5s, 36s, 76s;
}

div#logos-dissolve a.logo-dissolve#logo-4b {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 6s, 46s;
}

div#logos-dissolve a.logo-dissolve#logo-4c {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 16s, 56s;
}

div#logos-dissolve a.logo-dissolve#logo-4d {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 26s, 66s;
}




div#logos-dissolve a.logo-dissolve#logo-5a {
	animation-name: fade-in-1sec, fade-out-1sec, fade-in-out-10sec, fade-in-1sec-repeat;
	animation-duration: 1s, 1s, 10s, 1s;
	animation-delay: 0s, 8.5s, 39.5s, 79.5s;
}

div#logos-dissolve a.logo-dissolve#logo-5b {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 9.5s, 49.5s;
}

div#logos-dissolve a.logo-dissolve#logo-5c {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 19.5s, 59.5s;
}

div#logos-dissolve a.logo-dissolve#logo-5d {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 29.5s, 69.5s;
}



div#logos-dissolve a.logo-dissolve#logo-6a {
	animation-name: fade-in-1sec, fade-out-1sec, fade-in-out-10sec, fade-in-1sec-repeat;
	animation-duration: 1s, 1s, 10s, 1s;
	animation-delay: 0s, 12s, 43s, 83s;
}

div#logos-dissolve a.logo-dissolve#logo-6b {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 13s, 53s;
}

div#logos-dissolve a.logo-dissolve#logo-6c {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 23s, 63s;
}

div#logos-dissolve a.logo-dissolve#logo-6d {
	animation-name: fade-in-out-10sec, fade-in-out-10sec-repeat;
	animation-duration: 10s, 10s;
	animation-delay: 33s, 73s;
}



/* 5.2.1 Logo Animations */

.slideshow {
	position: relative;
	overflow: hidden;
}

.slideshow .logos {
	background: url('../images/logos/logos-customers-scrolling.png');
	background-size: 4096px 50px;
	background-repeat: repeat-x;
	position: absolute;
	left: 0;
	top: 45px;
	height: 50px;
	width: 12288px;
	animation: slideshow 100s linear infinite;
	/* Hey browser, use your GPU */
	transform: translate3d(0, 0, 0);
}

@media all and (max-width: 700px) {
	.slideshow .logos {
		animation: slideshow 50s linear infinite;
	}
}

@keyframes slideshow {
	0% {
		left: 0;
	}

	100% {
		left: -350%;
	}
}

@keyframes moveSlideshow {
	100% {
		-webkit-transform: translateX(-350%);
	}
}




div.panel#customer-logos-scrolling {
	background-image: url('../images/logos/logos-customers-scrolling.png');
	background-position: 0px 0px;
	background-repeat: repeat-y;
	background-size: 50px 4096px;
	animation: slide 120s linear infinite;
}


@keyframes slide {
	0% {
		background-position: 78% top;
	}

	100% {
		background-position: 78% bottom;
	}
}