/*
Theme Name: Ocean Words
Text Domain: oceanwords
Version: 1.0
Requires at least: 4.7
Description: Ocean Words Theme
Tags: blog, one-column
Author: Wavemaker
Author URI: https://wavemaker.com
*/

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

h1,h2,h3,h4,h5{
    font-family: 'Lato', sans-serif;
}
strong{font-weight: bold}
body{
    color: #666666;
    font-family: 'Mulish', sans-serif;
}
p,span{
    font-family: 'Mulish', sans-serif;
}
footer{ color: #ffffff}
a.privacy_link{color: #ffffff; text-decoration: none}
a.privacy_link:hover{color: #ffffff; text-decoration: none}
a.footer-category-link{color: #f79a2d; text-decoration: none}
a.footer-category-link:hover{color: #f79a2d; text-decoration: none}
a.emergi{color: #ffffff;}
a.emergi:hover{color: #ffffff;text-decoration: none}
a.ascoltala{color: #051753; letter-spacing: 2px}
a.ascoltala:hover{color: #051753;text-decoration: none}
a.in_icon_link{color: #ffffff; letter-spacing: 2px}
a.in_icon_link:hover{color: #ffffff;text-decoration: none}


.interagisci{color: #ffffff}
body.menuOpen{

    background-color: #0A246A;

}

.orange{color: #f79a2d}
.grey{color: #2C2C2C}
.blue{color:#051753 }
.light-blue{color:#082365 }
.cyan{color: #00adee}
figure.size-full img{max-width: 100%; height: auto;}
figure.wp-block-image img{height: auto;}

.bg-blue{background-color: #051753}
.bg-light-blue{background-color: #082365}
.white{color: #ffffff}
.missionBg{background: url(/wp-content/themes/oceanwords/assets/images/img_chi-siamo.jpg) no-repeat; background-size: cover}
.missionBg p, .missionBg h2{color: #ffffff}
.py-10{padding-bottom: 10rem; padding-top: 10rem}
a.img-box{text-decoration: none}
.btn-outline-primary{color: #ffffff; border-color: #ffffff;background-color:#082365; border-radius: 0; letter-spacing: 2px}
.btn-outline-primary:hover{border-color: #00adee;background-color:#00adee;}
.btn-outline-secondary{color: #051753; background-color: #ffffff; border-color: #051753; border-radius: 0;letter-spacing: 2px}
.btn-outline-secondary:hover{color: #082365; background-color: #ffffff; border-color: #051753;}

/* NAV BAR */
.navbar{padding-left: 0; padding-right: 0}
.main-menu{width: 100%; height: 100%; opacity: 0; visibility: hidden;}
.nav-open .main-menu {opacity: 1; visibility: visible; background: #001f60; }
.main-menu .nav li a{color:#FFF; font-size: 5vh; font-weight:600; }


.nav-button{position:relative; z-index:1111; border:solid 1px #001f60;  height:42px; display:block; width:50px; padding:12px; }
.nav-open .nav-button{border:solid 1px #ffffff;}
.nav-open .nav-button #nav-icon3 span{background: #ffffff;}
.nav-button #nav-icon3{width:24px;height:22px;display:inline-block;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;}
.nav-button #nav-icon3 span{display:block;position:absolute;height:3px;width:100%;background:#001f60;border-radius:9px;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
.nav-button #nav-icon3 span:nth-child(1){top:0}
.nav-button #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3){top:7px}
.nav-button #nav-icon3 span:nth-child(4){top:14px}
.nav-open #nav-icon3 span:nth-child(1){top:9px;width:0;left:50%}
.nav-open #nav-icon3 span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.nav-open #nav-icon3 span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
.nav-open #nav-icon3 span:nth-child(4){top:9px;width:0;left:50%}

.flex-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%}

.accordion-menu a:hover{text-decoration: none}
.main-menu .card{background:transparent; border: none}
.main-menu .card-header{background:transparent; border: none}
.main-menu h3{color: #ffffff}
.main-menu a.hover-card{transition: width 1s, height 1s, transform 1s;}
.main-menu a.hover-card:hover{text-decoration: none; transform: rotate(-10deg); opacity: 0.8}

.logo{padding-left: .75rem; padding-top: 2.8rem; width: 80px}
.logo_nav{padding-left: 0rem; padding-top: 0rem;width: 60px}
.logo_footer{width: 50px}
.category-card{padding: 1rem; background-color: #082365; display: block}
.category-card .onda{width: 60%}
.onda-100{width: 100px; margin-left: auto; margin-right: auto}

.category-card-footer img{opacity: 0.7}
.category-card-footer .onda{width: 40%; padding-bottom: 1rem}
.category-card-footer div.card-body{padding: 0; position: relative}
.category-card-footer:hover img:not(.onda){opacity: 0.5; transition: 0.3s;}
/*.a.category-card-footer:hover .hover-category-card-footer{opacity: 1}
hover-category-card-footer{ position: absolute; top: 0; bottom: 0;left: 0; right: 0;height: 100%; width: 100%; opacity: 0;transition: .5s ease; background-color: rgba(5, 23, 83, 0.9);}*/
.hover-category-card-footer .card-text {color: #f79a2d;font-size: 1.2rem;position: absolute;top: 50%;left: 50%;
    -webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    text-align: center; width: 100%; padding: 0 1rem;
}

/* stripe */
.stripe{background-color: #d3eefb; position: absolute; z-index: -1; top: 290px; left: 0px;right: 0px; height: 290px; transform: skewY(-10deg)}

/*FLIP HP */

.flip-past, .flip-future, .flip-next, .flip-prev{
    opacity: 0.2;
}


.pf-carousel .pf-slider{overflow-x: hidden;}

/*
.carousel {
        width: 1024px;
}
*/


.carousel-cell {
    width: 200px;
    height: 200px;
    margin-right: 30px;
    /*background: #8C8;*/
    border-radius: 5px;
    counter-increment: carousel-cell;
}

.related-articles a:hover{text-decoration: none;}
.related-articles .card:hover { opacity: 0.6;transition: 0.3s;}
.related-articles .card-body{padding-left: 1rem; padding-right: 1rem}


.inner-header {
    height:65vh;
    width:100%;
    margin: 0;
    padding: 0;
}


.waves {
    position:relative;
    width: 100%;
    height:15vh;
    margin-bottom:-7px; /*Fix for safari gap*/
    min-height:100px;
    max-height:150px;
}

.content {
    position:relative;
    height:20vh;
    text-align:center;
    background-color: white;
}

/* Animation */

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px,0,0);
    }
    100% {
        transform: translate3d(85px,0,0);
    }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height:40px;
        min-height:40px;
    }
    .content {
        height:30vh;
    }
    h1 {
        font-size:24px;
    }
}

.carousel-menu{width: 320px}
.carousel-menu div.card-body{padding: 0}
.carousel-menu div.card-body img{opacity: 0.5}
.carousel-menu a.category-card{padding: 0}
.ptonda{padding-top:375px; padding-bottom: 5rem}

#privacy-cookie-content .content{height: auto; padding-top: 3rem}

@media (min-width: 576px) { .carousel-menu{width: 700px} .ptonda{padding-top:350px; padding-bottom: 5rem} }
@media (min-width: 768px) { .carousel-menu{width: 670px} .ptonda{padding-top:300px; padding-bottom: 5rem}}
@media (min-width: 992px) { .carousel-menu{width: 940px} .ptonda{padding-top:300px; padding-bottom: 5rem}}
@media (min-width: 1200px) { .carousel-menu{width: 1100px} .ptonda{padding-top:270px; padding-bottom: 5rem}}