// FONTS
$font-standard: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap');
//font-family: 'Raleway', sans-serif;

@font-face {
    font-family: seatbcn-black;
    src: url(https://elpuig.xeill.net/custom/font/seat_bcn_black.ttf);
}
@font-face {
    font-family: seatbcn-black-local;
    src: url(../font/SEAT_BCN_Black.ttf);
}
/*
@font-face {
    font-family: seatbcn-bold;
    src: url(../font/SEAT_BCN_Bold.ttf);
}
@font-face {
    font-family: seatbcn-medium;
    src: url(../font/SEAT_BCN_Medium.ttf);
}
*/


// COLORES
$pri1: #970A2C;
$pri2: #D26B6B;
$pri3: #890000;
$pri4: #B40101;
$pri5: #5C0000;
$pri6: #caa0aa;

$sec1: #EF902A;
$sec2: #FFA700;
$sec3: #FFC383;
$sec4: #FBBA00;
$sec5: #FFEBBD;
$sec6: #FB8200;
$sec7: #FB8200;

$ter1: #676766;
$ter2: #8D8D8D;
$ter3: #F5F5F5;
$ter4: #BBBBBB;
$ter5: #E8E8E8;
$ter6: #969696;

$alt1: #6734BA;
$alt2: #9D1CB2;
$alt3: #DA125F;
$alt4: #F6412D;
$alt5: #FF5606;
$alt6: #FF9800;
$alt7: #aacfa8;

$oscuro: #2F2F2F;
$oscuro-texto: rgba(0,0,0,.87);
$oscuro2-texto: rgba(0, 0, 0, 0.7);

// VARIABLES

.bg-primario{
    background-color: $pri1 !important;
}
.color-white{
    color: white !important;
}

.pri1{ background-color: $pri1 !important;}
.pri2{ background-color: $pri2 !important;}
.pri3{ background-color: $pri3 !important;}
.pri4{ background-color: $pri4 !important;}
.pri5{ background-color: $pri5 !important;}
.pri6{ background-color: $pri6 !important;}

.sec1{ background-color: $sec1 !important;}
.sec2{ background-color: $sec2 !important;}
.sec3{ background-color: $sec3 !important;}
.sec4{ background-color: $sec4 !important;}
.sec5{ background-color: $sec5 !important;}
.sec6{ background-color: $sec6 !important;}
.sec7{ background-color: $sec7 !important;}

.ter1{ background-color: $ter1 !important;}
.ter2{ background-color: $ter2 !important;}
.ter3{ background-color: $ter3 !important;}
.ter4{ background-color: $ter4 !important;}
.ter5{ background-color: $ter5 !important;}
.ter6{ background-color: $ter6 !important;}

.alt1{ background-color: $alt1 !important;}
.alt2{ background-color: $alt2 !important;}
.alt3{ background-color: $alt3 !important;}
.alt4{ background-color: $alt4 !important;}
.alt5{ background-color: $alt5 !important;}
.alt6{ background-color: $alt6 !important;}
.alt7{ background-color: $alt7 !important;}


// SOMBRAS
$sombra-box1: 0 -1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
$sombra-box2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
$sombra-box3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
$sombra-box4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
$sombra-box5: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
$sombra-menu-banner: 0px 2px 5px 0px rgba(43, 43, 43, 0.75);

$sombra-text1: 1px 1px 5px #000000;

// TRANSICIONES
$tr-sombra: all 0.3s cubic-bezier(.25,.8,.25,1);
$tr-estandar: all 300ms ease;

// UTILIDADES
$b: 1px solid red;

// RESPONSIVE: Bootstrap Breakpoints

$bp-xs: 0;         // Extra small screen / phone
$bp-sm: 576px;     // Small screen / phone
$bp-md: 768px;     // Medium screen / tablet
$bp-lg: 992px;     // Large screen / desktop
$bp-xl: 1200px;    // Extra large screen / wide desktop
$bp-xxl: 1600px;    // Extra large screen / wide desktop

// FIN VARIABLES


// MODIFICACIONES PLONE ********************************************

// GENERICO
*{
    scroll-behavior: smooth;
}

html {
    font-size: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    //scroll-behavior: smooth;
}
body {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: $oscuro-texto;
    background-color: #FFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a {
    //color: #007bb1;
    color: $sec1;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    border-bottom: none !important;
    transition: $tr-estandar;
    word-break: break-word;

    &:hover,
    &:focus{
        //color: #004665;
        color: $pri1;
        text-decoration: none;
    }
    &:focus{
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
        //outline: thin dotted;
        outline: none !important; // Evitamos que se vea el outline por defecto del navegador, que es feo y no se adapta al diseño. En su lugar, aplicamos un box-shadow en el hover para indicar el foco, pero perdemos accesibilidad
    }
}


// H1...H6 

.documentFirstHeading{
    padding-bottom: 9px;
    margin: 0 0 10px;
    border-bottom: 1px solid $sec1;
}

h1, h2, h3{
    > a{
        font-size: inherit;
        &:hover,
        &:focus{
            text-decoration: none;
            border-bottom: none !important;
        }
    }
    > .button{
        box-shadow: $sombra-box1 !important;
        background-color: $ter3 !important;
        &:hover{
            background-color: $ter5 !important;
            box-shadow: $sombra-box2 !important;
        }
        &:active{
            background-color: $sec1 !important;
            > a{
                color: white;
            }
        }
        > a{
            font-size: .8rem;
            color: $oscuro-texto;
            transition: none;
        }
    }
}

h1, h2, h3, h4, h5, h6{
    
    &:target:before {
        content: "";
        display: block;
        height: 70px;
        margin: -70px 0 0;
    }

}

label {
    display: inline-block;
    max-width: 95%;
    vertical-align: top;
    margin-bottom: 6px;
    font-weight: 300;
}

// LOGO

#portal-logo {
    float: left;

    > img{
        @media screen and (max-width: 556px) {
            width: 100%;
        }
    }
    
}

// IDENTIFICACION

#portal-anontools{

    >ul{
        >li{
            >a{
                font-size: .9rem;
                line-height: 2rem;
                font-weight: 500;
                color: $ter1;

                &:hover{
                    color: $sec1;
                }
                > span{
                    font-size: 1.1rem;
                    margin-left: 3px;
                    float:right;
                    line-height: 1.9rem;
                }
            }       
        }
    }
}

input#buttons-login{
    background-color: $pri1;
    border-color: $pri5;
    box-shadow: $sombra-box1;

    &:hover{
        background-color: $sec1;
        border-color: $sec6;
        box-shadow: $sombra-box4;
    }
    &:active{
        background-color: $pri1;
        border-color: $pri5;
    }
}

// SEARCHBOX
@media (min-width: 768px){
    
    #portal-searchbox [type="text"] {
        width: 18rem;
    }
}

// BREADCRUMBS

