/*********************************************************

    Template Name:  Robin - Personal Portfolio HTML Template
    Author: MouriTheme
    Version: 1.0
    Design and Developed by: MouriTheme

    NB: This is the main stylesheet of this theme.

***********************************************************/


/*Table of Content


1. Default css
2. Preloader Css
3. Navigation area css
4. Mouse animation css
5. Banner area css
6. About area css
7. Services area css
8. skills area css
9. Portfolio area css
10. Statistic area css
11. Experience area css
12. Testimonial area css
13. Contact area css
14. Footer area css

*/


/*--- 1. Default css starts ---*/

html,
body {
    height: 100%;
}

body {
    font-family: "roboto", sans-serif;
    width: 100%;
    height: 100%;
    font-size: 15px;
    line-height: 1.7;
    color: #333333;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333333;
    font-weight: 600;
}

p {
    letter-spacing: 0;
    line-height: 1.8;
}

a {
    text-decoration: none;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

a:focus {
    outline: none;
    text-decoration: none;
}

a:hover {
    outline: none;
    text-decoration: none;
}

ul,
li {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.section-padding {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    padding-bottom: 60px;
}

.section-title h2 span {
    color: #00B0DC;
}

.section-title h2 {
    font-size: 40px;
    color: #262626;
    letter-spacing: 1px;
    font-weight: 400;
    text-transform: uppercase;
}


/*--- Default css ends---*/


/*----------- 5. Banner area css starts--------------*/

.banner-area {
    background-image: url(background.jpg);
    /*--edit image--*/
    background-position: center;
    background-size: cover;
    position: relative;
    height: 100%;
}

.banner-area::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    content: '';
}

.img-area {
    width: 175px;
    height: 175px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #0bceaf;
    display: inline-block;
}

.banner-area b {
    font-weight: 100;
}

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.banner-table {
    display: table;
    margin: 0;
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.banner-table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.welcome-text .intro h2 {
    color: #fff;
    font-size: 85px;
    font-weight: 800;
    margin-bottom: 10px;
}

.intro h1 {
    color: #fafafa;
    font-size: 18px;
    font-weight: 100;
    margin: 0;
}

.social-icon {
    text-align: center;
    padding-top: 20px;
}

.social-icon ul {
    margin: 0;
}

.social-icon ul li {
    display: inline;
    padding: 0;
    margin: 0 5px;
}

.social-icon ul li a {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    color: #fff;
}

.social-icon ul li a:hover {
    background: #0bceaf;
}

.ah-headline.clip .ah-words-wrapper::after {
    background-color: #0bceaf;
}

.banner-btn {
    background: transparent;
    text-decoration: none;
    padding: 10px 30px;
    display: inline-block;
    margin-top: 25px;
    color: #fff;
    text-transform: uppercase;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 25px;
    border: 2px solid #fafafa;
    font-weight: bold;
}

.banner-btn:hover,
.banner-btn:focus {
    text-decoration: none;
    color: #333;
    background: #fafafa;
    border-color: #fafafa;
}

.welcome-text h3 {
    color: #fff;
    font-size: 45px;
}


/*---------Banner area css ends--------------*/


/*---------- 6. About area css starts---------------*/

.stack {
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
    display: inline-block;
}

.stack img {
    background: #fff;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding: 10px;
    width: 100%;
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
}

.stack::before {
    background: #969696;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -10;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
}

.btn-a {
    animation-delay: 2s;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 18px;
    padding: 14px 22px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-animation-delay: 2s;
    -webkit-transition: background .3s ease-in-out, color .3s ease-in-out;
    animation-delay: 2s;
    transition: background .3s ease-in-out, color .3s ease-in-out;
    white-space: nowrap;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-top: 20px;
    text-decoration: none;
    margin-right: 15px;
}

.skill-btn {
    background: #00b0dc;
    border: 1px solid #00b0dc;
    color: #fff;
}

.down-btn {
    background: none;
    color: #2B2F37;
    border: 1px solid #00b0dc;
}

.about-text-left {
    margin-top: 90px;
}

.about-text-left p {
    text-align: right;
    font-size: 15px;
    color: #fafafa;
    margin-bottom: 20px;
}

.about-right h2 {
    margin-bottom: 30px;
    text-transform: uppercase;
}

.about-text-right h3 {
    color: #fafafa;
    margin-bottom: 45px;
}

.about-text-right h6 {
    color: #333333;
}

.about-right p span {
    color: #262626;
    font-weight: bold;
    letter-spacing: 2px;
}

.about-list {
    list-style: none;
}

.about-right .about-list li {
    margin-bottom: 10px;
}

.about-right .about-list li .title {
    position: relative;
    margin-right: 10px;
    padding-bottom: 1px;
    color: #a1a1a1;
    font-weight: 700;
}

.about-right .about-list li .title:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #e1e1e1;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.about-right .about-list li .title:after {
    position: absolute;
    content: ':';
    right: -8px;
}

.about-right .about-list li .value {
    position: relative;
}

.about-right .about-list li .value:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: 0;
    left: 0;
}


