/*
    Description: 	PHP Ajax Contact Form
    Author: 		InsideLab
    Version: 		1.0
*/

/*	--------------------------------------------------
	:: Body & Container
	-------------------------------------------------- */

/*	body {
	    background-image:url(../Images/BG.png);
	    background-repeat:repeat;
		overflow:scroll;
		line-height:1;
	}    */

    .cf-container {
	    position:relative;
		width:630px;
		margin:0 auto;
		padding:0;
		height:auto;
	}

/*	--------------------------------------------------
	:: Forms Grid
	-------------------------------------------------- */

    .grid-container{
	    width:100%;
		padding:0 25px;
		-webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
    }

    .grid-container .column-one,
    .grid-container .column-two,
    .grid-container .column-three,
    .grid-container .column-four,
    .grid-container .column-five,
    .grid-container .column-six,
    .grid-container .column-seven,
    .grid-container .column-eight,
    .grid-container .column-nine,
    .grid-container .column-ten,
    .grid-container .column-eleven,
    .grid-container .column-twelve{
	    display:inline-block;
	    float:left;
	    margin-left:1%;
	    margin-right:1%;
    }

    .grid-container .column-one { width:6.333%; }
    .grid-container .column-two { width:14.666%; }
    .grid-container .column-three { width:23%; }
    .grid-container .column-four { width:31.333%; }
    .grid-container .column-five { width:39.666%; }
    .grid-container .column-six { width:48%; }
    .grid-container .column-seven { width:56.333%; }
    .grid-container .column-eight { width:64.666%; }
    .grid-container .column-nine { width:73%; }
    .grid-container .column-ten { width:81.333%; }
    .grid-container .column-eleven { width:89.666%; }
    .grid-container .column-twelve { width:98%; }

