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

(→‎==)
 
(38 intermediate revisions by 2 users not shown)
Line 9: Line 9:
 
#SAFETY
 
#SAFETY
 
#ABOUT
 
#ABOUT
−
#COUNTER
 
−
#SERVICE
 
−
#PRICING TABLE
 
−
#TESTIMONIAL
 
−
#PRICING TABLE
 
 
#OUR TEAM
 
#OUR TEAM
−
#TESTIMONIAL
 
 
#LOGOS BRAND
 
#LOGOS BRAND
−
#LATEST NEWS
 
−
#SUBSCRIBE US
 
 
#FOOTER
 
#FOOTER
−
#PORTFOLIO PAGE
 
−
#BLOG PAGE
 
−
#CONTACT PAGE
 
 
#ERROR PAGE
 
#ERROR PAGE
 
#RESPONSIVE STYLE
 
#RESPONSIVE STYLE
−
*/
+
 
  
  
Line 78: Line 67:
 
         padding-top: 40px;
 
         padding-top: 40px;
 
padding-bottom: 5px;   
 
padding-bottom: 5px;   
 +
}
 +
 +
h4{
 +
  color: #c61525;
 +
  font-size: 25px;
 +
 +
}
 +
 +
h7{
 +
  font-size: 16px;
 +
  text-align: left;
 
}
 
}
  
Line 90: Line 90:
 
   text-align: left;
 
   text-align: left;
  
 +
}
 +
 +
.video{
 +
    max-width: 100%;
 +
    height: auto;
 
}
 
}
  
Line 97: Line 102:
 
      
 
      
 
}
 
}
 +
 +
  
  
Line 895: Line 902:
  
 
.single-collaborations p {
 
.single-collaborations p {
 +
  color: #303030;
 +
  font-size: 15px;
 +
}
 +
 +
 +
/*--------------------*/
 +
/* HP */
 +
/*--------------------*/
 +
 +
#hp{
 +
background-color: #fff;
 +
display: inline;
 +
float: left;
 +
padding: 80px 0;
 +
width: 100%;
 +
padding-top:110px;
 +
}
 +
 +
#hp 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;
 +
}
 +
 +
.hp-content {
 +
  display: inline;
 +
  float: left;
 +
  width: 100%;
 +
  margin-top: 50px;
 +
}
 +
 +
.hp-content p{
 +
  text-indent:50px;
 +
  text-align:justify;
 +
}
 +
 +
.single-hp{
 +
display: inline;
 +
float: left;
 +
margin-bottom: 40px;
 +
width: 100%;
 +
}
 +
 +
.single-hp:hover .hp-icon{
 +
color: #444;
 +
}
 +
 +
.single-hp .hp-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-hp:hover .feat-title{
 +
color: #444;
 +
}
 +
 +
.single-hp p {
 
   color: #303030;
 
   color: #303030;
 
   font-size: 15px;
 
   font-size: 15px;
Line 1,015: Line 1,137:
 
   font-size: 15px;
 
   font-size: 15px;
 
}
 
}
 +
 +
 +
/*--------------------*/
 +
/* SILVER */
 +
/*--------------------*/
 +
 +
#silver{
 +
background-color: #fff;
 +
display: inline;
 +
float: left;
 +
padding: 80px 0;
 +
width: 100%;
 +
padding-top:110px;
 +
}
 +
 +
#silver 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;
 +
}
 +
 +
.silver-content {
 +
  display: inline;
 +
  float: left;
 +
  width: 100%;
 +
  margin-top: 50px;
 +
}
 +
 +
.silver-content p{
 +
  text-indent:50px;
 +
  text-align:justify;
 +
}
 +
 +
.single-silver{
 +
display: inline;
 +
float: left;
 +
margin-bottom: 40px;
 +
width: 100%;
 +
}
 +
 +
.single-silver:hover .silver-icon{
 +
color: #444;
 +
}
 +
 +
.single-silver .silver-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-silver:hover .feat-title{
 +
color: #444;
 +
}
 +
 +
.single-silver p {
 +
  color: #303030;
 +
  font-size: 15px;
 +
}
 +
 +
/*--------------------*/
 +
/* RESULTS */
 +
/*--------------------*/
 +
 +
#results{
 +
background-color: #fff;
 +
display: inline;
 +
float: left;
 +
padding: 80px 0;
 +
width: 100%;
 +
padding-top:110px;
 +
}
 +
 +
#results 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;
 +
}
 +
 +
.results-content {
 +
  display: inline;
 +
  float: left;
 +
  width: 100%;
 +
  margin-top: 50px;
 +
}
 +
 +
.results-content p{
 +
  text-indent:50px;
 +
  text-align:justify;
 +
}
 +
 +
