/*

 * A Design by GraphBerry

 * Author: GraphBerry

 * Author URL: http://graphberry.com

 * License: http://graphberry.com/pages/license

 */



/* Table of content

1.General - This is created general styles and overide some bootstrap classes.

2.Layout

 2.1 Animations

 2.2 Buttons

 2.3 Thumbnail - overide bootstrap thumbnail and add mased efect

 2.4 Socail icons -style for social icons list

3 Sections - definition for section and subsection

 3.1 Services

 3.2 Portfolio

 3.3 About

 3.4 Clients

 3.5 Price table

 3.6 Newsletter

 3.7 Contact

 3.8 Footer

4 Responsive 

**********************************************************************/



/*

1. General

**********************************************************************/

body {

    font-family: 'Roboto', sans-serif;

    color: #FFF;

    line-height: 1.2em;

    font-size: 17px;

    line-height: 20px;

}



a {

    color: #181A1C;

    text-decoration: none;

}



a:hover {

    color: #FECE1A;

    text-decoration: none;

}



h1, h2, h3, h4, h5, h6 {

    font-weight: normal;

}



#slide {

    text-transform: none;

    line-height: 1.5;

}



h1 {

    margin: 10px;

}



p {

    padding: 10px;

    font-weight: 100;

    color: #fff;

    line-height: 1.5;

    text-align: start;



}



.navbar {

    background: #181A1C;

    margin-bottom: 0;

    min-height: 70px;

}



.navbar-fixed-top {

    min-height: 60px;

    height: 60px;

    padding-top: 0;

}



.navbar-inner {

    background: #181A1C;

    border-radius: 0;

    filter: none;

    border: none;

    box-shadow: none;

}



.navbar .brand img {

    width: 120px;

    height: 40px;

}



.navbar .nav > li > a {

    text-transform: uppercase;

    line-height: auto;

    vertical-align: middle;

    margin: 10px 3px;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    border: 1px solid #181A1C;

    box-shadow: none;

    font-size: 15px;

    text-shadow: none;

    color: #fff;

    transition: border-color 1s ease;

}



.navbar .nav > li:hover> a, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {

    border: 1px solid #FECE1A;

    color: #fff;

    background-color: #181A1C;

    transition: border-color 1s ease;

}



.nav-pills {

    margin-bottom: 30px;

}



.nav-pills > li > a {

    background: transparent;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    border-radius: 0;

    margin-right: 5px;

    padding-left: 25px;

    padding-right: 25px;

    border: 1px solid #181A1C;

}



.nav-pills > li > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {

    background: #181A1C;

    color: #fff;

}



.navbar .btn-navbar:hover, .navbar .btn-navbar {

    border-radius: 0;

    background: #FECE1A;

    color: #000;

}



/******

2. Layout

**********************************************************************/

.centered {

    margin-left: auto;

    margin-right: auto;

    float: none;

    text-align: center;



}



/* Use this class if you want ceter element with span* class */

.center {

    float: none !important;

    margin: 0 auto !important;

    text-align: center;

}



.highlighted-box {

    background: #F4F8F9;

    padding: 20px 30px;

}



.highlighted-box h1 {

    margin: 0px;

}



.large-text {

    line-height: 1.2em;

    font-size: 30px;

    color: #181A1C;

    padding: 20px;

    margin-bottom: 20px;

}



.highlighted-box h1, .highlighted-box p {

    color: #181A1C !important;

}



.circle-border {

    display: inline-block;

    -webkit-border-radius: 500px;

    -moz-border-radius: 500px;

    border-radius: 500px;

    -khtml-border-radius: 500px;

    border: 3px solid #fff;

}



.left-align {

    text-align: left;

}



.right-align {

    text-align: left;

}



.error {

    color: #CF0000;

    display: none;

}



.invisible {

    display: none;

    visibility: visible;

}



