/*

[HostMania Core Stylesheet]

Project: HostMania - Material Design Web Hosting With WHMCS Template
Version: 1.1
Author : themelooks.com

[Table of Contents]

1. GENERAL STYLES
    1.1. TYPHOGRAPHY
    1.2. PADDING
    1.3. SECTION TITLE
    1.4. BACKGROUND COLORS
    1.5. BUTTONS
    1.6. VERTICAL CENTERING
    1.7. BREADCRUMB
    1.8. BACK TO TOP BUTTON
    1.9. PRELOADER
    1.10. COLOR SWTICHER
    1.11. BROWSER UPGRADE

2. NAVIGATION AREA
    1.1. NAVIGATION TOPBAR
    1.2. NAVIGATION TOPBAR INFO
    1.3. NAVIGATION TOPBAR SOCIAL
    1.4. NAVIGATION NAVBAR
    1.5. NAVIGATION NAVBAR TOGGOLE BUTTON
    1.6. NAVIGATION NAVBAR BRAND
    1.7. NAVIGATION NAV
    1.8. NAVIGATION NAV DROPDOWN
    1.9. NAVIGATION CUSTOM BUTTON

3. HEADER AREA

4. DOMAIN SEARCH AREA

5. CALL TO ACTION AREA

6. SERVICES AREA
    6.1. SERVICE ITEM

7. VIDEO POP UP AREA

8. ABOUT AREA
    8.1. TEAM MEMBER
    8.2. TEAM SKILLS
    8.3. TEAM SLIDER BUTTONS

9. FEEDBACK AREA
    9.1. FEEDBACK ITEM
    9.2. FACTS ITEM

10. FEATURES AREA

11. PRICING TABLE AREA
    11. PRICING TABLE ITEM

12. DOMAIN PRICING AREA

13. BLOG AREA
    13.1. POST ITEM

14. FAQ AREA
    X.X. FAQ CATEGORIES
    X.X. FAQ ITEM
    X.X. FAQ ITEM TITLE

14. REGISTRATION AREA

15. CONTACT US AREA
    15.1. CONTACT FORM
    15.2. CONTACT ADDRESS

16. MAP AREA

17. FOOTER WIDGETS AREA
    17.1. TAGS WIDGET
    17.2. ABOUT WIDGET
    17.3. TWITTER WIDGET

18. COPYRIGHT AREA

19. GENERAL PAGE STYLES
    19.1. PAGE HEADER AREA

20. ABOUT PAGE

21. TESTIMONIAL PAGE

22. BLOG PAGE

23. BLOG DETAILS PAGE
    23.1. POST CONTENT
    23.2. POST COMMENTS
    23.3. POST COMMENT FORM
    23.4. FLICKER WIDGET

24.1. CONTACT PAGE

25. 404 PAGE

26. HELPER CLASSES
    26.1. BACKGROUND IMAGE
    26.2. BORDER
    26.3. RESET GUTTER
*/

/*------------------------------------*\
    1. GENERAL STYLES
\*------------------------------------*/
/* 1.1. TYPHOGRAPHY */
html, body {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    height: 100%;
}
body {
    background-color: #fff;
    color: #737373;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}
p {
    font-size: 14px;
    font-weight: 300;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    line-height: 22px;
    color: #737373;
}
a, .mdl-button {
    font-weight: 500;
    color: #303030;
}
a:hover, a:focus {
    color: #ff5252;
    text-decoration: none;
    outline: none;
}

.form-control.error {
    border-color: #ff5252;
}

/* 1.2. PADDING */
.padding-0 {
    padding: 0;
}

.padding-80-0 {
    padding: 80px 0;
}

.padding-80-0-0 {
    padding: 80px 0 0;
}

.padding-80-0-50 {
    padding: 80px 0 50px;
}

/* 1.3. SECTION TITLE */
.section-title {
    position: relative;
    margin-top: -1px;
    margin-bottom: 75px;
    color: #303030;
    font-size: 32px;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    text-transform: uppercase;
}
.section-title:before {
    content: " ";
    background-color: #ff5252;
    position: absolute;
    height: 2px;
    width: 50px;
    left: 50%;
    bottom: -15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.section-title span {
    display: block;
    color: #888989;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
}
.section-title.text-left {
    text-align: left;
}
.section-title.text-left:before {
    left: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
.section-title.text-right {
    text-align: right;
}
.section-title.text-right:before {
    left: auto;
    right: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
.section-title.white,
.section-title.white span {
    color: #fff;
}

/* 1.4. BACKGROUND COLORS */
.bg--color-main {
    color: #fff;
    background-color: #ff5252;
}

.bg-whitesmoke {
    background-color: #f8f8f8;
    border-style: solid;
    border-width: 1px 0;
    border-color: #e9e9e9;
}

/* 1.5. BUTTONS */
.mdl-button--color.mdl-button,
.mdl-button--color.mdl-button.mdl-button--raised {
    color: #fff;
    background-color: #ff5252;
}

/* 1.6. VERTICAL CENTERING */
.vc-parent {
    width: 100%;
    height: 100%;
    display: table;
}
.vc-child {
    display: table-cell;
    vertical-align: middle;
}
.vc-child-bottom {
    display: table-cell;
    vertical-align: bottom;
}

.row-md-vc > div {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

/* 1.7. BREADCRUMB */
.breadcrumb {
    background-color: transparent;
    padding: 8px 15px 0;
    margin-top: 22px;
    margin-bottom: 0;
    -webkit-transition: padding .25s;
            transition: padding .25s;
}
#topNav.sticky .breadcrumb {
    padding: 2px 15px 22px;
}
.breadcrumb li a {
    color: #fff;
    -webkit-transition: color .25s;
            transition: color .25s;
}
.breadcrumb li a:hover {
    color: #ff5252;
}
.breadcrumb>.active {
    color: #ff5252;
    font-weight: 300;
}

/* 1.8. BACK TO TOP BUTTON */
#backToTop {
    position: fixed;
    bottom: 45px;
    right: 35px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    -webkit-transition: opacity .25s ease-in-out;
            transition: opacity .25s ease-in-out;
    z-index: 1;
}
body.isTawkMobile #backToTop {
    right: 18px;
    bottom: 85px;
}
#backToTop.show,
#backToTop.alwaysShow {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
}
#backToTop button {
    padding: 8px 0 12px;
    box-shadow: 0 2px 4.7px .3px rgba(0,0,0,.24);
}

