@charset "utf-8";

/* CSS Document */
/*------------------------------------------------------
CSS Created:	10/06/2016
CSS Author:		Alessandro Avallone
/*------------------------------------------------------/*

/* ------------------------------------------ FONT */

@import url('https://fonts.googleapis.com/css?family=Oswald:400,300');
@import url('https://fonts.googleapis.com/css?family=Sacramento');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,700');

/* ------------------------------------------ GENERAL */

html, body {
	height:100%;
	padding:0;
	margin:0;
	font-family: 'Roboto', sans-serif;
	font-style:normal;
}

img {
	border:0;
}

.clear {
	clear:both;
}

.animated {
	/* */
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

.title {
	font-family: 'Oswald', sans-serif;	
}

.handwritten {
	font-family: 'Sacramento', cursive;
}

.wrapper {
	width:1200px;
	margin:0 auto;
}

.wrapper:after {
	content:"";
	display:table;
	clear:both;
}

.valign {
    display:inline-block;
    position:absolute;
	z-index:80;
    top:50%;
	/* */
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.bottom {
    display:inline-block;
    position:absolute;
	z-index:80;
    bottom:5%;
}


.control {
	text-align:center;
}

.control:after {
	content:"";
	display:table;
	clear:both;
}

.control .step {
	display:inline-block;
	width:20px;
	height:20px;
	margin:0 5px;
	border-radius:50px;
	background-color:#FFF;
	position:relative;
	cursor:pointer;
	/* */
    -webkit-transition:all 0.25s ease-out;
    -moz-transition:all 0.25s ease-out;
    -o-transition:all 0.25s ease-out;
    -ms-transition:all 0.25s ease-out;
    transition:all 0.25s ease-out;
}

.control .step:after {
	content:"";
	width:20px;
	height:20px;
	position:absolute;
	left:0px;
	top:0px;
	background-color:rgba(255,255,255,0);
	border-radius:20px;
	border-color:#FFF;
	border-style:solid;
	border-width:1px;
	box-sizing:border-box;
}

.control .step.current {
    -ms-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
}

.control .step.current:after {
    -ms-transform:scale(2);
    -moz-transform:scale(2);
    -webkit-transform:scale(2);
    transform:scale(2);
}

/* ------------------------------------------ INTRO */

#intro {
	width:100vw;	
	height:100vh;
	overflow:hidden;
}

#intro .claim {
	width:50%;
	position:fixed;
	z-index:1000;
	left:25%;
	right:25%;
	text-align:center;
	top:5vh;
	color:#FFFFFF;
}

#intro .claim .string {
	font-size:4em;
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	line-height:1em;	
	}

#intro .claim .number {
	border-radius:1000px;
	background-color:rgba(0,0,0,0.2);
	width:100px;
	height:100px;
	margin:30px auto;
	position:relative;
}

#intro .claim .number:before {
	content:"2";
	text-align:center;
	position:absolute;
	left:0px;
	top:0.2em;
	z-index:1000;
	color:rgba(255,255,255,1.00);
	font-family: 'Sacramento', cursive;
	font-size:4em;
	width:100%;
}

#intro .claim .number:after {
	content:"";
	display:table;
	clear:both;
}

#intro .claim .number .semicircle {
	width:                 50px;
	height:                100px;
	opacity:1;
	} 

#intro .claim .number .semicircle:nth-of-type(odd) {
	float:left;
	border-radius:         100px 0 0 100px;
	-moz-border-radius:    100px 0 0 100px;
	-webkit-border-radius: 100px 0 0 100px;
	}


#intro .claim .number .semicircle:nth-of-type(odd).hide {
	opacity:0;
	/* */
    -ms-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
	}

#intro .claim .number .semicircle:nth-of-type(even) {
	float:right;
	border-radius:         0 100px 100px 0;
	-moz-border-radius:    0 100px 100px 0;
	-webkit-border-radius: 0 100px 100px 0;
	}
	
