@CHARSET "UTF-8";

/* IMPORT CSS-FILES */
@import url("rm-bubbles.css");
@import url("rm-buttons.css");

/* 
 * Robert Metz - Development & Photography
 * 
 * Main CSS File 
 * 
 * ColorScheme
 *
 * 	BlackGray: 	#1f1f1f => rgba(31, 31, 31, 1)
 * 	BgGray: 	#404040 => rgba(64, 64, 64, 1)
 * 	Gray: 		#c9c9c9 => rgba(201, 201, 201, 1)
 * 	LightGray: 	#e3e3e3 => rgba(227, 227, 227, 1)
 * 	White: 		#fefefe => rgba(254, 254, 254, 1)
 *
 *  DarkBlue:	#0e739d => rgba(14, 115, 157, 1)
 * 	Blue: 		#89bdd3 => rgba(137, 189, 211, 1)
 * 	LightBlue: 	#9ad3de => rgba(154, 211, 222, 1)
 * 
 * 	Yellow:		#f2b632 => rgba(242, 182, 50, 1)
 *
 *  Red:		#a94442 => rgba(169, 68, 66, 1);
 *  Green:		#3C763D => rgba(60, 118, 61, 1)
 * 
 * Based on Grayscale v3.3.7+1 (http://startbootstrap.com/template-overviews/grayscale)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */
/* GENERAL */
html {
	width: 100%;
	height: 100%;
	background-color: #fefefe;
}

body {
	width: 100%;
	height: 100%;
	font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #1f1f1f;
	background-color: #fefefe;
	
	opacity: 1;
    transition: 1s opacity;
	
	webkit-tap-highlight-color: rgba(254, 254, 254, 0.2);
}

body.fade-out {
    opacity: 0;
    transition: none;
}

section {
	min-height: 1400px;
}

/* SELECTION */
::-moz-selection {
	text-shadow: none;
	background: #89bdd3;
	background: rgba(14, 115, 157, 0.5);
}
::selection {
	text-shadow: none;
	background: #89bdd3;
	background: rgba(14, 115, 157, 0.5);
}
img::selection {
	background: transparent;
}
img::-moz-selection {
	background: transparent;
}

/* HEADLINES */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 35px;
	text-transform: uppercase;
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
}

/* PARAGRAPHS */
p {
	margin: 0 0 25px;
	font-size: 18px;
	line-height: 1.5;
}
@media (min-width: 768px) {
	p {
		margin: 0 0 35px;
		font-size: 20px;
		line-height: 1.6;
	}
}