.plone-breadcrumb {

    ol{
        max-width: 100%;
        overflow-x: hidden;

        a{
            //color: #086ca3;
            color: $ter2;
            font-size: .9rem;
            
            
            &:hover{
                color: $sec1;
            }
        }

        #breadcrumbs-current {
            color: $ter1;
            font-size: .9rem;
            
            white-space:nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
/**/
// MENU 

.plone-navbar{
    background-color: $pri1;
    color: $sec1;
    position: relative;
    font-weight: 500;
    min-height: 50px;
    margin-bottom: 20px;
    box-shadow: $sombra-box2;
}
.plone-nav li a {
    font-size: 1rem;
    background-color: $pri1;
    color: $ter3;
    border-top: 3px solid $pri1 !important;
    border-bottom: 3px solid $pri1 !important;
    margin-top: 0px;
    margin-bottom: 0px;
    text-shadow: $sombra-text1;
}
.plone-nav li a:hover,
.plone-nav li a:focus{
  text-decoration: none;
  background-color: transparent;
  border-bottom-color: $sec1 !important;
  color: $sec1;
}

// MENU COLLAPSE

button.plone-navbar-toggle{
    z-index: 1;
    position: relative;
    float: right;
    margin-top: 8px;
    margin-bottom: 6px;
    padding: 6px 10px;
    background-color: transparent;
    background-image: none;
    border: 1px solid $pri5;
    border-radius: 4px;
    box-shadow: 0px 2px 5px 0px rgba(43, 43, 43, 0.75);
    

    .icon-bar{
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background: $ter3;
        margin-top: 2px;
    }
    .icon-bar + .icon-bar{
        margin-top: 5px;
    }
    .icon-bar + .icon-bar + .icon-bar{
        margin-bottom: 3px;
    }
}

.plone-navbar-toggle:focus{
    outline: 0;
    background-color: $pri5;
    border-color: $pri5;
}
.plone-navbar-toggle:hover{
    background-color: $pri5;
}

.plone-navbar-toggle .icon-bar::after{
    content: "";
    position: relative;
    color: white;
}
.plone-navbar-toggle .icon-bar + .icon-bar::after {
    content: "";
}


.plone-navbar-nav {
    margin: 0 -15px 0;
}
.plone-navbar-nav > li > a {
    line-height: 20px;
}
.plone-navbar-nav .current > a,
.plone-navbar-nav .selected > a{
    color: $ter3;
    background-color: transparent;
    border-bottom-color: $sec1 !important;
    text-shadow: $sombra-text1;
}

.plone-navbar-nav .current > a:hover,
.plone-navbar-nav .selected > a:hover,
.plone-navbar-nav .current > a:focus,
.plone-navbar-nav .selected > a:focus {
  color: $sec1;
  background-color: transparent;
  border-bottom-color: $sec1 !important;
  text-shadow: $sombra-text1;
}

a.link-category:hover, a.link-category:focus {
    color: $pri1;
}

// MODIFICACIONES SEMANTIC UI ********************************************

.ui.message{
    align-items: stretch !important;

    >.icon.list {
        margin-right: .6em;
    }

    > i.fas, > i.far{
        margin-right: .6em;
        opacity: 80%;
        &.disabled{
            opacity: 50%;
        }
    }
    > i.stroke{
        -webkit-text-stroke-color: black;
    }
}

.ui.list.selection.estandar{
    >div.item{
        transition: $tr-estandar;
        border-left: 1px solid transparent;
        border-radius: 2px;
        &:hover{
            border-left: 1px solid $sec1;
            box-shadow: $sombra-box1;

            >div.content > a{
                color: $sec1 !important;
            }
        }
        >div.content > a{
            color: $oscuro-texto !important;
            > span{
                font-weight: 400;
            }
        }
    }
    &.personas > div.item > div.content >{
        span{
            color: $ter6;
            font-size: .9rem;
            > i{
                color: $oscuro-texto;
            }
        }
    }
}

.stroke{
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    &.px2{ -webkit-text-stroke-width: 2px; }
    &.px3{ -webkit-text-stroke-width: 3px; }
    &.black{ -webkit-text-stroke-color: black;}
    &.white{ -webkit-text-stroke-color: white;}
}

// BREAKPOINT CUSTOM

// Ocultamos menu tambien en bp-sm=576px
@media (min-width: $bp-sm){
    
    .plone-navbar-header {
        float: none;
    }

    .plone-navbar-toggle {
        display: block;
        float: right;
    }

    .plone-navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }
    .plone-navbar-collapse.plone-collapse {
        display: none !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .plone-navbar-collapse.in {
        overflow-y: visible;
        display: block !important;
        overflow-x: visible;
        padding-right: 15px;
        padding-left: 15px;
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    .navbar-fixed-top .plone-navbar-collapse,
    .navbar-static-top .plone-navbar-collapse,
    .navbar-fixed-bottom .plone-navbar-collapse {
        padding-left: 0;
        padding-right: 0;
    }
    .plone-navbar-nav {
        float: left;
        
        > li{
            float: left;

            > a{
                padding-top: 15px;
                padding-bottom: 15px;
            }
        }
    }
}

// Mostramos menu a partir de bp-xl=1200px
@media (min-width: $bp-xl){
    
    .plone-navbar-header {
        float: left;
    }

    .plone-navbar-toggle {
        display: none;
    }

    .plone-navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }
    .plone-navbar-collapse.plone-collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .plone-navbar-collapse.in {
        overflow-y: visible;
    }
    .navbar-fixed-top .plone-navbar-collapse,
    .navbar-static-top .plone-navbar-collapse,
    .navbar-fixed-bottom .plone-navbar-collapse {
        padding-left: 0;
        padding-right: 0;
    }
    .plone-navbar-nav {
        float: left;
        
        > li{
            float: left;

            > a{
                padding-top: 15px;
                padding-bottom: 15px;
            }
        }
    }
}

// STIKY MENU

div#mainnavigation-wrapper{
    position: sticky;
    top: -1px; // truqui para detectar cabio en js
    width: 100%;

    div.plone-navbar-header{
    
        > a#minilogo img{
            height: 0;
            opacity: 0;
            transition: $tr-estandar;
        }
    }

    &.sticky {
        z-index: 99;

        div.plone-navbar-header{
            
            > a#minilogo{
                margin-right: 15px;
                > img{
                    opacity: 1;
                    height: 35px;
                    margin: 7px 15px 0 0;
                }
            }
        }
    }
}

// LATERAL IZQUIERDO (TREE)

.portletNavigationTree .portletContent > ul > li a:hover {
    text-decoration: none;
    background: #f6f6f9;
    //color: #64bee8;
    color: $sec1;
}
.portletNavigationTree .portletContent > ul > li a:active,
.portletNavigationTree .portletContent > ul > li a:active::before {
    color: $pri1;
}
.portletNavigationTree .portletContent > ul > li a::before {
    transition: $tr-estandar;
    color: $ter1;
}
.portletNavigationTree .portletContent > ul > li a:hover::before{
    color: $sec1;
}
.portletNavigationTree .portletContent > ul > li a:active::before{
    color: $pri1;
}

.portletNavigationTree .portletContent .navTreeCurrentNode > a,
.portletNavigationTree .portletContent .navTreeCurrentNode > a::before {
    background: #f6f6f9;
    //color: #696969;
    color: $sec1;
}

// LATERAL DERECHO

.portlet .portletHeader{
    
    font-size: 1rem;

    > a {
        //color: #086ca3;
        color: $ter1;
        &:hover{
            color: $sec1;
        }
    }
}

.portlet .portletContent > ul > li a,
.portlet .portletContent > p > a {
    color: $ter1;
    font-weight: 400;

    &:hover{
        color: $sec1;
    }
    &:active{
        color: $pri1;
    }
}