#intro .claim .number .semicircle:nth-of-type(even).hide {
	opacity:0;
	/* */
    -ms-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -webkit-transform: translateX(30px);
    transform: translateX(30px);	
	}	

#intro .split {
	width:50vw;
	height:100vh;
	background-size:cover;
	background-position:center;
	position:relative;
}

#intro .overlay {
	content:"";
	position:absolute;
	left:0px;
	top:0px;
	z-index:100;
	width:100%;
	height:100vh;
}

#intro .red.plain,
#intro .brown.plain {
	opacity:1;
}

#intro .red.transparent,
#intro .brown.transparent {
	opacity:0;
}

#intro .logo {
	width:300px;
	height:300px;
	position:absolute;
	z-index:1000;
	left:calc((100% - 300px) / 2);
	top:calc((100% - 300px) / 2);
}

#intro .logo img {
	width:100%;
}

#intro .split:nth-of-type(odd) .logo_hide {
	opacity:0;
	/* */
    -ms-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);	

}

#intro .split:nth-of-type(even) .logo_hide {
	opacity:0;
	/* */
    -ms-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -webkit-transform: translateY(30px);
    transform: translateY(30px);	

}

#intro .red {
	background-color:#89252a;
	opacity:0.6;	
}

#intro .brown {
	background-color:#ac680f;
	opacity:0.6;	
}


#intro .split:nth-of-type(odd) {
	float:left;
}

#intro .split:nth-of-type(even) {
	float:right;
}

#intro .split--new {
	background-image:url(../images/intro/cover_VER_new.jpg);
}

#intro .split--old {
	background-image:url(../images/intro/cover_VER_old.jpg);
}

#intro .splits:after {
	content:"";
	display:table;
	clear:both;
}

#intro .split .new_opening {
	width:100%;
	padding:0.25em;
	box-sizing:border-box;
	line-height:1em;
	font-size:4em;
	color:#FFFFFF;
	text-align:center;
	font-family: 'Oswald', sans-serif;
	background-color:rgba(0,0,0,0.3);
	position:absolute;
	z-index:1000;
    bottom: 200px;
}


#intro .split .new_opening.hide {
	opacity:0;
}

/* ------------------------------------------ HEADER */

#header {
	width:100%;
	height:80px;
	background-color:#FFF;
	box-sizing:border-box;
	position:fixed;
	z-index:100;
	top:0px;
	left:0px;
	font-size:24px;
	/* */
    box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.20);	
}

#header:after {
  content: "";
  display: table;
  clear: both;
}

#header #logo {
	width:300px;
	float:left;
}

#header #logo img {
	width:100%;
}

#header #navbar {
	float:right;
}

#header #navbar .navbar--mobile {
	display:none;
}

#header #navbar .navbar--desktop {
	display:block;
}

#header #navbar:after {
  content: "";
  display: table;
  clear: both;
}

#header #navbar ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

#header #navbar ul li {
	float:right;
	margin-left:40px;
	font-size:1em;
	padding:1em 10px;
}

#header #navbar ul li a {
	color:#89252a;
	text-decoration:none;
}

#header #navbar ul .current {
	background-color:#89252a;	
}

#header #navbar ul .current a {
	color:#FFF;
}

#header .hamburger {
	display:none;
}

/* ------------------------------------------ CONTENT */

#content {
	width:100%;
	background-size:cover;
}

#content a {
	font-weight:700;
	color:#fff;
}

#content .background {
	position:fixed;
	left:0px;
	top:80px;
	bottom:0px;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center bottom;
}

#content .background_plain {
	z-index:70;
	opacity:1;
}

#content .background_blurred {
	z-index:80;
	opacity:0;
}

#content .section_header {
	position:fixed;
	z-index:90;
	left:0px;
	top:80px;
	width:100%;
	height:240px;
	text-align:center;
	color:#FFF;
	background-color:rgba(137,37,42,0.7);
	font-size:32px;
	padding:30px 0;
	box-sizing:border-box;
}