.single-results{
 +
display: inline;
 +
float: left;
 +
margin-bottom: 40px;
 +
width: 100%;
 +
}
 +
 +
.single-results:hover .results-icon{
 +
color: #444;
 +
}
 +
 +
.single-results .results-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-results:hover .feat-title{
 +
color: #444;
 +
}
 +
 +
.single-results p {
 +
  color: #303030;
 +
  font-size: 15px;
 +
}
 +
 +
 +
/*--------------------*/
 +
/* ENGAGEMENT */
 +
/*--------------------*/
 +
 +
#engagement{
 +
background-color: #fff;
 +
display: inline;
 +
float: left;
 +
padding: 80px 0;
 +
width: 100%;
 +
padding-top:110px;
 +
}
 +
 +
#engagement 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;
 +
}
 +
 +
.engagement-content {
 +
  display: inline;
 +
  float: left;
 +
  width: 100%;
 +
  margin-top: 50px;
 +
}
 +
 +
.engagement-content p{
 +
  text-indent:50px;
 +
  text-align:justify;
 +
}
 +
 +
.single-engagement{
 +
display: inline;
 +
float: left;
 +
margin-bottom: 40px;
 +
width: 100%;
 +
}
 +
 +
.single-engagement:hover .engagement-icon{
 +
color: #444;
 +
}
 +
 +
.single-engagement .engagement-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-engagement:hover .feat-title{
 +
color: #444;
 +
}
 +
 +
.single-engagement p {
 +
  color: #303030;
 +
  font-size: 15px;
 +
}
 +
 +
 +
/*--------------------*/
 +
/* DESCRIPTION */
 +
/*--------------------*/
 +
 +
#description{
 +
background-color: #fff;
 +
display: inline;
 +
float: left;
 +
padding: 80px 0;
 +
width: 100%;
 +
padding-top:110px;
 +
}
 +
 +
#description 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;
 +
}
 +
 +
.description-content {
 +
  display: inline;
 +
  float: left;
 +
  width: 100%;
 +
  margin-top: 50px;
 +
}
 +
 +
.description-content p{
 +
  text-indent:50px;
 +
  text-align:justify;
 +
}
 +
 +
.single-gold{
 +
display: inline;
 +
float: left;
 +
margin-bottom: 40px;
 +
width: 100%;
 +
}
 +
 +
.single-description:hover .gold-icon{
 +
color: #444;
 +
}
 +
 +
.single-description .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-description:hover .feat-title{
 +
color: #444;
 +
}
 +
 +
.single-description p {
 +
  color: #303030;
 +
  font-size: 15px;
 +
}
 +
 +
/*--------------------*/
 +
/* DESIGN */
 +
/*--------------------*/
 +
 +
#design{
 +
background-color: #fff;
 +
display: inline;
 +
float: left;
 +
padding: 80px 0;
 +
width: 100%;
 +
padding-top:110px;
 +
}
 +
 +
#design a{
 +
  font-size: 16px;
 +
}
 +
 +
#design howdesign{
 +
  text-align: right;
 +
}
 +
 +
#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 */
 +
/*--------------------*/
 +
 +
#integrated{
 +
background-color: #fff;
 +
display: inline;
 +
float: left;
 +
padding: 80px 0;
 +
width: 100%;
 +
padding-top:110px;
 +
}
 +
 +
#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 */
 +
/*--------------------*/
 +
 +
#modeling{
 +
background-color: #fff;
 +
display: inline;
 +
float: left;
 +
padding: 80px 0;
 +
width: 100%;
 +
padding-top:110px;
 +
}
 +
 +
#modeling figcaption{
 +
  font-size: 12px;
 +
  font-weight: bold;
 +
}
 +
 +
 +
.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;
 +
}
 +
  
 
/*--------------------*/
 
/*--------------------*/
Line 1,700: Line 2,580:
  
 
.single-safety p {
 
.single-safety p {
 +
  color: #303030;
 +
  font-size: 15px;
 +
}
 +
 +
/*--------------------*/
 +
/* PROOF */
 +
/*--------------------*/
 +
 +
#proof{
 +
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;
 +
}
 +
 +
.proof-content {
 +
  display: inline;
 +
  float: left;
 +
  width: 100%;
 +
  margin-top: 50px;
 +
}
 +
 +
.proof-content p{
 +
  text-indent:50px;
 +
  text-align:justify;
 +
}
 +
 +
.single-proof{
 +
display: inline;
 +
float: left;
 +
margin-bottom: 40px;
 +
width: 100%;
 +
}
 +
 +
.single-proof:hover .safety-icon{
 +
color: #444;
 +
}
 +
 +
.single-proof .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-proof:hover .feat-title{
 +
color: #444;
 +
}
 +
 +
