/*
    Frontend Customizer Styles
*/

#frontend_customizer {
   position: fixed;
   top: 50%;
   left: 0;
   width: 233px;
   background: #353535;
   z-index: 99999;
   color: #ffffff;
   margin-top: -218px;
}

.select2-container.demos_switcher{
   z-index: 1000000;
}

.select2-container.demos_switcher .select2-results > .select2-results__options {
   max-height: 160px;
}

#frontend_customizer.open #frontend_customizer_button i {
   -webkit-animation-name: spinnerRotate;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   -moz-animation-name: spinnerRotate;
   -moz-animation-duration: 3s;
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;
   -ms-animation-name: spinnerRotate;
   -ms-animation-duration: 3s;
   -ms-animation-iteration-count: infinite;
   -ms-animation-timing-function: linear;
}

#frontend_customizer_button {
   position: absolute;
   right: -43px;
   top: 50%;
   margin: -20px 0 0 0;
   width: 43px;
   height: 40px;
   cursor: pointer;
   text-align: center;
   color: #fff;
   font-size: 22px;
   line-height: 41px;
   background-color: #e21e22;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

.splashAmericanFootball #frontend_customizer_button {
   position: absolute;
   right: -43px;
   top: 50%;
   margin: -20px 0 0 0;
   width: 43px;
   height: 40px;
   cursor: pointer;
   text-align: center;
   color: #fff;
   font-size: 22px;
   line-height: 41px;
   background-color: #da9a29;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

.splashSoccer #frontend_customizer_button {
   background-color: #00aaff;
}

.splashBaseball #frontend_customizer_button {
   background-color: #81b441;
}

#frontend_customizer_button:hover {
   background: #353535 !important;
   color: #fff;
}

#frontend_customizer_button:before {
   content: '';
   position: absolute;
   left: -6px;
   top: 50%;
   margin: -5px 0 0;
   border-right: 6px solid transparent;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

#frontend_customizer_button:hover:before {
   border-right-color: #353535 !important;
}

#frontend_customizer .customizer_wrapper {
   padding: 30px;
   height: 100%;
   overflow-y: auto;
}

#frontend_customizer h3 {
   font-size: 14px;
   color: #909090;
   font-family: "Open Sans", Arial, sans-serif;
   font-style: normal;
   text-transform: uppercase;
   font-weight: 400;
   margin: 0 0 12px;
   padding: 0;
   text-align: center;
}

#frontend_customizer h3:after {
   display: none;
}

#frontend_customizer h3:before {
   display: none;
}

#frontend_customizer .customizer_element {
   margin: 0 0 30px;
}

#frontend_customizer select {
   width: 100%;
   border-radius: 4px;
   background: #fff;
   outline: none !important;
   height: 27px;
   line-height: 27px;
   font-size: 12px;
   color: #767676;
   font-family: "Open Sans", Arial, sans-serif;
   border: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
}

.stm_switcher {
   position: relative;
   padding: 5px 0 0;
   cursor: pointer;
   margin: 0 0 20px;
}

.stm_switcher > * {
   display: inline-block;
   vertical-align: middle;
}

.stm_switcher .switcher_nav {
   position: relative;
   width: 42px;
   height: 24px;
   background: #6f6f6f;
   border-radius: 30px;
   margin: 0 13px;
}

.stm_switcher .switcher_nav:before {
   content: '';
   position: absolute;
   left: 4px;
   top: 4px;
   width: 15px;
   height: 15px;
   background: #fff;
   border-radius: 100%;
}

.stm_switcher.active .switcher_nav:before {
   left: auto;
   right: 4px;
}

.stm_switcher .switcher_label {
   font-size: 12px;
   color: #767676;
   font-style: italic;
}

.stm_switcher .switcher_label.disable,
.stm_switcher.active .switcher_label.enable {
   color: #ffffff;
}

.stm_switcher .switcher_label:first-child {
   width: 55px;
   text-align: right;
}

