/**
 * TOP MENU REPLACEMENT
 */
.sg-tm-toggle {
    background-color: #01476b;
    margin-bottom: 2px;
}
.sg-tm-toggle.active {
    background-color: #f60;
}
.sg-tm-toggle a {
    color: #fff;
    display: block;
    padding: 6px 8px;
}


/**
 * SELECTION WRAPPER
 */
.sg-wrapper {
    position: relative;
}
.sg-wrapper img {
    max-width: 100%;
    height: auto;
}


/**
 * IMAGE FLOATING ZOOM
 */
.sg-zb {
    background: url(../images/selection-guide/trans.png) 0 0 repeat;
    cursor: pointer;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}
.sg-zb-img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    z-index: 3;
}
.sg-zb-1 {
    top: 57%;
    left: 26.5%;
    width: 12%;
    height: 14%;
}
.sg-zb-img-1 {
    top: 32%;
    left: 7.5%;
}
.sg-zb-2 {
    top: 57%;
    left: 56%;
    width: 8%;
    height: 11%;
}
.sg-zb-img-2 {
    top: 30.5%;
    left: 35%;
}
.sg-zb-3 {
    top: 29.5%;
    left: 78.5%;
    width: 9%;
    height: 17.5%;
}
.sg-zb-img-3 {
    top: 6.5%;
    left: 58%;
}
.sg-zb-4 {
    top: 76%;
    left: 60%;
    width: 10%;
    height: 20.5%;
}
.sg-zb-img-4 {
    top: 54%;
    left: 40%;
}
.sg-zb-5 {
    top: 82%;
    left: 71%;
    width: 10%;
    height: 9%;
}
.sg-zb-img-5 {
    top: 55%;
    left: 51%;
}
.sg-zb-6 {
    top: 58.5%;
    left: 69%;
    width: 9%;
    height: 14%;
}
.sg-zb-img-6 {
    top: 33.5%;
    left: 48.5%;
}
.sg-zb-7 {
    top: 34%;
    left: 28.5%;
    width: 12%;
    height: 15%;
}
.sg-zb-img-7 {
    top: 9.5%;
    left: 9.5%;
}
.sg-zb-8 {
    top: 34%;
    left: 65%;
    width: 7%;
    height: 13%;
}
.sg-zb-img-8 {
    top: 9%;
    left: 43.5%;
}
.sg-zb-9 {
    top: 76%;
    left: 34%;
    width: 12%;
    height: 20%;
}
.sg-zb-img-9 {
    top: 54%;
    left: 15%;
}
.sg-zb-10 {
    top: 35%;
    left: 48%;
    width: 8%;
    height: 9%;
}
.sg-zb-img-10 {
    top: 7.5%;
    left: 27%;
}
.sg-zb-11 {
    top: 4.5%;
    left: 47%;
    width: 7.5%;
    height: 17%;
}
.sg-zb-img-11 {
    top: -18.5%;
    left: 26%;
}
.sg-zb-12 {
    top: 10%;
    left: 64%;
    width: 4.5%;
    height: 11.5%;
}
.sg-zb-img-12 {
    top: -16%;
    left: 41%;
}
.sg-zb-13 {
    top: 9%;
    left: 55.5%;
    width: 5%;
    height: 11.5%;
}
.sg-zb-img-13 {
    top: -17%;
    left: 33%;
}
.sg-zb-14 {
    top: 73%;
    left: 18%;
    width: 10%;
    height: 23%;
}
.sg-zb-img-14 {
    top: 52%;
    left: -2%;
}
.sg-zb-15 {
    top: 58%;
    left: 41%;
    width: 8.5%;
    height: 16.5%;
}
.sg-zb-img-15 {
    top: 34%;
    left: 20%;
}


/**
 * IMAGE FLOATING ICONS
 */
.sg-no {
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    z-index: 2;
}
.sg-no.active {
    z-index: 6;
}
.sg-no-1 {
    top: 8%;
    left: 17%;
}
.sg-no-2 {
    top: 4%;
    left: 43%;
}
.sg-no-3 {
    top: 4%;
    left: 58%;
}
.sg-no-4 {
    top: 10%;
    left: 69%;
}
.sg-no-5 {
    top: 29%;
    left: 21%;
}
.sg-no-6 {
    top: 29%;
    left: 89%;
}
.sg-no-7 {
    top: 69%;
    left: 53%;
}
.sg-no-8 {
    top: 81%;
    left: 13%;
}


/**
 * SELECTION GUIDE MENU
 */
.sg-menu {
    margin-top: 15px;
    padding-left: 15%;
}
.sg-menu ul {
    float: left;
    margin-right: 10%;
}
.sg-menu li {
    cursor: pointer;
    line-height: 25px;
    list-style: none;
    margin-bottom: 5px;
}
.sg-menu li a {
    cursor: pointer;
}
.sg-menu-no-icon {
    background-repeat: no-repeat;
    display: inline-block;
    padding-left: 30px;
}


