/* Import Basic Files
---------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
@import url(font-awesome.min.css);
@import url(../js/plugins/rs-plugin/css/settings.css);
@import url(../js/plugins/fancybox/jquery.fancybox.css);
@import url(../js/plugins/uikit/uikit.css);
@import url(../js/plugins/owl/owl.carousel.css);
@import url(../js/plugins/owl/owl.theme.css);
@import url(../js/plugins/owl/owl.transitions.css);

/*
Template Name: Safandi
Description: HTML5 / CSS3 One Page
Version: 1.0
Author: M. Abo Elwafa



1. General
    1.1 Main Styles
    1.2 Anchor
2. Typography
    2.1 Headings
    2.2 Selection Color
    2.3 Colors
3. Home Section
    3.1 Wrapper
    3.2 Top Header
        3.2.1 Wrapper
        3.2.2 Info
        3.2.3 Social Icons
    3.3 Menu
        3.3.1 Wrapper
        3.3.2 Tiny
4. Revolution Slider
    4.1 Wrapper
    4.2 Arrows
    4.3 tp-caption
    4.4 btn
5. Intro Section
    5.1 Wrapper
    5.2 Wrapper ( for home 4 boxes only )
        5.2.1 feature-box-style1
            5.2.1.1 Wrapper
            5.2.2.2 Container
            5.2.2.3 Image
            5.2.2.4 Icon
            5.2.2.5 Containt
            5.2.2.6 Subtitle
            5.2.2.7 Title
            5.2.2.8 Hover
6. Section Title
    6.1 Wrapper
    6.2 Main
    6.3 Description
7. Services Section
    7.1 Wrapper
    7.2 feature-box-style2
        7.2.1 Wrapper
        7.2.2 Icon
        7.2.3 Containt
        7.2.4 Hover
8. Counters Section
    8.1 Wrapper
    8.2 feature-box-style3
        8.2.1 Wrapper
        8.2.2 Icon
        8.2.3 Number
        8.2.4 Title
        8.2.5 Hover
9. Portfolio Section
    9.1 Wrapper
    9.2 Portfolio Filter
        9.2.1 Wrapper
        9.2.2 items
        9.2.3 Anchor
    9.3 isotope
    9.4 Portfolio grid Item
        9.4.1 Wrapper
        9.4.2 Item
        9.4.3 Image
        9.4.4 Overlayer
        9.4.5 Anchor
        9.4.6 Hover
10. Pricing Section
    10.1 Wrapper
    10.2 Pricing Box
        10.2.1 Wrapper
        10.2.2 Price
        10.2.3 Details
        10.2.4 Typography
        10.2.5 Hover
        10.2.6 Button
11. Testimonials Section
    11.1 Wrapper
    11.2 Monials Block
        11.2.1 Wrapper
        11.2.2 Image
        11.2.3 Name
        11.2.4 Containt
        11.2.5 Hover
12. Client Slider
    12.1 Wrapper
    12.2 OWL Clients
        12.2.1 Wrapper
        12.2.2 Image
13. Team Section
    13.1 Wrapper
    13.2 Member Box
        13.2.1 Wrapper
        13.2.2 Image
        13.2.3 Name
        13.2.4 Title
        13.2.5 Social
        13.2.6 Hover
14. Skills Section
    14.1 Wrapper
    14.2 Skill Chart
        14.2.1 Wrapper
        14.2.2 BackGround
        14.2.3 Canvas
        14.2.4 Input
        14.2.5 Title
        14.2.6 Hover
15. Contact Us Section
    15.1 Wrapper
    15.2 Form
        15.2.1 Wrapper
        15.2.2 Textarea
        15.2.3 form-control
        15.2.4 Button
        15.2.5 error message
16. Map Section
17. Subscribtion
    17.1 Wrapper
    17.2 Input
    17.3 Submit
    17.4 Success & Error
18. Footer
    18.1 Wrapper
    18.2 Anchor
    18.3 Typography
    18.4 Social Icons
19. Bootstrap New Elements
    19.1 tooltip
    19.2 navbar
    19.3 btn
    19.4 Alert
20. Responsive
    20.1 TABLET
    20.2 SMALL TABLET
    20.3 PHONE
    20.4 SMALL PHONE
*/




