.p{font-size: 1vw;}
@media screen and (max-width: 300px) {
  .p {
    font-size: 1vw;
  }
}
.navbarlogo{
	 background-color:#004F9F; 
	width: 100%; 
	height:150px; 
	position: relative;
}
.navbarlogotxt{
	color: #C0D239 ; 
	position: absolute;
	top: 30px;
	right: 100px; 
	font-size: 35px;
}
.navbarlogoimage{
	max-width: "350";
	max-height: "100px"; 
	position: absolute;
	top: 30px;
    left: 100px; 
}
#navbartxt1{
	color:#004F9F;
	margin-left: 5px;
	font-size: 12px;
		
}
#navbartxt1:hover{
	color:white;
	background-color:#004F9F; 
	transform: scale(1.2);
		
}
#navbartxt2{
	background-color:#004F9F;
	color: aliceblue;
	font-size: 18px;
		
}
#navbartxt2:hover{
	transform: scale(1.1);
		
}
.bg-dark{
  background-color:#004F9F; 
}
#home{
	top:20%;
	left:50%;
}
/* #home:hover{
	transform: scale(1.1); */
		
}



#page5bottomcards2:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	margin: 20px;
}
#page5bottomcards:hover {
  transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#boardstopcard{
	bottom: 10%;
	right: 10%;
	
}


.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}




hr.aboutusline { border: 1px solid;color: #004F9F}
.bottom {
        position: relative;
        display: inline-block; /* Make the width of box same as image */
    }
.homepagebottom{position: relative;}
.homepagebottom .homepagebottomtxt{
        position: absolute;
		color: aliceblue;
	font-size: 30px;
        z-index: 999;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 20%; /* Adjust this value to move the positioned div up and down */
        text-align: center;
        width: 60%; /* Set the width of the positioned div */
    }
.homepagebottom .homepagebottomtxt2{
        position: absolute;
		color: aliceblue;
	font-size: 30px;
        z-index: 999;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 40%; /* Adjust this value to move the positioned div up and down */
        text-align: center;
        width: 60%; /* Set the width of the positioned div */
    }

.images
{
display: inline;
margin: 0px;
padding: 0px;
max-width: 62px;
max-height: 62px;
}
.page3images
{
display: inline;
margin: 0px;
padding: 0px;
	max-width: 49%;

	max-height: 100%;

}
.boardsimages3
{
display: inline;
margin: 0px;
padding: 0px;
width: 49%;
height: 200px;
}



.boardsimages
{
position: relative; 
display:inline-block; 
width: 33%;
	height: 250px;
}
.csrimagestxt{
	position: absolute;
	font-family:Arial, Helvetica, sans-serif;
	left: 30%;
	color: white;
	bottom:0px; 
	font-size: 2vw;
}
/* .csrimagestxt:hover{
	transform: scale(1.2);
	background-color: #004F9F; */
/* } */
.csrimagestxt2{
	position: absolute;
	top: 10%; 
  left: 27%;
  font-family:Arial, Helvetica, sans-serif;
	color: white;
	background-color:rgba(51,245,3,0.3);  
	font-size: 4vw;
}
/* .csrimagestxt2:hover{
	background-color: transparent;
	transform: scale(1.2);
} */
.boardsimagestxt{
	position: absolute;
	bottom: 5%; 
	left: 27%;
	color: white;  
	font-size: 30px;
}
.boardsimagestxt{
	transform: scale(1.2)
}
.page3displaycard{
	background-color:rgba(51,245,3,0.3);
	width: auto;
}
.pageboardsdisplaycard{
	background-color:rgba(51,245,3,0.3);
	width: 200px;
	bottom: 10%;
	right: 10%;
	margin-bottom: 5%;
}
.page4images
{
display: inline;
margin: 0px;
padding: 0px;
}
.page4displaycard{
	background-color:#004f9f;
	width:auto;
}
.page4displaycard:hover{
	background-color:transparent;
	transform: scale(1.2);
}

#content
{
display: block;
/*margin: 0px;*/
padding: 0px;
position: relative;
/*top: 90px;*/
height: auto;
margin-left: auto;
margin-right: auto;
padding-left: 60px;
width: 100%;
overflow-y: hidden;
overflow-x:auto;
}

#boardscontent
{
display: block;
/*margin: 0px;*/
padding: 0px;
position: relative;
/*top: 90px;*/
height: 400px;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
}
#page1bottom
{
display: block;
position: relative;
height: auto;
max-width: auto;
float: right;
}
/*
.page3color{
	position: relative;
	padding-top: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}
*/
.vertical { 
            border-left: 3px solid black; 
            height: 340px; 
            position:absolute; 
            left: 50%; 
        } 
.displaycard{
	background-color:rgba(0, 0, 0, 0.4);
}
#page5bottomcards{
	width: 10rem; 
	border-radius: 30px 0px 30px 0px;
}
#page5bottomcards2{
	width: 6rem;
	height: 4rem;
	margin: 2px;
	border: white;
	border-size:1px;
}
#page5bottomcardimage{
	padding-top: 15px;
	display: block;
