/* ------------------------------------------------------------
1. Fonts
------------------------------------------------------------ */
/* Google fonts */
@import url('https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i');

/* Linear Icons Font */
@import url('../fonts/linear-icons-font/style.css');

/* FontAwesome Free Icons Font */
@import url('../fonts/fontawesome-free/css/all.min.css');

/* ------------------------------------------------------------
2. General Styles
------------------------------------------------------------ */
/*body {
  background: #09aeea;
  background: -webkit-gradient(linear, left top, left bottom, from(#21e1ae), to(#09aeea));
  background: linear-gradient(#21e1ae, #09aeea);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
}*/
html, body {
  min-height: 100%;
}
body {
  position: relative;
  background-color: #444;
  background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#002e63));  /*#708090*/
  background: linear-gradient(#000000, #002e63);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
}
.content-area {
  position: relative;
  opacity: 0.8;
  width: 90%;
  max-width: 960px;
  /*min-width: 400px;*/
  min-height: 80vh;
  /*margin: 5vh auto;*/
  margin: 5vh auto;
  padding: 5;
  background-color: #444;
  -webkit-box-shadow: 0 0 100px -5px rgba(0,0,0,.25);
  -moz-box-shadow: 0 0 100px -5px rgba(0,0,0,.25);
  box-shadow: 0 0 100px -5px rgba(0,0,0,.25);
  border-radius: 32px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  color: #d5d5d5;
  font-size: 15px;
  font-family: 'Poppins', Helvetica, sans-serif;
}

img {
  border-radius: 50%;
}

.header-photo {
  position: relative;
  width: 180px;
  margin: 15px auto 30px;
  z-index: 1;
}

.header-photo img {
  max-width: 100%;
  background-color: #fff;
  border: 3px solid #fff;
  border-radius: 300px;
}

.header-photo:after {
  position: absolute;
  opacity: 0.3;
  top: 7%;
  left: 7%;
  border-radius: 300px;
  content: '';
  height: calc(100% + 0px);
  width: calc(100% + 0px);
  background-image: -webkit-repeating-radial-gradient(center center, #fff, #fff 1px, transparent 0px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, #fff, #fff 1px, transparent 0px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, #fff, #fff 1px, transparent 0px, transparent 100%);
  -webkit-background-size: 6px 6px;
  -moz-background-size: 6px 6px;
  background-size: 6px 6px;
  z-index: -1;
}
/*.profile-picture {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  height: auto;
  max-width: 200px;
}*/
.profile-desc {
  text-align: center;
  padding: 30px;
}
.links {
  text-align: center;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid white;
  border-width: 2px;
  max-width: 290px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 40px;
}
a {
  text-decoration: none;
  color: white;
  transition: color 1s;
}
.bottom-text {
  text-align: center;
  margin-top: 80px;
  /*font-size: 20px;*/
  font-weight: bold;
}
a:hover {
  color: #000;
  background: #fff;
}

/* --- Social Links --- */
.social-links {
  width: 100%;
  margin: 20px 0 50px;
  text-align: center;
  /*background: #000;*/
}

.social-links ul {
  list-style: none;
  padding: 0;
}

.social-links ul li {
  display: inline-block;
}

.social-links ul li a {
  color: #fff;
  border-radius: 20px;
  font-size: 18px;
  padding: 6px 0 0 3px;
  height: 30px;
  width: 30px;
  display: block;
  line-height: 30px;
  text-align: center;
  opacity: .9;
}

.social-links ul li a:hover {
  opacity: 1;
  background-color: rgba(255,255,255,.2);
}
/* --- End Social Links --- */

.footer {
  display: -webkit-inline-box;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 5px 0;
  padding: 5px 0;
  text-align: center;
}
.copyrights {
  color: #bbb;
  width: calc(100% - 60px);
  margin-left: 30px;
  /*position: absolute;       */
  /*bottom: 0;                */
  /*left: 0;                  */
  /*padding: 5px 10px 15px;   */
  line-height: 14px;
  font-size: 12px;
  text-align: center;
}
#lock {
  width: 20px;
  height: 20px;
  opacity: 0.3;
  border-radius: 0;
  text-align: center;
}

#secret {
  display: none;
  margin: 30px 0;
  padding: 15px 0;
  width: 100%;
  opacity: 0.6;
  text-align: center;
}

/* --- Custom ScrollBar Customization --- */
.ps>.ps__scrollbar-y-rail {
  margin-right: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 20px;
}

.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {
  background-color: #b5b6b7;
}

.ps:hover>.ps__scrollbar-y-rail:hover {
  background-color: #444;
}

.ps:hover>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y {
    background-color: #09aeea;
}

.ps>.ps__scrollbar-y-rail {
  width: 12px;
}

.ps>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y, .ps>.ps__scrollbar-y-rail:active>.ps__scrollbar-y,
.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y,
.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y {
    width: 8px;
}

.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail {
  background-color: #555;
}

.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y {
  background-color: #09aeea;
}
/* --- End Custom ScrollBar Customization --- */


/* ============================================================================= 
3. Page loadig animation
============================================================================= */
.no-js .preloader,
.no-js .preloader-portfolio { 
  display: none;
}
.preloader,
.preloader-portfolio {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #222;
}

.preloader-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  background-color: inherit;
  color: inherit;
  opacity: 1;
  transition: opacity 0.3s;
  transform: translate3d(-50%,-50%,0);
}

.preloader-spinner {
  width: 52px;
  height: 52px;
  margin: 100px auto;
  background-color: #002e63;

  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.1);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
  }
}

/*
@media only screen and (max-width: 480px) {
  .
}
*/