/*
Darker: #444547
Dark: #7D7D75
Yellow shade: #B4B4A6
Blue shade: #8FF1F2
Purple shade: #969DCA
*/

@font-face {
  font-family: SourceSansPro;
  src: url(../fonts/SourceSansPro-Regular.ttf);
}

@font-face {
  font-family: SourceSansPro;
  src: url(../fonts/SourceSansPro-Semibold.ttf);
  font-weight: 500;
}

@font-face {
  font-family: SourceSansPro;
  src: url(../fonts/SourceSansPro-Bold.ttf);
  font-weight: 600;
}

@font-face {
  font-family: Saira;
  src: url(../fonts/SairaCondensed-Regular.ttf);
}

@font-face {
  font-family: Saira;
  src: url(../fonts/SairaCondensed-SemiBold.ttf);
  font-weight: 500;
}

@font-face {
  font-family: Saira;
  src: url(../fonts/Saira-Bold.ttf);
  font-weight: 600;
}

@font-face {
  font-family: Saira;
  src: url(../fonts/SairaCondensed-ExtraBold.ttf);
  font-weight: 800;
}

body {
  margin: 0px;
  font-family: SourceSansPro;
  font-size: 14px;
  color: #5f6063;
  background-color: #fafafa;
  overflow: hidden;
}

#dg_content {
  margin: 0px;
  overflow: auto;
  width: 100%;
}

/* Add a black background color to the top navigation */
.dg-topnav {
  background-color: #fafafa;
  color: #444547;
  overflow: hidden;
  font-family: Saira;
}

/* Style the links/navigation items */
a {
  color: #7D7D75;
  text-decoration: none;
}

/* Change the color of links on active */
a:active {
  border: none;
  outline: none;
  color: #969DCA;
}

/* Change the color of links on focus */
a:focus {
  border: none;
  outline: none;
}

/* Change the color of links on hover */
a:hover {
  color: #969DCA;
}

#dg_totop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: none;
}

#dg_totop.show {
  display: block;
}

#dg_totop i {
  color: #e4e8f0;
}

#dg_logo {
  width: 100%;
}

#dg_logo > img {
  width: 65%;
  max-width: 800px;
  margin-top: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#dg_skills {
  width: 90%;
  max-width: 1400px;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.dg-skills-block i {
  font-size: 6vw !important;
  overflow: hidden;
}

.dg-skills-text>h1 {
  font-size: 2.3vw;
  margin-top: 0px;
  margin-bottom: 0px;
}

.dg-skills-text>p {
  font-size: 1.6vw;
  margin-top: 0px;
}

.dg-skills-image {
  width: 100%;
  margin-bottom: -4px;
}

.dg-skills-text {
  width: 25vw;
  margin-top: 0px;
  margin-bottom: 4px;
}

.dg-skills-block {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#dg_skills_one {
  float: left;
}

#dg_skills_three {
  float: right;
}

#dg_skills_one i,
#dg_expertise_one i,
#dg_expertise_one h1 {
  color: #969DCA;
}

#dg_skills_two i,
#dg_expertise_two i {
  color: #B4B4A6;
}

#dg_skills_three i,
#dg_expertise_three i,
#dg_expertise_three h1 {
  color: #75c7c9;
}

#dg_expertise_two h1 {
  color: #9a9a91;
}

#dg_portfolio,
#dg_expertise {
  height: 500px;
  border-bottom: 1px solid #a7a799;
}

.dg-expertise-block {
  width: 33%;
  float: left;
}

#dg_about {
  overflow: hidden;
  position: fixed;
  background-color: #fff;
  border: 2px solid #a7a799;
  z-index: 10;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: calc(100% - 120px);
}

#dg_about_text {
  width: calc(100% - 80px);
  padding: 40px 40px;
  font-size: 16px;
}

#dg_motto_text {
  font-family: Saira;
  color: #a3a396;
  width: 100%;
  margin-top: 14px;
}

#dg_motto_text>h1 {
  font-size: 42px;
  text-align: center;
  margin: 0px;
}

#dg_motto_text>p {
  font-size: 22px;
  text-align: center;
  margin: 0px;
}

#dg_contact,
#dg_contact>img {
  min-height: 200px;
  max-height: 400px;
}

