body{ background-color:#000000;}
.vis-desktop{display:block;}
.vis-mobile{display:none;}
.img-responsive{width:100%; height:auto !important;}
.header{position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; background: #000000; padding: 20px;}
.navigation{width:100%; max-width: 600px; margin: auto; display: flex; justify-content: space-between;}
.navigation li a{color:#ebd79a; font-size:20px; font-family: 'Calligraffitti', cursive; text-decoration:none; letter-spacing:1px;}
.navigation li a:hover{color:#bba377;}
.header-mobile{height:70px; width: 100%; position: fixed; top:0; left:0; text-align: center; background-color: #000000; z-index: 200; display:none;}
.header-mobile img{padding-top:12px;}
#navigation-icon{width: 32px; height: 30px; position: absolute; top:16px; left:16px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;}
#navigation-icon span {display: block; position: absolute; height: 2px; width: 50%; background: #ebd79a; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
#navigation-icon span:nth-child(even) {left: 50%; border-radius: 0 9px 9px 0;}
#navigation-icon span:nth-child(odd) {left:0px; border-radius: 9px 0 0 9px;}
#navigation-icon span:nth-child(1), #navigation-icon span:nth-child(2) {top: 7px;}
#navigation-icon span:nth-child(3), #navigation-icon span:nth-child(4) {top: 18px;}
#navigation-icon span:nth-child(5), #navigation-icon span:nth-child(6) {top: 29px;}
#navigation-icon.open span:nth-child(1),#navigation-icon.open span:nth-child(6){-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#navigation-icon.open span:nth-child(2),#navigation-icon.open span:nth-child(5) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
#navigation-icon.open span:nth-child(1) {left: 4px; top: 14px;}
#navigation-icon.open span:nth-child(2) {left: calc(50% - 4px); top: 14px;}
#navigation-icon.open span:nth-child(3) {left: -50%; opacity: 0;}
#navigation-icon.open span:nth-child(4) {left: 100%; opacity: 0;}
#navigation-icon.open span:nth-child(5) {left: 4px; top: 22px;}
#navigation-icon.open span:nth-child(6) {left: calc(50% - 4px); top: 22px;}
.menu-mobile{overflow: scroll; padding-bottom: 150px; width: 100%; height:100vh; position: fixed; left: -100%; top:70px; background-color:#000000; padding-top:0; -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out;}
.menu-mobile.open{ left: 0;}
.menu-mobile a:first-child{padding-top:20px;}
.menu-mobile a{color:#ebd79a; font-size:20px; font-family: 'Calligraffitti', cursive; text-decoration:none; display:block; padding-bottom:15px;}
.content{padding-top:60px; position:relative;}
.content-int{padding-top:60px; min-height:100vh !important; background:url(../images/sfondoduet.jpg) no-repeat top center; padding-bottom:100px;}
.intro{color:#ebd79a; font-size:2vw; font-family: 'Calligraffitti', cursive; text-align:center; width:90%; max-width:1024px; margin:auto; line-height:120%; padding-bottom:10%;}
.title{color:#ebd79a; font-size:40px; font-family: 'Calligraffitti', cursive; text-align:center; width:90%; max-width:1024px; margin:auto; padding-bottom:25px; line-height:120%;}
.desc{color:#ebd79a; font-size:26px; font-family: 'Calligraffitti', cursive; text-align:center; width:90%; max-width:1024px; margin:auto; line-height:150%; letter-spacing:2px;}
.intro span{font-size:3vw; display:block; color:#a5874d; padding-top:5px; padding-bottom:20px;}
.footer{ width: 100%; background: #000000; padding: 20px;}
.footer p{color:#ebd79a; font-size:14px; font-family: 'Roboto', sans-serif; text-align:center;}

.submenu{position: fixed; z-index: 9999; top: 0; left: 0; padding-top: 62px; padding-bottom: 20px; width: 100%; background-color: rgba(0, 0, 0, 0.6); text-align:center; display:none;}
.submenu li{padding: 0 10px; vertical-align: middle; display:inline-block;}
.submenu li a{font-size:16px; color:#ebd79a; letter-spacing:1px;}
.submenu li a:hover{font-size:16px; color:#bba377; letter-spacing:1px;}
.duetmenu:hover .submenu {display: block;}

.submenu-ispirazioni{position: fixed; z-index: 9999; top: 0; left: 0; padding-top: 62px; padding-bottom: 20px; width: 100%; background-color: rgba(0, 0, 0, 0.6); text-align:center; display:none;}
.submenu-ispirazioni li{padding: 0 10px; vertical-align: middle; display:inline-block;}
.submenu-ispirazioni li a{font-size:16px; color:#ebd79a; letter-spacing:1px;}
.submenu-ispirazioni li a:hover{font-size:16px; color:#bba377; letter-spacing:1px;}
.ispirazioni:hover .submenu-ispirazioni{display: block;}

.social{text-align:center; margin-bottom:15px;}
.social li{display:inline-block; padding:0 12px;}
.social li a{width:100%; max-width:30px; display:block;}
.social li a img{width:100%; height:auto;}
.box-logo{width:100%; text-align:center;}
.logo-int{width:100%; max-width:156px; padding:40px 0;}
.img-duet-top{ padding-bottom:75px;}

.container-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 50px;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@-webkit-keyframes rotating{
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating 
{
position:absolute; 
top:6.7%; z-index:-1; 
left:28.2%; 
width:42.6%;
-moz-animation: rotating 9s linear infinite;
-ms-animation: rotating 9s linear infinite;
-o-animation: rotating 9s linear infinite;
animation: rotating 9s linear infinite;
}

@media(max-width:1024px)
{
.intro{font-size:2.5vw;}
.intro span{font-size:4.5vw;}
}

@media(max-width:768px)
{
.intro{font-size:2.5vw;}
.intro span{font-size:4.5vw;}
}

@media(max-width:767px)
{
.header, .vis-desktop{display:none;}
.header-mobile, .vis-mobile{display:block;}
.content, .content-int{padding-top:70px;}
.intro{font-size:4vw;}
.intro span{font-size:6vw;}
.footer p{font-size:12px;}
.title{font-size:34px;}
.desc{font-size:20px;}
.container-iframe 
{
  margin-top:20px;
  padding-top: 76%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
}

@media(max-width:480px)
{
.intro{font-size:20px;}
.intro span{font-size:7vw;}
}