
html,
body {
  height: 100%;
  background-color: #ffffff;
	overflow:hidden;
}


body{
	margin:0;
	padding:0;
	color: #ffffff;
	text-align: center;
	background: url(images/rfrb-background-laptop.jpg) right bottom no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
}



.black{
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 37%;
	right: 0;
	width: 100%;
	height:200px;
    border-top: 2px solid #FFC200;
    border-bottom: 2px solid #FFC200;
    text-align: center;
	
}


#header{
	width: 100%;
	margin: auto;
}

.title{
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 80px;
	margin-bottom: 0px;
  	padding: 0;

}


@media screen and (max-width: 1400px){
	#header{
		padding: 30px 0 30px 0;
	}


	.title {
		font-size: 53px;
	}

}

@media screen and (max-device-width: 930px){
	#header{
		padding: 30px 0 30px 0;
	}


	.title {
		font-size: 50px;
		margin-top: 0px;
	}

	body{
		background-position: 39% 20%!important;
	}

	.black {
		top: 40%;
		height: 130px;

	}

}

@media screen and (max-width: 930px){
	#header{
		padding: 30px 0 30px 0;
	}


	.title {
		font-size: 30px;
		margin-top: 0px;
	}

	body{
		background-position: 39% 20%!important;
	}

	.black {
		top: 40%;
		height: 130px;

	}

}

.animate-reveal {

  opacity: 0;
  -webkit-animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
     -moz-animation: reveal 1s ease-in 1 normal forwards;
       -o-animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
          animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
}

.animate-first {
  -webkit-animation-delay: 250;
     -moz-animation-delay: 250;
       -o-animation-delay: 250;
          animation-delay: 250;
}

@-webkit-keyframes reveal {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
       -moz-transform: translateY(100%);
         -o-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}

@-moz-keyframes reveal {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
       -moz-transform: translateY(100%);
         -o-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}

@-o-keyframes reveal {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
       -moz-transform: translateY(100%);
         -o-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
       -moz-transform: translateY(100%);
         -o-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}