@charset"utf-8";
@font-face {
	font-family:'bebas';
	src:url('../fonts/bebas___-webfont.eot');
	src:url('../fonts/bebas___-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/bebas___-webfont.woff') format('woff'), url('../fonts/bebas___-webfont.ttf') format('truetype'), url('../fonts/bebas___-webfont.svg#bebasregular') format('svg');
	font-weight:normal;
	font-style:normal
}
@font-face {
	font-family:'bebas_n';
	src:url('../fonts/bebasneue-webfont.eot');
	src:url('../fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/bebasneue-webfont.woff') format('woff'), url('../fonts/bebasneue-webfont.ttf') format('truetype'), url('../fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg');
	font-weight:normal;
	font-style:normal
}
@font-face {
	font-family:'open_sansCnLtIt';
	src:url('../fonts/opensans-condlightitalic-webfont.eot');
	src:url('../fonts/opensans-condlightitalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-condlightitalic-webfont.woff') format('woff'), url('../fonts/opensans-condlightitalic-webfont.ttf') format('truetype'), url('../fonts/opensans-condlightitalic-webfont.svg#open_sansCnLtIt') format('svg');
	font-weight:normal;
	font-style:normal
}
body {
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	background:#333;
	color:#fff;
	font-size:1.1em;
	line-height:1.5;
	text-align:center
}
img {
	display:block;
	width:100%;
	height:auto
}
h1, h2, h3 {
	margin:0;
	padding:5px 0
}
p {
	margin:0;
	padding:1em 0
}
.btn {
	display:inline-block;
	background:#333;
	color:#fff;
	text-decoration:none;
	padding:1em 2em;
	border:none;
	margin:0.5em 0;
	box-shadow:1px 1px 1px 1px #888888;
	border-radius:8px
}
.btn:hover {
	background:#eaeaea;
	color:#333
}
#showcase {
  height:300px;
  min-height:300px;
  max-height:300px;
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden;
}
#showcase .bg-image {
  position:absolute;
  background-color:#000;
  background-image:url("https://www.eriksummers.com/images/ErikSun3.jpg");
  background-position:right center;
  background-repeat:no-repeat;
  background-size:cover;
  width:100%;
  max-height:300px;
  min-height:300px;
  z-index:-1;
  opacity:0.9;
  float:none;
  margin-top:0;
}
#section-a .content-wrap, #showcase .content-wrap {
	padding:0 1.5em;
	font-size: 12pt;
}
#showcase .content-wrap p {
	text-align:justify
}
#section-a {
	background:#eaeaea;
	color:#333;
	padding-bottom:2em
}
#showcase .showcase-title {
	font-family:open_sansCnLtIt;
	padding-top: 100px;
	font-size:20px;
	line-height:25px;
	text-shadow: 6px 6px #000000;
}
#section-a .content-text {
	text-align:justify
}
#section-b {
	padding:2em 1em 1em
}
#section-b ul {
	list-style:none;
	margin:0;
	padding:0
}
#section-b li {
	margin-bottom:1em;
	background:#fff;
	color:#333
}
#section-b .card-title {
	text-align:center;
	font-family:bebas;
	word-spacing:5px;
	font-size:1.5em
}
.card-content {
	padding:1.5em;
	text-align:justify
}
.card img {
	height:auto
}
#section-c {
	background:#fff;
	color:#333;
	padding:2em
}
#section-c .content-title {
	font-family:bebas;
	word-spacing:5px
}
#section-d a:link {
	text-decoration:none;
	color:#fff
}
#section-d a:visited {
	text-decoration:none;
	color:#fff
}
#section-d a:hover {
	text-decoration:none;
	color:#bbb
}
#section-d a:active {
	text-decoration:none;
	color:none
}
#section-d .box {
	padding:2em;
	color:#fff
}
.box .content-title {
	word-spacing:5px;
	font-family:bebas
}
#section-d .box:first-child {
	background:#2690d4
}
#main-footer {
	padding:2em;
	background:#000;
	color:#fff;
	text-align:center
}
#main-footer a {
	color:#2690d4;
	text-decoration:none
}
@media (min-width: 700px) {
.grid {
	display:grid;
	grid-template-columns:1fr repeat(2, minmax(auto, 25em)) 1fr
}
#showcase {
	min-height:300px;
	color:#fff;
	text-align:center
}

#section-a .content-text {
	columns:1;
	column-gap:2em
}
#section-a .content-text p {
	padding-top:0
}
#showcase .showcase-title {
	font-family:open_sansCnLtIt;
	font-size:30px;
	max-width:550px;
	padding-top: 100px;
}
#section-b ul, .content-wrap {
	grid-column:2/4
}
#main-footer div, .box {
	grid-column:span 2
}
#section-b ul {
	display:flex;
	justify-content:space-around
}
#section-b li {
	width:33%;
	margin:10px
}
}
#navbar {
	overflow:hidden;
	background-color:#333
}
#navbar a {
	float:left;
	display:block;
	color:#f2f2f2;
	text-align:center;
	padding:14px;
	text-decoration:none
}
.content {
	padding:16px
}
.sticky {
	position:fixed;
	top:0;
	width:100%
}
.sticky + .content {
	padding-top:60px
}
.youtube-video-container {
	position:relative;
	overflow:hidden;
	width:100%
}
.youtube-video-container::after {
	display:block;
	content:"";
	padding-top:56.25%
}
.youtube-video-container iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}
.topnav {
  background-color:#333;
  overflow:hidden;
  max-width:820px;
  margin:0 auto;
  transition:max-height .35s ease;
}

