/* 
Theme Name:    Web Romandie
Theme URI:     http://web-romandie.ch
Description:   wp bootstrap starter child is a child theme of WP Bootstrap Starter
Author:      Web romandie
Author URI:    http://web-romandie.ch
Template:    wp-bootstrap-starter
Version:     1.0.0
Text Domain:   wp-bootstrap-starter-child
*/


/*--------------------------------------------------------------
0.0 FONT
--------------------------------------------------------------*/

  @import url('https://fonts.googleapis.com/css?family=Raleway');
  @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,600,700,700i');



/*--------------------------------------------------------------
0.1 GENERAL
--------------------------------------------------------------*/
  .displaynone {display: none !important;}

  body{

    font-family: 'Open Sans', sans-serif;

  }

  a {

    color: #94182a;

  }

   a:hover {

    color: #94182a;

  }

   h2 {
    font-weight: 600;
   }

  h2, h3 {

    text-transform: uppercase;

  }

  #content.site-content {

    padding-bottom: 0;

  }

  .container-fluid {

    /*padding-left: 0;*/
    /*padding-right: 0;*/

  }

  .container-fluid .col-sm-12 {
    padding-left: 0;
    padding-right:0;
  }

  .vce {

    margin-bottom: 0px !important;

  }

/*--------------------------------------------------------------
0.2 MENU/HEADER
--------------------------------------------------------------*/

  .header-top {

    background: #94182a;

  }

  header#masthead {

    background: #fff;

  }


  body:not(.theme-preset-active) #masthead .navbar-nav > li > a {

    color: #000;
    text-transform: uppercase;
    font-weight:600;

  }

  body:not(.theme-preset-active) #masthead .navbar-nav > li, 
  body:not(.theme-preset-active) #masthead .navbar-nav > li.current_page_item {

    padding: 0.5rem;

  }
  body:not(.theme-preset-active) #masthead .navbar-nav > li > a,
  body:not(.theme-preset-active) #masthead .navbar-nav > li > a:hover, 
  body:not(.theme-preset-active) #masthead .navbar-nav > li.current_page_item > a {

    padding: 0;

  }

  body:not(.theme-preset-active) #masthead .navbar-nav > li > a:hover, 
  body:not(.theme-preset-active) #masthead .navbar-nav > li.current_page_item > a,
  li.current_page_parent a {

    color: #94182a !important;
    border-bottom: 3px solid #94182a;

  }

/* ICON CARD */

 /* [class^="xoo-wsc-icon-"], 
  [class*=" xoo-wsc-icon-"] {

      font-family: FontAwesome !important;

    }*/

  .xoo-wsc-basket {

    background-color: transparent;
    box-shadow: none;
  }

  .xoo-wsc-bki {

    color: #fff;

  }

  .xoo-wsc-icon-basket1:before {

    content: "\f07a" !important;
    font-family: FontAwesome !important;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;

    }




/*--------------------------------------------------------------
0.3 PAGES
--------------------------------------------------------------*/

   .section {

      padding: 80px 0;

    }

   .vce-row.container {

      margin: 0 auto;

    }



  @media (min-width: 768px){
    .vce-feature-section-content-container {
        padding: 30px !important;
        max-width: 603px !important;
        width: auto !important;
        margin: 0 auto !important;
    }
  }

  .home #page-sub-header {

    text-align: left;
    color: #fff;
    padding-bottom:10rem;
    padding-top: 10rem;
    background-position: left center !important;

  }

  .home #page-sub-header p{

    margin: 0 0;
    font-size: 15px;
    width: 33rem;
  
    line-height: 1.8;


  }

  body:not(.theme-preset-active) #page-sub-header h1 {

    color: #555555;
    font-weight: 300;
    line-height: 1.2;

  }

  #page-sub-header h1 span { color: red; font-weight: bold; }


  .home #section3 {

    background: #94182a;
    color: #fff;

  } 



  .home #section3 a.vce-button--style-basic.vce-button--style-basic--color-557cbf--fff, 
  .home #section3 button.vce-button--style-basic.vce-button--style-basic--color-557cbf--fff {

    background: #fff !important;
    color:#94182a;

  }

  .home #section3 a.vce-button--style-basic.vce-button--style-basic--color-557cbf--fff:hover, 
  .home #section3 button.vce-button--style-basic.vce-button--style-basic--color-557cbf--fff:hover {

    background: #8f141e !important;
    color:#fff;

  }