/* LINKS */
a {
	color: #0e739d;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
a:hover,
a:focus {
	text-decoration: none;
	color: #89bdd3;
}
a.white {
	color: rgba(201, 201, 201, 1);
}
a.white:hover,
a.white:focus {
	color: rgba(201, 201, 201, 0.8);
}
a.yellow {
	color: rgba(242, 182, 50, 1);
}
a.yellow:hover,
a.yellow:focus {
	color: rgba(242, 182, 50, 0.8);
}

a.network {
	margin: 0 10px;
}
a span.network-name {
	display: none;
}

a.back-to-top {
    color: rgba(201, 201, 201, 0.9);
}
a.back-to-top:hover {
    color: rgba(31, 31, 31, 0.7);
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}

/* TOOLTIP */
.tooltip.left .tooltip-arrow {
	border-left-color: rgba(31, 31, 31, 0.7);
}

.tooltip-inner {
	background-color: rgba(31, 31, 31, 0.7);
}

/* TYPOGRAPHY */
.light {
	font-weight: 400;
}

address {
	padding-bottom: 20px;
    font-size: 20px;
    line-height: 1.6;	
}

/* NAVIGATION */
.navbar-custom {
	margin-bottom: 0;
	border-bottom: 1px solid rgba(254, 254, 254, 0.3);
	text-transform: uppercase;
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #fefefe;
}
.navbar-custom .navbar-toggle {
	color: #1f1f1f;
	background-color: rgba(254, 254, 254, 0.2);
	font-size: 12px;
}
.navbar-custom .navbar-toggle:focus,
.navbar-custom .navbar-toggle:active {
	outline: none;
}
.navbar-custom .navbar-brand {
	font-weight: 700;
}
.navbar-custom .navbar-brand:focus {
	outline: none;
}
.navbar-custom a {
	color: #fefefe;
}
.navbar-custom .nav li a {
	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.3s ease-in-out;
	transition: background 0.3s ease-in-out;
}
.navbar-custom .nav li a:hover {
	color: rgba(254, 254, 254, 0.6);
	outline: none;
	background-color: transparent;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
	outline: none;
	color: rgba(254, 254, 254, 0.6);	
	background-color: transparent;
}
.navbar-custom .nav li.active {
	outline: none;
}
.navbar-custom .nav li.active a {
	background-color: rgba(254, 254, 254, 0.6);
}
.navbar-custom .nav li.active a:hover {
	color: rgba(254, 254, 254, 0.4);
}
.navbar-custom .toolbar {
	margin-right: 1.4em;
}
@media (min-width: 768px) {
	.navbar-custom {
		padding: 20px 0;
		border-bottom: none;
		letter-spacing: 1px;
		background: transparent;
		-webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
		-moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
		transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
	}
	.navbar-custom .toolbar {
		margin: 1em 1.4em 0 0;
	}
	.navbar-custom .toolbar a:hover {
		color: rgba(254, 254, 254, 0.6);
	}	
	.navbar-custom.top-nav-collapse {
		padding: 0;
		background: #fefefe;
		border-bottom: 1px solid rgba(254, 254, 254, 0.3);
	}
	.navbar-custom.top-nav-collapse a {
		color: #1f1f1f;
	}
	.navbar-custom.top-nav-collapse .toolbar {
		margin: 1em 1.4em 0 0;
	}
	.navbar-custom.top-nav-collapse .toolbar a:hover {
		color: rgba(31, 31, 31, 0.6);
	}
	.navbar-custom.top-nav-collapse li a:hover,	
	.navbar-custom.top-nav-collapse li a:focus,	
	.navbar-custom.top-nav-collapse li a:active,	
	.navbar-custom.top-nav-collapse li.active a {
		color: rgba(31, 31, 31, 0.6);
	}
	.navbar-custom.top-nav-collapse li.active a:hover {
		color: rgba(31, 31, 31, 0.4);
	}
}
@media (max-width: 768px) {
	.navbar-custom a {
		color: #1f1f1f;
	}
	.navbar-custom .navbar-brand {
		color: #1f1f1f;
	}
	.navbar-custom .toolbar {
		margin: 18px 24px 0 0;
		font-size: 12px;
	}
	.navbar-custom .nav li a:focus,
	.navbar-custom .nav li a:active {
		outline: none;
		color: rgba(31, 31, 31, 0.6);	
		background-color: transparent;
	}
	.navbar-custom .nav li.active a {
		color: rgba(31, 31, 31, 0.6);
	}
	.navbar-custom .nav li.active a:hover {
		color: rgba(31, 31, 31, 0.4);
	}
}

/* LOGO */
.logo span {
	margin-right: -.24em;
	display: inline-block; 
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

/* INTRO PAGE */
.intro {
	display: table;
	width: 100%;
	height: auto;
	padding: 100px 0;
	text-align: center;
	color: #fefefe;
	background: #404040 url(../img/Robert-Metz_Intro.jpg) no-repeat scroll bottom center;
	background-size: cover;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}
.intro .intro-body {
	display: table-cell;
	vertical-align: middle;
}
.intro .intro-body .brand-heading {
	font-size: 40px;
}
.intro .intro-body .intro-text {
	font-size: 18px;
}
@media (min-width: 768px) {
	.intro {
		height: 100%;
		padding: 0;	
	}
	.intro .intro-body .brand-heading {
		font-size: 80px;
	}
	.intro .intro-body .intro-text {
		font-size: 26px;
	}
}

/* CONTENT */
.content-section {
	padding-top: 100px;
}

.section-header {
	padding-bottom: 60px;
}
@media (min-width: 768px) {
	.section-header {
		padding-bottom: 120px;
	}
}

/* DEVELOPMENT */
.clients {
	margin: 60px 0 60px 0;
}

/* PHOTOGRAPHY */
section#photography {
	min-height: auto;
}
#photography {
	color: rgba(254, 254, 254, 0.8);
	background-color: #404040;
}
@media (min-width: 768px) {
	section#photography {
		min-height: 1400px;
	}
}