/* ==========================================================================
   1. General
========================================================================== */

a:focus,
a:hover {
    outline: none;
    color: #333333;
    text-decoration: none;
}

h1 { font-size: 30px; }
h3 { font-size: 20px; }


/* 2.2 Selection Color
---------------------------------------------------------------------------*/
::selection {
    color: #ffffff;
    text-shadow: none;
    background-color: #990000;
}
::-webkit-selection {
    color: #ffffff;
    text-shadow: none;
    background-color: #990000;
}
::-moz-selection {
    color: #ffffff;
    text-shadow: none;
    background-color: #990000;
}

/* 2.3 Colors
---------------------------------------------------------------------------*/
.black-color { color: #333333; }
.gray-color { color: #444444; }


/* ==========================================================================
   3. Home Section
========================================================================== */


/* 3.2.2 Info
---------------------------------------------------------------------------*/
#info a { color: #888888; }
#info a:hover { color: #990000; }

/* 3.2.3 Social Icons
---------------------------------------------------------------------------*/
#header-social-icons ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#header-social-icons ul li {
    float: left;
    display: inline-block;

    -webkit-border-left: 1px solid #efefef;
       -moz-border-left: 1px solid #efefef;
         -o-border-left: 1px solid #efefef;
            border-left: 1px solid #efefef;
}
#header-social-icons ul li:last-child {
    -webkit-border-right: 1px solid #efefef;
       -moz-border-right: 1px solid #efefef;
         -o-border-right: 1px solid #efefef;
            border-right: 1px solid #efefef;
}
#header-social-icons ul li a {
    width: 34px;
    display: block;
    color: #888888;
    line-height: 34px;
    text-align: center;

    -webkit-transition: all 0.0s ease-in-out;
       -moz-transition: all 0.0s ease-in-out;
        -ms-transition: all 0.0s ease-in-out;
	     -o-transition: all 0.0s ease-in-out;
	        transition: all 0.0s ease-in-out;
}
#header-social-icons ul li a:hover { color: #ffffff; }

