@import url("https://fonts.googleapis.com/css?family=Dancing+Script:400,700|Questrial");

/* BEM */
/* block-name--element-name__modifier */
/* MAIN */
/* line 9, ../sass/main.sass */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Questrial", sans-serif;
  font-size: 16px;
  color: #4b666e;
  line-height: 1.5;
  overflow-x: hidden;
}

a,
a:hover {
  color: inherit;
  text-decoration: none;
  transition: all .3s ease-out;
}

.portfolio_header a:hover {
  color: #c32439;
}

.portfolio_img {
  margin: 0 auto;

  aspect-ratio: 4/3;

}



.slogan_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* line 16, ../sass/main.sass */
.slogan {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-align: center;
  /*margin-top: 25%;*/
  padding-left: 15px;
  padding-right: 15px;
}

/* line 23, ../sass/main.sass */
.layout_main {
  background-color: white;
  padding-bottom: 100px;
  padding-top: 100px;
  scroll-margin-top: 30px;
}

/* line 27, ../sass/main.sass */
.heading_main {
  /*margin-top: 100px;*/
  font-family: "Dancing Script", cursive;
  font-size: 48px;
  color: #c32439;
  text-align: center;
}

/* line 34, ../sass/main.sass */
.aboutme {
  text-align: center;
  font-size: 24px;
  color: #dc7928;
}

/* line 39, ../sass/main.sass */
.aboutme_min {
  text-align: center;
}

/* line 44, ../sass/main.sass */
.myphoto {
  width: 200px;
  height: 300px;
  border-radius: 50%;
  margin-top: 100px;
  margin-left: 20px;
}

/* line 51, ../sass/main.sass */
.right {
  text-align: right;
}

/* line 54, ../sass/main.sass */
.words-wrapper {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-align: center;
}

/* line 63, ../sass/main.sass */
.new {
  opacity: 0;
}

/* line 66, ../sass/main.sass */
.div_opacity {
  -webkit-transition: opacity 0.1s ease-in-out;
  -moz-transition: opacity 0.1s ease-in-out;
  -ms-transition: opacity 0.1s ease-in-out;
  -o-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;
  opacity: 1;
}

@media screen and (max-width: 768px) {

  /* line 76, ../sass/main.sass */
  body {
    font-size: 14px;
  }

  /* line 78, ../sass/main.sass */
  .heading_main {
    font-size: 32px;
    margin-top: 2rem;
  }

  .slogan_wrap {
    justify-content: flex-end;
  }

  /* line 80, ../sass/main.sass */
  .slogan {
    font-size: 24px;
    /*margin-top: 250px;*/
    color: #4b666e;
  }

  /* line 85, ../sass/main.sass */
  .words-wrapper {
    font-size: 24px;
    color: #4b666e;
  }

  /* line 89, ../sass/main.sass */
  .layout_main {
    padding-bottom: 30px;
    padding-top: 30px;
  }

  /* line 91, ../sass/main.sass */
  .myphoto {
    width: 100px;
    height: 150px;
    border-radius: 50%;
    margin-top: 20px;
  }

  /* line 96, ../sass/main.sass */
  .aboutme {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {

  /* line 101, ../sass/main.sass */
  body {
    font-size: 16px;
  }

  /* line 103, ../sass/main.sass */
  .heading_main {
    margin-top: 20px;
  }
}

@media screen and (min-width: 1400px) {

  /* line 106, ../sass/main.sass */
  #aboutme {
    padding-right: 60px;
    padding-left: 60px;
  }
}

@media screen and (min-width: 1920px) {

  /* line 110, ../sass/main.sass */
  #aboutme {
    padding-right: 320px;
    padding-left: 320px;
  }
}

/* NAVBAR */
/* line 8, ../sass/nav.sass */
.menu {
  position: relative;
  width: 100%;
  background: -moz-linear-gradient(top, rgba(18, 32, 52, 0.8) 0%, rgba(255, 255, 255, 0) 100%), url(../img/main_bg.jpg) no-repeat;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(18, 32, 52, 0.8)), color-stop(100%, rgba(255, 255, 255, 0))), url(../img/main_bg.jpg) no-repeat;
  background: -webkit-linear-gradient(top, rgba(18, 32, 52, 0.8) 0%, white 100%), url(../img/main_bg.jpg) no-repeat;
  background: -o-linear-gradient(top, rgba(18, 32, 52, 0.8) 0%, white 100%), url(../img/main_bg.jpg) no-repeat;
  background: -ms-linear-gradient(top, rgba(18, 32, 52, 0.8) 0%, white 100%), url(../img/main_bg.jpg) no-repeat;
  background: linear-gradient(to bottom, rgba(18, 32, 52, 0.8) 0%, #ffffff 100%), url(../img/main_bg.jpg) no-repeat;
  z-index: 100;
  height: 1000px;
  background-size: cover;
  padding-left: 0px;
  padding-right: 0px;
  display: flex;

}

