/* Theme Name: 
Author: web@quattrolinee.it
Author URI: www.quattrolinee.it
Old version: 11/2017
New version: 03/2023 */

.mobiletest-div {
  display: none;
}

body {
  background: #fff;
  font-size: 18px;
  font-family: 'Nunito Sans', sans-serif;
  margin: 0; padding: 0;
  color: #000;
} body b, body strong {
  font-weight: 700;
} body i, body em {
  font-style: italic;
} body.no-scroll {
  overflow: hidden;
}

h1 {
  font-weight: 400;
  text-align: center;
} h1 b, 
  h1 strong {
  color: #3333ff;   
} article h1 {
  text-align: left;
  padding: 0 20px;
} h2 {
  text-align: center;
  font-size: 1.4em;
  margin-bottom: 1em;
} h2.blue {
  color: #3333ff;
}

a {
  color: #000;
}

.single article,
.archive-header {
  margin-top: calc(84px + 1em);
} 

img {
  max-width: 100%; height: auto;
  vertical-align: middle;
} .fullsize img {
  width: 100%;
  max-width: none;
  max-height: 830px;
  object-fit: cover;
}

iframe {
  width: 100%; height: auto;
}

p {
  margin: 1.5em 0;
}

.btn {
  display: block;
  text-align: center;
  color: #3333ff;
  margin: 1em auto;
  border: 1px solid;
  padding: 16px 12px;
  text-decoration: none;
  transition: .25s linear;
  border-radius: 40px;
} .btn i {
  margin-left: 5px;
} .btn:hover {
  background: #3333ff;
  color: #fff;
} .btn:after {
  content: '\f054';
  display: inline-block;
  font: normal normal normal 12px/1 FontAwesome;
  margin-left: 1em;
}

main {
  display: block;
  margin-top: calc(90px + 1em);
} main h1 {
  padding: 0 20px;
} 

.container {
  padding: 0 20px;
  max-width: 1200px; margin: 0 auto;
} .container > p:last-of-type {
  margin-bottom: 3em;
}

section {
  margin: 2em 0;
}

.hamburger {
  cursor: pointer;
} .hamburger a {
  display: block;
  width: 36px; height: 10px;
  background: url('files/button_blue.svg') no-repeat center;
  background-size: contain;
}

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
} .embed-container iframe,
  .embed-container object,
  .embed-container embed { 
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/*** LISTA NON ORDINATA ***/
ul {
  list-style: none;
  padding: 0;
} ul li {
  display: flex;
  align-items: center;
} ul li:before {
  content: '';
  display: inline-block;
  min-width: 5px; min-height: 5px;
  border-radius: 50%;
  background: #3333ff;
  margin-right: 1em;
}

/*** LISTA ORDINATA ***/
ol {
  list-style: none;
  padding: 0;
  counter-reset: number-list;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
} ol li {
  display: flex; 
  align-items: flex-start;
  margin-bottom: 2.5em;
} ol li:before {
  counter-increment: number-list;
  content: counter(number-list);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3333ff;
  color: #fff;
  border-radius: 50%;
  min-width: 32px; min-height: 32px;
  margin-right: 1em;
} 

/*** NUMERI ***/
.numbers-list {
  display: flex;
  flex-flow: column;
  justify-content: center;
  text-align: center;
} .numbers-list > div {
  margin-bottom: 2em;
} .numbers-list span {
  display: block;
  color: #3333ff;
  font-size: 2em; font-weight: 700;
  margin-bottom: 0.5em;
}

/*** TEXT-PHOTO ***/
.text-photo {
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: space-between;
  margin-bottom: 3em;
}	

/*** HEADER ***/
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #fff;
  z-index: 1000;
  transition: .25s linear;
} header.shadow {
  box-shadow: 0 2px 4px #999;
} header .container {
  padding: 1.5em 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
} header .hamburger,
  header .logo {
  position: relative;
  z-index: 9999;
} header .logo {
  display: block;
  width: 75px; height: 36px;
  background: url('files/logo_plug-blue.svg') no-repeat;
  background-size: contain;
} .nav-container {
  position: fixed;
  top: 0; right: 0;
  left: 0;
  background: #fff;
  text-align: center;
  height: 95vh;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  transition: .25s linear; 
  transform: translate(0, -100%);
} .nav-desktop {
  display: none;
} header.on .nav-container {
  transform: translate(0, 0);
  box-shadow: 0 2px 4px #999;
} header nav ul {
  padding: 0; margin: 0;
  list-style: none;
} header nav ul li:before {
  content: none;
} header nav.menu-navigazione-container ul li {
  margin-bottom: 1em;
  justify-content: center;
} header nav a {
  font-size: 1.5em;
  text-decoration: none;
  color: #3333ff;
  transition: .25s linear;
} header nav a:after {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: #3333ff;
  margin: 0 auto;
  transform: translateY(5px) scale(0);
  transition: .25s linear;
} header nav a:hover {
  color: #0000cc;
} header nav a:hover:after {
  transform: translateY(5px) scale(1);
} header nav li.current-menu-item a:after {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: #3333ff;
  margin: 0 auto;
  transform: translateY(5px) scale(1);
} header nav li.dona a {
  font-weight: 700;
} header nav.lang a {
  text-transform: capitalize;
  font-size: 1.1em;
} header nav.menu-navigazione-container {
  margin: 110px 0 45px;
} header nav.lang {
  margin-bottom: 34px;
} .nav-social a {
  margin-right: 1.5em; 
} .nav-social a:last-of-type {
  margin-right: 0;
} .nav-social a:after {
  display: inline-block;
  font: normal normal normal 1.2em/1 FontAwesome;
  color: #3333ff;
} .nav-social a.fb:after {
  content: '\f09a';
} .nav-social a.tw:after {
  content: '\f099';
} .nav-social a.li:after {
  content: '\f0e1';
} .nav-dona {
  display: none;
}

