@charset "utf-8";

/* CSS Document */

html{background-color:#FFF;}
body{width:100%; font-family:'Roboto', sans-serif; font-weight:400; font-size:16px; color:#4c4c4c; margin:0; width:100%; height:100%;}

img{border:none 0;}
p{margin:0 0 10px 0;}
a{color:#0070bf; text-decoration:none;}
a:hover{text-decoration:underline;}
li{margin-bottom:15px;}
strong{font-weight:700;}

h1, h2{font-size:36px; font-weight:300; margin:0 0 10px 0;}
h3{font-size:19px;}

.red{color:#ed1c24;}

.smallText1{font-size:14px;}

.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.center{text-align:center;}
.canvas{width:1170px; margin:0 auto;}

.tab-content{display:none;}
.tab-content#tab-1{display:block;}

/* HOMEPAGE 1 */
.header{background-color:#FFFFFF; padding:20px 0; position:relative; z-index:20; -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.1); box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);}
.header .logo{float:left; margin-bottom:-5px;}
.header ul{list-style:none; margin:0; padding:0; display:inline-block;}
.header li{display:inline-block; margin:0; padding:0;}
.header .topMenu{float:right; text-align:right;}
.header .topMenu a{color:#8c8c8c; padding:5px; display:inline-block; margin:0;}
.header .topMenu ul{vertical-align:middle;}
.header .topMenu .phone{display:inline-block; margin-left:15px; vertical-align:middle;}
.header .topMenu .phone a{color:#45bf1d; font-size:25px; background:url(../images/new/icon-phone-green.png) left center no-repeat; padding:0 0 0 37px; text-decoration:none;}

.header .mainMenu{text-align:right; text-transform:uppercase;}
.header .mainMenu a{color:#4c4c4c; padding:0; display:inline-block; margin-left:25px;}
.header .mainMenu a:hover{text-decoration:none; color:#ed1c24;}
.header .mainMenu .ibk a{color:#ed1c24; font-weight:500;}
.header .mainMenu a.active{color:#ed1c24;}

.header .rightButton{float:right; text-align:right; margin:9px 5px 0 0; box-sizing:border-box; display:none;}
.header .btn-navbar{background:none; border:none 0;  margin:0; padding:15px; width:auto; height:auto; position:relative; cursor:pointer; min-width:0;}
.header .btn-navbar .icon-bar{background-color:#ed1c24; height:3px; width:22px; margin:0 0 4px 0; display: block;}

.footer{color:#808080; font-size:13px; padding:20px 0;}
.footer .canvas{max-width:960px;}
.footer .menu{margin-top:20px;}
.footer ul{list-style:none; margin:0; padding:0; display:inline-block;}
.footer li{display:inline-block; margin:0; padding:0; border-left:solid 1px #bfbfbf; padding-left:10px; margin-left:8px;}
.footer li:first-child{padding-left:0; margin-left:0; border-left:none 0;}
.footer a{color:#808080;}

.lineSeparator{border-bottom:solid 1px #e6e6e6; height:30px; margin-bottom:30px; line-height:0;}

.content .leftColumn{float:left; width:860px;}
.content .rightColumn{float:right; width:280px; padding-top:30px;}

/* .homepage-1 .hero{background:url(../images/new/hero-homepage-1.jpg) #c1a043 top center no-repeat; margin-bottom:40px; z-index:1;}*/
.homepage-1 .hero{background:url(../images/new/hero-homepage-3.jpg) #f1afb1 top center no-repeat; margin-bottom:40px; z-index:1;}
.homepage-1 .hero .canvas{padding:30px 0;}
/*.homepage-1 .hero .banner{background:url(../images/new/hero-homepage-1-image.png) top center no-repeat; min-height:390px;}*/
.homepage-1 .hero .banner{background:url(../images/new/cont-online-desktop.png) top center no-repeat; min-height:390px;}

.homepage-1 .hero .info{width:300px; float:left; color:#000; margin-top:60px;}
.homepage-1 .hero .info h1{font-size:42px; font-weight:700; margin:0;}
.homepage-1 .hero .info h2{font-size:26px; font-weight:300; margin:0 0 30px 0;}
.homepage-1 .hero .info .mainButton a{font-weight:700; padding:9px 30px;}


.homepage-1 .hero .tablet{background-color:#323232; -webkit-border-radius:10px; border-radius:10px; padding:20px 10px 25px 10px; box-sizing:border-box; width:280px; float:right; z-index:3; position:relative; margin-bottom:-60px;}
.homepage-1 .hero .tablet .rectangle{position:absolute; top:9px; left:50%; margin-left:-11px; fill:#595959;}
.homepage-1 .hero .tablet .circle{position:absolute; bottom:7px; left:50%; margin-left:-5px; fill:#595959;}
.homepage-1 .hero .tablet .wrapper{background-color:#FFF; padding:15px 10px;}
.homepage-1 .hero .tablet .iconList{font-size:12px; line-height:12px; list-style:none; margin:0 auto; margin-bottom:20px; padding:0; max-width:200px;}
.homepage-1 .hero .tablet .iconList img{width:30px; height:25px; margin-right:5px;}
.homepage-1 .hero .tablet .mainButton a{padding:7px 20px 9px 20px; min-width:80px;}

.hero{position:relative;}
.hero .menu{background:rgba(51, 0, 2, 0.6); color:#FFF; position:absolute; left:0; right:0; bottom:0; font-weight:400; z-index:2; font-size:15px; line-height:20px;}
.hero .menu ul{margin:0; padding:0; list-style:none; width:100%;}
.hero .menu li{margin:0; padding:0; display:inline-block; float:left;}
.hero .menu a{color:#FFF; display:block; padding:10px 8px;}
.hero .menu a:hover{text-decoration:none; background:rgba(0, 0, 0, 0.2);}
.hero .menu .canvas{padding:0; min-height:0;}
.hero .menu .active a, .hero .menu .active a:hover{color:#ed1c24; font-weight:700; padding:10px 15px; background-color:#FFF;}

.hero .menu .button{display:none;}

.mainButton a{background-color:#ed1c24; color:#FFFFFF; font-size:19px; font-weight:300; padding:9px 20px; -webkit-border-radius:4px; border-radius:4px; display:inline-block;}
.mainButton a:hover{text-decoration:none; background-color:#d60000;}



.chatbotBox{background-color:#f2f4f5; -webkit-border-radius:4px; border-radius:4px; padding:15px;}
.chatbotBox .slogan{margin:5px 0 10px 0; text-align:center;}
.chatbotBox .bubble{background-color:#FFFFFF; padding:6px 10px 9px 10px; -webkit-border-radius:6px; border-radius:6px; border:solid 1px #dbe0e4; position:relative; margin-bottom:10px; font-size:15px; line-height:17px; color:#1a1a1a; display:block; clear:both; font-weight:400;}
.chatbotBox .bubble.first{ -webkit-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px;}
.chatbotBox .bubble.first .arrow{width:17px; height:18px; background:url(../images/new/chat-bubble-arrow-02.png) top left no-repeat; position:absolute; left:-17px; top:-1px; margin-top:0;}
.chatbotBox .group{padding:0 0 0 70px; position:relative; margin-bottom:10px;}
.chatbotBox .avatar{width:60px; height:60px; overflow:hidden; position:absolute; left:0; top:0;}
.chatbotBox .avatar img{width:60px; height:60px;}
/* HOMEPAGE 1 end */

/* HOMEPAGE 2 */
.homepage-2 .header .mainMenu a{margin-left:8px;}
.homepage-2 .header .mainMenu{float:right; width:915px;}

.header .tabs{border-bottom:solid 1px #CCC; margin-bottom:20px; display:block;  width:100%; text-align:center;}
.header .tabs .tab{display:inline-block; width:47%; text-transform:uppercase; font-weight:700; text-align:center; background:#FFF;}
.header .tabs .tab a{display:block; color:#808080; padding:10px 20px;}
.header .tabs .tab a:hover{color:#4c4c4c;}
.header .tabs .tab.active{border:solid 1px #CCC; border-bottom:solid 1px #FFF; margin-bottom:-1px; position:relative; z-index:2;}
.header .tabs .tab.active a{color:#4c4c4c; }

.homepage-2 .logo{margin-top:12px;}

.homepage-2 .hero{background:url(../images/new/hero-homepage-2-image.jpg) #ed1c24 top left no-repeat; margin-bottom:40px; z-index:1;}
.homepage-2 .hero .canvas{padding:25px 0;}
.homepage-2 .hero .rightMenu{text-transform:uppercase; font-size:38px; font-weight:700; float:right; width:270px;}
.homepage-2 .hero .rightMenu ul{margin:0; padding:0; list-style:none;}
.homepage-2 .hero .rightMenu li{margin:0; border-bottom:solid 1px #ef868a; padding:15px 0; line-height:50px;}
.homepage-2 .hero .rightMenu a{color:#FFF; background:url(../images/new/icon-arrow-right-white.png) right 7px center no-repeat; display:block; background-size:12px 21px;}
.homepage-2 .hero .rightMenu a:hover{text-decoration:none;}
.homepage-2 .hero .rightMenu .active{padding-top:0;}
.homepage-2 .hero .rightMenu .active a{color:#ed1c24; font-size:19px; background-color:#FFF; display:block; padding:10px 15px; -webkit-border-radius:5px; border-radius:5px; line-height:30px; background:url(../images/new/icon-arrow-right-red.png) #FFF right 10px center no-repeat; background-size:10px 18px;}

.homepage-2 .footer{padding-bottom:65px;}
/* HOMEPAGE 2 end */

@media screen and (max-width:730px) {
	.canvas{width:auto; padding:0 10px;}
	
	.header{text-align:center; padding:0;}
	.header .canvas{padding:10px 0 0 0;}
	.header .logo{padding:10px; margin:0 0 0 5px;}
	.header .logo img{width:180px; height:auto;}
	.header .topMenu{float:none; text-align:center; font-size:13px; border-bottom:solid 1px #dbe0e4; padding-bottom:8px;}
	.header .topMenu .phone{margin-left:15px;}
	.header .topMenu .phone a{font-size:20px; background-size:20px; padding-left:25px; line-height:20px;}
	
	.header .rightButton{display:block;}
	
	.header .mainMenu{text-align:left; display:none;}
	.header .mainMenu ul{margin:0; padding:0; width:100%; border-top:solid 1px #dbe0e4;}
	.header .mainMenu li{display:block; width:100%; margin:0; padding:0; border-bottom:solid 1px #dbe0e4;}
	.header .mainMenu a{display:block; padding:15px; margin:0;}
	
	.homepage-1 .hero{margin-bottom:20px;}
	.homepage-1 .hero .canvas{padding:0;}
	.homepage-1 .hero .banner{clear:both; background:none;}
	.homepage-1 .hero .info{float:none; width:auto; padding:20px 10px; margin:0; padding-bottom:240px; background:url(../images/new/hero-homepage-1-image.png) bottom -80px center no-repeat; background-size:auto 300px;}
	.homepage-1 .hero .info h2{margin-bottom:15px;}
	.homepage-1 .hero .tablet{float:none; width:auto; margin:0; padding:10px; -webkit-border-radius:0; border-radius:0;}
	.homepage-1 .hero .tablet .rectangle{display:none;}
	.homepage-1 .hero .tablet .circle{display:none;}
	.homepage-1 .hero .tablet .wrapper{padding:30px 10px;}
	.homepage-1 .hero .tablet .iconList{font-size:14px; line-height:14px; max-width:280px;}
	
	.hero .menu{position:relative;}
	.hero .menu li{display:block; float:none; border-bottom:solid 1px #583615;}
	.hero .menu li a br{display:none;}
	.hero .menu li a, .hero .menu .active a, .hero .menu .active a:hover{color:#FFF; padding:15px; background:none; font-weight:inherit;}
	
	.hero .menu .button{display:block; text-align:center; text-transform:uppercase; font-weight:700; font-size:19px;}
	.hero .menu .button a{padding:20px;}
	.hero .menu .button .arrow{width:18px; height:12px; background:url(../images/new/icon-arrow-down-white.png) center no-repeat; background-size:14px 8px; display:inline-block;}
	.hero .menu ul{display:none; font-size:16px;}
	.hero .menu ul a, .hero .menu ul .active a{padding:15px;}
	
	.content .leftColumn{float:none; width:auto;}
	.content .rightColumn{float:none; width:auto; padding-top:15px;}
	
	.lineSeparator{height:30px; margin-bottom:15px;}
	
	.homepage-2 .logo{float:none; text-align:center;}
	
	.homepage-2 .header .mainMenu{float:none; width:auto;}
	.homepage-2 .header .mainMenu a{padding:10px 15px;}
	
	.homepage-2 .hero{background-size:320px auto; background-position:top center; padding-top:120px;}
	.homepage-2 .hero .rightMenu{float:none; width:auto; padding:0 20px;}
	.homepage-2 .hero .rightMenu li{padding:8px 0;}
	
	.header .mainMenu .tabs{border:none 0; border-bottom:solid 1px #dbe0e4; font-size:14px;}
	.header .mainMenu .tabs .tab{border:none 0;}
	.header .mainMenu .tabs .tab.active{border:solid 1px #dbe0e4; border-bottom:solid 1px #FFF;}
	.header .mainMenu .tabs .tab a{margin:0; padding:12px 10px;}
	.header .mainMenu .tab-content ul{border:none 0;}
	
	.homepage-2 .tab-content#tab-1{display:none;}
	.homepage-2 .mainMenu .tabs .tab.active{border:none 0;}
        
        .features {
        display: table;
        margin: auto;
        border-spacing: 10px;
    }

    .e-sign .title {
        background: red;
        color: white;
        padding: 7px 15px;
        margin: auto;
        width: 60%;
        text-align: center;
    }

    .e-sign .subtitle {
        margin: auto;
        width: 60%;
        padding-bottom: 3%;
        text-align: center;
    }

    .e-sign p {
        margin: auto;
        width: 80%;
        padding: 20px 0 20px 0;
        text-align: center;
    }

    .e-sign .block {
        padding: 10px 25px 10px 0px;
        display: table-row;
    }

    .e-sign .block .icon, .e-sign .block .text{
        display: table-cell;
        vertical-align: middle;
        padding: 2px;
    }

    .e-sign .block .icon {
        text-align: center;
    }

    .e-sign .block .icon img {
        height: 60px;
        width: auto;
    }

    .e-sign .mainButton{
        margin-top: 25px;
        text-align: center;
    }

}

@media screen and (max-width:360px){
	body{font-size:14px;}	
}

/* ===// START Card de DEBIT TAB //==== */
.imageAndTextTable {
    width: 100%;
    /*border-spacing: 0 50px*/
}

.imageAndTextTable td {
    padding: 20px;
}

.debitCardPhoto {
    display:inline-block;
    text-align: left;
    /*max-width: 400px;*/
    max-width: 90%;
}

.debitCardText {
    /*display: inline-block;*/
    /*max-width: 260px;*/
    max-width: 80%;
}

.debitCardText .mainButton {
    margin-top: 10px;
    float: left;
}

.debitCardText p{
    /*max-width: 330px;*/
    max-width: 80%;
}

.debitCardText .twoCardsText p{
    max-width: 90%;
}

.debitCardPhoto img {
    display: inline-block;
    max-width: 100%;
    
}

.explanationText {
    font-size: 13px;
    float: left;
}
/* ==//Responsive//== */
@media all and (max-width:840px) {
    .debitCardText .mainButton {
        margin-top: 10px;
        float: none;
    }

    .imageAndTextTable {
        /*border-spacing: 0 20px;*/
        width:100%;
    }

    .imageAndTextTable tr {
        display: table;
        width: 100%;
        text-align: center;
    }

    .imageAndTextTable td {
        display: table-row;
        text-align: center;
        width:100%;
    }

    .debitCardText {
        max-width: 100%; /*80%*/
        padding-top: 20px;
    }

    .debitCardText p {
        text-align: center;
        max-width:100%;
    }

    .debitCardPhoto {
        text-align: center;
        width: 100%
    }

    .debitCardPhoto img {
        /*padding: 20px;*/
        box-sizing: border-box;
    }

    .debitCardText .twoCardsText p{
        max-width: 100%;
    }

    .explanationText {
        padding-top: 20px;
        padding-bottom: 30px;
    }

}
/* ===// END Card de DEBIT TAB //==== */




.e-sign .title {
    background: red;
    color: white;
    width: fit-content;
    padding: 3px 10px;
}

.e-sign .block {
    padding: 10px 25px 10px 0px;
    display: inline-block;
}

.e-sign .block .icon, .e-sign .block .text{
    display: inline-block;
    vertical-align: middle;
    padding: 2px;
}

.e-sign .block .icon img {
    height: 60px;
    width: auto;
}

.e-sign .mainButton{
    margin-top: 20px;
}

.homepage-1 .hero .info{width:auto; margin-top:210px;}
.homepage-1 .hero .banner{background-position:top left;}

@media screen and (max-width:730px) {
                .homepage-1 .hero .info{background:url(../images/new/campanie-cont-online-desktop.jpg) #f1afb1 bottom center no-repeat; margin-top:0; background-size:90% auto; padding-bottom: 170px;}
                .homepage-1 .hero .info .mainButton a{margin-bottom:15px; font-size:16px;}
}
.homepage-1 .hero .banner{background: url(../images/new/campanie-cont-online-desktop.jpg) top center no-repeat;}
.homepage-1 .hero .info{width:890px; text-align:center; margin-top:230px;}

@media screen and (max-width:730px) {
                .homepage-1 .hero .info{width:100%; margin-top:0;}
}
.homepage-1 .hero .info{margin-top:250px; padding-left:220px; box-sizing:border-box;}

 

@media screen and (max-width:730px) {
                .homepage-1 .hero .info{width:100%; margin-top:0; padding-left:0;}
}

.homepage-1 .hero{background:#f2acac;}
.homepage-1 .hero .banner{background: url(../images/new/campanie-cont-online-desktop.jpg) top left no-repeat;}

 

.homepage-1 .hero .info{margin-top:250px; padding-left:78px; box-sizing:border-box;}

 

@media screen and (max-width:730px) {
                .homepage-1 .hero .info{width:100%; margin-top:0; padding-left:0;}
}

/* HERO BUTOANE DEC 2020 */
.homepage-1 .hero{background-color:#193545;}
.homepage-1 .hero .banner{background:none; min-height:0; padding:0;}

.homeBanner{background:url(images/hero-cont-online.png) top center no-repeat; background-size:870px auto; color:#FFF; width:870px; min-height:335px; float:left;}
.homeBanner .cta{text-align:center; padding-top:200px;}
.homeBanner .button{color:#FFF; border:solid 2px #FFF; display:inline-block; padding:10px 15px; -webkit-border-radius:50px; border-radius:50px; text-align:center; min-width:70px; margin:5px; font-size:14px;}
.homeBanner .button::after{content:"›"; padding-left:10px;}
.homeBanner .button:hover{text-decoration:none; background:rgba(255,255,255,0.1);}

@media screen and (max-width:730px) {
	.homepage-1 .hero .banner{margin-bottom:0;}
	.homeBanner{background:url(images/hero-cont-online-mobile.png) top center no-repeat; background-size:auto; width:auto; height:536px; float:none;}
	.homeBanner .cta{padding-top: 90px;}
	.homeBanner .button{font-size:16px; min-width:90px;}
}
/* HERO DEC 2020 end */


/* POP-UP */
.popup {
    position: fixed;
    top: 50%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    left: 10px;
    right: 10px;
    z-index: 1200;
    display: none;
    margin: 0;
    padding: 0;
    max-height: 100%;
    overflow-y: scroll;
}

.overlay {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    margin-top: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.65);
}

.popupBox {
    width: 100%;
    max-width: 500px;
    background-color: #FFF;
    margin: 10px auto;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    min-height: 50px;
    overflow: hidden;
    position: relative;
}

    .popupBox .wrapper {
        padding: 20px;
    }

    .popupBox .closeButton {
        width: 42px;
        height: 42px;
        position: absolute;
        top: 0;
        right: 0;
        background: url(images/icon-button-close-gray.png) center no-repeat;
        background-size: 24px 24px;
        cursor: pointer;
    }

    .popupBox ul {
        margin: 0 0 0 15px;
        padding: 0;
    }

    .popupBox li {
        margin: 0;
        padding: 0 0 5px 0;
    }

    .popupBox .video {
        margin-bottom: 15px;
    }

.popup.scrollable .popupBox {
    padding-bottom: 60px;
}
/* POP-UP end */
.buttonOk {
    background-color: #ed1c24;
    color: #FFF;
    font-weight: 500;
    font-size: 16px;
    padding: 14px;
    text-align: center;
    width: 100%;
    border: none 0;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: block;
    box-sizing: border-box;
    cursor: pointer;
}

    .buttonOk:disabled {
        background-color: #f9b0b3;
    }

    .buttonOk:hover {
        background-color: #de0007;
    }

    .buttonOk:disabled:hover {
        background-color: #f9b0b3;
    }

.cta.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    text-align: center;
    z-index: 1000;
}

    .cta.bottom .buttonOk {
        -webkit-box-shadow: 0 3px 8px rgba(0,0,0,0.3);
        box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    }

        .cta.bottom .buttonOk:disabled {
            -webkit-box-shadow: 0 3px 8px rgba(0,0,0,0.15);
            box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        }

@media screen and (max-width:360px) {
    .buttonOk {
        font-size: 15px;
        padding: 12px;
    }
}