html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
 pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
 s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
 figure, header, nav, section, article, aside, footer, figcaption, table, tr, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
 }

 ul, li {
   padding: 0;
   margin: 0;
   list-style: none;
 }

 html, body {
   font-family: 'Poppins', sans-serif;
   font-weight: 400;
   background-color: #FFFFFF;
   font-size: 1em;
 }

 a {
 	color: #555555;
  text-decoration: none !important;
  /*    transition: all 0.5s;  */
 }

 a:hover {
 	color: #0E8CB8;
  /*    transition: all 0.5s;  */
 }

 h1, h2, h3, h4, h5, h6 {
   margin-top: 0px;
   margin-bottom: 0px;
   color: #555555;
   font-weight: 700;
   text-decoration: none;
 }

 h1 {
   font-size: 2em;
   color: #666666;
   margin-bottom: 15px;
 }
 h2 {
   font-size: 1.6em;
   color: #666666;
   margin-bottom: 15px;
 }
 h3 {
   margin-top: 12px;
 }

 h5 {
   font-size: 0.75em;
 }

 ul {
   margin-bottom: 0px;
 }

 p {
   font-size: 0.94em;
   font-weight: normal;
   line-height: 1.6;
   text-indent: 15px;
   color: #555555;
 }

 img {
   width: 100%;
   overflow: hidden;
 }

 input[type=text], [type=password] {
     padding: 10px 10px;
     margin: 8px 0;
     box-sizing: border-box;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 0.94em;
     text-align:center;
 }

 input[type=button], input[type=submit] {
     background-color: #0E8CB8;
     border: none;
     color: white;
     padding: 10px 20px;
     text-decoration: none;
     margin: 4px 2px;

     cursor: pointer;
     font-family: Arial, Helvetica, sans-serif;

     font-size: 1em;
     font-weight: 600;
     text-align:center;
     border-radius: 23px;
     transition: all 0.5s;

   font-weight: 400;
 }

 input[type=button]:hover, input[type=submit]:hover {
     background-color: #497B9F;
     transition: all 0.5s;
 }

 textarea {
     width: 800px;
     height: 150px;
     padding: 12px 20px;
     box-sizing: border-box;
     border: 2px solid #999;
     border-radius: 4px;
     background-color: #f8f8f8;
     resize: none;
 }

 .header {
   max-width: 1100px;
   height: 33px;
   max-height: 33px;
   font-size: 1.25em;
   font-weight: 600;
   margin: auto;
   margin-top: 3px;
 }

 .header-menu .menu-nav li {
   padding-top: 20px;
   padding-bottom: 20px;
   padding-left: 10px;
   padding-right: 10px;
   display: inline-block;
 }
/*
 .header-menu .menu-nav li:last-child a {
   color: #FFFFFF !important;
   background-color: #0E8CB8;
   padding: 10px 10px 10px 10px;
   border-radius: 23px;
   transition: all 0.5s;
 }
*/
 .header-menu .menu-nav li:hover a,
 .header-menu .menu-nav li a.active {
   color: #0E8CB8 !important;
   transition: all 0.5s;
 }
