/**
 * Renato Giordanelli - Main Stylesheet
 * Author: Renato Giordanelli
 * Version: 2.0
 * 
 * Table of Contents:
 * 1. Reset & Base
 * 2. Typography
 * 3. Links
 * 4. Layout - Fixed Elements
 * 5. Layout - Header/Hero
 * 6. Layout - Content Sections
 * 7. Animations
 * 8. Media Queries
 */

/* ============================================
   1. RESET & BASE
   ============================================ */

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Fira Sans", sans-serif;
}

::selection {
    background: #000;
    color: #fff;
}

::-moz-selection {
    background: #000;
    color: #fff;
}

mark {
    background: #e6e6e6;
}

/* ============================================
   2. TYPOGRAPHY
   ============================================ */

p {
    line-height: 22px;
}

.titolo {
    font-size: 28px;
    padding-top: 25px;
}

.cambia_mobile {
    display: none;
}

/* ============================================
   3. LINKS
   ============================================ */

a {
    color: #7e4fdc;
    text-decoration: none;
}

a:hover {
    color: #ff7de9;
    text-decoration: none;
}

/* ============================================
   4. LAYOUT - FIXED ELEMENTS
   ============================================ */

/* Body Border Frame */
body {
    border-left: 25px solid #e6e6e6;
    border-right: 25px solid #e6e6e6;
    -webkit-animation-name: body_sx_dx;
    animation-name: body_sx_dx;
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
}

body:before,
body:after {
    content: "";
    position: fixed;
    background: #e6e6e6;
    left: 0;
    right: 0;
    height: 25px;
    z-index: 9999;
    -webkit-animation-name: body;
    animation-name: body;
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
}

body:before {
    top: 0;
}

body:after {
    bottom: 0;
}

/* IE9 Fallback */
.lt-ie9 body {
    border: none;
}

.lt-ie9 body:before,
.lt-ie9 body:after {
    display: none;
}

/* Fixed Menu (Left Sidebar) */
#fixed_menu {
    position: fixed;
    width: 60px;
    height: 100%;
    z-index: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    left: 25px;
    border-right: 5px solid #f3f3f3;
    -webkit-animation-name: fixed;
    animation-name: fixed;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}

#fixed_menu:hover {
    border-right: 5px solid #76ff03;
}

#fixed_menu .container_text {
    width: 100%;
}

#fixed_menu .container_text ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
}

#fixed_menu .container_text ul li {
    margin-top: 49px;
    list-style: none;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#fixed_menu .container_text ul li:first-child {
    margin-bottom: 25px;
}

#fixed_menu .container_text ul li a {
    text-decoration: none;
    color: #000;
}

#fixed_menu .container_text ul li a:hover {
    color: #c9c9c9;
}

/* Fixed Block (Right Sidebar) */
#fixed_block {
    position: fixed;
    width: 60px;
    height: 100%;
    z-index: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #000;
    right: 25px;
}

#fixed_block .container_text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

#fixed_block .container_text h1 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    font-size: 13px;
    letter-spacing: 4px;
    color: #fff;
}

/* ============================================
   5. LAYOUT - HEADER/HERO
   ============================================ */

.intro {
    height: 100vh;
}

.table {
    display: table;
    width: 100%;
    margin: 0;
    max-width: none;
}

.content_middle {
    display: table-cell;
    vertical-align: middle;
}

