/*
* Mile Theme
* Author: IvanLp
* Version: 8.x
*/

/* 
* Theme
*
* 1 - GENERAL
* 2 - REGIONS
* 3 - MAIN MENU
* 4 - BREADCRUMB
* 5 - BLOCKS
* 6 - NODES AND FIELDS
* 7 - VIEWS
* 8 - MEDIA QUERIES
*/

/**

/********************************************
**************  GENERAL   *****************
********************************************/
:root {
  --color-header: #dcdddb;
  --color-bg: #1f1f22;
  --color-text: #ea5284;
}


body{
  background-color: var(--color-bg);
}

.mile-bg{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.mile-bg > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: none;
}

#Map{
  width: 100%;
  height: 340px;
}

.iframebox {
  padding-bottom: 56.25%;
  position:relative;
 
}

.logos-festivals > img {
  filter: brightness(0) saturate(100%) invert(51%) sepia(46%) saturate(2347%) hue-rotate(308deg) brightness(92%) contrast(100%);
}

.bl-logo img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(8%) saturate(599%) hue-rotate(201deg) brightness(100%) contrast(91%);
}

.iframebox iframe {
  width:100%;
  height:100%;
  position:absolute;
  top: 0;
  left:0;
}
.livehome {
 
  border:solid 2px var(--color-text);
   transition: 0.5s all ease-in-out; 
  float: left;
      margin-top: 1.5rem !important;
  display: block;
  margin-bottom: 8rem !important;
  padding: 0 !important;
}

.livehome .mile-field-custom{
  margin: 0 !important;
}

.vidmpac {
margin-left: auto !important;
margin-right: auto !important;
float: unset;
}

.livehome:hover {
  
  border:solid 2px var(--color-text);
}

.max-960 {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
/********************************************
**************  1 REGIONS   *****************
********************************************/

.mile-container{
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: top center;
}

.mile-container > header{ 
  width: 100%;
  background-color: var(--color-header);
  padding: 1rem 2.5rem;
}

header .content-header {
  display: flex;
  display: -webkit-flex; /* Safari */
  justify-content: flex-end;
  align-items: center;
  height: 50px;
}

header .content-header #block-mile-theme-branding {
  position: absolute;
  left: 45px;
  order: 1;
  -webkit-order: 1;
  height: 75px;
}

header .content-header #block-mile-theme-branding a{
  position: relative;
  height: 100%;
  display: block;
}

header .content-header #block-mile-theme-branding a img{
  height: 100%;
} 

header .content-header .logos-festivals{
  margin: 0 1rem;
  order: 2;
  -webkit-order: 2;
}

header .content-header .logos-festivals > a > div.img-festival{
    width: 78px;
    height: 42px;
    margin: 19px 0.5rem 0 0.5rem;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

header .content-header .social-networks{
  margin: 0 0.5rem 0 1rem;
  order: 3;
  -webkit-order: 3;
}

header .content-header  .social-networks a{ 
  width: 37px;
  height: 37px;
  line-height: 38px;
  display: inline-block;
  background-color: var(--color-bg);
  border-radius: 100%;
  text-align: center;
  color: var(--color-header);
  margin: 0 2px;
  font-size: 21px;
}

header .content-header .btn-open-menu{
  margin: 1rem;
  cursor: pointer;
  order: 4;
  -webkit-order: 4;
  z-index: 1;
}


.mile-container > section{
    width: 100%;
    min-height: 600px;
    padding: 2rem 0;
    margin-bottom: 1rem;
}

.mile-container > section.container-highlighted{
  height: auto !important;
  min-height: auto !important;
  margin-bottom: -4rem;
}

.mile-container > section.container-front{
  overflow: hidden;
  opacity: 0.95;
  max-width: 1260px;
}

.mile-container > footer{
  min-height: 100px;
}


footer .content-footer-frontpage,
footer .content-footer{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 6rem;
}

footer .content-footer .contact-info{
  color: var(--color-text) !important;
  font-size: 0.9rem;
  order: 1;
  -webkit-order: 1;
}

footer .content-footer .contact-info a{
  color: var(--color-text) !important;
}

footer .content-footer .logos-festivals{
  display: flex;
  flex-wrap: wrap;
  max-width: 1024px;
  margin: 0 1rem;
  order: 4;
  -webkit-order: 4;
}

footer .content-footer  .logos-festivals > a > div.img-festival{
  height: 90px;
  margin: 0 0.7rem;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) saturate(100%) invert(53%) sepia(50%) saturate(4579%) hue-rotate(311deg) brightness(96%) contrast(91%);
}

