.rModalOpen{
	cursor:pointer;
}
.rModal {
	position: fixed;
	width:100%;
	z-index: 30;
	visibility:hidden;
	opacity:0;
	transition: 0.3s all;
}
/*size*/
.rModal.rModalXs .rModalWrap{
	width:660px;
}
.rModal.rModalXm .rModalWrap{
	width:960px;
}
.rModal.rModalXl .rModalWrap{
	width:1200px;
}
.rModal.rModalXxl .rModalWrap{
	width:100%;
	height:100%;
}
.rModal .rModalWrap{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.rModal.rModalTemplate .rModalWrap{
	background:none !important;
}
.rModal.rModalTemplate .modalTemplateMainScreen{
	height:95vh;
	overflow-y:auto;
}


/*show*/
.rModal.show{
	opacity: 1;
	visibility: visible;
}
/*content*/
.rModal .rModalIcon{
	padding:20px 0 0 0;
	text-align:center;
}
.rModal .rModalIcon svg{
	margin:0 auto;
	width:30px;
	height:30px;
}
.rModal .rModalIcon svg path{
	
}
.rModal .rModalHead{
	position:relative;
}
.rModal .rModalTitle{
	text-transform: uppercase;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 2px;
	color:#fff;
	margin:0 0 30px 0;
}
.rModal .rModalSubTitle{
	font-size:18px;
	font-weight:400;
	padding:0 0 20px 0;
}
.rModal .rModalContent{
	overflow:hidden;
	overflow-y:auto;
}
.rModal.rModalBg .rModalContent{
	padding:20px;
}


/*close*/
.rModalWrap > .rModalClose {
    position: absolute;
    display: block;
    top: 0px;
    right: -40px;
    width: 30px;
    height: 30px;
    cursor: pointer;
	z-index:3;
}
.rModalWrap > .rModalClose:before, .rModalWrap > .rModalClose:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    transition: .3s;
    opacity: 0.9;
}
.rModalWrap > .rModalClose:hover:before, .rModalWrap > .rModalClose:hover:after {
    opacity: 1;
}
.rModalWrap > .rModalClose:before {
    transform: rotate(45deg);
}
.rModalWrap > .rModalClose:after {
    transform: rotate(-45deg);
}
.rModalWrap > .rModalClose:hover:before {
    transform: rotate(135deg);
}
.rModalWrap > .rModalClose:hover:after {
    transform: rotate(45deg);
}



.rModalAlert{
	text-align:center;
}
.rModalAlert .rBtn{

}
/*rModalOverlay****************************************/
.rModalOverlay {
   opacity: 0;
   visibility: hidden;  
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.9);
   z-index: 20;
   transition: .3s all;
}
.rModal.show~.rModalOverlay {
   opacity: 1;
   visibility: visible;  
}
.rModalOverlay.show{
   opacity: 1;
   visibility: visible;
}

@media (max-width: 1220px) {
.rModal.rModalXl .rModalWrap{
	width:960px;
}	
	
}

@media (max-width: 980px) {
.rModal.rModalXm .rModalWrap{
	width:660px;
}
.rModal.rModalXl .rModalWrap{
	width:660px;
}
.rModalWrap > .rModalClose {
    position: absolute;
    display: block;
    top: -40px;
    right: 50%;
	transform:translate(50%, 0);
    width: 30px;
    height: 30px;
    cursor: pointer;
	z-index:3;
}
.rModal .rModalTitle{
	font-size:22px;
	font-weight:bold;
	padding:0 20px 20px 20px;
	text-align:center;
}
.rModal .rModalSubTitle{
	font-size:16px;
	padding:0 20px 20px 20px;
	text-align:center;
}
}

@media (max-width: 680px) {
.rModal.rModalXs .rModalWrap{
	width:100%;
}
.rModal.rModalXm .rModalWrap{
	width:100%;
}
.rModal.rModalXl .rModalWrap{
	width:100%;
}	
	
}