@import 'px.css';
@import 'dialog.css';


@font-face
{ font-family: 'ProximaNova';
  src: url('../font/ProximaNova.woff') format('woff');
  font-weight: normal;
  font-style: normal; }


@font-face
{ font-family: 'ProximaNova';
  src: url('../font/ProximaNovaBold.woff') format('woff');
  font-weight: bold;
  font-style: normal; }


:root
{ --font-family: 'ProximaNova', sans-serif;
  --font-color: #393939;
  --body-color: #edeef7; }


body
{ background-image: url(../img/bg-main.png);
  background-repeat: no-repeat;
  background-position: top center;
  overflow-x: hidden; }


main,
header,
section,
figure
{ display: block; }


address
{ font-style: normal; }


.-clickable
{ cursor: pointer; }


.-noscroll
{ overflow: hidden; }


.-clrfix:after
{ content: '';
  clear: both;
  display: table; }


.-nobr
{ white-space: nowrap; }


.-w
{ max-width: 1280px;
  margin-left: auto;
  margin-right: auto; }


.-p
{ padding-left: 4vw;
  padding-right: 4vw; }


* + .-s
{ margin-top: 48px; }



/*** NAVI ***/

.-navi
{ padding: 12px 0; }


.-navi .goto
{ padding-left: 24px;
  background: url(../img/arr.png) no-repeat left top 4px transparent; }


.-navi .f
{ display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-bottom: -20px;
  justify-content: space-between;
  align-items: center; }


.-navi .f > *
{ flex: 0 1 auto;
  margin-left: 20px;
  margin-bottom: 20px; }


.-navi img
{ vertical-align: middle; }



/*** HEAD ***/

.-head
{ background: /*url(../img/bg-head.jpg) no-repeat left center/cover*/linear-gradient(to top, #009645, #0a5f2f);
  color: #fff;
  padding: 80px 0;
  text-align: center; }


h1
{ font-weight: bolder;
  font-size: 35px;
  line-height: 1.35;
  text-transform: uppercase; }


@media (max-width: 640px)
{
h1
{ font-size: 5.5vw; }
}
/*
h1 span.spec
{ background-color: #f00;
  text-shadow: 1px 2px 0px #000;}


@supports (-webkit-box-decoration-break: clone)
{
h1 span.spec
{ -webkit-box-decoration-break: clone;
  border-radius: 6px;
  padding: 0 5px; }
}
*/


/*** ALBUMS ***/

.-albums .filter > *+*
{ margin-top: 16px; }

.-albums .filter
{ text-align: center;
  position: relative; }


.-albums .filter .h
{ font-weight: bolder;
  font-size: 24px;
  line-height: 1; }


.-albums .filter .b
{ color: #ccc;
  background:
    url(../img/calendar.png) no-repeat left 12px center,
    url(../img/calendar-arr.png) no-repeat right 12px center
    #fff;
  border: 1px solid #d8d9e1;
  border-radius: 12px;
  padding-right: 32px;
  padding-left: 48px;
  height: 40px;
  cursor: pointer;
  outline: none;
  line-height: 1;}


.-albums .filter .b:hover,
.-albums .filter .b:focus
{ border-color: #999; }


.-albums .filter .cats:not(.active)
{ display: none; }


.-albums .filter .cats
{ position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 300px;
  max-height: 360px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #eee transparent;
  background-color: #fff;
  border: 1px solid #d8d9e1;
  border-radius: 8px;
  padding: 12px;
  z-index: 1; }


.-albums .filter .cats::-webkit-scrollbar
{ width: 12px; }

.-albums .filter .cats::-webkit-scrollbar-thumb
{ background-color: #eee;
  border-radius: 12px; }


.-albums .filter .cats > *+*
{ margin-top: 6px; }


.-albums .getmore
{ text-align: center; }


.-albums .getmore .b2
{ color: #fff;
  background: #20529a;
  border: 1px solid #20529a;
  border-radius: 12px;
  padding-right: 16px;
  padding-left: 16px;
  height: 40px;
  cursor: pointer;
  outline: none;
  transition: transform 200ms;
  display: inline-flex;
  align-items: center; }


.-albums .getmore .b2:hover,
.-albums .getmore .b2:focus
{ transform: scale(1.05);
  text-decoration: none; }



.-albums .list
{ display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-bottom: -40px; }


.-albums .item,
.-albums .empty
{ flex: 1 1 320px;
  margin-left: 20px; }


.-albums .item
{ margin-bottom: 40px; }


.-albums .item:hover .img img
{ transform: translateY(-3px); }


.-albums .item >*+*
{ margin-top: 6px; }


.-albums .img img
{ width: 100%;
  border-radius: 12px;
  transition: transform 300ms; }


.-albums .any
{ display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }


.-albums .txt
{ font-weight: bolder;
  line-height: 1.2; }


.-albums .-dl
{ opacity: 0;
  transition: opacity 600ms; }

.-albums .-dl:hover,
.-albums .item:hover .-dl
{ opacity: 1; }



/*** PHOTOS ***/

.-photos .list
{ display: flex;
  flex-wrap: wrap;
  margin-left: -24px;
  margin-bottom: -24px; }


.-photos .item,
.-photos .empty
{ flex: 1 1 320px;
  margin-left: 24px; }


.-photos .item
{ margin-bottom: 24px; }


.-photos .item a
{ position: relative;
  display: block; }


.-photos .item a::after
{ opacity: 0;
  transition: opacity 300ms;
  content: 'x';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: url(../img/eye.png) no-repeat center #20529a; }


.-photos .item a:hover::after
{ opacity: 0.68; }


.-photos .item img
{ width: 100%;
  display: block;
  border-radius: 12px; }






/*** FOOT ***/

.-foot
{ background-color: #d3d4de;
  padding: 50px 0; }


.-foot .f
{ display: flex;
  flex-wrap: wrap;
  margin-left: -100px;
  margin-bottom: -24px;
  --base-line: 6px; }

.-foot .f >*
{ flex: 0 1 auto;
  margin-left: 100px;
  margin-bottom: 24px; }


.-foot .c2
{ margin-right: auto; }


.-foot .f p
{ font-size: 20px;
  line-height: 1.2;
  color: #2b2b2b; }


.-foot .f .h
{ font-weight: bolder;
  font-size: 24px; }


.-foot .-w > p
{ color: #666; }



/*** HEAD-DETAIL ***/

.-head-detail > *+*
{ margin-top: 16px; }


.-head-detail
{ text-align: center; }


.-head-detail .date
{ font-weight: bolder;
  font-size: 24px;
  line-height: 1;
  color: #a0a1a6; }


.-head-detail .total
{ text-align: center;
  font-size: 12px;
  line-height: 1; }






/*** SOC ***/

.-soc > *
{  margin: 3px; }


.-soc img
{ transition: transform 200ms; }


.-soc img:hover,
.-soc img:focus
{ transform: scale(1.2) }


/*** DIALOG PHOTO INFO ***/

dialog img.wide
{ width: 100%;
  max-height: 80vh;
  user-select: none;
  pointer-events: none;
  object-fit: contain; }


dialog .img
{ position: relative; }


dialog .img .close
{ position: absolute;
  top: 10px;
  right: 10px;
  color: #000;
  padding: 3px 8px 6px;
  background-color: #fff;
  border-radius: 9px;
  text-decoration: none;
  font-weight: bolder;
  line-height: 1; }


dialog .img .left img
{ transform: rotate(180deg); }


dialog .img .left
{ position: absolute;
  top: 50%;
  left: 10px; }


dialog .img .right
{ position: absolute;
  right: 10px;
  top: 50%; }


dialog .img a
{ transition: transform 300ms;
  outline: none; }


dialog .img a:hover,
dialog .img a:focus
{ transform: scale(1.1); }


dialog .info
{ padding: 24px 32px 32px; }


dialog .info .f
{ display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-bottom: -20px;
  overflow: hidden;}


dialog .info .f > *
{ padding-left: 20px;
  padding-bottom: 20px; }


dialog .info .props
{ flex: 1 1; }


dialog .info .btns
{ flex: 0 1 220px; }


dialog .info  .props
{ display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-bottom: -20px; }


dialog .info .props .item,
dialog .info .props .empty
{ flex: 1 1 200px;
  margin-left: 20px; }


dialog .info .props .item
{ margin-bottom: 20px; }


dialog .info .props *+p
{ margin-top: 6px; }


dialog .info .props p
{ line-height: 1; }


dialog .info .props .h
{ font-weight: bolder;
  font-size: 19px; }


dialog .info .btns a
{ width: 100%; }


dialog .info .btns .border
{ border-left: 1px solid #999;
  padding-left: 20px; }



/*** BUTTONs ***/

a.-dl
{ background: url(../img/download-white.png) no-repeat left 10px top 4px #20529a;
  border-radius: 24px;
  color: #fff;
  padding: 4px 12px 4px 38px;
  text-decoration: none; }


a.-dl-green
{ background: url(../img/download-white.png) no-repeat left 16px center #2f9510;
  border-radius: 9px;
  color: #fff;
  padding: 0 16px 0 48px;
  text-decoration: none;
  height: 40px;
  display: inline-flex;
  align-items: center;
  line-height: 1; }


a.-dl-blue
{ background: url(../img/download-white.png) no-repeat left 16px center #20529a;
  border-radius: 9px;
  color: #fff;
  padding: 0 16px 0 48px;
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  line-height: 1; }


a.-dl-trans
{ border: 1px solid;
  border-radius: 9px;
  color: #20529a;
  padding: 0 6px 0 6px;
  text-decoration: none;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center; }


a.-dl-blue,
a.-dl-trans,
a.-dl-green
{ transition: transform 300ms; }


a.-dl-blue:hover,
a.-dl-blue:focus,
a.-dl-trans:hover,
a.-dl-trans:focus,
a.-dl-green:hover,
a.-dl-green:focus
{ transform: scale(1.05); }
















/*** FLEX ***/

.-fl .list
{ display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-bottom: -20px; }

.-fl .item,
.-fl .empty
{ flex: 1 1 200px;
  margin-left: 20px; }

.-fl .item
{ margin-bottom: 20px;  outline: 1px dashed #900; }

.-navi .f > *{
  flex: 0 1 200px;
}
.logo{
  text-align:center;
}