/*
 Theme Name:   Cabinet Decines Ortho
 Theme URI:    https://novelar.fr
 Description:  Thème Cabinet Decines Ortho
 Author:       Jérôme
 Author URI:   https://novelar.fr
 Template:     hello-elementor
 Version:      1.0.0
*/
html, body {
    overflow-x:hidden;
}
/*--------------------------------------------------------------
# GENERAL 
--------------------------------------------------------------*/
small {font-size:0.4em;}
.light {font-weight:200;}
blockquote {
    padding: 50px;
    position: relative;
    border: 0;
    font-size:1.5em;
    color:#e3006c;
    line-height:2;
}
.dialog-message {font-size:1em;}

blockquote:before {
    background-image: url(./images/blockquote-left.png);
    left: 0;
    top: 0;
}
blockquote:after {
    background-image: url(./images/blockquote-right.png);
    right: 0;
    bottom: 0;
}
blockquote:before, blockquote:after {
    content: "";
    width: 4em;
    height: 4em;
    background-repeat: no-repeat;
    background-size:contain;
    position: absolute;
}
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], select, textarea {
    border: none;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.10);
    border-radius: 0;
    background:#fff;
}
input[type="checkbox"] {
    position: relative;
    width: 1em;
    height: 1em;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    cursor: pointer;
    -webkit-transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
    transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
}
[type=button]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
    border: none;
}
.elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option input {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}
.elementor-field-subgroup .elementor-field-option label {display:inline;}
input[type="checkbox"]:before {
    position: absolute;
    content: '';
    display: block;
    top: 0px;
    left: 4px;
    width: 6px;
    height: 11px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

input[type="checkbox"]:checked {
    color: #fff;
    border-color: #ccc;
    background: #ccc;
}
input[type="checkbox"]:checked::before {
      opacity: 1;
    }
input[type="checkbox"]:checked ~ label::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
@media only screen and (max-width:1300px ) {

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

} 
@media only screen and (max-width:720px ) {
    html, body { font-size:12px;}
    blockquote {
      padding: 2em 1em;
      position: relative;
      border: 0;
  }
  blockquote:before, blockquote:after {
      width: 20px;
      height: 20px;
  }

}


/*--------------------------------------------------------------
# ELEMENTOR
--------------------------------------------------------------*/

.elementor-section {
  background-size:100% 100%;
}
.elementor-text-editor  ul {
  margin-bottom: 0.7em;
  padding-left:10px;
}
.elementor-text-editor  ul > li {
    margin-left: 1em;
    list-style-type: none;
    margin-top: 0.7em;
}
.elementor-text-editor ul > li:before {
    content: "\f054";
        -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #395ba1;
    font-size: 0.7em;
    top: .125em;
    right: .75em;
    margin-right: 10px;
}

.elementor-text-editor b {
  color:#395ba1;
}
.elementor-widget-call-to-action .elementor-cta__description {
    text-align: justify;
}
.elementor-popup-modal .dialog-close-button {
    border: 1px solid #808181;
    padding: 5px;
}


/*--------------------------------------------------------------
# Boutons
--------------------------------------------------------------*/
.btn, a.elementor-button, button.btn, .btn.checkout, .woocommerce #respond input#submit, .woocommerce button.button, .woocommerce input.button, .woocommerce div.product form.cart .button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce.widget_shopping_cart .btns a.checkout, .elementor-slides .slick-slide-inner .elementor-slide-button, #nav-desktop > .menu-item.button-header > a {
    overflow: hidden;
    border: none;
    color: inherit;
    background: none;
    outline: none;
    display: inline-block;
    position: relative;
    text-align: center;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-tap-highlight-color: transparent;
    /*padding: 15px 30px;*/
}



button {border:none;}
button.btn {
    line-height: 3em;
    padding: 0 20px !important;
    min-height: 3.5em;
    font-size: 1em;
    min-width: 150px;
    border:none;
}

