﻿
/* Подключение шрифта Робото */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,300,500,700&subset=latin,cyrillic');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Roboto');


/* CSS-переменные */
:root {
   /* --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")*/
    --abtb-blue: #003399; /*АБТБшный синий цвет*/
    --abtb-blue-50: #00339977; /*АБТБшный синий цвет с прозрачностью*/
    --abtb-dark-grey: #343a40; /*Приятный тёмно-серый*/
    --abtb-hover: #247cce; /*Цвет при наведении*/  
}


/* Общие стили */
body, html {
	overflow-x: hidden;   /* Отмена горизонтальной прокрутки на айфоне */
	background-color: white;
	font-family: 'Roboto', sans-serif; /* Шрифт сайта */
}

body {
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5; 
	text-align: justify;
}



.page-section {
    text-align: center;
}


.navbar-collapse
{
 flex-grow: 0 !important;
}

/* синяя иконка сэндвич-меню */
.navbar-toggler-icon2 {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    /* background-image: var(--bs-navbar-toggler-icon-bg2);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}


button, button img {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

p{
    border: none;
    border-style: none;
}



a:hover {
	color: var(--abtb-blue);
    text-decoration: none !important;
}


/* Синий цвет АБТБ */

.abtb-blue {
    color: var(--abtb-blue);
}

.bg-abtb-blue {
    background-color: var(--abtb-blue);
}

.bg-abtb-blue-50 {
    background-color: var(--abtb-blue-50);
}

/* Пустота при помощи Эйчара */

hr{
	border: none;
}

/* Стили базовых заголовков */

h1, h1 a {
	font-size: 2rem;
	color: var(--abtb-blue);
    text-decoration: none;
}

h2, h2 a {
	color: var(--abtb-blue);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
    font-weight: bolder;
    text-align: center;
}		


h3, h3 a {
	font-size: 1.5rem;
	color: var(--abtb-blue);
    text-decoration: none;
}

h5, h5 a {
	color: var(--abtb-blue);
    text-decoration: none;
}

h3:hover a, h3:focus a, h5:hover a, h5:focus a  {
	color:var(--abtb-hover);
}



div.contact-us p, div.contact-us p a {
    color: var(--abtb-blue);
    text-decoration: none;
}

/* Стили для бокового меню главной страницы */


nav.top_menu a, .nav-item a {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	display: block;
    padding: .5rem 1rem;
	color: var(--abtb-blue);
    text-decoration: none;
    background-color: transparent;
	
}

nav.top_menu a:hover, nav.top_menu a:focus,  .nav-item a:hover, .nav-item a:focus {
    text-decoration: underline;
}

/* Стили для верхнего меню подстраниц */


nav.top_menu-2 a, .nav-item a {
	font-size: 1rem;
	font-weight:600;
	text-align: center;
	display: block;
    padding: .5rem 1rem;
	color: var(--abtb-blue);
    text-decoration: none;
    background-color: transparent;
}

nav.top_menu-2 a:hover, nav.top_menu a:focus,  .nav-item a:hover, .nav-item a:focus {
    text-decoration: underline;
}

/* Стили для кнопки мобильного меню подстраниц */

.nav-toggle {
    border-radius: 20px;
    border: none;
    box-shadow: none;
    background-color: #FFFFFF;
}

.nav-toggle:focus, .nav-toggle:hover  {
    border-radius: 20px;
    box-shadow: 2px;
    border-color: var(--abtb-blue);
    border-width: 2px;
    background-color: #FFFFFF;
}

.nav-toggle:active  {
    border-radius: 20px;
    box-shadow: 2px;
    border-color: #990000;
    border-width: 2px;
    background-color: #adadad;
}


/* Стили для Хлебных Крошек */

nav.breadcrumb {
	background-color: white;
	justify-content: center;
}
nav.breadcrumb a {
	font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.8);
}

nav.breadcrumb a:hover, nav.breadcrumb a:focus, ol.navibar li a:hover, ol.navibar li a:focus{
  color: var(--abtb-blue);
}

nav.breadcrumb a:active {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
}

/* Стили для Карточек проектов (старые) */

/*
@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
}

@media (min-width: 992px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }

}
*/

/* Направления проектов - карточки*/

div.project-gallery {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    margin-bottom: 1rem;
}

div.project-card {
    flex: 0 0 auto;
    padding: 0.5rem 0.5rem;
}

div.project-card-inner {
    width: 100%;
    height: auto;
    aspect-ratio: 4/5;
    border-radius: 2rem;

    background-position: center; 
    background-size: cover; 
    background-clip: content-box; 
    background-repeat: no-repeat; 
    background-origin: content-box;


    align-content: end;
    align-items: end;
}

div.project-card-inner:hover, div.project-card-inner:focus { 
    -webkit-transform: scale(1.02);
    -o-transform: scale(1.02);
    -moz-transform: scale(1.02);
    transform: scale(1.02);
}

