/*css for responsive website*/



/*GLOBAL*/

img			              {
			             max-width: 100%;
   			              max-height: auto%;
			             }

body		              {
		                  font-family: Arial, Helvetica;
		                  line-height: 1.5;
		                  padding: 0;
		                  margin: 0;
		                  }	

.body-container            {
                            max-width: 1100px;
                            margin: 0 auto;
                            margin-top: 180px;
                            margin-bottom: 10px;
                            }
a                           {
                            color: gray;
                            text-decoration: none;
                            }     

#warning        {position:relative; top:0px; width:100%; height:40px; background-color:#fff; margin-top:0px; padding:4px; border-bottom:solid 4px #000066}



/*NAVIGATION*/

.nav-container              {
                            max-width: 1100px;
                            margin: 0 auto;
                            display: grid;
                            grid-template-columns: 40% auto;
                            /*background-color: purple;*/  /*test responsive color*/
                            }

.logo                       {
                            max-width: 100%;
   			                max-height: auto%;
                            }

.header         {
                background-color: white; /*responsive color*/
                /*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 3;
                max-width: 1100px;
                margin: 0 auto;  
                }


.header li          {
                    float: left;
                    text-transform: uppercase;
                    font-size: 15px;
                    }
/*
.header li a        {
                    padding: 20px 10px;
                    }*/

.header .menu       {
                    clear: none;
                    float: right;
                    max-height: none;
                    margin-top: 50px;
                    }

.header .menu-icon  {
                    display: none;
                    }


.header ul      {
                display: inline-block;
                margin: 0;
                padding: 0;
                list-style: none;
                overflow: hidden;
                background-color: #fff;
                }

.header ul a    {
                display: inline-block;
                /*outline: 1px solid red;*/
                padding: 15px 13px;
                /*border-right: 1px solid #aaa;*/
                text-decoration: none;
                }



.header ul a:hover  {
                    background-color: #ddd;
                    }


/*
.header .logo       {
                    float: left;
                    display: block;
                    font-size: 2em;
                    padding: 10px 20px;
                    }*/

.header .menu-btn                       {
                                        display: none;
                                        }










/*INTRO SECTION*/

.intro-container            {
                            display: grid;
                            grid-template-columns: repeat (3, 1fr);
                            grid-gap: 10px;
                            grid-template-areas: 
                                "introText      introSlide    introSlide"
                                "introSlogan   introSlogan   introSlogan"
                            }

.intro                      {
                            grid-area: introText;
                            background-color: #D1D3D4; /*20% Black D1D3D4*/
                            padding: 7px 30px;
                            border-bottom-left-radius: 50px;
                            }

#intro-heading              {
                            color: #58595B; /*80% Black #58595B*/
                            font-size: 13px;
                            }

.mySlides                   {
                            border-bottom-right-radius: 50px;
                            }



/* Slideshow container 
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

Caption text 
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

Number text (1/3 etc)
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

The dots/bullets/indicators
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease; */
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 15s;
  animation-name: fade;
  animation-duration: 4s;
}

@-webkit-keyframes fade {
  from {opacity: .3} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .3} 
  to {opacity: 1}
}


.slider                     {
                            grid-area: introSlide;
                            height:auto;
                            }

.slogan                     {
                            grid-area: introSlogan;
                            background-color: white;
                            text-align: center; 
			                 color: #58595B;
			                 font-weight: bold;
			                 padding-top: 2px;
			                 padding-bottom: 20px;
			                 font-size: 1em;
                            }


/*PORTFOLIO SECTION*/

#ctn {
  position: relative;
  /*border: solid 1px green;*/
  height: 160px;
    margin-top: -180px;
}

.portfolio-container        {
                            margin-top: 30px;
                            display: grid;
                            grid-template-columns: repeat(3,1fr);
                            grid-column-gap: 10px;
                            grid-row-gap:15px;
                            }

.portfolio-head             {
                            grid-area: portfolioHeadingText;
                            background-color: #58595B; /*80% Black #58595B*/
                            color: #E41F1F; /*Alclad Red*/
                            margin-bottom: -20px;
                            }

#portfolio-heading-text     {
                            text-align:  center;
                            font-size: 1.8vw;
                            padding-top: 10px;
                            padding-bottom: 10px;
                            }

.portfolio                  {
                            /*background-color: magenta;*/ /*test responsive color*/
                            min-height: 100px;
                            }

.portfolio-name		        {
			                 text-transform: uppercase;
			                 padding-top: 1px;
			                 background-color: #D1D3D4; /*20% Black D1D3D4*/
			                 border-bottom: 5px solid white;
                             text-align: center;
                             color: #fff;
			                 }
.portfolio-name a		     {
                             color: white;
			                 }




/*PROJETCS SECTION*/

.projects-news-container    {
                            margin-top: 30px;
                            }


.projects                   {
                            display: grid;
                            grid-template-columns: repeat (2, 1fr);
                            grid-template-rows: 2fr;
                            grid-column-gap: 90px;
                            grid-row-gap: 0px;
                            background-color: #D1D3D4; /*20% Black D1D3D4*/
                            border-bottom-left-radius: 50px;
                            border-bottom-right-radius: 50px;
                            padding: 30px 50px 20px 50px;
                            grid-template-areas: 
                                "recentProjectsText  recentProjectsText"
                                "recentProjectName   recentProjectName"
                                "recentProjectsPhoto  recentProjectsPhoto"
                            }

.projectstext               {
                            grid-area: recentProjectsText;
                            float: left;
                            color: #58595B; /* 80% Black #58595B */
			                 font-size: 1.7vh;
			                 line-height: 1.2;
                            }

