/*
Template Name: Resumex
Description: HTML5 / CSS3 One Page
Version: 1.0
Author: themehippo.com
*/

/*------------------------------------------------------------------
# [Color codes]

# Body  (text): #3a4750
# Heading Color #444444
# Theme Color (link color) #82b541
# Mid grey (sub header) #f4f4f4
# -------------------------------------------------------------------*/

body {
  font-family : 'Hind', sans-serif;
  font-size   : 15px;
  line-height : 1.8em;
  color       : #3d3d50;
  font-weight : 300;
  background  : #ededed;/*url("../img/pattern-bg.png") fixed;*/
  }

/* --------------------------------------
* Global Typography
*------------------------------------------*/

h1, h2, h3{
  margin : 0 0 15px;
  color  : #2b2b3d;
  }

h4, h5, h6{
  margin : 0;
  color  : #2b2b3d;
  }


h1 {
  font-size   : 26px;
  line-height : 1.8em;
  font-weight : 700;
  }

h2 {
  font-size   : 18px;
  line-height : 1.8em;
  font-weight : 700;
  }

h3 {
  font-size   : 16px;
  line-height : 1.8em;
  font-weight : 500;
  }

h4 {
  font-size   : 15px;
  line-height : 1.8em;
  font-weight : 500;
  }

h5 {
  font-size   : 12px;
  line-height : 1.em;
  font-weight : 500;
  }

h6 {
  font-size   : 12px;
  line-height : 1.0em;
  }

/* --------------------------------------
* LINK STYLE
*------------------------------------------*/
a {
  color              : #00B3C4;
  text-decoration    : none;
  -webkit-transition : all 0.3s ease 0s;
  -moz-transition    : all 0.3s ease 0s;
  -o-transition      : all 0.3s ease 0s;
  transition         : all 0.3s ease 0s;
  }

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

a:hover,
a:focus {
  text-decoration : none;
  color           : #00565E;
  }

p {
  margin-bottom : 10px;
  }

ul {
  margin-left     : 20px;
margin-top		: 4px;
  padding    : 0px;
  
  }

/*------------------
* Button Style
*------------------*/
.btn {
  padding        : 14px 30px 11px;
  margin-bottom  : 0;
  font-size      : 14px;
  font-weight    : 500;
  border-radius  : 0;
  border         : 0;
  text-transform : uppercase;
  }

.btn-lg {
  font-weight : 700;
  font-size   : 24px;
  padding     : 15px 30px;
  }

/*btn-primary*/
.btn-primary {
  background-color : #009AA8;
  }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus {
  background : #00565E;
  }

/*btn-default*/
.btn-default {
  color            : #009AA8;
  background-color : transparent;
  border           : 2px solid #009AA8;
  }

.btn-default:hover,
.btn-default:focus,
.btn-default:active:focus {
  background   : #009AA8;
  color        : #ffffff;
  border-color : #009AA8;
  }

button:focus,
.btn:focus,
.btn:active:focus {
  outline : none;
  }

/* --------------------
* Column Block
* -------------------*/

.columns-block {
  display                : -webkit-flex;
  display                : flex;
  -webkit-flex-direction : row;
  flex-direction         : row;
  margin                 : 60px auto;
  padding                : 0;
  box-shadow             : 0 0 0 1px #eaeaea;
  }

.blocks {
  box-sizing : border-box;
  }

.left-col-block {
max-width: 320px;
  overflow     : hidden;
  -webkit-flex : 1 0 0;
  flex         : 1 0 0;
  position     : relative;
  background   : rgba(255, 255, 255, .8);
  border-right : 1px solid #eaeaea;
  }

.right-col-block {
  -webkit-flex : 2 0 0;
  flex         : 2 0 0;
  position     : relative;
  background   : #ffffff;
  }

@media (max-width : 768px) {

  .columns-block {
      display    : block;
      margin     : 0;
      box-shadow : none;
      }

  .left-col-block {
  max-width: 100%;
      width    : 100%;
      position : relative;
      border   : 0;
      }

  .right-col-block {
      width      : 100%;
      position   : relative;
      box-shadow : none;
      }
  }

@media (min-width : 769px) and (max-width : 1024px) {
.left-col-block{
  max-width: 320px;
}

  .columns-block {
      margin-top    : 30px;
      margin-bottom : 30px;
      }
  }

/* --------------------
* Section Background
* -------------------*/

.gray-bg {
  background-color : #ffffff;
  }

/* --------------------
*  main Wrapper
* -------------------*/
#main-wrapper {
  overflow : hidden;
  }

/*-------------------
* Section Wrapper
*-------------------*/
.section-wrapper {
  padding       : 20px 30px;
  border-bottom : 1px solid #eaeaea;
  }

