/*!
 * Start Bootstrap - Full Slider HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
@import url('https://fonts.googleapis.com/css?family=Cairo:200,300,400,600,700,900');
html,
body {
    height: 100%;
    font-family: 'Cairo', sans-serif;

}

/* Excellent */

.btn-face1
{
	  background: url(../img/1.png) no-repeat center center;
    width: 100px;
    height: 100px;
    background-size: cover;
    color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
}


.btn-face1:hover
{
	background:url('../img/1.png') no-repeat center center;
	width:100px;
	height:100px;
	background-size: cover;
	color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
    
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}


.btn-face1:focus
{
	background:url('../img/1.png') no-repeat center center;
	width:100px;
	height:100px;
	background-size: cover;
	color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
    
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}



/* Great */
.btn-face2
{
background: url(../img/2.png) no-repeat center center;
    width: 100px;
    height: 100px;
    background-size: cover;
    color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
    
   
}


.btn-face2:hover
{
	background:url('../img/2.png') no-repeat center center;
	width:100px;
	height:100px;
	background-size: cover;
	color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
    
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}


.btn-face2:focus
{
	background:url('../img/2.png') no-repeat center center;
	width:100px;
	height:100px;
	background-size: cover;
	color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
    
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}




/* Great */
.btn-face3
{
	background:url('../img/3-off.png') no-repeat center center;
	width:100px;
	height:100px;
	background-size: cover;
	color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0); 
    
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


.btn-face3:hover
{
	background:url('../img/3.png') no-repeat center center;
	width:100px;
	height:100px;
	background-size: cover;
	color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
    
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}


.btn-face3:focus
{
	background:url('../img/3.png') no-repeat center center;
	width:100px;
	height:100px;
	background-size: cover;
	color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
    
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}



/* Fair */
.btn-face4
{
	 background: url(../img/4.png) no-repeat center center;
    width: 100px;
    height: 100px;
    background-size: cover;
    color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
}


.btn-face4:hover
{
	background:url('../img/4.png') no-repeat center center;
	width:100px;
	height:100px;
	background-size: cover;
	color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
    
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}


.btn-face4:focus
{
	background:url('../img/4.png') no-repeat center center;
	width:100px;
	height:100px;
	background-size: cover;
	color: rgba(51, 51, 51, 0);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(204, 204, 204, 0);
    
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}


.margin-top
{
	 margin-top: 40px;
}

.text
{
	margin-top:20px;
	font-size:18px;
	text-transform:uppercase;
	font-weight:bold;
}




.btn {
    padding: 7px 30px;
    margin-bottom: 0;
    font-size: 16px;
}

.navbar-inverse {
    background-color: #fff !important;
    border-color: #080808;
}



button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    border: 1px solid #cccccc;
    border-radius: 10px;
}


input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: 'Cairo', sans-serif !important;
}