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

@font-face {
    font-family: FuturaPTLight;
    src: url('../fonts/FuturaPTLight.otf');
}
@font-face {
    font-family: FuturaPTHeavy;
    src: url('../fonts/FuturaPTHeavy.otf');
}
@font-face {
    font-family: FuturaPTLightOblique;
    src: url('../fonts/FuturaPTLightOblique.otf');
}

@font-face {
    font-family: FuturaPTBook;
    src: url('../fonts/FuturaPTBook.otf');
}

body {-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;}

ul {list-style: none;}
a { font-family: FuturaPTHeavy; font-size: 20px;}
a:hover {text-decoration:none;  color: black;}

h1 {color:white ; font-family: FuturaPTHeavy; }
h2 {color:white; font-family: FuturaPTHeavy;}
h3 {color:white; font-family: FuturaPTBook;}
h4 {color:white; font-family: FuturaPTLightOblique;}
p {color:white; font-family: FuturaPTBook;}

* {box-sizing: border-box;}

textarea:focus, input:focus{
    outline: none;
}

#menu {position:fixed;  z-index: 5; transition:.1s ease;}

.nav-bar {
width:100%;
}

.nav-contenuto {
  overflow:hidden;
  height:85px;
}

.nav-logo {
float:left;
display:block;
color:#fff;
margin:22px 0px 10px 35px;
background-image:url(../img/logo-rr-green.svg);
background-repeat:no-repeat;
width:80px;
height:40px;
}

.nav-logo2 {
float:left;
display:block;
color:#fff;
margin:22px 0px 10px 35px;
background-image:url(../img/logo-rr-blue.svg);
background-repeat:no-repeat;
width:80px;
height:40px;
}

.nav-logo:hover {
background-image:url(../img/logo-rr-yellow.svg);
 }

 .nav-logo2:hover {
   background-image:url(../img/logo-rr-pink.svg);
}


.nav-logo-ft {
  display:block;
  color:#fff;
  margin: 0 auto 10px auto;
  background-image:url(../img/logo-rr.svg);
  background-repeat:no-repeat;
  width:80px;
  height:50px;
}

