/* Imports
--------------------------------------------------------------------------------------- */
@import url(imports/reset.css);
@import url(imports/global.css);
/* MIXINS 
------------------------------------------------------------ */
/* Vars
--------------------------------------------------------------------------------------- */
/* html, body
--------------------------------------------------------------------------------------- */
html { overflow-y: scroll; }

html, body {
	/*background: #007e46;*/
	background: #ffffff;
	font-family: "Lato", Arial, serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 300;
	color: #000;
}

#wrap { position: absolute; top: 24px; right: 64px; bottom: 0; left: 52px; min-height: 440px; }

/* Typography
--------------------------------------------------------------------------------------- */
h1, h2, h3 { margin: 1em 0 0.5em 0; }

h1 { font-family: "Lato", Arial, serif; font-size: 3em; line-height: 1.2; }

h2 { font-family: "Lato", Arial, serif; font-size: 2em; line-height: 1.2; }

h3 { font-family: "Lato", Arial, serif; font-size: 1em; line-height: 1.2; letter-spacing: 1px; font-weight: 300; margin-bottom: -1em; text-transform: uppercase; color: #2b442d; }

p { font-size: 1.2em; line-height: 1.5; /*color: #d0d0d0;*/ margin-bottom: 2em; }

a, a:link, a:visited { color: #dbdbdb; }

.tab { margin-left: 40px; color: #000000; }
.tab2 { margin-left:80px; color: #000000; }
.tab3 { margin-left: 120px; color: #000000; }

/* Navigation
--------------------------------------------------------------------------------------- */

@media screen and (min-device-width: 1024px) and (max-device-width: 1280px){

  
 #imgClose{
float: right;
  
}
   }
   @media screen and (min-device-width: 768px) and (max-device-width: 1366px){

  
 #imgClose{
float: right;
  
}
}
#nav {
	display: inline-block;
	display: block;
	position: absolute;
	z-index: 99999;
	top: 0;
	left: 36px;
	right: 36px;
	font-family: "Lato", Arial, serif;
	font-weight: 700;
	color: #2b442d;
	height: 39px;
}
#submit-btn{
margin-top:10px;
width: 124px;
height: 33px;
/*background:#007e46;*/
background:#000000;
 font: bold 15px Arial;
color: #ffffff;
border:none medium;;

}
#emf-logo{
	display:none !important;
	
	}
#nav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#nav .logo { float: left; font-size: 2em; line-height: 1; font-weight: 100; }
#nav .logo a, #nav .logo a:link, #nav .logo a:visited { color: #e2f0e3; text-shadow: 0px 0px 8px #1c6b22; }
#nav .logo a span, #nav .logo a:link span, #nav .logo a:visited span { color: #7dc082; }
#nav .links { display: inline-block; display: block; opacity: 0; float: right; font-weight: 300; text-align: right; -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; }
#nav .links:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#nav .links.active { opacity: 1; }
#nav .links.active .link { display: block; }
#nav .links .link { display: none; float: left; padding-left: 1em; margin-top: 10px; margin-left: 0.25em; }
#nav .links .link.home { display: none; }
#nav .links .link a, #nav .links .link a:link, #nav .links .link a:visited, #nav .links .link a:hover, #nav .links .link a:focus { /*color: #dfdfdf;*/ color: #000000; }
#nav .links .mobile-menu { display: none; }
#nav .links .mobile-menu a, #nav .links .mobile-menu a:link, #nav .links .mobile-menu a:visited, #nav .links .mobile-menu a:hover, #nav .links .mobile-menu a:focus { color: #dfdfdf; }

