/* ==== Google font ==== */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i');
 html,body { height: 100%; margin: 0px; padding: 0px; }
body {
	background: #392f2d;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 16px;
    color: #b1b1b1;
    line-height: 1.6em;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    color: #b1b1b1;
}

h1 {
	font-size:34px;
}

h3 {
	font-weight: 100;
	font-style:italic;
	font-size:17px;
}

h4,.showreel {
	font-weight:100;
	font-size: 21px; 
}
h4  { 
	text-transform:uppercase;
}
.row {
    background: rgba(0, 0, 0, 0.45);
    padding: 25px 0;  
    z-index: 5;
} .space{
    background: rgba(0, 0, 0, 0); 
	 }
div#wrapper>div>*:first-child { 
    position: relative;
}
.vertical_bottom {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: flex-end;
	min-height:90px;
}
p {
    margin-bottom: 20px;
    font-size: 16px;
}


a {
    color: #b1b1b1;
    word-wrap: break-word;
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #fafafa;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}
 
.btn {
  display: inline-block;
  padding: 10px 20px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
}

.btn-theme  {
  color: #b1b1b1;
  background-color: #4F92AF;
  border-color: #4F92AF;
  transition: background 0.3s;
}
.btn-theme:hover  {
  color: #b1b1b1;
  background-color: #5cacce;
  border-color: #5cacce;
} 

/* wrapper */

#wrapper {
	text-align: left;
	padding:  0  ;
	background: url(../img/main-bg.jpg);
	width: 100%;	
    height: 100%;
    background-size: cover;
    background: #222;
}



a.pull-right {
    margin-top: 5px;
}

#wrapper h1 { 
	color: #b1b1b1; 
	margin:0;
	letter-spacing: -2px;
}

h2.subtitle {
	color: #b1b1b1;
	font-size: 24px;
} div#wrapper:before {
    content: "";
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
    -webkit-background-size: 3px 3px;
    -moz-background-size: 3px 3px;
    background-size: 3px 3px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}#video-background { 
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: 0;
}
/* social */
.social {
    padding:  0 ;
	text-align:right;
}

.social a {
	display:block;
	text-align:right;  
    transition: all 0.3s;
}

.social a:hover {
	opacity:0.5;
}
 
@media (min-width: 768px){
a.pull-right { 
    margin-right: 5%;
}
.row.space >div+div:after {
    position: fixed;
    top: 25px;
    bottom: 25px;
    width: 1px;
    background: #ffF;
    content: "";
    margin-left: -15px;
    z-index: 555;
}
h3{ text-align:right;}

.row { 
    display: flex;
    align-content: stretch;
    align-items: stretch;
    justify-content: space-between;
}
.vertical_center {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
	min-height:90px;
}.vertical_bottom{ justify-content:flex-end; align-content:flex-end;}
.row:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    right: 0;
}
}