@charset "UTF-8";
/* CSS Document */

#imon-sc {background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1); margin: 50px 0; overflow: hidden;}
#imon-sc img {max-width: 100%;}
#imon-sc h2 {margin: 20px 0;}
#imon-sc header {background: #0055A8; color: #fff; position: relative; overflow: hidden;}
.imon-sc-header h3 {line-height: 28px;}
.imon-sc-header h3 strong {font-weight: 400;}

.sc-prev, .sc-next {color: #fff; font-size: 21px; display: inline-block; padding: 10px 15px; margin: 10px 0 10px 10px; background: rgba(255,255,255,.1); float: left; box-shadow: 1px 1px 1px rgba(0,0,0,.2), inset 1px 1px 1px rgba(255,255,255,.3);}

.sc-next:hover, .sc-next:active, .sc-next:focus, .sc-prev:hover, .sc-prev:active, .sc-prev:focus {color: #fff !important;}
.sc-next:hover, .sc-prev:hover {background: rgba(255,255,255,.2);}

#sc-pager {display: none;}
#imon-sc header hgroup {text-align: right; padding: 15px;}
#imon-sc header h2, #imon-sc header h3 {color: #fff; margin: 0;}
#imon-sc header h2 {font-size: 21px; font-weight: 700;}
#imon-sc header h2 span {font-weight: 300;}
#imon-sc header h3 {font-size: 14px;}

.how-many {list-style: none; padding: 0; margin: 0;}
.how-many li {float: left; display: inline-block; text-align: center; margin: 5px;}
.how-many li a {width: 35px; height: 35px; padding: 5px 0 0 0; border-radius: 50%; background: #eee; display: block; }
.how-many li a:hover {text-decoration: none; background: #f4f4f4;}
.how-many li a:active, .how-many li a:focus, .how-many li a.selected {background: #0055AB; color: #fff; text-decoration: none;}
.how-many li:hover {cursor: pointer;}
.how-many option:focus {outline: none;}

#imon-sc .screen {width: 100%; position: relative; overflow: hidden; background: #fff;}
#imon-sc .screen-content {padding: 15px;}
#imon-sc .screen img {display: none;}
#imon-sc .screen hgroup {margin: 0 0 30px 0;}
#imon-sc .screen h2 {font-size: 25px; margin: 0 0 .5em 0; }
#imon-sc .screen h3 {font-size: 21px;}
#imon-sc .screen input[type="range"] {padding: 0 0 30px 0; max-width: 400px;}
#imon-sc .screen output {background:  #0055AB; color: #fff; padding: 10px; font-weight: bold; display: inline-block; font-size: 21px; margin: 20px 0 0 0;}

#imon-sc .next {width: 100%; float: left; border-top: 1px dotted #ccc; margin: 15px 0; padding: 15px 0;}
#imon-sc .next a, .imon-sc-content a.btn, #imon-sc .next #submit {display: inline-block; color: #fff; background: #77C12F; margin: 0; font-size: 14px; border-radius: 5px; opacity: .9; text-transform: uppercase; font-weight: bold; padding: 10px 15px; box-shadow: none; border: 0;}
#imon-sc .next a:hover {text-decoration: none; opacity: 1;}

.imon-sc-select .form-control {width: 55px; float: left; margin: 0 10px 0 0; padding: 5px;}
.imon-sc-select p {font-weight: bold; padding: 5px;}

.imon-sc-content {padding: 50px 30px; border-top: 10px solid #0055A8; overflow: hidden;}
.imon-sc-content p {font-weight: 300; font-size: 18px;}
.imon-sc-content h4 {font-size: 13px; text-transform: uppercase; font-weight: bold; color: #999; margin: 20px 0 10px; background: #eee; padding: 5px;}
.imon-sc-content ul {font-size: 13px; padding: 0 0 0 20px;}

.imon-sc-header {margin: 30px 0 30px 0;}

#imon-sc #ckb_error {color: #FF0000;position: absolute;bottom: 45px;right: 15px;font-size: 11px;}

@media (min-width: 768px) {
#imon-sc #sc-pager {float: left; display: block; padding: 22px 0 0 20px;}
#imon-sc #sc-pager a {margin: 0 1px; display: inline-block; text-align: center; width: 30px; height: 30px; line-height: 30px; color: rgba(255,255,255,.5); text-decoration: none !important; border-radius: 50%;}
#imon-sc #sc-pager a:hover {color: rgba(255,255,255,.8);}
#imon-sc #sc-pager a.cycle-pager-active {color: rgba(255,255,255,1); background: #86C939; box-shadow: 1px 1px 1px rgba(0,0,0,.1);}

#imon-sc header hgroup {text-align: right; padding: 15px; float: right;}
#imon-sc header hgroup h3 {float: left; font-size: 16px; padding: 10px;}
#imon-sc header hgroup h2 {float: left; font-size: 32px;}
#imon-sc header hgroup h2 span {font-size: 26px;}

.how-many li a {width: 30px; height: 30px; padding: 4px 0 0 0;}

#imon-sc .screen {height: 550px;}
#imon-sc .screen-content {width: 450px; padding: 30px 15px; float: right; position: relative; z-index: 5;}
#imon-sc .screen img {display: block; position: absolute; left: -250px; bottom: 0; height: 550px;}

#imon-sc .screen-content .checkbox {width: 50%; float: left; margin: 2px 0;}
#imon-sc .screen-content .checkbox + .checkbox {margin: 2px 0;}

#imon-sc #ckb_error {position: absolute; right: 30px; bottom: 70px; color: red; font-size: 13px;}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
#imon-sc .screen h2 {font-size: 32px;}
#imon-sc .screen h3 {font-size: 19px; line-height: 24px;}

#imon-sc .screen {height: 650px;}
#imon-sc .screen img {left: -150px;}

.how-many li a {width: 35px; height: 35px; padding: 4px 0 0 0; font-size: 18px;}

.imon-sc-select {width :50%; float: left;}
.imon-sc-select p { font-size: 13px;}
#imon-sc .screen .checkbox {width: 50%; float: left; margin: 5px 0;}
#imon-sc .screen .checkbox + .checkbox {margin: 5px 0;}

#imon-sc .screen-content {width: 525px; padding: 50px 30px; float: right; position: relative; z-index: 5;}

#imon-sc #ckb_error {bottom: 90px;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#imon-sc .screen-content {width: 550px; padding: 60px 50px;}
#imon-sc .screen img {left: 0;}
#imon-sc #ckb_error {bottom: 100px;}
}


/*.how-many li.selected
{
	color: #0055a5;
}

.how-many a .selected 
{
	color: #0055a5; text-decoration: none;
}*/

.disable_a_href {
    pointer-events: none;
	opacity: .5;
}
#imon-sc .next .disable_a_href {background: #d4d4d4;}

#imon-sc #ckb_error {color: #FF0000;}