/* PULSANTE VERIFICA CANONE*/



@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Koulen&family=Lato&family=Nunito&family=Playfair+Display:ital@1&family=Prata&family=Raleway:ital,wght@1,100&family=Roboto&family=Roboto+Condensed&family=Teko&display=swap');



.btn{



font-family: Roboto, sans-serif;

font-weight: 500;

font-size: 14px;

color: #fff;

background-color: #063461;

padding: 10px 30px;

border: solid #949ba3 2px;

box-shadow: rgb(0, 0, 0) 6px 6px 6px -3px;

border-radius: 7px;

transition : 1241ms;

transform: translateY(0);

display: flex;

flex-direction: row;

align-items: center;

cursor: pointer;

text-transform: uppercase;

}



.btn:hover{



transition : 1241ms;

padding: 10px 27px;

transform : translateY(-7px);

background-color: #c2bebe;

color: #001a33;

border: solid 2px #023e8a;

}





/* Create four equal columns that floats next to each other */

.column {

 float: left;

 width: 50%;

}



/* Clear floats */

.row:after {

 content: "";

 display: table;

 clear: both;

}



/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 900px) {

 .column {

 width: 50%;

 }

}



/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

 .column {

 width: 100%;

 }

}





.topnav {

  overflow: hidden;

  background-color: white;

  color: black;

}



.topnav a {

  padding-top: 10px;

  padding-right: 14px;

  padding-bottom: 10px;

  padding-left: 14px;

  float: left;

  display: block;

  color: black;

  text-align: center;

  text-decoration: none;

  font-size: 20px;

  transition: all .5s;

  border: solid 1px transparent;

  border-radius: 1em;

}



.topnav a:hover {

  background-color:#b30000;

  color: white;



}



.topnav a.active {

  color: black;

  background-color: white;

}



.topnav .icon {

  display: none;

}



@media screen and (max-width: 600px) {

  .topnav a:not(:first-child) { display: none; }

  .topnav a.icon { float: right; display: block; }

}



@media screen and (max-width: 600px) {

  .topnav.responsive { position: relative; }

  .topnav.responsive .icon { position: absolute; right: 0px; top: 0px; }

  .topnav.responsive a { float: none; display: block; text-align: left; }

}



#testa {

  text-align: center;

  vertical-align: top;

}



/* fine menu responsive */





/* Create 3 columns that floats next to each other */

.column3 {

float: left;

width: 33%;

font-size: 120%;

line-height: 150%;

}

/* Clear floats */

.row:after {

content: "";

display: table;

clear: both;

}

/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 900px) {

.column3 {

width: 33%;

}

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

.column3 {

width: 100%;

}

}

/* ---------------------------------- */



/* Create 2 columns that floats next to each other */

.column2 {

float: left;

width: 50%;

font-size: 120%;

line-height: 150%;

}

/* Clear floats */

.row:after {

content: "";

display: table;

clear: both;

}

/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 900px) {

.column2 {

width: 50%;

}

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

.column2 {

width: 100%;

}

}

/* ---------------------------------- */

* {

      -webkit-box-sizing: border-box;

      -moz-box-sizing: border-box;

      -ms-box-sizing: border-box;

      box-sizing: border-box;

}

.pic {

      border: 5px solid #717377;

      float: left;

      height: 300px;

      width: 300px;

      margin: 20px;

      overflow: hidden;

}

/* ------------ZOOM---------------------- */

/*ZOOM*/

.hover1 img {

width: 100PX;

transition: all 1s ease;

}

.hover1 img:hover {

width: 120%;



}

.parent {

  width: ; 

  height:; 

}



.child {

  width: 100%;

  height: 100%;

  background-color: black; /* fallback color */

  background-image: url("img/a01.png");

  background-position: center;

  background-size: cover;

  transition: all .5s;

}



.parent:hover .child,

.parent:focus .child {

  transition: all .5s;

  transform: scale(1.2);



}





/* ---------------------------------- */



/*PAN*/

 .pan img {

       height: 400px;

       width: 400px;

       -webkit-transition: all 1s ease;

       -moz-transition: all 1s ease;

       -o-transition: all 1s ease;

       -ms-transition: all 1s ease;

       transition: all 1s ease;

 }

 .pan img:hover {

       width: 300px;

       height: 300px;

 } 

/* ---------------------------------- */

/*FOCUS*/

 .focus {

       -webkit-transition: all 1s ease;

       -moz-transition: all 1s ease;

       -o-transition: all 1s ease;

       -ms-transition: all 1s ease;

       transition: all 1s ease;

 }

 .focus:hover {

       border: 70px solid #000;

       border-radius: 50%;

 } 

/* ---------------------------------- */

