/*
Theme Name: Bogdanov theme
Author: Sapargaliev
Author URI: https://freelancehunt.com/freelancer/sapargaliev.html
Description: Тема для учителя информатики, сделано с любовью <3
License: GNU General Public License v2 or later
*/

div.wpcf7-response-output{
	border-radius:4px;
	padding:10px;
	color:white;
	border:2px solid white;
}

html #wpadminbar{position:fixed;}


.container{
	width:1140px;
	margin:0 auto;
}

a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

a:hover {
    background-size: 100% 2px;
}

/* .header */

header{
	width:100%;
	height:70px;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);
	position: fixed;
	z-index: 100;
	background: white;
}

.logo{
	float:left;
	line-height: 70px;
	font-weight: 600;
}
.logo a{text-decoration: none; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; color:#121212;}

.logo a:hover{
	color:#0070C9;
}

.logo a > img{
	height:70px;
	width:auto;
}

.menu{

	float:right;
	line-height: 70px;
}

.menu li {
	list-style-type: none;
	float:left;
	display: inline-block;
}

.menu a {
	margin-left:35px;
	text-decoration: none;
	float:left;
	display: inline-block;
	color:#121212;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}


.menu a:hover{
	color:#0070C9;
}


/* .wrap-content */

.wrap-content{
	width:100%;
	float:left;
	margin-top:70px;
	position: relative;
}

.fisrt-section{
	padding-top:20px;
	width:100%;
	height:auto;
	float:left;
	display: block;
	background-color: #ffffff;
	background-image: url("https://www.transparenttextures.com/patterns/ag-square.png");
}

/* .first-text */
.first-text{
	width:50%;
	float:left;
	margin-top:5%;
	margin-bottom:3%;
}

.h1-text{
	font-weight: 700;
	font-size:50px;
	line-height: 1;
}

.h4-text{
	font-weight: 500;
	margin-top:5px;
}

.buttons {
	margin-top:30px;
}

.buttons a {
	color:#121212;
	
	padding:10px 20px 10px 20px;
	border-radius: 4px;
	color:white;
	transition:0.2s all;

}

.buttons a:first-child {
	background:#007AFF;
	border:2px solid transparent;
}

.buttons a:last-child {
	color:#007AFF;
	border:2px solid #007AFF;
	margin-left:5px;
}

#but1:hover{
	color:#007AFF;
	border:2px solid #007AFF;
	background: transparent;
}
#but2:hover{
	background:#007AFF;
	border:2px solid transparent;	
	color:white;
}
.brsp{display: block;}
.social-medias{
	margin-top:25px;
}

.social-medias a{
	color:#0070C9;
	display: inline-block;
}


/* .img-person */

.img-person{
	width:50%;
	float:right;
}
.img-person img{
	max-width:100%;
	height:auto;
	float:right;
}

/* .second-section */

.second-section {
	width:100%;
	float:left;
	display: block;
}

.for-column{
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
	padding: 20px;
	border-left:1px solid silver;
	border-right: 1px solid silver;
	border-radius:6px;
	border:0.5px solid silver;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
	grid-gap:20px;
}

.img-text-container{
	border-radius: 6px;
	border:1px solid transparent;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
	height:250px;
	object-fit: cover;
    object-position: 100%; 
	text-align:center;
}

