/* 
    Created on : 16-Aug-2018, 19:43:58
    Author     : Ashna Wiar
*/

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    background-image: url('../images/linen.png');
    -webkit-text-size-adjust: auto;
    height: 100%;
}

body{
    margin: 0px;
    height: 100%;
    font-family: artial, sans-serif;
}
.title {
        margin-bottom: 10px;
    }
::-moz-selection {
    /*background: #b3d4fc;*/
    background: rgba(245, 184, 2, 0.5) none repeat scroll 0 0;
    text-shadow: none;
}

::selection {
    /*background: #b3d4fc;*/
    background: rgba(245, 184, 2, 0.5) none repeat scroll 0 0;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
ul {
    list-style: none;
}
textarea {
    resize: vertical;
}
.button {
    border: 1px solid #c3c3c3;
    height: 35px;
    padding: 2px;
    cursor: pointer;
    width: 90px;
}
/*
 * fancy style for heading between [ .card ] class
 */
.fancy {
    line-height: 0;
    text-align: center;
}
.fancy span {
    display: inline-block;
    position: relative;
}
.fancy span:before,
.fancy span:after {
    content: "";
    position: absolute;
    height: 5px;
    border-bottom: 1px solid #c3c3c3;
    border-top: 1px solid #c3c3c3;
    top: 0;
    width: 260px;
}
.fancy span:before {
    right: 100%;
    margin-right: 15px;
}
.fancy span:after {
    left: 100%;
    margin-left: 15px;
}

#hr-1 {
    width: 100%;
    background-image: url("../images/hr-11.png");
    background-repeat: repeat-x;
    border: 0 none;
    height: 6px;
    margin: 10px 0;
}

#hr-2 {
    clear: both;
    border-top: 1px solid orange;
    width: 100%;
    background: none;
}

/*
 * gives 100% width to an element;
 */
.full-width {
    width: 100%;
}
/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Center page with 960px of width
 */
.center-page {
    width: 960px;
    margin: 0 auto !important;
}

.disable-margin {
    margin: 0px 0px 0px 0px !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
/*
 * color classes
 */
#c-steelblue {
    background-color: #57A2E0;
}
#c-caption{
    background-color: #75AFC6/* #99B4D1*/;
}

#c-transparentRed{
    background-color: #EA6969;
}

#c-busines{
    background-color: #97ACC1;
}
input[type=text]:focus,input[type=email]:focus, select:focus {
    transition: border-color 0.5s;
    border-color: orange;
}

/* ==========================================================================
     Form
   ========================================================================== */
.form_error > input {
    border-color: orangered !important;
}

header  > .top-bar  {
    background-color: #454545;
}

header > .middle-bar {
    background: #454545;
    height: 115px; /* height: 195px; TODO */
    padding-top: 20px;
}

.top-bar > ul > li {
    display: inline;
    float: right;
    margin: 0 7px;
}

.top-bar > ul > li > a {
    font-size: 9px;
    padding: 9px 0;
    display: block;
    color: #c3c3c3;
    font-weight: bold;
    line-height: 9px;
    text-decoration: none;
    text-transform: uppercase;
}

.top-bar > ul > li > a:hover {
    color: white;
}

.phone {
    margin: 0;
    text-shadow: 2px 2px 0px rgba(150, 150, 150, 1);
}

.header-info {
    float: right;
}

.header-info .sub-info {
    text-align: right;
    color: white;
    font-size: 14px;
    font-weight: 100;
    margin: 0;
}
.header-info h1 {
    font-size: 2.4em;
    font-family: "Lato",sans-serif;
    font-weight: 900;
    color: white;
    border-bottom: 1px solid white;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav {
    border-bottom: 1px solid gainsboro;
}

nav ul {
    width:100%;
    max-width:960px;
    margin:0 auto;
    overflow: hidden;
    padding: 0;
    list-style: none;
    text-align: left;

}
nav ul .active {
    border-top: 4px solid orange;
    padding: 11px 15px;
}

nav ul li {
    float: left;
    padding: 15px;
}

nav ul li:hover {
    border-top: 4px solid orange;
    padding: 11px 15px;
}

nav > ul > .active {
    border-top: 4px solid orange;
    padding: 11px 15px;
}

nav ul li a {
    color: black;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
}

.card {
    padding: 20px;
    background: #FFF;
    border-bottom: 1px solid orange;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.19);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.19);
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.19);
}

.card hr {
    border-top: 1px solid #8c8b8b;
    margin: 5px auto;
    width: 28px;
}
.card hr:last-child {
    width: 100%;
    background-image: url("../images/hr-11.png");
    background-repeat: repeat-x;
    border: 0 none;
    height: 6px;
    margin: 10px 0;
}

.card h1, .card h2 {
    color: #222;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}

.card h3 {
    color: orange;
    font-family: Tahoma;
    font-size: 10px;
    font-variant: normal;
    font-weight: lighter;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 10px;
    text-align: center;
}

.card p {
    color: #666; /* 0_0 */
    font-family: Arial;
    text-align: center;
    /*! font-size: 1em; */
    margin-top: 0.5em;
}

.width-3 {
    width: 27%;
    float: left;
    margin: 0 1%;
}

footer {
    width: 100%;
    margin-top: 70px;
    border-top: 4px solid orange;
    background-image: url("../images/bgFooter.jpg");
    padding: 25px 0;
    position: relative;
    bottom: 0;
}

footer .colum {
    margin: 0 34px;
    /*! padding-left: 10px; */
    float: left;
    position: relative !important;
    width: 17%;
}
footer .colum h2 {
    border-bottom: 1px solid orange;
    padding-bottom: 5px;
    color: orange;
    font-family: "Lucida Grande",Tahoma;
    font-size: 10px;
    font-variant: normal;
    font-weight: lighter;
    letter-spacing: 0.3em;
    margin-top: 10px;
    text-transform: uppercase;
}

footer .colum ul {
    list-style: none;
    padding: 0;
}

footer .colum ul li {
    font-family: "Lucida Grande",Tahoma;
    font-size: 11px;
    font-variant: normal;
    font-weight: lighter;
    letter-spacing: 0.3em;
    margin-top: 10px;
    text-align: left;
    color: white;
}
footer .colum ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}

.logger_error , .logger_warn {
    font-weight: bold;
}

.logger_warn{
    color: orange;
}

.logger_error {
    color: red;
}

.alert_box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 1;
    overflow: hidden;
}

.button-orange{
    background-color: orange;
    color: white;
    border-color: orange !important;
    border-radius: 10px;
}

.message {
    width: 50%;
    margin: 0 auto;
        margin-top: 0px;
    margin-top: 185px;
}
.shadow {
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.19);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.19);
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.19);
}

footer p {
    color: white;
    text-align: center;
}



/* safari hack */
a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}