.triangle {

    margin: 0 auto;

    text-align: center;

    width: 0;

    height: 0;

    border-top: 30px solid #181A1C;

    border-left: 585px outset transparent;

    border-right: 585px outset transparent;

    position: relative;

}



/*

2.1 Animations

**********/

.zoom-in {

    -webkit-transform: scale(1, 1);

    -moz-transform: scale(1, 1);

    -o-transform: scale(1, 1);

    -ms-transform: scale(1, 1);

    -webkit-transition: all 250ms ease;

    -moz-transition: all 250ms ease;

    -o-transition: all 250ms ease;

    -ms-transition: all 250ms ease;

    transition: all 250ms ease;

}



.zoom-in:hover {

    -webkit-transform: scale(1.1, 1.1);

    -moz-transform: scale(1.1, 1.1);

    -o-transform: scale(1.1, 1.1);

    -ms-transform: scale(1.1, 1.1);

}



/*

2.2 Buttons - There are buttons on a transparent background, primary and secondary color background.

**********/

.button, .button:visited, .button:focus {

    display: inline-block;

    border: 1px solid #181A1C;

    color: #181A1C;

    background-color: transparent;

    padding: 15px 30px;

    font-size: 17px;

    line-height: auto;

}



.button:hover, .button:active {

    background-color: #181A1C;

    color: #fff;

}



.button-sp, .button-sp:visited, .button-sp:focus {

    border: none;

    background-color: #FECE1A;

    color: #181A1C;

}



.button-sp:hover, .button-sp:active {

    background-color: #181A1C;

    color: #FECE1A;

}



.button-ps, .button-ps:visited, .button-ps:focus {

    border: none;

    background-color: #181A1C;

    color: #FECE1A;

}



.button-ps:hover, .button-ps:active {

    background-color: #FECE1A;

    color: #181A1C;

}



/*

2.3 Thumbnails - Predefined bootstrap's thumbnail class.

**********/

.thumbnail {

    width: 100%;

    height: 100%;

    padding: 0;

    overflow: hidden;

    position: relative;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    text-align: center;

    background: #191a1c;

}



.thumbnail .more {

    display: block;

    z-index: 4;

    position: absolute;

    top: -100px;

    left: 50%;

    margin: 0 auto;

    margin-left: -41px;

    width: 80px;

    height: 80px;

    font-size: 40px;

    color: #fff;

    text-decoration: none;

    line-height: 70px;

    text-align: center;

}



.thumbnail:hover .more {

    top: 40%;

    margin-top: -40px;

    -webkit-transition: all 0.3s ease-out;

    -moz-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    -ms-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;

}



.thumbnail h3,

.thumbnail p {

    margin: 0;

    padding: 0;

    position: relative;

    z-index: 4;

}



.thumbnail h3 {

    color: #FECE1A;

    margin-top: 10px;

    font-size: 20px;

}



.thumbnail > p {

    padding-bottom: 20px;

}



.thumbnail .mask {

    opacity: 0.85;

    filter: alpha(opacity = 85);

    top: 100%;

    left: 0;

    width: 100%;

    height: 100%;

    background: #181A1C;

    position: absolute;

    -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    -o-transition: all 0.2s ease-out;

    -ms-transition: all 0.2s ease-out;

    transition: all 0.2s ease-out;

}



.thumbnail:hover .mask {

    top: 0;

}



/*

2.4 Socail icons

************/

.social {

    list-style: none;

    float: none;

    position: relative;

    margin: 5px;

    auto;

}



.social li {

    display: inline-block;

    line-height: 32px;

    font-family: 'Porta';

    font-size: 32px;

    padding: 0 5px;

}



.social li a {

    margin: 0;

    padding: 0;

    width: 32px;

    height: 32px;

    color: #FECE1A;

}



.social li a:hover {

    color: #181A1C;

}



/*

3. Sections 

***************************************************************************/

.section {

    padding-bottom: 50px;

}



.section .container {

    padding-top: 50px;

}



.section .title {

    text-align: center;

    padding: 10px;

    margin-bottom: 30px;

}



