/* global-style */
@font-face {
	font-family: 'PlayfairDisplay-Regular';
	src: url("../fonts/.eot");
	src: url("../fonts/.eot?#iefix")format("embedded-opentype"),
	url("../fonts/.woff") format("woff"),
	url("../fonts/PlayfairDisplay-Regular.ttf") format("truetype");
}
@font-face {
  font-family: 'PF_Din_Text_Cond_Pro';
  src: url("../fonts/PF_Din_Text_Cond_Pro.ttf") format("truetype");
}
}
*::after, *::before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  height: 100%;
    width: 100%;
    margin: 0;
    text-decoration: none;
    outline: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  padding: 0;
}
body, p {
    font-family: 'PF_Din_Text_Cond_Pro';
    font-size: 14px;
    line-height: 1.6;
    color: #000;
    font-style: normal;
    letter-spacing: 1px;
}
.container {
	width: 100%;
  background: #fff;
  position: relative;
  padding-top: 3rem;
  z-index: 1;
  margin: auto;
  max-width: 2560px;
}
.row {
  display: flex;
}
.d-flex {
	display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-family: 'PlayfairDisplay-Regular';
  color: #000;
  line-height: initial;
  margin: 0;
}
h2 {
  font-size: 4rem;
  margin-bottom: 5rem;
 }
 h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.7rem;
}
h5 {
  font-size: 1.5rem;
}
h6 {
  font-size: 1.2rem;
}
a {
  text-decoration: none;
}
.animate {
    background: linear-gradient(#212121, #2e2e2e 80%) left no-repeat;
    background-size: 0% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: change 2s linear forwards;
    animation-delay: 2s;
}
@keyframes change {
  100% {
    background-size: 100% 100%
  }
}
/* ========= locale-style ============== */
header {
    padding: .4rem 0;
}
.navbar {
	display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    margin: auto;
  padding: 0 .5rem 0 .5rem;
 }
.navbar-brand {
	font-size: 1.8rem;
	color: #0f4a67;
}
#brand {
	display: flex;
    line-height: 1;
    color: #0f4a67;
    align-items: center;
}
#brand:before {
    content: '';
    background-image: url(/images/avatar.png);
    width: 3rem;
    height: 3rem;
    background-size: cover;
}
#brand .name {
  display: inline-grid;
  margin-left: 1rem;
  height: fit-content;
}
#nav {
	display: flex;
	justify-content: flex-end;
}
#nav li {
	list-style: none;
	margin: 0 1rem
}
#nav li a {
	font-size: .8em;
    font-weight: 700;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: #0f4a67;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s;
    padding-bottom: 3px;
}
#nav li a:hover {
  background-size: 100% 1px;
  color:#8c7058;
}
#nav li a.active:before {
  content: '\25ba';
    margin-right: .3rem;
  }
.title {
  text-align: center;
}
/* --======== parallax ===== --*/

.parallax {
  position: relative;
	width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-attachment: fixed ;
  background-image: url(/images/background_parallax.jpg);
    height: 600px;
    background-size: cover;
    background-position: center;
}
.parallax .background-overlay {
  background-color: #000;
  opacity: .4;
  position: absolute;
  width: inherit;
  height: inherit;
}
.parallax-title {
  text-align: center;
  z-index: 1;
}
.parallax-title p {
	text-transform: uppercase;
	color: #fff;
}
.parallax-title h1 {
  font-family: 'PlayfairDisplay-Regular';
	font-size: 5rem;
    line-height: 1;
    color: #fff;
  margin-bottom: 1.2rem;
}
.parallax-title a {
    color: #fff;
    letter-spacing: 2px;
    background: #0e4c64;
    padding: .5rem 2rem;
    border-radius: 5px;
    border: 1px solid #ffffff;
    font-size: 1.5rem;
    transition: all .5s;
}
.parallax-title a:hover {
    background: #63321f;
    color: #fff;
    border-color: #fff;
  }
@media(max-width:767.98px){
  .parallax-title h1 {
  font-size: 3rem;
   }
}
/* --============== presentation ============== --*/

