@charset "utf-8";
/* ----------------------------------
Name: main.style.css
Version: 2.0 - used as a base stylesheet
 
01. Google Fonts
02. Some Basics
03. Custom Classes - Helper Classes
04. Different Dividers
05. Preloader
06. Buttons Styles
07. Google Map
08. Grid Structure
09. Accordions
10. Tabs
11. Paginations
12. Different Blockquotes styles
13. Scroll Down Mouse
14. Go to top Arrow
15. Progress Bars 
16. Page Titles
17. Popup Modals
18. Parsley Form validation engine
---------------------------------- */

/* ---------------------------------
01. Google Fonts
 ---------------------------------*/

/* import google fonts */
@import url(https://fonts.googleapis.com/css?family=Hind+Madurai:300,400,500,600,700);
@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700i);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600);

/* font families to use direcly as classes */
.font-hind {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
}
.font-pt-serif {
    font-family: 'PT Serif', 'Segoe UI', 'Helvetica Neue', serif;
}
.font-pt-serif-italic {
    font-family: 'PT Serif', 'Segoe UI', 'Helvetica Neue', serif;
    font-style: italic;
}
.font-poppins {
    font-family: 'Poppins', sans-serif;
}
.font-playfair {
    font-family: 'Playfair Display', 'Segoe UI', 'Helvetica Neue', serif;
}
.font-playfair-italic {
    font-family: 'Playfair Display', 'Segoe UI', 'Helvetica Neue', serif;
    font-style: italic;
    font-weight: 700
}
.font-josefin {
	font-family: 'Josefin Sans', sans-serif;
}

/* common font weights */
.font-w300 {
    font-weight: 300 !important;
}
.font-w400 {
    font-weight: 400 !important;
}
.font-w500 {
    font-weight: 500 !important;
}
.font-w600 {
    font-weight: 600 !important;
}
.font-w700 {
    font-weight: 700 !important;
}

/* ---------------------------------
02. Some Basics 
 ---------------------------------*/
html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
	background: #F9F9F9;
    font-family: 'PT Serif', 'Segoe UI', 'Helvetica Neue', serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.05em;
    font-size: 15px;
    color: #626262;
    line-height: 1.4em;
    font-weight: 400;
}
html,
body {
    overflow: hidden;
    height: auto;
}
html.add-oveflow,
body.add-oveflow {
    overflow-x: hidden;
    overflow-y: auto;
}

/* For scrollReveal animation */
.sr .foo {
    visibility: hidden;
}
main {
    position: relative;
    z-index: 2;
    /*height: 100vh; mainly used for ios devices but it conflicts with other jquery scripts so, dont use it alongside some jquery scripts*/
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:inherit;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.7s ease-in-out;
    -moz-transition: -moz-transform 0.7s ease-in-out;
    transition: transform 0.7s ease-in-out;
}
/* hide scrollbar when navigation is open */
body.scroll-hide,
html.scroll-hide {
    overflow-y: hidden !important;
}
p {
    line-height: 1.6em;
}
span {
    font-weight: bold;
	color:rgb(74, 190, 167);
}
ul,
li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
ol,
ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
a {
    color: #777777;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    color: #000000;
    text-decoration: none;
}
*:focus {
    outline: none !important;
}
video {
    background-size: cover;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}
