main a[href=''] { background: blue!important; color: yellow!important; }


/* Styles for education template.

   developer:   rmiske
   requires:    /common/framework/css/framework.pt-br.css
   ========================================================================== */

/* ==========================================================================
   setup the environment
   ========================================================================== */
:root {
    --wrapper-h-pad: 3.125rem;
}
.page-width {
    margin: 3.125rem auto;
    max-width: calc(1100px + 2.25rem + (2 * var(--wrapper-h-pad)));
    padding: 0 var(--wrapper-h-pad);
    width: 100%;
}
.gridular {
    align-content: start;
    display: grid;
    grid-gap: 2rem 2.25rem;
    grid-template-columns: 1fr 1fr;
}


main {
    color: #404040;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
main img {
    height: auto;
    max-width: 100%;
}
main h2 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}
main h3 {
    color: red;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.375rem;
    margin-bottom: 1rem;
}



/* ==========================================================================
   hero
   ========================================================================== */
#hero {
    background: #047bb7;
}
#hero * {
    color: #fff;
}
#hero .page-width {
    margin: 0 auto;
}

#hero #badge-wrapper {
    position: relative;
}
#hero #badge {
    background: #024b75;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    padding: 0.875rem 1rem;
    position: absolute;
    left: -1rem
}

#hero .gridular {
    align-items: center;
    grid-template-columns: 1fr 470px;
    padding-top: 1.25rem;
}

#hero h1 {
    font-size: 3.125rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 2.5rem;
}
#hero h1 span, #hero p {
    font-size: 2.1875rem;
    font-weight: 400;
}
#hero h1 span {
    display: block;
    margin-bottom: 0.625rem;
}
#hero img { 
    align-self: end;
    justify-self: end; 
}



/* ==========================================================================
   nav
   ========================================================================== */
/*override*/
#_product-nav a, #_product-more { font-size: 1rem; }



/* ==========================================================================
   intro
   ========================================================================== */
#intro p {
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 2.625rem;
}
#intro p:first-child {
    color: #0067a4;
    font-size: 2.1875rem;
    font-weight: 300;
    line-height: 2.8125rem;
    margin-bottom: 3rem;
}



/* ==========================================================================
   computation tabs
   ========================================================================== */
#computation h3 {
    color: #0067a4;
}
#computation ul.tabs {
    cursor: pointer;
    display: flex;
    font-size: 1.25rem;
    list-style: none;
    position: relative;
    top: 1px;
    width: 100%;
}

#computation ul.tabs li {
    background: #fff;
    border: 1px solid #fff;
    border-bottom-color: #ccc;
    color: #404040;
    font-size: 1.25rem;
    line-height: 3.125rem;
    padding: 0 1rem;
    text-align: center;
}
#computation ul.tabs li:hover, 
#computation ul.tabs li.current {
    color: #0067a4;
}
#computation ul.tabs li.current {
    border-color: #ccc;
    border-bottom-color: #fff;
}


#computation .tab-content {
    border-top: 1px solid #ccc;
    background: #fff;
    display: none;
    line-height: 1.375rem;
    margin-bottom: 2rem;
}
#computation .tab-content.current {
    display: inherit;
}
.tab-content a {
    color: #404040;
    font-weight: 600;
}
.tab-content a:hover {
    color: #0067a4;
}
.tab-content ul {
    margin-top: 1rem;
}
.tab-content li {
    display: inline-block;
    padding-right: 0.75rem;
    position: relative;
}
.tab-content li:not(:last-child):after {
    color: #848484;
    content: '\25AA';
    margin-left: 0.3125rem;
    position: absolute;
}
.tab-content li a {
    color: #848484;
    font-size: 0.8125rem; 
    font-weight: 400;
}

.tab-content .gridular hr { 
    border-top: 1px solid #ccc;
    border-bottom: 0;
    grid-column-end: span 2; 
    margin: 0.875rem 0; 
}


.show-flex__600 {
    display: none;
}



@media (max-width: 600px) {
    .show-flex__600 {
        display: flex;
    }
    .show-flex__600>div {
        max-width: 220px;
        text-align: center;
        width: 100%;
    }
    #computation ul.tabs li {
        text-align: left;
    }
    #computation ul.tabs li#nav-tab-1, 
    #computation ul.tabs li#dropdown-menu {
        display: inline-block;
    }
    #computation ul.tabs .dropdown {
        box-shadow: 0 5px 10px rgba(7, 73, 119, .5);
        display: none;
        left: 0;
        position: absolute;
        z-index: 20;
    }
    #computation ul.tabs .dropdown li {
        background: #f3f3f3;
        border: none;
        margin-right: 0;
        text-align: left;
        white-space: nowrap;
    }
    #computation ul.tabs li.active, 
    #computation ul.tabs .dropdown li:hover {
        color: #0067a4;
    }
    #dropdown-menu.show-drop.active {
        border-color: #ccc;
        border-bottom-color: #fff;
    }
    #dropdown-menu {
        position: absolute;
        user-select: none;
    }
    #dropdown-button {
        background-size: 38px;
        background: url('/education/research-universities/img/nav-icons.png') no-repeat -24px center;
        background-size: 38px;
        border: 0;
        width: 16px;
        height: 16px;
        outline: none;
        vertical-align: text-bottom;
        position: relative;
    }
    #dropdown-menu.show-drop #dropdown-button {
        background: url('/education/research-universities/img/nav-icons.png') no-repeat 3px center;
        background-size: 38px;
    }
    #dropdown-menu.active>div>span+#dropdown-button, 
    #dropdown-menu:hover>div>span+#dropdown-button {
        background: url('/education/research-universities/img/nav-icons.png') no-repeat -24px center;
        background-size: 38px;
    }
    #dropdown-menu.show-drop:hover>div>span+#dropdown-button {
        background: url('/education/research-universities/img/nav-icons.png') no-repeat 3px center;
        background-size: 38px;
    }
}




