Template:UI-Indonesia/prototype01/style css

/*****

• Author Name : Mostafizur Rahman
• Author URI : http://mostafiz.me
• Description : This is a responsive HTML5 and Bootstrap portolio template developed my Mostafizur Rahman
• Template URI : http://mostafiz.me/demo/folio/
• Version : 1.1
• • • • • /

body{ margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; } a:hover, a:visited, a{ text-decoration: none; } /*header area*/ .top-header{ background: #ffffff; position: fixed; width: 100%; z-index: 333; } .header-row{ margin: 0; padding: 0; } .top-header img.logo{ float: left; margin-top: 8px; margin-bottom: 30px; transition:all 0.7s ease 0s; -webkit-transition:all 0.7s ease 0s; -moz-transition:all 0.7s ease 0s; -o-transition:all 0.7s ease 0s; -ms-transition:all 0.7s ease 0s; } .navbar-default {

 background-color: transparent;
 border-color: transparent;
 margin-bottom: 0;
 margin-top: 23px;
 transition:all 0.7s ease 0s;

-webkit-transition:all 0.7s ease 0s; -moz-transition:all 0.7s ease 0s; -o-transition:all 0.7s ease 0s; -ms-transition:all 0.7s ease 0s; } .navbar-toggle span{ color: #fff; } ul.nav{ margin: 0; padding: 0; } .navbar-default .navbar-nav>li>a {

	font-size: 12px;

color: black; text-transform: uppercase; font-weight: 800; transition: all .7s ease 0s; -webkit-transition: all .7s ease 0s; -moz-transition: all .7s ease 0s; -o-transition: all .7s ease 0s; -ms-transition: all .7s ease 0s; padding: 12px 20px; border-radius: 5px; } .navbar-default .navbar-nav>li>a:hover{ color: red; background-color: #FFF; } .navbar-default .navbar-toggle {

 border-color: #fff;
 margin-top: 4px;

} /*banner area*/ .banner{ background: url(); background-repeat: no-repeat; background-size: cover; background-position: center;

} .banner h3{ font-size: 30px; color: #fff; margin-top: 205px; font-weight: 800; } .banner h1{ font-size: 68px; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 10px; } .banner p{ font-size: 18px; color: #fff; } .banner img{ margin: 50px; } .banner button{

font-size: 14px; color: #0b1016; background: transparent; border-radius: 8px; border: 2px solid #4CAF50;; font-weight: 800; margin-bottom: 205px; transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; -ms-transition: all .5s ease 0s;

} .banner button:hover{ background: transparent; color: red; } /*about section*/ .about{ background: #fff; } .about h2{ font-size: 46px; color: #02918c; font-weight: 800; text-transform: uppercase; margin-top: 90px; margin-bottom: 30px; } .about-heading img{ margin-bottom: 30px; } .about-heading p{ font-size: 16px; color: #7e8287; margin-bottom: 80px;

} .about-heading p span{ font-size: 23px; } .single-about{ margin-bottom: 90px; } .single-about + .single-about{ border-left: 1px solid #d9dbdb; } .about-inside{ padding: 50px; } .single-about:hover{ background: red; color: #fff; } .about-inside h3{ font-size: 16px; color: #7e8287; font-weight: 800; } .about-inside p{ font-size: 11px; color: #7e8287; } .about-inside i.fa{ color: #02918c; font-size: 30px; } .single-about:hover .about-inside i.fa{ color: #fff; } .single-about:hover .about-inside p{ color: #fff; } .single-about:hover .about-inside h3{ color: #fff; } /*service area*/ .service{ margin: 0; padding: 0; background: url(../img/typing-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .service-overlay{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(255, 255, 255, 0.43); } .service h2{ font-size: 46px; color: #02918c; text-transform: uppercase; font-weight: 800; margin-top: 75px; margin-bottom: 40px; } .service p{ font-size: 16px; color: #7e8287; margin-top: 35px; } .services{ margin-left: 0; padding-left: 0; } .bottom-services{ margin-bottom: 80px; } .single-service{ margin-left: 0; padding-left: 20px; margin-top: 50px; background: #F5F5F1; } .single-service:hover{ background: red; } .single-service i.fa{ color: #08938e; font-size: 30px; padding-top: 15px; } .single-service h3{ font-size: 16px; color: #7e8287; } .single-service p{ font-size: 11px; color: #7e8287; margin-top: 5px; } .single-service:hover.single-service i.fa{ color: #fff; } .single-service:hover.single-service h3{ color: #fff; } .single-service:hover.single-service p{ color: #fff; } /*portfolio area*/ .portfolio h2{ font-size: 46px; color: #02918c; margin-top: 100px; font-weight: 800; margin-bottom: 35px; } .portfolio-row{ margin: 0; padding: 0; } .portfolio-heading img{ margin-bottom: 30px; } .portfolio-heading p{ font-size: 16px; color: #7e8287; margin-bottom: 80px; } .single-portfolio{ margin: 0; padding: 0; position: relative; } .single-portfolio i.fa {

 position: absolute;
 z-index: 222;
 right: 0px;
 bottom: 0px;
 font-size: 25px;
 background: rgba(0, 0, 0, 0.39);
 padding: 10px;
 color: #fff;
 display: none;

} .single-portfolio:hover.single-portfolio i.fa{ display: block; } .portfolio-item{ position: relative; z-index: 10; } .portfolio-details{ position: absolute; z-index: 99; top: 25px;

 	left: 32px;

width: 80%; height: 80%; background: rgba(2, 145, 140, 0.77); display: none; } .single-portfolio:hover .portfolio-details{ display: block; } .portfolio-item img{ margin: 0; padding: 0; width: 100%; height: 100%; } .portfolio-details h4{ font-size: 16px; color: #fff; font-weight: 800; margin-top: 55px; } .portfolio-details p{ font-size: 13px; color: #fff; padding: 5px 20px; } /*contact area*/ .contact{} .contact h2{ font-size: 46px; color: #02918c; margin-top: 100px; font-weight: 800; margin-bottom: 35px; } .contact p{ font-size: 16px; color: #7e8287; margin-top: 30px; margin-bottom: 70px; } .contact-form{ margin: 0; padding: 0; background: #0b0b0b; overflow: hidden; } .contact-form input{ text-align: center; margin-bottom: 50px; border-bottom: 2px solid #898989; border-left: 0; border-top: 0; border-right: 0; background: transparent; color: #fff; } .contact-form input:focus{ outline: none; } input.name{ margin-top: 55px; width: 640px; } input.email{ width: 640px; } input.message{ width: 920px; } .contact-form input.submit-btn{ width: 200px; height: 50px; border:0; background: #cfc91d; font-size: 14px; color: #0b1016; font-weight: 800; margin:auto; margin: 0 50px; margin-bottom: 70px; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; } .contact-form input.submit-btn:hover{ background: red; color: #fff; }

.form-input::-webkit-input-placeholder { color:#EFEFEF; } .form-input:-moz-placeholder { /* Firefox 18- */

  color:#EFEFEF; 

}

.form-input::-moz-placeholder { /* Firefox 19+ */

  color:#EFEFEF; 

}

.form-input:-ms-input-placeholder {

  color:#EFEFEF;  

} /*footer area*/

.footer{ background: #000; } .footer p{ color: #7e8287; font-size: 12px; padding:25px; } .navbar-default .navbar-toggle .icon-bar {

 background-color: #FFF;

} .nivo-lightbox-image img{ width: 600px; height: 400px; }

/****************************** responsive area

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • /

/* lg */ @media (min-width: 1200px) {

}

/* md */ @media (min-width: 992px) and (max-width: 1199px) {

}

/* sm */ @media (min-width: 768px) and (max-width: 991px) { .single-service{ margin-bottom: 30px; } .navbar-default .navbar-nav>li>a{ padding: 12px 10px; } input.message { width: 718px; } }

/* xs */ @media (min-width: 480px) and (max-width: 767px) { input.name { margin-top: 55px; width: 420px; } input.email{ width: 420px; } input.message{ width: 420px; } .banner h1 { font-size: 60px; letter-spacing: 3px; } .about-inside{ padding: 10px; } }

/* XS Portrait */ @media (max-width: 479px) { .logo{ margin-top: 10px; } input.name{ margin-top: 55px; width: 275px; } input.email{ width: 275px; } input.message{ width: 275px; } .contact-form input.submit-btn{ width: 200px; height: 50px; border:0; } .banner h1 { font-size: 38px; letter-spacing: 0px; } .navbar-header{ margin-top: 5px !important; } .about-inside{ padding: 0px; } }