/*	--------------------------------------------------
	:: Top Bar
	-------------------------------------------------- */

    .top-form-bar {
        height:5px;
        overflow:hidden;
        width:100%;
        margin:15px auto 0 auto;
    }

    .top-form-bar .top-bar{
        height:100%;
        float:left;
    }

    .top-bar-green { background-color:#89bf55; width:100%; }
    .top-bar-blue { background-color:#2DA5DA; width:100%; }

/*	--------------------------------------------------
	:: Form
	-------------------------------------------------- */

    .contact-form {
	    position:relative;
	    display:block;
		width:100%;
	    margin:0;
	    padding:0;
		-webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
	}

/*	--------------------------------------------------
	:: Form Header
	-------------------------------------------------- */

	.contact-form .header{
		position:relative;
	    display:block;
		width:100%;
	    margin:0;
	    padding:10px 0;  /* changed now */
		overflow:hidden;
		background-color:#f5f5f5;
		border-bottom:1px solid #e5e5e5;
		-webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
	}

	.contact-form .header h4 {
        text-align:left;
	    font-style:normal;
	    font-weight:normal;
	    font-family:"Open Sans";
	    font-size:16px;
		color:#777;
        margin:0;
		padding:0;
	}

	.contact-form .header i {
	    font-weight:normal;
		font-style:normal;
		font-size:16px;
		color:#777;
		margin-right:10px;
		vertical-align:baseline;
	}

/*	--------------------------------------------------
	:: Form Section
	-------------------------------------------------- */

	.contact-form .section {
	    position:relative;
	    display:block;
		width:100%;
	    margin:0;
	    padding:30px 0;
		background-color:#f9f9f9;
		-webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
	}

	.contact-form .section .input-group,
	.contact-form .section .select-group,
	.contact-form .section .file-group{
        position:relative;
	    display:block;
    }

	.contact-form .section .input-group input[type="text"],
    .contact-form .section .input-group input[type="email"],
	.contact-form .section .input-group textarea{
	    border:1px solid #ccc;
		padding:10px;
		margin-bottom:10px;
	    outline:none;
	    font-family:"Open Sans";
	    font-size:15px;
        color:#555;
		box-shadow:none;
		font-style:normal;
	    font-weight:normal;
		background-color:#fff;
		-webkit-border-radius:2px;
	       -moz-border-radius:2px;
	            border-radius:2px;
	    -webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
	}

	.contact-form .section .file-group input[type="text"]{
	    border:1px solid #ccc;
		padding:12px;
		margin-bottom:10px;
	    outline:none;
	    font-family:"Open Sans";
	    font-size:15px;
        color:#aaa;
		box-shadow:none;
		font-style:normal;
	    font-weight:normal;
		background-color:#fff;
		-webkit-border-radius:2px;
	       -moz-border-radius:2px;
	            border-radius:2px;
	    -webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
	}

	.contact-form .section .input-group textarea{
	    resize:vertical;
		overflow:hidden;
	}

	.contact-form .section .file-group input[type="text"],
	.contact-form .section .input-group input[type="text"],
    .contact-form .section .input-group input[type="email"],
	.contact-form .section .input-group textarea,
	.contact-form .section .select-group .select select{
		width:100%;
	}

	.contact-form .section .file-group input[type="text"],
	.contact-form .section .input-group input[type="text"],
    .contact-form .section .input-group input[type="email"],
	.contact-form .section .select-group .select select,
	.contact-form .section .input-group input[type="text"].captcha,
	.contact-form .section .input-group .number-captcha{
		height:44px;
  padding-right:41px;
	}

	.contact-form .section .input-group input[type="text"]:focus,
    .contact-form .section .input-group input[type="email"]:focus,
	.contact-form .section .input-group textarea:focus,
	.contact-form .section .input-group input[type="text"]:focus.captcha,
	.contact-form .section .select-group .select select:focus{
	    border-color:#2da5da;
		color:#333;
		outline:none;
	}

	.contact-form .section .input-group input[type="text"].captcha,
	.contact-form .section .input-group .number-captcha{
	    border:1px solid #ccc;
		margin:0;
	    outline:none;
		width:100%;
		text-align:center;
	    font-family:"Open Sans";
	    font-size:15px;
        color:#333;
		box-shadow:none;
		font-style:normal;
	    font-weight:normal;
		background-color:#fff;
		-webkit-border-radius:2px;
	       -moz-border-radius:2px;
	            border-radius:2px;
	    -webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
	}

	.contact-form .section .input-group .number-captcha{
		padding:14px 12px 12px 12px;
	}

	.contact-form .section .input-group input[type="text"].captcha{
		padding:12px 30px;
	}

	.contact-form .section .select-group .select select {
	    border:1px solid #ccc;
		display:block;
		position:relative;
	    outline:none;
		padding:11px;
	    font-family:"Open Sans";
	    font-size:15px;
        color:#999;
		z-index:9999;
		font-style:normal;
	    font-weight:normal;
		background-color:#fff;
        text-indent:1px;
        text-overflow:"";
		-webkit-appearance:none;
           -moz-appearance:none;
                appearance:none;
	}

	.contact-form .section .select-group .select select option{
		font-style:normal;
	    font-weight:normal;
	}

	.contact-form .section .select-group .select select:focus {
        z-index:9999;
	}

	.contact-form .section .select-group .select{
	    border:none;
		margin-bottom:10px;
		width:100%;
		z-index:9999;
		overflow:hidden;
		-webkit-border-radius:2px;
	       -moz-border-radius:2px;
	            border-radius:2px;
	    -webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
	}

	.contact-form .section .select-group .select:before {
	    font-family:'icomoon-ultimate';
	    position:absolute;
        content:"\e095";
	    top:13px;
        right:15px;
		font-size:18px;
        color:#888;
		font-style:normal;
	    font-weight:normal;
		z-index:99999;
    }

	.contact-form .section .input-group label i{
        position:absolute;
		cursor:pointer;
		top:13px;
		right:15px;
		display:block;
		color:#aaa;
		font-weight:normal;
		font-style:normal;
		font-size:15px;
		vertical-align:baseline;
	    -webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
    }

	.contact-form .section .file-group .file{
		width:100%;
		padding:12px;
        position:absolute;
        opacity:0;
        cursor:pointer;
        top:-2px;
        left:0;
		-webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
    }

    .contact-form .section .file-group span.button-upload {
	    position:absolute;
		float:right;
		right:0;
		top:0;
        font-style:normal;
	    font-weight:normal;
	    font-family:"Open Sans";
	    font-size:14px;
	    color:#fff;
        text-align:center;
		cursor:pointer;
		padding:15px 30px 13px 30px;
		height:44px;
		-webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
    }

	.contact-form .section .file-group span.button-upload.blue {
		background-color:#618da1;
    }

	.contact-form .section .file-group span.button-upload.green {
		background-color:#96aa39;
    }

	.contact-form .section .file-group span.button-upload.red {
		background-color:#e0635b;
    }

	.contact-form .section .file-group span.button-upload.orange {
		background-color:#de5f41;
    }

	.contact-form .section fieldset {
        margin:0;
		padding:0;
		border:0;
    }

	.contact-error-message {
        font-family:"Open Sans";
		font-weight:normal;
		font-style:normal;
		font-size:13px;
		background-color:#e0635b;
		border:1px solid #c14b44;
		padding:12px 20px;
		margin:0 0 10px 0;
		color:#fff;
		-webkit-border-radius:2px;
		   -moz-border-radius:2px;
                border-radius:2px;
	}

	.contact-error-message i{
		font-weight:normal;
		font-style:normal;
		font-size:12px;
		padding:0;
		margin:0 10px 0 0;
		color:#fff;
	}

	.contact-success-message {
        font-family:"Open Sans";
		font-weight:normal;
		font-style:normal;
		font-size:13px;
		background-color:#96aa39;
		border:1px solid #7b8b2f;
		padding:12px 20px;
		margin:0 0 10px 0;
		color:#fff;
		-webkit-border-radius:2px;
		   -moz-border-radius:2px;
                border-radius:2px;
	}

	.contact-success-message i{
		font-weight:normal;
		font-style:normal;
		font-size:12px;
		padding:0;
		margin:0 10px 0 0;
		color:#fff;
	}

	#contact-message { margin:0; padding:0; }

	.contact-form .section button {
	    float:right;
        margin:0 0 0 5px;
	}

	.contact-form .section #loader {
        background-image:url(../Images/loader.gif);
        background-repeat:no-repeat;
		background-position:0 0;
		margin-top:14px;
		margin-left:85px;
        width:16px;
        height:16px;
        display:none;
	}

/*	--------------------------------------------------
	:: Form Footer
	-------------------------------------------------- */

	.contact-form .footer {
		position:relative;
	    display:block;
		width:100%;
	    margin:0;
	    padding:30px 0;
		overflow:hidden;
		background-color:#f5f5f5;
		border-top:1px solid #e5e5e5;
		-webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
	}

	.contact-form .footer p {
	    text-align:left;
	    font-style:normal;
	    font-weight:normal;
	    font-family:"Open Sans";
	    font-size:14px;
		color:#777;
        margin:0;
		padding:0;
		line-height:18px;
	}

	.contact-form .footer a {
	    text-align:left;
	    font-style:normal;
	    font-weight:normal;
	    font-family:"Open Sans";
	    font-size:11px;
        text-decoration:none;
        color:#777;
	}

	.contact-form .footer a:hover {
		color:#999;
        text-decoration:none;
	}

/*	--------------------------------------------------
	:: Button Container & Sizes
	-------------------------------------------------- */

	button.button-large {
		padding:15px 30px 14px 30px;
		margin:0 0 5px 0;
	}

	button.button-large i{
		font-style:normal;
	    font-weight:normal;
	    font-size:13px;
	    color:#fff;
        margin-right:10px;
		vertical-align:baseline;
	}

	button.button-normal{
		padding:13px 25px 12px 25px;
		margin:0 0 5px 0;
	}

	button.button-normal i{
		font-style:normal;
	    font-weight:normal;
	    font-size:13px;
	    color:#fff;
        margin-right:10px;
		vertical-align:baseline;
	}

	button.button-small{
		padding:11px 40px 10px 40px;
		margin:0 0 5px 0;
	}

	button.button-small i{
		font-style:normal;
	    font-weight:normal;
	    font-size:15px;
	    color:#fff;
        margin-right:10px;
		vertical-align:baseline;
	}

	button.button-mini{
		padding:9px 15px 8px 15px;
		margin:0 0 5px 0;
	}

	button.button-mini i{
		font-style:normal;
	    font-weight:normal;
	    font-size:13px;
	    color:#fff;
        margin-right:10px;
		vertical-align:baseline;
	}

/*	--------------------------------------------------
	:: Button Configuration
	-------------------------------------------------- */

    .button{
	    display:inline-block;
	    position:relative;
        font-style:normal;
	    font-weight:normal;
	    font-family:"Open Sans";
	    font-size:14px;
		margin:0;
	    color:#fff;
		border:none;
		outline:none;
	    text-decoration:none;
        text-align:center;
		cursor:pointer;
		-webkit-border-radius:2px;
        -moz-border-radius:2px;
        border-radius:2px;
    }

/*	--------------------------------------------------
	:: Button Blue
	-------------------------------------------------- */

	.button-blue {
	    background-color:#618da1;
		border-bottom:1px solid #447085;
    }

	.button-blue:hover {
        background-color:#5b879a;
		border-bottom:1px solid #447085;
    }

	.button-blue:active {
        background-color:#618da1;
		border-bottom:1px solid #447085;
    }

/*	--------------------------------------------------
	:: Button Red
	-------------------------------------------------- */

	.button-red {
	    background-color:#e0635b;
		border-bottom:1px solid #c14b44;
    }

	.button-red:hover {
        background-color:#d76059;
		border-bottom:1px solid #c14b44;
    }

	.button-red:active {
        background-color:#e0635b;
		border-bottom:1px solid #c14b44;
    }

/*	--------------------------------------------------
	:: Button Green
	-------------------------------------------------- */

	.button-green {
	    background-color:#96aa39;
		border-bottom:1px solid #7b8b2f;
    }

	.button-green:hover {
        background-color:#8ea134;
		border-bottom:1px solid #7b8b2f;
    }

	.button-green:active {
        background-color:#96aa39;
		border-bottom:1px solid #7b8b2f;
    }

/*	--------------------------------------------------
	:: Button Orange
	-------------------------------------------------- */

	.button-orange {
	    background-color:#de5f41;
		border-bottom:1px solid #be4527;
    }

	.button-orange:hover {
        background-color:#d45639;
		border-bottom:1px solid #be4527;
    }

	.button-orange:active {
        background-color:#de5f41;
		border-bottom:1px solid #be4527;
    }

/*	--------------------------------------------------
	:: Note: Design for a width of 768px
	-------------------------------------------------- */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container { width:560px; }
    }

