h4, h5, h6, h1, h2, h3 {margin-top: 0;} ul, ol {margin: 0;} p {margin: 0;} body{ font-family: 'Open Sans', sans-serif; } html,body,a{ text-decoration:none; } /*--- Header Parts Starts Here ---*/ .header{ background:#151515; padding:10px 0; } .logo{ float:left; } .navigation{ float:right; color: #51b105; } .navigation ul.nav li{ display: inline-block; } .navigation ul.nav li a{ color:#fff; font-size:18px; text-decoration:none; } .navigation ul.nav li a:hover{ color:#51b105; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } .navigation span.menu{ display: none; } @media (max-width:768px){ .navigation{ width:100%; } .navigation span.menu{ display: block; background:none; float:right; cursor: pointer; margin-top:-35px; } .navigation ul.nav { display: none; margin-top:20px; width:100%; background:#fff; } .navigation ul.nav li{ display:block; text-align:center; border-bottom:1px solid #51b105; } } /*--- Header Parts Ends Here ---*/ /*--- Banner Parts Start Here ---*/ .banner{ background:url(../images/banner.jpg)no-repeat; background-size:cover; -webkit-background-size:cover; -o-background-size:cover; -ms-background-size:cover; -moz-background-size:cover; padding:2em 0; } .banner-top{ padding:10em 0 0; min-height:500px; } .banner-top h1{ font-weight:700; font-size:5.5em; color:#fff; } .banner-top p{ font-weight:600; font-size:24px; padding:0 0 1em 0; color: #fff; margin: 1% 51% 4% 0; } .banner-top a{ border:0; background:#45a608; color:#fff; text-transform: uppercase; text-decoration:none; padding: 0.85em 2.5em; font-weight: 700; font-size: 24px; border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; } .banner-top a:hover{ background:#391b0b; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } span.ad{ width:35px; height:35px; background:url(../images/ad-loc.png)no-repeat; display: block; float: left; margin-right: 1em; } span.loc{ width:35px; height:35px; background:url(../images/ph.png)no-repeat; display: block; float: left; margin:0 1em 1em 0; } /*--- Banner Parts Ends Here ---*/ /*--- Content Parts Starts Here ---*/ .content{ padding:4em 0; } .content-row-column{ text-align:center; } .content-row-column i{ width:303px; height:134px; display:inline-block; box-shadow:0 8px 6px -6px rgba(0, 0, 0, 0.4); -webkit-box-shadow:0 8px 6px -6px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 8px 6px -6px rgba(0, 0, 0, 0.4); -o-box-shadow:0 8px 6px -6px rgba(0, 0, 0, 0.4); -ms-box-shadow:0 8px 6px -6px rgba(0, 0, 0, 0.4); } .content-row-column i.icon1{ background:url(../images/icon1.png)no-repeat; } .content-row-column i.icon2{ background:url(../images/icon2.png)no-repeat; } .content-row-column i.icon3{ background:url(../images/icon3.png)no-repeat; } .content-row{ margin-bottom:10%; } .content-row-column h3{ font-weight:400; font-size:30px; color: #939292; padding: 0.5em 0; } .content-row-column p{ margin:0 10%; font-size:16px; color:#939292; } span.line{ width:34%; float:left; height:1px; background:rgba(147, 146, 146, 0.4); display: block; margin-top:21px; } a.line-anchor{ text-decoration:none; color:#FFF; background:#52b106; text-transform: uppercase; float: left; width:28%; margin:0 15px; text-align:center; padding:10px 0; font-size:20px; font-weight:700; cursor: text ; } .middle-row-column{ text-align:center; } img.icon4{ width:286px; height:215px; display:block; box-shadow: 0px 4px 9px -1px #999; -webkit-box-shadow: 0px 4px 9px -1px #999; -moz-box-shadow: 0px 4px 9px -1px #999; -o-box-shadow: 0px 4px 9px -1px #999; -ms-box-shadow: 0px 4px 9px -1px #999; } img.bua{ width:250px; height:240px; display:block; box-shadow: 0px 4px 9px -1px #999; -webkit-box-shadow: 0px 4px 9px -1px #999; -moz-box-shadow: 0px 4px 9px -1px #999; -o-box-shadow: 0px 4px 9px -1px #999; -ms-box-shadow: 0px 4px 9px -1px #999; } i.icon5{ width:48px; height:48px; background:url(../images/cli-cote.png)no-repeat; display:block; } .middle-row-column-right{ text-align:left; padding:3em 2em 0; } .middle-row-column-right p{ font-size:18px; font-weight:400; color:#939292; font-style: italic; margin-right:10%; padding:10px 0; } .content-middle-row{ margin:2em 0; } .content-bottom-row{ padding:2em 0 0 0; } .bottom-row-column p.ph{ font-size:14px; color:#939292; width: 60%; float: left; margin-top: 5px; } .bottom-row-column a{ font-size:14px; color:#939292; background:url(../images/mail.png)no-repeat left; padding:15px 50px; text-decoration:none; } .bottom-row-column a:hover{ color:#52b106; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } .bottom-row-column p.ad{ font-size:14px; color:#939292; width: 60%; float: left; } .bottom-row-column iframe{ width:330px; height:250px; } /*--- Content Parts Ends Here ---*/ /*--- Footer Starts Here ---*/ .footer{ padding:20px 0; } ul.social{ float:left; } ul.social li{ display: inline-block; } ul.social li i{ width:35px; height:35px; background:url(../images/img-sprite.png)no-repeat; display: inline-block; cursor:pointer; } ul.nav { margin-top: 9px; } ul.social li i:hover{ opacity:0.5; } ul.social li i.fa{ background-position:0px 0px; } ul.social li i.tw{ background-position:-38px 0px; } ul.social li i.pin{ background-position:-78px 0px; } ul.social li i.in{ background-position:-117px 0px; } p.copyright{ float:right; font-size:13px; color:#939292; } p.copyright a{ text-decoration:none; color: #52b106; } p.copyright a:hover{ color:#939292; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } /*--- FOoter Ends Here ---*/ /*--- About part Starts Here ----*/ .about-top{ padding:1em 0; } .about-top-row{ padding:2em 0; } .about-column h3{ text-transform:uppercase; font-weight:600; padding:10px 0; color: #70543a; } .about-column p{ font-size:14px; color:#312F2F; font-weight:400; line-height: 1.8em; margin-bottom: 1em; } img.icon6{ width:120px; height:90px; display:block; } .scroll-content{ padding:10px 0 } /*--- About part Ends Here----*/ /*---- Portfolio Starts Here ---*/ .portfolio{ padding:2em 0; } .portfolio-top-row{ margin:4em 0 } .portfolio-start{ padding:0em 0; } .view { width: 300px; height: 200px; margin: 10px; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; } .view .mask,.view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; } .view img { display: block; position: relative; } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0; } .view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center; } .info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; } .info: hover { background:#fff; } .view-fourth img { -webkit-transition: all 0.4s ease-in-out 0.2s; -moz-transition: all 0.4s ease-in-out 0.2s; -o-transition: all 0.4s ease-in-out 0.2s; -ms-transition: all 0.4s ease-in-out 0.2s; transition: all 0.4s ease-in-out 0.2s; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .view-fourth .mask { background-color: #45A608; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0) rotate(-180deg); -moz-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); -webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -ms-transition: all 0.4s ease-in; transition: all 0.4s ease-in; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .view-fourth h2 { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background: transparent; margin: 20px 40px 0px 40px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .view-fourth p { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .view-fourth a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .view-fourth:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .view-fourth:hover img { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; } .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; text-decoration:none; } .col_1_of_projects:first-child { margin-left: 0; } .col_1_of_projects { display: block; float: left; margin:0 0 0 2.6%; } a:hover, a:focus { text-decoration:none !important; } .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info{ text-decoration:none; } .span_1_of_projects { width: 22.8%; } h3.m_4{ color:#555; font-size:1em; text-transform:uppercase; } /*---- Contact part Starts Here --*/ .contact{ padding:2em 0; min-height:600px; } .contact-text{ padding:10px 0; } .contact-text input[type="text"]{ width:32%; padding:10px; border:1px solid #999; outline:none; -webkit-appearence:none; } h3.contact-head{ font-size:25px; font-weight:600; color:#70543a; } .contact-form{ padding:4em 0; } .contact-textarea textarea{ width:97%; height:250px; border:1px solid #999; resize:none; outline:none; -webkit-appearence:none; padding:10px; } .address{ text-align: left; } .address p,.address small{ font-size:16px; color:#939292; font-weight:400; margin:10px 0 20px; } .address a{ color:#52b106; text-decoration: none; font-size:16px; } .address a:hover{ color:#939292; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } .contact-but input[type="submit"]{ color:#fff; outline:none; background:#52b106; border:0; padding:0.85em 2em; font-size:14px; font-weight:700; text-transform:uppercase; text-align:center; } .contact-but{ padding:10px 0; } .contact-but input[type="submit"]:hover{ background:#939292; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } /*---- Contact part Ends Here --*/ /*--- Error Page starts here --*/ .error{ padding:2em 0; min-height:600px } .error-top{ text-align: center; margin:0 0 4em 0; } .error-top h1{ font-weight:700; font-size:6em; color:#52b106; padding:1em 0; } .error-top a.back{ color:#fff; background:#999; text-decoration:none; padding:10px 20px; } .error-top a.back:hover{ background:#52b106; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } /*--- Error Page Ends here --*/ /*---- Media Queries Starts Here ----*/ @media (max-width:1024px){ ul.nav { margin-top: 6px; } .banner-top { padding: 5em 0 0; min-height: 400px; } .banner-top h1 { font-size: 4.5em; } .banner-top p { font-size: 21px; margin: 1% 51% 3% 0; } .banner-top a { font-size: 20px; } img.icon4,img.bua{ width: 220px; height: 146px; display: block; background-size: 100%; } { width: 180px; height: 126px; display: block; background-size: 70%; } .middle-row-column-right { padding: 1em 2em 0; } img.icon6{ width: 90px; height: 75px; display: block; } .view,.view .mask, .view .content { width: 213px; height: 142px; } } @media (max-width:800px){ .navigation ul.nav li a { font-size: 15px; } .nav > li > a { padding: 10px 10px; } ul.nav { margin-top: 8px; } .logo a img{ width:80%; } .banner-top { padding: 4em 0 0; min-height: 308px; } .banner-top h1 { font-size: 3.2em; } .banner-top p { font-size: 18px; margin: 1% 42% 3% 0; } .banner { padding: 1em 0; } .banner-top a { font-size: 18px; padding: 0.85em 1.5em; } .content-row-column { margin: 0em 0 2em; } .content-row { margin-bottom: 2%; } .content-row-column h3 { margin: 0; } a.line-anchor { margin: 0 10px; font-size: 15px; } img.icon4,img.bua{ margin: 0 auto; } .middle-row-column-right p { font-size: 16px; } .bottom-row-column p.ph { background: url(../images/c2.png)no-repeat 261px 8px; } .content-bottom-row { } .bottom-row-column p.ad { background: url(../images/c1.png)no-repeat 209px 8px; } .bottom-row-column { margin: 0 0 1em 0; } p.copyright { margin-top: 10px; } .view,.view .mask, .view .content { width: 175px; height: 110px; } .portfolio { padding: 2em 0; width: 750px; } h3.contact-head { margin: 4% 0 0 0; } .contact-form { padding: 0em 0; } .contact-textarea textarea { width: 97%; height: 180px; } .mask p{ display: none; } .view-fourth h2 { margin:0 !important; } } @media (max-width:768px){ .navigation ul.nav li a { font-size: 18px; padding: 5px; margin: 0px; color:#52b106; } lable{ display: none; } .navigation ul.nav li a:hover{ background:#52b106; color: #fff; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } .view,.view .mask, .view .content { width: 175px; height: 110px; } .portfolio { padding: 2em 0; width: 710px; } i.icon6 { } } @media (max-width:640px){ .banner-top { padding: 2.5em 0 0; min-height: 237px; } .mask h2{ font-size:12px; } .banner-top h1 { font-size: 3em; } .banner-top p { font-size: 17px; margin: 1% 30% 2% 0; } .banner-top a { font-size: 17px; padding: 0.85em 1.2em; } .content-row-column i.icon1,.content-row-column i.icon2,.content-row-column i.icon3 { background-size: 100%; } .content-row-column i { width: 170px; height: 74px; } .content-row-column h3 { font-size: 25px; } .content-row-column p { font-size: 15px; } .content { padding: 2em 0; } .content-row-column { margin: 0em 0 1em; } a.line-anchor { font-size: 14px; } img.icon4,img.bua { width: 166px; height: 121px; background-size: 100%; } img.icon6{ margin:0 auto; } i.icon5 { width: 30px; height: 30px; background-size: 100%; } .middle-row-column-right p { font-size: 15px; margin-right:0; } .content-middle-row { margin: 0.5em 0; } .navigation span.menu { margin-top: -34px; } .bottom-row-column p.ph { background: url(../images/c2.png)no-repeat 210px 8px; } .bottom-row-column p.ad { background: url(../images/c1.png)no-repeat 144px 8px; } .content-bottom-row { padding: 1em 0 0 0; } .about-column h3 { margin: 0; font-size: 22px; } .portfolio { padding: 2em 0; width: 570px; } .view, .view .mask, .view .content { width: 124px; height: 86px; } .portfolio-top-row { margin: 2em 0 0; } } @media (max-width:480px){ .banner-top h1 { font-size: 2em; } .banner-top p { font-size: 14px; margin: 1% 39% 2% 0; } .mask h2{ font-size:20px; margin:10px !important; } .banner-top { padding: 1.8em 0 0; min-height: 174px; } .banner-top a { font-size: 14px; padding: 0.5em 0.85em; } .logo a img { width: 65%; } .navigation span.menu { margin-top: -31px; } .content-row-column h3 { font-size: 20px; } .content-row-column p { font-size: 14px; } span.line { width: 30%; } a.line-anchor { width: 33%; } .bottom-row-column p.ph { background: url(../images/c2.png)no-repeat 130px 8px; } .bottom-row-column p.ad { background: url(../images/c1.png)no-repeat 63px 8px; } p.copyright { margin-top: 6px; font-size:14px; } .portfolio { padding: 2em 0; width: 454px; } .view, .view .mask, .view .content { width: 208px; height: 141px; } .span_1_of_projects { width: 46.8%; margin-left: 0; } .col_1_of_projects:first-child { } .portfolio-top-row { margin: 1em 0 0; } } @media (max-width:320px){ .banner-top h1 { font-size: 1.5em; } .mask h2{ display: none; } .view-fourth a.info{ margin:10px !important; } .banner-top p { margin: 1% 10% 2% 0; } .banner-top { padding: 0.8em 0; min-height: 100px; } .banner-top a { font-size: 12px; } a.line-anchor { font-size: 13px; margin: 0 5px; } .content-row-column p { margin: 0 0%; } .content-row-column h3 { font-size: 16px; } .bottom-row-column p.ph { } .bottom-row-column p.ad { font-size: 14px; } .bottom-row-column iframe { width: 250px; height: 200px; } ul.social { float: none; padding: 0; } p.copyright { float: none; } .footer { padding: 20px 10px; text-align: center; } .content { padding: 1em 0 0; } .portfolio { padding: 1em 0; width: 301px; } .view, .view .mask, .view .content { width: 108px; height: 74px; } .contact-textarea textarea { width: 97%; height: 110px; } .contact-text input[type="text"] { width: 97%; margin: 7px 0; } h3.contact-head { margin: 6% 0 0 0; font-size:18px; } .contact-but { text-align: center; } .about-column h3 { font-size: 18px; } .about-column p { margin-bottom: 15px; } .view-fourth h2{ margin:10px 0 0 0; font-size: 14px; } .navigation span.menu { margin-top: -30px; } .error-top h1 { font-size: 2em; padding: 1em 0; } .error { padding: 2em 0; min-height: 340px; } } /*---- Media Queries Ends Here ----*/