@font-face {
  font-family: "mplus";
  src: url("/product/closeup/assets/font/mplus/mplus-1p-light.woff") format("woff"), url("/product/closeup/assets/font/mplus/mplus-1p-light.ttf") format("truetype");
  font-weight: 300; }
@font-face {
  font-family: "mplus";
  src: url("/product/closeup/assets/font/mplus/mplus-1p-regular.woff") format("woff"), url("/product/closeup/assets/font/mplus/mplus-1p-regular.ttf") format("truetype");
  font-weight: 400; }
@font-face {
  font-family: "huifont";
  src: url("/product/closeup/assets/font/huifont/HuiFontP109.woff") format("woff"), url("/product/closeup/assets/font/huifont/HuiFontP109.ttf") format("truetype");
  font-weight: 400; }
.huifont {font-family: "huifont" !important;}


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/product/closeup/assets/font/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/product/closeup/assets/font/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(/product/closeup/assets/font/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(/product/closeup/assets/font/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /*inherit*/
  line-height: 1; /*inherit*/
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: 'liga';
     -moz-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

i.material-icons.home:before { content: "\e88a";  font-size: inherit; line-height: 1; vertical-align: -22%; margin-right: 5px; }

i.material-icons.archive:before { content: "\e03b";  font-size: inherit; line-height: 1; vertical-align: -24%; margin-right: 5px; }

i.material-icons.link:after { content: "\e315";  font-size: inherit; line-height: 1; vertical-align: -28%;}

i.material-icons.totop:before { content: "\e25a";  font-size: inherit; line-height: 1; vertical-align: ; margin-right: 5px; }

.rotate-270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


@media screen and (orientation: landscape) {
   /* 横向きの場合のスタイル */
  .landscape { display: block !important; }
  .portrait { display: none !important; }
}
@media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
  .landscape { display: none !important; }
  .portrait { display: block !important; }
}

/*
html, body
{
	padding: 0;
	margin: 0;
}

html {
  line-height: 1.5;
  font-family: "mplus", sans-serif;
  font-weight: 300;
  color: #424242;
  background: #0e132b; }
  @media only screen and (min-width: 0) {
    html {
      font-size: 14px; } }
  @media only screen and (min-width: 601px) {
    html {
      font-size: 14.5px; } }
  @media only screen and (min-width: 993px) {
    html {
      font-size: 15px; } }
      
body {font-family: "mplus", sans-serif;
  font-weight: 300;}

header
{
	background: rgba(149, 149, 149, .8);
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	line-height: 40px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%;
	height: 40px;
	padding: 0 10px;
	z-index: 2000;
	position: fixed;
}
header a { color: #fff;}
header .th_logo { height: 30px; width: auto; margin: 5px 0 0 0; float: right;}

.section {
  padding-top: 0;
  padding-bottom: 0;
}

.section.no-pad {
  padding: 0;
}

.section.no-pad-bot {
  padding-bottom: 0;
}

.section.no-pad-top {
  padding-top: 0;
}

.container {
  margin: 0 auto;
  width: 100%;
}
.container_wide {
  margin: 0 auto;
  width: 100%;
}
.left-to-center{ text-align: center;}

@media only screen and (min-width: 601px) {
  .container {
    width: 85%;
  }
  .container_wide {
    width: 100%;
  }
  .left-to-center{ text-align: left;}
}
@media only screen and (min-width: 993px) {
  .container {
    width: 75%;
  }
  .container_wide {
    width: 100%;
  }
  .left-to-center{ text-align: left;}
}

.container .row {
  margin-left: auto;
  margin-right: auto;
}
.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.totop { position: absolute; bottom: 70px; right: 5%;}


*:focus {
  outline: none;
}
*/

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-top: 0;
  width: 100%;
}

