/*!
 * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
 */

body {
  padding-top: 54px;
}

@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
}

#contact{padding-top: 8%; padding-bottom: 3%;}

.shadow{text-shadow:  4px -3px 6px #000000a6;;
font-size: 65px !important}

.bounce {
  display: inline-block;
  position: relative;
  -moz-animation: bounce 0.90s infinite linear;
  -o-animation: bounce 0.90s infinite linear;
  -webkit-animation: bounce 0.90s infinite linear;
  animation: bounce 0.90s infinite linear;
  colr:000;
}

@-webkit-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-moz-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-o-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-ms-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}

.content {
    /*margin being given from jQuery*/
}
.footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: -1;
}

.masthead a{
    color: #fff;
	text-decoration: none;
	
    
}

.masthead a:hover{
    color: #007bff !important;
	text-decoration: none;
    
}

section{padding-top: 8%; padding-bottom: 8%;}

.light-b{color: #4bb3fd !important}
.dark-b{color: #0a2463 !important}
.blue{color: #1c44b6 !important}

.bg-light-b{background-color: #4bb3fd !important}
.bg-dark-b{background-color: #0a2463 !important}
.bg-blue{background-color: #1c44b6 !important}

.reg {font-family: 'Rubik', sans-serif;}
.display {font-family: 'Rubik', sans-serif;}

.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	z-index: 20;
	
}

.portfolio-item {
  margin-bottom: 30px;
}

.center-me {
  margin: 0 auto !important;
}

.bg-textured {
	width: 100%;
	background: #eceeef fixed;
	background-image: url(../img/bg-texture.jpg);
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    box-shadow: inset 0 -2px 6px 0 rgba(247, 247, 249, 0), inset 0 2px 6px 0 rgba(236, 238, 239, 0.07), inset 0 50px 75px 0 rgba(236, 238, 239, 0.46), inset 0 -300px 300px 0 rgba(236, 238, 239, 0.62);
    display: inline-block;
    z-index: 20;
	padding-top: 4%; padding-bottom: 4%;
}
section{z-index: 20; position: relative;}

@media (max-width:576px) {
	.hide{visibility: hidden !important}
}

#myFooter{
    padding-top:32px;
	background-color: #fff;
}

#myFooter .container{
    text-align: center;
}

#myFooter .footer-copyright{
    margin-bottom: 35px;
    text-align: center;
    color: #777;
}

#myFooter ul{
    list-style-type: none;
    padding: 0;
    margin-bottom: 18px;
}

#myFooter a{
    color: #282b2d;
	text-decoration: none;
    
}

#myFooter a:hover{
    color: #007bff !important;
	text-decoration: none;
    
}

#myFooter li{
    display: inline-block;
    margin: 0px 15px;
    line-height: 2;
}

#myFooter .footer-social{
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: #eee;
}

#myFooter .fa{
    font-size: 36px;
    margin-right: 15px;
    margin-left: 20px;
    background-color: white;
    color: #d0d0d0;
    border-radius: 51%;
    padding: 10px;
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 43px;
    text-decoration: none;
    transition:color 0.2s;
}

#myFooter .fa-facebook:hover{
   color: #2b55ff;
}

#myFooter .fa-facebook:focus{
    color: #2b55ff; 
}

#myFooter .fa-google-plus:hover{
    color:red;
}

#myFooter .fa-google-plus:focus{
    color:red;
}

#myFooter .fa-twitter:hover{
    color: #00aced;

}

#myFooter .fa-twitter:focus{
    color:#00aced;
}

/*VIDEO BACKGROUND*/
.video-bg { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url("../img/town.jpg") no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade { 
   opacity: .5;
}

header.masthead {
	position: relative;
	width: 100%;
	min-height: 85%;
	text-align: center;
	color: #fff;
	background-color:  #0000008a;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
}
header.masthead .header-content {
	position: relative;
	width: 100%;
	padding: 150px 15px 100px;
	text-align: center
}
header.masthead .header-content .header-content-inner h1 {
	font-size: 30px;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0;
	text-transform: uppercase
}
header.masthead .header-content .header-content-inner hr {
	margin: 30px auto
}
header.masthead .header-content .header-content-inner p {
	font-size: 16px;
	font-weight: 300;
	margin-bottom: 50px;
	color: rgba(255,255,255,.7)
}

@media (min-width:768px) {
header.masthead {
	height: 100%;
	min-height: 85%;
}
header.masthead .header-content {
	position: absolute;
	top: 50%;
	padding: 0 50px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}
header.masthead .header-content .header-content-inner {
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto
}
header.masthead .header-content .header-content-inner h1 {
	font-size: 50px
}
header.masthead .header-content .header-content-inner p {
	font-size: 18px;
	max-width: 80%;
	margin-right: auto;
	margin-left: auto
}
}



/* CSS used for positioning the footers at the bottom of the page. */
/* You can remove this. */

html{
    height: 100%;
}

body{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    height: 100%;
}

.content{
   flex: 1 0 auto;
   -webkit-flex: 1 0 auto;
   min-height: 200px;
}

#myFooter{
   flex: 0 0 auto;
   -webkit-flex: 0 0 auto;
}

@media only screen 
  and (min-device-width: 320px) 
	and (max-device-width: 568px){
		#contact{margin-top: 22%}
		
		.hide{visibility: collapse}
}