/*
Theme Name: terza-stanza Child
Author: Wooodoo Studio
Author URI: http://www.woodooostudio.com
Version: 2
Text Domain: terza-stanza
Template: terza-stanza
*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: 'Abel', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
font
h5,
h6 {
	clear: both;
}

h2 {
	text-transform: uppercase!important;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: 'Abel', sans-serif;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: 'Abel', sans-serif;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*-- Hack to have more control on box sizes--*/
html {
	box-sizing: border-box
}

*,
:after,
:before {
	box-sizing: inherit
}

/*-- END size hack--*/

p {
    font-weight: 300;
}

body {
    margin: 0;
	padding: 0;
}

@keyframes fadein {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.accordion {
	background-color: white;
	color: #000;
	position: relative;
	display: flex;
	height: 100vh;
	overflow: hidden;
}

/* CHANGE THE TITLE OF THE SECTION TO SHOW IT VERTICAL WITH THE TABS */
.accordion__title {
	position: absolute;
	font-family: 'Abel', sans-serif;
	font-weight: 500;
	color: black;
	font-size: 1.6em;
	white-space: nowrap;
	z-index: 2;
	transform: rotate(90deg);
	text-transform: uppercase;
	line-height: 1;
	transform-origin: left;
	left: 45%;
	right: 0;
}

.accordion__radio {
	display: none;
}

/*General style for all the vertical bars*/
.accordion__section {
	background-color: inherit;
	cursor: pointer;
	font-weight: 600;
	position: relative;
	width: 100px;
	transition: width 195ms ease-out;
	padding: 20px 24px 0 20px;
	box-shadow: inset 9px 0px 10px -10px rgba(0, 0, 0, 5);
}

/* .accordion__section:hover{
	width: 120px;
} */

/*vertical title bar when hover, this set the pre-animation*/
.accordion__section:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 110%;
	top: -5px;
	left: 0;
	transform: translateY(110%) skew(0, 6deg);
	transition: transform .2s ease;
}

/*this activate the animation for the vertical bar when hover*/
.accordion__section:hover:after {
	transform: translateY(0) skew(0, 6deg)
}

.accordion__content {
	display: block;
	width: 100%;
	/* max-width: 800px; */
	height: 100%;
	font-size: 18px;
	line-height: 1.4;
	opacity: 0;
}

/* Content of the tab */
#title1:checked~.accordion__section[for=title1],
#title2:checked~.accordion__section[for=title2],
#title3:checked~.accordion__section[for=title3],
#title4:checked~.accordion__section[for=title4],
#title5:checked~.accordion__section[for=title5],
#title6:checked~.accordion__section[for=title6],
#title7:checked~.accordion__section[for=title7] {
	height: auto;
	opacity: 0;
	animation-name: fadein;
	animation-delay: .2s;
	animation-duration: .4s;
	animation-fill-mode: forwards;
	cursor: initial;
	width: 100%;
	padding: 2em 8em 6em;
	overflow: auto;
}

/* Hide the vertical title when open the content */
#title1:checked~.accordion__section[for=title1]:after,
#title2:checked~.accordion__section[for=title2]:after,
#title3:checked~.accordion__section[for=title3]:after,
#title4:checked~.accordion__section[for=title4]:after,
#title5:checked~.accordion__section[for=title5]:after,
#title6:checked~.accordion__section[for=title6]:after,
#title7:checked~.accordion__section[for=title7]:after {
	display: none;
}

/* DISPLAY THE TITLE OF THE SECTION NORMAL WITH NOT CHANGES */
#title1:checked~.accordion__section[for=title1] .accordion__title,
#title2:checked~.accordion__section[for=title2] .accordion__title,
#title3:checked~.accordion__section[for=title3] .accordion__title,
#title4:checked~.accordion__section[for=title4] .accordion__title,
#title5:checked~.accordion__section[for=title5] .accordion__title,
#title6:checked~.accordion__section[for=title6] .accordion__title,
#title7:checked~.accordion__section[for=title7] .accordion__title {
	transform: none;
	text-transform: none;
	margin: 0;
	display: table;
	position: relative;
	left: 0;
	font-size: 2.4em;
}

/* DISPLAY THE CONTENT OF THE SECTION WHEN THE TAB IS CLICKED ON */
#title1:checked~.accordion__section[for=title1] .accordion__content,
#title2:checked~.accordion__section[for=title2] .accordion__content,
#title3:checked~.accordion__section[for=title3] .accordion__content,
#title4:checked~.accordion__section[for=title4] .accordion__content,
#title5:checked~.accordion__section[for=title5] .accordion__content,
#title6:checked~.accordion__section[for=title6] .accordion__content,
#title7:checked~.accordion__section[for=title7] .accordion__content {
	display: block;
	opacity: 1
}

/* LINE UNDER TITLE */
#title1:checked~.accordion__section[for=title1] .accordion__title:after,
#title2:checked~.accordion__section[for=title2] .accordion__title:after,
#title3:checked~.accordion__section[for=title3] .accordion__title:after,
#title4:checked~.accordion__section[for=title4] .accordion__title:after,
#title5:checked~.accordion__section[for=title5] .accordion__title:after,
#title6:checked~.accordion__section[for=title6] .accordion__title:after,
#title7:checked~.accordion__section[for=title7] .accordion__title:after {
	content: '';
	display: block;
	height: 2px;
	width: 35%;
	margin-top: .45em;
	margin-bottom: .35em;
}

/*----- SECTION 1 -----*/

/*----Background color of the section----*/
#title1:checked~.accordion__section[for=title1] {
	background-color: black;
	color: white;
}

