v

Поделиться12020-03-16 10:36:08

Администратор
Автор: Администратор
Сообщений: 18
Уважение: +0
Провел на форуме:
9 часов 25 минут
Последний визит:
2020-04-09 09:31:22

<div class="ae-carousel">
<div class="ae-car-title">
<i>ALTER</i><b>EGO</b>
<div class="ae-car-stitle">all for one, and one for all.</div>
</div>

<input type="radio" id="ahtab1" name="phantasm" checked="">
<label for="ahtab1" id="ahtab1" title="one" class="">
<div class="ahtab">Главная</div>
</label>

<input type="radio" id="ahtab3" name="phantasm">
<label for="ahtab3" id="ahtab3" title="three" class="">
<div class="ahtab">Другое</div>
</label>

<div class="ae-infowrap1">
<div class="ae-info-synopsis">
<h1>THE PREMISE</h1>
<p>Fifty years ago, a portal to another world opened and allowed passage of otherworldly creatures to
cross into ours. Our world was entering a new age of magic; and with it, brought forth new supernatural
residents to settle in our world from a mythical, alternate dimension known as <b>Avalon</b>.
<br><br>
Our story is set within one of various <b>Special Administrative Zones</b> known as <b>S.A.Z. Eden</b>:
an artificial city created for humans and fae folk to coexist with one another — but there’s something
afoot to threaten the fragile peace and stability within this city.</p>

</div>
<div class="ae-info-synpic">
<bs>the story</bs>
</div>
</div>

<div class="ae-infowrap2">
<div class="ae-info-eventm">
<div class="ae-info-eventm-desc">
<div class="ae-info-eventm-desc-pic" style="background-image: url(https://i.ibb.co/7W8ZF1r/image.png);">
</div>
<div class="ae-info-eventm-desc-box">
<div class="ae-info-ping"><img src="https://files.jcink.net/uploads/personae/svg/ping.svg"></div>
SITE EVENT
<b>THE SOUND OF HAMELIN</b>
</div>
</div>
</div>

<div class="ae-info-eventm" id="eventm-finished">
<div class="ae-info-eventm-desc">
<div class="ae-info-eventm-desc-pic" style="background-image: url(https://i.ibb.co/12KxZV4/image.png);">
</div>
<div class="ae-info-eventm-desc-box">SEASONAL EVENT
<b>YULETIDE YEARNINGS</b></div>
</div>
</div>

<div class="ae-info-eventm" id="eventm-finished">
<div class="ae-info-eventm-desc">
<div class="ae-info-eventm-desc-pic" style="background-image:url(https://i.ibb.co/rx8vHcg/image.png);">
</div>
<div class="ae-info-eventm-desc-box">SITE EVENT
<b>RESTORATION EFFORTS</b></div>
</div>
</div>
</div>

<div class="ae-infowrap3">
<div class="ae-info-bg3">
<bs>updates</bs>
</div>
<div class="ae-info-updates">
<div class="ae-info-bulletin">
<h1><b>march updates</b>
<div class="ae-bullet-ping"></div>
</h1>
<div class="ae-bulletin-blurb">
<p>New year, new skin! The old skin was starting to become a bit outdated and, after fielding in some
suggestions from our members, please welcome the new yellow! Our site event <b>Sound of Hamelin</b>
is still on-going, so be sure to check that out while it's still up.
</p>
</div>
</div>

<div class="ae-info-bulletin">
<h1><b>information rehaul</b>
<div class="ae-bullet-ping"></div>
</h1>
<div class="ae-bulletin-blurb">
<p>Hello! We have decided to rewrite a good portion of the site information to make it more easily
digestible and to take in for new and old members alike. Our <b>Canon Groups</b> thread has been
massive restructured for a better understanding of what those roles entail. We'd love to hear your
thoughts on the rehaul, and welcome any feedback and/or suggestions in our Discord.
</p>
</div>
</div>

</div>
</div>
</div>
</section>
</div>
</div>

0

Поделиться22020-03-17 12:42:34

Администратор
Автор: Администратор
Сообщений: 18
Уважение: +0
Провел на форуме:
9 часов 25 минут
Последний визит:
2020-04-09 09:31:22

http://wetheanimals.jcink.net/index.php?showtopic=32

0

Поделиться32020-03-17 12:45:37

