@charset "utf-8";

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

Name: style.css
Version: 1.0

-------------------------------------
Table of contents

    01. Google font
    02. Reset
    03. Typography
    04. Margin
    05. Color
    06. Padding
    07. Font Size
    08. Line Height
    09. Button
    10. Hover
    11. Banner
    12. Custom
*/

/* ===================================
    Google font
====================================== */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,700,800,900');

/* ===================================
    Reset
====================================== */
body{color:#777; font-size: 16px; line-height: 24px; font-weight: 400; font-family: 'Muli', sans-serif; background-color: #f1f0f6}
.carousel-inner {overflow: hidden}
.navbar {margin-bottom: 0}
ul{margin: 0; padding: 0; list-style-type:none}
a:hover{text-decoration: none; color: #ff0000}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{margin: 0}
p{margin-bottom: 0;}
a{text-decoration: none; color: #8d97ad}
figure{margin: 0}
.border_top{border-top: 1px solid #bacddb}

/* ===================================
    Typography
====================================== */
/*font family*/
.muli_font {font-family: 'Muli', sans-serif;}
.open_sans_font  {font-family: 'Open Sans', sans-serif}
/* ===================================
    Border
====================================== */

/* ===================================
    Margin
====================================== */
.margin_0_auto{margin: 0 auto}
/*margin*/
.margin_lr_30       {margin: 0 30px}
/*Margin Bottom*/
.margin_bottom_5    {margin-bottom: 5px}
.margin_bottom_10   {margin-bottom: 10px}
.margin_bottom_15   {margin-bottom: 15px}
.margin_bottom_20   {margin-bottom: 20px}
.margin_bottom_25   {margin-bottom: 25px}
.margin_bottom_26   {margin-bottom: 26px}
.margin_bottom_30   {margin-bottom: 30px}
.margin_bottom_35   {margin-bottom: 35px}
.margin_bottom_40   {margin-bottom: 40px}
.margin_bottom_50   {margin-bottom: 50px}
.margin_bottom_55   {margin-bottom: 55px}
.margin_bottom_60   {margin-bottom: 60px}
.margin_bottom_65   {margin-bottom: 65px}
.margin_bottom_70   {margin-bottom: 70px}
.margin_bottom_75   {margin-bottom: 75px}
.margin_bottom_80   {margin-bottom: 80px}
.margin_bottom_85   {margin-bottom: 85px}
.margin_bottom_90   {margin-bottom: 90px}
.margin_bottom_95   {margin-bottom: 95px}
.margin_bottom_100  {margin-bottom: 100px}

/*Margin Right*/
.margin_right_14   {margin-right: 14px}
.margin_right_10   {margin-right: 10px}
.margin_right_15  {margin-right: 15px}
.margin_right_20   {margin-right: 20px}
.margin_right_60   {margin-right: 60px}

/*Margin Left*/
.margin_left_14    {margin-left: 14px}
.margin_left_10   {margin-left: 10px}
.margin_left_15   {margin-left: 15px}
.margin_left_20   {margin-left: 20px}
.margin_left_30   {margin-left: 30px}
.margin_left_50   {margin-left: 50px}
.margin_left_60   {margin-left: 60px}
.margin_left_100  {margin-left: 100px}

/*Margin Top*/
.margin_top-2   {margin-top: -2px}
.margin_top_10  {margin-top: 10px}
.margin_top_15  {margin-top: 15px}
.margin_top_20  {margin-top: 20px}
.margin_top_25  {margin-top: 25px}
.margin_top_30  {margin-top: 30px}
.margin_top_40  {margin-top: 40px}
.margin_top_35  {margin-top: 35px}
.margin_top_50  {margin-top: 50px}
.margin_top_60  {margin-top: 60px}
.margin_top_80  {margin-top: 80px}
.margin_top_90  {margin-top: 90px}
.margin_top_95  {margin-top: 95px}
.margin_top_100 {margin-top: 100px}
.margin_top_150 {margin-top: 150px}
.margin_top-170 {margin-top: -170px}

/* ===================================
     Color
====================================== */
/*Colors*/
.color_ff0000   {color: #ff0000}
.color_ff9900   {color: #ff9900}
.color_fff      {color: #fff}
.color_000      {color: #000}
.color_e73747   {color: #e73747}


/*Background Colors*/
.bg_fff {background-color: #fff}
.bg_ff9900  {background-color: #ff9900}
.bg_ff0000  {background-color: #ff0000}

/* ===================================
    padding
====================================== */

/*padding*/
.no_padding{padding: 0}
.padding_tb_20  {padding: 20px 50px}
/*padding top*/
.padding_top_5  {padding-top: 5px}
.padding_top_8  {padding-top: 8px}
.padding_top_10 {padding-top: 10px}
.padding_top_13 {padding-top: 13px}
.padding_top_15	{padding-top: 15px}
.padding_top_20 {padding-top: 20px}
.padding_top_21 {padding-top: 21px}
.padding_top_25 {padding-top: 25px}
.padding_top_30 {padding-top: 30px}
.padding_top_35 {padding-top: 35px}
.padding_top_40 {padding-top: 40px}
.padding_top_45	{padding-top: 45px}
.padding_top_50 {padding-top: 50px}
.padding_top_60 {padding-top: 60px}
.padding_top_70 {padding-top: 70px}
.padding_top_75 {padding-top: 75px}
.padding_top_80 {padding-top: 80px}
.padding_top_90 {padding-top: 90px}
.padding_top_95 {padding-top: 95px}
.padding_top_100{padding-top: 100px}
.padding_top_105{padding-top: 105px}
.padding_top_140{padding-top: 140px}
.padding_top_120{padding-top: 120px}
.padding_top_180{padding-top: 180px}
.padding_top_200{padding-top: 200px}
.padding_top_300{padding-top: 300px}

/*padding bottom*/
.padding_bottom_5   {padding-bottom: 5px}
.padding_bottom_8   {padding-bottom: 8px}
.padding_bottom_10	{padding-bottom: 10px}
.padding_bottom_13  {padding-bottom: 13px}
.padding_bottom_15	{padding-bottom: 15px}
.padding_bottom_17  {padding-bottom: 17px}
.padding_bottom_20  {padding-bottom: 20px}
.padding_bottom_21  {padding-bottom: 21px}
.padding_bottom_25  {padding-bottom: 25px}
.padding_bottom_30  {padding-bottom: 30px}
.padding_bottom_35  {padding-bottom: 35px}
.padding_bottom_40  {padding-bottom: 40px}
.padding_bottom_50  {padding-bottom: 50px}
.padding_bottom_45	{padding-bottom: 45px}
.padding_bottom_55  {padding-bottom: 55px}
.padding_bottom_60  {padding-bottom: 60px}
.padding_bottom_65  {padding-bottom: 65px}
.padding_bottom_70  {padding-bottom: 70px}
.padding_bottom_75  {padding-bottom: 75px}
.padding_bottom_80  {padding-bottom: 80px}
.padding_bottom_85  {padding-bottom: 85px}
.padding_bottom_85  {padding-bottom: 85px}
.padding_bottom_90  {padding-bottom: 90px}
.padding_bottom_100 {padding-bottom: 100px}
.padding_bottom_120 {padding-bottom: 120px}
.padding_bottom_200 {padding-bottom: 200px}
.padding_bottom_300 {padding-bottom: 300px}
.padding_bottom_150 {padding-bottom: 150px}

/*padding left*/
.padding_left_0     {padding-left: 0}
.padding_left_10    {padding-left: 10px}
.padding_left_15    {padding-left: 15px}
.padding_left_20    {padding-left: 20px}
.padding_left_25    {padding-left: 25px}
.padding_left_30	{padding-left: 30px}
.padding_left_40    {padding-left: 40px}
.padding_left_50    {padding-left: 50px}
.padding_left_55    {padding-left: 55px}
.padding_left_58    {padding-left: 58px}
.padding_left_60    {padding-left: 60px}
.padding_left_70    {padding-left: 70px}
.padding_left_75    {padding-left: 75px}
.padding_left_80    {padding-left: 80px}
.padding_left_85    {padding-left: 85px}
.padding_left_95    {padding-left: 95px}
.padding_left_100   {padding-left: 100px}

/*padding right*/
.padding_right_0    {padding-right: 0}
.padding_right_10   {padding-right: 10px}
.padding_right_15   {padding-right: 15px}
.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_55   {padding-right: 55px}
.padding_right_58   {padding-right: 58px}
.padding_right_60   {padding-right: 60px}
.padding_right_65   {padding-right: 65px}
.padding_right_70   {padding-right: 70px}
.padding_right_75   {padding-right: 75px}
.padding_right_80   {padding-right: 80px}
.padding_right_105  {padding-right: 105px}

/* ===================================
     Font Size
====================================== */
/*Font Size*/
.font_size_12   {font-size: 12px}
.font_size_14   {font-size: 14px}
.font_size_16   {font-size: 16px}
.font_size_18   {font-size: 18px}
.font_size_20   {font-size: 20px}
.font_size_22   {font-size: 22px}
.font_size_24   {font-size: 24px}
.font_size_26   {font-size: 26px}
.font_size_28   {font-size: 28px}
.font_size_30   {font-size: 30px}
.font_size_32   {font-size: 32px}
.font_size_34   {font-size: 34px}
.font_size_36   {font-size: 36px}
.font_size_38   {font-size: 38px}
.font_size_40   {font-size: 40px}
.font_size_42   {font-size: 42px}
.font_size_44   {font-size: 44px}
.font_size_48   {font-size: 48px}
.font_size_60   {font-size: 60px}
.font_size_64   {font-size: 64px}
.font_size_50   {font-size: 50px}
.font_size_70   {font-size: 70px}
.font_size_80   {font-size: 80px}
.font_size_90   {font-size: 90px}

/*Font weight*/
.font_weight_300{font-weight: 300}
.font_weight_400{font-weight: 400}
.font_weight_500{font-weight: 500}
.font_weight_600{font-weight: 600}
.font_weight_700{font-weight: 700}
.font_weight_800{font-weight: 800}
.font_weight_900{font-weight: 900}
/* ===================================
     Line Height
====================================== */
/*Line Height*/
.line_height_18    {line-height: 18px}
.line_height_22    {line-height: 22px}
.line_height_24    {line-height: 24px}
.line_height_25    {line-height: 25px}
.line_height_28    {line-height: 28px}
.line_height_30    {line-height: 30px}
.line_height_34    {line-height: 34px}
.line_height_36    {line-height: 36px}
.line_height_40    {line-height: 40px}
.line_height_42    {line-height: 42px}
.line_height_48    {line-height: 48px}
.line_height_50    {line-height: 50px}
.line_height_54    {line-height: 54px}
.line_height_65    {line-height: 65px}
.line_height_80    {line-height: 80px}
.line_height_82    {line-height: 82px}
/* ===================================
     Button
====================================== */
.banner_btn{display: inline-block; font-size: 16px; line-height: 24px; color: #fff; font-weight: 400; font-family: 'Muli', sans-serif; text-transform: uppercase; background-color: #ff0000; padding: 15px 50px; border: 2px solid #ff0000}
.banner_btn.active{display: inline-block; font-size: 16px; line-height: 24px; color: #fff; font-weight: 400; font-family: 'Muli', SansSerif; text-transform: uppercase; background-color: transparent; border: 2px solid #fff; padding: 15px 50px; margin-left: 20px}
.btn_live_chat{display: inline-block; font-size: 18px; line-height: 24px; font-weight: 400; color: #fff; font-family: 'Muli', sans-serif; background-color: #ff0000; padding: 10px 30px}
.btn_hosting_plan_box{display: inline-block; font-size: 16px; line-height: 24px; font-weight: 400; color: #fff; font-family: 'Muli', sans-serif; background-color: #ff0000; padding: 15px 40px; text-transform: uppercase}
.hosting_plan_box.active .btn_hosting_plan_box{display: inline-block; font-size: 16px; line-height: 24px; font-weight: 400; color: #000; font-family: 'Muli', sans-serif; background-color: #fff; padding: 15px 40px; text-transform: uppercase}
.btn_feature_box{font-size: 16px; line-height: 24px; font-weight: 400; color: #fff; text-transform: uppercase; background-color: #ff0000; padding: 15px 40px; display: inline-block}
/* ===================================
         Hover
====================================== */
.menu_bar li a:hover{color: #ff0000}
.btn_live_chat:hover{background-color: #fff; color: #ff0000}
.banner_btn:hover{background-color: #fff; color: #ff0000; border: 2px solid #fff}
.banner_btn.active:hover{background-color: #ff0000; border: 2px solid #ff0000; color: #fff}
.btn_hosting_plan_box:hover, .hosting_plan_box.active .btn_hosting_plan_box:hover, .btn_feature_box:hover{background-color: #ff9900; color: #000}
.search_area:hover .search_btn{background-color: #ff9900 !important; color: #000 !important; border: 1px solid #ff9900}
.social_links li a:hover{background-color: #fff; border: 1px solid #fff}
/* ===================================
       Navigation Bar
====================================== */
.top_navigation{border-bottom: 1px solid #aeb1af}
.menu_bar li a{font-size: 16px; line-height: 24px; font-weight: 400; color: #000; font-family: 'Muli', sans-serif; text-transform: uppercase; padding: 25px 0; margin: 0 15px}

/* ===================================
     Banner
====================================== */
.hero_banner_img{position: relative; background: url("../images/hero_banner.png") no-repeat center; background-size: cover; width: 100%; height: 798px}
.sub_page_banner{position: relative; background: url("../images/sub_page_banner.png") no-repeat center; background-size: cover; width: 100%; height: 798px}
.sub_page_banner01{position: relative; background: url("../images/sub_page_banner01.png") no-repeat center; background-size: cover; width: 100%; height: 798px}
.sub_page_banner02{position: relative; background: url("../images/sub_page_banner02.png") no-repeat center; background-size: cover; width: 100%; height: 798px}
/* ===================================
          Search Domain Section
====================================== */
.bg_search_domain{background: url("../images/bg_search_domain.png") no-repeat center; background-size: cover}
.bg_coa{background: url("../images/bg_coa.png") no-repeat center; background-size: cover}
.bg_contact_us{background: url("../images/bg_contact_us.png") no-repeat center; background-size: cover}
.popular_tlds li{display: inline-block; padding: 0 50px; border-right: 1px solid #6d6a75}
.popular_tlds li:last-child{border-right: none}
.domain_name{font-size: 30px; line-height: 24px; color: #fff; font-weight: 400; font-family: 'Muli', sans-serif; margin-bottom: 10px}
.domain_price{font-size: 16px; line-height: 24px; color: #ff9900; font-weight: 400; font-family: 'Muli', sans-serif}
.search_domain{position: relative; padding-top: 50px; padding-bottom: 50px}
.search_domain:before{position: absolute; content: ""; background-color: #ff0000; width: 50%; left: 0; top: 0; height: 100%}
.search_area{width: 100%; height: 94px; position: relative}
.banner_search_box .text_field{width: 100%; font-size: 18px; line-height: 36px; height: 75%; padding: 0 20px; box-shadow: 0 0 5px 0 rgba(0,0,0,.0); border: 1px solid #dfe5e5; font-weight: 400; color: #666; margin: 0 auto; float: none; border-radius: 32px}
.banner_search_box .search_btn{position: absolute; right: 8px; top: 9px; padding: 19px 70px !important; font-size: 14px !important; font-weight: 700; color: #fff !important; transition-duration: 0.5s; line-height: 1; border: 1px solid #ff0000; background-color: #ff0000 !important; letter-spacing: 1px; border-radius: 32px}
/* ===================================
      Hosting Plans Section
====================================== */
.hosting_plan_box{padding: 30px 25px; border: 1px solid #777; text-align: left}
.hosting_plan_heading{font-size: 30px; line-height: 36px; font-weight: 400; color: #000; font-family: 'Muli', sans-serif; margin-bottom: 50px; position: relative}
.hosting_plan_heading:before{position: absolute; content: ""; background-color: #ff9900; height: 4px; width: 40%; left: 0; bottom: -25px}
.hosting_plan_listing{margin-bottom: 15px}
.hosting_plan_listing li{font-size: 16px; line-height: 30px; color: #333; font-weight: 600; padding-left: 15px; position: relative}
.hosting_plan_listing li:before{position: absolute; content: ""; width: 8px; height: 8px; background-color: #ff0000; border-radius: 100%; left: 0; top: 10px}
.hosting_plan_price{font-size: 22px; line-height: 50px; font-weight: 400; color: #ff0000; font-family: 'Muli', sans-serif; margin-bottom: 15px}
.hosting_plan_price span{font-size: 42px}


.hosting_plan_box.active{padding: 30px 25px; background-color: #ff0000; text-align: left; border: 1px solid #ff0000}
.hosting_plan_box.active .hosting_plan_heading{font-size: 30px; line-height: 36px; font-weight: 400; color: #fff; font-family: 'Muli', sans-serif; margin-bottom: 50px; position: relative}
.hosting_plan_heading:before{position: absolute; content: ""; background-color: #ff9900; height: 4px; width: 30%; left: 0; bottom: -25px}
.hosting_plan_box.active .hosting_plan_listing{margin-bottom: 15px}
.hosting_plan_box.active .hosting_plan_listing li{font-size: 16px; line-height: 30px; color: #fff; font-weight: 600; padding-left: 15px; position: relative}
.hosting_plan_box.active .hosting_plan_listing li:before{position: absolute; content: ""; width: 8px; height: 8px; background-color: #fff; border-radius: 100%; left: 0; top: 10px}
.hosting_plan_box.active .hosting_plan_price{font-size: 22px; line-height: 50px; font-weight: 400; color: #ff9900; font-family: 'Muli', sans-serif; margin-bottom: 15px}
.hosting_plan_price span{font-size: 42px}
/* ===================================
      Feature Section
====================================== */
.service_box{background-color: #ff0000; padding: 60px 25px}
.service_box_heading{font-size: 30px; line-height: 36px; font-weight: 400; color: #fff; font-family: 'Muli', sans-serif; margin-bottom: 20px}
.inner_service_box{width: 115px; height: 115px; border: 1px solid #ff0000; border-radius: 100%; display: table; margin:  0 auto; margin-bottom: 20px}
.inner_service_box figure{display: table-cell; vertical-align: middle; text-align: center}
.service_heading{font-size: 18px; line-height: 24px; font-weight: 400; color: #000}
.feature_heading{font-size: 30px; line-height: 36px; font-weight: 400; color: #000; margin-bottom: 15px}
/* ===================================
      Support Section
====================================== */

/* ===================================
    Testimonial Section
====================================== */
.bg_testimonial{background: url("../images/bg_testimonial.png") no-repeat center; background-size: cover}
.testimonial_box{background-color: #fff; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,.25); padding: 20px}
/* ===================================
      Footer Section
====================================== */
.footer_heading{font-size: 18px; line-height: 24px; font-weight: 700; color: #000; margin-bottom: 20px}
.footer_listing li{font-size: 14px; line-height: 26px; font-weight: 400; color: #777}
/* ===================================
      Copyright Section
====================================== */
.bg_copyright{background: url("../images/copyright_bg.png") no-repeat center; background-size: cover}
.social_links li{display: inline-block}
.social_links li a{width: 30px; height: 30px; background-color: transparent; border: 1px solid #ff9900; border-radius: 100%; display: table}
.social_links li a i{display: table-cell; vertical-align: middle; text-align: center; font-size: 18px; color: #ff9900}
/* ===================================
          COA Section
====================================== */
.coa_box{width: 115px; height: 115px; border: 2px solid #fff; border-radius: 100%; display: table; float: left}
.coa_box figure{display: table-cell; vertical-align: middle; text-align: center}
.content_box{float: left; text-align: left; padding: 10px 0 0 20px; width: 65%}

.contact_fields{padding: 15px; border: 1px solid #d4d4d4}
.contact_form_btn_submit{font-size: 16px; line-height: 24px; color: #fff; font-weight: 500; background-color: #ff0000; padding: 15px 50px; border: none; text-transform: uppercase}




@media only screen and (min-width: 992px){
    .menubar li:hover .dropdown_menu {display: block}
    .menubar li:hover .dropdown_submenu {display: block}
    .menubar li:hover .dropdown_company {display: block}

}