.single-proof p {
 
   color: #303030;
 
   color: #303030;
 
   font-size: 15px;
 
   font-size: 15px;
Line 1,871: Line 2,863:
 
         text-shadow: 2px 2px 4px white;
 
         text-shadow: 2px 2px 4px white;
 
}
 
}
 +
 +
#nominations p{
 +
  text-align: center;
 +
}
 +
 +
#nominations h4{
 +
  text-decoration: underline;
 +
}
 +
  
 
.top-overlay{
 
.top-overlay{
Line 1,885: Line 2,886:
 
   margin-top: 50px;
 
   margin-top: 50px;
 
   padding: 30px;
 
   padding: 30px;
 +
  text-align: center;
 
}
 
}
 +
 +
  
 
/*--------------------*/
 
/*--------------------*/
Line 1,989: Line 2,993:
 
   padding: 10px;
 
   padding: 10px;
 
}
 
}
 +
 +
/*--------------------*/
 +
/* TOP APTAMER*/
 +
/*--------------------*/
 +
 +
#topaptamer {
 +
  background-attachment: fixed;
 +
  background-image: url("https://static.igem.org/mediawiki/2016/2/21/T--INSA-Lyon--fondaptamer.jpg");
 +
  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*/
 +
/*--------------------*/
 +
 +
#tophuman {
 +
  background-attachment: fixed;
 +
  background-image: url("https://static.igem.org/mediawiki/2016/5/53/INSA-Lyon_faontaine.jpg");
 +
  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*/
 +
/*--------------------*/
 +
 +
#topintegrated {
 +
  background-attachment: fixed;
 +
  background-image: url("https://static.igem.org/mediawiki/2016/7/77/T--INSA-Lyon--topintegrated.jpg");
 +
  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;
 +
}
 +
  
 
/*--------------------*/
 
/*--------------------*/
Line 2,131: Line 3,239:
 
   padding: 10px;
 
   padding: 10px;
 
}
 
}
 +
  
 
/*--------------------*/
 
/*--------------------*/
Line 2,138: Line 3,247:
 
#topdesc {
 
#topdesc {
 
   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/5/5a/INSA-Lyon_banniereDescription.jpg");
−
   min-height: 100vh;
+
   min-height:100vh;
 
   background-position: center;
 
   background-position: center;
−
   background-repeat: no-repeat;
+
   background-repeat: repeat;
 
   background-size: cover;
 
   background-size: cover;
 
   color: #ffffff;
 
   color: #ffffff;
Line 2,148: Line 3,257:
 
h2{
 
h2{
 
color: #c1000c;
 
color: #c1000c;
 +
       
 
}
 
}
  
−
.topdesc-overlay{
+
.toppdesc-overlay{
−
   background-color: rgba(0,0,0,0.7);
+
   background-color: rgba(0,0,0,0.2);
 
   height: 100vh;
 
   height: 100vh;
−
  width:40vh;
 
 
}
 
}
  
Line 2,159: Line 3,268:
 
   display: inline;
 
   display: inline;
 
   float: left;
 
   float: left;
−
  margin-top: 30vh;
+
   width: 100%;
−
   width:100%;
+
   height: 100%;
−
   padding:30px;
+
   background-color: rgba(0,0,0,0.7);
−
   /*background-color: rgba(0,0,0,0.7);*/
+
  margin-top: 65vh;
 +
  padding: 10px;
 
}
 
}
  
Line 2,198: Line 3,308:
 
   padding: 10px;
 
   padding: 10px;
 
}
 
}
 +
 +
  
 
/*--------------------*/
 
/*--------------------*/
Line 2,239: Line 3,351:
 
#topdesign {
 
#topdesign {
 
   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/5/51/T--INSA-Lyon--fonddesign.jpg");
 
   min-height:100vh;
 
   min-height:100vh;
 
   background-position: center;
 
   background-position: center;
Line 2,273: Line 3,385:
 
#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;
Line 2,478: Line 3,590:
 
#topsilver {
 
#topsilver {
 
   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/a/ad/INSA-Lyon_Lyon-1.jpg");
 
   min-height:100vh;
 
   min-height:100vh;
 
   background-position: center;
 
   background-position: center;
Line 2,546: Line 3,658:
 
#topengagement {
 
#topengagement {
 
   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/5/50/INSA-Lyon_GrandLyon.jpg");
 
   min-height:100vh;
 
   min-height:100vh;
 
   background-position: center;
 
   background-position: center;
Line 2,575: Line 3,687:
  
  
−
 
−
/*--------------------*/
 
−
/* 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;
 
−
}
 
  
  
Line 2,957: Line 3,815:
 
}
 
}
  
−
/*--------------------*/
 
−
/* 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;
 
−
}
 
  
 
/*--------------------*/
 
/*--------------------*/
Line 3,077: Line 3,858:
 
}
 
}
  
