/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font: inherit;
	font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-spacing: 0;
	border-collapse: collapse;
}

*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Clearfix For modern browsers */
.clearfix:before,
.clearfix:after {
  	display: block;
  	overflow: hidden;
  	height: 0;
	content: ".";
}

.clearfix:after {
    clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom: 1;
}

/* Fonts */

/* @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700); */

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);


/* Scafolfing */

body {
	font-size: 100%;
	font-weight: 300;
	font-family: 'Lato', sans-serif;
	overflow-x: none;
}

#preloader {
	position: fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:9999; /* makes sure it stays on top */
	background-color: #181a1f; /* change if the mask should have another color then white */
}

#status {
	position:absolute;
	top:50%; /* centers the loading animation vertically one the screen */
	left:50%; /* centers the loading animation horizontally one the screen */
	margin:-100px 0 0 -100px; /* is width and height divided by two */
	width:200px;
	height:200px;
	background-image:url(../img/ajax-loader.gif); /* path to your loading animation */
	background-position:center;
	background-repeat:no-repeat;
}

.video-background {
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100% !important;
}
.video-background video { 
	min-width: 1280px;
	min-height: 100%; 
}


.color-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
    zoom: 1;
}

.content {
	position: fixed;
	z-index: 10;
	padding: 200px 10px;
	width: 100%;
	color: #fff;
	text-align: center;
}

.content h1 {
	text-transform: uppercase;
	font-weight: 300;
	font-size: 380%;
}

.content hr {
	margin-top: 70px;
	margin-bottom: 70px;
	width: 70px;
	height: 4px;
	border: none;
	background: #fff;
}

.content h2.sub-title {
	text-transform: uppercase;
	font-weight: 300;
	font-size: 125%;
	line-height: 1.7em;
}

/* Arrow */

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-ms-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.arrow {
	position: fixed;
	bottom: 30px;
	left: 50%;
	display: block;
	margin-left: -10px;
	width: 40px;
	height: 40px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
	background-size: contain;
}

.bounce {
	-webkit-animation: bounce 2s infinite;
	-moz-animation: bounce 2s infinite;
	-ms-animation: bounce 2s infinite;
	animation: bounce 2s infinite;
}

section.two {
	position: relative;
	z-index: 11;
	width: 100%;
	background: #f2f2f2;
}

.container {
	margin: 0 auto;
	padding: 120px 0px;
	max-width: 1295px;
	text-align: center;
}

.container h2 {
	color: #454545;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 200%;
}

section.two .container p {
	font-weight: 300;
	font-size: 162%;
	line-height: 1.7em;
}

hr.sec-two {
	margin-top: 60px;
	margin-bottom: 70px;
	width: 70px;
	height: 4px;
	border: none;
	background: #39B4E0;
}

section.three {
	position: relative;
	z-index: 11;
	min-height: 600px;
	width: 100%;
	background: #fff;
}

section.four {
	position: relative;
	z-index: 11;
	padding-bottom: 70px;
	min-height: 600px;
}

section.four h2 {
	color: #fff;
}

section.four hr {
	margin-top: 60px;
	margin-bottom: 70px;
	width: 70px;
	height: 4px;
	border: none;
	background: #fff;
}

section.five {
	position: relative;
	z-index: 100;
	min-height: 200px;
	background: #fff;
}

footer {
	position: relative;
	z-index: 11;
	margin-bottom: -22px;
	background: #F2F2F2;
}

footer .container {
	padding: 50px 0px;
}

footer p.copyright {
	text-align: center;
}

/* Portfolio Items */

.rb-grid {
	position: relative;
	z-index: 12;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}

.rb-grid li {
	position: relative;
	display: block;
	float: left;
	overflow: hidden;
	margin: 0.5%;
	width: 23%;
	height: 14em;
	background: #39B4E0;
	color: #fff;
	cursor: pointer;
}

.rb-grid li.rb-span-2 {
	width: 47%;
}

.rb-grid li.rb-span-4 {
	width: 99%;
}


