/* @override 
	http://glamorgancricket-ycp6.temp-dns.com/site/css/grid.css */

/* CSS Document */

/*==========  Mobile First Method  ==========*/


@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);

body {
	font-family: 'Roboto Condensed', sans-serif;
	background-color: #EDEDED;
}
.gutter-6.row {
        margin-right: -3px;
        margin-left: -3px;
      }
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
        padding-right: 3px;
        padding-left: 3px;
      }
    
.tri {
	z-index: 1;	
}


.container.homegrid {
	min-width: 320px;
}


.main {
/*	width: 44.375%*/
padding: 0 3px;
margin-bottom: 6px;
}
.newsgrid .main:hover .title,
.homegrid .main:hover .title  {
	background-color: #fff;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;

}
@media only screen and (min-width : 320px) {


.main.large {
	/*width:  90.625%;*/
}
.tri:after {
	content: "";
	position: relative;
	border-style: solid;
	border-width: 20px 20px 0 20px;
	border-color: #efcf10 transparent transparent transparent;
	top: 37px;
	left: 10%;/*	left: 236px;*/


}

.main:hover .tri:after {
border-color: #fff transparent transparent transparent;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;	
}


}



@media (min-width: 480px) {

}

@media only screen and (min-width : 480px) {


}

@media only screen (min-width: 480px) and (max-width: 767px){
	
}


@media (min-width: 768px) {




.container.homegrid {
	background: none repeat scroll 0 0 #FFFFFF;
	box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
}


.newsgrid .main:hover .tri.rb:before {
	border-color: transparent transparent transparent #fff;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.newsgrid .main:hover .tri.bl:before,
.main:hover .tri.bl:before 
 {
	border-color: #fff transparent transparent transparent;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.newsgrid .main:hover .tri.tl:before,
.main:hover .tri.tl:before {
		border-color: transparent transparent #fff transparent;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.newsgrid .main:hover .tri.lb:before {
	border-color: transparent #fff transparent transparent;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

}

@media (min-width: 992px) {
	.main .title, .main .hero {
		position: absolute;
	}
	
	.main.top .title {
		top: 0;
	}
	.main.top .photo, .main.top img {
		bottom: 0;
	}


	.tri:after {content: "";
		border-style: none;
	
		}
	.tri.rb:before {
		content: "";
		position: absolute;
		border-style: solid;
		border-width: 20px 0 20px 20px;
		border-color: transparent transparent transparent #efcf10;
		bottom: 10%;
		left: 185px;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
	.tri.bl:before {
		content: "";
		position: absolute;
		border-style: solid;
		border-width: 20px 20px 0 20px;
		border-color: #efcf10 transparent transparent transparent;
		bottom: -20px;
		left: 10%;/*	left: 236px;*/
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
	.tri.tl:before {
		content: "";
		position: absolute;
		border-style: solid;
		border-width: 0 20px 20px 20px;
		border-color: transparent transparent #efcf10 transparent;
		top: -20px;
		left: 10%;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
	.tri.lb:before {
		content: "";
		position: absolute;
		border-style: solid;
		border-width: 20px 20px 20px 0;
		border-color: transparent #efcf10 transparent transparent;
		bottom: 10%;
		left: -20px;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
	
}
@media (min-width: 992px) and (max-width: 1199px) {
.container.homegrid, header .container {
	width: 978px;
}
.container {
	padding: 8px;

}
.no-gutters .col-md-1.item {
	width: 74px;
}
.hero {
	width: 100%;
}
.main {
	width: 186px!important;
}
.main.large {
	width: 570px!important;
}
.main:nth-child(4) {
	height: 324px;
}
.main.wide {
	width: 378px!important;
}

  }

@media (min-width: 992px) and (max-width: 1469px) {
	
.container, container.logos {
	padding: 12px;
	width: 1176px;
}

.main {
	position: relative;
	width: 187px;
	height: 320px;
	margin-right: 3px;
	margin-left: 3px;
	margin-bottom: 6px;
	overflow: hidden;
	padding: 0;
}
.main.large {
	width: 573px;
}
.main.wide {
	height: 230px;
	/*	width: 466px;*/
	overflow: hidden;
}
.main.wide .title {
	right: 0;
	top: 0;
	height: 100%;
}
.main .title {
	width: 187px;
	height: 160px;
	bottom: 0;
}
.main.wide {
	height: 160px;
	width: 380px;
	overflow: hidden;
}
.main.wide .title {
	right: 0;
	top: 0;
	height: 100%;
}
.main.wide.side .title {
	left: 0;
}
.main.wide .hero {
	height: 160px;
	width: 196px;
}


}



@media (min-width: 1470px) {
	.tri.rb:before {
	
		left: 230px;
	}
	.container-large {
		width: 1440px;
		position: relative;
	}
	
	.item {
		margin-right: 3px;
		margin-left: 3px;
		width: 112px;
	}	
	
	
	
	.main {
		width: 230px;
		height: 395px;
		padding: 0;
		margin-left: 3px;
		margin-right: 3px;
		margin-bottom: 6px;
		position: relative;
		overflow: hidden;
	
	}
	
	.main .hero {
/*		height: 200px;
		width: 236px;*/
	}
	
	
	
	.main .title {
		width: 230px;
		height: 200px;
		bottom: 0;
	}
	
	.main.large {
		width: 702px;
	}
	
	.main.wide {
		height: 200px;
		width: 466px;
		overflow: hidden;
	}
	
	.main.wide .title {
		right: 0;
		top: 0;
		height: 100%;
	}
	
	.main.wide.side .title {
		left: 0;
	}
	
	.main.wide .hero {
		width: 236px;
	}
	
	
}