/* ------------------- Reset ----------------------------------- */
@media {
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
        margin:0;
        padding:0;
    }
    table{
        border-collapse:collapse;
        border-spacing:0;
    }
    fieldset,img{
        border:0;
    }
    address,caption,cite,code,dfn,th,var{
        font-style:normal;
        font-weight:normal;
    }
    caption,th{
        text-align:left;
    }
    h1,h2,h3,h4,h5,h6{
        font-size: 22px;
        font-size: 1.5vw;
        font-weight:normal;
    }
    q:before,q:after{
        content:'';
    }
    abbr,acronym{
        border:0;
    }
}  
@media screen and (max-width: 617px) and (min-width: 100px){  /* -------------------PHONE ------------------------------- */ 
      /* SORT OUT LINKS */
      a:link {
        text-decoration: none;
        color: inherit;
      }
      
      a:visited {
        text-decoration: none;
        color: inherit;
      }
      
      a:hover {
        text-decoration: none;
        color: inherit;
      }
      
      a:active {
        text-decoration: none;
        color: inherit;
      }
    @keyframes fadein{
        0%{
            opacity: 0;
        }
       
        100% {
            opacity:1;
        }
    }
    @keyframes slidein{
        0%{
            left: -50%;
        }
       
        100% {
            left:5%;
        }
    }
    @keyframes fadeaway{
      0%{
          opacity: 1;
      }
     
      100% {
          opacity:0;
      }
  
  }
.wrapper{
    left:0px;
    top:0px;
    width:100vw;
    margin: 0px;
    padding: 0;
    border:0;
    float:left;
    max-height:5500px;
    overflow:hidden;
   
   

}
.fullpage{
width:100vw;
height:5400px;
display:inline-block;
position: absolute;
margin:0px;
padding:0;
float:left;
left:0px;
top:0px;
border:0;
overflow:hidden;
/*background:  url("/images/Hero_Home_BKGD_003.jpg") no-repeat center center;*/

}
.background-wrapper.{
height:5400px;
width:100vw;  
position:absolute;

display: inline-block;
}
.background-image-1{
  height: 1500px;
width:100vw;
position:relative;

background:  url("/images/Background_Image_1.jpg") no-repeat center center;
background-size:cover;


}
.background-image-2{
  height: 1500px;
  width:100vw;
  position:relative;

  background:  url("/images/Background_Image_2.jpg") no-repeat center center;
  background-size:cover;
}
.background-image-3{
  height: 900px;
  width:100vw;
  position:relative;

  background:  url("/images/Background_Image_3.jpg") no-repeat center center;
  background-size:cover;
}
.background-image-4{
  height: 1500px;
  width:100vw;
  position:relative;
  background:  url("/images/Background_Image_4.jpg") no-repeat center center;
  background-size:cover;
}
.logo{
position: absolute;
 display:flex;
 align-items: center;
 justify-content: center;
 max-width:95%;
 max-height: 4%;
 left:3%;
 
 top:0.5%;
}
.logo-image{
  position:relative;
display:flex;
align-items: center;
justify-content: center;
 max-width:95%;
 max-height:95%;   
}
#mobile-moto{
  position: absolute;
top:1.75%;
  font-size:15px;
  background:transparent;
  color: white;
}
.icon{
  width:40%;
  max-height:3%;
  }
  #mobile-icon-menu{
   position:absolute;
    top:2.75%;
    font-size:30px;
    width:25%;
    background:transparent;
    color:bisque;  
  }
  #mobile-icon-email{
    position:absolute;
    top:2.75%;
    font-size:30px;
    width:25%;
    background:transparent;
    color:bisque;  
    left: 33%;
    height:200%;
  }
  #mobile-icon-phone{
    position:absolute;
    top:2.75%;
    font-size:30px;
    width:25%;
    background:transparent;
    color:bisque;  
    left:66%;
  }
  
  

.textdiv{
  background: linear-gradient(to bottom,  rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 5%,rgba(255, 255, 255, 1) 95%, rgba(233, 233, 233, 0) 100%); /* W3C */
   /* border:        4px solid #556699;
    border-radius: 11px; */
    color:         #09194d;
    display:       inline-block;
    font:          normal bold 18px/1 "Montserrat", sans-serif;
    text-align:    center;  
    left:0%;
    Width:90%;
    position:absolute;
    margin-left:0px;
    margin-right:auto;
    text-shadow: 5px 5px 10px rgb(252, 250, 250); 
   padding-top: 1%;
   padding-bottom: 1%;
   padding-left: 5%;
   padding-right: 5%;
   line-height: 1.6;
   
}

