@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
:root {
--colore-barra-menu: #6eb465d7;
--colore-verde: #6eb465;
--colore-blu: #607DA0;
--colore-prugna: #A0547E;
--colore-bianco: #ffffff;
--colore-giallo: #F7C05B;
--colore-grigio: #5F5F5F;
--colore-verde-scuro: rgba(73,126,89,1);
}
html, body {
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
p{
color: var(--colore-grigio);
}
header {
z-index: 10;
}
#main-nav-container {
background-color: var(--colore-barra-menu);
padding: 1rem 0;
z-index: 10;
}
#myVideo {
width: 100%;
position: absolute;
top: 0;
object-fit: cover;
z-index: -10;
height: 100vh;
} @media (min-width: 0px) and (max-width: 575px) {
.text-xs-center {
text-align: center;
}
}
.colore-verde {
font-weight: 700;
color: var(--colore-verde);
background: linear-gradient(to right, var(--colore-verde), var(--colore-verde-scuro));
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.bottone-verde {
padding: 1rem 2rem;
background-color: var(--colore-verde);
border-radius: 40px;
color: white;
font-weight: 700;
text-decoration: none;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.bottone-verde:hover {
color: var(--colore-giallo);
}
.colore-grigio {
color: var(--colore-grigio);
}
.nascondi {
display: none;
}
#sotto-il-menu{
z-index: -1;
margin-top: -227px;
position: relative;
overflow:hidden;
}
.logo-wrapper {
width: 130px;
} .hamburger-wrap {
position: relative;
margin:0;
width: 2em;
height: 1.6em;
z-index: 110;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
} .hamburger-wrap span{
right:0;
width: 100%;
height: 3px;
display: block;
position: absolute;
background: #ffffff;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
} .hamburger-wrap span:nth-child(1){
top: 0px;
width: 100%;
}
.hamburger-wrap span:nth-child(2),
.hamburger-wrap span:nth-child(3){
top: 10px;
width: 55%;
}
.hamburger-wrap span:nth-child(4){
top: 20px;
width: 75%;
}
.open .hamburger-wrap{
transform: rotate(180deg);
} .open .hamburger-wrap span:nth-child(1){
bottom: 2em;
width: 0px;
right: 50%;
}
.open .hamburger-wrap span:nth-child(2){
transform: rotate(45deg);
width: 100%;
}
.open .hamburger-wrap span:nth-child(3){
transform: rotate(-45deg);
width: 100%;
}
.open .hamburger-wrap span:nth-child(4){
top:10px;
width: 0%;
right: 50%;
} #ct-main-nav {
width: 100%;
}
#top-nav-menu {
display: flex;
flex-direction: row;
justify-content: end;
margin-bottom: 0px;
flex-wrap: wrap;
}
#top-nav-menu .menu-item {
list-style: none;
padding: 0.8em;
margin-right: 0.5em;
}
#top-nav-menu .menu-item:last-child{
margin-right: 0;
}
#top-nav-menu .menu-item a{
font-size: clamp(16px, 17px, 19px);
text-decoration: none;
font-weight: 500;
text-transform: uppercase;
color: #ffffff;
transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#top-nav-menu .menu-item a:hover, #top-nav-menu .current_page_item a{
color: var(--colore-giallo);
}
#top-nav-menu .menu-item .sub-menu{
position: absolute;
margin-top: 1em;
padding-left: 0px;
background-color: var(--colore-barra-menu);
display: none;
list-style: none;
transform: translateX(-9%);
}
#top-nav-menu .open.menu-item-has-children .sub-menu {
display: block;
border-radius: 25px;
} #wrap-mobile-menu {
width: 100%;
height: 0;
box-sizing: border-box;
top: 0;
left: 0;
position: fixed;
z-index: 100;
background: var(--colore-verde);
overflow: hidden;
}
#wrap-mobile-menu #top-nav-menu {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
#wrap-mobile-menu #top-nav-menu .menu-item a{
display: block;
text-align: center;
font-size: clamp(16px, 17px, 19px);
text-decoration: none;
font-weight: 500;
text-transform: uppercase;
color: #ffffff;
transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#wrap-mobile-menu #top-nav-menu .menu-item .sub-menu{
position: relative;
margin-top: 1em;
padding-left: 0px;
background-color: var(--colore-barra-menu);
display: none;
list-style: none;
background-color: var(--colore-giallo);
transform: translateX(0px);
}
#wrap-mobile-menu #top-nav-menu .open.menu-item-has-children .sub-menu {
display: block;
border-radius: 25px;
} .hero-pagina {
box-sizing: border-box;
width: 100%;
height: 50vh;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0 0 40px 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero {
box-sizing: border-box;
width: 100%;
height: 100vh;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0 0 40px 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.hero h2 {
margin-top: 6rem;
color: white;
font-size: clamp(1rem, 4rem, 6rem);
text-align: center;
text-shadow: 0px 0px 10px #333;
}
.hero h3 {
color: var(--colore-giallo);
font-size: clamp(1rem, 3rem, 5rem);
text-align: center;
text-shadow: 0px 0px 10px #333;
} .swiper-formazione {
width: 100%;
min-height: 600px;
margin: 5rem auto;
}
.swiper {
width: 100%;
height: 270px;
margin: 5rem auto;
}
.swiper-slide {
background: rgb(110,180,101);
background: linear-gradient(90deg, rgba(110,180,101,1) 0%, rgba(73,126,89,1) 100%);
border-radius: 50px;
padding: 30px;
display: flex;
}
.swiper-slide .carousel-content h3{
color: var(--colore-bianco);
font-size: clamp(1.2rem, 1.4rem, 1.6rem);
font-weight: 700;
}
.swiper-slide .carousel-content p {
color: var(--colore-bianco);
margin-top: .8em;
}
.swiper-button-next::after, .swiper-button-prev::after {
color: white;
} footer {
background: var(--colore-bianco);
background: linear-gradient(270deg, var(--colore-bianco) 0%, rgb(247, 247, 247) 100%);
border-top: 2px solid var(--colore-verde);
}
footer .img-small {
width: 26px;
}
footer .text-footer {
font-size: 14px;
}
#copyright {
background-color: var(--colore-verde);
}
#copyright div div > span {
color: var(--colore-bianco)!important;
font-size: 13px;
}
@media screen and (max-width: 766px) {
footer .img-small {
display: none;
}
footer .text-footer {
text-align: center;
}
footer .d-flex > .text-footer {
width: 100%;
text-align: center;
margin-bottom: 1rem;
}
}
#box-campus {
background: var(--colore-verde);
border-radius: 40px;
padding: 2em 3em;
box-shadow: 20px 20px 0px 1px var(--colore-giallo);
}
#box-campus h3, #box-campus p {
color: var(--colore-bianco);
font-weight: 600;
}
#box-campus h3 {
font-weight: 700;
}
#img-bambini-svg {
width: 100%;
position: absolute;
z-index: -1;
top: calc(50% - 250px);
}
#bambino-destra {
position: absolute;
bottom: 0;
}
#bambino-sinistra {
position: absolute;
bottom: 0;
transform: translateX(-300px);
} .gallery-item {
width: calc(50% - 20px);
border-radius: 40px;
overflow: hidden;
border: 2px solid var(--colore-verde);
}
@media screen and (max-width: 400px) {
.gallery-item {
width: calc(100% );
border-radius: 40px;
overflow: hidden;
border: 2px solid var(--colore-verde);
}
}