.projectblock                   {
                            grid-template-columns: 2fr;
                            grid-gap: 30px;
                            margin-top: 10px;
                            width:auto;
                            }

.project-name		         {
                            float: left;
			                 color: #fff;
			                 font-size: 16px;
			                 padding-top: 3px;
			                 }


.new-projects-heading	     {
                            font-size: 18px;
			                 margin-top: 5px;
			                 color: #E41F1F; /*Alclad Red*/
			                 }


.project-body-text          {
                            font-size: 14px;
                            color: #58595B; / *80% Black #58595B* /
                            }

#projects-link a            {
                            font-size: 14px;
                            color: #E41F1F; /*Alclad Red*/
                            }


.recent-projects-heading    {
                            margin-top: -15px;
                            margin-bottom: 10px;
                            }

.projectsphoto              {
                            grid-area: recentProjectsPhoto;
                            float: left;
                            width: auto;
                            }

.projects-pictures          {
                            grid-template-columns: 1fr;
                            border-radius: 25px;
				            box-shadow: 7px 7px 15px #888888;
                            margin: auto;
   				            border: 3px solid #ffffff;
    				        padding: 20px;
                            width: inherit;
				            background-color: #ffffff;
                            }

.projects-pic	              {
			                 box-shadow: 3px 8px 16px 0px rgba(0,0,0,0.2);
			                 border-style: solid;
			                 border-width: 3px;
 			                border-color: white;
			                 float: left;
			                 }

.body-container-recent-projects     {
                                    max-width: 1100px;
                                    margin: 0 auto;
                                    margin-top: 180px;
                                    margin-bottom: 10px;
                                    padding-top: 30px;
                                    }







/*OTHER PAGES*/


.page-container             {
                            display: grid;
                            grid-template-columns: repeat (4, 1fr);
                            grid-template-rows: 2;
                            grid-gap: 0px;
                            padding-left: 5px;
                            padding-right: 0px;
                            grid-template-areas: 
                                "pageVerticalmenu    pageClientPortfolio    pageClientPortfolio   pageClientPortfolio"
                                "pageVerticalmenu        pageContact          pageContact              pageContact"
                            }




.pageClient                 {
                            display: grid;
                            grid-template-columns: repeat (1, 1fr);
                            grid-gap: 0px;
                            padding-left: 5px;
                            padding-right: 0px;
                            grid-template-areas: 
                                "pageContents"
                                "pageSlogan"
                                "pageContact"
                            }


.page-Client-Portfolio      {
                            grid-area: pageClientPortfolio;  
                            }

.page-Client-Portfolio     {
                            display: grid;
                            grid-template-columns: repeat (1, 1fr);
                            grid-template-rows: 4;
                            grid-gap: 0px;
                            padding-left: 5px;
                            padding-right: 0px;
                            grid-template-areas: 
                                "pageTextPortfolio"
                                "pageImage"
                                "pageAlcladSloganOther"
                                "pageContact"
                            }


page-Alclad-slogan-other    {
                            grid-area: pageAlcladSloganOther;                           
                            }


.pageContact                {
                            grid-area: pageContact;
                            text-align: center;
                            /*background-color: orange;*/ /*test responsive color*/
                            }


.page-vertical-menu         {
                            grid-area: pageVerticalmenu;
                            /*background-color: orange;*/ /*test responsive color*/
                            }

.list-item2                 {
                            display: inline;
                            /*outline: 1px solid red;*/
                            padding: 10px 0px;
                            /*border-right: 1px solid #aaa;*/
                            text-decoration: none;
                            float: left;
                            clear: right;
                            }

.button		               {
			                 border: 1px grey solid;
			                 padding: 8px 16px;
			                 font-size: 16px;
			                 border-radius: 25px;
			                 background: white;
			                 color: grey;
			                 box-shadow: 2px 2px 5px #888888;
			                 text-align: left;
                             text-decoration: none;
                             width: inherit;
			                 }

            .button:hover	 {
			                 border: 1px #E41F1F solid;
			                 background: grey;
			                 color: white;
			                 box-shadow: 5px 10px 8px #888888;
			                 align-content: center;
			                 }

.section-buttons            {
			                 display: grid;
			                 grid-template-columns: 200px;
			                 grid-gap: 20px;
			                 position: relative;
                             padding-top: 20px;
                             padding-right: 20px;
			                 }

.page-contents              {
                            display: grid;
                            grid-template-columns: repeat (4, 1fr);
                            grid-template-rows: 2;
                            border-radius: 25px;
				            box-shadow: 7px 7px 15px #888888;
                            margin: auto;
   				            border: 3px solid #ffffff;
    				        padding: 20px;
                            width: inherit;
				            background-color: #ffffff;
                            grid-gap: 10px;
                            grid-template-areas: 
                                        "pageText         pageImage         pageImage        pageImage"
                                        "pageSlogenOther  pageSlogenOther   pageSlogenOther   pageSlogenOther"
                            }

.page-Client-Portfolio       {
                            grid-area: pageClientPortfolio;
                            /*background-color: orange;*/ /*test responsive color*/
                            }

