#ercustom_centerColWrap {
	position: absolute;
	left: 245px;
	right: 0; /* only have right because of #rightDesc */
	top: 25px;
    }

    body.ercustom_touchscreen #ercustom_thumbCol_slidesWrap {
        overflow-y: auto !important;
    }

    .ercustom_sectionHead {
        font: italic 20px/28px Georgia,serif;
        color: #630C0C;
    }
    #ercustom_bgImgDisplay {
        position: absolute;
        left: 0; width: 530px; top: 25px; height: 700px;
    }
    #ercustom_frameSelector {
        position: absolute;
        left: 0; top: 483px;
        width: 530px;
    }
    #ercustom_frameDisplay {

    }
    .ercustom_frameSelector_btn {
        position: absolute; top: 0; left: 0;
        cursor: pointer;
    }
    #ercustom_frameSelector_btn1 { left: 0; }
    #ercustom_frameSelector_btn2 { left: 76px; }
    #ercustom_frameSelector_btn3 { left: 152px; }
    #ercustom_frameSelector_btn4 { left: 228px; }
    #ercustom_frameSelector_btn5 { left: 304px; }
    #ercustom_frameSelector_btn6 { left: 380px; }
    #ercustom_frameSelector_btn7 { left: 456px; }
    #ercustom_sectionHead2 {
        position: absolute;
        left: 15px; top: 446px;
    }

    #ercustom_sectionHead3 {
        position: absolute;
        left: 88px; top: 560px;
    }
    #ercustom_extraSelector {
        position: absolute;
        left: 0; top: 573px; width: 530px; height: 150px;
    }
    .ercustom_extraSelector_btn {
        position: absolute !important;
        bottom: 0;
        width: 102px; height: 140px;
        /*background: rgba(0,0,0,0.4);*/
        cursor: pointer;
    }
    #ercustom_extraSelector_btn1 { left: 5px; }
    #ercustom_extraSelector_btn2 { left: 110px; }
    #ercustom_extraSelector_btn3 { left: 215px; }
    #ercustom_extraSelector_btn4 { left: 320px; }
    #ercustom_extraSelector_btn5 { left: 425px; }
    .ercustom_extraSelector_btn .ercustom_check {
        position: absolute !important;
        right: 0;
        bottom: 0;
        width: 66px;
        height: 70px;
        background-image: url(/00images/SLIDES/FORM/Checkmark1.png);
        wasbackground-size: 33px 35px;
        display: none;
    }
    .ercustom_extraSelector_btn.ercustom_selected .ercustom_check {
        display: block !important;
    }
    #ercustom_45box {
        position: absolute;
        left: 0;
        top: 725px;
        width: 530px;
        overflow: visible;
    }
    #ercustom_inscriptionBox {
        box-sizing: border-box;
        position: absolute;
        /*right: 0; width: 300px;
        top: 543px; height: 180px;*/
        right: -305px; width: 0; opacity: 0; /*hidden in the wide view! was 300px!*/
        top: -182px; height: 180px;
        z-index: 101;
        text-align: center;
        border: 2px solid #000;
        background: #A5FFb4;
    }
    /*preview sample for responsive: body #ercustom_inscriptionBox {
        position: static;
        width: 100%;
    }*/
    #ercustom_inscriptionBox .ercustom_header {
        border-bottom: 2px solid #000;
    }
    #ercustom_inscriptionTAWrap {
        position: absolute; top: 30px; left: 0; right: 0; bottom: 0;
    }
    #ercustom_inscriptionBox textarea {
        font: 16px/22px Arial,Helvetica,sans-serif;
        color: #000;
        text-align: center;
        border: none;
        background: transparent;
        padding: 7px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }

    #ercustom_inscriptionBox2 {
        box-sizing: border-box;
        position: absolute;
        /*right: 0; width: 300px;
        top: 543px; height: 180px;*/
        right: 0; width: 300px;
        top: 568px; height: 180px;
        z-index: 200;
        text-align: center;
        border: 2px solid #000;
        background: #A5FFb4;
    }
    #ercustom_inscriptionBox2 .ercustom_header {
        border-bottom: 2px solid #000;
    }
    #ercustom_inscriptionTAWrap2 {
        position: absolute; top: 30px; left: 0; right: 0; bottom: 0;
    }
    #ercustom_inscriptionBox2 textarea {
        font: 16px/22px Arial,Helvetica,sans-serif;
        color: #000;
        text-align: center;
        border: none;
        background: transparent;
        padding: 7px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }

    #ercustom_rightDesc {
	box-sizing: border-box;
	position: absolute;
	right: -305px;
	width: 300px;
	top: -751px;
	height: 749px;
	z-index: 100;
	border-left: 0px solid rgba(51,51,51,0.6);
	border-right: 2px solid rgba(51,51,51,0.6);
	border-bottom: 2px solid rgba(51,51,51,0.6);
	border-top: 2px solid rgba(51,51,51,0.6);
	background: rgba(51,51,51,1);
	background-clip: padding-box;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	color: #FFF;
	overflow-y: auto;
	font-size: 16px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.2;
	border-top-right-radius: 45px;
	border-bottom-right-radius: 45px;
	left: 527px;
    }

    #ercustom_45rowWrap {
        padding-top: 5px;
        overflow: hidden; /*clear floats*/
    }
    #ercustom_45leftBox {
        width: 350px;
        float: left;
        padding-top: 10px;
    }
    #ercustom_45rightBox {
        float: right;
        padding-right: 5px;
    }
    #ercustom_45leftBox select {
        width: 230px;
        box-sizing: border-box;
        border: groove #AD734E 2px;
        color: #000033;
        background-color: #F9ECBF;
        text-indent: 0px;
        font-size: 16px;
    }
    #ercustom_45leftBox input[type=text] {
        width: 230px;
        box-sizing: border-box;
        border: 2px solid #000;
        background: #A5FFb4;
        text-indent: 0px;
        font-size: 24px;
        padding: 4px;
    }
    #ercustom_45leftBox .ercustom_sectionHead {
        display: inline-block;
        width: 100px;
        padding-left: 10px;
    }
    #ercustom_5nameWrap {
        padding-top: 3px;
    }

    /* show/hide the 4.options */
    #ercustom_45rowWrap #ercustom_5nameWrap_label2 { display: none; }
    #ercustom_45rowWrap.ercustom_hideOptions #ercustom_4optionsWrap {
        display: none;
    }
    #ercustom_45rowWrap.ercustom_hideOptions #ercustom_5nameWrap_label1 { display: none; }
    #ercustom_45rowWrap.ercustom_hideOptions #ercustom_5nameWrap_label2 { display: inline-block; }
    #ercustom_45rowWrap.ercustom_hideOptions #ercustom_5nameWrap { padding-top: 18px; }

    #ercustom_6summary {
        padding-left: 10px;
        font: normal 18px/22px Arial,Helvetica,sans-serif;
        color: #000;
    }

    #ercustom_fieldWrap {
        display: none;
    }
