/*!
 * Start Bootstrap - Resume v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/resume)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-resume/blob/master/LICENSE)
 */
:root {
  --gold1: #BD5D38; 
  --gold: #bc6544; 
  --dark: #45505b;
  --gray: #868e96;
  --cgray: #ccc;
}
body {
  font-family: 'Open Sans', serif;
  padding-top: 54px;
  color: #868e96; }

@media (min-width: 992px) {
  body {
    padding-top: 0;
    padding-left: 17rem; } }

h1,
h2,
h3,
h4,
h5,
h6 { font-family: 'Saira Extra Condensed', serif; font-weight: 700; text-transform: uppercase; color: #343a40; } 
h1 { font-size: 5.5rem; line-height: 5.5rem; } 
h2 { font-size: 3.5rem; } 
@media (max-width: 768px) { h1 {  font-size: 4.5rem; line-height: 4.5rem; } }

/* .right { float: right;  */}
.subheading { text-transform: uppercase; font-weight: 500; font-family: 'Saira Extra Condensed', serif; font-size: 1.35rem; }

.list-social-icons a { color: #495057; }
.list-social-icons a:hover { color: var(--gold); } 
.list-social-icons a .fa-lg { font-size: 1.75rem; } 
/* .list-icons { max-width: 550px;} */
.list-icons li.list-inline-item { font-size: 2.6rem; vertical-align: top; margin:0 0.8rem 1.1rem 0; max-height: 50px;}
.list-icons .devicon-sqlite-plain { font-size: 2.5rem; }
.list-icons .devicon-php-plain { font-size: 3.5rem; }
.list-icons .devicon-dot-net-plain { font-size: 3.4rem; }
.list-icons .devicon-ruby-plain { font-size: 2.2rem; }
.list-icons .list-inline-item i:hover { color: var(--gold); } 
.list-social-icons { display: none; }
.list-icons { cursor: default;}
.list-icons img, .list-icons image { width:2.3rem;  margin-top: -15px; filter: invert(57%) sepia(8%) saturate(341%) hue-rotate(169deg) brightness(96%) contrast(92%); }
.list-icons img:hover, .list-icons image:hover { filter: invert(39%) sepia(76%) saturate(452%) hue-rotate(331deg) brightness(96%) contrast(94%); }
.list-icons .webgl { width: 4.6rem; }
.list-icons .val3D { width: 4rem; margin-left: -5px; }
/* .list-icons .desktop { display: none; } */
/* @media (min-width: 580px) { .list-icons .desktop { display: inline-block; } .list-icons .mobile { display: none; } } */
@media (max-width: 1152px) { .list-icons br { display: none; } }
@media (max-width: 768px) { .list-icons li.list-inline-item { margin:0 0.8rem 0.6rem 0; } }


#sideNav { text-transform: uppercase; padding: 8px 10px; }
#sideNav .d-lg-none { font-family: 'Saira Extra Condensed', serif; font-size: 24px ; }
#sideNav .d-lg-none img { margin:0 4px !important ; }
#sideNav .navbar-nav .nav-item .nav-link { font-weight: 600; text-transform: uppercase; padding-left: 10px; /* font-family: "open-sans", sans-serif; */ }
#sideNav .navbar-toggler { color: rgba(255,255,255,.5); border: 2px solid rgba(255,255,255,.4); border-radius: unset; padding: 4px 4px; margin: 0 4px; }
#sideNav .navbar-toggler:focus { box-shadow: unset; }
#navbarSupportedContent > ul { padding-top: 15px;}
#nav_about { display: block; }

@media (min-width: 992px) {
  #nav_about { display: none !important; }
  #sideNav {
    padding: 8px 0px 45px;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background: url(../img/logo.png) no-repeat center 62px ;
    width: 17rem;
    height: 100vh; }
    #sideNav .navbar-brand {
      display: flex;
      margin: auto auto 0;
      padding: 0.5rem; }
      #sideNav .navbar-brand .img-profile {
        max-width: 10rem;
        max-height: 10rem;
        border: 0.5rem solid rgba(255, 255, 255, 0.2); }
    #sideNav .navbar-collapse {
      display: flex;
      align-items: flex-start;
      flex-grow: 0;
      width: 100%;
      margin-bottom: auto; }
      #sideNav .navbar-collapse .navbar-nav {
        flex-direction: column;
        width: 100%; }
        #sideNav .navbar-collapse .navbar-nav .nav-item {
          display: block; }
          #sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
            display: block; letter-spacing: 0.05rem;
          } 
}