div.project-card h5 {
    word-wrap: break-word;
    word-break: keep-all;
}




.project-name {
    color: transparent;
}

.project-descr {
    color: transparent;
}



/* стиль для ссылки-контейнера карточки */

a.project-card-container {
    display: flex;
    flex: 0 0 auto;
    padding: 0.5rem 0.5rem;
}

/* Синий всплывающий оверлэй на карточках. Как хотел Макс */

.project-card-inner-overlay {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    border-radius: inherit; 
}

.project-card-inner-overlay:hover, .project-card-inner-overlay:focus {
    background-color: var(--abtb-blue-50);
    backdrop-filter: blur(10px);
}

.project-card-inner-overlay:hover .project-name, .project-card-inner-overlay:focus .project-name, .project-card-inner-overlay:hover .project-descr, .project-card-inner-overlay:focus .project-descr {
    color: white;
    font-weight: bolder;
    text-align: center;
    font-size: 1.5rem;
}

.project-card-inner-overlay .project-name, .project-card-inner-overlay .project-descr {
    text-decoration: none;
    text-decoration-style: none;
    font-size: 0%;
    
}




/* Синяя плашка внизу карточки.  */

.project-card-inner-overlay-2 {
    display: inline flex;
    width: 100%;
    min-height: 25%;
    background-color: var(--abtb-blue-50);
    backdrop-filter: blur(10px);

    justify-content: center;
    align-items: center;
    /* border-radius: 2rem 2rem 0rem 0rem;  для верхней части */
    border-radius: 0rem 0rem 2rem 2rem;
}

/*
a.project-card-container:hover .project-card-inner-overlay-2, a.project-card-container:focus .project-card-inner-overlay-2 {

    background-color: var(--abtb-blue-50);
    backdrop-filter: blur(10px);
    
}
*/

/*
a.project-card-container:hover .project-name, a.project-card-container:focus .project-name, .project-card-inner-overlay-2:hover .project-name, .project-card-inner-overlay-2:focus .project-name, .project-card-inner-overlay-2:hover .project-descr, .project-card-inner-overlay-2:focus .project-descr {
    color: white;
    font-weight: bolder;
    text-align: center;
    font-size: 1.5rem; 
} 
*/

.project-card-inner-overlay-2 .project-name, .project-card-inner-overlay-2 .project-descr {
    /*
    text-decoration: none;
    text-decoration-style: none;
    font-size: 0%;*/
    color: white;
    font-weight: bolder;
    text-align: center;
    font-size: 1.5rem;

    
}





/* Переопределения базовых стилей BxSlider */
div.main-news-carousel .bx-wrapper, div.main-news-carousel .bx-viewport, div.project-album-slider .bx-wrapper, div.project-album-slider .bx-viewport  {
    box-shadow: none !important;
    border: none !important;
}


/* Команда - карточки */

div.team-gallery {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
}

div.team-card {
    flex: 0 0 auto;
    margin-bottom: 0.9rem;	
	cursor: pointer;
}

div.team-card:hover { 
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -moz-transform: scale(1.05);
    transform: scale(1.05);
}

div.person-photo {
    width: 95%;
    height: auto;
    aspect-ratio: 1/1;
    filter: grayscale(100%);
    border-radius: 2rem;

    background-position: center; 
    background-size: cover; 
    background-clip: content-box; 
    background-repeat: no-repeat; 
    background-origin: content-box;
}

div.person-photo:hover { 
    filter: grayscale(0%);
}

.person-name {
    color: var(--abtb-blue);
    font-weight: bolder;
    margin-top: 1rem;
}

.person-title {
    font-weight:normal;
}


/* Образование - карточки*/

div.study-gallery {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    flex: 0 0 auto;
    margin-bottom: 1rem;
}

div.study-card {
    flex: 0 0 auto;
    padding: 0.5rem 0.5rem;
}

div.study-card-inner {
    width: 100%;
    height: auto;

    border-radius: 1.5rem;

    background-position: center; 
    background-size: cover; 
    background-clip: content-box; 
    background-repeat: no-repeat; 
    background-origin: content-box;

    flex: 0 0 auto;
    display: flex;
    flex-flow: column wrap;
    
}


div.study-card h5 {
    word-wrap: break-word;
    word-break: keep-all;
}

.study-card-inner-overlay {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    padding: 20px 20px;
    align-content: center;
}

.study-name {
    color: white;
    font-weight: bolder;
    text-align: justify;
    font-size: 1.5rem;
}


.study-text {
    color: white;
    font-weight: normal;
    text-align:start left;
    font-size: 1rem;
}




/* Заготовки для коллажей, в т.ч. про образование */

.pic-4-5 {
    aspect-ratio: 5/4;
}

.pic-tall {
    aspect-ratio: 5/8.15;
}


.pic-gray {
    filter: grayscale(100%);
}

.pic-blue {
    background-color: var(--abtb-blue-50);
    filter: grayscale(0%);
    backdrop-filter: blur(5px);
}