/* 1.9. PRELOADER */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999999999;
    display: table;
}
#preloader .mdl-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
#preloader .progressbar,
#preloader .bufferbar,
#preloader .auxbar {
    width: 0%;
}
#preloader .progressbar.bar1 {
    background-color: #ff5252;
}
#preloader .bufferbar {
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,.7), rgba(255,255,255,.7)), -webkit-linear-gradient(left, #ff5252, #ff5252);
    background-image: linear-gradient(to right, rgba(255,255,255,.7), rgba(255,255,255,.7)), linear-gradient(to right, #ff5252, #ff5252);
}
#preloader .auxbar {
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,.7), rgba(255,255,255,.7)), -webkit-linear-gradient(left, #ff5252, #ff5252);
    background-image: linear-gradient(to right, rgba(255,255,255,.7), rgba(255,255,255,.7)), linear-gradient(to right, #ff5252, #ff5252);
}

.preloader-logo {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    display: block;
    width: 100%;
    height: auto;
    margin-top: -100px;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    -webkit-transition: margin .25s;
            transition: margin .25s;
}
.preloader-logo span.first {
    color: #ff5252;
}
.preloader-logo span.first,
.preloader-logo span.second {
    display: inline-block;
    vertical-align: middle;
}
.preloader-logo span.second {
    color: #303030;
}
.preloader-logo i {
    margin-right: 5px;
}

/* 1.10. COLOR SWTICHER */
#open-switcher,
#close-switcher {
    position: fixed;
    top: 200px;
    right: 0px;
    z-index: 3;
    padding: 15px;
    color: #fff;
    background: #ff5252;
    cursor: pointer;
    border-left: 0px;
    border-radius: 2px;
    border-top-right-radius: 0;
}
#close-switcher {
    color: #fff;
    background: #ff5252;
    border: 0;
    display: none;
    right: 200px;
    box-shadow: -10px 5px 46px 8px rgba(0,0,0,.14), -10px 0px 26px -6px rgba(0,0,0,.2);
}
#demo-colors {
    position: fixed;
    top: 200px;
    right: -202px;
    width: 200px;
    min-height: 0;
    background: #FFF;
    border-radius: 0;
}
#demo-wrapper {
    width: 180px;
    margin: 0 auto;
    padding-bottom: 30px;
}
#demo-wrapper h2 {
    margin-bottom: 0;
    font-size: 15px;
    font-weight: bold;
    color: #000;
}
#demo-wrapper ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
#demo-wrapper ul li.color-1 {
    background: #2196F3;
    border: 1px solid #fff;
}
#demo-wrapper ul li.color-2 {
    background: #4CAF50;
    border: 1px solid #fff;
}
#demo-wrapper ul li.color-3 {
    background: #FF9800;
    border: 1px solid #fff;
}
#demo-wrapper ul li.color-4 {
    background: #ff5252;
    border: 1px solid #fff;
}
#demo-wrapper ul li.color-5 {
    background: #673AB7;
    border: 1px solid #fff;
}
#demo-wrapper ul li.active {
    border: 1px solid #fff;
    box-shadow: 0px 0px 0px 1px #ddd;
}
#demo-wrapper ul li {
    float: left;
    width: 26px;
    height: 26px;
    margin: 5px;
    cursor: pointer;
}
.clear {
    clear: both;
}
#demo-wrapper p {
    font-size: 12px;
    padding-top: 10px;
    text-align: center;
    color: #999;
    cursor: pointer;
}

.section {
    background-color: #fff;
}

/* 1.11. BROWSER UPGRADE */
.browserupgrade {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    padding: 20px 0;
    color: #fff;
    background-color: #ff9800;
    text-align: center;
}
.browserupgrade a {
    color: #fff;
    text-decoration: underline;
}
.browserupgrade + #preloader {
    display: none;
}

/*------------------------------------*\
    2. NAVIGATION AREA
\*------------------------------------*/
#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    z-index: 3;
}

/* 1.1. NAVIGATION TOPBAR */
.navigation--topbar {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* 1.2. NAVIGATION TOPBAR INFO */
.navigation--topbar-info {
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
}
.navigation--topbar-info > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.navigation--topbar-info > ul > li {
    float: left;
    margin-left: 20px;
    padding-left: 20px;
    padding-right: 1px;
    border-left: 1px solid rgba(255,255,255,0.2);
    font-size: 12px;
    line-height: 16px;
    font-style: italic;
}
.navigation--topbar-info > ul > li:first-child {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}
.navigation--topbar-info > ul > li > a {
    color: #fff;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transition: opacity .25s ease;
            transition: opacity .25s ease;
}
.navigation--topbar-info > ul > li > a:hover {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.navigation--topbar-info > ul > li i.fa {
    margin-right: 10px;
}

/* 1.3. NAVIGATION TOPBAR SOCIAL */
.navigation--topbar-social {
    float: right;
    margin-top: 5px;
}
.navigation--topbar-social > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.navigation--topbar-social > ul > li {
    float: left;
    margin-right: 15px;
    font-size: 12px;
    line-height: 16px;
}
.navigation--topbar-social > ul > li:last-child {
    margin-right: 0;
}
.navigation--topbar-social > ul > li > a {
    color: #fff;
    -webkit-transition: color .25s ease;
            transition: color .25s ease;
}
.navigation--topbar-social > ul > li > a:hover,
.navigation--topbar-social > ul > li > a:focus {
    color: #ff5252;
}

/* 1.4. NAVIGATION NAVBAR */
.navigation--navbar {
    margin-bottom: 0;
    padding-top: 20px;
    border: 0;
    border-radius: 0;
}

/* 1.5. NAVIGATION NAVBAR TOGGOLE BUTTON */
.navigation--navbar .navbar-toggle .icon-bar {
    background-color: #ff5252;
    -webkit-transition: background-color .25s ease-in-out;
            transition: background-color .25s ease-in-out;
}
.navigation--navbar .navbar-toggle.collapsed .icon-bar {
    background-color: #fff;
}

/* 1.6. NAVIGATION NAVBAR BRAND */
.navigation--navbar .navbar-brand {
    float: none;
    display: table-cell;
    vertical-align: middle;
    padding: 0;
    height: 58px;
    color: #fff;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    overflow: hidden;
}
.navigation--navbar .navbar-brand span {
    color: #ff5252;
}
.navigation--navbar .navbar-brand span i {
    margin-right: 5px;
}

/* 1.7. NAVIGATION NAV */
.navigation--nav {
    float: right;
    margin-top: 10px;
}
.navigation--nav .nav > li:before {
    display: inline-block;
    margin-right: -8px;
    color: #fff;
    font: normal normal normal 14px/1 FontAwesome;
    -webkit-transition: color .25s ease;
            transition: color .25s ease;
}
.navigation--nav .nav > li:hover:before,
.navigation--nav .nav > li.active:before,
.navigation--nav .nav > li.open:before {
    color: #ff5252;
}
.navigation--nav .nav > li > a {
    display: inline-block;
    padding: 10px 15px;
    color: #fff;
    font-size: 13px;
    line-height: 17px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-transition: color .25s ease;
            transition: color .25s ease;
}
.navigation--nav .nav > li > a:hover,
.navigation--nav .nav > li > a:focus,
.navigation--nav .nav > .open > a,
.navigation--nav .nav > .open > a:hover,
.navigation--nav .nav > .open > a:focus {
    background-color: transparent;
}
.navigation--nav .nav > li:hover > a,
.navigation--nav .nav > li.active > a,
.navigation--nav .nav > li.open > a,
.navigation--nav .nav > .dropdown > .dropdown-menu > li > a:hover,
.navigation--nav .nav > .dropdown > .dropdown-menu > li > a:focus,
.navigation--nav .nav > .dropdown > .dropdown-menu > li.active > a {
    color: #ff5252;
    background-color: transparent;
}
.navigation--nav .nav > li > a > .caret {
    margin-left: 5px;
}

/* 1.8. NAVIGATION NAV DROPDOWN */
.navigation--nav .nav > .dropdown:hover > .dropdown-menu {
    display: block;
}
.navigation--nav .nav > .dropdown > .dropdown-menu {
    padding-top: 13px;
    padding-bottom: 13px;
    border-radius: 0;
}
.navigation--nav .nav > .dropdown > .dropdown-menu > li > a {
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    -webkit-transition: color .25s ease;
            transition: color .25s ease;
}

/* 1.9. NAVIGATION CUSTOM BUTTON */
.navigation--custom-btn {
    float: right;
    margin-top: 10px;
    margin-left: 15px;
}
.navigation--custom-btn a.mdl-button + a.mdl-button {
    margin-left: 15px;
}

/*------------------------------------*\
    3. HEADER AREA
\*------------------------------------*/
#header {
    width: 100%;
    height: 100%;
    z-index: 0;
}

.content-inner-wrapper,
#header .owl-wrapper-outer,
#header .owl-wrapper,
#header .owl-item,
#header .header-item,
#header .container,
#header .row,
#header .row > div {
    height: 100%;
}

