/*
Theme Name: Workbook
Author: Michel Tinelli
Description: Tema di visualizzazione dei lavori eseguiti dagli allievi del CSIA.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: workbook
Tags: bootstrap, responsive, column, ajax, jquery
*/
@import url("https://use.typekit.net/yco5leq.css");

body {
    font-family: neue-haas-unica, sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
}

/* Typography */
h1 {
    font-size: 66px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 20px;
}

h1,
h2,
h3 {
    font-weight: 700;
}


/* end Typography */
/* Header */


header h1 {
    font-size: inherit;
    font-weight: 700;
    margin-left: 20px;
}

header h1 small {
    font-weight: 300;
}

header h1 a:link,
header h1 a:visited {
    color: inherit;
    text-decoration: none;
}

header h1 a:hover,
header h1 a:link {

}

header h2 {
    margin-top: 100px;
    font-size: 66px;
}

header > h1 > small,
header h2 > small {
    font-weight: 300;
}

header > p {
    font-weight: 300;
    padding: 0 10px;

}

header > nav {
    /*margin-top: 50px;*/
    margin-top: 0px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.97);
}

header > nav > ul > li:first-child {
    border-top: 1px solid #000;
    margin-top: 40px;
}

header > nav > ul > li {
    border-bottom: 1px solid #000;
    padding: 0 10px;

}

header > nav > ul > li a:link,
header > nav > ul > li a:visited {
    display: block;
    color: #000;
    text-decoration: none;
    font-size: 24px;
    padding: 10px 0;
    font-weight: 600;
    transition: padding-left 0.25s, color 0.25s;
}

header > nav > ul > li a:hover,
header > nav > ul > li a:active
{
    color: #ee0011;
    padding-left: 20px;
}

header > nav ul > li .active {
    color: #ee0011!important;
}

header > .menu {
    padding: 15px;
    /*display: none;*/
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
}

header > .menu > section {
    display: flex;
    height: 50px;
}

header > .menu a:link,
header > .menu a:visited {
    color: #000;
    text-decoration: none;
}

header > .menu a:hover,
header > .menu a:active {
    color: rgba(0, 0, 0, 0.8);
}

header > .menu > section > div {
    width: 50%
}

header > .menu > section > div#menu {
    text-align: right;
    font-size: 20px;
}

/*header .active-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
    #box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
}*/

/*header .active-logo {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.25s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
        display: none;

    }

    100% {
        opacity: 1;
    }
}*/

header button.hamburger {
    outline: none;
    padding-right: 0;
}

header button.hamburger .hamburger-label {
    margin-left: 20px;
}

/*

active-header");
                $(".menu").addClass("active-menu");

*/

/* End Header */

/* Content */
main {
    padding-bottom: 100px;
}

main > h2 {
    margin: 120px 0 0 0;
    padding: 15px 0;
    /*text-transform: uppercase;*/
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;

    font-weight: 600;
}

main section.article {
    /*padding: 0 10px;*/
    margin-top: 40px;
}

main section.article article {
    margin-top: 40px;
}

main section.article article > a {
    text-decoration: none;
}

main section.article article > a:link > figure,
main section.article article > a:visited > figure {
    font-size: 20px;
    font-weight: 300;
    color: #000;
    transition: color 0.25s;
}

main section.article article > a:hover > figure,
main section.article article > a:active > figure {
    color: #ee0011;
}

main section.article article > a:link > figure > img,
main section.article article > a:visited > figure > img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    transition: opacity 0.25s;
}

main section.article article > a:hover > figure > img,
main section.article article > a:active > figure > img {
    opacity: 0.9;
}

main section.article article > a > figure > figcaption > h3 {
    font-weight: 600;
    margin: 0;
}

main section.article article > a > figure > figcaption > ul {
    margin: 0;
    padding: 0;
}

main section.article article > a > figure > figcaption > ul > li {
    display: inline;
    margin-right: 10px;
}

main .filter {
    border-bottom: 1px solid #000;
}

main .filter > ul {
    margin-top: 40px;
    font-size: 20px;
    font-weight: 300;
}

main .filter > ul > li {
    text-align: center;
    text-transform: capitalize;
}

main .filter > ul small {
    font-size: 11px;
    font-weight: 300;
}

main .filter > ul a.active {
    font-weight: bold;
}

main .filter > ul a:link,
main .filter > ul a:visited {
    color: #000;
    transition: color 0.25s;
}

