body {
  padding-top: 50px;
  background-color: #fafafa ;
  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container {
  width:100%;
}
.page-bg {
  background-color: #fff ;  
  border: 1px solid;
  border-color: #ddd;
  min-height:1080px;
}

.header {
  padding-top: 0px;
  padding-bottom: 20px;
}

.header-title {
    z-index:100;
    position:absolute; 
    font-size: 3.0em;
    font-family: Roboto,Arial;  
    color: #555; 
    font-weight: 300; 
    top: 15%; 
    left: 150px;
}

var {  /* must be here to remove italic style from var font */
font-style: normal; 
}

.footer {
  border-top: 1px solid #444;
  padding-top: 20px;
  margin-top: 20px;
  color: #999
}

#faqs h6	{ cursor:pointer; font-size:16px }
#faqs h6.active	{ color:#0066ff; }
#faqs div { height:0; overflow:hidden; position:relative; }
#faqs div p	{ padding:0; margin-bottom:10px; }

#read-more h6	{ cursor:pointer; font-size:16px }
#read-more h6.active	{ color:#333; }
#read-more div { height:0; overflow:hidden; position:relative; }
#read-more div p	{ padding:0; margin-bottom:5px; }


/* PAGE TEXT */

.text-position {
  padding: 0px 0px;
  text-align: left;
  max-width:95%;
}

p {font-size: 15px;}

h1 {position:relative;
    top:-10px;
    left:0px;
    color: #555;
    font-size: 36px;
    font-family: Roboto,Arial; 
    font-style: normal;
    font-weight: 300;   
}

h2 {
    color: #555;
    font-size: 30px;
    font-family: Roboto,Arial; 
    font-weight: 300;
}



.fa-text { /* font awesome symbols with text */
  font-family: Arial;
  font-size: 16px;
}

/* CUSTOM BUTTON - USE CLASS BTN FOR LARGER BUTTONS */

.button {     /* https://catalin.red/just-another-awesome-css3-buttons/ */   
    display: inline-block;
    white-space: nowrap;
    background-color: #ddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background-image: -webkit-linear-gradient(top, #eee, #ccc);
    background-image: -moz-linear-gradient(top, #f3f3f3, #ddd);
    background-image: -ms-linear-gradient(top, #eee, #ccc);
    background-image: -o-linear-gradient(top, #eee, #ccc);
     background-image: linear-gradient(top, #f3f3f3, #ddd);
            
    border: 1px solid #777;
    padding-top: 0px;
    padding-right: 8px;
    padding-bottom: 0px;
    padding-left: 8px;
    margin: 0.2em;
    font: Roboto, Arial, Helvetica;
    font-weight:400;
    text-decoration: none;
    color: #222;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    border-radius: 2px;
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover {
    background-color: #eee;        
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
    background-image: -moz-linear-gradient(top, #fafafa, #ddd);
    background-image: -ms-linear-gradient(top, #fafafa, #ddd);
    background-image: -o-linear-gradient(top, #fafafa, #ddd);
    background-image: linear-gradient(top, #fafafa, #ddd); 
    text-decoration:none;    
}

.button-top {  /* back to top of page button */
    color: #333;
    background-color: #eee;
    border: 1px;
    border-color: #888;
    font-size: 14px;
    padding: 4 3px;
    margin-bottom:20px;
    float:right;
}

/* LAYOUTS */

.portfolio-item {
    margin-bottom: 20px;
}