/****************************************************************************************************
 ************************************** Responsive Media Styles *************************************
 ****************************************************************************************************/

/* Responsive buttons switchers */
.customize-control.has-switchers .customize-control-title { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; margin-top: 20px; margin-bottom: 10px; }
.customize-control.has-switchers .customize-control-title span { line-height: 20px; }

.customize-control .responsive-switchers { margin-left: 5px; width: auto; }
.customize-control .responsive-switchers li:not(.desktop) { display: none; }
.customize-control.responsive-switchers-open .responsive-switchers li { display: block; }
.customize-control .responsive-switchers li { float: left; margin: 0; }
.customize-control .responsive-switchers li button { display: inline-block; height: 20px; width: 20px; background-color: #a4afb7; cursor: pointer; position: relative; margin-left: 5px; color: #fff; font-size: 10px; text-align: center; border-radius: 50%; padding: 0; border: 0; outline: none; -webkit-transition: background-color .5s; transition: background-color .5s; cursor: pointer; }
.customize-control .responsive-switchers li button:hover { background-color: #c2cbd2; }
.customize-control .responsive-switchers li:not(.desktop) button.active { background-color: #13aff0; }
.customize-control .responsive-switchers li button i { width: auto; height: auto; font-size: inherit; line-height: 18px; }

.customize-control.has-switchers > .control-wrap:not(.active) { display: none; width: 100%; }

/* RTL */
body.rtl .customize-control-checkbox input[type=checkbox] { margin: 0 0 0 6px; }
body.rtl .customize-control-checkbox input[type="checkbox"]:checked:before,
body.rtl .customize-control-ocean-multi-check input[type="checkbox"]:checked:before { right: 0; left: auto; }
body.rtl .customize-control .responsive-switchers,
body.rtl .customize-control .responsive-switchers li button { margin-right: 5px; margin-left: 0; }
body.rtl .customize-control .responsive-switchers li { float: right; }

/* Responsive */
@media screen and ( max-width: 768px ) {
	body .customize-control .responsive-switchers { display: none; }
	body .customize-control.has-switchers > .control-wrap:not(.active) { display: inline-block; }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	body .customize-control.has-switchers > .control-wrap { display: inline-block; }
	body .customize-control.has-switchers > .control-wrap:not(.tablet) { display: none; }
}

@media screen and ( max-width: 480px ) {
	body .customize-control.has-switchers > .control-wrap { display: inline-block; }
	body .customize-control.has-switchers > .control-wrap:not(.mobile) { display: none; }
}
