/* NOTE: /* color palette https://coolors.co/6da34d-384d48-acad94-d8d4d5-e2e2e2"*/

@import "https://fonts.googleapis.com/css?family=Montserrat:400,700,900";

html {
  font-size: 14px;
}

body {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  color: black;
}

div{
	
	max-width:100%;
}

/* NOTE: Header */

#smallmenudiv{
	
	  background-color: #ACAD94;
	  margin-top:0;
}

.g-recaptcha{
	width:303px;

  margin:0 auto;
  margin-bottom:20px;
	
}

.navbar-default {
  background-color: #ACAD94;
  color: #3B5249;
  border-color: #ACAD94;
}


.navbar-default .navbar-nav {
  font-size: 1.5rem;
  font-weight: bold;
}

ul.navbar-right {
  padding-top: 10px;
}

.navbar-default .navbar-nav>li>a {
  color: #3B5249;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #e2e2e2;
}

.navbar-default .navbar-nav .active {
  color: #e2e2e2;
}

.navbar-left a {
  color: inherit;
  background-color: inherit;
  text-decoration: none;
}


h1 {
  margin: 1.78rem;
  font-weight: 900;
  text-align:center
}

form h2{
	text-align:center;
	font-style:normal !important;
	
}

#contact hr{
	font-weight:bold!important;
	color:black!important;
	border:0;border-top:1px solid #555;height:1px;width:95%;margin:0 auto;
	
}


.concol{


}

h2 {
  font-weight: 1.6;
  font-weight: bold;
  color: #384D48;
}
.active{font-weight:800;padding-left:8px;font-style:italic}
h3 {
  font-size: 1.5rem;
  font-weight: bold;
}




.grayish {
	
	  color: #e2e2e2;
	
}

.smalllogo{
	

font-size:8vw;
	
}



.container {
  display: flex;
  justify-content: space-between;
}

.container p {
  /*margin: 50px;*/
}

/* NOTE: come back to this, to either resize image or to find another one that works better for the jumbotron */

.jumbotron {

  top: 5rem;
  height: 38rem;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../../resources/images/optimizilla/NewWopHome9.png');
}

.jumbotron img {
  width: 100%;
  height: auto;
}


.main {

  
  max-width:1100px;
  margin:0 auto;
  margin-top:20px;
  font-size:1.2em;
  padding:5px;

}

h4{
	font-weight:bold;
	
}

.centmarg{
	
	max-width:900px;
	margin:20px auto;
	
}

.centmarg img {
	
	margin:18px;
}


.centmarg h2{
	
	font-style:italic;
}

.ital {
	
		font-style:italic;
	
}

.picl{
	
	float:left;
	margin:5px;
	margin-top:-10px;
	
}

.picl img{
	
	max-width:290px;
}

.main ul {
  list-style: disc;
  margin-left: 1.25rem;
}
.about {
  background-color: #D8D4D5;
  height: 17rem;
  width: 17rem;
  margin: 1rem auto;
  padding: .5rem;
  color: #3B5249;
  border-radius: 5px;
  cursor: pointer;
}

.about:hover {
  background-color: #e2e2e2;
}

.about h3 {
    font-size: 1.25rem;
  }

.about h3 {
  text-align: center;
}

.about a {
  color: #3B5249;
  text-decoration: none;
}

.about a:hover {
  text-decoration: underline;
}

.image-container img {
  width: 100%;
  height: 100%;
}

.image-container {
  height: 70%;
  width: 90%;
  margin: 5%;
}

#mobilenav{
	color:white;
	font-size:1.3em;
display:none;
  background: #ACAD94;
	padding:6px;
  border:3px solid #384D48;
  
}
#mobilenav a{
	
	color:white;
}


#mobilenav ul {
list-style-type:none;
}
#mobilenav ul li:hover{
color:red;
font-size:22px;
font-weight:bold;
}




/* NOTE: Contact section */




/*  old contact form styles #contact {

  top: 4rem;
  min-height: 500px;
  width: 400px;
  max-width:100%;
  background-color: #e2e2e2;
  display: flex;
  flex-direction: column;
  margin-left: 25%;
  margin-bottom: 25px;
  border:4px solid #384D48;

}*/

#contact {text-align:center;padding:15px;}


#submitbutton {
	
	
	
	
	
  padding: 10px;
  width: 25%;

  text-align:center;
  border-radius: 2px;
  background-color: #6DA34D;
  color: #e2e2e2;
  font-weight: bold;
  font-size: 18px;
  transition: all 200ms linear;
  margin-left:40%; margin-right:auto; margin-bottom:15px;
}

#submitbutton:hover {
  background-color: #384D48;
  color: #D8D4D5;
  cursor: pointer;
}


#contact {

  top: 4rem;

 
  max-width:100%;
  background-color: #e2e2e2;

  
  margin-bottom: 25px;
  border:4px solid #384D48;

}


#contact p {
  /*padding: 20px;*/
  text-align: left;
}


#contact button {
  padding: 10px;
  width: 25%;
  margin-left: 20px;
  border-radius: 2px;
  background-color: #6DA34D;
  color: #e2e2e2;
  font-weight: bold;
  font-size: 18px;
  transition: all 200ms linear;
}

#contact button:hover {
  background-color: #384D48;
  color: #D8D4D5;
  cursor: pointer;
}

#adr {

  top: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position:relative;
  margin-top:50px;
}

#adr span {
  color: #3B5249;
  margin: 5px;
}

#adr i {
  margin: 3px;
}




.showsmall{display:none;}

/* NOTE: color tweaking */
.darkgreen{
	
	color:#384D48;
}

.white{
	
	color:white;
}

#menu p{
	
	background:#384D48;
}

#menu a{
	
	background:#ACAD94;
}


@media only screen and (max-width:767px) {
	
	
	.main{
		
		margin:9px;
	}
	
	
	#contact{margin-left:0px}
	
	
	
	.responsive{width:98%!important;text-align:center;margin:0 auto}
	
	
	#bighead{display:none;}
	
	.showsmall{display:block;}
	.hidesmall{display:none;}
	
}



@media only screen and (max-width: 750px) {
  #adr {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 25%;
    width: 50%;
    font-size: .75rem;
  }
}

/* NOTE: Web page styling */

#sample {
  display: flex;
}

#sample img {
  height: 300px;
  width: 600px;
  margin: 20px;
}

/* NOTE: Footer section */

footer {
  background-color: #3B5249;
  color: #e2e2e2;
  padding: 20px;
  margin-top: 75px;
  display: flex;
  justify-content: space-between;
}

footer ul {
text-align:right;

}

footer li{
	
	display:inline-block
	
}

footer ul a {
  color: #e2e2e2;
  list-style-type: none;
  margin-left: 10px;
  text-decoration: none;
}

footer ul a:hover li {
  text-decoration: underline;
  color: #e2e2e2;
}

@media only screen and (max-width: 649px) {
  footer {
    font-size: .75rem;
    display: block;
    text-align: center;
  }

  footer ul {
    justify-content: center;
  }
}