label {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
input,
textarea,
select {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    background: #F9F9F9;
    color: #111111;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 15px;
    letter-spacing: 0.05em;
    width: 100%;
    margin: 0 0 20px 0;
    max-width: 100%;
    resize: none;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
textarea {
    min-height: 100px;
}
button {
    border: 0;
}
input[type="submit"] {
    width: auto
}
input[type="button"],
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
input[type="submit"] {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
}
input:hover,
textarea:hover,
select:hover {
    border-color: #888888;
}
input:focus,
textarea:focus,
select:focus {
    background: #FFFFFF;
    border-color: #2E71F2;
}
input[type="submit"]:focus {
    border: none !important
}

/* custom checkbox style */
.radio,
.checkbox {
    text-align: left;
    font-family: 'Poppins', sans-serif;
}
.radio label,
.checkbox label {
    display: inline-block !important;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
    font-weight: 600;
}
input[type=radio],
input[type=checkbox] {
    display: none;
}
.radio label:before,
.checkbox label:before {
    font-family: 'Poppins', sans-serif;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 3px;
    background-color: #F9F9F9;
    border: solid 1px #CCCCCC;
    font-weight: 400;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.radio label:before {
    border-radius: 8px;
}
.checkbox label {
    margin-bottom: 0px;
}
.checkbox label:before {
    border-radius: 3px;
}
input[type=radio] + label:before {
    content: "\2022";
    color: #F9F9F9;
    font-size: 24px;
    text-align: center;
    line-height: 19px;
}
input[type=radio] + label:hover:before {
    content: "\2022";
    color: #CCCCCC;
}
input[type=radio]:checked + label:before {
    content: "\2022";
    color: #2E71F2;
}
input[type=checkbox]:checked + label:before {
    content: "\2713";
    font-size: 12px;
    background: #2E71F2;
    color: #FFFFFF;
    font-weight: 600;
    text-align: center;
    line-height: 15px;
    border-color: #2E71F2;
}

/* custom select option */
.dropdown select {
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background: url(../img/other/down-arrow.png) no-repeat #F9F9F9;
    background-position: 96% 12px;
    text-indent: 0.01px;
    text-overflow: "";
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background:#FFFFFF;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: rgba(46, 113, 242, 1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(46, 113, 242, 0.6);
}
select::-ms-expand {
    display: none;
}
iframe {
    border: 0;
}
.sound iframe {
    width: 100%
}
ul {
    list-style: none outside none;
}
ul,
ol,
dl {
    list-style-position: outside;
}
::selection {
    color: #FFFFFF;
    background: #2e71f2;
}
::-moz-selection {
    color: #FFFFFF;
    background: #2e71f2;
}
::-webkit-input-placeholder {
    color: #b2b2b2;
    text-overflow: ellipsis;
}
:-moz-placeholder {
    color: #b2b2b2 !important;
    text-overflow: ellipsis;
    opacity: 1;
}
::-moz-placeholder {
    color: #b2b2b2 !important;
    text-overflow: ellipsis;
    opacity: 1;
}
:-ms-input-placeholder {
    color: #b2b2b2 !important;
    text-overflow: ellipsis;
    opacity: 1;
}
.placeholder-light::-webkit-input-placeholder {
    color: #DDDDDD
}
.placeholder-light:-moz-placeholder {
    color: #DDDDDD
}
.placeholder-light::-moz-placeholder {
    color: #DDDDDD
}
.placeholder-light:-ms-input-placeholder {
    color: #DDDDDD
}
.animated {
    -moz-transition-duration: 0s !important;
}
section {
    width: 100%;
}
section:after {
    content: "";
    display: table;
    clear: both;
}
img {
    -webkit-backface-visibility: hidden;
}
.transition,
.transition * {
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
}

/* headers */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    color: #111111;
    line-height: 1.2em;
    padding: 0px;
    margin: 0px;
    letter-spacing: 0px;
}
h1 {
    font-size: 65px;
}
h2 {
    font-size: 50px;
}
h3 {
    font-size: 40px;
}
h4 {
    font-size: 32px;
}
h5 {
    font-size: 26px;
}
h6 {
    font-size: 18px;
}
@media only screen and (max-width: 991px) {
    h1 {
        font-size: 45px;
    }
    h2 {
        font-size: 38px;
    }
    h3 {
        font-size: 28px;
    }
    h4 {
        font-size: 24px;
    }
    h5 {
        font-size: 20px;
    }
}
@media only screen and (max-width: 767px) {
    h1 {
        font-size: 38px;
    }
    h2 {
        font-size: 34px;
    }
    h3 {
        font-size: 26px;
    }
    h4 {
        font-size: 22px;
    }
}
@media only screen and (max-width: 480px) {
    h1 {
        font-size: 32px;
    }
    h2 {
        font-size: 28px;
    }
    h3 {
        font-size: 25px;
    }
}
@media only screen and (max-width: 320px) {
    h1 {
        font-size: 30px;
    }
    h2 {
        font-size: 26px;
    }
    h3 {
        font-size: 24px;
    }
}

/* ---------------------------------
03. Custom Classes - Helper Classes
 ---------------------------------*/
section {
    padding: 30px 0px;
}
.section-padding-zero {
    padding: 0px;
}
.section-padding {
    padding: 120px 0px;
}
.section-padding-small {
    padding: 60px 0px;
}
@media only screen and (max-width: 767px) {
    .section-padding {
        padding: 60px 0px;
    }
}
@media only screen and (max-width: 480px) {
    .section-padding {
        padding: 40px 0px;
    }
    .section-padding-small {
        padding: 30px 0px;
    }
}
.section-top-margin {
	margin-top:74px;
}
@media only screen and (max-width: 991px) {
	.section-top-margin {
		margin-top:50px;
	}
}

/* border */
.border-bottom-dark {
	border-bottom:solid 1px #444444
}
.border-bottom-light {
	border-bottom:solid 1px #EEEEEE
}


/* Element Center */
.head-center,
.center-block-1,
.center-block-2,
.center-block-3 {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    margin-top: 20px;
    margin-bottom: 20px;
}
.center-block-1,
.head-center {
    width: 540px;
}
.center-block-2 {
    width: 620px;
}
.center-block-3 {
    width: 740px;
}
@media only screen and (max-width: 992px) {
    .center-block-3 {
        width: 80% !important;
    }
}
@media only screen and (max-width: 767px) {
    .head-center,
    .center-block-1,

    .center-block-2 {
        width: 60%;
    }
}
@media only screen and (max-width: 480px) {
    .head-center {
        width: 80%;
    }
    .center-block-1,
    .center-block-2,
    .center-block-3 {
        width: 90% !important;
    }
}

/* elements at the center of a div/block */
.just-center {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.center {
    display: block;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (max-width: 480px) {
    .center {
        margin-top: 20px;
    }
}

/* content wrapper */
.content-wrapper {
    margin-top: 100px;
}
.content-top-margin {
    margin-top: 76px;
}
@media only screen and (max-width: 768px) {
    .content-wrapper {
        margin-top: 60px;
    }
}

/* all wrapper */
.all-details-wrapper {
    margin-top: 60px;
}
.all-details-wrapper-md {
    margin-top: 80px;
}
.all-details-wrapper-lg {
    margin-top: 100px;
}
@media only screen and (max-width: 767px) {
    .all-details-wrapper {
        margin-top: 40px;
    }
    .all-details-wrapper-md,
    .all-details-wrapper-lg {
        margin-top: 50px;
    }
}

/* letter spacings */
.letter-spacing-close {
    letter-spacing: -1px !important;
}
.letter-spacing-ultraclose {
    letter-spacing: -3px !important;
}
@media only screen and (max-width: 991px) {
    .letter-spacing-ultraclose {
        letter-spacing: -1px !important;
    }
}
@media only screen and (max-width: 480px) {
    .letter-spacing-close,
    .letter-spacing-ultraclose {
        letter-spacing: 0px !important;
    }
}
.letter-spacing0 {
    letter-spacing: 0px !important;
}
.letter-spacing1 {
    letter-spacing: 1px !important;
}
.letter-spacing2 {
    letter-spacing: 2px !important;
}
.letter-spacing3 {
    letter-spacing: 3px !important;
}

/* line heights */
.line-height {
    line-height: 22px !important;
}
.line-height-med {
    line-height: 25px !important;
}
.line-height-big {
    line-height: 28px !important;
}
.line-height-large {
    line-height: 31px !important;
}
.line-height-ultra {
    line-height: 33px !important;
}

/* horizontal rule /hr */
.hr-left {
    margin-left: 0px;
}
.hr-small {
    width: 50px;
}
.hr-med {
    width: 200px;
}
.hr-dark {
    border-top: solid 1px #444444;
}
.hr-semi-dark {
    border-top: solid 1px #CCCCCC;
}
.hr-white {
    border-top: solid 1px #FFFFFF;
}
.hr-black {
    border-top: solid 1px #000000;
}

/* different text size */
.text-small {
    font-size: 11px !important;
}
.text-med {
    font-size: 14px !important;
}
.text-large {
    font-size: 15px !important;
}
.text-extra-large {
    font-size: 16px !important;
}
.text-ultra {
    font-size: 32px !important;
}
.text-underline {
    padding-bottom: 3px;
    border-bottom: solid 1px #333333;
}
.text-italics {
    font-style: italic !important
}
.text-normal {
    font-style: normal !important
}


/* text colors */
.text-grey {
    color: #888888 !important;
}
.text-dark-grey {
    color: #555555 !important;
}
.text-light-grey {
    color: #DDDDDD !important;
}
.text-white {
    color: #FFFFFF !important;
}
.text-black {
    color: #111111 !important;
}
.text-blue {
    color: #2e71f2 !important;
}

/* backgrounds */
/*blue background */
.bg-blue {
    background: #2e71f2 !important
}
/*black background */
.bg-black {
    background: #111111 !important
}
/*dark background */
.bg-dark {
    background: #222222 !important
}
/*white background */
.bg-white {
    background: #FFFFFF !important
}

/* subheads */
.subh-basic-light,
.subh-basic-dark {
    font-size: 14px !important;
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    display: block;
}
.subh-basic-light {
    color: #DDDDDD;
}
.subh-basic-dark {
    color: #000000;
}

/* subtext */
.subtext {
    font-size: 15px;
    color: #999999;
}

/* display styles*/
.overflow-hidden {
    overflow: hidden !important
}
.overflow-hidden-mobile {
    position: fixed !important;
    overflow: hidden !important
}
.display-block {
    display: block !important
}
.display-inline {
    display: inline-block !important
}
.display-table {
    display: table !important
}

/* center image */
.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* z-index */
.z-index-1 {
    z-index: 1 !important;
}
.z-index-0 {
    z-index: 0 !important;
}

/* paddings */
.padding-all10 {
    padding: 10px !important;
}
.padding-all20 {
    padding: 20px !important;
}
.padding-all40 {
    padding: 40px !important;
}
.padding-all60 {
    padding: 60px !important;
}
.padding-left-right10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.padding-left-right20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.padding-top-bot10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.padding-top-bot20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.padding-right10 {
    padding-right: 10px !important;
}
.padding-right20 {
    padding-right: 20px !important;
}
.padding-left10 {
    padding-left: 10px !important;
}
.padding-left20 {
    padding-left: 20px !important;
}
.padding-top10 {
    padding-top: 10px !important;
}
.padding-top20 {
    padding-top: 20px !important;
}
.padding-bot10 {
    padding-bottom: 10px !important;
}
.padding-bot20 {
    padding-bottom: 20px !important;
}
.no-padding-left-right {
    padding-left: 0 !important;
    padding-right: 0 !important
}
.no-padding-right {
    padding-right: 0px !important;
}
.no-padding-top {
    padding-top: 0 !important
}
.no-padding {
    padding: 0 !important
}
.no-padding-left {
    padding-left: 0px !important;
}
.no-padding-bottom {
    padding-bottom: 0 !important
}

/* margins */
.no-margin {
    margin: 0 !important
}
.no-margin-bottom {
    margin-bottom: 0 !important
}
.all-margin5 {
    margin: 5px !important;
}
.all-margin10 {
    margin: 10px !important;
}
.all-margin30 {
    margin: 30px !important;
}
.margin-top5 {
    margin-top: 5px !important;
}
.margin-top10 {
    margin-top: 10px !important;
}
.margin-top20 {
    margin-top: 20px !important;
}
.margin-top30 {
    margin-top: 30px !important;
}
.margin-top50 {
    margin-top: 50px !important;
}
.margin-top100 {
    margin-top: 100px !important;
}
.margin-right5 {
    margin-right: 5px !important;
}
.margin-right10 {
    margin-right: 10px !important;
}
.margin-right20 {
    margin-right: 20px !important;
}
.margin-left5 {
    margin-left: 5px !important;
}
.margin-left10 {
    margin-left: 10px !important;
}
.margin-left20 {
    margin-left: 20px !important;
}
.margin-zero {
    margin: 0px !important;
}
.margin-all5 {
    margin: 5px !important;
}
.margin-all10 {
    margin: 10px !important;
}
.margin-all20 {
    margin: 20px !important;
}
.margin-all40 {
    margin: 40px !important;
}
.margin-bot10 {
    margin-bottom: 10px !important;
}
.margin-bot20 {
    margin-bottom: 20px !important;
}
.margin-bot30 {
    margin-bottom: 30px !important;
}
.margin-bot50 {
    margin-bottom: 50px !important;
}
.margin-bot100 {
    margin-bottom: 100px !important;
}
.margin-up-10 {
    margin-top: -10px !important;
}
.margin-up-20 {
    margin-top: -20px !important;
}

/* opacity */
.opacity-light {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    z-index: 1;
    top: 0;
    left: 0
}
.opacity-medium {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.7;
    z-index: 1;
    top: 0;
    left: 0
}
.opacity-full {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.8;
    z-index: 1;
    top: 0;
    left: 0
}
.opacity05:hover {
    opacity: 0.5;
}
.opacity07:hover {
    opacity: 0.7;
}
.opacity08:hover {
    opacity: 0.8;
}

/* position */
.position-relative {
    position: relative !important;
    z-index: 5
}
.position-absolute {
    position: absolute !important;
}
.position-right {
    right: 0 !important;
}
.position-left {
    left: 0 !important;
}
.position-top {
    top: 0 !important;
}

/* floats */
.left {
    float: left !important
}
.right {
    float: right !important
}
.no-float {
    float: none !important;
}

/* cover background */
.bg-cover {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: 50% 0;
}
.bg-cover-simple {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important
}

/* social sharing buttons */
.social {
    display: block
}
.social a,
.social-dark a {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: none;
    padding-top: 8px;
    font-size: 14px;
    text-align: center;
    margin: 10px 5px;
    border-radius: 50%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease
}
.social a {
    color: #FFFFFF;
    border: solid 2px #FFFFFF;
}
.social a:hover {
    color: #111111;
    background: #FFFFFF;
}
.social-dark a {
    color: #999999;
    border: solid 2px #777777;
}
.social-dark a:hover {
    color: #FFFFFF;
    border: solid 2px #FFFFFF;
}
.social a:active,
.social-dark a:active {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}

/* ---------------------------------
04. Different Dividers 
 ---------------------------------*/
.divider {
    position: relative;
    overflow: hidden;
    margin: 35px 0;
    width: 100%
}
.divider.divider-margin {
    margin: 70px 0
}
.divider.divider-center.divider-short:before,
.divider.divider-center:before,
.divider:after {
    content: '';
    position: absolute;
    width: 100%;
    top: 8px;
    left: 30px;
    height: 0;
    border-top: 1px solid #2e71f2
}
.divider.divider-center.divider-short.divider-thick:before,
.divider.divider-center.divider-thick:before,
.divider.divider-thick:after {
    border-top-width: 3px
}
.divider.divider-short:after {
    width: 30%
}
.divider i {
    position: relative;
    width: 18px;
    height: 18px;
    line-height: 1;
    font-size: 18px!important;
    text-align: center;
    color: #2e71f2;
}
.divider a {
    position: relative;
    display: inline-block;
    color: inherit;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}
.divider a:hover {
    color: #888
}
.divider.divider-right {
    text-align: right
}
.divider.divider-right:after {
    left: auto;
    right: 30px
}
.divider.divider-center,
.divider.divider-center.divider-short {
    text-align: center
}
.divider.divider-center:before {
    left: -50%!important;
    right: 0;
    margin-left: -20px
}
.divider.divider-center:after {
    left: 50%!important;
    right: 0;
    margin-left: 20px
}
.divider.divider-center.divider-short:before {
    left: auto!important;
    right: 50%;
    margin-right: 20px;
    width: 15%
}
.divider.divider-center.divider-short:after {
    left: 50%!important;
    right: auto!important;
    margin-left: 20px;
    width: 15%
}

/* Sidelines */
.sidelines {
    line-height: 0;
    text-align: center;
}
.sidelines span {
    display: inline-block;
    position: relative;
}
.sidelines span:before,
.sidelines span:after {
    content: "";
    position: absolute;
    height: 0px;
    border-bottom: 1px solid #CCCCCC;
    top: 20;
    width: 100px;
}
.sidelines span:before {
    right: 100%;
    margin-right: 15px;
}
.sidelines span:after {
    left: 100%;
    margin-left: 15px;
}

/* ---------------------------------
05. Preloader
 ---------------------------------*/
/* cover complete screen */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    z-index: 9999;
    /* makes sure it stays on top */
    -webkit-transition: none;
    transition: none;
}

/* preloader container at the middle */
#status {
    width: 36px;
    height: 36px;
    position: absolute;
    left: 50%;
    /* centers the loading animation horizontally one the screen */
    top: 50%;
    /* centers the loading animation vertically one the screen */
    background-repeat: no-repeat;
    background-position: center;
    margin: -18px 0 0 -18px;
    /* is width and height divided by two */
    text-align: center;
}
[data-loader='circle-side'] {
    position: relative;
    width: 35px;
    height: 35px;
    -webkit-animation: circle infinite .75s linear;
    -moz-animation: circle infinite .75s linear;
    -o-animation: circle infinite .75s linear;
    animation: circle infinite .75s linear;
    border: 4px solid #304ffe;
    border-top-color: rgba(0, 0, 0, .2);
    border-right-color: rgba(0, 0, 0, .2);
    border-bottom-color: rgba(0, 0, 0, .2);
    border-radius: 100%;
}
@-webkit-keyframes circle {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes circle {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes circle {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes circle {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
#preloader .loading-text {
    display: block;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
    font-weight: 600;
    font-size: 12px;
    color: #999999;
}

/* ---------------------------------
06. Button Styles 
 ---------------------------------*/
/* Generalized button class */
.bttn {
    font-family: 'Poppins', sans-serif;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
    margin: 5px 0px;
    text-decoration: none;
    -webkit-transition: All 0.1s ease;
    transition: All 0.1s ease;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.bttn .right-icon {
    margin-left: 10px;
    margin-right: 0px;
}
.bttn .left-icon {
    margin-right: 10px;
    margin-left: 0px;
}
@media only screen and (max-width: 480px) {
    .bttn-full {
        display: block;
        border-radius: 0px !important;
        text-align: center;
    }
}
.bttn-scale:active {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}

/* button with border radius 5px */
.bttn5 {
    border-radius: 5px;
}

/* button with border radius 75px */
.bttn75 {
    -ms-border-radius: 75px;
    border-radius: 75px;
}

/* large button */
.bttn-large {
    font-size: 1.1em;
    padding: 20px 40px 15px 40px;
}

/* medium sized button */
.bttn-med {
    font-size: 0.8em;
    padding: 12px 28px 9px 28px;
}

/* small button */
.bttn-small {
    font-size: 0.67em;
    padding: 10px 24px 7px 24px;
}

/* very small button */
.bttn-very-small {
    font-size: 0.5em;
    padding: 3px 17px 0px 17px;
}

/* button shadows */
.bttn-shadow {
    box-shadow: 0px 5px 30px rgba(0,0,0,0.3);
}
.bttn-shadow-dark {
    box-shadow: 0px 5px 30px #111111;
}
.bttn-hovr-shadow {
    box-shadow: 0px 0px 0px #999999;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.bttn-hovr-shadow:hover {
    box-shadow: 0px 5px 30px #999999;
}
.bttn-hovr-shadow-dark {
    box-shadow: 0px 0px 0px #111111;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.bttn-hovr-shadow-dark:hover {
    box-shadow: 0px 5px 30px #111111;
}

/* default button */
.bttn-light {
    border: solid 2px #DDDDDD;
    color: #555555;
}
.bttn-light i {
    color: #555555;
}
.bttn-light:hover {
    background: #F9F9F9;
    border: solid 2px #555555;
    color: #000000;
}
.bttn-light:hover i {
    color: #000000;
}

/* light button */
.bttn-light-alt {
    border: solid 2px #666666;
    color: #EEEEEE;
}
.bttn-light-alt i {
    color: #EEEEEE
}
.bttn-light-alt:hover {
    background: #000000;
    color: #FFFFFF
}
.bttn-light:hover i {
    color: #FFFFFF
}

/* Black solid button */
.bttn-black {
    background: #111111;
    color: #FFFFFF
}
.bttn-black i {
    color: #FFFFFF
}
.bttn-black:hover {
    background: #666666;
    color: #FFFFFF
}
.bttn-black:hover i {
    color: #FFFFFF
}

/* Blue solid button */
.bttn-blue {
    background: #2e71f2;
    color: #FFFFFF;
}
.bttn-blue i {
    color: #FFFFFF
}
.bttn-blue:hover {
    background: #437ff3;
    color: #FFFFFF
}

/* Green solid button */
.bttn-green {
    background: #2fdc58;
    color: #FFFFFF
}
.bttn-green i {
    color: #FFFFFF
}
.bttn-green:hover {
    background: #7FE393;
    color: #FFFFFF
}

/* White solid button */
.bttn-white {
    background: #FFFFFF;
    color: #333333
}
.bttn-white i {
    color: #333333
}
.bttn-white:hover {
    background: #EEEEEE;
    color: #111111
}
.bttn-white:hover i {
    color: #111111
}

/* disable button */
.bttn-disable,
.bttn-disable i {
    background: #DDDDDD;
    color: #888888;
    cursor: default;
    pointer-events: none
}

/* ---------------------------------
07. Google Map Base 
 ---------------------------------*/
#googleMap {
    display: block;
    height: 400px;
    margin-top: 20px;
    background: #EEEEEE
}

/* ---------------------------------
08. Grid Structure
 ---------------------------------*/
.grid {
    display: block;
    margin-top: 20px;
    *zoom: 1;
}
.grid:before,
.grid:after {
    display: table;
    content: " ";
}
.grid:after {
    clear: both;
}
.grid .grid-item {
    float: left;
    display: block
}
.grid.gutter {
    margin-left: -15px
}
.grid.gutter .grid-item {
    padding: 0 0 15px 15px
}
.grid-4 .grid-item {
    width: 25%
}
.grid-3 .grid-item {
    width: 33.333333%
}
.grid .grid-item div {
    min-height: 100px
}
@media only screen and (max-width: 1200px) {
    .grid-4 .grid-item {
        width: 33.333333%
    }
}
@media only screen and (max-width: 991px) {
    .grid-4 .grid-item,
    .grid-3 .grid-item {
        width: 50%
    }
}
@media only screen and (max-width: 580px) {
    .grid-4 .grid-item,
    .grid-3 .grid-item {
        width: 100%
    }
}
.grid figure {
    margin: 0;
    position: relative
}
.grid figure img {
    display: block;
    width: 100%;
    cursor: pointer
}
.grid-img {
    overflow: hidden;
    position: relative
}
.grid-img:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(46, 113, 242, 0.3);
    opacity: 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s
}
.grid-item:hover .grid-img:after {
    opacity: 1
}
.grid-img img {
    width: 100%;
    vertical-align: top;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease
}
figcaption .project {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease
}

/* grid style 1 */
.grid-type-1 figcaption {
	padding-bottom:10px;
}
.grid-type-1.gutter figcaption {
	padding-bottom:0px;
}

.grid-type-1 figcaption .project {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    display: block;
    font-weight: 500;
    color: #222222;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
    text-align: center;
}
.grid-type-1 figcaption .company {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    display: block;
    font-weight: 500;
    color: #999999;
    margin-top: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center
}
.grid-type-1 figure:hover .project {
    color: #2e71f2
}

/* grid style 2 */
.grid-type-2 figcaption {
    background: #111111;
    display: inline-block;
    top: 0px;
    padding: 5px 20px 10px;
    opacity: 1;
    position: absolute;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}
.grid-type-2 .project {
    font-family: 'Poppins', sans-serif;
    display: block;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-top: 10px;
    font-size: 14px;
    color: #FFFFFF;
}
.grid-type-2 .company {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999999;
    display: block;
    margin-top: 5px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
@media only screen and (min-width: 992px) {
	.grid figure{
		overflow:hidden;
	}
    .grid figure:hover img {
        opacity: 0.8;
        -webkit-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }
    .grid-type-2 figcaption {
        width: 100%;
        opacity: 0;
		padding:20px;
		-webkit-transform: translate3d(0%, -100%, 0);
        transform: translate3d(0%, -100%, 0)
    }
    .grid-type-2 figure:hover figcaption{
		 opacity: 1;
        -webkit-transform: translate3d(0%, 0%, 0);
        transform: translate3d(0%, 0%, 0)
    }
}

/* ---------------------------------
09. Accordion Styles 
 ---------------------------------*/
.panel-group .panel {
    border-radius: 0;
    border: solid 1px #CCCCCC;
    margin: 15px 0px;
}
.panel-group panel.accordion-toggle.collapsed {
    box-shadow: none
}
.panel-heading {
    padding: 0px;
}
.panel-body {
    padding: 20px;
}
.panel-body p {
    margin: 0px;
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
}
.accordion-toggle {
    background: #EEEEEE;
    position: relative;
    display: block;
    padding: 10px 24px 10px 20px;
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    color: #222222;
    font-size: 16px;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.accordion-toggle .panel-group .panel {
    border: solid 1px #000000
}
.accordion-toggle:hover,
.accordion-toggle.collapsed:hover {
    background: #EEEEEE
}
.accordion-toggle.collapsed {
    background: #FFFFFF
}
.accordion-toggle::before,
.accordion-toggle::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 12px;
    height: 2px;
    margin-top: -2px;
    background-color: #777777;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.panel-heading a::before {
    opacity: 0;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}
.panel-heading a.collapsed::before {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)
}
.panel-heading a.collapsed::after {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

/* ---------------------------------
10. Tabs Styles 
 ---------------------------------*/
.nav-tabs {
    border-bottom: none
}
.nav-tabs > li {
    margin-bottom: 0px
}
.nav-tabs > li > a {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    letter-spacing: 1px;
    color: #808080;
    font-weight: 500;
    margin-right: 20px;
    border-radius: 0px;
    background: none;
    padding: 5px 0px;
    border-bottom: solid 2px #CCCCCC;
    -webkit-transition: all 0.25s;
    transition: all 0.25s
}
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-top: none;
    border-left: none;
    border-right: none
}
.nav-tabs > li > a:hover {
    background: none;
    color: #111111;
    border-bottom: solid 2px #111111
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: none;
    color: #2e71f2;
    border-bottom: solid 2px #2e71f2
}
.tab-content {
    margin-top: 20px;
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
}
@media only screen and (max-width: 767px) {
    .nav-tabs > li {
        display: block;
        float: none;
        margin-bottom: 5px
    }
    .nav-tabs > li > a {
        display: block;
        text-align: center;
        margin-right: 0px;
        background: #EEEEEE
    }
    .nav-tabs > li > a,
    .nav-tabs > li > a:hover,
    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        border: none
    }
    .nav-tabs > li > a:hover {
        background: #EEEEEE
    }
    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        background: #2e71f2;
        color: #FFFFFF
    }
}

/* ---------------------------------
11. Paginations
 ---------------------------------*/
.pagination {
	font-family: 'Josefin Sans', sans-serif;
	font-weight:400;
    display: block;
    text-align: center
}
.mod-pagination {
    text-align: center;
}

/* hide numbers on small devices */
.mod-pagination li {
    display: none;
    margin: 0 .2em;
}

/* make sure prev next buttons are visible */
.mod-pagination li.button {
    display: inline-block;
    font-size: 1em;
    text-transform: capitalize
}
.mod-pagination a,
.mod-pagination span {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 4px 10px;
    font-size: 1em;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: .1s;
    -moz-transition-duration: .1s;
    -o-transition-duration: .1s;
    transition-duration: .1s;
}
.mod-pagination a {
    border: 1px solid #e6e6e6;
    border-radius: 0.25em;
}
.mod-pagination a:hover {
    background-color: #f2f2f2;
}
.mod-pagination a:active {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}
.mod-pagination a.disabled {
    color: rgba(46, 64, 87, 0.4);
    pointer-events: none;
}
.mod-pagination a.disabled::before,
.mod-pagination a.disabled::after {
    opacity: .4;
}
.mod-pagination .button:first-of-type a::before {
    content: '\00ab  ';
}
.mod-pagination .button:last-of-type a::after {
    content: ' \00bb';
}
.mod-pagination .current {
    background-color: #2e71f2;
    border-color: #2e71f2;
    color: #FFFFFF;
    pointer-events: none;
}
@media only screen and (min-width: 768px) {
    .mod-pagination li {
        display: inline-block;
    }
}
/* No space - remove distance between list items */
.mod-pagination.no-space {
    width: auto;
    max-width: none;
    display: inline-block;
    border-radius: 0.25em;
    border: 1px solid #e6e6e6;
}
.mod-pagination.no-space:after {
    content: "";
    display: table;
    clear: both;
}
.mod-pagination.no-space li {
    margin: 0;
    float: left;
    border-right: 1px solid #e6e6e6;
}
.mod-pagination.no-space li:last-of-type {
    border-right: none;
}
.mod-pagination.no-space a,
.mod-pagination.no-space span {
    float: left;
    border-radius: 0;
    padding: 8px 14px;
    border: none;
}
.mod-pagination.no-space li:first-of-type a {
    border-radius: 0.25em 0 0 0.25em;
}
.mod-pagination.no-space li:last-of-type a {
    border-radius: 0 0.25em 0.25em 0;
}

/* move buttons - move prev and next buttons to the sides */
.mod-pagination.move-buttons:after {
    content: "";
    display: table;
    clear: both;
}
.mod-pagination.move-buttons .button:first-of-type {
    float: left;
}
.mod-pagination.move-buttons .button:last-of-type {
    float: right;
}
.mod-pagination.no-space.move-buttons {
    display: block;
    overflow: hidden;
}
.mod-pagination.no-space.move-buttons li {
    float: none;
    border: none;
}
.mod-pagination.no-space.move-buttons a,
.mod-pagination.no-space.move-buttons span {
    float: none;
}

/* customize the small arrow inside the next and prev buttons */
.mod-pagination.custom-icons .button a {
    position: relative;
}
.mod-pagination.custom-icons .button:first-of-type a {
    padding-left: 2.4em;
}
.mod-pagination.custom-icons .button:last-of-type a {
    padding-right: 2.4em;
}
.mod-pagination.custom-icons .button:first-of-type a::before,
.mod-pagination.custom-icons .button:last-of-type a::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    top: 50%;
    /* set margin-top = icon height/2 */
    margin-top: -8px;
    background: transparent url(../img/other/arrow.svg) no-repeat center center;
    color: #00aff0;
}
.mod-pagination.custom-icons .button:first-of-type a::before {
    left: .8em;
}
.mod-pagination.custom-icons .button:last-of-type a::after {
    right: .8em;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* ---------------------------------
12. Different Blockquotes styles 
 ---------------------------------*/
blockquote {
    margin: 20px 0px;
    line-height: 1.5em
}

/* Quote style 1 */
.quote-1 {
    font-size: 20px;
    color: #111111;
    font-family: 'Playfair Display', serif
}
@media only screen and (max-width: 767px) {
    .quote-1 {
        padding: 0px 20px
    }
}
@media only screen and (max-width: 480px) {
    .quote-1 {
        font-size: 17px
    }
}

/* Quote style 2 */
.quote-2 {
    font-family: 'PT Serif', 'Segoe UI', 'Helvetica Neue', serif;
    font-style: italic;
    font-size: 26px;
    letter-spacing: 0px;
    line-height: 1.3em;
    padding: 30px;
    color: #000000;
    border: solid 1px #DDDDDD;
    border-radius: 5px
}
@media only screen and (max-width: 767px) {
    .quote-2 {
        font-size: 24px;
        padding: 20px
    }
}
@media only screen and (max-width: 480px) {
    .quote-2 {
        font-size: 20px
    }
}

/* Quote style 3 */
.quote-3 {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    font-size: 20px;
    padding: 30px;
    color: #000000;
    border: solid 5px #2196F3
}
.quote-3:before {
    color: #2196F3;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em
}
@media only screen and (max-width: 767px) {
    .quote-3 {
        padding: 20px
    }
}
@media only screen and (max-width: 480px) {
    .quote-3 {
        font-size: 17px
    }
}

/* Quote style 4 */
.quote-4 {
    font-family: 'Playfair Display', serif;
    padding: 30px;
    line-height: 1.7em;
    background: #333333;
    color: #FFFFFF;
    border: none;
    font-size: 20px;
    box-shadow: 0px 0px 60px #999999
}
@media only screen and (max-width: 767px) {
    .quote-4 {
        padding: 20px
    }
}
@media only screen and (max-width: 480px) {
    .quote-4 {
        font-size: 17px
    }
}

/* ---------------------------------
13. Scroll Down Mouse 
 ---------------------------------*/
.mouse-wrapper {
    display: block;
    margin-top: 120px;
    min-height: 20px;
    text-align: center
}

/* hide mouse animation on small screen */
@media only screen and (max-width: 991px) {
    .mouse-wrapper {
        display: none
    }
}
.mouse.mouse-light {
    border: 2px solid #FFFFFF
}
.mouse.mouse-dark {
    border: 2px solid #555555;
}
.mouse {
    display: inline-block;
    height: 40px;
    width: 24px;
    border-radius: 10px;
    transform: none
}
.mouse .wheel {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    display: block;
    margin: 5px auto;
    position: relative
}
.mouse.mouse-light .wheel {
    background: #FFFFFF
}
.mouse.mouse-dark .wheel {
    background: #555555
}
.mouse .wheel {
    -webkit-animation: mouse-wheel 1.2s ease infinite;
    -moz-animation: mouse-wheel 1.2s ease infinite
}
@-webkit-keyframes mouse-wheel {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px)
    }
}
@-moz-keyframes mouse-wheel {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px)
    }
}

