/*
Theme Name: Shapeshell Custom theme
Theme URI: http://shapeshell.com.au
Author: Al MacMillan
Author URI: http://al-macmillan.com
Text Domain: shapeshell

*/


/*** Custom CSS ***/


/*=========== Primary Styles ==============*/

*{
    /*-webkit-font-smoothing: subpixel-antialiased;*/
}

html, body, #container { position: relative;}
.page { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -66px; }
.push { height: 66px; }
#header { height: 80px; background: #000000; position: fixed; width: 100%; z-index:1000;}
.wrapper { max-width: 1150px; margin: 0 auto; }
#header .logo { float: left; padding-left:20px; }
#nav-main { float: right; padding-top: 15px; }
#nav-main .nav-btn { position: absolute; top: 5px; right: 20px; display: none; }
#nav-main li { display: inline-block;
               padding: 15px 15px;
               text-align: center;
               margin-top: 0px; }
#nav-main li a { 
    text-transform: uppercase; 
    color: #ffffff; 
    font-size: 14px; 
    text-decoration: none; 
    line-height: 28px; 
    font-weight: 600;
    letter-spacing: 0.05em;
}
#footer { 
    height: 66px; 
    background: #000000; 
    padding: 14px 45px 0;
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
    
}
#footer .copyright { color: #ffffff; font-size: 10px; text-align: right; line-height: 40px; }
#footer .social { text-transform: uppercase; color: #ffffff; font-size: 10px; float: left; line-height: 28px; }
div.mc-image { -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; height: 100%; overflow: hidden; width: 100%; }
.mc-cycle { height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: -1; }

body {
    max-height: 100%;
}


.row {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 1150px;
}

.content{
    padding-top: 100px;
    padding-bottom: 100px;
}


.logo img {
    max-height: 100px;
    max-height: 80px;
}
.clear
{
    display: block;
    clear: both;
}


/*================ Homepage ============*/

.homepageslider {
    position: fixed;
    z-index: -1;
    top: 78px;
    bottom: 65px;
    width: 100%;
}
.homepageslider .flex-control-nav
{
    display: none!important;
}

.admin-bar .homepageslider {
    top: 110px;
}
.flexslider .slides > li {
    display: block;
    height:100% !important;
}

.homepageslider ul{
    height:100% !important;
}

#slider.flexslider {
    border: none !important;
    margin:0px !important; 
    height:100% !important;
}

.flexslider .slides img {
    height: 100% !important;
    display: block;
    object-fit: cover;
    max-height: 100% !important;
}
.flexslider {
    background: none !important;
    border: none !important;
    height: 540px;
}
.flexslider .slides .slider-slide 
{
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}
.flexslider .slides .slider-slide-content
{
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    overflow: hidden;
    margin: auto;
}
.product_slider a:hover
{
    
}
.home .flexslider .slides .slider-slide 
{
    background-position: top center;
}
.slide-caption
{
    position: absolute;
    z-index: 1;
    padding: 10px;
}
.sliderimg
{
    position: absolute;
    height: 540px;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.homepageslider .flex-direction-nav{
    display:none !important;
}

.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: 10px !important;
    text-align: center;
}

div.wpcf7 {
    margin: 0;
    padding-top: 15px !important;
    text-align: center;
}

#nav-main li a:hover {
    text-transform: uppercase;
    color: #d2d2d2;
}

.textbox{
    background: rgba(0,0,0,0.6);
    width: auto;
    max-width: 360px;
    height: auto;
    padding: 35px;
    line-height: normal;
    float: left;
    margin: 50px;
    margin-top: 25px;
}

.textbox h2{
    font-size: 20px;
    color: rgba(64,150,199,1.0);
    letter-spacing: 2px;
    text-transform:uppercase;
} 

.textbox p{
    font-size:14px;
    color: white;
    letter-spacing: 1px;
    margin-bottom: 10px;
} 

.fa{
    width: 28px;
    height: 30px;
    background: grey;
    padding: 5px;
    margin: 5px;
    cursor: pointer;
}
.fa:hover
{
    background-color: rgba(64,150,199,1.0);
}
.navbar{
    z-index:100000;
    padding-right: 20px;
}

/*================ Project ============*/

.product{
    padding:20px;
}

