@charset "UTF-8";

@font-face {
  font-family:Bold;
  src: url(font/BebasNeue-Bold.otf);
}
@font-face {
  font-family:Book;
  src: url(font/BebasNeue-Book.otf);
}
@font-face {
  font-family:Sans;
  src: url(font/PTSans.ttc);
}


body {
    height:100%;
}

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

header {
height: 100vh;
  min-height: 700px;
  background-image: url('img/header.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.logo1 {
    padding:115px 0px 0px 95px;
}

.bleu {
  height: 100vh;
  min-height: 700px;
  background-color:rgba(0, 68, 122, 0.85);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color:white;

}

.txtheader h1 {
    padding: 125px 0px 0px 0px;
    font-family:Bold;
    font-size:65px;
}

.txtheader p {
    padding: 5px 0px 0px 0px;
    font-family:Sans;
    font-size:19px;
}

.bouton {
    background-color:#62a0d6;
    text-decoration:none;
    color:white;
    font-family:Book;
    font-size:18px;
    padding:8px 50px 8px 50px !important;
    border:none;
    transition:0.3s;
    letter-spacing: 2px;
    margin:20px 0px 0px 0px;
}

.bouton:hover {
    background-color:white;
    color:#62a0d6;
    transition:0.3s;
    
}

button:focus {
    outline:0;
    
}
a {
    outline:none;
    text-decoration:none;
}

a:hover {
    outline:none;
    text-decoration:none;
    color:#62a0d6;
}
.txtheader span {
    color:#62a0d6;
}


.picto{
padding:175px 270px 0px 0px; 

}

.picto img{
margin: 0px 5px 0px 5px;

}

.picto img:hover, .picto2 img:hover, .picto3 img:hover {
   opacity: 0.5;
}

.picto2 img{
padding:30px 0px 150px 0px !important; 
margin:0px 5px 0px 5px;
    
}

    
.picto3 img{
margin: 0px 5px 0px 5px;

}

/* ---- À PROPOS ---- */


.txtpropos{
    color:#00447A;
}

.txtpropos h1{
    font-family:Bold;
}
.txtpropos p{
    font-family:Sans;
}



/* ---- FOOTER ---- */
footer {
    background-color:#00447A;
    color:white;
    padding: 60px 0px 60px 0px;
    font-family:Sans;
}


footer a {
    color:white;
}

.bord {
    border-left: 3px solid #62a0d6;
}

.reseaux3 {
    padding:0px 0px 0px 132px;
}

/* ---- MEDIA QUERY POUR MOBILE ---- */

@media screen and (max-width: 767px) {
    
    header{
        max-height:400px;
    }
    .bleu{
        max-height:400px;
    }
  
     .txtheader h1 {
        padding: 80px 0px 0px 0px !important;
        margin-top:40px;
        font-size:40px !important;
    }
    
    .txtheader p {
        font-size:15px !important;
    }
    
    .logo1 {
    padding:20px 10px 0px 10px;
    max-width:280px;
    display: block;
    margin-left: auto;
    margin-right: auto 
    }
    
    .bouton {
        margin:20px 0px 0px 0px !important;
    }
    .picto2 {
        padding:0px 0px 0px 0px;
    }
    
    .boxprop{
        padding: 40px 10px 40px 10px;
    }
    
    .reseaux3 {
    padding:0px 0px 20px 80px !important;
    }
    
    .logo{
        max-width:280px;
        padding:0px 0px 20px 0px;
 
    }
    .bas {
        margin-top:20px !important;
    }
    
    .bord {
    border-left: 1px solid #62a0d6;
    }

    .list-unstyled{
    font-size:12px;
    }
  
}

@media screen and (min-width: 600px) {
  
    
    .boxprop{
        padding: 40px 10px 40px 10px;
    }
    
        header{
        min-height: 700px !important;
    }
    
     .bleu {
  
        min-height: 700px !important;
    }
  
}


/* ---- MEDIA QUERY POUR TABLETTE ---- */

@media screen and (max-width: 992px) {
  
    .reseaux3 {
    padding:0px 0px 0px 78px;
    }
  
}



@media screen and (max-width: 1668px) {
    
    .txtheader h1 {
        padding: 50px 10px 0px 10px;
        font-size:55px;
    }
    
      header{
        min-height: 800px !important;
    }
    
  .bleu {
  
        min-height: 800px !important;
    }

}