@charset "UTF-8";
body {
	margin: 0;
	padding: 0;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

.grecaptcha-badge { visibility: hidden; }

.grecaptcha-badgeform {
	float: left;
	width: 100%;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #7D7E82;
	text-align: left;
	line-height: 18px;
	margin-top: 10px;
	margin-bottom: 10px;
}


.grecaptchalink {
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 8px;
	color: #7D7E82;
	text-align: left;
}

.grecaptcha-badgeform a:link {
	color:#7D7E82;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 12px;
}

p {
	font-size: 17px;
	color: #7D7E82;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-weight: 100;
	margin: 0px;
	padding: 0px;
}

h1 {
	text-align: center;
	font-size: 24px;
	color: #7D7E82;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
}


h2 {
	text-align: center;
	font-size: 20px;
	color: #ffffff;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
}


h3 {
	text-align: center;
	font-size: 9px;
	color: #ffffff;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
}

h4 {
	text-align: center;
	font-size: 28px;
	color: #7D7E82;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
	margin-bottom: 5px;
	line-height: 31px;
}

h5 {
	text-align: center;
	font-size: 28px;
	color: #7D7E82;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
	line-height: 32px;
	margin: 0px;
}

h6 {
	text-align: center;
	font-size: 14px;
	color: #7D7E82;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:200;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color:#7D7E82; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	text-decoration: underline;
	font-size: 14px;
}
a:visited {
	color: #7D7E82;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #ff9900;
	text-decoration: none;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 90%;
	background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
	float: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}


.header {
	width: 100%;
	float: left;
	padding-top: 10px;
}

body {
margin: 0
}

/* header */
header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 20px;
}
/* Corporate logo */
.corporate-logo {
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 568px) {
.corporate-logo {
flex: 1;
}
}
/* Hamburger */
.hamburger {
display: none;
color: #888;
}
.hamburger:hover {
color: #ff9900;
}

@media screen and (max-width: 568px) {
.hamburger {
display: block;
}
}
/* Nav */

@media screen and (max-width: 568px) {
.nav {
display: none;
width: 100%;
text-align: center;
}
}

.nav a {
display: inline-block;
text-decoration: none;
font-size: 17px;
padding: 35px 0 14px 40px;
font-family: "museo-slab", Verdana, Geneva, sans-serif;
font-weight:300;
color: #888;
}
@media screen and (max-width: 568px) {
.nav a {
display: block;
text-align: center;
padding: 0 0 10px 0;
}
}

.nav a:hover {
color: #ff9900;
}
@media screen and (max-width: 568px) {
.nav a:hover {
padding: 0 0 10px 0;
}
}
.nav .active {
color: #ff9900;
}
/* show hide nav for mobile */
.showHideNav {
display: block;
}

.logo {
	display: flex;
	align-items: center;
	width: 20%;
	float: left;
}

.fullwidthimage {
	width: 100%;  
	height: auto;
}



.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.web-section {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
	background-color: #ff9900;
	padding-top: 10px;
	padding-left: 35px;
	padding-right: 35px;
	padding-botton:35px;
}


.web-work-column {
  width: 100%;	
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #7D7E82;
  font-family: "museo-slab", Verdana, Geneva, sans-serif;
  font-weight:700;
  line-height: 6px;	
	margin-right: 5px;
	margin-left: 5px;
}


@media screen and (max-width: 568px) {
  .web-work-column {
  flex-basis: 100%;
	}
}

.workgallerycopy-fullwidth {
width: 100%;	
  float: left;
  text-align: center;
  font-size: 12px;
  color: #7D7E82;
  font-family: "museo-slab", Verdana, Geneva, sans-serif;
  font-weight:700;
  line-height: 6px;	
	margin-right: 5px;
	margin-left: 5px;
}