.product h1{
    padding:20px;
}

.producttext{
    color:white;
    position: absolute;
}


/*.product-img img{
    text-align: left;
    max-height: 100%;
    object-fit: cover;
    overflow: hidden;
    padding-bottom: 10px;
    width: 100%;
}*/

.product-img .productimage
{
    display: block;
    width: 100%;
    height: 140px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 10px;
}

.product:hover { 
    -moz-box-shadow: 0 0 10px #ccc; 
    -webkit-box-shadow: 0 0 10px #ccc; 
    box-shadow: 0 0 10px #ccc;
    opacity: 0.8; 
    filter: alpha(opacity=80);
} 

.product_slider {
    padding: 50px;
    margin-top:70px;
    position: absolute !important;
    top: 0;
    left: 0;
    color: white;
    text-transform: uppercase;
    width:65%;
    height:80%;
    max-height:900px !important;
}

.product_single {
    margin-bottom:25px;
    position: fixed;
    bottom: 0;
    left: 0;
    color: white;
    text-transform: uppercase;
    padding: 0 50px;
    bottom: 70px;
    z-index: 100;
}
.product_single h1
{
 font-size: 22px;   
 letter-spacing: 2px;
}


.product_content {
    padding-top:25px;
    padding-bottom:25px;
}


.product_content p {
    font-size:14px;
    line-height:18px;
}

.product-img{
   
    padding: 15px 0;
    overflow: hidden;
}
.producttext
{
    display: block;
    position: static;
    font-size: 11px;
}
.backimg img{
    position: fixed;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    display: none
}
.backimg-image
{
    position: fixed;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.overlay{
    background:rgba(0,0,0,0.6);
    height: 100%;
    width: 100%;
    z-index: 0;
}

#product_slider .flex-control-nav {
    bottom: -40px !important;
    text-align: right !important;
}

#product_slider .flex-control-paging li a {
    width: 25px;
    height: 25px;
    padding: 7px;
    font-size: 15px;
    display: block;
    background: white;
    color: grey;
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    border-radius: 0px !important;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    font-family: inherit;
    font-weight: 600;
    text-align: center;
    text-indent: 0;
    padding: 5px 0;
    
}

#product_slider .flex-control-paging li a.flex-active{
    background: rgba(64,150,199,1.0)!important;
    color: white;
}

#product_slider .flex-control-paging a:hover{
    background: rgba(64,150,199,1.0) !important;
    color: white!important;
}

#product_slider .flex-direction-nav {
    display:none;
}

.project_details{
    padding: 50px;
    margin-top:70px;
    line-height: normal;
    /*position: absolute !important;*/
    top:0;
    right:0;
    padding-left: 15px;
    width: 33.33333333333333%;
    float: right;
    padding-top: 0;
    margin-top: 20px;
}

.project_details h2{
    font-size: 20px;
    color: rgba(64,150,199,1.0);
    letter-spacing: 2px;
    text-transform:uppercase;
} 

.project_details p{
    font-size:14px;
    color: white;
    letter-spacing: 1px;
    
}

.detail_title p {
    font-size:14px;
    color: rgba(64,150,199,1.0);
    letter-spacing: 1px;
    text-transform:uppercase;
}
.project_details_description p
{
    margin-bottom: 10px;
}

#projects{
    padding:30px;
    display:block !important;
    max-width: 700px;
    padding-top: 0;
}


.project-product{
    margin-bottom: 0px;
    margin-top: 0px;
    position: relative !important;
    min-height: 1px;
}

.project-product:hover{
    outline-style: solid;
    outline-width: 2px;
    outline-color: rgba(64,150,199,1.0);
}
.project-product:nth-child(3n+1)
{
    clear: both;
}

/*================ News / press ============*/

#popup
{
    max-width: 1400px;
}
#container_blog{
    padding-left: 50px;
    padding-right: 50px;
    clear: both;
    max-width: 700px;
}
.single-post #container_blog
{
    max-width: 1000px!important;
}
#blog-line
{
    background: #5daee1;
    width: 1px;
    height: 90%;
    position: fixed;
}
.blog_overlay::after
{
    content:"";
    position: absolute;
    display: block;
    left: -50px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(64,150,199,1.0);
}
.page-template-template-datasheets .blog_overlay::after
{
    display: none;
}

