/* ============================================================
   Animated Images
   ============================================================ */
#photo-collection {
	position: relative;
	min-height: 270px;
	overflow: hidden;
}
.photo {
	position: absolute;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
	height: 70px;
	width: 70px;
}
#photo1 {
	animation-name: opacity, slidingphoto1-phone;
	background: url(../../images/summerpolicysummit/Presley-High-Res-Photo-New_mini_mini_mini.jpg) center top / cover no-repeat;
}
#photo2 {
	animation-name: opacity, slidingphoto2-phone;
	background: url(../../images/summerpolicysummit/Sadzi_Oliva.png) center top / cover no-repeat;
}
#photo3 {
	animation-name: opacity, slidingphoto3-phone;
	background: url(../../images/summerpolicysummit/DianeBurman-color-square.jpg) center top / cover no-repeat;
}
#photo4 {
	animation-name: opacity, slidingphoto4-phone;
	background: url(../../images/summerpolicysummit/Kjellander-Paul_color_square.jpg) center top / cover no-repeat;
}
#photo5 {
	animation-name: opacity, slidingphoto5-phone;
	background: url(../../images/summerpolicysummit/nowak.jpg) center top / cover no-repeat;
}
#photo6 {
	animation-name: opacity, slidingphoto6-phone;
	background: url(../../images/summerpolicysummit/Eric_Anderson_color_square.jpg) center top / cover no-repeat;
}
#photo7 {
	animation-name: opacity, slidingphoto7-phone;
	background: url(../../images/summerpolicysummit/Rendahl_color_square.jpg) center top / cover no-repeat;
}
#photo8 {
	animation-name: opacity, slidingphoto8-phone;
	background: url(../../images/summerpolicysummit/jeffreypackermann_web_color_square.jpg) center top / cover no-repeat;
}
#photo9 {
	animation-name: opacity, slidingphoto9-phone;
	background: url(../../images/summerpolicysummit/Commissioner_Brown_color_square.jpg) center top / cover no-repeat;
}
#photo10 {
	animation-name: opacity, slidingphoto10-phone;
	background: url(../../images/summerpolicysummit/Holden-Mary-Anna_color_square.jpg) center top / cover no-repeat;
}
#photo11 {
	animation-name: opacity, slidingphoto11-phone;
	background: url(../../images/summerpolicysummit/Nick-Wagner_color_square.jpg) center top / cover no-repeat;
}
#photo12 {
	animation-name: opacity, slidingphoto12-phone;
	background: url(../../images/summerpolicysummit/Maida-Coleman_2019_color.jpg) center top / cover no-repeat;
}
#screen {
	border-radius: 12px;
	background-color: rgb(20, 20, 20);
	position: absolute;
	top: 20px;
	right: calc(50% - 150px);
	width: 300px;
	height: 230px;
}
#keyboard {
	position: absolute;
	right: calc(50% - 150px);
	width: 300px;
	height: 0px;
	top: 250px;
	border-bottom: solid 10px rgb(20, 20, 20);
	border-left: solid 10px transparent;
	border-right: solid 10px transparent;
}

/* ============================================================
   Animated Images on Phones
   ============================================================ */
