﻿/*=============================================================
    Authour URI: www.binarytheme.com
    License: Commons Attribution 3.0

    http://creativecommons.org/licenses/by/3.0/

    100% To use For Personal And Commercial Use.
    IN EXCHANGE JUST GIVE US CREDITS AND TELL YOUR FRIENDS ABOUT US
   
    ========================================================  */
/* =============================================================
   GENERAL STYLES
 ============================================================ */
body {
    font-family: 'Open Sans', sans-serif;
}

.pad-top {
    padding-top: 60px;
}

.pad-top-more {
    padding-top: 90px;
}

.text-center {
    text-align: center;
}
/*JUST ADDED PADDING IN SECTIONS OF TEMPLATE */
section {
    padding-top: 80px;
}

/* ADDED PADDING IN NAVBAR */
.navbar {
    background: url('../img/logo/title1.png');
    height: 110px;
    /*padding: 5px;*/
    padding-top: 40px;
    background-repeat: no-repeat;
    -webkit-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
    -ms-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
    /*-webkit-transition: background .8s ease-out,padding .8s ease-out;
    -moz-transition: background .8s ease-out,padding .8s ease-out;
    transition: background .8s ease-out,padding .8s ease-out;*/
}
/* CLASS FOR REMOVING PADDING IN NAVBAR*/
.navbar-pad-original {
    background-image: url('../img/logo/title2.png');
    background-repeat: no-repeat;
    padding-TOP: 20px;
    height: 82px;
}
/*========================================
    NAV BAR
    ======================================*/
.navbar-inverse .navbar-nav > li > a {
    color: #000;
}

.navbar-inverse {
    border-bottom: 2px solid;
    background-color: #FFF;
    border-color: #7eb9f8;
    font-size: 15px;
    text-transform: uppercase;
}

    .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
        color: #000000;
        background-color: transparent;
    }

    .navbar-inverse .navbar-brand {
        color: #000;
        font-size: 27px;
        font-weight: 900;
    }

.navbar .navbar-inverse .navbar-fixed-top {
    padding-top: 20px;
}

.navbar-inverse:hover .navbar-brand:hover {
    color: #000;
    background-color: rgba(0, 0, 0, 0.19);
}


.navbar-toggle {
    background-color: black;
}
/*CHANGING COLOR  SCROLLSPY ON LINK ACTIVE  */
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.19);
}

/*========================================
    HOME SECTION
    ======================================*/
#home {
    min-height: 700px;
    background-color: rgba(0, 0, 0, 0.18);
}

    #home h1, #home h3 {
        color: #fff;
        text-transform: uppercase;
    }

    #home a i {
        display: table;
        font-size: 150px;
    }
/*========================================
    ABOUT SECTION
    ======================================*/
#about {
    background-color: #66B8F0;
    color: #fff;
    min-height: 700px;
}

.panel > .panel-heading {
    position: relative;
    padding: 15px;
}

.panel-title > a.collapsed:after {
    content: '+';
    position: absolute;
    right: 24px;
}

.panel-title > a:after {
    content: '-';
    position: absolute;
    right: 24px;
}

.panel {
    color: #000;
}

/*========================================
    PORTFOLIO SECTION
    ======================================*/

#portfoliovz .container-fluid, 
#portfoliovz .col-sm-3  {
  overflow: hidden;
  padding: 0;
}

#portfoliovz .folio-item {
  position: relative;
}

#portfoliovz .overlay {
  background-color: #000;
  color: #fff; 
  left: 0;
  right:0;
  bottom:-100%;
  height: 0;
  position: absolute;
  text-align: center;
  opacity:0;  
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.overlay .overlay-content {
  display: table;
  height: 100%;
  width: 100%;
}

.overlay .overlay-text {
  display: table-cell;
  vertical-align: middle;
}

.overlay .folio-info {
  opacity: 0;
  margin-bottom: 75px;
  margin-top: -75px;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.overlay .folio-info h3 {
  margin-top: 0;
  color: #fff;
}

.folio-overview a {
  font-size: 18px;
  color: #333;
  height: 50px;
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  background-color: #fff;
  display: inline-block;
  margin-top: 20px;
  margin-right: 5px;
}

.folio-overview a:hover {
  color: #fff;
}

.folio-overview .folio-expand {
  margin-top: -500px;
  margin-left: -500px;
}

.folio-image, .folio-overview .folio-expand {
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

#portfolio .folio-item:hover .folio-image {
  -webkit-transform: scale(1.5) rotate(-15deg);
  transform: scale(1.5) rotate(-15deg);
}

.folio-image img {
  width: 100%;
}

#portfoliovz .folio-item:hover .overlay {
  opacity: 0.8;
  bottom: 0;
  height: 100%;
}

#portfoliovz .folio-item:hover .folio-overview .folio-expand {
  margin-top: 0;
  margin-left:0;
}

#portfoliovz .folio-item:hover .overlay .folio-info {
  opacity: 1;  
  margin-bottom:0;
  margin-top:0;
}


#single-portfoliovz {
  padding: 90px 0;
  background: #f5f5f5;
  position: relative;
}

#single-portfoliovz img {
  width: 100%;
  margin-bottom: 10px;
}

#single-portfoliovz .close-folio-item {
  position: absolute;
  top: 30px;
  font-size: 34px;
  width: 34px;
  height: 34px;
  left: 50%;
  color: #999;
  margin-left: -17px;
}

/*========================================
    CONTACT SECTION
    ======================================*/
/*#contact {
    min-height: 400px;
}

    #contact .form-control {
        height: 60px;
    }



.add {
    font-size: 20px;
    padding: 20px;
}*/
/*========================================
    FOOTER SECTION
    ======================================*/
#footer {
    background-color: #7eb9f8;
    color: #fff;
    padding: 20px 50px 20px 50px;
    text-align: right;
    border-top: 1px solid #7eb9f8;
}