margin-left: auto;
	margin-right: auto;
	max-width: 72px;
  max-height: 72px;
  border-color: black;
	border-radius: 30px 0px 0px 0px;
	
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 7vw;
  padding: 2px;
}
.column:hover{
	background-color:transparent;
  transform: scale(1.5);
  z-index: 1;
}
.column1 {
  color: #004F9F;
  float: left;
	background-color: 	rgb(211,211,211);
  width: 11vw;
  height: 200px;
	margin-right: 3%;
  padding: 5px;
	border-radius: 30px 0px 30px 0px;
}
.column1:hover{
	transform: scale(1.2);
}

/* Clear floats after image containers */
/*
.row::after {
  content: "";
  clear: both;
  display: table;
}
*/

.cardcontainer {
  position: relative;
  width: 33%;
}
.cardcontainer1 {
  position: relative;
  width: 50%;
}

.cardimage {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.cardmiddle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.cardcontainer:hover .cardimage {
  opacity: 0.3;
	
}

.cardcontainer:hover .cardmiddle {
  opacity: 1;
}
.cardcontainer:hover #belowtxt {
  display: none;
}
.cardcontainer1:hover .cardimage {
  opacity: 0.3;
	
}

.cardcontainer1:hover .cardmiddle {
  opacity: 1;
}
.cardcontainer1:hover #belowtxt {
  /* display: none; */
}

p {font-family:"Helvetica"}


.cardtext {
  background-color:  #004f9f;
  color: white;
  border-radius: 20px;
  font-size: 1.3vw;
  padding: 16px 32px;
}



.doorcontainer {
  position: relative;

}

.doorcentered {
  position: absolute;
  top: 10%;
  left: 10%;
/*	transform: translate(-50%, -50%);*/
}

.cardcontainer1 img{
  border-radius: 20px;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

/*menu for the boardspage*/
#boardsmenu {
  position: fixed;
	z-index: 5;
  right: 0;
  top: 50%;
	border-radius:30px  0px 0px 30px;
	background-color:rgba(0, 0, 0, 0.5); 
  width: auto;
  margin-top: -2.5em;
}
.boardsmenutxt{
	color: white;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 15px;
}

/* styling for the footer */
footer {
  background: #004F9F;
  color: #aaa;
  /* padding-top: 10px; */
  }
  
  footer a {
  color: #aaa;
  }
  
  footer a:hover {
  color: #fff;
  }
  
  footer h3 {
   color: 	greenyellow;
  letter-spacing: 1px;
  margin: 30px 0 20px;
  }
  
  footer .three-column {
   overflow: hidden;
  }
  
  footer .three-column li{
   width: 33.3333%;
  float: left;
  padding: 5px 0;
  }
  
  footer .socila-list {
  overflow: hidden;
  margin: 20px 0 10px;
  }
  
  footer .socila-list li {
  float: left;
  margin-right: 3px;
  opacity: 0.7;
  overflow: hidden;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  }
  
  footer .socila-list li:hover {
  opacity: 1;
  }
  
  footer .img-thumbnail {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #444;
  margin-bottom: 5px;
  }
  
  footer .copyright {
  padding: 15px 0;
  background: #333;
  margin-top: 20px;
  font-size: 15px;
  }
  
  footer .copyright span {
  color: #0894d1;
  }
  /* end of footer */