/*** FOOTER ***/
#newsletter {
  background: #3333ff;
  color: #fff;
  padding: 2em 0;
} #newsletter p {
  font-weight: 700;
  margin: 0 0 1em;
  font-size: 1.2em;
} #newsletter a {
  color: #fff;
  text-decoration: none;
} #newsletter a:after {
  content: '\f054';
  display: inline-block;
  font: normal normal normal 12px/1 FontAwesome;
  margin-left: 1em;
} footer {
  background: #000;
  color: #fff;
  font-size: .8em;
  padding: 2em 0;
} footer p {
  margin: .5em 0;
} footer a {
  color: #fff;
  text-decoration: none;
} footer span {
  display: block;
  font-weight: 700;
  margin-bottom: 1.5em;
} footer .container > div > div {
  margin-bottom: 2.5em;
} footer .container > div > div:last-of-type {
  margin-bottom: 0;
} footer .logo {
  display: block;
  width: 75px; height: 36px;
  background: url('files/logo_plug-white.svg') no-repeat;
  background-size: contain;
  margin: 0 0 1.2em;
}

/*** SINGLE ***/
article h2 {
  font-weight: 400;
} .single-thumbnail {
  margin-bottom: 1em;
} .related-posts {
  display: none;
} .related-posts h3 {
  text-align: center;
} .related-posts ul {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  margin: 0; padding: 0;
  list-style: none;
} .related-posts ul > li {
  display: block;
  position: relative;
} .related-posts ul > li:before {
  content: none;
} .related-posts h4 {
  margin: 0;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.5em;
  text-align: center;
} .related-posts img {
  width: 100%; max-height: 420px;
  object-fit: cover;
} .list {
  background: rgba(247,247,247, 0.8);
  padding: 1em 0;
  margin-bottom: 0;
} .list > div {
  padding: 0 20px;
  text-align: center;
} .info a {
  text-decoration: none;
  transition: .25s linear;
} .info a:hover {
  color: #3333ff;
}

/*** PROGETTI ***/
.list-posts {
  display: flex;
  flex-flow: column wrap;
  padding: 0; margin-bottom: 4em;
  margin: 0 -20px;
} .list-posts h2 {
  color: #fff;
  margin: 0; padding: 0 25px;
  transition: .25s linear;
} .list-posts > li {
  position: relative;
  list-style: none;
} .list-posts > li:before {
  content: none;
} .list-posts a {
  position: relative;
  display: block;
  text-decoration: none;
} .list-posts a div {
  position: absolute;
  top: 0; right: 0;
  left: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
} .list-posts a > div {
  background: rgba(0,0,0,0.3);
} .list-posts .logo {
  display: none;
} 

/*** ABOUT ***/
#about .container .btn {
  margin: 1em auto 5em;
}

/*** METODO ***/
.metodo > div {
  margin-bottom: 3em;
} .metodo > div:last-of-type {
  margin-bottom: 5em;
} .metodo .step {
  display: flex;
  align-items: center;
  margin-right: 1em;
} .metodo .step > span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  border: 5px solid; border-radius: 50%;
  min-height: 68px; min-width: 68px;
  color: #3333ff;
  font-weight: 700;
  box-sizing: border-box;
  margin-right: 2em;
} .metodo h3 {
  margin: 0;
  font-weight: 400;
  font-size: 1.1em;
} .metodo .description h3 {
  display: none;
} .metodo .description h3 b,
.metodo .description h3 strong {
  color: #3333ff;
}

