/*== common css ==*/
@font-face {
    font-family: 'Lato', sans-serif;
    src: url('https://www.moneycontrol.com/commonfiles/font/Lato-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;}
@font-face {
    font-family: 'Lato';
    src: url('https://www.moneycontrol.com/commonfiles/font/Lato-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    border: none;
    box-sizing: border-box;
    list-style: none;
    border: none;
}

.clearfix {
    clear: both;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.partner_form.clearfix input::placeholder {
    color: #242020;
}

a,
a:hover,
a:visited {
    text-decoration: none;
    outline: none !important;
}

input:focus,
select:focus {
    outline: none;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin: 0px;
}

.kotak_wrapper {
    width: 1200px;
    margin: auto;
}

.kotak_left_wrapper {
    float: left;
    width: 860px;
    padding-right: 60px;
}

.kotak_right_wrapper {
    float: right;
    width: 300px;
}

h2 {
    font: 26px/35px 'Lato', sans-serif;
    color: #000;
    font-weight: 900;
    margin-bottom: 15px;
    text-transform: uppercase;
}

h2:after {
    content: "";
    width: 90px;
    height: 2px;
    background-color: #dbaa61;
    display: block;
}

.paragraph {
    font: 18px/26px 'Lato', sans-serif;
    color: #262626;
    font-weight: 400;
}


/*== common css ==*/


/* Header Starts */

.kotak-header {
    /*position: sticky;*/
    width: 100%;
    /*top:0;z-index: 9999;*/
}

.kotak-header .top-bar {
    height: 30px;
    filter: drop-shadow(-0.651px 1.891px 0.5px rgba(15, 33, 54, 0.35));
    background-color: #ebebeb;
    line-height: 1.6;
    text-align: right;
    padding: 0 10px;
}

.top-bar .back-to {
    font: 500 12px/26px 'Lato', sans-serif;
    letter-spacing: 0px;
    color: #1e1e1e;
}
.gry-txt{font:400 12px 'Lato', sans-serif;color: #262626;display: flex;flex-direction: column;justify-content: center;text-align: center;}
.m {
    color: #55af47;
}

.c {
    color: #036ca4;
}
.desktop-logo.finq-logo{display: flex;}
.logo-section {
    padding: 15px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
}

.navbar-left {
    width: 100%;
    background-color: #da251c;
}

.navbar-left .menus {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.menus li {
    padding: 15px 20px;
}

.menus li a {
    font: 500 21px/12px 'Lato', sans-serif;
    color: #ffffff;
}

.menus li:hover {
    background-color: #c42119;
}

.navbar-right {
    background-color: #08315f;
    width: 375px;
}

.menus li.navbar-right:hover {
    background-color: #08315f;
}

.navbar-right a {
    font: 500 21px/12px 'Lato', sans-serif;
    color: #ffffff;
}

.navbar-left {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

.menu-icon {
    cursor: pointer;
    display: inline-block;
    padding: 12px;
    position: relative;
    color: #fff;
}

.menu-icon .navicon {
    background: #fff;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.menu-icon .navicon:before,
.menu-icon .navicon:after {
    background: #fff;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.menu-icon .navicon:before {
    top: 5px;
}

.menu-icon .navicon:after {
    top: -5px;
}

.menu-btn {
    display: none;
}

.menu-btn:checked~.navbar-left {
    max-height: 240px;
}

.menu-btn:checked~.menu-icon .navicon {
    background: transparent;
}

.menu-btn:checked~.menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.menu-btn:checked~.menu-icon .navicon:after {
    transform: rotate(45deg);
}

.menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
    top: 0;
}


/* Header Ends */


/*== top banner css ==*/

.kotak_content .kotak_wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.top_banner {
    background: url("http://images.moneycontrol.com/assets/images/ms/finq/banner.jpg") no-repeat;
    height: 449px;
    background-position: center top;
    background-size: cover;
    margin-bottom: 45px;
}

.top_banner_content {
    width: 100%;
    margin: auto;
    text-align: center;
    padding-top: 60px;
}

.joinus {
    font: 39px/60px 'Lato', sans-serif;
    color: #fff;
    font-weight: 500;
    text-shadow:2px 2px 2px #000
}

.how_to_build {
    font: 68px/60px 'Lato', sans-serif;
    color: #fff;
    font-weight: 500;
    position: relative;padding: 20px 0;margin-bottom: 30px;
  
    text-shadow:2px 2px 2px rgb(15, 14, 14)
}
.how_to_build:before,.how_to_build:after{position: absolute;content:'';left:auto;right:auto;text-align: center;display:block;background:url('http://images.moneycontrol.com/assets/images/ms/finq/dotted.png')center center no-repeat;height:2px;width:100%}

.how_to_build:before{top:0}
.how_to_build:after{bottom: 0;}

.how_to_build .wealth {
    font: 68px/60px 'Lato', sans-serif;
    color: #fffefe;
    font-weight: 400;
    text-transform: uppercase;
    display: block;
}

.how_to_build .with {
    font: 25px/30px 'Lato', sans-serif;
    color: #fffefe;
    font-weight: 400;
    display: block;
}

.how_to_build .mutual_funds {
    font: 35px/38px 'Lato', sans-serif;
    color: #fffefe;
    font-weight: 400;
    text-transform: uppercase;
    display: block;
    padding-bottom: 5px;
}

.date_time {
    font: 23px/28px 'Lato', sans-serif;
    color: #fffefe;
    font-weight: 500;
}

.top_banner_content .linkbtn {
   min-width: 230px;
   line-height: 60px;
    margin-top: 10px;
}
.yel-txt4{color:#dbaa61;font:400 15px 'Lato', sans-serif;line-height: 40px;display: block;}

/* .top_banner_content .linkbtn:hover {
    border: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    border-color: #08315f;
    transition: .5s all;
} */


/*== top banner css ==*/


/*== about the webinar ==*/

.about_the_webinar {
    margin-bottom: 30px;
}


/*== about the webinar ==*/


/*== discussion points ==*/

.discussion_points {
    margin-bottom: 30px;
}

.discussion_points_list li:before {
    content: "";
    float: left;
    width: 8px;
    height: 8px;
    border: 2px solid #dbaa61;
    border-radius: 100%;
    margin-top: 6px;
    margin-right: 10px;
}

.discussion_points_list li:marker {
    display: none;
}

.discussion_points_list li div {
    overflow: hidden;
    font: 18px/26px 'Lato', sans-serif;
    color: #262626;
    font-weight: 400;
}


/*== discussion points ==*/


/*== speakers ==*/

.speakers {
    margin-bottom: 30px;
}

.speakers_list {
    display: flex;
}

.speakers_list li {
    list-style: none;
    width: 175px;
    margin-right: 17px;
}

.speakers_list li .image_block img {
    border: 1px solid #000;
    border-radius: 5px;
}

.speakers_list li .speaker_name {
    font: 20px/18px 'Lato', sans-serif;
    color: #262626;
    
    font-weight: 700;
    margin-top: 10px;
}

.speakers_list li .designation {
    font: 13px/18px 'Lato', sans-serif;
    color: #262626;
    font-weight: 400;
    margin-top: 5px;
}


/*== speakers ==*/


/*== form ==*/

.register_here_form {
    
    border-radius: 5px;

    position: sticky;
    top: 0;
    z-index: 10;
    background:#fff
}
.register_here_form form{position: relative;background:#fff;border:1px solid #dbaa61;border-radius: 5px;}
.register_here_form form:before{position: absolute;content:'';left:-8px;top:-8px;width: 105%;border-radius: 5px;background:#faf2e7;height:90%;z-index: -1;}

.pp_logtitle {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    padding: 32px 0px 0;
    text-align: center;
    font-size: 26px;
    color: #000;
    text-transform: uppercase;
}
.txt1{font:400 12px 'Lato', sans-serif;color:#9e7f7f;display: block;margin-bottom: 30px;text-align: center;}
.partner_form li {
    margin-bottom: 5px;
    position: relative;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
}


.partner_form input {
    border: 0;
    border-bottom: 1px solid #b2b2b2;
    background-color: #fff;
    width: 100%;
    padding: 5px;
    font-size: 15px;
   color: #000;
    font-weight: normal;
    line-height: 16px;
    margin-bottom: 10px;
}

.yel-txt1{color:#dbaa61}
.partner_form input:focus{border-color: #000;font-weight: 600;text-transform: unset;}
.popcheck{margin-bottom: 20px;}
.popcheck label{color:#424242;font:400 12px/18px 'Lato', sans-serif;display: flex;}
.txt3{margin-left:5px}

.partner_form input::-webkit-input-placeholder {color: #9b9b9b}
.partner_form input::-moz-placeholder {color: #9b9b9b}
.partner_form input:-ms-input-placeholder {color:#9b9b9b}
.partner_form input:-moz-placeholder {color:#9b9b9b}


.login_pledge .errorinput {
    border-bottom: 1px solid #ff0000;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
}

.error_bx {
    color: #ff0000;
    font-size: 10px;
    font-weight: 400;
    display: block;
    margin-top: -5px;
}

.terms_txt {
    color: #999999;
    font-size: 11px;
    font-weight: 400;
    padding: 0px 0px 25px;
}

.form_checkbox {
    position: relative;
    padding-left: 19px;
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    line-height: 16px;
    color: #424242;
    user-select: none;
    cursor: pointer;
    margin-bottom: 0;
}

.form_checkbox input {
    opacity: 0;
    height: 0;
    cursor: pointer;
    width: unset !important;
    left: 2px;
    top: 0px;
    position: absolute;
}

.form_checkbox .ic_check {
    position: absolute;
    border: 1px solid #A6A5A5;
    width: 11px;
    height: 11px;
    top: 2px;
    left: 0;
}

.terms_txt a {
    color: #424242;
    text-decoration: underline;
}

.thankucontainer {
    text-align: center;
    padding: 40px 30px;
    display: none;
}

.thankubox p {
    font-size: 16px;
    line-height: 25px;
    color: #2d2d2d;
    font-weight: 500;
    text-align: center;
}

.thankubox span {
    color: #ff7d00;
    font-weight: 500;
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 10px;
    display: block;
    background: -webkit-linear-gradient(#263571, #6d2659);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reserve_my_spot_form .modal-dialog {
    width: 320px;
}

.partner_form select {
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #d8d8d8;
    border-left: 0;
    width: 210px;
    padding: 5px 0px 3px 0;
    font-size: 15px;
    color: #ababab;
    font-weight: 500;
}

.linkbtn {
    cursor: pointer;
    min-width: 192px;
    padding: 0 15px;
    text-align: center;
    font: 20px/42px 'Lato', sans-serif;
    font-weight: 700;
    color: #000;
    background: #dbaa61;
   
    border-radius: 5px;
    display: inline-block;
    
}

/* .linkbtn:hover {
    text-decoration: none;
    background: #969696;
    color: #fff;
    text-decoration: none;
    border-bottom: 4px solid #08315f;
    transition: .5s all;
} */

.form_checkbox .ic_check:after {
    left: 3px;
    top: 0px;
    width: 2px;
    height: 5px;
    border: solid #000000;
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
}

.form_checkbox .ic_check:after {
    content: "";
    position: absolute;
    display: none;
}

.form_checkbox input:checked~.ic_check:after {
    display: block;
}

::placeholder {
    color: #ababab;
}

.formBox {
    width: 200px;
    margin: auto;
    padding-bottom: 30px;
}


/*== form ==*/


/* Footer Starts */

.kotak-footer {
    background-color: #000;
}

.about-social-footer {
    padding: 25px 0 15px 115px;
    display: flex;
    justify-content: space-between;
}

.about-social-footer .text {
    width: 70%;
}

.about-social-footer .text p {
    color: #e0e0e0;
    font: 300 13px/16px 'Lato', sans-serif;margin-bottom: 20px;
}

.about-social-footer .text p.copyright {
    color: #9c9c9c;
    font: 300 13px/16px 'Lato', sans-serif;
    
}

.social {
    width: 40%;
    position: relative;
    padding-right: 54px;
}

.social-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.social-icons a {
    margin-right: 20px;
}

.social-icons a:last-child {
    margin-right: 0;
}

.links {
    margin-bottom: 5px;
}

.links a {
    color: #9c9c9c;
    font: 400 13px/16px 'Lato', sans-serif;
    padding-right: 5px;
    border-right: 1px solid #9c9c9c;
}

.links a:last-child {
    margin: 0;
    border: 0;
}

.tooltiptext:before { position: absolute; content: " ";  width: 0;  height: 0; border-left: 10px solid transparent;
    border-right: 10px solid transparent;   border-bottom: 10px solid #da251c; left: 40%;  top: -10px;    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));}

.desktop-logo {
    display: block;
}

.mobile-logo {
    display: none;
}

.partsuc_msg{text-align: center;}
.thnk_head {font:500 30px 'Lato', sans-serif;color: #000;margin-bottom: 10px;}
.partsuc_msg p{font:400 18px/20px 'Lato', sans-serif;color: #262626;}

/* Footer Ends */

.cfdtxt {text-align: right; padding-top:20px; color:#fff; font:400 12px 'Lato', sans-serif;}


@media(max-width: 1100px) {
.kotak_wrapper{width: 100%;padding:0 15px;}
.kotak_left_wrapper{width: 65%;}
}

@media(max-width: 769px) {
    .max-width-class {
        max-width: 100%;
        padding: 0;
    }
    .logo-section {
        /* flex-direction: column; */
        padding: 10px;
    }
    .logo-section .logo {
        width: 120px;
    }
    .joinus{font-size: 29px;line-height: 40px;}
    .how_to_build{font-size: 45px;line-height: 50px;padding: 15px 0;margin-bottom: 15px;}

    .kotak_right_wrapper{float: none;margin:0 auto;display: block;}
    .mc_log{width: 100px;}
    .logo-section .mc-log {
        /* margin-top: 20px; */
    }
    .banner {
        background: url('http://stat2.moneycontrol.com/assets/images/ms/kotak/mobile-banner.jpeg');
        background-size: cover;
        background-repeat: no-repeat;
        height: 449px;
        width: 100%;
    }
    .banner-text {
        width: 100%;
    }
    .banner-text .heading {
        position: absolute;
        right: 33px;
        width: 80%;
        top: 40px;
    }
    .banner .title {
        font: 400 24px/27px 'Lato', sans-serif;
        margin-bottom: 10px;
    }
    .banner .sub-title {
        font: 100 16px/22px 'Lato', sans-serif;
        text-align: center;
    }
    .featured-related-articles {
        flex-direction: column;
    }
    .featured-section {
        height: auto;
    }
    .articles {
        margin-top: 30px;
    }
    .article-sect {
        padding: 0 10px;
    }
    .featured-sect {
        width: 94%;
        padding: 0 10px;
    }
    .related-articles-sect {
        width: 94%;
        padding: 0 10px;
        position: relative;
        top: -60px;
    }
    .r-article .r-text {
        font: 400 17px/22px 'Lato', sans-serif;
    }
    .video-list .r-article .r-text {
        font: 400 17px/22px 'Lato', sans-serif;
    }
    .f-title {
        font: 300 16px/23px 'Lato', sans-serif;
    }
    .r-article .label {
        font: 900 16px/22px 'Lato', sans-serif;
        bottom: 27%;
    }
    .featured-video .label {
        font: 900 16px/18px 'Lato', sans-serif;
        bottom: 27%;
    }
    .kotak-banner img {
        width: 100%;
    }
    .abt-btn {
        width: 100%;
    }
    .article-list {
        flex-direction: column;
    }
    .article-list a {
        flex: 1 0 243px;
        margin: 0;
    }
    .more-articles {
        flex-direction: column;
    }
    .kotak-banner {
        padding: 0 10px;
    }
    .about-kotak {
        height: auto;
        margin: 0;
    }
    .abt-sec-kotak {
        top: unset;
        padding: 0 10px;
    }
    .about-kotak .about-us {
        flex-direction: column;
        padding: 10px;
    }
    .abt-desc {
        margin: 0;
    }
    .about-kotak .about-us p {
        font: 400 14px/22px 'Lato', sans-serif;
        margin-top: 20px;
    }
    .about-social-footer {
        flex-direction: column;
        padding: 10px;
    }
    .about-social-footer .text {
        width: 100%;
    }
    .social {
        width: 100%;
        margin-top: 10px;
    }
    .social-icons {
        justify-content: flex-start;
    }
    .links {
        display: none;
    }
    .about-kotak .head,
    .article-sect .head,
    .related-articles-sect .head,
    .featured-sect .head,
    .trend-sect .head {
        font: 300 26px/50px 'Lato', sans-serif;
        display: inline-block;
        white-space: nowrap;
        overflow: auto;
    }
    .article-list .r-article {
        margin-top: 15px;
    }
    .menus li {
        padding: 9px;
        display: inline-block;
        border-bottom: 1px dashed #fff;
        margin: 0 10px;
    }
    .menus li.navbar-right {
        border-bottom: 0;
        margin: 0;
    }
    .menus li:nth-child(3) {
        border-bottom: 0;
    }
    .menus li a {
        font: 400 17px/32px 'Lato', sans-serif;
        color: #ffffff;
    }
    .navbar-right {
        width: auto;
        background-color: transparent;
    }
    .navbar-left {
        visibility: hidden;
    }
    .navbar-left .menus {
        justify-content: unset;
        overflow: unset;
        white-space: unset;
        flex-direction: column;
        align-items: inherit;
    }
    .article-detail-section {
        flex-direction: column;
        padding: 0 10px;
    }
    .art-detail {
        width: 100%;
    }
    .trend-art {
        width: 100%;
        position: relative;
    }
    .trend-sect {
        position: unset;
        top: unset;
        margin-bottom: 40px;
    }
    .detailed-info .desc {
        margin-top: 10px;
        font: 400 16px/20px 'Lato', sans-serif;
    }
    .art-detail .kotak-banner {
        margin: 20px 0;
    }
    .tags {
        width: 100%;
        margin-top: 10px;
    }
    .detailed-info .title {
        font: 900 27px/33px 'Lato', sans-serif;
    }
    .trend-sect .head:before {
        bottom: 0;
    }
    .trending-art {
        margin-top: 15px;
    }
    .article-detail-section {
        margin-top: 25px;
    }
    .tooltiptext {
        width: auto;
    }
    .tooltiptext .social-icons {
        justify-content: space-between;
    }
    .tooltiptext:before {
        left: 30%;
    }
    .video-list .article-sect .current .head {
        font: 700 21px/50px 'Lato', sans-serif;
    }
    .video-sec {
        top: 3%;
        height: 408px;
    }
    .video-list .detailed-info .play-icon {
        top: 21%;
        left: 43%;
    }
    .featured-video .play-icon {
        top: 25%;
        left: 43%;
    }
    .nav-bar {
        background-color: #da251c;
    }
    .menu-name {
        display: inline-block;
    }
    .on {
        display: none;
    }
    .menu-btn:checked~.navbar-left .navbar-right {
        background-color: #08315f;
    }
    .visiblity {
        visibility: visible;
    }
    .kotak_wrapper {
        width: 100%;
        padding: 0 20px;
    }
    .kotak_left_wrapper {
        width: 100%;
        padding-right: 0;
    }
    .speakers_list li {
        margin: 0 auto 20px;
    }
    .speakers_list {
        display: block;
    }
    .desc img {
        width: 100%;
    }
    .desktop-logo {
        display: none;
    }
    .mobile-logo {
        display: block;
    }
    .cfdtxt { padding-top:5px; color:#fff; font:400 12px 'Lato', sans-serif;}

}

@media (min-width: 769px) {
    .navbar-left {
        clear: none;
        max-height: none;
    }
    .menu-icon {
        display: none;
    }
}




#VideoModal {
    z-index: 9999;
}

#VideoModal .modal-dialog { width:700px;}


.popin_video {
    border: 0px solid #7e2a8e;
    border-radius: 5px;
    background: rgba(255, 255, 255);
    padding: 50px 50px;
    width: 700px;
    height:500px;
}

.pop_video_box {
    width: 100%;
    height: 400px
}



.video_cl_pop {
    position: absolute;
    left: 625px;
    top: 20px;
    background: url("https://images.moneycontrol.com/assets/images/ms/finq/popcross.png") no-repeat;
    width: 30px;
    height: 30px;
    cursor: pointer;
    outline: none;
    border:0px;
}

.video_cl_pop:focus {
    outline: none;
}


@media screen and (max-width: 980px) {
    .popin_video {
        width: 100%;
        height: 100%;
        padding: 20px;
    }
    .popin {
        width: 100%;
        padding: 20px;
    }
    
    .video_cl_pop{ background-size:100% 100%; left:auto; top:10px; right:10px; width:15px; height:15px;}
    .popin_video{ padding:30px 20px 20px;}


}

@media (max-width: 768px) {
    .pop_video_box {
        /* width: 350px;*/
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 768px) {
    .modal-dialog, #VideoModal .modal-dialog {
        width: auto;
    
    }
}


/****** tooltip css *****/
.exclaim {position: relative;}
.exclaim .tooltip {
background: #faf2e7;
border: 1px solid #dbaa61;
border-radius: 5px;
font-size: 12px;
top: 100%;
color: #000;
display: block;
right: -12px;
top: -5px;
font: 400 12px/18px 'Lato', sans-serif;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
width: 200px;
-webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
   -o-transform: translateY(10px);
    transform: translateY(10px);
-webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
   -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    box-shadow: 5px 5px 5px rgb(0 0 0 / 14%);
    
    z-index: 1;
}
.exclaim .tooltip::before {
    border-bottom: 10px solid #dbaa61;
    
}
.exclaim .tooltip::after {
    border-bottom: 10px solid #faf2e7;
    margin-bottom: -2px;
    z-index: 1;
}
.exclaim-img-rgt{position: absolute;right: 0;top: -38px;z-index: 1;}
.exclaim .tooltip p{margin-bottom: 10px;}
.exclaim .tooltip span {display: block;line-height: 20px;}


.exclaim .tooltip::before, .exclaim .tooltip::after {
    content: "";
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: 100%;
    right: 11px;
    left: unset;}

.exclaim:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
    transform: translateY(0px);
}