.presentation {
z-index: 1;
display: inline-flex;
justify-content: center;
  align-items: center;
transition: background 0.3s,border 0.3s,border-radius 0.3s,box-shadow 0.3s;
}
.present-image {
	z-index: 1;
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 600px;
    margin: .5rem 0;
    justify-content: center;
}
.present-image img {
	width: 100%;
    height: auto;
}
.item1 {
  max-width: 600px;
 }
.item2 {
  max-width: 400px;
}
.presentation .item2 {
	align-self: flex-start;
}
/*.bg-line {
	height: 40rem;
    background: #FBF5F1;
    position: absolute;
    width: 100%;
    z-index: 0;
    height: 100%;
} */
.present-info {
	width: 50%;
    margin-left: 4rem;
    z-index: 1;
   text-align: left;
    line-height: 1.2;
}
.small-title {
    text-transform: uppercase;
    letter-spacing: 2.3px;
}
.present-info ul {
  margin-top: 1rem ;
 }
 .present-info ul li {
  font-size: 18px;
  margin: .5rem 0;
  letter-spacing: 1px;
 }
.present2 {
  color: #fff;
  font-size: 2rem;
  font-family: 'PlayfairDisplay-Regular';
  align-items: baseline;
  display: block;
  text-align: center;
}
.present2 span {
    margin: 0 .5rem;
    font-style: oblique;
    font-size: 2.5rem;
  }
  .presentation-2 .presentation  {
   padding: 5rem;
  justify-content: center;
  background: #FBF5F1;
  }
  @media(max-width:767.98px){
  .presentation {
    flex-direction:column;
  }
  .presentation .item1 {
      height:auto
  }
  .presentation .present-info {
      margin: 1rem 0 0 0
  }
.presentation .present-info h3,
.presentation .present-info p  {
     text-align:center;
    padding: 1rem;
  }
  .presentation .present-info ul  {
    padding: 0 1rem
  }
   .presentation-2 .presentation  {
   padding: 0
  }
 .present-image {
    width:100% !important;
    height: 100%;
  }
}
/* --============== presentation-2 ============== --*/
.presentation-2 .chart {
  width: 30%;
  z-index: 1;
  display: flex;
  height: 25rem;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 5rem;
}
.presentation-2 .chart h6 {
  width: 80%;
}
@media(max-width:767.98px){
  .presentation-2 .chart {
    width: 100%;
    margin: 0;
    padding: 1rem
  }
}
 /* --======== block3 ===== --*/
 
 .block3 {
 	text-align: center
 }
 .block3 .mini-gallery {
 	display: flex;
  flex-wrap: wrap;
 	justify-content: center;
    margin-top: 3rem;
    column-gap: 1.5rem;
    align-items: center;
 }
 .present-image .free-image {
  width: 358px;
  height: auto;
  margin: 0 1rem;
 }
 .free-image img {
  height: 100%;
 }
 
 /* --======== parallax-2 ===== --*/
#parallax2 {
	background-image: url(/images/parallax-2.jpg);
  background-size: cover;
}
#parallax2 .presentation {
 align-items:baseline 
}
#parallax2 h3 {
	font-size: 27px;
    line-height: 1.3;
    font-family: 'Playfair Display';
    font-weight: 400;
    color: #faffdd;
    font-style: normal;
}
#parallax2 .present-text {
	margin-top: 1rem;
	text-transform: none;
	width: 80%;
  color: #faffdd;
  font-size: 16px;
}
@media(max-width:767.98px){
  #parallax2 {
    display: none
  }
}
 /* --======== parallax-3 ===== --*/
#parallax3 h3 {
  color: #e8ffe0;
  }
  #parallax3 .present-text {
    color: #e8ffe0;
  }
#parallax3 {
  background-image: url(/images/fashion-photo-1.jpg);
  height: 360px
}
#parallax3 a {
   display: block;
    background: #ff0101;
    width: 20%;
    margin: 0 auto;
    color: #fff;
    border-radius: 5px;
    margin-top: 1rem;
}
#parallax3 a:hover {
    background:#fff ;
    width: 20%;
    color: #ff0101;
 }
