Project

General

Profile

1
@import "variables.less";
2
@import "mixins.less";
3

    
4
body {
5
	overflow-x: hidden;
6
}
7

    
8
p {
9
	font-size: 20px;
10
}
11

    
12
p.small {
13
	font-size: 16px;
14
}
15

    
16
a,
17
a:hover,
18
a:focus,
19
a:active,
20
a.active {
21
	color: @brand-success;
22
	outline: none;
23
}
24

    
25
h1, h2, h3, h4, h5, h6 {
26
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
27
	text-transform: uppercase;
28
	font-weight: 700;
29
}
30

    
31
hr.star-light,
32
hr.star-primary {
33
    padding: 0;
34
    border: none;
35
    border-top: solid 5px;
36
    text-align: center;
37
    max-width: 250px;
38
    margin: 25px auto 30px;
39
}
40

    
41
hr.star-light:after,
42
hr.star-primary:after {
43
    content: "\f005";
44
    font-family: FontAwesome;
45
    display: inline-block;
46
    position: relative;
47
    top: -0.8em;
48
    font-size: 2em;
49
    padding: 0 0.25em;
50
}
51

    
52
hr.star-light {
53
    border-color: white;
54
}
55

    
56
hr.star-light:after {
57
    background-color: @brand-success;
58
    color: white;
59
}
60

    
61
hr.star-primary {
62
    border-color: @brand-primary;
63
}
64

    
65
hr.star-primary:after {
66
    background-color: white;
67
    color: @brand-primary;
68
}
69

    
70
.img-centered {
71
	margin: 0 auto;
72
}
73

    
74
header {
75
	text-align: center;
76
	background: @brand-success;
77
	color: white;
78
	.container {
79
		padding-top: 100px;
80
		padding-bottom: 50px;
81
	}
82
	img {
83
		display: block;
84
		margin: 0 auto 20px;
85
	}
86
	.intro-text {
87
		.name {
88
			display: block;
89
			font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
90
			text-transform: uppercase;
91
			font-weight: 700;
92
			font-size: 2em;
93
		}
94
		.skills {
95
			font-size: 1.25em;
96
			font-weight: 300;
97
		}
98
	}
99
}
100

    
101
@media(min-width:768px) {
102
	header {
103
		.container {
104
			padding-top: 200px;
105
			padding-bottom: 100px;
106
		}
107
		.intro-text {
108
			.name {
109
				font-size: 4.75em;
110
			}
111
			.skills {
112
				font-size: 1.75em;
113
			}
114
		}
115
	}
116
}
117

    
118
@media(min-width:768px) {
119
    .navbar-fixed-top {
120
        padding: 25px 0;
121
        -webkit-transition: padding 0.3s;
122
        -moz-transition: padding 0.3s;
123
        transition: padding 0.3s;
124
	    .navbar-brand {
125
	        font-size: 2em;
126
	        -webkit-transition: all 0.3s;
127
	        -moz-transition: all 0.3s;
128
	        transition: all 0.3s;
129
	    }
130
    }
131
    .navbar-fixed-top.navbar-shrink {
132
        padding: 10px 0;
133
		.navbar-brand {
134
	        font-size: 1.5em;
135
	    }
136
	}
137
}
138

    
139
.navbar {
140
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
141
	text-transform: uppercase;
142
	font-weight: 700;
143
	a:focus {
144
		outline: none;
145
	}
146
	.navbar-nav {
147
		letter-spacing: 1px;
148
		li {
149
			a:focus {
150
				outline: none;
151
			}
152
		}
153
	}
154
}
155

    
156
.navbar-default,
157
.navbar-inverse {
158
	border: none;
159
}
160

    
161
section {
162
    padding: 100px 0;
163
    h2 {
164
    	margin: 0;
165
    	font-size: 3em;
166
    }
167
}
168

    
169
section.success {
170
	background: @brand-success;
171
	color: white;
172

    
173
    a,
174
    a:hover,
175
    a:focus,
176
    a:active,
177
    a.active {
178
      color: @brand-primary;
179
      outline: none;
180
    }
181
}
182

    
183
@media(max-width:767px) {
184
	section {
185
		padding: 75px 0;
186
	}
187
	section.first {
188
		padding-top: 75px;
189
	}
190
}
191

    
192
#portfolio {
193
    .portfolio-item {
194
        margin: 0 0 15px;
195
        right: 0;
196
        .portfolio-link {
197
            display: block;
198
            position: relative;
199
            max-width: 400px;
200
            margin: 0 auto;
201
            .caption {
202
                background: fade(@brand-success, 90%);
203
                position: absolute;
204
                width: 100%;
205
                height: 100%;
206
                opacity: 0;
207
                transition: all ease 0.5s;
208
                -webkit-transition: all ease 0.5s;
209
                -moz-transition: all ease 0.5s;
210
                &:hover {
211
                    opacity: 1;
212
                }
213
                .caption-content {
214
                    position: absolute;
215
                    width: 100%;
216
                    height: 20px;
217
                    font-size: 20px;
218
                    text-align: center;
219
                    top: 50%;
220
                    margin-top: -12px;
221
                    color: white;
222
                    i {
223
                        margin-top: -12px;
224
                    }
225
                    h3,
226
                    h4 {
227
                        margin: 0;
228
                    }
229
                }
230
            }
231
        }
232
    }