.page-portfolio-contents    {
                            background-color: magenta;
                            grid-template-columns: repeat (4, 1fr);
                            grid-template-rows: 4fr;
                            border-radius: 25px;
				            box-shadow: 7px 7px 15px #888888;
                            margin: auto;
   				            border: 3px solid #ffffff;
    				        padding-top: 0px;
                            padding-left: 20px;
                            padding-right: 20px;
                            padding-bottom: 20px;
                            width: inherit;
				            background-color: #ffffff;
                            grid-gap: 10px;
                            grid-template-areas: 
                                        "pageTextPortfolio  pageTextPortfolio  pageTextPortfolio  pageTextPortfolio"
                                        "pageImage         pageImage        pageImage        pageImage"
                                        "SlogenOther       SlogenOther      SlogenOther      SlogenOther"
                                        "pageContact         pageContact     pageContact     pageContact"
                            }

.slogan-other               {
                            grid-area: SlogenOther;
                            text-align: center;
                            }

.page-text                  {
                            grid-area: pageText;
                            font-size: 100%;
                            }

.page-Alclad-slogan-other   {
                            grid-area: pageSlogenOther;
                            text-align: center;
                            }

.slogan-other               {
                            background-color: white;
                            text-align: center; 
			                 color: #A7A9AC; /*40% Black D1D3D4*/
			                 font-weight: bold;
			                 padding-top: 0px;
			                 padding-bottom: 0px;
                            margin-bottom: -10px;
			                 font-size: 1em;
                            }

.page-Alclad-slogan         {
                            grid-area: pageSlogenPort;
                            font-size: 100%;
                            }


.portfolio-page-text        {
                            grid-area: pageTextPortfolio;
                            text-align: right;
                            height: 50px;
                            /*background-color: gray;*/ /*test responsive color*/
                            }

.other-pages-slogan         {
                            margin-top: 30px;
                            margin-bottom: 60px;
                            color: #58595B; /*80% Black #58595B*/
                            }

.other-pages-text-heading   {
                            font-size: 16px;
                            line-height: 1.6;
		                    color: #E41F1F;
                            margin-top: 0;
                            }

.other-pages-body-text      {
                            font-size: 14px;
                            line-height: 1.6;
                            }

.contact                    {
			                 font-size: 14px;
			                 } 
                            

.page-image                 {
                            grid-area: pageImage;
                            /*background-color: blue;*/ /*test responsive color*/
                            }

.page-image2                {
                            padding-left: 50px;
                            padding-right: 5px;
                            }

.page-Alclad-slogan         {
                            grid-area: pageSlogan;
                            text-align: center;
                            /*background-color: green;*/ /*test responsive color*/
                            }

.portfolio-info	            {
                            display: inline-block;
                            font-size: 100%;
                            color: red;
                            text-transform: uppercase;
                            text-align: right;
                            padding-right: 15px;
			                 }


.portfolio-block	       {
                            display: inline-block;
                            font-size: 100%;
				            color: black;	
                            text-align: right;
                            padding: 0px;
                            }

.envirolist                 {
			                 font-size: 14px;
			                 }

.buildservicelist            {
			                 font-size: 14px;
                            line-height: 30px;
			                 }

.email                      {
                            margin-top: 7px;
                            }

.email-buttons              {
                            border-bottom-left-radius: 16px;
                            border-bottom-right-radius: 16px;
			                 padding: 8px 20px;
			                 font-size: 12px;
			                 background: #E41F1F;
			                 color: white;
			                 text-align: left;
                             text-decoration: none;
			                 }




/*Articles and Blogs*/




.blog-heading-container             {
                                    background-color: #58595B; /*80% Black #58595B*/
                                    } 

#article-head-text                   {
                                    color: white;
                                    text-align: center;
                                    vertical-align: middle;
                                    font-size: 2.5vw;
                                    padding-top: 2px;
                                    }

#article-heading-body-text  {
                             /*background-color: white;*/ 
                            color: black;
                            padding-top: 10px;
                            padding-bottom: 10px;
                            padding-left: 30px;
                            padding-right: 30px;
                            }



.portfolio-container         {
                            display: inline-block;
                            margin-top: 30px;
                            display: grid;
                            grid-template-columns: repeat(3,1fr);
                            grid-column-gap: 10px;
                            grid-row-gap:15px;
                            }



.blog-main-page-text           {
                                color: white;
                               
                                }

/*.thumbnails-image                 {
                            float: right;
                            }

.thumbnail-blog             {
                            float: right;
                             max-width: 100px;
   			                  max-height: 100px;
                            } */

.article-container          {
                            grid-template-columns: 3fr;
                            border-radius: 25px;
				            box-shadow: 7px 7px 15px #888888;
                            margin: auto;
   				            border: 3px solid #ffffff;
    				        padding: 20px;
                            width: inherit;
				            background-color: #ffffff;
                            }

.body-container-articles            {
                                    max-width: 600px;
                                    margin: 0 auto;
                                    margin-top: 180px;
                                    margin-bottom: 10px;
                                    padding-top: 30px;
                     
                                    }








/*FOOTER SECTION*/

.footer-container           {
                          /*  max-width: 1100px;
                            min-height: 100px; */
                            margin: 0 auto;
                            /*background-color: ;*/ /*test responsive color*/
                            margin-bottom: 0px;
                            
                            }

#copywrite	                 {
		                      color: #58595B; /*80% Black #58595B*/
		                      font-size: 1.2vh;
		                      margin-top: 15px;
		                      }

#contact-numbers	          {
			                 color: #58595B; /*80% Black #58595B*/
			                 font-size: 1.8vh;
			                 margin-bottom: 50px;
			                 }








/*TABLET MEDIA QUERY*/

