/* Шрифты */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap');
 /* Глобальные переменные */

:root {

    /* размеры */

    --max-data-width: 1920px;
    --wrap-data-padding: 0 2rem;
    --base-font-size: 20px;

    /* цвета */

    --black-color: #000;
    --white-color: #fff;
    --red-color: red;
    --blue-color: #261e73;

    --gray-color:        #9b9b9b;
    --dark-gray-color:   #797979;
    --middle-gray-color: #a8a8a8;
    --light-gray-color:  #e6e6e6;
    --thin-gray-color  : #f5f5f5;
    --super-thin-gray-color : #f6f7fb;

    --thin-gray-op-color  : rgba(64,64,64,0.05);

    /* фоны */

    --black-bg-95 : rgba(0,0,0,0.95);
    --black-bg-85 : rgba(0,0,0,0.85);
    --black-bg-75 : rgba(0,0,0,0.75);
    --black-bg-50 : rgba(0,0,0,0.5);
    --black-bg-35 : rgba(0,0,0,0.35);
    --black-bg-15 : rgba(0,0,0,0.15);

    --white-bg-75  : rgba(255, 255, 255, 0.75);
    --white-bg-50  : rgba(255, 255, 255, 0.5);
    --white-bg-25  : rgba(255, 255, 255, 0.25);

    --blue-bg-50 : rgba(38,30,115,0.5);
    --blue-bg-75 : rgba(38,30,115,0.75);

    /* размеры фонов */

    --bg-full-height: auto 100%;
    --bg-full-width: 100% auto;

    --bg-height-30: auto 30%;
    --bg-height-40: auto 40%;
    --bg-height-50: auto 50%;
    --bg-height-60: auto 60%;
    --bg-height-70: auto 70%;
    --bg-height-75: auto 75%;
    --bg-height-80: auto 80%;
    --bg-height-90: auto 90%;
    --bg-height-95: auto 95%;

    /* иконки */

    --menu-icon:  url("../graph/menu.svg") center center no-repeat;
    --close-icon: url("../graph/close.svg") center center no-repeat;
    --topvk-icon: url("../graph/vk.svg") center center no-repeat;
    --list-icon:  url("../graph/hexagon.svg")  center center  no-repeat; 
    --play-icon:  url("../graph/play.svg")  center center  no-repeat; 
    --scroll-arrow-icon : url(../graph/scroll-arrow.png) center center no-repeat;  

    /* логотип */

    --logo-bg   : url(../graph/anmarine-logo.png) center center no-repeat;


  }


/* Сетка */

.flex-columns {position: relative; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items:center;}
.flex-columns.top-align {align-items:stretch;}

.flex-columns.content-left {justify-content: flex-start;}
.flex-columns.content-right {justify-content: flex-end;}
.flex-columns.content-center {justify-content: center;}
.flex-columns.content-between {justify-content: space-between;}
.flex-columns.content-around {justify-content: space-around;}

.col-1, .col-1x1 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}

.col-1x2 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}

.col-1x3 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.3%; max-width: 33.3%;}
.col-2x3 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666%; flex: 0 0 66.6%; max-width: 66.6%;}

.col-1x4 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
.col-3x4 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;}

.col-1x5 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}
.col-2x5 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%;}
.col-3x5 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%;}
.col-4x5 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%;}

.col-1x6 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666%; flex: 0 0 16.6%; max-width: 16.6%;}
.col-5x6 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333%; flex: 0 0 83.3%; max-width: 83.3%;}

.col-1x8 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 12.5%; flex: 0 0 12.5%; max-width: 12.5%;}
.col-3x8 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 37.5%; flex: 0 0 37.5%; max-width: 37.5%;}
.col-5x8 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 62.5%; flex: 0 0 62.5%; max-width: 62.5%;}
.col-7x8 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 62.5%; flex: 0 0 62.5%; max-width: 62.5%;}

.col-1x12 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333%;}
.col-11x12 {position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666%; flex: 0 0 91.66666%; max-width: 91.66666%;}