.header-item {
    position: relative;
    padding-top: 50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.header-item:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(34, 34, 34, 0.8);
    z-index: -1;
}

.header-item h2 {
    display: inline-block;
    padding: 0px 20px;
    border-left: 5px solid #ff5252;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    text-transform: uppercase;
}
.header-item h2 span {
    color: #adadad;
}
.header-item-3 h2 {
    margin-bottom: 10px;
}
.header-item p {
    padding: 0 20px;
    border-left: 5px solid #fff;
    color: #fff;
    font-size: 16px;
}

.header-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.header-content ul li {
    position: relative;
    padding-left: 20px;
    float: left;
    width: 50%;
}
.header-content ul li:before {
    content: " ";
    position: absolute;
    top: 7px;
    left: 0;
    width: 8px;
    height: 8px;
    border: 2px solid #ff5252;
    border-radius: 50%;
}

.owl-fadeInDown,
.owl-fadeInUp {
    visibility: hidden;
}
.owl-item.active .owl-fadeInDown {
    -webkit-animation: fadeInDown 1s linear 0s;
            animation: fadeInDown 1s linear 0s;
    visibility: visible;
}
.owl-item.active .owl-fadeInUp {
    -webkit-animation: fadeInUp 1s linear 0s;
            animation: fadeInUp 1s linear 0s;
    visibility: visible;
}
.owl-item.active .animate-2x {
    -webkit-animation-duration: 0.55s;
            animation-duration: 0.55s;
}

.header-item a.mdl-button {
    min-width: 130px;
    height: auto;
    margin-top: 20px;
    padding: 4px 0;
}
.header-item a.mdl-button img {
    max-width: 100%;
    height: 35px;
}

.header-img {
    position: relative;
    display: block;
}
.header-img img.img-responsive {
    width: 100%;
}
.header-img .header-img-slider,
.header-img .header-img-inner {
    position: absolute;
    top: 9.5%;
    left: 150px;
    width: 261px;
    cursor: ew-resize;
}
.header-img-slider img {
    max-height: 68.5%;
}

.header--badge {
    position: absolute;
    display: table;
    width: 135px;
    height: 135px;
    color: #303030;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    z-index: 0;
}
.header--badge-1 {
    top: 15%;
}
.header--badge-2 {
    top: 40%;
    left: 25%;
    color: #fff;
}
.header--badge p {
    display: table-cell;
    vertical-align: middle;
    padding: 0;
    border: 0;
    color: inherit;
    font-size: 16px;
    line-height: 16px;
}
.header--badge span {
    display: block;
    font-size: 34px;
    line-height: 38px;
    font-weight: 500;
}

.header-items .owl-controls {
    position: absolute;
    bottom: 15px;
    right: 0;
    width: 100%;
    text-align: center;
}
.header-items > .owl-controls {
    bottom: 30px;
}
.header-items .owl-pagination {
    display: inline-block;
    overflow: hidden;
}
.header-items .owl-page {
    width: 8px;
    height: 8px;
    float: left;
    margin: 1px 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    -webkit-transition: .25s;
            transition: .25s;
    outline: 0;
}
.header-items .owl-page.active {
    width: 10px;
    height: 10px;
    margin-top: -0.5px;
    margin-left: 4.5px;
    background-color: #fff;
}

/*------------------------------------*\
    4. DOMAIN SEARCH AREA
\*------------------------------------*/
#domainSearch {
    padding: 60px 0;
    color: #fff;
    background-color: #ff5252;
}
#domainSearch form {
    font-size: 0;
}
#domainSearch form .mdl-textfield__input {
    border-color: #fff;
    color: #fff;
    outline: 0;
}
#domainSearch form .mdl-textfield__label {
    color: #fff;
    font-weight: 400;
    margin-bottom: 0;
}
#domainSearch form .mdl-textfield__label:after {
    background-color: #fff;
}
#domainSearch form .select-box {
    margin-top: 20px;
    width: 140px;
    padding: 0 30px;
    text-align: center;
    vertical-align: top;
    z-index: 0;
}
#domainSearch form .select-box:before {
    content: " ";
    position: absolute;
    top: 13px;
    right: 30px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    z-index: -1;
}
#domainSearch form .select-box select {
    color: #fff;
    background-color: transparent;
    width: 100%;
    padding: 4px 0;
    font-size: 16px;
    border: 0;
    border-bottom: 1px solid #fff;
    -webkit-appearance: none;
       -moz-appearance: none;
    outline: 0;
}
#domainSearch form .select-box select option {
    color: #737373;
    background-color: rgba(255, 255, 255, 0.9);
}
#domainSearch form .mdl-button {
    margin-top: 15px;
    color: #303030;
    background-color: #fff;
    vertical-align: top;
}