@media only screen and (min-width: 850px) and (max-width: 1100px)
                                                            {
                            body		                  {
		                                                  padding-left: 30px;
		                                                  padding-right: 30px;  
                                                            /*background-color: greenyellow;*/
		                                                  }
                                                                
                            .logo                       {
                                                        max-width: 40%;
   			                                              max-height: auto%;
                                                        }
                                                                
                            .header                     {
                                                        background-color: white; /*responsive color*/
                                                        /*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
                                                        position: fixed;
                                                        top: 0;
                                                        width: 100%;
                                                        z-index: 9999;
                                                        max-width: 1100px;
                                                        margin: 0 auto;  
                                                        }
                                                                
                            .header .menu               {
                                                        margin-top: auto;
                                                        padding-right: 50px; 
                                                        }
                                                                
                                                                
                            .header li                  {
                                                        font-size: 1.5vh;
                                                        padding-right: 2px;
                                                        }
                                                                
                            .page-container             {
                                                        margin-top: 200px;
                                                        }
                                                            
                            .intro                      {
                                                        padding: 7px 20px;
                                                        }
                          
                                                                
                            #intro-heading              {
                                                        font-size: 1.1vw;
                                                        margin-top: 30px;
                                                       
                                                        }   
                                                                
                        
                                                                
                            #portfolio-heading-text     {
                                                        font-size: 2.2vw;
                                                        }
                                                                
                            .portfolio-name		        {
			                                                   font-size: 0.9em;                   
			                                             }
                                                                
                           .projects                   {
                                                        grid-gap: 50px;
                                                        } 
                                                                
                            .projectblock               {
                                                        margin-top: -60px;          
                                                        }
                                                                
                            .projectstext               {
			                                             font-size: 1.7vh;
			                                             line-height: 1.2;
                                                        padding-right: 0px;
                                                        padding-left: 0px;
                                                        }
                                                                
                            .projectsphoto              {
                                                        float: left;
                                                        padding-right: 0px;
                                                        padding-left: 0px;
                                                        }
                                                                
                                                                
                            .projectstext               {
                                                        grid-area: recentProjectsText;
                                                        float: left;
                                                        color: #58595B; /* 80% Black #58595B */
			                                             font-size: 1.7vh;
			                                             line-height: 1.2;
                                                        padding-right: 0px;
                                                            padding-left: 0px;
                                                        }

                            .projectsphoto              {
                                                        grid-area: recentProjectsPhoto;
                                                        float: left;
                                                        }                                    
                                                                
                            .alclad-body-text-news      {
                                                        font-size: 12px;
                                                        }     
                                                                
                            .page-vertical-menu         {
                                                        padding-right: 10px;
                                                        }
                                                                
                            
                                                                
                            .pageClient                  {
                                                        margin-top: 20px;
                                                        }
                                                                
                            .button		               {
			                                             padding: 4px 8px;   
                                                        font-size: 14px;
			                                             border-radius: 20px;
			                                             }

                            .slogan-other               {
                                                        font-size: 0.7em;
                                                        }
                                                                
                                                                
                                                                
                            .other-pages-text-heading   {
                                                        font-size: 15px;
                                                        line-height: 1.5;
                                                        }
                                                                
                            .other-pages-body-text      {
                                                        font-size: 12px;
                                                        line-height: 1.5;
                                                        }
                                                                
                          /*  .contact                    {
			                                             font-size: 12px;
			                                             } */
                                                             
                            .page-image                 {
                                                        max-width: auto;
                                                        }
                                                                
                             .page-contents              {
                                                        display: grid;
                                                        grid-template-columns: repeat (4, 1fr);
                                                        grid-template-rows: 2;
                                                        border-radius: 25px;
				                                        box-shadow: 7px 7px 15px #888888;
                                                        float: right;
   				                                         border: 3px solid #ffffff;
    				                                    padding: 20px;
                                                        
				                                        background-color: #ffffff;
                                                        grid-gap: 10px;
                                                        grid-template-areas: 
                                                        "pageText   pageImage     pageImage   pageImage"
                                                        "pageSlogenOther  pageSlogenOther   pageSlogenOther   pageSlogenOther"
                                                        }
                                                                
                            .page-container             {
                                                        display: grid;
                                                        grid-template-columns: repeat (4, 1fr);
                                                        grid-gap: 0px;
                                                        background-color: #fff;
                                                        grid-template-areas: 
                                                        "pageVerticalmenu pageClientPortfolio pageClientPortfolio pageClientPortfolio"
                                                        "pageVerticalmenu pageContact         pageContact         pageContact"   
                                                        }   
                                                                
                            .page-portfolio-contents    {
                                                        grid-template-columns: repeat (4, 1fr);
                                                        grid-template-rows: 4fr;
                                                        grid-template-areas: 
                                                        "pageTextPortfolio  pageTextPortfolio  pageTextPortfolio  pageTextPortfolio"
                                                        "pageImage         pageImage        pageImage        pageImage"
                                                        "SlogenOther       SlogenOther      SlogenOther      SlogenOther"
                                                        "pageContact         pageContact     pageContact     pageContact"
                                                        }
                                                        }


                                                                        


