/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*/

/* resources */
#resources{}

	/* container */
	#resources .resource{
		z-index: 0;
	}

	#resources .resource.list{
		margin-bottom: 2%;
	}

	#resources .resource.list:last-child{
		margin-bottom: 0;
	}
		
		/* image */
		#resources .resource .image{
			position: relative;
		}
		
		#resources .resource.list .image{
			float: left;
			width: 25%;
		}
		
			#resources .resource .image .img img{
				width: 100%;
			}
		
			#resources .resource.grid .image .img img{
				left: 10%;
				bottom: 0;
				width: 80%;
				z-index: 100;
				display: inherit;
				text-align: center;
				position: absolute;
			}
		
		/* content */
		#resources .resource .content{
			padding: 5px;
			background: #fff;
		}
		
		#resources .resource.list .content{
			float: left;
			width: 73%;
			padding: 1%;
		}

		#resources .resource.grid .content{
			text-align: center;
		}

			#resources .resource .content .title{
				padding: 5px;
				font-weight: normal;
			}

			#resources .resource .content .title span{
				color: #888;
				font-size: var(--fontSize80);
			}

			#resources .resource .content .description{
				padding: 5px;
				font-size: var(--fontSize90);
			}

				#resources .resource .content .description a{
					color: #888;
				}

	/* description */
	#resources > .description{
		margin: 30px 0 0;
	}
	
	/* resource range */
	#resources > .range .item{}
		
		#resources > .range > a{}
	
			#resources > .range > a > .item{
				padding: 5px 0;
				border-bottom: 1px solid var(--softBorderColor)
			}
	
			#resources > .range > a:first-child > .item{
				padding-top: 0;
			}
	
			#resources > .range > a:last-child > .item{
				padding-bottom: 0;
				border-bottom: none;
			}
		
			#resources > .range .item .image{
				width: 100px;
			}
			
			#resources > .range .item .label{
				padding: 20px;
				width: calc(100% - 140px);
				font-size: var(--fontSize180);
			}
	
	/* resource gallery */
	#resources > .gallery .item{}
		
		#resources > .gallery .item{}
		
			#resources > .gallery .item .image{}
		
				#resources > .gallery .item .image img{
					width: 100%;
				}
			
			#resources > .gallery .item .link{
				text-align: center;
			}
	
/* resource */
#resource{}
	
	#resource .images{}
	
		#resource .images .main .image{
			cursor: pointer;
		}

		#resource .images .thumbs{
			margin-top: 20px;
			padding-top: 20px;
			border-top: 1px solid var(--softBorderColor);
		}

			#resource .images .thumbs .image{
				cursor: pointer;
				border: 1px solid var(--softBorderColor);
			}

			#resource .images .thumbs .image:hover,
			#resource .images .thumbs .image.active{
				border: 1px solid var(--bgColor);
			}

	#resource .info{}

		#resource .info .title{}

		#resource .info .description{
			padding: 5px 0;
		}

		#resource .info .links{}

			#resource .info .links .link{}
	
/* 600px */	
@media screen and (max-width: 600px){
	#resources .grid:last-child .grid-row{
		margin-bottom: 1% !important;
	}

	#resources .resource.list .image{
		float: none;
		width: 100%;
	}

	#resources .resource.list .content{
		float: none;
		width: 100%;
	}
		
	#resource .images{
		margin-bottom: 30px;
	}
}