@import url('https://fonts.googleapis.com/css?family=Didact+Gothic') ;
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@font-face {
font-family: 'Montserrat', sans-serif;
font-style : normal;
font-weight : 400;
src : local('Didact Gothic Regular'), local('DidactGothic-Regular'), url(https://fonts.gstatic.com/s/didactgothic/v11/ahcfv8qz1zt6hCC5G4F_P4ASlUuYow.ttf) format('truetype');
}
:root {
font-size : 20px;
font-family: 'Montserrat', sans-serif;
}
body {
max-width : 800px;
margin : auto;
}
body {
overflow-x : hidden;
}
a {
color : white;
text-decoration : none;
}
a:visited {
color : white;
}
a:hover {
color : grey;
}
header .menu {
padding : 20px;
display : flex;
}
header {
width : 100%;
margin : 0;
padding : 0;
background-color : #211F1F;
}
header .menu li {
display : inline;
}
header .menu li a {
text-decoration : none;
color : white;
font-weight : 600;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
header nav {
display : flex;
}
main .banner_sighn {
min-height : 800px;
background-image : url(../img/photos/Natali.jpg);
background-size : cover;
background-position : center;
display : flex;
}
main .banner_sighn h1 {
font-family: 'Montserrat', sans-serif;
font-size : 3rem;
text-shadow : 3px 3px 3px black;
color : white;
margin-top : 400px;
text-align : right;
height : 100px;
width : 500px;
}
main .button {
  display: inline-block;
  -webkit-box-sizing: class="support css-value">content-box;
  -moz-box-sizing: content-box;
  box-sizing: width 150px, height 100px;
  cursor: pointer;
  margin: 10px 10px 40px 10px;
  padding: 10px 10px 10px 10px;

  border: 1px solid #0f9b0f;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 20px/60px 'Montserrat', sans-serif;
  color: rgb(255, 255, 255);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(-90deg, rgb(90,190,87) 0, rgb(53,146,56) 100%), rgb(90, 190, 87);
  background: -moz-linear-gradient(180deg, rgb(90,190,87) 0, rgb(53,146,56) 100%), rgb(90, 190, 87);
  background: linear-gradient(180deg, rgb(90,190,87) 0, rgb(53,146,56) 100%), rgb(90, 190, 87);
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3) ;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3) ;
  text-shadow: 0 1px 2px rgb(50,114,40) ;
}

.button:hover {
  background: rgb(90, 190, 87);
  -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.11) ;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.11) ;
  -webkit-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 150ms cubic-bezier(0.42, 0, 0.58, 1);
}

.button:active {
  border: 1px solid rgba(180,180,180,0.2);
  background: rgba(77,168,74,1);
  -webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,0.1) inset;
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.1) inset;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
main .button_send, .button_clean {
display: inline-block;
}

main .order_button_modal, .clean_button_modal {
display: inline-block;
}

