/*
Title:     IAGLR Site 2021
*/

html, body {font-family: 'Roboto', sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: 'Roboto Condensed', sans-serif;}
h4 {font-weight: 700;}

#burgermenu {text-align: right;}
#burgermenu p {font-size: .65em; margin-bottom: 0; padding: .25em 0 0; font-weight: 700;}
.burger {padding: 0 0 .25em; font-weight: 700; font-size: 2em; cursor: pointer;}

#footer { background-color: #0095da; background-image: url(/i/lakemichigan-akring-unsplash.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover;  color: #fff; padding: 2rem 2rem 8rem; }
#footer ul, ol {margin-left:.75em;  }
#footer li { list-style: none; }
#footer h4 { padding: 0; margin: 0; color: #90c9df;}
#footer a {color: #e7ecf3;}
#footer a:hover {text-decoration: underline;}
#footer .socialfoot {font-size: 1.6rem; float: left; display: inline-block;}
#footer .socialfoot li {float: left; margin: 0 .5em 0 .0; font-size: 1.6em;}
#footer .socialfoot + h4 {clear: left;}
#footer .socialgroup {float: left; display:inline-block;}
#footer .socialgroup li {float:left; margin:0 .25em 0 0;}
#footer .socialgroup li img{height: 30px; width: 30px;}
#footer .socialgroup + h4 {clear: left;}
#copyright {background-color:#2c3840; color: #fff; padding: 1rem 2rem 0; border-top: 4px solid #0095da; }
#copyright p {text-align: left; }
#copyright a {color: #fff; text-decoration: underline;}
#copyright a:hover {text-decoration: none;}

#crumb { list-style: none;  padding: 0 0 1rem 0;  margin-left: 0;}
#crumb li {list-style: none; float: left; padding: 0; font-size: .8em;}
#crumb li a:link, 
#crumb li a:visited { color: #bcb8b8; text-decoration: none; }
#crumb li a:hover { color: #e57a06; }
#crumb li a { background: url("/pics/crumbsep.gif") no-repeat scroll right center transparent; margin: 0 6px 0 0; padding: 0 10px 0 0; }


.intro p.credit, p.credit { font-size: 0.7em; padding: 0 0 10px; margin-top: -15px;}

h1.homeh1+p img {
        object-fit: cover;
        object-position: center;
        height: 420px;
        width: 100%;}

/* .content h3 a, .content h4 a { text-decoration: none; } */

.spaced li {padding-bottom: 1rem;}