/*  .home #section4 p{

    color: #b2aea5;
    font-style: italic;

  } */


  .home #quotes h2 {

    background: #fff;
    color: #94182a;
    font-size: 80px;
    width: 70px;
    height: 70px;
    padding: 4px 7px 0px 3px;
    border-radius: 50%;
    margin: 0px auto 50px auto;
    font-weight: 700;
    font-style: italic;

  }

  .home .author_quotes,
  .home .author_quotes p {

    position: relative;
    color: #000 !important;

  }

  .home .author_quotes .vce-text-block-wrapper {

    position: absolute;
    right: 0

  }

  .home .author_quotes p:before {

    content: "";
    background: #fff;
    height: 4px;
    width: 50px;
    position: absolute;
    top: 10px;
    left: -70px;

  }

  .home #section5 {

    background: #efeae7;

  }


  .home .query-articles .query-row {

    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;

  }

  .home  h2 {
    margin-bottom:-6px;
    padding-bottom:0 ;
   }

  .home .query-articles .query-row:last-child {

    border-bottom:0;

  }

  .home .query-field-featured_image img{

    width: 100%;

  }

  .home .query-field-post_title {

    text-transform: uppercase;
    font-weight:700;
    text-align:center;
    margin: 20px 0 10px;

  }

  .home .query-field-post_excerpt {

      text-align: center;

  }

  .home .query-field-post_date {

    font-style: italic;
    text-align: center;
    margin-bottom: 10px;

  }

  .home ul.rss-aggregator {

    padding-left: 0;

  }

  .home .rss-aggregator li {

    list-style: none;
    border-bottom: 1px solid #000;
    padding: 20px 0 20px 0;

  }

  .home .rss-aggregator li:last-child {

      border-bottom: 0;

  }

  .home .feed-date {

    font-style: italic;
    font-size: 12px;

  }


    .page-template-default #content.site-content {

      padding: 0px 0;

    }

    .page-template-default label {

      width: 100%;
      margin-bottom: 0;


    }

    .page-template-default section.content-area input[type="submit"] {

      margin-top: 20px;

    }

    .page-template-default .form-control {

        border-radius: 0 ;
    }

    .pointdeventeblock a {

      color:#000;
    }

    .pointdeventeblock a:hover {

      color:#fff;

    }

    .list-article {

      margin-bottom: 50px;

    }
