/* 
Custom CSS
/* Global Styles */

html, body {
  height:100%;
}

/*body {
  padding-top: 130px;/*  body padding for fixed top nav 
}
*/
.img-home-portfolio,
.img-customer,
.portfolio-item,
.feature {
  margin-bottom: 30px;
}

.space-top{
	margin-top:24px;
	}
.tab-pane {
  margin-top: 15px;
}


/* Page Sections */

.section-language
{ height: 25px;
  background-color: #1e2124;
  color:#FFF;
}

.section,
.section-search
{
  padding-top:50px;
  padding-bottom: 50px;
}

.section-team,
.section-team-col{
	padding-top:20px;
	padding-bottom:20px;
	}
.section-colored{
	margin-top: 20px;
	}
.section-colored,
.section-search,
.section-team-col{
  background-color: #f7f8f9; /* change this to change the background color of a colored section */
}

.section-footer{
	/*padding-top: 20px;
	padding-bottom: 20px;*/
	background-color: #333333;
	color: #FFF;
	}

.section-colored-dark{
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #272b31;
	color: #FFF;
	}
.section-title {
	padding-bottom: 10px;
	/*margin-bottom: 40px;*/
	 background-color: #f7f8f9;
	}

.section-title-game {
	margin:0;
	padding-bottom: 10px;
	 background-color: #f7f8f9;
	}

.uppercase{
	text-transform:uppercase;
	}
.sidebar {
  margin-top: 40px;
}

.sidebar ul {
  border-radius: 5px;
  padding: 5px;
  border: 1px solid #cccccc;
}

.list-box{
	padding-top:20px;
	padding-bottom:20px;
	border-bottom: #d2d1d1 solid 1px;
	}

.list-box-text{
	padding-top:20px;
	border-bottom: #d2d1d1 solid 1px;
	}

.list-box-last, .list-box-text-last{
	padding-top:20px;
	padding-bottom:20px;
	}
	
.list-box .title{
	
	color: #67696d;
	}

.boxed-up{
	margin-top:40px;
	}

.boxed-down{
	margin-bottom:40px;
	}
/* Half Page Height Carousel Customization*/ 
.carousel {
  height: 70%;
}

.item,
.active,
.carousel-inner {
  height: 100%;
}

.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

/* Social Icons Styles */
.list-social-icons {
  margin-bottom: 45px;
}

.tooltip-social a {
  text-decoration: none;
  color: inherit;
}

.facebook-link a:hover {
  color: #3b5998;
}

.linkedin-link a:hover {
  color: #007fb1;
}

.twitter-link a:hover {
  color: #39a9e0;
}

.google-plus-link a:hover {
  color: #d14836;
}

/* Service Page Styles */
.service-icon {
  font-size: 50px;
}

/* 404 Page Styles */
.error-404 {
  font-size: 8em;
}

/* Pricing Page Styles */
.price {
  font-size: 4em;
}

.price-cents {
  vertical-align: super;
  font-size: 50%;
}

.price-month {
  font-size: 35%;
  font-style: italic;
}


/*Hover prtfolio effect*/

.item-project {
	margin-top: 30px;
	position: relative;
	overflow: hidden;	
}

.item-project .hover-wrap {
    position: relative;
	overflow: hidden;
	display: block;
    height: 100%;
    width: 100%;
}

.item-project .hover-wrap img {
	position: relative;
	width: 100%;	
	
	bottom: 0;
	
	-webkit-transition: bottom 0.15s ease-in-out 0s;	
	   -moz-transition: bottom 0.15s ease-in-out 0s;
		 -o-transition: bottom 0.15s ease-in-out 0s;
		    transition: bottom 0.15s ease-in-out 0s;
}

.item-project:hover .hover-wrap img,
.item-project:active .hover-wrap img,
.item-project.tapped .hover-wrap img {
	bottom:130px;
}

.item-project .hover-wrap .overlay {
	position: absolute;
	display: block;
    height: 100%;
    width: 100%;
	left: 0;
	bottom: 0;
	
	background: #b0281f;
	opacity: 0;
	filter: alpha(opacity=0);
	
	-webkit-transition: opacity 0.15s ease-in-out 0s;	
	   -moz-transition: opacity 0.15s ease-in-out 0s;
		 -o-transition: opacity 0.15s ease-in-out 0s;
		    transition: opacity 0.15s ease-in-out 0s;
}

.item-project:hover .hover-wrap .overlay,
.item-project:active .hover-wrap .overlay,
.item-project.tapped .hover-wrap .overlay {
	opacity: 0.60;	
	filter: alpha(opacity=60);
}

.item-project .plus {
	position: absolute;
	top: 30%;
	left: 40%;
	background-image:url(../img/plus.png);
	width:63px;
	height:63px;
	margin: 0;
	
	color: #FFFFFF;
	font-size: 16px;	
	
	opacity: 0;
	filter: alpha(opacity=0);
	
	-webkit-transition: opacity 0.15s ease-in-out 0s;	
	   -moz-transition: opacity 0.15s ease-in-out 0s;
		 -o-transition: opacity 0.15s ease-in-out 0s;
		    transition: opacity 0.15s ease-in-out 0s;
}

.item-project:hover .hover-wrap span,
.item-project:active .hover-wrap span,
.item-project.tapped .hover-wrap span {
	opacity: 0.85;	
	filter: alpha(opacity=85);
}