.slider_limit { width: 100%; margin: 0 auto;}
.slider_negative_m {margin-top: -60px !important;}
@media screen and (min-width:47.938em){
.slider_limit { max-width: 70%; margin: 0 auto;}
.slider_negative_m {margin-top: -120px !important;}
}


  .archive-content .divider{height: 1px !important; background: #000 !important;}
  .archive-content p {color: #fff !important;}
  .archive-content p a {color: #fff !important;}
  .archive-content p a:hover { text-decoration: underline !important;}


.containerInner {
  width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	}
  .containerInner.intro-height { height: 100vh; }
  .containerInner.secrecipe-height { height: 100%; }
  .containerInner.secspec-height { height: 100%; }
  .containerInner.secinsta-height { height: 100%; }
  .containerInner.secproducts-height { height: 100%; }
	@media only screen and (min-width: 340px) {
	}
	@media only screen and (min-width: 370px) {
	}
	@media only screen and (min-width: 400px) {
	}
	@media only screen and (min-width: 430px) {
	}
	@media only screen and (min-width: 500px) {
	}
	@media only screen and (min-width: 580px) {
	}
	@media only screen and (min-width: 601px) {
	}
	@media only screen and (min-width: 760px) {
	}
	@media only screen and (min-width: 800px) {
	}
	@media only screen and (min-width: 993px) {
	}
	@media only screen and (min-width: 1024px) {
	}
	@media only screen and (min-width: 1200px) {
	}
	@media only screen and (min-width: 1300px) {
	}
	@media only screen and (min-width: 1400px) {
	}


.sectionmain {
    background: none;
  }
  .sectionmain::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    height: 100vh;
    background: url("/product/closeup/assets/img/jde/bg_main.jpg") center/cover no-repeat;
    -webkit-background-size: cover;
    z-index: -1;
  }
  
.scene,
.layer {
  display: block;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.scene {
  min-height: 460px;
  position: relative;
  overflow: hidden;
}
.layer {
  position: absolute;
}
.layer div {
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.float_sign {
  animation: float_sign 4s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes float_sign {
  0% { transform:translate(0,0) rotate(0deg); }
  50% { transform:translate(3px,5px) rotate(-1deg) ;}
  100% { transform:translate(0,0) rotate(0deg); }
}

/*** Section-INTRO/Landscape ***/
.landscape .bgobj { position: absolute; width: 90%; left: 5%; top: 3%; }
@media only screen and (min-width: 800px) {
.landscape .bgobj { position: absolute; width: 100%; left: 0; top: 0; }
}

#sectionintro .landscape .title { position: absolute; overflow: hidden; top:6%; left: 3%; width: 25%; padding:0; }
@media only screen and (min-width: 800px) {
#sectionintro .landscape .title { top:6%; left: 3%; width: 20%; }
}

#sectionintro .landscape .sharebox { position: absolute; bottom: 3%; right: 3%; width:18%; padding: 0; margin: 0; background: ;}
@media only screen and (min-width: 900px) {
#sectionintro .landscape .sharebox { position: absolute; bottom: 3%; right: 3%; width:13%; }
}
@media only screen and (min-width: 993px) {
#sectionintro .landscape .sharebox { position: absolute; bottom: 3%; right: 3%; width:14%; }
}

#sectionintro .landscape .share { position: relative; float: right; width: 33.3333%; padding: 0; margin: 0; }

#sectionintro .landscape .slider-slick { position: absolute; top:0; left: 0; width: 100%; height: 100vh; padding:0; z-index: 30; background: ; }

#sectionintro .landscape .colorname { position: absolute; overflow: hidden; bottom:43%; left: 66%; width: 25%; padding:0; }
@media only screen and (min-width: 600px) {
#sectionintro .landscape .colorname { bottom:32%; left: 64%; width: 25%; }
}
@media only screen and (min-width: 680px) {
#sectionintro .landscape .colorname { bottom:28%; left: 64%; width: 25%; }
}
@media only screen and (min-width: 700px) {
#sectionintro .landscape .colorname { bottom:25%; left: 64%; width: 25%; }
}
@media only screen and (min-width: 800px) {
#sectionintro .landscape .colorname { bottom:10%; left: 60%; width: 20%; }
}

#sectionintro .landscape .product { position: absolute; top:50%; left: 40%; width: 20%; -webkit-transform: translateY(-72%); -ms-transform: translateY(-72%); transform: translateY(-72%);}
@media only screen and (min-width: 600px) {
#sectionintro .landscape .product { top:50%; left: 39%; width: 22%; -webkit-transform: translateY(-60%); -ms-transform: translateY(-60%); transform: translateY(-60%);}
}
@media only screen and (min-width: 700px) {
#sectionintro .landscape .product { top:50%; left: 39%; width: 22%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
}

/*** Section-INTRO/Portrait ***/
.portrait .bgobj { position: absolute; width: 180%; left: -40%; top: 25%; }
@media only screen and (min-width: 700px) {
.portrait .bgobj { position: absolute; width: 160%; left: -30%; top: 20%; }
}
@media only screen and (min-width: 780px) {
.portrait .bgobj { position: absolute; width: 180%; left: -40%; top: 25%; }
}
@media only screen and (min-width: 1020px) {
.portrait .bgobj { position: absolute; width: 160%; left: -30%; top: 20%; }
}

#sectionintro .portrait .title { position: absolute; overflow: hidden; top:4%; left: 2%; width: 48%; padding:0; }
@media only screen and (min-width: 600px) {
#sectionintro .portrait .title { top:5%; left: 2%; width: 44%; }
}
@media only screen and (min-width: 700px) {
#sectionintro .portrait .title { top:4%; left: 2%; width: 38%; }
}
@media only screen and (min-width: 780px) {
#sectionintro .portrait .title { top:4%; left: 2%; width: 42%; }
}
@media only screen and (min-width: 1020px) {
#sectionintro .portrait .title { top:4%; left: 2%; width: 38%; }
}

#sectionintro .portrait .sharebox { position: absolute; bottom: 1%; right: 3%; width:34%; padding: 0; margin: 0; background: ;}
@media only screen and (min-width: 480px) {
#sectionintro .portrait .sharebox { bottom: 1%; right: 3%; width:28%; }
}
@media only screen and (min-width: 700px) {
#sectionintro .portrait .sharebox { bottom: 1%; right: 3%; width:24%; }
}
@media only screen and (min-width: 780px) {
#sectionintro .portrait .sharebox { bottom: 1%; right: 3%; width:26%; }
}
@media only screen and (min-width: 1020px) {
#sectionintro .portrait .sharebox { bottom: 1%; right: 3%; width:24%; }
}

#sectionintro .portrait .share { position: relative; float: right; width: 33.3333%; padding: 0; margin: 0; }

#sectionintro .portrait .slider-slick { position: absolute; top:0; left: 0; width: 100%; height: 100vh; padding:0; z-index: 30; background: ; }

#sectionintro .portrait .colorname { position: absolute; overflow: hidden; bottom:9%; left: 30%; width: 40%; padding:0; }
@media only screen and (min-width: 600px) {
#sectionintro .portrait .colorname { bottom:8%; left: 32%; width: 36%; }
}
@media only screen and (min-width: 700px) {
#sectionintro .portrait .colorname { bottom:6%; left: 34%; width: 34%; }
}
@media only screen and (min-width: 780px) {
#sectionintro .portrait .colorname { bottom:6%; left: 34%; width: 34%; }
}
@media only screen and (min-width: 1020px) {
#sectionintro .portrait .colorname { bottom:4%; left: 34%; width: 34%; }
}

#sectionintro .portrait .product { position: absolute; top:50%; left: 28%; width: 44%; -webkit-transform: translateY(-40%); -ms-transform: translateY(-40%); transform: translateY(-40%);}
@media only screen and (min-width: 600px) {
#sectionintro .portrait .product { top:50%; left: 30%; width: 40%; -webkit-transform: translateY(-60%); -ms-transform: translateY(-40%); transform: translateY(-40%);}
}
@media only screen and (min-width: 700px) {
#sectionintro .portrait .product { top:50%; left: 32%; width: 36%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-40%); transform: translateY(-40%);}
}
@media only screen and (min-width: 780px) {
#sectionintro .portrait .product { top:50%; left: 28%; width: 44%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-40%); transform: translateY(-40%);}
}
@media only screen and (min-width: 1020px) {
#sectionintro .portrait .product { top:50%; left: 32%; width: 36%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-40%); transform: translateY(-40%);}
}


/*** Section Recipe ***/
#sectionrecipe { padding:0 0 5% 0; }

#sectionrecipe .title { padding:5% 0 5% 0; }
@media only screen and (min-width: 600px) {
}
@media only screen and (min-width: 700px) {
}
@media only screen and (min-width: 780px) {
}
@media only screen and (min-width: 1020px) {
}

#sectionrecipe .modal_bg { background: rgba(0, 0, 0, .5); height: 110vh;}

#sectionrecipe .recipe { position: relative; margin-top: -5%; left: 2%; width: 96%;}
@media only screen and (min-width: 700px) {
#sectionrecipe .recipe { margin-top: -5%; left: 10%; width: 80%;}
}
@media only screen and (min-width: 1020px) {
#sectionrecipe .recipe { margin-top: -5%; left: 23%; width: 54%;}
}
@media only screen and (min-width: 1200px) {
#sectionrecipe .recipe { margin-top: -5%; left: 27%; width: 46%;}
}

#sectionrecipe .close-modal-left { position: absolute; top: 0; left: 0; width: 30%; height: 100%; background: rgba(55, 108, 206, 0);}
#sectionrecipe .close-modal-right { position: absolute; top: 0; right: 0; width: 30%; height: 100%; background: rgba(56, 207, 91, 0);}

#sectionrecipe .neon { color: #fff; font-size: 5em; text-shadow:0px 0px 16px #fff; margin: 60px 0 0 10%;}
@media only screen and (min-width: 600px) {
#sectionrecipe .neon { font-size: 6em; margin: 60px 0 0 10%;}
}
@media only screen and (min-width: 1020px) {
#sectionrecipe .neon { font-size: 5em; margin: 15% 0 0 10%;}
}


/*** Section Spec ***/
#sectionspec { padding:0 0 5% 0; }

#sectionspec .title { padding:5% 0 5% 0; }


/*** #sectioninsta ***/
#sectioninsta .insta { position: relative; width: 80%; top: 0; left: 10%; background: ; padding: 0; }

#sectioninsta .secinsta_title { position: relative; width: 100%; text-align: center; font-size: 1.3em; margin-top: 1.6em; color: #fff;}
@media only screen and (min-width: 400px) {
#sectioninsta .secinsta_title { font-size: 1.6em; margin-top: 1.6em; }
}
@media only screen and (min-width: 500px) {
#sectioninsta .secinsta_title { font-size: 1.8em; margin-top: 1.6em; }
}
@media only screen and (min-width: 700px) {
#sectioninsta .secinsta_title { font-size: 2.2em; margin-top: 1.8em; }
}
@media only screen and (min-width: 993px) {
#sectioninsta .secinsta_title { font-size: 3em; margin-top: 2em; }
}


#sectioninsta .secinsta_icon { margin: 1% auto; width: 15%; }
@media only screen and (min-width: 400px) {
  #sectioninsta .secinsta_icon { width: 12%; }
}
@media only screen and (min-width: 601px) {
  #sectioninsta .secinsta_icon { width: 10%; }
}
@media only screen and (min-width: 993px) {
  #sectioninsta .secinsta_icon { width: 6%;}
}


/*** Section Products ***/

#sectionproducts .title { padding:5% 0 5% 0; }
@media only screen and (min-width: 600px) {
}
@media only screen and (min-width: 700px) {
}
@media only screen and (min-width: 780px) {
}
@media only screen and (min-width: 1020px) {
}



/* Slider */
.slick-loading .slick-list
{
    background: #fff url('/product/closeup/assets/slick/ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('/product/closeup/assets/slick/fonts/slick.eot');
    src: url('/product/closeup/assets/slick/fonts/slick.eot?#iefix') format('embedded-opentype'), url('/product/closeup/assets/slick/fonts/slick.woff') format('woff'), url('/product/closeup/assets/slick/fonts/slick.ttf') format('truetype'), url('/product/closeup/assets/slick/fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;

    cursor: pointer;

    color: #fff; /*color: transparent;*/
    text-shadow:0px 0px 16px #fff;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: #fff; /*color: transparent;*/
    text-shadow:0px 0px 20px #f9daed;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before
{
    font-family: 'slick';
    font-size: 40px;
    line-height: 1;
    opacity: .75;
    color: ;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute; left: 40px;
    z-index: 200;
}
.slick-next:before
{
    font-family: 'slick';
    font-size: 40px;
    line-height: 1;
    opacity: .75;
    color: ;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute; right: 40px;
    z-index: 200;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}


/* ==========================================================================
   Remodal's necessary styles
   ========================================================================== */

/* Hide scroll bar */

html.remodal-is-locked {
  overflow: hidden;

  touch-action: none;
}

/* Anti FOUC */

.remodal,
[data-remodal-id] {
  display: none;
}

/* Necessary styles of the overlay */

.remodal-overlay {
  position: fixed;
  z-index: 9999;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;

  display: none;
}

/* Necessary styles of the wrapper */

.remodal-wrapper {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;
  overflow: auto;

  text-align: center;

  -webkit-overflow-scrolling: touch;
}

.remodal-wrapper:after {
  display: inline-block;

  height: 100%;
  margin-left: -0.05em;

  content: "";
}

/* Fix iPad, iPhone glitches */

.remodal-overlay,
.remodal-wrapper {
  backface-visibility: hidden;
}

/* Necessary styles of the modal dialog */

.remodal {
  position: relative;

  outline: none;

  text-size-adjust: 100%;
}

.remodal-is-initialized {
  /* Disable Anti-FOUC */
  display: inline-block;
}

/* ==========================================================================
   Remodal's default mobile first theme
   ========================================================================== */

/* Default theme styles for the background */

.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
  filter: blur(3px);
}

/* Default theme styles of the overlay */

.remodal-overlay {
  background: rgba(0, 0, 0, 0.6);
}

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.remodal-overlay.remodal-is-opening {
  animation-name: remodal-overlay-opening-keyframes;
}

.remodal-overlay.remodal-is-closing {
  animation-name: remodal-overlay-closing-keyframes;
}

/* Default theme styles of the wrapper */

.remodal-wrapper {
  /*padding: 10px 10px 0;*/
  padding: 0;
  background: ;
}

/* Default theme styles of the modal dialog */

.remodal {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0;
  margin-top: -60%;
  padding: 0;
  transform: translate3d(0, 0, 0);
  color: #2b2e38;
  background: rgba(243, 187, 187, 0);
  max-width: ;
}
@media only screen and (min-width: 600px) {
.remodal { width: 90%; margin-top: -60%;}
}
@media only screen and (min-width: 700px) {
.remodal { width: 80%; margin-top: -60%;}
}
@media only screen and (min-width: 1020px) {
.remodal { width: 50%; margin-top: -22%;}
}
@media only screen and (min-width: 1200px) {
.remodal { width: 50%; margin-top: -22%;}
}


.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.remodal.remodal-is-opening {
  animation-name: remodal-opening-keyframes;
}

.remodal.remodal-is-closing {
  animation-name: remodal-closing-keyframes;
}

/* Vertical align of the modal dialog */

.remodal,
.remodal-wrapper:after {
  vertical-align: middle;
}

/* Close button */

.remodal-close {
  position: absolute;
  top: 25%;
  left: 0;

  display: block;
  overflow: visible;

  width: 60px;
  height: 60px;
  margin: 0;
  padding: 0;

  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;

  color: #95979c;
  border: 0;
  outline: 0;
  background: transparent;
}

.remodal-close:hover,
.remodal-close:focus {
  color: #fff;
}

.remodal-close:before {
  font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
  font-size: 60px;
  line-height: 60px;

  position: absolute;
  top: 0;
  left: 0;

  display: block;

  width: 60px;

  content: "\00d7";
  text-align: center;
}

/* Dialog buttons */

.remodal-confirm,
.remodal-cancel {
  font: inherit;

  display: inline-block;
  overflow: visible;

  min-width: 110px;
  margin: 0;
  padding: 12px 0;

  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;

  border: 0;
  outline: 0;
}

.remodal-confirm {
  color: #fff;
  background: #81c784;
}

.remodal-confirm:hover,
.remodal-confirm:focus {
  background: #66bb6a;
}

.remodal-cancel {
  color: #fff;
  background: rgba(248, 24, 24, .5);
  border-radius:6px;
  box-shadow:0px 0px 25px 8px #f04949;
}

.remodal-cancel:hover,
.remodal-cancel:focus {
  background: #ef5350;
}

/* Remove inner padding and border in Firefox 4+ for the button tag. */

.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {
  padding: 0;

  border: 0;
}

/* Keyframes
   ========================================================================== */

@keyframes remodal-opening-keyframes {
  from {
    transform: scale(1.05);

    opacity: 0;
  }
  to {
    transform: none;

    opacity: 1;

    filter: blur(0);
  }
}

@keyframes remodal-closing-keyframes {
  from {
    transform: scale(1);

    opacity: 1;
  }
  to {
    transform: scale(0.95);

    opacity: 0;

    filter: blur(0);
  }
}

@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}


/* IE8
   ========================================================================== */

.lt-ie9 .remodal-overlay {
  background: #2b2e38;
}

.lt-ie9 .remodal {
  width: 700px;
}