Администратор
Автор: Администратор
Сообщений: 18
Уважение: +0
Провел на форуме:
9 часов 25 минут
Последний визит:
2020-04-09 09:31:22

http://aimtrue.jcink.net/index.php?showtopic=5

0

Поделиться42020-03-17 12:48:08

Администратор
Автор: Администратор
Сообщений: 18
Уважение: +0
Провел на форуме:
9 часов 25 минут
Последний визит:
2020-04-09 09:31:22

/****************************************
Infocentre
*****************************************/
#ae-infocentre {
width: 1050px;
height: 500px;
position: relative;
display: flex;
top: 0px;
left: -10px;
align-items: center;
background-color: #fff;
background-image: url();
}

.ae-usercentre {
color: var(--bgcolor);
box-sizing: border-box;
width: 300px;
height: 100%;
padding: 30px;
background-color: var(--second);
position: relative;
}

.ae-uc-bg {
width: 300px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-image: url(https://i.ibb.co/3sTMX6J/Npc-zoom-3040245000-01.png);
background-position: 55% 50%;
filter: grayscale(100%);
opacity: 0.15;
}

.ae-uc-bracket-left {
width: 30px;
height: 30px;
position: absolute;
top: 25px;
left: 25px;
border-left: 5px solid #777777;
border-top: 5px solid #777777;
}

.ae-uc-bracket-right {
width: 30px;
height: 30px;
position: absolute;
bottom: 25px;
right: 25px;
border-right: 5px solid #777777;
border-bottom: 5px solid #777777;
}

.ae-carousel {
width: 800px;
height: 100%;
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
}

.ae-car-title {
position: absolute;
font-size: 80px;
font-weight: 100;
letter-spacing: -2px;
transform: rotate(-90deg);
transform-origin: top left;
width: 500px;
top: 520px;
left: -150px;
text-align: right;
text-transform: uppercase;
padding: 15px 20px 25px 20px;
box-sizing: border-box;
color: #aeaeae;
mix-blend-mode: color-dodge;
z-index: 1;
opacity: 0.5; -moz-opacity: 0.5;
}

.ae-car-title b {
font-weight: 300;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.ae-car-stitle {
color: #eeeeee;
font-weight: 700;
font-size: 15px;
letter-spacing: 2px;
margin-top: -10px;
padding-right: 15px;
}

#ae-infotabs {
width: 800px;
height: 500px;
position: relative;
}

#ae-infotabs input { display: none; }

#ae-infotabs label {
position: absolute;
left: -270px;
line-height: 85%;
height: 70px;
color: #fbfbfb50;
font-size: 90px;
font-weight: 700;
letter-spacing: -1px;
mix-blend-mode: color-dodge;
cursor: pointer;
transition: all .5s ease;;
z-index: 5;
}

.ahtab { height: 70px; line-height: 78%; }

#ae-infotabs label:hover, #ae-infotabs input:checked+label { color: var(--main); font-style: italic; }

#ae-infotabs > #ahtab1 { bottom: 180px; }
#ae-infotabs > #ahtab2 { bottom: 105px; }
#ae-infotabs > #ahtab3 { bottom: 30px; }

.ae-itwrap {
box-sizing: border-box;
width: 800px;
height: 500px;
padding: 30px;
position: relative;
overflow: hidden;
}

.ae-infowrap1 {
width: 100%;
height: 100%;
position: relative;
top: 40px;
display: flex;
align-items: center;
visibility: hidden;
opacity: 0; -moz-opacity: 0;
transition: all ease 0.2s;
}

.ae-info-synopsis {
box-sizing: border-box;
height: 400px;
width: 280px;
position: relative;
z-index: 2;
margin: 10px 0px 10px 20px;
padding: 0px 30px 0px 0px;
overflow-y: hidden;
}

.ae-info-synopsis h1 {
color: var(--second);
font-weight: 900;
font-size: 18px;
}

.ae-info-synopsis p {
text-align: justify;
font-size: 12px;
font-weight: 500;
line-height: 17px;
margin: 0; padding: 0;
}

