.cq-gradientbox {
    position: relative;
    height: 270px;
    overflow: hidden;
}
.cq-gradientbox.roundsmall {
    border-radius: 8px;
}

.cq-gradientbox.roundlarge {
    border-radius: 16px;
}


.cq-gradientbox-link{
    text-decoration: none;
    outline: 0;
    border: 0;
}

.cq-gradientbox-contentcontainer {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    color: #fff;
    /*background: #000;*/
    /*background: rgba(0,0,0,0.5);*/

    width: calc(100% - 6px);
    height: calc(100% - 6px);
    margin-top: 3px;
    margin-left: 3px;
    position: absolute;
    padding: 20px 20px 20px 20px;
}
.cq-gradientbox-contentcontainer.roundsmall {
    border-radius: 8px;
}

.cq-gradientbox-contentcontainer.roundlarge {
    border-radius: 16px;
}

.cq-gradientbox-title{
    font-size: 1.4em;
}
.cq-gradientbox-content {
    position: relative;
}

.cq-gradientbox-content.vertically-center {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cq-gradientbox-contentcontainer h3 {
    padding: 0;
    margin: 0 0 12px 0;
    font-size: 1.5em;
    text-align: center;
    color: #fff;
}

.gradient-lavender {
    background: #AC92EC;
    background: -moz-linear-gradient(top, #AC92EC 0%, #967ADC 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #AC92EC), color-stop(100%, #967ADC));
    background: -webkit-linear-gradient(top, #AC92EC 0%, #967ADC 100%);
    background: -o-linear-gradient(top, #AC92EC 0%, #967ADC 100%);
    background: -ms-linear-gradient(top, #AC92EC 0%, #967ADC 100%);
    background: linear, to bottom, #AC92EC 0%, #967ADC 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#AC92EC', endColorstr='#967ADC', GradientType=0);
}

.gradient-green {
    background: #A0D468;
    background: -moz-linear-gradient(top, #A0D468 0%, #8CC152 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #A0D468), color-stop(100%, #8CC152));
    background: -webkit-linear-gradient(top, #A0D468 0%, #8CC152 100%);
    background: -o-linear-gradient(top, #A0D468 0%, #8CC152 100%);
    background: -ms-linear-gradient(top, #A0D468 0%, #8CC152 100%);
    background: linear, to bottom, #A0D468 0%, #8CC152 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#A0D468', endColorstr='#8CC152', GradientType=0);
}

.gradient-yellow {
    background: #FFCE54;
    background: -moz-linear-gradient(top, #FFCE54 0%, #F6BB42 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #FFCE54), color-stop(100%, #F6BB42));
    background: -webkit-linear-gradient(top, #FFCE54 0%, #F6BB42 100%);
    background: -o-linear-gradient(top, #FFCE54 0%, #F6BB42 100%);
    background: -ms-linear-gradient(top, #FFCE54 0%, #F6BB42 100%);
    background: linear, to bottom, #FFCE54 0%, #F6BB42 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FFCE54', endColorstr='#F6BB42', GradientType=0);
}

.gradient-pink {
    background: #EC87C0;
    background: -moz-linear-gradient(top, #EC87C0 0%, #D770AD 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #EC87C0), color-stop(100%, #D770AD));
    background: -webkit-linear-gradient(top, #EC87C0 0%, #D770AD 100%);
    background: -o-linear-gradient(top, #EC87C0 0%, #D770AD 100%);
    background: -ms-linear-gradient(top, #EC87C0 0%, #D770AD 100%);
    background: linear, to bottom, #EC87C0 0%, #D770AD 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#EC87C0', endColorstr='#D770AD', GradientType=0);
}

.gradient-gray {
    background: #CCD1D9;
    background: -moz-linear-gradient(top, #CCD1D9 0%, #AAB2BD 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #CCD1D9), color-stop(100%, #AAB2BD));
    background: -webkit-linear-gradient(top, #CCD1D9 0%, #AAB2BD 100%);
    background: -o-linear-gradient(top, #CCD1D9 0%, #AAB2BD 100%);
    background: -ms-linear-gradient(top, #CCD1D9 0%, #AAB2BD 100%);
    background: linear, to bottom, #CCD1D9 0%, #AAB2BD 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#CCD1D9', endColorstr='#AAB2BD', GradientType=0);
}

.gradient-mint {
    background: #48CFAD;
    background: -moz-linear-gradient(top, #48CFAD 0%, #37BC9B 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #48CFAD), color-stop(100%, #37BC9B));
    background: -webkit-linear-gradient(top, #48CFAD 0%, #37BC9B 100%);
    background: -o-linear-gradient(top, #48CFAD 0%, #37BC9B 100%);
    background: -ms-linear-gradient(top, #48CFAD 0%, #37BC9B 100%);
    background: linear, to bottom, #48CFAD 0%, #37BC9B 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#48CFAD', endColorstr='#37BC9B', GradientType=0);
}

.gradient-aqua {
    background: #4FC1E9;
    background: -moz-linear-gradient(top, #4FC1E9 0%, #3BAFDA 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #4FC1E9), color-stop(100%, #3BAFDA));
    background: -webkit-linear-gradient(top, #4FC1E9 0%, #3BAFDA 100%);
    background: -o-linear-gradient(top, #4FC1E9 0%, #3BAFDA 100%);
    background: -ms-linear-gradient(top, #4FC1E9 0%, #3BAFDA 100%);
    background: linear, to bottom, #4FC1E9 0%, #3BAFDA 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4FC1E9', endColorstr='#3BAFDA', GradientType=0);
}


.gradient-red {
    background: #ED5565;
    background: -moz-linear-gradient(top, #ED5565 0%, #DA4453 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #ED5565), color-stop(100%, #DA4453));
    background: -webkit-linear-gradient(top, #ED5565 0%, #DA4453 100%);
    background: -o-linear-gradient(top, #ED5565 0%, #DA4453 100%);
    background: -ms-linear-gradient(top, #ED5565 0%, #DA4453 100%);
    background: linear, to bottom, #ED5565 0%, #DA4453 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ED5565', endColorstr='#DA4453', GradientType=0);
}

.gradient-blue {
    background: #5D9CEC;
    background: -moz-linear-gradient(top, #5D9CEC 0%, #4A89DC 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #5D9CEC), color-stop(100%, #4A89DC));
    background: -webkit-linear-gradient(top, #5D9CEC 0%, #4A89DC 100%);
    background: -o-linear-gradient(top, #5D9CEC 0%, #4A89DC 100%);
    background: -ms-linear-gradient(top, #5D9CEC 0%, #4A89DC 100%);
    background: linear, to bottom, #5D9CEC 0%, #4A89DC 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5D9CEC', endColorstr='#4A89DC', GradientType=0);
}

.gradient-teal {
    background: #A0CECB;
    background: -moz-linear-gradient(top, #A0CECB 0%, #7EADA9 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #A0CECB), color-stop(100%, #7EADA9));
    background: -webkit-linear-gradient(top, #A0CECB 0%, #7EADA9 100%);
    background: -o-linear-gradient(top, #A0CECB 0%, #7EADA9 100%);
    background: -ms-linear-gradient(top, #A0CECB 0%, #7EADA9 100%);
    background: linear, to bottom, #A0CECB 0%, #7EADA9 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#A0CECB', endColorstr='#7EADA9', GradientType=0);
}

.gradient-white {
    background: #F5F7FA;
    background: -moz-linear-gradient(top, #F5F7FA 0%, #E6E9ED 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #F5F7FA), color-stop(100%, #E6E9ED));
    background: -webkit-linear-gradient(top, #F5F7FA 0%, #E6E9ED 100%);
    background: -o-linear-gradient(top, #F5F7FA 0%, #E6E9ED 100%);
    background: -ms-linear-gradient(top, #F5F7FA 0%, #E6E9ED 100%);
    background: linear, to bottom, #F5F7FA 0%, #E6E9ED 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#F5F7FA', endColorstr='#E6E9ED', GradientType=0);
}

.gradient-orange {
    background: #FFA500;
    background: -moz-linear-gradient(top, #FFA500 0%, #E56127 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #FFA500), color-stop(100%, #E56127));
    background: -webkit-linear-gradient(top, #FFA500 0%, #E56127 100%);
    background: -o-linear-gradient(top, #FFA500 0%, #E56127 100%);
    background: -ms-linear-gradient(top, #FFA500 0%, #E56127 100%);
    background: linear, to bottom, #FFA500 0%, #E56127 100%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FFA500', endColorstr='#E56127', GradientType=0);
}

.cq-gradientbox-avatarcontainer {
    /*background: rgba(0, 0, 0, 0.5);*/
    /*top: 50%;*/
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-left: 50%;
    margin-bottom: 16px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}

.cq-gradientbox-avatarcontainer.circle {
    border-radius: 50%;
}

.cq-gradientbox-avatarcontainer.roundsmall {
    border-radius: 8px;
}

.cq-gradientbox-avatarcontainer.roundlarge {
    border-radius: 16px;
}
.cq-gradientbox-avatarcontainer.square {
    border-radius: 0;
}

.cq-gradientbox .cq-gradientbox-avatarimage {
    /*width: 128px;*/
    /*width: 80px;*/
    /*min-width: 320px;*/
    /*min-height: 320px;*/

    border-radius: 50%;
}

.cq-gradientbox .cq-gradientbox-icon {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 0;
    font-size: 56px;
    line-height: 100px;
}