/*BRIGHTEN*/

 .brighten img {

       -webkit-filter: brightness(50%);

       -webkit-transition: all 1s ease;

       -moz-transition: all 1s ease;

       -o-transition: all 1s ease;

       -ms-transition: all 1s ease;

       transition: all 1s ease;

 }

 .brighten img:hover {

       -webkit-filter: brightness(100%);

 } 



/* ---------------------------------- */



.image-container {

  background-image: url("img/colosseon.jpg");

  background-size: cover;

  position: 

  height: 400px;

}

/* ---------------------------------- */

.text {

  background-color: white;

  color: black;

  font-size: 5vw; 

  font-weight: bold;

  margin: 0 auto;

  padding: 5px;

  width: 20%;

  text-align: center;

  position: 

  top: 20%;

  left: 20%;

  transform: translate(-50%, -50%);

  mix-blend-mode: screen;

}

/* ---------------------------------- */



.container {

  padding-top: 75%;

}

/* ---------------------------------- */

.responsive-iframe {



  width: 100%;

  height: 100%;

}

/* ---------------------------------- */



.button24 {

  background-color: #EF6624; /* grigio */

  border: 1px solid #CCCCCC;

  color: white;

  padding: 0px 10px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-family: Arial,Helvetica,sans-serif;

  font-size: 14px;

  margin: 1px 1px;

  transition-duration: 0.4s;

  cursor: pointer;

  border-radius: 1em;

  box-shadow: 3px 3px 4px #888888;

}

.button24:hover {

  background-color:#666666;

  font-size: 15px;

  color:white;

}



/* ---------------------------------- */







/* ---------------------------------- */



.buttonblu {

  background-color: #003172; /* blu */

  border: 1px solid #666666;

  color: white;

  padding: 3px 15px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-family: Arial,Helvetica,sans-serif;

  font-size: 14px;

  margin: 2px 2px;

  transition-duration: 0.4s;

  cursor: pointer;

  border-radius: 2em;

  box-shadow: 3px 3px 4px #888888;

}

.buttonblu:hover {

  background-color:#666666;

  font-size: 15px;

  color: ;

}



/* ---------------------------------- */









.tasto {

font-size: 100%;

font-family: arial;

background: linear-gradient( #ff9900, #ff3333, #ff9900);

border: solid 5px #ff9900;

border-radius: 2em;

box-shadow: 3px 3px 4px #888888;

}



#tasto a:link {

color: white;

text-decoration: none;

list-style-type: none;

font-weight: normal;

}

#tasto a:visited {

list-style-type: none;

color: white;

font-weight: normal;

text-decoration: none;

}

#tasto a:hover {

font-size: 120%;

list-style-type: none;

text-decoration: none;

color: white;

}

#tasto {

color: white;

list-style-type: none;

font-weight: normal;

text-decoration: none;

}

/* ---------------------------------- */



.responsive

{

width: 100%;

height: auto;

}

.responsivemax

{

width: 100%;

max-width: 320px;

height: auto;

}

/* ---------------------------------- */

.bordored {

border: solid 2px #CC0000;

border-radius: 1em;

}

/* ---------------------------------- */

.bordogray {

border: solid 12px transparent;

border-radius: 6em;

}

/* ---------------------------------- */

.bordotondo {

border: solid 2px transparent;

border-radius: 1em;

}

.bordolosanga {

border: solid 1px transparent;

border-radius: 5px 5px 5px 5px;

}

/* ---------------------------------- */



.content {

background: linear-gradient( 30deg, #e3e3e4, blue );

}

.contentgray {

background: linear-gradient(45deg, #f0f0f5, #9e9e9e, #003172 );

}



.contentblu {

background: linear-gradient(45deg, #013250 , blue, #013250);

box-shadow: 5px 5px 10px 1px #000000;

color: yellow;

}



.contentblugrad {

background: radial-gradient(#0033ff 18%, #010213 100%);

box-shadow: 5px 5px 10px 1px #000000;

color: white;

}



.testoresponsive {

style="font-size:10vw"

}



/* -------OMBRE------------------------ */

.ombraint

 {

border: solid 1px transparent;

background: white;

box-shadow: 5px 5px 4px #888888;

}



.aombra

 {

border: solid 1px transparent;

background: white;

box-shadow: 0px 5px 4px #888888;

}

/* ---------------------------------- */

.titol

 {

overflow: scroll;

text-align: center;

width: 80%;

margin-left: auto;

margin-right: auto;

background-color: white;

padding-bottom: 0px;

margin-bottom: 0px;

float: none;

color: #cc0000;

font-weight: bold;

}

/* -----------MENU----------------------- */

a:active {

font-weight: normal;

font-style: normal;

color: black;

text-decoration: none;

}

a:hover {

font-weight: normal;

font-style: normal;

color: red;

text-decoration: none;

}

a:visited {

font-weight: normal;

font-style: normal;

color: black;

text-decoration: none;

}

a:link {

font-weight: normal;

font-style: normal;

color: black;

text-decoration: none;

}

/* --------MENU2-------------------------- */



#menu a:link {

color: black;

text-decoration: none;

list-style-type: none;

font-weight: normal;

}

#menu a:visited {

list-style-type: none;

color: black;

font-weight: normal;

text-decoration: none;

}

#menu a:hover {

list-style-type: none;

text-decoration: none;

color: red;

}

#menu {

color: black;

list-style-type: none;

font-weight: normal;

text-decoration: none;

}