@media only screen and (min-width: 661px) and (max-width: 849px)
                                                            {
                            body		                  {
		                                                  padding-left: 20px;
		                                                  padding-right: 20px;  
                                                            /*background-color: greenyellow;*/ /*responsive color*/
		                                                  }
                                                                
                            
                                                                                                  
                                                                
                            .logo                       {
                                                        max-width: 40%;
   			                                              max-height: auto%;
                                                        }

                            .header                     {
                                                        background-color: white; /*responsive color*/
                                                        /*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
                                                        position: fixed;
                                                        top: 0;
                                                        width: 100%;
                                                        z-index: 9999;
                                                        max-width: 1100px;
                                                        margin: 0 auto;  
                                                        }
                                                                
                            .header li                  {
                                                        
                                                        text-transform: uppercase;
                                                        font-size: 14px;
                                                        padding-right: 45px;
                                                        }

                            .header .menu               {
                                                        clear: none;
                                                        
                                                        max-height: none;
                                                        margin-top: -8px;
                                                        }
                                                                
                            .header ul                   {
                                                        display: inline-block;
                                                        margin: 0;
                                                        padding: 0;
                                                        list-style: none;
                                                        overflow: hidden;
                                                        background-color: #fff;
                                                        }

                            .header ul a                {
                                                        display: inline-block;
                                                        /*outline: 1px solid red;*/
                                                        padding: 4px 1px;
                                                        /*border-right: 1px solid #aaa;*/
                                                        text-decoration: none;
                                                        }
                                                                                        
                                                                
                            .intro-container            {
                                                        display: grid;
                                                        grid-template-columns: repeat (1, 1fr);
                                                        grid-gap: 10px;
                                                        grid-template-areas: 
                                                        "introText"   
                                                        "introSlide"
                                                        "introSlogan"
                                                        }
                                                                
                                                                
                            .projects                   {
                                                        display: grid;
                                                        grid-template-columns: repeat (1, 1fr);
                                                        grid-gap: 10px;
                                                        grid-template-areas: 
                                                            "recentProjectsText"
                                                            "recentProjectsPhoto"
                                                        }
                                                                
                            .projectblock               {
                                                        margin-top: -20px;          
                                                        }
                                                                
                            .projectstext               {
			                                             font-size: 1.7vh;
			                                             line-height: 1.2;
                                                        padding-right: 0px;
                                                        padding-left: 0px;
                                                        }
                                                                
                            .project-body-text          {
                                                        margin-bottom: -10px;      
                                                        }
                                                                
                            .projectsphoto              {
                                                        float: left;
                                                        padding-right: 0px;
                                                        padding-left: 0px;
                                                        padding-bottom: 50px;
                                                        }
                                                                
                                                                
                            .projectstext               {
                                                        grid-area: recentProjectsText;
                                                        float: left;
                                                        color: #58595B; /* 80% Black #58595B */
                                                        font-size: 1.7vh;
			                                             line-height: 1.2;
                                                        padding-right: 0px;
                                                        padding-left: 0px;
                                                        }



                            .projectsphoto              {
                                                        grid-area: recentProjectsPhoto;
                                                        float: left;
                                                        }
                        
                                                                
                        #portfolio-heading-text         {
                                                        text-align:  center;
                                                        font-size: 2.8vw;
                                                        padding-top: 10px;
                                                        padding-bottom: 10px;
                                                        }
                                                                
                                                                                                                                
                                                                
                            .portfolio-name		        {
			                                             font-size: 0.8em;                   
			                                             }
                                                                
                            .section-buttons            {
			                                             display: grid;
			                                             grid-template-columns: 140px;
			                                             grid-gap: 20px;
			                                             position: relative;
                                                            padding-top: 20px;
                                                            padding-right: 20px;
			                                             }                                    
                                                                
                        .page-vertical-menu             {
                                                        padding-right: 7px;
                                                        }
                                                                
                            .button		               {
			                                             padding: 4px 8px;   
                                                        font-size: 12px;
			                                             border-radius: 14px;
			                                             }
                                                                
                    
                                                        
                                                                
                        .slogan-other                   {
                                                        font-size: 0.8em;
                                                        }
                                                                
                        .other-pages-text-heading       {
                                                        font-size: 15px;
                                                        line-height: 1.5;
                                                        }
                                                                
                            .other-pages-body-text      {
                                                        font-size: 13px;
                                                        line-height: 1.5;
                                                        }
                                                                
                            .envirolist                 {
			                                             font-size: 13px;
			                                             }      
                                                                
                          /*  .contact                    {
			                                             font-size: 10%;
			                                             }    */
                                                        }

    
    
    
    /*TABLET MEDIA QUERY for 481px to 768px*/


