/* ---------------------------------------------------------------------------------------------- */
/*  Lava Media 2013 - Screen CSS  					         									  */
/*  Ver          : 1.4                                   										  */
/*  Created      : 19 Sep 2013                            										  */
/*  Last Updated : 15 Oct 2013                            										  */
/*  Note    :                                            										  */
/*  - Reset CSS based on Eric Meyer's Reset CSS ver2.0 http://meyerweb.com/eric/tools/css/reset/  */
/*  - IE7 : IE7 specific styles exist in screen-ie7.css  										  */
/*  - IE8 : IE8 specific styles exist in screen-ie8.css  										  */
/*  - IE9 : IE9 specific styles exist in screen-ie9.css  										  */
/* ---------------------------------------------------------------------------------------------- */

/*------------------*/
/* Table of Content */
/*------------------*/

/*
1. Init CSS

2. Basic Elements
    2.1. General
    2.2. Heading
    2.3. Text
    2.4. Hyperlink			
    2.5. Table
    2.6. Form
    2.7. Class
    2.8. State
    2.9. Button & Icons

3. Lay-out

4. Header

5. Navigation
    5.1. Accessibility Navigation
    5.2. Main Navigation
    5.3. Sec Navigation

6. Content
    6.1. General
        6.1.1. Common
        6.1.2. CMS Copy
        6.1.3. Ordered List
        6.1.4. Standard Form
    6.2. Home Page
        6.2.1. Common
        6.2.2. Home Slider
        6.2.3. Promo Nav
    6.3. Content Page
        6.3.1. Common
        6.3.2. Work Page
        6.3.3. Services Page
        6.3.4. Contact Page
        6.3.5. Documents Page

7. Modules & Components
    7.1. Grouped Elements
    7.2. Social Nav
    7.3. Footer Links
    7.4. Dialog Box

8. Media Queries
    8.1. Tablet - Landscape
        8.1.1. Basic Elements & Layout
        8.1.2. Header & Navigation
        8.1.3. Home Page
        8.1.4. Work Page
        8.1.5. Services Page
        8.1.6. Contact Page
        8.1.7. Blog
        8.1.8. Footer
    8.2. Tablet - Portrait
        8.2.1. Basic Elements & Layout
        8.2.2. Header & Navigation
        8.2.3. Home Page
        8.2.4. Work Page
        8.2.5. Services Page
        8.2.6. Contact Page
        8.2.7. Blog
        8.2.8. Footer
    8.3. Mobile Phone - Landscape
        8.3.1. Basic Elements & Layout
        8.3.2. Header & Navigation
        8.3.3. Home Page
        8.3.4. Work Page
        8.3.5. Services Page
        8.3.6. Contact Page
        8.3.7. Blog
        8.3.8. Footer
    8.4. Mobile Phone - Portrait
        8.4.1. Basic Elements & Layout
        8.4.2. Header & Navigation
        8.4.3. Home Page
        8.4.4. Work Page
        8.4.5. Services Page		
        8.4.6. Contact Page
        8.4.7. Blog
        8.4.8. Footer
    8.5. Additional Media Queries

9. Plug-in Related CSS
*/


/*-------------*/
/* 1. Init CSS */
/*-------------*/

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 9, 2012 */

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

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 10, 2012 */

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

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}table,tbody,tfoot,thead,tr,th,td{font-size:100%;font:inherit;vertical-align:baseline;border-collapse:collapse;border-spacing:0;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:100%;}ol,ul{list-style:none;}q{quotes:none;}q:before,q:after{content:none;}

/*-------------------*/
/* 2. Basic Elements */
/*-------------------*/

/* 2.1. General */

body {
margin: 0;
padding: 0;
background-color: #000;
color: #ebe8e4;
font: 62.5% DroidSansRegular, Arial, Helvetica, Verdana, sans-serif;
}

/* 2.2. Heading */

h1, h2, h3, h4 {
margin: 0 0 15px 0;
font-weight: normal;
line-height: 1.2;
}

h1 {font-size: 4.4em;}
h2 {font-size: 2.8em;}
h3 {font-size: 2.1em;}
h4 {font-size: 1.5em;}

/* 2.3. Text */

p {
font-size: 1.5em;
margin: 0 0 15px 0;
line-height: 1.5;
}

address {
font-size: 1.5em;
font-style: normal;
line-height: 1.5;
margin: 0 0 15px;
}

/* 2.4. Hyperlink */

a {
color: #EBE8E4;
font-size: 1.5em;
text-decoration: none;
cursor: pointer;
outline: none;
}

a:hover {text-decoration: underline;}

p a {font-size: 1em;}

/* 2.5. Table */

table {margin: 0 0 15px 0;}

td, th  {
font-size: 1.1em;
padding: 5px;
}

/* 2.6. Form */

label {
display: block;
margin: 0 0 5px 0;
font-size: 1.5em;
line-height: 1.4;
}

.std-form label {width: 380px;}

