@font-face {
  font-family: 'VollkornItalic';
  src: url('Vollkorn-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face{font-family:'4';src:url('OpenSans-Light.ttf')}
@font-face{font-family:'5';src:url('OpenSans-CondLight.ttf')}

* { -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { height: 100%; }
body
{
  background-color:#BCBFA3;
  color: white;
  font-family: 'Comfortaa', cursive;
  margin: 0;
}


 .fotofrancesco
{
 width:233px;
 }

.tabella
{
	width:940px;
 border-spacing: 20px;
    border-collapse: separate;

}


.piccolo
{
  color: white;
  font-family: 'Comfortaa', cursive;
  font-size:17px;
}

a{outline:none}

.split-20{ float: left; width: 20%; }
.split-25{ float: left; width: 25%; }
.split-50{ float: left; width: 50%; }
.clearboth { display: block; clear: both; }

.section.c2 {
	background-color: #040203;
}
.section.c3 { background-color: #F7F7F7; }
.section.c4 { background-color: #E39B7D; }
.section.c5 { background-color: #6E6460; }

.section.i1,
.section.i2,
.section.i3,
.section.i4,
.section.i5,
.section.i6, .section.i7
{
  background-attachment: fixed;
  background-position: center 50%;
  background-size: cover;
  font-family:'4';
  font-size: 28px;
}
.section.i1 { background-image: url(04.jpg); }
.section.i2 { background-image: url(03.jpg); }
.section.i3 { background-image: url(02.jpg); }
.section.i4 { background-image: url(01.jpg); }

.section.i5 { background-image: url(05.jpg); }

.section.i6 { background-image: url(06.jpg); }

.section.i7 { background-image: url(07.jpg); }

.full-height { height: 100%; }
.contatti { height: 100%; }
.height-80 { height: 90%; }
.box
{
  height: 100%;
  padding: 1px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Text box */
.textbox-1
{
  margin-top: -36px;
  top: 50%;
  position: absolute;
  text-align: center;
  width: 100%;
  color: white;
  font-family: 'Comfortaa', cursive;
    font-size: 120px;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
}

.textbox-small
{
  margin-top: -6px;
  top: 50%;
  position: absolute;
  text-align: center;
  width: 100%;
  color: white;
  font-family: 'Comfortaa', cursive;
    font-size: 40px;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
}

.textbox-smallb
{
  margin-top: -6px;
  top: 20%;
  position: absolute;
  text-align: center;
  width: 100%;
  color: white;
  font-family: 'Comfortaa', cursive;
    font-size: 40px;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
}

/* Slide 1 */
#header-group
{
  margin-top: -130px;
  position: relative;
  top: 50%;
}
.page-title
{
font-family: 'Comfortaa', cursive;
  font-size: 120px;
  text-align: center;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
}
.page-brief
{font-family: 'Comfortaa', cursive;
  text-align: center;
  text-shadow:1px 1px 0 rgba(0,0,0,.3);
}
.demo-tooltip
{
  left: 428px;
  top: 310px;
}
.demo-tooltip .html5tooltip-pointer-bottom
{
  left: 47px;
  top: -13px;
}

/* Slide 2 */
#demo-group
{
  margin: -30px auto 0;
  position: relative;
  top: 50%;
  text-align: center;
  width: 490px;
}
#demo-group > .button1,
#demo-group > .textfield
{
  float: left;
  margin: 0 10px;
}
.button1
{
  background-color: #222;
  cursor: pointer;
  margin: 0 10px;
  height: 60px;
  width: 60px;
}
.icon-cloud
{
  background-image: url('Cloud-32.png');
  background-position: center center;
  background-repeat: no-repeat;
}
.icon-coffee
{
  background-image: url('Mug-32.png');
  background-position: 11px center;
  background-repeat: no-repeat;
}
.icon-trash
{
  background-image: url('Garbage-Open-32.png');
  background-position: 17px center;
  background-repeat: no-repeat;
}
.textfield
{
  background-color: white;
  color: black;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  text-align: left;
  width: 230px;
}
.anim-text1,
.demo-text1
{
  font-size: 32px;
  margin-top: -24px;
  position: absolute;
  text-align: center;
  top: 25%;
  width: 100%;
}
.anim-text2,
.demo-text2
{
  bottom: 25%;
  font-size: 18px;
  margin-bottom: -24px;
  position: absolute;
  text-align: center;
  width: 100%;
}

/* Slide animation */
#anim-group
{
  margin: -50px auto 0;
  position: relative;
  top: 50%;
  width: 800px;
}
.anim-item
{
  border-radius: 50px;
  background: white;
  color: #666;
  cursor: default;
  font-family: 'VollkornItalic';
  font-size: 24px;
  float: left;
  line-height: 100px;
  margin: 0 30px;
  position: relative;
  text-align: center;
  width: 100px;
}
.anim-item.item1
{
  top: 0;
}
.anim-item.item2
{
  top: -25px;
}
.anim-item.item3
{
  top: 0;
}
.anim-item.item4
{
  top: 25px;
}
.anim-item.item5
{
  top: 0;
}


/* Slide colors */
#customization-group
{
  margin: 0 auto 80px;
  max-width:980px;
}
#customization-group>div{
  min-width:220px;
}
.customization-text1
{
  color: #222222;
  font-size: 32px;
  margin: 80px 0 40px;
  text-align: center;
}
#customization-group .html5tooltip-bottom
{
  margin: 20px auto;
  position: relative;
  text-align: center;
  width: 200px;
}

/* Slide last */
#get-group
{
  margin-top: -100px;
  position: relative;
  top: 50%;
}
.get-github
{
  background-position: center 20px;
  background-repeat: no-repeat;
  color: white;
  display: block;
  font-size: 24px;
  margin: 0 auto;
  padding-top: 160px;
  text-align: center;
  text-decoration: none;
  width: 200px;
}
.get-github { background-image: url('GitHub-Mark-Light-120px-plus.png');}
#compat-group
{
  bottom: 20px;
  left: 50%;
  margin-left: -290px;
  position: absolute;
  width: 580px;
}
.compat-chrome,
.compat-firefox,
.compat-opera,
.compat-ie,
.compat-safari
{
  background-position: 0 0;
  background-repeat: no-repeat;
  color: white;
  font-size: 24px;
  margin: 0 auto;
  padding-top: 48px;
  text-align: center;
  width: 48px;
}
.compat-chrome { background-image: url('Google Chrome-48.png'); }
.compat-firefox { background-image: url('Firefox-48.png'); }
.compat-opera { background-image: url('Opera-48.png'); }
.compat-ie { background-image: url('Internet Explorer-48.png'); }
.compat-safari { background-image: url('safari48.png'); }

/* Colors */
.daffodil .html5tooltip-pointer { border-color: rgba(255, 230, 23, 1); }
.daffodil { background-color: rgba(255, 230, 23, 1); }
.daisy .html5tooltip-pointer { border-color: rgba(250, 211, 28, 1); }
.daisy { background-color: rgba(250, 211, 28, 1); }
.mustard .html5tooltip-pointer { border-color: rgba(253, 183, 23, 1); }
.mustard { background-color: rgba(253, 183, 23, 1); }
.citrus-zest .html5tooltip-pointer { border-color: rgba(250, 170, 33, 1); }
.citrus-zest { background-color: rgba(250, 170, 33, 1); }
.pumpkin .html5tooltip-pointer { border-color: rgba(241, 117, 63, 1); }
.pumpkin { background-color: rgba(241, 117, 63, 1); }
.tangerine .html5tooltip-pointer { border-color: rgba(237, 87, 36, 1); }
.tangerine { background-color: rgba(237, 87, 36, 1); }
.salmon .html5tooltip-pointer { border-color: rgba(240, 70, 57, 1); }
.salmon { background-color: rgba(240, 70, 57, 1); }
.persimmon .html5tooltip-pointer { border-color: rgba(234, 40, 48, 1); }
.persimmon { background-color: rgba(234, 40, 48, 1); }
.rouge .html5tooltip-pointer { border-color: rgba(188, 35, 38, 1); }
.rouge { background-color: rgba(188, 35, 38, 1); }
.scarlet .html5tooltip-pointer { border-color: rgba(140, 12, 3, 1); }
.scarlet { background-color: rgba(140, 12, 3, 1); }
.hot-pink .html5tooltip-pointer { border-color: rgba(229, 24, 93, 1); }
.hot-pink { background-color: rgba(229, 24, 93, 1); }
.princess .html5tooltip-pointer { border-color: rgba(243, 132, 174, 1); }
.princess { background-color: rgba(243, 132, 174, 1); }
.petal .html5tooltip-pointer { border-color: rgba(250, 198, 210, 1); }
.petal { background-color: rgba(250, 198, 210, 1); }
.lilac .html5tooltip-pointer { border-color: rgba(178, 150, 199, 1); }
.lilac { background-color: rgba(178, 150, 199, 1); }
.lavender .html5tooltip-pointer { border-color: rgba(123, 103, 174, 1); }
.lavender { background-color: rgba(123, 103, 174, 1); }
.violet .html5tooltip-pointer { border-color: rgba(95, 53, 119, 1); }
.violet { background-color: rgba(95, 53, 119, 1); }
.cloud .html5tooltip-pointer { border-color: rgba(195, 222, 241, 1); }
.cloud { background-color: rgba(195, 222, 241, 1); }
.dream .html5tooltip-pointer { border-color: rgba(85, 190, 237, 1); }
.dream { background-color: rgba(85, 190, 237, 1); }
.gulf .html5tooltip-pointer { border-color: rgba(49, 168, 224, 1); }
.gulf { background-color: rgba(49, 168, 224, 1); }
.turquoise .html5tooltip-pointer { border-color: rgba(35, 138, 204, 1); }
.turquoise { background-color: rgba(35, 138, 204, 1); }
.sky .html5tooltip-pointer { border-color: rgba(13, 96, 174, 1); }
.sky { background-color: rgba(13, 96, 174, 1); }
.indigo .html5tooltip-pointer { border-color: rgba(20, 59, 134, 1); }
.indigo { background-color: rgba(20, 59, 134, 1); }
.navy .html5tooltip-pointer { border-color: rgba(0, 27, 74, 1); }
.navy { background-color: rgba(0, 27, 74, 1); }
.sea-foam .html5tooltip-pointer { border-color: rgba(125, 205, 194, 1); }
.sea-foam { background-color: rgba(125, 205, 194, 1); }
.teal .html5tooltip-pointer { border-color: rgba(0, 168, 168, 1); }
.teal { background-color: rgba(0, 168, 168, 1); }
.peacock .html5tooltip-pointer { border-color: rgba(18, 149, 159, 1); }
.peacock { background-color: rgba(18, 149, 159, 1); }
.ceadon .html5tooltip-pointer { border-color: rgba(193, 209, 138, 1); }
.ceadon { background-color: rgba(193, 209, 138, 1); }
.olive .html5tooltip-pointer { border-color: rgba(121, 145, 85, 1); }
.olive { background-color: rgba(121, 145, 85, 1); }
.bamboo .html5tooltip-pointer { border-color: rgba(128, 188, 66, 1); }
.bamboo { background-color: rgba(128, 188, 66, 1); }
.grass .html5tooltip-pointer { border-color: rgba(74, 160, 63, 1); }
.grass { background-color: rgba(74, 160, 63, 1); }
.kelly .html5tooltip-pointer { border-color: rgba(22, 136, 74, 1); }
.kelly { background-color: rgba(22, 136, 74, 1); }
.forrest .html5tooltip-pointer { border-color: rgba(0, 63, 46, 1); }
.forrest { background-color: rgba(0, 63, 46, 1); }
.chocolate .html5tooltip-pointer { border-color: rgba(56, 30, 17, 1); }
.chocolate { background-color: rgba(56, 30, 17, 1); }
.terra-cotta .html5tooltip-pointer { border-color: rgba(192, 92, 32, 1); }
.terra-cotta { background-color: rgba(192, 92, 32, 1); }
.camel .html5tooltip-pointer { border-color: rgba(191, 155, 107, 1); }
.camel { background-color: rgba(191, 155, 107, 1); }
.linen .html5tooltip-pointer { border-color: rgba(233, 212, 167, 1); }
.linen { background-color: rgba(233, 212, 167, 1); }
.stone .html5tooltip-pointer { border-color: rgba(231, 230, 225, 1); }
.stone { background-color: rgba(231, 230, 225, 1); }
.smoke .html5tooltip-pointer { border-color: rgba(207, 208, 210, 1); }
.smoke { background-color: rgba(207, 208, 210, 1); }
.steel .html5tooltip-pointer { border-color: rgba(138, 139, 143, 1); }
.steel { background-color: rgba(138, 139, 143, 1); }
.slate .html5tooltip-pointer { border-color: rgba(119, 133, 144, 1); }
.slate { background-color: rgba(119, 133, 144, 1); }
.charcoal .html5tooltip-pointer { border-color: rgba(71, 77, 77, 1); }
.charcoal { background-color: rgba(71, 77, 77, 1); }
.black .html5tooltip-pointer { border-color: rgba(5, 6, 8, 1); }
.black { background-color: rgba(5, 6, 8, 1); }
.white .html5tooltip-pointer { border-color: rgba(255, 255, 255, 1); }
.white { background-color: rgba(255, 255, 255, 1); }
.metalic-silver .html5tooltip-pointer { border-color: rgba(152, 162, 171, 1); }
.metalic-silver { background-color: rgba(152, 162, 171, 1); }
.metalic-gold .html5tooltip-pointer { border-color: rgba(159, 135, 89, 1); }
.metalic-gold { background-color: rgba(159, 135, 89, 1); }
.metalic-copper .html5tooltip-pointer { border-color: rgba(140, 102, 65, 1); }
.metalic-copper { background-color: rgba(140, 102, 65, 1); }

.html5tooltip-box{
  font-family:'4';
  font-size:12px;
}


@media (max-width: 767px ) {
	
	.piccolo
{
  color: white;
  font-family: 'Comfortaa', cursive;
  font-size:13px;
}
	
	
   .page-title {font-family: 'Comfortaa', cursive;
  font-size: 200%;
  text-align: center;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);}
 
 
 .textfield
{
  background-color: white;
  color: black;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}
.anim-text1,
.demo-text1
{
  font-size: 130%;
  margin-top: -24px;
  position: absolute;
  text-align: center;
  top: 25%;
  width: 100%;
}
.anim-text2,
.demo-text2
{
  bottom: 25%;
  font-size: 115%;
  margin-bottom: -24px;
  position: absolute;
  text-align: center;
  width: 100%;
}

/* Slide animation */
#anim-group
{
  margin: -50px auto 0;
  position: relative;
  top: 50%;
  width: 100%;
}
.anim-item
{
  border-radius: 20px;
  background: white;
  color: #666;
  cursor: default;
  font-family: 'VollkornItalic';
  font-size: 105%;
  float: left;
  line-height: 30px;
  margin: 0 10px;
  position: relative;
  text-align: center;
  width: 100%;
}
.anim-item.item1
{
  top: 0;
}
.anim-item.item2
{
  top: -25px;
}
.anim-item.item3
{
  top: 0;
}
.anim-item.item4
{
  top: 25px;
}
.anim-item.item5
{
  top: 0;
}
 
  /* Text box */
.textbox-1
{
  margin-top: -36px;
  top: 50%;
  position: absolute;
  text-align: center;
  width: 100%;
  color: white;
  font-family: 'Comfortaa', cursive;
    font-size: 120%;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
}

.textbox-small
{
  margin-top: -6px;
  top: 50%;
  position: absolute;
  text-align: center;
  width: 100%;
  color: white;
  font-family: 'Comfortaa', cursive;
    font-size: 110%;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
}

.textbox-smallb
{
  margin-top: -6px;
  top: 20%;
  position: absolute;
  text-align: center;
  width: 100%;
  color: white;
  font-family: 'Comfortaa', cursive;
    font-size: 110%;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
}
  
  
   
 .section.i1,
.section.i2,
.section.i3,
.section.i4,
.section.i5,
.section.i6, .section.i7
{
  background-attachment: fixed;
  background-position: center 50%;
  background-size: 150%;
  font-family:'4';
  font-size: 110%;
}
.section.i1 { background-image: url(04.jpg); }
.section.i2 { background-image: url(03.jpg); }
.section.i3 { background-image: url(02.jpg); }
.section.i4 { background-image: url(01.jpg); }

.section.i5 { background-image: url(05.jpg); }

.section.i6 { background-image: url(06.jpg); }

.section.i7 { background-image: url(07.jpg); }

.full-height, .contatti { height: 100%; }
.height-80 { height: 90%; }
.box
{
  height: 100%;
  padding: 1px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}
  .tabella
{
	width:90%;
	 border-spacing: 3px;
    border-collapse: separate;
}
 
 .fotofrancesco
{
 width:100px;
 }
 
}



@media only screen and (max-device-width: 480px) {
	
	.piccolo
{
  color: white;
  font-family: 'Comfortaa', cursive;
  font-size:10px;
}


.page-title {font-family: 'Comfortaa', cursive;
  font-size: 120%;
  text-align: center;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);}


 
 .textfield
{
  background-color: white;
  color: black;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}
.anim-text1,
.demo-text1
{
  font-size: 150%;
  margin-top: -24px;
  position: absolute;
  text-align: center;
  top: 25px;
  width: 100%;
  bottom:55px;
}
.anim-text2,
.demo-text2
{
  bottom: 25%;
  font-size: 115%;
  margin-bottom: -24px;
  position: absolute;
  text-align: center;
  width: 100%;
}

/* Slide animation */
#anim-group
{
  margin: -50px auto 0;
  position: relative;
  top: 50%;
  width: 100%;
}
.anim-item
{
  border-radius: 20px;
  background: white;
  color: #666;
  cursor: default;
  font-family: 'VollkornItalic';
  font-size: 105%;
  float: left;
  line-height: 30px;
  margin: 0 10px;
  position: relative;
  text-align: center;
  width: 100%;
}
.anim-item.item1
{
  top: 0;
}
.anim-item.item2
{
  top: -25px;
}
.anim-item.item3
{
  top: 0;
}
.anim-item.item4
{
  top: 25px;
}
.anim-item.item5
{
  top: 0;
}
 
 /* Text box */
.textbox-1
{
  margin-top: -36px;
  top: 50%;
  position: absolute;
  text-align: center;
  width: 100%;
  color: white;
  font-family: 'Comfortaa', cursive;
    font-size: 140%;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
}

.textbox-small
{
  margin-top: -6px;
  top: 50%;
  position: absolute;
  text-align: center;
  width: 100%;
  color: white;
  font-family: 'Comfortaa', cursive;
    font-size: 110%;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
}

.textbox-smallb
{
  margin-top: -6px;
  top: 20%;
  position: absolute;
  text-align: center;
  width: 100%;
  color: white;
  font-family: 'Comfortaa', cursive;
    font-size: 110%;
  text-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
}
 
 
 
 
 .section.i1,
.section.i2,
.section.i3,
.section.i4,
.section.i5,
.section.i6, .section.i7
{
	background-attachment: scroll;
	background-position: center 50%;
	background-size: 150%;
	font-family: '4';
	font-size: 110%;
}
.section.i1 { background-image: url(mobile/04.jpg); }
.section.i2 { background-image: url(mobile/03.jpg); }
.section.i3 { background-image: url(mobile/02.jpg); }
.section.i4 { background-image: url(mobile/01.jpg); }

.section.i5 { background-image: url(mobile/05.jpg); }

.section.i6 { background-image: url(mobile/06.jpg); }

.section.i7 { background-image: url(mobile/07.jpg); }

.full-height { height: 100%; }

.contatti{ height: 500px; }
.height-80 { height: 90%; }
.box
{
  height: 100%;
  padding: 1px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}
 
 
 .tabella
{
	width:100%;  border-spacing: 10px;
    border-collapse: separate;
}
 
  .fotofrancesco
{
 width:100px;
 }
 
 
 
 
 
 

	}