/* --------- Change Log - Akiroofing.css --------- */
/*
/* 2025 July 4
/*   Removed <div id="mobile"> and <div id="desktop"> in html and let css handle layout
/*   Cleaned up css.
/*
/* --------- Change Log End --------- */  

:root{
    --white: #FFFFFF; /* #f9f9f9; */
  /*  --black: #36383F; */
    --black: #231F20; 
    --gray: #85888C;
    --testgreen: #00FF40;
    --testblue: #00FFFF;
    --icontest: #f0f0f0;
} /* variables*/
    
/* responsive code  */
{
    margin: 0;
    padding: 0;
 box-sizing: border-box; 
     }

    .page {
   width: 100%; 
   display: flex;
   flex-wrap: wrap;
   margin:0;	
   }
    
   
     {	   
     font-family: Arial, Helmet, Freesans, sans-serif;	
	 margin:0;	
	 line-height:25px;	
	 }	
    	
    .header{
    background-color: var(--black);     /* #231F20; */
    box-shadow: 1px 1px 5px 0px var(--gray); 
    top: 0;
    bottom: 0; /* added 2-29-24 */
    width: 100%;
    display: inline-block;
    z-index: 2 
   }
  
/* Add link code */
/* unvisited link */
a:link {
  color: black;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: blue;
}
/* =================== */   

    p {
        line-height: 1.5;
        padding: 0px;
        margin: 0px;
      }
    
    img {
        display: block;
        margin: auto;
        max-width: 100%;
      }
      
    ul{
     list-style: none;
     } 

/*06-06-24 */    
.linkblk {
display: block;
width: 280px;
margin: 0 auto;
 }

      
/*  2-29-24 */
.horul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;  /* added to center icons */
 }

.horli {
  display: inline-block;
  margin-right: 20px; /* add spacing between items */
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
} 
     
          
.headul{
     font-size: 20px;
     color: var(--white);
}


.font20 {
  font-size: 20px;
}

.fontsize5 {
  font-size: x-large;
}

/* Table */

table, th, td {
  border: none; 
  border-collapse: collapse;
  font-size:20px;    
}
th, td {
  padding: 5px;  
  text-align: left;
}

/* force div'a to calculate and not add increase width when padding */
div{
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;    
 box-sizing: border-box;      
}
     
  .icondiv2 {
    background: var(--black);  
    display: block;
    height: 100%;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 7px;
    padding-bottom: 3px; 
     }
  
  
  .housebg {
   background-color: var(--gray);   
  background-image:url('alexhouse3.png');
  background-size: cover;
  background-blend-mode: dark;
  color: var(--white);
  padding-top:50px;
  padding-bottom::100px;
     }    
      
.container{
  max-width:900px; 
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.box1{
    display: flex;
    max-width: 800px;
    position: relative;
    text-align: left;
    padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  border: none;
  border-color: #000000;
  border-style:none;
   }

.images li {
display: inline-block; 
 }
  
  /*using lbodyDiv { */
  .lbodydiv {
  width: 100%;
  background-color: var(--white);
  border: 0px;
    }    

/*media Queries  - max-width means if less than or equal to 899px then do this*/
/* MOBILE using this - NOT using wmobile, tablet  */
@media only screen and (max-width: 899px) {

 img {
     display: block;
     margin: auto;
     max-width: 100%;
   }

      /* grayroof.png */
 .resized-imageh1 {
  display: flex;
    width: 400px;   
    height: 421px;  
    display: block;
}  
   
/* house2.jpg house5.jpg */
 .resized-imageh2 {
   display: flex;
    width: 400px;   
    height: 250px;  
    display: block;
}  

/* blueroof.png */
.resized-imageh3 {
  display: flex;
    width: 400px;   
    height: 250px;  
    display: block;
}  

.images li {
display: block;
padding-right: 25px; 

   }
#mobile {display:block}
#desktop {display:none}

}

/*
@media only screen and (max-width: 767px) {
.images li{ 
max-width: 200px;
overflow: hidden;  
display: block; 
padding-right: 25px;  
   }
 }
*/
/* TABLET LAYOUT */
/* @media only screen and (min-width: 768px) and (max-width: 899px) */
/* min-width and max-width combined means trigger if 768px - 899px wide */
/*
@media only screen and (min-width: 768px) and (max-width: 899px) {
.images li{
max-width: 200px; 
overflow: hidden; 
display:inline-block;  
   }

.images li:nth-child(2) {
    padding-bottom:300px;
  }
 }
*/

/*media Queries  - max-width means if less than or equal to 900px then do this*/
/*media Queries  - min-width means if greater than or equal to 900px then do this*/
/* USING for desktop */

@media only screen and (min-width: 900px){

 img {
     display: inline-block;
     margin: auto;
     max-width: 100%;
   }

 .font30 {
  font-size: 30px;
}   
   
   /* grayroof.png */
 .resized-imageh1 {
    width: 400px;   
    height: 421px;  /* 421 */
}  
 

/* house2.jpg house5.jpg */   
 .resized-imageh2 {
    width: 640px;   /* 600px */
    height: 360px;  /* 360px */
}  

/* blueroof.png */   
.resized-imageh3 {
  display: flex;
    width: 400px;   
    height: 428px;  
 /*   display: block; */
} 
   
.row {
  display: flex;
  padding-right: 65px;
  padding-left: 65px;
}

.column {
 padding:5px;
 flex: 33.33%; 
/*  padding-right: 5px;
  padding-left: 3px; 
 */ 
}

.images li {
display: inline-block;
padding-right: 25px;
   }

.box1{
    display: flex;
    max-width: 800px;
    position: relative;
    text-align: left;
    line-height: 1.5; 
    padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  border: none;
  border-color: #000000;
  border-style:none;
  font-size: 32px;
  color: var(--white);
   }   

#desktop {display:block}
#mobile {display:none}
  
 }