/* Hover Effect */

.rb-grid img {
   position: relative;
   display: block;
}

span.mask {
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 231, 179, 0.3);
   opacity: 0;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   transition: all 0.5s linear;
}

span.mask h2 {
   position: relative;	
   margin: 20px 40px 0px 40px;
   padding: 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: rgba(0, 0, 0, 0.8);
   background: transparent;
   color: #fff;
   color: #333;
   text-align: center;
   text-transform: uppercase;
   font-size: 17px;
   opacity: 0;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
}

span.mask p {
   position: relative;
   padding: 10px 20px 20px;
   color: #fff;
   color: #333;
   text-align: center;
   font-style: italic;
   font-size: 80%;
   opacity: 0;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
}

span.mask a.info {
   display: inline-block;
   padding: 12px 24px;
   border: 2px solid #fff;
   color: #fff;
   text-decoration: none;
   text-transform: uppercase;
    opacity: 0;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
}

span.mask a.info:hover {
   background: #fff;
   color: #39B4E0;
}

ul.rb-grid img {
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -ms-transform: scaleY(1);
   -o-transform: scaleY(1);
   transform: scaleY(1);
}


li:hover img {
   opacity: 0;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -ms-transform: scale(10);
   -o-transform: scale(10);
   transform: scale(10);
}

li:hover span.mask {
   opacity: 1;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
}

span.mask:hover h2, span.mask:hover p,span.mask:hover a.info {
   opacity: 1;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}

/* Contact Form */

#contact_form{
	margin-right: auto;
	margin-left: auto;
	width:650px;
	color: #666666;
	font-size: 100%;
}

#contact_form p.legend{
	margin-bottom: 30px;
	color: #fff;
	text-align: center;
	font-weight: 300;
	font-size: 130%;
}
#contact_form label{
	display: block;
	margin-bottom:5px;
}
#contact_form label span{
	display: none;
	float:left;
	width:100px;
}
#contact_form input {
	margin-bottom: 20px;
	padding: 12px;
	width: 100%;
	height: 35px;
	border: 2px solid #fff;
	background: none;
	color: #fff;
	font-size: 110%;

	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
}

#contact_form textarea{
	margin-bottom: 16px;
	padding: 12px;
	width: 100%;
	height:150px;
	border: 2px solid #fff;
	border-radius: 3px;
	background: none;
	color: #fff;
	font-size: 110%;

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

#contact_form input:hover,
#contact_form textarea:hover {
	border: 2px solid #cecece;
}

#contact_form input:active,
#contact_form input:focus,
#contact_form textarea:active,
#contact_form textarea:focus {
	outline: none;
	border: 2px solid #008ED6;
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

button.submit_btn {
	padding: 20px;
	width: 105%;
	border: none;
	border: 2px solid #fff;
	background: #fff;
	color: #000;
	text-transform: uppercase;
	font-size: 120%;
	cursor: pointer;

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;

}

button.submit_btn:hover {
	border: 2px solid #39B4E0;
	background: #39B4E0;
	color: #fff;
}

.success {
	margin-bottom: 20px;
	padding: 20px 10px;
	width: 101%;
	background: #2eb624;
	color: #fff;
	font-weight: 300;
	font-size: 130%;
}

.error {
	margin-bottom: 20px;
	padding: 20px 10px;
	width: 101%;
	background: #FFDFDF;
	font-size: 130%;

}

.icons-container {
	margin-left:  10px;
}

.icons-container a {
	margin-right: 20px;
	color: #fff;
}

.icons-container i.fa {
	padding: 20px;
	border: 2px solid #39B4E0;
	border: 2px solid #39B4E0;
	background: #fff;
	color: #39B4E0;
	font-size: 250%;

	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-ms-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}

.icons-container i.fa-behance {
	font-size: 220%;
	padding-top: 25px;
}