#mobile-div-1{
  top:11%;
  
  }
  

  
  .module {
    background-color: rgb(40, 40, 226);
    color: rgb(248, 248, 250);
    font-size: 22px;
    padding: 1rem;
    border-radius: 10px;
    border-style: hidden;
    position:relative;
    display:flex;
    font:normal bold 22px/1 'Montserrat', sans-serif;
    justify-content: center;
    align-items: center;
  }

  .mini-button-wrap {
    padding: 2%;
    background: linear-gradient(to bottom, rgb(150, 206, 238), rgb(2, 74, 122));
    border-radius: 12px;
    border-style: hidden;
    max-width:95%;
    max-height:20%;
  }
  
  .mini-button {
    background: #222;
    background: linear-gradient(to bottom, rgb(150, 206, 238), rgb(2, 74, 122));
    color: rgb(25, 5, 78);
    font-size: 13px;
    font-weight:900;
    text-align:center;
    text-shadow: 5px 5px 10px rgb(252, 250, 250);
    padding: 3%;
    border-radius: 10px;
    border-style: hidden;
    max-width:95%;
    max-height: 95%;
    position:relative;
  }
  .options {
      display:none;
   top: 5.25%;
   width:80%;
   height:6%;
left:5%;
animation: slidein 0.33s ease-in;
position:relative;
  }
  .big-letters{
    font-size: 30px;  
  }
  .mobile-contact{
    display: none;
    width: 100vw;
    height: 400px;
    position: fixed;
    font-size: 13px;
    font-weight:900;
    text-align:center;
    text-shadow: 5px 5px 10px rgb(252, 250, 250);
    background: transparent;
    top:30%;

  }
  .mobile-contact-phone{
width:90%;
height:60%;
display: inline-block;
position: relative;
background: transparent;
  }
  .mobile-contact-email{
    width:90%;
height:33%;
display: inline-block;
position: relative;
background: transparent;

  }
  .mobile-contact-booking{
    width:90%;
height:33%;
display: inline-block;
position: relative;
background: transparent;

  }
  .contact-flex-icon{
 width: 25%;
 height: 90%;
 position: relative;
 display:flex;
    align-items: center;
    justify-content: center;
 
  }
  .contact-flex-details{
    
    width: 95%;
    height: 90%;
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight:900;
    text-align:center;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
    
    color:rgb(0, 0, 139);
    
    
  }
  .contact-icon{
      width:60%;
      max-height:60%;
      background-color: darkblue;
  }
  .not-so-big{
    font-size: 18px; 
  }
  /* desktop divs */
  .desktop-wrapper{
    display: none; 
   }
 
}

@media screen and (max-width:1000px) and (min-width:618px){  /* ------------------- TAblet and LAndscape Phone  ------------------------------- */ 
  /* CLEAR OUT MOBILE DIVS */
     /* SORT OUT LINKS */
     a:link {
      text-decoration: none;
      color: inherit;
    }
    
    a:visited {
      text-decoration: none;
      color: inherit;
    }
    
    a:hover {
      text-decoration: none;
      color: inherit;
    }
    
    a:active {
      text-decoration: none;
      color: inherit;
    }
  @keyframes fadein{
      0%{
          opacity: 0;
      }
     
      100% {
          opacity:1;
      }
  }
  @keyframes slidein{
      0%{
          left: -50%;
      }
     
      100% {
          left:5%;
      }
  }
  @keyframes fadeaway{
    0%{
        opacity: 1;
    }
   
    100% {
        opacity:0;
    }

}
.wrapper{
  left:0px;
  top:0px;
  width:100vw;
  margin: 0px;
  padding: 0;
  border:0;
  float:left;
  max-height:6000px;
  overflow:hidden;
 
 

}
.fullpage{
width:100vw;
height:6000px;
display:inline-block;
position: absolute;
margin:0px;
padding:0;
float:left;
left:0px;
top:0px;
border:0;
overflow:hidden;
/*background:  url("/images/Hero_Home_BKGD_003.jpg") no-repeat center center;*/

}
.background-wrapper.{
height:6000px;
width:100vw;  
position:absolute;

display: inline-block;
}
.background-image-1{
height: 1500px;
width:100vw;
position:relative;

background:  url("/images/Background_Image_1_1000px.jpg") no-repeat center center;
background-size:cover;


}
.background-image-2{
height: 1500px;
width:100vw;
position:relative;

background:  url("/images/Background_Image_2.jpg") no-repeat center center;
background-size:cover;
}
.background-image-3{
height: 1500px;
width:100vw;
position:relative;

background:  url("/images/Background_Image_3.jpg") no-repeat center center;
background-size:cover;
}
.background-image-4{
height: 1500px;
width:100vw;
position:relative;
background:  url("/images/Background_Image_4.jpg") no-repeat center center;
background-size:cover;
}
.logo{
position: relative;;
display:inline-block;
align-items: center;
justify-content: center;
max-width:95%;
height: 1%;
left:3%;

top:0.25%;
}
.logo-image{
position:relative;
display:flex;
align-items: center;
justify-content: center;
max-width:95%;
max-height:95%;   
}
#mobile-moto{
position: absolute;
top:1.15%;
font-size:15px;
background:transparent;
color: white;
}
.icon{
width:100%;
height:100%;
overflow:hidden;
}
#mobile-icon-menu{
 position:absolute;
  top:2.25%;
  font-size:30px;
  width:7.5%;
  background:transparent;
  color:bisque;  
  height: 1%;
  left:10%;
}
#mobile-icon-email{
  position:absolute;
  top:2.25%;
  font-size:30px;
  width:7.5%;
  background:transparent;
  color:bisque;  
  left: 43%;
  height: 1%;
  
}
#mobile-icon-phone{
  position:absolute;
  top:2.25%;
  font-size:30px;
  width:7.5%;
  background:transparent;
  color:bisque;  
  left:76%;
  height: 1%;
}



