@charset "utf-8";
/* CSS Document */

html {
    font-size: 16px; /* Базовый размер для rem */
}

body {
	font: normal 1rem "Arial", Helvetica, sans-serif !important;
}

p {
    font-size: 1rem; /* 16px */
}

.text-size-p {
font-size: 12px;		
}


.text-size_H1 {
font-size: 15px;
	font-weight: 700;
}
.text-size_banner {
font-size: 14px;
	/*font-weight: 400;*/
}



.ru-text  {
font-family: 'Caveat', cursive;
	font-size: 50px;
	line-height: 0.7;
	/*text-transform: uppercase;*/
	/*color: #FFFFFF;*/
	 /*обязательно для H1 И H2*/
}
.ru-text-2  {
font-family: 'Caveat', cursive;
	font-size: 36px;
	line-height: 0.7;
	/*text-transform: uppercase;*/
	/*color: #FFFFFF;*/
	 /*обязательно для H1 И H2*/
}
.ru-text-caveat-sm  {
font-family: 'Caveat', cursive;
	font-size: 27px;
	line-height: 0.7;
	font-weight: 100;
	/*text-transform: uppercase;*/
	/*color: #FFFFFF;*/
	 /*обязательно для H1 И H2*/
}
.ru-text-caveat-obezjana  {
font-family: 'Caveat', cursive;
	font-size: 34px;
	line-height: 0.7;
	font-weight: 100;
	/*text-transform: uppercase;*/
	/*color: #FFFFFF;*/
	 /*обязательно для H1 И H2*/
}
.ru-text-3  {
font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-size: 38px;
	line-height: 0.9;
	/*text-transform: uppercase;*/
	/*color: #FFFFFF;*/
	 /*обязательно для H1 И H2*/
}
.ru-text-3-atelier  {
font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-size: 48px;
	line-height: 0.9;
	/*text-transform: uppercase;*/
	/*color: #FFFFFF;*/
	 /*обязательно для H1 И H2*/
}
.ru-text-3-index  {
font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-size: 25px;
	line-height: 0.9;
	/*text-transform: uppercase;*/
	/*color: #FFFFFF;*/
	 /*обязательно для H1 И H2*/
}
.ru-text-4  {
font-family: 'Rubik Dirt', cursive;
	font-size: 40px;
	line-height: 1;
	/*text-transform: uppercase;*/
	/*color: #FFFFFF;*/
	 /*обязательно для H1 И H2*/
}
.ru-text-4_2  {
font-family: 'Rubik Dirt', cursive;
	font-size: 50px;
	line-height: 0.8;
	/*text-transform: uppercase;*/
	/*color: #FFFFFF;*/
	 /*обязательно для H1 И H2*/
}
.ru-text-4-cooperation  {
font-family: 'Rubik Dirt', cursive;
line-height: 0.8;
font-size: clamp(1.9rem, -0.675rem + 4.333vw, 4.9rem);  	
}

.ru-text-4-cooperation-sew  {
font-family: 'Rubik Dirt', cursive;
line-height: 0.8;
font-size: clamp(2.1rem, -0.975rem + 3.633vw, 4.5rem);  	
}



.ru-text-header  {
font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-size: 55px;
	line-height: 0.7;
	/*text-transform: uppercase;*/
	/*color: #FFFFFF;*/
	 /*обязательно для H1 И H2*/
}
.my-text-2  {
font-family: 'Antonio', sans-serif;
	font-size: 50px;
	line-height: 0.9;
	/*text-transform: uppercase;*/
	color: #FFFFFF;
	 /*обязательно для H1 И H2*/
}


/*////////   MY STYLE FOR IMAGES IN CARD //////  */
.feature-icon {
  width: 4rem;
  height: 4rem;
  border-radius: .75rem;
}

.icon-link > .bi {
  margin-top: .125rem;
  margin-left: .125rem;
  fill: currentcolor;
  transition: transform .25s ease-in-out;
}
.icon-link:hover > .bi {
  transform: translate(.25rem);
}

.icon-square {
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
}

.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }

.card-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.feature-icon-small {
  width: 3rem;
  height: 3rem;
}
/*////////   END  MY STYLE FOR CARD //////  */


