/*.row{padding: 20px;}*/
.row{margin: 20px;} /*this is where we left off <<<<<<*/

.feature-image{width:100%; overflow: hidden; border-radius: 10px;}

.feature-image img{position: relative;}


.feature-image-lg{
	width:100%;
	height: 2400px;
	overflow: hidden;
	/*position: relative;*/
	border-radius: 10px;
}
.feature-image-lg img{width: 350%; transform: translate(-50%,-50%); top:50%; left:90%; position: relative;}


.skinny img{border-radius: 10px; width: 100%;}

.txt {padding: 20px 0px;}



@media screen and (min-width: 1024px){
	.feature-image{height: 1100px;}
	.feature-image img{width: 220%; top:-45%; left:-80%; position: relative;}

	.skinny{width: 420px; margin: 0px auto; padding: 100px 0px;}
}

@media screen and (max-width: 1024px){
	.feature-image{height: 1000px;}
	.feature-image img{width: 300%; top:-45%; left:-80%; position: relative;}

	.skinny{width: 100%; margin: 20px auto; padding: 0px;}

	.feature-image-lg img{width: 450%;}
}


.sticky{position: sticky; top:0%;}





/*----------------------------------------------------------------------------------------------------*/

.flip-container {
  display: flex;
  flex-direction: column;
  display: block;
}
.flip-row {
  display: flex;
  flex-direction: row;
  /*padding: 0; margin: 0;*/
  height: auto;
}
@media screen and (max-width: 800px) {
  .flip-container {flex-direction: column;}
  .flip-row {flex-direction: column;}
  .flip-row:nth-child(odd) {flex-direction: column-reverse;}
}