#services {
padding: 120px 0;
}
/* .imgSizes{
  width: 400px;
  height: 300px;
} */
.swatch{
  padding: 0%; 
  text-align: center;
  color:#004F9F;
  font-size: 15px;
  position: absolute;
  top: 30%;
  left: 20%;
}
.csrimages
{
position: relative; 
display:inline-block; 
width: 32%;
	max-height: 250px;

}
.csrimages1
{
position: relative; 
display:inline-block; 
width: 32%;
	max-height: 250px;

}
.csrpics{
  width:100%;
  height: 250px;
}

.column{
 
  width:140px;
  position: relative;
 text-align: center;
 color: white;
 }
 .column:hover{
  z-index: 1;
 }
 .column img{
  width: 150px;
  height: 100px;
}
 .centered {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 12px;}
 .doorcontainer{
  width:100%;
  height: 1000px;
 }
 .doorcontainer{
  width:100%;
  height: 800px;
 }
 
 .video{
  width: 95%; height:300px;
  }
  .videotext{
    vertical-align: middle; font-size: 20px;
  }

 /* .dropbtn {
  font-size: 15px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
} */
.csrtext{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.csrheader{
  color:#004F9F;
  font-size: 25px; 
  }

.imgSizes{
    width: 100%;
   height: 300px;
        }


  #content
  {
  display: block;
  /*margin: 0px;*/
  padding: 0px;
  position: relative;
  /*top: 90px;*/
  height: auto;
  max-width: 100%;
  overflow-y: hidden;
  overflow-x:auto;
  }
  .morecolor{
  
    text-align: center;
    font-size: 18px;
  }
  .morecolor:hover{
    color: #004F9F;
  }
  .capture{
    border-radius: 25px;
     padding:10px;
   }
   .capture:hover{
     transform: scale(1.5);
     z-index: 2;
   }
   /* .column{
    width: 170px;
position: relative;
text-align: center;
color: white;

} */


.install{
  width: 250px;
  height: 200px;
  padding: 10px;
}
.view .card-img-top{
  border-radius: 20px;
}
.category{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.card{
margin: 5% 0%;
}

.card-body{
margin: 0% 0% 0% 3%;
padding: 6% 0%;
}
.card-title{
color:#004F9F;
font-size: 16px;
}


.footerimage{
  width:100%;
}
.homebanner{
  width: 100%; 
  height: 535px;
}
.homecarousel{
  position: absolute; 
  top: 13%; 
  left: 50%; 
  width: 650px; 
  height: 420px;
  border-radius: 20px;
}
.homebannerimages{
width:100%; 
height: 420px;
border-radius: 20px;
}
.homeabout{
  width:100%; 
  height:450px;
  border-radius: 50px;
 }
 .homeaboutimg{
  position: absolute;
   top: 10%; 
   left: 10%; 
   width: 580px;
    height: 420px;
 }
 .homeaboutimg p{
  color: white; 
  font-size: 20px; 
  font-family: Arial, Helvetica, sans-serif;
 }
 .aboutimg1 {
   width: 300px; 
  padding-top: 50px;
}
.aboutimg2 {
  width: 700px; 
  height: 350px;
}
.abouttextbox {
  padding-left: 20px;
  position: relative;
}
 .productimage {
   width: 550px;
    padding: 40px;}
    .aboutimages{
      width: 430px;
      height: 250px;
    }
    .quality{
      border-radius: 25px;
    border: 2px solid #004F9F;
      }
      .quality p{
        color:black; 
        font-size:18px;
        }
        .quality img{
          width:250px;
           height:250px;
          padding-top: 30px;
          }
          #about img{
            width: 250px;
            float: left;
            padding-right: 30px;
          }
          #about p{
            text-align: center;
            padding-left: 10px; 
            scroll-padding-top: 10px;
          }
          .quote{
            color: black; 
            margin-left: auto; 
            margin-right: auto;
              border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 20px;
            width: 90%;
            height: 180px;
          }
          .quote img{
            width: 180px; 
            height: 150px;
            padding: 0px;
          }
          .submenu{
            width: 60%;
            padding-left: 100px;
          }
          .submenu a{
            font-size: 20px;
          }
          .sectiontext{
            font-size: 15px;
            color: black;
          }
          .quotedoors{
            margin-left: auto;
             margin-right: auto;
          }
          .card-img-top1{
            width: 250px;
            padding-left: 30px;
          }
          .card-img-top2{
            width: 150px;
      
          }
