@charset "UTF-8";
:root{
/*
  --color-link: #fe6f61;
  --color-link-hover: #fa1a01;

  #B48A66
  #7e6547
  #fff2e3
  #ffe6c8
  #ffffff
*/	
  --color-dark: #7e6547;
  --color-pri: #B48A66;
  --color-sec: #ffe6c8;
  --color-lite: #fff2e3;

  --bg-dark: #7e6547;
  --bg-pri: #B48A66;
  --bg-sec: #ffe6c8;
  --bg-lite: #fff2e3;

  --color-link: #7e6547;
  --color-link-hover: #7e654780;
/**/
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-sec: #00000070;
  --color-black: #000;
  --color-white: #fff;
  --color-orange: #fea543;
  --color-grey: #f4f4f2;
/**/
  --bg-black: #000;
  --bg-white: #fff;
  --bg-orange: #fea543;
  --bg-grey: #f4f4f2;
/**/
  --bg-primary: #679fe4;
  --bg-danger: #ff6969;
  --bg-success: #ADD172;
  --bg-info: #f1c40f;
  --bg-warning: #fea543;
  --bg-black: #000;
  --bg-violet: #8e44ad;
}
*{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  text-align:left;
}
*::after,*::before{
  box-sizing: border-box;
}
html, body{
  height:70vh;
}
body{
  width:100%;
  height:100%;
  color: #000;
  font-size: 15px;
  font-family: 'Raleway', sans-serif;
  font-family: 'Azo Sans Light', sans-serif;
  background-color: var(--color-bg);
  background-size: 100% auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,.h1{
  font-size: 2.2em;
  line-height: 1.5;
}
h2,.h2{
  font-size: 1.8em;
  line-height: 1.5;
}
h3,.h3{
  font-size: 1.45em;
  line-height: 1.5;
}
h4,.h4{
  font-size: 1.115em;
  line-height: 1.5;
}
p{
  font-size: 1em;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
ul li{
  font-size: 1em;
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin-left: 30px;
}
@media only screen and (min-width: 768px){
  h1,.h1{
    font-size: 2.4em;
    line-height: 1.5;
    padding: 20px 0;
  }
  h2,.h2{
    font-size: 2.5em;
    line-height: 1.5;
    padding: 20px 0;
  }
  h3,.h3{
    font-size: 2em;
    line-height: 1.5;
    padding: 20px 0;
  }
  h4,.h4{
    font-size: 1.4em;
    line-height: 1.5;
    padding: 20px 0;
  }
  p{
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }
}
@media only screen and (min-width: 1024px){
  h1,.h1{
    font-size: 2.8em;
    line-height: 1.5;
    padding: 20px 0;
  }
  h2,.h2{
    font-size: 2.8em;
    line-height: 1.5;
    padding: 20px 0;
  }
  h3,.h3{
    font-size: 1.75em;
    line-height: 1.5;
    padding: 20px 0;
  }
  h4,.h4{
    font-size: 1.125em;
    line-height: 1.5;
    padding: 20px 0;
  }
  p{
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }
}
@media only screen and (min-width: 1440px){
  h1,.h1{
    font-size: 3.6em;
    line-height: 1.5;
    padding: 20px 0;
  }
  h2,.h2{
    font-size: 2.0em;
    line-height: 1.5;
    padding: 20px 0;
  }
  h3,.h3{
    font-size: 1.75em;
    line-height: 1.5;
    padding: 20px 0;
  }
  h4,.h4{
    font-size: 1.125em;
    line-height: 1.5;
    padding: 20px 0;
  }
  p{
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }
}

a{
  cursor: pointer;
  text-decoration: none;
  color: var(--color-link);
  outline: none;
}
a:hover,
a:focus{
  color: var(--color-link-hover);
  outline: none;
}
a:hover{
}

header, section, footer, div{
  border: solid 0px #2af;
}





.wrapper{
  overflow-x: hidden;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}
.wrapper:after{
  content: "";
  display: table;
  width: 100%;
  clear: both;
}
@media only screen and (min-width: 768px){
  .wrapper{
    overflow-x: visible;
  }
}
@media only screen and (min-width: 1440px){
  .wrapper{
    max-width: 2560px;
  }
}



/*
.menu{
  display: block;
  cursor: pointer;
  z-index: 9999;
  position: fixed;
  top: 25px;
  right:20px;
  width: 30px;
  height: 30px;
}
.menu svg{
  width: 30px;
  height: auto;
}

@media only screen and (min-width: 768px){
  .menu{
    display: none;
  }
}
*/


.menu_navi{
  z-index: 999999;
  position: fixed;
  top: 0;
  right: -120%;
  width: 100%;
  max-width: 240px;
  height: 100vh; 
  background: #2E2C2C;
  transition:all .6s ease-in-out;
  -webkit-transition:all .6s ease-in-out;
  -moz-transition:all .6s ease-in-out;
  -khtml-transition:all .6s ease-in-out;
  -webkit-box-shadow: 0px 0px 30px -10px rgba(51,51,51,0.0);
  -moz-box-shadow: 0px 0px 30px -10px rgba(51,51,51,0.0);
  box-shadow: 0px 0px 30px -10px rgba(51,51,51,0.0);
}
.menu_navi.active{
  right: 0;
  -webkit-box-shadow: 0px 0px 30px -10px rgba(51,51,51,0.77);
  -moz-box-shadow: 0px 0px 30px -10px rgba(51,51,51,0.77);
  box-shadow: 0px 0px 30px -10px rgba(51,51,51,0.77);
}

.menu_navi .menu_navi_inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);  
  width: 240px;
  height: auto;
  text-align: center;
}
.menu_navi a{
  display: block;
  line-height: 2;
  font-size: 1.2em;
  text-align: center;
  color: var(--color-pri);
}
.menu_navi a.social{
  display: inline-block;
  padding: 10px 20px;
}
.menu_navi a i{
  font-size: 2.4em;
}
.menu_navi a.customer{
  margin-top: 20px;
}
.menu_navi a.customer-out{
  display: none;
}
.menu_navi a.soc{
  display: inline-block;
  margin-top: 20px;
  width: 48%;
  padding: 0 40px;
}
.menu_navi a.infobtn{
  display: inline-block;
  margin-top: 60px;
  width: 32%;
  padding: 0;
  font-size: .65em;
  text-align: center;
}

.menu_navi a.soc.s1{
  text-align: right;
}
.menu_navi a.soc.s2{
  text-align: left;
}
@media only screen and (max-width: 768px){
  .menu_navi a{
    font-size: 1.6em;
  }
  .menu_navi a i{
    font-size: 2em;
  }
}

.menu_social{
  display: none;
  z-index: 999;
  position: fixed;
  top: 50%;
  left: 40px;
  transform: translate(-50%,-50%);
  width: 30px;
  height: 200px;
  text-align: center;
}
.menu_social:after{
  content: "";
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 1px;
  height: 140px;
  background: var(--color-pri);
}
.menu_social a{
  display: block;
  width: 100%;
  height: auto;
  font-size: .75em;
  text-align: center;
  font-weight: 400;
  color: var(--color-pri);
  padding: 0 0px;
}
.menu_social a:nth-child(1){
  padding-bottom: 165px;
}
@media only screen and (min-width: 768px){
  .menu_social{
  	display: block;
  }
  .menu_social a{
    font-size: .85em;
  }
}





header{
  z-index: 9990;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height:auto;
  background: rgba(255,255,255,0);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  transition:all .4s ease-in-out;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
  -khtml-transition:all .4s ease-in-out;
  -webkit-box-shadow: 0px 0px 15px -10px rgba(51,51,51,0.0);
  -moz-box-shadow: 0px 0px 15px -10px rgba(51,51,51,0.0);
  box-shadow: 0px 0px 15px -10px rgba(51,51,51,0.0);
}
header.active{
  background: rgba(255,255,255,.95);
  -webkit-box-shadow: 0px 0px 15px -10px rgba(51,51,51,0.77);
  -moz-box-shadow: 0px 0px 15px -10px rgba(51,51,51,0.77);
  box-shadow: 0px 0px 15px -10px rgba(51,51,51,0.77);
}
header .head{
  width:130px;
  padding: 20px 0 10px 20px;
  height:70px;
  text-align:left;
}
header .head .logo{
  width: 100px;
  height: auto;
}
header .navi{
  display: none;
}

.menu__inline{
  position: relative;
  width:calc(40% - 65px);
  height:70px;
  line-height:70px;
  color: #000;
  font-weight: 400;
  font-size: .85em;
  margin: auto 0;
  text-align: center;
}
.menu__inline svg{
  cursor: pointer;
  width: 30px;
  height: auto;
  margin-top: 28px;
}

.top__cart{
  position: relative;
  width:calc(60% - 65px);
  height:70px;
  line-height:70px;
  color: #000;
  font-weight: 400;
  font-size: .85em;
  margin: auto 0;
  text-align: center;
}
.show_cart svg{
  position: relative;
  top: 5px;
}
.quick__cart{
  overflow-y: auto;
  display: none;
  z-index: 99999;
  position: fixed;
  top: 70px;
  right: 0px;
  width: 100%;
  max-width: 420px;
  height: auto;
  max-height: 80vh;
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 30px -10px var(--bg-pri);
}
.quick__cart.active{
  display: block;
}
.quick__cart span#count{
  display: none
  z-index: 9999;
  position: fixed;
  top: 600px;
  right: 20px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 30px -10px var(--bg-pri);
}
.cart__action{
  display: none;
  z-index: 99999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 250px;
  height: 50px;
  line-height: 50px;
  background: var(--bg-pri);
  padding: 0;
  box-shadow: 0 0 30px -10px var(--bg-pri);
  text-align: center;
  font-size: 1.2em;
  color:var(--bg-white);
}
.cart__action svg{
  position: relative;
  top:3px;
}

@keyframes caction{
  0%{
    opacity: 0;
    top: 50%;
    left: 50%;
  }
  20%{
    opacity: 1;
    top: 50%;
    left: 50%;
  }
  80%{
    opacity: 1;
    top: 5%;
    left: 95%;
  }
  100%{
    opacity: 0;
    display:none;
    top: 5%;
    left: 95%;
  }
}
.cart__action.action{
  display: block;
  opacity: 0;
  top: 50%;
  left: 50%;
  animation: caction 2s cubic-bezier(0.86, 0, 0.07, 1);
}


header div{
  border: solid 0px #3af;
}



@media only screen and (min-width: 768px){
  header .head{
    width:150px;
    padding: 30px 0px 20px 40px;
    height:96px;
    text-align:left;
  }
  header .head .logo{
    width: auto;
    height: 40px;
  }
  header .navi{
    display: block;
    padding:0px 40px 0 0;
    width: calc(100% - 350px);
    height:96px;
    text-align:right;
  }
  header .navi a{
    position: relative;
    line-height:96px;
    color: #000;
    font-weight: 400;
    margin-left:80px;
    font-size: .99em;
  }
  header .navi a.underline:after{
    transition: all .2s ease-in-out;
  }
  header .navi a.underline:after{
    content: "";
    position: absolute; 
    top: 25px;
    left: 0;
    width: 100%;
    height: 1px;
    border: solid 1px var(--color-pri);
  }
  header .navi a.underline:hover:after{
    top: 15px;
  }


  .top__cart{
    width:100px;
    height:96px;
    line-height:96px;
    color: #000;
    font-weight: 400;
    font-size: .85em;
    margin: auto 0;
    text-align: center;
  }
  .menu__inline{
    position: relative;
    width:100px;
    height:96px;
    margin: auto 0;
    padding:15px 40px 0 20px;
    text-align: center;
  }

}