.website-image {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.website-image:hover {
	opacity: 0.6;
	border: 1px solid #ffffff;
}


.divider {
	width: 100%;
	padding-bottom: 10px;
	float: left;
}

.vidsectioncontainer {
	width: 100%;
	float: left;
}

.vid-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.vid-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.vid-container iframe,
.vid-container object,
.vid-container embed {
	top: 0;
	left: 0;
	text-align: center;
}
.vid-list-container {
	width: 100%;
	overflow-x: scroll;
    overflow-y: hidden;
}

.vid-list {
	width: 1344px;
	position: relative;
	top:0;
	left: 0;

}
.vid-item {
	display: block;
	width: 148px;
	float: left;
	margin: 0;
	padding: 10px;
}

.thumb {
	overflow:hidden;
	height: 84px;
}

.thumb img {
	width: 100%;
	position: relative;
	top: -13px;
}

.thumb img:hover {
	opacity: 0.6
}

.vid-item .desc {
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #7D7E82;
	margin-top:2px;
	text-align: center;
}
.arrows {
	position:relative;
	width: 100%;
}

.arrow-left {
	color: #fff;
	position: absolute;
	background: #777;
	padding: 15px;
	left: 0;
	top: -130px;
	z-index: 99;
	cursor: pointer;
}

.arrow-right {
	color: #fff;
	position: absolute;
	background: #777;
	padding: 15px;
	right: -25px;
	top: -130px;
	z-index:100;
	cursor: pointer;
}

@media (max-width: 568px) {
	.arrows {
		position:relative;
		margin: 0 auto;
		width:96px;
	}
	.arrow-left {
		left: 0;
		top: -20px;
	}

	.arrow-right {
		right: 0;
		top: -20px;
	}
}



.contactleft {
	float: left;
	width: 50%;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #7D7E82;
	text-align: left;
	margin-bottom: 10px;
	margin-right: 20px;
}

.contactright {
	float: left;
	width: 48%;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #7D7E82;
	text-align: left;
	line-height: 30px;
}

@media (max-width: 568px) {
	.contactleft {
		float: left;
		width: 100%;
		margin-right: 20px;
	}
}

@media (max-width: 568px) {
	.contactright {
		float: left;
		width: 100%;
	}
}

.fiftypercentwidth {
	float: left;
	width: 50%;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-size: 15px;
	color: #7D7E82;
	text-align: left;
	line-height: 23px;
	display:inline-block;
	
}


@media (max-width: 568px) {
	.fiftypercentwidth {
		float: left;
		width: 100%;
	}
}

.fiftypercentwidth-grey {
	float: left;
	width: 48%;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-size: 15px;
	color: #FFFFFF;
	text-align: left;
	line-height: 23px;
	display:inline-block;
	background-color: #383636;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 10px;
}


@media (max-width: 568px) {
	.fiftypercentwidth-grey {
		width: 94%;
		margin-left: 10px;
		margin-right: 10px;
	}
}

.twentyfivepercentwidth {
	float: left;
	width: 25%;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-size: 15px;
	color: #7D7E82;
	text-align: left;
	line-height: 23px;
	display:inline-block;
	
}

@media (max-width: 568px) {
	.twentyfivepercentwidth {
		float: left;
		width: 100%;
	}
}
	


.contactspace {
	float: left;
	width: 30%;
}


.contactfullwidth {
	width: 100%;
	padding-top: 5px;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #7D7E82;
	text-align: center;
	align: center;
	line-height: 24px;
	margin-bottom: 20px;
}

.contacttop {
	float:left;
	width: 100%;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #7D7E82;
	text-align: center;
	line-height: 28px;
	margin-top: 10px;
}
	


.gallerypageheader {
	width: 100%;
	float:left;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
}

.gallerypagesubheader {
	width: 100%;
	float:left;
	text-align: center;
	margin-bottom: 10px;
	padding: 0px;
}

.gallerypageimage {
	width: 100%;
	text-align: center;
}

.gallerypageback {
	width: 100%;
	text-align: center;
	margin-top: 20px;
}

.gallerypagemainimage {
	width: 100%;
	height: auto;
	}

.flex-grid {
	width: 100%;
  display: flex;
	float: left;
}



.flex-grid .col {
  flex: 1;
	font-size: 0;
}

.flex-grid .col-withspace {
  flex: 1;
	font-size: 0;
	padding-left: 10px;
	padding-right: 10px;
}


.flex-grid .col-middle {
  flex: 1;
	display: flex;
  align-items: center;
  justify-content: center;
}

.flex-grid .col-middle .img {
 width: 100%;
	display: inline-block;
	vertical-align: middle;
}




.colsingle {
	float:left;
	width: 100%;
	text-align: center;
}


@media (max-width: 568px) {
	.colsingle img {
	width: 100%;
}
}



.flex-grid-thirds {
  display: flex;
  justify-content: space-between;
}


@media (max-width: 568px) {
  .flex-grid{
	  display: block;}
   .col {
      width: 100%;
      margin: 0 0 10px 0;
    }
  }

@media (max-width: 568px) {
  .flex-grid{
	  display: block;}
   .col-middle {
      width: 100%;
      margin: 0 0 10px 0;
    }
  }

.linkedvideos {
	width: 100%;
	float: left;
	height: auto;
	display: block;
}

.linkedvideos-grey {
	width: 100%;
	float: left;
	height: auto;
	background-color: #383636;
	padding: 0px;
}


.div-videolink {
	float:left;
position: relative;
	text-align: center;
    width: 100%;
    height: 0;
    padding-bottom: 28.13%;
    display:inline-block;
    margin:0;
}


.div-videolink iframe {
   position: absolute;
    top: 0;
    left: 0;
	right: 0;
    width: 100%;
    height: 100%;
	display: inline-block;
	margin-left: 0px;
	margin-right: 0px;
}

@media (min-width: 568px) {
  .div-videolink {
	position: relative;
	text-align: center;
    width: 48%;
    height: 0;
    padding-bottom: 28.13%;
    display:inline-block;
	  margin-left: 10px;
	  margin-right: 10px;
    margin-bottom:10px;
    }
  }


* {
  box-sizing: border-box;
}
body {
  padding: 20px;
}
.flex-grid { 
  margin: 0 0 20px 0;
}
.col {
}

.flex-grid .col .img {
 width: 100%;
	display: inline-block;
	vertical-align: middle;
}

.flex-grid .col-withspace .img {
 width: 100%;
	display: inline-block;
	vertical-align: middle;
}

.flex-grid .col-top .img {
 width: 100%;
	height: auto;
		vertical-align: text-top;
	display: block;
}

.flex-grid .col .imgvert {
 height: 100%;
width: auto;
}

.flex-grid .col .imgsingle {
	display: inline-block;
}

.contactpagesheader {
	width: 100%;
	height: auto;
	}

.dividerfullwidth {
	float: left;
	width: 100%;
	margin: 0px;
}

.dividerfullwidth img {
	display: block;
}

.onlinevideos-sectiontext {
	float:left;
	width: 100%;
	text-align: center;
	font-size: 20px;
	color: #7D7E82;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
	color: white;
	margin-bottom: 15px;
}
/* -- video gallery bit -- */

.onlinevideos-socialcontent {
	float:left;
	width: 100%;
	background-color: #383636;
	padding-top: 10px;
	padding-bottom: 20px;
}


button {
    cursor: pointer;
    transition: var(--ease);
	color: var(--light);
}

button:hover {
    transform: scale(1.02);
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
}

.video-content-section {
	float:left;
	width:100%;
    grid-area: video-content-section;
    display: grid;
    grid-template-columns: 2% 1fr 2%;
    grid-template-areas: 
    ". playlist .";
}

.playlist {
    grid-area: playlist;
}


.playlist__title {
    margin: 30px 0;
}

.videos-grid {
    display: grid;
	grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
}

.video {
    height: 300px;
    grid-column-start: span 3;
    position: relative;
    transition: var(--ease);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.video:hover {
	border: 2px solid #ff9900;
}

.video i {
    cursor: pointer;
    font-size: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--light);
    opacity: 0.85;
    transition: var(--ease);
}

.video i:hover {
    opacity: 1;
}

@media only screen and (max-width: 1200px) {
    .video {
        grid-column-start: span 6;
        height: 240px;
    }
}

@media only screen and (max-width: 800px) {
    .video {
        grid-column-start: span 12;
    }
}



	
/* ~~ The footer ~~ */
.footer {
	float: left;
	width: 100%;
	background-color: #ff9900;
	text-align: center;
	align-content: center;
	padding-top: 10px;
}

.footer img {
	margin-left: 3px;
	margin-right: 3px;
	}

.gallerypicoverlay {
    opacity: 0;
    background: rgba(0,0,0,.8);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: opacity 0.5s;
	padding-top: 45%;
	padding-bottom: 45%;
	padding-left: 10px;
	padding-right: 10px;
    color: #fff;
    text-align: center;
	vertical-align: middle;
	display: table-cell;
	font-size: 17px;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
	line-height: 21px;
}

.gallery:hover .gallerypicoverlay {
    opacity: 1;
	font-size: 17px;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
}

.gallerypicoverlay a {
}

.video-content-section-lane {
	background-color: rgba(76,76,76,1.00);
	float:left;
	width:100%;
    grid-area: video-content-section-lane;
	grid-template-columns: 2% 1fr 2%;
    display: grid;
    grid-template-areas: 
    ". playlist .";
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 10px;
}

.videos-grid-lane {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.video-lane {
    height: 250px;
	grid-column-start: span 1fr;
    position: relative;
    transition: var(--ease);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.video-lane:hover {
	border: 2px solid #ff9900;
}

.video-lane i {
    cursor: pointer;
    font-size: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--light);
    opacity: 0.85;
    transition: var(--ease);
}

.video-lane i:hover {
    opacity: 1;
}


.video-content-section-cvr {
	float:left;
	width:100%;
    grid-area: video-content-section;
    display: grid;
    grid-template-columns: 2% 1fr 2%;
    grid-template-areas: 
    ". playlist .";
}

.videos-grid-cvr {
    display: grid;
	grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
}

.video-content-section-avw {
	float:left;
	width:100%;
    grid-area: video-content-section;
    display: grid;
    grid-template-columns: 2% 1fr 2%;
    grid-template-areas: 
    ". playlist .";
}

.videos-grid-avw {
    display: grid;
	grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
}


.instagram-header {
	float:left;
	width: 100%;
	text-align: center;
	background-color: #FFCD09;
	font-size: 20px;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
	color: #7D7E82;
	padding-top: 2px;
	padding-bottom: 5px;
}

.instagram-section {
	float:left;
	width: 100%;
	text-align: center;
	background-color: #FFCD09;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.gallery-thirds {
	float:left;
	width: 33.33%;
	text-align: center;
	padding-bottom: 5px;
}

@media (max-width: 568px) {
	.gallery-thirds {
		float: left;
		width: 100%;
		margin-right: 20px;
	}
}

.gallery-half {
	float:left;
	width: 50%;
	text-align: center;
	padding-bottom: 5px;
}

@media (max-width: 568px) {
	.gallery-half {
		float: left;
		width: 100%;
	}
}

.gallery-full {
	float:left;
	width: 100%;
}


.gallery-img {
 width: 100%;
	display: inline-block;
	vertical-align: middle;
}

.foursquaregrid {
  display: -ms-grid;
  display: grid;
  grid-gap: 0.5em;
  -ms-grid-rows: (1fr)[2];
      grid-template-rows: repeat(2, 1fr);
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  width: 50vw;
  height: 50vh;
}

@media screen and (max-width: 60em) {
  .foursquaregrid {
    -ms-grid-rows: (1fr)[4];
        grid-template-rows: repeat(4, 1fr);
  }
}

.grid-1 {
  -ms-grid-column: 1;
      grid-column-start: 1;
  grid-column-end: 3;
  -ms-grid-row: 1;
      grid-row: 1;
}

@media screen and (max-width: 60em) {
  .grid-1 {
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 5;
    -ms-grid-row: 1;
        grid-row: 1;
  }
}

.grid-2 {
  -ms-grid-column: 3;
      grid-column-start: 3;
  grid-column-end: 5;
  -ms-grid-row: 1;
      grid-row: 1;
}

@media screen and (max-width: 60em) {
  .grid-2 {
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 5;
    -ms-grid-row: 2;
        grid-row: 2;
  }
}

.grid-3 {
  -ms-grid-column: 1;
      grid-column-start: 1;
  grid-column-end: 3;
  -ms-grid-row: 2;
      grid-row: 2;
}

@media screen and (max-width: 60em) {
  .grid-3 {
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 5;
    -ms-grid-row: 3;
        grid-row: 3;
  }
}

.grid-4 {
  -ms-grid-column: 3;
      grid-column-start: 3;
  grid-column-end: 5;
  -ms-grid-row: 2;
      grid-row: 2;
}

@media screen and (max-width: 60em) {
  .grid-4 {
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 5;
    -ms-grid-row: 4;
        grid-row: 4;
  }
}

.callout {
  margin: 0;
  background-color: silver;
}

.textheader-white {
	text-align: center;
	font-size: 22px;
	color: #ffffff;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
	margin: 0px;
}

.flex-grid-grey {
	width: 100%;
  display: flex;
   background-color: #383636;
}

.flex-grid-grey .col {
  flex: 1;
	font-size: 0;
}
.flex-grid-grey .col .img {
 width: 100%;
	display: inline-block;
	vertical-align: middle;
}


div.threepicgallery {
  border: 0px ;
}


div.threepicgallery img {
  width: 100%;
  height: auto;
	margin: 0px;
	float:left;
}


* {
  box-sizing: border-box;
}

.row-of-three-pics {
  padding: 0px;
  float: left;
  width: 33.3%;
}


@media only screen and (max-width: 568px) {
  .row-of-three-pics {
    width: 100%;
  }
}

div.threepicgallery-grey {
  border: 0px ;
		background-color: #383636;
}


div.threepicgallery-grey img {
  width: 100%;
  height: auto;
	margin: 0px;
	float:left;
}


* {
  box-sizing: border-box;
}

.row-of-three-pics-grey {
  padding: 0px;
  float: left;
  width: 33.33%;
}  


.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


@media only screen and (max-width: 568px) {
  .row-of-three-pics-grey {
    width: 100%;
  }
}

@media only screen and (max-width: 568px) {
.div-videolink {
	float:left;
position: relative;
	text-align: center;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    display:inline-block;
    margin:0;
}
}


@media only screen and (max-width: 568px) {
.flex-grid .col-withspace {
  flex: 1;
	font-size: 0;
	padding-top: 10px;
}
}


/* NEW GALLERY PAGE TEST */


* {
  box-sizing: border-box;
}

/* Style the body */


.main-container-new {
   max-width: 1600px;
	margin-top:20px;
   margin-left: auto;
   margin-right: auto;
}

@media screen and (max-width: 700px) {
  .main-container-new {   
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
  }
}


/* Column container */
.new-gallery-page-row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.new-gallery-page-side {
  flex: 55%;
  background-color: none;
  padding: 0px;
}

/* Main column */
.new-gallery-page-text {
  flex: 35%;
  background-color: white;
  padding: 40px;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .new-gallery-page-text {   
    padding: 0px;
  }
}

/* Fake image, just for this example */
.new-gallery-img-column {
  background-color: none;
  width: 100%;
  padding: 0px;
  margin-bottom:20px;
}

.new-gallery-img-column-img {
  width: 100%;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .new-gallery-page-row {   
    flex-direction: column;
  }
}

.new-gallery-img-column iframe {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 560px; /* 16:9 */
}


@media screen and (max-width: 700px) {
  .new-gallery-img-column iframe {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto /* 16:9 */
}
}

.new-gallery-img-fiftypercent {
  width: 50%;
  float:left;
  padding: 0px;
  margin-bottom:20px;
}


@media screen and (max-width: 700px) {
  .new-gallery-img-fiftypercent {
  width: 100%;
}
}

.main-section-gallery-header-videos {
	float:left;
	width: 100%;
}


.printworkcontainer {
	width: 100%;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 10px;
}


.videoworkcontainer {
	width: 100%;
	float: left;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 25px;
	padding-left: 25px;
	padding-right: 25px;
	background-color: #383636;
}

.videoworkcontainer-plainbkgr {
	width: 100%;
	float: left;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 10px;
	background-color: #FFFFFF;
}

.webworkcontainer {
	width: 100%;
	float: left;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 10px;
	background-color: #FFFFFF;
}


div.gallery {
	display: inline-block;
	position: relative;
}

div.gallery:hover {
	opacity: 0.6;
	border: 2px solid #ff9900;
}

div.gallery img {
  width: 100%;
  height: auto;
  display: block;
}

div.desc {
	padding: 5px;
	text-align: center;
}

* {
	box-sizing: border-box;
	text-align: left;
}

.responsive {
  float: left;
  width: 20%;
  line-height: 0px;
}

@media only screen and (max-width: 568px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 768px) {
  .responsive {
    width: 100%;
  }
}


.contactform {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 17px;
	color: #7D7E82;
}

@media only screen and (max-width: 768px) {
  .contactform {
    width: 100%;
	  margin-left: 0px;
	  margin-right: 0px;
  }
}

	
.sendmessagebutton {
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: 700;
	height: 30px;
	width: 160px;
	border: 4px;
	text-align: center;
	align: center;
	border-color: #4D4D4D;
	color: #ffffff;
	background-color: #4D4D4D;
	} 

.sendmessagebutton:hover {
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: 700;
	height: 30px;
	width: 160px;
	border: 4px;
	text-align: center;
	align: center;
	border-color: #4D4D4D;
	color: #ffffff;
	background-color: #ff9900;
	}
	
.contactform #Name {
	width: 550px;
	height: 30px;
	border: 1px solid #ff9900;
	background-color: #ffffff;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 17px;
	margin-bottom: 10px;
}

.contactform #email {
	width: 550px;
	height: 30px;
	border: 1px solid #ff9900;
	background-color: #ffffff;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 17px;
	margin-bottom: 10px;
}

