/*
#FF6700: arancione - tutti i titoli, hover on navbar links, lineette menu su phone, numeri categorie, links

#777: grigio scuro - corpo testo

#5E5E5E: grigio più scuro - links:hover, list, nome dei punti della mappa, descrizione, nome categorie, piccoli titoli (path, more on the author, data, durata,..)

#F8F8F8: grigio chiaro - sfondo navbar, sfondo categorie (sfondo quando "attivo": #e7e7e7), sfondo descrizione
#E7E7E7: grigio chiaro/scuro - bordo navbar, bordo categorie, bordo descrizione, bordo borderbox
...
NOTE: 
- quotes are special (in aboutUs) 
- buttons are default
*/
body {
	font-family: "Nunito-Light","Helvetica Neue", Helvetica, Arial, sans-serif;
}
p {
	font-size: 16px;
}

/* sections */
.sectionIntro {
	margin-top: 50px;
	margin-bottom: 37.5px
}

.randomPoints {
	background: #F8F8F8;
	margin-top: 10px;
	padding-bottom: 10px;
}

.randomPoints .sectionIntro {
	margin-top: 40px;
}

.randomPoints .border-box {
	background: white;
}

.homeDescription {
	padding: 70px 0;
	background: #F8F8F8;
}

.homeDescription h1{
	color: #5E5E5E;
}

.pageEnd{
	height:10px;
	margin-bottom: 90px;
}

.footer {
  	background-color: #F8F8F8;
}
.footerCopyright {
	width: 100%;
	margin-bottom: 10px;
}

.footerLogo img {
	height: 60px;
	margin: 10px;
}

.footerLinks a{
	font-size: 24px;
	margin: 0 10px;
}

.footerLinks {
	margin-top: 15px;
}

.footerCircle{
	font-size: 36px;
	margin: 10px;
	
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px;
    border-radius: 30px;

    background-color: #FF6700;
    color: white;
    text-align: center;
}


/* main style */
h1 {
	color:#FF6700;	
	font-family: "Nunito-Regular","Helvetica Neue", Helvetica, Arial, sans-serif;
}

h2,h3,h4,h5 {
	color: #5E5E5E;
	font-family: "Nunito-Regular","Helvetica Neue", Helvetica, Arial, sans-serif;
}

.btn:hover, .btn:focus {
	color: white;
	background-color: #FF6700;
	border-color: #FF6700;
}

.badge {
	background-color:#FF6700;	
	margin-left:20px;
	vertical-align:middle;
    margin-top: -0.5em;
}

#categories {
	color:#5E5E5E;	
	font-size: 16px;
	margin-bottom: 20px;
	margin-top: 20px;
}
div.category:hover,
div.category:focus {
	background-color: #e7e7e7;	
	border: 1px solid rgb(200, 200, 200);
}

#categories .lang-lbl{
	padding-left: 30px;
	margin-top:10px;
}

p {
	color: #777;
}

a {
	color: #FF6700;
	text-decoration: none;
}

a:hover, a:focus {
	color: #5E5E5E;
	text-decoration: none;
}

.locationMsg {
	color: #5E5E5E;
}
.location-popover {
	cursor: pointer;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}


.aboutUs-text {
	    margin: 40px 0 20px;
}

ul.arrow-bullet {
	    color: #5E5E5E;
}

ul.arrow-bullet li {
    display: block;
}

ul.arrow-bullet  li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 17px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: #CCCCCC;
    margin-right: 10px;
}

@font-face {
	font-family: 'Bolonewt';
	src: url('../fonts/Bolonewt/BOLONEWT.TTF')
		format('truetype');
}

@font-face {
	font-family: 'Nunito-Regular';
	src: url('../fonts/Nunito/Nunito-Regular.ttf')
		format('truetype');
}

@font-face {
	font-family: 'Nunito-Light';
	src: url('../fonts/Nunito/Nunito-Light.ttf')
		format('truetype');
}
/*
@font-face {
	font-family: 'Nunito-Bold';
	src: url('../fonts/Nunito/Nunito-Bold.ttf')
		format('truetype');
}*/