@media(max-width:767.98px){
 #parallax3 a {
    width: 50%
  }
}
 /* --======== students-work ===== --*/
 .students-work h2 {
  font-size: 30px;
    text-align: center;
    color: #333333;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .students-work h2:before,
 .students-work h2:after {
    content: '';
    border-bottom: 1px solid #555;
    width: 20rem;
    margin: 0 3rem;
 }
 #students-work {
    display: flex;
    margin: 0 auto;
    width: 93%
  }
#students-work .item {
 height: 380px;
 margin: 0 1rem;
 display: flex;
 position: relative;
 background-position: center;
 background-size: cover;
}
#students-work .item:before {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    background: linear-gradient(0deg, black, transparent);
    opacity: 1;
    bottom: 0;
    transition: .5s;
}
#students-work .item:hover:before{
    opacity: 0;
}
#students-work .card-content {
  align-self: flex-end;
    text-align: left;
    margin: 0 0 1rem 2rem;
  z-index: 2;
      line-height: 3;
}
#students-work .card-content span {
    font-size: 1rem;
    text-transform: uppercase;
    background-color: #000;
    color: #fff;
    padding: .3rem .5rem;
    letter-spacing: 2px;
}
#students-work .card-content p {
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  line-height: 1
}
#students-work .card-content a {
  color: #81bdbd;
  font-size: 1.5rem;
}
#students-work .card-1, .card-2,.card-3,.card-4 {
  background-size: cover;
 background-position:center;
}
#students-work .card-1 {
 background-image:url(/images/35AhjHG0KGc.jpg);
 background-position: top;
}
#students-work .card-2 {
 background-image:url(/images/dlKYjyBfYPs.jpg);
}
#students-work .card-3 {
 background-image:url(/images/Y_37Nbucfi0.jpg);
}
#students-work .card-4 {
 background-image:url(/images/Yel7-NcEZVs.jpg);
}

