@font-face {
    font-family: 'a_regular';
    src: url('../fonts/a_regular.otf');
}
@font-face {
    font-family: 'a_bold';
    src: url('../fonts/a_bold.otf');
}
@font-face {
    font-family: 'a_italic';
    src: url('../fonts/a_italic.otf');
}
@font-face {
    font-family: 'a_condensed';
    src: url('../fonts/a_condensed.otf');
}

::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: rgba(210, 177, 148, 0.53);
}

::selection {
    color: #fff;
    background: rgba(210, 177, 148, 0.53);
}


body{
	font-family: "a_regular";
	letter-spacing: 1px;
	-webkit-font-smoothing: antialiased;
}

/*#nav-sousmenu2 li:not([style*="display:none"]):not([style*="display: none"]):last-child{

opacity: 0.2;

}*/
#contact-txt-w {

	 width: 100%;
    font-size: 18px;
    color: #848484;

}


#contact-txt-w h1{

    font-size: 40px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: #000;

}




#art-2-img-w {

	width: 100%;
	margin-top: 30px;

}


.img100 {

	width: 100%;
	margin-bottom: 12px;

}

#vid-txt h1 {

	font-size: 18px;
	margin-top: 9px;
	margin-bottom: 1px;

}

#vid-txt h2 {
	color: #f18181;
	font-size: 12px;
}

.art-1 {

	display: flex;
}

.art {

	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 50px;
}


@media (max-width: 768px) {


#art-1-img img{

    width: 100%;

}


#art-1-img{

    width: 100%;

}

}

@media (min-width: 769px) {


#art-1-img img{

	/*width: 100%;*/
    max-height: 600px;
}


#art-1-img{

    /*width: 65%;*/
    max-width: 70%;
}

}


@media (min-width: 600px) {

  .img100 {
      width: 46%;
      margin-left: 2%;
      margin-right: 2%;
  }
}

.art-2-txt-class{

	/*width: 32%;*/
    margin-left: 3%;
}


#art-2-txt h1 {
    font-size: 40px;
    letter-spacing: 2px;
    display: inline-block;
    text-decoration: none;
    border-bottom: 4px solid black;
    line-height: 44px;

}

#art-2-txt h2 {
	line-height: 24px;
	display: inline;
	font-size: 16px;
    letter-spacing: 2px;
	font-family: "a_condensed";
	color: #4a7aa7;
	margin-left: 2px;
	margin-top: 3px;
}

#art-2-txt h3 {
    font-size: 13px;
    letter-spacing: 2px;
    color: #fff;
    background-color: #0e0e0e;
    display: inline-block;
    margin-top: 16px;
    padding: 5px 7px 5px 9px;
    border-radius: 1px;
    text-transform: uppercase;
}

#art-2-txt p {
	font-family: "a_italic";
    font-size: 20px;
    line-height: 28px;
    margin-top: 40px;
    margin-bottom: 30px;
    color: #808080;
}

#w25 {
	width: 21.5%;
    margin-bottom: 45px;
    margin-right: 4.6666%;
    opacity: 1;
    -webkit-transition: opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -o-transition: opacity 0.1s ease-in-out;
    -ms-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
    cursor: pointer;
}



#w25:hover {
	opacity: 0.7;

}


#w25:nth-child(4n+4) {
    margin-right: 0;
}

#vid-img {
	width: 100%;
	background-size: cover;
    justify-content: center;
    align-items: center;
    background-position: left;
}
/*#vid-img img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}
*/

#about-txt{

	 width: 100%;
	 margin-left: auto;
	 margin-right: auto;
	 margin-bottom: 50px;

}

#about-txt h1{

    margin-bottom: 29px;
    margin-top: 16px;
    font-size: 42px;

}

#about-txt p{

	font-size: 19px;
    line-height: 25px;
    color: #999;

}

#nav-menu{
	height: 50px;

}
#logo-w{
	position: absolute;
	width: 180px;
	height: 40px;
}
#logo{
	background-image:url(../images/logo.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size:100%;
	width: 150px;
	height: 40px;
	cursor: pointer;
}
#logo:hover{
	opacity: 0.8;
}
#nav-txt li.active{
	border: 2px solid black;
}

