/**
 * @version		$Id$
 * @author		NooTheme
 * @package		Joomla.Site
 * @subpackage	mod_noo_timeline
 * @copyright	Copyright (C) 2013 NooTheme. All rights reserved.
 * @license		License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
*/

@charset "UTF-8";


.clearfix:after {
    content: "";
    display: table;
    line-height: 0;
}
.clearfix:after {
    clear: both;
}



/*****************
@media (max-width: 1024px){

ul.timeline{
	width:90%;
}

.timeline .note:after{
	right:-8%;
}

.timeline .note:nth-of-type(2n):after{
	left:-8%;
}
}


@media (max-width: 767px){
	
	.noo-tl-item.right,
	.noo-tl-item.left{
		float: left;
	}
	.noo-tl-control{
		top: 0px
	}
	.noo-tl-item.left .noo-tl-control{
    	 right: 50%;
    	 margin-right: -12px;
	}
	.noo-tl-item.right .noo-tl-control{
		 left: 50%;
		 margin-left: -12px;
	}
	
	.noo-tl-item.right .noo-tl-info,
	.noo-tl-item.left .noo-tl-info{
		margin:40px 0 0 0;
	}
	
	.noo-tl-item.left .arrow,
	.noo-tl-item.right .arrow
	{
		border-bottom-color: #5C5C5C;
	    border-left-color: transparent;
	    border-right-color: transparent;
	    border-width: 0 10px 10px;
	    left: 50%;
	    margin-left: -10px;
	    margin-top: 0;
	    top: -10px;
	}
	.noo-tl-item.right .arrow:after,
	.noo-tl-item.left .arrow:after{
		border-width: 0 11px 11px;
		border-bottom-color: rgba(0, 0, 0, 0.25);
		top: -1px;
		left: -11px;
	}
	.noo-tl-item .noo-tl-time{
		top:0
	}
	.noo-tl-item.left .noo-tl-time{
		 left: 50%;
	}
	.noo-tl-item.right .noo-tl-time{
		 right: 50%;
	}
}
**************/



/* Timeline */

	ul.timeline{
		margin:40px auto 0;
		width:100%;
		background:url(http://www.wequegolfclub.com/timeline-bg.jpg) center center repeat-y;
		height:auto;
		position:relative;
		padding:0 0 80px;
	}

/* Year icon */

	.timeline .year{
		width:75px;
		height:75px;
		border:3px solid #919191;
		border-radius:300px;
		background:white;
		clear:both;
		padding:21px 0;
		text-align:center;
		font-weight:300;
		color:#3c3d3d;
		font-size:20px;
		margin:31px auto;
	}

/* Notes */

	.timeline .note{
		float:left;
		padding:20px;
		width:47.5%;
		background: rgba(242,242,242,0.1);
		border-radius:12px;
		margin:10px 0;
		cursor:pointer;
		position:relative;
		z-index:550;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;
	}

	.timeline .year + .note{
		margin-top:-20px;
	}

/* Start Icon */

	.timeline .start{
		width:64px;
		height:64px;
		border:3px solid #919191;
		border-radius:300px;
		background:white;
		position:absolute;
		clear:both;
		padding:19px 0;
		text-align:center;
		color:#868586;
		font-size:24px;
		bottom:0px;
		left:50%;
		margin-left:-32px;
	}

/* Note inners */

	.timeline .note h4{
		font-size:#000000;
		text-transform:uppercase;
		font-weight:300;
		color:#999999;
		margin:5px 0;
	}

	.timeline .note p{
		font-size:14px;
		color:#767676;
		margin:8px 0;
	}

	.timeline .note span.date{
		font-size:14px;
		text-transform:uppercase;
		color:#a5a5a5;
		line-height:12px;
	}

	.timeline .note .arrow{
		color:rgba(242,242,242,0.1);
		position:absolute;
		right:-1.6%;
		left:auto;
		top:20px;
		font-size:12px;
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		transform: rotate(360deg);
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;
	}

	.timeline .note:after{
		content:'';
		position:absolute;
		right:-6.8%;
		display:block;
		width:18px;
		height:18px;
		background:#343434;
		border:2px solid #d6d6d6;
		border-radius:100px;
		top:18px;
		z-index:20;
	}

	.timeline .note:nth-of-type(2n){
		float:right;
		clear:right;
	}

	.timeline .note:nth-of-type(2n):after{
		left:-6.8%;
	}

	.timeline .note:nth-of-type(2n) .arrow{
		left:-1.6%;
		right:auto;
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		transform: rotate(180deg);
	}

/* Notes Rollover */

	.timeline .note:hover{
		background:#f2f2f2;
	}

	.timeline .note:hover h4{
		color:#707070;
	}

	.timeline .note:hover p{
		color:#767676;
	}

	.timeline .note:hover:after{
		background:#f02d2d;
		border:2px solid #f02d2d;
	}

	.timeline .note:hover .arrow{
		color:#f2f2f2;
	}

	.note .desc {
   display:none;
   overflow: hidden;
   color:#9b9b9b;
}


@media only screen and (max-width: 480px){
.timeline .note:after {right: -11%;}
.timeline .note:nth-of-type(2n):after {left: -11%;}
}