.textdiv{
background: linear-gradient(to bottom,  rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 5%,rgba(255, 255, 255, 1) 95%, rgba(233, 233, 233, 0) 100%); /* W3C */
 /* border:        4px solid #556699;
  border-radius: 11px; */
  color:         #09194d;
  display:       inline-block;
  font:          normal bold 18px/1 "Montserrat", sans-serif;
  text-align:    center;  
  left:0%;
  Width:90%;
  position:absolute;
  margin-left:0px;
  margin-right:auto;
  text-shadow: 5px 5px 10px rgb(252, 250, 250); 
 padding-top: 1%;
 padding-bottom: 1%;
 padding-left: 5%;
 padding-right: 5%;
 line-height: 1.6;
 
}
#mobile-div-1{
top:12%;

}


.module {
  background-color: rgb(40, 40, 226);
  color: rgb(248, 248, 250);
  font-size: 22px;
  padding: 1rem;
  border-radius: 10px;
  border-style: hidden;
  position:relative;
  display:flex;
  font:normal bold 22px/1 'Montserrat', sans-serif;
  justify-content: center;
  align-items: center;
}

.mini-button-wrap {
  
}

.mini-button {
  background: #222;
  background: linear-gradient(to bottom, rgb(150, 206, 238), rgb(2, 74, 122));
  color: rgb(25, 5, 78);
  font-size: 13px;
  font-weight:900;
  text-align:center;
  text-shadow: 5px 5px 10px rgb(252, 250, 250);
  padding: 3%;
  border-radius: 10px;
  border-style: hidden;
  max-width:95%;
  max-height: 95%;
  position:relative;
}
.options {
    display:none;
 top: 4%;
 width:70%;
 height:3%;
left:5%;
animation: slidein 0.33s ease-in;
position:relative;
}
.big-letters{
  font-size: 26px;  
  font-weight:bolder;
}
.mobile-contact{
  display: none;
  width: 100vw;
  height: 400px;
  position: fixed;
  font-size: 13px;
  font-weight:900;
  text-align:center;
  text-shadow: 5px 5px 10px rgb(252, 250, 250);
  background: transparent;
  top:30%;
  left:4%;

}
.mobile-contact-phone{
width:90%;
height:60%;
display: inline-block;
position: relative;
background: transparent;
}
.mobile-contact-email{
  width:90%;
height:33%;
display: inline-block;
position: relative;
background: transparent;

}
.mobile-contact-booking{
  width:90%;
height:33%;
display: inline-block;
position: relative;
background: transparent;

}
.contact-flex-icon{
width: 25%;
height: 90%;
position: relative;
display:flex;
  align-items: center;
  justify-content: center;

}
.contact-flex-details{
  
  width: 95%;
  height: 90%;
  position: relative;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight:900;
  text-align:center;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  
  color:rgb(0, 0, 139);
  
  
}
.contact-icon{
    width:60%;
    max-height:60%;
    background-color: darkblue;
}
.not-so-big{
  font-size: 18px; 
}

 /* desktop divs */
 .desktop-wrapper{
  display: none; 
 }

}