.news{
    
    /*max-width: 40%;*/
}


.blog_name h1{
    font-size:14px;
    color: rgba(64,150,199,1.0);
    letter-spacing: 1px;
    text-transform:uppercase;
}

.blog_name p{
    font-size:14px;
    color: white;
    letter-spacing: 1px;
    text-transform:uppercase;
    line-height: normal;
}

.post{
    display: inline-block !important;
    padding: 0;
    margin-left: -15px;
    
}

.post:hover {
    outline-style: solid;
    outline-width: 1px;
    outline-color: rgba(64,150,199,1.0);
}
#container_blog .post
{
    max-width: 600px;
}

.single-post .post
{
    margin-left: 0;
}
.single-post .post:hover
{
    border: none!important;
    outline: none!important;
}
.single-post .entry
{
    color: white;
    line-height: 1.25;
}
.single-post .entry p
{
    margin-bottom: 20px;
}

.blog_space{
    background:rgba(64,150,199,1.0);
    height: 1px;
    margin: 10px 0;
}

.blog-img img{
    padding:0px;
    object-fit:cover;
    height:50%;
}

.blog_overlay{
    display:none;
}
.blog_head
{
    cursor: pointer;
}
.blog_head.blog-clicked
{
    outline-style: solid;
    outline-width: 1px;
    outline-color: rgba(64,150,199,1.0);
}

.blog_head.blog-clicked .blog_overlay {
    width:100%;
    display: block;
    position: fixed;
    right: auto;
    top: 124px;
    bottom: 100px;
    width: 50%;
    
    left: 750px;
    
    left: 750px;
    right: 50px;
    width: auto;
    max-width: 700px;
}
.admin-bar .blog_head.blog-clicked .blog_overlay
{
    top: 158px;
}
.blog_head .blog_image
{
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    
    
    position: absolute;
    left: 0;
    right: 0;
    top: 35px;
    bottom: 0;
}
.page-template-template-datasheets .blog_head .blog_image
{
    top: 0;
}
.blog_overlay h1
{
    position: absolute;
    width: 100%;
    top: 0;
    /*margin-bottom: 10px;*/
}

.blog_head{
    position:relative;
    display:block;
    padding: 15px;
}
.blog_head::after
{
    content: "";
    display: block;
    clear: both;
    position: relative;
}
#popup .blog_head a.postlink,
#datapopup .blog_head a.postlink
{
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}
#popup .blog_head a.postlink.no-desktop-link,
#datapopup .blog_head a.postlink.no-desktop-link
{
    display: none;
}

.blog-img {
    padding:0px !important;
    float: left;
    width: 33.33333333333333%;
}
.blog_name
{
    width: 66.66666666666666%;
    float: left;
}

#popup a, #popup a:visited {
    position: relative;
    display: block;
    margin: 0;
    text-decoration: none;
}

#popup a span {
    display: none;
}

#popup a:hover {  
}

/* the IE correction rule */
#popup a:hover	{
    text-indent: 0; /* added the default value */
}

#popup a:hover span {
    display: block;
    position: fixed;
    top: 150px;
    right: 50px;
    max-width:50%;
}
.page-template-template-finish .backimg-image
{
    background-position: top left;
}


/*THUMBNAIL HOVERPOPUPS*/


/*================ Product Range ============*/

.backimg{
    position: fixed;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    left: 0;
}



/*================ Surface Finishes ============*/


.finishes{
    display: block !important;
    padding: 0 35px; 
    /*float: left;*/
    clear: left;
    max-width: 700px;
}
.finishes ul:after
{
    content: "";
    display: block;
    clear: none;
}
.finishes img {
    padding-bottom: 25px;
    width: 100%;
    max-height: 250px;
}
.finish
{
    width: 33.33333333333333%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
}
.finish:nth-child(3n+1)
{
    clear: both;
}
    