−
 
−
/*--------------------*/
 
−
/* 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;
 
−
}
 
  
  
Line 3,262: Line 3,869:
 
   display: inline;
 
   display: inline;
 
   float: left;
 
   float: left;
−
   padding: 25px 0;
+
   padding: 10px 0;
 
   width: 100%;
 
   width: 100%;
 
}
 
}
Line 3,304: Line 3,911:
  
  
−
/*--------------------*/
 
−
/* 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;
 
−
}
 
  
  

Latest revision as of 20:53, 22 November 2016

/* Table of Content

======================================
  1. BASIC TYPOGRAPHY
  2. HEADER
  3. MENU
  4. SLIDER
  5. ABSTRACT
  6. SAFETY
  7. ABOUT
  8. OUR TEAM
  9. LOGOS BRAND
  10. FOOTER
  11. ERROR PAGE
  12. 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; }

h4{ 

 color: #c61525;
 font-size: 25px;

}

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("T--INSA-Lyon--loader.gif"); /* 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;

}


/*--------------------*/ /* HP */ /*--------------------*/

  1. hp{

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

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

}

.hp-content { 

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

}

.hp-content p{ 

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

}

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

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

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

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

}


/*--------------------*/ /* SILVER */ /*--------------------*/

  1. silver{

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

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

}

.silver-content { 

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

}

.silver-content p{ 

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

}

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

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

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

.single-silver p { 

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

}

/*--------------------*/ /* RESULTS */ /*--------------------*/

  1. results{

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

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

}

.results-content { 

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

}

.results-content p{ 

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

}

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

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

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

.single-results p { 

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

}


/*--------------------*/ /* ENGAGEMENT */ /*--------------------*/

  1. engagement{

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

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

}

.engagement-content { 

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

}

.engagement-content p{ 

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

}

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

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

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

.single-engagement p { 

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

}


/*--------------------*/ /* DESCRIPTION */ /*--------------------*/

  1. description{

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

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

}

.description-content { 

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

}

.description-content p{ 

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

}

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

.single-description:hover .gold-icon{ color: #444; }

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

.single-description 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 howdesign{
 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; }

  1. modeling figcaption{
 font-size: 12px;
 font-weight: bold;

}


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

}

/*--------------------*/ /* PROOF */ /*--------------------*/

  1. proof{

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;

}

.proof-content { 

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

}

.proof-content p{ 

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

}

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

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

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

.single-proof 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("T--INSA-Lyon--fondtop.png");
 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;

}

  1. nominations p{
 text-align: center;

}

  1. nominations h4{
 text-decoration: underline;

}


.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;
 text-align: center;

}


/*--------------------*/ /* TOP GOLD*/ /*--------------------*/

  1. topgold {
 background-attachment: fixed;
 background-image: url("T--INSA-Lyon--fondgold.jpg");
 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("T--INSA-Lyon--fondachievements.jpg");
 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("T--INSA-Lyon--fondsafety.jpeg");
 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("T--INSA-Lyon--fondaptamer.jpg");
 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("INSA-Lyon_faontaine.jpg");
 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("T--INSA-Lyon--topintegrated.jpg");
 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("T--INSA-Lyon--fondprotocols.jpg");
 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("T--INSA-Lyon--Software_banner.png");
 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("T--INSA-Lyon--team.jpg");
 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("T--INSA-Lyon--fondcollaboration.jpg");
 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("INSA-Lyon_banniereDescription.jpg");
 min-height:100vh;
 background-position: center;
 background-repeat: repeat;
 background-size: cover;
 color: #ffffff;

}

h2{ color: #c1000c;

}

.toppdesc-overlay{ 

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

}

.topdesc-area{ 

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

}

/*--------------------*/ /* TOP PARTS*/ /*--------------------*/

  1. topparts {
 background-attachment: fixed;
 background-image: url("T--INSA-Lyon--fondparts.jpg");
 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("T--INSA-Lyon--pieds_attributions.png");
 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("T--INSA-Lyon--fonddesign.jpg");
 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("T--INSA-Lyon--Proof_banner.gif");
 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("T--INSA-Lyon--fondtop.png");
 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("T--INSA-Lyon--fondtop.png");
 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("T--INSA-Lyon--fondinterlab.jpg");
 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("T--INSA-Lyon--fondmodeling.jpg");
 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("T--INSA-Lyon--fondtop.png");
 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("INSA-Lyon_Lyon-1.jpg");
 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("T--INSA-Lyon--fondtop.png");
 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("INSA-Lyon_GrandLyon.jpg");
 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;

}



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

}


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

}


/*--------------------*/ /* FOOTER */ /*--------------------*/


  1. footer{
 background-color: #171717;
 display: inline;
 float: left;
 padding: 10px 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;

}



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

}