#domainSearch .domain-ext {
    margin-top: 9px;
}
#domainSearch .extension {
    display: table-cell;
    width: 1%;
    padding-left: 20px;
    color: #fff;
    font-weight: 500;
    border-right: 1px dotted #fff;
}
#domainSearch .extension:first-child {
    padding-left: 0;
}
#domainSearch .domain-ext > .extension:last-child {
    border-right: none;
}
#domainSearch .extension span {
     display: block; 
}
#domainSearch .extension span.name {
     font-size: 22px;
    line-height: 26px;
}

/*------------------------------------*\
    5. CALL TO ACTION AREA
\*------------------------------------*/
#callToAction {
    padding: 80px 0;
    background-color: #ff5252;
}

#callToAction h2 {
    color: #fff;
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
}
#callToAction .buy-now-btn {
    padding: 5px 40px;
    color: #222;
    background-color: #fff;
    height: auto;
    font-weight: 500;
}

/*------------------------------------*\
    6. SERVICES AREA
\*------------------------------------*/
/* 6.1. SERVICE ITEM */
.service--content {
    position: relative;
    margin-bottom: 30px;
    text-align: center;
}
.service--content i.fa {
    display: block;
    width: 62px;
    margin: 0 auto 15px;
    padding: 15px 0;
    color: #ff5252;
    border: 1px solid #ff5252;
    border-radius: 50%;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
}
.service--content h3 {
    margin: 0 0 10px;
    color: #303030;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    text-align: center;
}
.service--content p:last-child {
    margin-bottom: 0;
}

.service--flip {
    padding: 30px;
    background-color: #f8f8f8;
    border-radius: 2px;
    -webkit-transition: transform .55s ease-in-out, opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out, -webkit-transform .55s ease-in-out;
            transition: opacity .55s ease-in-out, -webkit-transform .55s ease-in-out;
            transition: transform .55s ease-in-out, opacity .55s ease-in-out;
            transition: transform .55s ease-in-out, opacity .55s ease-in-out, -webkit-transform .55s ease-in-out;
}
.service--content:hover .service--flip {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
}

.service--flipped {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
    -webkit-transition: transform .55s ease-in-out, opacity .55s ease-in-out;
            -webkit-transition: opacity .55s ease-in-out, -webkit-transform .55s ease-in-out;
            transition: opacity .55s ease-in-out, -webkit-transform .55s ease-in-out;
            transition: transform .55s ease-in-out, opacity .55s ease-in-out;
            transition: transform .55s ease-in-out, opacity .55s ease-in-out, -webkit-transform .55s ease-in-out;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    overflow: hidden;
}
.service--content:hover .service--flipped {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.service--flipped.bg--color-main h3,
.service--flipped.bg--color-main p {
    color: #fff;
    padding: 0 15px;
}
.service--flipped.bg--color-main .mdl-button {
    color: #303030;
    background-color: #fff;
}

/*------------------------------------*\
    7. VIDEO POP UP AREA
\*------------------------------------*/
#bgVideo {
    height: 500px !important;
    background-size: cover;
    position: relative;
}
#bgVideo:before {
    content: " ";
    background: rgba(48,48,48,0.8);
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
}
#bgVideo .play-button {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -28px;
    text-align: center;
}
#bgVideo .play-button a {
    outline: 0;
}
#bgVideo .play-button i.fa {
    font-size: 18px;
    margin-left: 5px;
    margin-top: 20px;
}
/*------------------------------------*\
    8. ABOUT AREA
\*------------------------------------*/
#about {
    padding: 0 0 80px;
    border-style: solid;
    border-width: 1px 0 1px;
    border-color: #e9e9e9;
}

.about--img {
    padding: 90px 60px 0;
}

/* 8.1. TEAM MEMBER */
.about-page-team {
    position: relative;
    z-index: 0;
}
.about-page-team:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34, 34, 34, 0.8);
    z-index: 0;
}

.team-items .owl-item {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 3px;
    overflow: hidden;
}

.team-item {
    cursor: default;
}
.team-item .mdl-card {
    width: auto;
    background-color: transparent;
    border-radius: 0;
}
.team-item .mdl-card__title {
    padding: 0;
}
.team-item .mdl-card__title figure {
    position: relative;
    padding-bottom: 76px;
    width: 100%;
}
.team-item .mdl-card__title figure > img {
    width: 100%;
}
.team-item .mdl-card__title figcaption {
    padding: 10px 0 0;
    position: absolute;
    bottom: -45px;
    left: 0;
    width: 100%;
    background-color: #fff;
    text-align: center;
    -webkit-transition: bottom .25s;
            transition: bottom .25s;
}
.team-item .mdl-card__title:hover figcaption {
    bottom: 0;
}
.team-item h2 {
    padding: 0 15px 0;
    font-size: 18px;
    color: #737373;
    line-height: 18px;
    margin-top: 8px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.team-item h2 a {
    -webkit-transition: color .25s;
            transition: color .25s;
}
.team-item h4 {
    padding: 0 15px 0;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 14px;
    color: #b9b9b9;
}

.team-social-links {
    height: 45px;
    list-style: none;
    margin: 20px 0 0;
    padding: 5px 0 4px;
    border-top: 1px solid #ddd;
    overflow: hidden;
    text-align: center;
}
.team-social-links li {
    display: inline-block;
}
.team-social-links li a {
    border-radius: 50%;
    min-width: 35px;
    height: 35px;
    padding: 0;
    color: #737373;
    -webkit-transition: color .25s, background-color .25s, border-color .25s;
            transition: color .25s, background-color .25s, border-color .25s;
}
.team-social-links li a:hover {
    color: #ff7373;
}
.team-social-links li .mdl-button__ripple-container {
    border-radius: 50%;
}

/* 8.2. TEAM SKILLS */
.section-title.team-title {
    margin-right: 15px;
}
.team-skills {
    padding-left: 30px;
}

.about-description {
    padding: 0 0 90px;
}
.about-description .row {
    display: table;
}
.about-description .row > div {
    display: table-cell;
    vertical-align: middle;
    float: none;
}
.about-desc-img img {
    width: 100%;
}
.team-skills .about-description a.mdl-button {
    margin-top: 10px;
}

#about.bg-img .team-skills p {
    color: #fff;
}
.team-skills p {
    margin-bottom: 0;
}
.team-skills > p {
    font-weight: 500;
}
.team-skills .progress {
    height: 4px;
    overflow: visible;
}
.team-skills .progress-bar {
    background-color: #ff5252;
    position: relative;
}
.team-skills .progress-bar span {
    position: absolute;
    top: -16px;
    right: -16px;
    color: #737373;
    background-color: #f8f8f8;
    padding: 7.5px 6px;
    border-radius: 50%;
    box-shadow: 0 2px 4.7px .3px rgba(0,0,0,.24);
}

