body {
      font-family: Cabin, sans-serif;
      font-size: 12px;
      line-height: 1.8;
      color: #818181;
  }
  h2 {
      font-size: 24px;
      text-transform: uppercase;
      color: #303030;
      font-weight: 600;
      margin-bottom: 30px;
  }
  h4 {
      font-size: 19px;
      line-height: 1.375em;
      color: #303030;
      font-weight: 400;
      margin-bottom: 10px;
  }  
  .jumbotron {
      background-color: #ff0000;  //#f4511e
      color: #fff;
      padding: 100px 25px;
      font-family: Cabin, sans-serif;
  }
  .container-fluid {
      padding: 60px 50px;
  }
  
  .container-main{
    padding: 0px 0px 150px 0px;
    background-color: white;
    margin: 0px;
 }
  
  .glyphicon {
      font-size: 20px;
      margin-bottom: 20px;
      color:  #ff0000; //#ff0000;  
  }    
  
  .fa {
      color:  #ff0000; //#024eb3; 
  }    
  
  .bg-grey {
      background-color: #f6f6f6;
  }
  .logo-small {
      color:  #ff0000; //#024eb3; 
      font-size: 50px;
  }
  .logo {
      color:  #ff0000; //#024eb3;  
      font-size: 200px;
  }
  .thumbnail {
      padding: 0 0 15px 0;
      border: none;
      border-radius: 0;
  }
  .thumbnail img {
      width: 100%;
      height: 100%;
      margin-bottom: 10px;
  }

  .item h4 {
      font-size: 19px;
      line-height: 1.375em;
      font-weight: 400;
      font-style: italic;
      margin: 70px 0;
  }
  .item span {
      font-style: normal;
  }
  .panel {
      border: 1px solid  #ff0000; //#024eb3;;   
      border-radius:0 !important;
      transition: box-shadow 0.5s;
  }
  .panel:hover {
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
  }
  .panel-footer .btn:hover {
      border: 1px solid  #ff0000;  
      background-color: #fff !important;
      color: #ff0000;
  }
  .panel-heading {
      color: #fff !important;
      background-color:  #ff0000 !important;   //#024eb3;;
      padding: 25px;
      border-bottom: 1px solid transparent;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
  }
  .panel-footer {
      background-color: white !important;
  }
  .panel-footer h3 {
      font-size: 32px;
  }
  .panel-footer h4 {
      color: #aaa;
      font-size: 14px;
  }
  .panel-footer .btn {
      margin: 15px 0;
      background-color: #ff0000;     
      color: #fff;
  }
  
/* Barra navigazione */
  
  .navbar {
      margin-bottom: 0;
      background-color: #FF0000; /* #024eb3; */     
      z-index: 300;
      border: 0;
      font-size: 14px !important;
      line-height: 1.42857143 !important;
      letter-spacing: 4px;
      border-radius: 0;
      font-family: Montserrat, sans-serif;
  }
  .navbar li a, .navbar .navbar-brand {
      color: #fff !important;
  }
  .navbar-nav li a:hover, .navbar-nav li.active a {
      color: #FF0000 !important;     
      background-color: #fff !important;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
  }
  footer .glyphicon {
      font-size: 14px;
      margin-bottom: 20px;
      color:  #ff0000;     //#f4511e
  }
  
  
  /* Mappa */
  	#map { 
	width: 100%; 
	height: -moz-calc(100vh - 50px);
    height: -webkit-calc(100vh - 50px);
    height: -o-calc(100vh - 50px);
    height: calc(100vh - 50px);
	 }
  
  .mappa_main {
    height: -moz-calc(100vh - 50px);
    height: -webkit-calc(100vh - 50px);
    height: -o-calc(100vh - 50px);
    height: calc(100vh - 50px);

    margin-top: 50px;
    width: 100%;
    bottom: 00;
    left: 0;
    position: absolute;
   }
  .mappa_main2 {
    /*
    height: -moz-calc(100vh - 50px);
    height: -webkit-calc(100vh - 50px);
    height: -o-calc(100vh - 50px);
    height: calc(100vh - 50px);
  */
    margin-top: -60px;
    width: 100%;
    left:0;
    position: absolute;
    background: white;

   }
  
  //.slideanim {visibility:hidden;}
  .slide {
      animation-name: slide;
      -webkit-animation-name: slide;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
  @media screen and (max-width: 768px) {
    .col-sm-4 {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg {
        width: 100%;
        margin-bottom: 35px;
    }
  }
  @media screen and (max-width: 480px) {
    .logo {
        font-size: 150px;
    }
  }

  .info { 
      width:160px;
      padding: 6px 8px; 
      font: 14px/16px Arial, Helvetica, sans-serif; 
      background: white; background: rgba(255,255,255,0.8); 
      box-shadow: 0 0 15px rgba(0,0,0,0.2); 
      border-radius: 5px; } 
  .info h4 { 
      margin: 0 0 5px; 
      color: #777; }
     
 .legend { text-align: left; line-height: 18px; color: #555; } 
 .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }
 
 

/* colori in base a tipo di cartina
- foot			#19c474
- sprint		#3F48CC
- ski			#169cff
- mtb		    #ffff63
- other			#9e83e3
- scool			#ffa200
- eoc_tr			#598da6 
- old map		#a3a3a3
*/
/* Icone */


/* Bottoni */	    
.foot-btn{
    background: #19c474;
    color: #ffffff;
    margin-bottom: 2px !important;
}
.foot-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

.sprint-btn{
    background: #3F48CC;
    color: #ffffff;
    margin-bottom: 2px !important;
}
.sprint-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}


.mtb-btn{
    background: #ffff63;
    color: #000000;
    margin-bottom: 2px !important;
}
.mtb-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}


.ski-btn{
    background: #59A5E2;
    color: #ffffff;
    margin-bottom: 2px !important;
}
.ski-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

.other-btn{
    background: #9e83e3;
    color: #ffffff;
    margin-bottom: 2px !important;
}
.other-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

.all-btn{
    background: #C0C0C0;
    color: #ffffff;
    margin-bottom: 2px !important;
}
.all-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

.scool-btn{
    background: #ffa200;
    color: #ffffff;
    margin-bottom: 2px !important;
}
.scool-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

.old-btn{
    background: #C0C0C0;
    color: #ffffff;
    margin-bottom: 2px !important;
}
.old-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}
/* Images 
td.picture{}
td.picture img{display: block;padding: 4px}
td.picture span{position: absolute;top: 0;left: 0;
    width: 100%;height: 100%;background: url(img/blank.gif)} */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}