/**********************************************************************/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; box-sizing: border-box;}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration: none;}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
/**********************************************************************/
html,body {height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;}

#topbar{
   /* z-index: 0;*/
    width: 100%;
    height: 110px;
    position: fixed;
    z-index: 10;
}
#main_nav{
    height: 50px;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    position: fixed;
}
.box1{
    width: auto;
    height: 50px;
    padding-left: 20px;    
    padding-top: 20px;
}
.box_button{
    width: auto;
    height: 50px;
    text-align: right;
    padding-top: 20px;
    padding-right: 20px;
}
.box_button button{
    height: 40px;
    border-radius: 4px;
}
         /*MENU*/

#menu{
    top: 60px;
    height: 50px;
    width: 50%;
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    position: fixed;
    left: 40%;
    margin-left: -15%;
    gap: 10px;

}

#menu a{
    color: #395C7A;
    font-size: 15px;
}
#menu a:hover{
    font-size: 19px;
    color: #F5BA5C;
}

/* MAIN CONTENT*/

#main_content{
    z-index: 1;
    position: relative;
    width: 100%;
    top: 200px;
    margin: 0 auto;
}

#box2{
    top: 130px;
    width: 80%;
    height: auto;
    margin: 0 auto;
}

   /* LEFT BOX*/

#left_box{width: 40%;position: absolute;}
#left_box div{width: 100%;}
#left_box div img{width: 80%;}



   /* RIGHT BOX*/ 

#right_box{width: 60%;position: relative;left: 50%;}
#right_box h1{

    position: relative;
    top: 20px;
    width: 50%;
    padding-bottom: 10px;
    letter-spacing: 2px;
}
#right_box p{
    position: relative;
    top: 180px;
    text-align: left;
    letter-spacing: 2px;
    width: 90%;
}

#right_box div{
    position: relative;
    width: 80%;
    top: 200px;
    left: -50px;
}
#right_box div img{
    width: 100%;
}
/*BOX3*/


#box3{
    width: 80%;
    margin: 0 auto;
    height: auto;
    padding-bottom: 450px;
}
#box3 h2{
    position: relative;
    top:300px;
    left: 20px;
}
#box3 p{
    position: relative;
    top: 400px;
    margin: 0 auto;
    text-align:justify;
    width: 90%;
}
#box3 img{
    width: 50%;
    position: relative;
    top: 200px;
    left: 50%;
}


/* Footer Container */
#box_foot {
    position: relative;
    width: 100%;
    padding: 10px 5%;
    background-color: #395C7A;
    display: flex;
    flex-wrap: nowrap; /* senza wrap per allineare altezza identica */
    gap: 50px;
    box-sizing: border-box;
    align-items: stretch; /* assicurati che tutti abbiano stessa altezza */
}
#box_f1 {
  
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  gap: 10px;
}
#box_f1 .foto img {
  width: auto;
  max-height: 250PX;
  height: auto;
  border-radius: 10px;
}

#box_f1 .testo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

#box_f1 .testo h3{
  text-decoration: none;
  color: white;
  font-size: 20px;
  text-align: left;
  line-height: 2;
}
#box_f1 .testo a,
#box_f1 .testo p {
  text-decoration: none;
  color: white;
  font-size: 13px;
  text-align: left;
  line-height: 1.8;
}
#box_f1 a:hover, #box_f2 a:hover {
    text-decoration: underline;
}
#box_f2, #box_f3 {
    flex: 1; /* ognuno occupa uguale spazio, altezza identica */
    color: white;
    display: flex;
    flex-direction: column; /* per contenuti verticali ordinati */
}
#box_f2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 0;
    margin-right: 0;
}
/* Titoli Footer */
#box_f2 h3 {
    margin-bottom: 20px;
    font-size: 22px;
    text-align: center;
}

/* Link footer */
#box_f2 a {
    color: white;
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    text-align: center;
}