.portlet .portletFooter a{
    color: $ter1;
    &:hover{
        color: $sec1;
    }
}

.portlet.portletCalendar table .cal_has_events a:hover::after {
    //color: #64bee8;
    color: $sec1;
}

.portlet .portletContent > ul .portletItemDetails {
    display: block;
    z-index: 0;
    padding: 0 15px 10px 15px;
    font-weight: 300;
    position: relative;
    margin-top: -26px;
    font-size: 0.8rem;
    color: $ter2;
}

// FOOTER

#portal-footer-wrapper h2 a{
    color: $ter3;
    font-size: 1.9rem;
}
#portal-footer-wrapper p,
#portal-footer-wrapper a {
    font-size: 0.9rem;
    //color: #16a1e3;
    font-weight: 300;
    color: $ter2;
}
#portal-footer-wrapper a:hover {
    //color: #57beef;
    color: $sec4;
    text-decoration: none;
    border:none;
}

#portal-footer-wrapper div{
    font-size: 0.8rem;
    color: $ter2;
}

p.redesSociales{

    >a{
        display: inline-block; 
        margin-right: 1rem;
        line-height: 2.5rem;
        //background-image: url("./redes-sociales-elpuig.png"); 
        background-position-x: 0;

        > img{
            width: 1.5rem;
            filter: grayscale(100%);
        }

        &:hover img{
            filter: grayscale(0);
            //animation: pulse 300ms infinite alternate;
            transition: $tr-estandar;
        }
    }
}

// LOGGED ZONE  (PLONE: logged-in.css)

#edit-zone{

    z-index: 100;

    .plone-toolbar-logo {
        background-color: $pri1;
    
        &:after{
            border-top: 4px solid $pri1;
        }
    
        &:hover, &:focus{
            background: $sec6;
            &:after{
                border-top: 4px solid $sec6;
            }
        }
    }

    nav{

        >ul{

            a{
                text-shadow: $sombra-text1;
                font-size: 12px;
                font-weight: 400;
            
                &:hover, &:focus{
                    background: $pri1 !important;
                    span{
                        background: $pri1 !important;
                    }
                }

                &:active{

                    span{
                        background: $sec6 !important;
                    }
                }

                >span+span{
                    background-color: $sec6;
                }
            }

            li.active{
                >a{
                    background: $pri1;

                    &.label-state-published,
                    &.label-state-external{
                        background: $sec6;
                        span{
                            background: $sec6;
                        }
                    }
                }
            }
        }
        > ul#personal-bar-container{
            
            ul li.user-action{
                a{
                    font-size: .9rem !important;

                    &:active{
                        background-color: $sec6 !important;
                    }
                }
            } 
        }
    }
}


#edit-zone nav>ul>li.active>a.label-state-published, 
#edit-zone nav>ul>li.active>a.label-state-external {
    //background: $sec6;
}

// Selector de imagen del editor de texto
.pattern-relateditems-item-title, .pattern-relateditems-result-title {
    font-size: 1rem;
}

.pattern-relateditems-item-title[class*="contenttype-"]::before, 
.pattern-relateditems-result-title[class*="contenttype-"]::before {
    font-size: 1.1rem;
}

// PAGINATION

nav.pagination{

    ul{
        box-shadow: $sombra-box1;
        li{
            &.active > span{
                background-color: $sec1;
                border: 1px solid $sec1 !important;
            }
            > a, 
            >span{
                color: $ter1;
            }
            >a:hover, >a:focus{
                color: $sec1;
            }
        }
    }
}

.vevent span.cal_month {
    background: $pri1;
}

// FIN MODIFICACIONES PLONE ********************************************


// FLICKITY MODIFICACIONES

.flickity-enabled.is-fullscreen{
    z-index: 99;
}

.flickity-button:focus {
    outline: none;
    box-shadow: 0 0 0 5px $sec1;
    border-color: $sec1;
}

// ESTILO CUSTOM *******************************************************

// MIXINS

@mixin circuloBase($size: 90px, $border:4px) {
    border-radius: 50%;
    border: $border solid $pri1;
    border-top: $border solid $sec1;
    border-left: $border solid $sec1;
    width: $size !important;
    height: $size !important;
    min-height: $size !important;
}
@mixin loader($size: 90px, $border:4px) {
    border-radius: 50%;
    border: $border solid $pri1;
    border-top: $border solid $sec1;
    border-right: $border solid $sec1;
    width: $size !important;
    height: $size !important;
    min-height: $size !important;
    //-webkit-animation: spin 1.5s linear infinite; /* Safari */
    animation: spin 1.2s linear infinite;
}

// EXTENDS

