@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300..900&display=swap');
:root {
    --anarenk: #000;
    --menu-li-a: #000;
    --menu-ul-bgrenk: #555;
    --menu-li-hover-bg: #000;
    --menu-ul-li-a-bgrenk: #000;
}


* {  text-decoration: none; }

.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after{
    content: " ";
    display: table;
}


*, ::before, ::after {
    box-sizing: border-box;
}

body {
 /* font-family:'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 */
 color : var(--anarenk);
 margin:0;
 padding: 0;
font-family: 'Red Hat Display', sans-serif;
 font-size: 16px;
 font-weight: 400;
 line-height: 1.5;
 }



 img {
     vertical-align: middle;
     border-style: none;
     max-width: 100%;
     height: auto;
 }

  .imgref:hover { cursor: zoom-in; }




 a {
   color: var(--anarenk);
   text-decoration: none;
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
 }


 .h1,h1 {
  font-size:2rem
 }
 .h2,h2 {
  font-size:1.75rem;
 }
 .h3,h3 {
  font-size:1.50rem
 }
 .h4,h4 {
  font-size:1.23rem
 }
 .h5,h5 {
  font-size:1rem
 }
 .h6,h6 {
  font-size:0.75rem
 }


 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
     margin-bottom: .5rem;
     font-family: inherit;
     font-weight: bold;
     line-height: 1.2;
     color: inherit;
 }

.fw-100 { font-weight: 100; }
.fw-900 { font-weight: 900; }






#logo { width: 90%;   padding: 10px 30px; }


 @media (min-width:576px) {



 }


 @media (min-width:768px) {


 }


 @media (min-width:992px) {

 }



 @media (min-width:1200px) {

 }







.fixed-header {
  margin: 0;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  width: 100%;

}

 .menu { float:right; }
 .menu-mobile {
     display: none;
 }

 .menu-dropdown-icon:before {
   font-family: FontAwesome;
     content: '\f103';
     display: none;
     cursor: pointer;
     float: right;
     padding: 1.5em 2em;
 }
 .menu > ul {
     list-style: none;
     padding: 0;
     margin:0;
     position: relative;
     /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
     box-sizing: border-box;
 }
 .menu > ul > li {
     float: left;
     padding: 0;
     margin: 0;
 }

 .menu > ul > li > a {
   display: block;
 padding:10px 15px;
color:#000;
 }

 .menu > ul > li:hover {
background: #0098da;
border-radius: 20px;
color:#fff;
 }

 .menu > ul > li:hover a {
color:#fff;
 }





 .menu > ul > li > a {

 	transition: all 0.3s;
 	position: relative;
 }

 .menu > ul > li > a::before {
 	content: '';
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	z-index: 1;
 	opacity: 0;
 	transition: all 0.3s;
 	border-top-width: 1px;
 	border-bottom-width: 1px;
 	border-top-style: solid;
 	border-bottom-style: solid;
 	border-top-color: #fff;
 	border-bottom-color: #fff;
 	transform: scale(0.1, 1);
 }

 .menu > ul > li > a:hover::before {
 	opacity: 1;
 	transform: scale(1, 1);
  letter-spacing: 2px;
 }
 .menu > ul > li > a::after {
 	content: '';
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	z-index: 1;
 	transition: all 0.3s;
 }
 .menu > ul > li > a:hover::after {
 	opacity: 0;
 	transform: scale(0.1, 1);
 }







 .menu > ul > li > ul {
     display: none;

     background: #0098da;

    border-radius:10px;
    -webkit-box-shadow: 0 10px 20px 0 rgba(5, 16, 44, .15);
    box-shadow: 0 10px 20px 0 rgba(5, 16, 44, .15);
    overflow: hidden;
     padding:0;
     position: absolute;
     z-index: 99;
     left: 0;
     margin: 0;
     list-style: none;
     box-sizing: border-box;
 }


 .menu > ul > li > ul > li {
     margin: 0;
     padding-bottom: 0;
     list-style: none;
     width: 25%;
     background: none;
     float: left;
 }

 .menu > ul > li > ul > li a {

     padding:5px 10px 5px 20px;
     width: 100%;
     display: block;
     border-bottom: 1px solid #05344d;
 color:#fff;
 }
 .menu > ul > li > ul > li a:hover {
 	background:#fff;
  color:#063c58;
 }

 .menu > ul > li > ul > li > ul {
     display: block;
     padding: 0;
     margin:0;
     list-style: none;
     box-sizing: border-box;
 }

 .menu > ul > li > ul > li > ul > li {
     float: left;
     width: 100%;
     margin: 0;
     font-size: 14px;
 }

 .menu > ul > li > ul > li > ul > li a {
 		font-size: 14px;
     font-weight: 100;

 }

 .menu > ul > li > ul.normal-sub {
     width: 250px;
     left: auto;
     padding: 0px;
 }

 .menu > ul > li > ul.normal-sub > li {
     width: 100%;
 }

 @media only screen and (max-width: 959px) {

     .menu-mobile {
         display: block;
 		width:40px;
 		float:right;
        margin-right: 10px;
     }

     .menu-mobile:after {
         content: "≡";
         font-size: 50px;
         padding: 10px;
         color:#000;
     }

     .menu-dropdown-icon:before {
         display: block;
     }
     .menu > ul {
         display: none;
     }
     .menu > ul > li {
         width: 100%;
         float: none;
         display: inline-block;
     }
     .menu > ul > li a {
         padding: 1.5em;
         width: 100%;
         display: block;
     }
     .menu > ul > li > ul {
         position: relative;
     }
     .menu > ul > li > ul.normal-sub {
         width: 100%;
     }
     .menu > ul > li > ul > li {
         float: none;
         width: 100%;
     }
     .menu > ul > li > ul > li:first-child {
         margin: 0;
     }
     .menu > ul > li > ul > li > ul {
         position: relative;
     }
     .menu > ul > li > ul > li > ul > li {
         float: none;
     }
     .menu .show-on-mobile {
         display: block;
     }
 }







 @media (max-width: 575.98px) {


     #logo {  width: 70% !important; float:left; padding:0 !important;  }



   }