/* ---------------------------------
14. Go to top Arrow 
 ---------------------------------*/
.goto-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    bottom: 20px;
    right: 20px;
    padding-top: 12px;
    position: fixed;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    z-index: 999;
    background: #FFFFFF;
    visibility: hidden;
    color: #111111;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
}
.goto-top.goto-is-visible,
.goto-top.goto-fade-out,
.no-touch .goto-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
}
.goto-top.goto-is-visible {
    visibility: visible;
    opacity: 1;
}
.goto-top.goto-fade-out {
    opacity: .8;
}
.no-touch .goto-top:hover,
.goto-top:hover {
    background: #CCCCCC
}
.goto-top.goto-hide {
    visibility: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
@media only screen and (min-width: 768px) {
    .goto-top {
        right: 40px;
        bottom: 40px;
    }
}

/* ---------------------------------
15. Progress Bars 
 ---------------------------------*/
.progress-bar-base span.skill,
.progress-bar-base span.percent {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    font-weight: 500;
    font-size: 12px;
    margin-top: 1px
}

/* progress bar style 1 */
.progress-bar-1 .bar {
    margin: 40px 0px
}
.progress-bar-1 .hollow {
    height: 10px;
    background: #EEEEEE;
    display: block
}
.progress-bar-1 .fill {
    background: #333333;
    height: 10px;
    margin-top: -10px;
    display: block
}
.progress-bar-1 span.skill,
.progress-bar-1 span.percent {
    color: #000000
}
.progress-bar-1 span.skill {
    float: left;
    margin-top: -25px
}
.progress-bar-1 span.percent {
    float: right;
    text-align: center;
    margin-top: -31px;
    position: relative;
    width: 38px;
    height: 23px;
    padding: 0px;
    background: #2e71f2;
    color: #FFFFFF
}
.progress-bar-1 span.percent:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 12px;
    border-style: solid;
    border-width: 8px 7px 0;
    border-color: #2e71f2 transparent;
    display: block;
    width: 0;
    z-index: 1;
}

