/*
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 : 7/07/2022, 03:18:41 PM
    Author     : usuario
*/

            @font-face {
                font-family: OpenSans;
                src: url('Fuentes/OpenSans/opensans-regular-webfont.woff2') format('woff2'),
                    url('Fuentes/OpenSans/opensans-regular-webfont.woff') format('woff');
                font-weight: normal;
                font-style: normal;

            }
            html, body {
                font-family: OpenSans, sans-serif;
                margin: 0px; 
                padding: 0px; 
                border: 0px;
            }


            .title{
                display:flex;
            }

            .header1 {
                height: 119px;
                width: 33.3%;
                text-align: center;
                color: white;
                font-size: 12px;
            }
            .imagen{
                height: 50px;
                width: 50px;
                margin-bottom: 3%;
                -webkit-transition: all .2s ease;
                -moz-transition: all .2s ease;
                -o-transition: all .2s ease;
            }
            .imagen:hover {
                height: 70px;
                width: 70px;
                overflow:hidden;
            }
            .link{
                text-decoration: none;
            }
            .paso .header{
                height: 20px;
                font-size: 17px;
                font-weight: bold;
                text-shadow: 0 0px 0 #f3f3f3 !important;
            }
            .paso .detail{
                height: 23px;
                font-family: OpenSans, sans-serif;
                font-size: 14px;
                font-weight: normal;
                padding-top: 2px;
                text-shadow: 0 0px 0 #f3f3f3 !important;
            }
            
            
            /*inicia el cambio*/
            .paso.active{color: #FFF; background: var(--active2-bg);}

            .plataforma1 .paso.active{background-color: #99C0C1;}
            .plataforma2 .paso.active{background-color: #9F2241;}
            
            .cambio-color{
                --active2-bg: rgb(46, 139, 184);
            }
            .color{
                
                --active2-bg: #9F2241;
            }
            /*finaliza el cambio*/
            
            
            .hidden{background-color: #D3D9DE; color: black;}

            .ui-block-a{
                padding-top: 8px;
            }

            .ui-block-b{
                padding-top: 8px;
            }

            .ui-block-c{
                padding-top: 8px;
            }

            .ui-block-d{
                padding-top: 8px;
            }
            .ocultar{
                display: none;
            }

            @media only screen and (max-width: 787px) {
                .title{
                    display: block;
                }
                .header1 {
                    width: 100%;
                    height: 50px;
                }
                .imagen {
                    position: absolute;
                    right: 50px;
                    height: 30px;
                    width: 30px;
                    overflow:hidden;
                }
                .imagen:hover {
                    height: 40px;
                    width: 40px;
                    overflow:hidden;
                }
                .paso .header{
                    position: absolute;
                    left: 20px;
                }

                .paso .detail{
                    height: 50px;
                }
                .active{height: 100%}
                .hidden{height: 100%}
            }
            .title2{
                display: flex;
            }

            .head{
                width: 32%;
                height: 195px;
                margin: 1%;
                text-align: center;
                color: white;
                font-size: 12px;
                border-radius: 10px 10px 10px 10px;
            }
            .active2{
                /*color: #fff; background: #2E8BB8 !important;*/
                color: #fff;
                background-color: #9F2241;
                height: 165px;
                border-radius: 10px 10px 10px 10px;
            }
            .hidden2{
                background-color: #D3D9DE; 
                color: black;
                height: 165px;
                border-radius: 10px 10px 10px 10px;
            }

            .imagen2{
                height: 80px;
                width: 80px;
                margin-top: 1%;
                -webkit-transition: all .2s ease;
                -moz-transition: all .2s ease;
                -o-transition: all .2s ease;
            }
            .imagen2:hover {
                height: 98px;
                width: 98px;
                overflow:hidden;
            }
            .header2{
                margin-top: 7%;
                font-size: 21px;
                font-weight: bold;
                text-shadow: 0 0px 0 #f3f3f3 !important;
            }