:root{
    --twenty: 20px;
    --thirty: 30px;
    --fourty: 40px;
    --sixty: 60px;
    --eighty: 80px;
    --hundred: 100px;
    --hundred_20: 120px;
    --padding_side: 12vw;
    --video_border: 270px;
    --contacts_border: 500px;

    --h1: 40px;
    --h2: 50px;
    --h3: 20px;
    --h4: 22px;
    --body: 15px;
    --b_body: 18px;
    --body2: 16px;
}
/*fonts*/

@font-face {
    font-family: FixelDisplay;
    font-display: swap;
    src: url("/fonts/FixelDisplay.woff2") format("woff2"), url("/fonts/FixelDisplay.ttf");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: NunitoSans;
    font-display: swap;
    src: url("/fonts/NunitoSans.ttf");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: FixelDisplayBold;
    font-display: swap;
    src: url("/fonts/FixelDisplay-SemiBold.woff2") format("woff2"), url("/fonts/FixelDisplay-SemiBold.ttf");
    font-weight: 600;
    font-style: normal;
}

/*fonts set-up*/

.b_body{
    font-size: var(--b_body);
    line-height: 140%;
    font-family: FixelDisplay;
    font-weight: 400;
}
.body{
    font-size: var(--body);
    line-height: 140%;
    font-family: FixelDisplay;
    font-weight: 400;
}
.body2{
    font-size: var(--body2);
    line-height: 140%;
    font-weight: 400;
    font-family: NunitoSans;
}
.h1{
    font-size: var(--h1);
    line-height: 110%;
    font-family: NunitoSans;
    font-weight: 400;
}
.h2{
    font-size: var(--h2);
    line-height: 110%;
    font-family: NunitoSans;
}
.h3{
    font-size: var(--h3);
    line-height: 120%;
    font-weight: 600;
    font-family: FixelDisplay;
}
.h4{
    font-size: var(--h4);
    line-height: 150%;
    font-weight: 900;
    font-family: FixelDisplay;
}
.number{
    font-weight: 400;
    font-size: var(--h3);
    line-height: 140%;
    font-family: FixelDisplay;
    margin-bottom: var(--thirty);
}

/*margins*/
.top_20{
    margin-top: var(--twenty);
  }
.bottom_20{
    margin-bottom: var(--twenty);
}
.top_30{
    margin-top: var(--thirty);
}
.bottom_30{
    margin-bottom: var(--thirty);
}
.top_40{
    margin-top: var(--fourty);
}
.bottom_40{
    margin-bottom: var(--fourty);
}
.top_60{
    margin-top: var(--sixty);
}
.bottom_60{
    margin-bottom: var(--sixty);
}
.top_80{
    margin-top: var(--eighty);
}
.bottom_80{
    margin-bottom: var(--eighty);
}
.top_100{
    margin-top: var(--hundred);
}
.bottom_100{
    margin-bottom: var(--hundred);
}
.top_120{
    margin-top: var(--hundred_20);
}
.bottom_120{
    margin-bottom: var(--hundred_20);
}

/*default*/

*{
    padding: 0;
    margin: 0;
    color: #191717;
    font-weight: 400;
    scroll-behavior: smooth;
    box-sizing: border-box;  /*should be okay*/
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.placeholder_black::placeholder{
    color: rgba(0, 0, 0, 0.7);
}
.placeholder_red::placeholder{
    color: #F5C1C4;
}
input:-webkit-autofill {
    box-shadow: 0 0 0 1000px white inset;
}
a{
    text-decoration: none;
}
a:visited{
    text-decoration: none;
}
button:hover{
    cursor: pointer;
}
.white{
    background-color:  rgba(255, 255, 255, 0.8);

}
.white_opacity{
    background-color:  rgba(255, 255, 255, 1);
    border:  1px solid rgba(0, 0, 0, 0);
    z-index: 10;
}
.white_opacity:hover{
    background-color: transparent;
    border: 1px solid black;
}
body.pink{
    background-color: #F2E7E5;
}
.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--thirty);
}
.margin_bottom{
    margin-bottom: var(--sixty);
}
.margin_zero{
    margin-bottom: var(--sixty);
}
.margin_zero_2{
    margin-bottom: var(--thirty);
}
.bottom2{
    margin-bottom: var(--hundred);
}
.margin2{
    margin-bottom: var(--thirty);
}
.border{
    border: 1px solid black;
}
/*header segment*/