@media (max-width : 480px) {
  .section-wrapper {
      padding : 20px 10px;
      }
  }

/*---------------------------
* Section Title
*---------------------------*/
.section-title {
  margin-bottom : 5px;
  }

.section-title h2 {
  margin-bottom : 5px;
  color         : #0098C6;
  }

/*-----------------------------
* NAVIGATION & HEADER STYLE
*-----------------------------*/

.header {
  padding  : 20px !important;
  margin   : 0;
  position : relative;
  }

.header .profile-img {
  margin-bottom : 30px;
padding: 5px;
  border: solid 1px #EFEFEF;
  -moz-box-shadow: 1px 1px 5px #999;
  -webkit-box-shadow: 1px 1px 5px #999;
  box-shadow: 1px 1px 5px #999;
  }

.header .content-wrapper {

  }

.header .content {
  width  : 100%;
  margin : 0 auto;
  }

.header .content h1 {
  line-height : 1;
  margin      : 0 0 5px;
  }

.header .content .lead {
  font-size : 18px;
  }

.header .content .about-text {
  margin : 10px 0;
  }

.header .btn {
  margin-top : 40px;
  }

@media (max-width : 768px) {
  .header {
      padding       : 0;
      text-align    : center;
      border-bottom : 1px solid #ededed;
      }

  .header img {
      margin : 0 auto;
      }

  .header .content {
      padding : 50px;
      }
  }

/* Header Sticky */

.sticky {
  position : -webkit-sticky;
  position : sticky;
  top      : 0;
  }

/*-------------------
* Social Icon
*-------------------*/

.icon-list {
  margin  : 20px 0;
  padding : 0;
  display : block;
  }

.icon-list li {
  display : inline-block;
  margin  : 0 4px 0 0;
  }

.icon-list li a {
  display       : block;
  font-size     : 12px;
  color         : #333333;
  width         : 34px;
  height        : 34px;
  line-height   : 33px;
  text-align    : center;
  border-radius : 2px;
  border        : 2px solid #eeeeee;
  }

.icon-list li a:hover {
  border-color : #cccccc;
  }

/*-------------------
* Expertise
*-------------------*/
.expertise-item {
  margin-bottom : 20px;
  }

.expertise-item h3 {
  margin-bottom : 5px;
  font-weight   : 700;
  }

/*-------------------
* Skills Progressbar
*-------------------*/

.progress-item {
  position : relative;
  }

.progress-item .progress-title {
  font-size     : 14px;
  font-weight   : 400;
  display       : inline-block;
  margin-bottom : 0px;
  }

.progress-item .progress {
  height        : 4px;
  box-shadow    : none;
  border-radius : 5px;
  }

.progress-item .progress-bar {
  background-color : #FFC107;
  box-shadow       : none;
  text-align       : right;
  }

.progress-item .progress-percent {
  font-size        : 10px;
  background-color : #313131;
  position         : absolute;
  top              : 5px;
  padding          : 0 8px;
  border-radius    : 3px;
  }

.progress-item .progress-percent::before {
  content      : "";
  position     : absolute;
  left         : 0;
  bottom       : -2px;
  border-top   : 4px solid #313131;
  border-right : 8px solid transparent;
  }

/*-------------------
* Portfolio
*-------------------*/

.portfolio-item {
  position      : relative;
  display       : block;
  margin-bottom : 30px;
  }

.portfolio-item .portfolio-thumb img {
  display   : block;
  height:auto;
max-width:100%;
  }
.portfolio-thumb {
display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}

.portfolio-thumb img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%
}

.portfolio-item .portfolio-info {
  position   : absolute;
  bottom     : 0;
  padding    : 30px 15px 5px;
  width      : 100%;
  background : -webkit-linear-gradient(
          top,
          transparent 0%,
          rgba(0, 0, 0, 0.5) 100%
  );
  }

.portfolio-item .portfolio-info h3 {
  margin      : 0;
  line-height : 1;
  color       : #ffffff;
  }

.portfolio-item .portfolio-info small {
  color : #ffffff;
  }

.portfolio-item:hover .portfolio-info {
  background : -webkit-linear-gradient(
          top,
          transparent 0%,
          #000 100%
  );
  }

/*-------------------
* Content Item
*-------------------*/

.content-item {
  margin-bottom : 0px;
  }

.content-item h3 {
  margin         : 0 0 10px;
  line-height    : 1;
  font-weight    : bold;
  
  }

.content-item h4 {
  margin      : 0;
  line-height : 1;
  }

.content-item small {
  color : #888888;
  }

/*-------------------
* Contact
*-------------------*/

