.sio-ta/* Override MAIN GLOBAL.CSS FILE NAV */

html {
    background-color: #0075c9 !important;
}

.btn {
    font-size: 15px !important;
}

.row, #invest-product-iframe, .iframe-invoke, .ask-sanlam-soi {
    position: relative;
}

#invest-product-iframe, .iframe-invoke, .ask-sanlam-soi {
    left: -999em;
}

.soi-main-page #headerNav {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;    
}

.soi-main-page #accountLinks, .soi-main-page #utilityLinks {
    position: relative;
    right: 70px;    
}

.soi-overbanner-text {
    position: absolute; 
    z-index: 10; 
    left: 50%;
    color: #0074c9;
    width: 100%;
    max-width: 930px;
    margin-left: -506px;
    top: 112px;
    font-size: 18px;
}

    .soi-overbanner-text h2, .soi-overbanner-text h3 {
        color: #0074c9;
    }
    
    .soi-overbanner-text h2 {
        font-family: 'open_sansbold', helvetica, arial;
        font-size: 45px;
        width: 100%;
        letter-spacing: -2px;
        margin-bottom: 3px;
    } 
    
    .soi-overbanner-text h3 {
        font-size: 30px;
        margin-bottom: 5px;
        letter-spacing: -1px;
    }
    
        .soi-overbanner-text h3 span {
            font-family: 'open_sanssemibold', helvetica, arial;
        }
        
    .soi-overbanner-text p span {
        margin: 0 2px;
    }

.soi-tab {
    float: left;
}

    .soi-tabs {
        margin-top: 5px;
    }

    .soi-tabs .soi-tab {
	width: 31%;
    text-align: center;
    margin-right: 2%;
    padding-bottom: 3%;  
    }

    .soi-tab:hover {
        cursor: pointer;
    }

    .soi-tab h5 {
        font-size: 18px;
        color: #616163;
        font-family: 'open_sansregular', helvetica, arial;
        margin-bottom: 5px;
    }
        
    .soi-tab p {
        margin: 0;
        color: #858587;
    }
    
    .soi-tab:hover h5,
    .soi-tab:hover p {
        color: #0075c9 !important;    
    }
    
    .move-over-boy {
        position: relative;
        left: -88px;
    }
    
        .bluez-text h5, .bluez-text p {
            color: #0074c9;
        }
        
        .super-purple {
            border-bottom: 4px solid #f59a18;
        }
        
            .super-purple h5, .super-purple p {
                color: #5f3752 !important;
            }
            
            .super-purple h5 {
                font-size: 21px;
                font-family: 'open_sansbold', helvetica, arial;
            }
            
            .super-purple p {
                font-family: 'open_sanssemibold', helvetica, arial;
            }
            
            .super-purple img {
                visibility: hidden;
            }

    .soi-icon {
        width: 87.5px;
        text-align: center;
        overflow: hidden;
        position: relative;
        left: 50%;
        margin-left: -43px;
    }
    
    /* Icons */
    .super-purple .investments-icon {
        background: url("/Style Library/img/soi-Investments_purple_icon.png") no-repeat 0 0;
    }
    
    .super-purple .ra-icon {
        background: url("/Style Library/img/soi-retirement__purpleicon.png") no-repeat 0 0;
    }

    .super-purple .gap-icon {
        background: url("/Style Library/img/soi-RiskCover_purple_icon.png") no-repeat 0 0;
    }

    .super-purple .funeral-icon {
        /*background: url("/Style Library/img/soi-funeralcover_purple_icon.png") no-repeat 0 0;*/
        background: url("/Style Library/img/soi-funeralcover_purple_icon-v2.png") no-repeat 0 0;
    }

.new-left {
    float: left;
}

.new-right {
    float: right;
}

.soi-main-page .span4 {
    /*max-width: 995px;*/
    width: 100%;
}