%flexbox-row-wrap{
    display: flex; 
    flex-flow: row wrap; 
}
%flexbox-row-wrap-stretch-evenly{
    @extend %flexbox-row-wrap;
    align-items: stretch; 
    align-content: stretch; 
    justify-content: space-evenly; 
}
%flexbox-row-nowrap-start{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
%flexbox-row-nowrap-start-center{
    @extend %flexbox-row-nowrap-start;
    align-items: center; 
}

%cajon-header{
    @extend %flexbox-row-nowrap-start-center;
    cursor: pointer;
    border: 2px solid $sec1;
    background-color: $ter3;
    border-radius: 2px 2px 0 0;
    box-shadow: $sombra-box1;
    transition: all 1s ease;

    &:hover{
        box-shadow: $sombra-box4;
    }

    >span:first-of-type{
        align-self: stretch;
        font-size: 2.5em;
        padding: 10px 15px 15px 15px;
        background-color: $sec1;
        color: white;
        text-shadow: $sombra-text1;
    }
    >span:nth-of-type(2){
        font-size: 1.3rem;
        font-weight: 400;
        padding: 5px 10px 5px 20px;
    }
    >span:nth-of-type(3){
        font-size: 2rem;
        font-weight: 400;
        padding: 5px 10px;
        margin-left: auto;
    }
}

%gradient-primario{
    background: rgb(151,10,44);
    background: linear-gradient(150deg, rgba(151,10,44,1) 36%, rgba(251,130,0,1) 100%);
    //background: radial-gradient(circle, rgba(151,10,44,1) 36%, rgba(251,130,0,1) 100%);
}
%gradient-primario-text{
    @extend %gradient-primario;
    -webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

// ANIMACIONES

@keyframes pulse {
    0% {transform: translateY(0px)}  
    100% {transform: translateY(-5px)}  
}

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

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

@keyframes rotateLeftRight {
    0% { transform: rotate(-5deg);}
    50% { transform: rotate(5deg);}
    100% { transform: rotate(-5deg);}
}


// TITULOS DE SECCION

h1.titulo-seccion, h2.titulo-seccion, h3.titulo-seccion{
    padding-bottom: 9px; 
    border-bottom: 1px solid $sec1;
    > i.stroke{
        -webkit-text-stroke-color: black;
    }
}

// CUSTOM

.float-right{
    float:right;
}
.float-left{
    float:left;
}

// MENU BANNER
%flexbox-subbaner{
    @extend %flexbox-row-wrap-stretch-evenly;
    background-color: $pri1; 
    margin: 0px auto; 
    border-bottom: 8px solid $sec1; 
    box-shadow: $sombra-menu-banner;
    margin-bottom: 5px;

    > a{
        flex: 1 1 100%;
        background-color: $pri1; 
        text-align: center; 
        margin: 0;

        display: block; 
        height: 100%;
        text-decoration: none; 
        color: $ter3; 
        padding: 20px; 
        transition: $tr-estandar;

        &:hover{
            color: $sec1;
        }

        > span:first-of-type{
            font-family: $font-standard; 
            display: block; 
            width: 100%; 
            font-size: 1.2rem; 
            font-weight: 500;
            text-shadow: $sombra-text1;
        }
        > span:nth-of-type(2){
            font-family: $font-standard;
            font-size: 0.9rem;
            font-weight: 500; 
            text-size-adjust: 100%; 
            display: block; 
            color: $pri2; 
            width: 100%; 
            text-shadow: $sombra-text1;
        }
        > span.normal{
            font-size: 1.2rem;
        }
        @media screen and (max-width: $bp-sm) {

            > span.normal{
                font-size: 0.85rem;
            }
        }
    }
}

nav.subbaner-simple{
    @extend %flexbox-subbaner;

    @media screen and (min-width: 360px) {

        a{
            flex: 1 1 100%;
            //flex: 1 1 0;
            
            &:nth-of-type(2){
                
                //flex: 3 1 0;
            }
        }
    }
    @media screen and (min-width: $bp-sm) {

        a, a:nth-of-type(2){
            
            flex: 1 1 33.333%;
            
        }
    }

}
nav.subbanner-extenso{
    @extend %flexbox-subbaner;

    @media screen and (min-width: $bp-sm) {

        a{
            flex: 1 1 0;
        }
    }
}

// PROYECTOS
div.flexbox-proyectos{
    @extend %flexbox-row-wrap-stretch-evenly; 
    margin: 0px auto 40px auto;
    
    &.center{
        justify-content: center;
    }

    > a{
        //flex: 1 1 0;
        display: block;
        min-width: 127px; // 143px
        padding: 20px 0px 5px; 
        text-align: center;
        font-weight: 500;
        font-size: 1rem;
        color: $ter1;
        //border: 1px solid red;

        &:hover{
            color: $sec1;
            
            img{
                animation: pulse 300ms infinite alternate;
            }
        }

        > img{
            //width: 106px;
            width: 90px; 
            border-radius: 50%; 
            margin-bottom:5px;
        }

        > span{
            font-size: 1em; 
            margin: 10px 0 5px 0;
        }
    }
}


div.box-proyectos{
    margin: 30px 0;
    
    > div:first-of-type {
        @extend %cajon-header;
        
        @media (min-width: $bp-sm) {
            display: none;
        }
    }
    > div.pulsado{
        background: $sec1;
        color:white;
    }
    > div#jqToogle{
        display: none;
        border: 1px solid $sec1;
        box-shadow: $sombra-box4;
        background-color: $ter3;

        @media (min-width: $bp-sm) {
            display: block;
            border: none;
            box-shadow: none;
            background-color: transparent;
        }
    }
}

// WARNING
div.box-warning{
    margin-bottom: 60px;
    
    > div:first-of-type {
        @extend %cajon-header;
    }
    > div.pulsado{
        background: $sec1;
        color:white;
    }
    > div:nth-of-type(2){
        display: none;
        background-color: $sec5;
        padding: 30px 30px;
        border-radius: 0 0 2px 2px;
        box-shadow: $sombra-box4;
        
        > p, ul{
            font-size: 1rem;
            font-weight: 300;
            text-align: justify;
        }

        > strong{
            font-size: 1rem;
            font-weight: bolder;
            text-transform: uppercase; 
        }
        > strong.remarcado{
            display: block;
            border-top:2px solid $sec1;
            border-bottom:2px solid $sec1;
            margin: 20px 0;
            padding: 20px 0;
        }
        > strong.remarcado.centrado{
            text-align: center;
        }

        > hr{
            border:1px solid $sec1;
        }
        
        > span.cerrar{
            font-size: 2rem;
            display: block;
            width: 52px;
            margin: 0 auto;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: $sec1;
            color: white;
            box-shadow: $sombra-box1;
            transition: $tr-estandar;
            border-radius: 50%;
            &:hover{
                cursor: pointer;
                box-shadow: $sombra-box2;
            }
        }
    }
    // Warning desplegado por defecto
    > div:nth-of-type(2).open{
        display: block;
    }
}


// CAROUSEL - ARTÍCULOS

div.carousel-articulos{
    
    div.flickity-viewport{
        transition: height 0.2s;
    }

    div.carousel-cell{
        min-height: 100%;
        display: flex;
        padding-top: 2px;
        > a{
            width: 256px;
            margin: 0px 17px 35px 17px;
            padding-bottom: 25px; 
            background-color: $ter3;
            border-radius: 2px;
            box-shadow: $sombra-box1;
            transition: $tr-sombra;
            align-items: stretch;
            
            &:hover{
               box-shadow: $sombra-box4;
            }
            
            > img{
                border-radius: 2px 2px 0 0;   
            }

            > span:first-of-type{
                margin: 25px 15px 10px 15px;
                font-size: 1.2rem; 
                font-weight: 500;
                line-height: 1.1; 
                color: $ter1;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;  
                overflow: hidden;
            }
            
            > span:nth-of-type(2){
                display: block; 
                margin: 15px 15px 0px 15px; 
                font-size: 1rem; 
                line-height: 1.2; 
                font-weight: 400;
                color: $ter2;
                display: -webkit-box;
                -webkit-line-clamp: 6;
                -webkit-box-orient: vertical;  
                overflow: hidden;
            }
        }
    }
    > div.placeholder{
        display: flex;
        overflow: hidden;
        margin-right: 1rem;

        > div.three.doubling.stackable.cards{
            margin: 0px 17px 0px 0px;
            
            > div.ui.card{
                width: 256px !important;

                div.rectangular.image{
                    height: 160px;
                    padding-top: 0;
                }
            }
        }
    }
}

// ARTÍCULOS FLEXBOX

div.flexbox-articulos{
    @extend %flexbox-row-wrap-stretch-evenly; 
    margin-bottom: 60px;
    //justify-content: space-between;
    @media screen and (min-width: $bp-xl) {
        justify-content: flex-start;
    }

    

    // Spinner anterior al div.loader
    /*
    > i.icon{
        color: $sec1;
        margin-top: 40px;
    }*/

    > div.loader {
        @include loader( $border:4px );
        margin-top: 40px;
        margin: 40px auto 0 auto;
    }

    > article{
        min-width: 200px; 
        max-width: 256px; 
        margin: 30px 5px; 
        background-color: $ter3;
        border-radius: 2px;

        > a{
            display: block;
            text-decoration: none;
            padding-bottom: 20px; 
            border:none !important;
            background-color: $ter3;
            height: 100%;
            border-radius: 2px;
            //box-shadow: $sombra-box1;
            box-shadow: 0px -1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);;
            transition: $tr-sombra;

            &:hover{
               box-shadow: $sombra-box4;

               > span:first-of-type{
                color: black;
               }
            }
            
            > img{
                border-radius: 2px 2px 0 0;
                background-color: white;
            }

            > div.carga-tmp{
                width: 256px;
                text-align: center;
                height: 160px;
                vertical-align: middle;
            }

            > span:first-of-type{
                display: block; 
                margin: 10px 15px; 
                font-size: 1.1rem; 
                font-weight: 400;
                line-height: 1.15; 
                color: $ter1;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;  
                overflow: hidden;
            }
            
            > span:nth-of-type(2){
                display: block; 
                padding: 5px 15px 0px 15px; 
                font-size: 1rem; 
                line-height: 1; 
                font-weight: 400;
                color: $ter2;
            }
        }
    }
}


