/*
    Document   : style
    Created on : 19-05-2014, 15.56.20
    Author     : Innovation Engineering
    Description:
    Purpose of the stylesheet follows.
*/

html,
body {
  height: 100%;
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  background: #fff;
  color: #333;
}
#wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -107px;
  padding: 0 0 107px;
}
.img-iphone {
	background-image:url("../images/app-mockup.png");
	width: 515px;
	height: 465px;
	background-repeat: no-repeat;
	background-position: bottom
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}
h1{
  font-size: 56px;
  margin-bottom: 25px;
}
h2{
  font-size: 36px;
  margin-bottom: 25px;
}
b, strong {
  font-weight: 600;
}
small, .small {
  font-size: 82%;
}
a{
  color: #e34b46;
  -webkit-transition-duration:0.25s;
  transition-duration:0.25s;
  cursor: pointer;
}
a:hover, a:focus{
  color: #fa5858;
  text-decoration: none;
}
.btn, .btn-lg{
  border-radius: 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.btn-lg{
  font-size: 14px;
}
.btn-primary{
  background-color: #6eaf5e;
  border-color: #6eaf5e; 
  transition-duration: 0.25s;
}
.btn-primary:hover, btn-primary:focus, .btn-primary:active{
  background-color: #7dbc6e;
  border-color: #7dbc6e;
}
.btn-default{
  color: #fff;
  background-color: #315c2e;
  border-color: #315c2e;
}
.btn-default:hover, .btn-default:focus{
  color: #fff;
  background-color: #3b6438;
  border-color: #3b6438;
}
#header-wrap{
  background: transparent url(../images/bg-image-hp.jpg) center 0 no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#header{
  padding-top: 40px;
}
#logo{
  background: url(../images/sprite.png) 0 0 no-repeat;
  display: block;
  width: 350px;
  height: 100px;
}
.section{
  padding: 60px 0 80px;
}
#intro-landing {
    color: #fff;
    padding-top: 40px;
    min-height: 505px;
}
#intro-landing h1{
  font-size: 48px;
  font-weight: 300;
}
#intro-landing p{
  font-size: 20px;
  font-weight: 300;
}
#intro-landing .cta{
  padding: 15px 30px;
  margin: 40px 10px 0 0;
}
#features {
  background: transparent url(../images/line.png) center 280px no-repeat;
}
#features h1{
  margin-bottom: 80px;
}
.feature-box{
  margin-bottom: 85px;
}
.feature-box:last-child{
  margin-bottom: 0;
}
.feature-box .feature-icon{
  display: block;
  width: 96px;
  height: 96px;
  background: transparent url(../images/sprite.png) 0 -100px no-repeat;
  margin: 0 auto;
}
.feature-box .feature-icon#percorsi{
  background: transparent url(../images/sprite.png) -115px -100px no-repeat;
}
.feature-box .feature-icon#poi{
  background: transparent url(../images/sprite.png) -230px -100px no-repeat;
}
.feature-box .feature-icon#alert{
  background: transparent url(../images/sprite.png) -345px -100px no-repeat;
}
.feature-box h3{
  color: #35a757;
  margin-top: 5px;
  font-weight: 400;
  font-size: 18px;
}
.thumbnail{
  border: none;
  padding: 0;
  margin-bottom: 0;
  background: none;
}
#color-box .textright{
  padding: 30px 0 40px 45px;
  color: #fff;
  width: 550px;
}
#color-box .textleft{
  padding: 30px 45px 40px 0;
  color: #fff;
  width: 550px;
  margin-right: 0;
  margin-left: auto;
}
#color-box .textright p, #color-box .textleft p{
  font-size: 17px;
  font-weight: 300;
  margin-bottom: 25px;
  line-height: 23px;
}
.arrow-left, .arrow-right{
  display: block;
  width: 55px;
  height: 55px;
  position: absolute;
  background: transparent url(../images/sprite.png) 0 -250px no-repeat;
  -webkit-transition: opacity 1.1s ease;
  transition: opacity 1.1s ease;
  -webkit-transition-duration:1s;
  transition-duration:1s;
  bottom: 40px;
  right: -115px;
  z-index: 2;
}
.arrow-right{
  background: transparent url(../images/sprite.png) -75px -250px no-repeat;
  bottom: 40px;
  left: -115px;
}
.arrow-left.rotate{
  background: transparent url(../images/sprite.png) -75px -250px no-repeat;
  opacity: 0.4;
}
.arrow-right.rotate{
  background: transparent url(../images/sprite.png) 0 -250px no-repeat;
  opacity: 0.4;
}
#poi-details{
  background: #59ab45;
}
#percorsi-details{
  background: #80b4cc;
}
#activity-details{
  background: #315c2e;
}
#segnalazioni-details{
  background: #a99383;
}
#poi-details  .bg-image{
  background: transparent url(../images/POI-screens.jpg) top center no-repeat;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#poi-details .bg-image .image{
  background: transparent url(../images/POI.jpg) top center no-repeat;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-left: -15px;
  margin-right: -15px;
}
#percorsi-details .bg-image{
  background: transparent url(../images/percorsi-screens.jpg) top center no-repeat;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#percorsi-details .bg-image .image{
  background: transparent url(../images/percorsi.jpg) top center no-repeat;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-left: -15px;
  margin-right: -15px;
}
#activity-details .bg-image{
  background: transparent url(../images/user-activity-screens.jpg) top center no-repeat;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#activity-details .bg-image .image{
  background: transparent url(../images/user-activity.jpg) top center no-repeat;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-left: -15px;
  margin-right: -15px;
}
#segnalazioni-details .bg-image{
  background: transparent url(../images/segnalazioni-screens.jpg) top center no-repeat;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#segnalazioni-details .bg-image .image{
  background: transparent url(../images/segnalazioni.png) top center no-repeat;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-left: -15px;
  margin-right: -15px;
}
#poi-details .image, #activity-details .image{
-webkit-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition-duration:0.1s;
transition-duration:0.1s;
}
#percorsi-details .image, #segnalazioni-details .image{
-webkit-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition-duration:0.1s;
transition-duration:0.1s;
}
#poi-details .image.slide, #activity-details .image.slide{
-webkit-transform: translate(-100%,-0px);
transform: translate(-100%,-0px);
-webkit-transition-duration:1.5s;
transition-duration:1.5s;
}
#percorsi-details .image.slide, #segnalazioni-details .image.slide{
-webkit-transform: translate(100%,-0px);
transform: translate(100%,-0px);
-webkit-transition-duration:1.5s;
transition-duration:1.5s;
}
#web-admin .img-thumbnail{
  border-radius: 13px 13px 3px 3px;
  margin-top: 20px;
}
#web-admin h3{
  color: #35a757;
  background: transparent url(../images/sprite.png) -200px -250px no-repeat;
  padding-left: 30px;
  display: inline-block;
  font-size: 20px;
  line-height: 27px;
  font-weight: 400;
  margin-top: 60px;
}
#web-admin #alert-admin h3{
  background: transparent url(../images/sprite.png) -200px -300px no-repeat;
  padding-left: 35px;
}
#web-admin #wall-admin h3{
  background: transparent url(../images/sprite.png) -200px -350px no-repeat;
  padding-left: 35px;
}
#clients{
  background-color: #eff2ef;
}
#clients h3{
  margin-top: 40px;
}
#logo-clients li{
  margin-right: 100px;
}
#logo-clients li:last-child{
  margin-right: 0;
}
#contacts{
  background: #3b8c4f  url(../images/map-bg.png) center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #fff;
}
#contacts h1{
  font-size: 26px;
}
label{
  font-weight: normal;
  font-size: 15px;
}
#contact-form{
  padding-top: 20px;
}
.form-control{
  background: #3b8c4f;
  border-radius: 2px;
  height: 40px;
  border: 2px solid #9dc6a7;
  -webkit-box-shadow:none;
  box-shadow:none;
  color: #fff;
}
.form-control::-webkit-input-placeholder {
  color: #9dc6a7;
}
.form-control:-moz-placeholder {
  color: #9dc6a7;  
}
.form-control::-moz-placeholder {
  color: #9dc6a7;  
}
.form-control:-ms-input-placeholder {  
  color: #9dc6a7;  
}
.form-control:focus {
  background: #39874c;
  border-color:#fff; 
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#footer{
  background: #222222;
  color: #ffffff;
  font-weight: normal;
  font-size: 14px;
  padding: 35px 0;
}
.credits, #footer p{
  line-height: 55px;
  margin-right: 20px;
}
.credits-logo{
  background: transparent url(../images/sprite.png) 0 -400px no-repeat;
  display: inline-block;
  width: 125px;
  height: 55px;
}
#scrollUp {
  bottom: 20px;
  right: 20px;
  height: 50px;
  width: 50px;
  background: url(../images/scroll-up.png) no-repeat;
}


