.transition-alt{transition: all 1s}
.mask{background: rgba(0,0,0,.74)}
.mask-alt{background: rgba(21, 47, 105, 0.81)}

.shadow{box-shadow: 3px 4px 11px 2px rgba(0, 0, 0, 0.22);}
.shadow-alt{box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .1);}

.text-shadow{text-shadow: 0px 4px 4px rgba(0, 0, 0, .25);}
.text-shadow-white{text-shadow: 0px 0px 4px rgba(255, 255, 255, .25);}

.blur{filter: blur(2px)}
.transparent{opacity: 0.82}
.transparent-alt{opacity: 0.07}
.transparent-alt-2{opacity: 0.54}
.transparent-alt-3{opacity: 0.45}

.icon.arrow-right-alt{background-image:  url("../icons-alt/right-arrow.svg");}
.icon.arrow-left-alt{background-image:  url("../icons-alt/right-arrow.svg");transform: rotate(180deg)}
.icon.arrow-down{background-image:  url("../icons-alt/right-arrow.svg");transform: rotate(90deg)}

.top-3-in{padding-top: var(--3px);}
.h3-alt{font-size: 1.77083vw; line-height: var(--h3-line-height);}
.h4-alt{font-size: 1.04167vw; line-height: var(--h4-line-height);}

.green{ color: #047063}
.bg-green{ background: #047063}

.lh-alt{line-height: 1.227}
.filigrane{
	white-space: nowrap;
	font-size : 15vw;
	transform: translateY(-45%);
	-webkit-text-fill-color: rgba(1,1,1,0);
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: var(--gray-color);
}
.filigrane-alt{
	white-space: nowrap;
	font-size : 3.229167vw;
	transform: translateY(25%);
	-webkit-text-fill-color: rgba(1,1,1,0);
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: rgba(96, 70, 11, .75);
}
#home .articles .filigrane{
	-webkit-text-stroke-color: rgba(7, 165, 146, 0.3);
}
.newsletter .filigrane{
	-webkit-text-stroke-color: rgba(107, 143, 146, 0.23);
}
.structure-alt .filigrane-alt{
	-webkit-text-stroke-color: rgba(153,127,34, .35);
	font-size : 5.9375vw;
	transform: translateY(0);
	left : calc(var(--25px));
} 
#home h2::after{
	content: "";
	position : absolute;
	left : 0;
	bottom : calc(-1 * (var(--10px) + var(--1px)));
	width : 6.875vw;
	height : var(--3px);
	
}
#home .services h2::after{
	background : var(--warning-color-alt);	
}
#home .projects h2::after{
	background : var(--error-color);	
}
#home .articles h2::after{
	background : var(--success-color-alt);
	left: 47%;
}

.icon.big-alt{
	min-width: calc(1.4 * var(--icon-big-size)); 
	width: calc(1.4 * var(--icon-big-size)); 
	height: calc(1.4 * var(--icon-big-size)); 
}

#home .services .icon.big-alt{
	transform : translateX(50%);
	opacity : .21;
}

@media(max-width:768px){
	.logo {font-size: 20px; font-weight: 900}
    #menu{max-height: 100vh; overflow: auto; z-index: -1; left: 100%}
    #menu.opened{left: 0%}
    .lh-alt{line-height: 1.23}
	.h3-alt{font-size: 7px;}
}

@media(min-width:768px){
    #menu li{transition: all .5s;}
    #menu li ul{display: none; max-width: 25vw; width: 25vw}
    #menu li:hover{color: var(--black-color);font-weight : 700}
    #menu li:hover ul{display: block; border-color: rgba(255,255,255,.15)}
    #menu li:hover ul li{border-color: rgba(255,255,255,.15)}
    #menu li ul li:hover{background-color: var(--gray-color); color: var(--warning-color-alt);}
}

@media(max-width:768px){
    #menu li ul{display:none; max-width: auto;width: 100%}
    #menu li ul.opened{display: block}
}

#banner{
	/* margin-bottom: calc(-1 * var(--80px)); */
	background : linear-gradient(0deg, #283335, #283335), #C4C4C4;
}
#homeBanner{min-height: 500px; height: calc(100vh);}
#homeSlider .slide-prev, #homeSlider .slide-next{height: 3.0729vw; width: 3.0729vw; min-height: 3.0729vw; min-width: 3.0729vw;background : #ECECEC; border-color : #ECECEC;}
#homeSlider .slide-prev{margin-right : var(--1px);}
#scroll-down > div:first-child{width : 1.404167vw; height: 2.21354167vw; }
@-webkit-keyframes example {
  0%  {background-color:var(--white-color); opacity: 1; top : -70%;}
  25% {background-color:var(--white-color); opacity: 1; top : -65%;}
  35% {background-color:var(--white-color); opacity: 0.9; top : -45%;}
  50% {background-color:var(--gray-color); opacity: 0.8; top : 0%;}
  75% {background-color:var(--gray-color); opacity: 0.6; top : 45%;}
  85% {background-color:var(--gray-color); opacity: 0.4; top : 65%;}
  100% {background-color:var(--gary-color); opacity: 0; top : 70%;}
}
@keyframes example {
  0%  {background-color:var(--white-color); opacity: 1; top : -70%;}
  25% {background-color:var(--white-color); opacity: 1; top : -65%;}
  35% {background-color:var(--white-color); opacity: 0.9; top : -45%;}
  50% {background-color:var(--gray-color); opacity: 0.8; top : 0%;}
  75% {background-color:var(--gray-color); opacity: 0.6; top : 45%;}
  85% {background-color:var(--gray-color); opacity: 0.4; top : 65%;}
  100% {background-color:var(--gary-color); opacity: 0; top : 70%;}
}
#scroll-down > div:first-child > span{
	margin-top: calc(var(--8px) + .04px);
	animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	-webkit-animation-name: example;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
}

