html, body {
margin: 0; background: rgb(242, 242, 242);font-family: Helvetica;}

/* Header/Logo Title */
.header {
  
     border: 2px solid black;
  padding: 25px;
  background:  url(header.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
    color: white;
  font-size: 1.5em; 
text-align: center;
padding-bottom: 3em;
}

#header h1{padding: 0.5em 0 3em 0;}
#header img{margin-bottom: 0.5em}
#header h2{padding-bottom: 3em;}
#header {border: 2px solid black;

  background-image:  url(header1.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
    color: white;
  
text-align: center;
padding-bottom: 3em;
}


.box {
height : auto;
max-width : 35cm;
padding : 15px;
background-color : rgb(66, 33, 142, 1);
box-shadow : 10px 10px 5px 12px black;
margin-left : auto;
margin-right : auto;
margin-bottom : 3em;
color : white;
text-align : center;
font-size : 1.1em;
}
.boxes {
height : auto;
max-width : 15em;
padding : 0.5em;
background-color : red;
color : white;
text-align : left;
font-size : 1.1em;
margin:0.5em;

}


.box img {
display : block;
margin-left : auto;
margin-right : auto;
}

@media screen and (max-width: 600px) {
  .box {
    width: 100%;
    display: block;
    margin-bottom: 20px;
	font-size: 80%
  }
}




* {	box-sizing: border-box;}


h2 {
font-size : 1.1em;
}


body {font-size: 100%;}
h1 {font-size: 2em;}

p {font-size: 1em;}


 

#myService {
  color: black;
  padding: 40px;
  text-align: center;
}

.logo{
padding-top : 2em;
display : block;
margin-right : auto;
margin-left : auto;  
}


h1 {text-align: center;}

.center {display: block;margin-left:auto;margin-right: auto;width: 50%;padding-bottom: 1em;}

.a1 {padding-bottom: 1em; color:white;}






span.b {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 5px;
  border: 1px solid blue;    
  background-color: blue; 
}





.column {float: left;width: 25%;padding: 0 10px;margin: 0em 5em 0em 4.8em;}


.row {margin: 0 -5px;}

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

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 1em;height: auto; background-color: black;
  margin-bottom: 20px; color: white;}

.card h2 {text-align: center;}





.button {
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #04AA6D;
}

img {
  display: block;
  height: 80%;
  max-width: 100%;
}


.floating-box {
display : inline-block;
width : auto;
height : auto;
margin : 50px;
border : #73AD21 solid 3px;
padding : 2em;
text-align : left;
}
.floating-box ul li {
text-align : left;
}
.floating-box h2 {
text-align : center;
}
.floating-box p {
padding-left : 1em;
}
.flex-container {
display : flex;
flex-wrap : nowrap;
}
@media (max-width: 600px) {
.flex-container {
flex-direction : column;
padding : 0.5em;
}
}
@media (max-width: 600px) {
.flex-container {
flex-direction : column;
width : 100%;
}
}
.flex-container {
display : flex;
justify-content : center;
}
.flex-container ul li {
font-size : 0.9em;
}
.flex-container > div {
width : 25em;
margin : 10px;
font-size : 0.9em;
}
@media (max-width: 800px) {
.flex-container {
flex-direction : column;
}
}