/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 27, 2017, 10:13:03 AM
    Author     : diane
*/
html,body{
    background-color: #f1f6f1;
}
#header{
    display:block;
    padding-top:20px;
    height:105px;
    background:#0b0a0d
}
#header #logo{
    margin:0 auto;
    width:200px;
    height:75px;
    background-image:url('../images/softnoid white.png');
    background-size:cover;
    background-repeat:none
}
#header #logo a{
    display:block;
    padding-top:28px;
    color:#64377a;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.03rem;
    font-size:.78rem
}
#header #sign{
    display:inline-block;
    text-align:right
}
#header #sign .name{
    display:inline-block;
    float:left;
    overflow:hidden;
    margin-right:3px;max-width:60px
}
#header .menu-toggler,#header .search-toggler{
    display:none;
    padding:3px 8px;
    font-size:1.2rem
}
#header #logo-text{
    visibility: hidden;
    display: none;
    color: whitesmoke;
    text-shadow:0 1px 0 rgba(0,0,0,.1);
    font-weight: bold;
    font-family: 'Voltaire', sans-serif;
}

#nav{
    display:block;
    background:#1e1c25
}
#nav #search{
    float:right;
    width:110px;
    font-size:1.2rem;
    -webkit-transition:all .1s ease-in-out 0s;
    -ms-transition:all .1s ease-in-out 0s;
    -o-transition:all .1s ease-in-out 0s;
    transition:all .1s ease-in-out 0s
}


.pull-left{float:left!important}
.pull-right{float:right!important}

.item{
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    background: #3a3838;
    border-top: 4px solid #4E5298;
}
.item .lead img{
    width: 100%;
    height: 200px !important;
}
.item .lead span{
    font-size: 1.0em;
    color: #fff;
    background: #1e1c25;
    padding:.2em;
    width: 100%;
    font-family: 'Voltaire', sans-serif;
}

.item:hover,.item .lead:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
}

.item .lead span:hover{
    background: #3a3838;
    color: #fff;
}

.override-header{
    background-image: linear-gradient(to bottom,rgb(36,86,89) 0,black 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009688', endColorstr='#022316', GradientType=0);
}

#mynav li:hover, #mynav li a:hover{
    border-left: 4px solid #009688;
    color: #1e1c25;
}

/**prices**/
.price-section {
    padding: 0 0 4em;
}
.price-grids {
    text-align: center;
    margin-top:4em;
}
.pricing {
    background: #3a3838;
    border-top: 4px solid #4E5298;
}
.price-top {
   padding: 1.5em 1em;
}
.price-top h4 {
    font-size: 1.5em;
    color: #fff;
    text-transform: capitalize;
    font-weight: 400;
    font-family: 'Voltaire', sans-serif;
}
.price-bottom h6 {
    font-size: 1.8em;
    color: #fff;
    background: #585CA7;
    padding:.5em;
    font-family: 'Voltaire', sans-serif;
}
.price-bottom h6 span {
    font-size: .5em;
}
.price-bottom ul li {
    font-size: .65em;
    line-height: 1.8em;
    color: #eee;
    padding: .5em 0;
    list-style: none;
    border-bottom: 1px solid #8387D4;
}

.service-active{
    background-color: #41c17d;
    color: #fff;
}

.img-small{
    width: 100%;
    height: 265px;
    margin-bottom: 1.5em;
}

.btn-style{
    background-color: #65788a;
    color: white;
    font-weight: bold;
}

.btn-style:hover{
    background-color: #41c17d;
    color: #fff;
}

.text-area{
    width: 100%;
    height: 300px;
    padding: 3%;
}

@media screen and (max-width:768px){
    #header .menu-toggler,#header .search-toggler{display:inline-block}
    #header #logo a{text-transform:uppercase}
}
@media screen and (max-width:480px){
    #header{height:150px}
    #header #logo{margin-top:2px;margin-left:40px;max-width: 100%;width:275px;height:100px}
    #header #logo a{padding-top:20px;color:#9a9a9a;letter-spacing:.02rem;font-size:.62rem}
}
@media screen and (max-width:320px){
    #header #logo{
        margin-top:4px;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100px;
        background: url('../images/icon softnoid.png');
        background-repeat: no-repeat;
    }
    #header #logo-text{
        visibility: visible;
        display: block;
    }
    #header #logo a{padding-top:18px;font-size:.5rem}
    #header .btn-login .fa{display:none}
    .btn-style,.btn,.service-active{
        width: 100%;
        margin-top: 4px;
    }
}