/* CSS Document */

/* FROM W3.CSS 4.10 February 2018 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:none;text-decoration:none;}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */

h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}

a:link,h1:link ,h1:hover,a:hover, a:visited,h1:visited {
	text-decoration: none;
	font-style: normal;
}
	h1 {
		font-size: 20px;
		
	}
	
	a, p, button {
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
		font-size: 15px;
	}

	.hideItem{
		display: none!important;
	}
	.showItem {
		display: block!important;
	}

.img-comp-container {
  box-sizing: border-box;
  position: relative; 
  height: 300; /*should be the same height as the images*/
}

.img-comp-img {
   box-sizing: border-box;
  position: absolute;
  width: auto;
  height: auto;
  overflow:hidden;
}

.img-comp-img img {
	box-sizing: border-box;
  display:block;
  vertical-align:middle;
}

.img-comp-slider {
  box-sizing: border-box;
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
}

.homeItem {
	padding: 8px 16px;
	width:auto;	
	display:block;
	float: left;
	text-align: center;
	align-content: center;
	font-size: 1vw;
	margin: 16px;
}

.homeItem:link, .homeItem:visited{
		border:thick;
		border-color: darkcyan;
		background-color: black;
		text-decoration: none;
		border-style: double;
		color: white;
	
	}

.homeItem:hover, .homeItem:active{
		border:thick;
		border-color: darkcyan;
		background-color: dimgrey;
		text-decoration: none;
		border-style: double;
		color: white;
	
	}

