/*--
Author: Adrienne Bing
Author URL: http://www.lionsshareweb.com
--*/
html, body{
      font-family: 'Lato', sans-serif;
      font-size: 100%;
      background: #FFF;
      margin: 0;
      padding: 0;
      height: 100%;
}

body a{
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
}

.header{
}
.logo{
    float: left;
}
.logo a{
    color: #303030;
    font-weight: 200;
    text-transform: uppercase;
    margin-top: 1.08em;
}
.logo a:hover{
    text-decoration:none;
}
.logo320{
    display:none;
}

.top-header{
    background: #b21414;
    transition: 0.5s all;
}
.top-nav ul li a{
    color: #cc9900;
    padding: 0.2em 1.5em;
    font-size: 0.975em;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    font-weight: 900;
}
.top-nav ul li a:hover{
    color:#3300cc;
    text-decoration-line: underline;
}

.logo a{
    display:block;
}
/* top-nav*/
.top-nav:before,
.top-nav:after {
    content: " ";
    display: table;
}
.top-nav:after {
    clear: both;
}
nav {
    position: relative;
    float: right;
}
nav ul {
    padding: 0;
    float: right;
    margin: 0.5em 0;
}
nav li {
    display: inline;
    float: left;
    position:relative;
}
nav a {
    color: #fff;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
}
nav a:hover{
    text-decoration:none;
    color:#00A2C1;
}
nav a#pull {
    display: none;
}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 768px) {
    nav {
          height: auto;
          float:none;
      }
      nav ul {
          width: 100%;
          display: block;
          height: auto;
      }
      nav li {
          width: 100%;
          position: relative;
      }
      nav li a {
        border-bottom: 1px solid #eee;
    }
      nav a {
          text-align: left;
          width: 100%;
      }
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 768px) {
    nav {
        border-bottom: 0;
        float:none;
    }
    nav ul {
        display: none;
        height: auto;
        margin:0;
        background: #fff;
    }
    nav a#pull {
        display: block;
        position: relative;
        color: #F26D7D;
        text-align: right;
        position: absolute;
        top: 19px;
    }
    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
    nav a#pull img{
        margin-right:2%;
    }
    .top-nav ul li a {
        color: #2C3E50;
        padding: 0em 0;
    }
}
/*Smartphone*/
@media only screen and (max-width : 320px) {
    nav {
        float:none;
    }
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #EEE;
    }
}

/*---- about ----*/
.about{
    padding: 3.5em 0 5em;
}
.about-head h2{
    color:#cc9900;
    font-weight:900;
    font-size:3em;
    margin:0;
    padding:0;
}
.about-head span{
    width:162px;
    height:9px;
    display:inline-block;
    background:url(../img/border-bg.png) no-repeat 0px 0px;
}
.about-head p{
    color: #7E8287;
    font-size: 1.2em;
    font-weight: 300;
    width: 80%;
    line-height:1.8em;
    margin: 1em auto;
}
.about-head p label{
    font-weight: 900;
    font-size: 1.3em;
}
/*----about-grids---*/
.about-grids{
    padding:2em 0 1em;
}

.about-grid span{
    width:33px;
    height:34px;
    display:inline-block;
}

.about-grid h3{
    margin:0;
    padding:0;

}

.about-grid h3 a{
    color: #b21414;
    font-weight: 400;
    font-size: 1em;
    margin: 0.5em 0 0;
    display: inline-block;
}
.about-grid h3 a:hover{
    text-decoration:none;
    color:#02918C;
}
.about-grid p{
    color: #b21414;
    font-size: 0.875em;
    line-height: 1.8em;
    width: 84%;
    margin: 0.6em auto;
}
.about-grid span.pen-icon{
    background-position: -44px 0px;
}
.about-grid span.cog-icon{
    background-position: -87px 0px;
}
.about-grid span.mon-icon{
    background-position: -128px 0px;
}
.about-grid label{
    width:1px;
    height:200px;
    background:#D9DBDB;
    display:inline-block;
    position:absolute;
    right:0;
    top:0;
}
/*----//about ----*/
/*---servies---*/
.services{
    background:#F0F0E8;
}

