/*
Template: S.F.E.R.A. ONLUS
Autore: Andrea Aimi
Versione: v1.1
Ultima Modifica: 12-07-2016
*/




/*
---------------------
Tabella Dei Contenuti
---------------------
1 - HTML5 Doctor Reset
2 - Dichiarazione font
3 - Stili generali
4 - Stile header
5 - Stile content
6 - Stile footer
7 - Stile conferma/errore
8 - Stile admin
9 - Stili smartphone & tablet
*/




/*
----------------------
1 - HTML5 Doctor Reset
----------------------
*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body { line-height: 1; }

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display: block; }

nav, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  text-decoration: none;
  background: transparent;
}
/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del { text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select { vertical-align: middle; }


/*
----------------------
2 - Dichiarazione font
----------------------
*/
/* Noto Sans */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url('../font/noto-sans/NotoSans-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('../font/noto-sans/NotoSans-Bold.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Noto Sans Italic'), local('NotoSans-Italic'), url('../font/noto-sans/NotoSans-Italic.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url('../font/noto-sans/NotoSans-BoldItalic.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* Noto Serif */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Serif'), local('NotoSerif'), url('../font/noto-serif/NotoSerif-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url('../font/noto-serif/NotoSerif-Bold.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url('../font/noto-serif/NotoSerif-Italic.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: local('Noto Serif Bold Italic'), local('NotoSerif-BoldItalic'), url('../font/noto-serif/NotoSerif-BoldItalic.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


/*
------------------
3 - Stili generali
------------------
*/
html, body, #container {
  width: 100%;
  font-family: 'Noto Sans', sans-serif;
  font-style: normal;
  font-size: 1em;
  font-weight: 400;
  background: #f2ede4;
}

.scroll-top-btn {
  width: 60px;
  height: 60px;
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: url('../img/scroll-1.png') no-repeat;
  background-size: cover;
  z-index: 3;
}

.scroll-top-btn:hover, .scroll-top-btn:active {
  background: url('../img/scroll-2.png') no-repeat;
  background-size: cover;
}

.pattern-1 {
  content: "";
  width: 100%;
  height: 9px;
  position: relative;
  top: -9px;
  background: url('../img/pattern-1.png') repeat-x;
  z-index: 2;
}

.pattern-2 {
  content: "";
  width: 100%;
  height: 100px;
  background: url('../img/pattern-2.png') repeat-x;
}


/*
----------------
4 - Stile header
----------------
*/
#header-wrapper {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #f39430;
  /* -webkit-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.6);
  -moz-box-shadow:    0px 12px 15px 0px rgba(50, 50, 50, 0.6);
  box-shadow:         0px 12px 15px 0px rgba(50, 50, 50, 0.6); */
  z-index: 3;
}

#header {
  width: 1200px;
  height: 130px;
  position: relative;
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
}

#left-header, #right-header { display: inline-block; }

#left-header { float: left; }

.home-logo-big { width: 105px; }

.home-logo-small {
  width: 90px;
  display: none;
}

#right-header { float: right; }

.top-nav, .top-nav li, .top-social, .top-social li { display: inline-block; }

.top-nav {
  position: relative;
  top: -5px;
}

.top-nav li a {
  margin: 0 8px;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.85);
}

.top-nav li a:hover, .top-nav li a:active {
  color: #000;
  border-bottom: 1px solid #000;
}

.top-social, .top-social li { margin-left: 10px; }

.top-social li a img, .top-social li span img {
  width: 25px;
  cursor: pointer;
  opacity: 0.85;
}

.top-social li a:hover img, .top-social li span:hover img, .top-social li a:active img, .top-social li span:active img { opacity: 1; }

#newsletter-box {
  width: 300px;
  height: 100px;
  position: absolute;
  top: 50px;
  right: 0;
  display: none;
  background: url('../img/newsletter-box.png');
  -webkit-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.6);
  -moz-box-shadow:    0px 12px 15px 0px rgba(50, 50, 50, 0.6);
  box-shadow:         0px 12px 15px 0px rgba(50, 50, 50, 0.6);
  z-index: 4;
}

.close-newsletter-box {
  width: 20px;
  position: absolute;
  top: 20px;
  right: 25px;
  cursor: pointer;
}

#newsletter-box p {
  position: absolute;
  top: 23px;
  left: 25px;
  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;
  color: #f39430;
}

.newsletter-box-input {
  width: 230px;
  height: 35px;
  position: relative;
  top: 50px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #bdc3c7;
  overflow: auto;
}

.newsletter-box-input input, .newsletter-input-btn { position: relative; }

.newsletter-box-input > input {
  width: 185px;
  height: 100%;
  padding: 10px;
  float: left;
  font-size: 0.85em;
  font-weight: 400;
  color: #000;
  border: none;
  box-sizing: border-box;
}