.bolone {
	font-family: "Bolonewt", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*for more browser support*/

/*src: url('webfont.eot'); IE9 Compat Modes */
/*src: url('webfont.eot?#iefix') format('embedded-opentype'),  IE6-IE8 
       url('webfont.woff2') format('woff2'),  Super Modern Browsers 
       url('webfont.woff') format('woff'), Pretty Modern Browsers
       url('webfont.ttf')  format('truetype'), Safari, Android, iOS 
       url('webfont.svg#svgFontName') format('svg');  Legacy iOS */

/* navbar */

.navbarCarouselContainer{
	position:relative; 
	height:600px;
}

.navbarBannerContainer{
	position:relative; 
	height:400px;
}

.navbarCarouselContainer .carousel {
    position:absolute;
    top:0;
    height:600px;
    width:100%;
}

.navbarCarouselContainer .navbar, .navbarBannerContainer .navbar{
	position:absolute;
    top:0px;
    z-index:10;
    width:100%;
}

.navbar-default {
    background: none;
    border-style: none;
    margin-bottom: 0;
}
/* title */
.navbar-default .navbar-brand {
    padding-top: 5px;
}

.navbar-default .navbar-brand img {
	height: 40px;
}
/* link */
.navbar-default .navbar-nav > li > a.link-join{
	padding: 10px 10px;
}

.navbar-default .navbar-nav > li > a.link-join > .btn-join {
	padding: 5px 5px;
	border: 1px solid white;
	min-width: 44px;
}

.navbar-default .navbar-nav > li > a.link-join > .btn-join:hover,
.navbar-default .navbar-nav > li > a.link-join > .btn-join:focus {
	color: white;
	background-color: #FF6700;
}

.navbar-default .navbar-nav > li > a {
    color: white;
    background: none;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: white;
    background: none;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: white;
    background: none;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: white;
    background: none;
}

/* mobile version */
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-style: none;
    box-shadow: none;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #FF6700;
}


/* punti itinerario */
.punto_box {
    border: 1px solid #E7E7E7;
    border-radius: 4px;
    margin-bottom: 5px;
}

.punto_description{
	 padding: 10px;
}

.punto_tag {
	text-align: center;
	padding-top: 10px;
    padding-bottom: 10px;
}

.punto_tag_tooltip {
	color: #5E5E5E;
}

.punto_id {
	text-align: center;
	padding: 10px;
}

.punto_tag span, .punto_tag i {
	margin-right: 5px;
	margin-left: 5px;
}

/* point panel in home */
.puntoHomeTag i, .puntoHomeTag span{
	margin-right: 5px;
	margin-left: 5px;
	font-size: 20px;
}


/* article panel in home */
.stylish-panel {
	text-align: center;
	cursor: pointer;
}

.border-box {
	border: 1px solid #E7E7E7;
}

.articleText-box {
	border-radius: 4px;
	padding: 5px;
	margin-bottom: 5px;
}

.articleInfo{
	margin: 7px;
}

.articleInfo .lang-lbl{
	color: #777;
}

.coverImage{
	width:100%;
	height: 300px;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

/*
.stylish-panel>div:hover>div {
	border: 1px solid rgb(200, 200, 200);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
	background: #e7e7e7;
	transition: 0.5s;
	cursor: pointer;
}*/

.rate-value{
	font-size: 11px;
    color: #777;
}
.rate-votes{
	font-size: 11px;
    color: #777;
}

.motto {
	font-size: 28px;
}

#homeCarousel .carousel-control {
  height: 80px;
  margin-top: 150px;
  font-size: 120px;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: transparent;
  border: 0;
  z-index: 10;
}

#homeCarousel.carousel .item {
  height: 600px;
}
#homeCarousel.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  max-width: none;
}

#homeCarousel .carousel-caption {
  background-color: transparent;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 600px;
  height: 300px;
}

#homeCarousel .carousel-caption  img {
	position: relative;
	width: 60%;
	min-width:60%;
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
  Need to override the Bootstrap 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}
/* for a caption that follows and changes with images, 
use div class container around div class carousel-caption
#homeCarousel .carousel-caption {
  background-color: transparent;
  position: static;
  margin: auto;
  max-width: 550px;
  margin-top: 150px;
}*/

.banner {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	height: 400px;
	position: absolute;
    top: 0;
    width: 100%;
}

.banner-aboutUs {
	background-image: url("../images/hamburg.jpg");
}

.banner-joinUs {
	background-image: url("../images/tram.jpg");
}