.btn.disable {
  background:#ccc !important;
  color:#fff !important;
}
.btn.disable:after {
  display:none;
}


.elementor-button .elementor-align-icon-right,
.elementor-button .elementor-align-icon-left {
      -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.elementor-button:hover .elementor-align-icon-right,
.elementor-button:hover .elementor-align-icon-left {
  transform:translateX(5px);
  -moz-transform:translateX(5px);
  -webkit-transform:translateX(5px);
}

/*-----------------------------------------------------------
# HEADER
-------------------------------------------------------------- */
.elementor-editor-active #header {display:none;}
#header {
  position:fixed;
  z-index:999;
  width:100%;
  top:0;
  left:0;

}

#nav-desktop > .menu-item.button-header > a {
    height: 48px;
    line-height: 48px;
    margin-left: 15px;
    vertical-align: middle;
    margin-top: -2px;
    display: inline-block;
    padding: 0 20px;
}
#nav-desktop > .menu-item.button-header > a:before {display:none;}
.custom-logo-link, .custom-logo-link img {
  -o-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    display:block;
    position:relative;
}

#header nav {
    background: transparent; /* Old browsers */
  box-shadow:none;
    height: 80px;
    line-height: 80px;
}
#header .nav-wrapper {
    padding: 0 2em;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
#header .custom-logo-link {
    max-width: 180px;
    display: block;
    float: left;
    -o-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}
#header nav:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    /* top: -100px; */
    height: 100%;
    z-index: -1;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
}
#nav-desktop {
    display: inline-block;
    list-style: none;
}
#nav-desktop > .menu-item  {
    position:relative;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    float: left;
    line-height: 80px;
}
#nav-desktop > .menu-item > a {
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    color: #fff;
    font-weight: 500;
    display: block;
    padding: 0 15px;
    cursor: pointer;
}
#nav-desktop .menu-item > a:before {
    content: "";
    width: 0;
    height: 5px;
    background: #f4bd3b;
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

#nav-desktop .menu-item.current-menu-item > a::before,
#nav-desktop .menu-item > a:hover::before,
#nav-desktop .current-page-ancestor > a:before {
    opacity:1;
    width: 100%;
    border-radius: 0 0 3px 3px;
}
.sub-menu .menu-item > a:before {
  display:none !important;
}
#nav-desktop a, .cart-menu a {
    font-weight: 700;
    font-size: 0.9em;
    white-space: nowrap;
}


#nav-desktop .sub-menu, .cart-menu .sub-menu {
    max-width: 300px;
    overflow: hidden;
    transition: transform 250ms ease, opacity 250ms ease;
    transform: scale(0.9) translateY(20px); 
    pointer-events: none;
    opacity: 0; 
    background: #fff;
    border-radius: 6px;
    padding: 0;
    position: absolute;
    top: 90%;
    left: 0;
    /* right: -15px; */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.07);
    list-style: none;
}


#nav-desktop > li:hover .sub-menu,
.cart-menu > li:hover .sub-menu {
  
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    transform: none;
    display:block;
}
#nav-desktop .sub-menu > li {
  border-bottom:1px solid #dedede;
}
#nav-desktop .sub-menu > li:last-child {
    border-bottom: none;
}
#nav-desktop .sub-menu > li > a, .cart-menu .sub-menu > li > a {
    border-radius: 6px;
    padding: 12px 15px;
    line-height: 1.2em;
    border-radius: 6px;
    display: block;
    color: #3d4459;
    font-weight: 400;
    text-align: left;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
#nav-desktop .sub-menu > li > a:hover,
.cart-menu .sub-menu > li > a:hover {
  background:#E8F2F9;
  color:#f4bd3b;
}



#header.sticky #nav-desktop .custom-logo-link {
    transform: translateY(0);
}