header{
    background-color: rgba(242, 231, 229, 0.8);

    position: sticky;
    top: 0;

    z-index: 100;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--thirty);

    padding: 15px var(--padding_side);
    justify-content: center;

    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}
nav{
    width: 100%;
    display: grid;
    grid-template-columns: 60% 1fr;
}
nav > div{
    width: inherit;
}
nav>ul{
    height: 45px;
}
.links li{
    display: flex;
    align-items: center;
    justify-content: center;
}
.links li{
    height: 45px;
}
.links li a{
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3px; /*fix level*/
}
.show{
    display: none;
}
.menu{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 50px;
    width: 50px;
    border-radius: 50%;

    float: right;

    background: #FFFFFF;
}
.pink{
    background: #F2E7E5;
}
.cascading_menu{
    padding: 15px var(--padding_side) 0;
    background: #FFFFFF;
    position: fixed;
    top: 0;
    z-index: 120;
    height: 100vh;
    width: 100vw;
    transition: all 0.5s;
}
.hidden {
    display: none;
}

.visuallyHidden {
    opacity: 0;
}
.cascading_container{
    display: flex;
    flex-direction: column;
}
.cascading_logo{
    display: flex;
    justify-content: space-between;
}
.close{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #F2E7E5;

    display: flex;
    justify-content: center;
    align-items: center;
}
.cascading_logo > a{
    display: flex;
    justify-content: start;
    align-items: center;

}
.cascading_nav{
    padding-bottom: var(--eighty);
    padding-top: var(--eighty);

    display: flex;
    flex-direction: column;
    align-items: center;
}
.links{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.links > li > a:hover{
    text-decoration: underline #191717;
}
nav > div > a{
    height: 45px;
    width: 160px;
    display: flex;
    justify-content: end;
}
nav > div{
    display: flex;
    justify-content: end;
    align-items: center;
}
.contacts_button {
    height: 45px;
    width: 160px;
    text-align: center;
    background: #FFFFFF;
    border: none;
    border-radius: 25px;
    padding-top: 3px;/*fix level*/
    display: flex;/*doesn't help*/
    justify-content: center;
    align-items: center;
}
.contacts_button_pink{
    height: 45px;
    width: 160px;
    text-align: center;
    padding: 0;
    background: #F2E7E5;
    border: none;
    border-radius: 25px;
}
.contacts_button:hover{
    color: #FFFFFF;
    background-color: #191717;
}
.contacts_button_pink:hover{
    color: #FFFFFF;
    background-color: #191717;
}
.logo{
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: start;
}
.logo_link{
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.main_logo{
    height: 20px;
    margin-right: 5px;
}
.bird_logo{
    height: 30px;
}
/*1 page*/
.greeting_article{
    background: #F2E7E5;

    padding: var(--sixty) var(--padding_side) var(--hundred);
}
.profile {
    display: flex;
    justify-content: center;
    align-items: start;

    background-image: url("/img/profile_photo.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 25px;
}
.pictures{
    display: flex;
}
.picture{
    width: 100%;
}

.pictures2{
	display: flex;
}
.pictures2_wr{
	position: relative;
	border-radius: 100%;
    overflow: hidden;
    transform: scale(1.06);
    width: 33.33333%;
	    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.pictures2_wr:HOVER{
	transform: scale(1.22);
}

.pictures2_img{
	display: block;
    width: 100%;
    height: 100%;
}




/*2 page*/
hr{
    border: 1px solid #F2E7E5;
    margin: var(--twenty) 0 var(--twenty);
}
.info_article{
    margin: 0;
    background: #FFFFFF;
    padding: var(--hundred) var(--padding_side) var(--hundred_20);
}
.video_content{
    display: grid;
    grid-template-columns: 1fr 0.75fr;
}

.image{
    background-image: url("/img/video.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;

    border-radius: var(--video_border);

    position: relative;
    left: 20%;
    z-index: 20;


    display: flex;
    justify-content: center;
    align-items: center;
}
.play_container{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 50px;
    width: 50px;
    background-color: #F2E7E5;
    border-radius: 50%;
    transition: all .2s;
    cursor: pointer;
}
.image2{
    background-image: url("/img/logo/simplicity-big-logo.svg");
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1 / 1;

    border-radius: 50%;

    position: relative;
}
.play_button{
    border-style: solid;
    border-color: transparent transparent transparent #191717;
    border-width: 7px 0 7px 14px;
    transform: translateX(2px);
    transition: all .2s;
}

#js_play_video:hover{
	cursor:pointer;
}

#js_play_video:hover .play_container {
    background-color: #191717;
}

#js_play_video:hover .play_button {
    border-color: transparent transparent transparent #F2E7E5;
}
.modal{
    background-color: rgba(25, 23, 23, 0.9);
    z-index: 120;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    display: none;
}
.modal_container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    justify-content: center;

    height: 90%;

    aspect-ratio: 9 / 16;
}
.video{
    background-color: #191717;
}
video:focus{
    outline: none;
}
.close_button{
    position: absolute;
    top: 1vh;
    right: 1vh;
    width: 2vw;
    height: 2vw;
    background-image: url("/img/icons/close.svg");
    opacity: 85%;
    background-repeat: no-repeat;
    background-size: cover;
}
.close_button:hover{
    cursor: pointer;
}
.text_list{
    list-style: none;
    padding: 0;
}
.contact_button{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 60px;
    width: 350px;

    padding: 0;
    background: #F2E7E5;
    border: none;
    border-radius: 160px;
}
.contact_button:hover{
    background-color: #191717;
    color: #FFFFFF;
}

/*3 page*/
.carrousel_section{
    background-color: #DCEEED;
    padding: var(--hundred) var(--padding_side) 0;
}
.navigation_buttons{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
}
.arrow{
    display: flex;
    justify-content: center;
    align-items: center;

    align-self: end;

    border: 1px solid black;
    border-radius: 50%;
    height: 60px;
    aspect-ratio: 1 / 1;
}
.arrow svg{
    height: 75%;
}
.arrow:hover{
    cursor: pointer;
}
.r1{
    grid-area: 2 / 7 / 3 / 8;
    justify-self: end;
    user-select: none;
}
svg{
    fill: #191717
}
.r1:hover{
    background-color: #191717;
}
.r1:hover>svg{
    fill: #FFFFFF;
}
.r2{
    grid-area: 2 / 8 / 3 / 9;
    justify-self: end;
    user-select: none;
}
.r2:hover{
    background-color: #191717;
}
.r2:hover > svg{
    fill: #FFFFFF;
}
.carrousel{
    padding-top: var(--fourty);
    background-color: #DCEEED;
    width: 100%;
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    padding-bottom: var(--hundred);
}
.container_carrousel{
    user-select: none;
    will-change: transform;
    transition: all .2s;
    display: flex;
    transform: translateX(var(--padding_side));
}
.circle{
    min-width: 400px;

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    margin-right: -20px;

    display: block;

    position: relative;
    user-select: none;
}
.circle:hover{
    cursor: pointer;
    background-color: #FFFFFF;
    border: transparent;
}
.container_text{
    width: 70%;
    height: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;

    white-space: normal;

    user-select: none;
}
.container_text > p.body{
    line-height: 150%;
}
.container_text > p.h3{
    margin-bottom: 10px;
    font-family: FixelDisplayBold;
}

/*4 page*/
.section_project{
    background-color: #FFFFFF;
    padding: var(--hundred) var(--padding_side) var(--hundred);
}
.projects{
    grid-template-rows: auto;
    grid-row-gap: var(--sixty);
}
.project_photos{
    display: inline-block;
    overflow: hidden;
    border-radius: 20px;
}
.house{
    width: 100%;
    display: block;
    border-radius: 20px;
    transition: .4s;
    transform: scale(100%);
}
.project_info{
    display: flex;
    flex-direction: column;
}
.project_info  div{
    margin-bottom: auto;
}
.text p.h3{
    font-family: FixelDisplayBold;
}
.project_button{

    height: 60px;
    width: 100%;

    justify-self: end;

    padding: 0;
    background: none;
    border-radius: 90px;
    border: 1px solid black;
}
.project_button:hover{
    background-color: #F2E7E5;
    border: 0;
}

/*5 page*/
.section_instagram{
    padding: 0 var(--padding_side);
    background-color: #FFFFFF;
}
.inspire_block{
    margin-bottom: var(--fourty);
}
.bottom p.h3{
    font-family: FixelDisplayBold;
}
.instagram_link{
    display: flex;
    justify-content: end;
    align-items: end;
    text-decoration: underline #191717;
}
.instagram_photos{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 15px;
}
.big_photo{
    grid-area: 1 / 4 / 3 / 6;
}
.box_photo{
    display: flex;
    justify-content: center;
    align-items: center;
}
.box_photo > a{
    width: 100%;
}
.ellipse{
    border-radius: 50%;
    width: 100%;
}
.ellipse:hover{
    cursor: pointer;
}

/*6 page*/
.section_contacts{
    padding: var(--hundred_20) var(--padding_side) var(--hundred_20);
    background-color: #FFFFFF;
}
.section_contacts > div:first-child p.h3{
    font-family: FixelDisplayBold;
}
.circle_contact{
    border-radius: 50%;
    background-color: #DCEEED;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.content{
    margin: 0 auto;
    padding-top: 115px;
    padding-bottom: 20%;
    width: clamp(40%, 30%, 20%);
}
.content p.h3{
    font-family: FixelDisplayBold;
}
.content > div a{
    font-family: FixelDisplayBold;
}
.simplicity_contacts{
    height: var(--sixty);
}
.inputs{
    display: flex;
    flex-direction: column;
}
label{
    margin-bottom: 10px;
}
.margin_lil_40{
    margin-bottom: var(--sixty);
}
.input{
    padding-left: var(--fourty);
    box-sizing: border-box;


    border: 1px solid #F2E7E5;
    border-radius: 48px;
    color: #191717;

    height: 65px;
    width: 100%;
}
.send_button{
    height: 85px;
    width: 100%;
    background-color: #F2E7E5;

    border-radius: 160px;
    border: 0;
}
.container{
    display: flex;
    /*justify-content: space-between;*/
}
.table_icons{
    display: flex;
    justify-content: space-between;
    margin-right: var(--thirty);
}
.table_icons > a{
    display: flex;
    justify-content: center;
    align-items: center;
}
.icons{
    display: flex;
    justify-content: center;
    align-items: center;

    margin-right: 10px;

    height: 40px;/*fix height*/
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    border: 1px solid black;
}
.icons > img{
    height: 65%;/*fix size*/
}
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.icons:hover{
    background-color: #F2E7E5;
    border-color: transparent;
}
.insta {
    background-color: #191717;
    background-image: url("/img/icons/instagram.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 45%;/*fix size*/
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.insta:hover {
    background-color: #F2E7E5;
    color: black;
    background-image: url("/img/icons/instagram_black.svg");
}

/*footer*/

footer{
    background-color: #191717;
    padding: var(--hundred) var(--padding_side) var(--hundred);
    color: #E6EDF6;
}
.logo_footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.terms{
    display: grid;
    grid-template-columns: 43% 27% 30%;
    color: #FFFFFF;
}
.left{
    display: flex;
    align-items: end;
    justify-content: start;
}
.right{
    display: flex;
    align-items: end;
    justify-content: end;
}
.middle{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.footer_text{
    color: #E6EDF6;
    font-size: var(--body2);
    font-weight: 400;
    opacity: 75%;
}
.footer_img_logo{
    opacity: 50%;
    height: 132px;
}
.footer_img_bird{
    opacity: 50%;
    height: 205px;
}

/*projects: after header*/
.header_after{
    padding: 70px var(--padding_side) var(--sixty);
}
.project_text{
    display: grid;
    align-items: end;
    width: 50%;
}
.card{
    display: inline-block;
    overflow: hidden;
    border-radius: 20px;
    width: 100%;
}
.projects_grid{
    padding: 0 var(--padding_side) var(--hundred_20);

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;

    grid-template-rows: 1fr 1fr 1fr;
    grid-row-gap: 40px;
}
.medium-logo{
    height: 120px;
    background-image: url("/img/logo/simplicity-medium-logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

/*project*/
.center{
    padding: 0 var(--padding_side) 0;
}
.margin_top{
    margin-top: 70px;
}
.little_article{
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
    grid-column-gap: var(--thirty);
    margin-top: 15px;
    margin-bottom: 15px;
}
.little_article > div{
    display: flex;
    justify-content: space-between;
}
.little_article_text{
    justify-self: start;
}
.container_div{
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
    grid-column-gap: var(--thirty);
}
.container_div > div:first-child > p.body2{
    margin-top: 10px;
}
.container_div > p.h4{
    font-family: FixelDisplayBold;
}
.container_div > div:first-child > p.h4{
    font-family: FixelDisplayBold;
}
.list{
    list-style-position: inside;
}
.list li{
    margin-left: 10px;
}
.list >  li::marker{
    margin-right: 10px;
}
.box{
    padding: var(--fourty);
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

    background-color: #F2E7E5;
}
.box > p.h3{
    margin-bottom: 10px;
    font-family: FixelDisplayBold;
}
.stroke{
    color: #F2E7E5;
    font-family: NunitoSans;
    font-size: 35px;
    font-weight: 100;
    margin-right: 11px;
}
.carrousel_2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--thirty);
}
.pink_border{
    border: 1px solid #F2E7E5;
    border-radius: var(--twenty);
}
.carrousel_container{
    margin: var(--sixty) var(--padding_side);
}
.carrousel_bird{
    display: flex;
    justify-content: end;
    align-items: center;
    margin-right: var(--twenty);
    margin-bottom: var(--twenty);
}
.carrousel_bird > img{
    height: 25px;
}
.inner_margin{
        margin: var(--twenty) var(--thirty);
}
.carrousel_2_content{
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    margin-bottom: var(--twenty);
}
.counter{
    margin-right: 11px;
}
.arrows{
    display: flex;
    justify-content: start;
    align-items: center;
    margin-left: var(--fourty);
}
.arrow_2{
    border-radius: 50%;
    border: 1px solid #191717;
    width: 35px;
    aspect-ratio: 1 / 1;

    display: flex;
    justify-content: center;
    align-items: center;
}
.arrow_2:hover{
    cursor: pointer;
    user-select: none;
}
.arrow_2 svg{
    height: 50%;
}
.a1{
    margin-right: 10px;
}
.a1:hover{
    border-color: transparent;
    background-color: #191717;
}
.a1:hover > svg{
    fill: #FFFFFF;
}
.a2:hover{
    border-color:transparent;
    background-color: #191717;
}
.a2:hover > svg{
    fill: #FFFFFF;
}
.carrousel_block_2 {
    overflow: hidden;
    border-radius: 10px;
}
.carrousel_block_2  div{
    border-radius: 10px;
}
.carrousel_photo {
   border-radius: 10px;
    object-fit: cover;
}

.grid_left{
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
    grid-template-rows: 430px;
    grid-gap: var(--thirty);
}
.grid_right{
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    grid-template-rows: 430px;
    grid-gap: var(--thirty);
}
.grid_block{
    background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
    height: 100%;
    transition: .4s;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}
.grid_container{
    overflow: hidden;
    border-radius: 10px;
    width: 100%;
}
.grid_block:hover{
    transform: scale(115%);
}
.block{
    border-radius: 30px;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    margin-bottom: var(--sixty);
}
.photo{
    border-radius: 30px;
    width: 100%;
    display: block;
    transition: .4s;
}
.photo:hover{
    transform: scale(115%);
}
/*mobile*/
@media all and (min-width: 320px) and (max-width: 767px){
    /*setup*/
    :root{
        --padding_side: 4vw;
        --h1: var(--thirty);
        --h2: 28px;
        --h3: 18px;
        --body: 15px;
        --body2: 16px;
        --b_body: 18px;
    }
    .h3{
        line-height: 130%;
    }
    /*default*/
    .grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

    }
    .margin_lil_40{
        margin-bottom: var(--twenty);
    }
    .margin_lil_20{
        margin-bottom: var(--twenty);
    }
    .bottom2{
        margin-bottom: var(--eighty);
    }
    .margin2{
        margin-bottom: var(--twenty);
    }
    .placeholder_black::placeholder{
        color: rgba(0, 0, 0, 0.7);
    }
    .placeholder_red::placeholder{
        color: #F5C1C4;
    }
    /*header*/
    header{
        position: sticky;
        padding: 15px var(--padding_side);
        top: 0;
    }
    .show{
        height: 50px;
        display: flex;
        justify-content: end;
        align-items: center;
    }
    .logo{
        height: inherit;
    }
    .logo_link{
        height: inherit;
    }
    .main_logo{
        height: 20px;
    }
    .bird_logo{
        height: 30px;
    }
    /*1 page*/
    .greeting_article{
        padding-bottom: var(--fourty);
        padding-top: 10px;
    }
    .profile{
        height: 300px;
        margin-bottom: var(--thirty);
    }
    /*2page*/
    .info_article{
        padding: var(--sixty) var(--padding_side) var(--eighty);
    }
    .video_player{
        height: 255px;
    }
    .video_content{
        height: 100%;
        position: relative;
        grid-template-columns: 1fr 1fr;
    }
    .image{
        background-image: url("/img/video_circle.png");
        background-size: cover;
        aspect-ratio: 1 / 1;
        height: 255px;
        position: relative;
        top: 0;
        left: 0;
    }
    .image2{
        position: absolute;
        height: 100%;
        left: 25%;
        top: 0;
    }
    hr{
        margin: 10px 0 10px;
    }
    .close_button{
        width: var(--twenty);
        height: var(--twenty);
    }
    .contact_button{
        width: 100%;
    }
    /*3 page*/
    .carrousel_section > div > p{
        margin-bottom: var(--twenty);
    }
    .navigation_buttons{
        display: flex;
        margin: 0 auto;
    }
    .arrow{
        border-radius: 50%;
        height: 60px;
        aspect-ratio: 1 / 1;
    }
    .arrow img{
        height: 26px;
    }
    .carrousel{
        padding-bottom: var(--sixty);
    }
    .container_text{
        width: 70%;
        height: 60%;
        margin-top: var(--eighty);
    }
    .number{
        margin-bottom: var(--twenty);
    }
    .circle{
        min-width: 380px;

        aspect-ratio: 1 / 1;
        background-color:  rgba(255, 255, 255, 1);
        margin-right: -5%;
        border-color: transparent;
    }
    .circle:hover{
        border-color: transparent;
        background-color: rgba(255, 255, 255, 1);
    }
    .r1{
        margin-right: 5px;
    }
    .r2{
        margin-left: 5px;
    }
    /*4 page*/
    .section_project{

        padding: var(--sixty) var(--padding_side) var(--sixty);
    }
    .projects{
        grid-row-gap: var(--thirty);
    }
    .project_photos{
        height: 400px;
    }
    .house{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /*5 page*/
    .section_instagram{
        padding: 0 var(--padding_side);
    }
    .instagram_link{
        justify-content: start;
    }
    .bottom{
        margin-bottom: var(--twenty);
    }
    .inspire_block{
        margin-bottom: var(--twenty);
    }
    .instagram_photos{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: var(--twenty);
        grid-row-gap: var(--twenty);
    }
    .big_photo{
        grid-area: 1 / 1 / 3 / 3;
    }
    .p1{
        grid-area: 5 / 1 / 6 / 2;
    }
    .p4{
        grid-area: 5 / 2 / 6 / 3;
    }
    .hide {
        display: none;
    }
    .insta{
        margin-left: 10px;
    }
    .insta:hover{
        margin-left: 10px;
    }
    /*6 page*/
    .margin_lil{
        margin-bottom: var(--twenty);
    }
    .input::placeholder {
        color: rgba(25, 25, 23,1);
    }
    .input{
        padding-left: var(--fourty);
        box-sizing: border-box;
        margin-bottom: 10px;

        border: 1px solid #F2E7E5;
        border-radius: 50px;
        color: rgba(25, 23, 23, 1);

        height: var(--sixty);
    }
    /*contacts*/
    .section_contacts{
        padding: var(--eighty) var(--padding_side) var(--eighty);
        background-color: #FFFFFF;
    }
    .circle_contact{
        width: 100%;
        height: 450px;
        aspect-ratio: auto;
        border-radius: var(--contacts_border);
    }
    .content{
        margin: 0 auto;
        padding-top: 25%;
        padding-bottom: 10%;
        width: clamp(60%, 50%, 40%);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .container{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .text_center{
        text-align: center;
    }
    .table_icons{
        margin-right: 0;
    }
    .table_icons > a{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /*footer*/
    footer{
        padding: var(--sixty) var(--twenty);
    }
    .logo_footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .footer_img_logo{
        opacity: 50%;
        height: 40px;
    }
    .footer_img_bird{
        opacity: 50%;
        height: 65px;
    }
    .terms{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        color: #FFFFFF;
    }
    .left{
        margin-bottom: var(--twenty);
    }
    .right{
        justify-content: start;
    }
    .privacy{
        margin-bottom: var(--fourty);
    }
    /*projects*/
    .header_after{
        padding: var(--twenty) var(--padding_side) var(--fourty);
        grid-template-columns: 1fr 1fr;
    }
    .margin_top{
        margin-top: var(--twenty);
    }
    .project_text{
        width: 100%;
        text-align: end;
    }
    .project_button{
        height: var(--sixty);
    }
    .projects_grid{
        padding-bottom: var(--eighty);
        grid-template-columns: 1fr;
        grid-row-gap: var(--fourty);
        grid-column-gap: 0;
    }
    /*project*/
    .little_article{
        grid-template-columns: 0.3fr 1fr;
    }
    .block{
        border-radius: 30px;
        display: inline-block;
        overflow: hidden;
        width: 100%;
        height: 450px;
    }
    .photo{
        height: 100%;
        object-fit: fill;
        transform: scaleX(160%);
    }
    .photo:hover{
        transform: scale3d(175%, 115%, 100%);
    }
    .little_article_text{
        justify-self: start;
    }
    .container_div{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-row-gap: var(--twenty);
    }
    .margin_bottom{
        margin-bottom: var(--fourty);
    }
    .margin_zero{
        margin-bottom: 0;
    }
    .margin_zero_2{
        margin-bottom: 0;
    }
    .list{
        list-style-position: inside;
    }
    /*carrousel*/
    .carrousel_2{
        display: grid;
    }
    .carrousel_photo{
        height: 350px;
    }
    .carrousel_container{
        margin: var(--fourty) var(--twenty) var(--fourty) var(--twenty);
    }
    .carrousel_bird{
        margin-right: 10px;
    }
    .inner_margin{
        margin: var(--twenty) 10px 10px 10px;
    }
    .arrow_2{

    }

    /*grid*/
    .grid_left{
        grid-template-columns: 1fr;
        grid-row-gap: var(--twenty);
        grid-template-rows: auto;
    }
    .grid_right{
        grid-template-columns: 1fr;
        grid-row-gap: var(--twenty);
        grid-template-rows: auto;
    }
    .grid_container{
        border-radius: 10px;
    }
    .grid_block{
        border-radius: 10px;
    }
    .long_s{
        height: 450px;
        background-position: right;
    }
    .short{
        height: 250px;
        background-position: center center;
    }
    .long{
        height: 350px;
        background-position: bottom;
    }
    .modal_container{
        height: 75%;
    }
    .close_button{
        top: 10px;
        right: 10px;
        width: var(--twenty);
        height: var(--twenty);
    }
}
/*tablet*/
@media all and (min-width: 768px) and (max-width: 1024px) {
    /*setup*/
    :root{
        --padding_side: 2vw;
        --h1: var(--fourty);
        --h2: 50px;
        --h3: var(--twenty);
        --body: 15px;
        --body2: 16px;
        --b_body: 18px;
    }
    .h3{
        line-height: 130%;
    }
    .body{
        line-height: 150%;
    }
    /*default*/
    .grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

    }
    .margin_lil_40{
        margin-bottom: var(--fourty);
    }
    .placeholder_black::placeholder{
        color: rgba(0, 0, 0, 0.7);
    }
    .placeholder_red::placeholder{
        color: #F5C1C4;
    }
    /*header*/
    header{
        grid-template-columns: max-content 1fr;
    }
    .logo{
        margin-right: var(--fourty);
    }

    /*1 page*/
    .greeting_article{
        padding-bottom: var(--fourty);
    }
    .profile{
        height: 620px   ;
        margin-bottom: var(--thirty);
    }
    .picture{
        content: url("/img/pictrues_tablet.png");
    }

    /*2 page*/
    .info_article{
        padding: var(--eighty) var(--padding_side) var(--eighty);
    }
    .video_content{
        grid-template-columns: 340px 1fr 1fr;
    }
    .image{
        left: 0;
        height: 255px;
        background-size: cover;
    }
    .image2{
        right: 15%;
        height: 255px;
    }
    .contact_button{
        width: 45%;
    }
    .close_button{
        width: var(--thirty);
        height: var(--thirty);
    }

    /*3 page*/
    .carrousel_section{
        padding: var(--eighty) var(--padding_side) 0;
    }
    .projects_main{
        display: grid;
        grid-template-columns: 1fr 0.4fr;
        grid-column-gap: 0;
    }
    .navigation_buttons{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        justify-self: end;

    }
    .circle{
        margin-right: -3%;
    }
    .project_photos{
        height: 400px;
    }
    .house{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .carrousel{
        padding-bottom: var(--eighty);
    }
    /*4 page*/
    .inspire_block{
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-top: var(--twenty);
    }
    .section_instagram{
        padding: 0 var(--padding_side);
    }
    .instagram_photos{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: var(--twenty);
        grid-row-gap: var(--twenty);
    }
    .big_photo{
        grid-area: 1 / 2 / 3 / 4;
    }
    .p1{
        grid-area: 3 / 1 / 4 / 2;
    }
    .p2{
        grid-area: 2 / 1 / 3 / 2;
    }
    .p3{
        grid-area: 1 / 4 / 2 / 5;
    }
    .p4{
        grid-area: 3 / 3 / 4 / 4;
    }
    .p5{
        grid-area: 2 / 4 / 3 / 5;
    }
    .p6{
        grid-area: 1 / 1 / 2 / 2;
    }
    .p7{
        grid-area: 3 / 4 / 4 / 5;
    }
    .p8{
        grid-area: 3 / 2 / 4 / 3;
    }


    /*contacts*/
    .section_contacts{
        padding:  var(--hundred) var(--padding_side) var(--hundred);
        background-color: #FFFFFF;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--thirty);
    }
    .circle_contact{

        aspect-ratio: auto;
        height: 100%;
        border-radius: var(--contacts_border);
    }
    .input::placeholder {
        color: rgba(25, 25, 23,1);
    }
    .input{
        height: var(--sixty);
    }
    .content{
        margin: 0 auto;
        padding-top: 95px;
        padding-bottom: 10%;
        width: clamp(70%, 60%, 40%);
        display: flex;
        flex-direction: column;
        align-items: start;
    }
    .container{
        width: 100%;
        display: flex;
        justify-content: unset;
    }
    .text_center{
        text-align: start;
    }
    .table_icons{
        margin-right: 0;
    }
    .table_icons > a{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .insta{
        margin-left: var(--thirty);
    }
    .insta:hover{
        margin-left: var(--thirty);
    }
    /*footer*/
    .terms{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        color: #FFFFFF;
    }
    .footer_img_logo{
        opacity: 50%;
        height: 95px;
    }
    .footer_img_bird{
        opacity: 50%;
        height: 140px;
    }
    .right{
        justify-self: center;
    }

    /*projects*/
    .header_after{
        padding: var(--sixty) var(--padding_side) var(--fourty);
        grid-template-columns: 0.3fr 1fr;
        grid-column-gap: 0;
    }
    .projects_grid{
        padding: 0 var(--padding_side) var(--hundred);

        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--twenty);

        grid-template-rows: auto;
        grid-row-gap: var(--fourty);
    }

    /*project*/
    .margin_top{
        margin-top: var(--sixty);
    }
    hr{
        margin: 0;
    }
    .block{
        margin-bottom: var(--sixty);
    }
    .photo{
        height: 400px;
    }
    .carrousel_photo{
        height: 380px;
    }
    .little_article{
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .inner_margin{
        margin: var(--twenty);
    }
    .little_article_text{
        justify-self: start;
    }
    .container_div{
        grid-template-columns: 1fr 1fr;
    }
    .grid_right{
        grid-template-columns: 0.7fr 0.3fr;
        grid-template-rows: 427px;
    }
    .grid_left{
        grid-template-columns: 0.3fr 0.7fr;
        grid-template-rows: 427px;
    }
    .grid_center{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--thirty);
    }
    .grid_right_2{
        grid-template-columns: 0.7fr 0.3fr;
        grid-template-rows: 427px;
    }
    .grid_left_2{
        grid-template-columns: 0.3fr 0.7fr;
        grid-template-rows: 427px;
    }
    .grid_block{
        background-size: cover;
        background-position: center;
        height: 100%;
    }
    .long_s{
        background-position: right;
    }
    /*!*project*!*/
    /*.table_icons a{*/
    /*    margin-right: 10px  ;*/
    /*}*/

    .carrousel_2_content > div p{
        font-size: 28px;
    }
    .carrousel_2_content > div p.stroke{
        font-size: 35px;
    }
    .arrow_2{
        width: 40px;
    }
}