@charset "utf-8";

/* -----------------------------------
*     Common
* ------------------------------------ */
* {
    margin:0;
    padding:0;
}

body{
    font-size:0.9rem;
    background:#5cff32;
}

.fonten{
    font-family: 'Goblin One', cursive;
}

footer{
    font-size:0.8rem;
    color:#FFF;
}

/* -----------------------------------
*     top
* ------------------------------------ */
/* ----------------------
    step
---------------------- */
.step{
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45%, rgba(92,255,50,1) 45%, rgba(92,255,50,1) 100%);
}

.stepbox{
    width:90%;
    background:#FFF;
    border-radius:20px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

.stepbox .title{
    background:#000;
    border-radius: 20px 20px 0 0;
}

.stepbox .title img{
    width:90px;
}

.stepbox .txt{
    color:#000;
    font-size:0.9rem;
}

.stepbox .txt span{
    font-size:1.5rem;
    font-weight:bold;
    color:#005c00;
}

/* ----------------------
    labelmsg
---------------------- */
.labelmsg{
    background:#FFF;
}

.labelmsg .txt{
    font-size:1.2rem;
    font-weight:bold;
    line-height:1.6;
    color:#005c00;
}

.marker-border{
    background: linear-gradient(transparent 70%, #5CFF32 0%);
}

/* ----------------------
    campaignsummary
---------------------- */
.campaignsummary{
    background:#fcf7eb;
}

.campaignsummary .title{
    color:#000;
    font-weight:bold;
    background: rgb(88,192,56);
    background: linear-gradient(0deg, rgba(88,192,56,1) 0%, rgba(88,192,56,1) 50%, rgba(90,225,53,1) 50%, rgba(92,255,50,1) 100%);
}

/* -----------------------------------
*     labelpreview
* ------------------------------------ */
.steptitle{
		width:300px;
}

.labelselect{
    width:50%;
    font-size:0.6rem;
}

ul#slider{
    margin-bottom:0;
}

.labelpreview .txt{
    background:#000;
    color:#5cff32;
    font: size 1.6rem;
    font-weight:bold;
}

.labelpreviewbg{
    width:100%;
    height:600px;
    position:relative;
}

.labelpreviewbg.bh{
    background:url("../img/original_label/labelform/labelpreviewbg_bh.png") no-repeat center center;
    background-size:cover;
}

.labelpreviewbg.ph{
    background:url("../img/original_label/labelform/labelpreviewbg_ph.png") no-repeat center center;
    background-size:cover;
}

.labelpreviewbg.bt{
    background:url("../img/original_label/labelform/labelpreviewbg_bt.png") no-repeat center center;
    background-size:cover;
}

.labelpreviewbg.pt{
    background:url("../img/original_label/labelform/labelpreviewbg_pt.png") no-repeat center center;
    background-size:cover;
}

.labelpreviewbg.bc{
    background:url("../img/original_label/labelform/labelpreviewbg_bc.png") no-repeat center center;
    background-size:cover;
}

.labelpreviewbg.pc{
    background:url("../img/original_label/labelform/labelpreviewbg_pc.png") no-repeat center center;
    background-size:cover;
}

.labelpreviewbg.bl{
    background:url("../img/original_label/labelform/labelpreviewbg_bl.png") no-repeat center center;
    background-size:cover;
}

.labelpreviewbg.pl{
    background:url("../img/original_label/labelform/labelpreviewbg_pl.png") no-repeat center center;
    background-size:cover;
}

.labelpreviewbg.bb{
    background:url("../img/original_label/labelform/labelpreviewbg_bb.png") no-repeat center center;
    background-size:cover;
}

.labelpreviewbg.pb{
    background:url("../img/original_label/labelform/labelpreviewbg_pb.png") no-repeat center center;
    background-size:cover;
}

.inputformbox{
		height:180px;
		padding-top:90px;
    background:url("../img/original_label/labelform/step2title.png") no-repeat top center;
		background-size:300px;
}	

.labelpreviewbg .inputlabel{
    width: 174px;
    height: 42px;
    margin-left: -86px;
    color: #FFF;
    border: none;
    position: absolute;
    left: 50%;
    bottom: 141px;
    line-height: 1.2;
		font-size: 0.7rem;
}

.reflectbtn{
    display: inline-block;
    padding: 15px 10px;
    background: #2fa536;
    color: #fff;
    font-weight: bold;
    width: 310px;
    text-align: center;
    transition: 0.3s;
    border: 2px solid #2fa536;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
    -webkit-appearance: button;
}

.fillintheform{
    font-size:1.6rem;
    font-weight:bold;
}

/* ----------------------
    labelform
---------------------- */
.labelform{
    background:#fcf7eb;
}

.labelform h2{
    font-size:2.6rem;
    font-weight:bold;
    color:#3f873f;
}

.privacyBox ol{
    margin-left:25px!important;
}

/* -----------------------------------
*     chooseyourcolor
* ------------------------------------ */
.chooseyourcolor{
    background:url("../img/original_label/chooseyourcolorbg.png");
}

/* ********************************************************************************************************************* */
@media screen and (min-width: 576px) {

/* -----------------------------------
*     labelpreview
* ------------------------------------ */

.labelpreviewbg .inputlabel{
    width:156px;
    height:31px;
    margin-left:-78px;
    bottom:134px;
}

.labelpreviewbg{
    width:100%;
    height:550px;
    background-size:cover;
    position:relative;
}

}

/* ********************************************************************************************************************* */
@media screen and (min-width: 768px) {

/* -----------------------------------
*     labelpreview
* ------------------------------------ */
.steptitle{
		width:400px;
}

.labelselect{
    width:220px;
		font-size:0.8rem;
}

.labelpreviewbg{
    width:700px;
    height:540px;
    background-size:100%;
}

.labelpreviewbg .inputlabel{
		width: 154px;
		margin-left: -77px;
		bottom:128px;
		font-size:0.6rem;
}

.inputformbox{
		height:190px;
		padding-top:110px;
		background-size:400px;
}

}

/* ********************************************************************************************************************* */
@media screen and (min-width: 992px) {

/* -----------------------------------
*     Common
* ------------------------------------ */
body{
    font-size:1.2rem;
}

/* -----------------------------------
*     top
* ------------------------------------ */
/* ----------------------
    step
---------------------- */
.step{
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45%, rgba(92,255,50,1) 45%, rgba(92,255,50,1) 100%);
}

.stepbox{
    width:350px;
}
/* ----------------------
    labelmsg
---------------------- */
.labelmsg .txt{
    font-size:1.5rem;
}

/* -----------------------------------
*     labelpreview
* ------------------------------------ */

.steptitle{
		width:500px;
}

.labelselect{
    width:300px;
}

.labelpreviewbg{
    width:800px;
    height:616px;
    background-size:100%;
}

.inputformbox{
		height:245px;
		padding-top:150px;
		background-size:500px;
}

.labelpreviewbg .inputlabel{
    width:176px;
    height:36px;
    margin-left:-86px;
    bottom:146px;
		font-size:0.8rem;
}

}

/* ********************************************************************************************************************* */
@media screen and (min-width: 1200px) {

/* -----------------------------------
*     labelpreview
* ------------------------------------ */
.steptitle{
		width:650px;
}

.labelselect{
    width:360px;
}

.labelpreviewbg{
    width:1000px;
    height:770px;
}

.inputformbox{
		height:280px;
		padding-top:180px;
		background-size:650px;
}

.labelpreviewbg .inputlabel{
    width:210px;
    height:36px;
    margin-left:-105px;
    bottom:188px;
		font-size:1rem;
}

}