#content .section_header.hide {
    -ms-transform: translateY(-290px);
    -moz-transform: translateY(-290px);
    -webkit-transform: translateY(-290px);
    transform: translateY(-290px);
}

#content .section_header .payoff {
	font-size:1em;
}


#content .section_header .payoff payoff--full {
	display:block;
}

#content .section_header .payoff  .payoff--short {
	display:none;
}

#content .section_header .title {
	width:800px;
	margin:0 auto;
	background-image:url(../images/layout/title_swirl.png);
	background-repeat:no-repeat;
	background-position:center;
	font-size:1.5em;
}

#content .section_content {
	padding-top:120vh;
	z-index:90;
	position:relative;
}

#content section {
	width:100%;
}

/* ------------------------------------------ BLACK / WHITE ROW */

#content .white_row {
	background-color:rgba(255,255,255,0.65);
}

#content .black_row {
	background-color:rgba(0,0,0,0.65);
}

#content .box {
	width:50%;
	font-size:18px;
}

#content .box:after {
	content:"";
	display:table;
	clear:both;
}

#content .box.text_box {
	text-align:center;
	font-size:1em;
}

#content .box.text_box p {
	padding:0 10%;
	box-sizing:border-box;
}

#content .box.picture_box {
	position:relative;
}

#content .box.picture_box img {
	width:100%;
}

#content .box.picture_box .picture_box_overlay {
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	z-index:10;
	background-size:cover;
}

#content .box.text_box .subtitle {
	font-size:3em;
	line-height:1.5em;
}

#content.content_contatti .black_row .box.text_box .subtitle {
	font-size:2em;
	line-height:1.2em;
}

#content.content_contatti .black_row .box.text_box .subtitle a {
	text-decoration: none;
}

#content .white_row .picture_box {
	float:left;
}

#content .white_row .text_box {
	float:right;
	color:#000;
}

#content .white_row .picture_box .picture_box_overlay {
	background-image:url(../images/layout/box_pic_overlay_white.png);
}

#content .black_row .picture_box {
	float:right;
}

#content .black_row .text_box {
	float:left;
	color:#FFF;
}

#content .black_row .picture_box .picture_box_overlay {
	background-image:url(../images/layout/box_pic_overlay_black.png);
}


#content .box.picture_box_square {
	position:relative;
	float:left;
	width:33.33%;
}

#content .box.picture_box_square img {
	width:100%;
}

#content .box.picture_box_square:before {
	width:100%;
	height:100%;
	content:"";
	position:absolute;
	left:0px;
	top:0px;
	z-index:100;
	background-image:url(../images/layout/box_pic_overlay_square.png);
	background-position:center;
	background-size:contain;
}


#content .box.picture_box_ellipse {
	position:relative;
	float:left;
	width:calc(50% - 1em);
	font-size:40px;
	margin:0.5em;	
}

#content .box.picture_box_ellipse p {
	position:absolute;
	z-index:100;
	font-size:1em;
	line-height:1em;
	margin:0px;
}

#content .box.picture_box_ellipse--black p {
	color:#FFF;
	right:20px;
	top:20px;
}


#content .box.picture_box_ellipse--white p {
	color:#000;
	left:20px;
	bottom:20px;
}


#content .box.picture_box_ellipse img {
	width:100%;
}

#content .box.picture_box_ellipse:before {
	width:100%;
	height:100%;
	content:"";
	position:absolute;
	left:0px;
	top:0px;
	z-index:100;
	background-position:center;
	background-size:contain;
}

#content .box.picture_box_ellipse--black:before {
	background-image:url(../images/layout/box_pic_ellipse_black.png);
}

#content .box.picture_box_ellipse--white:before {
	background-image:url(../images/layout/box_pic_ellipse_white.png);
}

#content .slide_box {
	float:right;
	height:400px;
	overflow:hidden;
}

#content .box.slide_box .slide {
	height:2400px;
}

#content .box.slide_box .slide:after {
	content:"";
	display:table;
	clear:both;
}

