.rotatesquare_area {
    position: relative;
    display: block;
    margin: auto;
    width: 300px;
    height: 300px;
}


.rotatesquare {
    width:300px;
    display: block;
    margin: auto;
    position: relative;
    overflow: hidden;
    border: 1px solid #0c5460;
    border-radius: 6px;
    transition: transform 1s ease-out, background 1s ease-out, width 1s ease-out;
}

.rscenter {
    background: url("images/sx1-icon.jpg") center center no-repeat #ffffff;
    position: absolute;
    transition: transform 1s ease-out;
}

.rotatesquare .rscard {
    display: inline-block;
    position: absolute;
    align-self: stretch;
    transition: width 1s ease-out;
    border:0px solid #9a9a9a;
    border-bottom-width: 1px;
    transform-origin: bottom left;
}
.rscard[rspos="1"] { transform: rotate(0deg); }
.rscard[rspos="2"] { transform: rotate(90deg); }
.rscard[rspos="3"] { transform: rotate(180deg);; }
.rscard[rspos="4"] { transform: rotate(270deg); }

.rotatesquare .opener,
.rotatesquare .closer {
    position: absolute;
    right: 0;
    top: 0;
    padding: 1rem 1rem 0 0;
    cursor: none;
    width: inherit;
    text-align: right;
}
.rotatesquare .opener:hover,
.rotatesquare .closer:hover {
    cursor: pointer;
}
.rotatesquare .opener { color: rgba(0, 0, 0, 0.36); }
.rotatesquare .opener:hover { color: rgba(0, 0, 0, 0.51); }
.rotatesquare .closer { color: #bb5942; }
.rotatesquare .closer:hover { color: #9b3b1b; }

.rotatesquare .rs_title {
    width: 100%;
    padding: 1rem 0.5rem;
    background: rgba(244, 244, 244, 1);
    color: #333333;
    font-size: 1.2rem;
    transition: transform 1s ease-out, background 1s ease-out, width 1s ease-out;
}

.rotatesquare .rs_title_on {
    background: rgb(210, 210, 210);
    transition: background 1s ease-out;
    font-weight: bold;
}

.rotatesquare .rs_title_off {
    background: rgb(255, 255, 255);
    transition: background 1s ease-out;
}

.rotatesquare .rs_body,
.rotatesquare_content {
    position: absolute;
    background: rgb(241, 241, 241);
    padding: 1rem;
    border: 1px solid #0c5460;
    transition: display 1s ease-out;
}



/* ---------------------- BLUE Style ********************* */
.rs_blue .rs_title{
    background: rgba(143, 200, 247, 1);
    background: linear-gradient(90deg, rgba(143, 200, 247, 1) 0%, rgba(143, 200, 247, 0) 100%);
    color: #064486;
}
.rs_blue .rs_title_on {
    background: rgba(143, 200, 247, 1);
    background: linear-gradient(90deg, rgb(107, 146, 186) 0%, rgb(129, 182, 226) 50%, rgba(143, 200, 247, 0) 97%);
    color:#fff;
}
.rs_blue .rs_title_off {
    background: rgba(55, 55, 55, 1);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}

.rs_blue .opener { color: #4b89cc; }
.rs_blue .opener:hover { color: #113f76; }
.rs_blue .closer { color: #de4224; }
.rs_blue .closer:hover { color: #a01f06; }

.rs_blue .rotatesquare_content {
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 12%, rgba(207,231,251,1) 100%);
}