/* progress bar style 2 */
.progress-bar-2 .bar {
    margin: 40px 0px
}
.progress-bar-2 .hollow {
    height: 3px;
    background: #EEEEEE;
    display: block
}
.progress-bar-2 .fill {
    background: #2e71f2;
    height: 3px;
    margin-top: -3px;
    display: block
}
.progress-bar-2 span.skill,
.progress-bar-2 span.percent {
    color: #000000;
    margin-top: 5px
}
.progress-bar-2 span.skill {
    float: left
}
.progress-bar-2 span.percent {
    float: right
}

/* progress bar style 3 */
.progress-bar-3 .bar {
    margin: 20px 0px
}
.progress-bar-3 .hollow {
    height: 25px;
    background: #EEEEEE;
    display: block
}
.progress-bar-3 .fill {
    background: #2e71f2;
    height: 25px;
    margin-top: -25px;
    display: block
}
.progress-bar-3 span.skill,
.progress-bar-3 span.percent {
    color: #FFFFFF
}
.progress-bar-3 span.skill {
    margin-left: 10px;
    padding-top: 2px;
    float: left
}
.progress-bar-3 span.percent {
    padding-top: 2px;
    margin-right: 10px;
    float: right
}

/* progress bar style 4 */
.progress-bar-4 .bar {
    margin: 20px 0px
}
.progress-bar-4 .hollow {
    height: 25px;
    background: #EEEEEE;
    display: block
}
.progress-bar-4 .fill {
    height: 25px;
    margin-top: -25px;
    display: block
}
.progress-bar-4 span.skill,
.progress-bar-4 span.percent {
    color: #FFFFFF
}
.progress-bar-4 span.skill {
    padding-top: 2px;
    margin-left: 10px;
    float: left
}
.progress-bar-4 span.percent {
    padding-top: 2px;
    margin-right: 10px;
    float: right
}
@-webkit-keyframes animated_stripes {
    from {
        background-position: 0;
    }
    to {
        background-position: 40px;
    }
}
@-o-keyframes animated_stripes {
    from {
        background-position: 0;
    }
    to {
        background-position: 40px;
    }
}
@keyframes animated_stripes {
    from {
        background-position: 0;
    }
    to {
        background-position: 40px;
    }
}
.animate-stripes {
    animation: animated_stripes 0.5s linear infinite
}