#projectSlider {min-height: 29.6354167vw; height: 29.6354167vw;}
.projectSlider .slide-dot.active{opacity: 0.3;}
.articles figure{height: 16.14583vw;}
#home .shortcut-color article{height: 11.302083vw;}
#home .statistic .number{
	font-size : 4.89583vw;
	-webkit-text-fill-color: rgba(1,1,1,0);
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: var(--warning-color-alt);
}
.newsletter figure{min-height: 33.3854167vw; height: 33.3854167vw;}
::placeholder {color: var(--white-color);}
.os-filter::placeholder, .contact ::placeholder  {color: var(--black-color);}
.minister figure{height: 27.5vw; min-height: 27.5vw;}
.bg-town > div{height: calc(100% - var(--60px)); right: calc(100% - var(--20px)); top: var(--30px);background: #AA9033;}
.bg-town:hover > div{right: 0;}

@media(max-width:768px){
    #banner{margin-bottom: calc(-1 * var(--60px))}
	#homeBanner{min-height: 80vw; height: 80vw}
	#home h2::after{width : 10vw;}
	#homeSlider .slide-prev, #homeSlider .slide-next{height: 5vw; width: 5vw; }
	#home .statistic .number{font-size : 6vw; -webkit-text-stroke-width: 1px;}
	#projectSlider {min-height: 50vw; height: 50vw;}
	.articles figure{height: 50vw; width: 100%; min-width: 100%;}
    .minister figure{height: 60vw; min-height: 60vw}
	.filigrane-alt{font-size : 10vw;}
}
.yt-preview{width: 56.5625vw; height: 31.6145vw}
.flickr-frame, .youtube-frame, #article .slide-box{height: 38vw;}
.encart figure, .video figure{height: 15vw}
.encart-alt figure{height: 10vw}
textarea{height: 12vw}

@media(max-width:768px){
	.quote{transform: translateY(-60%)}
	.quote span{font-size: 80px;}
	.yt-preview{width: 80vw; height: 40vw}
	.encart figure{height: 125px}
	.video figure{height: 180px}
	.encart-alt figure{height: 90px}
	.flickr-frame, .youtube-frame, #article .slide-box{height: 220px;}
	textarea{height: 150px}
}

#homeSlider  .slide{
	-webkit-transition: all 1s;
	transition: opacity 2s, z-index .2s 1.8s;
    position: absolute;
    left:0;
    top:0;
    overflow: hidden;
    opacity: 0;
    z-index: 0;
}
#homeSlider  .slide.active{opacity: 1; z-index: 1;}

.special-link, #menu li:hover > * > span{position: relative}
.special-link::before, .special-link::after, #menu li:hover > * > span::before, #menu li:hover > * > span::after{
    position: absolute;
    height: var(--1px);
    content: "";
    display: block;
    right: 0px;
    /* background: var(--warning-color); */
    transition: all .5s;
    z-index: 1;
}

.special-link::before, #menu li:hover > * > span::before{
    bottom: calc(-1 * var(--1px));
    padding: 0px var(--20px);
}
.special-link::after, #menu li:hover > * > span::after{
    bottom: calc(-1 * var(--4px));
    padding: 0px 0px 0px var(--25px);
}
.special-link:hover::after{padding: 0px var(--20px);}

.special-link.sl-black::before, .special-link.sl-black::after {background: var(--black-color)}


#search .os-tab-head.active{
	border: 1px solid rgb(245,245,245);
	border-bottom: none;
	font-weight: 600;
}

#search .tabs{
	border: 1px solid rgb(245,245,245);
	border-top: none;
}
.article table{border-collapse: collapse;}
.page .article figure, .page .article figure table{width: 100%!important;}
.article table *{border-color: var(--gray-color)}
.article table td{padding: var(--10px) calc(2 * var(--10px))!important; text-align: left!important}

.title-h2{padding-top: var(--15px); font-weight: 500; color: var(--success-color); text-transform: uppercase}
.title-h3{padding-left: calc(3 * var(--10px)); margin-top: var(--10px)}
.title-h4{padding-left: calc(3 * var(--20px)); margin-top: var(--10px)}
.title-h2, .title-h3, .title-h4{
	border-bottom: 1px solid #bfbfbf;
	padding-bottom : var(--5px);
	font-size : var(--p-size-alt);
}
.title-h2:hover, .title-h3:hover, .title-h4:hover{
	background : #eee;
	font-weight: 600;
	transition : all .5s;
}