// AGENDA
div.flexbox-agenda{
    @extend %flexbox-row-wrap-stretch-evenly; 
    margin: 0px auto 40px auto;
    box-sizing: border-box;
    justify-content: space-evenly;

    > div.ui.three.column.stackable.grid{
        width: 100%;
    }
    div.empty-message{
        text-align: center;
        color: $ter1;
        > img.rotate{
            animation: rotateLeftRight 3s infinite ease-in-out;
        }  
        > div:nth-of-type(1){
            margin: 20px 15px 0px 15px;
            box-shadow: $sombra-box1;
            background-color: $pri2;
            border-radius: 4px;
            text-align: center;
            transition: $tr-estandar;
            &:hover{
                background-color: $pri1;
                box-shadow: $sombra-box2;
            }
            > a{
                display: block;
                padding-top: 7px;
                padding-bottom: 7px;
                color: white;
                > i{
                    margin-left: -5px;
                    margin-right: 10px;
                }
            }
        }
    
    }

    > div.evento{
        @extend %flexbox-row-wrap-stretch-evenly;
        flex: 1 1 33.333%;
        min-width: 300px;
        padding: 15px 15px;

        //border: $b;

        > div{
            @extend %flexbox-row-nowrap-start-center;
            flex: 1 1 0;
            background-color: $ter3;
            padding: 1em;
            min-height: 105px;
            box-sizing: border-box;
            align-items: start;
            border-radius: 2px;
            transition: $tr-sombra;
            box-shadow: $sombra-box1;

            &:hover{
                box-shadow: $sombra-box3;
            }
            
            > div:first-of-type{
                display: block;
                margin-right: 0.8em;
                margin-bottom: 0.3em;
                text-align: center;
                box-shadow: $sombra-box1;
                background: white;
                padding-top: 5px;
                font-family: 'Raleway', sans-serif;
                border-radius: 2px 2px 2px 2px;

                > span:first-of-type{
                    display: block;
                    padding: 3px 15px 0;
                    font-size: 1rem;
                    line-height: 100%;
                }

                > span:nth-of-type(2){
                    display: block;
                    font-size: 20px;
                    font-weight: 800;
                    padding: 7px 15px;
                    line-height: 100%;
                }
                > span:nth-of-type(3){
                    display: block;
                    text-transform: uppercase;
                    line-height: 100%;
                    font-weight: bold;
                    font-size: 0.9rem;
                    background: $pri1;
                    margin: auto;
                    padding: 5px 15px;
                    color: #fff;
                    border-radius: 0 0 2px 2px;
                }

            }
            > div:nth-of-type(2){

                > a{
                    display: block;
                    border:none !important;
                    color: $ter1;
                    text-decoration: none;
                    font-size: 1.1rem;
                    line-height: 1.1;
                    margin-bottom: 10px;
                    min-height: 2.2rem;
                    font-weight: 400;
                    
                    &:hover{
                        color: $sec1;
                    }
                }
                > span:first-of-type{
                    display: block;
                    font-size: 0.95rem;
                    color: $ter1;
                    //font-family: 'Raleway', sans-serif;    
                }
            }
        }
    }

    

}

// NUMEROS
div.flexbox-numeros{
    @extend %flexbox-row-wrap-stretch-evenly;
    margin-bottom: 60px; 
    background-color: $ter3; 
    text-align:center;
    border-radius: 2px;
    box-shadow: $sombra-box1;

    > div{
        min-width: 170px; 
        //border: $b;
        margin: 20px auto;
        
        &:nth-of-type(1) > span:first-of-type{color: $alt1;}
        &:nth-of-type(2) > span:first-of-type{color: $alt2;}
        &:nth-of-type(3) > span:first-of-type{color: $alt3;}
        &:nth-of-type(4) > span:first-of-type{color: $alt4;}
        &:nth-of-type(5) > span:first-of-type{color: $alt5;}
        &:nth-of-type(6) > span:first-of-type{color: $alt6;}
        
        &:nth-of-type(7) > span:first-of-type{color: $alt1;}
        &:nth-of-type(8) > span:first-of-type{color: $alt2;}
        &:nth-of-type(9) > span:first-of-type{color: $alt3;}
        &:nth-of-type(10) > span:first-of-type{color: $alt4;}
        &:nth-of-type(11) > span:first-of-type{color: $alt5;}
        &:nth-of-type(12) > span:first-of-type{color: $alt6;}

        > span:first-of-type{
            display: block; 
            font-size: 3.5rem; 
            line-height: 1;
            font-weight: 300;
        }
        > span:nth-of-type(2){
            display: block; 
            font-size: 1.5rem; 
            line-height: 1.1; 
            color: $ter1; 
            font-weight: 300;
        }
    }
}

// SELECTIVIDAD

div.flexbox-selectividad{
    @extend %flexbox-row-wrap-stretch-evenly;
    justify-content: center;
    margin-bottom: 60px; 
    
    > div {
        @include circuloBase( $size: 175px, $border:2px );
        margin: 25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        background-color: $ter3;
        box-shadow: $sombra-box2;
        transition: $tr-estandar;
        position: relative;

        &:hover{
            box-shadow: $sombra-box4;
            > div.border{
                animation: spin 1.2s linear infinite;
            }
        }
        
        &:nth-of-type(1) > span:first-of-type{color: $alt1;}
        &:nth-of-type(2) > span:first-of-type{color: $alt2;}
        &:nth-of-type(3) > span:first-of-type{color: $alt3;}
        &:nth-of-type(4) > span:first-of-type{color: $alt4;}
        &:nth-of-type(5) > span:first-of-type{color: $alt5;}
        &:nth-of-type(6) > span:first-of-type{color: $alt6;}
        
        > div.border{
            @include circuloBase( $size: 175px, $border:2px );
            position: absolute;
            top: -2px;
            left: -2px;
            transition: $tr-estandar;
        }

        > span:first-of-type{
            display: block; 
            font-size: 3rem; 
            line-height: 1;
            font-weight: 300;
        }
        > span:nth-of-type(2){
            display: block; 
            font-size: 1.5rem; 
            line-height: 1.1; 
            color: $ter1; 
            font-weight: 300;
            margin: 0 auto 10px auto;
            
        }
        > i{
            display: block;  
            line-height: 1.1; 
            font-weight: 300;
            width: 100%;
        }
    }
}