#content .box.slide_box .slide img {
	width:100%;
}

#content .box .counter {
	font-size:4em;
	padding:2em;
	background-image:url(../images/layout/separator.png);
	background-position:center;
	background-repeat:no-repeat;
}

#content .button {
	width:100px;
	margin:1em auto;
}

#content .button img {
	width:100%;
}

/* ------------------------------------------ HERO */

#content .hero {
	height:480px;
	text-align:center;
	color:#FFF;
	background-position:center;
	background-size:cover;
	font-size:48px;
	position:relative;
}

#content .hero:after {
	width:100%;
	height:100%;
	content:"";
	position:absolute;
	z-index:10;
	left:0px;
	top:0px;
	background-color:rgba(0,0,0,0.35);
}

#content .hero .wrapper {
	height:100%;
	position:relative;
}

#content .hero .hero_text {
	width:98%;
	z-index:20;
	margin: 0 auto;
	left: 0;
	right: 0;	
}

#content .hero .hero_text .title {
	line-height:1em;
	font-size:1.25em;	
}

#content .hero .separator {
	width:100%;
	height:40px;
	background-image:url(../images/layout/separator.png);
	background-position:center;
	background-repeat:no-repeat;
	margin:10px 0;
}

#content .hero .hero_text .handwritten {
	line-height:1em;
	font-size:1.25em;	
}

#content.content_ambiente .hero {
	background-image:url(../images/contents/ambiente_hero.jpg);
}

#content.content_ambiente .hero_santo {
	background-image:url(../images/contents/sangennaro_hero.jpg);
}


#content.content_staff .hero {
	background-image:url(../images/contents/staff_hero.jpg);
}

#content.content_pizze .hero {
	background-image:url(../images/contents/pizze_hero.jpg);
}

#content.content_piatti .hero {
	background-image:url(../images/contents/piatti_hero.jpg);
}

#content.content_filosofia .hero {
	background-image:url(../images/contents/filosofia_hero.jpg);
}

#content.content_filosofia .frame {
	background-image:url(../images/contents/filosofia_frame.jpg);
}

#content.content_contatti .hero {
	background-image:url(../images/contents/contatti_hero.jpg);
}

#content.content_contatti .hero {
	background-image:url(../images/contents/contatti_hero.jpg);
}

/* ------------------------------------------ GALLERY */

#content .gallery {
	width:100%;
	background-color:#FFF;
	text-align:center;
}

#content .gallery:nth-of-type(odd) .thumb_box {
	padding:1em;
	box-sizing:border-box;
}

#content .gallery:nth-of-type(odd) .thumb_box,
#content .gallery:nth-of-type(even) .text_box {
	float:left;
}

#content .gallery:nth-of-type(even) .thumb_box,
#content .gallery:nth-of-type(odd) .text_box {
	float:right;
}

#content .gallery img {
	width:40%;
	display:inline-block;
}

/* ------------------------------------------ QUANDOO */

#content .quandoo {
	background-color: #89252a;
	padding: 40px 0;
}

#content .quandoo .title {
	text-align: center;
	color: white;
    line-height: 1em;
    font-size: 2em;	
}

#content .quandoo .quandoo-button {
    margin: 40px auto 0;
    text-align: center;
    display: block;
    width: 200px;
    border: 1px solid white;
    font-size: 16px;
    padding: 20px;
    border-radius: 10px;
}

/* ------------------------------------------ FOOTER */

#footer {
	width:100%;
	box-sizing:border-box;
	padding:20px;
	text-align:center;
	font-size:18px;
	color:#FFF;
    background-color: #89252a;
    z-index: 90;
    position: relative;	
}

#footer .wrapper {
	margin:0 auto;
}

#footer .logo {
	width:320px;
	padding:1em 0;
	margin:0 auto;
}

#footer .logo img {
	width:100%;
}


#footer .social {
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 10px 0;
	text-align:center;
}

