@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
*{margin:0;padding:0;box-sizing:border-box; transition: .2s ease;}
body {
	font-family: 'Lato', sans-serif;
  font-size:16px;
}
section {
  width:100%;
}
section div {
  position:relative;
  margin: 0 auto;
  width:750px;
}





/*==============================*/
/*---  INTRO   -----------------*/
.intro {
  background:#fff url(../images/bg-ceeme.jpg) repeat-x;
  background-position: center -50px;
  min-height:750px;
}
h1 {
  font-size:0px;
  background:url(../images/ceeme-logo-cor.png) center no-repeat;
  display:inline-block;
  height:100px;
  width:286px;
  margin:80px 0 0 0;
}
.intro h2 {
  text-align:left;
  padding:30px 0 10px;
  font-size:18px;
  font-weight:bold;
}
.intro p {
  text-align:left;
  padding:0px 0 10px;
  font-weight:normal;
}
.mockup {
  float:right;
  display:block;
  width:400px;
  height:380px;
  margin:70px 0 0 50px;
  background-image:url(../images/ceeme-cellphone.png);
  background-size:contain;
  background-repeat: no-repeat;
}
.intro a {
  font-size:0;
  display:block;
  height:49px;
  width:168px;
  margin:15px 0 0 50px;
}
.appstore {
  background:url(../images/appstore.png);
}
.googleplay {
  background:url(../images/googleplay.png);
}
.intro p ~ p {
  font-size:30px;
  text-align:center;
  margin-top:50px;
}
.intro p~p+p {
  font-size:28px;
  font-weight:lighter;
  margin:15px 50px 0;
}


/*==============================*/
/*---  CLIENTS   ---------------*/
.clients {
  text-align:center;
  background:url(../images/clients.png) center top no-repeat;
}
.clients p {
  margin:30px 0 0 0;
  height:180px;
  color:#fff;
  padding:110px 30px 0 0;
  text-transform:uppercase;
  font-size:22px;
}
.clients a {
  display:inline-block;
  height:105px;
  margin:50px 20px 0;
  font-size:0;
}
.bergenelite {
  width:112px;
  background: url(../images/bergenelite.png) no-repeat;
}
.olsvikasen {
  width:270px;
  background: url(../images/olsvikasen.png) no-repeat;
}
.otimosport {
  width:193px;
  background: url(../images/otimosport.png) no-repeat;
}


/*==============================*/
/*---  PRICING   ---------------*/
.pricing {
  background: url(../images/pricing.png) center top no-repeat;
  margin-top:70px;
  height:276px;
}
.pricing span {
  display:none;
}
.pricing p {
  color:#fff;
  font-size:22px;
  text-transform:uppercase;
  text-align:center;
  width:170px;
  padding-top:165px;
  margin-left:45px;
}


/*==============================*/
/*---  FOOTER   ----------------*/
footer {
  background: url(../images/footer-bg.png) center bottom no-repeat;
}
.contact p {
  text-align:left;
  width:300px;
  margin:50px auto;
  font-size:20px;
}
.contact strong {
}
.contact p ~ p {
  color:#fff;
  margin:0;
  padding:0 0 45px 0;
  height:20px;
  text-align:left;
  font-size:20px;
}
.contact a {
  color:#fff;
  text-decoration:none;
  display:block;
  font-weight:lighter;
}
.graphics {
  display:block;
  height:274px;
  background:url(../images/graphics.png) no-repeat top center;
  margin-bottom:19px;
}
.terms {
  margin:0 0 5px 0;
}
.privacy {
  margin:0 0 10px 0;
}
.otimo {
  background:url(../images/otimo-logo.png) no-repeat;
  float:right;
  margin:-80px 10px 0 0;
  height:54px;
  width:63px;
  font-size:0;
}






