:root {
    --c-marron: #a56e52;
    --c-blanco-trans: #ffffffd3;
    --c-gris: #e9e9e9;
    --w-thin: 300;
    --w-regular: 400;
    --w-bold: 500;
}

/*
****************************************************************************************
GENERAL
****************************************************************************************
*/
a{
    color: black !important;
}
.navbar .nav-item:not(:last-child) {
    margin-right: 15px;
}

.dropdown-toggle::after {
    transition: transform 0.15s linear;
}

.show.dropdown .dropdown-toggle::after {
    transform: translateY(3px);
}

/* body */
body {
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

body > * {
    font-family: "Roboto", sans-serif;
    font-weight: var(--w-thin);
}

h1, .h2-titulo{
    font-weight: var(--w-bold);
}

h2 {
    font-weight: var(--w-regular);
}

/* general */
.mayusculas li a,
h2.big-header,
.mayusculas,
#subsecciones li {
    text-transform: uppercase;
}

.orange,
.login input,
.preview>a:last-child,
.calendar a,
#footer-links li a,
.multi-header a,
.agenda-info a {
    color: var(--c-marron) !important;
}

a:focus,
a:hover {
    text-decoration: underline !important;
}

/*
h2 {
    font-size: 13px !important;
}
*/
a {
    text-decoration: none !important;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--c-marron);
}

.navbar-default .navbar-toggle {
    border-color: var(--c-gris) !important;
    text-align: center;
    border: 1px solid;
    padding: 5px;
}

.tituloimport {
    border-color: var(--c-gris) !important;
    text-align: center;
    border: 1px solid;
    padding: 5px;
    margin: 5px 0;
    border-bottom: 1px solid;
    float: left;
    width: 100%;
    text-transform: uppercase;
}

.oculto {
    display: none;
}

.main-body {
    margin-top: 20px;
}

/* cabeza */
.cabeza .row {
    align-items: flex-end;
}

#menu-header {
    flex-wrap: nowrap;
    align-items: flex-end;
    width: 40%;
}

/* menu normal */
#menu-header .current-page-ancestor,
#menu-header .current-menu-item {
    font-weight: bold;
    text-decoration: none !important;
}

ul#menu-header {
    list-style-type: none;
}

#menu-header li>a {
    text-decoration: none !important;
    font-size: 18px !important;
    /*border-bottom: 3px solid #b78b75;*/
}

.menulinea {
    border-bottom: 3px solid #b78b75;
    text-transform: uppercase;
}

/* quitar el punto lista */
.menu-item::marker,
::marker {
    list-style: none;
}

li {
    list-style-type: none;
}

.sub-menu .col-xs-4 {
    float: right !important;
    min-width: 100% !important
}

.sub-header li a {
    text-decoration: none !important;
    border-bottom: 3px solid #b78b75;
    size: 14px;
}

/* cosa que pone solo coar */
.breadcrumbs {
    border-bottom: 1px solid;
    border-color: var(--c-marron);
    text-transform: uppercase;
    margin-top: 20px;
}

a.btn-marron {
    background-color: var(--c-marron);
    padding: 12px 35px;
    margin: 50px auto;
    color: white !important;
    width: 30%;
    text-align: center;
    min-width: 300px;
}

.menu-superior {
    border-bottom: 2px solid var(--c-marron);
    padding: 0px 0 10px 0;
}

.menu-superior .menu-cont {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.menu-superior .menu-cont .logo {
    width: 175px;
}

div#navbarNavDropdown {
    max-height: 40px;
    width: 100%;
}

a#navbarDropdownMenuLink {
    font-size: 15px;
}

a#navbarDropdownMenuLink:hover, a#navbarDropdownMenuLink:focus {
    text-decoration: none !important;
}

.dropdown-toggle::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.nav-link.dropdown-toggle::after {
    display: inline-block !important;
    content: "" !important;
    width: 8px;
    height: 8px;
    border-right: 1px solid !important;
    border-bottom: 1px solid !important;
    transform: rotate(45deg); 
    margin-left: 10px;
    vertical-align: 4px;
    border-top: 0 !important;
    border-left: 0 !important;
    transition: transform 0.3s ease !important;
}

