_header.scss
3.82 KB
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
.hero-container {
background-position: top right;
background-size: cover;
width: 100%;
background-color: #ccc;
height: 530px;
}
.header-section,
.full-image-login,
.full-image,
.image-loaded {
height: 530px;
background-position: center;
background-size: cover;
width: 100%;
position: relative;
@media only screen and (max-width: 900px) {
height: auto;
}
}
.full-image::after {
content: "";
display: block;
position: absolute;
background-size: cover;
background-position: top right;
bottom: -20px;
right: 0px;
width: 100%;
height: 120px;
background-image: url("../images/logo-border.png");
}
.hero-content {
width: 60%;
height: 530px;
//margin-left: 48px;
@media only screen and (max-width: 900px) {
width: 95%;
margin: auto;
height: 670px;
}
h1 {
color: #fff;
font-size: 39px;
font-weight: bold;
font-family:"trade-gothic-next";
}
.first-name{
color: #fff;
font-size: 39px;
font-weight: bold;
font-family:"trade-gothic-next";
}
p {
color: #fff;
font-size: 16px;
line-height: 28px;
margin-bottom: 25px;
font-family:"trade-gothic-next";
max-width: 600px;
}
h1 + p { font-size: 20px; }
.play-video{
background-image: url("data:image/svg+xml,%3Csvg id='btn_Play-heroVideo' xmlns='http://www.w3.org/2000/svg' width='48.161' height='33.299' viewBox='0 0 48.161 33.299'%3E%3Cg id='Group_33' data-name='Group 33' transform='translate(-41.443 -213.828)'%3E%3Cpath id='Path_11' data-name='Path 11' d='M86.124 213.817h-41.2a3.48 3.48 0 0 0-3.48 3.48v26.338a3.48 3.48 0 0 0 3.48 3.48h41.2a3.48 3.48 0 0 0 3.48-3.48V217.3a3.481 3.481 0 0 0-3.481-3.48Z' transform='translate(0 0.011)' fill='%23fff'/%3E%3Cpath id='Polygon_6' data-name='Polygon 6' d='M8.116 1.669a1 1 0 0 1 1.768 0l7.339 13.863A1 1 0 0 1 16.339 17H1.661a1 1 0 0 1-.884-1.468Z' transform='translate(75.443 221.828) rotate(90)' fill='%231a3668'/%3E%3C/g%3E%3C/svg%3E");
width: 48px;
height: 33px;
background-size: cover;
text-indent: -99999px;
display: block;
}
.play-video:hover{
background-image: url("data:image/svg+xml,%3Csvg id='btn_Play-heroVideo' xmlns='http://www.w3.org/2000/svg' width='48.161' height='33.299' viewBox='0 0 48.161 33.299'%3E%3Cg id='Group_33' data-name='Group 33' transform='translate(-41.443 -213.828)'%3E%3Cpath id='Path_11' data-name='Path 11' d='M86.124 213.817h-41.2a3.48 3.48 0 0 0-3.48 3.48v26.338a3.48 3.48 0 0 0 3.48 3.48h41.2a3.48 3.48 0 0 0 3.48-3.48V217.3a3.481 3.481 0 0 0-3.481-3.48Z' transform='translate(0 0.011)' fill='%23e3e3e3'/%3E%3Cpath id='Polygon_6' data-name='Polygon 6' d='M8.116 1.669a1 1 0 0 1 1.768 0l7.339 13.863A1 1 0 0 1 16.339 17H1.661a1 1 0 0 1-.884-1.468Z' transform='translate(75.443 221.828) rotate(90)' fill='%231a3668'/%3E%3C/g%3E%3C/svg%3E");
}
}
#Modal_Video{
.modal-content{
background-color: transparent;
border-width:0px !important ;
}
.btn-close{
opacity: 1;
margin-right: -20px;
margin-top: -20px;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.828' height='22.828' viewBox='0 0 22.828 22.828'%3E%3Cg id='btn_close_modal' data-name='btn_close modal' transform='translate(1.414 1.414)'%3E%3Cline id='Line_14' data-name='Line 14' x2='28.284' transform='translate(0) rotate(45)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/%3E%3Cline id='Line_15' data-name='Line 15' x2='28.284' transform='translate(20 0) rotate(135)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
}
}
.home{
.hero-content {
@media only screen and (max-width: 900px) {
height: 670px;
}
}
}