@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Open+Sans+Condensed:300,300italic,700);

* { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; }

body {
	font-family: "Open Sans", sans-serif, Helvetica;
	font-weight: 300;
	letter-spacing: .5pt;
}

/******************/
/* Navigation Bar */
/******************/

.navbar-brand, li.ovs-title > a { font-family: "Open Sans Condensed", sans-serif; }
.navbar, .navbar-fixed-top { text-transform: uppercase; background: #FFF; }

/*****************/
/* Layout Styles */
/*****************/

.cols { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; }
.columns > * { display: inline-block; }

.one, .two, .three { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }

.no-gap { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; }
.gutter { -webkit-column-rule: 1px outset #666; -moz-column-rule: 1px outset #666; column-rule: 1px outset #666; }
.spanned { -webkit-column-span: all; -moz-column-span: all; column-span: all; display: block; }

img { vertical-align: middle; }
.wrapper { max-width: 1024px; margin-left: auto; margin-right: auto; }
.centered { text-align: center; margin-left: auto; margin-right: auto; }
.pad { padding: 15px; }
.justify { text-align: justify; }
.text-left { text-align: left;  }
.text-right { text-align: right; }
a, a:visited { color: #CCC; }
a:hover { color: #FFF; text-decoration: underline; }

.box-icon {
	display: inline-block;
	clear: both;
	height: 64px;
	margin: 0 auto;
}

/**********/
/* Header */
/**********/

header { padding: 15px; line-height: 50px; text-align: center; background: #000; color: #fff; font-size: 1.2em; }
header a, header a:visited { text-decoration: none; margin-left: 30px; background: #ff8243; font-weight: bold; text-transform: uppercase; color: #fff; padding: 10px 15px; border-radius: 5px; }
header a:hover { text-decoration: none; background: #fff; color: #ff8243;}

/************/
/* Sections */
/************/

section {
 	background-position: center center;
	background-size: cover;
	width:100%;
}

section h2 {
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: 1pt;
	padding-bottom: 15px;
	border-bottom: 2px dotted #CCC;
	display: inline-block;
	margin-bottom: 50px;
}

section .box h3 { text-transform: uppercase; font-size: 1.3em; font-weight: 700; margin-bottom: 15px }
section p.intro { padding: 0 0 30px 0; color: #888; width: 80%; font-size: 1.3em; font-style: italic; }

/************/
/* Wrappers */
/************/

#welcome 		.wrapper { }
#about 			.wrapper { padding: 50px 0; }
#our-dogs		.wrapper { padding: 100px 0; }
#our-litters	.wrapper { padding: 75px 0; }
#team 			.wrapper { padding: 75px 0; }
#contact		.wrapper { padding: 75px 0; }

/***************/
/* Backgrounds */
/***************/

#welcome { background-image: url(medias/welcome1.jpg); }
#our-dogs { background-image: url(medias/backgrounds/grass.jpg); }
#team { background-image: url(medias/backgrounds/stick.jpg); }

/********************/
/* Section: Welcome */
/********************/

#welcome { height:500px; }

#welcome h1 {
	color: #fff;
	background: rgba(0,0,0,.75);
	display: block;
	font-size: 1.3em;
	font-weight: 100;
	text-transform: uppercase;
	text-align: center;
}

#welcome h1 .kennel-name { font-weight: 400; display: block; }

/******************/
/* Section: About */
/******************/

#about .box-icon { margin-bottom: 15px; }

/*********************/
/* Section: Our Dogs */
/*********************/

#our-dogs { color: #FFF; }

#our-dogs .box { max-width: 300px; color: #FFF; margin-bottom: 50px; }
#our-dogs .picture { height: 200px; width: 200px; border-radius: 100px; background-position: center center; background-size: cover; margin: 0 auto 30px auto; }
#our-dogs .box p { width: 90%; margin: 0 auto; background: rgba(0,0,0,.3); }

#our-dogs .male .picture { border: 5px solid #0099CC; }
#our-dogs .female .picture { border: 5px solid #ff1d8e; }
#our-dogs .male h3 { color: #0099CC; }
#our-dogs .female h3 { color: #ff1d8e; }

#dog1   .picture { background-image: url(medias/dogs/dog1.jpg); }
#dog2   .picture { background-image: url(medias/dogs/dog2.jpg); }
#dog3   .picture { background-image: url(medias/dogs/dog3.jpg); }
#dog4   .picture { background-image: url(medias/dogs/dog4.jpg); }
#dog5   .picture { background-image: url(medias/dogs/dog5.jpg); }
#dog6   .picture { background-image: url(medias/dogs/dog6.jpg); }

/*****************/
/* Section: Team */
/*****************/

#team { color: #FFF; }

#team .box .picture  { border: 5px solid #fff; background-position: center center; background-size: cover; width: 350px; height: 350px; border-radius: 350px; color: #FFF; margin-bottom: 30px; }

#team #person1 .picture { background-image: url(medias/team/person1.jpg); }
#team #person2 .picture { background-image: url(medias/team/person2.jpg); }

#team .box { opacity: .6; }
#team .box:hover { opacity: 1; }
#team .box h3 { margin: 0 auto; font-size: 1.5em; margin-bottom: 30px; }
#team .box p { max-width: 300px; margin: 0 auto; font-size: 1.1em; text-align: center; }

/* Pedigree Tree */

.tree {
	position: relative;
	width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.tree .male { color: #0099CC; }
.tree .female { color: #ff1d8e; }
.tree 	.root { color: #000; }

.branch {
  position: relative;
  margin-left: 250px;
}
.branch:before {
  content: "";
  width: 50px;
  border-top: 2px solid #000;
  position: absolute;
  left: -100px;
  top: 50%;
  margin-top: 1px;
}

.entry {
  position: relative;
  min-height: 60px;
}
.entry:before {
  content: "";
  height: 100%;
  border-left: 2px solid #000;
  position: absolute;
  left: -50px;
}
.entry:after {
  content: "";
  width: 50px;
  border-top: 2px solid #000;
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: 1px;
}
.entry:first-child:before {
  width: 10px;
  height: 50%;
  top: 50%;
  margin-top: 2px;
  border-radius: 10px 0 0 0;
}
.entry:first-child:after {
  height: 10px;
  border-radius: 10px 0 0 0;
}
.entry:last-child:before {
  width: 10px;
  height: 50%;
  border-radius: 0 0 0 10px;
}
.entry:last-child:after {
  height: 10px;
  border-top: none;
  border-bottom: 2px solid #000;
  border-radius: 0 0 0 10px;
  margin-top: -9px;
}
.entry.sole:before {
  display: none;
}
.entry.sole:after {
  width: 50px;
  height: 0;
  margin-top: 1px;
  border-radius: 0;
}

.label {
  display: block;
  min-width: 150px;
  padding: 5px 0px;
  line-height: 20px;
  font-size: 15px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
}

/********************/
/* Section: Contact */
/********************/

#contact { box-shadow: 0px 10px 5px -2px rgba(50, 50, 50, 0.75); }
#contact .box-icon { margin: 0 0 15px 0; }

/************************/
/* Section: Google Maps */
/************************/

#gmaps { width: 100%; height: 300px; background: #000; }
#gmaps #canvas { width: 100%; height: 300px; opacity: .7; }

/*******************/
/* Section: Footer */
/*******************/

footer { text-align: center; background: #000; color: #999; }

/***********************/
/* Styling for Desktop */
/***********************/

@media (min-width: 768px) {

	body { padding-top: 100px; }
	.pad { padding: 30px; }
	.box.pad { padding: 15px; }
	.two { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
	.three { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }


	#welcome h1 { font-size: 2em; display: inline-block; margin: 100px 100px; float: right; text-align: right; }
	#welcome h1 .kennel-name { font-weight: 400; display: block; }

	#our-dogs .box { width: 500px; }
	
	.navbar { text-align: center; min-height: 100px; }

    .navbar-nav>li>a {
		padding: 0 15px;
		line-height: 100px;
		height: 100px;
		
		color: rgba(0,0,0,.5);
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 1pt;
	}


	.navbar .navbar-nav > li > a:hover,
	.navbar .navbar-nav > li > a:focus {
    	background-color: transparent;
    	color: rgba(0,0,0,1);
	}

	.navbar > .container .navbar-brand,
	.navbar > .container-fluid .navbar-brand {
		margin: 0;
		display: none;
	}

	.navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }

    li.ovs-title > a { font-size: 20px; font-weight: 100; }
    li.ovs-logo a img { display:block; width: 100px; height: 100px; }
}

/***********************/
/* Styling for Mobiles */
/***********************/

@media (max-width: 990px) { li.ovs-logo { display: none; } .navbar-nav>li>a { padding: 0 10px; } }

@media (max-width: 767px) {

	body { padding-top: 50px; }

	.navbar-toggle { 
		background: #CCC;
		color: #fff;
	}
	.navbar-toggle .icon-bar { background: #000; }
	.navbar-collapse { background: #fff; }
	.navbar-brand {  }
	li.ovs-logo, li.ovs-title { display: none; }

}