.surfaceimg{
    padding: 0px !important;
    height: 200px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.surfacetextbox {
    /*background: rgba(0,0,0,0.8);*/
    padding: 15px 0;
    line-height: normal;
}

.surfacetextbox h2{
    font-size: 14px;
    color: rgba(64,150,199,1.0);
    letter-spacing: 2px;
    text-transform:uppercase;
    padding-bottom: 20px;
} 

.surfacetextbox p{
    font-size:12px;
    color: white;
    letter-spacing: 1px;
} 

.space{
    display:none;
    background:lightblue;
    height: 1px;
    margin: 20px;
}
.product-content
{
    max-width: 1400px;
    position: relative;
}

/*================ Footer ============*/



/*================ Data Sheets ============*/

.data{
    padding:0px !important;
    top: 100px;
    
}
#container
{
    margin-bottom: 200px;
}
#container::after
{
    content: "";
    display: block;
    clear: both;
    height: 1px;
}
.data li {
    line-height: 0px !important;
}

.datatextbox{
    width: auto;
    max-width: 360px;
    height: auto;
    line-height: normal;
    float: left;
    margin: 50px;
}

.dataicon{
    width: auto;
    max-width: 360px;
    height: auto;
    line-height: normal;
    float: left;
    clear:left;
    margin: 40px;
    padding: 10px;
}

.dataicon:hover {
    outline-style: solid;
    outline-width: 1px;
    outline-color: rgba(64,150,199,1.0);
}

.datatextbox p{
    font-size:14px;
    color: white;
    letter-spacing: 1px;
} 

/*================ Contact ============*/

.contact h1{
    font-size:12px;
    color: rgba(64,150,199,1.0);
    letter-spacing: 1px;
}

.contact p{
    font-size:12px;
    color: white;
    letter-spacing: 1px;
}
.page-template-template-contact .slide
{
    padding-right: 20px;
    width: 14.5%!important;
}

.datatextbox
{
    margin: 0;
    padding-left: 35px;
    max-width: 250px;
}
.page-template-template-contact .datatextbox
{
    padding-right: 30px;
}
.page-template-template-datasheets-php .datatextbox
{
    padding-left: 50px;
    padding-top: 20px;
}
.page-template-template-datasheets-php .blog_head.blog-clicked .blog_overlay
{
    left: 350px;
    max-width: 60%;
}
.page-template-template-contact .slide
{
    width: 12%;
    float: left;
}
.contact
{
    max-width: 1400px;
}
.dataicon
{
    
}
/*================ Content ============*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-text-size-adjust: none; box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/**
 * Minimal base styles.
 */

html { font-size: 100.01%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { font-size: 62.5%; line-height: 1em; }
a:link, a:visited { text-decoration: none; cursor/**/: /**/pointer; outline:none;}
a:link:hover, a:visited:hover { text-decoration: none; }
:focus { outline: 0; }
/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; list-style: none; list-style-image: none; }
/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.iem7 input[type="checkbox"] { vertical-align: baseline; }
input, select { vertical-align: middle; -webkit-appearance: none; }
textarea { overflow: auto; }
/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }
/* Make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button { width: auto; overflow: visible; }
/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */
h1, h2, h3, h4, h5, h6 { line-height: 1.2em; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* blockquote , q and hr  */
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
/* Images and Default Classes  */
img { max-width: 100%; vertical-align: bottom; height: auto;}
img.alignleft { float: left; margin: 0 20px 25px 0; display: inline; }
img.alignright { float: right; margin: 0 0px 25px 20px; display: inline; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 25px; }
img.frame { border-radius: 10px; -moz-border-radius: 10px; position: relative; -webkit-border-radius: 10px; behavior: url("js/PIE.htc"); }
/* Default List Styles  */
ul, ol { list-style: none; }
li { line-height: 1.2em; }
li ul, li ol { margin-bottom: 0px; }
/* 
 * Clearing Methods
 */
.clearfix:after { content: "."; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }
.floatbox { overflow: hidden; }
.clear { clear: both; height: 1px; line-height: 1px; }
/* Global Reset & Standards ---------------------- */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/*---- Floats ----*/
.flR { float: right; }
.flL { float: left; }
/*---- Horizontal Alignment ----*/
.alR { text-align: right; }
.alC { text-align: center; }
/*---- Hide ----*/
.hide { display: none; }


 
/* 
        ============ END DEFAULTS =============
*/


body,html
{
    font-size: 14px;
    font-family: "proxima-nova", sans-serif; 
    /*font-family: sans-serif;*/
    -webkit-text-rendering: optimizeLegibility; 
    /*-webkit-text-rendering: geometricPrecision;*/
}
h1,h2,h3,h4,h5,h6
{
    font-weight: 400;
}
a:focus
{
    /*outline: 0!important;*/
}

/* 
        ============ OFF CANVAS =============
*/

#nav-trigger {
    display: none;
    text-align: right; }
