-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
129 lines (112 loc) · 7.78 KB
/
style.css
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
/* HTML */
html { -webkit-font-smoothing: antialiased;}
/* Body */
body {background-color: #FEFEFE; font: 16px Raleway, sans-serif; -webkit-font-smoothing: antialiased;}
/* Display */
.no-display {display: none;}
.no-visibility {visibility: hidden;}
/* Padding */
.no-padding-right {padding-right: 0 !important;}
.no-padding-top {padding-top: 0 !important;}
.no-padding-bottom {padding-bottom: 0 !important;}
.padding-main-section {padding: 4vh 4vh 4vh 4vh;}
.padding-section {padding: 13vh 0 13vh 0;}
.padding-section-enlarged {padding: 25vh 0 25vh 0;}
@media only screen and (max-width: 767px) {.padding-section-enlarged {padding: 12vh 0 12vh 0;}}
@media only screen and (min-width: 768px) and (max-width: 1024px) {.padding-section-enlarged {padding: 20vh 0 20vh 0;}}
/* Margin */
.margin-bottom-button {margin-bottom: 4vh !important;}
.margin-bottom-button-half {margin-bottom: 2vh !important;}
.margin-bottom-section {margin-bottom: 7vh;}
.margin-top-section {margin-top: 7vh;}
.no-margin-bottom {margin-bottom: 0 !important;}
.no-margin-top {margin-top: 0 !important;}
/* Elements position */
.center {display: block; margin: 0 auto !important;}
.center-text {text-align: center;}
.justify {text-align: justify;}
.left {float: left;}
@media only screen and (max-width: 1024px) {.left {display: block; float: none; margin: 0 auto !important; margin-bottom: 4vh !important; margin-top: 10px !important;}}
.right {float: right;}
@media only screen and (max-width: 1024px) {.right {display: block; float: none; margin: 0 auto !important;}}
/* Section dimensions */
.hero-full-screen {height: 100vh;}
.section-copyright {margin: 10px 0 10px 0 !important;}
.section-pre-footer {padding: 7vh 0 7vh 0;}
/* Colors */
.color-black {color: #343434;}
.color-dimgray {color: #3A515F;}
.color-red {color: #55111D;}
.color-white {color: #FEFEFE;}
/* Font styles */
.bold {font-weight: 600;}
.italic {font-style: italic;}
.underline {cursor: pointer; text-decoration: underline;}
.no-underline {cursor: pointer; text-decoration: none;}
.no-underline:hover {cursor: pointer; text-decoration: none;}
@media only screen and (max-width: 320px) {.font-mail{font-size: 11px;}}
@media only screen and (min-width: 321px) and (max-width: 767px) {.font-mail{font-size: 14px;}}
/* Background colors */
.background-black {background-color: #343434;}
.background-dimgray {background-color: #3A515F;} /*#78A892*/
.background-gray {background-color: #EFF3F5;}
.background-hero {background-image: url("img/background.png"); background-repeat: no-repeat; background-size: cover;}
@media only screen and (max-width: 1024px) {.background-hero {background-image: none; background-color: #E8E7F0;}}
.background-red {background-color: #55111D;}
.background-white {background-color: #FEFEFE;}
/* Titles */
.copyright-title {font: 15px Raleway, sans-serif; letter-spacing: 0.6px; text-align: center;}
.main-title {font: 65px Raleway, sans-serif; text-align: center; text-transform: uppercase; line-height: 65px; color: #343434;}
@media only screen and (max-width: 767px) {.main-title {font-size: 35px; line-height: 40px;}}
@media only screen and (max-height: 415px) {.main-title {font-size: 30px;}}
.main-subtitle-enlarged {font: 21px Raleway, sans-serif; letter-spacing: 2px; text-align: center; text-transform: uppercase; line-height: 65px; color: #343434;}
@media only screen and (max-width: 767px) {.main-subtitle-enlarged {font-size: 21px; line-height: 30px;}}
@media only screen and (max-height: 415px) {.main-subtitle-enlarged {font-size: 18px;}}
.main-subtitle {font: 21px Raleway, sans-serif; letter-spacing: 2px; text-align: center; color: #343434;}
.pre-footer-title {font: 21px Raleway, sans-serif; letter-spacing: 2px; text-align: center;}
.pre-footer-subtitle {font: 17px Raleway, sans-serif; letter-spacing: 2px; text-align: center;}
.secondary-title {font: 35px Raleway, sans-serif; letter-spacing: 2px; text-align: center;}
@media only screen and (max-width: 767px) {.secondary-title {font-size: 25px;}}
@media only screen and (max-height: 415px) {.secondary-title {font-size: 15px;}}
.thumbnail-title {font: 20px Raleway, sans-serif; font-weight: 600; letter-spacing: 2px;}
/* Paragraphs */
.pre-footer-p {font: 17px Raleway, sans-serif; letter-spacing: 0.6; line-height: 1.6; text-align: center;}
.p-section {font: 18px Raleway, sans-serif; letter-spacing: 0.6; line-height: 1.6;}
/* Navbar */
.nav a {color: #343434; cursor: pointer; font: 14px Raleway, sans-serif; letter-spacing: 2px; text-transform: uppercase;}
@media only screen and (max-width: 1024px) {.nav a {font-size: 12px;}}
.nav a:hover {color: #3A515F;}
.active > a {background-color: transparent !important; color: #3A515F !important; font-weight: 600; text-shadow: 10px 10px 31px -2px rgba(179,177,179,0.77);}
.navbar-brand {background-color: #E8E7F0; padding-top: 0 !important;}
.navbar-brand > img {background-color: #E8E7F0; padding: 2vh;}
@media only screen and (max-width: 1024px) {.navbar-brand > img {display: none !important;}}
.navbar-default {background-color: #E8E7F0 !important; background-image: none !important; border: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important;}
.mobile-home {display: none;}
@media only screen and (max-width: 1024px) {.mobile-home {display: block !important;}}
@media only screen and (max-height: 415px) {.mobile-home-img {display: none;}}
/* Hr */
.hr-card {border: 3px solid; width: 75%;}
.hr-circle {border: 3px solid; width: 60%;}
.hr-main {border: 4px solid; width: 60%;}
.hr-secondary {border: 4px solid; width: 40%;}
/* Button */
.button-round {background-color: #55111D; border: 1px solid #55111D; border-radius: 37px; color: #fff; font: 16px Raleway, sans-serif; margin: 10px 0 14px; padding: 13.6px 16px;}
.button-round:hover {background-color: transparent; border: 1px solid #55111D; border-radius: 37px; color: #55111D; font: 16px Raleway, sans-serif; margin: 10px 0 14px; padding: 13.6px 16px;}
.button-round-empty {background-color: transparent; border: 1px solid #55111D; border-radius: 37px; color: #55111D; font: 16px Raleway, sans-serif; margin: 10px 0 14px; padding: 13.6px 16px;}
.button-round-dimgray {background-color: #3A515F; border: 1px solid #3A515F; border-radius: 37px; color: #fff; font: 16px Raleway, sans-serif; margin: 10px 0 14px; padding: 13.6px 16px;}
.button-round-empty-dimgray {background-color: transparent; border: 1px solid #3A515F; border-radius: 37px; color: #3A515F; font: 16px Raleway, sans-serif; margin: 10px 0 14px; padding: 13.6px 16px;}
.button-round-white {background-color: #FEFEFE; border: 1px solid #FEFEFE; border-radius: 37px; color: #3A515F; font: 20px Raleway, sans-serif; margin: 10px 0 14px; padding: 13.6px 16px;}
.button-round-white:hover {background-color: #3A515F; border: 1px solid #FEFEFE; border-radius: 37px; color: #FEFEFE; font: 20px Raleway, sans-serif; margin: 10px 0 14px; padding: 13.6px 16px;}
/* Cards */
.circle {background-color: #bbb; border-radius: 50%; display: block; height: 15vh; margin: 20px auto; width: 15vh;}
@media only screen and (max-width: 1024px) {.circle {background-color: #bbb; border-radius: 50%; display: block; height: 10vh; margin: 20px auto; width: 10vh;}}
.circle:hover {box-shadow: 0px 2px 30px -1px rgba(52,52,52,0.4);}
.thumbnail {background-color: #FEFEFE !important; border: 0 !important; border-radius: 0 !important; box-shadow: 10px 10px 31px -2px rgba(179,177,179,0.1) !important; height: 25vh; margin-bottom: 0 !important; padding: 2vh !important;}
.thumbnail .caption {padding: 3vh !important;}
@media only screen and (max-width: 1024px) {.thumbnail-title {margin-top: 20px !important;}}
/* Img cards - Insert the images of your relators here as background-image */
.no-user {background-image: url("img/user.png"); background-size: cover; background-repeat: no-repeat;}
/* Icone */
.fa-copy:hover {color: #FEFEFE; font-size: 20px;}
/* Brand */
@media only screen and (max-width: 1024px) {.brand {margin-top: 2vh;}}