/* 8.3. TEAM SLIDER BUTTONS */
.team-items .owl-pagination {
    text-align: center;
    margin-top: 30px;
}

.team-items .owl-page {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin: 0 5px;
    border: 1px solid #ff5252;
}
.team-items .owl-page.active {
    background-color: #ff5252;
}

/*------------------------------------*\
    9. FEEDBACK AREA
\*------------------------------------*/
#feedback {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 0;
}
#feedback:before {
    content: " ";
    background-color: rgba(34,34,34,0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.feedback-wrapper .container {
    padding-top: 80px;
    padding-bottom: 30px;
    background-color: #fff;
    border-radius: 4px;
    z-index: 0;
}

/* 9.1. FEEDBACK ITEM */
.feedback-items {
    margin-bottom: 70px;
}
.feedback-items .owl-item {
    padding: 0px 40px;
    overflow: hidden;
}

.feedback-item > .row {
    display: table;
}
.feedback-item > .row > div {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    float: none;
}

.feedback-item .mdl-card {
    width: initial;
    min-height: 0;
    overflow: visible;
}
.feedback-item .mdl-card:before {
    content: " ";
    position: absolute;
    top: 50%;
    width: 25px;
    height: 25px;
    -webkit-transform: translateY(-50%) rotate(44deg);
            transform: translateY(-50%) rotate(44deg);
    background-color: #ff5252;
    border-color: transparent transparent transparent #fff;
    z-index: -1;
}

.feedback-item.content-right .mdl-card:before {
    left: -13px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.feedback-item.content-left .mdl-card:before {
    right: -13px;
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.14), 3px 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.feedback-item .mdl-card__supporting-text {
    background-color: #ff5252;
    color: #fff;
    width: 100%;
}

.feedback-content p {
    margin-bottom: 0;
    color: #fff;
}
.feedback-content p cite {
    display: block;
    margin-top: 10px;
    font-weight: 700;
}

.feedback-items .owl-pagination {
    text-align: center;
    margin-top: 30px;
}
.feedback-items .owl-page {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin: 0 5px;
    border: 1px solid #ff5252;
    -webkit-transition: background-color .25s ease-in-out;
            transition: background-color .25s ease-in-out;
}
.feedback-items .owl-page.active {
    background-color: #ff5252;
}

/* 9.2. FACTS ITEM */
.facts {
    position: relative;
    margin-bottom: 50px;
}
.facts:before {
    position: absolute;
    width: 1px;
    height: 100px;
    background: rgba(0,0,0,.09);
    right: -20px;
    top: 50%;
    margin-top: -50px;
    content: " ";
}
.facts.last-child:before {
    width: 0;
}
.facts-icon i.fa {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 20px;
    color: #ff5252;
    font-size: 26px;
    box-shadow: 0 2px 4.7px .3px rgba(0,0,0,.24);
    -webkit-transition: .25s;
            transition: .25s;
}
.facts:hover i.fa {
    background-color: #ff5252;
    color: #fff;
}
.facts-icon i.fa:before {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.facts-text {
    margin-bottom: 12px;
    text-transform: capitalize;
}
.facts-number {
    font-size: 22px;
}

/*------------------------------------*\
    10. FEATURES AREA
\*------------------------------------*/
#features .row > div:first-child {
    z-index: 1;
}

.feature--item {
    margin-bottom: 30px;
}
.feature--item:last-child {
    margin-bottom: 0;
}

.feature--content h3 {
    position: relative;
    margin: 0 0 15px;
    color: #303030;
    font-size: 26px;
    line-height: 30px;
    font-weight: 500;
}
.feature--content h3:after,
.feature--content h3:before {
    content: " ";
    position: absolute;
    top: 50%;
    background-color: #ff5252;
    z-index: 1;
}
.feature--content h3:before {
    left: -155px;
    width: 15px;
    height: 15px;
    margin-top: -8px;
    border-radius: 50%;
}
.feature--content h3:after {
    right: 100%;
    width: 120px;
    height: 2px;
    margin-top: -1px;
    margin-right: 20px;
}
.feature--item.text-right .feature--content h3:before {
    left: auto;
    right: -155px;
}
.feature--item.text-right .feature--content h3:after {
    left: 100%;
    right: auto;
    margin-left: 20px;
    margin-right: 0;
}

.feature--content p:last-child {
    margin-bottom: 0;
}

.features--img {
    margin-bottom: 30px;
}

/*------------------------------------*\
    11. PRICING TABLE AREA
\*------------------------------------*/
/* 11. PRICING TABLE ITEM */
.pricing-table--item {
    margin-bottom: 30px;
}
.pricing-table--item .content {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    background-color: #fff;
    text-align: center;
    -webkit-transition: .25s;
            transition: .25s;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
}
.pricing-table--item .content:hover {
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);
}
.pricing-table--item .title {
    padding: 30px 0;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-transform: capitalize;
}
.pricing-table--item .price {
    padding: 30px 0 15px;
}
.pricing-table--item .price .sign {
    font-size: 48px;
}
.pricing-table--item .price .amount {
    font-size: 48px;
    font-weight: 700;
}
.pricing-table--item .body {
    margin: 20px 0;
}
.pricing-table--item .body ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 300;
}
.pricing-table--item .body li {
    margin-bottom: 8px;
    font-weight: 300;
}
.pricing-table--item .footer {
    padding: 25px 0;
    border-top: 1px solid rgba(0,0,0,.1);   
    font-size: 16px;
    line-height: normal;
}
.pricing-table--item .footer a {
    height: auto;
    padding: 3px 27px;
}

/*------------------------------------*\
    12. DOMAIN PRICING AREA
\*------------------------------------*/
#domainPricing table {
    width: 100%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
}
#domainPricing table thead {
    background-color: #ff5252;
    color: #fff;
}
#domainPricing table thead th {
    padding: 15px 0;
}
#domainPricing table tr {
    padding: 5px;
    border: 1px solid #ff5252;
}
#domainPricing table th,
#domainPricing table td {
    padding: 10px;
    text-align: center;
}
#domainPricing table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}
#domainPricing table tbody tr {
    border-color: #e9e9e9;
}
#domainPricing table tbody td {
    background-color: #fff;
}
#domainPricing table tbody tr:nth-child(even) td {
    background-color: #f8f8f8;
}
#domainPricing table tbody td:first-child {
    font-weight: 700;
    font-size: 18px;
}
#domainPricing.reset-font table tbody td:first-child {
    font-weight: normal;
    font-size: inherit;
}

