html, body {
    
    margin: 0; background:#fff;
}
html {
    font-family: "helvetica neue", sans-serif;
}

h1{padding: 10px;font-size: 24px;border-bottom: 2px solid #1d1e25; color:#990100;}
h2{font-size: 16px;color:#990100;border: 2px solid #1d1e25; padding: 15px; text-align: center;}
h3{font-size: 16px;color:#000;}
h4{font-size: 14px;color:#000;}

#wrapper{ width: 60%; margin: 0 auto;  background: #DEDEDE; }

header { width: 60%; margin: 0 auto; height: 130px; background: transparent;}

.logo{float:left;padding: 15px; background: transparent; }
.social-media {float: right; padding: 20px; background: transparent;}

#nav {  clear:both; width: 100%; }


.menu {    clear:both;background: #1d1e25;  padding:10px 20px; border: 5px; }
.menu a {    clear: right;    text-decoration: none;    color: #fff;       padding:10px 20px;}
.menu :hover {background:#fff; color:#9e0b0f;  }
span { color:#9e0b0f; background:#fff;padding:10px;    }



label {    margin: auto;    font-size: 26px;    line-height: 30px;    display: none;    width: 26px;    float: left; }
#toggle {    display: none; }

#content-A { padding: 20px; }

.index { padding: 10px 10px 10px 15px; width:90%; display:inline-block; height:300px; margin-left:10px; }
.intro{ padding: 10px 10px 10px 15px; width:50%; display:inline-block; height:300px; margin-left:10px; }
.features {  border-bottom: 2px solid #ffaf4e; padding-bottom: 10px; margin: 10px; clear: both; }
.features ul { display: inline-block; }
.plan {  padding-bottom: 10px; margin: 10px; clear: both;}
.serve{ padding: 10px 10px 50px 15px; width:65%; display:inline-block; height:150px; margin-left:10px; }
.slide{float: right; width:45%; height: 75% ;display:inline-block; padding: 10px 10px 40px 10px; }
.display{ display:inline-block; width:25%; margin-top: 20px    ;color: #990100; border: 1px solid #ffaf4e;text-align: center; float: right;}
.display img{ display:inline-block; width:100%; }
.projects {}
.predrawn {}

.Image-container {display: flex; flex-wrap: wrap; justify-content: center; padding: 10px}
.Image-container .image {display: flex; flex-wrap: wrap; justify-content: center; padding: 10px}


#services { }

#questions { padding: 20px; }

#feedback { float: right; padding: 10px; margin: 10px; width: 25%; }

#preview{ clear: both;padding: 30px; }

#contact{ padding: 10px; width: 50%;float: left; }

#image-gal{ width:100%; padding:10px; }
.frame{ width:45px; float: right; }
.frame img{ width:100%; }
.clear{ clear: both; }
.image{ display:inline-block; width:30%; margin-right:0px; padding-bottom: 20px; margin-top: 10px; color: #990100;
    border: 2px solid #ffaf4e;text-align: center; }
.image:hover{ display:inline-block; width:30%; margin-right:0px; padding-bottom: 20px; margin-top: 10px; color: #fff;
    background:#b4353e; cursor:pointer; }
.image img{ width:100%}
.image h5{  line-height: 10px; text-align: center;}

.image101{ display:inline-block; width:40%; padding-bottom: 60px; margin: 20px; color: #990100;
    border: 2px solid #ffaf4e;text-align: center;  }
.image101:hover{ display:inline-block; width:40%; padding-bottom: 60px; margin: 20px; color: #fff;
    background:#b4353e; cursor:pointer; }
.image101 img{ width:100%}
.image101 h5{  line-height: 10px; text-align: center;}

footer {width: 100%;background: #1d1e25; text-align: center;}
footer p{clear:both;padding: 10px;list-style: none; display: inline-block; padding: 10px;text-decoration: none;color: #fff;}


/*-------------mobile device-------------*/

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

	#wrapper{ width: 90%; height: 100%; }
     .social-media {display: none;}
     .logo{float:left;padding-left: 20px; }


    label {        display: block;  cursor: pointer; background: #1d1e25; color: #fff; width: 100%; text-align: right; }
    .menu {        text-align: center;              display: none;  }
    .menu a {        display: block;        border-bottom: 1px solid #EAEAEB;        margin: 0;    }

    #toggle {    display: none; }
    #toggle:checked + .menu {     display: block; }
    
   span { display: none;   }

    #content-A { clear: both; text-align: center;}
     .index { width: 90%; text-align: center; }
     .intro { width: 90%; text-align: left; } 
     .serve { width: 90%; text-align: left;} 
     .slide{ width:90%; height: 75% ;display:inline-block;}
     .display{ width:99.5%; text-align: center; display: inline-block;}

    #feedback { width: 100%; text-align: center; }

    
#image-gal{  display: inline-block; }
.image{ width:100%;  }
.image:hover{ width:100%;  }

.image101 { width:90%;  }
.image101:hover{ width:90%;  }

}