/*--------------------------------------------------------------------------------------
Theme Name: EDUCROWN
Theme URI: http://quomodosoft.com
Author URI: http://quomodosoft.com
Description: 100% Responsive, Highly Customizable, SEO Friendly Education Based HTML5 template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: Mehedi Hasan Nahid
Author Email: mehedidb@gmail.com
Version: 1.0
----------------------------------------------------------------------------------------
    1. SLIDER AREA
    2. FEATURES AREA
    3. FUN FACT AREA
    4. TOVAR AERA
    5. VIDEO AREA
    6. TESTMONIAL AREA
    7. BLOG AREA
    8. FAQS AREA
    9. CONTACT AREA
    10. CLIENT AREA
    11. FOOTER AREA
    12. SCROLL TO TOP AREA
----------------------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700');

.stellarnav li {
    list-style: none;
    display: block;
    margin: 10px 0 10px 0;
    padding: 0;
    vertical-align: middle;
}
.stellarnav ul {
    margin: 30px 0 0 0;
}
.is-sticky .stellarnav ul {
    margin: 0;
}
ul#nav li a {
    padding: 10px 10px 10px 20px;
}

.is-sticky .stellarnav.dark .call-btn-mobile,.is-sticky .stellarnav.dark .close-menu,.is-sticky .stellarnav.dark .location-btn-mobile,.is-sticky .stellarnav.dark .menu-toggle {
    color: rgba(0,0,0,1);
}

.navbar-brand {
  transition: all 0.5s ease 0s;
  position:fixed;
  height:200px;
}
.navbar-brand > img {
    transition: all 0.5s ease 0s;
    // position:fixed;

}

.is-sticky .navbar-brand > img {
    width:80px;
    background:white;
    padding:5px;
    border-radius:0px 0px 7px 7px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
.is-sticky .stellarnav ul {
    margin: 0px 0 0 0;
}

@media only screen and (max-width: 767px) {
  .navbar-brand > img {
    //width:220px;
  }
}

/*--------------------------
    1. SLIDER AREA
-----------------------------*/

.slide-bg-one {
    background: rgba(0, 0, 0, 0) url("assest/img/slider/slide_3.jpg") no-repeat scroll center center / cover;
}

.slide-bg-two {
    background: rgba(0, 0, 0, 0) url("assest/img/slider/slide_2.jpg") no-repeat scroll center center / cover;
}

.slide-bg-three {
    background: rgba(0, 0, 0, 0) url("assest/img/slider/slide_1.jpg") no-repeat scroll center center / cover;
}

.welcome-slider-area .owl-controls {
    margin-top: -80px;
    position: absolute;
    right: 7%;
    top: 50%;
    opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.welcome-slider-area:hover .owl-controls {
    right: 10%;
    opacity: 1;
}

.welcome-slider-area .owl-nav > div {
    background: #d3ffea none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 0;
    color: #31dc89;
    font-size: 35px;
    height: 50px;
    margin: 10px 0;
    padding-top: 5px;
    right: 0;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 50px;
}

.welcome-slider-area .owl-nav > div:hover {
    background: #31dc89 none repeat scroll 0 0;
    color: #ffffff;
}

.welcome-text{
    margin-top:75px; 
    margin-left: 170px; 
    text-shadow: 1px 0 1px #555, 0 1px 1px #555, -1px 0 1px #555, 0 -1px 1px #555;
}
@media only screen and (max-width: 767px)
  .welcome-text {
      padding-top: 50px;
      margin-left: 0px; 
  }
}

/*--------------------------------
    2. FEATURES AREA
---------------------------------*/

.row.promo-content {
    background: #ffffff none repeat scroll 0 0;
    -webkit-box-shadow: 0 9px 9px 0 #c7c7c7;
    box-shadow: 0 9px 9px 0 #c7c7c7;
    margin-top: -140px;
    padding-top: 0px;
    position: relative;
    z-index: 1;
}

.features-box-icon {
    background: #d3ffea none repeat scroll 0 0;
    border-radius: 5px;
    color: #31dc89;
    height: 70px;
    margin-bottom: 40px;
    padding-top: 15px;
    text-align: center;
    width: 70px;
}

/*----------------------------------
    3. FUN FACT AREA
----------------------------------*/

