@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,400italic,700italic);

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after{content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

/* FONTS */
@font-face { font-family: "GothamLight"; 
  src: url("../fonts/eot/gotham-light-webfont.eot");  
  src: local("GothamLight"),url("../fonts/gotham-light-webfont.woff") format("woff"), url("../fonts/gotham-light-webfont.ttf") format("truetype"); 
  font-weight: 100; 
  font-style: normal;
}
@font-face { font-family: "GothamBook"; 
  src: url("../fonts/eot/gotham-book-webfont.eot");  
  src: local("GothamBook"), url("../fonts/gotham-book-webfont.woff") format("woff"),url("../fonts/gotham-book-webfont.ttf") format("truetype");
  font-weight: 300; 
  font-style: normal;
}
@font-face { font-family: "GothamMedium"; 
  src: url("../fonts/eot/gotham-medium-webfont.eot");  
  src: local("GothamMedium"),url("../fonts/gotham-medium-webfont.woff") format("woff"), url("../fonts/gotham-medium-webfont.ttf") format("truetype");
  font-weight: 400; 
  font-style: normal;
}
@font-face { font-family: "GothamBlack"; 
  src: url("../fonts/eot/gotham-black-webfont.eot");  
  src: local("GothamBlack"),url("../fonts/gotham-black-webfont.woff") format("woff"), url("../fonts/gotham-black-webfont.ttf") format("truetype");
  font-weight: 100; 
  font-style: normal;
}
@font-face { font-family: "ACaslonRegular"; 
  src: local("ACaslonRegular"), url("../fonts/ACaslonPro-Regular-webfont.woff") format("woff"),url("../fonts/ACaslonPro-Regular.otf") format("opentype");
  font-weight: 400; 
  font-style: normal;
}
@font-face { font-family: "ACaslonBold"; 
  src: local("ACaslonBold"),url("../fonts/ACaslonPro-Bold-webfont.woff") format("woff"), url("../fonts/ACaslonPro-Bold.otf") format("opentype");
  font-weight: 800; 
  font-style: normal;
}

html { 
  background: url('https://old.meblabs.com/img/bg.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin:0;padding:0;
  overflow-x:hidden;
}

body{margin:0;padding:0;
 	  font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size:24px;line-height:28px;
    color:#6D6E70;
    overflow-x:hidden;overflow-y:scroll;-ms-overflow-style: -ms-autohiding-scrollbar;
}

a{font-size:24px;line-height:28px;color:#6D6E70;text-decoration:underline;}
a:hover{color:#221F1F;}

#container{width:100%;margin:0 auto;}
.box{position:relative;margin:0 auto;}

#nav-lang{position:absolute;top:5px;right:5px;overflow: hidden;}
#nav-lang a{float:left;padding:5px 10px;font-size:12px;line-height:12px;text-align: left;font-family: GothamBook; font-weight:300;color:#6d6e70;text-decoration: none;margin-left:5px;} 

/*DREAM*/
#home-box.box{height:260px;width:300px;}
#home-box img{height:180px;position:absolute;left:20px;top:40px}
#home-box h2{font-size:16px;line-height:16px;text-align: right;font-family: GothamBlack; font-weight:800;position:absolute;top:102px;right:36px;width:180px;height:22px;color: #6d6e70;}
#home-box h1{font-size:42px;line-height:62px;text-align: right;font-family: GothamBlack; font-weight:800; position:absolute;top:110px;right:30px;width:180px;height:68px;color: #6d6e70;}
#home-box h3{font-size:22px;line-height:22px;text-align: center;font-family: GothamBlack; font-weight:800;position:absolute;top:170px;right:30px;width:180px;height:30px;color: #947fa5;}

/*DREAM2BUSINESS*/
#dream-left-box.box{height:209px;width:300px;margin-top:0;max-width:480px;background-image: url('../img/mobile_dream.svg');
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
transition:margin-top 0.5s; 
-moz-transition:margin-top 0.5s;
-webkit-transition:margin-top 0.5s;
}
body.dreamToBusiness #dream-left-box.box{margin-top:10px;}
#dream-left-box h1{font-size:32px;line-height:32px;text-align: right;font-family: GothamBlack; font-weight:800;position:absolute;top:14px;left:20px;color:#FFF;text-align:left;}
#dream-left-box p{font-size:14px;line-height:16px;text-align: left;font-family: GothamBook; font-weight:300;position:absolute;top:85px;left:20px;color:#FFF;width:300px;}

#business-right-box.box{height:209px;width:300px;margin-top:20px;background-image: url('../img/mobile_business.svg');
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
transition:margin-top 0.5s; 
-moz-transition:margin-top 0.5s;
-webkit-transition:margin-top 0.5s;
}
body.dreamToBusiness #business-right-box.box{margin-top:-5px;}
#business-right-box img{width:100%;position:absolute;top:0;left:0;}
#business-right-box h1{font-size:32px;line-height:32px;text-align: right;font-family: GothamBlack; font-weight:800;position:absolute;top:16px;right:20px;text-align:right;color:#FFF;}
#business-right-box p{font-size:14px;line-height:16px;text-align: right;font-family: GothamBook; font-weight:300;position:absolute;top:85px;right:20px;color:#FFF;width:300px;}

#dream-seam-box{position:absolute;top:465px;height:20px;background-image: url('../img/mobile_seam.svg');left:50%;margin-left:-149px;width:0;
transition:width 0.1s; 
-moz-transition:width 0.1s;
-webkit-transition:width 0.1s;
}
body.dreamToBusiness #dream-seam-box{width:293px;
transition:width 0.5s 0.5s; 
-moz-transition:width 0.5s 0.5s;
-webkit-transition:width 0.5s 0.5s;
}

