@font-face
{
    font-family: co-headline;
   src: url('/master/Co Headline Corp.ttf');
}



@font-face
{
    font-family: DDM;
    src: url('/master/DDM-icon.ttf');
   
}
:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #f03766;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #faa62b;
    --bs-yellow-lights: #fffede;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #66ccce;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #faa62b;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}


  body {
      font-family: 'co-headline',monospace;
    }
    

.banner {
    width: 100%;
    height: 480px;
    margin-top: 100px;
    position: absolute;
    color: #fff;
    
}
#data{
margin-top: 700px!important;


}
.hl{   position: relative;
top:600px}


.logo {
    position: absolute;
    top: 20px;
    left: 80px;
    padding: 5px;
    background: #fff;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 1029;
}
nav {
    position: absolute;
    top: 40px;
    right: 0px;
    padding: 5px;
	max-width: 400px;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 1029;
}
.banner_title {
    position: absolute;
    top: 60px;
    right:450px;
    
    font-size: 7em;
    text-align: center;
     line-height: 0.8em;
     transform: scale(.5, 1);
     z-index: 1029;
     text-shadow: 2px 2px 4px black;
}


.col-square {
    position: relative;
    border-radius: 15px;
    line-height: 1.2;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 50%);
    border:3px solid #000;
}
nav .col-square:before {
    content: "";
    display: block;
    padding-top: 60%;
}
.col-nabidka {

    font-size:17px;
    color: #000;
    text-align: center;
    padding: 5px;
	color: #000;
	line-height: 1.5;
	    margin-right: auto;
    margin-left: auto;
}

.icon {
	position: relative;
    font-family: DDM;
	font-size: 2em;
	top: 8px;
	padding-right: 10px;
	color:#000;
font-style: normal;
}

nav .icon {
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    font-family: DDM;
    font-size: 6em;
    margin: 0px;
    padding: 0px;
    font-style: normal;
    color: #fff;
    padding-right: 0px;
}
.data_title .icon {
    position: relative;
    top: -10px;
	padding-right: 10px;
    font-family: DDM;
    font-size: 4em;
    color: #000;
    
}





}



h3 {
    padding:10px;
    
}
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
a {
     text-decoration: none
}
.ps-6{padding-left: 80px!important;}




.activity-boxes .col-square {
    position: relative;
    border-radius: 15px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 50%);
}

.col-square-50:before {
    content: "";
    display: block;
    padding-top: 50%;
}
.col-activity {
    color: #000;
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 15px;
    line-height: 1.3;
    overflow: hidden;
}

.col-activity-IK {
    position: absolute;
    bottom: 0px;
    right: 5px;
    font-weight: bold;
    text-align: left;
    font-size: 20px;
    /* text-shadow: 2px 2px 4px black; */
}

.img_border{

    box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
    border: 8px solid transparent;
  border-image: url(/img/title.png) 60 round;
  border-radius: 9px;

	text-align: center;





}
.col-title {
    position: relative;
    line-height: 0.5;
	max-width: 450px;
	min-height:70px;
    padding: 0px;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
    margin-right: auto;
    margin-left: auto;
    border: 8px solid transparent;
 
	font-size: 26px;
  border-image: url(/img/title.png) 60 round;
  border-radius: 9px;
	text-align: center;
	color:#fff;

}
.col-title-menu {
   position: relative;
    border-radius: 15px;

    box-shadow: 3px 3px 5px rgb(0 0 0 / 50%);
    border: 3px solid #000;
    font-size: 30px;
    color: #000;
    text-align: center;
    max-width: 550px;
    min-height: 70px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    
   
    
    
}
.col-title-menu .icon{
    position: absolute;
    font-family: DDM;
	font-size: 1.5em;
	top: 0px;
	left:50px;
	right:auto;
}
.col-title-menu span{
   position: relative;
	top: 8px;
	color:#fff;

}

.data_title{
	font-size: 18px;
	  margin: 10px;
	  color:#fff;

}

.col-title-transform{
	font-size: 25px;
	position: relative;
 	top: 5px;
 	left: 5px;
 	transform: scale(1, 2);
}
.data_title .col-title-transform{

 	top: 0px;
}

.col-faq {
    position: relative;
    line-height: 1.2;

    margin-right: auto;
    margin-left: auto;

	padding: 5px;

	text-align: center;
}



.bubble {
	position: relative;
	max-width: 400px;
	text-align: center;
	line-height: 1.4em;
	margin:  auto;
	background-color: #fff;

	font-family: sans-serif;
	padding: 20px;
	margin-bottom: 100px;
	font-size: large;
	
}

.bubble:before{
	position: absolute;
	width: 0;
	height: 0;
}

.speech-left:before {
	left: 40px;
	bottom: -4px;
	content:url('/img/b_left.png')  ; 
}
.speech-right:before {
	right: 120px;
	bottom: -4px;
	content:url('/img/b_right.png')  ; 
}



.avatar {
	padding-top: 10px;
	font-size: 0.8em;
	position: absolute;
	vertical-align: middle;
	width: 400px;
	height: 80px;
	bottom:-130px;

}
.avatar img{
  position: absolute;
  top:0;
  vertical-align: middle;
  width: 70px;
  height: 70px;
  border-radius: 50%;
   border-style: solid;
  border-color: #aedce4;
}

.speech-right .avatar{
	right:0px;
	padding-right: 80px;
	text-align: right;
}
.speech-left .avatar{
	left:0px;
	padding-left: 80px;
	text-align: left;
}
.speech-right .avatar img{
	right:0px;

}
.speech-left .avatar img{
	left:0px;

}

#faq .row>* {
	    margin-top: 0.5em;
}
.galerie{

    border-radius: 15px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 50%);
}

@media (max-width: 1200px) {
.banner_title {

    top: 160px;
  
  }

}
@media (max-width: 992px) {
.banner_title {

    right: auto;
    left:-35px;
    width: 50%;

  }
  .col-activity {
    font-size: 16px;
}
}
@media (max-width: 768px) {
#data{
margin-top: 700px!important;

}
.col-activity {
    font-size: 16px;
}
.hl{  
position: absolute;
top:500px;
text-align: right;
color:#fff;
right:10px;


}
nav .icon {

    font-size: 5em;

}

nav {
   position: relative;
    top: 600px;
   max-width: 100%;
   
}




.logo {

    left: 10px;

}
.col-title-menu span {
font-size: 25px;
}
.col-square-50:before {
    content: "";
    display: block;
    padding-top: 35%;
}
}