* { 
margin: 0; 
padding: 0; 
border: 0; 
box-sizing: border-box;
}

body {
background: ;
height: 100%;
font-size: 14px;
font-family: 'Encode+Sans+Condensed', Helvetica, Arial, sans-serif;
font-weight: 200;
overflow-x: hidden;
overflow-y: auto;
}

header img {
    width: 100%;
}

input, select, textarea {
font-family: Encode+Sans+Condensed, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 200;
border: 1px solid #eee;	
border-bottom: 1px solid #ccc; 
box-shadow: 3px 3px 3px #ccc;
}

input:hover, select:hover, input:focus, input:active, select:active, select:focus, textarea:active, textarea:focus {
background-color: lightyellow;
border: 1px solid #ccc; 
}

input.readonly, input.readonly:hover, input.readonly:active, input.readonly:focus {
background-color: transparent;
border: 1px solid transparent;	
border-bottom: 1px solid #ccc; 
}

.inputData {
text-align: center;
width: 140px;
}

.inputDinero {
text-align: right;
width: 90px;
}

.inputNumero {
text-align: right;
width: 60px;
}

.tachado {
    text-decoration: line-through;
}

table.input {
    background-color: white;
    width: 800px;
    padding: 40px;
    border: 1px solid #888;
    box-shadow: 3px 3px 3px #888;
}

table.input td {
    font-size: .9em;
}

button {
font-family: Oswald;
margin: 0 auto;
font-size: .8em;
font-weight: 200;
padding: 7px 10px;
border: 1px solid white;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(198,198,198,1) 12%,rgba(204,204,204,1) 25%,rgba(142,142,142,1) 39%,rgba(88,88,88,1) 50%,rgba(86,86,86,1) 76%,rgba(56,56,56,1) 91%,rgba(38,38,38,1) 100%);
color: white;
cursor: pointer;
}

button:hover {
box-shadow: 0 0 3px #222;
}

table {
margin: 0 auto;
}

th {
font-weight: bolder;
}

.th {
font-weight: 500;
text-align: right;
}

td {
padding: 3px 5px;
}


.boto { cursor: pointer; }

.foto {
padding: 0;
border: 15px solid white;	
border-bottom-width: 60px;	
box-shadow: 0 0  1px #ccc, 4px 4px 6px #888;
}

.boton {
cursor: pointer;
font-size: .7em;
padding: 3px 5px;
border: 1px solid white;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
color: white;
}

.versiones {
font-size: .8em;
text-align: center;
cursor: context-menu;
}

.rojo {
    color: red;
}

div.punts {
max-width: 90%;
margin: 20px;
text-align: left;
}


li {
    margin-left: 20px;
    margin-top: 5px;
    list-style-type: disc;	
    text-align: justify;
}

li.noStyle {
    list-style:  none;
}

ul.punts {
margin-top: 5px;
}

li.punts {
margin-left: 20px;
margin-top: 5px;
list-style-type: lower-alpha;	
text-align: left;
}

h1 {
font-size: 1.2em;
color: #444;
width: 100%;
text-align: center;
font-weight: 800;
margin: 30px 0;
}

.h1 {
display: block;
font-size: 1.2em;
color: #444;
width: 100%;
text-align: center;
font-weight: 800;
margin: 30px 0;
}

h2 {
font-size: 1.1em;
color: ;
width: 100%;
text-align: center;
font-weight: 800;
margin: 30px 0;
}

h3 {
font-size: 1em;
color: #888;
font-weight: 800;
padding: 10px 10px;
}

header {
width: 100%;
text-align: center;
}

#usuario {
position: absolute;
top: 4px;
right: 4px;
cursor: pointer;
color: white;
background-color: #888;
font-size: .8em;
margin: 3px;
border: 1px solid white;
border-radius: 5px;
box-shadow: 2px 2px 3px black;
padding: 3px;	
opacity: .9;
}

#usuario:hover {
background-color: #666;
}

article {
font-size: 19px;
}

tr {
vertical-align: top;
}

.text {
display: inline-block;
margin: 0 auto;
}