.list-article .col-sm-6{
	height:350px;
	overflow: hidden;
	
}

    .content-article {

      margin-left: -120px;
      background: #fff;
      margin: 40px 0 40px -120px;
      padding: 40px;

    }

    .entry-meta {

      font-size: 12px;

    }

    .single-post #comments {

      background: #efeae7;
      padding: 50px; 

    }

    .single-post .entry-meta {

      margin-bottom:20px;

    }

    .post-navigation {

      margin-bottom: 80px;

    }

    .post-navigation .nav-previous a, 
    .post-navigation .nav-next a {

      background: #94182a;
      color:#fff;
      border: none;
      border-radius: 0;
      border-left: 1px solid #fff;

    }

    .post-navigation .nav-previous a:hover, 
    .post-navigation .nav-next a:hover {

      background: #bb461e;

    }

    .comment-list .card,
    #commentform .form-control {

      border-radius: 0 !important;

    }

    #commentform label {

      width: 40%;

    }


    /* WOOCOMERCE */

    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {

      width: 33.33333333%;
      margin-left: 0;
      background: #94182a;
      padding: 50px;
      min-height: 520px;
      /*border-right: 50px solid #fff;*/
      margin: 50px 0 0 0;
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      transition: all 0.6s ease;

    }


    .woocommerce ul.products li.product:hover, 
    .woocommerce-page ul.products li.product:hover{

      background: #8f141e;

    } 

    h2.woocommerce-loop-product__title {

        margin-top: 20px !important;

    }

   /* .productContent {

        padding: 0 25px;

    }
*/
    .woocommerce.columns-1 ul.products li.product:last-child, 
    .woocommerce-page.columns-1 ul.products li.product:last-child {

      border-right: 0;

    }

    /*.auteurs-externes .woocommerce ul.products li.product, 
     .woocommerce-page .auteurs-externes ul.products li.product,
     li.product.product_cat-auteurs-externes {

      background: #eae1d1 !important;

    }*/

    .auteurs-interne-title {

      padding: 5px 50px;
      background: #94182a;
      width: 93.5%;

    }

    .woocommerce-page.columns-2 ul.products li.product, 
    .woocommerce.columns-2 ul.products li.product {

      width: 50%

    }

    .auteurs-interne-title p,
    .auteurs-externes-title p {

        margin-bottom:0;

    }


    .auteurs-externes-title {

      padding:5px 50px;
      background: #eae1d1;
      width: 87%;

    }



    .auteurs-externes-title p {

      margin:0;

    }

    

    .woocommerce .woocommerce-ordering select {

      display: none;

    }

    .woocommerce ul.products li.product .button {
		position: absolute;
		left:0px;
		bottom:0px;
      margin-top: 1em;
      width: 100%;
      background: #74121f;
      border-radius: 0;
      color: #fff;
      text-transform: uppercase;
      text-align: center;
      padding: 20px 0;
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      transition: all 0.6s ease;

  }

   .woocommerce a.button {

      font-size: 13px;

   }

  .woocommerce ul.products li.product .button:hover {

    background: #94182a;
    color: #fff;

  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .price {

    text-align: center;
    text-transform: uppercase;
    color: #fff;

  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title:hover,
  .woocommerce div.product p.price, 
  .woocommerce div.product span.price,
  .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {

    color:#94182a;

  }

   .woocommerce ul.products li.product .price {

    font-weight: 700;

   }

   .woocommerce ul.products li.product a img {

      width:70%;
      margin: 0 auto;

   }

   .woocommerce #respond input#submit.alt, 
   .woocommerce a.button.alt, 
   .woocommerce button.button.alt, 
   .woocommerce input.button.alt {

    background: #94182a;
    border-radius: 0;


   }

   .woocommerce #respond input#submit.alt:hover, 
   .woocommerce a.button.alt:hover, 
   .woocommerce button.button.alt:hover, 
   .woocommerce input.button.alt:hover {

    background: #bb461e;
  
   }

   .woocommerce div.product .woocommerce-tabs ul.tabs li.active {

    background: #efeae7;
    border-bottom-color: #efeae7;
   }

   .woocommerce div.product .woocommerce-tabs .panel {

      background: #efeae7;
      padding: 50px;
      border-left: 1px solid #d3ced2;
      border-right: 1px solid #d3ced2;
      border-bottom: 1px solid #d3ced2;

   }
   .woocommerce div.product .woocommerce-tabs ul.tabs {

      margin:0;

   }

   .woocommerce div.product .woocommerce-tabs ul.tabs li{

      border-radius: 0;
      margin: 0 -1px
   }

   .woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
   .woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
   .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
   .woocommerce div.product .woocommerce-tabs ul.tabs li::after { 

      display: none;

   }

   .woocommerce div.product .woocommerce-tabs ul.tabs li {

    background: transparent;

   }

   .woocommerce div.product .woocommerce-tabs ul.tabs li a {

      color:#000;

   }

   .woocommerce #respond input#submit, 
   .woocommerce a.button, 
   .woocommerce button.button, 
   .woocommerce input.button {

      background: #94182a;
      border-radius: 0;
      color: #fff;

   }

   .woocommerce #respond input#submit:hover, 
   .woocommerce a.button:hover, 
   .woocommerce button.button:hover, 
   .woocommerce input.button:hover {

      background: #bb461e;
      color: #fff;  
    
    }

    .woocommerce #review_form #respond {

        padding: 0 50px;

    }

    .woocommerce-Reviews p.meta {

      color:#94182a !important;

    }

    .woocommerce #reviews #comments ol.commentlist li .comment-text {

      margin: 0 0 0 0px;
      border: 1px solid #94182a;
      border-radius: 0px;
      padding: 1em 1em 0;
    }

    .woocommerce #reviews #comments ol.commentlist {

      margin: 0 0 0 -40px;

    }

     #section2 .product-home li.product,
	 .products li.product {

      margin:20px 14px !important;
    }

	#section2 .product-home li.product:hover,
	 .products li.product:hover {

      border:10px solid #74121f;
		padding:0px;
    }

 	#section2 .product-home li.product .add_to_cart_button,
	 .products li.product .add_to_cart_button{
      display:none;
    }
	#section2 .product-home li.product:hover .add_to_cart_button,
.products  li.product:hover .add_to_cart_button{
      	display:block;
		
    }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
	width: 30.75%;
	padding-bottom:0px;
}


  
/*--------------------------------------------------------------
0.4 FOOTER
--------------------------------------------------------------*/

  #footer-widget {

    background: #92192c !important;
    padding: 30px 0; 
	  color:#fff;

  }

  footer p,
  footer a {

    color: #fff;
    margin-bottom: 0;
    font-size: 12px;

  }
