body { 
    color: black;
    font-family: "adria_slabregular", serif;
    background-color: #fff;
    padding: 0;
    }
a:link { font-weight: bold;
    text-decoration: none;
    }
a:visited { font-weight: bold;
    text-decoration: none;
    }
a:hover { text-decoration: underline;
    }
#wrapper { 
    width: 70%;
    margin-right: auto;
    margin-left: auto;
    }
#header { 
    height: 10em;
    
}
#nav { font-weight: bold;
    line-height: 15px;
    background-color: #f7eaf6;
    text-align: center;
    margin: 0;
    padding: 1em 0;
    border: solid 2px #5a006e;
    }
#nav a:link { color: #6C6C6C;
    text-decoration: none;
    }
#nav a:visited { color: #780528;
    text-decoration: none;
    }
#nav a:hover { color: #7f7f7f;
    }
#nav ul { margin: 0;
    padding: 0;
    list-style-type: none;
    }
#nav ul li { padding: 0 15px;
    display: inline;
    }
#content { background-repeat: repeat-y;
    vertical-align: top;
     border-right: 2px solid #5a006e;
    border-left: 2px solid #5a006e;
    
           padding: 2em;}
#content h1 { color: #be008c;
    font-size: 1.7em;
    margin: 0;
    padding: 0 0 5px;
    }
#content h2 { color: #be008c;
    font-size: 1.5em;
    margin: 0;
    padding: 5px 0;
    }
#content p { 
    margin: 0;
    padding: 0 0 10px;
    }
#intro {
    text-align: center;
    text-size: .9em;
    padding-bottom: 1em;
}
#intro dl { 
    margin: 0;
    padding: 0;
     }
#intro dt { 
    font-weight: bold;
    margin: 0;
    padding: 0;
    }
#intro dd { 
    margin: 0;
    padding: 0;
    }
#contact { 
    float: right;
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
    text-align: right;
}
#contact p { 
    padding: 0 1em 0 0;
    margin: 0 1em 0 0;
}
.email:after {
     content: "info\40suberic.net";
}
#footer { 
    text-align: center;
    clear: both;
    margin: 0;
    padding: 2em 0;
    }
#footer ul { margin: 0;
    padding: 0;
    list-style-type: none;
    }
#footer ul li { font-size: 12px;
    font-weight: bold;
    line-height: 12px;
    padding: 0 5px;
    display: inline;
    }
#footer p { font-size: 10px;
    line-height: 10px;
    margin: 0;
    padding: 0;
    }

input {
  width: 20em;
  display: block;
  border: 1px solid #999;
  height: 2em;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

textarea {
  width: 20em;
  display: block;
  border: 1px solid #999;
  height: 10em;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

button {
  background-color: #f7eaf6;
  font-family: "adria_slabregular", serif;
  border-radius: 15px;
  border: 1p solid #999;
}

button:hover {
  color: #be008c;
}

button:focus {
  color: #be008c;
}

:focus {
  padding: 3px;
  box-shadow: 0px 0px 8px rgba(190, 0, 140, 1);
  border: 1px solid rgba(190, 0, 140, 1);
}
/* Portfolio page style */


img.portfolio_logo {
  border: none;
  width: auto;
  max-width: 100%;
}

div.portfolio_logo {
  border: none;
  text-align: center;
  width: 10%;
  float: left;
  padding-right: 5%;
  margin-top: -1.5em;
}

div.portfolio_item {
  clear: left;
  border-top: 2px #f7eaf6 solid;
  padding-top: 5px;
  width: 100%;
}


.portfolio_item h2 {
  padding-left: 15% !important;
}

div.portfolio_text {
  text-align: left;
  width: 80%;
  margin-left: 15% !important;
}

/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2017 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      FaceType
 * License URL: https://www.fontspring.com/licenses/facetype/webfont
 *
 *
 */

@font-face {
    font-family: 'adria_slabregular';
    src: url('fonts/adriaslab-regular-webfont.eot');
    src: url('fonts/adriaslab-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/adriaslab-regular-webfont.woff2') format('woff2'),
         url('fonts/adriaslab-regular-webfont.woff') format('woff'),
         url('fonts/adriaslab-regular-webfont.ttf') format('truetype'),
         url('fonts/adriaslab-regular-webfont.svg#adria_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* screen reader only */
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}