/*** TEAM ***/
#membri h2 {
  color: #3333ff;
  font-size: .8em;
  text-transform: uppercase;
} #membri h3 {
  font-size: 1.1em;
  color: #3333ff;
  margin-bottom: .2em;
} #membri p {
  margin: 0 0 .5em;
} #consiglio > div > div,
  #soci > div > div {
  margin-bottom: 3em;
} #ringraziamenti {
  background: #F7F7F7;
  padding: 2em 0;
} #ringraziamenti p {
  text-align: center;
  font-size: .8em;
  margin: 0 0 1em;
} #partners {
  column-count: 2;
} .team_social a:not(:last-of-type) {
  margin-right: .5em;
} .team_social i {
  color: #3333ff;
} #extra p {
  font-size: .8em;
}



/*** HOMEPAGE ***/
.home header {
  background: transparent;
  transition: .25s linear;
} .home .hamburger a {
  background: url(files/button_white.svg) no-repeat center;
  background-size: contain;
} .home header.on .hamburger a,
  .home header.change .hamburger a {
  background: url(files/button_blue.svg) no-repeat center;
  background-size: contain;
} .home header .logo {
  background: url('files/logo_plug-white.svg') no-repeat;
  background-size: contain;
} .home header.on .logo,
  .home header.change .logo {
  background: url('files/logo_plug-blue.svg') no-repeat;
  background-size: contain;
} .home header.change {
  background: #fff;
  box-shadow: 0 2px 4px #999;
} .home-top {
  height: 100vh;
  position: relative;
  z-index: 100;
} .home-top h1 {
  display: none;
} .home-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} .home-top p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  margin: 0 20px;
  font-size: 1.5em;
  text-align: left;
  z-index: 9999;
  font-weight: 700;
  max-width: 1200px;
} .top-overlay {
  background: rgba(51, 51, 255, 0.7);
  position: absolute;
  top: 0; right: 0;
  left: 0; bottom: 0;
  opacity: .7;
  z-index: 0;
} .scroll-down {
  animation: scroll-down 3s infinite;
} .newsletter-social {
  display: none;
} .highlights h2 {
  font-size: 1em;
  margin: 0 auto;
  transition: .25s linear;
} .highlights h2:hover {
  color: #3333ff;
} .highlights h2:hover:before {
  background: #3333ff;
} .highlights {
  margin: 0;
} .highlights div > h2 {
  padding: 1em 0;
} .main-projects a {
  text-decoration: none;
  font-weight: 700;
} .main-projects .thumb-box {
  display: block;
  margin: 0 -20px;
} .main-projects .thumb-box img {
  width: 100%;
} .main-projects .thumb-box img.grafica {
  display: none;
} .main-projects a i {
  margin-left: 5px;
} .main-projects {
  position: relative;
  font-size: .9em;
} .main-projects .info {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 265px;
} .main-projects p,
  .main-projects a {
  color: #fff;
} .main-projects h2 {
  display: flex;
  align-items: center;
  text-align: left;
  color: #fff;
} .main-projects h2:before {
  content: '';
  display: inline-block;
  width: 16px; height: 2px;
  background: #fff;
  margin-right: 8px;
  transition: .25s linear;
} .main-projects .thumb-box > div {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  background: rgba(0,0,0,.4);
  margin: 0 -20px;
} 

/*** DONA ORA ***/
.page-template-tpl-dona main h1 {
  padding: 0;
} #donazioni {
  margin: 3em 0 4em;
} #donazioni a {
  color: #fff;
  text-decoration: none;
} #donazioni ul {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
} #donazioni ul li {
  display: block;
  background: #3333ff;
  padding: 1em; box-sizing: border-box;
  margin-bottom: 2em;
} #donazioni ul li:before {
  content: none;
} #donazioni ul li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5em;
  padding-bottom: .5em;
  border-bottom: 1px solid #fff;
} #donazioni ul li > a:after {
  content: '\f1ed';
  font: normal normal normal 1em/1 FontAwesome;
} #donazioni a.btn {
  max-width: 125px;
  padding: 4px 12px;
  font-size: .9em;
} #donazioni a.btn:after {
  content: none;
} #donazioni a.btn:hover {
  background: #fff;
  color: #3333ff;
}

