- 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
- 1048
- 1049
- 1050
- 1051
- 1052
- 1053
- 1054
- 1055
- 1056
- 1057
- 1058
- 1059
- 1060
- 1061
- 1062
- 1063
- 1064
- 1065
- 1066
- 1067
- 1068
- 1069
- 1070
- 1071
- 1072
- 1073
- 1074
- 1075
- 1076
- 1077
- 1078
- 1079
- 1080
- 1081
- 1082
- 1083
- 1084
- 1085
- 1086
- 1087
- 1088
- 1089
- 1090
- 1091
- 1092
- 1093
- 1094
- 1095
- 1096
- 1097
- 1098
- 1099
- 1100
- 1101
- 1102
- 1103
- 1104
- 1105
- 1106
- 1107
- 1108
- 1109
- 1110
- 1111
- 1112
- 1113
- 1114
- 1115
- 1116
- 1117
- 1118
- 1119
- 1120
- 1121
- 1122
- 1123
- 1124
- 1125
- 1126
- 1127
- 1128
- 1129
- 1130
- 1131
- 1132
- 1133
- 1134
- 1135
- 1136
- 1137
- 1138
- 1139
- 1140
- 1141
- 1142
- 1143
- 1144
- 1145
- 1146
- 1147
- 1148
- 1149
- 1150
- 1151
- 1152
- 1153
- 1154
- 1155
- 1156
- 1157
- 1158
- 1159
- 1160
- 1161
- 1162
- 1163
- 1164
- 1165
- 1166
- 1167
- 1168
- 1169
- 1170
- 1171
- 1172
- 1173
- 1174
- 1175
- 1176
- 1177
- 1178
- 1179
- 1180
- 1181
- 1182
- 1183
- 1184
- 1185
- 1186
- 1187
- 1188
- 1189
- 1190
- 1191
- 1192
- 1193
- 1194
- 1195
- 1196
- 1197
- 1198
- 1199
@themebase: <%= content_themebasecolor %>;
@link-color: #FF0000;
/*@copysectionblue: hsla(220, 50%, 50%, .75);*/
@copysectionblue: rgb(0, 128, 205);
@rsyellow: #ecc200;
@phone: ~"only screen and (max-width: 479px)";
//@ipad: ~"only screen and (min-width: 768px) and (max-width: 959px)";
//
@ipad: ~"only screen and (max-width: 768px)";
// at 1411px, row of little videos break, and one video pops down.
// so we must push 2 videos down, and lower main video laptop
@1411: ~"only screen and (max-width: 1278px)";
// anything smaller than this, show as tablet mode (til mobile mode)
@tablet: ~"only screen and (max-width: 1200px)";
.mixin {
background-color: lighten(spin(@themebase, 0), 95%);
}
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body{
overflow-x: hidden;
font-family: sans-serif; /* fallback default */
}
/*stop horizontal overflow on ipad*/
// body .page-wrap {
// overflow-x:hidden;
// }
//
//
#tint {
background: rgba(255, 255, 255, 0.99);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
display: none;
& > a.close {
width: 45px;
height: 45px;
display: inline-block;
top: 20px;
right: 20px;
position: fixed;
}
& > div {
padding: 15px;
text-align: center;
line-height: 24px;
z-index: 15;
width: 70%;
background: #fff;
margin: 7vh auto;
display: none;
}
}
#tint h3 {
font-size: 2em;
padding-bottom: 1em;
color: #0798DB;
}
/* This prevents any weird borders when images are in link tags */
img{border:none;}
.content {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
#masthead {
height: 350px;
background: url(../../assets/catalyst/masthead.jpg) no-repeat;
background-size: cover;
position: relative;
width: 100%;
.whitestripe {
background: rgba(255, 255, 255, 0.7);
//background: aliceblue;
width: 50%;
height: 350px;
text-align: center;
vertical-align: middle;
display: table-cell;
.transform(skewX(-8deg));
left: -50px;
position: relative;
img {
.transform(skewX(9deg));
margin: 0 auto;
width: 70%;
display: inline-block;
}
}
@media @tablet {
& .whitestripe {
width: 100%;
left: 0px;
}
}
@media @tablet @portrait {
background-position: -80px 0
}
@media @phone {
background: url(../../assets/catalyst/masthead-mobile.jpg) no-repeat;
background-size: cover;
height: 318px;
margin-top: 61px; // since nav is sticky
.whitestripe {
width: 100%;
left: -64px;
height: 317px;
vertical-align: top;
img {
padding-top: 20px;
}
}
}
}
.videos-wrapper {
div.left, div.main-video {
display: inline-block;
vertical-align: top;
//@media only screen and (max-width : 768px) { display: block; }
}
div.left {
width: 42%;
@media @tablet {
width: 100%;
// remove bttom two lines if video section gets wonky
margin-bottom: -400px;
margin-top: 273px;
text-align: center;
}
a { text-decoration: none }
div.text {
width: 100%;
font-family: GothamThin,sans-serif;
margin-bottom: 20px;
padding: 20px 0;
h3 {
font-size: 1.65em;
line-height: 32px;
font-weight: bold;
}
p {
font-size: 1.2em;
padding-top: 10px;
line-height: 28px;
font-weight: 100;
}
}
div.videos {
text-align: left;
z-index: 12;
@media @tablet { text-align: center }
& > a {
display: inline-block;
vertical-align: top;
width: 100px;
margin-right: 17px;
margin-bottom: 17px;
font-size: 12px;
img, span { display: block }
img {
width: 100%;
padding-bottom: 5px;
}
&:last-of-type {
margin-right: 0;
}
@media @1411 {
height: 75px;
width: 100px;
margin-bottom: 15px;
}
@media @tablet {
width: 115px;
height: 70px;
font-size: 1em;
background-size: 100% 100%;
float: none;
}
@media @phone {
width: 29%;
margin-bottom: 30px;
margin-right: 17px;
&:nth-of-type(3) {
margin-right: 0;
}
}
span {
display: block;
color: #0798DB;
text-align: center;
@media @tablet { line-height: 20px }
}
}
@media @phone {
position: relative;
bottom: -221px;
}
}
@media @phone {
width: 100%;
margin: 0;
position: relative;
top: -217px;
div.text {
text-align: left;
padding: 0;
color: #444;
h3 {
font-size: 1.4em;
width: 270px;
line-height: 27px;
padding-top: 10px;
//font-family: GothamThin;
font-family: GothamBook;
font-weight: normal;
span {
display: block;
width: 10px;
}
}
p {
font-size: 1.1em;
width: 237px;
line-height: 23px;
padding-top: 5px;
font-family: GothamBook;
}
}
}
}
div.main-video {
width: 55%;
height: 330px;
background: url(../../assets/catalyst/laptop-video.png) no-repeat center;
background-size: contain;
//margin-left: 20px;
position: relative;
top: -80px;
@media @1411 {
width: 55%;
top: -1em;
}
@media @tablet {
top: 0;
width: 100%;
margin: -175px auto 281px; // remove if video sections get wonky
}
@media @phone {
margin: -485px 0 0 0;
}
a {
display: block;
width: 80%;
height: 85%;
margin: 6px 0 0 56px;
}
}
}
div#tab-icons {
background-color: #0798DB;
text-align: center;
position: relative;
overflow: hidden;
a.icons-next, a.icons-previous {
display: none;
}
@media @phone {
display: block;
& a.icons-next, & > a.icons-previous {
position: absolute;
width: 60px;
height: 100%;
background: url(../../assets/catalyst/left-arrow.png) no-repeat center ;
left: 0;
top: 0;
z-index: 4;
display: table-cell;
}
& a.icons-next {
left: auto;
.transform(rotateY(160deg));
}
& > .slider-dots {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
text-align: center;
z-index: 1;
a {
display: inline-block;
margin-right: 12px;
// background-image: url(../../assets/catalyst/slider-neutral.png);
// background-repeat: no-repeat;
// background-position: center center;
// background-size: 64%;
border: 1px solid transparent;
border-radius: 15px;
vertical-align: middle;
span {
width: 12px;
height: 12px;
display: block;
border-radius: 15px;
background-color: #fff;
transition: background-color 0.3s
}
&.current-slide {
//width: 32px;
//background-image: url(../../assets/catalyst/slider-current.png);
border: 1px solid #fff;
span {
background-color: #fff;
margin: 3px;
}
}
}
}
}
div.icons-wrap {
overflow: hidden;
& > a {
// the toggle icons
display: inline-block;
padding: 10px 25px;
text-decoration: none;
color: #fff;
font-size: 13px;
position: relative;
transition: background-color 0.180s;
img, span {
display: block;
}
img {
margin: 0 auto;
height: 28px;
margin-bottom: 6px;
}
&:after {
display: none;
content: '';
position: absolute;
bottom: -11px;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 11px 10px 0 10px;
border-color: #24B9FB transparent transparent transparent;
}
&.active-icon {
background-color: #24B9FB;
&:after {
display: block;
}
}
&:hover {
background-color: #24B9FB;
}
}
@media @tablet {
& > a {
padding: 10px 10px;
}
}
@media @tablet @portrait {
& > a {
padding: 10px 4px;
}
}
@media @phone {
display: block;
width: 5000px;
// the toggle icons
a {
display: table-cell;
height: 100%;
vertical-align: middle;
//float: left;
height: 97px;
width: 391px;
padding: 0px 0 22px 0px;
font-size: 1.2em;
&.active-icon {
background: #0897DB;
}
&.active-icon:after {
display: none;
}
img {
height: 45px;
}
}
}
} // icons wrap
}
div#tab-contents {
margin-top: 30px;
min-height: 300px;
.content {
position: relative;
display: table;
line-height: 24px;
& > div > div {
display: table-cell;
width: 33%;
position: relative;;
padding: 0 25px 15px 25px;
box-sizing: border-box;
vertical-align: top;
background-repeat: no-repeat;
background-position: center;
border-right: 1px solid #24B9FB;
&:nth-of-type(1) {background-image: url(../../assets/catalyst/bg-beginner.png)}
&:nth-of-type(2) {background-image: url(../../assets/catalyst/bg-intermediate.png)}
&:nth-of-type(3) {background-image: url(../../assets/catalyst/bg-advanced.png); border: none}
@media @phone {
display: block;
width: 100%;
padding: 0;
margin-bottom: 40px;
border: 0;
}
h2 {
color: #0798DB;
font-size: 1.3em;
@media @phone {
font-size: 1.6em;
padding-bottom: 10px;
}
}
ul {
margin-top: 20px;
li {
padding-left: 15px;
margin-bottom: 20px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Njc0NjlFMjdCNjQ2MTFFMUE1RDk5RkUxMzI4NjcxMkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Njc0NjlFMjhCNjQ2MTFFMUE1RDk5RkUxMzI4NjcxMkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NzQ2OUUyNUI2NDYxMUUxQTVEOTlGRTEzMjg2NzEyRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2NzQ2OUUyNkI2NDYxMUUxQTVEOTlGRTEzMjg2NzEyRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pon1BP8AAABJSURBVHjaYvz//z8DLsACYwgnrk8AUvFAvPDt/MAFIDFGkE6ghAGQfR5JkyFQwQUmBjwALAlSBaQSgfgAiIbyIcbi1YkLAAQYACVtGeHV0XUCAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: 0 7px;
&:last-of-type { margin-bottom: 0;}
}
}
}
& > div:not(.visible) {
display: none
}
}
}
/********************************************************************************
Awards
********************************************************************************/
.awards {
overflow: hidden;
display: block;
padding-bottom: 3rem;
text-align: center;
.head {
font-family: GothamThin, sans-serif;
font-size: 3em;
margin: auto;
margin-top: 5rem;
margin-bottom: 1rem;
text-align: center;
}
.subhead {
font-family: GothamBook, sans-serif;
max-width: 29.5em;
margin: auto;
text-align: center;
line-height: 1.2;
}
.subhead.two {
max-width: 35em;
}
& > .awards-images {
margin: 30px auto 0;
img {
width: 30%;
display: inline-block;
@media @tablet {
display: block;
width: auto;
margin: 40px auto;
}
}
}
.stats {
flex: 2;
display: block;
vertical-align: top;
width: 100%;
margin-top: 3em;
margin-bottom: 3em;
.year {
color: #363636;
text-align: center;
._h {
font-family: "GothamBold";
font-weight: 100;
font-size: 3em;
position: relative;
span {
display: inline-block;
background: #D5D5D5;
width: 20%;
height: 1px;
margin: 0 20px;
vertical-align: middle;
}
}
._h2 {
margin-top: .2em;
font-family: "GothamLight";
font-size: 1.3em;
margin-top: 15px
}
}
.numbers {
margin-top: 40px;
.numberdetail {
display: inline-block;
width: 25%;
min-height: 12pt;
text-align: center;
vertical-align: top;
position: relative;
&::before {
content: "";
display: inline-block;
postition: absolute;
width: 4em;
height: 4em;
top: -4.1em;
background-size: contain;
background-repeat: no-repeat;
}
&:nth-child(1)::before {
background-image: url(../../assets/catalyst/icon-briefcase.png);
}
&:nth-child(2)::before {
background-image: url(../../assets/catalyst/icon-heart.png);
}
&:nth-child(3)::before {
background-image: url(../../assets/catalyst/icon-book.png);
}
&:nth-child(4)::before {
background-image: url(../../assets/catalyst/icon-globe.png);
}
&:after {
content: '';
position: absolute;
width: 1px;
background: #D5D5D5;
height: 40%;
top: 20px;
display: block;
}
._h {
font-family: "GothamBold";
font-size: 2em;
}
._h2 {
font-family: "GothamLight";
font-size: 1em;
max-width: 11em;
margin: .2em auto;
}
} /* /.numberdetail */
} /* /.numbers */
} /* /.stats */
@media @phone {
.subhead, .subhead.two {
font-size: 1.1em;
max-width: 80%;
}
& > .awards-images {
margin: 0 auto;
img {
width: 87%;
}
}
.stats {
.year {
._h {
font-size: 2.3em;
span:first-of-type {
margin: 0 10px 0 0;
}
span:last-of-type {
margin: 0 0 0 10px;
}
}
._h2 {
width: 270px;
margin: 0 auto;
margin-top: 10px;
}
}
.numbers {
overflow: auto;
.numberdetail {
display: block;
float: left;
width: 45%;
border: none;
height: 190px;
padding-top: 20px;
&:nth-child(1), &:nth-child(3) {
border-right: 1px solid #d5d5d5;
border-bottom: 1px solid #d5d5d5;
margin-left: 10px;
box-sizing: border-box;
}
&:nth-child(2), &:nth-child(4) {
border-bottom: 1px solid #d5d5d5;
margin-right: 10px;
box-sizing: border-box;
}
&:nth-child(3), &:nth-child(4) {
border-bottom: none;
}
&:nth-child(4) {
padding-left: 10px;
}
&:after {
background: none;
}
p {
padding-top: 5px;
font-size: 0.8em;
}
}
}
}
}
} /* /.awards */
/********************************************************************************
Layout Mixins
********************************************************************************/
/* Mixin */
.transform (@t) {
transform: @t;
-webkit-transform: @t;
-moz-transform: @t;
-o-transform: @t;
-ms-transform: @t;
}
.butterytext () {
font-smooth: always;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
}
/********************************************************************************
Theme Mixins
********************************************************************************/
.footer {
display: block;
background-color: #edeadf;
padding-top: 2rem;
.mobile-footer {
display: none;
}
.eandemenu {
display: flex;
flex-flow: row wrap;
justify-content: center;
font-family: GothamMedium, sans-serif;
li {
margin: 0 2em;
a {
text-decoration: none;
color: black;
}
}
}
.corpmenu {
display: flex;
flex-flow: row wrap;
justify-content: center;
font-family: GothamLight, sans-serif;
font-size: .8em;
margin-top: 1rem;
li {
margin: 0 2em;
color: black;
a {
text-decoration: none;
color: black;
}
}
}
.bottomforms {
display: flex;
justify-content: center;
padding: 2rem;
li {
min-width: 19em;
form {
display: flex;
flex-flow: row wrap;
max-width: 18em;
label {
font-family: GothamMedium, sans-serif;
font-size: .85em;
text-transform: uppercase;
flex-basis: 100%;
margin-bottom: 12px;
}
input {
&[type="text"] {
padding: .2em;
flex: 3;
flex-basis: 0;
}
&[type="submit"] {
padding: .75em;
text-transform: uppercase;
font-family: GothamBold, sans-serif;
font-size: .75em;
background-color: #0098db;
color: white;
flex: 1;
flex-basis: 0;
letter-spacing: .05em;
.butterytext();
}
}
} /* /form */
}
li:nth-child(2) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-left: 5rem;
text-align: center;
justify-content: center;
label {
flex: 1 0 100%;
font-family: GothamMedium, sans-serif;
font-size: .85em;
text-transform: uppercase;
flex-basis: 100%;
margin-bottom: .25em;
}
a {
display: inline-block;
width: 1.5em;
height: 1.5em;
margin: 0 .5em;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
&:nth-child(2) {
background-image: url(../../../assets/eande_facebook.svg);
}
&:nth-child(3) {
background-image: url(../../../assets/eande_twitter.png);
}
&:nth-child(4) {
background-image: url(../../../assets/eande_facebook.png);
}
}
}
} /* /.bottomforms */
.bottomstripemenu {
padding: 1em;
background-color: darken(#4195d3, 5%);
text-align: right;
& > div, & > span { display: inline-block; }
.copyright {
float: left;
color: white;
font-family: GothamLight, sans-serif;
&:before {
content: '';
display: inline-block;
transform: translateY(0em);
width: 3em;
height: 1.5em;
background-image: url(http://www.rosettastone.com/lp/navbar/RS_LOGO_BLACK.svg);
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin-right: .5em;
margin-left: 5rem;
cursor: pointer;
}
}
a {
font-family: GothamLight, sans-serif;
color: white;
text-decoration: none;
margin: 0 1em;
}
} /* /.bottomstripemenu */
@media @tablet {
.eandemenu li,
.corpmenu li {
margin: 0 1em;
}
.bottomstripemenu {
span.copyright {
display: block;
width: 100%;
text-align: center;
margin-bottom: 10px;
&:before {
margin: 0 10px 0 0;
width: 50px;
}
}
& > div {
display: block;
text-align: center;
}
}
} //footer tablet
@media @phone {
.eandemenu, .corpmenu, .bottomforms, .bottomstripemenu { display: none}
background-color: #313234;
padding: 20px 0;
.mobile-footer {
display: block;
ul {
display: inline-block;
width: 35%;
padding: 0 0 0 30px;
vertical-align: top;
li {
margin-bottom: 6px;
color: #8c8f96;
font-weight: 700;
&:last-of-type { margin: 0 }
a {
color: #0098db;
text-decoration: none;
font-size: 0.8em;
}
}
}
.socialmedia-icons {
padding: 0 0 20px 30px;
border-bottom: 2px solid #8c8f96;
margin-bottom: 20px;
a {
font-size: 35px;
margin-right: 15px;
color: #8c8f96;
text-decoration: none;
img {
width: 30px;
}
}
}
}
} // footer phone
}/* /.footer */
.fixednav {
justify-content: flex-end;
background-color: hsla(180,50%,10%,.85);
padding: 1em 0;
color: white;
font-family: GothamBook, sans-serif;
text-transform: uppercase;
position: fixed;
top: 0;
width: 100%;
z-index: 98;
display: none;
transition-property: background-color;
transition-duration: 0s;
transition-timing-function: ease-out;
@media screen and (max-width: 1600px) {
font-size: .75em;
}
@media screen and (max-width: 1050px) {
font-size: .55em;
}
&:hover {
background-color: hsla(180,50%,10%,.95);
}
&.supportsfixed {
display: flex;
}
.butterytext();
& > .menu,.consult.call,.pricing,.support {
margin-left: 2em;
margin-right:2em;
margin-top: auto;
margin-bottom: auto;
}
& > .menu {
flex: 1;
position: relative;
text-align: center;
display: flex;
label:after {
position: relative;
content: ">";
margin: auto 0 auto .25em;
display: inline-block;
transform: rotate(90deg) translateX(-.05em);
font-family: GothamThin;
}
label {
flex: 1;
}
&:hover ul {
display: block;
opacity: 1;
transform: translateY(0%);
}
&.clicked ul {
display: block;
opacity: 1;
transform: translateY(0%);
}
ul:hover {
display: block;
opacity: 1;
transform: translateY(0%);
}
ul {
display: none;
opacity: 0;
transform: translateY(-20%);
transition-property: opacity, transform;
transition-duration: 333ms;
padding: 15px 4px 4px 4px;
line-height: 1.25;
background-color: hsla(180,50%,10%,.95);;
position: absolute;
top: 2em;
left: 0;
width: auto;
min-width: 21em;
margin-top: -1em;
li {
background-color: hsla(0,0%,95%,0);
width: auto;
margin: 1px 0;
a {
display: block;
padding: 10px;
.butterytext();
}
&:hover {
background-color: #2f89cb;
}
}
.hd {
text-align: left;
font-size: larger;
font-family: GothamBold;
}
.sub {
padding-left: 1em;
text-align: left;
}
a {
color: white;
text-decoration: none;
}
}
}
.support {
color: white;
text-decoration: none;
flex: 1;
}
.consult {
margin: auto 0;
span {
font-family: GothamMedium;
font-size: 1.2em;
}
}
.call {
margin: auto 0;
a {
color: whitesmoke;
transform: translateY(-1px);
display: inline-block;
}
span {
font-family: GothamMedium;
font-size: 1.2em;
}
&::before {
content: "|";
margin-left: .25em;
margin-right: .25em;
display: inline-block;
color: #EBC21D;
}
}
.pricing {
color: black;
display: inline-block;
padding: .5em 2.5em;
border-radius: 3px;
background-color: #EBC21D;
margin: 0 1em 0 1em;
cursor: pointer;
}
} /* /.fixednav */
.__eande_langselectoverlay {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
background-color: rgba(0,0,0,.7);
box-sizing: border-box;
max-height: 100vh;
height: 100vh;
min-width: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding: 5rem 0 5rem 0;
cursor: pointer;
.head {
display: block;
text-align: center;
color: white;
font-family: GothamLight;
font-size: 2em;
}
.demolangs {
color: white;
display: block;
margin-top: 3rem;
li {
font-family: GothamMedium, sans-serif;
font-size: 2.3em;
display: block;
width: 50%;
margin: .75em auto;
text-align: center;
padding: .35em;
outline: 1px solid hsla(0,0%,80%,1);
background: hsla(0,0%,80%,.1);
&:hover {
background: hsla(0,0%,80%,0);
}
}
}
}