/* FONTS */
@font-face {
    font-family: 'avenirltstd-light';
    src: url('../fonts/avenirltstd-light.eot');
    src: local('☺'), url('../fonts/avenirltstd-light.woff') format('woff'), url('../fonts/avenirltstd-light.ttf') format('truetype'), url('../fonts/avenirltstd-light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'avenirltstd-black';
    src: url('../fonts/avenirltstd-black.eot');
    src: local('☺'), url('../fonts/avenirltstd-black.woff') format('woff'), url('../fonts/avenirltstd-black.ttf') format('truetype'), url('../fonts/avenirltstd-black.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
/**********************************************************************/

body{
    font-family: avenirltstd-light;
    color: #5D5D5D;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6{    
    font-family: avenirltstd-black;
    font-weight: normal;
    text-shadow: 1px 1px 1px #aaa;
}


@media (max-width: 767px) {
    h1 {
      font-size: 16px;
      padding-bottom:20px;
    }
    p {
        font-size: 12px
    }
}

@media (min-width: 768px) {
    h1 {
      font-size: auto;
    }
    p {
        font-size: 25px
    }
}


/*h1,
.h1 {
  font-size: 36px;
}
h2,
.h2 {
  font-size: 20px;
}
h3,
.h3 {
  font-size: 18px;
}
h4,
.h4 {
  font-size: 16px;
}
h5,
.h5 {
  font-size: 14px;
}
h6,
.h6 {
  font-size: 12px;
}*/

.titulo{
    font-family: avenirltstd-black;
    text-transform: uppercase;
}

.subtitulo{
    font-size: 18px;
    font-weight: bold;
}

.row{
    margin: 0;
}

.onclick {
    color:#000000;
}

.onclick:hover {
    cursor:pointer;
    color:#80C7BD;
}

.header{
    background-image:url('../img/alcazaba.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
    background-color: #000000;
    padding:20px 0;
}

/*.container, .container-fluid, .border-radius-10{
    border-radius: 10px;
}*/

.container-nopadding {
	padding-left: 0;
	padding-right: 0;
}

.container-nopadding .row {
	margin-left: 0;
	margin-right: 0;
}

.container-nopadding .row div {
	padding-left: 0;
	padding-right: 0;
}

.mt20 {
    margin-top:20px;
}

.mt-100 {
    margin-top:-100px;
}

.pdt20 {
    padding-top:20px;
}

.pdl10 {
    padding-left: 10px;
}

.pdlr10 {
    padding-left:10px;
    padding-right: 10px;
}

.pdlr20 {
    padding-left:10px;
    padding-right: 10px;
}

.pdb0 {
    padding-bottom: 0px;
}

.bg-grey {
    background-color:#EDEDED;
}

.bg-blue-green {
    background-color:#80C7BD;
}

.c-white {
    color:#FFFFFF;
}

/* Botón Scroll UP*/
.scrollup {
    width:30px;
    height:30px;
    /*opacity:0.3;*/
    position:fixed;
    bottom:1%;
    right:1%;
    display:none;
    text-indent:-9999px;
    background: url('../img/boton-subir.png') no-repeat;
}
/**********************************************************************/


/* Al usar no dejar espacios entre divs (usar etiqueta de comentarios) */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

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

/* Footer */
.panel-footer{
  padding: 10px 0px;
  background-color: #333333;
  border-top: 1px solid #ddd;
  color:#FFFFFF;
}

.panel-footer .container{
    padding-right: 15px;
    padding-left: 15px;
}

.panel-footer a {
    color:#FFFFFF;
}

@media (min-width: 1200px) {
  .img-rrss {
    max-width: 70%;
    max-height: 70%;
    }
}
/*********************************************************************/


#fp-nav ul li {
    text-shadow: 1px 1px #aaa;
}

#fp-nav {
    top:82%;
}


#section1, #section2, #section3, #section4, #section5, #section6, #section7 {
    overflow: hidden;
}

#myVideo{
    position: absolute;
    right: 0;
    bottom: 0;
    top:0;
    right:0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-color: black; /* in case the video doesn't fit the whole page*/
    background-image: url(../img/City-Walking.jpg);
    background-position: center center;
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
    object-fit: cover; /*cover video background */
    z-index:3;
    opacity: 0.12;
}

#myVideo2{
    position: absolute;
    right: 0;
    bottom: 0;
    top:0;
    right:0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-color: black; /* in case the video doesn't fit the whole page*/
    background-image: url(../img/Horizontal.jpg);
    background-position: center center;
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
    object-fit: cover; /*cover video background */
    z-index:3;
    opacity: 0.18;
}

