/**
 * @file
 * Subtheme specific CSS.
 orange = color: #D6750F;
 green = color: #B5DB10;
 
  note: The descendant CSS selector is used to select elements that are descendants of other elements. The selected elements do not have to be immediate children. (use > for child selector  eg. li>a )
The descendant selector is marked via the space character. 



 
 */
 
 /* general */
 
 h1, h2, h3, h4, h5 {
     color: #D6750F;
 }

/** background images */

    .fireworks-img {
        background-image:url("/sites/default/files/2020-03/fireworks-banner_0.png");
       /* background-attachment: fixed;*/
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .cleaning-chemicals-img {
        background-image:url("/sites/default/files/2020-03/chemical-banner-sm.png");
       /* background-attachment: fixed;*/
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height:260px;
    }

/* make background black opacity 50%*/
    .bkg-black-70 {
        background: black;
        opacity: 80%;
    }
    
/* block - brand listing  */    
    .views-row {
        margin-left:10px;
        margin-right:10px;
        margin-bottom:5px;
        text-align:center;
    }

/** contact details for header in top header region */
#block-contactdetailsforheader {
        
    color: #D6750F;
    font-weight: 400;
    font-size: 1.5rem;
}

.paragraph>.paragraph__column{
    padding-bottom:10px;
}

/**  chemical image - remove float left on chemical page */
.field--name-field-chemical-image   .field--type-image {
    float:none;
}


/*  Action stack - Icon, Title & text -  */


    /* icon */
    .action-stack .fontawesome-icons {    
        /* text-align:center;*/
        padding-left:25%;
        color: #B5DB10;
        font-weight: 400;
        font-size: 3.0rem;
}

    /* Title */
    .action-stack .field--name-field-action-t {
        color: #D6750F;
        font-weight: 400;
        font-size: 2.0rem;    
        color: #D6750F;
}

    /* text */
    .action-stack .field--name-field-action-text {
    
    }


/* end */

/* hero image with text */

    .hero-wrapper {
        position: relative;
        text-align: center;
    }
    .hero-image {
        width:150%;
        margin:auto;
    }
    .hero-image-2 {
        position: absolute;
        top: 18%;        
    }
    .hero-image-2 a {
        float: right;
    }    
 
    .hero-text {
        position: absolute;
        top: 20%;
        /*width: 0px;
        display: inline-block;*/
        
        left: 0%;
        font-weight: 700;
        font-size: 1.3rem;  
        color: whitesmoke;
        /*text-shadow: 0px 0px 3px black, 5px 5px 8px grey;*/

    }
    
    .hero-text p {
        color: #fff;
        background-color: black;
        padding: 5px;
        border-radius: 15px;
        opacity: 0.7;
        margin: auto;
        width: 70%;
    }
    .hero-button {
        position: absolute;
        top: 50%;  
    
    }
    .hero-button p {
        background-color: yellow;
        color:#ffffff;      
        border-radius: 10px;
        font-size: 1.3rem; 
        margin: auto;
        width: 25%;        
    }
    .hero-button a:link {
       color: white;
       background-color: yellow;
        text-decoration: underline;
    }   
    
/* end */


.centre-big-orange {
    text-align:center;
    font-weight: 400;
    font-size: 3.0rem;
    color: #D6750F;
}
	
/* Screen size */
/** Mobile **/
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {

    
    #block-contactdetailsforheader {font-size: 1rem;}  
    .paragraph--id--3 {  display: none;    }
    .paragraph--id--5 {  display: none;    }
    .paragraph--id--10 {  display: none;    }
    
}


/** Tablet **/
@media only screen and (min-width : 768px) and (max-width : 1024px) {

    
    #block-contactdetailsforheader {font-size: 1.2rem;}  

}

/** Tablet (landscape) **/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    
    #block-contactdetailsforheader {
        font-size: 1.5rem;
}  


} 
/* end */