html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
   overflow-x: hidden
}
:after, :before {
  box-sizing: inherit
}
body {
  margin: 0
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block
}
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  color: inherit
}
a:active, a:hover {
  outline-width: 0
}
img {
  border-style: none;
  vertical-align: middle;
  object-fit: cover;
}
button, input, select, textarea {
  font: inherit;
  margin: 0
}
select {
  word-wrap: normal
}
button, input {
  overflow: visible;
  word-wrap: normal
}
button, select {
  text-transform: none
}
[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0
}
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText
}
textarea {
  overflow: auto;
  word-wrap: normal
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto
}
body, html {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  
}
h1, h2, h3 {
  text-align: center
}
h1 {
  font-weight: 700;
  font-size: 40px
}
h2, h3 {
  font-size: 30px
}
h3 {
  font-size: 24px
}
h4 {
  font-size: 20px
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI", Arial, sans-serif;
  margin: 14px 0;

}
p{
  font-size: 15px
}
.w3-btn, .w3-button {
  border: 0;
  display: inline-block;
  outline: 0;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.w3-btn:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)
}
.w3-btn:disabled, .w3-button:disabled, .w3-disabled {
  cursor: not-allowed;
  opacity: .3
}
.w3-disabled *, :disabled * {
  pointer-events: none
}
.w3-btn.w3-disabled:hover, .w3-btn:disabled:hover {
  box-shadow: none
}
.w3-display-container, .w3-tooltip {
  position: relative
}
.w3-tooltip .w3-text {
  display: none
}
.w3-tooltip:hover .w3-text {
  display: inline-block
}
.w3-input, .w3-select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #cccccc
}
.w3-input {
  display: block;
  padding: 8px
}
.w3-select {
  padding: 9px 0
}
.w3-dropdown-click, .w3-dropdown-hover {
  position: relative;
  display: inline-block;
  cursor: pointer
}
.w3-dropdown-hover:hover .w3-dropdown-content {
  display: block;
  z-index: 1
}
.w3-dropdown-click:hover, .w3-dropdown-click:hover>.w3-button:first-child, .w3-dropdown-hover:first-child, .w3-dropdown-hover:hover>.w3-button:first-child {
  background-color: #cccccc;
  color: #000000
}
.w3-dropdown-content {
  cursor: auto;
  color: #000000;
  background-color: #ffffff;
  display: none;
  position: absolute;
  min-width: 160px;
  margin: 0;
  padding: 0
}
.w3-sidebar {
  height: 100%;
  width: 200px;
  background-color: #ffffff;
  position: fixed!important;
  z-index: 1;
  overflow: auto
}
.w3-bar-block .w3-dropdown-click, .w3-bar-block .w3-dropdown-hover {
  width: 100%
}
.w3-bar-block .w3-dropdown-click .w3-dropdown-content, .w3-bar-block .w3-dropdown-hover .w3-dropdown-content {
  min-width: 100%
}
.w3-bar-block .w3-dropdown-click .w3-button, .w3-bar-block .w3-dropdown-hover .w3-button {
  width: 100%;
  text-align: left;
  padding: 8px 16px
}
#main, .w3-main {
  transition: margin-left .4s
}
.w3-bar {
  width: 100%;
  overflow: hidden
}
.w3-center .w3-bar {
  display: inline-block;
  width: auto
}
.w3-bar .w3-bar-item {
  padding: 8px 16px;
  float: left;
  width: auto;
  border: 0;
  outline: 0;
  display: block
}
.w3-bar .w3-dropdown-click, .w3-bar .w3-dropdown-hover {
  position: static;
  float: left
}
.w3-bar .w3-button {
  white-space: normal
}
.w3-bar-block .w3-bar-item {
  width: 100%;
  display: block;
  padding: 8px 16px;
  text-align: left;
  border: 0;
  outline: 0;
  white-space: normal;
  float: none
}
.w3-bar-block.w3-center .w3-bar-item {
  text-align: center
}
.w3-block {
  display: block;
  width: 100%
}
.w3-responsive {
  display: block;
  overflow-x: auto
}
.w3-bar:after, .w3-bar:before, .w3-cell-row:after, .w3-cell-row:before, .w3-clear:after, .w3-clear:before, .w3-container:after, .w3-container:before, .w3-panel:after, .w3-panel:before, .w3-row-padding:after, .w3-row-padding:before, .w3-row:after, .w3-row:before {
  content: "";
  display: table;
  clear: both;
  align-content: center
}
.w3-col, .w3-half, .w3-quarter, .w3-third, .w3-threequarter, .w3-twothird {
  float: left;
  width: 100%
}
.w3-col.s1 {
  width: 8.33333%
}
.w3-col.s2 {
  width: 16.66666%
}
.w3-col.s3 {
  width: 24.99999%
}
.w3-col.s4 {
  width: 33.33333%
}
.w3-col.s5 {
  width: 41.66666%
}
.w3-col.s6 {
  width: 49.99999%
}
.w3-col.s7 {
  width: 58.33333%
}
.w3-col.s8 {
  width: 66.66666%
}
.w3-col.s9 {
  width: 74.99999%
}
.w3-col.s10 {
  width: 83.33333%
}
.w3-col.s11 {
  width: 91.66666%
}
.w3-col.s12 {
  width: 99.99999%
}
@media (min-width:601px) {
  .w3-col.m1 {
    width: 8.33333%
  }
  .w3-col.m2 {
    width: 16.66666%
  }
  .w3-col.m3, .w3-quarter {
    width: 24.99999%
  }
  .w3-col.m4, .w3-third {
    width: 33.33333%
  }
  .w3-col.m5 {
    width: 41.66666%
  }
  .w3-col.m6, .w3-half {
    width: 49.99999%
  }
  .w3-col.m7 {
    width: 58.33333%
  }
  .w3-col.m8, .w3-twothird {
    width: 66.66666%
  }
  .w3-col.m9, .w3-threequarter {
    width: 74.99999%
  }
  .w3-col.m10 {
    width: 83.33333%
  }
  .w3-col.m11 {
    width: 91.66666%
  }
  .w3-col.m12 {
    width: 99.99999%
  }
}
@media (min-width:993px) {
  .w3-col.l1 {
    width: 8.33333%
  }
  .w3-col.l2 {
    width: 16.66666%
  }
  .w3-col.l3 {
    width: 24.99999%
  }
  .w3-col.l4 {
    width: 33.33333%
  }
  .w3-col.l5 {
    width: 41.66666%
  }
  .w3-col.l6 {
    width: 49.99999%
  }
  .w3-col.l7 {
    width: 58.33333%
  }
  .w3-col.l8 {
    width: 66.66666%
  }
  .w3-col.l9 {
    width: 74.99999%
  }
  .w3-col.l10 {
    width: 83.33333%
  }
  .w3-col.l11 {
    width: 91.66666%
  }
  .w3-col.l12 {
    width: 99.99999%
  }
}
.w3-content {
  max-width: 980px;
  margin: auto
}
.w3-rest {
  overflow: hidden
}
.w3-cell-row {
  display: table;
  width: 100%
}
.w3-cell {
  display: table-cell
}
.w3-cell-top {
  vertical-align: top
}
.w3-cell-middle {
  vertical-align: middle
}
.w3-cell-bottom {
  vertical-align: bottom
}
.w3-show-inline-block {
  display: inline-block!important
}
@media (max-width:600px) {
  .w3-dropdown-click.w3-mobile .w3-dropdown-content, .w3-dropdown-hover.w3-mobile .w3-dropdown-content {
    position: relative
  }
  .w3-hide-small {
    display: none!important
  }
  .w3-mobile {
    display: block;
    width: 100%!important
  }
  .w3-bar-item.w3-mobile, .w3-dropdown-click.w3-mobile, .w3-dropdown-hover.w3-mobile {
    text-align: center
  }
  .w3-dropdown-click.w3-mobile, .w3-dropdown-click.w3-mobile .w3-btn, .w3-dropdown-click.w3-mobile .w3-button, .w3-dropdown-hover.w3-mobile, .w3-dropdown-hover.w3-mobile .w3-btn, .w3-dropdown-hover.w3-mobile .w3-button {
    width: 100%
  }
}
@media (max-width:768px) {
  .w3-modal-content {
    width: 500px
  }
  .w3-modal {
    padding-top: 50px
  }
}
@media (min-width:993px) {
  .w3-modal-content {
    width: 900px
  }
  .w3-hide-large {
    display: none!important
  }
  .w3-sidebar.w3-collapse {
    display: block!important
  }
}
@media (max-width:992px) and (min-width:601px) {
  .w3-hide-medium {
    display: none!important
  }
}
@media (max-width:992px) {
  .w3-sidebar.w3-collapse {
    display: none
  }
  .w3-main {
    margin-left: 0!important;
    margin-right: 0!important
  }
}
.w3-bottom, .w3-top {
  position: fixed;
  width: 100%;
  z-index: 1
}
.w3-top {
  top: 0
}
.w3-row-padding, .w3-row-padding>.w3-col, .w3-row-padding>.w3-half, .w3-row-padding>.w3-quarter, .w3-row-padding>.w3-third, .w3-row-padding>.w3-threequarter, .w3-row-padding>.w3-twothird {
  padding: 0 8px;
  align-content: center
}
.w3-container, .w3-panel {
  padding: .01em 16px
}
.w3-medium {
  font-size: 15px!important
}
.w3-large {
  font-size: 18px!important
}
.w3-xlarge {
  font-size: 24px!important
}
.w3-left-align {
  text-align: left!important
}
.w3-center {
  text-align: center!important
}
.w3-bottombar {
  border-bottom: 6px solid #cccccc!important
}
.w3-margin-right {
  margin-right: 16px!important
}
.w3-padding-16 {
  padding-top: 16px!important;
  padding-bottom: 16px!important
}
.w3-padding-24 {
  padding-top: 24px!important;
  padding-bottom: 24px!important
}
.w3-padding-32 {
  padding-top: 32px!important;
  padding-bottom: 32px!important
}
.w3-padding-48 {
  padding-top: 48px!important;
  padding-bottom: 48px!important
}
.w3-padding-64 {
  padding-top: 64px!important;
  padding-bottom: 64px!important
}
.w3-right {
  float: right!important
}
.w3-button:hover {
  color: #000000!important;
  background-color: #cccccc!important
}
.w3-hover-teal:hover, .w3-teal {
  color: #000000;
  background-color: #fb0000!important
}
.w3-hover-white:hover, .w3-white {
  color: #000000!important;
  background-color: #ffffff!important
}
.w3-text-teal {
  color: #fb0000!important
}
.w3-border-teal {
  border-color: #fb0000!important
}
.w3-theme-l1, .w3-theme-l5 {
  color: #000000!important;
  background-color: #f0f0f0!important
}
.w3-theme-l1 {
  background-color: #333030!important
}
.w3-theme, .w3-theme-d1, .w3-theme-d2 {
  color: #ffffff!important;
  background-color: #000000!important
}
.index {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  text-align: center;
 
}
.w3-hide {
  display: none!important
}
.w3-show, .w3-show-block {
  display: block!important
}
.container {
  width: 100%;
  overflow: hidden;
  margin: 10px auto;
  background: #ffffff;
  align-content: center
}
.section {
  clear: both;
  padding: 0;
  margin: 0;
  font-family: "Times New Roman", Times, Serif;
  font-size: 25px;
}
.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%
}
.col:first-child {
  margin-left: 0
}
.group:after, .group:before {
  content: "";
  display: table
}
.group:after {
  clear: both
}
.group {
  zoom: 1
}
.span_3_of_3 {
  width: 100%
}
.span_2_of_3 {
  width: 66.1%
}
.span_1_of_3 {
  width: 32.2%
}
@media only screen and (max-width:480px) {
  .col {
    margin: 1% 0
  }
  .span_1_of_3, .span_2_of_3, .span_3_of_3 {
    width: 100%
  }
}

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.left {
    height: 91px;
    width: 91px;
  float: left
}
.right {
    height: 91px;
    width: 91px;
  float: right
}