@media only screen and (min-width: 481px) and (max-width: 660px) {

    
            body		                  {
                                            padding-left: 10px;
		                                  padding-right: 10px;
                                            /*background-color: greenyellow;*/
		                                  }	       
    
        .body-container-recent-projects     {
                                            margin-top: 130px;
                                            }  
    
    
            .nav-container              {
                                        padding-right: 15px;    
                                        padding-left: 15px;
                                        /*background-color: purple;*/  /*test responsive color*/
                                        }

            .logo                       {
                                        max-width: 50%;
   			                              max-height: auto%;
                                        }
    
    
    
                            .header                        {
                                                        background-color: white; /*responsive color*/
                                                        /*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
                                                        position: absolute;
                                                        left: 10px;
                                                        right: 10px;
                                                        top: 0px; 
                                                        }
    
                    .intro-container                     {
                                                        display: grid;
                                                        grid-template-columns: repeat (1, 1fr);
                                                        grid-gap: 10px;
                                                        grid-template-areas: 
                                                        "introText"   
                                                        "introSlide"
                                                        "introSlogan"
                                                        }
                       
                       .intro                      {
                                                    margin-top: -35px;
                                                    position: relative;
                                                    background-color: #D1D3D4; /*20% Black D1D3D4*/
                                                    padding: 7px 30px;
                                                    border-bottom-left-radius: 50px;
                                                    }
    
    
                        .slogan-other               {
                                                    font-size: 2.2vw;
                                                    }
    
                        .portfolio-container        {
                                                margin-top: 30px;
                                                display: grid;
                                                grid-template-columns: repeat(2,1fr);
                                                grid-column-gap: 10px;
                                                grid-row-gap:15px;
                                                }
    
                  
    

    
                       .projects                   {
                                                        display: grid;
                                                        grid-template-columns: repeat (1, 1fr);
                                                        grid-gap: 10px;
                                                        padding-left: 25px;
                                                        padding-right: 25px;
                                                        padding-bottom: 0px;
                                                        grid-template-areas: 
                                                            "recentProjectsText"
                                                            "recentProjectsPhoto"
                                                        }
    
                        .projectblock                   {
                                                        margin-top: -20px; 
                                                        padding-bottom: 40px;
                                                        }
    
                        .project-body-text              {
                                                        margin-bottom: -10px;      
                                                        }
    
                            .projectstext               {
			                                             font-size: 1.7vh;
			                                             line-height: 1.2;
                                                        padding-right: 0px;
                                                        padding-left: 0px;
                                                        }
                                                                
                            .projectsphoto              {
                                                        float: left;
                                                        padding-right: 0px;
                                                        padding-left: 0px;
                                                        }
    
    
                            
                            .nav-container ul li        {
                                                        display: block;
                                                        }
    
                            .body-container              {
                                                            max-width: inherit;
                                                            margin: 0 auto;
                                                            margin-top: 180px;
                                                            margin-bottom: 50px;
                                                            }
                       
                       
                       .page-container                      {
                                                            margin-top: 300px;
                                                            grid-template-columns: repeat (1fr);
                                                            grid-template-rows: 4;
                                                            grid-gap: 20px;
                                                            padding-left: 5px;
                                                            padding-right: 20px;
                                                            grid-template-areas: 
                                                            "pageVerticalmenu"    
                                                            "pageContents"
                                                            "pageSlogan"
                                                            "pageContact"
                                                            }
    
                        .page-portfolio-contents            {
                                                            margin-bottom: -30px;
                                                            }
                       
                        .pageContact                        {
                                                            margin-top: 0px;
                                                            }
    
                       .page-vertical-menu                   {
                                                            grid-area: pageVerticalmenu;
                                                            margin-top: -60px;
                                                            /*background-color: orange;*/ /*test responsive color*/
                                                            }
                       
                       
                       .button		                        {
			                                                 margin: 3px;  
                                                            }

            
                       
                       .page-contents                       {
                                                            grid-template-columns: 1fr;
                                                            grid-template-rows: 4;
                                                            border-radius: 25px;
				                                            box-shadow: 7px 7px 15px #888888;
                                                            margin-top: -15px;
   				                                             border: 3px solid #ffffff;
    				                                        padding: 8px;
                                                            width: inherit;
				                                            background-color: #ffffff;
                                                            grid-gap: 10px;
                                                            grid-template-areas: 
                                                            "pageText"
                                                            "pageImage"
                                                            "pageSlogenOther"
                                                            "pageContact"
                                                            }
    
                    .page-portfolio-contents            {
                                                        grid-template-columns: 1fr;
                                                        grid-template-rows: 4fr;
                                                        grid-template-areas: 
                                                        "pageTextPortfolio"
                                                        "pageImage"
                                                        "SlogenOther"
                                                        "pageContact"
                                                        }

                       
                       .page-text                  {
                                                    grid-area: pageText;
                                                    font-size: 100%;
                                                    }
                       
                        .page-image                 {
                                                    grid-area: pageImage;
                                                     display: block;
                                                    margin-left: auto;
                                                    margin-right: auto;
                                                    }
                       
                       .portfolio-page-text        {
                                                grid-area: pageText;
                                                text-align: left;
                                                height: 50px;
                                                /*background-color: gray;*/ /*test responsive color*/
                                                }
                       
                       
                       
                       .page-portfolio-contents    {
                                                    padding-top: 2px;
                                                    padding-left: 12px;
                                                    padding-right: 12px;    
                                                    padding-bottom: 5px;
                                                    }
                       
                       .portfolio-info	            {
                                                    font-size: 100%;         
                                                    text-align: right;
                                                    padding-right: 15px;
			                                         }


                        .portfolio-block	       {
                                                    font-size: 100%;
				                                    text-align: right;
                                                    padding: 0px;
                                                    }
                       
                    .page-Alclad-slogan-other       {
                                                    font-size: 4.8vh;
                                                    padding-bottom: 20px;
                                                    }
                       
    .page-container         {
                            margin-top: 35%;
                            }
                       

    
.header ul      {
                display: block;
                clear: right;
                }

.header ul a    {
                display: block;
                clear:both;
                }
    
    
.header li          {
                    display: inline-flex;
                    }

.header li a        {
                    padding-right: 15px;
                    padding-top: 7px;
                    padding-bottom: 12px;
                    }

.header .menu       {
                    clear: both;
                    float: left;
                    max-height: none;
                    margin-top: 2px;
                    }


.header .menu       {
                    clear:left;
                    max-height: 0px;
                    transition: max-height .2s ease-out;
                    }

    
.header .menu-icon  {
                    display: block;
                    border: 1px solid red;
                    padding: 20px 20px;
                    position: relative;
                    float: right;
                    cursor: pointer;
                    margin-top: 10px;
                    margin-right: 10px;
                    }

.header .menu-icon .nav-icon    {
                                background: #333;
                                display: block;
                                height: 2px;
                                width: 18px;
                                position: relative;
                                transition: background .2s ease-out;
                                }

.header .menu-icon .nav-icon:before    {
                                        background: #333;
                                        content: "";
                                        display: block;
                                        height: 100%;
                                        width: 100%;
                                        position: absolute;
                                        transition: all .2s ease-out;
                                        top: 5px;
                                        }

.header .menu-icon .nav-icon:after    {
                                        background: #333;
                                        content: "";
                                        display: block;
                                        height: 100%;
                                        width: 100%;
                                        position: absolute;
                                        transition: all .2s ease-out;
                                        top: -5px;
                                        }
    

.header .menu-btn                       {
                                        display: none;
                                        }

.header .menu-btn:checked ~ .menu       {
                                        max-height: 240px;
                                        background-color: #E6E7E8;
                                        }

.header .menu-btn:checked ~ .menu-icon .nav-icon    {
                                                    background: transparent;
                                                    }

.header .menu-btn:checked ~ .menu-icon .nav-icon:before    {
                                                            transform: rotate(-45deg);
                                                            top: 0;
                                                            }

.header .menu-btn:checked ~ .menu-icon .nav-icon:after    {
                                                            transform: rotate(45deg);
                                                            top: 0;
                                                            }

#portfolio-heading-text                     {
                                            font-size: 4vw;
                                            padding-top: 15px;
                                            padding-bottom: 10px;
                                            }    
    
                .portfolio-name		                 {
                                                    font-size: 2.6vw;
                                                    padding-top: 1px;
                                                    padding-bottom: 0px;
			                                         }
    
    
    

