/* ----------------------------------------------------------------------------------------
* Author        : Ambidextrousbd
* Template Name : Nioti | One Page Multipurpose Html Template
* File          : Nioti main CSS file
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */





/* INDEX
----------------------------------------------------------------------------------------

01. General css

02. Navigation area css

03. Slider area css

04. About area css

05. Service area css

06. Portfolio/work area css

07. Team Area Css

08. Fun facts area css

09. Pricing area css

10. Testimonial area css

11. News area css

12. Video area css

13. Clients area css

14. Subsicribe area css

15. Contact area css

16. Google map area css

17. footer area css

-------------------------------------------------------------------------------------- */


/* Google Fonts lato and open sans */
@import url('https://fonts.googleapis.com/css?family=Lato:300,700,900|Open+Sans');



/* ----------------------------------------------------------------------------------------
*                                       01. General css
* -------------------------------------------------------------------------------------- */





.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
    outline: none;
   
}

.btn, input[type='submit'] {
    display: inline-block;
    background: transparent;
    padding: 10px 25px;
    font-weight: 300;
    border-radius: 0px;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    color: #fff;
    background: #72163b;
    border: none;
    font-family: 'Lato';
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn.btn-trnsp {
    background: transparent;
    border: 1px solid #000;
    color: #000;
}

.btn-big {
    border: 2px solid #000;
    font-size: 20px;
    font-weight: 900;

}

.btn.btn-trnsp:hover {
    border-color: #72163b;
    background: #72163b;
    color: #fff;
}



/* preloader css */

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background-image: url(../img/preloader.gif);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
}

.table {
    display: table;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.table-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

img {
    max-width: 100%;
     
}



/* ----------------------------------------------------------------------------------------
*                               02. Navigation area css
* --------------------------------------------------------------------------------------- */
.top-bar {
    position: relative;
    margin-bottom: -70px;
    height: 70px;
    line-height: 70px;
    z-index: 2;
    color: inherit;
    background: transparent;
    overflow: hidden;
}

.tmail, .tphone, .tsocial {
    float: left;
    width: 33.33%;
    color:white;
}
.tmail {}
.tphone {
    text-align: center;
}
.tsocial {
    text-align: right;
}
.tsocial a {
    color: inherit;
}
.tsocial a:hover {
    color: #72163b;
}
.tsocial a i.fa {
    font-size: 16px;
    margin-left: 5px;
}


.menu-area.navbar-fixed-top {
    background: #fff;
    top: 14px;
    height: 155px;
}
.menu-area.navbar-fixed-top.sticky-menu {
    top: 0px;
    height: 150px;
}

.sticky-menu {
    box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24);
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

.mainmenu {
  
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

.sticky-menu .mainmenu {
    padding-top: 0px;
}

.navbar {
    margin-bottom: 0;
    border: 0px;
    margin-top: 13px;
}

.sticky-menu .navbar {
    margin-top: 8px;
}

.navbar-brand {
    padding: 0;
    margin-top:-10px;
}

.navbar-brand:hover {
    color: #72163b;
}

.navbar-nav  li {
    float: none;
    display: inline-block;
}

.navbar-nav li a {
    color: #333;
    font-weight: 900;
    font-family: 'Lato';
    font-size: 14px;
}

.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
    background: none;
}

.mainmenu .navbar-nav li.active a {
    color: #72163b;
}


/* Mobile Nav css */
.navbar-toggle .icon-bar {
    background: #72163b;
}


/* ----------------------------------------------------------------------------------------
*                               04. About area css
* ---------------------------------------------------------------------------------------*/

.about-area {
    background: #fff;
}

.about-img img {
    width: 100%;
    border-radius:25px;
}
.about-text h3 {
    margin-top: 0px;
}

.about-text ul {
    margin-top: 10px;
    margin-left: 30px;
    list-style: none;
}

.about-text ul li {
    line-height: 30px;
    position: relative;

}

.about-text ul li:before {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    left: -30px;
    top: 50%;
    margin-top: -5px;
    border: 2px solid #333;
    border-radius: 50px;
}
.about-text .btn {
    margin-top: 20px;
}






/* ----------------------------------------------------------------------------------------
*                               06. Portfolio/work area css
* --------------------------------------------------------------------------------------- */
.works.section-big {
    padding-bottom: 0px;
    margin-bottom:80px;
}
.portfolio .mix {
    display: none;
}

.filters {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    margin-bottom: 10px;
}

.filters li {
    display: inline-block;
    margin: 0px 15px;
    margin-bottom: 10px;
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    font-weight: bold;
}

.filters li.active {
    color: #72163b;
}

.work-items .item {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
}

.work-items .item img {
    width: 100%;
    transition: 0.8s ease-out;
    border-radius:25px;
}

.work-items .overlay{
    background-color: rgba(0, 110, 95, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    text-align: center;
    opacity: 0;
    transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
    -ms-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
    -moz-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
    -webkit-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
}

.work-items .item:hover .overlay {
    opacity: 1;
    width: 100%;
    height: 100%;
}

.work-items .item:hover img {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
}

.work-items .overlay i.fa {
    font-size: 17px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;    
    padding: 5px;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    text-transform:uppercase !important;
    font-weight:bold;
}