/*ESTUDIO OPEN BANKING*/

#banBanking { background-image: url(../img/banner-banking.webp); background-position: right; background-size: cover; text-align: center; padding: 6.5rem 0 2rem; }
#banBanking h1 { text-shadow: 0px 0px 20px rgba(255, 255, 255, 1); color: #2a2559; font-size: 1.25rem; margin: 1rem 0; }
#banBanking img { width: 90%; }
#contBanking { display: flex; flex-direction: column; }
#flipbookBank { height: 34rem; }
.introBank { padding: 2rem 2.5rem 1rem; }
.introBank h2 { font-weight: 500; color: #2a2559; font-size: 1rem; padding: 0 0 2rem; line-height: 1.3rem; }
.introBank p { font-size: 0.8rem; text-align: justify; padding: 0 0 1rem; line-height: 1rem; }
.introBank li { font-size: 0.9rem; padding-bottom: 0.3rem; font-weight: 400; color: cornflowerblue; }
.introBank li:nth-child(2) { padding-bottom: 2.5rem; }

/* ========================================================================== Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */

/* Small screens 280px */
@media screen and (min-width: 17.5em)
{
}

/* Medium screens 600px */
@media screen and (min-width: 37.5em)
{
	#banBanking h1 { font-size: 1.5rem; }
	#banBanking img { width: 80%; margin-top: 3rem; }
}

/* Medium screens 727px */
@media screen and (min-width: 45.4em)
{
	#banBanking { padding: 4.5rem 0 1rem; background-size: inherit; }
	#banBanking h1 { font-size: 2rem; margin: 3rem 0 2rem; }
	#banBanking img { width: 55%; margin-top: 5rem; }
	#contBanking { flex-direction: row-reverse; margin-bottom: 2rem; }
	#flipbookBank { width: 50%; height: 43rem; }
	.introBank { width: 40%; }
	.introBank h2 { font-size: 1.1rem; line-height: 1.5rem; }
}

/* Medium screens 768px */
@media screen and (min-width: 48em)
{
	#flipbookBank { height: 41rem; }
}

/* Medium screens 807px */
@media screen and (min-width: 50.4375em)
{
	#flipbookBank { height: 39rem; }
}

/* Medium screens 907px */
@media screen and (min-width: 56.6875em)
{
	#banBanking { padding: 5.5rem 0 2rem; height: 19rem; }
	#banBanking h1 { margin-top: 2rem; }
	#banBanking img { width: 35%; margin-top: 4rem; }
	#flipbookBank { height: 37rem; }
}

/* Medium screens 946px */
@media screen and (min-width: 59.125em)
{
	#flipbookBank { height: 36rem; }
}

/* Large screens 1025px */
@media screen and (min-width: 64.0625em)
{
	#banBanking { padding: 6.5rem 0 4rem; background-size: cover; }
	#banBanking img { margin-top: 3.5rem; }
	#flipbookBank { width: 55%; height: 44rem; }
	.introBank { padding: 2rem 2.5rem 0rem 4rem; }
	.introBank p { font-size: 0.9rem; line-height: 1.2rem; }
	.introBank li { font-size: 1rem; }
}

/* Large screens 1101px */
@media screen and (min-width: 68.8125em)
{
	#flipbookBank { height: 39rem; }
}

/* Large screens 1172px */
@media screen and (min-width: 73.25em)
{
	#flipbookBank { height: 38rem; }
}

/* Large screens 1361px */
@media screen and (min-width: 85.0625em)
{
	#banBanking { height: 23rem; padding: 6.5rem 0 0rem; }
	#banBanking img { width: 30%; }
	#flipbookBank { height: 36rem; }
	.introBank h2 { font-size: 1.3rem; }
	.introBank li { font-size: 1.1rem; }
}

/* Large screens 1500px */
@media screen and (min-width: 93.75em)
{
	#banBanking { height: 25rem; }
	#flipbookBank { height: 34rem; }
}

/* Large screens 1700px */
@media screen and (min-width: 106.25em)
{
	#banBanking { height: 27rem; }
}