* { box-sizing: border-box; }

@font-face {
  font-family: dejavu;

  src:url(/fonts/dejavu-sans-webfont.eot);
  src:url(/fonts/dejavu-sans-webfont.eot?#iefix) format('embedded-opentype'),url(/fonts/dejavu-sans-webfont.woff2) format('woff2'),url(/fonts/dejavu-sans-webfont.woff) format('woff'),url(/fonts/dejavu-sans-webfont.ttf) format('truetype'),url(/fonts/dejavu-sans-webfont.svg#dejavu_sansregular) format('svg')}
}
@font-face{
    font-family: studio;
    src:url(/fonts/bpg-le-studio-02-caps-webfont.eot);
    src:url(/fonts/bpg-le-studio-02-caps-webfont.eot?#iefix) format('embedded-opentype'),url(/fonts/bpg-le-studio-02-caps-webfont.woff2) format('woff2'),url(/fonts/bpg-le-studio-02-caps-webfont.woff) format('woff'),url(/fonts/bpg-le-studio-02-caps-webfont.ttf) format('truetype'),url(/fonts/bpg-le-studio-02-caps-webfont.svg#bpg_le_studio_02_capsregular) format('svg')
}

@font-face{
    font-family:'ALK Sanet';
    src:url(/fonts/alk-sanet-webfont.eot);
    src:url(/fonts/alk-sanet-webfont.eot?#iefix) format('embedded-opentype'),url(/fonts/alk-sanet-webfont.woff2) format('woff2'),url(/fonts/alk-sanet-webfont.woff) format('woff'),url(/fonts/alk-sanet-webfont.ttf) format('truetype'),url(/fonts/alk-sanet-webfont.svg#alk_sanetregular) format('svg')
}


::selection { background: #8800ff; color: #fff; }

::-moz-selection { background: #8800ff;  color: #fff; }

:root {
    --partnersBack: #272727;
    --listBack: #f1f1f1;
}

/* Scroll Bar */

::-webkit-scrollbar { width: 9px; }

::-webkit-scrollbar-thumb {
    background-color: #818181;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background-color: #dbdbdb;
}
/* Scroll Bar */

body {

	margin: 0;

	padding: 0;

	font-size: 16px;

	color: #616364;
    font-family: 'dejavu', sans-serif;
    background-color: var(--listBack);
    position: relative;

    overflow-x: hidden;
}

img {
	width: 100%;
    height: 100%;
    max-inline-size: 100%;
    block-size: auto;
}


.listPage {
    position: relative;
    width: 100vw;
    background-color: var(--partnersBack);
}
.listHeader {
    padding: 0em 2em;
    font-family: "ALK Sanet", sans-serif;
    font-size: 2em;
    position: relative;
    top: 5em;
    color: var(--partnersBack);
}
.lpSlide {
    padding: 0em 12em;
    position: absolute;
    display: flex;
    flex-direction: row;
    width: 100%;
    bottom: -50vh;
}
.lpText {
    width: 25%;
}
.lpImage img {
    width: 30%;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    opacity: 0;
}
.lpImage {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.lpText a {
    margin-top: 4em ;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #2161b9;
    font-family: "Montserrat", sans-serif;
    box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    cursor: pointer;
    border: none;
    width: fit-content;

    font-family: 'ALK Sanet';
    text-decoration: none;    
}

.lpText a:after {
    content: " ";
    width: 0%;
    height: 100%;
    background: #ffd401;
    position: absolute;
    transition: all 0.4s ease-in-out;
    right: 0;
}

.lpText a:hover::after {
    right: auto;
    left: 0;
    width: 100%;
}

.lpText a span {
    text-align: center;
    text-decoration: none;
    width: 100%;
    padding: 1em 4em;
    color: #fff;
    font-size: 1.125em;
    font-weight: 500;
    letter-spacing: 0.15em;
    z-index: 20;
    transition: all 0.3s ease-in-out;
}

.lpText a:hover span {
    color: #183153;
    animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}




.partnersPage {
    height: 100vh;
    width: 100vw;
    bottom: -100vh;
    background-color: var(--partnersBack);

    position: absolute;
    z-index: -1;

    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ALK Sanet;
    color: #fff;
}
.partnersList {

    display: flex;

    width: 70%;
    flex-direction: column;
    font-size: 2em;
    font-family:  'dejavu', sans-serif;
    color: var(--partnersBack);

}
.partnersDivider {
    width: 0;
    height: 15px;
    background-color: #ffd350;
}
.partnersList div {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.partnersList p {
    width: 30%;
    padding: 0 2em;
    font-size: 0.7em;
}
.partnersCont {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.firstPage {
    width: 100vw;
    height: 100vh;
    position: relative;

    display: block;
    color: #000;

    background-color: #ffffff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mainLogo, .mainLogo_shop {
    width: 13rem;
    position: fixed;
    top: 4rem;
    left: 4rem;
    z-index: 1;
    color: #5f5f5f;

}
.mainLogo_shop {

    color: #4691a9;
}
.youLove {


    position: relative;
    height: 70%;
    width: 70%;
    top: 15%;
    left: 15%;

}
.youLoveCont {
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;

    background-image: url(/images/stationeri_we_love.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    display: block;

}
.weMade {
    position: absolute;
    color: #fff;
    font-size: 2em;

    top: 0;
    left: 1.5em;

    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.weMade p{
    margin: 0;
}
.navmenu {
    position: fixed;
    width: 100vw;
    z-index: 10;
    font-size: 20px;
    font-family: "ALK Sanet", sans-serif;
}
.menuItemsCont {
    display: flex;
    justify-content: center;
    height: 4em;
}

.navmenu ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navmenu li {
    padding: 0.5em 2em;
}
.leftBlock, .rightBlock {
    position: absolute;
    width: 45%;
    height: 100%;
    top: 0;
    background-color: #ffffff;
}
.topBlock, .botomBlock {
    position: absolute;
    width: 100%;
    height: 15%;
    left: 0;
    background-color: #ffffff;    
}
.topBlock {
    top: 0;
}
.botomBlock {
    bottom: 0;
}
.leftBlock {
    left: 0;
}
.rightBlock {
    right: 0;
}

.secondPage {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: #d9dad9;
    color: ;
}
.newLines {
    width: calc(100vw/3);
    height: 100vh;
    background-color: #d9dad9;
    float: left;
}



.catPage {
    position: absolute;
    bottom: -100vh;
    width: 100vw;
    height: 100vh;
    background-color: var(--partnersBack);

}
.catlines {
    width: 100vw;
    height: 2em;
    background-color: #ffd350;
    margin-left: -2em;
}





.whyPage {
    position: absolute;
    width: 100vw;
    top: 100vh;
}
.whyMain {
    height: 100vh;
    width: 100vw;

    position: absolute;
    opacity: 0;
}
.whyHeader {
    margin-left: 3em;
    font-size: 3em;
    font-family: 'ALK Sanet';
}
.whySlide {
    width: 27vw;
    margin: 1%;
    position: relative;
}
.whySlide h2 {
    position: absolute;
    top: 1em;
    left: 1em;
    font-size: 1.7em;
    margin: 0;
    background-color: #83838363;
    color: #fff;
    font-weight: 100;
    padding: 0 1em;
}

.whySlidesCont {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.whySlide img {
    transition: transform 2s;
}
.whyImgCont:hover img {
    transform: scale(1.3);
}
.whyImgCont:hover {
    transform: scale(0.95);
}
.whyImgCont {
    overflow: hidden;
    width: 100%;
    height: 27vw;
    transition: transform 0.5s;
    border-radius: 10px;
    cursor: pointer;
} 



.my_foot {
    position: absolute;
    background-color: #ebebeb;
    padding: 2em;
    border-top: 2px solid #e1e1e1;
    width: 100%;
    bottom: -20vh;
}
.foot_logo {
    width: 14em;
}
.foot_cont {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
.foot_cont div {
    display: flex;
    flex-direction: column;
}
.foot_cont p {
    margin: 0;
}
.foot_cont h2 {
    font-weight: 100;
}

.socialSection {


}
.socialSection .socialLogoblock{
    padding-top: 1rem;
    flex-direction: row;
    width: 5rem;
    justify-content: space-between;
}
.socialSection a {}
.socialSection svg {
    height: 2rem;
    color: #717171;
}
.socialSection svg :hover { 
    color: #b33636;
}


/* shop page */
.shop_page {
    position: relative;
    top: 10em;
    font-size: 18px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    max-width: 1500px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.categories {
    font-size: 0.7em;
    padding-right: 2.5em;
}

.photo_cont {
    padding: 0 2.5em;
    width: 25em;
    border-right: 1px solid #afafaf;
    border-left: 1px solid #afafaf;
}


.category_desc {
    padding-left: 2.5em;
}
.photo_chooser ol {
    list-style-type: decimal;
    margin: 0;
    padding: 0;
}
.photo_chooser ol:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
    display: table;
}
.photo_chooser ol:after {
    content: "";
    display: table;
    clear: both;
}
.photo_chooser li {
    list-style: none;
    margin-bottom: 15px;
    cursor: pointer;
    width: 24%;
    float: left;
    margin-right: 1%;
}

.disable_screen {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000000e3;
    z-index: 999;

    display: flex;
    align-items: center;
    justify-content: center;
}
.modal_show {
    display: block;
}
.modal_hide {
    display: none;
}
.modal_wind {
    width: max-content;
    /* height: calc(100vh - 4em); */
    background-color: white;
    position: relative;
    /* margin: 2em auto; */
    padding: 1em;
}
.modal_image {
    width: calc((100vh - 6em) / 5* 4);
}
.close_modal {
    position: absolute;
    width: 2em;
    height: 2em;
    background-color: #6161618c;
    border-radius: 50%;
    right: 1em;
    top: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-family: cursive;
    line-height: 0;
    cursor: pointer;
}
.photo_chooser img {
    -moz-opacity: .5;
    -webkit-opacity: .5;
    opacity: .5;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.photo_chooser img:hover, .img_active img {
    -moz-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;    
}


.main_cont {
    position: relative;
    width: max-content;
    left: 0;

    display: flex;
    flex-direction: row;

    transition: all .3s ease-in;

}
.main_photo {
    position: relative;
    overflow: hidden;
    margin-bottom: 1em;
}

.main_cont img {
    border-radius: 10px;
    width: 20em;
    cursor: pointer;
}



.p_options {
    font-style: italic;
    font-weight: 600;
}
.categories p {
    font-size: 1.6em;
    border-bottom: solid 1px #ff5722;
}
.check_section {
    padding-left: 2em;
    margin-bottom: 2.5em;
}
.check_section label {
    font-size: 1.3em;
    font-style: italic;
}

/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.7em;
    cursor: pointer;
    font-size: 1.5em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0.2em;
    left: 0;
    height: 1em;
    width: 1em;
    background-color: #eee;
    border: 1px solid #FF5722;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #FF5722;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;

}

.first_option li {
    font-style: italic;
    margin-bottom: 0.7em;
}
.first_option li::marker {
    color: #F44336;
}


.first_option h2 {
    margin-top: 0;
}


/* contact page */
.contact-main {
    display: flex;
    width: 100%;
    flex-direction: row;
    position: relative;

    height: calc(100vh - 80px);
    top: 80px;
}

.contact-left {
    position: relative;
    width: 50%;

    background: url(../images/we_love.webp) no-repeat left center;
    background-size: cover;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 50px;
}
.contact-right {
    position: relative;
    width: 50%;
    height: 100%;

}
.contact-icons a{
    color: #fff;
}


.contact-icons svg{
    width: 4em;
}
.contact-logo svg {
    width: 20em;
    height: 20em;
    fill: #fff;
}

.contact-info-cont a {
    display: flex;
    color: #fff;
    align-items: center;
    height: 3em;

}
.contact-info-cont {

    display: flex;
    flex-direction: column;
    font-size: 2em;
    width: 20em;
    padding: 0 1em;
}
.contact-info-cont svg {
    height: 3em;
}
.contact-info-cont p {
    padding: 0 0.7em;
}
.contact-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    color: #fff;
}
.contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-top: 30px;
    color: #dcb951;
}

.contact-off {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.contact-on {
    font-size: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1em;
}
.contact-on a {
    padding: 1em;
}
.contact-on a:hover, .contact-info-cont a:hover {
    color: #c25bff;
}
.contact-info-cont:first-child {
    text-align: right;
    border-right: solid 2px #ffffff59;
    align-items: flex-end;
}
.contact-phone svg {
    transform: matrix(-1, 0, 0, -1, 0, 0);
}
.in-touch {
    position: relative;

    width: 25%;
    margin: 100px 10px 0;
}

#map {
    height: 100%;
    width: 100%;
}


.onlyMob {
    display: none;
}





@media only screen and (max-width: 780px) {




}