.contactform #textarea {
	width: 800px;
	height: 180px;
	border: 1px solid #ff9900;
	background-color: #ffffff;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 17px;
	margin-bottom: 10px;
}


@media screen and (max-width: 568px) {
  	.contactright #Name {
	width: 350px;
	height: 30px;
	border: 1px #BCBBBB;
	background-color: rgba(255,204,51,0.60);
	}


	.contactright #email {
	width: 350px;
	height: 30px;
	border: 1px #BCBBBB;
	background-color: rgba(255,204,51,0.60);
	}

	.contactright #textarea {
	width: 350px;
	height: 180px;
	border: 1px #BCBBBB;
	background-color: rgba(255,204,51,0.60);
	}
}

.contactform-thanks {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	font-family: "news-gothic-std", Verdana, Geneva, sans-serif;
	font-size: 17px;
	text-align: center;
	color: #7D7E82;
	margin-bottom: 20px;
}

@media only screen and (max-width: 768px) {
  .contactform-thanks {
    width: 100%;
	  margin-left: 0px;
	  margin-right: 0px;
  }
}


.video-image-half-each {
	display: flex;
}

.video-image-half-each > * {
  width: 50%;
}

@media only screen and (max-width: 768px) {
  .video-image-half-each {
    width: 100%;
	  margin-left: 0px;
	  margin-right: 0px;
  }
}

.new-gallery-page-row-dark {  
  display: flex;
  flex-wrap: wrap;
	background-color: #575555;
	margin-bottom: 30px;
	margin-top: 30px;

}

.thirtythreecentwidth {
	float: left;
	width: 33%;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-size: 15px;
	color: #7D7E82;
	text-align: left;
	line-height: 23px;
	display:inline-block;
	
}


@media (max-width: 568px) {
	.thirtythreecentwidth {
		float: left;
		width: 100%;
	}
}

.onlinevideos-printbasedtext {
	float:left;
	width: 100%;
	text-align: center;
	font-size: 20px;
	color: #7D7E82;
	font-family: "museo-slab", Verdana, Geneva, sans-serif;
	font-weight:700;
	margin-bottom: 15px;
}