/*-----------------------------------------------------------------------------------
Template Name: Shamrat One Page HTML5 Template 
Template URI: http://workertm.com
Description: This is html5 template
Author: workertm
Author URI: http://workertm.com
Version: 1.0
-------------------------------------------------------------------------------------
=========================================================
	
=================== CSS INDEX ===========================

=========================================================
	01. GOOGLE FONTS
	02. RESET CSS
	03. Default CSS
	04. PRELOADERS CSS
	05. ALL IMAGE
	06. HEADER AREA CSS
	07. SLIDER AREA CSS
	08. ABOUT AREA CSS
	09. SERVICES AREA CSS
	10. SUBSCRIBE AREA CSS
	11. PORTFOLIO AREA CSS
	12. COUNTER AREA CSS
	13. OUR TEAM AREA CSS
	14. PRICING TABLE AREA CSS
	15. OUR BLOG AREA CSS
	16. CONTACT FORM AREA CSS
	17. CLIENT SLIDER AREA CSS
	18. FOOTER AREA CSS
----------------------------------------------------------------------------------------*/
/*--------------------
   01. GOOGLE FONTS
----------------------*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600,700');
/*--------------------
   02. RESET CSS
----------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
a:focus {
    outline: 0px solid
}
img {
    max-width: 100%;
    height: auto
}
p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    margin: 0 0 15px;
    color: #6f6f6f;
    font-weight: 400;
    line-height: 23px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px;
    font-family: 'Montserrat', sans-serif;
}
a {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active,
a:hover {
    outline: 0 none;
}
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0
}
body {
    font-family: 'Montserrat', Open Sans;
}
/*--------------------
   03. Default CSS
----------------------*/
.no-marg {
    margin-right: 0px;
    margin-left: 0px;
}
.sec-p-100 {
    padding: 100px 0px
}
.sec-p-50 {
    padding: 50px 0px
}
.pb-50 {
    padding-bottom: 50px
}
.pb-100 {
    padding-bottom: 100px
}
.pt-0 {
    padding-top: 0px !important;
}
.pt-100 {
    padding-top: 100px
}
.mt-35 {
    margin-top: 35px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-100 {
    margin-top: 100px;
}
.mb-20 {
    margin-bottom: 20px
}
.mb-40 {
    margin-bottom: 40px
}
.b-l {
    border-left: 2px solid #c02728;
    padding-left: 14px;
}
.b-r {
    border-right: 2px solid #c02728;
    padding-right: 14px;
}
.section-title {
    margin-bottom: 50px;
}
.section-title h3 {
    font-size: 30px;
    font-weight: 600;
    font-family: Montserrat;
    text-transform: uppercase;
    margin-bottom: 15px;
    line-height: 22px;
    color: #303133;
}
.section-title h2 {
    font-size: 35px;
    font-weight: 600;
    line-height: 35px;
    margin: 0px;
}
.buy-btn {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    background: #f3f3f3;
    padding: 14px 35px;
    color: #c02728;
    display: inline-block;
    border-radius: 5px;
    position: relative;
}
.buy-btn:after {
    position: absolute;
    content: "";
    border-bottom: 3px solid #c02728;
    left: 20px;
    right: 20px;
    bottom: 0px;
}
.bg-f9f9f9 {
    background: #f9f9f9;
}
/*--------------------
   04. PRELOADERS CSS
----------------------*/
.preloader {
    background: #000 none repeat scroll 0 0;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 9999;
}
.preloader .spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}
.spinner > div {
    background-color: #fff;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}
.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1.0)
    }
}
@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}
/*--------------------
   05. ALL IMAGE
----------------------*/
.slide-bg-1 {
    background-image: url(assets/img/slide-1.jpg)
}
.slide-bg-2 {
    background-image: url(assets/img/slide-2.jpg)
}
.subscribe-bg {
    background-image: url(assets/img/bg2.jpg)
}
.services-bg {
    background-image: url(assets/img/services/services-bg.png)
}
.counter-bg {
    background-image: url(assets/img/bg.jpg)
}
/*--------------------
   06. HEADER AREA CSS
----------------------*/
.navbar-fixed-top {
    transition: all 0.3s ease-in-out;
}
header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}
.header-area {
    position: relative;
    z-index: 2;
}
.header-area:before {
    background-color: #fff;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
}
.logo {
    margin: 5px 0px;
}
.main-menu ul li {
    position: relative;
    display: inline-block;
}
.main-menu ul li:after {
    border-bottom: 1px solid #c02728;
    position: absolute;
    content: "";
    left: 0px;
    bottom: 0px;
    width: 100%;
    visibility: hidden;
    opacity: 0;
}
.main-menu ul li:hover:after {
    visibility: visible;
    opacity: 1;
}
.main-menu ul li a {
    color: #000;
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    padding: 25px 20px;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
}
/*--------------------
   07. SLIDER AREA CSS
----------------------*/
.single-slider-item {
    background-position: 50% 0%;
    background-size: cover;
    color: #fff;
    font-size: 24px;
    height: 800px;
}
.single-slider-table {
    display: table;
    height: 100%;
    width: 100%;
}
.slider-tablecell {
    display: table-cell;
    vertical-align: middle;
}
.single-slider-item h3 {
    color: #fff;
    font-size: 35px;
    font-family: Montserrat;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 40px;
    margin: 0px;
}
.single-slider-item h2 {
    color: #fff;
    font-size: 52px;
    font-family: Montserrat;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 57px;
}
.single-slider-item h2 span {
    color: #c02728;
}
.all-slider .owl-nav div {
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease 0s;
    text-align: center;
    line-height: 24px;
    font-size: 12px !important;
    background: rgba(0, 0, 0, 0.36) !important;
    border-radius: 0px !important;
}
.all-slider .owl-nav div.owl-next {
    left: auto;
    right: 0;
}
.slid-social {
    position: absolute;
    left: 0px;
    bottom: 50px;
    width: 100%;
}
.slid-social li {
    display: inline-block;
}
.slid-social li a {
    padding: 0px 5px;
    font-size: 14px;
    color: #fff;
}
.slid-social li a i {
    line-height: 20px;
}