#dg_expertise,
#dg_portfolio {
  position: relative;
}

#dg_expertise,
#dg_portfolio {
  overflow: hidden;
}

.dg-expertise-title,
.dg-expertise-text {
  position: relative;
  margin: 0 auto;
  width: 240px;
}

.dg-expertise-block {
  margin-top: 20px;
}

#dg_expertise_text>h1 {
  padding: 40px 0px 10px 80px;
}

#dg_portfolio_text {
  float: left;
  max-width: 880px;
  height: 400px;
  padding: 40px 80px;
}

#dg_footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 40px;
  background-color: #fafafa;
}

#dg_footer_wrapper {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.dg_footer_wrap_icon {
  float: left;
}

#dg_wrap_icon_linkedin {
  margin-top: -5px;
  margin-right: 50px;
}

#dg_wrap_icon_whatsapp {
  margin-right: 50px;
}

#dg_wrap_icon_email {
  margin-top: 3px;
  margin-right: 50px;
}

#dg_wrap_icon_phone {
  margin-top: 3px;
}

.dg_icon_linkedin {
  width: 100px;
  height: 100px;
}

.dg_icon_whatsapp {
  width: 88px;
  height: 88px;
}

.dg_icon_email {
  width: 85px;
  height: 85px;
}

.dg_icon_phone {
  width: 86px;
  height: 86px;
}

.dg-hidden {
  display: none;
}

.dg-show {
  display: block;
}

.dg_footer_wrap_icon > a > img,
.dg_footer_wrap_icon > a > svg {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.dg_footer_wrap_icon > a > img:hover,
.dg_footer_wrap_icon > a > svg:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

@media screen and (min-width: 1700px) {
  .dg-skills-block i {
    font-size: 102px !important;
  }

  .dg-skills-text>h1 {
    font-size: 39px;
  }

  .dg-skills-text>p {
    font-size: 27px;
  }

  .dg-skills-text {
    width: 424px;
  }
}

@media screen and (max-width: 1230px) {
  #dg_motto_text>h1 {
    font-size: 3.4vw;
  }

  #dg_motto_text>p {
    font-size: 1.8vw;
  }

  .dg_icon_linkedin {
    width: 8.1vw;
    height: 8.1vw;
  }
  
  .dg_icon_whatsapp {
    width: 7.13vw;
    height: 7.13vw;
  }
  
  .dg_icon_email {
    width: 6.89vw;
    height: 6.89vw;
  }
  
  .dg_icon_phone {
    width: 6.97vw;
    height: 6.97vw;
  }
}

@media screen and (max-width: 800px) {
  #dg_motto_text>h1 {
    font-size: 6vw;
  }

  #dg_motto_text>p {
    font-size: 3.6vw;
  }

  #dg_motto_text {
    margin-top: -4px;
  }

  #dg_skills {
    width: 100%;
    margin-top: 25px;
    text-align: center;
  }

  .dg-skills-block i {
    font-size: 9vw !important;
    overflow: hidden;
  }

  .dg-skills-text>h1 {
    font-size: 5vw;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .dg-skills-text>p {
    font-size: 3.6vw;
    margin-top: 0px;
  }

  .dg-skills-image {
    width: 100%;
    margin-bottom: -4px;
  }

  .dg-skills-text {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 4px;
  }

  #dg_skills_one {
    float: none;
  }

  #dg_skills_three {
    float: none;
  }

  #dg_logo>img {
    width: 80%;
    margin-top: 20px;
  }

  .dg_icon_linkedin {
    width: 14vw;
    height: 14vw;
  }
  
  .dg_icon_whatsapp {
    width: 12.32vw;
    height: 12.32vw;
  }
  
  .dg_icon_email {
    width: 11.9vw;
    height: 11.9vw;
  }
  
  .dg_icon_phone {
    width: 12.04vw;
    height: 12.04vw;
  }

  #dg_footer {
    padding-bottom: 26px !important;
  }
}

@media screen and (max-height: 900px) {
  #dg_footer {
    padding-bottom: 10px;
  }

  #dg_logo > img {
    max-width: 700px;
  }
}

@media screen and (max-height: 600px) {
  #dg_footer {
    position: relative;
    padding-top: 80px;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
}