@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,500');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Lato&family=Open+Sans&display=swap');

/*************************
*******Typography******
**************************/
body {
  padding-top: 100px;
  background: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: #282828;
  line-height: 26px;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
}
a {
  color: #87135c;
  transition: color 400ms, background-color 400ms;
}
a:hover, a:focus {
  text-decoration: none;
  color: #2a95be;
}
hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}

.btn {
  border-width: 0;
  border-radius: 0;
}
.btn.btn-primary {
  background: #87135c;
}
.btn.btn-primary:hover, .btn.btn-primary:focus {
  background: #87135c;
}

/*************************
*******Header******
**************************/
#main-nav.navbar-default {
  background: #FFFFFF;
}
#main-nav.navbar-default .navbar-nav > li.active > a, 
#main-nav.navbar-default .navbar-nav > li.open > a, 
#main-nav.navbar-default .navbar-nav > li:hover > a {
  background: #87135c;
  color: #FFFFFF;
}
.navbar.navbar-default {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}
.navbar.navbar-default .navbar-toggle {
  margin-top: 32px;
}
.navbar.navbar-default .navbar-brand {
  height: auto;
  padding: 22px 15px 21px;
}

@media only screen and (min-width: 768px) {
  #main-nav.navbar-default {
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.26);
  }
  #main-nav.navbar-default .navbar-nav > li > a {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .navbar-default .navbar-nav>li>a {
    color: #76185a;
  }
  #main-nav.navbar-default .navbar-nav > li.active > a,
  #main-nav.navbar-default .navbar-nav > li.open > a,
  #main-nav.navbar-default .navbar-nav > li:hover > a {
    background: #87135c; 
    color: #FFF;
  }
}

#hero-banner{
  overflow: hidden;
  height:600px;
  background: url('../web_images/mm.jpg');
  background-size:cover;
  color:#fff;
}

#about {
  padding: 100px 0;
  background: url('web_images/pero.png') center/cover no-repeat fixed;
}

#portfolio {
  padding: 100px 0;
  background: #373637;
}

#features {
  padding: 30px 0;
  background: #6c6a6f;
  color: #fff;
}

#contact-me {
  background:url('web_images/pero-4.png') center/cover no-repeat fixed;
  padding:60px 0;
}

/* Модальное окно для изображений */
#imageModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}
#imageModal span {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
#modalImage {
  display: block;
  margin: 0 auto;
  max-width: 90%;
  max-height: 90%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* Адаптивные стили */
@media only screen and (max-width: 768px) {
  #hero-banner h1 {
    font-size: 3em;
    margin-top: 300px;
    margin-left: 0;
    text-align: center;
  }
  #hero-banner h3 {
    font-size: 1.5em;
    margin-left: 0;
    text-align: center;
  }
  .navbar-nav {
    text-align: center;
  }
  .navbar-nav li {
    display: block;
    margin: 10px 0;
  }
}

@media only screen and (max-width: 480px) {
  #hero-banner h1 {
    font-size: 2em;
    margin-top: 200px;
  }
  #hero-banner h3 {
    font-size: 1.2em;
  }
}