#photoCarousel {
	margin: 0 auto;
	max-width: 1000px;
}

.carousel-control.left,
.carousel-control.right {
	margin-bottom: 105px;
    background-image: none;
}
@media (min-width: 768px) {
	.carousel-control.left {
		margin-left: -120px;
	}

	.carousel-control.right {
		margin-right: -120px;
	}
}

.carousel-inner { 
	padding-bottom: 120px;
}

.carousel-inner img {
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

.carousel-caption {
    width: 90%;
    margin: auto;
    top: 270px;
    left: 0;
    right: 0;
	color: rgba(254, 254, 254, 0.8);
}
.carousel-caption h3 {
	margin: 0;
}

.carousel-indicators {
    bottom: 80px;
}

.carousel-indicators .active {
    background-color: rgba(254, 254, 254, 0.9);
}

.carousel-indicators li {
	cursor: default;
	border: none;
    background-color: rgba(254, 254, 254, 0.6);
}

@media screen and (min-width: 768px) {
	.carousel-caption {
		top: auto;
		bottom: -180px;
	}
	.carousel-indicators {
	    bottom: 75px;
	}
}

/*
inspired from http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/* CONTACT */
.contact {
	padding-bottom: 30px;
}

form {
	padding: 0 15px;
	font-size: 20px;
    line-height: 1.6;
}

.form-control {
    font-size: 20px;
    line-height: 1.6;	
    color: #1f1f1f;
    background-color: #fefefe;
	border: 1px solid #0e739d;
	border-top: none;
	border-right: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control:focus {
	border-color: #89bdd3;
	box-shadow: -2px 2px 2px 0 rgba(137, 189, 211, 0.7);
	-moz-box-shadow: -2px 2px 2px 0 rgba(137, 189, 211, 0.7);
	-webkit-box-shadow: -2px 2px 2px 0 rgba(137, 189, 211, 0.7);
	-khtml-box-shadow: -2px 2px 2px 0 rgba(137, 189, 211, 0.7);
}

.has-success .form-control {
    border-color: #3c763d;
	box-shadow: none;
}
.has-success .form-control:focus {
	box-shadow: -2px 2px 2px 0 rgba(60, 118, 61, 0.7);
	-moz-box-shadow: -2px 2px 2px 0 rgba(60, 118, 61, 0.7);
	-webkit-box-shadow: -2px 2px 2px 0 rgba(60, 118, 61, 0.7);
	-khtml-box-shadow: -2px 2px 2px 0 rgba(60, 118, 61, 0.7);
}

.has-error .form-control {
    border-color: #a94442;
	box-shadow: none;
}
.has-error .form-control:focus {
	box-shadow: -2px 2px 2px 0 rgba(169, 68, 66, 0.7);
	-moz-box-shadow: -2px 2px 2px 0 rgba(169, 68, 66, 0.7);
	-webkit-box-shadow: -2px 2px 2px 0 rgba(169, 68, 66, 0.7);
	-khtml-box-shadow: -2px 2px 2px 0 rgba(169, 68, 66, 0.7);
}

#map {
	margin-top: 40px;
	height: 650px;
}

/* FOOTER */
footer {
	color: rgba(64, 64, 64, 0.7);
	padding: 30px 0;
}

footer a {
	color: rgba(64, 64, 64, 0.7);
}
footer a:hover {
	color: rgba(64, 64, 64, 0.4);
}

footer p {
	margin: 0;
}

footer .row div {
	padding: 10px 0;
	text-align: center;
}
@media (min-width: 768px) {
	footer .row div {
		padding: 0;
		text-align: inherit;
	}

	footer .row div.text-left {
		text-align: left;
	}

	footer .row div.text-right {
		text-align: right;
	}
}