.newsletter-box-btn {
  width: 45px;
  height: 100%;
  float: right;
  background: none;
  border: none;
  overflow: hidden;
  cursor: pointer;
}

.newsletter-box-btn img { width: 25px; }

.hamburger-icon { display: none; }

.bottom-nav {
  position: absolute;
  top: 65px;
  right: 0;
}

.bottom-nav li {
  position: relative;
  display: inline-block;
}

.bottom-nav-link {
  position: relative;
  top: -13px;
  padding: 7px 18px;
  font-family: 'Noto Serif', serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
}

.bottom-nav li:hover .bottom-nav-link, .bottom-nav li:active .bottom-nav-link {
  color: #f39430;
  background: #f2ede4;
}

.bottom-sub-nav {
  min-width: 275px;
  position: absolute;
  top: 18px;
  left: 0;
  display: none;
  padding: 10px 18px;
  background: #f2ede4;
  -webkit-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.6);
  -moz-box-shadow:    0px 12px 15px 0px rgba(50, 50, 50, 0.6);
  box-shadow:         0px 12px 15px 0px rgba(50, 50, 50, 0.6);
}

.bottom-nav li:hover .bottom-sub-nav, .bottom-nav li:active .bottom-sub-nav { display: block; }

.bottom-sub-nav li {
  display: block;
  padding: 10px 0;
}

.bottom-sub-nav-link {
  font-family: 'Noto Serif', serif;
  font-size: 1.15em;
  font-weight: 700;
  color: #f39430;
}