/*	--------------------------------------------------
	:: Note: Design for a width of 480px
	-------------------------------------------------- */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width:420px; }

		.grid-container .column-one,
        .grid-container .column-two,
        .grid-container .column-three,
        .grid-container .column-four,
        .grid-container .column-five,
        .grid-container .column-six,
        .grid-container .column-seven,
        .grid-container .column-eight,
        .grid-container .column-nine,
        .grid-container .column-ten,
        .grid-container .column-eleven,
        .grid-container .column-twelve { width:98%; }

		.contact-form .section .input-group .number-captcha{
		    margin-bottom:10px;
	    }

	    .contact-form .section .input-group input[type="text"].captcha{
	     	margin-bottom:10px;
	    }

    }

/*	--------------------------------------------------
	:: Note: Design for a width of 320px
	-------------------------------------------------- */

    @media only screen and (max-width: 479px) {
        .container { width:300px; }

		.grid-container .column-one,
        .grid-container .column-two,
        .grid-container .column-three,
        .grid-container .column-four,
        .grid-container .column-five,
        .grid-container .column-six,
        .grid-container .column-seven,
        .grid-container .column-eight,
        .grid-container .column-nine,
        .grid-container .column-ten,
        .grid-container .column-eleven,
        .grid-container .column-twelve { width:98%; }

		.contact-form .section .input-group .number-captcha{
		    margin-bottom:10px;
	    }

	    .contact-form .section .input-group input[type="text"].captcha{
	     	margin-bottom:10px;
	    }
    }

/*	--------------------------------------------------
	:: Font IcoMoon Ultimate
	-------------------------------------------------- */

    @font-face {
	    font-family:'icomoon-ultimate';
	    src:url('../Font/icomoon-ultimate.eot');
	    src:url('../Font/icomoon-ultimate.eot?#iefix') format('embedded-opentype'),
		    url('../Font/icomoon-ultimate.woff') format('woff'),
		    url('../Font/icomoon-ultimate.ttf') format('truetype'),
		    url('../Font/icomoon-ultimate.svg#icomoon-ultimate') format('svg');
	    font-weight: normal;
	    font-style: normal;
    }

    [class*="icon-"]:before {
	    font-family:'icomoon-ultimate';
	    speak:none;
	    -webkit-font-smoothing:antialiased;
	}

    .icon-key:before {content: "\e340";}
    .icon-envelop-2:before {content: "\e37f";}
    .icon-envelop-opened:before {content: "\e381";}
    .icon-user:before {content: "\e2fb";}