Difference between revisions of "Template:INSA-Lyon/style"

Revision as of 00:32, 20 October 2016 (view source) Mickaelhubert (Talk | contribs) (→‎==) ← Older edit		Revision as of 01:56, 20 October 2016 (view source) Mickaelhubert (Talk | contribs) (→‎==) Newer edit →
Line 2,676:		Line 2,676:
	#topproof {		#topproof {
	background-attachment: fixed;		background-attachment: fixed;
−	background-image: url("https://static.igem.org/mediawiki/2016/3/31/T--INSA-Lyon--fondtop.png");	+	background-image: url("https://static.igem.org/mediawiki/2016/8/83/T--INSA-Lyon--Proof_banner.gif");
	min-height:100vh;		min-height:100vh;
	background-position: center;		background-position: center;

---

Revision as of 01:56, 20 October 2016

/* Table of Content

======================================

1. BASIC TYPOGRAPHY
2. HEADER
3. MENU
4. SLIDER
5. ABSTRACT
6. SAFETY
7. ABOUT
8. COUNTER
9. SERVICE
10. PRICING TABLE
11. TESTIMONIAL
12. PRICING TABLE
13. OUR TEAM
14. TESTIMONIAL
15. LOGOS BRAND
16. LATEST NEWS
17. SUBSCRIBE US
18. FOOTER
19. PORTFOLIO PAGE
20. BLOG PAGE
21. CONTACT PAGE
22. ERROR PAGE
23. 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; }

h7{

  font-size: 16px;
  text-align: left;

}

img{

border:none;

}

.figure{

 font-size:14px;
 line-height: 15px;
 padding-bottom: 30px;
 text-align: left;

}

.video{

   max-width: 100%;
   height: auto;

}

1. 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;

}

1. sidebar {

   max-height: 85vh;
   overflow: auto;

}

/* Preloader */

1. 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 */ 

}

1. 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 */ /*--------------------*/

1. header{

float: left; display: inline; width: 100%; }

.header-top{ background-color: #333; display: none; float: left; width: 100%; padding: 20px 0; }

1. search{

margin: 0 auto; width: 70%; }

1. search input {

 background-color: inherit;
 border: medium none;
 color: #fff;
 float: left;
 height: 100%;
 text-align: center;
 width: 95%;

}

1. search button[type="submit"] {

 background: inherit;
 border: medium none;
 color: #fff;
 height: 20px;
 width: 30px;

}

1. 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*/

1. login-form {

 background-color: rgba(0, 0, 0, 0.7);  

}

1. login-form .modal-dialog {

 margin: 130px auto;
 width: 400px;

}

1. login-content {

 border-radius: 0;

}

1. login-content .modal-title {

 font-size: 20px;

}

1. login-content .modal-title i{

 margin-right: 5px;

}

1. login-content .form-group input{

 height: 35px;
 border-radius: 0;

}

1. 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;

}

1. signup-content {

 display: none;

}

1. signup-content {

 border-radius: 0;

}

1. signup-content .modal-title {

 font-size: 20px;

}

1. signup-content .modal-title i{

 margin-right: 5px;

}

1. signup-content .form-group input{

 height: 35px;
 border-radius: 0;

}

1. 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 */ /*--------------------*/

1. menu-area{

background-color: #fff; display: inline; float: left; width: 100%; position: relative; }

1. menu-area #navbar {

 padding-right: 70px;

}

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. gold{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. 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;

}

/*--------------------*/ /* DESIGN */ /*--------------------*/

1. design{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. design a{

 font-size: 16px;

}

1. design p{

 text-align: right;

}

1. design h7{

 text-align: left;
 color: #d7000e;

}

.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;

}

.design-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.design-content p{

 text-indent:50px;
 text-align:right;

}

/*--------------------*/ /* INTEGRATED */ /*--------------------*/

1. integrated{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. integrated 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;

}

.integrated-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.integrated-content p{

 text-indent:50px;
 text-align:right;

}

/*--------------------*/ /* MODELING */ /*--------------------*/

1. modeling{

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;

}

.modeling-content {

 display: inline;
 float: left;
 width: 100%;
 margin-top: 50px;

}

.modeling-content p{

 text-indent:50px;
 text-align:justify;

}

.single-modeling{ display: inline; float: left; margin-bottom: 40px; width: 100%; }

.single-modeling:hover .safety-icon{ color: #444; }

.single-modeling .modeling-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-modeling:hover .feat-title{ color: #444; }

.single-modeling p {

 color: #303030;
 font-size: 15px;

}

/*--------------------*/ /* INTERLAB */ /*--------------------*/

1. interlab{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. interlab a{

 font-size:16px;

}

1. interlabsummary h3{

       font-size: 35px;

position: relative; color: #d7000e; }

1. plcalibration h4{

       font-size: 25px;

position: relative; color: #d7000e; }

.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 */ /*--------------------*/

1. achievements{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. achievements a:link {

 color: #10b2c1;

}

1. 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 */ /*--------------------*/

1. parts{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. parts h4{

 color: #c61525;

}

1. 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 */ /*--------------------*/

1. protocols{

background-color: #fff; display: inline; float: left; padding: 80px 0; width: 100%; padding-top:110px; }

1. protocols h4{

 color: #c61525;

}

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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 APTAMER*/ /*--------------------*/

1. topaptamer {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topaptamer-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topaptamer-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP HUMAN*/ /*--------------------*/

1. tophuman {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.tophuman-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.tophuman-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP INTEGRATED*/ /*--------------------*/

1. topintegrated {

 background-attachment: fixed;
 background-image: url("");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.topintegrated-overlay{

 background-color: rgba(0,0,0,0.2);
 height: 100vh;

}

.topintegrated-area{

 display: inline;
 float: left;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 margin-top: 65vh;
 padding: 10px;

}

/*--------------------*/ /* TOP PROTOCOLS*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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*/ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. our-team {

 display: inline;
 float: left;
 padding: 70px 0;
 width: 100%;
 padding-top: 100px;
 padding-left: 20vh;

}

1. 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 */ /*--------------------*/

1. 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;

}

1. testimonial .title-area {

 padding: 0 50px;

}

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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;

}

1. 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;

}

1. 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 */ /*--------------------*/

1. 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 */ /*--------------------*/

1. 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;

}

1. google-map{

 display: inline;
 float: left;
 width: 100%;

}

1. google-map iframe {

 margin-bottom: -5px;

}

/*--------------------*/ /* ERROR PAGE */ /*--------------------*/

1. 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;
 }

}