#footer .social:after {
	content:"";
	display:table;
	clear:both;
}

#footer .social--single {
	display:inline-block;
	
}

#footer .social--single img {
	width:75px;
}


#footer .social .column {
	width:38%;
	margin:1em 6%;
}

#footer .social .column:nth-of-type(odd) {
	float:left;	
}

#footer .social .column:nth-of-type(even) {
	float:right;	
}

#footer .social .column:nth-of-type(odd) .single_post:nth-of-type(even) {
	display:none;
}

#footer .social .column:nth-of-type(even) .single_post:nth-of-type(odd) {
	display:none;
}

#footer .social .single_post p {
	margin:0.5em 0;
}

#footer .social .single_post {
	margin-bottom: 3em;
}

#footer .social .single_post .date {
	width:100%;
	background-image:url(../images/layout/separator.png);
	background-position:center;
	background-repeat:no-repeat;
	text-align:center;
	font-size:1.2em;
}

#footer .social .single_post .action {
	font-size:3em;
	line-height:1em;
}

#footer .social .single_post .text {
	font-size:0.8em;
}

#footer .social .single_post .image img {
	width:100%;
	padding:0.5em;
	box-sizing:border-box;
	border:1px solid rgba(255,255,255,0.5);
}

#footer .title {
	font-size:1.4em;
}

#footer .credits {
	font-size:0.8em;
}

#footer .credits a {
	text-decoration:none;
	color:#FFFFFF;
}


/*---------------------------------------------------------------------- */
/*---------------------------------------------* MEDIA QUERY [ DESKTOP ] */
/*---------------------------------------------------------------------- */

@media screen and (min-width:1600px) {

html, body {
	font-size:16px;
}

.wrapper {
	width:1200px;
	margin:0 auto;
}

}

/*---------------------------------------------------------------------- */
/*---------------------------------------------* MEDIA QUERY [ LAPTOP ]  */
/*---------------------------------------------------------------------- */

@media screen and (min-width:1024px) and (max-width:1599px) {

html, body {
	font-size:14px;
}

.wrapper {
	width:960px;
	margin:0 auto;
}

#header {
	font-size:18px;
}

#header #logo {
	width:260px;
}

#header #navbar ul li {
    padding: 1.5em 5px;
}

#content .hero {
    font-size:36px;
}

}

/*---------------------------------------------------------------------- */
/*---------------------------------* MEDIA QUERY [ SMARTPHONE + TABLET ]  */
/*---------------------------------------------------------------------- */

@media screen and (min-width:320px) and (max-width:1023px) {
	
#header #navbar {
	float:none;
	margin-top:80px;
	height:0px;
	overflow:hidden;
}	

#header #navbar.visible {
	height:100%;
}

#header #navbar .navbar--desktop {
	display:none;
}

#header #navbar .navbar--mobile {
	display:block;	
}

#header #navbar ul li {
	width:100%;
	display:block;
	text-align:center;
	opacity:0;
	visibility:hidden;
	float:none;
	background-color:#FFF;
	margin:0;
	/* */
    -ms-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20x);
}

#header #navbar ul li.visible {
	opacity:1;
	visibility:visible;
	/* */
    -ms-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);	
}

#header #navbar ul li:nth-of-type(2){
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

#header #navbar ul li:nth-of-type(3) {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

#header #navbar ul li:nth-of-type(4) {
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

#header #navbar ul li:nth-of-type(5) {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

#header #navbar ul li:nth-of-type(6) {
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

#content .section_header .title {
    width:98%;
	margin:0 auto;
}

}

/*---------------------------------------------------------------------- */
/*---------------------------------------------* MEDIA QUERY [ TABLET ]  */
/*---------------------------------------------------------------------- */

@media screen and (min-width:768px) and (max-width:1023px) {

#intro video {
	display:none;
}

html, body {
	font-size:14px;
}

.wrapper {
	width:100%;
	margin:0 auto;
}

#header {
	font-size:18px;
}

#header #logo.valign {
	top:2em;
}