.topnav a {
  float:left;
  display:block;
  color:#f2f2f2;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
  font-size:17px;
  transition:background-color .25s ease, color .25s ease;
}

.active {
  background-color:#000;
  color:black;
}

.topnav .icon {
  display:none;
}

.dropdown {
  float:left;
  overflow:hidden;
}

.dropdown .dropbtn {
  font-size:17px;
  border:none;
  outline:none;
  color:white;
  padding:14px;
  background-color:inherit;
  font-family:inherit;
  height:53px;
  cursor:pointer;
}

.dropdown-content {
  display:none;
  position:absolute;
  background-color:#f9f9f9;
  min-width:160px;
  box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
  z-index:10;
}

.dropdown-content a {
  float:none;
  color:black;
  padding:12px 16px;
  text-decoration:none;
  display:block;
  text-align:left;
}

.dropdown:hover .dropbtn,
.topnav a:hover {
  background-color:#555;
  color:white;
}

.dropdown-content a:hover {
  background-color:#ddd;
  color:black;
}

.dropdown:hover .dropdown-content {
  display:block;
}


/* MOBILE MENU */
@media screen and (max-width:600px) {

  .topnav {
    max-height:53px;
    overflow:hidden;
    transition:max-height .35s ease-in-out;
  }

  .topnav.responsive {
    max-height:520px;
  }

  .dropdown .dropbtn,
  .topnav a:not(:first-child) {
    display:none;
  }

  .topnav a.icon {
    float:right;
    display:block;
    font-size:22px;
    line-height:25px;
    transition:transform .3s ease;
  }

  .topnav.responsive a.icon {
    position:absolute;
    right:0;
    top:0;
    transform:rotate(90deg);
  }

  .topnav.responsive {
    position:relative;
  }

  .topnav.responsive a {
    float:none;
    display:block;
    text-align:left;
    opacity:0;
    transform:translateY(-8px);
    animation:menuFadeIn .28s ease forwards;
  }

  .topnav.responsive a:first-child,
  .topnav.responsive a.icon {
    opacity:1;
    transform:none;
    animation:none;
  }

  .topnav.responsive .dropdown {
    float:none;
    display:block;
    opacity:0;
    transform:translateY(-8px);
    animation:menuFadeIn .28s ease forwards;
  }

  .topnav.responsive .dropdown .dropbtn {
    display:block;
    width:100%;
    text-align:left;
    background-color:#000;
  }

@media screen and (max-width:600px) {

  .topnav.responsive .dropdown-content {
    display:none;
    position:relative;
    box-shadow:none;
    background-color:#f4f4f4;
  }

  .topnav.responsive .dropdown.open .dropdown-content {
    display:block;
  }

}
}

@keyframes menuFadeIn {
  to {
    opacity:1;
    transform:translateY(0);
  }
}
.chillAudio {
	background-image:url("https://www.eriksummers.com/images/ChillPhoto.jpg");
	background-position:right;
	max-width:400px;
	height:130px;
	border:1px #000 solid;
	margin:0 auto;
	padding-top:65px;
	opacity:0.7;
	-moz-box-shadow:inset 0 0 10px #000000;
	-webkit-box-shadow:inset 0 0 10px #000000;
	box-shadow:inset 0 0 10px #000000
}
.home-intro {
  margin-top: 0;
}

@media screen and (max-width: 700px) {
  #section-a .content-wrap {
    padding-top: 20px;
  }

  .home-intro {
    margin-top: 0;
  }
}

#showcase .bg-image_portfolio {
  float: none !important;
  width: 100%;
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
}



/* Portfolio image */
#showcase .bg-image_portfolio {
  background-position: center center;
}

  #showcase .bg-image_portfolio {
    background-position: center center;
  }
@media (min-width: 700px) {
  #showcase .bg-image {
    background-color:#000;
    background-image:url("https://www.eriksummers.com/images/ErikSun3.jpg");
background-size: cover;
background-position: right center;
    background-repeat:no-repeat;
    z-index:-1;
    opacity:0.9;
    float:none;
    margin-top:0px;
  }
}
@media screen and (max-width: 699px) {

  #showcase {
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    overflow: hidden;
    position: relative;
  }

  #showcase .bg-image {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;

    /* pulls image further right */
    background-position: 90% top !important;

    /* zooms image in slightly */
    background-size: cover !important;

    width: 100%;
  }

  /* quote container */
  #showcase .content-wrap {
    width: 48%;
    padding-left: 26px;
    padding-right: 0;
  }

  /* quote text */
  #showcase .showcase-title {
    font-size: 23px;
    line-height: 34px;
    padding-top: 62px;
    text-align: left !important;
    max-width: 350px;
  }

}