.section .title h1 {

    font-weight: normal;

    margin-bottom: 20px;

    padding: 0;

}



.section .title > p {

    font-size: 20px;

    color: #FFF;

    font-weight: lighter;

}



.primary-section {

    background: #181A1C;

}



.primary-section .triangle {

    border-top: 40px solid #FECE1A;

}



.primary-section .title {

    border-bottom: 1px solid #FFF;

}



.primary-section, .primary-section .title p, .primary-section h3 {

    color: #FECE1A;

}



.primary-section h1 {

    color: #FFF;

}



.secondary-section {

    background: #FECE1A;

}



.secondary-section .title {

    border-bottom: 1px solid #181A1C;

}



.secondary-section h1, .secondary-section .title p {

    color: #181A1C;

}



/* Third section use bacground image */

.third-section {

    padding-bottom: 70px;

    background: #181A1C url(../images/brand-bg.png) no-repeat center;

    border-top: 6px solid #FECE1A;

}



.third-section .container {

    padding-top: 20px;

    position: relative;

}



.third-section .title {

    border-bottom: 1px solid #A1AAB7;

    color: #FECE1A;

}



.sub-section {

    margin-top: 30px;

}



.sub-section .title {

    padding: 0;

}



/*******

3.1 Services  

***************************************/

.service {

    margin-top: 20px;

}



.service, .service h2 {

    padding-top: 15px;

}



.service p {

    padding: 0px 50px;

    height: 60px;

}



.service img {

    width: 150px;

    height: 150px;

}



/*

3.2 Portfolio

***************************************/

.single-project {

    margin-bottom: 30px;

    background: #181A1C;

}



.single-project img {

    width: 100%;

}



.project-description {

    padding-right: 20px;

}



.project-description p {

    padding-left: 0;

}



.project-title {

    margin-top: 15px;

    margin-bottom: 15px;

    border-bottom: 1px solid #FECE1A;

}



.project-title h3 {

    float: left;

    margin-top: 0;

    padding: 0;

    width: 80%;

}



.project-title .close {

    color: #FECE1A;

    margin-top: 10px;

}



.project-info span, .project-title h3 {

    color: #FECE1A;

}



.project-info {

    font-weight: 100;

    padding: 10px 0;

}



.project-info span {

    width: 80px;

    display: inline-block;

}



.project-info div {

    margin-bottom: 5px;

}



.close {

    float: right;

    width: 40px;

    height: 40px;

    text-align: center;

}



#portfolio-grid .mix {

    opacity: 0;

    display: none;

}



/*

3.3 About

******************************************************************/

.team .thumbnail {

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    padding: 10px;

    border: 1px solid #fff;

}



.team .thumbnail:hover .social {

    z-index: 5;

}



.team .thumbnail:hover .social a {

    color: #fff;

}



.team .thumbnail .mask {

    background: #FECE1A;

}



.team .thumbnail .mask h2 {

    margin-top: 20%;

}



.team .thumbnail .mask, .team .thumbnail .mask h3, .team .thumbnail .mask p, .team .thumbnail:hover h3, .team .thumbnail:hover .social a:hover {

    color: #181A17;

}



.about-text {

    margin-top: 30px;

}



.about-text p {

    padding: 0;

    font-size: 16px;

}



/*********************************************************************

                        SKILLS BAR

*********************************************************************/

.skills {

    list-style-type: none;

    position: relative;

    margin: 0px;

}



.skills li {

    margin-bottom: 30px;

    background: #FFF;

    height: 40px;

    padding: 1px;

}



.skills li h3 {

    position: relative;

    font-size: 15px;

    padding: 0;

    margin: 0;

    left: 10px;

    z-index: 1;

    color: #181A1C;

}



.skills li .bar {

    height: 40px;

    position: absolute;

    background-color: #FECE1A;

}



/*

3.4 Clients

**********************************************************************/

.client-slider img {

    border: 1px solid white;

}