/*===  TABLET   ================*/
/*------------------------------*/
@media only screen and (max-width:800px) {
  section div { width:500px; }
/*---  INTRO   -----------------*/
  .intro {
    background-position: center top;
    min-height:680px;
  }
  .mockup {
    width:300px;
    height:300px;
    margin-top:-60px;
  }
  h1 {
    background:url(../images/ceeme-logo.png) center no-repeat;
    display:block;
    height:80px;
    width:150px;
    margin:0;
  }
  .intro h2 {
    position:relative;
    top:150px;
    font-size:16px;
    width:230px;
    display:block;
  }
  .intro p {
    position:relative;
    top:160px;
    width:450px;
    display:block;
  }
  .mockup {
    position:absolute;
    margin-left:200px;
  }
  .intro a {
    position:absolute;
    top:90px;
    margin-left:10px;
  }
  .intro a + a {
    top:150px;
  }
  .appstore {
  }
  .googleplay {
  }
  .intro p ~ p {
    background:url(http://www.mdzn.com.br/ceeme/images/icons.png) no-repeat center top;
    display:block;
    width:100%;
    font-size:20px;
    padding-top:80px;
  }
  .intro p~p+p {
    background:none;
    margin:15px 0;
    font-size:22px;
    padding-top:0;
  }
  /*---  CLIENTS   ---------------*/
  .clients {
    background:url(../images/clients2.png) center top no-repeat;
  }
  .clients p {
    padding-top:115px;
    font-size:20px;
  }
  .clients a {
    margin-top:0;
  }
  .bergenelite {
  }
  .olsvikasen {
  }
  .otimosport {
  }
  /*---  PRICING   ---------------*/
  .pricing {
    background: url(../images/pricing2.png) center top no-repeat;
    margin-top:20px;
    height:382px;
  }
  .pricing span {
  }
  .pricing p {
    padding-top: 62px;
    margin-left: 266px;
    line-height: 1em;
  }
  /*---  FOOTER   ----------------*/
  footer {
    background: url(../images/footer-bg.png) center bottom no-repeat;
  }
  .contact p {
  }
  .contact strong {
  }
  .contact p ~ p {
  }
  .contact a {
  }
  .graphics {
    background:url(../images/graphics2.png) no-repeat top center;
    height:260px;
  }
  .terms {
  }
  .privacy {
  }
  .otimo {
  }
}








/*===  CELLPHONE   =============*/
/*------------------------------*/
@media only screen and (max-width:500px) {
  section div { width:320px; }
  
/*---  INTRO   -----------------*/
  .mockup {
    width:128px;
    height:131px;
    margin-top:0;
  }
  h1 {
    width:100%;
    height:75px;
    margin:0;
  }
  .intro h2 {
    width:auto;
    top: 0;
    text-align: center;
    font-size:18px;
  }
  .intro p {
    width: 150px;
    top: 10px;
  }
  .mockup {
    width: 200px;
    height: 200px;
    margin-top: 100px;
    margin-left: 150px;
  }
  .intro a {
    background-size: contain;
    background-repeat: no-repeat;
    width: 140px;
    margin-left: 0;
    top: 285px;
  }
  .intro a + a {
    top: 335px;
  }
  .appstore {
  }
  .googleplay {
  }
  .intro p ~ p {
    background-size:contain;
    padding-top:70px;
    margin-top:130px;
  }
  .intro p~p+p {
  }
  /*---  CLIENTS   ---------------*/
  .clients {
    margin-top:50px;
    background:url(../images/clients3.png) center top no-repeat;
  }
  .clients p {
    padding-top: 63px;
    font-size: 17px;
    padding-left: 37px;
    height:130px;
  }
  .clients a {
  }
  .bergenelite {
  }
  .olsvikasen {
  }
  .otimosport {
  }
  /*---  PRICING   ---------------*/
  .pricing {
    background: url(../images/pricing3.png) center top no-repeat;
    margin-top:50px;
    height:592px;
  }
  .pricing span {
  }
  .pricing p {
    padding-top: 115px;
    margin: 0 auto;
    line-height: 1em;
  }
  /*---  FOOTER   ----------------*/
  footer {
    background: url(../images/footer-bg2.png) center bottom no-repeat;
  }
  .contact p {
    margin: 40px auto;
  }
  .contact strong {
  }
  .contact p ~ p {
  }
  .contact a {
  }
  .graphics {
    background:url(../images/graphics3.png) no-repeat top center;
    height:200px;
  }
  .terms {
  }
  .privacy {
  }
  .otimo {
  }
}




@media only screen and (max-width:400px) {
  section div { width:300px; }
}