@font-face{
   font-family: 'Montse';
   src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
   
}

@font-face{
   font-family: 'Lato';
   src:  url('../fonts/Lato-Light.ttf') format('truetype'),
         url('../fonts/Lato-Thin.ttf') format('truetype');
}

@font-face{
   font-family: 'OpenSans';
   src:  url('../fonts/OpenSans-Regular.ttf') format('truetype');
}

.webicon{
	font-family: 'webicons', 'Titillium Web', sans-serif;
	font-variant-ligatures: "discretionary-ligatures";
	-webkit-font-feature-settings: "dlig";
	-moz-font-feature-settings: "dlig";
	font-feature-settings: "dlig";
   font-size: 6em;
}

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html, body{
   height: 100%;
   font-family: 'OpenSans', 'helvetica', sans-serif;
   font-weight: 500;
   color: rgba(51,51,51,1);
}

body{
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   background-color: rgba(250,250,248,1);
}

#wrapper{
   display: flex;
   flex-flow: column nowrap;
   margin: 0 auto;
   padding: 1.5em;
   width: 800px;
   margin-bottom: 1.5em;
}

#wrapper header{
   margin: 0.75em 0;
   text-align: center;
   background-color: white;
}

#wrapper header h1 {
   font-family: 'Montse', 'Titillium Web', sans-serif;
   font-weight: 100;
   color: rgba(0,108,113,1);
   margin: 0 auto;
}

#wrapper header p {
   font-family: 'Lato', 'Titillium Web', sans-serif;
   font-weight: 100;
   font-size: 1.8em;
   color: rgba(214,175,46,1);
   letter-spacing: 0.64em;
   text-align: center;
   text-indent: 0.7em;
   text-shadow: 0.05em 0.05em 0.1em rgba(51,51,51,1); 
}

a{
   text-decoration: none;
   color: whitesmoke;
}

a:visited{
   color: whitesmoke;
}

a:active{
   color: chartreuse;
}

a:hover{
   color: rgb(45, 255, 118);
   text-decoration: underline;
}

#intro{
   margin: 1em 0;
   text-align: center;
   line-height: 1.5em;
   font-size: 1.25em;
}

#contact{
   margin: 1em 0;
   text-align: justify;
   line-height: 1.5em;
   font-size: 1.25em;
}

footer {
   padding-bottom: 1.5em;
}

footer article {
   text-align: center;
}

.hide{
   visibility: hidden;
}

@media screen and (max-width: 800px){
   #wrapper{
      width: 100%;
   }
}

@media screen and (max-width: 535px){
   #wrapper{
      font-size: 0.75em;
   }
}

@media screen and (max-width: 405px){
   #wrapper{
      font-size: 0.575em;
   }
}