@import "navbar.css"; 
@import "fonts.css"; 

@font-face {
  font-family: bitter;
  src: url('bitter/Bitter-VariableFont_wght.ttf');
}

body, html{
	height: 100%;
	color: white;
	font-family: helvetica;
	/**font-family: bitter;**/
}

a{
	color: white;
}

ul.details{
	padding-left: 10rem;
}
tbody{
	width: 100%;
}
tr{
	width: 100%;
}

.bg_wrap{
	z-index: -1;
	position: fixed;
	background-position: center;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
	webkit-perspective: 1; 
	webkit-backface-visibility:none;
	-webkit-backface-visibility:hidden;
	width: 100%;
	height: 100%;
}
#bg {
  /**height: 100%;**/
  display: flex;
  flex-flow: column;
  background-color: rgba(0,0,0,0);
	background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
  	background-attachment: fixed;
  	position: static;


}
.row{
	margin: 0px;
	width: 100%;
}
.placeholder{
	height: 25px;
	width: 100%;
}

.logo{
	width: 30%;
}

.full{
	width: 100%;
}

.m_placeholder{
	height: 42vh;
}
.s_placeholder{
	height: 10vh;
}

.black{
	padding: 0px 6vw;
	margin: 0px;
	transition: all ease 1s;
	webkit-perspective: 1; 
	webkit-backface-visibility:none; 
}
.black_tr{
	background-color: rgba(0,0,0,0.7);
	transition: all ease 0.5s;
	webkit-perspective: 1; 
	webkit-backface-visibility:none; 
}
.black2{
	background-color: black;
	padding: 0px 5rem;
	transition: all ease 0.5s;
	webkit-perspective: 1; 
	webkit-backface-visibility:none; 
}
.grey{
	background-color: rgba(75,75,75,0.7);
	transition: all ease 1s;
	webkit-perspective: 1; 
	webkit-backface-visibility:none; 
}
.tire{
	background-image: url('/pictures/others/tire.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.white{
	margin: 0px 10rem;
	background-color: rgba(255,255,255,0.8);
}
.white2{
	padding: 10px;
	background-color: rgba(255,255,255,1);
}
.transparent{
	padding: 0px 5rem;
	transition: all ease 1s;
	webkit-perspective: 1; 
	webkit-backface-visibility:none; 
}
.btn-light{
	background-color: white;
	color: black;
	font-size: 1.3rem;
	padding: 15px 35px;
	font-weight: 400;
}
.btn-blue{
	background-color: #013879;
	color: white;
	font-size: 1.3rem;
	padding: 15px 35px;
	font-weight: 400;
}
.btn-margin{
	margin: 1rem 5rem;
}
.tile{
	margin: 10px 10px;
	background-color: #343a40;
}

.no-padding{
	padding: 0px;
}
.no-margin{
	margin: 0px;
}
.no-left{
	padding-left: 0px;
	margin-left: 0px;
}
.no-right{
	padding-right: 0px;
	margin-right: 0px;
}
.padding-vertical{
	padding-top: 20px;
	padding-bottom: 20px;
}
.padding-horizontal{
	padding-left: 20px;
	padding-right: 20px;
}

.wrapper{
	position: relative;
	padding-bottom: 0%;
}

.line{
	width:50%; 
	border-color: white;
}
.tablerow{
	border-bottom: 7px double black;
}
.autoh{
	height: auto;
}
.rounded{
	border: 1px solid #343a40;
	border-radius: 100px;
}

.frame {

    white-space: nowrap; /* This is required unless you put the helper span closely near the img */
    text-align: center;
    margin: 1em 0;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.middle{
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
.narrow{ 
	margin-left: 4vw;
	margin-right: 4vw;
}

.safarih{
	max-height: 25vh;
	wif
}

.m50{
	max-width: 50%;
}
.m30{
	max-width: 30%;
}
.navbar-toggler{
	background-color: 	white;
}
.err{
	color: red;
}
.bordered{
	margin: 2px;
	padding: 2rem;
	border: 2px double black;
}
.relative{
	position: relative;
}
.img_center{
	position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.float{
	position: absolute;
	top: 0;
}

.modal-content{
	width: 40%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 500;
}

@media screen and (max-width: 992px) {
  .black {
   padding: 0px;
  }
  .autoh{
	  width: 50%;
  }
  .w100-md{
  	width: 100%;
  }
  .btn-light{
  	padding: 5px 10px;
  }
  .transparent{
  	padding: 0px;
  }
  .white{
  	margin: 0px;
  }
  ul.details{
	padding-left: 1.5rem;
  }
  .phone_placeholder{
	  height: 60vh;
  }
  .modal-content{
	width: 80%;
  }
}
@media screen and (min-width: 992px) {
	.mx50-md{
		max-width: 50%;
	}
	.mx30-md{
		max-width: 30%;
	}
}