.ae-info-synopsis p b {
font-weight: 800;
background: var(--gradient2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.ae-info-synopsis::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: transparent;
}

.ae-info-synopsis::-webkit-scrollbar-thumb {
height: 6px;
border: 0px solid var(--bgcolor);
background-clip: padding-box;
background: #33333350;
border-radius: 12px;
}

.ae-info-synopsis::-webkit-scrollbar-button {
width: 0; height: 0;
display: none;
}

.ae-info-synopsis::-webkit-scrollbar-corner { background-color: transparent; }

.ae-info-synpic {
position: absolute;
box-sizing: border-box;
top: -30px;
right: -30px;
width: 800px;
height: 500px;
background-image: url(https://i.ibb.co/rthBPzp/fiery.png);
background-position: 700% 20%;
background-repeat: no-repeat;
filter: grayscale(100%);
transition: all ease 0.2s;
}

.ae-infowrap1:hover .ae-info-synpic {
filter: grayscale(0%);
}

.ae-info-synpic bs {
position: absolute;
right: 30px;
bottom: 50px;
text-transform: uppercase;
width: 400px;
text-align: right;
font-size: 120px;
font-weight: 900;
letter-spacing: -5px;
line-height: 80%;
mix-blend-mode: overlay;
}

.ae-infowrap2 {
width: 100%;
height: 100%;
top: -400px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
visibility: hidden;
opacity: 0; -moz-opacity: 0;
transition: all ease 0.2s;
}

.ae-info-eventm {
cursor: pointer;
box-sizing: border-box;
width: 240px;
height: 100%;
border: 2px solid #dedede;
background-color: var(--bgcolor);
padding: 20px;
overflow: hidden;
}

.ae-info-eventm-desc {
width: 100%;
height: 100%;
position: relative;
background-size: 100%;
background-position: center;
overflow: hidden;
}

.ae-info-eventm-desc-pic {
background-color: #77777700;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all ease 0.2s;
}

.ae-info-eventm:hover .ae-info-eventm-desc-pic {
transform: scale(1.1);
filter: grayscale(100%);
}

.ae-info-eventm-desc-box {
position: absolute;
bottom: 0;
left: 0;
color: var(--bgcolor);
font-size: 13px;
z-index: 5;
padding: 20px 20px 30px 20px;
height: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
align-content: flex-end;
z-index: 3;
}

.ae-info-eventm-desc-box::before {
content: " ";
width: 196px;
height: 396px;
position: absolute;
display: block;
top: 0;
left: 0;
background: linear-gradient(30deg, rgba(20,20,20,1) 0%, rgba(20,20,20,0) 100%);
z-index: -1;
}

.ae-info-eventm-desc-box b {
display: block;
font-weight: 800;
font-size: 24px;
line-height: 90%;
margin-top: 5px;
letter-spacing: -1px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#eventm-finished {
filter: grayscale(100%);
}

#eventm-finished::after {
content: "FINISHED";
position: absolute;
transform: rotate(-90deg);
transform-origin: top right;
color: var(--bgcolor);
font-size: 56px;
font-weight: 700;
text-align: right;
width: 397px;
top: 10px;
left: -230px;
}

#eventm-finished > .ae-info-eventm-desc {
opacity: 0.5; -moz-opacity: 0.5;
}

.ae-info-ping {
-webkit-animation: ping 1s ease-out infinite both;
animation: ping 1s ease-out infinite both;
position: absolute;
width: 30px;
height: 30px;
bottom: 70px;
right: 20px;
}

.ae-infowrap3 {
width: 100%;
height: 100%;
top: -840px;
position: relative;
display: flex;
visibility: hidden;
opacity: 0; -moz-opacity: 0;
align-items: center;
justify-content: flex-end;
transition: all ease 0.2s;
}

