@import "color4.css";


body {font-family: "Roboto", sans-serif !important;}
h1,h2,h3,h4,h5,h6,.site-title,.font {font-family: "Domine", sans-serif !important;}
body, html {
  height: 100%;
  color: var(--text-color);
  line-height: 1.8;
  background-color: var(--background);
}

.no-margin{
  margin:0;
}

@media (min-width:1201px){
  .hide-xlarge{
    display: none!important;
  }
}
@media (max-width:1200px){
  .display-xlarge{
    display: none!important;
  }
}

.font-42{
  font-size:42px;
}

.site-title,footer{
  color:var(--white);
  background-color: var(--primary-color);
}
h3{
  color:var(--white);
  background-color: var(--primary-color);
  border-radius: 5px;
}

.site-title>img{
  height: 36px;
  margin: 2px 0;
  float: left;
}
.site-title{
  /*margin: -7px;*/
}
.site-sub-title{
  margin: -8px;
  display: block;
}

.w3-top{
  box-shadow: 0 0 10px #3a3a3a;
}
.btn-close{
  margin: -30px -3%;
  position:relative;
  color:  var(--text-color)!important;
}

.main-title>span{
  display: block;
}

.linkedin {
  margin-top: -3px;
  filter: var(--linkedin);
}

.sub-title{
  margin-top: 25px;
}
.sub-title>span{
  color:var(--subtitle);
  display: block;
  margin-top: -10px;
}
.logo{
    width: 100%;
    max-width: 680px;
    white-space: nowrap;
    margin:auto;
}
.logo>div{
  margin: 24px 24px!important;
}

hr.hr-tree {
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
width: 85%;
margin : 0 auto;
}
hr.hr-tree:before {
display: block;
content: "";
height: 30px;

margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}