.bar {	
		position: inherit;
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 16px 16px;
		background-color: #2E2E2E;
		background-image: linear-gradient(#2E2E2E, rgba(0.5,0.5,0.5,0.7));
		z-index: 200;
	}

.bar h1 {
		color: white;
	}

.barItem {
		padding: 8px 16px;
		float:right;
		width:auto;
		display:block;
		margin: 16px;
	}

.barItem:link, .barItem:active ,.barItem:visited {
		text-decoration: none;
		background-color: darkgray;
		color: black;
		border:thick;
		border-style: solid;
		border-color: darkcyan;
	}

 .barItem:hover {
		text-decoration: none;
		background-color: lightgray;
		color: black;
		border:thick;
		border-style: solid;
		border-color: darkcyan;
	}

.barItemLeft {
		padding: 8px 16px;
		float:left;
		width:auto;
		border:none;
		display:block;
		outline:0;
	
	}

.barItemCenter {
		padding: 8px 16px;
		float:none;
		align-content: center;
		text-align: center;
		width:auto;
		border:none;
		display:block;
		outline:0;
	
	}	

.barList {
		width: 100%;
		overflow: hidden;
		padding: 8px 16px;
		display: block; 
		
	}

.barListItem {
		padding: 5px 16px;
		width: 100%;
		height: 100%;
		text-align: center;
		border: none;
		display: block;
		outline: 0;
	
	}

.barListItem:link {
		background-color: dimgrey;
		color: black;
		text-decoration: none;
		border: thick;
		border-style: groove;
		border-color: darkcyan;
			
	}

.barListItem:visited{
		background-color: dimgrey;
		color: black;
		text-decoration: none;
		border-style: solid;
		border: thick;
		border-color: darkcyan;
	}

.barListItem:hover {
		background-color: lightgray;
		color: black;
		text-decoration: none;
		border-style: solid;
		border: thick;
		border-color: darkcyan;
	}

.barListItem:active{
		background-color: white;
		color: black;
		text-decoration: none;
		border-style: solid;
		border: thick;
		border-color: darkcyan;	
	}

.Row {
		display: -ms-flexbox; /* IE10 */
    	display: flex;
    	-ms-flex-wrap: wrap; /* IE10 */
    	flex-wrap: wrap;
    	padding: 0px 0px;
		background-color: #2E2E2E;
	}

.FilterRow{
		display: -ms-flexbox; /* IE10 */
    	display: flex;
    	-ms-flex-wrap: wrap; /* IE10 */
    	flex-wrap: wrap;
		position: relative;
		width:100%;
		height: auto;
		overflow:hidden;
		background-color: white;
	}

.FilterRow h2{
		padding: 8px 16px;
		position: inherit;
		width: 10%;
		height: 100%;
		vertical-align: middle;
		align-content: center;
		display: block;
		font-size: 2vw;
	}

.FilterRow button {
		align-content: center;
		vertical-align: middle;
		width: 25%;
		height: auto;
		text-align: center;

}

.Coloumn {
	    -ms-flex: 33.3%; /* IE10 */
    	flex: 33%.3;
    	max-width: 33.3%;
    	padding: 0 4px 0 4px;
		margin: 0 0 0 0;
		display: none;
	}

.ColoumnB {
	    -ms-flex: 50%; /* IE10 */
    	flex: 50%;
    	max-width: 50%;
    	padding: 0px 0px;
		/*align-content: center;*/	
	}

.ColoumnA {
	    -ms-flex: 80%; /* IE10 */
    	flex: 80%;
    	max-width: 80%;
    	padding: 0px 0px;
		align-content: center;
		vertical-align: middle;
	}
.ColoumnA p{
		color: whitesmoke;
	}

.imgContainer{
		position: relative;
		align-content: center;
		padding: 0 0;
		width: 33%;
		height: auto;
		color: whitesmoke;
		background-color: darkslategray;
	}

.imgContainer img{
		align-content: center;
		width: 100%;
		height: auto;
		color: whitesmoke;
		padding-left: 15%;
	}

.imageColoumn, .imageColoumnB {
	     -ms-flex: 50%; /* IE10 */
    	flex: 50%;
    	max-width: 50%;
    	padding: 2.5% 0px;
		display: block;
		Background-colour: darkgray; 
	}
.imageColoumnC {
		 -ms-flex: 50%; /* IE10 */
    	flex: 50%;
    	max-width: 50%;
    	padding: 0px 0px;
		display: block;
		Background-colour: darkgray; 
	
}
	
.ColoumnB iframe , img{
    /*align-content: center; */
	width: 100%;
	vertical-align: middle;
	}

.imageColoumn img{
		position: relative;
		height : 100%;
		width: 100%;
	}

.imageColoumnB img{
		position: relative;
		height : auto;
		width: 30%;
		display: flex;
		left: 35%;
		top: 5%;
		align-content: center;
	}

 .imageColoumnC img{
		position: inherit;
		height : auto;
		width: 33%;
		display: flex;
		left: 15%;
		top: 5%;
	 	bottom: 5%;
		align-content: center;
	}
.imageColoumnB p, h1 ,h2  {
	color: white;
	text-align: center;
}

.imageColoumnC p, h1 ,h2  {
	color: white;
	text-align: center;
}

.ImageRow {
	display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0px 0px;
	background-color: #2E2E2E;
	align-items: center;
}


.infoColoumn {
		display: block;
		flex: 50%; 
		max-width: 50%;
		min-height: 350px;
		background-color: black;
	}

.infoColoumnB {
		display: block;
		flex: 50%; 
		max-width: 100%;
		min-height: 350px;
		padding-left: 15%;
		padding-right: 15%;
		background-color: black;
	}

.infoColoumnB p, h1 ,h2 {
		color: white;
	}
.infoColoumnB a, link {
		color: green;
	}

.BlogColoumn {
		flex:100%; 
		max-width: 100%;
		padding-top: 0px;
		padding-bottom: 0px;
		background-color: darkgray;
		align-content: center;
	}

.BlogColoumnA {
		flex: 100%; 
		max-width: 100%;
		padding-top: 0px;
		margin: 0px;
		padding-bottom: 0px;
		background-color: #2A2A2A;
		align-content: center;
	}

.BlogColoumnA h1 {
		display: inherit;
		align-content: top;
		flex: 100%;
		padding: 0 0;
	}

.container{
		position: relative;
		padding: 0 0;
		width: 100%;
		height: auto;
	}

.imageContainer{
		position: relative;
		padding: 0 0;
		width: 100%;
		height: auto;
		background-color: black;
		align-content: center;
	}

.imageContainer img {
		display: block;
		margin-left: 40%;
		position: relative;
		width:20%;	
		align-content: center;		
	}

.container img {
		filter:grayscale(0%);
		padding: 0 0;
		width: 100%;
	}
	
.container:hover img{
		position: relative;
		filter: grayscale(100%);
		width:100%;
		height:100%;
	}
	
.container:hover .overlay{
		opacity: 1;
	}

.overlay	{
		position: inherit;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		opacity: 0;
		transition: opacity 2s, width 1s, height 1s; 
		-ms-transition: opacity 2s, width 1s, height 1s; 
		-webkit-transition: opacity 2s, width 1s, height 1s; 
	}

.active-link {
		text-decoration: none;
	}

.blogtext {
		margin: 0px;
		padding: 0 0 16px;
		position: inherit;
		align-content: center;
		text-align: center;
		}

.blogtext h1{
		margin: -4px;
		font-size: 36px;
		background-color: black;
		color: white;
		}

.blogtext p{
		font-size: 18px;
		margin-bottom: 0px;
		color: black;
		}

.blogtext p span{
		background-color: white;
	}

p1{
		font-size: 18px;
		margin-bottom: 0px;
		padding: 0;
		}

p2{
		font-size: 18px;
		margin: 0;
		padding: 0;
		}

.blogtextA {
		display: wrap;
		width: 100%;
		position: inherit;
		padding: 0 0 16px;
		align-content: center;
		text-align: center;
		}

.blogtextA h1{
		margin: -4px;
		max-width: 100%;
		align-content: center;
		font-size: 36px;
		background-color: red;
		color: white;
		}

.blogtextA p{
		font-size: 18px;
		color: antiquewhite;
		}

.infotext {
		flex: 100%;
		height: inherit;
		display: block;
		position: relative;
		top: 0%;
		padding: 8px 16px;
		align-content: center;
		text-align: center;
		background-color: black;
		}

.linkText {
		flex: 100%;
		display: block;
		position: relative;
		top: 10%;
		padding: 8px 16px;
		align-content: center;
		text-align: center;
		background-color: #2E2E2E;
		}

.infotext h1{
		font-size: 3vw;
		font-style: oblique;
		background-color: black;
		color: white;
		text-decoration: none;
		}

.infotext p, .infotext a, .linkText a, .linkText p{
		font-size: 1vw;
		color: white;
		text-decoration: none;
		}

.text {
		width: 100%;
		height: auto;
		text-align: center;
  		color: white;
  		position: absolute;
  		top: 33%;
  		background-color: darkcyan;
  		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
	}
	
.text p{
		line-height: 50%;
		font-size: 1vw;
	}

.text h1{
		
		font-size: 1.5vw;
	}
	
.text h2{
		border-radius: 10px;
		position: absolute;
		color: black;
		width:30%;
		left:33%;
		background-color: white;
		font-size: 1.25vw;
	}
	
#gallery__filters__message {   color: #eb3924;   background-color: rgba(235, 209, 143, .6);   padding: 10px; }


.FilterItem {
		padding: 8px 16px;
		float:right;
		width:auto;
		border:none;
		display:block;
		outline:0;
}

.FilterItem:hover {
	background-color: darkcyan;
	color: darkslategray;
}

.filterShow {
	display: block;
}

.filterActive {
	background-color: darkcyan;
}

.filterFixed {
	position: absolute;
	top: 32px;
}

.showContainer {
	display: flex;
	position: inherit;
	width: 100%;
	height: auto;
	background-color:  #2E2E2E;
	
}

.showReel { 
	position: relative;
	align-content: center; 
	background-size:cover;
	transition: 1s opacity; 
	/*background: url('Images/FLIP B.jpg') no-repeat;*/
	width: 100%;
	height: auto;
	left: 0;
	bottom: 0;
}

.vidReel { 
	position: relative;
	align-content: center; 
	background-size:cover;
	transition: 1s opacity; 
	/*background: url('Images/FLIP B.jpg') no-repeat;*/
	width: 100%;
	height:auto;
	left: 0;
	bottom: 0;
	background-color: black;
}

.vidReel video {
	padding: 0px 0px 0px 0px;
	position: relative;
	align-content: center;
	width: 50%;
	height: auto;
	left: 25%;
	}

.showReel video {
	padding: 0px 0px 0px 0px;
	position: relative;
	align-content: bottom;
	width: 100%;
	height: auto;
	}

.vidReel iframe{
	padding: 0px 0px 0px 0px;
	position: relative;
	align-content: center;
	width: 100%;
	height: 100%;
	left: 0%;
	}

.showReel p {
		width: 50%;
		height: 12.5%;
		align-content: center;
		text-align: center;
  		color: white;
		top:35%;
		left:25%;
		background-color: black;
  		position: absolute;
  		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
	    z-index:50;
	   font-size: 4vw;
}


.sticky {
  		position: fixed;
  		top: 0;
  		width: 100%;
	}

.footerColoumn {
		position: inherit;
	    -ms-flex: 33.3%; /* IE10 */
    	flex: 33%.3;
    	max-width: 33.3%;
		height: auto;
    	padding: 0 4px 0 4px;
		margin: 0 0 0 0;
		display: block;
		background-color: darkslategray;
		align-content: center;
		text-align: center;
	}

.ArticleTitle {
	width: 100%;
	padding:16px;
	display: block;
	background-color: black;
}

.ArticleTitle h1{
	font-size: 4vw;
	text-align: center;
	align-content: center;
	color: white;
}
.Footer {
	display: block;
	width: 100%;
	height: auto;
}

.footerColoumn p , a {
		align-content: center;
		text-align: center;
		color: darkslategray;
}

.Footer h2 {
		align-content: center;
		text-align: center;
		color: darkslategray;
}

.footerColoumn img {
		align-content: center;
		text-align: center;
		color: white;
		width: 20%;
		height: auto;
		padding:0 0 0 1%;
}

.filterSticky {
	
		position: fixed;
		top: 116px;
		width: 100%;
		z-index: 100;
	}

.filterSticky + .content {
  		padding-top: 320px;
	}
	
@media screen and (min-width:993px) {
	
		.hideLarge{
			display:none!important;
		}
		
		.Coloumn {
			-ms-flex: 33%; /* IE10 */
			-webkit-flex: 33%; /* Safari*/
    		flex: 33%;
    		max-width: 33%;
		}
	
		.barItem {
			font-size: 1vw;
		}
		
		.homeItem {
			font-size: 1vw;
		}
	
	}

@media screen and (min-width:601px) and (max-width:992px) {
	
		.hideMedium {
			display: none!important;
		}	
		
		.Coloumn {
			-ms-flex: 33%; /* IE10 */
			-webkit-flex: 33%; /* Safari*/
    		flex: 33%;
    		max-width: 33%;
		}
	
		 .barList, .barItem {
			font-size: 2vw;
		}
	
		.homeItem {
			font-size: 3vw;
		}
	}

@media screen and (max-width:800px) {
	
		.Coloumn {
			-ms-flex: 50%; /* IE10 */
			-webkit-flex: 50%; /* Safari*/
    		flex: 50%;
    		max-width: 50%;
		}
		
		.overlay {
			opacity: 1;
		}

		.text p{
			font-size: 2vw;
		}
		.text h1{
			font-size: 2.1vw;
		}
		.text h2{
			font-size: 2.1vw;
		}
	

		
	}
	
@media screen and (max-width:600px) {
	
	.overlay{
		display: none !important;
	}
		.Coloumn {
			-ms-flex: 100%; /* IE10 */
			-webkit-flex: 100%; /* Safari*/
    		flex: 100%;
    		max-width: 100%;
		}
		.ColoumnB {
			-ms-flex: 100%; /* IE10 */
			-webkit-flex: 100%; /* Safari*/
    		flex: 100%;
    		max-width: 100%;
		}
		.hideSmall {
			display: none !important;
		}
		
		.infotext{
			top: 0%;
		}
		
		.infotext p{
			font-size: 3vw;
		}
		.imageColoumn{
			-ms-flex: 100%; /* IE10 */
			-webkit-flex: 100%; /* Safari*/
    		flex: 100%;
    		max-width: 100%;
		}
		.infoColoumn{
			-ms-flex: 100%; /* IE10 */
			-webkit-flex: 100%; /* Safari*/
    		flex: 100%;
    		max-width: 100%;
			
		}
		.footer{
			align-content: center;
			text-align: center;
		}
	
		.footerInfo{
			flex: 100%;
			align-content: center;
			width:33%;
			height:auto;
			background-color: #175E98;
		}
	
		.barList{
			position: relative;
			display: block;
			border:none;
		}
	
	.homeItem {
		font-size: 3.5vw;
	}
	
	.barItem{
		border:none;
	}
	.barListItem:link, .barListItem:hover,.barListItem:active ,.barListItem:visited {
		border:none;
	}
	.barItem:link, .barItem:hover,.barItem:active ,.barItem:visited {
		border:thick;
		border-style: solid;
		border-color: darkorange;
		font-size: 3vw;
	}
	
	.footerColoumn img {
		align-content: center;
		text-align: center;
		color: white;
		width: 30%;
		height: auto;
		padding:0 0 0 1%;
}
	

	
	
	}