.content a{color:#006bb6; text-decoration: underline; }
.content a:hover {text-decoration: none; color:#0095da;}
.content a.button {color: #ffffff;}
.content .button:hover {background:#008CD3; }

.pagination .current {background: transparent;}
.pagination a.active {background: #0087ce; color: #ffffff;}
.pagination a.active:hover {color: #cccccc;}

p.date { color: #555; font-size: .8em;  text-transform: uppercase; padding-bottom:0; margin-bottom:0;}

.medialist div {margin-bottom: 1em;}
.medialist img {border: 1px solid #ececec; }
.medialist .icon img {border: 0; width: 80%;} 
.medialist h4 {margin: 0; }
.medialist h4 + p {}
.medialist .grid-x {border-bottom: 1px solid #ececec; margin-right: 1rem;}
.sideline {border-left: 1px solid #cccccc; }

.confmedia h4 {margin: 0;}
.confmedia .loc {font-style: italic;}
.confmedia .loc + p { margin-top: .5rem;}
.past {border-top: 1px solid #ececec; padding-top: 1rem;}

.callbox {
    background-color: #0095da;
    color: #fff;
    padding: .75rem 1rem .5rem;
    border-radius: 15px;
    margin: 2rem 0;
}

.callbox h4 a {color:#fff; text-decoration: underline;}
.callbox h4 a:hover {color:#fff; text-decoration: underline; color:#006bb7;}

.piccoord {text-align: center; }
.piccoord img {padding-bottom: .5em;}

.memtypes td em {font-size: .9em; color: #7f7f7f;}
.memtypes td+td {text-align: center;}

.speakergroup {margin: 0 0 2em 0; text-align: center;}
.speakergroup img {padding-bottom: .5rem;}

/*COMMITTEES */

dl.contact {margin-bottom: 2em; }
dl.contact dt {margin: 0; padding: 0;font-size: 1.1em; }
dl.contact dd { padding: 0; margin: 0;}
dl.contact dd.position { font-style: italic;}
dl.contact dd+dt { margin-top: 1em;}

.callout {background-color: #ececec; border-radius: 5px;}
.newsblock h4 { margin: 0; padding: 0; font-size: 1em; line-height: 1.4em; font-weight: normal }
.ndate { color: #555; font-size: .8em;  text-transform: uppercase; padding-bottom: .5rem;}
.morelink {text-align: right; text-transform: uppercase; font-size: .8rem; margin-top: -1rem;}

.band {background-color: #f1f1f1; padding: .5rem 0;}
#publist h3 {padding: 0 0 1rem;}

#publist img {width: 75%; box-shadow: 20px 10px #006bb7;     display: block; /*margin: 0 auto 20px;*/ margin-bottom: 20px;} 
#publist h4 {margin: 0; font-size: 1rem; }
#publist p {margin: 0; padding: 0; font-size: .9rem;}

#newjobs {border-left: 1px solid #cccccc;}
#newjobs h4 {margin: 0; font-size: 1rem; }
#newjobs p {margin: 0; padding: 0; font-size: .9rem; }
#newjobs p.ndate {margin-bottom: 1.5rem; text-transform: revert }
#newjobs p.morelink {text-align: right; text-transform: uppercase; font-size: .8rem; margin-top: -1rem; }

#publist a, #newjobs a {text-decoration: underline; }
#publist a:hover, #newjobs a:hover {text-decoration: none; color:#0095da;}

#glbband {background-color: #fff; margin-top: 20px; padding: 30px 0;}
#glbband p {text-align:left;}
#glbband h2+div { margin: 20px auto;}
#glbband h2+div img {padding-bottom: 10px;}
#glbband h2+div em { font-style: normal; color:#71716F; font-size: .8rem; text-transform: uppercase;  }
#glbband a {text-decoration: underline; }
#glbband a:hover {text-decoration: none; color:#0095da;}

.membox { background-color: rgba(0,149,217,1); color: #fff; padding: .75rem 1rem 0; text-align: center; border-radius: 15px; margin-bottom: 2rem;}
.membox h4 {color: #fff; letter-spacing: 1px;}
.membox .button {background-color: #fff;  }
#iaglrform .button,
.membox p a.button {background-color: orange; border-radius: 15px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; padding: .75rem 1rem; margin-top: .75rem;}
#iaglrform .button:hover,
.membox p a.button:hover {background-color: #006bb7; text-decoration: none;}

.side p a.button {background-color: orange; border-radius: 15px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; padding: .75rem 1rem; margin-top: .75rem;}
.side p a.button:hover {background-color: #006bb7; text-decoration: none;}
.sidehigh { background-color: rgba(0,149,217,1); color: #fff; padding: .75rem 1rem .25rem; text-align: center; border-radius: 15px; margin-bottom: 2rem;}
.sidehigh p a {color:#fff;}
.sidehigh p a:hover {text-decoration:underline; color:#fff;}


#home .intro h2 {font-style: italic; font-size: 2em; font-weight: 700;}

.packages {font-size: 90%}
.packages tr td:first-child  { text-align: left; }
table.iaglr tr {vertical-align: top;}

#iaglrform legend {font-size: 1.2em;  text-transform:uppercase; font-weight: 700;} 
#iaglrform label {font-weight: 700;}

.wygwam {padding: 1em 0;}

#iaglrform input,
#iaglrform select { border: 1px solid #b6c0c2; colo: #000;-webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;outline: none; margin-bottom: 1rem;}
#iaglrform input:not([type=submit]):focus,
#iaglrform select:focus { border: 1px solid #ffb833;}
#iaglrform textarea { border: 1px solid #b6c0c2; color: #000; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;outline: none; width: 360px; padding: 5px; }
#iaglrform .instruct {display: block; padding-left: 120px;}
#iaglrform .error {display: block; color:#b81137; margin: 10px 0 10px 120px;   line-height: 1; background:#f8e7eb;border: 1px solid #e0cfd3; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;outline: none; padding: 10px 5px; width: 360px;}
#iaglrform table input {margin-bottom: 0;}
#iaglrform .fieldnote { color: #777C7C; font-size:90%;}

.giving thead th, .giving td+td {text-align: center;}
td.ind {padding-left: 25px; }

.benefactors h4 {text-transform: uppercase; font-size:110%; text-align: center; padding: 1.5rem 0; }

.is-active > .accordion-title {background: #ececec;}
.is-active > .accordion-title {background: #ececec;}
  .is-active > .accordion-title::before {
   content: "--"; }
.accordion-content h4 { font-weight: 700; font-size: .9rem; text-transform :uppercase;}
.accordion-content ul {font-size: .9rem; margin-bottom: 1rem; list-style: none; margin-left: 1rem;}


/*LAKES*/
#alphafilter { text-align: center; width: 100%; padding: 4px 0; margin: 5px 0; border-top: 1px solid #91B8E3; border-bottom: 1px solid #91B8E3;}
#alphafilter a { display:inline-block; padding:2px .5rem; margin: .25rem .1rem; background:#006bb6; color:white; text-decoration:none;}
#alphafilter a:hover {background:#91B8E3;}

ul#byalpha{list-style: none; margin: 20px 0; padding-left: 0; }
ul#byalpha li{list-style: none; 
margin: 0; padding: 3px 0; 
border-top:1px solid #ccc; 
float:left;width:25%; text-transform:uppercase; 
}

#byalpha span {display:block; font-size: .8em; color: #666; text-transform:none; margin: -.2rem 0 1rem; }
#byalpha a:link, #byalpha a:visited { text-decoration: none; }
#byalpha a:hover, #byalpha a:active { text-decoration: underline; }

#details th {text-align: left; width: 50%;}


/* Photo page */
.gallery h3 {font-size: 1em; padding-bottom: 0; margin-bottom: 0;}
.gallery p {font-size: .9em; padding: 0; margin: 0;color: #363636;}

.gallery span {font-size: .8rem;}
#photoimg {padding-bottom: 1rem;}
.reveal img {padding-bottom: 1rem;}

@media only screen and (min-width: 40em) {

  h1.homeh1 {font-size: 2.2em; text-align: center; font-style: italic; font-weight: 700; margin-bottom: 2rem;}

  
  body {background-color: #f1f1f1;}
  .maincopy { 
    background-color: #fff;
    box-shadow: 0 0 3px 1px #fff; padding: 2rem;}
#home .intro h2 {margin: 1.25em auto 1em; font-style: italic; font-size: 2em; font-weight: 700;}
	#masthead { background-color: #f1f1f1; padding-bottom: 1em;}
	#masthead img {margin: -.25em auto 1.5rem 0;}

	#subnav, #subnav .top-bar-right ul { background-color: transparent; width: 100%;  font-family: 'Roboto Condensed', sans-serif; font-size: .98em;}
	#subnav .top-bar-right ul ul {background-color: #ffffff;}

	#subnav li.navhigh a {color: #ffffff; }
	#subnav li.navhigh li a {color: #1779ba; }
	#subnav li.navhigh .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {border-color: transparent transparent transparent;}
	
	#subnav .top-bar-right ul ul li:hover {font-weight: bold;}
	#subnav li.is-dropdown-submenu-parent {min-width: 125px; text-align: center;}
	#subnav ul ul.is-dropdown-submenu {min-width: 125px; text-align: left; }
	#subnav ul ul.is-dropdown-submenu li a {padding: 10px 5px; }
	
@media (max-width: 920px)    {
   #subnav .top-bar-right ul ul li:hover, #subnav .top-bar-right ul ul li a:hover{
      .hide { display:none !important; }
   }
}
	
	
	/* #mainnavbar ul {border-top: 10px solid #cccfd1;} */
	#mainnavbar ul {border-top: 4px solid #e68c1b;}

	#mainnavbar .top-bar, #mainnavbar .top-bar ul { background-color: transparent; width: 100%; font-family: 'Roboto Condensed', sans-serif;}

	#mainnavbar .top-bar li {/*width:16.4%;*/ width: 19.88%; text-align: center; padding: 0 .25rem;}
	#mainnavbar .top-bar ul li+li {margin-left: .15%;}
	#mainnavbar .top-bar a {color: #ffffff; letter-spacing: 1px;width:100%;  }

	#mainnavbar .top-bar li li a {font-weight: 500;}
	#mainnavbar .top-bar li li {width:100%; text-align:left; padding: 0; font-size: .9rem;}
	#mainnavbar .top-bar ul ul li+li {margin-left: 0; border-top: 1px solid #ffffff;}
	
  #mainnavbar .top-bar li {display: flex; flex-direction: row; align-items: center; justify-content: center; }
#mainnavbar .top-bar li li {width:100%; justify-content:left; padding: 0; font-size: .9rem;}

	#mainnavbar .top-bar li.b1 ul li,
	.b1 { background-color: rgba(0,93,173,1);}
	#mainnavbar .top-bar li.b2 ul,
	.b2 { background-color: rgba(0,107,182,1);}
	#mainnavbar .top-bar li.b3 ul,
	.b3 { background-color: rgba(0,121,193,1);}
	#mainnavbar .top-bar li.b4 ul,
	.b4 { background-color: rgba(0,135,206,1);}
	#mainnavbar .top-bar li.b5 ul,
	.b5 { background-color: rgba(0,149,217,1);}
	#mainnavbar .top-bar li.navhigh ul,
	.navhigh { background-color: rgba(230,140,27,1); }

	#mainnavbar .top-bar li.b1 li:hover {background: #5996c9; width:100%; }
	#mainnavbar .top-bar li.b2 li a:hover {background: #599fd0; width:100%; }
	#mainnavbar .top-bar li.b3 li a:hover {background: #59a7d7; width:100%; }
	#mainnavbar .top-bar li.b4 li a:hover {background: #59b1de; width:100%; }
	#mainnavbar .top-bar li.b5 li a:hover {background: #59bae6;  width:100%;}
	#mainnavbar .top-bar li.navhigh li a:hover {background: #5996c9;  }

	#mainnavbar .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {border-color: #ffffff transparent transparent;}

	#mainnavbar .is-dropdown-submenu {
		min-width: 100%;
		border-top: 1px solid #fff; border-left: none; border-right: none; 
	
		}
	
	h2 { font-size: 1.6em; }
	h3 { font-size: 1.4em; }
	h4 {font-size: 1.2em; }
	
	ul, ol {margin-left: 1.3em; }
}


.title-bar {background: #005dac; }
.top-bar {padding:0;}


/** additions **/

.nav-bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #ececec;
  border-bottom: 2px solid #ececec;

}

.nav-bar .nav-bar-logo {
  padding: 1.8rem;
}

a#navlogo:focus { outline: none;}

.nav-bar a {
  color: #2c3840;
  transition: color 0.2s ease-in;
}

.nav-bar a:hover {
  color: #a8b8c3;
}

@media screen and (max-width: 39.9375em) {
  .nav-bar {
    height: 72px;
  }
}

.nav-bar .offcanvas-trigger {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.6rem;
  color: #2c3840;
  text-transform: uppercase;
  background-color: #ececec;
  transition: background-color 0.2s ease-in;
  cursor: pointer;
}

.nav-bar .offcanvas-trigger .offcanvas-trigger-text {
  margin-right: 0.25rem;
  margin-top: 0.25rem;
}

.nav-bar .offcanvas-trigger:hover {
  background-color: #6b879a;
}

@media screen and (max-width: 39.9375em) {
  .nav-bar .offcanvas-trigger {
    padding: 0.9rem;
  }
}

.multilevel-offcanvas {
  background: #222b31;
  padding: 20px;
  color: #fefefe;
}

.multilevel-offcanvas > .menu {
  margin-bottom: 1rem;
}

.multilevel-offcanvas .menu a {
  color: rgba(254, 254, 254, 0.6);
  padding-top: 7px;
  padding-bottom: 7px;
  transition: color 0.2s ease-in;
}

.multilevel-offcanvas .menu a:hover {
  color: #fefefe;
}

.multilevel-offcanvas .fa {
  color: #fefefe;
}

.multilevel-offcanvas .is-accordion-submenu-parent > a::after {
  border-color: rgba(254, 254, 254, 0.6) transparent transparent;
}

.multilevel-offcanvas .social-links {
  margin-left: 20px;
}

.multilevel-offcanvas .social-links li {
  margin-right: 5px;
}

.multilevel-offcanvas .social-links a:hover .fa {
  color: #bebebe;
  transition: color .2s ease-in;
}

.multilevel-offcanvas .social-links .fa {
  font-size: 2.2rem;
}


.body-info .button {
  margin: 1rem 0;
  padding: 0.85em 2em;
}

.is-open + .off-canvas-content .hamburger .line:nth-child(1),
.is-open + .off-canvas-content .hamburger .line:nth-child(3) {
  width: 12px;
}

.is-open + .off-canvas-content .hamburger .line:nth-child(1) {
  -webkit-transform: translateX(-5px) rotate(-45deg);
      -ms-transform: translateX(-5px) rotate(-45deg);
          transform: translateX(-5px) rotate(-45deg);
}

.is-open + .off-canvas-content .hamburger .line:nth-child(3) {
  -webkit-transform: translateX(-5px) rotate(45deg);
      -ms-transform: translateX(-5px) rotate(45deg);
          transform: translateX(-5px) rotate(45deg);
}

.hamburger .line {
  width: 20px;
  height: 2px;
  background-color: #2c3840;
  display: block;
  margin: 3px auto;
  transition: all 0.3s ease-in-out;
}

.hamburger .line:last-child {
  margin-bottom: 0;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ++++++++++++++++++++++++++++++++++ */


.icon-grid-outer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}


@media print, screen and (min-width: 40em) {
  .icon-grid-outer {
    max-width: 100%;
  }
}


.icon-grid-inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.icon-grid-feature {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 1rem;
  -webkit-flex: 1 0 50%;
      -ms-flex: 1 0 50%;
          flex: 1 0 50%;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}


.icon-grid-feature h4 {
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 16px;
  font-weight: 700;
}

.icon-grid-feature .feature-desc {
  margin-bottom: 0;
  font-size: 0.875rem;
}

.icon-grid-feature .fa {
  margin-right: 1.25rem;
  font-size: 2rem;
  color: orange;
}

@media print, screen and (min-width: 40em) {
  .icon-grid-feature {
    padding: 2rem;
    -webkit-flex: 1 0 50%;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.medialist .fa{
  margin-right: 1.25rem;
  font-size: 4rem;
  color: orange;
}