.soi-icon-close {
    position: absolute;
    right: 30px;
    top: 40px;
    width: 90px;
    height: 55px;
    /*background: url("/Style Library/img/soi-close_icon.png") no-repeat 0 0;*/
    background: url("/Style Library/img/soi-close_icon-v2.png") no-repeat 0 0;
    z-index: 20;
    cursor: pointer;
}

.soi-icon-white-close {
    position: absolute;
    right: 30px;
    top: 40px;
    width: 90px;
    height: 55px;
    /*background: url("/Style Library/img/soi-close_white_icon.png") no-repeat 0 0;*/
    background: url("/Style Library/img/soi-close_icon-v2_white.png") no-repeat 0 0;
    cursor: pointer;
    z-index: 20;
}

.soi-page-intro-fader {
    opacity: 0;
}

#soi-page-intro {
    text-align: center;
    color: #555;
    position: relative;
    left: -999em;
}

    #soi-page-intro strong {
        color: #555;
    }
    
    #soi-page-intro .btn {
        padding: 12px 35px;
    }
    
    #soi-page-intro .btn {
        margin-right: 20px;
        background-color: #545454;
    }
    
    #soi-page-intro a.blueLink-bg {
        background-color: #0075c9 !important;
    }
    
    #soi-page-intro h2 {
        color: #555;
        font-size: 42px;
        margin: 0.83em 0;
        width: 100%;
    }
    
    #soi-page-intro p {
        font-size: 16px;
    }
    
    .soi-page-intro-buttons {
        margin-top: 35px;
    }

.fulfillRow-soi {
    color: #fff;
    background-color: #666769;
    position: relative;
    left: -999em;
}

    .fulfillRow-soi h2, .fulfillRow-soi h3 {
        color: #fff;
    }
        
    .fulfillRow-soi .colz {
        float: right;
        width: 100%;
        opacity: 0;
    }
    
        .fulfillRow-soi .colz h2 {
            width: 100% !important;
        }
        
            .fulfillRow-soi .colz h2 strong {
                color: #fff;
            }
    
        .vizarz {
            visibility: visible !important;
        }
    
        .fulfillRow-soi .colz iframe {
            visibility: hidden;
        }
    
        .fulfillRow-soi .colz ul {
            margin-left: 0;
        } 
        
            .fulfillRow-soi .colz li {
                background: url('../img/fulfillment-block/number.png') no-repeat 0 1px;
                font-family: 'open_sanssemibold', helvetica, arial;
                padding-left: 30px;
                list-style-type: none;
                list-style-image: none;
            }       
    
        .fulfillRow-soi .colz:first-child {
            float: left;
        }
    
    .fulfillRow-soi h3 {
        font-size: 14px;
        margin-bottom: 30px;
    }

#select-options {
    display: none;
}

.dissapear {
    display: block !important;
    position: fixed;
    top: 0;
    z-index: 30;
    background-color: #fff;
    padding-top: 20px !important;
}

#stable-menu {
    -webkit-box-shadow: 0 7px 2px -6px #888;
    -moz-box-shadow: 0 7px 2px -6px #888;
    box-shadow: 0 7px 2px -6px #888;
    z-index: 21;
}

#select-options {
    -webkit-box-shadow: 0 7px 2px -6px #888;
    -moz-box-shadow: 0 7px 2px -6px #888;
    box-shadow: 0 7px 2px -6px #888;
    z-index: 22;    
}

#sticky-nav-soi {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 62px;
    background-color: #f5f5f5;
    border-bottom: #ddd;
    z-index: 999;
    -webkit-box-shadow: 0 7px 2px -6px #ddd;
    -moz-box-shadow: 0 7px 2px -6px #ddd;
    box-shadow: 0 7px 2px -6px #ddd;    
}

    #sticky-nav-soi ul {
        margin: 0 auto;
        width: 100%;
        max-width: 1140px;
        padding: 0;
    }
    
        #sticky-nav-soi ul li {
            list-style-type: none;
            float: left;
            display: inline-block;
            margin-right: 10.5%;
        }
        
            #sticky-nav-soi ul li:last-child {
                margin-right: 0;
            }
        
    #sticky-nav-soi a {
        font-size: 17px;
        margin: 18px 0 0 0;
        color: #0074cb;
    }
    
        #sticky-nav-soi a.active-sticky {
            border-bottom: 4px solid #5f3654;
            color: #5f3654;
            font-size: 18px;
            padding: 0 10px 15px 10px;
            position: relative;
            top: 0;
            font-family: 'open_sansbold', helvetica, arial;
        }