a.twitter:hover { background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #46C0fb; }
a.facebook:hover { background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #4863ae; }
a.google-plus:hover { background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #dd4b39; }
a.youtube-play:hover { background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #cc181e; }
a.pinterest:hover { background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #ab171e; }
a.linkedin:hover { background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #0083a8; }
a.skype:hover { background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #36c4f3; }
a.instagram:hover { background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #4d4f54; }

.tparrows:hover { background: url("../images/mask/maskbutton.png") no-repeat scroll 50% 50% / 100% 100% #990000 !important; }

/* 4.3 tp-caption
---------------------------------------------------------------------------*/
.tp-caption.medium_bg_asbestos {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
	line-height: 22px;
    padding: 6px 12px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: url("../images/mask/maskoblong.png") no-repeat scroll 50% 50% / 100% 100% #333333;

    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
}
.tp-caption.medium_bg_asbestos:hover { background: url("../images/mask/maskbutton.png") no-repeat scroll 50% 50% / 100% 100% #990000; }


/* 5.2.2.8 Hover
---------------------------------------------------------------------------*/
.feature-box-style1 div.box-container:hover .feature-box-image {
    height: 164px;

    -webkit-border-bottom: 2px solid #333333;
       -moz-border-bottom: 2px solid #333333;
         -o-border-bottom: 2px solid #333333;
            border-bottom: 2px solid #333333;
}
.feature-box-style1 div.box-container:hover .feature-box-containt {
    margin: 0;
    height: 152px;
    padding: 0 20px 35px;
}
.feature-box-style1 div.box-container:hover .feature-box-icon {
    margin: -31px auto 22px;
    background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #333333;
}
.feature-box-style1 div.box-container:hover { background-color: rgba(255, 255, 255, 0.93); }

/* 7.2.2 Icon
---------------------------------------------------------------------------*/
.feature-box-style2 .feature-box-icon {
    width: 60px;
    height: 60px;
    color: #ffffff;
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    margin: 0 auto 20px;
    background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #333333;

    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.feature-box-style2 i { line-height: 60px; }
.feature-box-style2 i.fa-mobile { font-size: 33px; }


.feature-box-style2 .feature-box-containt h4 {
    color: #990000;
    margin: 0 0 10px;
    text-transform: uppercase;
}

/* 7.2.4 Hover
---------------------------------------------------------------------------*/
.feature-box-style2:hover .feature-box-icon { background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #990000; }


/* 8.2.3 Number
---------------------------------------------------------------------------*/
.feature-box-number {
    color: #990000;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: 600;
    margin: 0 auto 20px;
    letter-spacing: 1px;
}

/* 8.2.5 Hover
---------------------------------------------------------------------------*/
.feature-box-style3:hover .feature-box-icon i { background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% #990000; }


/* ==========================================================================
   9. Portfolio Section
========================================================================== */
/* 9.1 Wrapper
---------------------------------------------------------------------------*/
#portfolio-section {
    margin: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 80px 0 50px;
    background-color: #ffffff;
}
#portfolio-section .section-title { margin: 0 0 60px; }


/* 9.2 Portfolio Filter
---------------------------------------------------------------------------*/
/* 9.2.1 Wrapper
---------------------------------------------------------------------------*/
.portfolioFilter {
    width: 100%;
    text-align: center;
}
.portfolioFilter ul {
    z-index: 2;
    padding: 0;
    margin: 0 0 50px;
    list-style: none;
    text-align: center;
}

/* 9.2.2 items
---------------------------------------------------------------------------*/
.portfolioFilter ul li {
    margin: 0 10px 10px 0;
    display: inline-block;
    background: url("../images/mask/maskbutton.png") no-repeat scroll 50% 50% / 100% 100% #333333;

	-webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.portfolioFilter ul li:last-child { margin: 0 0 10px; }
.portfolioFilter ul li:hover { background: url("../images/mask/maskbutton.png") no-repeat scroll 50% 50% / 100% 100% #990000; }

/* 9.2.3 Anchor
---------------------------------------------------------------------------*/
.portfolioFilter a {
    z-index: 2;
    color: #ffffff;
    display: block;
    font-size: 14px;
    padding: 6px 12px;
    text-align: center;
    position: relative;
    white-space: nowrap;
    font-weight: normal;
    letter-spacing: 1px;
    text-decoration:none;
    vertical-align: middle;
    text-transform: uppercase;

	-webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
           -o-user-select: none;
}

/* 9.3 isotope
---------------------------------------------------------------------------*/
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
       -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
         -o-transition-duration: 0.8s;
            transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
       -moz-transition-property: height, width;
        -ms-transition-property: height, width;
         -o-transition-property: height, width;
            transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
       -moz-transition-property: -moz-transform, opacity;
        -ms-transition-property: -ms-transform, opacity;
         -o-transition-property: -o-transform, opacity;
            transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
       -moz-transition-duration: 0s;
        -ms-transition-duration: 0s;
         -o-transition-duration: 0s;
            transition-duration: 0s;
}
/**** Isotope Filtering ****/
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { z-index: 1; }

/* 9.4 Portfolio grid Item
---------------------------------------------------------------------------*/
/* 9.4.1 Wrapper
---------------------------------------------------------------------------*/
.portfolio-grid {
    padding: 0;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

/* 9.4.2 Item
---------------------------------------------------------------------------*/
.portfolio-item {
    display: block;
    margin: 0 0 30px;
}

/* 9.4.3 Image
---------------------------------------------------------------------------*/
.img-figure img {
    width: 100%;

    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;
}

/* 9.4.4 Overlayer
---------------------------------------------------------------------------*/
.portfolio-grid .img-figure-overlayer {
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
	height: 100%;
    display: block;
    padding: 0 15px;
    overflow: hidden;
	position: absolute;

    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}

/* 9.4.5 Anchor
---------------------------------------------------------------------------*/
.portfolio-grid .img-figure-overlayer a {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    background: url("../images/mask/maskoblong.png") no-repeat scroll 50% 50% / 100% 100% rgba(255, 255, 255, 0.5);

    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;
}
.portfolio-grid .img-figure-overlayer a i {
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    color: #333333;
    font-size: 34px;
    line-height: 50px;
    position: absolute;
    margin: -25px 0 0 -25px;
}

/* 9.4.6 Hover
---------------------------------------------------------------------------*/
.portfolio-grid .portfolio-item:hover .img-figure-overlayer { opacity: 1; }

#condominio-en-linea .col-md-3 { padding: 0; }

/* 10.2 Pricing Box
---------------------------------------------------------------------------*/
/* 10.2.1 Wrapper
---------------------------------------------------------------------------*/
.pricing-box,
.feature-pricing-box {
    padding: 0;
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0 0 30px 0;
    position: relative;
    background-color: #ffffff;

    -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
         -o-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
}
.feature-pricing-box {
    z-index: 2;

    -webkit-transform: scale(1.05);
       -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
         -o-transform: scale(1.05);
            transform: scale(1.05);

    -webkit-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
         -o-box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
            box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.3);
}

/* 10.2.2 Price
---------------------------------------------------------------------------*/
.pricing-box .price {
    background-image: -webkit-linear-gradient(270deg, #444444, #333333);
    background-image: -moz-linear-gradient(270deg, #444444, #333333);
    background-image: -ms-linear-gradient(270deg, #444444, #333333);
    background-image: -o-linear-gradient(270deg, #444444, #333333);
    background-image: linear-gradient(180deg, #444444, #333333);

}
.feature-pricing-box .price {
    background-image: -webkit-linear-gradient(270deg, #990000, #860815);
    background-image: -moz-linear-gradient(270deg, #990000, #860815);
    background-image: -ms-linear-gradient(270deg, #990000, #860815);
    background-image: -o-linear-gradient(270deg, #990000, #860815);
    background-image: linear-gradient(180deg, #990000, #860815);
}

/* 10.2.3 Details
---------------------------------------------------------------------------*/
.pricing-box ul,
.feature-pricing-box ul {
	padding: 0 20px;
    list-style: none;
    margin: 0 0 40px 0;
}
.pricing-box li,
.feature-pricing-box li {
	padding: 10px 0;
    cursor: default;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;

    -webkit-border-bottom: 1px dashed #efefef;
       -moz-border-bottom: 1px dashed #efefef;
         -o-border-bottom: 1px dashed #efefef;
            border-bottom: 1px dashed #efefef;
}

/* 10.2.4 Typography
---------------------------------------------------------------------------*/
.pricing-box .price h3,
.pricing-box .price h1,
.feature-pricing-box .price h3,
.feature-pricing-box .price h1 {
    margin: 0;
    color: #ffffff;
    padding: 10px 0;
    font-weight: 400;
    text-transform: uppercase;

}

.pricing-box .price h3 { background-color: #333333; }
.feature-pricing-box .price h3 { background-color: #860815; }

.pricing-box .price h1,
.feature-pricing-box .price h1 {
    font-size: 50px;
    padding: 30px 0;
    margin: 0 0 30px;
}
.pricing-box .price h1 span,
.feature-pricing-box .price h1 span {
    font-size: 30px;
    text-transform: uppercase;
}

/* 10.2.5 Hover
---------------------------------------------------------------------------*/
.pricing-box li:hover,
.feature-pricing-box li:hover { color: #333333; }

/* 10.2.6 Button
---------------------------------------------------------------------------*/
.pricing-box .btn,
.feature-pricing-box .btn {
	-webkit-border-radius: 4px 4px 0 0;
       -moz-border-radius: 4px 4px 0 0;
         -o-border-radius: 4px 4px 0 0;
            border-radius: 4px 4px 0 0;
}


.monials-block-left { text-align: right; }


/* 11.2.2 Image
---------------------------------------------------------------------------*/
.monials-block-left .client-img {
    float: right;
    margin: 0 0 20px 30px;
}
.monials-block-right .client-img {
    float: left;
    margin: 0 30px 20px 0;
}
.client-img {
    width: 98px;
    height: 98px;
    padding: 4px;
    overflow: hidden;
    position: relative;
    background-color: #efefef;

	-webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.client-img:after {
    top: 0;
    left: 0;
    content: '';
    width: 98px;
    height: 98px;
    position: absolute;
    background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% transparent;
}
.client-img img {
    width: 90px;
    height: 90px;

	-webkit-border-radius: 4px;
       -moz-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
}

/* 11.2.4 Containt
---------------------------------------------------------------------------*/
.monials-block-left .containt p:last-child,
.monials-block-right .containt p:last-child {
    margin: 0 0 20px 0;
}

/* 11.2.5 Hover
---------------------------------------------------------------------------*/
.monials-block-left:hover .client-img,
.monials-block-right:hover .client-img {
    background-color: #990000;
}




/* ==========================================================================
   12. Client Slider
========================================================================== */
/* 12.1 Wrapper
---------------------------------------------------------------------------*/
#client-slider-section {
    margin: 0;
    width: 100%;
    padding: 80px 0;
    overflow: hidden;
    position: relative;
    background-color: #222222;
}

/* 12.2 OWL Clients
---------------------------------------------------------------------------*/
/* 12.2.1 Wrapper
---------------------------------------------------------------------------*/
#owl-clients { padding: 0 15px; }

/* 12.2.2 Image
---------------------------------------------------------------------------*/
.client-logo { text-align: center; }
.client-logo img { opacity: 0.7; }
.client-logo:hover img { opacity: 1; }




/* ==========================================================================
   13. Team Section
========================================================================== */
/* 13.1 Wrapper
---------------------------------------------------------------------------*/
#team-section  {
    margin: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 80px 0 50px;
    background-color: #ffffff;
}

/* 13.2 Member Box
---------------------------------------------------------------------------*/
/* 13.2.1 Wrapper
---------------------------------------------------------------------------*/
.member-box-wrapper {
    width: 100%;
    overflow: hidden;
}
.member-box {
    max-width: 290px;
    text-align: center;
    position: relative;
    margin: 0 auto 30px;
    padding: 35px 20px 30px;
    background-color: #333333;

    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}

/* 13.2.2 Image
---------------------------------------------------------------------------*/
.member-img {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: relative;
    margin: 0 auto 25px;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;

    -webkit-border: 5px solid #ffffff;
       -moz-border: 5px solid #ffffff;
         -o-border: 5px solid #ffffff;
            border: 5px solid #ffffff;
}
.member-img img { width: 100%; }
.member-img:after {
    top: 0;
    left: 0;
    content: '';
    width: 140px;
    height: 140px;
    position: absolute;
    background: url("../images/mask/masksquare.png") no-repeat scroll 50% 50% / 100% 100% transparent;
}

/* 13.2.3 Name
---------------------------------------------------------------------------*/
.member-name h2 {
    color: #ffffff;
    margin-bottom: 15px;
}

/* 13.2.4 Title
---------------------------------------------------------------------------*/
.member-title h4 {
    color: #ffffff;
    margin-bottom: 25px;
}


/* 13.2.6 Hover
---------------------------------------------------------------------------*/
.member-box:hover { background-color: #990000; }
.member-box a:hover {
    color: #ffffff;
    background-color: #333333;
}

/* ==========================================================================
   14. Skills Section
========================================================================== */
/* 14.1 Wrapper
---------------------------------------------------------------------------*/
#skills-section {
    margin: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding: 80px 0 50px;
    background-color: #990000;
}

/* 14.2 Skill Chart
---------------------------------------------------------------------------*/
/* 14.2.1 Wrapper
---------------------------------------------------------------------------*/
.skill-chart-left,
.skill-chart-right {
    z-index: 1;
    width: 180px;
    height: 180px;
    position: relative;
    text-align: center;
    margin: -15px 0 30px;
    display: inline-block;
    background: url("../images/skill/skill-background.png") no-repeat scroll 50% 50% / 100% 100%;
}
#skills-section .skill-chart-left { margin-right: 15px; }
#skills-section .skill-chart-right { margin-left: 15px; }
.skill-chart-middle {
    z-index: 1;
    width: 210px;
    height: 210px;
    margin: 0 0 30px;
    text-align: center;
    position: relative;
    display: inline-block;
    background: url("../images/skill/skill-background.png") no-repeat scroll 50% 50% / 100% 100%;
}

/* 14.2.2 BackGround
---------------------------------------------------------------------------*/
.top-bg {
    top: 0;
    left: 0;
    z-index: 2;
    width: 180px;
    height: 180px;
    position: absolute;
    background: url("../images/skill/skill-top-background.png") no-repeat scroll 50% 50% / 100% 100%;
}
.top-bg-lg {
    top: 0;
    left: 0;
    z-index: 2;
    width: 210px;
    height: 210px;
    position: absolute;
    background: url("../images/skill/skill-top-background.png") no-repeat scroll 50% 50% / 100% 100%;
}

/* 14.2.3 Canvas
---------------------------------------------------------------------------*/
.skill-chart-left canvas,
.skill-chart-right canvas,
.skill-chart-middle canvas {
    margin: 10px 0 0 0;
}

/* 14.2.4 Input
---------------------------------------------------------------------------*/
.skill-chart-left input,
.skill-chart-right input,
.skill-chart-middle input {
    z-index: 3;
    position: relative;
    margin-top: 45px !important;
    font-weight: 600 !important;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.skill-chart-middle input { margin-top: 55px !important; }

/* 14.2.5 Title
---------------------------------------------------------------------------*/
.skill-title,
.skill-title-lg {
    left: 0;
    z-index: 3;
    width: 100%;
    bottom: 60px;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    position: absolute;
    letter-spacing: 1px;

    -webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.skill-title-lg { bottom: 70px; }

/* 14.2.6 Hover
---------------------------------------------------------------------------*/
.skill-chart-left:hover input,
.skill-chart-right:hover input,
.skill-chart-middle:hover input {
    font-size: 0 !important;
}
.skill-chart-left:hover .skill-title,
.skill-chart-right:hover .skill-title {
    bottom: 80px;
    font-size: 22px;
}

.skill-chart-middle:hover .skill-title-lg {
    bottom: 90px;
    font-size: 24px;
}


.contactForm .form-control:hover,
.contactForm .form-control:focus {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;

    -webkit-border: 2px solid #990000;
       -moz-border: 2px solid #990000;
         -o-border: 2px solid #990000;
            border: 2px solid #990000;
}

.contactForm .submit.focus,
.contactForm .submit:hover {
	color: #ffffff;
    position: relative;
    background: url("../images/mask/maskoblong.png") no-repeat scroll 50% 50% / 100% 100% #333333;
}

/* 15.2.5 error message
---------------------------------------------------------------------------*/
.error {
	top: 0;
    z-index: 2;
    float: right;
    color: #ce0c21;
    position: relative;
    margin: -69px 15px 0 0;
}
:-webkit-ui-invalid:not(output) { box-shadow: none; }
   :-moz-ui-invalid:not(output) { box-shadow: none; }
    :-ms-ui-invalid:not(output) { box-shadow: none; }
     :-o-ui-invalid:not(output) { box-shadow: none; }
         ui-invalid:not(output) { box-shadow: none; }




/* ==========================================================================
   16. Map Section
========================================================================== */
#map-section {
    width: 100%;
    height: 450px;
    margin: 0 auto;
    display: block;
    position: relative;
}
#map {
    width: 100%;
    height: 450px;
    margin: 0 auto;
    display: block;
}




/* ==========================================================================
   17. Subscribtion
========================================================================== */
/* 17.1 Wrapper
---------------------------------------------------------------------------*/
#subscribe {
    width: 435px;
    padding: 15px;
    overflow: hidden;
    position: relative;
    margin: -70px auto 0;
    background-color: #222222;

    -webkit-border-radius: 10px 10px 0 0;
       -moz-border-radius: 10px 10px 0 0;
         -o-border-radius: 10px 10px 0 0;
            border-radius: 10px 10px 0 0;
}

/* 17.2 Input
---------------------------------------------------------------------------*/
#subscribe .form-control {
	float: left;
    width: 300px;
    height: auto;
    outline: none;
	padding: 10px 15px;
	background-color: #ffffff;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;

    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;

    -webkit-border-radius: 4px 0 0 4px;
       -moz-border-radius: 4px 0 0 4px;
         -o-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;
}
#subscribe .form-control:hover,
#subscribe .form-control:focus {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
}

/* 17.3 Submit
---------------------------------------------------------------------------*/
#subscribe button.submit {
    width: 105px;
    color: #ffffff;
    font-size: 14px;
    line-height: 22px;
    padding: 9px 16px;
    background: url("../images/mask/maskbutton.png") no-repeat scroll 50% 50% / 100% 100% #990000;

    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;

    -webkit-border-radius: 0 4px 4px 0;
       -moz-border-radius: 0 4px 4px 0;
         -o-border-radius: 0 4px 4px 0;
            border-radius: 0 4px 4px 0;
}
#subscribe .submit.focus,
#subscribe .submit:hover {
	color: #ffffff;
    background: url("../images/mask/maskbutton.png") no-repeat scroll 50% 50% / 100% 100% #444444;
}

/* 17.4 Success & Error
---------------------------------------------------------------------------*/
.ssuccess,
.serror {
    top: 24px;
    right: 130px;
    color: #990000;
    position: absolute;
}

/* 18.4 Social Icons
---------------------------------------------------------------------------*/
#footer-section #footer-social-icons ul {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    list-style: none;
    text-align: right;
}
#footer-section #footer-social-icons ul li {
    padding: 0;
    margin-left: 1px;
    display: inline-block;
}
#footer-section #footer-social-icons ul li:first-child { margin-left: 0; }
#footer-section #footer-social-icons ul li a {
    width: 30px;
    height: 30px;
    display: block;
    font-size: 16px;
    line-height: 30px;
    text-align: center;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
}
#footer-section #footer-social-icons ul li a i { line-height: 30px; }




/* ==========================================================================
   19. Bootstrap New Elements
========================================================================== */
/* 19.1 tooltip
========================================================================== */
.tooltip {
    z-index: 999;
    letter-spacing: 1px;
}

.navbar-nav > li > a:hover { color: #990000; }
.nav > li > a:hover, .nav > li > a:focus { background-color: transparent; }

/* 19.3 btn
========================================================================== */
.btn:focus { outline: none; }

.btn:active,
.btn.active {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
}

.btn-Nesto:active,
.btn-Nesto.active,
.btn-Nesto-o:active,
.btn-Nesto-o.active {
    background-image: none;
}

.btn-Nesto:hover,
.btn-Nesto:focus,
.btn-Nesto:active,
.btn-Nesto.active {
    color: #ffffff;
    background: url("../images/mask/maskbutton.png") no-repeat scroll 50% 50% / 100% 100% #990000;
}

.btn-Nesto-o:hover,
.btn-Nesto-o:focus,
.btn-Nesto-o:active,
.btn-Nesto-o.active {
    color: #ffffff;
    background: url("../images/mask/maskbutton.png") no-repeat scroll 50% 50% / 100% 100% #333333;
}


/* 19.4 Alert
========================================================================== */
.alert-nesto {
    color: #ffffff;
    background-color: #990000;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
}
#contact-section .alert.alert-nesto { margin-bottom: 30px; }
#contact-section .alert {
    -webkit-border: none;
       -moz-border: none;
         -o-border: none;
            border: none;
}