﻿
/*
    ---------------------------------------------
    Project Name :  Bofin Technologies Website
    Author       :  Pradeep Lakshmanan
    Date Created :  21/04/2014
    Version      :  v1
    ---------------------------------------------
    */

body { font-family: Arial; }
* { outline: none; border: none; margin: 0; }
.container { width: 1200px; margin: 0 auto; }
.clearfix { clear: both; }
P { font-size: 13px; color: #666666; padding:10px 20px 0 0; text-align:justify }

/* Header Section 
    ----------------*/
header { height: 150px; width: 100%;  }
    header .logo { width: 15%; height: inherit; float: left;  }
        header .logo img { margin-top: 15px; margin-left: 15px; }
    header .navigation_Sec { width: 85%;  height: inherit; float: left; }
    header .topnav { height: 33px; margin-left: 80%;  }
        header .topnav ul { }
            header .topnav ul li { display: inline; }
                header .topnav ul li::after { content: '|'; padding-left: 4px; color: #3594c5; }
                header .topnav ul li:last-child::after { content: ''; }
                header .topnav ul li a { text-decoration: none; font-size: 12px; color: #444444; }

    /*Header Row2_Section
       ------------------- */
    header .Row_2 { height: 53px; }
    header .SocialIcons { float: left; margin-left: 55%; margin-top: 10px; }
        header .SocialIcons ul { }
            header .SocialIcons ul li { display: inline; list-style: none; }

/*Header Search Section
       ---------------------- */
.Search { width: 252px; height: 32px; background-color: #ffffff; float: right; border: 1px solid #3594c5; }
    .Search .Search_lbl { width: 73px; background-color: #3594c5; height: inherit; float: left; }
        .Search .Search_lbl span { margin: 6px 0 0 8px; position: absolute; color: #ffffff; }
    .Search .SearchBox { width: 153px; float: left; height: 30px; border: none; text-indent: 5px; }
    .Search .Searchbutton { float: left; margin: 4px 0 0 0; width: 25px; height: 22px; background-image:url(../images/Search_Button.png) }

/*  Navigation Section
          -------------------  */

.main_Nav { height: 54px; background-color: #3594c5; border-radius:8px 0 0 8px;}
    .main_Nav ul { height: 56px; margin-left: 35px; }
        .main_Nav ul li { display: inline-block; padding: 16px 15px 20px 15px; }
            .main_Nav ul li a { text-decoration: none; color: white; }
            .main_Nav ul li:hover { background-color: #5f5f5f; }


/* Header Banner Section 
    ----------------------*/
.B-headerbanner { height: 471px; width: 100%; background-color: #5f5f5f; }
    .B-headerbanner img { width: 100%; height: 471px; }
    .B-headerbanner .Slide_1 { position: relative; }
    .B-headerbanner .Caption_1 { position: absolute; top: 300px; left: 100px; width: 237px; height: 55px; background-color: rgba(77,77,77,.9); }
    .B-headerbanner .Caption_2 { position: absolute; top: 355px; left: 100px; width: 483px; height: 55px; background-color: rgba(53,148,197,.9); }
    .B-headerbanner .Caption_1 h3 { padding: 15px 0 0 15px; color: white; font-weight: 300; }
    .B-headerbanner .Caption_2 h3 { padding: 15px 0 0 15px; color: white; font-weight: 300; }

/* Features Section 
    ----------------------*/
.B-features_section { height: 362px; width: 100%; }
    .B-features_section .Features { width: 270px; height: 334px; margin: 0 15px 0 15px; float: left; margin-top: 15px; border-bottom: 4px solid #3594c5; }
        .B-features_section .Features .Feature_Icon { width: 100%; height: 205px; background-color: #3594c5; }
            .B-features_section .Features .Feature_Icon img { padding: 35px 0 0 80px; }
        .B-features_section .Features h3 { text-align: center; padding: 20px 0 0 0; color: #3594c5; }
        .B-features_section .Features p { padding: 15px 0 0 0; text-align: center; }

/* Features Caption Section 
    ----------------------*/
.B-Caption_Section { height: 100px; width: 100%; margin-top: 10px; }
    .B-Caption_Section .B-Caption_Section_Icon { float: left; width: 85px; background-color: #3594c5; height: 100px; margin-left: 15px; }
        .B-Caption_Section .B-Caption_Section_Icon img { padding: 25px 0 0 15px; }
    .B-Caption_Section .B-Caption_Section_Content { float: left; width: 900px; background-color: #e2e1e1; height: 100px; }
        .B-Caption_Section .B-Caption_Section_Content h4 { color: #3594c5; padding: 15px 0 10px 15px; }
        .B-Caption_Section .B-Caption_Section_Content p { padding: 0 20px 0 15px; }
    .B-Caption_Section .B-Caption_Section_Button { float: left; width: 185px; background-color: #3594c5; height: 100px; margin-right: 15px; }
        .B-Caption_Section .B-Caption_Section_Button h4 { text-align: center; padding: 30px 15px 0 10px; color: white; font-weight: 800; }

/* Features Heading Section 
    ----------------------*/
.B-Features_Heading { height: 73px; width: 100%; margin-top: 15px; }
    .B-Features_Heading .Heading_Box { width: 121px; height: 73px; background-color: #3594c5; margin-left: 15px; float: left; }
        .B-Features_Heading .Heading_Box h4 { color: white; font-weight: 700; padding: 25px 0 0 0; text-align: center; }
    .B-Features_Heading .Heading_rgt { width: 1049px; height: 48px; background-color: #e2e1e1; float: right; margin-right: 15px; margin-top: 25px; }

/* Features List Items Section 
   --------------------------*/

.B-Feature_ListItems { height: 261px; width: 100%; margin-top: 15px; }
    .B-Feature_ListItems .List_columns { width: 370px; height: 261px; margin: 0 15px 0 15px; background-color: #e2e1e1; float: left; }

        .B-Feature_ListItems .List_columns .col_1 { }
            .B-Feature_ListItems .List_columns .col_1 ul { margin-left: 20px; margin-top: 10px; }
                .B-Feature_ListItems .List_columns .col_1 ul li { list-style-image: url(../images/List_Style.png); font-size: 20px; padding: 20px 0 0 10px; }
                    .B-Feature_ListItems .List_columns .col_1 ul li a { text-decoration: none; color: #3594c5; vertical-align: middle; }

    .B-Feature_ListItems .col_2 { }
        .B-Feature_ListItems .col_2 ul { padding: 0; }
            .B-Feature_ListItems .col_2 ul li { list-style: none; margin: 0; }
        .B-Feature_ListItems .col_2 .items { padding: 20px 0 0 20px; }
            .B-Feature_ListItems .col_2 .items .Icon_sec { width: 54px; height: 51px; float: left; }
            .B-Feature_ListItems .col_2 .items .Content_sec { width: 270px; float: left; padding-left: 25px; }
                .B-Feature_ListItems .col_2 .items .Content_sec h4 { color: #3594c5; }

/* Our Clients Section 
   --------------------------*/

.B-Our_Clients { height: 71px; margin-top: 15px; }
    .B-Our_Clients .Client_Heading { width: 200px; height: 71px; background-color: #3594c5; float: left; margin-left: 15px; }
        .B-Our_Clients .Client_Heading h4 { color:white; padding:25px 0 0 50px; }
    .B-Our_Clients .Client_Logo { float: left; width: 970px; height: 69px; border: 1px solid #3594c5; }


/* Footer Section 
   --------------------------*/
footer { height: 370px; width: 100%; background-color: #3594c5; margin-top: 15px; }
    footer .Footer_col_1 { width: 273px; margin-left: 15px; height: inherit; float: left; }
        footer .Footer_col_1 h4 { color: white; font-weight: 700; text-align: center; padding-top: 30px; }
        footer .Footer_col_1 .col1_head { width: 100%; height: 79px; }
        footer .Footer_col_1 .Col_1_content { width: 100%; height: 290px; background-color: #4c4c4c; }
            footer .Footer_col_1 .Col_1_content ul { padding: 30px 0 0 65px; }
                footer .Footer_col_1 .Col_1_content ul li { color: white; padding: 13px 0 0 10px; }
                    footer .Footer_col_1 .Col_1_content ul li a { text-decoration: none; color: white; }

    footer .Footer_col_2 { width: 533px; float: left; height: inherit; }
        footer .Footer_col_2 .col2_head { width: 100%; height: 79px; background-color: #4c4c4c; }
            footer .Footer_col_2 .col2_head h4 { color: white; font-weight: 700; text-align: center; padding-top: 30px; }

        footer .Footer_col_2 .Col_2_content_Left { width: 200px; float: left; }
            footer .Footer_col_2 .Col_2_content_Left ul { margin: 45px 0 0 20px; }
                footer .Footer_col_2 .Col_2_content_Left ul li { color: white; padding: 15px 0 0 0; }
                    footer .Footer_col_2 .Col_2_content_Left ul li a { text-decoration: none; color: white; }

        footer .Footer_col_2 .Col_2_content_Rgt { width: 300px; float: left; }
            footer .Footer_col_2 .Col_2_content_Rgt ul { margin: 45px 0 0 0; }
                footer .Footer_col_2 .Col_2_content_Rgt ul li { color: white; padding: 15px 0 0 0; }
                    footer .Footer_col_2 .Col_2_content_Rgt ul li a { text-decoration: none; color: white; }

    footer .Footer_col_3 { width: 350px; margin-right: 15px; float: left; height: inherit; }
        footer .Footer_col_3 .col3_head { width: 100%; height: 79px; background-color: #4c4c4c; }
            footer .Footer_col_3 .col3_head h4 { color: white; font-weight: 700; text-align: center; padding-top: 30px; }
        footer .Footer_col_3 .col3_content h4 { color: white; font-weight: 700; text-align: center; padding-top: 30px; }
        footer .Footer_col_3 .col3_content .address { padding: 25px 0 0 55px; color: white; }


/*   Sub Page Styles 
   ------------------ */
.Subpage_Header_Banner { width:100%; height:200px;background-color:#4c4c4c;margin-top:5px }
    .Subpage_Header_Banner img { width:100%; height:100%; }

    .Subpage_Header_Title {width:100%; height:60px; background-color:#3594c5; margin-top:2px; }
      .Subpage_Header_Title h3 { color:white; padding-top:15px; float:left; }
        .Subpage_Header_Title .breadcrump { float:right; }
            .Subpage_Header_Title .breadcrump ul { margin-top:20px; margin-right:20px}
             .Subpage_Header_Title .breadcrump ul li { display:inline }
                .Subpage_Header_Title .breadcrump ul li a {text-decoration:none; color:white;font-size:13px;  }
                .Subpage_Header_Title .breadcrump ul li {padding:0 0 0 10px; }
                    .Subpage_Header_Title .breadcrump ul li::after { content:'/'; padding-left:10px; color:#ffffff}


/*  About Page Styles 
   -------------------- */
.About_Us_Content { width:769px; float:left; margin:15px 0 15px 0;  }
    .About_Us_Content h2 { color:#3594c5; padding-top:10px }
    .About_Us_Content ul { }
     .About_Us_Content ul li { color:#666666; font-size:13px; padding:10px 10px 0 0; text-align:justify}
.About_Us_Content_Rgt {width:371px; float:left; margin-left:15px; }
    .About_Us_Content_Rgt .slide_sec { width:372px; height:180px; background-color:#40aae6; margin-top:65px; border-radius:5px; }
    .About_Us_Content_Rgt .mission { width:373px; height:152px;  margin-top:50px; border-bottom:1px solid #3594c5 }
        .About_Us_Content_Rgt .mission .Mission_Icon { width:71px; height:70px; float:left  }
        .About_Us_Content_Rgt .mission .mission_Content { width:280px; height:130px; float:left;margin-left:15px }
            .About_Us_Content_Rgt .mission .mission_Content h4 { color:#3594c5 }
            .About_Us_Content_Rgt .mission .mission_Content p {text-align:match-parent }
.About_Us_Content .quote_section { width:100%; height:70px; background-color:#3594c5; margin-top:30px; border-radius:5px; }
    .About_Us_Content .quote_section h4 { color:#ffffff; padding:25px 0 0 20px; font-weight:600; float:left }
    .About_Us_Content .quote_section .btn {width:150px; height:40px; background-color:#4c4c4c; float:left; border-radius:5px; margin:15px 0 0 30px }
        .About_Us_Content .quote_section .btn h5 { color:white; text-align:center; padding:10px 0 0 0; text-decoration:none}
            .About_Us_Content .quote_section .btn h5 a {text-decoration:none; color:white }


/*  Contact Page Styles 
   ----------------------- */
.Contact_map {width:372px; height:308px; float:left; margin:15px 0 15px 15px; }
.Contact_Info {width:372px; float:left; margin:15px 0 15px 15px; }
    .Contact_Info h4 { color:#3594c5; text-align:center }
    .Contact_Info h5 { color:#3594c5; padding:10px 0 10px 25px; }
    .Contact_Info address { font-size:14px; color:#666666; padding:0 0 0 75px; }
.Contact_Form {width:370px; float:left; margin:15px 0 15px 15px; }
    .Contact_Form h4 { color:#3594c5; text-align:center}

.textBox { border:1px solid #3594c5; width:100%;height:35px; margin-top:10px; text-indent:5px; color:#666666}
.text_multiline {width:100%;height:147px; margin-top:10px; text-indent:5px;border:1px solid #3594c5; color:#666666 }


/*  Careers Page Styles 
   ----------------------- */

.careers { width:80%; margin:55px 0 0 30px; }