/*  Color Legend  */

/* Reset */

html, body { margin: 0; padding: 0; border: 0; background: transparant; font-size:10px }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, table, tr,
 th, td, tbody, tfoot, thead {
 margin: 0;
 padding: 0;
 border: 0;
 vertical-align: baseline;
 background: transparent;
 }
 img   { margin:0; padding: 0; border:0 }
 
 table, tr, th, td, tbody, tfoot, thead {
     margin: 0; padding: 0; border: 0;
     vertical-align:baseline;
     background:transparent;
     }
     
table { border-collapse: collapse; border-spacing: 0:  }

input, select, textarea, form, fieldset {
     margin:0; padding: 0; border: 0;
     }
     
article, aside, dialog, figure, footer, header, hgroup, nav, section {
   display:block;   }

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
font-weight:normal;
line-height:100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #000;
}     
 
ol, ul { list-style: none;}


/* Global */

html            {    } 
body            {background-color:white;    }
 
/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

h1  { font-size:24px; }
h2  { font-size:20px; } 
h3  { font-size:16px; } 
h4  { font-size:14px; } 
h5  { font-size:14px; } 
 
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img ( margin: 0; )


/* Text Elements */

p               {color:#000; font-size:12px; line-height:150%; }
p .left         {margin: 1.5em li5em 1.5em 0; padding: 0; }
p .right        {margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a               {  }
a:link          { color: #00f;  }
a:visited       { color: #0f0;  } 
a:active        { color: #000;  }
a:focus         { color: #666;  }
a:hover         { color: #f00;  }

blockquote      { color:#000; font-size:12px; }

strong          { font-weight: bold; }
em              { font-style:italic; }

/* Images */




/*Lists  */


ul         {  }
ol         { list-style-type:decimal; }

ul li      { color:000; font-size:12px; } 
ol li      { color:000; font-size:12px; }  

dl         {  }
dt         {  }
dd         {  }



/* Table */

table         { width:100%; }

tr               {  }
.odd             { background-color:#eee; }
.even            {background-color:#fff; }
   
th               { font-weight:bold: }
thead, th        { background: #ccc; }

tbody            {  }

th, td, captionc {  }
caption          {  }

tfoot            {  }
.tfooter         { background-color:#ccc; text-align:center; font-style:italic; }

caption          { background:#efefef; }



/*Miscellaneous*/

sup, sub         { line-height: 0;}

abbr, acronym    { border-bottom: 1px dotted #666; }
address          {   }
del              {background:FFCECE; color:#f00;  }

code, pre        {background-color:#FF9; padding:2px 0px; margin: 4px 25px;
                    font-family:"Courier New", Courier, monospace; font-size:12px; }

/* Containers */
.hide_menu3 {left:0; overflow:auto; z-index:9999999999999999999999; display:none; transition:2.6s ease; }
.fa-times {color:white; top:5px; right:30px; position:absolute; font-size:250%; cursor:pointer; font-weight:100;}
.sidebar_menu { position:fixed; top:-130%;  right:0; margin:0px 0 0 0; padding:0; width: 100%; background-color:#101010; opacity: 1; transition: 1.3s ease-in-out; z-index:9999999999999999999999;  }
.hide_menu {top:70px;   }
.hide_menu2 {background-color:#4C4747; transition: 1.3s ease-in-out;}
.toggle_menu  { float:right; margin-top:-2px; padding:15px; color:white; cursor: pointer; background-color: rgba (0, 0, 0, 0.9); font-size: 3.5em; opacity:1; z-index:999999999999;}

#topnavs {margin:20px 2% 10px 2%; display:block;  width:96%; float:right; z-index:99999999999999999999999; }
#topnavs h3 {color:white; text-align:left; margin:0px 2% 34px 3%;  font-family: 'Raleway', sans-serif; font-size:240%; font-weight:100; }
#topnavs li   {padding:0px 0px; box-sizing:border-box; color: D8D8D8;  transition: all .6s ease-in-out; cursor: pointer; }
#topnavs li a {color:white; line-height:20px; display:block; text-align: left; border-bottom:1px darkgrey solid; font-family: 'Oswald', sans-serif; background-color:none; font-weight: 700; padding:4px 10px; box-sizing:border-box; font-size:140%; color:white; cursor: pointer; width:100%; }
#topnavs li a:hover{color:#ee7600; transition: all 0.3s ease-in-out; }


#topnav .button  {position:relative; width:5%; margin-right:3%; float:right;  z-index:99; display:none; }

#topnav {float:left;  clear:both; width:100%; position:relative; font-weight:bold; z-index:99999999;
 height:55px; padding:8px 0px;}
 #topnav .logo {width:20%; float:left; height:65px;  margin:0 1% 0 1%;  }
#topnav .logo img {width:74%; margin:-4px 13% 0 13%;}
 #topnav .biggest {font-size:140%;}
 #topnav  .topnav1            {float:left;  margin:0 0% 0 0%; width:39%; position:relative; font-weight:bold; z-index:99999999; height:55px; margin-top:0; }
 #topnav .topnav1 ul           {float:left;  padding:0px; list-style:none;  width:100%; margin:0px 0% 0 0%; z-index:9999; }
 #topnav .topnav1 ul li        {display:inline; float:right; height:55px; text-align:center; position:relative; margin:0 24px; z-index:9999;}
 #topnav .topnav1 ul li a      {height:21px; color: #f8f8ff; float:left; width:100%; padding:18px 0px; font-size:160%; letter-spacing:.3px; font-weight:700; z-index:9999;  font-family: 'Oswald', sans-serif; display:block; text-align:center; }
 #topnav .topnav1 a:hover      { text-decoration:underline; }
 #topnav  .topnav2            {float:left;  margin:0 0% 0 0%; width:39%; position:relative; font-weight:bold; z-index:99999999; height:55px; margin-top:0; }
 #topnav .topnav2 ul           { float:left; padding:0px; list-style:none;  width:100%; margin:0px 0% 0 0%; z-index:9999; }
 #topnav .topnav2 ul li        {display:inline; float:left; height:55px; text-align:center; position:relative; margin:0 24px; z-index:9999;}
 #topnav .topnav2 ul li a      {height:21px; color:#f8f8ff; float:left; width:100%; padding:18px 0px; font-size:160%; letter-spacing:.3px; font-weight:700;z-index:9999;  font-family: 'Oswald', sans-serif; display:block; text-align:center; }
 #topnav .topnav2 a:hover      { text-decoration:underline; }


 #banner {float:left; position:relative; width:100%; margin-top:-71px; padding-bottom:0px; height:auto; background-color:none; z-index:999;}
 #banner img {width:100%; padding:0; margin:0 0 0px 0; height:auto; opacity:1; z-index:999; filter: brightness(95%);}
#banner .next {display:none;}
#banner .first {display:inline;}

#about1 {width:100%; float:left; position:relative; margin-top:-140px; height:150px; background-color:white; z-index:9;}

#about {float:left; position:relative; background-color:white; width:100%; margin:0; height:auto; z-index:999;}
#about .left {float:left; position:relative; width:60%;}
#about .left h1 {text-align:center; padding:30px 0 15px 0; font-family: 'Oswald', sans-serif; font-size:400%; font-weight:700;}
#about .left p {color:rgba(0,0,0,.65); text-align:center; font-size:180%; margin:0 15%; line-height:30px; font-family: 'Oswald', sans-serif; letter-spacing:.1px; font-weight:300;}
#about .left h5 {color:rgba(0,0,0,.95); text-align:center; font-size:250%; margin:10px 15%; line-height:30px; font-family: 'Oswald', sans-serif; letter-spacing:.1px; font-weight:300;}
#about .right { float:right; position:relative; width:40%;}
#about .right img {width:95%; float:left; margin:0 5% 0 0;}

#services1 {width:100%; float:left; position:relative; margin-top:-120px; height:160px; background-color:white; z-index:9;}

#services2 {width:100%; float:left; position:relative; margin:30px 0px 0 0; height:auto; background-color:white; z-index:999;}
#services2 img {width:50%; height:auto; float:left; margin:40px 25%;}

#services {float:left; position:relative; width:80%; padding:30px 10% 0px 10%; background-color:rgba(0,0,0,.88); height:auto; }
#services h2 {font-family: 'Oswald', sans-serif; text-align:center; color:rgba(255,255,255,.95); font-size:440%; font-weight:700; margin-top:0px; padding:20px 0 40px 0;}
#services .one {float:left; position:relative; width:21%; margin:20px 2% 10px 2%; height:130px; }
#services .one h3 {color:rgba(255,255,255,.95);  letter-spacing:.3px; font-size:200%; font-family: 'Oswald', sans-serif; padding-bottom:7px; font-weight:700;}
#services .one p {color:rgba(255,255,255,.85); font-size:170%; font-family: 'Oswald', sans-serif; line-height:20px; font-weight:300;}
#services .two {float:left; position:relative; width:21%; margin:20px 2% 10px 2%; height:130px; }
#services .two h3 {color:rgba(255,255,255,.95); font-size:200%;  letter-spacing:.3px; font-family: 'Oswald', sans-serif; padding-bottom:7px; font-weight:700;}
#services .two p {color:rgba(255,255,255,.85); font-size:170%; font-family: 'Oswald', sans-serif; line-height:20px; font-weight:300;}
#services .three {float:left; position:relative; width:21%; margin:20px 2% 10px 2%; height:130px; }
#services .three h3 {color:rgba(255,255,255,.95); font-size:200%;  letter-spacing:.3px; font-family: 'Oswald', sans-serif; padding-bottom:7px; font-weight:700;}
#services .three p {color:rgba(255,255,255,.85); font-size:170%; font-family: 'Oswald', sans-serif; line-height:20px; font-weight:300;}
#services .four {float:left; position:relative; width:21%; margin:20px 2% 10px 2%; height:130px; }
#services .four h3 {color:rgba(255,255,255,.95); font-size:200%;  letter-spacing:.3px; font-family: 'Oswald', sans-serif; padding-bottom:7px; font-weight:700;}
#services .four p {color:rgba(255,255,255,.85); font-size:170%; font-family: 'Oswald', sans-serif; line-height:20px; font-weight:300;}
#services .five {float:left; position:relative; width:21%; margin:10px 2% 20px 2%; height:130px;}
#services .five h3 {color:rgba(255,255,255,.95); font-size:200%;  letter-spacing:.3px; font-family: 'Oswald', sans-serif; padding-bottom:7px; font-weight:700;}
#services .five p {color:rgba(255,255,255,.85); font-size:170%; font-family: 'Oswald', sans-serif; line-height:20px; font-weight:300;}
#services .six {float:left; position:relative; width:21%; margin:10px 2% 20px 2%;  height:130px; }
#services .six h3 {color:rgba(255,255,255,.95); font-size:200%;  letter-spacing:.3px; font-family: 'Oswald', sans-serif; padding-bottom:7px; font-weight:700;}
#services .six p {color:rgba(255,255,255,.85); font-size:170%; font-family: 'Oswald', sans-serif; line-height:20px; font-weight:300;}
#services .seven {float:left; position:relative; width:21%; margin:10px 2% 20px 2%;  height:130px; }
#services .seven h3 {color:rgba(255,255,255,.95); font-size:200%;  letter-spacing:.3px; font-family: 'Oswald', sans-serif; padding-bottom:7px; font-weight:700;}
#services .seven p {color:rgba(255,255,255,.85); font-size:170%; font-family: 'Oswald', sans-serif; line-height:20px; font-weight:300;}
#services .eight {float:left; position:relative; width:21%; margin:10px 2% 20px 2%;  height:130px;}
#services .eight h3 {color:rgba(255,255,255,.95); font-size:200%;  letter-spacing:.3px; font-family: 'Oswald', sans-serif; padding-bottom:7px; font-weight:700;}
#services .eight p {color:rgba(255,255,255,.85); font-size:170%; font-family: 'Oswald', sans-serif; line-height:20px; font-weight:300;}
#services .nine {float:left; position:relative; width:21%; margin:10px 2% 20px 2%;  height:130px; }
#services .nine h3 {color:rgba(255,255,255,.95); font-size:200%;  letter-spacing:.3px; font-family: 'Oswald', sans-serif; padding-bottom:7px; font-weight:700;}
#services .nine p {color:rgba(255,255,255,.85); font-size:170%; font-family: 'Oswald', sans-serif; line-height:20px; font-weight:300;}
#services .ten {float:left; position:relative; width:21%; margin:10px 2% 20px 2%;  height:130px;}
#services .ten h3 {color:rgba(255,255,255,.95); font-size:200%;  letter-spacing:.3px; font-family: 'Oswald', sans-serif; padding-bottom:7px; font-weight:700;}
#services .ten p {color:rgba(255,255,255,.85); font-size:170%; font-family: 'Oswald', sans-serif; line-height:20px; font-weight:300;}

#contact1 {width:100%; float:left; position:relative; height:100px; background-color:white;}

#contact {width:100%; float:left; position:relative; padding:0 0 60px 0;}
#contact .left {float:left; width:55%; padding-left:10%;}
#contact .left h2 {font-family: 'Oswald', sans-serif; text-align:left; color:rgba(0,0,0,.95); font-size:440%; font-weight:700; margin-top:0px; padding:0px 0 20px 0;}
#contact .left h5 {font-family: 'Oswald', sans-serif; text-align:left; color:rgba(0,0,0,.95); font-size:220%; font-weight:700; margin-top:0px; padding:0px 0 20px 0;}
#contact .left iframe {width:80%; height:350px; float:left; margin-top:20px;}
#contact .right {float:right; width:25%; padding-right:10%;}
#contact .right h4 {font-family: 'Oswald', sans-serif; text-align:left; color:rgba(0,0,0,.95); font-size:250%; font-weight:700; margin-top:0px; padding:20px 0 10px 0;}
#contact .right .smaller {font-size:80%; color:red;}
#contact .right p {font-family: 'Oswald', sans-serif; text-align:left; color:rgba(0,0,0,.8); font-size:180%; font-weight:400; margin-top:0px; padding:0px 0 20px 0;}
#contact .right .note {margin-top:-8px; color:red;}



#above {float:left; position:relative; background-color:rgba(0,0,0,.8); width:100%;}
#above ul { margin:0 0%; padding:30px 0;}
#above ul li {display:inline; color:white; font-size:270%; margin:0 10px; border:2px white solid; padding:10px 16px 10px 16px; border-radius:10px;}
#above ul li:hover {background-color:white; color:rgba(0,0,0,.8); transition:.3s}

 #subfooter            { float:left; width:100%; background-color:rgba(0,0,0,.9); padding:15px 0 0px 0; overflow:hidden; }
 #subfooter h5 {color:white; font-size:160%; font-family: 'Oswald', sans-serif; font-weight:bold; text-align:center; line-height:140%; margin:2px 0 2px 0; }

 #footer {  float:left; width:100%; background-color:rgba(0,0,0,.9); height:auto; padding:0;}
#footer p {color:grey; text-align:center; font-size:160%; margin:20px 0 16px 0; font-family: 'Oswald', sans-serif;}
#footer .sm {float:left; width:60%; display:none;}
#footer .copyright {float:right; width:100%; margin-top:-10px; margin-bottom:10px;}

@media screen and (max-width:1000px) {
	#about .left {float:left; position:relative; width:100%;}
	#about .left h1 {padding:50px 0 15px 0;}
	#about .right {float:left; position:relative; width:100%;}
	#about .right img {width:50%; float:left; margin:30px 25% 0 25%;}
	#services2 img {width:70%; height:auto; float:left; margin:40px 15%;}
}

@media screen and (max-width:900px) {
	#services {float:left; position:relative; width:94%; padding:30px 3% 0px 3%;}
	#services .one {width:44%; margin:10px 3% 10px 3%;}
	#services .two {width:44%; margin:10px 3% 10px 3%;}
	#services .three {width:44%; margin:10px 3% 10px 3%;}
	#services .four {width:44%; margin:10px 3% 10px 3%;}
	#services .five {width:44%; margin:10px 3% 10px 3%;}
	#services .six {width:44%; margin:10px 3% 10px 3%;}
	#services .seven {width:44%; margin:10px 3% 10px 3%;}
	#services .eight {width:44%; margin:10px 3% 10px 3%;}
	#contact {width:100%; float:left; position:relative; padding:0 0 60px 0;}
#contact .left {float:left; width:90%; padding-left:5%;}
#contact .left h2 { font-size:320%; }
#contact .left h5 {font-size:180%; }
#contact .right {float:left; width:90%; padding-left:5%; padding-right:0;}
}

@media screen and (max-width:750px) {
	 #topnav .logo {width:20%; float:left; height:65px;  margin:0 1% 0 1%; }
#topnav .logo img {height:100%; width:auto; }
}

@media screen and (max-width:650px) {
 #topnav  .topnav1 {display:none;}
 #topnav  .topnav2 {display:none;}
 #topnav .button {display:inline;}
 #banner .next {display:inline;}
#banner .first {display:none;}
#about .left h1 {padding:30px 0 15px 0; font-size:300%; }
#about .left p { font-size:160%; margin:0 5%; line-height:25px;}
	#about .right img {width:80%; float:left; margin:30px 10% 0 10%;}
	#services2 img {width:94%; height:auto; float:left; margin:40px 3%;}
#above ul li {font-size:220%;}
 #subfooter h5 {font-size:140%; }
#footer p {font-size:140%;}
#contact1 {margin-top:-40px;}
#services1 {margin-top:-160px; height:140px;}

}

@media screen and (max-width:550px) {
	#services {padding-bottom:30px;}
#about .left h5 {font-size:220%;}
#services h2 {font-size:320%;}
	 #topnav .logo {width:20%; float:left; height:69px;  margin:0 1% 0 1%; }
	 #topnav {height:60px; padding:8px 0px;}
	 #contact .left iframe {width:100%; height:220px; margin-top:0px;}
	 #services .one h3 {font-size:180%; text-align:center;}
#services .one p {font-size:150%; text-align:center;} 
	 #services .two h3 {font-size:180%; text-align:center;}
#services .two p {font-size:150%; text-align:center;} 
	 #services .three h3 {font-size:180%; text-align:center;}
#services .three p {font-size:150%; text-align:center;} 
	 #services .four h3 {font-size:180%; text-align:center;}
#services .four p {font-size:150%; text-align:center;} 
	 #services .five h3 {font-size:180%; text-align:center;}
#services .five p {font-size:150%; text-align:center;} 
	 #services .six h3 {font-size:180%; text-align:center;}
#services .six p {font-size:150%; text-align:center;} 
	 #services .seven h3 {font-size:180%; text-align:center;}
#services .seven p {font-size:150%; text-align:center;} 
	 #services .eight h3 {font-size:180%; text-align:center;}
#services .eight p {font-size:150%; text-align:center;} 
	 #services .nine h3 {font-size:180%; text-align:center;}
#services .nine p {font-size:150%; text-align:center;} 
	 #services .ten h3 {font-size:180%; text-align:center;}
#services .ten p {font-size:150%; text-align:center;} 
}

@media screen and (max-width:450px) {
	#contact .left h2 { font-size:280%; }
#contact .left h5 {font-size:160%; }
#contact .right h4 {font-size:220%; }
#contact .right p {font-size:160%;}
 #subfooter h5 {font-size:130%; }
#footer p {font-size:130%;}
}

@media screen and (max-width:450px) {
#about .left h5 {font-size:200%;}
}