@media ( min-width: 1024px ) {
    .textoFondo {
        width: 70%;
        background-color: white;
        margin: 0 auto;
        padding: 40px;
    }
}

p {
padding: 60px;
text-align: justify;
}

p img {
padding: 10px;
margin: 40px;
}

img.complet {
margin: 5%;
border: 10px solid white;
box-shadow: 6px 6px 8px #888;
outline: 1px solid #ccc;
}

.pdf {
display: inline;
font-family: Oswald;
font-weight: normal;
font-size: 14px;
border: 3px solid white;
border-radius: 7px;
box-shadow: 3px 3px 3px #888;
margin: 40px;
cursor: pointer;
padding: 10px;
padding-left: 40px;
background-color: #ccc;
background-image: url(../images/pdf.png);
background-size: 24px;
background-position: 5px center;
background-repeat: no-repeat;
}

.boto2 {
display: inline;
font-family: Oswald;
font-weight: normal;
font-size: 14px;
border: 3px solid white;
border-radius: 7px;
box-shadow: 3px 3px 3px #888;
margin: 40px;
cursor: pointer;
padding: 10px;
background-color: #ccc;
}

.pdf:hover, .boto2:hover {
box-shadow: inset 3px 3px 3px #888;
}

.esquerra {
float: left;
max-width: 19%;
overflow-x: hidden;
}

.dreta {
float: right;
max-width: 79%;
width: 100%;
overflow-x: scroll;
}

.asistencia {
cursor: pointer;
}

.asistencia:hover {
color: white;
font-weight: bolder;
}

.descarga {
text-decoration: none;
}

.descarga:hover {
cursor: pointer;
color: white;
text-decoration: underline;
}

#programa {
border: 1px solid #ccc;
box-shadow: 4px 4px 6px #888;
}


.clearfix::after {
clear: both;
}

.esquerra div, .dreta div {
margin: 10px;
}

.width100 {
width: 100% !important;
}

table.dades {
margin: 10px auto;
max-width: 80%;
border-collapse: collapse;
}

.dades tr {
vertical-align: top;
background-color: white;
}

.dades tr:nth-child(even) {
background-color: #ddd;
}

.dades tr:hover {
background-color: #bbb;
}

.dades th {
padding: 3px;
background-color: ;
border: 1px solid  ;
color: ;
font-size: .8em;
font-weight: 200;
}

.dades td {
padding: 3px;
font-size: .7em;
border-top: 0;
border: 1px solid  ;
color:  ;
}

table.coautor {
    margin-top: 10px;
    border-collapse: collapse;
}

table.coautor th {
    font-weight: bolder;
    font-size: .9em;
    border: 1px solid #ccc;
}


table.coautor td {
    border: 1px solid #ccc;
}

.modificar {
color: white;
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}

.modificado {
color: red;
}

footer {
background-color: ;
padding: 20px;
width: 100%;
color: ;;
position: relative;
font-family: Thin;
margin-top: 10px;
text-align: center;
font-size: .9em;
clear: both;
z-index: -1;
}

nav {
    font-family: Oswald;
    font-weight: normal;
    width: 100%;
    height: 40px;
    background: ;;
    color: ;;
    line-height: 40px;
    vertical-align: middle;
    z-index: 9999999999;
}

.burger {
float: left;
width: 36px;
height: 36px;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
box-shadow: 2px 2px 2px #444;
border-radius: 5px;
border: 2px solid white;
background: #ccc;
background-image: url(../images/burger.png);
background-size: contain;
vertical-align: middle;
}

.burger:hover {
background-color: white;
}

.burger.actiu {
color: black;
background-color: white;
box-shadow: inset 2px 2px 2px #444;
}

#divBurger {
z-index: 9999999999;
}

#divBurger li {
width: 100%;
height: 60px;
line-height: 60px;
background-color: #ccc;
border-bottom: 3px solid white;
border-radius: 5px;
vertical-align: middle;
padding-left: 10px;
cursor: pointer;
}

.listaOrdenada li {
    margin-top: 10px;
    list-style-position: outside;
    list-style-type: decimal;
}

.listaOrdenada li li {
    margin-top: 10px;
    list-style-position: outside;
    list-style-type: lower-alpha;
}

