*{box-sizing: border-box;
    font-family: 'Lobster', cursive;
}
html { 
  margin: 0; /*Обнуляем значения отступов*/ 
  padding: 0;
  height:100%;
  scroll-behavior: smooth;
  }
  
 body {
  background: rgb(214, 129, 189);
  font-size: 16px;
  
 }
 #wraper 
 {background-image: url(https://pa1.narvii.com/6608/6bba5af041341c74327219b51a9e2991de3842b8_hq.gif); /*Фон задаем цветом:*/ 
	
	width:1160px; /*Ширина центрального блока*/
	margin:0 auto; /* Центрируем таблицу*/
	min-height:100%;/*минимальная высота 100% - для прижатого к низу окна футера*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    
 }
 /* h1{
     text-align: center;
 } */
 #wrap {
   width: 960px;
   margin: 0 auto; 
 }

 h1 {
	margin: 0;
	text-align: center;
	line-height: 120px;
  
}

h1:hover {
	transition: 3s;
	color: rgb(199, 243, 38);
}
 ul {
   position: relative;
   /* Относительное позиционирование родителя */
   list-style: none;
   font-family: Arial, Verdana, sans-serif;
   font-size: 18px;
   margin-left: -40px;
   scroll-behavior: smooth;
 }

 a {
   text-decoration: none;
 }

 ul#nav a {
   display: block;
   background: rgba(240, 150, 190, 0.75);
   /* Полупрозрачный фон */
   color: #fff;
   padding: 5px;
 }

 ul#nav>li {
   position: relative;
   /* Относительное позиционирование родителя */
   float: left;
   margin-right: 15px;
  /* white-space: nowrap; */
  font-size: 30px;
  text-align: center;
  border: 4px #da0a9b groove;

 }

 ul#nav ul {
   position: absolute;
   /* Абсолютное позиционирование */
   list-style: none;
   left: -9999px;
   /* Скрываем за экраном, когда не нужно */
   opacity: 0;
   /* Устанавливаем начальное состояние прозрачности */
   transition: opacity 0.5s linear;
   /* Замедление эффекта*/
   font-size: 19px;
   z-index: 20;
  
 }

 ul#nav ul li {
   padding-top: 1px;
   border: 4px #da0a9b groove;
   /* Вводим отступ между li для разделения пунктов меню */
 }

 ul#nav ul a {
   white-space: nowrap;
   /* Запрещаем перенос текста на следующую строку */
 }

 ul#nav li:hover ul {
   /* Выводим выпадающее меню при наведении курсора */
   left: 0px;
   /* Возвращаем его обратно на экран*/
   opacity: 1;
   /* Делаем непрозрачным */
   border: 4px #da0a9b groove;
 }

 ul#nav li a:hover {
  transition: 1s;
	color: rgb(199, 243, 38);
   background: rgb(216, 60, 130);
   /* Непрозрачный фон при наведении мыши */
 }
 

 .clear {
   clear: left;
   /* Очистка обтекания */
 }

 ul#nav{
	list-style-type: none;
    padding: 0;
	float: left;
	margin-left: 200px;
}

.parallax {
    background-image: url(https://rem-stroitelstvo.ru/wp-content/uploads/2016/02/serrozint.jpg);
     
    width: 960px;
    height: 370px;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    
    color: #ffffff;
    font-size: 60px;
    align-items: center;
    position: relative;
   top: 5px;



}
.parallax .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    z-index: 2;
  
  
}
.parallax h1 {
    z-index: 3; 
   
}
.photos1{	
	width:4px;
	margin-left:30% ;

	}
.photos1 a{
	display: block;
	background:#fff;
	margin-right: 5px;
	margin-top: 5px;
	padding: 5px;
	float: left;
}	
.photos1 a:hover    { 
	background:rgb(196, 84, 190);
 }
.pressbox {
    width: 690;
    height: 0;
    position: fixed;
    overflow: auto;
    left: 0;
    top: 0;
    /* Поверх всех остальных элементов */
    z-index: 9999;
    text-align: center;
    /* Полупрозрачный серый фон */
    background: rgba(0,0,0,0.5);
    }

