/*
Theme Name: Relational Design
Theme URI: https://baasbox.com/
Author: Baasbox Team
Author URI: https://baasbox.com/
Description: Theme for the website Relational design
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ethical_design
Tags: custom
*
*/


/* 1. Shared CSS Styles */

body {
  background-color: rgba(241, 240, 234, 0.32);
}

section {
  position: relative;
}

h1, h2, a.btn {
  z-index: 100;
}

.elevated {
  z-index: 100;
}

.wrapper {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}
.full-height {
  height: calc( 100vh);
  min-height: 800px;
  position: relative;
}

h1 {
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 1.08;
  letter-spacing: 0.1px;
}
h1:after {
  content:'';
  width: 98px;
  height: 8px;
  background-color: #1e221e;
  display: block;
  margin-top: 24px;
}
h1.hometop {
  font-size: 135px;
  text-align: center;
  margin-bottom: 16px;
}
h1.hometop:after {
  margin: 10px auto;
  display: none;
}
h1.top {
  text-align: center;
}
h1.top:after {
   display: none;
}

h2 {
	font-family: 'Source Serif Pro', serif;
	font-size: 36px;
	font-weight: bold;
	letter-spacing: 0.1px;
  line-height: 1.2;
	text-align: left;
	color: #1e221e;
}

h2.light_low:after {
  content: '';
  width: 80px;
  height: 4px;
  background-color: #1e221e;
  display: block;
  margin: 24px 0 0 0;
}

.h2_top {
  font-family: 'Source Serif Pro', serif;
  font-size: 36px;
  text-align: center !important;
  letter-spacing: 0.1;
  color: #1e221e;
  font-weight: normal !important;
}

h1 .h1_supertop::after {
  content:'';
  width: 98px;
  height: 8px;
  background-color: #1e221e;
  display: block;
  margin: 24px auto 0 auto;
}

h1.no-underline::after {
  content: '';
  width: 0;
  height: 0;
}

.h1_supertop {
  font-family: 'Source Serif Pro', serif;
  font-size: 144px;
  font-weight: bold;
  line-height: 1.08;
  letter-spacing: 0.1px;
  text-align: center !important;
}

p {
  word-break: normal;
}

.p-14 {
  font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	letter-spacing: 0;
	text-align: left;
	color: #1e221e;
}

.p-20 {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 20px;
	letter-spacing: 0;
	text-align: left;
	color: #1e221e;
  line-height: 1.4;
}

.p-30 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-align: left;
  color: #1e221e;
}

.p-16 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.9px;
  color: #1e221e;
}

.top10 {
  margin-top: 10px;
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left !important;
}

.text-gray {
  color: rgba(30, 34, 30, 0.8);
}

.bg-dark a.btn.red {
  border-color: white !important;
  background-color: white !important;
  color: blue;
}

.bg-dark.pink {
  background-color: #fc7281;
}

.bg-dark.pink a {
  color: #fc7281 !important;
}

.bg-dark.pale-pink {
  background-color: #d0acd1;
}

.bg-dark.pale-pink a {
  color: #d0acd1 !important;
}

.bg-dark.salmon-pink {
  background-color: #fc7281;
}

.bg-dark p, .bg-dark h1, .bg-dark h2, .bg-dark a {
  color: white !important;
}

.bg-dark h1:after {
  background-color: white;
}

.bg-lighter {
  background-color: rgba(245, 245, 245, .32);
}

.bg-light {
  background-color: rgba(245, 245, 245, 1);
}

.bg-gray {
  background-color: rgba(241, 240, 234, 0.32);
}

.bg-dark-gray {
  background-color: rgba(241, 240, 234, 0.60);
}

.bg-white {
  background-color: white;
}

.bg-dark.blue {
  background-color: #687fc0;
}

.nomargin {
  margin:0 !important;
}

section.padded {
  padding: 120px 0;
}

.padded80 {
  padding: 80px 0;
}

.rd-logo {
  width: 70px;
  height: auto;
}

.needs p:not([class]), .needs p:not([class]) a {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px !important;
  letter-spacing: 0;
  text-align: left;
  color: #1e221e;
  line-height: 1.4;
}