/* ---------------------------------
16. Page Titles 
 ---------------------------------*/
/* General Page Title Style - Simple */
.page-title-simple {
    min-height: 100px;
    padding: 80px 0px 60px 0px;
    border-bottom: solid 1px #DDDDDD
}
.page-title-simple p {
    width: 400px;
    margin: 10px 0px 0px 0px;
    color: #AAAAAA;
}

/* Simple Breadcrumbs */
.page-title-simple .title-nav {
    float: right
}
.page-title-simple .title-nav li {
    display: inline-block;
    margin-left: 5px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px
}
.page-title-simple .title-nav li a {
    color: #999999;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}
.page-title-simple .title-nav li a:hover,
.page-title-simple .title-nav li.current a {
    color: #111111
}
.page-title-simple .title-nav li.current a {
    pointer-events: none
}
.page-title-simple .title-nav li+li:before {
    content: '\2215';
    margin-right: 8px;
    color: #AAAAAA;
}
@media only screen and (max-width: 767px) {
    .page-title-simple .title-nav {
        float: none;
        margin-top: 20px;
        margin-left: 10px
    }
}
@media only screen and (max-width: 480px) {
    .page-title-simple p {
        width: 90%
    }
}

/* Simple Page Title Style 1 */
.page-title-1 {
    background: #FFFFFF;
}

/* Simple Page Title Style 2 */
.page-title-2 {
    background: #111111;
}
.page-title-2 .title-nav li a:hover,
.page-title-2 .title-nav li.current a {
    color: #FFFFFF;
}

/* Simple Page Title Style 3 */
.page-title-3 {
    background: #EEEEEE url(../img/bg/bg20.jpg);
}
/* Retina background support - use x2 size image background */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .page-title-3 {
    	background: #EEEEEE url(../img/bg/bg20.jpg);
	}
}
.page-title-3 p {
    color: #777777
}