.container {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.container picture {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Left Rectangle (Image) */
.container .rettangolo_sx {
    width: 30%;
    height: auto;
    border-left: 5px solid #c9c9c9;
    -webkit-animation-name: rettangolo_sx;
    animation-name: rettangolo_sx;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}

.container .rettangolo_sx:hover {
    border-left: 5px solid #76ff03;
}

.container .rettangolo_sx img {
    width: 40%;
    height: auto;
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
    -webkit-animation-name: illuminato;
    animation-name: illuminato;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

/* Right Rectangle (Contact Info) */
.container .rettangolo_dx {
    width: 30%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 5px solid #c9c9c9;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    text-align: right;
    -webkit-animation-name: animation_rettaongolo_dx;
    animation-name: animation_rettaongolo_dx;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}

.container .rettangolo_dx:hover {
    border-top: 5px solid #76ff03;
}

.container .rettangolo_dx p {
    margin-bottom: 0;
}

/* ============================================
   6. LAYOUT - CONTENT SECTIONS
   ============================================ */

.Sentiero_Container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 60%;
    text-align: left;
    margin: 0 auto;
    padding: 80px 80px 80px 0;
    border-right: 5px solid #ddd;
}

.Sentiero_Container:hover {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 60%;
    text-align: left;
    margin: 0 auto;
    padding: 80px 80px 80px 0;
    border-right: 5px solid #76ff03;
}

.Sentiero_Container_2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 60%;
    text-align: left;
    margin: 0 auto;
    padding: 80px 80px 80px 0;
    border-right: 5px solid #fff;
}

.Sentiero_Container_2:hover {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 60%;
    text-align: left;
    margin: 0 auto;
    padding: 80px 80px 80px 0;
    border-right: 5px solid #ddd;
}

.Sentiero_Container_3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 60%;
    text-align: left;
    margin: 0 auto;
    padding: 80px 80px 80px 0;
    border-right: 5px solid #fff;
}

.Sentiero_Container h1,
.Sentiero_Container:hover h1,
.Sentiero_Container_2 h1,
.Sentiero_Container_2:hover h1,
.Sentiero_Container_3 h1 {
    margin-top: 0;
}

/* Footer Heart Section */
.heart {
    text-align: center;
    padding: 40px 0;
}

.heart p {
    margin: 0;
}

/* ============================================
   7. ANIMATIONS
   ============================================ */

/* Body Border Animation */
@-webkit-keyframes body {
    from {
        background: #76ff03;
    }
    to {
        background: #e6e6e6;
    }
}

@keyframes body {
    from {
        background: #76ff03;
    }
    to {
        background: #e6e6e6;
    }
}

@-webkit-keyframes body_sx_dx {
    from {
        border-right: 25px solid #76ff03;
        border-left: 25px solid #76ff03;
    }
    to {
        border-right: 25px solid #e6e6e6;
        border-left: 25px solid #e6e6e6;
    }
}

@keyframes body_sx_dx {
    from {
        border-right: 25px solid #76ff03;
        border-left: 25px solid #76ff03;
    }
    to {
        border-right: 25px solid #e6e6e6;
        border-left: 25px solid #e6e6e6;
    }
}

/* Fixed Menu Animation */
@-webkit-keyframes fixed {
    from {
        border-right: 5px solid #76ff03;
    }
    to {
        border-right: 5px solid #f3f3f3;
    }
}

@keyframes fixed {
    from {
        border-right: 5px solid #76ff03;
    }
    to {
        border-right: 5px solid #f3f3f3;
    }
}

/* Left Rectangle Animation */
@-webkit-keyframes rettangolo_sx {
    from {
        border-left: 5px solid #76ff03;
    }
    to {
        border-left: 5px solid #c9c9c9;
    }
}

@keyframes rettangolo_sx {
    from {
        border-left: 5px solid #76ff03;
    }
    to {
        border-left: 5px solid #c9c9c9;
    }
}

/* Right Rectangle Animation */
@-webkit-keyframes animation_rettaongolo_dx {
    from {
        width: 50%;
        border-top: 5px solid #76ff03;
    }
    to {
        width: 30%;
        border-top: 5px solid #c9c9c9;
    }
}

@keyframes animation_rettaongolo_dx {
    from {
        width: 50%;
        border-top: 5px solid #76ff03;
    }
    to {
        width: 30%;
        border-top: 5px solid #c9c9c9;
    }
}

/* Image Brightness Animation */
@-webkit-keyframes illuminato {
    0%, 100% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }
    10%, 90% {
        -webkit-filter: brightness(110%);
        filter: brightness(110%);
    }
    20%, 80% {
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
    }
    30%, 70% {
        -webkit-filter: brightness(125%);
        filter: brightness(125%);
    }
    40%, 60% {
        -webkit-filter: brightness(130%);
        filter: brightness(130%);
    }
    50% {
        -webkit-filter: brightness(135%);
        filter: brightness(135%);
    }
}

