@charset "UTF-8";

/*!
* Theme CSS -
* Based on Twitter Bootsrap 4.3.1
* Author - Antipole - www.antipole.fr
*/


/*------------------------------------------------------*
*-----------------------------------     PRELOADER    ----*
*------------------------------------------------------*/

body > :not(.pace), body:before, body:after {
  -webkit-transition: opacity .4s ease-in-out-in-out;
  -moz-transition: opacity .4s ease-in-out-in-out;
  -o-transition: opacity .4s ease-in-out-in-out;
  -ms-transition: opacity .4s ease-in-out-in-out;
  transition: opacity .4s ease-in-out-in-out
}
body:not(.pace-done) > :not(.pace), body:not(.pace-done):before, body:not(.pace-done):after {
  opacity: 0
}
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translate3d(0, -50px, 0);
  -ms-transform: translate3d(0, -50px, 0);
  transform: translate3d(0, -50px, 0);
  -webkit-transition: -webkit-transform .5s ease-in-out-out;
  -ms-transition: -webkit-transform .5s ease-in-out-out;
  transition: transform .5s ease-in-out-out;
}
.pace.pace-active {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.pace .pace-progress {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 5px;
  background-color: #5482AB;
  pointer-events: none;
}


/*------------------------------------------------------*
*-----------------------------------     GENERAL     ----*
*------------------------------------------------------*/

/* To fit rem size in pixel easily */
html {
  font-size: 62.5%;
}

body {
  font-family: 'Barlow', sans-serif;
  font-size:2rem;
	padding-top: 70px;
}

a{
	color: #231F20;
	text-decoration: none;
}

a:hover {
  color: #231F20;
}

*:focus {
  outline: 0 !important;
}

/*------------------------------------------------------*
*-----------------------------------     HEADER     ----*
*------------------------------------------------------*/

#header {
	padding: 20px 0;
	background-color: #FFFFFF;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	margin-bottom: 60px;
}

#logo {
	color: #5482AB;	
}
#logo > span {
	color: #231F20;
	display: inline-block;
	padding-left: 1.2rem;
}
#logo:hover, #logo:focus {
	text-decoration: none;
}
.menu > a{
	display: inline-block;
	padding-right: 1.8rem;
}

.menu > a.selected{
	color: #5482AB;
}


/*------------------------------------------------------*
*-----------------------------------     PROJECT LISTING     ----*
*------------------------------------------------------*/

.project-item{
	display: block;
	text-decoration: none!important;
	width: 100%;
	min-height: 240px;
	background-color: #5482AB;
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	padding: 2rem 2.5rem;
	position: relative;
	margin-bottom: 6.5rem;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}

.project-item:hover, .project-item:focus {
	background-color: #5482AB;
	background-image: none!important;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}

.project-tag{
	display: block;
	font-size: 0;
	color: #5482AB;
	-webkit-transition: color .6s ease-in-out;
	-moz-transition: color .6s ease-in-out;
	-o-transition: color .6s ease-in-out;
	transition: color .6s ease-in-out;
}

.project-item:hover .project-tag, .project-item:focus .project-tag{
	color: #FFF;
	font-size: 3rem;
	-webkit-transition: color .6s ease-in-out;
	-moz-transition: color .6s ease-in-out;
	-o-transition: color .6s ease-in-out;
	transition: color .6s ease-in-out;
}
.project-name{
	position: absolute;
	bottom: -3.5rem;
	left: 0;
	display: block;
	color: #231F20;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;}



/*------------------------------------------------------*
*-----------------------------------     PORTFOLIO     ----*
*------------------------------------------------------*/

#portfolio .img-fluid, .portfolio-tags, .portfolio-description{
	margin-bottom: 9rem;
}

.portfolio-name, .portfolio-title{
	margin-bottom: 1.8rem;
	font-size: 3rem;
	line-height: 4rem;
}
.portfolio-title{
	color: #5482AB;
}

.portfolio-tags{
	color: #868686;
}

.b-lazy {
   opacity:0;
   transition: all 1.2s;
}
.b-loaded {
   opacity:1;
}

.capsule-video{width: 100%; margin-bottom: 3rem}
.mini_capsule-video{line-height: 0;}
.capsule-video iframe{border: 0}


/*------------------------------------------------------*
*-----------------------------------     FOOTER     ----*
*------------------------------------------------------*/
#footer-container{
	padding-top: 100px;
}
#footer{
	border-top:5px solid #231F20;
	padding-top: 15px;
	padding-bottom: 100px;
}

/*------------------------------------------------------*
*-----------------------------------     EDITORIAL     ----*
*------------------------------------------------------*/

body#contact #editorial {
	background-color: #5482AB;
	color: #FFF;
	padding-top: 50px;
}
body#contact #footer-container{
	background-color: #5482AB;
}
body#contact #footer{
	color: #FFF;
	border-color:#FFF;
}
body#contact #footer a{
	color: #FFF;
}

.logo-editorial{
	 display: block;
	 margin-bottom: 1.4rem;
}

body#contact #editorial h3, body#contact #editorial a{
	color:#FFF;
}
h3{
	font-size: 3rem;
	margin: 0 0 0.7rem 0;
	color: #5482AB
}
p{ margin: 0 0 1.4rem 0;}

/*------------------------------------------------------*
*-----------------------------------     RESPONSIVE LAYOUT     ----*
*------------------------------------------------------*/
/* Extra large devices (large desktops) - XL */

/* Large Devices (desktops, less than 1200px) - LG */
@media only screen and (max-width : 1199px) {

#portfolio .img-fluid, .portfolio-tags, .portfolio-description{
	margin-bottom: 6rem;
}

}

/* Medium Devices (tablets, less than 992px) - MD */
@media only screen and (max-width : 991px) {

#portfolio .img-fluid, .portfolio-tags, .portfolio-description{
	margin-bottom: 3rem;
}
	
#logo > span {
	padding:0;
}

body{ padding-top: 100px}
	
.menu{
	text-align: right;
	}
.menu > a{
	padding-left: 1.8rem;
	padding-right: 0;
	}
.capsule-video iframe{height: 480px!important}
}

/* Small Devices (landscape phones, less than 768px) - SM */
@media only screen and (max-width : 767px) {

body{ padding-top: 130px}

.portfolio-name{
    margin-bottom: 0.6rem;
	}
	
#logo {
	width:130%;
}
#logo > span {
	padding:0;
}
.menu{
	text-align: left;
	width:100%;
	}
.menu > a{
	padding:0;
	}
.menu > a{
    float: right;
    clear: both;
	}

.capsule-video iframe{height: 360px!important}

}

/* Extra Small Devices (portrait phones, less than 576px) - XS */ 
@media only screen and (max-width : 575px) {
.capsule-video iframe{height: 320px!important}


}

@media only screen and (max-width : 480px) {
.capsule-video iframe{height: 300px!important}
#logo {
	font-size:1.9rem;
}
	
}