/* Page wide Settings */
body {
  font-family: 'Roboto', sans-serif;
  color: #4c5667;
  background: #fff;
  margin: 0; 
  padding: 0;
}

html{ margin:0; padding: 0; }

h1,h2,h3,h4,h5,h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

h1 { font-size: 2em; }
h4 { font-size: 1.2em; }

.line-1-5 { line-height:1.5em; }

/* Fn Settings */
.fn-container{ width: 100%; margin-top: 4em; clear:both;  } 
.fn-content{ text-align:center; width: 50em; margin-right:auto; margin-left:auto; }

.gap { margin-top: 2em; }

.logo-bottom { height:20px; }

/* Hamburger Menu */

.ham-menu { position: fixed; width: 100%; top: 0; background-color: #333; }

.ham-menu ul { list-style: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }

.ham-menu li { float: none; font-size: 0.9em; }

.ham-menu li a { display: block; color: white; text-align: left; padding: 1em 1em; text-decoration: none; }

.ham-menu li a:hover,
.ham-menu .menu-btn:hover { background-color: #111; }


/* menu */

.ham-menu .menu-content {
  clear: both;
  max-height: 0; /* Hides content before menu click */
  transition: max-height .2s ease-out; /* Animate transition to hidden */
}

/* menu icon: Hamburger menu created from css */
/*   Transistion from hamburger to X and back */

.ham-menu .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 1em 1em;
  position: relative;
  user-select: none;
}

.ham-menu .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

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

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

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

/* menu btn: Hidden check box that toggles ham menu */

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

.ham-menu .menu-btn:checked ~ .menu-content {
  max-height: 100%; /* Popup menu content to actual size */
}

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

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

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

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

#fn-wave {height:120px; vertical-align:baseline; margin: 1em 0em 2em 0em; }

#iconlist { margin:0px auto 20px auto !important; text-align:center;}
#iconlist a {padding:20px; }


/*======= Responsive ======*/
@media only screen and (min-width: 768px){
    .ham-menu li {float: left; } /* Left justify on large screens */
    .ham-menu .menu-content { max-height: none; } /* Show horizontal menu content */
    .ham-menu .menu-icon { display: none; } /* Hide menu icon */
}


@media (max-width: 767px) {
  .fn-content{ text-align:center; width: 100%; margin-right:auto; margin-left:auto;}

}