/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color."

font-family: 'Roboto', sans-serif;

*/


/* ESTILS GENERALS */

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 10px;
    background: white;
}

.roboto {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
}

.caixa1 {
    margin-top: 40px;
    margin-bottom: 10px;
    margin-right: 15px;
    background: white;
    float: left;
    left: 200px;
    text-align: justify;
}

.caixa2 {
    margin-bottom: 10px;
    margin-right: 15px;
    background: white;
    float: inherit;
    align-content: center;
    text-align: justify;
}

.slide-m {
    margin-top: 40px;
}

.imatge {
    height: auto;
    max-width: 100%;
}

body > .container {
    padding: 60px 15px 0;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: rgb(41, 86, 148);
    border-top: solid 1px rgb(41, 86, 148);
    overflow: hidden;
    text-align: center;
    font-family: 'Roboto', sans-serif, cursive;
    color: white;
    margin: 0 auto;
    padding: 20px 0 0 0;
}

h9 {
    color: rgb(41, 86, 148);
    font-family: 'Roboto', sans-serif, monospace, sans-serif;
    font-size: 20px;
    ;
}

h8 {
    color: rgb(41, 86, 148);
    font-family: 'Roboto', sans-serif, monospace, sans-serif;
    font-size: 25px;
    text-align: center;
    ;
}

h7 {
    color: rgb(41, 86, 148);
    font-family: 'Roboto', sans-serif, monospace, sans-serif;
    font-size: 18px;
    text-align: left;
    ;
}

h5 {
    color: rgb(41, 86, 148);
    font-family: 'Roboto', sans-serif, monospace, sans-serif;
    font-size: 10px;
    text-align: center;
    ;
}

.footer > .text-muted {
    color: white;
    text-shadow: 1px 2px 3px grey;
}

.footer > ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0.25em;
}

.footer > ul li {
    display: inline-block;
}

.footer ul li a {
    color: white;
    text-shadow: 1px 2px 3px grey;
    padding: 0 1em;
}

.footer ul li a:hover {
    color: rgb(150, 250, 250);
    text-shadow: 1px 2px 3px grey;
    padding: 0 1em;
}

.footer ul li:not(:last-child) {
    border-right: 1px solid white;
}


/* CAROUSEL */

.carousel-inner .item img {
    width: 100%;
}

.container .carousel-indicators .active {
    background-color: white;
}

.container .carousel-indicators li {
    border: 1px solid white;
}

.carousel .glyphicon-chevron-right,
.carousel .glyphicon-chevron-left {
    color: white;
    background: rgba(41, 86, 148, 0.76);
    border-radius: 50%;
    padding:
}


/* MENU DE NAVEGACIÓ */

.navbar-default {
    background: #295694;
}

.navbar-header .navbar-brand,
.navbar-header .navbar-brand:hover,
.navbar-default .navbar-nav > li a {
    color: white;
    text-shadow: 1px 2px 3px grey;
}


/* Lletres passar per sobre ratoli*/

.navbar-default .navbar-nav > li a:hover {
    color: rgb(150, 250, 250);
    text-shadow: 1px 2px 3px grey;
    background: rgba(0, 0, 0, 0.1);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
    background: rgb(255, 255, 255);
    color: rgb(41, 86, 148);
    text-shadow: 1px 2px 3px grey;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    background: rgb(41, 86, 148);
}


/* Propietats Menu Hamburguesa (toogle)*/

.navbar-nav > li > .dropdown-menu {
    background: white;
}

.dropdown-menu > li > a:hover {
    background: white;
}

.navbar-default .navbar-toggle {
    border-color: white;
}

.navbar-default .navbar-toggle .icon-bar {
    background: white;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open >a:focus,
.navbar-default .navbar-nav > .open >a:hover {
    color: white;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: white;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
    color: rgb(41, 86, 148);
    background: rgba(0, 0, 0, 0.1);
}


/* PUZZLE CSS */

.puzzle {
    user-select: none;
    /* user-select, hace el objeto no seleccionable */
    -webkit-touch-callout: none;
    /* anula el efecto visual del touch prolongado sobre el objeto */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* anula feedback de color al hacer tap en link */
    -webkit-tap-highlight-color: transparent;
    /* similar anterior en algunos android */
    margin: 0;
    padding: 0;
}

#sortable {
    list-style-type: none;
    margin: auto;
    padding-left: 0;
    max-width: 580px;
}

#sortable li {
    float: left;
    width: 33.33333%;
}

#sortable li img {
    vertical-align: bottom;
    width: 100%;
    height: auto;
}


/* APAISAT - "landscape" amplada = màxima altura */

