<!DOCTYPE html>
Medigo Blue, free responsive template
/*------------------------------------------------------
HEADER STYLES
--------------------------------------------------------*/
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
-moz-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
z-index: 9999;
padding: 35px 0;
overflow: visible;
transition: padding 0.3s ease-in-out;
-moz-transition: padding 0.3s ease-in-out;
-webkit-transition: padding 0.3s ease-in-out;
}
.site-header.site-header-shrink {
padding: 17px 0;
}
.main-nav ul li {
float: left;
display: block;
margin-left: 20px;
position: relative;
}
.main-nav ul li a {
color: #31373a;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
font-family: "Raleway", sans-serif;
padding: 5px 15px;
display: block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.main-nav ul li a:hover {
color: #00a8d6;
}
.main-nav ul li a i {
margin-left: 7px;
}
.main-nav ul li.active a {
color: #00a8d6;
background-color: #f1f4f5;
}
.main-nav ul li ul {
display: none;
top: 100%;
left: 0;
margin-top: 5px;
position: absolute;
width: 220px;
background-color: white;
border: 2px solid #f1f4f5;
}
.main-nav ul li ul li {
margin-left: 0;
width: 100%;
border-bottom: 1px solid #dce4e6;
}
.main-nav ul li ul li:last-child {
border-bottom: none;
}
.main-nav ul li ul li a {
background-color: transparent !important;
color: #777777 !important;
text-transform: capitalize;
font-weight: 600;
}
.main-nav ul li ul li a:hover {
color: #00a8d6 !important;
}
.main-nav ul li ul li:last-child a {
border-bottom: none;
}
a.menu-toggle-btn {
float: right;
margin-right: 20px;
color: #31373a;
font-size: 14px;
display: block;
}
a.menu-toggle-btn i {
font-size: 18px;
}
.main_menu li {
border-bottom: 1px solid #485156;
padding: 10px 0;
}
.main_menu li:first-child {
padding-top: 0;
}
.main_menu li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.main_menu li a {
font-size: 14px;
font-family: "Raleway", sans-serif;
color: #bfbfbf;
font-weight: 500;
}
.main_menu li ul li {
margin-left: 20px;
}
.main_menu li ul li:first-child {
border-top: 1px solid #485156;
padding-top: 8px;
margin-top: 10px;
}
.main_menu li ul li:before {
content: '-';
color: gray;
margin-right: 10px;
}
.responsive_menu {
padding: 20px;
background-color: rgba(49, 55, 58, 0.98);
display: none;
position: relative;
z-index: 9999;
}
/*------------------------------------------------------
General Styling
--------------------------------------------------------*/
.light-content {
background-color: white;
width: 100%;
}
.dark-content {
background-color: #31373a;
width: 100%;
padding: 70px 0 80px 0;
}
.dark-content .section-header .section-title {
color: white;
}
.dark-content .section-header .section-desc {
color: #939ea4;
}
.section-header {
padding-bottom: 70px;
text-align: center;
}
.section-header .section-title {
font-size: 30px;
font-weight: 600;
}
.larger-text {
font-size: 18px;
line-height: 36px;
}
.light-text {
color: #aaaaaa;
}
.large-button {
padding: 15px 20px;
font-size: 12px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-weight: 800;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
a.large-button.white-color {
color: #31373a;
background-color: white;
}
.main-button {
padding: 12px 15px;
font-size: 12px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-weight: 700;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
a.main-button.accent-color {
background-color: #00a8d6;
color: white;
}
a.main-button.accent-color:hover {
background-color: #31373a;
}
.icon-button {
margin-left: 15px;
}
.last-item-margin {
margin-bottom: 100px;
}
label {
font-weight: normal;
color: #aaaaaa;
}
input, textarea {
border: 0;
color: #777777;
padding: 8px 14px;
background-color: #f1f4f5;
border: 1px solid #f1f4f5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
input:focus,
textarea:focus {
background-color: white;
border-color: #dce4e6;
}
.mainBtn {
background-color: #00a8d6;
padding: 7px 17px;
color: white;
display: inline-block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-transition: background 250ms ease-in;
-moz-transition: background 250ms ease-in;
-ms-transition: background 250ms ease-in;
-o-transition: background 250ms ease-in;
transition: background 250ms ease-in;
}
.mainBtn:hover {
background-color: #00b8ea;
}
button {
outline: 0;
border: 0;
}
input.mainBtn:focus,
input.mainBtn {
background-color: #00a8d6;
border: 0;
}
#homeIntro {
background-image: url("../images/includes/homeintro.jpg");
}
#portfolio {
background-image: url("../images/includes/portfolio.jpg");
}
#portfolioId {
background-image: url("../images/includes/portfolioId.jpg");
}
#blogPosts {
background-image: url("../images/includes/blogPosts.jpg");
}
#blog {
background-image: url("../images/includes/blog.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);
}
.pageTitle {
padding-top: 70px;
padding-bottom: 70px;
}
.page-title {
color: white;
margin: 5px 0 0 0;
font-size: 30px;
font-weight: 800;
}
.page-location {
background-color: rgba(0, 0, 0, 0.4);
display: inline-block;
font-size: 14px;
padding: 7px 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.home-intro-content {
padding: 11em 0;
text-align: center;
}
.home-intro-content h2 {
font-size: 36px;
font-weight: 800;
color: white;
}
.home-intro-content p {
margin: 55px 0;
font-size: 18px;
line-height: 32px;
}
.home-intro-content .large-button:hover {
opacity: 0.8;
}
blockquote {
margin: 30px 0;
display: block;
color: #aaaaaa;
}
Easy Theme Colors
There are 4 color themes (blue, green, red, orange) and this one is blue.
Change Icons
Check FontAwesome for your suitable icons. Example: <i class="fa fa-download"></i>
Pixel Perfect Design
Based on a 12 column grid system, with every pixel snapped.
Valid HTML5
We offer validated html files and well commented code on our themes.
Retina Ready
Incredibly clean design provides you powerful way to grow your business.
Special Thanks
Credit goes to Unsplash for images used in this template.
Marketing Manager
Amy Groovy
Duis vitae consequat neque. Nulla pharetra eleifend nulla.
Web Developer
Candy Sharp
Duis vitae consequat neque. Nulla pharetra eleifend nulla.
Graphic Designer
Linda Master
Duis vitae consequat neque. Nulla pharetra eleifend nulla.