.std-form-el-appr /* IE7 */{
display: block;
margin: 0 0 15px;
padding: 10px;
border: 1px solid #c0c0c0;
background: #f3f3f3;
font: 1.5em DroidSansRegular, Arial, Helvetica, sans-serif;
-webkit-box-shadow: inset 0 0 1px 1px rgba(0, 0, 1, 0.1);
-moz-box-shadow: inset 0 0 1px 1px rgba(0, 0, 1, 0.1);
box-shadow: inset 0 0 1px 1px rgba(0, 0, 1, 0.1);
}

input.text, input[type="text"] {width: 380px;}

input[type="text"]:focus, textarea:focus {
background: #FFF;
-moz-transition: background-color 0.5s ease 0s;
-webkit-transition: background-color 0.5s ease 0s;
-o-transition: background-color 0.5s ease 0s;
transition: background-color 0.s ease 0s;
}

input.submit, input[type="submit"] {cursor: pointer;}

input.radio, input[type="radio"], input.checkbox, input[type="checkbox"] {
display: inline;
margin: 0 7px 0 0;
background: transparent;
}

textarea {
width: 380px;
height: 150px;
resize: none;
}

select {width: 400px;}

.opt-item-container {margin: 0 0 15px;}

.opt-item-container label {
display: inline-block;
width: auto;
position: relative;
top: -1px;
}

.inline-opt-container .opt-item-container {
float: left;
margin-right: 20px;
}

.field-validation-error {
display: block;
margin: 0 0 3px;
padding: 0 0 0 5px;
font-size: 1.2em;
color: red;
}

/* 2.7. Classes */

.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}

.c-spr {background: transparent url(img/common-sprite.png) no-repeat 0 0; }

.img-rep {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

.small-print {font-size: 0.8em;}

.divider {
font-size: 13px;
margin: 0 5px;
position: relative;
}

/* 2.8. State */

.s-block {display: block !important;}

/* 2.9. Button & Icons */

button {
margin: 0;
padding: 0;
border: 0;
cursor: pointer;
}

.btn /* IE7 & IE8 */ {
display: block;
padding: 0 20px;
height: 42px;
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 1, 0.1);
-moz-box-shadow: 0 0 2px 2px rgba(0, 0, 1, 0.1);
box-shadow: 0 0 2px 2px rgba(0, 0, 1, 0.1);
background-color: #000;
color: #FFF;
line-height: 42px;
font-family: DroidSansBold, Arial, Helvetica, Sans-serif;
text-transform: uppercase;
}

.btn:hover /* IE7 & IE8 */ {
background-color: #bb1e2d;
color: #FFF;
text-decoration: none;
}

.btn-iconed {
padding-left: 48px;
width: 146px; /* 136 */
background: #000 url(img/common-sprite.png) no-repeat 0 0;
}

.btn-iconed-solid-right-arrow {background-position: -29px -160px;}
.btn-iconed-tools {background-position: -29px -205px;}
.btn-iconed-fb {background-position: -29px -250px;}
.btn-iconed-twitter {background-position: -29px -340px;}
.btn-iconed-linkedin {background-position: -29px -385px;}
.btn-iconed-pointer {background-position: -29px -295px;}

.btn-icon-only {
padding: 0;
width: 42px;
height: 42px;
}

.arrow-left {background-position: 0 -1464px;}
.arrow-left:hover {background-position: 0 -1508px;}
.arrow-right {background-position: 0 -1552px;}
.arrow-right:hover {background-position: 0 -1596px;}

.google-map-btn {
display: block;
padding-left: 60px;
width: 162px;
height: 44px;
line-height: 44px;
background-position: -24px -584px;
}

.google-map-btn:hover {
color: #EBE8E4;
text-decoration: underline;
}

.main-nav .main-nav-tgl-btn {
padding: 0 27px;
width: 50px;
height: 33px;
line-height: 33px;
font-size: 18px;
background-image: none;
background-color: #000;
}

.main-nav .main-nav-tgl-btn:hover {
background-color: #bb1e2d;
color: #FFF;
}

.main-nav-tgl-btn-open {
background-position: 0 -1410px;
padding-bottom: 17px;
margin-bottom: 0 !important;
-webkit-box-shadow: 0 -0px 2px 4px rgba(0, 0, 1, 0.1);
-moz-box-shadow: 0 -0px 2px 4px rgba(0, 0, 1, 0.1);
box-shadow: 0 -0px 2px 4px rgba(0, 0, 1, 0.1);
}

.main-nav-tgl-btn-open:hover {color: #000 !important;}

.ico-play {
width: 91px;
height: 91px;
background-position: 0 -631px;
}

/*------------*/
/* 3. Lay-out */
/*------------*/

.overlay {
display: none;
width: 100%;
height: 100%;
background: transparent url(img/bg-black-opa-60.png);			
position: fixed;
top: 0;
left: 0;			
z-index: 10002;
}

.video-loading-overlay {
width: 100%;
height: 100%;
background: #000 url(video/bg-lava-media.jpg) no-repeat fixed top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
left: 0;
z-index: 0;

}

.video-background {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
position: fixed;
top: 0;
left: 0;
z-index: 0;
}

.video-background video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 50%;
}

.ui-video-background  {display: none;}

.grand-wrapper /* Important to remove space on the top of page in Opera Browser */ {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
background: transparent url(img/bg-patern.png);
position: absolute;
top: 0;
overflow: hidden;
}

