/* ========================================= ========================================= Startup Template By Bootstrapious.com ========================================= ========================================= */ /* variant 6 - pink */ /* ===================== GENERAL ===================== */ html, body { overflow-x: hidden; /* Prevent scroll on narrow devices */ } header { z-index: 1000; } section { position: relative; padding-top: 40px; padding-bottom: 40px; } section.background-gray-lighter { background: #cdcdcd; } section.background-gray-lightest { background: #f7f7f7; border-top: solid 1px #cdcdcd; border-bottom: solid 1px #cdcdcd; } section.background-secondary { background: #60c5ba; border-top: solid 1px #338c82; border-bottom: solid 1px #338c82; } .section-inverse { color: #fff; } .section-inverse h1, .section-inverse h2, .section-inverse h3, .section-inverse h4, .section-inverse h5, .section-inverse h6 { color: #fff; } .section-inverse .heading:after { background: #fff; } .italic { font-style: italic; } .img-responsive { margin: 0 auto; } .no-space .box { margin: 0 -15px; } .margin-top { margin-top: 30px; } .margin-top--big { margin-top: 60px !important; } .margin-bottom { margin-bottom: 30px; } .margin-bottom--big { margin-bottom: 60px !important; } .margin-bottom--zero { margin-bottom: 0 !important; } .no-padding-top { padding-top: 0; } .no-padding-bottom { padding-bottom: 0; } .padding--small { padding-top: 30px; padding-bottom: 30px; } .weight-300 { font-weight: 300 !important; } .weight-500 { font-weight: 500 !important; } .weight-700 { font-weight: 700 !important; } .text-gray { color: #555555; } .text-gray-light { color: #999999; } .text-gray-lighter { color: #cdcdcd; } @media (max-width: 991px) { .text-center-mobile { text-align: center !important; } } a, button { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .clickable { cursor: pointer !important; } .required { color: #ef5285; } .accent { color: #ef5285; } .text-uppercase { text-transform: uppercase; letter-spacing: 0.1em; } .list-style-none { list-style: none; } .btn-ghost { color: #ef5285; background-color: transparent; border-color: #ef5285; } .btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active, .btn-ghost.active, .open .dropdown-toggle.btn-ghost { color: #ef5285; background-color: rgba(0, 0, 0, 0); border-color: #ea1a5d; } .btn-ghost:active, .btn-ghost.active, .open .dropdown-toggle.btn-ghost { background-image: none; } .btn-ghost.disabled, .btn-ghost[disabled], fieldset[disabled] .btn-ghost, .btn-ghost.disabled:hover, .btn-ghost[disabled]:hover, fieldset[disabled] .btn-ghost:hover, .btn-ghost.disabled:focus, .btn-ghost[disabled]:focus, fieldset[disabled] .btn-ghost:focus, .btn-ghost.disabled:active, .btn-ghost[disabled]:active, fieldset[disabled] .btn-ghost:active, .btn-ghost.disabled.active, .btn-ghost[disabled].active, fieldset[disabled] .btn-ghost.active { background-color: transparent; border-color: #ef5285; } .btn-ghost .badge { color: transparent; background-color: #ef5285; } .btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active, .btn-ghost.active, .open .dropdown-toggle.btn-ghost { color: #fff; background-color: #ef5285; border-color: #ef5285; } .btn-ghost-black { color: #000000; background-color: transparent; border-color: #000000; } .btn-ghost-black:hover, .btn-ghost-black:focus, .btn-ghost-black:active, .btn-ghost-black.active, .open .dropdown-toggle.btn-ghost-black { color: #000000; background-color: rgba(0, 0, 0, 0); border-color: #000000; } .btn-ghost-black:active, .btn-ghost-black.active, .open .dropdown-toggle.btn-ghost-black { background-image: none; } .btn-ghost-black.disabled, .btn-ghost-black[disabled], fieldset[disabled] .btn-ghost-black, .btn-ghost-black.disabled:hover, .btn-ghost-black[disabled]:hover, fieldset[disabled] .btn-ghost-black:hover, .btn-ghost-black.disabled:focus, .btn-ghost-black[disabled]:focus, fieldset[disabled] .btn-ghost-black:focus, .btn-ghost-black.disabled:active, .btn-ghost-black[disabled]:active, fieldset[disabled] .btn-ghost-black:active, .btn-ghost-black.disabled.active, .btn-ghost-black[disabled].active, fieldset[disabled] .btn-ghost-black.active { background-color: transparent; border-color: #000000; } .btn-ghost-black .badge { color: transparent; background-color: #000000; } .btn-ghost-black:hover, .btn-ghost-black:focus, .btn-ghost-black:active, .btn-ghost-black.active, .open .dropdown-toggle.btn-ghost-black { color: #fff; background-color: #000; border-color: #000; } .btn-white { color: #ffffff; background-color: transparent; border-color: #ffffff; } .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white { color: #ffffff; background-color: rgba(0, 0, 0, 0); border-color: #e0e0e0; } .btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white { background-image: none; } .btn-white.disabled, .btn-white[disabled], fieldset[disabled] .btn-white, .btn-white.disabled:hover, .btn-white[disabled]:hover, fieldset[disabled] .btn-white:hover, .btn-white.disabled:focus, .btn-white[disabled]:focus, fieldset[disabled] .btn-white:focus, .btn-white.disabled:active, .btn-white[disabled]:active, fieldset[disabled] .btn-white:active, .btn-white.disabled.active, .btn-white[disabled].active, fieldset[disabled] .btn-white.active { background-color: transparent; border-color: #ffffff; } .btn-white .badge { color: transparent; background-color: #ffffff; } .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white { color: #ffffff; background-color: #fff; border-color: #fff; } /* ===================== SIDEBAR + RIGHT COLUMN ===================== */ #sidebar { padding-top: 40px; } /*modified sidebar to follow scroll */ .sidebar-content { position: fixed; width: inherit; z-index: 0; padding: 0 1em 0 0.2em; } @media screen and (min-width: 992px) { .sidebar-content { padding-left: 20px; padding-right: 20px; } } .sidebar-heading { font-size: 18px; text-transform: uppercase; letter-spacing: 0.1em; } .sidebar-heading a { color: #000; text-decoration: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .sidebar-heading a:hover { border-bottom: dotted 1px #ef5285; color: #000; text-decoration: none; } .sidebar-p { color: #999999; font-size: 14px; } .sidebar-menu { list-style-type: none; padding-left: 20px; margin-bottom: 40px; } .sidebar-menu li { margin-bottom: 5px; } .sidebar-menu li a { color: #555555; } .sidebar-menu li.active a { color: #ef5285; font-weight: bold; } .sidebar-menu li.active:before { color: #ef5285; } .sidebar-menu li:hover a { text-decoration: none; color: #ef5285; } .sidebar-menu li:hover:before { color: #ef5285; } .content-column { padding-top: 40px; } .content-column.white-background { background: #fff; min-height: 100vh; } .grid { padding-top: 5px; overflow-y: hidden; } .content-column-content { padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } @media (min-width: 1200px) { .content-column-content { padding-left: 40px; padding-right: 40px; } } .content-column-content p.lead { color: #555555; } .content-column-content p, .content-column-content li { color: #999999; } .content-column-content ul li { list-style-type: none; } .small-navbar { margin-bottom: 20px; } .small-navbar:before, .small-navbar:after { content: " "; display: table; } .small-navbar:after { clear: both; } .small-navbar-heading { float: right; font-size: 18px; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 10px; } .small-navbar-heading a { color: #000; text-decoration: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .small-navbar-heading a:hover { border-bottom: dotted 1px #ef5285; color: #000; text-decoration: none; } /* ===================== OFF-CANVAS SIDEBAR BEHAVIOUR ===================== */ @media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; opacity: 1; } .row-offcanvas-right { right: 0; } .row-offcanvas-left { left: 0; } .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ } .row-offcanvas-left .sidebar-offcanvas { left: -48%; /* 6 columns */ } .row-offcanvas-right.active { right: 50%; /* 6 columns */ } .row-offcanvas-left.active { left: 50%; /* 6 columns */ } .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } } /* ===================== SERVICES / INTEGRATIONS ===================== */ .services { margin-top: 80px; text-align: center; } .services .services-heading { text-transform: uppercase; letter-spacing: 0.1em; font-size: 18px; font-weight: 400; color: #999999; margin-bottom: 40px; } .services .heading { font-size: 18px; font-weight: 700; margin-bottom: 20px; text-align: center; } .services .heading:after { content: " "; display: block; width: 100px; height: 1px; margin: 20px auto 20px; background: #ef5285; } .services p { font-size: 14px; line-height: 1.5; margin-bottom: 60px; color: #999999; } /* ===================== CUSTOMERS ===================== */ .customer { text-align: center; } .customer img { display: inline-block; margin-top: 10px; margin-bottom: 10px; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .customer img:hover { -webkit-filter: grayscale(0); filter: grayscale(0); } /* ===================== SIGN UP FORM ===================== */ @media (max-width: 991px) { .sign-up-form .form-control { margin-bottom: 20px; } .sign-up-form .btn { margin-bottom: 20px; } } @media (min-width: 768px) { .sign-up-form .form-control { width: 350px; } } /* ===================== SOCIAL LINKS ===================== */ .contact-form { margin-bottom: 20px; } p.social { margin-top: 20px; } p.social a { margin: 0 10px 10px 0; color: #fff; display: inline-block; width: 40px; height: 40px; border-radius: 20px; line-height: 40px; font-size: 15px; text-align: center; vertical-align: bottom; border: solid 1px #999999; color: #999999; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; /* &.facebook {background-color: #4460ae; border-color: #4460ae;} &.gplus {background-color: #c21f25; border-color: #c21f25;} &.twitter {background-color: #3cf; border-color: #3cf;} &.instagram {background-color: #cd4378; border-color: #cd4378;} &.email {background-color: #4a7f45; border-color: #4a7f45;} &.link {background-color: #871AFF; border-color: #871AFF;} */ } p.social a:hover { color: #ef5285; border-color: #ef5285; } p.social a i { vertical-align: bottom; line-height: 40px; } p.social.social--outline a { background: transparent; } p.social.social--outline a.facebook { color: #4460ae; border-color: #4460ae; } p.social.social--outline a.gplus { color: #c21f25; border-color: #c21f25; } p.social.social--outline a.twitter { color: #3cf; border-color: #3cf; } p.social.social--outline a.instagram { color: #cd4378; border-color: #cd4378; } p.social.social--outline a.email { color: #4a7f45; border-color: #4a7f45; } p.social.social--outline a.link { color: #871AFF; border-color: #871AFF; } p.social.social--big a { width: 60px; height: 60px; border-radius: 30px; line-height: 60px; font-size: 25px; } p.social.social--big i { line-height: 60px; } /* ===================== COPYRIGHT ===================== */ .copyright { color: #999999; font-size: 13px; } .copyright p.credit { margin-bottom: 10px; } .copyright p.credit a { color: #999999; } @media (max-width: 991px) { .copyright p.credit { text-align: center !important; } } @media (max-width: 991px) { .copyright { text-align: center !important; } } /* ===================== MAIN PORTFOLIO SLIDER ===================== */ #main-slider { margin-bottom: 40px; opacity: 0; } #main-slider ul li div { width: 100%; } #main-slider .owl-wrapper-outer { box-shadow: 0 1px 5px #ccc; } #main-slider .owl-controls .owl-buttons { display: none; } #main-slider .owl-controls .owl-page.active span, #main-slider .owl-controls.clickable .owl-page:hover span { background: #ef5285; } /* ===================== ABOUT ===================== */ .progress-title { text-align: left; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #999999; font-size: 12px; } .progress-bar-skill1 { background-color: #d1d1d1; background-color: #f8afc7; } .progress-striped .progress-bar-skill1 { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-striped .progress-bar-skill1 { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-skill2 { background-color: #c8c7c7; background-color: #f598b6; } .progress-striped .progress-bar-skill2 { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-striped .progress-bar-skill2 { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-skill3 { background-color: #bdbdbd; background-color: #f381a6; } .progress-striped .progress-bar-skill3 { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-striped .progress-bar-skill3 { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-skill4 { background-color: #b3b2b2; background-color: #f16995; } .progress-striped .progress-bar-skill4 { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-striped .progress-bar-skill4 { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-bar-skill5 { background-color: #a9a8a8; background-color: #ef5285; } .progress-striped .progress-bar-skill5 { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress-striped .progress-bar-skill5 { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } /* ===================== EKKO LIGHTBOX ===================== */ .ekko-lightbox-container { position: relative; } .ekko-lightbox-nav-overlay { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; } .ekko-lightbox-nav-overlay a { z-index: 100; display: block; width: 49%; height: 100%; font-size: 30px; color: #fff; opacity: 0; text-decoration: none !important; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; } .ekko-lightbox-nav-overlay a:empty { width: 49%; color: transparent; } .ekko-lightbox a:hover, a:focus, a:active { text-decoration: none; opacity: 1; color: #fff; } .ekko-lightbox .glyphicon-chevron-left { left: 0; float: left; padding-left: 15px; text-align: left; } .ekko-lightbox .glyphicon-chevron-right { right: 0; float: right; padding-right: 15px; text-align: right; } .ekko-lightbox .modal-footer { text-align: left; } .grid { margin-right: -15px; margin-left: -15px; } .box-masonry { background: #fff; margin-bottom: 30px; position: relative; box-shadow: 0 0 5px #ccc; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; overflow: hidden; text-overflow: ellipsis; } .box-masonry h4 { font-size: 16px; line-height: 1.5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .box-masonry h4 a { color: #000; border-bottom: solid 1px transparent; } .box-masonry h4 a:hover { border-bottom: dotted 1px #ef5285; color: #000; text-decoration: none; } .box-masonry .box-masonry-text { padding: 15px 20px 15px; } .box-masonry .box-masonry-text p { color: #999999; font-size: 14px; } .box-masonry .box-masonry-hover-text-header { position: absolute; left: 0; right: 0; top: 0; padding: 15px 20px 15px; opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; color: #555555; } .box-masonry .box-masonry-hover-text-header p { font-size: 14px; } .box-masonry .box-masonry-hover-text-header h4 a { color: #555555; } .box-masonry .box-masonry-hover-center { position: absolute; width: 100%; top: 30%; opacity: 0; padding-left: 20px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-align: center; } .box-masonry .box-masonry-hover-center .see-more-icon { color: #555555; font-size: 50px; } .box-masonry:hover { box-shadow: 0 0 5px #999; } .box-masonry:hover .box-masonry-hover-text-header { opacity: 1; } .box-masonry:hover .box-masonry-hover-center { opacity: 1; } .box-masonry:hover .box-masonry-image.with-hover-overlay:before { opacity: 0.8; } .box-masonry:hover .box-masonry-image.with-hover-icon:after { opacity: 0.7; } .box-masonry h2:last-child, .box-masonry p:last-child { margin-bottom: 0; } .box-masonry .box-masonry-image { display: block; position: relative; min-height: 100px; background: #ccc; } .box-masonry .box-masonry-image.with-hover-overlay:before { display: block; position: absolute; content: " "; background: #fff; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .box-masonry .box-masonry-image:hover { text-decoration: none; } .box-simple { text-align: center; margin-bottom: 48px; } .box-simple h3 { font-weight: normal; font-size: 24px; line-height: 1.5; color: #555555; font-weight: 400; } .box-simple h3 a { color: #555555; } .box-simple p { color: #999999; } .box-simple:hover .icon { -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .box-simple:hover .icon i { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .box-simple.box-white { padding: 20px; border: dotted 1px #999999; } .box-simple.box-white .icon { color: #555555; border-color: transparent; font-size: 70px; } .box-simple.box-dark { padding: 20px; border: dotted 1px #999999; background: #555555; color: #fff; } .box-simple.box-dark .icon { color: #f7f7f7; border-color: transparent; font-size: 70px; } .box-simple.box-dark h3 { color: #fff; } .box-simple.box-dark h3 a { color: #fff; } .box-simple.box-dark p { color: #fff; } .box-image { position: relative; overflow: hidden; text-align: center; margin: 15px 0; } .box-image .bg { position: absolute; top: auto; bottom: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); background: #ef5285; } .box-image .name { position: absolute; width: 100%; height: 50%; bottom: 0; -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; color: #fff; padding: 0 20px; } .box-image .name h3 { color: #fff; text-transform: uppercase; font-size: 24px; letter-spacing: 0.08em; } .box-image .name h3 a { color: #fff; text-decoration: none; } .box-image .text { position: absolute; width: 100%; height: 50%; top: 0; -webkit-transform: translate(0, -150%); -ms-transform: translate(0, -150%); transform: translate(0, -150%); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; color: #fff; padding: 0 20px; } .box-image:hover .bg { opacity: 0.7; filter: alpha(opacity=70); } .box-image:hover .name { position: absolute; -webkit-transform: translate(0, -75%); -ms-transform: translate(0, -75%); transform: translate(0, -75%); } .box-image:hover .text { position: absolute; -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); } .box-image-text { position: relative; background: #fff; overflow: hidden; text-align: center; margin: 15px 0; } .box-image-text .top { position: relative; margin-bottom: 10px; } .box-image-text .top .bg { position: absolute; top: auto; bottom: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); background: #fff; } .box-image-text .top .logo { width: 100%; position: absolute; text-align: center; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .box-image-text .top .name { position: absolute; width: 100%; height: 50%; bottom: 0; -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; color: #fff; padding: 0 20px; } .box-image-text .top .name h3 { color: #fff; text-transform: uppercase; font-size: 24px; letter-spacing: 0.08em; } .box-image-text .top .name h3 a { color: #fff; text-decoration: none; } .box-image-text .top .name h4 { color: #fff; text-transform: uppercase; font-size: 24px; letter-spacing: 0.08em; } .box-image-text .top .name h4 a { color: #fff; text-decoration: none; } .box-image-text .top .text { position: absolute; width: 100%; height: 50%; top: 0; -webkit-transform: translate(0, -150%); -ms-transform: translate(0, -150%); transform: translate(0, -150%); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; color: #fff; padding: 0 20px; } .box-image-text .content { padding: 15px 15px 0 15px; } .box-image-text .content h3, .box-image-text .content h4 { text-transform: uppercase; line-height: 1.5; color: #555555; font-weight: 800; letter-spacing: 0.08em; } .box-image-text .content p { color: #999999; } .box-image-text.bg-visible .bg { opacity: 0.8; filter: alpha(opacity=80); } .box-image-text:hover .bg { opacity: 0.7; filter: alpha(opacity=70); } .box-image-text:hover .name { position: absolute; -webkit-transform: translate(0, -75%); -ms-transform: translate(0, -75%); transform: translate(0, -75%); } .box-image-text:hover .text { position: absolute; -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); } /* ===================== STYLE SWITCHER FOR DEMO ===================== */ #style-switch-button { position: fixed; bottom: 200px; left: 0px; border-radius: 0; z-index: 2; } #style-switch { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 300px; padding: 20px; position: fixed; bottom: 240px; left: 0; background: #fff; border: solid 1px #cdcdcd; z-index: 2000; } #style-switch h4 { color: #555555; } /* ========================================= */ /* THEMING OF BOOTSTRAP COMPONENTS */ /* ========================================= */ /* nav */ .nav { margin-bottom: 0; padding-left: 0; list-style: none; } .nav > li > a { padding: 10px 15px; } .nav > li > a:hover, .nav > li > a:focus { background-color: #cdcdcd; } .nav > li.disabled > a { color: #999999; } .nav > li.disabled > a:hover, .nav > li.disabled > a:focus { color: #999999; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #cdcdcd; border-color: #ef5285; } .nav-tabs { border-bottom: 1px solid #dddddd; } .nav-tabs > li > a { line-height: 1.55; border-radius: 0 0 0 0; } .nav-tabs > li > a:hover { border-color: #cdcdcd #cdcdcd #dddddd; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; background-color: #f4f4f4; border: 1px solid #dddddd; } .nav-pills > li > a { border-radius: 0; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #ffffff; background-color: #ef5285; } .nav-tabs-justified > li > a { border-radius: 0; } .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { border: 1px solid #dddddd; } @media (min-width: 768px) { .nav-tabs-justified > li > a { border-bottom: 1px solid #dddddd; border-radius: 0 0 0 0; } .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { border-bottom-color: #f4f4f4; } } /* navbar */ .navbar { min-height: 80px; margin-bottom: 0; border-top: none; border-bottom: none; } @media (min-width: 768px) { .navbar { border-radius: 0; } } .navbar-collapse { max-height: 340px; overflow-x: visible; padding-right: 15px; padding-left: 15px; } .navbar-collapse.in { overflow-y: auto; } @media (min-width: 768px) and (max-width: 991px) { .navbar-collapse { font-size: 14px; } } @media (min-width: 768px) { .navbar-collapse { width: auto; border-top: 0; box-shadow: none; } .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-collapse.in { overflow-y: visible; } .navbar-collapse.right { float: right; } .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-left: 0; padding-right: 0; } } .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: -15px; margin-left: -15px; } @media (min-width: 768px) { .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: 0; margin-left: 0; } } .navbar-brand { float: left; padding: 10px 15px; font-size: 20px; line-height: 24px; height: 80px; } .navbar-brand:hover, .navbar-brand:focus { text-decoration: none; } @media (min-width: 768px) { .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: -15px; } } .navbar-toggle { padding: 9px 10px !important; margin-right: 15px; border-radius: 0; } .navbar-nav { margin: 14px -15px; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 24px; } @media (max-width: 767px) { .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { line-height: 24px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } } @media (min-width: 768px) { .navbar-nav { margin: 0 auto; display: table; table-layout: fixed; float: left; } .navbar-nav > li { float: left; } .navbar-nav > li > a { padding-top: 28px; padding-bottom: 28px; } .navbar-nav.navbar-right:last-child { margin-right: -15px; } } .navbar-form { margin-left: -15px; margin-right: -15px; padding: 10px 15px; border: none; margin-top: 21px; margin-bottom: 21px; } @media (max-width: 767px) { .navbar-form .form-group { margin-bottom: 5px; } } .navbar-btn { margin-top: 21px; margin-bottom: 21px; } .navbar-btn.btn-sm { margin-top: 23.5px; margin-bottom: 23.5px; } .navbar-btn.btn-xs { margin-top: 29px; margin-bottom: 29px; } .navbar-text { margin-top: 28px; margin-bottom: 28px; } @media (min-width: 768px) { .navbar-text { float: left; margin-left: 15px; margin-right: 15px; } .navbar-text.navbar-right:last-child { margin-right: 0; } } .navbar-default { background-color: #ffffff; border-bottom-color: transparent; } .navbar-default .navbar-brand { color: #60c5ba; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #41b1a5; background-color: transparent; } .navbar-default .navbar-text { color: #777777; } .navbar-default .navbar-nav > li > a { color: #60c5ba; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #f381a6; background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #f381a6; background-color: transparent; } .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus { color: #cccccc; background-color: transparent; } .navbar-default .navbar-toggle { border-color: transparent; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; } .navbar-default .navbar-toggle .icon-bar { background-color: #60c5ba; } .navbar-default .navbar-collapse { border-color: transparent; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: transparent; color: #f381a6; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #60c5ba; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #f381a6; background-color: transparent; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #f381a6; background-color: transparent; } .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #cccccc; background-color: transparent; } } .navbar-default .navbar-link { color: #60c5ba; } .navbar-default .navbar-link:hover { color: #f381a6; } /* dropdowns */ .dropdown-menu { z-index: 1000; font-size: 14px; background-color: #ffffff; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0; } .dropdown-menu .divider { height: 1px; margin: 11px 0; overflow: hidden; background-color: #e5e5e5; } .dropdown-menu > li > a { line-height: 1.55; color: #555555; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; background-color: #f5f5f5; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #ef5285; } /* modal */ .modal-content { background-color: #ffffff; border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0; } /* scaffolding */ body { font-size: 16px; line-height: 1.55; color: #000000; background-color: #f4f4f4; } a { color: #ef5285; text-decoration: none; } a:hover, a:focus { color: #e01557; text-decoration: underline; } a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .img-rounded { border-radius: 0; } hr { margin-top: 24px; margin-bottom: 24px; border: 0; border-top: 1px solid #cdcdcd; } .progress { overflow: hidden; height: 24px; margin-bottom: 24px; background-color: #f5f5f5; border-radius: 0; -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); } .progress-bar { float: left; width: 0%; height: 100%; font-size: 14px; line-height: 24px; text-align: center; -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); -webkit-transition: width 0.6s ease; transition: width 0.6s ease; } /* breadcrumbs */ .breadcrumb { padding: 8px 0; margin-bottom: 24px; background-color: transparent; border-radius: 0; text-align: center; } .breadcrumb > li + li:before { content: "/\00a0"; color: #cccccc; } .breadcrumb > .active { color: #999999; } .breadcrumb a { color: #ef5285; } @media (max-width: 991px) { .breadcrumb { padding: 8px 0; text-align: center; } } /* buttons */ .btn { font-weight: 400; padding: 6px 12px; font-size: 16px; line-height: 1.55; border-radius: 0; } .btn-primary { color: #ffffff; background-color: #ef5285; border-color: #ef5285; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { color: #ffffff; background-color: #ec2d6b; border-color: #ea1a5d; } .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { background-image: none; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { background-color: #ef5285; border-color: #ef5285; } .btn-primary .badge { color: #ef5285; background-color: #ffffff; } .btn-transparent { color: #555555; background-color: transparent; border-color: #555555; } .btn-transparent:hover, .btn-transparent:focus, .btn-transparent:active, .btn-transparent.active, .open .dropdown-toggle.btn-transparent { color: #555555; background-color: rgba(0, 0, 0, 0); border-color: #373737; } .btn-transparent:active, .btn-transparent.active, .open .dropdown-toggle.btn-transparent { background-image: none; } .btn-transparent.disabled, .btn-transparent[disabled], fieldset[disabled] .btn-transparent, .btn-transparent.disabled:hover, .btn-transparent[disabled]:hover, fieldset[disabled] .btn-transparent:hover, .btn-transparent.disabled:focus, .btn-transparent[disabled]:focus, fieldset[disabled] .btn-transparent:focus, .btn-transparent.disabled:active, .btn-transparent[disabled]:active, fieldset[disabled] .btn-transparent:active, .btn-transparent.disabled.active, .btn-transparent[disabled].active, fieldset[disabled] .btn-transparent.active { background-color: transparent; border-color: #555555; } .btn-transparent .badge { color: transparent; background-color: #555555; } .btn-transparent:hover, .btn-transparent:focus, .btn-transparent:active, .btn-transparent.active { background: #ffffff; color: #ef5285; } .btn-lg { padding: 10px 16px; font-size: 20px; line-height: 1.33; border-radius: 0; } .btn-sm { padding: 5px 10px; font-size: 14px; line-height: 1.5; border-radius: 0; } .btn-xs { padding: 1px 5px; font-size: 14px; line-height: 1.5; border-radius: 0; } /* dropdowns */ .dropdown-menu > li > a { padding: 8px 20px; } /* labels */ .label { font-weight: normal; text-transform: uppercase; } /* forms.less */ label { font-weight: normal; color: #555555; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; } .form-control { display: block; width: 100%; height: 38px; padding: 6px 12px; font-size: 16px; line-height: 1.55; color: #555555; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .form-control::-moz-placeholder { color: #999999; opacity: 1; } .form-control:-ms-input-placeholder { color: #999999; } .form-control::-webkit-input-placeholder { color: #999999; } .form-control:focus { border-color: #ef5285; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(239, 82, 133, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(239, 82, 133, 0.6); } .form-group { margin-bottom: 20px; } /* pager*/ .pager { margin: 24px 0; border-top: solid 1px #cdcdcd; padding-top: 24px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; font-weight: bold; } .pager li { display: inline; } .pager li > a, .pager li > span { background-color: #ffffff; border: 1px solid #ef5285; border-radius: 0; } .pager li > a:hover, .pager li > a:focus { text-decoration: none; color: #fff; background-color: #ef5285; } .pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span { color: #999999; background-color: #ffffff; border-color: #ddd; } /* pagination */ .pagination { margin: 24px 0; border-radius: 0; } .pagination > li > a, .pagination > li > span { padding: 6px 12px; line-height: 1.55; text-decoration: none; color: #ef5285; background-color: #ffffff; border: 1px solid #dddddd; } .pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; } .pagination > li:last-child > a, .pagination > li:last-child > span { border-bottom-right-radius: 0; border-top-right-radius: 0; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { color: #ef5285; background-color: #fcdee8; border-color: #dddddd; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 2; color: #ffffff; background-color: #ef5285; border-color: #ef5285; } .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { color: #999999; background-color: #ffffff; border-color: #dddddd; } /* responsive utilities */ @media (max-width: 767px) { .text-center-xs { text-align: center !important; } .text-center-xs img { display: block; margin-left: auto; margin-right: auto; } } @media (min-width: 768px) and (max-width: 991px) { .text-center-sm { text-align: center !important; } .text-center-sm img { display: block; margin-left: auto; margin-right: auto; } } /* type */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; line-height: 1.2; color: #000000; } h1, .h1 { font-size: 48px; } h2, .h2 { font-size: 38px; } h3, .h3 { font-size: 32px; font-weight: 700; } h4, .h4 { font-size: 24px; font-weight: 700; } h5, .h5 { font-size: 16px; font-weight: 700; } h6, .h6 { font-size: 14px; font-weight: 700; } h1, .h1, h2, .h2, h3, .h3 { margin-top: 0; margin-bottom: 24px; } p { margin: 0 0 24px; } .lead { margin-bottom: 24px; font-size: 18px; } @media (min-width: 768px) { .lead { font-size: 24px; } } .text-small { font-size: 14px; } .text-large { font-size: 20px; } .text-italic { font-style: italic; } .text-primary { color: #ef5285; } a.text-primary:hover { color: #eb2364; } .bg-primary { color: #fff; background-color: #ef5285; } a.bg-primary:hover { background-color: #eb2364; } abbr[title], abbr[data-original-title] { border-bottom: 1px dotted #999999; } blockquote { padding: 12px 24px; margin: 0 0 24px; font-size: 16px; border-left: 5px solid #ef5285; } blockquote footer, blockquote small, blockquote .small { display: block; font-size: 80%; line-height: 1.55; color: #999999; } blockquote footer:before, blockquote small:before, blockquote .small:before { content: '\2014 \00A0'; } .blockquote-reverse, blockquote.pull-right { border-right: 5px solid #ef5285; } address { margin-bottom: 24px; line-height: 1.55; } .panel { margin-bottom: 24px; background-color: #ffffff; border: 1px solid transparent; border-radius: 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; } .panel-default { border-color: #666666; } .panel-default > .panel-heading { color: #333333; background-color: #ffffff; border-color: #666666; } .panel-default > .panel-heading + .panel-collapse .panel-body { border-top-color: #666666; } .panel-default > .panel-footer + .panel-collapse .panel-body { border-bottom-color: #666666; } .panel-primary { border-color: #ef5285; } .panel-primary > .panel-heading { color: #ffffff; background-color: #ef5285; border-color: #ef5285; } .panel-primary > .panel-heading + .panel-collapse .panel-body { border-top-color: #ef5285; } .panel-primary > .panel-footer + .panel-collapse .panel-body { border-bottom-color: #ef5285; } .panel-primary .panel-title { font-weight: 300; } .panel-primary .panel-title a:hover { color: #fff; text-decoration: none; } a.badge:hover, a.badge:focus { color: #ffffff; text-decoration: none; cursor: pointer; } a.list-group-item.active > .badge, .nav-pills > .active > a > .badge { color: #ef5285; background-color: #ffffff; } .nav-pills > li > a > .badge { margin-left: 3px; }