*,::before ,::after{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
:root {
    --b1:#CDEAEA;
    --b2:#ADD3D4;
    --b3:#73A4AB;
    --b4:#3C7177;
    --b5:#337B7F;
    --b6:#2D444D;
}
body{
    font-family: Lato, Helvetica, sans-serif;
    background:snow;
}
.grid{
    display: grid;   
    grid-template-rows: 130px 300px 80px 290px;
    grid-template-columns: 10% 1fr 30px 1fr 10%;
}

.logo{
    grid-row:1/2;
    grid-column:1/3;
}
#logo{
    padding-top:10px;
    padding-left:10px;
    height:80%;
}

.list-icons-header{
    display: inline-flex;
    justify-content: right;
    align-items: center;
    margin-top: 5vh;
    
}
.icon-header{
    font-size:24px;
    color:var(--b5);
    margin-right:20px;
    cursor:pointer;
    margin:0 30px;
}
.icon-header:hover{
    color:var(--b6);
}

.toggle{
    grid-row:1/2;
    grid-column:5/6;
   
}
.title{
    grid-row:2/3;
    grid-column:2/5; 
    display: flex;
    justify-content: center;
    align-items: center;
}

h1{
    text-align:center;
    font-size:2rem;
    color:var(--b6);
    font-weight: 100;
    line-height: 50px;
    text-decoration: none;
}
h1 span{
    font-size:4rem;
    color:var(--b5);
    font-weight:600;
   
}
h1 #Bienvenue{
    color:var(--b5);
    font-weight:300;
}
.boutonChiotsDisponibles{
    grid-row:3/4;
    grid-column:2/3;
    display: flex;
    justify-content: left;  justify-content: right;
    align-items: center;
   
}
.boutonContactezNous{
    grid-row:3/4;
    grid-column:4/5;
    display: flex;
    justify-content: left;  
    align-items: center;
}

#boutonChiotsDisponibles{
    height:35px;
    width:190px;
    font-size: 13px;
    font-weight: 400;
  line-height: 2.1em;
  color: white;
  background:var(--b5);
  text-decoration: none;
  letter-spacing: 1px;
 border:none;
 cursor:pointer;
 box-shadow: 1px 1px 1px rgba(0,0,0, 0.1);
 border-radius: 7px;
}

#boutonContactezNous{
    height:35px;
    width:190px;
    font-size: 13px;
    font-weight: 400;
  line-height: 2.1em;
  background:var(--b6);
  color: white;
  text-decoration: none;
  letter-spacing: 1px;
  border:none;
  cursor:pointer;
  box-shadow: 1px 1px 1px rgba(0,0,0, 0.1);
  border-radius: 7px;
}

.container-index-img-BergerBlancSuisse{
        grid-row:4/5;
        grid-column:1/6;
        display: flex;
        justify-content: center;
        align-items: center;
}
.img-first-page{
    height:100%;
    width:330px;
    object-fit: cover;
}
.img-first-page1{
    object-position:0 0;
}
.img-first-page2{
    object-position:center;
}
.img-first-page3{
    object-position: 0 -150px;
}
.img-first-page4{
    object-position: center;
}

@media only all and (min-width:1024px) and (max-width:1311px){

    .grid{
        display: grid;
        grid-template-rows: 100px 170px 80px 290px;
        grid-template-columns: 10% 1fr 30px 1fr 10%;
    }
    h1{
        text-align:center;
        font-size:1.6rem;
        color:var(--b6);
        font-weight: 100;
        line-height: 50px;
        text-decoration: none;
    }
    h1 span{
        font-size:3.1rem;
        color:var(--b5);
        font-weight:600;
       
    }
}

@media only all and (min-width:768px) and (max-width:1023px){
    .grid{
        display: grid;
        grid-template-rows: 100px 170px 80px 290px; 
        grid-template-columns: 10% 1fr 30px 1fr 10%;
    }
    h1{
        text-align:center;
        font-size:1.4rem;
        color:var(--b6);
        font-weight: 100;
        line-height: 50px;
        text-decoration: none;
    }
    h1 span{
        font-size:2.6rem;
        color:var(--b5);
        font-weight:600;
       
    }
    .img-first-page{
        overflow:hidden;
    }
    .img-first-page3{
        display:none;
    }
    .img-first-page4{
        display:none;
    }
    .img-first-page{
        width:250px;
        height:219px;
        object-fit: cover;
    }
}