#nav-txt li.active:hover{
	opacity: 0.8;
}

.tiret {

opacity: 0.5;
}

#nav-sousmenu {

    font-size: 16px;
    letter-spacing: 2px;
    font-family: "a_condensed";
    text-transform: uppercase;
}

#nav-sousmenu ul li{
    margin-left: 50px;
}
#nav-sousmenu ul li:first-child{
	margin-left: 0px
}
#nav-sousmenu li a{
    padding: 0px 0px 8px 0px;
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}
#nav-sousmenu li a:hover{
	opacity: 1;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
#nav-sousmenu li a.active{
	opacity: 1;
    border-bottom: 2px solid;
}


#nav-sousmenu2-w {
	margin-top: 65px;
    margin-bottom: 25px;

}
#nav-sousmenu2 li{

    display: inline;
    text-align: center;
    margin-right: 16px;
    margin-left: 2px;
    letter-spacing: 0.8px;
    font-size: 15px;
}

#nav-sousmenu2 ul li:last-child{
	display: none;
}
#nav-sousmenu2 li a{

    cursor: pointer;
    opacity: 0.5;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
#nav-sousmenu2 li a:hover{
	opacity: 1;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
#nav-sousmenu2 li a.active{
	opacity: 1;
}

#contact-txt-w div{

	width: 100%;
	margin-bottom: 40px;

}


#txt-intro {
    font-size: 40px;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 135px;
}


.spanclass {

  cursor: pointer;
  margin-right: 10px;

}

#close-w {

  width: 100%;
  height:1px;
}

#spanmob {

    width: 100%;
    text-align: right;
    padding-top: 7px;
    font-size: 22px;
    transition: 0.2s;
    opacity: 1;
    color: #000;

}

#spanmob:hover {

  opacity: 0.6;
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #fff; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.2s; /* 0.5 second transition effect to slide in the sidenav */
    display: block;
}

/* The navigation menu links */


.sidenav a.active {
  color: #000;
}


.sidenav a {
    font-family: "a_condensed";
    padding: 0px 9px 12px 0px;
    text-decoration: none;
    font-size: 21px;
    text-transform: uppercase;
    color: #bbb;
    display: block;
    transition: 0.2s;
    letter-spacing: 1px;
    text-align:  right;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #000;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    color: #000;
    padding-top: 4px;
    position: absolute;
    top: 0;
    right: 3px;
    font-size: 29px;
    margin-left: 50px;
    font-family: "a_italic";
/*    width: 100%;*/
    opacity: 1;
    transition: 0.2s;
}

.sidenav .closebtn:hover {
  opacity: 0.6;
}

@media (min-width: 769px) {
#logo{
	float: left;
}
#nav-txt {
	line-height: 28px;
	font-size: 16px;
	float:right;
	margin-top: 6px;
}

#contact-txt-w div{

	width: 50%;
	margin-bottom: 40px;

}


#nav-txt li{
	display: inline;
	margin-left: 55px;
    font-family: "a_condensed";
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1.5px;
    padding: 5px 2px 6px 7px;
    margin-left: 45px;
	border: 2px solid #fff;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

#nav-txt li:last-child{
	margin-right: 0px;
}

#nav-txt li:hover{

	border: 2px solid #111;

}

#art-2-img {

	width: 70%;
	margin-left: auto;
	margin-right: auto;

}

#contact-txt-w {

	  display: inline-flex;


}



#spanmob {
  display: none;
}

.sidenav {
  display: none;

}

#nav-menu{
    margin-top: 25px;
    margin-bottom: 90px;
}

#nav-sousmenu li{
    display: inline;
}

}

@media (max-width: 769px) {

#nav-sousmenu li a {


     display: inline-block;

}

#nav-sousmenu ul li {

     margin-left: 0px;
    margin-bottom: 10px;


}

#w25 {

	min-width: 100%;
	margin-right: 0px;
}

#nav-txt {

    display: none;
}

#art-1-img, #art-2-txt, .art-2-txt-class {
	width: 100%;
	margin-left: 0;
}

.art-1 {
display: block;
}

#art-2-img {

	width: 100%;

}

#contact-txt-w {

      display: block;
}

#nav-menu{
    margin-top: -31px;
    margin-bottom: 40px;
}

}