/* Owl Slider CSS */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400italic,700&subset=latin,cyrillic');

body {
  
      position: relative; 
}


/* component: Header */



#container {
	position: relative;
	overflow: hidden;
    height: 100vw;
}

.center22 {
  
    margin: auto;
    width: 50%;
    border: 3px solid  gold;
    padding: 10px;
    text-align: center;
    font-size: 49px;
    color: white;
}

#container .content {
	position: absolute;

	top: 70%;
    right: 28vw;

    width:  800px;
    height: 80px;
    border: 2px solid gold;
}
#container .content2 {
	position: absolute;

	top: 10px;
    right: 10px;
    width:  250px;
    height: 50px;
    border: 1px solid gold;
}
#container .content3 {
	position: absolute;

	top: 10px;
    left: 10px;
    width:  250px;
    height: 50px;
    border: 1px solid gold;
}

#container .content4 {
	position: absolute;

	bottom: 10px;
    left: 10px;
    width:  250px;
    height: 50px;
    border: 1px solid gold;
}
#container .content5 {
	position: absolute;

	bottom: 10px;
    right: 10px;
    width:  250px;
    height: 50px;
    border: 1px solid gold;
}

#container .content6 {
	position: absolute;

	bottom: 10px;
    right: 43vw;
    width:  250px;
    height: 50px;
    border: 1px solid gold;
}
		.flex-container {
    display: -webkit-flex;
    display: flex;
    width; 30%;
    height: 74px;

}

.flex-item {

    width: 100%;
    height: 74px;
    margin: auto;
}

.flex-container2 {
    display: -webkit-flex;
    display: flex;
    width; 11%;
    height: 34px;

}

.flex-item2 {

    width: 100%;
    height: 34px;
    margin: auto;
}


.flex-containerX {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    justify-content: space-between;
    width:  100vw;
    margin-left:10px;
}

.flex-itemX {
   border: 1px solid gold;
    width: 250px;
     height: 50px;
}

.flex-containerX22{
     display: -webkit-flex;
    display: flex;
    width:  100vw
}

.flex-containerX2 {
    display: -webkit-flex;
    display: flex;
      margin:  auto;

}

.flex-itemX2 { 
    width:  800px;
    height: 80px;
    border: 2px solid gold;
   margin:  auto;
}

.flex-containerX33 {
     display: -webkit-flex;
    display: flex;
    width:  100vw;
      margin-left:10px;
        justify-content: space-between;
    margin-right: 10px;
}


.flex-containerX3 {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    justify-content: space-between;
  
}

.flex-itemX3 {
   border: 1px solid gold;
    width: 250px;
     height: 50px;
 
}

div. displ.a {
    text-decoration: none;
   
}
displ.a, a:hover, a:active, a:focus {

    text-decoration: none;
}
displ.a, a:hover{
background-color: gold;
color: white;
}


@media screen and (max-width:650px ) {
     .flex-itemX3 {
            width: 170px; !important;
         height: 100px;
          }  
}

@media screen and (max-width:350px ) {
     .flex-itemX3 {
            width: 140px; !important;
         height: 100px;
          }  
}


@media screen and (max-width:650px ) {
     .flex-itemX {
            width: 130px; !important;
         height: 80px;
          }  
}

@media screen and (max-height:377px ) {
     .flex-itemX {
            width: 120px; !important;
         height: 80px;
          }  
}



@media screen and (max-width:400px ) {
     .flex-itemX {
            width: 120px; !important;
         height: 80px;
          }  
}

@media screen and (max-width:380px ) {
     .flex-itemX {
            width: 100px; !important;
         height: 80px;
          }  
}


@media screen and (max-width:400px ) {
     .small {
           font-size: 20px !important;
          }  
}

 


@media screen and (max-width:650px ) {
     .small2 { display: none;
           font-size: 21px !important;
         text-align: justify !important;
          }  
}




@media screen and ( max-height:450px ) {
     .middle {
          
        top: 45%  !important;
          }  
}

@media screen and ( max-width:330px ) {
     .middle {
          
        top: 40%  !important;
          }  
}


/* text thinks */


.tekst
{ font-family: 'Poiret One', cursive;
}
.teksthead{
    font-size:60px;
}

@media screen and (max-width:1199px ) {
     .teksthead {
            font-size: 45px !important;
          }  
}