/* Content
--------------------------------------------------------------------------------------- */
#viewport { position: absolute; top: 64px; right: 0; bottom: 64px; left: 0; }
#viewport .section { overflow: hidden; position: absolute; /*background: #007e46;*/ background: #ffffff; /*border: 1px solid #7dc082;*/border: 1px solid #000000; border-width: 1px; opacity: 1; margin: 0 0 12px 12px; -webkit-transition: border-color 0.4s, opacity 1s, top 0.5s, right 0.5s, bottom 0.5s, left 0.5s; -moz-transition: border-color 0.4s, opacity 1s, top 0.5s, right 0.5s, bottom 0.5s, left 0.5s; transition: border-color 0.4s, opacity 1s, top 0.5s, right 0.5s, bottom 0.5s, left 0.5s; }
#viewport .section.intro { padding: 24px; border-right: none; border-bottom: none; border-left: none; border-top: none; font-family: "Lato", Arial, serif; font-size: 2em; font-weight: 100; }
#viewport .section#about.active, #viewport .section#services.active, #viewport .section#resume.active, #viewport .section#portfolio.active, #viewport .section#projects.active, #viewport .section#clients.active, #viewport .section#contact.active { cursor: pointer; }
/*#viewport .section#about.active:hover, #viewport .section#services.active:hover, #viewport .section#resume.active:hover, #viewport .section#portfolio.active:hover,#viewport .section#projects.active:hover, #viewport .section#clients.active:hover, #viewport .section#contact.active:hover { border-color: #fff; }*/
#viewport .section#about.active:hover .icon, #viewport .section#services.active:hover .icon, #viewport .section#resume.active:hover .icon, #viewport .section#portfolio.active:hover .icon,#viewport .section#projects.active:hover .icon, #viewport .section#clients.active:hover .icon, #viewport .section#contact.active:hover .icon { color: #dbdbdb; }
#viewport .section#about.hiding, #viewport .section#services.hiding, #viewport .section#resume.hiding, #viewport .section#portfolio.hiding, #viewport .section#projects.hiding, #viewport .section#clients.hiding, #viewport .section#contact.hiding { opacity: 0; }
#viewport .section#about.expand, #viewport .section#services.expand, #viewport .section#resume.expand, #viewport .section#portfolio.expand, #viewport .section#projects.expand, #viewport .section#clients.expand, 
 #viewport .section#contact.expand{ z-index: 44; top: 0; right: 0; bottom: 0; left: 0; /*background: #138A43;*/background: #ffffff; cursor: auto; }
