/*----------Animations---------*/
/*----------Logos---------*/
.grow{
	animation: grow 6s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes grow{
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}


.rotate{
	animation: rotate 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes rotate {
	0% { transform: rotate(-3deg); }
	50% { transform: rotate(-7deg); }
	100% { transform: rotate(-3deg); }
}


.rotate-backwards{
	animation: rotate-backwards 5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes rotate-backwards {
	0% { transform: rotate(3deg); }
	50% { transform: rotate(5deg); }
	100% { transform: rotate(3deg); }
}

.float{
	animation: float 6s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes float {
	0% { transform: translate(0,  0px); }
	50%  { transform: translate(0, 15px); }
	100%   { transform: translate(0, 0px); }
}

.floatslow{
	animation: floatslow 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.floatslow:hover {animation-play-state: paused;}
@keyframes floatslow {
	0% { transform: translate(0,  0px); }
	50%  { transform: translate(0, 5px); }
	100%   { transform: translate(0, 0px); }
}

.checkthis{animation: checkthis 7s ease-in-out infinite;}
@keyframes checkthis {
	0% { transform: scale(1); }
	40% { transform: scale(1); }
	45% { transform: scale(1.05); }
	50% { transform: scale(1); }
	55% { transform: scale(1.05); }
	60% { transform: scale(1); }
	100% { transform: scale(1); }
}


/*----------Titles---------*/
@keyframes expand-title{
	from {width: 0;}
	to {width: var(--titlewidth);}
}

@keyframes title-overflow {
  from { 
	overflow: hidden;
	white-space: nowrap;
   }
   to {
	overflow: auto;
	white-space: wrap;
   }
}

/*----------Photos---------*/
.throw-photo-left{animation: throw-photo-left 1s var(--curve-quart) forwards;}
@keyframes throw-photo-left {
	from {transform: translateX(100vw) rotate(10deg);}
	to {transform: translateX(0) rotate(-10deg);}
}

.throw-photo-right{animation: throw-photo-right 1s var(--curve-quart) forwards;}
@keyframes throw-photo-right {
	from {transform: translateX(-100vw) rotate(0deg);}
	to {transform: translateX(0) rotate(10deg);}
}