/*I N F O R M A T I O N
==================================================
Color(s): #9e0b0f
Green(success): 
Blue(info): 
Orange(warning): 
Red(danger): 
Gray: #363e43
light Gray: 
Black: #1b1c1b
*/
/* F O N T
==================================================*/
@font-face {
  font-family: 'metropolis light';
  src: url('../fonts/metropolis/metropolis-light.otf');
}
@font-face {
  font-family: 'metropolis';
  src: url('../fonts/metropolis/metropolis-medium.otf');
}
@font-face {
  font-family: 'metropolis bold';
  src: url('../fonts/metropolis/metropolis-bold.otf');
}
/* </> F O N T -|- B A C K G R O U N D
==================================================*/
.bg-color {
  background-color: #9e0b0f;
  color: #ffffff;
}
.bg-black {
  background-color: #1b1c1b;
  color: #979a97;
}
.bg-white {
  background-color: #ffffff;
  color: #8e9095;
}
.bg-gray {
  background-color: #363e43;
  color: #979a97;
}
.bg-gray-dark {
  background-color: #141617;
  color: #9da9b9;
}
.bg-gray-light {
  background-color: #f2f6f8;
  color: #8e9095;
}
.bg-texture {
  background-image: url(../../images/texture/triangle.png);
  background-repeat: repeat;
  background-position: center;
  color: #ffffff;
}
.bg-wallpaper {
  color: #ffffff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /*background-attachment: fixed;*/
}
.bg-transparent {
  background-color: transparent;
}
/* </> B A C K G R O U N D -|-  A L I N G
==================================================*/
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}
/* </> A L I N G -|- P A D D I N G
==================================================*/
.pdd-0 {
  padding: 0px;
}
.pdd-t0 {
  padding-top: 0px;
}
.pdd-b0 {
  padding-bottom: 0px;
}
.pdd-y0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.pdd-x0 {
  padding-left: 0px;
  padding-right: 0px;
}
/* --- */
.pdd-5 {
  padding: 5px;
}
.pdd-t5 {
  padding-top: 5px;
}
.pdd-v5 {
  padding-bottom: 5px;
}
.pdd-y5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.pdd-x5 {
  padding-left: 5px;
  padding-right: 5px;
}
/* --- */
.pdd-15 {
  padding: 15px;
}
.pdd-t15 {
  padding-top: 15px;
}
.pdd-b15 {
  padding-bottom: 15px;
}
.pdd-r15 {
  padding-right: 15px;
}
.pdd-y15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.pdd-x15 {
  padding-left: 15px;
  padding-right: 15px;
}
/* --- */
.pdd-30 {
  padding: 30px;
}
.pdd-t30 {
  padding-top: 30px;
}
.pdd-b30 {
  padding-bottom: 30px;
}
.pdd-y30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.pdd-x30 {
  padding-left: 30px;
  padding-right: 30px;
}
/* --- */
.pdd-45 {
  padding: 45px;
}
.pdd-t45 {
  padding-top: 45px;
}
.pdd-b45 {
  padding-bottom: 45px;
}
.pdd-y45 {
  padding-top: 45px;
  padding-bottom: 45px;
}
.pdd-x45 {
  padding-left: 45px;
  padding-right: 45px;
}
/* --- */
.pdd-60 {
  padding: 60px;
}
.pdd-t60 {
  padding-top: 60px;
}
.pdd-b60 {
  padding-bottom: 60px;
}
.pdd-y60 {
  padding-top: 60px;
  padding-bottom: 60px;
}
.pdd-x60 {
  padding-left: 60px;
  padding-right: 60px;
}
/* --- */
.pdd-90 {
  padding: 90px;
}
.pdd-t90 {
  padding-top: 90px;
}
.pdd-b90 {
  padding-bottom: 90px;
}
.pdd-y90 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.pdd-x90 {
  padding-left: 90px;
  padding-right: 90px;
}
/* --- */
.pdd-120 {
  padding: 120px;
}
.pdd-t120 {
  padding-top: 120px;
}
.pdd-b120 {
  padding-bottom: 120px;
}
.pdd-y120 {
  padding-top: 120px;
  padding-bottom: 120px;
}
.pdd-x120 {
  padding-left: 120px;
  padding-right: 120px;
}
/* --- */
.pdd-t70 {
  padding-top: 70px;
}
/**/
.mrg-0 {
  margin: 0px;
}
.mrg-t15 {
  margin-top: 15px;
}
.mrg-r15 {
  margin-right: 15px;
}
.mrg-t-70 {
  margin-top: -70px;
}
@media (min-width: 768px) {
  .pdd-y90 {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
/* </> P A D D I N G -|- B O R D E R
==================================================*/
.brd-radius {
  border-radius: 4px;
  border: 1px solid #f2f6f8;
}
.brd {
  border: 1px solid #f2f6f8;
}
.brd-top {
  border-top: 1px solid #f2f6f8;
}
.brd-left {
  border-left: 1px solid #f2f6f8;
}
.brd-right {
  border-right: 1px solid #f2f6f8;
}
.brd-bottom {
  border-bottom: 1px solid #f2f6f8;
}
.brd-top-red {
  border-top: 5px solid #d61e2a;
}
.brd-top-gray {
  border-top: 5px solid #e2e6e9;
}
/* </> B O R D E R -|- I C O N  S I Z E
==================================================*/
.icn-sm {
  font-size: 18px;
}
.icn-md {
  font-size: 24px;
}
.icn-lg {
  font-size: 36px;
}
.icn-xl {
  font-size: 50px;
}
/* </> I C O N  S I Z E -|- G E N E R A L
==================================================*/
.clr-light-gray {
  color: #8e9095;
}
.clr-dark-gray {
  color: #2e2f2e;
}
.clr-color {
  color: #9e0b0f;
}
/*----*/
body {
  font-family: "metropolis" ,sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 18px;
  color: #2e2f2e;
  
}
hr {
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0px;
  border: 0px;
  border-bottom: 1px solid #f2f6f8
}
a {
  color: #2e2f2e; 
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
a:hover {
  color: #9aa1a6;
  text-decoration: none;
}
a:focus {
  outline: none;
  text-decoration: none;
}
p, h6, h5, h4, h3, h2, h1 {
  margin-top: 15px;
  margin-bottom: 15px;
  font-family: 'metropolis', sans-serif;
}
p {
  font-size: 12px;
   font-family: 'metropolis light', sans-serif;
}
h6 {
  font-size: 14px;
}
h5 {
  font-size: 16px;
}
h4 {
  font-size: 20px;
}
h3 {
  font-size: 24px;
}
h2 {
  font-size: 28px;
}
h1 {
  font-size: 32px;
}
button {
  font-size: 12px;
}
button:focus {
  outline: none
}
@media (min-width: 768px) {
  body {
    font-size: 14px;
  }
  p {
    font-size: 14px;
  }
  button {
    font-size: 14px;
  }
  h6 {
    font-size: 18px;
  }
  h5 {
    font-size: 20px;
  }
  h4 {
    font-size: 24px;
  }
  h3 {
    font-size: 28px;
  }
  h2 {
    font-size: 32px;
  }
  h1 {
    font-size: 36px;
  }
} 
.ff-light {
  font-family: 'metropolis light', sans-serif;
}
.ff-bold {
  font-family: 'metropolis bold', sans-serif;
}
.img {
  width: 100%;
}
.bg-color a {
  color: #ffffff;
}
.bg-color a:hover {
  color: #ffffff;
}
/*  ---------------------  */
.navbar {
  border: 0px;
  min-height: 69px;
  border-radius: 0px;
  margin-bottom: 0px;
  background-color: #1b1c1b;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.navbar.navbar-scrolling {
  min-height: 69px;
  background-color: #1b1c1b;
  border-bottom: 1px solid #2e2f2e;
  -webkit-box-shadow: 0 6px 4px -4px rgba(0,0,0,0.08);
  -moz-box-shadow: 0 6px 4px -4px rgba(0,0,0,0.08);
  box-shadow: 0 6px 4px -4px rgba(0,0,0,0.08);
}
.navbar-default .navbar-toggle {
  border: 0px;
  margin: 0px;
  padding: 28px 15px;
  border-radius: 0px;
  border-left: 1px solid rgba(255,255,255,0.2);
}
.navbar-default .navbar-toggle:focus, 
.navbar-default .navbar-toggle:hover {
  background-color: #111;
}
.navbar-default .navbar-brand {
  height: 69px;
  color: #374250;
  font-size: 25px;
  padding-top: 10px;
  padding-left: 15px;
  padding-bottom: 10px;
  font-family: 'metropolis';
}
.navbar-default.navbar-scrolling .navbar-brand {
  height: 69px;
}
.navbar-brand img {
  height: 100%;
}
.navbar-nav {
  margin: 0px;
}
.navbar-default .navbar-nav>li>a {
  color: #979a97;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 15px 15px;
  font-family: "metropolis bold" ,sans-serif;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
@media (min-width: 768px) {
  .navbar {
    min-height: 99px;
    background-color: rgba(0,0,0,0.4);
  }
  .navbar-default .navbar-brand {
    height: 99px;
    padding-left: 30px;
  }
  .navbar-default .navbar-nav>li>a {
    font-size: 12px;
    padding: 40px 7px;
  }
  .navbar-default.navbar-scrolling .navbar-nav>li>a {
    padding: 25px 7px;
  }
}
@media (min-width: 992px) {
  .navbar-default .navbar-nav>li>a {
    font-size: 14px;
    padding: 40px 15px;
  }
  .navbar-default.navbar-scrolling .navbar-nav>li>a {
    padding: 25px 15px;
  }
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: #ffffff;
  background-color: transparent;
}
.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:focus, 
.navbar-default .navbar-nav>.open>a:hover {
  color: #ffffff;
  background-color: transparent;
}
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover {
  color: #ffffff;
  background-color: transparent;
}
.banner {
  margin-top: 70px;
}
.banner-title {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e1e7ec;
}
@media (min-width: 768px) {
  .banner {
    margin-top: 0px;
  }
}
.carousel-inner .item {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.line-blue {
  width: 100%;
  height: 40px; 
  background-color: #36afdc; 
}
select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}
.btn.active.focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn:active:focus, 
.btn:focus,
.btn-default.active, 
.btn-default:active, 
.open>.dropdown-toggle.btn-default {
  background-color: transparent;
  outline: none;
}
.btn-default.active.focus, 
.btn.active,
.btn:active {
  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0);
  box-shadow: inset 0 3px 5px rgba(0,0,0,0);
}
.btn {
  height: 39px;
  text-align: center;
  padding: 12px 15px;
  letter-spacing: 0.05em;
  border-radius: 0px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-default {
  border: 0px;
  color: #363e43;
  background-color: #ffffff;
  text-transform: uppercase;
}
.btn-primary {
  color: #ffffff;
  border-color: #85080b;
  background-color: #9e0b0f;
  text-transform: uppercase;
}
.btn.btn-primary:hover, 
.btn.btn-primary:focus,
.btn.btn-primary:active {
  border-color: #85080b;
  background-color: #85080b;
}
.a-primary-blue {
  color: #36afdc;
}
.a-primary-blue:hover {
  color: #0b6098;
}
.a-primary i {
  font-size: 16px;
}
.form-control {
  color: #2e2f2e;
  height: 39px;
  font-size: 12px;
  padding: 12px 15px;
  border-radius: 0px;
  letter-spacing: 1px;
  border-color: #e1e7ec;
  background-color: #ffffff;
  font-family: "metropolis light" ,sans-serif;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0);
}
.search-options {
  margin-top: 15px;
  font-size: 12px;
  display: none;
  -webkit-box-shadow: 0 6px 4px -4px rgba(0,0,0,0.08);
  -moz-box-shadow: 0 6px 4px -4px rgba(0,0,0,0.08);
  box-shadow: 0 6px 4px -4px rgba(0,0,0,0.08);
}
.search-options.show {
  display: block;
}
.div-cube {
  background-color: #f5f5f5;
  border-radius: 10px;
  height: 400px;
}
.div-cube-img {
  background-image: url("../../images/wallpaper/fcl-wallpaper.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.div-circle {
  width: 90px;
  height: 90px;
  color: #9da9b9;
  font-size: 50px;
  padding: 20px 0px; 
  text-align: center;
  border-radius: 50%;
  margin: 0 auto 30px auto;
  background-color: #ffffff;
  border: 1px solid #e1e7ec;
}
.circle-color {
  color: #ffffff;
  background-color: #9e0b0f;
  border: 1px solid #e13049;
}
.div-text {
  min-height: 130px;
}
.img-rounded {
  width: 100%;
  border-radius: 4px;
}
.img-rounded-t {
  width: 100%;
  border-radius: 4px 4px 0px 0px;
}
.img-rounded-l {
  width: 100%;
  border-radius: 4px 0px 0px 4px;
}
.img-thumbnail {
  width: 100%;
  border: 1px solid #ebf1f5;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0);
  -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0);
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

}
.img-thumbnail:hover {
  -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.08);
  -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.08);
  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.08);
}
.thumbnail {
  background-color: transparent;
  border-radius: 0px;
}
.div-img {
  width: 100%;
  padding: 4px;
  margin-top: 15px;
  border-radius: 4px; 
  background-color: #fff; 
  border: 1px solid #ebf1f5;

}
.div-img-background {
  width: 100%; 
  height: 250px;
  border-radius: 4px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .div-img {
  	margin-top: 0px;
  }
}
.carousel-indicators {
  bottom: 0px;
}
.carousel-caption h2 {
  font-size: 15px;
  margin-bottom: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: "metropolis bold" ,sans-serif;
}
.carousel-caption h3 {
  letter-spacing: 0px;
  font-size: 15px;
  font-family: "metropolis light" ,sans-serif;
}
.caption-center {
  text-align: center;
  right: 10%;
  left: 10%;
}
.caption-title {
  top: 20%;
}
@media (min-width: 576px) {
  .caption-title {
    top: 30%;
  }
}
@media (min-width: 768px) {
  .carousel-indicators {
    bottom: 20px;
  }
  .caption-center {
    right: 20%;
    left: 20%;
  }
  .caption-title {
    top: 33%;
  }
  .carousel-caption h2 {
    font-size: 23px;
    margin-bottom: 30px;
  }
  .carousel-caption h3 {
    font-size: 18px;
  }
} 
@media (min-width: 992px) {
  .caption-center {
    right: 15%;
    left: 15%;
  }
  .caption-title {
    top: 34%;
  }
  .carousel-caption h2 {
    font-size: 25px;
  }
}
@media (min-width: 1200px) {
  .caption-title {
    top: 34%;
  }
  .carousel-caption h2 {
    font-size: 30px;
  }
}
@media (min-width: 1360px) {
  .caption-title {
    top: 35%;
  }
  .carousel-caption h2 {
    font-size: 35px;
  }
  .carousel-caption h3 {
    font-size: 25px;
  }
}
.panel-group .panel {
  border-radius: 0px;
} 
.panel-default {
  border: 0px;
}
.panel-heading {
  padding: 0px;
}
.panel-title>a {
  color: #8e9095;
  position: relative;
  display: block;
  padding: 12px 15px 8px 15px;
  background-color: #edeef0;
}
.panel-title>a:hover {
  color: #ffffff;
  background-color: #9e0b0f;
}
.panel-default>.panel-heading {
  border: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
  color: #8e9095;
  background-color: #edeef0;
}
.panel-body {

}
.thumbnail {
  margin-bottom: 0px;
  width: 100%;
}
.gallery-project {
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;
}
.modal-content {
  background-color: #1b1c1b;
  border-radius: 0px;
  color: #979a97;
}
.modal-header {
  border-bottom: 1px solid #2e2f2e;
}
.filter-button {
  color: #979a97;
  text-transform: uppercase;
  font-family: 'metropolis bold';
  background-color: transparent;
} 
.filter-button:hover {
  color: #9e0b0f;
  background-color: transparent;
}
.filter-button.active {
  color: #9e0b0f;
  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0);
  box-shadow: inset 0 3px 5px rgba(0,0,0,0);
}
.close {
  opacity: 0.6;
  color: #ffffff;
}
.mask {
  top: 0px;
  left: 0px;
  float: left;
  width: 100%;
  height: 100%;
  padding: 15px;
  color: #ffffff;
  position: absolute;
  text-align: center;
}
.mask .mask-content {
  top: 0px;
  opacity: 0;
  width: 100%;
  height: 100%;
  padding: 35% 15%;
  background-color: rgba(0,0,0,0.8);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.mask-content h3 {
  font-size: 16px;
}
.mask:hover .mask-content {
  opacity: 1;
}
@media (min-width: 576px) {
  .mask .mask-content {
    padding: 40% 15%;
  }
}
@media (min-width: 768px) {
  .mask .mask-content {
    padding: 25% 15%;
  }
  .mask-content h3 {
    font-size: 28px;
  }
}
@media (min-width: 992px) {
  .mask .mask-content {
    padding: 40% 15%;
  }
}
.alert {
  border-radius: 0px;
}
.alert-success {
  color: #99c61f;
  background-color: #ffffff;
  border-color: #e6ebee;
}
.alert-info {
  color: #30bcda;
  background-color: #ffffff;
  border-color: #e6ebee;
}
.alert-warning {
  color: #ff7d13;
  background-color: #ffffff;
  border-color: #e6ebee;
}
.alert-danger {
  color: #f42a2f;
  background-color: #ffffff;
  border-color: #e6ebee;
}
.navbar-block {
  position: fixed; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.5); 
  z-index: 1000;
  display: none;
}
.wallpaper-height {
  height: 300px;
}
@media (min-width: 768px) {
  .wallpaper-height {
    height: 500px;
  }
}
@media (min-width: 992px) {
  .wallpaper-height {
    height: 600px;
  }
}
@media (min-width: 1200px) {
  .wallpaper-height {
    height: 900px;
  }
}