.fun-fact-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assest/img/fact-bg.jpg") no-repeat scroll center center / cover;
}

.fun-fact-area .area-bg::after {
    background: #ffffff none repeat scroll 0 0;
    opacity: 0.6;
}

/*---------------------------------
    4. TOVAR AERA
-----------------------------------*/

.single-course {
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 8px #b7b7b7;
    box-shadow: 0px 0px 8px #b7b7b7;
    overflow: hidden;
}

a.enroll-button {
    background: #d3ffea none repeat scroll 0 0;
    border-radius: 50px;
    color: #0be27a;
    padding: 10px 15px;
    text-transform: capitalize;
}

a.enroll-button:hover {
    background: #171932 none repeat scroll 0 0;
    color: #ffffff;
}

.course-price {
    color: #0be27a;
    float: right;
    font-size: 22px;
    font-weight: 700;
}

.row.course-list1 {
    margin: 0;
}

.row.course-list1 .col-lg-3 {
    width: 100%;
    padding: 0;
}

.row.course-list2 {
    margin: 0;
}

.row.course-list2 .col-lg-3 {
    width: 100%;
    padding: 0;
}

.course-details {
    text-align: left;
}

/*--------------------------------
    5. VIDEO AREA
---------------------------------*/

.video-area .area-bg::before {
    background: #3ee792 none repeat scroll 0 0;
    opacity: 0.75;
}

.video-promo-details {
    border-radius: 10px;
}

.video-promo-content {
    color: #ffffff;
    left: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}

.video-area-popup {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 50%;
    color: #3ee792;
    cursor: pointer;
    display: inline-block;
    font-size: 30px;
    height: 70px;
    line-height: 1;
    padding-left: 5px;
    padding-top: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 70px;
}

.video-area-popup:hover {
    background: #3ee792 none repeat scroll 0 0;
    -webkit-box-shadow: 0 0 10px 10px #ffffff;
    box-shadow: 0 0 10px 10px #ffffff;
    color: #ffffff;
}

/*---------------------------------
    6. TESTMONIAL AREA
----------------------------------*/


.owl-nav > div {
    background: #3ee792 none repeat scroll 0 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    height: 40px;
    left: -30px;
    opacity: 0;
    padding-top: 4px;
    position: absolute;
    text-align: center;
    top: 30%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 40px;
}

.owl-nav > div.owl-next {
    left: auto;
    right: -30px;
}

.owl-nav > div:hover {
    background: #586082 none repeat scroll 0 0;
}


.author-content {
    line-height: 1.8;
    padding-top: 63px;
    position: relative;
}

.author-content::before {
    color: #3ee792;
    content: "\f10e";
    font-family: fontawesome;
    font-size: 41px;
    left: 0;
    line-height: 1;
    opacity: 0.5;
    position: absolute;
    top: 20px;
}

.author-img {
    border-radius: 50%;
    height: 80px;
    overflow: hidden;
    width: 80px;
}

.author-name-image h4 {
    margin-bottom: 0;
}

.testmonial-slider.owl-carousel {
    overflow: hidden;
}

.testmonial-area .owl-nav > div {
    background: #3ee792 none repeat scroll 0 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    height: 40px;
    left: -30px;
    opacity: 0;
    padding-top: 4px;
    position: absolute;
    text-align: center;
    top: 30%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 40px;
}

.testmonial-area .owl-nav > div.owl-next {
    left: auto;
    right: -30px;
}

.testmonial-area .owl-nav > div:hover {
    background: #586082 none repeat scroll 0 0;
}

.owl-carousel:hover .owl-nav > div.owl-next {
    opacity: 1;
    right: 0;
    visibility: visible;
}

.owl-carousel:hover .owl-nav > div.owl-prev {
    left: 0;
    opacity: 1;
    visibility: visible;
}

/*.testmonial-area .owl-controls {
    height: 20px;
    margin-top: 30px;
}*/

