* {
  box-sizing: border-box;
}
body{
  margin: 0;
  font-family: Arial;
  line-height:22px;
}

a {
  text-decoration: none;
  color:black;
}

h1{font-size:32px;line-height: 0px;}

h2{font-size:28px;line-height:32px;}

h3{font-size:24px;line-height: 28px;}

p{line-height:22px;}

img{width: 100%;}

.edc-yellow
{
	background-color:white;
	margin:32px;
    margin: 0 auto;
    /*max-width:1280px;*/
}

.m36{margin-right:36px!important;}
.b36{padding-bottom:32px;}
.top-line{border-top:solid black 1px;padding-top:32px;margin-top:24px;border-bottom:1px solid black; margin-bottom:32px;}
.credits{font-size:14px;}

.edc-header{background-color:#FFDD00;width:100%;padding:48px 10% 48px 10%; /*background-image:url("../images/edc-s.svg");background-repeat:no-repeat;background-size:110px;background-position:200px 0px;*/}

/* header */

.header {
  /*background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
  position: fixed;*/
  width: 100%;
  z-index: 3;
  margin-bottom:50px;
}

.header ul {
  margin: 0;
  padding-bottom:16px;
  list-style: none;
  overflow: hidden;
  /*background-color: #fff;*/
}

.header li a {
  display: block;
  padding: 20px 0px 20px 0px;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
border-bottom:4px solid black;
}

.header .logo3 {
  display: block;
  float: left;
  font-size: 2em;
  padding: 0px 16px 16px 0px;
  text-decoration: none;
  width:204px;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height 1.1s cubic-bezier(.35,.61,.45,1);
}

.menu {
  width:70%;padding-left: 0px;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 16px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .5s ease;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .3s ease-in-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu {
  max-height: 100%;
}

.header .menu-btn:checked~.menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked~.menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked~.menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
  top: 0;
}


.container{width:100%;padding:48px 10% 32px 10%;}
.s32{width:100%;height:32px;float:left;}
.s48{width:100%;margin-top:48px;float:left;}

.nav{display: flex;padding: 16px;overflow: hidden;}
.logo{flex:10%;}
.logo1{float:left;width:40%;}
.logo3{position:absolute;padding-top:0px;}
.navigation{flex:30%;}
.social{text-align:right;margin-top:8px;}
.sm{width:18px;}
.mi{display:flex;margin-right:32px;}
.center{text-align:center;}

#gallery { position: relative; }
#gallery > img { position: absolute; left: 0; top: 0; display: none; }
#gallery > img:first-child { display: block; }
#gallery{height:60vh;overflow:hidden;margin: 0 auto;/*top:32px; margin-bottom:48px;*/}
.mid{ top: 0; bottom: 0; left: 0; right: 0; margin: auto;}

/*#gap{height:72px; margin: 0 auto;width:100%;}*/
/*ul {
   list-style-type: none;
   margin: 0;
   overflow: hidden;
   margin-left: -24px;
}

li {
  float: left;
  padding-right: 32px;
}*/

.more{font-weight:bold;margin-top:16px;border-bottom:4px solid #FFDD00;}
/*.more a {
  text-decoration: none;
}
a.more:hover { border-bottom:4px solid black;}
.more a:hover { border-bottom:4px solid black;}*/

a.social {margin:0px 0px 0px 16px;}
.social a{margin:0px 0px 0px 16px;}
a.social:hover { border-bottom:4px solid black;padding-bottom:4px;margin:0px 0px 0px 16px;}
.social a:hover { border-bottom:4px solid black;padding-bottom:4px;margin:0px 0px 0px 16px;}
a.hello {text-decoration:none;}
.nav .icon {display: none;}

.title {
  margin-top:0px;
  width:20%;
  float:left;
  font-size:18px;
  border-top:0px solid white;
}

.bigtext{
  float:right;
  font-size:18px;
  line-height:24px;
  width:50%;
  padding-left:16px;
  padding-right:16px;
  margin: 8px 0px 48px 0px;
}


.holder{width:100%;display:flex;margin-left:16px;}
.w50{width:50%;}
.w40{width:40%;margin-left: -16px;}
.w10{width:10%;padding-right:32px;text-align:right;color:white;}

.l24{padding-left:24px;}
.l16{padding-left:24px;}
.p24{padding-top:24px;margin-bottom:24px;}
.ts{font-size:14px;}

.active {
  border-bottom:4px solid white;padding-bottom:16px;padding-right:16px;
}

.full{width:100%;}

.portrait{width:50%;padding-left:16px;float:right;padding-right:16px;margin-top:48px;}

.footer{height:48px;border-bottom:0px solid white;margin-bottom:48px;}

/* Create two equal columns that sits next to each other */

.row {
  display: flex;
  align-content: space-between;
  width:100%;
}

.row .column:not(:first-child) {
  margin-left: 0px;                       /*  on all but the first column  */
}
.row .column:not(:last-child) {
  margin-right: 32px;                      /*  on all but the last column  */
}

.column {
  flex: 50%;
  width:50%;
  margin-bottom:32px;
  display:block;
  border-bottom:solid 0px white;
}

.column img {
  vertical-align: middle;
  flex: 100%;
  width:100%;
}

a.column:hover {border-bottom:4px solid #FFDD00;padding-bottom:8px;opacity:0.8;}
.column a:hover {border-bottom:4px solid #FFDD00;padding-bottom:8px;opacity:0.8;}
.column>a {display: block;border-bottom:4px solid black;padding-bottom:8px;}

a.bigtext:hover {color:#FFDD00;border-bottom:4px solid #FFDD00;padding-bottom:8px;opacity:0.8;}
.bigtext a:hover {color:#FFDD00;border-bottom:4px solid #FFDD00;padding-bottom:8px;opacity:0.8;}
.bigtext>a {border-bottom:4px solid black;padding-bottom:8px;}

.detail{padding:8px;}

.contact{
  float:left;
  width:25%;
  margin-bottom: 48px;
  margin-top:32px;
}

.strip{
  width:100%;
  margin: 98px 16px 48px 16px;
}

.map{width:100vh;height:100%;padding:16px;float:left;}
iframe {
    max-width: 100vw;
    max-height: 90vw; /* height/width ratio = 315/560 = .5625 */
}

.copyright{font-size:12px;width:100%;margin-top:48px;border-top:solid 1px black;padding-bottom:16px;}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other 
@media screen and (max-width: 900px) {
	.logo{flex:50%;width:50%;}
	.bigtext{width:70%;padding:16px;margin: 48px 0px 48px 0px;}
  }*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other 
@media screen and (max-width: 650px) {
	.logo{flex-direction:column;flex:100%;width:100%;}
	.bigtext{width:100%;padding:16px;margin: 48px 0px 48px 0px;}

  }*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	.nav{flex-direction:column;flex:100%;width:100%;}
	.social{flex-direction:column;flex:100%;width:100%;}
		.row{flex-direction:column;flex:100%;width:100%;}
	.column{flex-direction:column;flex:100%;width:100%;}
  }

/*top nav code*/
.topnav {
  overflow: hidden;
  background-color: red;javascript:void(0)
}

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

.topnav a:hover {
  border-bottom:4px solid black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}


@media screen and (min-width : 600px) and (max-width : 841px) {
    .edc-header{padding: 48px 4% 48px 4%;}
}


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }

  .header li a {
    padding: 8px 4px 2px 0px;
        padding-left: 0px;
        margin-right:24px;
  }

  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }

  .header .menu-icon {
    display: none;
  }
}

/* section */

.section {
  overflow: hidden;
  margin: auto;
  max-width: 1400px;
}

.section a {
  position: relative;
  float: left;
  width: 100%;
}

.section a img {
  width: 100%;
  display: block;
}

.section a span {
  color: #fff;
  position: absolute;
  left: 5%;
  bottom: 5%;
  font-size: 2em;
  text-shadow: 1px 1px 0 #000;
}

.section-split a span {
  display: none;
}

.section-split a:hover span {
  display: block;
}


/* 48em = 768px */

@media (min-width: 48em) {
  .section-split a {
    width: 50%;
  }

}


/*screen smaller than... */
@media (max-width:767px) 

{

.edc-header{padding:16px;}

.container{padding:16px;}

a.social {margin:0px 0px 0px 0px;}

#gap{height:16px; margin: 0 auto;width:100%;}

  .bigtext {
    width: 100%;
    margin: 0px 0px 24px 0px;
    padding-left:0px;
}

.sm{margin-left:0px;margin-right:32px;width:32px;}

.menu{width:100%;font-size:24px;margin-top:32px;padding:0px}

.header .menu-btn:checked~.menu {
    max-height: 100vh;;
}

.header{margin-top:10px;margin-bottom:0px;}

.header li a {
    margin-top: 22px;
}

.header li a {
    padding: 0px 0px 20px 0px;
}

.header ul {
    padding-top: 0px;padding-bottom:0px;
}

li{border-bottom:1px solid white;}

.menu-icon{margin-bottom:24px}

.social{border-bottom:0px solid white;padding-bottom:32px;padding-top:16px;}

.header .menu-icon .navicon {
    width: 37px;
}

.social{text-align:left;}

.contact{width: 100%;
    margin-bottom: 48px;
    margin-top: 32px;
}

.s48{margin-top:0px;}

.strip {
    width: 100%;
    margin: 0px 16px 48px 16px;
}

#gallery{height:35vh;margin-bottom:0px;}

}