MAINHACK

Viewing / Editing File: style.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{  vertical-align:top;}/* vertical align top */
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{   display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/

@font-face{
font-family: "Abel-Regular";
src:url(../fonts/Abel-Regular.ttf);
}

@font-face{
font-family: "BlackOpsOne-Regular";
src:url(../fonts/BlackOpsOne-Regular.ttf);
}

body{ width:100%; font-family: "Abel-Regular"; background:url("../images/full.jpg" ) 0px 0px no-repeat; background-attachment: fixed;
background-size: cover; background: #fff; }
.container{ width: 450px; margin: 0px auto;  padding: 0; }
.corner {    display: none; width: 0; height: 0; border-top: 80px solid #ffc000; border-right: 150px solid transparent; margin-left: -15px; }
.corner-bottom {    display: none; width: 0; height: 0; margin-left: auto; border-bottom: 80px solid #ffc000; border-left: 150px solid transparent; margin-right: -15px; }

.modal-dialog { width: 300px !important; margin: 30px auto; }
.social-share ul{ position: relative; width: 100%; padding: 0; margin: 0;     text-align: center; }
.social-share ul li{ position: relative; padding: 0; margin: 0; display: inline-block; text-align: center; }
.social-share ul li a{  padding: 8px 10px; margin: 0 4px; background: #ff1d1ee3; text-decoration: none; transition: all 500ms ease-in-out; color: #fff; border-radius: 5px; font-family: 'Montserrat', sans-serif; font-size: 15px; letter-spacing: 0; border-bottom: 1px solid #696666; }
.social-share ul li a i.fa{     padding: 0 0px 0px 0; margin: 0; font-size: 15px; line-height: 20px;  }
.social-share ul li a:hover{ border-bottom: 2px solid #8e8989;  transition: all 500ms ease-in-out; }
.modal-title { margin: 0; text-align: center; font-family: 'Open Sans'; font-size: 20px; line-height: 30px; background: #ff3637; padding: 10px 0; border-radius: 6px; color: #fff; font-weight: bold; }
.modal-footer { padding: 15px; text-align: right; border-top: none !important; }

/*Header Top*/
.header-top{  width: 100%; position: relative; padding: 0; margin: 10px 0 0; }
.header-top ul{ padding: 0; margin: 0;  } 
.header-top ul li{ padding: 0; margin: 0; width: 20%; float: left; height: 8px; }

/*Header*/
.header{ width: 100%; padding: 20px 0 0 0; margin: 10px 0; background: url(../images/banner1.jpg) 0px 0px no-repeat; position: relative; height: 700px; }
.logo-block{ width: 100%; padding: 0; margin: 0; text-align: right;}
.logo{ width: 80%; }
.logo-block h3{ color: #ffffff; font-size: 23px; line-height: 32px; text-align: left; padding: 20px 0 5px; }
.logo-block h6{ color: #ffffff; font-size: 14px; line-height: 20px; text-align: left; }

.social-block{ position: relative; width: 100%; padding:20px 0 0; margin: 0;     text-align: center; }
.social-block ul{ position: relative; width: 100%; padding: 0; margin: 0;  }
.social-block ul li{ position: relative; padding: 0 5px; margin: 0; display: inline-block;  }
.social-block ul li a{ padding: 6px 13px; margin: 0; background: #ff1d1ee3; text-decoration: none; transition: all 500ms ease-in-out;  color: #fff; border-radius: 15px; font-family: 'Montserrat', sans-serif; font-size: 15px; letter-spacing: 0; border-bottom: 3px solid #292929; }
.social-block ul li a i.fa{     padding: 0 5px 0px 0; margin: 0; font-size: 15px; line-height: 20px;  }
.social-block ul li a:hover{ border-bottom: 3px solid #909090;  transition: all 500ms ease-in-out; }

.dropdown-social{ position: relative; width: 100%; padding:20px 0 0; margin: 0;     text-align: center; }
.dropdown-social ul{ position: relative; width: 100%; padding: 0; margin: 0;  }
.dropdown-social ul li{ position: relative; padding: 0 5px; margin: 0; display: inline-block;  }
.dropdown-social ul li a{ padding: 10px 15px; margin: 0 0px; background: #fea314; text-decoration: none; transition: all 500ms ease-in-out; color: #fff; border-radius: 0 20px 0 20px; font-family: 'Montserrat', sans-serif; font-size: 15px; letter-spacing: 0; border-bottom: 5px solid #ffe100; box-shadow: -4px 4px 3px #000000; }
.dropdown-social ul li a i.fa{     padding: 0 5px 0px 0; margin: 0; font-size: 15px; line-height: 20px;  }
.dropdown-social ul li a:hover{ border-bottom: 2px solid #8e8989;  transition: all 500ms ease-in-out; }

.contact-top{ width: 100%; height: auto; margin: 30px 0 0; padding: 0; }
.contact-top ul{padding: 10px 0 ; margin: 0; } 
.contact-top ul li{ font-size: 18px; padding: 5px 0 5px 30px; margin: 0; color: #fff; line-height: 20px; font-family: 'Open Sans'; } 
.contact-top ul li i.fa{ font-size: 15px; padding: 10px 0; color: #fff; background: #e90d0e; text-align: center; width: 10%; border-radius: 10px; border-bottom: 2px solid #9a0505;     margin: 0 15px 0px 0; }
.contact-top ul li a{ color: #fff; text-decoration: none; }
.dropdown-top{ padding: 0px 0 0 20px; margin: 0; width: 100%; display: inline-block;}
.dropdown-top .input-group{ width: 50%; float: left; display: block;margin: 10px 0; }
.dropdown-top .input-group input{ width: 90%; color: #000; padding: 10px; margin: 0; font-size: 15px; font-family: 'Open Sans'; border: none; border-radius: 5px; outline: none; }
.dropdown-top .input-group button{     border: none; width: 90%; color: #000; padding: 10px; margin: 0; color: #fff; font-size: 15px; background-image: linear-gradient( 140deg, #ff0001 0%, #e90d0e 50%, #ce0606 75%); border-radius: 5px; font-family: 'Open Sans'; font-weight: bold; }
.dropdown-top .input-group a{ display: block; text-align: center; border: none; width: 90%; color: #000; padding: 10px; margin: 0; color: #fff; font-size: 15px; background-image: linear-gradient( 140deg, #ff0001 0%, #e90d0e 50%, #ce0606 75%); border-radius: 5px; font-family: 'Open Sans'; font-weight: bold; }

/*About*/
.about-top{ width: 100%; height: auto; padding: 20px; margin: 10px 0; background: #fff; box-shadow: 1px 2px 15px #bfbfbf; position: relative; border: 10px solid #e7e7e7; }
.about-top h2{text-align: center; font-family: 'Open Sans'; font-size: 30px; font-weight: 600; line-height: 30px; padding: 0; margin: 0; color: #000; }
.about-top h3{    text-align: center; font-family: 'Open Sans'; font-size: 17px; color: #272525; line-height: 30px; padding: 5px 0 10px; margin: 0; font-weight: bold;  }
.about-top h3 span{ font-weight: bold; }
.about-top p{text-align: center; font-family: 'Open Sans'; font-size: 17px; line-height: 29px; color: #000; }

/*Services*/
.service-top{ width: 100%; height: auto; padding: 20px; margin: 10px 0; background: #fff; box-shadow: 1px 2px 15px #bfbfbf; position: relative; border: 10px solid #e7e7e7; }
.service-top h2{text-align: center; font-family: 'Open Sans'; font-size: 30px; font-weight: 600; line-height: 30px; padding: 0; margin: 0 0 20px; color: #000; }
 img.pro-img{  width: 100%; border-radius: 30px; text-align: center; background: #f1f1f1; padding: 10px; margin: 0 auto; }
.service-top a{ outline: none; padding: .5em 2em; font-size: 1em; color: #fff;   transition: all 500ms ease-in-out; border: none; background: #ff0001; -webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; width: 30%; display: block; margin: 0 auto 0; border-radius: 5px; border-bottom: 3px solid #bb0001; font-family: 'Open Sans'; font-weight: 600; text-decoration: none; }
.service-top a:hover{ background: #e20000;   transition: all 500ms ease-in-out;}

/*gallery*/
.gallery-top{ width: 100%; height: auto; padding: 20px; margin: 10px 0; background: #fff; box-shadow: 1px 2px 15px #bfbfbf; position: relative; border: 10px solid #e7e7e7; }
.gallery-top h2{text-align: center; font-family: 'Open Sans'; font-size: 30px; font-weight: 600; line-height: 30px; padding: 0; margin: 0; color: #000; }
img.gallery-img{  width: 100%; border-radius: 30px; text-align: center;  padding: 10px; margin: 0 auto; }

/*video*/
.video-top{  width: 100%; height: auto; padding: 20px; margin: 10px 0; background: #fff; box-shadow: 1px 2px 15px #bfbfbf; position: relative; border: 10px solid #e7e7e7; }
.video-top h2{text-align: center; font-family: 'Open Sans'; font-size: 30px; font-weight: 600; line-height: 30px; padding: 0; margin: 0 0 20px; color: #000; }
img.video-img{  width: 100%; border-radius: 30px; text-align: center;  padding: 10px; margin: 0 auto; }

/*FEEDBACKS*/
.feedback-top{ width: 100%; height: auto; padding: 20px; margin: 10px 0; background: #fff; box-shadow: 1px 2px 15px #bfbfbf; position: relative; border: 10px solid #e7e7e7; }
.feedback-top h2{text-align: center; font-family: 'Open Sans'; font-size: 30px; font-weight: 600; line-height: 30px; padding: 0; margin:0 0 20px; color: #000; }
.feedback-top .input-group{ width: 44%; float: left; display: block;margin: 10px; }
.feedback-top .input-group input {     border: 1px solid #dedede; width: 100%; color: #000; padding: 10px; margin: 0; font-size: 16px; font-family: 'Open Sans'; outline: none; }
.feedback-top input[type="submit"] {    outline: none; padding: .5em 2em; font-size: 1em; color: #fff; border: none; background: #ff0001; -webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; width: 30%; display: block; margin: 0 auto 0; border-radius: 5px; border-bottom: 3px solid #bb0001; font-family: 'Open Sans'; font-weight: 600; }
.feedback-top input[type="submit"]:hover { background: #333; color: #fff; }

/*enquuiry*/
.enquuiry-top{ width: 100%; height: auto; padding: 20px; margin: 10px 0; background: #fff; box-shadow: 1px 2px 15px #bfbfbf; position: relative; border: 10px solid #e7e7e7; }
.enquuiry-top h2{text-align: center; font-family: 'Open Sans'; font-size: 30px; font-weight: 600; line-height: 30px; padding: 0; margin: 0 0 20px; color: #000; }
.enquuiry-top .input-group{ width: 44%; float: left; display: block; margin: 10px; }
.enquuiry-top .input-group input {     border: 1px solid #dedede; width: 100%; color: #000; padding: 10px; margin: 0; font-size: 16px; font-family: 'Open Sans'; outline: none; }
.enquuiry-top .input-group textarea {  border: 1px solid #dedede; width: 100%; color: #000; padding: 10px; margin: 0; font-size: 16px; font-family: 'Open Sans'; outline: none;     height: 45px; }
.enquuiry-top input[type="submit"] { outline: none; padding: .5em 2em; font-size: 1em;   transition: all 500ms ease-in-out; color: #fff; border: none; background: #ff0001; -webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; width: 30%; display: block; margin: 0 auto 0; border-radius: 5px; border-bottom: 3px solid #bb0001; font-family: 'Open Sans'; font-weight: 600; }
.enquuiry-top input[type="submit"]:hover { background: #333; color: #fff; transition: all 500ms ease-in-out; }

/*payment*/
.payment-top{ width: 100%; height: auto; padding: 20px; margin: 10px 0; background: #fff; box-shadow: 1px 2px 15px #bfbfbf; position: relative; border: 10px solid #e7e7e7; }
.payment-top h2{text-align: center; font-family: 'Open Sans'; font-size: 30px; font-weight: 600; line-height: 30px; padding: 0; margin: 0 0 20px; color: #000; }
.payment-top .pay-det{ width: 100%; padding: 0 0 30px; margin: 0; }
.payment-top .pay-det h3{     font-weight: bold; font-size: 20px; line-height: 30px; padding: 0; margin: 0; font-family: -webkit-body; color: #f00; }
.payment-top .pay-det p{ font-size: 18px; color: #000; line-height: 30px; display: block; font-family: 'Open Sans'; font-weight: bold; }
.payment-top .pay-det p span{     text-align: right; float: right; font-size: 16px; color: #000000; line-height: 20px; padding: 0; margin: 0; font-family: inherit; font-weight: 500; }
.payment-top .pay-det img.pay-img{ width: 100%; }

/*footer-menu*/
.footer-menu{ width: 100%; background: #fff; background-image: linear-gradient(to bottom,#fff,#ffffff,#ffffff,#ffffff,#b3b3b3); position: fixed; z-index: 999999; bottom: 0;     box-shadow: 10px 0px 40px 0 rgb(0 0 0 / 22%); }
.footer-menu ul{ padding: 0; margin: 0; text-align: center; }
.footer-menu ul li{ display: inline-block; color: #000; font-size: 15px; line-height: 22px; padding: 10px 15px; margin: 0; letter-spacing: 1px; }
.footer-menu ul li a{ color: #b50505; font-weight: bold; text-decoration: none; }
.footer-menu ul li a:hover{ color: #006eff;   transition: all 500ms ease-in-out; }
.footer-menu ul li a span{ display: inline-block; padding: 0 10px 0 0; color: #fb0203;}
.cpy-right{ margin: 20px 0 60px; background: #fff; padding: 20px 20px 15px;   }
.cpy-right p{ text-align: center; color: #000; }
.cpy-right p a{ text-decoration: none; }

/*RESPONSIV 414*/
@media screen and (max-width: 420px) {
	.container{ width: 400px; margin: 0px auto;  padding: 0; overflow: hidden; }
	.header { width: 100%; padding: 15px 0 0 0; margin: 0;height: 700px;}
	.logo-block h3 { font-size: 20px; line-height: 30px; }
	.logo-block h6 { font-size: 12px; line-height: 20px; }
	.social-block ul li a { padding: 7px 10px; border-radius: 12px; font-size: 12px; }
	.contact-top ul li i.fa { font-size: 15px; padding: 10px 0; width: 8%; }
	.contact-top ul li { font-size: 15px; }
	.dropdown-top .input-group input { width: 90%; padding: 10px 8px; margin: 0; font-size: 14px; }
	.dropdown-top .input-group a{ font-size: 14px; }
	.dropdown-top .input-group button{ font-size: 14px; }

.about-top h2 { text-align: center; font-family: 'Open Sans'; font-size: 25px; }
	.about-top p { font-size: 14px; line-height: 27px; }

.enquuiry-top h2{ text-align: center; font-family: 'Open Sans'; font-size: 25px; }
	.enquuiry-top .input-group input { border: 1px solid #dedede; width: 100%; padding: 5px; margin: 0; font-size: 13px; }
	.enquuiry-top .input-group textarea{ border: 1px solid #dedede; width: 100%; padding: 5px; margin: 0; font-size: 13px; }

.feedback-top h2{ text-align: center; font-family: 'Open Sans'; font-size: 25px; }
	.feedback-top .input-group input { border: 1px solid #dedede; width: 100%; padding: 5px; margin: 0; font-size: 13px; }
	.feedback-top .input-group textarea{ border: 1px solid #dedede; width: 100%; padding: 5px; margin: 0; font-size: 13px; }

.payment-top .pay-det p { font-size: 15px; color: #464545; }
	.payment-top .pay-det p span { text-align: right; float: right; font-size: 14px; }
	
	.footer-menu ul li { display: inline-block; color: #000; font-size: 8px; line-height: 22px; padding: 0; margin: 0; letter-spacing: 0; }
	.footer-menu ul li a { color: #370101; font-weight: normal; text-decoration: none; }

}

/*RESPONSIV 375*/
@media screen and (max-width: 380px) {
	.container{ width: 370px; margin: 0px auto;  padding: 0; overflow: hidden; }
	.header { width: 100%; padding: 15px 0 0 0; margin: 0;height: 700px;}
    .logo-block h3 { font-size: 22px; line-height: 30px; padding: 15px 0 0; }
    .logo { width: 90%; }
    .social-block { position: relative; width: 100%; padding: 10px 0 0; }
    .social-block ul li { position: relative; padding: 0 2px; }
    .dropdown-top .input-group a { font-size: 10px; padding: 12px 0; }
    .dropdown-top .input-group button { font-size: 11px; }
    .dropdown-top .input-group input { width: 90%; padding: 8px 8px; margin: 0; font-size: 13px; }
    .about-top h3 { text-align: center; font-family: 'Open Sans'; font-size: 15px; line-height: 30px; padding: 3px 0 6px; }
    .about-top p { font-size: 14px; line-height: 25px; text-align: justify; }
    .service-top h2 { font-size: 25px; font-weight: 600; line-height: 30px; padding: 0; margin: 0 0 10px; }
    .gallery-top h2 { font-size: 25px; font-weight: 600; line-height: 30px; padding: 0; margin: 0 0 10px; }
    .feedback-top .input-group { width: 46%; float: left; display: block; margin: 5px; }
    .feedback-top input[type="submit"] { outline: none; padding: 8px 0; font-size: 14px; color: #fff; width: 40%; display: block; margin: 10px auto 0; border-radius: 5px; }
    .feedback-top h2 { text-align: center; font-family: 'Open Sans'; font-size: 20px; margin: 0 0 10px; }
    .enquuiry-top h2 { text-align: center; font-family: 'Open Sans'; font-size: 20px; margin: 0 0 10px; }    
	.enquuiry-top .input-group { width: 46%; float: left; display: block; margin: 5px; }
    .enquuiry-top input[type="submit"] { outline: none; padding: 8px 0; font-size: 14px; color: #fff; width: 40%; display: block; margin: 10px auto 0; border-radius: 5px; }
    .enquuiry-top .input-group textarea { border: 1px solid #dedede; width: 100%; padding: 5px; margin: 0; font-size: 13px; height: 30px; }
    .payment-top h2 { text-align: center; font-family: 'Open Sans'; font-size: 25px; font-weight: 600; line-height: 30px; padding: 0; margin: 0 0 20px; }
    .footer-menu ul li a span { display: inline-block; padding: 0; color: #fb0203; }
    .footer-menu ul li { display: inline-block; color: #000; font-size: 8px; line-height: 22px; padding: 0 3px; }
}

/*RESPONSIV 360*/
@media screen and (max-width: 365px) {
	.container{ width: 360px; margin: 0px auto;  padding: 0; overflow: hidden; }
	.logo-block h3 { font-size: 21px; line-height: 30px; padding: 10px 0 0; }
	.social-block ul li a i.fa { padding: 0 5px 0px 0; margin: 0; font-size: 12px; line-height: 20px; }
	.social-block ul li a { padding: 6px 8px; border-radius: 12px; font-size: 12px; }
	.contact-top ul li { font-size: 14px; }

}

/*RESPONSIV 320*/
@media screen and (max-width: 350px) {
	.container{ width: 320px; margin: 0px auto;  padding: 0; overflow: hidden; }
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: style.css

Server Info

System Features

User Info