.section-buttons            {
			                 display: inline-block;
                             padding-top: 10px;
                            position: relative;
			                 }
    
    
    .button		             {
                                display: inline-block;
			                 padding: 8px 16px;
			                 font-size: 14px;
			                 border-radius: 25px;
			                 background: white;
			                 color: grey;
			                 box-shadow: 2px 2px 5px #888888;
			                 text-align: left;
                             text-decoration: none;
                             width: inherit;
			                 }
    
                
    
 /*   #copywrite	                 {
		                      font-size: 1.5vh;
		                      margin-top: 15px;
		                      }

    #contact-numbers	          {
			                 font-size: 2.2vh;
			                 margin-bottom: 50px;
			                 }  */
                                               }   
    


/*MOBILE MEDIA QUERY*/
    
    @media only screen and (min-width: 280px) and (max-width: 480px)

                                                        {
                            
                            body		                  {
                                                            
		                                                  padding-left: 10px;
		                                                  padding-right: 10px;
                                                        padding-top: 15px;
                                                              /*background-color: aquamarine;*/
		                                                  }	   
                                                            
                    .body-container-recent-projects     {
                                                        margin-top: 130px;
                                                        }                                
    
                            
    
                            .header                        {
                                                        background-color: white; /*responsive color*/
                                                        /*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
                                                        position: absolute;
                                                        top: 0px; 
                                                        }
                                                            
            
                                                            
                        
                                                            
                       .intro-container                     {
                                                        display: grid;
                                                        grid-template-columns: repeat (1, 1fr);
                                                        grid-gap: 10px;
                                                        grid-template-areas: 
                                                        "introText"   
                                                        "introSlide"
                                                        "introSlogan"
                                                        }
                                                            
                                                            
                       .intro                      {
                                                    margin-top: -60px;
                                                    position: relative;
                                                    background-color: #D1D3D4; /*20% Black D1D3D4*/
                                                    padding: 7px 30px;
                                                    border-bottom-left-radius: 50px;
                                                    }
                                                            
                        #intro-heading              {
                                                    padding-top: 15px;
                                                    
                                                    }
                                                            

    
                            .portfolio-container        {
                                                        grid-template-columns: repeat(1,1fr);                                         
                                                        }
                               
                                                            
                               .projects                   {
                                                        display: grid;
                                                        grid-template-columns: repeat (1, 1fr);
                                                        grid-gap: 10px;
                                                        padding-left: 25px;
                                                        padding-right: 25px;
                                                        grid-template-areas: 
                                                            "recentProjectsText"
                                                            "recentProjectsPhoto"
                                                        }
                                                            
                                .projectblock           {
                                                        margin-top: -20px; 
                                                        padding-bottom: 30px;
                                                        }
                                                            
                            .project-body-text          {
                                                        margin-bottom: -10px;      
                                                        }
    
                            .nav-container ul li        {
                                                        display: block;
                                                        }
    
                            .body-container              {
                                                            max-width: inherit;
                                                            margin: 0 auto;
                                                            margin-top: 190px;
                                                            margin-bottom: 10px;
                                                            }
                       
                       
                       .page-container                      {
                                                            margin-top: 300px;
                                                            grid-template-columns: repeat (1fr);
                                                            grid-template-rows: 4;
                                                            grid-gap: 20px;
                                                            padding-left: 5px;
                                                            padding-right: 20px;
                                                            grid-template-areas: 
                                                            "pageVerticalmenu"    
                                                            "pageContents"
                                                            "pageSlogan"
                                                            "pageContact"
                                                            }
                                                            
                        .page-portfolio-contents            {
                                                            margin-bottom: -30px;
                                                            }
                       
                       .page-vertical-menu                   {
                                                            grid-area: pageVerticalmenu;
                                                            margin-top: -60px;
                                                            /*background-color: orange;*/ /*test responsive color*/
                                                            }
                       
                       
                       .button		                        {
			                                                 margin: 3px;  
                                                            }

            
                       
                       .page-contents                       {
                                                            grid-template-columns: 1fr;
                                                            grid-template-rows: 3;
                                                            border-radius: 25px;
				                                            box-shadow: 7px 7px 15px #888888;
                                                            margin-top: -15px;
   				                                             border: 3px solid #ffffff;
    				                                        padding: 8px;
                                                            width: inherit;
				                                            background-color: #ffffff;
                                                            grid-gap: 10px;
                                                            grid-template-areas: 
                                                            "pageText"
                                                            "pageImage"
                                                            "pageSlogenOther"
                                                            }
    
                         
                       
                            .slogan-other               {
                                                        grid-area: pageSlogenOther;
                                                        text-align: center; 
			                                             color: #A7A9AC; /*40% Black D1D3D4*/
			                                             font-weight: bold;
			                                             padding-top: 0px;
			                                             padding-bottom: 2px;
                                                        margin-bottom: -10px;
			                                             font-size: 0.7em;
                                                        }
                                                            
                            
                       
                       .page-text                  {
                                                    grid-area: pageText;
                                                    font-size: 100%;
                                                    }
                       
                        .page-image                 {
                                                    grid-area: pageImage;
                                                     display: block;
                                                    margin-left: auto;
                                                    margin-right: auto;
                                                    }
                       
                       .portfolio-page-text        {
                                                grid-area: pageText;
                                                text-align: left;
                                                height: 50px;
                                                /*background-color: gray;*/ /*test responsive color*/
                                                }
                       
                       
                       
                       .page-portfolio-contents    {
                                                    padding-top: 7px;
                                                    padding-left: 10px;
                                                    padding-right: 5px;        
                                                    }
                       
                       .portfolio-info	            {
                                                    font-size: 70%;         
                                                    text-align: right;
                                                    padding-right: 5px;
			                                         }


                        .portfolio-block	       {
                                                    font-size: 65%;
				                                    text-align: right;
                                                    padding: 0px;
                                                    }
                       
                        .page-Alclad-slogan-other   {
                                                    grid-area: pageSlogenOther;
                                                    text-align: center;
                                                    margin-top: 0px;
                                                    padding-bottom: 15px;    
                                                    }
                       
    

                        .logo                       {
                                                    max-width: 70%;
   			                                          max-height: auto%;
                                                    }
    


                        .page-container             {
                                                    margin-top: 35%;
                                                    }
                       

    
                        .header ul                   {
                                                    display: block;
                                                    clear: right;
                                                    }

                        .header ul a                {
                                                    display: block;
                                                    clear: both;
                                                    }
    
    
                        .header li                  {
                                                    display: inline-flex;
                                                    }

                        .header li a                {
                                                    padding-right: 15px;
                                                    padding-top: 7px;
                                                    padding-bottom: 12px;
                                                    }

                        .header .menu               {
                                                    clear: both;
                                                    float: left;
                                                    max-height: none;
                                                    margin-top: 2px;
                                                    }


                        .header .menu               {
                                                    clear:left;
                                                    max-height: 0px;
                                                    transition: max-height .2s ease-out;
                                                    }

    
                        .header .menu-icon          {
                                                    display: block;
                                                    border: 1px solid red;
                                                    padding: 20px 20px;
                                                    position: relative;
                                                    float: right;
                                                    cursor: pointer;
                                                    margin-top: 10px;
                                                    margin-right: 10px;
                                                    }

                    .header .menu-icon .nav-icon    {
                                                    background: #333;
                                                    display: block;
                                                    height: 2px;
                                                    width: 18px;
                                                    position: relative;
                                                    transition: background .2s ease-out;
                                                    }

            .header .menu-icon .nav-icon:before    {
                                                    background: #333;
                                                    content: "";
                                                    display: block;
                                                    height: 100%;
                                                    width: 100%;
                                                    position: absolute;
                                                    transition: all .2s ease-out;
                                                    top: 5px;
                                                    }

            .header .menu-icon .nav-icon:after      {
                                                    background: #333;
                                                    content: "";
                                                    display: block;
                                                    height: 100%;
                                                    width: 100%;
                                                    position: absolute;
                                                    transition: all .2s ease-out;
                                                    top: -5px;
                                                    }
    

                        .header .menu-btn           {
                                                    display: none;
                                                    }

            .header .menu-btn:checked ~ .menu       {
                                                    max-height: 240px;
                                                    background-color: #E6E7E8;
                                                    }

