@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300';
/*Обнуление*/
*{
	padding: 0;
	margin: 0;
	border: 0;
}
*,*:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
	height: 100%;
	width: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/
/*Обнуление закончено*/

body{
  font-family: 'Open Sans Condensed', sans-serif;
}
/*Верхнее меню*/


/*Верхнее меню закончили*/
/*Нижнее меню*/
ul.footer {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    font-size:1.5vw;
    list-style-type: none;
    padding: 0;
    width: 100%;

     /* Цвет бэкграунда*/
background: rgb(228,213,255);
background: linear-gradient(0deg, rgba(228,213,255,1) 0%, rgba(255,255,255,1) 6%, rgba(255,255,255,1) 96%, rgba(228,213,255,1) 100%);
    box-shadow: 2px 2px 10px 0 rgba(228,213,255,1);

}
body {
    padding-bottom: 900px;
}
.sukapadding{
    height: 60px;
}

/*ul.footer li {float: left;}*/
ul.footer li a {
    display: block;
    color: #2f0a35; /*Цвет шрифта навбара*/
    font-size: calc(20px + 0.390625vw);
    text-align: center;
    padding: 0px 0px;
    text-decoration: none;
    justify-content: center;
}
/*ul.footer li a:hover:not(.active) {background-color: #DAC5FF;} !*Цвет вкладки под мышкой*!*/
/*ul.footer li a.active {background-color: #CEB2FF;} !*Цвет активной вкладки*!*/
/*Нижнее меню закончили*/


.icon{ /*Иконки*/
    height: 40px;
}
/*начинаем сетку*/
.grid{
    display: flex;
    justify-content: center;
}
.text{
    margin: 10px;
    display: flex;
    align-items: center;
    border: 1px solid lightgray;
    text-align: center;
    /*автоматический размер шрифта, в зависимости от размера экрана*/
    font-size: calc(20px + 0.390625vw);
    max-width: 500px;
}
/*Заголовки у текстов*/
.text .about{
    font-style: italic;
    font-weight: 600;
}
.photo{
    margin: 10px;
    border: 1px solid lightgray;
    min-width: 600px;
    display: flex;
}
img {
    margin: auto;
        max-width: 100%;
}
/*Тут адаптивность, если экран меньше 800 меняем направление флексбокса на столбец*/
@media (max-width: 767px) {
    .grid {
        flex-direction: column;
    }
    .text {
        max-width: 100%;
    }
    .photo{
        min-width: 250px;
    }
}
/*Ниже карточки фотографий в галерее*/
#container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;

}
.el{
    background-color: white;
    max-width: 400px;
    padding: 5px;
    border: 1px white;
    margin: 5px;
    border-radius: 5px;
    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
    height: auto;
}
.el img {
    max-width: 100%;
}
.el .img_name{
    text-align: center;
    margin: 5px;
    font-size: calc(20px + 0.390625vw);
}
/*Переназначаем ссылки, что бы текст не синел и не фиолетовел*/
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}



/*Ниже тест кнопки*/
div[class*=box] {
	height: 50px;
	width: auto;
  display: flex;
  justify-content: center;
  align-items: center;

}



.btn {
	line-height: 50px;
	height: 50px;
	text-align: center;
	width: 150px;
	cursor: pointer;
}

/*
========================
      BUTTON ONE
========================
*/
.btn-one {
	color: black;
	transition: all 0.3s;
	position: relative;

}
.btn-one span {
	transition: all 0.3s;
}
.btn-one::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 0.3s;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: rgba(130,130,130,0.5);
	border-bottom-color: rgba(130,130,130,0.5);
	transform: scale(0.1, 1);
}
.btn-one:hover span {
	letter-spacing: 2px;
}
.btn-one:hover::before {
	opacity: 1;
	transform: scale(1, 1);
    background-color: rgba(230,230,255, 0.2);
    z-index: 2;
}
.btn-one::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.3s;
	background-color: rgba(255,255,255,0);
}
.btn-one:hover::after {
	opacity: 0;
	transform: scale(0.1, 1);
}

.btn-pressed{
  border-top-style: solid;
	border-bottom-style: solid;
	border-top-width: 1px;
	border-bottom-width: 1px;
  border-top-color: rgba(130,130,130,0.5);
	border-bottom-color: rgba(130,130,130,0.5);
  z-index: 1;
  letter-spacing: 2px;
}
.new_topnav{
    display: flex;
    font-size: calc(20px + 0.390625vw);
    justify-content: center;
}
@media (max-width: 767px){
    .btn{
        max-width: 90px;
    }
    .btn-x{
        max-width: 500px;
    }
}
@media (max-width: 350px){
    .btn{
        max-width: 70px;
        font-size: calc(17px + 0.390625vw);
    }
    .btn-x{
        max-width: 300px;
    }
}

form {
    margin: auto;
    margin-top: 50px;
}
form div{
    margin: auto;
    width: 60%;
    font-size: calc(20px + 0.390625vw);
    text-align: center;
    overflow-wrap: break-word;
}
form button{
    background-color: white;
    font-size: calc(20px + 0.390625vw);
}
.text_in_form {
    display: flex;
    align-items: center;
    border: 1px solid lightgray;
    text-align: center;
    /*автоматический размер шрифта, в зависимости от размера экрана*/
    font-size: calc(20px + 0.390625vw);
    min-width: 200px;
    width: 100%;
}

/*Страница с ценами на утренники*/

div.allpage{
    margin: auto;
    padding: 5px;
    max-width: 1200px;
    align-content: center;
    align-self: center;
    align-items: center;
    text-align: center;
    font-size: calc(20px + 0.390625vw);
    font-style: italic;
}

div.header{
    margin: 5px;
    padding: 5px;
    border: 1px solid lightgray;
    text-align: center;
}
div.header h1 {
    font-size: calc(20px + 0.390625vw);
    font-weight: 600;
}
div.price{
    margin: 5px;
    padding: 5px;
    border: 1px solid lightgray;
}
div.allpage a{
    font-weight: 600;
    text-decoration: underline;
}
div.action{
    margin: 5px;
    padding: 5px;
    border: 1px solid lightgray;
    background-color: #fee8ff;
}
div.price span{
    font-style: italic;
}
div.price_about .photo{
    max-width: 150mm;
    margin: auto;
}
div.price_header{
    font-size: calc(20px + 0.390625vw);
    font-weight: 600;
    font-style: normal;
}
div.price_rubles{
    font-size: calc(20px + 0.390625vw);
    font-weight: 600;
    font-style: normal;
}
span.bold{
    font-weight: 600;
}
div.index_url{
    font-size: calc(17px + 0.390625vw);
    text-decoration: underline;

}
.btn-x{
    width: 270px;
        max-width: 270px;
    background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(254,235,255,1) 30%, rgba(254,235,255,1) 70%, rgba(255,255,255,1) 100%);
    }