/*
Theme Name: Restricciones Madrid Theme  
Theme URI: https://restricciones-madrid.es
Version: 1.0
Description: Tema de Restricciones Madrid
Author: restricciones-madrid.es
Author URI: https://restricciones-madrid.es
Template: wp-bootstrap-starter
*/

@import url("../wp-bootstrap-starter/style.css");

/*----------------- Empieza a añadir cambios aquí abajo -------------------------------*/

#bodyrestric {
    font-family: "Muli";
}

.navbar-brand {
    max-width: 300px;
}

#cta-main {
    color: white;
}

header#masthead {
    background-color:#38ada9 !important;
}

.nav-pegatinas-active, .nav-pegatinas-active:hover {
    color: #38ada9;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.card {
    margin-bottom: 10px;
}

.restr-contaminacion {
    display: flex; 
    margin-top: 15px;
}

.restr-img {  
    width: 50px;
    display: inline;
    height: 50px;
    margin-right: 20px;
}

.restr-span {
    display: inline;
}

.restr-container{
    display: flex;
    margin-top: 15px;
}

#bodyrestric #masthead .navbar-nav > li > a {
    color: #FFF;
    font-size: 1rem;
}
#bodyrestric #masthead .navbar-nav > li > a:hover {
    color: #f1f1f1;
    font-weight: 500;

}

.marginauto {
   margin:auto; 
}

.btn-link {
    color: #38ada9 !important;
}

#buscador-matricula {
    background: #f5f5f5;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #cecece;
}

#bodyrestric a {
    color: #38ada9;
}

#bodyrestric a.cc-btn.cc-allow {
    color: white;
}

#bodyrestric a.cc-btn.cc-deny, #bodyrestric a.cc-link, #bodyrestric a.btn-outline-secondary  {
    color: rgb(92, 114, 145);
}

#bodyrestric a.btn-outline-secondary:hover  {
    background: #eaeaea;
    color: black;
}

#bodyrestric a.btn-outline-info {
    color: #17a2b8;
}

#bodyrestric a.btn-outline-info:hover {
    color: #ffffff;
}

.nav-link.disabled {
    color: #6c757d !important;
}

#madrid-central-logo {
    margin: auto;
    display: flex;
    width: 70px;
    margin-bottom: 15px;
}

.alert{
    margin-bottom: 0px !important;
}

@media only screen and (min-width: 600px) {
section.custom-blog-post{
    background: #ffffff;
    padding: 20px;
    border: 1px solid #cecece;
}
#content.custom-blog-post{
    background: #fbfbfb;
    padding-top: 2rem;
}
}


@media only screen and (max-width: 600px) {
.navbar-brand {
    margin: auto;
}
#comprobar-matricula {
    font-size: 1.6rem;
    justify-content: center;
    width:100%;
}
.form-control {
    font-size: 1.2rem;
    line-height: 2;
}
label {
    font-size: 1.1rem;
}
}

footer {
    background: #f5f5f5;
}

#comprobar-matricula {
    background-color:#38ada9;
    border-color:#38ada9;
}

.cc-banner .cc-message {
    font-size: 0.9rem;
}

/* CUSTOM LOADING */
.sk-folding-cube {
    margin: 20px auto;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
  }
  
  .sk-folding-cube .sk-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1); 
  }
  .sk-folding-cube .sk-cube:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #38ada9;
    -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
            animation: sk-foldCubeAngle 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  .sk-folding-cube .sk-cube2 {
    -webkit-transform: scale(1.1) rotateZ(90deg);
            transform: scale(1.1) rotateZ(90deg);
  }
  .sk-folding-cube .sk-cube3 {
    -webkit-transform: scale(1.1) rotateZ(180deg);
            transform: scale(1.1) rotateZ(180deg);
  }
  .sk-folding-cube .sk-cube4 {
    -webkit-transform: scale(1.1) rotateZ(270deg);
            transform: scale(1.1) rotateZ(270deg);
  }
  .sk-folding-cube .sk-cube2:before {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
  }
  .sk-folding-cube .sk-cube3:before {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s; 
  }
  .sk-folding-cube .sk-cube4:before {
    -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
  }
  @-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
      -webkit-transform: perspective(140px) rotateX(-180deg);
              transform: perspective(140px) rotateX(-180deg);
      opacity: 0; 
    } 25%, 75% {
      -webkit-transform: perspective(140px) rotateX(0deg);
              transform: perspective(140px) rotateX(0deg);
      opacity: 1; 
    } 90%, 100% {
      -webkit-transform: perspective(140px) rotateY(180deg);
              transform: perspective(140px) rotateY(180deg);
      opacity: 0; 
    } 
  }
  
  @keyframes sk-foldCubeAngle {
    0%, 10% {
      -webkit-transform: perspective(140px) rotateX(-180deg);
              transform: perspective(140px) rotateX(-180deg);
      opacity: 0; 
    } 25%, 75% {
      -webkit-transform: perspective(140px) rotateX(0deg);
              transform: perspective(140px) rotateX(0deg);
      opacity: 1; 
    } 90%, 100% {
      -webkit-transform: perspective(140px) rotateY(180deg);
              transform: perspective(140px) rotateY(180deg);
      opacity: 0; 
    }
  }

 
@media only screen and (max-width: 319px) {
  .navbar-brand {
    max-width: 185px;
    }
}

@media only screen and (max-width: 359px) {
    .navbar-brand {
      max-width: 225px;
  }
}
  @media only screen and (max-width: 399px) {
    .navbar-brand {
      max-width: 260px;
  }
}