.wrapper {
width: 1000px;
margin: 0 auto;
position: relative;
}

#footer .wrapper {
padding-bottom: 35px;
border-top: 1px solid #FFF;
}

#footer a {color: #ebe8e4;}

.footer-logo {
float: left;
padding-top: 25px;
margin: 0 0 15px;
width: 160px;
height: 33px;
}

.copy {
display: block;
margin-top: 5px;
font-size: 12px;
}

.site-by {
padding: 37px 0 0 25px;
float: right;
}

.site-by p {
float: left;
margin-right: 5px;
}

.efinity {
float: left;
width: 68px;
height: 36px;
background: transparent url(../Content/img/logo-efinity.png) no-repeat 0 0;
}

/*-----------*/
/* 4. Header */
/*-----------*/

#header {
width: 100%;
height: 110px;
background: transparent url(img/bg-header-2.gif);
/* 
background: transparent url(img/bg-header.png) no-repeat top center;
background: #FD2C0D url(img/bg-patern.png); 
*/
}

.js #header {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
}

#header .wrapper {
border-bottom: 1px solid #FFF;
height: 110px;
}

a.logo {
float: left;
margin: 15px 0 0 0;
width: 215px;
height: 72px;
}

.svg-logo  {
 width: 100%;
}

/*---------------*/
/* 5. Navigation */
/*---------------*/

/* 5.1. Accessibility Navigation */

.nav-access {
position: absolute;
top: -9999px;
left: -9999px;
}

/* 5.2. Main Navigation */

.main-nav {
float: right;
margin: 60px 0 0 0;
}

.main-nav a.main-nav-tgl-btn  {display: none;}

.main-nav li  {
float: left;
margin: 0 0 0 30px;
}

.main-nav a {
font: 1.8em/100% DroidSansBold, Arial, Helvetica, Sans-serif;
text-transform: uppercase;
color: #ebe8e4;
}

.main-nav a:hover, .main-nav .selected a {
color: #bb1e2d;
text-decoration: none;
}

/* 5.3. Sec Navigation */

.sec-nav {
position: absolute;
top: 45px;
right: 5px;
}

.sec-nav li {
float: left;
margin-left: 30px;
}

.sec-nav li:first-child {margin-left: 0;}

.sec-nav a:hover, .sec-nav .selected a {
border-bottom: 2px solid #FFF;
text-decoration: none;
}

/*------------*/
/* 6. Content */
/*------------*/