/*--------------------
   08. ABOUT AREA CSS
----------------------*/
.about-content-box h2 {
    font-size: 30px;
    font-family: Montserrat;
    font-weight: 700;
    color: #303133;
}
.about-img {
    position: relative;
}
.about-img img {
    border-radius: 20px;
    width: 100%;
}
.aboutleft-text {
    background: #fff none repeat scroll 0 0;
    border: 5px solid #0f76f7;
    left: -40%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.aboutleft-text h4 {
    font-size: 30px;
    padding: 35px;
    margin: 0px;
    font-family: Montserrat;
    font-weight: 700;
    color: #303133;
}
.aboutleft-text h4 span {
    color: #c02728;
}
/*--------------------
   09. SERVICES AREA CSS
----------------------*/
.single-services-box .services-icon {
    display: inline-block;
    margin: 30px 0px;
    border: 1px solid #d9dbda;
    transform: rotate(-45deg);
    width: 80px;
    height: 80px;
    text-align: center;
    vertical-align: middle;
    line-height: 80px;
}
.single-services-box i {
    font-size: 24px;
    line-height: 24px;
    transform: rotate(45deg);
}

.single-services-box .services-icon:hover {
	border-color: #c02728;
}
/*--------------------
   10. SUBSCRIBE AREA CSS
----------------------*/
.subscribe-area {
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    padding: 90px 0px;
}
.subscribe-area:before {
    content: "";
    position: absolute;
    left: 0px;
    background: #060606;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: .9;
}
.subscribe-text {
    margin: 15px 0px;
}
.subscribe-text h3 {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    margin: 0px;
}
.subscribe-text h3 span {
    color: #c02728;
}
.subscribe-form input {
    background: transparent;
    border: 2px solid #f1f1f1;
    padding: 20px 17px;
    border-radius: 5px;
    width: 70%;
    font-size: 15px;
    font-family: Montserrat;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
}
.subscribe-form button {
    text-transform: uppercase;
    color: #fff;
    font-size: 15px;
    font-family: Montserrat;
    font-weight: 700;
    background: transparent;
    border: 2px solid #f1f1f1;
    padding: 20px 17px;
    border-radius: 5px;
    margin-left: -6px;
}
.subscribe-area a {
    text-transform: uppercase;
    color: #c02728;
    font-size: 15px;
    font-family: Montserrat;
    font-weight: 700;
    background: transparent;
    border: 2px solid #c02728;
    padding: 20px 17px;
    border-radius: 5px;
    margin-left: -6px;
}
/*--------------------
   11. PORTFOLIO AREA CSS
----------------------*/
.mesonari-menu {
    margin-bottom: 25px;
}
.mesonari-menu li {
    display: inline-block;
    text-transform: uppercase;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    cursor: pointer;
    padding: 15px;
}
.mesonari-menu li:hover,
.active {
    color: #c02728
}
.mesonari-menu li:first-child {
    padding-left: 0px;
}
.mesonari-menu li:last-child {
    padding-right: 0px;
}
.portfolios {
    margin: 0 auto;
}
.portfolios-item {
    margin-bottom: 30px;
}
.single-portfolio {
    position: relative;
    cursor: pointer;
}
.single-portfolio img {
    border-radius: 10px;
    width: 100%;
}
.single-portfolio:before {
    position: absolute;
    content: "";
    border: 2px solid #fff;
    border-radius: 10px;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    -webkit-transition: .3s all;
    transition: .3s all;
    visibility: hidden;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.single-portfolio:hover:before {
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.port-hvr-social {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    background: #0f76f7;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .3s all;
    transition: .3s all;
}
.single-portfolio:hover .port-hvr-social {
    visibility: visible;
    opacity: 1;
}
.port-hvr-social li {
    display: inline-block;
    text-align: center;
    transition: .3s all;
}
.port-hvr-social li a {
    color: #fff !important;
    padding: 8px 15px;
    display: block;
}
.port-hvr-social li:hover {
    background: #fff;
}
.port-hvr-social li:hover a i {
    color: #0f76f7
}
.port-hvr-social li a i {
    color: #fff;
    font-size: 16px;
}
/*--------------------
   12.COUNTER AREA CSS
----------------------*/
.counter-bgd {
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    height: 100%;
}
.counter-bgd:before {
    content: "";
    position: absolute;
    left: 0px;
    background: #060606;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: .9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.single-counter {
    margin: 93px 0px;
    border: 2px solid #c02728;
    padding: 70px 60px;
}
.single-counter i {
    color: rgb(255, 255, 255);
    font-size: 25px;
    line-height: 10px;
    margin: 15px 0px;
    display: inline-block;
}
.counter {
    color: #FFF;
    font-size: 40px;
    font-family: Montserrat;
    font-weight: 700;
    line-height: 40px;
}
.count-name {
    font-family: Montserrat;
    font-weight: 400;
    color: #FFF;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 40px;
}
/*--------------------
   13. OUR TEAM AREA CSS
----------------------*/
.single-team {
    position: relative;
    cursor: pointer;
}
.single-team::before {
    content: "";
    position: absolute;
    background: rgba(0, 150, 255, 0.72);
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
    transition: .3s all;
}
.single-team:hover::before {
    transform: scale(1);
    visibility: visible;
    opacity: 1;
}
.hvr-link {
    left: 0px;
    right: 0px;
    transform: translateY(-50%);
    content: "";
    position: absolute;
    top: 50%;
}
.single-team:hover .hvr-link a {
    visibility: visible;
    opacity: 1;
}
.hvr-link a {
    display: inline-block;
    font-size: 24px;
    color: rgb(255, 255, 255);
    border: 2px solid rgb(255, 255, 255);
    padding: 10px;
    border-radius: 50%;
    line-height: 24px;
    visibility: hidden;
    opacity: 0;
    transition: .3s all;
}
.team-img img {
    width: 100%
}
.hvr-team {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -35px;
    background: #000 none repeat scroll 0% 0%;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    transition: .3s all;
}
.hvr-team h4 {
    font-size: 15px;
    margin: 0px;
    display: block;
    padding: 10px 0px;
    color: rgb(255, 255, 255);
    font-weight: 600;
    line-height: 15px;
}
.single-team:hover .hvr-team {
    bottom: 0px;
    visibility: visible;
    opacity: 1;
}
/*--------------------
   14. PRICING TABLE AREA CSS
----------------------*/
.pricing-table-box {
    border: 2px solid #282828;
    border-radius: 15px;
    transition: .3s all;
    cursor: pointer;
}
.price-title {
    height: 50px;
    width: 90%;
    border-radius: 0 0 100px 100px;
    background: #000;
    margin: 0px auto;
    transition: .3s all;
}
.price-title h3 {
    color: #fff;
    margin: 0px;
    padding: 8px 0px;
    text-transform: uppercase;
    font-size: 30px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}
.table-price {
    margin: 15px 0px;
}
.table-price h4 {
    margin: 0px;
    font-size: 35px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}
.table-price h4 sup {
    font-size: 22px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    top: -15px;
}
.table-price h4 sub {
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.table-service {
    margin: 20px 0px;
}
.table-service li {
    display: block;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    margin: 10px 0;
    color: #1d1d1d;
}
.pricing-table-box a {
    display: block;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    background: #000;
    color: #fff;
    border-radius: 0px 0px 12px 12px;
    padding: 20px 0px;
    transition: .3s all;
}
.pricing-table-box:hover {
    border-color: #c02728;
}
.pricing-table-box:hover .price-title,
.pricing-table-box:hover.pricing-table-box a {
    background: #c02728;
}
/*--------------------
   15. OUR BLOG AREA CSS
----------------------*/
.blog-img {
    position: relative;
}
.blog-img img {
    width: 100%;
}
.hvr-title {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -28px;
    background: #000 none repeat scroll 0% 0%;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    transition: .3s all;
}
.hvr-title h4 {
    font-size: 15px;
    margin: 0px;
    display: block;
    padding: 10px 0px;
    color: rgb(255, 255, 255);
    font-weight: 600;
    line-height: 15px;
}
.single-blog p {
    padding: 15px 50px;
    margin: 0;
}
.single-blog:hover .hvr-title {
    background: #c02728 none repeat scroll 0% 0%;
    bottom: 0px;
    visibility: visible;
    opacity: 1;
}
/*--------------------
   16. CONTACT FORM AREA CSS
----------------------*/
.form-control {
    background: transparent;
    margin-bottom: 20px;
    border-radius: 0px;
    color: #000;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid #c02728;
    outline: 0;
}
.contact-form textarea {
    border: 1px solid #c02728;
    margin-top: 20px;
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control.text-left {
    position: relative;
}
.form-control.text-left:before {
    position: absolute;
    content: "";
}
.contact-form {
    position: relative;
}
.contact-form span {
    position: absolute;
    background: #c02728;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    right: 0px;
    bottom: -6.5px;
}
.contact-form .left-left {
    left: 0px;
}
/*--------------------
   17. CLIENT SLIDER AREA CSS
----------------------*/
.single-client {
    padding: 20px;
    border: 1px solid #e5e3e4;
    margin: 0px 10px;
    -webkit-transition: .3s all;
    transition: .3s all;
    position: relative;
}
.single-client:before {
    content: "";
    position: absolute;
    border: 1px solid #fff;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    -webkit-transition: .3s all;
    transition: .3s all;
}
.single-client:hover {
    border-color: #c02728;
}
.single-client:hover:before {
    border-color: #c02728;
}
/*--------------------
   18. FOOTER AREA CSS
----------------------*/
.footer-top {
    background: #303133;
    padding: 25px 0px;
}
.footer-social li {
    display: inline-block;
    margin: 12px;
}
.footer-social li a {
    color: #fff;
    display: block;
    border: 1px solid #d9dbda;
    transform: rotate(-45deg);
    font-size: 24px;
    height: 50px;
    line-height: 50px;
    width: 50px;
    text-align: center;
}
.footer-social li a i {
    transform: rotate(45deg);
}
.footer-social {
    display: inline-block;
}
.footer-logo {
    display: inline-block;
}
.copuright-area {
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #060606;
    margin: 14px 0px;
}
.copuright-area a,
.copuright-area span {
    color: #c02728;
}

@media screen and (min-width:767px) {
    .main-menu {
        margin-top: 20px;
    }
}

.single-counter {
    padding: 20px;
/*     min-height: 260px; */
}
.single-counter p {
    color: #fff;
    padding-top: 15px;
}
.pricing-table-box {
    margin-bottom: 40px;
    min-height: 280px;
}
.pricing-table-box p {
    padding: 20px;
}