.service-head h2{
    color: #cc9900;
    font-weight: 900;
    font-size: 3em;
    margin: 0;
    padding: 0;
}
.service-head span {
    width: 162px;
    height: 9px;
    display: inline-block;
    background: url(../img/border-bg.png) no-repeat 0px 0px;
}
.service-head p {
    color: #cc9900;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.8em;
    margin: 1em 0;
}

.grid-left-bottom{
    background:url(../img/GloryHouse10.9.jpg) no-repeat 0px 0px;
    background-size:contain;
    height: 650px;
}

.grid-left{

}

/*--services-grid-left-grid--*/
.services-grid-left-grid{
    position:relative;
    padding:1em 0;
}
.services-grid-left-grid span{
    width:33px;
    height:34px;
    display:inline-block;
    /*background:url(../img/service-icon.png) no-repeat 0px 0px;*/
}
.services-grid-left-grid h3{
    margin:0;
    padding:0;
}
.services-grid-left-grid h3 a{
    color: #b21414;
    font-weight: 400;
    font-size: 1em;
    margin: 0.5em 0 0;
    display: inline-block;
}
.services-grid-left-grid h3 a:hover{
    text-decoration:none;
    color:#b21414;
}
.services-grid-left-grid p{
    color: #b21414;
    font-size: 0.875em;
    line-height: 1.8em;
    width:60%;
    margin: 0.6em 0;
}
.services-grid-left-grid span.search{
    background-position: -38px 0px;
}
.services-grid-left-grid span.clock{
    background-position: -83px 0px;
}
.services-grid-left-grid span.chart{
    background-position: -124px 0px;
}
 .grid-right-graphic {
    background:url(../img/ChuzzyPeriscope.jpg) no-repeat 0px 0px;
    background-size:cover;
    height: 725px;
}

 .grid-right-ttj {
    background:url(../img/text2join3.jpg) no-repeat 0px 0px;
    background-size:cover;
    height: 650px;
}

/*---works---*/
.works{
    padding:4em 0 0 0;
}
.works-head h2{
    color:#cc9900;
    font-weight:900;
    font-size:3em;
    margin:0;
    padding:0;
}
.works-head span{
    width:162px;
    height:9px;
    display:inline-block;
    background:url(../img/border-bg.png) no-repeat 0px 0px;
}
.works-head p{
    color: #b21414;
    font-size: 1.2em;
    font-weight: 300;
    width: 40%;
    line-height: 1.8em;
    margin: 1em auto;
}
/*---- works-grids ----*/
.works-grid{
    padding: 0;
    position:relative;
}

div.works-grid.col-md-4{
    padding-left:0;
    padding-right: 0;
}

.works-grid img{
    width:100%;
}
.works-grid div.caption{
    display:none;
}
.works-grid:hover div.caption{
    display: block;
    margin:0;
    padding: 4em;
    height: 80%;
    width: 45%;
    text-align: center;
}
div.caption{
    position:absolute;
    top:0px;
    width:100%;
    background:rgba(204,0,0,.5);
}
div.caption h4{
    font-size:1.2em;
    color:#FFF;
    font-weight:bold;
}
div.caption p{
    color:#FFF;
    line-height:1.4em;
}
.works-grids{
    padding-top:0;
}
/*----contact---*/
.contact-head h2{
    color:#b21414;
    font-weight:900;
    font-size:3em;
    margin:0;
    padding:0;
}
.contact-head span{
    width:162px;
    height:9px;
    display:inline-block;
    background:url(../img/border-bg.png) no-repeat 0px 0px;
}
.contact-head p{
    color: #b21414;
    font-size: 1.2em;
    font-weight: 300;
    width: 40%;
    line-height: 1.8em;
    margin: 1em auto;
}
/*---- Contact-form ---*/
.Contact-form{
    background:#0B0B0B;
    padding:0;
    margin-top: 0;
}
.send-form{
    width:auto;
    margin:0;
}
.send-form span.text-box1{
    width:60%;
    display: inline-block;
}
.send-form span.text-box2{
    width:60%;
    display: inline-block;
}
.send-form span.text-box3{
    width:80%;
    display: inline-block;
}
.send-form label{
    display: block;
    border-bottom: 1px solid #7E8287;
    color: #7E8287;
    padding: 0.5em 0;
    font-size: 1.05em;
}
.send-form input[type="text"],.send-form textarea{
    width:100%;
    margin:0;
    padding:0.8em;
    border:none;
    background:#0B0B0B;
    outline:none;
    color:#7E8287;
}
.send-form textarea{
    border-bottom:1px solid #7E8287;
    resize:none;
    height:100px;
}
.send-form input[type="submit"]{
    background: #CFC91D;
    color: #0B1016;
    font-weight: 900;
    font-size: 1.2em;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    border: none;
    margin: 2.5em 0;
    padding: 0.6em 2.8em;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
}
.send-form input[type="submit"]:hover{
    background:#b21414;
    color:#FFF;
}
/*---- copy-right ----*/
.copy-right{
    background:#cc9900;
    padding:1.5em 0;
}
.copy-right p{
    color:#7E8287;
    font-size:0.9em;
    text-transform:uppercase;
    margin:0;
    padding:0;
}
.copy-right p a{
    color:#b21414;
}
.copy-right p a:hover{
    text-decoration:none;
    color:#7E8287;
}
#toTop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 14px;
    right: 3%;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border: none;
    text-indent: 100%;
    background: url("../img/to-top1.png") no-repeat 0px 0px;
}
#toTopHover {
    width: 40px;
    height: 40px;
    display: block;
    overflow: hidden;
    float: right;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}