/* Тэги */
html {min-height:100%; margin:0; padding:0; font-size: var(--base-font-size);}
body {position:relative; margin:0; padding:0; text-align:center; font-family: 'Raleway', sans-serif; font-weight:400;  font-size:1rem; color: var(--black-color); -webkit-text-size-adjust: 100%;  transition: 0.5s ease-out; -webkit-animation: fade-animation 1s both; animation: fade-animation 1s both}
body.fix { overflow:hidden;height: 100vh; }

form {padding:0; margin: 0;}
p {margin:0; padding: 0 0 1rem;}
a {text-decoration: none; cursor: pointer; color: var(--blue-color); opacity:1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 	transition: all 0.5s ease; }
a:hover {color:var(--blue-color); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 	transition: all 0.5s ease; }
b {font-weight:500;}
img,a img {border:0;}

h1,h2,h3,h4,h5,h6 {padding:0; margin:0; font-weight:300;}
h1, h2 {font-size:1.8rem; }
h3 {font-size:1.75rem; }
h4 {font-size:1.5rem; }

iframe { border-width: 0px; }

input[type="text"], input[type="number"], input[type="password"], textarea, select {border:solid 1px var(--white-color); outline: 0 !important; font-family: 'Raleway', sans-serif;}

input[type="text"]::-webkit-input-placeholder {color: var (--light-gray-color); font-weight:300 !important;}
input[type="text"]::-moz-placeholder {color: var (--light-gray-color); font-weight:300 !important;}
input[type="number"]::-webkit-input-placeholder {color: var (--light-gray-color); font-weight:300 !important;}
input[type="number"]::-moz-placeholder {color: var (--light-gray-color); font-weight:300 !important;}
textarea::-webkit-input-placeholder {color: var (--light-gray-color);}
textarea::-moz-placeholder {color: var (--light-gray-color);}

/* input[type="text"].errorinput { border:solid 1px var(--red-color) !important; } */
.errorinput { border:solid 1px var(--red-color) !important; }
input[type="text"].errorinput::-webkit-input-placeholder {font-weight:300; font-size:0.75rem; color: var(--red-color);}
input[type="text"].errorinput::-moz-placeholder {font-weight:300; font-size:0.75rem; color: var(--red-color);}
textarea.errorinput::-webkit-input-placeholder {font-weight:300; font-size:0.75rem; color: var(--red-color);}
textarea.errorinput::-moz-placeholder {font-weight: 300; font-size:0.75rem; color: var(--red-color);}

/* Модификаторы */
.a-left {text-align:left;}
.a-right {text-align:right;}
.a-center {text-align:center;}

/* Секции */
.wrapper {position:relative; width:100%;  padding:0;  margin:0; text-align:center; }
  .wrapper .wrap {position: relative; display:block; max-width:var(--max-data-width); margin:auto; padding: var(--wrap-data-padding); }


/* Шапка */
.wrapper.wr-top { position: relative; width: 100%;   text-align:center; }
  .wr-top .wr-top-data {padding-top:1.25rem; padding-bottom:1rem;}
  .inner-page .wr-top .wr-top-data  {border-bottom:solid 1px var(--light-gray-color); }


  .logo { position:relative; display: inline-block; width:12.5rem; overflow: hidden; } 
    .logo a { position:relative; display:inline-block; width:100%; height:0; padding-top:34%; background: var(--logo-bg); background-size: var(--bg-full-width); overflow: hidden; } 

  .top-menu-link { position:relative; width:100%; text-align: left; } 
    .top-menu-link a { position:relative; display: inline-block; width:3rem; height:3rem; background: var(--menu-icon); background-size: var(--bg-full-width);  overflow: hidden; } 

  .top-vk-link { position:relative; width:100%; text-align: right; } 
    .top-vk-link a { position:relative; display: inline-block; width:3rem; height:3rem; background: var(--topvk-icon); background-size: var(--bg-full-width);  overflow: hidden; } 



