/* CSS Document for ckg website development*/

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
  /*  @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
 /*   @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
 /*   @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
 /*   @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
  /*  @media only screen and (min-width : 1200px) {

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
 /*   @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
 /*    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
  /*   @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
  /*   @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
  /*   @media only screen and (max-width : 320px) {
        
    }
==================================================*/


@charset "utf-8";


@font-face {
	font-family: 'Existence-Light';
	src: url('Existence-Light.otf');
}
@font-face {
	font-family: 'banana chips';
	src: url('banana_chips.TTF');
}
p, body, img{
	margin: 0px;	
	padding: 0px;
}
body{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	letter-spacing: 1px;
	background-color: white;
	color: #444;
}

/* Text that only shows under certain conditions */
.funStyleDisplayOnly,
.traditionalStyleDisplayOnly{
	display: none;
}

/**  Common Areas  ***************/

.logoWrap{
	padding: 30px 0px 50px;
	border-bottom: 2px solid #A52822;
}

.commentLine{
	font: bold 1.5em 'Existence-Light', Geneva, sans-serif;
	padding-bottom: 30px;
}

/** hideMe has opacity increased through Script **/
/* If script is enabled, class="jsEnabled" is added to the body */
/* If script is disabled, opacity will NOT be set to 0 (so div will display) */
body.jsEnabled .hideMe{
	opacity: 0;
}

/* override bootstrap css*/
.thumbnail{
	border: none;
	box-shadow: none;
}
.jumbotron{
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: #efefef;
}
.jumbotron p{
	color: #fff;
	font-size: 1.2em;
}
.jumbotron h2,
.jumbotron h3,
.jumbotron h4{
	color: #fff;
}

/**  Generic Styling **********/
.redText{
	color: #A52822;
}
.greenText{
	color: #74A340;	
}
.blueText{
	color: #383F99;	
}
.brickOrange{
	color: #891A00;
}
.clearFloat{
	clear: both;	
}
.inlineLink{
	text-decoration: none;
	color: 	#A52822;
}
.inlineLink:hover{
	color: #74A340;	
}
.emphasis{
	font-weight: bold;
	font-style: italic;	
}
.italic{
	font-style: italic;
}
.center{
	text-align: center;
}
.rightAlign{
	text-align: right;
}

.padBottom{
	padding-bottom: 130px;
}
.opaqueBackground{
	background-color: rgba(0, 0, 0, 0.4);
	padding: 10px;
	border: 0px solid #fff;
	border-radius: 6px;
}


/*********  index.html  *************************************************/

#jumbotronTailored{
	background-image: url(../images/index_top.jpg);
}
#jumbotronBusiness{
	margin-top: 80px;
	margin-bottom: 80px;
}
#jumbotronBusiness h2{
	font: bold 1.6em 'Existence-Light', Geneva, sans-serif;
	color: #444;
}
#jumbotronBusiness p{
	color: #444;
}


#jumbotronHire{
	margin-bottom: 0px;
}
#jumbotronHire p{
	color: #444;
	font: bold 1.5em 'Existence-Light', Geneva, sans-serif;
}

#jumbotronRelax{
	background-color: #fff;
}

#jumbotronRelax img{
	width: 100%;
}

#indexPage #comment1{
	margin-top: 80px;
}
#overlayText{
	
}

/*****  Client Boxes on Index Page *******/

 #clientBoxRow{
	margin: 30px 0px 120px 50px;
 }
 
.clientBox{
	font: bold 1.6em 'Existence-Light', Geneva, sans-serif;
	height: 150px;
	text-align: center;
	font-size: 1.3em;
	border: 2px dotted #333;
	border-radius: 10px;
/*	box-shadow: 3px 3px 10px #999;	*/
	transition: background-color 1s ease 0s;
}
#firstClientBox{
	margin-left: 30px;
}
.clientBox .behindOff{
/*	font-family: Tahoma, Geneva, sans-serif; */
	font-size: 1em;
	padding-top: 5px;
}

/****  Toggle clientBox display ********/
.behindOff,
.clientBox:hover .frontOn{
	display: none !important;
}
.frontOn,
.clientBox:hover .behindOff{
	display: block !important;
}
.clientBox:hover{
	cursor: grab;
	background-color: #74A340;
	color: #FFFFFF;
}
.clientIcon{
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 2em;	
	color: #383F99;
}

/* move Client Boxes left on any screen smaller than desktop */
@media (max-width: 990px){
	#firstClientBox{
		margin-left: 0px;		/*restore original margin for first Client Box */
	}
}
/*********  portfolio.html  *************************************************/
#portfolioPage .jumbotron{
	background-image: url(../images/portfolio_top.jpg);
	/*Copyright: <a href='http://www.123rf.com/profile_oapril'>oapril / 123RF Stock Photo</a>*/
}
#portfolioPage .jumbotron h2{
	margin-left: 120px;
}
#portfolioPage .jumbotron p{
	margin-left: 155px;
}