/*
 .header-menu .menu-nav li:last-child:hover a,
 .header-menu .menu-nav li:last-child a.active {
   color: #FFFFFF !important;
   background-color: #497B9F !important;
 }
*/
 .index-title {
   font-family: 'Poppins', sans-serif;
   font-size: 6em;
   color: #FFFFFF;
   margin-bottom: 15px;
   -webkit-text-stroke: 3px #0E8CB8;
   text-stroke: 4px #0E8CB8;
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: 1;
 }

 .light-menu .light-menu-nav li {
   margin: 25px 2px 0px 2px;
   display: inline-block;
 }

 .light-menu .light-menu-nav li a {
   color: #FFFFFF !important;
   background-color: #0E8CB8;
   padding: 10px 20px 5px 20px;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }

 .light-menu .light-menu-nav li:first-child a:first-child {
   margin-left: 12px;
 }

 .light-menu .light-menu-nav .light-cct a:hover {
   background-image: linear-gradient(to right, #ffa148, #9bbcff);
 }

 .light-menu .light-menu-nav .light-gm a:hover {
   background-image: linear-gradient(to right, #7BD978, #F3BACD);
 }

 .light-menu .light-menu-nav .light-rgbw a:hover {
   background-image: conic-gradient(#ED7C6D 60deg, #80C751 120deg, #00BEF2 240deg, #ED7C6D 300deg);
 }

 .light-menu .light-menu-nav .light-huesat a:hover {
   background-color: hsl(239,56%,50%) !important;
   background-image: linear-gradient(to right, hsl(239,56%,50%), hsl(239,56%,80%));
 }


 .light-menu .light-menu-nav .light-xy a:hover {
 }

 .light-menu .light-menu-nav .light-gel a:hover {
 }

 .light-menu .light-menu-nav .light-effect a:hover {
 }

 .light-menu .light-menu-nav .light-fan a:hover {
     background-color: #f3f3f3;
     color: #555555 !important;
 }

 .light-menu .light-menu-nav .light-preset a:hover {
 }

 .light-menu .light-menu-nav .light-none a,
 .light-menu .light-menu-nav .light-none a:hover,
 .light-menu .light-menu-nav .light-none {
   background-color: #E0E0E0 !important;
   color: #FFFFFF !important;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }

 .fixture-menu-bar a,
 .fixture-menu-bar a:hover,
 .fixture-menu-bar {
   color: #FFFFFF !important;
 }

 .fixture-nav li {
   padding: 1px 4px 1px 4px;
   display: inline-block;
 }

 .header-flex {
   display: flex;
   justify-content: space-between;
 }

 .flex {
   display: flex;
 }

 .main {
  margin-top: 32px;
 	font-family: Arial, Helvetica, sans-serif;
 	font-size: 0.94em;
  color: #404040;
  text-align: center;
 }

 .main-content {
   background-color: #0E8CB8;
   max-width: 1100px;
   margin: auto;
   min-height: 350px;
   font-size: 1.25em;
   font-weight: 600;
   text-align: left;
   border-radius: 40px;
   padding: 1px;
 }

 .row {
   display: flex;
   flex-direction: row;
 }

 .row-top, .row-bottom, .row-col, .row-col-last, .col {
   flex-grow: 1;
 }

 .row-top, .row-bottom, .row-col, .row-col-last {
   padding-top: 20px;
   padding-left: 25px;
   padding-right: 25px;
   padding-bottom: 20px;
   margin-top: 15px;
   margin-left: 15px;
   margin-right: 15px;
   margin-bottom: 0px;
   background-color: #FFFFFF;
   border-radius: 5px;
 }

 .row-top {
   text-align: left;
   border-top-left-radius: 25px;
   border-top-right-radius:  25px;
 }

 .row-bottom {
   border-bottom-left-radius: 25px;
   border-bottom-right-radius:  25px;
   margin-bottom: 15px;
 }

 .row-col {
  margin-right: 0px;
 }

 .row-col, .row-col-last, .col {
   display: inline-block;
 }

 .row-col, .row-col-last, .col, .col-5, .col-10, .col-20, .col-25, .col-30, .col-33, .col-34, .col-35, .col-40, .col-45, .col-50, .col-60, .col-70, .col-75, .col-80, .col-90, .col-100 {
   text-align: center;
 }

 .col-5 { width:5%; }
 .col-10 { width:10%; }
 .col-20 { width:20%; }
 .col-25 { width:25%; }
 .col-30 { width:30%; }
 .col-33 { width:33%; }
 .col-34 { width:34%; }
 .col-35 { width:35%; }
 .col-40 { width:40%; }
 .col-45 { width:45%; }
 .col-50 { width:50%; }
 .col-60 { width:60%; }
 .col-70 { width:70%; }
 .col-75 { width:75%; }
 .col-80 { width:80%; }
 .col-90 { width:90%; }
 .col-100 { width:100%; }

 .list-table {
   width: 100%;
   padding: 0px;
   margin: 25px 0px 25px 0px;
   border-collapse: collapse;
 }

 tr.list-tr:nth-child(even) {
   background-color: #F3F3F3;
 }

 .list-td, .list-title-td {
   padding: 3px;
   margin: 0px;
   text-align: center;
   vertical-align: middle;
   font-size: 0.88em;
   font-weight: 400;
   color: #444444;
   border-width: 0px;
 }

 .list-title-td  {
   padding: 8px;
   background-color: #0E8CB8;
   color: #FFFFFF;
   font-size: 0.94em;
   font-weight: 600;
 }

 .list-title-td td:last-child {
   border-top-left-radius: 25px;
   border-top-right-radius:  25px;
 }
 .footer {
   font-size: 0.8em;
 }
  .footer-links {
    font-size: 1.2em;
  }

 .footer-links, .footer {
   text-align: center;
   padding: 30px 0px;
   color: #555555;
   font-weight: 300;
 }

 .footer-links a {
   color: #555555;
 }

 .footer-links a:hover {
   color: #0E8CB8;
 }

 .dropbtn {
     background-color: #0E8CB8;
     color: white;
     padding: 14px;
     font-size: 1.13em;
     font-weight: bold;
     border: none;
     cursor: pointer;
 }

 .dropdown {
     position: relative;
     display: inline-block;
 }

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

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

 .dropdown-content a:hover {
     background-color: #f1f1f1
 }

 .dropdown:hover .dropdown-content {
     display: block;
 }
 .dropdown:hover .dropbtn {
     background-color: #0E8CB8;
 }

 .csv-textarea {
   width: 100%;
   height: 400px;
   background-color: #FFFFFF;
   box-sizing: border-box;
   border: 2px solid #0E8CB8;
   font-size: 1em;
   text-decoration: none;
   font-weight: 350;
 }

 .con-text {
   width: 100%;
   background-color: #FFFFFF;
   box-sizing: border-box;
   border: 2px solid #0E8CB8;
 }

 .con-textarea {
   width: 100%;
   height: 350px;
   background-color: #FFFFFF;
   box-sizing: border-box;
   border: 2px solid #0E8CB8;
   font-size: 1em;
   text-decoration: none;
   font-weight: 350;
 }

 .dropdown {
   position: relative;
   display: inline-block;
 }

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

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

select {
  width: 90%;
  background-color:#FFFFFF;
  padding: 15px 15px 15px 15px;
  margin: 8px 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-align:center;
  color: #555555;

  box-sizing: border-box;
  border: 2px solid #0E8CB8;
  border-radius: 4px;

  // disable default appearance
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  &::-ms-expand { display: none };
}

.hide-mobile {
  display:block;
}
.hide-full {
  display:none;
}

/* ON/OFF Swictch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CCCCCC;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #0E8CB8;
}
input:focus + .slider {
  box-shadow: 0 0 1px #0E8CB8;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

// remove dotted firefox border
@-moz-document url-prefix() {
  select {
    color: rgba(0,0,0,0);
    text-shadow: 0 0 0 #ffffff;
  }
}

// Codepen Layout
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
body {
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  background: #34495E;
  select {
    margin: 50px auto 0;
    display:block;
  }
}

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

   .header-menu .menu-nav li {
     font-size: 0.88em;
   }

   h1 {
     font-size: 1.63em;
   }


 }

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

   .hide-mobile {
     display:none;
   }
   .hide-full {
     display:block;
   }

   .header-menu .menu-nav li {
     padding-left: 2px;
     padding-right: 2px;
     font-size: 0.70em;
   }

   .header-image {
     padding-right: 20px;
   }

   .header-flex {
   justify-content: center;
   align-items: center;
   }

   .main-content {
     border-radius: 0px;
     padding: 1px;
   }

   .row-top, .row-bottom, .row-col, .row-col-last {
     padding-left: 5px;
     padding-right: 5px;
     margin-left: 0px;
     margin-right: 0px;
     border-radius: 0px;
   }

   .row {
     flex-direction: column;
   }
   .col-5, .col-10, .col-20, .col-25, .col-30, .col-33, .col-34, .col-35, .col-40, .col-45, .col-50, .col-60, .col-70, .col-75, .col-80, .col-90, .col-100 {
     width: unset;
   }

   .row-col, .row-col-last {
     display: block;

   }

   .footer {
     font-size: 0.8em;
   }
   .footer-links {
     font-size: 1.2em;
   }

 }