@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,600,600italic,700italic,800,800italic|Open+Sans+Condensed:300,300italic,700');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@font-face{ font-family:"elementskit"; src:url("/fonts/elementskit.woff")format("woff"); font-weight:normal; font-style:normal; font-display:swap }
@font-face{ font-family:"chocolate"; src:url("/fonts/paint-with-chocolate.woff")format("woff"); font-weight:normal; font-style:normal; font-display:swap }


body { font:16px/24px "Open Sans", sans-serif; color:#fff; background-color:#000; margin:0; padding:0 }
p, div, h1, h2, h3, h4, h5, input, select, textarea, ul, li, a { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
div { border:0 }
p, h1, h2, h3, h4, h5 { margin:0 0 20px 0 }
hr { margin:30px 0 40px 0; width:100px; border-color:#ac8e47 }
hr.stripes { width:100%; border:0; height:13px; margin:0 0 10px 0; background:url( "/images/stripes.png" ) repeat-x 0 0/9px 13px }
h2 { font:64px "chocolate", sans-serif; color:#ac8e47; text-transform:uppercase }
h3 { font:bold 40px "Lato", sans-serif }
h4 { font:bold 20px "Lato", sans-serif; color:#ac8e47 }
ul { list-style:none; padding:0 }
ul.standard { list-style:disc; padding-left:30px }
a { text-decoration:none; color:#fff }
a:hover { color:#ac8e47 }
.fs48 { font-size:48px }
.fs42 { font-size:42px }
.fs40 { font-size:40px }
.fs36 { font-size:36px }
.fs32 { font-size:32px }
.fs28 { font-size:28px }
.fs22 { font-size:22px }
.fs18 { font-size:18px }
.fcwhite { color:#fff }
.fcgold { color:#ac8e47 }
.nm { margin:0 }
.center { text-align:center }

table.targets { border-top:1px solid #333; border-bottom:1px solid #333 }
table.targets th { width:28px; text-align:left; padding-top:5px }
table.targets td.spacer { line-height:10px }
table.targets svg { width:22px }

#header { background:linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(25, 21, 13, 1) 100%); }
#header img { width:420px; max-width:80%; margin:10px 10% }

#navigation { border:transparent; background:linear-gradient(180deg,rgba( 25, 21, 13, 1 ) 0%, rgba(43, 37, 20, 1) 100%); font:bold 13px/18px "Open Sans", sans-serif }

#menu { float:left; width:68%; padding-left:10px }
#menu a { display:block; padding:10px 15px; height:40px }
#menu a:hover, #menu a.active { color:#80672c }
#menu a sup { font-size:10px; font-weight:bold; color:#fee }
#menu ul { padding:0 }
#menu li { display:block; float:left; position:relative; padding:0 }
#menu li ul { padding:0; visibility:hidden; opacity:0; display:none; position:absolute; left:0; top:41px; background:#887038 }
#menu li ul li { width:320px; padding:0 }
#menu li ul li a { color:#fff }
#menu li ul li a:hover, #menu li ul li a.active { color:#fff; background:#775f28 }
#menu li ul li:hover, #menu li ul li a:active { background:#775f28 }
#menu li:hover > ul,
#menu li ul:hover { visibility: visible; opacity: 1; display: block }
#menu li ul li { clear:both }

#dropdown_menu { height:0; overflow:hidden; transition:0.4s; background:#ac8e47 }
#dropdown_menu li ul { margin-left:20px; border-left:2px solid #775f28 }
#dropdown_menu li ul li { padding:0 0 0 2px }
#dropdown_menu a { display:block; width:350px; padding:3px 10px; margin:0 0 1px 0 }
#dropdown_menu a:hover, #dropdown_menu a.active { color:#fff; background:#775f28 }
#dropdown_menu a sup { font-size:10px; font-weight:bold; color:#fee }

#altmenu { display:none; text-align:right; margin:0 30px 0 0 }
#contact {  float:right; width:32%; text-align:right }
#contact ul { padding:0 }
#contact li { display:inline; margin:0 30px 0 0; font:bold 16px/24px "Open Sans", sans-serif }
#contact li .icon { font-size:24px; font-weight:normal; color:#80672c }
#content { background:url("/images/background.png") repeat }
.darken { background-color:rgba( 0, 0, 0, .6 ); border:1px solid transparent; width:100%; height:100% }
.darken2 { background:linear-gradient(90deg,rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%); border:1px solid transparent; width:100%; height:100% }
#heading { margin:0 0 50px 0; padding:0; border:transparent }
#heading_content { width:600px; max-width:90%; margin:80px auto; text-align:center }
.content600 { width:600px; max-width:90%; margin:80px auto; text-align:center }
.camera { background:url("/images/camera.jpg") center/cover no-repeat }
.camera2 { background:url("/images/camera.png") center/cover no-repeat }
.light { background:url("/images/light.jpg") center/cover no-repeat }
.blues {  background:url("/images/bluesbrothers.jpg") center/cover no-repeat }
.desk {  background:url("/images/desk.jpg") center/cover no-repeat }
.reportage {  background:url("/images/reportage.jpg") center/cover no-repeat }
.podcast {  background:url("/images/podcast-studio.jpg") center/cover no-repeat }
.stageshot {  background:url("/images/stageshot.jpg") center/cover no-repeat }
a.button { background:#887038; font:bold 16px "Open Sans", sans-serif; border-radius:5px; padding:10px 20px }
a.button:hover { background:#775f28; color:#fff }
a.play_button { display:inline-block; text-align:center; font:40px/95px "Open Sans", sans-serif; height:100px; width:100px; background:#887038; border-radius:50px }
a.play_button:hover { background:#775f28; color:#fff }

#section1{ width:1400px; max-width:100%; margin:0 0 80px auto }
#section1_content { float:left; background-color:rgba( 0, 0, 0, .6 ); border:1px solid transparent; padding:50px 30px; width:50%; margin:20px 0 20px 0 }
#section1_img { float:right; width:50%; text-align:center }
#section1_img img { filter:grayscale(1) brightness(0.7); max-height:850px }

#section2 { text-align:center; width:100%; height:400px; background:url("/images/desk.jpg") center/100% no-repeat }
#section2_content { margin:100px 20px }
#section2 p { margin:0 0 40px 0 }

#section3 { width:700px; max-width:100%; padding:0 30px; margin:80px auto 30px auto; text-align:center }

#tiles { width:1240px; max-width:100%; margin:0 auto }
#tiles .tile_outer { width:31%; margin:1%; float:left; height:540px; border:2px solid #ac8e47; border-radius:3px; background:#191919; overflow:hidden }
#tiles .tile { width:100%; height:100%; position:relative }
#tiles .tile_image { transition:1s; position:absolute; top:0; right:0; bottom:0; left:0; background-size:cover; background-position:center; filter:grayscale(1) brightness(0.6) }
#tiles .tile1 { background-image:url("/images/stageshot.jpg") }
#tiles .tile2 { background-image:url("/images/podcast-studio.jpg"); background-size:cover; background-position:center }
#tiles .tile3 { background-image:url("/images/tripod.jpg"); background-size:cover; background-position:center }
#tiles .tile4 { background-image:url("/images/guitarist.jpg"); background-size:cover; background-position:center }
#tiles .tile5 { background-image:url("/images/soundbooth.jpg"); background-size:cover; background-position:center }
#tiles .tile6 { background-image:url("/images/models.jpg"); background-size:cover; background-position:center }
#tiles .tile:hover .tile_image { filter:grayscale(0) }
#tiles .tile:hover .tile_text { bottom:0 }
#tiles .tile_number { position:absolute; top:0; right:10px; font:bold 80px "elementskit", sans-serif; color:rgba( 255, 255, 255, 0.4 ) }
#tiles .tile_text { transition:1s; position:absolute; bottom:-110px; left:0; right:0; padding:30px 30px 40px 30px; background:rgba( 0, 0, 0, 0.6 ); font-size:14px }

#tiles2 { width:1240px; max-width:100%; margin:0 auto }
#tiles2 .tile { width:31%; margin:20px 1%; padding:50px 0; float:left; height:340px; border:2px solid #ac8e47; border-radius:3px; background:#191919; text-align:center }
#tiles2 .tile_centered { width:31%; margin:20px 35% 20px 34%; padding:50px 0; clear:both; height:340px; border:2px solid #ac8e47; border-radius:3px; background:#191919; text-align:center }

#section4 { width:1400px; max-width:100%; margin:40px auto 40px 0 }
#section4_left { float:left; width:48%; height:600px; border-top-right-radius:300px; border-bottom-right-radius:300px }
.section4_blues { background:url("/images/bluesbrothers.jpg") center/cover }
.section4_singer { background:url("/images/singer.jpg") center/cover }
.section4_photographer { background:url("/images/photographer.jpg") center/cover }
.section4_soundbooth { background:url("/images/soundbooth.jpg") center/cover }
.section4_videoproduction { background:url("/images/videoproduction.jpg") center/cover }
.section4_podcast { background:url("/images/podcast-studio.jpg") center/cover }
#section4_left .darken { border-top-right-radius:300px; border-bottom-right-radius:300px }
#section4_left_content { padding:180px 80px 80px 30px }
#section4_right { float:left; width:48%; margin-left:4%; padding:80px 30px }

#section5 { background:url("/images/podcast-studio.jpg") center/cover }
#section5_content { width:700px; max-width:100%; padding:0 30px; margin:140px auto; text-align:center }

#section6 { padding:80px 30px; text-align:center; position:relative }
.play_video { position:absolute; top:50px; left:0; width:100%; text-align:center }
.play_video a { font:120px "elementskit", sans-serif }

#section7 { width:1400px; max-width:100%; margin:80px 0 80px auto }
#section7_content {float:right; background-color:rgba( 0, 0, 0, .6 ); border:1px solid transparent; padding:50px 30px; width:50%}
#section7_img { float:left; width:50%; text-align:center; background:rgb( 0, 0, 0, 0.6 ); padding:30px }
#section7_img img { max-width:100%; max-height:850px; border-radius:5px }

#three_column { width:1400px; max-width:100%; margin:80px 0 80px auto; padding:0 5% }
#three_column .column { float:left; width:31%; margin:1%; padding:30px; background:rgb( 0, 0, 0, 0.6 ); border-radius:5px }

#two_column { width:1300px; max-width:100%; margin:50px auto }
#left_column { float:left; width:68%; padding:30px }
#right_column { float:right; width:32%; padding:30px }
#details { background:#171717; padding:30px; border-radius:10px }
.detail { border-bottom:1px solid #333; padding:20px 0}
.detail .icon { float:left; width:50px; font:30px "elementskit", sans-serif; color:#ac8e47 }
.detail .title { font:bold 16px/24px "Open Sans", sans-serif; color:#ac8e47; text-transform:uppercase }
.detail .text { padding-left:50px; font:bold 16px/24px "Open Sans", sans-serif }

#banner3 { display:block; margin:0 0 80px 0 }
#banner2 { display:none; margin:0 0 80px 0 }
#banner1 { display:none; margin:0 0 80px 0 }

#terms { padding:30px; width:1000px; max-width:100% }
#terms a { text-decoration:underline }

#footer { background:#000 url("/images/ss-large-logo.png") no-repeat center/100% }
#footer_darken { background:linear-gradient(180deg,rgba(0, 0, 0, 0.95) 0%, rgba(25, 21, 13, 0.75) 100%); border:1px solid #000; width:100%; height:100% }
#footer_content { width:1200px; max-width:100%; margin:20px auto }
#footer_left { float:left; width:50%; padding:30px }
#footer_right { float:right; width:390px; padding:30px; text-align:right }
#footer_bottom { width:1300px; max-width:100%; margin:100px auto 0 auto; padding:0 30px 20px 10px; text-align:right; color:#444 }
#footer_bottom a { transition:0.4s; white-space: nowrap }
#footer input { border-radius:5px }
#footer input[type='text'] { background:#000; color:#fff; border:1px solid #111; font-size:16px; padding:15px; margin:0 0 8px 8px }
#footer input[type='submit'] { background:#887038; font:bold 16px "Open Sans", sans-serif; border:0; padding:15px }
#footer input[type='submit']:hover { background:#775f28 }
#footer .small_input { width:150px }
#footer .large_input { width:310px }
#footer .submit { width:310px }
.social { white-space:nowrap; text-align:center; font:20px "elementskit", sans-serif }
.social a { color:#ac8e47 }
#footer .social { width:310px; margin:20px 0 0 0 }
#footer hr { margin:8px 0; width:100%; border-color:#fff }
#footer_bottom .copyright { color:#fff; font-size:13px }
#footer_logo { float:left; margin:14px 0 0 0; width:14% }
#footer_logo img { width:100% }
#footer_bottom_content { float:right; width:84% }




.greyscale { filter: grayscale(1) contrast(1) brightness(1); mix-blend-mode: multiply }

table.big_bullets { }
table.big_bullets tr { height:110px }
table.big_bullets th { font-weight:normal; width:110px }
table.big_bullets svg { width:40px }
.big_bullet { font:40px/80px "elementskit", sans-serif; vertical-align:middle; text-align:center; height:80px; width:80px; background:#887038; border-radius:40px; margin:0 auto 20px auto }

/* MENU BUTTON */
.menu_button { display:inline-block; cursor:pointer }
.menu_button_bar1, .menu_button_bar2, .menu_button_bar3 { width:20px; height:4px; background-color:#fff; margin:4px 0; transition:0.4s }
.menu_button:hover .menu_button_bar1, .menu_button:hover .menu_button_bar2, .menu_button:hover .menu_button_bar3 { background-color:#ac8e47 }
.change .menu_button_bar1 { transform:translate(0, 8px) rotate(-45deg) }
.change .menu_button_bar2 { opacity:0 }
.change .menu_button_bar3 { transform:translate(0, -8px) rotate(45deg) }
/* END MENU BUTTON */

.icon { font-family:elementskit }
.clear { clear:both; height:0; line-height:0 }

.full_width_video { width:100%; border-radius:10px }

.fullscreen_video { position:fixed; top:30px; right:30px; bottom:30px; left:30px; border:1px solid transparent; background:rgba( 0, 0, 0, 0.7 ) }
.fullscreen_video video { width:100%; height:100% }
.close_fullscreen_video { position:fixed; top:40px; right:40px; font:bold 22px/28px "elementskit", sans-serif }
.close_fullscreen_video a { color:#fff; display:inline-block; width:40px; height:40px; border:4px solid #fff; border-radius:20px; text-align:center }
.close_fullscreen_video a:hover { border-color:#ac8e47; color:#ac8e47 }
.hidden { display:none }

.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.youtube iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

@media screen and (max-width:1150px) {
	#menu { display:none }
	#altmenu { display:block }
	#contact { width:100% }
	.open #dropdown_menu { height:375px }
	#left_column { float:none; width:100% }
	#right_column { float:none; width:100% }	
}

@media screen and (max-width:1024px) {
	#section4_left_content { padding:160px 80px 80px 30px }
}

@media screen and (max-width:980px) {
	#section1 { width:100%; margin:80px 0 0 0 }
	#section1_content { float:none; width:100%; margin:0 }
	#section1_img { float:none; width:100%; height:400px; margin:0; padding:0; overflow: hidden; }
	#section1_img img { width:100%; margin-top:-100px }
	.tile_outer { width:48% }	
	#section4_left { float:none; width:100% }
	#section4_left_content { padding:200px 80px 80px 30px }
	#section4_right { float:none; width:100%; margin-left:0; padding:80px 30px }
	#section8_left { float:none; width:100% }
	#section8_left_content { padding:200px 80px 80px 30px }
	#section8_right { float:none; width:100%; margin-left:0; padding:80px 30px }
	#section7 { width:100%; margin:80px 0 }
	#section7_content { float:none; width:100%; margin:0 }
	#section7_img { float:none; width:100%; height:400px; margin:0; padding:0; overflow:hidden }
	#section7_img img { width:100%; margin-top:-100px }
	#footer_bottom { margin:30px auto 0 auto }
	#footer_logo { float:none; margin:0; width:100%; text-align:center }
	#footer_logo img { width:300px }
	#footer_bottom_content { float:none; width:100%; text-align:center }
	#three_column { width:100%; padding:0 }
	#tiles { width:100% }
	#tiles .tile_outer { width:48% }
	#left_column { float:none; width:100% }
	#right_column { float:none; width:100% }
	#banner3 { display:none }
	#banner2 { display:block }
	.play_video { top:70px }
	.play_video a { font:160px 'elementskit', sans-serif }
}

@media screen and (max-width:800px) {
	#footer { background:#000 url("/images/ss-large-logo.png") no-repeat center/cover }
	#footer_left { float:none; width:100%; text-align:center }
	#footer_right { float:none; width:100%; padding:30px; text-align:center }
	#footer .small_input { width:100% }
	#footer .large_input { width:100% }
	#footer .social { width:100% }
	#header img { max-width:90%; margin:10px 5% }
	#three_column .column { float:none; width:100%; margin:0 0 20px 0; border-radius:0 }
	#tiles2 { width:100% }
	#tiles2 .tile { width:98%; margin:10px 1% 10px 1%; float:none }
	#tiles2 .tile_centered { width:98%; margin:0 1% 10px 1% }
}

@media screen and (max-width:630px) {
	#section2 { background-position:center; background-size:cover }
	#section2_content { margin:50px 20px }
	.tile_outer { width:98% }
	#header img { max-width:96%; margin:10px 2% }
	#section4_left_content { padding:140px 80px 80px 30px }
	#section8_left_content { padding:140px 80px 80px 30px }
	#tiles .tile_outer { width:98%; margin:0 1% 10px 1% }
	#banner2 { display:none }
	#banner1 { display:block }
	.play_video { top:180px }
	.play_video a { font:260px 'elementskit', sans-serif }
}

@media screen and (max-width:500px) {
	#section4_left_content { padding:100px 80px 80px 30px }	
}

@media screen and (max-width:350px) {
	#section4_left_content { padding:40px 80px 80px 30px }	
}