#dream-intermediary span{font-family:ACaslonBold; font-weight:800;}
#dream-intermediary{color:#6d6e70;font-size:16px;line-height:16px;text-align: center;font-family:ACaslonRegular; font-weight:400;text-align:center;opacity:0;width:280px;margin:30px auto;
-webkit-transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
transition:opacity 0.5s;  
}
body.intermediary #dream-intermediary{opacity:1;}

/*LOGO*/
#logo.box{width:240px;height:282px;margin-bottom:40px;}
#logo.box img{width:100%;}

/*INFOGRAPHICS*/
#infographic-box.box{width:100%;margin-bottom:40px;max-width:768px;}
#infographic-box img{width:100%;}

/*PROJECTS*/
#projects-box.box{width:290px;padding:0 15px;}
#projects-box h1{font-family:GothamBlack;font-size:32px;line-height:32px;}
#projects-box .text{font-family:GothamBook;font-size:14px;line-height:14px;padding-top:10px;}

#projects.box{overflow:hidden;margin-bottom:60px;width:290px;}
#projects a,#projects div{float:left;width:90px;height:90px;margin:10px 10px 0 0;background-repeat:no-repeat;background-position:center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#projects a.noMargin,#projects div.noMargin{margin-right: 0;}

#projects div#bo{background-image: url('../projects/bo.png');}
#projects a#brainfitness{background-image: url('../projects/brainfitness.png');}
#projects a#ilgusto{background-image: url('../projects/ilgustosenzatempo.png');}
#projects div#sevenandbrand{background-image: url('../projects/sevenandbrand.png');}
#projects a#trading{background-image: url('../projects/trading.png')}

#projects a#gibamvision{background-image: url('../projects/gibamvision.png');}
#projects a#progettocrescere{background-image: url('../projects/progettocrescere.png?v=1');}
#projects a#anidridedesign{background-image: url('../projects/anidridedesign.png');}
#projects a#cittatube{background-image: url('../projects/cittatube.png?v=1');}
#projects a#kukuweb{background-image: url('../projects/kukuweb.png');}

#projects a#blackfin{background-image: url('../projects/blackfin.png');}
#projects a#gibam{background-image: url('../projects/gibam.png');}
#projects a#appuntuale{background-image: url('../projects/appuntuale.png');}
#projects a#misterko{background-image: url('../projects/misterko.png');}

