@charset "UTF-8";
/* CSS Document */
html {
  height: 100%;
  font-family: 'Lato', sans-serif;
	  scroll-behavior: smooth;

}

/* Header and footer nav*/
.fa-chevron-circle-down {position:absolute; top:90%; left:50%; color:#FFF; opacity:0.3}
 .arrow a:link {color:#000;}
.arrow a:visited {visibility:hidden;}
	.bottomnav {flex-flow:row; margin-top:30px;}
.topnav {margin-bottom:10px;}
.topnav,.bottomnav {
  overflow: hidden;
  display: flex;
  flex-flow: row;
  justify-content: center;
}
.topnav a,.bottomnav a {
  display: block;
  color: #6D6F72;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover, .bottomnav a:hover {
  color: #FFF;
  display: block;
  background-color: #6D6F72;
}
.topnav .icon {
  display: none;
}
/* Main section*/
main, header {
  text-align: center;
  margin: 10px auto;
  max-width: 1960px;
	}
/* Index page */
main h1 {
  font-weight: 300;
  font-size: 6em;
  color: #6D6F72;
  margin:20px
}
main h2 {
  font-weight: 300;
  font-size: 3em;
  color: #6D6F72;
  margin:20px
}
article {max-width:1000px; margin:10px auto;}
.cBody {
  display: flex;
  text-align: left;
  justify-content:center;
}
.cLeft a, .cLeft a:visited {color: #6D6F72;}
.cLeft a:hover {color: #FFF;
  background-color: #6D6F72;}
.cLeft {
  flex: 2;
}
.cRight {
  flex: 1;
}
.cRight img {
	max-width:400px;
	margin:10px;
	
}
/* General */
p {

    font-size: 1.2em; /* always */
    line-height: 1.6em; /* at least for desktop */ 
  font-weight: normal;
  color: #272525;
   padding: 5px;
}
/* Image gallery*/
.cImages {
  display: flex;
  flex-flow: wrap;
    justify-content: center;
	
}
.cImages img {
  display: flex;
  width: 100%;
  max-width: 300px;
	margin:5px;
	  filter: grayscale(100%);
		   transition: all .2s linear;

}
.cImages img:hover {
 
	  filter: grayscale(0%);
	   transition: all .2s linear;
}
/* Contact form*/
label {Font-size:1.2em; line-height:2em;}
input, textarea {background-color: #BDBDBD; color:#FFF; height:45px; border:0px; font-size:16px; width:100%; max-width: 500px; overflow:hidden;}
textarea {width:100%; }
input[type="submit"] {height:45px; width:100px;}

small {padding:10px;}

@media screen and (max-width: 1000px) {
  .cRight img {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .cBody {
    display: flex;
    flex-flow: column;
  }
  .cLeft {
    order: 2;
  }
  .cRight {
    order: 1;
    text-align: center;
  }
  .cRight img {
    width: 70%;
  }
	.cImages img {

		width: 100%;}
	
	p {
 
  font-size: 1.2em;
 line-height:2;
}
main h1,h2 {
    font-size: 48px;
 
}
  .topnav {
    overflow: hidden;
    flex-flow: column;
  }
	.bottomnav {flex-flow:column; margin-top:30px;}
  .hide {
    display: none;
  }
  .topnav a {
    display: none;
  }
  .topnav a.icon {
    display: flex;
    align-self: end;
  }
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    display: flex;
    align-self: end;
  }
  .topnav.responsive a {
    display: flex;
    text-align: left;
  }
	.arrow {display:none;}
}