/* ============================================== Variables ======================================== */
header {
    --white: rgba(255, 255, 255, 1);
    --grey: rgba(227, 222, 222, 1);
    --blue: rgba(142, 192, 224, 1);
    --blue-dark: rgba(0, 66, 133, 1);
}

/* ======================================== Header ==================================================== */

header {
    background: var(--blue-dark);
    padding: .5rem .5rem .25rem .25rem;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

/* ================ Logo Principal */
header .madHeaderleft {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

header .madHeaderleft div:first-child {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
}
header  .madHeaderleft div a:nth-child(2) {
    position:relative;
    right: 1px;
}


/* ================ Menú Inicio/Mapa */
header .madHeaderightTop {
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    align-items: center;
    margin-right: 1rem;
    flex-wrap: wrap;
}
header .madHeaderight {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
header .madHeaderight ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    /* margin-top: .5rem; */
    margin-bottom: 0.75rem;
}
header .madHeaderight ul li{
    display:flex;
}

header .madHeaderight ul li:hover {
    opacity: .75;
}
header .madHeaderight ul li:first-child {
    margin-right: .5rem;
}
header .madHeaderight ul li a {
    font-size: .85rem;
    color: rgb(255, 255, 255);
    display: block;
    padding: 4px 5px;
    text-decoration: none;
}
header .madHeaderight ul li a:hover,
header .madHeaderight ul li a:focus,
header .madHeaderight ul li a[aria-current]{
    /* color: var(--grey); */
}
header > div:nth-child(1) a:nth-child(1) img {
    width:330px;
}


/* ================Logo UE derecho */

/* Buscador e Idioma */
.madHeaderightSelects {
    display: flex;
}

/* Buscador e Idioma */
.madHeaderightSelects {
    display: flex;
}

/* Buscador */
.madBuscador {
    display: flex;
    margin-bottom: .25rem;
    justify-content: flex-end;
    margin-right: .5rem;
    height: 30px;
}

.madBuscador input {
    box-sizing: border-box;
    border: solid 1px var(--white);
    border-radius: 25px;
    vertical-align: middle;
    background: transparent;
    border: 1px solid white;
    color: #fffefe !important;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0px;
    cursor: pointer;
    padding: 5px 8px 5px 10px;
    max-width: 100px;
    font-size: 0.75rem;
}

.madBuscador input[type="image"] {
    cursor: pointer;
    border-radius: 20px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    color: rgb(0, 66, 133);
    font-weight: 600;
    border: 1px solid #fff;
    height: auto !important;
    padding: 4px;
    border-left: 0px !important;
    border: 1px solid var(--grey);
    background: #fff !important;
    width: 30px;
    height: 30px;
}

.madBuscador input[type="image"]:hover {
    background: var(--grey) !important;
}

.madBuscador ::placeholder {
    color: var(--white) !important;
}

.madBuscador [type=search]~[type=image] {
    background: var(--white) url(lupa.svg) no-repeat center center;
}

.madBuscador [type=search]~[type=image]:focus,
[type=search]~[type=submit]:hover {
    background: var(--white) url(lupa2.svg) no-repeat center center;
}

.madBuscador [type=search]:focus {
    width: 15rem;
}

.madBuscador [type=search]~[type=reset] {
    display: inline-block;
    left: calc(12rem - 3rem);
    width: 2.5rem;
    padding: 0;
    border: none;
    background: transparent url(16x16_x_icon.png) no-repeat center center;
    border: 1px solid #fcf6f6;
    border-radius: 0px;
    border-left: 0px;
    border-right: 0px;
}

.madBuscador [type=reset]:focus,
[type=reset]:hover {
    background-image: url(16x16_x_icon_focus.png);
}



/* Idiomas */
.madBarraIdiomas {
    display: flex;
}
.madBarraIdiomas input {
    background: var(--white);
    cursor: pointer;
    border-radius: 20px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    color: var(--dark-blue);
    font-weight: 600;
    border: 1px solid var(--white);
    height: 30px;
    width: 30px;
}
.madBarraIdiomas input:hover {
    background: var(--grey);
}
.madBarraIdiomas select {
    background: transparent;
    color: var(--white);
    border-bottom: 1px solid var(--white);
    text-align: center;
    width: auto;
    min-width: 3rem;
    cursor: pointer;
    padding: 3px 5px 4px 5px;
    border-radius: 25px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 30px;
    max-width: 100px;
    font-size: .75rem;
}
.madBarraIdiomas select:hover {
    border-color: var(--blue);
}
.madBarraIdiomas img {
    max-width: 50%;
    position: relative;
    top: 2px;
}
.madBarraIdiomas button {
    background: rgb(255, 254, 254);
    cursor: pointer;
    border-radius: 20px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    color: var(--blue-dark);
    border: 0;
    font-weight: 600;
    min-width: 3.5em;
}
.madBarraIdiomas button:hover {
    background: var(--grey);
}

.madBarraIdiomas optgroup {
    background:var(--blue-dark);
}


@media only screen and (min-width: 960px) {
     header {
        display: grid;
        grid-template-columns: auto 1fr;
    }
    header .madHeaderight {
        justify-content: end;  
    }
    /* ================ Menú Inicio/Mapa */
header .madHeaderightTop {
    align-items: end;
    }   
}