.owl-nav {
  display: none;
}
 .owl-card .item-1 {
  background-image: url(https://w4.foxthemes.me/snapster/wp-content/uploads/2020/07/aiony-haust-xCQm5_9aro0-unsplash-scaled.jpg);
  background-size: cover;
 }
@media(max-width:767.98px) {
  .owl-carousel {
   margin: 0 
  }
}
 /* --======== footer ===== --*/
footer {
  
}
.footer-content {
  display: flex;
    align-items: center;
    justify-content: space-between;
    height: 15rem;
    background-color: #fff;
 }
.autor h5 {
  font-size: 1.5rem;
  letter-spacing: 1px;
}
.autor span {
  text-transform: uppercase;
  letter-spacing: 3px;
}
.footer-content ul {
  display: flex;
  list-style: none;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: baseline;
}
.footer-content ul h5 {
  font-size: 1rem;
    text-transform: uppercase;
    font-family: 'PF_Din_Text_Cond_Pro';
    margin-right: 2rem;
 }
.footer-content ul li a {
  font-weight: bold;
  letter-spacing: 3px;
  color: #111;
  margin: 0 1rem;
}
/* ==== about page ====  */
.autograph .present-text a {
  color: blue
}
.autograph .present-text a:hover {
opacity: .5
}
.about-content {
  display: flex;
    padding: 0 3rem;
    justify-content: center;
}
.about-image {
  width: 50%;
    position: relative;
    background-image: url(/images/liventceva_about3.jpg);
    background-size: cover;
    background-position: right;;
}
.about-content .autograph {
  width: 30%;
    margin-left: 4rem;
    padding: 10rem 0;
}
.about-content .autograph img {
  width: 300px;
}
.about-content .autograph h2 {
  margin-bottom: 1rem
}
/* ================== gallery page ============================  */
.gallery {
  display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-gap: 2rem;
    justify-content: center;
    padding: 2rem;
    width: 80%;
    margin: 0 auto;
}
.gallery .item {
    display: flex;
    margin: 0 auto;
    max-width: 460px;
    height: 490px;
    background-position: center !important;
    background-size: cover !important;
    width: 100%;
}
.gallery .item a {
    position: relative;
    transition: background-size .3s;
    width: 100%;
    height: 100%;
}
.gallery .item img {
    opacity: 1;
    transition: opacity 0.5s;
    position: relative;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.gallery .media-caption {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    background: rgb(0 0 0 / 30%);
    transition: all .4s cubic-bezier(.455,.03,.515,.955);
}
.gallery .media-caption>span {
   opacity: 1;
    transition: all .4s cubic-bezier(.455,.03,.515,.955);
    transition-delay: .1s;
    font-size: 2rem;
    color: #fff;
}
.gallery .media-caption:hover {
  opacity: 1
}
.gallery .photo-1 {
  background: url(/images/portfolio/1.jpg);
}
.gallery .photo-2 {
  background: url(/images/portfolio/2.jpg);
}
.gallery .photo-3 {
  background: url(/images/portfolio/3.jpg);
}
.gallery .photo-4 {
  background: url(/images/portfolio/4.jpg);
}
.gallery .photo-5 {
  background: url(/images/portfolio/5.jpg);
}
.gallery .photo-6 {
  background: url(/images/portfolio/6.jpg);
}
.gallery .photo-7 {
  background: url(/images/portfolio/7.jpg);
}
.gallery .photo-8 {
  background: url(/images/portfolio/8.jpg);
}
.gallery .photo-9 {
  background: url(/images/portfolio/9.jpg);
}
.gallery .photo-10 {
  background: url(/images/portfolio/10.jpg);
}
.gallery .photo-11 {
  background: url(/images/portfolio/11.jpg);
}
.gallery .photo-12 {
  background: url(/images/portfolio/12.jpg);
}
.gallery .photo-13 {
  background: url(/images/portfolio/13.jpg);
}
.gallery .photo-14 {
  background: url(/images/portfolio/14.jpg);
}
.gallery .photo-15 {
  background: url(/images/portfolio/15.jpg);
}
.gallery .photo-16 {
  background: url(/images/portfolio/16.jpg);
}
.gallery .photo-17 {
  background: url(/images/portfolio/17.jpg);
}
.gallery .photo-18 {
  background: url(/images/portfolio/18.jpg);
}
.gallery .photo-19 {
  background: url(/images/portfolio/19.jpg);
}
.gallery .photo-20 {
  background: url(/images/portfolio/20.jpg);
}

/* ==== testimonials page ====  */
.testimonials .row {
  margin: 0 auto;
  width: 80%;
  padding-bottom: 10rem;
}
.testimonials .item {
  margin: 0 2rem
}
.testimonials .number {
  display: flex;
}
.testimonials .number p {
  font-size: 4rem;
  font-family: 'PlayfairDisplay-Regular';
}
.testimonials .number img {
  width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 3px #5d5d5d;
}
.testimonials .student-work {
  width: 470px;
    height: 320px;
    background-size: cover;
    box-shadow: 0 0 1px #555;
}
.testimonials .student-work a {
  display: block;
  width: 100%;
  height: 100%;
}
.testimonials .testimonials-text {
  font-size: 1.3rem;
    line-height: 1.3;
}
.testimonials .sw-1 {
    background-image: url(/images/35AhjHG0KGc.jpg);
    background-position: top;
}
.testimonials .sw-2 {
    background-image: url(/images/dlKYjyBfYPs.jpg);
    background-position: center;
}
.testimonials .sw-3 {
    background-image: url(/images/Y_37Nbucfi0.jpg);
    background-position: center;
}
.testimonials .sw-4 {
    background-image: url(/images/Yel7-NcEZVs.jpg);
    background-position: center;
}
@media(max-width:991.98px) {
  .testimonials .student-work {
    width: auto
  }
}
/* ================== contacts page ========================  */
.contacts {
  padding: 10rem 0 
}
.contacts .row {
  justify-content: center;
  padding: 1rem;
  align-items: center;
}
.contacts .item-1 {
  width: 30%;
    text-align: center;
    line-height: 1.2;
    margin: 0 3rem
}
.contacts .item-2 {
  width: 30%;
  margin: 0 3rem
}
.contacts .item-2 p {
  width: 50%;
  margin: 0 auto;
}
.contacts .item-3 {
  display: flex;
  width: 35%;
  margin: 0 3rem
}
.contacts .item-3 img {
  width: 100%;
}
.contacts .item-4 {
  width: 30%;
  margin: 0 3rem
}
#form-contact {
  display: flex; 
  flex-direction: column;
}
#form-contact textarea {
  margin: .5rem 0;
  padding: 1rem;
  height: 10rem
}
#form-contact input {
  margin: .5rem 0;
  padding: 1rem;
}
#form-contact button {
  background: #000;
  color: #fff;
  height: 4rem;
  border: 1px solid #000;
  transition: .3s all;
}
#form-contact button:hover {
  background: #fff;
  color: #000;
  cursor: pointer;
}
/* ================= collage page ======================  */
.collage .parallax,
#parallax2 {
    background-image: url(/images/collage/parallax.jpg);
 }