.client-slider img:hover {

    background-color: #FECE1A;

}



.client-nav {

    list-style: none;

    margin-top: 10px;

}



.client-nav li {

    float: left;

    display: block;

    margin-left: 10px;

}



.client-nav li a {

    display: inherit;

    padding: 5px;

    background: #FECE1A;

    border-radius: 3px;

    width: 20px;

    height: 20px;

}



.client-nav li a:hover {

    background: #181A1C;

}



.testimonial p {

    color: #181A1C;

    background: #FECE1A;

    padding: 15px;

    margin: 0;

}



.testimonial .arrow {

    margin-left: 10px;

    width: 0;

    border-top: 10px solid #FECE1A;

    border-left: 20px outset transparent;

    border-right: 20px outset transparent;

}



.testimonial .whopic {

    display: inline-block;

}



.testimonial .whopic img {

    margin-top: 10px;

    width: 50px;

    height: 50px;

    float: left;

}



.testimonial .whopic strong {

    float: left;

    margin-top: 10px;

    padding-left: 10px;

}



.testimonial .whopic small {

    display: block;

    font-size: 12px;



}



.testimonial-text {

    display: block;

    font-size: 22px;

    text-align: center;

    margin: 0 auto;

    margin-top: 30px;

    width: 70%;

    line-height: 1.3em;

}



/*

3.5 Price table

******************************************************************/

.price-table {

    margin-top: 70px;

    margin-bottom: 20px;

}



.price-column {

    background-color: white;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    padding-bottom: 20px;

    margin: 0 auto;

    text-align: center;

}



.price-column h3 {

    background-color: #181A1C;

    text-transform: uppercase;

    text-align: center;

    color: #FECE1A;

    padding: 40px 0px;

    font-size: 36px;

    margin-top: 0px;

    -moz-border-radius: 0px;

    -webkit-border-radius: 10px 10px 0px 0px;

    border-radius: 10px 10px 0px 0px;

}



.price-column .list {

    list-style: none;

    margin: 20px 50px;

}



.price-column .list li {

    font-weight: lighter;

    color: #747C89;

    font-size: 20px;

    border-bottom: 1px solid #747C89;

    padding: 25px 0px;

}



.price-column .list li.price {

    text-align: center;

    font-size: 31px;

    background-color: white;

    color: #747C89;

    margin-top: 25px;

}



.price-text {

    margin: 30px 0 20px;

    font-size: 20px;

    color: #181A1C;

    font-weight: normal;

}



/*

3.6 Newsletter

********************************************************************/

.newsletter, .newsletter h2 {

    color: #D7DDDE;

}



.newsletter .title h2 {

    text-align: left;

    padding: 0;

    margin: 0;

}



.newsletter form {

    text-align: right;

}



.newsletter input {

    margin-top: 10px;

    padding: 15px;

    height: auto;

}



.newsletter button {

    margin: 0 0 0 20px;

}



.newsletter .button-sp:hover, .newsletter .button-sp:active {

    background-color: #FFF;

    color: #181A1C;

}



/*

3.7 Contact

********************************************************************/

.contact {

    background: #FECE1A;

}



.contact h1, .contact h2, .contact h3, .contact h4, .contact h5, .contact h6, .contact .section .title > p, .contact .social > li > a {

    color: #181A1C;

}



.contact textarea, .contact input[type="text"], .contact input[type="email"] {

    padding: 10px;

    line-height: 20px;

    height: auto;

}



.contact textarea {

    height: 120px;

}



.contacts, .contact .social {

    color: #fff;

    list-style: none;

    margin-left: 10px;

}



.contacts > li {

    margin-top: 15px;

}



.contacts > li > a {

    color: #fff;

}



.contact-info {

    margin-top: 10px;

    margin-bottom: 10px;

}



.contact-info p {

    font-weight: normal;

}



.contact-info .icon {

    margin: 10px auto;

    font-size: 30px;

}