@keyframes slidingphoto1-phone {
	from {
		top: -120px;
		left: -250px;
		}
	to {
		top: 30px;
		left: calc(50% - 140px);
	}
}
@keyframes slidingphoto2-phone {
	from {
		top: -120px;
		left: -70px;
	}
	to {
		top: 30px;
		left: calc(50% - 70px);
	}
}
@keyframes slidingphoto3-phone {
	from {
		top: -70px;
		right: -70px;
	}
	to {
		top: 30px;
		right: calc(50% - 70px);
	}
}
@keyframes slidingphoto4-phone {
	from {
		top: -70px;
		right: -230px;
	}
	to {
		top: 30px;
		right: calc(50% - 140px);
	}
}
@keyframes slidingphoto5-phone {
	from {
		top: 70px;
		left: -70px;
	}
	to {
		top: 100px;
		left: calc(50% - 140px);
	}
}
@keyframes slidingphoto6-phone {
	from {
		top: -320px;
		left: -210px;
	}
	to {
		top: 100px;
		left: calc(50% - 70px);
	}
}
@keyframes slidingphoto7-phone {
	from {
		top: -450px;
		right: -320px;
	}
	to {
		top: 100px;
		right: calc(50% - 70px);
	}
}
@keyframes slidingphoto8-phone {
	from {
		top: 240px;
		right: -250px;
	}
	to {
		top: 100px;
		right: calc(50% - 140px);
	}
}
@keyframes slidingphoto9-phone {
	from {
		top: 170px;
		left: -70px;
	}
	to {
		top: 170px;
		left: calc(50% - 140px);
	}
}
@keyframes slidingphoto10-phone {
	from {
		top: 450px;
		left: -250px;
	}
	to {
		top: 170px;
		left: calc(50% - 70px);
	}
}
@keyframes slidingphoto11-phone {
	from {
		top: 190px;
		right: -250px;
	}
	to {
		top: 170px;
		right: calc(50% - 70px);
	}
}
@keyframes slidingphoto12-phone {
	from {
		top: -230px;
		right: -230px;
	}
	to {
		top: 170px;
		right: calc(50% - 140px);
	}
}
@keyframes opacity {
	from {
		opacity: 0%;
	}
	to {
		opacity: 100%;
	}
}

/* ============================================
   Animation on tablets
   ============================================ */
@keyframes slidingphoto1-tablet {
	from {
		top: -120px;
		left: -250px;
		}
	to {
		top: 30px;
		left: calc(100% - 305px);
	}
}
@keyframes slidingphoto2-tablet {
	from {
		top: -120px;
		left: -70px;
	}
	to {
		top: 30px;
		left: calc(100% - 235px);
	}
}
@keyframes slidingphoto3-tablet {
	from {
		top: -70px;
		left: -70px;
	}
	to {
		top: 30px;
		left: calc(100% - 165px);
	}
}
@keyframes slidingphoto4-tablet {
	from {
		top: -70px;
		right: -70px;
	}
	to {
		top: 30px;
		right: 25px;
	}
}
@keyframes slidingphoto5-tablet {
	from {
		top: 70px;
		left: -70px;
	}
	to {
		top: 100px;
		left: calc(100% - 305px);
	}
}
@keyframes slidingphoto6-tablet {
	from {
		top: -320px;
		left: -210px;
	}
	to {
		top: 100px;
		left: calc(100% - 235px);
	}
}
@keyframes slidingphoto7-tablet {
	from {
		top: -450px;
		right: -320px;
	}
	to {
		top: 100px;
		right: 95px;
	}
}
@keyframes slidingphoto8-tablet {
	from {
		top: 240px;
		right: -250px;
	}
	to {
		top: 100px;
		right: 25px;
	}
}
@keyframes slidingphoto9-tablet {
	from {
		top: 170px;
		left: -70px;
	}
	to {
		top: 170px;
		left: calc(100% - 305px);
	}
}
@keyframes slidingphoto10-tablet {
	from {
		top: 450px;
		left: -250px;
	}
	to {
		top: 170px;
		left: calc(100% - 235px);
	}
}
@keyframes slidingphoto11-tablet {
	from {
		top: 190px;
		right: -250px;
	}
	to {
		top: 170px;
		right: 95px;
	}
}
@keyframes slidingphoto12-tablet {
	from {
		top: -230px;
		right: -230px;
	}
	to {
		top: 170px;
		right: 25px;
	}
}

/* ============================================
   Animation on laptops and desktops
   ============================================ */
