/* Old mate handyman main css file */
html * {
}

body {
    font: normal normal normal 1.0em 'Open Sans',sans-serif;
    color: rgb(208, 229, 222);
}

.separator {
    background-color: rgba(83, 91, 88, 1);
}

/* HEADER SPECIFIC STUFF */
#callcontainer {
    position: relative;
    width: 100%;
    padding: 2px;
    background-color: rgba(136, 119, 87, 1);
    border-radius: 0px 0px 15px 15px;
    border: 0px solid rgba(136,119,87,1);
}

#callcontainer h5 {
    font: normal normal normal 1.4em Impact,impact-w01-2010,impact-w02-2010,impact-w10-2010,sans-serif;
    color: rgb(208, 229, 222);
}

#callcontainer_content {
    text-align: center;
    font-size: 1.7em;
}

.call_shadow {
    position: absolute;
    bottom: -26px;
    width: 165px;
    height: 26px;
    background: url('../imgs/liftedshadow_medium.png') no-repeat;
}

.shadow_left {
    left: -10px;
    background-position: 0 0;
}

.shadow_right {
    right: -10px;
    background-position: 100% 0;
}

#logo img {
    display: block;
    width: 100%;
    text-align: center;
}

/* NAVIGATION SPECIFIC STUFF */
ul.navbar-nav {
    width: 100%;
    list-style: none;
    text-align: center;
    font: normal normal bold 0.875em 'Play',sans-serif;
}

.navbar-nav li {
    display: inline-block;
    width: 33%;
    background: rgba(114, 133, 140, 1) url('../imgs/shiny1button_bg.png') center center repeat-x;
}

.navbar-nav a {
    text-align: center;
    padding: 12px 0 13px 0;
    margin: 0;
    border-left: 1px solid rgba(83, 91, 88, 1);
    border-right: 1px solid rgba(83, 91, 88, 1);
    display: block;
    color: #B3D9CC;
    text-decoration: none;
    text-transform: uppercase;
}

.navbar-nav a.active,
.navbar-nav a:hover {
    background: rgba(136, 119, 87, 1) url('../imgs/shiny1button_bg.png') center center repeat-x;
    transition: background-color 0.4s ease 0s;
    color: #D0E5DE;
    transition: color 0.4s ease 0s;
    text-decoration: none;
}

ul.navbar-nav li:first-child a {
    border: none;
}

ul.navbar-nav li:last-child a {
    border: none;
}

.main_content {
    background-color: rgba(146, 166, 162, 0.3);
    color: #FF3D81;
    font: normal normal normal 1.1em Open,sans-serif;
}

.banner {
    position: relative;
    width: 100%;
    background-color: rgba(114, 133, 140, 1);
    border-radius: 5px;
    border: 1px solid rgba(114, 133, 140, 1);
}

.banner_title {
    color: #D0E5DE;
    font-size: 1.2em;
    font-family: Play,sans-serif;
}

.footer {
    line-height: 3.0em;
}

.layeredimg {
    display: table-cell;
    float: none;
    vertical-align: middle;
}

.layeredimg img {
    width: 100%;
}


input#CreateFeedback_Rating[value="1"] {
    background-image: url('../imgs/happy.svg');
}

input#CreateFeedback_Rating[value="2"] {
    background-image: url('../imgs/confused.svg');
}

input#CreateFeedback_Rating[value="3"] {
    background-image: url('../imgs/sad.svg');
}

input#CreateFeedback_Rating {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-size:auto;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100px;
    height: 70px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
    height: 50px;
    width:50px;
}


input#CreateFeedback_Rating:hover {
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
    filter: brightness(1.2) grayscale(.5) opacity(.9);
}


input#CreateFeedback_Rating:focus {
    outline: none;
}

input#CreateFeedback_Rating:active {
    opacity: .9;
}

input#CreateFeedback_Rating:checked {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}

.btn-pink {
    color: #000000;
    background-color: #ff0059;
    border-color: #ff0059;
}

.ratingIcon {
    width:100%;
}


@media screen and (max-width: 1028px) {
    .banner_title {
        font-size: 1.0em;
    }
}

@media screen and (max-width: 768px) {

    .navbar-nav li {
        width: 100%;
    }

    .banner_title {
        font-size: 0.6em;
    }
}