@media screen and (max-width:991px ) {
     .teksthead {
            font-size: 40px !important;
          }  
}

@media screen and (max-width:725px ) {
     .teksthead {
            font-size: 35px !important;
          }  
}

.teksthead2{
    font-size:40px;
}

@media screen and (max-width:1199px ) {
     .teksthead2 {
            font-size: 30px !important;
          }  
}

@media screen and (max-width:991px ) {
     .teksthead 2{
            font-size: 25px !important;
          }  
}

@media screen and (max-width:725px ) {
     .teksthead2 {
            font-size: 20px !important;
          }  
}


.tekst2 {
   font-family: 'Arsenal', sans-serif; font-size: 17px;
}

@media screen and (min-width:1700px ) {
     .tekst2 {
            font-size: 20px !important;
          }  
}

@media screen and (max-width:1199px ) {
     .tekst2 {
            font-size: 15px !important;
          }  
}



.tekst3
{ font-family: 'Poiret One', cursive; color: white; font-size: 20px; text-shadow: 2px 3px black;
}

@media screen and (max-width:1199px ) {
     .tekst3 {
            font-size: 16px !important;
          }  
}

@media screen and (max-width:911px ) {
     .tekst3 {
            font-size: 18px !important;
          }  
}


.tekst4
{ font-family: 'Poiret One', cursive; color: white; font-size: 34px; text-shadow: 3px 3px black;
}

@media screen and (max-width:1199px ) {
     .tekst4 {
            font-size: 22px !important;
          }  
}

@media screen and (max-width:1199px ) {
     .tekst4 {
            font-size: 18px !important;
          }  
}


.tekst5
{ font-family: 'Poiret One', cursive; color: black; font-size: 40px;
}

.center {text-align: center;
}

.justify {
    text-align:justify;  
    text-justify:inter-word;
}

.bottomleft {
    position: absolute;
    bottom: 10%;
    left:7%;

}
.bottomleft2 {
    position: absolute;
    bottom: 55%;
    left:7%;

}
		.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}

}


		/* news */




/* img */


	div.img {
    border: 1px solid #FAFAD2;
}

div.img:hover {
    border: 4px solid #FFD700;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 0.7;
    filter: alpha(opacity=50); /* For IE8 and earlier */


}

.noopacity:hover {
     opacity: 1 !important;
}

div.more:hover {

  transform:scale(1.1,1.1);
}

@media only screen and (max-width: 1199px){
    .more {
       font-size: 28px;
    }
}

div.more2:hover {

  transform:scale(1.0,1.2);
}


.nopacity {
opacity: 1 !important;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 800px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.noborder {
    border:0
        padding:0; 
    margin:0; 
    
}

@media only screen and (max-width: 991px){
    .delete {
        display: none;
    }
}




/* кнопка фб   */

a.button {
display: block;
font-family: 'Poiret One', cursive;;
color:black;
padding: 3px;
margin: 0 0 20px 0;
max-width: 260px;
min-width: 200px;
width: 100%;
text-align: center;
display: inline-block;
text-transform: uppercase;
font-size: 19px;
border: 2px solid #000;
letter-spacing: 0.2em;
}

.contactContent a.button {
    font-size: 14px;
    max-height: 31px;
    min-height: 10px;
    max-width: 118px;
    min-width: 100px;
    margin-right: 7px;
    margin-top: 0px;
}



fb.a {
    text-decoration: none;
   
}
fb.a, a:hover, a:active, a:focus {

    text-decoration: none;
}
fb.a, a:hover{
background-color: gold;
color: white;
}

√{
    cursor: pointer;
    color: #000;
}

div.modalx.button {
    text-decoration: none;
    border: 2px solid #000;
    
}
div.modalx.button, button:hover, button:active, button:focus {
    outline: 0;
    text-decoration: none;
}
div.modalx.botton, button:hover{
background-color: gold;
color: white;
}


/* form  */

div.nik {
  font-family: 'Poiret One', cursive;
  font-size: 20px;
  color: #0028ff;

  text-align: center;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

div.nik2 {
  position: relative;
  z-index: 1;
  background-color:  rgba(255, 215, 0, 1);
}


/* modal form */ 

#contact-form {
  max-width: 90%;
  margin: 0 auto;
}

label {
  font-weight: 400;
  cursor: pointer;
}

textarea,
input {
    overflow: hidden;
  border: none;
  outline: none;
  border-radius: 0;
  text-align: center;
  background: none;
  font-weight: 700;
  font-family: 'Lato', georgia;
  font-size: 20px;
  color: rgba(255, 255, 255, 1);
  max-width: 90%;
  padding: 1rem;
  border: 2px dashed rgba(255, 255, 255, 0);
  box-sizing: border-box;
  cursor: text;
}

textarea {
  text-align: left;
  /* overflow:hidden; */

  resize: none;
  width: 90%;
  border-color: rgba(255, 255, 255, 0)
}

textarea:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px dashed rgba(255, 255, 255, 1);
}