.bottom-sub-nav-link:hover, .bottom-sub-nav-link:active { border-bottom: 2px solid #f39430; }

.trap-btn-1 {
  width: 200px;
  height: 40px;
  float: right;
  margin: 0 15px 0 30px;
  text-align: center;
  background: #e62d29;
}

.trap-btn-1:hover, .trap-btn-1:active { background: #157a3d; }

.trap-btn-1:before {
  content: "";
  width: 0;
  height: 40px;
  float: left;
  border-top: 40px solid #f39430;
  border-right: 20px solid #e62d29;
  box-sizing: border-box;
}

.trap-btn-1:hover:before, .trap-btn-1:active:before { border-right: 20px solid #157a3d; }

.trap-btn-1:after {
  content: "";
  width: 0;
  height: 40px;
  float: right;
  border-bottom: 40px solid #f39430;
  border-left: 20px solid #e62d29;
  box-sizing: border-box;
}

.trap-btn-1:hover:after, .trap-btn-1:active:after { border-left: 20px solid #157a3d; }

.trap-btn-1 span {
  position: relative;
  top: 9px;
  font-family: 'Noto Serif', serif;
  font-size: 1.3em;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}


/*
-----------------
5 - Stile content
-----------------
*/
#content-wrapper {
  width: 100%;
  position: relative;
  top: 130px;
  z-index: 1;
  overflow: auto;
}

.slides-box-wrapper {
  max-width: 1200px;
  width: 100%;
  position: relative;
  margin: 0 auto;
  top: -9px;
}

.slides-box {
  width: 370px;
  padding: 20px;
  position: absolute;
  top: 100px;
  right: 0px;
  background: #f2ede4;
  box-sizing: border-box;
}

.slides-box h1 {
  font-family: 'Noto Serif', serif;
  font-size: 2.15em;
  font-weight: 700;
  line-height: 1.15em;
  text-transform: uppercase;
  color: #000;
}

.slides-box p {
  margin: 20px 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.6em;
  color: #000;
}

.trap-btn-2 {
  width: 160px;
  height: 30px;
  float: right;
  text-align: center;
}

.btn-2a {
  margin-left: 10px;
  background: #f39430;
}

.btn-2b { background: #e62d29; }

.trap-btn-2:hover, .trap-btn-2:active { background: #157a3d; }

.trap-btn-2:before {
  content: "";
  width: 0;
  height: 30px;
  float: left;
  border-top: 30px solid #f2ede4;
  box-sizing: border-box;
}

.btn-2a:before { border-right: 15px solid #f39430; }

.btn-2b:before { border-right: 15px solid #e62d29; }

.trap-btn-2:hover:before, .trap-btn-2:active:before { border-right: 15px solid #157a3d; }

.trap-btn-2:after {
  content: "";
  width: 0;
  height: 30px;
  float: right;
  border-bottom: 30px solid #f2ede4;
  box-sizing: border-box;
}

.btn-2a:after { border-left: 15px solid #f39430; }

.btn-2b:after { border-left: 15px solid #e62d29; }

.trap-btn-2:hover:after, .trap-btn-2:active:after { border-left: 15px solid #157a3d; }

.trap-btn-2 span {
  position: relative;
  top: 7px;
  font-family: 'Noto Serif', serif;
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.content-central-section-1 {
  max-width: 1200px;
  width: 100%;
  position: relative;
  margin: 100px auto;
  overflow: auto;
}

.content-central-section-1 h2 {
  margin: 0 0 30px 15px;
  font-family: 'Noto Serif', serif;
  font-size: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}

.box-x3 {
  width: 370px;
  height: 525px;
  position: relative;
  display: inline-block;
  float: left;
  margin: 15px 15px 20px 15px;
  background: #fff;
  -webkit-box-shadow: 0px 12px 15px 0px rgba(50, 50, 50, 0.6);
  -moz-box-shadow:    0px 12px 15px 0px rgba(50, 50, 50, 0.6);
  box-shadow:         0px 12px 15px 0px rgba(50, 50, 50, 0.6);
  transition: box-shadow .5s ease-in-out;
}

.box-x3:hover{
  box-shadow: none;
}

.box-x3--image{
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
}

.box-x3-text {
  padding: 10px 20px;
}

.box-x3-text p {
  line-height: 1.45em;
  color: #000;
}

/* .box-x3-text p:first-child {
  font-size: 0.9em;
  font-weight: 700;
}

.box-x3-text p:last-child {
  margin-top: 15px;
  font-size: 1em;
  font-weight: 400;
} */

.box-x3-title {
  width: 100%;
  /* height: 170px; */
  display: block;
  padding: 10px 20px;
  /* text-align: center; */
  box-sizing: border-box;
}
.box-x3-title h3{
  transition: all .5s ease-in-out;
}
.box-x3-title:hover h3{
  color: #f39430;
}

/* WARNING: remove color on LATEST NEWS card */
/* .box-x3:nth-child(2) .cl, .bg-1 { background: #f39430; }

.box-x3:nth-child(3) .cl, .bg-2 { background: #e62d29; }

.box-x3:nth-child(4) .cl, .bg-3 { background: #157a3d; } */

.box-x3-title h3 {
  /* position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); */
  font-family: 'Noto Serif', serif;
  /* font-style: italic; */
  text-align: left;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.45em;
  text-transform: uppercase;
  color: #fff;
  color: #000;
}

.trap-btn-3 {
  width: 160px;
  height: 30px;
  position: absolute;
  bottom: 20px;
  right: 0;
  float: right;
  text-align: center;
  background: #f39430;
}

.trap-btn-3:hover, .trap-btn-3:active { background: #157a3d; }

.trap-btn-3:before {
  content: "";
  width: 0;
  height: 30px;
  float: left;
  border-top: 30px solid #fff;
  border-right: 15px solid #f39430;
  box-sizing: border-box;
}

.trap-btn-3:hover:before, .trap-btn-3:active:before { border-right: 15px solid #157a3d; }

.trap-btn-3 span {
  position: relative;
  top: 7px;
  font-family: 'Noto Serif', serif;
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.content-full-section-1, .content-full-section-2 {
  width: 100%;
  position: relative;
  overflow: auto;
}

.content-full-section-1 { background: #e74c3c; }

.box-x2 {
  width: 570px;
  height: 570px;
  display: inline-block;
  position: relative;
  float: left;
  padding: 20px;
  box-sizing: border-box;
}

.box-x2 h2 { color: #fff; }

.box-x2 .trap-btn-2 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -80px;
}

.box-dicono-di-noi {
  background: url('../img/home-page/dicono-di-noi.png');
  background-size: cover;
}

.box-dicono-di-noi .trap-btn-2:before { border-top: 30px solid #e62d29; }

.box-dicono-di-noi .trap-btn-2:after { border-bottom: 30px solid #e62d29; }

.box-newsletter-1 ul { padding: 20px; }

.box-newsletter-1 ul li { margin: 20px 0; }

.box-newsletter-1 ul li a {
  font-size: 1.3em;
  line-height: 1.45em;
  color: #fff;
}

.box-newsletter-1 ul li a:hover, .box-newsletter-1 ul li a:active { border-bottom: 2px solid #fff; }

.box-newsletter-1 ul li a span { color: #f39430; }

.box-newsletter-1 .trap-btn-2:before { border-top: 30px solid #e74c3c; }

.box-newsletter-1 .trap-btn-2:after { border-bottom: 30px solid #e74c3c; }

.content-full-section-2 { background: #fff; }

.box-x4a {
  width: 270px;
  height: 370px;
  margin: 15px;
  position: relative;
  display: inline-block;
  float: left;
  padding: 0 20px;
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.box-x4a img { width: 100px; }

.box-x4a h4 {
  margin: 20px 0 30px;
  font-family: 'Noto Serif', serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #000;
}

.box-x4a p {
  font-size: 1em;
  line-height: 1.45em;
  color: #000;
}

.box-x4a .trap-btn-2 {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -80px;
}

.box-x4a .trap-btn-2:before { border-top: 30px solid #fff; }

.box-x4a .trap-btn-2:after { border-bottom: 30px solid #fff; }

.content-full-section-2:after {
  content: "";
  width: 100%;
  height: 9px;
  display: block;
  background: url('../img/pattern-1.png') repeat-x;
}

.content-central-section-2 {
  max-width: 1200px;
  width: 100%;
  position: relative;
  margin: 30px auto;
  padding: 15px;
  box-sizing: border-box;
  overflow: auto;
}

.page-intro {
  font-size: 0.9em;
  text-transform: uppercase;
  color: #000;
}

.page-intro a { color: #f39430; }

.page-intro a:hover, .page-intro a:active { border-bottom: 1px solid #f39430; }

.page-intro span { margin: 0 4px; }

.page-intro p { display: inline; }

.page-intro h1 {
  margin-top: 20px;
  font-family: 'Noto Serif', serif;
  font-size: 3.3em;
  font-weight: 700;
  text-transform: none;
  color: #000;
}

.section-img {
  width: 100%;
  height: 400px;
}

.associazione-img {
  background: url('../img/associazione/riunione.jpg') center no-repeat;
  background-size: cover;
}

.valori-img {
  background: url('../img/valori/solidarieta.JPG') center no-repeat;
  background-size: cover;
}

.progetti-img {
  background: url('../img/progetti/lavorazione.JPG') bottom no-repeat;
  background-size: cover;
}

.maison-de-paix-img {
  background: url('../img/progetti/maison-de-paix/centro.jpg') center no-repeat;
  background-size: cover;
}

.notizie-img {
  background: url('../img/notizie/articoli.png') center no-repeat;
  background-size: cover;
}

.content-central-section-1 h1 {
  margin-left: 15px;
  font-family: 'Noto Serif', serif;
  font-size: 2.3em;
  font-weight: 700;
  color: #000;
}

.content-central-section-1 h5 {
  margin: 15px 0 50px 15px;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.45em;
  color: #000;
}

.left-content, .right-content { display: inline-block; }

.left-content {
  width: 870px;
  float: left;
}

.right-content {
  width: 270px;
  float: right;
}

.big-vid, .map {
  width: 100%;
  height: 490px;
}

.full-img { width: 100%; }

.graph-img { height: 40px; }

.gallery-img {
  width: 270px;
  display: inline-block;
  margin: 30px 25px 0 0;
}

.gallery-img:nth-child(10), .gallery-img:nth-child(13), .gallery-img:nth-child(16), .gallery-img:nth-child(19), .gallery-img:nth-child(22), .gallery-img:nth-child(25), .gallery-img:nth-child(28), .gallery-img:nth-child(31), .gallery-img:nth-child(34), .gallery-img:nth-child(37) { margin: 30px 0 0 0; }

.left-content h1, .left-content h2 {
  font-family: 'Noto Serif', serif;
  font-weight: 700;
  line-height: 1.3em;
  color: #000;
}

.left-content h1 {
  margin: 60px 0 30px;
  font-size: 2.6em;
}

.left-content h2 {
  margin: 40px 0 10px;
  font-size: 2em;
}

.left-content p {
  margin: 20px 0;
  font-size: 1.1em;
  line-height: 1.6em;
  color: #000;
}

.left-content a { color: #f39430; }

.left-content p a:hover, .left-content p a:active {
  color: #000;
  border-bottom: 1px solid #000;
}

.left-content ul {
  margin-left: 30px;
  list-style-type: disc;
}

.left-content ul li {
  display: list-item;
  color: #f39430;
}

.left-content ul li h2, .left-content ul li p b { text-transform: uppercase; }

.related-content {
  margin-top: 100px;
  padding-top: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.related-content h4 {
  font-family: 'Noto Serif', serif;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.3em;
  color: #000;
}

.box-x3-left {
  width: 270px;
  height: 270px;
  position: relative;
  display: inline-block;
  float: left;
  margin: 40px 30px 0 0;
  padding: 40px 20px;
  background: #f2ede4;
  box-sizing: border-box;
}

.box-x3-left:last-child { margin: 40px 0 0 0; }

.box-x3-left h4 { text-transform: uppercase; }

.box-x3-left p { font-size: 0.9em; }

.box-x3-left .trap-btn-3:before { border-top: 30px solid #f2ede4; }

.box-right {
  width: 100%;
  display: block;
  position: relative;
  margin-bottom: 30px;
  background: #f2ede4;
}

.box-right h3 {
  padding: 20px;
  font-family: 'Noto Serif', serif;
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.1em;
  color: #000;
}

.box-right-1 ul li {
  display: block;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.box-right-1 a {
  display: block;
  padding: 10px 20px;
  font-size: 1.1em;
  line-height: 1.3em;
  color: #000;
}

.box-right-1 a span { color: #f39430; }

.box-right-1 ul li:hover, .box-right-1 ul li:active, .box-right-1 .active { background: #f39430; }

.box-right-1 ul li:hover a, .box-right-1 ul li:active a, .box-right-1 ul li:hover a span, .box-right-1 ul li:active a span, .box-right-1 .active, .box-right-1 .active span { color: #fff; }

.box-right-2 img {
  width: 100%;
  margin-bottom: 70px;
}

.box-right .trap-btn-3:before { border-top: 30px solid #f2ede4; }

.box-right-3a, .box-right-3b, .box-right-3c, .box-right-3d { height: 160px; }

.box-right-3a h3, .box-right-3b h3, .box-right-3c h3, .box-right-3d h3, .box-right-3e h3 { color: #fff; }

.box-right-3a { background: #3b5998; }

.box-right-3a .trap-btn-3:before { border-top: 30px solid #3b5998; }

.box-right-3b { background: #bb0000; }

.box-right-3b .trap-btn-3:before { border-top: 30px solid #bb0000; }

.box-right-3c { background: #157a3d; }

.box-right-3c .trap-btn-3 { background: #f39430; }

.box-right-3c .trap-btn-3:before {
  border-top: 30px solid #157a3d;
  border-right: 15px solid #f39430;
}

.box-right-3c .trap-btn-3:hover, .trap-btn-3:active { background: #f2ede4; }

.box-right-3c .trap-btn-3:hover:before, .box-right-3c .trap-btn-3:active:before { border-right: 15px solid #f2ede4; }

.box-right-3c .trap-btn-3 span { color: #fff; }

.box-right-3c .trap-btn-3:hover span, .box-right-3c .trap-btn-3:active span { color: #f39430; }

.box-right-3d { background: #f39430; }

.box-right-3d .trap-btn-3 { background: #f2ede4; }

.box-right-3d .trap-btn-3:before {
  border-top: 30px solid #f39430;
  border-right: 15px solid #f2ede4;
}

.box-right-3d .trap-btn-3:hover, .trap-btn-3:active { background: #157a3d; }

.box-right-3d .trap-btn-3:hover:before, .box-right-3d .trap-btn-3:active:before { border-right: 15px solid #157a3d; }

.box-right-3d .trap-btn-3 span { color: #f39430; }

.box-right-3d .trap-btn-3:hover span, .box-right-3d .trap-btn-3:active span { color: #fff; }

.box-right-3e {
  height: 230px;
  background: #e62d29;
}

.box-right-3e .newsletter-box-input {
  top: 5px;
  overflow: visible;
}

.box-right-3e .newsletter-box-input input { width: 100%; }

.box-right-3e .trap-btn-3 {
  position: absolute;
  top: 70px;
  right: -20px;
  padding: 0;
  border: 0;
}

.box-right-3e .trap-btn-3:before { border-top: 30px solid #e62d29; }

.box-right-3e .trap-btn-3 span {
  top: 3px;
  font-size: 1.5em;
}


/*
----------------
6 - Stile footer
----------------
*/
#footer {
  max-width: 1200px;
  width: 100%;
  position: relative;
  margin: 240px auto 40px;
  overflow: auto;
  box-sizing: border-box;
}

.box-x4b {
  width: 270px;
  height: 270px;
  position: relative;
  display: inline-block;
  float: left;
  margin: 15px;
  padding: 20px;
  box-sizing: border-box;
}

.box-newsletter-2 { background: #fff; }

.box-x4b h4 {
  font-family: 'Noto Serif', serif;
  font-size: 1.3em;
  font-weight: 700;
  color: #f39430;
}

#footer p {
  margin: 15px 0 30px;
  font-size: 0.8em;
  line-height: 1.45em;
  color: #000;
}

.box-newsletter-2 .newsletter-box-input {
  top: 5px;
  overflow: visible;
}

.box-newsletter-2 .newsletter-box-input input { width: 100%; }

.box-x4b .btn-2a {
  position: absolute;
  top: 75px;
  left: 50%;
  margin-left: -80px;
  padding: 0;
  border: 0;
}

.box-x4b .btn-2a span {
  top: 3px;
  font-size: 1.5em;
}

.box-x4b .btn-2b {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -80px;
}

.box-newsletter-2 .trap-btn-2:before { border-top: 30px solid #fff; }

.box-newsletter-2 .trap-btn-2:after { border-bottom: 30px solid #fff; }

.box-sostienici { border-right: 1px solid rgba(0, 0, 0, 0.2); }

.box-sostienici h4 { color: #e62d29; }

.box-sostienici .trap-btn-2:before { border-top: 30px solid #f2ede4; }

.box-sostienici .trap-btn-2:after { border-bottom: 30px solid #f2ede4; }

.box-contatti a { color: #000; }

.box-contatti a:hover, .box-contatti a:active { border-bottom: 1px solid #000; }

.box-info {
  float: right;
  margin-top: 20px;
  font-size: 0.8em;
  line-height: 1.45em;
  text-align: right;
}

.box-info > a {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-left: 5px;
}

.box-info > a:nth-child(1) {
  background: url('../img/facebook-2a.png') no-repeat;
  background-size: cover;
}

.box-info > a:nth-child(1):hover, .box-info > a:nth-child(1):active {
  background: url('../img/facebook-2b.png') no-repeat;
  background-size: cover;
}

.box-info > a:nth-child(2) {
  background: url('../img/youtube-2a.png') no-repeat;
  background-size: cover;
}

.box-info > a:nth-child(2):hover, .box-info > a:nth-child(2):active {
  background: url('../img/youtube-2b.png') no-repeat;
  background-size: cover;
}

.site-plus {
  display: block;
  margin: 65px 0 85px;
}

.site-plus a { color: #f39430; }

.site-plus a:hover, .site-plus a:active { border-bottom: 1px solid #f39430; }

.site-plus span { margin: 0 5px; }


/*
-------------------------
7 - Stile conferma/errore
-------------------------
*/
#central-container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

#central-container h1 {
  font-family: 'Noto Serif', serif;
  font-size: 3.5em;
  font-weight: 700;
  line-height: 1.3em;
  text-transform: uppercase;
}

#central-container p {
  margin: 30px 0 60px;
  font-size: 1.1em;
  line-height: 1.3em;
}

.trap-btn-4 {
  width: 340px;
  height: 40px;
  display: block;
  margin: 0 auto;
  text-align: center;
  background: #f39430;
}

.btn-4a:hover, .btn-4a:active { background: #e62d29; }

.btn-4b:hover, .btn-4b:active { background: #157a3d; }

.trap-btn-4:before {
  content: "";
  width: 0;
  height: 40px;
  float: left;
  border-right: 20px solid #f39430;
  box-sizing: border-box;
}

.btn-4a:before { border-top: 40px solid #2ecc71; }

.btn-4b:before { border-top: 40px solid #e74c3c; }

.btn-4a:hover:before, .btn-4a:active:before { border-right: 20px solid #e62d29; }

.btn-4b:hover:before, .btn-4b:active:before { border-right: 20px solid #157a3d; }

.trap-btn-4:after {
  content: "";
  width: 0;
  height: 40px;
  float: right;
  border-left: 20px solid #f39430;
  box-sizing: border-box;
}

.btn-4a:after { border-bottom: 40px solid #2ecc71; }

.btn-4b:after { border-bottom: 40px solid #e74c3c; }

.btn-4a:hover:after, .btn-4a:active:after { border-left: 20px solid #e62d29; }

.btn-4b:hover:after, .btn-4b:active:after { border-left: 20px solid #157a3d; }

.trap-btn-4 span {
  position: relative;
  top: 9px;
  font-family: 'Noto Serif', serif;
  font-size: 1.3em;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}


/*
---------------
8 - Stile admin
---------------
*/
.back-home, .admin-name {
  position: absolute;
  top: 15px;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.3em;
}

.back-home {
  left: 15px;
  text-transform: uppercase;
  color: #fff;
}

.back-home:hover, .back-home:active { border-bottom: 1px solid #fff; }

.admin-name {
  right: 15px;
  color: #157a3d;
}

#admin, #pages-list, #action-option {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

#admin h1 {
  font-family: 'Noto Serif', serif;
  font-size: 4.85em;
  text-transform: uppercase;
  color: #fff;
}

#admin form, #action-option form { margin-top: 30px; }

#admin input {
  width: 270px;
  display: block;
  margin: 15px auto;
  padding: 10px;
  font-size: 1.2em;
  font-weight: 400;
  color: #000;
  background: #fff;
  border: none;
  box-sizing: border-box;
}

input#login {
  width: 270px;
  padding: 10px;
  font-family: 'Noto Serif', serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: #157a3d;
  cursor: pointer;
  box-sizing: border-box;
}

input#login:hover, input#login:active {
  color: #000;
  background: #f2ede4;
}

#admin p, #action-option p {
  font-size: 1.2em;
  font-weight: 400;
  font-style: italic;
  color: #e62d29;
}

#pages-list a {
  display: block;
  font-family: 'Noto Serif', serif;
  font-size: 3.25em;
  font-weight: 700;
  line-height: 1.3em;
  text-transform: uppercase;
  color: #000;
}

#pages-list a:hover, #pages-list a:active { color: #f39430; }

#actions-list {
  position: absolute;
  top: 65px;
  left: 50%;
  margin-bottom: 65px;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

#actions-list h2 {
  font-family: 'Noto Serif', serif;
  font-size: 2.25em;
  text-transform: uppercase;
  color: #000;
}

#actions-list ul {
  margin: 30px 0;
  list-style-type: disc;
}

#actions-list ul li {
  width: 600px;
  position: relative;
  padding: 15px 0;
  border-bottom: 1px solid #000;
}

#actions-list ul li > a, .actions-options a {
  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;
  color: #f39430;
}

#actions-list ul li > a:hover, #actions-list ul li > a:active, .actions-options a:hover, .actions-options a:active { color: #000; }

.actions-content {
  position: relative;
  top: 0;
  left: 0;
}

.actions-content p {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.3em;
  color: #000;
}

.actions-content p b { text-transform: uppercase; }

.actions-content p a {
  color: #000;
  text-transform: none;
}

.actions-content p a:hover, .actions-content p a:active { border-bottom: 1px solid #000; }

.actions-options {
  position: absolute;
  right: 0;
  bottom: 15px;
}

#action-option h3 {
  font-family: 'Noto Serif', serif;
  font-size: 2em;
  text-transform: uppercase;
  color: #000;
}

#action-option input {
  width: 370px;
  display: block;
  margin: 15px auto;
  padding: 10px;
  font-size: 1.2em;
  font-weight: 400;
  color: #000;
  background: #fff;
  border: none;
  box-sizing: border-box;
}

input#action-1, input#action-2 {
  width: 370px;
  padding: 10px;
  font-family: 'Noto Serif', serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
}

input#action-1:hover, input#action-1:active, input#action-2:hover, input#action-2:active { background: #f39430; }

input#action-1 { background: #157a3d; }

input#action-2 { background: #e62d29; }


/*
-----------------------------
9 - Stili smartphone & tablet
-----------------------------
*/
/* tablet */
@media only screen and (min-width: 769px) and (max-width: 1199px) {
  #header-wrapper { position: relative; }

  #header {
    width: 100%;
    height: 85px;
  }

  .home-logo-big { display: none; }

  .home-logo-small {
    display: inline-block;
    margin-left: -20px;
  }

  .top-nav, .top-nav li, .top-social, .top-social li { display: none; }

  #right-header { width: 100%; }

  .hamburger-icon {
    width: 35px;
    height: 35px;
    display: inline-block;
    position: absolute;
    top: 35px;
    right: 15px;
    cursor: pointer;
  }

  .hamburger-icon:before {
    content: "";
    width: 35px;
    height: 4px;
    position: absolute;
    background: #fff;
    box-shadow: 0 10px 0 0 #fff,0 20px 0 0 #fff;
  }

  .bottom-nav {
    width: 100%;
    display: none;
    position: relative;
    top: 0;
    margin: 15px 0 45px;
    padding: 15px;
    box-sizing: border-box;
  }

  .bottom-nav li {
    display: block;
    padding: 10px 0;
    text-align: center;
  }

  .bottom-nav-link {
    top: 0;
    padding: 0;
    color: #f39430;
  }

  .bottom-nav li:hover .bottom-nav-link, .bottom-nav li:active .bottom-nav-link {
    background: none;
    border-bottom: 2px solid #f39430;
  }

  .bottom-sub-nav { display: none; }

  .bottom-nav li:hover .bottom-sub-nav, .bottom-nav li:active .bottom-sub-nav { display: none; }

  .trap-btn-1 {
    position: absolute;
    left: 50%;
    margin-left: -100px;
  }

  .trap-btn-1:before { border-top: 40px solid #f2ede4; }

  .trap-btn-1:after { border-bottom: 40px solid #f2ede4; }

  #content-wrapper { top: 0; }

  .content-central-section-1 {
    margin: 70px auto;
    padding: 15px;
    box-sizing: border-box;
  }

  .content-central-section-1 h2 { margin-left: 0; }

  .box-x3 {
    width: 100%;
    display: block;
    margin: 15px 0;
  }

  .box-x2 {
    width: 100%;
    height: 510px;
  }

  .box-dicono-di-noi {
    margin-bottom: 60px;
    background: url('../img/home-page/dicono-di-noi.png') no-repeat center;
    background-size: 100%;
  }

  .box-x4a {
  	width: 45.9%;
  	margin-bottom: 60px;
  }

  .content-central-section-2 { margin: 30px auto; }

  .section-img { height: 350px; }

  .right-content { display: none; }

  .left-content { width: 100%; }

  .graph-img { height: 35px; }

  .content-gallery { text-align: center; }

  .gallery-img { margin: 25px 25px 0 0; }

  .gallery-img:nth-child(10), .gallery-img:nth-child(13), .gallery-img:nth-child(16), .gallery-img:nth-child(19), .gallery-img:nth-child(22), .gallery-img:nth-child(25), .gallery-img:nth-child(28), .gallery-img:nth-child(31), .gallery-img:nth-child(34), .gallery-img:nth-child(37) { margin: 25px 25px 0 0; }

  .related-content {
  	margin-top: 70px;
  	padding-top: 0;
  }

  .related-content h4, .box-x3-left { display: none; }

  #footer { margin: 90px auto 0; }

  .box-x4b { width: 45.9%; }

  .box-sostienici { border-right: none; }

  .box-info { margin-right: 35px; }

  .site-plus { margin: 65px 0 35px; }
}
/* smartphone */
@media only screen and (max-width: 768px) {
  #header-wrapper { position: relative; }

  #header {
    width: 100%;
    height: 65px;
  }

  .home-logo-big { display: none; }

  .home-logo-small {
    width: 60px;
    display: inline-block;
    margin-left: -20px;
  }

  .top-nav, .top-nav li, .top-social, .top-social li { display: none; }

  #right-header { width: 100%; }

  .hamburger-icon {
    width: 35px;
    height: 35px;
    display: inline-block;
    position: absolute;
    top: 22px;
    right: 15px;
    cursor: pointer;
  }

  .hamburger-icon:before {
    content: "";
    width: 35px;
    height: 4px;
    position: absolute;
    background: #fff;
    box-shadow: 0 10px 0 0 #fff,0 20px 0 0 #fff;
  }

  .bottom-nav {
    width: 100%;
    display: none;
    position: relative;
    top: 0;
    margin: 15px 0 45px;
    padding: 15px;
    box-sizing: border-box;
  }

  .bottom-nav li {
    display: block;
    padding: 10px 0;
    text-align: center;
  }

  .bottom-nav-link {
    top: 0;
    padding: 0;
    color: #f39430;
  }

  .bottom-nav li:hover .bottom-nav-link, .bottom-nav li:active .bottom-nav-link {
    background: none;
    border-bottom: 2px solid #f39430;
  }

  .bottom-sub-nav { display: none; }

  .bottom-nav li:hover .bottom-sub-nav, .bottom-nav li:active .bottom-sub-nav { display: none; }

  .trap-btn-1 {
    position: absolute;
    left: 50%;
    margin-left: -100px;
  }

  .trap-btn-1:before { border-top: 40px solid #f2ede4; }

  .trap-btn-1:after { border-bottom: 40px solid #f2ede4; }

  #content-wrapper { top: 0; }

  .slides-box-wrapper { display: none; }

  .content-central-section-1 {
    margin: 30px auto;
    padding: 15px;
    box-sizing: border-box;
  }

  .content-central-section-1 h2 { margin: 0 0 15px 0; }

  .box-x3 {
    width: 100%;
    display: block;
    margin: 15px 0;
  }

  .box-x2 {
    width: 100%;
    height: auto;
  }

  .box-dicono-di-noi {
    height: 410px;
    margin-bottom: 30px;
    background: url('../img/home-page/dicono-di-noi.png') no-repeat center;
  }

  .box-newsletter-1 ul {
    margin-bottom: 40px;
    padding: 0;
  }

  .box-newsletter-1 .trap-btn-2 { bottom: 0; }

  .box-x4a {
    width: 100%;
    height: auto;
    margin: 0 0 60px 0;
  }

  .box-x4a p { margin-bottom: 60px; }

  .content-central-section-2 { margin: 20px auto; }

  .page-intro a, .page-intro span, .page-intro p { display: none; }

  .section-img { height: 250px; }

  .right-content { display: none; }

  .left-content { width: 100%; }

  .big-vid, .map { height: 390px; }

  .graph-img { height: 17px; }

  .content-gallery { text-align: center; }

  .gallery-img { margin: 25px 25px 0 0; }

  .gallery-img:nth-child(10), .gallery-img:nth-child(13), .gallery-img:nth-child(16), .gallery-img:nth-child(19), .gallery-img:nth-child(22), .gallery-img:nth-child(25), .gallery-img:nth-child(28), .gallery-img:nth-child(31), .gallery-img:nth-child(34), .gallery-img:nth-child(37) { margin: 25px 25px 0 0; }

  .related-content {
    margin-top: 50px;
    padding-top: 0;
  }

  .related-content h4, .box-x3-left { display: none; }

  #footer {
    margin: 50px auto 0;
    padding: 15px;
    overflow: auto;
  }

  .box-x4b {
    width: 100%;
    margin: 0 0 15px 0;
    text-align: center;
  }

  .box-sostienici {
    height: auto;
    border-right: none;
  }

  .box-sostienici .trap-btn-2 { bottom: 0; }

  .box-contatti, .box-info {
    width: 100%;
    text-align: center;
  }

  .box-contatti { margin: 20px 0 0 0; }

  .box-info { margin: -20px 0 0 0; }

  .site-plus { margin: 20px 0 30px; }
}



.u-upp{
  text-transform: uppercase;
}

.text-center{
  text-align: center;
}
.m-top-1{
  margin-top: 32px;
}

/*
----------------------
GIVING TUESDAY
----------------------
*/

.giving-img {
  background: url('../img/giving.jpg') bottom no-repeat;
  background-size: cover;
  background-position: bottom;
}

.giving-box{
  line-height: 140%;
}
.giving-box h1{
  text-align: center;
  margin-top: 8px;
  margin-bottom: 16px;
}
.giving-box a {
  color: #f39430;
}