.top{
text-align:center;
padding:0.25rem 10%; font-weight:bold;
font-size:0.9rem;
z-index:999;
height:32px;
}
.top span{
display:inline-block; vertical-align:middle;
}
.top span.phone{
width:1rem; height:1rem; margin-right:0.25rem;
background: url(//www.paysagiste-dreamis.fr/wp-content/themes/dreamis/css/img/phone-call.svg) no-repeat center / contain
}
.top a{
color: var(--blanc) !important;
}
header{
position:sticky; top:0;
padding:1rem 5% 0 5%;
z-index:999;
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 50%, rgba(146,214,135,1) 100%); background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 50%,rgba(146,214,135,1) 100%); background: linear-gradient(to right,  rgba(255,255,255,1) 50%,rgba(146,214,135,1) 100%); -webkit-transition:all 0s linear; transition:all 0s linear; 
}
header .slogan{
font-weight:500;
font-size:0.8rem;
line-height:1.2;
width:80%
}
header .icomobile{
width:30px; height:30px;
position:absolute; right:0; top:50%;
-webkit-transform: translateY(-50%);transform: translateY(-50%);
}
header .icomobile .trt{
position:absolute;
left:50%; top:50%;
width:80%; height:3px; background-color: var(--noir);
-webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg);
-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
header .icomobile .trt.un{
margin-top:-7px
}
header .icomobile .trt.dx{
margin-top:7px
}
header .icomobile.actif .trt.dx{
opacity:0;
}
header .icomobile.actif .trt.un{
margin:0;
-webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
}
header .icomobile.actif .trt.tr{
margin:0;
-webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
}
.menu-principal-container{
display:none;
}
.home header a.accueil{
pointer-events: none;
}
a.accueil{
display:inline-block;
padding: 0.5rem;
background-color: var(--blanc);
border-radius:0.5rem;
}
a.accueil img{
width:100%; max-width:92px;
-webkit-transform:scale(1.1);transform:scale(1.1);
-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
header.scroll{
padding-top:0;
}
header.scroll a.accueil img{
max-width:80px;
}
header .avis{
display:none;
}
@media screen and (min-width:640px){
a.accueil img{
-webkit-transform:scale(1);transform:scale(1);
}
header .slogan{
font-weight:bold;
font-size:1.35rem;
}
}
@media screen and (min-width:800px){
header .avis{
display:block;
position: absolute; right:1rem; top:0rem;
-webkit-transform: translateY(-25%); transform: translateY(-25%);
}
}
@media screen and (min-width:1200px){
.icomobile{
display:none;
}
.top, header{
padding-left:2%; padding-right:2%;
}
.home header{
position:fixed; left:0; top:30px;
width:100%;
background: none;
-webkit-transition:all 0s linear; transition:all 0s linear;
box-sizing:border-box;
}
.home header.scroll{
top:0;
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 50%, rgba(146,214,135,1) 100%); background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 50%,rgba(146,214,135,1) 100%); background: linear-gradient(to right,  rgba(255,255,255,1) 50%,rgba(146,214,135,1) 100%); }
header ul.rs{
list-style:none; margin:0; padding:0;
flex-wrap: wrap;
align-items: center;
justify-content: start;
}
header ul.rs li{
margin-right:0.5rem;
}
header ul.rs li a{
display:block;
width:34px; height:34px;
border-radius: 50%;
background-color: var(--vert);
}
header ul.rs li a:hover{
background-color: var(--orange);
}
header ul.rs li a img{
position: absolute; left:50%; top:50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width:18px;
}
header .avis{
right:1rem; top:0.5rem;
-webkit-transform: translateY(0); transform: translateY(0);
}
header .slogan{
font-size:1.5rem;
margin-top:0; margin-bottom:0;
width:95%;
padding-top:0.5rem; padding-bottom:1rem;
}
.home header .slogan{
padding-top:2rem; 
}
.menu-principal-container{
display:block;
}
.menu-principal-container ul{
list-style:none;
margin:0; padding:0;
display:flex;
}
.menu-principal-container ul li{
text-transform:uppercase; font-weight:500;
margin-right:2px; font-size:0.8rem;
background-color: var(--vert);
-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
.menu-principal-container ul li.terrassteel{
background-color: var(--orange);
}
.menu-principal-container ul li.terrassteel a span{
display:none;
}
.menu-principal-container ul li a{
display:block; padding:0.75rem 0.45rem;
color: var(--blanc)
}
.menu-principal-container ul li.terrassteel a{
height:100%; width:160px;
background: url(//www.paysagiste-dreamis.fr/wp-content/themes/dreamis/css/img/terrassteel-menu.png) no-repeat center / contain;
}
.menu-principal-container ul li:hover{
background-color: var(--noir);
}
.menu-principal-container ul ul.sub-menu{
display:none;
position:absolute; left:50%; top:100%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
min-width:200%; max-width:200%;
}
.menu-principal-container ul ul.sub-menu li{
border-bottom:1px solid var(--grisclair);
text-transform: none; font-weight:300;
background-color: var(--grismedium);
}
.menu-principal-container ul ul.sub-menu li:last-child{
border-bottom:none;
}
.menu-principal-container ul ul.sub-menu li:hover{
background-color: var(--noir);
}
}
@media screen and (min-width:1280px){
.top, header{
padding-left:2.5%; padding-right:2.5%;
}
}
@media screen and (min-width:1440px){
.menu-principal-container ul li a{
display:block; padding-left:1rem; padding-right:1rem;
color: var(--blanc)
}
.menu-principal-container ul li a{
padding:0.75rem;
}
}
@media screen and (min-width:1680px){
.top, header{
padding-left:5%; padding-right:5%;
}
.menu-principal-container ul li{
font-size:0.9rem;
}
.menu-principal-container ul li a{
padding:1rem 1.15rem;
}
}
@media screen and (min-width:1920px){
header{
padding-left:10%; padding-right:10%;
}
.menu-principal-container ul li{
font-size:0.95rem;
}
}