/*--------------------------------------------------------------
Common
--------------------------------------------------------------*/
html {
overflow-y: scroll;
/* overflow-x: hidden; /* <-- REMOVE OR COMMENT THIS LINE OUT */
-ms-overflow-style: scrollbar;
}
body {
background: #c4cfd7;
font: 400 12px/1.8 "Open Sans", sans-serif;
color: #666;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
min-height: 100vh; /* Minimum height of the viewport */
margin: 0;
padding: 0; /* Add this for safety */
}
/* Allow the main content wrapper to grow and push the footer down */
.content-wrapper {
flex-grow: 1;
/* The mt-9rem on this div will already push it down from the top nav */
}
/* Style the footer to be centered */
footer {
text-align: center;
padding: 20px 0; /* Add some vertical padding to the footer */
/* Optional: Add a background color to distinguish the footer */
/* background-color: #f8f8f8; */
/* border-top: 1px solid #e7e7e7; */
width: 100%; /* Ensure footer spans full width */
}
img {
max-width: 100%;
height: auto;
}
iframe {
border: 0;
}
.align-center {
text-align: center;
}
.align-left {
text-align: left !important;
}
.position-relative {
position: relative;
}
.leftauto {
right: 0 !important;
left: auto !important;
}
/* Transition elsements */
a, .btn {
transition: all 0.125s ease-in-out 0s;
}
.client-logo, .gallery-caption, .gallery-image:after, .gallery-image img,
.price-table, .team-detail, .team-image:after, .work-caption,
.work-image>img, .work-image:after, .post-thumbnail, .post-video,
.post-images-slider {
transition: all 0.3s ease-in-out 0s;
}
/* Reset box-shadow */
.btn, .well, .panel, .progress, .form-control, .form-control:hover,
.form-control:focus, .navbar-custom .dropdown-menu {
box-shadow: none;
}
/* Reset border-radius */
.well, .label, .alert, .progress, .form-control, .modal-content,
.panel-heading, .panel-group .panel, .nav-tabs>li>a, .nav-pills>li>a {
border-radius: 2px;
}
.pr-remove {
/*vertical-align: middle !important;*/
text-align: center;
}
.examples {
border-radius: 2px;
padding: 7px 5px;
margin: 0 0 40px;
}
.examples.bg-dark {
background: #333;
border: 0;
}
.et-icons .box1 {
border: 1px solid #e5e5e5;
display: block;
width: 25%;
float: left;
padding: 0;
font-size: 13px;
margin: -1px 0 0 -1px;
}
.et-icons .box1>span {
display: inline-block;
border-right: 1px solid #e5e5e5;
min-width: 60px;
min-height: 60px;
text-align: center;
line-height: 60px;
font-size: 28px;
margin-right: 5px;
}
.fa-icons>div {
padding: 0;
border: 1px solid #e5e5e5;
margin: -1px 0 0 -1px;
font-size: 13px;
}
.fa-icons>div>i {
display: inline-block;
margin-right: 5px;
min-width: 40px;
min-height: 40px;
border-right: 1px solid #f1f1f1;
line-height: 40px;
text-align: center;
font-size: 14px;
}
.help-block ul {
list-style: none;
padding: 0;
margin: 0;
}
/* Sections */
.navbar-custom+.main {
margin-top: 50px;
}
.main {
position: relative;
background-color: #fff;
z-index: 1;
}
.module, .module-small {
position: relative;
padding: 140px 0;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
/* Module header */
.module-small {
padding: 70px 0;
}
.module-extra-small {
padding: 25px 0px;
}
.module-medium {
padding: 75px 0px;
}
.holder-w {
position: relative;
display: table-cell;
vertical-align: middle;
height: 1px;
width: 50%;
}
.holder-w:before {
border-top: 1px solid #eaeaea;
position: relative;
display: block;
content: "";
top: 1px;
height: 1px;
width: 100%;
}
/* Sections dividers */
.divider-w {
border-top: 1px solid #eaeaea;
margin: 0;
}
.divider-d {
border-top: 1px solid #202020;
margin: 0;
}
/* Half-image */
.side-image {
position: absolute;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
.side-image-text {
background: #fff;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
padding: 140px 60px 140px;
}
/* Dark background */
.bg-dark, .bg-dark-30, .bg-dark-60, .bg-dark-90, .bg-dark .module-title,
.bg-dark-30 .module-title, .bg-dark-60 .module-title, .bg-dark-90 .module-title,
.bg-dark .module-subtitle, .bg-dark-30 .module-subtitle, .bg-dark-60 .module-subtitle,
.bg-dark-90 .module-subtitle, .bg-dark .alt-module-subtitle h5,
.bg-dark-30 .alt-module-subtitle h5, .bg-dark-60 .alt-module-subtitle h5,
.bg-dark-90 .alt-module-subtitle h5 {
color: #fff;
}
.bg-dark {
background: #111;
}
.bg-dark-30:before {
position: absolute;
background: rgba(2, 2, 2, 0.4);
content: " ";
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.bg-dark-60:before {
position: absolute;
background: rgba(34, 34, 34, 0.8);
content: " ";
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.bg-dark-90:before {
position: absolute;
background: rgba(34, 34, 34, 0.9);
content: " ";
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.bg-gradient:before {
position: absolute;
background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjk1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* FF3.6+ */
/* Chrome,Safari4+ */
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background: linear-gradient(to bottom, rgba(40, 115, 113, 0.57) 25%,
rgba(115, 54, 31, 0.67) 75%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff',
endColorstr='#000000', GradientType=0);
/* IE6-8 */
content: " ";
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.bg-light {
background: #f6f6f6;
}
.parallax-bg {
background-attachment: fixed;
background-size: cover;
}
/* Vertical margin, padding */
.p-0 {
padding: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pt-10 {
padding-top: 10px !important;
}
.pt-20 {
padding-top: 20px !important;
}
.pt-30 {
padding-top: 30px !important;
}
.pt-40 {
padding-top: 40px !important;
}
.pt-50 {
padding-top: 50px !important;
}
.pt-140 {
padding-top: 140px !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pb-10 {
padding-bottom: 10px !important;
}
.pb-20 {
padding-bottom: 20px !important;
}
.pb-30 {
padding-bottom: 30px !important;
}
.pb-40 {
padding-bottom: 40px !important;
}
.pb-50 {
padding-bottom: 50px !important;
}
.pb-140 {
padding-bottom: 140px !important;
}
.m-0 {
margin: 0 !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mt-10 {
margin-top: 10px !important;
}
.mt-20 {
margin-top: 20px !important;
}
.mt-30 {
margin-top: 30px !important;
}
.mt-40 {
margin-top: 40px !important;
}
.mt-50 {
margin-top: 50px !important;
}
.mt-60 {
margin-top: 60px !important;
}
.mt-70 {
margin-top: 70px !important;
}
.mt-80 {
margin-top: 80px !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.mb-50 {
margin-bottom: 50px !important;
}
.mb-60 {
margin-bottom: 60px !important;
}
.mb-70 {
margin-bottom: 70px !important;
}
.mb-80 {
margin-bottom: 80px !important;
}
@media only screen and (max-width: 991px) {
.mt-sm-0 {
margin-top: 0 !important;
}
.mt-sm-10 {
margin-top: 10px !important;
}
.mt-sm-20 {
margin-top: 20px !important;
}
.mt-sm-30 {
margin-top: 30px !important;
}
.mt-sm-40 {
margin-top: 40px !important;
}
.mt-sm-50 {
margin-top: 50px !important;
}
.mt-sm-60 {
margin-top: 60px !important;
}
.mt-sm-70 {
margin-top: 70px !important;
}
.mt-sm-80 {
margin-top: 80px !important;
}
.mb-sm-0 {
margin-bottom: 0 !important;
}
.mb-sm-10 {
margin-bottom: 10px !important;
}
.mb-sm-20 {
margin-bottom: 20px !important;
}
.mb-sm-30 {
margin-bottom: 30px !important;
}
.mb-sm-40 {
margin-bottom: 40px !important;
}
.mb-sm-50 {
margin-bottom: 50px !important;
}
.mb-sm-60 {
margin-bottom: 60px !important;
}
.mb-sm-70 {
margin-bottom: 70px !important;
}
.mb-sm-80 {
margin-bottom: 80px !important;
}
}
@media only screen and (max-width: 767px) {
.mt-xs-0 {
margin-top: 0 !important;
}
.mt-xs-10 {
margin-top: 10px !important;
}
.mt-xs-20 {
margin-top: 20px !important;
}
.mt-xs-30 {
margin-top: 30px !important;
}
.mt-xs-40 {
margin-top: 40px !important;
}
.mt-xs-50 {
margin-top: 50px !important;
}
.mt-xs-60 {
margin-top: 60px !important;
}
.mt-xs-70 {
margin-top: 70px !important;
}
.mt-xs-80 {
margin-top: 80px !important;
}
.mb-xs-0 {
margin-bottom: 0 !important;
}
.mb-xs-10 {
margin-bottom: 10px !important;
}
.mb-xs-20 {
margin-bottom: 20px !important;
}
.mb-xs-30 {
margin-bottom: 30px !important;
}
.mb-xs-40 {
margin-bottom: 40px !important;
}
.mb-xs-50 {
margin-bottom: 50px !important;
}
.mb-xs-60 {
margin-bottom: 60px !important;
}
.mb-xs-70 {
margin-bottom: 70px !important;
}
.mb-xs-80 {
margin-bottom: 80px !important;
}
}
/* Scroll to top */
.scroll-up {
position: fixed;
display: none;
bottom: 7px;
right: 7px;
z-index: 999;
}
.scroll-up a {
background: #fff;
display: block;
height: 28px;
width: 28px;
text-align: center;
line-height: 28px;
font-size: 14px;
color: #000;
opacity: 0.6;
border-radius: 2px;
}
.scroll-up a:hover, .scroll-up a:active {
opacity: 1;
color: #000;
}
/* Video */
.video-controls-box {
position: absolute !important;
bottom: 40px;
left: 0;
width: 100%;
z-index: 1;
}
.video-controls-box a {
display: inline-block;
color: #fff;
margin: 0 5px 0 0;
}
/* Landing Page */
.landing-reason:before {
position: absolute;
content: " ";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(66, 26, 107, 0.9);
}
.landing-reason {
color: #fff;
font-size: 13px;
}
.landing-image-text {
padding-top: 70px;
padding-bottom: 0px;
}
.landing-image-text h2 {
margin-top: 100px;
margin-bottom: 15px;
}
.landing-screenshot:before {
position: absolute;
content: " ";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(66, 60, 130, 0.5);
}
.alert i {
margin-right: 5px;
}
/*--------------------------------------------------------------
Buttons
--------------------------------------------------------------*/
.btn {
border-radius: 0;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
padding: 8px 37px;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus {
outline: 0;
}
.btn.btn-round {
border-radius: 2px;
}
.btn.btn-circle {
border-radius: 30px;
}
.btn.btn-w {
background: rgba(255, 255, 255, 0.8);
color: #111;
}
.btn.btn-w:hover, .btn.btn-w:focus {
background: white;
color: #111;
}
.btn.btn-g {
background: #e5e5e5;
color: #111;
}
.btn.btn-g:hover, .btn.btn-g:focus {
background: #d8d8d8;
color: #111;
}
.btn.btn-border-w {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.75);
color: #fff;
}
.btn.btn-border-w:hover, .btn.btn-border-w:focus {
background: #fff;
border-color: transparent;
color: #111;
}
.btn.btn-d {
background: rgba(17, 17, 17, 0.8);
color: #fff;
}
.btn.btn-d:hover, .btn.btn-d:focus {
background: #111111;
}
.btn.btn-b {
background: #111111;
color: #fff;
}
.btn.btn-b:hover, .btn.btn-b:focus {
background: rgba(17, 17, 17, 0.8);
}
.btn-border-d {
background: transparent;
border: 1px solid #111111;
color: #111;
}
.btn.btn-border-d:hover, .btn.btn-border-d:focus {
background: #111111;
color: #fff;
}
.btn.btn-font-w {
background: rgba(255, 255, 255, 0.8);
color: #fff;
}
.btn.btn-font-w:hover {
background: #fff;
color: #111;
}
/* Buttons size */
.btn.btn-lg {
padding: 12px 45px;
font-size: 13px;
}
.btn.btn-sm {
padding: 6px 25px;
font-size: 10px;
letter-spacing: 1px;
}
.btn.btn-xs {
padding: 4px 19px;
font-size: 10px;
letter-spacing: 0;
}
.btn-list .btn {
margin: 5px 0;
}
.search-btn {
position: absolute;
background: transparent;
border: none;
overflow: hidden;
top: 50%;
right: 1px;
width: 42px;
height: 40px;
line-height: 38px;
font-size: 14px;
outline: none;
color: #999;
margin-top: -20px;
}
.image-button {
margin: 0px 5px;
}
/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/
/* Selection */
::-moz-selection {
background: #000;
color: #fff;
}
::-webkit-selection {
background: #000;
color: #fff;
}
::selection {
background: #000;
color: #fff;
}
/* Forms common style */
.form-control {
font-family: "Roboto Condensed", sans-serif;
text-transform: none !important;
letter-spacing: 2px;
/* font-size: 11px; */
/* height: 33px; */
border: 1px solid #EAEAEA;
/* border-radius: 2px; */
transition: all 0.4s ease-in-out 0s;
/* width: 300px; */
}
.no-uppercase {
text-transform: none !important;
}
.form-control:focus {
border-color: #CACACA;
}
/* Forms size */
.input-lg, .form-horizontal .form-group-lg .form-control {
height: 43px;
font-size: 13px;
}
.input-sm, .form-horizontal .form-group-sm .form-control {
height: 29px;
font-size: 10px;
}
.rqst-form {
margin-top: 27px;
}
.rqst-form .btn {
margin-top: 5px;
}
.input-group-addon {
border: 1px solid #e4e4e4 !important;
}
/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
a {
color: #111;
}
a:hover, a:focus {
text-decoration: none;
color: #aaa;
outline: 0;
}
.bg-dark a {
color: #aaa;
}
.bg-dark a:hover, .bg-dark a:focus {
color: #fff;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.4;
font-weight: 400;
}
p, ol, ul, blockquote {
margin: 0 0 20px;
}
blockquote {
border: 0;
font-style: italic;
font-size: 15px;
padding: 0;
}
.font-alt {
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
.font-serif {
font-family: Volkhov, "Times New Roman", sans-serif;
font-style: italic;
}
.large-text {
font-size: 24px !important;
}
.rotate {
text-shadow: none !important;
}
.module-title {
position: relative;
letter-spacing: 4px;
text-align: center;
font-weight: 400;
font-size: 30px;
color: #111;
margin: 0 0 70px;
}
.module-subtitle {
text-align: center;
font-size: 16px;
color: #111;
margin-bottom: 70px;
}
.module-icon {
text-align: center;
font-size: 32px;
margin-bottom: 20px;
}
.module-title+.module-subtitle {
margin-top: -35px;
}
/* Restaurant module header */
.alt-module-subtitle {
display: table;
}
.alt-module-subtitle h5 {
display: table-cell;
white-space: pre;
padding: 0 8px;
color: #111;
}
/* Finance case study header */
.finance-image-content {
border: 1px solid #e5e5e5;
padding: 60px 0px;
}
.finance-image-content .module-title {
margin-bottom: 20px;
}
.finance-image-content .alt-features-item {
margin-top: 40px;
}
/* Landing Page */
.landing-reason .module-title {
color: #e6af4b;
}
.landing-reason .module-title+.module-subtitle {
margin-top: -60px;
margin-bottom: 40px;
}
.free-trial {
background-color: rgba(88, 20, 158, 0.9);
color: #FFFFFF;
}
.free-trial .color-golden {
color: #e6af4b;
}
/* Special Portfolio Page */
.special-portfolio-header-title {
border: 1px solid rgba(255, 255, 255, 0.7);
font-size: 50px;
padding: 40px 0px;
letter-spacing: 8px;
}
/*--------------------------------------------------------------
Slider & Carousel
--------------------------------------------------------------*/
/* -------------------------------------------------------------------
General Styles - FlexSlider
------------------------------------------------------------------- */
.flex-direction-nav a, .flex-control-nav>li>a {
transition: all 0.3s ease-in-out 0s;
}
.flex-direction-nav a {
position: absolute;
display: block;
height: 100%;
width: 50%;
top: 0;
z-index: 10;
overflow: hidden;
opacity: 0;
margin: 0;
}
.flex-direction-nav .flex-prev {
opacity: 0;
left: 0;
cursor: url(../images/prev-light.png), e-resize;
}
.flex-direction-nav .flex-next {
opacity: 0;
right: 0;
cursor: url(../images/next-light.png), e-resize;
}
.flex-control-nav {
position: absolute;
width: auto;
left: 50%;
bottom: 20px;
z-index: 11;
text-align: center;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.flex-control-nav>li {
display: inline-block;
margin: 5px 3px;
}
.flex-control-nav>li>a {
background: transparent;
border: 1px solid #fff;
display: block;
height: 6px;
width: 6px;
border-radius: 6px;
}
.flex-control-nav>li>a:hover, .flex-control-nav>li>a.flex-active {
background: #fff;
}
/* -------------------------------------------------------------------
Hero Slider
------------------------------------------------------------------- */
.hero-slider {
margin: 0 !important;
}
.hero-slider .slides>li {
display: none;
-webkit-backface-visibility: hidden;
}
.hero-slider, .hero-slider .flex-viewport {
height: 100% !important;
width: 100%;
padding: 0;
margin: 0;
}
.hero-slider .slides {
height: 100% !important;
transition-delay: 1s;
}
.hero-slider .flex-direction-nav a {
width: 15%;
}
.hero-slider .slides li {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100% !important;
width: 100%;
padding: 0;
margin: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
/* Caption */
.titan-caption {
position: relative;
display: table;
height: 100%;
width: 70%;
margin: 0 auto;
}
.caption-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
/*
Photography Page Slider
*/
.photography-page .image-caption {
bottom: 20px;
position: absolute;
width: 35%;
}
.photography-page .image-caption .caption-text {
font-size: 24px;
text-transform: capitalize;
letter-spacing: 1px;
}
.photography-page .flex-control-nav {
left: 80%;
bottom: 20px;
z-index: 11;
}
/* -------------------------------------------------------------------
General Styles - Owlcarousel
------------------------------------------------------------------- */
.owl-controls {
margin-top: 40px;
}
.owl-pagination div {
display: inline-block;
}
.owl-controls .owl-page span {
background: transparent;
border: 1px solid #111;
display: block;
height: 6px;
width: 6px;
margin: 0 3px 5px;
border-radius: 6px;
transition: all 0.3s ease-in-out 0s;
}
.owl-controls .owl-page.active span, .owl-controls.clickable .owl-page:hover span
{
background: #111;
}
.owl-controls .owl-buttons>div {
display: inline-block;
margin: 5px;
font-size: 14px;
color: #111;
}
/*--------------------------------------------------------------
Preloader
--------------------------------------------------------------*/
.page-loader {
position: fixed;
background: #000;
bottom: 0;
right: 0;
left: 0;
top: 0;
z-index: 9998;
}
.loader {
position: absolute;
border-left: 2px solid #ffffff;
border-top: 2px solid rgba(255, 255, 255, 0.2);
border-right: 2px solid rgba(255, 255, 255, 0.2);
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
height: 46px;
width: 46px;
left: 50%;
top: 50%;
margin: -23px 0 0 -23px;
text-indent: -9999em;
font-size: 10px;
z-index: 9999;
-webkit-animation: load 0.8s infinite linear;
-moz-animation: load 0.8s infinite linear;
ms-animation: load 0.8s infinite linear;
o-animation: load 0.8s infinite linear;
animation: load 0.8s infinite linear;
}
.loader, .loader:after {
border-radius: 50%;
width: 46px;
height: 46px;
}
@-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
/*--------------------------------------------------------------
Navbar
--------------------------------------------------------------*/
.navbar-custom {
background-color: rgba(10, 10, 10, 0.9);
border: 0;
border-radius: 0;
z-index: 1000;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 11px;
transition: background, padding 0.4s ease-in-out 0s;
}
.navbar a {
transition: color 0.125s ease-in-out 0s;
}
.navbar-custom .dropdown-menu {
background: rgba(26, 26, 26, 0.9);
border-radius: 0;
border: 0;
padding: 0;
box-shadow: none;
}
.navbar-custom .navbar-brand {
letter-spacing: 4px;
font-weight: 400;
font-size: 22px;
color: #fff;
}
.navbar-custom .nav li>a {
position: relative;
color: rgba(255, 255, 255, 0.7);
}
.navbar-custom .dropdown-menu>li>a {
border-bottom: 1px solid rgba(73, 71, 71, 0.15) !important;
padding: 11px 15px;
letter-spacing: 2px;
color: #999;
}
.navbar-custom .dropdown-menu .dropdown-menu {
border-left: 1px solid rgba(73, 71, 71, 0.15);
left: 100%;
right: auto;
top: 0;
margin-top: 0;
}
.navbar-custom .dropdown-menu.left-side .dropdown-menu {
border: 0;
border-right: 1px solid rgba(73, 71, 71, 0.15);
right: 100%;
left: auto;
}
.navbar-custom .nav>li>a:focus, .navbar-custom .nav>li>a:hover,
.navbar-custom .nav .open>a, .navbar-custom .nav .open>a:focus,
.navbar-custom .nav .open>a:hover, .navbar-custom .dropdown-menu>li>a:focus,
.navbar-custom .dropdown-menu>li>a:hover {
background-color: #5f5f5f;
color: #fff;
display: block;
}
.navbar-custom .dropdown-menu>li>a:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.navbar-custom .dropdown-toggle:after {
position: absolute;
display: block;
right: 0;
top: 50%;
margin-top: -6px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 9px;
content: "\f107";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navbar-custom .navbar-toggle .icon-bar {
background: #fff;
}
.dropdown-menu {
min-width: 180px;
font-size: 11px;
}
/* Navbar search
.dropdown-search {
position: relative;
padding: 5px;
}
.dropdown-search .form-control {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
}
.search-btn {
position: absolute;
background: transparent;
border: none;
overflow: hidden;
top: 50%;
right: 1px;
width: 42px;
height: 40px;
line-height: 38px;
font-size: 14px;
outline: none;
color: #999;
margin-top: -20px;
}*/
/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
.home-section {
position: relative;
background-color: #fff;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
z-index: 0;
background-size: cover;
}
.titan-title-size-1 {
letter-spacing: 4px;
font-size: 15px;
}
.titan-title-size-2 {
line-height: 1.3;
letter-spacing: 3px;
font-size: 18px;
opacity: .8;
}
.titan-title-size-3 {
letter-spacing: 16px;
font-size: 46px;
}
.titan-title-size-4 {
letter-spacing: 24px;
font-weight: 400;
font-size: 48px;
}
/* Agency Page Header */
.agency-page-header:before {
background: transparent;
}
/* About us Page Header */
.about-page-header:before {
background: rgba(2, 2, 2, 0.2);
}
/* Service Page Header */
.service-page-header:before {
background: rgba(2, 2, 2, 0.1);
}
/* Pricing Page Header */
.pricing-page-header {
background-position: 40% 14%;
background-repeat: no-repeat;
}
.pricing-page-header:before {
background: rgba(2, 2, 2, 0.6);
}
/* Gallery Page Header */
.gallery-page-header {
background-position: 50% 0%;
background-repeat: no-repeat;
}
.gallery-page-header:before {
background: rgba(2, 2, 2, 0.2);
}
/* Contact Page Header */
.contact-page-header {
background-position: 13% 45%;
background-repeat: no-repeat;
}
.contact-page-header:before {
background: rgba(2, 2, 2, 0.5);
}
/* FAQ Page Header */
.faq-page-header:before {
background: rgba(2, 2, 2, 0.15);
}
/* Blog Page Header */
.blog-page-header {
background-position: 50% 24%;
background-repeat: no-repeat;
}
.blog-page-header:before {
background: rgba(2, 2, 2, 0.3);
}
/* Restaurant menu Page Header */
.restaurant-menu-bg:before {
background: rgba(2, 2, 2, 0.4);
}
.restaurant-page-header:before {
background: rgba(0, 0, 0, 0.45);
}
.restaurant-image-overlay:before {
background-color: rgba(2, 2, 2, 0.25);
}
/* Portfolio Page Header */
.portfolio-page-header {
background-position: 50% 50%;
}
.portfolio-page-header:before {
background: rgba(45, 45, 45, 0.45);
}
/* Landing Page Header */
.landing-header:before {
position: absolute;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,
rgba(119, 47, 109, 0.52) 95%, rgba(115, 35, 105, 0.58) 100%);
content: " ";
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.banner-img {
margin-top: -145px;
}
.shop-page-header:before {
background: rgba(34, 34, 34, 0.3);
}
/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/
.footer {
padding: 10px 0;
}
.footer .copyright {
margin: 0;
}
.footer .footer-social-links {
text-align: right;
}
.footer .footer-social-links a {
display: inline-block;
padding: 0 6px;
}
/* -------------------------------------------------------------
Google map
------------------------------------------------------------- */
#map-section {
position: relative;
height: 450px;
width: 100%;
}
#map {
height: 100%;
width: 100%;
}
#map img {
max-width: none;
}
/*--------------------------------------------------------------
Services & Features
--------------------------------------------------------------*/
.features-item {
margin: 20px 0;
text-align: center;
}
.features-icon, .alt-features-icon {
line-height: 1.2;
font-size: 42px;
color: #111;
}
.features-title, .alt-features-title {
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
font-size: 14px;
color: #111;
margin: 16px 0 15px;
}
.alt-features-item {
position: relative;
padding-left: 55px;
margin: 65px 0 0 0;
}
.alt-features-icon {
position: absolute;
height: 40px;
width: 40px;
left: 0;
top: 0;
text-align: center;
line-height: 40px;
font-size: 28px;
}
.alt-features-title {
font-size: 13px;
margin: 0 0 10px;
}
/* Content box */
.content-box {
margin: 20px 0;
text-align: center;
}
.content-box-title {
font-weight: 400;
font-size: 18px;
color: #111;
margin: 16px 0 15px;
}
/*--------------------------------------------------------------
Team
--------------------------------------------------------------*/
.team-item {
position: relative;
text-align: center;
}
.team-image {
position: relative;
overflow: hidden;
}
.team-image img {
width: 100%;
}
.team-image:after {
position: absolute;
background: transparent;
content: " ";
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.team-detail {
position: absolute;
width: 100%;
opacity: 0;
bottom: 100%;
left: 0;
z-index: 2;
text-align: center;
font-size: 12px;
color: #aaa;
padding: 20px;
}
.team-detail h5 {
font-size: 16px;
}
.team-detail p {
font-size: 14px;
}
.team-social a {
display: inline-block;
color: #aaa;
padding: 5px 6px;
}
.team-social a:hover {
color: #FFF;
}
.team-descr {
margin: 20px 0 0;
}
.team-name {
font-size: 14px;
color: #111;
}
.team-role {
font-size: 11px;
color: #aaa;
}
.team-item:hover .team-image:after {
background: rgba(0, 0, 0, 0.6);
}
.team-item:hover .team-detail {
opacity: 1;
bottom: 50%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
/*--------------------------------------------------------------
Restaurant Menu
--------------------------------------------------------------*/
.menu {
border-bottom: 1px dotted #e5e5e5;
padding: 0 0 10px;
margin: 0 0 20px;
}
.menu-title, .menu-price {
margin: 0 0 10px;
font-size: 14px;
color: #111;
}
.menu-price-detail {
position: relative;
text-align: right;
}
/*--------------------------------------------------------------
Price Table
--------------------------------------------------------------*/
.price-table {
background: #fff;
border: 1px solid #eaeaea;
padding: 25px 20px;
margin: 15px 0 30px;
border-radius: 2px;
text-align: center;
}
.price-table:hover {
border-color: #CACACA;
}
.price-table.best {
margin: 0 0 30px;
}
.price-table .small {
margin: 0;
}
.borderline {
position: relative;
background: #eaeaea;
display: block;
height: 1px;
width: 100%;
margin: 20px 0 15px;
}
.borderline:before {
position: absolute;
background: #eaeaea;
content: "";
bottom: -7px;
left: 50%;
height: 14px;
width: 14px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
margin-left: -7px;
}
.borderline:after {
position: absolute;
background: #fff;
content: "";
bottom: -5px;
left: 50%;
height: 16px;
width: 16px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
margin-left: -8px;
}
.price-table h4 {
color: #111;
margin: 0;
}
.price-table p.price {
font-size: 60px;
color: #111;
padding: 0;
margin: 0 0 0 -10px;
}
.price-table p.price span {
display: inline-block;
vertical-align: top;
font-size: 16px;
padding-top: 25px;
}
.price-details {
list-style: none;
padding: 0;
margin: 0 0 23px;
}
.price-details li {
padding: 7px 0;
}
.price-details li>span {
text-decoration: line-through;
color: #aaa;
}
/*--------------------------------------------------------------
Fun fact
--------------------------------------------------------------*/
.count-item {
text-align: center;
}
.count-icon {
line-height: 1.2;
font-size: 42px;
}
/*--------------------------------------------------------------
Video Box
--------------------------------------------------------------*/
.video-box {
text-align: center;
padding: 40px 0;
}
.video-box-icon>a>i, .video-box-icon>a>span {
line-height: 1.8;
font-size: 40px;
color: #fff;
}
.video-title {
letter-spacing: 4px;
font-size: 30px;
margin: 10px 0 0;
}
.video-subtitle {
color: rgba(255, 255, 255, 0.5);
}
/*--------------------------------------------------------------
Portfolio
--------------------------------------------------------------*/
/* Portfolio filter */
.filter {
text-align: center;
list-style: none;
padding: 0;
margin: 0 0 70px;
}
.filter>li {
display: inline-block;
padding: 0 0 10px;
margin: 0 25px;
}
/* Portfolio grid */
.works-grid {
list-style: none;
padding: 0;
margin: 0;
}
.works-grid.works-grid-gut {
margin: 0 0 0 -10px;
}
.works-grid.works-grid-gut .work-item {
padding: 0 0 10px 10px;
}
.work-item {
width: 50%;
float: left;
margin: 0;
}
.works-grid-3 .work-item {
width: 33.3333%;
}
.container .works-grid-3 .work-item {
width: 33.2%;
}
.works-grid-4 .work-item {
width: 25%;
}
.works-grid-5 .work-item {
width: 20%;
}
.work-item>a {
position: relative;
display: block;
overflow: hidden;
}
.work-image {
position: relative;
overflow: hidden;
}
.work-image img {
display: block;
overflow: hidden;
width: 100%;
}
.work-image:after {
position: absolute;
display: block;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.work-caption {
width: 100%;
padding: 0 20px;
opacity: 0;
position: absolute;
bottom: 100%;
left: 0;
text-align: center;
overflow: hidden;
}
.work-title {
font-size: 14px;
color: #fff;
margin: 0 0 6px;
}
.work-descr {
color: #aaa;
}
.work-item:hover .work-image:after {
background: rgba(0, 0, 0, 0.6);
}
.work-item:hover .work-image>img {
-webkit-transform: scale(1.1) rotate(2deg);
-ms-transform: scale(1.1) rotate(2deg);
transform: scale(1.1) rotate(2deg);
}
.work-item:hover .work-caption {
bottom: 50%;
opacity: 1;
z-index: 3;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
/* Work item white background*/
.works-grid.works-hover-w .work-title {
color: #111;
}
.works-grid.works-hover-w .work-item:hover .work-image:after {
background: rgba(255, 255, 255, 0.8);
}
/* Work item gradien background*/
.works-grid.works-hover-g .work-image:after {
opacity: 0;
}
.works-grid.works-hover-g .work-descr {
color: #fff;
}
.works-grid.works-hover-g .work-item:hover .work-image:after {
background: #6fe29e;
background: linear-gradient(135deg, rgba(111, 226, 158, 0.8) 0%,
rgba(91, 218, 209, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6fe29e',
endColorstr='#5bdad1', GradientType=1);
opacity: 1;
}
.sliding-portfolio .work-item {
width: 100%;
}
/*--------------------------------------------------------------
Single Portfolio
--------------------------------------------------------------*/
.work-details {
margin: 0 0 20px;
}
.work-details-title {
color: #111;
margin: 0 0 20px;
}
.work-details ul {
list-style: none;
padding: 0;
margin: 0;
}
.work-details ul>li {
border-bottom: 1px dotted #c2c2c2;
padding: 0 0 5px;
margin: 0 0 5px;
}
/*--------------------------------------------------------------
Call to action
--------------------------------------------------------------*/
.callout-text {
color: rgba(255, 255, 255, 0.6);
}
.callout-title {
font-weight: 400;
font-size: 16px;
color: #fff;
margin: 0;
}
.callout-btn-box {
text-align: right;
padding-top: 4px;
}
.request-cta {
padding: 50px 0px;
}
/*--------------------------------------------------------------
Testimonial
--------------------------------------------------------------*/
.testimonial:before {
background: rgba(2, 2, 2, 0.4);
}
.testimonials-slider {
position: relative;
}
.testimonial-text {
text-align: center;
font-style: normal;
font-size: 18px;
}
.testimonial-caption {
text-align: center;
padding: 10px 0 0;
}
.testimonial-title {
font-size: 14px;
}
.testimonial-descr {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
}
/*--------------------------------------------------------------
Gallery
--------------------------------------------------------------*/
.gallery-item {
position: relative;
text-align: center;
margin: 0 0 20px;
}
.gallery-image {
position: relative;
overflow: hidden;
}
.gallery-image a.gallery {
position: relative;
display: block;
}
.gallery-image img {
display: block;
overflow: hidden;
width: 100%;
}
.gallery-image:after {
position: absolute;
background: transparent;
content: " ";
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.gallery-caption {
position: absolute;
width: 100%;
opacity: 0;
bottom: 100%;
left: 0;
z-index: 2;
text-align: center;
font-size: 28px;
color: #fff;
padding: 20px;
}
.gallery-icon {
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
height: 50px;
width: 50px;
font-size: 24px;
margin: 0 auto;
}
.gallery-icon i, .gallery-icon span {
line-height: 50px;
}
/* Gallery hover */
.gallery-item:hover .gallery-image:after {
background: rgba(0, 0, 0, 0.6);
}
.gallery-item:hover .gallery-caption {
opacity: 1;
bottom: 50%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
/*--------------------------------------------------------------
Blog Post
--------------------------------------------------------------*/
.post {
margin: 0 0 80px;
}
.post-title {
line-height: 1.4;
font-size: 22px;
color: #111;
margin: 0;
}
.post-header {
margin: 0 0 15px;
}
.post-meta {
font-size: 11px;
color: #aaa;
}
.post-entry {
border-top: 1px dotted #c2c2c2;
padding-top: 20px;
margin-top: 10px;
}
.post-images-slider {
position: relative;
}
.post-images-slider .flex-control-nav {
bottom: 0;
}
.post-thumbnail, .post-images-slider, .post-video {
margin: 0 0 20px;
}
.post-quote {
background: #f5f5f5;
text-align: center;
padding: 20px;
}
/* Post columns */
.post-columns .post {
margin: 0 0 60px;
}
.post-columns .post-header {
margin: 0 0 10px;
}
.post-columns .post-title {
line-height: 1.8;
font-size: 14px;
}
.post-columns .post-entry {
padding: 10px 0 0;
margin: 0 0 10px;
}
.post-columns.wo-border .post-entry {
border: 0;
padding: 0;
}
.post-columns .post-entry p:last-child {
margin: 0;
}
.more-link:after {
content: "\00BB";
color: #666666;
padding-left: 5px;
}
.pagination a {
border: 1px solid #eaeaea;
display: inline-block;
text-transform: uppercase;
text-align: center;
color: #999;
padding: 4px 12px;
}
.pagination a.active {
border-color: #CACACA;
}
/*--------------------------------------------------------------
Widgets
--------------------------------------------------------------*/
/* Progress bars */
.progress {
overflow: visible;
height: 4px;
}
.progress-bar {
position: relative;
}
.progress-bar.pb-dark {
background: #111;
}
.progress-bar span {
position: absolute;
display: block;
right: -0px;
top: -24px;
opacity: 0;
line-height: 12px;
font-size: 12px;
color: #111;
padding: 4px 0px;
}
.progress-bar span:after {
display: inline-block;
content: "%";
}
/* Tabs */
.tab-content .tab-pane {
padding: 20px 0;
}
/* Accordion */
.panel-title {
font-size: 14px;
}
.panel-heading a {
position: relative;
display: block;
}
.panel-heading a:after {
position: absolute;
content: "\f106";
top: 50%;
right: 0px;
font-family: "FontAwesome";
line-height: 1;
font-size: 14px;
margin-top: -7px;
}
.panel-heading a.collapsed:after {
content: "\f107";
}
/* Tables */
.table-border>tbody>tr>td, .table-border>tbody>tr>th, .table-border>tfoot>tr>td,
.table-border>tfoot>tr>th, .table-border>thead>tr>td, .table-border>thead>tr>th
{
border-color: #e5e5e5;
}
.ds-table>tbody>tr>td, .ds-table>tbody>tr>th, .ds-table>tfoot>tr>td,
.ds-table>tfoot>tr>th, .ds-table>thead>tr>td, .ds-table>thead>tr>th {
border-top: 0;
}
.checkout-table {
border: 1px solid #e5e5e5;
}
.checkout-table>tbody>tr>td, .checkout-table>tbody>tr>th,
.checkout-table>tfoot>tr>td, .checkout-table>tfoot>tr>th,
.checkout-table>thead>tr>td, .checkout-table>thead>tr>th {
padding: 12px;
}
.checkout-table tr td, .checkout-table tr th {
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
}
.checkout-table tbody tr td:first-child, .checkout-table tbody tr th:first-child
{
max-width: 36px;
}
/* Sidebar / Widget common*/
.sidebar .widget {
margin-bottom: 60px;
}
.sidebar .widget-title {
color: #111;
}
.widget .widget-title {
border-bottom: 1px dotted #c2c2c2;
font-size: 14px;
padding: 0 0 10px;
margin: 0 0 15px;
}
.widget ul {
list-style: none;
padding: 0;
margin: 0;
}
/* Icon List */
.widget .icon-list li {
padding: 5px 0;
}
.widget .icon-list li a:before {
content: "\00BB";
color: #666666;
padding-right: 5px;
}
/* Posts */
.widget-posts li {
margin: 0 0 15px;
}
.widget-posts li:last-child {
margin: 0;
}
.widget-posts-image {
float: left;
width: 64px;
}
.widget-posts-body {
margin-left: 74px;
}
/* Search */
.search-box {
position: relative;
}
/* Tags */
.tags a {
background: #111;
display: inline-block;
font-size: 10px;
color: #fff;
padding: 4px 10px 4px 12px;
margin: 0 1px 4px;
border-radius: 2px;
}
.tags a:hover {
background: rgba(17, 17, 17, 0.8);
}
/*--------------------------------------------------------------
Comment Box in Blog
--------------------------------------------------------------*/
.comments, .comment-form {
margin: 80px 0 0;
}
.comments .comment-title, .comment-form .comment-form-title {
border-bottom: 1px dotted #c2c2c2;
font-size: 16px;
color: #111;
padding-bottom: 15px;
margin: 0 0 20px;
}
.comment-author {
font-size: 14px;
margin: 0 0 10px;
}
.comment-avatar {
width: 55px;
float: left;
margin-top: 10px;
}
.comment-avatar img {
border-radius: 50%;
}
.comment-content {
padding-top: 5px;
margin-left: 75px;
margin-bottom: 30px;
}
@media ( min-width : 768px) {
.comment .comment {
margin-left: 75px;
}
}
/*--------------------------------------------------------------
Client
--------------------------------------------------------------*/
.client-logo {
opacity: .5;
}
.client-logo:hover {
opacity: 1;
}
/*--------------------------------------------------------------
Shop Items
--------------------------------------------------------------*/
.shop-item {
text-align: center;
margin: 0 0 40px;
}
.shop-item-image {
position: relative;
overflow: hidden;
}
.shop-item-image img {
width: 100%;
}
.shop-item-detail, .shop-item-image:after {
transition: all 0.4s ease-in-out 0s;
}
.shop-item-image:after {
position: absolute;
display: block;
content: "";
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.shop-item-detail {
position: absolute;
width: 100%;
left: 0;
bottom: 100%;
padding: 20px;
opacity: 0;
z-index: 2;
text-align: center;
font-size: 12px;
color: #aaa;
}
.shop-item-title {
font-weight: 400;
font-size: 14px;
color: #111;
margin: 15px 0 5px;
}
/* Shop item hover */
.shop-item:hover .shop-item-image:after {
background: rgba(255, 255, 255, 0.7);
}
.shop-item:hover .shop-item-detail {
opacity: 1;
bottom: 50%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
/* -------------------------------------------------------------------
Exclusive products
------------------------------------------------------------------- */
.ex-product {
opacity: .7;
transition: all 0.4s ease-in-out 0s;
}
.ex-product:hover {
opacity: 1;
}
/*--------------------------------------------------------------
Shop Single Product
--------------------------------------------------------------*/
.product-gallery {
list-style: none;
padding: 0;
width: 100%;
margin: 10px 0 0;
}
.product-gallery li {
display: inline-block;
width: 15%;
margin: 0 5px;
}
.product-gallery li:first-child {
margin-left: 0;
}
.product-title {
margin: 0 0 20px;
color: #111;
}
.star, .star-off {
margin-bottom: 5px;
color: #f1c40f;
}
.star-off {
color: #e5e5e5;
}
.amount {
font-size: 32px;
color: #111;
}
.reviews {
margin: 0;
}
/*--------------------------------------------------------------
Showcase Page
--------------------------------------------------------------*/
.showcase-page .showcase-page-header {
background-color: rgba(2, 2, 2, 0.7);
}
.showcase-page .content-box {
display: block;
margin-bottom: 45px;
}
.showcase-page .content-box .content-box-image {
border-radius: 6px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
margin-bottom: 15px;
transition: 0.35s ease-out;
-webkit-transition: 0.35s ease-out;
-moz-transition: 0.35s ease-out;
}
.showcase-page .content-box .content-box-image:hover {
transform: translate3d(0, -10px, 0);
-webkit-transform: translate3d(0, -10px, 0);
box-shadow: 0 23px 40px rgba(0, 0, 0, 0.2);
}
/*--------------------------------------------------------------
Documentation Page
--------------------------------------------------------------*/
.documentation-page {
font-size: 14px;
}
.documentation-page .pln {
color: #000;
}
.documentation-page pre.prettyprint {
border: 1px solid #888;
padding: 15px;
}
.documentation-page ol.linenums {
margin-top: 0;
margin-bottom: 0;
}
.documentation-page li.L0, .documentation-page li.L1,
.documentation-page li.L2, .documentation-page li.L3,
.documentation-page li.L5, .documentation-page li.L6,
.documentation-page li.L7, .documentation-page li.L8 {
list-style-type: none;
}
.documentation-page li.L1, .documentation-page li.L3,
.documentation-page li.L5, .documentation-page li.L7,
.documentation-page li.L9 {
background: #eee;
}
.documentation-page .com {
color: #800;
}
.documentation-page .lit {
color: #066;
}
.documentation-page .pun, .documentation-page .opn, .documentation-page .clo
{
color: #660;
}
.documentation-page .fun {
color: red;
}
.documentation-page .str, .documentation-page .atv {
color: #080;
}
.documentation-page .kwd, .documentation-page .tag {
color: #008;
}
.documentation-page .typ, .documentation-page .atn, .documentation-page .dec,
.documentation-page .var {
color: #606;
}
.documentation-page a {
color: #19B5FE;
}
.documentation-page a:hover {
color: #1C92C9;
}
/*--------------------------------------------------------------
Responsive Styles - Media Queries
--------------------------------------------------------------*/
@media ( min-width : 768px) {
.navbar-transparent {
background: transparent;
padding-bottom: 15px;
padding-top: 15px;
}
.navbar-custom .dropdown-menu {
position: absolute;
display: block;
visibility: hidden;
opacity: 0;
}
.navbar-custom .open>.dropdown-menu {
visibility: visible;
opacity: 1;
}
.navbar-custom .dropdown-menu .dropdown-toggle:after {
position: absolute;
display: block;
right: 9px;
top: 50%;
margin-top: -6px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 9px;
content: "\f105";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navbar-right .dropdown-menu {
right: auto;
left: 0;
}
/* Comments */
.comment .comment {
margin-left: 75px;
}
}
@media ( max-width : 1200px) {
/* Features */
.alt-features-item {
margin: 20px 0 0;
}
}
@media ( max-width : 1050px) {
/* Navbar */
.navbar-custom {
letter-spacing: 1px;
}
}
@media ( max-width : 991px) {
/* Navbar */
.navbar-custom {
letter-spacing: 0;
}
/* Headers */
.titan-title-size-3 {
letter-spacing: 8px;
font-size: 36px;
}
.titan-title-size-4 {
letter-spacing: 12px;
font-size: 38px;
}
.work-item, .works-grid-3 .work-item, .container .works-grid-3 .work-item,
.works-grid-4 .work-item, .works-grid-5 .work-item {
width: 50%;
}
/* Half-image */
.side-image {
position: relative;
height: 300px;
}
}
@media ( max-width : 767px) {
/* Navbar */
.navbar-custom .navbar-nav {
letter-spacing: 3px;
margin-top: 1px;
margin-bottom: 0;
}
.navbar-custom li>a:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-header,
.navbar-custom .navbar-nav .open .dropdown-menu>li>a {
padding: 10px 25px;
}
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-menu .dropdown-header,
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-menu>li>a {
padding: 10px 35px;
}
.navbar-custom li a, .navbar-custom .dropdown-search {
border-bottom: 1px solid rgba(73, 71, 71, 0.15) !important;
}
.navbar-custom .dropdown-toggle:after, .navbar-custom .dropdown-menu .dropdown-toggle:after
{
right: 7px;
content: "\f107";
}
.navbar-custom .nav>.open>.dropdown-toggle:after, .navbar-custom .dropdown-menu .dropdown.open .dropdown-toggle:after
{
right: 7px;
content: "\f106";
}
/* Shop navbar */
.navbar-custom .navbar-nav>li:last-child.navbar-cart>a {
padding-left: 15px;
}
.navbar-custom .cart-item-number {
display: none;
}
.navbar-custom .navbar-cart>a:after {
content: "\f107";
}
.navbar-custom .navbar-cart-item a {
border: 0 !important;
}
.dropdown-menu.cart-list {
text-align: left;
border-bottom: 1px solid rgba(73, 71, 71, 0.15) !important;
}
.navbar-cart-item {
border: none;
border-bottom: 1px solid rgba(73, 71, 71, 0.15) !important;
padding-bottom: 10px;
}
.navbar-cart-img {
display: none;
}
.navbar-cart-title {
white-space: normal;
padding: 0;
margin-left: 0;
}
/* Headers */
.titan-title-size-1 {
letter-spacing: 2px;
font-size: 14px;
}
.titan-title-size-2 {
line-height: 1.3;
letter-spacing: 2px;
font-size: 16px;
opacity: .8;
}
.titan-title-size-3 {
letter-spacing: 4px;
font-size: 26px;
}
.titan-title-size-4 {
letter-spacing: 6px;
font-size: 28px;
}
/* Features */
.features-item {
margin: 0 0 30px;
}
.alt-features-item {
padding-left: 0;
margin: 0 0 30px;
text-align: center;
}
.alt-features-icon {
position: static;
width: auto;
margin: 0 auto 8px;
}
/* Callout */
.callout-text {
margin: 0 0 30px;
}
.callout-text, .callout-btn-box {
text-align: center;
}
/* Sidebar */
.sidebar {
margin-top: 50px;
}
.widget {
margin-bottom: 60px;
}
.post.mb-0 {
margin-bottom: 40px !important;
}
.footer {
text-align: center;
}
.copyright, .footer-social-links {
text-align: center;
margin: 10px 0;
}
/* Half-image */
.side-image-text {
padding-left: 15px;
padding-right: 15px;
}
/* Restaurant menu */
.menu-title, .menu-detail, .menu-price-detail {
text-align: center;
}
.align-center-sm {
text-align: center;
}
.align-left-sm {
text-align: left;
}
}
@media only screen and (max-width: 480px) {
.work-item, .works-grid-3 .work-item, .works-grid-4 .work-item,
.works-grid-5 .work-item {
width: 100%;
}
}
/*--------------------------------------------------------------
Logout pages
--------------------------------------------------------------*/
.logout-body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
text-align: center;
padding-top: 50px;
}
.logout-container {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 40px;
max-width: 400px;
margin: auto;
}
.logout-container h1 {
font-size: 2.6em;
font-weight: bold;
color: #333;
}
.logout-container p {
color: #666;
font-size: 18px;
}
.logout-container button {
display: inline-block;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.logout-container button:hover {
background-color: #0056b3;
}
.mt-9rem {
margin-top: 9rem;
}
.filter-group {
padding: 10px;
border-radius: 8px; /* Optional: for rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds shadow to the div */
transition: box-shadow 0.3s ease;
/* Smooth transition for shadow effect */
margin-bottom: 2rem;
}
category-option {
margin-left: 1rem;
}
.filter-group:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
/* Shadow increases on hover */
}
.free-price-range {
margin-top: 1rem;
margin-left: 1rem;
}
.free-price-range label {
display: block;
font-weight: normal;
margin-bottom: 0.25rem;
}
.free-price-range input[type="text"] {
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
margin-bottom: 0.5rem;
}
.free-price-range small {
display: block;
font-size: 0.75rem;
color: #6c757d;
}
/* Mobile filter styles */
.mobile-filter-toggle {
display: none;
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
margin-bottom: 15px;
cursor: pointer;
font-size: 1em;
}
.mobile-filter-toggle:focus {
outline: none;
}
.mobile-filter-panel {
display: none;
background-color: #f8f9fa;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.mobile-filter-panel.open {
display: block;
}
/* Media query for mobile devices */
@media ( max-width : 768px ) {
.filter-section {
display: none; /* Hide the default filter section on mobile */
}
.mobile-filter-toggle {
display: block; /* Show the hamburger menu toggle on mobile */
}
.col-md-9 {
width: 100%;
flex: 0 0 100%;
}
}
/* product filter list alignment changes */
/* General styling for the product cards */
.product-card {
background-color: #ccc;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Image styling */
.product-thumbnail img {
max-height: 250px;
object-fit: cover;
border-radius: 8px;
}
/* View more button styling */
.view-more {
display: inline-block;
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.view-more:hover {
background-color: #0056b3;
}
/* Product title styling */
.product-card a {
font-size: 1.1em;
font-weight: bold;
color: #333;
text-decoration: none;
display: block;
margin-top: 10px;
text-align: center;
}
.product-card a:hover {
color: #007bff;
}
/* Price and locality */
.product-card p {
font-size: 0.9em;
color: #555;
text-align: center;
}
.product-card strong {
color: #333;
}
/* Additional styles for the product details layout */
.product-details-container {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Spacing between columns */
align-items: flex-start; /* Align items to the top */
}
.product-image-container {
flex: 0 0 auto; /* Don't grow, don't shrink, auto width */
width: 400px; /* Adjust as needed */
}
.product-info-container {
flex: 1 1 auto; /* Grow, shrink, auto width */
min-width: 300px; /* Minimum width for product info */
}
.add-to-cart-container {
margin-top: 20px;
text-align: right; /* Align button to the bottom right */
}
/* Ensure images in the product details don't exceed container */
.product-image-container img {
max-width: 100%;
height: auto;
border-radius: 8px; /* Consistent with product card */
}
/* Ensure the modal content itself has the desired background color and general styling */
.modal-content {
background-color: #c4cfd7;
border-radius: 10px; /* Slightly rounded corners */
box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Soft shadow */
}
/* Style for modal header and footer to match */
.modal-header, .modal-footer {
background-color: #7c7c7c; /* Match the modal content background */
border-bottom: 1px solid #e9ecef;
border-top: 1px solid #e9ecef;
}
/* Ensure modal-body has no conflicting padding/margins that might break inner flex */
.modal-body {
padding: 0; /* Remove default padding to allow inner content full control */
overflow-y: auto; /* Allow scrolling if content is too long */
max-height: 80vh; /* Set a max height for the modal body for responsiveness */
}
/* General flex container for loaded product details */
.product-details-content-wrapper {
display: flex;
flex-wrap: wrap; /* Allows sections to wrap on smaller screens */
gap: 10px; /* Space between image and info containers */
padding: 5px; /* Padding around the entire loaded content */
align-items: flex-start; /* Align items to the top of the flex container */
}
/* Specific styles for the image and info containers within the loaded content */
.product-details-content-wrapper .product-image-container {
flex: 1 1 calc(50% - 10px); /* Account for gap, roughly 50% width */
max-width: calc(50% - 10px);
box-sizing: border-box;
padding: 5px;
}
.product-details-content-wrapper .product-info-container {
flex: 1 1 calc(50% - 10px); /* Account for gap, roughly 50% width */
max-width: calc(50% - 10px);
box-sizing: border-box;
padding: 5px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.product-details-content-wrapper .product-image-container,
.product-details-content-wrapper .product-info-container {
flex: 1 1 100%; /* Full width on small screens */
max-width: 100%;
}
}
.product-details-content-wrapper .add-to-cart-container {
flex: 1 1 100%; /* Full width for add to cart */
text-align: center;
margin-top: 20px;
padding: 10px;
}
.carousel-inner {
max-height: 500px;
}
.carousel-inner .item img {
max-width: 500px; /* Adjust this value as needed */
max-height: 300px; /* Adjust this value as needed */
width: auto; /* Maintain aspect ratio */
height: auto; /* Maintain aspect ratio */
margin: 0 auto; /* Center the image horizontally within the item */
display: flex; /* Prevent extra bottom spacing */
object-fit: contain;
}
.carousel-control {
background-color: rgba(0, 0, 0, 0.5);
}
.row.d-flex {
display: flex;
flex-wrap: wrap;
}
#product-list { .col-md-3 { display:flex;
flex-direction: column;
margin-bottom: .625rem;
padding: .625rem;
}
}
.product-card {
flex-grow: 1; /* Ensures cards stretch to fill column height */
}
.nav-link {
text-decoration: none;
padding: 10px;
color: black;
}
.nav-link.active {
color: white;
background-color: #007bff;
font-weight: bold;
}
/* Mobile responsiveness */
@media ( max-width : 768px) {
.product-card {
padding: 10px;
}
.product-thumbnail img {
max-height: 200px;
}
}
/* Style the login/logout menu differently */
.navbar-nav .login-menu>a {
font-weight: bold;
color: #ff5722 !important; /* Different color */
}
.navbar-nav .login-menu>a:hover {
color: #e64a19 !important;
}
/* Separate the login/logout section visually */
.navbar-nav .nav-item {
border-left: 2px solid #ddd;
margin-left: 5px;
padding-left: 5px;
}
.category-header {
background-color: #9d9dff;
cursor: pointer; /* Indicate it's clickable */
font-weight: bold;
color: #333;
}
.category-row.collapsed {
display: none;
}
.toggle-icon {
margin-right: 1px;
}
.data-row-content {
padding-left: 25px; /* Adjust for desired indentation of data rows */
}
.card {
flex: 1;
display: flex;
flex-direction: column;
}
.card-body {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between; /* Distribute space between content */
}
.parent-details-container {
/* Ensure consistent height for this section */
}
/* Existing Cart Container Styles */
.cart-container {
display: grid; /* Make the container a grid */
grid-template-columns: auto 1fr auto auto auto; /* Order: Item, Desc, Locality, Price, Reserve Price */
gap: 20px;
margin-bottom: 20px; /* Add some margin below the cart items */
}
/* Cart Header */
.cart-header {
font-weight: bold;
font-size: 1.1em;
padding: 15px;
border-bottom: 2px solid #ccc;
display: contents; /* Make it behave like its children in the grid */
}
.cart-header > div {
text-align: right;
}
.cart-header > div:first-child {
text-align: left; /* Align "Item" to the left */
}
.cart-header > div:nth-child(2) {
text-align: left; /* Align "Description" to the left */
}
/* Align "Locality" header to the left */
.cart-header > div:nth-child(3) {
text-align: left;
}
/* Each Cart Item */
.cart-item {
display: contents; /* Make it behave like its children in the grid */
margin-bottom: 10px; /* Reduce margin between items */
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
align-items: center; /* Vertically align content within the row */
}
/* Item Image Section */
.cart-item .item-image {
width: 80px; /* Slightly smaller image */
height: auto;
}
.cart-item .item-image .product-card {
display: block;
}
.cart-item .item-image img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
/* Item Details Section */
.cart-item .item-details {
flex-grow: 1;
/* Remove grid layout from item-details */
}
.cart-item .item-details h6:first-child { /* Name */
margin-top: 0; /* Reset top margin */
margin-bottom: 0.2em;
}
.cart-item .item-details h6.description { /* Description */
font-size: 0.9em;
color: #777;
margin-bottom: 0.4em;
}
.cart-item .item-details p { /* Status */
margin-bottom: 0.2em;
}
.cart-item .item-details .remove-button {
display: inline-block; /* Keep it inline */
margin-top: 5px;
font-size: 0.8em; /* Smaller remove button text */
padding: 5px 10px; /* Smaller padding */
}
/* New Item Locality Style */
.cart-item .item-locality {
text-align: left; /* Align locality text to the left */
}
.cart-item .item-locality .locality {
margin-bottom: 0;
font-size: 0.9em; /* Optional: Adjust font size */
color: #555; /* Optional: Adjust color */
}
/* Item Price Section */
.cart-item .item-price {
text-align: right;
font-weight: bold;
}
.cart-item .item-price .price {
margin-bottom: 0;
}
/* New Item Reserve Price Style */
.cart-item .item-reserve-price {
text-align: right;
font-weight: bold; /* Optional: Make it bold as well */
}
.cart-item .item-reserve-price .reserve-price {
margin-bottom: 0;
}
/* Cart Actions Container */
.cart-actions {
display: flex;
justify-content: space-between; /* Place buttons at opposite ends */
align-items: flex-start; /* Align items at the top */
margin-top: 20px;
}
/* Clear Cart Button */
.cart-actions .clear-cart-button {
text-align: left;
}
.cart-actions .clear-cart-button .btn-warning {
padding: 8px 12px; /* Smaller padding */
font-size: 0.9em; /* Smaller font size */
}
/* Cart Summary Section */
.cart-actions .cart-summary {
text-align: right;
}
.cart-actions .cart-summary .total-price,
.cart-actions .cart-summary .total-reserve-price {
margin-bottom: 5px; /* Reduce margin */
}
/* Place Order Button */
.cart-actions .place-order-button {
text-align: right;
}
.cart-actions .place-order-button .btn-primary {
/* You can add specific styling for this button if needed */
}
/* Responsive adjustments (optional) */
@media (max-width: 768px) {
.cart-container {
grid-template-columns: 1fr; /* Stack items vertically on smaller screens */
}
.cart-header {
display: block;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
padding-bottom: 5px;
}
.cart-header > div {
text-align: left;
}
.cart-item {
grid-template-columns: 1fr; /* Stack items vertically on smaller screens */
align-items: stretch; /* Allow items to take full width when stacked */
}
.cart-item > div { /* Ensure all item details stack properly */
margin-bottom: 5px;
}
.cart-item .item-details {
margin-top: 10px;
display: block; /* Revert to block for stacking */
}
.cart-item .item-price,
.cart-item .item-reserve-price,
.cart-item .item-locality {
text-align: center;
margin-top: 5px;
}
.cart-actions {
flex-direction: column; /* Stack buttons on smaller screens */
align-items: stretch; /* Make buttons full width */
}
.cart-actions .clear-cart-button {
text-align: left;
margin-bottom: 10px; /* Add margin below clear cart button */
}
.cart-actions .cart-summary {
text-align: left;
margin-bottom: 10px; /* Add margin below summary */
}
.cart-actions .place-order-button {
text-align: left;
}
}
/* Existing link styles */
a {
color: #337ab7; /* Default Bootstrap link color */
}
a:hover {
color: #23527c; /* Darker color on hover */
}
/* NEW: Flashing banner styles for "Test Mode" */
.test-mode-banner {
background-color: #ffc107; /* Warning yellow */
color: #343a40; /* Dark text for contrast */
text-align: center;
padding: 5px 0;
font-weight: bold;
position: fixed; /* Fixed at the bottom */
bottom: 0;
left: 0;
width: 100%;
z-index: 1000; /* Ensure it's above other content */
animation: flash 1.5s infinite alternate; /* Apply flashing animation */
}
@keyframes flash {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
/* --- General Form Enhancements --- */
/* Give the overall form a card-like appearance */
.form-container {
background-color: #ffffff;
border-radius: 8px; /* Slightly more rounded corners */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
padding: 30px; /* Ample internal padding */
margin-bottom: 30px; /* Space below the form */
}
/* Labels: Make them slightly more prominent */
.col-form-label {
font-weight: 600; /* Semi-bold */
color: #333; /* Darker text */
padding-top: calc(0.375rem + 1px); /* Align vertically with form-control */
padding-bottom: calc(0.375rem + 1px); /* Consistent with Bootstrap 4/5 */
}
/* --- Input Fields (Text, Email, Number, Password, Textarea, Select) --- */
.form-control,
.form-select {
border-radius: 6px; /* Slightly more rounded than Bootstrap 3 default */
border: 1px solid #ced4da; /* Consistent border color */
padding: 0.75rem 1rem; /* Slightly larger padding for a modern feel */
font-size: 1rem; /* Base font size */
line-height: 1.5; /* Consistent line height */
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transitions */
}
.form-control:focus,
.form-select:focus {
border-color: #86b7fe; /* A modern blue focus color */
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Subtle focus glow */
}
.form-select {
-webkit-appearance: none; /* Remove default arrow on WebKit browsers */
-moz-appearance: none; /* Remove default arrow on Firefox */
appearance: none; /* Remove default arrow */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* Custom SVG arrow */
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px; /* Size of the custom arrow */
}
/* --- Checkboxes and Radios --- */
.form-check-input {
width: 1.25em; /* Slightly larger checkbox/radio */
height: 1.25em;
margin-top: 0.25em; /* Adjust alignment */
border: 1px solid #ced4da;
border-radius: 0.25em; /* Rounded corners for checkbox */
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-check-input[type="radio"] {
border-radius: 50%; /* Make radio buttons perfectly round */
}
.form-check-input:checked {
background-color: #007bff; /* Bootstrap primary blue */
border-color: #007bff;
}
.form-check-label {
margin-left: 0.5rem; /* Space between input and label */
color: #495057; /* Slightly darker label text */
}
.form-check-inline {
margin-right: 1rem; /* Consistent spacing for inline items */
padding-top: 0; /* Remove pt-2 if it causes misalignment */
}
/* --- Validation Feedback (Error Messages) --- */
.invalid-feedback {
display: block; /* Ensure it's always shown when it has content */
color: #dc3545; /* Bootstrap's red */
font-size: 0.875rem; /* Slightly smaller font size */
margin-top: 0.25rem; /* Small space above the error message */
background-color: #fff3f3; /* Very light red background for emphasis */
border: 1px solid #f5c6cb; /* Light red border */
border-radius: 4px;
padding: 0.5rem 0.75rem;
word-break: break-word; /* Ensure long error messages wrap */
}
.invalid-feedback p {
margin-bottom: 0; /* Remove margin from paragraphs inside feedback */
}
/* Style for inputs with errors */
.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
border-color: #dc3545; /* Red border for invalid fields */
padding-right: calc(1.5em + 0.75rem); /* Space for validation icon if added */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle r='.5' cx='6' cy='8.2'/%3e%3c/svg%3e"); /* Example error icon */
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
/* Global errors (for the alert-danger style) */
.alert.alert-danger {
background-color: #f8d7da; /* Lighter red for the alert background */
border-color: #f5c6cb; /* Lighter red border */
color: #721c24; /* Darker red text */
border-radius: 6px;
padding: 1rem 1.25rem;
margin-bottom: 20px;
}
/* --- Responsive Adjustments (Optional but good) --- */
@media (max-width: 767px) { /* For small screens (Bootstrap's XS breakpoint) */
.form-container {
padding: 20px; /* Reduce padding on smaller screens */
}
.col-md-2,
.col-md-10 {
width: 100%; /* Make label and input take full width */
}
.col-form-label {
text-align: left; /* Ensure labels are left-aligned on mobile */
margin-bottom: 5px; /* Add space below label */
padding-bottom: 0;
}
.row.mb-3 {
margin-bottom: 15px !important; /* Adjust row spacing for mobile */
}
}
/* --- Styles to Reduce Input Box Size (using max-width) --- */
/*
* Consolidated Custom Styles for Bootstrap 3.3.7 Forms
*
* This file contains all the necessary custom CSS rules
* to enhance the appearance and alignment of your forms,
* ensuring compatibility with Bootstrap 3.3.7.
*
* IMPORTANT PREREQUISITES:
* 1. Ensure this CSS file (`style.css`) is loaded AFTER Bootstrap's CSS
* in your `layout.html`'s section.
* 2. You MUST remove any conflicting fixed-size properties
* from existing `.form-control` rules in your `style.css` if they exist.
* Specifically, remove or comment out these lines:
* `width: 300px;`
* `height: 33px;`
* `font-size: 11px;`
* `border-radius: 2px;`
* 3. Ensure you have applied the HTML modifications to your
* `fragments/forms.html` (for checkbox `inputRow`) and `customer-signup.html`
* (for `card-header` classes) as outlined in previous responses.
*/
/* --- General Form Control Styling (Text Inputs, Textareas, Selects) --- */
/* Applies to input[type="text"], [type="password"], textarea, select */
.form-control,
.form-select,
textarea.form-control {
/* Base modern styling properties */
padding: 0.75rem 1rem; /* More generous padding */
font-size: 1rem; /* Standard readable font size */
line-height: 1.5; /* Consistent line height */
border-radius: 6px; /* Rounded corners */
border: 1px solid rgb(206, 212, 218); /* Consistent, subtle border color */
background-color: #fff; /* Ensure white background */
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */
/* Smooth transitions for interactive states */
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
/* Control max width for better alignment and readability on large screens */
/* This allows fields to be responsive (width: 100%) but caps their maximum size. */
max-width: 480px; /* Adjust this value as needed for your preferred max width */
width: 100%; /* Ensures it takes full available width within its Bootstrap column up to max-width */
}
/* --- Focus State for Form Controls --- */
/* Applies when inputs are focused */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
border-color: #80bdff; /* Highlight border on focus */
outline: 0; /* Remove default browser outline */
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Standard Bootstrap focus glow */
}
/* --- Label Styling for Horizontal Forms --- */
/* Applies to labels that accompany form controls in horizontal layouts */
.col-form-label {
font-weight: 600; /* Bolder labels for better readability */
color: #333; /* Darker text for prominence */
/* Adjust padding to vertically align label text with the input fields */
padding-top: calc(0.375rem + 1px);
padding-bottom: calc(0.375rem + 1px);
margin-bottom: 0; /* Remove extra bottom margin */
line-height: 1.5; /* Consistent line height */
}
/* --- Invalid Feedback / Error Message Styling --- */
/* Applies to validation error messages */
.invalid-feedback {
display: block; /* Ensures the message is visible (Bootstrap 3 might hide by default) */
width: 100%; /* Spans the full width of its parent container */
margin-top: 0.25rem; /* Small space above the message */
font-size: 80%; /* Slightly smaller font size */
color: #dc3545; /* Error text color (red) */
background-color: #ffe3e6; /* Light red background for emphasis */
border: 1px solid #dc3545; /* Red border */
border-radius: 4px; /* Slightly rounded corners for the message box */
padding: 0.5rem 0.75rem; /* Padding inside the message box */
}
/* --- Section Header Styling (e.g., "Personal Details", "Address Details") --- */
/* Applies to the .card-header element */
.card-header {
background-color: transparent !important; /* Overrides Bootstrap's bg-primary/info/secondary */
border-bottom: 1px solid #eee; /* Adds a subtle separator line below the header */
padding: 1.5rem 2rem !important; /* Adjusts padding for a more spacious and modern look */
}
/* Styles the actual heading text (h5) within the .card-header */
.card-header h5 {
font-size: 1.8rem; /* Makes the heading larger and more impactful (similar to an h2/h3) */
font-weight: 700; /* Bolder font weight */
color: #333; /* Darker text color for prominence */
margin-bottom: 0; /* Removes default bottom margin */
text-transform: none; /* Ensures normal capitalization unless specifically set otherwise */
}
/* --- Custom Checkbox Styling (Bootstrap 3 Compatible) --- */
/* This requires the specific HTML structure created by the modified inputRow fragment for checkboxes. */
.form-check-input-b3-custom {
width: 16px; /* Standard checkbox size */
height: 16px; /* Standard checkbox size */
vertical-align: middle; /* Aligns the checkbox vertically with surrounding text */
border: 1px solid #ced4da; /* Consistent border color */
border-radius: 3px; /* Slightly rounded corners for the checkbox box */
background-color: #fff; /* White background */
cursor: pointer; /* Indicates it's clickable */
/* Remove default browser styling for more control over appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
flex-shrink: 0; /* Prevents shrinking in flex containers */
/* Adjust margins to align visually with other form fields */
margin-left: 5px; /* Adds space between the label text (in col-sm-2) and the checkbox input (in col-sm-10) */
margin-top: calc(0.375rem + 1px); /* Matches vertical alignment with standard form-control inputs */
margin-bottom: calc(0.375rem + 1px); /* Matches vertical alignment with standard form-control inputs */
}
/* Styles for the checkbox when it is checked */
.form-check-input-b3-custom:checked {
background-color: #007bff; /* Bootstrap primary blue when checked */
border-color: #007bff;
/* Embeds an SVG for a custom checkmark icon */
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
/* Styles for the checkbox when it is in focus */
.form-check-input-b3-custom:focus {
border-color: #80bdff; /* Highlight border on focus */
outline: 0; /* Remove default browser outline */
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Standard Bootstrap focus glow */
}
/* Refinement 1: Left Align Section Header with Fields */
/* Assuming your section headers are in a div with a class like 'section-header' or directly within a container that defines their alignment.
If they are inside a col-md-12 or similar, you might need to adjust its padding.
Let's target the immediate parent of the header text. */
/* Styles for the section headers (e.g., Personal Details, Address Details) */
.card-header {
/* Retain styles for the blue line and removing the white strip */
background-color: transparent;
border-bottom: 2px solid #0056b3;
margin-bottom: 20px;
padding-bottom: 5px;
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
box-shadow: none;
/* Reset default Bootstrap card-header horizontal padding to allow h5 to be positioned */
padding-left: 0 !important;
padding-right: 0 !important;
/* Ensure card-header doesn't apply conflicting horizontal alignment if it's a flex container */
display: flex; /* Make it a flex container if not already */
justify-content: flex-start; /* Align children (like h5) to the very start of the flex container */
align-items: center; /* Vertically center items if they have different heights, for good measure */
}
.card-header h5 {
/* Preserve your desired font styles */
font-size: 1.8rem;
font-weight: 700;
color: #333;
text-transform: none;
/* Override all margins and paddings on the h5 itself to ensure clean alignment */
margin: 0 !important; /* Removes all default margins on h5 */
padding: 0 !important; /* Removes all default paddings on h5 */
text-align: left !important; /* Forces text content within h5 to align left */
/* Apply the specific indentation to the h5 element to align with your input fields.
This '90px' value is crucial and might still need fine-tuning. */
padding-left: 90px; /* This will create the desired left spacing for the text */
}
/* Style for the "Back To List" link */
.back-to-list-link {
font-size: 1.4rem; /* Slightly smaller than body text, but readable */
color: #007bff; /* Standard blue link color */
text-decoration: none; /* Remove underline by default */
font-weight: 500; /* Make it a bit bolder */
/* Add hover effect for better user feedback */
transition: color 0.2s ease-in-out;
}
.back-to-list-link:hover {
color: #0056b3; /* Darker blue on hover */
text-decoration: underline; /* Add underline on hover */
}
/* Adjustments for positioning if it's currently indented by the '>' */
.back-to-list-container {
margin-top: 15px; /* Add some space above it */
margin-bottom: 20px; /* Add space below it */
/* Remove any unnecessary left padding or margin that the '>' might cause */
padding-left: 0;
margin-left: 0;
}
/* Base Button Enhancements */
.btn {
/* Remove default Bootstrap 3 box-shadow (if any conflicting) and slight border radius */
box-shadow: none;
border-radius: 4px; /* Slightly rounded corners */
/* Add smooth transitions for hover effects */
transition: all 0.2s ease-in-out;
/* Ensure text is readable */
font-weight: 600; /* Make text a bit bolder */
}
/* Primary Button (e.g., "CREATE PRODUCT", "SIGNUP") */
.btn-primary {
/* Remove default Bootstrap 3 flat background gradient */
background-image: none;
/* Apply a subtle linear gradient for depth */
background: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); /* Blue gradient */
/* Adjust border for a softer look */
border-color: #2e6da4; /* Slightly darker blue border */
/* Add a subtle box-shadow */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
/* Adjust gradient and border on hover/focus/active */
background: linear-gradient(to bottom, #357ebd 0%, #2e6da4 100%); /* Darker blue on hover */
border-color: #204d74;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* More prominent shadow on hover */
}
.btn-primary:active {
/* Further darken on click/active */
background: linear-gradient(to bottom, #2e6da4 0%, #285e8e 100%);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); /* Inset shadow for pressed effect */
}
/* Default/Secondary Buttons (e.g., "Back To List" if made into a button) */
/* Apply similar enhancements to btn-default or btn-secondary if you use them */
.btn-default {
background-image: none;
background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
border-color: #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
background: linear-gradient(to bottom, #e6e6e6 0%, #d4d4d4 100%);
border-color: #adadad;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.btn-default:active {
background: linear-gradient(to bottom, #d4d4d4 0%, #c2c2c2 100%);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Example for 'CREATE NEW MERCHANT STAFF' button - likely a btn-primary */
/* Your existing HTML should use standard Bootstrap button classes:
or
CREATE NEW MERCHANT STAFF
*/