/* -----------------------------------------------
-------------  Style for Containers --------------
----------------------------------------------- */

.containerPad7 {
	padding-right: 7%;
	padding-left: 7%;
}

.containerPad6 {
  padding-right: 6%;
  padding-left: 6%;
}

.containerMax160 {
  max-width: 160px;
  margin-right: auto;
  margin-left: auto;
}

.containerMax480 {
  max-width: 480px;
  margin-right: auto;
  margin-left: auto;
}

.containerMax640 {
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
}

.containerMax800 {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.containerMax960 {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}


/* -----------------------------------------------
-------------- General Body styles ---------------
----------------------------------------------- */

@font-face {
  font-family: 'GothamRnd-Medium';
  src: url('../fonts/GothamRnd-Medium.woff2') format('woff2'),
        url('../fonts/GothamRnd-Medium.woff') format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'GothamRnd-Book';
  src: url('../fonts/GothamRnd-Book.woff2') format('woff2'),
        url('../fonts/GothamRnd-Book.woff') format('woff');
  font-style: normal;
}

/* -----------------------------------------------
-------------- General Body styles ---------------
----------------------------------------------- */


body {
  font-family: "GothamRnd-Book", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #777;
  letter-spacing: 1px;
  line-height: 1.6;
} 



/* -----------------------------------------------
------------------ Header styles -----------------
----------------------------------------------- */


header {
	background-color: rgba(0, 0, 0, 0.6);
  height: 75px;
  position: fixed; /*Children are absolute (logo) however can place as fixed*/
  width: 100%;
  top: 0;
  left: 0;
  z-index: 5000; /* because the image Swell was going above the menu bar */
} 



/* -----------------------------------------------
------------------ Nav styles -----------------
----------------------------------------------- */



nav {
  background-colorx: yellow;
  heightx: 50px;
}

nav ul {
  background-color: redx;
  margin-top: 75px;
  margin-rightx: 6%;
  overflow-y: hidden; /*hides content as nav ul loses height*/

}

@media screen and (min-width: 960px) {
  nav ul {
    margin-right: 60px;
    overflow-y: visible !important; /*hides hamburger*/
    float: right;
    margin-top: 40px;
  }
}

nav ul li {
  background-colorx: pink;
  background-color: rgba(0, 0, 0, 0.8);
}

@media screen and (min-width: 960px) {
  nav ul li {
    display: inline-block;
    background-color: transparent;
  }
}

nav ul li:first-child {
  padding-top: 30px; /* gives space between first li and top of header */
}

@media screen and (min-width: 960px) {
  nav ul li:first-child {
    padding-top: 0px; /*return to default*/
  }
}

nav ul li:last-child {
  padding-bottom: 30px; /* gives space between first li and top of header */
}

@media screen and (min-width: 960px) {
  nav ul li:last-child {
    padding-bottom: 0px; /*return to default*/
  }
}

nav ul li a {
  background-colorx: orange;
  font-size: 15px;
  color: white;
  font-weight: 100;
  padding: 15px 0px 10px 0px; /* increases height of clickable area */
  text-align: center;
  text-decoration: none; /*takes url underlines way*/
  display: block;
}

@media screen and (min-width: 960px) {
  nav ul li a {
    margin-left: 8px;
    padding-top: 5px;
  }
}

nav ul li a:hover {
  background-color: #F25469;
  transition: 1s;
}

@media screen and (min-width: 960px) {
  nav ul li a:hover {
    background-color: transparent;
    color: #F25469;
    transition: 0.5s;
  }
}

/* -----------------------------------------------
------------------- Nav Ul Styles (Dynamic) -------------------
----------------------------------------------- */
/* Dynamically added/removed using javascript*/

/* Nav Ul in closed position */

.menuMobileClose {
  max-height: 0; /* closes height of nav ul */
  transition: max-height 0.8s ease-out; /* property duration function delay */
}

@media screen and (min-width: 960px) {
  .menuMobileClose {
    max-height: none !important; /*Returns max height back to default for desk view*/
  }
}

/* Nav Ul in opened position */

.menuMobileOpen {
  max-height: 160px; /* Trick needed to make work (declare an oversized max-height) */
  transition: max-height 0.8s ease-out; /* property duration function delay */
}

@media screen and (min-width: 960px) {
  #menuMobileOpen {
    max-height: none !important; /*Returns max height back to default for desk view*/
  }
}



/* -----------------------------------------------
------------------- Logo Styles ------------------
----------------------------------------------- */


#logo {
  background-colorx: #bada55;
  width: 110px;
  display: block;
  position: absolute;
  left: 6%;
  top: 43px;

}

@media screen and (min-width: 960px) {
  #logo {
    left: 60px;
    bottom: 20px;
    margin-left: 0%;
    margin-top: 0%; /* Return to defaults */
  }
}

/* -----------------------------------------------
----------------- Trigger Styles -----------------
----------------------------------------------- */



#trigger {
  background-colorx: blue;
  height: 40px;
  width: 40px;
  position: absolute; /*parent is position: relative*/
  top: 25px;
  right: 6%;
  cursor: pointer;
}

@media screen and (min-width: 960px) {
  #trigger {
    display: none;
  }
}

#heroSectionx {
    background-color: orange;
    height: 300px;
}

/* -----------------------------------------------
------------------- Nav Ul Styles (Dynamic) -------------------
----------------------------------------------- */
/* Dynamically added/removed using javascript*/

/* Nav Ul in closed position */

.trigger0 {
  transition-duration: 1s;
  transform: rotate(0deg);
}

/* Nav Ul in opened position */

.trigger90 {
  transition-duration: 1s;
  transform: rotate(90deg);
}