.testmonial-area .owl-dots {
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.testmonial-area .owl-dots > div {
    border: 1px solid #586082;
    border-radius: 50%;
    display: inline-block;
    height: 15px;
    margin: 0 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 15px;
}

.testmonial-area .owl-dots > div.active {
    background: #3ee792 none repeat scroll 0 0;
    border-color: #3ee792;
}


/*--------------------------------
    7. BLOG AREA
----------------------------------*/

.single-blog-item {
    border-radius: 10px;
    -webkit-box-shadow: 0 7px 7px #c7c7c7;
    box-shadow: 0 7px 7px #c7c7c7;
    overflow: hidden;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.blog-thumb {
    overflow: hidden;
}

.blog-thumb img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-blog:hover {
    -webkit-box-shadow: 0 0 20px #ddd;
    box-shadow: 0 0 20px #ddd;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.blog-details h3 {
    line-height: 1.3;
    margin-bottom: 25px;
}

.blog-meta a {
    opacity: .7;
    margin-right: 15px;
}

.blog-meta a:hover {
    opacity: 1;
}

.blog-details a.readmore {
    display: inline-block;
    letter-spacing: 1px;
}

.single-blog-item:hover .blog-thumb img {
    opacity: 0.5;
    -webkit-transform: scale(1.3) rotate(10deg);
    transform: scale(1.3) rotate(10deg);
}

/*--------------------------------
    8. FAQS AREA
---------------------------------*/

.faqs-area .box-title {
    font-size: 18px;
    letter-spacing: 0;
}

/*---------------------------------
    9. CONTACT AREA
----------------------------------*/

.contact-form input,
.contact-form textarea {
    border: 0 none;
    border-radius: 0;
    -webkit-box-shadow: 0 0 0 1px #cacfda;
    box-shadow: 0 0 0 1px #cacfda;
    margin-bottom: 30px;
    min-height: 50px;
    padding: 10px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    -webkit-box-shadow: 0 0 0 1px #3ee792;
    box-shadow: 0 0 0 1px #3ee792;
}

.contact-form button {
    background: #3ee792 none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50px;
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 13px 20px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form button:hover {
    background: #171932 none repeat scroll 0 0;
    color: #ffffff;
}

.enroll-button a {
    background: #31dc89 none repeat scroll 0 0;
    border-radius: 50px;
    color: #ffffff;
    display: inline-block;
    font-weight: 600;
    height: 50px;
    padding-top: 13px;
    text-align: center;
    width: 150px;
}

.enroll-button a:hover {
    background: #171932 none repeat scroll 0 0;
}

/*---------------------------------
    10. CLIENT AREA
---------------------------------*/

.client-area .owl-carousel .owl-item img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
}

/*---------------------------------
    11. FOOTER AREA
----------------------------------*/

.footer-list ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.footer-list ul li {
    display: block;
    margin-bottom: 20px;
}

.footer-list ul li a:hover {
    color: #31dc89;
}

.subscriber-form {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #dddddd;
    border-radius: 50px;
    font-size: 18px;
    height: 50px;
    position: relative;
    text-transform: capitalize;
}

.subscriber-form input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    border-radius: 5px;
    color: #000000;
    height: 100%;
    left: 0;
    letter-spacing: 1px;
    padding: 10px 10px 10px 30px;
    position: absolute;
    top: 0;
    width: 80%;
}

.subscriber-form button {
    background: #d3ffea none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0 50px 50px 0;
    color: #171932;
    font-size: 20px;
    height: 100%;
    letter-spacing: 2px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 80px;
}

.subscriber-form button:hover {
    background: #31dc89 none repeat scroll 0 0;
    color: #ffffff;
}

label.mt10 {
    bottom: -52px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

label.mt10.valid {
    bottom: 8px;
    color: #31dc89;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

.footer-bottom-area {
    background: #2e2e43 none repeat scroll 0 0;
}

.footer-copyright {
    padding: 8px 0 40px 0;
}

/*---------------------------------
    12. SCROLL TO TOP AREA
----------------------------------*/

.scrolltotop {
    background: #2b2f42 none repeat scroll 0 0;
    bottom: 20px;
    color: #ffffff;
    display: none;
    font-size: 20px;
    height: 40px;
    padding-top: 8px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
    z-index: 9;
}

.scrolltotop:hover {
    background: #3ee792;
    color: #ffffff;
}

.checkbox {
  vertical-align: top;
  margin: 0 3px 0 0;
  width: 17px;
  height: 17px;
}
.checkbox + label {
  cursor: pointer;
}

.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox:not(checked) + label {
  position: relative; 
  padding: 0 0 0 60px;
}

.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/*  */
.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s; 
}
/*  */
.checkbox:checked + label:before {
  background: #65cAFF;
}
/* ��� */
.checkbox:checked + label:after {
  left: 26px;
}
/*  */
.checkbox:focus + label:before {
  //box-shadow: 0 0 0 3px rgba(255,255,255,1);
}

.radio {
  vertical-align: top;
  width: 17px;
  height: 17px;
  margin: 0 3px 0 0;
}
.radio + label {
  cursor: pointer;
}
.radio:not(checked) {
  position: absolute;
  opacity: 0;
}
.radio:not(checked) + label {
  position: relative;
  padding: 0 0 0 35px;
}
.radio:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -2px;
  left: 1px;
  width: 22px;
  height: 22px;
  border: 1px solid #CDD1DA;
  border-radius: 50%;
  background: #FFF;
}
.radio:not(checked) + label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #65cAFF;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
  opacity: 0;
  transition: all .2s;
}
.radio:checked + label:after {
  opacity: 1;
}
.radio:focus + label:before {
  box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}



