@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;400;600;800');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500');

* {
   padding:0;
   margin:0;
}

body {
   font-family:'Dosis', sans-serif;
   font-size:24px;
   font-weight:200;
   opacity:1;
   transition:0.15s;
}

h1 {
   font-size:42px;
   font-weight:600;
}

div,
img,
label,
input {
   display:block;
}

img {
   max-width:100%;
   height:auto;
}

a {
   color:#000;
   transition:0.2s;
}

a:hover {
   color:#7d7d7d;
   transition:0.2s;
}

header {
   margin:20px 0;
}

header img {
   margin:0 auto;
}

#devanture {
   background-image:url("images/encadreur-a-montreal-devanture.jpg");
   background-repeat:no-repeat;
   background-size:cover;
   background-attachment:fixed;
   background-position:center;
   width:100%;
   height:300px;
   margin-bottom:70px;
}

.container {
   max-width:1440px;
   width:100%;
   padding:0 60px;
   box-sizing:border-box;
   margin:0 auto;
}

main .row {
   margin-top:60px;
}

.row {
   display:flex;
   flex-wrap:nowrap;
   width:100%;
}

.col-2-gauche {
   padding-right:30px;
   box-sizing:border-box;
   max-width:50%;
   width:100%;
   float:left;
}

.col-2-droite {
   padding-left:30px;
   box-sizing:border-box;
   max-width:50%;
   width:100%;
   float:left;
}

.entry-title {
   margin:50px 0 30px;
   text-align:center;
}

.entry-content {
   margin:0 auto;
   max-width:1000px;
}

.principal {
   font-size:28px;
   text-align:center;
   padding:20px 0 30px;
}

.col-2-gauche .entry-content {
   text-align:center;
}

ul {
   padding-left:24px;
}

li {
   list-style:none;
}

.carrousel {
   position:relative;
   max-width:393px;
   margin:0 auto;
   z-index:1;
}

.carrousel .image-carrousel {
   position:absolute;
   right:0;
}

.heures {
   font-family:'Open Sans', sans-serif;
}

.separation {
   height:1px;
   width:60%;
   margin:60px auto;
   background-color:#e6e6e6;
}

footer .row {
   margin-bottom:60px;
}

footer img {
   margin:0 auto;
}

/*----------------------------------------------------------------
------------------------------------------------------------------
Connexion
------------------------------------------------------------------
------------------------------------------------------------------*/

.connexion-container {
   max-width:1440px;
   width:100%;
   padding:0 60px;
   box-sizing:border-box;
   margin:0 auto;
}

.connexion-container img {
   margin:100px auto 40px;
}

.connexion-container form {
   max-width:400px;
   padding:30px;
   box-sizing:border-box;
   margin:0 auto 100px;
   background-color:#fff;
   box-shadow:1px 1px 8px #c0c0c0;
}

input {
   margin:8px 0 20px;
   border:1px solid #a0a0a0;
   font-size:16px;
   border-radius:6px;
   padding:8px 15px;
   box-sizing:border-box;
   width:100%;
}

input:hover, input:focus {
   outline-style:none;
   outline:none;
   border:1px solid #c8c8c8;
   box-shadow:0 0 6px #f7941e;
   transition:0.5s;
}

button {
   font-size:16px;
   font-weight:700;
   border:0;
   background-color:#f7941e;
   border-radius:6px;
   margin:20px 0 0;
   padding:12px 15px;
   box-sizing:border-box;
   width:100%;
   cursor:pointer;
}

button:hover, button:focus {
   background-color:#f7ac51;
   transition:0.5s;
}

.erreur {
   font-size:17px;
   margin-bottom:10px;
   text-align:center;
   color:#d30303;
}

/*----------------------------------------------------------------
------------------------------------------------------------------
Adaptatif
------------------------------------------------------------------
------------------------------------------------------------------*/

@media screen and (max-width:820px) {
   h1 {
      font-size:36px;
      line-height:42px;
   }

   .principal {
      font-size:26px;
   }
}

@media screen and (max-width:780px) {
   header {
      margin:40px 0;
   }
   h1 {
      font-size:36px;
      line-height:42px;
   }

   #devanture {
      background-attachment:unset;
      background-position-y:0!important;
      margin-bottom:50px;
      height:360px;
   }

   .row {
      flex-wrap:wrap
   }

   main .row {
      margin-top:10px;
   }

   .col-2-gauche,
   .col-2-droite {
      float:unset;
      max-width:100%;
      padding:0;
   }

   .principal {
      font-size:26px;
   }

   .carrousel {
      margin-top:40px;
      max-width:100%;
   }

   .carrousel .image-carrousel {
      margin:0 auto;
      right:unset;
      left:50%;
      transform:translateX(-50%);
   }

   .separation {
      background-color:unset;
      height:0;
   }

   footer img {
      margin-top:20px;
   }
}

@media screen and (max-width:480px) {
   .separation {
      margin:unset;
   }
}

@media screen and (max-width:420px) {
   header img {
      padding:0 25px;
      box-sizing:border-box;
   }
}

@media screen and (max-width:400px) {
   header img {
      padding:0 25px;
      box-sizing:border-box;
   }

   .container {
      padding:0 30px;
   }
}