.header .menu-btn:checked ~ .menu-icon .nav-icon    {
                                                    background: transparent;
                                                    }

.header .menu-btn:checked ~ .menu-icon .nav-icon:before    {
                                                            transform: rotate(-45deg);
                                                            top: 0;
                                                            }

.header .menu-btn:checked ~ .menu-icon .nav-icon:after    {
                                                            transform: rotate(45deg);
                                                            top: 0;
                                                            }

                        #portfolio-heading-text         {
                                                        font-size: 7vw;
                                                        padding-top: 15px;
                                                        padding-bottom: 10px;
                                                        }    
    
                        .portfolio-name		             {
                                                        font-size: 5.5vw;
                                                        padding-top: 1px;
                                                        padding-bottom: 0px;
			                                             }
    

                            .section-buttons            {
			                                             display: inline-block;
                                                        padding-top: 10px;
                                                        position: relative;
			                                             }
    
  
    
                            .button		                {
                                                        display: inline-block;
			                                             padding: 8px 16px;
			                                             font-size: 14px;
			                                             border-radius: 25px;
			                                             background: white;
			                                             color: grey;
			                                             box-shadow: 2px 2px 5px #888888;
			                                             text-align: left;
                                                        text-decoration: none;
                                                        width: inherit;
			                                             }
                                                            
                                                                                            

                        #projects-pictures               {    
                                                        margin-top: -50px;
                                                        }
                                                            
                                                            
                        #article-head-text                   {
                                                            font-size: 35px;
                                                            }

                                                        }