footer .content-footer  .logos-festivals > a > div.img-festival[title^="Colombia"]{ width: 102px; }
footer .content-footer  .logos-festivals > a > div.img-festival[title^="HipHop"]{ width: 103px; }
footer .content-footer  .logos-festivals > a > div.img-festival[title^="Jazz"]{ width: 74px; }
footer .content-footer  .logos-festivals > a > div.img-festival[title^="Joropo"]{ width: 76px; }
footer .content-footer  .logos-festivals > a > div.img-festival[title^="Popular"]{ width: 104px; }
footer .content-footer  .logos-festivals > a > div.img-festival[title^="Rock"]{ width: 75px; }
footer .content-footer  .logos-festivals > a > div.img-festival[title^="Salsa"]{ width: 78px; }
footer .content-footer  .logos-festivals > a > div.img-festival[title^="Vallenato"]{ width: 104px; }

/* 
footer .content-footer #block-webform {
  margin: 0 2rem;
  order: 3;
  -webkit-order: 3;
}


footer .content-footer #block-webform h3{
  display: none !important;
  visibility: hidden;
}


footer .content-footer #block-webform form{
  display: flex;
}

footer .content-footer #block-webform form input[type="email"]{
  background: no-repeat;
  border: 2px solid var(--color-text);
  height: 35px;
  color: var(--color-header);
  font-weight: bold;
  max-width: 220px;
  padding-left: 6px;
}

footer .content-footer #block-webform form input[type="email"]:focus{
  border: 2px solid var(--color-text);
}


footer .content-footer #block-webform form input[type="email"]::placeholder {
  color: var(--color-header);
  opacity: 1; 
}

footer .content-footer #block-webform form input[type="email"]:-ms-input-placeholder { 
 color: var(--color-header);
}

footer .content-footer #block-webform form input[type="email"]::-ms-input-placeholder { 
 color: var(--color-header);
}

footer .content-footer #block-webform form input[type="submit"]{
  border: none;
  background-color: var(--color-text);
  color: var(--color-bg);
  height: 35px;
  font-weight: bold;
} 

*/

footer .content-footer  .social-networks{
  margin: 0 0.5rem 0 1rem;
  order: 2;
  -webkit-order: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

footer .content-footer .social-networks a{ 
  width: 37px;
  height: 37px;
  line-height: 38px;
  display: inline-block;
  background-color: var(--color-text);
  border-radius: 100%;
  text-align: center;
  color: var(--color-bg);
  font-size: 21px;
  margin: 3px;
}

.btn-newsletter {
  background-color: var(--color-text);
  color: var(--color-bg) !important;
  font-weight: 700;
  font-size: 0.9rem;
  width: 280px;
}

footer .content-footer a.btn-newsletter{
  background-color: var(--color-text);
    color: var(--color-bg);
    font-weight: 700;
    font-size: 0.9rem;
    width: 100% !important;
    border-radius: 10px;
    line-height: 24px;
    margin-bottom: 2rem;
}

footer .content-subfooter .copyright img{
  max-width: 400px;
  margin-top: -45px;
  margin-bottom: 30px;
}

footer .content-subfooter .copyright p {
  margin: 1rem 0;
  font-size: 0.8rem;
}
footer .content-subfooter .copyright p a{
  color:var(--color-text);
}

.global-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.85);
  padding: 2rem 1rem 2rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  opacity: 0;
  z-index: 10000;
  transition: 0.6s all;
}

.global-modal.active {
  opacity: 1;
  transform: scale(1) !important;
}

.global-modal .content-global-modal{
  position: relative;
  width: 100%;
}

.global-modal .content-global-modal img{
  max-height: 90vh !important;
  width: auto !important;
  max-width: 80% !important;
  margin: 0 auto;
  display: block;
  border: 2px solid var(--color-text);
}

.btn-close-global-modal
{
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 32px;
  color: #f2f2f2;
  cursor: pointer;
  z-index: 1;
}

/********************************************
**************  3 MAIN MENU   ***************
********************************************/

/*Open Menu*/

.btn-open-menu{
    margin: 1rem;
    cursor: pointer;
    display: block;
}