#viewport .section#about.expand:hover, #viewport .section#services.expand:hover, #viewport .section#resume.expand:hover, #viewport .section#portfolio.expand:hover,#viewport .section#projects.expand:hover, #viewport .section#clients.expand:hover, #viewport .section#contact.expand:hover { /*border-color: #7dc082;*/border-color: #000000; }
#viewport .section#about.expand:hover .icon, #viewport .section#services.expand:hover .icon, #viewport .section#resume.expand:hover .icon, #viewport .section#portfolio.expand:hover .icon,#viewport .section#projects.expand:hover .icon, #viewport .section#clients.expand:hover .icon, #viewport .section#contact.expand:hover .icon { /*color: #41AA4D;*/color: #000000; }
#viewport .section#about.expand .scrollbar-cover, #viewport .section#services.expand .scrollbar-cover, #viewport .section#resume.expand .scrollbar-cover, #viewport .section#portfolio.expand .scrollbar-cover,#viewport .section#projects.expand .scrollbar-cover, #viewport .section#clients.expand .scrollbar-cover, #viewport .section#contact.expand .scrollbar-cover { /*background: #138A43;*/background: #000000; }
#viewport .section#about.expand .back, #viewport .section#services.expand .back, #viewport .section#resume.expand .back, #viewport .section#portfolio.expand .back,#viewport .section#projects.expand .back, #viewport .section#clients.expand .back, #viewport .section#contact.expand .back { top: 19px; opacity: 1; }
#viewport .section#about.expand .back:hover, #viewport .section#services.expand .back:hover, #viewport .section#resume.expand .back:hover, #viewport .section#portfolio.expand .back:hover,#viewport .section#projects.expand .back:hover, #viewport .section#clients.expand .back:hover, #viewport .section#contact.expand .back:hover { color: #2B442D; }
#viewport .section#about.expand h1.title, #viewport .section#services.expand h1.title, #viewport .section#resume.expand h1.title, #viewport .section#portfolio.expand h1.title,#viewport .section#projects.expand h1.title, #viewport .section#clients.expand h1.title, #viewport .section#contact.expand h1.title { border-bottom: 1px solid #ddd; font-size: 2.5em; line-height: 1;  padding: 17px 49px 17px 38px; left: 24px; right: 24px; }
#viewport .section#about.expand .icon, #viewport .section#services.expand .icon, #viewport .section#resume.expand .icon, #viewport .section#portfolio.expand .icon,#viewport .section#projects.expand .icon, #viewport .section#clients.expand .icon, #viewport .section#contact.expand .icon { top: 19px; right: 48px; }
#viewport .section#about { top: 0%; right: 66.66666%; bottom: 50%; left: 0%; }
#viewport .section#services { /*background: #138a43;*/ background: #ffffff; top: 0%; right: 33.33333%; bottom: 50%; left: 33.33333%; }
/*Changed by wayne*/
#viewport .section#resume { /*background: #138a43;*/ background: #ffffff; top: 0%; right: 0%; bottom: 50%; left: 66.66666%; }
/*#viewport .section#portfolio { background: #138a43; top: 50%; right: 66.66666%; bottom: 0%; left: 0%; }
#viewport .section#projects { background: #138a43; top: 50%; right: 66.66666%; bottom: 0%; left: 0%; }
#viewport .section#clients { background: #138a43; top: 50%; right: 33.33333%; bottom: 0%; left: 33.33333%; }
#viewport .section#contact { background: #138a43; top: 50%; right: 0%; bottom: 0%; left: 66.66666%; }*/
#viewport .section#portfolio { /*background: #138a43;*/ background: #ffffff; top: 50%; right: 75.00%; bottom: 0%; left: 0%; }
#viewport .section#projects { /*background: #138a43;*/ background: #ffffff; top: 50%; right: 50.00%; bottom: 0%; left: 25.00%; }
#viewport .section#clients { /*background: #138a43;*/ background: #ffffff; top: 50%; right: 25.00%; bottom: 0%; left: 50.00%; }
#viewport .section#contact { /*background: #138a43;*/ background: #ffffff; top: 50%; right: 0%; bottom: 0%; left: 75.00%; }
#viewport .section .scrollbar-cover { position: absolute; z-index: 999; top: 0; right: -32px; width: 64px; height: 100%; /*background: #138a43;*/ background: #ffffff; }
#viewport .section .back { position: absolute; z-index: 100; top: 18px; left: 24px; opacity: 0; font-size: 1.5em; cursor: pointer; -webkit-transition: color 0.4s, opacity 0.4s, top 0.4s; -moz-transition: color 0.4s, opacity 0.4s, top 0.4s; transition: color 0.4s, opacity 0.4s, top 0.4s; }
#viewport .section h1.title { position: absolute; z-index: 99; top: 0; left: 0; right: 0; padding: 24px; margin: 0; /*border-bottom: 1px solid #138a43;*/border-bottom: 1px solid #000000; font-size: 2em; /*font-weight: 100;*/font-weight: 300; line-height: 1.5; /*text-shadow: 0px 0px 5px #1b6810;*/ -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }
#viewport .section .icon { position: absolute; z-index: 999; top: 32px; right: 42px; font-size: 2.5em; /*color: #41AA4D;*/ color: #000000; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }
#viewport .section .full-content { opacity: 0; position: absolute; top: 85px; /*width:100%;*/width:99%; z-index: 1000000;  bottom: 0; overflow-y: auto; /*padding: 0 2% 24px 24px;*/padding: 0 4% 24px 24px; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; transition: opacity 0.2s;


 }

/*Logo #cycler style*/
#cycler{position:relative;width:100%;height:auto;}
#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3}

#viewport .section .full-content.showing { opacity: 1;


 }
 @media screen and (min-device-width: 768px) and (max-device-width: 1024px){

   #imgClose{

  cursor: pointer !important;
    float: left !important;
    
    margin-left: 296px !important;
    
    margin-top: 0 !important;
}

