- 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
- 1200
- 1201
- 1202
- 1203
- 1204
- 1205
- 1206
- 1207
- 1208
- 1209
- 1210
- 1211
- 1212
- 1213
- 1214
- 1215
- 1216
- 1217
- 1218
- 1219
- 1220
- 1221
- 1222
- 1223
- 1224
- 1225
- 1226
- 1227
- 1228
- 1229
- 1230
- 1231
- 1232
- 1233
- 1234
- 1235
- 1236
- 1237
- 1238
- 1239
- 1240
- 1241
- 1242
- 1243
- 1244
- 1245
- 1246
- 1247
- 1248
- 1249
- 1250
- 1251
- 1252
- 1253
- 1254
- 1255
- 1256
- 1257
- 1258
- 1259
- 1260
- 1261
- 1262
- 1263
- 1264
- 1265
- 1266
- 1267
- 1268
- 1269
- 1270
- 1271
- 1272
- 1273
- 1274
- 1275
- 1276
- 1277
- 1278
- 1279
- 1280
- 1281
- 1282
- 1283
- 1284
- 1285
- 1286
- 1287
- 1288
- 1289
- 1290
- 1291
- 1292
- 1293
- 1294
- 1295
- 1296
- 1297
- 1298
- 1299
- 1300
- 1301
- 1302
- 1303
- 1304
- 1305
- 1306
- 1307
- 1308
- 1309
- 1310
- 1311
- 1312
- 1313
- 1314
- 1315
- 1316
- 1317
- 1318
- 1319
- 1320
- 1321
- 1322
- 1323
- 1324
- 1325
- 1326
- 1327
- 1328
- 1329
- 1330
- 1331
- 1332
- 1333
- 1334
- 1335
- 1336
- 1337
- 1338
- 1339
- 1340
- 1341
- 1342
- 1343
- 1344
- 1345
- 1346
- 1347
- 1348
- 1349
- 1350
- 1351
- 1352
- 1353
- 1354
- 1355
- 1356
- 1357
- 1358
- 1359
- 1360
- 1361
- 1362
- 1363
- 1364
- 1365
- 1366
- 1367
- 1368
- 1369
- 1370
- 1371
- 1372
- 1373
- 1374
- 1375
- 1376
- 1377
- 1378
- 1379
- 1380
- 1381
- 1382
- 1383
- 1384
- 1385
- 1386
- 1387
- 1388
- 1389
- 1390
- 1391
- 1392
- 1393
- 1394
- 1395
- 1396
- 1397
- 1398
- 1399
- 1400
- 1401
- 1402
- 1403
- 1404
- 1405
- 1406
- 1407
- 1408
- 1409
- 1410
- 1411
- 1412
- 1413
- 1414
- 1415
- 1416
- 1417
- 1418
- 1419
- 1420
- 1421
- 1422
- 1423
- 1424
- 1425
- 1426
- 1427
- 1428
- 1429
- 1430
- 1431
- 1432
- 1433
- 1434
- 1435
- 1436
- 1437
- 1438
- 1439
- 1440
- 1441
- 1442
- 1443
- 1444
- 1445
- 1446
- 1447
- 1448
- 1449
- 1450
- 1451
- 1452
- 1453
- 1454
- 1455
- 1456
- 1457
- 1458
- 1459
- 1460
- 1461
- 1462
- 1463
- 1464
- 1465
- 1466
- 1467
- 1468
- 1469
- 1470
- 1471
- 1472
- 1473
- 1474
- 1475
- 1476
- 1477
- 1478
- 1479
- 1480
- 1481
- 1482
- 1483
- 1484
- 1485
- 1486
- 1487
- 1488
- 1489
- 1490
- 1491
- 1492
- 1493
- 1494
- 1495
- 1496
- 1497
- 1498
- 1499
- 1500
- 1501
- 1502
- 1503
- 1504
- 1505
- 1506
- 1507
- 1508
- 1509
- 1510
- 1511
- 1512
- 1513
- 1514
- 1515
- 1516
- 1517
- 1518
- 1519
- 1520
- 1521
- 1522
- 1523
- 1524
- 1525
- 1526
- 1527
- 1528
- 1529
- 1530
- 1531
- 1532
- 1533
- 1534
- 1535
- 1536
- 1537
- 1538
- 1539
- 1540
- 1541
- 1542
- 1543
- 1544
- 1545
- 1546
- 1547
- 1548
- 1549
- 1550
- 1551
- 1552
- 1553
- 1554
- 1555
- 1556
- 1557
- 1558
- 1559
- 1560
- 1561
- 1562
- 1563
- 1564
- 1565
- 1566
- 1567
- 1568
- 1569
- 1570
- 1571
- 1572
- 1573
- 1574
- 1575
- 1576
- 1577
- 1578
- 1579
- 1580
- 1581
- 1582
- 1583
- 1584
- 1585
- 1586
- 1587
- 1588
- 1589
- 1590
- 1591
- 1592
- 1593
- 1594
- 1595
- 1596
- 1597
- 1598
- 1599
- 1600
- 1601
- 1602
- 1603
- 1604
- 1605
- 1606
- 1607
- 1608
- 1609
- 1610
- 1611
- 1612
- 1613
- 1614
- 1615
- 1616
- 1617
- 1618
- 1619
- 1620
- 1621
- 1622
- 1623
- 1624
- 1625
- 1626
- 1627
- 1628
- 1629
- 1630
- 1631
- 1632
- 1633
- 1634
- 1635
- 1636
- 1637
- 1638
- 1639
- 1640
- 1641
- 1642
- 1643
- 1644
- 1645
- 1646
- 1647
- 1648
- 1649
- 1650
- 1651
- 1652
- 1653
- 1654
- 1655
- 1656
- 1657
- 1658
- 1659
- 1660
- 1661
- 1662
- 1663
- 1664
- 1665
- 1666
- 1667
- 1668
- 1669
- 1670
- 1671
- 1672
- 1673
- 1674
- 1675
- 1676
- 1677
- 1678
- 1679
- 1680
- 1681
@import "variables.less";
@themebase: <%= content_themebasecolor %>;
@mobile-side-pad: 15px;
.mixin {
background-color: lighten(spin(@themebase, 0), 95%);
}
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body{
/* this hides the side menu when it's not open */
overflow-x: hidden;
min-width: 768px;
font-family: sans-serif; /* fallback default */
@media @phone {
min-width: initial;
padding-top: 61px; // height of sticky nav
}
}
body .page-wrap {
/*stop horizontal overflow on ipad*/
overflow-x:hidden;
}
/* This prevents any weird borders when images are in link tags */
img{border:none;}
/* superscript for ®s */
sup {
font-size: 0.45em;
position: relative;
top: -1.15em;
}
/********************************************************************************
Section Styles
********************************************************************************/
.pageblock {
display: block;
width: 100%;
margin: 0;
border: none;
position: relative;
}
.pricingbar {
background:#fff;
font-family: "GothamLight", sans-serif;
padding: 0.8em;
font-size: 0.9em;
width: 100%;
top: 0;
left:0;
position: fixed;
color:#282828;
text-align: center;
z-index: 10;
visibility:hidden;
box-shadow:0px 3px 10px rgba(0,0,0,0.2);
opacity:0;
transition: visibility 0s 0.3s, opacity 0.3s;
transform:translateZ(0); /* fixes some weird chrome repaint issues */
&.active {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
p {
font-size: 1.4em;
}
a {
display: inline-block;
font-family: "GothamMedium",sans-serif;
font-size: 0.7em;
padding:1.2em;
width:13em;
background:#0098db;
border-radius: 3px;
color:#fff;
text-decoration: none;
margin-left: 1em;
text-transform: uppercase;
transition:background 0.3s;
text-align: center;
&:hover {
background:#0088cb;
}
}
}
.topblock {
position: relative;
overflow: hidden;
.vidback {
display: block;
position: absolute;
top: 0%;
height: 93%;
width:100%;
overflow: visible;
margin: 0;
padding: 0;
z-index: -1;
.video-still {
position: absolute;
top: 0;
left:0;
width: 100%;
height:100%;
background:url(<%= content_bgvideostill %>) no-repeat left;
background-size: cover;
transition:opacity 0.2s;
}
video {
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
}
}
.masthead-wrap {
position:absolute;
top:0;
left:0;
width:100%;
padding-bottom: 70%;
}
svg.video-mask {
position: absolute;
}
.content {
position: relative;
//z-index: 5;
z-index: 1;
.titlevector {
max-height: 15em;
.herotitle {
margin: 0 auto;
font-family: "GothamThin", sans-serif;
font-weight: 100;
font-size: .55em;
fill: white;
stroke-width: .2px;
stroke: transparent;
position: relative;
}
}
.masthead-content {
max-width: 1500px;
width:90%;
padding-top: 14%;
margin:0 auto;
text-align: center;
>div {
display: inline-block;
vertical-align: top;
width:49%;
}
.masthead-headline {
padding: 3% 1em 0 0;
box-sizing:border-box;
max-width: 38em;
.titlevector {
max-height: 15em;
.herotitle {
margin: 0 auto;
font-family: "GothamThin", sans-serif;
font-weight: 100;
font-size: .55em;
//fill: white;
stroke-width: .2px;
stroke: transparent;
position: relative;
}
}
.black-button {
display: block;
text-transform: uppercase;
font-family: "GothamMedium", sans-serif;
font-size: 1em;
font-weight: 700;
margin-top: 3em;
padding: 1.2em;
width: 17em;
border-radius: 3px;
text-align: center;
text-decoration: none;
color: #fff;
background-color: black;
transition: background .3s;
}
.black-button:hover {
background-color: #333;
}
a.open-demo-btn {
display:block;
margin-left:0;
width:18em;
background:#262626;
padding:1.3em;
color:#fff;
text-decoration:none;
font-family:GothamMedium;
border-radius:4px;
margin:1.5em 0;
transition-property: background;
transition-duration: 0.3s;
&:hover {
background:#202020;
}
}
.ctalink {
font-family: GothamLight, sans-serif;
font-size: .9em;
color: white;
display: inline-block;
margin-right: 2em;
float: left;
padding: 3px 0;
text-decoration: none;
text-transform: uppercase;
border-bottom: 1px solid white;
transition-property: transform color;
transition-duration: .3s;
transition-timing-function: ease-out;
transform: scale(1);
&:hover {
transform: scale(1.2);
color: #EBC21D;
}
}
}
.masthead-prodimg {
padding-bottom:29%;
background-image: url(<%= content_heroimg %>);
background-repeat: no-repeat;
position: relative;
background-size: contain;
cursor: pointer;
&::after {
position: absolute;
content: " ";
width: 120%;
bottom: -40%;
height: 100%;
left: -10%;
z-index: -1;
background: url(../../assets/shadow.png) center no-repeat;
background-size: 100% 100%;
}
&::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: -5%;
left: -3%;
background: url(../../assets/playbtn_blue.svg) center no-repeat;
background-size: 30% 30%;
}
}
.downscroll {
display: block;
position: relative;
padding-top: 1em;
transition-property: all;
transition-duration: 750ms;
opacity: 1;
z-index: 100;
cursor: pointer;
&.out {
opacity: 0;
}
}
}
.herosub {
font-family: "GothamLight", sans-serif;
font-weight: 100;
font-size: 1.1em;
color: #fff;
line-height: 1.4;
max-width:27em;
text-align: left;
}
}
// ******************* TOP BLOCK PHONE ******************
@media @phone {
border: 1px solid red;
box-sizing: border-box;
.vidback {
display: none;
}
.masthead-wrap {
display: none;
}
svg.video-mask {
display: none;
}
.content {
.masthead-content {
width: 100%;
padding: 0;
border: 1px solid red;
text-align: left;
min-height: 350px;
.masthead-headline {
width: 100%;
background: #444;
padding: 10px 0 0 10px;
// this is the svg
.titlevector {
width: 69%;
display: block;
}
.herotitle {}
.herosub {
font-size: 0.8em;
max-width: 19em;
}
> div {
display: block;
border: 1px solid blue;
width: 100%;
}
.black-button {}
.black-button:hover { }
a.open-demo-btn {
padding: 15px 0;
width: 52%;
margin: 15px 0;
}
// request pricing | free consultation under try demo
.ctalink {
font-size: 10px;
text-decoration: none;
display: inline-block;
border: none;
}
}
.masthead-prodimg {
width: 55%;
height: 291px;
position: absolute;
padding: 0;
top: 9%;
right: -58px;
&:before { background: none}
&:after { background: none;}
}
.downscroll {
&.out {}
}
}
}
} // end phone for .topblock
}
.demofigure-wrap {
box-sizing: border-box;
margin:10em auto 1em auto;
width:100%;
min-height: 10vh;
overflow: visible;
display: flex;
flex-flow: row wrap;
justify-content: center;
.lockupfig {
flex: 1 1 auto;
width: 20%;
overflow: visible;
margin: auto;
img {
display: block;
width: 80%;
height: auto;
margin: 0 auto 2em auto;
}
figcaption {
text-align: center;
transform: translateY(-1em);
a {
color: black;
font-family: GothamLight, sans-serif;
&::before {
content: "";
background-image: url(../../assets/eande_sysreqs.png);
background-size: contain;
display: inline-block;
width: 4em;
height: 1em;
margin-right: .5em;
transform: translateY(.2em);
background-repeat: no-repeat;
opacity: .75;
}
}
}
} // lockupfig
.copybox {
margin: auto;
flex: 1 1 auto;
width: 30%;
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
.head {
font-family: GothamThin;
font-size: 3em;
width: 100%;
}
.subhead {
font-family: GothamBook;
font-size: 1em;
max-width: 38em;
display: block;
margin-top: .25em;
line-height: 1.25;
}
ul {
display: block;
flex-basis: 100%;
font-family: GothamBook;
font-size: 1em;
margin-top: 1.25em;
line-height: 2;
li a {
color: #0098db;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
li:before {
content: "\2022";
display: inline-block;
margin-right: .85em;
color: hsl(205,70%,65%);
}
}
}
@media @phone {
margin: 0;
padding: 0 @mobile-side-pad;
padding-bottom: 210px;
.lockupfig {
width: 58%;
position: absolute;
left: -7px;
bottom: -2vw;
margin-bottom: 1em;
figcaption a {
font-size: 3vw;
position: relative;
right: -10px;
}
}
.copybox {
order: 0;
.head {
font-size: 6.4vw;
}
ul {
font-size: 0.9em;
line-height: 1.5;
flex-basis: 58%;
position: absolute;
right: 10px;
//bottom: 72px;
bottom: 12vw;
//font-size: 0.7em;
font-size: 3vw;
li:before {
margin-right: 5px;
}
}
}
}
}
.midblock {
box-sizing: border-box;
width: 100%;
display: block;
min-height: 150vh;
overflow: hidden;
background: linear-gradient(to bottom, rgba(254,254,254,0) 0%, rgba(226,226,226,.85) 100%);
padding-bottom: 3rem;
.casestudies {
position: relative;
z-index: 2;
display: table;
width: 100%;
margin: 2em 0;
border: 1px solid blue;
.c_copy {
display: table-cell;
vertical-align: middle;
margin: auto;
padding: 0 ;
font-family: GothamThin, sans-serif;
border: 1px solid blue;
width: 50%;
.head {
display: block;
font-size: 2.5em;
margin-bottom: .1em;
}
.subhead{
font-size: 1em;
font-family: GothamBook, sans-serif;
font-weight: 100;
line-height: 1.5;
max-width: 600px;
display: block;
}
}
.carousel {
text-align: center;
display: inline-block;
border: 1px solid green;
position: relative;
overflow: hidden;
width: 100%;
max-width: 650px;
img {
width: 30em;
height: auto;
margin: auto;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease-out;
transform: scale(1);
opacity: 1;
box-shadow: 0px 0px 40px -11px rgba(0,0,0,0.75);
&.trans {
transform: scale(.8);
opacity: 0;
}
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 4em;
font-weight: bold;
cursor: pointer;
font-family: GothamThin;
&.left {
left: 0;
// left: 5rem;
// @media screen and (max-width: 1500px) {
// left: 2rem;
// }
// @media screen and (max-width: 1368px) {
// left: 7rem;
// left: calc(50% - 25em);
// }
// @media screen and (max-width: 1160px) {
// left: 2rem;
// }
}
&.right {
//color: whitesmoke;
right: 0;
// right: 5rem;
// @media screen and (max-width: 1500px) {
// right: 2rem;
// }
// @media screen and (max-width: 1368px) {
// right: 7rem;
// right: calc(50% - 25em);
// }
// @media screen and (max-width: 1160px) {
// right: 2rem;
// }
}
}
}
.papers {
background: pink;
text-align: center;
display: table-row;
.paper {
display: table-cell;
text-align: center;
a {
display: inline-block;
font-family: GothamMedium, sans-serif;
text-transform: uppercase;
font-weight: 100;
font-size: .85em;
margin: 0 auto;
max-width: 17em;
color: white;
border: 2px solid white;
border-radius: 2px;
padding: 1.5em 3em;
text-decoration: none;
transition-property: color, background-color;
transition-duration: 1s,1s;
transition-timing-function: ease-in-out,ease-in-out;
&:hover {
transition-property: color, background-color;
transition-duration: 300ms,300ms;
transition-timing-function: ease-in-out,ease-in-out;
color: #363636;
background-color: white;
}
.butterytext();
}
}
}
}
.solutions {
padding-top: 3em;
position: relative;
z-index: 2;
@media screen and (max-width: 1000px) {
font-size: .75em;
}
p {
font-family: GothamMedium, sans-serif;
display: block;
}
>p:first-child {
font-family: GothamThin, sans-serif;
font-size: 3.5em;
width: 90%;
color: white;
margin: 1em auto;
.butterytext();
}
p:nth-child(2) {
color: white;
text-align: center;
text-transform: uppercase;
font-size: 1.25em;
padding: 2rem 0 0 0;
a {
color: white;
margin: 0 1em;
font-family: GothamThin, sans-serif;
text-decoration: none;
.butterytext();
&.active {
font-family: GothamMedium, sans-serif;
}
}
}
.catalyst-showcase {
width:90%;
margin:1em auto;
.catalyst-header {
background:#363636;
color:#fff;
text-transform: uppercase;
padding:0.6em;
}
.catalyst-main {
background:#fff;
padding:3em;
p:first-of-type {
font-size: 1.7em;
color:#000;
text-align: left;
padding: 0;
margin: 0 0 10px 0;
line-height: 35px;
text-transform: initial;
font-family: "GothamLight";
}
p:last-of-type {
font-family: GothamMedium;
//font-weight: 100;
font-size: 0.95em;
}
.catalyst-description {
display: inline-block;
vertical-align: top;
width: 49%;
line-height: 21px;
img {
width:90%;
}
li {
margin: 0;
list-style: none;
padding-left: 14px;
font-size: 0.9em;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Njc0NjlFMjdCNjQ2MTFFMUE1RDk5RkUxMzI4NjcxMkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Njc0NjlFMjhCNjQ2MTFFMUE1RDk5RkUxMzI4NjcxMkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NzQ2OUUyNUI2NDYxMUUxQTVEOTlGRTEzMjg2NzEyRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2NzQ2OUUyNkI2NDYxMUUxQTVEOTlGRTEzMjg2NzEyRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pon1BP8AAABJSURBVHjaYvz//z8DLsACYwgnrk8AUvFAvPDt/MAFIDFGkE6ghAGQfR5JkyFQwQUmBjwALAlSBaQSgfgAiIbyIcbi1YkLAAQYACVtGeHV0XUCAAAAAElFTkSuQmCC) no-repeat 0 7px
}
}
.catalyst-image {
display: inline-block;
vertical-align: top;
width:49%;
img {
width: 100%;
}
}
p {
margin:0.5em 0;
}
ul {
li {
list-style-type: disc;
margin:0.5em 0 0.5em 2em;
}
}
a {
display: inline-block;
background:#0098db;
padding:1em;
width:15em;
text-align: center;
color:#fff;
text-decoration: none;
font-family:GothamMedium;
border-radius: 3px;
transition:background 0.3s;
&:hover {
background:#0088cd;
}
}
}
}
.gallery {
margin: 2rem auto 0 auto;
width: 90%;
@media screen and (max-width: 1000px) {
width: 90%;
}
display: flex;
justify-content: space-between;
position: relative;
z-index: 2;
figure {
width: 29%;
max-width: 27em;
text-align: left;
background-color: white;
position: relative;
padding-bottom: 2.5em;
perspective: 1000px;
perspective-origin: top center;
cursor: pointer;
transform: translateY(0px);
opacity: 1;
transition-property: transform, opacity;
transition-duration: 500ms, 300ms;
transition-delay: 0ms, 0ms;
transition-timing-function: cubic-bezier(0.000, 1.650, 1.000, 1.595), linear;
margin-left: 5px;
&.set {
transform: translateY(60px);
opacity: 0;
transition-property: transform, opacity;
transition-duration: 500ms, 300ms;
transition-delay: 300ms, 0ms;
transition-timing-function: cubic-bezier(0.000, 1.650, 1.000, 1.595), linear;
}
figcaption {
display: block;
text-transform: uppercase;
font-family: GothamLight, sans-serif;
font-size: 1.35em;
line-height: 1.45;
padding: 1em 2em;
color: white;
background-color: #262626;
position: relative;
z-index: 10;
min-height: 4em;
overflow: hidden;
max-height: 3em;
@media screen and (max-width: 1520px) {
font-size: 1.2em;
min-height: 6rem;
padding-bottom: 0;
}
@media screen and (max-width: 1400px) {
font-size: 1em;
min-height: 6rem;
}
@media screen and (max-width: 1130px) {
font-size: .75em;
min-height: 4rem;
}
transform: rotateX(0deg);
transform-origin: top center;
transition-property: transform;
transition-duration: 333ms;
transition-timing-function: ease-out;
}
img {
width: 100%;
height: 233px;
margin-top: -3rem;
@media screen and (max-width: 1300px){
height: 150px;
max-height: 150px;
margin-top: 0rem;
}
@media screen and (max-width: 1150px){
height: 180px;
max-height: 180px;
margin-top: 0rem;
}
z-index: 0;
position: relative;
transition-property: filter;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
filter: contrast(100%) sepia(0%) hue-rotate(0deg) saturate(100%) brightness(100%);
}
&:hover img {
transition-property: filter;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
filter: contrast(30%) sepia(100%) hue-rotate(180deg)saturate(260%) brightness(120%);
}
.viewproduct {
display: block;
width: 35%;
background-color: #0098db;
text-align: center;
margin: auto;
text-decoration: none;
color: white;
font-family: GothamMedium, sans-serif;
font-size: .8em;
text-transform: uppercase;
padding: 1em 2em;
position: relative;
top: -1.5em;
transform: rotateX(0deg);
transform-origin: 50% 50%;
transition-property: transform, background-color;
transition-duration: 333ms, 333ms;
transition-timing-function: ease-out, ease-in-out;
.butterytext();
}
&:hover .viewproduct {
background-color: #363636;
color: white;
}
p {
font-family: GothamBook, sans-serif;
padding: 0 1.25em;
line-height: 1.15;
}
ul {
display: block;
font-family: GothamBook, sans-serif;
padding: 1.25em;
line-height: 1.15;
li {
margin-bottom: .25em;
font-size: .80em;
position: relative;
left: 1em;
padding-right: 1em;
}
li:before {
position: absolute;
top: 5%;
left: -1em;
content: "\2022";
display: inline-block;
margin-right: .85em;
color: hsl(205,70%,65%);
}
}
.requestprod {
cursor: pointer;
position: absolute;
bottom: .5em;
text {
font-family: GothamMedium, sans-serif;
fill: #0098db;
text-transform: uppercase;
font-size: smaller;
transition-property: transform;
transition-duration: 600ms;
@media screen and (max-width: 1150px){
transform: scale(.8) translateX(1.5em);
}
}
circle {
opacity: 0;
transition-property: opacity;
transition-duration: 600ms;
transition-delay: 0ms;
}
}
@media screen and (min-width: 1400px) {
&:hover .requestprod text {
}
&:hover .requestprod circle {
opacity: 1;
transition-delay: 200ms;
}
}
} /* figure */
}
} /* /.solutions */
.backstripe {
display: block;
position: absolute;
top : -226px;
left:0;
width: auto;
height: 100%;
z-index: 0;
}
@media @phone {
.casestudies {
padding: 0 @mobile-side-pad;
margin: 4em 0 0 0;
z-index: 1;
.c_copy {
min-width: initial;
max-width: initial;
order: 2;
width: 100%;
margin: 1em 0;
text-align: center;
.head {
font-size: 5.8vw;
}
.subhead {
font-size: 0.9em;
padding-top: 8px;
display: block;
}
}
.carousel {
order: 1;
margin: 0;
img {
width: 70%;
}
.arrow {
top: 34%;
&.right {
color: #262626;
}
}
}
.papers {
width: 100%;
order: 3;
margin-top: 1em;
a {
}
}
} // case studies
.solutions {
> p:first-child {
font-size: 7.5vw;
text-align: center;
padding: 0 @mobile-side-pad;
}
p:nth-child(2) {
font-size: 3vw;
}
.catalyst-showcase {
.catalyst-header {
padding: 14px 10px;
}
.catalyst-main {
padding: 0.6em 1em;
display: flex;
flex-direction: column;
.catalyst-description {
order: 2;
width: 100%;
.catalyst-logo {
text-align: center;
img {
width: 80%;
display: inline-block;
margin: 0 auto;
}
}
.catalyst-tagline {
font-size: 4.8vw;
text-align: center;
line-height: 28px;
}
p:last-of-type {
font-size: 4vw
}
li {
font-size: 1.2em;
padding-bottom: 7px;
}
a {
margin: 0 4em 2em;
}
}
.catalyst-image {
width: 100%;
order: 1;
}
}
}
}
} // midblock phone
} /* /.midblock */
.picklang {
background-color: #1fadf5;
display: table;
width: 100%;
color: white;
padding: 4em 2em;
box-sizing: border-box;
li {
transition-property: all;
transition-duration: .25s;
span {
font-size: smaller;
font-weight: lighter;
margin-left: .5em;
}
}
.toplangs {
font-family: GothamBook, sans-serif;
font-size: 1.75em;
width: 40%;
vertical-align: top;
display: table-cell;
position: relative;
transform: none;
opacity: 1;
transition-property: all;
transition-duration: 400ms;
transition-timing-function: linear;
ul {
border: 1px solid white;
}
&.set {
transform: translateY(-10%);
opacity: 0;
}
// TODO gotta redo whole thing in mobile because safari doesnt do flexbox
// plus we dont wanna take them away from the page when theyre this far down
@media @phone { display: none;}
&::before {
content: "Our top languages";
color: white;
font-family: GothamBold, sans-serif;
font-size: .65em;
position: absolute;
top: -1.25em;
left: 1em;
}
li {
text-align: left;
vertical-align: middle;
cursor: pointer;
box-sizing: border-box;
width: 100%;
padding-left: 10px;
position: relative;
a {
color: #fff;
text-decoration: none;
display: block;
width: 100%;
padding: 15px;
}
&.set {
}
&::after {
content: "VIEW OUR DEMO";
color: #ecc200;
font-size: .65em;
transform: translateX(20%);
opacity: 0;
transition-property: all;
transition-duration: 200ms;
transition-delay: 300ms;
transition-timing-function: ease-out;
position: absolute;
right: 2em;
top: 1.2em;
pointer-events: none;
}
&:hover {
background-color: rgba(0,52,113,.5);
&::after {
transform: translateX(0%);
opacity: 1;
}
}
span {
font-size: .5em;
}
}
}
.otherlangs {
display: table-cell;
width: 55%;
vertical-align: middle;
ul {
}
// margin: 3em 0;
// padding:0 0 0 2.9em;
font-size: 1.05em;
@media screen and (max-width: 1410px) {
justify-content: center;
}
@media @phone {
display: none;
}
li {
display: inline-block;
//min-width: 14em;
padding: 0 30px;
max-height: 1.5em;
opacity: .85;
text-shadow: 0px 0px 2px transparent;
margin-bottom: 2em;
cursor: text;
transition-property: all;
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.000, 1.650, 1.000, 1.595);
@media screen and (max-width: 1410px) {
text-align: center;
}
&.set {
opacity: 0;
text-shadow: 0px 0px 10px white;
}
}
}
@media @tablet {
display: block;
.toplangs {
border: 1px solid;
width: 40%;
vertical-align: middle;
&:before {
left: 0;
}
li {
margin-bottom: 0.6em;
&:last-of-type { margin-bottom: 0}
}
}
.otherlangs {
width: 600%;
li {
padding: 0 16px;
margin-bottom: 1em;
}
}
} // tablet
@media @phone {
border: 3px solid red;
display: block;
padding: 1em 2em;
.toplangs {
display: block;
width: 100%;
border: none;
font-size: 1.2em;
&:before {
display: block;
width: 100%;
padding-bottom: 20px;
text-align: left;
font-size: 1em;
position: static;
}
}
} // phone
} // picklang
/********************************************************************************
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%;
// }
.head {
margin: 5rem auto 0.5rem;
}
.subhead {
font-size: 1.34em;
width: 76%;
}
.subhead.two {
width: 93%;
}
& > .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 phone
} /* /.awards */
/********************************************************************************
Lightboxes
********************************************************************************/
#tint {
background: rgba(0,0 ,0 ,0.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 6;
display: none;
& > a.close {
width: 45px;
height: 45px;
display: inline-block;
top: 20px;
right: 20px;
position: fixed;
}
& > div {
}
}
#demovideo-lightbox {
width: 60%;
max-width: 800px;
margin: 7vh auto;
background: #fff;
.content {
//display: table;
width: 100%;
.close-wrap {
text-align: right;
width: 100%;
padding-bottom: 3px;
a {
display: inline-block;
text-decoration: none;
color: inherit;
span {
display: inline-block;
font-size: 1.5em;
position: relative;
bottom: -2px;
//font-weight: bold
}
}
}
.left {
display: table-cell;
width: 15%;
vertical-align: top;
text-align: center;
background: #0098DB;
padding: 25px 10px;
box-sizing: border-box;
.videowrap {
margin-bottom: 30px;
a {
display: block;
width: 100%;
height: 65px;
margin: 0 auto;
color: #fff;
text-decoration: none;
img {
display: block;
height: 100%;
width: 100%;
}
span {
// text under each video thumb in the blue left column
display: block;
font-size: 0.9am;
padding-top: 3px;
}
}
}
}
.right {
display: table-cell;
width: 82%;
box-sizing: border-box;;
padding: 0 15px;
height: 300px;
.right-footer {
padding-top: 15px;
}
h3 {
font-size: 1.4em;
display: inline-block;
vertical-align: middle;
padding: 12px 0;
max-width: 390px;
}
a:not(.close) {
background: #0098DB;
display: inline-block;
color: #fff;
padding: 12px 25px;
text-decoration: none;
float: right;
border-radius: 4px;
}
}
}
@media @tablet @portrait {
width: 75%;
.content {
display: flex;
flex-direction: column;
.left {
order: 2;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
.videowrap {
flex-basis: 30%;
margin-right: 10px;
a {
width: 70%;
}
}
}
.right {
width: 100%;
height: auto;
text-align: center;
display: block;
h3 {
float: none;
display: block;
width: 100%;
text-align: center;
max-width: initial;
}
a:not(.close) {
float: none;
margin: 0 auto;
margin-bottom: 15px;
}
}
}
}
@media @tablet @landscape {
width: 100%;
max-width: 850px;
}
}