Template:IIT Kharagpur/interlab style

/* ===========================

Author: MH Rafi Website: http://themegret.com

============================== */

/* ==================== CSS Structure ==================== 1. COMMON STYLES - Reset Styles - Common Classes - Pre Loader Styles

2. HTML ELEMENTS STYLE - Button Styles

3. HEADER SECTION - Main Navigation Styles - Home section

4. FEATURE SECTION 5. SERVICE SECTION 6. STEP SECTION 7. Video SECTION

8. SCREENSHOT SECTION - ScreenShots hover effect style

9. TESTIMONIAL SECTION 10. PRICING SECTION - Folding Effect

11. SUBSCIBE SECTION 12. DOWNLOAD SECTION 13. CONTACT SECTION 14. FOOTER SECTION ========================================================== */

/*----------------top igem menu hide code----------------*/

1. contentSub, #sideMenu, #top-title, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {

   display:none;}

1. top_menu_14 {

height: 32px; z-index: 100; top: 0; position:absolute; width: 100%; color:#ffffff letter-spacing:2px; background-color:rgba(0,0,0,0.85);

               margin: 0px;
               padding: 0px;

}

1. globalWrapper, #content {

width: 100%; height: 100%; border: 0px; background-color: transparent; margin: 0px; padding: 0px; font-size: 100%; }

1. top_menu_inside {

 display: block;
 position: relative;
 width: 100%;
 height: 100%;
 margin: 7px auto;
 padding: 0 10px;
 border-left: 1px solid #c8c8c8;
 border-right: 1px solid #c8c8c8;
 font-family: 'arial', sans-serif;
 font-size: 12px;
 font-weight: 400;
 color: #ffffff;

}

