/***************/
/*** TO EDIT ***/
/***************/
.herobanner {
background-image: url('../src/img/herobanner--peschici.jpg');
}
.intro-right-img {
background-image: url('../src/img/intro-right-img--mare.jpg');
}
.structure-card .structure-card-img.img1{
background-image: url('../src/img/villaggiopeschici-it-ulivi.jpg');
}
.structure-card .structure-card-img.img2{
background-image: url('../src/img/villaggiopeschici-it-nicola.jpg');
}
.structure-card .structure-card-img.img3{
background-image: url('../src/img/villaggiopeschici-it-manaccora.jpg');
}
.structure-card .structure-card-img.img4{
background-image: url('../src/img/villaggiopeschici-it-ialillo.jpg');
}
/*************/
/*** STYLE ***/
/*************/
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville&display=swap');
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/******************/
/*** TYPOGRAPHY ***/
/******************/
body, div, p, label {
font-family: 'Lato', sans-serif;
color: #565656;
font-size: 16px;
font-weight: 100;
line-height: 24px;
}
h1, h2, h3 {
font-family: 'Libre Baskerville', serif;
color: #2BB5B6;
}
h1 {
font-size: 30px;
line-height: 40px;
margin-bottom: 16px;
}
h2 {
font-size: 27px;
line-height: 36px;
margin-bottom: 16px;
}
h3 {
font-size: 16px;
line-height: 24px;
margin-bottom: 16px;
}
label {
font-size: 12px;
line-height: 16px;
}
/**************************/
/*** HEROBANNER & INTRO ***/
/**************************/
.herobanner {
height: 40vh;
max-height: 400px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
@media screen and (min-width: 700px) {
.herobanner {
height: 70vh;
max-height: 600px;
}
}
@media screen and (min-width: 1000px) {
.herobanner {
height: 80vh;
max-height: 750px;
}
}
.intro {
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 40px 24px 0;
}
@media screen and (min-width: 700px) {
.intro {
margin-top: -20vh;
padding: 0 64px;
}
}
@media screen and (min-width: 1000px) {
.intro {
width: 950px;
margin: auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-top: -80px;
margin-bottom: 56px;
padding: 0;
}
}
.intro-logo {
width: 300px;
margin-bottom: 40px;
}
.intro-card {
background-color: white;
width: 100%;
}
@media screen and (min-width: 700px) {
.intro-card {
padding: 32px;
}
}
@media screen and (min-width: 1000px) {
.intro-card {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
width: 530px;
min-height: 500px;
}
}
.intro-card-button {
font-family: 'Libre Baskerville', serif;
color: #2BB5B6;
margin-top: 32px;
font-size: 16px;
display: block;
}
.intro-card-button:hover {
text-decoration: underline;
}
.intro-right {
margin: 40px 0 64px;
}
@media screen and (min-width: 700px) {
.intro-right {
width: 400px;
margin-left: 24px;
}
}
@media screen and (min-width: 1000px) {
.intro-right {
margin-bottom: 0;
}
}
.intro-right-img {
height: 300px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin-top: 24px;
display: none;
}
@media screen and (min-width: 1000px) {
.intro-right-img {
display: block;
}
}
.intro-right .button {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
-webkit-transition: linear 250ms bottom, linear 250ms box-shadow;
transition: linear 250ms bottom, linear 250ms box-shadow;
}
@media screen and (min-width: 600px) {
.intro-right .button {
position: relative;
}
.intro-right a.button:hover {
-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
margin-bottom: 10px;
bottom: 3px;
-webkit-transition: linear 250ms bottom, linear 250ms box-shadow;
transition: linear 250ms bottom, linear 250ms box-shadow;
}
}
/********************/
/**** STRUCTURES ****/
/********************/
.structures-row {
background-color: #f5f5f5;
padding: 48px 0 56px;
}
.structures-row .structures-intro {
max-width: 700px;
margin: 0 auto 30px;
}
.structures-row .structures-intro h2,
.structures-row .structures-intro .structures-intro-text {
text-align: center;
padding: 0 24px;
}
.structures-list {
padding: 0 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
width: 100%;
margin: auto;
}
.structure-card .structure-card-nation {
text-transform: uppercase;
color: white;
font-size: 16px;
font-weight: 400;
padding: 4px 16px;
background-color: #2BB5B6;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.structure-card-content h3 {
height: 24px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.structure-card {
width: 100%;
max-width: 100%;
background-color: white;
border: 1px #E0E0E0 solid;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 16px;
position: relative;
-webkit-transition: linear 250ms transform, linear 250ms box-shadow;
transition: linear 250ms transform, linear 250ms box-shadow;
border-radius: 10px;
overflow: hidden;
}
.structure-card:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
.structure-card-img {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 200px;
}
.structure-card-content {
padding: 12px;
width: 100%;
}
.structure-card-content .button {
margin-top: 15px;
position: absolute;
bottom: 12px;
}
@media screen and (min-width: 607px) {
.structure-card-content .button {
bottom: 0;
}
}
@media screen and (min-width: 830px) {
.structure-card-content .button {
bottom: 12px;
}
}
.structure-card-content label {
margin-bottom: 64px;
display: block;
}
@media screen and (min-width: 607px) {
.structure-card {
width: calc(50% - 16px);
min-width: 260px;
margin: 8px;
}
.structure-card-content .button {
position: relative;
}
.structure-card-content label {
margin-bottom: 0;
}
}
@media screen and (min-width: 830px) {
.structure-card {
width: calc(50% - 18px);
min-width: 240px;
margin: 8px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.structure-card-img {
width: 50%;
}
.structure-card-content {
padding: 12px;
width: 50%;
}
.structure-card-content h3 {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
white-space: normal;
}
.structure-card-content .button {
position: absolute;
bottom: 0;
}
}
@media screen and (min-width: 1120px) {
.structure-card {
width: calc(25% - 16px);
min-width: 240px;
margin: 8px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.structure-card-img {
width: 100%;
}
.structure-card-content {
padding: 16px 24px;
width: auto;
}
.structure-card-content h3 {
height: 48px;
}
.structure-card-content .button {
position: relative;
}
}
@media screen and (min-width: 1400px) {
.structure-card {
width: calc(25% - 32px);
min-width: 300px;
margin: 16px;
}
}
/**********************/
/*** SECONDARY TEXT ***/
/**********************/
.secondary-text {
max-width: 700px;
margin: 64px auto 56px;
padding: 0 24px;
}
/******************/
/*** NEWSLETTER ***/
/******************/
.newsletter {
background-color: #2BB5B6;
padding: 56px 0;
width: 100%;
}
.newsletter-content {
width: 1000px;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.newsletter-text {
max-width: 700px;
padding: 0 24px;
margin: auto;
}
.newsletter-text h2 {
color: white;
}
.newsletter-text p {
color: white;
font-weight: 200;
}
.newsletter-text .button {
display: inline-block;
margin-top: 24px;
-webkit-transition: linear 250ms box-shadow;
transition: linear 250ms box-shadow;
}
.newsletter-text .button:hover {
-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-webkit-transition: linear 250ms box-shadow;
transition: linear 250ms box-shadow;
}
/**************/
/*** PHOTOS ***/
/**************/
.photos {
width: 100%;
display: none;
}
.photos-item {
height: 200px;
width: calc(100% / 3);
min-width: calc(100% / 3);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.photos-item.photo1 {
background-image: url('../src/img/footer1.jpg');
}
.photos-item.photo2 {
background-image: url('../src/img/footer2.jpg');
}
.photos-item.photo3 {
background-image: url('../src/img/footer3.jpg');
display: none;
}
.photos-item.photo4 {
background-image: url('../src/img/footer4.jpg');
display: none;
}
.photos-item.photo5 {
background-image: url('../src/img/footer5.jpg');
}
.photos-item.photo6 {
background-image: url('../src/img/footer6.jpg');
}
.photos-item.photo7 {
background-image: url('../src/img/footer7.jpg');
display: none;
}
.photos-item.photo8 {
background-image: url('../src/img/footer8.jpg');
}
.photos-item.photo9 {
background-image: url('../src/img/footer9.jpg');
display: none;
}
.photos-item.photo10 {
background-image: url('../src/img/footer10.jpg');
}
@media screen and (min-width: 720px) {
.photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (min-width: 860px) {
.photos-item {
width: 25%;
min-width: 25%;
}
.photos-item.photo3,
.photos-item.photo7 {
display: block;
}
}
@media screen and (min-width: 1100px) {
.photos-item {
width: 20%;
min-width: 20%;
}
.photos-item.photo4,
.photos-item.photo9 {
display: block;
}
}
/***************/
/*** BUTTONS ***/
/***************/
.button {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
border-radius: 6px;
text-align: center;
text-decoration: none;
}
@media screen and (min-width: 1000px) {
.button {
font-size: 16px;
}
}
.button.button-full {
background-color: #2BB5B6;
color: white;
padding: 12px 24px;
}
.button.button-full.button-white {
background-color: white;
color: #2BB5B6;
}
.button.button-ghost {
border: #2BB5B6 2px solid;
color: #2BB5B6;
display: block;
padding: 8px 16px;
margin-bottom: 0;
-webkit-transition: linear 250ms background-color;
transition: linear 250ms background-color;
}
.button.button-ghost:hover {
background-color: #2BB5B6;
color: #ffffff;
-webkit-transition: linear 250ms background-color;
transition: linear 250ms background-color;
}
@media screen and (min-width: 830px) {
.button.button-ghost {
margin-bottom: 12px;
}
}
@media screen and (min-width: 1000px) {
.button.button-ghost {
padding: 8px 24px;
}
}
@media screen and (min-width: 1200px) {
.button.button-ghost {
margin-bottom: 0;
}
}
/**************/
/*** FOOTER ***/
/**************/
footer {
max-width: 1000px;
margin: 56px auto 0;
text-align: center;
padding: 0 1rem;
}
.footer-koobcamp {
margin-bottom: 32px;
}
.footer-koobcamp-logo {
height: 28px;
margin-bottom: 0.8rem;
}
@media screen and (min-width: 768px) {
.footer-koobcamp-logo {
height: 40px;
}
}
footer h3 {
margin: 0;
font-weight: 400;
font-size: 24px;
color: #565656;
font-family: 'Lato', sans-serif;
}
.footer-logos {
font-size: 20px;
font-weight: 800;
font-style: italic;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 900px;
margin: auto;
}
@media screen and (min-width: 768px) {
.footer-logos {
font-size: 20px;
}
}
.footer-logos a span {
color: #2BB5B6;
text-decoration: none;
}
.footer-logos a {
color: #3F3D3F;
text-decoration: none;
}
.footer-logos-item {
margin: 3px 10px;
}
.footer-follow {
margin-top: 32px;
}
.footer-follow-title {
font-size: 22px;
font-style: italic;
font-weight: 400;
color: #3CA4A7;
margin-bottom: 10px;
}
.footer-follow-item {
margin: 0 8px;
text-decoration: none;
}
.footer-follow-item svg {
width: 35px;
height: 35px;
border: #8DCACA 1px solid;
fill: #8DCACA;
padding: 4px;
}
.footer-follow-item:hover svg {
fill: #FFFFFF;
background-color: #8DCACA;
}
.footer-links {
font-family: 'Lato', sans-serif;
font-size: 15;
font-weight: 500;
font-style: italic;
color: #3CA4A7;
margin-top: 10;
}
.footer-links a {
text-decoration: none;
color: #3CA4A7;
}
.footer-links a:hover {
text-decoration: underline;
}
.footer-koobcamp-data {
font-family: 'Lato', sans-serif;
font-size: 12px;
font-weight: 400;
margin-top: 20px;
line-height: 16px;
}