.ocmp-sub-title,.ocmp-title {
    font-weight: 500;
    display: block
}

.ocmp_wheel_preview {
    position: relative
}

.ocmp-default-container {
    width: 100%;
    height: 100%;
    background: #000
}

.ocmp-default-container .ocmp-wheel-description {
    position: absolute;
    top: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: 0;
    bottom: 0;
    left: 55%;
    height: 300px;
    width: 390px;
    z-index: 1000
}

.ocmp-title {
    font-size: 24px;
    margin: 15px 0;
	text-shadow:
	  1px 1px 2px red,
	  0 0 1em blue,
	  0 0 0.2em blue;	
}

.ocmp-sub-title {
    font-size: 16px;
    margin: 8px 0;
	text-shadow:
  1px 1px 2px red,
  0 0 1em blue,
  0 0 0.2em blue;
}

.ocmp-note {
    font-size: 11px;
    display: block;
    margin: 15px 0
}

#btn-spin-wheel {
    border: 0
}

.ocmp-text-noluck {
    display: block;
    margin: 30px 0
}

#coupon-code,#coupon-code:focus {
    background: 0 0;
    color: #333;
    border: 0;
    padding: 10px;
    width: 100%;
    display: block;
    margin: 15px 0;
    font-size: 14px;
    text-align: left;
    font-weight: 700
}

.codeShow {
    position: relative
}

.copy_msg {
    background: #fff;
    color: #000;
    padding: 7px 15px;
    border-radius: 10px;
    position: absolute;
    top: -43px;
    left: 37%;
    right: auto;
    display: none
}

.copy_msg:before {
    content: " ";
    border: 7px solid #fff;
    position: absolute;
    margin: 0 auto;
    left: 43%;
    bottom: -7px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.ocmp-full-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-y: auto;
    z-index: 99999999
}

.full-background {
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #9e9e9e;
    opacity: .6;
    height: 100%;
    width: 100%;
    position: absolute
}

.ocmp-full-container .ocmp_spin_content {
    position: absolute;
    z-index: 10;
    top: 0;
    left: -90%;
    width: 90%;
    height: 100%;
    max-width: 790px;
    overflow-y: hidden;
    box-sizing: border;
    background: #580404;
    -webkit-box-shadow: 10px 0 5px -5px rgba(66,66,66,.45);
    -moz-box-shadow: 10px 0 5px -5px rgba(66,66,66,.45);
    -ms-box-shadow: 10px 0 5px -5px rgba(66,66,66,.45);
    -o-box-shadow: 10px 0 5px -5px rgba(66,66,66,.45);
    box-shadow: 10px 0 5px -5px rgba(66,66,66,.45);
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.ShowSpinContent {
    left: 0!important
}

.ocmp-default-container {
    margin-bottom: 25px
}

#ocmp_spin_wheel .ocmp_offer_description,#ocmp_spin_wheel .ocmp_spinners,.spin-arrow {
    margin-top: auto;
    margin-bottom: auto;
    bottom: 0
}

.ocmp-default-container .ocmp_spin_content {
    position: relative;
    max-width: 100%;
    width: 100%;
    left: 0;
    -webkit-box-shadow: 0 10px 5px -5px rgba(66,66,66,.45);
    -moz-box-shadow: 0 10px 5px -5px rgba(66,66,66,.45);
    -ms-box-shadow: 0 10px 5px -5px rgba(66,66,66,.45);
    -o-box-shadow: 0 10px 5px -5px rgba(66,66,66,.45);
    box-shadow: 0 10px 5px -5px rgba(66,66,66,.45);
    overflow-y: hidden
}

#ocmp_spin_wheel .ocmp_form_info {
    float: right;
    width: 230px;
    text-align: left;
    z-index: 100
}

#ocmp_spin_wheel .ocmp_offer_description {
    position: absolute;
    top: 0;
    right: 0;
    left: 360px;
    height: 300px;
    width: 390px;
    z-index: 1000
}

#ocmp_spin_wheel .ocmp_spinner_preview {
    float: left;
    width: 500px;
    text-align: left;
    height: 500px
}

#ocmp_spin_wheel .ocmp_spinners {
    position: absolute;
    left: -230px;
    height: 500px;
    top: 0
}

.ocmp_spinner {
    background: url(/catalog/view/javascript/spin-wheel/wheel.png);
    background-size: cover;
    width: 500px;
    text-align: left;
    height: 500px
}

.wheel-offers {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: rotate(-60deg) translate(0,-50%);
    transform-origin: 0 0;
    -moz-transform: rotate(-60deg) translate(0,-50%);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotate(-60deg) translate(0,-50%);
    -webkit-transform-origin: 0 0;
    -ms-transform: rotate(-60deg) translate(0,-50%);
    -ms-transform-origin: 0 0;
    -o-transform: rotate(-60deg) translate(0,-50%);
    -o-transform-origin: 0 0;
	text-align: center;
    width: 27%;
    -moz-font-smoothing: antialiased;
    -moz-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-weight: 700;
	font-size: 16px;
    color: #fff
}

