(→==) |
(→==) |
||
Line 2,362: | Line 2,362: | ||
#topinterlab { | #topinterlab { | ||
background-attachment: fixed; | background-attachment: fixed; | ||
− | background-image: url("https://static.igem.org/mediawiki/2016/ | + | background-image: url("https://static.igem.org/mediawiki/2016/8/85/T--INSA-Lyon--fondinterlab.jpg"); |
min-height:100vh; | min-height:100vh; | ||
background-position: center; | background-position: center; |
Revision as of 19:54, 19 October 2016
/* Table of Content
======================================
- BASIC TYPOGRAPHY
- HEADER
- MENU
- SLIDER
- ABSTRACT
- SAFETY
- ABOUT
- COUNTER
- SERVICE
- PRICING TABLE
- TESTIMONIAL
- PRICING TABLE
- OUR TEAM
- TESTIMONIAL
- LOGOS BRAND
- LATEST NEWS
- SUBSCRIBE US
- FOOTER
- PORTFOLIO PAGE
- BLOG PAGE
- CONTACT PAGE
- ERROR PAGE
- RESPONSIVE STYLE
- /
/*--------------------*/
/* BASIC TYPOGRAPHY */
/*--------------------*/
body,html{
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
overflow-x: hidden !important;
color: #838282;
}
ul{ padding: 0; margin: 0; list-style: none; }
a{ text-decoration: none; color: #2f2f2f; }
a:focus{ outline: none; text-decoration: none; }
a:visited {
color: #c70303;
}
h1,h2,h3,h4,h5,h6{ font-family: 'Lato', sans-serif; }
h2 { color: #fff; font-size: 30px; font-weight: 700; line-height: 40px; margin: 0;
padding-top: 40px;
padding-bottom: 5px; }
img{
border:none;
}
.figure{
font-size:14px; line-height: 15px; padding-bottom: 30px;
}
- sidebar.affix {
top: 70vh;
}
.contents-sidebar {
padding-left: 20px; margin-top: 20px; margin-bottom: 20px; background-color: white;
}
.contents-sidebar .nav>li>a {
color: #999; padding: 4px 20px; font-size: 13px; font-weight: 400; line-height: 1.4em; margin-bottom: 10px;
}
.contents-sidebar .nav .nav>li>a {
padding-top: 1px; padding-bottom: 1px; padding-left: 20px; font-size: 12px;
}
.contents-sidebar .nav .nav .nav>li>a {
padding-top: 1px; padding-bottom: 1px; padding-left: 20px; font-size: 11px;
}
.contents-sidebar .nav>.active>a {
color: #d7000e;
}
.contents-sidebar .nav>li>a {
border-left: 2px solid transparent;
} .contents-sidebar .nav>.active>a, .contents-sidebar .nav>li>a:hover, .contents-sidebar .nav>li>a:focus {
color: #d7000e; text-decoration: none; background-color: transparent; border-left: 2px solid #d7000e; font-weight: 700;
}
.contents-sidebar .nav .nav>.active>a, .contents-sidebar .nav .nav>li>a:hover, .contents-sidebar .nav .nav>li>a:focus {
font-weight: 500;
}
.contents-sidebar .nav ul.nav {
display: none;
}
.contents-sidebar .nav>.active>ul.nav {
display: block;
}
- sidebar {
max-height: 85vh; overflow: auto;
}
/* Preloader */
- preloader {
position: fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; /* change if the mask should have another color then white */ z-index:99999; /* makes sure it stays on top */
}
- status {
width:200px; height:200px; position:absolute; left:50%; /* centers the loading animation horizontally one the screen */ top:50%; /* centers the loading animation vertically one the screen */ background-image:url(""); /* path to your loading animation */ background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px; /* is width and height divided by two */
}
/*scrol to top*/
.scrollToTop {
bottom: 60px; border-radius: 4px; display: none; font-size: 32px; line-height: 45px; font-weight: bold; height: 50px; position: fixed; right: 50px; text-align: center; text-decoration: none; width: 50px; z-index: 999; color: #fff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.scrollToTop:hover, .scrollToTop:focus{
background-color: #fff; text-decoration: none; outline: none;
}
/*--------------------*/ /* HEADER */ /*--------------------*/
- header{
float: left; display: inline; width: 100%; }
.header-top{ background-color: #333; display: none; float: left; width: 100%; padding: 20px 0; }
- search{
margin: 0 auto; width: 70%; }
- search input {
background-color: inherit; border: medium none; color: #fff; float: left; height: 100%; text-align: center; width: 95%;
}
- search button[type="submit"] {
background: inherit; border: medium none; color: #fff; height: 20px; width: 30px;
}
- search-icon {
font-size: 20px; height: 35px; line-height: 35px; position: absolute; right: 8%; text-align: center; top: 20px; width: 35px;
}
.header-bottom{ background-color: rgba(0, 0, 0, 0.02); border-bottom: 1px solid #e4e4e4; color: #949494; font-size: 12px; height: 20px; display: inline; float: left; width: 100%; overflow: hidden; padding: 0 15px; transition: all 0.3s ease 0s; }
.header-contact{ display: inline; float: left; width: 100%; }
.header-contact ul{} .header-contact ul li {
border-left: 1px solid #e4e4e4; display: inline-block; float: left; margin-right: 10px; padding: 10px 12px;
}
.header-contact ul li:last-child{ border-right: 1px solid #e4e4e4; }
.phone{ font-size: 14px; }
.phone i{ margin-right: 5px; }
.mail{ font-size: 14px; } .mail i{ margin-right: 5px; }
.header-login{ display: inline; float: left; text-align: right; width: 100%; }
.login {
border-left: 1px solid #e4e4e4; border-right: 1px solid #e4e4e4; color: #949494; display: inline-block; font-size: 14px; line-height: 20px; padding: 10px 15px; text-decoration: none; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.login:hover, .login:focus{ color: #fff; text-decoration: none; outline: none; }
/*login modal window*/
- login-form {
background-color: rgba(0, 0, 0, 0.7);
}
- login-form .modal-dialog {
margin: 130px auto; width: 400px;
}
- login-content {
border-radius: 0;
}
- login-content .modal-title {
font-size: 20px;
}
- login-content .modal-title i{
margin-right: 5px;
}
- login-content .form-group input{
height: 35px; border-radius: 0;
}
- login-content .form-control:focus {
box-shadow: none;
}
.loginbox label {
float: left; width: 100%;
}
.loginbox label input{
float: left; margin-right: 5px;
}
.loginbox label span {
font-weight: normal;
}
.loginbox .signin-btn {
border-radius: 0; margin-top: 10px; color: #fff;
}
.footer-box {
text-align: left; font-size: 15px;
}
.footer-box a:hover, .footer-box a:focus{
text-decoration: none; outline: none;
}
- signup-content {
display: none;
}
- signup-content {
border-radius: 0;
}
- signup-content .modal-title {
font-size: 20px;
}
- signup-content .modal-title i{
margin-right: 5px;
}
- signup-content .form-group input{
height: 35px; border-radius: 0;
}
- signup-content .form-control:focus {
box-shadow: none;
}
.signupbox span {
display: inline-block; font-size: 15px; margin-bottom: 10px;
}
.signupbox span a:hover{
text-decoration: none; outline: none;
}
/*--------------------*/ /* MENU */ /*--------------------*/
- menu-area{
background-color: #fff; display: inline; float: left; width: 100%; position: relative; }
- menu-area #navbar {
padding-right: 70px;
}
- menu-area .navbar-default {
background-color: #fff; border-color: #fff; margin-bottom: 0;
}
.navbar-brand {
font-family: "Lato",sans-serif; font-size: 25px; font-weight: bold; margin-top: 14px; text-transform: uppercase;
}
.navbar-brand:hover, .navbar-brand:focus{ text-decoration: none; outline: none; }
.navbar-brand > img {
display: block; margin-top: -20px;
}
.main-nav li {
padding: 15px 0; position: relative; margin: 0 5px;
}
.navbar-default .navbar-nav > li > a {
color: #333; display: inline-block !important; font-family: "Lato",sans-serif; font-size: 14px; padding-left: 10px; padding-right: 10px; text-transform: uppercase; width: 100%;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { border-top: 0px solid #d7000e; background: none; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-nav > li > a::before {
background-color: transparent; content: ""; height: 2px; left: 0; position: absolute; top: 0; -webkit-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; width: 0;
}
.main-nav > li > a:hover::before, .navbar-default .navbar-nav > .active > a::before, .navbar-default .navbar-nav > .open > a:hover::before {
width: 100%;
}
.main-nav .dropdown:hover .dropdown-toggle::before{ width: 100%; }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
}
.navbar-nav > li > .dropdown-menu li {
padding: 0;
}
.navbar-nav > li > .dropdown-menu > li > a { color: #333; font-family: "Lato",sans-serif; font-size: 14px; padding: 8px 20px; text-transform: uppercase; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-nav > li > .dropdown-menu > li > a:focus{ background-color: transparent; }
/*--------------------*/
/* SLIDER */
/*--------------------*/
- slider{
display: inline; float: left; width: 100%; }
.main-slider {
display: inline; float: left; height: 900px; margin-bottom: 0; width: 100%;
} .main-slider .slick-list {
height: 100%;
}
.single-slide{ float: left; display: inline; width: 100%; }
.single-slide img{ width: 100%; }
.slide-content {
background-color: rgba(0, 0, 0, 0.7); height: 100%; left: 0; position: absolute; top: 0; width: 100%;
}
.main-slider .slick-prev {
left: 23px;
}
.main-slider .slick-next {
right: 20px;
}
.main-slider .slick-prev, .main-slider .slick-next {
background-color: rgba(0,0,0,0.5); top: 48%; height: 50px; width: 50px; z-index: 999; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.main-slider .slick-prev::before {
content: "\f104"; font-family: fontAwesome; font-size: 30px;
}
.main-slider .slick-next::before {
content: "\f105"; font-family: fontAwesome; font-size: 30px;
}
.main-slider .slick-dots {
bottom: 10px;
}
.main-slider .slick-dots li {
background-color: rgba(0, 0, 0, 0.6); border-radius: 50%;
}
.main-slider .slick-dots li button::before {
font-size: 25px; line-height: 21px;
}
.slide-article {
display: inline; float: left; padding-left: 0px; padding-right: 20px; padding-top: 500px; width: 100%;
}
.slide-article h1 {
color: #fff; font-size: 45px; font-weight: bold; line-height: 55px; margin-bottom: 25px; text-transform: uppercase;
}
.slide-article p {
color: #fff; margin-bottom: 50px;
}
.read-more-btn{ color: #fff; border: 1px solid #fff; display: inline-block; padding: 22px 22px; font-weight: 700px; font-size: 16px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.read-more-btn:hover, .read-more-btn:focus{ color: #fff; text-decoration: none; outline: none; }
.slider-img{
height: 100%; left: 0; position: absolute; top: 0; width: 100%;
}
/*--------------------*/ /* ABSTRACT */ /*--------------------*/
- abstract{
background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }
.title-area {
display: inline; float: left; padding: 0 150px; text-align: center; width: 100%;
}
.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }
.title-area .line {
background-color: #777; display: inline-block; height: 2px; width: 60px;
}
.title-area p {
color: #303030; line-height: 25px; margin-top: 20px;
}
.abstract-content {
display: inline; float: left; width: 100%; margin-top: 50px;
}
.single-abstract{ display: inline; float: left; margin-bottom: 40px; width: 100%; }
.single-abstract:hover .abstract-icon{ color: #444; }
.single-abstract .abstract-icon {
font-size: 35px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.single-abstract:hover .feat-title{ color: #444; }
.single-abstract p {
color: #303030; font-size: 15px;
}
/*--------------------*/ /* COLLABORATIONS */ /*--------------------*/
- collaborations{
background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }
.title-area {
display: inline; float: left; padding: 0 150px; text-align: center; width: 100%;
}
.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }
.title-area .line {
background-color: #777; display: inline-block; height: 2px; width: 60px;
}
.title-area p {
color: #303030; line-height: 25px; margin-top: 20px;
}
.subtitle{ display: inline; float: left; width: 100%; }
.subtitle h3{
font-size: 25px;
position: relative;
color: #d7000e;
}
.subtitle h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.collaborations-content {
display: inline; float: left; width: 100%; margin-top: 50px;
}
.collaborations-content p{
text-indent:50px;
}
.single-collaborations{ display: inline; float: left; margin-bottom: 40px; width: 100%; }
.single-collaborations:hover .collaborations-icon{ color: #444; }
.single-collaborations .collaborations-icon {
font-size: 35px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.single-collaborations:hover .feat-title{ color: #444; }
.single-collaborations p {
color: #303030; font-size: 15px;
}
/*--------------------*/ /* GOLD */ /*--------------------*/
- gold{
background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }
- gold a{
font-size:16px;
}
.title-area {
display: inline; float: left; padding: 0 150px; text-align: center; width: 100%;
}
.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }
.title-area .line {
background-color: #777; display: inline-block; height: 2px; width: 60px;
}
.title-area p {
color: #303030; line-height: 25px; margin-top: 20px;
}
.subtitle{ display: inline; float: left; width: 100%; }
.subtitle h3{
font-size: 35px;
position: relative;
color: #d7000e;
}
.subtitle h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.gold-content {
display: inline; float: left; width: 100%; margin-top: 50px;
}
.gold-content p{
text-indent:50px; text-align:justify;
}
.single-gold{ display: inline; float: left; margin-bottom: 40px; width: 100%; }
.single-gold:hover .gold-icon{ color: #444; }
.single-gold .gold-icon {
font-size: 35px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.single-gold:hover .feat-title{ color: #444; }
.single-gold p {
color: #303030; font-size: 15px;
}
/*--------------------*/ /* INTERLAB */ /*--------------------*/
- interlab{
background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }
- interlab a{
font-size:16px;
}
.title-area {
display: inline; float: left; padding: 0 150px; text-align: center; width: 100%;
}
.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }
.title-area .line {
background-color: #777; display: inline-block; height: 2px; width: 60px;
}
.title-area p {
color: #303030; line-height: 25px; margin-top: 20px;
}
.subtitle{ display: inline; float: left; width: 100%; }
.subtitle h3{
font-size: 35px;
position: relative;
color: #d7000e;
}
.subtitle h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.interlab-content {
display: inline; float: left; width: 100%; margin-top: 50px;
}
.interlab-content p{
text-indent:50px; text-align:justify;
}
.single-interlab{ display: inline; float: left; margin-bottom: 40px; width: 100%; }
.single-interlab:hover .gold-icon{ color: #444; }
.single-interlab .gold-icon {
font-size: 35px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.interlab-gold:hover .feat-title{ color: #444; }
.interlab-gold p {
color: #303030; font-size: 15px;
}
/*--------------------*/ /* ACHIEVEMENTS */ /*--------------------*/
- achievements{
background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }
- achievements a:link {
color: #10b2c1;
}
- achievements a:visited {
color: #c61525;
}
.title-area {
display: inline; float: left; padding: 0 150px; text-align: center; width: 100%;
}
.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }
.title-area .line {
background-color: #777; display: inline-block; height: 2px; width: 60px;
}
.title-area p {
color: #303030; line-height: 25px; margin-top: 20px;
}
.subtitle{ display: inline; float: left; width: 100%; }
.subtitle h3{
font-size: 35px;
position: relative;
color: #d7000e;
}
.subtitle h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.subtitle a:visited {
color: #10b2c1;
}
.achievements-content {
display: inline; float: left; width: 100%; margin-top: 50px;
}
.achievements-content p{
text-indent:50px; text-align:justify;
}
.single-achievements{ display: inline; float: left; margin-bottom: 40px; width: 100%; }
.single-achievements:hover .achievements-icon{ color: #444; }
.single-achievements .achievements-icon {
font-size: 35px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.single-achievements:hover .feat-title{ color: #444; }
.single-achievements p {
color: #303030; font-size: 15px;
}
/*--------------------*/ /* PARTS */ /*--------------------*/
- parts{
background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }
- parts h4{
color: #c61525;
}
- parts h2{
padding-top: 100px;
}
.title-area {
display: inline; float: left; padding: 0 150px; text-align: center; width: 100%;
}
.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }
.title-area .line {
background-color: #777; display: inline-block; height: 2px; width: 60px;
}
.title-area p {
color: #303030; line-height: 25px; margin-top: 20px;
}
.subtitle{ display: inline; float: left; width: 100%; }
.subtitle h3{
font-size: 20px;
position: relative;
color: #d7000e;
}
.subtitle h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.parts-content {
display: inline; float: left; width: 100%; margin-top: 50px;
}
.parts-content p{
text-indent:50px; text-align:justify;
}
/*--------------------*/
/* PROTOCOLS */
/*--------------------*/
- protocols{
background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }
- protocols h4{
color: #c61525;
}
- protocols h2{
padding-top: 100px;
}
.title-area {
display: inline; float: left; padding: 0 150px; text-align: center; width: 100%;
}
.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }
.title-area .line {
background-color: #777; display: inline-block; height: 2px; width: 60px;
}
.title-area p {
color: #303030; line-height: 25px; margin-top: 20px;
}
.subtitle{ display: inline; float: left; width: 100%; }
.subtitle h3{
font-size: 20px;
position: relative;
color: #d7000e;
}
.subtitle h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.protocols-content {
display: inline; float: left; width: 100%; margin-top: 50px;
}
.protocols-content p{
text-indent:50px; text-align:justify;
}
/*--------------------*/ /* SOFTWARE */ /*--------------------*/
- software{
background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }
.title-area {
display: inline; float: left; padding: 0 150px; text-align: center; width: 100%;
}
.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }
.title-area .line {
background-color: #777; display: inline-block; height: 2px; width: 60px;
}
.title-area p {
color: #303030; line-height: 25px; margin-top: 20px;
}
.subtitle{ display: inline; float: left; width: 100%; }
.subtitle h3{
font-size: 35px;
position: relative;
color: #d7000e;
}
.subtitle h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.software-content {
display: inline; float: left; width: 100%; margin-top: 50px;
}
.software-content p{
text-indent:50px; text-align:justify;
}
/*--------------------*/ /* ATTRIBUTIONS */ /*--------------------*/
- attributions{
background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }
.title-area {
display: inline; float: left; padding: 0 150px; text-align: center; width: 100%;
}
.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }
.title-area .line {
background-color: #777; display: inline-block; height: 2px; width: 60px;
}
.title-area p {
color: #303030; line-height: 25px; margin-top: 20px;
}
.subtitle{ display: inline; float: left; width: 100%; }
.subtitle h3{
font-size: 35px;
position: relative;
color: #d7000e;
}
.subtitle h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.attributions-content {
display: inline; float: left; width: 100%; margin-top: 50px;
}
.attributions-content p{
text-indent:50px; text-align:justify;
}
/*--------------------*/ /* SAFETY */ /*--------------------*/
- safety{
background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }
.title-area {
display: inline; float: left; padding: 0 150px; text-align: center; width: 100%;
}
.title-area .title { font-size: 35px; font-weight: 700; line-height: 35px; text-transform: uppercase; }
.title-area .line {
background-color: #777; display: inline-block; height: 2px; width: 60px;
}
.title-area p {
color: #303030; line-height: 25px; margin-top: 20px;
}
.subtitle{ display: inline; float: left; width: 100%; }
.subtitle h3{
font-size: 35px;
position: relative;
color: #d7000e;
}
.subtitle h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.safety-content {
display: inline; float: left; width: 100%; margin-top: 50px;
}
.safety-content p{
text-indent:50px; text-align:justify;
}
.single-safety{ display: inline; float: left; margin-bottom: 40px; width: 100%; }
.single-safety:hover .safety-icon{ color: #444; }
.single-safety .safety-icon {
font-size: 35px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.feat-title{ font-weight: normal; font-size: 20px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.single-safety:hover .feat-title{ color: #444; }
.single-safety p {
color: #303030; font-size: 15px;
}
/*--------------------*/
/* ABOUT */
/*--------------------*/
- about{
background-color: #f8f8f8; display: inline; float: left; padding: 70px 0; width: 100%; }
.about-content { display: inline; float: left; margin-top: 50px; width: 100%; }
.our-skill{ display: inline; float: left; width: 100%; }
.our-skill h3{ position: relative; }
.our-skill h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.our-skill-content{ display: inline; float: left; width: 100%; margin-top: 50px; }
.our-skill-content p{ margin-bottom: 32px; }
.our-skill-content .progress {
background-color: #f5f5f5; height: 30px; border-radius: 0; margin-bottom: 24px;
}
.our-skill-content .progressbar-back-text, .our-skill-content .progressbar-front-text {
font-size: 14px; height: 100%; line-height: 30px;
}
.progress-title {
font-size: 15px; font-weight: bold; left: 20px; line-height: 29px; position: absolute; text-transform: uppercase; top: 0;
}
.why-choose-us{ display: inline; float: left; width: 100%; }
.why-choose-us h3{ position: relative; }
.why-choose-us h3::after {
content: ""; height: 2px; left: 0; position: absolute; top: 40px; width: 65px;
}
.why-choose-group{ margin-top: 50px; }
.panel-group .panel {
border-radius: 0px;
}
.panel-default > .panel-heading {
background-color: #fff; border-color: #ddd; border-radius: 0; color: #333; padding: 0;
}
.panel-title > a { color: #222;
display: block; padding: 10px 15px;
}
.panel-title > a:hover, .panel-title > a:focus{
text-decoration: none; outline: none;
}
.panel-title > a span {
float: right; font-size: 20px;
}
.why-choose-group .panel-body p {
color: #555; font-size: 15px; line-height: 22px;
}
.why-choose-img {
display: inline-block; float: left; margin-right: 14px; margin-bottom: 3px; width: 20%;
}
.six-sec-ease-in-out {
-webkit-transition: width 6s ease-in-out; -moz-transition: width 6s ease-in-out; -ms-transition: width 6s ease-in-out; -o-transition: width 6s ease-in-out; transition: width 6s ease-in-out;
}
/*--------------------*/ /* TOP */ /*--------------------*/
- top {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h5{ color: #c1000c;
font-size: 45px; text-shadow: 2px 2px 4px white;
}
.top-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.top-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 50px; padding: 30px;
}
/*--------------------*/ /* TOP GOLD*/ /*--------------------*/
- topgold {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topgold-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topgold-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP ACHIEVEMENTS*/ /*--------------------*/
- topachievements {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topachievements-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topachievements-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/
/* TOP SAFETY*/
/*--------------------*/
- topsafety {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topsafety-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topsafety-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP PROTOCOLS*/ /*--------------------*/
- topprotocols {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topprotocols-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topprotocols-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/
/* TOP SOFTWARE*/
/*--------------------*/
- topsoft {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topsoft-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topsoft-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP TEAM*/ /*--------------------*/
- topteam {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
.topteam-overlay{
background-color: rgba(0,0,0,0.7); height: 100vh; width:40vh;
}
.topteam-area{
display: inline; float: left; margin-top: 10vh; width:100%; padding:50px; /*background-color: rgba(0,0,0,0.7);*/
}
.topteam-area h2{ color: #c1000c;
text-shadow: 2px 2px 4px white;
}
.topteam-area p{ text-size:40px; }
/*--------------------*/
/* TOP COLLABORATIONS*/
/*--------------------*/
- topcollaborations {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c; }
.topcollaborations-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topcollaborations-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP DESCRIPTION*/ /*--------------------*/
- topdesc {
background-attachment: fixed; background-image: url(""); min-height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c; }
.topdesc-overlay{
background-color: rgba(0,0,0,0.7); height: 100vh; width:40vh;
}
.topdesc-area{
display: inline; float: left; margin-top: 30vh; width:100%; padding:30px; /*background-color: rgba(0,0,0,0.7);*/
}
/*--------------------*/ /* TOP PARTS*/ /*--------------------*/
- topparts {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topparts-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topparts-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP ATTRIBUTIONS*/ /*--------------------*/
- topattributions {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topattributions-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topattributions-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP DESIGN*/ /*--------------------*/
- topdesign {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topdesign-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topdesign-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP PROOF*/ /*--------------------*/
- topproof {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topproof-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topproof-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP RESULTS*/ /*--------------------*/
- topresults {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topresults-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topresults-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP NOTEBOOK*/ /*--------------------*/
- topnotebook {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topnotebook-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topnotebook-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP INTERLAB*/ /*--------------------*/
- topinterlab {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topinterlab-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topinterlab-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP MODELLING*/ /*--------------------*/
- topmodelling {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topmodelling-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topmodelling-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/
/* TOP HP*/
/*--------------------*/
- tophp {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.tophp-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.tophp-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP SILVER*/ /*--------------------*/
- topsilver {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topsilver-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topsilver-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP PRACTICES*/ /*--------------------*/
- toppractices {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.toppractices-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.toppractices-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* TOP ENGAGEMENT*/ /*--------------------*/
- topengagement {
background-attachment: fixed; background-image: url(""); min-height:100vh; background-position: center; background-repeat: repeat; background-size: cover; color: #ffffff;
}
h2{ color: #c1000c;
}
.topengagement-overlay{
background-color: rgba(0,0,0,0.2); height: 100vh;
}
.topengagement-area{
display: inline; float: left; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); margin-top: 65vh; padding: 10px;
}
/*--------------------*/ /* COUNTER */ /*--------------------*/
- counter{
background-attachment: fixed !important; background-color: rgba(0,0,0,0.8); background-image: url("assets/images/counter-bg.jpg"); background-repeat: repeat; background-size: cover; color: #ffffff; display: inline; float: left; width: 100%; }
.counter-overlay{ background: rgba(15, 22, 30, 0.5) none repeat scroll 0 0; color: #ffffff; display: inline; float: left; padding: 90px 0; width: 100%; }
.counter-area{ display: inline; float: left; width: 100%; }
.single-counter{ display: inline; float: left; text-align: center; width: 100%; }
.single-counter .counter-icon{ display: inline; float: left; width: 100%; color: #fff; font-size: 30px; }
.single-counter .counter-no {
color: #fff; display: inline; float: left; font-size: 45px; font-weight: bold; text-align: center; width: 100%; line-height: 60px; margin-top: 10px; margin-bottom: 10px;
}
.single-counter .counter-label {
color: #fff; display: inline; float: left; font-size: 20px; width: 100%;
}
.single-counter .counter-label::after {
content: ""; height: 2px; margin: 8px auto; width: 35px; display: block;
}
/*--------------------*/
/* SERVICE */
/*--------------------*/
- service{
background-color: #fff; display: inline; float: left; padding: 70px 0; width: 100%; }
.service-content{ display: inline; float: left; margin-top: 50px; width: 100%; }
.single-service {
display: inline; float: left; margin-bottom: 30px; padding-left: 80px; position: relative; width: 100%;
}
.service-icon {
font-size: 50px; height: 60px; left: 0; line-height: 50px; position: absolute; top: 10px; width: 60px; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
}
.single-service:hover .service-icon{ color: #222; }
.service-title{ color: #222; font-size: 20px; font-weight: 300; text-transform: uppercase; transition: all 0.5s ease 0s; }
.single-service p {
font-size: 14px; line-height: 25px;
}
/*--------------------*/
/* PRICING TABLE */
/*--------------------*/
- pricing-table{
background-color: #f8f8f8; display: inline; float: left; padding: 70px 0; width: 100%; }
.pricing-table-content{ display: inline; float: left; margin-top: 50px; width: 100%; }
.single-table-price {
background-color: #fff; display: inline; float: left; text-align: center; width: 100%; border: 1px solid #ccc;
}
.price-header {
background-color: #383838; color: #ccc; display: inline; float: left; width: 100%;
}
.price-title {
color: #fff; display: inline-block; font-size: 15px; margin-top: -5px; min-width: 150px; padding: 5px 15px; text-transform: uppercase;
}
.price {
color: #fff; display: inline; float: left; font-size: 40px; font-weight: normal; padding: 15px; width: 100%;
}
.price .price-up{ font-size: 60%; }
.price .price-down{ font-size: 14px; text-transform: uppercase; }
.price-article{ display: inline; float: left; padding: 0 20px; width: 100%; }
.price-article ul li {
border-bottom: 1px solid #ccc; color: #555; padding: 15px 0;
}
.price-article ul li:last-child{ border: none; }
.price-footer{ display: inline; float: left; width: 100%; }
.purchase-btn {
background-color: #fff; border: 1px solid #ccc; display: inline-block; margin-bottom: -10px; margin-top: 20px; padding: 10px 20px; text-align: center; text-transform: uppercase; font-size: 15px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.purchase-btn:hover, .purchase-btn:focus{ text-decoration: none; outline: none; color: #fff; }
.abstractd-price .price-title{ background-color: #383838; }
.abstractd-price .purchase-btn{ color: #fff; }
/*--------------------*/
/* OUR TEAM */
/*--------------------*/
- our-team {
display: inline; float: left; padding: 70px 0; width: 100%; padding-top: 100px; padding-left: 20vh;
}
- our-team p{
text-align:center;
}
.our-team-content{ display: inline; float: left; margin-top: 50px; width: 100%; }
.single-team-member {
border: 2px solid #f5f5f5; display: inline; float: left; margin-top: 50px; margin-bottom: 50px; padding: 10px; padding-bottom: 50px; position: relative; text-align: center !important; width: 100%; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.single-team-member:hover{ -webkit-box-shadow: 0 8px 6px -6px #000; -moz-box-shadow: 0 8px 6px -6px #000; box-shadow: 0 8px 6px -6px #000; }
.team-member-img {
background-color: #ffffff; margin-top: -65px; position: relative;
}
.team-member-img img{ width: 100%; }
.team-member-name {
display: inline; float: left; padding: 25px 0 15px; width: 100%;
}
.team-member-name p {
color: #222; font-size: 25px; font-weight: bold text-transform: uppercase; margin-bottom: 0; text-align: center;
}
.team-member-name span {
color: #222; font-size: 14px;
}
.single-team-member > p {
color: #222; font-size: 14px; line-height: 20px; padding: 0 10px; text-align: center;
}
.single-team-member:hover .team-member-link{ color: #fff; }
.single-team-member:hover .team-member-link>a{ color: #fff; }
.team-member-link {
background: #fff none repeat scroll 0 0; color: #555; bottom: -20px; left: 0; margin: 0 auto; position: absolute; right: 0; text-align: center; width: 80%; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.team-member-link a {
display: inline-block; padding: 3px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.team-member-link a:visited {
color: #c70303;
} .team-member-link a:hover, .team-member-link a:focus{
display: inline-block; outline: none;
}
/*--------------------*/ /* TESTIMONIAL */ /*--------------------*/
- testimonial {
background-attachment: fixed !important; background-image: url("assets/images/testimonial-1.jpg"); background-repeat: repeat; background-size: cover; color: #ffffff; display: inline; float: left; width: 100%; padding: 70px 0;
}
- testimonial .title-area {
padding: 0 50px;
}
- testimonial .title-area .title {
font-size: 30px; line-height: 30px;
}
.testimonial-slider {
display: inline; float: left; margin-top: 50px; text-align: center; width: 100%;
}
.single-slider{ display: inline; float: left; text-align: center; width: 100%;
outline: none;
}
.testimonial-img {
border-radius: 50%; height: 100px; margin: 0 auto 30px; text-align: center; width: 100px;
}
.testimonial-img img{ width: 100%; border-radius: 50%; }
.testimonial-content{} .testimonial-content p{ font-size: 15px; }
.testimonial-content h6 {
font-size: 15px; margin-top: 10px; display: inline-block;
}
.testimonial-content h6 span {
margin-left: 3px;
}
.testimonial-slider .slick-dots li {
border-radius: 50%; color: #fff;
}
.testimonial-slider .slick-dots li button::before {
display: none;
}
/*--------------------*/ /* LOGOS BRAND */ /*--------------------*/
- logos-brand{
background-color: #fff; display: inline; float: left; padding: 70px 0; width: 100%;
}
.logos-brand-area{
display: inline; float: left; width: 100%;
}
.logos-brand-slide {
margin-bottom: 0; width: 100%;
}
.logos-brand-slide .slick-slide{
outline: none;
}
.single-brand {
background-color: #f8f8f8; border: 1px solid #ccc; display: inline; float: left; height: 120px; padding-top: 10px; text-align: center; width: 100%;
}
.single-brand img {
display: inline-block;
}
/*--------------------*/
/* LATEST NEWS */
/*--------------------*/
- latest-news{
background-color: #f8f8f8; display: inline; float: left; padding: 70px 0; width: 100%;
}
.latest-news-content{
display: inline; float: left; margin-top: 50px; width: 100%;
}
.blog-news-single {
background-color: #fff; display: inline; float: left; width: 100%; padding-bottom: 20px;
}
.blog-news-img {
display: inline; float: left; height: 270px; width: 100%;
}
.blog-news-img img {
width: 100%; height: 100%;
}
.blog-news-title {
display: inline; float: left; padding: 20px 15px 15px; width: 100%;
}
.blog-news-title h2, .blog-news-title h2>a{
color: #838282; font-family: "Lato",sans-serif; font-size: 20px; font-weight: 500; text-transform: uppercase; padding: 0; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.blog-news-title h2>a:hover{
text-decoration: none; outline: none;
}
.blog-news-title p {
font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase;
}
.blog-news-title .blog-author{
text-transform: uppercase;
}
.blog-news-title .blog-date{} .blog-news-details{
display: inline; float: left; padding: 0 15px; width: 100%;
}
.blog-news-details p{
font-size: 14px;
}
.blog-more-btn {
color: #838282; display: inline-block; font-size: 14px; margin-top: 15px; text-decoration: none;
}
.blog-more-btn:hover, .blog-more-btn:focus{
text-decoration: none; outline: none;
}
.blog-more-btn i{
margin-left: 5px;
}
/*--------------------*/
/* SUBSCRIBE US */
/*--------------------*/
- subscribe{
background-attachment: fixed !important; background-image: url("assets/images/subscribe-bg.jpg"); background-repeat: repeat; background-size: cover; color: #ffffff; display: inline; float: left; width: 100%;
}
.subscribe-overlay{
background-color: rgba(0,0,0,0.6); padding: 90px 0; float: left; width: 100%;
} .subscribe-area{
display: inline; float: left; text-align: center; width: 100%;
}
.subscribe-area h2 {
letter-spacing: 0.5px; margin-bottom: 30px; text-transform: uppercase;
}
.subscrib-form {
margin: 0 auto; width: 600px; position: relative;
}
.subscrib-form input {
border: medium none; border-radius:4px; color: #444; font-size: 18px; height: 50px; outline: medium none; padding: 5px 105px 5px 10px; width: 100%;
}
.subscribe-btn {
border: medium none; border-radius: 0 4px 4px 0; color: #fff; font-size: 18px; font-weight: bold; height: 50px; top: 0; letter-spacing: 0.5px; outline: medium none; position: absolute; right: 0; text-transform: uppercase; width: 120px;
}
/*--------------------*/
/* FOOTER */
/*--------------------*/
- footer{
background-color: #171717; display: inline; float: left; padding: 25px 0; width: 100%;
}
.footer-left{
display: inline; float: left; width: 100%;
}
.footer-left p {
color: #5c5c5c; font-size: 14px; margin: 0;
}
.footer-left p a{
color: #5c5c5c;
}
.footer-left p a:hover{
text-decoration: none; outline: none;
}
.footer-right{
display: inline; float: left; text-align: right; width: 100%;
}
.footer-right a{
color: #5c5c5c; font-size: 18px; padding: 0 10px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
/*--------------------*/
/* PORTFOLIO PAGE */
/*--------------------*/
- single-page-header{
background-attachment: fixed !important; background-image: url("assets/images/slider-5.jpg"); background-repeat: repeat; background-size: cover; color: #ffffff; display: inline; float: left; width: 100%;
}
.overlay{
background-color: rgba(0,0,0,0.6); padding: 90px 0; float: left; width: 100%;
}
.single-page-header-left{
display: inline; float: left; width: 100%;
}
.single-page-header-left h2{
text-transform: uppercase;
}
.single-page-header-left p {
font-size: 15px;
}
.single-page-header-right{
display: inline; float: left; width: 100%;
}
.single-page-header-right .breadcrumb {
background: transparent none repeat scroll 0 0; border-radius: 0; text-align: right;
}
.single-page-header-right .breadcrumb li a{
color: #fff;
}
- portfolio{
background-color: #fff; display: inline; float: left; width: 100%; min-height: 400px; padding: 70px 0;
}
.portfolio-area{
display: inline; float: left; width: 100%;
}
.portfolio-menu{
display: inline; float: left; text-align: center; padding: 0 20px; width: 100%;
}
.portfolio-menu ul li {
border: 1px solid #ccc; cursor: pointer; display: inline-block; margin: 0 5px; padding: 6px 15px; text-transform: uppercase; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.portfolio-menu ul li:hover, .portfolio-menu ul li.active{
color: #fff;
}
- mixit-container .mix {
display: none;
}
.portfolio-container {
display: inline; float: left; margin-top: 50px; width: 100%;
}
.single-portfolio{
background-color: #ccc; display: inline; float: left; width: 25%;
}
.single-item>img {
height: 220px; width: 100%;
}
.single-item{
display: inline; float: left; position: relative; width: 100%;
}
.single-item-content {
color: #fff; height: 100%; left: 0; opacity: 0; padding-top: 55px; position: absolute; text-align: center; top: 0; width: 100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-backface-visibility: hidden; /*for a smooth font */
}
.single-item:hover .single-item-content{
background-color: rgba(0,0,0,0.7); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);
}
.single-item-content::after {
content: ""; height: 85%; left: 18px; top: 15px; width: 90%; position: absolute; z-index: -1;
}
.view-icon{
color: #fff; font-size: 30px;
}
/*--------------------*/
/* BLOG PAGE */
/*--------------------*/
- blog-archive {
background-color: #f8f8f8; display: inline; float: left; padding: 50px 0; width: 100%;
}
.blog-archive-area{
display: inline; float: left; width: 100%;
}
.blog-archive-left{
display: inline; float: left; width: 100%;
}
.blog-archive-left .blog-news-single{
margin-bottom: 30px;
}
.blog-archive-left .blog-news-img {
height: 350px;
}
.blog-pagination {
display: inline; float: left; margin-top: 20px; padding: 15px 0; width: 100%;
}
.pagination-nav{
display: inline-block; width: 100%; text-align: center;
}
.pagination-nav li {
display: inline-block;
}
.pagination-nav li a {
color: #555; border: 1px solid #ccc; display: inline-block; margin: 0 5px; padding: 5px 13px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.pagination-nav li a:hover, .pagination-nav li a:focus {
color: #fff; text-decoration: none; outline: none;
}
.blog-side-bar{
display: inline; float: left; width: 100%;
}
.sidebar-widget{
display: inline; float: left; margin-bottom: 30px; width: 100%;
}
.sidebar-widget>p{
font-size: 14px;
}
.sidebar-widget ul li{} .sidebar-widget ul>li>a{
display: inline-block; font-size: 14px; margin-bottom: 10px;
}
.search-group{
display: inline; float: left; width: 100%; position: relative;
}
.search-group .blog-search-btn {
border: medium none; color: #fff; font-size: 18px; height: 40px; left: 0; position: absolute; top: 0; width: 50px;
}
.search-group input[type="search"] {
height: 40px; outline: medium none; padding: 5px 10px 5px 55px; width: 100%;
}
.search-group input[type="search"]:focus{
outline: none;
}
.widget-title {
color: #333; font-size: 20px; font-weight: 300; margin-bottom: 25px; position: relative;
}
.widget-title::after {
content: ""; height: 2px; left: 0; position: absolute; top: 30px; width: 30px;
}
.widget-catg li a {
display: inline-block; font-size: 14px; margin-bottom: 5px; padding-left: 10px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
.widget-catg li a:hover, .widget-catg li a:focus{
text-decoration: none; outline: none;
}
.widget-catg li::before{
content: '\f138'; font-family: fontAwesome;
}
.tag-cloud{
display: inline; float: left; width: 100%; text-align: left;
}
.tag-cloud a {
border: 1px solid #ccc; display: inline-block; font-size: 15px; margin-bottom: 8px; margin-right: 3px; padding: 5px 10px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.tag-cloud a:hover, .tag-cloud a:focus{
color: #fff; text-decoration: none; outline: none;
}
.widget-archive li{} .widget-archive li a{
display: inline-block; font-size: 14px; margin-bottom: 10px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.widget-archive li a span{
margin-left: 5px; display: inline-block;
}
.widget-archive li a:hover, .widget-archive li a:focus{
text-decoration: none;
}
.blog-single-details blockquote {
margin-top: 30px; margin-bottom: 30px; margin-left: 20px;
}
.blog-single-details blockquote p{
font-size: 18px;
}
.blog-single-details blockquote span {
text-transform: uppercase; font-size: 16px;
}
.blog-single-details ul, .blog-single-details ol {
padding-left: 25px; margin-bottom: 20px;
}
.blog-single-details ul li{
list-style: circle; margin-bottom: 5px;
}
.blog-single-details h1, .blog-single-details h2, .blog-single-details h3, .blog-single-details h4, .blog-single-details h5, .blog-single-details h6{
color: #333;
}
.blog-single-details h3{
margin-top: 0px;
}
.blog-single-bottom {
display: inline; float: left; margin-top: 50px; padding: 10px 0; width: 100%;
}
.blog-single-tag{
display: inline; font-size: 14px; float: left; width: 100%; text-align: left;
}
.blog-single-tag a {
margin-left: 5px; color: #333;
}
.blog-single-tag a:hover, .blog-single-tag a:focus {
text-decoration: none; outline: none;
}
.blog-single-social{
display: inline; float: left; width: 100%; text-align: right;
}
.blog-single-social a {
border: 1px solid #ccc; display: inline-block; font-size: 14px; margin-right: 5px; min-width: 30px; padding: 5px; text-align: center;
}
.blog-single-social a:hover, .blog-single-social a:focus {
text-decoration: none; outline: none;
}
.blog-navigation-area{
display: inline; float: left; width: 100%;
}
.blog-navigation-area {
display: inline; float: left; margin-top: 20px; width: 100%;
}
.blog-navigation-prev{
float: left; text-align: left;
}
.blog-navigation-prev a {
border-left: 2px solid #ccc; display: inline-block; padding-left: 15px;
}
.blog-navigation-prev a:hover, .blog-navigation-prev a:focus{
text-decoration: none; outline: none;
}
.blog-navigation-prev a > h5 {
color: #222; font-size: 16px; margin-bottom: 0; text-transform: uppercase;
}
.blog-navigation-prev a>span{
font-size: 14px;
}
.blog-navigation-next{
float: right; text-align: right;
}
.blog-navigation-next a {
border-right: 2px solid #ccc; display: inline-block; padding-right: 15px;
}
.blog-navigation-next a:hover, .blog-navigation-next a:focus{
text-decoration: none; outline: none;
}
.blog-navigation-next a > h5 {
color: #222; font-size: 16px; margin-bottom: 0; text-transform: uppercase;
}
.blog-navigation-next a>span{
font-size: 14px;
}
.comments-box-area {
display: inline; float: left; margin-top: 30px; padding: 20px 0; width: 100%;
}
.comments-box-area h2 {
color: #333; font-size: 25px; font-weight: 300; margin-bottom: 10px; position: relative;
}
.comments-box-area h2::after {
content: ""; height: 2px; left: 0; position: absolute; top: 42px; width: 50px;
}
.comments-box-area p {
font-size: 15px;
}
.comments-form{
margin-top: 10px;
}
.comments-form input{
height: 40px; font-size: 16px; border-radius: 0;
}
.comments-form textarea {
border-radius: 0; font-size: 16px; height: 200px; padding: 10px; width: 70%;
}
.comments-form .form-control:focus {
box-shadow: none;
}
.comments-form .form-group {
margin-bottom: 20px;
}
.comment-btn {
padding: 10px 15px; outline: none; border: 1px solid #ccc; background-color: #fff; color: #222; text-transform: uppercase; font-size: 15px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
}
.comment-btn:hover{
color: #fff;
}
/*--------------------*/ /* CONTACT PAGE */ /*--------------------*/
- contact{
display: inline; float: left; padding: 70px 0; width: 100%;
}
.cotact-area{
display: inline; float: left; margin-top: 50px; width: 100%;
}
.contact-area-left{
display: inline; float: left; width: 100%;
}
.contact-area-left h4{
color: #333; font-size: 20px; font-weight: 300; margin-bottom: 25px; position: relative;
}
.contact-area-left h4::after {
content: ""; height: 2px; left: 0; position: absolute; top: 30px; width: 30px;
}
.contact-area-left p{
font-size: 15px;
}
.contact-area-left .single-address {
font-size: 15px; padding-right: 62px;
}
.contact-area-right{
display: inline; float: left; width: 100%;
}
.contact-form textarea{
width: 100%;
}
.contact-social{
text-align: left; margin-top: 10px;
}
- google-map{
display: inline; float: left; width: 100%;
}
- google-map iframe {
margin-bottom: -5px;
}
/*--------------------*/
/* ERROR PAGE */
/*--------------------*/
- error{
display: inline; float: left; padding: 70px 0; width: 100%;
}
.errror-page-area{
display: inline; float: left; text-align: center; width: 100%;
}
.error-title {
border-radius: 50%; color: #fff; display: inline-block; font-size: 75px; margin-top: 0px; margin-bottom: 10px; padding: 40px 50px;
}
.error-content{
display: inline; float: left; text-align: center; width: 100%;
}
.error-content span {
font-size: 35px; font-weight: 300;
}
.error-content p {
font-size: 18px; margin-top: 10px;
}
.error-content .error-home {
color: #fff; display: inline-block; margin-top: 60px; padding: 10px 15px;
}
/*======================/////////////// START RESPONSIVE STYLE =====================///////////////////////*/
@media(max-width:1199px ){
#search-icon {
right: 4%;
}
.slide-article { padding-left: 30px; padding-right: 0; padding-top: 90px; } .slide-article h1 { font-size: 40px; } .blog-news-title h2, .blog-news-title h2 > a { font-size: 18px; } .main-slider { height: auto; }
}
@media(max-width:991px ){
#menu-area #navbar {
padding-right: 55px; } .navbar-default .navbar-nav > li > a { font-size: 13px; padding-left: 4px; padding-right: 4px; } #search { margin: 0 auto; width: 90%; } #search-icon { right: 3%; } .slide-article { padding-left: 60px; padding-right: 0; padding-top: 15px; } .slide-article h1 { font-size: 30px; line-height: 35px; } .slide-article p { color: #fff; margin-bottom: 40px; } .why-choose-us { margin-top: 20px; } .single-counter { margin-bottom: 30px; } .single-table-price { margin-bottom: 40px; } .single-team-member { margin-bottom: 50px; } .slick-prev { left: -10px; } .slick-next { right: -10px; } .blog-news-single { margin-bottom: 30px; } .title-area { padding: 0 100px; } .single-portfolio { width: 33.33%; } .single-item-content::after { width: 87%; } .blog-side-bar { margin-top: 50px; } .contact-area-right { margin-top: 40px; }
}
@media(max-width:767px ){
.header-bottom { padding: 0; }
.header-contact ul li:last-child {
display: none; } .navbar-brand { margin-top: 0; } #search-icon { right: 11%; top: 5px; } .main-nav li { padding: 0; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #fff; } #search { width: 100%; } #menu-area #navbar { padding-right: 15px; } .slider-img { display: none; } .slide-article { padding-top: 10px; } .title-area { padding: 0 30px; } .single-abstract { text-align: center; padding: 0 15px; } .single-page-header-left { text-align: center; } .single-page-header-right .breadcrumb { text-align: center; margin-top: 20px; } .footer-left { text-align: center; margin-bottom: 20px; } .footer-right { text-align: center; } .portfolio-menu { padding: 0; } .portfolio-menu ul li { margin: 0 3px 10px; padding: 6px 10px; } .blog-single-tag { text-align: center; } .blog-single-social { text-align: center; margin-top: 20px; }
}
@media(max-width:480px ){ #search input {
width: 85%; } #search-icon { right: 15%; top: 5px; } .slide-article h1 { font-size: 18px; line-height: 22px; margin-bottom: 10px; } .slide-article p { margin-bottom: 15px; font-size: 14px; } .read-more-btn { font-size: 14px; padding: 8px 14px; } .main-slider .slick-prev, .main-slider .slick-next { height: 40px; top: 46%; width: 40px; } .title-area .title { font-size: 25px; line-height: 26px; padding-bottom: 0px; } .title-area { padding: 0; } .title-area p { line-height: 23px; font-size: 15px; } .single-abstract p { font-size: 14px; } .our-skill-content p { font-size: 14px; } .why-choose-group .panel-body p { font-size: 14px; } .subscrib-form { width: 100%; } .footer-left { text-align: center; margin-bottom: 20px; } .footer-right { text-align: center; } #login-form .modal-dialog { width: 350px; } .overlay { padding: 50px 0; } .single-portfolio { width: 50%; } .single-item-content::after { width: 85%; } .portfolio-menu ul li { padding: 4px 5px; font-size: 12px; } .blog-archive-left .blog-news-img { height: 320px; } .blog-navigation-prev { margin-bottom: 10px; }
}
@media(max-width:360px ){
.login { padding: 10px; } .single-slide { height: 200px; } .single-slide img { height: 100%; } #menu-area .navbar-toggle { padding: 8px 6px; }
.phone {
font-size: 12px; } .header-contact ul li { margin-right: 0; padding: 10px 8px; } #search-icon { right: 20%; top: 5px; } .slide-article { padding-top: 0; padding-left: 0; } .slide-article p { font-size: 12px; margin-bottom: 10px; } .slide-article h1 { font-size: 15px; line-height: 16px; margin-bottom: 8px; } .read-more-btn { font-size: 12px; padding: 5px 8px; } #testimonial .title-area { padding: 0; } .subscribe-area h2 { font-size: 25px; letter-spacing: 0; margin-bottom: 25px; } .subscrib-form input { font-size: 15px; height: 40px; } .subscribe-btn { font-size: 15px; height: 40px; width: 95px; } #login-form .modal-dialog { width: 320px; } #search input { font-size: 14px; } .overlay { padding: 20px 0; } .single-portfolio { width: 100%; } .single-item-content::after { left: 15px; width: 92%; } .portfolio-menu ul li { padding: 4px 5px; font-size: 12px; } .blog-archive-left .blog-news-img { height: 250px; } .comments-form textarea { width: 100%; } .header-contact { margin-left: -10px; } .header-contact ul li { border: none; } .phone { font-size: 12px; width: 135%; }
}
@media(max-width:320px ){
#login-form .modal-dialog {
width: 300px; } .footer-box { font-size: 14px; } .header-contact ul li { padding: 10px 0 10px 3px; } .subscribe-area h2 { font-size: 22px; } .footer-left p { font-size: 12px; } .footer-right a { font-size: 16px; }
.single-item-content::after {
width: 91%; } .blog-archive-left .blog-news-img { height: 220px; }
}