body {
    position:relative;
}

#closeBtn {
    float:right;
    font-size:40px;
    color:gray;
    margin-right:20px;
    cursor:pointer;
    
}

.si-exitaction-full {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 99999;
}




.fontSelect {
	position: relative;
	height: 28px;
	line-height: 28px;
	cursor: pointer;
	width: 200px;

	background-image: -webkit-linear-gradient(top, #f9f9f9, #f0f0f0);
	background-image: -moz-linear-gradient(top, #f9f9f9, #f0f0f0);
	background-image: -o-linear-gradient(top, #f9f9f9, #f0f0f0);
	background-image: -ms-linear-gradient(top, #f9f9f9, #f0f0f0);
	background-image: linear-gradient(top, #f9f9f9, #f0f0f0);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$from', EndColorStr='$to');
	border: 1px solid #cecece;
}

.fontSelect span {
	overflow: hidden;
	margin-left: 5px;
}

.fontSelect .arrow-down {
	position: absolute;
	right: 10px;
	top: 11px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;

	border-top: 6px solid #AAA;
}

.fontSelectUl {
	list-style: none;
	width: 200px;
	background: #f9f9f9;
	position: absolute;
	left: 0;
	top: 35px;
        z-index:999;
}

.fontSelectUl li {
	height: 24px;
	line-height: 24px;
	overflow: hidden;
	cursor: pointer;
	padding: 0 10px;

	font-size: 14px;

	border-left: 1px solid #f0f0f0;
	border-right: 1px solid #f0f0f0;
}

.fontSelectUl li:last-child {
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;

	border-bottom: 1px solid #EEEEEE;
}

.fontSelectUl li:hover {
	background: #DDD;
}

.btn-group-vertical > .btn:last-child:not(:first-child)
{
    border-radius:0px;
}


@media (max-width: 600px) {
   #contentWrapper {
    text-align:center;
    width:100%;
    height:1000px;
    position:absolute;
    overflow:hidden;
   }
    
  .so-emailAddress {
    width:118px;padding: 7px 4px 10px !important;
   }
   .so-send-email {
    width:175px;
   }
   .coupon {
       width:95%;
       margin-top:5px;
       max-width:305px;
   }
   .sp-cover {
        height:110px
    }
    
    .templateImg {
       width:80px;
   }
   
   .si-backdrop {
        position: fixed;
        background: rgba(0,0,0,.5);
        z-index: 999;
        top: 0px;
        left: 0px;
        zoom: 1;
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        display: block;
        overflow-y: scroll;
        overflow-x: auto;
    }
   
   .si-exitaction-modal {
        position: fixed;
        width: 300px;
        height: 500px;
        z-index: 99999;
        top: 50%;
        left: 50%;
        /* bring your own prefixes */
        transform: translate(-50%, -50%);

        background: #fff none repeat scroll 0 0;
        border-radius: 3px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
        overflow: hidden;   

    }
    
    .si-exitaction-img {
        position: fixed;
        max-width: 95%;
        height: auto;
        width: 95%;
        z-index: 99999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;

    }
    
    #buttons {
        min-width:75%;
        margin:auto;
        margin-top:20px;
        min-height:80px;
    }

    #social {
        width:75%;
        margin:auto;
        margin-top:20px;
    }

    #button {
        margin-top:20px;
    }

    #buttons .btn {
        padding: 10px;
        width:100%;
    }

    #buttons #button1 {
        float:left;
        width:48%;
    }
    #buttons #button2 {
        width:48%;
        float:right;
    }

    #button .btn {
        padding: 10px;
        width:55%;

    }

    #emailPanel {
        width:100%;
        margin:auto;
        margin-top:20px;
    }
    #emailConfirmPanel {
        width:100%;
        margin:auto;
        margin-top:20px;
    }

    #emailDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }
    #phoneDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }
    #nameDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }

    #emailButtonDiv .form-input {
        font-size: 30px;
        width:100%;
        margin-top:15px;
    }

    #ctaPanel {
        width:100%;
        margin:auto;
        margin-top:20px;
    }
    #ctaDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }

    #ctaButtonDiv .form-input {
        font-size: 30px;
        width:100%;
        margin-top:15px;
    }

    #ynPanel {
        width:93%;
        margin:auto;
        margin-top:20px;
    }
    #ynDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }

    #ynButtonDiv .form-input {
        font-size: 30px;
        width:100%;
        margin-top:15px;
    }
    #declineDiv {
        font-size:15px;
        margin-top:15px;
    }

    #questionDiv {
        width:80%;
        margin:auto;
        margin-top:20px;
    }
    .questionSmall {
        width:60%;
        margin:auto;

    }
    .contentSmall {
        width:90%;
        margin:auto;
    }

    #questionPanel {
        font-size: 20px;
        padding: 10px;
        width:100%;
        margin:auto;
    }
    .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }

    #questionButtonDiv .form-input {
        font-size: 30px;
        width:100%;
        margin-top:15px;
    }

    #coupon {
        width:90%;
        margin:auto;
        margin-top:20px;
    }

    #couponDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:55%;
        height:auto;
        margin:auto;
    }

    #couponButtonDiv .form-input {
        font-size: 30px;
        width:100%;
        margin-top:15px;
    }

    #couponDiv {
        border-radius:3px;
        padding:10px;
    }
   
  
}
@media (min-width: 400px) {
    
    #contentWrapper {
    text-align:center;
    width:100%;
    height:1200px;
    position:absolute;
    overflow:hidden;
}

    .so-emailAddress {
        width:175px;padding: 7px 4px 10px !important;
    }
    .sp-cover {
        height:210px
    }
    .so-send-email {

    }
    .coupon {
       width:97%;
   }
   
   .templateImg {
       width:80px;
   }
   
   .form-input {
        font-size: 14px;
       
    }
   
   
}

