html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: verdana;
    font-size: 11px;
    height:100%;
    margin: 0;
}
body 
{
    margin: 0;
    font-family: verdana;
	font-size: 11px;
	height:100%;
}

/*this is used for re-sizing logo image on top banner*/
/*#logoimage {
    width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}*/

.picture_width /*this is used on the event page*/ {
    /*display:none;*/
    width: 100%; /*original size is 600*/
    height: auto;
    margin-top: 5px;
    border-radius: 25px;
    border: 4px solid #6bc048;
    padding: 2px;
    text-align: center;
    line-height: 25px;
    background: #6bc048;
    color: white;
    box-shadow: 10px 10px 5px grey;
}

.areas_we_cover_link a {
    color: #5bab3a; /*slightly darker green than logo green*/
}

.areas_we_cover_link a:hover {
    color: #333333;
}

.areas_we_cover_link a:visited {
    color: #5bab3a;
}


.bottom_position
{
    position: absolute;
    bottom: 10px;
    width: 85%;
    text-align:center;
    border:0px none;
}

/*TEST CLASS NOT USED*/
.table_format2 {
    border-collapse: collapse;
    width: 100%;
    background-color: #fafafa;
    opacity: 0.85;
    filter: alpha(opacity=85);
    padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
    padding-left: 47px;
    padding:10px;
    border-radius: 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 10px 10px 5px grey; /*5px 5px 5px rgba(0, 0, 0, 0.1);*/
    -webkit-box-shadow: 10px 10px 5px grey; /*5px 5px rgba(0, 0, 0, 0.1);*/
    -moz-box-shadow: 10px 10px 5px grey; /*5px 5px rgba(0, 0, 0, 0.1);*/
}
    
 
    


/*
p, input, textarea{
	font-family: verdana;
}
*/






a{
	color: #6bc048;
    
}

a:hover,
a:focus{
	
	text-decoration:none;
	color: #333333;
    
}



.myjumbotron /*overall background of page*/
{
    text-align: center;
    height: 100%;
    margin: 0;
	/*position: relative;*
	background-color:#ffffff;
	height:100%;
	/*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/iphone_bg_large_for_web888888.jpg');
	background-size: cover;*/
	
}

.myjumbotron {
	color: #333333;
	font-size: 12px;
}
.myjumbotron p{
	color: #333333;
	font-size: 11px;
}


.myjumbotron H1
{
	/*text-transform: uppercase;*/
	margin-top:0px;
	font-size:19px;
	
}

.myjumbotron H2
{
	/*text-transform: uppercase;*/
	margin-top:0px;
	font-size:14px;
	
}



/*ICON HOVER OVER TEXT FOR HOME PAGE*/
/*********************************************/


#cloud_telephony_text
{
    display: none;
}

#previous_work_text {
    display: none;
}


#cloud_telephony:hover #cloud_telephony_text 
{
    display : block;
}

#previous_work:hover #previous_work_text {
    display: block;
}

/*********************************************/
#phone_systems_text
{
    display: none;
}



#phone_systems:hover #phone_systems_text 
{
    display : block;
}




/*********************************************/
#contact_centre_text
{
    display: none;
}
#contact_centre:hover #contact_centre_text 
{
    display : block;
}


/*********************************************/
#maintenance_text
{
    display: none;
}
#maintenance:hover #maintenance_text 
{
    display : block;
}


/*********************************************/
#internet_connectivity_text
{
    display: none;
}
#internet_connectivity:hover #internet_connectivity_text 
{
    display : block;
}


/*********************************************/
#data_switching_text
{
    display: none;
}
#data_switching:hover #data_switching_text 
{
    display : block;
}



/*********************************************/
#video_conferencing_text
{
    display: none;
}
#video_conferencing:hover #video_conferencing_text 
{
    display : block;
}




/*********************************************/
#relocating_premises_text
{
    display: none;
}
#relocating_premises:hover #relocating_premises_text 
{
    display : block;
}


/*********************************************/
#mobiles_text
{
    display: none;
}
#mobiles:hover #mobiles_text 
{
    display : block;
}














/****************************************************/
/*main window sections - all pages use these*/
/****************************************************/



/*LOGO*/
/*the width definitions here are different to the regular 650*/
/*if smaller width (mobiles)*/

/*the first three media sections up to and including @media (min-width: 551px) and (max-width: 650px) are all the same with the EXCEPTION of the titlebar height (".myjumbotron .headersection .titlebar{" which holds the background picture)*/
@media (max-width: 400px) 
{
    
    
    .myjumbotron  
    {
	    position:absolute; /*this removes the need to use a margin:-70px; to get it behind top menu strip*/
	    height:100%;
	    width:100%;
	    top: 0px;
	    left:0px;
	    float:left;
    }
    
    .myjumbotron .page_positioning .topsection  /*needed to make sure everything in whole page begins at top of page (ie behind the top menu)*/
    {
	    height:100%;
	    /*border: 3px solid green;*/
	    float:left;
	}
    
    
    
    /*non-home pages: the content in main window is displayed differently*/
    /*.myjumbotron .topsection .cell_background_non_home,
    .myjumbotron .containerbox .cell_background_non_home { (min-height:354px)*/
    
    
    
    /* THIS WORKS:
    .css-table {
      display: table;
    }
    .css-table .col {
      display: table-cell;
      width: 25%;
      padding: 10px;
    }
    .css-table .col:nth-child(even) {
      background: #ccc;
    }
    .css-table .col:nth-child(odd) {
      background: #eee;
    }
    */
    
    .css-table {
      display: table;
      background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 1.0;
        filter: alpha(opacity=100); /*for IE8 and earlier*/
        z-index:1001;
    }
    .css-table .cell_background_non_home 
    {
        position:relative; /*we need this so the "bottom_position" class (used for the "for more information call 0845") can be placed at the bottom of this containing parent div. "bottom_position" class uses absolute which looks for the parent div where relative is specified, else body will be used.*/
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 0.9;
        filter: alpha(opacity=90); */ /*for IE8 and earlier*/
        z-index:1001;
        padding-right:27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:27px;
	    /*float:left;*/
	    border-top: 3px solid #ffffff;
	    	    
	    text-align:justify;
	    color: #333333;
	    font-size: 9px;
	    overflow:hidden;
      
    }
    .css-table .col_right {
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat:repeat-x;
        background-position:bottom;
        min-height:310px;
        padding-bottom:15px;
                
        margin: 0;
        background-color: #fafafa;
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index:1001;
        padding-right:27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:27px; 
	    /*float:left;*/
	    border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    border-left: 4px solid #ffffff;
	    
	    text-align:center;
	    color: #333333;
	    font-size: 9px;
      
    }
    
    
    
    
    
    
    
    .myjumbotron .topsection .cell_background_non_home H1,
    .myjumbotron .containerbox .cell_background_non_home H1
    {
	    /*text-transform: uppercase;*/
	    font-size:14px;
	    color:#333333;
	    font-weight:bold;
    }

    .myjumbotron .topsection .cell_background_non_home H2,
    .myjumbotron .containerbox .cell_background_non_home H2
    {
	    /*text-transform: uppercase;*/
	    font-size:11px;
	    color:#333333;
	    font-weight:bold;
	}
       
    
    .myjumbotron .topsection .cell_background_non_home H1 a,
    .myjumbotron .containerbox .cell_background_non_home H1 a
    {
        color: #6bc048;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:hover,
    .myjumbotron .containerbox .cell_background_non_home H1 a:hover
    {
        text-decoration:none;
	    color: #333333;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:focus,
    .myjumbotron .containerbox .cell_background_non_home H1 a:focus
    {
        text-decoration:none;
	    color: #333333;
    }
    
    
    
    
    
    
    
    


    .logo {
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo_big_v3.png');*/
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo.png');*/ /*336x130*/
        width: 105px;
        height: auto;
        background-repeat: no-repeat;
        position: absolute;
        left: 0px;
        top: 50px;
        margin-bottom: 0px;
        /*opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index: 999;
    }


    #logoimage {
        width: 105px;
        height: auto;
        left: 0px;
        right: 0px;
    }

    .rcorners2_logo {
        margin-top: 10px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 120px;
        height: 55px;
        text-align: center;
        line-height: 35px;
        background: #ffffff;
        color: white;
        /*box-shadow: 10px 10px 5px #999999;*/
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
    }

    
    .myjumbotron .headersection{
	    width:100%;
	    height:100%;
	    margin: 0 auto;
	    text-align:center;
	    /*border: 3px none orange;*/
	    /*background-color:Orange;*/
	    left: 0px;
	    top: 0px; /*push title bar down slightly*/
	    /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/iphone_bg_large_cropped_faded.png');    
	    background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;*/
        margin-top:51px;
	}
        
    .myjumbotron .topsection{
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    
    }
    
    
    
    
    
    .myjumbotron .titlesection{ /*this is the new strip for the page title text if we are to do away with brown titlebar blob*/
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:50px;
	    margin: 0 auto;
	    text-align:center;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat:repeat-x;
        background-position:bottom;
        border-top: 3px solid #ffffff;
        vertical-align:middle;
        padding-right:27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:27px;
	    background-color: #fafafa; 
	    padding-top:12px;
	    padding-bottom:15px;
    }
    
    /*H1 text for titles of pages*/
    .myjumbotron .titlesection H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:20px;
	    color:#333333;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .titlesection H2
    {
	    /*text-transform: uppercase;*/
	    font-size:13px;
	    color:#333333;
	    text-align:justify;
	    /*font-weight:bold;*/
	
    }
    
    
    
    
    

    .myjumbotron .containerbox{
	    /*border: 1px none green;*/
	    width:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    padding: 0px;
    }
    
    .backgroundimage
    {
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/avaya_scopia_video_conferencing_solution_1920_faded_for_small_screen.jpg'); /* no-repeat center center fixed*/ 
	    width:100%;
	    height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;   
        border:1px solid #ffffff;
    }
    
    
    
    /*container for titlebar*/
    .myjumbotron .headersection .titlebar{
	    width:100%;
	    min-height:195px;
	    margin: 0 auto;
	    text-align:center;
	    border-top: 1px solid #ffffff;
	    left: 0px;
	    margin-top:6px;
	    /*margin-top: 170px; /*push title bar down slightly*/
    }
    
    
    
    
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_top
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:300px;
	    height:20px;
        
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_top_300.png');
        background-repeat:no-repeat;
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        margin-top: 70px;
        margin-bottom:0px;
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
     
    /*middle strip*/
    .myjumbotron .headersection .titlebar .titlebar_text
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:300px;
	    height:100%;
        
        padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:15px;
	    padding-top:10px;
	    padding-bottom:0px;
	    /*border: 3px solid black;*/
	    background: #333333; /*this is the background colour of the whole menu strip*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug for difference in titlebar_text padding-top value*/
    @-moz-document url-prefix() 
    {
        .myjumbotron .headersection .titlebar .titlebar_text
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:300px;
	        height:100%;
        
            padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	        padding-left:15px;
	        padding-top:-15px;
	        padding-bottom:0px;
	        /*border: 3px solid black;*/
	        background: #333333; /*this is the background colour of the whole menu strip*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
        }    
    
    }
      
      
    /*we need to have a slightly different link colour for the titlebar grey background*/
    .myjumbotron .headersection .titlebar .titlebar_text a
    {
        color:#89C5FF;/*0181fc;*/
    }
        
    .myjumbotron .headersection .titlebar .titlebar_text a:hover
    {
        color:#6bc048;
        text-decoration:underline;
    }
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:300px;
	    height:20px;
        margin-top: 0px;
        margin-bottom:70px;
        -webkit-margin-before: 0px;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_300.png');
        background-repeat:no-repeat;
        /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug with gap in titlebar*/
    @-moz-document url-prefix() {
        .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:300px;
	        height:20px;
            margin-top: -10px;
            margin-bottom:70px;
            -webkit-margin-before: 0px;
	        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_300.png');
            background-repeat:no-repeat;
            /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    
	        /*border: 3px solid black;*/
	        /*
	        background: #333333; /*this is the background colour of the whole menu strip*/
            /*
            opacity: 0.9;
            filter: alpha(opacity=90); /*for IE8 and earlier*/
        
        }
    }
    
    
    
    /*H1 text for titles of pages*/
    .myjumbotron .headersection .titlebar .titlebar_text H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:19px;
	    color:#ffffff;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text H2
    {
	    /*text-transform: uppercase;*/
	    font-size:12px;
	    color:#ffffff;
	    
	    /*font-weight:bold;*/
	
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text .H2home
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:12px;
	    color:#ffffff;
	    text-align:justify;
	    /*font-weight:bold;*/
	    
    }
    
    
    /*home page main window content display*/
    .myjumbotron .topsection .cell_background,
    .myjumbotron .containerbox .cell_background
    {
        vertical-align: top;
        /*border: 0px solid red;*/
        /*
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/rounded_rectangle_original_166.png');
        background-repeat:no-repeat;
        */
        
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat:repeat-x;
        background-position:bottom;
        
        width: 100%; /*one column*/
        min-height: 300px; /*must have a min of 200px*/
        background-color: #fafafa;
        /*opacity: 0.8;
        filter: alpha(opacity=80);*/ /*for IE8 and earlier*/
        z-index:1001;
        
        /*float:left; /*makes everything stay in one row however has problem of shifting all boxes to left as opposed to staying in centre of page*/
        display:inline-block;
        margin: 0 auto;
	    text-align:center;
	    padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    padding-top:8px;
	    border-top: 4px solid #ffffff;
    }
    
    
    .myjumbotron .topsection .cell_background H1,
    .myjumbotron .containerbox .cell_background H1
    {
	    /*text-transform: uppercase;*/
	    margin-top:0px;
	    font-size:18px;
	    color:#333333;
    }

    .myjumbotron .topsection .cell_background H2,
    .myjumbotron .containerbox .cell_background H2
    {
	    /*text-transform: uppercase;*/
	    margin-top:5px;
	    font-size:14px;
	    color:#333333;
	    
    }
    
    
    
    /*THIS MAKES THE HOVER OVER ICON TEXT ON HOME PAGE ALWAYS APPEAR - THIS IS ONLY FOR SMALLER SCREENS 1024 OR BELOW TO DEAL WITH TOUCH DEVICES*/
    #cloud_telephony_text 
    {
        display : block;
    }

    #previous_work_text {
        display: block;
    }
    
    #phone_systems_text 
    {
        display : block;
    }

    #contact_centre_text 
    {
        display : block;
    }

    #maintenance_text 
    {
        display : block;
    }

    #internet_connectivity_text 
    {
        display : block;
    }

    #data_switching_text 
    {
        display : block;
    }

    #video_conferencing_text 
    {
        display : block;
    }

    #relocating_premises_text 
    {
        display : block;
    }

    #mobiles_text 
    {
        display : block;
    }
    
    
    
    
    /*we use this to re-size icon image based on the viewport size*/
    .icon_image
    {
        width: 260px; /*original size is 195*/
        height: auto;
        margin-top:5px;

        
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }




    .icon_image2 {
        width: 260px; /*original size is 195*/
        height: auto;
        margin-top: 5px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
        opacity: 0.99;
        filter: alpha(opacity=99); /*for IE8 and earlier*/
    }
    
    .icon_image3
    {
        width: 200px; /*100% size*/
        height: auto;
        margin-top:-15px;
        /*border: 3px solid red;*/
    }
    
    .icon_image4
    {
        width: 250px; /*100% size*/
        height: auto;
        margin-top:60px;
        /*border: 3px solid red;*/
    }
    .icon_image5
    {
        display:none;
    }
    
    .icon_image6
    {
        width: 60px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
    
    .icon_image7
    {
        width: 250px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }

    
}