@keyframes slidingphoto1 {
	from {
		top: -120px;
		left: -250px;
		}
	to {
		top: 30px;
		left: calc(70% - 200px);
	}
}
@keyframes slidingphoto2 {
	from {
		top: -120px;
		left: -100px;
	}
	to {
		top: 30px;
		left: calc(70% - 100px);
	}
}
@keyframes slidingphoto3 {
	from {
		top: -100px;
		left: -100px;
	}
	to {
		top: 30px;
		left: calc(70%);
	}
}
@keyframes slidingphoto4 {
	from {
		top: -70px;
		right: -70px;
	}
	to {
		top: 30px;
		right: calc(30% - 200px);
	}
}
@keyframes slidingphoto5 {
	from {
		top: 130px;
		left: -100px;
	}
	to {
		top: 130px;
		left: calc(70% - 200px);
	}
}
@keyframes slidingphoto6 {
	from {
		top: -320px;
		left: -210px;
	}
	to {
		top: 130px;
		left: calc(70% - 100px);
	}
}
@keyframes slidingphoto7 {
	from {
		top: -450px;
		right: -320px;
	}
	to {
		top: 130px;
		right: calc(30% - 100px);
	}
}
@keyframes slidingphoto8 {
	from {
		top: 240px;
		right: -250px;
	}
	to {
		top: 130px;
		right: calc(30% - 200px);
	}
}
@keyframes slidingphoto9 {
	from {
		top: 170px;
		left: -100px;
	}
	to {
		top: 230px;
		left: calc(70% - 200px);
	}
}
@keyframes slidingphoto10 {
	from {
		top: 450px;
		left: -250px;
	}
	to {
		top: 230px;
		left: calc(70% - 100px);
	}
}
@keyframes slidingphoto11 {
	from {
		top: 230px;
		right: -250px;
	}
	to {
		top: 230px;
		right: calc(30% - 100px);
	}
}
@keyframes slidingphoto12 {
	from {
		top: -230px;
		right: -230px;
	}
	to {
		top: 230px;
		right: calc(30% - 200px);
	}
}

@keyframes opacity {
	from {
		opacity: 0%;
	}
	to {
		opacity: 100%;
	}
}

@media (min-width: 768px) {
	#photo1 {
		animation-name: opacity, slidingphoto1-tablet;
	}
	#photo2 {
		animation-name: opacity, slidingphoto2-tablet;
	}
	#photo3 {
		animation-name: opacity, slidingphoto3-tablet;
	}
	#photo4 {
		animation-name: opacity, slidingphoto4-tablet;
	}
	#photo5 {
		animation-name: opacity, slidingphoto5-tablet;
	}
	#photo6 {
		animation-name: opacity, slidingphoto6-tablet;
	}
	#photo7 {
		animation-name: opacity, slidingphoto7-tablet;
	}
	#photo8 {
		animation-name: opacity, slidingphoto8-tablet;
	}
	#photo9 {
		animation-name: opacity, slidingphoto9-tablet;
	}
	#photo10 {
		animation-name: opacity, slidingphoto10-tablet;
	}
	#photo11 {
		animation-name: opacity, slidingphoto11-tablet;
	}
	#photo12 {
		animation-name: opacity, slidingphoto12-tablet;
	}
	#screen {
		right: 15px;
	}
	#keyboard {
		right: 15px;
	}
}
@media (min-width: 992px) {
	#photo-collection {
		min-height: 370px;
	}
	.photo {
		width: 100px;
		height: 100px;
	}
	#photo1 {
		animation-name: opacity, slidingphoto1;
	}
	#photo2 {
		animation-name: opacity, slidingphoto2;
	}
	#photo3 {
		animation-name: opacity, slidingphoto3;
	}
	#photo4 {
		animation-name: opacity, slidingphoto4;
	}
	#photo5 {
		animation-name: opacity, slidingphoto5;
	}
	#photo6 {
		animation-name: opacity, slidingphoto6;
	}
	#photo7 {
		animation-name: opacity, slidingphoto7;
	}
	#photo8 {
		animation-name: opacity, slidingphoto8;
	}
	#photo9 {
		animation-name: opacity, slidingphoto9;
	}
	#photo10 {
		animation-name: opacity, slidingphoto10;
	}
	#photo11 {
		animation-name: opacity, slidingphoto11;
	}
	#photo12 {
		animation-name: opacity, slidingphoto12;
	}
	#screen {
		right: calc(30% - 210px);
		width: 420px;
		height: 320px;
	}
	#keyboard {
		top: 340px;
		right: calc(30% - 210px);
		width: 420px;
	}
}