.column1 {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px
}
.column img {
  margin-top: 8px;
  vertical-align: middle
}
@media screen and (max-width:800px) {
  .column {
    flex: 50%;
    max-width: 50%
  }
}
@media screen and (max-width:600px) {
  .column {
    flex: 100%;
    max-width: 100%
  }
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}


/* Add a card effect for articles */
.card {
   background-color: white;
   padding: 20px;
   margin-top: 20px;
  margin-right: 20px;
 margin:0 auto;
    position:relative;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}
.box {
   background-color: white;
   padding: 20px;
   margin-top: 20px;
  margin-right: 20px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  width: 100%;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #dddddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px
}
.row1 {
  background-color: #ff0000;
  color: #ffffff
}
.row2 {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
   background-color: #4B4747;
  color: #ffffff
}

/* Create four equal columns that sits next to each other */
.column2 {
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
  margin:0 auto;
    position:relative;
 
}

.column2 img {
 margin-top: 8px;
  vertical-align: middle;
  }

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column2 {
    flex: 50%;
    max-width: 50%;
  }
}

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

#services {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: #c9c9c9;
  color: #000000;
  font-size: 20px;
  font-weight: bold
}

#services td, #services th {
  border: 1px solid #dddddd;
  padding: 8px;
  
}

#services tr:nth-child(even){background-color: #4b4747; color:white;}

#services th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4b4747;
  color: white;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
   font-size: 20px;
  font-weight: bolder
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

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

.topnav .icon {
  display: none;
}

@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;
  }
}
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid red;
  padding: 15px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 3px solid #474747;
}
.col-2 {width: 50%;}
.col-3 {width: 33.33%;}

.checked {
  color: yellow;
}
.container1 {
  border: 2px solid #cccccc;
  background-color: #eeeeee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0
}

.container1::after {
  content: "";
  clear: both;
  display: table;
}

.container1 img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

.container1 span {
  font-size: 20px;
  margin-right: 15px;
}

@media (max-width: 500px) {
  .container1 {
      text-align: center;
  }
  .container1 img {
      margin: auto;
      float: none;
      display: block;
  }
}