.foto{
	background: rgb(120, 92, 221);
	/* width:200px; */
	height:35px;
	margin:5px auto;
	/* тени */
	-webkit-box-shadow: 0px 0px 15px #444;
	-moz-box-shadow: 0px 0px 15px #444;   
	box-shadow: 0px 0px 15px #444;
}
.pressbox img    {
	/* изначально полностью прозрачная картинка */
	opacity: 0;
	padding: 10px;
	background: #ffffff;
	margin-top: 0px;
    /* width: 300px;
    height: 340px; */
	  
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
         
	}

.pressbox:target {
    width: auto;
    height: auto;
    bottom: 0;
    right: 0;
    }
  
 .pressbox:target img {
    opacity: 1;
    }
    a {
        color: rgb(174, 216, 223);
        text-decoration: none;
    }
    .postcard {
        max-width: 350px;
        margin: 50px auto 0;
        padding: 20px;
        background: #f2ffda;
        border: 10px solid transparent;
        border-image: 10 repeating-linear-gradient(135deg, #C42061, #C42061 10px, transparent 10px, transparent 20px, #FBCFDF 20px, #FBCFDF 30px, transparent 30px, transparent 40px);
        font-family: 'Playfair Display';
        color: #605756;
     }
     .form-row {
        margin-bottom: 15px;
     }
     .form-row input[type="text"], .form-row input[type="email"], .form-row textarea {
        width: 100%;
        padding: 0 10px;
        line-height: 35px;
        border-width: 0;
        outline: none;
        background: transparent url(https://html5book.ru/wp-content/uploads/2016/12/bg-form.png) bottom left repeat-x;
        background-size: 8px 35px;
        font-family: 'Playfair Display';
     }
     .form-row textarea {
        background-attachment: local;
        background-repeat: repeat;
        resize: none;
     }
     .form-row input[type="submit"] {
        padding: 10px 20px;
        margin-top: 10px;
        background: #ffd9e5;
        border-width: 0;
        cursor: pointer;
        outline: none;
        font-family: 'Playfair Display';
        font-size: 13px;
        letter-spacing: 1px;
        color: #99d5f8;
        text-transform: uppercase;
        transition: 1s cubic-bezier(.165, .84, .44, 1);
     }
     .form-row input[type=submit]:hover {
        background: #8c159c;
     }
     h3{
       color:rgb(242, 231, 243);
       
       
     }
     p{
        background-color: #fff;
        font-size: 30px;
        text-align: center;
        margin-top: 30px;
      
          transition: 3s;
          color: rgb(12, 9, 216);
        
     }

    
   h2{
     color: rgb(146, 40, 146);
    transition: 3s;

   }
#footer .wrap {
  z-index: 9;
  color: rgb(248, 245, 245);
  text-align: center;
  
}
    #top{
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: block;
      width:100px;
      height: 100px;
      background: rgba(48,54,70);
      border-radius: 50%;
      z-index: 9999;
    }
    
    /*Стили для картинки в кнопке "Вверх"*/
    
    #top img{
      width: 100%;
      height: 100%;
    }
    @keyframes bounce {
      from, to {
      -webkit-transform: translateY(10vh) scaleY(.98);
      transform: translateY(10vh) scaleY(.98);
      }
      80% {
      -webkit-transform: translateY(10vh) scaleY(1.02);
      transform: translateY(10vh) scaleY(1.02);
      }
      }
      .serdse {
      border-radius: 9vw 11vw 1vw 20vw;
      width: 120px;
      height: 165px;
      background-image: radial-gradient(ellipse farthest-corner at 0 0, #FF414A,#f00);
      margin: 0 auto;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
      animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
      float: left;
      }
      @keyframes bounce {
      from, to {
      -webkit-transform: translateY(10vh) scaleY(.98);
      transform: translateY(10vh) scaleY(.98);
      }
      80% {
      -webkit-transform: translateY(10vh) scaleY(1.02);
      transform: translateY(10vh) scaleY(1.02);
      }
      }
      .serdse1 {
      border-radius: 15vw 11vw 25vw 1vw;
      width: 120px;
      height: 165px;
      background-image: radial-gradient(ellipse farthest-corner at 100% 0%, #FF414A,#f00);
      margin: 0 0 0 105px;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
      animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
      }
      
      .serdse1::after {
      content: '';
      position: absolute;
      left: -33px;
      bottom: -50px;
      border: 40px solid transparent;
      border-top: 20px solid rgb(231, 21, 21);
      }