/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 17/03/2022, 01:50:46 PM
    Author     : Antonio Vera
*/
/** {box-sizing: border-box;}*/
.banner {
    display: none;
    height: 70vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
}
.bannerspn{
    text-align:center;
    height: 0;
    top: -10px;
}
/* The dots/bullets/indicators */
.bannerdot {
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.activebn {
    background-color: #aaa;
}
/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 0.15s;
    animation-name: fade;
    animation-duration: 0.15s;
}

@-webkit-keyframes fade {
    from {opacity: .8}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .8}
    to {opacity: 1}
}
.personaa{
    background-image:url('https://assets.claro360.com/onboarding/persona/Persona_01.png');
}
.personab{
    background-image:url('https://assets.claro360.com/onboarding/persona/Persona_02.png');
}
.personac{
    background-image:url('https://assets.claro360.com/onboarding/persona/Persona_03.png');
}
.personad{
    background-image:url('https://assets.claro360.com/onboarding/persona/Persona_04.png');
}
.personaa h1, .personab h1,
.personac h1, .personad h1{
    font-weight:bold;
    margin:0;
    color:#fff;
    padding:40vh 0 0 0;
}
.personaa .contD{
    background-color:rgba(23,162,184,1);
    bottom:5vh;
    position:absolute;
    color: white;
    padding:20px;
}
.personab .contD, .personac .contD, .personad .contD{
    background-color:#da291c;
    bottom:5vh;
    position:absolute;
    color: white;
    padding:40px;
}
.empresaa{
    background-image:url('https://assets.claro360.com/onboarding/empresa/Empresa_01.png');
}
.empresab{
    background-image:url('https://assets.claro360.com/onboarding/empresa/Empresa_02.png');
}
.empresac{
    background-image:url('https://assets.claro360.com/onboarding/empresa/Empresa_03.png');
}
.empresad{
    background-image:url('https://assets.claro360.com/onboarding/empresa/Empresa_04.png');
}
.empresaa h1, .empresac h1{
    font-weight:bold;
    margin:0px;
    color:#fff;
    padding:40vh 0 0 0;
}
.empresab h1, .empresad h1{
    font-weight:bold;
    margin:0;
    color:#fff;
    padding:35vh 0 0 0;
}
.empresaa .contD, .empresab .contD, .empresac .contD, .empresad .contD{
    background-color:#A4A2A2;
    bottom:5vh;
    position:absolute;
    color: white;
    padding:35px;
}
.corporativoa{
    background-image:url('https://assets.claro360.com/onboarding/corporativo/Corporativo_01.png');
}
.corporativob{
    background-image:url('https://assets.claro360.com/onboarding/corporativo/Corporativo_02.png');
}
.corporativoc{
    background-image:url('https://assets.claro360.com/onboarding/corporativo/Corporativo_03.png');
}
.corporativod{
    background-image:url('https://assets.claro360.com/onboarding/corporativo/Corporativo_04.png');
}
.corporativoa h1{
    font-weight:bold;
    margin:0;
    color:#fff;
    padding:35vh 0 0 0;
}
.corporativoc h1, .corporativob h1, .corporativod h1{
    font-weight:bold;
    margin:0px;
    color:#fff;
    padding:40vh 0 0 0;
}
.corporativoa .contD, .corporativob .contD, .corporativoc .contD, .corporativod .contD{
    background-color:#282828;
    bottom:5vh;
    position:absolute;
    color: white;
    padding:35px;
}
.gobiernoa{
    background-image:url('https://assets.claro360.com/onboarding/gobierno/Gobierno_01.png');
}
.gobiernob{
    background-image:url('https://assets.claro360.com/onboarding/gobierno/Gobierno_02.png');
}
.gobiernoc{
    background-image:url('https://assets.claro360.com/onboarding/gobierno/Gobierno_03.png');
}
.gobiernod{
    background-image:url('https://assets.claro360.com/onboarding/gobierno/Gobierno_04.png');
}
.gobiernoa h1, .gobiernoc h1{
    font-weight:bold;
    margin:0;
    color:#fff;
    padding:40vh 0 0 0;
}
.gobiernob h1, .gobiernod h1{
    font-weight:bold;
    margin:0;
    color:#fff;
    padding:40vh 0 0 0;
}
.gobiernoa .contD, .gobiernob .contD, .gobiernoc .contD, .gobiernod .contD{
    background-color:#000;
    bottom:5vh;
    position:absolute;
    color: white;
    padding:35px;
}