/*-------About area css ends--------------*/


/*-------- 7. Services area starts ----------*/

.services-area {
    background: #f8f8f8;
}

.service {
    text-align: center;
}

.service-box {
    padding: 20px;
    margin-bottom: 40px;
    position: relative;
    transition: .9s;
}

.service-icon i {
    font-size: 50px;
    color: #00B0DC;
    margin-bottom: 20px;
}

.service-box:hover:after {
    top: 0;
    height: 100%;
    transition: 0.9s;
}

.service-box:hover .after {
    bottom: 0;
    height: 100%;
    transition: 0.9s;
}

.service-box:hover:before {
    left: 0;
    width: 100%;
    transition: 0.9s;
}

.service-box:hover .before {
    right: 0;
    width: 100%;
    transition: 0.9s;
}

.service-box:hover:before,
.service-box:hover .before {
    width: 100%;
    transition: 0.9s;
}

.service-box:after {
    height: 80%;
    width: 2px;
    content: '';
    top: 10%;
    left: 0px;
    transition: 0.9s;
}

.service-box .before,
.service-box .after,
.service-box:before,
.service-box:after {
    background: #777;
    position: absolute;
    transition: 0.9s;
}

.service-box:before {
    height: 2px;
    width: 80%;
    content: '';
    top: 0px;
    left: 10%;
    transition: 0.9s;
}

.service-box .before {
    height: 2px;
    width: 80%;
    bottom: 0px;
    right: 10%;
    transition: 0.9s;
}

.service-box .after {
    height: 80%;
    width: 2px;
    bottom: 10%;
    right: 0px;
    transition: 0.9s;
}


/*-------- Services area ends ----------*/


/*--------- 8. Skills area starts --------------*/

.skills-area .section-title h2 {
    color: #fff;
}