.item-project .detail-info {
	position: absolute;
	bottom: -160px;
    background-color: #FFFFFF;
    padding-left: 10px;
	padding-right: 10px;
    text-align: left;
    width: 100%;
	min-height: 130px;
	margin-bottom: 0;
	
	border: 1px solid #E9F0F4;
	/*border-bottom: none;*/
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	z-index:2;
	
	-webkit-transition: all 0.15s ease-in-out 0s;	
	   -moz-transition: all 0.15s ease-in-out 0s;
		 -o-transition: all 0.15s ease-in-out 0s;
		    transition: all 0.15s ease-in-out 0s;
}

.item-project:hover .detail-info,
.item-project:active .detail-info,
.item-project.tapped .detail-info {
	bottom: 0px;	
}

.item-project .detail-info {
	/*font-weight: 400;*/
	display: block;	
}


/*Hover image effect*/

.item-project {
	position: relative;
	overflow: hidden;	
}

.item-project .hover-img {
    position: relative;
	overflow: hidden;
	display: block;
    height: 100%;
    width: 100%;
}

.item-project .hover-img img {
	position: relative;
	width: 100%;	
	
	bottom: 0;
	
	-webkit-transition: bottom 0.15s ease-in-out 0s;	
	   -moz-transition: bottom 0.15s ease-in-out 0s;
		 -o-transition: bottom 0.15s ease-in-out 0s;
		    transition: bottom 0.15s ease-in-out 0s;
}

.item-project .hover-img .overlay {
	position: absolute;
	display: block;
    height: 100%;
    width: 100%;
	left: 0;
	bottom: 0;
	
	background: #b0281f;
	opacity: 0;
	filter: alpha(opacity=0);
	
	-webkit-transition: opacity 0.15s ease-in-out 0s;	
	   -moz-transition: opacity 0.15s ease-in-out 0s;
		 -o-transition: opacity 0.15s ease-in-out 0s;
		    transition: opacity 0.15s ease-in-out 0s;
}

.item-project:hover .hover-img .overlay,
.item-project:active .hover-img .overlay,
.item-project.tapped .hover-img .overlay {
	opacity: 0.60;	
	filter: alpha(opacity=60);
}

.item-project .plus {
	position: absolute;
	top: 42%;
	left: 45%;
	background-image:url(../img/plus.png);
	width:63px;
	height:63px;
	margin: 0;
	
	color: #FFFFFF;
	font-size: 16px;	
	
	opacity: 0;
	filter: alpha(opacity=0);
	
	-webkit-transition: opacity 0.15s ease-in-out 0s;	
	   -moz-transition: opacity 0.15s ease-in-out 0s;
		 -o-transition: opacity 0.15s ease-in-out 0s;
		    transition: opacity 0.15s ease-in-out 0s;
}

.item-project:hover .hover-img span,
.item-project:active .hover-img span,
.item-project.tapped .hover-img span {
	opacity: 0.85;	
	filter: alpha(opacity=85);
}



/* Footer Styles */
footer {
  margin-top:20px;
}

footer p{
	margin-top: 5px;
	color:#CCC;
	}


footer li{
	padding-left: 0;
  	list-style: none;
	}

footer ul li a{
	font-size:12px;
	text-decoration: none;
	color:#FFF;
	text-transform:uppercase;
	}


/* Responsive Styles */
@media (max-width: 767px) {

.carousel {
  height: 70%;  /*increases the carousel height so it looks good on phones*/
}

}

@media (max-width: 320px) {
	.carousel {
  height: 80%;  /*increases the carousel height so it looks good on phones*/
}
.carousel-caption p{
	display:none;
	}
.carousel-caption h1{
	font-size:24px;
	}
}

@media (min-width: 1024px) {
.info-block a.btn {
    	margin-top: 70px;
    	position: inherit;
	}
}



/*Timeline*/

/********************************
 * styling elementi als generico
 ********************************/

.wrapper {
	list-style: none;
	height: 36px;
	padding:0;
	margin:0;
	overflow:hidden;
}

.als-item {
	text-align: center;
	cursor: pointer;
	float: left;
	margin-left:1px;
	margin-right:1px;
	
}

.prev {
	float: left;
}

.next {
	float: right;
}

			
				
		.year{
			font-size: 120px;
			}
	/* Responsive Styles */
@media (max-width: 320px) {

.year{
			font-size: 90px;
			
			}

}
	
	
		.space{
			margin-bottom:30px;
			}
			
		.section-year,
.section-year-col{
	padding-top:40px;
	}

.section-year-col{
  background-color: #f7f8f9; /* change this to change the background color of a colored section */
}


/*Gestione lingue bandiere*/
	
#lang_sel_list ul li a{
	background:#1e2124;
	height: 25px;
	}
#lang_sel_list li img
{
	border:#1e2124 1px solid;
	}
	
/*Sidebar*/
.sidebar-categories {
	margin-top: 30px;
	padding:0;
	margin-left:0;
	}

.sidebar-categories ul{
	list-style:none;
	padding-left:0;
	}
	
/*logo milestone per social*/
img.hidden-logo{
	position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
	display:none;}
	
/*Popup facce da milestone*/
.white{
	color: #FFF;
	}
	
.text-popup{
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 5px;
	}

.txt-small{
	font-size:12px;
	color:#999;
	}

/*Responsive Table per sito motogp videogame*/
/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
tr { 
  background: #fff; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-family: 'Roboto Condensed', helvetica, Arial, sans-serif;
  font-weight: 500;
  
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #b0b0b0; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Rider"; }
	td:nth-of-type(2):before { content: "Number"; }
	td:nth-of-type(3):before { content: "Nationality"; }
	td:nth-of-type(4):before { content: "Team"; }
	td:nth-of-type(5):before { content: "Bike"; }
}

.iframe-light{
border:0;
}