.collage h3 {
  font-size: 2.5rem
}
.collage .parallax .background-overlay {
    background-color: none;
}
.collage .bg-line  {
     background: #f1f2fb;
}

/* ================= adaptive style ======================  */
@media(max-width: 2560px) {
.parallax {
    height: 800px;
  }
}
@media(max-width: 1440px) {
.parallax {
    height: 600px;
  }
}
@media(max-width: 1199.98px) {
.burger-icon {
  position: relative;
  right: 1%;
  cursor: pointer;
  top: 3px;
}
header .navbar {
  width: 100%; 
  padding: 0;
  margin: 0;
  display: block;
  height: 100%
}

#nav {
  overflow: hidden;
  background: #336274;
  height: 0;
  max-height: 0px; 
  list-style-type: none;
  padding-left: 0;
  -webkit-transition: linear 1s;
  transition: linear 1s;
  margin: .1em 0;
}

#nav.open {
  height: auto;
 max-height: 500px; 
  -webkit-transition: linear 1s;
  transition: linear 1s;
  display: block;
  padding: 0;
  margin-top: 2rem
}

#nav li {
  float: none;
  text-align: left;
  text-decoration: none;
  width: 100%; 
  margin: 0;
  -webkit-transition: linear 1s;
  transition: linear 1s;
}

#nav li a {
text-decoration: none;
  color: white;
  padding: 10px;
  border-bottom: 1px solid white;
  display: block;
  margin: 0;
  -webkit-transition: linear .3s;
  transition: linear .3s;
}

#burger {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 25px;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #336274;
    margin: 6px 0;
    transition: 0.2s;
}

.change .bar1 {
    -webkit-transform: rotate(310deg) translate(-9px, 6px) ;
    transform: rotate(310deg) translate(-9px, 6px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

.hover .bar1 {
  background-color: red;
}

.hover .bar2 {
  background-color: red;
}

.hover .bar3 {
  background-color: red;
}
.present-info {
  width: 100%
}
.bg-line {
  display: none;
}
.bg-xs {
  background-color: #FBF5F1;
  padding: 1rem;
}
.gallery {
  grid-template-columns: 50% 50%;
}

} 
@media(max-width: 991.98px) {
  .row {
  flex-direction: column;
  }
  .footer-content {
    display: block;
    margin-top: 1rem
  }
  .about-content {
    flex-direction: column;
  }
  .about-image {
    width: 100%;
    height: 30rem;
 }
  .autograph {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important
  }
  .autograph img {
    margin: 1rem !important
  }
  .testimonials h2 {
    margin-bottom: 2rem
  }
  .testimonials .row {
  padding-bottom: 0 !important
  }
  .testimonials .row img {
  margin-top: 2rem
  }
  .testimonials .comment-2 .number {
    order:-2;
  }
  .testimonials .comment-2 .info {
    order:-1;
  }
}
@media(max-width: 767.98px) {
  .owl-dots {
    display: none;
  }
#parallax2 {
  background-image: linear-gradient(313deg, #48362b, #73725cf0), url(/images/02_mini.jpg)
}
#parallax3 {
  background-image: linear-gradient(313deg, #48362b, #73725cf0), url(/images/03_mini.jpg)
}
.presentation .item2 {
  display: none;
  }
  .present-info {
    margin-top: 1rem;
  }
  .block3 .mini-gallery {
      grid-gap: 1rem
  }
  #students-work {
    margin-top: 20px;
  }
  .footer-content ul {
  margin-top: 1rem;
    display: block
  }
  .gallery {
  grid-template-columns: 100%;
    padding: 0;
    margin-top: 2rem;
  }
}