@keyframes illuminato {
    0%, 100% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }
    10%, 90% {
        -webkit-filter: brightness(110%);
        filter: brightness(110%);
    }
    20%, 80% {
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
    }
    30%, 70% {
        -webkit-filter: brightness(125%);
        filter: brightness(125%);
    }
    40%, 60% {
        -webkit-filter: brightness(130%);
        filter: brightness(130%);
    }
    50% {
        -webkit-filter: brightness(135%);
        filter: brightness(135%);
    }
}

/* ============================================
   8. MEDIA QUERIES
   ============================================ */

/* Tablet (400px - 900px) */
@media screen and (max-width: 900px) and (min-width: 400px) {
    .container {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: auto;
    }

    .container .rettangolo_sx {
        width: 30%;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-left: 0 solid #c9c9c9;
        -webkit-animation: none;
        animation: none;
    }

    .container .rettangolo_sx:hover {
        border-left: 0 solid #c9c9c9;
    }

    .container .rettangolo_sx img {
        width: 100%;
        height: auto;
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
        -webkit-animation-name: illuminato;
        animation-name: illuminato;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
    }

    .container .rettangolo_dx {
        width: 100%;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        margin-top: 14px;
        border-top: 0 solid #c9c9c9;
        -webkit-animation: none;
        animation: none;
    }

    .container .rettangolo_dx:hover {
        border-top: 0 solid #c9c9c9;
    }
}

/* Small Mobile (0px - 600px) - Full Layout Changes */
@media screen and (max-width: 600px) {
    /* Hide Fixed Sidebars */
    #fixed_block,
    #fixed_menu {
        display: none;
    }

    /* Remove Body Border */
    body {
        border-left: 0;
        border-right: 0;
        -webkit-animation: none;
        animation: none;
    }

    body:before,
    body:after {
        display: none;
    }

    /* Hero Section - Mobile Centered */
    .intro {
        height: auto;
        min-height: 100vh;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .table {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
    }

    .content_middle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
    }

    .container {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 20px 15px;
        text-align: center;
    }

    .container .rettangolo_sx {
        width: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-left: 0;
        -webkit-animation: none;
        animation: none;
    }

    .container .rettangolo_sx:hover {
        border-left: 0;
    }

    .container .rettangolo_sx img {
        width: 100%;
        height: auto;
    }

    .container .rettangolo_dx {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        margin-top: 20px;
        border-top: 0;
        -webkit-animation: none;
        animation: none;
    }

    .container .rettangolo_dx:hover {
        border-top: 0;
    }

    .container .rettangolo_dx p {
        text-align: center;
    }

    /* Show Mobile Name */
    .cambia_mobile {
        display: block;
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 20px;
    }

    .titolo {
        padding-top: 0;
    }

    /* Content Sections - Mobile */
    .Sentiero_Container,
    .Sentiero_Container:hover,
    .Sentiero_Container_2,
    .Sentiero_Container_2:hover,
    .Sentiero_Container_3 {
        width: 90%;
        height: auto;
        text-align: left;
        margin: 0 auto;
        padding: 20px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-right: 0 solid transparent;
    }

    .Sentiero_Container h1,
    .Sentiero_Container:hover h1,
    .Sentiero_Container_2 h1,
    .Sentiero_Container_2:hover h1,
    .Sentiero_Container_3 h1 {
        margin-top: 30px;
        font-size: 26px;
    }

    /* Footer - Mobile */
    .heart {
        padding: 30px 15px;
    }
}

/* ============================================
   9. ACCESSIBILITY & PRINT
   ============================================ */



/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    #fixed_block,
    #fixed_menu {
        display: none !important;
    }

    body {
        border: none !important;
    }

    body:before,
    body:after {
        display: none !important;
    }

    .Sentiero_Container,
    .Sentiero_Container_2,
    .Sentiero_Container_3 {
        width: 100%;
        padding: 20px 0;
        border: none;
        page-break-inside: avoid;
    }

    a {
        color: #000;
    }

    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}