#header.sticky #nav-desktop > .menu-item > a {color:#2F3033;}
#header.sticky nav:before {
    opacity: 1;
    top: 0;
    background: #ffffff;
    -webkit-box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.3);
}
#header button {color:#fff;}
 #header.sticky button {color:#3d4459;}

#header.sticky .custom-logo-link {
    max-width: 150px;
    -o-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

.admin-bar #header {top:32px;}


#nav-desktop > .menu-item.button-header > a {
    color: #F4BD3B;
    background: transparent;
    position: relative;
    box-shadow: none;
}
#nav-desktop > .menu-item.button-header > a:after {
    content: "";
    border: 2px solid #F4BD3B;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: block;
    position: absolute;
    border-radius: 25px;
}

#nav-desktop > .menu-item.button-header > a:hover {
    color: #000;
       background:#F4BD3B;
}

@media only screen and (max-width:1300px ) {
  #header .custom-logo-link {
        max-width: 160px;
        padding: 0;
        margin-left: 0;
        -o-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -ms-transform: translateY(15px);
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
    #header .nav-wrapper {
        padding: 0 1.5em;
    }
}
@media only screen and (max-width:1130px ) {

  #header .nav-wrapper {padding:0 0.5em 0 1.5em;}
  #header .custom-logo-link,
  #header .custom-logo-link, #header.sticky .custom-logo-link {
    max-width: 90px;
    padding: 0;
    margin-left: 0;
    -o-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}
  #header nav,
    #header.sticky nav:before, 
    .cart-menu > li,
    .cart-menu > li > a > i,
    #bouton_menu {
      height: 50px ;
      line-height: 50px ;
    }
    #right-menu {
    /* display: none; */
    margin-right: 50px;
}
   
}
@media only screen and (max-width:601px ) {
  .admin-bar #header {top:46px;}
  .admin-bar #header.sticky  {top:0px;}
}

/*-----------------------------------------------------------
# MOBILE NAV
-------------------------------------------------------------- */

.menu_mobile {
    display:none;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    position: fixed;
    display: flex;
    align-items: flex-end;
    bottom: 0;
    left: 0;
    z-index: 9999;
}
.menu_mobile.is-open {height: 100%;}

.menu_mobile.is-open .menu__nav {
    height: 100%;
    opacity: 1;
    will-change: opacity;
    transition-duration: .2s;
    transition-delay: .3s;

}
.menu__nav {
    box-sizing: border-box;
    /* width: 100%; */
    height: 0;
    transition: opacity .2s ease-out;
    opacity: 0;
    display: flex;
    align-items: flex-end;
    z-index: 99;
    position: absolute;
    margin-right: 50px;
}
.menu__list {
    display: block;
    width: 100%;
    max-height: 100%;
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    list-style: none;
    font-family: "saira", sans-serif;
    /* font-weight: 200; */
}
.menu_mobile.is-open .menu__list {
    display: block;
}
.menu__list > li {
    /* padding: 0 10px; */
    padding-left: 15px;
    margin: 10px 0;
}
.menu_mobile .menu__list a {
    /* display: block; */
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 10px;
    color: #FFF;
    font-size: 18px;
    line-height: 1.2em;
    font-weight: 400;
    display: inline-block;
}
.menu_mobile .menu-item-has-children{position:relative;}
.menu_mobile .more-menu {
    content: "+";
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    background: transparent;
    color: #fff;
    /* color: #222; */
    /* background: #fff; */
    width: 30px;
    height: 30px;
    box-shadow: 10px #000;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.20);
    pointer-events: auto;
}
.menu_mobile .menu-item-has-children.active .more-menu {  content: "-";  background: transparent;}
.menu_mobile .sub-menu {
    display: none;
    width: 100%;
    list-style: none;
}

.menu_mobile .sub-menu a {
    padding: 10px;
    font-size: 1.5em;
    line-height: 1.2em;
    font-weight: 400;
    text-transform: initial;
}
.menu_mobile .menu-item.btn-container a {
    margin-top: 30px;
}


