@charset "utf-8";
/* CSS Document */

#navigation-toggle {
  background-color: #000 !important;
  top: 3vh !important;
  right: 5vw !important;
}

.sidr {
  width: 200px !important;
}

.sidr ul,
.sidr ul li {
  border: 0px !important;
}

#sidr-main {
  background-color: #000 !important;
  border-right: 1px solid #4d4d4d;
}

#sidr-main li a {
  font-family: realcism-montserrat-bold !important;
  text-transform: uppercase !important;
  font-size: 16px;
  line-height: 46px;
}

@media (max-width: 1200px) {
  .puppet{
    height: 40vw !important;
    background-position: center -10vw !important;
    background-attachment: unset !important;
  }

  .custom.coverHomepage img {
    position: relative;
    float: right;
    width: 60%;
    min-width: 60%;
    min-height: auto;
    max-width: auto;
    max-height: auto;
    margin: 2% 2% 2% 5%;
    z-index: 1;
  }
 
}

@media (max-width: 900px) {
  #logo img {
    height: 100%;
    margin-top: 0px;
    min-height: auto;
    max-height: auto;
  }

  .puppet{
    height: 30vw !important;
  }

  .custom.coverHomepage img {
    position: relative;
    float: right;
    width: 50%;
    min-width: 50%;
    min-height: auto;
    max-width: auto;
    max-height: auto;
    margin: 2% 5% 2% 5%;
  }
}

@media (max-width: 860px) {
  #navigation-toggle {
    top: .7vh !important;
  }
}

