/*----------------------------------------------------------------------
Device wise section space

Every section keeps its normal "all devices" space option (top_space /
bottom_space). These classes are the per device override and are only
added when a device option is set to something other than "Default".
Each class is limited to its own device range, so one device can be
changed without touching the others.

Ranges (each class only applies inside its own range):
    mobile  -  up to 767px
    tablet  -  768px  - 991px
    laptop  -  992px  - 1199px
    desktop -  1200px and up

Laptop follows Desktop: when the laptop option is left on "Default",
installateure_device_space_classes() prints the desktop size as a
sk-*-laptop-* class, so a desktop setting covers 992px and up. The
ranges below stay separate, the inheritance happens in PHP.

Sizes:
    none / xs / sm / md / lg / xl
------------------------------------------------------------------------*/

/*------------------------------------------------------------------
Template element (sk_template)

The space options of the Template element sit on a wrapper around the
template output. The section inside brings its own space, so the space
of the first / last section is removed for the axis that was set -
otherwise the two would add up.
------------------------------------------------------------------*/
.sk-tpl-pt-set > section:first-of-type {
	padding-top: 0 !important;
}
.sk-tpl-pb-set > section:last-of-type {
	padding-bottom: 0 !important;
}

/*------------------------------------------------------------------
Mobile
------------------------------------------------------------------*/
@media (max-width: 767.98px) {
	.sk-pt-mobile-none { padding-top: 0 !important; }
	.sk-pt-mobile-xs   { padding-top: 20px !important; }
	.sk-pt-mobile-sm   { padding-top: 40px !important; }
	.sk-pt-mobile-md   { padding-top: 60px !important; }
	.sk-pt-mobile-lg   { padding-top: 80px !important; }
	.sk-pt-mobile-xl   { padding-top: 100px !important; }

	.sk-pb-mobile-none { padding-bottom: 0 !important; }
	.sk-pb-mobile-xs   { padding-bottom: 20px !important; }
	.sk-pb-mobile-sm   { padding-bottom: 40px !important; }
	.sk-pb-mobile-md   { padding-bottom: 60px !important; }
	.sk-pb-mobile-lg   { padding-bottom: 80px !important; }
	.sk-pb-mobile-xl   { padding-bottom: 100px !important; }
}

/*------------------------------------------------------------------
Tablet
------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 991.98px) {
	.sk-pt-tablet-none { padding-top: 0 !important; }
	.sk-pt-tablet-xs   { padding-top: 25px !important; }
	.sk-pt-tablet-sm   { padding-top: 45px !important; }
	.sk-pt-tablet-md   { padding-top: 70px !important; }
	.sk-pt-tablet-lg   { padding-top: 90px !important; }
	.sk-pt-tablet-xl   { padding-top: 110px !important; }

	.sk-pb-tablet-none { padding-bottom: 0 !important; }
	.sk-pb-tablet-xs   { padding-bottom: 25px !important; }
	.sk-pb-tablet-sm   { padding-bottom: 45px !important; }
	.sk-pb-tablet-md   { padding-bottom: 70px !important; }
	.sk-pb-tablet-lg   { padding-bottom: 90px !important; }
	.sk-pb-tablet-xl   { padding-bottom: 110px !important; }
}

/*------------------------------------------------------------------
Laptop
------------------------------------------------------------------*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	.sk-pt-laptop-none { padding-top: 0 !important; }
	.sk-pt-laptop-xs   { padding-top: 30px !important; }
	.sk-pt-laptop-sm   { padding-top: 50px !important; }
	.sk-pt-laptop-md   { padding-top: 80px !important; }
	.sk-pt-laptop-lg   { padding-top: 100px !important; }
	.sk-pt-laptop-xl   { padding-top: 120px !important; }

	.sk-pb-laptop-none { padding-bottom: 0 !important; }
	.sk-pb-laptop-xs   { padding-bottom: 30px !important; }
	.sk-pb-laptop-sm   { padding-bottom: 50px !important; }
	.sk-pb-laptop-md   { padding-bottom: 80px !important; }
	.sk-pb-laptop-lg   { padding-bottom: 100px !important; }
	.sk-pb-laptop-xl   { padding-bottom: 120px !important; }
}

/*------------------------------------------------------------------
Desktop
------------------------------------------------------------------*/
@media (min-width: 1200px) {
	.sk-pt-desktop-none { padding-top: 0 !important; }
	.sk-pt-desktop-xs   { padding-top: 30px !important; }
	.sk-pt-desktop-sm   { padding-top: 50px !important; }
	.sk-pt-desktop-md   { padding-top: 80px !important; }
	.sk-pt-desktop-lg   { padding-top: 100px !important; }
	.sk-pt-desktop-xl   { padding-top: 120px !important; }

	.sk-pb-desktop-none { padding-bottom: 0 !important; }
	.sk-pb-desktop-xs   { padding-bottom: 30px !important; }
	.sk-pb-desktop-sm   { padding-bottom: 50px !important; }
	.sk-pb-desktop-md   { padding-bottom: 80px !important; }
	.sk-pb-desktop-lg   { padding-bottom: 100px !important; }
	.sk-pb-desktop-xl   { padding-bottom: 120px !important; }
}