.bx-wrapper .bx-controls-direction a {
  width: 30px;
  height: 60px;
  margin-top: 0;
}
.bx-wrapper .bx-next {
  right: -140px;
  background: url(../images/slide-next.png) no-repeat;
}
.bx-wrapper .bx-next:hover {
  background: url(../images/slide-next-hover.png) no-repeat;
}
.bx-wrapper .bx-prev {
  left: -140px;
  background: url(../images/slide-prev.png) no-repeat;
}
#clients .bx-wrapper .bx-prev {
  left: -80px;
}
.bx-wrapper .bx-prev:hover {
  background: url(../images/slide-prev-hover.png) no-repeat;
}
.bx-wrapper .bx-viewport{
  left: 0;
  height: auto !important;
  border:0;
  border-radius: 4px;
  background: transparent;
  padding-top: 20px;
}

@media (min-width: 320px) and (max-width: 575px) {
.img-iphone{
	display: none;
	}
#intro-landing .cta {
	margin-bottom: 0px !important; 
	}
#color-box .textright,
#color-box .textleft {	
    width: 100% !important; 
	padding: 50px !important; 
	}
#wrap {
    margin: 20px;
}
.arrow-left, .arrow-right {
    right: 50px;
}
#features {
    background: transparent;
}
	}

@media (min-width: 992px) and (max-width: 1199px) {
  #services h1 {
    margin-top: 0;
    font-size: 40px;
    line-height: 40px;
  }
  #clients .bx-wrapper .bx-controls-direction a{
    display: none;
  }
  .bx-wrapper .bx-next{
    right: -80px;
  }
  .bx-wrapper .bx-prev{
    left: -80px;
  }
}
@media (max-width: 991px){
	.arrow-left, .arrow-right {
    right: 50px;
}
#color-box .textright,
#color-box .textleft {
    padding: 20px;
    width: 100%
}
  #intro {
    padding-top: 130px;
  }
  #intro .container {
    background-position: right bottom;
  }
  #intro .container.home{
    text-align: center;
  }
  #intro h1{
    font-size: 52px;
    line-height: 60px;
    margin-bottom: 30px;
  }
  #services-list{
    padding-bottom: 40px;
  }
  .box-service, .box-product {
    padding: 20px 15px;
    min-height: max-content;
  }
  #services h1{
    margin-top: 0;
    display: block;
    margin-bottom: 20px;
  }
  .bx-wrapper .bx-next{
    right: 0px;
  }
  .bx-wrapper .bx-prev{
    left: 0px;
  }
  #contacts{
    padding: 60px 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
	.arrow-left, .arrow-right {
    right: 50px;
}
  .container{
    width: auto;
  }
  .box-service h2{
    font-size: 18px;
  }
  .bx-wrapper .bx-controls-direction a{
    display: none;
  }
}
@media (max-width: 767px){
	.arrow-left, .arrow-right {
    display: none;
}
  #header-wrap{
    padding-bottom: 30px;
  }
  #intro-landing {
    padding-top: 40px;
  }
  #intro-landing h1{
    font-size: 34px;
    line-height: initial;
  }
  #intro-landing h2{
    font-size: 20px;
  }
  #intro-landing .cta{
    margin-bottom: -100px;
  }
  #services{
    padding-bottom: 10px;
  }
  #services h1{
    margin-top: 40px;
  }
  #services-list, #product-list{
    padding-top: 30px;
    padding-bottom: 0;
  }
  .box-service {
    padding: 20px 20px 10px 20px;
  }
  .box-service .service-title, .box-service p {
    padding-left: 0;
  }
  .box-service h2{
    margin-top: 10px;
  }
  .bx-wrapper .bx-controls-direction a{
    display: none;
  }
  #clients{
    padding-bottom: 40px;
  }
  #contacts{
    padding-top: 20px;
  }
}