/* CSS Document */
@font-face {
    font-family: 'oxygenbold';
    src: url('fonts/oxygen-bold-webfont.eot');
    src: url('fonts/oxygen-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oxygen-bold-webfont.woff') format('woff'),
         url('fonts/oxygen-bold-webfont.ttf') format('truetype'),
         url('fonts/oxygen-bold-webfont.svg#oxygenbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'oxygenlight';
    src: url('fonts/oxygen-light-webfont.eot');
    src: url('fonts/oxygen-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oxygen-light-webfont.woff') format('woff'),
         url('fonts/oxygen-light-webfont.ttf') format('truetype'),
         url('fonts/oxygen-light-webfont.svg#oxygenlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'oxygenregular';
    src: url('fonts/oxygen-regular-webfont.eot');
    src: url('fonts/oxygen-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/oxygen-regular-webfont.woff') format('woff'),
         url('fonts/oxygen-regular-webfont.ttf') format('truetype'),
         url('fonts/oxygen-regular-webfont.svg#oxygenregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body {margin:0px; font-family: 'oxygenregular'; font-size:14px; }
img {border:none;}
.clear {clear:both; height:1px; overflow:hidden;}

#container {margin: 0 auto; background-color: #fff; color: #fff; }

#header { width: 100%; top:0; padding-bottom:5px; position: fixed; background-color:inherit; }


#hero-area { background-image: url('../Images/Hero-Image.jpg'); }
#tag-area { background-image: url('../Images/Blue-Pattern-Background.jpg'); }
#company-area { background-image: url('../Images/Who-Image-Overlay.jpg');  }
#partner-area { background-image: url('../Images/Blue-Pattern-Background.jpg'); }
#products-area { background-image:url(/images/product-services.jpg); }
#employment-area {background-image:url('../images/Partners-Image-Overlay.jpg');}
.section-image { background-size:cover;  background-position:center center; background-attachment:fixed;}
.partner-logo { width:33%; display:inline-block; }

#top-part { max-width: 910px; margin: auto; width: 100%;  }
#header #logo { display:inline-block; }
#header .login { background-color: #263775; text-align: right; font-weight: 600; color: white; }
#header .login a { text-decoration: none; color:inherit; }
#top-links { float:right; margin-top:21px; }
#top-links h3.mobile {display:none;}
#top-links ul {margin:0px; padding:0px; list-style-type: none; }
#top-links ul li { text-transform:uppercase; font-size:16px; font-family: 'oxygenbold';display:table-cell; padding-right:3%; white-space:nowrap; }
#top-links ul li:last-child { padding-right:0px; }
#top-links ul li:last-child a{ color:#96d631; border: 2px solid #96d631;margin-right:0px; padding: 10px;}
#top-links ul li:last-child a:hover{ color: #96d631; }
#top-links ul li a {color:#3f3f3f; text-decoration:none;}
#top-links ul li a:hover {color:#012e9e;}

#hero-area .main { padding-top:30%; padding-bottom:10%; }
#hero-area .main .tools { font-size: 3.3em; text-align: center; }
#hero-area .main .green-button { text-align: center; margin-top: 40px; }

#bottom2 section{ max-width: 910px; margin: auto; width: 100%; }
#employment-area section,#tag-area section { max-width: 800px; margin: auto; width: 100%; padding-top:3%; padding-bottom:6%; text-align:center; } 
#partner-area section, #bottom1 section, #announcements-area section, #principle-area section,#company-area section, #products-area  section
{ max-width: 910px; margin: auto; width: 100%; padding-top:3%; padding-bottom:3%;}

#tag-area .main .blurb { margin-top: 2%; font-size:1.3em; }
#tag-area .main .demo { margin-top: 4%; font-weight: 700; font-size: 1.2em; }

#products-area h2 {margin:0 0 2% 0; font-size:1.7em; color:#505050; text-transform:uppercase; font-weight:normal; display:block;  font-weight:700;}
#products-area #product-left h3 {display:block; background:#96d631; font-size:20px; line-height:26px; padding:6px 0px 6px 10px;text-transform:uppercase; font-weight:normal; margin:0px 0px 5px 0px;}
#products-area #product-left ul {margin:0px 0px 55px 0px; padding:0px;}
#products-area #product-left ul li {display:block; border-bottom:1px solid #b2b1b1; padding:9px 10px; font-size:1.3em;}
#products-area #product-left ul li a {text-decoration:none; color:#808080; font-family: 'oxygenbold';}
#products-area #product-left ul li a:hover, #products-area #product-left ul li a.select {color:#96d631;}
#products-area #product-left p {margin:0px 0px 25px 0px; color:#808080;}
#products-area #product-right .content p {margin:5px 0px 12px 0px; color:#808080; font-size:1.3em;}

#company-area .content { font-size: 1.3em;}
#company-area h2 { font-size:1.7em; font-weight:normal; font-family: 'oxygenbold'; display:block; }

#principle-area h2 {margin:0px 0px 0px 0px; font-size:1.7em; color:#505050; text-transform:uppercase; display:block; font-weight:700; margin-bottom:2%;}
#principle-area .main .process { color: #9ca4ab; font-size:1.3em; margin-bottom: 3%; }
#principle-area .main .process-statement { color: #505050; font-size:.9em; font-weight:600; }

#employment-area .main .headline { font-size:1.7em; font-weight:700; }
#employment-area .main .blurb { margin-top: 4%; font-size:1.3em; }

#partner-area h2 { font-size:1.7em; font-weight:normal; font-family: 'oxygenbold'; display:block; }

#announcements-area h2 {margin:0px 0px 12px 0px; font-size:1.7em; line-height:80px; color:#012e9e; text-transform:uppercase; font-weight:normal; font-family: 'oxygenbold'; display:block;}
#announcements-area #announcements-left h3 {display:block; background:#96d631; font-size:20px; line-height:26px; padding:6px 0px 6px 10px; text-transform:uppercase; font-weight:normal; margin:0px 0px 5px 0px;}
#announcements-area #announcements-left ul {margin:0px 0px 55px 0px; padding:0px; font-size: 1.3em;}
#announcements-area #announcements-left ul li {display:block; border-bottom:1px solid #b2b1b1; padding:9px 10px; }
#announcements-area #announcements-left ul li a {text-decoration:none; color:#808080; font-family: 'oxygenbold';}
#announcements-area #announcements-left ul li a:hover, #announcements-area #announcements-left ul li a.select {color:#96d631;}
#announcements-area #announcements-right b { color:#000; }
#announcements-area #announcements-right h3 { color:#000; }
#csscotlynn { height: 515px; overflow: hidden; font-size:1.3em;}
#read-more { cursor:pointer; }

.green-button { padding: 20px 20px 20px 0px; margin-top:10px; }
.green-button:hover { cursor:pointer;    }
.green-button span { text-align: center; margin-top: 40px; background-color: #96d631; padding: 15px;font-size: 1.2em; color:#fff;  }
.green-button span:hover { background-color:#000; }
.green-button span a { text-decoration:none; color: #fff; } 

 
.popup {position:fixed; width:100%; height:100%; display:none; top:180px; left:0px; z-index:9999999;}
.popup .overlaybg {background:#000; position:fixed; width:100%; height:100%; left:0px; top:0px; opacity:0.9;}
.popup .login-page {background:#fff; width:280px; padding:20px; margin:0 auto; position:relative; z-index:999999999;}
.popup .login-page h2 {font-size:16px; font-family: 'oxygenbold'; text-transform:uppercase; color:#000; display:block; clear:both; margin:0px 0px 12px 0px; font-weight:normal;}
.popup .login-page h4 {font-size:12px; color:#000; display:block; clear:both; margin:0px 0px 12px 0px; font-weight:normal;}
.popup .login-page h4 a {color:#000; text-decoration:none;}
.popup .login-page h4 a:hover {text-decoration:underline;}
.popup .login-page form {display:block; margin:0px; padding:0px;}
.popup .login-page form label {display:block; font-size:12px; color:#545151; padding:0px 0px 3px 0px;}
.popup .login-page form input, .popup .login-page form textarea {margin:0px 0px 6px 0px; width:280px; border:1px solid #bbbaba;}
.popup .login-page form input.go {width:auto; text-align:left; background:#1a171b; border:none; text-transform:uppercase; color:#fff; font-size:13px; cursor:pointer; padding:3px 8px;}
.popup .login-page form input.go:hover {background:#990000;}

.popup .login-page .close {position:relative; float:right; text-align:right; clear:both; font-size:18px; text-transform:uppercase; color:#bbbaba; font-weight:normal;}
.popup .login-page .close a {color:#bbbaba; text-decoration:none;}
.popup .login-page .close a:hover {color:#000;}

.left-column { display:inline-block; width:285px; padding:0px 0px 0px 10px; margin-right: 20px; vertical-align: top; }
.right-column { display:inline-block; width:580px; color:#808080; }

#announcements-right div.active {display:block;}
.content-area {display:none;}

#bottom1 { width:100%; margin:0px 0px 20px 0px; }
#bottom1 h2 {margin:0px 0px 12px 0px; font-size:1.7em; line-height:80px; color:#012e9e; text-transform:uppercase; font-weight:normal; font-family: 'oxygenbold'; clear:both; display:block;}

#bottom1 #contactform { display:inline-block; width:449px;  margin:0px 150px 0px 30px;}
#bottom1 #contactform form {margin:0px; padding:0px; display:block;}
#bottom1 #contactform form input, #bottom1 #contactform form textarea {width:94%; padding:3%; background:#f1f0ef; border:none; text-transform:uppercase; color:#808080; font-size:14px;  margin:0 0 3% 0; font-family: 'oxygenregular';}
#bottom1 #contactform form textarea {height:150px; font-size:14px; font-family: 'oxygenregular'; }
#bottom1 #contactform form input.go {background:#96d631; color:#fff; font-size:15px; font-family: 'oxygenbold'; width:auto; float:right; padding:2% 5%; cursor:pointer;}
#bottom1 #contactform form input.go:hover {background:#000;}
.go {width:auto; text-align:left; background:#1a171b; border:none; text-transform:uppercase; color:#fff; font-size:13px; cursor:pointer; padding:3px 8px;}
.go:hover {background:#990000;}
#bottom1 #widget {width:270px; display:inline-block; margin:0px 00px 0px 0px; vertical-align: top; }
#bottom1 #widget h3 {color:#2e50a3; font-size:18px; font-family: 'oxygenbold'; margin:0px 0px 7px 0px; text-transform:uppercase; font-weight:normal;}
#bottom1 #widget p {margin:0px 0px 20px 0px; font-size:15px; color:#808080;}
#bottom1 #widget p img {margin:0px 10px 0px 0px;}

#bottom2 {clear:both; width:100%; background:#012e9e; padding:14px 0px; }
#bottom2 #bottom-link h4 {float:left; font-weight:normal; font-size:14px; font-weight:normal; color:#a4dffa; margin:0px;}
#bottom2 #bottom-link h5 {float:left; font-weight:normal; font-size:14px; font-weight:normal; color:#a4dffa; margin:0px 0px 0px 70px;}
#bottom2 #bottom-link h6 {float:right; font-weight:normal; font-size:12px; font-weight:normal; color:#fff; margin:3px 0px 0px 0px;}
#bottom2 #bottom-link h4 a, #bottom2 #bottom-link h5 a {color:#a4dffa; text-decoration:none;}
#bottom2 #bottom-link h4 a:hover, #bottom2 #bottom-link h5 a:hover {text-decoration:underline;}

#aboutcompany, #ourproducts, #contact, #announcementstitle { position:relative; top:-85px; display:block; }

iframe {
    display:block;
    margin: 0 auto;
    background-color:#000; 
    z-index:10;
    top:0; 
    left:0; 
    margin-top:10%
}

@media only screen and (max-width:980px)
{
.main {width:96%;}


#products-area #product-left {padding:0px;}
#products-area #product-right {margin:0px;}

#company-area #company-left {padding:0px;}
#company-area #company-right {margin:0px;}

#announcements-area #announcements-left {padding:0px;}
#announcements-area #announcements-right {margin:0px;}

}

@media only screen and (max-width:960px)
{
#bottom2 #bottom-link h6 {float:none; clear:both; padding:10px 0px 0px 0px;}
}

@media only screen and (max-width:925px)
{
#products-area #product-left, #company-area #company-left #announcements-area #announcements-left {width:250px;}
}

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

#welcome {float:left; width:400px; padding:40px 0px 0px 0px;}
#welcome img, #welcome iframe, #welcome object {width:400px; height:224px; margin:0px 0px 12px 0px;}
#products-area #product-left, #company-area #company-left #announcements-area #announcements-left{width:240px;}
}

@media only screen and (max-width:880px)
{
#products-area #product-left, #company-area #company-left #announcements-area #announcements-left{width:30%;}
#products-area #product-right, #company-area #company-right #announcements-area #announcements-right{width:68%;}

#products-area #product-right img, #products-area #product-right iframe, #products-area #product-right object {width:100%;}

#products-area #product-right .pro-box {float:left; margin:0 2% 5% 2%; width:43%; height:auto;}
}

@media only screen and (max-width:880px)
{
#bottom1 #contactform {width:370px;}
}

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

#welcome {float:none; clear:both; margin:0 auto; width:478px; padding:30px 0px 20px 0px;}
#welcome img, #welcome iframe, #welcome object {width:478px; height:268px; margin:0px 0px 12px 0px;}
#products-area #product-left h3, #company-area #company-left #announcements-area #announcements-left h3 {font-size:16px;}

#container {width:100%; }
#header {height:55px;}
#header #logo {display:none!important;}
#header #mobilelogo {display:block; clear:both; margin:0px 0px 20px 0px; text-align:center;}
#top-links {clear:both; float:none; margin:0px 0px 10px 0px; position:absolute; width:100%; z-index:99999999999999; background:url(/images/menu.png) right top no-repeat #f3f3f3;}
#top-links h3.mobile {margin:7px 0px; display:block; text-transform:uppercase; font-size:16px; padding:7px 15px; font-weight:normal; font-family: 'oxygenbold';}

#top-links:hover {height:220px; display:block;}
#top-links:hover ul {display:block!important; position:relative;}
#top-links ul li {text-align:left; padding:7px 15px;}

#top-links ul, #top-links ul.hide {display:none!important;}
#top-part { padding-left: 0px;    }
#hero-area { margin-top: 0px; }

#products-area h2, #company-area h2, #announcements-area h2, #bottom1 h2 {font-size:26px; line-height:normal;}

#top-links ul li {list-style-type:none; text-transform:uppercase; font-size:16px; font-family: 'oxygenbold';display:block;}
#hero-area .main { margin-left:0;}
#hero-area .main .tools { font-size: 2.3em; text-align: center; }
iframe { width:400px; }
}

@media only screen and (max-width:740px)
{
#bottom1 #contactform {width:330px;}



}

@media only screen and (max-width:690px)
{
#products-area #product-left, #company-area #company-left #announcements-area #announcements-left {width:100%; float:none; clear:both;}
#products-area #product-left ul, #company-area #company-left #announcements-area #announcements-left ul {border-left:1px solid #b2b1b1; display:block; height:39px; margin:0px 0px 12px 0px;}
#products-area #product-left ul li, #company-area #company-left #announcements-area #announcements-left ul li { float:left; border-right:1px solid #b2b1b1; border-top:none;}

#products-area #product-right, #company-area #company-right #announcements-area #announcements-right {width:100%;}
#products-area #product-right .pro-box {width:45%;}

#bottom1 #contactform, #bottom1 #widget  {margin:0px;}
}


@media only screen and (max-width:640px)
{
#container {width:100%; }



#products-area h2, #company-area #announcements-area h2, #bottom1 h2 {font-size:32px;}

#bottom1 #contactform {width:280px;}
#bottom2 #bottom-link h5 {float:none; clear:both; padding:10px 0px 0px 0px; margin:0px;}


}

@media only screen and (max-width:580px)
{
.main {width:90%;}

#bottom1 #contactform, #bottom1 #widget {clear:both; float:none; width:100%;}

}

@media only screen and (max-width:530px)
{
#welcome {float:none; clear:both; margin:0 auto; width:100%; padding:30px 0px 20px 0px;}
#welcome img, #welcome iframe, #welcome object {width:100%; height:238px; margin:0px 0px 12px 0px;}

}

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

#company-area #company-left #announcements-area #announcements-left ul li {font-size:13px; padding:9px 7px;}
}

@media only screen and (max-width:440px)
{
#tag-area, #company-area, #partner-area, #products-area, #employment-area, #principle-area, #announcements-area, #bottom1 { padding-left: 2%; padding-right: 2%;}
#announcements-area { display:none; }
.partner-logo { display: block; }
#container {width:100%; padding:90px 0px 0px 0px;}
#header {height:55px;}
#header #logo {display:none!important;}
#header #mobilelogo {display:block; clear:both; margin:0px 0px 20px 0px; text-align:center;}
#top-links {clear:both; float:none; margin:0px 0px 10px 0px; position:absolute; width:100%; z-index:99999999999999; background:url(/images/menu.png) right top no-repeat #f3f3f3;}
#top-links h3.mobile {margin:7px 0px; display:block; text-transform:uppercase; font-size:16px; padding:7px 15px; font-weight:normal; font-family: 'oxygenbold';}

#top-links:hover {height:220px; display:block;}
#top-links:hover ul {display:block!important; position:relative;}
#top-links ul li {text-align:left; padding:7px 15px;}

#top-links ul, #top-links ul.hide {display:none!important;}
#top-part { padding-left: 0px;    }
#hero-area { margin-top: 0px; }

#products-area h2, #company-area h2, #announcements-area h2, #bottom1 h2 {font-size:26px; line-height:normal;}
#top-links ul li {list-style-type:none; text-transform:uppercase; font-size:16px; font-family: 'oxygenbold';display:block;}
#hero-area .main { margin-left:0;}
#hero-area .main .tools { font-size: 2.3em; text-align: center; }
iframe { width:400px; }

}
@media only screen and (max-width:360px)
{
#company-area #company-left ul, #products-area #product-left ul, #announcements-area #announcements-left ul {height:24px;}
#company-area #company-left ul li, #products-area #product-left ul li, #announcements-area #announcements-left ul li {font-size:12px; border-bottom:none; padding:3px 4px;}
}

@media only screen and (max-width:320px)
{
#products-area h2, #company-area h2, #bottom1 h2, #announcements-area h2 {font-size:24px;}
}