/* ==========================================================================
   products (wolfram tech system)
   ========================================================================== */
#products {
    background: #16a4ab;
    padding: 1px; 
}
#products * {
    color: #fff;
}
#products .gridular {
    grid-gap: 1.5625rem;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 2rem 0;
}
#products .gridular a {
    background: #139399;
    color: #fff;
    padding: 1.5625rem;
    text-align: center;
}
#products .gridular a:hover {
    background: #3bb6bc;
}
#products .gridular img {
    height: auto;
    width: 64px
}
#products .gridular h3 {
    font-size: 1.25rem;
    margin-top: 0.75rem; 
}

#products p.explore {
    line-height: 1;
}
#products p.explore a {
    border-right: 1px solid #fff;
    font-weight: 600;
    padding: 0 0.5rem;
}
#products p.explore a:last-child {
    border-right: none;
}
#products p.explore a:hover {
    color: #6fffff;
}



/* ==========================================================================
   links
   ========================================================================== */
.links h2 {
    color: #0067a4;
}
.links + .links h2 {
    border-top: 1px solid #ccc; 
    padding-top: 3rem;
}

.links ul.gridular {
    grid-row-gap: 0;
    grid-template-columns: repeat(3, 1fr);
}
.links ul li {
    font-weight: 600;
    padding: 0 0 1rem 0.75rem;
    position: relative;
}
.links ul li:before {
    color: #047bb7;
    content: '\25AA';
    margin-left: -0.75rem;
    position: absolute;
}
.links a {
    color: #404040;
}
.links a:hover {
    color: #0067a4;
}



/* ==========================================================================
   fields
   ========================================================================== */
/*setup*/
#fields {
    background: #047bb7;
    padding: 1px; 
}
#fields h2,
#fields h3,
#fields p {
    color: #fff;
}
#fields h2 { margin-bottom: 0.75rem; }
#fields h2 + p {
    font-size: 1.125rem; 
    margin-bottom: 1.5rem; 
}
#fields h3 { 
    color: #fff; 
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0; 
    margin-top: 0.75rem;
}
#fields h3 + p { }
#fields p { }

#fields .fold { display: none; }


/*main categories*/
.gridular.main-categories {
    border-bottom: 1px solid #fff;
    grid-gap: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
    position: relative;
}
.main-categories > div { 
    border: solid #fff;
    border-width: 1px 0 0 1px;
    height: 200px;
    text-align: center;
}
.main-categories > div:nth-child(4n-3) {
    border-left-width: 0;
}
#fold-extended > .main-categories > div:nth-child(-n+4) { border-top-width: 0; }

#fields .top {     
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 1.4rem;
}
#fields .top.open { background: #074977; }

#fields .expand:hover h3 { color: #6fffff; }
#fields .expand:hover svg .st0 { fill: #6fffff; }
#fields .expand svg {
    width: 70px;
    height: 70px;
}
#fields .expand svg .st0 { fill: #fff; }
#fields #computer-science svg .st0,
#fields #statistics svg .st0 {
    fill-rule:evenodd;
    clip-rule:evenodd;
}


/*main categories popup*/
#fields .top + .fold {
    background: #fff;
    box-shadow: 0 5px 10px rgba(7, 73, 119, .5);
    padding: 1.25rem;
    position: absolute;
    width: 100%;
    text-align: left;
    left: 0;
    z-index: 999999999;
}
#fields .top + .fold > .gridular {
    grid-gap: 0.625rem 2.25rem;
}
#fields .top + .fold h3 { 
    color: #0067a4;
    font-weight: 600; 
    margin-top: 0;
    grid-column-end: span 2;
}
#fields .top + .fold p {
    color: #404040;
    line-height: 1.2;
    margin-bottom: 0;
    padding-top: 0.625rem;
}
#fields .top + .fold p.introtext { 
    line-height: 1.5;
}
#fields .top + .fold p:first-child {
    padding-top: 0;
}
#fields .top + .fold a {
    color: #606060;
    font-weight: 600;
    line-height: 1;
}
#fields .top + .fold a:hover { color: #0079c1; }


/*subcategories*/
#fields .sub-categories { 
    border-bottom: 1px solid #fff;
    padding: 2rem 0; 
}