233
    * {
234
        z-index: 2;
235
    }
236
}
237

    
238
@media(min-width:767px) {
239
    #portfolio {
240
        .portfolio-item {
241
            margin: 0 0 30px;
242
        }
243
    }
244
}
245

    
246
.btn-outline {
247
	color: white;
248
	font-size: 20px;
249
	border: solid 2px white;
250
	background: transparent;
251
	transition: all 0.3s ease-in-out;
252
	margin-top: 15px;
253
	&:hover,
254
	&:focus,
255
	&:active,
256
	&.active {
257
		color: @brand-success;
258
		background: white;
259
		border: solid 2px white;
260
	}
261
}
262

    
263
.floating-label-form-group {
264
    position: relative;
265
    margin-bottom: 0;
266
    padding-bottom: 0.5em;
267
    border-bottom: 1px solid @gray-lighter;
268
    input,
269
    textarea {
270
	    z-index: 1;
271
	    position: relative;
272
	    padding-right: 0;
273
	    padding-left: 0;
274
	    border: none;
275
	    border-radius: 0;
276
	    font-size: 1.5em;
277
	    background: none;
278
	    box-shadow: none !important;
279
	    resize: none;
280
    }
281
    label {
282
	    display: block;
283
	    z-index: 0;
284
	    position: relative;
285
	    top: 2em;
286
	    margin: 0;
287
	    font-size: 0.85em;
288
	    line-height: 1.764705882em;
289
	    vertical-align: middle;
290
	    vertical-align: baseline;
291
	    opacity: 0;
292
	    -webkit-transition: top 0.3s ease,opacity 0.3s ease;
293
	    -moz-transition: top 0.3s ease,opacity 0.3s ease;
294
	    -ms-transition: top 0.3s ease,opacity 0.3s ease;
295
	    transition: top 0.3s ease,opacity 0.3s ease;
296
    }
297
    &::not(:first-child) {
298
	    padding-left: 14px;
299
	    border-left: 1px solid @gray-lighter;
300
    }
301
}
302

    
303
.floating-label-form-group-with-value {
304
	label {
305
	    top: 0;
306
	    opacity: 1;
307
	}
308
}
309

    
310
.floating-label-form-group-with-focus {
311
	label {
312
	    color: @brand-success;
313
	}
314
}
315

    
316
form .row:first-child .floating-label-form-group {
317
    border-top: 1px solid @gray-lighter;
318
}
319

    
320
footer {
321
	color: white;
322
	h3 {
323
		margin-bottom: 30px;
324
	}
325
	.footer-above {
326
		padding-top: 50px;
327
		background-color: @brand-primary;
328
	}
329
	.footer-col {
330
		margin-bottom: 50px;
331
	}
332
	.footer-below {
333
		padding: 25px 0;
334
		background-color: darken(@brand-primary, 5%);
335
	}
336
}
337

    
338
.btn-social {
339
	display: inline-block;
340
	height: 50px;
341
	width: 50px;
342
	border: 2px solid white;
343
	border-radius: 100%;
344
	text-align: center;
345
	font-size: 20px;
346
	line-height: 45px;
347
}
348

    
349
.btn:focus,
350
.btn:active,
351
.btn.active {
352
	outline: none;
353
}
354

    
355
.scroll-top {
356
    position: fixed;
357
    right: 2%;
358
    bottom: 2%;
359
    width: 50px;
360
    height: 50px;
361
    z-index: 1049;
362
    .btn {
363
    	font-size: 20px;
364
	    width: 50px;
365
	    height: 50px;
366
	    border-radius: 100%;
367
	    line-height: 28px;
368
	    &:focus {
369
	    	outline: none;
370
	    }
371
    }
372
}
373

    
374
.portfolio-modal {
375
	.modal-content {
376
	    border-radius: 0;
377
	    background-clip: border-box;
378
	    -webkit-box-shadow: none;
379
	    box-shadow: none;
380
	    border: none;
381
	    min-height: 100%;
382
	    padding: 100px 0;
383
	    text-align: center;
384
		h2 {
385
	    	margin: 0;
386
	    	font-size: 3em;
387
		}
388
		img {
389
			margin-bottom: 30px;
390
		}
391
		.item-details {
392
			margin: 30px 0;
393
		}
394
	}
395
    .close-modal {
396
        position: absolute;
397
        width:75px;
398
        height:75px;
399
        background-color:transparent;
400
        top: 25px;
401
        right: 25px;
402
        cursor: pointer;
403
        &:hover {
404
            opacity: 0.3;
405
        }
406
        .lr {
407
            height:75px;
408
            width:1px;
409
            margin-left:35px;
410
            background-color:@brand-primary;
411
            transform: rotate(45deg);
412
            -ms-transform: rotate(45deg);
413
            /* IE 9 */
414
            -webkit-transform: rotate(45deg);
415
            /* Safari and Chrome */
416
            z-index:1051;
417
            .rl {
418
                height:75px;
419
                width:1px;
420
                background-color:@brand-primary;
421
                transform: rotate(90deg);
422
                -ms-transform: rotate(90deg);
423
                /* IE 9 */
424
                -webkit-transform: rotate(90deg);
425
                /* Safari and Chrome */
426
                z-index:1052;
427
            }
428
        }
429
    }
430
    .modal-backdrop {
431
    	opacity: 0;
432
    	display: none;
433
    }
434
}
(1-1/3)