#nelervar p { 

  border-bottom:1px solid #eee;
  padding-bottom:10px;

}

.butonbir {    padding: 10px 20px;
    border: 1px solid #ddd;
    display: inline-block;
    margin-top: 20px;
    border-radius: 15px; }




 .pagination {
 	text-align: center;
 	padding-top: 20px;
 	line-height: 30px
 }

 .pagination ul {
 	display: inline-block
 }

 .pagination ul li {
 	float: left;
 	margin: 0 5px;
  list-style-type:none;
 }

 .pagination ul li a {
 	display: block;
 	padding: 0 15px;
 	line-height: 35px;
 	border-radius: 2px;
 	background: #eee;
 	background: rgba(0, 0, 0, 0.05);
 	font-weight: 400;
 	color: #222
 }

 .pagination ul li a:hover {
 	background: rgba(0, 0, 0, 0.1)
 }

 .pagination ul li.active a {
 	background-color: #32373c;
 	color: #fff
 }







   header {
     width:100%;
   height: 205px;
       margin-bottom: -120px;
     bottom:0px;
     rotate:-180deg;
     z-index: 0;
     position: relative;
   }

 @media only screen and (max-width: 959px) {
  header {
    width:100vw;
  height: 50px !important;
    margin-bottom: 0px !important;
    bottom:0px
  }

 }



   header div {
     background-color:#0098da;
     margin: -5px 0px 0px 0px;
     padding:0px;
     color: #fff;
     text-align:center;
   }





     footer {
       width:100%;
     height: 205px;
       bottom:0px
     }

  @media only screen and (max-width: 959px) {
    footer {
      width:100vw;
    height: 50px !important;
      bottom:0px
    }

  }



     footer div {
       background-color:#0098da;
       margin: -5px 0px 0px 0px;
       padding:0px;
       color: #fff;
       text-align:center;
     }
     svg {
       width:100%;
     }


     .wave {
       animation: wave 6s linear;
       animation-iteration-count:infinite;
       fill: #0098da;
     }
     .drop {
       fill: transparent;
       animation: drop 10s ease infinite normal;
       stroke: #0098da;
       stroke-width:0.5;
       opacity:.6;
       transform: translateY(80%);
     }
     .drop1 {
       transform-origin: 20px 3px;
     }
     .drop2 {
       animation-delay: 6s;
       animation-duration:3s;
       transform-origin: 25px 3px;
     }
     .drop3 {
       animation-delay: -4s;
       animation-duration:3.4s;
       transform-origin: 16px 3px;
     }
     .gooeff {
       	filter: url(#goo);
     }
     #wave2 {
       animation-duration:10s;
       animation-direction: reverse;
       opacity: .6
     }
     #wave3 {
       animation-duration: 14s;
       opacity:.3;
     }
     @keyframes drop {
       0% {
         transform: translateY(80%);
         opacity:.6;
       }
       80% {
         transform: translateY(80%);
         opacity:.6;
       }
       90% {
         transform: translateY(10%) ;
         opacity:.6;
       }
       100% {
         transform: translateY(0%) scale(1.5);
         stroke-width:0.2;
         opacity:0;
       }
     }
     @keyframes wave {
       to {transform: translateX(-100%);}
     }
     @keyframes ball {
       to {transform: translateY(20%);}
     }





 .inner-box {
   color: #666;
    position: relative;
    overflow: hidden;
    padding: 75px 15px 75px;
    background-color: #ffffff;
    -webkit-transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    transition: all 900ms ease;
    -webkit-box-shadow: 0px 20px 35px rgba(0,0,0,.1);
    -moz-box-shadow: 0px 20px 35px rgba(0,0,0,.1);
    -ms-box-shadow: 0px 20px 35px rgba(0,0,0,.1);
    -o-box-shadow: 0px 20px 35px rgba(0,0,0,.1);
    box-shadow: 0px 20px 35px rgba(0,0,0,.1);
}
.inner-box:hover {


  background: linear-gradient(45deg, hsla(262, 98%, 41%, 1) 0%, hsla(262, 98%, 41%, 0) 70%), linear-gradient(135deg, hsla(304, 98%, 50%, 1) 10%, hsla(304, 98%, 50%, 0) 80%), linear-gradient(225deg, hsla(274, 97%, 41%, 1) 10%, hsla(274, 97%, 41%, 0) 80%), linear-gradient(315deg, hsla(261, 92%, 41%, 1) 100%, hsla(261, 92%, 41%, 0) 70%);
color:#fff;

  -webkit-transition: all 900ms ease;
  -moz-transition: all 900ms ease;
  -ms-transition: all 900ms ease;
  -o-transition: all 900ms ease;
  transition: all 900ms ease;
  -webkit-box-shadow: 0px 20px 35px rgba(0,0,0,.3);
  -moz-box-shadow: 0px 20px 35px rgba(0,0,0,.3);
  -ms-box-shadow: 0px 20px 35px rgba(0,0,0,.3);
  -o-box-shadow: 0px 20px 35px rgba(0,0,0,.3);
  box-shadow: 0px 20px 35px rgba(0,0,0,.3);

}


 .box-ref {
    position: relative;
    overflow: hidden;

    background-color: #ffffff;
    -webkit-transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
    transition: all 900ms ease;
    -webkit-box-shadow: 0px 20px 35px rgba(0,0,0,.1);
    -moz-box-shadow: 0px 20px 35px rgba(0,0,0,.1);
    -ms-box-shadow: 0px 20px 35px rgba(0,0,0,.1);
    -o-box-shadow: 0px 20px 35px rgba(0,0,0,.1);
    box-shadow: 0px 20px 35px rgba(0,0,0,.1);
}





.breadcrumbs { color:#fff;  font-size:12px; }
.breadcrumbs a { color:#fff; padding: 5px;  display: inline-block; }