.simplemodal-container{

  height: 283px !important;
  top: 370px !important;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px){
  /* some CSS here */
  #tbl_contact, #table_form, th{

    display: block;
    width: 100%;
    margin-bottom: 5px;
  }
  html {
    overflow-y: hidden;
}
.simplemodal-container
{
height: 286px !important;
    left: 29px !important;
    position: fixed;
    top: 135px !important;
    width: 300px !important;
    z-index: 1002;
}
#imgClose{

  cursor: pointer !important;
    float: left !important;
    left:  !important;
    margin-left: 254px !important;
    
    margin-top: 0 !important;
}

}




/* Footer
--------------------------------------------------------------------------------------- */
#footer { position: absolute; left: 36px; right: 36px; bottom: 0; height: 76px; font-family: "Lato", Arial, serif; font-weight: 300; font-size: 0.8em; line-height: 76px; }
#footer .credit { float: left; color:#000;}
#footer .social { float: right; list-style: none; }
#footer .social a{ color: #000;}
#footer .social li { display: inline; margin-left: 12px; }
#footer .social li i.fa { font-size: 1.2em; margin-right: 3px; }

/* RESPOND
--------------------------------------------------------------------------------------- */
@media screen and (max-width: 1000px), screen and (max-height: 720px) { #viewport .section.intro { font-size: 1.5em; }
  #viewport .section#about.expand h1.title, #viewport .section#services.expand h1.title, #viewport .section#resume.expand h1.title, #viewport .section#portfolio.expand h1.title,#viewport .section#projects.expand h1.title, #viewport .section#clients.expand h1.title, #viewport .section#contact.expand h1.title { font-size: 2em; }
  #viewport .section h1.title { font-size: 1.5em; }
  #viewport .section .icon { top: 24px; right: 24px; } }
@media screen and (max-width: 900px), screen and (max-height: 600px) { #nav .logo { font-size: 1.5em; }
  #nav .links .link { margin-top: 3px; margin-left: 0.15em; }
  #viewport { top: 48px; } }
@media screen and (max-width: 800px) { #nav .links { position: absolute; right: -36px; height: 42px; overflow: hidden; opacity: 1; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; transition: height 0.5s; }
  #nav .links.open {/* height: 400px;*/  height: 295px;border-bottom: 1px solid #000000;}
  #nav .links .link { display: block; float: none; position: relative; top: 48px; left: 0; margin: 0; padding: 0; /*background: #272525;*/background: #ffffff; /*border-top: 1px solid #7dc082;*/border-top: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000; text-align: left;border-collapse:collapse; }
  #nav .links .link.home { display: block; }
  #nav .links .link a, #nav .links .link a:link, #nav .links .link a:visited { display: block; height: 100%; padding: 8px 25px 8px 12px; }
  #nav .links .mobile-menu { display: block; position: absolute; top: 0; right: 24px; }
  #viewport .section.intro { font-size: 2em; }
  #viewport .section#about { top: 0%; right: 0%; bottom: 76.66666%; left: 0%; }
#viewport .section#services { top: 23.33333%; right: 50%; bottom: 38.33333%; left: 0%; }
/*  Changed by Wayne */

  #viewport .section#resume { top: 23.33333%; right: 0%; bottom: 38.33333%; left: 50%; }
/*  #viewport .section#portfolio { top: 61.66666%; right: 66.66666%; bottom: 0%; left: 0%; }
    #viewport .section#projects { top: 61.66666%; right: 66.66666%; bottom: 0%; left: 0%; }
  #viewport .section#clients { top: 61.66666%; right: 33.33333%; bottom: 0%; left: 33.33333%; }
  #viewport .section#contact { top: 61.66666%; right: 0%; bottom: 0%; left: 66.66666%; } } */
    #viewport .section#portfolio { top: 61.66666%; right: 75.00%; bottom: 0%; left: 0%; }
    #viewport .section#projects { top: 61.66666%; right: 50.00%; bottom: 0%; left: 25.00%; }
  #viewport .section#clients { top: 61.66666%; right: 25.00%; bottom: 0%; left: 50.00%; }
  #viewport .section#contact { top: 61.66666%; right: 0%; bottom: 0%; left: 75.00%; } }
  
@media screen and (max-width: 700px) { h1, h2, h3 { margin: 1em 0 0.5em 0; }
  h2 { font-size: 1.2em; line-height: 1.5; }
  h3 { line-height: 1.5; }
  p { font-size: 1em; }
  #wrap { top: 24px; right: 12px; bottom: 0; left: 0; }
  #nav { left: 26px; right: 26px; }
  #nav .logo { font-size: 1em; line-height: 1.5; }
  #viewport { position: static; margin-top: 48px; }
  #viewport .section { position: static; }
  #viewport .section.intro { font-size: 1.2em; padding: 0px; }
  #viewport .section#about.hiding, #viewport .section#services.hiding, #viewport .section#resume.hiding, #viewport .section#portfolio.hiding,#viewport .section#projects.hiding, #viewport .section#clients.hiding, #viewport .section#contact.hiding { display: none; }
  #viewport .section#about.expand .scrollbar-cover, #viewport .section#services.expand .scrollbar-cover, #viewport .section#resume.expand .scrollbar-cover, #viewport .section#portfolio.expand .scrollbar-cover, #viewport .section#projects.expand .scrollbar-cover, #viewport .section#clients.expand .scrollbar-cover, #viewport .section#contact.expand .scrollbar-cover { background: #303030; }
  #viewport .section#about.expand .back, #viewport .section#services.expand .back, #viewport .section#resume.expand .back, #viewport .section#portfolio.expand .back,#viewport .section#projects.expand .back, #viewport .section#clients.expand .back, #viewport .section#contact.expand .back { display: block; top: 64px; }
  #viewport .section#about.expand h1.title, #viewport .section#services.expand h1.title, #viewport .section#resume.expand h1.title, #viewport .section#portfolio.expand h1.title,#viewport .section#projects.expand h1.title, #viewport .section#clients.expand h1.title, #viewport .section#contact.expand h1.title { font-size: 1.5em; padding: 22px 24px 24px 44px; border: none; }
  #viewport .section#about.expand .full-content, #viewport .section#services.expand .full-content, #viewport .section#resume.expand .full-content, #viewport .section#portfolio.expand .full-content,#viewport .section#projects.expand .full-content, #viewport .section#clients.expand .full-content, #viewport .section#contact.expand .full-content { height: auto; overflow: auto; padding: 12px; }
  #viewport .section#about { top: auto; right: auto; bottom: auto; left: auto; }
  #viewport .section#services { top: auto; right: auto; bottom: auto; left: auto; }
  #viewport .section#resume { top: auto; right: auto; bottom: auto; left: auto; }
  #viewport .section#portfolio { top: auto; right: auto; bottom: auto; left: auto; }
    #viewport .section#projects { top: auto; right: auto; bottom: auto; left: auto; }
  #viewport .section#clients { top: auto; right: auto; bottom: auto; left: auto; }
  #viewport .section#contact { top: auto; right: auto; bottom: auto; left: auto; }
  #viewport .section .scrollbar-cover { display: none; }
  #viewport .section .back { display: none; }
  #viewport .section .title-and-icon { display: inline-block; display: block; border-bottom: 1px solid #138a43; }
  #viewport .section .title-and-icon:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  #viewport .section h1.title { position: static; padding: 12px; float: left; border-bottom: none; }
  #viewport .section .icon { position: static; padding: 12px; float: right; }
  #viewport .section .full-content { position: static; height: 0px; overflow: hidden; padding: 0; }
  #footer { position: static; padding: 0 24px; }
  #footer .credit { margin-top: 24px; float: none; line-height: 1.5; }
  #footer .social { margin-top: 12px; float: none; line-height: 1.5; }
  #footer .social li { margin: 0 12px 0 0; } }