html {
    box-sizing: border-box;
    min-height: 100%;
}
*, *:before, *:after {
    box-sizing: inherit;
}
p {
    line-height: 2;
}
body {
    min-height: 100%;
    background-color: #ffffff;
}

.ancho{
    margin-left: auto;
    margin-right: auto;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
.clearfix { display: inline-table; }

* html .clearfix { height: 1%; }
.clearfix { display: block; }


.contenedor{
    width: 98%;
    margin: 0 auto;
} 

/* Tipogrfias */
@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,700);
@font-face {
    font-family: 'Avant';
    src: url('../fonts/avant-garde/avantgardemditc-bold-webfont.eot');
    src: url('../fonts/avant-garde/avantgardemditc-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/avant-garde/avantgardemditc-bold-webfont.woff2') format('woff2'),
        url('../fonts/avant-garde/avantgardemditc-bold-webfont.woff') format('woff'),
        url('../fonts/avant-garde/avantgardemditc-bold-webfont.ttf') format('truetype'),
        url('../fonts/avant-garde/avantgardemditc-bold-webfont.svg#avantgardemditcregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.format{   
    font-weight: 700;
    font-style: normal;
}

p, h2, h3, h4, h5, a, .btn, li{
   font-family: "rawline", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p{
    color: #909090;
    letter-spacing: 0.04em;
    font-size: 16px;
    line-height: 26px;
}

h1{
    font-size: 53px;
    line-height: 59px;
    font-family: 'Avant', 'Raleway', arial;
    letter-spacing: 0;
    margin-bottom: 26px;
    color: #3D3D3D;
}
h2{
    font-size: 34px;
    line-height: 35px;
    font-family: 'Avant', 'Raleway', arial;
    letter-spacing: 0.01em;
    margin-bottom: 22px;
    color: #3D3D3D;
}
h3{
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0.04em;
    font-family: 'Avant', 'Raleway', arial;
    margin-bottom: 15px;
    color: #3D3D3D;
}
.mb-4, .my-4 {
    margin-bottom: 0!important;
}
h4{
    padding-top: 20px;
}
sup{
    font-size: 59%;
}
hr{
    margin-top: 3px;
    margin-bottom: 13px;
}


/*menu principals*/
.nav{
    background-color: #EBEBEB;
    padding-top: 23px;
    padding-bottom: 20px;
    background-image: url("../img/fondo-menu.png");
    background-repeat: repeat-x;
}
#navegacion:hover{
	cursor:default;
}

#navegacion li a:hover{
	color:#4D4D4D;
	text-decoration:none;
}

#navegacion li{
	background: url("../img/fondo_navegacion.svg") no-repeat scroll right 0 transparent;
    background-size: 345px 49px;
    background-position: top right;
    background-repeat: no-repeat;
    float: left;
	display: block;
    padding: 0px 40px 0px 0px;
	margin: 0;
    text-align: center;
}

#navegacion li a{
	background: url("../img/fondo_navegacion.svg") no-repeat scroll left 0 transparent;
    background-size: 345px 49px;
    background-position: top left;
    background-repeat: no-repeat;
	display: block;
    padding: 14px 0px 17px 40px;
	margin:0;
    font-size:14px;
    letter-spacing: 0.04em;
    font-weight: 700;
    line-height: 18px;
    color:#222222;
}
#navegacion li:hover{
	background: url("../img/fondo_navegacion_amarillo.svg") no-repeat scroll right 0 transparent;
}
#navegacion li a:hover{
	background: url("../img/fondo_navegacion_amarillo.svg") no-repeat scroll left 0 transparent;
}
#navegacion li.seleccionado{
	background: url("../img/fondo_navegacion_amarillo.svg") no-repeat scroll right 0 transparent;
    background-size: 345px 49px;
    background-position: top right;
    background-repeat: no-repeat;
}
#navegacion li.seleccionado a{
	
	background: url("../img/fondo_navegacion_amarillo.svg") no-repeat scroll left 0 transparent;
    background-size: 345px 49px;
    background-position: top left;
    background-repeat: no-repeat;
    
}

