- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
- 710
- 711
- 712
- 713
- 714
- 715
- 716
- 717
- 718
- 719
- 720
- 721
- 722
- 723
- 724
- 725
- 726
- 727
- 728
- 729
- 730
- 731
- 732
- 733
- 734
- 735
- 736
- 737
- 738
- 739
- 740
- 741
- 742
- 743
- 744
- 745
- 746
- 747
- 748
- 749
- 750
- 751
- 752
- 753
- 754
- 755
- 756
- 757
- 758
- 759
- 760
- 761
- 762
- 763
- 764
- 765
- 766
- 767
- 768
- 769
- 770
- 771
- 772
- 773
- 774
- 775
- 776
- 777
- 778
- 779
- 780
- 781
- 782
- 783
- 784
- 785
- 786
- 787
- 788
- 789
- 790
- 791
- 792
- 793
- 794
- 795
- 796
- 797
- 798
- 799
- 800
- 801
- 802
- 803
- 804
- 805
- 806
- 807
- 808
- 809
- 810
- 811
- 812
- 813
- 814
- 815
- 816
- 817
- 818
- 819
- 820
- 821
- 822
- 823
- 824
- 825
- 826
- 827
- 828
- 829
- 830
- 831
- 832
- 833
- 834
- 835
- 836
- 837
- 838
- 839
- 840
- 841
- 842
- 843
- 844
- 845
- 846
- 847
- 848
- 849
- 850
- 851
- 852
- 853
- 854
- 855
- 856
- 857
- 858
- 859
- 860
- 861
- 862
- 863
- 864
- 865
- 866
- 867
- 868
- 869
- 870
- 871
- 872
- 873
- 874
- 875
- 876
- 877
- 878
- 879
- 880
- 881
- 882
- 883
- 884
- 885
- 886
- 887
- 888
- 889
- 890
- 891
- 892
- 893
- 894
- 895
- 896
- 897
- 898
- 899
- 900
- 901
- 902
- 903
- 904
- 905
- 906
- 907
- 908
- 909
- 910
- 911
- 912
- 913
- 914
- 915
- 916
- 917
- 918
- 919
- 920
- 921
- 922
- 923
- 924
- 925
- 926
- 927
- 928
- 929
- 930
- 931
- 932
- 933
- 934
- 935
- 936
- 937
- 938
- 939
- 940
- 941
- 942
- 943
- 944
- 945
- 946
- 947
- 948
- 949
- 950
- 951
- 952
- 953
- 954
- 955
- 956
- 957
- 958
- 959
- 960
- 961
- 962
- 963
- 964
- 965
- 966
- 967
- 968
- 969
- 970
- 971
- 972
- 973
- 974
- 975
- 976
- 977
- 978
- 979
- 980
- 981
- 982
- 983
- 984
- 985
- 986
- 987
- 988
- 989
- 990
- 991
- 992
- 993
- 994
- 995
- 996
- 997
- 998
- 999
- 1000
- 1001
- 1002
- 1003
- 1004
- 1005
- 1006
- 1007
- 1008
- 1009
- 1010
- 1011
- 1012
- 1013
- 1014
- 1015
- 1016
- 1017
- 1018
- 1019
- 1020
- 1021
- 1022
- 1023
- 1024
- 1025
- 1026
- 1027
- 1028
- 1029
- 1030
- 1031
- 1032
- 1033
- 1034
- 1035
- 1036
- 1037
- 1038
- 1039
- 1040
- 1041
- 1042
- 1043
- 1044
- 1045
- 1046
- 1047
<template>
<main>
<section class="hero">
<div class="container">
<h2>
Live Lectures <br />
are here.
</h2>
<h3>Hone your skills with a coach<br />in your language.</h3>
</div>
</section>
<section class="calendar">
<div class="container">
<div class="heading">
Live Lecture schedule for <br />{{ firstCalendarDay }} -
{{ lastCalendarDay }}
</div>
<div class="language-selection">
<!-- <div class="language-name">Spanish</div> -->
<div class="select-wrap">
<SelectLanguageFlags :themes="['blue', 'big']" />
</div>
</div>
<section class="wrapper" v-if="liveSessions === null">
<div class="spinner">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</section>
<div class="schedule" v-if="liveSessions && liveSessions.length">
<article
class="lesson"
v-for="(schedule, i) in groupedLiveSessions"
:key="i"
>
<div class="day">{{ schedule.date }}</div>
<section v-for="(lesson, j) in schedule.lessons" :key="j">
<div class="time">{{ lesson.startTime }}<span> (ET)</span></div>
<div class="title">{{ lesson.video.title }}</div>
<div class="tutor">{{ lesson.video.tutors[0].fullName }}</div>
<button @click.prevent="onSignupClick">NOTIFY ME</button>
</section>
</article>
</div>
<div class="schedule" v-if="liveSessions && !liveSessions.length">
<div class="apollo no-results">
Sorry. There are no Live Lectures for this language in the next
week.
</div>
</div>
<div class="signup-dialog" v-if="isDialogOpen">
<button class="close" @click="closeOvelay">×</button>
<div v-if="formStatus == 'normal'">
<b>Sign up for this lecture.</b>
<p>
We'll notify you when this lecture is about to start.
</p>
<form action="" @submit.prevent="onSubmit">
<input type="email" v-model="email" />
<input type="submit" value="SIGN UP" />
</form>
<div class="gdpr_target"></div>
<div class="form-error" v-if="formError">
{{ formError }}
</div>
</div>
<div v-else>
<b>You're all set!</b>
<p>
We'll notify you when this lecture is about to start.
</p>
</div>
</div>
</div>
<!--/container -->
</section>
<section class="middle">
<div class="container">
<article>
<div class="text">
<h5>So, what is it?</h5>
<p>
One of our coaches will live-stream a lesson, where you can get
your feet wet in real-world conversation. Take polls, chat with
other learners, and practice pronunciation in your language. Each
session is about 15 to 20 minutes.
<strong>Did we mention that it’s free for everyone?*</strong>
</p>
</div>
<div class="image">
<img src="/nuxt-assets/img/live-lectures/panel-1.png" alt />
</div>
</article>
<article>
<div class="text">
<h5>What will I learn?</h5>
<p>
Every session aligns with a unit in your Rosetta Stone course.
Once you complete that unit, you’ll be able to join the relevant
session. This way, you’ll have the background needed to review and
improve the skills you already learned.
</p>
</div>
<div class="image">
<img src="/nuxt-assets/img/live-lectures/panel-2.png" alt />
</div>
</article>
<article>
<div class="text">
<h5>What are the benefits of Live Lectures?</h5>
<p>
Learning on your own is important, but so is learning with others.
Make new friends and practice grammar, vocabulary, and more with
Live Lectures, all with the help of an expert language coach.
</p>
</div>
<div class="image">
<img src="/nuxt-assets/img/live-lectures/panel-3.png" alt />
</div>
</article>
<article>
<div class="text">
<h5>When are the sessions? How do I access them?</h5>
<p>
Our schedule varies. We know that you’re busy, so we’ll send you a
notification about upcoming sessions beforehand and then another
one when the session is about to start.
</p>
</div>
<div class="image">
<img src="/nuxt-assets/img/live-lectures/panel-4.png" alt />
</div>
</article>
</div>
</section>
<div class="container">
<button
class="bottom-cta"
@click.prevent="scrollTo('scrollIntoView', '.calendar .container')"
>
SIGN UP FOR LIVE LECTURE NOTIFICATIONS
</button>
</div>
<FormFooterEmailCollection />
<div class="legal">
<div class="container">
* Full access to Live Lectures is included with Rosetta Stone online
consumer version subscriptions at no additional cost. Free access
version includes limited selection of languages and lectures; subject to
change and discontinuation at any time without notice. To access via
mobile app, app download and account creation required. Schedule,
content, and coach subject to change without notice. Selection of
languages currently includes English, Spanish, French, German,
Portuguese, Russian, Italian, Chinese, Tagalog, Irish, Korean, and
Japanese, and is subject to change as more languages are added.
</div>
</div>
<Overlay v-if="$store.state.overlay" />
</main>
</template>
<script>
import gql from 'graphql-tag';
import { validateEmail } from '~/modules/validator.js';
import briteVerify from '~/modules/brite-verify.js';
import Overlay from '~/components/Overlay.vue';
import SelectLanguageFlags from '~/components/SelectLanguageFlags';
import FormFooterEmailCollection from '~/components/FormFooterEmailCollection.vue';
import { mapState } from 'vuex';
export default {
apollo: {
liveSessions: {
query: require('../graphql/live-sessions-slim.gql'),
skip: true,
fetchPolicy: 'no-cache',
variables() {
return {
language: this.$store.getters.selectedLanguage.id
};
}
}
},
components: {
Overlay,
SelectLanguageFlags,
FormFooterEmailCollection
},
head() {
return {
title: 'Live Lesson Lectures | Rosetta Stone',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
name: 'google-site-verification',
content: 'EEfQ4bUNLVuWh2WpdCkYUsSMRxy3kRLd0RkhwZhlX0c'
},
{ name: 'apple-itunes-app', content: 'app-id=435588892' },
{
hid: 'description',
name: 'description',
content:
"Your online language learning live lessons are here! Join Rosetta Stone language coaches, chat with other learners and more. Did we mention that it's free for everyone?"
}
],
link: [
{
rel: 'canonical',
href: 'https://www.rosettastone.com/live-lectures'
}
],
script: [
{
src:
'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js'
},
{
src: process.env.DTM_SCRIPT,
body: true
},
{
src: `/nuxt-assets/js/vendor/jquery/jquery.min.js`,
body: true
}
]
};
},
computed: {
// Our Live Lessons, grouped by date
groupedLiveSessions: {
get() {
let dateFormat = 'dddd, MMMM Do';
//this.liveSessions = this.$apolloData.data.liveSessions;
// Get dates for next 7 days in the date format above,
// creating an array: [ {date: 'Thursday, May 17th', lessons: []}, ...]
var weekSchedule = [...Array(7)].map((e, i) => {
return {
lessons: [],
date: moment()
.add(i++, 'days')
.format(dateFormat)
};
});
for (let lesson of this.liveSessions) {
let date = moment(lesson.startTime).format(dateFormat);
let [obj] = weekSchedule.filter(e => e.date == date);
if (obj) {
lesson.startTime = moment(lesson.startTime).format('hh:mm A');
obj.lessons.push(lesson);
}
}
// Filter out days that have no lessons
return weekSchedule.filter(e => e.lessons.length);
},
set(v) {
this.liveSessions = [];
}
}
},
async mounted() {
// Fetch schedule from graphql
this.$apollo.queries.liveSessions.skip = false;
// Today's date, formatted nicely
this.firstCalendarDay = moment().format('MMMM Do');
// The date 7 days from now, formatted nicely
this.lastCalendarDay = moment()
.add(7, 'days')
.format('MMMM Do');
// If overlay is clicked, close signup dialog and overlay.
// `OVERLAY_CLICKED` is Emmitted by Overlay component.
this.$bus.$on('OVERLAY_CLICKED', () => this.closeOvelay());
},
data() {
return {
isDialogOpen: false,
email: '',
// null for fetchnig, [] for no results
liveSessions: null,
lastCalendarDay: '',
firstCalendarDay: '',
formError: '',
formStatus: 'normal'
};
},
methods: {
// Close overlay and any dialog modals open with it
closeOvelay() {
this.isDialogOpen = false;
this.$store.commit('OVERLAY_TOGGLE', false);
},
scrollTo(fn = 'scrollIntoView', element) {
let el = document.querySelector(element);
if (fn == 'scrollIntoView') {
el.scrollIntoView({
behavior: 'smooth'
});
}
if (fn == 'scrollBy') {
window.scrollBy({
top: el.offsetTop - 130,
left: 0,
behavior: 'smooth'
});
}
},
/*
* Handles lecture submit button click
*/
onSignupClick() {
this.$store.commit('OVERLAY_TOGGLE', true);
this.isDialogOpen = true;
},
async onSubmit() {
// Basic regex check
if (!validateEmail(this.email)) {
this.formError = 'Email is invalid.';
return;
}
// Briteverify check
if (!(await briteVerify(this.email))) {
this.formError = 'E-mail is invalid.';
}
// Send email to EC
var gdpr_consent_given = window.gdpr && window.gdpr.email_consent;
if (gdpr_consent_given) {
if (this.sendEmailToEC()) {
this.formStatus = 'success';
}
} else {
//this.formSuccess = false;
}
this.formError = '';
},
async sendEmailToEC() {
let data = {
email: this.email,
cis_name: 'LIVE_LECTURES',
website: 'US_WEBSITE',
demo_type: 'live_lecture_signup',
form_url: 'live-lectures',
demo_lang: this.$store.state.langId,
consent_type: (window.gdpr && window.gdpr.email_consent) || 'unknown',
visit_country_code:
(window.gdpr && window.gdpr.country_code) || 'unknown',
newsletter_type: 'live_lecture_feature_page'
};
let url =
process.env.EC_URL +
Object.keys(data)
.map(o => `${o}=${data[o]}`)
.join('&');
let [req] = await this.$axios.$post(url);
if (req.cisFlag == 'true') {
return true;
} else {
return false;
}
}
},
created() {
this.$store.commit('UPDATE_LANG_ID', 'esp');
}
};
</script>
<style>
html {
scroll-behavior: smooth;
}
</style>
<style lang="stylus" scoped>
$mobile-breakpoint = '(max-width: 960px);';
.signup-dialog {
position: fixed;
max-width: 690px;
z-index: 15;
display: flex;
align-items: center;
justify-content: center;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
color: #fff;
width: 100%;
button.close {
padding: 0;
position: absolute;
border: none;
top: 10px;
right: 35px;
background: none;
font-size: 56px;
color: #262626;
}
& > div {
padding: 3em 7em;
background: linear-gradient(225.26deg, #F0C433 0%, #D67F30 100%);
margin: 0 15px;
width: 100%;
}
form {
display: flex;
justify-content: space-between;
}
b {
font-size: 56px;
font-family: helvetica;
}
p {
font-size: 24px;
max-width: 360px;
}
input[type=email] {
font-size: 24px;
color: #606060;
letter-spacing: 0.34px;
border: none;
border-radius: 8px;
padding: 0 15px;
margin: 0 15px 0 0;
width: 287px;
box-sizing: border-box;
height: 67px;
line-height: 67px;
}
input[type=submit] {
background: #262626;
color: #fff;
padding: 0 25px;
border: none;
box-sizing: border-box;
height: 67px;
line-height: 67px;
border-radius: 8px;
position: relative;
top: -2px;
}
.form-error {
background: #c17878;
padding: 5px;
margin-top: 10px;
}
@media $phone {
& > div {
padding: 2em 1em;
}
b {
font-size: 45px;
}
button.close {
top: -10px;
right: 16px;
}
form {
flex-direction: column;
}
input {
display: block;
&[type=email] {
width: 100%;
}
&[type=submit] {
margin: 15px auto 0;
}
}
}
}
main {
font-family: effra;
background: #FBFBFB;
}
section {
display: flex;
flex-direction: column;
padding: 0 1em;
}
.container {
max-width: 1100px;
margin: 0 auto;
// border: 1px dotted #000;
width: 100%;
display: flex;
flex-direction: column;
@media $mobile-breakpoint {
padding: 0 15px;
box-sizing: border-box;
}
}
.hero {
background: url('/nuxt-assets/img/live-lectures/desktop-background.png') bottom no-repeat;
background-size: cover;
color: #fff;
min-height: 281px;
font-family: helvetica;
text-align: center;
h2 {
font-size: 72px;
margin: 40px 0 10px;
br {
display: none;
}
}
h3 {
font-size: 40px;
margin: 0;
color: #BFEBFF;
}
.hero-cta {
display: inline-block;
padding: 15px 35px;
color: #F0C433;
border: 3px solid #F0C433;
border-radius: 8px;
align-self: center;
margin-top: 3em;
letter-spacing: 4px;
cursor: pointer;
}
@media (max-width: 1155px) {
& {
h2 {
font-size: 52px;
}
h3 {
font-size: 32px;
}
}
}
@media $mobile-breakpoint {
& {
background-size: cover;
}
@media (max-width: 500px) {
background: url('/nuxt-assets/img/live-lectures/mobile-background.png') #fff bottom center;
background-size: 100% 119%;
}
h2 {
font-size: 41px;
margin-top: 20px;
br {
display: block;
}
}
h3 {
font-size: 24px;
}
}
}
section.calendar {
.container {
position: relative;
}
.heading {
font-size: 36px;
margin: 1em 0;
text-align: center;
br {
display: none;
}
}
.language-selection {
display: flex;
align-items: center;
justify-content: center;
}
.language-name {
font-size: 36px;
margin-right: 1em;
}
.select-wrap {
width: 100%;
max-width: 400px;
}
.schedule {
display: flex;
flex-direction: column;
.lesson {
display: flex;
flex-direction: column;
width: 100%;
font-size: 24px;
color: #262626;
.day {
font-size: 32px;
margin: 1.3em 0;
font-weight: 700;
font-family: helvetica;
}
section {
display: flex;
flex-direction: row;
padding: 25px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
justify-content: space-between;
align-items: baseline;
margin: 0.5em 0;
& > div {
// outline: 1px dotted red;
flex-basis: 22%;
}
.time {
font-weight: 700;
span {
color: #666;
}
}
button {
background: transparent;
color: #262626;
border: 3px solid #262626;
border-radius: 8px;
padding: 20px 55px;
font-weight: 700;
letter-spacing: 1.2px;
font-size: 16px;
transition: background 0.15s;
&:hover {
background: #262626;
color: $yellow;
}
}
}
}
}
@media $mobile-breakpoint {
.heading {
font-size: 25px;
br {
display: block;
}
}
.schedule {
.day {
font-size: 29px;
text-align: center;
}
.lesson {
section {
flex-direction: column;
& > div {
margin: 10px 0;
&:first-of-type {
margin-top: 0;
}
}
button {
margin-top: 10px;
width: 100%;
}
}
}
}
}
.apollo.no-results, .apollo.error {
text-align: center;
font-size: 1.5em;
margin: 2em 0;
color: #262626;
}
}
.middle {
margin-top: 3em;
background: url('/nuxt-assets/img/live-lectures/yellow-bg.svg') top center no-repeat;
background-size: cover;
article {
display: flex;
flex-direction: row;
margin-bottom: 4em;
padding: 0 15px;
&:last-of-type {
margin-bottom: 2em;
}
.text {
width: 50%;
order: 0;
margin: 0 75px 0 0;
}
h5 {
display: inline-block;
background: #262626;
border-bottom: 10px solid #F0C433;
padding: 24px;
color: #fff;
font-size: 32px;
margin-bottom: 20px;
max-width: 400px;
}
p {
line-height: 40px;
font-size: 24px;
color: #262626;
margin: 0;
max-width: 539px;
padding: 0;
}
.image {
order: 1;
}
&:last-of-type {
margin-bottom: 0;
}
}
article:nth-of-type(even) {
.text {
order: 1;
margin: 0 0 0 75px;
}
.image {
order: 0;
}
}
@media $mobile-breakpoint {
& {
margin-top: -2px;
background-size: contain;
}
article {
flex-direction: column;
margin-bottom: 0;
padding: 0;
&:nth-of-type(even) {
.text {
margin: 0;
}
}
.text {
order: 0;
margin: 0;
width: 100%;
}
h5 {
width: 100%;
box-sizing: border-box;
font-size: 28px;
}
.image {
order: 1 !important;
margin-top: 15px;
img {
width: 100%;
}
}
}
}
}
button.bottom-cta {
background: #262626;
color: #F0C433;
font-size: 15px;
font-weight: bold;
letter-spacing: 4px;
margin: 2em auto;
display: inline-block;
padding: 20px 45px;
border: none;
border-radius: 8px;
@media $phone {
letter-spacing: 2px;
line-height: 22px;
}
}
.legal {
background: #262626;
color: #eee;
padding: 2em 1em;
line-height: 24px;
}
section.wrapper {
padding: 40px 0;
}
section.wrapper.dark {
background: #313134;
}
div.spinner {
-moz-animation: rotate 10s infinite linear;
-webkit-animation: rotate 10s infinite linear;
animation: rotate 10s infinite linear;
position: relative;
display: block;
margin: auto;
width: 142px;
height: 142px;
}
div.spinner i {
-moz-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
-webkit-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03);
-moz-transform-origin: 50% 100% 0;
-webkit-transform-origin: 50% 100% 0;
transform-origin: 50% 100% 0;
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
border: solid 6px transparent;
border-bottom: none;
}
div.spinner i:nth-child(1) {
-moz-animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
-webkit-animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03);
width: 44px;
height: 22px;
margin-top: -22px;
margin-left: -22px;
border-color: #2172b8;
border-top-left-radius: 36px;
border-top-right-radius: 36px;
}
div.spinner i:nth-child(2) {
-moz-animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
-webkit-animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03);
width: 58px;
height: 29px;
margin-top: -29px;
margin-left: -29px;
border-color: lighten($blue, 15%);
border-top-left-radius: 42px;
border-top-right-radius: 42px;
}
div.spinner i:nth-child(3) {
-moz-animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
-webkit-animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03);
width: 72px;
height: 36px;
margin-top: -36px;
margin-left: -36px;
border-color: lighten($blue, 40%);
border-top-left-radius: 48px;
border-top-right-radius: 48px;
}
div.spinner i:nth-child(4) {
-moz-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
-webkit-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03);
width: 86px;
height: 43px;
margin-top: -43px;
margin-left: -43px;
border-color: lighten($yellow, 15%);
border-top-left-radius: 54px;
border-top-right-radius: 54px;
}
div.spinner i:nth-child(5) {
-moz-animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
-webkit-animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03);
width: 100px;
height: 50px;
margin-top: -50px;
margin-left: -50px;
border-color: lighten($yellow, 30%);
border-top-left-radius: 60px;
border-top-right-radius: 60px;
}
div.spinner i:nth-child(6) {
-moz-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
-webkit-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03);
width: 114px;
height: 57px;
margin-top: -57px;
margin-left: -57px;
border-color: lighten($yellow, 45%);
border-top-left-radius: 66px;
border-top-right-radius: 66px;
}
div.spinner i:nth-child(7) {
-moz-animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
-webkit-animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03);
width: 128px;
height: 64px;
margin-top: -64px;
margin-left: -64px;
border-color: lighten($yellow, 60%);
border-top-left-radius: 72px;
border-top-right-radius: 72px;
}
div.spinner i:nth-child(8) {
-moz-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
-webkit-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03);
width: 142px;
height: 71px;
margin-top: -71px;
margin-left: -71px;
border-color: #5d3191;
border-top-left-radius: 78px;
border-top-right-radius: 78px;
}
@keyframes rotate {
to {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>