/**
 * Responsive Styles
 *
 * Media queries for responsive layouts.
 *
 * @package    Estylish
 * @author     Woracious
 * @since      1.0.0
 */

/*--------------------------------------------------------------
# Large Screens (max-width: 1200px)
--------------------------------------------------------------*/

@media only screen and (max-width: 1200px) {
	.wrapper {
		margin: auto 20px;
	}
}

/*--------------------------------------------------------------
# Medium Screens (max-width: 1000px)
--------------------------------------------------------------*/

@media only screen and (max-width: 1000px) {
	section.abundance {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
	}

	section.abundance > * {
		flex-grow: 1;
	}

	.newsletter.setup {
		max-width: 100%;
		order: 1;
	}

	.newsletter.box input[type="email"] {
		width: 100%;
		max-width: 350px;
		margin: auto;
	}

	.newsletter.box p {
		margin: auto;
	}

	.foo.social h6 {
		text-align: center;
		align-items: center;
	}

	.recurbox {
		flex-wrap: wrap;
	}

	.recurbox .recur2 {
		flex: 0 0 calc((100% - 40px) / 2);
		position: relative;
	}

	.socons {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/*--------------------------------------------------------------
# Tablet Screens (max-width: 800px)
--------------------------------------------------------------*/

@media only screen and (max-width: 800px) {
	.taside aside.large {
		display: none;
	}

	.tpost .widgetcat {
		gap: 20px;
	}
}

/*--------------------------------------------------------------
# Small Tablet Screens (max-width: 768px)
--------------------------------------------------------------*/

@media only screen and (max-width: 768px) {
	.postcomments {
		flex-direction: column-reverse;
	}

	.comform {
		position: relative;
		align-self: auto;
	}

	.conauth {
		font-size: 1rem;
	}

	.recurlist .picholder {
		display: none;
	}
}

/*--------------------------------------------------------------
# Mobile Screens (max-width: 650px)
--------------------------------------------------------------*/

@media only screen and (max-width: 650px) {
	.recurbox .recur2 {
		flex: 0 0 400px;
		margin: auto;
	}
}

/*--------------------------------------------------------------
# Slider Responsive
--------------------------------------------------------------*/

:root {
	--slides-across: 4;
}

@media screen and (max-width: 1200px) {
	:root {
		--slides-across: 3;
	}
}

@media screen and (max-width: 1000px) {
	:root {
		--slides-across: 2;
	}
}

@media screen and (max-width: 600px) {
	:root {
		--slides-across: 1;
	}
}