html, body {font-family: 'Montserrat', sans-serif;}
.table-content{display: table; width: 100%; height: 100%;}
.table-cell-content{display: table-cell; vertical-align: middle; text-align: center;}
.disp-block {display: block !important;}
.p0 {padding: 0;}
.fl-r {float: right;}
.s-margin {margin: 0 45px;}
.h-fix {height: 100%;}
.mobile-visible {display: none}
h1.head{font-size: 24px; color: #61111c; font-weight: 700; margin: 0;}

header {height: 100px; background: #631219; overflow: hidden}
header img {margin-top: 16px;}
header ul li {line-height: 100px; float: left; list-style: none;}
header ul li a{font-weight: 700; color: #fff; font-size: 16px; margin-right: 30px; position: relative;}
header ul li a:hover,header ul li a:focus,header ul li a:visited{color: #fff; text-decoration: none;}
header ul li a::after{content: ''; background: #fff; width:0; height: 3px; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); transition: all .6s; border-radius: 100px;}
header ul li a:hover::after{width:50%;}
header .social ul li{line-height: 22px; float: left; width: 25px !important; margin-top: 38px;}
header .social ul li a{color: #fff; text-decoration: none}

.swiper-container {width: 100%;height: calc(100vh - 100px);}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.swiper-slide .overlay h2 {font-size: 44px; font-weight: 200; color: #fff; text-align: left;}
.swiper-slide .overlay h4 {font-size: 22px; font-weight: 700; color: #fff; text-align: left;}
.swiper-slide .overlay  p {font-size: 18px; font-weight: 200; color: #fff; text-align: justify;}


#about {padding: 35px 0;}
#about h1.head {padding-left: 15px; margin-bottom: 35px;}
#about p {font-weight: 300; color: #404040; font-size: 18px; margin: 0;}
#about h2 {font-weight: 700; font-size: 18px; color: #404040; margin: 45px 0;}


#references img {width: 18.6%; border:1px solid #e2e2e2; margin: 5px; opacity: .5; transition: all .6s;}
#references img:hover {opacity:1}
#references h1.head {margin: 60px 0;}
#references a {font-size: 22px; font-weight: 600; color: #fff; background: #631219; padding: 20px 25px; margin-top: 50px; display: inline-block; text-decoration: none; transition: all .6s;}
#references a:hover {background: #5c050d;}

#gallery h1.head {margin-top: 70px; margin-bottom: 10px;}
#gallery img {margin-top: 30px;}
#gallery img {margin-top: 30px; opacity:1; transition: all .6s;}
#gallery img:hover {opacity:.4;}


#contact h1.head{margin: 60px 0;}
#contact .contact-content{background: #000;}
#contact .info{padding: 125px 0;}
#contact .social {padding: 125px 0;margin-top: 55px;}
#contact .social i{ margin-right: 10px;}
#contact h2 {font-size: 22px; font-weight: 300; color: #fff; text-align: left; margin: 0; margin-bottom: 30px;}
#contact p {font-size: 18px; font-weight: 300; color: #fff; text-align: left; margin: 0; margin-bottom: 20px;}
#contact img {margin-right: 10px;}



@media screen and (max-width:1240px)
{
	#contact .social {padding: 35px 0; margin-top: 0;padding-top: 72px;}
	#contact .info {padding: 25px 0;}
	#contact h2 {font-size: 14px;}
	#contact p {font-size: 12px;}
	.swiper-container {width: 100%;height:auto;}
}
@media screen and (max-width:992px)
{
	.mobile-hidden {display: block}
	.swiper-container {width: 100%;height: auto;}
	.swiper-slide .overlay h2 {font-size: 22px;}
	.swiper-slide .overlay h4 {font-size: 16px;}
	.swiper-slide .overlay p {font-size: 12px; text-align: left;}
	header {line-height: 99px; height: 80px;}
	header img.logo {width: 120px;}
	header ul {margin: 0; display: inline-block; padding: 0;}
	header ul li {line-height: 79px;}
	header ul li a {font-size: 12px; margin-right: 10px;}
	header .social ul {padding: 0}
	header .social ul li {width: 18px !important; margin-top: 28px;}
	#about img {display: inline-block; width: 30%;}
	#about p {font-size: 14px;}
	#about h2 {margin: 25px 0;}
	#references h1.head {margin: 30px 0;}
	#references img {width: 23.2%;}
	#references a {font-size: 18px; padding: 15px 25px;}
	#gallery img {float: left; }
}
@media screen and (max-width:750px)
{
	.mobile-visible {display: block}
	.mobile-hidden {display: none}
	header ul li a {text-decoration: none}
	header .social ul li {float: left; display: inline-block}
	.swiper-container {width: 100%;height: auto;}
	.swiper-slide .overlay h2 {font-size: 18px;}
	.swiper-slide .overlay h4 {font-size: 10px;}
	.swiper-slide .overlay p {font-size: 9px; text-align: left;}
	#about img {display: inline-block; width: 70%;}
	#about p {font-size: 14px;}
	#about h2 {font-size: 35px 0;}
	#references h1.head {margin: 40px 0;}
	#references img {width: 30%;}
	#references a {font-size: 16px; padding: 15px 25px; margin-top: 25px;}
	#gallery img {margin-top: 2px;float: left; padding: 10px;}
	#contact .social {padding: 35px 0; margin-top: 0;padding-top: 0;}
	#contact .info {padding: 25px 0;}
	#contact h2 {font-size: 20px;}
	#contact p {font-size: 16px;}
}
@media screen and (max-width:400px) 
{
	.swiper-slide .overlay h2 {font-size: 14px;}
	#references img {width: 29%;}
	.swiper-slide .overlay p {font-size: 8px;}
}





.mobile-nav {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.9);
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    display: none;
    z-index: 999;
}
.mobile-nav .social {background: #fff;padding: 10px;position: absolute;bottom: 0;width: 100%; left:0;}
.disp-table {display:table;transition:all 1s;}
.mobile-nav ul {list-style-type: none;padding: 0;margin:0;}
.mobile-nav ul li {margin: 10px; }
.mobile-nav .social ul {display: inline-block;}
.mobile-nav .social ul li {margin: 10px; float: left; display: inline-block;}
.mobile-nav ul li a {font-size: 22px !important;font-weight: 700;text-transform: uppercase;color: #fff;}
.mobile-nav .social {background: #000;}
.mobile-nav .social a {font-size: 22px;color: #fff;margin-right:15px;}
.mobile-nav .social a:last-child {margin-right:0;}

.hamburger-menu {
    position: fixed;
    top: 25px;
    right: 19px;
    margin: auto;
    width: 50px;
    height: 33px;
    cursor: pointer;
    z-index:9999;
}
header.active .hamburger-menu {top:40px;}
.bar,
.bar:after,
.bar:before {
    width: 50px;
    height: 3px;
}

.bar {
    position: relative;
    transform: translateY(15px);
    background: #fff;
    transition: all 0ms 300ms;
}
.bar.active {background: #000;}
.bar.active:before {background: #000;}
.bar.active:after {background: #000;}
.bar.animate {
    background: rgba(255, 255, 255, 0);
}

.bar:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 15px;
    background: #fff;
    transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar.animate.active:before, .bar.animate.active:after {background:#fff;}
.bar:after {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    background: #fff;
    transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:after {
    top: 0;
    transform: rotate(45deg);
    transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:before {
    bottom: 0;
    transform: rotate(-45deg);
    transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}