@media only all and (min-width:540px) and (max-width:767px){

    h1{
        text-align:center;
        font-size:1rem;
        color:var(--b6);
        font-weight: 100;
        line-height: 50px;
        text-decoration: none;
    }
    h1 span{
        font-size:3rem;
        color:var(--b5);
        font-weight:600;
       
    }
    .img-first-page{
        overflow:hidden;
    }

    .img-first-page1{
        object-position:0 0;
    }
    .img-first-page2{
        object-position:center;
    }
    .img-first-page3{
        display: none;
    }
    .img-first-page4{
        display:none;
    }
}
@media only all and (min-width:321px) and (max-width:539px){

    .grid{
        display: grid; 
        grid-template-rows: 100px 210px 50px 50px 290px;
        grid-template-columns: 2% 1fr 3% 1fr 2%;
    }
    .logo{
        grid-row:1/2;
        grid-column:1/2;
        display: flex;
        justify-content: left;
        align-items:flex-start;
    }
    #logo{
        height:70px;
    }
    .toggle{
        grid-row:1/2;
        grid-column: 3/4;
    }
    .title{
        grid-row:2/3;
        grid-column:2/5; 
        display: flex;
        justify-content: center;
        align-items: center;
    }

    h1{
        text-align:center;
        font-size:1rem;
        color:var(--b6);
        font-weight: 100;
        line-height: 50px;
        text-decoration: none;
    }
    h1 span{
        font-size:2.1rem;
        color:var(--b5);
        font-weight:600;
    }

    .boutonChiotsDisponibles{
        grid-row:3/4;
        grid-column:2/5;
        display: flex;
        justify-content: center;
        align-items: center;
        margin:0;
     
    }
    .boutonContactezNous{
        grid-row:4/5;
        grid-column:2/5;
        display: flex;
        justify-content: center;
        align-items: center;
        margin:0;
    }

    .container-index-img-BergerBlancSuisse{
        grid-row:5/6;
        grid-column:1/6;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }

    .img-first-page{
        width:100%;
        overflow: hidden;
    }

    .img-first-page1{
            display:none;
        }
    .img-first-page3{
            display:none;
        }
    .img-first-page4{
            display:none;
        }
}

@media only all and (min-width:1px) and (max-width:320px){
    .grid{
        display: grid; 
        grid-template-rows: 100px 210px 50px 50px 210px;
        grid-template-columns: 2% 1fr 3% 1fr 2%;
    }
 
    .logo{
        grid-row:1/2;
        grid-column:1/2;
        display: flex;
        justify-content: left;
        align-items:flex-start;
    }
    #logo{
        height:70px;
    }
    .toggle{
        grid-row:1/2;
        grid-column:5/6;
    }
    .title{
        grid-row:2/3;
        grid-column:2/5; 
        margin:0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    h1{
        text-align:center;
        font-size:0.7rem;
        color:var(--b6);
        font-weight: 100;
        line-height: 50px;
        text-decoration: none;
    }
    h1 span{
        font-size:1.8rem;
        color:var(--b5);
        font-weight:600;
       
    }
    .boutonChiotsDisponibles{
        grid-row:3/4;
        grid-column:2/5;
        display: flex;
        justify-content:center;
        align-items: center;
    }
    .boutonContactezNous{
        grid-row:4/5;
        grid-column:2/5;
        display: flex;
        justify-content:center;
        align-items: center;
    }
    .container-index-img-BergerBlancSuisse{
        grid-row:5/6;
        grid-column:1/6;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .img-first-page{
        width:100vw;
        object-fit: cover;
        overflow: hidden;
    }
    .img-first-page1{
            display:none;
        }
    .img-first-page3{
            display:none;
        }
    .img-first-page4{
            display:none;
        }
}