.ae-info-bg3 {
width: 800px;
height: 500px;
position: absolute;
top: -30px;
left: -30px;
background-image: url(https://i.ibb.co/b6QwK19/fuego.png);
background-repeat: no-repeat;
background-position: -80% 3%;
filter: grayscale(100%);
transition: all 0.2s ease;
}

.ae-infowrap3:hover .ae-info-bg3 {
filter: grayscale(0%);
}

.ae-info-bg3 bs {
position: absolute;
left: 30px;
bottom: 50px;
text-transform: uppercase;
width: 400px;
text-align: left;
font-size: 90px;
font-weight: 900;
letter-spacing: -7px;
line-height: 80%;
mix-blend-mode: difference;
}

.ae-info-updates {
position: relative;
margin-left: 20px;
}

.ae-info-bulletin {
box-sizing: border-box;
width: 300px;
position: relative;
background-color: #ffffffdb;
margin: 10px 0px;
}

.ae-info-bulletin h1 {
position: relative;
overflow: hidden;
margin: 0; padding: 20px;
text-transform: uppercase;
font-size: 15px;
background-color: #777777;
background-image: url(https://i.ibb.co/Z124YLQ/Ghost-Skeleton … est-03.jpg);
background-size: cover;
background-position: center;
background-blend-mode: multiply;
}

.ae-info-bulletin h1 b, .ae-bulletin-blurb p b {
font-weight: 900;
background: var(--gradient2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase
}

.ae-bullet-ping {
-webkit-animation: ping 1s ease-out infinite both;
animation: ping 1s ease-out infinite both;
position: absolute;
width: 40px;
height: 40px;
background-image: url(https://files.jcink.net/uploads/personae/svg/ping.svg);
background-size: cover;
margin-left: 5px;
right: 20px;
top: calc(50% - 20px);
}

.ae-bulletin-blurb {
display: block;
position: relative;
padding: 25px 20px 25px 25px;
}

.ae-bulletin-blurb p {
height: 100px;
overflow-y: scroll;
padding: 0 10px 0 0; margin: 0;
text-align: justify;
font-size: 11px;
line-height: 15px;
}

.ae-bulletin-blurb p::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: transparent;
}

.ae-bulletin-blurb p::-webkit-scrollbar-thumb {
height: 6px;
border: 6px solid transparent;
background-clip: padding-box;
background: #ddd;
border-radius: 15px;
}

.ae-bulletin-blurb p::-webkit-scrollbar-button {
width: 0; height: 0;
display: none;
}
.ae-bulletin-blurb p::-webkit-scrollbar-corner { background-color: transparent; }

#ae-infotabs > #ahtab1:checked ~ .ae-itwrap > .ae-infowrap1 {
visibility: visible!important;
opacity: 1!important; -moz-opacity: 1!important;
top: 0px!important;
}

#ae-infotabs > #ahtab2:checked ~ .ae-itwrap > .ae-infowrap2 {
visibility: visible!important;
opacity: 1!important; -moz-opacity: 1!important;
top: -440px!important;
}

#ae-infotabs > #ahtab3:checked ~ .ae-itwrap > .ae-infowrap3 {
visibility: visible!important;
opacity: 1!important; -moz-opacity: 1!important;
top: -880px;
}

:root {
--bgcolor: #fbfbfb;
--bgimg: url(https://i.ibb.co/6vNp35N/image.png);

--sword: #30ae98;
--wand: #e45244;
--pentacle: #f3a034;
--chalice: #199ab9;

--undefined: #777777;
--arcana: #a0d4e9;
--unaspected: #9795bc;

--main: #ffbf00;
--second: #101010;
--text: #444;

--gradient: linear-gradient(60deg, rgba(255,134,98,1) 0%, rgba(255,174,0,1) 50%, rgba(255,255,65,1) 100%);
--gradient2: linear-gradient(0deg, rgba(242,142,46,1) 0%, rgba(255,168,58,1) 33%, rgba(255,175,62,1) 66%, rgba(255,184,65,1) 100%);
--gradient3: linear-gradient(60deg, rgba(255,58,141,1) 0%, rgba(255,110,22,1) 33%, rgba(255,194,49,1) 66%, rgba(255,228,45,1) 100%);
}

0

Поделиться52020-03-17 16:19:51

Администратор
Автор: Администратор
Сообщений: 18
Уважение: +0
Провел на форуме:
9 часов 25 минут
Последний визит:
2020-04-09 09:31:22

/* GENERAL TAB LAYOUT */

#boardheader{width:998px; height:550px; position:relative;}
.headertabs{width:998px; height:550px; position:relative; background:#9ccda5;}
.headertab{float: left;}
.headertab input[type=radio]{display: none;}

.headertab label{
display:flex;
width:50px;
height:30px;
align-items:center;
justify-content:center;
white-space:nowrap;
padding:0px 15px;
overflow:hidden;
background:#9ccda5;
color:white;
position: relative; left: 0px;
top: -35px;
margin:0px 6px 0px 0px;
z-index: 3;
transition:0.5s;
-webkit-transition:0.5s;
cursor:pointer;
font-size: 10px;
font-family: Montserrat;
letter-spacing:2px;
}
.headertab input[type=radio]:checked ~ label { z-index: 4; width:200px;}
.headertab label t{display:none;}
.headertab input[type=radio]:checked ~ label n{font-weight:900; margin-right:15px;}
.headertab input[type=radio]:checked ~ label t{display:inline;}

.headercontent{
position: absolute;
top: 0px; left: 150px;
background:#efefef;
width:820px; height:500px;
box-sizing:border-box;
margin:15px;
display:flex; opacity:0; transition:0.5s 0.5s;
-webkit-transition:0.5s 0.5s;}
.headerhalf{
width:500px;
height:500px;
position:relative;
}
.headertab input[type=radio]:checked ~ label ~ .headercontent{z-index: 1; opacity:1;}

/* TAB #1 */

#aimbanner{
width:100%;
height:100%; background:var(--banner);
background-position: 0% 0%;
filter: grayscale(100%);
transition: all ease 1s;
position: absolute;
box-sizing: border-box;
}
#aimbanner:hover {
filter: grayscale(0%);
}

