@font-face {
    /*font-family:Proxima Nova Rg;*/
    font-family: 'ProximaNova'; 
    src: url('fonts/Proxima Nova Alt Regular.otf');
    /*src: url('fonts/MarkSimonson-ProximaNovaBold.woff') format('woff');*/
    
}


@font-face {
    /*font-family:Proxima Nova Rg;*/
    font-family: 'MetricRegular'; 
    /*src: url('fonts/Proxima Nova Alt Regular.otf'); */
    src: url('fonts/Metric-Regular.woff') format('woff');
    
}


@font-face {
    /*font-family:Proxima Nova Rg;*/
    font-family: 'MetricLight'; 
    /*src: url('fonts/Proxima Nova Alt Regular.otf'); */
    src: url('fonts/Metric-Light.woff') format('woff');
    
}

@font-face {
    /*font-family:Proxima Nova Rg;*/
    font-family: 'MetricThin'; 
    /*src: url('fonts/Proxima Nova Alt Regular.otf'); */
    src: url('fonts/Metric-Thin.woff') format('woff');
    
}

@font-face {
    /*font-family:Proxima Nova Rg;*/
    font-family: 'MetricMedium'; 
    /*src: url('fonts/Proxima Nova Alt Regular.otf'); */
    src: url('fonts/Metric-Medium.woff') format('woff');
    
}
@font-face {
    /*font-family:Proxima Nova Rg;*/
    font-family: 'MetricSemibold'; 
    /*src: url('fonts/Proxima Nova Alt Regular.otf'); */
    src: url('fonts/Metric-Semibold.woff') format('woff');
    
}

         /* Demo 4 */

                .form-4 {
                    /* Size and position */
                    width: 322px;
                    margin: 00px auto 10px;
                    padding: 10px;
                    position: relative;
                
                    /* Font styles */
                    font-family: 'MetricLight';
                    color: #FFFFFF;
                   /* text-shadow: 0 2px 1px rgba(0,0,0,0.3);*/
                }
                
                .form-4 h1 {
                    font-size: 22px;
                    padding-bottom: 10px;
                }


                .form-4 h3 {
                    font-size: 18px;
                    padding-bottom: -3px;
                    margin-bottom: 0px;
                    margin-top: 0px;
                }
                
                .form-4 input[type=text],
                .form-4 input[type=password] {
                    /* Size and position */
                    width: 100%;
                    padding: 6px 4px 6px 10px;
                    margin-bottom: 15px;
                
                    /* Styles */
                   /* border: 1px solid #4e3043; *//* Fallback */
                    border: 1px solid rgba(255,255,255, 0.8); 
                    background: rgba(255,255,255,0.4); 
                    border-radius: 4px;
                    box-shadow: 
                        0 1px 0 rgba(255,255,255,0.2), 
                        inset 0 1px 1px rgba(0,0,0,0.1);
                    -webkit-transition: all 0.3s ease-out;
                    -moz-transition: all 0.3s ease-out;
                    -ms-transition: all 0.3s ease-out;
                    -o-transition: all 0.3s ease-out;
                    transition: all 0.3s ease-out;
                
                    /* Font styles */
                    /* font-family: 'Raleway', 'Lato', Arial, sans-serif;
                    color: #FFFFFF;
                    font-size: 12px; */
                    
                        font-family: 'MetricLight';
		        font-size: 11pt;
		        /*font-weight: 600;*/
                        color: #FFFFFF;


                        

                }
                
                /* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */
                

                ::-webkit-input-placeholder { color: white; } /* WebKit */
                        :-moz-placeholder { color: white; } /* Firefox 18- */
                        ::-moz-placeholder { color: white; } /* Firefox 19+ */
                        :-ms-input-placeholder { color: white; } /* IE 10+ */


                input[placeholder], [placeholder], *[placeholder] {
                    color: white !important;
                }

                .form-4 input[type=text]:hover,
                .form-4 input[type=password]:hover {
                    border-color: #333;
                }
                
                .form-4 input[type=text]:focus,
                .form-4 input[type=password]:focus,
                .form-4 input[type=submit]:focus {
                    box-shadow: 
                        0 1px 0 rgba(255,255,255,0.2), 
                        inset 0 1px 1px rgba(0,0,0,0.1),
                        0 0 0 3px rgba(255,255,255,0.15);
                    outline: none;
                    background: rgba(50,50,50,0.6);
                }
                
                /* Fallback */
                .no-boxshadow .form-4 input[type=text]:focus,
                .no-boxshadow .form-4 input[type=password]:focus {
                    outline: 1px solid white;
                }
                
                .form-4 input[type=button] {
                    /* Size and position */
                    width: 100%;
                    padding: 8px 5px;
                    
                    /* Styles */
                    background: #f47e42; 
                   /* background: -moz-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
                    background: -ms-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
                    background: -o-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
                    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(99,64,86,0.5)), to(rgba(76,49,65,0.7)));
                    background: -webkit-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
                    background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));    */
                    border-radius: 5px;
                    border: 1px solid #ff9933;
                    box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px 1px rgba(0,0,0,0.1);
                    cursor: pointer;
                    -webkit-transition: all 0.3s ease-out;
                    -moz-transition: all 0.3s ease-out;
                    -ms-transition: all 0.3s ease-out;
                    -o-transition: all 0.3s ease-out;
                    transition: all 0.3s ease-out;
                
                    /* Font styles */
                   /* color: white;
                    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
                    font-size: 12px;
                    font-weight: bold;
                    font-family: 'Raleway', 'Lato', Arial, sans-serif; */
                    
                     color: #FFFFFF;
                     font-family: 'MetricLight';
	                 font-size: 20px;
	              /*font-weight: 600;  */

                }
                
                .form-4 input[type=button]:hover {
                    box-shadow: 
                        inset 0 1px rgba(255,255,255,0.2), 
                        inset 0 20px 30px rgba(99,64,86,0.5);
                }
                
                /* Fallback */
                .no-boxshadow .form-4 input[type=button]:hover {
                    background: #594642;
                }
                
                .form-4 label {
                    display: none;
                    padding: 0 0 5px 2px;
                    cursor: pointer;
                }
                
                .form-4 label:hover ~ input {
                    border-color: #333;
                }
                
                .no-placeholder .form-4 label {
                    display: block;
                }