/*ESTUDIO CIBERDEFENSA*/

#banAIciber { background-image: url(../img/banner-ai-ciberseguridad.webp); background-position: center; background-size: cover; text-align: center; padding: 5.5rem 0 8rem; }
#banAIciber h1 { font-size: 1.25rem; margin: 1rem 0; line-height: 1.5rem; font-weight: 600; color: white; }
#banAIciber img { width: 90%; margin-top: 2rem; }
#contAIciber { display: flex; flex-direction: column; }
#flipAIciber { height: 34rem; }
.introAIciber { padding: 2rem 2rem 1rem; }
.introAIciber h2 { font-weight: 500; color: black; font-size: 1rem; padding: 0 0 2rem; line-height: 1.3rem; }
.introAIciber p { font-size: 0.8rem; text-align: justify; padding: 0 0 1rem; line-height: 1rem; }
.introAIciber p:nth-last-child(1) { text-align: left; }
.introAIciber li { font-size: 0.9rem; padding-bottom: 0.7rem; font-weight: 400; color: royalblue; line-height: 1.2rem; }
.introAIciber li:nth-child(5) { 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)
{
	#banAIciber h1 { margin: 1rem; }
}

/* Small screens 360px */
@media screen and (min-width: 22.5em)
{
	#banAIciber { padding: 5.5rem 0 6rem; }
	#banAIciber img { width: 82%; margin-top: 0; }
	#banAIciber h1 { margin: 1rem 2rem 1.2rem; }	
}

/* Small screens 540px */
@media screen and (min-width: 33.75em)
{
	#banAIciber img { width: 40%; }
}

/* Medium screens 600px */
@media screen and (min-width: 37.5em)
{
	#banAIciber h1 { font-size: 1.5rem; margin: 2rem; }
	.introAIciber { padding: 2rem 2.5rem 1rem; }
	#banAIciber img { width: 35%; }
}

/* Medium screens 712px */
@media screen and (min-width: 44.5em)
{
	#banAIciber img { width: 50%; }
}

/* Medium screens 727px */
@media screen and (min-width: 45.4em)
{
	#banAIciber { padding: 5.5rem 0 9rem; }
	#banAIciber h1 { font-size: 2rem; margin: 3rem 0 1.8rem; }
	#banAIciber img { margin-top: 1rem; width: 45%;}
	#contAIciber { flex-direction: row-reverse; margin-bottom: 2rem; }
	#flipAIciber { width: 50%; height: 48rem; }
	.introAIciber { width: 40%; }
	.introAIciber h2 { font-size: 1.1rem; line-height: 1.5rem; }
}

/* Medium screens 768px */
@media screen and (min-width: 48em)
{
	#banAIciber { padding: 5.5rem 0 7rem; }
}

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

/* Medium screens 907px */
@media screen and (min-width: 56.6875em)
{
	#banAIciber { padding: 6.5rem 0 9rem; height: 19rem; }
	#banAIciber h1 { margin-top: 2rem; }
	#flipAIciber { height: 42rem; }
}

/* Medium screens 946px */
@media screen and (min-width: 59.125em)
{
	#banAIciber { padding: 6.5rem 0 5rem; }
	#banAIciber h1 { font-size: 1.5rem; margin-top: 3rem; }
	#banAIciber img { width: 33%; margin-top: 0; }
	#flipAIciber { height: 39.5rem; }
}

/* Large screens 1025px */
@media screen and (min-width: 64.0625em)
{
	#banAIciber { padding: 6.5rem 0 12rem; background-size: cover; }
	#banAIciber h1 { margin-top: 4rem; font-size: 2rem; }
	#banAIciber img { margin-top: 1.5rem; width: 40%; }
	#flipAIciber { width: 55%; height: 46rem; }
	.introAIciber { padding: 2rem 2.5rem 0rem 4rem; }
	.introAIciber p { font-size: 0.9rem; line-height: 1.2rem; }
	.introAIciber li { font-size: 1rem; }
}

/* Large screens 1101px */
@media screen and (min-width: 68.8125em)
{
	#banAIciber img { width: 37%; }
}

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

/* Large screens 1280px */
@media screen and (min-width: 80em)
{
	#banAIciber { padding: 6.5rem 0 6rem; }
	#banAIciber img { width: 28%; margin-top: 0; }
	#flipAIciber { height: 41rem; }
}

/* Large screens 1361px */
@media screen and (min-width: 85.0625em)
{
	#banAIciber { height: 23rem; padding: 6.5rem 0 4rem; }
	#banAIciber img { width: 30%; }
	#flipAIciber { height: 40rem; }
	.introAIciber h2 { font-size: 1.3rem; line-height: 1.9rem; }
	.introAIciber li { font-size: 1.1rem; }
}

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

/* Large screens 1700px */
@media screen and (min-width: 106.25em)
{
	#banAIciber { height: 27rem; padding: 6.5rem 0 0; }
	#banAIciber img { width: 26%; }
}