/*
header.active .top__cart,
header.active .navi,
header.active .head{
  height:70px;
}
header.active .head svg.logo{
  height: 40px;
}
*/



.newsletter{
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 60px;
  margin: 40px auto 0;
  border-radius: 60px;
  background: #f9d1d1;
  background: #FFEEEE;
}
.newsletter input.off[type=email]{
  width: calc(100% - 0px);
  max-width: 400px;
  height: 60px;
  text-align: center;
  background: transparent;
  padding-left: 20px;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -khtml-transition:all 1s ease-in-out;
}
.newsletter input.on[type=email]{
  width: calc(100% - 100px);
}
.newsletter input.off[type=submit]{
  position: absolute;
  top: 0;
  right: -100px;
  width: 140px;
  height: 60px;
  text-align: center;
  font-size: 1em;
  color: #404040;
  background: transparent;
  font-family: "Playfair Display", sans-serif;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -khtml-transition:all 1s ease-in-out;
}
.newsletter input.on[type=submit]{
  right: -0px;
}





footer{
  padding: 50px 20px 68px 20px;
  line-height: 1.5;
  font-size: .75em;
  background: #2E2C2C;
  width: 100%;
  height: auto;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
@media only screen and (min-width: 768px){
  footer{
    padding: 50px 20px 68px 80px;
    flex-direction: row;
  }
}
footer .logo-footer{
  width: auto;
  height: 60px;
  margin-left:-4px;
}
footer p{
  text-transform: uppercase;
  color: var(--color-pri);
  font-weight: 500;
  margin-bottom: 18px;
}
footer a.infobtn{
  color: var(--color-pri);
  font-weight: 500;
}
footer p.headline{
  font-size:1.2em;
  margin: 40px 0 30px;
  font-weight: 500;
}
footer p.social a{
  text-transform: none;
}
footer .c12:nth-child(2){
  padding-top: 83px;
}
footer .c12:nth-child(3){
  padding-top: 83px;
}
footer .c12 .between{
  display: inline-block;
  width: 100px;
  height: 1px;
  background: var(--bg-pri);
  margin: 0 15px 5px;
}
footer .input__box{
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 60px;
  line-height: 60px;
  border: solid 1px var(--bg-pri);
  margin: 40px 0 0 0;
}
.input__box input.off[type=email]{
  width: calc(100% - 0px);
  max-width: 400px;
  height: 60px;
  text-align: center;
  background: transparent;
  color: var(--color-pri);
  padding: 0 3px;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -khtml-transition:all 1s ease-in-out;
}
.input__box input.on[type=email]{
  width: calc(100% - 120px);
}
.input__box input.off[type=submit]{
  position: absolute;
  top: 0;
  right: -120px;
  width: 120px;
  height: 60px;
  padding: 0 3px;
  text-align: center;
  font-size: 1rem;
  color: var(--color-pri);
  background: transparent;
  font-family: "Playfair Display", sans-serif;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -khtml-transition:all 1s ease-in-out;
}
.input__box input.on[type=submit]{
  right: -0px;
}

footer .input__box input::-webkit-input-placeholder{ /* Chrome/Opera/Safari */
  font-size: .75rem;
  color:var(--color-pri);
  font-weight: 100;
  font-family: sans-serif;
}
footer .input__box input::-moz-placeholder{ /* Firefox 19+ */
  font-size: .75rem;
  color:var(--color-pri);
  font-weight: 100;
  font-family: sans-serif;
}
footer .input__box input:-ms-input-placeholder{ /* IE 10+ */
  font-size: .75rem;
  color:var(--color-pri);
  font-weight: 100;
  font-family: sans-serif;
}
footer .input__box input:-moz-placeholder{ /* Firefox 18- */
  font-size: .75rem;
  color:var(--color-pri);
  font-family: sans-serif;
}
.row__footer{
  background: #2E2C2C;
  font-size: .75rem;
}
.row__footer p{
  color:var(--color-pri);
  font-size: .75rem;
}



#top{
  display: none;
  z-index: 99999;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: auto;
  height: auto;
  display: block;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#top svg{
  width: 40px;
  height: auto;
}
@media only screen and (min-width: 768px){
  #top{
    bottom: 40px;
    right: 40px;
  }
  #top svg{
    width: 50px;
  }
}



.infopop{
  display: none;
  z-index: 999999;
  position: fixed;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  height: 94%;
  background: #fff;
  border: solid 2px #f2f2f4;
  -webkit-box-shadow: 0px 0px 100px -40px rgba(51,51,51,0.77);
  -moz-box-shadow: 0px 0px 100px -40px rgba(51,51,51,0.77);
  box-shadow: 0px 0px 100px -40px rgba(51,51,51,0.77);
}
.infopop .head{
  width: 100%;
  max-width: 900px;
  height: 50px;
  border-bottom: solid 2px #f2f2f4;
}
.infopop .head .head1{
  float: left;
  width: calc(100% - 50px);
  height: 50px;
  line-height: 50px;
  font-weight: 700;
  padding-left: 20px;
  font-size: 1.4em;
}
.infopop .head .head2{
  cursor: pointer;
  float: left;
  width: 50px;
  height: 50px;
  line-height: 45px;
  text-align: center;
  font-size: 2.4em;
  border-left: solid 2px #f2f2f4;
}
.infopop .head .h2:hover{
  background: var(--color-link);
}

.infopop .content{
  overflow-y: scroll;
  width: 100%;
  height: 80%;
  height: calc(100% - 50px);
  line-height: 50px;
  font-size: .75em;
  padding: 30px 40px 50px;
}
@media only screen and (max-width: 768px){
  .infopop{
    top: 0;
    height: 100%;
  }
}











/***************************start***************************/
/*!
 * cs-ui.css - http://codesheet.org/cs/N9adRZf6/codesheet.org-ui
 * Version - 3.0.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 codesheet
 */
/*
@charset "UTF-8";
:root{
  --color-black: #000;
  --color-white: #fff;
  --color-orange: #fea543;
  --color-grey: #f4f4f2;
  --color-link: #fe6f61;
  --color-link-hover: #fa1a01;
  --bg-primary: #679fe4;
  --bg-danger: #ff6969;
  --bg-e74c3c: #f42e78;
  --bg-success: #ADD172;
  --bg-info: #f1c40f;
  --bg-warning: #fea543;
  --bg-black: #000;
  --bg-violet: #8e44ad;
}

*{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  text-align:left;
}
*::after,*::before{
  box-sizing: border-box;
}
ul,ol{list-style:none;}
*:before,*:after{box-sizing:inherit}
html, body{
  height:100%;
  height:100vh;
}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6{
  font-size-adjust: 0.5;
}

body{
  color:#121224;
  background: #f1f2f3;
  padding: 0;
  font-family: "Source Sans Pro", sans-serif;
}
::-webkit-scrollbar{
  width: 4px;
}
::-webkit-scrollbar-track{
  background: #fff; 
}
::-webkit-scrollbar-thumb{
  background: #bebec5; 
}
::-webkit-scrollbar-thumb:hover{
  background: #555; 
}

h1{
  font-size: 2.2em;
  line-height: 1.8;
}
h2{
  font-size: 1.8em;
  line-height: 1.8;
}
h3{
  font-size: 1.45em;
  line-height: 2.625em;
}
h4{
  font-size: 1.115em;
  line-height: 1.6875em;
}
p{
  font-size: 1em;
  line-height: 1.5em;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 768px){
  h1{
    font-size: 3em;
    line-height: 4.5em;
    padding: 20px 0;
  }
  h2{
    font-size: 2.25em;
    line-height: 3.375em;
    padding: 20px 0;
  }
  h3{
    font-size: 1.75em;
    line-height: 2.625em;
    padding: 20px 0;
  }
  h4{
    font-size: 1.125em;
    line-height: 1.6875em;
    padding: 20px 0;
  }
  p{
    font-size: 1em;
    line-height: 1.5em;
    letter-spacing: 0.03em;
  }
  ul li{
    font-size: 1em;
    line-height: 1.5em;
    letter-spacing: 0.03em;
    margin-left: 30px;
  }
}
*/


.bcb{
	border: solid 1px var(--bg-black);
}

a{
  cursor: pointer;
  font-size: 1em;
  color: var(--color-link);
  text-decoration: none;
  transition:all .4s ease-in-out;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
  -khtml-transition:all .4s ease-in-out;
}
a:hover,a:focus{
  color: var(--color-link-hover);
  outline: none;
}

.tal,.text-align-left{text-align:left}
.tac,.text-align-center,center{text-align:center}
.tar,.text-align-right{text-align:right}
@media only screen and (min-width :496px){
  .s-tal,.s-text-align-left{text-align:left}
  .s-tac,.s-text-align-center,center{text-align:center}
  .s-tar,.s-text-align-right{text-align:right}
}
@media only screen and (min-width :768px){
  .m-tal,.m-text-align-left{text-align:left}
  .m-tac,.m-text-align-center,center{text-align:center}
  .m-tar,.m-text-align-right{text-align:right}
}
@media only screen and (min-width :1024px){
  .l-tal,.l-text-align-left{text-align:left}
  .l-tac,.l-text-align-center,center{text-align:center}
  .l-tar,.l-text-align-right{text-align:right}
}

strong,.strong{font-weight:bold}