.needs p:not([class]) a {
  word-break: break-all;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.row.align-center {
  align-items: center;
}
.row .item {
  min-width: 300px;
  width: calc( 100% / 12 * 5 );
  z-index: 50;
}
.row .item.i3 {
  width: calc( 100% / 12 * 3 );
}
.row .item.i8 {
  width: calc( 100% / 12 * 8 );
}
.row .item.i12 {
  width: 100%;
}
.row .item h2, .row .item h1 {
  margin-bottom: 24px;
}
.row .item img {
  margin-bottom: 32px;
}
.row.center {
  justify-content: center;
}
.row.end {
  justify-content: flex-end;
}

.btn {
  width: calc( 100% - 44px );
  display: block;
  padding: 22px;
  border-radius: 8px;
  border: 2px solid rgba(30, 34, 30, 0.8);
  text-align: center;
  text-decoration: none;
  font-size: 16px !important;
  text-transform: uppercase !important;
}

.btn:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.btn.red {
  border-color: #fc7281;
  background-color: #fc7281;
  color: white;
}

.btn.violet {
  border-color: #687fc0;
  color: #687fc0;
}

.btn.white {
  border-color: white;
  color: white;
}

.btn.salmon {
  border-color: #fc7281;
  color: #fc7281;
}

.w50 {
  width: 50% !important;
  margin: 0;
}

.p-30-bold {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 30px;
  letter-spacing: 0.7px;
  color: #1e221e;
  text-align: left;
  font-weight: bold;
}

.p-35-light {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 0.1px;
  color: #1e221e;
  text-align: left;
  font-weight: 300;
}

.item p:not([class]), .p-24 {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 24px;
	letter-spacing: 0;
	text-align: left;
	color: #1e221e;
  line-height: 1.4;
}

b, strong {
  font-weight: bold;
}
i {
  font-style: italic;
}

/* 2. Header */
header {
  width: 100%;
  position: fixed;
  z-index: 500;
  background-color: trasparent;
}

header.scrolled {
  background-image: linear-gradient(to bottom, #e6e6e6, #fbfaf8);
}

header .header {
  width: 100%;
  max-width: 1200px;
  margin:0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
header .logo {
  display: block;
  height: 70px;
  padding: 0;
}
header .menu {
  display: flex;
  flex-direction: row;
  align-items: center;
}
header .menu .fblink {
  padding: 25px 14px;
}
header .menu .fblink img {
  width: 18px;
  height: 18px;
}

header .header_menu {
  display: initial;
}

header .header_menu ul {
  display: flex;
  flex-direction: row;
}
header .header_menu ul li.current_page_item {
  border-bottom: 4px solid #484349;
}
header .header_menu ul li {
  border-bottom: 4px solid transparent;
}
header .header_menu ul li a {
  display: block;
  padding: 25px 14px;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  transition: border-bottom 200ms ease-in-out;
}

.bottom_menu {
  width: 100%;
  background-color: rgba(245, 245, 245, 1);
}

.bottom_menu ul {
  display: flex;
  width: 100%;
  height: 50px;
  flex-direction: row;
  z-index: 300;
}

.bar-placeholder {
  height: 100px;
  width: 100%;
}

.bottom_menu ul li {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bottom_menu ul li a {
  text-align: center;
  color: black;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
  transition: border-bottom 200ms ease-in-out;
}

.bottom_navigation {
  display: none;
}

.bottom_menu_icon {
  width: 48px;
}

.menu_icon {
  width: 36px;
  height: auto;
}

header.white .header_menu ul li.current_page_item {
  border-bottom: 4px solid white;
}

header.white .header_menu ul li a {
  display: block;
  padding: 25px 14px;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  transition: border-bottom 200ms ease-in-out;
}

/* 3. Footer */
footer {
  width: 100%;
  padding-top: 80px;
  padding-bottom: 35px;
  background: #f1f0ea;
}
footer .logo {
  height: 50px;
  display: block;
}
footer .menubar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 40px;
  margin-bottom: 80px;
}
footer .menubar .p-20 {
  font-size: 14px;
  width: 30%;
  margin-right: 60px;
  padding-right: 25px;
}
footer .menubar .menus {
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
footer .menubar .menus .footer_menu {
  margin: 0 10px;
}

footer .menubar .menus .footer_menu ul li {
  margin-bottom: 8px;
}

footer .menubar .menus .footer_menu ul li a {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  color: black;
  text-decoration: none;
  color: #1e221e;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1px;
}
footer .menubar .menus .footer_menu ul li a:hover {
  text-decoration: underline;
}

footer .bottombar {
  display: flex;
  flex-direction: row;
  flex: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

footer .credits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

footer .credits p {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  margin-top: 10px;
  text-align: center;
}

footer .credits p.big {
  font-weight: 600;
}

footer .socials {
  display: block;
  text-align: center;
  margin-bottom: 10px;
}
footer .socials a {
  display: inline-block;
  margin-right: 15px;
  width: 24px;
  height: 24px;
}
footer .socials a img {
  width: 100%;
  height: 100%;
}

.small_icon {
  width: 16px;
  height: 16px;
}

.footer_chevron {
  display: none;
}

/* Page metodo */

.page-metodo .full-height {
  display: flex;
  justify-content: center;
  align-items: center;
}

.design_types {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 60px;
}

.design_types .item img {
  width: 340px;
  height: 340px;
  display: block;
}
.design_types .item p {
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  font-size: 18px;
  margin-top: 24px;
}

.full-image {
  width: 100%;
  height: auto;
}

.half-image {
  display: block;
  width: 350px;
  height: auto;
  margin: 200px auto 100px auto !important;
}

.rights-container .item {
  padding: 80px 0;
}

.rights-container .row {
  padding: 0;
}

.row {
  z-index: 2;
}

.row .item .spacer {
  display: block;
  margin: 16px auto;
  width: 24px;
  height: 4px;
  background-color: rgba(30, 34, 30, 0.5);
}

.spacer.salmon {
  background-color: #feb99b !important;
}

.spacer.blue {
  background-color: #687fc0 !important;
}

.spacer.purple {
  background-color: #d0acd1 !important;
}

.spacer.red {
  background-color: #fc7281 !important;
}

.row .item .spacerblack {
  display: block;
  margin: 16px 0;
  width: 98px;
  height: 4px;
  background-color: #1e221e;
}
/* 4. Body */
.half {
  width: 50%;
  z-index: 2;
}

.half .p-24 {
  padding: 24px 0 24px 0
}

.half a {
  color: black;
  text-decoration: none;
}

.half a:hover {
  text-decoration: underline;
}

.section {
  display: flex;
  flex-direction: column;
}

.single-center-w66 {
  display: flex;
  width: 66%;
  text-align: center;
  margin: auto;
  flex-direction: column;
  align-items: center;
}

.single-center-w66 h2 {
  text-align: center;
}

.single-center-w66 .p-24 {
  text-align: center;
  margin: 32px 0 60px 0;
}

.single-center-w100 {
}

.full-width-light {
  width: 100%;
  background-color: #f1f0ea;
}

.full-width-white {
  width: 100%;
  background-color: white;
}

.full-width-cream {
  width: 100%;
  background-color: #fbfaf8;
}

/* 5. Home */
.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
}

.home {

}

.home .main-header {
  margin-top: 40px;
}

.home .full-height {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.designers .full-height {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.main-header {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.designers .main-header {
  align-items: flex-start;
}

.learn-more {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 60px 0 8px 0;
}

.neutral-link {
  font-size: 24px;
  letter-spacing: 0px;
}

.quote-container {
  display: flex;
  align-items: center;
}

.quote-container p {
  text-align: center;
}

.quote-container .half {
  margin: 0 15px 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quote-container .half a {
  margin: 40px auto 40px auto;
}

.quote_img {
  width: 122px;
  height: auto;
  padding-top: 30px;
}

/* Page Business */

.page-business .full-height .item {
  width: 70%;
}
.page-business .full-height .item h1 {
  margin-bottom: 32px;
}
.page-business .full-height .row {
  padding-bottom: 160px;
}
.page-business .full-height {
  align-items: flex-end;
  display: flex;
}
.page-business-vantaggi .item img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto;
  margin-top: 140px;
  margin-bottom: 32px;
  display: block;
}

.page-business img.icon {
  margin-top: 140px;
}

.method-icon {
  width: 150px;
  height: 150px;
}

img.icon {
  width: 80px;
  height: 80px;
}

/* 6. For Designers */
.half h2 {
  margin: 24px 0 24px 0;
}

.right-gravity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.designers .main-header .item {
  width: 70%;
}

.challenge-container {
  display: flex;
  flex-direction: column;
  padding: 120px 0 80px 0;
}

.features-container .item {
  display: flex;
  flex-direction: column;
}

.features-container .item h2 {
  margin: 24px 0 20px 0;
  font-size: 30px;
}

.features-container .item img {
  margin-top: 120px;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
}

.feature p {
  text-align: center;
  margin-top: 34px;
}

.feature a {
  margin-top: 40px;
}

.designers-header {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.designers-header .top {
  text-align: left;
}

.designers-header .p-24 {
  text-align: left;
  margin-top: 10px;
}

.full-height.flex {
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* Background Animations */
.bubbled {
  position: relative;
  overflow: hidden;
}


.bubbled:after {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-color: rgba(216, 216, 216, 0.5);
  z-index: -1;
  display: block;
  width: 400px;
  height: 400px;
  top:calc( 60% - 200px );
  left:100px;
  animation: moveAnim2 linear 8s infinite;
}
.bubbled:before {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-color: rgba(216, 216, 216, 0.5);
  z-index: -1;
  width: 500px;
  height: 500px;
  top:calc( 50% - 250px );
  left:-100px;
  animation: moveAnim1 linear 10s infinite;
}
.bubbled.right:after {
  left:calc(100% - 300px);
}
.bubbled.right:before {
  left:calc(100% - 500px);
}

.bubbled.red-blue:before {
  background-color: rgba(252, 114, 129, .5);
}

.bubbled.red-blue:after {
  background-color: rgba(208, 172, 209, .5);
}

/* animated bubble elements */

.bubbles-container {
  position: absolute;
  overflow: hidden;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.three-bubbled {
  border-radius: 50%;
  position: absolute;
  background-color: rgba(252, 114, 129, .46);
  z-index: 1;
  display: block;
  width: 400px;
  height: 400px;
  top:calc( 100% - 400px );
  left:calc(100%  - 200px);
  animation: moveAnim2 linear 8s infinite;
}

.three-bubbled:before {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-color: rgba(254, 185, 155, .46);
  display: block;
  width: 600px;
  height: 600px;
  top: 40px;
  right: 240px;
  animation: moveAnim2 linear 10s infinite;
}

.three-bubbled:after {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-color: rgba(208, 172, 209, 0.5);
  width: 500px;
  height: 500px;
  top: -200px;
  left: 20px;
  animation: moveAnim1 linear 10s infinite;
}

.redish-bubbles {
  border-radius: 50%;
  position: absolute;
  background-color: rgba(252, 114, 129, .6);
  z-index: 1;
  display: block;
  width: 400px;
  height: 400px;
  top: 50%;
  left: calc(100% - 200px);
  animation: moveAnim2 linear 10s infinite;
}

.redish-bubbles:before {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-color: rgba(254, 185, 155, .6);
  z-index: 1;
  display: block;
  width: 250px;
  height: 250px;
  top: 33%;
  left: -100px;
  animation: moveAnim1 linear 6s infinite;
}

.redish-bubbles:after {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-color: rgba(208, 172, 209, .6);
  opacity: 1;
  z-index: 1;
  display: block;
  width: 350px;
  height: 350px;
  top: 66%;
  left: -30px;
  animation: moveAnim3 linear 8s infinite;
}

.orange-pink:before {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-color: rgba(254, 185, 155, .46);
  z-index: 1;
  display: block;
  width: 300px;
  height: 300px;
  top: calc(50% - 300px);
  left: -50px;
  animation: moveAnim1 linear 10s infinite;
}

.orange-pink {
}

.orange-pink:after {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-color: rgba(208, 172, 209, .80);
  z-index: 1;
  display: block;
  width: 160px;
  height: 160px;
  top: calc(50% - 120px);
  left: -50px;
  animation: moveAnim2 linear 8s infinite;
}

.blue-purple {
}

.blue-purple:before {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-color: rgba(208, 172, 209, .24);
  z-index: 1;
  display: block;
  width: 800px;
  height: 800px;
  top: 30%;
  left: calc(100% - 600px);
  animation: moveAnim1 linear 20s infinite;
}

.blue-purple:after {
  content: '';
  border-radius: 50%;
  position: absolute;
  background-color: rgba(252, 114, 129, .24);
  opacity: 1;
  z-index: 1;
  display: block;
  width: 450px;
  height: 450px;
  top: calc(100% - 200px);
  left: calc(100% - 200px);
  animation: moveAnim2 linear 15s infinite;
}

.bubble {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  display: block;
}

.bubble.big-salmon {
  background-color: rgba(254, 185, 155, .5);
  opacity: 1;
  width: 640px;
  height: 640px;
  top: 10%;
  left: calc(100% - 200px);
  animation: moveAnim1 linear 10s infinite;
}

.bubble.big-blue {
  background-color: rgba(104, 127, 192, .5);
  opacity: 1;
  width: 530px;
  height: 530px;
  top: calc(50% - 260px);
  left: calc(100% - 260px);
  animation: moveAnim2 linear 8s infinite;
}

.bubble.salmon {
  background-color: rgba(254, 185, 155, .5);
  width: 250px;
  height: 250px;
  top: calc(50% - 20px);
  left: 125px;
  animation: moveAnim1 linear 8s infinite;
}

.bubble.violet {
  background-color: rgba(208, 172, 209, .5);;
  width: 350px;
  height: 350px;
  top: 30%;
  left: 55px;
  animation: moveAnim2 linear 10s infinite;
}

.bubble.red {
  background-color: rgba(252, 114, 129, .5);
  width: 380px;
  height: 380px;
  top: 50%;
  left: -55px;
  animation: moveAnim3 linear 10s infinite;
}

.bubble.pale-purple {
  background-color: rgba(208, 172, 209, .5);
  width: 530px;
  height: 530px;
  top: 20%;
  left: calc(100% - 100px);
  animation: moveAnim1 linear 8s infinite;
}

.bubble.pale-salmon {
  background-color: rgba(254, 185, 155, .5);
  width: 530px;
  height: 530px;
  top: 35%;
  left: calc(100% - 400px);
  animation: moveAnim2 linear 9s infinite;
}

.bubble.pale-purple.left {
  top: 25%;
  left: -130px;
}

.bubble.faded-blue {
  background-color: rgba(104, 127, 192, .5);
  top: 10%;
  left: -500px;
  width: 630px;
  height: 630px;
  animation: moveAnim2 linear 9s infinite;
}

@keyframes moveAnim1 {
  from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
  to   { transform: rotate(-360deg) translateX(30px) rotate(360deg); }
}
@keyframes moveAnim2 {
  from { transform: rotate(0deg) translateX(15px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(15px) rotate(-360deg); }
}
@keyframes moveAnim3 {
  from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  to   { transform: rotate(-360deg) translate(20px) rotate(360deg); }
}

@keyframes appear {
  0% { width: 0; opacity: 0 }
  50% { width: 220px; opacity: 0 }
  100% { width: 220px; opacity: 1 }
}

@keyframes disappear {
  0% { width: 220px; opacity: 1 }
  50% { width: 220px; opacity: 0 }
  100% { width: 0; opacity: 0 }
}

@keyframes expand {
  0% { width: 220px; opacity: 0 }
  50% { width: 220px; opacity: 1 }
  100% { width: 100%; opacity: 1 }
}

@keyframes collapse {
  0% { width: 100%; opacity: 1 }
  100% { width: 100%; opacity: 0 }
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    2% { transform: translate(-1px, -2px) rotate(-1deg); }
    4% { transform: translate(-3px, 0px) rotate(1deg); }
    6% { transform: translate(3px, 2px) rotate(0deg); }
    8% { transform: translate(1px, -1px) rotate(1deg); }
    10% { transform: translate(-1px, 2px) rotate(-1deg); }
    12% { transform: translate(-3px, 1px) rotate(0deg); }
    14% { transform: translate(3px, 1px) rotate(-1deg); }
    16% { transform: translate(-1px, -1px) rotate(1deg); }
    18% { transform: translate(1px, 2px) rotate(0deg); }
    20% { transform: translate(0px, 0px) rotate(0deg); }
    100 { transform: translate(0px, 0px) rotate(0deg); }
}

@keyframes dialog-appear {
    0% { margin-top: -200px; opacity: 0 }
    100% { margin-top: -310px; opacity: 1 }
}

@keyframes dialog-disappear {
    0% { margin-top: -310px; opacity: 1 }
    100% { margin-top: -200px; opacity: 0 }
}

.uppercase {
  text-transform: uppercase;
}

.t30 {
  margin-top: 30px;
}

a.right_link {
  text-decoration: none;
  font-size: 14px;
  color: #1e221e;
  font-weight: 600;
}

a.right_link:hover {
  text-decoration: underline;
}

.item.padded {
  margin: 80px 0;
}

.chevron {
  width: 32px;
  margin: 16px auto;
  z-index: 3;
}

.chevron:hover {
  cursor: pointer;
}

.chevron-container {
  width: 100%;
  position: absolute;
  bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scrollTo {

}

.hidden-section {
  display: none;
}

.hidden {
  display: flex;
}

.shown {
  display: flex;
}

.event-header {
  width: 100% !important;
}

.footer-baasbox {
  height: 24px;
  width: auto;
  margin-left: 10px;
  margin-right: 20px;
}

.footer-logo {
  height: 24px;
  width: auto;
  margin-bottom: 10px;
  margin-right: 20px;
}

.left-gravity {
  justify-content: flex-start;
}

.center-gravity {
  justify-content: center;
}

/*newsletter */
.newsletter h2 {
  font-weight: bold;
  margin-bottom: 10px !important;
}

.newsletter label {
  font-size: 14px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  color: #170d0e;
  user-select: none;
  letter-spacing: 0.6px;
  line-height: 1.5;
}

.bg-dark .newsletter p, .bg-dark .newsletter h2, .bg-dark .newsletter label {
  color: white;
}

.bg-dark .newsletter .btn {
  border-color: white !important;
  background-color: white !important;
}

.bg-dark.pale-pink .btn {
  color: #d0acd1;
}

.newsletter input[type='checkbox'] {
  display: none;
}

#close {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 24px;
  right: 48px;
}

#close:hover {
  cursor: pointer;
}

.newsletter-image {
  height: 195px;
  width: auto;
}

.more-link {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: #687fc0;
  text-decoration: none;
  margin-top: 6px;
  margin-bottom: 32px;
  margin-left: 30px;
}

.newsletter form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.left-gravity .newsletter form {
  align-items: flex-start;
}

.center-gravity .newsletter form {
  align-items: center;
}

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

.newsletter .terms {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
}

#box {
  margin-top: 4px;
}

.newsletter #email-field {
  height: 64px;
  border-radius: 8px;
  background-color: #ffffff;
  border: solid 1px #d8d8d8;
  padding: 0 16px;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Source Sans Pro';
}

.newsletter .email-submit {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.newsletter #email-field {
  flex: 1 1 auto;
}

.newsletter input[type='submit'] {
  font-family: 'Source Sans Pro', sans-serif;
  height: 64px;
  font-size: 16px;
  font-weight: 600;
}

.newsletter .check-image {
  width: 20px;
  height: 20px;
  margin-bottom: 0px !important;
  margin-right: 10px;
  user-select: none;
}

.newsletter input[type='submit'] {
  cursor: pointer;
  margin-left: 16px;
}

.left-gravity .newsletter .item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.center-gravity .newsletter .item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#form:valid input[type='submit'] {
  width: 220px !important;
  display: initial;
  animation-name: appear;
  animation-duration: .3s;
  animation-timing-function: ease-in;
}

#form:invalid input[type='submit'] {
  display: none;
  animation-name: disappear;
  animation-duration: .29s;
  animation-timing-function: ease-out;
}

.newsletter input:focus{
    outline: none;
}

.newsletter .email-submit {
    position: relative;
}

.done-label {
    position: absolute;
    right: 0;
    width: 340px;
    height: 66px;
    border-radius: 8px;
    top: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.done-label p {
  color: white;
  font-size: 36px;
  font-weight: bold;
  font-family: 'Source Sans Pro', sans-serif;
}

.done-label img {
  height: 30px;
  width: 30px;
  margin-right: 10px;
  margin-bottom: 0 !important;
}

.ok-back {
  background-color: #fc7281;
}

.ko-back {
  background-color: #687fc0;
}

.expand {
  display: flex;
  animation-name: expand;
  animation-duration: .8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.collapse {
  animation-name: collapse;
  animation-duration: .8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.disappeared {
  display: none;
}

.shown {
  display: initial;
}

.shakes {
  animation: shake 2.5s;
  animation-iteration-count: infinite;
}

/* Medium section */
.medium h1 {
  font-size: 64px;
  font-weight: 700;
}

.medium a {
  font-family: 'Source Sans Pro', sans-serif;
  color: #687fc0;
  text-decoration: none;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.medium h1:after {
  display: none;
}

.medium .head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.medium .article-container {
  padding-top: 74px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.article-container .card:last-child {
  margin-right: 0;
}

.medium .card {
    max-width: calc((100% - 24px * 3)/4);
    min-width: 250px;
    height: 490px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    margin-right: 24px;
    background-color: white;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.medium .card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.medium .card p.date {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
  color: #9b9b9b;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.medium .card p.p-24 {
  font-family: 'Source Serif Pro', serif;
  font-weight: bold;
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.medium .card .excerpt {
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 1.56;
  flex: 1 1 auto;
  font-size: 18px;
  margin-top: 8px;
}

.medium .card .content {
  flex: 1 1 auto;
  padding: 16px;
  position: relative;
}

.medium .card .link {
  position: absolute;
  bottom: 16px;
}

.medium .art-spacer {
  width: 16px;
  height: 100%;
  background-color: white;
  display: none;
}

#dialog-box {
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-border-radius: 5px;
  -webkit-border-radius: 5px;
	background: white;
  position:fixed;
  width: 950px;
  height: 620px;
  top: 50%;
  left: 50%;
  margin-top: -310px;
  margin-left: -475px;
	z-index:5000;
	display:none;
}

#dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
	width:100%;
	height:100%;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background:#000;
	z-index:3000;
	display:none;
}

.newsletter {
  padding: 40px 100px;
}

.main-newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-newsletter h2 {
  max-width: 850px;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 24px;
}

.main-newsletter a {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  letter-spacing: 0.9px;
  max-width: 700px;
}

.main-newsletter a:hover {
  cursor: pointer;
}

.dialog-shown {
  display: initial;
  animation: dialog-appear ease-in .3s;
}

.dialog-hidden {
  animation: dialog-disappear ease-out .2s;
}

.newsletter-image {
  height: 200px;
  width: 200px;
  align-self: center;
}

.newsletter-footer {
  font-size: 16px;
  letter-spacing: 0.5px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  margin: 30px;
}

.baasbox-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 5px;
}

.baasbox-footer p {
  margin-top: 0 !important;
}

.event-header.pale-pink {
  background-color: transparent !important;
}

.downloads .download {
  margin: 40px 0;
}

.downloads .download p {
  margin-top: 10px;
}

.downloads .download .icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: inline-block;
  margin-right: 10px;
}

@media (max-height: 900px) {
  .design_types .item img{
    height: 200px;
    width: 200px;
  }
}

@@media (max-width: 1000) {

  #dialog-box {
    width: 750px;
    margin-top: -375px;
  }

  .newsletter {
    padding: 30px 50px;
  }
}

@media (max-width: 768px) {

  header {
    width: 100%;
    position: absolute;
    z-index: 100;
    top: 0;
    background-color: trasparent;
  }

  .logo-link {
    padding: 0 16px;
  }

  .home .main-header {
    margin-top: 0;
  }

  header .header_menu {
    display: none;
  }

  .designers-header .p-24 {
    margin-top: 0;
  }

  .btn {
    width: auto;
  }

  h1 {
    font-size: 34px
  }

  h1:after {
    height: 4px;
  }

  h2 {
    font-size: 22px
  }

  h2.light_low:after {
    content: '';
    height: 2px;
  }

  h1.hometop {
    font-size: 65px;
    text-align: left;
  }

  h1.hometop:after {
    margin: 24px 0 18px 0;
  }

  h1.text-center {
    text-align: left;
  }

  .text-center {
    text-align: left;
  }

  .full-height {
    height: calc( 100vh - 117px - 50px);
  }

  .h1_supertop {
    font-size: 100px;
  }

  .h2_top {
    font-size: 17px;
    align-self: flex-start !important;
    text-align: left !important;
    line-height: 1.2;
  }

  section.padded {
    padding: 60px 0;
  }

  .p-24 {
    font-size: 20px;
  }

  .p-20 {
    font-size: 17px;
  }

  .p-16 {
    font-size: 10px;
  }

  .p-14 {
  	font-size: 14px;
  }

  .p-30-bold {
    font-size: 20px;
  }

  .p-35-light {
    font-size: 20px;
  }

  .w50 {
    width: 90% !important;
    margin: 0 auto;
  }

  .btn.w50 {
    margin: 0;
  }

  .half {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .half .btn {
    align-self: center;
  }

  .single-center-w66 {
    display: flex;
    width: 100%;
    text-align: center;
    margin: auto;
    flex-direction: column;
    align-items: center;
  }

  .single-center-w100 {
    width: 100%;
    margin: 0 auto;
  }

  .centered-title {
    align-self: flex-start !important;
  }

  .event-header .row {
    margin-bottom: 80px;
  }

  .row {
    flex-direction: column;
  }

  .row .btn {
    align-self: center;
  }

  .row .item img {
    margin-bottom: 0;
  }

  .row .item {
    width: 100%;
    margin: 0 auto;
  }
  .row .item.i3 {
    width: 100%;
    margin: 0 auto;
  }
  .row .item.i8 {
    width: 100%;
    margin: 0 auto;
  }

  .w50 {
    width: 100%;
  }

  footer .menubar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 30px;
  }

  footer .bottombar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 80px;
  }

  footer .menubar .p-20 {
    font-size: 14px;
    width: 100%;
    margin: 0 auto;
    padding-right: 0;
    margin-bottom: 20px;
  }
  footer .menubar .menus {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  footer .menubar .menus .footer_menu {
    width: 50%;
    margin: 0;
    margin-bottom: 20px;
  }
  footer .menubar .menus .footer_menu ul li {
    padding-right: 8px;
  }

  footer .menubar .menus .footer_menu ul li a {
    font-size: 12px;
  }

  footer .menubar .menus {
    flex: 0 1 auto;
  }

  .logo_container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer_chevron {
    display: initial;
    width: 20px;
  }

  .footer_chevron img {
    width: 20px;
  }

  .hidden {
    display: none !important;
  }

  .shown {
    display: initial;
  }

  .bottom_navigation {
    display: flex;
    position: fixed;
    z-index: 300;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    box-shadow: inset 0 1px 0 0 #f7f9fa;
  }

  .bottom_navigation .current-menu-item a {
    font-weight: bold;
    color: #687fc0;
  }

  .bubbled:after {
    width: 200px;
    height: 200px;
    top:35%;
    left: 50px;
  }

  .bubbled:before {
    width: 250px;
    height: 250px;
    top: 20%;
    left:-50px;
  }

  .padded80 {
    padding: 0;
  }

  .wrapper {
    width: calc(100% - 32px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
  }

  a.event-button {
    margin-top: 24px;
    z-index: 50;
  }

  /** Home specific targets */
  .home .bubbles-container {
    display: none;
  }

  .challenge .single-center-w66 p, .challenge .single-center-w66 h2 {
    text-align: left !important;
  }

  .quote-container .half a {
    margin: 16px auto 16px auto;
  }

  .feature {
    padding: 0;
  }

  /** design page specific */
  h1.top {
    font-size: 40px;
  }

  .design_types .item img {
    height: auto;
    width: 160px;
    margin: 0 auto;
  }

  .design_types .item {
    width: 50%;
  }

  .design_types .item p {
    font-size: 14px;
    padding: 0 55px;
  }

  .designers .main-header .item {
    width: 100%;
  }

  .designers .row .item h1 {
    margin-bottom: 0;
  }

  .rights-container .row {
    padding-top: 32px;
  }

  .rights-container .item {
    padding: 24px 0 10px 0;
  }

  .spacer {
    margin: 16px 0 !important;
  }

  .half-image {
    width: 50%;
    margin: 50px auto 30px auto !important;
  }

  .method-icon {
    width: 75px;
    height: auto;
    margin-bottom: 24px !important;
  }

  .rights-bottom .item {
    margin-bottom: 48px;
  }

  /** business page targets */
  .page-business .full-height .item {
    width: 100%;
  }

  .page-business .bubbles-container .blue-purple {
    display: none;
  }

  .page-business .p-24 {
    font-size: 17px;
  }

  .page-business img.icon {
    width: 60px;
    height: auto;
    margin: 48px 0 24px 0;
  }

  .page-business-vantaggi .item img {
    width: 60px;
    height: auto;
    margin: 48px 0 24px 0;
  }

  .page-business p {
      z-index: 3;
  }

  .page-business .bubbles-container .redish-bubbles {
    width: 200px;
    height: 200px;
    top: calc(60% - 200px);
    left: calc(100% - 100px);
  }

  .page-business .bubbles-container .redish-bubbles:before {
    width: 125px;
    height: 125px;
    top: 16%;
    left: -50px;
  }

  .page-business .bubbles-container .redish-bubbles:after {
    width: 250px;
    height: 250px;
    top: -100px;
    left: 10px;
  }

  section.baasbox {
    display: none !important;
  }

  .baasbox .item.i8 {
    margin-bottom: 16px;
  }

  /** designers page targets */
  .designers .w50 {
    width: 100% !important;
  }

  .designers h1, .designers p {
    z-index: 3;
  }

  .designers-header .bubbles-container .bubble.big-salmon {
    width: 160px;
    height: 160px;
    top: 10%;
    left: calc(100% - 40px);
  }

  .designers-header .bubbles-container .bubble.big-blue {
    width: 120px;
    height: 120px;
    top: calc(30% - 120px);
    left: calc(100% - 120px);
  }

  .designers-header .event {
    width: 100%;
    padding: 80px 0;
  }

  .designers .bubble.salmon {
    width: 100px;
    height: 100px;
    top: 15%;
    left: calc(100% - 120px);
  }

  .designers .bubble.violet {
    width: 130px;
    height: 130px;
    top: calc(50% - 100px);
    left: calc(100% - 50px);
  }

  .designers .bubble.red {
    width: 160px;
    height: 160px;
    top: 10%;
    left: calc(100% - 80px);
  }

  /** users page targets */
  .page-users .pale-salmon, .page-users .pale-purple {
    display: none;
  }

  .page-users .faded-blue {
    height: 160px;
    width: 160px;
    left: -60px;
    top: 10%;
  }

  .page-users .pale-purple.left {
    display: block;
    width: 180px;
    height: 180px;
    top: calc(10% + 80px);
    left: 20px;
  }

  .page-users .item.padded {
    margin: 80px 0 0 0;
  }

  footer .credits {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  footer .sponsors {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  footer .socials {
    margin-top: 20px;
  }

  /* newsletter */
  .center-gravity .newsletter .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .newsletter .terms {
    margin-top: 15px;
    margin-bottom: 20px;
  }

  .newsletter .p-30 {
    font-size: 17px;
  }

  .newsletter label {
    font-size: 12px;
  }

  .newsletter .btn {
    text-align: center;
    padding: initial !important;
    height: 50px !important;
    width: 100% !important;
  }

  .newsletter #email-field {
    height: 50px;
    margin-right: 0;
    font-size: 14px;
  }

  .newsletter .email-submit {
    flex-direction: column;
    width: 100%;
  }

  #form:valid input[type="submit"] {
    width: 100% !important;
    margin-top: 10px;
    margin-left: 0;
  }

  @keyframes appear {
    0% { height: 0; opacity: 0 }
    50% { height: 50px; opacity: 0 }
    100% { height: 50px; opacity: 1 }
  }

  @keyframes disappear {
    0% { height: 50px; opacity: 1 }
    50% { height: 50px; opacity: 0 }
    100% { height: 0; opacity: 0 }
  }

  .done-label {
      position: absolute;
      width: 100%;
      height: 50px;
      border-radius: 8px;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .done-label p {
    color: white;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Source Sans Pro', sans-serif;
  }

  .done-label img {
    height: 24px;
    width: 24px;
    margin-right: 10px;
    margin-bottom: 0 !important;
  }

  .disappeared {
    display: none;
  }

  @keyframes expand {
    0% { width: 100%; opacity: 0 }
    50% { width: 100%; opacity: 1 }
  }

  @keyframes collapse {
    0% { width: 100%; opacity: 1 }
    100% { width: 100%; opacity: 0 }
  }

  /* medium */
  .medium .article-container {
    overflow-y: scroll;
    padding-top: 20px;
    justify-content: flex-start;
  }

  .medium .article-container::-webkit-scrollbar {
    display: none;
  }

  .medium.wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  .medium .head {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 16px;
    padding-right: 16px;
  }

  .medium .card {
    margin-bottom: 16px;
    margin-right: 16px !important;
  }

  .medium .card:first-child {
    margin-left: 16px;
  }

  .medium h1 {
    font-size: 34px;
    margin-bottom: 16px;
  }

  .medium .article-container::after {
    content: 'i';
    display: block;
    opacity: 0;
  }

  .main-newsletter a {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px !important;
    letter-spacing: 0.8px !important;
    width: calc(100% - 40px);
    align-self: center;
  }

  #dialog-box {
    width: calc(100% - 32px);
    height: 500px;
    margin-top: calc(-1 * (500px - 32px)/2);
    margin-left: calc(-1 * (100% - 32px)/2);
  }

  .newsletter {
    padding: 30px 16px;
  }

  .newsletter-image {
    height: 70px;
    width: 70px;
    align-self: center;
  }

  .newsletter label {
    font-size: 18px;
  }

  .main-newsletter a {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    letter-spacing: 0.9px;
    max-width: 700px;
  }

  #close {
    top: 16px;
    right: 16px;
  }

  .newsletter .terms {
    margin-top: 38px;
    margin-bottom: 8px;
  }

  .more-link {
    font-size: 16px;
    margin-top: 6px;
    margin-bottom: 24px;
  }

  .rights-container .p-24 {
    font-size: 15px;
  }

  .needs p:not([class]), .needs p:not([class]) a {
    font-size: 15px !important;
  }

  .item p:not([class]) {
  	font-size: 15px;
  }
}