/*
STYLE FOR CONCOM ENT WEBSITE
*/


/**
 * 14.0 - Media Queries
 */

/**
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

* {box-sizing: border-box;}

.roboto-condensed-<uniquifier> {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  
    /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* For mobile phones: */
.mrow {
    width: 100%;
padding: 10px;

}

/**
 * 7.0 - Accessibility
 */

/* Text meant only for screen readers */
.says,
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	/* many screen reader and browser combinations announce broken words as they would appear visually */
	word-wrap: normal !important;
}

body {margin:5px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.25em;
  background-color: #000;
}

#footer {font-size:90%;
         margin-bottom: 5px;
}

.black-container {color: #FFF; margin: 0 auto; margin:0 auto;
	max-width:1000px;}
.black-container a {color:#FFF;}

.left {text-align:left;}
.right {text-align:right;}

img {
     max-width: 100%;
    height: auto;
 }

.nav, .names, .video-container {
     max-width: 100%;
        font-variant:small-caps; 
 }
 
 .nav {font-size: calc(1vw + 1vh + 1vmin);}
 .nav a:hover  {text-decoration: none; text-shadow: 2px 2px 2.5px #9E8C74;}
.video-container .caption a:hover  {color: #9E8C74; text-shadow: 3px 3px 3px #000; text-decoration: none;}
a img:hover {opacity: 70%;}

.title {font-size:1.25em; text-shadow: none; color: #9E8C74;}
.names {font-size: 1.5em; font-weight: bold;}
.titles {font-size: 1em; font-weight: bold; font-style: italic;}

.clearer {clear: both;}

/* VIDEO BUTTONS */

.video-container {
align-items: center;
  background-position: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  overflow: clip;
  padding: 1em;
  position: relative;
    position: relative;
    border-style: solid;
    border-color: #9E8C74;
    border-width: 8px;
    border-radius: 16px;
    text-shadow: 4px 4px 3px #000;
}

.video-container:hover {
    border-color: #FFF;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
  z-index: 1;
  position: relative;
  text-align: center;
  margin-top: 70%;
  color: #FFF;
  padding: 10px;
}

/* OVERLAY */
#overlay1, #overlay2, #overlay3, #overlay4 {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9);
  z-index: 2;
  cursor: pointer;
  overflow-x: fixed;
  overflow-y: scroll;
  padding: 25px;
}

.close {
    border-radius:5px;
    color:#000;
    background-color:#FFF;
    display:inline-block;
    padding:2px 5px;
    position: sticky;
    top:10px;
    left:10px;
    cursor:pointer;
}

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

.center-screen video, .center-screen div {
/* Make video fit to screen with 5% margin */ 
max-width: 95%; max-height: 95%;

/* Setting width & height to auto prevents the browser from stretching or squishing the video */ 
width: auto; height: auto; 

/* Center the video */ 
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}

a[target="_blank"] {background: url(icons/openinnewicon.png) center right no-repeat; padding-right: 20px;
padding-top: 5px;}

.aimg {background: none !important; padding-right: 0px;}

h2 {margin-bottom: 1px;}
	
/*	Alignments */

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

.alignright {
	margin-left: 7px;
	display: inline;
	float:right;
	}

.alignleft {
	margin-right: 7px;
	display: inline;
	float:left;
	}

a {text-decoration:none;}
	
a:hover {text-decoration:underline;}



.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px;
}

.column {
  flex: 1;
  padding: 20px;
  border-box;
  min-width: 150px;
  max-width: 350px;
}

/* Responsive behavior */

@media only screen and (min-width: 600px) {
    /* For desktop: */
    
    ._50l {width:48.75%;
		float:left;
		position:relative;
		overflow: hidden;
   margin-top: 2.5%;
   margin-right: 1.25%;
	}
	
	._50r {width:48.75%;
		float:left;
		position:relative;
		overflow: hidden;
   margin-top: 2.5%;
   margin-left: 1.25%;
		}	}

@media only screen and (max-width: 600px) {
    /* To make footer break sooner: */

    ._50l {
   margin-bottom: 5%;
}
  .container {
    flex-direction: column;
  }
	}