/*#nav-trigger span {
  display: inline-block;
  padding: 10px 30px;
  color: white;
  cursor: pointer;
  text-transform: uppercase; }*/
#nav-trigger span:after {
    display: inline-block;
    position: fixed;
    top: 25px;
    right: 0;
    width: 60px;
    height: 50px;
    content: "";}
#nav-trigger span:hover {
    color: rgba(64,150,199,1.0); }
#nav-trigger span.open:after { }

nav {}

nav#nav-main {
    padding: 10px 0; }
nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; }
nav#nav-main li {
    display: inline-block; }
nav#nav-main li:last-child {
    border-right: none; }
nav#nav-main a {
    display: block;
    color: white;}
nav#nav-main a:hover ,
nav#nav-main .current-menu-item a
{
    color: rgba(64,150,199,1.0); }

nav#nav-mobile {
    position: relative;
    display: none; }
nav#nav-mobile ul 
{
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: 0px;
    text-align: right;
    max-width: 300px;
    text-transform: uppercase;
    background-color: black;
    top: 80px;
    right: -20px;
}

nav#nav-mobile li {
    display: block;
    padding: 5px 0;
    margin: 0px;
    border-bottom: solid 1px rgba(255,255,255,0.2); }
nav#nav-mobile li:last-child {
    border-bottom: none; }
nav#nav-mobile a {
    display: block;
    color: white;
    padding: 10px 36px; 
    font-weight: 600;
}
nav#nav-mobile a:hover {
    color: rgba(64,150,199,1);

}
.detail_title
{
    font-weight: 600;
}
.single-post h1
{
    font-size: 20px;
    color: rgba(64,150,199,1.0);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 10px;
    
}
#home-slide-left
{
    position: absolute;
    width: 75px;
    height: 75px;
    bottom: 0px;
    left: 30px;
    display: block;
    background: url(images/arrow-left.png) no-repeat center center;
    z-index: 50;
    background-size: cover;
    cursor: pointer;
}
#home-slide-right
{
    position: absolute;
    width: 75px;
    height: 75px;
    bottom: 0px;
    right: 30px;
    display: block;
    background: url(images/arrow-right.png) no-repeat center center;
    z-index: 50;
    background-size: cover;
    cursor: pointer;
}
.fancybox-skin
{
    padding: 5px!important;
    background: transparent!important;
}
.fancybox-wrap
{

    max-width: 90%!important;
}
.fancybox-inner
{
    max-width: 100%;
}

.single-product .fancybox-next span
{
    visibility: visible;
    width: 55px;
    height: 55px;
    background: url(images/arrow-right.png) no-repeat center center;
    background-size: cover;
    right: -55px;
}
.single-product .fancybox-prev span
{
    visibility: visible;
    width: 55px;
    height: 55px;
    background: url(images/arrow-left.png) no-repeat center center;
    background-size: cover;
    left: -55px;
}
#range_lhs
{
    margin-right: 0;
}



#page-videos-right
{
    position: absolute;
    left: 450px;
    right: 0;
    margin-right: 50px;
}

#page-videos-wrap
{
    margin-top: 200px;
    max-width: 725px;
}
#page-videos-current
{
    width: 100%;
    height: 590px;
    background: black;
    border: 0;
}
#page-videos-thumbs
{
    width: 100%;
    overflow: hidden;
    
    margin-top: 15px;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none; 
    font-size: 0;
    
    /*white-space: nowrap;*/
    /*overflow-x: scroll;*/   
}
#page-videos-thumbs::-webkit-scrollbar 
{ 
    width: 0 !important;
}
.page-videos-thumb
{
    margin-bottom: 20px;
    color: #9c9c9c;
    cursor: pointer;
    
    display: block;
    width: 15%;
    margin-right: 2%;
    vertical-align: top;
    font-size: 13px;
    white-space: normal;
    float: left;
}
.page-videos-thumb:nth-child(6)
{
    margin-right: 0;
}
.page-videos-thumb img
{
    width: 100%;
    display: block;
    /*margin-bottom: 20px;*/
    background: black;
    border: 0;
}



