@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxIIzc.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
}

.accordion-group li:nth-child(3) .accordion-overlay {
  background-color: #EC5149;
  opacity: 0.8;
  
}
.accordion-group li:nth-child(3).out .accordion-overlay {
  background-color: #EC5149;
  opacity: 0;
}
.accordion-group li:nth-child(2) .accordion-overlay {
  background-color: #EC5149;
  opacity: 0.8;
}
.accordion-group li:nth-child(2).out .accordion-overlay {
  background-color: #EC5149;
  opacity: 0;
}
.accordion-group li:nth-child(1) .accordion-overlay {
  background-color: #EC5149;
  opacity: 0.8;
}
.accordion-group li:nth-child(1).out .accordion-overlay {
  background-color: #EC5149;
  opacity: 0;
}
a {
  color: inherit;
}
a.active,
a:active,
a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}
.red {
  color: #FF3A3A;
}
.orange {
  color: #E06014;
}
.blue {
  color: #5AAED6;
}
.beige {
  color: #D6CCAD;
}
body {
  font-family: "Roboto", sans-serif;
  background: #FFF;
}
.mg {
  margin: 7rem 0 4rem 0;
}
.big {
  color: #333;
  font-size: 4.5rem;
  font-weight: 700;
  margin: 1rem;
}
.head {
  color: #FF3A3A;
  font-size: 4.8rem;
  font-weight: 200;
  margin: 1rem;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.site-outer {
  overflow: hidden;
}
.site-outer .navbar {
  background-color: #FFF;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.site-outer .navbar.slide-right {
  -webkit-transform: translate3d(250px, 0, 0);
  -moz-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}
.site-outer .site-inner {
  position: relative;
  margin: 0;
  padding: 0;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.site-outer .site-inner.slide-right {
  -webkit-transform: translate3d(250px, 0, 0);
  -moz-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}

.accordion-group {
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: 100%;
  height: 450px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
}
.accordion-group li {
  cursor: pointer;
  position: relative;
  display: block;
  overflow: hidden;
  float: left;
  margin: 0;
  padding: 1.6em;
  list-style: none;
  width: 25%;
  height: inherit;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.accordion-group li h3 {
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
  position: relative;
  color: #FFF;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  padding: 0;
  font-weight: 300;
  margin: 3.5rem 0 0;
}
.accordion-group li .accordion-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.accordion-group li section {
  display: table;
  width: 100%;
  max-width:500px;
  height: auto;
  margin: 0;
  min-height: 100%;
}
.accordion-group li section.big-section {
  width: 100%;
}
.accordion-group li section article {
  display: table-cell;
  vertical-align: middle;
  padding: 4rem;
  position: relative;
  right: -200%;
  -webkit-transition: opacity 550ms ease-in-out;
  -moz-transition: opacity 550ms ease-in-out;
  transition: opacity 550ms ease-in-out;
  opacity:0;
}
.accordion-group li section article p {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 1.6rem;
  color: #333;
  font-size: 1.6rem;
  letter-spacing: 0.15rem;
  line-height: 18px;
}
.accordion-group li section article p:before,
.accordion-group li section article p:after {
  content: "";
  display: block;
  height: 1px;
}
.accordion-group li.out {
  width: 50%;
}
.accordion-group li.out section article {
  right: 0;
  opacity:1;
}
.accordion-group li.out h3{
	-webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    margin: 0px;
}

/*
.evoluzione {margin: 1.5rem 0!important;}
.cerca {margin: 4rem 0!important;}
*/

article a {text-transform: uppercase}



/*
@media only screen and (min-width: 1099px) {
	.accordion-group li h3{
		margin: 6rem 0 0;
	}
	.accordion-group li.out h3{
		
	}
}
@media only screen and (min-width: 1300px) {
	
	
	.accordion-group li h3{
		margin: 10rem 0 0;
	}
	
	.accordion-group li.out h3{
		margin: 0px!important;
	}
}
@media only screen and (min-width: 1655px) {
	
	
	.accordion-group li h3{
		margin: 12rem 0 0;
		padding: 40px;
	}
	
	.accordion-group li.out h3{
		margin: 0px!important;
	}
	
}
@media only screen and (min-width: 2225px) {
	
	
	.accordion-group li h3{
		margin: 12rem 0 0;
		padding: 70px;
	}
	
	.accordion-group li.out h3{
		margin: 0px!important;
		padding: 0;
	}
	
}
@media only screen and (min-width: 2750px) {
	
	
	.accordion-group li h3{
		margin: 15rem 0 0;
		padding: 70px;
	}
	
	.accordion-group li.out h3{
		margin: 0px!important;
		padding: 0;
	}
	
}
@media only screen and (min-width: 3000px) {
	
	
	.accordion-group li h3{
		margin: 17rem 0 0;
		padding: 75px;
	}
	
	.accordion-group li.out h3{
		margin: 0px!important;
		padding: 0;
	}
	
}
@media only screen and (min-width: 3300px) {
	
	
	.accordion-group li h3{
		margin: 17rem 0 0;
		padding: 95px;
	}
	
	.accordion-group li.out h3{
		margin: 0px!important;
		padding: 0;
	}
	
}
@media only screen and (min-width: 3600px) {
	
	
	.accordion-group li h3{
		margin: 21rem 0 0;
		padding: 0px 250px 10px 250px;
	}
	
	.accordion-group li.out h3{
		margin: 0px!important;
		padding: 0;
	}
	
}
@media only screen and (min-width: 3700px) {
	
	
	.accordion-group li h3{
		margin: 21rem 0 0;
		padding: 0px 600px 10px 400px;
	}
	
	.accordion-group li.out h3{
		margin: 0px!important;
		padding: 0;
	}
	
}
@media only screen and (min-width: 3750px) {
	
	
	.accordion-group li h3{
		margin: 27rem 0 0;
		padding: 0px 1300px 10px 400px;
	}
	
	.accordion-group li.out h3{
		margin: 0px!important;
		padding: 0;
	}
	
}
@media (max-width: 767px) {
  .accordion-group {
    height: 360px;
    float: left;
  }

  
  .accordion-group li h3 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    padding: 0;
    margin: 3rem 0;
    font-size: 22px;
  }
}
*/

@media (min-width: 1024px) {
	.accordion-group li h3{
		margin: 70% -40% 0;
	}
}

@media (min-width: 1100px) {
	.accordion-group li h3{
		margin: 50% -20% 0;
	}
}

@media (min-width: 1460px) {
	.accordion-group li h3{
		margin: 35% 0 0;
	}
}


@media (max-width: 1024px) {
	.accordion-group li h3{
		font-size:30px;
		margin: 130% -100% 0;
	}
}

@media (max-width: 550px) {
	.accordion-group li h3{
		font-size:20px;
	}
}

@media (max-width: 400px) {
	.accordion-group li h3{
		font-size:16px;
	}
}

.accordion-group li section article {
	display:block;
	padding:0;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* BLOCCHI */

.shape {
  height: 180px;
  background: #EC5149;
  margin: 30px 0px;
  position: relative;
  display: : inline!important
}
.shape:after {
  content: '';
  position: absolute;
  border-style: solid;
  right: 0;
  top: 50%;
  border-width: 91px 0 90px 30px;
  transform: translate(99%, -50%);
  border-color: transparent transparent transparent #EC5149;
}
.shape-content {
	padding: 20px;
}
.shape-content h5 {
	color: #fff
	}
.shape-content p {
	color: #fff
	}
	
.shape-side-div {
	display: inline-block;
	margin: 30px 0px 30px 30px;
}

.shape-side-div > .tt-subcategory {
	padding: 20px
}

.shape-side-div > .tt-subcategory > a {
	padding: 5px
}