// CAROUSEL - HEADER
div.carousel-header{
    
    div.carousel-cell{
        min-height: 100%;
        //display: flex;
        width: 100%;
        margin: auto;
        
        /* center images in cells with flexbox */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .flickity-page-dots .dot.is-selected {
        background: $sec1;
    }
}

// CAROUSEL - COMUNIDAD
div.carousel-comunidad{
    
    div.carousel-cell{
        min-height: 100%;
        //display: flex;
        width: 100%;
        margin: auto;
        
        /* center images in cells with flexbox */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .flickity-page-dots .dot.is-selected {
        background: $sec1;
    }
}

// CAROUSEL - ELPUIG
div.carousel-elpuig{
    //background-color: $oscuro;

    .flickity-viewport {
        transition: height 0.2s;
    }

    div.carousel-cell{
        min-height: 100%;
        //display: flex;
        width: 100%;
        margin: auto;
        
        /* center images in cells with flexbox */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .flickity-page-dots{
        display: none;
    }
}
.carousel-elpuig.is-fullscreen{
    .carousel-cell {
        height: 100%;
        > img{
           max-height: 100% !important;
        }
    }
    .flickity-page-dots {
        display: block;
        .dot.is-selected {
            background: $sec1;
        }
    }

}
div.carousel-elpuig-nav{
    
    div.carousel-cell{
        min-height: 100%;
        //display: flex;
        width: 128px;
        height: 128px !important;
        margin: auto 7px;
        border: 3px solid transparent;
        border-radius: 50%;
        overflow: hidden;
        background: $oscuro;
        filter: grayscale(100%);
        box-shadow: $sombra-box1;

        /* center images in cells with flexbox */
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:hover{
            filter: grayscale(0%);
        }
    }

    @media screen and (max-width: $bp-sm) {
        div.carousel-cell{
            width: 80px !important;
            height: 80px !important;
        }
        
    }

    .carousel-cell.is-nav-selected {
        border: 3px solid $sec1;
        filter: grayscale(0%);
        
        
    }
}

// CAROUSEL - PROYECTOS

div.carousel-proyectos{
    margin-left: -1rem;

    div.flickity-viewport{
        transition: height 0.2s;
    }
    
    div.carousel-cell{
        min-height: 100%;
        display: flex;
        padding-top: 2px;

        > a{
            width: 256px;
            margin: 0px 15px 35px 15px;
            padding-bottom: 25px; 
            background-color: $ter3;
            border-radius: 2px;
            box-shadow: $sombra-box1;
            transition: $tr-sombra;
            position: relative;
            
            @media screen and (min-width: 507px)  {
                min-width: 230px; 
                max-width: 230px;
            }
            
            &:hover{
               box-shadow: $sombra-box4;
            }
            
            > img{
                border-radius: 2px 2px 0 0;   
            }

            > span:first-of-type{
                margin: 15px 15px 0px 15px;
                font-size: 1rem; 
                font-weight: 500;
                color: $ter1;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;  
                overflow: hidden;
                border-bottom: 1px solid $sec1;
            }
            
            >ul{
                list-style: none;
                margin: 0px 15px 25px 15px;
                padding: 10px 0 0px 0;
                flex-grow: 1;
                
                li{
                    color: $ter1;
                    font-size: 0.9rem;
                    line-height: 2rem;
                }
            }

            > div{
                position: absolute;
                left: 0px;
                right: 0px;
                bottom: 15px;
                border-top: 1px solid $sec1;
                margin: 5px 15px 0 15px;

                > span:nth-of-type(1){
                    float: left;
                    font-size: 0.9rem;
                    color: $ter2;
                }
                > span:nth-of-type(2){
                    float: right;
                    
                    color: $ter2;
                    font-size: 0.9rem;
                    
                }
            }

            
        }
    }
    > div.placeholder{
        display: flex;
        overflow: hidden;
        margin-right: 1rem;
        
        > div.three.doubling.stackable.cards{
            margin: 0px 17px 0px 0px;
            
            > div.ui.card{
                width: 230px !important;

                div.rectangular.image{
                    height: 160px;
                    padding-top: 0;
                }
            }
        }
    }
}

// CAROUSEL - ARTICULOS PROFES

div.carousel-articulos-profes{
    margin-left: -1rem;
    div.flickity-viewport{
        transition: height 0.2s;
    }
    
    div.carousel-cell{
        min-height: 100%;
        display: flex;
        padding-top: 2px;

        > div{
            width: 256px;
            margin: 0px 15px 35px 15px;
            padding-bottom: 15px; 
            background-color: $ter3;
            border-radius: 2px;
            box-shadow: $sombra-box1;
            transition: $tr-sombra;
            display: flex;
            flex-direction: column;
            
            @media screen and (min-width: 507px)  {
                min-width: 230px; 
                max-width: 230px;
            }
            
            &:hover{
               box-shadow: $sombra-box4;

               > a:last-child > img{
                    filter: grayscale(0%);
                }
            }
            
            > a:first-child{
                > img{
                    border-radius: 2px 2px 0 0;   
                }
            }
            > a:nth-child(2){
                flex-grow: 1;

                > span{
                    margin: 10px 15px 0px 15px;
                    font-size: 1rem; 
                    font-weight: 500;
                    color: $ter1;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;  
                    overflow: hidden;
                }
            }
            
            > a:last-child{
                border-top: 1px solid $ter4;
                margin: 20px 15px 0 15px;
                padding: 10px 0 0 0;
                display: flex;
                align-items: center;

                > img{
                    width: 45px;
                    float: left;
                    background-color:#FFFFFF; 
                    border-radius: 50%; 
                    border:1px solid $ter4; 
                    box-shadow: $sombra-box1;
                    margin: 0 10px 0px 0;
                    filter: grayscale(100%);
                }
                > div{
                    width: 100%;
                    > span:nth-of-type(1){
                        display: block;
                        font-size: 0.9rem;
                        color: $ter2;
                    }
                    > span:nth-of-type(2){
                        display: block;
                        color: $ter4;
                        font-size: 0.8rem;
                        margin-top: 3px;
                    } 
                }
                
            }
        }
    }
    > div.placeholder{
        display: flex;
        overflow: hidden;
        margin-right: 1rem;
        
        > div.three.doubling.stackable.cards{
            margin: 0px 17px 0px 0px;
            
            > div.ui.card{
                width: 230px !important;

                div.rectangular.image{
                    height: 160px;
                    padding-top: 0;
                }
            }
        }
    }
}


// DEPARTAMENTOS

div.flexbox-departamentos{
    //@extend %flexbox-row-wrap-stretch-evenly; 
    margin: 30px auto 30px auto;
    //border: $b;
    > a{
        min-width: 210px !important;
        transition: none;
        
        
        @media screen and (max-width: $bp-sm) {
            min-width: 100% !important;
        }
        @media screen and (min-width: $bp-xxl) {
            min-width: 240px !important;
        }

        > button{
            //font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
            //font-weight: 500 !important;
            //line-height: 1.2 !important;
            font-size: 1rem !important;
            width: 100%;
            text-shadow: $sombra-text1 !important;
            margin: 0 0 15px 0 !important;
            padding: 17px 15px 17px 15px !important;
            box-shadow: $sombra-box1 !important;
            text-align: left !important;
            

            &:hover{
                box-shadow: $sombra-box4 !important;
            }

            > .fas{
                opacity: 80%;
                margin-right: 0.7rem;
            }
            > .icon{
                margin-right: 0.7rem !important;
            }
        }
    }
}

// EQUIPO
div.dropdown-profes{
    margin-bottom: 40px;
    min-height: auto !important;
    box-shadow: $sombra-box1 !important;

    @media screen and (max-width: $bp-lg) {
        
        div.item > span.description{
            white-space: nowrap;
            overflow: hidden;
            max-width: 8ch;
        }
    }
}

div.filtro-profes.visible{
    @media screen and (max-width: $bp-lg) {
        min-height: 300px;
    }
}

div.flexbox-equipo{
    @extend %flexbox-row-wrap-stretch-evenly; 
    margin: 0px auto 40px auto;

    > div.loader {
        @include loader( $size: 120px, $border:2px );
        margin-top: 40px;
    }

    &.mini{
        > div{
            min-height: 190px;
            > a > img{
                width: 52px; 
                background-color:#FFFFFF;
            }
        }
    }

    > div{
        width: 185px;
        min-height: 260px;
        text-align: center;
        padding: 20px 5px 20px; 
        margin-bottom: 10px;
        

        &:hover{
            > a > img{
                filter: grayscale(0);
                background: #FFE3C5;
                background: linear-gradient(357deg, rgba(255, 227, 197, 1) 0%, rgba(255, 227, 197, 1) 11%, rgba(255, 255, 255, 1) 66%);
                box-shadow: $sombra-box3;
                animation: pulse 300ms infinite alternate;
                
            }
            > a > img[alt^="Roger Sobrino"] {
                content:url("https://elpuig.xeill.net/custom/img/profes/roger2.webp");
            }
        }
        > a{
            text-decoration: none; 
            border:none !important;

            > img{
                width: 120px; 
                background-color:#FFFFFF; 
                border-radius: 50%; 
                border:2px solid $sec1; 
                box-shadow: $sombra-box1;
                margin-bottom:15px;
                filter: grayscale(100%);
                transition: $tr-estandar;
            }

            > span{
                color: $oscuro; 
                text-transform: uppercase; 
                font-weight: bold;
                font-size: 1rem;
                margin: 10px 0 5px 0;
            }
        }
        > span:first-of-type{
            color: $sec1; 
            font-size: 0.9rem; 
            padding: 5px 15px 7px 15px;
            display: block;
            font-weight: 500;
            line-height: 1.2;
        }
        > span:nth-of-type(2){
            color: $ter1; 
            font-weight: 300;
            font-size: .9rem;
            
            &::after{
                content: "@elpuig.xeill.net";
                font-weight: 100;
                font-size: .9em;
                line-height: .5;
                color: $ter4;
                display: block;
                
            }
        }
    }
}

// EL CENTRE

img.cabecera-elcentre{
    margin: 30px auto;
    display: block;
}

// GRID CICLES FORMATIUS - MENU

div.grid-estudis{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(270px, 1fr));
    grid-template-rows: 1fr;
    grid-auto-rows:auto;
    grid-column-gap: 25px;
    //grid-row-gap: 25px;

    > div{
        
        > div{
            box-shadow: $sombra-box1;
            background-color: $pri1;
            border-radius: 4px;
            text-align: left;
            margin: 0 0 20px 0;
            transition: $tr-estandar;
            box-shadow: $sombra-box2;
            border-top: 4px solid $pri1;
            border-bottom: 4px solid $pri1;
            
            &:hover{
                box-shadow: $sombra-box3;
                border-bottom: 4px solid $sec1;
            }
            > a{
                display: block;
                padding-top: 10px;
                padding-bottom: 10px;
                padding-left: 15px;
                color: white;
                font-size: 1rem;
                text-shadow: $sombra-text1;
                text-transform: uppercase;
                font-weight: bold;
                letter-spacing: 1px;

                > i{
                    margin-right: 15px;
                }
            }
        }

        > a{
            display: flex;
            align-items: flex-start;
            justify-content: stretch;
            color: $oscuro-texto;
            background-color: $ter3;
            border-radius: 4px;
            box-shadow: $sombra-box1;
            margin-bottom: 20px;
            
            &:hover{
                box-shadow: $sombra-box3;

                > div:first-child{
                    animation: pulse 600ms infinite alternate;
                    box-shadow: $sombra-box3;
                    @extend %gradient-primario;
                    
                    >i.stroke, >span{
                        transition: $tr-estandar;
                        color: transparent;
                        -webkit-text-stroke: 1px white;
                    }

                    >div.border{
                        animation: spin 1.2s linear infinite;
                    }
                }
            }

            > div:first-child{
                font-family: 'seatbcn-black', 'seatbcn-black-local';
                @include circuloBase( $size: 80px, $border:2px );
                border-color: transparent;
                min-height: 80px;
                min-width: 80px;
                margin: 15px 10px 20px 10px;
                background-color: white;
                color:$oscuro-texto;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: $tr-estandar;
                box-shadow: $sombra-box2;
                position: relative; // Permite animar borde
                
                > div.border{
                    @include circuloBase( $size: 80px, $border:2px );
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    transition: $tr-estandar;
                }

                >span{
                    font-size: 1.5rem;
                    text-align: center;
                    color: transparent;
                    -webkit-text-stroke: 1px black;
                }
            }
            > div:nth-child(2){
                flex: 1 1 auto;
                padding: 15px 10px 15px 0px;
                > span:first-child{
                    display: block;
                }

                > div{
                    margin-top:5px;
                    
                }
            }
        }
    }
}

// GRID - OPCIONES

div.grid-opciones{
    display: grid;
    grid-template-rows: 1fr;
    grid-auto-rows:1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;

    grid-template-columns: repeat( auto-fit, minmax(240px, 1fr));

    &.col6{ grid-template-columns: repeat( auto-fit, minmax(100px, 1fr)); }
    &.col5{ grid-template-columns: repeat( auto-fit, minmax(120px, 1fr)); }
    &.col4{ grid-template-columns: repeat( auto-fit, minmax(130px, 1fr)); }
    &.col3{ grid-template-columns: repeat( auto-fit, minmax(180px, 1fr)); }
    &.col2{ grid-template-columns: repeat( auto-fit, minmax(49%, 1fr)); }

    >a{
        box-sizing: border-box;
        background-color: $ter3;
        box-shadow: $sombra-box1;
        border-radius: 4px;
        color: $oscuro-texto;
        min-height: 100px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        text-align: center;
        padding: 15px;
        
        &:hover{
            box-shadow: $sombra-box3;    
        }

        &:active{
            //background-color: $sec1;
            @extend %gradient-primario;
            color: white;
            transition: none;

            > span:first-child{
                -webkit-text-stroke-color:white;
            }

            >i.stroke{
                -webkit-text-stroke-color: white;
            }
        }

        >i{
            display: block;
            margin-bottom: 10px;

            &.stroke{
                -webkit-text-stroke-color: black;
            }
        }
        > span{
            
            &:first-child{
                font-family: 'seatbcn-black', 'seatbcn-black-local';
                font-size: 2.5rem;
                //color: $ter1;
                -webkit-text-stroke: 1px $oscuro;
                color: transparent;
                //-webkit-filter: drop-shadow(2px 2px rgba(0,0,0,0.12));
                //filter: drop-shadow(2px 2px rgba(0,0,0,0.12));
            }
            &.icon{
                font-family: 'Material Icons';
            }
        }
    }
}

// GRID - PERSONAS

div.grid-items-img-texto{
    display: grid;
    grid-template-rows: 1fr;
    grid-auto-rows:1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;

    grid-template-columns: repeat( auto-fit, minmax(220px, 1fr));

    &[data-columns="6"]{ grid-template-columns: repeat( auto-fit, minmax(110px, 1fr)); }
    &[data-columns="5"]{ grid-template-columns: repeat( auto-fit, minmax(120px, 1fr)); }
    &[data-columns="4"]{ grid-template-columns: repeat( auto-fit, minmax(130px, 1fr)); }
    &[data-columns="3"]{ grid-template-columns: repeat( auto-fit, minmax(180px, 1fr)); }
    &[data-columns="2"]{ grid-template-columns: repeat( auto-fit, minmax(49%, 1fr)); }

    > div{
        display: flex;
        align-items: flex-start;
        border-left: 1px solid transparent;
        box-sizing: border-box;
        padding: 10px 10px;
        transition: $tr-estandar;
        
        &:hover{
            background-color: $ter3;
            border-left: 1px solid $sec1;
            padding-left: 15px;
            box-shadow: $sombra-box1;
            > a > img{ 
                filter: grayscale(0%); 
                box-shadow: $sombra-box2;
            }
            > div > a{ color: $sec1;}
        }

        > a > img{
            width: 32px;
            background-color:#FFFFFF; 
            border-radius: 50%; 
            border:1px solid $sec1; 
            box-shadow: $sombra-box1;
            margin: 0 20px 0 0;
            filter: grayscale(100%);
            transition: $tr-estandar;
        }
        > div{
            width: 100%;
            > a{
                display: block;
                color: $oscuro; 
                text-transform: uppercase; 
                font-weight: bold;
                font-size: 1rem;
            }
            > span:first-of-type{
                display: block;
                color: $ter1;
                font-size: 0.9rem;
                font-weight: 500;
                line-height: 1.2;
            }
            > span:nth-of-type(2){
                color: $ter1; 
                font-weight: 300;
                font-size: .9rem;
                > span{
                    display: block;
                    color: $ter4;
                }
            }
        }
    }
}

// CICLES - ATAJOS

div.flexbox-ciclos{
    @extend %flexbox-row-wrap-stretch-evenly; 
    
    @media screen and (min-width: 1600px) {
        justify-content: space-between;
    }

    > article{
        margin: 30px 0px; 
        background-color: $ter3;
        border-radius: 4px;
        padding-bottom: 20px;
        box-shadow: 0px -1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: $tr-sombra;
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        @media screen and (min-width: 507px)  {
            min-width: 230px; 
            max-width: 230px;
        }

        &:hover{
            box-shadow: $sombra-box4;

            > div:first-child > a {
                animation: pulse 600ms infinite alternate;
                background-color: $pri1;
                //@extend %gradient-primario;
                color:white;
                //text-shadow: $sombra-text1;
                box-shadow: $sombra-box4;
                margin-top: -40px;
                @include circuloBase( $size: 130px, $border:2px );
                border-color: transparent;
                
                > span:first-of-type{
                    //font-size: 2.5rem;
                    transition: $tr-estandar;
                    //color: white;
                    color: transparent;
                    -webkit-text-stroke: 1px white;
                    -webkit-filter: drop-shadow(2px 2px rgba(0,0,0,0.12));
                    filter: drop-shadow(2px 2px rgba(0,0,0,0.12));
                    text-shadow: none;
                }

                > div.border{
                    @include circuloBase( $size: 130px, $border:2px );
                    animation: spin 1.2s linear infinite;
                }
            }
        }

        > div:first-child{
            height: 145px;
            @extend %gradient-primario;
            border-radius: 4px 4px 0 0;

            > a {
                @include circuloBase( $size: 100px, $border:2px );
                border-color: transparent;
                margin: 22px auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                background-color: $ter3;
                box-shadow: $sombra-box2;
                transition: $tr-estandar;
                color: $oscuro;
                
                position: relative; // Permite animar borde
                > div.border{
                    @include circuloBase( $size: 100px, $border:2px );
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    transition: $tr-estandar;
                }

                > span:first-of-type{
                    font-family: 'seatbcn-black', 'seatbcn-black-local';
                    display: block; 
                    font-size: 2rem;
                    margin-bottom: 5px;
                    color: $ter5;
                    -webkit-text-stroke: 1px black;
                    text-shadow: $sombra-text1;
                }
                > i{
                    display: block;   
                    width: 100%;
                }
            
            }
        }

        > span:first-of-type{
            display: block; 
            text-align: center;
            margin: 10px 15px;
            padding-bottom: 15px;
            font-size: 1.1rem; 
            font-weight: 400;
            line-height: 1.15; 
            color: $ter1;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;  
            overflow: hidden;
            border-bottom: 1px solid $sec1;
        }

        >ul{
            list-style: none;
            margin: 10px 15px;
            padding-left: 0;
            flex-grow: 1;
            
            li{
                color: $ter1;
                line-height: 2.2rem;
                
                > a{
                    display: block;
                    color: $ter1;
                    border-left:1px solid $ter3;
                    border-radius: 2px;

                    &:hover{
                        color: $sec1;
                        padding-left: 5px;
                        background-color: $ter5;
                        border-left: 1px solid $sec1;
                        box-shadow: $sombra-box1;
                        color: black;

                        > i.stroke{
                            -webkit-text-stroke-color: black;
                        }
                    }
                    > i.stroke{
                        -webkit-text-stroke-color: $ter1;
                    }
                }
            }
            li > div.labels{
                display: inline;
                position: absolute;
                margin: -3px 0 0 3px;
                
                > a{
                    box-shadow: $sombra-box1;
                }
                > a:hover{
                    background-color: $sec1;
                    color: white;
                }
            }
        }
        
        > div:nth-of-type(2){
            margin: 20px 15px 0px 15px;
            box-shadow: $sombra-box1;
            background-color: $pri2;
            border-radius: 4px;
            text-align: center;
            transition: $tr-estandar;
            &:hover{
                background-color: $pri1;
                box-shadow: $sombra-box2;
            }
            > a{
                display: block;
                padding-top: 7px;
                padding-bottom: 7px;
                color: white;
                > i{
                    margin-left: -5px;
                    margin-right: 10px;
                }
            }
        }
    }
}
div.flexbox-ciclos.columnas2{

    > article{

        @media screen and (min-width: 507px)  {
            max-width: 45%;
        }
    }
}

// BANNER CICLOS

div.flex-banner-ciclo{
    width: 100%;
    max-height: 200px;
    @extend %gradient-primario;
    box-shadow: $sombra-box1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    > span{
        font-family: 'seatbcn-black', 'seatbcn-black-local';
        font-size: 4rem;
        //font-weight: bolder;
        -webkit-text-stroke: 1px white;
        letter-spacing: 1rem;
        color: transparent;
        -webkit-filter: drop-shadow(2px 2px rgba(0,0,0,0.12));
        filter: drop-shadow(2px 2px rgba(0,0,0,0.12));

        @media screen and (min-width: $bp-sm) and (max-width: $bp-lg){
            font-size: 8rem;
        }

        @media screen and (min-width: $bp-lg)  {
            font-size: 7rem ;
        }

        @media screen and (min-width: $bp-xxl)  {
            font-size: 10rem ;
        }

        > span{
            font-family: $font-standard;
            font-weight: 100;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke: 0px;
            color: white;
            animation: blinker 1s step-start infinite;
            border-bottom:2px solid white !important;
            display: inline-block;
            width: 1ch !important;
        }
    }
}

// ACORDEON CON LISTA

.ui.styled.accordion .accordion .content{
    padding: 0em 1em 0em;
}