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

    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. Google Fonts
===============================*/

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,600");
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600");

/*--- 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;
  font-family: "Montserrat", sans-serif;
}

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---*/

/*-------------- 2. Preloader css starts ---------------*/

.loader_bg {
  position: fixed;
  z-index: 9999999;
  background: #fff;
  width: 100%;
  height: 100%;
}

.loader {
  border: 0 solid transparent;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  top: calc(50vh - 75px);
  left: calc(50vw - 75px);
}

.loader:before,
.loader:after {
  content: "";
  border: 1em solid #333;
  border-radius: 50%;
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  animation: loader 2s linear infinite;
  opacity: 0;
}

.loader:before {
  animation-delay: 0.5s;
}

@keyframes loader {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/*---------- preloader css ends -------------*/

/*--- 3. Mouse animation starts---*/

@-webkit-keyframes scroll-ani {
  0% {
    opacity: 1;
    top: 29%;
  }
  15% {
    opacity: 1;
    top: 50%;
  }
  50% {
    opacity: 0;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 29%;
  }
}

@keyframes scroll-ani {
  0% {
    opacity: 1;
    top: 29%;
  }
  15% {
    opacity: 1;
    top: 50%;
  }
  50% {
    opacity: 0;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 29%;
  }
}

.mouse-scroll {
  position: absolute;
  left: 48%;
  display: inline-block;
  line-height: 18px;
  font-size: 13px;
  font-weight: normal;
  color: #ffffff;
  letter-spacing: 2px;
  margin-top: 5%;
  text-decoration: none;
  overflow: hidden;
}

.mouse-scroll .mouse {
  position: relative;
  display: block;
  width: 35px;
  height: 60px;
  margin: 0 auto 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid #ffffff;
  border-radius: 23px;
}

.mouse-scroll .mouse .mouse-movement {
  position: absolute;
  display: block;
  top: 29%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: #ffffff;
  border-radius: 50%;
  -webkit-animation: scroll-ani 2s linear infinite;
  animation: scroll-ani 2s linear infinite;
}

/*---mouse animation ends---*/

/*---------- 4. Nav area css starts -------------*/

.nav-area {
  height: 65px;
}

.nav-area.sticky_navigation {
  background: #fafafa;
  height: 80px;
}

.navbar-nav {
  margin-top: 15px;
}

.sticky_navigation {
  -webkit-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-box-shadow: 0px 3px 4.6px 0.3px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 3px 4.6px 0.3px rgba(0, 0, 0, 0.25);
}

.sticky_navigation .main-menu {
  margin-top: 0;
}

.sticky_navigation .navbar-brand,
.sticky_navigation .navbar-brand span {
  color: #000000;
}

.sticky_navigation .navbar-brand:hover,
.sticky_navigation .navbar-brand:focus,
.sticky_navigation .navbar-brand span {
  color: #262626;
}

.sticky_navigation .nav li a {
  color: #262626;
}

.sticky_navigation .nav li.active a {
  color: #00b0dc;
}

.sticky_navigation .nav li.active::after {
  border-bottom: 1px solid #262626;
  content: "";
  display: block;
  margin: 0 auto;
  width: 50%;
}

.sticky_navigation .navbar-brand:hover {
  color: #ffffff;
}

.sticky_navigation .logo span {
  color: #00b0dc;
}

.main-menu {
  -webkit-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  margin-top: 10px;
}

.navbar {
  border: 0;
  margin-bottom: 0;
}

.navbar-brand {
  padding: 25px 0;
  text-transform: uppercase;
  font-size: 25px;
  display: block;
  color: #ffffff;
  font-weight: 800;
}

.logo {
  padding: 5px;
  font-size: 32px;
  letter-spacing: 3px;
}

.logo span {
  color: #00b0dc;
}

.navbar-brand:focus,
.navbar-brand:hover {
  text-decoration: none;
  color: #ffffff;
}

.navbar-right li {
  display: inline-block;
  float: none;
}

.navbar-right li a {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 400;
}

.navbar-right li.active a {
  color: #00b0dc;
}

.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
  background: none;
}

.navbar-toggle .icon-bar {
  background: #033d75;
}

/*---------- Nav area css ends -------------*/

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

.banner-area {
  background-image: url(../images/home/bg.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: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fff;
  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: #00b0dc;
}

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

.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, 0.25);
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 1px 1px 2px rgba(0, 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, 0.25);
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 1px 1px 2px rgba(0, 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 0.3s ease-in-out, color 0.3s ease-in-out;
  animation-delay: 2s;
  transition: background 0.3s ease-in-out, color 0.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: 0.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 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.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 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.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 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.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.jpeg);
  -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 -------------*/