/* Immagini footer */

#box_f2 div a img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    max-height: 500px;
}

/* Form area */
#box_f3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 0;
    margin-right: 0;
}
#row_t {
    margin-bottom: 10px;
}
.col_25 {
    width: 100%;
    margin-bottom: 10px;
}
.col_25 input {
    width: 100%;
    height: 35px;
    border-radius: 4px;
    padding: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.col_75 {
    width: 100%;
    margin-bottom: 10px;
}
textarea {
    width: 100%;
    border-radius: 4px;
    padding: 8px;
    resize: vertical;
    border: 1px solid #ccc;
    box-sizing: border-box;
    height: 120px;
}

#f_button {
    width: 150px;
    align-self: flex-start;
    padding: 10px;
    background-color: #F5BA5C;
    color: black;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#f_button:hover {
    background-color: #d4a853;
}
@media only screen and (max-width: 768px) {

    #main_nav{flex-flow: column nowrap;}
    .box1{width: 100%;text-align: center;}
    .box_button{width: 100%;margin: auto;padding-right: 0;text-align: center;}
    .box_button button {width: 80%;}
    .show{display: none;}

    #menu{width: 100%;left:0%;margin: 0 auto; top: 100px;}
    /* BOX 2 */
    #box2 {width: 100%;height: auto;}
    #left_box {width: 100%;position: relative;}
    
    #left_box div img{left: 5%;top: 0px;width: 100%;}
   
   
    #right_box {width: 100%;position: relative;left: 0%;}
    #right_box p{top: 100px; width: 80%;left: 10%;text-align: center;}
    #right_box h1{top: 50px; width: 80%;left: 10%;text-align: center;}
    #right_box div{width: 100%;left: 0%; top: 100px;}
    /* BOX 3 */
    #box3 {width: 100%;height: auto;}
    #box3 h2 {text-align: center;left: 0;top: 250px;}
    #box3 p{top: 300px;text-align:center;}


     /* FOOTER */

    #box_foot {

        flex-direction: column;

        padding: 20px 5%;

        height: auto;

    }

    #box_f1, #box_f2, #box_f3 {

        flex: 1 1 100%;

        margin-bottom: 30px;

    }

    #f_button {

        width: 100%;

        height: 50px;

    }

}
  input[type=text], select, textarea{
    width: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
  }
  label {
    padding: 12px 12px 12px 0;
    display: inline-block;
  }
  input[type=submit] {
    background-color: #395C7A ;
    color: #F5BA5C;
    padding: 12px 20px;
    border: 2px;
    border-color: #F5BA5C;
    border-radius: 4px;
    cursor: pointer;
    float: right;
    margin-right: 10%;
  }



  .bg_black{background-color: black;}
  .bg_white{background-color: white;}
  .bg_grey{background-color: #ccc;}
  .bg_blue{background-color: #395C7A;}
  .bg_gold{background-color: #F5BA5C;}
  
  .c_white{color: white;}
  .c_gold{color: #F5BA5C}
  .c_black{color: black;}
  .c_blue{color: #395C7A;}

  .font_14{font-size: 14px;}
  .font_16{font-size: 16px;}
  .font_18{font-size: 18px;}
  .font_20{font-size: 20px;}
  .font_22{font-size: 22px;}
  .font_24{font-size: 24px;}
  .font_26{font-size: 26px;}
  .font_28{font-size: 28px;}
  .font_30{font-size: 30px;}
  .font_32{font-size: 32px;}
  .font_34{font-size: 34px;}
  .font_36{font-size: 36px;}
  .font_38{font-size: 38px;}
  .font_40{font-size: 40px;}

  .LineH_25{line-height: 25px;}

  .comfortaa {
    font-family: "Comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  }
  .annie-use your telescope-regular {
    font-family: "Annie Use Your Telescope", cursive;
    font-weight: 400;
    font-style: normal;
  }