body{
	font-family: 'Catamaran', sans-serif;
}
a{
	color:#9fa330;
}
.navbar {
    background-color: #000;
    text-align: center;
    display: block;
		color: #FFF;
		margin-bottom: 0px;
}
.navbar h2{
	font-size: 20px;
}
.navbar .navbar-header{
	width: 100%;
}

.fa {
    color: #FFF;
    font-size: 24px;
    padding: 10px 15px 10px;
}

#top{
	background-color: #9fa330;
}
#top .container{
	background-image: url(../images/color-4-video.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	height:318px;
	position: relative;
}

#top img{
	position: absolute;
	top: 65px;
	left: 190px;
	border: 3px solid black;
}

@media only screen and (max-width: 1200px) {
	#top img{
		left: 90px;
	}
}


@media only screen and (max-width: 992px) {
	#top .container {
    background-position: top 0px right -150px;
	}

}

@media only screen and (max-width: 768px) {
	#top .container {
    background: none;
		text-align: center;
	}
	#top img {
    position: relative;
		left: 0px;
	}

}

#info{
	background-color: #000;
}

#info .infobox{
	margin:10px;
	color: #FFF;
	border: gray solid 1px;
}

#info .infobox h3{
	font-weight: 900;
	float:left;
	font-size: 100px;
	margin: 15px 5px 3px;
	line-height: 70px;
}
#info .infobox h4{
	float:left;
	padding-top: 25px;
	padding-left: 25px;
}
#videos{
	margin-top:30px;
	margin-bottom:30px;
}
#videos .videobox {
	padding-bottom: 20px;
	margin-bottom: 20px;
	background-color: #ebebeb;
}
#videos .videobox h4{
	text-transform: uppercase;
	font-weight: bold;
}
#videos .video-image {
    position: relative;
    display: block;
}
#videos .videobox-text {
    display: block;
    min-height: 200px;
    padding: 20px 25px;
    overflow: hidden;
}
#videos .videobox .video-image:before {
    position: absolute;
    display: block;
    color: #000;
    font-family: FontAwesome;
    content: "\f04b";
    top: calc( 50% - (30px / 2) );
    left: calc( 50% - (30px / 2) );
    font-size: 30px;
    line-height: 30px;
    z-index: 1;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: 1000;
}
#videos .videobox .video-image:after {
    position: absolute;
    display: block;
    color: #fff;
    font-family: FontAwesome;
    content: "\f111";
    width: 30px;
    text-align: center;
    top: calc( 50% - (70px / 2) );
    left: calc( 50% - (70px / 2) );
    font-size: 70px;
    line-height: 70px;
    z-index: 1;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}
footer{
	background-color: #000;
	padding: 15px 0px;
	color:#FFF;
}


.modal-backdrop.in {
  filter: alpha(opacity=80);
  opacity: .8;
}

.modal-content {
  border: none;
  border-radius: 0;
  padding: 10px 0;
  background-color: #e7e7e7;
  color: #000;
}
.modal-dialog {
  width: 900px;
}

.modal-header {
  border: none;
}

.modal-header .close {
  margin-top: -60px;
  right: 15px;
  position: absolute;
  color: #35296f !important;
  font-size: 50px;
  opacity: 1.2;
  font-weight: 900;
}

.ckBox-list {
  padding: 0 35px 25px 35px;
}

.modal-text p {
  margin-top: -40px;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 500;
}


.modal-content {
  padding: 10px 10px !important;
}
@media only screen and (min-width: 992px) {
  .modal-content {
    width: 1000px;
    margin-left: -190px;
  }
}

.modal-header {
  margin-top: 30px !important;
}

.modal-header .close {
  font-size: 30px !important;
}

.modal-body {
  margin-top: -55px !important;
}

.modal-header .close {
  font-size: 30px;
}