/* Add your custom css styles */

body{
	font-family: "Open Sans", sans-serif;
}

header, h1,h2,h3,h4,h5,h6{
	
}
#mainMenu > ul > li > a {
	font-family: 'Poiret One', cursive;
	font-size: 14px;
	padding: 5px;
}
h1,h2,h3{
	font-family: 'Poiret One', cursive;
}
h1,h2{
	font-weight: 900 !important;
}
.portfolio-description > .title {
	font-size: 13px;
	letter-spacing: 0;
}

#design #design-lead{
	text-align: justify;
}

#design section{
	position: absolute;
	top: 150px;
}

@media (max-width: 768px) {
	#design section{
		position: absolute;
		top: 50px;
	}

	#design h1 {
		margin-bottom:0;
		font-size: 20px !important;
	}
	#design .lead {
		line-height: 1.1;
		font-size: 14px;
	}
}

@media (min-width: 991px){	
	#mainMenu{
		padding-left : 15px;
		padding-right : 15px;
		background-image: url('../images/texture/tacheBleue-1094x100.png');
		background-repeat : no-repeat;
		background-size : contain;
		background-position : center center;
	}
	nav .main-menu a, nav .main-menu .dropdown-menu a, nav .main-menu .dropdown-submenu > span.dropdown-menu-title-only,
	#header.header-dark.header-sticky.header-navigation-light .main-menu > ul > li > a	{
		color: white;
	}
	
	nav .main-menu>li:hover a{
		text-decoration : underline !important;
	}
	
	#design #design-lead{
		padding-left: 50%;
	}
	
	#design img {
		position: relative; 
		top: -90px;
	}
	
}

@media (min-width: 991px) and (max-width: 1200px) { 
	#logo img {
		height: 70px;
	}
}

@media (min-width: 1200px) {
	#logo img {
		height: 90px;
	}
	#mainMenu > ul > li > a {
		padding: 10px;
	}
	
	#design #design-lead{
		padding-left: 75%;
	}
}

.square-separator > div {
	border: 0 !important;
}
.square-separator .portfolio-image .image-box-content {
	display: none;
}

/* Integrate call-to-action */
.call-to-action {
	overflow: hidden;
	padding: 36px 40px 24px;
	margin-bottom: 40px
}
.call-to-action h3 {
	margin-top: 10px;
	font-weight: 600;
	margin-bottom: 10px
}
.call-to-action h3 span {
	color: #1abc9c!important
}
.call-to-action p {
	margin-top: 0
}
.call-to-action a.btn {
	margin-top: 20px
}
.call-to-action.call-to-action-border {
	background: #fff;
	border: 1px solid #eee
}
.call-to-action.call-to-action-colored {
	background-color: #1abc9c
}
.call-to-action.call-to-action-colored h3,.call-to-action.call-to-action-colored p {
	color: #fff
}
.call-to-action.call-to-action-colored h3 span {
	color: #fff !important
}
.call-to-action.call-to-action-dark {
	background-color: #252525
}
.call-to-action.call-to-action-dark h3,.call-to-action.call-to-action-dark p {
	color: #fff
}
.call-to-action.cta-center {
	text-align: center
}
.call-to-action.cta-center [class*=col-] {
	width: 100%;
	clear: both;
	display: block
}
.call-to-action.cta-right {
	text-align: right
}
@media (max-width: 991px) {
	.call-to-action {
		padding:26px 12px 18px
	}
	[class*=col-]>.call-to-action {
		padding: 26px 26px 18px
	}
}

/* Vertical align https://stackoverflow.com/a/27771750/6316091 */
@media (min-width: 992px) {
	.row-md-flex-center {
		display: flex;
		align-items: center;
	}
}


/* Copyrights */
#kiosoft{
	display: block;
	text-align : center !important;
	padding-top : 1em;
	font-size: 13px;
	text-decoration: none;
	text-align: right;
}
#kiosoft a{
	/*color: #555;*/
}
#kiosoft a:hover{
	color: #ED6B44;
}