@charset "utf-8";
/* CSS Document */

/******************
Global **************/


html, body
{
	background:url(../images/brickWall.jpg) top left no-repeat;
	background-size:cover;
	height:100%;
}

h1, h2, h3, h4, h5, h6, p, body
{ font-family: "proxima-nova", Helvetica, Arial, sans-serif; }

a {
    color: #1396c0;
}

.row-fluid
{
	margin:0;
}

.navbar-inverse
{
	background-color:#000;
	background-color:rgba(0,0,0,0.75);
	border:none;
}

.navbar-brand
{
	height:auto;
	padding:0;
}

.navbar-nav>li>a
{
	padding-top:40px;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus
{
	background-color:#000;
	color:#fff;
	font-weight:bold;
	text-transform:uppercase;
}


.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus
{
	background-color:#000;
}


.navbar-inverse .navbar-nav>.active.yellow>a, .navbar-inverse .navbar-nav>.active.yellow>a:hover, .navbar-inverse .navbar-nav>.active.yellow>a:focus, .navbar-inverse .navbar-nav>li.yellow>a:hover, .navbar-inverse .navbar-nav>li.yellow>a:focus
{
	background-color:#eab90a;
}

.navbar-inverse .navbar-nav>.active.teal>a, .navbar-inverse .navbar-nav>.active.teal>a:hover, .navbar-inverse .navbar-nav>.active.teal>a:focus, .navbar-inverse .navbar-nav>li.teal>a:hover, .navbar-inverse .navbar-nav>li.teal>a:focus
{
	background-color:#1396b6;
}

.navbar-inverse .navbar-nav>.active.pink>a, .navbar-inverse .navbar-nav>.active.pink>a:hover, .navbar-inverse .navbar-nav>.active.pink>a:focus, .navbar-inverse .navbar-nav>li.pink>a:hover, .navbar-inverse .navbar-nav>li.pink>a:focus
{
	background-color:#e9008a;
}

.navbar-inverse .navbar-nav>.active.orange>a, .navbar-inverse .navbar-nav>.active.orange>a:hover, .navbar-inverse .navbar-nav>.active.orange>a:focus, .navbar-inverse .navbar-nav>li.orange>a:hover, .navbar-inverse .navbar-nav>li.orange>a:focus
{
	background-color:#ff8900;
}

.yellow { color:#eab90a; }

.teal { color:#1396b6; }

.orange { color:#ff8900; }

.pink { color:#e9008a; }

.white { color:#fff; }

.tealBg { background-color:#1396b6; }

/******************
Home Page **************/

.homeTiles
{
	margin-top:75px;
}

.homeSection, .homeTiles div
{
	color:#fff;
	padding-left:0;
	padding-right:0;
}

.introTile .content
{
	padding:10%;
}

.introTile h1
{
	display:block;
	font-size:80px;
	margin:0;
	padding:0;
	text-transform:uppercase;
}

.content
{
	left:0;
	position:absolute;
	top:15px;
}

.introTile a:link, .introTile a:visited
{
	font-size:18px;
	margin-top:40px;
	width:150px;
}

.introTile a:hover, .introTile a:active
{
	background-color:#eab90a !important;
	color:#fff;
	text-decoration:none;
	/*color:#b79107;*/
}

.homeSection h3, .homeSection p, a.moreButton
{
	max-width:500px;
	padding:0 65px;
}

.homeSection h3
{
	font-size:60px;
	font-weight:900;
	padding-top:0;
	text-transform:uppercase;
}

a.moreButton:link, a.moreButton:visited
{
	background-color:#fff;
	display:block;
	font-weight:700;
	max-width:280px;
	padding:30px 5px 5px 20px;
	position:relative;
	text-align:center;
	text-transform:uppercase;
}

.homeSection a:hover, .homeSection a:active
{
	text-decoration:none;
}

.services
{
	background:url(../images/servicesTileBg.jpg), #49acc4 no-repeat;
	background-size:cover;
}

.contact
{
	background:url(../images/contactTileBg.jpg), #e9008a no-repeat;
	background-size:cover;
}

.work a:link, .work a:visited{ color:#ff8900; }
.work a:hover, .work a:active{ color:#ff6100; }

.services a:link, .services a:visited{ color:#49acc4; }
.services a:hover, .services a:active{ color:#34798a; }

.contact a:link, .contact a:visited{ color:#e9008a; }
.contact a:hover, .contact a:active{ color:#a60062; }

.bgImg
{
	left:0;
	position:absolute;
	top:0;
	z-index:0;
}

.staff div
{
	background-size:cover;
	min-height:750px;
	padding:0;
	position:relative;
}

.staff div a:link, .staff div a:visited
{
	bottom:0;
	color:#fff;
	display:block;
	font-size:24px;
	font-weight:700;
	height:100%;
	position:absolute;
	text-decoration:none;
	text-transform:uppercase;
	top:0;
	width:100%;
	z-index:10;
    -webkit-transition: background 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.staff div a:hover, .staff div a:active
{
	background-color: rgba(0,0,0,0.75);
}

.staff div a span
{
	display:block;
	height:70px;
	margin-top:0px;
	position:absolute;
	text-align:center;
	top:50%;
	width:100%;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.staff div a:hover span, .staff div a:active span
{
	margin-top:-35px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}

.joanne
{
	background:url(../images/joanne-double-width.jpg) center center no-repeat;
}

.jasmine
{
	background:url(../images/jasmine.jpg) center center no-repeat;
}

.venera
{
	background:url(../images/venera.jpg) center center no-repeat;
}

.arty
{
	background:url(../images/arty.jpg) center center no-repeat;
}

.tracey
{
	background:url("../images/tracey-double-width.jpg") center center no-repeat;
}

div.staffName
{
	background-color: rgba(0,0,0,0.75);
	bottom:20px;
	color:#fff;
	padding:5%;
	height:120px;
	min-height:120px;
	position:absolute;
	width:100%;
}

.jasmine div.staffName
{
	padding-top:2.5%;
}

.staffName h3, .staffName p
{
	margin:0;
	padding:0;
	line-height:30px;
}

.staffName h3, .staffDets h3, p .funFact
{
	font-family: "daniel",cursive;
	font-style: normal;
	font-weight: 700;
	font-size:30px;
}

.staffName p
{
	text-transform:uppercase;
	font-size:24px;
}

/******************
Services **************/

.servicesPage
{
}

.servicesPage div
{
	padding:0;
}

.servicesPage .container
{
	max-width:960px;
}

.servicesPage h3
{
	display:block;
	font-size:60px;
	font-weight:bold;
	margin-top:0;
	padding-left:20px;
	padding-right:20px;
	text-transform:uppercase;
}

.servicesIntro h3 span
{
	font-weight: 200;
	font-size: 40px;
	text-transform:none;
}

.servicesIntro h3
{
	color:#1396b6;
	position:absolute;
	top:130px;
}


.servicesPage p
{
	padding-left:20px;
	padding-right:20px;
}

p.nomargin
{
	margin-bottom: 0;
}

div.servicesIntroTextRow
{
	background-color:#fff;
	padding:25px 0 25px 0;
	position:relative;
}

.servicesIntroTextRow img
{
	left:0;
	position:absolute;
	top:0;
}

.servicesIntroTextWrapper
{
	max-width:875px;
	position:relative;
}

p.servicesIntroText
{
	font-size:24px;
	padding-right:40px;
}

.servicesIntroTextRightCol
{
	width:30%;
}

div.servicesInclude, div.materials, div.homeConsults
{
	background:url(../images/servicesBg.jpg) center center no-repeat #fff;
	background-size:cover;
	padding-top:40px;
	padding-bottom:40px;
	position:relative;
}

.servicesInclude h3
{
	color:#fff;
}

div.materials
{
	background:url(../images/materialsBg.jpg) center center no-repeat #fff;
	background-size:cover;
}

div.homeConsults
{
	background:url(../images/homeConsultsBg.jpg) center top no-repeat #fff;
	background-size:cover;
	padding-top:0;
	padding-bottom:0;
}

div.homeConsults .col-sm-6
{
	background-color:#1396c0;
	background-color:rgba(19,150,192, 0.85);
	padding-top:40px;
	padding-bottom:40px;
}

div.homeConsultsCopy
{
	background-color:#fff;
	padding-top:40px;
	padding-bottom:40px;
	position:relative;
}

#light, #swatches
{
	position:absolute;
	right:200px;
	top:0;
	z-index:100;
}

#swatches
{
	bottom:-20px;
	right:0;
	top:auto;
}

div.decorative
{
	background:url(../images/decorativeBg.jpg) center top no-repeat #fff;
	background-size:cover;
}


/******************
Remote Design **************/

.modal-backdrop 
{
	background-color: #1396c0;
}

.modal-backdrop.in
{
	opacity: .75;
}

.flexHeader
{
	background-image: url("../images/remote-design-top-banner.jpg");
	background-size: cover;
	background-position: right;
	display: flex;
	align-items: center;
	min-height: 600px;
}

.flexHeader .container h3
{
	position: relative;
	top: auto;
}

.serviceOfferRow
{
	margin:60px 0;
}

.serviceOfferRow .finishingTouches, .serviceOfferRow .groundUp
{
	float: left;
	padding: 30px 0;
	position: relative;
	width: 100%;
}

.serviceOfferRow .bigImageBg
{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	height: 100%;
	top: 0;
	width:85%;
}

.serviceOfferRow .finishingTouchesBg
{
	background-image:url("../images/finishing-touches.jpg");
}

.serviceOfferRow .groundUpBg
{
	background-image:url("../images/ground-up.jpg");
	right: 0;
}


.serviceOfferWrapper, .serviceOfferWrapper.left
{
	background-color: rgba(211,243,251,0.9);
	float: right;
	max-width: 460px;
	padding: 60px !important;
	position: relative;
	z-index: 10;
}

.serviceOfferWrapper.left
{
	float:left;
}

.serviceOfferWrapper h3
{
	color: #1396c0;
	font-size: 38px;
}

.serviceOfferWrapper .priceWrapper
{
	background-color: #1396c0;
	color: #fff;
	left:-100px;
	padding: 10px;
	position: absolute;
	text-align: center;
}

.serviceOfferWrapper .priceWrapper.right
{
	left: auto;
	right: -100px;
}

.priceWrapper p
{
	margin:0;
	padding:0 20px;
}

.priceWrapper .price
{
	font-size: 30px;
	font-weight:700;
}

.priceWrapper .perRoom
{
	margin-top: -10px;
}

.customPackages h3, .faq h3
{
	color: #1396c0;
}

.faq
{
	margin-top: 40px;
}

.btn
{
	border-radius: 0;
}

.btn-default
{
	background-color: #1396c0;
	border: none;
	color: #fff;
	font-weight: 700;
	padding: 15px;
	text-transform: uppercase;
}

/******************
About **************/

body.subpage
{
	background:url(../images/brickWall.jpg) center center repeat-y;
	background-size:cover;
	height:100%;
}

.bigText
{
	font-size:24px;
	padding-right:40px;
}

.aboutPage div
{
	padding:0;
}

.aboutIntro h3
{
	margin-top:100px;
	font-size:60px;
	font-weight:700;
	text-transform:uppercase;
}

.aboutIcons
{
	display: flex;
	height:250px;
	justify-content: center;
	margin:0 auto;
	text-align:center;
	width: 100%;
}

.aboutIcons #joanne, .aboutIcons #jasmine, .aboutIcons #venera, .aboutIcons #arty, .aboutIcons #tracey
{
	display:inline-block;
	height:100%;
	max-width:33%;
}

.aboutIcons #tracey
{ text-align: left; }

.aboutIcons img
{
	-webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.aboutIcons div img:hover
{
    -webkit-transform: scale(1.1);
	-webkit-transform-origin:center center;
	transform: scale(1.1);
	transform-origin:center center;
}

.parallaxObject
{
	background-size:contain !important;
	position: absolute;
	z-index: 1000;
}

.chevron
{
	background:url(../images/chevron.png) center center no-repeat;
	height:216px;
	right: 0%;
	bottom: -190px;
	width:1920px;
}

.houndstooth1
{
	background:url(../images/houndstooth1.png) center center no-repeat;
	height:255px;
	right: 10%;
	bottom: -170px;
	width:248px;
}

.houndstooth3
{
	background:url(../images/houndstooth3.png) 50% 0 no-repeat;
	height:536px;
	right: 5%;
	bottom: -268px;
	width:398px;
}

.diamond
{
	background:url(../images/diamond.png) 50% 0 no-repeat;
	height:372px;
	left: 10%;
	bottom: -186px;
	width:312px;
}

.flower
{
	background:url(../images/flower.png) 50% 0 no-repeat;
	height:456px;
	left: 15%;
	bottom: 0px;
	width:356px;
}

.shard
{
	background:url(../images/shard.png) 50% 0 no-repeat;
	height:456px;
	left: 0;
	top: 1%;
	width:356px;
}

.aboutJoanne, .aboutJasmine, .aboutVenera, .aboutArty, .aboutTracey
{
	height:100%;
	margin:0 auto;
	width:100%;
}

div.staffDets
{
	background-color:#fff;
	background-color:rgba(255,255,255,0.85);
	background-size:cover;
	font-size:18px;
	font-weight:200;
	padding:20px;
	position:absolute;
	top:75px;
}

div.staffDets h3
{
	font-size:48px;
}

p .funFact
{
	font-size:18px;
}

div.staffDets a:link, div.staffDets a:visited
{
	background-color:#EFEFEF;
	border-radius:0;
}

.joanneText.staffDets
{
	left:0;
	height:auto;
	min-width:450px;
	top:40%;
	width:30%;
}
.joanneText h3, .joanneText .funFact, .joanneText a { color:#1396b6; }

.jasmineText.staffDets
{
	left:0;
	min-width:350px;
	top:40%;
	width:30%;
}
.jasmineText h3, .jasmineText .funFact, .jasmineText a { color:#e9008a; }

.veneraText.staffDets
{
	min-width:350px;
	right:0;
	top:25%;
	width:30%;
}
.veneraText h3, .veneraText .funFact, .veneraText a { color:#ff8900; }

.artyText.staffDets
{
	min-width:350px;
	right:0;
	top:25%;
	width:30%;
}
.artyText h3, .artyText .funFact, .artyText a { color:#eab90a; }

.traceyText.staffDets
{
	min-width:350px;
	left:0;
	top:25%;
	width:30%;
}
.traceyText h3, .traceyText .funFact, .traceyText a { color:#008d7f; }


/********************
Folio Thumbs *********/
.folioContent
{
	margin-top:75px;
}

/*.folioContent .container { width:1440px; }*/

.folioContent div
{
	padding:0;
}

.folioThumbs
{
	text-align:center;
}

.folioThumb
{
	position:relative;
}


.folioThumb a:link, .folioThumb a:visited
{
	color:#fff;
	display:block;
	font-weight:700;
	height:100%;
	text-align:center;
	text-transform:uppercase;
	width:100%;
	z-index:50;
    -webkit-transition: background 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.folioThumb a:hover, .folioThumb a:active
{
	background-color: rgba(0,0,0,0.75);
}

.folioThumb a span.comIcon, .folioThumb a span.resIcon, .folioThumb a span.folioThumbDets, .folioThumb a span.folioBlack
{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.folioThumb a:hover span
{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}

.comIcon, .resIcon, .folioThumbDets
{
	color:#fff;
	text-align:left;
	padding:5px;
	position:absolute;
	z-index:50;
}

.comIcon, .resIcon
{
	display:block;
	top:0;
	/*width:100%;*/
}

.comIcon span, .resIcon span
{
	background:url(../images/houseIcon.png) left center no-repeat;
	display:block;
	font-weight:700;
	height:22px;
	line-height:22px;
	margin:0;
	padding-left:32px;
	text-transform:uppercase;
}

.comIcon span { background:url(../images/commercialIcon.png) left center no-repeat; }

.resIcon { z-index:501; }

.folioThumbDets
{
	bottom:0;
	display:block;
	font-weight:normal;
	left:20px;
	text-transform:none;
	/*width:100%;*/
}

.folioThumbDets p
{
	margin:0;
}

.folioBlack
{
	background-color:#000;
	background: rgba(0,0,0,0.65);
	bottom:0;
	display:block;
	height:60px;
	padding-left:20px;
	position:absolute;
	width:100%;
}

/*.wideThm .folioBlack { padding-top:25%; }
.tallThm .folioBlack { padding-top:100%; }*/

.fadeFolioImg {
    position: absolute;
    left: 0;
    transition: opacity 300ms;
}
.fadeFolioImg:hover {
    opacity: 0;
}

/********************
Folio Filter *********/

#folioFilters
{
	background-color:#000;
	margin-top:75px;
	padding:10px 0;
	text-align:right;
}

#folioFilters a
{
	color:#49aac2;
}

#folioFilters li.active a { color:#fff; }

#folioFilters .nav-pills>li.active>a, #folioFilters .nav-pills>li.active>a:hover, #folioFilters .nav-pills>li.active>a:focus
{
	background-color: #ec008c;
}

#folioFilters .nav-pills
{
	display:inline-block;
}

/********************
Folio Items *********/

  .toggleWrapper
  {
	  position:absolute;
	  padding:0;
	  right:0;
	  top:15%;
	  width:700px;
	  z-index:101;
  }
  .toggle
  {
	  float:right;
	  display:none;
	  width:700px;
  }
  
  .toggleInfo 
  {
	  background-color:#fff;
	  float:right;
	  max-height: 800px;
	  padding:20px;
	  width: 610px;
  }
  
  .briefInfoOpen, .briefInfoClose
  {
	  background:url(../images/openCloseArrows.png) left bottom no-repeat;
	  background-color:#fff;
	  border-right:1px solid #ec008c;
	  float:right;
	  text-align:center;
	  width:90px;
  }
  
  .briefInfoOpen
  {
	  background:#fff url(../images/openCloseArrows.png) right bottom no-repeat;
	  float:none;
	  position:absolute;
	  right:0;
	  top:15%;
	  z-index:100;
  }
  
  .briefInfoOpen .briefBtn, .briefInfoClose .briefBtn
  {
	  display:block;
	  height:100%;
	  padding:20px;
	  width:100%;
  }

.folioItem
{
	height:100%;
	width:100%;
}

.folioItem .rsNav 
{
	background-color:rgba(0,0,0,0.85);
    bottom:0;
	height:110px;
	overflow:visible;
    position: absolute;
	width:100%;
}

.rsDefault .rsThumb 
{
	border:1px solid #000;
	float: left;
	margin-top:5px;
	overflow: hidden;
	width: 100px;
	height: 100px;
}

.rsDefault .rsThumb img { width:100%;}

.rsDefault .rsThumb.rsNavSelected
{
	border:1px solid #ec008c;
}

.closeBtn, .briefBtn
{
	bottom:56px;
	height:44px;
	left:10px;
	position:absolute;
	width:44px;
	z-index:1000;
}

.briefBtn
{
	left:100px;
}


/******************
Contact **************/

.contactBigImage
{
	background:url(../images/contactBg.png) center center;
	background-size:cover;
	min-height:450px;
	padding:100px 0 0 0;
}

.contactBigImage .container
{
	background-color:#fff;
}

.contactBigImage h2
{
	color:#e9008a;
	font-size:50px;
	font-weight:700;
	text-transform:uppercase;
}

.contactBigImage a
{
	color:#ec008c;
}

.contactBigImage .map
{
	color:#000;
	height:600px;
	padding:25px 0;
	width:100%;
}

.contactBigImage .map #mapCanvas
{
	height:100%;
	width:100%;
}

/******************
Terms and Conditions **************/

.termsIntro h3
{
	top:45%;
}

/******************
Footer **************/

.footerWrapper
{
	background:url(../images/brickWall.jpg) center center no-repeat;
	background-size:cover;
	padding-bottom:40px;
}

.footerShadow
{
	background:url(../images/shadow.png) top left repeat-x;
	min-height:33px;
}

.footerLogo
{
	max-width:510px;
}

.footerPhoneIcon
{
	float:left;
	margin-right:20px;
}

.footerPhone
{
	font-size:24px;
	font-weight:700;
	float:left;
}

.footerAddress
{
	font-size:14px;
}

a.facebookLink:link, a.facebookLink:visited
{
	background:url(../images/facebookIcon.png) top left no-repeat;
	color:#000;
	display:block;
	padding-left:40px;
	height:30px;
	line-height:30px;
	width:30px;
}

a.facebookLink:active, a.facebookLink:hover { background:url(../images/facebookIcon.png) bottom left no-repeat; }

.facebookLink span
{
	display:none;
}

.copyright
{
	text-align:center;
}