.menu-item.btn-container a {
    line-height: 38px;
    font-weight: 600;
    margin-top: 6px;
    font-size: 1.2em;
    padding: 0 15px !important;
    background: #fff;
    color: #8dbf4a !important;
}

.menu-item.btn-container a:before,
.menu-item.btn-container a:after {display:none;}

.menu__toggle {
    position: fixed;
    top: -9px;
    right: 0;
    display: none;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    -webkit-touch-callout: none;
    user-select: none;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    ms-transform: scale(0.5);
}
.menu__toggle:before {
    content: "";
    width: 68px;
    height: 68px;
    /* font-size: 100px; */
    background: rgb(47,48,51);
background: linear-gradient(18deg, rgba(47,48,51,1) 0%, rgba(244,189,59,1) 100%);
    box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.10);
    -webkit-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.10);
    border-radius: 50%;
    position: absolute;
    will-change: width, height;
    transition: transform .25s cubic-bezier(0.04, -0.1, 0.29, 0.98), width .25s cubic-bezier(0.04, -0.1, 0.29, 0.98), height .25s cubic-bezier(0.04, -0.1, 0.29, 0.98);
}
.menu_mobile.is-closed .menu__toggle::before {
    box-sizing: border-box;
    width: 78px;
    height: 78px;
    padding: 20px;
    left: -5px;
    flex: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    top: -5px;
}
.menu_mobile.is-open .menu__toggle::before{
  width: 100vmax;
  height: 100vmax;
  transform: translate3d(-50vh, -50vh, 0) scale(8);
  transition-duration: 1s;
}



@media only screen and (max-width:1130px ) {
    .menu__toggle {display: block;}
    .hide-on-med-and-down {display:none !important;}
    .admin-bar #header {top: 46px;}
}

.path-burger {
  position: absolute;
  top: 0;
  left: 0;
  height: 68px;
  width: 68px;
  mask: url(#mask);
  -webkit-mask-box-image: url(./images/mask.svg);
}

.animate-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 68px;
}


.path-rotation {
  height: 34px;
  width: 34px;
  margin: 34px 34px 0 0;
  transform: rotate(0deg);
  transform-origin: 100% 0;
  }
.path-rotation:before {
    content: '';
    display: block;
    width: 30px;
    height: 34px;
    margin: 0 4px 0 0;
    background: #fff;
  
}


@keyframes rotate-out {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-in {
  0% {
    transform: rotate(360deg);
  }
  40% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}



.menu_mobile.is-open .path {
    animation: dash-in 0.6s linear normal;
    animation-fill-mode:forwards;
  }
.menu_mobile.is-open .animate-path {
    animation: rotate-in 0.6s linear normal;
    animation-fill-mode:forwards;
  }

.menu_mobile.is-closed  .path {
    animation: dash-out 0.6s linear normal;
    animation-fill-mode:forwards;
  }
.menu_mobile.is-closed .animate-path {
    animation: rotate-out 0.6s linear normal;
    animation-fill-mode:forwards;
  }


.path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  stroke-linejoin: round;
}

@keyframes dash-in {
  0% {
    stroke-dashoffset: 240;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes dash-out {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 240;
  }
}

.burger-icon {
  position: absolute;
  padding: 20px 16px;
  height: 68px;
  width: 68px;
}

.burger-container {
  position: relative;
  height: 28px;
  width: 36px;
}

.burger-bun-top,
.burger-bun-bot,
.burger-filling {
  position: absolute;
  display: block;
  height: 4px;
  width: 36px;
  border-radius: 2px;
  background: #fff;
}

.burger-bun-top {
  top: 0;
  transform-origin: 34px 2px;
}

.burger-bun-bot {
  bottom: 0;
  transform-origin: 34px 2px;
}

.burger-filling {
  top: 12px;
}

.burger-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 68px;
}

