/*mains*/
body {
	padding-top:70px; /* Required for .navbar-fixed-top class */
	background-color: #f8f8f8;
}
.portfolio-image {
    margin-bottom: 25px; /* TO HAVE SOME SPACE BELOW CIRCLED SITE ITEMS*/
}

.navbar-default {
	/* Permalink - use to edit this gradient: http://colorzilla.com/gradient-editor/#c02227+50,f6290c+50,f16f5c+50,e73827+50,e73827+50,c02227+50,f02f17+50 */
	background: #c02227; /* Old browsers */
	background: -moz-linear-gradient(45deg, #c02227 50%, #f6290c 50%, #f16f5c 50%, #e73827 50%, #e73827 50%, #c02227 50%, #f02f17 50%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, #c02227 50%,#f6290c 50%,#f16f5c 50%,#e73827 50%,#e73827 50%,#c02227 50%,#f02f17 50%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, #c02227 50%,#f6290c 50%,#f16f5c 50%,#e73827 50%,#e73827 50%,#c02227 50%,#f02f17 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c02227', endColorstr='#f02f17',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-brand {
	color: #fff;
}
.navbar-default .navbar-brand:hover {
	color: #fff;
}
.navbar-default .navbar-nav > li > a:hover {
	color: #e5e5e5;
}

/*h5 links for each sub site link*/
.txt50p {
	font-size: 0.7em;
	color: #333; /*makes the icons grey, messy but class only used here anyway*/
}
.redtxt a {
	color: #c51b00;
}
.bluetxt a {
	color: #002b85;
}

/*animate underline on h5 links*/
/*red - pyrenees*/
h5.redtxt > a {
  position: relative;
  color: #c51b00;
  text-decoration: none;
}
h5.redtxt > a:hover {
  color: #c51b00;
}
h5.redtxt > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #c51b00;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
h5.redtxt > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
/*blue - underwater*/
h5.bluetxt > a {
  position: relative;
  color: #002b85;
  text-decoration: none;
}
h5.bluetxt > a:hover {
  color: #002b85;
}
h5.bluetxt > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #002b85;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
h5.bluetxt > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}




/*circles*/
.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 20px;
}

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

.ch-info-wrap, 
.ch-info{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
}

.ch-info-wrap {
	top: 20px;
	left: 20px;
	background: #f9f9f9 url(../img/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	
	-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}

.ch-info .ch-info-front {
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.ch-info .ch-info-back {
	opacity: 0;
	background: #333;
	pointer-events: none;
	
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	
	-webkit-transition: all 0.4s ease-in-out 0.2s;
	-moz-transition: all 0.4s ease-in-out 0.2s;
	-o-transition: all 0.4s ease-in-out 0.2s;
	-ms-transition: all 0.4s ease-in-out 0.2s;
	transition: all 0.4s ease-in-out 0.2s;
}

.ch-img-1 { 
	background-image: url(../img/logo-pyrenees.png);
}

.ch-img-2 { 
	background-image: url(../img/logo-underwaterphotography.png);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 80px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px 0;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: #d8d8d8;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: #fff;
}

.ch-item:hover .ch-info-front {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	
	opacity: 0;
} 

.ch-item:hover .ch-info-back {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
	opacity: 1;
	pointer-events: auto;
}