/* Simple Page Title Style 4 */
.page-title-4 {
    background: #222222 url(../img/bg/bg06.jpg);
}
/* Retina background support - use x2 size image background */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .page-title-4 {
    	background: #222222 url(../img/bg/bg06.jpg);
	}
}

.page-title-4 p {
    color: #DDDDDD
}
.page-title-4 .title-nav li a {
    color: #DDDDDD
}
.page-title-4 .title-nav li a:hover,
.page-title-4 .title-nav li.current a {
    color: #FFFFFF;
}
.page-title-4 .title-nav li+li:before {
    color: #CCCCCC;
}

/* Page Title Style - Modern */
.page-title-modern {
    min-height: 300px;
    padding: 120px 0px;
    border-bottom: solid 1px #DDDDDD;
}
.page-title-modern .page-center {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.page-title-modern p {
    width: 90%;
    line-height: 1.3em;
    font-size: 20px;
    margin: 10px 0px 0px 0px;
    color: #AAAAAA;
}

/* Simple Breadcrumbs */
.page-title-modern .title-nav {
    margin-top: 20px;
    margin-left: -3px
}
.page-title-modern .title-nav li {
    display: inline-block;
    margin-left: 5px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px
}
.page-title-modern .title-nav li a {
    color: #999999;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out
}
.page-title-modern .title-nav li a:hover,
.page-title-modern .title-nav li.current a {
    color: #111111
}
.page-title-modern .title-nav li.current a {
    pointer-events: none
}
.page-title-modern .title-nav li+li:before {
    content: '\2215';
    margin-right: 8px;
    color: #AAAAAA;
}
@media only screen and (max-width: 767px) {
    .page-title-modern {
        padding: 80px 0px 40px 0px
    }
    .page-title-modern .page-center {
        width: 80%
    }
    .page-title-modern p {
        font-size: 18px
    }
}
@media only screen and (max-width: 480px) {
    .page-title-modern .page-center {
        width: 100%
    }
    .page-title-modern p {
        width: 100%;
        font-size: 16px
    }
}

/* Modern Page Title Style 1 */
.page-title-md-1 {
    background: #F9F9F9;
}

/* Modern Page Title Style 2 */
.page-title-md-2 {
    background: #111111;
}
.page-title-md-2 .title-nav li a:hover,
.page-title-md-2 .title-nav li.current a {
    color: #FFFFFF;
}

/* Modern Page Title Style 3 */
.page-title-md-3 {
    background: #EEEEEE url(../img/bg/bg20.jpg);
}
/* Retina background support - use x2 size image background */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .page-title-md-3 {
    	background: #EEEEEE url(../img/bg/bg20.jpg);
	}
}
.page-title-md-3 p {
    color: #777777
}