.float-img {
  float: left;
}
.bg-custom-1 {
background-image: linear-gradient(15deg, #000000 0%, #053042 100%);
}




/* /////   SUB FOOTER STYLE ////// */
.sub-footer {
    border-top: 3px solid #33A2FF;
    text-align: right;
    position: relative;
    bottom: 0px;
    width: 100%;
    /*height: 164px;*/  
	/* Set the fixed height of the footer here */
    line-height: 50px; /* Vertically center the text there */
    background-color: #252525;
    padding-top: 30px;
    background-image: -webkit-linear-gradient(327deg,rgba(15,15,15,1.00) 0%,rgba(48,58,67,1.00) 100%);
    background-image: -moz-linear-gradient(327deg,rgba(15,15,15,1.00) 0%,rgba(0,175,239,1.00) 100%);
    background-image: -o-linear-gradient(327deg,rgba(15,15,15,1.00) 0%,rgba(5,204,255,1.00) 100%);
    background-image: linear-gradient(123deg,rgba(15,15,15,1.00) 0%,rgba(26,79,118,1.00) 100%);
}
.sub-footer p {
	font-size: 10px;
	color: #FFFFFF;
	line-height: 60px;
}
.sub-footer a {
	color: #C0CD3A;
	text-decoration: none;
}
/* /////   END SUB FOOTER STYLE ////// */




.container .box .image{
  margin: 10px 0;
  height: 150px;
  width: 150px;
  background: #8e44ad;
  padding: 3px;
  border-radius: 50%;
}
.box .image img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}
.box p{
  text-align: center;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
}
.box .name_job{
  margin: 10px 0 3px 0;
  color: #8e44ad;
  font-size: 18px;
  font-weight: 600;
}
.rating i{
  font-size: 18px;
  color: #8e44ad;
  margin-bottom: 5px;
}
.btns{
  margin-top: 20px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.btns button{
  background: #8e44ad;
  width: 100%;
  padding: 9px 0px;
  outline: none;
  border: 2px solid #8e44ad;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 400;
  color: #8e44ad;
  transition: all 0.3s linear;
}
.btns button:first-child{
  background: none;
  margin-right: 5px;
}
.btns button:last-child{
  color: #fff;
  margin-left: 5px;
}
.btns button:first-child:hover{
  background: #8e44ad;
  color: #fff;
}
.btns button:hover{
  color: #fff;
}
@media (max-width:1045px){
  .container .box{
    width: calc(50% - 10px);
    margin-bottom: 20px;
  }
}
@media (max-width:710px){
  .container .box{
    width: 100%;
  }
}


/*////  GOOGLE MAP /////*/
iframe {
filter:invert(90%)
}

#mystyle {
filter:invert(0%)
}





/* Center the loader */
#loader {
  z-index: 1;
  width: 250px;
  height: 250px;
  border: 7px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {  /*//// ВАЖНО - Скрывакет Контент из Google SEO ////*/
  display: none;
  text-align: center;
}
/*///  END  //////*/


.nav-link {
  color: #00ABFF;
}

.navbar-nav > .active > .a {
  color: red;
}

.list-style-image {
  background: url('../favicon-16x16.png') no-repeat left center;
       padding: 5px 10px 5px 25px;
        list-style: none;
        margin: 0;
        vertical-align: middle;
       
}

.bg-col-blue {
background-color: #EDF6FF	
}

.bg-price {
background-color: #FCFFED	
}



/*////////    LIGHT BOX IMG  ///// */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
/*////   END  /////*/




.preloader {
    background: transparent url("../Preloader.gif") no-repeat scroll center center;	
  background-size: 50px;

/*  background-color: #cccccc;*/

}


.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /*width: 50%;*/
}




video {  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  z-index: -1;
}
.video-wrapper {
    margin: 0em auto 0;
/*    max-width: 720px;
    min-width: 320px;*/
    position: relative;
}
.video-wrapper video {
  height: auto;
  vertical-align: middle;
  width: 100%;
}
.video-description {
  background: transparent;
  position: absolute;
  top: 0%;
  right: 0;
  bottom: 0;
  left: 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}


.img-float {
	margin-right: 15px;
	float: left;
	padding-top: 10px;
	margin-bottom: 10px;		
}







/* If the screen size is 1200px wide or more, set the font-size to 80px */
@media (min-width: 1200px) {
  .responsive-font-example {
    font-size: 35px;
  }
}
/* If the screen size is smaller than 1200px, set the font-size to 80px */
@media (max-width: 1199.98px) {
  .responsive-font-example {
    font-size: 25px;
  }
}

@media (max-width: 450.98px) {
  .responsive-font-example {
    font-size: 20px;
  }
}