/*------------------------------------*\
    13. BLOG AREA
\*------------------------------------*/
/* 13.1. POST ITEM */
.post-item .mdl-card {
    width: auto;
}
.post-item .mdl-card__title {
    padding: 0;
    display: block;
    width: 100%;
    overflow: hidden;
}
.post-item .mdl-card__supporting-text {
    padding: 0 20px;
    width: 100%;
}
.post-item .mdl-card__actions {
    padding: 0 20px;
    position: relative;
}
.post-item .mdl-card__actions:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 80px;
    background-color: #e9e9e9;
}
.post-item .mdl-card__actions a.read-more,
.post-item .mdl-card__actions a.comments {
    margin: 20px 0;
}
.post-item .mdl-card__actions a.comments {
    -webkit-transition: color .25s, background-color .25s ease-in-out, border-color .25s;
            transition: color .25s, background-color .25s ease-in-out, border-color .25s;
    overflow: visible;
}

.post-img img {
    width: 100%;
}
.post-metadata {
    margin-bottom: 15px;
}
.post-metadata p {
    margin-bottom: 0;
    margin-top: 15px;
    font-size: 14px;
    color: #737373;
}
.post-metadata i.fa {
    margin-right: 5px;
}
.post-metadata p a {
    color: #737373;
    border-bottom: 1px dotted transparent;
    -webkit-transition: border-color .25s;
            transition: border-color .25s;
}
.post-metadata p a:hover {
    border-color: #737373;
}
.post-metadata p span {
    margin: 0 5px;
}

.post-title h2 {
    margin: 15px 0 10px;
    padding-left: 15px;
    border-left: 3px solid #ff5252;
    font-size: 24px;
    line-height: 30px;
    text-transform: uppercase;
    -webkit-transition: border-color .25s;
            transition: border-color .25s;
}
.post-title h2 a {
    color: #303030;
    font-weight: 500;
    -webkit-transition: color .25s;
            transition: color .25s;
}
.post-title h2:hover a {
    color: #ff5252;
}

.post-summary p {
    color: #737373;
}

/*------------------------------------*\
    14. FAQ AREA
\*------------------------------------*/
/* X.X. FAQ CATEGORIES */
.faq--categories {
    margin-bottom: 60px;
    padding: 0 15px;
    background-color: #303030;
    border-radius: 4px;
}
.faq--categories:before,
.faq--categories:after {
    content: " ";
    display: table;
}
.faq--categories:before,
.faq--categories:after {
    clear: both;
}
.faq--categories ul {
    float: left;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.faq--categories li {
    display: inline-block;
}
.faq--categories li a {
    display: block;
    padding: 19px 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    -webkit-transition: border-color .25s;
            transition: border-color .25s;
}
.faq--categories li a:hover,
.faq--categories li.active a {
    border-color: #ff5252;
}

.faq--custom-btn {
    float: right;
    height: auto;
    margin-right: -15px;
    padding: 11px 30px 10px;
    box-shadow: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* X.X. FAQ ITEM */
.faq--item {
    margin-bottom: 47px;
}
.faq--item:last-child {
    margin-bottom: 0;
}

/* X.X. FAQ ITEM TITLE */
.faq--item-title {
    margin-bottom: 17px;
}
.faq--item-title h4 {
    margin: 0;
    color: #303030;
    font-size: 26px;
    line-height: 30px;
    font-weight: 500;
}

/*------------------------------------*\
    14. REGISTRATION AREA
\*------------------------------------*/
.reg--login {
    max-width: 380px;
    margin: 0 auto;
}
.reg--login .mdl-card {
    width: 100%;
}
.reg--login .mdl-card__supporting-text {
    width: 100%;
}

.reg--login .mdl-textfield {
    width: 100%;
    max-width: none;
}
.reg--login .mdl-textfield__label {
    margin-bottom: 0;
    font-weight: 400;
}
.reg--login .mdl-textfield__label:after {
    background-color: #ff5252;
}
.reg--login .mdl-textfield--floating-label.is-focused .mdl-textfield__label {
    color: #737373;
}
.reg--login .mdl-checkbox {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    cursor: pointer;
}
.reg--login .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border-color: #ff5252;
}
.reg--login .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background-color: #ff5252;
}
.reg--login .submit-btn {
    margin-top: 19px;
}
.reg--login .helper-link {
    float: right;
    margin-top: 19px;
}
.reg--login .helper-link:hover {
    color: #ff5252;
}

/*------------------------------------*\
    15. CONTACT US AREA
\*------------------------------------*/
#contact {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#contact:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(34, 34, 34, 0.8);
}

#contact .section-title {
    color: #fff;
}

/* 15.1. CONTACT FORM */
.contact-form-status .alert {
    border: 0;
    border-radius: 0;
    color: #fff;
    background-color: #ff9800;
}

.contact-form .mdl-textfield {
    width: 100%;
}
.contact-form .mdl-textfield textarea {
    resize: none;
}
.contact-form input,
.contact-form textarea {
    border-color: #fff;
    color: #fff;
    outline: 0;
}
.contact-form button[type="submit"] {
    padding: 4px 40px;
    margin-top: 20px;
    height: auto;
}
.contact-form label {
    margin-bottom: 0;
    color: #fff;
    font-weight: 100;
}
.contact-form label:after {
    background-color: #ff5252;
}
.contact-form input.valid + label:after,
.contact-form textarea.valid + label:after {
    background-color: #41C35B;
    visibility: visible;
    width: 100%;
    left: 0;
}
.contact-form input.error + label:after,
.contact-form textarea.error + label:after {
    background-color: #ff5252;
    visibility: visible;
    width: 100%;
    left: 0;
}

/* 15.2. CONTACT ADDRESS */
.contact-address {
    padding: 70px 0 40px;
    background-color: #ff5252;
}

.contact-address i.fa {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 20px;
    color: #ff5252;
    background-color: #fff;
    font-size: 26px;
    -webkit-transition: .25s;
            transition: .25s;
}
.contact-address i.fa:hover {
    box-shadow: 0 2px 4.7px .3px rgba(0,0,0,.24);
}
.contact-address i.fa:before {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}


.contact-address address {
    margin-bottom: 30px;
}
.contact-address p {
    margin-bottom: 0;
    color: #fff;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
}
/*------------------------------------*\
    16. MAP AREA
\*------------------------------------*/
.map-wrapper {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.map-toggle-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 20px 0;
    background-color: rgba(76,175,80,0.8);
    text-align: center;
    z-index: 1;
    cursor: pointer;
}
.map-toggle-btn .opened-text,
.map-toggle-btn .closed-text {
    color: #fff;
    font-size: 16px;
}
.map-toggle-btn .opened-text,
.map-toggle-btn.opened .closed-text {
    display: block;
}
.map-toggle-btn.opened .opened-text,
.map-toggle-btn .closed-text {
    display: none;
}
#map {
    height: 400px;
    width: 100%;
    margin-top: -170px;
    margin-bottom: -170px;
    -webkit-transition: margin .6s ease-in-out;
            transition: margin .6s ease-in-out;
}
.map-toggle-btn.opened + #map {
    margin: 0;
}
/*------------------------------------*\
    17. FOOTER WIDGETS AREA
\*------------------------------------*/
#footer {
    background-color: #303030;
    color: #fff;
    padding: 20px 0 0;
}
.footer-title {
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
}
.footer-title:before {
    content: " ";
    background: #ff5252;
    height: 2px;
    width: 43px;
    position: absolute;
    bottom: 4px;
}

