﻿body {
    max-width: 1300px;
    background-color: transparent;
    margin: auto;
    margin-top: 5vh;
    text-align: justify;
    border-left: 3px solid teal;
    border-right: 3px solid teal;
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;
    border-end-start-radius: 20px;
    border-end-end-radius: 20px;
}


@font-face {
    font-family: FontWinMark;
    src: url("conthrax-sb.ttf");
}

@font-face {
    font-family: FontWinMarkfX;
    src: url("MISTRAL.TTF");
}

.FontWinMark {
    font-family: FontWinMark;
    color: teal;
    cursor: default;
}

.FontWinMarkFx {
    font-family: FontWinMarkfX;
    color: orangered;
    cursor: default;
}

#WinFx{
    text-decoration: none;
    cursor: pointer;
}

/*#region Immagini */

.Slider {
    width: 100%;
    border-radius: 20px;
}

.Shad{
    box-shadow: 0.3em 0.3em 0.5em gray;
    /*border: solid 0.1em teal;*/
    border-radius: 20px;
}

.ShadTeal{
    box-shadow: 0em 0em 4em teal;
    /*border: solid 0.1em teal;*/
    border-radius: 20px;
}

.ImageDesc{
    float:left;
    width:40%;
}

.ImgZoom:hover{
    opacity: 0.7;
    box-shadow: 0.3em 0.3em 0.5em black;
    cursor: pointer;
}

.SectorBtn{
    width: 3.7em;
    position:fixed;
    display: flex;
    bottom:1.2em;
    right:0.35em;
    height: 2.3em;
    background-color: white;
    border: solid 2px teal;
    border-radius: 0.7em;
    color: teal;
    text-align: center;
    cursor: pointer;
}

.SectorBtn1{
    width: 3.7em;
    position:fixed;
    display: flex;
    bottom:4em;
    right:0.35em;
    height: 2.3em;
    background-color: white;
    border: solid 2px teal;
    border-radius: 0.7em;
    color: teal;
    text-align: center;
    cursor: pointer;
}

.SectorBtnBack{
    display: none;
    width: 3.7em;
    position:fixed;
    display: flex;
    bottom:1.2em;
    right:0.35em;
    height: 2.3em;
    background-color: white;
    border: solid 2px white;
    border-radius: 0.7em;
    color: teal;
    text-align: center;
}

.SectorBtnBack1{
    display: none;
    width: 3.7em;
    position:fixed;
    display: flex;
    bottom:4em;
    right:0.35em;
    height: 2.3em;
    background-color: white;
    border: solid 2px white;
    border-radius: 0.7em;
    color: teal;
    text-align: center;
}

.SectorBtn:hover{
    transition: 0.3s ease-in-out;
    background-color: white;
    background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(0,128,128,0.4598214285714286) 0%, rgba(0,128,128,0.738813025210084) 100%, rgba(0,128,128,0) 100%);
    color: white;
}

.SectorBtn1:hover{
    transition: 0.3s ease-in-out;
    background-color: white;
    background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(0,128,128,0.4598214285714286) 0%, rgba(0,128,128,0.738813025210084) 100%, rgba(0,128,128,0) 100%);
    color: white;
}

.BtnScroll{
    font-size: x-large;
    margin: auto;
    cursor: pointer;
}


.BtnClose {
    font-size: x-large;
    margin: auto;
    cursor: pointer;
}

/*#endregion Immagini*/
/*#region Colori */
.T_Red {
    color: red;
}

.B_Red {
    background-color: red;
}

.T_teal {
    color: teal;
}


/*#endregion Colori*/

/*#region Menu */
.Sector {
    border: solid 3px teal;
    border-top: solid 1.95px teal;
    border-bottom: solid 1.95px teal;
    border-radius: 1.5em
}

    .Sector:hover {
        background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(0,128,128,0.4598214285714286) 0%, rgba(0,128,128,0.738813025210084) 100%, rgba(0,128,128,0) 100%);
    }

.SectorSel {
    width: 92%;
    margin: auto;
    border: solid 3px teal;
    border-top: solid 1.95px teal;
    border-bottom: solid 1.95px teal;
    border-radius: 1.5em;
    background: linear-gradient(90deg, rgba(0,128,128,0.39) 0%, rgba(0,128,128,0.1) 50%, rgba(0,128,128,0.39) 100%);
}

    .SectorSel:hover {
        background: linear-gradient(90deg, rgba(0,128,128,0.39) 0%, rgba(0,128,128,0.1) 50%, rgba(0,128,128,0.39) 100%);
    }