/*show more or less*/
#fields .show-more,
#fields .show-less {
    color: #fff;
    margin: 1.25rem 0 0.625rem;
    font-size: 1.25rem;
    text-align: center;
}
#fields .show-less span,
#fields .show-more span { 
    background: url('/education/research-universities/img/fields-arrows.png') no-repeat right;
    background-size: 14px;
    padding-right: 1.375rem;
}
#fields .show-less:hover,
#fields .show-more:hover { 
    color: #6fffff; 
}



/* ==========================================================================
   spotlights (carousel)
   ========================================================================== */
/* slider */
#spotlights .slider {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    border: 2px solid #e7f7fb;
    padding: 0;
}

.cycle-slide { 
    display: flex !important;
    height:100%; 
    width: 100%;
    background: #e7f7fb;
}

#cycle-spotlights {
    grid-column: 1;
    grid-row: 1 / -1;
    z-index: 1;
    position: relative;
}

#cycle-spotlights .slide-container {
    display: grid;
    grid-template-columns: 370px 1fr;
    min-height: 210px;
}

#cycle-spotlights .slide-container .slide-image img {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: cover;
}

#cycle-pager-spotlights {
    grid-row: 2;
    grid-column: 1;
    text-align: right;
    justify-self: flex-end;
    display: flex;
    align-self: center;
    z-index: 2;
    margin-bottom: 1rem;
    margin-right: 1rem;
}

.cycle-pager-wrapper span {
    background: #ccc;
    display: inline-block;
    color: rgba(0, 0, 0, 0);
    margin: 0 0.375rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
}

.cycle-pager-wrapper span.cycle-pager-active {
    background: #0067a3;
}

.slide-content {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 1rem;
    padding: 20px;
    background: #e7f7fb;
}

.slide-content::before {
    content: '';
    width: 68px;
    height: 56px;
    background: url('/education/assets/images/quote.png') no-repeat;
    background-size: 68px;
}

.slide-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #0067a3;
    margin-top: 1rem;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.slide-content blockquote {
    display: block;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: #404040;
}

.slide-content cite::before {
    content: "\2014";
}

.slide-content cite {
    display: block;
    font-size: .9rem;
    font-weight: 400;
    font-style: italic;
    color: #404040;
    text-align: right;
    margin: 1rem 0 2rem;
    padding-left: 1rem;
    position: relative;
    width: 100%;
}

.slide-content a {
    display: table;
    font-size: 1rem;
    font-weight: 600;
    color: #0067a3;
    margin-top: 1rem;
}

.slide-content a:hover { color: #023c5d; }



/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1200px) {
    /*hero*/
    #hero .gridular {
        grid-template-columns: 490px 1fr;
        padding-top: 3rem;
    }
}


@media (max-width: 900px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 2rem;
    }
    .page-width { margin: 2rem auto; }


    /*hero*/
    #hero .gridular {
        grid-gap: 1rem;
        grid-template-columns: 430px 1fr;
        padding-top: 4rem;
    }
    /*
    #hero h1 {
        font-size: 2.75rem;
        margin-bottom: 1rem;
    }
    #hero h1 span, #hero p {
        font-size: 2.25rem;
    }
    */

    /*spotlights*/
    #cycle-spotlights { height: 390px; }
    #cycle-spotlights .slide-container {
        grid-template-columns: repeat(2, 1fr);
        height: 100%;
    }
    .slide-content {
        grid-template-columns: 35px 1fr;
    }
    .slide-content::before { 
        width: 35px;
        height: 35px;
        background-size: 35px;
    }
}


@media (max-width: 600px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 1rem;
    }
    .gridular {
        grid-template-columns: 1fr !important;
    }


    /*hero*/
    #hero .gridular {
        padding: 4rem 0 2rem;
    }
    #hero .gridular > div {
        text-align: center;
    }


    /*computation tabs*/
    .tabs .tab-link:not(.current),
    .mobile-tabs .tab-link.current {
        display: none;
    }
    .tab-content .gridular hr {
        grid-column-end: span 1;
    }


    /*products*/
    #products .gridular {
        grid-template-rows: 1fr;
    }


    /*fields*/
    .gridular.main-categories {
        grid-template-columns: 1fr 1fr !important;
    }
    .main-categories > div:nth-child(odd) {
        border-left-width: 0;
    }
    #fold-extended > .main-categories > div:nth-child(-n+2) { 
        border-top-width: 0;
    }
    #fold-extended > .main-categories > div:nth-child(4n+3),
    #fold-extended > .main-categories > div:nth-child(4n+4) { 
        border-top-width: 1px;
    }
    #fields .top + .fold .gridular h3 {
        grid-column-end: span 1;
    }


    /*spotlights*/
    #cycle-spotlights { height: 550px; }
    #cycle-spotlights .slide-container {
        grid-template-columns: 1fr;
        height: 100%;
    }
    .slide-content {
        grid-template-columns: 25px 1fr;
        height: auto;
        padding: 15px;
    }
    .slide-content::before { 
        width: 25px;
        height: 25px;
        background-size: 25px 
    }
    .slide-content h3 { margin-top:0 }
    #cycle-pager-spotlights {
        margin-right:0 ; 
        justify-self: center; 
    }
}

@media (max-width: 320px) {}