body,html
{width:100%;height:100%}
body{font-family:Merriweather,'Helvetica Neue',Arial,sans-serif}
hr{max-width:50px;border-width:3px;border-color:#137110}
hr.light{border-color:#fff}a{color:#137110;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}
a:hover{color:#137110}h1,h2,h3,h4,h5,h6{font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}

.text-faded
{color:rgba(255,255,255,.7)}
section{padding:4rem 0}
.section-heading{margin-top:0 px}::-moz-selection{color:#fff;background:#212529;text-shadow:none}::selection
{color:#fff;background:#212529;text-shadow:none}img::selection{color:#fff;background:0 0}img::-moz-selection{color:#fff;background:0 0}

.ChipiseIndex{
	
	position: absolute;
    top: 150px;
}

#homeBull {
	
	height: 80px;
	width: 80 px;
}

#home
{padding-top:0rem;
padding-bottom:calc(10rem - 56px);
background-image:url(../img/header.jpg);
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
font-size:2rem;
font-weight:300;
transition: margin-left .5s;
    padding: 16px;

}

#IndexA {
	font-size:20px; 
 }
 .IndexA {
	font-size:20px; 
 }
 #contactContent{
	  
font-size:18px;
  }

.myHeading
{
	color:white;
	font-size:25px;
	
	
}

#PurposeHead{
	font-size:25px;
	
}

.ChipiseHead
{
	color:white;
	font-size:60px;
	
}


#HideImage{
	display : block;
}


 #HideContent{
	  display: none;
  }
  

@media (max-width: 1200px) {
	

	
	#homeBull {
	
	height: 45px;
	width: 45px;
}
	
	
	#IndexA {
	font-size:12px; 
 }
	 .IndexA {
	font-size:5px; 
 }

  #home {
    height: 100vh;
    min-height: 650px;
    padding-top: 15rem;
    padding-bottom: 0;
	
  }
   #HideContent{
	  display: block;
	  font-size: 9.5px;
  }
  
  
  #HideImage{
	display : none;
}
  
  #portfolio {
    height: 100vh;
    min-height: 650px;
    padding-top: 5rem;
    padding-bottom: 0;
	
  }
  
  #modalImages{
	  
	  height:220px;
	  width :220px;
}

  #modalImagesTwo{
	  
	  height:150px;
	  width :300px;
}

 #modalImagesThree{
	  
	  height:220px;
	  width :230px;
}
  #MyModalHead{
	  
	font-size: 18px;   
  }
  
 
  #PurposeHead{
	  
	  font-size: 15px; 
	  
  }
  #MyModalContent{
	  
	font-size: 9.5px;  
  }
  
  #MyHead{
	  
	font-size: 20px;  
  }
  
   #MyHeadNEW{
	  
	font-size: 17px;  
  }
  
  
    #MyHeadALL{
	  
	font-size: 13px;  
  }
  
 /* #contactContent{
	  
font-size:10px;
  }*/
  .ChipiseHead
{
	color:white;
	font-size:40px;
	text-align:center;
	
}
div.fixed {
   
    bottom: 0;
    right: 0;
   font-size: 8.5px; 
	
}


  .myHeading  {
    font-size: 19px;
  }
}

div.fixed {
   
    bottom: 0;
    right: 0;
   
	
}

.ImageHead{
	
	height : 80;
	width : 80;
}

@media ( min-width:600px){
.ChipiseIndex{
	
	position: absolute;
    top: 120px;
}

	
.ImageHead{
	
	height : 40;
	width : 40;
}
}
}
@media (min-height: 1000px) {
	
	#home {
    height: 100vh;
    min-height: 650px;
    padding-top: 20rem;
    padding-bottom: 0;
	
  }



  .myHeading  {
    font-size: 22px;
  }
}




section.masthead hr{margin-top:70px;margin-bottom:30px}section.masthead h1{font-size:2rem}section.section p{font-weight:300}@media (min-width:768px)
{section.masthead p{font-size:1.15rem}}@media (min-width:992px)

{#home{height:100vh;min-height:650px;padding-top:300px;padding-bottom:0}
section.masthead h1{font-size:3rem}}
@media (min-width:1200px)
{section.masthead h1{font-size:1rem}}


