/*
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('../resources/reports/gartner-magic-quadrants-2022/gartner-magic-quadrant-for-network-firewalls-2021.png');
	}
		
div#illus-mq-animated span.illus#step-2 {
	background-image: url('../resources/reports/gartner-magic-quadrants-2022/gartner-magic-quadrant-for-sse-2022.png');
	}
		
div#illus-mq-animated span.illus#step-3 {
	background-image: url('../resources/reports/gartner-magic-quadrants-2022/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.png');
	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.png');
	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.png');
	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.png');
	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.png');
	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.png');
	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.png');
	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.png');
	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.png');
	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.png');
	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.png');
	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.png');
	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; }
	}