@media screen and (max-width:2000px) and (min-width:1001px){  /* -------------------DESKTOP  ------------------------------- */ 
  /* CLEAR OUT MOBILE DIVS */
.wrapper{
display: none;
}
.fullpage{
display: none;
}
.logo{
display: none;
}
 
.textdiv{
display: none;    
   
}
.module-border-wrap {
  display: none; 
  }
  
  .module {
  display: none; 
  }

  .mini-button-wrap {
  display: none;
  }
  
  .mini-button {
  display: none;  
  }
  .options {
   display: none;
  }
  #mobile-moto{
   display:none; 
  }
  .big-letters{
    display:none;   
  }
  #mobile-phone{
    display:none;
  }
  #mobile-email{
    display:none;
  }
  .icon{
   display:none;
    }
    #mobile-icon-menu{
   display:none;
    }
    #mobile-icon-email{
     display:none;
    }
    #mobile-icon-phone{
     display:none;
    }

  





  /* Desktop divs */
.desktop-wrapper{
height:100vh;
width:100vw;
background-color:rgb(222, 246, 246);


position:relative;
display:inline-block;
}
.damiens-frame{
  width:80%;
  height:100%;
  position:relative;
  display:inline-block;
  left:10%;
  background-color: white;
  
  
}
.desktop-title{
width:100%;
height:25%;
background:  url("/images/Desktop_Top_Banner.jpg") no-repeat center center;
background-size:cover;

position:relative;
display:inline-block;


}
.desktop-title-logo{
  width:50%;
  height:55%;
  position:relative;
  display:inline-block;
  padding:1%;

  left:2%;
}
.desktop-logo-image{
  position:relative;
  display:flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height:100%;    
}
.desktop-title-motto{
  width:75%;
  height:2%;
  font:          normal bold 18px/1 "Montserrat", sans-serif;
  color: rgb(252, 252, 253);
  
  font-weight:900;
  text-align:center;
  text-shadow: 5px 5px 10px rgb(10, 10, 10);
  position:absolute;
  display:inline-block;
 
  left:15%;
  bottom:20%;
}
.desktop-menu{
width:100%;
height:4%;

position:relative;
display:inline-block;
vertical-align: top;

background-color:rgb(51, 90, 122);
}
.desktop-menu-items{
width: 13%;
height:100%;
display:inline-block;
position:relative;
font:          normal bold 18px/1 "Montserrat", sans-serif;
color: rgb(48, 241, 248);

font-weight:900;
text-align:center;
text-shadow: 5px 5px 5px rgb(10, 10, 10);
vertical-align: top;
padding-top: 1%;
}
.desktop-content{
width:100%;
height:55%;
font:          normal bold 18px/1 "Montserrat", sans-serif;
color: rgb(10, 10, 10);
position:relative;
display:inline-block;
overflow:scroll;

}
.desktop-footer{
  width:100%;
  height:15%;
position:relative;
display:inline-block;
}
.desktop-footer-stripe{
  display:inline-block;
  position: relative;
width:100%;
height:10%;
background-color:rgb(51, 90, 122);


}
.desktop-footer-content{
  display:inline-block;
  position: relative;
width:100%;
height:90%;
}
.desktop-footer-contact-details-wrapper{
display: inline-block;
position: relative;
width:100%;
height: 100%;



}
.desktop-footer-detail{
  display: inline-block;
position: relative;
text-align:center;
width:30%;
height:45%;
font:normal bold 30px/1 "Montserrat", sans-serif;
vertical-align: middle;
color: rgb(51, 90, 122);
}
.desktop-footer-book{
  display: inline-block;
position: relative;
text-align:center;
float:right;
width: 30%;
height: 45%;
font: normal bold 30px/1 "Montserrat", sans-serif;
vertical-align:text-bottom;
color: rgb(158, 42, 13);
/*background: #222;
  background: linear-gradient(to bottom, rgb(150, 206, 238), rgb(25, 5, 78));
  font-weight:900;
  text-shadow: 5px 5px 10px rgb(252, 250, 250);
  padding: 3%;
  border-radius: 10px;
  border-style: hidden;
  max-width:95%;
  max-height: 95%;
  */
 




}