#myVideo[poster], #myVideo2[poster]{
    height:100%;
    width:100%;
}

#section0, #section1 {
    overflow: hidden;
}

#section0 .layer{
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    top:30%;
}

/*#section1 .layer{
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
}
*/
.intro {
    padding:0 60px;
}

@media (min-width: 1px) {
  .mvl {
    width: 60%;
    }
}

@media (min-width: 768px) {
  .mvl {
    width: 20%;
    }
}

#slide21{
    background-image: url(../img/bg-noticias.jpg);
    background-position: center;
    background-size: cover;
}

#slide22{
    background-image: url(../img/bg-noticias-ciudadano.jpg);
    background-position: center;
    background-size: cover;
}

#slide23{
    background-image: url(../img/bg-noticias-ayuntamiento.jpg);
    background-position: center;
    background-size: cover;
}

#slide31{
    background-image: url(../img/bg-rutas.jpg);
    background-position: center;
    background-size: cover;
}

#slide32{
    background-image: url(../img/bg-rutas-ciudadano.jpg);
    background-position: center;
    background-size: cover;
}

#slide33{
    background-image: url(../img/bg-rutas-ayuntamiento.jpg);
    background-position: center;
    background-size: cover;
}

#slide41{
    background-image: url(../img/bg-servicios.jpg);
    background-position: center;
    background-size: cover;
}

#slide42{
    background-image: url(../img/bg-servicios-ciudadano.jpg);
    background-position: center;
    background-size: cover;
}

#slide43{
    background-image: url(../img/bg-servicios-ayuntamiento.jpg);
    background-position: center;
    background-size: cover;
}

#slide51{
    background-image: url(../img/bg-que-esta-pasando.jpg);
    background-position: center;
    background-size: cover;
}

#slide52{
    background-image: url(../img/bg-que-esta-pasando-ciudadano.jpg);
    background-position: center;
    background-size: cover;
}

#slide53{
    background-image: url(../img/bg-que-esta-pasando-ayuntamiento.jpg);
    background-position: center;
    background-size: cover;
}

#slide61{
    background-image: url(../img/bg-sensorica.jpg);
    background-position: center;
    background-size: cover;
}

#slide62{
    background-image: url(../img/bg-sensorica-ciudadano.jpg);
    background-position: center;
    background-size: cover;
}

#slide63{
    background-image: url(../img/bg-sensorica-ayuntamiento.jpg);
    background-position: center;
    background-size: cover;
}

#slide81{
    background-image: url(../img/bg-emergencias.jpg);
    background-position: center;
    background-size: cover;
}

#slide82{
    background-image: url(../img/bg-emergencias-ciudadano.jpg);
    background-position: center;
    background-size: cover;
}

#slide83{
    background-image: url(../img/bg-emergencias-ayuntamiento.jpg);
    background-position: center;
    background-size: cover;
}

#slide91{
    background-image: url(../img/bg-incidencias.jpg);
    background-position: center;
    background-size: cover;
}

#slide92{
    background-image: url(../img/bg-incidencias-ciudadano.jpg);
    background-position: center;
    background-size: cover;
}

#slide93{
    background-image: url(../img/bg-incidencias-ayuntamiento.jpg);
    background-position: center;
    background-size: cover;
}

#slide101{
    background-image: url(../img/bg-participacion.jpg);
    background-position: center;
    background-size: cover;
}

#slide102{
    background-image: url(../img/bg-participacion-ciudadano.jpg);
    background-position: center;
    background-size: cover;
}

#slide103{
    background-image: url(../img/bg-participacion-ayuntamiento.jpg);
    background-position: center;
    background-size: cover;
}

@media (max-width: 991px) {
    #section7{
         background-image: url(../img/bg-footer.jpg);
    }
}

@media (min-width: 992px) {
    #section7{
         background-image: url(../img/bg-footer.jpg);
         background-position: right bottom;
    }
}


.flecha{
    width: 25px;
    height:25px;
    border: 4px solid #80C4BA;
    margin: 0 auto;

    border-top-color: transparent;
    border-left-color: transparent;

    transform:rotate(45deg);
    animation: MOVER 0.5s linear 2s infinite alternate;

    position:absolute;
    bottom:2%;
    right:50%;
    z-index:200;
}

@keyframes MOVER{
/*    from{margin-top:0;}
    to{margin-top:15px;}*/
    from{bottom:2%;}
    to{bottom:3%;}
}

.flecha:hover{
    cursor:pointer;
}

/* Preloader */
#preloader {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should be a color other than white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally on the screen */
    top:50%; /* centers the loading animation vertically on the screen */
    /*background-image:url(../img/status.gif);*/ /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}