/* Свяжитесь с нами */
.contact-us a {
    font-size: 1.5rem;
}


/*Новости на главной */

/*
div.news-card {
    margin-bottom: 0.9rem;	
	display: inline-block;
	cursor: pointer;
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
}
*/

/*
.news-slider-card {
   margin-top: 1rem !important;
   margin-bottom: 1rem !important;
}
*/
.news-card {         /* Карточка новости в каталоге новостей*/
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

div.news-card:hover .news-image, div.news-card:focus .news-image { 
    -webkit-transform: scale(1.02);
    -o-transform: scale(1.02);
    -moz-transform: scale(1.02);
    transform: scale(1.02);
}


.news-slider-card a, .news-card a {
    text-decoration: none !important;
    /* color: #000 !important;*/ 
}

.news-image {          /* Фотография новости */
    aspect-ratio: 16/10;
    background-size: cover;
    border-radius: 2rem;
}

.news-card-body {     /* Текстовая карточка новости рядом с фотографией */
    text-align: left;
    padding: 1rem;
}


/*
.news-title {

}
*/



.news-text {
    color: #000 !important;
}


/*
.news-date {

}
*/


/* Стили для карусели BxSlider самого проекта */

/*
.project-album-slider {

}
*/

/*
.project-slider-card {

}
*/

.project-slider-image {
    aspect-ratio: 16/10;
    background-size: cover;
    border-radius: 2rem;
}




/*
.masonry-project-gallery {
    
}

.masonry-project-card {
    
}

.masonry-project-image {
    
}

*/


.news-grid {
    width: 100%;
}

.news-grid ul li {
    list-style-type: none !important;
}

.news-grid ul li a {
    color: rgba(0, 0, 0, 0.7);
}

/*
.news-grid-item {

}
*/

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

}



/* Список новостей для новостной страницы */ 


ul.news-list {
	list-style-type: none !important;
}

ul.news-list li {
    text-decoration: none;
    padding: 0.5rem;
    margin-bottom: 0.9rem;
	list-style-type: none !important;
    
    border: thin;
    border-color: gray;
    border-radius: 0.1rem;
}

ul.news-list li:hover, ul.news li:focus {
    -webkit-transform: scale(1.02);
    -o-transform: scale(1.02);
    -moz-transform: scale(1.02);
    transform: scale(1.02);
	box-shadow: 0.1rem 0.1rem 0.3rem 0.3rem rgba(0, 0, 0, 0.1);
    list-style-type: none !important;
    text-decoration: none;
}

ul.news-list li:hover a, ul.news li:focus a {
    -webkit-transform: scale(1.02);
    -o-transform: scale(1.02);
    -moz-transform: scale(1.02);
    transform: scale(1.02);
	box-shadow: 0.1rem 0.1rem 0.3rem 0.3rem rgba(0, 0, 0, 0.1);
    list-style-type: none !important;
    text-decoration: none;
    color: var(--abtb-blue);
}


ul.news-list li a {
    color: rgba(0, 0, 0, 0.7);
}

ul.news-list li img {
    width: 80%;
    height: auto;
}



/*
div.card {
	margin-bottom: 0.9rem;	
	display: inline-block;
	cursor: pointer;
    width: 100%;
    height: auto;
}

div.card a {
    text-decoration: none;
}

div.card:hover, div.card:focus { 
    -webkit-transform: scale(1.02);
    -o-transform: scale(1.02);
    -moz-transform: scale(1.02);
    transform: scale(1.02);
	box-shadow: 0.1rem 0.1rem 0.3rem 0.3rem rgba(0, 0, 0, 0.1);
}

div.card h5 {
    color: rgba(0, 0, 0, 0.8);
}

div.card:hover h5, div.card:focus h5 {
    color: var(--abtb-blue);
}

div.card a p {
    color: rgba(0, 0, 0, 0.8);
}

div.card-item {
	display: inline-block;
}

*/


/* Стили для главной страницы (устарели) */

/*
div.main-page-nav nav{
    flex-direction: row !important;
    justify-content: center;
}
*/




/* Стили для Футера */

footer {
	/* background-color: rgba(0, 0, 0, 0.05);*/
	padding-top: 1rem;	
	padding-bottom: 1rem;
}


/* Стили для футер-меню (старые)  */

footer nav {
    justify-content: center;
	flex-direction: column;
}

nav.footer_menu a {
	font-size: 0.9rem;
	font-weight: normal;
	display: block;
    padding: .5rem 1rem;
    color: rgba(0, 0, 0, 0.5);
	text-align: center;
    text-decoration: none;
    background-color: transparent;
}

nav.footer_menu h5 {
    color: rgba(0, 0, 0, 0.7);
}

nav.footer_menu a:hover, nav.footer_menu a:focus {
    color: var(--abtb-blue);
}


p.copyright {
	font-size: 0.7rem;
    color: rgba(0, 0, 0, 0.3);
	text-align: end;
}