.text-container a{color:#3994D9; }

.title-a{
	display: block;
	margin-top:10px;
}
.text-container a:hover .img-text-container{border:1px solid #0070C9;}


/* .three-section */

.three-section {
	width:100%;
	float:left;
	margin-top:40px;
}

.title{
	text-align: center;
	width:100%;
	font-weight: 700;
	font-size:30px;
}
.p-title{
	text-align: center;
	width:100%;
	font-size: 17px;
}
.about-me{
	width:100%;
	margin-top:60px;
}

.about-me-block{
	width:33.3%;
	float:left;
	text-align: center;
}

.pick {display: block; width:100%;}
.pick i {
	font-size:60px;
	color:#007AFF;
}

.title-about{
	font-weight: 600;
	margin-top:15px;
	margin-bottom: 100px;
	font-size:19px;
}

/* .four-section */

.four-section {
	width:100%;
	float:left;	
	color:white;
	background:#007AFF;
	padding-top:40px;
	padding-bottom: 40px;
}

.video-block{
	margin-top:40px;
}

.video{
	width:50%;
	float:left;
}

.video iframe {
	min-height: 300px;
}

/* .photo-gallery */

.photo-gallery{
	width:100%;
	float:left;
	margin-top:40px;
}

.w {
  width:100%;
  height:100vmin;
  margin:0 auto;
}

.ts {
  width:100%; height:100%;
  position:relative;
  --barH:20%;/*active zone height = 100% - barH*/
}

.t {
  --w:20%;
  display:block; width:var(--w); height:var(--barH);
  position:absolute; bottom:0; left:var(--l);
  transform-origin:top left;
}

.t img {
  display:block; width:100%; height:100%;
  object-fit:cover;
  transform:scale(0.8);
}

[type="radio"] { 
  display:none; 
}

:checked + label.t {
  left:0; bottom:var(--barH);
  height:calc(100% - var(--barH));
}

:checked + label.t img {
  object-fit:contain;
}


/* 
optional
*/

.ts {/*thumbnails bar*/
  perspective:200px;
  perspective-origin:center center;
  transform-style:preserve-3d;
  pointer-events:none;
}

.ts:after {/*the plate*/
  content:"";
  display:block; width:100%; height:15px;
  position:absolute; bottom:0;
  background:linear-gradient(transparent 20%, rgba(0,0,0,0.1));
  transform:rotateX(90deg)scaleX(1.2);
  transform-origin:bottom center;
}

:not(:checked) + .t {/*inactive labels*/
  transform:translate3d(0, 0, -5px);
  pointer-events:auto;
}

:not(:checked) + .t:hover {
  transform:translate3d(0, -7px, -5px);
  box-shadow:0 30px 30px -25px rgba(0,0,0,0.3);
  cursor:pointer;
}

:not(:checked) + .t img {
  transform:scale(0.9);/*create gaps*/
}

:checked + .t {/*active label*/
  box-shadow:0 0 0 transparent;
  animation:anim 2s 1;
} @keyframes anim {
  from { transform:rotateY(6deg)rotateX(3deg) }
}

/* 
transitions
*/
.t {/*active->inactive & hover->rest*/
  transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 1s;
}
.t:hover, :checked + .t {
  transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 0s;
}

/* 
transitions
*/
.t {/*active->inactive & hover->rest*/
  transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 1s;
}
.t:hover, :checked + .t {
  transition:transform 0.5s, bottom 0.6s, left 0.6s, width 0.3s, box-shadow 0s;
}

/* .section-five */

.section-five{
	width:100%;
	float:left;
	margin-top:60px;
}

.news{
	width:100%;
	float:left;
	margin-top:20px;
}

.news-block{
	width:100%;
	height: 170px;
	border-radius:6px;
    margin-top:20px;
    margin-bottom: 20px;
  	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}

.news-block-content{
	padding:20px;
	width:auto;
	height:170px;
}

.news-block-content a{
	color:#0070C9;
}


.news-img{
	width:20%;
	height:170px;
	float:left;
	padding-right: 20px;
}

.news-img img {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	height:100%;
	object-fit:cover;
}

.title-news{
	font-weight: 600;
}

.the-date{
	color:rgba(0,0,0,0.4);
}


/* .section-six */

.section-six{
	width:100%;
	float:left;
	margin-top:20px;
	background:#007AFF;
	padding-top:40px;
	padding-bottom: 40px;
	
}

.section-six > .container > .title{
	color:white;
}
.section-six > .container > .p-title {
	color:white;
}

.wpcf7{
	width:100%;
	float:left;
	margin-top:40px;
	text-align: center;
}
.wpcf7 span > input{
	width:50%;
	padding:10px;
	margin-top:5px;
	margin-bottom: 5px;
	border-radius: 4px;
	border:none;
}
.wpcf7 span > textarea{
	padding:10px;
	margin-top:5px;
	margin-bottom: 5px;
	width:50%;
	border-radius: 6px;
	border:none;
}
.wpcf7 input[type=submit]{
	cursor: pointer;
	padding:10px 20px 10px 20px;
	background:transparent;
	border:2px solid white;
	color:white;
	border-radius: 4px;
	transition:0.2s;
}

.wpcf7 input[type=submit]:hover{
	color:#007AFF;
	background:white;
}

/* .section-seven */

.section-seven{
	width:100%;
	float:left;
	margin-top:40px;
}

.a-blocks {
	width:100%;
	float:left;
	margin-top:40px;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	text-align: center;
	grid-gap:10px;
}

.a-block a{
	text-decoration: none;
	color:#0070C9;
}
.a-block:hover .img-a-block{border:0.5px solid #0070C9;}

.img-a-block{
	display: inline-block;
	padding:10px;
	border:0.5px solid silver;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
	border-radius: 4px;
	height:100px;
	width:85%;
	text-align: center;
	position: relative;
}

.img-a-block img{
	max-height:100px;
	position: absolute;
	left:50%; top:50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}


/* .footer */

footer{
	width: 100%;
	float:left;
	margin-top:60px;
	padding-bottom: 60px;
	background:#0070C9;
	color:white;
	padding-top:30px;
}
.footer-for-column{
	width:100%;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: left;
}

.footer-title{
	font-weight: 500;
	font-size:20px;
}

.footer-social-medias a{
	text-decoration: none;
	color:white;
}

.footer-menu{
	margin-top:10px;
}
.footer-menu li{
	list-style:none;
	display: block;
}
.footer-menu a{
	color:white;	
}


/* page.html */

.page{
	width:100%;
	float:left;
	margin-top:40px;
	min-height: 80vh;
}

.page-title{
	font-weight: 700;
	font-size:20px;
}
.page-title > .the-date{
	font-size:16px;
	font-weight: 400;
}

.line{
	width:100%;
	height:1px;
	background:silver;
	display: block;
	margin-top:7px;
}

.content{
	width:80%;
	margin:0 auto;
	padding:40px;
	padding-top:60px;
	padding-bottom: 60px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
}

.content > .h1-text{
	font-size:25px;
	margin-top:20px;
}
.content > .h4-text{
	font-size:16px;
}

.content img{
	border-radius: 6px;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);	
}
.content p{
	line-height: 1.44;
	word-wrap: break-word;
}
.wp-block-preformatted a{
	padding:10px 20px 10px 20px;
	border:2px solid #0070C9;
	color:#0070C9;
	border-radius: 4px;
	transition: 0.25s;
}
.wp-block-preformatted a:hover{
	background:#0070C9;
	color:white;
}


/* .page-portfolio */

.tabs{
	width:100%;
	display: block;
}

.tab-block{
	width:100%;
	margin-top:20px;
	background:#F5F5F5;
	border-radius: 4px;
}

.tab-title{
	width:auto;
	padding: 20px;
	cursor: pointer;
	border-radius: 4px;
	transition: 0.25s;
	font-weight: 600;
}
.tab-title > .the-date{
	font-weight: 400;
	font-size:14px;
}
.tab-title:hover{
	background: #D5D5D5;
}
.icon-down{
	float:right;
	display: inline-block;
}

.icon-down i{transition: 0.25s all}
.icon-i-active {
	transform: rotate(180deg);
	transition: 0.25s;
}

.tab-description{
	display: none;	
	padding: 20px;
	padding-top:0px;
	word-wrap: break-word;
}
.tab-description p{
	line-height: 1.44;
	word-wrap: break-word;
}
.tab-description img{
	object-fit:cover;
	width:32.9%;
	margin-bottom: 10px;
	margin-top:10px;
	box-shadow: none;
	display: inline-block;
}
/* .gallery-main */

.gallery-main{
	width:85%;
	margin:0 auto;
	min-height: 90vh;
}

.gallery-main > .h1-text{
	margin-top:25px;
	font-size: 35px;
	text-align: center;
}
.gallery-main > .h4-text{
	text-align: center;
}

.images-block-gallery{
	width:100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap:10px;
	margin-top:10px;
}

.images-block-gallery a:hover{text-decoration: none;}

.images-block-gallery a > img{
	width:100%;
	height:200px;
	border-radius: 6px;
	margin-bottom: 0px;
	margin-top:0px;
}