#subscribe-blog-blog_subscription-2 #subscribe-text{
	float:left;
	width:50%;
}
/*#subscribe-blog-blog_subscription-2 > p{
	float:left;
	width:50%;
}
#subscribe-blog-blog_subscription-2 > p{
	clear:left;
	width:50%;
	float:left;
}*/
  #subscribe-blog-blog_subscription-2 input[type=submit]{

    background:#741423 !important;
    color:#fff;
    border:2px solid #741423;

  }
   #subscribe-blog-blog_subscription-2 input[type=submit]:hover{

    background: #a71d33 !important;
    border:2px solid #a71d33;

  }



#subscribe-blog-blog_subscription-2 input[type=submit],
#subscribe-blog-blog_subscription-2  #subscribe-email,
#subscribe-submit{
	float:left;
}

#subscribe-submit {

  width: 100px;
}

  #subscribe-blog-blog_subscription-2  #subscribe-email {

    margin-left:20px;

  }


#subscribe-blog-blog_subscription-2  #subscribe-email,
#subscribe-blog-blog_subscription-2  #subscribe-submit{
	clear:none;
}

  #subscribe-blog-blog_subscription-2  #subscribe-email input{

    border:1px solid #fff;
    background:none;
    padding:10px;
    color:#fff;


  }


  #subscribe-blog-blog_subscription-2  #subscribe-email input::placeholder { 
    color: #fff;
    opacity: 1; /* Firefox */
  }

  h3.widget-title {

        font-size: 0.9rem;

  }
#custom_html-3 h3 {

margin-bottom:20px;
}
#custom_html-3 i{
	color:#fff;
	font-size:1.5em;
	margin-right:10px;
}

#blog_subscription-2{
	display: table;
	border-right:1px solid #fff;
	padding-right:40px;
	margin:0px;
	width:100%;
}
#custom_html-3{
	padding-left:40px;
	
}
.site-footer {
	text-transform: uppercase;
	text-align: center;
}
input[type=submit]{
	background:#8f141e !important;
	box-shadow: none;

	color:#fff;
	text-transform: uppercase;
		padding:10px;
	border:1px solid #fff;
}
/*--------------------------------------------------------------
0.5 HELPER
--------------------------------------------------------------*/

  /* BTN */

    a.vce-button--style-basic.vce-button--style-basic--color-557cbf--fff, 
    button.vce-button--style-basic.vce-button--style-basic--color-557cbf--fff {

      background-color: #94182a !important;

    }

    a.vce-button--style-basic.vce-button--style-basic--color-557cbf--fff:hover, 
    button.vce-button--style-basic.vce-button--style-basic--color-557cbf--fff:hover {

      background-color: #8f141e !important;

    }

    .vce-button--style-basic.vce-button--style-basic--size-small {

      font-size: 15px !important;

    }

    .btn-primary {

      background-color: #94182a !important;
      border-radius: 0;
      border: none;

    }

    .btn-primary:hover {

      background-color: #8f141e !important;

    }

.header-top{
	display: table;
	width:100%;
	padding-right:50px;
}
.header-top > div{
	display: table;
	float:right;
}
.header-top i{
	color:#fff;
	font-size: 1em;
	line-height: 40px;
	margin-right:20px;
}

#top-nav  #menu-top-header{
	display: table;
	margin-right:20px;
	border-left:1px solid #fff; 
	border-right:1px solid #fff; 
	padding:0px 10px;
}
#top-nav li{
	float:right;
	margin: 0 10px;
}
#top-nav li a{
	color:#fff;
}
.xoo-wsc-basket{
	top:-12px;
	position: absolute;
	
}
.xoo-wsc-items-count{
	display: none;
}
/****************CHECKOUT***************/
#order_comments,.woocommerce-input-wrapper {
	width:100%;
}
#order_comments{
	min-height:100px;
}
.woocommerce-Price-currencySymbol{
	margin-right:4px;
}
.summary .product_meta {
	display: none;
}
.woocommerce form .form-row {
    width: 100% !important;
}
.woocommerce-checkout #payment div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea {
    width: 100% !important;
    padding: 8px;
}
.woocommerce #payment .form-row select, .woocommerce-page #payment .form-row select {
    width: 100%;
    height: 30px;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    float: left;
    width: 100%;
}
.custom-checkout h3 {
    background-color: #165f1c;  /****CHANGE TO COLOR YOU WANT TO USE FOR TITLE BACKGROUND ****/
    width: 45%;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin-top: 50px;
    color: #FFF;
    float: right;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    padding: .6180469716em;
    background-color: #f2f2f2;
    color: #43454b;
    outline: 0;
    border: 0;
    -webkit-appearance: none;
    border-radius: 2px;
    box-sizing: border-box;
    font-weight: 400;
   border:solid 2px #e4e4e4;
}