.map-wrapper {

    position: relative;

    height: 500px;

}



.map-canvas {

    position: absolute;

    margin-bottom: 20px;

    width: 100%;

    height: 500px;

    color: #29383F;

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

}



.contact .social {

    display: inline-block;

    margin-left: 0;

}



.contact .social li {

    line-height: 32px;

    padding: 10px 10px;

    font-family: 'Porta';

    font-size: 50px;

    transition: margin 0.4s;

    -webkit-transition: margin 0.4s;

}



.contact .social li a {

    color: #fff;

}



.contact .social li a:hover {

    color: #181A1C;

}



.contact-form {

    background: #fff;

    background: rgba(255, 255, 255, 0.9);

    z-index: 110;

    position: relative;

    margin-top: -25px;

    padding: 20px;

}



.contact-form h3 {

    color: #838589;

    padding-bottom: 20px;

}



.message-btn {

    border: 1px solid #747C89;

    color: #747C89;

    background-color: transparent;

    padding: 15px 30px;

    font-size: 17px;

}



.message-btn:hover {

    background-color: #FECE1A;

}



.contact-info {

    text-align: center;

    font-size: 22px;

}



.info-mail {

    border: 1px solid white;

    width: 60%;

    margin: 0 auto;

    padding: 15px;

    color: #181A1C;

}



.black {

    color: #181A1C;

}



/*

3.8 Footer

********************************************************************/

.footer {

   /* background: #181A1C;*/

    background: black;

    text-align: center;

}



.footer > p {

    color: #fff;

    margin: 0;

}



.scrollup {

    text-align: center;

    cursor: pointer;

    vertical-align: middle;

    width: 39px;

    height: 39px;

    border-radius: 5px;

    font-size: 20px;

    position: fixed;

    bottom: 70px;

    right: 20px;

    border: 1px solid #fff;

    display: none;

    background: #FECE1A;

}



.scrollup > a {

    position: relative;

    top: 7px;

    color: #fff;

}



/*

4 Responsible

********************************************************************/

@media (min-width: 1200px) {

    .thumbnail .more {

        margin-left: -41px;

        width: 80px;

        height: 80px;

        border-radius: 40px;

        line-height: 80px;

    }

}



@media (max-width: 979px) {

    body {

        padding-left: 0;

        padding-right: 0;

    }



    .navbar-fixed-top, .navbar-fixed-bottom {

        position: fixed;

    }



    .navbar .nav > li > a {

        line-height: 20px;

        vertical-align: middle;

    }



    .section {

        padding-left: 20px;

        padding-right: 20px;

    }



    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {

        margin-left: 0px;

        margin-right: 0px;

    }



    .nav-collapse {

        clear: both;

    }



    .nav-collapse .nav {

        float: none;

        margin: 0 0 10px;

    }



    .nav-collapse .nav > li {

        float: none;

    }



    .nav-collapse, .nav-collapse.collapse {

        width: 100%;

        display: inherit;

    }



    .thumbnail .more {

        margin-left: -21px;

        width: 40px;

        height: 40px;

        border-radius: 30px;

        line-height: 40px;

    }



    .thumbnail:hover .more {

        margin-top: -20px;

    }



    .newsletter form {

        text-align: center;

    }

}



@media (max-width: 767px) {

    .info-mail {

        width: 90%;

        padding: 15px 0px;

    }



    .project-description {

        padding-left: 20px;

    }



    .price-column, .testimonial {

        margin-top: 30px;

    }

}



.verse {

    font-style: italic;

    font-size: 12px;

}



.box {

    margin: 0 auto;

    max-width: 48rem;

    width: 90%;

    background-color: rgba(210, 210, 210, 0.20);

    padding-top: 10px;

    position: relative;

    top: 0;

    left: 0;

    text-align: center;

}



video {

    width: 100%;

    max-width: 500px;

    height: auto;

    text-align: center;



}