.highlight {border-bottom:10px solid #17181E; transition:.25s ease;}
.highlight a {cursor:default; pointer-events: none;}

nav-logo-ft:hover {

}

.footerInfo {
position: relative;
height:100%;
text-align: center;
margin: 0 auto !important;

}

.footerInfo p {
font-size:13px;
text-align: center;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding:0 10px;
margin-bottom: 0px;
margin-top: 40px;
}

.tornasu {
display:none;
font-family: FuturaPTHeavy;
font-size:17px;
color:white;
height:20px;
width:66px;
margin-top:-28px;
position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

.nav-lista {
float:right;
margin-top:5px;
}

.nav-lista  li {
float:left;
list-style: none;
}

.nav-lista li a {
  padding:20px 30px;
  display:block;
  font-size:21px;
}

.nav-listaColor {  color:#8FCCB6;}
.nav-listaColor2 {  color:#17181E;}
.nav-listaColor:hover {color:#8FCCB6;}
.nav-listaColor2:hover { color:#17181E;}

.selected {transition:.25s ease;}
.selected:hover {opacity: 0.7;
  transform:scale(0.95,0.95);
-ms-transform:scale(0.95,0.95);
-webkit-transform:scale(0.95,0.95);
-moz-transform:scale(0.95,0.95);
-o-transform:scale(0.95,0.95);}



li .drop {
width:30px;
height:30px;
background-image:url(../img/drop-green.svg);
background-repeat: no-repeat;
}

li .drop2 {
width:30px;
height:30px;
background-image:url(../img/drop-blue.svg);
background-repeat: no-repeat;
}


.droppp:hover {opacity: 0.7; transition:.25s ease;
  transform:scale(0.95,0.95);
-ms-transform:scale(0.95,0.95);
-webkit-transform:scale(0.95,0.95);
-moz-transform:scale(0.95,0.95);
-o-transform:scale(0.95,0.95);}


.drop a {

}

#rrtitolo {
position: relative;
min-height: 100vh;
overflow: hidden;
}

#logocontainer {
position: relative;
min-height: 100vh;
background-size: 380px;
overflow: hidden;
}

.hdrlogo {
  background-image:url(../img/logo-rr-green.svg);
  background-position: center;
  background-repeat: no-repeat;
}

.hdrlogo2 {
  background-image:url(../img/logo-rr-blue.svg);
  background-position: center;
  background-repeat: no-repeat;
}

.box {
width:100%;
  background-image: url("../img/bg-yellow.svg");
  background-position-x: 50%;
background-position-y: center;
background-size:cover;
background-repeat: no-repeat;
 background-attachment: fixed;

}

.box2 {
  width:100%;
    background-image: url("../img/bg-pink.svg");
    background-position-x: 50%;
  background-position-y: center;
  background-size: cover;
  background-repeat: no-repeat;
   background-attachment: fixed;

}

.box3 {

  width:100%;
    background-image: url("../img/bg-yellow.svg");
    background-position:;
     background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;

}


.box4 {

  width:100%;
    background-image: url("../img/bg-pink.svg");
    background-position:;
     background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;

}

.hdrcolor {background-color:#17181E;}
.hdrcolor2 {background-color:#8FCCB6;
}



header h1 {
font-size:64px;
text-align:center;
width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;
overflow: hidden;
bottom:46%;
}


.fade-in {
	-webkit-animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


header h1:hover {cursor: default;}

header h3 {
text-align:center;
font-size:27px;
width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;
bottom:42%;
font-family: FuturaPTBook;
}

header h3:hover {cursor: default;}


.scroll-down {
  width:56px;
  height:50px;
  background-color:red;
  position: absolute;
  bottom: 0;
  left: 48%;
  background: url(../img/scroll-down.svg) no-repeat 0 0;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;

}

.scroll-down:hover {
  opacity: 0.7; transition:.25s ease;
    transform:scale(1.2,1.2);
  -ms-transform:scale(1.2,1.2);
  -webkit-transform:scale(1.2,1.2);
  -moz-transform:scale(1.2,1.2);
  -o-transform:scale(1.2,1.2);

}

.info-cnt {background:white; top: 20%;}

.form-cntColor {background: #8FCCB6;}
.form-cntColor2 {background:#17181E;}


#logo-cnt {}
.logo-cnt {height:100%;
  margin:5px auto;
  background-image:url(../img/logo-rr-green.svg);
  background-repeat: no-repeat;
  background-position: center;

}

.logo-cnt2 {height:100%;
  margin:5px auto;
  background-image:url(../img/logo-rr-blue.svg);
  background-repeat: no-repeat;
  background-position: center;

}

#presentazione {
  margin:45px auto;
 text-align: center;
line-height: 20px;
width:60%;
}

#presentazione p {
  font-family:FuturaPTBook;
  font-size:18px;
  line-height:25px;
}

.presentazioneColor { color:#8FCCB6;}
.presentazioneColor2 {color:#17181E;}

#dati .presentazioneColor:hover{
  color:#EDD950;
   transition:.2s ease;
}

#dati .presentazioneColor2:hover{
  color:#F19686;
   transition:.2s ease;
}

#dati {
  margin:5px auto;
    overflow: hidden;
}

#dati ul {
  padding-left:0px;
}

#dati ul li {
  text-align: center;
  margin: 2px 0px;
}

#dati ul li a {
  font-family:FuturaPTHeavy;
  font-size:17px;
  margin: 20px 5px;
}


form {
  font-family:FuturaPTHeavy;
  font-size:18px;
  color:white;
}

form input {
margin:5px 0px 20px 0px;
}

form textarea {
margin:5px 0px 20px 0px;
}

.form {width:85%;
min-height:100%;
position:absolute;
top:20%;
margin:0px auto;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

.mrg-form {width: 90%; margin: 0 auto;}
.mrg-form p {margin-bottom:0px; font-size:15px; font-family:FuturaPTHeavy;}
.txtinput {
  color:white;
  width:100%;
  height:35px;
  padding-left:4px;
  border: 0;
  background: transparent;
  border-bottom: 2px solid white;
  font-size:20px;
}
.msginput {
  height:96px;
  border: 0;
  background: transparent;
  border-bottom: 2px solid white;
  resize:none;
}
.btninput { color:white;
  border:none;
  width:100%;
  height:45px;
  float:right;
  font-size:15px;
  margin:8px 0;
  cursor: pointer;
}

.hideme{
-webkit-backface-visibility: hidden;
  opacity:0;
}

#tl-anchor {width:100%; height:110px;}

.title1 {
height:50px;
display: block;
}

.title2 {
min-height:30px;
display: block;
}

.title1 h2, .title2 h2 {
  width:100%;
  text-align:center;
  display: block;
}
.progetti-titoloColor {color:#8FCCB6;}
.progetti-titoloColor2 {color:#8FCCB6;}

.mrg-prg {margin-bottom:100px;}

.scrlprog {}
.scrlvis {}


.slide-in-blurred-top {
  	-webkit-animation: slide-in-blurred-top 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  	        animation: slide-in-blurred-top 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  }

  /**
   * ----------------------------------------
   * animation slide-in-blurred-top
   * ----------------------------------------
   */
  @-webkit-keyframes slide-in-blurred-top {
    0% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;

      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      opacity: 1;
    }
  }
  @keyframes slide-in-blurred-top {
    0% {
      -webkit-transform: translateY(-50px) scaleY(1) scaleX(1);
              transform: translateY(-50px) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) scaleY(1) scaleX(1);
              transform: translateY(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      opacity: 1;
    }
  }


.myrow {margin-top:20px; position: relative;}
.basic-margin {margin-top:30px;}
.myprogetto {margin-top:30px;}

.showmore {height:70px; width:40%; margin:0 auto; cursor:pointer;
background-image: url(../img/showmore-blue.svg);
background-repeat: no-repeat;
background-position:center;
 background-size: 50px;
margin-top:10px;
transition: .25s ease;}

.showmore2 {height:70px; width:40%; margin:0 auto; cursor:pointer;
background-image: url(../img/showmore-green.svg);
background-repeat: no-repeat;
background-position:center;
 background-size: 50px;
margin-top:10px;
transition: .25s ease;}

/*
#showmore::before {content: "Show more";
display: block;
text-align: center;
padding-bottom: 35px;
font-family: FuturaPTBook;
font-size:19px;
color:#17181E;
}
*/

#showmore:hover {
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
}

.hide {display:none}
.show {display:block !important;
opacity: 0.7;
transition: all .3s;}

.groundyContainer { background-image:url(../img/groundy.jpg);
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: 100%;
  height: 280px; }

.resumeContainer { background-image:url(../img/resume.jpg);
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: 100%;
  height: 280px; }

.ravelloContainer { background-image:url(../img/richie-ravello.jpg);
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: 100%;
  height: 280px; }

.phonurgiaContainer { background-image:url(../img/phonurgia.jpg);
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: 100%;
  height: 280px; }

.ikeaContainer { background-image:url(../img/ikea.jpg);
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 100%;
    height: 280px; }

.logofolioContainer { background-image:url(../img/logofolio.jpg);
      overflow: hidden;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: block;
      width: 100%;
      height: 280px; }

.iconsContainer { background-image:url(../img/icons.jpg);
      overflow: hidden;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: block;
      width: 100%;
      height: 280px; }

.krakkleContainer { background-image:url(../img/krakkle.jpg);
      overflow: hidden;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: block;
      width: 100%;
      height: 280px; }

.boccaContainer { background-image:url(../img/bocca.jpg);
      overflow: hidden;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: block;
      width: 100%;
      height: 280px; }

.groundyImage { display: block; width: 100%; height: auto;   }

.overlay {
  position:relative;
  bottom: 100%;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .02s ease;
}

.overlayColor {background-color: rgba(237, 217, 80, 1);}
.overlayColor2 {background-color: rgba(241, 150, 134, 1); }

.groundyContainer:hover .overlay {
  bottom: 0;
  height: 100%;
}

.ravelloContainer:hover .overlay {
  bottom: 0;
  height: 100%;
}

.resumeContainer:hover .overlay {
  bottom: 0;
  height: 100%;
}

.phonurgiaContainer:hover .overlay {
  bottom: 0;
  height: 100%;
}

.ikeaContainer:hover .overlay {
  bottom: 0;
  height: 100%;
}

.logofolioContainer:hover .overlay {
  bottom: 0;
  height: 100%;
}

.iconsContainer:hover .overlay {
  bottom: 0;
  height: 100%;
}

.krakkleContainer:hover .overlay {
  bottom: 0;
  height: 100%;
}

.boccaContainer:hover .overlay {
  bottom: 0;
  height: 100%;
}

.mbText {display:none;}

.groundyText {
  width:80%;
  color: white;
  text-align: center;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.groundyText h2 {
font-size:30px;
}

.groundyText h2:hover {
  opacity: 1.0 !important;
}

.groundyText h5 {
font-size:18px;
font-family: FuturaPTLight;
}

#vis1, #vis2, #vis3, #vis4, #vis5, #vis6, #vis7, #vis8 {min-height:300px; position:relative;}

#visione {padding:30px 0;}
.visioneColor {background-color:#8FCCB6;}
.visioneColor2 {background-color:#17181E; z-index:1;}
.visioneColor3 {background-color:#8FCCB6;} /* Solo per pagina Visione.html */
.visioneColor4 {background-color:#8FCCB6;}

.visione-titoloColor {color:#8FCCB6;}
.visione-titoloColor2 {color:#8FCCB6;}

footer {
  position: relative;
  padding: 8% 0;
  z-index: 2;
}

.footerColor {background-color:#17181E;}
.footerColor2 {background-color:#8FCCB6;}

.contactmeColor  {color:white;}
.contactmeColor2  {color:#8FCCB6;}

#contactme:hover {opacity: 0.7; transition:.25s ease;
  transform:scale(0.95,0.95);
-ms-transform:scale(0.95,0.95);
-webkit-transform:scale(0.95,0.95);
-moz-transform:scale(0.95,0.95);
-o-transform:scale(0.95,0.95);}

.social-text {height:30px; display: block; margin: 35px auto;}
.social-text2 {height:30px; display: block; margin: 35px auto}
.social-text ul {padding:0px;}
.social-text li {display: inline-block; margin: 0 30px;}
.social-text a { color:white; font-size:22px;}
.social-text a:hover { color:#EDD950;
                        transition: .25s ease;
                        transform: scale(0.95,0.95);
                        -ms-transform: scale(0.95,0.95);
                        -webkit-transform: scale(0.95,0.95);
                        -moz-transform: scale(0.95,0.95);
                        -o-transform: scale(0.95,0.95);
                      }
.social-text2 a:hover { color:#F19686;
                       transition: .25s ease;
                       transform: scale(0.95,0.95);
                       -ms-transform: scale(0.95,0.95);
                       -webkit-transform: scale(0.95,0.95);
                       -moz-transform: scale(0.95,0.95);
                        -o-transform: scale(0.95,0.95);
                      }
.float-ft {display:none; }

/* Floating Social Media Bar Style Starts Here */

.float-sm {
position: fixed;
 height:150px;
 right: 15px;
 top:310px;
   z-index: 1;
}

.fl-fl {
  transition: .25s ease;
  z-index: 1;
  height:55px;
}

.fa {
  width: 40px;

}

.fl-fl:hover {
  opacity: 0.7;
  transform: scale(0.95,0.95);
  -ms-transform: scale(0.95,0.95);
  -webkit-transform: scale(0.95,0.95);
  -moz-transform: scale(0.95,0.95);
  -o-transform: scale(0.95,0.95);
}

.fl-fl a {}

.socialColor {color:#8FCCB6;}
.socialColor2 {color:#8FCCB6;}

/* Floating Social Media Bar Style Ends Here */




.titolo-container {width:100%; padding:230px 0 110px 0; background-image:url(../img/header-groundy.jpg);
background-position-x: 50%; background-position-y: center; background-size: cover; background-repeat: no-repeat;
height:600px;
}
.titolo-container2 {width:100%; padding:230px 0 110px 0; background-image:url(../img/header-resume.jpg);
background-position-x: 50%; background-position-y: center; background-size: cover; background-repeat: no-repeat;
height:600px;
}
.titolo-container3 {width:100%; padding:230px 0 110px 0; background-image:url(../img/header-richie-ravello.jpg);
background-position-x: 50%; background-position-y: center; background-size: cover; background-repeat: no-repeat;
height:600px;
}
.titolo-container4 {width:100%; padding:230px 0 110px 0; background-image:url(../img/header-ikea.jpg);
background-position-x: 50%; background-position-y: center; background-size: cover; background-repeat: no-repeat;
height:600px;
}
.titolo-container5 {width:100%; padding:230px 0 110px 0; background-image:url(../img/header-logofolio.jpg);
background-position-x: 50%; background-position-y: center; background-size: cover; background-repeat: no-repeat;
height:600px;
}
.titolo-container6 {width:100%; padding:230px 0 110px 0; background-image:url(../img/header-phonurgia.jpg);
background-position-x: 50%; background-position-y: center; background-size: cover; background-repeat: no-repeat;
height:600px;
}
.titolo-container7 {width:100%; padding:230px 0 110px 0; background-image:url(../img/header-icons.jpg);
background-position-x: 50%; background-position-y: center; background-size: cover; background-repeat: no-repeat;
height:600px;
}
.titolo-container8 {width:100%; padding:230px 0 110px 0; background-image:url(../img/header-krakkle.jpg);
background-position-x: 50%; background-position-y: center; background-size: cover; background-repeat: no-repeat;
height:600px;
}
.titolo-container9 {width:100%; padding:230px 0 110px 0; background-image:url(../img/header-bocca-che-strega.jpg);
background-position-x: 50%; background-position-y: center; background-size: cover; background-repeat: no-repeat;
height:600px;
}


/* GROUNDY.HTML STYLE START */

.groundyTitle {
  width: 40%;
  margin: 0 auto;
  padding: 30px 20px;
}

.groundyTitleColor {background:#17181E;}
.groundyTitleColor2 {background: #8FCCB6;}

.groundyTitle h1 {position:relative; text-align: center; color:white; font-size:60px;}
.groundyTitle h4 {text-align: center; color:white; font-size:20px;}

.progetto-dscr {min-height:100px; padding:35px 0px;}

.progetto-dscrColor {background-color:#8FCCB6;}
.progetto-dscrColor2 {background-color:#17181E;}


.groundyGallery {margin:100px auto 50px auto; width:80%;}
.groundyGallery img {
  margin-top:20px;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;}

.mrg-exc {margin-top:50px;}

#progetto-txt-container {z-index:1;}
.progetto-txt {width:65%; text-align:center; margin:0px auto; padding:100px 0;}
.progetto-txtColor {background:#17181E;}
.progetto-txtColor2 {background:#8FCCB6;}

.progetto-txt h2, p {color:white;}
.progetto-txt p {font-size:22px; font-family:FuturaPTLight;}

.gr-logo {margin-top:120px; }
.gr-logo img {margin:0 auto; display:block; width:50%;}

.palette-section {width:90%; margin:100px auto 0px auto; display:block; min-height:150px; transition: all .3s;}
.color-container { float:left; ; transition: all .3s; }
.g-color1 {width:140px;height:140px; border-radius:50%; background-color:#F2F0E3; margin:20px auto; transition: all .3s;}
.g-color2 {width:140px;height:140px; border-radius:50%; background-color:#E55C21; margin:20px auto; transition: all .3s;}
.g-color3 {width:140px;height:140px; border-radius:50%; background-color:#614447; margin:20px auto;transition: all .3s; }
.g-color4 {width:140px;height:140px; border-radius:50%; background-color:#576B30; margin:20px auto;transition: all .3s; }

.color-shdw {box-shadow:0 5px 20px 0 rgba(0,0,0,.2);}
.color-shdw:hover {transform: scale(1.1,1.1);
  -ms-transform:scale(1.1,1.1);
  -webkit-transform:scale(1.1,1.1);
  -moz-transform:scale(1.1,1.1);
  -o-transform:scale(1.1,1.1);}

.name-color {text-align:center; font-family:FuturaPTLight; margin-top:5px; transition: all .3s;}
.color-container h5 {font-size:15px;}

.font-section {width:80%; margin:30px auto 0 auto; min-height:150px;}
.font-section img {width:75%; margin:0 auto; display:block}

.arrow-back-green {background-image:url(../img/arrow-back-green.svg); background-position: center; background-repeat:no-repeat; height:10px; width:30px; float:left; margin:12px 10px 0 0;}
.arrow-back-blue {background-image:url(../img/arrow-back-blue.svg); background-position: center; background-repeat:no-repeat; height:10px; width:30px; float:left; margin:12px 10px 0 0;}

.dscr {text-align: center; color:white; font-family: FuturaPTheavy; font-size:19px; letter-spacing: 2px;}

.alwyshidden {display: none;}

/* GROUNDY.HTML STYLE END */



/* RESUME.HTML STYLE START */

.download-link {text-align: center; }
.download-link a {font-family: FuturaPTHeavy; font-size:25px;}
#download-link:hover {color:black;}

.download-linkColor {color:#17181E;}
.download-linkColor2 {color:#8FCCB6;}

/* RESUME.HTML STYLE END */



/* RICHIE RAVELLO.HTML STYLE START */

.rr-color1 {width:140px;height:140px; border-radius:50%; background-color:#D53A8C; margin:20px auto;transition: all .3s; }
.rr-color2 {width:140px;height:140px; border-radius:50%; background-color:#E1DDDC; margin:20px auto;transition: all .3s; }
.rr-color3 {width:140px;height:140px; border-radius:50%; background-color:#27B4B1; margin:20px auto;transition: all .3s; }
.rr-color4 {width:140px;height:140px; border-radius:50%; background-color:#FBEC58; margin:20px auto;transition: all .3s; }

/* RICHIE RAVELLO.HTML STYLE END */


/* IKEA.HTML STYLE START */

.ik-color1 {width:140px;height:140px; border-radius:50%; background-color:#F9F5CE; margin:20px auto;transition: all .3s; }
.ik-color2 {width:140px;height:140px; border-radius:50%; background-color:#F8B51F; margin:20px auto;transition: all .3s; }
.ik-color3 {width:140px;height:140px; border-radius:50%; background-color:#66ACB2; margin:20px auto;transition: all .3s; }
.ik-color4 {width:140px;height:140px; border-radius:50%; background-color:#463F20; margin:20px auto;transition: all .3s; }

/* IKEA.HTML STYLE END */


/* PHONURGIA.HTML STYLE START */

.ph-color1 {width:140px;height:140px; border-radius:50%; background-color:#3D84C4; margin:20px auto;transition: all .3s; }
.ph-color2 {width:140px;height:140px; border-radius:50%; background-color:#E6E6E6; margin:20px auto;transition: all .3s; }
.ph-color3 {width:140px;height:140px; border-radius:50%; background-color:#BF303A; margin:20px auto;transition: all .3s; }
.ph-color4 {width:140px;height:140px; border-radius:50%; background-color:#00A99D; margin:20px auto;transition: all .3s; }


.proposte {text-align: center; display: block; font-family: FuturaPTHeavy; font-size:20px;}
.proposte h3 {color:#8FCCB6;}

#progetto-txt-container2 {z-index:1;}
#progetto-txt-container3 {z-index:1;}

/* PHONURGIA.HTML STYLE END */


/* KRAKKLE.HTML STYLE START */

.kr-color1 {width:140px;height:140px; border-radius:50%; background-color:#B1C0CB; margin:20px auto;transition: all .3s; }
.kr-color2 {width:140px;height:140px; border-radius:50%; background-color:#A1DBC9; margin:20px auto;transition: all .3s; }
.kr-color3 {width:140px;height:140px; border-radius:50%; background-color:#E5827D; margin:20px auto;transition: all .3s; }
.kr-color4 {width:140px;height:140px; border-radius:50%; background-color:#4F3647; margin:20px auto;transition: all .3s; }

/* KRAKKLE.HTML STYLE END */


/* BOCCACHESTREGA.HTML STYLE START */

.bcs-color1 {width:140px;height:140px; border-radius:50%; background-color:#033A3E; margin:20px auto;transition: all .3s; }
.bcs-color2 {width:140px;height:140px; border-radius:50%; background-color:#F7CB0C; margin:20px auto;transition: all .3s; }
.bcs-color3 {width:140px;height:140px; border-radius:50%; background-color:#F266C0; margin:20px auto;transition: all .3s; }
.bcs-color4 {width:140px;height:140px; border-radius:50%; background-color:#4B2413; margin:20px auto;transition: all .3s; }

/* BOCCACHESTREGA.HTML STYLE END */



/* PROGETTI.HTML STYLE START */

.header-progetti { width:100%; padding:120px 0 50px 0; background:#17181E;}
.header-progetti div h1 {}
.header-progettiColor {color:#8FCCB6 !important;}
.header-progettiColor2 {color:#8FCCB6 !important;}
.sfondo-progettiColor {background-color:#17181E;}
.sfondo-progettiColor2 {background-color:#8FCCB6;}

/* PROGETTI.HTML STYLE END */




@media screen and (max-width: 700px) {

  .nav-lista {padding-left:0px;}
  .nav-lista li a { padding: 20px 15px;}

  header h1 {
  font-size:43px;
  }

  header h3 {
  font-size:19px;
  bottom:43%;
  }

  #logocontainer {
  background-size: 270px;
  }

.scroll-down {display:none;}

.mrg-prg {margin-bottom:70px;}

#visione {}

.slideshow-container {margin:auto !important;}

footer {padding: 12% 0;}

.fl-ft {height:100%; float:left; z-index: 1; margin:0 10px;}
.float-ft {display:block; height:50px; width:180px; margin:20px auto;}

.social-text {display:none;}

.fl-ft {}
.float-ft { margin:20px auto 10px auto;}

.float-sm {display: none;}


.groundyTitle { width:60%;}

.box {}

  .palette-section {width:95%;}

  .g-color1, .g-color2, .g-color3, .g-color4 {width:200px;height:200px;}

  .rr-color1, .rr-color2, .rr-color3, .rr-color4 {width:200px;height:200px;}

  .ik-color1, .ik-color2, .ik-color3, .ik-color4 {width:200px;height:200px;}

  .ph-color1, .ph-color2, .ph-color3, .ph-color4 {width:200px;height:200px;}

  .kr-color1, .kr-color2, .kr-color3, .kr-color4 {width:200px;height:200px;}

  .bcs-color1, .bcs-color2, .bcs-color3, .bcs-color4 {width:200px;height:200px;}

  .gr-logo img {margin:0 auto; width:60%;}

  .dot {  margin:0 10px !important;  }

  .dotlist {display: none;}
  .prev, .next {display: block !important;
    background-size: 65px !important;
    width: 35px !important;
    height:35px !important;
  }

  .prev-left { background-position: -28px 0 !important;}


}



@media screen and (max-width: 500px) {

  .nav-lista li a:hover {
    /* your hover state style rules */
  color:none;
  }

  .nav-lista {;}

  .nav-lista li a {padding:20px 11px; font-size:px;}

  .back {padding: 20px 5px !important;}
  .drop {display:block !important;}
  .hidden {display: none;}
  .alwyshidden {display:block;}

  #logocontainer {
  background-size: 250px;
  }

  header h1 {
  font-size:29px;
  bottom:47%;
  }

  header h3 {
  font-size:16px;
  bottom:44%;
  }

#tl-anchor {height:50px;}

#visione {


}


.fl-fl:hover {

}

.float-be {
  top: 180px;
}

.float-dr {
  top: 240px;
}

.float-inst {
  top: 300px;
}

#overlay {display:none;}

.mbTextColor {background-color:rgba(143, 204, 182, 0.9);}
.mbTextColor2 {background-color:rgba(23, 24, 30, 0.9);}

.mbText, .mbText2  {
  display:block;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  width:80%;
  height:50%;
  padding:20px;
  margin: 60px auto;

}

.mbText h2 {
font-size:25px;

}

.mbText h5 {
font-size:15px;
font-family: FuturaPTLight;
}

.groundyTitle { width:65%;}

.groundyTitle h1 {font-size:36px;}
.groundyTitle h4 {font-size:18px;}

.progetto-txt {width:85%; padding: 50px 0}
.progetto-txt p {font-size:18px;}

.gr-logo img {margin:0 auto; width:90%;}

.palette-section {margin:70px auto 20px auto;}

.font-section {width:100%; margin:0px auto 0 auto;}

.groundyGallery {margin: 60px auto 30px auto;}

.progetto-dscr {padding: 15px 10px;}

.dscr { font-size:14px;}


#vis1, #vis2, #vis3, #vis4, #vis5, #vis6, #vis7, #vis8 {min-height:100px; position:relative;}

.scroll-none {display: none;}

#presentazione {display:none;}

.msginput {height:35px;}
.btninput {height:35px; font-size:13px;}


form input {margin:5px 0px 5px 0px;}
a .ml-size {font-size:3px;}

.form-cnt { }
.modal-content {}

.hideme {opacity:100;}

.progress-button {line-height: 2 !important;}

footer {padding: 20% 0; }

.prev:hover, .next:hover {
  opacity: 1 !important;
transition: none !important;
transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-o-transform: none !important;
}

.titolo-container,
.titolo-container2,
.titolo-container3,
.titolo-container4,
.titolo-container5,
.titolo-container6,
.titolo-container7,
.titolo-container8,
.titolo-container9 {height:450px; padding:150px 0 110px 0;}


}







    /* SLIDESHOW */



.mySlides {display:none
-webkit-backface-visibility: hidden;}

.mySlides img {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: 0 20px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  display: none;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../img/cd-icon-arrows.svg) no-repeat 0 0;
  height: 48px;
  width: 48px;
  position: absolute;
  top: 40%;

}

.prev-left {

background-position: -48px 0;

}

/* Position the "next button" to the right */
.next {
  right: 0;

}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  opacity: 0.7;
transition: .25s ease;
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */

.dotlist {bottom:4%;
  position: absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;}

.dot {
  cursor: pointer;
  height: 11px;
  width: 11px;
  margin: 0 10px;
  background-color: #17181E;
  border-radius: 50%;
  display: inline-block;
  transition: 0.25s ease;
}

.dot2 {
  cursor: pointer;
  height: 11px;
  width: 11px;
  margin: 0 10px;
  background-color: #8FCCB6;
  border-radius: 50%;
  display: inline-block;
  transition:  0.25s ease;
}

.active, .dot:hover {
  opacity: 1;
transition: .25s ease;
transform: scale(1.7,1.7);
-ms-transform: scale(1.7,1.7);
-webkit-transform: scale(1.7,1.7);
-moz-transform: scale(1.7,1.7);
-o-transform: scale(1.7,1.7);
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}



/* ----------------------------------------------
 * Generated by Animista on 2018-1-6 16:43:47
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}










/** NEW SLIDESHOW */


.sp-slideshow {
    position: relative;
	margin: 10px auto;
	max-width: 1400px;
	min-width: 260px;
	height: 460px;
}

.sp-color {background: #8FCCB6;}

.sp-content {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sp-parallax-bg {
    background:;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sp-slideshow input {
    position: absolute;
	bottom: 15px;
	left: 50%;
	width: 9px;
	height: 9px;
	z-index: 1001;
	cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.sp-slideshow input + label {
    position: absolute;
    bottom: 15px;
	left: 50%;
    width: 6px;
	height: 6px;
	display: block;
	z-index: 1000;
	border: 2px solid #fff;
	border: 2px solid rgba(255,255,255,0.9);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background-color linear 0.1s;
    -moz-transition: background-color linear 0.1s;
    -o-transition: background-color linear 0.1s;
    -ms-transition: background-color linear 0.1s;
    transition: background-color linear 0.1s;
}
.sp-slideshow input:checked + label {
	background-color: #fff;
    background-color: rgba(255,255,255,0.9);
}

.sp-selector-1, .button-label-1 {
    margin-left: -36px;
}

.sp-selector-2, .button-label-2 {
    margin-left: -18px;
}

.sp-selector-4, .button-label-4 {
    margin-left: 18px;
}

.sp-selector-5, .button-label-5 {
    margin-left: 36px;
}

.sp-selector-6, .button-label-6 {
    margin-left: 54px;
}

.sp-selector-7, .button-label-7 {
    margin-left: 72px;
}

.sp-arrow {
    position: absolute;
	top: 50%;
	width: 38px;
	height: 68px;
	margin-top: -19px;
	display: none;
	opacity: 0.8;
	cursor: pointer;
	z-index: 1000;
	background: transparent url(../img/arrows.svg) no-repeat;
  background-size:cover;
	-webkit-transition: opacity linear 0.3s;
    -moz-transition: opacity linear 0.3s;
    -o-transition: opacity linear 0.3s;
    -ms-transition: opacity linear 0.3s;
    transition: opacity linear 0.3s;
}
.sp-arrow:hover{
	opacity: 1;
}
.sp-arrow:active{
	margin-top: -18px;
}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5,
.sp-selector-5:checked ~ .sp-arrow.sp-a6,
.sp-selector-6:checked ~ .sp-arrow.sp-a7 {
    right: 15px;
	display: block;
	background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4,
.sp-selector-6:checked ~ .sp-arrow.sp-a5,
.sp-selector-7:checked ~ .sp-arrow.sp-a6 {
    left: 15px;
	display: block;
	background-position: top left;
}

.sp-slideshow input:checked ~ .sp-content {
    -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
    -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
    -o-transition: background-position linear 0.6s, background-color linear 0.8s;
    -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
    transition: background-position linear 0.6s, background-color linear 0.8s;
}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
    -webkit-transition: background-position linear 0.7s;
    -moz-transition: background-position linear 0.7s;
    -o-transition: background-position linear 0.7s;
    -ms-transition: background-position linear 0.7s;
    transition: background-position linear 0.7s;
}

input.sp-selector-1:checked ~ .sp-content {
    background-position: 0 0;

}

input.sp-selector-2:checked ~ .sp-content {
    background-position: -100px 0;

}

input.sp-selector-3:checked ~ .sp-content {
    background-position: -200px 0;

}

input.sp-selector-4:checked ~ .sp-content {
    background-position: -300px 0;

}

input.sp-selector-5:checked ~ .sp-content {
    background-position: -400px 0;

}

input.sp-selector-6:checked ~ .sp-content {
    background-position: -500px 0;

}

input.sp-selector-7:checked ~ .sp-content {
    background-position: -600px 0;

}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
    background-position: 0 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
    background-position: -200px 0;
}

input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
    background-position: -400px 0;
}

input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
    background-position: -600px 0;
}

input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
    background-position: -800px 0;
}

input.sp-selector-6:checked ~ .sp-content .sp-parallax-bg {
    background-position: -1000px 0;
}

input.sp-selector-6:checked ~ .sp-content .sp-parallax-bg {
    background-position: -1200px 0;
}

.sp-slider {
    position: relative;
	left: 0;
    width: 700%;
	height: 100%;
	list-style: none;
    margin: 0;
	padding: 0;
    -webkit-transition: left ease-in 0.8s;
    -moz-transition: left ease-in 0.8s;
    -o-transition: left ease-in 0.8s;
    -ms-transition: left ease-in 0.8s;
    transition: left ease-in 0.8s;
}

.sp-slider > li {
	color: #fff;
	width: 20%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
	padding: 0 60px;
    float: left;
	text-align: center;
	opacity: 0.4;
    -webkit-transition: opacity ease-in 0.4s 0.8s;
    -moz-transition: opacity ease-in 0.4s 0.8s;
    -o-transition: opacity ease-in 0.4s 0.8s;
    -ms-transition: opacity ease-in 0.4s 0.8s;
    transition: opacity ease-in 0.4s 0.8s;
}
.sp-slider > li img{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
	padding: 40px 0 50px 0;
	max-height: 100%;
	max-width: 100%;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider {
    left: 0;
}

input.sp-selector-2:checked ~ .sp-content .sp-slider {
    left: -100%;
}

input.sp-selector-3:checked ~ .sp-content .sp-slider {
    left: -200%;
}

input.sp-selector-4:checked ~ .sp-content .sp-slider {
    left: -300%;
}

input.sp-selector-5:checked ~ .sp-content .sp-slider {
    left: -400%;
}

input.sp-selector-6:checked ~ .sp-content .sp-slider {
    left: -500%;
}

input.sp-selector-7:checked ~ .sp-content .sp-slider {
    left: -600%;
}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5),
input.sp-selector-6:checked ~ .sp-content .sp-slider > li:nth-child(6),
input.sp-selector-7:checked ~ .sp-content .sp-slider > li:nth-child(7),
{
	opacity: 1;
}
@media screen and (max-width: 840px){
	.sp-slideshow { height: 345px; }
}
@media screen and (max-width: 680px){
	.sp-slideshow { height: 285px; }
}
@media screen and (max-width: 560px){
	.sp-slideshow { height: 235px; }
}
@media screen and (max-width: 320px){
	.sp-slideshow { height: 158px; }
}