#wc_checkout_add_ons {
    width: 45%;
    float: right;
    text-align: center;
}

@media screen and (min-width: 980px) {
.woocommerce-shipping-fields h3, .woocommerce-billing-fields h3 {width:100%;}
.woocommerce .col2-set, .woocommerce-page .col2-set {
 width: 45%;
 float: left;
}
.woocommerce-checkout-review-order{
 width: 100%;
 float: right;
}
}
@media screen and (max-width: 979px) {
.custom-checkout h3 {
 width: 100%;
}
}
p{
	text-align: justify;
}

#tab-description p{
	text-align: justify
}
#el-f1114c5a .query-field-featured_image{
	max-height: 160px;
	overflow: hidden;
}
#el-1849816f,#el-1849816f h3{
	color:#efeae7;
}
.dropdown-menu .dropdown-item{
	border:none;
}

/*--------------------------------------------------------------
 MEDIA QUERY
--------------------------------------------------------------*/

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

    .woocommerce-page.columns-3 ul.products li.product, 
    .woocommerce.columns-3 ul.products li.product,
    .woocommerce ul.products.columns-3 li.product, 
    .woocommerce-page ul.products.columns-3 li.product {

      width: 29.75%;

    }

    .blog .content-article {

      margin: 0px 0 40px 0px !important;
      padding: 0 15px;

    }

    .blog .col-sm-7 {

      flex: 0 0 50%;
      max-width: 50%;

    }

    #subscribe-blog-blog_subscription-2 #subscribe-text {

      float: none;

    }
    #subscribe-blog-blog_subscription-2 #subscribe-email {
      margin-left: 0;
    }
  }

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

    .woocommerce-page.columns-3 ul.products li.product, 
    .woocommerce.columns-3 ul.products li.product,
    .woocommerce ul.products.columns-3 li.product, 
    .woocommerce-page ul.products.columns-3 li.product {

      width: 100%;

    }

  }

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

    .header-top {

      padding-right: 35px;
      display: block;
      height: 30px;

    }

    .custom-html-widget {

      margin-top: -5px;

    }

    .home #page-sub-header {

      padding: 20px 0;

    }

    .home #page-sub-header p {

        width: 100%;

    }

    #section2 .product-home li.product, 
    .products li.product {

      margin: 20px 0 !important;


    }

    .woocommerce ul.products[class*=columns-] li.product, 
    .woocommerce-page ul.products[class*=columns-] li.product {

      width: 100%;

    }

    .section {

      padding: 80px 20px;

    }

    .home .author_quotes .vce-text-block-wrapper {

      position: relative;
    }

    #section5 .vce-button--style-basic-wrapper {

      margin-bottom: 20px !important;

    }

    #blog_subscription-2 {

      border: 0;

    }

    .blog .col-sm-7 {

      flex: 0 0 100%;
      max-width: 100%;

    }

    .blog .content-article {

      margin: 0px 0 40px 0px !important;
      padding: 15px;

    }

    p#subscribe-email {

      margin-bottom: 0;

    }

    .page-template-default input[type="submit"], 
    .archive input[type="submit"],
    .product-template-default input[type="submit"],
    .blog input[type="submit"]{

      margin-top:10px;

    }

    #subscribe-blog-blog_subscription-2 #subscribe-text input[type=email],
    #subscribe-blog-blog_subscription-2 input[type=submit],
    #subscribe-email input,
    #subscribe-blog-blog_subscription-2 #subscribe-text {

      width: 100% !important;

    }

    #subscribe-blog-blog_subscription-2 #subscribe-text,
    #subscribe-blog-blog_subscription-2 input[type=submit], 
    #subscribe-blog-blog_subscription-2 #subscribe-email{

      float: none;

    }

    #subscribe-blog-blog_subscription-2 #subscribe-email {

      margin-left:0;

    }

    #custom_html-3 {

      padding-left: 0;

    }

    .container-fluid .row {

      margin-right: 0px;
      margin-left: 0px;

    }

    .page-id-9 .container-fluid img,
    .page-id-9 .container-fluid .vce-single-image-inner,
    .page-id-9 .container-fluid .vce-single-image-wrapper {

      width: 100%;
      display: block;

    }

    .content-article {

      margin: 0 !important;

    }

    .xoo-wsc-bki {

      font-size: 16px;

    }

    #subscribe-submit {

      width: 100%;

    }

    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {

          min-height: 420px;

    }

  }
