/*

Theme Name: Supremehome

Theme URI: https://wordpress.org/themes/twentyseventeen/

Author: the WordPress team

Author URI: https://wordpress.org/

Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: supremehome

Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready



This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.

*/



/*--------------------------------------------------------------

>>> TABLE OF CONTENTS:

----------------------------------------------------------------

1.0 Normalize

2.0 Accessibility

3.0 Alignments

4.0 Clearings

5.0 Typography

6.0 Forms

7.0 Formatting

8.0 Lists

9.0 Tables

10.0 Links

11.0 Featured Image Hover

12.0 Navigation

13.0 Layout

   13.1 Header

   13.2 Front Page

   13.3 Regular Content

   13.4 Posts

   13.5 Pages

   13.6 Footer

14.0 Comments

15.0 Widgets

16.0 Media

   16.1 Galleries

17.0 Customizer

18.0 SVGs Fallbacks

19.0 Media Queries

20.0 Print

--------------------------------------------------------------*/



/*--------------------------------------------------------------

1.0 Normalize

Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css

--------------------------------------------------------------*/

@charset "utf-8";
/* CSS Document */
body{ background:#fff; font:normal 14px/20px Arial, Helvetica, sans-serif; color:#000;}
a{ color:#7ac142;}

header{ padding:14px 0 0;}
#navigation{ float:right;}
#logo{ float:left; padding:0 0 10px;}
#navbtn{ display:none;}
.nav-menu{}
.nav-menu li{ position:relative; float:left;}
.nav-menu li > a{ font:400 16px/68px 'Raleway', sans-serif; color:#606060; padding:0 20px; white-space:nowrap; display:block;}
.nav-menu li:hover > a, .nav-menu li.active > a,.nav-menu li.current_page_item > a, .nav-menu li > a:focus{ background:#fff; color:#0089cf; text-decoration:none;}
/*.nav-menu .sub-menu{ position:absolute; left:0; top:100%; background:#0089cf; min-width:220px; box-shadow:0 0 5px #02496d; transition: all 300ms ease-out 0s; display:none; z-index:999;}
.nav-menu .sub-menu .sub-menu{ left:100%; top:0;}
.nav-menu li:hover > .sub-menu{ display:block;}
.nav-menu .sub-menu li{ float:none;}
.nav-menu .sub-menu a{ font:normal 14px/34px Arial, Helvetica, sans-serif; padding:0 10px; white-space:nowrap;}
.nav-menu .sub-menu li+li{ border-top:1px solid #035e8d;}*/
.nav-menu .sub-menu{ position:absolute; left:0; top:100%; background:#404041; min-width:220px; box-shadow:0 0 5px #02496d; transition: all 300ms ease-out 0s; display:none; z-index:999;}
.nav-menu .sub-menu .sub-menu{ left:100%; top:0;}
.nav-menu li:hover > .sub-menu{ display:block;}
.nav-menu .sub-menu li{ float:none;}
.nav-menu .sub-menu a{ font:normal 14px/34px Arial, Helvetica, sans-serif; padding:0 10px; white-space:nowrap; color:#fff;}
.nav-menu .sub-menu li+li{ border-top:1px solid #575758;}
.nav-menu .sub-menu li:hover > a, .nav-menu .sub-menu li.active > a, .nav-menu .sub-menu li.current_page_item > a, .nav-menu .sub-menu li > a:focus{ background:#535353; color:#fff;}
.nav-menu .menu-item-has-children > a{ cursor:pointer;}
#banner{ position:relative;}
#banner_text{ position:absolute; left:50%; top:50%; width:1200px; transform: translate(-50%, -50%); text-align:center;}
#banner_text h1{ background:#404041; padding:0 30px; font:700 40px/70px 'Raleway', sans-serif; text-align:center; color:#fff; display:inline-block;}
#banner_text h2{ font:300 38px/40px 'Raleway', sans-serif; text-align:center; color:#fff; padding:8px 30px; display:inline-block; background:#0674bb; text-transform:uppercase; box-shadow:-1px -4px 5px #1d1d1d;}
#banner_bottom{ margin:-90px 0 0;}
.blue{ width:33.3%; float:left; background:#0674bb; text-align:center; padding:20px 25px; box-sizing:border-box; transition: all 300ms ease-out 0s; z-index:1; min-height:302px;}
.blue:nth-child(3n+2){ background:#404041;}
.blue:hover{ box-shadow:0 0 6px #000; z-index:2; -webkit-transform:scale(1.05);	-moz-transform:scale(1.05); transform:scale(1.05);}
#banner_bottom h2{ font:400 20px/22px 'Raleway', sans-serif; color:#fff; text-transform:uppercase; padding:15px 0 0;}
#banner_bottom p{ font:400 14px/20px 'Open Sans', sans-serif; color:#fff; padding:15px 0 0;}
#content .sevice_list > p { padding: 0 !important;}
#content{ padding:0 0 0;}
#content h1{ font:300 46px/48px 'Raleway', sans-serif; color:#000; padding:15px 0 0; text-transform:uppercase;  }
#content h3{ font:300 20px/22px 'Raleway', sans-serif; color:#000; padding:15px 0 0; text-transform:uppercase;  }
#content p{ font:400 14px/20px 'Open Sans', sans-serif; color:#404041; padding:15px 0 0;}
#content h6{ font:300 16px/18px 'Open Sans', sans-serif; color:#000; padding:15px 0 0;}

#content_top{ padding:30px 0 0;}
.top_gap{ padding:35px 0 0;}
.service_sec{ background:#ededed; padding:20px 0;}
.list_holder{ padding:30px 0;}
/*.sevice_list{ width:20%; float:left; background:#000; position:relative;}
.service_text{ position:absolute; left:0; right:0; bottom:0; padding:20px 0;}
#content .service_text h3{ font:400 18px/20px 'Raleway', sans-serif; color:#fff; text-align:center;}
.sevice_list:nth-child(even){ background:#0674bb;}*/
.sevice_list:nth-child(5n+1){ clear:left;}
/*.sevice_list img{ opacity:0.3;}
.sevice_list:hover{ box-shadow:0 0 6px #000; z-index:2; -webkit-transform:scale(1.05);	-moz-transform:scale(1.05); transform:scale(1.05);}*/
#testimonail{ background:#33a4f0; padding:85px 0 90px; text-align:center;}
#content #testimonail h1{ background:url(images/header_bg.png) no-repeat 50% 100%; color:#fff; padding:15px 0;}
#content #testimonail p{ font:300 17px/22px  'Raleway', sans-serif; color:#fff; padding:25px 0 0;}
#testimonail h4{ font:400 24px/26px  'Raleway', sans-serif; color:#fff; padding:15px 0 0; }
.job{ background:#0674bb; padding:32px 0;}
.call{ font:700 29px/32px  'Raleway', sans-serif; color:#fff; padding:15px 0 0; text-transform:uppercase;}
a.get{ background:#033a5d; font:400 22px/53px 'Raleway', sans-serif; color:#fff; padding:0 20px; display:inline-block; text-transform:capitalize;}
footer{ background:url(images/footer_bg.jpg) no-repeat 50% 0; background-size:cover; padding:40px 0;}
footer h1{ font:300 46px/48px 'Raleway', sans-serif; color:#fff;  background:url(images/header_bg.png) no-repeat 50% 100%; color:#fff; padding:15px 0;}
.frm_sec{ width:80%; margin:30px auto;}
.footer_bottom{ padding:30px 0 0; border-top:solid 1px #fff;}
.ftr_sec{ width:23%; float:left; box-sizing:border-box; min-height:190px;}
.ftr_sec:nth-child(4n+2){ width:20%;}
.ftr_sec:nth-child(4n+4){ width:33%;}
.ftr_sec+.ftr_sec{ padding:0 2%; border-left:solid 1px #626262;}
#ftr-logo{ padding:0 0 15px;}
.footer_bottom p{ font:400 14px/16px 'Raleway', sans-serif; color:#626262; padding:0 0 15px;}
.social{ padding:30px 0 0;}
.social ul li{ float:left; padding:0 5px 0 0;}
.ftr_sec ul li{}
.ftr_sec ul li a{ font:400 14px/16px 'Open Sans', sans-serif; color:#626262; display:block; padding:0 0 8px;}
.footer_bottom h2{ font:700 16px/18px 'Open Sans', sans-serif; color:#fff; padding:0 0 10px;}


#content .aboutsec h4{ font:400 20px/24px 'Open Sans', sans-serif; color:#fff; padding:15px 0 0;}
#content .aboutsec p{ color:#fff;}
#content .aboutsec h1{  background:url(images/header_bg.png) no-repeat 0 100%; color:#fff; padding:15px 0;}
#content .aboutsec2 h4{ font:400 20px/24px 'Open Sans', sans-serif; color:#fff; padding:15px 0 0;}
#content .aboutsec2 p{ color:#fff;}
#content .aboutsec2 h1{  background:url(images/header_bg.png) no-repeat 50% 100%; color:#fff; padding:15px 0; text-align:center;}
#content .aboutsec3 h4{ font:400 20px/24px 'Open Sans', sans-serif; color:#fff; padding:15px 0 0;}
#content .aboutsec3 p{ color:#fff;}
#content .aboutsec3 h1{  background:url(images/header_bg.png) no-repeat 0 100%; color:#fff; padding:15px 0;}
#content .aboutsec4 h4{ font:400 20px/24px 'Open Sans', sans-serif; color:#fff; padding:15px 0 0;}
#content .aboutsec4 p{ color:#fff;}
#content .aboutsec4 h1{  background:rgba(0, 0, 0, 0) url("images/line.png") no-repeat scroll 50% 100%; color:#fff; padding:15px 0; }
#steps_sec{ background:#f7f6f6; padding:30px 0;}
.thumb{ width:33.3%; float:left; position:relative; text-align:center; padding:0 2%; box-sizing:border-box; margin:30px 0 0;}
.circle{ width:214px; height:214px; border-radius:100%; margin:0 auto;}
.circle img{ border-radius:100%;}
.thumb + .thumb::before {background: rgba(0, 0, 0, 0) url("images/icon5.png") no-repeat scroll 50% 100%;content: "";height:181px;left: -42px;position: absolute;right: 0;top: 9px;
width: 89px;z-index: 9999;}

#wpadminbar ul:after{ clear:inherit; }



svg.icon.icon-angle-down{display: none;}

.sevice_list{ width:20%; float:left;  position:relative; display:block; overflow:hidden;}
.overlay{ background:rgba(0, 0, 0, 0.8); position:absolute; width:100%; height:100%; top:0;}
.service_text{ position:absolute; left:0; right:0; bottom:0; padding:20px 0;}
#content .service_text h3{ font:400 18px/20px 'Raleway', sans-serif; color:#fff; text-align:center; text-transform:capitalize;}
.sevice_list:hover .overlay{ opacity:0;transition: all 300ms ease-out 0s;}
.sevice_list:nth-child(even) .overlay{ background:rgba(6, 116, 187, 0.8);}
.sevice_list:hover img{ -ms-transform: scale(1.2,1.2);-webkit-transform: scale(1.2,1.2);  transform: scale(1.2,1.2); }

@media only screen and (max-width: 1198px) {
#banner_text{ width:1000px;}
#banner_bottom{ margin:-24px 0 0;}
a.get{ padding:0 7px;}
.thumb + .thumb::before{ display:none;}
}
@media only screen and (max-width: 990px) {
#banner_text{ width:748px;}
#banner_text h1{ font-size:32px; line-height:60px;}
#banner_text h2{ font-size:27px; line-height:29px;}
.call{ font-size:18px; line-height:20px;}
a.get{ font-size:16px;}
.job{ padding:12px 0;}
.ftr_sec ul li a{ font-size:12px;}
.frm_sec{ width:100%;}
.blue{ padding:20px 16px; min-height:369px;}
.thumb{ padding:0 1%;}

}
@media only screen and (max-width: 740px) {
#banner_text{ width:460px;}
#navigation{ position:relative; margin:30px 0 0;}
#navbtn{ display:block; background:url(images/navigation.png) no-repeat 0 0 #fff; width:38px; height:27px; font-size:0; cursor:pointer; border-radius:5px; border:solid 1px #ccc; }
.nav-menu{ display:none;position:absolute; top:100%; right:0; width:280px; background:#fff; box-shadow:0 0 6px #999; z-index:999;}
.nav-menu li{ float:none;}
.nav-menu li+li{ border-top:1px solid #035e8d;}
.nav-menu li > a{ font:normal 16px/40px Arial, Helvetica, sans-serif;}
.nav-menu .sub-menu{ position:relative; margin:0 3px;}
.nav-menu .sub-menu .sub-menu{ left:0; margin:0 5px;}
.nav-menu .sub-menu li{ float:none;}
.nav-menu li:hover > .sub-menu{ display:none;}
#banner_bottom{ margin:0;}
.blue{ width:100%; float:none; min-height:inherit;}
#banner_text img{ width:50%;}
#banner_text h1{ font-size:11px; line-height:22px;}
#banner_text h2{ font-size:11px; line-height:14px; padding:8px 20px;}

.sevice_list{ width:50%; float:left;}
.sevice_list:nth-child(5n+1){ clear:none;}
#content .service_text h3{ font-size:15px;}
.ftr_sec{ width:100%; float:none; min-height:inherit; padding:20px 0 0;}
.ftr_sec + .ftr_sec{ border:none; padding:20px 0 0;}
.ftr_sec:nth-child(4n+2){width:100%;}
.ftr_sec:nth-child(4n+4){width:100%;}
.ftr_sec ul li a{ font-size:16px;}
.call{ font-size:16px; line-height:21px; padding:0 0 15px;}
a.get{ padding:0 20px;}
.thumb{ width:100%; float:none;}
#content .aboutsec4 h1 {
    background: rgba(0, 0, 0, 0) url("images/line.png") no-repeat scroll 50% 100%;
}
@media only screen and (min-width: 740px) {
.nav-menu{ display:block !important;}
}
@media only screen and (max-width: 450px) {
#banner_text{ width:310px;}
.sevice_list{ width:100%; float:none;}
#content h1{ font-size:30px;}
.ftr_sec ul li a{ font-size:15px;}

}


.testimonial_rotator_quote {
    color: #fff !important;
    font-family: inherit;
}