body{
	background-color:#f39b23;

}
/*navbar css*/
.navbar{
	overflow: hidden;
	background-color: black;
	opacity: 0.9;
	border-style: solid;
	border-bottom-width: 3px;
	border-bottom-color: #f39b23;

}

.nav{
margin-left: 50px;



}
.active{
	color: silver;
}
li:hover{
	background-color: #f39b23;
	


}




/*jumbotron css*/

.jumbotron{
	position: relative;
	text-align: center;
	color: #f39b23;

	
	
	
}
.jumbotron img{
	margin-top: -40px;
	margin-bottom: -45px;

}
h1{
	
	color: #f39b23;
}

h2{
	position: absolute;
	top: 40%;
	left: 50%;
	right: 50%;
	color: #f39b23;
}

#button{
	position: absolute;
	bottom: 40%;
	left: 50%;
	right: 50%;

}
.btn-primary{
	color: black;
	background-color: #f39b23;
}


/*Intoduction of the firm css*/
.intro{
	background-color: black;
	color: white;
	margin-top: -1px;
}


/*flexbox the firm css*/

.options img{
background-color: #f39b23;
transition: transform .2s;
padding: 2px;
width: 200px;
height: 150px;
border: 2px solid silver;
background-color: black;

}
.options img:hover{
	transform: scale(1.1);
	padding: 0px;

}
#options{
	background-color: #f39b23;


}


/*--footer---*/
 .page-footer{
  	background-color: #f39b23;
  	width: 100%;
  	

  }

  .footer-copyright{
  	background-color: black;
  	color: #f39b23;
  	height: 40px;
  }
  .footer-copyright a{
  	color: #f39b23;
  }


 /*--media query--*/
 @media screen and (max-width: 1130px) {
    /* Add a pseudo element with the 
       text from attribute 'data-abbr' */
    .red[h1]::after { 
        content: attr(h1); 
    }
    
    /* Hide the original label */
    .red> b { font-size: 2vw; margin-top: 0px;margin-bottom: 5px;}
  
  }
  @media screen and (max-width: 480px) {
    /* Add a pseudo element with the 
       text from attribute 'data-abbr' */
    .col-xs-6[img]::after { 
        content: attr(img); 
    }
    
    /* Hide the original label */
    .col-xs-6> img { width: 115px;height: 80px; }
}

@media screen and (max-width: 1200px) {
    /* Add a pseudo element with the 
       text from attribute 'data-abbr' */
    .navbar-brand[a]::after { 
        content: attr(a); 
    }
    
    /* Hide the original label */
    .navbar-brand> img { display:none; }}
    
    
     @media screen and (max-width: 988px) {
    /* Add a pseudo element with the 
       text from attribute 'data-abbr' */
    .Supo[p]::after { 
        content: attr(p); 
    }
    
    /* Hide the original label */
    .Supo>p { font-size: 2em;}

}