.icons-container i.fa:hover {
	border: 2px solid #39B4E0;
	background: #39B4E0;
	color: #fff;
	animation: animationFrames linear 1s;
	animation-iteration-count: 1;
	transform-origin: ;
	-webkit-animation: animationFrames linear 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: ;
	-moz-animation: animationFrames linear 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: ;
	-o-animation: animationFrames linear 1s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: ;
	-ms-animation: animationFrames linear 1s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: ;
}

@keyframes animationFrames{
  0% {
    left:0px;
    top:0px;
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  10% {
    transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  20% {
    transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  30% {
    transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  40% {
    transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  50% {
    transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  60% {
    transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  70% {
    transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  80% {
    transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  90% {
    transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  100% {
    left:0px;
    top:0px;
    opacity:1;
    transform:  rotate(0deg) scaleX(1.2) scaleY(1.2) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    left:0px;
    top:0px;
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  10% {
    -moz-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  20% {
    -moz-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  30% {
    -moz-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  40% {
    -moz-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  50% {
    -moz-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  60% {
    -moz-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  70% {
    -moz-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  80% {
    -moz-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  90% {
    -moz-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  100% {
    left:0px;
    top:0px;
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1.2) scaleY(1.2) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    left:0px;
    top:0px;
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  10% {
    -webkit-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  20% {
    -webkit-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  30% {
    -webkit-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  40% {
    -webkit-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  50% {
    -webkit-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  60% {
    -webkit-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  70% {
    -webkit-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  80% {
    -webkit-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  90% {
    -webkit-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  100% {
    left:0px;
    top:0px;
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1.2) scaleY(1.2) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    left:0px;
    top:0px;
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  10% {
    -o-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  20% {
    -o-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  30% {
    -o-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  40% {
    -o-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  50% {
    -o-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  60% {
    -o-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  70% {
    -o-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  80% {
    -o-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  90% {
    -o-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  100% {
    left:0px;
    top:0px;
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1.2) scaleY(1.2) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    left:0px;
    top:0px;
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
  10% {
    -ms-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  20% {
    -ms-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  30% {
    -ms-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  40% {
    -ms-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  50% {
    -ms-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  60% {
    -ms-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  70% {
    -ms-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  80% {
    -ms-transform:  rotate(-3deg) scaleX(1.2) scaleY(1.2) ;
  }
  90% {
    -ms-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  100% {
    left:0px;
    top:0px;
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1.2) scaleY(1.2) ;
  }
}

@media screen and ( max-width: 1280px ) {
	
	.container {
		padding-right: 60px;
		padding-left: 60px;
	}

	.rb-grid li.rb-span-2 {
		width: 49%;
	}

	.rb-grid li {
		width: 24%;
	}
}

@media screen and ( max-width: 800px; ) {
	
	body {
		overflow-x: hidden;
	}
}

@media handheld, only screen and (max-width: 767px) {

	body {
		background: url(../img/bg.jpg) no-repeat;
	}
	
	#tubular-container,
	#tubular-player,
	#tubular-shield,
	#video-controls {
		position: fixed;
		top: -5000px; 
		display: none;
		width: 0;
		height: 0;
	}
	.container {
		padding:  60px 0;
	}
	section.two .container p {
		font-size: 130%;
	}
	.content {
		padding-top: 50px;
		padding-left: 0;
	}

	.content h1 {
		font-size: 170%;
	}

	#contact_form {
		width: 80%;
		margin-left: 14px;
	}

	button.submit_btn {
		width: 113%;
	}

	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
	ul.rb-grid {
		width: 298px;
	}
	.rb-grid li,
	.rb-grid li.rb-span-2 {
		width: 100%;
		max-width: 298px;
	}
}

@media screen and (max-width: 480px) {
	.content {
		padding-top: 50px;
		padding-left: 0;
	}

	.content h1 {
		font-size: 170%;
	}

	#contact_form {
		width: 80%;
		margin-left: 14px;
	}

	button.submit_btn {
		width: 113%;
	}

	.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.rb-grid li,
	.rb-grid li.rb-span-2 {
		width: 100%;
		max-width: 298px;
	}
}