/*----Background color of tab----*/
.accordion__section:nth-of-type(1) {
	background-color: black;
	position: relative;
}

/*----Background color of the tab when hover----*/
.accordion__section:nth-of-type(1):after {
	background-color: #00000022;
}

/*----color of the line under the title----*/
#title1:checked~.accordion__section[for=title1] .accordion__title:after {
	background-color: black;
}

/* THIS IS ONLY FOR THE FIRST SECTION, TO SHOW THE IMAGE AND HIDE THE TITLE */
.accordion__image {
	display: none;
}

#title1:checked~.accordion__section[for=title1] .accordion__image {
	display: inline-block;
}

#title1:checked~.accordion__section[for=title1] .accordion__title {
	display: none;
}

#title1~.accordion__section[for=title1] .accordion__title {
	color: white;
}

/*-----------END SECTION 1---------*/


/*----- SECTION 2 -----*/
#title2:checked~.accordion__section[for=title2] {
	background-color: inherit;
}

.accordion__section:nth-of-type(2) {
	background-color: inherit;
	position: relative
}

.accordion__section:nth-of-type(2):after {
	background-color: #00000022;
}

#title2:checked~.accordion__section[for=title2] .accordion__title:after {
	background-color: Grey
}

/*-----------END SECTION 2---------*/


/*----- SECTION 3 -----*/
#title3:checked~.accordion__section[for=title3] {
	background-color: inherit;
}

.accordion__section:nth-of-type(3) {
	background-color: inherit;
	position: relative
}

.accordion__section:nth-of-type(3):after {
	background-color: #00000022;
}

#title3:checked~.accordion__section[for=title3] .accordion__title:after {
	background-color: grey
}

/*-----------END SECTION 3---------*/


/*----- SECTION 4 -----*/
#title4:checked~.accordion__section[for=title4] {
	background-color: inherit;
}

.accordion__section:nth-of-type(4) {
	background-color: inherit;
	position: relative
}

.accordion__section:nth-of-type(4):after {
	background-color: #00000022;
}

#title4:checked~.accordion__section[for=title4] .accordion__title:after {
	background-color: grey
}

/*-----------END SECTION 1---------*/

/*----- SECTION 5 -----*/
#title5:checked~.accordion__section[for=title5] {
	background-color: inherit;
}

.accordion__section:nth-of-type(5) {
	background-color: inherit;
	position: relative
}

.accordion__section:nth-of-type(5):after {
	background-color: #00000022;
}

#title5:checked~.accordion__section[for=title5] .accordion__title:after {
	background-color: grey
}

/*-----------END SECTION 5---------*/

/*----- SECTION 6 -----*/
#title6:checked~.accordion__section[for=title6] {
	background-color: inherit;
}

.accordion__section:nth-of-type(6) {
	background-color: inherit;
	position: relative
}

.accordion__section:nth-of-type(6):after {
	background-color: #00000022;
}

#title6:checked~.accordion__section[for=title6] .accordion__title:after {
	background-color: grey
}

/*-----------END SECTION 6---------*/

/*----- SECTION 7 -----*/
#title7:checked~.accordion__section[for=title7] {
	background-color: black;
}

.accordion__section:nth-of-type(7) {
	background-color: black;
	color: white;
	position: relative
}

.accordion__section:nth-of-type(7):after {
	background-color: #00000022;
}

#title7:checked~.accordion__section[for=title7] .accordion__title:after {
	background-color: white
}

#title7~.accordion__section[for=title7] .accordion__title {
	color: white;
}

/*-----------END SECTION 7---------*/

@media screen and (max-width: 1280px) {
	.accordion__section {
		width: 40px;
	}
}


@media screen and (max-width: 800px) {
	.accordion {
		display: block;
		overflow: auto;
	}

	.accordion__title {
		position: relative;
		color: black;
		text-transform: uppercase;
		margin-top: 10px;
		margin-bottom: 10px;
		white-space: inherit;
		font-size: 1.6em;
		z-index: 2;
		position: relative;
		left: unset;
		transform: unset;
		right: unset;
		transform-origin: unset;
	}

	#title1:checked~.accordion__section[for=title1] {
		background-color: black;
	}

	.accordion__section {
		background-color: inherit;
		width: 100%;
		transition: height 0.2s ease-out;
		cursor: pointer;
		padding: 0 20px;
		margin: 0;
		font-weight: normal;
		position: relative;
		display: inline-block;
		height: calc(100vh / 7);
		box-shadow: unset;
		border-top: 1px black solid;
	}

	.accordion__content {
		display: none;
		font-size: 20px;
		line-height: 1.4;
		overflow: hidden;
	}

	.accordion__section:after {
		display: none;
	}

	#title1:checked~.accordion__section[for=title1],
	#title2:checked~.accordion__section[for=title2],
	#title3:checked~.accordion__section[for=title3],
	#title4:checked~.accordion__section[for=title4],
	#title5:checked~.accordion__section[for=title5],
	#title6:checked~.accordion__section[for=title6],
	#title7:checked~.accordion__section[for=title7] {
		height: auto;
		opacity: 0;
		animation-name: fadein;
		animation-delay: .2s;
		animation-duration: .4s;
		animation-fill-mode: forwards;
		cursor: initial;
		width: 100%;
		padding: 50px 5%;
		overflow: auto;
	}
}


/* FIXES POST THEME*/
.post,
.page {
	margin: 0 0 0;
}

/* Gallery Masonry plugin*/
.gallery_row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.gallery_column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  padding: 0 4px;
}

.gallery_column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .gallery_column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}