@media (min-width: 401px) and (max-width: 551px) 
{
    
    .myjumbotron  
    {
	    position:absolute; /*this removes the need to use a margin:-70px; to get it behind top menu strip*/
	    height:100%;
	    width:100%;
	    top: 0px;
	    left:0px;
	    float:left;
    }
    
    .myjumbotron .page_positioning .topsection  /*needed to make sure everything in whole page begins at top of page (ie behind the top menu)*/
    {
	    height:100%;
	    /*border: 3px solid green;*/
	    float:left;
    }
    
    
    
    /*non-home pages: the content in main window is displayed differently*/
    /*.myjumbotron .topsection .cell_background_non_home,
    .myjumbotron .containerbox .cell_background_non_home { (min-height:354px)*/
    
    
    
    /* THIS WORKS:
    .css-table {
      display: table;
    }
    .css-table .col {
      display: table-cell;
      width: 25%;
      padding: 10px;
    }
    .css-table .col:nth-child(even) {
      background: #ccc;
    }
    .css-table .col:nth-child(odd) {
      background: #eee;
    }
    */
    
    .css-table {
      display: table;
      background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 1.0;
        filter: alpha(opacity=100); /*for IE8 and earlier*/
        z-index:1001;
    }
    .css-table .cell_background_non_home {
        position:relative; /*we need this so the "bottom_position" class (used for the "for more information call 0845") can be placed at the bottom of this containing parent div. "bottom_position" class uses absolute which looks for the parent div where relative is specified, else body will be used.*/
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 0.9;
        filter: alpha(opacity=90); */ /*for IE8 and earlier*/
        z-index:1001;
        padding-right:27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:27px;
	    /*float:left;*/
	    border-top: 3px solid #ffffff;
	    	    
	    text-align:justify;
	    color: #333333;
	    font-size: 10px;
      
    }
    .css-table .col_right {
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat:repeat-x;
        background-position:bottom;
        min-height:310px;
        padding-bottom:15px;
                
        margin: 0;
        background-color: #fafafa;
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index:1001;
        padding-right:27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:27px; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    /*float:left;*/
	    border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    border-left: 4px solid #ffffff;
	    
	    text-align:center;
	    color: #333333;
	    font-size: 10px;
      
    }
    
    
    
    
    
    
    
    
    .myjumbotron .topsection .cell_background_non_home H1,
    .myjumbotron .containerbox .cell_background_non_home H1
    {
	    /*text-transform: uppercase;*/
	    font-size:14px;
	    color:#333333;
	    font-weight:bold;
    }

    .myjumbotron .topsection .cell_background_non_home H2,
    .myjumbotron .containerbox .cell_background_non_home H2
    {
	    /*text-transform: uppercase;*/
	    font-size:11px;
	    color:#333333;
	    font-weight:bold;
	}
       
    
    .myjumbotron .topsection .cell_background_non_home H1 a,
    .myjumbotron .containerbox .cell_background_non_home H1 a
    {
        color: #6bc048;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:hover,
    .myjumbotron .containerbox .cell_background_non_home H1 a:hover
    {
        text-decoration:none;
	    color: #333333;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:focus,
    .myjumbotron .containerbox .cell_background_non_home H1 a:focus
    {
        text-decoration:none;
	    color: #333333;
    }







    .logo {
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo_big_v3.png');*/
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo.png');*/ /*336x130*/
        width: 140px;
        height: auto;
        background-repeat: no-repeat;
        position: absolute;
        left: 0px;
        top: 55px;
        margin-bottom: 0px;
        /*opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index: 999;
    }


    #logoimage {
        width: 140px;
        height: auto;
        left: 0px;
        right: 0px;
    }

    .rcorners2_logo {
        margin-top: 10px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 160px;
        height: 60px;
        text-align: center;
        line-height: 35px;
        background: #ffffff;
        color: white;
        /*box-shadow: 10px 10px 5px #999999;*/
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
    }



    .myjumbotron .headersection{
	    width:100%;
	    height:100%;
	    margin: 0 auto;
	    text-align:center;
	    /*border: 3px none orange;*/
	    /*background-color:Orange;*/
	    left: 0px;
	    top: 0px; /*push title bar down slightly*/
	    /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/iphone_bg_large_cropped_faded.png');    
	    background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;*/
        margin-top:51px;
        
	}
        
    .myjumbotron .topsection{
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    
    }
    
    
    
    
    
    .myjumbotron .titlesection{ /*this is the new strip for the page title text if we are to do away with brown titlebar blob*/
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:50px;
	    margin: 0 auto;
	    text-align:center;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat:repeat-x;
        background-position:bottom;
        border-top: 3px solid #ffffff;
        vertical-align:middle;
        padding-right:27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:27px;
	    background-color: #fafafa; 
	    padding-top:12px;
	    padding-bottom:15px;
    }
    
    /*H1 text for titles of pages*/
    .myjumbotron .titlesection H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:21px;
	    color:#333333;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .titlesection H2
    {
	    /*text-transform: uppercase;*/
	    font-size:14px;
	    color:#333333;
	    
	    /*font-weight:bold;*/
	
    }
    
    
    
    
    

    .myjumbotron .containerbox{
	    /*border: 1px none green;*/
	    width:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    padding: 0px;
    }
    
    .backgroundimage
    {
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/avaya_scopia_video_conferencing_solution_1920_faded_for_small_screen.jpg'); /* no-repeat center center fixed*/ 
	    width:100%;
	    height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;   
        border:1px solid #ffffff;
    }
    
    
    
    /*container for titlebar*/
    .myjumbotron .headersection .titlebar{
	    width:100%;
	    min-height:195px; /*was 240*/
	    margin: 0 auto;
	    text-align:center;
	    border-top: 1px solid #ffffff;
	    left: 0px;
	    margin-top:6px;
	    /*margin-top: 170px; /*push title bar down slightly*/
    }
    
    
    
    
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_top
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:300px;
	    height:20px;
        
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_top_300.png');
        background-repeat:no-repeat;
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        margin-top: 70px;
        margin-bottom:0px;
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
     
    /*middle strip*/
    .myjumbotron .headersection .titlebar .titlebar_text
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:300px;
	    height:100%;
        
        padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:15px;
	    padding-top:10px;
	    padding-bottom:0px;
	    /*border: 3px solid black;*/
	    background: #333333; /*this is the background colour of the whole menu strip*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug for difference in titlebar_text padding-top value*/
    @-moz-document url-prefix() 
    {
        .myjumbotron .headersection .titlebar .titlebar_text
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:300px;
	        height:100%;
        
            padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	        padding-left:15px;
	        padding-top:-15px;
	        padding-bottom:0px;
	        /*border: 3px solid black;*/
	        background: #333333; /*this is the background colour of the whole menu strip*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
        }    
    
    }
      
      
    /*we need to have a slightly different link colour for the titlebar grey background*/
    .myjumbotron .headersection .titlebar .titlebar_text a
    {
        color:#89C5FF;/*0181fc;*/
    }
        
    .myjumbotron .headersection .titlebar .titlebar_text a:hover
    {
        color:#6bc048;
        text-decoration:underline;
    }
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:300px;
	    height:20px;
        margin-top: 0px;
        margin-bottom:70px;
        -webkit-margin-before: 0px;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_300.png');
        background-repeat:no-repeat;
        /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug with gap in titlebar*/
    @-moz-document url-prefix() {
        .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:300px;
	        height:20px;
            margin-top: -10px;
            margin-bottom:70px;
            -webkit-margin-before: 0px;
	        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_300.png');
            background-repeat:no-repeat;
            /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    
	        /*border: 3px solid black;*/
	        /*
	        background: #333333; /*this is the background colour of the whole menu strip*/
            /*
            opacity: 0.9;
            filter: alpha(opacity=90); /*for IE8 and earlier*/
        
        }
    }
    
    
    
    /*H1 text for titles of pages*/
    .myjumbotron .headersection .titlebar .titlebar_text H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:19px;
	    color:#ffffff;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text H2
    {
	    /*text-transform: uppercase;*/
	    font-size:12px;
	    color:#ffffff;
	    
	    /*font-weight:bold;*/
	
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text .H2home
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:12px;
	    color:#ffffff;
	    text-align:justify;
	    /*font-weight:bold;*/
	    
    }
    
    
    /*home page main window content display*/
    .myjumbotron .topsection .cell_background,
    .myjumbotron .containerbox .cell_background {
        vertical-align: top;
        /*border: 0px solid red;*/
        /*
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/rounded_rectangle_original_166.png');
        background-repeat:no-repeat;
        */
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat: repeat-x;
        background-position: bottom;
        width: 100%; /*one column*/
        min-height: 300px; /*must have a min of 200px*/
        background-color: #fafafa;
        /*opacity: 0.8;
        filter: alpha(opacity=80);*/ /*for IE8 and earlier*/
        z-index: 1001;
        /*float:left; /*makes everything stay in one row however has problem of shifting all boxes to left as opposed to staying in centre of page*/
        display: inline-block;
        margin: 0 auto;
        text-align: center;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        padding-top: 8px;
        border-top: 4px solid #ffffff;
    }
    
    
    .myjumbotron .topsection .cell_background H1,
    .myjumbotron .containerbox .cell_background H1
    {
	    /*text-transform: uppercase;*/
	    margin-top:0px;
	    font-size:18px;
	    color:#333333;
    }

    .myjumbotron .topsection .cell_background H2,
    .myjumbotron .containerbox .cell_background H2
    {
	    /*text-transform: uppercase;*/
	    margin-top:5px;
	    font-size:14px;
	    color:#333333;
	    
    }
    
    
    
    /*THIS MAKES THE HOVER OVER ICON TEXT ON HOME PAGE ALWAYS APPEAR - THIS IS ONLY FOR SMALLER SCREENS 1024 OR BELOW TO DEAL WITH TOUCH DEVICES*/
    #cloud_telephony_text 
    {
        display : block;
    }

    #previous_work_text {
        display: block;
    }

    #phone_systems_text 
    {
        display : block;
    }

    #contact_centre_text 
    {
        display : block;
    }

    #maintenance_text 
    {
        display : block;
    }

    #internet_connectivity_text 
    {
        display : block;
    }

    #data_switching_text 
    {
        display : block;
    }

    #video_conferencing_text 
    {
        display : block;
    }

    #relocating_premises_text 
    {
        display : block;
    }

    #mobiles_text 
    {
        display : block;
    }
    
    
    
    
    /*we use this to re-size icon image based on the viewport size*/
    .icon_image
    {
        width: 260px; /*original size is 195*/
        height: auto;
        margin-top:5px;

        
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }




    .icon_image2 {
        width: 310px; /*original size is 195*/
        height: auto;
        margin-top: 5px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
        opacity: 0.99;
        filter: alpha(opacity=99); /*for IE8 and earlier*/
    }
    
    .icon_image3
    {
        width: 200px; /*100% size*/
        height: auto;
        margin-top:-15px;
        /*border: 3px solid red;*/
    }
    .icon_image4
    {
        width: 250px; /*100% size*/
        height: auto;
        margin-top:60px;
        /*border: 3px solid red;*/
    }
    .icon_image5
    {
        display:none;
    }
    
    .icon_image6
    {
        width: 70px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
    
    .icon_image7
    {
        width: 300px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
}










/*WE NEED FOLLOWING TO OVERCOME THE BOOTSTRAP CSS WHICH SHIFTS EVERYTHING "UP" SLIGHTLY WHEN 767 OR BELOW*/
@media (min-width: 551px) and (max-width: 651px) 
{
    /*
    .myjumbotron  
    {
	    margin-top:-85px;
	    height:100%;
    }
    */
    .myjumbotron  
    {
	    position:absolute; /*this removes the need to use a margin:-70px; to get it behind top menu strip*/
	    height:100%;
	    width:100%;
	    top: 0px;
	    left:0px;
	    float:left;
    }
    
    .myjumbotron .page_positioning .topsection  /*needed to make sure everything in whole page begins at top of page (ie behind the top menu)*/
    {
	    height:100%;
	    /*border: 3px solid green;*/
	    float:left;
    }
    
    
    
    /*non-home pages: the content in main window is displayed differently*/
    /*.myjumbotron .topsection .cell_background_non_home,
    .myjumbotron .containerbox .cell_background_non_home { (min-height:354px)*/
    
    
    
    /* THIS WORKS:
    .css-table {
      display: table;
    }
    .css-table .col {
      display: table-cell;
      width: 25%;
      padding: 10px;
    }
    .css-table .col:nth-child(even) {
      background: #ccc;
    }
    .css-table .col:nth-child(odd) {
      background: #eee;
    }
    */
    
    .css-table {
      display: table;
      background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 1.0;
        filter: alpha(opacity=100); /*for IE8 and earlier*/
        z-index:1001;
    }
    .css-table .cell_background_non_home {
        position:relative; /*we need this so the "bottom_position" class (used for the "for more information call 0845") can be placed at the bottom of this containing parent div. "bottom_position" class uses absolute which looks for the parent div where relative is specified, else body will be used.*/
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 0.9;
        filter: alpha(opacity=90); */ /*for IE8 and earlier*/
        z-index:1001;
        padding-right:27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:27px;
	    /*float:left;*/
	    border-top: 3px solid #ffffff;
	    	    
	    text-align:justify;
	    color: #333333;
	    font-size: 11px;
      
    }
    .css-table .col_right {
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat:repeat-x;
        background-position:bottom;
        min-height:310px;
        padding-bottom:15px;
                
        margin: 0;
        background-color: #fafafa;
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index:1001;
        padding-right:27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:27px; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    /*float:left;*/
	    border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    border-left: 4px solid #ffffff;
	    
	    text-align:center;
	    color: #333333;
	    font-size: 10px;
      
    }
    
    
    
    
    
    
    
    
    .myjumbotron .topsection .cell_background_non_home H1,
    .myjumbotron .containerbox .cell_background_non_home H1
    {
	    /*text-transform: uppercase;*/
	    font-size:14px;
	    color:#333333;
	    font-weight:bold;
    }

    .myjumbotron .topsection .cell_background_non_home H2,
    .myjumbotron .containerbox .cell_background_non_home H2
    {
	    /*text-transform: uppercase;*/
	    font-size:11px;
	    color:#333333;
	    font-weight:bold;
	}
       
    
    .myjumbotron .topsection .cell_background_non_home H1 a,
    .myjumbotron .containerbox .cell_background_non_home H1 a
    {
        color: #6bc048;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:hover,
    .myjumbotron .containerbox .cell_background_non_home H1 a:hover
    {
        text-decoration:none;
	    color: #333333;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:focus,
    .myjumbotron .containerbox .cell_background_non_home H1 a:focus
    {
        text-decoration:none;
	    color: #333333;
    }







    .logo {
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo_big_v3.png');*/
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo.png');*/ /*336x130*/
        width: 160px;
        height: auto;
        background-repeat: no-repeat;
        position: absolute;
        left: 0px;
        top: 50px;
        margin-bottom: 0px;
        /*opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index: 999;
    }

    #logoimage {
        width: 160px;
        height: auto;
        left: 0px;
        right: 0px;
    }

    .rcorners2_logo {
        margin-top: 10px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 185px;
        height: 65px;
        text-align: center;
        line-height: 35px;
        background: #ffffff;
        color: white;
        /*box-shadow: 10px 10px 5px #999999;*/
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
    }
    
    .myjumbotron .headersection{
	    width:100%;
	    height:100%;
	    margin: 0 auto;
	    text-align:center;
	    /*border: 3px none orange;*/
	    /*background-color:Orange;*/
	    left: 0px;
	    top: 0px; /*push title bar down slightly*/
	    /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/iphone_bg_large_cropped_faded.png');    
	    background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;*/
        margin-top:40px;
	}
        
    .myjumbotron .topsection{
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    
    }
    
    
    
    
    
    .myjumbotron .titlesection{ /*this is the new strip for the page title text if we are to do away with brown titlebar blob*/
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:50px;
	    margin: 0 auto;
	    text-align:center;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat:repeat-x;
        background-position:bottom;
        border-top: 3px solid #ffffff;
        vertical-align:middle;
        padding-right:27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:27px;
	    background-color: #fafafa; 
	    padding-top:12px;
	    padding-bottom:15px;
    }
    
    /*H1 text for titles of pages*/
    .myjumbotron .titlesection H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:22px;
	    color:#333333;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .titlesection H2
    {
	    /*text-transform: uppercase;*/
	    font-size:14px;
	    color:#333333;
	    
	    /*font-weight:bold;*/
	
    }
    
    
    
    
    

    .myjumbotron .containerbox{
	    /*border: 1px none green;*/
	    width:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    padding: 0px;
    }
    
    .backgroundimage
    {
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/avaya_scopia_video_conferencing_solution_1920.jpg'); /* no-repeat center center fixed*/ 
	    width:100%;
	    height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;   
        border:1px solid #ffffff;
    }
    
    
    
    /*container for titlebar*/
    .myjumbotron .headersection .titlebar{
	    width:100%;
	    min-height:195px; /*was 260*/
	    margin: 0 auto;
	    text-align:center;
	    border-top: 1px solid #ffffff;
	    left: 0px;
	    margin-top:6px;
	    /*margin-top: 170px; /*push title bar down slightly*/
    }
    
    
    
    
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_top
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:300px;
	    height:20px;
        
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_top_300.png');
        background-repeat:no-repeat;
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        margin-top: 70px;
        margin-bottom:0px;
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
     
    /*middle strip*/
    .myjumbotron .headersection .titlebar .titlebar_text
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:300px;
	    height:100%;
        
        padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:15px;
	    padding-top:10px;
	    padding-bottom:0px;
	    /*border: 3px solid black;*/
	    background: #333333; /*this is the background colour of the whole menu strip*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug for difference in titlebar_text padding-top value*/
    @-moz-document url-prefix() 
    {
        .myjumbotron .headersection .titlebar .titlebar_text
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:300px;
	        height:100%;
        
            padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	        padding-left:15px;
	        padding-top:-15px;
	        padding-bottom:0px;
	        /*border: 3px solid black;*/
	        background: #333333; /*this is the background colour of the whole menu strip*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
        }    
    
    }
      
      
    /*we need to have a slightly different link colour for the titlebar grey background*/
    .myjumbotron .headersection .titlebar .titlebar_text a
    {
        color:#89C5FF;/*0181fc;*/
    }
        
    .myjumbotron .headersection .titlebar .titlebar_text a:hover
    {
        color:#6bc048;
        text-decoration:underline;
    }
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:300px;
	    height:20px;
        margin-top: 0px;
        margin-bottom:70px;
        -webkit-margin-before: 0px;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_300.png');
        background-repeat:no-repeat;
        /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug with gap in titlebar*/
    @-moz-document url-prefix() {
        .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:300px;
	        height:20px;
            margin-top: -10px;
            margin-bottom:70px;
            -webkit-margin-before: 0px;
	        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_300.png');
            background-repeat:no-repeat;
            /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    
	        /*border: 3px solid black;*/
	        /*
	        background: #333333; /*this is the background colour of the whole menu strip*/
            /*
            opacity: 0.9;
            filter: alpha(opacity=90); /*for IE8 and earlier*/
        
        }
    }
    
    
    
    /*H1 text for titles of pages*/
    .myjumbotron .headersection .titlebar .titlebar_text H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:19px;
	    color:#ffffff;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text H2
    {
	    /*text-transform: uppercase;*/
	    font-size:12px;
	    color:#ffffff;
	    
	    /*font-weight:bold;*/
	
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text .H2home
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:12px;
	    color:#ffffff;
	    text-align:justify;
	    /*font-weight:bold;*/
	    
    }
    
    
    /*home page main window content display*/
    .myjumbotron .topsection .cell_background,
    .myjumbotron .containerbox .cell_background {
        vertical-align: top;
        /*border: 0px solid red;*/
        /*
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/rounded_rectangle_original_166.png');
        background-repeat:no-repeat;
        */
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat: repeat-x;
        background-position: bottom;
        width: 100%; /*one column*/
        min-height: 300px; /*must have a min of 200px*/
        background-color: #fafafa;
        /*opacity: 0.8;
        filter: alpha(opacity=80);*/ /*for IE8 and earlier*/
        z-index: 1001;
        /*float:left; /*makes everything stay in one row however has problem of shifting all boxes to left as opposed to staying in centre of page*/
        display: inline-block;
        margin: 0 auto;
        text-align: center;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        padding-top: 8px;
        border-top: 4px solid #ffffff;
    }
    
    
    .myjumbotron .topsection .cell_background H1,
    .myjumbotron .containerbox .cell_background H1
    {
	    /*text-transform: uppercase;*/
	    margin-top:0px;
	    font-size:18px;
	    color:#333333;
    }

    .myjumbotron .topsection .cell_background H2,
    .myjumbotron .containerbox .cell_background H2
    {
	    /*text-transform: uppercase;*/
	    margin-top:5px;
	    font-size:14px;
	    color:#333333;
	    
    }
    
    
    
    /*THIS MAKES THE HOVER OVER ICON TEXT ON HOME PAGE ALWAYS APPEAR - THIS IS ONLY FOR SMALLER SCREENS 1024 OR BELOW TO DEAL WITH TOUCH DEVICES*/
    #cloud_telephony_text 
    {
        display : block;
    }

    #previous_work_text {
        display: block;
    }

    #phone_systems_text 
    {
        display : block;
    }

    #contact_centre_text 
    {
        display : block;
    }

    #maintenance_text 
    {
        display : block;
    }

    #internet_connectivity_text 
    {
        display : block;
    }

    #data_switching_text 
    {
        display : block;
    }

    #video_conferencing_text 
    {
        display : block;
    }

    #relocating_premises_text 
    {
        display : block;
    }

    #mobiles_text 
    {
        display : block;
    }
    
    
    
    
    /*we use this to re-size icon image based on the viewport size*/
    .icon_image
    {
        width: 400px; /*original size is 195*/
        height: auto;
        margin-top:5px;

        
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }




    .icon_image2 {
        width: 450px; /*original size is 195*/
        height: auto;
        margin-top: 5px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
        opacity: 0.99;
        filter: alpha(opacity=99); /*for IE8 and earlier*/
    }
    
    .icon_image3
    {
        width: 200px; /*100% size*/
        height: auto;
        margin-top:-15px;
        /*border: 3px solid red;*/
    }
    .icon_image4
    {
        width: 250px; /*100% size*/
        height: auto;
        margin-top:60px;
        /*border: 3px solid red;*/
    }
    .icon_image5
    {
        display:none;
    }
    
    .icon_image6
    {
        width: 100px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
    .icon_image7
    {
        width: 350px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
    
}












@media (min-width: 651px) and (max-width: 768px) 
{
    /*
    .myjumbotron  
    {
	    margin-top:-70px;
	    height:100%;
    }
    */
    .myjumbotron  
    {
	    position:absolute; /*this removes the need to use a margin:-70px; to get it behind top menu strip*/
	    height:100%;
	    width:100%;
	    top: 0px;
	    left:0px;
	    float:left;
    }
    
    .myjumbotron .page_positioning .topsection  /*needed to make sure everything in whole page begins at top of page (ie behind the top menu)*/
    {
	    height:100%;
	    /*border: 3px solid green;*/
	    float:left;
    }
    
    
    
    /*non-home pages: the content in main window is displayed differently*/
    /*.myjumbotron .topsection .cell_background_non_home,
    .myjumbotron .containerbox .cell_background_non_home { (min-height:354px)*/
    
    
    
    /* THIS WORKS:
    .css-table {
      display: table;
    }
    .css-table .col {
      display: table-cell;
      width: 25%;
      padding: 10px;
    }
    .css-table .col:nth-child(even) {
      background: #ccc;
    }
    .css-table .col:nth-child(odd) {
      background: #eee;
    }
    */
    
    .css-table {
      display: table;
      background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 1.0;
        filter: alpha(opacity=100); /*for IE8 and earlier*/
        z-index:1001;
    }
    .css-table .cell_background_non_home {
        position:relative; /*we need this so the "bottom_position" class (used for the "for more information call 0845") can be placed at the bottom of this containing parent div. "bottom_position" class uses absolute which looks for the parent div where relative is specified, else body will be used.*/
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 0.9;
        filter: alpha(opacity=90); */ /*for IE8 and earlier*/
        z-index:1001;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    /*float:left;*/
	    border-top: 3px solid #ffffff;
	    	    
	    text-align:justify;
	    color: #333333;
	    font-size: 12px;
      
    }
    .css-table .col_right {
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat:repeat-x;
        background-position:bottom;
        min-height:310px;
        padding-bottom:15px;
                
        margin: 0;
        background-color: #fafafa;
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index:1001;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    /*float:left;*/
	    border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    border-left: 4px solid #ffffff;
	    
	    text-align:center;
	    color: #333333;
	    font-size: 11px;
      
    }
    
    
    
    
    
    
    
    .myjumbotron .topsection .cell_background_non_home H1,
    .myjumbotron .containerbox .cell_background_non_home H1
    {
	    /*text-transform: uppercase;*/
	    font-size:15px;
	    color:#333333;
	    font-weight:bold;
    }

    .myjumbotron .topsection .cell_background_non_home H2,
    .myjumbotron .containerbox .cell_background_non_home H2
    {
	    /*text-transform: uppercase;*/
	    font-size:12px;
	    color:#333333;
	    font-weight:bold;
	}
       
    
    .myjumbotron .topsection .cell_background_non_home H1 a,
    .myjumbotron .containerbox .cell_background_non_home H1 a
    {
        color: #6bc048;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:hover,
    .myjumbotron .containerbox .cell_background_non_home H1 a:hover
    {
        text-decoration:none;
	    color: #333333;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:focus,
    .myjumbotron .containerbox .cell_background_non_home H1 a:focus
    {
        text-decoration:none;
	    color: #333333;
    }


    .logo {
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo_big_v3.png');*/
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo.png');*/ /*336x130*/
        width: 180px;
        height: auto;
        background-repeat: no-repeat;
        position: absolute;
        left: 0px;
        top: 50px;
        margin-bottom: 0px;
        /*opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index: 999;
    }



    #logoimage {
        width: 180px;
        height: auto;
        left: 0px;
        right: 0px;
    }

    .rcorners2_logo {
        margin-top: 10px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 205px;
        height: 70px;
        text-align: center;
        line-height: 35px;
        background: #ffffff;
        color: white;
        /*box-shadow: 10px 10px 5px #999999;*/
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
    }
    
    
    .myjumbotron .headersection{
	    width:100%;
	    height:100%;
	    margin: 0 auto;
	    text-align:center;
	    /*border: 3px none orange;*/
	    /*background-color:Orange;*/
	    left: 0px;
	    top: 0px; /*push title bar down slightly*/
	    /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/iphone_bg_large_cropped_faded.png');    
	    background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;*/
        margin-top:40px;
	}
	
	.myjumbotron .topsection{
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    
    }
    
    
    
    .myjumbotron .titlesection{ /*this is the new strip for the page title text if we are to do away with brown titlebar blob*/
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:50px;
	    margin: 0 auto;
	    text-align:center;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat:repeat-x;
        background-position:bottom;
        border-top: 3px solid #ffffff;
        vertical-align:middle;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    background-color: #fafafa; 
	    padding-top:12px;
	    padding-bottom:15px;
    }
    
    /*H1 text for titles of pages*/
    .myjumbotron .titlesection H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:23px;
	    color:#333333;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .titlesection H2
    {
	    /*text-transform: uppercase;*/
	    font-size:15px;
	    color:#333333;
	    
	    /*font-weight:bold;*/
	
    }
    
    
    
    
    
    
    
    
    
    
    
    .myjumbotron .containerbox{
	    /*border: 1px none green;*/
	    width:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    padding: 0px;
	    
    }

    .backgroundimage
    {
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/avaya_scopia_video_conferencing_solution_1920.jpg'); /* no-repeat center center fixed*/  
	    width:100%;
	    height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;   
        border:1px solid #ffffff;
    }
    
    
    /*container for titlebar*/
    .myjumbotron .headersection .titlebar{
	    width:100%;
	    min-height:310px;
	    margin: 0 auto;
	    text-align:center;
	    border-top: 1px solid #ffffff;
	    left: 0px;
	    margin-top:10px;
	    /*margin-top: 170px; /*push title bar down slightly*/
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_top
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:400px;
	    height:20px;
        
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_top_400.png');
        background-repeat:no-repeat;
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        margin-top: 100px;
        margin-bottom:0px;
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
        
    .myjumbotron .headersection .titlebar .titlebar_text
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:400px;
	    height:100%;
        
        padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:15px;
	    padding-top:10px;
	    padding-bottom:0px;
	    /*border: 3px solid black;*/
	    background: #333333; /*this is the background colour of the whole menu strip*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug for difference in titlebar_text padding-top value*/
    @-moz-document url-prefix() 
    {
        .myjumbotron .headersection .titlebar .titlebar_text
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:400px;
	        height:100%;
        
            padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	        padding-left:15px;
	        padding-top:-15px;
	        padding-bottom:0px;
	        /*border: 3px solid black;*/
	        background: #333333; /*this is the background colour of the whole menu strip*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
        }    
    
    }
    
    
    /*we need to have a slightly different link colour for the titlebar grey background*/
    .myjumbotron .headersection .titlebar .titlebar_text a
    {
        color:#89C5FF;/*0181fc;*/
    }
        
    .myjumbotron .headersection .titlebar .titlebar_text a:hover
    {
        color:#6bc048;
        text-decoration:underline;
    }
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:400px;
	    height:20px;
	    margin-top: 0px;
        margin-bottom:90px;
	    -webkit-margin-before: 0px;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_400.png');
        background-repeat:no-repeat;
        /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug with gap in titlebar*/
    @-moz-document url-prefix() {
        .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
        {
            margin: 0 auto;
	        text-align:center;
	    
	        width:400px;
	        height:20px;
            margin-top: -10px;
            margin-bottom:90px;
            -webkit-margin-before: 0px;
	        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_400.png');
            background-repeat:no-repeat;
            /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
            
        }
    }
    
    
    /*H1 text for titles of pages*/
    .myjumbotron .headersection .titlebar .titlebar_text H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:22px;
	    color:#ffffff;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text H2
    {
	    /*text-transform: uppercase;*/
	    font-size:13px;
	    color:#ffffff;
	    
	    /*font-weight:bold;*/
	
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text .H2home
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:13px;
	    color:#ffffff;
	    text-align:justify;
	    /*font-weight:bold;*/
	    
    }
    
    /*home page main window content display*/
    .myjumbotron .topsection .cell_background,
    .myjumbotron .containerbox .cell_background {
        vertical-align: top;
        /*border: 0px solid red;*/
        /*
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/rounded_rectangle_original_166.png');
        background-repeat:no-repeat;
        */
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat: repeat-x;
        background-position: bottom;
        width: 49%; /*2 columns*/
        min-height: 300px; /*must have a min of 200px*/
        background-color: #fafafa;
        /*opacity: 0.8;
        filter: alpha(opacity=80);*/ /*for IE8 and earlier*/
        z-index: 1001;
        /*float:left; /*makes everything stay in one row however has problem of shifting all boxes to left as opposed to staying in centre of page*/
        display: inline-block;
        margin: 0 auto;
        text-align: center;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        padding-top: 8px;
        border-top: 4px solid #ffffff;
    }
    
    
    .myjumbotron .topsection .cell_background H1,
    .myjumbotron .containerbox .cell_background H1
    {
	    /*text-transform: uppercase;*/
	    margin-top:0px;
	    font-size:18px;
	    color:#333333;
    }

    .myjumbotron .topsection .cell_background H2,
    .myjumbotron .containerbox .cell_background H2
    {
	    /*text-transform: uppercase;*/
	    margin-top:5px;
	    font-size:14px;
	    color:#333333;
    }
    
    
    
    
    #cloud_telephony_text 
    {
        display : block;
    }

    #previous_work_text {
        display: block;
    }

    #phone_systems_text 
    {
        display : block;
    }

    #contact_centre_text 
    {
        display : block;
    }

    #maintenance_text 
    {
        display : block;
    }

    #internet_connectivity_text 
    {
        display : block;
    }

    #data_switching_text 
    {
        display : block;
    }

    #video_conferencing_text 
    {
        display : block;
    }

    #relocating_premises_text 
    {
        display : block;
    }

    #mobiles_text 
    {
        display : block;
    }
    
    
    
    /*we use this to re-size icon image based on the viewport size*/
    .icon_image
    {
        width: 220px; /*original size is 195*/
        height: auto;
        margin-top:5px;

        
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }




    .icon_image2 {
        width: 520px; /*original size is 195*/
        height: auto;
        margin-top: 5px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
        opacity: 0.99;
        filter: alpha(opacity=99); /*for IE8 and earlier*/
    }
    
    .icon_image3
    {
        width: 215px; /*100% size*/
        height: auto;
        margin-top:-25px;
        /*border: 3px solid red;*/
    }
    
    .icon_image4
    {
        width: 400px; /*100% size*/
        height: auto;
        margin-top:60px;
        /*border: 3px solid red;*/
    }
    .icon_image5
    {
        display:none;
    }
    
    .icon_image6
    {
        width: 110px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
    
    .icon_image7
    {
        width: 365px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
}


@media (min-width: 768px) and (max-width: 906px) 
{
    /*
    .myjumbotron  
    {
	    margin-top:-70px;
	    height:100%;
    }
    */
    .myjumbotron  
    {
	    position:absolute; /*this removes the need to use a margin:-70px; to get it behind top menu strip*/
	    height:100%;
	    width:100%;
	    top: 0px;
	    left:0px;
	    float:left;
    }
    
    .myjumbotron .page_positioning .topsection  /*needed to make sure everything in whole page begins at top of page (ie behind the top menu)*/
    {
	    height:100%;
	    /*border: 3px solid green;*/
	    float:left;
    }
    
    
    
    /*non-home pages: the content in main window is displayed differently*/
    /*.myjumbotron .topsection .cell_background_non_home,
    .myjumbotron .containerbox .cell_background_non_home { (min-height:365px)*/
    
    
    
    /* THIS WORKS:
    .css-table {
      display: table;
    }
    .css-table .col {
      display: table-cell;
      width: 25%;
      padding: 10px;
    }
    .css-table .col:nth-child(even) {
      background: #ccc;
    }
    .css-table .col:nth-child(odd) {
      background: #eee;
    }
    */
    
    .css-table {
      display: table;
      background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 1.0;
        filter: alpha(opacity=100); /*for IE8 and earlier*/
        z-index:1001;
    }
    .css-table .cell_background_non_home {
        position:relative; /*we need this so the "bottom_position" class (used for the "for more information call 0845") can be placed at the bottom of this containing parent div. "bottom_position" class uses absolute which looks for the parent div where relative is specified, else body will be used.*/
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 0.9;
        filter: alpha(opacity=90); */ /*for IE8 and earlier*/
        z-index:1001;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    /*float:left;*/
	    border-top: 3px solid #ffffff;
	    	    
	    text-align:justify;
	    color: #333333;
	    font-size: 13px;
      
    }
    .css-table .col_right {
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat:repeat-x;
        background-position:bottom;
        min-height:310px;
        padding-bottom:15px;
                
        margin: 0;
        background-color: #fafafa;
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index:1001;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    /*float:left;*/
	    border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    border-left: 4px solid #ffffff;
	    
	    text-align:center;
	    color: #333333;
	    font-size: 11px;
      
    }
    
    
    
    
    
    
    
    .myjumbotron .topsection .cell_background_non_home H1,
    .myjumbotron .containerbox .cell_background_non_home H1
    {
	    /*text-transform: uppercase;*/
	    font-size:16px;
	    color:#333333;
	    font-weight:bold;
    }

    .myjumbotron .topsection .cell_background_non_home H2,
    .myjumbotron .containerbox .cell_background_non_home H2
    {
	    /*text-transform: uppercase;*/
	    font-size:13px;
	    color:#333333;
	    font-weight:bold;
	}
       
    
    .myjumbotron .topsection .cell_background_non_home H1 a,
    .myjumbotron .containerbox .cell_background_non_home H1 a
    {
        color: #6bc048;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:hover,
    .myjumbotron .containerbox .cell_background_non_home H1 a:hover
    {
        text-decoration:none;
	    color: #333333;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:focus,
    .myjumbotron .containerbox .cell_background_non_home H1 a:focus
    {
        text-decoration:none;
	    color: #333333;
    }


    .logo {
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo_big_v3.png');*/
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo.png');*/ /*336x130*/
        width: 200px;
        height: auto;
        background-repeat: no-repeat;
        position: absolute;
        left: 0px;
        top: 35px;
        margin-bottom: 0px;
        /*opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index: 999;
    }


    #logoimage {
        width: 200px;
        height: auto;
        left: 0px;
        right: 0px;
    }

    .rcorners2_logo {
        margin-top: 10px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 220px;
        height: 75px;
        text-align: center;
        line-height: 35px;
        background: #ffffff;
        color: white;
        /*box-shadow: 10px 10px 5px #999999;*/
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
    }
    
    
    .myjumbotron .headersection{
	    width:100%;
	    height:100%;
	    margin: 0 auto;
	    text-align:center;
	    /*border: 3px none orange;*/
	    /*background-color:Orange;*/
	    left: 0px;
	    top: 0px; /*push title bar down slightly*/
	    /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/iphone_bg_large_cropped_faded.png');    
	    background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;*/
	}
    
    .myjumbotron .topsection{
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    
    }
    
    
    
    .myjumbotron .titlesection{ /*this is the new strip for the page title text if we are to do away with brown titlebar blob*/
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:50px;
	    margin: 0 auto;
	    text-align:center;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat:repeat-x;
        background-position:bottom;
        border-top: 3px solid #ffffff;
        vertical-align:middle;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    background-color: #fafafa; 
	    padding-top:12px;
	    padding-bottom:15px;
    }
    
    /*H1 text for titles of pages*/
    .myjumbotron .titlesection H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:26px;
	    color:#333333;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .titlesection H2
    {
	    /*text-transform: uppercase;*/
	    font-size:15px;
	    color:#333333;
	    
	    /*font-weight:bold;*/
	
    }
    
    
    
       

    .myjumbotron .containerbox{
	    /*border: 1px none green;*/
	    width:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    padding: 0px;
	    
    }

    .backgroundimage
    {
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/avaya_scopia_video_conferencing_solution_1920.jpg'); /* no-repeat center center fixed*/  
	    width:100%;
	    height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;   
        border:1px solid #ffffff;
    }
    
    
    /*container for titlebar*/
    .myjumbotron .headersection .titlebar{
	    width:100%;
	    min-height:365px;
	    margin: 0 auto;
	    text-align:center;
	    border-top: 1px solid #ffffff;
	    left: 0px;
	    /*margin-top: 170px; /*push title bar down slightly*/
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_top
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:500px;
	    height:20px;
        
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_top_500.png');
        background-repeat:no-repeat;
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        margin-top: 115px;
        margin-bottom:0px;
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
       
    .myjumbotron .headersection .titlebar .titlebar_text
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:500px;
	    height:100%;
        
        padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:15px;
	    padding-top:10px;
	    padding-bottom:0px;
	    /*border: 3px solid black;*/
	    background: #333333; /*this is the background colour of the whole menu strip*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug for difference in titlebar_text padding-top value*/
    @-moz-document url-prefix() 
    {
        .myjumbotron .headersection .titlebar .titlebar_text
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:500px;
	        height:100%;
        
            padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	        padding-left:15px;
	        padding-top:-15px;
	        padding-bottom:0px;
	        /*border: 3px solid black;*/
	        background: #333333; /*this is the background colour of the whole menu strip*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
        }    
    
    }
     
     
    /*we need to have a slightly different link colour for the titlebar grey background*/
    .myjumbotron .headersection .titlebar .titlebar_text a
    {
        color:#89C5FF;/*0181fc;*/
    }
        
    .myjumbotron .headersection .titlebar .titlebar_text a:hover
    {
        color:#6bc048;
        text-decoration:underline;
    }
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:500px;
	    height:20px;
        margin-top: 0px;
        margin-bottom:90px;
	    -webkit-margin-before: 0px;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_500.png');
        background-repeat:no-repeat;
        /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
    
    
    
    /*css specific to firefox to deal with firefox bug with gap in titlebar*/
    @-moz-document url-prefix() {
        .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
        {
            margin: 0 auto;
	        text-align:center;
	    
	        width:500px;
	        height:20px;
            margin-top: -10px;
            margin-bottom:90px;
            -webkit-margin-before: 0px;
	        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_500.png');
            background-repeat:no-repeat;
            /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
            
        }
    }
    
    
    
    
    /*H1 text for titles of pages*/
    .myjumbotron .headersection .titlebar .titlebar_text H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:25px;
	    color:#ffffff;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text H2
    {
	    /*text-transform: uppercase;*/
	    font-size:14px;
	    color:#ffffff;
	    
	    /*font-weight:bold;*/
	
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text .H2home
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:14px;
	    color:#ffffff;
	    text-align:justify;
	    /*font-weight:bold;*/
	    
    }
    
    /*home page main window content display*/
    .myjumbotron .topsection .cell_background,
    .myjumbotron .containerbox .cell_background {
        vertical-align: top;
        /*border: 0px solid red;*/
        /*
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/rounded_rectangle_original_166.png');
        background-repeat:no-repeat;
        */
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat: repeat-x;
        background-position: bottom;
        width: 49%; /*2 columns*/
        min-height: 300px; /*must have a min of 200px*/
        background-color: #fafafa;
        /*opacity: 0.8;
        filter: alpha(opacity=80);*/ /*for IE8 and earlier*/
        z-index: 1001;
        /*float:left; /*makes everything stay in one row however has problem of shifting all boxes to left as opposed to staying in centre of page*/
        display: inline-block;
        margin: 0 auto;
        text-align: center;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        padding-top: 8px;
        border-top: 4px solid #ffffff;
    }
    
    
    .myjumbotron .topsection .cell_background H1,
    .myjumbotron .containerbox .cell_background H1
    {
	    /*text-transform: uppercase;*/
	    margin-top:0px;
	    font-size:19px;
	    color:#333333;
    }

    .myjumbotron .topsection .cell_background H2,
    .myjumbotron .containerbox .cell_background H2
    {
	    /*text-transform: uppercase;*/
	    margin-top:5px;
	    font-size:14px;
	    color:#333333;
    }
    
    
    
    
    #cloud_telephony_text 
    {
        display : block;
    }

    #previous_work_text {
        display: block;
    }

    #phone_systems_text 
    {
        display : block;
    }

    #contact_centre_text 
    {
        display : block;
    }

    #maintenance_text 
    {
        display : block;
    }

    #internet_connectivity_text 
    {
        display : block;
    }

    #data_switching_text 
    {
        display : block;
    }

    #video_conferencing_text 
    {
        display : block;
    }

    #relocating_premises_text 
    {
        display : block;
    }

    #mobiles_text 
    {
        display : block;
    }
    
    
    
    /*we use this to re-size icon image based on the viewport size*/
    .icon_image
    {
        width: 280px; /*original size is 195*/
        height: auto;
        margin-top:5px;

        
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }



    .icon_image2 {
        width: 630px; /*original size is 195*/
        height: auto;
        margin-top: 5px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
        opacity: 0.99;
        filter: alpha(opacity=99); /*for IE8 and earlier*/
    }
    
    .icon_image3
    {
        width: 230px; /*100% size*/
        height: auto;
        margin-top:-28px;
        /*border: 3px solid red;*/
    }
    .icon_image4
    {
        width: 450px; /*100% size*/
        height: auto;
        margin-top:60px;
        /*border: 3px solid red;*/
    }
    
    .icon_image5
    {
        display:none;
    }
    
    .icon_image6
    {
        width: 120px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
    
    .icon_image7
    {
        width: 380px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
}



@media (min-width: 906px) and (max-width: 1024px) /*@media (min-width: 906px) and (max-width: 1082px)*/
{
    /*
    .myjumbotron  
    {
	    margin-top:-70px;
	    height:100%;
    }
    */
    
    .myjumbotron  
    {
	    position:absolute; /*this removes the need to use a margin:-70px; to get it behind top menu strip*/
	    height:100%;
	    width:100%;
	    top: 0px;
	    left:0px;
	    float:left;
    }
    
    .myjumbotron .page_positioning .topsection  /*needed to make sure everything in whole page begins at top of page (ie behind the top menu)*/
    {
	    height:100%;
	    /*border: 3px solid green;*/
	    float:left;
    }
    
    
    
    /*non-home pages: the content in main window is displayed differently*/
    /*.myjumbotron .topsection .cell_background_non_home,
    .myjumbotron .containerbox .cell_background_non_home { (min-height:365px)*/
    
    
    
    /* THIS WORKS:
    .css-table {
      display: table;
    }
    .css-table .col {
      display: table-cell;
      width: 25%;
      padding: 10px;
    }
    .css-table .col:nth-child(even) {
      background: #ccc;
    }
    .css-table .col:nth-child(odd) {
      background: #eee;
    }
    */
    
    .css-table {
      display: table;
      background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 1.0;
        filter: alpha(opacity=100); /*for IE8 and earlier*/
        z-index:1001;
    }
    .css-table .cell_background_non_home {
        position:relative; /*we need this so the "bottom_position" class (used for the "for more information call 0845") can be placed at the bottom of this containing parent div. "bottom_position" class uses absolute which looks for the parent div where relative is specified, else body will be used.*/
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 0.9;
        filter: alpha(opacity=90); */ /*for IE8 and earlier*/
        z-index:1001;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    /*float:left;*/
	    border-top: 3px solid #ffffff;
	    	    
	    text-align:justify;
	    color: #333333;
	    font-size: 13px;
      
    }
    .css-table .col_right {
        /*display: table-cell;*/ /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        width: 100%;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat:repeat-x;
        background-position:bottom;
        min-height:310px;
        padding-bottom:15px;
                
        margin: 0;
        background-color: #fafafa;
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index:1001;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    /*float:left;*/
	    border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
	    border-left: 4px solid #ffffff;
	    
	    text-align:center;
	    color: #333333;
	    font-size: 11px;
      
    }
    
    
    
    
    
    
    
    
       
    
    
    .myjumbotron .topsection .cell_background_non_home H1,
    .myjumbotron .containerbox .cell_background_non_home H1
    {
	    /*text-transform: uppercase;*/
	    font-size:17px;
	    color:#333333;
	    font-weight:bold;
    }

    .myjumbotron .topsection .cell_background_non_home H2,
    .myjumbotron .containerbox .cell_background_non_home H2
    {
	    /*text-transform: uppercase;*/
	    font-size:13px;
	    color:#333333;
	    font-weight:bold;
	}
       
    
    .myjumbotron .topsection .cell_background_non_home H1 a,
    .myjumbotron .containerbox .cell_background_non_home H1 a
    {
        color: #6bc048;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:hover,
    .myjumbotron .containerbox .cell_background_non_home H1 a:hover
    {
        text-decoration:none;
	    color: #333333;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:focus,
    .myjumbotron .containerbox .cell_background_non_home H1 a:focus
    {
        text-decoration:none;
	    color: #333333;
    }



    .logo {
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo_big_v3.png');*/
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo.png');*/ /*336x130*/
        width: 230px;
        height: auto;
        background-repeat: no-repeat;
        position: absolute;
        left: 0px;
        top: 35px;
        margin-bottom: 0px;
        /*opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index: 999;
    }


    #logoimage {
        width: 230px;
        height: auto;
        left: 0px;
        right: 0px;
    }

    .rcorners2_logo {
        margin-top: 10px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 250px;
        height: 80px;
        text-align: center;
        line-height: 35px;
        background: #ffffff;
        color: white;
        /*box-shadow: 10px 10px 5px #999999;*/
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
    }
    
    
    .myjumbotron .headersection{
	    width:100%;
	    height:100%;
	    margin: 0 auto;
	    text-align:center;
	    /*border: 3px none orange;*/
	    /*background-color:Orange;*/
	    left: 0px;
	    top: 0px; /*push title bar down slightly*/
	    /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/iphone_bg_large_cropped_faded.png');    
	    background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;*/
	}
    
    .myjumbotron .topsection{
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    
    }
    
    
    
    
    
    
    
    
    .myjumbotron .titlesection{ /*this is the new strip for the page title text if we are to do away with brown titlebar blob*/
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:50px;
	    margin: 0 auto;
	    text-align:center;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat:repeat-x;
        background-position:bottom;
        border-top: 3px solid #ffffff;
        vertical-align:middle;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    background-color: #fafafa; 
	    padding-top:12px;
	    padding-bottom:15px;
    }
    
    /*H1 text for titles of pages*/
    .myjumbotron .titlesection H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:27px;
	    color:#333333;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .titlesection H2
    {
	    /*text-transform: uppercase;*/
	    font-size:16px;
	    color:#333333;
	    
	    /*font-weight:bold;*/
	
    }
    
    
    
    
        

    .myjumbotron .containerbox{
	    /*border: 1px none green;*/
	    width:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    padding: 0px;
	    
    }

    .backgroundimage
    {
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/avaya_scopia_video_conferencing_solution_1920.jpg'); /* no-repeat center center fixed*/  
	    width:100%;
	    height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;   
        border:1px solid #ffffff;
    }
    
    
    /*container for titlebar*/
    .myjumbotron .headersection .titlebar{
	    width:100%;
	    min-height:425px;
	    margin: 0 auto;
	    text-align:center;
	    border-top: 1px solid #ffffff;
	    left: 0px;
	    /*margin-top: 170px; /*push title bar down slightly*/
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_top
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:600px;
	    height:20px;
        
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_top_600.png');
        background-repeat:no-repeat;
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        margin-top: 115px;
        margin-bottom:0px;
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
       
    .myjumbotron .headersection .titlebar .titlebar_text
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:600px;
	    height:100%;
        
        padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:15px;
	    padding-top:10px;
	    padding-bottom:0px;
	    /*border: 3px solid black;*/
	    background: #333333; /*this is the background colour of the whole menu strip*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug for difference in titlebar_text padding-top value*/
    @-moz-document url-prefix() 
    {
        .myjumbotron .headersection .titlebar .titlebar_text
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:600px;
	        height:100%;
        
            padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	        padding-left:15px;
	        padding-top:-15px;
	        padding-bottom:0px;
	        /*border: 3px solid black;*/
	        background: #333333; /*this is the background colour of the whole menu strip*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
        }    
    
    }
     
     
    /*we need to have a slightly different link colour for the titlebar grey background*/
    .myjumbotron .headersection .titlebar .titlebar_text a
    {
        color:#89C5FF;/*0181fc;*/
    }
        
    .myjumbotron .headersection .titlebar .titlebar_text a:hover
    {
        color:#6bc048;
        text-decoration:underline;
    }
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:600px;
	    height:20px;
        margin-top: 0px;
        margin-bottom:90px;
	    -webkit-margin-before: 0px;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_600.png');
        background-repeat:no-repeat;
        /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
    
    
    
    /*css specific to firefox to deal with firefox bug with gap in titlebar*/
    @-moz-document url-prefix() {
        .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
        {
            margin: 0 auto;
	        text-align:center;
	    
	        width:600px;
	        height:20px;
            margin-top: -10px;
            margin-bottom:90px;
            -webkit-margin-before: 0px;
	        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_600.png');
            background-repeat:no-repeat;
            /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
            
        }
    }
    
    
    
    
    /*H1 text for titles of pages*/
    .myjumbotron .headersection .titlebar .titlebar_text H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:26px;
	    color:#ffffff;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text H2
    {
	    /*text-transform: uppercase;*/
	    font-size:15px;
	    color:#ffffff;
	    
	    /*font-weight:bold;*/
	
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text .H2home
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:15px;
	    color:#ffffff;
	    text-align:justify;
	    /*font-weight:bold;*/
	    
    }
    
    /*home page main window content display*/
    .myjumbotron .topsection .cell_background,
    .myjumbotron .containerbox .cell_background {
        vertical-align: top;
        /*border: 0px solid red;*/
        /*
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/rounded_rectangle_original_166.png');
        background-repeat:no-repeat;
        */
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat: repeat-x;
        background-position: bottom;
        width: 33%; /*3 columns*/
        min-height: 300px; /*must have a min of 200px*/
        background-color: #fafafa;
        /*opacity: 0.8;
        filter: alpha(opacity=80);*/ /*for IE8 and earlier*/
        z-index: 1001;
        /*float:left; /*makes everything stay in one row however has problem of shifting all boxes to left as opposed to staying in centre of page*/
        display: inline-block;
        margin: 0 auto;
        text-align: center;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        padding-top: 8px;
        border-top: 4px solid #ffffff;
    }
    
    
    .myjumbotron .topsection .cell_background H1,
    .myjumbotron .containerbox .cell_background H1
    {
	    /*text-transform: uppercase;*/
	    margin-top:0px;
	    font-size:20px;
	    color:#333333;
    }

    .myjumbotron .topsection .cell_background H2,
    .myjumbotron .containerbox .cell_background H2
    {
	    /*text-transform: uppercase;*/
	    margin-top:5px;
	    font-size:14px;
	    color:#333333;
    }   
    
    
    
    
    #cloud_telephony_text 
    {
        display : block;
    }

    #previous_work_text {
        display: block;
    }

    #phone_systems_text 
    {
        display : block;
    }

    #contact_centre_text 
    {
        display : block;
    }

    #maintenance_text 
    {
        display : block;
    }

    #internet_connectivity_text 
    {
        display : block;
    }

    #data_switching_text 
    {
        display : block;
    }

    #video_conferencing_text 
    {
        display : block;
    }

    #relocating_premises_text 
    {
        display : block;
    }

    #mobiles_text 
    {
        display : block;
    }
    
    
    /*we use this to re-size icon image based on the viewport size*/
    .icon_image
    {
        width: 185px; /*original size is 195*/
        height: auto;
        margin-top:5px;

        
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }



    .icon_image2 {
        width: 760px; /*original size is 195*/
        height: auto;
        margin-top: 5px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
        opacity: 0.99;
        filter: alpha(opacity=99); /*for IE8 and earlier*/
    }
    
    .icon_image3
    {
        width: 230px; /*100% size*/
        height: auto;
        margin-top:-28px;
        /*border: 3px solid red;*/
        
    }
    .icon_image4
    {
        width: 450px; /*100% size*/
        height: auto;
        margin-top:60px;
        /*border: 3px solid red;*/
    }
    
    .icon_image5
    {
        display:none;
    }
    
    .icon_image6
    {
        width: 130px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
    
    .icon_image7
    {
        width: 400px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
}




@media screen and (min-width: 1024px) and (max-width: 1300px) /*@media screen and (min-width: 1083px) and (max-width: 1299px)*/ /*page is in two columns now from 1024 onward*/
{ 
    
    /*
    .myjumbotron  
    {
	    margin-top:-70px;
	    height:100%;
	}
    */
    .myjumbotron  
    {
	    position:absolute; /*this removes the need to use a margin:-70px; to get it behind top menu strip*/
	    height:100%;
	    width:100%;
	    top: 0px;
	    left:0px;
	    float:left;
    }
    
    .myjumbotron .page_positioning .topsection  /*needed to make sure everything in whole page begins at top of page (ie behind the top menu)*/
    {
	    height:100%;
	    /*border: 3px solid green;*/
	    float:left;
    }
    
    
    
    
    
    /*non-home pages: the content in main window is displayed differently*/
    /*.myjumbotron .topsection .cell_background_non_home,
    .myjumbotron .containerbox .cell_background_non_home { (min-height:325px)*/
    
    
    
    /* THIS WORKS:
    .css-table {
      display: table;
    }
    .css-table .col {
      display: table-cell;
      width: 25%;
      padding: 10px;
    }
    .css-table .col:nth-child(even) {
      background: #ccc;
    }
    .css-table .col:nth-child(odd) {
      background: #eee;
    }
    */
    
    .css-table {
      display: table;
      background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 1.0;
        filter: alpha(opacity=100); /*for IE8 and earlier*/
        z-index:1001;
    }
    .css-table .cell_background_non_home {
        position:relative; /*we need this so the "bottom_position" class (used for the "for more information call 0845") can be placed at the bottom of this containing parent div. "bottom_position" class uses absolute which looks for the parent div where relative is specified, else body will be used.*/
        display: table-cell;
        width: 85%;
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 0.9;
        filter: alpha(opacity=90); */ /*for IE8 and earlier*/
        z-index:1001;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    /*float:left;*/
	    border-top: 3px solid #ffffff;
	    	    
	    text-align:justify;
	    color: #333333;
	    font-size: 13px;
      
    }
    .css-table .col_right {
        display: table-cell;
        width: 15%;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat:repeat-x;
        background-position:bottom;
        min-height:310px;
        padding-bottom:15px;
                
        margin: 0;
        background-color: #fafafa;
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index:1001;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px; /*note this is different to the smaller width screen*/
	    /*float:left;*/
	    border-top: 3px solid #ffffff;
	    border-left: 4px solid #ffffff;
	    
	    text-align:center;
	    color: #333333;
	    font-size: 11px;
      
    }
    
    .css-table .col_right H2 
    {
        font-size:13px;
    }
    
    
    
    
    
    
    
    
    .myjumbotron .topsection .cell_background_non_home H1,
    .myjumbotron .containerbox .cell_background_non_home H1
    {
	    /*text-transform: uppercase;*/
	    font-size:18px;
	    color:#333333;
	    font-weight:bold;
    }

    .myjumbotron .topsection .cell_background_non_home H2,
    .myjumbotron .containerbox .cell_background_non_home H2
    {
	    /*text-transform: uppercase;*/
	    font-size:13px;
	    color:#333333;
	    font-weight:bold;
	}
       
    
    .myjumbotron .topsection .cell_background_non_home H1 a,
    .myjumbotron .containerbox .cell_background_non_home H1 a
    {
        color: #6bc048;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:hover,
    .myjumbotron .containerbox .cell_background_non_home H1 a:hover
    {
        text-decoration:none;
	    color: #333333;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:focus,
    .myjumbotron .containerbox .cell_background_non_home H1 a:focus
    {
        text-decoration:none;
	    color: #333333;
    }





    .logo {
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo_big_v3.png');*/
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo.png');*/ /*336x130*/
        width: 265px;
        height: auto;
        background-repeat: no-repeat;
        position: absolute;
        left: 0px;
        top: 40px;
        margin-bottom: 0px;
        /*opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index: 999;
    }


    #logoimage {
        width: 265px;
        height: auto;
        left: 0px;
        right: 0px;
    }

    .rcorners2_logo {
        margin-top: 10px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 290px;
        height: 90px;
        text-align: center;
        line-height: 35px;
        background: #ffffff;
        color: white;
        /*box-shadow: 10px 10px 5px #999999;*/
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
    }
    
    
    .myjumbotron .headersection{
	    width:100%;
	    height:100%;
	    margin: 0 auto;
	    text-align:center;
	    /*border: 3px none orange;*/
	    /*background-color:Orange;*/
	    left: 0px;
	    top: 0px; /*push title bar down slightly*/
	    /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/iphone_bg_large_cropped_faded.png');    
	    background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;*/
	}
    
    .myjumbotron .topsection{
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    
    }
    
    
    
    
    
    .myjumbotron .titlesection{ /*this is the new strip for the page title text if we are to do away with brown titlebar blob*/
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:50px;
	    margin: 0 auto;
	    text-align:center;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat:repeat-x;
        background-position:bottom;
        border-top: 3px solid #ffffff;
        vertical-align:middle;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    background-color: #fafafa; 
	    padding-top:12px;
	    padding-bottom:15px;
    }
    
    /*H1 text for titles of pages*/
    .myjumbotron .titlesection H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:28px;
	    color:#333333;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .titlesection H2
    {
	    /*text-transform: uppercase;*/
	    font-size:16px;
	    color:#333333;
	    
	    /*font-weight:bold;*/
	
    }
    
    
    
        

    .myjumbotron .containerbox{
	    /*border: 1px none green;*/
	    width:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    padding: 0px;
    }

    .backgroundimage
    {
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/avaya_scopia_video_conferencing_solution_1920.jpg'); /* no-repeat center center fixed*/  
	    width:100%;
	    height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;   
        border:1px solid #ffffff;
    }
        
    
    /*container for titlebar*/
    .myjumbotron .headersection .titlebar{
	    width:100%;
	    min-height:470px;
	    margin: 0 auto;
	    text-align:center;
	    border-top: 1px solid #ffffff;
	    left: 0px;
	    /*margin-top: 170px; /*push title bar down slightly*/
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_top
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:700px;
	    height:20px;
        
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_top_700.png');
        background-repeat:no-repeat;
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        margin-top: 125px;
        margin-bottom:0px;
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
    
        
    .myjumbotron .headersection .titlebar .titlebar_text
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:700px;
	    height:100%;
        
        padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:15px;
	    padding-top:10px;
	    padding-bottom:0px;
	    /*border: 3px solid black;*/
	    background: #333333; /*this is the background colour of the whole menu strip*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug for difference in titlebar_text padding-top value*/
    @-moz-document url-prefix() 
    {
        .myjumbotron .headersection .titlebar .titlebar_text
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:700px;
	        height:100%;
        
            padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	        padding-left:15px;
	        padding-top:-15px;
	        padding-bottom:0px;
	        /*border: 3px solid black;*/
	        background: #333333; /*this is the background colour of the whole menu strip*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
        }    
    
    }
    
    /*we need to have a slightly different link colour for the titlebar grey background*/
    .myjumbotron .headersection .titlebar .titlebar_text a
    {
        color:#89C5FF;/*0181fc;*/
    }
        
    .myjumbotron .headersection .titlebar .titlebar_text a:hover
    {
        color:#6bc048;
        text-decoration:underline;
    }
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:700px;
	    height:20px;
        margin-top: 0px;
        margin-bottom:90px;
	    -webkit-margin-before: 0px;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_700.png');
        background-repeat:no-repeat;
        /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
    
    
    
    /*css specific to firefox to deal with firefox bug with gap in titlebar*/
    @-moz-document url-prefix() {
        .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
        {
            margin: 0 auto;
	        text-align:center;
	    
	        width:700px;
	        height:20px;
            margin-top: -10px;
            margin-bottom:90px;
            -webkit-margin-before: 0px;
	        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_700.png');
            background-repeat:no-repeat;
            /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
            
        }
    }
    
    
    
    /*H1 text for titles of pages*/
    .myjumbotron .headersection .titlebar .titlebar_text H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:27px;
	    color:#ffffff;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text H2
    {
	    /*text-transform: uppercase;*/
	    font-size:16px;
	    color:#ffffff;
	    
	    /*font-weight:bold;*/
	
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text .H2home
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:16px;
	    color:#ffffff;
	    text-align:justify;
	    /*font-weight:bold;*/
	    
    }
    
    /*home page main window content display*/
    .myjumbotron .topsection .cell_background,
    .myjumbotron .containerbox .cell_background {
        vertical-align: top;
        /*border: 0px solid red;*/
        /*
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/rounded_rectangle_original_166.png');
        background-repeat:no-repeat;
        */
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat: repeat-x;
        background-position: bottom;
        width: 33%; /*3 columns*/
        min-height: 300px; /*must have a min of 200px*/
        background-color: #fafafa;
        /*opacity: 0.8;
        filter: alpha(opacity=80);*/ /*for IE8 and earlier*/
        z-index: 1001;
        /*float:left; /*makes everything stay in one row however has problem of shifting all boxes to left as opposed to staying in centre of page*/
        display: inline-block;
        margin: 0 auto;
        text-align: center;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        padding-top: 8px;
        border-top: 4px solid #ffffff;
    }
    
    
    .myjumbotron .topsection .cell_background H1,
    .myjumbotron .containerbox .cell_background H1
    {
	    /*text-transform: uppercase;*/
	    margin-top:0px;
	    font-size:21px;
	    color:#333333;
    }

    .myjumbotron .topsection .cell_background H2,
    .myjumbotron .containerbox .cell_background H2
    {
	    /*text-transform: uppercase;*/
	    margin-top:5px;
	    font-size:15px;
	    color:#333333;
    }
    
    /*we use this to re-size icon image based on the viewport size*/
    .icon_image
    {
        width: 200px; /*width: 175px; /*original size is 195*/
        height: auto;
        margin-top:5px;

        
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }


    .icon_image2 {
        width: 280px; /*width: 175px; /*original size is 195*/
        height: auto;
        margin-top: 5px;
        margin-right: 13px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
        opacity: 0.99;
        filter: alpha(opacity=99); /*for IE8 and earlier*/
    }
    .icon_image3
    {
        display:none;
    }
    .icon_image4
    {
        width: 155px; /*width: 270px; /*100% size*/
        height: auto;
        margin-top:60px;
        /*border: 3px solid red;*/
    }
    .icon_image5
    {
        width: 155px; /*width: 270px;*/
        height: auto;
        margin-top:60px;
    }
    
    .icon_image6
    {
        width: 120px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
    
    .icon_image7
    {
        width: 400px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
    
    
}



@media screen and (min-width: 1300px) { /*if viewport is 650 or WIDER */
    
    /*
    .myjumbotron  
    {
	    margin-top:-70px;
	    height:100%;
	}
    */
    .myjumbotron  
    {
	    position:absolute; /*this removes the need to use a margin:-70px; to get it behind top menu strip*/
	    height:100%;
	    width:100%;
	    top: 0px;
	    left:0px;
	    /*border: 3px solid green;*/
	    float:left;
    }
    
    .myjumbotron .page_positioning .topsection  /*needed to make sure everything in whole page begins at top of page (ie behind the top menu)*/
    {
	    height:100%;
	    /*border: 3px solid green;*/
	    float:left;
    }
    
    
    /*new 080116*/
    /*
    .myjumbotron .topsection .cell_background_non_home_image
    {
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        
	    height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    */
    
    
    
    
    /*non-home pages: the content in main window is displayed differently*/
    /*.myjumbotron .topsection .cell_background_non_home,
    .myjumbotron .containerbox .cell_background_non_home { (min-height:275px)*/
    
    
    
    /* THIS WORKS:
    .css-table {
      display: table;
    }
    .css-table .col {
      display: table-cell;
      width: 25%;
      padding: 10px;
    }
    .css-table .col:nth-child(even) {
      background: #ccc;
    }
    .css-table .col:nth-child(odd) {
      background: #eee;
    }
    */
    
    
    .css-table {
      display: table;
      background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 1.0;
        filter: alpha(opacity=100); /*for IE8 and earlier*/
        z-index:1001;
    }
    .css-table .cell_background_non_home {
        position:relative; /*we need this so the "bottom_position" class (used for the "for more information call 0845") can be placed at the bottom of this containing parent div. "bottom_position" class uses absolute which looks for the parent div where relative is specified, else body will be used.*/
        display: table-cell;
        width: 85%;
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/background.jpg');
        height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        margin: 0;
        background-color: #fafafa;
        opacity: 0.9;
        filter: alpha(opacity=90); */ /*for IE8 and earlier*/
        z-index:1001;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    /*float:left;*/
	    border-top: 3px solid #ffffff;
	    	    
	    text-align:justify;
	    color: #333333;
	    font-size: 13px;
      
    }
        .css-table .col_right {
            display: table-cell;
            width: 15%;
            
            background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
            background-repeat: repeat-x;
            background-position: bottom;
            min-height: 310px;
            padding-bottom: 15px;
            margin: 0;
            background-color: #fafafa;
            opacity: 0.90;
            filter: alpha(opacity=90); /*for IE8 and earlier*/
            z-index: 1001;
            padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
            padding-left: 47px; /*note this is different to the smaller width screen*/
            /*float:left;*/
            border-top: 3px solid #ffffff;
            border-left: 4px solid #ffffff;
            text-align: center;
            color: #333333;
            font-size: 12px;
        }
    
    .css-table .col_right H2 
    {
        font-size:13px;
    }
    
    
    
    
    
    .myjumbotron .topsection .cell_background_non_home H1,
    .myjumbotron .containerbox .cell_background_non_home H1
    {
	    /*text-transform: uppercase;*/
	    font-size:19px;
	    color:#333333;
	    font-weight:bold;
    }

    .myjumbotron .topsection .cell_background_non_home H2,
    .myjumbotron .containerbox .cell_background_non_home H2
    {
	    /*text-transform: uppercase;*/
	    font-size:13px;
	    color:#333333;
	    font-weight:bold;
	}
       
    
    .myjumbotron .topsection .cell_background_non_home H1 a,
    .myjumbotron .containerbox .cell_background_non_home H1 a
    {
        color: #6bc048;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:hover,
    .myjumbotron .containerbox .cell_background_non_home H1 a:hover
    {
        text-decoration:none;
	    color: #333333;
    }
    .myjumbotron .topsection .cell_background_non_home H1 a:focus,
    .myjumbotron .containerbox .cell_background_non_home H1 a:focus
    {
        text-decoration:none;
	    color: #333333;
    }




    .logo {
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo_big_v3.png');*/
        /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/logo/logo.png');*/ /*336x130*/
        width: 308px;
        height: auto;
        background-repeat: no-repeat;
        position: absolute;
        left: 0px;
        top: 40px;
        margin-bottom: 0px;
        /*opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        z-index: 999;
    }


    #logoimage {
        width: 308px;
        height: auto;
        left: 0px;
        right: 0px;
    }

    .rcorners2_logo {
        margin-top: 10px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 335px;
        height: 105px;
        text-align: center;
        line-height: 35px;
        background: #ffffff;
        color: white;
        /*box-shadow: 10px 10px 5px #999999;*/
        opacity: 0.90;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
    }
      
    
    .myjumbotron .headersection{
	    width:100%;
	    height:100%;
	    margin: 0 auto;
	    text-align:center;
	    /*border: 3px none orange;*/
	    /*background-color:Orange;*/
	    left: 0px;
	    top: 0px; /*push title bar down slightly*/
	    /*background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/iphone_bg_large_cropped_faded.png');    
	    background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;*/
        
	}
    
    .myjumbotron .topsection{
	    /*border: 3px solid pink;*/
	    width:100%;
	    height: 100%;
	    margin: 0 auto;
	    text-align:center;
	}
    
    
    
    
    
    .myjumbotron .titlesection{ /*this is the new strip for the page title text if we are to do away with brown titlebar blob*/
	    /*border: 3px none pink;*/
	    width:100%;
	    height:100%;
	    min-height:50px;
	    margin: 0 auto;
	    text-align:center;
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat:repeat-x;
        background-position:bottom;
        border-top: 3px solid #ffffff;
        vertical-align:middle;
        padding-right:47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:47px;
	    background-color: #fafafa; 
	    padding-top:12px;
	    padding-bottom:15px;
    }
    
    /*H1 text for titles of pages*/
    .myjumbotron .titlesection H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:28px;
	    color:#333333;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .titlesection H2
    {
	    /*text-transform: uppercase;*/
	    font-size:17px;
	    color:#333333;
	    
	    /*font-weight:bold;*/
	
    }
    
    
    
    
    
    .myjumbotron .containerbox{
	    /*border: 1px none green;*/
	    width:100%;
	    min-height:200px;
	    margin: 0 auto;
	    text-align:center;
	    padding: 0px;
    }
        
    .backgroundimage
    {
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/avaya_scopia_video_conferencing_solution_1920.jpg'); /* no-repeat center center fixed*/ 
	    width:100%;
	    max-height:100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;   
        border:1px solid #ffffff;
    }
    
    
    /*container for titlebar*/
    .myjumbotron .headersection .titlebar{
	    width:100%;
	    min-height:515px;
	    margin: 0 auto;
	    text-align:center;
	    border-top: 1px solid #ffffff;
	    left: 0px;
	    /*margin-top: 170px; /*push title bar down slightly*/
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_top
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:800px;
	    height:20px;
        
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_top_800.png');
        background-repeat:no-repeat;
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        margin-top: 135px;
        margin-bottom:0px;
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
        
    .myjumbotron .headersection .titlebar .titlebar_text
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:800px;
	    height:100%;
        
        padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	    padding-left:15px;
	    padding-top:10px;
	    padding-bottom:0px;
	    /*border: 3px solid black;*/
	    background: #333333; /*this is the background colour of the whole menu strip*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
    }
    
    
    /*css specific to firefox to deal with firefox bug for difference in titlebar_text padding-top value*/
    @-moz-document url-prefix() 
    {
        .myjumbotron .headersection .titlebar .titlebar_text
        {
            /*width: 80%;*/
            margin: 0 auto;
	        text-align:center;
	    
	        width:800px;
	        height:100%;
        
            padding-right:15px; /*this is for the contact us popup - so it does not cover anything in our main window*/
	        padding-left:15px;
	        padding-top:-15px;
	        padding-bottom:0px;
	        /*border: 3px solid black;*/
	        background: #333333; /*this is the background colour of the whole menu strip*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
        
        }    
    
    }
    
    
    /*we need to have a slightly different link colour for the titlebar grey background*/
    .myjumbotron .headersection .titlebar .titlebar_text a
    {
        color:#89C5FF;/*0181fc;*/
    }
        
    .myjumbotron .headersection .titlebar .titlebar_text a:hover
    {
        color:#6bc048;
        text-decoration:underline;
    }
    
    
    
    
    .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
    {
        /*width: 80%;*/
        margin: 0 auto;
	    text-align:center;
	    
	    width:800px;
	    height:20px;
        margin-top: 0px;
        margin-bottom:90px;
	    -webkit-margin-before: 0px;
	    
	    background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_800.png');
        background-repeat:no-repeat;
        /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
        opacity: 0.95;
        filter: alpha(opacity=95); /*for IE8 and earlier*/
        
	    /*border: 3px solid black;*/
	    /*
	    background: #333333; /*this is the background colour of the whole menu strip*/
        /*
        opacity: 0.9;
        filter: alpha(opacity=90); /*for IE8 and earlier*/
        
    }
    
    
    
    /*css specific to firefox to deal with firefox bug with gap in titlebar*/
    @-moz-document url-prefix() {
        .myjumbotron .headersection .titlebar .titlebar_text_curved_bottom
        {
            margin: 0 auto;
	        text-align:center;
	    
	        width:800px;
	        height:20px;
            margin-top: -10px;
            margin-bottom:90px;
            -webkit-margin-before: 0px;
	        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/titlebar/titlebar_text_curved_bottom_800.png');
            background-repeat:no-repeat;
            /*background-position:right; WE WOULD USE THIS IF WE WANTED TO USE THE IMAGE WITH THE BOTTOM CURVE ON THE RIGHT HAND SIDE - WE ARE NOW USING AN IMAGE WITH CURVE ON THE LEFT HAND SIDE*/
            opacity: 0.95;
            filter: alpha(opacity=95); /*for IE8 and earlier*/
            
        }
    }
    
    
    
    /*H1 text for titles of pages*/
    .myjumbotron .headersection .titlebar .titlebar_text H1
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:29px;
	    color:#ffffff;
	    /*font-weight:bold;*/
	    
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text H2
    {
	    /*text-transform: uppercase;*/
	    font-size:17px;
	    color:#ffffff;
	    
	    /*font-weight:bold;*/
	
    }
    
    .myjumbotron .headersection .titlebar .titlebar_text .H2home
    {
	    /*text-transform: uppercase;*/
	    
	    font-size:17px;
	    color:#ffffff;
	    text-align:justify;
	    /*font-weight:bold;*/
	    
    }
    
    /*home page main window content display*/
    .myjumbotron .topsection .cell_background,
    .myjumbotron .containerbox .cell_background {
        vertical-align: top;
        vertical-align: top;
        /*border: 2px solid red;*/
        /*
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/rounded_rectangles/rounded_rectangle_original_166.png');
        background-repeat:no-repeat;
        */
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v3.png');
        background-repeat: repeat-x;
        background-position: bottom;
        width: 33%; /*4 columns*/
        min-height: 350px; /*must have a min of 200px*/
        background-color: #fafafa;
        /*opacity: 0.8;
        filter: alpha(opacity=80);*/ /*for IE8 and earlier*/
        z-index: 1001;
        /*float:left; /*makes everything stay in one row however has problem of shifting all boxes to left as opposed to staying in centre of page*/
        display: inline-block;
        margin: 0 auto;
        text-align: center;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        padding-top: 8px;
        border-top: 4px solid #ffffff;
    }
    
    .myjumbotron .topsection .cell_background H1,
    .myjumbotron .containerbox .cell_background H1
    {
	    /*text-transform: uppercase;*/
	    margin-top:0px;
	    font-size:22px;
	    color:#333333;
    }

    .myjumbotron .topsection .cell_background H2,
    .myjumbotron .containerbox .cell_background H2
    {
	    /*text-transform: uppercase;*/
	    margin-top:5px;
	    font-size:16px;
	    color:#333333;
    }
    
    /*we use this to re-size icon image based on the viewport size*/
    .icon_image
    {
        width: 275px; /*width: 195px; /*100% size*/
        height: auto;
        margin-top:5px;

        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }

    .icon_image2 {
        width: 350px; /*width: 175px; /*original size is 195*/
        height: auto;
        margin-top: 5px;
        margin-right: 13px;
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
        opacity: 0.99;
        filter: alpha(opacity=99); /*for IE8 and earlier*/
    }
    .icon_image3
    {
        display:none;
    }
    .icon_image4
    {
        width: 175px; /*width: 370px; /*100% size*/
        height: auto;
        margin-top:60px;
        /*border: 3px solid red;*/
    }
    .icon_image5
    {
        width: 175px; /*width: 370px;*/
        height: auto;
        margin-top:60px;
    }
    
    
    
    .icon_image6
    {
        width: 150px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
    
    .icon_image7
    {
        width: 400px; /*100% size*/
        height: auto;
        margin-top:15px;
        /*border: 3px solid red;*/
    }
}
















/*deal with table widths on smaller screens*/
@media (max-width: 400px) {

    .table_format {
        border-collapse: collapse;
        width: 100%; /*270*/
        background-color: #fafafa;
        opacity: 0.85;
        filter: alpha(opacity=85);
        padding-right: 27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 27px;
        /*margin-left:-10px;*/
        font-size: 9px;
    }

    .cell_format {
        padding: 3px;
        border: 1px solid;
        text-align: center;
        vertical-align: top;
        font-size: 9px;
    }

    .table_format .cell_format ul {
        margin-left: -20px;
        text-align: left;
    }

    .row_format /*this is optionally used for header rows*/ {
        text-align: center;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat: repeat-x;
        background-position: bottom;
        border: 1px solid;
    }


    .breadcrumb {
        font-size: 9px;
        color: #666666;
        margin-left: 0px;
        width: 100%;
        min-height: 10px;
        margin: 0;
        background-color: #fafafa;
        opacity: 0.83;
        filter: alpha(opacity=83); /*for IE8 and earlier*/
        z-index: 1001;
        padding-right: 27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 27px;
        /*float:left;*/
        border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        border-left: 4px solid #ffffff;
        text-align: left;
        color: #333333;
    }

    .breadcrumb a {
        font-weight: bold;
    }

}

@media (min-width: 400px) and (max-width: 551px) {

    .table_format {
        border-collapse: collapse;
        width: 100%; /*290*/
        background-color: #fafafa;
        opacity: 0.85;
        filter: alpha(opacity=85);
        padding-right: 27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 27px;
        font-size: 10px;
    }

    .cell_format {
        padding: 5px;
        border: 1px solid;
        text-align: center;
        vertical-align: top;
        font-size: 10px;
    }

    .table_format .cell_format ul {
        margin-left: -20px;
        text-align: left;
    }

    .row_format /*this is optionally used for header rows*/ {
        text-align: center;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat: repeat-x;
        background-position: bottom;
        border: 1px solid;
    }


    .breadcrumb {
        font-size: 9px;
        color: #666666;
        margin-left: 0px;
        width: 100%;
        min-height: 10px;
        margin: 0;
        background-color: #fafafa;
        opacity: 0.83;
        filter: alpha(opacity=83); /*for IE8 and earlier*/
        z-index: 1001;
        padding-right: 27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 27px;
        /*float:left;*/
        border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        border-left: 4px solid #ffffff;
        text-align: left;
        color: #333333;
    }

    .breadcrumb a {
        font-weight: bold;
    }

}


@media (min-width: 551px) and (max-width: 651px) {

    .table_format {
        border-collapse: collapse;
        width: 100%; /*441*/
        background-color: #fafafa;
        opacity: 0.85;
        filter: alpha(opacity=85);
        padding-right: 27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 27px;
        font-size: 10px;
    }

    .cell_format {
        padding: 5px;
        border: 1px solid;
        text-align: center;
        vertical-align: top;
        font-size: 10px;
    }

    .table_format .cell_format ul {
        margin-left: -20px;
        text-align: left;
    }

    .row_format /*this is optionally used for header rows*/ {
        text-align: center;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat: repeat-x;
        background-position: bottom;
        border: 1px solid;
    }


    .breadcrumb {
        font-size: 9px;
        color: #666666;
        margin-left: 0px;
        width: 100%;
        min-height: 10px;
        margin: 0;
        background-color: #fafafa;
        opacity: 0.83;
        filter: alpha(opacity=83); /*for IE8 and earlier*/
        z-index: 1001;
        padding-right: 27px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 27px;
        /*float:left;*/
        border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        border-left: 4px solid #ffffff;
        text-align: left;
        color: #333333;
    }

    .breadcrumb a {
        font-weight: bold;
    }

}



@media (min-width: 651px) and (max-width: 768px) {

    .table_format {
        border-collapse: collapse;
        width: 100%; /*541*/
        background-color: #fafafa;
        opacity: 0.85;
        filter: alpha(opacity=85);
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        font-size: 11px;
    }

    .cell_format {
        padding: 5px;
        border: 1px solid;
        text-align: center;
        vertical-align: top;
        font-size: 11px;
    }

    .table_format .cell_format ul {
        margin-left: -20px;
        text-align: left;
    }

    .row_format /*this is optionally used for header rows*/ {
        text-align: center;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat: repeat-x;
        background-position: bottom;
        border: 1px solid;
    }


    .breadcrumb {
        font-size: 9px;
        color: #666666;
        margin-left: 0px;
        width: 100%;
        min-height: 10px;
        margin: 0;
        background-color: #fafafa;
        opacity: 0.83;
        filter: alpha(opacity=83); /*for IE8 and earlier*/
        z-index: 1001;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        /*float:left;*/
        border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        border-left: 4px solid #ffffff;
        text-align: left;
        color: #333333;
    }

    .breadcrumb a {
        font-weight: bold;
    }

}



@media (min-width: 768px) and (max-width: 906px) {

    .table_format {
        border-collapse: collapse;
        width: 100%; /*658*/
        background-color: #fafafa;
        opacity: 0.85;
        filter: alpha(opacity=85);
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        font-size: 11px;
    }

    .cell_format {
        padding: 5px;
        border: 1px solid;
        text-align: center;
        vertical-align: top;
        font-size: 11px;
    }

    .table_format .cell_format ul {
        margin-left: -20px;
        text-align: left;
    }

    .row_format /*this is optionally used for header rows*/ {
        text-align: center;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat: repeat-x;
        background-position: bottom;
        border: 1px solid;
    }


    .breadcrumb {
        font-size: 10px;
        color: #666666;
        margin-left: 0px;
        width: 100%;
        min-height: 10px;
        margin: 0;
        background-color: #fafafa;
        opacity: 0.83;
        filter: alpha(opacity=83); /*for IE8 and earlier*/
        z-index: 1001;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        /*float:left;*/
        border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        border-left: 4px solid #ffffff;
        text-align: left;
        color: #333333;
    }

    .breadcrumb a {
        font-weight: bold;
    }

}

/********************************************************
*********************************************************
*********************************************************
*********************************************************abc*/

@media (min-width: 906px) and (max-width: 1024px) /*@media (min-width: 906px) and (max-width: 1082px)*/
{

    .table_format {
        border-collapse: collapse;
        width: 100%; /*443    60% of 906 - 100*/
        background-color: #fafafa;
        opacity: 0.85;
        filter: alpha(opacity=85);
        padding-right: 47px; /*17px*/ /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px; /*17px*/
        font-size: 11px;
    }

    .cell_format {
        padding: 5px;
        border: 1px solid;
        text-align: center;
        vertical-align: top;
        font-size: 11px;
    }

    .table_format .cell_format ul {
        margin-left: -20px;
        text-align: left;
    }

    .row_format /*this is optionally used for header rows*/ {
        text-align: center;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat: repeat-x;
        background-position: bottom;
        border: 1px solid;
    }


    .breadcrumb {
        font-size: 10px;
        color: #666666;
        margin-left: 0px;
        width: 100%;
        min-height: 10px;
        margin: 0;
        background-color: #fafafa;
        opacity: 0.83;
        filter: alpha(opacity=83); /*for IE8 and earlier*/
        z-index: 1001;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        /*float:left;*/
        border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        border-left: 4px solid #ffffff;
        text-align: left;
        color: #333333;
    }

    .breadcrumb a {
        font-weight: bold;
    }

}


@media screen and (min-width: 1024px) and (max-width: 1300px) /*@media screen and (min-width: 1083px) and (max-width: 1299px)*/ /*page is in two columns now from 1024 onward*/
{

    .table_format {
        border-collapse: collapse;
        width: 100%; /*549   60% of 1083 - 100*/
        background-color: #fafafa;
        opacity: 0.85;
        filter: alpha(opacity=85);
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        font-size: 11px;
    }

    .cell_format {
        padding: 10px;
        border: 1px solid;
        text-align: center;
        vertical-align: top;
        font-size: 11px;
    }

    .table_format .cell_format ul {
        margin-left: -20px;
        text-align: left;
    }

    .row_format /*this is optionally used for header rows*/ {
        text-align: center;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat: repeat-x;
        background-position: bottom;
        border: 1px solid;
    }


    .breadcrumb {
        font-size: 11px;
        color: #666666;
        margin-left: 0px;
        width: 100%;
        min-height: 10px;
        margin: 0;
        background-color: #fafafa;
        opacity: 0.83;
        filter: alpha(opacity=83); /*for IE8 and earlier*/
        z-index: 1001;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        /*float:left;*/
        border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        border-left: 4px solid #ffffff;
        text-align: left;
        color: #333333;
    }

    .breadcrumb a {
        font-weight: bold;
    }

}

@media (min-width: 1300px) {

    .table_format {
        border-collapse: collapse;
        width: 100%;
        background-color: #fafafa;
        opacity: 0.85;
        filter: alpha(opacity=85);
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        font-size: 12px;
    }

    .cell_format {
        padding: 10px;
        border: 1px solid;
        text-align: center;
        vertical-align: top;
        font-size: 12px;
    }

    .table_format .cell_format ul {
        margin-left: -20px;
        text-align: left;
    }

    .row_format /*this is optionally used for header rows*/ {
        text-align: center;
        background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_small.png');
        background-repeat: repeat-x;
        background-position: bottom;
        border: 1px solid;
    }


    .breadcrumb {
        font-size: 11px;
        color: #666666;
        margin-left: 0px;
        width: 100%;
        min-height: 10px;
        margin: 0;
        background-color: #fafafa;
        opacity: 0.83;
        filter: alpha(opacity=83); /*for IE8 and earlier*/
        z-index: 1001;
        padding-right: 47px; /*this is for the contact us popup - so it does not cover anything in our main window*/
        padding-left: 47px;
        /*float:left;*/
        border-top: 4px solid #ffffff; /*WE NEED TO DO THIS ON THE SMALLER WIDTH SCREEN*/
        border-left: 4px solid #ffffff;
        text-align: left;
        color: #333333;
    }

    .breadcrumb a {
        font-weight: bold;
    }

}




/*CLASSES FOR IFRAMES IN THE MAILSHOTS.ASP PAGE*/

@media (max-width: 400px) {
    .iframe_class {
        width: 100%;
        height: 500px;
        margin-left: -5px;
        position: relative;
    }


    /**************************************************/
    /*CLASSES FOR ROUNDED RECTANGLES SEEN ON HOME PAGE*/
    #side_by_side {
        display: none;
    }

    /*#above_each_other {
        display: none;
    }*/
    .rcorners2 {
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 240px;
        height: 40px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }

    .vertical_align {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    .rcorners2 .vertical_align a {
        color: white;
        font-size: 11px;
    }

        .rcorners2 .vertical_align a:hover {
            color: #333333;
            font-size: 11px;
        }

    /*************************************************/
    

    .slider_dimensions {
        position: relative;
        margin: 0 auto;
        top: 0px;
        left: 0px;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        visibility: hidden;
    }
}

@media (min-width: 400px) and (max-width: 551px) {
    .iframe_class {
        width: 100%;
        height: 600px;
        margin-left: -5px;
        position: relative;
    }


    /**************************************************/
    /*CLASSES FOR ROUNDED RECTANGLES SEEN ON HOME PAGE*/
    #side_by_side {
        display: none;
    }

    /*#above_each_other {
        display: none;
    }*/
    .rcorners2 {
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 240px;
        height: 40px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }

    .vertical_align {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    .rcorners2 .vertical_align a {
        color: white;
        font-size: 11px;
    }

        .rcorners2 .vertical_align a:hover {
            color: #333333;
            font-size: 11px;
        }

    /*************************************************/
    

    .slider_dimensions {
        position: relative;
        margin: 0 auto;
        top: 0px;
        left: 0px;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        visibility: hidden;
    }

}

@media (min-width: 551px) and (max-width: 651px) {
    .iframe_class {
        width: 100%;
        height: 650px;
        margin-left: -5px;
        position: relative;
    }


    /**************************************************/
    /*CLASSES FOR ROUNDED RECTANGLES SEEN ON HOME PAGE*/
    #side_by_side {
        display: none;
    }

    /*#above_each_other {
        display: none;
    }*/
    .rcorners2 {
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 240px;
        height: 40px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }

    .vertical_align {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    .rcorners2 .vertical_align a {
        color: white;
        font-size: 11px;
    }

        .rcorners2 .vertical_align a:hover {
            color: #333333;
            font-size: 11px;
        }

    /*************************************************/
    

    .slider_dimensions {
        position: relative;
        margin: 0 auto;
        top: 0px;
        left: 0px;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        visibility: hidden;
    }

}

@media (min-width: 651px) and (max-width: 768px) {
    .iframe_class {
        width: 100%;
        height: 700px;
        margin-left: -5px;
        position: relative;
    }


    /**************************************************/
    /*CLASSES FOR ROUNDED RECTANGLES SEEN ON HOME PAGE*/
    /*#side_by_side {
        display: none;
    }*/
    #above_each_other {
        display: none;
    }

    .rcorners2 {
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 230px;
        height: 40px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }

    .vertical_align {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    .rcorners2 .vertical_align a {
        color: white;
        font-size: 11px;
    }

        .rcorners2 .vertical_align a:hover {
            color: #333333;
            font-size: 11px;
        }

    /*************************************************/
    

    .slider_dimensions {
        position: relative;
        margin: 0 auto;
        top: 0px;
        left: 0px;
        width: 1920px;
        height: 1010px;
        overflow: hidden;
        visibility: hidden;
    }
}

@media (min-width: 768px) and (max-width: 906px) {
    .iframe_class {
        width: 100%;
        height: 800px;
        margin-left: -5px;
        position: relative;
    }


    /**************************************************/
    /*CLASSES FOR ROUNDED RECTANGLES SEEN ON HOME PAGE*/
    /*#side_by_side {
        display: none;
    }*/
    #above_each_other {
        display: none;
    }

    .rcorners2 {
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 240px;
        height: 40px;
        text-align: center;
        line-height: 25px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }

    .vertical_align {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    .rcorners2 .vertical_align a {
        color: white;
        font-size: 11px;
    }

        .rcorners2 .vertical_align a:hover {
            color: #333333;
            font-size: 11px;
        }

    /*************************************************/
    

    .slider_dimensions {
        position: relative;
        margin: 0 auto;
        top: 0px;
        left: 0px;
        width: 1920px;
        height: 980px;
        overflow: hidden;
        visibility: hidden;
    }
}

@media (min-width: 906px) and (max-width: 1024px) {
    .iframe_class {
        width: 100%;
        height: 800px;
        margin-left: -5px;
        position: relative;
    }


    /**************************************************/
    /*CLASSES FOR ROUNDED RECTANGLES SEEN ON HOME PAGE*/
    /*#side_by_side {
        display: none;
    }*/
    #above_each_other {
        display: none;
    }

    .rcorners2 {
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 250px;
        height: 45px;
        text-align: center;
        line-height: 30px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }

    .vertical_align {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    .rcorners2 .vertical_align a {
        color: white;
        font-size: 13px;
    }

        .rcorners2 .vertical_align a:hover {
            color: #333333;
            font-size: 13px;
        }

    /*************************************************/
    

    .slider_dimensions {
        position: relative;
        margin: 0 auto;
        top: 0px;
        left: 0px;
        width: 1920px;
        height: 950px;
        overflow: hidden;
        visibility: hidden;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1150px) {
    .iframe_class {
        width: 100%;
        height: 875px;
        margin-left: -5px;
        position: relative;
    }


    /**************************************************/
    /*CLASSES FOR ROUNDED RECTANGLES SEEN ON HOME PAGE*/
    /*#side_by_side {
        display: none;
    }*/
    #above_each_other {
        display: none;
    }

    .rcorners2 {
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 270px;
        height: 45px;
        text-align: center;
        line-height: 30px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }

    .vertical_align {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    .rcorners2 .vertical_align a {
        color: white;
        font-size: 14px;
    }

        .rcorners2 .vertical_align a:hover {
            color: #333333;
            font-size: 14px;
        }

    /*************************************************/
    

    .slider_dimensions {
        position: relative;
        margin: 0 auto;
        top: 0px;
        left: 0px;
        width: 1920px;
        height: 900px;
        overflow: hidden;
        visibility: hidden;
    }
}

@media screen and (min-width: 1150px) and (max-width: 1300px) {
    .iframe_class {
        width: 100%;
        height: 875px;
        margin-left: -5px;
        position: relative;
    }

    /**************************************************/
    /*CLASSES FOR ROUNDED RECTANGLES SEEN ON HOME PAGE*/
    /*#side_by_side {
        display: none;
    }*/
    #above_each_other {
        display: none;
    }

    .rcorners2 {
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 270px;
        height: 47px;
        text-align: center;
        line-height: 32px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }

    .vertical_align {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    .rcorners2 .vertical_align a {
        color: white;
        font-size: 14px;
    }

        .rcorners2 .vertical_align a:hover {
            color: #333333;
            font-size: 14px;
        }

    /*************************************************/
    

    .slider_dimensions {
        position: relative;
        margin: 0 auto;
        top: 0px;
        left: 0px;
        width: 1920px;
        height: 840px;
        overflow: hidden;
        visibility: hidden;
    }
}

@media (min-width: 1300px) {
    .iframe_class {
        width: 100%;
        height: 875px;
        margin-left: -5px;
        position: relative;
    }

    /**************************************************/
    /*CLASSES FOR ROUNDED RECTANGLES SEEN ON HOME PAGE*/
    /*#side_by_side {
        display: none;
    }*/
    #above_each_other {
        display: none;
    }

    .rcorners2 {
        border-radius: 25px;
        border: 4px solid #6bc048;
        padding: 2px;
        width: 280px;
        height: 50px;
        text-align: center;
        line-height: 35px;
        background: #6bc048;
        color: white;
        box-shadow: 10px 10px 5px grey;
    }

    .vertical_align {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
    }

    .rcorners2 .vertical_align a {
        color: white;
        font-size: 15px;
    }

        .rcorners2 .vertical_align a:hover {
            color: #333333;
            font-size: 15px;
        }

    /*.rcorners2 .vertical_align a:visited {
        color: white;
        font-size: 15px;
    }*/
    /*************************************************/
    

    .slider_dimensions {
        position: relative;
        margin: 0 auto;
        top: 0px;
        left: 0px;
        width: 1920px;
        height: 740px;
        overflow: hidden;
        visibility: hidden;
    }
}







/******************************************/
/*END OF VIEWPORT WIDTH SIZES*/
/******************************************/




/*
.header-info{
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
*/



#contactcontainer {

	font-family: verdana;
	font-size: 12px;
	width: 100%;
	border: 1px none #0033FF;
	height: auto;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-left: 0px;
}
#contactleft {
	font-family: verdana;
	font-size: 12px;
	width: 300px;
	border: 1px none #0033FF;
	height: 200px;
	float: left;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	background-image: url(https://www.dmjbuildingandroofing.co.uk/images/contactleft.gif);
	background-repeat: no-repeat;
	padding-left: 10px;
	padding-top: 10px;
	margin-top: 20px;
}
#contactright {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 300px;
	border: 1px none #0033FF;
	height: 200px;
	float: right;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	background-image: url(https://www.dmjbuildingandroofing.co.uk/images/contactright.gif);
	background-repeat: no-repeat;
	padding-left: 10px;
	padding-top: 10px;
	margin-top: 20px;
}

/****************
FOOTER
*****************/
footer
{
    
    /*margin-top:70px;*/
	/*padding: 25px 0; /*top right bottom left*/
	background: url('https://www.dmjbuildingandroofing.co.uk/files/img/background/bg_gradient_grey_pixel_v4_footer.png');
    background-repeat:repeat-x;
    background-position:top;
	background-color: #ffffff; /*background colour of footer*/
	/*
	opacity: 0.9;
    filter: alpha(opacity=90); /*for IE8 and earlier*/
	color: #fff;
	font-size: 17px;
	
	/*border: 2px solid purple;*/
    color: #4F4F4F;
    margin: 0 auto;
    width:100%;
    
    border-top: 4px solid #ffffff; /*we will change this to white when design complete - use blue for testing*/
    float:left;
    min-height:200px;
}





/*
footer ul.social-icons {
	
	margin-right: 25px;
	background-color:red;	
}
*/

footer a{
	color: #333333; /*4F4F4F lighter grey*/
	
	font-size: 11px;
	text-decoration:none;
	
}

footer a:hover{
	color: #6bc047;
	font-size: 11px;
	text-decoration:underline;
	
}


footer .container_footer{
    margin-left:25px;
    margin-right:25px;
    font-size:14px;
    font-weight:bold;
}

footer .container_footer a {
    color: #6bc047; /*4F4F4F lighter grey*/
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

footer .container_footer a:hover {
    color: #333333; /*4F4F4F lighter grey*/
    font-size: 14px;
    font-weight: bold;
    text-decoration: underline;
}




footer .container_footer_links{
    margin-left:25px;
    margin-right:25px;
    font-size:11px;
    
}

footer .container_footer_links a {
    color: #333333; /*4F4F4F lighter grey*/
    font-size: 11px;
    text-decoration: none;
}

footer .container_footer_links a:hover {
    color: #6bc047; /*4F4F4F lighter grey*/
    font-size: 11px;
    text-decoration: underline;
}

/*
footer .row{
	text-align:center;
	margin: 0 auto;
    width:100%;
}
*/
/****************
SOCIAL MEDIA ICONS
*****************/
/*
footer ul.social-icons{
	list-style: none;
	padding: 0;
	margin: 0 auto;
    width:100%;
    border: 2px solid black;
}

footer ul.social-icons > li{
	/*float: left;*/
/*	margin-right: 25px;
	margin: 0 auto;
    width:100%;
    border: 2px solid green;
}

footer ul.social-icons > li > a{
	color: #f2f2f2; /*colour of the actual text in the social media icons*/
/*	width: 38px;
	height: 38px;
	line-height: 38px;
	border-radius: 100%;
	background: #333333;
	display: block;
	text-align: center;
	font-size:15px;
	border: 2px solid yellow;
}

footer ul.social-icons > li > a:hover{
	color: #fff; /*colour of the actual HOVER text in the social media icons*/
/*	background-color: #6bc048;
	/*box-shadow: 3px 3px 2px #888888;*/
/*}
*/
footer .social-icons {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 100%;
}


footer .social-icons a{
	color: #f2f2f2; /*colour of the actual text in the social media icons*/
	width: 38px;
	height: 38px;
	line-height: 38px;
	border-radius: 100%;
	background: #333333;
	display: block;
	text-align: center;
	font-size:17px;
	
}

footer .social-icons a:hover{
	color: #fff; /*colour of the actual HOVER text in the social media icons*/
	background-color: #6bc048;
	/*box-shadow: 3px 3px 2px #888888;*/
}


footer .social_iconts_wrapper_all
{
    
    height: 45px;
    width:300px;
    margin: 0 auto; /*center*/
    /*border: 2px solid purple;*/
    display: inline-block;
}
footer .social_iconts_wrapper1
{
    
    height: 40px;
    width:40px;
    /*border: 2px solid purple;*/
    display: inline-block;
}






/*dont use the below styles*/

/****************
BUTTONS
*****************/

.btn{
	padding: 15px 30px;
	border-radius: 0;
	-webkit-transition: border-color 0.4s, color 0.4s;
	transition: border-color 0.4s, color 0.4s;
}

.btn-primary{
	background: #F5F5F5;
	border-width: 2px;
	color: #fff;
	border-color: #F5F5F5;
}

.btn-primary:hover,
.btn-primary:focus{
	background: #6bc048;
	color: #F5F5F5;
	border-color: #F5F5F5;
}


/*******************************
FORMS
********************************/
form{
	margin-bottom: 70px;

}

.form-group .btn{
	width: 100%;
	text-transform: uppercase;
}
.form-control{
	padding: 17px 25px;
	font-size: 15px;
	height: auto;
	border-radius: 0;
	background: #f1f4f7;
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: all 0.5;
	transition: all 0.5s;
	border: 1px solid #fff;
}

.form-control:focus{
	border: 1px solid #454554;
	-webkit-box-shadow: none;
	box-shadow: none;
}





/****************
SERVICES
****************/
.service-item{
	text-align: center;
}

.service-item .icon{
	border: 1px #b3b3b3 solid;
	margin: 0 auto;
	border-radius: 100%;
	width: 110px;
	height: 110px;
	display: block;
	margin-bottom: 60px;
}

.service-item .icon i{
	line-height: 110px;
	font-size: 45px;	
	color: #fa694e;
}

.service-item .icon:hover{
	background-color: #fa694e;
	border-color: #fa694e;
}

.service-item .icon:hover i{
	color: #fff;
}
.service-item h3{
	margin-bottom: 60px;
}

.service-item .icon .icon-pen{
	background: url('https://www.dmjbuildingandroofing.co.uk/files/img/icon/pen.png');
}

/****************
PORTFOLIO
****************/
.project{
	border: 1px solid #808080;
	margin-bottom: 70px;
}

.project .project-info h3{
	margin-top: 50px;
}

.project .project-info p{
	padding-right: 30px;
	margin:30px 0;
}

.project .project-info .close{
	position: absolute;
	right: 20px;
	top:10px;
	width: 20px;
	height: 20px;
	font-size: 20px;
	color: #808080
}

.portfolio-item{
	position: relative;
	margin-bottom: 30px;
}

.portfolio-item .mask{
	position: absolute;
	top:0;
	left: 15px;
	right: 15px;
	height: 100%;
	transition: all 0.4s;
	background: rgba(0,0,0, 0.5);
	opacity: 0;
}

.portfolio-item .mask i{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top:-25px;
	margin-left: -25px;
	width: 50px;
	height: 50px;
	color: #fff;
	background-color: #fa694e;
	text-align: center;
	line-height: 50px;
	font-size: 30px;
}

.portfolio-item:hover .mask{
	opacity: 1;
}


/****************
MAP
*****************/
.map-wrapper{
	position: relative;
}

.map-wrapper .marker{
	position: absolute;
	margin-top: -55px;
	margin-left: -130px;
	top: 50%;
	left: 50%;
	width: 260px;
	height: 110px;
	background: #333;
	color: #fa694e;
	border-radius: 5px;
	font-size: 20px;
	line-height: 110px;
	text-align: center;
}

.map-wrapper .marker span:after{
	content: "";
	position: absolute;
	bottom: -15px;
	left: 50%;
	margin-left: -10px;
	width: 20px;
	height: 15px;
	text-align: center;
	border-top: 12px solid #333;
	border-left: 15px outset transparent;
	border-right: 15px outset transparent;
}

.map-canvas{
	margin-bottom: 70px;
	background: #ddd;
	width: 100%;
	height: 300px;
}


/****************
SECTION
*****************/
section{
	background-color: #fff;
	padding: 80px 0;
}

section.darker{
	background-color: #fbfbfb;
}

section header{
	text-align: center;
	margin-bottom: 80px;
}



address{
	margin-bottom: 50px;
}

address span{
	margin-top:0;
	margin-bottom: 25px;
	font-size: 20px;
	display: block;
}



/*USE THIS FOR THE PREVIOUS WORK PAGE*/
div.gallery {
    margin: 5px;
    border: 1px solid #6bc048;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #333333;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}




#photos {
  /* Prevent vertical gaps */
  line-height: 0;
   
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           15px; 
  
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  border: 0px solid #6bc048;
  margin-bottom:15px;
}

#photos img:hover {
    border: 4px solid #6bc048;
}

@media (max-width: 1200px) {
    #photos {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media (max-width: 1000px) {
    #photos {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media (max-width: 800px) {
    #photos {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media (max-width: 400px) {
    #photos {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}