@media screen and (max-width: 991px) {
.navbar-collapse {
position: fixed;
display: block;
top: 0;
height: 100vh !important;
width: 300px;
right: 0;
z-index: 1032;
visibility: visible;
background-color: #999;
overflow-y: visible;
border-top: none;
text-align: left;
max-height: none !important;
-webkit-transform: translate3d(300px, 0, 0);
-moz-transform: translate3d(300px, 0, 0);
-o-transform: translate3d(300px, 0, 0);
-ms-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
-webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); }
.nav-open .navbar-collapse {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate3d(0px, 0, 0);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0); }
.navbar-collapse:before {
background: #f96332;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#f96332 0%, #000 80%);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#f96332 0%, #000 80%);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#f96332 0%, #000 80%);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#f96332 0%, #000 80%);
/* Standard syntax (must be last) */
opacity: 0.76;
filter: alpha(opacity=76);
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1; }
.navbar-collapse .navbar-nav:not(.navbar-logo) .nav-link {
margin: 0 1rem;
color: #FFFFFF; }
.menu-on-left .navbar-collapse {
right: auto;
left: 0;
-webkit-transform: translate3d(-300px, 0, 0);
-moz-transform: translate3d(-300px, 0, 0);
-o-transform: translate3d(-300px, 0, 0);
-ms-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); }
.profile-photo .profile-photo-small {
margin-left: -2px; }
[class*="navbar-toggleable-"] .navbar-collapse {
width: 300px; }
.button-dropdown {
display: none; }
.navbar .navbar-brand {
padding-top: .5rem;
padding-bottom: .5rem; }
.navbar .navbar-nav {
margin-top: 53px; }
.navbar .navbar-nav .nav-link {
padding-top: 0.75rem;
padding-bottom: .75rem; }
.navbar .navbar-nav.navbar-logo {
top: 0;
height: 53px; }
.navbar .dropdown.show .dropdown-menu, .navbar .dropdown .dropdown-menu {
background-color: transparent;
border: 0;
transition: none;
-webkit-box-shadow: none;
box-shadow: none;
width: auto;
margin: 0 1rem;
margin-top: -18px; }
.navbar .dropdown.show .dropdown-menu:before, .navbar .dropdown .dropdown-menu:before {
display: none; }
.navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-item:hover {
color: #FFFFFF; }
.navbar .navbar-translate {
width: 100%;
position: relative;
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate3d(0px, 0, 0);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
-webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); }
.navbar .navbar-toggler-bar {
display: block;
position: relative;
width: 22px;
height: 1px;
border-radius: 1px;
background: #FFFFFF; }
.navbar .navbar-toggler-bar + .navbar-toggler-bar {
margin-top: 7px; }
.navbar .navbar-toggler-bar.bar2 {
width: 17px;
transition: width .2s linear; }
.navbar.bg-white:not(.navbar-transparent) .navbar-toggler-bar {
background: #B8B8B8; }
.navbar .toggled .navbar-toggler-bar {
width: 24px; }
.navbar .toggled .navbar-toggler-bar + .navbar-toggler-bar {
margin-top: 5px; }
.wrapper {
-webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); }
.menu-on-left .navbar-brand {
float: right;
margin-right: 0;
margin-left: 1rem; }
.nav-open .wrapper {
-webkit-transform: translate3d(-150px, 0, 0);
-moz-transform: translate3d(-150px, 0, 0);
-o-transform: translate3d(-150px, 0, 0);
-ms-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0); }
.nav-open .navbar-translate {
-webkit-transform: translate3d(-300px, 0, 0);
-moz-transform: translate3d(-300px, 0, 0);
-o-transform: translate3d(-300px, 0, 0);
-ms-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0); }
.nav-open .menu-on-left .navbar-collapse {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate3d(0px, 0, 0);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0); }
.nav-open .menu-on-left .navbar-translate {
-webkit-transform: translate3d(300px, 0, 0);
-moz-transform: translate3d(300px, 0, 0);
-o-transform: translate3d(300px, 0, 0);
-ms-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0); }
.nav-open .menu-on-left .wrapper {
-webkit-transform: translate3d(150px, 0, 0);
-moz-transform: translate3d(150px, 0, 0);
-o-transform: translate3d(150px, 0, 0);
-ms-transform: translate3d(150px, 0, 0);
transform: translate3d(150px, 0, 0); }
.nav-open .menu-on-left #bodyClick {
right: auto;
left: 300px; }
.bar1, .bar2, .bar3 {
outline: 1px solid transparent; }
.bar1 {
top: 0px;
-webkit-animation: topbar-back 500ms linear 0s;
-moz-animation: topbar-back 500ms linear 0s;
animation: topbar-back 500ms 0s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.bar2 {
opacity: 1; }
.bar3 {
bottom: 0px;
-webkit-animation: bottombar-back 500ms linear 0s;
-moz-animation: bottombar-back 500ms linear 0s;
animation: bottombar-back 500ms 0s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.toggled .bar1 {
top: 6px;
-webkit-animation: topbar-x 500ms linear 0s;
-moz-animation: topbar-x 500ms linear 0s;
animation: topbar-x 500ms 0s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.toggled .bar2 {
opacity: 0; }
.toggled .bar3 {
bottom: 6px;
-webkit-animation: bottombar-x 500ms linear 0s;
-moz-animation: bottombar-x 500ms linear 0s;
animation: bottombar-x 500ms 0s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;}
@keyframes topbar-x {
0% {
top: 0px;
transform: rotate(0deg); }
45% {
top: 6px;
transform: rotate(145deg); }
75% {
transform: rotate(130deg); }
100% {
transform: rotate(135deg); } }
@-webkit-keyframes topbar-x {
0% {
top: 0px;
-webkit-transform: rotate(0deg); }
45% {
top: 6px;
-webkit-transform: rotate(145deg); }
75% {
-webkit-transform: rotate(130deg); }
100% {
-webkit-transform: rotate(135deg); } }
@-moz-keyframes topbar-x {
0% {
top: 0px;
-moz-transform: rotate(0deg); }
45% {
top: 6px;
-moz-transform: rotate(145deg); }
75% {
-moz-transform: rotate(130deg); }
100% {
-moz-transform: rotate(135deg); } }
@keyframes topbar-back {
0% {
top: 6px;
transform: rotate(135deg); }
45% {
transform: rotate(-10deg); }
75% {
transform: rotate(5deg); }
100% {
top: 0px;
transform: rotate(0); } }
@-webkit-keyframes topbar-back {
0% {
top: 6px;
-webkit-transform: rotate(135deg); }
45% {
-webkit-transform: rotate(-10deg); }
75% {
-webkit-transform: rotate(5deg); }
100% {
top: 0px;
-webkit-transform: rotate(0); } }
@-moz-keyframes topbar-back {
0% {
top: 6px;
-moz-transform: rotate(135deg); }
45% {
-moz-transform: rotate(-10deg); }
75% {
-moz-transform: rotate(5deg); }
100% {
top: 0px;
-moz-transform: rotate(0); } }
@keyframes bottombar-x {
0% {
bottom: 0px;
transform: rotate(0deg); }
45% {
bottom: 6px;
transform: rotate(-145deg); }
75% {
transform: rotate(-130deg); }
100% {
transform: rotate(-135deg); } }
@-webkit-keyframes bottombar-x {
0% {
bottom: 0px;
-webkit-transform: rotate(0deg); }
45% {
bottom: 6px;
-webkit-transform: rotate(-145deg); }
75% {
-webkit-transform: rotate(-130deg); }
100% {
-webkit-transform: rotate(-135deg); } }
@-moz-keyframes bottombar-x {
0% {
bottom: 0px;
-moz-transform: rotate(0deg); }
45% {
bottom: 6px;
-moz-transform: rotate(-145deg); }
75% {
-moz-transform: rotate(-130deg); }
100% {
-moz-transform: rotate(-135deg); } }
@keyframes bottombar-back {
0% {
bottom: 6px;
transform: rotate(-135deg); }
45% {
transform: rotate(10deg); }
75% {
transform: rotate(-5deg); }
100% {
bottom: 0px;
transform: rotate(0); } }
@-webkit-keyframes bottombar-back {
0% {
bottom: 6px;
-webkit-transform: rotate(-135deg); }
45% {
-webkit-transform: rotate(10deg); }
75% {
-webkit-transform: rotate(-5deg); }
100% {
bottom: 0px;
-webkit-transform: rotate(0); } }
@-moz-keyframes bottombar-back {
0% {
bottom: 6px;
-moz-transform: rotate(-135deg); }
45% {
-moz-transform: rotate(10deg); }
75% {
-moz-transform: rotate(-5deg); }
100% {
bottom: 0px;
-moz-transform: rotate(0); } }
@-webkit-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@-moz-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#bodyClick {
height: 100%;
width: 100%;
position: fixed;
opacity: 1;
top: 0;
left: auto;
right: 300px;
content: "";
z-index: 9999;
overflow-x: hidden;
background-color: transparent;
-webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); }
.section-nucleo-icons .container .row > [class*="col-"]:first-child {
text-align: center; }
.footer .copyright {
text-align: right; }
.section-nucleo-icons .icons-container {
margin-top: 65px; }
.navbar-nav .nav-link i.fa, .navbar-nav .nav-link i.now-ui-icons {
opacity: .5; }
.section-images {
height: 500px;
max-height: 500px; }
.section-images .hero-images-container {
max-width: 500px; }
.section-images .hero-images-container-1 {
right: 10%;
top: 68%;
max-width: 269px; }
.section-images .hero-images-container-2 {
right: 5%;
max-width: 135px;
top: 93%; } }