.spin-arrow {
    position: absolute;
    width: 90px;
    right: -40px;
    top: 0;
    z-index: 11
}

.ocmp-input {
    margin-bottom: 10px;
    display: flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -o-flex;
    width: 100%
}

.ocmp-input .ocmp-col-2 {
    float: left;
    width: 50%
}

.ocmp-input .left {
    padding-right: 10px
}

.ocmp-input .right {
    padding-left: 10px
}

.ocmp-input input {
    borde-radius: 0
}

.spin-form input {
    border-radius: 0;
    font-size: 15px!important;
    border: 1px solid #fff
}

.spin-form .text-danger {
    background: #d00;
    color: #fff;
    padding: 2px 5px
}

#resultShow {
    background: #fff;
    color: #000;
    padding: 10px 25px
}

#close-icon i {
    background: #fff;
    border: 1px solid #dedede;
    position: fixed;
    left: 0;
    top: 50%;
    bottom: 50%;
    font-size: 50px;
    padding: 10px 15px;
    display: table
}
.close_popup {cursor: pointer;}

@media screen and (max-width: 850px) and (min-width:750px) {
    #ocmp_spin_wheel .ocmp_offer_description {
        left:330px;
        width: 325px
    }
}

@media screen and (max-width: 749px) and (min-width:700px) {
    #ocmp_spin_wheel .ocmp_spinner,#ocmp_spin_wheel .ocmp_spinner_preview,#ocmp_spin_wheel .ocmp_spinners {
        width:450px;
        height: 450px
    }

    #ocmp_spin_wheel .ocmp_spinners {
        left: -200px
    }

    #ocmp_spin_wheel .ocmp_offer_description {
        left: 320px;
        width: 300px
    }
}

@media screen and (max-width: 699px) and (min-width:650px) {
    #ocmp_spin_wheel .ocmp_spinner,#ocmp_spin_wheel .ocmp_spinner_preview,#ocmp_spin_wheel .ocmp_spinners {
        width:400px;
        height: 400px
    }

    #ocmp_spin_wheel .ocmp_spinners {
        left: -180px
    }

    #ocmp_spin_wheel .ocmp_offer_description {
        left: 305px;
        width: 275px
    }
}

@media screen and (max-width: 649px) and (min-width:600px) {
    #ocmp_spin_wheel .ocmp_spinner,#ocmp_spin_wheel .ocmp_spinner_preview,#ocmp_spin_wheel .ocmp_spinners {
        width:350px;
        height: 350px
    }

    #ocmp_spin_wheel .ocmp_spinners {
        left: -150px
    }

    .spin-arrow {
        right: -57px
    }

    #ocmp_spin_wheel .ocmp_offer_description {
        left: 275px;
        width: 250px
    }
}

@media screen and (max-width: 599px) and (min-width:550px) {
    .ocmp-full-container .ocmp_spin_content {
        width:100%
    }

    #ocmp_spin_wheel .ocmp_spinner,#ocmp_spin_wheel .ocmp_spinner_preview,#ocmp_spin_wheel .ocmp_spinners {
        width: 350px;
        height: 350px
    }

    #ocmp_spin_wheel .ocmp_spinners {
        left: -130px
    }

    .spin-arrow {
        right: -55px
    }

    #ocmp_spin_wheel .ocmp_offer_description {
        left: 275px;
        width: 260px
    }
}

@media screen and (max-width: 549px) and (min-width:500px) {
    .ocmp-full-container .ocmp_spin_content {
        width:100%
    }

    #ocmp_spin_wheel .ocmp_spinner,#ocmp_spin_wheel .ocmp_spinner_preview,#ocmp_spin_wheel .ocmp_spinners {
        width: 350px;
        height: 350px
    }

    #ocmp_spin_wheel .ocmp_spinners {
        left: -130px
    }

    .spin-arrow {
        right: -55px
    }

    #ocmp_spin_wheel .ocmp_offer_description {
        left: 275px;
        width: 210px
    }
}

@media screen and (max-width: 499px) {
    .ocmp-full-container .ocmp_spin_content {
        overflow-y:scroll;
        overflow-x: hidden;
        height: auto;
        width: 100%
    }

    #ocmp_spin_wheel .ocmp_form_info {
        float: none;
        width: auto;
        padding: 30px 25px;
        position: relative
    }

    .ocmp_spinner_preview {
        width: 400px;
        height: 400px;
        position: relative
    }

    #ocmp_spin_wheel .ocmp_offer_description {
        position: relative;
        width: auto;
        height: auto;
        left: 0
    }
}