body,h1,h2,h3,h4,h5,h6 {font-family: Arial, "Trebuchet MS", "Lato", sans-serif;}
body, html {
  height: 100%;
  color: #2196F3;
  line-height: 1.5;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #2196F3;
}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}

div.ex1 {
  width: 200px;
  margin: auto;
  border: 3px solid #fff;
}

.text-position-home {
    padding: 30px;
    
}
.img-position {
    float: left;
}


h2 {
    font-weight: 600;
    line-height: 1.5;
}

h6 {
    font-weight: 100;
    line-height: 1.3;
}

ul {
  list-style-type: none;
}

.box-home {
height: 500px;
  width: 50%;
  
  color: white;
  
  margin: auto;
}


.CServices-Font {
    font-weight: 100;
    font-size: 15px;
    line-height: 2;
}
.split {
    display: flex;
    flex-direction: column;
}
.split > * {
    flex-basis: 100%;
}
section {
    padding: 3rem 0;
}
.container {
    margin-inline: auto;
    width: min(100%, 130rem);
}
.home-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

@media (min-width: 50em) {
    .split {
        flex-direction: row;
    }
}
@media (min-width: 1100px) {
        .hide {
        display: none;
    }
}


/* Responsive layout - makes a one column-layout instead of two-column layout */


/*
@media (max-width: 600px) {
  .flex-item-right2, .flex-item-left2 {
    flex: 100%;
  }
}

@media (max-width: 1000px) {
  .font-size {
    height: 200px;
  }
}
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}
*/

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0rem;
}

.flex-container > * {
    flex: 1;
}

@media (min-width: 1000px) {
  .flex-container {
    flex-direction: row;
  }
}

/*
.flex-item-left {
  padding: 30px;
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

.flex-item-left2 {
  padding: 30px;
  flex: 50%;
}

.flex-item-right2 {
  flex: 50%;
}

.clearfix {overflow: auto;}
*/