Template:Nankai/blue-schemeCSS
/*
Medigo Template (Blue)
- /
/*------------------------------------------------------ BASIC STYLES
*/
body {
width:100%; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%;
} h2 {
} h1, h3, h4, h5, h6 {
}
p img {
margin: 0;
}
strong, b {
color: #31373a;
}
a, a:visited {
color: #00a8d6; text-decoration: none !important; outline: 0;
}
a:hover, a:focus, a:active {
color: #777777;
}
p a, p a:visited {
line-height: inherit;
}
- -moz-selection {
background-color: #d3dde0; text-shadow: none;
}
- -webkit-selection {
background-color: #d3dde0; text-shadow: none;
}
- selection {
background-color: #d3dde0; text-shadow: none;
}
img::selection {
background-color: transparent;
}
img::-moz-selection {
background-color: transparent;
}
.subtract-bottom {
margin-bottom: -40px !important;
}
.remove-bottom {
margin-bottom: 0 !important;
}
.half-bottom {
margin-bottom: 20px !important;
}
- focus {
outline: 0;
}
.footer-menu, .copyright-text {
text-align: center;
}
- filters, .pages, .project-single .meta-post, .archive-wrapper .archive-list, .categories ul, .thumbs, .footer-menu {
list-style: none; padding: 0; margin: 0; }
a, a:visited {
-webkit-transition: all 150ms ease-in; -moz-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in;
}
.service-section, .first-widget {
position: relative;
}
.light-content, #blogPosts {
margin-top: 100px;
}
input.mainBtn:focus,
input.mainBtn {
background-color: #00a8d6; border: 0;
}
- homeIntro {
margin-top: 108px; width: 100%;
}
- portfolio {
background-image: url("../images/includes/portfolio.jpg");
}
- portfolioId {
background-image: url("../images/includes/portfolioId.jpg");
}
- blogPosts {
background-image: url("../images/includes/blogPosts.jpg");
}
- blogId {
background-image: url("../images/includes/blogId.jpg"); background-attachment: inherit;
}
- contact {
background-image: url("../images/includes/contact.jpg");
}
.parallax {
background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size: cover; color: #fff; overflow: hidden;
}
.parallax-overlay {
background-color: rgba(0, 0, 0, 0.65); width:100%;
} .pageTitle {
padding-top: 70px; padding-bottom: 70px;
}
.home-intro-content {
padding: 11em 0; text-align: center;
}
.home-intro-content .large-button:hover {
opacity: 0.8;
}
blockquote {
margin: 30px 0; display: block; color: #aaaaaa;
}
/*------------------------------------------------------ Call To Action
*/
.cta {
padding: 35px 0; border-bottom: 1px solid #dce4e6; text-align: center;
}
/*------------------------------------------------------
Services Styling
*/
.service-box-wrap {
text-align: center; margin-bottom: 80px;
}
.service-icon-wrap {
display: block;
} .service-icon-wrap i {
color: #00a8d6;
}
/*------------------------------------------------------ Portfolio Styling
*/
.portfolio {
margin-top: 40px;
}
- Grid .mix {
display: none; opacity: 0;
}
- filters {
margin: 100px 0 60px 0;
}
- filters li {
display: inline; margin-right: 20px; cursor: pointer; color: #31373a;
}
- filters li:after {
content: '/'; color: #c3c3c3; margin-left: 20px;
}
- filters li:last-child:after {
content: ;
}
- filters li.active {
color: #00a8d6;
}
.pages {
margin: 20px 0 100px 0;
} .pages li {
display: inline; margin-right: 10px;
} .pages li a {
padding: 10px 12px; background-color: #f1f4f5; color: #31373a;
} .pages li a.active {
color: #00a8d6;
}
/**** Isotope Filtering ****/ .isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none; z-index: 1;
}
/**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s;
}
.portfolio-holder .item {
margin: 0 1px 40px 1px;
} .portfolio-holder .item img {
display: block; width: 100%; height: auto;
}
.portfolio-post {
overflow: hidden; margin-bottom: 30px;
}
.thumb-post {
display: block; position: relative; overflow: hidden;
} .thumb-post .overlay {
position: absolute; top: 0; left: 0; min-width: 100%; height: 100%; visibility: hidden; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out;
} .thumb-post .overlay .overlay-inner {
background: #00a8d6; height: 100%; position: relative;
} .thumb-post:hover .overlay {
opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}
.portfolio-infos {
position: absolute; bottom: 30px; left: 30px;
} .portfolio-infos a {
color: white;
} .portfolio-expand {
position: absolute; top: 30px; right: 30px; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.9); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; text-align: center; line-height: 40px;
} .portfolio-expand a {
display: block; color: #31373a; opacity: 1;
}
.owl-next {
position: absolute; top: 50%; right: 0; width: 40px; height: 48; content: 'ddd'; margin-right: 2px; margin-top: -25px;
} .owl-next:after {
content: '\f054'; color: #31373a; line-height: 48px; text-align: center;
}
.owl-prev {
position: absolute; top: 50%; left: 0; width: 40px; height: 48px; margin-left: 1px; margin-top: -25px;
} .owl-prev:after {
content: '\f053'; color: #31373a; line-height: 48px; text-align: center;
}
.project-single {
margin-top: 100px; margin-bottom: 100px;
}
.project-single .description {
margin-bottom: 40px;
} .project-single .meta-post li {
display: block; margin-bottom: 15px;
} .project-single .meta-post li span {
color: #31373a; margin-right: 10px;
} .project-single .meta-post li a {
color: #777777;
} .project-single .meta-post li a:hover {
color: #00a8d6;
}
.project-img {
overflow: hidden;
} .project-img img {
width: 100%; height: auto;
}
.static-info-project {
background-color: #f1f4f5; padding: 80px 0; text-align: center;
}
.related-projects {
margin: 100px 0 60px 0;
}
.flex-direction-nav a {
width: 40px; height: 44px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
}
/*------------------------------------------------------ Testimonials Styling
*/
.testimonials-widget {
background-color: #f1f4f5; padding: 80px 0;
}
.testimonial {
text-align: center;
}
.testimonial-content {
width: 80%; margin: 0 auto;
}
.testimonial-author {
margin-bottom: 40px; color: #aaaaaa;
} .testimonial-author:before, .testimonial-author:after {
content: "-"; color: #c3c3c3; margin: 0 10px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: transparent; text-indent: -9999px; display: block; width: 12px; height: 12px; margin: 0 6px; outline: 0; border: 2px solid #aaaaaa; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #00a8d6; border-color: #00a8d6;
}
/*------------------------------------------------------ Our Team Styling
*/
.thumb-post {
height: auto;
} .thumb-post img {
width: 100%; height: auto;
}
/*------------------------------------------------------ Blog Styling
*/
- blogPosts .section-header {
margin-top: 70px;
}
- blogPosts h2.section-title {
color: white;
}
.latest-posts {
padding-bottom: 80px;
} .latest-posts .thumb-post {
overflow: hidden; width: 80px; height: 80px; border: 3px solid white; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; float: left;
} .latest-posts .blog-post-content {
overflow: hidden;
}
.post-blog {
margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px solid #dce4e6;
} .post-blog .blog-image {
overflow: hidden; margin-bottom: 20px;
} .post-blog .blog-image img {
width: 100%; height: auto;
}
.post-blog .blog-content span a {
color: #aaaaaa;
} .post-blog .blog-content span a:hover {
color: #00a8d6;
}
.post-blog .blog-content h3 a {
color: #31373a;
} .post-blog .blog-content h3 a:hover {
color: #00a8d6;
}
.meta-date:after, .meta-comments:after {
content: '/'; margin-left: 10px;
}
.tag-items {
margin-top: 50px; display: block;
} .tag-items a {
padding: 8px 12px; background-color: #f1f4f5; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;
}
- blog-author {
border-bottom: 1px solid #dce4e6; padding-bottom: 20px;
}
- blog-author .blog-author-img {
overflow: hidden; width: 80px; height: 80px; margin-right: 25px;
}
- blog-author .blog-author-img img {
width: 100%; height: 100%;
}
- blog-author .blog-author-info {
overflow: hidden;
}
- blog-author .blog-author-info h4.author-name a {
color: #31373a;
}
- blog-comments {
margin-top: 60px; margin-bottom: 100px;
}
- blog-comments .blog-comments-content {
margin-top: 50px;
}
- blog-comments .media {
display: block; margin-top: 30px; border-bottom: 1px solid #dce4e6;
}
- blog-comments .media .media {
padding-top: 30px; border-top: 1px solid #dce4e6; border-bottom: 0;
}
- blog-comments .media-object {
margin-right: 10px;
}
- blog-comments .media-heading a span:last-of-type:after {
content: ;
}
.comment-form {
margin-bottom: 100px;
} .comment-form .widget-inner {
margin-top: 40px;
} .comment-form #email-id, .comment-form #name-id, .comment-form #site-id, .comment-form textarea {
width: 100%; min-width: 100%; max-width: 100%;
} .comment-form input.mainBtn {
width: auto;
}
.archive-wrapper {
margin-bottom: 100px;
}
.archive-wrapper .archive-list {
margin-top: 20px;
} .archive-wrapper .archive-list li {
line-height: 28px;
} .archive-wrapper .archive-list li:before {
content: '-'; color: #aaaaaa; margin-right: 10px;
}
/*------------------------------------------------------ Sidebar Styling
*/
.sidebar {
margin-top: 100px;
}
.last-post {
padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #dce4e6;
} .last-post .thumb {
overflow: hidden; margin-right: 15px;
} .last-post .thumb img {
width: 100%;
} .last-post .content {
overflow: hidden;
}
.last-post .content h4 a {
color: #31373a;
} .last-post .content h4 a:hover {
color: #00a8d6;
}
.categories ul li:before {
content: '-'; color: #aaaaaa; margin-right: 10px;
}
.thumbs {
margin-left: -6px; overflow: hidden;
}
.thumbs li {
list-style: none; float: left; margin: 6px; width: 76px; height: 76px; overflow: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.thumbs li img {
display: block; width: 100%; padding: 3px; background-color: #f1f4f5;
}
.thumbs li a img {
border: none;
}
/*------------------------------------------------------
Contact Page Styling
*/
.contact-wrapper h3 {
margin: 0 0 30px 0;
}
.contact-map {
margin-top: 30px;
}
.contact-form {
margin-top: 50px; margin-bottom: 100px; padding-top: 50px; border-top: 1px solid #dce4e6;
} .contact-form h3 {
margin: 0 0 40px 0;
} .contact-form .widget-inner {
margin-top: 40px;
} .contact-form #email, .contact-form #name, .contact-form #subject, .contact-form textarea {
width: 100%; min-width: 100%; max-width: 100%;
} .contact-form input.mainBtn {
width: auto;
} .contact-form textarea {
min-height: 160px;
}
- result {
margin-top: 30px; color: white;
}
- result .success {
background-color: #84c333; padding: 14px 20px;
}
- result .error {
background-color: #d15858; padding: 14px 20px;
}
/*------------------------------------------------------ RESPONSIVE STYLES
*/
.first-widget { margin-top: 0; }
.blog-post .thumb-post { float: none; }
.blog-post { margin-bottom: 50px; text-align: center; }
.testimonial-content { width: 100%; }
.blog-post .thumb-post { margin: 0 auto 40px auto; }
.project-img { margin-bottom: 40px; display: block; }
}
.cta .cta-title { display: block; margin-bottom: 30px; }
.pageTitle { text-align: center; } .pageTitle .text-right { text-align: center; }
.page-location { display: inline-block; margin-top: 30px; }
.isotope-item { width: 100%; height: auto; }
}