#portfolioPage .contentWrap{
	margin: 20px auto 100px;
	padding: 0px 40px;
}
#pfPageText{
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	letter-spacing: normal;
	text-align: right;
	width: 80%;
	margin: 0px auto;
}

.pfBlock{
	clear: both;
	padding-top: 45px;
}

.pfBlock img{
	float: left;
	padding-right: 30px;
}

.pfText{
	padding-top: 30px;
}

/*****  Breakpoints for Portfolio Page  ****/
/* change padding on jumbotron as window scales down */
@media (max-width: 600px){
	#portfolioPage .jumbotron{
		padding: 10px 10px 0px;
	}
}
/*********  designs.html  *************************************************/
#designPage .jumbotron{
	background-image: url(../images/design_top.jpg);
	padding-top: 40px;
	padding-bottom: 80px;
}

#designPage .jumbotron h3{
	color: #fff;
}

#calmLine,
#traditionalLine,
#funLine,
#basicLine{
	display: none;	
}
#buttonRow{
	text-align: center;
}

.styleBox{
	text-align: center;
	font-size: 1.5em;
	width: 180px;
	margin: 30px 30px;
}
.textBlocksWrapper{
	padding: 10px 30px 10px;
}

.textBlock h3{
	color: #A52822;
}


/**** Style Changes ***/

/** CALM **/
.calmStyle .logoWrap{
	border-bottom: 2px solid #ccc;
}
.calmStyle #onOffJumbotron{
	display: none;	
}

.calmStyle .contentWrap{
	margin: 0px;
	background-color: #fff;
	background-image: url(../images/design_calmBackground.jpg);
	background-repeat: repeat-y;
	background-position: top right;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.calmStyle .styleBox{
	font-family: 'Existence-Light', Ariel, sans-serif;
	font-weight: bold;
	font-size: 1.3em;
	color: #fff;	
	background-image: url("../images/design_calmButton.png");
/*	background-color: #0095D4;*/

}

/* Page Header Box */
.calmStyle .pageHeaderBox p:after{
	content: "The Spa " url("../images/design_calmLotusMed.png");
}
.calmStyle .pageHeaderBox p{
	font-family: 'Existence-Light', Ariel, sans-serif;
	font-weight: bold;
	color: #444;
	background-image: none;
	font-size: 3em;
	padding-left: 50px;
	padding-top: 30px;
}
/* All text blocks */
.calmStyle .textBlocksWrapper p{
	color: #3B5D7F;
	font-size: 1.1em;
}
/* Individual text blocks */
.calmStyle .textBlock h3{
	font-family: 'Existence-Light', Ariel, sans-serif;
	font-weight: bold;
	color: #3B5D7F;
	text-align: left;
	font-size: 2em;	
}
.calmStyle .textBlock h3:before{
	content: url("../images/design_calmIconSwirl.png");
}

.calmStyle .textBlock{
	display: block;
	margin: 20px auto 20px;
}
.calmStyle .textBlock p{
	text-align: left;	
}

/*****  Breakpoints for background going white in Calm Style  ****/
/* darken the first block of text
@media (max-width: 1080px){
	.calmStyle #textBlock1 p{
		color: #3B5D7F;
	}

}

/* On small screens, darken half of second block
@media (min-width : 320px) and (max-width : 590px){
	.calmStyle #textBlock2 h3,
	.calmStyle #halfTextBlock2{
		color: #3B5D7F;
	}

}*/
/********** end Breakpoints **********************************/

/** TRADITIONAL **/
.traditionalStyle .logoWrap{
	border-bottom: 2px solid #000;
}
.traditionalStyle #onOffJumbotron{
	display: none;	
}

.traditionalStyle .contentWrap{
	background: url("../images/design_traditionalBackground.png") repeat-x;
	font-family: "MS Serif", "New York", serif;
}

.traditionalStyle .styleBox{
	border: 1px solid #000;
	background-color: #ddd;
	box-shadow: none;
}
.traditionalStyle .styleBox p{
	color: #333;	
}

/* Page Header Box */
.traditionalStyle .traditionalStyleDisplayOnly{
	display: block;
	margin: 0px auto;
	padding: 20px 0px;
}
.traditionalStyle .pageHeaderBox p:after{
	content: "The Attorney";
}
.traditionalStyle .pageHeaderBox p{
	font-family: Tahoma, Geneva, sans-serif;
	color: #333;
	text-align: center;
	padding: 15px;
	border-bottom: 2px solid #000;
	border-top: 2px solid #000;
	background-image: none;
	background-color: #7ecabe; /*turquoise */
	font-size: 1.8em;
}

/* All text blocks */
.traditionalStyle .textBlocksWrapper p{
	color: #444;
	font-size: .9em;
}