/* Главная страница */
.wrapper.wr-main { position: relative; width: 100%; overflow:hidden; }

  .wr-main .wr-full-bg { position:relative; width:100%; height:calc(100vh - 7rem); overflow: hidden; z-index:5 }
    .wr-main .wr-full-bg img { position:absolute; top:50%; left:50%; width:100%; height:auto;  transform:translate(-50%, -50%); z-index:10 }
  .wr-main h1 { position:absolute; top:0; left:0; font-size:0.01rem; color:white;  z-index:4 }
  .main-page .wr-end { display:none; }
 

/* Главное меню */
.main-menu-overlay { position:fixed; display: none; top:0; left:0; bottom:0; right:0; text-align: left; background: var(--black-bg-50); z-index: 100;  -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
  .main-menu {position:relative;  padding:1.5rem 2rem; height:100vh; max-width:14rem; background-color: var(--super-thin-gray-color);   -webkit-animation: menu-show-menu 0.5s ease-out; animation: menu-show-menu 0.5s ease-out;  }
    .main-menu .logo { margin-bottom:1rem; opacity:0.95; }
    .main-menu .close a { position:absolute; top:1rem; right:1rem; width:1.2rem; height:1.2rem; background: var(--close-icon);  background-size: var(--bg-full-height); opacity:0.5 }  
      .main-menu .close a:hover { opacity:1 }  
    .main-menu ul { position: relative; padding:0; margin:0; list-style: none; font-family: 'Tektur', sans-serif; }
      .main-menu ul li { position: relative; padding:0.35rem 0; margin:0; font-size:1.1rem; font-weight:500;  }
        .main-menu ul li a { opacity: 0.8; }
          .main-menu ul li a:hover { opacity: 1; }
        .main-menu ul li ul { margin-left:1rem; margin-top:0.7rem; margin-bottom:0.35rem;  }
          .main-menu ul li ul li { font-size:0.9rem; padding:0.25rem 0;  }
    

/* Анимация меню */
@-webkit-keyframes menu-show-menu { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes menu-show-menu { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }  100% { -webkit-transform: translateX(0); transform: translateX(0); } }



/* Хлебные крошки */
.wrpage .krohi {position: relative; padding-top:1rem; padding-bottom:0.5rem;  font-size:0.7rem; color:var(--dark-gray-color); text-align:left; }
  .wrpage .krohi span {display:inline-block; margin:0 0.25rem;}
    .wrpage .krohi ul li:first-child span {margin-left:0;}
  .wrpage .krohi a {color:var(--dark-gray-color)}
    .wrpage .krohi a:hover {color:var(--black-color)}
  .wrpage .krohi ul {position:relative; display:inline-block; margin:0; padding:0;}
    .wrpage .krohi ul li {position:relative; display:inline-block; margin:0; padding:0; padding-left:0.5rem; padding-right:0.25rem; }
      .wrpage .krohi ul li:before {content:">"; position: absolute; display:inline-block; left:0; top:0; margin:0; font-size:0.6rem;}
      .wrpage .krohi ul li:first-child {padding-left:0; }
      .wrpage .krohi ul li:first-child:before {content:""; display:none;}


/* Внутренняя страница */
.inner-page .page-info .page-title h1 { position: relative; padding-bottom:2rem; font-size:2.5rem; font-family: 'Tektur', sans-serif; font-weight: 400; color:var(--blue-color); text-transform: uppercase; text-align: left;  }
.inner-page .page-info .page-title h1 span { font-size:60%;  }
.inner-page .page-info .page-title h1 span b { font-weight: normal; }

.inner-page .page-block .block-data .block-text { position: relative; width:93%; margin-left:5%; line-height:1.4; font-size:1.1rem; text-align:left; }
  .inner-page .page-block .block-data .col-1 .block-text { position: relative; width:100%; margin-left:0;   }
.inner-page .page-block .block-data .block-gallery { position: relative; width:95%; margin-right:5%; position: sticky;  top: calc(100vh / 150); }
  .inner-page .page-block .block-data .block-gallery img { position: relative; max-width:100%; margin-bottom:1rem; }
.inner-page .page-block .block-data .block-text ul { margin-top:0; padding-top:0;  }
.inner-page .page-block .block-data .block-text ul li { position:relative; padding-bottom:0.25rem; list-style: none; }
  .inner-page .page-block .block-data .block-text ul li:before { content:''; position:absolute; left:-25px; top:8px; width:0.65rem; height:0.65rem; background: var(--list-icon); background-size: var(--bg-full-width); opacity:0.5 }
  .inner-page .page-block .block-data .block-text h2, .inner-page .page-block .block-data .block-text h3 { padding-bottom: 1rem; }


/* Список проектов */
.wr-projlist .proj-item { position: relative; width:95%; padding:0 2.5%; margin-bottom:2.5rem; text-align:center; overflow:hidden; }
.wr-projlist .col-1x2:nth-child(2n) .proj-item { position: relative; width:95%; padding:0; padding-left:5%; }
.wr-projlist .col-1x2:nth-child(2n+1) .proj-item { position: relative; width:95%; padding:0; padding-right:5%; }

.wr-projlist .proj-item .proj-img { position: relative; width:100%; height:0; padding-top:45%; margin-bottom:1rem; overflow: hidden; }
.wr-projlist .proj-item h2 { position: relative; font-size: 1.75rem; font-family: 'Tektur', sans-serif; font-weight: 400;  color: var(--blue-color); text-transform: uppercase; }
.wr-projlist .proj-item h3 { position: relative; font-size: 1.1rem; font-family: 'Tektur', sans-serif; font-weight: 400;  color: var(--blue-color); text-transform: uppercase; }


/* Страница проекта */
.project-data { text-align: left; }
.project-data img { max-width:100% !important; }
.project-data h2 { position: relative; padding-top: 1.5rem; padding-bottom: 1rem;  font-size: 2rem; font-family: 'Tektur', sans-serif; font-weight: 400;  color: var(--blue-color); text-transform: uppercase; }
.project-gallery { position: sticky; top: calc(100vh / 150); }



/* Галерея страницы */
.page-gallery { padding:1rem 0; }
.page-gallery .gallery-item { width:100%; overflow:hidden; }
  .page-gallery .gallery-item  { position: relative; width:calc(100% - 2px); margin:1px; height:0; padding-top:55%;  overflow:hidden; }
    .page-gallery.vertical .gallery-item  { margin-bottom:1rem; height:0; padding-top:140%;  overflow:hidden; }
    .page-gallery .gallery-item img { position:absolute; cursor:auto; top:50%; left:50%; width:100%; height:auto;  transform:translate(-50%, -50%); }


/* Галерея страницы */
/* .video-gallery { padding-bottom:1rem; } */
  .page-gallery .video-item  { position: relative; width:calc(100% - 2px); margin:1px; overflow:hidden; }
    .page-gallery .video-item a { position: relative; cursor:pointer !important; display:flex; margin:0; width:100%; height:0; padding-top:55%;  overflow:hidden; z-index:4 }
      .page-gallery .video-item a:after { content:''; position: absolute; width:3.2rem; height:3.2rem; left:calc(50% - 1.6rem); top:calc(50% - 1.6rem); background: var(--play-icon); background-size: var(--bg-full-width); opacity:0.5; z-index:5 }
    .page-gallery .video-item img { position:absolute; top:50%; left:50%; width:100%; height:auto;  transform:translate(-50%, -50%); }



/* Футер */
.wr-end {position: relative; margin-top:1rem;  }
  .wr-end  .wr-end-data {padding-top:1rem; padding-bottom:1rem;  border-top:solid 1px var(--light-gray-color); font-size:0.8rem; }



/* Видео */
.video { position: relative;  }
  .video .video-item { position: relative; width: 100%; padding-bottom: 56.25%; margin-bottom:1rem; height: 0; overflow: hidden; border-radius:0.75rem; }
    .video .video-item iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* Обратная связь */
.feedback { position: relative; padding-right:2rem; }
  .feedback .feedback-form { position: relative;  }
    .feedback .feedback-form span { font-size: 0.8rem; }
      .feedback .feedback-form span sup { vertical-align: unset; line-height: 0.5rem; font-size: 1.1rem; font-weight:bold; color:var(--red-color); }
    .feedback .feedback-form input, .feedback .feedback-form textarea { position: relative; width: calc(100% - 2rem); padding:1rem; background-color: var(--super-thin-gray-color); font-size:1rem; font-family: 'Raleway', sans-serif; }
    .feedback .feedback-form textarea { height:6rem; font-size:0.8rem; }
    .feedback .feedback-form .button a { position: relative; display: inline-block; padding:0.75rem 1.5rem; font-size:0.9rem; color:var(--white-color); background-color: var(--blue-color); opacity: 0.9; }
      .feedback .feedback-form .button a:hover { opacity: 1; }
    .feedback .feedback-form .form-info { position: absolute; left:10rem; bottom:0.75rem; font-size:0.8rem; }  

.feedback .feedback-contacts { position: relative; margin-top:4rem; margin-bottom:2rem; width:50%; max-width:25rem; }
  .feedback .feedback-contacts .feedback-name { font-weight:bold; }
  .feedback .feedback-contacts .feedback-address { margin-bottom:0.5rem; }
  .feedback .feedback-contacts .feedback-email { font-size:0.9rem; }
  .feedback .feedback-contacts .feedback-vk { position:absolute; bottom:-0.5rem; right:-3rem; }
    .feedback .feedback-contacts .feedback-vk .top-vk-link a { width:2.5rem; height:2.5rem;} 

 
.feedback .feedback-result { position: relative; width: 100%; padding: 2.5rem 0; text-align: center; background-color: var(--super-thin-gray-color); } 
  .feedback .feedback-result h2 { padding-bottom:0.75rem; font-size: 1.5rem; font-weight: 600; color:var(--blue-color) } 


/* Прогрессбар */
.loading { position: relative; width: 100%; padding: 2.5rem 0; text-align: center; background-color: var(--super-thin-gray-color); }
.loading img { width: unset !important; }


/* Прокрутка в началу страницы */
.scrollup { position: fixed; cursor:pointer; display: none; bottom:5%; right:2.5%; width:3.5rem; height:3.5rem; background: var(--scroll-arrow-icon); background-size: var(--bg-height-50);  background-color: var(--black-bg-15); border-radius: 50%; overflow:hidden; z-index:50; }
  .scrollup:hover { background-color: var(--blue-bg-75); }

/* Прочее */
.hidden {display:none;}
.link { cursor: pointer; }
 

/* Адаптивные изображения */

img.maxwh { position: absolute; max-width:100% !important; max-height: 100% !important; top: 50%; left: 50%; transform: translate(-50%, -50%); }

img.fullw { position: absolute; max-width:100% !important; width:unset !important; height: unset !important; top: 50%; left: 50%; transform: translate(-50%, -50%); }
img.fullh { position: absolute; max-height:100% !important; width: unset !important; height:unset !important  ; top: 50%; left: 50%; transform: translate(-50%, -50%); }
img.fullwh { position: absolute; max-height:125% !important; max-width:125% !important; width: unset !important; height:unset !important  ; top: 50%; left: 50%; transform: translate(-50%, -50%); }

img.fullsmallw { position: absolute; max-width:90% !important; width:unset !important; height: unset !important; top: 50%; left: 50%; transform: translate(-50%, -50%); }
img.hardfullw { position: absolute; width:100% !important; height: unset !important; top: 50%; left: 50%; transform: translate(-50%, -50%); }
img.hardfullh { position: absolute; height:100% !important; width: unset !important; top: 50%; left: 50%; transform: translate(-50%, -50%); }