* {box-sizing: border-box;}
body {margin: 0;  font-family: Arial; }

H1 {font-size:1.3rem; line-height:1.5rem; color:#fff;}
H2 {font-size:.9rem; line-height:1.0rem; color:#fff;}
H3 {font-size: 1rem; line-height:1rem;}
H4 {font-size:1.3rem; line-height:1.5rem; color:#333;}


/* Top of the Page Area */
.section_one {display: grid; grid-template-columns: repeat(5,1); grid-auto-rows: auto; 
    border-bottom:2px solid #333; background-color: rgb(50, 100, 206);}
.section_one > div {text-align:center; margin-left:3%; margin-right:3%;}

.section_one_1 {grid-column-start: 2;  grid-column-end:4; grid-row-start:1; grid-row-end: 2;}
.section_one_2 {grid-column-start: 1; grid-column-end:2; grid-row-start: 1; grid-row-end: 2;}
.section_one_3 {grid-column-start: 4; grid-column-end:5; grid-row-start: 1; grid-row-end: 2;}

.fullwrapper {background-image: url("spot-a-leak_logo900x900.png"); 
    background-repeat: no-repeat; background-position: center; background-size:auto;}


/* MenuWrapper1 - MENU AREA */
.menuwrapper1 {display: grid; grid-template-columns: 250px 1fr 1fr 1fr; 
    grid-template-rows:3% 40px 20px;}
.menuwrapper1 a {color:red; font-size:1.3rem; font-weight:700;}
.menuwrapper1 > div { padding: 1em; text-align:center;} 

.menubox1 {  /* The LOGO */
    grid-column-start: 1;  grid-column-end: 2;
    grid-row-start: 1;  grid-row-end: 3;}
  
.menubox2 {  /* Services */
    grid-column-start: 2; grid-column-end: 3;
    grid-row-start: 2; grid-row-end: 3;}
  
.menubox3 {  /* About */
    grid-column-start: 3;  grid-column-end:4;
    grid-row-start: 2;  grid-row-end:3;}

.menubox4 {  /* Contact */
    grid-column-start:4;  grid-column-end:5;
    grid-row-start: 2;  grid-row-end:3;}

.menubox5 {  /* Introduction */
    grid-column-start: 2;  grid-column-end:5;
    grid-row-start: 3;  grid-row-end:4;
    font-size:1.4rem;}



/* Wrapper 2 - PICTURE AREA */

.wrapper2 {display: grid; grid-template-columns: repeat(100%, 1fr); grid-auto-rows: auto; border-top:1px solid #333; border-bottom:1px solid #333;}
.wrapper2 > div {padding: 1em;}
  
/* flex-wrap wraps the pictures to next row */
.picture_box {display: flex; flex-wrap: wrap; text-align:center; justify-content: center;}  
.picture_box img {padding:1%; border: solid 2px #333;}
.picture_box1 {padding:1%;}
.picture_box2 {padding:1%;}
.picture_box3 {padding:1%;}
.picture_box4 {padding:1%;}


/* Wrapper 3 - CONTENT AREA */
.wrapper3 {display: grid; grid-template-columns: repeat(, 1fr);  grid-auto-rows: auto; }
.wrapper3 { }
.wrapper3 > div {text-align:center; padding: 1em; font-size:1.5rem; margin-right:2%; margin-left:2%; }
  
.content_box {}
.content_box_1 {grid-column-start: 1; grid-column-end: 2; grid-row-start:1; grid-row-end:10;}
.content_box_2 {grid-column-start: 2; grid-column-end: 3;}
.content_box_3 {grid-column-start: 3; grid-column-end: 4;}


/* Wrapper 4 - FOOTER AREA */
.wrapper4 {display: grid; grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: auto; background-color: rgb(50, 100, 206); color:#fff;}
.wrapper4 {border-top:2px solid black;}
.wrapper4 > div {text-align:center; padding: 1em; font-size:1.5rem; margin-right:2%; margin-left:2%;}
  
.footer_box {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}

/* Wrapper5 - MENU AREA */
.wrapper5 {display: grid; grid-template-columns: repeat(, 1fr);  grid-auto-rows: auto; font-size:1.5rem; }
.wrapper5 > div {padding: 1em; text-align:center;} 

.content_box_5 {
    grid-column-start: 1; 
    grid-column-end: 1; 
    grid-row-start: 1; 
    grid-row-end: 1;}

.content_box_5a {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}
  
.content_box_5b {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

.content_box_5c {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}


.wrapper5small {display: grid; grid-template-columns: repeat(, 1fr);  grid-auto-rows: auto; font-size:1.3rem; margin-bottom:1%;}
.content_box_5asmall {grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; text-align:center;}
.content_box_5bsmall {grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; text-align:center;}



/* Contact Form Area */

.contact_form_container {display: grid; grid-template-columns: repeat(, 1fr); }
.contact_form_container > div { height:auto;}
.gallery_wrapper_contact {border-top:solid 1px black;}
.gallery_wrapper_contact_email {display:flex; justify-content: center;}
.gallery_wrapper_contact_email p {font-style: italic; font-size:1.2rem; margin-top:4%;}
.gallery_wrapper_contact a {font-size:1.6rem; line-height:2.0rem; margin:1%;}
.gallery_wrapper_contact_picture {display:flex; flex-wrap: wrap; justify-content: center; margin:1%;}
.gallery_wrapper_contact_picture img {width:100%; max-width:1000px; height:auto;}


input[type=text], select, textarea {
    width: 100%; 
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }
  
  input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input[type=submit]:hover {
    background-color: #45a049;
  }
  
  .container {border-radius: 5px; background-color: #f2f2f2; padding: 20px;}


@media screen and (max-width: 700px) {
    .contact_form_container {
        display: grid; grid-template-columns: repeat(1, 1fr);
    }
}



/* MenuWrapper1 - MENU AREA */

@media screen and (max-width: 700px) {
.menuwrapper1 {display: grid; grid-template-columns: 100%; grid-template-rows:316px 30px 30px 30px auto;} }

@media screen and (max-width: 700px) {
.menuwrapper1 a {color:red; font-size:1.3rem; font-weight:700;} }

@media screen and (max-width: 700px) {
.menuwrapper1 > div {padding: 1em; text-align:center;} }

@media screen and (max-width: 700px) {
.menuwrapper1 img {width:300px;} }

@media screen and (max-width: 700px) {   /* The LOGO */
.menubox1 {grid-column-start: 1;  grid-column-end: 2; grid-row-start: 1;  grid-row-end: 3;} }

@media screen and (max-width: 700px) {   /* Services */
.menubox2 {grid-column-start: 1; grid-column-end: 2; grid-row-start:2; grid-row-end: 3;} }
  
@media screen and (max-width: 700px) {    /* About */
.menubox3 {grid-column-start: 1;  grid-column-end:2; grid-row-start: 3;  grid-row-end:4;} }

@media screen and (max-width: 700px) {   /* Contact */
.menubox4 { grid-column-start:1;  grid-column-end:2; grid-row-start: 4;  grid-row-end:5;} }

@media screen and (max-width: 700px) {   /* Introduction */
.menubox5 { grid-column-start: 1;  grid-column-end:2; grid-row-start: 5;  grid-row-end:6; font-size:1.4rem;} }


@media screen and (max-width:800px) {
    .wrapper5 {font-size:1.2rem; font-weight:700} }

@media screen and (max-width:800px) {
    .wrapper5 {font-size:1.0rem; font-weight:600} }

@media screen and (max-width:500px) {
    .wrapper5 {font-size:1.0rem; font-weight:500} }

@media screen and (min-width:500px) {
    .wrapper5small {font-size:0rem;} }