/* Individual text blocks */
.traditionalStyle .textBlock h3{
	font-family: Tahoma, Geneva, sans-serif;
	color: #333;
	padding: 10px;
	background-color: #7ecabe; /*turquoise */
	border-bottom: 2px solid #444;
	border-top: 2px solid #444;
}
.traditionalStyle .textBlock{
	text-align: justify;
	margin-top: 40px;
	padding: 0px 20px;
}

/** FUN **/
.funStyle .logoWrap{
	border-bottom: 3px solid #69CE56;
	z-index: -100;
}
.funStyle #onOffJumbotron{
	display: none;	
}
.funStyle{
	font-family: "Comic Sans MS", cursive;
}

/* Page Header Box */
/* For this style, the page header is an image
   in designs.html and is set here to display */
.funStyle .funStyleDisplayOnly{
	display: block;
}
.funStyle .funStyleDisplayOnly img{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.funStyle #streamers img{
	position: absolute;
	right: 50px;
	top: 350px;
	z-index: -20;	
}

/* Style Boxes */
.funStyle #buttonRow{
	margin:50px auto 0px;
}
.funStyle .styleBox{
	font-size: 1.2em;
}	
.funStyle #calmStyleButton{
	color: #FFCE00;
}
.funStyle #traditionalStyleButton{
	color: #69CE56;
}
.funStyle #funStyleButton{
	color: #C3C;
}
.funStyle #basicStyleButton{
	color: #06F;
}

/* All text blocks */
.funStyle .textBlocksWrapper{
	padding: 0px 50px 50px;
	/*background: url(../images/design_funBall.jpg) repeat-y; **/
}
.funStyle .textBlocksWrapper p{
	color: #464049;
	font-size: 1.1em;
}
/* Individual text blocks */
.funStyle .textBlock h3:before{
	content: url("../images/design_funBall.jpg");
}
.funStyle .textBlock h3:after{
	content: url("../images/design_funBall.jpg");
}
.funStyle .textBlock h3{
	text-align: left;
	color: #FA2722;	/* orange */
	font-family: 'banana chips', "Comic Sans MS", cursive;
	font-size: 2em;
}
.funStyle .textBlock{
	text-align: right;
	margin: 40px 300px 10px auto;
}
.funStyle .col-md-12{
	width: inherit;
}

/**  Breakpoint for repositioning textBlock headers on small devices ****/
@media (min-width : 320px) and (max-width : 560px){
	.funStyle .textBlock h3{
		text-align: center;
	}
}
	
/*  Breakpoint for using full width on columns
     Columns become too narrow under about 860 pixels **/
@media (max-width: 860px){
	.funStyle .col-md-12{
		width: 100%;
	}
/*  Also, streamers begin to interfere with text **/
	.funStyle #streamers img{
		display: none;
	}
}


/** BASIC **/
.basicStyle #onOffJumbotron{
	display: none;	
}

/* Page Header Box */
.basicStyle .pageHeaderBox{
	background-image: none;
}
.basicStyle .pageHeaderBox p:after{
	content: "The Minimalist";
}
.basicStyle .pageHeaderBox p{
	font-family: Tahoma, Geneva, sans-serif;
	color: #74A340;	
	text-align: center;
	padding: 15px;
	border-top: 2px solid #A52822;
	background-color: #fff;
	font-size: 1.8em;
}

/* Individual text blocks */
.basicStyle .textBlock h3:before{
	content: url("../images/design_basicBlueSquare.jpg") " " " ";
}

/*********  contact.html  *************************************************/
#contactPage .jumbotron{
	background-image: url(../images/contact_top.jpg);
	padding-bottom: 60px;
}
#contactPage .jumbotron p{
	width: 250px;
}

#contactForm{
	padding-top: 60px;
}
#contactForm label{
	/*font-weight: 500;*/
}
#formHeader{
	text-align: center;
}
#formHeader img{
	border: 2px solid #A52822;
}
#divResult,
.g-recaptcha{
	padding-left: 10px;
}
#divResult p{
	font-size: .9em;
	color: #A52822;
}

/** Thank you Page **/

#jumbotronThankyou h2{
	color: #444;
	font: bold 1.5em 'Existence-Light', Geneva, sans-serif;
}
#jumbotronThankyou p{
	color: #444;	
}

/*** Footer  **/
.footer{
	background-color: #efefef;
	margin: 50px auto;
	font-size: .9em;
	text-align: center;
	padding: 20px;
	clear: both;
}
.footer img{
/*	-webkit-transform: translateY(25%);
  	-ms-transform: translateY(25%);
  	transform: translateY(25%);		*/
}


/*  Responsive actions *******************************/


@media (max-width: 1250px){
	.calloutLongLine{			/*position longer callout back on normal line*/
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		transform: translateY(0%);
	}
}