/* === HOMEPAGE TEMPLATE CSS === */

@font-face {
    font-family:'elephantitalic';
    src: url('/assets/fonts/elephnti-webfont.woff2') format('woff2'), url('/assets/fonts/elephnti-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.content { padding-bottom:0; }

.home-banner {
	margin:0 auto 120px;height:calc(100vh - 245px);min-height:650px;width:100%;position:relative;z-index:1;
	background-color:#FFF;background-size:cover;background-position:center 60%;background-repeat:no-repeat;
	-moz-transition:background-image 1s ease-in-out;-webkit-transition:background-image 1s ease-in-out;transition:background-image 1s ease-in-out;
	-webkit-box-shadow:inset 0px 0px 60px 0px rgba(0,0,0,0.6);-moz-box-shadow:inset 0px 0px 60px 0px rgba(0,0,0,0.6);box-shadow:inset 0px 0px 60px 0px rgba(0,0,0,0.6);
	-webkit-backface-visibility:hidden;backface-visibility:hidden;
}

.home-banner .content__wrapper { height:100%;position:relative;padding:0 30px; }

.home-banner__fade { position:absolute;top:0;left:0;height:100%;width:100%;background-color:#FFF;content:'';opacity:0; }

.home-banner__control { border:none;box-shadow:none;position:absolute;top:0;height:100%;z-index:2;padding:0 40px; }
.home-banner__control.left {
	left:0;
	background:-moz-linear-gradient(left, rgba(37,37,37,0.25) 0%, rgba(37,37,37,0) 100%);
	background:-webkit-linear-gradient(left, rgba(37,37,37,0.25) 0%,rgba(37,37,37,0) 100%);
	background:linear-gradient(to right, rgba(37,37,37,0.25) 0%,rgba(37,37,37,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26252525', endColorstr='#00252525',GradientType=1 );
}
.home-banner__control.right {
	right:0;
	background: -moz-linear-gradient(left, rgba(37,37,37,0) 0%, rgba(37,37,37,0.15) 100%);
	background: -webkit-linear-gradient(left, rgba(37,37,37,0) 0%,rgba(37,37,37,0.15) 100%);
	background: linear-gradient(to right, rgba(37,37,37,0) 0%,rgba(37,37,37,0.15) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00252525', endColorstr='#26252525',GradientType=1 );
}
.home-banner__control > i {
	font-size:8em;color:#FFF;
	-moz-transform:scale(1,1);-webkit-transform:scale(1,1);transform:scale(1,1);
	-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;
}
.home-banner__control:hover > i {
	color:#782b91;-moz-transform:scale(1.25,1.25);-webkit-transform:scale(1.25,1.25);transform:scale(1.25,1.25);
}

.home-banner__overlay { width:100%;height:100%;padding-bottom:180px;margin:0 auto;position:relative;overflow:hidden;z-index:1; }
.home-banner__overlay__comp { width:45%;height:100%;position:relative; }
.home-banner__overlay__comp img { width:90%;margin-bottom:30px;max-height:320px; }

.home-banner__overlay__comp .banner-comp {
	position:absolute;height:100%;width:100%;top:0;left:0;right:0;bottom:0;padding:10px 0 5px;display:none;text-align:center;
	-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-items:center;justify-content:center;
	-moz-transform-origin:50% 200%;-webkit-transform-origin:50% 200%;transform-origin:50% 200%;
	-moz-transition:-moz-transform 1s, opacity 0.5s;-webkit-transition:-webkit-transform 1s, opacity 0.5s;transition:transform 1s, opacity 0.5s;
}
.home-banner__overlay__comp .banner-comp.active { display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex; }
.home-banner__overlay__comp .banner-comp.cw-90 { -moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0; }
.home-banner__overlay__comp .banner-comp.ccw-90 { -moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0; }
.home-banner__overlay__comp .banner-comp.current { -moz-transition-delay:0s, 0.35s;-webkit-transition-delay:0s, 0.35s;transition-delay:0s, 0.35s; }

.home-banner__nav { position:absolute;bottom:-5%;left:40px;width:calc(100% - 80px);height:30%;z-index:2;max-height:300px; }
.home-banner__nav__btn {
	width:25%;max-width:280px;height:100%;position:relative;
	display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;justify-content:center;
}
.home-banner__nav__btn > div {
	position:absolute;width:100%;height:100%;top:0;left:0;background-color:#252525;border-radius:10px;color:#FFF;padding:18px 0;
	display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
	align-items:center;justify-content:space-around;text-align:center;
	-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;
	-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;
}
.home-banner__nav__btn:first-of-type > div { background-color:#782b91; }
.home-banner__nav__btn:nth-of-type(2) > div { background-color:#8dc121; }
.home-banner__nav__btn:nth-of-type(3) > div { background-color:#ea8923; }
.home-banner__nav__btn:last-of-type > div { background-color:#00aeef; }
.home-banner__nav__btn:hover > div { color:#FFF;top:-20px; }
.home-banner__nav a.home-banner__nav__btn::after { height:4px;background-color:#252525;border-radius:0 0 4px 4px; }
.home-banner__nav a.home-banner__nav__btn:hover::after { width:90%;left:5%; }

.home-banner__nav__btn .title,
.home-banner__nav__btn .sub-title { font-weight:700;text-transform:uppercase; }
.home-banner__nav__btn .title { font-size:2.5em;line-height:0.7; }
.home-banner__nav__btn .sub-title { font-size:1.5em;line-height:1.2; }

:is(.home-banner, .home-section).lazyload { background-image:none !important; }

.home-section {
	position:relative;z-index:1;margin:0;overflow:hidden;padding:1.5em 0;
    background-size:cover;background-position:center center;background-repeat:no-repeat;
}

.home-section .content__wrapper { height:100%; }
.home-section .content__wrapper > section {
    background-image:url('https://bonacia-sites.s3-eu-west-1.amazonaws.com/young-writers/images/yw-glow.png?v=1.00');background-position:center center;background-repeat:no-repeat;background-size:100% 100%;position:relative;z-index:2;
}
.home-section .content__wrapper > div:not(.flex__spacer) { position:relative;z-index:2; }
.home-section .content__wrapper > * > .stars { position:absolute;z-index:-1; }

.home-section .content__wrapper > section h2 { color:#000; }
.home-section .content__wrapper > section > .stars:first-child { width:20%;top:0; }
.home-section .content__wrapper > section > .stars:nth-child(2) { width:30%;bottom:0; }

.home-section .content__wrapper > section:first-child > .stars:first-child { left:0;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg); }
.home-section .content__wrapper > section:first-child > .stars:nth-child(2) { left:40%;-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg); }

.home-section .content__wrapper > section:last-child > .stars:first-child { right:0;-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg); }
.home-section .content__wrapper > section:last-child > .stars:nth-child(2) { right:40%;-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg); }

.home-section .content__wrapper > div > .stars:first-child { width:25%;top:-30px; }
.home-section .content__wrapper > div > .stars:nth-child(2) { width:17.5%;bottom:80px; }

.home-section .content__wrapper > div:first-child > .stars:first-child { left:25%;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg); }
.home-section .content__wrapper > div:first-child > .stars:nth-child(2) { right:calc(100% - 40px);-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg); }

.home-section .content__wrapper > div:last-child > .stars:first-child { right:25%;-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg); }
.home-section .content__wrapper > div:last-child > .stars:nth-child(2) { left:calc(100% - 40px);-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg); }

.home-section .content__wrapper > .flex__spacer { -webkit-flex:0 0 7.5%;-ms-flex:0 0 7.5%;flex:0 0 7.5%; }

.home-section__content {
    position:relative;border-radius:5px;border:2px solid #5f5f5f;background-color:#FFF;padding:50px;
    -webkit-box-shadow:0 0 40px 0 rgba(255,255,255,.7);-moz-box-shadow:0 0 40px 0 rgba(255,255,255,.7);box-shadow:0 0 40px 0 rgba(255,255,255,.7);
}

.home-section__content .logo { max-width:270px;margin:0 auto; }

.link-listing {
     padding:5px 15px 5px 5px;border-bottom:1px solid #252525;margin-bottom:5px;
     -webkit-box-shadow:inset 0 0 15px 0 rgba(0,0,0,0.075);-moz-box-shadow:inset 0 0 15px 0 rgba(0,0,0,0.075);box-shadow:inset 0 0 15px 0 rgba(0,0,0,0.075);
}
.link-listing > figure { margin:0;-webkit-flex:0 0 100px;-ms-flex:0 0 100px;flex:0 0 100px;height:80px; }
.link-listing > figure > img { object-fit:cover;width:100%;height:100%; }
.link-listing p { font-size:1.05em;line-height:1.2; }
.link-listing p > span { font-weight:400;color:#00aeef;-ms-transition:color .3s;-moz-transition:color .3s;-webkit-transition: color .3s;transition: color .3s; }
.link-listing:hover p > span { color:#782b91; }

#shop { background-image:url('https://bonacia-sites.s3-eu-west-1.amazonaws.com/young-writers/images/yw-purple-bg.jpg'); }
#spag { background-image:url('https://bonacia-sites.s3-eu-west-1.amazonaws.com/young-writers/images/yw-green-bg.jpg'); }
#toolkits { background-image:url('https://bonacia-sites.s3-eu-west-1.amazonaws.com/young-writers/images/yw-black-bg.jpg'); }

#toolkits .content__wrapper > section { background-image:none; }
#toolkits .content__wrapper > section figure:not(.stars) { max-width:500px;padding-bottom:20px; }
#toolkits section h3 { font-family:'elephantitalic',cursive !important;font-weight:normal !important; }

#news-subscribe { background-image:url('https://bonacia-sites.s3-eu-west-1.amazonaws.com/young-writers/images/yw-yellow-bg.jpg'); }

#news-subscribe .content__wrapper .radio-label { height:100px;text-transform:none;font-weight:400;border-radius:5px !important;max-width:none;border:1px solid #d2d2d2;transition:background-color 0.3s linear, color 0.3s linear;text-align:center;padding:5px; }
#news-subscribe .content__wrapper .radio-label p { margin:0 0 5px; font-weight:400; }
#news-subscribe .content__wrapper .radio-label i { font-size: 2em; }
#news-subscribe .content__wrapper .radio-label:not(:hover):not(.selected) { background-color:#FFF;color:#252525; }

#news-subscribe a.share-bar__link { border-radius:5px; }

#news-subscribe .content__wrapper form { position:relative;border-radius:5px;-webkit-box-shadow:0 0 50px 0 rgba(255,255,255,.75);-moz-box-shadow:0 0 50px 0 rgba(255,255,255,.75);box-shadow:0 0 50px 0 rgba(255,255,255,.75);border:2px solid #5f5f5f; }
#news-subscribe .content__wrapper form > figure { position:absolute;top:-40px;left:-40px;width:50%;max-width:240px;-webkit-transform:rotate(-3deg);-ms-transform:rotate(-3deg);transform:rotate(-3deg); }

#news-subscribe .content__wrapper form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not(:focus):not(.action-required),
#news-subscribe .content__wrapper form select:not(:focus):not(.action-required) { -webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;border:1px solid #d2d2d2 !important; }

#blog-latest { background-image:url('https://bonacia-sites.s3-eu-west-1.amazonaws.com/young-writers/images/yw-blue-bg.jpg'); }

@media screen and (max-width:1500px) {
	.home-banner .content__wrapper { padding:0; }
	.home-banner__overlay__comp { width:40%; }
}
@media screen and (max-width:1200px) {
    .home-section { overflow:hidden; }
    .home-section .content__wrapper > .flex__spacer { -webkit-flex:0 0 50px;-ms-flex:0 0 50px;flex:0 0 50px; }
    .home-section .content__wrapper > section:first-child > .stars:nth-child(2) { left:90%; }
    .home-section .content__wrapper > section > .stars:nth-child(2) { right:90%; }
    .home-section .content__wrapper > div:first-child > .stars:first-child { width:20%;top:-20px;left:40%; }
	.home-section .content__wrapper > div:last-child > .stars:first-child { width:20%;top:-20px;right:40%; }
	.home-section .content__wrapper > div > .stars:nth-child(2) { bottom:150px !important; }
    .link-listing p { font-size:0.95em; }
    .link-listing > figure { -webkit-flex:0 0 80px;-ms-flex:0 0 80px;flex:0 0 80px; }
    #news-subscribe .content__wrapper form > figure { left:20px; }
	#news-subscribe .content__wrapper #button-grid { -ms-gap:10px;gap:10px;font-size:90%;-ms-grid-template-columns:repeat(auto-fit,minmax(80px,1fr));grid-template-columns: repeat(auto-fit,minmax(80px,1fr)); }
}
@media screen and (max-width:1100px) {
    .home-banner__nav__btn { line-height:1;font-size:0.95em; }
    .home-banner__nav__btn .title { font-size:4.2em; }
    .home-banner__nav__btn .sub-title { font-size:1.35em; }
    .home-section .content__wrapper > .flex__spacer { -webkit-flex:0 0 40px;-ms-flex:0 0 40px;flex:0 0 40px; }
}
@media screen and (max-width:1000px) {
	.home-banner { min-height:550px;height:calc(100vh - 230px); }
	.home-banner__overlay { padding-bottom:145px; }
	.home-banner__overlay__comp { width:45%; }
	.home-banner__overlay__comp img { width:100%; }
	.home-banner__control > i { font-size:6em; }
	.home-banner__nav { max-height:200px; }
	.home-banner__nav > .flex__spacer { -webkit-flex:0 0 15px;-ms-flex:0 0 15px;flex:0 0 15px; }
}
@media screen and (max-width:900px) {
    .home-banner__nav__btn { font-size:0.9em; }
    .home-banner__nav__btn .title { font-size:3.8em; }
    .home-banner__nav__btn .sub-title { font-size:1.2em; }
    .home-section { max-height:none;height:initial; }
    .home-section__content { -webkit-box-shadow:0 0 30px 0 rgba(255,255,255,.65);-moz-box-shadow:0 0 30px 0 rgba(255,255,255,.65);box-shadow:0 0 30px 0 rgba(255,255,255,.65); }
    .link-listing p { font-size:1em; }
    .link-listing > figure { -webkit-flex:0 0 120px;-ms-flex:0 0 120px;flex:0 0 120px; }
    #toolkits .content__wrapper > section figure:not(.stars) { width:80%;padding-bottom:30px; }
    #news-subscribe .content__wrapper #button-grid { -ms-gap:20px;gap:20px;font-size:100%; }
}
@media screen and (max-width:600px) {
    .home-section .content__wrapper > .flex__spacer { -webkit-flex:0 0 30px;-ms-flex:0 0 30px;flex:0 0 30px; }
    .home-section .content__wrapper > div:first-child > .stars:first-child { left:80%; }
    .home-section .content__wrapper > div:last-child > .stars:first-child { right:80%; }
    .home-section__content { padding:40px; }
    .link-listing p { font-size:0.85em; }
    .link-listing > figure { -webkit-flex:0 0 80px;-ms-flex:0 0 80px;flex:0 0 80px;height:60px; }
    #news-subscribe .content__wrapper form > figure { left:25%;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg); }
    #news-subscribe .content__wrapper #button-grid { -ms-gap:10px;gap:10px;font-size:90%;-ms-grid-template-columns:repeat(auto-fit,minmax(70px,1fr));grid-template-columns: repeat(auto-fit,minmax(70px,1fr)); }
    #news-subscribe .content__wrapper .radio-label { height:80px; }
    #news-subscribe .content__wrapper .radio-label > *:not(h2) { font-size:90%; }
}
@media screen and (max-width:500px) {
	#news-subscribe .content__wrapper form > figure { top:-30px; }
}
@media screen and (max-width:450px) {
    .home-section__content { padding:30px;-webkit-box-shadow:0 0 20px 0 rgba(255,255,255,.5);-moz-box-shadow:0 0 20px 0 rgba(255,255,255,.5);box-shadow:0 0 20px 0 rgba(255,255,255,.5); }
    .link-listing p { font-size:0.8em; }
    .link-listing > figure { -webkit-flex:0 0 70px;-ms-flex:0 0 70px;flex:0 0 70px;height:55px; }
}
@media screen and (max-width:800px) {
	.home-banner { min-height:475px; }
	.home-banner__overlay { padding-bottom:120px; }
	.home-banner__nav { max-height:170px; }
	.home-banner__nav__btn { font-size:0.9em; }
	.home-banner__nav__btn .title { font-size:3.2em; }
	.home-banner__nav__btn .sub-title { font-size:1.15em; }
}
@media screen and (max-width:700px) {
	.home-banner { min-height:330px;height:calc(100vh - 400px);margin-bottom:440px;background-size:auto 120%;background-position:center 0%; }
	.home-banner__overlay { padding-bottom:0px; }
	.home-banner__overlay__comp { width:52%; }
	.home-banner__overlay__comp .btn { height:45px; }
	.home-banner__control { padding:0 30px; }
	.home-banner__control > i { font-size:4.5em; }
	.home-banner__nav {
		position:relative;width:100%;bottom:initial;left:initial;height:auto;margin-top:35px;padding:0 30px;
		display:grid;grid-auto-flow:row;grid-template-columns:repeat(2, minmax(auto, 1fr));gap:20px;
	}
	.home-banner__nav .flex__spacer { display:none; }
	.home-banner__nav a.home-banner__nav__btn::after { height:3px; }
	.home-banner__nav__btn { width:100%;min-height:150px;max-width:none; }
}
@media screen and (max-width:450px) {
	.home-banner { height:calc(100vh - 500px);margin-bottom:780px; }
	.home-banner__overlay__comp { width:60%; }
	.home-banner__nav { grid-template-columns:repeat(1, minmax(auto, 1fr)); }
	.home-banner__control { padding:0 20px; }
	.home-banner__control > i { font-size:3.5em; }
}


/* === IE / EDGE COMPATIBILITY === */

@media all and (-ms-high-contrast:none) and (max-width: 700px), (-ms-high-contrast:active) and (max-width: 700px) {
	.home-banner__nav { display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr 1fr;left:0; }
	.home-banner__nav__btn:nth-of-type(1) { -ms-grid-column:1;-ms-grid-row:1;margin:0 10px 10px 0; }
	.home-banner__nav__btn:nth-of-type(2) { -ms-grid-column:2;-ms-grid-row:1;margin:0 0 10px 10px; }
	.home-banner__nav__btn:nth-of-type(3) { -ms-grid-column:1;-ms-grid-row:2;margin:10px 10px 0 0; }
	.home-banner__nav__btn:nth-of-type(4) { -ms-grid-column:2;-ms-grid-row:2;margin:10px 0 0 10px; }
}

@media all and (-ms-high-contrast:none) and (max-width: 450px), (-ms-high-contrast:active) and (max-width: 450px) {
	.home-banner__nav { -ms-grid-columns:1fr; }
	.home-banner__nav__btn { margin:5px 0 !important;border-bottom:15px solid #FFF; }
	.home-banner__nav__btn:nth-of-type(1) { -ms-grid-row:1; }
	.home-banner__nav__btn:nth-of-type(2) { -ms-grid-column:1;-ms-grid-row:2; }
	.home-banner__nav__btn:nth-of-type(3) { -ms-grid-row:3; }
	.home-banner__nav__btn:nth-of-type(4) { -ms-grid-column:1;-ms-grid-row:4; }
}