/* ===== Выдвигающаяся панель корзины Ver2.0 TRASH-PANEL ================ */

/*   Базовый контейнер выдвижной панели */
.trash-panel, .trash-panel1 {
  position: relative;
  width:100%;
  height:0;
  //max-height:80%;
  background:rgba(255,255,255,0);
  border:0px solid #777;
  padding:0px 6px 0px 6px;
  font-size:18px;
  z-index:9999;
  transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94);
  box-sizing: border-box;
}

/* Переключатель панели */
label.btn {
  position: relative;
  background:#0029a9;
  border:0px solid #777;
  min-width:unset;
  width:100%;
  height:37px;
  padding:5px 5px 5px 5px;
  border-radius:0;
  z-index: 10000;
        
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;

  transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  background: url(images/ardown.jpg) center;
}

/* Переключатель при наведении */
label.btn:hover {
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)
}

/* Стрелка переключателя вправо */
label.btn:after {
  content: '';
  font: normal 21px/1 Arial;
  text-decoration: inherit;
  color:white;
}

/* Активация панели */
.open:checked ~ .trash-panel {
  height: 750px;
  padding: 6px;
  background:rgba(245,245,245,1);
}
.open1:checked ~ .trash-panel1 {
  height: 560px;
  padding: 6px;
  background:rgba(255,240,240,1);
}

.open:checked ~ label.btn {
  height:37px;
  background:rgba(240,240,240,1);
  background: url(images/arup.jpg) center;
}

/* Смещение контейнера контента страницы */
.open:checked ~ .container333 {
    margin-top: 300px
}

/* Цвет переключателя при клике */
.open:checked + label.btn {
    
}

/* Стрелка переключателя влево */
.open:checked + label.btn:after {
 // content: 'ЗАКРЫТЬ КОРЗИНУ';
  font: normal 20px/1 Arial;
}