/* line 24, ../sass/nav.sass */
.navbar-default {
  text-align: right;
  background: none;
  border: none;
}

/* line 29, ../sass/nav.sass */
.navigation {
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  /*padding-right: 30px;*/
  z-index: 100;

}

.navbar {
  margin-bottom: 0;
}

.navbar-header,
.navbar-collapse {
  /*min-height: 62px;*/
  padding-top: 10px;
  padding-bottom: 10px;
}

/* line 36, ../sass/nav.sass */
.navigation_scrolled {
  background: rgba(18, 32, 52, 0.8);
}

/* line 40, ../sass/nav.sass */
.nav_list {
  padding: 0;
  margin: 32px 0;
}

/* line 44, ../sass/nav.sass */
.nav_list li {
  display: inline-block;
}

/* line 47, ../sass/nav.sass */
.nav_link {
  text-decoration: none;
  margin-left: 20px;
  padding: 10px;
  font-size: 16px;
  color: white;
}

/* line 54, ../sass/nav.sass */
.nav_link:hover {
  /*text-decoration: underline;
  color: white;*/
  opacity: .75;
}

/* line 57, ../sass/nav.sass */
.logo {
  font-family: "Dancing Script", cursive;
  font-size: 48px;
  font-weight: bold;
  padding-left: 20px;
}

@media screen and (max-width: 767px) {

  /* line 63, ../sass/nav.sass */
  .nav_list {
    margin: 0;
    padding: 0;
    text-align: center;
  }

  /* line 67, ../sass/nav.sass */
  .nav_list li {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* line 71, ../sass/nav.sass */
  .nav_link {
    display: block;
    margin: 0;
    padding: 5px 5px 5px 5px;
  }

  /* line 75, ../sass/nav.sass */
  .navbar-default {
    text-align: left;
  }

  .navbar-toggle {
    margin-right: 20px;
  }

}

@media screen and (max-width: 768px) {

  /* line 78, ../sass/nav.sass */
  .menu {
    padding: 0;
    height: 400px;
    width: 100%;
  }

  /* line 83, ../sass/nav.sass */
  .logo {
    font-size: 24px;
    margin-top: 10px;

  }
}

@media screen and (min-width: 1400px) {

  /* line 88, ../sass/nav.sass */
  .navigation {
    padding-right: 60px;
  }

  /* line 90, ../sass/nav.sass */
  .logo {
    padding-left: 60px;
  }
}

@media screen and (min-width: 1920px) {

  /* line 93, ../sass/nav.sass */
  .navigation {
    padding-right: 320px;
  }

  /* line 95, ../sass/nav.sass */
  .logo {
    padding-left: 320px;
  }
}

/* line 6, ../sass/portfolio.sass */
.layout_portfolio {
  background-color: #f0f0f0;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 100px;
  padding-top: 100px;
  scroll-margin-top: 30px;
}

.layout_portfolio_skills {
  padding-bottom: 80px;
  scroll-margin-top: 30px;
}

/* line 11, ../sass/portfolio.sass */
.portfolio_items {
  display: block;

  text-align: center;
}

/* line 16, ../sass/portfolio.sass */
.portfolio_item {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 15px rgb(0 0 0 / 40%);
  transform-origin: center top;
  transform-style: preserve-3d;
  transform: translateZ(0);

}

.portfolio_item img {
  transition: all .3s ease-out;
}

/* :focus and :active just added for a some android versions to simulate hover effect*/
.portfolio_item:hover img,
.portfolio_item:focus img,
.portfolio_item:active img {

  transform: scale(1.05);


}


/* line 20, ../sass/portfolio.sass */
.portfolio_desc {
  margin: 40px 0 80px;

}

.portfolio_header_desc {

  margin-bottom: 40px;
}

/* line 23, ../sass/portfolio.sass 
.portfolio_image {
  padding: 0;
}
*/

/* line 27, ../sass/portfolio.sass */
.portfolio_header {
  color: #dc7928;
  margin-bottom: 0px;
  font-size: 18px;
  font-weight: 600;
  transition: all .3s ease-out;
}

/* line 30, ../sass/portfolio.sass */
.rectangle {
  text-align: center;
}

@media screen and (max-width: 768px) {

  /* line 34, ../sass/portfolio.sass */
  .portfolio_items {
    margin: 10px 0;
  }

  /* line 36, ../sass/portfolio.sass */
  .portfolio_item {
    margin: 10px;
  }

  /* line 38, ../sass/portfolio.sass */
  .portfolio_desc {
    margin-top: 25px;
    margin-bottom: 40px;
  }

  .mb-0 {
    margin-bottom: 0 !important;
  }

  /* line 40, ../sass/portfolio.sass */
  .portfolio_header {
    font-size: 16px;
  }

  .layout_portfolio {
    padding: 30px 15px;

  }

  .portfolio_header_desc {

    margin-bottom: 30px;
  }
}

@media screen and (max-width: 992px) {

  /* line 44, ../sass/portfolio.sass */
  .portfolio_item {
    margin: 10px;
  }


}

@media screen and (min-width: 1400px) {

  /* line 49, ../sass/portfolio.sass */
  #portfolio {
    padding-right: 60px;
    padding-left: 60px;
  }
}