.footer-widget {
    margin-bottom: 61px;
}

/* 17.1. TAGS WIDGET */
.tags-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tags-widget ul li {
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 5px;
}

/* 17.2. ABOUT WIDGET */
.footer-about p {
    color: #acacac;
}

/* 17.3. TWITTER WIDGET */
#footerTwitter {
    max-height: 185px;
    background-color: #fff;
    overflow: auto;
}

/* LINKS WIDGET */
.links-widget ul {
    margin: -6px 0 0;
    padding: 0;
    list-style: none;
}
.links-widget ul li a {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    font-weight: 400;
    text-transform: uppercase;
    -webkit-transition: color .25s, border-color .25s;
            transition: color .25s, border-color .25s;
}

/*------------------------------------*\
    18. COPYRIGHT AREA
\*------------------------------------*/
#copyright {
    padding: 20px 0;
    color: #fff;
    background-color: #1b1b1b;
}
#copyright p {
    margin-bottom: 0;
    text-transform: capitalize;
    color: #fff;
}
#copyright p a {
    color: #ff5252;
    font-weight: 500;
}

/*------------------------------------*\
    19. GENERAL PAGE STYLES
\*------------------------------------*/
/* 19.1. PAGE HEADER AREA */
#pageHeader {
    position: relative;
    padding: 169px 0 72px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}
#pageHeader:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(48,48,48,0.8);
    z-index: -1;
}

.page-title h2 {
    color: #fff;
    font-size: 34px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
}
.page-title h2:before {
    content: " ";
    background-color: #ff5252;
    position: absolute;
    height: 2px;
    width: 80px;
    left: 50%;
    bottom: -15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/*------------------------------------*\
    20. ABOUT PAGE
\*------------------------------------*/
#about.page {
    padding: 0 !important;
    border-bottom: none;
}
.about-page-description {
    background-color: #fff;
}
.about-page-description p:last-child {
    margin-bottom: 0;
}

.about-page-description .about-img {
    margin-bottom: 30px;
}

.about-page-description p.embed-responsive {
    margin-top: 10px;
    margin-bottom: 10px;
}

/*------------------------------------*\
    21. TESTIMONIAL PAGE
\*------------------------------------*/
#feedback.page {
    background-color: #fff;
}
#feedback.page:before {
    display: none;
}
#feedback.page .feedback-wrapper .container {
    padding: 0;
}

#feedback.page .feedback-items {
    margin-bottom: 0;
}

/*------------------------------------*\
    22. BLOG PAGE
\*------------------------------------*/
.blog-page-content .post-item {
    margin-bottom: 30px;
}

.blog-page-post-video {
    width: 100%;
}
.blog-page-post-video.local {
    background-color: #080708;
}

.blog-page-post-video video {
    margin-top: -1px;
}

.blog-page-post-audio {
    width: 100%;
    padding: 20px 20px;
}
.blog-page-post-audio audio {
    width: 100%;
}

.blog-page-sidebar .mdl-card {
    width: auto;
    min-height: 0;
    background-color: transparent;
}
.blog-page-sidebar > .mdl-card > .mdl-card__supporting-text {
    width: 100%;
    padding: 0;
}

.widget {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e9e9e9;
}
.widget:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.widget-title {
    position: relative;
    color: #303030;
    margin: 0 0 40px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: capitalize;
}
.widget-title:before {
    content: " ";
    background-color: #ff5252;
    width: 50px;
    height: 2px;
    position: absolute;
    bottom: -10px;
}

.popular-post-item .preview-img {
    height: 70px;
    width: 70px;
    padding: 4px;
    background-color: #e9e9e9;
    float: left;
    margin-right: 10px;
}
.popular-post-item h5 {
    margin: 0 0 2px;
    color: #303030;
    font-size: 18px;
    line-height: 22px;
}
.popular-post-item h5 a {
    -webkit-transition: color .25s;
            transition: color .25s;
}
.popular-post-item p.metadata {
    font-style: italic;
    margin-top: 0px;
}
.popular-post-item p {
    margin-bottom: 0;
}
.popular-post-item {
    margin-bottom: 20px;
}
.popular-post-item:last-child {
    margin-bottom: 0;
}

.categories-widget {
    margin-left: -1px;
    margin-right: -1px;
}
.categories-widget .nav-tabs>li>a {
    position: relative;
    border: 0;
    background-color: #e9e9e9;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 4px;
    -webkit-transition: .25s;
            transition: .25s;
}
.categories-widget .nav-tabs>li>a:before {
    content: " ";
    position: absolute;
    left: 50%;
    bottom: -40px;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #e9e9e9 transparent;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: .25s;
            transition: .25s;
}
.categories-widget .nav-tabs>li.active>a:before {
    bottom: -20px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
.categories-widget .nav-tabs.nav-justified>li:hover>a,
.categories-widget .nav-tabs.nav-justified>li:focus>a,
.categories-widget .nav-tabs.nav-justified>.active>a {
    background-color: #ff5252;
    color: #fff;
    border: 0;
}

.categories-widget .tab-pane {
    background-color: #e9e9e9;
    padding: 10px 15px;
}

#archivesTab,
#categoriesTab {
    padding: 0;
}
#archivesTab ul,
#categoriesTab ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#archivesTab ul li,
#categoriesTab ul li {
    color: #737373;
    font-weight: 300;
}
#archivesTab ul li a,
#categoriesTab ul li a {
    display: block;
    padding: 8px 0 8px 15px;
    -webkit-transition-property: background-color, color;
            transition-property: background-color, color;
    -webkit-transition-duration: .25s;
            transition-duration: .25s;
}
#archivesTab ul li a:hover,
#archivesTab ul li a:focus,
#archivesTab ul li.active a,
#categoriesTab ul li a:hover,
#categoriesTab ul li a:focus,
#categoriesTab ul li.active a {
    color: #303030;
    background-color: #f9f9f9;
}
#archivesTab ul li a .badge,
#categoriesTab ul li a .badge {
    background-color: transparent;
    color: #737373;
    font-weight: 300;
}

#sidebarTwitter {
    max-height: 270px;
    border: 1px solid #e9e9e9;
    overflow: auto;
}