.blink-text {

    -moz-animation-duration: 500ms;

    -moz-animation-name: blink;

    -moz-animation-iteration-count: infinite;

    -moz-animation-direction: alternate;



    -webkit-animation-duration: 500ms;

    -webkit-animation-name: blink;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;



    animation-duration: 500ms;

    animation-name: blink;

    animation-iteration-count: infinite;

    animation-direction: alternate;

}



@-moz-keyframes blink {

  from {

    opacity: 1;

  }



  to {

    opacity: 0;

  }

}



@-webkit-keyframes blink {

  from {

    opacity: 1;

  }



  to {

    opacity: 0;

  }

}



@keyframes blink {

  from {

    opacity: 1;

  }



  to {

    opacity: 0;

  }

}



.js-video {

    height: 0;

    padding-top: 25px;

    padding-bottom: 38%;

    position: relative;

    overflow: hidden;

}



.js-video iframe, .js-video video {



    max-width: 100%;

    max-height: 100%;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-right: -50%;

    transform: translate(-50%, -50%)

}



.church-button {

    background: #000000;

    background-image: -webkit-linear-gradient(top, #000000, #000000);

    background-image: -moz-linear-gradient(top, #000000, #000000);

    background-image: -ms-linear-gradient(top, #000000, #000000);

    background-image: -o-linear-gradient(top, #000000, #000000);

    background-image: linear-gradient(to bottom, #000000, #000000);

    -webkit-border-radius: 10;

    -moz-border-radius: 10;

    border-radius: 10px;

    -webkit-box-shadow: 0px 1px 3px #000000;

    -moz-box-shadow: 0px 1px 3px #000000;

    box-shadow: 0px 1px 3px #000000;

    font-family: Arial;

    color: #ffffff;

    font-size: 22px;

    padding: 10px 20px 10px 15px;

    border: solid #000000 1px;

    text-decoration: none;

}



.church-button:hover {

    background: #6e6e34;

    text-decoration: none;

}



#map-canvas {

    background: transparent url(../images/gif-load.gif) no-repeat center center;

}



.roundbtn{

    background: #000000;

    background-image: -webkit-linear-gradient(top, #000000, #000000);

    background-image: -moz-linear-gradient(top, #000000, #000000);

    background-image: -ms-linear-gradient(top, #000000, #000000);

    background-image: -o-linear-gradient(top, #000000, #000000);

    background-image: linear-gradient(to bottom, #000000, #000000);

    -webkit-border-radius: 10;

    -moz-border-radius: 10;

    border-radius: 10px;

    -webkit-box-shadow: 0px 1px 2px #666666;

    -moz-box-shadow: 0px 1px 2px #666666;

    box-shadow: 0px 1px 2px #666666;

    font-family: Arial;

    color: #ffffff;

    font-size: 15px;

    padding: 10px 15px 10px 15px;

    text-decoration: none;

    vertical-align: top;

}



.tv_container {

    width: 400px; /* Adjust TV image width */

    height: 300px; /* Adjust TV image height */

    position: relative;

}

.tv_container:after {

    content: '';

    display: block;

    background: url('../images/lap.png') no-repeat top center transparent;

    width: 100%;

    height: 100%;

    left: 0px;

    top: 0px;

    position: absolute;

    z-index: 10;

    max-width: 100%;

    max-height: 100%;

}

.tv_container video {

    position: absolute;

    top: 30px; /* Adjust top position */

    left: 40px; /* Adjust left position */

    z-index: 5;

}

.box {

    margin: 0 auto;

    max-width: 48rem;

    width: 90%;

    background-color: rgba(210, 210, 210, 0.20);

    padding-top: 10px;

    position: relative;

    top: 0;

    left: 0;

}



a:visited {

    color: #6599FF;



}

a:hover {

    color: #6599FF;

}



.sharebtn{

    height: 100%;

    position: relative;

    right: 50%;

    top: -31%;



}

.copyleft{



    background: #181A1C url(../images/cleft.png) no-repeat center;



}