#rotator-center {
	margin-left:0px;
}

  		.simpleform688 {
		display: none !important;
  }		


   /* Moves caption below the image on the small-form carousel */

.carousel-caption {
  position: absolute;
  top: 0%;
  right: 0%;
  bottom: 0px;
  left: 0%;
  z-index: 10;
  margin-top: 0%;
  padding-top: 0px;
  padding-bottom: 0px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  }
.carousel-caption h5{
	margin-top: 0px;
	margin-left: -50px;
	padding: 10px;
	position: absolute;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
	background-color: rgba(167,215,255,0.75);
	border: medium dashed #FFFFFF;
	font-family: Arial Black, Impact, Palatino, Times New Roman, serif;
	color: #0044FF;
	font-size: 16px;
	border-radius: 12px;
	-webkit-box-shadow: 0px 0px 11px 4px #ffffff;
	box-shadow: 0px 0px 11px 4px #ffffff;
  }

    /* RESPONSIVE RULES */
	/* RESPONSIVE RULES */
    /* RESPONSIVE RULES */
	/* RESPONSIVE RULES */
	/* RESPONSIVE RULES */
    /* RESPONSIVE RULES, BELOW: */

    @media only screen and (max-width : 1199px ){
        /*FIRST STEP DOWN.  cut width by 134, from 1080 to 946 */
        .dwuserEasyRotator {
            width: 946px !important;
			margin-left:auto;
			margin-right:auto;
        }
        #ercustom_sectionHead1_1 { display: none !important; }
        #ercustom_sectionHead1_2 { display: block !important; }
        /*cut down the thumb column's width by 134, move down 19px to give room for label*/
        #ercustom_thumbCol {
            width: 121px !important;
            top: 29px !important;
            bottom: 63px !important;
        }
        .ercustom_thumbCol_slide {
            width: 121px !important;
        }
        .ercustom_thumbCol_titleText, .ercustom_thumbCol_designNumText {
            display: none !important;
        }
        /*move the center column to the left*/
        #ercustom_centerColWrap {
            left: 111px;
        }
    }

    @media only screen and (max-width: 1010px) {  /*1080-134-1=945*/
        /*SECOND STEP DOWN cut width down further to 641 (111+530 main col width), increase height from 930 to 1130 */
        .dwuserEasyRotator {
            width: 641px !important;
            height: 1109px !important;
			margin-left:auto;
			margin-right:auto;
			margin-top:50px;
        }
        #ercustom_thumbCol {
            bottom: 319px !important; /*was 10 (full height).  Now, using 63+(1109-930)=63+179=242.  Now, using 242+77=319*/
        }
        /*move the inscription box to be inline*/
        #ercustom_inscriptionBox {
            position: relative; left: 0; top: 0; right: auto;
            height: 112px;
            width: 100%;
            opacity: 1;
        }
        /*hide the wide-view inscription box*/
        #ercustom_inscriptionBox2 { display: none !important; }
        #ercustom_6summary { display: none !important; }
        /*move the description box to be inline at the bottom*/
        #ercustom_rightDesc {
			position: static;
			width: 100%;
			height: 219px;
			border-radius: 30px;
		}
       /*PENDING:  the below didn't work.  I was TRYING to get the blue "see more name gifts" in the DESC to float beside the text of the desc.  I think I have to put a div around the text and make it float; not this blue box called RotatorDescExtra 
		.desctext {
			width:200px;
			float:left;
			background-color:#220A5C;
			} */
    }
	
	
    @media only screen and (max-width: 945px) and (max-height: 768px) {
        #ercustom_thumbCol {
            bottom: 473px !important; /*Using 319+77+77=473*/
        }
    }
    @media only screen and (min-width: 946px) and (max-width: 1079px) and (max-height: 768px) {
        #ercustom_thumbCol {
            bottom: 140px !important; /*Using 63+77=140*/
        }
    }
