/* ========================================= ========================================= 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; } /* ===================== 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 */ } } /* ===================== 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; } .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; } /* 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; }