.to,.text-overflow{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.fs10,.font-size-10{font-size:10px}
.fs11,.font-size-11{font-size:11px}
.fs12,.font-size-12{font-size:12px}
.fs13,.font-size-13{font-size:13px}
.fs14,.font-size-14{font-size:14px}
.fs15,.font-size-15{font-size:15px}
.fs16,.font-size-16{font-size:16px}
.fs17,.font-size-17{font-size:17px}
.fs18,.font-size-18{font-size:18px}
.fs19,.font-size-19{font-size:19px}
.fs20,.font-size-20{font-size:20px}
@media only screen and (min-width :496px){
  .s-fs10,.s-font-size-10{font-size:10px}
  .s-fs11,.s-font-size-11{font-size:11px}
  .s-fs12,.s-font-size-12{font-size:12px}
  .s-fs13,.s-font-size-13{font-size:13px}
  .s-fs14,.s-font-size-14{font-size:14px}
  .s-fs15,.s-font-size-15{font-size:15px}
  .s-fs16,.s-font-size-16{font-size:16px}
  .s-fs17,.s-font-size-17{font-size:17px}
  .s-fs18,.s-font-size-18{font-size:18px}
  .s-fs19,.s-font-size-19{font-size:19px}
  .s-fs20,.s-font-size-20{font-size:20px}
  .s-fsh3,.s-font-size-h3{font-size:1.6em}
  .s-fsh2,.s-font-size-h2{font-size:2em}
  .s-fsh1,.s-font-size-h1{font-size:2.4em;line-height: 1}
}
@media only screen and (min-width :768px){
  .m-fs10,.m-font-size-10{font-size:10px}
  .m-fs11,.m-font-size-11{font-size:11px}
  .m-fs12,.m-font-size-12{font-size:12px}
  .m-fs13,.m-font-size-13{font-size:13px}
  .m-fs14,.m-font-size-14{font-size:14px}
  .m-fs15,.m-font-size-15{font-size:15px}
  .m-fs16,.m-font-size-16{font-size:16px}
  .m-fs17,.m-font-size-17{font-size:17px}
  .m-fs18,.m-font-size-18{font-size:18px}
  .m-fs19,.m-font-size-19{font-size:19px}
  .m-fs20,.m-font-size-20{font-size:20px}
  .m-fsh3,.m-font-size-h3{font-size:1.6em}
  .m-fsh2,.m-font-size-h2{font-size:2em}
  .m-fsh1,.m-font-size-h1{font-size:2.4em}
}
@media only screen and (min-width :1024px){
  .l-fs10,.l-font-size-10{font-size:10px}
  .l-fs11,.l-font-size-11{font-size:11px}
  .l-fs12,.l-font-size-12{font-size:12px}
  .l-fs13,.l-font-size-13{font-size:13px}
  .l-fs14,.l-font-size-14{font-size:14px}
  .l-fs15,.l-font-size-15{font-size:15px}
  .l-fs16,.l-font-size-16{font-size:16px}
  .l-fs17,.l-font-size-17{font-size:17px}
  .l-fs18,.l-font-size-18{font-size:18px}
  .l-fs19,.l-font-size-19{font-size:19px}
  .l-fs20,.l-font-size-20{font-size:20px}
  .l-fsh3,.l-font-size-h3{font-size:1.6em}
  .l-fsh2,.l-font-size-h2{font-size:2em}
  .l-fsh1,.l-font-size-h1{font-size:2.4em}
}
@media only screen and (max-width :1440px){
  .xl-fs10,.xl-font-size-10{font-size:10px}
  .xl-fs11,.xl-font-size-11{font-size:11px}
  .xl-fs12,.xl-font-size-12{font-size:12px}
  .xl-fs13,.xl-font-size-13{font-size:13px}
  .xl-fs14,.xl-font-size-14{font-size:14px}
  .xl-fs15,.xl-font-size-15{font-size:15px}
  .xl-fs16,.xl-font-size-16{font-size:16px}
  .xl-fs17,.xl-font-size-17{font-size:17px}
  .xl-fs18,.xl-font-size-18{font-size:18px}
  .xl-fs19,.xl-font-size-19{font-size:19px}
  .xl-fs20,.xl-font-size-20{font-size:20px}
  .xl-fsh3,.xl-font-size-h3{font-size:1.6em}
  .xl-fsh2,.xl-font-size-h2{font-size:2em}
  .xl-fsh1,.xl-font-size-h1{font-size:2.4em}
}




.bga,.background-active{background:var(--bg-active)}
.bgp,.background-primary{background:var(--bg-primary)}
.bgs,.background-success{background:var(--bg-success)}
.bgd,.background-danger{background:var(--bg-danger)}
.bgi,.background-info{background:var(--bg-info)}
.bgw,.background-warning{background:var(--bg-warning)}

.bgm,.background-magenta{background:var(--bg-magenta)}
.bgv,.background-violet{background:var(--bg-violet)}
.bgg,.background-grey{background:var(--bg-grey)}
.bg,.background-white{background:var(--bg-white)}
.bgb,.background-black{background:var(--bg-black)}

.fca,.font-color-active{color:var(--bg-active)}
.fcp,.font-color-primary{color:var(--bg-primary)}
.fcs,.font-color-success{color:var(--bg-success)}
.fcd,.font-color-danger{color:var(--bg-danger)}
.fci,.font-color-info{color:var(--bg-info)}
.fcw,.font-color-warning{color:var(--bg-warning)}

.fcm,.font-color-magenta{color:var(--bg-magenta)}
.fcv,.font-color-violet{color:var(--bg-violet)}
.fcg,.font-color-grey{color:var(--bg-grey)}
.fc,.font-color-white{color:var(--bg-white)}
.fcb,.font-color-black{color:var(--bg-black)}

@media only screen and (min-width :496px){

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

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

}
@media only screen and (min-width :1440px){

}



/***********************************grid**************************************/

.fl,.float-left{float:left}
.fr,.float-right{float:right}


.grid{
  position: relative;
  width:100%;
  height:auto;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.grid:after{
  content: "";
  display: table;
  clear:both;
}
.g0{grid-column: span 0;}
.g1{grid-column: span 1;}
.g2{grid-column: span 2;}
.g3{grid-column: span 3;}
.g4{grid-column: span 4;}
.g5{grid-column: span 5;}
.g6{grid-column: span 6;}
.g7{grid-column: span 7;}
.g8{grid-column: span 8;}
.g9{grid-column: span 9;}
.g10{grid-column: span 10;}
.g11{grid-column: span 11;}
.g12{grid-column: span 12;}

@media only screen and (min-width :496px){
  .s-g0{grid-column: span 0;}
  .s-g1{grid-column: span 1;}
  .s-g2{grid-column: span 2;}
  .s-g3{grid-column: span 3;}
  .s-g4{grid-column: span 4;}
  .s-g5{grid-column: span 5;}
  .s-g6{grid-column: span 6;}
  .s-g7{grid-column: span 7;}
  .s-g8{grid-column: span 8;}
  .s-g9{grid-column: span 9;}
  .s-g10{grid-column: span 10;}
  .s-g11{grid-column: span 11;}
  .s-g12{grid-column: span 12;}
}
@media only screen and (min-width :768px){
  .m-g0{grid-column: span 0;}
  .m-g1{grid-column: span 1;}
  .m-g2{grid-column: span 2;}
  .m-g3{grid-column: span 3;}
  .m-g4{grid-column: span 4;}
  .m-g5{grid-column: span 5;}
  .m-g6{grid-column: span 6;}
  .m-g7{grid-column: span 7;}
  .m-g8{grid-column: span 8;}
  .m-g9{grid-column: span 9;}
  .m-g10{grid-column: span 10;}
  .m-g11{grid-column: span 11;}
  .m-g12{grid-column: span 12;}
}
@media only screen and (min-width :1024px){
  .l-g0{grid-column: span 0;}
  .l-g1{grid-column: span 1;}
  .l-g2{grid-column: span 2;}
  .l-g3{grid-column: span 3;}
  .l-g4{grid-column: span 4;}
  .l-g5{grid-column: span 5;}
  .l-g6{grid-column: span 6;}
  .l-g7{grid-column: span 7;}
  .l-g8{grid-column: span 8;}
  .l-g9{grid-column: span 9;}
  .l-g10{grid-column: span 10;}
  .l-g11{grid-column: span 11;}
  .l-g12{grid-column: span 12;}
}
@media only screen and (min-width :1440px){
  .xl-g0{grid-column: span 0;}
  .xl-g1{grid-column: span 1;}
  .xl-g2{grid-column: span 2;}
  .xl-g3{grid-column: span 3;}
  .xl-g4{grid-column: span 4;}
  .xl-g5{grid-column: span 5;}
  .xl-g6{grid-column: span 6;}
  .xl-g7{grid-column: span 7;}
  .xl-g8{grid-column: span 8;}
  .xl-g9{grid-column: span 9;}
  .xl-g10{grid-column: span 10;}
  .xl-g11{grid-column: span 11;}
  .xl-g12{grid-column: span 12;}
}















.row{
  position: relative;
  width:100%;
  height:auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.row:after{
  content: "";
  display: table;
  clear:both;
}
.row.column{
  flex-direction: column;
}
.row.start{
  justify-content: start;
}
.row.end{
  justify-content: end;
}
.row.center{
  justify-content: center;
}
.row.space-between{
  justify-content: space-between;
}

@media only screen and (min-width :496px){
	.s-row{
	  flex-direction: column;
	}
	.s-column{
	  flex-direction: column;
	}
}

@media only screen and (min-width :768px){
  .m-row{
    flex-direction: row;
  }
	.m-column{
	  flex-direction: column;
	}
}

@media only screen and (min-width :1024px){
  .l-row{
    flex-direction: row;
  }
	.l-column{
	  flex-direction: column;
	}
}

@media only screen and (min-width :1440px){
  .xl-row{
    flex-direction: row;
  }
	.xl-column{
	  flex-direction: column;
	}
}


/*12 grid system*/

.c1{ width:8.3333%;}
.c2{ width:16.6666%;}
.c3{ width:25%;}
.c4{ width:33.3333%;}
.c5{ width:41.6666%;}
.c6{ width:50%;}
.c7{ width:58.3333%;}
.c8{ width:66.6666%;}
.c9{ width:75%;}
.c10{ width:83.33333%;}
.c11{ width:91.66666%;}
.c12{ width:100%;}

@media only screen and (min-width :496px){
  .s-c1{ width:8.3333%}
  .s-c2{ width:16.6666%}
  .s-c3{ width:25%}
  .s-c4{ width:33.3333%}
  .s-c5{ width:41.6666%;}
  .s-c6{ width:50%}
  .s-c7{ width:58.3333%}
  .s-c8{ width:66.6666%}
  .s-c9{ width:75%}
  .s-c10{ width:83.33333%}
  .s-c11{ width:91.66666%}
  .s-c12{ width:100%}
}
@media only screen and (min-width :768px){
  .m-c1{ width:8.3333%;}
  .m-c2{ width:16.6666%;}
  .m-c3{ width:25%;}
  .m-c4{ width:33.3333%;}
  .m-c5{ width:41.6666%;}
  .m-c6{ width:50%;}
  .m-c7{ width:58.3333%;}
  .m-c8{ width:66.6666%;}
  .m-c9{ width:75%;}
  .m-c10{ width:83.33333%;}
  .m-c11{ width:91.66666%;}
  .m-c12{ width:100%;}
}
@media only screen and (min-width :1024px){
  .l-c1{ width:8.3333%;}
  .l-c2{ width:16.6666%;}
  .l-c3{ width:25%;}
  .l-c4{ width:33.3333%;}
  .l-c5{ width:41.6666%;}
  .l-c6{ width:50%;}
  .l-c7{ width:58.3333%;}
  .l-c8{ width:66.6666%;}
  .l-c9{ width:75%;}
  .l-c10{ width:83.33333%;}
  .l-c11{ width:91.66666%;}
  .l-c12{ width:100%;}
}
@media only screen and (min-width :1440px){
  .xl-c1{ width:8.3333%;}
  .xl-c2{ width:16.6666%;}
  .xl-c3{ width:25%;}
  .xl-c4{ width:33.3333%;}
  .xl-c5{ width:41.6666%;}
  .xl-c6{ width:50%;}
  .xl-c7{ width:58.3333%;}
  .xl-c8{ width:66.6666%;}
  .xl-c9{ width:75%;}
  .xl-c10{ width:83.33333%;}
  .xl-c11{ width:91.66666%;}
  .xl-c12{ width:100%;}
}



.max{width:100%;max-width:1100px;margin:0 auto;}
.max.w600{width:90%;max-width:600px;margin:0 auto;}
.max.w700{width:100%;max-width:700px;margin:0 auto;}
.max.w800{width:100%;max-width:800px;margin:0 auto;}
.max.w900{width:100%;max-width:900px;margin:0 auto;}
.max.w1000{width:100%;max-width:1000px;margin:0 auto;}

.clr,.clear{clear:both;width:100%;height:0px;}

/***************************grid****************************/




/*borders*/

.mt0,.margin-top-0{margin-top:0px}
.mr0,.margin-right-0{margin-right:0px}
.mb0,.margin-bottom-0{margin-bottom:0px}
.ml0,.margin-left-0{margin-left:0px}
.m0,.margin-0{margin:0px}

.mt5,.margin-top-5{margin-top:5px}
.mr5,.margin-right-5{margin-right:5px}
.mb5,.margin-bottom-5{margin-bottom:5px}
.ml5,.margin-left-5{margin-left:5px}
.m5,.margin-5{margin:5px}

.mt10,.margin-top-10{margin-top:10px}
.mr10,.margin-right-10{margin-right:10px}
.mb10,.margin-bottom-10{margin-bottom:10px}
.ml10,.margin-left-10{margin-left:10px}
.m10,.margin-10{margin:10px}

.mt15,.margin-top-15{margin-top:15px}
.mr15,.margin-right-15{margin-right:15px}
.mb15,.margin-bottom-15{margin-bottom:15px}
.ml15,.margin-left-15{margin-left:15px}
.m15,.margin-15{margin:15px}

.mt20,.margin-top-20{margin-top:20px}
.mr20,.margin-right-20{margin-right:20px}
.mb20,.margin-bottom-20{margin-bottom:20px}
.ml20,.margin-left-20{margin-left:20px}
.m20,.margin-20{margin:20px}

.mt30,.margin-top-30{margin-top:30px}
.mr30,.margin-right-30{margin-right:30px}
.mb30,.margin-bottom-30{margin-bottom:30px}
.ml30,.margin-left-30{margin-left:30px}
.m30,.margin-30{margin:30px}

.mt40,.margin-top-40{margin-top:40px}
.mr40,.margin-right-40{margin-right:40px}
.mb40,.margin-bottom-40{margin-bottom:40px}
.ml40,.margin-left-40{margin-left:40px}
.m40,.margin-40{margin:40px}

.mt50,.margin-top-50{margin-top:50px}
.mr50,.margin-right-50{margin-right:50px}
.mb50,.margin-bottom-50{margin-bottom:50px}
.ml50,.margin-left-50{margin-left:50px}
.m50,.margin-50{margin:50px}

.mt60,.margin-top-60{margin-top:60px}
.mr60,.margin-right-60{margin-right:60px}
.mb60,.margin-bottom-60{margin-bottom:60px}
.ml60,.margin-left-60{margin-left:60px}
.m60,.margin-60{margin:60px}

.mt70,.margin-top-70{margin-top:70px}
.mr70,.margin-right-70{margin-right:70px}
.mb70,.margin-bottom-70{margin-bottom:70px}
.ml70,.margin-left-70{margin-left:70px}
.m70,.margin-70{margin:70px}

.mt80,.margin-top-80{margin-top:80px}
.mr80,.margin-right-80{margin-right:80px}
.mb80,.margin-bottom-80{margin-bottom:80px}
.ml80,.margin-left-80{margin-left:80px}
.m80,.margin-80{margin:80px}

.mt90,.margin-top-90{margin-top:90px}
.mr90,.margin-right-90{margin-right:90px}
.mb90,.margin-bottom-90{margin-bottom:90px}
.ml90,.margin-left-90{margin-left:90px}
.m90,.margin-90{margin:90px}

.mt100,.margin-top-100{margin-top:100px}
.mr100,.margin-right-100{margin-right:100px}
.mb100,.margin-bottom-100{margin-bottom:100px}
.ml100,.margin-left-100{margin-left:100px}
.m100,.margin-100{margin:100px}

.mt150,.margin-top-150{margin-top:150px}
.mr150,.margin-right-150{margin-right:150px}
.mb150,.margin-bottom-150{margin-bottom:150px}
.ml150,.margin-left-150{margin-left:150px}
.m150,.margin-150{margin:150px}

.mt200,.margin-top-200{margin-top:200px}
.mr200,.margin-right-200{margin-right:200px}
.mb200,.margin-bottom-200{margin-bottom:200px}
.ml200,.margin-left-200{margin-left:200px}
.m200,.margin-200{margin:200px}

@media only screen and (min-width :496px){
  .s-mt0{margin-top:0px}
  .s-mr0{margin-right:0px}
  .s-mb0{margin-bottom:0px}
  .s-ml0{margin-left:0px}
  .s-m0{margin:0px}

  .s-mt5{margin-top:5px}
  .s-mr5{margin-right:5px}
  .s-mb5{margin-bottom:5px}
  .s-ml5{margin-left:5px}
  .s-m5{margin:5px}

  .s-mt10{margin-top:10px}
  .s-mr10{margin-right:10px}
  .s-mb10{margin-bottom:10px}
  .s-ml10{margin-left:10px}
  .s-m10{margin:10px}

  .s-mt15{margin-top:15px}
  .s-mr15{margin-right:15px}
  .s-mb15{margin-bottom:15px}
  .s-ml15{margin-left:15px}
  .s-m15{margin:15px}

  .s-mt20{margin-top:20px}
  .s-mr20{margin-right:20px}
  .s-mb20{margin-bottom:20px}
  .s-ml20{margin-left:20px}
  .s-m20{margin:20px}

  .s-mt30{margin-top:30px}
  .s-mr30{margin-right:30px}
  .s-mb30{margin-bottom:30px}
  .s-ml30{margin-left:30px}
  .s-m30{margin:30px}

  .s-mt40{margin-top:40px}
  .s-mr40{margin-right:40px}
  .s-mb40{margin-bottom:40px}
  .s-ml40{margin-left:40px}
  .s-m40{margin:40px}

  .s-mt50{margin-top:50px}
  .s-mr50{margin-right:50px}
  .s-mb50{margin-bottom:50px}
  .s-ml50{margin-left:50px}
  .s-m50{margin:50px}

  .s-mt60{margin-top:60px}
  .s-mr60{margin-right:60px}
  .s-mb60{margin-bottom:60px}
  .s-ml60{margin-left:60px}
  .s-m600{margin:60px}

  .s-mt70{margin-top:70px}
  .s-mr70{margin-right:70px}
  .s-mb70{margin-bottom:70px}
  .s-ml70{margin-left:70px}
  .s-m70{margin:70px}

  .s-mt80{margin-top:80px}
  .s-mr80{margin-right:80px}
  .s-mb80{margin-bottom:80px}
  .s-ml80{margin-left:80px}
  .s-m00{margin:80px}

  .s-mt90{margin-top:90px}
  .s-mr90{margin-right:90px}
  .s-mb90{margin-bottom:90px}
  .s-ml90{margin-left:90px}
  .s-m90{margin:90px}

  .s-mt100{margin-top:100px}
  .s-mr100{margin-right:100px}
  .s-mb100{margin-bottom:100px}
  .s-ml100{margin-left:100px}
  .s-m100{margin:100px}

  .s-mt150{margin-top:150px}
  .s-mr150{margin-right:150px}
  .s-mb150{margin-bottom:150px}
  .s-ml150{margin-left:150px}
  .s-m150{margin:150px}

  .s-mt200{margin-top:200px}
  .s-mr200{margin-right:200px}
  .s-mb200{margin-bottom:200px}
  .s-ml200{margin-left:200px}
  .s-m200{margin:200px}
}

@media only screen and (min-width :768px){
  .m-mt0{margin-top:0px}
  .m-mr0{margin-right:0px}
  .m-mb0{margin-bottom:0px}
  .m-ml0{margin-left:0px}
  .m-m0{margin:0px}

  .m-mt5{margin-top:5px}
  .m-mr5{margin-right:5px}
  .m-mb5{margin-bottom:5px}
  .m-ml5{margin-left:5px}
  .m-m5{margin:5px}

  .m-mt10{margin-top:10px}
  .m-mr10{margin-right:10px}
  .m-mb10{margin-bottom:10px}
  .m-ml10{margin-left:10px}
  .m-m10{margin:10px}

  .m-mt15{margin-top:15px}
  .m-mr15{margin-right:15px}
  .m-mb15{margin-bottom:15px}
  .m-ml15{margin-left:15px}
  .m-m15{margin:15px}

  .m-mt20{margin-top:20px}
  .m-mr20{margin-right:20px}
  .m-mb20{margin-bottom:20px}
  .m-ml20{margin-left:20px}
  .m-m20{margin:20px}

  .m-mt30{margin-top:30px}
  .m-mr30{margin-right:30px}
  .m-mb30{margin-bottom:30px}
  .m-ml30{margin-left:30px}
  .m-m30{margin:30px}

  .m-mt40{margin-top:40px}
  .m-mr40{margin-right:40px}
  .m-mb40{margin-bottom:40px}
  .m-ml40{margin-left:40px}
  .m-m40{margin:40px}

  .m-mt50{margin-top:50px}
  .m-mr50{margin-right:50px}
  .m-mb50{margin-bottom:50px}
  .m-ml50{margin-left:50px}
  .m-m50{margin:50px}

  .m-mt60{margin-top:60px}
  .m-mr60{margin-right:60px}
  .m-mb60{margin-bottom:60px}
  .m-ml60{margin-left:60px}
  .m-m60{margin:60px}

  .m-mt70{margin-top:70px}
  .m-mr70{margin-right:70px}
  .m-mb70{margin-bottom:70px}
  .m-ml70{margin-left:70px}
  .m-m70{margin:70px}

  .m-mt80{margin-top:80px}
  .m-mr80{margin-right:80px}
  .m-mb80{margin-bottom:80px}
  .m-ml80{margin-left:80px}
  .m-m80{margin:80px}

  .m-mt90{margin-top:90px}
  .m-mr90{margin-right:90px}
  .m-mb90{margin-bottom:90px}
  .m-ml90{margin-left:90px}
  .m-m90{margin:90px}

  .m-mt100{margin-top:100px}
  .m-mr100{margin-right:100px}
  .m-mb100{margin-bottom:100px}
  .m-ml100{margin-left:100px}
  .m-m100{margin:100px}

  .m-mt150{margin-top:150px}
  .m-mr150{margin-right:150px}
  .m-mb150{margin-bottom:150px}
  .m-ml150{margin-left:150px}
  .m-m150{margin:150px}

  .m-mt200{margin-top:200px}
  .m-mr200{margin-right:200px}
  .m-mb200{margin-bottom:200px}
  .m-ml200{margin-left:200px}
  .m-m200{margin:200px}
}

@media only screen and (min-width :1024px){
  .l-mt0{margin-top:0px}
  .l-mr0{margin-right:0px}
  .l-mb0{margin-bottom:0px}
  .l-ml0{margin-left:0px}
  .l-m0{margin:0px}

  .l-mt5{margin-top:5px}
  .l-mr5{margin-right:5px}
  .l-mb5{margin-bottom:5px}
  .l-ml5{margin-left:5px}
  .l-m5{margin:5px}

  .l-mt10{margin-top:10px}
  .l-mr10{margin-right:10px}
  .l-mb10{margin-bottom:10px}
  .l-ml10{margin-left:10px}
  .l-m10{margin:10px}

  .l-mt15{margin-top:15px}
  .l-mr15{margin-right:15px}
  .l-mb15{margin-bottom:15px}
  .l-ml15{margin-left:15px}
  .l-m15{margin:15px}

  .l-mt20{margin-top:20px}
  .l-mr20{margin-right:20px}
  .l-mb20{margin-bottom:20px}
  .l-ml20{margin-left:20px}
  .l-m20{margin:20px}

  .l-mt30{margin-top:30px}
  .l-mr30{margin-right:30px}
  .l-mb30{margin-bottom:30px}
  .l-ml30{margin-left:30px}
  .l-m30{margin:30px}

  .l-mt40{margin-top:40px}
  .l-mr40{margin-right:40px}
  .l-mb40{margin-bottom:40px}
  .l-ml40{margin-left:40px}
  .l-m40{margin:40px}

  .l-mt50{margin-top:50px}
  .l-mr50{margin-right:50px}
  .l-mb50{margin-bottom:50px}
  .l-ml50{margin-left:50px}
  .l-m50{margin:50px}

  .l-mt60{margin-top:60px}
  .l-mr60{margin-right:60px}
  .l-mb60{margin-bottom:60px}
  .l-ml60{margin-left:60px}
  .l-m60{margin:60px}

  .l-mt70{margin-top:70px}
  .l-mr70{margin-right:70px}
  .l-mb70{margin-bottom:70px}
  .l-ml70{margin-left:70px}
  .l-m70{margin:70px}

  .l-mt80{margin-top:80px}
  .l-mr80{margin-right:80px}
  .l-mb80{margin-bottom:80px}
  .l-ml80{margin-left:80px}
  .l-m80{margin:80px}

  .l-mt90{margin-top:90px}
  .l-mr90{margin-right:90px}
  .l-mb90{margin-bottom:90px}
  .l-ml90{margin-left:90px}
  .l-m90{margin:90px}

  .l-mt100{margin-top:100px}
  .l-mr100{margin-right:100px}
  .l-mb100{margin-bottom:100px}
  .l-ml100{margin-left:100px}
  .l-m100{margin:100px}

  .l-mt150{margin-top:150px}
  .l-mr150{margin-right:150px}
  .l-mb150{margin-bottom:150px}
  .l-ml150{margin-left:150px}
  .l-m150{margin:150px}

  .l-mt200{margin-top:200px}
  .l-mr200{margin-right:200px}
  .l-mb200{margin-bottom:200px}
  .l-ml200{margin-left:200px}
  .l-m200{margin:200px}
}

@media only screen and (min-width :1440px){
  .xl-mt0{margin-top:0px}
  .xl-mr0{margin-right:0px}
  .xl-mb0{margin-bottom:0px}
  .xl-ml0{margin-left:0px}
  .xl-m0{margin:0px}

  .xl-mt5{margin-top:5px}
  .xl-mr5{margin-right:5px}
  .xl-mb5{margin-bottom:5px}
  .xl-ml5{margin-left:5px}
  .xl-m5{margin:5px}

  .xl-mt10{margin-top:10px}
  .xl-mr10{margin-right:10px}
  .xl-mb10{margin-bottom:10px}
  .xl-ml10{margin-left:10px}
  .xl-m10{margin:10px}

  .xl-mt15{margin-top:15px}
  .xl-mr15{margin-right:15px}
  .xl-mb15{margin-bottom:15px}
  .xl-ml15{margin-left:15px}
  .xl-m15{margin:15px}

  .xl-mt20{margin-top:20px}
  .xl-mr20{margin-right:20px}
  .xl-mb20{margin-bottom:20px}
  .xl-ml20{margin-left:20px}
  .xl-m20{margin:20px}

  .xl-mt30{margin-top:30px}
  .xl-mr30{margin-right:30px}
  .xl-mb30{margin-bottom:30px}
  .xl-ml30{margin-left:30px}
  .xl-m30{margin:30px}

  .xl-mt40{margin-top:40px}
  .xl-mr40{margin-right:40px}
  .xl-mb40{margin-bottom:40px}
  .xl-ml40{margin-left:40px}
  .xl-m40{margin:40px}

  .xl-mt50{margin-top:50px}
  .xl-mr50{margin-right:50px}
  .xl-mb50{margin-bottom:50px}
  .xl-ml50{margin-left:50px}
  .xl-m50{margin:50px}

  .xl-mt60{margin-top:60px}
  .xl-mr60{margin-right:60px}
  .xl-mb60{margin-bottom:60px}
  .xl-ml60{margin-left:60px}
  .xl-m60{margin:60px}

  .xl-mt70{margin-top:70px}
  .xl-mr70{margin-right:70px}
  .xl-mb70{margin-bottom:70px}
  .xl-ml70{margin-left:70px}
  .xl-m70{margin:70px}

  .xl-mt80{margin-top:80px}
  .xl-mr80{margin-right:80px}
  .xl-mb80{margin-bottom:80px}
  .xl-ml80{margin-left:80px}
  .xl-m80{margin:80px}

  .xl-mt90{margin-top:90px}
  .xl-mr90{margin-right:90px}
  .xl-mb90{margin-bottom:90px}
  .xl-ml90{margin-left:90px}
  .xl-m90{margin:90px}

  .xl-mt100{margin-top:100px}
  .xl-mr100{margin-right:100px}
  .xl-mb100{margin-bottom:100px}
  .xl-ml100{margin-left:100px}
  .xl-m100{margin:100px}

  .xl-mt150{margin-top:150px}
  .xl-mr150{margin-right:150px}
  .xl-mb150{margin-bottom:150px}
  .xl-ml150{margin-left:150px}
  .xl-m150{margin:150px}

  .xl-mt200{margin-top:200px}
  .xl-mr200{margin-right:200px}
  .xl-mb200{margin-bottom:200px}
  .xl-ml200{margin-left:200px}
  .xl-m200{margin:200px}
}







.pt0,.padding-top-0{padding-top:0px}
.pr0,.padding-right-0{padding-right:0px}
.pb0,.padding-bottom-0{padding-bottom:0px}
.pl0,.padding-left-0{padding-left:0px}
.p0,.padding-0{padding:0px}

.pt5,.padding-top-5{padding-top:5px}
.pr5,.padding-right-5{padding-right:5px}
.pb5,.padding-bottom-5{padding-bottom:5px}
.pl5,.padding-left-5{padding-left:5px}
.p5,.padding-5{padding:5px}

.pt10,.padding-top-10{padding-top:10px}
.pr10,.padding-right-10{padding-right:10px}
.pb10,.padding-bottom-10{padding-bottom:10px}
.pl10,.padding-left-10{padding-left:10px}
.p10,.padding-10{padding:10px}

.pt15,.padding-top-15{padding-top:15px}
.pr15,.padding-right-15{padding-right:15px}
.pb15,.padding-bottom-15{padding-bottom:15px}
.pl15,.padding-left-15{padding-left:15px}
.p15,.padding-15{padding:15px}

.pt20,.padding-top-20{padding-top:20px}
.pr20,.padding-right-20{padding-right:20px}
.pb20,.padding-bottom-20{padding-bottom:20px}
.pl20,.padding-left-20{padding-left:20px}
.p20,.padding-20{padding:20px}

.pt30,.padding-top-30{padding-top:30px}
.pr30,.padding-right-30{padding-right:30px}
.pb30,.padding-bottom-30{padding-bottom:30px}
.pl30,.padding-left-30{padding-left:30px}
.p30,.padding-30{padding:30px}

.pt40,.padding-top-40{padding-top:40px}
.pr40,.padding-right-40{padding-right:40px}
.pb40,.padding-bottom-40{padding-bottom:40px}
.pl40,.padding-left-40{padding-left:40px}
.p40,.padding-40{padding:40px}

.pt50,.padding-top-50{padding-top:50px}
.pr50,.padding-right-50{padding-right:50px}
.pb50,.padding-bottom-50{padding-bottom:50px}
.pl50,.padding-left-50{padding-left:50px}
.p50,.padding-50{padding:50px}

.pt60,.padding-top-60{padding-top:60px}
.pr60,.padding-right-60{padding-right:60px}
.pb60,.padding-bottom-60{padding-bottom:60px}
.pl60,.padding-left-60{padding-left:60px}
.p60,.padding-60{padding:60px}

.pt70,.padding-top-70{padding-top:70px}
.pr70,.padding-right-70{padding-right:70px}
.pb70,.padding-bottom-70{padding-bottom:70px}
.pl70,.padding-left-70{padding-left:70px}
.p70,.padding-70{padding:70px}

.pt80,.padding-top-80{padding-top:80px}
.pr80,.padding-right-80{padding-right:80px}
.pb80,.padding-bottom-80{padding-bottom:80px}
.pl80,.padding-left-80{padding-left:80px}
.p80,.padding-80{padding:80px}

.pt90,.padding-top-90{padding-top:90px}
.pr90,.padding-right-90{padding-right:90px}
.pb90,.padding-bottom-90{padding-bottom:90px}
.pl90,.padding-left-90{padding-left:90px}
.p90,.padding-90{padding:90px}

.pt100,.padding-top-100{padding-top:100px}
.pr100,.padding-right-100{padding-right:100px}
.pb100,.padding-bottom-100{padding-bottom:100px}
.pl100,.padding-left-100{padding-left:100px}
.p100,.padding-100{padding:100px}

.pt150,.padding-top-150{padding-top:150px}
.pr150,.padding-right-150{padding-right:150px}
.pb150,.padding-bottom-150{padding-bottom:150px}
.pl150,.padding-left-150{padding-left:150px}
.p150,.padding-150{padding:150px}

.pt200,.padding-top-200{padding-top:200px}
.pr200,.padding-right-200{padding-right:200px}
.pb200,.padding-bottom-200{padding-bottom:200px}
.pl200,.padding-left-200{padding-left:200px}
.p200,.padding-200{padding:200px}

@media only screen and (min-width :496px){
  .s-pt0{padding-top:0px}
  .s-pr0{padding-right:0px}
  .s-pb0{padding-bottom:0px}
  .s-pl0{padding-left:0px}
  .s-p0{padding:0px}

  .s-pt5{padding-top:5px}
  .s-pr5{padding-right:5px}
  .s-pb5{padding-bottom:5px}
  .s-pl5{padding-left:5px}
  .s-p5{padding:5px}

  .s-pt10{padding-top:10px}
  .s-pr10{padding-right:10px}
  .s-pb10{padding-bottom:10px}
  .s-pl10{padding-left:10px}
  .s-p10{padding:10px}

  .s-pt15{padding-top:15px}
  .s-pr15{padding-right:15px}
  .s-pb15{padding-bottom:15px}
  .s-pl15{padding-left:15px}
  .s-p15{padding:15px}

  .s-pt20{padding-top:20px}
  .s-pr20{padding-right:20px}
  .s-pb20{padding-bottom:20px}
  .s-pl20{padding-left:20px}
  .s-p20{padding:20px}

  .s-pt30{padding-top:30px}
  .s-pr30{padding-right:30px}
  .s-pb30{padding-bottom:30px}
  .s-pl30{padding-left:30px}
  .s-p30{padding:30px}

  .s-pt40{padding-top:40px}
  .s-pr40{padding-right:40px}
  .s-pb40{padding-bottom:40px}
  .s-pl40{padding-left:40px}
  .s-p40{padding:40px}

  .s-pt50{padding-top:50px}
  .s-pr50{padding-right:50px}
  .s-pb50{padding-bottom:50px}
  .s-pl50{padding-left:50px}
  .s-p50{padding:50px}

  .s-pt60{padding-top:60px}
  .s-pr60{padding-right:60px}
  .s-pb60{padding-bottom:60px}
  .s-pl60{padding-left:60px}
  .s-p60{padding:60px}

  .s-pt70{padding-top:70px}
  .s-pr70{padding-right:70px}
  .s-pb70{padding-bottom:70px}
  .s-pl70{padding-left:70px}
  .s-p70{padding:70px}

  .s-pt80{padding-top:80px}
  .s-pr80{padding-right:80px}
  .s-pb80{padding-bottom:80px}
  .s-pl80{padding-left:80px}
  .s-p80{padding:80px}

  .s-pt90{padding-top:90px}
  .s-pr90{padding-right:90px}
  .s-pb90{padding-bottom:90px}
  .s-pl90{padding-left:90px}
  .s-p90{padding:90px}

  .s-pt100{padding-top:100px}
  .s-pr100{padding-right:100px}
  .s-pb100{padding-bottom:100px}
  .s-pl100{padding-left:100px}
  .s-p100{padding:100px}

  .s-pt150{padding-top:150px}
  .s-pr150{padding-right:150px}
  .s-pb150{padding-bottom:150px}
  .s-pl150{padding-left:150px}
  .s-p150{padding:150px}

  .s-pt200{padding-top:200px}
  .s-pr200{padding-right:200px}
  .s-pb200{padding-bottom:200px}
  .s-pl200{padding-left:200px}
  .s-p200{margin:200px}
}

@media only screen and (min-width :768px){
  .m-pt0{padding-top:0px}
  .m-pr0{padding-right:0px}
  .m-pb0{padding-bottom:0px}
  .m-pl0{padding-left:0px}
  .m-p0{padding:0px}

  .m-pt5{padding-top:5px}
  .m-pr5{padding-right:5px}
  .m-pb5{padding-bottom:5px}
  .m-pl5{padding-left:5px}
  .m-p5{padding:5px}

  .m-pt10{padding-top:10px}
  .m-pr10{padding-right:10px}
  .m-pb10{padding-bottom:10px}
  .m-pl10{padding-left:10px}
  .m-p10{padding:10px}

  .m-pt15{padding-top:15px}
  .m-pr15{padding-right:15px}
  .m-pb15{padding-bottom:15px}
  .m-pl15{padding-left:15px}
  .m-p15{padding:15px}

  .m-pt20{padding-top:20px}
  .m-pr20{padding-right:20px}
  .m-pb20{padding-bottom:20px}
  .m-pl20{padding-left:20px}
  .m-p20{padding:20px}

  .m-pt30{padding-top:30px}
  .m-pr30{padding-right:30px}
  .m-pb30{padding-bottom:30px}
  .m-pl30{padding-left:30px}
  .m-p30{padding:30px}

  .m-pt40{padding-top:40px}
  .m-pr40{padding-right:40px}
  .m-pb40{padding-bottom:40px}
  .m-pl40{padding-left:40px}
  .m-p40{padding:40px}

  .m-pt50{padding-top:50px}
  .m-pr50{padding-right:50px}
  .m-pb50{padding-bottom:50px}
  .m-pl50{padding-left:50px}
  .m-p50{padding:50px}

  .m-pt60{padding-top:60px}
  .m-pr60{padding-right:60px}
  .m-pb60{padding-bottom:60px}
  .m-pl60{padding-left:60px}
  .m-p60{padding:60px}

  .m-pt70{padding-top:70px}
  .m-pr70{padding-right:70px}
  .m-pb70{padding-bottom:70px}
  .m-pl70{padding-left:70px}
  .m-p70{padding:70px}

  .m-pt80{padding-top:80px}
  .m-pr80{padding-right:80px}
  .m-pb80{padding-bottom:80px}
  .m-pl80{padding-left:80px}
  .m-p80{padding:80px}

  .m-pt90{padding-top:90px}
  .m-pr90{padding-right:90px}
  .m-pb90{padding-bottom:90px}
  .m-pl90{padding-left:90px}
  .m-p90{padding:90px}

  .m-pt100{padding-top:100px}
  .m-pr100{padding-right:100px}
  .m-pb100{padding-bottom:100px}
  .m-pl100{padding-left:100px}
  .m-p100{padding:100px}

  .m-pt150{padding-top:150px}
  .m-pr150{padding-right:150px}
  .m-pb150{padding-bottom:150px}
  .m-pl150{padding-left:150px}
  .m-p150{padding:150px}

  .m-pt200{padding-top:200px}
  .m-pr200{padding-right:200px}
  .m-pb200{padding-bottom:200px}
  .m-pl200{padding-left:200px}
  .m-p200{padding:200px}
}

@media only screen and (min-width :1024px){
  .l-pt0{padding-top:0px}
  .l-pr0{padding-right:0px}
  .l-pb0{padding-bottom:0px}
  .l-pl0{padding-left:0px}
  .l-p0{padding:0px}

  .l-pt5{padding-top:5px}
  .l-pr5{padding-right:5px}
  .l-pb5{padding-bottom:5px}
  .l-pl5{padding-left:5px}
  .l-p5{padding:5px}

  .l-pt10{padding-top:10px}
  .l-pr10{padding-right:10px}
  .l-pb10{padding-bottom:10px}
  .l-pl10{padding-left:10px}
  .l-p10{padding:10px}

  .l-pt15{padding-top:15px}
  .l-pr15{padding-right:15px}
  .l-pb15{padding-bottom:15px}
  .l-pl15{padding-left:15px}
  .l-p15{padding:15px}

  .l-pt20{padding-top:20px}
  .l-pr20{padding-right:20px}
  .l-pb20{padding-bottom:20px}
  .l-pl20{padding-left:20px}
  .l-p20{padding:20px}

  .l-pt30{padding-top:30px}
  .l-pr30{padding-right:30px}
  .l-pb30{padding-bottom:30px}
  .l-pl30{padding-left:30px}
  .l-p30{padding:30px}

  .l-pt40{padding-top:40px}
  .l-pr40{padding-right:40px}
  .l-pb40{padding-bottom:40px}
  .l-pl40{padding-left:40px}
  .l-p40{padding:40px}

  .l-pt50{padding-top:50px}
  .l-pr50{padding-right:50px}
  .l-pb50{padding-bottom:50px}
  .l-pl50{padding-left:50px}
  .l-p50{padding:50px}

  .l-pt60{padding-top:60px}
  .l-pr60{padding-right:60px}
  .l-pb60{padding-bottom:60px}
  .l-pl60{padding-left:60px}
  .l-p60{padding:60px}

  .l-pt70{padding-top:70px}
  .l-pr70{padding-right:70px}
  .l-pb70{padding-bottom:70px}
  .l-pl70{padding-left:70px}
  .l-p70{padding:70px}

  .l-pt80{padding-top:80px}
  .l-pr80{padding-right:80px}
  .l-pb80{padding-bottom:80px}
  .l-pl80{padding-left:80px}
  .l-p80{padding:80px}

  .l-pt90{padding-top:90px}
  .l-pr90{padding-right:90px}
  .l-pb90{padding-bottom:90px}
  .l-pl90{padding-left:90px}
  .l-p90{padding:90px}

  .l-pt100{padding-top:100px}
  .l-pr100{padding-right:100px}
  .l-pb100{padding-bottom:100px}
  .l-pl100{padding-left:100px}
  .l-p100{padding:100px}

  .l-pt150{padding-top:150px}
  .l-pr150{padding-right:150px}
  .l-pb150{padding-bottom:150px}
  .l-pl150{padding-left:150px}
  .l-p150{padding:150px}

  .l-pt200{padding-top:200px}
  .l-pr200{padding-right:200px}
  .l-pb200{padding-bottom:200px}
  .l-pl200{padding-left:200px}
  .l-p200{padding:200px}
}

@media only screen and (min-width :1440px){
  .xl-pt0{padding-top:0px}
  .xl-pr0{padding-right:0px}
  .xl-pb0{padding-bottom:0px}
  .xl-pl0{padding-left:0px}
  .xl-p0{padding:0px}

  .xl-pt5{padding-top:5px}
  .xl-pr5{padding-right:5px}
  .xl-pb5{padding-bottom:5px}
  .xl-pl5{padding-left:5px}
  .xl-p5{padding:5px}

  .xl-pt10{padding-top:10px}
  .xl-pr10{padding-right:10px}
  .xl-pb10{padding-bottom:10px}
  .xl-pl10{padding-left:10px}
  .xl-p10{padding:10px}

  .xl-pt15{padding-top:15px}
  .xl-pr15{padding-right:15px}
  .xl-pb15{padding-bottom:15px}
  .xl-pl15{padding-left:15px}
  .xl-p15{padding:15px}

  .xl-pt20{padding-top:20px}
  .xl-pr20{padding-right:20px}
  .xl-pb20{padding-bottom:20px}
  .xl-pl20{padding-left:20px}
  .xl-p20{padding:20px}

  .xl-pt30{padding-top:30px}
  .xl-pr30{padding-right:30px}
  .xl-pb30{padding-bottom:30px}
  .xl-pl30{padding-left:30px}
  .xl-p30{padding:30px}

  .xl-pt40{padding-top:40px}
  .xl-pr40{padding-right:40px}
  .xl-pb40{padding-bottom:40px}
  .xl-pl40{padding-left:40px}
  .xl-p40{padding:40px}

  .xl-pt50{padding-top:50px}
  .xl-pr50{padding-right:50px}
  .xl-pb50{padding-bottom:50px}
  .xl-pl50{padding-left:50px}
  .xl-p50{padding:50px}

  .xl-pt60{padding-top:60px}
  .xl-pr60{padding-right:60px}
  .xl-pb60{padding-bottom:60px}
  .xl-pl60{padding-left:60px}
  .xl-p60{padding:60px}

  .xl-pt70{padding-top:70px}
  .xl-pr70{padding-right:70px}
  .xl-pb70{padding-bottom:70px}
  .xl-pl70{padding-left:70px}
  .xl-p70{padding:70px}

  .xl-pt80{padding-top:80px}
  .xl-pr80{padding-right:80px}
  .xl-pb80{padding-bottom:80px}
  .xl-pl80{padding-left:80px}
  .xl-p80{padding:80px}

  .xl-pt90{padding-top:90px}
  .xl-pr90{padding-right:90px}
  .xl-pb90{padding-bottom:90px}
  .xl-pl90{padding-left:90px}
  .xl-p90{padding:90px}

  .xl-pt100{padding-top:100px}
  .xl-pr100{padding-right:100px}
  .xl-pb100{padding-bottom:100px}
  .xl-pl100{padding-left:100px}
  .xl-p100{padding:100px}

  .xl-pt150{padding-top:150px}
  .xl-pr150{padding-right:150px}
  .xl-pb150{padding-bottom:150px}
  .xl-pl150{padding-left:150px}
  .xl-p150{padding:150px}

  .xl-pt200{padding-top:200px}
  .xl-pr200{padding-right:200px}
  .xl-pb200{padding-bottom:200px}
  .xl-pl200{padding-left:200px}
  .xl-p200{padding:200px}
}

/*************************general***************************/






/**************************loading**************************/

.spinner.loading{
  padding: 20px;
  position: relative;
  text-align: center;
}
.spinner.loading:before{
  content: "";
  width: 30px;
  height: 30px;
  margin: -15px auto auto -15px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: #33aaff #ebebeb #ebebeb;
  border-radius: 100%;
  animation: rotation .7s infinite linear;
}
@keyframes rotation{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(359deg);
  }
}
/**************************loading**************************/



/**************************button***************************/
.btn{
  display:inline-block;
  opacity:1;  
  position: relative;
  cursor:pointer;

  width: auto;
  height: auto;
/*  margin: 0 auto;
*/  padding: 10px 22px;

  border-radius: 0px;
  border:solid 1px #ebebeb;
  box-shadow: 0 10px 10px -10px #727C8E;
  background:#fff;

  text-align: center;
  font-size:.95em;
  font-weight: 600;
  color:#727C8E;

  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.btn.s{
  line-height: 20px;
  padding: 0 12px;
  font-size:9px;
}
.btn.m{
  line-height: 30px;
  padding: 0 16px;
  font-size:11px;
}
.btn.l{
/*default*/
}
.btn.xl{
  line-height: 50px;
  padding: 0 32px;
  font-size:14px;
}
.btn.xxl{
  line-height: 60px;
  padding: 0 36px;
  font-size:16px;
}
.btn:hover{
    opacity: .8;
}
.btn:active{
    opacity: .8;
  -ms-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
.btn.custom{border:none;background:var(--bg-pri);color:var(--color-white)}

.btn.primary{border:none;background:var(--bg-primary);color:var(--color-white)}
.btn.danger{border:none;background:var(--bg-danger);color:var(--color-white)}
.btn.success{border:none;background:var(--bg-success);color:var(--color-white)}
.btn.info{border:none;background:var(--bg-info);color:var(--color-white)}
.btn.warning{border:none;background:var(--bg-warning);color:var(--color-white)}
.btn.black{border:none;background:var(--bg-black);color:var(--color-white)}
.btn.violet{border:none;background:var(--bg-violet);color:var(--color-white)}

 
.btn.primary-outline{border:solid 1px var(--bg-primary);color:#679fe4;}
.btn.danger-outline{border:solid 1px #f42e78;color:#f42e78;}
.btn.success-outline{border:solid 1px #b8ff84;color:#409500;}
.btn.info-outline{border:solid 1px #f1c40f;color:#f1c40f;}
.btn.warning-outline{border:solid 1px #fea543;color:#fea543;}
.btn.black-outline{border:solid 1px #000;color:#000;}
.btn.violet-outline{border:solid 1px #8e44ad;color:#8e44ad;}

/***************************button***************************/





/***************************form***************************/
::-webkit-input-placeholder{ /* Chrome/Opera/Safari */
  font-size: .75rem;
  color:#909090;
  font-weight: 100;
  font-family: sans-serif;
}
::-moz-placeholder{ /* Firefox 19+ */
  font-size: .75rem;
  color:#909090;
  font-weight: 100;
  font-family: sans-serif;
}
:-ms-input-placeholder{ /* IE 10+ */
  font-size: .75rem;
  color:#909090;
  font-weight: 100;
  font-family: sans-serif;
}
:-moz-placeholder{ /* Firefox 18- */
  font-size: .75rem;
  color:#909090;
  font-family: sans-serif;
}

form{display:block;width:100%}
label{display:block}
abbr{cursor:pointer}
input.default{
  width:100%;
  height: 46px;
  color: #000;
  background: #f9f9f9;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  font-size: 1em;
  text-align:left;
  margin-bottom:5px;
  padding:0 0 0 20px;
}
input.default:focus{
  border-color: #55afe8;
  outline: 0;
}
input.readonly{
  cursor:not-allowed;
  opacity: .6;
}
input:required{
  background: #f1f1f1;
  border-color: #000;
}
input.input-selected{
  border-color: #f90;
  outline: 0;
}
textarea.default{
  width: 100%;
  height: 140px;
  color: #000;
  background: #f9f9f9;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius:23px;
  font-size: 1em;
  text-align:left;
  margin-bottom:5px;
  padding:20px;
}
textarea:focus{
  border-color: #55afe8;
  outline: 0;
}

select.default{
  width:100%;
  height: 46px;
  color: #000;
  background: #f9f9f9;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 99px;
  font-size: 1em;
  text-align:left;
  margin-bottom:5px;
  padding:0 0 0 20px;
}
select.input-selected{
  border-color: #f90;
  outline: 0;
}
select option{
  padding-top:5px;
  padding-bottom:5px;
  padding-left:10px;
}
select:focus{
  border-color: #55afe8;
  outline: 0;
}



/***************************checkbox***************************/


.checkbox{
  width:100%;
}
.checkbox input[type=checkbox]{
  display: none;
}
.checkbox input[type=checkbox] + label{
  cursor: pointer;
  display: inline-block;
  width: 100%;
  height: 17px;
  line-height: 17px;
  background: url(../img/svg/check_off.svg) no-repeat;
  background-size: 17px 17px;
  padding-top: 30px;
  padding-left: 0px;
}
.checkbox input[type=checkbox]:checked + label{
  background: url(../img/svg/check_on.svg) no-repeat;
  background-size: 17px 17px;
}
.checkbox .checkbox-text{
  cursor: pointer;
  position: relative;
  font-size: 1em;
  text-indent:0px;
}
@media only screen and (min-width :768px){
  .checkbox input[type=checkbox] + label{
    padding-top: 0px;
    padding-left: 30px;
  }
}
/***********white***********/
.checkbox.white{
  width:100%;
}
.checkbox.white input[type=checkbox]{
  display: none;
}
.checkbox.white input[type=checkbox] + label{
  cursor: pointer;
  display: inline-block;
  width: 100%;
  height: 17px;
  line-height: 17px;
  background: url(../img/svg/check_off_white.svg) no-repeat;
  background-size: 17px 17px;
}
.checkbox.white input[type=checkbox]:checked + label{
  background: url(../img/svg/check_on_white.svg) no-repeat;
  background-size: 17px 17px;
}
.checkbox.white .checkbox-text{
  cursor: pointer;
  position: relative;
  font-size: 1em;
  text-indent:20px;
}

/***********white***********/



.radio{
  width: 25px;
  height: 25px;
  margin: 10px 10px;
}
.radio input[type=radio]{
  display: none;
}
.radio input[type=radio] + label{
  cursor: pointer;
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
}

.radio input[type=radio] + label{
  opacity:.95;
}
.radio.yellow input[type=radio] + label{
  border: 4px solid yellow;
  background: yellow;
}
.radio.orange input[type=radio] + label{
  border: 4px solid orange;
  background: orange;
}
.radio.red input[type=radio] + label{
  border: 4px solid red;
  background: red;
}
.radio.blue input[type=radio] + label{
  border: 4px solid blue;
  background: blue;
}
.radio.green input[type=radio] + label{
  border: 4px solid green;
  background: green;
}
.radio.pink input[type=radio] + label{
  border: 4px solid pink;
  background: pink;
}


.radio input[type=radio]:checked + label{
  opacity:1;
  width: 25px;
  height: 25px;
  box-shadow: inset 0 0 0 4px #FFFFFF;
}
.radio.yellow input[type=radio]:checked + label{
  background: yellow;
}
.radio.orange input[type=radio]:checked + label{
  background: orange;
}
.radio.red input[type=radio]:checked + label{
  background: red;
}
.radio.blue input[type=radio]:checked + label{
  background: blue;
}
.radio.green input[type=radio]:checked + label{
  background: green;
}
.radio.pink input[type=radio]:checked + label{
  background: pink;
}


.radio .radio-text{
  font-size: 1rem;
  cursor: pointer;
  text-indent:30px;
}



/***************************submit***************************/
input[type=submit]{
  display: block;
  cursor: pointer;
  border: 0;
  outline: 0;
  border-radius: 1px;
  width: auto;
  max-width:600px;
  margin:0 auto;
  padding:12px 30px;
  font-size:15px;
  text-align:center;
  background:#679fe4;
  color:#fff;
}
input[type=submit]:hover{
  opacity: .8;
}
/***************************submit***************************/






.t,.trans,.transition{
  transition:all .5s ease-in-out;
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -khtml-transition:all .5s ease-in-out;
}

.bsb,.box-shadow-black{
  -webkit-box-shadow: 0px 10px 20px -10px rgba(51,51,51,0.73);
  -moz-box-shadow: 0px 10px 20px -10px rgba(51,51,51,0.73);
  box-shadow: 0px 10px 20px -10px rgba(51,51,51,0.73);
}

.bcg,.border-color-grey{border:solid 1px #d3d3d3}
.br10,.border-radius-10{border-radius:10px}

.hide,.hidden.display-none{display:none;}
.block,.display-block{display:block;}
.inline,.display-inline{display:inline-block;}

@media only screen and (min-width :496px){
  .s-hide,.hidden.display-none{display:none;}
  .s-block,.display-block{display:block;}
  .s-inline,.display-inline{display:inline-block;}
}

@media only screen and (min-width :768px){
  .m-hide,.hidden.display-none{display:none;}
  .m-block,.display-block{display:block;}
  .m-inline,.display-inline{display:inline-block;}
}

@media only screen and (min-width :1024px){
  .l-hide,.hidden.display-none{display:none;}
  .l-block,.display-block{display:block;}
  .l-inline,.display-inline{display:inline-block;}
}

@media only screen and (min-width :1440px){
  .xl-hide,.hidden.display-none{display:none;}
  .xl-block,.display-block{display:block;}
  .xl-inline,.display-inline{display:inline-block;}
}

/***************************position***************************/
.rel,.relative{
	position: relative;
}
.abs,.absolute{
	position: absolute;
}
.fix,.fixed{
	position: fixed;
}
.top-left{
	top: 20px;
	left: 20px;
}
.top-center{
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
}
.top-right{
	top: 20px;
	right: 20px;
}
/***************************position***************************/





/************************notification***********************/
.notification{
    display:none;
    text-align:center;
    border-radius:10px;
    padding:15px 30px;
    margin:0 auto 15px;
    border:solid 9px var(--bg-black);
    background: #fff;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.notification.active{
    display:table;
}
.notification.primary{
	border:solid 6px var(--bg-primary);
	background: #fff
}
.notification.success{
	border:solid 6px var(--bg-success);
	background: #fff
}
.notification.danger{
	border:solid 6px var(--bg-danger);
	background: #fff
}
.notification.info{
	border:solid 6px var(--bg-info);
	background: #fff
}
.notification.warning{
	border:solid 6px var(--bg-warning);
	background: #fff
}
/************************notification***********************/



/***************************table***************************/
div.table{
  overflow-x: auto;
}
table.table{
  box-sizing: border-box;
  width: 100%;
  margin: 0px auto 30px;
  background: #fff;
  font-size: 14px;
  border-collapse: collapse;
  border: solid 1px var(--bg-sec);
  border-bottom: solid 1px var(--bg-pri);
}
table.table thead{
}
table.table th{
  border-top: solid 1px transparent;
  border-left: solid 1px transparent;
  border-bottom: solid 2px var(--bg-sec);
  text-align: left;
  padding:10px;
  box-sizing: border-box;
  color:#333;
}
table.table td{
  text-align: left;
  padding:10px 20px;
  box-sizing: border-box;
  font-size: .95em;
}
table.table tr:nth-child(odd)   { background:#fff; }
table.table tr:nth-child(even)  { background:#b48a6626; }


/***************************table***************************/

/**************************table*2**************************/
table.primary{
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 20px;
  background: #fff;
  font-size: 14px;
  border-collapse: collapse;
  border-bottom: solid 2px #eee;
}
table.primary th{
  border-bottom: solid 2px #A3A1A2;
  text-align: left;
  padding:10px;
  box-sizing: border-box;
  background:#f6f6f6;
  color:#333;
}
table.primary td{
  border-bottom: solid 1px #E7E5E8;
  text-align: left;
  padding:10px 20px;
  box-sizing: border-box;
}
table.primary tr:hover { background:#f6f6f6; }
table.primary td:focus{background:#ccc;}

/***************************table***************************/

/**************************table*2**************************/
table.reg{
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0px auto 0px;
  background: #fff;
  font-size: 14px;
  border-collapse: collapse;
  border-bottom: solid 2px #eee;
}
table.reg th{
  border-bottom: solid 2px #A3A1A2;
  text-align: left;
  padding:10px;
  box-sizing: border-box;
  background:#f6f6f6;
  color:#333;
}
table.reg td{
  text-align: left;
  padding:20px 20px;
  box-sizing: border-box;
}
table.reg td input{
  width: 98%;
  height: 40px;
  text-align: left;
  padding:0 20px;
  border-bottom: solid 1px #A3A1A2;
}
table.reg td select{
  width: 98%;
  height: 40px;
  text-align: left;
  padding:0 20px;
  border-bottom: solid 1px #A3A1A2;
}

/***************************table***************************/

/**************************table*2**************************/
table.cart{
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 20px;
  background: #fff;
  font-size: .75em;
  border-collapse: collapse;
  border-bottom: solid 2px #eee;
}
table.cart th{
  border-bottom: solid 2px #A3A1A2;
  text-align: left;
  padding:10px;
  box-sizing: border-box;
  background:#f6f6f6;
  color:var(--color-dark);
}
table.cart td{
  border-bottom: solid 1px #E7E5E8;
  text-align: left;
  padding:4px 4px;
  box-sizing: border-box;
}

/***************************table***************************/


/**************************table*2**************************/
.shopping__cart{
  margin:100px auto;
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-bottom: solid 1px var(--bg-pri);
}
@media only screen and (min-width: 768px){
  .shopping__cart{
    font-size: 1.5em;
    flex-direction: row;
  }
}


table.shopping__cart{
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 100px auto 100px;
  background: #fff;
  font-size: .99em;
  border-collapse: collapse;
  border-bottom: solid 2px #eee;
}
table.shopping__cart th{
  border-bottom: solid 2px #A3A1A2;
  text-align: left;
  padding:10px;
  box-sizing: border-box;
  background:#f6f6f6;
  color:var(--color-dark);
}
table.shopping__cart td{
  border-bottom: solid 1px #E7E5E8;
  text-align: left;
  padding:10px 20px;
  box-sizing: border-box;
  font-size: 1.6em;
}
table.shopping__cart tr:hover { background:#f6f6f6; }
table.shopping__cart td:focus{background:#ccc;}

/***************************table***************************/





/**************************table*2**************************/
table.white{
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 20px;
  background: #fff;
  font-size: 14px;
  border-collapse: collapse;
  border: solid 1px #eee;
}
table.white th{
  border-bottom: solid 2px #A3A1A2;
  text-align: left;
  padding:10px;
  box-sizing: border-box;
  background:#f6f6f6;
  color:#333;
}
table.white td{
  border-left: solid 1px #E7E5E8;
  border-bottom: solid 1px #E7E5E8;
  text-align: left;
  padding:10px 20px;
  box-sizing: border-box;
}
table.white tr:hover { background:#f6f6f6; }
table.white td:focus{background:#ccc;}

/***************************table***************************/





.dropdown{
  width: 100%;
  max-width: 250px;
  margin:0 auto;
    position: relative;
}

.dropbtn{
  width: 100%;
  max-width: 250px;
    background-color: #006ca6;
    color: white;
    padding: 10px 16px;
    font-size: 14px;
    border: none;
      cursor: pointer;
    text-align: center;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


.dropdown-content{
    display: none;
    overflow:none;
    overflow-y:auto;
    position: absolute;
    right: 0;
    font-size: 13px;
    background-color: #f9f9f9;
    border-radius: 3px;
    min-width: 160px;
    max-height:300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover{background-color: #f1f1f1}

.dropdown:hover .dropdown-content{
    display: block;
}

.dropdown:hover .dropbtn{
    background-color: #0084c9;
}

.ajax__popup{
  display: none;
  z-index: 99999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  max-width: 990px;
  height: auto;
  max-height: 100vh;
  background: #fff;
  border:solid 1px #eee;
  box-shadow: 0 0 100px -20px;
  padding: 10px 30px 30px;
}
.ajax__popup .close{
  cursor: pointer;
  width: 100%;
  text-align: right;
  font-size: 30px;
  color: #a00;
}
.ajax__popup .inner{
  overflow-y: auto;
  width: 100%;
  height: auto;
  max-height: 80vh;
  text-align: center;
}
.ajax__popup #ajax__inner{
  width: 100%;
  height: auto;
  text-align: center;
}







/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip{
  position: relative;
  cursor: pointer; 
}

/* Base styles for the entire tooltip */
[data-tooltip]:after,
.tooltip:after{
  box-shadow: 0 1px 2px rgba(0,0,0,.99);
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after{
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -moz-transition:    
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transition:         
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after{
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before{
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after{
  z-index: 999999;
  padding: 10px;
  width: 180px;
  background-color: #111;
  color: #fff;
  content: attr(data-tooltip);
  font-size: 13px;
  line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after{
  bottom: 100%;
  left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before{
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #111;
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after{
  margin-left: -100px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after{
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px); 
}

/* Left */
.tooltip-left:before,
.tooltip-left:after{
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:before{
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #111;
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after{
  -webkit-transform: translateX(-12px);
  -moz-transform:    translateX(-12px);
  transform:         translateX(-12px); 
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after{
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:before{
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #111;
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after{
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px); 
}

/* Right */
.tooltip-right:before,
.tooltip-right:after{
  bottom: 50%;
  left: 100%;
}

.tooltip-right:before{
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #111;
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after{
  -webkit-transform: translateX(12px);
  -moz-transform:    translateX(12px);
  transform:         translateX(12px); 
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before{
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after{
  margin-left: 0;
  margin-bottom: -16px;
}



.animateIt { 
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-animation-duration: 1.2s; 
  animation-duration: 1.2s; 
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both; 
}
.animateIt.slow { 
  -webkit-animation-duration: 2s; 
  animation-duration: 2s; 
} 
.delayIt-150 {
  -webkit-animation-delay:0.15s;
  -moz-animation-delay:0.15s;
  -o-animation-delay:0.15s;
  animation-delay:0.15s;
}
.delayIt-250 {
  -webkit-animation-delay:0.25s;
  -moz-animation-delay:0.25s;
  -o-animation-delay:0.25s;
  animation-delay:0.25s;
}
.delayIt-350 {
  -webkit-animation-delay:0.35s;
  -moz-animation-delay:0.35s;
  -o-animation-delay:0.35s;
  animation-delay:0.35s;
}
.delayIt-450 {
  -webkit-animation-delay:0.45s;
  -moz-animation-delay:0.45s;
  -o-animation-delay:0.45s;
  animation-delay:0.45s;
}
.delayIt-550 {
  -webkit-animation-delay:0.55s;
  -moz-animation-delay:0.55s;
  -o-animation-delay:0.55s;
  animation-delay:0.55s;
}
.delayIt-650 {
  -webkit-animation-delay:0.65s;
  -moz-animation-delay:0.65s;
  -o-animation-delay:0.65s;
  animation-delay:0.65s;
}
.delayIt-750 {
  -webkit-animation-delay:0.75s;
  -moz-animation-delay:0.75s;
  -o-animation-delay:0.75s;
  animation-delay:0.75s;
}
.delayIt-850 {
  -webkit-animation-delay:0.85s;
  -moz-animation-delay:0.85s;
  -o-animation-delay:0.85s;
  animation-delay:0.85s;
}

.delayIt-1 {
  -webkit-animation-delay:.8s;
  -moz-animation-delay:.8s;
  -o-animation-delay:.8s;
  animation-delay:.8s;
}

.delayIt-2 {
  -webkit-animation-delay:1s;
  -moz-animation-delay:1s;
  -o-animation-delay:1s;
  animation-delay:1s;
}


.comeUp{
    opacity: 0; 
    transform: translateY(60px);  
    -webkit-transform: translateY(60px);  
}
.comeUp.go4it { 
  -webkit-animation-name: comeup; 
  animation-name: comeup; 
}
@-webkit-keyframes comeup { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(60px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0px);
    } 
} 
@keyframes comeup { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(60px); 
    } 
 
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0px);
    } 
}
.showIt {
  opacity: 1;
}
.showIt.go4it { 
  -webkit-animation-name: showit; 
  animation-name: showit; 
}
@-webkit-keyframes showit { 
    0% { 
      opacity: 0;
    } 
    100% { 
      opacity: 1;
    } 
} 
@keyframes showit { 
    0% { 
      opacity: 0;
    } 
    100% { 
      opacity: 1;
    } 
}