#contenedor #contenedor_cv h3{
	font-size:13px;
	margin:0;
	padding:2px 0 13px 0;
	color:#444;
	font-family: Helvetica, Arial, sans-serif;
}

/*botones header*/
header{
    margin-top:-10px;
}
.header{
    background-color: ;
    padding-top: 55px;
    background: #F6F6F6 url("../img/fondo-header.svg") no-repeat;
    background-position:center top;
    padding-bottom: 40px;
}
.btn-circle2{
    width: 25px;
    height: 25px;
    padding: 6px 0px;
    border-radius: 20px;
    text-align: center;
    font-size: 10px;
    color: #676767;
    line-height: 1.42857;
    border-color: #A4A4A4;
    margin-top: 6px;
}

button.botonArriba{
   background-color : #656565;
   margin-top: 3px;
}

i{
    color: #222222;
}

/*  header */
.boton-salir{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    margin-right: 25px;  
    position: absolute;
    right: 0;
}
.closer{
    color:#222222;
    letter-spacing: 0.04em;
    font-weight: 400;
    font-size: 15px;
    background-image: url("../img/salir.svg");
    background-size: 30px 30px;
    background-position: 54px 5px;
    height: 40px;
    padding-top: 7px;
    padding-right: 43px;
    padding-left: 13px;
    background-repeat: no-repeat;
    background-color:#E3DC1D;
    border-radius: 20px;
}
a.closer:hover{
    color:#ffffff;
    text-decoration:none;
    background-color: #2B2B2B;
}
.cargo{
    font-size: 14px;
    line-height: 15px;
    letter-spacing: 0.06em;
    margin:5px 0 7px 0;
    font-weight: 900;
    color:#3D3D3D;
}

.nombre{
    font-size: 24px;
    letter-spacing: 0.04em;
    line-height: 28px;
    margin-bottom: 5px;
    font-weight: 700;
    margin:0 0 15px 0;
    color:#3D3D3D;
}

.botonsalir{
    font-size: 16px;
    color: #656565;
}

/* botones del main */
ul.botones-video {
    list-style: none; /* Remove default bullets */
    margin-bottom: 20px;
    margin-top: 30px;
}
ul.botones-video li {
    display: inline-block;
    *display: inline; 
    zoom: 1;
}
ul.botones-video li a { 
    display: inline-block; 
    padding: 0px; 
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.05em;
    color: #3D3D3D;
    margin-right: 20px;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 45px;
    font-size: 24px;
    line-height: 1.33;
    
}
.icono-circulo.uno::before {
    content: "1"; 
}
.icono-circulo.dos::before {
    content: "2"; 
}
.icono-circulo.tres::before {
    content: "3"; 
}
.icono-circulo.cuatro::before {
    content: "4";  
}
.icono-circulo.cinco::before {
    content: "5"; 
}
.icono-circulo::before {
  display: inline-block;
    border:2px solid #E5E5E5;
    background-color: #E5E5E5;
    border-radius: 50%;
    width: 37px;
    height: 37px;
    text-align: center;
    padding-top: 4px;
    font-size: 18px;
    color: #3D3D3D;
    font-weight: 700;
    margin-right: 12px;
}
.icono-circulo.selected::before {
  display: inline-block;
    border:2px solid #e3dc1d;
    border-radius: 50%;
    width: 37px;
    height: 37px;
    text-align: center;
    padding-top: 4px;
    font-size: 18px;
    color: #222222;
    font-weight: 700;
    margin-right: 12px;
    background-color: #e3dc1d;
}
a.icono-circulo:hover:before {
    background-color: #E3DC1D;
    border:2px solid #e3dc1d;
}
a.icono-circulo:hover{
    text-decoration:none;
}

.btn-circle {
    width: 41px;
    height: 41px;
    padding: 6px 0px 8px 0px;
    border-radius: 50%;
    text-align: center;
    font-size: 14px;
    color: #3D3D3D;
    line-height: 10px;
    border: 2px solid #E0E0E0;
    font-weight: 700;
    letter-spacing: 0.08em;
    background-color: #E0E0E0;
}
.btn-circle:hover {
    color:#fff;
    border-color:#fff;
    
}
.btn-circle1 {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #222222;
    background-color: #e3dc1d;
    line-height: 1.42857;
    border-color: #A4A4A4;
}