#aimtitle{width:100%; height:100%; box-sizing:border-box; padding:0px 70px 40px 70px; display:flex; flex-direction:column; align-items:center; justify-content:center;}
#aimtitle keep{display:flex; flex-direction:column; align-items:center;}
#aimtitle aimtrue{
font-size: 100px;
font-family: Montserrat;
background: linear-gradient(to bottom right,#d47274,#e3c65d);
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
#aimtitle subtitle{font:10px karla; text-transform:uppercase; letter-spacing:2px; display:block; text-align:center; margin:50px 0px 30px 0px;}
#aimtitle subtitle i{margin:0px 12px; color:var(--c1);}
#aimtitle intro{
width: 250px;
font-size: 11px;
font-family: Montserrat;
height:120px; display:block;
box-sizing: border-box;
overflow:hidden;
box-sizing:border-box;
border-bottom:10px solid #822e2e;
} /* height 120 */

.ae-info-synpic b {
position: absolute;
right: 30px;
bottom: 50px;
/* text-transform: uppercase; */
width: 400px;
text-align: right;
font-size: 120px;
font-weight: 900;
letter-spacing: -5px;
line-height: 80%;
mix-blend-mode: overlay;
}

/* TAB #2 */

#aimupdate{width:100%; height:100%; box-sizing:border-box; padding:30px 20px 40px 20px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; position:relative; }
#aimupdate updatebg{display:flex; position:absolute; z-index:0; top:0; left:50%; height:475px; width:227px; background:rgba(var(--r1),0.2); align-items:flex-end; justify-content:center; padding:25px 25px 0px 25px; box-sizing:border-box;}
#aimupdate updatebg img{width:100%; height:400px; position:relative; box-sizing:border-box; top:-35px;}
#aimupdate updates{display:inline-block; max-width:50%; text-transform:uppercase; letter-spacing:2px; height:47px; margin-bottom:40px; z-index:2; position:relative; font:700 47px playfair display;}
#aimupdate info{display:block; width:202px; height:358px; overflow:auto; background:#fff; box-sizing:border-box; padding-right:12px; z-index:2; position:relative;}
#aimupdate info b{font:10px karla; color:var(--c1); text-transform:uppercase; letter-spacing:3px; display:block; margin-bottom:8px;}