#desnumber {
	color:rgba(255,255,153,1);
	float: right;
	text-align: right;
	font-size: 20px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	overflow: hidden;
	margin-bottom:-21px;
}
#RotatorDescExtra {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	color: rgba(255,255,153,1);
	background-color: rgba(0,0,51,0.8);
	text-align: center;
	font-size: 16px;
	margin-top: 10px;
	border-radius: 20px;
	-webkit-box-shadow: 11px 0px #000000;
	box-shadow: 11px 0px #000000;
	padding-top: 10px;
	padding-bottom: 10px;
}
#RotatorDescExtra a {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	color: rgba(102,255,102,1);
	font-weight: bold;
	font-size: 16px;
}


@media only screen and (max-width: 688px){
		.rotatorhidden688 {
		display: none !important;
  }
  		.simpleform688 {
		display: block !important;
  }			
		/*below is to cut down the thumb column's width by 134, move down 19px to give room for label... and I think it removes the thumbs.  It also creates a wider-than-width problem, as of 4-3-16 is unsolved, so hiding it is a workaround.*/
        #ercustom_thumbCol {
            width: 0px !important;
            top: 0px !important;
            bottom: 0px !important;
			display:none;
	    }
        .ercustom_thumbCol_slide {
            width: 121px !important;
        }
		.ercustom_thumbCol_titleText, .ercustom_thumbCol_designNumText{
            display: none !important;
        }
        /*move the center column to the left*/
        #ercustom_centerColWrap {
            left: 0px;
        }
		#ercustom_form {
			width: 575px !important;
		}
}

@media only screen and (min-width: 689px){
		.rotatorhidden688 {
		display: block !important;
  }
}

@media only screen and (max-width: 550px){
	#mobilenotice550 {
		visibility:visible !important;
		height:auto !important;
}
}
@media (min-width: 1200px) {
#rotator-center {

}
}