/* The Overlay (background) */
.overlay-main-menu {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.overlay-main-menu .menu-title{
  position: relative;
  top: 100px;
  left: 0;
  right: 0;
  color: var(--color-text);
  font-size: 3rem;
  font-style: inherit;
  font-weight: 900;
  margin: 0 auto;
  text-align:center;
  display: none;
}

.overlay-main-menu .logo-festival{
  background-image: url(/sites/pap/files/inline-images/logo-popular.png);
  width: 104px;
  height: 104px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 20px;
  filter: brightness(0) saturate(100%) invert(53%) sepia(50%) saturate(4579%) hue-rotate(311deg) brightness(96%) contrast(91%);
}

  /* Position the content inside the overlay */
.overlay-main-menu .overlay-content {
    position: relative;
    top: 3%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 20px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
  
  /* The navigation links inside the overlay */
.overlay-main-menu a {
    padding: 5px;
    text-decoration: none;
    font-size: 25px;
    color: var(--color-text);
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
    line-height: 1.4;
}
  
  /* When you mouse over the navigation links, change their color */
.overlay-main-menu a:hover, .overlay a:focus {
    color: #f1f1f1;
}
  
  /* Position the close button (top right corner) */
.overlay-main-menu .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/********************************************
**************  4 BREADCRUMB   ***************
********************************************/
.mile-breadcrumb ol {
  background-color: transparent !important;
  border-radius: 0 !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.mile-breadcrumb ol a{
  color:var(--color-text);
}

/********************************************
**************  5 BLOCKS   ***************
********************************************/

.block-mile-theme-page-title{
  margin-top: 2rem;
}

.block-mile-theme-page-title h1{
  padding: 1rem 2rem;
  margin: 0 0 1px 0!important;
  text-align: center;
  color: var(--color-text);
}

.block-mile-theme-content{
  padding: 0rem 2rem 1rem 2rem;
  margin: 0 !important;
  color: var(--color-header);
}

.block-mile-theme-content img{
  text-align: center;
  max-width: 450px;
  width: 100%;
  height: auto;
}

#block-pick img,
#block-pick-2 img{
  position: relative;
  width: 120px;
  left: 0;
  right: 0;
  top: 0;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: brightness(0) saturate(100%) invert(53%) sepia(50%) saturate(4579%) hue-rotate(311deg) brightness(96%) contrast(91%);
}

.btn-mile-theme{
  width: 100%;
  min-height: 40px;
  background-color: var(--color-text);
  color: var(--color-bg) !important;
  font-size: 1.4rem;
  font-weight: bold;
}

#block-playlist {
  margin: 4rem 0 6rem 0;
  padding: 6px 12px;
}

#block-playlist h3{
  font-weight: bold;
  color: var(--color-header);
  font-size: 2.5rem;
}

#block-playlist iframe{
  width: 100%;
  border: 2px solid var(--color-text);
  padding: 0.5rem;
  height: 273px;
}

#block-credits {
  margin-bottom: 6rem;
}

#block-credits p {
  font-size: 0.8rem;
  line-height: 14px;
}

#block-credits p span.label{
  color: var(--color-text);
}

#block-credits p span.author{
  color: var(--color-header);
  font-weight: 500;
}


#block-views-block-ultimos-articulos-block-1{ position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 0 2rem 0; background-color: #0003; padding: 1rem; box-sizing: border-box; }
#block-views-block-ultimos-articulos-block-1 h3{ color: #fff; }
#block-views-block-ultimos-articulos-block-1 .row{ margin: 0 !important; }
#block-views-block-ultimos-articulos-block-1 .row .views-row {border-bottom: 2px dashed var(--color-text) !important; padding: 1rem 0;}
#block-views-block-ultimos-articulos-block-1 a { color: var(--color-header); font-size: 16px; font-weight: bold; }

#block-countdowntimer{ margin: 1rem 0 2rem 0 }
#block-countdowntimer .countdownHolder{
  position: relative;
  width: 100%;
  display:flex;
  justify-content:center;
}
#block-countdowntimer .countDiv{ display: none; }
#block-countdowntimer .countdownHolder .countWeeks,
#block-countdowntimer .countdownHolder .countDays,
#block-countdowntimer .countdownHolder .countHrs,
#block-countdowntimer .countdownHolder .countMins,
#block-countdowntimer .countdownHolder .countSecs{
  position: relative;
  border: 2px solid var(--color-text);
  background-color: rgba(0,0,0,0.2);
  border-radius: 5px;
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 6px;
}

#block-countdowntimer .countdownHolder .digit{
  background: transparent;
  box-shadow: none;
  border: none;
  color: var(--color-text);
  font-weight:900;
}

#block-countdowntimer .countdownHolder .countWeeks::after{
  content: "Semanas";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  font-size: 14px;
  text-align: center;
  color: #fff;
}

#block-countdowntimer .countdownHolder .countDays::after{
  content: "Días";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  font-size: 14px;
  text-align: center;
  color: #fff;
}

#block-countdowntimer .countdownHolder .countHrs::after{
  content: "Horas";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  font-size: 14px;
  text-align: center;
  color: #fff;
}

#block-countdowntimer .countdownHolder .countMins::after{
  content: "Minutos";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  font-size: 14px;
  text-align: center;
  color: #fff;
}

#block-countdowntimer .countdownHolder .countSecs::after{
  content: "Segundos";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  font-size: 14px;
  text-align: center;
  color: #fff;
}

#block-countdowntimer .countdownHolder + div{
  display: none;
}


#block-views-block-view-news-block-1{
  padding: 6px 12px;
  margin: 2rem auto 6rem auto;
  max-width: 1140px;
}

#block-views-block-view-news-block-1 > h3{
  color: var(--color-header);
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}   

#block-views-block-view-news-block-1 .item {
  position: relative;
  width: 100%;
}

#block-views-block-view-news-block-1 a{
  position: relative;
  width: 100%;
  color: var(--color-header) !important;
  display: block;
  margin: 0 auto;
  text-decoration: none;
}

#block-views-block-view-news-block-1 span.external-link,
#block-views-block-view-news-block-1 span.internal-link{ display: none; }

#block-views-block-view-news-block-1 a .item-new{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

