.linkDovuto{
font-family: Arial, Verdana, sans-serif;
font-size:0.6em;
text-align: end;
margin: 1%;
color: white;
}
.linkDovuto a:link, .linkDovuto a:visited {
font-size:0.8em;
color:rgb(212, 30, 20);
font-family: Arial, Verdana, sans-serif;
transition: 0.5s;
}
.linkDovuto a:hover, .linkDovuto a:active {
color:white;
}
ul{
list-style-position: outside;
border-left: 5px solid;
border-left-color:rgb(212, 30, 20);
list-style-type: none;
padding: 10px 20px;
}
/* bottoni dei social network nella pagina dei contatti */
.button {
background-color: navy;
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 22px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 6px;
border: 3px solid white;
width: 165px;
}
.button2:hover {
background-color: #3B5998;
color: white;
}
.buttonI {
background-color: #ff0080;
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 22px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 6px;
border: 3px solid white;
width: 165px;
}
.button3:hover {
background-color: #ff00ff;
color: white;
}
.mappe, .i3{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: flex-start;
}
.mappa1{
width: 47.5%;
text-align: center;
margin-right: 2.5%;
}
.mappa2{
width: 47.5%;
text-align: center;
margin-left: 2.5%;
}
.trio1, .trio2, .trio3{
margin-top: 5%;
width: 33.33%;
}
.trio1, .trio2{
padding-right: 2.5%;
}
.trio2, .trio3{
padding-left: 2.5%;
}
.mappe h2{
font-size: 1.8em;
}
.i3 h2{
font-size: 1.4em;
}
.trio1{
order: 1;
}
.trio3{
order: 2;
}
.trio2{
order: 3;
}
@media screen and (max-width: 1215px) {
.i3{
flex-flow: column nowrap;
align-items: center;
}
.trio1, .trio2, .trio3{
margin-top: 2.5%;
width: 60%;
padding: 0%;
}
.trio1{
order: 3;
}
.trio3{
order: 2;
}
.trio2{
margin-top: 5%;
order: 1;
}
}
@media screen and (max-width: 1000px) {
.mappe{
flex-flow: column nowrap;
}
.mappa1, .mappa2{
width: 100%;
margin: 0%;
}
}
@media screen and (max-width: 980px) {
.trio1, .trio2, .trio3{
width: 80%;
}
}
@media screen and (max-width: 735px) {
.trio1, .trio2, .trio3{
width: 100%;
}
}
@media screen and (max-width: 385px) {
.i3 h2{
font-size: 1.3em;
}
}
@media screen and (max-width: 360px) {
ul{
padding-left: 20px;
}
}
@media screen and (max-width: 359px) {
.i3 h2{
font-size: 1.2em;
}
}
@media screen and (max-width: 330px) {
.i3 h2{
font-size: 1.0em;
}
.mappe h2{
font-size: 1.4em;
}
}
@media screen and (max-width: 300px) {
ul{
padding-left: 10px;
}
}