@media (max-width: 800px) {
  #navigation-toggle {
    top: 1vh !important;
  }

  /* #article .page-about p img {
    width: 100%;
    height: auto;
  } */

  .puppet{
    height: 40vw !important;
  }

  .custom.coverHomepage img {
    position: relative;
    float: right;
    width: 55%;
    min-width: 55%;
    min-height: auto;
    max-width: auto;
    max-height: auto;
    margin: 2% 5% 2% 5%;
  }
  
  #col-dx,
  #article {
    position: relative;
    float: left;
    width: 90% !important;
    padding-left: 5%;
    padding-right: 5%;
    margin-left: 0px !important;
    margin-right: 0px !important;
    /* display: none; */
  }
  
  #article {
    width: 80% !important;
    padding-left: 10%;
    padding-right: 10%;
  }

  #article .blog.writings img {
    width: 60%;
    margin: auto 20%;
  }
  
  #corpo {
    left: 0px;
    width: 100%;
    /* top: 40px !important; */
  }
  
  .blog.homepage {
    background-color: #FFF;
  }
  
  .blog.homepage h1 {
    font-size: 4em !important;
  }
  
  .blog.homepage h2 {
    font-size: 2em !important;
  }
  
  /* #article {
    width: 100%;
    padding-right: 0px;
    border-right: 0px;
  } */
  
  .brandfolio .image-container {
    width: 40%;
    margin: 5%;
  }
  
  .brandfolio .image-container img {
    width: 100%;
  }
  
  .imgString {
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 700px) {
  #navigation-toggle {
    top: 3vh !important;
  }
  
  #top #logo {
    top: 2.5vh !important;
    width: 70px;
    height: 70px;
    margin-top: 0px;
  }

  #logo img {
    min-height: 40px;
    max-height: 40px;
  }

  .custom.coverHomepage img {
    position: relative;
    float: right;
    width: 55%;
    min-width: 55%;
    min-height: auto;
    max-width: auto;
    max-height: auto;
    margin: 6% 5% 2% 5%;
  }
  
  #containerTop,
  #top {
    height: 10vh;
  	min-height: 0px;
  	max-height: 200px;
  }
  
  #containerBottom {
    height: 15vh;
  	min-height: 0px;
  	max-height: 200px;
  }
  
  #footer {
    height: 14vh;
  	min-height: 0px;
  	max-height: 200px;
  }
  
  .moduli-contenuto {
    margin-top: 0px;
  }
  
  .bolla-top {
    position: relative;
    width: 60vw;
  }
  
  .bolla-bottom {
    position: relative;
    width: 80vw;
    margin: 10vh 10vw;
  }
  
  .homeBolle .body {
    position: relative;
    width: 70%;
    left: 15%;
    top: 15vh;
  }
  
  .homeBolle .body p,
  .homeBolle .body p .giallo,
  .homeBolle .body p .azzurro {
    font-size: 5vw !important;
    line-height: 6.5vw !important;
  }

  .menu-menuAlternativo {
    width: 80%;
    margin-left: 10%;
    /* margin-top: 120%; */
    margin-top: 10vh;
  }

  .menu-menuAlternativo a {
    font-size: 6vw;
    line-height: 8vw;
  }
  
  .moduletable-puppet {
    width: 80vw;
    margin: 0px 10vw;
  }
  
  .titleH3 {
    font-size: 5vw;
	text-align: center !important;
  }

  .moduletable-articoloHome,
  .moduletable-beTheOne {
    width: 80%;
    margin: 15% 10%;
    left: 0;
  }
  
  .moduletable-beTheOne {
    margin-top: 0%;
  }
  
  .moduletable-beTheOne {
    padding: 8% 0px;
  }

  .moduletable-articoloHome h3 {
    font-size: 12vw;
    line-height: 13vw;
  }

  .moduletable-articoloHome .bt-introtext {
    font-size: 4vw;
  }

  .moduletable-articoloHome .readmore,
  .moduletable-beTheOne .readmore {
    width: 40%;
    margin: 3% 30%;
  }

  .moduletable-articoloHome .readmore a,
  .moduletable-beTheOne .readmore a {
    font-size: 5vw;
  }

  #totalWidth .puppet,
  #totalWidth .body {
    width: 100%;
  }
  
  .custom-directMail p,
  .custom-directMail p a {
    font-size: 7vw !important;
    line-height: 8vw;
  }
  
  #totalWidth p,
  #totalWidth p span {
    font-size: 5vw !important;
	line-height: 6.5vw !important;
  }
 
  .citazione {
    line-height: 34px;
    font-size: 18px;
  }
  
  #article p {
    text-align: left;
  }
  
  #article p img.realcism {
    width: 100%;
    height: auto;
  }

  #article .title-article {
    width: 45vw;
  }

  #article .sign {
    width: 30vw;
  }

  #bg-about {
    background-size: cover;
  }
  
  .brandfolio .imageList {
    width: 30.3%;
	margin: 1.5%;
  }
  
  .readMoreWritings ul li {
    width: 90vw;
    margin: 5vw;
  }

  .readMoreWritings hr {
    margin: 0px;
    padding: 0px;
  }
  
  .articoliWorks .titolo {
    margin-top: 10%;
  }
  
  .articoliWorks .titolo,
  .articoliWorks .articolo {
    width: 100%;
    padding: 0px !important;
  }
  
  .articoliWorks .mokupWorks img {
    width: 100%;
    margin: 2.5% 0px !important;
  }
  
  .articoliWorks .mokupWorks .mokupImageList.left,
  .articoliWorks .mokupWorks .mokupImageList.right {
    position: relative;
    float: left;
    width: 47.5%;
    margin: 2.5% 0px;
  }

  .articoliWorks .mokupWorks .mokupImageList.right {
    float: right;
  }
  
  .galleriaWorks img {
    width: 45%;
  }
  
  .lookbook .imageListContainer {
    width: 40%;
    margin: 0px 5% 2% 5%;
  }
  
  .posters .imageListContainer,
  .productDesign .imageListContainer {
    width: 40%;
    margin: 0px 5% 10% 5%;
  }
  
  /*
  .product-design .galleriaWorks .imageListContainer {
    width: 100%;
    margin: 2.5% 0px;
  }
  */
  
  .backgroundWorks {
    height: 50%;
  }
  
  #article .writings .page-header h2,
  .gifHeader {
    width: 100%;
  }

  .moduletable-instagram h3,
  .moduletable-ytvideo h3 {
    font-size: 8vw;
  }
  
  .yt-video {
    width: 100%;
    margin: 5% 0px;
  }
  
  #copyright,
  #social,
  #help-menu,
  #help-menu ul {
    width: 100%;
    text-align: center !important;
    font-size: 2vw;
  }

  #copyright,
  #social,
  #help-menu {
    top: 0vh;
    padding-top: .5vh;
  }
  
  #footer ul li {
    text-align: center !important;
    padding: 0px 2% 0px 2% !important;
  }
  
  #help-menu ul li a {
    font-size: 2vw;
  }

  .spaziatore.bottom {
    height: 20vh;
  }

  #videoFrame {
    height: 300px;
  }

  .works #videoFrame {
    margin-top: 50px;
  }

  .works .containerTesto,
  .works .testo_bold,
  .works .testo_semibold,
  .works .testo_light {
    width: 100%;
  }
  .works .testo_bold {
    font-size: 38px;
    line-height: 50px;
    padding-right: 0px !important;
  }

  .works.scopri-teramo .testo_bold {
    font-size: 34px;
    line-height: 46px;
  }

  .works .testo_light {
    margin-bottom: 0px !important;
  }

  .works .testo_semibold {
    margin: 10% 0px !important;
  }
  
}

@media (max-width: 700px) {
  .puppet{
    height: 40vw !important;
  }

  .custom.coverHomepage img {
    position: relative;
    float: right;
    width: 55%;
    min-width: 55%;
    min-height: auto;
    max-width: auto;
    max-height: auto;
    margin: 5% 5% 2% 5%;
  }
  
}

@media (max-width: 670px) {
  
  #logo img {
    min-height: 20px;
    max-height: 50px;
  }
  
}

@media (max-width: 600px) {
  .puppet{
    height: 55vw !important;
  }

  .custom.coverHomepage img {
    margin: 15% 5% 2% 5%;
  }
  
}

@media (max-width: 500px) {
  #corpo {
    top: 20px !important;
  }
}

@media (max-width: 400px) {
  .puppet{
    height: 55vw !important;
  }

  .custom.coverHomepage img {
    margin: 15% 5% 2% 5%;
  }
  
}

@media (max-width: 320px) {
  #logo img {
    min-height: auto;
    max-height: auto;
  }
  
  #navigation-toggle {
    top: 2vh !important;
  }
}