/* ===== Выдвигающаяся панель корзины Ver2.0 TRASH-PANEL OFF ================ */



    .qty {
        width: 50px !important;
        height: 33px !important;
        text-align: center !important;
        margin-left:2px;
        border:1px solid #777;
        border-radius:4px;
    }
    input.qtyplus { width:33px; height:33px; border-radius:4px; border:1px solid #777;}
    input.qtyminus { width:33px; height:33px; border-radius:4px; border:1px solid #777;}

    but, input[class=shop] {
        border: none !important;
        padding: 0;
        width: 50px;
        height: 34px;
        cursor:pointer;
        background: url('images/trash.png') no-repeat 0 0;
        vertical-align: bottom;
    }


    /* Индикатор загрузки, который показывается до загрузки карты */
    .loader {
      position: absolute;
      z-index: 15;
      top: -100%;
      left: 0;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: hidden;
      color: #000000;
      transition: opacity .7s ease;
      opacity: 0;
      background-color: rgba(0,0,0,.55);
    }
     
    .loader:after,
    .loader:before {
      box-sizing: border-box;
    }
     
    .loader.is-active {
      top: 0;
      opacity: 1;
    }
     
    .loader-default:after {
      position: absolute;
      top: calc(50% - 24px);
      left: calc(50% - 24px);
      width: 48px;
      height: 48px;
      content: '';
      animation: rotation 1s linear infinite;
      border: solid 8px #ffffff;
      border-left-color: transparent;
      border-radius: 50%;
    }
     
    @keyframes rotation {
      from {
        transform: rotate(0);
      }
      to {
        transform: rotate(359deg);
      }
    }
     
    @keyframes blink {
      from {
        opacity: .5;
      }
      to {
        opacity: 1;
      }
    }





.product-item {
  width: 33.3333333333%;
  position: relative;
  margin: 0 auto;
  float:left;
  padding: 20px 20px 20px 20px;
  border-radius: 2px;
  transition:.4s linear
}
.product-item:hover {
  box-shadow: 1px 1px 2px rgba(0,0,0,.1), -1px -1px 2px rgba(0,0,0,.1)
}
.product-img {
  overflow: hidden;
}
.product-img img {
  display: block;
  width: auto;
  max-height: 100%;
  margin: 0 auto;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}
.product-item:hover img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
@media only screen and (max-width: 720px) {
  .product-item {
    width: 100%;
  }
}

.service-item {
    display: inline-block;
    max-height: 370px;
    position: relative;
    color: #000 !important;
    width: 100%;
}

.service-item-text-up {
    top: 0;
    position: absolute;
    text-align: left;
    width: 100%;
}
.service-item-text-up > h4 {
    font-size: 20px;
    color:#ff7f00;
    text-transform: uppercase;
    padding:10px 10px 10px 20px;
}

.service-item-text {
    background-color: rgba(255, 255, 255, 0.7);
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.service-item-text > h4 {
    font-size: 28px;
    text-transform: uppercase;
    margin:10px 10px 0px 10px;
}
.service-item-text > p {
    margin:0px 10px 10px 10px;
    font-size: 18px;
}
@media only screen and (max-width: 1200px) {
  .service-item-text > h4 {
      font-size: 20px;
  }
  .service-item-text-up > h4 {
      font-size: 17px;
  }
}
@media only screen and (max-width: 900px) {
  .service-item-text > h4 {
      font-size: 12px;
  }
  .service-item-text-up > h4 {
      font-size: 16px;
  }
}
.single-testmonial{
//  max-height:300px;
}




.apemes-nakuvd {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 9999;
  overflow: auto;
  position: fixed;
  visibility: hidden;
  background: rgba(14, 14, 14, 0.8);
  margin-top: -100%;
  transition: all .3s ease-in-out;
}
  .postavu-poseredine {
  width: 70%;
  max-width: 70%;
  background: #fff;
  margin: 70px auto;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  }

  .vupsob-modala{
    padding: 25px;
    text-align: center;
    color:#444444;
  }
  .vupsob-modala h4{
    font-size: 2em;
  }

  @media screen and (max-width: 769px) {
    .apemes-nakuvd{
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    }
    .vupsob-modala h4{
      font-size: 2em;
    }
  }
.apemes-nakuvd:target {
  opacity: 1;
  margin-top: 0px;
  visibility: visible;  
  }

  #advekasuneg {
  text-align: center;
  }

#advekasuneg a {
  padding: 15px 10px;
  font-size: 18px;
  text-decoration: none;
  color: #f9f5f5;
  border: 1px solid #fbf7f7;
  border-radius: 6px;
  width: 185px;
  height: 18px;
  margin: auto;
  position: absolute;
  top: 75px;
  left: 0;
  bottom: 0;
  right: 0;
  }

  #advekasuneg a:hover{
  opacity:.7;
  }

.artimage{
  margin:20px auto;
  max-width:100%;
  max-height:500px;
}



.art_list {	
  padding: 0px;
  // border: 1px solid #dfdfdf;
  // border-left: 2px solid #61A2DF;
}
.art_main_head {
  padding: 10px 20px;
  position: relative;
  margin:0px !important;
  font-weight:bold;
}
.art_head {
  background: #ddd;
  font-size: 20px;
  color: black;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 10px 10px 190px;
  cursor:pointer;
  position: relative;
  margin:50px 0 !important;
  font-weight:bold;
  text-align:left;
  height:60px;
  line-height:40px;
}
.art_head img{
  height:100px; 
  position:absolute; 
  top:-20px; 
  left:10px; 
  border-radius:5px;
}
.art_head:hover {
  color:green;
}
.art_body {
  display:none;
  padding: 5px;
  margin:20px 0;
  text-align:justify;
}
.art_body a{
}
.art_body a:hover{
  text-decoration:none !important;
}
@media only screen and (max-width: 600px) {
  .art_head {
    font-size: 14px;
    line-height: 20px;
    height:auto;
  }
}