section.resume-section { border-bottom: 1px solid #dee2e6; padding-top: 5rem !important; padding-bottom: 5rem !important; } 
section.resume-section .resume-item .resume-date { min-width: none; }

@media (max-width: 768px) {
  section.resume-section { padding-top: 3.5rem !important; padding-bottom: 2.5rem !important; } 
  .portfolio-container { margin: 0 auto;}
}
@media (min-width: 768px) {
  section.resume-section { min-height: 100vh; }
  section.resume-section .resume-item .resume-date { min-width: 18rem; } 
  #about { background: url(../img/sign.jpg) no-repeat bottom right;}
}

@media (min-width: 992px) {
  section.resume-section { padding-top: 3rem !important; padding-bottom: 3rem !important; } 
}

.bg-primary { background-color: var(--gold) !important; }

.text-primary { color: var(--gold) !important; }

a { color: var(--gold); }
a:hover, a:focus, a:active { color: #824027; }

.section-title { text-align: left; padding-bottom: 0px;  }
.section-title h2 { font-size: 50px;  }
@media (min-width: 768px) { .section-title h2 { font-size: 60px;  } }
.section-title h2::before { left:0; width:66%; }
.section-title h2::after { left:0; width:var(--underline); height: 4px; background: var(--gold); bottom:-2px }
/* #web .section-title h2::after { width:226px; }
#d3 .section-title h2::after { width:348px; }
#video .section-title h2::after { width:108px; }
#print .section-title h2::after { width:110px; }
#resume .section-title h2::after { width:220px; }
#logo .section-title h2::after { width:300px; }
#logo .section-title h2 { margin-bottom: 30px; } */

.margin10 { height: 15px;}
p.pro { color: #45505b; font-size: 26px; font-family: "Poppins", sans-serif; padding-left:8px; margin:0 0 54px; min-height: 70px; }

#about > div { min-height:370px; }
#about h1 { margin-top:10px; }
#about .list-icons { margin-bottom: 0.5rem; padding-left:6px; }
#about .list-icons.firstline { margin-bottom: 0; }
#about .list-icons.lastline { margin-top:8px; }
@media (max-width: 576px) { #about h1 { padding-left:8px;  } p.pro { margin-bottom: 40px; } }

#about .skills { padding-left: 8px; margin-bottom:18px; font-size: 14px; }

.portfolio #portfolio-flters { text-align: left; margin: 0 0 10px 0; padding-left: 0; }
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { color: var(--gold); }
.portfolio .portfolio-wrap { background: #fff; text-align: center; }
.portfolio .portfolio-wrap::before { background: rgba(255, 255, 255, 0.9) }
.portfolio .portfolio-wrap::before { background: rgba(0, 0, 0, 0.5) }
.portfolio .portfolio-wrap .portfolio-links a, .portfolio .portfolio-wrap .portfolio-info h4, .portfolio .portfolio-wrap .portfolio-info p { color: #fff; }
.portfolio .portfolio-wrap .portfolio-info h4 { font-size: 36px; margin-bottom: 2px;}

a.openbig { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; cursor: pointer; }
.portfolio .portfolio-wrap .portfolio-info { z-index: 5; cursor: pointer; }
.portfolio .portfolio-wrap .portfolio-info sub { position: absolute; color: white; bottom:28px; right:28px; opacity:.25; transition: bottom .5s ease-out, opacity 1s; 
  font-family: 'Saira Extra Condensed', serif; font-size: 16px; }
.portfolio .portfolio-wrap:hover .portfolio-info sub { opacity:.85; bottom:34px; }
/* .portfolio .portfolio-wrap .portfolio-info .portfolio-links { z-index: 6; } */
.portfolio .portfolio-wrap .portfolio-info .portfolio-link { z-index: 6; color: #fff; margin: 0 2px; font-size: 28px; display: inline-block; transition: 0.3s;  }
.portfolio .portfolio-wrap .portfolio-link:hover { color: var(--gold); }
.portfolio-item { max-width: 500px ;}

.award { width:54px; height:59px; position: absolute; top: -4px; left: 4px; z-index: 10;}

#logo .portfolio-item { max-width: 250px; vertical-align: middle;}
#logo img { filter: saturate(0%) sepia(8%) brightness(100%); opacity: .5; transition: all .3s;  }
#logo img:hover { filter: saturate(100%) sepia(0%) brightness(100%); opacity: 1; }

#print .portfolio-item { max-width: 353px; vertical-align: middle;}

.tooltip.fade { transition: opacity .4s;}


@media (min-width: 1600px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1520px;
    margin: 0;
  }
}

.resume .resume-title { font-size: 30px; font-weight: 700; margin-top: 20px; margin-bottom: 20px; color: var(--dark); }
.resume .resume-item { padding: 0 0 20px 20px; margin-top: -2px; border-left: 2px solid var(--gold); position: relative; }
.resume .resume-item::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50px; left: -9px; top: 0; background: #fff; border: 2px solid var(--gold); }
.resume .resume-item h4 { line-height: 18px; font-size: 16px; font-weight: 600; text-transform: uppercase; font-family: "Open Sans", sans-serif; font-weight: bold; color: var(--gold); margin-bottom: 10px; }
.resume .resume-item h4 span { color:var(--dark); }
.resume .resume-item h5 { font-size: 14px; background: #f7f8f9; padding: 5px 15px; display: inline-table; font-weight: 600; margin-bottom: 10px;font-family: "Open Sans", sans-serif }
.resume .resume-item h6 { font-size: 16px; background: #c37050; padding: 5px 25px; display: table; font-weight: 600; margin: 0 0 10px -20px; color:white; font-family: "Open Sans", sans-serif }
.resume .resume-item h6 span { font-size: 12px; opacity: .85; font-weight: normal;     letter-spacing: 0.05em; }

.resume .resume-item ul { margin-bottom: 0.3rem;}
.resume .resume-item.summary ul { padding: 0;}
.resume .resume-item.summary ul li { margin:0 0px 10px; padding:0; list-style:none; /* display: inline-block; */  }
.resume .resume-item.summary ul li:first-child {/*  margin: 0 10px 8px 0; */ }
.resume .resume-item.summary ul .sep { border-right: 1px solid var(--gold); }
.resume .resume-item i { /* background: #fff; border-radius: 20px;  */font-size: 22px; color: var(--gold); padding: 3px; margin: 0 12px 0 0; /* border:2px solid var(--gold) */}
.resume .resume-item i.iconline-home { margin-top: -5px;  display: inline-block; }
.resume .resume-item i.icon-mail-1 { font-size: 22px; }
.resume .resume-item i.icon-home-outline { font-size: 20px; }
.resume .resume-item i[class^="iconline-"] { vertical-align: middle; }
.resume .resume-item i svg { fill: var(--gold); /* margin: 0 3px; */  }
.resume .resume-item a { color: black; }
.resume .resume-item a:hover, .resume .resume-item a:focus, .resume .resume-item a:active { color: var(--gold); }
.resume .resume-item p a { font-weight: bold;}
.resume .resume-item:last-child, .resume .resume-item.last-item, .resume .resume-item.skills { padding-bottom: 0; }
.resume .resume-item.skills { margin-top: -5px;}
.resume .resume-item.skills ul { padding: 10px 0; }
.resume .resume-item.skills ul li { list-style:none; padding-bottom: 12px; /* text-transform: uppercase; margin:0 0 10px 0; */ }
.resume .resume-item.skills ul li em { font-style: italic; font-size:13px; }
.resume .resume-item.skills ul.last { padding-bottom:0; }
.resume .resume-item.skills ul li:after { content:attr(data-skill); width:var(--prog); float:right; max-width:80%; font-size: 9px; border-bottom:1px solid var(--cgray); color:var(--cgray); text-align: right; text-transform: uppercase; }
/* .resume .resume-item.skills i { color:var(--gray); } */
.resume .resume-item.skills i { vertical-align: sub; font-size: 24px; }
.resume .resume-item.skills i img { max-height: 24px; filter: invert(57%) sepia(8%) saturate(341%) hue-rotate(169deg) brightness(96%) contrast(92%);}
.resume .resume-item.skills img { margin-right:16px; max-height: 24px; vertical-align: bottom; filter: invert(39%) sepia(76%) saturate(452%) hue-rotate(331deg) brightness(96%) contrast(94%); }

#references .container { margin-top: -1.5rem;}
/* .refs .resume-item { border:none; } */
@media (min-width: 1280px) { .refs { padding-right: 1.5rem } }
.refs .resume-item { padding-bottom: 0; margin-bottom: 50px;}
.refs .resume-item::before { content: ""; position: absolute; width: 24px; height: 30px; border-radius: unset; left: -9px; top:0; background: #fff; border: none; }
.refs .resume-item::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50px; left: -9px; top:unset; bottom: 0px; background: #fff; border:2px solid var(--gold) }
.refs .resume-item img { position: absolute; top:-10px; left:-18px; width: 24px; 
  filter: invert(39%) sepia(76%) saturate(452%) hue-rotate(331deg) brightness(96%) contrast(94%); }
 .refs .resume-item .right { text-align: right; }
 .refs .resume-item p { margin-bottom: 0.5rem;}
 .refs .resume-item h4, .refs .resume-item h5, .refs .resume-item h6 { display: block; text-align: right; padding: 5px 15px}
 .refs .resume-item h6 { background: #fff; color: #000; border-bottom:0px solid var(--gold); background: #f7f8f9; }
 .refs .resume-item h4 { margin-bottom: 0;}
 .refs .resume-item h4 span { font-style: normal; font-size: 12px; font-weight: normal; display: block; margin-top: 5px; }

 .back-to-top { background: var(--gold);}
 .back-to-top:hover { background: var(--dark); color: #fff; }