/*============ Media Queries =============*/

@media only screen and (min-width:1250px) and (max-width:1799px) {
    .product-img img {min-height: 150px;max-height: 200px;}
    .blog_head span img{ height:45%;}
}

@media (min-width: 999px) {
    .nav-trigger, label[for="nav-trigger"] {visibility: hidden !important;}  
    .navigation {visibility: hidden !important;} 
}

@media (max-width: 1300px) {
    #nav-main li
    {
        padding: 15px 14px;
    }
    #nav-main li a
    {
        font-size: 12.5px;
    }
}

@media (max-width: 1125px) {
   
    #nav-main li
    {
        padding: 15px 10px;
    }
    #nav-main li a
    {
        font-size: 11px;
    }
    #page-videos-right
    {
        position: static;
        clear: both;
        float: none;
        left: auto;
        right: auto;
        max-width: 100%;
        margin-top: 40px;
        margin-left: 50px;
    }
}

@media (max-width: 1000px) {
    #nav-trigger {  
        position: absolute;
        top: 0;
        margin-top: 15px;
        right: 0;
        width: 60px;
        height: 50px;
        background: url(http://oddshape.com.au/landing/wp-content/themes/oddshapelanding/img/mobmenu.png) no-repeat center center;
        cursor: pointer;
        background-size: cover;
        z-index: 101;
        display: block;
        padding-top: 25px;
        padding-left: 35px;
        margin-right: 20px;
    }
    .fancybox-wrap
    {
        max-width: 100%!important;
    }
    .single-product .fancybox-prev span
    {
        left: 0px;
    }
    .single-product .fancybox-next span
    {
        right: 0px;
    }
    nav#nav-main {
        display: none; }

    nav#nav-mobile {
        display: block; }

    .contact {
        padding: 30px;
        display: block !important;
        height: 60%;
        float: left;
        margin-bottom: 50px;
    } 

    #projects {
        
    }  

    .product_slider {
        width:100%;
        padding: 50px;
        margin-top: 0px;
        position: relative !important;
        padding-bottom: 0;
        padding-top: 20px;
    }
    .project_details
    {
        width: auto;
        float: none;
        padding: 50px;
        padding-top: 0;
    }
    .blog_overlay
    {
        display: none!important;
    }
/*    .page-template-template-datasheets-php .blog_head:hover .blog_overlay
    {
        display: block!important;
    }*/
    #container_blog
    {
        width: auto!important;
        max-width: 700px;
    }
    .page-template-template-contact .slide
    {
        width: 20%;
        padding: 0;
        padding-right: 30px;
        width: 20%!important;
    }
    .datatextbox
    {
        padding-left: 30px;
    }
    .page-template-template-contact .datatextbox
    {
          max-width: 999999px;
    }
    #popup .blog_head a.postlink.no-desktop-link,
    #datapopup .blog_head a.postlink.no-desktop-link
    {
        display: block;
    }
}



@media (max-width:1200px) {
    
    .project_details {
/*        line-height: normal;
        position: relative !important;
        top: 0;
        right: 0;
        padding: 0px;
        margin-top: 0px;
        margin-bottom: 50px;
        text-align: center;*/
    }
    #container_blog
    {
        width: 50%;
    }
    .single-post #container_blog
    {
        width: auto!important;
    }
    .blog_head.blog-clicked .blog_overlay
    {
        max-width: 45%;
        left: 55%;
    }
}

@media only screen and (min-width:767px) and (max-width:1249px) {
    .project-product { width: 33.33333333333333%; float: left;}
    .blog_head span img{ height:35%;}
}

@media (max-width:880px) {
    #nav-main li { min-width: 200px; }
    #popup a:hover span {display: none;}
    #header .logo { float: none; position: absolute;  }
    #nav-main .nav-btn { display: block; }
    #nav-main { position: relative; float: none; }
    #nav-main ul { background: none repeat scroll 0 0 #000; left: 0; position: absolute; top: 67px; width: 100%; z-index: 1000; display: none; }
    #nav-main li { display: block; width: 100%; min-width: inherit; margin-bottom: 10px; }

    nav#nav-mobile ul {
        text-align: center;
        background-color: black;
        /*max-width: 300px;*/
        padding: 0px;
        text-transform: uppercase;
    }