.logo{
  width: 280px;
}
.footerlogo{
  width: 300px; padding-top: 30px;
}
.bannerimage{
  width: 100%;
  height: 535px;
}

/* Styling for the less than 700px
..................................
.....................................
........................................
............................................ */
@media (max-width: 700px) {
  p{font-size: 12px;}
  .homebanner{
    width: 100%; 
    height: 200px;
  }
.video{
width: 95%; height:250px;
}
.videotext{
font-size: 15px;
}
  .homecarousel{
    position: absolute; 
    top: 15%; 
    left: 55%; 
    width: 200px; 
    height: 120px;
    /* border-radius: 0px; */
  }
  .homebannerimages{
  width:100%; 
  /* height: 190px; */
  border-radius: 20px;
  }
  .column {
  width:80px;
 } 
 .doorcontainer{
 
  height: 600px;
 }
 .homeabout{
  width:100%; 
  height:250px;
  border-radius: 50px;
 }
 .homeaboutimg{
  position: absolute;
   top: 10%; 
   left: 10%; 
   width: 300px;
    height: 450px;
 }
 .homeaboutimg p{
  color: white; 
  font-size: 10px; 
  font-family: Arial, Helvetica, sans-serif;
 }
 .aboutimg1 {
 
 display: none;
 
}
.aboutimg2 {
 width: 350px; 
 height: 150px;
}
.abouttextbox {
 padding-left: 400px;
 position: relative;
}
 .productimage {
  width: 380px;
   padding: 40px;}

   .servicesimg {
    width: 200px;
    border-radius: 75px 0 75px 0;
    box-shadow: 15px 0 #004F9F;
  }
  .imgSizes{
    width: 100%;
   height: 250px;
        }
        .categories{
          display: none;
        }
        .homecfp p{ font-size: 12px;}
        .aboutimages{
          width: 100px;
          height: 100px;
        }
        .quality p{
          color:black; 
          font-size:10px;
          }
          .quality img{
            width:170px;
             height:150px;
            padding-top: 30px;
            float: left;
            }
            #about img{
              width: 300px;
              float: center;
              padding-right: 30px;
            }
            #about p{
              text-align: center;
              padding-left: 10px; 
              scroll-padding-top: 10px;
            }
            .quote{
              color: black; 
              margin-left: auto; 
              margin-right: auto;
                border-radius: 25px;
              border: 2px solid #73AD21;
              padding: 20px;
              width: 90%;
              height: 60px;
            }
            .quote img{
              display: none;
              /* width: 180px; 
              height: 150px;
              padding: 0px; */
            }
            .cardcontainer1 {
              position: relative;
              width: 420px;
            }
            .column {
              float: left;
              width: 40px;
              height: 40px;
              padding: 2px;
            }
            .card-img-top{
              width: 100%;
              height: 100%;
              }
              .submenu{
                width: 100%;
                padding-left: 0px;
              }
              .submenu a{
                font-size: 9px;
              }
              .sectiontext{
                font-size: 10px;
                color: black;
                text-align: center;
              }
        .quotedoors{
          display: none;
        }
        .column1 {
          color: #004F9F;
          float: left;
          background-color: 	rgb(211,211,211);
          width: 160px;
          height: 160px;
          margin-right: 3%;
          padding: 5px;
          border-radius: 30px 0px 30px 0px;
        }
        .card-title{
          color:#004F9F;
          font-size: 10px;
          }
          .install{
            width: 180px;
            height: 150px;
            padding: 10px;
          }
          .csrimages1{
  /* position: relative;  */
  width: 100%;
  padding-bottom: 10px;
  /* height: 50px; */
  display: block;
  }
.csrimages1 img{
  padding: 10px;
}
.csrpics{
  width:100%;
  height: 120px;
}     
.logo{
  width: 200px;
}    
.footerproduct{
  display: none;
}
.footerlogo{
  width: 200px; padding-top: 10px; float: left;
}
.bannerimage{
  width: 100%;
  height: auto;
}
 }