.skills-area {
    position: relative;
    background-image: url(../images/skills/1.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    z-index: 1;
}

.skills-area:before {
    position: absolute;
    content: '';
    background: rgba(0, 0, 0, 0.9);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.skillbar {
    margin-bottom: 24px;
    position: relative;
    width: 100%;
    display: block
}

.skillbar .skillbar-title {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: #fff;
}

.skillbar .skillbar-percent {
    float: right;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
}

.skillbar-bar {
    background-color: #fff;
    width: 100%;
    height: 15px;
    border-radius: 40px;
}

.skillbar-bar .skillbar-child {
    width: 0;
    height: 100%;
    background-color: #00B0DC;
    -webkit-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
    border-radius: 5px;
}


/*--------- Skills area ends --------------*/


/*----------- 9. Portfolio area Starts --------*/

.portfolio-area {
    background: #fafafa;
}

.project-item img {
    width: 100%;
}

.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: #00B0DC;
    opacity: 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    cursor: crosshair;
}

.overlay .overlay-inner {
    position: absolute;
    top: 35%;
    width: 100%;
    text-align: center;
}

.overlay .overlay-inner h4 {
    color: #ffffff !important;
    margin-bottom: 0 !important;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
    text-transform: uppercase;
    font-size: 25px;
    letter-spacing: 1px;
}

.overlay .overlay-inner p {
    color: #fff;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    margin-top: 10px;
}

.project-item:hover .overlay .overlay-inner h4 {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.project-item:hover .overlay .overlay-inner p {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.project-item a:hover .overlay {
    opacity: 1;
}

ul.port-nav-list {
    padding: 0 0 50px 0;
    list-style: none;
    text-align: center;
}

ul.port-nav-list li {
    display: inline-block;
    margin-right: 10px;
}

ul.port-nav-list li a {
    display: block;
    cursor: pointer;
    color: #262626;
    font-size: 18px;
    padding: 8px 12px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 100;
}

ul.port-nav-list li a.active {
    color: #00B0DC;
}

.port-items {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.portfolio-items .port-items .single-port {
    overflow: hidden;
    margin-bottom: 25px;
}

.single-port {
    padding: 0;
}


/*-------- Portfolio area css ends---------*/


/*--------- 10. Statistic area starts -----------*/

.statistic-area {
    background-image: url(../images/statistic/stats.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
}

.statistic-area:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: -1;
}

.statistic-area .item {
    margin-bottom: 30px;
}

.statistic-area .item .fa {
    color: #fff;
    font-size: 40px;
}

.statistic-area .item p {
    color: #fff;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 300;
}

.statistic-area .item h2 {
    color: #00B0DC;
    font-weight: 800;
    font-size: 45px;
    margin-top: 10px;
}


/*----------------Statistic area ends-------------------*/


/*-------- 11. Experience area starts -------------*/

.fix-down {
    margin-bottom: -30px;
}

.resumes {
    list-style: none;
}

.resumes li {
    padding: 20px;
    box-shadow: 0 0 25px rgba(68, 68, 68, 0.07);
    overflow: hidden;
    position: relative;
}

.resumes li h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

.resumes li h4 {
    text-transform: uppercase;
    font-size: 15px;
    color: #00B0DC;
}

.resumes li h5 {
    margin-bottom: 8px;
}

.resumes li p {
    margin-bottom: 0;
    font-size: 15px;
    position: relative;
    z-index: 1;
}


/*-------- Experience area ends -------------*/


/*------- 12. Testimonial area css starts --------*/

.testimonial-area .section-title h2 {
    color: #fff;
}

.testimonial-area {
    background-image: url(../images/testimonial/1.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

.testimonial-area:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
}

.single-testimonial {
    background: #ffffff;
    border-radius: 5px;
    padding: 30px;
}

.single-testimonial p {
    margin-bottom: 30px;
}

.single-testimonial h2 {
    margin: 10px 0 0;
    font-size: 18px;
    text-transform: uppercase;
}

.testi-comment i {
    font-size: 30px;
    color: #00B0DC;
}

.single-testimonial h3 {
    margin: 10px 0 0;
    font-weight: 100;
    font-size: 15px;
}

.testi-img {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    overflow: hidden;
}

.testi-img img {
    width: 100%;
    height: 100%;
}

.owl-theme .owl-controls {
    margin-top: 50px;
    margin-left: 30px;
}

.owl-dots {
    text-align: center;
    margin-top: 30px;
}

.owl-dot {
    display: inline-block;
    height: 15px !important;
    width: 15px !important;
    background-color: #ffffff !important;
    opacity: 0.8;
    border-radius: 50%;
    margin: 0 5px;
}

.owl-dot.active {
    background-color: #00B0DC !important;
}


/*------- testimonial area ends --------*/


/*-------------13. Contact area starts -------------*/

.contact-area {
    background-color: #ffffff;
}

.contact-area .form-control {
    border: 2px solid #a2a2a2;
    box-shadow: none;
    padding: 6px;
    border-radius: 0;
    margin-bottom: 30px;
}

.right-contact-text {
    margin-bottom: 25px;
}

.right-contact-text i {
    color: #00B0DC;
    font-size: 25px;
    margin-bottom: 10px;
}

.contact-area textarea.form-control {
    border: 2px solid #a2a2a2;
    padding: 6px;
    height: 250px;
    margin-bottom: 30px;
}

.btn.btn-send {
    background: #00B0DC;
    color: #ffffff;
    border-radius: 0;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 5px;
}

.right-contact-text h2 {
    margin-top: 2px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 3px;
}

.right-contact-text p {
    line-height: 21px;
    letter-spacing: 2px;
    font-size: 11px;
    color: #777;
}


/*------------- Contact area ends -------------*/


/*--------------16. Footer area starts -------------*/

.footer-area {
    background: #171717;
    color: #ffffff;
    padding: 30px 0;
}

.footer-area a {
    color: #00B0DC;
}


/*--------------- Footer area ends -------------*/


/*START OF LOADING*/

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #1D2115;
}

.loading-container {
    height: 100vh;
    /* Image is centered vertically and horizontally at all times */
    background-position: center center;
    /* Image doesn't repeat */
    background-repeat: no-repeat;
    /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
    background-attachment: fixed;
    /* This is what makes the background image rescale based on its container's size */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.cssload-loader {
    padding-bottom: 55px;
    padding-top: 10px;
    width: 600px;
    height: 49px;
    line-height: 49px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-weight: 900;
    font-size: 42px;
    color: #ffffff;
    letter-spacing: 0.2em;
}

.cssload-loader::before,
.cssload-loader::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: #0bceaf;
    position: absolute;
    animation: cssload-load 1.50s infinite alternate ease-in-out;
    -o-animation: cssload-load 1.50s infinite alternate ease-in-out;
    -ms-animation: cssload-load 1.50s infinite alternate ease-in-out;
    -webkit-animation: cssload-load 1.50s infinite alternate ease-in-out;
    -moz-animation: cssload-load 1.50s infinite alternate ease-in-out;
}

.cssload-loader::before {
    top: 0;
}

.cssload-loader::after {
    bottom: 0;
}

@keyframes cssload-load {
    0% {
        left: 0;
        height: 29px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 39px;
    }
    100% {
        left: 590px;
        height: 29px;
        width: 15px;
    }
}

@-o-keyframes cssload-load {
    0% {
        left: 0;
        height: 29px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 39px;
    }
    100% {
        left: 590px;
        height: 29px;
        width: 15px;
    }
}

@-ms-keyframes cssload-load {
    0% {
        left: 0;
        height: 29px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 39px;
    }
    100% {
        left: 590px;
        height: 29px;
        width: 15px;
    }
}

@-webkit-keyframes cssload-load {
    0% {
        left: 0;
        height: 29px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 39px;
    }
    100% {
        left: 590px;
        height: 29px;
        width: 15px;
    }
}

@-moz-keyframes cssload-load {
    0% {
        left: 0;
        height: 29px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 39px;
    }
    100% {
        left: 590px;
        height: 29px;
        width: 15px;
    }
}


/* For mobile devices */

@media only screen and (max-width: 612px) {
    .navbar-brand {
        display: none;
    }
    .cssload-loader {
        width: 300px;
        font-size: 20px;
    }
    @keyframes cssload-load {
        0% {
            left: 0;
            height: 29px;
            width: 15px;
        }
        50% {
            height: 8px;
            width: 39px;
        }
        100% {
            left: 290px;
            height: 29px;
            width: 15px;
        }
    }
    @-o-keyframes cssload-load {
        0% {
            left: 0;
            height: 29px;
            width: 15px;
        }
        50% {
            height: 8px;
            width: 39px;
        }
        100% {
            left: 290px;
            height: 29px;
            width: 15px;
        }
    }
    @-ms-keyframes cssload-load {
        0% {
            left: 0;
            height: 29px;
            width: 15px;
        }
        50% {
            height: 8px;
            width: 39px;
        }
        100% {
            left: 290px;
            height: 29px;
            width: 15px;
        }
    }
    @-webkit-keyframes cssload-load {
        0% {
            left: 0;
            height: 29px;
            width: 15px;
        }
        50% {
            height: 8px;
            width: 39px;
        }
        100% {
            left: 290px;
            height: 29px;
            width: 15px;
        }
    }
    @-moz-keyframes cssload-load {
        0% {
            left: 0;
            height: 29px;
            width: 15px;
        }
        50% {
            height: 8px;
            width: 39px;
        }
        100% {
            left: 290px;
            height: 29px;
            width: 15px;
        }
    }
}


/*END OF LOADING*/

.intro h4 {
    font-size: 25px;
    color: #9e9e9e;
    margin-bottom: 20px;
}

#info {
    color: white;
}

.info {
    padding-top: 20px;
    height: 25px;
}