/* Define some custom fonts */
@font-face {
  font-family: 'BebasNeue';
  src: url('../font/bebasneue-webfont.eot');
  src: url('../font/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/bebasneue-webfont.woff') format('woff'),
    url('../font/bebasneue-webfont.ttf') format('truetype'),
    url('../font/bebasneue-webfont.svg#NunitoRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Carme';
  font-style: normal;
  font-weight: 400;
  src: local('Carme Regular'), local('Carme'), url(http://themes.googleusercontent.com/static/fonts/carme/v4/Upg28fsDDYxCiFrWVodtfA.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/jIXlqT1WKafUSwj6s9AzV6XnXbwdDC8wAz6IIzmCDUP3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff');
}

/* Main definitions */
* {outline: none !important;}
body {background-color: #edeff0; font-family: 'Open Sans Condensed', sans-serif;}
p {text-align: justify; font-size: 13px; color: #888; font-size: 15px;}
strong { color: #666; }
strong.white { color: inherit; }
.bg-blue {background: url('../img/bg-black.png') no-repeat scroll center top #35383f;}
.bg-red {background: url('../img/bg-red.png') repeat fixed center center #d8230e;}
.dotted-black {background: url('../img/bg-border-dotted-black.png') repeat-x scroll 0 100% transparent;}
.dotted-black-up {background: url('../img/bg-border-dotted-black.png') repeat-x scroll 0 0 transparent;}
.dotted-white {background: url('../img/bg-border-dotted-white.png') repeat-x scroll 0 100% transparent;}
.dotted-white-up {background: url('../img/bg-border-dotted-white.png') repeat-x scroll 0 0 transparent;}
.head h1 {font-family: BebasNeue; font-size: 50px; font-weight: normal; color: #35383f; text-transform: uppercase; padding-bottom: 60px;}
.bg-red .head h1, .bg-red p {color: #fff;}

/* Navbar */
#navbar {background: url('../img/bg-navbar.png') repeat scroll 0 0 transparent;}
#navbar .container {padding-top: 50px; padding-bottom: 50px;}
#brand {font-family: BebasNeue; font-size: 70px; color: #35383f; text-transform: uppercase;}
#topbar {position: absolute; top: 0; left: 0; right: 0; height: 4px;}
#topbar-left {position: absolute; left: 0; right: 50%; height: 4px; background-color: #d8230e;}
#topbar-right {position: absolute; left: 50%; right: 0; height: 4px; background-color: #35383f;}

/* Carousel */
#home {padding-top: 140px;}
.carousel-inner p {text-shadow: 1px 1px 1px #fff;}
.carousel-inner h1 {padding-bottom: 40px;}
.carousel-image {border-radius: 150px;}

/* Main keys section */
#main-keys .container {padding: 30px 0;}
.circle-white {padding: 0 20px; background-color: #fff; width: 200px; height: 240px; border-radius: 150px; margin: 0 auto; border: 10px solid #35383f; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 1s; -o-transition: all 0.5s;}
.circle-white:hover {border: 10px solid #d8230e; -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.circle-white .icon {border-radius: 150px; display: block; width: 64px; height: 64px; margin: 30px auto 0; background-repeat: no-repeat; background-color: transparent; background-position: 50% 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
.circle-white:hover .icon {background-position: 50% 100%;}
.circle-white h3 {font-family: Carme; font-size: 18px; text-align: center; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
.circle-white:hover h3 {color: #d8230e;}
.circle-white p {font-size: 14px; text-align: center; color: #6f7583;}

/* Services section */
#services .container {padding: 60px 0;}

/* Portfolio section */
#portfolio .container {padding: 60px 0;}
#portfolio .dotted-white {padding-bottom: 50px}
#portfolio .portfolio {display: inline-block; margin: 10px; border-radius: 150px; width: 150px; overflow: hidden; padding: 5px; background-color: #fff; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
#portfolio .portfolio img {border-radius: 150px; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
#portfolio .portfolio:hover {border-radius: 0; cursor: pointer; -webkit-transform: scale(1.2); -moz-transform: scale(1.2);}
#portfolio .portfolio:hover img {border-radius: 0;}
#portfolio h5 {color: #fff; text-transform: uppercase; font-family: BebasNeue; font-weight: normal; font-size: 22px; margin: 20px 0;}

/* About section */
#about .container {padding: 60px 0;}
.person {float: left; text-align: center; margin-top: -50px; border: 10px solid #35383f; background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden; width: 270px; height: 270px; border-radius: 150px; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 1s; -o-transition: all 0.5s;}
.person-desc {width: 270px; height: 75px; width: 270px; margin-top: 200px; background: url('../img/bg-person-black.png') repeat scroll 0 0 transparent; overflow: hidden;}
.person-desc h2 {margin-top: 5px; margin-bottom: -5px; text-align: center; font-family: BebasNeue; font-size: 30px; color: #fff; text-transform: uppercase; font-weight: normal;}
.person-desc p {text-align: center; font-size: 11px; color: #fff; font-style: italic;}
.person-active {z-index: 100; border-color: #d8230e;}
.person-active .person-desc {background: url('../img/bg-person-red.png') repeat scroll 0 0 transparent;}

/* Contact section */
#contact .container {padding: 25px 0;}
#contact h3 {color: #fff; font-size: 18px; line-height: 18px; margin: 0 0 5px 0;}
#contact p {line-height: 22px;}
#contact p img {vertical-align: middle; margin-top: -2px; margin-right: 2px;}
#contact-form {overflow: hidden; margin: 0;}
#contact-form label {color: #fff; font-weight: bold;}
#contact-form input[type="text"], #contact-form textarea {min-width: 100%; border: 1px solid #3c3f46; background-color: #2a2b30; padding: 10px; box-shadow: 10px 10px 10px #232529 inset; border-radius: 0 !important;}
#contact-form textarea {height: 96px;}
#contact-form input[type="text"]:focus, #contact-form textarea:focus {box-shadow: 10px 10px 10px #232529 inset, 0 0 8px #87898D;}
#contact-form .error {box-shadow: 10px 10px 10px #232529 inset, 0 0 8px #d8230e !important; border: 1px solid #d8230e !important;}
#contact-form input[type="submit"] {position: absolute; background: url('../img/icons/mail-white.png') no-repeat scroll 50% 50% #d8230e; color: #fff; padding: 10px 0; width: 50px; right: -72px; top: 50%; border: 0; margin-top: -10px}
#contact-form input[type="submit"]:hover {opacity: 0.8;}
#contact-form .span4 {position: relative;}

/* Footer section */
#footer .container {padding: 30px 0;}
#footer p {text-align: center; text-transform: uppercase; font-size: 12px; color: #b2b3b4; margin: 0;}

/* Buttons */
.button {cursor: pointer; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.button a {position: relative; display: block; float: left; height: 46px; text-align: center; line-height: 46px; padding: 0 15px;}
.button a.button-red {background-color: #d8230e}
.button a.button-black {background-color: #35383f; color: #fff; font-size: 13px; font-family: Carme; text-shadow: 1px 1px 1px #2c2f34; text-decoration: none; text-transform: uppercase; font-weight: bold;}
.button:hover {opacity: 0.8;}