/* Modern Page Title Style 4 */
.page-title-md-4 {
    background: #222222 url(../img/bg/bg06.jpg);
}
/* Retina background support - use x2 size image background */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .page-title-md-4 {
    	background: #222222 url(../img/bg/bg06.jpg);
	}
}
.page-title-md-4 p {
    color: #CCCCCC
}
.page-title-md-4 .title-nav li a {
    color: #CCCCCC
}
.page-title-md-4 .title-nav li a:hover,
.page-title-md-4 .title-nav li.current a {
    color: #FFFFFF
}
.page-title-md-4 .title-nav li+li:before {
    color: #CCCCCC
}

/* ---------------------------------
17. Modal Pupups 
 ---------------------------------*/
/* Modern Popup Style 1 */
.modern-popup-1 {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    background: #FFFFFF;
    min-height: 100px;
    padding: 30px;
    text-align: center
}
.modern-popup-1 .icon {
    font-size: 60px;
    color: #666666
}
.modern-popup-1 h5 {
    color: #111111
}
.modern-popup-1 p {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px
}
.modern-popup-1 form {
    margin-top: 20px
}
.modern-popup-1 input {
    width: 300px;
    font-size: 14px
}
.modern-popup-1 button.subscribe {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    background: #2e71f2;
    color: #FFFFFF;
    padding: 10px 14px;
    border-radius: 5px;
}
.modern-popup-1 button.subscribe:active {
    background: #111111
}
.modern-popup-1 .parsley-errors-list {
    display: none;
}
@media only screen and (max-width: 767px) {
    .modern-popup-1 {
        width: 100%;
        padding: 20px
    }
}
@media only screen and (max-width: 480px) {
    .modern-popup-1 input,
    .modern-popup-1 button.subscribe {
        width: 100%;
        margin-bottom: 0px
    }
}