/* Видеоплеер модальное окно */

/** стили фона затемнения **/
.overlay {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 10000;
   visibility: hidden;
/* фон затемнения */
   background-color: rgba(0, 0, 0, 0.8);
   opacity: 0;
   position: fixed; /* фиксированное позиционирование */
/* трансформация прозрачности при открытии  */
   -webkit-transition: opacity .5s;
   -moz-transition: opacity .5s;
   -ms-transition: opacity .5s;
   -o-transition: opacity .5s;
   transition: opacity .5s;
}
/* активируем при клике */
.overlay:target {
   visibility: visible;
   opacity: 1;
}
/** стили модального блока */
.modal {
   top: 0px;
   right: 0;
   left: 0;
   bottom: unset;
   z-index: 10001;
/** полная прозрачность изначально */
   opacity: 0;
   display: block;
   visibility: hidden;
   position: fixed;
/* трансформация прозрачности при открытии  */
   -webkit-transition: opacity 500ms ease-in;
   -moz-transition: opacity 500ms ease-in;
   transition: opacity 500ms ease-in; 
   margin: 0 auto;
   padding: 24px;
   min-width: 320px;
   max-width: 1024px;
   width: 100%;
   border: 1px solid rgba(120,120,120,.7);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   background: rgba(60, 63, 65, 0.9); 
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
   -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
   -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
   box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
}
/* активируем при клике */
.overlay:target+.modal{
   top: 2%;
   visibility: visible;
   opacity: 1;
}
/* планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.modal {
    width: 95%;
  }
}
/* смарт */
@media only screen and (min-width: 459px) and (max-width: 767px) {
.modal {
    width:85%;  
  }
}
/* кнопка закрытия */
.close {
   position: absolute;
   width: 30px;
   height: 30px;
   right: 8px;
   top: 8px;
   z-index: 999999;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   line-height: 26px;
}
@media (max-width: 530px) {
.close {
   top: 6px;
  }
}
.close:after {
   content: 'X';
   display:block;
   width: 30px;
   height: 30px;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   border: 2px solid #fff;
   -moz-transition: all 0.6s;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
   -moz-transform: scale(0.85);
   -ms-transform: scale(0.85);
   -webkit-transform: scale(0.85);
   transform: scale(0.85);
}
 
.close:hover:after {
   transform: scale(1);
}
/* блок заголовка видео */
.video__title {
   height: auto;
   width: 70%;
   padding: 0px 5px 15px 5px;
   color: white;
   font: normal 16px/22px 'Open Sans', Calibri, Arial, sans-serif;
   text-align:left;
}
@media (max-width: 530px) {
.video__title {
   height: 38px;
   font-size: 12px;
   line-height: 18px;
  }
}
/* адаптивный блок видео */
.video { 
   position: relative; 
   padding-bottom: 56.25%; 
   height: 0; 
   overflow:hidden; 
} 
.video iframe, 
.video object, 
.video embed {
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%;
   height: 100%; 
}
/* - видеопллер конец - */


/* COOK */
#cookie_note{
    display: none;
    position: fixed;
    bottom: 100px;
    left: 50%;
    width: 90%;
    font-size:18px;
    line-height:18px;
    transform: translateX(-50%);
    padding: 20px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
    z-index:9;
}

#cookie_note p{
    margin: 0;
    font-size: 0.8em;
    text-align: left;
    color: black;
    width: 80%;
    float:left;
}

.cookie_accept{
    width: 10%;
    float:right;
}
@media (min-width: 576px){
    #cookie_note.show{
        display: flex;
    }
}

@media (max-width: 960px){
#cookie_note p{
    width: 100%;
    float:none;
}

.cookie_accept{
    float:none;
    width: 100%;
    margin:8px auto;
}
}

@media (max-width: 575px){
    #cookie_note.show{
        display: block;
        text-align: left;
    }
}

/* COOK OFF */