/**
 * GLOBAL NUMBER ICONS
 */
.sg-no-icon-1 {
    background-image: url(../images/selection-guide/numbers/P1_blau.png);
}
.sg-no-icon-2 {
    background-image: url(../images/selection-guide/numbers/P2_blau.png);
}
.sg-no-icon-3 {
    background-image: url(../images/selection-guide/numbers/P3_blau.png);
}
.sg-no-icon-4 {
    background-image: url(../images/selection-guide/numbers/P4_blau.png);
}
.sg-no-icon-5 {
    background-image: url(../images/selection-guide/numbers/P5_blau.png);
}
.sg-no-icon-6 {
    background-image: url(../images/selection-guide/numbers/P6_blau.png);
}
.sg-no-icon-7 {
    background-image: url(../images/selection-guide/numbers/P7_blau.png);
}
.sg-no-icon-8 {
    background-image: url(../images/selection-guide/numbers/P8_blau.png);
}
.sg-no-icon-1:hover, .sg-no-icon-1.active {
    background-image: url(../images/selection-guide/numbers/P1_grau.png);
}
.sg-no-icon-2:hover, .sg-no-icon-2.active {
    background-image: url(../images/selection-guide/numbers/P2_grau.png);
}
.sg-no-icon-3:hover, .sg-no-icon-3.active {
    background-image: url(../images/selection-guide/numbers/P3_grau.png);
}
.sg-no-icon-4:hover, .sg-no-icon-4.active {
    background-image: url(../images/selection-guide/numbers/P4_grau.png);
}
.sg-no-icon-5:hover, .sg-no-icon-5.active {
    background-image: url(../images/selection-guide/numbers/P5_grau.png);
}
.sg-no-icon-6:hover, .sg-no-icon-6.active {
    background-image: url(../images/selection-guide/numbers/P6_grau.png);
}
.sg-no-icon-7:hover, .sg-no-icon-7.active {
    background-image: url(../images/selection-guide/numbers/P7_grau.png);
}
.sg-no-icon-8:hover, .sg-no-icon-8.active {
    background-image: url(../images/selection-guide/numbers/P8_grau.png);
}


/**
 * SELECTION GUIDE MODAL WINDOWS
 */
.sg-no-modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
.sg-no-modal-header {
    background-color: #d0d8df;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 10px 10px 0 0;
    color: #025981;
    display: block;
    font-weight: bold;
    padding: 3%;
}
.sg-no-modal-text {
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    color: #025981;
    font-size: .8em;
    padding: 4%;
}
.sg-no-modal-1 {
    top: 11%;
    left: 19%;
    width: 33%;
}
.sg-no-modal-2 {
    top: 7%;
    left: 45%;
    width: 33%;
}
.sg-no-modal-3 {
    top: 7%;
    left: 26%;
    width: 33%;
}
.sg-no-modal-4 {
    top: 12.5%;
    left: 36.5%;
    width: 33%;
}
.sg-no-modal-5 {
    top: 32%;
    left: 22%;
    width: 33%;
}
.sg-no-modal-6 {
    top: 31%;
    left: 57%;
    width: 33%;
}
.sg-no-modal-7 {
    top: auto;
    bottom: 30%;
    left: 21%;
    width: 33%;
}
.sg-no-modal-8 {
    top: auto;
    bottom: 18%;
    left: 15%;
    width: 33%;
}
.sg-no-modal-1 .sg-no-modal-header {
    background-image: url(../images/selection-guide/modals/modal1.png);
    padding-bottom: 58%;
}
.sg-no-modal-2 .sg-no-modal-header {
    background-image: url(../images/selection-guide/modals/modal2.png);
    background-position: top;
    padding-top: 45%;
}
.sg-no-modal-3 .sg-no-modal-header {
    background-image: url(../images/selection-guide/modals/modal3.png);
    padding-bottom: 70%;
}
.sg-no-modal-4 .sg-no-modal-header {
    background-image: url(../images/selection-guide/modals/modal4.png);
    background-position: right;
    background-size: auto 100%;
    padding-bottom: 55%;
}
.sg-no-modal-5 .sg-no-modal-header {
    background-image: url(../images/selection-guide/modals/modal5.png);
    padding-bottom: 58%;
}
.sg-no-modal-6 .sg-no-modal-header {
    background-image: url(../images/selection-guide/modals/modal6.png);
    background-position: right;
    background-size: auto 100%;
    padding-bottom: 63%;
}
.sg-no-modal-7 .sg-no-modal-header {
    background-image: url(../images/selection-guide/modals/modal7.png);
    padding-bottom: 62%;
}
.sg-no-modal-8 .sg-no-modal-header {
    background-image: url(../images/selection-guide/modals/modal8.png);
    background-position: right;
    padding-bottom: 58%;
}