/* defaults
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* variables */
:root
{
    --shirt-lite: rgba(078,087,087,1);      /* hex #575757 */
    --shirt-norm: rgba(058,058,060,1);      /* hex #3a3a3c */
    --shirt-dark: rgba(032,032,036,1);      /* hex #202024 */
}

/* body */
.content-wrapper.page.shirt-success .page-content-wrapper .page-body {padding: 0;}

.page.shirt-success .has-before::before,
.page.shirt-success .has-after::after {display: none;}

@media only screen and (max-width: 1024px)
{
    .content-wrapper.page.shirt-success .page-content-wrapper .page-body {padding: 0;}
}
@media only screen and (max-width: 480px)
{
    .content-wrapper.page.shirt-success .page-content-wrapper .page-body {padding: 0;}
}










/* success page
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */
.shirt-success .block.success
{
    padding: 10rem; min-height: calc(100vh - 22.5rem);
    color: var(--white-norm);
}
.shirt-success .block.success::before
{
    top: 0; left: 0; display: block; float: left;
    background: linear-gradient(to top right, var(--shirt-dark), var(--shirt-norm));
}

@media only screen and (max-width: 1400px)
{
    .shirt-success .block.success {padding: 10rem 5rem;}
}
@media only screen and (max-width: 1024px)
{
    .shirt-success .block.success {min-height: calc(100vh - 17rem); padding: 7rem 3rem 15rem 3rem;}
}
@media only screen and (max-width: 480px)
{
    .shirt-success .block.success {min-height: calc(100vh - 12rem); padding: 5rem 2rem 15rem 2rem;}
}





/* text
==================================================================================================== */
.shirt-success .block.success .block.text
{
    z-index: 1;
    float: right; width: calc(100% - 40rem); margin: 4rem 0 0 0; padding: 10rem;
}
.shirt-success .block.success .block.text::before
{
    z-index: -1;
    top: 0; left: -50rem; display: block; float: left; width: 100vw;
    background: linear-gradient(to top right, var(--green-norm), var(--green-lite));
}
.shirt-success .block.success .block.text h3 {font-weight: 600; font-size: 3rem;}
.shirt-success .block.success .block.text p {font-weight: 300; font-size: 2rem;}

@media only screen and (max-width: 1400px)
{
    .shirt-success .block.success .block.text {width: calc(100% - 30rem);}
    .shirt-success .block.success .block.text::before {left: -35rem;}
}
@media only screen and (max-width: 1024px)
{
    .shirt-success .block.success .block.text {padding: 7rem 5rem 7rem 7rem;}
    .shirt-success .block.success .block.text::before {left: -1rem;}
}
@media only screen and (max-width: 768px)
{
    .shirt-success .block.success .block.text {float: left; width: 100%; margin: 0; padding: 5rem 0 15rem 0;}
    .shirt-success .block.success .block.text::before {transform: translate3d(-50%,0,0); left: 50%;}
}
@media only screen and (max-width: 540px)
{
    .shirt-success .block.success .block.text h3 {font-size: 2rem;}
    .shirt-success .block.success .block.text p {font-size: 1.6rem;}
}





/* photo
==================================================================================================== */
.shirt-success .block.success .block.img
{
    z-index: 2;
    float: left; width: 40rem;
    text-align: center;
}
.shirt-success .block.success .block.img img
{
    display: inline-block; float: none; width: 40rem; height: auto; margin: 0 0 -0.7rem 0; padding: 0;
    box-shadow: 0 0 0 3rem var(--red-lite), 0 3rem 5rem 3rem rgba(0,0,0,0.25);
}

@media only screen and (max-width: 1400px)
{
    .shirt-success .block.success .block.img {width: 30rem;}
}
@media only screen and (max-width: 768px)
{
    .shirt-success .block.success .block.img {width: 100%; margin: -5rem 0 0 0;}
}
@media only screen and (max-width: 500px)
{
    .shirt-success .block.success .block.img img {width: 65vw;}
}