.logo hr{
  border:  none;
  background-image : url('../img/hr2.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 15px;
  margin: -12px 0;
    filter: var(--linkedin);
}

.margin-top-ul{
  margin-top: -1rem;
}

.btn-p{
  background-color: var(--primary-color);
  border: none;
  display: block;
  text-align: center;
  margin: auto;
  color: var(--white);
  cursor: pointer;
}
.btn-p:hover{
  color: var(--subtitle);
  background-color: var(--white);

}

.no-hover:hover{
  color: inherit!important;
  background-color:inherit!important;
}

@media (min-width:551px) and (max-width:680px){
  .logo, .parallax-text{
    zoom: 80%;
  }
}
@media  (min-width:451px) and (max-width:550px){
  .logo, .parallax-text{
    zoom: 70%;
  }
}
@media  (min-width:401px) and (max-width:450px){
  .logo, .parallax-text{
    zoom: 62%;
  }
}
@media  (min-width:351px) and (max-width:400px){
  .logo, .parallax-text{
    zoom: 55%;
  }
}
@media (max-width:350px){
  .logo, .parallax-text{
    zoom: 50%;
  }
}


.bg-primary-color{
  background-color: var(--primary-color);
}


.bg-theme1{   background-color:#942239 !important; }
.bg-theme2{   background-color:#7C1B2F !important; }
.bg-theme3{   background-color:#651626 !important; }
.bg-theme4{   background-color:#4F111E !important; }
.bg-theme5{   background-color:#380C15 !important; }

.w3-content>p, .w3-col>p{
    text-align: justify;
}
@media (min-width:500px){
  .w3-content>p, .w3-col>p, h5 {
      padding: 0 1em;
  }
  h5 {
      text-align: justify;
  }
}

.mention > span{
  display: block;
}
.w3-padding-bottom-24{
  padding-bottom: 24px;
}

.no-padding-top{
  padding-top:0!important;
}

.parallax-text{
  background-color: var(--parallax);
  padding: 8px 16px;
  padding-left: 20px;
  letter-spacing: 5px;
  filter: drop-shadow(5px 5px 5px var(--parallax));
  color: var(--third-color);
  border-radius: 10px;
}
@media (min-width:680px){
  .mg-top-64{
    margin-top: 64px;
  }
}

.contact{
  max-width: 80rem;
  margin: auto;
}
@media (min-width:1000px){
  .contact-table{
    display: flex;
    margin-left: 35px;
    margin-right: 35px;
  }
  .contact-cell{
    flex: 50%;
  }
  .contact-text{
    margin-top: 1rem;
  }
  .publication{
    display: grid;
     justify-content: center;
     grid-template-columns: repeat(4, 24% );
     grid-gap: 5px;
   }
}

#inner-mentions{
  height: 95%;
}
#inner-mentions > .responsive{
  overflow: auto;
  height: 100%;
  margin-top: 10px;
}


@media (min-width:681px) and (max-width:999px){
  .contact-text{
    padding-left: 25%;
  }
  .contact-table{
    margin-left: 35px;
    margin-right: 35px;
  }

  .portrait-container{
    padding: 0!important;
  }
  .publication{
    display: grid;
    justify-content: center;
     grid-template-columns: repeat(2, 49% );
     grid-gap: 5px;
   }
}

@media (max-width:680px){
  .contact-text > .small-block{
    display: block;
    margin-left: 15px;
  }
}

 .font-primary-color, .button-primary-color{
  color: var(--primary-color);
}
.fa,.domaine-cell > .fa, .font-secondary-color{
  color: var(--secondary-color);
}
.button-primary-color{
  border: var(--primary-color) 1px solid;
  min-width: 100px;
}

@media (min-width:681px){
  .domaine-cell{
    flex: 31.33%;
    display: flex;
  }
  .domaine-cell > .domaine-title{
    padding-top: 30px ;
    -webkit-box-shadow: 4px 0px 6px -6px grey;
    -moz-box-shadow: 4px 0px 6px -6px grey;
    box-shadow: 4px 0px 6px -6px grey;
  }

}

@media (max-width:680px){
  .domaine-cell > .domaine-title{
    -webkit-box-shadow: 0 4px 6px -6px grey;
    -moz-box-shadow: 0 4px 6px -6px grey;
    box-shadow: 0 4px 6px -6px grey;
  }
}

.domaine-cell{
  background-color: var(--tablecell);
  margin:15px;
  -webkit-box-shadow:  4px 4px 10px 0px grey;
  -moz-box-shadow:  4px 4px 10px 0px grey;
  box-shadow:  4px 4px 10px 0px grey;
}
.domaine-content{
  padding: 0 15px 15px 20px;
  flex: 80%
}
.domaine-title{
  background-color: var(--white);
  padding-top: 15px;
  font-weight: bold ;
  flex: 20%;
}

.bg-white{
  background-color: var(--white);
}
.portrait-h{
  max-width: 90%;
}
.portrait-w{
  max-width: 90%;
}



.parallax {
  background-attachment: fixed;
    background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px;
}


.bgimg-1 {
  background-image: url('../img/parallax1.jpg');
  min-height: 100%;
  background-attachment: fixed;
  background-position: center right;
  background-repeat: repeat;
  background-size: cover;
}


.bgimg-2 {
  background-image: url("../img/parallax2.jpg");
}

.bgimg-3 {
  background-image: url("../img/parallax3.jpg");
}

.bgimg-4 {
  background-image: url("../img/parallax4.jpg");
}
.bgimg-5 {
  background-image: url("../img/parallax5.jpg");
}
.bgimg-6 {
  background-image: url("../img/parallax6.jpg");
}
.bgimg-7 {
  background-image: url("../img/parallax7.jpg");
}


.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

@media (max-width: 1080px) {
  .bgimg-1, .parallax {
    background-attachment: scroll;
  }
}

@media (min-width: 1600px) {
  .parallax {
    min-height: 400px;
  }
}


#mapid{
  height: 300px;
  z-index: 0;
  text-align: center;
}
.cropped{
  overflow: hidden;
  margin: auto;
}

@media (min-width:401px) and (max-width:530px){
  .cropped{
    width: 350px;
  }
  .cropped img{
      margin-left: -15%;
  }
}

@media (min-width:351px) and (max-width:400px){
  .cropped{
    width: 300px;
  }
  .cropped img{
      margin-left: -26%;
  }
}
@media (min-width:261px) and (max-width:350px){
  .cropped{
    width: 250px;
  }
  .cropped img{
      margin-left: -38%;
  }
}

@media  (max-width:260px){
  .cropped{
    width: 200px;
  }
  .cropped img{
      margin-left: -62%;
  }
}