#block-views-block-view-news-block-1 a .filter{
  position: relative;
  float: left;
  border: 2px solid var(--color-text);
  width: 250px;
  height: 250px;
}
#block-views-block-view-news-block-1 a .filter::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-text);
  opacity: 0.4;
}

#block-views-block-view-news-block-1 a .filter .new-background{
  width: 100%;
  height: 100%;
  filter: saturate(0.5);
}

#block-views-block-view-news-block-1 a .filter img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.5);
}

#block-views-block-view-news-block-1 a .new-content{
  float: right;
  width: 40%;
  margin-left: 2rem;
} 

#block-views-block-view-news-block-1 a .new-content h5{
  font-weight: bold;
} 

#block-views-block-view-news-block-1 a .new-content p{
  font-size: 1rem;
  font-weight: 300;
} 

#block-views-block-view-news-block-1 .owl-nav button{
  position: absolute;
  top: 20px;
}

#block-views-block-view-news-block-1 .owl-nav button.owl-prev{ left: 0; }
#block-views-block-view-news-block-1 .owl-nav button.owl-next{ right: 0; }
#block-views-block-view-news-block-1 .owl-nav button span{ font-size: 40px; color: var(--color-text); }



#block-views-block-view-news-block-1 .owl-dots { margin-top: 4rem;}
#block-views-block-view-news-block-1 .owl-dots .owl-dot span{ background-color: rgba(255, 255, 255, 0.5); } 
#block-views-block-view-news-block-1 .owl-dots .owl-dot.active span{ background: var(--color-text) !important; }

#block-pestanas ul {
  display: flex;
  list-style: none;
  justify-content: flex-end;
}

#block-pestanas ul li { margin: 0 4px; }

@media (max-width: 576px) {
  #block-views-block-view-news-block-1 { margin: 1rem 0 0 0; }    
}

/********************************************
********** 6 NODES AND FIELDS ***************
********************************************/