staffinfo{width:100%; height:100%; box-sizing:border-box; padding: 35px 15px 35px 15px; display:flex; flex-direction:column; align-items:center; justify-content:space-between;}
staffbox{width:100%; height:100px; display:flex;}
staffbox pic{width:130px; height:130px; box-sizing:border-box; border-radius:50%;background:#fff;}
staffbox pic img{width:100%; height:100%; border-radius:50%;}
staffbox info{width:calc(100% - 100px); display:flex; flex-direction:column; align-items:flex-start; padding-left:20px; box-sizing:border-box;}
staffbox info name{font:700 24px playfair display; text-transform:uppercase; letter-spacing:6px;}
staffbox info subt{font:10px karla; letter-spacing:3px; text-transform:Uppercase; margin-bottom:7px;}
staffbox info subt i{font-size:8px; color:var(--c1); margin:0px 8px;}
staffbox info intro{font:12px karla; max-height:110px; overflow:auto; padding-right:6px; display:block; box-sizing:border-box;}

staffbox:nth-child(2) info{align-items:flex-end; padding:0px 20px 0px 0px;}

/* TAB #3 */

featuredtab{width:100%; height:475px; box-sizing:border-box; display:flex; position:relative; flex-direction:column; justify-content:space-between; counter-reset:header;}

featuredbox{width:468px; display:flex; height:100px; align-items:center; justify-content:space-between; position:relative; counter-increment:header;}
featuredbox img{width:200px; height:100px;}
featuredbox name{font:800 14px open sans; display:flex; flex-direction:column; align-items:flex-start; letter-spacing:4px; text-transform:uppercase; padding:0px 15px; justify-content:center; width:268px; height:100px; text-align:left;}
featuredbox subt{font:10px karla; letter-spacing:2px; display:block; position:relative; z-index:1;}
featuredbox a{position:relative; z-index:1; color:var(--c1);}
featuredbox:nth-child(even) name{align-items:flex-end;}
featuredbox:after{content:counter(header,decimal-leading-zero); font:800 60px open sans; color:rgba(var(--r1),0.1); position:absolute; right:0px; top:10px; z-index:0;}
featuredbox:nth-child(even):after{left:0px;}

highlights{width:100%; height:100%; background:rgba(var(--r1),0.2); display:flex; justify-content:space-between; align-items:center; flex-direction:column; padding:30px 30px 35px 30px; box-sizing:border-box;}
highlights top{display:flex; justify-content:space-between; font:10px karla; text-transform:uppercase; letter-spacing:3px; width:300px; height:30px; align-items:center;}
highlights top y:first-of-type{color:var(--c1);}
highlights img{width:300px; height:330px; display:block;}
highlights x{font:700 30px playfair display; text-transform:uppercase; letter-spacing:4px; text-align:center;}
highlights x subt{font:400 11px open sans; display:block;}
highlights x subt i{margin:0px 8px; color:var(--c1); font-size:8px;}

/* TAB #4 */

navleft{width:468px; height:475px; background:rgba(var(--r1),0.2); display:flex; justify-content:center; align-items:center; font:800 90px open sans; color:#fff; text-transform:uppercase; overflow:hidden; position:relative; flex-wrap:wrap; flex-direction:column; box-sizing:border-box; padding:0px 70px;}
navleft t{height:110px; display:flex; align-items:center;}

navright{width:100%; height:100%; box-sizing:border-box; padding:15px; display:flex; flex-direction:column; align-items:center; justify-content:space-between;}
navright a{display:flex; width:100%; height:67px; align-items:center; justify-content:flex-start;}
navright a n{font:800 60px open sans; color:var(--l0); position:relative; z-index:0;}
navright a t{font:700 30px playfair display; color:var(--body); position:relative; margin-left:-10px; z-index:1; text-transform:uppercase; letter-spacing:5px; color:var(--body); height:30px; display:inline-block;}

:root {
--banner:url(https://i.ibb.co/rthBPzp/fiery.png);
--l0:#efefef;
--l1:#e0e0e0;
--l2:#e8e8e8;
--c1:#a02422; /* default colour (admin) */
--r1: 160, 36, 34; /* default colour (admin) */
--body:#333;
--b1:#b4b4b4;
--gradient: linear-gradient(60deg, rgba(255,134,98,1) 0%, rgba(255,174,0,1) 50%, rgba(255,255,65,1) 100%);
--gradient2: linear-gradient(0deg, rgba(242,142,46,1) 0%, rgba(255,168,58,1) 33%, rgba(255,175,62,1) 66%, rgba(255,184,65,1) 100%);
--gradient3: linear-gradient(60deg, rgba(255,58,141,1) 0%, rgba(255,110,22,1) 33%, rgba(255,194,49,1) 66%, rgba(255,228,45,1) 100%);
}

.ae-info-synopsis {
box-sizing: border-box;
height: 400px;
width: 280px;
position: relative;
z-index: 2;
margin: 10px 0px 10px 20px;
padding: 0px 30px 0px 0px;
overflow-y: scroll;
}