@media (min-width: 600px) {
    
   #contentWrapper {
    text-align:center;
    width:100%;
    height:800px;
    position:absolute;
    overflow:hidden;
}
    
   .templateImg {
       width:120px;
   }
   
   .si-backdrop {
        position: fixed;
        background: rgba(0,0,0,.5);
        z-index: 999;
        top: 0px;
        left: 0px;
        zoom: 1;
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        display: block;
        overflow-y: scroll;
        overflow-x: auto;
    }
   
   .si-exitaction-modal {
        position: fixed;
        width: 700px;
        height: 600px;

        z-index: 99999;
        top: 50%;
        left: 50%;
        /* bring your own prefixes */
        transform: translate(-50%, -50%);

        background: #fff none repeat scroll 0 0;
        border-radius: 3px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
        overflow: hidden;

    }
    
    .si-exitaction-img {
        position: fixed;
        max-width: 75%;
        height: auto;
        width: 65%;
        z-index: 99999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;

    }
    
    #buttons {
        min-width:75%;
        margin:auto;
        margin-top:20px;
        min-height:80px;
    }

    #social {
        width:75%;
        margin:auto;
        margin-top:20px;
    }

    #button {
        margin-top:20px;
    }

    #buttons .btn {
        padding: 10px;
        width:100%;
        overflow:hidden;
    }

    #buttons #button1 {
        float:left;
        width:48%;
    }
    #buttons #button2 {
        width:48%;
        float:right;
    }

    #button .btn {
        padding: 10px;
        width:55%;

    }

    #emailPanel {
        width:85%;
        margin:auto;
        margin-top:20px;
    }
    #emailConfirmPanel {
        width:75%;
        margin:auto;
        margin-top:20px;
    }

    #emailDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }
    #phoneDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }
    #nameDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }

    #emailButtonDiv .form-input {
        font-size: 30px;
        width:100%;
        margin-top:15px;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    #ctaPanel {
        width:75%;
        margin:auto;
        margin-top:20px;
    }
    #ctaDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }

    #ctaButtonDiv .form-input {
        font-size: 30px;
        width:100%;
        margin-top:15px;
    }

    #ynPanel {
        width:80%;
        margin:auto;
        margin-top:20px;
    }
    #ynDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }

    #ynButtonDiv .form-input {
        font-size: 30px;
        width:100%;
        margin-top:15px;
    }
    #declineDiv {
        font-size:15px;
        margin-top:15px;
    }

    #questionDiv {
        width:80%;
        margin:auto;
        margin-top:20px;
    }
    .questionSmall {
        width:80%;
        margin:auto;

    }
    .contentSmall {
        width:60%;
        margin:auto;
    }

    #questionPanel {
        font-size: 20px;
        padding: 10px;
        width:75%;
        margin:auto;
    }
    

    #questionButtonDiv .form-input {
        font-size: 30px;
        width:100%;
        margin-top:15px;
    }

    #coupon {
        width:60%;
        margin:auto;
        margin-top:20px;
    }

    #couponDiv .form-input {
        font-size: 20px;
        padding: 10px;
        width:55%;
        height:auto;
        margin:auto;
    }

    #couponButtonDiv .form-input {
        font-size: 30px;
        width:100%;
        margin-top:15px;
    }

    #couponDiv {
        border-radius:3px;
        padding:10px;
    }
    .form-input {
        font-size: 20px;
        padding: 10px;
        width:100%;
        height:auto;
    }
   
}

@media (min-width: 800px) {
    
   #contentWrapper {
    text-align:center;
    width:100%;
    height:1500px;
    position:absolute;
    overflow:hidden;
}
 
}