.Intes {
    height: 7em;
    border-radius: 1.5em;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    color: teal;
}

    .Intes:hover {      
        transition: 0.4s ease-in-out;
        color: white;
    }

.IntesSel {
    height: 7em;
    border-radius: 1.5em;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    color: teal;
    transition: 0.5s ease-in-out;
}

    .IntesSel:hover {
        cursor: pointer;
    transition: 0.3s ease-in-out;
    text-shadow: teal 0px 0px 5px, teal 0px 0px 10px, teal 0px 0px 15px, transparent 0px 0px 20px, transparent 0px 0px 30px, transparent 0px 0px 40px, transparent 0px 0px 50px, transparent 0px 0px 75px, 2px 2px 20px rgba(206,206,206,0);
    color: white;
    }


.IconSector {
    margin: auto;
    font-size: 4.2em;
}

    .IconSector i {
        margin-left: 22%;
        background-color: transparent;
    }

.TitleSector {
    margin-top: auto;
    margin-bottom: auto;
}

    .TitleSector span {
        margin-left: 0%;
        font-family: FontWinMark;
        font-size: x-large;
    }

.OpenSector {
    font-size: 2.5em;
    margin-top: auto;
    margin-bottom: auto;
}

.Desc{
    float:right;
    width:58%;
    margin-right:2%;
}



.OpenDescription {
    overflow-y: hidden;
    animation: OpenEffect 0.5s linear ;
    height: 33em;
}

@keyframes OpenEffect {

    0% {
        height: 0vh;
    }

    10% {
        height: 10vh;
    }

    20% {
        height: 20vh;
    }
}

.CloseDescription {
    display: none;
}
/*#endregion Menu*/

/*#region Font */
p{
    font-family: arial;
}

.Bold{
    font-weight: bolder;
}

.Ital{
    font-style: italic;
}

/*#endregion Font*/

/*#region Modal */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }

.modal-content {
    margin: auto;
    text-align:center;
    display: block;
    width: 80%;
    max-width: 1000px;
    z-index:2
}

.close {
    color: rgba(187,187,187,0.5);
    float: right;
    font-size: 2.5em;
    font-weight: bold;
    transition: 0.6s ease;
    transform: translate(-0.625em,-1em);
}

    .close:hover,
    .close:focus {
        color: white;
        text-decoration: none;
        cursor: pointer;
    }

  /*ANIMATION*/

.modal-content{  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }

  @media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
  }

/*#endregion Modal*/

/*#region footer */


.FootC{
    height: 2em; 
    background-color: transparent; 
    text-align: center;
}

.Footer{
    background-color: #ffffff;
    background-image: linear-gradient(180deg, #ffffff 0%, #FFFFFF 1%, #479696 59%, #008080 100%);
    border-radius: 0 0 20px 20px;
}

.Footer a:link {
    color: white;
  }
  
.Footer a:visited {
    color: white;
  }

.FootShad{
    text-shadow: 0em 0em 1em white;
    }

#WinLink{
    color: teal;
    text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, white 0px 0px 20px, white 0px 0px 30px, white 0px 0px 40px, white 0px 0px 50px, white 0px 0px 75px, 2px 2px 20px rgba(206,206,206,0);
    transition: 0.5s ease-in-out;
}

#WinLink:hover{
    cursor: pointer;
    transition: 0.3s ease-in-out;
    text-shadow: teal 0px 0px 5px, teal 0px 0px 10px, teal 0px 0px 15px, white 0px 0px 20px, white 0px 0px 30px, white 0px 0px 40px, white 0px 0px 50px, white 0px 0px 75px, 2px 2px 20px rgba(206,206,206,0);
    color: white;
}

#links:hover{
    cursor: pointer;
    text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, white 0px 0px 20px, white 0px 0px 30px, white 0px 0px 40px, white 0px 0px 50px, white 0px 0px 75px, 2px 2px 20px rgba(206,206,206,0);
    transition: 0.3s ease-in-out;
    color: teal;
}

/*#endregion foter*/