.stm_switcher.active .switcher_label.disable {
   color: #767676;
}

.customizer_colors {
   position: relative;
   margin: 0 -15px;
   text-align: center;
}

.customizer_colors span {
   margin: 0 5px 10px;
   display: inline-block;
   vertical-align: top;
   width: 27px;
   height: 27px;
   background-color: #e21e22;
   cursor: pointer;
}

.customizer_colors span.sccr_blue {
   background-color: #00aaff;
}

.customizer_colors span.active {
   outline: 2px solid #f7ec6f !important;
}

body.skin-blue #frontend_customizer_button,
.customizer_colors #blue {
   background: #5268d8;
}

body.skin-blue-violet #frontend_customizer_button,
.customizer_colors #blue-violet {
   background: #8a2be2;
}

body.skin-choco #frontend_customizer_button,
.customizer_colors #choco {
   background: #8f5902;
}

body.skin-gold #frontend_customizer_button,
.customizer_colors #gold {
   background: #c9ae14;
}

body.skin-green #frontend_customizer_button,
.customizer_colors #green {
   background: #41c648;
}

body.skin-orange #frontend_customizer_button,
.customizer_colors #orange {
   background: #ea7f04;
}

body.skin-sky-blue #frontend_customizer_button,
.customizer_colors #sky-blue {
   background: #729fcf;
}

body.skin-turquose #frontend_customizer_button,
.customizer_colors #turquose {
   background: #00c9c2;
}

body.skin-violet-red #frontend_customizer_button,
.customizer_colors #violet-red {
   background: #d02090;
}

body.skin-violet-red #frontend_customizer_button,
.customizer_colors #sccr-orange {
   background: #ff9500;
}

body.skin-violet-red #frontend_customizer_button,
.customizer_colors #sccr-red {
   background: #ec1919;
}

.customizer_boxed_background {
   display: none;
   padding: 0 15px;
   margin: 0 -15px;
}

#background_image #boxed_first_bg {
   background-image: url('../images/tmp/box_img_1_preview.png');
   background-size: contain;
   background-repeat: repeat;
}

#background_image #boxed_second_bg {
   background-image: url('../images/tmp/box_img_2_preview.png');
   background-size: contain;
   background-repeat: repeat;
}

#background_image #boxed_third_bg {
   background-image: url('../images/tmp/box_img_3_preview.jpg');
   background-size: contain;
}

#background_image #boxed_fourth_bg {
   background-image: url('../images/tmp/box_img_4_preview.jpg');
   background-size: cover;
}

#background_image #boxed_fifth_bg {
   background-image: url('../images/tmp/box_img_5_preview.png');
   background-size: cover;
}

body.stm-boxed.stm-background-customizer-box_img_1 {
   background-image: url('../images/tmp/box_img_1.jpg');
   background-attachment: fixed;
}

body.stm-boxed.stm-background-customizer-box_img_2 {
   background-image: url('../images/tmp/box_img_2.jpg');
   background-attachment: fixed;
}

body.stm-boxed.stm-background-customizer-box_img_3 {
   background-image: url('../images/tmp/box_img_3.jpg');
   background-attachment: fixed;
   background-position: 50% 50%;
   background-size: cover;
}

body.stm-boxed.stm-background-customizer-box_img_4 {
   background-image: url('../images/tmp/box_img_4.jpg');
   background-attachment: fixed;
   background-position: 50% 50%;
   background-size: cover;
}

body.stm-boxed.stm-background-customizer-box_img_5 {
   background-image: url('../images/tmp/box_img_5.png');
   background-position: 50% 50%;
}

@-webkit-keyframes spinnerRotate
{
   from{-webkit-transform:rotate(0deg);}
   to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
   from{-moz-transform:rotate(0deg);}
   to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
   from{-ms-transform:rotate(0deg);}
   to{-ms-transform:rotate(360deg);}
}

@media (max-width:787px) {
   #frontend_customizer {
      display: none;
   }
}