main .filter > ul a:hover,
main .filter > ul a:active {
    color: #ee0011;
    text-decoration: none;
}

/* End Content */

/* Post */

main .filter_post {
    border-bottom: 1px solid #000;
}

main .filter_post > ul {
    margin-top: 40px;
    font-size: 20px;
    font-weight: 300;
}

main .filter_post > ul > li {
    text-align: center;
}

main .filter_post > ul a:link,
main .filter_post > ul a:visited {
    color: #000;
    transition: color 0.25s;
    font-weight: bold;
}

main .filter_post > ul a:hover,
main .filter_post > ul a:active {
    color: #ee0011;
    text-decoration: none;
}


main section.media {
    margin-top: 30px;
}

main section.media .carousel {
    height: 750px;
}

main section.media .carousel-item img,
main section.media .carousel-item iframe,
main section.media .carousel-item .active img,
main section.media .carousel-item .active iframe {
    width: 100%;
    height: 750px;
    border: 0;
    padding: 0;
    margin: 0;
}

main section.media a.carousel-control-next,
main section.media a.carousel-control-prev {
    color: #000000;
    font-size: 36px;
    position: absolute;
    width: 100px;
    z-index: 0;
}

main section.media a.carousel-control-next {
    margin-right: -120px;
}

main section.media a.carousel-control-prev {
    margin-left: -120px;
}


main section.content-post section:first-child,
main section.content-post section:last-child {
    margin-top: 30px;
}

main section.content-post section:first-child {
    padding-right: 15px;
}

main section.content-post section:last-child .social-link {
    text-align: right;
}

main section.content-post section:last-child li.social img {
    width: 32px;
    height: 32px;
}

main section.content-post section:last-child ul > li.social a:link,
main section.content-post section:last-child ul > li.social a:visited {
    transition: opacity 0.25s;
}

main section.content-post section:last-child ul > li.social a:hover,
main section.content-post section:last-child ul > li.social a:active {
    opacity: 0.7;
}

main section.content-post li {
    margin-bottom: 20px;
}

main section.article h4 {
    margin: 80px 0 0 0;
    padding: 15px 0;
    border-bottom: 1px solid #000;
}

/* End Post */

/* Footer */
footer {
    display: flex;
    background-color: #000;
    font-size: 14px;
    color: #fff;
    padding-bottom: 65px;
}

footer section.row {
    padding: 0 10px;
}

footer img {
    margin-top: 135px;
}

footer h4 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 120px;
}

footer a:link,
footer a:visited {
    color: #fff;
    text-decoration: underline;

}

footer a:hover,
footer a:active {
    text-decoration: none;
}

footer section ul {
    bottom: 0;
    right: 25px;
    position: absolute;
}

footer ul > li.social img {
    width: 32px;
    height: 32px;
}

footer ul > li.social a:link,
footer ul > li.social a:visited {
    transition: opacity 0.25s;
}

footer ul > li.social a:hover,
footer ul > li.social a:active {
    opacity: 0.7;
}
/* End Footer */


@media (max-width: 576px) {

    header h2 {
        font-size: 50px;
    }

    main section.media .carousel {
        height: 345px;
    }
    main section.media .carousel-item img,
    main section.media .carousel-item iframe,
    main section.media .carousel-item .active img,
    main section.media .carousel-item .active iframe  {
        height: 345px;

    }

    main section.media a.carousel-control-next {
        margin-right: 10px;
    }

    main section.media a.carousel-control-prev {
        margin-left: 10px;
    }

    footer {
        flex-wrap: wrap;
    }

    footer section ul {
        position: static;
    }
}

@media (min-width: 768px) {

    header h2 {
        font-size: 50px;
    }

    main section.media .carousel {
        height: 465px;
    }

    main section.media .carousel-item img,
    main section.media .carousel-item iframe,
    main section.media .carousel-item .active img,
    main section.media .carousel-item .active iframe {
        height: 465px;

    }

    main section.media a.carousel-control-next {
        margin-right: 10px;
    }

    main section.media a.carousel-control-prev {
        margin-left: 10px;
    }
}


@media (min-width: 992px) {

    main section.media .carousel {
        height: 630px;
    }
    main section.media .carousel-item img,
    main section.media .carousel-item iframe,
    main section.media .carousel-item .active img,
    main section.media .carousel-item .active iframe  {
        height: 630px;

    }
}