.listaOrdenada li li li {
    margin-top: 10px;
    list-style-position: outside;
    list-style-type: lower-roman;
}

#burSede, #burLlegar, #burComercial, #burDossier {
padding-left: 30px !important;
}

#divBurger {
position: absolute;
width: 100%;
left: 0px;
margin-top: 40px;
}

@media (max-width: 800px) {
.burger { display: block; }
ul.menu { display: none; }
}

@media (min-width: 801px) {
.burger { display: none; }
ul.menu { display: block; }
}

ul.menu {
float: right;
margin-top: 2px;
margin-right: 3px;
}

.menu li {
float: left;
list-style: none;
margin-left: 3px; 
/*margin-left: 10px; */
font-size: 1em;
padding: 0 3px;
height: 30px;
line-height: 30px;
vertical-align: middle;
cursor: pointer;
border: 1px solid ;
}

.menu li:hover {
    border: 1px solid ;
}

.menu li.actiu {
    border-bottom: 2px solid  ;
}

ul.submenu1 {
display: block;
position: absolute;
background: ;
color: black;
margin-top: 5px;
margin-left: -10px;
/*border-radius: 7px;*/
/*border: 3px solid white;*/
box-shadow: 3px 3px 3px #444;
}

.submenu1 li {
clear: both;
display: block;
background: none;
border: 0;
box-shadow: none;
padding: 3px 8px;
margin: 0;
border-radius: 0;
width: 150px;
}

.submenu1 li:hover {
color: #eee;	
background-color: #ccc;
}

p {
max-width: 80%;
margin: 0 auto;
margin-bottom: 10px;
}

.textarea {
width: 450px;
height: 120px;
}

.inputNombre {
width: 450px;
}

.inputApellido {
width: 430px;
}

.inputTelefono {
width: 90px;
}

.inputCP {
width: 50px;
}

.inputPoblacion {
margin-left: 3px;
width: 390px;
}

.requerido {
    vertical-align: top;
    color: red;
    font-size: 0.8em;
}

.obligatorio {
    background-color: yellow;
    border: 1px solid red;
}

input[type='checkbox'] {
    -webkit-appearance: none;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 3px #ccc;
    background-color: white;
    padding: 5px;
    border-radius: 3px;
    margin-right: 5px;
}

input[type='checkbox'].obligatorio {
    -webkit-appearance: none;
    border: 1px solid red;
    box-shadow: 3px 3px 3px #ccc;
    background-color: yellow;
    padding: 5px;
    border-radius: 3px;
    margin-right: 5px;
}

input[type='checkbox']:checked {
    background-image: url(images/checked.png);
    background-position: center;
    background-repeat: no-repeat;
}

#logo {
margin-top: 73px;
}

#curso {
display: inline-block;
font-size: 2em;
color: ;
margin-left: 10px;
text-shadow: 3px 3px 3px #fff;
}

#logo {
position: absolute;
top: 0;
left: 15px;
}

.horario th {
background-color: #444;
color: #efe;
vertical-align: middle;
}

.horario tr {
vertical-align: top;
}

.horario td.horario {
width: 100%;
height: 100%;
box-shadow: 3px 3px 3px #ccc;
}

.horario td {
border-bottom: 1px dotted #ccc;
border-right: 1px dotted #ccc;
padding: 3px;
}

/*******************/

.ui-widget {
font-family: 'Encode+Sans+Condensed', Helvetica, Arial, sans-serif;
font-size: 14px;
}

.ui-button{
font-family: Oswald;
font-size: 14px;
}

#loader {
position: fixed;
display: none;
top: 50%;
margin-top: -50px;
height: 100px;
left: 50%;
margin-left: -50px;
width: 100px;
border-top: 12px groove #ddd;
border-bottom: 12px groove #ccc;
border-left: 12px groove #444;
border-right: 12px groove #222;
border-radius: 50%;
z-index: 9999;
opacity: .5;
animation: spin 2s linear infinite;
}


@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.blink {
color: red;
animation: blinker 1s linear infinite;
}

@keyframes blinker {
50% { opacity: 0; color: black; }
}