/*CONTACTS*/
#contacts-box.box{width:290px;padding:0 15px;}
#contacts-box h3{font-family:ACaslonRegular;font-size:32px;line-height:32px;}
#contacts-box h2{font-family:ACaslonBold;font-size:26px;line-height:26px;padding-left:40px;}

#contacts.box{overflow:hidden;margin-bottom:40px;width:290px;}
#contacts .c-box{text-align: center;}
#contacts .c-item{width:90px;height:90px;margin:10px 10px 0 0;position:relative;display: inline-block;}
#contacts .c-item.noMargin{margin-right:0;}
#contacts #c1{background:url('../img/contact.svg') #CC8463 no-repeat center center;background-size:cover;}
#contacts #c1 a{position:absolute;top:75px;right:0;left:0;text-align:center;font-size:8px;line-height:8px;font-family: GothamBook; font-weight:300;color:#333;background:transparent;outline:none;text-decoration:none;}
#contacts #c2{background:url('../img/phone.svg') #80B7AF no-repeat center center;background-size:cover;}
#contacts #c2 a{position:absolute;top:75px;right:0;left:0;text-align:center;font-size:8px;line-height:8px;font-family: GothamBook; font-weight:300;color:#333;background:transparent;outline:none;text-decoration:none;}
#contacts #c3 a{background:url('../img/fb.svg') #947fa5 no-repeat center center;background-size:cover;display:block;width:90px;height:90px;}
#contacts #c1 a:hover,#contacts #c2 a:hover{color:#000;}

/*FOOTER*/
#footer.box{line-height:12px;font-size:10px;color:#6d6e70;margin:30px;text-align: center;}
#footer a{line-height:12px;font-size:10px;color:#6d6e70;}

