* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: top;
        background: transparent;
}
@media screen and (min-width: 900px) {
html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
}
#mainwrapper {
	width:100%;
	height:100%;
	vertical-align:middle;
	background-image:url(../images/back.jpg);
	background-size:cover;
	background-repeat:no-repeat;
}
#contentwrapper {
	width:94%;
	height:94%;
	margin-left:auto;
	margin-right:auto;
	border: solid medium #E0E0E0;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
#transcolor {
	position:absolute;
	width:100%;
	height:100%;
	background:#FFFFFF;
	filter: alpha(opacity=60);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
#matter {
	position:absolute;
	width:100%;
	height:100%;
	vertical-align:top;
}
#title {
	width:100%;
	display:inline-block;
}
h1 {
    font-family: 'Archivo Narrow', sans-serif;
	font-size:40px;
    margin-top: 30px;
    position: relative;
    text-align: center;
	color:#3A3A3A;
    z-index: 1;
}

h1:before {
    border-top: 3px solid #507642;
	content:"";
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
    top: 15px; left: 0; right: 0; bottom: 0;
    width: 95%;
    z-index: -1;
}

h1 span { 
    /* to hide the lines from behind the text, you have to set the background color the same as the container */ 
    background: #CDD0CC;
    padding: 0 15px;
	border-radius:5px;
}
#para {
	width:40%;
	height:auto;
	padding:5%;
	display:inline-block;	
}
#menus {
	width:30%;
	height:auto;
	display:inline-block;
	margin-left:50px;
	position: relative;
	top: 40%;
	transform: translateY(-60%);
}
P {
	font-family: 'Droid Sans', sans-serif;
	font-size:14px;
	color:#3F3F3F;
	text-align:justify;
}
/* Trim */
.hvr-trim {
	padding:30px 5% 30px; 5%;
	margin-top:5px;
	background-color:#507642;
	color:#fff;
	font-family: 'Archivo Narrow', sans-serif;
	font-size:20px;
	text-decoration:none;
	text-align:center;
	display:block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
}
.hvr-trim:before {
  content: '';
  position: absolute;
  border: white solid 4px;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.hvr-trim:hover:before, .hvr-trim:focus:before, .hvr-trim:active:before {
  opacity: 1;
}
}
@media screen and (max-width: 900px) {
html, body {
   height: 100%;
   width: auto;
   margin: 0;
   padding: 0;
}
#mainwrapper {
	width:90%;
	height:auto;
	vertical-align:middle;
	background-image:url(../images/back.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	padding:5%;
}
#contentwrapper {
	width:100%;
	height:auto;
	padding-bottom:20px;
	opacity:0.9;
	margin: 0 auto 0 auto;
	border: solid medium #E0E0E0;
	background-color:#EFE7E8;
}
#transcolor {
	display:none;
}
#matter {
	width:100%;
	height:auto;
}
#title {
	width:100%;
	display:inline-block;
}
h1 {
    font-family: 'Archivo Narrow', sans-serif;
	font-size:1.5em;
    margin-top: 30px;
	margin-bottom: 30px;
    position: relative;
    text-align: center;
	color:#3A3A3A;
    z-index: 1;
}

h1:before {
    border-top: 3px solid #507642;
	content:"";
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
    top: 15px; left: 0; right: 0; bottom: 0;
    width: 95%;
    z-index: -1;
}

h1 span { 
    /* to hide the lines from behind the text, you have to set the background color the same as the container */ 
    background: #CDD0CC;
    padding: 10px 15px;
	border-radius:5px;
}
#para {
	width:90%;
	height:auto;
	padding:5%;
	display:inline-block;	
}
#menus {
	width:80%;
	height:auto;
	display:block;
	margin:0 auto 0 auto;
}
P {
	font-family: 'Droid Sans', sans-serif;
	font-size:14px;
	color:#3F3F3F;
	text-align:justify;
}
/* Trim */
.hvr-trim {
	padding:30px 5% 30px; 5%;
	margin-top:5px;
	background-color:#507642;
	color:#fff;
	font-family: 'Archivo Narrow', sans-serif;
	font-size:20px;
	text-decoration:none;
	text-align:center;
	display:block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
}
.hvr-trim:before {
  content: '';
  position: absolute;
  border: white solid 4px;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.hvr-trim:hover:before, .hvr-trim:focus:before, .hvr-trim:active:before {
  opacity: 1;
}
}


/*


    font-family: 'Archivo Narrow', sans-serif;

    font-family: 'Droid Sans', sans-serif;

*/