.banner-caption {
	background-color: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 600px;
    height: 200px;
}

.banner-inner {
	position: relative;
    width: 100%;
    overflow: hidden;
    height: 400px;
}

#homeCarousel h1, .banner h1 {
	color: #FF6700;
	text-align: center;
	font-size: 60px;
}

#homeCarousel h3, .banner h3 {
	color: white;
	text-align: center;
	font-size: 26px;
}

/*Article Details */
.articleIntro{
	margin-bottom: 20px;
}

.articleTags i, .articleTags span{
	margin-right: 5px;
	margin-left: 5px;
	font-size: 20px;
}

.articleText {
	margin: 20px 10px;
}
.button-header {
	width: 100%;
	margin-top: 10px;
}

.button-header-right {
    float: right;
    width: 50%;
    text-align: right;
}
.button-header-left  {
    float: left;
    width: 50%;
}

div.category{
	border: 1px solid #E7E7E7;
	background: rgba(200, 200, 200, 0.1);
	border-radius: 4px;
	transition: 0.2s;
	cursor: pointer;
	text-align:center;
	height: 40px;
	margin-bottom: 5px;
}

#languages>li {
	cursor: pointer;
	margin-left: 10px;
}
#languages>li.not-translated {
	cursor: default;
}

.download-button {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
}

.articleHeader{
	margin: 20px 0 20px;
}

/* carosello */
.carousel-inner>.item>img {
	margin: auto;
}

.carousel-control.left, .carousel-control.right {
    background-image: none
}

@media (min-width : 1400px) {

  .navbarCarouselContainer {
	height: 800px;
  }
  
  .navbarCarouselContainer .carousel{
  	height: 800px;
  }

  #homeCarousel.carousel .item {
    height: 800px;
  }
  
  .navbarBannerContainer {
	height:600px;
  }
  
  .banner {
  	height:600px;
  }
  
  .banner-inner {
    height: 600px;
  }
}

@media (max-width: 767px) {

  .navbarCarouselContainer {
	height: 400px;
  }
  
  .navbarCarouselContainer .carousel{
  	height: 400px;
  }

  #homeCarousel.carousel .item {
    height: 400px;
  }
  
  #homeCarousel .carousel-caption {
   	 width: 300px;
   	 height: 200px;
     margin: auto;
  }
  #homeCarousel .carousel-control {
 	 margin-top: 120px;
 	 font-size: 50px;
  }
  
  .navbar-default .navbar-nav > li > a.link-join{
	padding: 10px 15px;
  }
  
  h1.homeTitle {
  	font-size: 28px;
  }
  
  .coverImage{
  	height: 250px;
  }
  
  .navbarBannerContainer {
	height:265px;
  }
  
  .banner {
  	height:265px;
  }
  
  .banner-inner {
    height: 265px;
  }
  
  .banner-caption {
    width: 300px;
    height: 132px;
  }
  
  #homeCarousel h1, .banner h1 {
	font-size: 40px;
  }
  
  #homeCarousel h3, .banner h3 {
	font-size: 16px;
  }

}

/*IMPORTANT: if these rules are not there the map is not displayed */
.map {
	height: 100%;
	width: 100%;
}

.mapwrapper {
	height: 500px;
	width: 100%;
	margin-bottom: 20px;
}

.mapwrapperSinglePoint{
	height: 500px;
	width: 100%;
	margin-bottom: 10px;
	display: none;
	overflow: auto;
	position: relative;
}

.closeSinglePointMap{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 200;
	font-size: 25px;
	cursor: pointer;
}

/*IMPORTANT end*/



/*OLD */
/*
 DIALOG good for desktop and ipad no good for iphone 
.modal-dialog {
	width: 100%;
}
       
#ajaxloader {  put here the width of the image loader.gif 
	width: 64px;
	margin: auto;
}
.first-title {
	padding: 30px 15px;
 	text-align: center;
}

.first-title h1 {
	color: #000066;
}
.container h4, .title {
	color: #000066;
	margin-top: 0px;
}
.img-preview {
	margin-bottom: 20px;
}

.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover
	{
	background-color: #000066;
	border-color: #000066;
}

.pagination>li>a,.pagination>li>span {
	color: #000066;
}

.label-primary {
	background-color: #000066;
}
*/