.node--type-ct-memory  [class^="mile-node"]{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.node--type-ct-memory  [class^="mile-node"] > div:nth-child(1){
  width: 60%;
  margin: 0 2%;
  align-self: center;
  order: 2;
}

.node--type-ct-memory  [class^="mile-node"] > div:nth-child(2){
  width: 36%;
  order: 1;
}

.node--type-ct-memory  [class^="mile-node"] > div:nth-child(3),
.node--type-ct-memory  [class^="mile-node"] > div:nth-child(4){
  width: 100%;
}


/**/
.mile-node img{
  margin: 40px auto;
  display: block;
}

.mile-field-author{
  text-align: right;
  font-size: 0.8rem;
}

[class^="mile-field"]{
  margin: 0em 0 2em 0;
}

.mile-field-custom img{
  max-width: none;
}

.mile-field-custom a{
  color: var(--color-text);
}

.mile-field-details iframe{
  border: 2px solid var(--color-text);
  padding: 0.5rem;
  box-sizing: border-box;
}

.mile-field-attachments{
  position: relative;
  height: auto;
  width: 100%;
  margin: 2rem auto 1rem auto;
}

.mile-field-attachments .list-attachments{
  margin: 0;
  padding: 0;
  list-style: none;
}


.mile-field-attachments .list-attachments .item-attachment{
  /* border-bottom: 1px dashed var(--color-text); */
  padding: 0.4rem 1rem;
}

.mile-field-attachments .list-attachments .item-attachment a{
  color: var(--color-bg);
  background-color: var(--color-text);
  width: 100%;
  display: block;
  font-weight: bold;
  text-align: center;
  padding: 10px 2px;
  border-radius: 4px;
}

.mile-field-attachments .list-attachments .item-attachment a:hover{
  text-decoration: none;
  opacity: 0.7;
}

.mile-field-imagelink .card {
  background-color: transparent;
  border: none;
  /*
  border: 1px solid var(--color-text);
  min-height: 430px;
  padding-top: 20px;
  */
}

.mile-field-imagelink .card img{
  max-width: none !important;
  width: 90%;
  height: 320px;
  object-fit: contain;
  margin: 0 auto !important;
}

.mile-field-imagelink .card a{
  text-align: center;
  color: var(--color-text);
  font-weight: bold;
  width: 100%;
}

/* mile-node-6 */

.mile-node-6{
  display: grid;
  grid-template-columns: 68% 30%;
  grid-template-rows: auto auto auto;
  justify-content: space-between;
}

.mile-node-6 > div:nth-child(1){
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.mile-node-6 > div:nth-child(2){
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}

.mile-node-6 > div:nth-child(3){
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.mile-node-6 > div:nth-child(4){
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  margin-top: 530px;
}

/* mile-node- */

.mile-node-25{
  display: flex;
  flex-wrap: wrap;
}

.mile-node-25 > div:nth-child(1){
  width: 70%;
}

.mile-node-25 > div:nth-child(1) img{
  margin-top: 0 !important;
  margin-bottom: 10px;
}

.mile-node-25 > div:nth-child(2){
  width: 25%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 2rem 1rem;
}

.node-article .block-mile-theme-page-title {
  display: none;
}

.node-article .date {  
  color: var(--color-text);
  font-weight: 700;
  font-size: .9rem;
  text-align: right;
}

.node-article .art h1 {
  color: var(--color-text);
}

h1 {font-size: clamp(1.65rem, 5vw, 2.1rem);  font-weight: 700;}
h2 {font-size: clamp(1.575rem, 4vw, 1.7rem); font-weight: 500; color:var(--color-text); opacity: .9;}
h3 {font-size: clamp(1.35rem, 3.5vw, 1.4rem); font-weight: 500; color:var(--color-text); opacity: .8;}
h4 {font-size: clamp(1.125rem, 3vw, 1.2rem); font-weight: 500; color:var(--color-text); opacity: .8;}
h5 {font-size: clamp(1rem, 2.5vw, 1.1rem);  font-weight: 600; color:var(--color-text); opacity: .8;}
h6 {font-size: clamp(0.9rem, 2vw, 1rem); font-weight: 600; color:var(--color-text); opacity: .8;}

/********************************************
***************** 8 VIEW ********************
********************************************/

.view-gallery{
  position: relative;
}

.view-gallery .views-row{
  margin: 10px 0;
}

.view-gallery img{
  max-width: 100%;
  height: 290px;
  object-fit: cover;
}

.view-gallery .title-gallery{
  background-color: var(--color-text);
  text-align: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.view-gallery .title-gallery a{
  font-weight: bold;
  color: var(--color-bg);
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  width: 90%;
  margin: 0 5%;
}

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

.view-documentals{
  position: relative;
}

.view-documentals .row > div{
  margin: 2em 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px dashed var(--color-text);
  padding-bottom: 4rem;
}

.view-documentals .row > div:last-child{
  border-bottom: none;
}

.view-documentals .row .views-field-title{
  width: 100%;
  margin-bottom: 1rem;
}

.view-documentals .row .views-field-title h2{
  font-size: 1.5rem !important;
}

.view-documentals .row .views-field-title h2::before{ 
  content: "Documental ";
}

.view-documentals .row .views-field-field-ct-video{
  width: 48%;
}

.view-documentals .row .views-field-body{
  font-size: 1.1rem;
  width: 48%;
  align-self: center;
}

.view-documentals .row .views-field-field-ct-edition{
  width: 100%;
  text-align: right;
  font-weight: bold;
  color: var(--color-text);
  margin-top: -30px;
}

/**********************************************************************/
.view-videos{
  position: relative;
}

.view-videos .views-row{
  margin: 2rem 0;
}

.view-videos .views-field-title{
  background-color: var(--color-text);
  text-align: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.view-videos .views-field-title span{
  font-weight: bold;
  color: var(--color-bg);
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  width: 90%;
  margin: 0 5%;
}

.view-videos .views-field-field-ct-edition{
  text-align: center;
  font-weight: bold;
  color: var(--color-text);
  margin-top: 10px;
}

/**********************************************************************/
.view-retos{
  position: relative;
}

.view-retos .views-row{
  margin: 2rem 0;
}

.view-retos .views-field-title{
  background-color: var(--color-text);
  text-align: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.view-retos .views-field-title span{
  font-weight: bold;
  color: var(--color-bg);
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  width: 90%;
  margin: 0 5%;
}

.view-retos .views-field-field-ct-iframe .field-content {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  padding-top: 56.25%;
  overflow: hidden;
}

.view-retos .views-field-field-ct-iframe .field-content iframe{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

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

.musica-del-parque-a-la-casa{
  position: relative;
}

.musica-del-parque-a-la-casa .views-row{
  margin: 2rem 0;
}

.musica-del-parque-a-la-casa .views-field-title{
  background-color: var(--color-text);
  text-align: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.musica-del-parque-a-la-casa .views-field-title span{
  font-weight: bold;
  color: var(--color-bg);
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  width: 90%;
  margin: 0 5%;
}

.musica-del-parque-a-la-casa .views-field-field-ct-iframe .field-content {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  padding-top: 56.25%;
  overflow: hidden;
}

.musica-del-parque-a-la-casa .views-field-field-ct-iframe .field-content iframe{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/**********************************************************************/
.view-memories{
  position: relative;
}

.view-memories header{
  font-size: 1.1rem;
  margin-bottom: 4rem;
}

.view-memories .row .views-row{
  margin: 1rem 0;
}

.view-memories .memory-overlay{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-text);
}


.view-memories .memory-overlay .memory-year{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.8);
  opacity: 0;
  transition: 0.4s all;
}

.view-memories .memory-overlay .memory-year a{
  width: 100%;
  height: 100%;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-memories .memory-overlay .memory-year a h2{
  color: var(--color-text);
  font-weight: bold;
}

.view-memories .memory-overlay:hover > .memory-year{
  opacity: 1;
  top: 0%;
}
/*************************************************************************/
/********** view anuncio artistas *******/

/**********************************************************************/
#block-views-block-anuncio-artistas-block-1 > h3{
  color: var(--color-header);
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}

.anuncio-artistas{
  position: relative;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 14px;
}

.anuncio-artistas header{
  font-size: 1.1rem;
  font-weight: 300;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--color-header);
}

.anuncio-artistas .row { justify-content: center; }

.anuncio-artistas.row .views-row{
  margin: 1rem 0;
}

.anuncio-artistas .memory-overlay{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-text);
  margin: 1rem auto;
}

.anuncio-artistas .memory-overlay img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.anuncio-artistas .memory-overlay .memory-year{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.8);
  opacity: 0;
  transition: 0.4s all;
  text-align: center;
}

.anuncio-artistas .memory-overlay .memory-year a{
  width: 100%;
  height: 100%;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.anuncio-artistas .memory-overlay .memory-year a h2{
  color: var(--color-text);
  font-weight: bold;
}

.anuncio-artistas .memory-overlay:hover > .memory-year{
  opacity: 1;
  top: 0%;
}


/*************************************************************************/
/********** view noticias ***********/

.artb1-img img {
  width: 100%;
  height: auto;
}

.artb1-tit h2 a {
  font-family: var(--text1-2022);
  color: white;
  text-transform: uppercase;
}

.artb1-tit h2  {
  font-size: 2rem;
  line-height: 1;
}


.artb1-tit h2 a:hover {
  color: white;
  opacity: .8;
  text-decoration: none;  
}

  .artb1-img {
  border:1px solid var(--color-text)
}

.artb1-txt p {
  line-height: 1.3;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
  color: var(--color-text);
}

.groupspt {
  margin-top: 10rem !important;
  display: flow-root;
}  

.mb-7 {
  margin-bottom: 7rem !important;
}


.artint .artb1-tit h2 a {
  font-family: unset;
  color: var(--color-text);
  text-transform: unset;
}

.artint .artb1-tit h2  {
  font-family: unset;
  color: var(--color-text);
  text-transform: unset;
  font-size: 1.6rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.artint  .artb1-txt p {
  line-height: 1.3;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
  color: var(--color-header);
}

.art-img img, .artb1-img img {
  filter: sepia(1);
  transition: ease .5s;
}

.art-img img:hover, .artbox1:hover  .artb1-img img  {
  filter: none;
  
}

.art-img {
  padding:0;
  
}
.art-img .mile-field-custom {
  margin-bottom:0;
  margin-top:0
}

.border-1:before {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: .6rem solid var(--color3-2022);
}

.art-img:hover img  {
  filter:none
}

.head01 {
  background-image: url(/sites/default/files/img03.png), url(/sites/default/files/img07.png);
  background-position: right bottom, left bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: contain;
}

.titart {
  display: flex;
  justify-content: center;
  margin-top: -37px;
  z-index: 3;
}

.titart .mile-field-custom {
  margin: 0;
}

.titart h1, .titart h2 {
  margin: 0;
  color: var(--color6-2022);
  font-size: 3.5rem;
}

.bodyart3 {
  text-align: center;
  font-family: var(--text1-2022);
  text-transform: uppercase;
  letter-spacing: .8rem;
  margin-top: -1.7rem;
}

.bodyart2 {
  font-size: 1.2rem;
  text-align: center;
}

.bodyart2 .social-link-field a {
  color: var(--color6-2022);
  font-size: 3rem;
}


/********************************************
************* ROCK AL PARQUE 2022 *********
********************************************/

.max-1140 {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.date2022 {
  color: var(--color-text);
      text-transform: uppercase;
      opacity: .4;
      font-size: 1.2rem;
      letter-spacing: 5px;
      margin-bottom: 5rem;
  }

  .art-list ul{

    flex-wrap: wrap;
        list-style: none;
        justify-content: center;
    }
    
    .art-list li {
      font-size:2rem;
      padding:.5rem 1rem
    }
    
    .art-list li:before {
     content:"* ";
     color:var(--color-header);
    }
    
    .art-list li:after {
     content:" *";
     color:var(--color-header);
    }
    
    .max-1260 {
    max-width:1260px;
    margin-left:auto;
    margin-right:auto;
    }

    .node-152 .block-mile-theme-page-title {
      display:none;
      }

      .art-list h1 {
        text-transform: uppercase;
        color: white;
        letter-spacing: 6px;
        font-size: 1.5rem;
        margin-bottom: 3rem !important;
      }
      
      .art-list p {
        font-size:1.5rem;
        color:white;
        margin-top:4rem
      }

      #block-bandasdistritaleshome {
        margin-top: 7rem;
        margin-bottom: 7rem;
      }

      .class2022 h1 {
        font-size: 2.5rem;
        color: var(--color-text);
      }

      .class2022 h2 {
        font-size: 1.7rem;
        margin-top: 2rem;
        color:var(--color-text)
      }

      .class2022 p,
      .class2022 li,
      .class2022 ul,
      .class2022 a {
        font-size: 1.2rem;
      }
      
      .node-219 .block-mile-theme-page-title {
        display: none;
      }

      .button {
        display: flex;
        justify-content: center;
      }

      .button .btn {
        border: 1px solid;
        font-size: 1.5rem;
        transition: ease .5s;
      }

      .button .btn:hover {
        color:var(--color-bg);
        background-color: var(--color-text);
      }

      .max-1240 {
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
      } 

      .evbta23 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
        gap: 4.5rem;
        font-family: var(--text2-2023);
        color: var(--color5-2023);
      }
      
      .boxev1 {
        border: 1px solid var(--color-text);
        background-color: var(--color-bg);
        text-align: center;
      }
      
      .titev1 {
        color: var(--color-text); 
        font-size: 2.2rem;
        font-family: var(--text1-2023);
      }
      
      .descev1 {
        font-weight: 200;
      }
      
      .dateev1 {
      font-size: 1.5rem;
      color: white;
      text-transform: uppercase;
      font-weight: 800;
      }

      hr {
        border-top: 1px solid rgb(195 255 165 / 32%);
    }
      
      
     
      
      
  /********** VISTA ANUNCIO HOME 2023 ***************/

.view-art2023 .row {
  justify-content: center;
  }
  
  .view-art2023 .row .art01 {
    background-color: var(--color-text);
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 1.5rem;
    align-items: center;
    transition:0.5s ease
  }
  
  .view-art2023 .views-row:hover .art01{
    background-color: var(--color-header);
  }
    
  .view-art2023 .views-row {
    margin: 1rem;
  }
  
  .view-art2023 .title-list {
    margin-right: 5px;
      text-transform: uppercase;
  }
  
  .view-art2023 .proc-list {
    opacity: .4;
    font-size: 1rem;
  }
  
  .view-art2023 header h2{
    color: var(--color-header);
    margin-bottom: 2rem;
  }

  .no-link{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background-size: 100%;
    background-repeat: no-repeat;
  
  }
  .no-link a{
    display: block;
    text-indent: -99999px;
    width: 100%;
    height: 100%;
    top: 0;
  }


  .but-prog-home a {
    background: none;
    border:2px solid;
    padding:.5rem 2rem;
    font-size: 1.8rem;
    text-transform:uppercase;
    letter-spacing:5px;
    transition:ease .5s;
    border-radius:40px
  }
  
  .but-prog-home a:hover {
    background: var(--color-text);
    color:var(--color-bg);
    text-decoration:none;
   
  }
  
  




/********** FINAL VISTA ANUNCIO HOME 2023 ***************/
  





/********************************************
************ 8 MEDIA QUERIES ****************
********************************************/

@media (max-width: 576px) {
  header .content-header #block-mile-theme-branding { left: 0px; width: 100%; display: flex; justify-content: center; }
  header .content-header #block-mile-theme-branding img { width: 70%; height: auto !important;  margin-left: 0%; margin-top: 15px; }
  footer .content-footer .social-networks .img-festival{ width: 68px; }
  footer .content-footer  .logos-festivals > a > div.img-festival{ width: 68px; margin: 0 0.2rem; }
  .overlay-main-menu a {font-size: 20px}
  .overlay-main-menu .closebtn { font-size: 40px; top: 15px; right: 35px; } 
  #block-playerspotify { margin: 1rem 0 1rem 0;}
  #block-countdowntimer{ transform: scale(0.7); }
}

@media (max-width: 768px) {
  /* node--type-ct-memory */
  .node--type-ct-memory  [class^="mile-node"] > div:nth-child(1){ width: 100%; text-align: center; }
  .node--type-ct-memory  [class^="mile-node"] > div:nth-child(2){ width: 100%; margin-top: -2em;}
  
  /**/
  .mile-node-25 > div:nth-child(1){ width: 100% !important; }
  .mile-node-25 > div:nth-child(2){ width: 100% !important; }

  /* mile-node-6 */
  .mile-node-6{ display: block !important; }
  .mile-node-6 > div:nth-child(4){ margin-top: 10px !important; }

  /* view-documentals */
  .view-documentals .row .views-field-field-ct-video{ width: 100% !important;}
  .view-documentals .row .views-field-body{ width: 100% !important; margin-top: 1.5rem;}

  #block-pick img{ position: relative; width: 100px; left: 0px; top: 0px; display: block; margin: 0 auto; } 

  /********************************************
************* movil ROCK AL PARQUE 2022 *********
********************************************/

  .node-152 .block-mile-theme-content {
    padding: 0rem 1rem 1rem 1rem;
  }

.art-list ul {
    padding-left: 0;
}

.art-list li {
    font-size: 1rem;
    padding: 0.3rem 0.2rem;
    text-align: center;
}

.art-list h1 {
    letter-spacing: 3px;
    font-size: 1.2rem;
    margin-bottom: 3rem !important;
}

.art-list p {
    font-size: 1.2rem;
      margin-top: 3rem;
}

.class2022 h1 {
  font-size: 2rem;
  color: var(--color-text);
}

.class2022 h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  color:var(--color-text)
}

.class2022 p,
.class2022 li,
.class2022 ul,
.class2022 a {
  font-size: 1rem;
}

.but-prog-home a {
  font-size: 1rem;
}

.view-art2023 .row .art01 {
  padding: 0.3rem 0.5rem;
  font-size: .8rem;
}

.view-art2023 .proc-list {
  font-size: .6rem;
}

.view-art2023 .views-row {
  margin: 0.5rem;
}

.view-art2023 header h2 {
 font-size: 1.5rem;
}

.dateev1 {
  font-size: 1rem;
}

.titev1 {
  font-size: 1.3rem;
} 

.evbta23 {
  gap: 1.5rem;
}

.node-419 .block-mile-theme-page-title h1 {
  font-size: 1.7rem;
}


  /********************************************
************* CIERRE MOVIL  ROCK AL PARQUE 2022 *********
********************************************/

 /***************** MODIFICACIONES MENU SUPERIO MOVIL - APLICABLE A TODAS LAS DE FESTIVALES ************/

 header .content-header {
  height: 60px;
  padding: 0;
}
.mile-container > header {
position: fixed;
z-index: 10;
padding: .5rem 1rem;
}


.mile-container header .row {
margin-right: 0 !important;
margin-left: 0 !important;
}

header .content-header #block-mile-theme-branding {
justify-content: space-between;
height: 100%;
}

header .content-header #block-mile-theme-branding img {
width: auto;
margin-left: 0%;
margin-top: 0;
height: 100% !important;
}

.container-highlighted {
padding: 77px 0 0 !important;
}

#block-pick-2 {
padding: 1.5rem 0 0;
}


#block-pick-2 .mile-field-custom {
margin:0 !important
}



/***************** CIERRE MODIFICACIONES MENU SUPERIO MOVIL - APLICABLE A TODAS LAS DE FESTIVALES ************/

/***************** MODIFICACIONES EN MOVIL APLICABLES A TODOS LOS SITIOS **********************/

footer .content-subfooter .copyright p {
font-size: 0.6rem;
}

footer .content-subfooter .copyright img {
width: 77% !important;
margin-top: 7px !important;
margin-bottom: 16px !important;
}

footer .content-footer .contact-info {
 font-size: 0.7rem;
}

.artb1-txt {
display: none;
}

.artint .artb1-tit h2 {
font-size: 1.3rem;
-webkit-line-clamp: 6 !important;
line-height: 1.3;
}

.artint .artbox1 {
padding: 0 1rem;
}
.artrow {
margin-bottom: 2rem !important;
}
.artbox1 {
margin-bottom: 1.5rem;
}

.mile-breadcrumb ol a {
font-size: .7rem !important;
}

.artint {
overflow: hidden; 
}

#block-pick {
padding: 1.5rem 0 0;
}