/*------------------------------------*\
    23. BLOG DETAILS PAGE
\*------------------------------------*/
/* 23.1. POST CONTENT */
.blog-page-content.post-details .post-img {
    margin-bottom: 30px;
}
.blog-page-content.post-details blockquote {
    border-color: #ff5252;
}
.blog-page-content.post-details blockquote:before,
.blog-page-content.post-details blockquote:after {
    display: none;
}
.blog-page-content.post-details blockquote p {
    color: #ff5252;
}

.blog-page-content.post-details ul li {
    font-weight: 300;
    color: #737373;
}

.blog-page-content.post-details .post-author.mdl-card {
    width: auto;
    min-height: auto;
    margin-bottom: 20px;
}
.blog-page-content.post-details .post-author .mdl-card__supporting-text {
    padding: 0;
}
.blog-page-content.post-details a.post-author-name {
    margin-left: 10px;
    -webkit-transition: color .25s;
            transition: color .25s;
}
.blog-page-content.post-details .post-author .social-share {
    list-style: none;
    margin: 20px 0 15px 30px;
    padding: 0;
    overflow: hidden;
}
.blog-page-content.post-details .post-author .social-share li {
    display: inline-block;
}
.blog-page-content.post-details .post-author .social-share li a {
    border-radius: 50%;
    min-width: 35px;
    height: 35px;
    padding: 0;
    color: #737373;
    -webkit-transition: color .25s, background-color .25s ease-in-out, border-color .25s;
            transition: color .25s, background-color .25s ease-in-out, border-color .25s;
}
.blog-page-content.post-details .post-author .social-share li a:hover {
    color: #ff5252;
}
.blog-page-content.post-details .post-author .social-share li a .mdl-button__ripple-container {
    border-radius: 50%;
}

.blog-page-content.post-details .tags-title {
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
}

.post-tags, .post-navigation {
    display: table-cell;
    vertical-align: middle;
    float: none;
}
.post-navigation a.mdl-button {
    background-color: #303030 !important;
    margin-left: 5px;
}

/* 23.2. POST COMMENTS */
.post-comments {
    margin-top: 30px;
}
.post-comments-title {
    margin: 0;
    color: #737373;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
}
.post-comments ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.post-comments ul li {
    margin: 30px 0;
    padding-right: 86px;
}
.post-comments ul li .author-img {
    float: left;
    border: 8px solid #fff;
    position: relative;
}
.post-comments ul li .author-img:before {
    position: absolute;
    top: -8px;
    right: -15px;
    bottom: -8px;
    width: 10px;
    background-color: #fff;
    content: " ";
    z-index: 2;
}
.post-comments ul li:nth-child(even) {
    padding-right: 0;
    padding-left: 86px;
}
.post-comments ul li:nth-child(even) .author-img {
    float: right;
}
.post-comments ul li:nth-child(even) .author-img:before {
    left: -15px;
}
.comment-thumb a {
    overflow: hidden;
    color: #ff5252;
}
.comment-meta {
    margin-bottom: 15px;
    font-weight: 300;
    color: #737373;
}
.single-comment {
    border-bottom: 1px solid #e9e9e9;
    padding: 0;
    border: 0;
    width: auto;
    min-height: 0;
}
.single-comment .mdl-card__supporting-text {
    padding: 15px;
    width: 100%;
}
.single-comment .mdl-card__supporting-text p {
    margin-bottom: 0;
}

/* 23.3. POST COMMENT FORM */
.post-comment-form {
    width: auto;
    min-height: 0;
}
.post-comment-form .mdl-card__title {
    padding-bottom: 0;
    padding-left: 30px;
}
.post-comment-form .post-comments-title {
    padding: 15px;
}
.post-comment-form-group.mdl-card__supporting-text {
    padding-top: 0;
    width: 100%;
}
.post-comment-form-group .form-control {
    border-radius: 0;
    margin-top: 20px;
    box-shadow: none;
    resize: none;
}
.post-comment-form-group .form-control.error {
    border-color: #ff5252;
}

#postCommentForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373;
}
#postCommentForm label:after {
    background-color: #ff5252;
}
#postCommentForm .valid + label:after,
#postCommentForm .valid + label:after {
    background-color: rgb(96,125,139);
    left: 45%;
    width: 10px;
    visibility: hidden;
}
#postCommentForm .error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#postCommentForm .mdl-textfield {
    width: 100%;
}
#postCommentForm .mdl-textfield textarea {
    resize: none;
}

/* 23.4. FLICKER WIDGET */
.flickrs {
    margin-right: -10px;
}
.flickrs ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.flickrs img {
    float: left;
    width: 68px;
    height: 68px;
    margin: 0 5px 5px 0;
    border: 3px solid #fff;
}

/*------------------------------------*\
    24.1. CONTACT PAGE
\*------------------------------------*/
#contact.page:before {
    display: none;
}


#contact.page .section-title {
    color: #737373;
}

#contact.page .mdl-textfield__input,
#contact.page .contact-form label,
#contact.page .contact-address p {
    color: #737373;
}

#contact.page .mdl-textfield__input {
    border-color: #737373;
}
/*------------------------------------*\
    25. 404 PAGE
\*------------------------------------*/
#f0f {
    height: 100%;
    position: relative;
    z-index: 0;
}
#f0f:before {
    content: " ";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(48,48,48,0.8);
    z-index: -1;
}

#f0f .container {
    height: 100%;
}

.f0f-content h1,
.f0f-content p {
    color: #fff;
}
.f0f-content h1 {
    margin-top: 0;
    font-size: 120px;
    line-height: 124px;
    font-weight: 500;
}
.f0f-content p {
    font-size: 20px;
}

.f0f-content .mdl-textfield {
    width: 100%;
    max-width: 320px;
}
.f0f-content .mdl-textfield__input {
    color: #fff;
    border-color: #fff;
}
.f0f-content .mdl-textfield__label {
    margin-bottom: 0px;
    color: #fff;
    font-weight: 300;
}
.f0f-content .mdl-textfield.is-focused .mdl-textfield__label {
    color: #ff5252;
}
.f0f-content .mdl-textfield.is-focused .mdl-textfield__label:after {
    background-color: #ff5252;
}

#f0f a.mdl-button {
    margin-top: 30px;
}

/*------------------------------------*\
    26. HELPER CLASSES
\*------------------------------------*/
/* 26.1. BACKGROUND IMAGE */
.bg-img {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.bg-img:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(34, 34, 34, 0.8);
}

/* 26.2. BORDER */
.bd-none {
    border: 0 !important;
}

/* 26.3. RESET GUTTER */
.no-gutter {
    margin-left: 0;
    margin-right: 0;
}

.no-gutter > [class*='col-'] {
    padding-left: 0;
    padding-right: 0;
}