main .button_order1 {
padding-bottom : 20px;
}
input[type="checkbox"] {
position : absolute;
opacity : 0;
cursor : pointer;
}
input[type="checkbox"]:focus + label {
color : #211F1F;
}
label {
display : block;
background : #CCD2D4;
color : #211F1F;
padding : 0.5em;
border-bottom : 1px solid white;
}
.video {
position : relative;
padding-bottom : 56.25%;
padding-top : 25px;
height : 0;
}
.video iframe {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
}
section {
height : 0;
transition : all 0.5s;
overflow : hidden;
}
#toggle1:checked ~ #content1, #toggle2:checked ~ #content2, #toggle3:checked ~ #content3, #toggle4:checked ~ #content4 {
height : auto;
}
p {
padding : 0 2em;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.togglebox {
padding-bottom : 20px;
position : inherit;
}
main .container {
background-color : white;
color : #211F1F;
text-align : center;
}
main .my_job {
background-color : #E8EDF0;
color : #211F1F;
text-align : center;
padding-top : 20px;
padding-bottom : 20px;
}

main .more_about_me {
color : grey;
text-align : center;
padding-top : 20px;
padding-bottom : 20px;
margin-bottom : 20px;
}
.container {
width : 100%;
max-width : 960px;
margin : 0 auto;
}
.photo {
float : left;
width : 33.333333%;
padding : 10px;
box-sizing : border-box;
}
.photo img {
display : block;
max-width : 100%;
height : auto;
border : #eee solid 10px;
box-sizing : border-box;
}
.photo a:hover {
opacity : 0.5;
}
.photo a {
display : block;
position : relative;
}
.photo a:after {
content : '';
background : url(../img/icons/eye-icon.png) center no-repeat transparent;
width : 52px;
height : 35px;
position : absolute;
margin : auto;
top : 0;
left : 0;
bottom : 0;
right : 0;
visibility : hidden;
}
.photo:hover > a:after {
visibility : visible;
}
.photo figcaption {
color : #999999;
text-align : center;
margin-top : 20px;
}
#gallery {
margin-bottom : 60px;
}
#gallery:after {
content : '';
display : block;
height : 0;
clear : both;
}
html, section, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin : auto;
}
article, aside, details, figcaption, figure, footer, hgroup, menu, nav, section {
display : block;
}
blockquote, q {
quotes : none;
}
blockquote:before, blockquote:after, q:before, q:after {
content : '';
content : none;
}
table {
border-collapse : collapse;
border-spacing : 0;
}
main .basic_package {
float : left;
width : 33.333333%;
padding : 10px;
box-sizing : border-box;
display : block;
max-width : 100%;
height : 320px;
border : #FFBDBD solid 10px;
border-radius : 10px;
box-sizing : border-box;
float : left;
position : relative;
height : auto;
overflow : hidden;
background-color : #FB6060;
padding : 0;
}
.standart_package {
float : left;
width : 33.333333%;
padding : 10px;
box-sizing : border-box;
display : block;
max-width : 100%;
height : 320px;
border : #FFDAC7 solid 10px;
border-radius : 10px;
box-sizing : border-box;
float : left;
position : relative;
height : auto;
overflow : hidden;
background-color : #FF9A67;
}
.premium_package {
float : left;
width : 33.333333%;
padding : 10px;
box-sizing : border-box;
display : block;
max-width : 100%;
height : 320px;
border : #C8FFD8 solid 10px;
box-sizing : border-box;
float : left;
position : relative;
height : auto;
overflow : hidden;
background-color : #7FDC9B;
}
main.prices {
color : #A41034;
}
main .label_color {
background : white;
}
main .prices {
color : black;
}
.contacts {
height : 170px;
display : inline-block;
width : 100%;
height : 100%;
margin-bottom: 50px;
margin-top: 50px;
}
.form_contact_me {
display : inline-block;
}
main .contacts {
font-size : 1.1rem;
color : grey;
text-align : center;
padding-top : 10px;
padding-bottom : 10px;
}
main .form_contact_me {
margin-top : 80px;
margin-bottom : 80px;
}
input {
width : 80%;
margin-left : auto;
margin-right : auto;
height : 48px;
border : grey solid 1px;
background-clip : padding-box;
font-family: 'Montserrat', sans-serif;
font-size : 18px;
font-weight : 300;
color : black;
margin-bottom : 20px;
}
select {
width : 450px;
}
main .form_contact_me {
margin-left : 80px;
margin-right : 80px;
}
footer {
background-color : #211F1F;
color : white;
padding-top : 10px;
}
footer {
text-align : center;
}
footer li {
display : inline;
}
footer li a {
text-decoration : none;
color : #808080;
font-weight : 600;
font-family: 'Montserrat', sans-serif;
}
footer {
padding-top : 10px;
padding-bottom : 10px;
align-items : center;
justify-content : center;
margin : 0;
}
footer .icons {
display : block;
align-items : center;
justify-content : center;
}
#btn btn-primary {
margin-left : auto;
margin-right : auto;
}
@media (min-width:500px) {
header nav {
display : flex;
}
header .menu {
flex : 1;
align-items : center;
justify-content : center;
}
header .menu li {
margin : 0 2%;
}
}
@media (max-width:560px) {
header .menu {
align-items : center;
justify-content : center;
display : flex;
flex-direction : column;
padding-top : 10px;
}
header .menu li {
margin : 0 2%;
font-size : 18px;
padding-top : 10px;
display : block;
align-items : center;
justify-content : center;
}
main .banner_sighn {
padding-right : 40px;
text-align : center;
}
main .banner_sighn h1 {
font-family: 'Montserrat', sans-serif;
font-size : 2.5rem;
text-shadow : 3px 3px 3px black;
color : white;
margin-top : 400px;
text-align : right;
height : 100px;
width : 500px;
}
main .container .photo {
width : 100%;
}
.button_order2 {
display : block;
align-items : center;
justify-content : center;
padding-left : inherit;
padding-right : inherit;
}
main .basic_package {
width : 100%;
}
.standart_package {
width : 100%;
}
.premium_package {
width : 100%;
}
}