/*********************/
/*** MEDIA QUERIES ***/
/*********************/
@media screen and (min-width: 576px) {
  .btn {
    max-width: 250px;
  }
  
  /*** FOOTER ***/
  #newsletter p {
    font-size: 1.5em;
  } footer .container > div {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  } footer .container > div > div {
    flex-basis: 45%;
  }
  
  /*** NUMERI ***/
  .numbers-list {
	flex-flow: row wrap;
    justify-content: space-between;
  }	.numbers-list > div {
    flex-basis: 45%; 
  }
  
  /*** TEAM ***/
  #consiglio > div,
  #soci > div {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  } #consiglio > div > div,
    #soci > div > div {
    flex-basis: 45%;
  } #partners {
    column-count: 3;
  }
  
  /*** SINGLE ***/
  .related-posts ul {
    flex-flow: row;
  } .related-posts ul > li {
    flex-basis: 33.33%;
  } 
}


@media screen and (min-width: 768px) {
  h2 {
    margin-bottom: 2em;
  } h2.blue {
    font-size: 2.5em;
    margin-bottom: 1em;
    text-align: left;
  }
  
  section {
    margin: 3em 0;
  }
  
  .text-photo,
  .ordered-list ol {
    flex-flow: row wrap;
  } .text-photo.reverse-flow {
    flex-flow: row-reverse wrap;
  }	.text-photo > div,
    .ordered-list ol > li {
    flex-basis: 45%; 
  } .text-photo {
    font-size: 1.75em;
  }
  
  /*** HEADER ***/
  header nav.menu-navigazione-container {
    margin: 0;
  } .nav-container {
    align-items: flex-start;
    justify-content: center;
    bottom: 0; left: 50%;
    height: 100vh;
    text-align: left;
    padding-left: 60px;
    transform: translate(100%, 0);
  } header nav.lang {
    position: absolute;
    top: 30px;
  } header .nav-social {
    position: absolute;
    bottom: 2em; right: 20px;
  } header nav.menu-navigazione-container ul li {
    justify-content: flex-start;
  } 
  
  /*** FOOTER ***/
  #newsletter p {
    font-size: 2em;
  } footer .container > div > div {
    flex-basis: 20%;
  }   
  
  /*** NUMERI ***/
  .numbers-list {
    justify-content: flex-start;
  }	.numbers-list > div {
    flex-basis: 21%;
    margin-right: 4%;
  }
  
  /*** SINGLE ***/
  article h1 {
    text-align: center;
  } .list > div {
    column-count: 3;
  } .list > div p {
    margin: 0 0 1em;
  } .related-posts {
    display: block;
  } .single-content {
    display: flex;
    justify-content: space-between;
  } .single-content > div {
    flex-basis: 45%;
  }
  
  /*** ARCHIVE ***/
  .list-posts {
    flex-flow: row wrap;
    margin-bottom: 5em;
  } .list-posts > li {
    padding: 8px; box-sizing: border-box;
    flex-basis: 33%;
    max-height: 250px; min-height: 250px;
    overflow: hidden;
  } .list-posts a {
    height: 100%;
  } .list-posts img {
    height: 100%;
    object-fit: cover;
  } .list-posts a > div {
    position: absolute;
    top: 0; right: 0;
    left: 0; bottom: 0;
  } 
  
  /*** METODO ***/
  .metodo > div {
    display: flex;
    justify-content: space-between;
  } .metodo:nth-of-type(even) > div {
    flex-direction: row-reverse;
  } .metodo:nth-of-type(even) > div .step {
    margin: 0 0 0 4em;
    justify-content: flex-end;
  } .metodo .step {
    margin-right: 4em;
  } .metodo .step > span {
    font-size: 2.2em;
    min-width: 134px; min-height: 134px;
    margin-right: 0;
  } .metodo .step h3 {
    display: none;
  } .metodo .description {
    flex-basis: 85%;
  } .metodo .description h3 {
    display: block;
    font-size: 1.75em;
  }
  
  /*** TEAM ***/
  #consiglio > div > div,
  #soci > div > div {
    flex-basis: 30%;
  } #partners {
    column-count: 4;
  }
  
  /*** HOMEPAGE ***/
  .home-top p {
    font-size: 2em;
  } .project {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
  } .main-projects:nth-of-type(even) .project {
    flex-flow: row-reverse wrap;
  } .project > div {
    flex-basis: 45%;
  } .highlights h2 {
    margin-bottom: 3em;
    text-align: center;
  } .main-projects {
    margin: 0;
    position: inherit;
    margin-bottom: 4em;
  } .main-projects .info {
    position: inherit;
    transform: none;
    width: auto;
  } .main-projects p,
    .main-projects h2,
    .main-projects a {
    color: #000;
  } .main-projects p b,
    .main-projects p strong {
    color: #3333ff;
  } .main-projects h2:before {
    background: #000;
  } .main-projects .thumb-box {
    margin: 0;
  } .main-projects .thumb-box a {
    display: block;
    position: relative;
  } .main-projects .thumb-box a img.grafica {
    display: block;
    position: absolute;
    width: auto;
  }
  
  /*** DONA ORA ***/
  #donazioni ul {
    flex-flow: row;
  } #donazioni ul li {
    flex-basis: 30%;
  } 
  
  
}

