/*---------------------------------------*/ /* TABLE OF CONTENTS */ /*---------------------------------------*/ /* */ /* 00 - Helper Classes */ /* 01 - General & Basic Styles */ /* 02 - Header */ /* 03 - Navigation */ /* 04 - Reveliotion Slider */ /* 05 - Sections */ /* 5_A - Sections General Styles */ /* 5_B - Section parallax BG */ /* 5_C - Section About */ /* 5_D - Section features */ /* 5_E - Section our work */ /* 5_F - Section counter */ /* 5_G - Section vedio */ /* 5_H - Section testimonials */ /* 5_I - Section features_image */ /* 5_J - Section blog */ /* 5_K - Section our skill */ /* 5_L - Section BGtext */ /* 5_M - Section our_team */ /* 5_N - Section Contactus */ /* 5_O - Section client */ /* 5_P - Section footer */ /* 5_Q - Section slide mobile */ /* 5_S - Section FEATURES mobile */ /* 5_T - Section FEATURES Images */ /* 06 - Pages */ /* 6_A - General pages Style */ /* 6_B - Contact Page */ /* 6_C - Contact Page 2 */ /* 6_D - blog Page */ /* 6_E - 404 Page */ /* 6_F - Single blog post Page */ /* 6_G - Login / Register Pages */ /* 6_H - Login Only Page */ /* 6_I - Service-1 & Service-2 Page */ /* 6_J - clients 1 Page */ /* 6_K - faq 1 Page */ /* 6_L - team Page */ /* 6_M - portfolio Page */ /* 6_N - about us Page */ /* 6_O - coming soon Page */ /* 6_P - shop Page */ /* 6_Q - product page */ /* 6_R - icon page */ /* 6_S - shortcodes page */ /* 6_T - typography page */ /* 6_U - Grid System page */ /* 6_V - Footers page */ /* 6_W - Headers page */ /* 6_X - Hotel Home page */ /* 6_Y - Parallax Home page */ /* 6_Z - Portfolio Page 3 */ /* 6_AA- Search result Page */ /* 6_Y - Parallax Home page */ /* 07 - Media Query RESPONSIVE */ /* */ /*---------------------------------------*/ /* Import Major fonts */ @import url(http://fonts.googleapis.com/css?family=Lobster); @import url(http://fonts.googleapis.com/css?family=Raleway:500,700,800,900); /*================================================== * 01 - General & Basic Styles * ===============================================*/ /*------- Main Color RED --------*/ /*--------------------------------*/ /* L-light = #ef4d34 */ /* Light = #e43d24 */ /* Rgb = rgb(228, 61, 36) */ /* Dark = #c13925 */ /*--------------------------------*/ /*---- Reset ----*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } html,body { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } input{ border:1px solid #b0b0b0; padding:3px 5px 4px; color:#979797; width:190px; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; padding: 0 ; margin: 0 ; -webkit-margin-before: 0px; -webkit-margin-after: 0px; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; margin:0; padding:0; -webkit-margin-before: 0px; -webkit-margin-after: 0px; -webkit-padding-start: 0px; -webkit-padding-end: 0px; } q:before,q:after { content:''; } abbr, acronym { border:0; } /*---- boxed Layout ----*/ .boxed { background-color: #FFF; width: 1200px; margin: 0 auto; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); position: relative; } .body-boxed { background: url(../img/pat/6.png) repeat fixed; } .boxed header{ width: 1200px; } /*---- end boxed Layout ----*/ body{ font-family: 'Open Sans', sans-serif; padding-top: 120px; text-rendering: optimizeLegibility; font-weight: 400; } a{ text-decoration: none; outline: 0 !important; } .clr{ clear: both; } .content{ position:relative; } h1{ margin:0px; padding:20px 0; font-size:32px; color:#000; text-align:center; font-weight:400; } h1 span{ display:block; font-size:14px; color:#666; font-style:italic; padding-top:5px; } h3{ margin-bottom: 7px; } p{ color: #666e70; line-height: 1.6em; font-size: 14px; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; font-weight: 400; } .h1{ font-family: 'Open Sans', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: 1px; color: #000; margin: 20px 0 10px 0; text-align: left; padding: 0; } .h2{ font-family: 'Open Sans', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: 1px; color: #000; margin: 20px 0 10px 0; } .h3{ font-family: 'Open Sans', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: 1px; color: #000; margin: 20px 0 10px 0; } .h4{ font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: #000; margin: 20px 0 10px 0; } .h5{ font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 1px; color: #000; margin: 20px 0 10px 0; } .h6{ font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 1px; color: #000; margin: 20px 0 10px 0; } .lft{ float: left; } .rgt{ float: right; } .totop{ position: fixed; right: -60px; bottom: 20px; background: #e43d24; color: #fff; width: 40px; height: 40px; line-height: 40px; text-align: center; cursor: pointer; border-radius: 2px; z-index: 9999; transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; -ms-transition: all 0.3s ease-in 0s; font-size: 20px; } .totop:hover,.totop:focus { background-color: rgba(23,23,23,0.6); color: #fff; text-decoration: none; } /*---- divider with icon ----*/ .divider { background: none repeat scroll 0 0 #dddee2; border: 0 none; clear: both; height: 1px; margin: 20px 0; position: relative; width: 100%; text-align: center; } .divider .iconz { background: none repeat scroll 0 0 #fff; color: #bbb; display: inline-block; font-size: 30px; height: 30px; left: 50%; line-height: 30px; margin:0 auto; position: absolute; text-align: center; top: -15px; width: 50px; margin-left: -25px; } /*---- divider with h3 ----*/ .divider2 { background: none repeat scroll 0 0 #dddee2; border: 0 none; clear: both; height: 1px; margin: 40px auto 50px 0; position: relative; width: 100%; display: block; text-align: center; } .divider2 h3 { background-color: #f2f2f2; color: #333; display: inline-block; font-size: 20px; height: 30px; left: 50%; line-height: 30px; margin:0 auto; position: absolute; text-align: center; top: -15px; width: 300px; margin-left: -150px; } .cut_fix{ width: 100%; clear: both; margin: 10px 0; } .att{ color:#e43d24; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary{ background-color: #c13925; border-color: #c13925; color: #fff; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .btn-lg, .btn-group-lg > .btn{ border-radius: 2px; } /*================================================== * 00 - Helper Classes * ===============================================*/ /* margin top */ .margin-top-10{margin-top: 10px;} .margin-top-20{margin-top: 20px;} .margin-top-30{margin-top: 30px;} .margin-top-40{margin-top: 40px;} .margin-top-50{margin-top: 50px;} .margin-top-60{margin-top: 60px;} .margin-top-70{margin-top: 70px;} .margin-top-80{margin-top: 80px;} /* margin bottom */ .margin-bottom-10{margin-bottom: 10px;} .margin-bottom-20{margin-bottom: 20px;} .margin-bottom-30{margin-bottom: 30px;} .margin-bottom-40{margin-bottom: 40px;} .margin-bottom-50{margin-bottom: 50px;} .margin-bottom-60{margin-bottom: 60px;} .margin-bottom-70{margin-bottom: 70px;} .margin-bottom-80{margin-bottom: 80px;} /* margin right */ .margin-right-10{margin-right: 10px;} .margin-right-20{margin-right: 20px;} .margin-right-30{margin-right: 30px;} .margin-right-40{margin-right: 40px;} .margin-right-50{margin-right: 50px;} .margin-right-60{margin-right: 60px;} .margin-right-70{margin-right: 70px;} .margin-right-80{margin-right: 80px;} /* margin left */ .margin-left-10{margin-left: 10px;} .margin-left-20{margin-left: 20px;} .margin-left-30{margin-left: 30px;} .margin-left-40{margin-left: 40px;} .margin-left-50{margin-left: 50px;} .margin-left-60{margin-left: 60px;} .margin-left-70{margin-left: 70px;} .margin-left-80{margin-left: 80px;} /* padding top */ .padding-top-10{padding-top: 10px;} .padding-top-20{padding-top: 20px;} .padding-top-30{padding-top: 30px;} .padding-top-40{padding-top: 40px;} .padding-top-50{padding-top: 50px;} .padding-top-60{padding-top: 60px;} .padding-top-70{padding-top: 70px;} .padding-top-80{padding-top: 80px;} /* padding bottom */ .padding-bottom-10{padding-bottom: 10px;} .padding-bottom-20{padding-bottom: 20px;} .padding-bottom-30{padding-bottom: 30px;} .padding-bottom-40{padding-bottom: 40px;} .padding-bottom-50{padding-bottom: 50px;} .padding-bottom-60{padding-bottom: 60px;} .padding-bottom-70{padding-bottom: 70px;} .padding-bottom-80{padding-bottom: 80px;} /* padding right*/ .padding-right-10{padding-right: 10px;} .padding-right-20{padding-right: 20px;} .padding-right-30{padding-right: 30px;} .padding-right-40{padding-right: 40px;} .padding-right-50{padding-right: 50px;} .padding-right-60{padding-right: 60px;} .padding-right-70{padding-right: 70px;} .padding-right-80{padding-right: 80px;} /* padding left */ .padding-left-10{padding-left: 10px;} .padding-left-20{padding-left: 20px;} .padding-left-30{padding-left: 30px;} .padding-left-40{padding-left: 40px;} .padding-left-50{padding-left: 50px;} .padding-left-60{padding-left: 60px;} .padding-left-70{padding-left: 70px;} .padding-left-80{padding-left: 80px;} /* float */ .float-left {float: left;} .float-right{float: right;} .float-none {float: none;} /* clear */ .clear-both {clear: both;} .clear-right{clear: right;} .clear-left {clear: left;} /* text align */ .text-center {text-align: center;} .text-left {text-align: left;} .text-right {text-align: right;} /* txt color*/ .color-white{color: #fff;} /* center */ .box-center{margin: 0 auto!important;display: block;} /* width */ .width-300{width: 300px;} /* section up footer */ .section-up-footer{ padding-bottom:100px !important; margin-bottom: -50px; } /* color BG */ .color_bg_f8{ background-color: #f8f8f8; } /*================================================== * 02 - Header * ===============================================*/ header { font-family: 'Open Sans', sans-serif; position: fixed; top: 0; width: 100%; z-index: 999; background-color: #fff; clear: both; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } header .container { position: relative; } /* search buton */ .habiba_search_button{ position:absolute; right:0; top:0; z-index:50; color: #fff; width: 0; height: 0; border-top: 50px solid #e43d24; border-left: 50px solid transparent; } .habiba_search_button i{ position: absolute; right: 8px; top: -40px; font-size: 14px; } .habiba_search_button:focus{ outline:none; color: #f1f1f1; } .habiba_search_button:hover{ color: #f1f1f1; } /* search form */ .habiba_search_form{ overflow:hidden; height:0; visibility: hidden; display: none; } .habiba_search_form .h_search_form_wrapper{ position:relative; padding:8px 0; } .habiba_search_form .btn{ background:0 0; border:none; padding-left:12px; padding-right:12px; } .habiba_search_form .form-control{ background-color:transparent; border:none; box-shadow:none; } .habiba_search_form .habiba_search_close{ position:absolute; right:0; top:0; line-height:50px; z-index:2; } .habiba_search_form .habiba_search_close a{ color: #fff; } .habiba_search_form .habiba_search_close a:hover{ color: #e43d24; } .habiba_search_form{ background-color:#222; } .habiba_search_form .btn:hover{ color:#e43d24; } .habiba_search_form .btn, .habiba_search_form .form-control{ color:#fff; } .habiba_search_form .form-control:focus{ color:#fff; border: 0; background-color:#222; } /* end search */ .fixed-header { opacity: 0.98; z-index: 99999; box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2); -o-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2); } .logo{ width: 150px; min-height: 60px; max-height: 100px; float: left; clear: left; } .logo a{ text-decoration: none; } .logo img{ float:left; display:block; padding-bottom: 5px; max-height: 110px; max-width: 100%; margin-top: -10px; vertical-align: middle; } .fixed-header .wrap-menu .logo img{ float:left; display:block; vertical-align: middle; padding-top: 3px; max-height: 65px; max-width: 100%; } .top_bar a{ text-decoration: none; } .top_bar{ width: 100%; height: 40px; border-bottom: 1px solid #eef1f1; display: block; line-height: 40px; background-color: #fff; margin-bottom: 0; clear: both; } .top_links{ float:right; } .mail_us{ font-family: 'Open Sans', sans-serif; float: left; width: 250px; margin-left: 5px; line-height: 40px; font-size: 13px; height: 40px; padding: 7px 0; } .mail_us i{ float: left; width: 25px; height: 25px; background-color: #fff; color: #3498db; font-size: 15px; padding: 4px 5px 5px 5px; } .mail_us p{ float: left; line-height: 25px; padding: 0 5px; } .mail_us span{ float: left; line-height: 25px; padding: 0 5px; font-weight: 600; } .mail_us a{ text-decoration: none; color: #666e70; } .mail_us a:hover{ color: #3498db; } .call_us{ font-family: 'Open Sans', sans-serif; width: 200px; float: left; color: #666e70; line-height: 40px; height: 40px; font-size: 13px; padding: 7px 0; } .call_us i{ float: left; width: 25px; height: 25px; background-color: #fff; color: #3498db; font-size: 18px; padding: 4px 5px; } .call_us p{ float: left; line-height: 25px; padding: 0 5px; } .call_us span{ float: left; color: #333; line-height: 25px; padding: 0 5px; font-weight: 600; } /* ---- social icons ---- */ .social{ float: right; text-decoration: none; } .social li{ width: 40px; height: 40px; float: left; border:1px solid #eef1f1; border-width: 0 0 0 1px; } .social li:last-child{ border-width: 0 1px 0 1px; } .social li a { color: #939393; display: block; height: 40px; padding-top: 4px; } ul.social li a i { font-size: 1.3em; display: block; margin: 0 auto; padding:7px 12px 7px 10px; } ul.social li a.fb i { padding:7px 12px !important; } ul.social li a:hover { color: #fff !important; } .fb:hover { background-color: #3B5998; } .twi:hover { background-color: #55ACEE; } .goo:hover { background-color: #DD4B39; } .yout:hover{ background-color: #C2191E; } .sky:hover { background-color: #36c4f3; } .sky i{ padding:5px 2px; } /*================================================== * 03 - Navigation * ===============================================*/ .pos{ position:absolute; font-size: 15px; top:30%; right:0; color: #636363; } .wrap-menu{ padding: 10px 15px; position: relative; height: 80px; } .fixed-header .wrap-menu{ padding: 5px 15px; height: 70px; font-family: 'Open Sans', sans-serif; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } /* Big Defualt menu */ #menu{ height: 80px; position: absolute; bottom: 0; right: 0; font-family: 'Open Sans', sans-serif; } .ca-menu{ padding: 0; margin: 0; width: auto; } .ca-menu > li{ width: 150px; height: 80px; float:left !important; display: block; background: #fff; position:relative; border-color: #eef1f1; border-width: 0 0 0 0; border-style: solid; } .ca-menu li:last-child{ margin-bottom: 0px; border-right: none; } .ca-menu li a{ text-align: left; display: block; width: 100%; height: 100%; color: #636363; position:relative; overflow:hidden; } /* small when scroll */ .fixed-header .wrap-menu #menu{ height: 70px; position: absolute; bottom: 0; right: 0 } .fixed-header .wrap-menu .ca-menu{ padding: 0; margin: 0; width: auto; } .fixed-header .wrap-menu .ca-menu > li{ width: 150px; height: 70px; float:left !important; display: block; background: #fff; position:relative; border-color: #eef1f1; border-width: 0 0 0 0; border-style: solid; } .fixed-header .wrap-menu .ca-menu li:last-child{ margin-bottom: 0px; border-right: none; } .fixed-header .wrap-menu .ca-menu > li > a{ text-align: left; display: block; width: 100%; height: 100%; color: #636363; position:relative; overflow:hidden; } /* -------- Drop --------- */ /* Drop On Big */ .ca-menu li > ul{ display: none; visibility: hidden; position:absolute; top:80px; z-index: 10000; background-color: #fff; min-width:150px !important; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); } /* Drop on small */ .fixed-header .wrap-menu .ca-menu > li > ul{ display:none; position:absolute; top:70px; z-index: 10000; min-width:150px !important; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); } .ca-menu li:hover > ul{ visibility: visible; } .ca-menu li ul li{ height:40px; border-bottom:1px solid #F1F1F1; padding:5px 15px; background-color:#fff; font-size:14px; min-width:120px; border-left: none ; margin-bottom:0; white-space: nowrap; position:relative; } .ca-menu li ul li:last-child{ border-bottom:3px solid #e43d24 !important; } .ca-menu li ul li:hover{ background-color:#fafafa; color:#e43d24 !important; border-bottom:1px solid #F1F1F1; box-shadow: none; } .ca-menu li ul li:hover a{ color:#e43d24; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .ca-menu li ul li a{ text-decoration: none; line-height: 30px; } .ca-menu li ul li i{ font-size: 15px; margin-right: 10px; width: 15px; } /* ---- drop 2 ---- */ .ca-menu li ul li > ul{ display:none; position:absolute; left:100%; top:0px; min-width:50px!important; } .ca-menu li ul li:hover > ul{ display:block; visibility: visible; } .ca-menu li ul li ul li a{ color:#636363 !important; } .ca-menu li ul li ul li{ color:#636363 !important; } .ca-menu li ul li ul li:hover > a{ color:#e43d24 !important; } /* ---- end drop ---- */ /* Structure Big */ .ca-icon{ font-size: 18px; line-height: 80px; color: #636363; position: absolute; width: 40px; left: 5px; text-align: center; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .ca-content{ -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; position: absolute; left: 50px; height: 80px; top: 22px; } .ca-main{ font-size: 16px; color: #636363; font-weight: 400; margin-bottom: 5px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .ca-sub{ font-size: 14px; color: #939393; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } /* structure Small */ .fixed-header .wrap-menu .ca-icon{ font-size: 18px; line-height: 70px; color: #636363; position: absolute; width: 40px; left: 5px; text-align: center; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fixed-header .wrap-menu .ca-content{ -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; position: absolute; left: 50px; height: 90px; top: 15px; } .fixed-header .wrap-menu .ca-main{ font-size: 16px; color: #636363; margin-bottom: 3px; font-weight: 400; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .fixed-header .wrap-menu .ca-sub{ font-size: 14px; color: #939393; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } /* ----------- Mega menu -------------- */ .ca-menu li .container ul li{ height:40px; border-bottom:1px solid #F1F1F1; padding:5px 15px; background-color:#fff; font-size:14px; min-width:120px; border-left: none ; margin-bottom:0; white-space: nowrap; position:relative; } .ca-menu li .container ul li a{ line-height: 30px; } .fixed-header .wrap-menu .ca-menu li .container ul li{ height:40px; border-bottom:1px solid #F1F1F1; padding:5px 15px 5px 25px; background-color:#fff; font-size:14px; min-width:120px; border-left: none ; margin-bottom:0; white-space: nowrap; position:relative; } .ca-menu li > .container ul{ display:block; position:static; top:80px; left: 0; padding-top: 10px !important; padding-bottom: 10px !important; border-left: 1px solid #f8fafa; z-index: 10000; border-bottom: 0; min-width:150px !important; } .fixed-header .wrap-menu .ca-menu li > .container ul{ display:block; position:static; top:70px; left: 0; padding-top: 10px !important; padding-bottom: 10px !important; border-left: 1px solid #f8fafa; z-index: 20000; border-bottom: 0; min-width:150px !important; } .ca-menu li .container ul li:last-child{ border-bottom: 0 !important; } .ca-menu li .container{ display:inline-block; position: absolute; visibility: hidden; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 3px solid #e43d24; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09); top: 80px; } .fixed-header .wrap-menu .ca-menu li > .container{ display:inline-block; position: absolute; visibility: hidden; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 3px solid #e43d24; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09); top: 70px; } .fixed-header .wrap-menu .ca-menu li:hover > .container{ visibility: visible; } .ca-menu li .container ul li{ border-bottom: 0 !important; padding-left: 25px; } .fixed-header .wrap-menu .ca-menu li .container ul li{ border-bottom: 0 !important; padding-left: 25px; } .ca-menu li .container ul li i{ float: left; line-height: 1.6em; margin-right: 5px; color: #636363; } .ca-menu li .container ul li a{ margin-left: 10px; display: inline-block; } .ca-menu li .container ul li:hover{ background-color: #fafafa; color:#e43d24; } .ca-menu li .container ul li:hover a{ color:#e43d24; margin-left: 10px; } .ca-menu li .container ul li:hover i{ color:#e43d24; } /*-------------- active class ---------------*/ .ca-menu li .container ul li.active{ background-color: #fafafa; color:#e43d24; } .ca-menu li .container ul li.active a{ color:#e43d24; margin-left: 10px; } .ca-menu li .container ul li.active i{ color:#e43d24; } /*end active class*/ .ca-menu li.mega1 .container { left: -850px; } .ca-menu li.mega2 .container { left: -720px; } .ca-menu li:hover .container{ display: inline-block; visibility: visible; } .ca-menu li.mega1 .container .col-md-3, .ca-menu li.mega2 .container .col-md-3 { padding-right: 0; padding-left: 0; } .mega-head{ color: #222; font-weight: 400; } /* --------------- hover Style ----------------- */ .ca-menu li:hover .ca-icon{ color: #e43d24; } .fixed-header .wrap-menu .ca-menu li:hover .ca-icon{ color: #e43d24; } .ca-menu li:hover .ca-main{ color: #e43d24; } .ca-menu li:hover .ca-sub{ color: #636363; } /* ----------------- Active Style ------------------ */ .ca-menu>li.active{ border-bottom: 3px solid #e43d24; } .fixed-header .wrap-menu .ca-menu>li.active{ border-bottom: 3px solid #e43d24; } .ca-menu>li.active .ca-icon{ color: #e43d24; } .fixed-header .wrap-menu .ca-menu>li.active .ca-icon{ color: #e43d24; } .ca-menu>li.active .ca-main{ color: #e43d24; font-size: 16px; } .ca-menu>li.active .ca-sub{ color: #636363; font-size: 14px; } /* active in drop */ .ca-menu li ul li.active{ background-color: #fafafa; color:#e43d24; } .ca-menu li ul li.active a{ color:#e43d24; } .ca-menu li ul li.active i{ color:#e43d24; } /*----------------------*/ /* Mobile menu */ /*----------------------*/ /* ---- Button ---- */ .mobile-menu-toggle { margin: 5px 5px 6px; height: 30px; text-decoration:none; border: 1px solid #e43d24; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: #e43d24; position: relative; top: 10px; right: 20px; } .mobile-menu-toggle { z-index: 100000; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; } .mobile-menu-toggle i{ color: #FFF; font-size: 18px; font-weight: 400; } /* ---- Mobile menu ---- */ .section-menu-mobile-w { height: 0; max-height: 380px; position: absolute; top: 100%; left: 0; right: 0; overflow: hidden; text-align: left; -webkit-transition: all 0.1s ease-in-out 0s; -moz-transition: all 0.1s ease-in-out 0s; -ms-transition: all 0.1s ease-in-out 0s; -o-transition: all 0.1s ease-in-out 0s; transition: all 0.1s ease-in-out 0s; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2); -weblkit-overflow-scrolling: touch; } .section-menu-mobile-w:before, .section-menu-mobile-w:after { content: " "; /* 1 */ display: table; /* 2 */ } .section-menu-mobile-w:after { clear: both; } .section-menu-mobile { padding: 0 40px; background: #21252b; } .section-menu-mobile form { margin: 20px 0; } .menu-mobile { list-style: none; margin: 0; padding: 0; padding-bottom: 20px; font-size: 14px; } .menu-mobile > li { margin: 0 -40px; } .menu-mobile ul { height: 0; overflow: hidden; } .menu-mobile ul.active { display: block !important; } .menu-mobile ul li { margin: 0; } .menu-mobile li { position: relative; } .menu-mobile li a { padding: 14px 40px; } .menu-mobile > li:last-child a { border-bottom: 1px solid transparent; } .menu-mobile > li:last-child a:hover { border-bottom: 1px solid transparent; } .menu-mobile a { display: block; line-height: 16px; border-bottom: 0; } .menu-mobile a:hover { text-decoration: none; border-bottom: 0; } .menu-mobile i { margin-right: 8px; } .menu-mobile.items-have-borders li a { border-top: 1px solid transparent; } @media (max-width: 992px) { .section-menu-mobile { padding: 0 30px; } .menu-mobile > li { margin: 0 -30px; } .menu-mobile li a { padding: 14px 30px; } } @media (max-width: 768px) { .section-menu-mobile { padding: 0 20px; } .menu-mobile > li { margin: 0 -20px; } .menu-mobile li a { padding: 14px 20px; } } @media (max-width: 767px) and (orientation: landscape) { .section-menu-mobile-w { max-height: 230px; } } @media (min-width: 768px) { .section-menu-mobile-w { max-height: 800px; } } @media (min-width: 992px) { .section-menu-mobile-w { max-height: 500px; } } .menu-mobile-dark li { background: #21252b; color: #c6ccd0; } .menu-mobile-dark li > a { color: #c6ccd0; } .menu-mobile-dark li:hover { background: #262b31; color: #e43d24; } .menu-mobile-dark li:hover > a { color: #e43d24; } .menu-mobile-dark li.active { background: #21252b; color: #e43d24; font-weight: 700; } .menu-mobile-dark li.active > a { color: #e43d24; } .menu-mobile-dark li.active:hover { background: #262b31; color: #e43d24; } .menu-mobile-dark li.active:hover > a { color: #e43d24; } .menu-mobile-dark.items-have-borders li a, .menu-mobile-dark.items-have-borders > li:last-child a { border-color: #2e343a; } .menu-mobile-dark.items-have-borders li a:hover, .menu-mobile-dark.items-have-borders > li:last-child a:hover { border-color: #2e343a; } .menu-mobile-dark ul { list-style: none; padding: 0; margin: 0; } .menu-mobile-dark ul li > a:before { content: "- "; } .menu-mobile-dark ul li > ul > li > a:before { content: "- - "; } .menu-mobile-dark ul li > ul > li > ul > li > a:before { content: "- - - "; } .menu-mobile-dark ul li > ul > li > ul > li > ul > li > a:before { content: "- - - - "; } .menu-mobile-dark ul a { color: #c6ccd0; } .menu-mobile-dark ul a:hover { color: #e43d24; } .menu-mobile-dark ul li.active a { color: #e43d24; } .menu-mobile-dark ul li.active a:hover { color: #e43d24; } /*================================================== * 04 - Reveliotion Slider * ===============================================*/ .tp-banner-container{ width:100%; position:relative; padding:0; } .over_slider_image{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); } .over_slider_image2{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.1); background-image: url(../img/background_section.png); background-repeat: repeat; } .tp-banner{ width:100%; position:relative; } .tp-banner-fullscreen-container { width:100%; position:relative; padding:0; } .tp-caption.medium_bg_darkblue { font-size:20px; line-height:20px; font-weight:800; color:#3e3e3e; text-decoration:none; background-color:#fff; padding:10px; border-radius: 2px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .btn-slider { color: #fff !important; font-weight: 700; font-size: 20px; border-color: #e43d24!important; background-color:#e43d24 !important; border-radius: 4px; cursor: pointer !important; } .habiba-cap1 { font-weight:700; font-size: 30px; color: #fff; } .habiba-cap2 { color: #3e3e3e; } .tp-caption.habiba-cap3 { font-size:16px; line-height:20px; font-weight:700; color:#3e3e3e; text-decoration:none; background-color:#fff; padding:5px 8px; text-shadow:none; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .habiba-cap4 { font-size:35px; line-height:35px; font-weight:400; color:#fff; text-decoration:none; padding:5px 8px; text-shadow:none; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .habiba-cap5 { font-size:20px; line-height:25px; font-weight:400; color:#fff; text-decoration:none; padding:5px 8px; text-shadow:none; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .tp-caption.bluebox30 { line-height:30px; text-decoration:none; background-color:#e43d24; padding:0px 14px; border-width:0px; border-color:rgb(34, 34, 34); border-style:none; } /************************************************* # # # 05 - Sections # # # *************************************************/ /*================================================= * 5_A - Sections General Styles *===============================================*/ /* Section Title Center */ .heading_title h2{ text-align: center; text-transform:uppercase; color: #333; font-size: 22px; letter-spacing: 0.07em; line-height: 1.6em; padding-bottom: 15px; display: table; margin: 0px auto ; position: relative; border-bottom: 1px solid #ccccd5; font-family: 'Raleway', sans-serif; font-weight: 600; font-style: normal; } .heading_title:hover .titleborder, .heading_title:focus .titleborder{ width: 100px; } .titleborderOut { width: 100%; position: relative; margin: 0px 0px 50px 0px; } .titleborderOut .titleborder { width: 80px; margin: -3px auto 0px auto; height: 5px; text-align: center; background: #e43d24; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .our_works .titleborderOut{ margin-bottom: 20px; } /* Section Title left */ .heading_title-left h2{ text-align: left; font-family: 'Raleway', sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; color: #333; font-size: 20px; letter-spacing: 0.07em; line-height: 1.6em; padding-bottom: 15px; display: table; margin: 0px auto 0 30px ; position: relative; border-bottom: 1px solid #ccccd5; } .heading_title-left:hover .titleborder-left, .heading_title-left:focus .titleborder-left{ width: 110px; } .titleborderOut-left { width: 100%; position: relative; margin: 0px 0px 20px 0px; } .titleborderOut-left .titleborder-left { width: 80px; margin: -3px auto 0px 30px; height: 5px; text-align: left; background: #e43d24; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /*================================================== * 5_B - Section parallax BG * ===============================================*/ .parallax .bg__foo{ position:relative; height:300px; padding-left:0; padding-right:0; text-indent:-9999px; background-attachment:fixed; background-position:top center; background-size:cover; } .bg__foo { background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg'); } /*================================================== * 5_C - Section About * ===============================================*/ .bg-pattern{ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset; background:url("../img/pat/7.png") repeat scroll 0 0 rgba(0, 0, 0, 0); } .about{ padding:30px 0; font-family: 'Open Sans', sans-serif; } .about h3{ font-weight: 600; font-size: 26px; line-height: 1.2em; margin-bottom: 10px; color: #fff; text-align: left; display: block; } .about h3 a { display: inline; color: #e43d24; cursor: pointer; text-decoration: none; } .about p { float: left; font-size: 16px; line-height: 1.6em; clear: left; color: #858d91; } .start{ padding: 10px 0 0 0; float: right; } .start .btn{ border-radius: 2px; padding: 15px 30px; font-size: 18px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; line-height: 20px; text-shadow: 1px 1px 1px rgba(0,0,0,.2); } .btn-primary { background-color: #e43d24; border-color: #e43d24; } .progress-bar-info { background-color: #ef4d34; } /*================================================== * 5_D - Section features * ===============================================*/ .featuresa { padding: 80px 0 30px 0; } .fet { cursor: pointer; margin-bottom: 50px; padding: 0 20px; height: 80px; } .fet h3{ font-weight: 500; font-family: 'Raleway', sans-serif; font-size: 18px; color: #333; transition: all 0.2s ease-in 0s; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; -o-transition: all 0.2s ease-in 0s; -ms-transition: all 0.2s ease-in 0s; } .fet:hover h3{ color: #e43d24; } .my-icon { display: inline-block; cursor: pointer; padding-top: 5px; float: left; width: 60px; height: 60px; margin-right: 20px; border-radius: 50%; text-align: center; position: relative; z-index: 1; color: #fff; position: relative; top: 5px; } .my-icon:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .my-icon:before { speak: none; font-size: 30px; line-height: 50px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smootmyng: antialiased; } /*---- Effect 2 ----*/ .fet .my-icon { color: #fff; box-shadow: 0 0 0 3px #e43d24; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .fet .my-icon:after { top: -2px; left: -2px; padding: 2px; z-index: -1; background: #e43d24; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -moz-transition: -moz-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; } /*---- Effect 2a ----*/ .fet:hover .my-icon-effect-2a .my-icon { color: #fff; } .fet:hover .my-icon-effect-2a .my-icon:after { -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); } /*---- Effect 2b ----*/ .fet:hover .my-icon-effect-2b .my-icon:after { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: -webkit-transform 0.4s, opacity 0.2s; -moz-transition: -moz-transform 0.4s, opacity 0.2s; transition: transform 0.4s, opacity 0.2s; } .fet:hover .my-icon-effect-2b .my-icon { color: #e43d24; } /*================================================== * 5_E - Section our work * ===============================================*/ .our_works{ padding: 60px 0 55px 0; } .more { margin: 50px auto 0 auto; width: 245px; } .more .btn-default { background-color: #fff; border-width: 2px; border-color: #999; transition: all 0.5s ease-in-out 0s; color: #999; } .more .btn-default:hover { background-color: #fff; border-color: #e43d24; color: #e43d24; } .more .btn-lg, .btn-group-lg > .btn { border-radius: 2px; font-size: 18px; line-height: 1.33; padding: 10px 25px; } .more .btn i{ margin-right: 10px; } .works_txt{ text-align: center; color: #666e70; font-weight: 400; margin-bottom: 30px; font-size: 18px; } .grid { overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; } /*---- Common style ----*/ .grid figure { position: relative; z-index: 1; display: inline-block; overflow: hidden; margin: -0.152em ; width: 25%; min-height: 270px; background: #3085a3; text-align: center; cursor: pointer; } .grid figure img { position: relative; display: block; min-height: 270px; height: 100%; border:0; opacity: 0.8; } .grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .grid figure a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .grid figure h2 { font-weight: 400; } .grid figure h2 span { font-weight: 800; } .grid figure h2, .grid figure p { margin: 0; } .grid figure p { letter-spacing: 1px; font-size: 80%; color: #fff; } /*---- Common style ----*/ .grid2 figure { position: relative; z-index: 1; display: inline-block; overflow: hidden; margin: -0.135em; width: 33.33%; height: 270px; background: #3085a3; text-align: center; cursor: pointer; } .grid2 figure img { position: relative; display: block; min-height: 100%; opacity: 0.8; width: 100%; } .grid2 figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid2 figure figcaption::before, .grid2 figure figcaption::after { pointer-events: none; } .grid2 figure figcaption, .grid2 figure a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .grid2 figure a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .grid2 figure h2 { font-weight: 400; } .grid2 figure h2 span { font-weight: 800; } .grid2 figure h2, .grid2 figure p { margin: 0; } .grid2 figure p { letter-spacing: 1px; font-size: 80%; color: #fff; } /*---- beba effect ----*/ figure.effect-beba { background: #e43d24; max-width: 100%; position: relative; } figure.effect-beba img { min-width: 100%; height: 100%; opacity: 1; } figure.effect-beba figcaption { padding: 2em; } figure.effect-beba figcaption::before, figure.effect-beba figcaption::after { position: absolute; content: ''; opacity: 0; } figure.effect-beba figcaption::before { top: 50px; right: 30px; bottom: 50px; left: 30px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 0 0; transform-origin: 0 0; } figure.effect-beba figcaption::after { top: 30px; right: 50px; bottom: 30px; left: 50px; border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); transform: scale(1,0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } figure.effect-beba h2 { padding-top: 23%; opacity: 0; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .grid2 figure.effect-beba h2 { padding-top: 20%; opacity: 0; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } figure.effect-beba p { padding: 0.5em 2em; text-transform: none; opacity: 0; -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0); } figure.effect-beba img, figure.effect-beba figcaption::before, figure.effect-beba figcaption::after, figure.effect-beba p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } figure.effect-beba:hover img { opacity: 0.2; -webkit-transform:scale(1.15); /* Safari and Chrome */ -moz-transform:scale(1.15); /* Firefox */ -ms-transform:scale(1.15); /* IE 9 */ -o-transform:scale(1.15); /* Opera */ transform:scale(1.15); } figure.effect-beba:hover .link { display: block; position: absolute; left: 50%; top: 60%; background-color: #fff; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; text-align: center; opacity: 1; text-indent: 0; } figure.effect-beba .link i { font-size: 20px ; color: #e43d24; line-height: 40px; } figure.effect-beba:hover figcaption::before, figure.effect-beba:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } figure.effect-beba:hover h2, figure.effect-beba:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure.effect-beba:hover figcaption::after, figure.effect-beba:hover h2, figure.effect-beba:hover p, figure.effect-beba:hover img { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } @media screen and (max-width: 69.5em) { .grid figure, .grid2 figure { width: 50%;} .grid figure figcaption, .grid2 figure figcaption { font-size: 100%;} } @media screen and (max-width: 41.5em) { .grid figure, .grid2 figure { width: 100%; } } /*================================================== * 5_F - Section counter * ===============================================*/ .counter{ background:url('../img/hd/2.jpg') no-repeat top center fixed; min-height:200px; background-size:cover; text-align: center; font-weight: 400; position: relative; } .timer { color: #fff; font-size:50px; font-weight:bold; } .counter p{ color: #fff; font-size: 40px; } .counter i{ font-size:55px; color: #fff; } .counter label{ color: #fff; font-size: 17px; font-weight: normal; } .bg__coo { padding: 60px 10px; background-color: rgba(228, 61, 36, 0.8); min-height:200px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset; background-image: url(../img/background_section.png); background-repeat: repeat; } .bg__coo:after{ /*background-color: #d94362;*/ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-image: url(../img/background_section.png); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); opacity: 0.9; background-repeat: repeat; } /*================================================== * 5_G - Section vedio * ===============================================*/ .vedio{ background-color: #fff; padding: 80px 20px; } .txt p { padding-top: 10px; } .lead-20 { font-size: 20px; line-height: 1.6em; font-weight: 400; margin-bottom: 10px; display: inline-block; } .lead-16 { font-size: 16px; line-height: 1.6em; } /*================================================== * 5_H - Section testimonials * ===============================================*/ .testimonials{ background:url('../img/hd/4.jpg') no-repeat top center fixed; min-height:200px; background-size:cover; background-position: top center; background-attachment: fixed; text-align: center; font-weight: 400; color: #fff; } .testimonials .bg__tes { padding: 80px 10px; background-color: rgba(0, 0, 0, 0.7); min-height:200px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset; background-image: url(../img/background_section.png); background-repeat: repeat; } .testimonials .testimonials-slider{ min-height: 270px; width: 75%; margin: 0 auto; } .testimonials .carousel-indicators { position: relative; top: 0; left: 0; z-index: 15; width: 100%; padding-left: 0px; margin-left: auto; text-align: center; list-style: none outside none; } .testimonials p.lead { line-height: 1.8em; color: #fff; font-weight: 400; font-size: 18px; } .testimonials .client{ font-weight: 400; font-size: 16px; font-style: italic; } .testimonials .client a{ color:#e43d24; font-weight: 400; } .testimonials .client a:hover{ color: #c13925; text-decoration: none; } .testimonials .carousel-indicators li { display: inline-block; width: 80px; height: 80px; margin: 15px; text-indent: 0px; cursor: pointer; background-color: transparent; border: 2px solid #FFF; border-radius: 50%; overflow: hidden; opacity: 0.60; } .testimonials .carousel-indicators li img{ width: 100%; } .testimonials .carousel-indicators .active { width: 80px; opacity: 1; height: 80px; margin: 15px; border:2px solid #e43d24; } /*---- Qoutes ----*/ .testimonials .fa-quote-left{ position: absolute; left: -40px; top: 100px; } .testimonials .fa-quote-right{ position: absolute; right: -40px; bottom: 15px; } .rate{ color:yellow; } .rate .non { color: #ccccd5; } /*================================================== * 5_I - Section features_image * ===============================================*/ .features_image{ padding: 80px 0; } .features_image img{ width: 100%; overflow: hidden; } .features_image .more{ margin-top: 10px; } .features_image .circle{ overflow: hidden; cursor: pointer; position: relative; padding: 15px; margin: 20px auto; text-align: center; border-radius: 2px; } /*--- circle hover ---*/ .features_image .circle:hover {} .features_image .circle .ca-iconi { text-align: center; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; display: inline; position: absolute; top: 0; left: 45%; color: #e43d24; } .features_image .circle:hover .ca-iconi { color: #e43d24; text-shadow: 0px 0px 1px #e43d24; font-size: 80px; opacity: 0.2; top: 0px; left: 30%; } .features_image .circle i{ margin-top: 15px; margin-bottom: 10px; } .features_image .circle p{ text-align: center; margin: 0 auto; } .features_image .circle h2{ font-size: 20px; font-weight: 600; margin-top: 60px; margin-bottom: 10px; font-size: 20px; } /*---- circle2 effect ----*/ .features_image .circle2{ overflow: hidden; cursor: pointer; position: relative;border-radius: 2px; padding: 10px; margin-bottom:20px; text-align: center; border: 1px solid #e43d24; } /*---- circle hover ----*/ .features_image .circle2 .ca-iconi { margin-top: 15px; margin-bottom: 10px; display: block; margin-right: 5px; text-align: center; float: left; width: 20%; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; position: absolute; top: 20%; left: 5px; color: #e43d24; } .features_image .circle2:hover .ca-iconi { color: #e43d24; text-shadow: 0px 0px 1px #e43d24; font-size: 60px; opacity: 0.2; top: 0; left: 15px; } .features_image .circle2 .wrap{ float: left; margin-left: 45px; } .features_image .circle2 p{ text-align: left; float: left; } .features_image .circle2 h2{ text-align: left; font-size: 18px; font-weight: 600; margin-top: 5px; margin-bottom: 5px; } /*================================================== * 5_J - Section blog * ===============================================*/ .blog_posts { min-height:300px; padding: 80px 10px; z-index: 2; } .blog_posts .row { margin-left: 0; margin-right: 0; } .blog_posts .blogs_box a.main_blog_img img { width: 100% !important; height: 220px; } .blogs_box.home-blogfeed .blog_txt { padding: 19px 19px 10px 19px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; display: inline-block; } .blogs_box.home-blogfeed .blog_info{ clear: both; margin: 15px 0 0 0; position: static; text-align: center; width: 90%; display: inline-block; line-height: 50px; } .blog_posts .txt { margin-bottom: 20px; } .blogs_box:hover .blog_txt{ color: #fff; cursor: pointer; } .blogs_box .btn-default { border-radius: 0; float: right; clear: both; position: absolute; right: 0; bottom: 10px; border:none; } .blogs_box.home-blogfeed .comments_no1{ position: absolute; top: 3px; right: 5px; } .blogs_box.home-blogfeed .comments_no1 i{ position: relative; font-size: 35px; color: rgba(255,255,255,0.6); text-align: center; } .blogs_box.home-blogfeed .comments_no1 i a{ line-height: 25px; font-family: 'Open Sans', sans-serif; text-decoration: none; text-align: center; font-size: 14px; font-weight: 600; color: #333; position: absolute; right: 50%; width: 20px; margin-right: -10px; } .author_img{ width: 50px; height: 50px; border-radius: 50%; float: left; padding: 2px; margin-right: 5px; border:1px solid #f1f1f1; } .blogs_box.home-blogfeed .author{ float: left; padding-left: 0!important; } .blogs_box.home-blogfeed .date{ float: left; padding: 0 10px 0 0!important; } .blogs_box.home-blogfeed{ position: relative; width: 95%; margin-bottom: 40px; margin-top: 0; border-width: 1px 3px 3px 1px!important; border-style: solid!important; border-color: #f1f1f1 #f1f1f1 #e43d24 #f1f1f1!important; } .blogs_box { border:1px solid #f1f1f1; position: relative; margin-top: 0; } /* Read more button */ .blog_posts .wrap-around { position: absolute; right: 0px; bottom: 23px; display: inline-block; margin-top: 16px; padding: 7px 20px; margin-right: 0; background: #e43d24; color: #fff; text-decoration: none; z-index: 999 !important; } .blog_posts .wrap-around:before { content: ''; position: absolute; right: -6px; top: -3px; width: 6px; height: 34px; background: #c13925; transform: skewY(-45deg); } .blog_posts .wrap-around:after { content: ''; position: absolute; top: -6px; right: -6px; width: 6px; height: 6px; background: #333; z-index: -1; } .blog_posts .wrap-around:hover { background: #555; text-decoration: none; color: #fff; } .blog_posts .wrap-around:hover:before { background: #333; } .blog_posts .wrap-around:hover:after { background: #000; } /*---- blog slider ----*/ .blog_posts .bx-wrapper .bx-controls-direction a{ /*top:-35px;*/ } .blog_posts .bx-wrapper .bx-prev { left: 0px; top:0px; position: absolute; } .blog_posts .bx-wrapper .bx-next { right:0px; top: 0px; position: absolute; } .blog_posts { position: relative; } .blog_posts .bx-has-controls-direction{ position: absolute; top: 50%; margin-top: -20px; width: 100%; } .blog_posts .bx-controls-direction{ position: relative; z-index: 3; left: 0; width: 100%; display: block; } .blog_posts .bx-controls-direction a { display: inline-block; height: 40px; width: 40px; line-height: 40px; font-size: 16px; text-align: center; background-color: #fff; border: 1px solid #ccccd5; border-radius: 2px; text-decoration: none; color: #ccccd5; margin: 0 0 0 0; } .blog_posts .bx-controls-direction a.bx-prev{ left:-40px; } .blog_posts .bx-controls-direction a.bx-next{ right:-30px; } .blog_posts .bx-controls-direction a:hover{ background-color: #fff; color: #222; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .blog_posts .bx-controls-direction a:before { font-size: 16px; font-family: "FontAwesome"; } .blog_posts .bx-controls-direction a.bx-prev:before{ content: "\f100"; } .blog_posts .bx-controls-direction a.bx-next:before { content: "\f101"; } /*---- Share blog ----*/ .share_blog{ position: absolute; left: -20px; visibility: hidden; top: 0; height: 40px; display: inline-block; background-color: rgba(0,0,0,0.7); padding: 10px 15px; } .share_blog li{ float: left; margin-right: 15px; } .share_blog li:last-child{ margin-right: 0; } .share_blog li a{ color: #fff; font-size: 16px; } .share_blog li a.fb:hover { color: #3B5998; background-color: transparent; } .share_blog li a.twi:hover { color: #55ACEE; background-color: transparent; } .share_blog li a.goo:hover { color: #DD4B39; background-color: transparent; } .blogs_box.home-blogfeed:hover .share_blog{ left: 0; visibility: visible; transition: all 0.2s ease-in 0s; -webkit-transition: all 0.2s ease-in 0s; -moz-transition: all 0.2s ease-in 0s; -o-transition: all 0.2s ease-in 0s; -ms-transition: all 0.2s ease-in 0s; } /*================================================== * 5_K - Section our skill * ===============================================*/ .our_skills { padding: 70px 0; } .ruler { position: relative; overflow: hidden; margin-top: 12px; color: #e43d24; } .ruler .ruler-line { border-top: 1px solid #e43d24; background-image: linear-gradient(90deg,#e43d24 1px,transparent 1px); display: block; height: 8px; background-size: 9.98% 8px; background-position: 0 0; } .ruler .middle{ position: absolute; right: 0; left: 0; text-align: center; margin: 0 auto; } .progress { background-color: #f5f5f5; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; height: 32px; line-height: 32px; margin-bottom: 25px; overflow: hidden; } .progress p{ line-height: 30px; font-weight: 400; text-indent: 5px; margin-left: 10px; color: #fff; float: left; } .progress i{ font-size: 20px; line-height: 32px; position: absolute; left: 100px; float: left; margin-left: 20px; } .progress-bar { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; -webkit-animation: move 5s linear infinite; -moz-animation: move 5s linear infinite; animation: move 5s linear infinite; width: 0; line-height: 32px; } .progress-bar-habiba { background-color:#e43d24; } .progress-bar{ box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); } .left-25 { padding-left: 25px; } .ourskils_p{ margin-bottom: 15px; color: #555; } .our_skills ul li{ margin-bottom: 5px; color: #555; } li.head_li{ color: #e43d24 !important; font-family: 'Raleway', sans-serif; text-transform: uppercase; font-weight: 400; font-size: 15px; margin-bottom: 10px; } .ourskils_ul li i{ color: #e43d24 ; margin-left: 20px; margin-right: 8px; } .dropcap { float: left; font-size: 60px; font-weight: 400; line-height: 100%; margin: 0 20px 5px 0; color: #666; } .nav-tabs li.active { font-weight: bold; } /*================================================== * 5_L - Section BGtext * ===============================================*/ .textbg{ background:url('../img/hd/18.jpg') no-repeat top center fixed; background-size:cover; text-align: center; font-weight: 400; color: #fff; } .textbg .bg__tes { padding: 50px 10px; background-color: rgba(0, 0, 0, 0.7); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset; background-image: url(../img/background_section.png); background-repeat: repeat; } .textbg h1{ text-shadow:none; color: #fff; font-weight: 700; font-size: 30px; padding: 10px; letter-spacing: 1px; line-height: 1.6em; text-transform: capitalize; } .textbg h3{ text-shadow:none; color: #fff; font-weight: 400; font-size: 20px; line-height: 1.6em; margin-bottom: 30px; } .textbg a{ font-weight: 400; } .textbg a i{ margin-right: 5px; } .textbg .btn { border-radius: 2px; } /*---- text section 2 ----*/ .textbg2{ background:url('../img/ww1.jpg') no-repeat top center fixed; background-size:cover; text-align: center; font-weight: 400; color: #fff; } .textbg2 .bg__tes { padding: 145px 10px; background-color: rgba(0, 0, 0, 0.7); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset; background-image: url(../img/background_section.png); background-repeat: repeat; } .textbg2 h1{ text-shadow:none; color: #fff; font-weight: 800; font-size: 40px; padding: 10px; letter-spacing: 1px; line-height: 1.6em; text-transform: capitalize; } .textbg2 h3{ text-shadow:none; color: #fff; font-weight: 400; font-size: 25px; line-height: 1.6em; margin-bottom: 30px; } .textbg2 a{ font-weight: 400; } .textbg2 a i{ margin-right: 5px; } .textbg2 .btn { border-radius: 2px; } /*================================================== * 5_M - Section our_team * ===============================================*/ .our_team{ font-weight: 400; color: #fff; background-image: url("../img/teambg_xs.jpg"); } .bg__team { padding: 80px 10px; background: rgba(0,0,0,0.9); background-image: url(../img/background_section.png); background-repeat: repeat; } .our_team .heading_title h2 { color: #fff; border-bottom: 1px solid #fff; } .box{ width: 250px; height: 350px; position: relative; overflow: hidden; background: rgba(255,255,255,1); display: block; margin: 20px auto; cursor: pointer; color: #2c3e50; box-shadow: inset 0 0 0 3px #2c3e50; -webkit-transition: background 0.4s 0.5s; transition: background 0.4s 0.5s; } .box:hover { background: rgba(255,255,255,1); -webkit-transition-delay: 0s; transition-delay: 0s; } .box h3 { font-size: 20px; line-height: 20px; margin: 10px 0 7px 0; text-align: center; font-weight: 600; width: 100%; } .box img { width: 90%; height: 225px; margin-left: 5%; margin-top: 5%; margin-bottom: 5px; } .box span { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; line-height: 1.6em; text-align: center; } .box h3, .box span { -webkit-transition: color 0.4s 0.5s; transition: color 0.4s 0.5s; } .box:hover h3, .box:hover span { color: #c13925; -webkit-transition-delay: 0s; transition-delay: 0s; } .box svg { position: absolute; top: 0; left: 0; } .box svg line { stroke-width: 4; stroke: #fff; fill: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .box:hover svg line { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .box svg line.top, .box svg line.bottom { stroke-dasharray: 330 240; } .box svg line.left, .box svg line.right { stroke-dasharray: 380 290; } .box:hover svg line.top { -webkit-transform: translateX(-570px); transform: translateX(-570px); } .box:hover svg line.bottom { -webkit-transform: translateX(570px); transform: translateX(570px); } .box:hover svg line.left { -webkit-transform: translateY(700px); transform: translateY(700px); } .box:hover svg line.right { -webkit-transform: translateY(-700px); transform: translateY(-700px); } /*---- Alternatives -----*/ /*---- Color ----*/ .demo-2 .box { box-shadow: inset 0 0 0 10px #2c3e50; } .demo-2 .box:hover h3, .demo-2 .box:hover span { color: #c13925; } .demo-2 .box svg line { stroke-width: 8; } .demo-2 .box:hover svg line { stroke: #e43d24; } .social_team{ width: 91%; position: absolute; clear: both; height: 0; left: 4.5%; bottom:10px; background-color: rgba(0,0,0, 0.7); display: inline-block; visibility: hidden; } .social_team ul{ margin: 0 auto !important; width: 123px; padding: 3px 0 !important; } .social_team li{ float: left; padding: 6px 5px; } .social_team li:first-child{ padding-left: 0; } .social_team li:last-child{ padding-right: 0; } .social_team li a{ color: #fff; } .social_team i { font-size: 18px; margin-right: 8px; } .social_team i.fa-facebook:hover { color: #3b5998; } .social_team i.fa-twitter:hover { color:#55acee; } .social_team i.fa-google-plus:hover { color:#dd4b39; } .social_team i.fa-youtube:hover { color: #c2191e; } .box:hover .social_team , .box:focus .social_team, .box:active .social_team { visibility: visible; height: 35px; position: absolute; bottom: 11px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /*================================================== * 5_N - Section Contactus * ===============================================*/ .contactus{ background:url('../img/map.jpg') no-repeat top center fixed; min-height:400px; background-size:cover; text-align: center; font-weight: 400; color: #fff; } .contactus h2{ color: #fff; margin-top: 0; } .contactus .t-left{ text-align: left; } .contactus .heading_title h2{ color: #fff; border-bottom: 1px solid #fff; } .bg__contact { padding: 80px 10px; min-height: 400px; background-color: rgba(0, 0, 0, 0.7); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset; background-image: url(../img/background_section.png); background-repeat: repeat; } .contactus textarea { height: 107px; } .price{ height: 300px; padding: 30px 10px; } .contactus .form-group .btn-primary { background-color: transparent !important; border-width: 3px; border-color: #ccc; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; color: #999; } .contactus .form-group .btn-primary:hover { background-color: transparent; border-color: #e43d24; color: #e43d24; } .contactus .btn i{ margin-right: 10px; } .contactus input[type="email"], .contactus input[type="text"], .contactus textarea{ background-color: rgba(255,255,255,0.7); border:none; border-radius: 2px; } .contactus input[type="email"]:focus, .contactus input[type="text"]:focus, .contactus textarea:focus{ background-color: rgba(255,255,255,0.9); } /* animated form */ .flp {} .flp div { position: relative; margin-bottom: 30px; } .flp input, .flp label { width: 400px; display: block; font: inherit; font-size: 16px; line-height: 24px; font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 14px; /*fixed height for FF line height issue. height = 24(lineheight) + 10*2(padding) + 2(border)*/ height: 46px; border: 1px solid #999; } .flp .form-group label { font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 18px; } .flp input { padding: 10px; width: 100%; outline: none; border-radius: 3px; } .flp textarea { padding: 10px; width: 100%; display: block; font: inherit; font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 14px; outline: none; border-radius: 3px; line-height: 24px; /*fixed height for FF line height issue. height = 24(lineheight*3) + 10*2(padding) + 2(border)*/ height: 94px; border: 1px solid #999; } .flp label { position: absolute; left: 0; top: 0; /*left/right padding will be 2px less, adjusted by padding on .ch*/ padding: 10px 8px; border-color: transparent; color: #666; cursor: text; } /*label styles*/ .ch { display: block; float: left; position: relative; /*for upward animation*/ color: #ddd; } .ch:first-child {padding-left: 2px;} .ch:last-child {padding-right: 2px;} /*active input label*/ .focussed { /*when any input is already focussed clicking on it(label) again won't do anything*/ pointer-events: none; } /* end animated form */ /*---- contact us 2 ----*/ .contactus2{ background:url('../img/map.jpg') no-repeat top center fixed; min-height:400px; background-size:cover; text-align: center; font-weight: 400; color: #fff; } .contactus2 h2{ color: #fff; margin-top: 0; } .contactus2 .t-left{ text-align: left; margin-bottom: 30px; } .contactus2 .heading_title h2{ color: #fff; border-bottom: 1px solid #fff; } .contactus2 .bg__contact { padding: 80px 10px; min-height: 400px; background-color: rgba(0, 0, 0, 0.9); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset; background-image: url(../img/background_section.png); background-repeat: repeat; } .contactus2 textarea { height: 107px; } .contactus2 .form-group .btn-primary { background-color: transparent !important; border-width: 3px; border-color: #ccc; transition: all 0.5s ease-in-out 0s; color: #999; } .contactus2 .form-group .btn-primary:hover { background-color: transparent; border-color: #e43d24; color: #e43d24; } .contactus2 .btn i{ margin-right: 10px; } .contactus2 input[type="email"], .contactus2 input[type="text"], .contactus2 textarea{ background-color: rgba(255,255,255,0.7); border:none; border-radius: 2px; } .contactus2 input[type="email"]:focus, .contactus2 input[type="text"]:focus, .contactus2 textarea:focus{ background-color: rgba(255,255,255,0.9); border: 1px solid #e43d24; box-shadow: none; } .t-left p span{ margin-right: 17px; width: 30%; } .t-left i{ font-size: 18px; margin-right: 15px; color: #fff; } .t-left p{ font-size: 16px; color: #ccccd5; margin-bottom: 20px; font-family: 'Raleway', sans-serif; font-weight: 500; text-align: justify; } /*================================================== * 5_O - Section client * ===============================================*/ .client { padding: 80px 0; } .client .row { margin: 0; } .client .bx-wrapper .bx-controls-direction a{ /*top:-30px;*/ } .client .bx-wrapper .bx-prev { margin-right: 10px; top:0; left: 0; } .client .bx-wrapper .bx-next { left:50px; margin-right: 0; top: 0; } /*---- Client slider ----*/ .client { position: relative; } .client .titleborderOut{ margin-bottom: 20px; } .client .bx-controls-direction{ position: absolute; z-index: 3; bottom: -15px; width: 90px; left: 50%; margin-left: -45px; } .client .bx-controls-direction a { display: inline-block; height: 30px; width: 40px; line-height: 30px; font-size: 15px; text-align: center; background-color: #fff; border: 1px solid #ccccd5; border-radius: 2px; text-decoration: none; color: #ccccd5; margin: 0 ; } .client .bx-controls-direction a:hover{ background-color: #fff; color: #222; } .client .bx-controls-direction a:before { font-size: 16px; font-family: "FontAwesome"; } .client .bx-controls-direction a.bx-prev:before{ content: "\f100"; } .client .bx-controls-direction a.bx-next:before { content: "\f101"; } .bx-wrapper .bx-pager.bx-default-pager a{ background-color: #e8e8e8; border: 1px solid #e1e1e1; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active{ background-color: #e43d24; border: 1px solid #e43d24; } .bx-wrapper .bx-pager.bx-default-pager a{ width: 40px; height: 8px; } .bx-wrapper .bx-pager{ font-size: 0.4em; } /*================================================== * 5_P - Section footer * ===============================================*/ .footer{ background-color: #2d343a; height: auto; min-height: 300px; border-bottom: 1px solid #1a1e22; padding: 50px 0 20px 0; position: relative; } /*---- ribbon css ----*/ .ribbon{ background-color: #e43d24; width: 9em; height: 3em; position: absolute; top: 0px; margin: auto; z-index: 99; } .ribbon a{ color: #fff; text-decoration: none; } .ribbon a:hover{ color: #2d343a; text-shadow:none; } .ribbon i{ width: 90%; height: 140%; display: block; margin: auto; z-index: 10000; position: relative; border-right: dashed 1px #2d343a; border-left: dashed 1px #2d343a; overflow: hidden; } .ribbon i span{ color: #FFF; display: block; text-align: center; top: 20%; position: relative; text-shadow: 0.0625em 0.0625em 0.0625em #333; font-style: normal; font-weight: 400; font-size: 16px; } .ribbon:before{ content: ""; position: absolute; bottom: -1.5em; left: 0; width: 0; height: 0; border-top: 3em solid #e43d24; border-right: 9em solid transparent; } .ribbon:after{ content: ""; position: absolute; bottom: -1.5em; right: 0; width: 0; height: 0; border-top: 3em solid #e43d24; border-left: 9em solid transparent; } /*---- contact section ----*/ .contact_info{ background-image: url("../img/map.png"); background-position: 50% 55px; padding: 20px 5px; background-repeat: no-repeat; height: auto; } .contact_info h4{ color: #fff; font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: 1px; padding: 15px 0 20px 0; } .contact_info ul li { clear: both; margin-bottom: 10px; line-height: 20px; height: 25px; } .contact_info ul li i{ float: left; color: #ccccd5; font-size: 15px; margin-right: 10px; } .contact_info ul li span{ width: 17%; color: #ccccd5; font-weight: 400; margin-right: 15px; float: left; font-size: 15px; } .contact_info ul li p { color: #ccccd5; float: left; font-size: 14px; } .font-400{ font-weight: 600; } .margin-bottom-10{ margin-bottom: 15px; } .contact_info ul li p a{ color:#e43d24; cursor: pointer; text-decoration: none; } .contact_info ul li p a:hover { color: #c13925; } /*---- Tweet ----*/ .tweet{ position: relative; padding: 20px 5px; height: auto; } .tweet h4{ color: #fff; font-size: 18px; letter-spacing: 2px; font-weight: 500; padding: 15px 0 20px 0; font-family: 'Raleway', sans-serif; } .tweet .shabe{ font-size: 100px; color: #fff; opacity: 0.1; position: absolute; left: 30%; top: 30%; } .tweet li{ border-bottom: 1px dashed #666; margin-bottom: 15px; padding-bottom: 15px; } .tweet li:last-child{ border-bottom: none; } .tweet li i{ color: #ccccd5; font-size: 20px; } .tweet a{ color:#e43d24; } .tweet span{ color:#ccccd5; line-height: 1.6em; } /*---- Newsletter ----*/ .newsletter{ position: relative; padding: 20px 5px; height: auto; } .newsletter h4{ color: #fff; font-size: 18px; font-weight: 500; letter-spacing: 2px; padding: 15px 0 20px 0; font-family: 'Raleway', sans-serif; } .newsletter span{ color:#ccccd5; line-height: 1.6em; margin-bottom: 10px; } .newsletter .form-group{ margin-top: 10px; border-radius: 0 !important; } .newsletter .form-group .input-group-addon { padding: 0 !important; border-radius: 1px; } .newsletter .radius_non{ border-radius: 0 !important; } .newsletter .form-group .btn-default{ border-width: 0; background-color: #e43d24; border-radius: 1px; transition: background-color 0.5s ease; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; } .newsletter .form-control{ background-color: #c5cdcd; } .form-control:focus{ border-color: #e43d24; box-shadow: none; outline: 0 none; background-color: #fff; transition: background-color 0.5s ease; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; } .newsletter .form-group .btn-default:hover{ background: none repeat scroll 0 0 #c13925; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .newsletter .form-group .btn-default i{ color: #fff; font-size: 17px;} /*---- copy right ----*/ .copy_right{ height: auto; font-family: 'Open Sans', sans-serif; position: relative; font-weight: 400; border-top: 1px solid #2e343a; padding: 15px 10px ; background-color: #1d2125; } .copy_right img{ margin-left: 20px; float: left; } .copy_right p a { color: #e43d24; margin-left: 5px; text-decoration: none; } .copy_right p a:hover { color: #c13925; } .copy_right p { color: #ccccd5; float: left; line-height: 50px; margin-left: 15px; } .copy_right .social_footer{ float: right; line-height: 50px; margin-right: 20px; } .social_footer li{ float: left; margin-left: 20px; font-size: 20px; color: #fff; } .social_footer li a{ color: #fff; } .social_footer .fa-facebook:hover{ color:#3B5998; } .social_footer .fa-twitter:hover{ color:#55ACEE; } .social_footer .fa-google-plus:hover{ color:#DD4B39; } /*================================================== * 5_Q - Section slide mobile * ===============================================*/ .mobile-with-features{ padding: 80px 0; } .habiba_tp1{ font-size: 18px; font-weight: 600; color: #333; } .tp-banner-inside{ width: 100%; position: relative; } .tp-caption.blackline_long { line-height:1px; background-color:transparent; text-decoration:none; border-width:1px 0px 0px 0px; border-color:#ccccd5; border-style:solid none none none; } .habiba_slider_bg{ background-color: rgba(0,0,0,0.8); padding: 30px 40px; color: #fff; text-align: left; border-radius: 2px; } .habiba_slider_bg:before{ content:""; position: absolute; right: 100%; top: 45%; width: 0; height: 0; border-top: 15px solid transparent; border-right: 20px solid rgba(0,0,0,0.8); border-bottom: 15px solid transparent; } .tp-caption.habiba_tp2{ font-size: 16px; font-weight: 400 !important; color: #fff; line-height: 1.8em; } .tp-caption.habiba_tp2 i{ margin-right: 10px; } .tp-caption.habiba_slider_bg span{ font-size: 22px; font-weight: 600; text-align: left; margin-bottom: 25px; } .tp-caption.habiba_tp2 p{ font-size: 16px; font-weight: 600; line-height: 1.8em; color: #FF7302; } .round_pulse{ width: 15px; height: 15px; border-radius: 50%; background-color: #e43d24; } .round_pulse1{ width: 25px; height: 25px; border-radius: 50%; background-color: #e43d24; } .tp-banner .btn{ color: #fff; padding: 10px 20px; } .tp-banner .btn:hover{ color: #fff; padding: 10px 20px; } /*================================================ * 5_S - Section FEATURES mobile * ===============================================*/ .features { padding-top: 70px; padding-bottom: 70px; background: #ffffff; } .features .features-left { text-align: right; margin-top: 26px; margin-bottom: 80px; } .fetaure-details h4{ font-weight: 500; font-size: 18px; font-family: 'Raleway', sans-serif; margin-bottom: 10px; } .features .features-left .icon-container { float: right; margin-left: 20px; } .features .features-right { text-align: left; margin-top: 26px; margin-bottom: 80px; } .features .features-right .icon-container { float: left; margin-right: 20px; } .features .feature { margin-bottom: 40px; } .features .feature .icon-container { display: block; min-height: 120px; margin-top: 5px; } .features .feature .icon-container .icon { width: 55px; height: 55px; border-radius: 50%; line-height: 55px; font-size: 20px; text-align: center; -webkit-transition: all ease-in 0.25s; transition: all ease-in 0.25s; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .features .feature:hover .icon-container .icon { background: #e43d24; color: #ffffff; border: 2px solid #ffffff; -webkit-box-shadow: 0px 0px 0px 2px #e43d24; box-shadow: 0px 0px 0px 2px #e43d24; } .features .feature .icon-container .icon { border: 1px solid #e43d24; color: #e43d24; } /* feature X */ .features .featurex { margin-bottom: 20px; } .features .featurex .icon-container { display: block; min-height: 80px; margin-top: 5px; } .features .featurex .icon-container .icon { width: 60px; height: 60px; border-radius: 50%; line-height: 55px; font-size: 22px; text-align: center; -webkit-transition: all ease-in 0.25s; transition: all ease-in 0.25s; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .features .featurex:hover .icon-container .icon { background: #e43d24; color: #ffffff; border: 2px solid #ffffff; -webkit-box-shadow: 0px 0px 0px 2px #e43d24; box-shadow: 0px 0px 0px 2px #e43d24; } .features .featurex .icon-container .icon { border: 1px solid #e43d24; color: #e43d24; } .features .featurex h3{ font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 18px; } .features .featurex h3 a{ font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 18px; text-decoration: none; color: #333; } .features .featurex:hover { cursor: pointer; } .features .featurex:hover h3 a{ color: #e43d24; } .features .phone-image { max-width: 250px; margin: auto; margin-bottom: 80px; } .features .phone-image img { width: 100%; } .bootstrap{ font-style: normal; font-weight: 600; } /*================================================ * 5_T - Section FEATURES Wih Images * ===============================================*/ .image_features{ text-align: center; } .image_features .img{ width: 140px; height: 140px; border-radius: 50%; overflow: hidden; margin: 0 auto; clear: both; margin-bottom: 25px; } .image_features h3{ font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 18px; margin-bottom: 15px; text-align: center; } .image_features p{ text-align: center; margin-bottom: 15px; } .feature_container{ /*margin-bottom: 30px;*/ display: block; } /******************************** * * * 06 - Pages * * * *********************************/ /*================================================== * 6_A - General pages Style * ===============================================*/ /*---- page-header-1 ----*/ .page-header-1{ min-height:100px; width: 100%; background-size:cover; font-weight: 400; text-align: left; position: relative; overflow: hidden; } .page-header-1 .head-bg{ background: none repeat scroll 0 0 #f5f5f5; min-height: 100px; padding: 15px; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .page-header-1 h1{ color: #333; z-index: 5; position: relative; padding: 20px 20px 5px 20px; font-weight: 600; text-shadow: none; text-align: left; } .page-header-1 i { z-index: 1 !important; left: 30%; position: absolute; text-shadow: none; top: 0; color: #999; font-size: 130px; opacity: 0.15; } .page-header-1 .breadcrumb { background-color: transparent; list-style: none outside none; margin-bottom: 0px !important; margin-left: 10px !important; z-index: 50; padding: 3px 15px !important; } .page-header-1 .breadcrumb li.active{ color: #333; } .page-header-1 .breadcrumb li a { color: #c13925; } .page-header-1 .breadcrumb > li + li:before { color: #333; } /*---- page-header-2 ----*/ .page-header-2{ min-height:100px; width: 100%; background-size:cover; font-weight: 400; text-align: left; position: relative; overflow: hidden; } .page-header-2 .head-bg{ background: none repeat scroll 0 0 #2d343a; min-height: 100px; border-bottom: 1px solid #333; padding: 15px; } .page-header-2 h1{ color: #fff; z-index: 5; text-shadow:none; position: relative; padding: 20px 20px 5px 20px; font-weight: 600; text-align: left; } .page-header-2 i { z-index: 1 !important; left: 30%; position: absolute; text-shadow: none; top: 0; color: #fff; font-size: 130px; opacity: 0.15; } .page-header-2 .breadcrumb { background-color: transparent; list-style: none outside none; margin-bottom: 0px; margin-left: 10px !important; z-index: 50; padding: 3px 15px !important; } .page-header-2 .breadcrumb li.active{ color: #fff; } .page-header-2 .breadcrumb li a { color: #ccccd5; } .page-header-2 .breadcrumb > li + li:before { color: #ccccd5; } /*---- page-header-3 2color ----*/ .page-header-3{ min-height:100px; width: 100%; background-size:cover; font-weight: 400; text-align: left; position: relative; overflow: hidden; } .page-header-3 .head-bg{ background: none repeat scroll 0 0 #2d343a; min-height: 100px; padding: 15px 15px 0 15px; border-bottom: 8px solid #ccc; } .page-header-3 h1{ color: #fff; position: relative; font-weight: 600; text-align: left; display: inline-block; padding: 15px 20px 0 25px; margin-bottom: -13px !important; text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7); } .border-blue{ width: 75%; float: left; height: 8px; z-index: 40 !important; margin-top: 35px; display: inline-block; border-right: 8px solid transparent; border-top: 8px solid #e43d24; height: 0; line-height: 8px; position: relative; } .border-white{ float: left; height: 8px; margin-top: 35px; z-index: 8 !important; width: 25%; margin-left: -8px; text-decoration: none; color: white; font-weight: bold; display: inline-block; border-right: 8px solid transparent; border-top: 8px solid #fff; height: 0; line-height: 8px; z-index: 5; } .page-header-3 i { z-index: 1 !important; left: 30%; position: absolute; text-shadow: none; top: 0; color: #fff; font-size: 130px; opacity: 0.15; } .page-header-3 .breadcrumb { background-color: transparent; list-style: none outside none; margin-bottom: 0px; margin-left: 10px; z-index: 50; padding: 3px 15px; } .page-header-3 .breadcrumb li.active{ color: #fff; } .page-header-3 .breadcrumb li a { color: #ccccd5; } .page-header-3 .breadcrumb > li + li:before { color: #ccccd5; } /*================================================== * 6_B - Contact Page * ===============================================*/ .contact { padding: 20px 0 40px 0; } .contact-form{ padding: 0 40px; font-weight: 400; } .contact-form .form-group{ color: #999; } .contact_text { padding:30px 40px; } .contact_text p { border-left: 5px solid #e43d24; padding-left: 20px; } .contact-form .form-control { background-color: #fff; background-image: none; border-radius: 2px; box-shadow: none; color: #999; display: block; font-size: 14px; line-height: 1.42857; padding: 6px 12px; transition: all 0.5s ease-in-out 0s; width: 100%; } .contact-form .form-control input:focus { border: 1px solid #e43d24; } .contact-form .btn-default { background-color: #fff; border-width: 2px; border-color: #999; transition: all 0.5s ease-in-out 0s; color: #999; } .contact-form .btn-default:hover { background-color: #fff; border-color: #e43d24; color: #e43d24; } .contact-form .btn-lg, .btn-group-lg > .btn { border-radius: 2px; font-size: 18px; line-height: 1.33; padding: 10px 25px; } .contact-form .btn i{ margin-right: 10px; } .contactus_info{ height: auto; margin-bottom: 50px; clear: both; } .contactus_info h3 { font-weight: 400; color:#e43d24; font-size: 25px; margin-bottom: 15px; margin-top: 30px ; } .contactus_info h3 span{ font-weight: 400; font-weight: bold; } .contactus_info li { clear: both; line-height: 30px; margin-bottom: 20px; height: 20px; display: block; font-size: 15px; } .contactus_info li i{ float: left; line-height: 1.6em; font-size: 15px; margin-right: 10px; color:#e43d24; } .contactus_info li strong{ float: left; line-height: 1.6em; font-size: 14px; margin-right: 10px; } .contactus_info li p { float: left; } .contactus_info li a{ color:#e43d24; } .contact_map{ height: 300px; clear: both; } /*================================================== * 6_C - Contact Page 2 * ===============================================*/ .contact2 { padding: 0 0 40px 0; } .contact2 .row{ margin-right: 0; margin-left: 0; } .contact2 .col-md-12{ padding-left: 0; padding-right: 0; } .contactus_info2{ height: 160px; display: inline-block; margin-bottom: 20px; clear: both; } .contactus_info2 h3 { font-weight: 400; color:#e43d24; font-size: 25px; padding-top: 10px; margin-bottom: 15px; margin-top: 30px; } .contactus_info2 h3 span{ font-weight: 400; font-weight: bold; } .contactus_info2 li { clear: both; line-height: 1.6em; margin-bottom: 20px; height: 20px; display:inline-block; font-size: 15px; } .contactus_info2 li i{ float: left; line-height: 1.6em; font-size: 15px; margin-right: 10px; color:#e43d24; } .contactus_info2 li strong{ float: left;line-height: 1.6em; margin-right: 10px; } .contactus_info2 li p { float: left; } .contactus_info2 li a{ color:#e43d24; } /*================================================== * 6_D - blog Page * ===============================================*/ .blog .blogs_box img { width: 100% !important; height: 228px; } .blog { min-height:300px; padding: 40px 10px; } .blogs_box { border-bottom:3px solid #e43d24; position: relative; width: 95%; margin-top: 0; margin-bottom: 40px; } .blog_txt { padding: 17px; position: relative; display: inline-block; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; clear: both; } .blog_txt h2{ text-align: left; letter-spacing: 1px; color: #e43d24; font-size: 16px; font-weight: 600; margin-bottom: 12px; font-family: 'Raleway', sans-serif; } .blog_txt p{ float: left; color: #737a81; } .blog_txt a{ color: #5c5c5c; text-decoration: none; } .blog_txt h2 a{ color: #21252b; } .blog_txt h2 a:hover{ color: #e43d24; } .blog_txt a:hover{ color: #e43d24; text-decoration: none; } .blog_txt .read { margin-left: 10px; } .blog_box:hover .blog_txt{ background-color: #e43d24; color: #fff; cursor: pointer; } .blog_info{ clear: both; margin: 12px 0 0 0; text-align: center; width: 100%; display: inline-block; } .blog_info i{ color: #b5b8bf; margin-right: 2px; } .blog_info a{ color: #b5b8bf; } .author, .comments_no { padding: 0 10px; } .date { padding: 0 15px; } .blog .pagination { clear: both; margin: 0 auto !important; width: 300px; display: block; border-radius: 2px; } .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{ background-color: #e43d24; border-color: #e43d24; } .pagination>li:last-child>a, .pagination>li:last-child>span { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .pagination>li:first-child>a, .pagination>li:first-child>span { margin-left: 0; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .blog_category { padding: 20px; border:1px solid #f1f1f1; border-radius: 2px; } .blog_category h3{ font-weight: 600; padding: 0 10px 15px 10px; color: #e43d24; font-size: 18px; } .blog_category a{ color: #5c5c5c; text-decoration: none; } .blog_category a:hover{ color: #e43d24; } .blog_category li{ padding: 10px; border-bottom: 1px solid #f1f1f1; } .blog_category li:hover .badge{ background-color: #e43d24; } .blog_category li:hover a{ color: #e43d24; } .blog_category li:last-child{ border-bottom: none; } .blog_category li .badge{ float:right; border-radius: 4px; } /*---- blog tabs ----*/ .tabsy { border-radius: 2px; border:1px solid #f1f1f1; margin: 20px 0; } .tabsy ul.tabbed{ clear: both; } .tabsy .tabbed li { display: inline-block; float: left; padding: 10px 20px; background-color: #fff; cursor: pointer; text-align: center; border-top: 3px solid #e43d24; } .tabsy li.inactive{ background-color: #f8f8f8; border-top: none; border-right: 1px solid#fff; border-left: 1px solid#fff; } .tabsy div { background-color: #fff; padding: 10px; min-height: 100px; clear: both; } .tabsy div:not(:first-of-type){ display: none; } .tabsy .tags a{ border-radius: 2px; padding: 3px 10px; margin: 0 5px 5px 0; display: inline-block; color: #909090; text-decoration: none; background-color: #f9f9f9; } .tabsy .tags a:hover{ color: #fff; background-color: #e43d24; } /*---- blogs tab ----*/ .blogs li:last-child{ border-bottom: none; } .blogs_feed { border-bottom: 1px solid #f8f8f8; display: block; height: 100px; padding: 15px 5px; } .blogs_feed .image img { width: 65px; height: 65px; padding: 3px; border-radius: 2px; border:1px solid #f8f8f8; display: inline-block; float: left; opacity: 0.8; margin:5px 10px 5px 5px; } .blogs_feed .image:hover img{ opacity: 1; } .blogs_feed a.title { padding: 5px 0 5px 0; margin-left: 20px; display: block; } .blogs_feed a.title { color: #5c5c5c; text-decoration: none; } .blogs_feed a.title:hover{ color: #e43d24; } .blogs_feed .date{ color: #acacac; display: block; } /*---- adv ----*/ .adv { padding: 10px 40px; } .adv h3, .adv2 h3{ font-weight: 400; font-size: 25px; text-align: center; margin-bottom: 15px; } .adv img{ margin: 10px; } .adv .ads{ width: 265px; margin: 0 auto; } /*================================================== * 6_E - 404 Page * ===============================================*/ .main{ min-height: 300px; padding: 50px; color: #333; } .center{ width: 150px; margin: 0 auto; } .head-404 { font-weight: 600; font-size: 50px; font-weight: bold; color: #333; } /*---- 404 Shape ----*/ .shape { position: relative; width: 290px; margin: 0 auto; cursor: pointer; transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; } .error-404 { width: 0; height: 0; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 300px solid #e43d24; border-radius:5px; } .error-404-2 { width: 0; height: 0; border-left: 120px solid transparent; border-right: 120px solid transparent; border-bottom: 240px solid #fff; position: absolute; top: 45px; left: 30px; } .error-404-3 { width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 160px solid #e43d24; position: absolute; top: 100px; left: 70px; } .shape p{ font-size: 100px; position: absolute; top: 130px; left: 136px; color: #fff; font-weight: bold; } .shape:hover .error-404 { border-bottom-color: #c13925; transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; } .shape:hover .error-404-2 { border-bottom-color: #fff; transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; } .shape:hover .error-404-3 { border-bottom-color: #c13925; transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; } .shape:hover p{ color: #fff; transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; } /* End shape */ .error-menu{ margin: 15px auto; clear: both; width: 480px; display: block; height: 70px; } .error-menu ul{ display: block; } .error-menu ul li{ float: left; border-right: 1px solid #ccc; padding: 5px 15px; position: relative; } .error-menu ul li:last-child{ border-right: none; } .error-menu ul li:hover .error-menu-icon { display: inline-block; } .error-menu ul li:hover a{ color: #e43d24; transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; } .error-menu ul li a{ color: #333; } .error-menu ul li a:hover { color: #e43d24; } .main .bg-danger { display: block; clear: both; padding: 15px 25px; margin-top: 20px; font-weight: 400; font-size: 15px; line-height: 1.6em; } .warrm { font-size:20px; } /*================================================== * 6_F - Single blog post Page * ===============================================*/ .single-blog { padding: 40px 10px; font-weight: 400; } .single-blog h1{ color: #333; font-weight: 600; font-size: 28px; } .single-blog p{ line-height: 1.7; font-size: 15px; } .single .blog-img img { width: 100%; max-width: 100%; padding: 5px; border-radius: 2px; border:1px solid #f1f1f1; } .single .content{ line-height: 25px; font-size: 16px; } .single h1{ text-align: left; padding: 20px 0 20px 0; border-bottom: 1px solid #dcdcdc; } .single .tags{ padding: 0 0 10px 0 ; border-bottom: 1px solid #dcdcdc; margin: 15px 0 20px 0; } .single .tags i{ margin-right: 7px; color: #b5b8bf; } .single .tags a{ color: #b5b8bf; } .single .tags a:hover { color:#e43d24; } .single .tags span{ color: #b5b8bf; } .txt-img{ float: left; width: 25%; margin: 0 15px 0 0; } .txt-img img:hover{ opacity: 0.6; transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; } .txt-img img{ width: 100%; float: left; padding: 5px; border:1px solid #f1f1f1; } .img-txt { margin-bottom: 14px; } .single hr{ margin: 20px 0 ; display: block; clear: both; } .txt-bg-yellow{ background: none repeat scroll 0 0 #fffcad; color: #613a28; } .txt-bold{ font-weight: 600; color: #333; } /*---- Autor ----*/ .autor-bio .name{ font-weight: 600; font-size: 16px; margin-bottom: 10px; } .autor-bio { position: relative; border-radius: 2px; border:2px solid #f1f1f1; border-top: 3px solid #e43d24; padding: 30px 20px; margin: 20px 0; } .autor-bio img.author-img{ width: 100px; height: 100px; border-radius: 50px; padding: 5px; border:1px solid #fff; overflow: hidden; float: left; margin-right: 15px; } .author-social { position: absolute; left: 40px; bottom: 15px; } .author-social i{ margin-right: 7px; font-size: 20px; color: #333; transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; } .author-social i.fa-facebook:hover{ color: #3b5998; } .author-social i.fa-twitter:hover{ color: #55acee; } .author-social i.fa-google-plus:hover{ color: #dd4b39; } /*---- Comment ----*/ .comments h2 { font-size: 25px; line-height: 40px; color: #e43d24; } .comments .date-time{ font-style: italic; color: #aaa; float:right; } .comments .comment-level-1{ border-radius: 3px; position: relative; border:1px solid #e8e8e8; margin: 20px 0 20px 0; padding: 30px; } .comments .comment-level-1 img{ width: 70px; margin-right: 20px; padding: 3px; border:1px solid #e8e8e8; height: 70px; border-radius: 35px; overflow: hidden; float: left; } .comments .comment-level-2{ border-radius: 3px; position: relative; border:1px solid #e8e8e8; margin: 20px 0 20px 80px; padding: 30px; } .comments .comment-level-2 img{ width: 70px; margin-right: 20px; padding: 3px; border:1px solid #e8e8e8; height: 70px; border-radius: 35px; overflow: hidden; float: left; } .comments a.replay{ position: absolute; right: 20px; top:15px; } .comments h3 { font-weight: 600; font-size: 16px; } /*---- Leave a comment ----*/ .add_comment{ margin-top:40px;} .comments .add_comment h2{ border-bottom: 1px solid #e8e8e8; margin-bottom: 30px; } .comments .form-control{ border-radius: 2px; } .comments textarea { height: 83px; margin-bottom: 15px; } .comments .btn{ border-radius: 2px; } .comments .form-control:focus { box-shadow: none; } /*================================================== * 6_G - Login / Register Pages * ===============================================*/ .login-form input[type="checkbox"]{width: auto;} /*---- Login Social btn ----*/ .btn-social{ position:relative; padding-left:44px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .btn-social :first-child{ position:absolute; left:0; top:0; bottom:0; width:32px; line-height:34px; font-size:1.6em; text-align:center; border-right:1px solid rgba(0,0,0,0.2); } .btn-facebook{ color:#fff; background-color:#3b5998; border-color:rgba(0,0,0,0.2); } .btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .open>.dropdown-toggle.btn-facebook{ color:#fff; background-color:#2d4373; border-color:rgba(0,0,0,0.2); } .btn-google-plus{ color:#fff; background-color:#dd4b39; border-color:rgba(0,0,0,0.2); } .btn-google-plus:hover, .btn-google-plus:focus, .btn-google-plus:active, .btn-google-plus.active, .open>.dropdown-toggle.btn-google-plus{ color:#fff; background-color:#c23321; border-color:rgba(0,0,0,0.2); } .btn-twitter{ color:#fff; background-color:#55acee; border-color:rgba(0,0,0,0.2); } .btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-twitter.active, .open>.dropdown-toggle.btn-twitter{ color:#fff; background-color:#2795e9; border-color:rgba(0,0,0,0.2); } /*=============================== * 6_H - Login Only Page * ==============================*/ .login { padding: 70px 20px; } .login-form{ border: 1px solid #e8e8e8; border-radius: 2px; border-bottom: 3px solid #e43d24; padding: 40px 40px 20px 40px; } .form-group label { font-weight: 400; font-size: 20px; color: #555; } .login-form .form-control { border-radius: 2px; } .login-form .form-control:focus { box-shadow: none; } .login-form .btn{ border-radius: 2px; } .social-login { height: auto; border-top:1px solid #e8e8e8; margin-top: 20px; padding: 15px 0; } .social-login .btn-facebook { float: right; } .social-login .btn{ margin: 5px 0; } .social-login h2,.login-form h2{ font-size: 22px; color: #e43d24; margin-bottom: 15px; } .login-form h2{ font-size: 25px; } .login-form .btn-default { background-color: #fff; clear: both; display: block; border-width: 2px; width: 50%; border-color: #999; transition: all 0.5s ease-in-out 0s; color: #999; } .login-form .btn-default:hover { background-color: #fff; border-color: #e43d24; color: #e43d24; } .login-form .btn-lg, .btn-group-lg > .btn { border-radius: 2px; font-size: 18px; line-height: 1.33; padding: 10px 25px; } .login-form .btn i{ margin-right: 10px; } .login-form .forget{ float: right; } .equal{ height: 484px; } /*======================================= * 6_I - Service-1 & Service-2 Page * ======================================*/ .space { margin: 0 15px; } .more2 { margin: 20px auto; width: 220px; } .more2 .btn-default { background-color: transparent; border-width: 2px; border-color: #999; transition: all 0.5s ease-in-out 0s; color: #999; } .more2 .btn-default:hover { background-color: transparent; border-color: #fff; color: #fff; } .more2 .btn-lg, .btn-group-lg > .btn { border-radius: 2px; font-size: 18px; line-height: 1.33; padding: 10px 25px; } .more2 .btn i{ margin-right: 10px; } .service { text-align: center; font-size: 25px; margin-bottom: 40px; padding: 0 10px 10px 10px; line-height: 35px; font-family: 'Raleway', sans-serif; font-weight: 500; } .services2 .my-icon { cursor: pointer; padding-top: 5px; width: 60px; height: 60px; display: block; margin-right: 10px; border-radius: 50%; text-align: center; position: relative; z-index: 1; color: #fff; position: absolute; top: 5px; left: 43%; clear: both; } .services2 .features h3{ font-weight: 400; font-size: 20px; margin-top: 90px; margin-bottom: 10px; } .services2 .features .fet{ text-align: center; height: auto; } /*=============================== * 6_J - clients 1 Page * ==============================*/ .clients { padding: 50px 0; } .client-box { height: 150px; margin-bottom: 30px; overflow: hidden; padding: 25px; border:1px solid #e8e8e8; background-color: #fff; } .client-box img { width: 100% !important; } .clients .client-box:hover { background-color: rgba(0,0,0,0.1); } .clients2 { padding: 30px; background-color: #e8e8e8; } .clients2 .client-box { background-color: #fff; border:1px solid #e1e1e1; } .clients2 .client-box:hover { background-color: rgba(255,255,255,0.5); } /*=============================== * 6_K - faq 1 Page * ==============================*/ .faq1{ padding: 50px 20px; } .accordion { margin-bottom: 30px; font-weight: 300; } .accordion .section-content { margin-bottom: 10px; background-color: #FFF; border: 1px solid #d6d9df; padding: 0; } .accordion .accordion-title { font-size: 15px; font-weight: 600; color: #7d7d7d; padding:15px 30px 15px 15px; margin-bottom: 0; position: relative; cursor: pointer; } .accordion .accordion-title:hover{ background-color: #e43d24; color: #fff; } .accordion .accordion-title:hover a{ color: #fff; } .accordion .accordion-title a{ color: #7d7d7d; text-decoration: none; } .accordion .accordion-title a i { float: left; margin: 0 10px 0 0; background-color:transparent; position: absolute; right: 10px; top: 30%; height: 20px; width: 20px; line-height: 20px; font-size: 12px; text-align: center; } .accordion .accordion-title.active:hover a { color: #fff; } .accordion .accordion-title.active a{ color: #e43d24; } .accordion .accordion-title.active a i{ background-color: #e43d24; color: #fff; transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; } .accordion .accordion-inner { border-top: 1px solid #d6d9df; color: #666e70; padding: 20px; line-height: 1.6em; margin-top: 0; font-size: 14px; font-weight: 400; display: none; } .accordion .accordion-inner.active { display: block; } /*---- Toggle accordion ----*/ .accordion.accordion-2 .accordion-title { font-size: 15px; padding: 18px 20px; } .accordion.accordion-2 .accordion-title a i { margin-right: 0; } /*=============================== * 6_L - team Page * ==============================*/ .our_team2{ font-weight: 400; } .our_team2 h2,.our_team3 h2{ font-size: 40px; color: #fff; text-align: center; margin-bottom: 15px; } .our_team2 .bg__team { padding: 70px 10px; background-color: rgba(0,0,0,0.05); } .box2 { width: 100%; height: 390px; position: relative; overflow: hidden; background: rgba(255,255,255,1); display: inline-block; margin: 20px auto; cursor: pointer; color: #2c3e50; -webkit-transition: background 0.4s 0.5s; transition: background 0.4s 0.5s; } .box2:hover { background: rgba(255,255,255,1); -webkit-transition-delay: 0s; transition-delay: 0s; } .box2 h3 { font-size: 20px; line-height: 20px; margin: 10px 0 7px 0; text-align: center; font-weight: 600; width: 100%; } .box2 img { width: 100%; max-height: 263px; margin-bottom: 5px; } .box2 span { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; line-height: 1.6em; text-align: center; font-family: 'Raleway', sans-serif; color: #e43d24; } .box2 h3, .box2 span { -webkit-transition: color 0.4s 0.5s; transition: color 0.4s 0.5s; } .social_team2{ width: 100%; position: absolute; clear: both; height: 35px; bottom:15px; display: inline-block; } .social_team2 ul{ margin: 0 auto !important; width: 123px; padding: 3px 0 !important; } .social_team2 li{ float: left; width: 35px; height: 35px; border-radius: 50%; line-height: 35px; text-align: center; background-color: rgba(0,0,0,0.05); margin-right: 8px; } .social_team2 li i{ color: #666; } .social_team2 li:first-child{ padding-left: 0; } .social_team2 li:last-child{ padding-right: 0; margin-right: 0px; } .social_team2 li a{ color: #fff; } .social_team2 i { font-size: 17px; line-height: 35px; } .social_team2 li:hover i.fa-facebook { color: #3b5998; } .social_team2 li:hover i.fa-twitter { color:#55acee; } .social_team2 li:hover i.fa-google-plus { color:#dd4b39; } .social_team2 i.fa-youtube:hover { color: #c2191e; } /*---- detailed layout ----*/ .box3 { width: 100%; position: relative; overflow: hidden; display: inline-block; cursor: pointer; color: #2c3e50; -webkit-transition: background 0.4s 0.5s; transition: background 0.4s 0.5s; } .box3 img { width: 100%; max-height: 100%; margin-bottom: 5px; } .team-details h3, .our_team2 h3{ font-weight: 600; color: #444; font-size: 19px; margin-bottom: 10px; } .team-details span{ font-weight: 700; color: #e43d24; font-size: 14px; font-family: 'Raleway', sans-serif; margin-bottom: 20px; display: block; } .social_team3{ width: 100%; margin-top: 20px; clear: both; height: 35px; bottom:15px; display: inline-block; } .social_team3 ul{ padding: 3px 0 !important; } .social_team3 li{ float: left; width: 35px; height: 35px; border-radius: 50%; line-height: 35px; text-align: center; background-color: #fff; margin-right: 10px; border:1px solid #666; } .social_team3 li i{ color: #666; } .social_team3 li:first-child{ padding-left: 0; } .social_team3 li:last-child{ padding-right: 0; margin-right: 0px; } .social_team3 li a{ color: #fff; } .social_team3 i { font-size: 17px; line-height: 35px; } .social_team3 li:hover i.fa-facebook { color: #3b5998; } .social_team3 li:hover i.fa-twitter { color:#55acee; } .social_team3 li:hover i.fa-google-plus { color:#dd4b39; } .social_team3 i.fa-youtube:hover { color: #c2191e; } /*---- team 3 ----*/ .our_team3{ background:#ccccd5; background-size:cover; font-weight: 400; color: #fff; } .our_team3 .bg__team { padding: 70px 10px; background-color: transparent; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset; } /*=============================== * 6_M - portfolio Page * ==============================*/ /*---- Portfolio filter ----*/ .protfolio-filter { text-align: center; margin-bottom: 15px; } .protfolio-filter li { display: inline-block; } .protfolio-filter li.current a{ background-color: #e43d24; } .protfolio-filter li a { display: inline-block; margin: 0 20px 30px 0; background-color: #666; border: 1px solid #e9e8e8; color: #fff; text-decoration: none; padding: 7px 15px; border-radius: 2px; font-size: 13px; transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; } .protfolio-filter li a:hover { display: inline-block; margin: 0 20px 30px 0; background-color: #e43d24; } .protfolio-filter li:last-child a { margin-right: 0; } .our_works .row{ margin-right: 0; margin-left: 0; } .single-project { padding: 50px 0; font-weight: 400; } .single-project img{ width: 100%; height: 400px; padding: 5px; border:1px solid #e8e8e8; border-radius: 2px; } .single-project h2 { font-size: 25px; margin-bottom: 20px; } .single-project p{ margin-bottom: 20px; } .single-project .btn-default { background-color: #fff; border-width: 2px; border-color: #999; transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; color: #999; } .single-project .btn-default:hover { background-color: #fff; border-color: #e43d24; color: #e43d24; } .single-project .btn-lg, .btn-group-lg > .btn { border-radius: 2px; font-size: 18px; line-height: 1.33; padding: 10px 15px; } .single-project .btn i{ margin-right: 10px; } .project-date, .project-author, .project-category{ border-bottom: 1px solid #f8f8f8; min-height: 30px; padding: 10px 0; width: 100%; } .project-date strong, .project-author strong, .project-category strong{ width: 40%; display: inline-block; } .project_share li strong{ width: 100%; display: inline-block; float: left; } .project-category .tags{ display: inline-block; } .project-category .tags a{ border-radius: 2px; padding: 3px 10px; margin: 0 5px 5px 0; display: inline-block; color: #909090; text-decoration: none; background-color: #f9f9f9; } .project-category .tags a:hover{ color: #fff; background-color: #e43d24; } .project_share{ border-bottom: 1px solid #f8f8f8; min-height: 30px; padding: 10px 0; width: 100%; margin-bottom: 20px; display: inline-block; } .project_share li:first-child{ float: left; width: 40%; height: 25px; } .project_share li{ float: left; width: 30px; height: 25px; } .project_share li a{ text-decoration: none; color: #666; } .project_share li a i{ font-size: 18px; line-height: 25px; } .project_share li a.fb:hover { color: #3B5998; background-color: transparent; } .project_share li a.twi:hover { color: #55ACEE; background-color: transparent; } .project_share li a.goo:hover { color: #DD4B39; background-color: transparent; } /*=============================== * 6_N - about us Page * ==============================*/ .aboutus{ padding: 50px 0; font-weight: 400; } .aboutus img { width: 100%; padding: 5px; border:1px solid #f8f8f8; } p.itali{ font-style: italic; font-size:20px; font-weight: 400; margin-bottom: 15px; } .about-txt { font-size: 18px; line-height: 25px; text-align: justify; } /*=============================== * 6_O - coming soon Page * ==============================*/ .logo-soon { width: 200px; height: 100px; margin: 0 auto; display: block; background-color: transparent; } .soon{ background:url('../img/hd/1.jpg') no-repeat top center fixed; background-size:cover; text-align: center; height: auto; font-weight: 400; color: #fff; position: relative; } .soon .bg__soon { height: auto; padding: 60px 10px; background-color: rgba(0, 0, 0, 0.7); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset; background-image: url(../img/background_section.png); background-repeat: repeat; } #clock span { color: #fff; font-size: 50px; font-weight: 600; } .wrap-clock { background-color: rgba(0, 0, 0, 0.3); width: 150px; height: 150px; border-radius: 75px; float: left; } .wrap-clock span { line-height: 150px; text-align: center; margin: 0 auto; clear: both; display: block; } .soon h2{ font-size: 50px; font-weight: 600; margin-bottom: 30px; } .soon .lead{ margin-bottom: 50px; color: #fff; } .soon strong { font-size: 30px; } .soon .form-group{ width: 25%; margin:20px auto; } .soon .newsletter{ margin-top: 60px; height: 200px; clear: both; padding: 40px; } .soon .newsletter h4 { font-weight: 600; } .soon .newsletter .lead{ margin-bottom: 20px; } /*=============================== * 6_P - shop Page * ==============================*/ .shop-full-width{ padding: 60px 20px; position: relative; } .shop-full-width::after { content: ""; background: url('../img/pattern/bb.png')repeat top center fixed; opacity: 0.2; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } .products li{ margin-bottom: 50px; } .products .item { border:1px solid #f1f1f1; border-radius: 3px; position: relative; border-radius: 2px; } .products .item img{ width: 100%; height: 210px; border-bottom: 1px solid rgba(0, 0, 0, 0.055); } .products .item a { text-decoration: none; color: #333; } .products .item .details { position: absolute; width: 100%; height: 100%; background-color: #333; visibility: hidden; font-size: 40px; } .products .item:hover .details { opacity: 0.7; visibility: visible; text-align: center; font-size: 60px; transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; } .products .item:hover .details i{ color: #fff; text-align: center; position: absolute; top: 30%; left: 40%; opacity: 1; } .products .item a:hover h3{ color:#e43d24; } .products .item a:hover .item-img img:before{ opacity: 0.8; } .products .item h3{ font-size: 18px; font-weight: 600; padding: 15px 15px 5px 15px; background-color: #fff; } .products .item .item-img { position: relative; } /*--- Price ---*/ .products .item .price-sale:after{ border-color: #d15102 transparent transparent; border-style: solid; border-width: 0.618em 0 0 0.618em; bottom: -0.58em; content: ""; display: block; left: 0; position: absolute; } .products .item .price-sale{ background: none repeat scroll 0 0 padding-box #f37324; border-bottom-right-radius: 0.382em; border-top-left-radius: 0.382em; border-top-right-radius: 0.382em; bottom: 1.618em; color: #fff; height: 30px; display: block; font-weight: 700; left: -0.58em; padding: 0.327em 0.857em; position: absolute; } .products .item .price-sale span { text-decoration: line-through; color: #f8f8f8; } /*--- Price Sale ---*/ .products .item .price:after{ border-color: #c13925 transparent transparent; border-style: solid; border-width: 0.618em 0 0 0.618em; bottom: -0.58em; content: ""; display: block; left: 0; position: absolute; } .products .item .price{ background: none repeat scroll 0 0 padding-box #e43d24; border-bottom-right-radius: 0.382em; border-top-left-radius: 0.382em; border-top-right-radius: 0.382em; bottom: 1.618em; color: #fff; height: 30px; display: block; font-weight: 700; left: -0.58em; padding: 0.327em 0.857em; position: absolute; } .item .rating{ color: #f37324; width: 40%; float: right; text-align: center; } .item .sign{ width: 50% !important; } .item .rating p{ color: #555; } .item .action { background-color: #f8f8f8; padding: 15px; } .item .action button { border-radius: 2px; } .item .action button i { margin-left: 5px; } .item .rating .non { color: #ccc; } .item .category { padding: 0 15px 15px 15px; border-bottom: 2px solid rgba(0, 0, 0, 0.075); background-color: #fff; } .item .category a{ color:#586467; } .item .category a:hover{ text-decoration: underline; color:#e43d24; } .sale { background-color:#f37324; color: #fff; width: 50px; height: 50px; border-radius: 25px; position: absolute; top: -20px; text-transform: uppercase; text-align: center; line-height: 50px; left: -20px; z-index: 500; } .shop-full-width .adv { padding: 12px 6px; } .shop-full-width .adv img { margin: 5px; } /*================================================== * 6_Q - product page * ===============================================*/ .product-single > li{ margin-bottom: 40px; } .product-single .item-single { position: relative; border-radius: 2px; } .description { padding: 15px; margin-bottom: 15px; } .product-single .item-single h3{ font-size: 18px; font-weight: 600; padding: 15px; background-color: #fff; } .product-single .item-single .item-img { position: relative; } /*--- Price ---*/ .product-single .item-single .price-sale span { text-decoration: line-through; color: #f8f8f8; } .product-single .item-single .price{ font-size: 20px; color: #333; height: 30px; font-weight: 700; padding: 0.327em 0.857em; } .product-single .item-single .rating{ color: #f37324; display: block; width: 100%; padding: 5px 15px 10px 20px; line-height: 15px; clear: both; height: 30px; text-align: center; } .product-single .item-single .rating p{ color: #555; float: left; margin-right: 15px; } .product-single .item-single .rating i{ float: left; margin-top: 5px; } .product-single .item-single .rating .non { color: #ccc; } p.description { line-height: 25px; font-size: 15px; color: #586467; } .item-single .action { background-color: #f8f8f8; padding: 15px; } .item-single .action button { border-radius: 2px; margin-left: 20%; } .item-single .action button i { margin-left: 5px; } .price-before { text-decoration: line-through; color: #999; } .item-single .category { color: #b5b8bf; padding: 0 15px 15px 15px; border-bottom: 2px solid rgba(0, 0, 0, 0.075); background-color: #fff; } .product-single .item-single .category i{ margin-right: 10px; } .product-single .item-single .category a{ color:#b5b8bf; } .product-single .item-single .category a:hover{ text-decoration: underline; color:#e43d24; } .shop-full-width .adv2 { padding: 20px 40px; } .shop-full-width .adv2 img { margin: 10px; } .adv2 .ads{ width: 265px; margin: 0 auto; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{ border-color: #f1f1f1; } /*---- shop img tabs ----*/ .tabsy-img { width: 100%; } #big-img { clear: both; } #big-img img{ width: 100%; border:1px solid #f1f1f1; padding: 5px; } .tabsy-img { width: 100%; clear: both; min-height:150px; height: auto; } .tabsy-img li{ float: left; cursor: pointer; z-index: 10000; margin-right: 5px; margin-top: 15px; width: 30% !important; } .tabsy-img li img { width: 100%; float: left !important; border-radius: 2px; border:1px solid #f1f1f1; } .tabsy-img li:last-child img { margin-right: 0; } .tabsy-img img.inactive{ background-color: #f8f8f8; border-top: none; border-right: 1px solid#fff; border-left: 1px solid#fff; } .tabsy-img div { background-color: #fff; padding: 10px; min-height: 100px; clear: both; } .tabsy-img .inactive { opacity: 0.6; } #big-img img:not(:first-of-type){ display: none; } /*---- Product tabs ----*/ .product-tabs { border-radius: 2px; margin: 20px 0; min-height: 170px; } .product-tabs ul.tabbed{ clear: both; } .product-tabs .tabbed li { display: inline-block; float: left; margin-bottom: -1px; padding: 10px 20px; background-color: #fff; cursor: pointer; text-align: center; border-top: 3px solid #e43d24; border-right: 1px solid #f1f1f1; border-left: 1px solid #f1f1f1; } .product-tabs .tabbed li:hover{ color: #fff; background-color: #e43d24; } .product-tabs .tabbed li.inactive:hover{ color: #fff; background-color: #e43d24; } .product-tabs li.inactive{ background-color: #f8f8f8; border-top: 3px solid #f8f8f8; border-right: 1px solid #f8f8f8; border-left: 1px solid #f8f8f8; } .product-tabs div { background-color: #fff; padding: 25px; min-height: 100px; line-height: 1.6em; border:1px solid #f1f1f1; clear: both; } .product-tabs .tabbed li:hover{ color: #fff; background-color: #e43d24; border-top: 3px solid #e43d24; border-right: 1px solid #e43d24; border-left: 1px solid #e43d24; } .product-tabs .tabbed li.inactive:hover{ color: #fff; background-color: #e43d24; border-top: 3px solid #e43d24; border-right: 1px solid #e43d24; border-left: 1px solid #e43d24; } .product-tabs div:not(:first-of-type){ display: none; } .product-tabs .tags a{ border-radius: 2px; padding: 3px 10px; margin: 0 5px 5px 0; display: inline-block; color: #909090; text-decoration: none; background-color: #f9f9f9; } .product-tabs .tags a:hover{ color: #fff; background-color: #e43d24; } .related-product h2{ font-size: 20px; margin-bottom: 30px; padding: 10px 20px; } .related-product h2{ font-size: 20px; margin-bottom: 30px; padding: 10px 20px; } /*================================================== * 6_R - icon page * ===============================================*/ .icons { padding: 30px 0 50px 0; min-height: 500px; font-family:"Open Sans"; } .icons h2{ font-size: 30px; } .icons i { font-size: 18px; width: 25px; margin-right: 5px; line-height: 30px; color: #4d5258; } ul.margin-bottom-none { list-style: outside; margin-left: 20px; } /*================================================== * 6_S - shortcodes page * ===============================================*/ .shortcodes { padding:50px 0 100px 0; margin-bottom: -50px; background-color: #fff; } .gray-bg { background-color: #e8e8e8; padding: 50px 0; } .shortcode_pagetxt{ margin-left: 30px; border-left: 5px solid #e43d24; padding: 10px 20px 0 20px; border-radius: 2px; } .shortcode_pagetxt h4 { font-size: 18px; margin-bottom: 10px; font-weight: 600; color:#e43d24; } .marg { margin-bottom: 30px; } .shortcodes_category ul{ padding: 10px; display: inline-block; } .shortcodes_category a{ color: #5c5c5c; text-decoration: underline; } .shortcodes_category a:hover{ color: #e43d24; } .shortcodes_category li{ padding: 10px; float: left; } .shortcodes_category li:hover a{ color: #e43d24; } .shortcodes_category li:last-child{ border-bottom: none; } .shortcodes .heading_title h2{ letter-spacing: 2px; } .shortcodes .heading_title .titleborder { width: 30px; } .shortcodes .heading_title:focus .titleborder, .shortcodes .heading_title:hover .titleborder{ width: 50px; } .shortcodes .heading_title { margin: 40px 0 40px 0; } .shortcodes .sub_head { font-size: 20px; font-weight: 600; text-transform: capitalize; margin-bottom: 25px; } .shortcodes .heading_title .titleborderOut{ margin-bottom: 0; } #taps #big-img { margin-top:20px; } /*---- Thumbnail shortcodes ----*/ .thumbnail { background-color: #fff; border: 1px solid #ddd; border-radius: 4px; display: block; line-height: 1.42857; margin-bottom: 20px; padding: 4px; transition: all 0.2s ease-in-out 0s; } .thumbnail_s { background-color: #fff; border: 1px solid #ddd; border-radius: 4px; width: 200px; height: 200px; display: block; line-height: 1.42857; padding: 4px; transition: all 0.2s ease-in-out 0s; margin: 20px auto; } .thumbnail1 { background-color: #fff; border: 1px solid #ddd; width: 200px; height: 200px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; overflow: hidden; line-height: 1.42857; padding: 4px; transition: all 0.2s ease-in-out 0s; margin: 20px auto; } .thumbnail1 img { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .thumbnail2 { background-color: #fff; border: 1px solid #ddd; border-radius: 4px; width: 200px; height: 200px; display: block; line-height: 1.42857; margin: 20px auto; transition: all 0.2s ease-in-out 0s; } .thumbnail3 { background-color: #fff; border: 1px solid #ddd; width: 200px; height: 200px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; line-height: 1.42857; margin: 20px auto; transition: all 0.2s ease-in-out 0s; } .thumbnail3 img { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } /*---- slider ----*/ /*---- Client slider ----*/ #slides { position: relative; } #slides .bx-wrapper .bx-viewport{ background-color: transparent; border: none; } #slides .bx-controls-direction{ position: absolute; z-index: 3; bottom: -40px; left: 10%; } #slides .bx-controls-direction a { display: inline-block; height: 30px; width: 30px; line-height: 30px; font-size: 15px; text-align: center; background-color: #e43d24; text-decoration: none; color: #fff; margin: 0 5px; } #slides .bx-controls-direction a:hover{ background-color: #333; } #slides .bx-controls-direction a:before { font-size: 16px; font-family: "FontAwesome"; } #slides .bx-controls-direction a.bx-prev:before{ content: "\f053"; } #slides .bx-controls-direction a.bx-next:before { content: "\f054"; } #slides h5 { font-size: 15px; font-weight: 600; line-height: 1.4em; } /*---- Alert ----*/ .alert{ border-radius: 2px; } #tooltips button { margin-right: 30px; } .tooltip_pragraph{ margin: 30px 0 0 0; } .modal-dialog { margin: 100px auto; } .inside-modal { padding: 40px; } .mrg-right { margin-right: 30px; margin-bottom: 20px; } /*---- hover ----*/ #hover{ background-color: #fff; padding: 30px 0; margin-top: 30px; } #hover a{ text-decoration: none; } /*---- tabs ----*/ /*---- tabs style ----*/ .tabs h3 { color: #222; } .desc img { width: 200px !important; height: auto; float: left; margin: 0 15px 10px 0; } .desc { text-align: left; float: left; } .desc h5{ margin-top: 0; } .desc button { margin: 15px 15px 15px 0; border-radius: 2px; } /*---- tabs style 1 ----*/ .tab-style1 { border-radius: 2px; margin: 20px 0; clear: both; min-height: 50px; } .tab-style1 ul.tabbed{ clear: both; } .tab-style1 .tabbed li { display: inline-block; float: left; margin-bottom: -1px; padding: 10px 20px; background-color: #fff; cursor: pointer; text-align: center; border-top: 3px solid #e43d24; border-right: 1px solid #f1f1f1; border-left: 1px solid #f1f1f1; } .tab-style1 .tabbed li:hover{ color: #fff; background-color: #e43d24; } .tab-style1 .tabbed li.inactive:hover{ color: #fff; background-color: #e43d24; } .tab-style1 li.inactive{ background-color: #f8f8f8; border-top: 3px solid #f8f8f8; border-right: 1px solid #f8f8f8; border-left: 1px solid #f8f8f8; } .tab-style1 section { background-color: #fff; padding: 25px 25px 15px 25px; min-height: 100px; line-height: 1.6em; border:1px solid #f1f1f1; clear: both; } .tab-style1 .tabbed li:hover{ color: #fff; background-color: #e43d24; border-top: 3px solid #e43d24; border-right: 1px solid #e43d24; border-left: 1px solid #e43d24; } .tab-style1 .tabbed li.inactive:hover{ color: #fff; background-color: #e43d24; border-top: 3px solid #e43d24; border-right: 1px solid #e43d24; border-left: 1px solid #e43d24; } .tab-style1 section:not(:first-of-type){ display: none; } .tab-style1 .tags a{ border-radius: 2px; padding: 3px 10px; margin: 0 5px 5px 0; display: inline-block; color: #909090; text-decoration: none; background-color: #f9f9f9; } .tab-style1 .tags a:hover{ color: #fff; background-color: #e43d24; } .tab-style1 .fet{ margin-bottom: 15px; } #tabs2-content { padding: 30px 25px 10px 25px; } /*---- tab style 2 ----*/ .product-tabs2 .fet{ margin-bottom: 15px; } #tabs1-content2 { padding: 30px 25px 10px 25px; } .product-tabs2 { border-radius: 2px; margin: 30px 0 0 0; } .product-tabs2 ul.tabbed{ clear: both; } .product-tabs2 .tabbed li { display: inline-block; float: left; padding: 10px 20px; margin-top: -1px; background-color: #fff; cursor: pointer; text-align: center; border-bottom: 3px solid #e43d24; border-right: 1px solid #f1f1f1; border-left: 1px solid #f1f1f1; } .product-tabs2 li.inactive{ background-color: #f8f8f8; border-bottom: 3px solid #f8f8f8; border-right: 1px solid #f8f8f8; border-left: 1px solid #f8f8f8; } .product-tabs2 section { background-color: #fff; padding: 25px 25px 15px 25px; min-height: 100px; line-height: 1.6em; border:1px solid #f1f1f1; clear: both; } .product-tabs2 section:not(:first-of-type){ display: none; } .product-tabs2 .tags a{ border-radius: 2px; padding: 3px 10px; margin: 0 5px 5px 0; display: inline-block; color: #909090; text-decoration: none; background-color: #f9f9f9; } .product-tabs2 .tags a:hover{ color: #fff; background-color: #e43d24; } .product-tabs2 .tabbed li:hover{ color: #fff; background-color: #e43d24; border-bottom: 3px solid #e43d24; border-right: 1px solid #e43d24; border-left: 1px solid #e43d24; } .product-tabs2 .tabbed li.inactive:hover{ color: #fff; background-color: #e43d24; border-bottom: 3px solid #e43d24; border-right: 1px solid #e43d24; border-left: 1px solid #e43d24; } /*---- tabs style 3 ----*/ .habiba-tab .nav > li > a { color: #999; text-indent: 13px; } .habiba-tab .nav > li.active > a{ color: #e43d24; font-weight: 400; font-size: 15px; border-top: 3px solid #e43d24; } .habiba-tab .nav-tabs li{ margin-bottom: -2px !important; } .habiba-tab .nav-tabs li.active { border-top: 3px solid #e43d24; font-weight: 600; border-bottom: 1px solid #fff; } .habiba-tab .nav > li > a i { position: absolute; left: -2px; line-height: 20px; } .nav-tabs.nav-justified>li>a{ border-radius: 0; } .habiba-tab .nav > li > a:hover, .habiba-tab .nav > li > a:focus { background-color:#fff; border: 1px solid #fff; border-bottom: 1px solid #eef1f1; color: #e43d24; } .habiba-tab .nav-tabs.nav-justified > li > a { outline: 0; } .habiba-tab .nav-tabs.nav-justified > .active > a, .habiba-tab .nav-tabs.nav-justified > .active > a:hover, .habiba-tab .nav-tabs.nav-justified > .active > a:focus{ border: 1px solid #eef1f1; border-bottom: none; background-color: #fff; } .habiba-tab .tab-content { padding: 25px ; margin-top: -2px; border-bottom:3px solid #e43d24; margin-bottom: 40px; background-color: #fff; } .habiba-tab .tab-content .tab-pane { text-align: justify; color: #666e70; line-height: 1.6em; font-size: 14px; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .habiba-tab .desc, #taps .add-info { color: #a1a1a1; } .add-info .table{ margin-bottom: 0; } .dropcap { float: left; font-size: 60px; font-weight: 400; line-height: 100%; margin: 0 20px 5px 0; color: #666; } .bootstrap-tab .tab-content { padding: 20px 10px; background-color: #fff; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{ border-color: #fff; } /*---- Pricing tables ----*/ .price-table { height: auto; background-color: #fff; border: 1px solid #e5e7e9; border-radius: 4px; margin-bottom: 50px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .price-head { height: 120px; padding-top: 30px; border-bottom: 1px solid #e5e7e9; position: relative; background-color: #f8fafa; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .price-head h3{ text-align: center; margin-top: 0; } .price-price{ width: 100px; height: 100px; border-radius: 50px; background-color: #fff; line-height: 100px; text-align: center; position: absolute; left: 50%; margin-left: -50px; top:70px; border:1px solid #f8f8f8; } .price-price .doller{ font-size: 20px; font-weight: 400; margin: 0 -3px 0 0; position: relative; top: -18px; left: -3px; } .price-price .prices{ font-size: 40px; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); font-weight: 600; margin: 0 auto; line-height: 100px; position: relative; left: -3px; } .price-price .month{ font-size: 15px; } .price-signup { width: 100%; display: block; padding: 25px 0; background-color: #f8fafa; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .price-signup button { margin: 0 auto; width: 50%; display: block; border-radius: 2px; background-color: #e43d24; } ul.price-feature { text-align: center; margin-top: 55px !important; } ul.price-feature li { padding: 10px; border-bottom: 1px dotted #e5e7e9; } /*-- choise --*/ .choise { margin: -10px; margin-bottom: 50px; border: 1px solid #e43d24; } .choise .price-head { background-color: #e43d24; color: #e43d24; height: 140px; } .choise .price-head h3{ color: #fff; } .choise .price-price{ top:80px; } /*---- table ----*/ .table { background-color: #fff; margin-bottom: 40px; } /*---- tooltip -----*/ .center_tooltip{ width: 60%; margin: 0 auto; } /*---- popover ----*/ .center_popup{ margin: 20px auto; } #popover .btn{ width: 80%; margin: 15px auto; } /*---- button style ----*/ /*-- style1 --*/ .btn-style1 .btn-default{ background-color: #fff; border-width: 2px; border-color: #999; transition: all 0.5s ease-in-out 0s; color: #999; margin: 10px; float: left; } .btn-style1 .btn-default:hover { background-color: #fff; border-color: #e43d24; color: #e43d24; } .btn-style1 .btn-lg, .btn-group-lg > .btn { border-radius: 2px; font-size: 18px; line-height: 1.33; padding: 10px 25px; } .btn-style1 .btn i{ margin-right: 10px; } /*-- style2 --*/ .btn-style2 .btn-default{ background-color: #fff; border-width: 2px; border-color: #999; transition: all 0.5s ease-in-out 0s; color: #999; margin: 10px; float: left; } .btn-style2 .btn-default:hover { background-color: #fff; border-color: #5cb85c; color: #5cb85c; } .btn-style2 .btn-lg, .btn-group-lg > .btn { border-radius: 2px; font-size: 18px; line-height: 1.33; padding: 10px 25px; } .btn-style2 .btn i{ margin-right: 10px; } /*-- style3 --*/ .btn-style3 .btn-default{ background-color: #fff; border-width: 2px; border-color: #999; transition: all 0.5s ease-in-out 0s; color: #999; margin: 10px; float: left; } .btn-style3 .btn-default:hover { background-color: #fff; border-color: #d9534f; color: #d9534f; } .btn-style3 .btn-lg, .btn-group-lg > .btn { border-radius: 2px; font-size: 18px; line-height: 1.33; padding: 10px 25px; } .btn-style3 .btn i{ margin-right: 10px; } /*-- style4 --*/ .btn-style4 .btn-default{ background-color: transparent; border-width: 2px; border-color: #fff; transition: all 0.5s ease-in-out 0s; color: #fff; margin: 0 0 0 0; float: left; border-radius: 2px; } .btn-style4 .btn-default:hover { background-color: #fff; border-color: transparent; color: rgba(0,0,0,0.8); } .btn-style4 .btn-lg, .btn-group-lg > .btn { border-radius: 2px; font-size: 18px; line-height: 1.33; padding: 10px 25px; } .btn-style4 .btn i{ margin-right: 10px; } #taps, #accordion, #alert, #slides, #button, #tooltips, #popmodal, #hover{ padding-bottom: 30px; } #slides{ padding-bottom: 70px; } #divider .divider{ margin-bottom: 50px; } #divider .divider.last{ margin-bottom: 20px; } #divider .divider .iconz{ font-size: 22px; } /*================================================== * 6_T - typography page * ===============================================*/ .columns { margin: 20px 0; } .columns .row{ margin: 20px 0; } .typography { padding: 20px 20px 50px 20px; } .typography .heading_title h2 { letter-spacing: 2px; } .typography .heading_title:hover .titleborder, .typography .heading_title:focus .titleborder{ width: 100px; } .typography p { color: #a1a1a1; } /*---- lists ----*/ ul.list1{ list-style: disc; list-style-position: inside; } ul.list1 li{ line-height: 1.6em; font-weight: 400; font-size: 15px; color: #a1a1a1; } ol.list2 { list-style: decimal; list-style-position: inside; } ol.list2 li{ line-height: 1.6em; font-weight: 400; font-size: 15px; color: #a1a1a1; } ul.list3{ list-style: none; } ul.list3 li{ line-height: 1.6em; font-weight: 400; font-size: 15px; color: #a1a1a1; } ul.list3 li i{ margin-right: 7px; color:#e43d24; font-size: 15px; } ul.list4{ list-style: none; } ul.list4 li{ line-height: 1.6em; font-weight: 400; font-size: 15px; color: #a1a1a1; } /*---- blockquotes ----*/ .blockquotes .heading_title, .typography .heading_title, .columns .heading_title, .lists .heading_title{ margin-top: 30px; } /*---- quote1 ----*/ .quote1 { background-color: #f5f7fa; padding: 30px 50px; border-left: 5px solid #e43d24; margin-bottom: 20px; } .quote1 p { color: #73767e; font-size: 18px; font-style: italic; } .quote1 span{ font-size: 13px; text-decoration: underline; color: #93959d ; } /*---- quote2 ----*/ .quote2 { background-color: #f5f7fa; padding: 30px 50px 30px 80px; position: relative; } .quote2 i{ font-size: 30px; position: absolute; top: 30px; left: 30px; color: #73767e; font-style: italic; margin-bottom: 20px; } .quote2 p { color: #73767e; font-size: 18px; font-style: italic; } .quote2 span{ font-size: 13px; text-decoration: underline; color: #93959d ; } /*================================================== * 6_U - Grid System page * ===============================================*/ .grid-section{ background-color: #ededed; padding: 70px 0 120px 0; margin-bottom: -50px; } .grid-info { text-align: left; margin-bottom: 40px; } .grid-section h2{ font-weight: 600; font-size: 21px; margin-bottom: 15px; text-align: left; } .margin_tB{ margin-top: 25px; margin-bottom: 25px; } .txt_color{ color: #e43d24; } .grid-info p { margin-bottom: 10px; } .grid-hr { margin: 15px 0; border-bottom: 1px solid #ccc; } .grid-blocks { background-color: #fff; display: block; line-height: 40px; min-height: 40px; text-align: center; color: #999; } /*================================================== * 6_V - Footers page * ===============================================*/ .footers{ min-height: 300px; padding: 30px 0 0 0; } .footer-demo { margin: 40px 0; } .foooter-image-feed{ width: 85%; margin: 0 auto; } .foooter-image-feed li{ float: left; margin: 7px; } .foooter-image-feed li img:hover, .foooter-image-feed li img.active{ border: 3px solid #e43d24; } .footer .tags{ padding: 0 0 10px 0; margin: 10px; } .footer .tags i{ margin-right: 7px; color: #b5b8bf; } .footer .tags a{ color: #b5b8bf; border-color: #393f47 #2d323a #2d323a; box-shadow: none; padding: 5px 7px; margin: 5px; display: inline-block; float: left; border-radius: 2px; background-color: #1d2125; text-decoration: none; } .footer .tags a:hover { color:#fff; background-color: #393f47; } .copy_right .links_footer{ float: right; line-height: 50px; margin-right: 20px; } .links_footer li{ float: left; margin-left: 20px; font-size: 14px; } .links_footer li a{ color: #ccccd5; } .links_footer li a:hover{ color: #fff; } .footer-about{ height: auto; padding: 20px 5px; position: relative; } .footer-about h4{ color: #fff; font-size: 18px; letter-spacing: 1px; font-weight: 600; padding: 15px 0 20px 0; } .footer-about p{ color: #ccccd5; } .footer-icons-section h4{ color: #fff; font-size: 18px; letter-spacing: 1px; font-weight: 600; padding: 15px 0 20px 0; } .footer-icons-section p{ color: #ccccd5; } .footer-icons-section i{ font-size: 75px; color: rgba(250,250,250,0.2); } .copy_right .payment-method{ float: right; line-height: 50px; margin-right: 20px; } .payment-method li{ float: left; margin-left: 30px; font-size: 14px; } .payment-method li p{ line-height: 40px; } .payment-method li a i{ font-size: 25px; } .payment-method li a{ color: #ccccd5; } .payment-method li a:hover{ color: #fff; } /* footer blog feed */ .footer-blog-feed { height: auto; padding: 20px 5px; position: relative; } .footer-blog-feed h4{ color: #fff; font-size: 18px; letter-spacing: 1px; font-weight: 600; padding: 15px 0 20px 0; } .footer-blog-feed li{ border-bottom: 1px dashed #333941; padding: 10px 0 ; line-height: 1.6em; } .footer-blog-feed li:last-child{ border-bottom: none; } .footer-blog-feed li:first-child{ padding-top: 0; } .footer-blog-feed li i{ color: #ccccd5; margin-right: 10px; } .footer-blog-feed li a{ color: #ccccd5; text-decoration: none; } .footer-blog-feed li a:hover{ color: #e43d24; } /* footer links */ .footer_links_widget { height: auto; padding: 20px 5px; position: relative; } .footer_links_widget h4{ color: #fff; font-size: 18px; letter-spacing: 1px; font-weight: 600; padding: 15px 0 20px 0; } .footer_links_widget li{ padding: 5px 0 ; line-height: 1.6em; } .footer_links_widget li:last-child{ border-bottom: none; } .footer_links_widget li:first-child{ padding-top: 0; } .footer_links_widget li i{ color: #ccccd5; margin-right: 10px; } .footer_links_widget li a{ color: #ccccd5; text-decoration: none; } .footer_links_widget li a:hover{ color: #e43d24; } /* footer with shape */ .footer1 { background-color: #2d343a; height: auto; min-height: 300px; border-bottom: 1px solid #1a1e22; padding: 45px 0 0 0; position: relative; margin-top: 50px; } .footer1:before{ content: ""; border-bottom: 100px solid #2d343a; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 400px; position: absolute; top: -50px; left: 50%; margin-left: -200px; } .get-in-touch{ width: 150px; height: 40px; position: absolute; top: -30px; left: 50%; margin-left: -75px; border-radius: 1px; padding: 5px 10px; text-align: center; background-color: #e43d24; cursor: pointer; } .get-in-touch a{ font-family: 'Lobster', cursive; position: relative; display: block; color: #fff; text-decoration: none; font-weight: 400; font-size: 20px; } .get-in-touch a:after{ width: 100px; border-left: none; border-right: none; border-top: 1px solid #fff; border-bottom: 1px solid #fff; height: 3px; position: absolute; right: -100px; top: 50%; display: block; } .get-in-touch a:before{ width: 100px; border-left: none; border-right: none; border-top: 1px solid #fff; border-bottom: 1px solid #fff; height: 3px; position: absolute; left: -100px; top: 50%; display: block; } .copy_right1{ height: auto; font-family: 'Open Sans', sans-serif; position: relative; font-weight: 400; border-top: 1px solid #2e343a; padding: 15px 10px ; margin-top: 50px; background-color: #1d2125; z-index: 2; } .copy_right1:before{ content: ""; border-bottom: 100px solid #1d2125; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 400px; position: absolute; top: -50px; left: 50%; margin-left: -200px; z-index: -1; } .copy_right1 img{ position: absolute; top: -30px; left: 50%; width: 100px; margin-left: -50px; z-index: 2; } .copy_right1 p a { color: #e43d24; margin-left: 5px; text-decoration: none; z-index: 3; } .copy_right1 p a:hover { color: #c13925; } .copy_right1 p { color: #ccccd5; float: left; line-height: 50px; margin-left: 15px; } .copy_right1 .social_footer{ float: right; line-height: 50px; margin-right: 20px; } /*================================================== * 6_W - Headers page * ===============================================*/ .header-demo { margin: 40px 0; } /* Header Style 1*/ .top_bar1{ width: 100%; height: 40px; border-bottom: 1px solid #eef1f1; display: block; line-height:35px; background-color: #21252b; margin-bottom: 0; clear: both; } .top_bar1 .mail_us{ font-family: 'Open Sans', sans-serif; float: left; width: 250px; margin-left: 5px; line-height: 40px; font-size: 13px; height: 40px; padding: 7px 0; } .top_bar1 .mail_us i{ float: left; width: 25px; height: 25px; background-color: transparent; color: #fff; font-size: 15px; padding: 7px 5px; } .top_bar1 .mail_us p{ float: left; line-height: 30px; padding: 0 5px; color: #ccccd5; } .top_bar1 .mail_us span{ float: left; line-height: 30px; padding: 0 5px; color: #ccccd5; font-weight: 600; } .top_bar1 .mail_us a{ text-decoration: none; color: #fff; font-size:16px; } .top_bar1 .mail_us a:hover{ color: #fff; } .top_bar1 .call_us{ font-family: 'Open Sans', sans-serif; width: 200px; float: left; color: #666e70; line-height: 1.6em; height: 35px; font-size: 13px; padding: 5px 0; } .top_bar1 .call_us i{ float: left; width: 25px; height: 25px; background-color: transparent; color: #fff; font-size: 20px; padding: 8px 5px; font-size:16px; } .top_bar1 .call_us p{ float: left; line-height: 30px; padding: 0 5px; color: #fff; font-size:16px !important; } .top_bar1 .call_us span{ float: left; color: #fff; line-height: 30px; padding: 0 5px; font-weight: 600; font-size:16px; } /* ---- social icons ---- */ .top_bar1 .social{ float: right; text-decoration: none; } .top_bar1 .social li{ width: 35px; height: 39px; float: left; border:none; border-width: 0; background-color: #2b3139; } .top_bar1 .social li:last-child{ border-width: 0 1px 0 1px; } .top_bar1 .social li a { color: #fff; display: block; height: 39px; text-decoration: none; } /*---- Header style 2 ----*/ .top_bar2{ width: 100%; height: 50px; border-bottom: 1px solid #eef1f1; display: block; background-color: #2d343a; margin-bottom: 0; clear: both; } .top_bar2 .mail_us{ font-family: 'Open Sans', sans-serif; float: left; width: 200px; margin-left: 15px; line-height: 1.6em; font-size: 13px; height: 40px; padding: 5px 0; } .top_bar2 .mail_us i{ float: left; width: 25px; height: 32px; line-height: 40px; background-color: transparent; color: #e43d24; font-size: 15px; padding: 0px 5px; } .top_bar2 .mail_us p{ float: left; line-height: 25px; padding: 0 5px; color: #ccccd5; } .top_bar2 .mail_us span{ float: left; line-height: 40px; padding: 0 5px; color: #ccccd5; font-weight: 600; } .top_bar2 .mail_us a{ text-decoration: none; color: #e43d24; line-height: 40px; } .top_bar2 .mail_us a:hover{ color: #e43d24; } .top_bar2 .call_us{ font-family: 'Open Sans', sans-serif; width: 220px; float: left; color: #666e70; line-height: 1.6em; height: 40px; font-size: 13px; padding: 5px 0; } .top_bar2 .call_us i{ float: left; width: 25px; height: 40px; background-color: transparent; color: #e43d24; font-size: 20px; line-height: 40px; padding: 0px 5px; } .top_bar2 .call_us p{ float: left; line-height: 40px; padding: 0 5px; color: #ccccd5; } .top_bar2 .call_us span{ float: left; color: #ccccd5; line-height: 40px; padding: 0 5px; font-weight: 600; } /* topbar login form */ .login-topbar{ width: 415px; float: right; height: 50px; padding: 8px 0; } .login-topbar .form-group{ height: 40px; } .login-topbar .form-control{ border-radius: 2px; background-color: #ccccd5; } .login-topbar .form-control:focus{ box-shadow: none; background-color: #fff; border-color: #e43d24; } .login-topbar .btn{ box-shadow: none; background-color: #e43d24; border-color: #e43d24; color: #fff; border-radius: 2px; height: 34px; font-size: 20px; line-height: 34px; padding: 0 10px; } /*---- Header style 3 ----*/ .top_bar3{ width: 100%; height: 50px; border-bottom: 1px solid #eef1f1; display: block; background-color: #2d343a; margin-bottom: 0; clear: both; } .top_bar3 .mail_us{ font-family: 'Open Sans', sans-serif; float: left; width: 200px; margin-left: 15px; line-height: 1.6em; font-size: 13px; height: 40px; padding: 5px 0; } .top_bar3 .mail_us i{ float: left; width: 25px; height: 32px; line-height: 40px; background-color: transparent; color: #e43d24; font-size: 15px; padding: 0px 5px; } .top_bar3 .mail_us p{ float: left; line-height: 25px; padding: 0 5px; color: #ccccd5; } .top_bar3 .mail_us span{ float: left; line-height: 40px; padding: 0 5px; color: #ccccd5; font-weight: 600; } .top_bar3 .mail_us a{ text-decoration: none; color: #e43d24; line-height: 40px; } .top_bar3 .mail_us a:hover{ color: #e43d24; } .top_bar3 .call_us{ font-family: 'Open Sans', sans-serif; width: 220px; float: left; color: #666e70; line-height: 1.6em; height: 40px; font-size: 13px; padding: 5px 0; } .top_bar3 .call_us i{ float: left; width: 25px; height: 40px; background-color: transparent; color: #e43d24; font-size: 20px; line-height: 40px; padding: 0px 5px; } .top_bar3 .call_us p{ float: left; line-height: 40px; padding: 0 5px; color: #ccccd5; } .top_bar3 .call_us span{ float: left; color: #ccccd5; line-height: 40px; padding: 0 5px; font-weight: 600; } /* ---- follow us ---- */ .top_bar3 ul.follow_us{ float: left; padding: 8px 0 !important; height: 50px; width: 300px; } .top_bar3 .follow_us li{ width: 35px; height: 35px; border-radius: 50%; overflow: hidden; float: left; background-color: #2a3037; margin-right: 5px; } .top_bar3 .follow_us li:first-child{ width: auto; height: 35px; line-height: 35px; border-radius: 1px; color: #ccccd5; float: left; background-color: transparent; margin-right: 5px; } .top_bar3 .follow_us li p{ line-height: 35px; font-weight: 600; font-size: 14px; font-family: 'Open Sans', sans-serif; } .top_bar3 .follow_us li a { color: #939393; display: block; height: 35px; text-decoration: none; line-height: 35px; text-align: center; } ul.follow_us li a i { font-size: 1.2em; display: block; margin: 0 auto; line-height: 35px; } ul.follow_us li a:hover { color: #fff !important; } ul.follow_us .sky i { padding: 0; } /*================================================== * 6_X - Hotel Home page * ===============================================*/ .hotel-reservation{ margin-top: -170px; z-index: 9999 !important; display: block; position: relative; margin-bottom: 30px; } .hotel-reservation .container{ background-color: rgba(0,0,0,0.7); padding: 20px 20px 50px 20px; border-radius: 2px; z-index: 9999 !important; position: relative; width: 95%; } .hotel-reservation form .form-group label { color: #fff; font-weight: 600; font-size: 16px; clear: both; } .hotel-reservation form .btn{ position: absolute; bottom: 0; left: 45%; } .hotel-reservation form input{ border-radius: 2px; } .hotel-reservation h3{ text-align: center; font-weight: 600; font-size: 20px; color: #fff; margin-bottom: 20px; } .hotel-reservation h3 span{ color: #e43d24; font-weight: 800; } .border-right{ border-right: 1px solid rgba(0,0,0,0.1); } .hotel-reservation .input-with-icon{ position: relative; } .hotel-reservation .input-with-icon i{ position: absolute; left: 15px; line-height: 35px; font-size: 16px; } .hotel-reservation .input-with-icon input{ text-indent: 25px; } .transparent_bg { background-color: rgba(0,0,0,0.5); width: 50%; min-height: 150px; } /* book now button */ .hotel-reservation .wrap-around { position: absolute; right: 0px; bottom: 10px; display: inline-block; margin-top: 16px; padding: 10px 48px 10px 24px; margin-right: 0; background: #ff0000; color: #fff; text-decoration: none; z-index: 99999 !important; } .hotel-reservation .wrap-around:before { content: ''; position: absolute; right: -6px; top: -6px; width: 6px; height: 44px; background: #800000; transform: skewY(-45deg); } .hotel-reservation .wrap-around:after { content: ''; position: absolute; top: -9px; right: -6px; width: 6px; height: 6px; background: #000000; z-index: -1; } .hotel-reservation .wrap-around:hover { background: #e43d24; text-decoration: none; color: #fff; } .hotel-reservation .wrap-around:hover:before { background: #c13925; } .hotel-reservation .wrap-around:hover:after { background: #222; } /*---- counter white bg ----*/ .counter2{ min-height:200px; text-align: center; font-weight: 400; background: url(../img/pat/7.png) repeat; } .counter2 .timer { color: #fff; font-size:50px; font-weight:bold; } .counter2 p{ color: #fff; font-size: 40px; } .counter2 i{ font-size:55px; color: #fff; } .counter2 label{ color: #fff; font-size: 17px; font-weight: normal; } .counter2 .bg__coo { padding: 60px 10px; background-color:transparent; min-height:200px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset; background-image: url(../img/background_section.png); background-repeat: repeat; } /*---- Room Section ----*/ .our-rooms { padding: 50px 0 70px 0; } .rooms{ position: relative; box-shadow: 3px 3px rgba(0, 0, 0, 0.1); border:1px solid rgba(0, 0, 0, 0.1); } .room-price{ position: absolute; right: 0; top: 0; background-color: rgba(0,0,0,0.8); color: #fff; padding: 15px; font-weight: 600; font-size: 16px; } .room-dollor { font-size: 30px; font-weight: 800; margin-top: 5px; } .rooms img{ width: 100%; } .rooms h3 a{ font-weight: 600; font-size: 22px; margin-top: 5px; margin-bottom: 15px; color: #333; text-decoration: none; } .rooms h3 a:hover{ color: #e43d24; } .rooms .room-description{ padding: 20px; } /*================================================== * 6_Y - Parallax Home page * ===============================================*/ nav#primary { z-index: 5; position: fixed; top: 50%; right: 16px; margin-top: -40px; } nav#primary li { position: relative; height: 20px; } nav#primary a { display: block; width: 20px; height: 20px; text-decoration: none; } nav#primary a i{ color: #e43d24; display: block; } nav#primary a:hover i, nav#primary a.active i { color: #ccccd5; } nav#primary span { position: absolute; right: 30px; top: -7px; display: none; padding: 4px 20px 4px 7px;; color: #fff; white-space: nowrap; background: #e43d24; } nav#primary span:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(228, 61, 36, 0); border-left-color: #e43d24; border-width: 5px; margin-top: -5px; } /*================================================== * 6_Z - Portfolio Page 3 * ===============================================*/ .protfolio-filter li.new-filter a { display: inline-block; width: 100%; height: 50px; margin: 0 5px 30px 0; background-color: #FFF; border: 1px solid #e9e8e8; padding: 0 15px; color: #222; border-radius: 2px; font-size: 14px; line-height: 50px; } .protfolio-filter li.new-filter.current a { background-color: #FFF; border: 1px solid #e43d24; color: #e43d24; } .protfolio-filter li.new-filter a i { font-size: 16px; margin-right: 10px; } .portfolio_3{ position: relative; overflow: hidden; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; margin-bottom: 30px; } .portfolio_3 img{ width: 100%; height: 206px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); } .our_works .container .portfolio_3 img{ width: 100%; height: 250px; } .portfolio_3:hover img{ filter: grayscale(0%); -moz-filter: grayscale(0%); -webkit-filter: grayscale(0%); } .portfolio_3:hover .portfolio-caption{ bottom: 0; visibility: visible; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .portfolio-caption{ position: absolute; bottom: -50px; width: 100%; background-color: rgba(0,0,0,0.7); text-align: center; padding: 10px; display: block; visibility: hidden; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .portfolio-caption h2{ color: #fff; font-weight: 400; font-size: 17px; margin-bottom: 5px; } .portfolio-caption p{ color: #ccccd5; margin-bottom: 5px; } .portfolio-control{ width: 90px; height: 40px; display: block; visibility: hidden; position: absolute; top: 20%; left:50%; margin-left: -45px; margin-top: -20px; } .portfolio_3:hover .portfolio-control{ top: 40%; visibility: visible; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .portfolio-control a.view_project i{ width: 40px; height: 40px; border-radius: 50%; background-color:rgba(250,250,250,0.9); color: #222; margin-right: 10px; text-align: center; line-height: 40px; font-size: 16px; float: left; } .portfolio-control a.go_project i{ width: 40px; height: 40px; border-radius: 50%; background-color:rgba(250,250,250,0.9); color: #222; text-align: center; line-height: 40px; font-size: 16px; float: left; } .portfolio-control a:hover i{ -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; color: #e43d24; background-color:rgba(250,250,250,1); } /*================================================== * 6_AA - Search result Page * ===============================================*/ .search{ padding: 50px; } .search-input{ position: relative; } .search-input input{ border-radius: 23px; } .search .pagination { clear: both; margin: 0 auto !important; width: 300px; display: block; border-radius: 2px; } .search-btn{ position: absolute; right: 0; top: 0; border-radius: 23px; border-top-left-radius: 0; border-bottom-left-radius:0; } .result_count{ clear: both; border-bottom: 1px solid #f2f2f2; padding: 10px 0; display: block; height: 50px; } .result_count p{ font-size: 18px; color: #333; float: left; } .result_count span{ font-size: 20px; font-weight: 600; float: left; margin-left: 7px; color: #e43d24; } .search .h4{ margin-bottom: 25px; margin-top: 0; } .search .h4 a{ color: #555; text-decoration: none; } .detect{ color:#e43d24; padding: 0 5px; font-weight: 700; } .search_ul li:last-child{ border-bottom: 0; } .search-result{ border-bottom: 1px solid #f2f2f2; padding: 40px 0; } .meta{ width: 100%; height: 30px; display: block; margin: 5px 0; color: #666; clear: both !important; } .meta_view{ width: 50px; line-height: 30px; margin-right: 20px; float: left; } .meta_view i{ line-height: 30px; float: left; margin-right: 10px; font-size: 15px; } .meta_view span{ line-height: 30px; float: left; } .meta_favorite{ width: 50px; line-height: 30px; margin-right: 20px; float: left; } .meta_favorite i{ line-height: 30px; float: left; margin-right: 10px; font-size: 15px; } .meta_favorite span{ line-height: 30px; float: left; } .meta_comment{ width: 50px; line-height: 30px; margin-right: 20px; float: left; } .meta_comment i{ line-height: 30px; float: left; margin-right: 10px; font-size: 15px; } .meta_comment span{ line-height: 30px; float: left; } .meta_share{ float: right; } .meta_share li{ float: left; width: 30px; height: 30px; } .meta_share li a{ text-decoration: none; color: #666; } .meta_share li a i{ font-size: 16px; line-height: 30px; } .meta_share li a.fb:hover { color: #3B5998; background-color: transparent; } .meta_share li a.twi:hover { color: #55ACEE; background-color: transparent; } .meta_share li a.goo:hover { color: #DD4B39; background-color: transparent; } /************************************************* # # # 07 - Media Query RESPONSIVE # # # *************************************************/ /*================================================== * mobile only * ===============================================*/ @media (max-width: 768px) { .boxed { width: 100%; } .boxed header{ width: 100%; } .habiba_search_form .habiba_search_close{ right: 25px; } } @media (max-width: 992px) { .boxed { width: 100%; } .boxed header{ width: 100%; } } @media (min-width: 1200px) { .boxed { width: 1200px; } } @media (max-width: 450px){ /* General */ body{ padding-top: 80px; } .boxed { width: 100%; margin: 0; } /* features */ .feature_container{ margin-bottom: 30px; } /* service page */ .more2{ clear: both; margin:0 auto; } .space{ clear: both; display: block; margin: 20px 0; } .top_bar, .top_bar1, .top_bar3 { display: none !important; } .page-header-1 h1{ font-size: 25px; } .habiba_search_form .habiba_search_close{ right: 25px; } .counter i, .counter2 i{ font-size: 40px; } .counter .timer, .counter2 .timer{ font-size: 30px; } .counter p, .counter2 p{ font-size: 30px; } .counter label, .counter2 label{ font-size: 14px; margin-bottom: 35px; } /* home slider */ .btn.btn-primary.bebo{ font-size: 12px; padding: 3px 5px; line-height: 20px; } /* footer contactus */ .contact_info{ padding: 0px; } .contact_info ul li i{ font-size: 15px; margin-right: 7px; } .contact_info ul li span{ width: auto; color: #fff; } .footer1:before{ content: ""; border-bottom: 100px solid #2d343a; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 300px; position: absolute; top: -50px; left: 50%; margin-left: -150px; } .copy_right1:before{ content: ""; border-bottom: 100px solid #1d2125; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 300px; position: absolute; top: -50px; left: 50%; margin-left: -150px; } /* comming soon */ .soon .form-group{ width: 100%; margin:20px auto; } .soon .newsletter{ padding: 0; margin-top: 20px; } .wrap-clock { background-color: rgba(0, 0, 0, 0.3); width: 100px; height: 100px; margin: 15px auto; border-radius: 50px; float: none; } .wrap-clock span { line-height: 100px; } .wrap-clock strong { line-height: 100px; font-weight: 600; font-size: 18px; text-align: center; margin: -80px auto 25px auto; clear: both; display: inline-block; } .single-blog h1{ font-size: 20px; } .desc h5{ clear: both; } .txt-img{ width: 100%; margin-top: 10px; } .ruler{margin-bottom: 30px;} .single-blog p{ text-align: justify; } /* our skils section */ .left-25 { padding-left: 15px; padding-right: 15px; margin-top: 20px; } .about .start{ margin: 15px auto; width: 250px; float: none; } /* portfolio 3 page*/ .protfolio-filter li.new-filter a { margin: 0 5px 30px 0; padding: 0 5px; font-size: 12px; } .protfolio-filter li.new-filter a i { font-size: 14px; margin-right: 5px; } /* Login pages */ .login-form { padding: 20px; margin-bottom: 30px; } .login-form .form-group label{ font-size: 15px; } .login { padding: 20px 5px; } .login-form .btn-default { width: 200px; margin: 15px auto; display: inline; } .login-form h2{ font-size: 20px; } /* Hotel homepage */ .hotel-reservation{ margin-top: 0px; z-index: 0 !important; } .hotel-reservation .container{ border-radius: 0; } .hotel-reservation .border-right{ border-right: 0; } .rooms{ margin-bottom: 30px; } .counter2 label{ margin-bottom: 30px; } .single-project .btn-lg{ margin: 0 auto; display: block; } .foooter-image-feed li{ margin: 1px; } .image-padding{ padding-right: 0; padding-left: 0; margin-bottom: 20px; } .product-tabs div{ margin-bottom:30px; } .nav-tabs.nav-justified > li > a{ margin-bottom: 0; border-bottom: none; } .habiba-tab .nav > li > a:hover, .habiba-tab .nav > li > a:focus { background-color:#fff; border: 1px solid #fff; border-bottom: none; color: #e43d24; } /*================================================== * Mobile and Tablet * ===============================================*/ @media (max-width: 767px){ body{ padding-top: 80px; } /*General*/ .more .btn-lg, .btn-group-lg > .btn { font-size: 14px; } .top_bar,.top_bar2,.top_bar3 { display: none !important; } .habiba_search_form .habiba_search_close{ right: 25px; } /* Hotel homepage */ .hotel-reservation{ margin-top: 0px; z-index: 0 !important; } .hotel-reservation .container{ border-radius: 0; } .hotel-reservation .border-right{ border-right: 0; } .rooms{ margin-bottom: 30px; } .counter2 label{ margin-bottom: 30px; } .counter i, .counter2 i{ font-size: 40px; } .counter .timer, .counter2 .timer{ font-size: 30px; } .counter p, .counter2 p{ font-size: 30px; } .counter label, .counter2 label{ font-size: 14px; margin-bottom: 35px; } /*shortcode*/ #slides .bx-controls-direction{ bottom: -25px; left: 0; } .shortcodes > .container > .row{ margin-left: 0; margin-right: 0; } #tabs1-content2{ padding: 15px; } .tab-style1 section{ padding: 15px; margin-bottom: 20px; } #tooltips button{ margin-bottom: 20px; } .desc img{ margin: 15px auto; } .mrg_0{ margin-left: 0; margin-right: 0; } .clients .row{ margin-left: 0; margin-right: 0; } .item-img .sale{ left: -10px; } /* blog slider section */ .heading_title-left h2{ margin: 0px auto 0 0px ; } .titleborderOut-left .titleborder-left { margin: -3px auto 0px 0px; } .blog_posts .bx-controls-direction { right: 0px; top:-20px; position: absolute; } .client .bx-controls-direction{ right: 0px; top:-65px; position: absolute; } .blog_posts .bx-wrapper .bx-prev, .client .bx-wrapper .bx-prev { right: 30px; top:20px; display: block; } .blog_posts .bx-wrapper .bx-next, .client .bx-wrapper .bx-next{ right:0px; top: 20px; display: block; } .vedio .txt { margin-top: 20px; } .vedio .heading_title { margin-top: 20px; } /* client section */ .client .row{ margin: 0; } /* about section */ .about{ text-align: center; } .about h3{ text-align: center; } /* counter section */ .counter .col-xs-12{ margin-bottom: 20px; } /* features section */ .features .row{ margin: 0; } .features .fet{ height: auto; } /* our team section */ .our_team .container{ padding: 0 5px; } .box{ margin: 20px auto; } /* blog_posts section & Blog PAGE */ .blog_posts, .blog{ padding-left: 0; padding-right: 0; } .blog_posts .txt h2, .blog .txt h2{ margin-left: 0; } .blog_posts .txt h2:after, .blog .txt h2:after{ width: 50px; } .blog_posts .col-xs-12, .blog .col-xs-12{ padding: 0; } .blog_posts .blogs_box, .blog .blogs_box{ width: 100%; display: inline-block; } .blog_posts .blogs_box .blog_txt, .blog .blogs_box .blog_txt{ display: inline-block; height: auto; padding-bottom: 0; } .blog_posts .blogs_box .blog_txt p, .blog .blogs_box .blog_txt p{ font-size: 12px; line-height: 1.4em; } .blog_posts .blogs_box .blog_txt .blog_info, .blog .blogs_box .blog_txt .blog_info{ position: static; width: 100%; display: inline-block; margin:10px 0; } .blog_info .author, .blog_info .date, .blog_info .comments_no{ padding:0 5px; font-size: 13px; } /* blog section */ .blogs_box.home-blogfeed{ width: 98%; display: inline-block; } .blogs_box.home-blogfeed .blog_info{ margin:15px 0 !important; position: relative !important; } .blogs_box.home-blogfeed .author{ margin-bottom: 5px; position: absolute; left: 60px; top: 5px; line-height: 20px; } .blogs_box.home-blogfeed .date{ padding-left: 0; position: absolute; left: 60px; bottom: 5px; line-height: 20px; } /* Read more button */ .blog_posts .wrap-around { margin-top: 16px; padding: 7px 15px; } /* blog Page */ .blog .pagination { width: 95%; margin: 0 auto; padding: 0 1%; } .blog .row{ margin: 0 !important; } .blog .col-md-6, .blog .col-sm-6, .blog .col-xs-12, .blog .col-lg-8, .blog .col-md-8, .blog .col-lg-4 , .blog .col-md-4{ padding: 0 !important; } .adv { padding: 0; margin-bottom: 15px; } .adv img { margin: 10px 5px; } .tabsy .tabbed li { padding: 10px; } .blogs_feed { padding: 5px 0; } /* single post page */ .author-social { position: absolute; left: 40px; top: 15px; } .comments .comment-level-2{ margin-left: 40px; } .col-xs-12.widgets{ padding-right: 0; padding-left: 0; } .col-xs-12.widget-10{ padding-left: 5px; padding-right: 5px; } .comments a.replay{ top: 5px; } /* Shop Page */ .shop-full-width { padding: 20px 0; } .shop-full-width .adv { padding: 0; } .shop-full-width .adv2 { padding: 0; } .shop-full-width .adv2 img { margin: 5px; } .adv2 .ads{ width: 245px; margin: 0 auto; } .adv .ads{ width: 245px; margin: 0 auto; } .team-details{ margin-bottom: 30px; } .item-single .action{ margin-bottom: 20px; } .item-single .action button{ margin-left: 0; float: right; } /* index */ .left-25 { padding-left: 15px; padding-right: 15px; margin-top: 20px; } .about h3{ font-size: 20px; } /*contact page*/ .contact .contact_text, .contact2 .contact_text{ padding: 0; margin-bottom: 25px; margin-top: 15px; } .contact .contact-form, .contact2 .contact-form { padding: 0; margin-bottom: 25px; } .contact .form-group label, .contact2 .form-group label { font-size: 18px; } /* Portfolio single page */ .single-project h2 { margin-top: 20px; } /* 404 page */ .main{ min-height: 300px; padding:20px 0px; color: #333; } .error-menu{ margin: 20px auto; clear: both; padding: 0 15px; width: 100%; display: block; height: 80px; } .error-menu ul li{ float: left; border-right: 1px solid #ccc; padding: 5px 15px; position: relative; width: 30%; } .error-menu ul li:last-child{ border-right: 1px solid #ccc; } .shape { width: 240px; margin: 0 auto; } .main h1 { font-size: 25px !important; } .error-404 { border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 250px solid #e43d24; border-radius:2px; } .error-404-2 { border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 190px solid #fff; top: 40px; left: 50px; } .error-404-3 { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 130px solid #e43d24; top: 80px; left: 70px; } .shape p{ font-size: 80px; top: 100px; left: 110px; } /* faq page */ .accordion .accordion-title a i{ margin: 0; } .faq1 { padding: 30px 0; } /* about page */ .about-txt { margin-bottom: 15px; } /* icon page */ .icons { padding: 30px; } /* shortcodes */ #taps{ padding: 30px 0 0 0; } #alert{ padding: 70px 0 0 0; } #popover, #tables, #slides, #button, #tooltips, #modal{ min-height:100px; padding: 50px 0 50px 0; } #thumb{ padding: 70px 15px 0 15px; } .shortcode_pagetxt { margin-left: 10px; } #button button{ margin-right: 5px; margin-bottom: 15px; } #modal .btn, #popover .btn{ margin: 20px auto; } .shortcodes .sub_head{ margin-top: 15px; } /* typography page */ .typography { padding: 20px 10px 50px 10px; } } /* end mobile and tablet */ /*================================================== * Small Screen * ===============================================*/ @media (min-width: 768px) and (max-width: 991px){ .boxed { width: 100%; margin: 0; } .habiba_search_form .habiba_search_close{ right: 25px; } /* comming soon */ .soon .bg__soon{ padding: 100px 0; } .soon .form-group{ width: 90%; margin:20px auto; } .soon .newsletter{ padding: 0; margin-top: 20px; } .wrap-clock { background-color: rgba(0, 0, 0, 0.3); width: 150px; height: 100px; margin: 15px 20px; border-radius: 50px; float: left; } .wrap-clock span { line-height: 100px; } .wrap-clock strong { line-height: 100px; font-weight: 600; font-size: 18px; text-align: center; margin: -80px auto 25px auto; display: inline-block; } /* Hotel homepage */ .hotel-reservation{ margin-top: 0px; z-index: 0 !important; } .hotel-reservation .container{ border-radius: 0; } .hotel-reservation .border-right{ border-right: 0; } .rooms{ margin-bottom: 30px; } /* conter section */ .counter i, .counter2 i{ font-size: 45px; } .counter .timer, .counter2 .timer{ font-size: 35px; } .counter p, .counter2 p{ font-size: 35px; } .counter label, .counter2 label{ font-size: 16px !important; margin-bottom: 35px; } /* Portfolio single page */ .single-project h2 { margin-top: 20px; } .about-txt { margin-bottom: 15px; } /*home page */ .about h3{ text-align: center; font-size: 18px; } }/* end small screen */ /*================================================== * Medium Screen * ===============================================*/ @media (min-width:992px) and (max-width: 1199px){ .boxed{ width: 100%; } .boxed header{ width: 100%; } .ca-menu li.mega2 .container{ left: -515px; } .about-txt { margin-bottom: 15px; } }/* end medium screen */ /*================================================== * Large Screen * ===============================================*/ @media (min-width:1200px){ }/* end large screen */