.svg-ring {
  width: 68px;
  height: 68px;
}


.menu_mobile.is-open .burger-bun-top {
    animation: bun-top-out 0.6s linear normal;
    animation-fill-mode:forwards;
  }
.menu_mobile.is-open .burger-bun-bot {
    animation: bun-bot-out 0.6s linear normal;
    animation-fill-mode:forwards;
  }

.menu_mobile.is-closed .burger-bun-top {
    animation: bun-top-in 0.6s linear normal;
    animation-fill-mode:forwards;
  }
.menu_mobile.is-closed   .burger-bun-bot {
    animation: bun-bot-in 0.6s linear normal;
    animation-fill-mode:forwards;
  }

@keyframes bun-top-out {
  0% {
    left: 0;
    top: 0;
    transform: rotate(0deg);
  }
  20% {
    left: 0;
    top: 0;
    transform: rotate(15deg);
  }
  80% {
    left: -5px;
    top: 0;
    transform: rotate(-60deg);
  }
  100% {
    left: -5px;
    top: 1px;
    transform: rotate(-45deg);
  }
}

@keyframes bun-bot-out {
  0% {
    left: 0;
    transform: rotate(0deg);
  }
  20% {
    left: 0;
    transform: rotate(-15deg);
  }
  80% {
    left: -5px;
    transform: rotate(60deg);
  }
  100% {
    left: -5px;
    transform: rotate(45deg);
  }
}


@keyframes bun-top-in {
  0% {
    left: -5px;
    bot: 0;
    transform: rotate(-45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    transform: rotate(-60deg);
  }
  80% {
    left: 0;
    bot: 0;
    transform: rotate(15deg);
  }
  100% {
    left: 0;
    bot: 1px;
    transform: rotate(0deg);
  }
}

@keyframes bun-bot-in {
  0% {
    left: -5px;
    transform: rotate(45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    transform: rotate(60deg);
  }
  80% {
    left: 0;
    bot: 0;
    transform: rotate(-15deg);
  }
  100% {
    left: 0;
    transform: rotate(0deg);
  }
}
.menu_mobile.is-open .burger-filling {
    animation: burger-fill-out 0.6s linear normal;
    animation-fill-mode:forwards;
  }

.menu_mobile.is-closed .burger-filling {
    animation: burger-fill-in 0.6s linear normal;
    animation-fill-mode:forwards;
  }
}

@keyframes burger-fill-in {
  0% {
    width: 0;
    left: 36px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  80% {
    width: 36px;
    left: -6px;
  }
  100% {
    width: 36px;
    left: 0px;
  }
}

@keyframes burger-fill-out {
  0% {
    width: 36px;
    left: 0px;
  }
  20% {
    width: 42px;
    left: -6px;
  }

  40% {
    width: 0;
    left: 40px;
  }

  100% {
    width: 0;
    left: 36px;
  }
}

.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

.search-form {
    position: relative;
}
input[type=search].search-field {
    width: 0;
    border: none !important;
    background: none;
    opacity: 0;
    position: absolute;
    right: 60px;
    top: 16px;
}

.search-form:hover input[type=search].search-field {
    width:200px;
    background:#fff;
    opacity:1;
}
button.search-submit {
    background:none !important;
    border:none !important;
    box-shadow: none !important;
}

/*--------------------------------------------------------------
# RESPONSIVE
--------------------------------------------------------------*/
@media only screen and (max-width:1230px ) {

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

} 

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

input[type=search].search-field {
    top:8px;
}
  blockquote:before, blockquote:after {
      width: 20px;
      height: 20px;
      background-size: 20px;
  }
  blockquote p {
      font-size: 1em;
      line-height: 1.5em;
      font-weight: 300;
      display:inline;
      text-align:center;
  }
  blockquote {
      padding: 20px 5px;
      position: relative;
      border: 0;
  }
  
}