.flecha{
    width: 225px;
    height: 50px;
}

.hr{
    border-top: 1px solid #E5E5E5;
}

.redondo{
    border-radius: 50%;
    margin-right: 24px;
    float:left;
    border:1px solid #BFBFBF;
}

/* main */

.pasos{
    font-size: 20px;
}
.videos{
    padding-top: 4px;
}

.obj{
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 15px;
}


.botones{
    display: flex;
    padding-top: 15px;
    padding-left: 0;

}

.parrafomain{
    font-size: 16px;
}

.imgVideo{
    width: 100%;
    display: block;
    height: auto;
}


/* Estilos de paso 2 y 3 */
.contenedor-video{
    padding-right: 27px;
}
.principal{
    margin-top:32px;
}
.lectura,
.link{
    color:#000;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.04em;
    padding-left: 33px;
    background-repeat: no-repeat;
    display: block;
    margin-bottom: 8px;
}
.lectura{
    background-image: url("../img/icono-lectura.svg");
    background-size: 19px 20px;   
    background-position: 0 3px;
}

.link{
    background-image: url("../img/icono-link.svg");
    background-size: 19px 19px; 
    background-position: 0 3px;
    margin-bottom: 30px;
}
a {
    color:#3D3D3D;
}
a.lectura:hover,
a.link:hover{
    text-decoration:none;
    color: #808080;
    
}

.margin-h2{
    margin-top: 23px;
    margin-bottom: 18px;
}
ul.listado li {
    font-size: 14px;
    letter-spacing: 0.04em;
    color: #3D3D3D;
    font-weight: 500;
    line-height: 24px;
}

ul.listado {
    list-style: none; /* Remove default bullets */
    margin-bottom: 20px;
}

ul.listado li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  background-image: url("../img/punto.svg");
    background-size: 5px;
    background-repeat: no-repeat;
    background-position: 0 11px;
  color: #e3dc1d; /* Change the color */
  font-weight: 900; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 15px; /* Also needed for space (tweak if needed) */
  margin-left: 5px; /* Also needed for space (tweak if needed) */
}

p.small{
    font-size: 12px;
    color: #3D3D3D;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.p-1{
    font-size: 13px;
    color: #656565;
    margin-bottom: 0;
}

.p-punto{
    font-size: 13px;
    color: #656565;
    margin-bottom: 0;
}

.p-2{
    font-size: 10px;
    color: #656565;
    margin-top: 15px; 
}

.http{
    font-size: 16px;
    color: #656565;
}

ul{
    padding:0;
    margin:0;
}


/* Iconos */

.icono{
    width: 15px;
    height: 15px;
    margin-right: 10px;
}

.icono2{
    width: 5px;
    height: 5px;
    margin-right: 10px;
}

/* footer */

.hrFooter{
    margin-bottom: 0;
    border-top: 1px solid #E6E6E6; 
}

.footer-copyright {
    margin-bottom: 0px;
    letter-spacing: 0.03em;
    padding: 10px 10px 15px 10px;
    line-height: 18px;
    color: #666666;
}

/* Modal */
.modal-content {
    background-color: #ebe300;
    margin: auto;
    padding: 20px;
    border-top: 10px solid #ebe300;
    width: 70%;
    border-radius: 0;
    border:none;
    width: 100%;
    max-width: 750px;
}
.modal-content h1{
    font-size: 49px;
    line-height: 40px;
    text-align: center;
    color: #444444;
    margin-bottom: 52px;
    line-height: 48px;
}
 
.modal-content h5{
    text-align: center;
    color: #444444;
    font-size: 21px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 11px;
}
.modal-content p{
    color: #444444;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.04em;
}
.modal-header{
    border-bottom:none;
}
.modal-header .close img{
    width: 20px;
    height: 20px;
}
.modal-header .close{
    padding:0;
    font-size: inherit;
}
.modal-body {
    padding: 0 10% 50px 10%;
}