/* Modern Popup Style 2 */
.modern-popup-2 {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    background: #2e71f2;
    min-height: 100px;
    padding: 30px
}
.modern-popup-2 p {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    margin-top: 20px;
    color: #EEEEEE
}
.modern-popup-2 form {
    margin-top: 20px
}
.modern-popup-2 input {
    width: 300px;
    border-color: #2e71f2
}
.modern-popup-2 input:focus {
    border-color: #111111
}
.modern-popup-2 button.subscribe {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    background: #111111;
    color: #FFFFFF;
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid #111111;
    font-size: 14px;
    letter-spacing: 0.05em;
}
.modern-popup-2 button.subscribe:active {
    background: #555555
}
.modern-popup-2 .parsley-errors-list {
    display: none;
}
@media only screen and (max-width: 767px) {
    .modern-popup-2 {
        width: 100%;
        padding: 20px
    }
}
@media only screen and (max-width: 480px) {
    .modern-popup-2 input,
    .modern-popup-2 button.subscribe {
        width: 100%;
        margin-bottom: 0px
    }
}

/* ---------------------------------
18. Parsley Form validation engine
 ---------------------------------*/
.parsley-error {
    border-color: #FF5722 !important
}
.parsley-success {
    border-color: #59DC78 !important
}
.parsley-errors-list {
    font-family: 'Hind Madurai', 'Segoe UI', 'Helvetica Neue', sans-serif;
    margin: 2px 0 10px;
    padding: 0;
    list-style-type: none;
    line-height: 1.2em;
    opacity: 0;
    font-size: 13px;
    font-weight: 400;
    color: #FF5722 !important;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in
}
.parsley-errors-list.filled {
    opacity: 1
}