#customer_login{
	width:100%;
}
#customer_login .u-column1,
#customer_login .u-column2{
	width:50%!important;
	max-width:50%!important
}
.wc-stripe-elements-field, .wc-stripe-iban-element-field{
	min-width: 350px!important;
}

/* POP UP */

@media only screen and (max-width : 992px) { 
  #pop-up.active::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: rgba(0,0,0,0.6);
  }

  .btn-open {
    display: none;
  }

  .popup {
    display: none;
  }

  .popup__title {
    margin-bottom: 20px;
  }

  .btn-wrpr {
    width: 48px;
    height: 48px;
    background-color: rgba(255,255,255,0.7);
    position: fixed;
    bottom: calc(50% + 48px);
    right: 0;
    z-index: 6;
    border: 1px solid #f78080;
  } 

  .js-popup-btn {
    border: solid #94182a;
    border-width: 0 5px 5px 0;
    background-color: transparent;
    display: inline-block;
    padding: 10px;
    position: fixed;
    bottom: calc(50% + 58px);
    right: 7px;
    z-index: 6;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transition-property: transform, right;
    transition-duration: 400ms;
    transition-timing-function: linear;
  }

  .active .btn-wrpr {
    display: none;
  }

  .active .js-popup-btn {
    right: 20px;
    top: -5px;
    position: absolute;
    border: 0;
    bottom: auto;
  }

  .active .js-popup-btn:before, .active .js-popup-btn:after  {
      content: "";
      display: inline-block;
      height: 33px;
      width: 2px;
      background-color: #94182a;
      margin-left: -2px;
  }

  .active .btn-close {
    display: none;
  }

  .active .btn-open {
    display: block;
  }

  .active .js-popup-btn:before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg)
  }

  .active .js-popup-btn:after {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }

  .active > .popup {
    background-color: white;
    position: fixed;
    width: 74%;
    left: 50%;
    top: 50%;
    padding: 30px;
    z-index: 5;
    display: block;
    transform:  translate(-50%,-50%);
    background: white;
  }
}
@media only screen and (min-width : 992px) {

  .popup {
    z-index: 5;
    position: fixed;
    right: -500px;
    bottom: calc(50% + 80px);
    padding: 30px;
    -webkit-box-shadow: -14px 3px 21px -6px rgba(0,0,0,0.37);
    -moz-box-shadow: -14px 3px 21px -6px rgba(0,0,0,0.37);
    box-shadow: -14px 3px 21px -6px rgba(0,0,0,0.37);
    transition-property: right;
    transition-duration: 400ms;
    transition-timing-function: linear;
    width: 480px;
    max-height: 320px;
  }

  .js-popup-btn:focus {
    outline: 0;
  }

  .active .js-popup-btn {
    right: 40px;
    top: 0;
    position: absolute;
    border: 0;
  }

  .active > .popup {
    display: block;
    position: fixed;
    right: 0;
    top: auto;
    left: auto;
    background-color: white;
    transform: none;
    overflow: hidden;
  }

  .btn-wrpr {
    width: 48px;
    height: 48px;
    background-color: rgba(255,255,255,0.7);
    position: fixed;
    bottom: calc(50% + 76px);
    right: 0;
    z-index: 6;
    border: 1px solid #f78080;
  } 

  .js-popup-btn {
    border: solid #94182a;
    border-width: 0 5px 5px 0;
    background-color: transparent;
    display: inline-block;
    padding: 10px;
    position: fixed;
    bottom: calc(50% + 88px);
    right: 7px;
    z-index: 6;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transition-property: transform, right;
    transition-duration: 400ms;
    transition-timing-function: linear;
  }

  .active .btn-wrpr {
    display: none;
  }

  .active .js-popup-btn {
    right: 20px;
    top: -5px;
    position: absolute;
    border: 0;
    bottom: auto;
  }

  .active .js-popup-btn:before, .active .js-popup-btn:after  {
      content: "";
      display: inline-block;
      height: 33px;
      width: 2px;
      background-color: #94182a;
      margin-left: -2px;
  }

  .active .btn-close {
    display: none;
  }

  .active .btn-open {
    display: block;
  }

  .active .js-popup-btn:before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg)
  }

  .active .js-popup-btn:after {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }

  .popup__title {
    margin-bottom: 20px;
  }
}