@media screen and (min-width: 1024px) {
  body { 
    font-size: 18px;
  }
  
  .ordered-list ol > li {
    flex-basis: 30%; 
  }
  
  /*** HEADER ***/
  header .container {
    font-size: .9em;
  } header .container > div {
    display: flex;
    align-items: center;
    flex-basis: 50%;
  } header .container > div:last-of-type {
    justify-content: flex-end;
  }  header .hamburger {
    display: none;
  } header .logo {
    margin-right: 3em;
  } header nav a {
    font-size: .85em;
  } header nav.menu-navigazione-container {
    display: none;
  } header .nav-container {
    padding: 0;
    flex-flow: row wrap;
    align-items: center;
    transform: initial;
    background: none;
    position: initial;
    height: auto;
  } header .nav-social,
    header nav.lang {
    position: initial;
    margin: 0 4em 0 0;
  } header nav.lang a {
    font-size: .9em;
  } .nav-desktop {
    display: block;
  } .nav-desktop ul {
    display: flex;
  } .nav-desktop li.dona {
    display: none;
  } .nav-desktop ul li {
    margin-right: 2em;
  } .nav-dona {
    display: block;
  } .nav-dona .btn {
    margin: 0;
    padding: 8px 18px;
    font-size: .9em;
    display: flex;
    align-items: center;
  } .home header.change nav a,
    .home header.change .nav-social a:after,
  .home header.change .nav-dona .btn {
    color: #3333ff;
  }
    
  /*** FOOTER ***/
  #newsletter p {
    font-size: 2.25em;
  } 
  
  /*** ARCHIVE ***/
  .list-posts > li {
    max-height: 304px; min-height: 304px;
  } .list-posts .logo {
    background: rgba(51,51,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .25s linear;
  } .list-posts .logo img {
    max-width: 50%; height: auto;
  } .list-posts > li > a:hover .logo {
    opacity: 1;
  }
  
  /*** TEAM ***/
  #consiglio > div > div,
  #soci > div > div {
    flex-basis: 19%;
  } #partners {
    column-count: 6;
  }
  
  /*** HOMEPAGE ***/
  .home header nav a,
  .home .nav-social a:after, 
  .home .nav-dona .btn {
    color: #fff;
  } .home .nav-dona .btn:hover {
    background: #fff;
    color: #3333ff;
  } .home-top p {
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
  } .main-projects .thumb-box > div {
    margin: 0;
  } .main-projects p {
    font-size: 2em;
  } .main-projects a {
    font-weight: 300;
  }

}

@media screen and (min-width: 1440px) {
  body {
    font-size: 22px;
  }
  
  /*** HEADER ***/
  header .container {
    font-size: 1em;
  } 
  
  /*** ARCHIVE ***/
  .list-posts > li {
    flex-basis: 25%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 0;
  } /*.list-posts > li:first-of-type {
    flex-basis: 50%;
  } */
  
  /*** HOMEPAGE ***/
  .home-top p {
    padding: 0;
  }
  
}

@media screen and (min-width: 1920px) { 
  /*** METODO ***/
  .metodo .step > span {
    min-width: 200px; min-height: 200px;
  } 
  
  /*** HOMEPAGE ***/
  .home-top p {
    font-size: 2.25em;
  }

}

@media screen and (min-width: 2560px) { 
  body {
    font-size: 28px;
  }
  
  main {
    margin-top: calc(144px + 1em);
  }
  
  /*** HEADER ***/
  header .logo {
    width: 125px; height: 60px;
  }
  
  .container,
  .home-top p {
    max-width: 1800px;
  }

}

@keyframes scroll-down {
  0% {
    transform: translateY(25%);
  } 
  
  50% {
    transform: translateY(125%);
  }
  
  100% {
    transform: translateY(25%);
  }
}