.show {
      -o-transition: opacity 3s;
      -moz-transition: opacity 3s;
      -webkit-transition: opacity 3s;
      transition: opacity 3s;
      opacity:1;
  }
  .hide {
      opacity:0;
  }
  
  /* carusel */
.MultiCarousel { float: left; overflow: hidden; padding:15px; width: 100%; position:relative; }
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
.MultiCarousel .MultiCarousel-inner .item { float: left;}
.MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:transparent; color:#666;}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
.MultiCarousel .leftLst { left:0; }
.MultiCarousel .rightLst { right:0; }
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }

.button1 {width:130px;display: block;background: #00C9B7;padding-top:5px;padding-bottom:5px;text-align:center;border-radius: 0px;color: white;font-family: 'Ubuntu', sans-serif;font-size:15px; }
.button2 {width:130px;display: block;background: #00C9B7;padding-top:5px;padding-bottom:5px;text-align:center;border-radius: 0px;color: white;font-family: 'Ubuntu', sans-serif;font-size:15px; }
.button3 {width:130px;display: block;background: #00C9B7;padding-top:5px;padding-bottom:5px;text-align:center;border-radius: 0px;color: white;font-family: 'Ubuntu', sans-serif;font-size:15px; }
.button4 {width:130px;display: block;background: #00C9B7;padding-top:5px;padding-bottom:5px;text-align:center;border-radius: 0px;color: white;font-family: 'Ubuntu', sans-serif;font-size:15px; }

.button1:hover {background: #353535;}
.button2:hover {background: #353535;}
.button3:hover {background: #353535;}
.button4:hover {background: #353535;} 
.button_line:hover {color: #353535;}
.main_text_bot{background:#fff; max-width:1200px; margin:auto; padding-top: 10px; padding-bottom:10px;}
.submit1 {
color: #323232;
font-size: 15px;
font-style: normal;
font-weight: normal;
text-align: center;
vertical-align: middle;
width: 220px;
height:40px;
border-style: solid;
border-width: 0px;
margin-left: 10px;
padding: 4px 15px;
background-color: #fff;
cursor: pointer ;
-webkit-appearance: none;
border-radius: 0;
float:left;
}

.submit1:hover {
background-color: #fff;
 border: 0px solid #888;
color: #ffffff;
}


.submit1 {
color: <?= $order_button_font_color ?>;
font-size: 15px;
font-style: normal;
font-weight: normal;
text-align: center;
vertical-align: middle;
width: 220px;
height:40px;
border-style: solid;
border-width: 0px;
margin-left: 10px;
padding: 4px 15px;
background-color: <?= $order_button_color ?>;
cursor: pointer ;
-webkit-appearance: none;
border-radius: 0;
float:left;
}

.submit1:hover {
background-color: <?= $button_normal_color ?>;
 border: 0px solid #888;
color: #ffffff;
}


.main_text_bot{background:#fff; max-width:1200px; margin:auto; padding-top: 10px; padding-bottom:10px;}
.image_text_box{float:left; width:100%; padding-top:0px; padding-left:10px; padding-bottom:0px; padding-right:10px; background:#fff;}
.text_bot{margin:auto;  width:100%; margin-bottom:10px; line-height:150%; padding-top:10px; padding-bottom:15px; padding-left:10px;  padding-right:10px;  color:#454545;  font-size:17px; text-align:left;}
.text_bot::first-letter {color:#AF270A; font-size: 200%;}
.text_bott{margin:auto;  width:100%; margin-bottom:10px; line-height:150%; padding-top:10px; padding-bottom:15px; padding-left:10px;  padding-right:10px;  color:#454545; font-size:17px; text-align:left;}

.button_1 {display:block;width:100%;padding-top: 20px;padding-bottom: 20px;margin-bottom:3px;background:#fff;font-size: 20px;text-align:center;color: #323232;text-decoration: none;
border:1px solid #ccc; cursor: pointer ;}
.button_1:hover {color: #ff8000; text-decoration: none; outline: none;}


.button_11 {width:100%;background:#fff;font-size: 20px;text-align:center;color: #323232;text-decoration: none; border:1px solid #ccc;cursor: pointer ;}
.button_11:hover {color: #ff8000;text-decoration: none;  outline: none;}
.checkout {padding-left: 5px;width:90%;max-width:350px;height:40px; font-size: 16px;border:1px solid #909090;background:#ffffff;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;-ms-border-radius: 0px;-o-border-radius:0px 0px 0 0;margin-bottom:8px;}
.checkout2 {padding-left: 5px;width:220px;height:40px;margin-top:0px;margin-left: 0px; font-size: 16px;
border:1px solid #ccc;background:#ffffff;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;-ms-border-radius: 0px;-o-border-radius:0px 0px 0 0;margin-bottom:0px;float:left;}

.mestext {padding-left: 5px;width:100%;height:40px;margin-top:0px;margin-left:auto; margin-right:auto; font-size: 16px;
border-top:0px solid #ccc;border-left:0px solid  #ccc;border-right:0px solid  #ccc;border-bottom:1px solid #ccc;background:#ffffff;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;-ms-border-radius: 0px;-o-border-radius:0px 0px 0 0;
margin-bottom:0px;float:left;}

/* The radio */
.radio {
max-width:150px;
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.radios {
    display: block;
    position: relative;
    padding-left: 40px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Hide the browser's default radio button */
.radios input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
margin-top:5px;
    position: absolute;
    top: 0;
    left: 0;
    height: 12px;
    width: 12px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio:hover input ~ .checkmark {
    background-color: #ccc;
}

/* On mouse-over, add a grey background color */
.radios:hover input ~ .checkmark {
    background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.radio input:checked ~ .checkmark {
    background-color: #2196F3;
}
/* When the radio button is checked, add a blue background */
.radios input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .checkmark:after {
    display: block;
}

/* Show the indicator (dot/circle) when checked */
.radios input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio .checkmark:after {

 	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}


.radios .checkmark:after {

 	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
/* The container */
.check_cont {
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom:6px;
    text-align:left;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.check_cont input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    
}

/* On mouse-over, add a grey background color */
.check_cont:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check_cont input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.check_cont input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.check_cont .checkmark:after {
    left: 5px;
    top: 2px;
    width: 7px;
    height:11px;
    border: solid white;

    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}


.v_column1{float:left; width:30%;}
.v_column2{float:left; width:70%;}

 @media screen and (max-width: 1100px) 
{
.v_column1{float:left; width:40%;}
.v_column2{float:left; width:60%;}
}

 @media screen and (max-width: 900px) 
{
.v_column1{float:left; width:50%;}
.v_column2{float:left; width:50%;}
}

 @media screen and (max-width: 700px) 
{
.v_column1{float:left; width:100%;}
.v_column2{float:left; width:100%;}
.image_text_box{float:left; width:100%; padding-top:0px; padding-left:10px; padding-bottom:0px; padding-right:10px; background:#fff;}

} 

ul {
  text-align: justify;
  position: relative;
  overflow: hidden;
  background:transparent;
}
ul:before, .active:after {
  content: '';
  width: 100%;
  border: 2px solid dodgerblue;
  position: absolute;
  top: 1em;
  margin-top: -2px;
  z-index: -1;
}
.active:after {
  border-color: lightblue;
}
ul:after {
  content: "";
  display: inline-block;
  width: 100%;
}
li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 50%;
  background: dodgerblue;
  margin: 0 1em;
  display: inline-block;
  color: white;
}
.active ~ li {
  background: lightblue;
}

svg {
  width: 50px;
  display: block;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
 
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  &.circle {
    -webkit-animation: dash .9s ease-in-out;
    animation: dash .9s ease-in-out;
  }
  &.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash .9s .35s ease-in-out forwards;
    animation: dash .9s .35s ease-in-out forwards;
  }
  &.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check .9s .35s ease-in-out forwards;
    animation: dash-check .9s .35s ease-in-out forwards;
  }
}
 
p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
  &.success {
    color: #73AF55;
  }
  &.error {
    color: #D06079;
  }
}
 
 
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
 
@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
 
@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}
 
@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

.inline {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: serif;
}
.link-button:focus {
  outline: none;
}
.link-button:active {
  color:red;
}