.blinking {
    animation:blinkingText 1.1s infinite;
}
@keyframes blinkingText {
    10%{    color: #000000; }
    49%{    color: #00F6FF; }
    100%{   color: #00FF1D; }	
}


.blink_text {
 animation-name: blinker;
 animation-duration: 1s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}
@keyframes blinker {  
    70%{    color: #FF3900; }
    59%{    color: #F90000; }
    100%{   color: #03BEFF; }
}







/*////  POLICY START  /////  */
blockquote {
  background: #FBF7EA;
  border-left: 10px solid #FCF9CB;
  margin: 0,5em 10px;
  padding:  10px;
  quotes: "\201C""\201D""\2018""\2019";
}
/*////   END  ////  */

/* If the screen size is 1200px wide or more, set the font-size to 80px */
@media (min-width: 1200px) {
  .responsive-font {
    font-size: 37px;
  }
}
/* If the screen size is smaller than 1200px, set the font-size to 80px */
@media (max-width: 1199.98px) {
  .responsive-font {
    font-size: 34px;
  }
}	  
	

/* If the screen size is 1200px wide or more, set the font-size to 80px */
@media (min-width: 1200px) {
  .responsive-font-atelier {
    font-size: 37px;
  }
}
/* If the screen size is smaller than 1200px, set the font-size to 80px */
@media (max-width: 1199.98px) {
  .responsive-font-atelier {
    font-size: 24px;
  }
}	

	  
.padding {
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}	  
	  

hr.style5 {
	background-color: #fff;
	border-top: 3px dashed #000000;
}  





/*<!--..../////////  HR DIVIDER ///////.......-->*/
.fancy {
  --b: 4px;   /* control the border thickness */
  --w: 80px;  /* control the width of the line*/
  --g: 15px;  /* control the gap */
  --c: #385868;
 
  width: fit-content;
  padding: 0 1em;
  border: 10px solid;
/*  color: #fff;*/
  background: 
    conic-gradient(from   45deg at left ,var(--c) 25%,#0000 0) 0,
    conic-gradient(from -135deg at right,var(--c) 25%,#0000 0) 100%;
  background-size: 51% 100%;
  background-origin: border-box;
  background-repeat: no-repeat;
  border-image: 
     linear-gradient(
       #0000      calc(50% - var(--b)/2),
       var(--c) 0 calc(50% + var(--b)/2),
       #0000    0) 
    1/0 var(--w)/calc(var(--w) + var(--g));
  margin-inline: auto;
}
/*<!--//// END //// -->*/





.separator{
  display:flex;
  align-items: center;
}

.separator .line{
  height: 2px;
  flex: 1;
  background-color: #2CA6FF;
    
}

.separator strong {
  padding: 0 1rem;
}






/*////   DIVIDER ///////*/
.divider-my
{
	position: relative;
	margin-top: 5px;
	height: 1px;
}

.div-transparent:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 5%;
	right: 5%;
	width: 90%;
	height: 1px;
	background-image: linear-gradient(to right, transparent, rgba(15,179,239,1.00), transparent);
}
.div-dot:after
{
	content: "";
	position: absolute;
	z-index: 1;
	top: -8px;
	left: calc(50% - 9px);
	width: 18px;
	height: 18px;
	background-color: #FFFFFF;
	border: 1px solid rgba(28,166,255,1.00);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #00B3FF,
					0 0 0 1px #00B3FF;
}

.accordion-auto {
background-color: rgba(249,249,249,1.00);

}



/*///////  RUNNING TEXT /////// */
.marquee {
  overflow: hidden;
  font-size: 13px;
  text-transform: uppercase;
background-image: linear-gradient(-15deg, #000000 0%, #053042 100%);
 border-radius: 25px;
    color: rgba(255,255,255,1.00);
}

.marquee__inner {
  display: flex;
}

.marquee__line {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 15px;
  min-width: 100%;
  white-space: nowrap;
  animation-name: marqueeLine;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes marqueeLine {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(-100%);
  }
}




.obezjana {
    position: relative;
    top: -22px;
   z-index: 0;
}
.morda {
    position: relative;
   z-index: 10;
}


/*//////   ПОДЧЁРКИВАНИЯ ВОЛНА ////// */
.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

/*//////   ПОДЧЁРКИВАНИЯ ЛИНИЯ  ////// */
.fancy-2 {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;
}


/*////  COLLOR BLOCK  ///*/
.collor-block {
  background: linear-gradient(-45deg, #E40003 0%, #976411 100% );
  color: #e8e8e8;
  padding: 20px;
  line-height: 1.5;
  border-radius: 25px;
 /* pointer-events: none;*/
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}
/*////  END ///// */


.button1 {
font-size: 27px;
 }