.privacy{color:#333;padding:40px 10px 20px 10px;margin:0 auto;max-width: 996px;font-size:0.8em;text-align: justify;}
.privacy h2,.privacy p,.privacy li,.privacy a{color:#333;}
.privacy h2{margin-top:20px;font-size: 1em;font-weight: 400;}
.privacy a{text-decoration: underline;font-size:1em;}
.privacy b{font-weight: 400;}
.privacy ol,.privacy ul{margin:0 0 0 10px;padding: 0;}
.privacy ol li{margin-left:24px;list-style:decimal;}
.privacy ul li{margin-left:24px;list-style:disc;}

.company{font-size: 0.8em;line-height: 1.2;width: 100%;margin:0;}

@media screen and (min-width: 480px) {
  #home-box.box{height:340px;width:480px;}
  #home-box img{height:250px;}
  #home-box h2{font-size:22px;line-height:22px;top:80px;right:62px;width:250px;height:22px;}
  #home-box h1{font-size:68px;line-height:68px;top:100px;right:62px;width:250px;height:68px;}
  #home-box h3{font-size:30px;line-height:30px;top:200px;right:62px;width:250px;height:30px;}  

  /*DREAM2BUSINESS*/
  #dream-left-box.box{height:290px;width:420px;}
  #dream-left-box h1{font-size:42px;line-height:42px;text-align: right;font-family: GothamBlack; font-weight:800;position:absolute;top:16px;left:30px;color:#FFF;text-align:left;}
  #dream-left-box p{font-size:22px;line-height:24px;text-align: left;font-family: GothamBook; font-weight:300;position:absolute;top:130px;left:30px;color:#FFF;width:440px;}

  #business-right-box.box{height:290px;width:420px;}
  #business-right-box h1{font-size:42px;line-height:42px;text-align: right;font-family: GothamBlack; font-weight:800;position:absolute;top:20px;right:30px;text-align:right;color:#FFF;}
  #business-right-box p{font-size:22px;line-height:24px;text-align: right;font-family: GothamBook; font-weight:300;position:absolute;top:130px;right:30px;color:#FFF;width:440px;}

  #dream-seam-box{top:628px;margin-left:-205px;}
  body.dreamToBusiness #dream-seam-box{width:405px;}

  #dream-intermediary{width:400px;font-size:24px;line-height:24px;}

  /*LOGO*/
  #logo.box{width:280px;height:330px;margin-bottom:40px;}

  /*PROJECTS*/
  #projects-box.box{width:480px;}
  #projects-box h1{font-size:42px;line-height: 42px;}
  #projects.box{padding:0;margin:0 auto 60px auto;width:480px;}
  #projects a,#projects div{width:140px;height:140px;margin:30px 30px 0 0;}
  #projects a.noMargin,#projects div.noMargin{margin-right: 0;}

  /*CONTACTS*/
  #contacts-box.box{width:480px;}
  #contacts-box h3{font-size:42px;line-height:42px;}
  #contacts-box h2{font-size:32px;line-height:32px;}
  #contacts.box{padding:0;margin:0 auto 40px auto;width:480px;}
  #contacts .c-item{width:140px;height:140px;margin:30px 30px 0 0;}
  #contacts #c3 a{width:140px;;height:140px;;}
  #contacts #c1 a{top:120px;font-size:12px;line-height:12px;}
  #contacts #c2 a{top:120px;font-size:12px;line-height:12px;}
} 
@media screen and (min-width: 768px) {
  #home-box.box{margin-top:50px;}

  /*DREAM2BUSINESS*/
  .dream-business-box{width:768px;margin:0 auto;overflow: hidden;position: relative;height:230px;}
  #dream-left-box.box{position:absolute;top:0;left:0;height:229px;width:360px;margin:0;background-image: url('../img/dream.svg');
  transition:left 0.5s; 
  -moz-transition:left 0.5s;
  -webkit-transition:left 0.5s;
  }
  #dream-left-box h1{font-size:42px;line-height:42px;text-align: right;font-family: GothamBlack; font-weight:800;position:absolute;top:10px;left:10px;color:#FFF;text-align:left;}
  #dream-left-box p{font-size:18px;line-height:20px;text-align: left;font-family: GothamBook; font-weight:300;position:absolute;top:100px;left:10px;color:#FFF;width:300px;}
  
  #business-right-box.box{position:absolute;top:0;right:0;height:229px;width:360px;margin:0;background-image: url('../img/business.svg');  
  transition:right 0.5s; 
  -moz-transition:right 0.5s;
  -webkit-transition:right 0.5s;
  }
  #business-right-box h1{font-size:42px;line-height:42px;text-align: right;font-family: GothamBlack; font-weight:800;position:absolute;top:10px;right:10px;text-align:right;color:#FFF;}
  #business-right-box p{font-size:18px;line-height:20px;text-align: right;font-family: GothamBook; font-weight:300;position:absolute;top:100px;right:10px;color:#FFF;width:300px;}
  
  body.dreamToBusiness #dream-left-box.box{left:25px;margin-top:0;}
  body.dreamToBusiness #business-right-box.box{right:25px;margin-top:0;}

  #dream-seam-box{position:absolute;top:392px;width:20px;background-image: url('../img/mobile_dream_seam_2.svg');left:50%;margin-left:-10px;height:0;
  transition:height 0.1s; 
  -moz-transition:height 0.1s;
  -webkit-transition:height 0.1s;
  }
  body.dreamToBusiness #dream-seam-box{height:224px;width:20px;
  transition:height 0.5s 0.5s; 
  -moz-transition:height 0.5s 0.5s;
  -webkit-transition:height 0.5s 0.5s;
  }


  /*PROJECTS*/
  #projects-box.box{width:768px;}
  #projects.box{width:768px;}
  #projects a,#projects div{width:140px;height:140px;margin:13px 13px 0 0;}
  #projects a.noMargin,#projects div.noMargin{margin-right: 13px;}
  #projects a.noMargin2,#projects div.noMargin2{margin-right:0;}
  
  .company{font-size: 1em;line-height: 1.2;}
}