/* 6.1. General */
    
    /* 6.1.1. Common */
	
    .js #content {
    padding-top: 110px;
    position: relative;
    z-index: 9999;
    }

    #content .top-wrapper {padding: 25px 0 0 0;}
    
    .framed-area {
    -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 1, 0.1);
    -moz-box-shadow: 0 0 3px 3px rgba(0, 0, 1, 0.1);
    box-shadow: 0 0 3px 3px rgba(0, 0, 1, 0.1);
    /* border: 1px solid #ebe8e4; */
    background: #000;        
    }
    
    .l-std-form-pg-main {
    float: left;
    padding: 0 0 25px;
    width: 500px;	
    }
    
    .l-std-form-pg-aside {
    float: right;
    padding: 0 0 25px;
    width: 450px;
    }
    
    /* 6.1.2. CMS Copy */
    
    .cms-copy a, 
    .cms-copy ul li ul li, .cms-copy ol li ol li, .cms-copy ul li ol li, .cms-copy ol li ul li,
    .cms-copy li a, .cms-copy li p a,
    .cms-copy table p, .cms-copy table li, .cms-copy table li p {font-size: 1em;}

    .cms-copy ul {
    list-style: disc outside none;
    margin: 0 0 15px 20px;
    }

    .cms-copy ul li ul, .cms-copy ol li ul {
    margin-top: 10px;
    list-style: disc outside none;
    }

    .cms-copy ol {
    list-style: decimal outside none;
    margin: 0 0 15px 24px;
    }

    .cms-copy ul li ol, .cms-copy ol li ol {
    margin-top: 10px;
    list-style: decimal outside none;
    }

    .cms-copy li {
    margin: 0 0 5px 0;
    font-size: 1.5em;
    line-height: 1.5;
    }

    .cms-copy li p {
    font-size: 1em;
    margin: 0;
    }	

    .cms-copy table, .cms-copy td, .cms-copy th {border-color: #000;}

    .cms-copy td, .cms-copy th {
    font-size: 1.5em;
    padding: 5px;
    }
    
    /* 6.1.3. Ordered List */
    
    .o-list {padding: 0 0 30px;}
    
    .o-list li {	
    padding: 4px 0 0 0;
    margin: 0 0 16px 0;
    min-height: 31px;
    font-size: 2em;
    color: #ebe8e4;    
    }
    
    .o-list a {
    float: left;
    font-size: 1em;
    line-height: 31px;
    }
    
    .o-list a:hover {text-decoration: none;}
    
    .o-list--num-cont {
    float: left;
    margin-right: 22px;
    width: 31px;
    height: 31px;
    background-color: #000;
    font: bold 20px/31px DroidSansBold, Arial, Helvetica, Sans-serif;
    text-align: center;    
    }
    
    .o-list--num {
    position: relative;
    left: 2px;
    }
    
    /* 6.1.4. Standard Form */
    
    .form-section {padding: 0 0 20px;}
    
/* 6.2. Home Page */
    
    /* 6.2.1. Common */
    
    .home .pg-title {
    margin: 0 0 45px;
    font-size: 3em;    
    text-align: center;
    }
    
    .js .home .pg-title {
    position: relative;
    top: -300px;
    }
    
    /* 6.2.2. Home Slider */
    
    .feat-slider {	
    width: 100%;
    position: relative;
    }
    
    .feat-slider li {
    float: left;
    width: 7000px;
    margin: 0 0 30px;	
    }
    
    .js .feat-slider li {margin-bottom: 0;}	
    .feat-slider-item {width: 1000px;}
    
    .feat-slider-img {
    float: left;	
    width: 660px;
    height: 400px;
    text-align: center;
    }
    
    .feat-slider-img img {
    display: block;
    width: 100%;
    height: 100%;
    }

    .feat-slider-title {
    font-family: DroidSansBold, Arial, Helvetica, Sans-serif;
    text-transform: uppercase;
    }
    
    .feat-slider-info {
    float: right;
    margin: 10px 60px 0 0;
    width: 260px;
    height: 390px;
    position: relative;
    }
    
    .feat-slider-info .cms-copy {
    height: 200px;
    overflow: hidden;
    }
	
	.feat-slider-info .no-button {height: 390px;}
    
	.feat-slider-cta {
    position: absolute;
    bottom: 15px;
    left: 0;
    }
    
    .feat-slider-cta .btn:first-child {margin-bottom: 10px;}    
    .hm-slider {height: auto;}
    
    .hm-slider .slider-alt-nav-cont {
    width: 100%;
    min-width: 1000px;
    }
    
    .hm-slider .slider-btn {	
    position: absolute;
    top: -266px;
    width: 32px;
    height: 69px;    
    }
    
    .hm-slider .slider-btn-left {	
    left: 15px;
    background-position: 0 0;
    }
    
    .hm-slider .slider-btn-left:hover {background-position: -35px 0;}
    
    .hm-slider .slider-btn-right {	
    right: 15px;
    background-position: 0 -72px;
    }
    
    .hm-slider .slider-btn-right:hover {background-position: -35px -72px;}
    
    .hm-slider-nav {margin: 0 0 25px;}
    
    .hm-slider-nav a {
    float: left;
    margin: 0 5px 0 0;
    width: 13px;
    height: 13px;
    background-position: -16px -144px;
    }
    
    .hm-slider-nav a:hover, .hm-slider-nav a.selected {background-position: 0 -144px;}
    
    .js .hm-slider {height: 465px;} /* to avoid container shifting on entrance animation */
    
    .js .hm-slider ul {
    margin: 0 0 25px;
    width: 100000px;
    height: 400px;
    left: 10000px;
    position: relative;
    }

    .js .hm-slider  li {
    display: none;
    height: 400px;
    }
    
    .js .hm-slider  li:first-child {display: block;}
    
    .feat-slider-video {position: relative;}
    
    .feat-slider-video .ico-play {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -45px;
    margin-top: -45px;
    z-index: 1;
    }
    
    
    /* 6.2.3. Promo nav */	
    
    .promo-nav {	
    padding: 45px 0;
    border-top: 1px solid #FFF;    
    }
    
    .promo-nav li.first {margin-left: 0;}
    
    .promo-nav-item {
    float: left;
    margin: 0 0 0 50px;
    width: 300px;
    height: 270px;
    position: relative;
    }
    
    .promo-nav-item h2 {
    font-family: DroidSansBold, Arial, Helvetica, Sans-serif;
    text-transform: uppercase;
    }
    
    .promo-nav-item .btn {
    position: absolute;
    bottom: 0;
    left: 0;
    }
    
    .promo-contact {position: relative;}	
    .promo-contact a {color: #ebe8e4;}    
    
    .promo-contact p {
    margin: 0 0 5px;
    font-size: 2em;
    }		
    
/* 6.3. Content Page */
    
    /* 6.3.1. Common */
    
    .l-pg-top-area {padding: 0 0 45px 0;}
    .l-intro {float: left;}	
    .l-intro p {font-size: 1.4em;}	
    .l-in-pg-links {float: right;}
    
    .inline-links li {	
    float: left;
    margin: 0 0 0 15px;
    }

    .inline-links a {font-size: 1.4em;}	
    .inline-links .selected a {color: #bb1e2d;}
    
    .disp-list {
    padding: 0 0 35px;
    position: relative;
    }
    
    .disp-list-item {
    float: left;
    margin: 0 10px; /* 0 6px */
    padding: 0 0 5px;
    width: 313px; /* 320px */
    cursor: pointer;	
    }
    
    .disp-list-thumb {
    display: block;
    margin: 0 0 7px;
    width: 303px;
    height: 166px;
    -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 1, 0.1);
    -moz-box-shadow: 0 0 3px 3px rgba(0, 0, 1, 0.1);
    box-shadow: 0 0 3px 3px rgba(0, 0, 1, 0.1);
    border: 5px solid #000;
    background: #FFF;
    position: relative;
    overflow: hidden;
    }
    
    .disp-list-thumb img {
    display: block;
    width: 303px;	
    }
    
    .disp-list-overlay  /* IE7 & IE8 */ {	
    width: 310px;
    height: 170px;
    background: transparent url(img/bg-black-opa-60.png);
    position: absolute;
    top: 0;
    left: 0;
	opacity:0;
	-moz-transition: opacity 0.15s ease-out 0s;
	-webkit-transition: opacity 0.15s ease-out 0s;	
    }
    
    .disp-list-icon {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 0;
    left: 0;
    }
        
    .disp-list-icon-video {background-position: 0 -508px;}
    .disp-list-icon-photography {background-position: 0 -430px;}
	
    .disp-list-hd {
    font-size: 1.6em;
    margin: 0 0 3px;
    }
    
    .disp-list-hd a {
    font-size: 1em;
    color: #ebe8e4;
    }
    
    .disp-list-intro {
    height: 42px;
    font-size: 1.4em;	
    overflow: hidden;
    }
    
    .disp-list-item:hover .disp-list-thumb {border-color: #bb1e2d;}
    .disp-list-item:hover .disp-list-icon-video {background-position: 0 -547px;}
    .disp-list-item:hover .disp-list-icon-photography {background-position: 0 -469px;}
	
    .disp-list-item:hover .disp-list-overlay  /* IE7 & IE8 */{	
	opacity:.9;
	-moz-transition: opacity 0.15s ease-out 0s;
	-webkit-transition: opacity 0.15s ease-out 0s;
	}
    
    /* 6.3.2. Work Page */
    
    .work-content {
    margin: 0 0 50px;
    padding: 65px 75px;
    width: 850px;
    }
    
    .work-content-main {
    float: left;
    padding: 0 0 25px;
    width: 585px;
    }		
    
    .work-content-aside {
    float: right;
    padding: 0 0 25px;
    width: 230px;	
    }
    
    .work-content-img img {
    display: block;
    margin: 0 0 15px;
    }

    .work-content-img .video {margin-bottom: 15px;}

    .work-filter {display: none;} /* temp */
    
    .work-nxt-prv-nav {
    position: relative;
    top: -9px;	
    }
    
    .work-nxt-prv-nav li {margin-left: 10px;}
    
    .l-pg-bot-area .work-nxt-prv-nav {
    top: 0;
    margin: 0 0 25px;
    }
    
    /* 6.3.3. Services Page */
    
    .service-list-item {	padding-bottom: 45px;}	
    
    .service-overview-hd {
    padding: 0 0 0 133px;
    font-size: 3em;
    }
    
    .service-overview-img {
    float: left;
    margin: 0 65px 0 10px;	
    width: 60px;
    height: 60px;
    position: relative;
    top:-30px;
    }
    
    .service-overview-main {
    float: left;
    margin: 0 35px 0 0;
    width: 525px;
    }
    
    .service-overview-aside {
    float: left;
    width: 305px;
    }
    
    .service-overview-main  p {font-size: 1.4em;}
    .service-overview-aside li  {font-size: 1.4em;}
    
    .service-in-pg-links {display: none;} /* temp */
    
    /* 6.3.4. Contact Page */
    
    .block-link {
    display: block;
    margin: 0 0 15px;
    }
    
    .contact-pg-add-hd {
    font-size: 1.6em;
    line-height: 100%;
    margin: 0 0 3px;
    }
    
    /* 6.3.5. Documents Page */
    
    .doclink {
    padding: 8px 0 8px 40px;
    display: block;
    background: url(img/doc.gif) left no-repeat;
    }
    
/* ----------------------- */
/* 7. Modules & Components */
/* ----------------------- */

/* 7.1. Grouped Elements */

.grouped-els {padding-bottom: 15px;}
.grouped-els-single-line {padding-bottom: 0;}
.grouped-els-in-table {padding: 3px 0;}

.grouped-els--el {
float: left;
margin-left: 15px;
}

.grouped-els-narrow .grouped-els--el {margin-left: 5px;}
.grouped-els--el:first-child {margin-left: 0;}

/* 7.2. Social Nav */

.social-nav-header {
position: absolute;
top: 12px;
right: 0;
}

.social-nav-footer {display: none;}

.social-nav .btn-icon-only {
width: 31px;
height: 31px;
}

.social-nav .btn-iconed-fb {background-position: -33px -255px;}
.social-nav .btn-iconed-twitter {background-position: -32px -345px;}
.social-nav .btn-iconed-linkedin {background-position: -32px -390px;}

/* 7.3. Footer Links */

.footer-links {
float: right;
padding-top: 39px;
width: 698px;
font-size: 1.4em;
text-align: center;
}

.footer-links a {font-size: 1em;}
.footer-links .divider {
top: -1px;
margin: 0 20px;
}

/* 7.4. Dialog Box */

.simple-dialog-box {
display: none;
padding: 10px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE6+ */	
}

.simple-d-box-close-btn {
display: block;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
color: #FFFFFF;
position: absolute;
top: -20px;
right: 5px;
z-index: 1;
}

.video-dialog-box {
width: 560px;
height: 315px;
}

.video-dialog-box .video-file {
width: 100%;
height: 100%;
}

/*------------------*/
/* 8. Media Queries */
/*------------------*/

    /* 8.1. Tablet - Landscape */

    @media screen and (max-width: 978px) {
        
        /* 8.1.1. Basic Elements & Layout */
        
        h1 {font-size: 3.6em;}
        .wrapper {width: 810px;}
        .l-std-form-pg-main {width: 410px;}		
        .l-std-form-pg-aside {width: 305px;}
        
        /* 8.1.2. Header & Navigation */
        
        .main-nav a.main-nav-tgl-btn  {display: none;}
        
        /* 8.1.3. Home Page */
        
        .feat-slider-item {width: 810px;}
        
        .feat-slider-img {
        float: none;
        margin: 0 auto 15px;
        }
        
        .feat-slider-info {
        float: none;
        margin: 0;
        width: 810px;
        height: auto;		
        }
        
        .feat-slider-info .cms-copy {
        width: 100%;
        height: auto;
        overflow: visible;
        }
        
		.feat-slider-info .no-button {height: auto;}
		
		.feat-slider-cta  {position: static;}
        
        .feat-slider-cta a {
        float: left;
        margin: 0 25px 0 0;
        }
        
        .hm-slider .slider-alt-nav-cont {min-width: 810px;}
        .hm-slider .slider-btn  {top: -470px;}

        .promo-nav-item  {
        width: 250px;
        margin: 0 0 0 30px;
        }
        
        .hm-slider {height: auto;}
        .js .hm-slider {height: 680px;}
        .js .hm-slider ul {height: 615px;}
        
        /* 8.1.4. Work Page */
        
        .disp-list-item {
        margin: 0 42px;
        padding: 0 0 5px;
        width: 320px;
        }					
        
        .disp-list-thumb {		
        margin: 0 0 7px;		
        width: 310px;
        height: 170px;
        }

        .disp-list-thumb img {width: 310px;}
        
        .work-content {
        padding: 40px 50px;
        width: 680px;
        }
        
        .work-content-main {width: 415px;}
        .work-content-img {width: 680px;}
        .work-content-img img {max-width: 100%;}
        
        /* 8.1.5. Services Page */
        
        .service-overview-hd {padding: 0 0 0 94px;}
        .service-overview-img {margin: 0 35px 0 0;}
        
        .service-overview-main {
        width: 420px;
        margin: 0 35px 0 0;
        }
        
        .service-overview-aside {width: 200px;}
        
        /* 8.1.6. Contact Page */				
        
        /* 8.1.7. Blog */
        
        /* 8.1.8. Footer */
        .footer-links {width: 480px;}                
    }
        
    /* 8.2. Tablet - Portrait */

    @media screen and (max-width: 768px) {
        
        /* 8.2.1. Basic Elements & Layout */
        
		body {
        background: #000 url(video/bg-lava-media.jpg) no-repeat fixed top center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        }        
        
        h1 {font-size: 3.1em;}
        .wrapper {width: 700px;}
        .l-std-form-pg-main {width: 410px;}		
        .l-std-form-pg-aside {width: 200px;}
		.video-loading-overlay {display: none !important;}
        
        /* 8.2.2. Header & Navigation */
        
        a.logo {margin-top: 30px;}
        .logo img {width: 151px;}		
        .main-nav a.main-nav-tgl-btn  {display: none;}
        
        /* 8.2.3. Home Page */
        
        .feat-slider-item {width: 700px;}
        
        .feat-slider-img {
        float: none;
        margin: 0 auto 15px;
        }
        
        .feat-slider-info {
        float: none;
        margin: 0;
        width: 700px;
        height: auto;		
        }                
        
        .feat-slider-cta  {position: static;}
        
        .feat-slider-cta a {
        float: left;
        margin: 0 25px 0 0;
        }
        
        .hm-slider .slider-alt-nav-cont {min-width: 700px;}
        
        .promo-nav-item  {
        width: 213px;
        margin: 0 0 0 30px;
        }
        
        /* 8.2.4. Work Page */
        
        .disp-list-item {margin: 0 15px;	}		
        .work-content {width: 570px;}				
        
        .work-content-main, .work-content-aside {
        float:none;
        width: 570px;
        }

        .work-content-img {width: 570px;}		
        
        .work-nxt-prv-nav {
        position: relative;
        top: 0;
        }				
        
        .l-pg-bot-area .work-nxt-prv-nav {padding: 0 0 45px;}
        
        /* 8.2.5. Services Page */
        
        .l-intro, .l-in-pg-links {float: none;}		
        .inline-links li {margin: 0 15px 0 0;}
        
        .service-overview-hd {padding: 0 0 0 83px;}
        .service-overview-img {margin: 0 25px 0 0;}
        
        .service-overview-main {
        width: 346px;
        margin: 0 25px 0 0;
        }
        
        .service-overview-aside {width: 200px;}
        
        /* 8.2.8. Footer */
        
        .footer-logo {width: 143px;}        
        .footer-links {width: 400px;}                        
        .footer-links .divider {margin: 0 10px;}
    }

    /* 8.3. Mobile Phone - Landscape */

    @media screen and (max-width: 595px) {
        
        /* 8.3.1. Basic Elements & Layout */
        
        h1 {font-size: 2.5em;}
        h2 {font-size: 2.3em;}				
        .wrapper {width: 420px;}        
        #content {padding-top: 0;}        
        #content .top-wrapper {padding: 20px 0 0 0;}		
        .pg-title {margin: 0 0 25px;}
        
        .l-in-pg-links {display: none;}
        
        .l-std-form-pg-main, .l-std-form-pg-aside {
        float: none;
        width: 420px;
        }
        
        .video-dialog-box {
        width: 420px;
        height: 236px;
        }
        
        /* 8.3.2. Header & Navigation */

        #header, .js #header {
        height: auto;
        background: none;
        position: relative;
        }
        
        #header .wrapper {height: auto;}
        a.logo {margin: 20px 0 5px;}        
        
        .main-nav {
        margin: 0;
        width: 420px;
        position: relative;
        }
        
        .main-nav a.main-nav-tgl-btn {
        display: block;
        position: absolute;
        top: -50px;
        right: 0;
        }
        
        .main-nav-top {
        display: block;
        width: 420px;
        margin: 0 0 20px;
        padding: 10px 0;
        background: #000;
        -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 1, 0.1);
        -moz-box-shadow: 0 0 3px 3px rgba(0, 0, 1, 0.1);
        box-shadow: 0 0 3px 3px rgba(0, 0, 1, 0.1);
        position: relative;
        z-index: 10;
        }
        
        .js .main-nav-top {display: none;}

        .main-nav-top li {
        float: none;
        margin: 0 10px;
        }		
        
        .main-nav-top a {
        display: block;
        padding: 10px;
        font-size: 1.5em;        
        }
        
        .main-nav-top li:first-child a {border-top: 0;}
        
        .js #content {padding-top: 0;}
        
        .sec-nav {
        display: block;
        width: 100%;
        position: static;
        padding: 0 0 25px 0;
        }
        
        .sec-nav li {
        display: block;        
        width: 50%;
        margin: 0;
        }
        
        .sec-nav a {
        display: block;
        padding: 10px 5px;        
        background-color: #000;
        text-align: center;
        }
        
        .sec-nav a:hover, .sec-nav .selected a {
        border-bottom: 0;
        background-color: #bb1e2d; 
        }
        
        /* 8.3.3. Home Page */
        
        .home .pg-title {font-size: 2.5em;}        
        .feat-slider li {margin-bottom: 20px;}
        .feat-slider-item {width: 420px;}
        
        .feat-slider-img {
        float: none;
        width: 420px;
        height: auto;
        margin: 0 auto 15px;
        }
        
        .feat-slider-img img {        
        width: 420px;
        height: auto;
        }
        
        .feat-slider-img-framed {        
        width: 420px;		
        height: auto;
        min-height: 234px;
        overflow: hidden;
        }
        
        .feat-slider-img-framed img {width: 420px;}
        
        .feat-slider-info {
        float: none;
        margin: 0;
        width: 420px;
        height: auto;		
        }                
        
        .feat-slider-cta  {position: static;}
        
        .feat-slider-cta a {
        float: left;
        margin: 0 10px 15px 0;
        padding-right: 10px;
        width: 120px;
        }
        
        .hm-slider .slider-alt-nav-cont {min-width: 420px;}		
        .hm-slider .slider-btn {top: -410px;}
        .hm-slider .slider-btn-left {left: 5px;}
        .hm-slider .slider-btn-right {right: 5px;}
        .hm-slider .slider-btn img {width: 45px;}
        .js .hm-slider {height: 560px;} /* to avoid container shifting on entrance animation */	
        .js .hm-slider ul {height: 495px;}        
        .promo-nav {padding: 30px 0 0 0;}
        
        .promo-nav-item  {
        float: none;
        margin: 0 0 30px;
        width: 420px;
        height: auto;
        }
        
        .promo-nav-item .btn {position: static;}		
        .promo-contact {margin: 0 0 20px;}
        
        /* 8.3.4. Work Page */
        
        .l-intro, .l-in-pg-links {float: none;}
        
        .inline-links li {	
        float: left;
        margin: 0 15px 10px 0;
        }
        
        .disp-list-item {margin: 0 50px;}
        
        .work-content {
        margin-bottom: 25px;
        padding: 30px 40px;
        width: 310px;
        }				
        
        .work-content-main, .work-content-aside {
        float:none;
        width: 310px;
        }

        .work-content-img {width: 310px;}		
        .work-nxt-prv-nav {display: block;}
        
        /* 8.3.5. Services Page */
        
        .l-pg-top-area {padding: 0 0 25px;}		
        .l-intro, .l-in-pg-links {float: none;}		
        .inline-links li {margin: 0 15px 0 0;}
        .service-list-item {padding-bottom: 35px;}
        
        .service-overview-hd {
        padding: 0;
        font-size: 2.3em;
        }
        
        .service-overview-img {
        top: 0;
        margin: 0 15px 10px 0;
        width: 90px;
        }
        
        .service-overview-img img {max-width: 100%;}
        
        .service-overview-main {
        float: none;
        width: 420px;
        min-height: 93px;
        margin: 0 0 25px 0;
        }
        
        .service-overview-aside {
        float: none;
        width: 420px;
        }
        
        /* 8.3.8. Footer */
        
        .footer-contact {
        width: 420px;
        margin: 0 0 35px;
        }
        
        .footer-logo {width: 143px;}
        .footer-links {display: none;}
    }

    /* 8.4. Mobile Phone - Portrait */

    @media screen and (max-width: 479px) {
        
        /* 8.4.1. Basic Elements & Layout */
        
        h1 {font-size: 2.3em;}
        h2 {font-size: 2.1em;}                
        
        .wrapper, .std-form label {width: 300px;}				
        .opt-item-container label {width: auto;}
        
        #content {margin-top: 0;}
        
        #content .top-wrapper {padding: 15px 0 0 0;}		
        .pg-title {margin: 0 0 15px;}
        
        .l-std-form-pg-main, .l-std-form-pg-aside {
        float: none;
        width: 320px;
        }                
        
        .video-dialog-box {
        width: 280px;
        height: 158px;
        }
        
        /* 8.4.2. Header & Navigation */
        
        #header {
        height: auto;
        background: none;
        position: relative;        
        }
        
        #header .wrapper {height: auto;}		
        
        a.logo {
        margin: 25px 0 0;
        }                
        
        .main-nav {width: 300px;}		
        .main-nav-top {width: 300px;}
        
        .main-nav a.main-nav-tgl-btn {
        font-size: 15px;
        text-align: center;
        }
        
        .social-nav-header {display: none;}
        .sec-nav li {width: 100%;}
        
        .sec-nav a {
        text-align: left;
        padding: 10px 15px;
        }
        
        /* 8.4.3. Home Page */
        
        .home .pg-title {font-size: 2em;}
        
        .feat-slider li {margin-bottom: 5px;}		
        .feat-slider-item {width: 300px;}
        
        .feat-slider-img {
        float: none;
        width: 300px;
        height: auto;
        margin: 0 auto 15px;
        }
        
        .feat-slider-img img {width: 300px;}
        
        .feat-slider-img-framed {
        width: 300px;
        height: auto;
        min-height: 170px;
        overflow: hidden;
        }
        
        .feat-slider-img-framed img {width: 300px;}
        
        .feat-slider-info {
        float: none;
        margin: 0;
        width: 300px;
        height: auto;		
        }                
        
        .feat-slider-cta  {position: static;}
        
        .feat-slider-cta a {
        float: left;
        margin: 0 10px 15px 0;
        padding-right: 10px;
        width: 120px;
        }
        
        .hm-slider .slider-alt-nav-cont {min-width: 300px;}
        .hm-slider .slider-btn {top: -480px;}
        .hm-slider .slider-btn img {width: 45px;}
        .js .hm-slider {height: 590px;} /* to avoid container shifting on entrance animation */	
        .js .hm-slider ul {height: 525px;}        
        .promo-nav {padding: 30px 0 0 0;}
        
        .promo-nav-item  {
        float: none;
        margin: 0 0 30px;
        width: 300px;
        height: auto;
        }
        
        .promo-nav-item .btn {position: static;}		
        .promo-contact {margin: 0 0 20px;}
        
        /* 8.4.4. Work Page */
        
        .l-intro, .l-in-pg-links {float: none;}
        
        .inline-links li {	
        float: left;
        margin: 0 15px 10px 0;
        }
        
        .disp-list-item {
        margin: 0;
        padding: 0 0 5px;
        width: 300px;
        }					
        
        .disp-list-thumb {
        width: 290px;
        height: 159px;
        }
        
        .disp-list-thumb img {width: 290px;}
        
        .work-content {
        padding: 20px 15px;
        width: 260px;
        border-width: 5px !important;
        }				
        
        .work-content-main, .work-content-aside {
        float:none;
        width: 260px;
        }

        .work-content-img {max-width: 100%;}
        
        /* 8.4.5. Service Page */
        
        .l-intro, .l-in-pg-links {float: none;}		
        .inline-links li {margin: 0 15px 0 0;}
        
        .service-overview-hd {
        padding: 0;
        font-size: 2.1em;
        }
        
        .service-overview-main {
        float: none;
        width: 300px;
        margin: 0 0 25px 0;
        }
        
        .service-overview-aside {
        float: none;
        width: 300px;
        }
        
        /* 8.4.6. Contact Page */

        .l-std-form-pg-main input.text, .l-std-form-pg-main textarea {width: 280px;}
        .l-std-form-pg-main select {width: 300px;}
        
        /* 8.4.7. Blog */
        
        /* 8.4.8. Footer */
        
        .footer-contact {
        width: 300px;
        margin: 0 0 35px;
        }
        
        .footer-logo {
        padding-top: 0;
        width: 110px;        
        }
        
        .site-by {
        padding-top: 10px;
        }
        
        .footer-links {display: none;}
        
        .social-nav-footer {
        display: block;
        width: 105px;
        margin: 15px auto 10px;
        }
    }
    
    /* 8.5. Additional Media Queries */
    
    @media screen and (min-width: 600px) {
        
        /* ensure #nav is visible on desktop version */
        .main-nav-top {display: block !important;}
        
    }
    
/*------------------------*/
/* 9. Plug-in Related CSS */
/*------------------------*/