body {
    box-sizing: border-box;
    font-family: 'Oswald', sans-serif;
    font-family: 'Work Sans', sans-serif;
}
input { border-radius: 5px!important; border:1px solid #6EECFC; width:100%;}
.showonly{display:none;}
.half {width:50%;}
.abs {position:absolute;}
.rel {position:relative;}
.hidden {display:none !important;}
.hidden.no11 {display:block !important;}
.page-header.navbar .page-logo.ss{padding:10px 20px;}
.page-logo>a {display:block; width:208px; height:24px; background:url(images/souplogo.png) no-repeat; background-size:contain;}
.iconbtn {width:32px; height:32px;}
.show1 .showonly.onlyblock1,
.show2 .showonly.onlyblock2,
.show3 .showonly.onlyblock3,
.show4 .showonly.onlyblock4,
.show5 .showonly.onlyblock5,
.showfinal .showonly.onlyblockfinal
 {display: block;}
 .show1 .showonly.onlyinline1,
 .show2 .showonly.onlyinline2,
 .show3 .showonly.onlyinline3,
 .show4 .showonly.onlyinline4,
 .show5 .showonly.onlyinline5,
 .showfinal .showonly.onlyinlinefinal
  {display: inline-block;}
.main-content{width:100%; max-width:800px; margin: 0 auto;}
.left {float:left!important;}
.right {float:right!important;}
.full {width:100%;}
.abs.autofill {
    left: 15px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}
.abs.tr {
    top: 0px;
    right: 0px;
}
.abs.trb {
    top: 0px;
    right: 0px;
    bottom: 0px;
}
.abs.br {
    bottom: 0px;
    right: 0px;
}
.visible0 {
    display: none !important;
}
.center {margin: 0 auto !important; clear:both;float: none;}
.clear {clear:both;}
.v5 {height:5px;}
.v15 {height:15px;}
.v25 {height:25px;}
.v10 {height:10px;}
.v20 {height:20px;}
.full {width:100%;}
.tc {text-align:center; float:none !important;}


.loginDiv {max-width:250px; width:100%; border-radius: 10px !important; background: #aaaaaa; overflow: hidden; padding:20px;}

.btn {border-radius: 6px !important; padding:4px 20px;}
.loginDiv input {width: 200px; border:none !important; }

.colorResults {width:280px; margin:0 auto;}
.scale {width:5px; height:40px; background-image: url(images/scale.png); background-repeat: none; background-size: contain;
    position:absolute;
    top:20px; left: 10px;
}
.colorItem {
    height:73px; width:280px; background-repeat:no-repeat; background-size: contain; position:relative;
}
.colorItem.temperature {background-image: url(images/huescale.png);}
.colorItem.Saturation {background-image: url(images/chromascale.png);}
.colorItem.value {background-image: url(images/valuescale.png);}
.header>img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
}
.header.skin {width:100%; height: 141px; padding-top: 85px;}

.litem{width:16%; font-weight: bold; }
.litem.h, .fitem.h {border-bottom:1px solid #ccc; border-radius: 2px; text-align: center;}
.fitem {width:28%; padding: 0 4px;}

.fitem input {border:1px solid #C7E2EB; width:100%; height:30px; font-size:20px; text-align: center;}

.btn-primary {
    color: #fff;
    background-color: #2c8490;
    border-color: #2c8490;
}


.colorDesc { border-radius: 10px !important; background-color: #eee; width:100%; 
    padding: 10px;}

    .iconbtn.restart {background:url(images/restart.png?v=1) no-repeat; background-size: contain;}
    .iconbtn.startnew {background:url(images/new-icon.png) no-repeat; background-size: contain;}
    

    .stageInputItem , .colorsp{
        width: 120px;
        float: left;
        border: 1px solid #eee;
        border-radius: 5px!important;
        margin: 5px;
        overflow: hidden;
    }
.colorBlock {height:36px; width:100%; padding: 5px;text-align: center; background-size:cover!important;}
.makeupPalette  .colorBlock{background-size: 1080px 45px;}
.makeupPalette .colorName {display: none;}
.makeupPalette.o2 .colorBlock{background-position: -150px 0 !important;}
.makeupPalette.o3 .colorBlock{background-position: -300px 0!important;}
.makeupPalette.o4 .colorBlock{background-position: -450px 0!important;}
.makeupPalette.o5 .colorBlock{background-position: -590px 0!important;}
.makeupPalette.o6 .colorBlock{background-position: -730px 0!important;}
.colorBlock .num {background:#fff; border-radius: 10px; height:20px; font-size:14px; line-height:20px; padding: 2px 5px;}
.colorName {
    text-align: center;
    font-size: 12px;
    width: 100%;
 
    background: #eae6e0;
}
.stageHead {width:100%; font-size: 16px; font-weight: bold; line-height:24px; padding:2px 10px 2PX 30px; background:#000; color:#fff;}
.stageHolder {margin:10px 0 25px 0;}

.inputGroup input {width: 25px; height:15px;}
.inputGroup label {padding-right:12px;}

.tag-Red {padding: 2px 5px; background-color: red; color:white;}
.tag-Blue { padding: 2px 5px; background-color: Blue; color:white;}
.tag-Pink { padding: 2px 5px; background-color: Pink; color:#000;}
.tag-Yellow { padding: 2px 5px; background-color: Yellow; color:#000;}
.tag-Green { padding: 2px 5px; background-color: rgb(134, 225, 134); color:#000;}
.tag-Purple { padding: 2px 5px; background-color: rgb(214, 127, 214); color:#000;}