/* --------------- Reset Styles --------------- */ body { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 28px; font-weight: 300; color: #666666; overflow-x: hidden !important; -webkit-font-smoothing: antialiased; }

a { color: #cccccc; text-decoration: none; }

a:hover, a:focus, .btn:focus {

   text-decoration: none;

outline: none; color: #6c6b6b }

input:focus, textarea:focus { outline: 0; }

h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', sans-serif; text-transform:capitalize; letter-spacing: 1px; }

h1 {

   font-size: 72px;
   line-height: 82px;

}

h2 {

   font-size: 48px;
   line-height: 60px;

}

h3 {

   font-size: 32px;
   line-height: 45px;

}

h4 {

   font-size: 20px;
   line-height: 30px;

}

h5 {

   font-size: 18px;

line-height: 25px; }

img { max-width: 100%; height: auto; }

ul, ol { padding-left: 0 !important; }

li { list-style: none; }

/* --------------- Common Classes --------------- */ .center { text-align: center; }

.left { text-align: left; }

.justify { text-align: justify; color: black; }

.strong { font-weight: 700; }

.floatright { float:right; }

.floatleft { float:left; }

.floatnone { float:none; }

.fixed { position:fixed; }

.absolute { position:absolute; }

.relative { position:relative; }

.container { position:relative; z-index: 10; }

.section-overlay { position: absolute; width: 100%; height: 100%; } .bodysection{ font-size: 20px; font-family: 'Droid Sans', sans-serif;

}

.animated { visibility: hidden; }

.visible { visibility: visible; }

.section-title { margin-bottom: 48px; } .section-titler { margin-bottom: 20px; } .bodysection{ background-color: white; } .safety-content{

}

.section-title h3, .section-title h4 { color: #F4F4F4; border-top: 1px solid; border-bottom: 1px solid; display: inline-block; margin-top: 0; padding: 8px 0;

} .section-titler h3, .section-titler h4 { color: #000000; border-top: 1px solid; border-bottom: 1px solid; display: inline-block; margin-top: 30px; padding: 8px 0;

}

.section-overlay { background: rgba(0, 0, 0, .7) !important; z-index: 5; }

/* --------------- Pre Loader Styles --------------- */

1. preloader {

position:fixed; top: 0; left: 0; background-color:#FFF; width: 100%; height: 100%; z-index: 10050; }

.loading-circle { position: absolute; left: 49%; top: 49%; height: 48px; width: 48px; border-radius: 50%; border-top: 2px solid #7F8C8D; border-right: 2px solid rgba(0,0,0, 0); border-bottom: 2px solid #7F8C8D; border-left: 2px solid rgba(0,0,0, 0); }

/* =============== HTML element styles =============== */ /* --------------- Button Styles --------------- */ .button-line { background: transparent; display: inline-block; font-weight: 400; border-radius: 4px; border: 1px solid; margin: 10px; overflow: visible; }

.no-text .icon { margin: 0; }

.btn .icon { margin-left: 13px; }

.button-white { border-color: #fff; color: #fff; }

.button-white:hover { border-color: #fff; color: #fff; }

/* ================ Header Section ================ */

.header-section { position:relative; }

/* --------------- Main Navigation Styles --------------- */ .sticky-bar-wrap { position:fixed; width: 100%; z-index: 1025; }

.sticky-section { width: 100%; height: 80px; z-index: 1025; transition: all .3s ease-in; background: rgba(0,0,0, .15); }

.nav-bg { background: rgba(0,0,0, .6); }

.site-name { color: #fff; font-family: "Dosis", arial, tahoma, verdana; font-size: 24px; padding: 8px 8px; letter-spacing: 1px; }

.site-name span { color: #fff; padding: 0 10px; font-weight: 400; height: 35px; width: 45px; display: inline-block; margin-right: 3px; font-size: 28px; line-height: 35px; }

.nav-hold { left: 0; right: 0; top: 0; padding-top: 13px; z-index: 1025; }

ul.nav > li > a { color:#fff; font-size: 16px; font-weight: 400; }

ul.nav > li > a:hover, ul.nav > li > a:focus { background: none !important; }

ul.nav > li > a:hover { color:white !important; }

.navbar-toggle .icon-bar { background: #ffffff; }

/* --------------- Home section --------------- */

.section-home { position:relative; }

.home { min-height: 750px; }

.well-come { position:relative; font-size: 50px; line-height: 62px; margin-top: 80px; margin-bottom: 48px; color:#fff !important; font-weight: 700; text-transform:uppercase; }

.well-come:after { position: absolute; content: ""; width: 220px; height: 1px; background-color: #FFF; bottom: -16px; left: calc(50% - 110px); }

.intro-message { font-size: 20px; line-height: 1.4; margin-bottom: 48px; color: #fff; }

/* ================ Features Section ================ */

1. section-feature {

background-color: #f9f9f9; }

.container.features { padding-top: 132px; padding-bottom: 190px; }

.baraja-container { width: 250px; height: 400px; }

.baraja-container .single-feature { border: 1px solid #ccc; border-radius: 4px; }

.single-feature .feature-title { margin-top: 18px; }

.single-feature .feature-text { line-height: 1.5; padding: 0 10px; margin-bottom: 16px; }

.baraja-container .single-feature:hover { -webkit-box-shadow: 0px 0px 10px rgba(110, 110, 110, 0.5); -moz-box-shadow: 0px 0px 10px rgba(110, 110, 110, 0.5); -o-box-shadow: 0px 0px 10px rgba(110, 110, 110, 0.5); box-shadow: 0px 0px 10px rgba(110, 110, 110, 0.5); }

.single-feature .feature-image {

}

.features-control { margin: auto; margin-top: 55px; width: 253px; z-index: 1020; }

.control-icon { position: absolute; top:0; padding: 5px 15px; font-size: 20px; height: 46px; }

.feature-link a{ color:#fff; font-weight: 400; } .feature-link a i { font-weight: 300; }

.features-control #feature-prev { left: 0px; }

.features-control #feature-expand { left: 60px; }

.features-control #feature-close { left: 120px; }

.features-control #feature-next { left: 180px; }

/* ================ Services Section ================ */

1. section-services {

position:relative; background-color: #333333; color: #e5e5e5; }

.container.services { padding-top: 120px; padding-bottom: 72px; }

.service { padding-bottom: 48px; }

.service-icon { float:left; width: 30%; }

.service-desc { display:table; }

.service-desc h4 { margin-top: 0; }

/* ================ Step-1,step-2,step-3 Sections ================ */ .container.step { padding-top: 120px; padding-bottom: 120px; }

.section-step { background-color:#f9f9f9; }

.step-even { background-color:#333; color:#e5e5e5; }

.step-even .step-desc { float:right; }

.step-even .step-img { float:right; }

.step-video { overflow:hidden; }

.step-no { width: 95px; height: 95px; border: 2px solid; border-radius: 50%; }

.step-no .no-inner { font-size: 72px; line-height: 86px; }

.step-details .step-title { margin-top: 0; margin-bottom: 24px; }

.step-details .step-description { margin-bottom: 48px; }

.step-details .sub-steps { margin-left: 30px; }

.step-details .sub-steps li { margin-bottom: 24px; }

.sub-steps .icon { float:left; border-top: 1px solid; border-bottom: 1px solid; border-left: 1px solid; line-height: 40px; padding: 0px 13px; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; }

.sub-steps .sub-text { border: 1px solid; height: 40px; line-height: 40px; display: table; padding: 0 10px; }

/* ================ Video Section ================ */

1. section-video {

position:relative; } .container.big-video { padding-top: 96px; padding-bottom: 120px; }

.video-content iframe { border: 0 !important; }

/* ================ ScreenShots Section ================ */

1. section-screenshots {

background-color:#333333; color:#e5e5e5; }

.container.screenshots { padding-top: 120px; padding-bottom: 96px; }

1. portfolio-loader {

display:none; position: relative; min-height: 700px; }

.porfolio-container { position:relative; }

.screenshot { margin-bottom: 32px; padding: 4px; border: 1px solid #444; border-radius: 4px; }

.photo-box{ position:relative; overflow:hidden; }

.photo-box img {

   width: 100%;
   -moz-transition: all 1.2s linear;
   -o-transition: all 1.2s linear;
   -webkit-transition: all 1.2s linear;
   transition: all 1.2s linear

}

.photo-overlay {

   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 101%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   -moz-transition: all 0.5s ease-in;
   -o-transition: all 0.5s ease-in;
   -webkit-transition: all 0.5s ease-in;
   transition: all 0.5s ease-in

}

.photo-overlay h4 { display:inline-block; color:#fff; font-size: 16px; font-weight: 700; padding: 4px; margin-top: 30px; }

.photo-zoom:before {

   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   content: "";
   border-style: none solid solid none;
   border-width: 0 130px 130px 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   position: absolute;
   -moz-transform: rotate(-90deg) translatex(-40px) translatey(40px);
   -ms-transform: rotate(-90deg) translatex(-40px) translatey(40px);
   -o-transform: rotate(-90deg) translatex(-40px) translatey(40px);
   -webkit-transform: rotate(-90deg) translatex(-40px) translatey(40px);
   transform: rotate(-90deg) translatex(-40px) translatey(40px);
   -moz-transition: all 0.5s ease-in;
   -o-transition: all 0.5s ease-in;
   -webkit-transition: all 0.5s ease-in;
   transition: all 0.5s ease-in

}

.photo-zoom a {

   color: #fff;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   position: absolute;
   bottom: 20px;
   right: 20px;
   -moz-transition: all 0.5s ease-in;
   -o-transition: all 0.5s ease-in;
   -webkit-transition: all 0.5s ease-in;
   transition: all 0.5s ease-in;
   -moz-transform: translatex(40px) translatey(40px);
   -ms-transform: translatex(40px) translatey(40px);
   -o-transform: translatex(40px) translatey(40px);
   -webkit-transform: translatex(40px) translatey(40px);
   transform: translatex(40px) translatey(40px)

}

.photo-zoom a:hover { color:#ccc; }

/* ------------- ScreenShots hover effect style ------------- */

.screenshot:hover .photo-overlay {

   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1

}

.screenshot:hover .photo-box img {

   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   transform: scale(1.2)

}

.screenshot:hover .photo-zoom:before {

   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate(-90deg) translatex(0) translatey(0);
   -ms-transform: rotate(-90deg) translatex(0) translatey(0);
   -o-transform: rotate(-90deg) translatex(0) translatey(0);
   -webkit-transform: rotate(-90deg) translatex(0) translatey(0);
   transform: rotate(-90deg) translatex(0) translatey(0)

}

.screenshot:hover .photo-zoom a {

   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: translatex(0) translatey(0);
   -ms-transform: translatex(0) translatey(0);
   -o-transform: translatex(0) translatey(0);
   -webkit-transform: translatex(0) translatey(0);
   transform: translatex(0) translatey(0)

}

/* ------------- Single Project ------------- */

1. portfolio-load {

display: none; position:relative; left: 105%; min-height: 400px; }

.backToProject {

}

.back-button { display:none; padding-top: 60px; }

.project-details h5, .project-info h5 { display:inline-block; margin-top:0; font-weight: 600; border-bottom: 1px solid; padding-bottom: 10px; }

.project-details .details-list {}

.project-details .details-list li { color:#e5e5e5; margin-bottom: 4px; }

.project-details .details-list li i { margin-right: 7px; }

.project-details .details-list li .strong { margin-right: 8px; }

/* ================ Testimonials Section ================ */

1. section-testimonials {

color:#e5e5e5; }

.testimonials-wrap { position:relative; }

.testimonials { padding-top: 120px; padding-bottom: 120px; }

.testimonials .comment { font-size: 18px; margin-bottom: 48px; }

.testimonial .happy-client { display: table; border-bottom: 1px solid; max-width: 280px; font-weight: 400; margin: 0 auto 5px; }

.testimonial .client-info { font-size: 14px; }

1. bx-pager {

margin-top: 48px; }

.client-photos .photo-hold { display:inline-block; width: 100px; height: 100px; padding: 10px; margin-right: 20px; border: 1px solid; border-radius: 4px; box-sizing: border-box; }

.client-photos .photo-bg { background: #000; display: block; }

.client-photos img { opacity: .4; }

.client-photos .active img { opacity: 1; }

/* ================ Pricing Section ================ */

1. section-pricing {

background: #f9f9f9; color:#666; }

.container.pricing { padding-top: 120px; padding-bottom: 120px; }

.pricing .section-title h3 { color:#666; }

.single-pricing { position: relative; background: #FFFFFF; border: 1px solid #d6d6d6; border-radius: 4px; }

.pricing-head { overflow: hidden; padding: 24px 0; }

.best-pricing .pricing-head { background: #333; }

.best-pricing .price h3 { color:#e5e5e5; }

.pricing-heading { margin-top: 0; margin-bottom: 0; }

.single-pricing .price h3 { margin-top: 0; margin-bottom: 0; font-weight: 700; line-height: 38px; }

.single-pricing .price .dollar { font-size: 20px; vertical-align: super; font-weight: normal; }

.single-pricing .price .month { font-size: 14px; font-family: 'Lato', sans-serif; font-style: italic; font-weight: 300; color:#959292; }

.single-pricing .package-features { margin-bottom: 15px; }

.single-pricing .package-features li:first-child { border-top: 1px solid #EEE; }

.single-pricing .package-features li { margin: 0px; padding-bottom: 9px; padding-top: 9px; border-bottom: 1px solid #EEE; color: #666; }

.single-pricing .package-features li span { margin-right: 8px; }

.single-pricing .sign-up { padding-bottom: 15px; }

/* ================ Subscribe Section ================ */

1. section-subscribe {

position:relative; }

.container.subscribe { padding-top: 120px; padding-bottom: 120px; }

.subscription-success, .subscription-failed { display:none; color: #e5e5e5; }

.subscribe h2 { margin-bottom: 30px; }

1. subscription-form {

overflow: hidden; width: 100%; }

1. subscription-form .input-email {

display: block; height: 55px; padding-left: 20px; width: 480px; color: #F4F4F4; background: transparent; border-radius: 4px; border: 1px solid #fff; margin: auto; margin-bottom: 14px; }

/* ================ Download Section ================ */

1. section-download {

background-color: #333; }

.container.download { padding-top: 120px; padding-bottom: 120px; }

.download h2 { margin-bottom: 30px; }

.download-buttons { clear:both; }

.download-buttons a { margin-top: 0; }

/* ================ Contact Section ================ */

1. section-contact {

position:relative; }

.contact { padding-top: 120px; padding-bottom: 120px; }

.contact h2 { margin-bottom: 30px; }

.confirmation { display:none; clear: both; color: #e5e5e5; }

.confirmation p span { margin-right: 8px; }

.contact-form { color:#f9f9f9; }

.contact-form .input-field { margin-bottom: 10px; margin-top: 10px; height: 50px; }

.textarea-field, .input-field { border: 1px solid #111; }

.contact-form .form-item { width: 100%; padding: 5px 15px; border-color:#ffffff; border-radius: 4px; background: transparent; box-shadow: none; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; }

.contact-form .form-item::-webkit-input-placeholder { color: #f9f9f9; }

.contact-form .form-item:-moz-placeholder { color: #f9f9f9; }

.contact-form .form-item::-moz-placeholder { color: #f9f9f9; }

.contact-form .form-item:-ms-input-placeholder { color: #f9f9f9; }

.contact-form .subform { margin-top: 20px; }

.contact-form .form-item:hover, .contact-form .form-item:focus { border-color:#ccc; box-shadow: none; }

/* ================ Footer Section ================ */

1. section-footer {

padding-bottom: 80px; background: #333; color:#e5e5e5; }

.footer-title { display: inline-block; margin-bottom: 40px; text-transform: none; }

.social-icons ul li { display: inline-block; }

.social-icons ul li a{ margin-left: 10px; font-size: 28px; color: #9D9D9D; font-weight: normal; text-shadow: none;

-webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; -o-transition: all .5s ease-in; transition: all .5s ease-in; }

.copyright { padding-top: 15px; }