/* ---------------------------------- */

#cellapiccola {

font-size: 15px;

line-height: 20px;

}





/* ------PRIVACY---------------------------- */

/* ---------------------------------- */



.button {

  background-color: #013250; /* navy */

  border: 1px solid #CCCCCC;

  color: white;

  padding: 0px 10px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-family: Arial,Helvetica,sans-serif;

  font-size: 14px;

  margin: 1px 1px;

  transition-duration: 0.4s;

  cursor: pointer;

  border-radius: 1em;

  box-shadow: 3px 3px 4px #888888;

}

.button:hover {

  background-color:blue;

  font-size: 15px;

  color:white;

}



/* -----------segue privacy----------------------- */



.callout {

  position: fixed;

  bottom:110px;

  right: 60px;

  margin-left: 20px;

  max-width: 300px;



border: solid 2px white;

border-radius: 1em;





}



.callout-header {

  padding: 15px 15px;

  background: #555;

  font-size: 15px;

  color: white;



border: solid 2px transparent;

border-radius: 1em 1em 0em 0em;



}



.callout-container {

  padding: 10px;

  background-color: silver;

  font-size: 15px;

  color: white





border: solid 2px transparent;

border-radius: 0em 0em 1em 1em;

}



.closebtn {

  position: absolute;

  top: 5px;

  right: 15px;

  color: white;

  font-size: 30px;

  cursor: pointer;

}



.closebtn:hover {

  color: lightgrey;

}

/* ---------------------------------- */





/* -----------avviso home page--------------- */



.callouthome {

  position: fixed;

  top:120px;

  right: 30%;

  margin-left: 20px;

  max-width: 300px;



border: solid 1px transparent;

border-radius: 1em;





}



.callouthome-header {

  padding: 15px 15px;

  background: #555;

  font-size: 15px;

  color: white;



border: solid 2px transparent;

border-radius: 1em 1em 0em 0em;



}



.callouthome-container {

  padding: 10px;

  background-color: #013250;

  color: white





border: solid 2px transparent;

border-radius: 0em 0em 1em 1em;

}



.closehomebtn {

  position: absolute;

  top: 5px;

  right: 15px;

  color: white;

  font-size: 10px;

  cursor: pointer;

}



.closehomebtn:hover {

  color: lightgrey;

}

/* ---------------------------------- */



.img-trascinamento {

  width: ;

  transition: transform 0.5s ease;

  cursor: arrow;

}

.img-trascinamento:active {

  transform: scale(0.8);

  cursor: arrow;

}

/* -------in basso---------- */



    .scrolling-image {

        animation: scrollImage 2s ease 0s 1 normal forwards;

    }



    @keyframes scrollImage {

        0% {

            opacity: 0;

            transform: translateY(-250px);

        }

        100% {

            opacity: 1;

            transform: translateY(0);

        }

    }

/* ------------adestra----- */

    .scrolling-imagedx {

        animation: scrollImage 2s linear 0s 1 normal forwards;

    }



    @keyframes scrollImage {

        0% {

            opacity: 0;

            transform: translateX(-50px);

        }

        100% {

            opacity: 1;

            transform: translateX(0);

        }

    }





/* ----------------- */





/* ------------fade imm----- */

    .scrolling-imagefade {

        animation: scrollIImage 20s ease 0s 1 normal both;

    }



    @keyframes scrollIImage {

        0% {

            background-position: center bottom;

            background-size: 100%;         

        }

        100% {

            background-position: center bottom;

            background-size: 15%;

        }

    }





/* ----------------- */













    .image-container {

        overflow: hidden;

        width: 300px; /* Imposta la larghezza desiderata per il contenitore dell'immagine */

    }



    .image-container img {

        width: 100%;

        transition: transform 0.3s ease; /* Aggiungi una transizione per l'effetto di scorrimento */

    }



    .image-container:hover img {

        transform: translateX(+5%); /* Sposta l'immagine fuori dal contenitore quando si fa hover */

    }