.feedback-form {
  margin-top : 50px;
  }

/*-------------------
* Form Style
*-------------------*/
.form-control {
  height        : 50px;
  padding       : 0 20px;
  font-size     : 13px;
  line-height   : 50px;
  color         : #969595;
  border        : 1px solid #cccccc;
  border-radius : 0;
  box-shadow    : none;
  box-sizing    : border-box;
  }

.form-control:focus,
.form-control:active {
  box-shadow : none;
  }

/* --------------------------------------------
*   Footer
*---------------------------------------------- */

/* Copyright */

.footer {
  padding : 10px 30px;
  }

.footer .copyright-section {
  font-size : 11px;
  color     : #CCCCCC;

  }

.footer .copyright-section .copytext {
  font-weight : 400;
  display     : block;
  }

.widget{
width: 300px;
}

.copytext a{
color : #6EC3CC;
}

@media (max-width : 480px) {
  .footer {
      padding : 10px 20px;
      }
  }

/* ---------------------------------------------- /*
* Preloader
/* ---------------------------------------------- */
#preloader {
  background : rgba(255, 255, 255,.8);
  bottom     : 0;
  left       : 0;
  position   : fixed;
  right      : 0;
  top        : 0;
  z-index    : 9999;
  }

#status,
.status-mes {
  background-image    : url(../img/preloader.svg);
  background-position : center;
  background-repeat   : no-repeat;
  height              : 200px;
  left                : 50%;
  margin              : -100px 0 0 -100px;
  position            : absolute;
  top                 : 50%;
  width               : 200px;
  }

.status-mes {
  background : none;
  left       : 0;
  margin     : 0;
  text-align : center;
  top        : 65%;
  }


/* Responsive Images */
img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }


/* popup modal */
.popup-modal {
max-width: 550px;
background: #fff;
position: relative;
margin: 0 auto;
}

.popup-modal .description-box { padding: 12px 36px 18px 36px; }
.popup-modal .description-box h4 {
 font: 'opensans-bold', sans-serif;
margin-bottom: 0;
 color: #111;
}
.popup-modal .description-box h5 {
 font: 'opensans-bold', sans-serif;
margin-bottom: 12px;
 color: #111;
}
.popup-modal .description-box p {
font: 14px/24px 'opensans-regular', sans-serif;
 color: #666666;
 margin-bottom: 12px;
}
.popup-modal .description-box .categories {
 font: 11px/21px 'opensans-light', sans-serif;
 color: #666666;
 text-transform: uppercase;
 letter-spacing: 2px;
 display: block;
 text-align: left;
}
.popup-modal .description-box .categories i {
 margin-right: 8px;
}
.popup-modal .link-box {
 padding: 18px 36px;
 background: #111;
 text-align: left;
}
.popup-modal .link-box a {
 color: #fff;
font: 11px/21px 'opensans-bold', sans-serif;
text-transform: uppercase;
 letter-spacing: 3px;
 cursor: pointer;
}
.popup-modal a:hover {	color: #00CCCC; }
.popup-modal a.popup-modal-dismiss, .popup-modal a.popup-modal-link { margin-left: 24px; }


/* fadein/fadeout effect for modal popup
/* ------------------------------------------------------------------ */

/* content at start */
.mfp-fade.mfp-wrap .mfp-content .popup-modal {
 opacity: 0;
 -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
 transition: all 200ms ease-in-out;
}
/* content fadein */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-modal {
 opacity: 1;
}
/* content fadeout */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-modal {
 opacity: 0;
}

.rslides_tabs {
font-size: 11px;
list-style: none;
margin: 0 auto;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}

.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}

.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}

.rslides_tabs a:hover {
border: 0;
}

.rslides_tabs li:first-child {
margin-left: 0;
}

.rslides_tabs .rslides_here a {
color: #00565E;
font-weight: bold;
}

.parser:after {
content: attr(data-name) "." attr(data-school) "@" attr(data-domain) "." attr(data-tld); 
}

.semi-link {
  color: black;
  text-decoration: underline;
  text-decoration-color: #00CCCC;
  text-decoration-thickness: 1.5px;
}





/* Modal styles */
.modal-content {
  background: rgba(255, 255, 255);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  text-align: center;
  height: 100px;
}

.modal-body p {
  font-size: 24px;
  /* margin-bottom: 20px; */
}

.modal-body .btn {
  font-size: 24px;
}

/* From Uiverse.io by McHaXYT */ 
.button {
  padding: 15px 20px;
  border: none;
  outline: none;
  background-color: #151515;
  color: #eee;
  border-radius: 7px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease-out;
}

.button:hover {
  transform: translateY(-3px);
}

.button-span {
  color: #aaa;
}