/* 
    Document   : main
    Created on : 16.Mar.2014, 23:41:42
    Author     : UlaÅŸ
    Description:
        Purpose of the stylesheet follows.
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,latin-ext);

root {
  display: block;
}
html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}
body {
  background-color: #f2f2f2;
  min-width: 900px;
}
.wrapper {
  width: 100%;
  margin: auto;
}
.header {
  padding-top: 34px;
  height: 116px;
  background-image: url(../assets/topbg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}
.header img {
  display: block;
  margin: auto;
}
.middle {
  width: 100%;
  height: 312px;
  background-image: url(../assets/middle.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #d70612;
}
.box-wrapper {
  margin: auto;
  display: table;
}
.box-wrapper.top {
  height: 143px;
  padding-top: 87px;
}
.box-wrapper.bottom {
  height: 143px;
  padding-top: 68px;
  padding-bottom: 50px;
}
.brand_box {
  position: relative;
  width: 229px;
  height: 143px;
  background-image: url(../assets/box.jpg);
  background-repeat: no-repeat;
  display: inline-block;
  margin-right: 8px;
}
.brand-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.selected .brand-overlay {
  background: -webkit-linear-gradient(
    180deg,
    red,
    blue
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    180deg,
    red,
    blue
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    180deg,
    red,
    blue
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 60%,
    #e5e5e5
  ); /* Standard syntax */
}
.content {
  text-align: center;
  color: #333333;
  padding: 23px;
  padding-bottom: 0px;
}
.content,
.content p {
  font-size: 17px;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.3em;
  color: #fff;
}
/* Footer */
#footer {
  width: 100%;
  background-color: #fff;
  margin: auto;
  font-size: 11.3px;
  line-height: 16px;
}
#footer .container {
  margin: auto;
  height: 165px;
  display: table;
}
#footer .brand {
  float: right;
  height: 165px;
  width: 440px;
  background-color: #ececec;
  background-image: url('../assets/logo.png');
  background-position: center;
  background-repeat: no-repeat;
}
#footer .social-btns {
  position: absolute;
  margin-left: -25px;
  margin-top: 32px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
#footer .social-btns a:hover {
  opacity: 0.75;
}
#footer .contact {
  max-height: 165px;
  min-width: 140px;
  display: table-cell;
  vertical-align: middle;
  font-size: 11px;
}
#footer .contact .title {
  font-weight: bold;
  font-size: 12px;
  padding-bottom: 15px;
}
#footer .contact a {
  color: #0da3a9;
  text-decoration: none;
}
#footer .contact a:hover,
#footer .contact a:active {
  color: #0c8d99;
}
/* End Footer */