.nav-item.dropdown.show .nav-link.dropdown-toggle::after,
.nav-link.dropdown-toggle.show::after {
    transform: rotate(-135deg) !important;
    vertical-align: 1px !important;
}

.dropdown-item {
    font-size: 15px;
    font-weight: var(--w-thin);
}

.dropdown-item:hover {
    text-decoration: none !important;
    background-color: var(--c-gris) !important;
}

.dropdown-item:focus, .dropdown-item:active {
    text-decoration: none !important;
    background-color: var(--c-gris) !important;
}

.menu-superior .menu-cont .menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    flex-grow: 1;
}

.menu-superior .menu-cont .menu .top-bar {
    display: flex;
    gap: 30px;
    align-items: flex-end;
    flex-direction: column;
    width: 50%;
}

.nav-link {
    padding-bottom: 0;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
}

.menu-superior .menu-cont .menu .top-bar .top-txt {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.divisor {
    width: 1px;
    height: 25px;
    background-color: var(--c-marron);
    display: inline-block;
}

/* Búsqueda */
.input-buscar {
    border-bottom: 2px solid var(--c-marron);
    padding-bottom: 5px;
}

.input-sin-borde, .input-sin-borde:focus {
    border: none !important;
    background-color: transparent !important;
    padding: 0 0 0 10px !important;
    color: #333;
    box-shadow: none !important;
}

.input-sin-borde::placeholder {
    color: #888;
}

a.btn-vermas {
    margin: 20px 0 0 auto;
    width: fit-content;
    display: block;
    text-transform: uppercase;
}
/*
****************************************************************************************
INICIO
****************************************************************************************
*/
.h2-titulo {
    font-size: 2.5rem;
    color: black;
    margin: 55px 0;
    text-transform: uppercase;
}

.h2-titulo::before {
    border-top: 2px solid var(--c-marron);
    content: " ";
    display: block;
    width: 20%;
    margin: 0 0 10px 0;
}

.cabecera {
    background-image: url(/img/paginas/coar_colegio_oficial_arquitectos_rioja.webp);
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 330px;
    position: relative;
    margin: 0 0 100px 0;
}

.cabecera .cabecera-box {
    max-width: 670px;
    padding: 30px 50px 30px 125px;
    background-color: var(--c-blanco-trans);
    position: relative;
}

.cabecera .cabecera-box h1 {
    font-size: 2rem;
    font-weight: 700;
}

.cabecera .cabecera-enlaces {
    display: flex;
    gap: 25px;
    position: absolute;
    width: fit-content;
    right: -3%;
    bottom: -20%;
}

.cabecera .cabecera-enlaces .box {
    width: 265px;
    padding: 30px 30px;
    background-color: var(--c-blanco-trans);
    box-shadow: 4px 4px 4px 0px var(--c-gris);
}

.cabecera .cabecera-enlaces .box a {
    height: 50%;
    display: block;
}

.cabecera .cabecera-enlaces .box a h2 {
    font-size: 15px;
    font-weight: var(--w-regular);
    border-bottom: 2px solid var(--c-marron);
}

.cabecera .cabecera-enlaces .box a p {
    color: black;
    font-size: 13px;
}

.noticias .noticia img {
    width: 100%;
    height: 270px;
    object-fit: contain;
}

.noticias .noticia .titulo {
    margin: 15px 0;
}
.colaboradores .boxes{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.colaboradores .boxes img{

}
/*
****************************************************************************************
FOOTER
****************************************************************************************
*/
footer{
    background-image: url(/img/paginas/footer_coar_colegio_oficial_de_arquitectos_de_la_rioja.webp);
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    color: white;
    margin-top: 50px;
}
footer a{
    color: white !important;
}
#footer-web {
    position: relative;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    gap: 20px;
    padding: 70px 0 30px 0;
    border-bottom: 1px solid white;
    margin-bottom: 20px;
}
#footer-web .colum {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#footer-web .colum:nth-child(1) {
    max-width: 205px;
    text-align: end;
}
#footer-web .colum:nth-child(2) ul {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#footer-web .colum:nth-child(2) ul a{
    color: white;
}
#footer-web .colum:nth-child(2) > div a img {
    width: 20px;
    height: 20px;
    margin: 0 0 0px 10px;
    object-fit: contain;
}
#footer-web .colum:nth-child(3) ul{
    padding: 0px;
}
#footer-web .colum:nth-child(3) ul li{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}
#footer-web .colum:nth-child(3) ul li img{
    width: 45px;
}
#footer-menu{
    display: flex;
    flex-direction: row;
}
#footer-menu p{
    display: flex;
    flex-direction: row;
    width: 35%;
    min-width: 375px;
}
#footer-menu ul {
    padding: 0;
    margin: 0;
    display: flex;
    width: 65%;
    justify-content: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}
