.fly-in-text {
  opacity: 0;
  transform: translateX(-100px); /* Fly in from the left */
  transition: all 0.6s ease-out;
}

.fly-in-text.active {
  opacity: 1;
  transform: translateX(0);
}





.themebg{
    background-color:#b09b8c; margin:0 12px 0 12px;
}/*dark*AC978A/
.bg{
    background-color:#cfbaba;
}/*light*/
.darkercontrast{
    background-color:#AD7468;
}


/*for FLAT ROOF PAGE IMAGE DISPLAY WITH CAPTION also UPVC page*/
figure img{
    width:95%;}
.figure-caption.ej-img-caption{
    position:absolute;
    width:95%;
    bottom:0.8em;
    color:#ffffff;
    text-align:center;
    background:#00000060; 
    }


/*end flat roof stuff*/
a {
    text-decoration:none;
}
a:hover{
    color:#AD7468;
}
.ejgallery img{}
/*default heading colour - h2 is light brown*/

ul.tick-list li{
	list-style-image:url("../../images/tick.jpg");
	margin-top:5px;
}
h2{
    color:#b09b8c;
    font-size:1em;
    font-weight:bold;
	border:0px solid blue;
}
/*Matching  page header for each page, currently used on contact page*/
h2.page-header{
    font-size:2em;
    padding:0.5em;
    border:0px solid red;
}
/*currently used on home page and it's used for section headings light brown ie About*/
h2.descriptive-heading{
    font-size:1.3em;
    padding-top:0.1em;
    font-weight:normal;
    border:0px solid green;
    color:#b09b8c;
}
/*used as second part adjacent to section heading*/
h3{
    color:#000000;
    font-size:1.3em;
    border:0px solid yellow;
}
/*used on home page Family Run Business*/
h3.ejheading{
    font-size:2.2em;
	border:0px solid purple;
}
/*these are the handshake headings*/
h4{
    border:0px solid pink;
}
.row.ejstandardtext p{font-size:0.9em;color:#000000;}
ul.tick-list.ejstandardtext li{font-size:0.9em;color:#000000;}
ul.ejlist{font-size:0.9em;color:#000000;}
/*CARDS ON HOME PAGE LABELLED 'ROOF REPAIRS'*/

.card.h-100{
    border:1.5px solid #b09b8c;
    border-radius:12px;
    padding:0.3em;}
.card.h-100 a img{
    padding:0px;
    margin:0px;
    border:0px solid blue;}
h4.card-title a{
    color:#b09b8c;
    margin:0px;
    padding:0px;
    font-size:0.7em;
    font-weight:normal;
    }
/*contact form on home page*/
#contactForm{}
p.form-message{
    color:red; 
    margin-top:0.8rem; 
    font-size:0.7rem;
}
.form-control{
    border:1px solid brown;
    width:90%;
    margin:0.8em;
    font-size:0.8em;
}
.form-check{
    width:90%;
    font-size:0.8em;
    margin-left:2em;
}

/*telephone callback on all pages*/
 .message {
            margin-top: 20px;
            font-weight: bold;
        }
        .success {
            color: green;
        }
        .error {
            color: red;
        }
 
/*carousel styling applies to both carousels on home page - css not picking up well so some comprehensive  inline styling and added inline classes for the slideshows where needed - id helps then straight to target tag works*/
#carousel1 h5{
    font-size:1.2em;
    background:#00000060; 
    border:2px solid #ffffff;
    padding:0.2em 1em 0.2em 1em;
}
#carousel2 h5{
    font-size:1em;
    background:#00000060; 
    border:1px solid #ffffff;
    padding:0.2em 1.2em 0.2em 1.2em;
}

/*for CONTACT PAGE details*/
h2.contact-dets{
    color:#b09b8c;
    font-weight:bold;
     margin-top:1em;
	border:0px  dashed red;
}
a.contact-dets{
    color:#000000;
    font-weight:bold;
}
a.contact-dets:hover{
    color:cornflowerblue;
}

/*Custom info-text in boxes*/
.ej-info-box{
    border: 1px solid #b09b8c;  
   float:left;
}
/*to test container sizes*/
.container{
    border:0px solid blue;
}
/*ICONS STRIP ON HOME PAGE*/
.container.icons{
    height:auto; 
    background-color:#cfbaba;
	margin-top:-0.1em;
	padding-top:-0.1em;
 }
.row.row-icons{ 
    padding:1.2em 0em 0em 0em;
    margin:auto;
    border:0px solid blue;
}
.icons{
    color:white;
}
.icons p{
    font-size:0.9em;
    padding-top:0.2em;
}
/*LIBRARY CODE FOR FOOTER*/
.footer-col a {
  color: #ffffff;
}
/*deprecated from libary code by JJ
.content {
  height: 80vh;
  background: #AD7468;
}*/

.footer-content-wrapper {
  width: 80%;
  margin: 0em auto;  
}
.footer-col {
  display: inline-block;
  padding: 0.5em 0.1em 0.5em 1em;
  box-sizing: border-box;
  border-right: solid 1px #bbb;
}
.footer-col:nth-child(4) {
  border: none;
}
.ta-l {
  text-align: left;
}
.flt {
  float: left;
}
.flt:nth-child(4):after {
   content: " "; 
   visibility: hidden; 
   display: block; 
   height: 1em; 
   clear: both;
}

.large-25 {
  width: 25%;
}

.footer-col a {
  display: block;
  margin: 0.3em 0;
  text-decoration:none;
}

.footer-col a:hover {
    color:#FFFFFF;
}
.footer-col a:hover.ejlink{color:#C0C0EF;}

@media (max-width: 550px) {
  .small-50 {
    width: 50%;  
  }
  .footer-col:nth-child(2) {
    border: none;
  }
}

@media (max-width: 300px) {
  .tiny-100 {
    width: 100%;
  }
  .footer-col { 
    border: none;
  }
}


/*contact button on home page navigation*/
a.nav-link.jjbutton {
  background-color: #b09b8c;
  border-radius: 18px;
  color:white; 
  width:6em;
  text-align:center;
}
a.nav-link.jjbutton:hover {
  color:black; 
  background-color: #cfbaba;
}

/*form button more notes here must be for PHONE callback*/
form a.jjbutton {
  display:inline-block;
  align-content: center;
  background-color: #b09b8c;
  border-radius: 18px;
  color:white; 
  width:6em;
  text-align:center;  
  text-decoration:none;
}
form a.jjbutton:hover{
  color:black; 
  background-color: #AD7468;     
}
button.btn.btn-default.jjbutton{
    border:1px solid #AD7468 ;
}
button.btn.btn-default.jjbutton:hover{
    color:#000000 !important;
	border:1px solid #4E001E;
}


/*center callback image*/
.container.jjcenter img{
    display:inline-block;
    align-content: center;
}
/*check where this is used, otherwise delete*/
#rcorners1 {
  border-radius: 12px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

/*form button on success message*/

 
/*media queries also included (as was in library footer code) so detailed above*/

/*generic to create single columns on mobile*/
/*@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  /*[class*="col-"] {
    width: 100%;
  }
}*/
/*
@media only screen and (max-width: 900px) {
  .icons {
    border:1px solid red;
  }
}
@media only screen and (max-width: 800px) {
  .icons {
    border:1px solid yellow;
  }
}
@media only screen and (max-width: 700px) {
  .icons {
    border:1px solid pink;
  }
}
@media only screen and (max-width: 600px) {
  .icons img{
    border:1px solid blue;
        width:25%;
     font-size:0.2em;
  }
}
@media only screen and (max-width: 500px) {
  .icons img{
    border:1px solid purple; width:50%;
  }
}*/

/*To line up ICONS for small screen so they are not intrusive*/
@media only screen and (max-width: 576px) {
    .icons img{
      width:40%;
    }
    .icons p{
      font-size:0.4em;
      padding:0em;
      margin:0em;
    }
    .row.row-icons{
        padding:0.2em 0em 0em 0em;
        margin:0em;
        border:0px solid red;
      
    }  
    #carousel1 h5{
    font-size:0.8em;
    background:#00000060; 
    border:1px solid #ffffff;
    padding:0.2em 0.8em 0.2em 0.8em;      
    }
	video.roof-tiles{width: 80%;height:auto;border:1px solid grey;margin-left:10%;margin-right:10%;}
}
/*
@media only screen and (max-width: 200px) {
  .icons {
    border:1px solid green;
  }
}*/