/* GLOBAL */
/* 24/10/2014: minified for speed performance */
html, body { width: 100%; height: 100%; min-height: 100%; }
body { background: #fff; font-family: 'Open Sans', sans-serif; color: #252525; }
a { color: #00aced; text-decoration: none; }
a:hover { text-decoration: underline; }
/* HEADER */
header { position: relative; width: 100%; height: 80px; padding: 20px 0 20px 0; background-color: #fff; clear: both; }
nav#main { position: relative; width: 600px; margin: 0 auto; }
nav#main ul { list-style: none; }
nav#main ul li { display: block; float: left; padding: 3px 30px; }
.nav-first { padding-left: 0 !important; }
.nav-last { padding-right: 0 !important; }
nav#main ul li a { font-family: 'Open Sans', sans-serif; text-transform: uppercase; transition: all .25s ease; color: #000; text-decoration: none; font-size: 12px; letter-spacing: 4px; }
nav#main ul li a:hover, .current a { text-decoration: none; border-bottom: 1px solid #00aced; }
.no-spacing { letter-spacing: normal; }
.menu-text { margin-top: 34px; }
/* Home content */
#love { text-align: center; position: relative; margin: 0 auto; clear: both; }
#love h2 { text-transform: uppercase; font-size: 18px; letter-spacing: 4px; margin: 100px 0 120px 0; }
.scroll-down { text-transform: uppercase; font-size: 11px; letter-spacing: 4px; margin: 0; position: relative; float: left; width: 100%; text-align: center; height: 30px; }
.down-arrows { clear: both; width: 100%; text-align: center; margin: 0 0 0 0; }
#home-sentence1 { font-size: 18px; letter-spacing: 0px; margin: 310px 0 0 0; z-index: 50; position: relative; }
.darker-blue { color: #00aced; }
#wipeholder { margin: 20px 0 0 0; }
#wipeholder img { -webkit-transform: translate3d(0, 0, 0); }
/* 24/10/2014 Jayden: switched for a 16colour gif & saved 50Kb. */
#wire-render { position: absoulte; width: 100%; height: 800px; background-image: url(../images/home-valentine-wireframe.gif); background-position: center top; background-repeat: no-repeat !important; z-index: 60; background-size: cover; }
#full-render { position: absolute; width: 100%; height: 800px; background-image: url(../images/home-valentine-render.jpg); background-position: center top; background-repeat: no-repeat !important; z-index: 70; display: none; background-size: cover; }
#resultz { position: fixed; top: 50px; left: 10px; z-index: 999; text-align: left; width: 200px; background: #CCC;	/*display: none;*/ }
.pursuit { margin: 0 0 0 0; width: 100%; height: auto; position: relative; float: left; z-index: 50; clear: both; }
.pursuit-text .h1 { font-size: 30px; color: #00aced; margin: 80px 0 0 0; padding: 0; font-weight: 300; letter-spacing: 1px; }
.pursuit-text .h2 { font-size: 18px !important; color: #000; margin: 10px 0 80px 0 !important; padding: 0; text-transform: none !important; letter-spacing: 0em !important; }
.macro { margin: 80px 0 50px 0; width: 100%; height: auto; position: relative; float: left; z-index: 60; clear: both; }
.macro-text { position: relative; float: left; margin: 0 0 70px 0; width: 100%; height: auto; line-height: 31px; font-size: 21px; font-weight: 300; }
.macro-images { width: 100%; height: auto; position: relative; float: left; clear: both; }
.result { margin: 0 0 50px 0; width: 100%; height: auto; position: relative; float: left; z-index: 60; clear: both; }
.result-text { margin: 0 0 90px 0; width: 100%; height: auto; position: relative; float: left; z-index: 70; clear: both; font-size: 22px; font-weight: 300; letter-spacing: 1px; }
#banner { width: 700px; height: 400px; position: relative; margin: 0 auto; clear: both; }
.find-out-more { margin-top: 100px; margin-bottom: 80px; }
#principle-wrapper { width: 100%; position: relative; float: left; clear: both; margin: 60px 0; }
#principles { width: 990px; position: relative; margin: 0 auto; }
.principle { width: 280px; margin: 0 75px 0 0; position: relative; float: left; font-size: 13px; font-weight: 300; line-height: 190%; letter-spacing: 0px; text-align: justify; }
.principle-last { margin: 0 !important; clear: right; }
.principle p { margin: 10px 0 0; }
.circle-text { width: 150px; margin: 0 auto 28px; }
.circle-text:after { content: ""; display: block; width: 100%; height: 0; padding-bottom: 100%; background: #00aced; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
.circle-text h3 { float: left; width: 100%; padding-top: 50%; line-height: 1em; margin-top: -0.5em; text-align: center; color: white; font-size: 18px; }
#beliefs { position: relative; float: left; width: 100%; height: 363px; background: #00aced; clear: both; overflow: hidden; }
 @keyframes BLUE-MOVE {  from {
 transform: translateX(0);
}
to { transform: translateX(1411px); }
}
 @keyframes BLUE-MOVE-IE10 {  from {
 transform: translateX(0);
}
to { transform: translateX(1411px); }
}
 @-webkit-keyframes BLUE-MOVE {  from {
 -webkit-transform: translateX(0);
}
to { -webkit-transform: translateX(1411px); }
}
#beliefs-bg { position: absolute; left: -1411px; right: 0; top: 0; bottom: 0; background: url(../images/bleuscape-blueprint.gif) 0 0 repeat; animation: BLUE-MOVE-IE10 80s linear infinite; -webkit-animation-name: BLUE-MOVE; -webkit-animation-duration: 80s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
}
#beliefs-content { position: relative; margin: 91px auto 0 auto; width: 971px; height: 175px; z-index: 5; background: url(../images/bleuscape-beliefs.png) no-repeat center top; text-align: center; }
#beliefs-content .quote { margin: 117px 0 0 0; position: absolute; width: 100%; list-style: none; display: block; color: #00aced; font-size: 24px; color: #00aced; font-weight: 300; line-height: 130%; }
.twolines { margin-top: 102px !important; }
.smallertext { font-size: 20px !important; margin-top: 108px !important; }
.quote2 { padding: 0 15%; width: 70% !important; margin-top: 102px !important; }
.quote4 { padding: 0 20%; width: 60% !important; margin-top: 102px !important; }
.quote9 { padding: 0 15%; width: 70% !important; margin-top: 102px !important; }
.quote10 { font-size: 20px !important; margin-top: 109px !important; padding: 0 5%; width: 90% !important; }
.quote11 { padding: 0 17%; width: 66% !important; margin-top: 102px !important; }
#invitation-wrapper { width: 100%; position: relative; float: left; clear: both; margin: 60px 0 0 0; }
#invitation { position: relative; clear: both; margin: 0 auto; width: 350px; /*color: #3e3e3e;*/
font-size: 13px; font-weight: 300; line-height: 190%; letter-spacing: 0px; text-align: justify; }
#invitation .large { text-align: center; font-size: 18px; }
#invitation p { margin: 0 0 10px 0; }
.see-our-work { margin: 54px 0 32px 0 !important; text-align: center; }
.see-our-work a { font-size: 20px; text-decoration: none; color: #00aced; letter-spacing: 4px; }
/* --------------------------------*/
/* Projects Page */
/* --------------------------------*/

#projectdetail { width: 100%; position: relative; float: left; margin: 0; padding: 0; }
#description { width: 30%; margin: 0 0 0 2%; position: relative; float: left; /*overflow: auto;*/
font-size: 13px; line-height: 140%; }
#projects { width: 9%; margin: 0 0 10px 2%; position: relative; float: left;/*background-color: #FC6;*/
}
.project { width: 100%; height: auto; max-height: 200px; padding: 0; position: relative; float: left; margin: 0 0 15px 0; }
.project-image { position: relative; }
project-image img { }
.project-name { position: absolute; color: #fff; width: 100%; height: 100%; background-color: #00aced !important; opacity: 0; }
.project-name a { display: block; line-height: normal; height: 100%; text-decoration: none; color: #fff; font-size: 12px; text-align: center; padding: 5px 5px 0 5px; font-weight: 300; }
#projects img { width: 100%; max-height: 200px; }
#photos { width: 53%; height: 100px; margin: 0 2% 0 2%; position: relative; float: left; }
#photos img { width: 100%; height: auto; margin: 0 0 5px 0; padding: 0; position: relative; float: left; }
#description h1 { font-size: 20px; position: relative; float: left; width: auto; margin: 0 2%; font-weight: normal; line-height: 100%; }
#shareholder { position: relative; float: right; clear: right; width: 50px; padding: 0; z-index: 59; }
#share { font-size: 12px; width: 50px; margin: 0; padding: 0; text-align: center; }
#share a { text-decoration: none; color: #fff; background-color: #CCC; display: block; }
#share a:hover { text-decoration: none; background-color: #00aced; }
#share-butts { position: absolute; width: 165px; height: 26px; padding: 5px; background-color: #fff; display: none; right: 0px; }
#share-butts img { margin: 0 5px 0 0; }
.share-butts-last { margin: 0 !important; }
#detail { font-size: 13px; position: relative; float: left; width: 96%; height: auto; margin: 2%; clear: both; z-index: 50; font-weight: 300; line-height: 190%; }
#detail p { margin: 0 0 10px 0; }
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe, .fb-comments iframe[style] { width: 100% !important; }
/** fancbox **/
.fancybox-wrap, .fancybox-inner { }
.newdiv { width: 252px; height: 50px; float: right; background: #000; right: 0; margin-top: -55px; opacity: 0; filter: alpha(opacity=0); position: relative; }
.newdiv img { margin: 0 !important; }
.photoinfo { width: 252px; height: 50px; float: left; left: 0; margin-top: -55px; opacity: 0; filter: alpha(opacity=0); position: relative; color: #fff; font-family: 'Open Sans', sans-serif; text-decoration: none; font-size: 10px; letter-spacing: 3px; text-align: center; }
.photoinfo img { width: 12px !important; height: 10px !important; margin: 10px auto 2px auto !important; float: none !important; }
.fancy-img { width: auto; height: auto; float: left; margin-bottom: 5px; }
.newdiv ul li { float: left; padding: 10px; }
#pop_social a:hover { opacity: 0.7 }
#pop_social { float: right; width: 45px; height: 215px; background: #000; position: absolute; left: -45px; top: 5px; }
#pop_social ul li { padding-left: 8px; padding-top: 10px; }
/* facebook comments */
#fb-abs { position: absolute; bottom: 0; z-index: 100; width: 30%; height: 85px; /*background-color: #FC0;*/
margin: 0 0 0 2%; overflow: hidden; background-color: #fff; }
#comments-abs { position: absolute; bottom: 0; z-index: 110; width: 9%; margin: 0 0 5px 34%; height: 40px; background-color: #00aced; display: table; }
#comments-abs a { color: #fff; display: table-cell; vertical-align: middle; text-align: center; font-size: 12px; text-decoration: none; }
.close-image { display: none; position: absolute; top: -8px; right: -8px; height: 16px; z-index: 200; cursor: pointer; }
/* end facebook comments */

/* Experience page content */
#experience { text-align: center; position: relative; margin: 0 auto; clear: both; width: 100%; }
.experience-sentence1 { font-size: 13px; font-weight: 300; line-height: 190%; letter-spacing: 0px; margin: 30px auto; z-index: 50; position: relative; text-align: justify; width: 596px; }
.photostrip { width: 100%; height: 600px; background-color: #FBFBFB; position: static; float: left; clear: both; background-repeat: no-repeat!important; }
/* 24/10/2014 Jayden: Image-05a & home-image1 optimised to 55% jpg compression, reduced file sizes by 50%. */
.strip1 { background: url(../experience/images/Image-05a.jpg) no-repeat center 0; background-size: 100% auto;/*
	background-attachment: fixed;*/ z-index: 300; }
.strip2 { background: url(../images/home-image1.jpg) no-repeat top center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: 301; }
.strip3 { background: url(../images/home-image2.jpg) no-repeat top center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: 302; }
/* 24/10/2014 | Jayden: these images are HUGE and not in use. please do not leave old image references
in the css. it causes speed issues */
/*
.strip4 {
	background: url(../experience/images/Image-01a.jpg) no-repeat top center;
	background-attachment: fixed;
	z-index:303;
}
.strip5 {
	background: url(../experience/images/Image-03a.jpg) no-repeat top center;
	background-attachment: fixed;
	z-index:304;
}
*/
.nobg { background: none; }
.blogo:hover { border: none; }
.blogo-text { width: 77px; height: 28px; position: absolute; top: 85px; left: -17px; display: none; }
/*------------------------*/
/*  Contact Page  */
/*------------------------*/

#contact { font-size: 12px; letter-spacing: 0px; margin: 66px auto 0 auto; position: relative; width: 683px; height: 440px; text-align: left; font-weight: 300; line-height: 21px; }
#contact-col1 { position: relative; float: left; width: 104px; min-height: 200px; margin: 0 0 0 70px; }
#contact-col2 { position: relative; float: left; width: 240px; min-height: 200px; margin-right: 46px; }
#contact-col3 { position: relative; float: left; width: 200px; min-height: 200px; opacity: 0; }
.div-fullname, .div-company, .div-email, .div-phone, .div-replytomeby, .how { position: relative; float: left; clear: both; height: 20px; width: 100%; margin-bottom: 12px; opacity: 0; left: -100px; }
.div-how { line-height: 14px; opacity: 0; left: -100px; position: relative; float: left; }
.div-message { position: relative; float: left; clear: both; height: 20px; width: 100%; margin: 0px 0 90px 0; opacity: 0; left: -100px; }
#contact-form input, #contact-form textarea { border: 1px solid #CCC; width: 95%; margin: 0 0 11px 0; padding-left: 5px; font-weight: 300 !important; font-family: 'Open Sans', sans-serif !important; font-size: 12px !important; color: #000; }
#contact-form select { border: 1px solid #CCC; margin: 7px 0 22px 0; -webkit-appearance: none; border-left: 2px solid #00aced; border-radius: 0; padding: 3px 3px 3px 7px; }
.radios { width: 20px !important; height: auto !important; border: none !important; margin-bottom: 6px !important; }
.radio-label { margin: 0 12px 0 0; }
.radio-first { border-left: 2px solid #00aced !important; padding-left: 16px; }
#message { margin-top: 9px !important; height: 89px !important; }
#contact-form input { height: 17px; }
#send { width: 100px !important; padding: 5px; background-color: #00aced; color: #fff !important; height: auto !important; border: none !important; position: relative; float: left; clear: right; }
.required { border-left: 2px solid #00aced !important; }
#div-send { width: 100px; position: relative; float: left; clear: left; margin-right: 72px; }
#div-required { border-left: 2px solid #00aced !important; position: relative; float: right; padding: 0px 0 0 6px; height: 16px; line-height: 15px; margin: 5px 0 0; clear: none !important; }
#contact-col3 h1 { font-size: 16px; margin: 0px 0 10px 0; }
.indent { margin: 0 10px 0 0; width: 21px !important; position: relative; float: left; }
#contact-col3 a { color: #000 !important; }
#contact-col3 a:hover { border-bottom: 1px solid #00aced !important; text-decoration: none !important; }
#fullname, #company, #email, #phone, #radio-first, #radio-last, #message, #how, #div-send, #div-required { position: relative; float: left; opacity: 0; left: 100px; }
#how { clear: both; margin-right: 100px !important; }
div.newinfo { display: none; }
#image_info { position: absolute; float: left; bottom: 0; left: -28px; }
#infocontents div.cnts { clear: both; font-family: 'Open Sans', sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 300; line-height: 24px; }
#mobile-button { display: none; }
 @media only screen and (min-width: 480px) and (max-width: 640px) {
.project-name a { font-size: 9px; }
}
 @media only screen and (max-width: 479px) {
.project-name a { font-size: 7px; }
}
 @media only screen and (max-width: 1024px) {
.quote2 { font-size: 20px !important; margin-top: 107px !important; }
.quote9 { font-size: 20px !important; margin-top: 107px !important; }
.quote10 { font-size: 18px !important; }
#projects { width: 17%; }
#love { width: 100%; line-height: 1.7em; z-index: 1; position: relative; background-color: white; margin: 0 auto 100px auto; }
#love h2 { margin: 0 auto 85px 0; }
.pursuit-text h1 { margin-top: 70px; }
.photostrip { height: 100%; }
.strip2 { background: url("/images/home-image1.jpg") top center; position: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; }
.strip3 { background: url("/images/home-image2.jpg") top center; position: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; display: none; }
.pursuit, #principle-wrapper, #invitation-wrapper { background: white; }
#invitation-wrapper { margin-top: 350px; padding-top: 60px; }
#principle-wrapper { margin: 350px 0 0 0; padding: 50px 0 60px 0; }
.mobile-project-image { width: 150px !important; height: 55px !important; }
}
 @media only screen and (max-width: 768px) {
.quote1, .quote2, .quote3, .quote4, .quote5, .quote6, .quote7, .quote8, .quote9, .quote11 { font-size: 20px !important; margin-top: 107px !important; padding: 0 10% !important; width: 80% !important; }
.quote6, .quote1, .quote8 { margin-top: 118px !important; }
.quote3, .quote5, .quote7 { padding: 0 25% !important; width: 50% !important; }
.quote10 { font-size: 18px !important; padding: 0 1% !important; width: 99% !important; }
#principles { width: 100%; position: relative; margin: 0 auto; }
.principle, .principle-last { width: 27% !important; margin: 0 3% !important; }
#beliefs-content { margin: 82px auto 0 auto; width: 100%; }
#projects { width: 17%; }
}
 @media only screen and (max-width: 640px) {
#mobile-button { display: block; }
nav#main { display: none; }
#love { width: 100%; line-height: 1.7em; z-index: 1; position: relative; background-color: white; margin: 0 auto 100px auto; }
#love h2 { margin: 0 auto 85px 0; }
.pursuit-text h1 { margin-top: 40px; }
#principles { width: 100%; }
.principle, .principle-last { margin: 0 10% 30px 10% !important; width: 80% !important; }
#invitation { margin: 0 10% 0 10% !important; width: 80%; }
#home-sentence1 { margin-top: 400px; }
#full-render, #wire-render { background-size: 100%; height: 260px; }
.photostrip { height: 100%; }
.strip2 { background: url("/images/home-image1.jpg") top center; position: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; }
.strip3 { background: url("/images/home-image2.jpg") top center; position: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; display: none; }
#beliefs-content { width: 100%; }
#beliefs-content .quote { font-size: 15px; }
.quote { font-size: 16px !important; margin-top: 103px !important; padding: 0 3% !important; width: 94% !important; }
.quote1, .quote3, .quote5, .quote7, .quote8 { margin-top: 110px !important; }
.quote6 { margin-top: 120px !important; }
.quote10 { font-size: 14px !important; margin-top: 94px !important; padding: 0 1% !important; width: 98% !important; }
.quote11 { font-size: 16px !important; margin-top: 94px !important; }
.pursuit, #principle-wrapper, #invitation-wrapper { background: white; }
#principle-wrapper { margin: 250px 0 0 0; padding-top: 50px; }
#beliefs-content { width: 100%; background: url(../images/bleuscape-beliefs-mobile.png) no-repeat center top; margin-top: 30px; }
#beliefs-content .quote { margin: 50px 0 0 0; font-size: 16px; }
.twolines { margin-top: 100px 5px 0 5px !important; font-size: 16px; }
.smallertext { font-size: 16px !important; margin-top: 108px !important; }
#beliefs { margin-bottom: 200px; height: 280px; }
#invitation { padding-top: 50px; }
.mobile-projects { width: 150px !important; margin-top: 35px !important; }
.mobile-project-image { height: 55px !important; margin-bottom: 16px; }
.mobile-project-name { background: none !important; opacity: 1; }
.mobile-project-name a { color: #000 !important; font-size: 12px; padding-top: 56px; }
header { display: none; }
#description { display: none; }
#contact { width: 320px; margin-top: 20px; }
#contact-col1 { width: 100px; margin: 0 0 0 30px; }
#contact-col2 { width: 160px; margin-right: 0; }
#contact-col3 { margin: 30px 0 0 30px; }
}
/*#infocontents { width: 20%; float: left; position: relative; padding-left: 1%; padding-right: 1%; max-height: 100%; overflow: auto; bottom: 2%; } */
/*#infocontents div.clsinfo { float: right; position: relative; margin: 1%; padding-top: 6%; padding-bottom: 1%; }*/
#infocontents {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    z-index: 9999;
}

#infocontents div.clsinfo {
    position: absolute;
    right: 0;
    padding-top: 5px;
}

#infocontents div.cnts {
    padding: 15px;
}