.selectbuynow {
    text-align: center;
    margin-top: 0;
}

#bannerContainer-soi {
    height: 360px;
}

    #bannerContainer-soi .imgShowOnTab, #bannerContainer-soi .imgShowOnMbl {
        margin: 0 auto;
    }

/* ----- VIEW-PORT ----- */

@media screen and (max-width: 1150px){
    #bannerContainer-soi {
        height: 309px;
        display: block;
    }   
    
    .soi-overbanner-text {
        left: 0;
        padding-left: 5%;
        margin-left: 0;
    }
}

@media screen and (max-width: 1000px){

    .new-left, .new-right {
        float: none;
        display: block;
        text-align: center;
    }
        
    .new-left {
        margin-bottom: 40px;
    }
    
    .fulfillRow-soi .span4 {
        width: 100%;    
    }
    
    #sticky-nav-soi a {
        font-size: 13px;
    }
    
    #sticky-nav-soi a.active-sticky {
        font-size: 15px;
        top: 0;
        padding: 0 5px 20px 5px;
        border-bottom: 3px solid #5f3654;
    }
    
    #sticky-nav-soi ul li {
        margin-right: 0;
        margin-left: 5%;
    }
    


}

@media screen and (max-width: 960px){
    
    .soi-overbanner-text h2 {
        font-size: 40px;
    } 
    
    .soi-overbanner-text h3 {
        font-size: 20px;
    }   
    
    #accountLinks {
        right: 45px;
    }
    
    .sanlamLogo-logo {
        margin: 20px 0 0 -90px !important;
    }
    
    .super-purple {
        border: none;
    }
    
    .soi-tab h5, .super-purple h5 {
        font-size: 19px;
    }
    
}

@media screen and (max-width: 740px){
    #soi-page-intro .btn {
        width: 125px;
        margin-right: 0;
    }
}

@media screen and (max-width: 620px){
    
    .soi-tabs .soi-tab {
        width: 32%;
        margin-left: 11%;
        height: 220px;
    }
    
    #select-options {
        display: none !important;
    }   
}


@media screen and (max-width: 555px){
    #bannerContainer-soi {
        height: 196px;
    }
    
        #bannerContainer-soi .bannerImg {
            display: block;
        }
            
    .soi-overbanner-text {
        top: 77px;
    }
    
        .soi-overbanner-text p {
            display: none;
        }
        
        .soi-overbanner-text h2 {
            font-size: 22px;
            margin-bottom: 7px;
        }   
        
        .soi-overbanner-text h3 {
            font-size: 13px;
        }
        
    #accountLinks {
        right: 25px;
        margin-top: 23px !important;
    }
    
    #sticky-nav-soi {
        display: none !important;
    }   
    
    .soi-icon-close, .soi-icon-white-close {
        right: 0;
        top: 0;
    }
}

@media screen and (max-width: 480px){

    .soi-tabs {
        margin-top: 35px;   
    }
    
    .soi-icon {
        left: 0;
        margin-left: 0;
        float: left;
        top: -16px;
        padding-right: 10px;
    }
    
    .soi-tabs .soi-tab {
        width: 100%;
        margin-left: -104px;
        height: 95px;
        text-align: left;
        position: relative;
        left: 35%;
    }
    
    .super-purple h5 {
        font-size: 18px;
    }
    
    .soi-tab h5 {
        margin-bottom: 5px;
    }
}