#header #logo {
	width:300px;
	left:1em;
}

#header .hamburger {
	display:block;
	top:2em;
	right:1em;
}

#header #navbar ul li {
	padding:2em 0;
}

#content .section_header {
	font-size:32px;
}

#content .hero {
    font-size:32px;
}



}



/*---------------------------------------------------------------------- */
/*------------------------------------------* MEDIA QUERY [ SMARTPHONE ] */
/*---------------------------------------------------------------------- */

@media screen and (min-width:320px) and (max-width:767px) {
	
html, body {
	font-size:14px;
}	
	
.wrapper {
	width:100%;
	margin:0 auto;
}

/* ------------------------------------------ INTRO */

#intro .split {
	width:100vw;
	height:50vh;
}

#intro .claim {
	display:none;
}

#intro .split:nth-of-type(odd),
#intro .split:nth-of-type(even) {
	float:none;
}

#intro .logo {
	width:200px;
	height:200px;
	left:calc((100% - 200px) / 2);
	top:calc((100% - 200px) / 2);
}

#intro .split .new_opening {
	font-size:2.4em;
}

#intro .split--new {
	background-image:url(../images/intro/cover_HOR_new.jpg);
}

#intro .split--old {
	background-image:url(../images/intro/cover_HOR_old.jpg);
}

#intro .red {
	opacity:0.6;	
}

#intro .brown {
	opacity:0.4;	
}

#intro .split .new_opening {
    right: 0px;
    padding-left: 0px;
    top:inherit;
	bottom:0px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* ------------------------------------------ HEADER */

#header #logo {
	width:220px;
	left:1em;
}

#header .hamburger {
	display:block;
	top:1.5em;
	right:0.5em;
}

#header #navbar ul li {
	padding:1em 0;
}

/* ------------------------------------------ CONTENT */

#content .section_header .payoff {
    font-size: 1.25em;
	line-height:1em;
}

#content .section_header .payoff .payoff--short {
	display:block;
}

#content .section_header .payoff .payoff--full {
	display:none;
}

#content .section_header {
	font-size:24px;
}

#content .hero {
    font-size:24px;
}

#content .section_header .title {
	background-size:150% auto;
}

#content .white_row .picture_box {
    float:none;
}

#content .box {
    width: 100%;
    font-size: 16px;
}

#content .box.picture_box_ellipse {
    float:none;
    width: calc(100% - 1em);
    font-size: 40px;
    margin: 0.5em;
}

#content .hero .hero_text .handwritten {
	padding:0.5em;
    line-height: 1em;
    font-size: 1.5em;
}

#content .slide_box {
    float:none;
    height:auto;
}

#content .box.slide_box .slide {
    height:auto;
}


#content .box .counter,
#content .box .control {
	display:none;
	
}

#content .hero .separator {
    background-size: 100% auto;
}

#content .swipebox {
   pointer-events: none;
   cursor: default;
}
/* ------------------------------------------ FOOTER */

#footer {
	padding:0px;
}

#footer .wrapper {
    width: 100%;
    margin: 0 auto;
}

#footer .logo {
    width: 280px;
}

#footer .social {
    background-size: 100% auto;
}

#footer .social--single img {
	width:50px;
}

#footer .social .column {
	width:100%;
	margin:0;
	padding:1em;
	box-sizing:border-box;
}

#footer .social .column:nth-of-type(odd),
#footer .social .column:nth-of-type(even) {
	float:none;
}

#footer .social .column:nth-of-type(even) {
	display:none;
}

#footer .social .column:nth-of-type(odd) .single_post:nth-of-type(even) {
	display:block;
}

#footer .social .column:nth-of-type(even) .single_post:nth-of-type(odd) {
	display:block;
}

#footer .social .single_post .date {
    background-size: 100% auto;
    font-size: 0.8em;
}

#footer .social .single_post .action {
	font-size:2em;
}

#footer .social .single_post .text {
    font-size: 0.8em;
}

}