/* FORM */
.desktop-form-left-question{
  text-align: center;
  justify-content: center; 
  align-items: center;
  display:inline-block;;
  position: relative;
  width:10%;
  height:15%;
  
  left:10%;
  
}
.desktop-form-left-answer{
  text-align: center;
  justify-content: center; 
  align-items: center;
  display:inline-block;;
  position: relative;
  
  width:20%;
  height:15%;
  left:11%;
  
}
.desktop-form-right-question{
  text-align: center;
  justify-content: center; 
  align-items: center;
  display:inline-block;;
  position: relative;
  
  width:10%;
  height:15%;
  left: 20%;
 
}
.desktop-form-right-answer{
  text-align: center;
  justify-content: center; 
  align-items: center;
  display:inline-block;
  position: relative;
  
  width:20%;
  height:15%;
  left:21%;
 
}
.desktop-form-submit{
  display:flex;
  position: relative;
  
  width:100%;
  height:15%;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.desktop-form-banner{

 
  width:100%;
  height:20%;
  text-align: center;
  justify-content: center; 
  align-items: center;
  display:flex;
  position: relative;
  font-size: 30px;
  color: rgb(51, 90, 122);


}
.desktop-form-aranger{
  text-align: center;
  justify-content: center; 
  align-items: center;
  display:flex;
  position: relative;
  width:100%;
  height:100%;

}
select{
width:100%;
}
textarea{
  width:100%;
}
input{
  width:100%;
}
/* Faq stuff */
.question-written{
width:45%;
max-height:55%;
text-align: left;
position: relative;
display: inline-block;
padding-left:1%;
padding-right:1%;
vertical-align: top;
overflow: hidden;



line-height:1.6;
}
.question-written-title{
  width:95%;
  text-align: center;
  position: relative;
  display: inline-block;
  padding-top:1%;
  padding-bottom:1%;

  }
.answer{
  color:rgb(54, 57, 58);
  font-size: 1vw;

  } 
  .question{
  color:rgb(128, 187, 221);
  font-size: 1.15vw;
  }
  .faq-title{
color:black;
font-size: 22px;
top:0%;

  }
  /* contact */
  .desktop-contact-title{
width: 95%;
text-align: center;
height:20%;
font-size:26px;
display:flex;
align-items: center;
justify-content: center;

  }
  .desktop-contact-phone{
    width: 45%;
    text-align: center;
    height:35%;  
    display:inline-block;
    position:relative;
    font-size:22px;
    vertical-align:bottom;
  }
  .desktop-contact-email{
    width: 45%;
text-align: center;
height:35%;
display: inline-block;
position: relative;
font-size:22px;
vertical-align:bottom;
     }
  .desktop-contact-form{
    width: 100%;
text-align: center;
height:35%;
display:inline-block;
position:relative;
float: right;

    }
  .desktop-contact-submit{
    width: 95%;
text-align: center;
height:10%;
display:flex;
align-items: center;
justify-content: center;

    }
    /* home */
    .desktop-home-image{
background: url('/images/ForeverClean_Website_HOME_Header_RGB_03.jpg') no-repeat center center;
background-size: cover;
height:100%;
width:100%;
display:inline-block;
position:relative;
    }
    /*gutter clean*/
    .desktop-gutter-clean-text{
display:inline-block;
height: 100%;
width:50%;
line-height:1.6;
padding:1%;


    }
    .desktop-gutter-clean-image{
      background: url('/images/Gutter_Clean.jpg') no-repeat center center;
      background-size: cover;
      height:100%;
      width:45%;
      display:inline-block;
      position:relative;  
      float:right;
      



    }
    .gutter-clean-smaller-text{
font-size:15px;
text-align:left;
    }
    .gutter-clean-medium-text{
font-size:17px;
text-align:left;
    }
    .gutter-clean-title-text{
      padding-top:3.5%;
      font-size: 24px;
      text-align:center;

    }
    .bolder{
      color:rgb(13, 37, 99);
   
      font-size: 17px;
    }
    /*gutter guard*/
    .desktop-gutter-guard-image{
      background: url('/images/Guard_Images_001.jpg') no-repeat center center;
      background-size: cover;
      height:100%;
      width:45%;
      display:inline-block;
      position:relative;  
      float:right;
    }
    /*other servies */
    .desktop-other-services-image{
      background: url('/images/Other_Services.jpg') no-repeat center center;
      background-size: cover;
      height:100%;
      width:45%;
      display:inline-block;
      position:relative;  
      float:right;  
    }
    










}