The website of Ura Design
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1882 lines
42 KiB

/*-----------------------------------
[Table of Contents]
1. Base
2. Button
3. Animation
4. Navigation
5. Member
6. Socials
7. Testimonials
8. Contact
9. Icon-text and service
10. Gallery
11. Post
12. Post comments
13. Slide
14. Form
15. Footer
16. Fullscreen video
17. Milestone
18. Principles
19. Clients
20. Bargraph
21. Process
22. Sidebar
--------------*/
/* base */
.spacing {
height: 20px; }
::selection {
background: #3399d4;
color: white; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #3399d4;
color: white; /* Gecko Browsers */
}
.one.spacing {
height: 20px; }
.two.spacing {
height: 40px; }
.three.spacing {
height: 60px; }
.four.spacing {
height: 80px; }
.full {
padding: 100px 0;
background-size: cover;
background-position: 50% 50%;
position: relative;
/* for work section and member section*/ }
.full.blog {
padding: 100px 0px 0px 0px; }
.full.new {
padding: 100px 0;
height: 100px;
background-size: cover;
background-position: 50% 50%;
position: relative;
/* for work section and member section*/ }
.full.text {
padding: 60px 0;
background-size: cover;
background-position: 50% 50%;
position: relative;
/* for work section and member section*/ }
.full.light {
color: #fff; }
.full.brown {
background: #AB8860; }
.full.blue {
background: #3399d4; }
.full.light-grey {
background: #f6f6f6; }
.full.light-grey.blog {
background: #f6f6f6;
padding: 20px; }
.full.light-cyan {
background: #dae9ec; }
.full.grey {
background: #edebe7; }
.full.works {
background-image: url(../images/@stock/works-header.png); }
.full.white {
background: #fff; }
.full.flower {
background-image: url(../images/@stock/flower.png);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed; }
.full.tree {
min-height: 60%;
background-image: url(../images/@stock/tree.png);
background-repeat: no-repeat;
background-position: center 55%;
background-attachment: fixed; }
.full.lamp {
min-height: 60%;
background-image: url(../images/@stock/lamp.png);
background-repeat: no-repeat;
background-position: 80% 10%;
background-attachment: fixed; }
.full.white-light {
min-height: 60%;
background-image: url(../images/@stock/white-light.png);
background-repeat: no-repeat;
background-position: 20% top;
background-attachment: fixed; }
.full.dark {
background: #333; }
.full.image-bg-1 {
background-image: url(../images/@stock/image-bg.jpg); }
.overlay:before {
position: absolute;
content:" ";
top:0;
left:0;
width: 100%;
height: 100%;
display: block;
z-index:0;
background-color: rgba(51, 153, 212, 0.6);
}
.overlay.services:before {
position: absolute;
content:" ";
top:0;
left:0;
width: 100%;
height: 100%;
display: block;
z-index:0;
background-color: rgba(51, 153, 212, 0.8);
}
.overlay.grey:before {
position: absolute;
content:" ";
top:0;
left:0;
width: 100%;
height: 100%;
display: block;
z-index:0;
background-color: rgba(88, 89, 91, 0.6);
}
.no-padding {
padding: 0; }
.no-overflow {
overflow: hidden; }
.parallax {
background-attachment: fixed; }
.centered-text {
text-align: center; }
.right-aligned {
text-align: right; }
.hide {
display: none; }
.top-shift {
margin-bottom: -80px;
top: -100px; }
a {
color: #3399D4;
outline: none;
-webkit-transition-property: color;
-moz-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s; }
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
margin-top: 0;
text-transform: none;
letter-spacing: 0px; }
h1.blogdate {
font-size: 72px;
color: #3399d4;
margin-bottom: -15px;
margin-top: -10px; }
h1.white, h2.white, h3.white, h4.white, h5.white, h6.white {
color: #fff; }
hr {
border-color: #eee;
marign: 0; }
.section-title {
text-align: center;
margin-bottom: 40px; }
.section-title h1 {
color: white; }
.section-title h2 {
margin-bottom: 0; }
.section-title p {
color: #999;
font-size: 24px;
font-weight: 300;
margin-top: 5px; }
.section-title.new {
text-align: center;
margin-bottom: 40px;
margin-top: 10px; }
.section-title h1 {
color: white; }
.section-title h2 {
margin-bottom: 0; }
.section-title p {
color: #999;
font-size: 24px;
font-weight: 300;
margin-top: 5px; }
.section-title.white p {
color: #fff; }
.section-title.small {
text-align: center;
margin-bottom: 40px; }
.section-title.small h2 {
font-size: 36px; }
.section-title.small p {
font-size: 18px; }
.big-text {
font-size: 24px;
font-weight: 300; }
.header-quote p {
font-size: 24px;
line-height: 1.2em;
position: relative;
padding-right: 20px;
color: white; }
.header-quote i {
font-size: 64px !important;
color: #E0C9B4;
position: absolute;
z-index: 0;
top: -20px;
left: -20px; }
body {
overflow-x: hidden;
font-size: 18px; }
.rotate {
-webkit-animation: rotate 10s ease-in-out infinite;
-moz-animation: rotate 10s ease-in-out infinite;
animation: rotate 10s ease-in-out infinite; }
.small-video {
width: 570px;
height: 361px;
position: absolute;
z-index: 20; }
.big-video {
position: relative;
bottom: -100px;
width: 860px;
height: 481px;
margin: -100px auto 60px;
z-index: 20; }
/* button */
.button {
text-transform: none;
position: relative;
z-index: 1;
font-size: 14px;
letter-spacing: 0px;
padding: 12px 15px 10px; }
.button::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 100%;
top: 0;
z-index: -1;
-webkit-transition: right 0.2s ease-in-out;
-moz-transition: right 0.2s ease-in-out;
transition: right 0.2s ease-in-out; }
.button:hover::before {
right: 0; }
.button.black::before {
background: #333; }
.button.white::before {
background: #fff; }
.button.blog::before {
background: #74c0fc; }
.button.tor::before {
background: #7D4698; }
.button.sfk::before {
background: #f8ed33; }
.button.openlabs::before {
background: #2BBBB0; }
.button.mozilla::before {
background: #fc9606; }
.button.openchain::before {
background: #00adbb; }
.button.enigmail::before {
background: #0077bb; }
.button.reproduciblebuilds::before {
background: #1E5B96; }
.button.thunderbird::before {
background: #0A84FF; }
.button.libocon::before {
background: #11A500; }
.button.i2p::before {
background: #4661A9; }
.button.securedrop::before {
background: #034482; }
.button.boxed.white {
border: 1px solid #fff;
background: none;
color: #fff; }
.button.boxed.white:hover {
color: #333; }
.button.boxed.blue {
border: 1px solid #3399d4;
background: #3399d4;
color: #fff; }
.button.boxed.blue.simple {
border: 1px solid #3399d4;
background: transparent;
color: #3399d4; }
.button.boxed.blue.simple:hover {
background: #3399d4;
color: #fff; }
.button.boxed.black {
border: 1px solid #333;
background: none;
color: #333; }
.button.boxed.black:hover {
color: #fff; }
.button.boxed.tor {
border: 1px solid #7D4698;
background: none;
color: #7D4698; }
.button.boxed.tor:hover {
color: #fff;
background: #7D4698; }
.button.boxed.blog {
border: 1px solid #4dabf7;
background: none;
color: #4dabf7; }
.button.boxed.blog:hover {
color: #fff;
background: #4dabf7; }
.button.boxed.sfk {
border: 1px solid #000;
background: none;
color: #000; }
.button.boxed.sfk:hover {
color: #000;
background: #f8ed33;
border: 1px solid #f8ed33; }
.button.boxed.enigmail {
border: 1px solid #0077bb;
background: none;
color: #0077bb; }
.button.boxed.enigmail:hover {
color: #fff;
background: #0077bb; }
.button.boxed.identihub {
border: 1px solid #58595b;
background: none;
color: #58595b; }
.button.boxed.identihub:hover {
color: #58595b;
background: none; }
.button.boxed.reproduciblebuilds {
border: 1px solid #1E5B96;
background: none;
color: #1E5B96; }
.button.boxed.reproduciblebuilds:hover {
color: #fff;
background: #1E5B96; }
.button.boxed.thunderbird {
border: 1px solid #0A84FF;
background: none;
color: #0A84FF; }
.button.boxed.thunderbird:hover {
color: #fff;
background: #0A84FF; }
.button.boxed.libocon {
border: 1px solid #11A500;
background: none;
color: #11A500; }
.button.boxed.libocon:hover {
color: #fff;
background: #11A500; }
.button.boxed.i2p {
border: 1px solid #4661A9;
background: none;
color: #4661A9; }
.button.boxed.i2p:hover {
color: #fff;
background: #4661A9; }
.button.boxed.securedrop {
border: 1px solid #034482;
background: none;
color: #034482; }
.button.boxed.securedrop:hover {
color: #fff;
background: #034482; }
.button.boxed.openlabs {
border: 1px solid #2BBBB0;
background: none;
color: #2BBBB0; }
.button.boxed.openlabs:hover {
color: #fff;
background: #2BBBB0; }
.button.boxed.mozilla {
border: 1px solid #fc9606;
background: none;
color: #fc9606; }
.button.boxed.mozilla:hover {
color: #fff;
background: #fc9606; }
.button.boxed.openchain {
border: 1px solid #00adbb;
background: none;
color: #00adbb; }
.button.boxed.openchain:hover {
color: #fff;
background: #00adbb; }
.button.boxed.light-brown {
border: 1px solid #dcbc98;
background: none;
color: #dcbc98; }
.button.boxed.light-brown:hover {
color: #fff;
background: #dcbc98; }
.button.boxed.brown {
border: 1px solid #AB8860;
background: none;
color: #AB8860; }
.button.boxed.brown:hover {
color: #fff;
background: #AB8860; }
/* animation */
@-webkit-keyframes move {
0% {
-webkit-transform: translateX(0); }
100% {
-webkit-transform: translateX(50px); } }
@-moz-keyframes move {
0% {
-moz-transform: translateX(0); }
100% {
-moz-transform: translateX(50px); } }
@keyframes move {
0% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); }
100% {
-webkit-transform: translateX(50px);
-moz-transform: translateX(50px);
-ms-transform: translateX(50px);
-o-transform: translateX(50px);
transform: translateX(50px); } }
@-webkit-keyframes slide {
0% {
-webkit-transform: translateX(500px); }
100% {
-webkit-transform: translateX(0); } }
@-moz-keyframes slide {
0% {
-moz-transform: translateX(500px); }
100% {
-moz-transform: translateX(0); } }
@keyframes slide {
0% {
-webkit-transform: translateX(500px);
-moz-transform: translateX(500px);
-ms-transform: translateX(500px);
-o-transform: translateX(500px);
transform: translateX(500px); }
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); } }
/* Navigation */
.title-area h1 {
line-height: 0.5;
padding-left: 15px; }
.title-area h1 a {
color: #333;
font-size: 18px;
font-family: "Overpass";
text-transform: none;
font-weight: 600;
letter-spacing: 10px; }
.title-area h1 a span {
color: #ab8860; }
.title-area.white h1 a {
color: #fff; }
#menu-toggler {
padding-right: 40px;
margin-top: -60px;
position: relative; }
#menu-toggler i {
background: #333;
color: #fff;
font-size: 32px;
display: block;
line-height: 0.5em;
padding: 10px; }
.f-topbar-fixed {
padding-top: 0 !important; }
.contain-to-grid {
background: transparent;
position: fixed;
z-index: 99;
height: 4rem; }
.contain-to-grid .top-bar {
-webkit-box-shadow: 0 2px 8px 0 rgba(50, 50, 50, 0.08);
box-shadow: 0 2px 8px 0 rgba(50, 50, 50, 0.08);
background: #fff;
max-width: 100%; }
.top-bar-section ul li > a {
font-family: "Overpass";
font-size: 16px;
text-transform: none;
letter-spacing: -0.5px; }
.top-bar-section li:not(.has-form).has-dropdown .dropdown a:not(.button) {
line-height: 45px;
font-family: "Overpass";
text-transform: none; }
/* member */
.member {
text-align: center;
width: 220px;
margin: 0 auto 30px;
position: relative; }
.member img, .hire {
width: 220px;
height: 220px;
display: block;
margin-bottom: 30px; }
.member img.colored {
display: block;
position: absolute;
top: 0;
transition: transform 1s ease-in-out; }
.member img.colored:hover {
transform: scale(1.1);
display: block; }
.member h4 {
margin-bottom: 4px; }
.member p.position {
margin-bottom: 10px;
font-size: 16px; }
/*socials*/
ul.socials {
list-style: none;
margin: 0; }
ul.socials li {
display: inline-block;
padding: 0 5px; }
ul.socials li a {
color: #333; }
ul.socials li a:hover {
color: #3399d4; }
/* testimonials */
.quote {
margin-bottom: 40px;
padding: 40px 40px 20px 20px;
border: 1px solid #eee;
text-align: right;
overflow-x: hidden;
width: 100%; }
.quote.reverse {
text-align: left;
padding: 40px 20px 20px 40px; }
.author {
color: #3399d4;
font-size: 14px; }
/* contact */
.contact-details {
text-align: center;
margin-bottom: 40px; }
.contact-details h3 {
line-height: 30px; }
.contact-details i {
font-size: 40px;
line-height: 30px;
display: block;
margin-bottom: 30px;
color: #3399d4; }
/* Icon-text and service */
.services {
border: 1px solid #f0f0f0;
border-right: none;
border-bottom: none;
overflow: hidden; }
.services .columns {
padding: 0; }
.icon-text {
padding: 30px 50px 0px 50px;
background: none;
color: #333;
text-align: center;
display: block;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
-webkit-transition-property: background;
-moz-transition-property: background;
transition-property: background;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s; }
.icon-text i {
color: #3399D4;
font-size: 60px;
padding: 0px 0px 20px 0px; }
.icon-text::after {
content: "";
width: calc(100% - 30px);
height: calc(100% - 30px);
position: absolute;
top: 15px;
left: 15px;
opacity: 0;
border: 1px solid #3399D4;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 0; }
.icon-text:hover::after {
opacity: 1; }
.service-info {
padding-top: 40px; }
.service-info.right-text {
text-align: right; }
/* gallery */
.gallery-right-section {
margin-top: 50px; }
.work-wrapper {
text-align: center; }
.work {
display: inline-block;
margin: 0 auto 100px;
margin-bottom: 80px;
text-align: center; }
.work img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s; }
.work.space {
display: inline-block;
margin: 0 auto 100px;
margin-bottom: 0px;
padding: 50px 50px 0px 50px;
text-align: center; }
.work img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s; }
.work .info {
margin-top: 40px;
margin-left: 50px;
text-align: left;
max-width: 350px;
-webkit-transform: translateY(-25px);
-moz-transform: translateY(-25px);
-ms-transform: translateY(-25px);
-o-transform: translateY(-25px);
transform: translateY(-25px);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s; }
.work .info h3 {
margin-bottom: 5px; }
.work .info p {
color: #999; }
.work .info p::before {
content: "";
width: 35px;
height: 1px;
background: #999;
display: inline-block;
position: relative;
top: -5px;
margin-right: 12px; }
.work .info.center {
margin-top: 25px;
margin-left: 0px;
text-align: center;
max-width: 350px;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s; }
.work .info h3 {
margin-bottom: 5px; }
.work .info p {
color: #999; }
.work .info p::before {
content: "";
width: 35px;
height: 1px;
background: #999;
display: inline-block;
position: relative;
top: -5px;
margin-right: 12px; }
.work:hover img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05); }
.work:hover .info {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px); }
.work.alt {
display: block;
overflow: hidden;
position: relative;
margin-bottom: 40px; }
.work.alt .info {
background: #fff;
position: absolute;
bottom: 35px;
padding: 30px 30px 20px;
margin-left: 0;
width: 80%; }
.work.alt .info img {
opacity: 1; }
.work.alt .info h3 {
margin-bottom: 10px; }
.work.alt .info p::before {
display: none; }
.work.alt .info a i {
vertical-align: text-top;
line-height: 1.1em;
font-size: 30px; }
.work.alt:hover .info {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.work.alt:hover img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 0.7; }
.related-works .work {
display: block; }
.gallery-categories a {
color: #333;
text-decoration: underline; }
.gallery-categories a:hover {
color: #FF5959; }
nav.wrapper {
float: none;
position: relative;
list-style: none;
margin: 0; }
nav.wrapper li {
display: inline-block; }
nav.wrapper a {
width: 260px;
padding: 20px; }
nav.wrapper a.previous {
float: right;
margin-top: 15px; }
nav.wrapper a.next {
float: left;
margin-top: 15px; }
/* post */
.sticky.post.fixed {
position: relative; }
.sticky.post h2 a, .sticky.post h3 a {
color: #AB8860; }
.post .two-images img {
width: 49%; }
.post, .recent-post {
color: #343a40;
border-bottom: 1px solid #eee;
margin-bottom: 50px;
padding: 0 5px 20px;
text-align: left; }
.post a.home {
height: 244px;
overflow: hidden;
display: block;
}
.post img, .recent-post img {
opacity: 1;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s; }
.post h2, .post h3, .post h4, .recent-post h2, .recent-post h3, .recent-post h4 {
margin-bottom: 10px;
line-height: 1.3; }
.post h2 a, .post h3 a, .post h4 a, .recent-post h2 a, .recent-post h3 a, .recent-post h4 a {
color: #333; }
.post h2 a:hover, .post h3 a:hover, .post h4 a:hover, .recent-post h2 a:hover, .recent-post h3 a:hover, .recent-post h4 a:hover {
color: #3399D4; }
.post p.info, .recent-post p.info {
font-size: 14px;
margin-bottom: 30px; }
.post p.info a, .recent-post p.info a {
color: #3399D4; }
.post p.info a:hover, .recent-post p.info a:hover {
color: #666; }
.post .button:hover, .recent-post .button:hover {
opacity: 1; }
.post a.button.red, .recent-post a.button.red {
color: #FF8635;
border: 1px solid #FF8635;
background: none; }
.post p.info span {
font-size: 14px;
background-color: #3399D4;
color: white;
padding: 8px; }
.post-content p {
font-size: 18px; }
.recent-post {
margin-bottom: 0;
border: none; }
.recent-post p.info {
font-size: 14px;
margin-bottom: 30px; }
.recent-post p.info a {
color: #666; }
.recent-post p.info a:hover {
color: #AB8860; }
.project-intro h4 {
margin-bottom: 5px;
font-weight: 700; }
.post.alt {
border: none;
padding: 0 40px; }
.post.alt .post-content {
padding: 20px 40px; }
post.alt .post-content.blog {
padding: 0px; }
.post.single {
border: none;
padding: 0; }
.post.single .post-header {
min-height: 45vh;
background-image: url(../images/@stock/post-big.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin-top: -100px;
position: relative; }
.post.single blockquote {
padding: 20px 30px;
font-style: italic;
border-left: none;
color: #333;
font-size: 24px; }
.post.single ul {
padding-left: 40px; }
.post.single .tags {
border-top: 1px solid #eee;
color: #333;
padding-top: 20px;
margin-top: 60px;
margin-bottom: 40px; }
.post.single .tags span {
float: left;
margin-right: 5px; }
.post.single .tags ul {
list-style: none;
margin: 0;
padding: 0; }
.post.single .tags ul li {
display: inline;
padding: 0; }
.default-post {
margin-bottom: 60px; }
.load-more {
font-size: 24px; }
.pagination {
padding: 0 20px; }
.pagination a {
font-size: 18px; }
.pagination .nav {
list-style: none;
margin: 0; }
.pagination .nav .previous {
float: left; }
.pagination .nav .next {
float: right; }
/* post comments */
.comments-wrapper ul.comments {
margin-left: 0; }
.comments-wrapper ul.comments li {
border-bottom: 1px solid #eee;
padding: 20px 0 0;
list-style: none; }
.comments-wrapper ul.comments .meta .avatar {
float: left;
padding: 5px 10px 0 0; }
.comments-wrapper ul.comments .meta .name {
display: block; }
.comments-wrapper ul.comments .meta .datetime {
font-size: 0.875rem;
color: #999; }
.comments-wrapper ul.comments ul.children li {
border-bottom: none;
border-top: 1px solid #eee; }
/* slide */
.slide-info {
position: absolute;
width: 30%;
top: 20%;
z-index: 2;
left: 11%;
}
.slide-info h1 {
text-transform: uppercase;
line-height: 1.2em;
font-family: "Overpass";
font-size: 48px;
font-weight: 300;
color: #fff;
letter-spacing: 1px;
opacity: 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all; }
.slide-info h1 span {
font-style: normal;
font-weight: 700; }
.slide-info p {
color: #fff;
letter-spacing: 1px;
font-size: 1.2rem;
font-weight: 300;
opacity: 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all; }
.slide-info .image-wrapper {
background-repeat: no-repeat;
backbround-position: left top;
background-size: contain;
width: 100%;
height: 460px;
margin-bottom: 30px;
opacity: 0;
-webkit-transform: translateX(-150px);
-moz-transform: translateX(-150px);
-ms-transform: translateX(-150px);
-o-transform: translateX(-150px);
transform: translateX(-150px);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all; }
.slide-info .button {
opacity: 0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all; }
.slide.active .slide-info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.slide.active .slide-info .image-wrapper {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0); }
.slide.active .slide-info h1, .slide.active .slide-info p {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.slide.active .slide-info .button {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.slide-right {
width: 50%;
height: 100vh;
position: relative;
left: 50%;
-webkit-animation: slide 0.3s ease-in-out;
-moz-animation: slide 0.3s ease-in-out;
animation: slide 0.3s ease-in-out; }
.slide-right img {
max-width: 100%;
height: 100%; }
.slide-right-bg-1 {
background: url(../images/@stock/half-1.jpg) center center no-repeat;
background-size: cover; }
.slide-right-bg-3 {
background: url(../images/@stock/half-3.jpg) center center no-repeat;
background-size: cover; }
.slide-right-bg-4 {
background: url(../images/@stock/half-4.jpg) center center no-repeat;
background-size: cover; }
.slide-right-bg-5 {
background: url(../images/@stock/half-5.jpg) center center no-repeat;
background-size: cover; }
.slide-left {
width: 50%;
height: 100vh;
position: absolute;
right: 50%; }
.slide-left-bg-1 {
background: #F7C162; }
.slide-left-bg-3 {
background: #c9c9c9; }
.slide-left-bg-4 {
background: #f6c418; }
.slide-left-bg-5 {
background: #E4A48B; }
.slides-navigation a {
color: #fff;
font-size: 36px;
padding: 20px;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
.slides-navigation a.prev:hover {
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px); }
.slides-navigation a.next:hover {
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px); }
.slides-pagination {
text-align: right;
width: 46%; }
.slides-pagination a {
text-indent: 100%; }
.fullwidth {
height: 70vh !important; }
.fullwidth .slide-info {
text-align: center;
top: 33%; }
.fullwidth .slide-info h1 {
color: #fff;
font-size: 60px;
margin-bottom: 20px; }
.fullwidth .slide-info p {
color: #fff;
font-size: 22px; }
.fullwidth .slide-info .button {
margin-top: 50px; }
.fullwidth .slides-pagination {
margin-left: 0;
text-align: center; }
.fullscreen {
height: 100vh; }
.fullscreen .slide-info {
text-align: center;
top: 25%;
left: 0;
width: 100%; }
.fullscreen .slide-info h1 {
color: #fff;
letter-spacing: 4px;
margin-bottom: 20px; }
.fullscreen .slide-info p {
color: #fff;
font-size: 22px; }
.fullscreen .slide-info .button {
margin-top: 50px; }
.fullscreen .slides-pagination {
margin-left: 0;
text-align: center;
width: 100%; }
.fullscreen h1 {
text-transform: none;
line-height: 1.1em;
margin-bottom: 35px;
opacity: 0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all; }
.fullscreen .image-wrapper {
height: 100px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 100%;
margin-bottom: 0px;
opacity: 0;
-webkit-transform: translateY(-150px);
-moz-transform: translateY(-150px);
-ms-transform: translateY(-150px);
-o-transform: translateY(-150px);
transform: translateY(-150px);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all; }
.fullscreen .welcome {
/*background-image: url(../images/@stock/welcome.png); */ }
.fullscreen .happy {
background-image: url(../images/@stock/happy.png); }
.fullscreen .arrows {
/*background-image: url(../images/@stock/arrows.png);*/
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transform: Rotate(180deg);
-moz-transform: Rotate(180deg);
-ms-transform: Rotate(180deg);
-o-transform: Rotate(180deg);
transform: Rotate(180deg); }
.fullscreen .diamond {
/*background-image: url(../images/@stock/diamond-white.png);*/ }
.fullscreen .slide.active .slide-info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.fullscreen .slide.active .slide-info .image-wrapper {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.fullscreen .slide.active .slide-info h1, .fullscreen .slide.active .slide-info p {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.slides .slick-dots {
margin: 0;
bottom: 20px !important; }
.slides .slick-dots li button:before {
font-size: 40px !important;
color: #fff; }
.slides li button:before {
font-size: 40px !important; }
.slick-slider {
margin-bottom: 0; }
.slides.half-width img {
width: 100%; }
.slides.boxed {
height: 60vh;
margin-top: 100px; }
.slides.boxed .slick-slide {
height: 60vh;
position: relative; }
.slides.boxed .slide-info {
top: 30%;
text-align: center; }
.slides.boxed .slide-info h1 {
font-size: 48px; }
.slides.boxed .slide-info a {
color: #fff; }
.slides.boxed .slide-info a:hover {
color: #AB8860; }
.slides.boxed .slide-info p {
color: #fff; }
.slides.boxed h1 {
opacity: 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all; }
.slides.boxed p {
opacity: 0;
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-ms-transform: translateY(-100px);
-o-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all; }
.slides.boxed .button {
opacity: 0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: all;
-moz-transition-property: all;
transition-property: all; }
.slides.boxed .slick-active .slide-info {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.slides.boxed .slick-active .slide-info h1, .slides.boxed .slick-active .slide-info p {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.slides.boxed .slick-active .slide-info .button {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
/* form */
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
padding: 15px;
height: 3rem;
margin-bottom: 1.875rem; }
form input[type="text"], form input[type="password"], form input[type="date"], form input[type="datetime"], form input[type="datetime-local"], form input[type="month"], form input[type="week"], form input[type="email"], form input[type="number"], form input[type="search"], form input[type="tel"], form input[type="time"], form input[type="url"], form textarea {
background: none;
border: 1px solid #ccc;
box-shadow: none;
color: #333; }
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus {
background: none;
border: 1px solid #3399d4; }
form.dark input[type="text"], form.dark input[type="password"], form.dark input[type="date"], form.dark input[type="datetime"], form.dark input[type="datetime-local"], form.dark input[type="month"], form.dark input[type="week"], form.dark input[type="email"], form.dark input[type="number"], form.dark input[type="search"], form.dark input[type="tel"], form.dark input[type="time"], form.dark input[type="url"], form.dark textarea {
background: none;
border: 1px solid #ccc;
color: #333; }
form.dark input[type="text"]:focus, form.dark input[type="password"]:focus, form.dark input[type="date"]:focus, form.dark input[type="datetime"]:focus, form.dark input[type="datetime-local"]:focus, form.dark input[type="month"]:focus, form.dark input[type="week"]:focus, form.dark input[type="email"]:focus, form.dark input[type="number"]:focus, form.dark input[type="search"]:focus, form.dark input[type="tel"]:focus, form.dark input[type="time"]:focus, form.dark input[type="url"]:focus, form.dark input[type="color"]:focus, form.dark textarea:focus {
background: none;
border: 1px solid #999; }
form textarea {
height: 200px; }
form.update-form input {
float: left; }
form.update-form input.update-field {
width: calc(100% - 120px);
height: 60px;
border: 1px solid #fff;
color: #fff;
font-size: 18px; }
form.update-form input.update-field:focus {
border: 1px solid #fff; }
form.update-form input.button {
width: 120px;
height: 60px;
margin-left: -1px; }
form.update-form input.button:hover {
background: #fff; }
/* footer */
.footer {
color: #fff; }
.footer p {
font-size: 14px;
margin-bottom: 5px; }
.footer ul {
list-style: none;
margin: 0; }
.footer a {
color: #ffc176; }
.footer a:hover {
color: #eee; }
.footer .socials {
margin-bottom: 30px; }
.footer .socials i {
font-size: 20px; }
.footer .socials a {
color: #fff; }
.footer .socials a:hover {
color: #ffc176; }
.footer .back-to-top i {
display: block;
margin-bottom: 5px; }
.footer .back-to-top a {
color: #fff;
text-transform: none; }
.footer .back-to-top a:hover {
color: #eee; }
/* fullscreen video */
.video-bg {
position: relative;
width: 100vw;
height: 100vh; }
.touch-video-image {
position: absolute;
width: 100%;
height: 100%;
display: none;
background-size: cover; }
#fullscreen-video {
position: relative;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto; }
/* milestone */
.milestone .number {
display: block;
font-size: 72px;
font-weight: 300;
line-height: 1em;
font-style: italic;
margin-bottom: 10px; }
.milestone span {
color: #888; }
.milestone i {
font-size: 44px;
height: 50px;
display: block;
margin-bottom: 30px; }
.milestone::before {
content: "";
display: block;
position: absolute;
top: -40px;
left: 0;
width: 1px;
height: 200px;
background: #ddd;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg); }
.milestone.first::before {
display: none; }
/* principles */
.principle {
margin-bottom: 40px; }
.principle i {
font-size: 48px;
margin-bottom: 10px;
display: block;
color: #AB8860; }
/* Bargraph */
.modBarGraph .bars {
margin: 0;
list-style: none;
padding: 0 40px 0 20px; }
.modBarGraph .bars h4 {
font-weight: normal;
text-transform: capitalize;
font-family: "Overpass";
margin-bottom: 10px;
letter-spacing: 1px; }
.modBarGraph .bars p.highlighted {
width: 0;
background: #AB8860;
height: 6px;
margin-bottom: 30px; }
/* Process */
.process {
margin-bottom: 30px; }
.process span {
color: #3399D4; }
/* Sidebar */
.sidebar {
color: #666;
padding-left: 20px; }
.sidebar h4 {
margin-bottom: 30px; }
.sidebar .latest-news .latest-post {
overflow: auto;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee; }
.sidebar .latest-news .latest-post img {
float: left;
width: 120px;
margin-right: 20px; }
.sidebar .latest-news .latest-post h5 {
margin-bottom: 5px; }
.sidebar .latest-news .latest-post h5 a {
color: #333; }
.sidebar .latest-news .latest-post h5 a:hover {
color: #AB8860; }
.sidebar .latest-news .latest-post p {
color: #999;
font-size: 14px; }
.sidebar .instagram {
overflow: auto; }
.sidebar .instagram img {
float: left;
width: 49%;
margin-right: 1%;
margin-bottom: 1%; }
.sidebar .tags {
margin-top: 20px; }
.sidebar .tags a {
font-size: 14px;
border: 1px solid #ccc;
float: left;
margin-right: 5px;
margin-bottom: 5px;
padding: 5px 10px;
font-style: italic; }
.sidebar .tags a:hover {
border: 1px solid #AB8860; }
/*Pager */
.pager {
width: 97%;
overflow: auto;
padding: 0px 50px 0px 50px;
}
.pager a {
color: #999;
}
.pager a:hover {
color: #3399D4;
}
.pager .older {
float: right;
}
.pager .newer {
float: left;
}
p.blogauthor {
font-size: 16px;
color: #999;
margin-top: -12px; }
.tags {
margin-top: 1rem;
margin-bottom: 1rem;
}
.tags a {
font-size: .75rem;
color: white;
display: inline-block;
border: 1px solid #888;
background-color: #888;
padding: .25rem .625rem;
margin-right: .125rem;
margin-bottom: .5rem;
text-decoration: none;
}
.tags a:hover {
color: #888;
background: transparent;
border: 1px solid #888;
}
.tag-title {
font-family: 'Overpass',sans-serif;
font-style: normal;
font-size: 2.25rem;
margin-top: 0.75rem;
*zoom: 1;
width: auto;
max-width: 50rem;
float: none;
display: block;
margin-right: auto;
margin-left: auto;
padding-left: 0;
padding-right: 0;
}
.full.tags {
*zoom: 1;
width: auto;
max-width: 50rem;
float: none;
display: block;
margin-right: auto;
margin-left: auto;
padding-left: 0;
padding-right: 0;
padding: 0 1.25rem;
margin: 0 auto 1.875rem;
font-family: 'Overpass',sans-serif;
font-style: normal;
font-size: 1.125rem;
line-height: 2;
letter-spacing: .01rem;
}
.post-list-tags a {
display: block;
border-bottom: 1px solid #dadada;
padding: .625rem 0;
text-decoration: none;
transition: all .5s;
}
.post-list-tags a:hover {
color: #144866;
}
.post-list-tags {
*zoom: 1;
width: auto;
max-width: 50rem;
float: none;
display: block;
margin-right: auto;
margin-left: auto;
padding-left: 0;
padding-right: 0;
margin: 0 auto 1.875rem;
list-style: none;
font-family: 'Overpass',sans-serif;
font-style: normal;
font-size: 1.125rem;
line-height: 2;
letter-spacing: .01rem;
}
.post-list-tags .entry-date {
float: right;
}
#post-month {
background-color: #3399D4;
padding: 8px;
color: white;
}
#page-title {
text-transform: none;
}
#blog-title a {
color: #343a40;
text-transform: none;
}
#blog-title a:hover {
color: #3399D4;
}
/*Cookie Consent Begin*/
#cookieConsent {
background-color: rgba(20,20,20,0.8);
min-height: 26px;
font-size: 12px;
color: #ccc;
line-height: 26px;
padding: 8px 0 8px 30px;
font-family: !inherit;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
z-index: 9999;
}
#cookieConsent a {
color: #3399D4;
text-decoration: none;
}
#closeCookieConsent {
float: right;
display: inline-block;
cursor: pointer;
height: 20px;
width: 20px;
font-weight: bold;
}
#closeCookieConsent:hover {
color: #FFF;
}
#cookieConsent a.cookieConsentOK {
background-color: #F1D600;
color: #000;
display: inline-block;
border-radius: 5px;
padding: 0 10px;
cursor: pointer;
float: right;
margin: 0 10px 0 5px;
}
#cookieConsent a.cookieConsentOK:hover {
background-color: #E0C91F;
}
/*Cookie Consent End*/