body, html {
height: 100%;
margin: 0;
font-family: 'Ubuntu', sans-serif;
/*line-height: 180%;*/
background-color: white;
color: #666;
text-align: center;
font-size: 120%;
}
a {
color: lightgrey;
}
h3 {
padding: 10px;
}
.header{
background-color: rgba(0, 0, 0, .5);
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .5);
position: fixed;
width: 100%;
z-index: 1;
}
.header ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
/*background-color: rgba(0, 0, 0, .1);*/
}
.header ul a{
display: block;
padding: 20px;
text-decoration: none;
}
.header ul a:hover{
background-color: steelblue;
}
.header .logo{
float: left;
font-size: 25px;
padding: 5px 20px;
}
.header .menu{
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.header .menu-icon{
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
}
.header .menu-icon .nav-icon{
background-color: white;
display: block;
width: 18px;
height: 2px;
position: relative;
transition: background-color .2s ease-out;
}
.header .menu-icon .nav-icon::before,
.header .menu-icon .nav-icon::after{
background-color: white;
content: "";
display: block;
height: 100%;
width: 100%;
transition: all .2s ease-out;
position: absolute;
}
.header .menu-icon .nav-icon::before{
top: 5px;
}
.header .menu-icon .nav-icon::after{
top: -5px;
}
.header .menu-btn{
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 280px;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon{
background-color: transparent;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon::before {
transform: rotate(-45deg);
top: 0;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon::after {
transform: rotate(45deg);
top: 0;
}
/* MEDIA QUERY */
.parallax1 {
background: url(../img/First.jpg);
min-height: 100%;
}
.parallax2 {
background: url(../img/Second.jpg);
min-height: 60%;
}
.parallax3 {
background: url(../img/Third.jpg);
min-height: 40%;
}
.parallax4 {
background: url(../img/Fourth.jpg);
min-height: 60%;
}
.parallax1, .parallax2, .parallax3, .parallax4 {
position: relative;
opacity: .95;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.heading {
font-family: "ropest";
position: absolute;
color: #fff;
font-size: 550%;
top: 38%;
width: 100%;
text-transform: uppercase;
letter-spacing: 8px;
text-shadow: 0 0 10px #000;
/*background-color: rgba(0, 0, 0, .3);*/
}
.heading-sm {
position: absolute;
top: 45%;
width: 100%;
color: #fff;
font-size: 250%;
text-transform: uppercase;
letter-spacing: 5px;
text-shadow: 0 0 10px #000;
}
.two-col {
float: left;
width: 100%;
padding: 0;
text-align: justify;
}
.three-col {
width: 100%;
padding: 10px 10px;
text-align: center;
align-content: center;
}
section {
overflow: auto;
padding: 20px 40px;
}
.dark {
overflow: auto;
padding: 50px 80px;
background-color: #323232;
color: #f2f2f2;
}
.darker {
overflow: auto;
padding: 20px 10px;
background-color: black;
/*color: #f2f2f2;*/
}
/* MEDIA QUERY 2 */
footer {
overflow: auto;
/*padding: 10px 10px;*/
background-color: #323232;
color: #777;
}
footer p {
color: #777รน;
}
footer p a {
text-decoration: none;
color: #777;
transition: 0.3s;
}
footer p a:hover {
color: #fff;
}
footer .fa {
font-size: 20px;
color: #777;
transition: 0.3s;
}
footer .fa:hover {
color: #fff;
}
.google-maps {
position: relative;
padding-bottom: 75%; /* Definisco l'aspect ratio */
height: 0;
overflow: hidden;
}
.google-maps > iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.footer-copyright {
/*background-color: #a9a9a9;*/
/*font-family: 'Comfortaa', cursive;*/
font-style: italic;
font-size: 15px;
color: #grey;
text-align: center;
}
.footer-copyright a {
text-decoration: none;
}
/* sezione immagini */
/* ======================================
Responsive Image gallery Style rules
======================================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
padding: 40px 5%;
background-color: #323232;
}
.container a{
text-decoration: none;
color: white;
}
.heading-text {
margin-bottom: 2rem;
font-size: 2rem;
text-align: center;
}
.heading-text span {
font-weight: 100;
}
ul {
list-style: none;
}
/* Responsive image gallery rules begin*/
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
/* don't add a fixed height
height: 30vh;*/
}
.image-gallery > li {
flex-basis: 280px; /*width: 350px;*/
position: relative;
cursor: pointer;
}
.image-gallery::after {
content: "";
flex-basis: 280px;
}
.image-gallery li img {
object-fit: cover;
max-width: 100%;
height: auto;
vertical-align: middle;
border-radius: 5px;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(57, 57, 57, 0.502);
top: 0;
left: 0;
transform: scale(0);
transition: all 0.2s 0.1s ease-in-out;
color: #fff;
border-radius: 5px;
/* center overlay text */
display: flex;
align-items: center;
justify-content: center;
}
.flag {
width: 70px;
padding: 5px;
}
.footer-copyright {
align-content: center;
width: 100%;
display: block;
}
/* hover */
.image-gallery li:hover .overlay {
transform: scale(1);
}
@media (min-width:48em) {
.header li{
float: left;
}
.header li a{
padding: 20px 30px;
}
.header .menu{
clear: none;
float: right;
max-height: 300px;
}
.header .menu-icon{
display: none;
background-color: white;
}
section {
overflow: auto;
padding: 50px 80px;
}
.two-col {
width: 50%;
padding: 0 4%;
text-align: justify;
}
.three-col {
float: left;
width: 33%;
padding: 0 3%;
text-align: left;
}
footer {
font-size: 100%;
}
body {
font-size: 100%;
}
}
@media (min-width: 48em) {
.heading {
font-size: 250%;
}
.heading-sm {
font-size: 180%;
}
.two-col {
width: 50%;
padding: 0 4%;
text-align: justify;
}
.three-col {
float: left;
width: 33%;
padding: 0 3%;
text-align: left;
}
.darker {
text-align: center;
align-content: center;
}
footer {
font-size: 100%;
}
body {
font-size: 100%;
}
.footer-copyright {
float: right;
width: 100%;
}
.flag {
width: 70px;
float: left;
}
}
/* Gallery */
.grid-gallery {
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
grid-auto-rows: 50px;
}
.grid-gallery .grid-item:nth-child(3n - 2) {
grid-column: unset;
grid-row: unset;
}
.grid-gallery .grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 48em) {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
/* background-color: #808080;*/
}
.gallery-title {
padding: 80px 50px 0px;
}
.grid-gallery {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 50px 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 250px;
grid-auto-flow: dense;
grid-gap: 20px;
}
.grid-gallery .grid-item {
position: relative;
background-color: #efefef;
overflow: hidden;
}
.grid-gallery .grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.grid-gallery .grid-item:hover img {
transform: scale(1.1);
}
.grid-gallery .grid-item a {
cursor: zoom-in;
}
.grid-gallery .grid-item:nth-child(3n - 2) {
grid-column: span 2;
grid-row: span 2;
}
}