.service-box{max-width:400px}.portfolio-box{position:relative;display:block;max-width:650px;
margin:0 auto}.portfolio-box .portfolio-box-caption{position:absolute;bottom:0;display:block;width:100%;height:100%;text-align:center;opacity:0;
color:#fff;background:rgba(240,95,64,.9);-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}.portfolio-box .portfolio-box-caption 
.portfolio-box-caption-content{position:absolute;top:50%;width:100%;transform:translateY(-50%);text-align:center}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name
{padding:0 15px;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{font-size:14px;font-weight:600;text-transform:uppercase}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{font-size:18px}.portfolio-box:hover .portfolio-box-caption{opacity:1}.portfolio-box:focus{outline:0}@media (min-width:768px){.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category{font-size:16px}.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name{font-size:22px}}.text-primary{color:#137110!important}
.btn{font-weight:700;text-transform:uppercase;border:none;border-radius:300px;font-family:'Open Sans','Helvetica Neue',Arial,sans-serif}
.btn-xl{padding:1rem 2rem}
.btn-primary{background-color:#137110;border-color:#137110}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{color:#fff;background-color:#ee4b28!important}.btn-primary:active,.btn-primary:
focus{box-shadow:0 0 0 .2rem rgba(240,95,64,.5)!important}

.col-container {
    display: flex;
    width: 100%;
}
.col {
    flex: 1;
    padding: 16px;
}


#contact {
  padding-top: 5rem;
  padding-bottom: calc(10rem - 56px);
  background: none;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
  
  
}



.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

mainDiv {
    overflow:hidden;
}
* {
    box-sizing: border-box;
}

.columns {
    float: left;
    width: 20%;
    padding: 8px;
}

.price {
    list-style-type: none;
   /* border: 1px solid #eee;*/
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
   transition: 0.3s;
}
 
/*.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}*/

.price .header {
    background-color: #111;
    color: white;
    font-size: 25px;
}

.price  {
    font-size:25px;
    padding: 15px;
    text-align: center;
}

.price .grey {
    background-color: #eee;
    font-size: 20px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

@media only screen and (max-width: 600px) {
    .columns {
        width: 100%;
    }
}

/*sidenav home page*/

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #137110;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}



@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #F1F1F1;
   color: #137110;
   text-align: center;
}


table, td, th {    
    border: 1px solid #137110;
    text-align: left;
}

/* Button used to ppen the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;

  bottom: 23px;
  right: 28px;
  width: 150px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Add styles to the form container */
.form-container {
  max-width: 500px;
  padding: 8px;
  background-color: #f1f1f1;

}

/* Full-width input fields */
.form-container input[type=text], .form-container textarea[type=textarea] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #efeaea;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=textarea]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #137110;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: grey;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover , ..form-popup:hover{
  opacity: 1;
}



.topnavIndex{
	
    
    overflow: hidden;
	  top: 0px;
	  text-align: center;
  width: 100%;
 

	
}

.topnav {
    
     background-color: rgba(19, 113, 16, 1) !important;
    overflow: hidden;
	  top: 0px;
	  text-align: center;

background-color: solid;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

	
}



	 
.topnav a {
	
	
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
    float : left; 
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
	text-transform:uppercase;
}

.topnav a:hover {
    
    color: grey;
}

.active {
  
}

.topnav .icon {
    display: none;
}


@media screen and (max-width: 600px) {
  .topnav li:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
	
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive li {
   width: 100%; 
    display: inline-block;
    text-align: left;
	
  }
}


.accordion {
   
   font-family : Times New Roman;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 22px;
    transition: 0.4s;
	 background-color: grey;
	   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	 background-color: white;
	color:#137110;
	 
	
}

.active, .accordion:hover {
 
	
}


/* The Modal (background) */
.modal {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}
.closeTwo {
    color: #aaaaaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}
.closeThree {
    color: #aaaaaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}

.closeFour {
    color: #aaaaaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}
.closeFive {
    color: #aaaaaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}
.closeSix {
    color: #aaaaaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.panel {
    padding: 0 18px;
    display: block;
    background-color: none;
    overflow: hidden;
}
/*Send Email */



.success-help {
  padding: 0 15px;
  vertical-align: 0px;
  display: none;
  font-size: 16px;
  color: #444;
}

.mdl-spinner {
  vertical-align: middle;
  margin: 0px 10px;
  display: none;
}