/*GENERALES*/

@font-face {
    font-family: clash;
    src: url(../font/clashgrotesk_bold.otf);
}

@font-face {
    font-family: gothic;
    src: url(../font/gothicb.TTF);
}

* {
    margin: 0;

}

body {
    text-align: center;
    background-color: #fab616;
    overflow-x: hidden;
}

h1 {
    display: none;
}

h2 {
    font-size: 50px;
    color: #033041;
}

h3 {
    color: #033041;

}

h2,
h3,
h4 {
    font-family: clash;
}

/*NAV*/

nav {
    width: 100% !important;
}

nav,
.offcanvas {
    background-color: #fab616;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.offcanvas.offcanvas-start {
    width: 200px !important;
}

.logo {
    padding: 10px;
}

.navbar-nav {
    background-image: url(../menu/fondo.png);
    background-repeat: no-repeat;
}

.x {
    padding-left: 220px;
}

li a {
    font-family: gothic;
    font-size: 20px;
    text-decoration: none;
    color: white;
}

li:hover {
    transform: scale(1.1);
}


.boton1 {
    background-image: url(../menu/boton_a.png);
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 60px;
    margin-bottom: 40px;
    padding: 35px;
}


.boton2 {
    background-image: url(../menu/boton_b.png);
    background-repeat: no-repeat;
    background-position: center;
    margin: 60px 0;
    padding: 50px;
}

.boton3 {
    background-image: url(../menu/boton_c.png);
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 50px;
}

/*INICIO*/

header {
    background-image: url(../fondo/fondo_01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;

}

.inicio {
    padding: 160px;
    padding-top: 80px;
    width: 100%;
}

.bienvenida {
    background-color: #033041;
    padding: 20px;

}

.bienvenida p {
    font-family: gothic;
    color: white;

}

.img-presentacion {
    padding-top: 20px;
}

/* ACERCA DE MI*/

.perfil h3 {
    display: none;
}

.perfil {
    background-color: #fab616;
    padding: 200px;
}

.ac01 {
    font-family: gothic;
    background-color: #f18413;
    color: white;
    padding: 41px;
}

.foto {
    padding: 30px;
}

.acerca {
    color: #f18413;
    font-family: gothic;
    font-size: 20px;
}

.f01 {
    font-family: gothic;
    background-color: #e4107f;
    color: white;
    padding: 41px;
}

.filosofia {
    color: #e4107f;
    font-family: gothic;
    font-size: 20px;
}

.red01 {
    padding: 50px;
}

.red {
    color: #033041;
    font-family: gothic;
    font-size: 20px;
}

/*PROYECTOS*/

.proyecto {
    background-color: #fab616;
    padding: 220px 160px;

}

.boton_proyecto:hover {
    transform: scale(1.1);

}

.boton_proyecto {
    padding: 30px;
}

.bm01 {
    font-family: gothic;
    font-size: 20px;
    color: #e4107f;
}

.bi01 {
    font-family: gothic;
    font-size: 20px;
    color: #033041;
}

.bd01 {
    font-family: gothic;
    font-size: 20px;
    color: #f18413;
}

/*Marca,Infografia,Ilustracion */

.marca,
.info,
.digital {
    background-color: #fab616;
    padding: 150px;
}

.bn01 {
    padding-bottom: 60px;
}

.ti01 {
    padding-bottom: 60px;
}

.am01 {
    background-color: #e4107f;
}

.am02 {
    background-color: #f18413;
}

.am03 {
    background-color: #8ecae6;
}

/*CONTACTO*/

.contacto h3 {
    display: none;
}

.contacto {
    background-color: #fab616;
    padding: 200px 250px;


}

.contacto p {
    font-family: gothic;
    color: #033041;
    font-size: 20px;
}

.despedida {
    background-color: #8ecae6;
    padding: 60px;
}

.fo01 {
    padding-bottom: 40px;
}

.con01 {
    padding-top: 50px;
}

/*FOOTER*/
footer {
    background-color: #033041;
    padding: 50px;
    padding-bottom: 20px;
    width: 100%;
}

footer p {
    color: white;
    text-align: center;
}

.texto {
    display: inline;
}

.copy {
    padding-top: 50px;
}

.arriba {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none;
}


@media (max-width: 992px) {

    h3 {
        font-size: 20px;
    }

    .bn01 {
        padding-top: 10px;
        padding-bottom: 0;
    }

    .ti01 {
        padding-bottom: 10px;
    }

    .wh01 {
        padding-right: 40px;
    }

    .copy {
        padding-top: 20px;
    }

    .proyecto {
        padding: 160px 40px;

    }

    .marca,
    .info,
    .digital {

        padding: 90px;
        padding-top: 130px;

    }

    .contacto {
        padding: 40px;
        padding-top: 200px;
    }

}

@media (max-width: 768px) {

    h3 {
        font-size: 30px;
    }

    .inicio {
        padding: 40px;
        padding-top: 80px;
    }

    .perfil {
        padding: 40px;
        padding-top: 170px;
    }

    .marca,
    .info,
    .digital {

        padding: 60px;
        padding-top: 70px;

    }

    .ti02 {
        rotate: 90deg;
    }

}

@media (max-width: 576px) {

    h2 {
        font-size: 40px;
    }

    h3 {
        font-size: 30px;
    }

    
    .offcanvas.offcanvas-start {
        width: 140px !important;
    }

    .logo {
        padding: 10px;
    }

    li a {
        font-size: 15px;
    }

    .boton1 {
        padding: 30px;
    }

    .boton2 {
        margin: 60px 0;
        padding: 38px;
    }

    .boton3 {
        margin-bottom: 140px;
        padding: 38px;
    }

    header {
        background-image: none;
    }

    .inicio {
        padding: 80px 20px;
        padding-bottom: 150px;

    }

    .bienvenida p {
        font-size: 15px;
    }

    .perfil {
        padding: 65px 10px;

    }

    .acerca,
    .filosofia,
    .red {
        font-size: 12px;
    }

    .ac01 {
        padding: 20px;
        font-size: 15px;
    }

    .f01 {
        padding: 20px;
        font-size: 15px;
    }

    .red01 {
        padding: 10px;
    }

    .foto {
        padding: 5px;
    }

    .proyecto {
        padding: 200px 25px;

    }

    .boton_proyecto {
        padding: 20px;
    }

    h4 {
        font-size: 15px;
    }

    .marca,
    .info,
    .digital {

        padding: 130px 5px;
        padding-top: 70px;

    }

    .ti02 {
        display: none;
    }

    .contacto {
        padding: 80px 10px;

    }

    .contacto p {
        font-size: 15px;

    }

    .despedida {
        padding: 130px 10px;
    }

    footer {
        padding: 10px;
        padding-bottom: 15px;
    }

    
}