.click{
    padding:20px;
    border:1px dotted #444444;
    margin-top:40px;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 37px;
}
.click p{
    font-size: 14px;
    line-height: 24px;
}
.btn-secondary{
    background-color: #444444;
    color: #ffffff;
    font-size: 19px;
    letter-spacing: 0.06em;
    border-radius: 0;
    font-family: 'Avant', 'Raleway', arial;
    border:none;
    padding: 15px 58px;
}

/* Estilos de paso 2 y 3 */
.video{
    display:none;
}
.principal{
    display:none;
}
.activo{
    display:block;
}


/* Responsive */

.responsive{
    display: block;
    margin-bottom: 16px;
}
.responsive p{
    margin-top:30px;
}

@media only screen and (min-width: 992px){
    .responsive{
        display: none;
    }
}

.p-responsive{
    font-size: 15px;
    color: #656565;
    margin-bottom: 20px;
}

@media (max-width: 1200px) {
    .nombre {
        font-size: 19px;
    }
    .contenedor-video {
        padding-right: 15px;
    }
}

@media (max-width: 992px) { 
    .fixed-bottom {
        position: inherit;
    }
    .nombre {
        font-size: 24px;
    }
    #navegacion li{
        background: #ffffff;
        float: none;
        padding: 0px 10px 0px 0px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    #navegacion li a{
        background:transparent;
        padding: 14px 0px 17px 10px;
    }
    #navegacion li:hover,
    #navegacion li a:hover{
        background:#E3DC1D;
    }
    #navegacion li.seleccionado{
        background: #E3DC1D;
        border-radius: 4px;
    }
    #navegacion li.seleccionado a{
        background:transparent;
    }
    .modal-dialog {
        max-width: 590px;
    }
}

@media (max-width: 768px) { 
    h1 {
        font-size: 48px;
        line-height: 54px;
    }
    ul.botones-video li a {
        font-size: 15px;
        line-height: 21px;
    }
    .modal-dialog {
        max-width: 575px;
    }
    .click br{
        display: none;
    }
}

@media (max-width: 576px) { 
    h1 {
        font-size: 40px;
        line-height: 45px;
    }
    .closer span{
        display:none;
    }
    .closer{
        background-position: 5px 5px;
        padding-right: 26px;
    }
    .boton-salir {
        margin-right: 15px;
        margin-top: 15px;
    }
    .modal-body {
        padding: 0 0 30px 0;
    }
    .click{
        margin-left: 20px;
        margin-right: 20px;
    }
    .modal-content h1 {
        font-size: 39px;
        line-height: 38px;
        margin-top:0!important;
        margin-bottom: 32px;
    }
    .modal-content h5 {
        font-size: 19px;
        margin-bottom: 15px;
        line-height: 25px;
    }
    ul.botones-video li {
        margin-bottom: 10px;
    }
}
@media (max-width: 390px) { 
    h1 {
        font-size: 30px;
        line-height: 36px;
        margin-bottom: 9px;
    }
    h2 {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 16px;
    }
    .responsive p {
        margin-top: 20px;
    }
    .redondo {
        width: 100px;
        height: 100px;
    }
    .cargo {
        margin: 0px 0 7px 0;
    }
    .nombre {
        font-size: 19px;
        margin: 0 0 10px 0;
    }
    .principal {
        margin-top: 27px;
    }
    ul.botones-video {
        margin-bottom: 15px;
        margin-top: 20px;
    }
    .icono-circulo.selected::before,
    .icono-circulo::before{
        width: 30px;
        height: 30px;
        padding-top: 1px;
        font-size: 13px;
    }
    ul.botones-video li {
        margin-bottom: 15px;
    }
    ul.botones-video {
        margin-bottom: 0;
    }
    .link {
        margin-bottom: 35px;
    }
    .click{
        margin-left: 0;
        margin-right: 0;
    }
    .modal-content p {
        font-size: 13px;
        line-height: 21px;
    }
}

@media (max-height: 980px) { 
    .fixed-bottom {
        position: inherit;
    }
}