#block-pick .mile-field-custom {
margin: 0 !important;
}

.overlay-main-menu .logo-festival {
margin-top: 40px;
margin-bottom: 0px;
}

.overlay-main-menu .overlay-content {

margin-top: 0px;
}




/***************** CIERRE MODIFICACIONES APLICABLES A TODOS LOS SITIOS **********************/

}

@media (max-width: 1023px) {

  .mile-node-25 > div:nth-child(1) { width: 65%; }
  .mile-node-25 > div:nth-child(2){ width: 32%;  }

  footer .content-footer-frontpage{ flex-direction: column !important; align-items: center !important; }
  footer .content-footer-frontpage #block-credits{ text-align: center; }
  footer .content-footer{ flex-direction: column !important; align-items: center !important; padding: 0 2rem; }
  footer .content-footer .logos-festivals {margin-bottom: 2rem; order: 1 !important; -webkit-order: 1 !important;}
  footer .content-footer #block-newsletter { margin: 1rem 0 !important; order: 2 !important; -webkit-order: 2 !important; }
  /* footer .content-footer #block-webform { margin: 1rem 0 !important; order: 2 !important; -webkit-order: 2 !important; } */
  footer .content-footer .social-networks{ margin-bottom: 2rem !important; order: 3;-webkit-order: 3; }
  footer .content-footer .contact-info{ order: 4; -webkit-order: 4; text-align: center;}
  footer .content-subfooter .copyright img{ width: 100%; margin-top: 15px !important; margin-bottom: 40px !important; }
}


@media (max-width: 1160px) {
  footer .content-footer .logos-festivals { flex-wrap: wrap; justify-content: center;}
}

@media (max-width:1368px) {
 
.overlay-main-menu .logo-festival {
margin-top: 40px;
margin-bottom: 10px;
}

.overlay-main-menu .overlay-content {
top: 3%;
margin-top: 10px;
}

.overlay-main-menu a {
  font-size: 18px;
  line-height: 1.2;
}


  
}