@media screen and (min-width: 1920px) {

  /* line 53, ../sass/portfolio.sass */
  #portfolio {
    padding-right: 320px;
    padding-left: 320px;
  }
}

/* line 1, ../sass/iuse.sass */
.iuse_images {
  margin-top: 30px;
  text-align: center;
}

/* line 5, ../sass/iuse.sass */
.iuse_images img {
  display: inline-block;
  max-height: 55px;
  margin: 20px;
  vertical-align: middle;
  filter: grayscale(100%);
  transition: all .3s ease-out;
}

/* line 12, ../sass/iuse.sass */
.iuse_images img:hover {
  filter: grayscale(0%);
}

/* line 1, ../sass/skills.sass */
.skills_items {
  margin-top: 30px;
  margin-bottom: 30px;
}

/* line 4, ../sass/skills.sass */
.wrap_myphoto {
  display: flex;
  justify-content: center;
}


@media screen and (max-width: 768px) {

  /* line 8, ../sass/skills.sass */
  .skills_items {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  /* line 12, ../sass/skills.sass */
  .sertificate {
    display: inline;

  }

}

@media screen and (min-width: 1400px) {

  /* line 15, ../sass/skills.sass */
  #skills {
    padding-right: 60px;
    padding-left: 60px;
  }
}

@media screen and (min-width: 1920px) {

  /* line 19, ../sass/skills.sass */
  #skills {
    padding-right: 320px;
    padding-left: 320px;
  }
}

/* line 5, ../sass/contact.sass */
.contact {
  text-align: center;
  margin-top: 20px;

}

/* line 10, ../sass/contact.sass */
.contact_glyphicon {
  text-align: center;
  font-size: 24px;
}

/* line 15, ../sass/contact.sass */
.contact p a {
  font-size: 24px;
  color: #4b666e;
  text-decoration: none;
}

/* line 20, ../sass/contact.sass */
.contact p a:hover {
  color: #dc7928;
  text-decoration: none;
}

/* line 24, ../sass/contact.sass */
.icon {
  background-color: #4b666e;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 20px;
  padding-top: 7px;
}

@media screen and (max-width: 768px) {

  /* line 35, ../sass/contact.sass */
  .contact_glyphicon {
    font-size: 18px;
  }

  /* line 38, ../sass/contact.sass */
  .contact p a {
    font-size: 16px;
  }

  /* line 40, ../sass/contact.sass */
  .icon {
    width: 30px;
    height: 30px;
  }
}

/* line 5, ../sass/footer.sass */
.footer {
  background-color: rgba(18, 32, 52, 0.8);
  text-align: center;
  padding: 20px 20px;
}

/* line 10, ../sass/footer.sass */
.footer_copy {
  font-size: 12px;
  color: #faf9f9;
}

/* line 14, ../sass/footer.sass */
.footer_copy_text {
  margin: 0;
  margin-top: 10px;
}

/* line 18, ../sass/footer.sass */
.footer_social {
  padding: 0px;

}

/* line 21, ../sass/footer.sass */
.footer_social_item {
  padding: 10px;
  color: white;
}

a.footer_social_item:hover {
  color: white;
  opacity: .75;
}