/*    .space{
        display:block;
        background:lightblue;
        height: 1px;
        margin: 20px;
    }*/

}

@media (max-width:640px) {
    .page { margin: 0 auto -150px; }
    .push { height: 150px; }
    #footer { height: 90px;   padding: 10px; }
    #footer .copyright, #footer .social { float: none; text-align: center;  }
    .blog_head span img{ height:25%;}
    .news {
        border-right: 0px !important;
        max-width: 100%;
    }

    .blog_name p, .blog_name h1, .textbox, .surfacetextbox, .producttext, .project_details {
        line-height: initial;
        text-align: center;
    }

    .product_single {
        padding: 50px;
        margin-bottom: 50px;
        bottom: 0;
        left: 0;
        color: white;
        text-transform: uppercase;
        text-align: center;
        width: 100%;
        z-index: 999;
    }
    


    .contactmap{
        display:none;
    }

    .datatextbox {
        width: auto;
        max-width: 360px;
        height: auto;
        line-height: normal;
        float: left;
        margin-top: 25px;
        margin-left: 50px;
        margin-right: 50px;
    }

    .dataicon {
        margin-bottom: 150px;
    }

    .finishes li {
        margin-right: 0px !important;
    }

    .finishes {
        padding-right: 0px !important;
        padding-left: 0px !important;
        width: 100%;
        margin-bottom: 100px;
    }

    .textbox {
        max-width: 100% !important;
    }      

    .surfacetextbox {
        width: 100%;
    }

    .textbox {
        background: rgba(0,0,0,0.6);
        padding: 15px;
        float: left;
        margin: 15px;
        margin-bottom: 40px;
    }
    #range_lhs
    {
        margin-right: 15px;
    }
    #container_blog {
        padding: 0px !important;
    }  
    #projects,.finishes
    {
        margin: auto;
    }
    #projects
    {
        padding: 30px 10px;
    }
    .product_slider,
    .project_details
    {
        padding-left: 20px;
        padding-right: 20px;
    }
    #container_blog
    {
        padding: 0 20px!important;
    }
    .blog_name p,
    .blog_name h1
    {
        text-align: left;
    }
    #page-videos-right
    {
        margin-left: 15px;
        margin-right: 15px;
    }
    .page-videos-thumb
    {
        width: 48%;
        margin-right: 4%!important;  
    }
    .page-videos-thumb:nth-child(2n)
    {
        margin-right: 0!important;  
    }
}

@media (max-width:767px) {
    #wpadminbar
    {
        position: fixed!important;
    }
    nav#nav-mobile ul
    {
        left: -15px;
        max-width: 9999999px!important;
    }
    
    .menu li {font-size: 14px;min-width: 150px;padding-left: 25px; padding-left: 25px; display: block !important;text-align:center;}
    
    .project-product {
        width: 50%;
        float: left;
    }
    .project-product:nth-child(3n+1)
    {
        clear: none;
    }
    .project-product:nth-child(2n+1)
    {
        clear: both;
    }
    
    
    .finish
    {
        width: 50%;
    }
    .finish:nth-child(3n+1)
    {
        clear: none;
    }
    .finish:nth-child(2n+1)
    {
        clear: both;
    }
    #projects,.finishes
    {
        max-width: 500px;
        
    }
    .page-template-template-contact .slide
    {
        width: 100%!important;
        max-width: 300px;
        padding: 0;
        padding-right: 30px;
    }
    .contact
    {
        padding-left: 20px;
        padding-right: 20px;
    }
    .datatextbox
    {
        margin: 0;   
        max-width: 100%;
        float: none;
        padding-left: 20px;
        padding-right: 20px;
    }
    .page-template-template-datasheets-php .datatextbox
    {
        padding-left: 30px;
        text-align: center;
    }
    .dataicon
    {
        float: none;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
    }
    .page-template-template-datasheets-php .blog_head:hover .blog_overlay
    {
        display: none!important;
    }
    .flexslider, .sliderimg
    {
        height: 250px;
    }
    #home-slide-left,#home-slide-right
    {
        bottom: 25px;
    }
}