.mailing-list{
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 0;
}

/*---- media queries, responsive-design ----*/
@media (max-width:1440px){
    .banner-info {

    }
    .grid-left {
        padding: 3em 5em;
    }
    .works-grid:hover div.caption{
        margin:1em;
        padding: 3em;
        min-height:221px;
    }
}
@media (max-width:1366px){
    .banner-info {
        left: 16%;
    }
    .grid-left {
        padding: 3em 4em;
    }
    .works-grid:hover div.caption{
        margin:1em;
        padding: 2.5em;
        min-height:210px;
    }
}
@media (max-width:1280px){
    .banner-info {
        left: 13%;
    }
    .grid-left {
        padding: 2em 2em;
    }
    .works-grid:hover div.caption{
        margin:1em;
        padding: 2.2em;
        min-height:190px;
    }
    .banner {
        min-height: 613px;
    }
    .works-head p {
        width: 50%;
    }
}
@media (max-width:1024px){
    .banner-info {
        left: 8%;
    }
    .grid-left {
        padding: 1em 2em;
    }
    .works-grid:hover div.caption{
        margin:1em;
        padding:0.5em;
        min-height:150px;
    }
    .banner {
        min-height: 613px;
    }
    .works-head p {
        width: 60%;
        margin: 0em auto;
    }
    .banner-info h1 {
        font-size: 4.5em;
    }
    .about-head h2,.service-head h2,.works-head h2{
        font-size: 2.2em;
    }
    .about-head p {
        font-size: 1em;
        width: 90%;
    }
    .about {
        padding: 1.8em 0 2em;
    }
    .works {
        padding: 1.8em 0;
    }
}
@media (max-width:768px){
    .banner-info {
        left: 10.5%;
    }
    .grid-left {
        padding: 1em 2em;
    }
    .works-grid:hover div.caption{
        margin:1em;
        padding:0.5em;
        min-height:150px;
    }
    .banner {
        min-height: 526px;
    }
    .works-head p {
        width: 80%;
        margin: 0em auto;
        font-size: 1em;
    }
    .banner-info h1 {
        font-size: 3.2em;
    }
    .about-head h2,.service-head h2,.works-head h2{
        font-size: 1.8em;
    }
    .about-head p {
        font-size: 1em;
        width: 90%;
    }
    .about {
        padding: 1em 0;
    }
    .works {
        padding: 1em 0;
    }
    .top-header {
        padding: 0em 0 1.7em;
    }
    .logo {
        margin-top: 0.5em;
    }
    .banner-info p {
        font-size: 1.8em;
    }
    .services-grid-left-grid p {
        width: 100%;
    }
    .services-grid-left-grid {
        padding: 0.5em 0;
    }
    .grid-right {
        display:none;
    }
    .about-grids {
        padding: 0em 0 0em;
    }
    .service-head p {
        font-size: 1em;
        margin: 0.4em 0;
    }
    .works-grid:nth-child(2),.works-grid:nth-child(3),.works-grid:nth-child(4),.works-grid:nth-child(5),.works-grid:nth-child(6){
        display:none;
    }
    .contact-head h2 {
        font-size: 1.8em;
    }
    .contact-head p {
        font-size: 1em;
        width: 80%;
        line-height: 1.5em;
    }
    .Contact-form {
        padding: 1em 0 1em;
        margin-top: 1.5em;
    }
    .send-form {
        width: 90%;
    }
    .copy-right {
        padding: 1em 0;
    }
    .send-form input[type="submit"] {
        margin: 1.5em 0;
    }
}
@media (max-width:640px){
    .banner-info {
        left: 7.5%;
        top: 23%;
    }
    .grid-left {
        padding: 1em 2em;
    }
    .works-grid:hover div.caption{
        margin: 2em 0 0 2em;
        padding:0.5em;
        min-height:150px;
    }
    .banner {
        min-height: 450px;
    }
    .works-head p {
        width: 80%;
        margin: 0em auto;
        font-size: 1em;
    }
    .banner-info h1 {
        font-size: 2.8em;
    }
    .about-head h2,.service-head h2,.works-head h2{
        font-size: 1.8em;
    }
    .about-head p {
        font-size: 1em;
        width: 90%;
        margin:0.5em auto;
        line-height: 1.5em;
    }
    .about {
        padding: 1em 0;
    }
    .works {
        padding: 1em 0;
    }
    .top-header {
        padding: 0em 0 1.7em;
    }
    .logo {
        margin-top: 0.5em;
    }
    .banner-info p {
        font-size: 1.8em;
    }
    .services-grid-left-grid p {
        width: 100%;
    }
    .services-grid-left-grid {
        padding: 0.5em 0;
    }
    .grid-right {
        display:none;
    }
    .about-grids {
        padding: 0em 0 0em;
    }
    .service-head p {
        font-size: 1em;
        margin: 0.4em 0;
    }
    .works-grid:nth-child(2),.works-grid:nth-child(3),.works-grid:nth-child(4),.works-grid:nth-child(5),.works-grid:nth-child(6){
        display:none;
    }
    .contact-head h2 {
        font-size: 1.8em;
    }
    .contact-head p {
        font-size: 1em;
        width: 80%;
        line-height: 1.5em;
    }
    .Contact-form {
        padding: 1em 0 1em;
        margin-top: 1.5em;
    }
    .send-form {
        width: 90%;
    }
    .copy-right {
        padding: 1em 0;
    }
    .send-form input[type="submit"] {
        margin: 1.5em 0;
    }
    .about-grid {
        position: relative;
        padding: 0.5em 0;
    }
}
@media (max-width:480px){
    .banner-info {
        left: 7.5%;
        top: 23%;
    }
    .grid-left {
        padding: 1em 2em;
    }
    .works-grid:hover div.caption{
        margin: 1.5em 0 0 1.5em;
        padding: 0.5em;
        min-height: 150px;
    }
    .banner {
        min-height: 380px;
    }
    .works-head p {
        width: 80%;
        margin: 0em auto;
        font-size: 1em;
    }
    .banner-info h1 {
        font-size: 2.2em;
    }
    .about-head h2,.service-head h2,.works-head h2{
        font-size: 1.5em;
    }
    .about-head p {
        font-size: 1em;
        width: 90%;
        margin:0.5em auto;
        line-height: 1.5em;
    }
    .about {
        padding: 1em 0;
    }
    .works {
        padding: 1em 0;
    }
    .top-header {
        padding: 0em 0 1.7em;
    }
    .logo {
        margin-top: 0.5em;
    }
    .banner-info p {
        font-size: 1.3em;
    }
    .services-grid-left-grid p {
        width: 100%;
    }
    .services-grid-left-grid {
        padding: 0.5em 0;
    }
    .grid-right {
        object-fit: cover;
    }
    .about-grids {
        padding: 0em 0 0em;
    }
    .service-head p {
        font-size: 1em;
        margin: 0.4em 0;
    }
    .works-grid:nth-child(2),.works-grid:nth-child(3),.works-grid:nth-child(4),.works-grid:nth-child(5),.works-grid:nth-child(6){
        display:none;
    }
    .contact-head h2 {
        font-size: 1.8em;
    }
    .contact-head p {
        font-size: 1em;
        width: 80%;
        line-height: 1.5em;
    }
    .Contact-form {
        padding: 1em 0 1em;
        margin-top: 1.5em;
    }
    .send-form {
        width: 90%;
    }
    .copy-right {
        padding: 1em 0;
    }
    .send-form input[type="submit"] {
        margin: 1.5em 0;
    }
    .about-grid {
        position: relative;
        padding: 0.5em 0;
    }
    .send-form span.text-box1,.send-form span.text-box2 {
        width: 80%;
    }
    .send-form input[type="submit"] {
        font-size: 1.1em;
        padding: 0.6em 2.2em;
    }
}
@media (max-width:320px){
    .banner-info {
        left: 6.6%;
        top: 10%;

    }
    .grid-left {
        padding: 1em 2em;
    }
    .works-grid:hover div.caption{
        margin: 1em 0 0 1em;
        padding: 0.5em;
        min-height: 150px;
    }
    .banner {
        min-height: 320px;
    }
    .works-head p {
        width: 80%;
        margin: 0em auto;
        font-size: 1em;
    }
    .banner-info h1 {
        font-size: 1.4em;
        margin: 0.2em 0 0.4em;
    }
    .about-head h2,.service-head h2,.works-head h2{
        font-size: 1.2em;
    }
    .about-head p {
        font-size: 0.9em;
        width: 100%;
        margin: 0.3em auto;
        line-height: 1.5em;
    }
    .about {
        padding: 1em 0;
    }
    .works {
        padding: 1em 0;
    }
    .top-header {
        padding: 0em 0 1.7em;
    }
    .logo {
        margin-top: 0.5em;
    }
    .banner-info p {
        font-size: 1em;
    }
    .services-grid-left-grid p {
        width: 100%;
    }
    .services-grid-left-grid {
        padding: 0.5em 0;
    }
    .grid-right {
        display:none;
    }
    .about-grids {
        padding: 0em 0 0em;
    }
    .service-head p {
        font-size: 0.9em;
        margin: 0.4em 0;
    }
    .works-grid:nth-child(2),.works-grid:nth-child(3),.works-grid:nth-child(4),.works-grid:nth-child(5),.works-grid:nth-child(6){
        display:none;
    }
    .contact-head h2 {
        font-size: 1.2em;
    }
    .contact-head p {
        font-size: 0.9em;
        width: 90%;
        line-height: 1.5em;
        margin: 0 auto;
    }
    .Contact-form {
        padding: 1em 0 1em;
        margin-top: 1.5em;
    }
    .send-form {
        width: 100%;
    }
    .copy-right {
        padding: 1em 0;
    }
    .send-form input[type="submit"] {
        margin: 1.5em 0;
    }
    .about-grid {
        position: relative;
        padding: 0.5em 0;
    }
    .send-form span.text-box1,.send-form span.text-box2 {
        width: 90%;
    }
    .send-form input[type="submit"] {
        font-size: 0.9em;
        padding: 0.7em 2.2em;
    }
    a.bannner-btn {
        padding: 0.8em 1.5em;
        font-size: 0.9em;
    }
    .about-head p label {
        font-size: 1.1em;
    }
    .about-grid label {
        display:none;
    }
    .about-grid p {
        line-height: 1.5em;
        margin: 0.4em auto;
        width:100%;
    }
    .services-grid-left-grid h3 a {
        font-size: 0.9em;
    }
    .send-form label {
        border-bottom: 1px solid #7E8287;
        padding: 0.3em 0;
        font-size: 0.95em;
    }
    .send-form input[type="submit"],.send-form input[type="text"],.send-form textarea{
        -webkit-appearance:none;
    }

ul {
    overflow: auto;
}

ul li {
    list-style-type: none;
    float: left;
}

ul li a i {
    background: #205D7A;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 25px;
    text-align: center;
    margin-right: 10px;
    padding-top: 15%;
    transition: all 0.2s ease-in-out;
}
ul li a i:hover {
    opacity: .7;
}