#footer-menu ul a{
    color: white;
}
/*
****************************************************************************************
MEDIA QUERY
****************************************************************************************
*/

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    a#navbarDropdownMenuLink {
        font-size: 13px;
    }
}

@media only screen and (max-width: 1200px) {
    .menu-superior .menu-cont {
        flex-direction: column;
    }

    .menu-superior .menu-cont .menu {
        width: 100%;
    }

    .menu-superior .menu-cont .menu .top-bar {
        position: absolute;
        top: 5px;
    }

    .menu-superior .menu-cont .logo img {
        height: 120px;
    }

    .cabecera .cabecera-enlaces {
        display: none;
    }

    a#navbarDropdownMenuLink, .dropdown-item {
        font-size: 13px;
    }

    .top-txt a b, .input-sin-borde::placeholder, .input-buscar {
        font-size: 15px;
    }
}

@media only screen and (max-width: 991px) {
    .menu-superior .menu-cont {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .menu-superior .menu-cont .menu {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        flex: 1;
        position: relative;
    }

    .menu-superior .menu-cont .menu .top-bar {
        position: relative;
        display: flex;
        gap: 20px;
        width: 100%;
    }

    .menu-superior .menu-cont .menu .top-bar .top-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
    }

    .menu-superior .menu-cont .menu .navbar {
        display: flex !important;
        position: static;
        padding: 5px;
        margin: 0 !important;
        border: none;
        background-color: white;
    }

    div#navbarNavDropdown {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        width: 300px;
        
        background-color: white !important;
        z-index: 1050;  
        box-shadow: 0 8px 30px rgba(0,0,0,0.15); 
        border: 1px solid var(--c-gris);
        padding: 10px;
        margin-top: 10px;
        max-height: none;
        border-radius: 5px;
    }

    .navbar-nav {
        flex-direction: column;
    }

    .nav-item {
        width: 100%;
        text-align: left;
        padding: 10px 0 10px 10px;
    }

    .nav-link {
        padding-top: 0;
    }

    .btn-marron {
        margin: 0 !important;
        padding: 8px 15px;
        font-size: 13px;
        white-space: nowrap;
        flex: 0 1 auto;
        min-width: auto !important; 
        width: auto !important;
    }

    #footer-menu ul {
        width: 100%;
        justify-content: flex-start;
    }

    a#navbarDropdownMenuLink {
        font-size: 13px;
    }

    .menu-superior .menu-cont .logo img {
        height: 110px;
    }

    .top-txt a b, .input-sin-borde::placeholder, .input-buscar {
        font-size: 14px;
    }
}

@media only screen and (max-width: 768px) {
    .noticias {
        gap: 30px;
    }

    #footer-web .colum {
        width: 60%;
    }

    .colaboradores .boxes img {
        height: 90px;
    }
}

.ver-mas {
    margin: 20px auto 0 auto !important;
}

.pagina-404 {
    padding: 80px 0;
}

.pagina-404__codigo {
    font-size: 6rem;
    font-weight: bold;
    color: var(--c-marron);
}