@media ( orientation:landscape) {
    /* 100vh (100% vertical amb alçada) */
    #sortable {
        width: 100vh;
    }
}


/* VERTICAL - "portrait" s'adapta a la màxima amplada */

@media ( orientation:portrait) {
    #sortable {
        width: 100%;
    }
}


/* CITES CSS */

.cites img {
    vertical-align: bottom;
}

.cites {
    position: relative;
    background-color: rgb(41, 86, 148);
    height: 427px;
    width: 100%;
    min-width: 640px;
}

#caixa {
    position: relative;
    text-align: right;
    width: 100%;
    height: 100%;
}

#foto {
    height: 100%;
    max-height: 427px;
    width: auto;
}

.textes {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 50%;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: large;
}

#persona {
    font-style: 'Roboto', sans-serif, italic;
}

.cites nav {
    position: absolute;
    width: 100%;
    bottom: 10px;
    z-index: 100;
}

.cites nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.cites nav a {
    display: block;
    width: 10px;
    height: 10px;
    background-color: rgb(41, 86, 148);
    border-radius: 50%;
}

.cites nav a.on {
    background-color: rgb(41, 86, 148);
}

.cites nav a.off {
    background-color: rgb(41, 86, 148);
}

.cites nav a:hover {
    background-color: red;
}

.cites #dades {
    margin-top: 5vh;
    margin-left: 10%;
    margin-right: 10%;
    display: none;
}

.cites #dades div {
    padding: 0.5em;
    background-color: rgb(41, 86, 148);
    border: 1px solid rgb(41, 86, 148);
    margin-bottom: 0.2em;
}

.editar {
    background-color: rgb(41, 86, 148);
    padding: 0.2em;
    text-align: right;
    height: 28px;
    cursor: pointer;
}

.editar img {
    padding: 6px;
    border-radius: 50%;
}

.editar:hover > img {
    background-color: rgb(41, 86, 148);
}

.cites #dades div#botons {
    border: 1px none #000000;
    background-color: #ccc;
}

div #botons ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

div #botons ul li {}

div #botons ul li img {
    width: 20px;
    height: 20px;
    padding: 0.3em;
    border-radius: 50%;
    background-color: rgb(41, 86, 148);
    margin-right: 0.3em;
}

div #botons ul li img:hover {
    background-color: white;
}


/*DIVISORES Y CAJAS...................................................*/


/*classe para aplicar la funcion float en unA CAJA */

.floatdiv {
    float: left;
    padding: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid #666;
}

.floatleft {
    height: auto;
    width: auto;
    padding: 1px;
    margin: 10px;
    margin-right: 10px;
    margin-bottom: 1px;
    float: left
}

.floatleftcircle {
    height: auto;
    width: auto;
    padding: 15px;
    margin: 24px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: rgb(75, 144, 255);
    border-radius: 50%;
    float: left
}

.floatclear {
    height: auto;
    width: auto;
    background-color: none;
    clear: both;
}


/*--ESTILOS DE BORDES I SOMBREADOS....................................... */


/*SOMBREADOS*/

.degra1 {
    background: linear-gradient(to right, #dff5a0 0%, #566647 100%);
}

.degra2 {
    background: linear-gradient(to bottom, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 80%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);
}

.degra3 {
    background: linear-gradient(to right, rgba(0, 167, 255, 0.39) 0%, rgba(255, 255, 255, 0) 100%);
}

.degra4 {
    background: linear-gradient(to bottom, rgba(50, 116, 45, 1) 0%, rgba(50, 116, 45, 0) 100%);
}


/*BORDES*/


/* los 4 con radio*/

.quatro {
    border-radius: 24px;
}


/* radio arriba-izquierda*/

.arribaizq {
    border-top-left-radius: 24px;
}


/* radio arriba-izquierda i abajo derecha*/

.diagonal {
    border-radius: 24px 0;
}


/* circular*/

.circular {
    border-radius: 50%;
}


/*volta de cano*/

.voltacano {
    border-radius: 50% 50% 0 0;
}


/*volta baixa a dalt i abaix*/

.voltadaltbaix {
    border-top-left-radius: 50% 20%;
    border-top-right-radius: 50% 20%;
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
}


/* IFRAMES------------------------------------------------------ */

.maps-iframe {
    width: 200px;
    height: 400px;
}


/* CSS pantallas de 320px o superior */

@media (min-width: 320px) {
    .maps-iframe {
        width: 400px;
        height: 600px;
    }
}


/* CSS pantalla 768px o superior */

@media (min-width: 768px) {
    .maps-iframe {
        width: 650px;
        height: 600px;
    }
}