textarea:focus:required:valid {
  border: 2px solid rgba(255, 255, 255, 0);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

textarea:required:valid {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

input {
  border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
}

input:required,
textarea:required {
  border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
}

input:focus {
  border-bottom: 2px dashed rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.2);
}

input:required:valid {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

input:required:invalid {
  color: rgba(255, 255, 255, 0.5);
}

::-webkit-input-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 400;
}

:-moz-placeholder {
  /* Firefox 18- */

  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 400;
}

::-moz-placeholder {
  /* Firefox 19+ */

  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 400;
}

:-ms-input-placeholder {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 400;
}

.expanding {
  vertical-align: top;
}

.send-icn {
  fill: rgba(255, 255, 255, 1)
}

.send-icn:hover {
  fill: rgba(0, 0, 0, 1);
  cursor: pointer;
}

button {
  background: none;
  border: none;
  outline: none;
  margin: 2vmax;
}

button:hover small {
  opacity: 1;
}

small {
  display: block;
  opacity: 0;
}

.website {
  opacity: 1;
  font-size: 16px;
  color: white;
  position: relative;
  text-align: center;
  display: block;
  margin-top: 7%;

}

.website a {
  color: white;
}



/*slide*/

.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}


.slideanim2 {visibility:hidden;}
.slide2 {
    /* The name of the animation */
    animation-name: slide2;
    -webkit-animation-name: slide2; 
    /* The duration of the animation */
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide2 {
    0% {
        opacity: 0;
        transform: translateX(-70%);
    } 
    100% {
        opacity: 1;
        transform: translateX(0%);
    } 
}
@-webkit-keyframes slide2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

.slideanim3 {visibility:hidden;}
.slide3 {
    /* The name of the animation */
    animation-name: slide3;
    -webkit-animation-name: slide3; 
    /* The duration of the animation */
    animation-duration: 2s; 
    -webkit-animation-duration: 2s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide3 {
    0% {
        opacity: 0;
        transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0%);
    } 
}
@-webkit-keyframes slide3 {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}







/* carousel */

.carousel-control.right, .carousel-control.left {
    background-image: none;
    color: gold;
}


.carousel-indicators li {
    border-color: gold;
  
}

.carousel-indicators li.active {
    background-color: gold;
}

.item h4 {
    font-size: 29px;
    font-family: 'Poiret One', cursive;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 60px 0;
   
}


@media only screen and (max-width: 1199px){
    .item h4 {
       font-size: 23px;
    }
}

@media only screen and (max-width: 991px){
    .item h4 {
       font-size: 19px;
    }
}

@media only screen and (max-width: 700px){
    .item h4 {
       font-size: 19px;
    }
}



.item span {
    font-style: normal;
}




/* spy and nav */

.affix {
      top:0;
      width: 100%;
      z-index: 9999 !important;
  }
  .navbar {
      margin-bottom: 0px;
      background-color: rgba(14, 172, 184, 0.8);
      border: none;
      font-size: 20px;
      border-radius: 0;
  }

.navbar li a, .navbar .navbar-brand {
    color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: gold !important;
    background-color: #fff !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}

  .affix ~ .container-fluid {
     position: relative;
     top: 50px;
  }
  #section1 {}
  #section2 {padding-top:50px;}
  #section3 {padding-top:50px;}
  #section41 {padding-top:50px;}
  #section42 {padding-top:50px;}





    .thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
   
}


    .mumu {
        display: block !important;
    margin: auto !important;
    
    }

@media  screen and (max-width:733px ) {
     .mumu {
        
    height : 100px;
         width: auto;
         
}


.mini2 {
    height: 300px !important;
        
    }

    
@media only screen and (max-width:733px ) {
     .mini2 {
        
    height : 100px !important;
         
}