@charset "utf-8";
/*headline: font-family: "Bebas Neue", sans-serif;
paragraph:  font-family: "Cabin", sans-serif;
*/

/* Portfolio Colors
black: #000000
white: #FFFFFF
leoBlue: #2B87FF
donPurple:#BA00FF
raphRed: #BD012E
*/

/* colors */
.leoBlue{
	color: #2B87FF;
}

.donPurple {
	color: #BA00FF;
}

.raphRed {
	color: #BD012E;
}

.bgLeo {
	background-color: #2B87FF;
}

.bgDon {
	background-color: #BA00FF;
}

.bgRaph {
	background-color: #BD012E;
}

.bgMikey {
	background-color: #E66900;
}
/* body styles */
body {
	background-color: black;
	color: white;
	font-family: "Cabin", sans-serif;
}
.home_bg{
	background: black no-repeat url("../images/portwebbg1.png");
	background-size:95%, auto;
	
}
h1, h2, h3, h3, h4, h5, h6 {font-family: "Bebas Neue", sans-serif;}

h1{
	color:black;
}

/* nav bar styles*/

.navbar-custom {
	font-family: "Bebas Neue", sans-serif;
	background-color: rgba(0,0,0,0.8);
}
.dropdown-menu {
	background-color: rgba(0,0,0,0.8);
}
.navbar-nav {
	justify: end;
}
/* nav bar text color */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text, .navbar-custom .navbar-nav .nav-link, .navbar-custom .dropdown-item {
    color: #FFFFFF;
}

/*navbar brand logo*/
.navbar-brand {
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-size: 40px auto;
    background-position: 6% center;
    padding-left: 70px;
}

/* basic nav button hover and active page style */
.navbar-custom .nav-item.active .nav-link, .navbar-custom .nav-item:hover .nav-link, .navbar-custom .nav-item:focus .nav-link, .navbar-custom .dropdown-item:hover, .navbar-custom .dropdown-item:focus {
    background-color: #ffffff;
    color: #000;
	
}

/* purple nav bar elements */
.navbar-custom .nav-item.active_purple .nav-link, .navbar-custom .nav-item:hover .don .nav-link, .navbar-custom .nav-item:focus .nav-link, .navbar-custom.don .dropdown-item:hover, .navbar-custom .dropdown-item:focus, .navbar-custom .dropdown-item.active_purple {
 
    color: #BA00FF;
	
}

/* red nav bar elements*/
.navbar-custom .nav-item.active_red .nav-link, .navbar-custom .nav-item:hover .raph .nav-link, .navbar-custom .nav-item:focus .nav-link, .navbar-custom.raph .dropdown-item:hover, .navbar-custom .dropdown-item:focus, .navbar-custom .dropdown-item.active_red {
 
    color: #BD012E;
	
}

/*blue nav bar elements*/
.navbar-custom .nav-item.active_blue .nav-link, .navbar-custom .nav-item:hover .leo .nav-link, .navbar-custom .nav-item:focus .nav-link, .navbar-custom.leo .dropdown-item:hover, .navbar-custom .dropdown-item:focus, .navbar-custom .dropdown-item.active_blue {
 
    color: #2B87FF;
	
}
/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
    border-color: rgba(255,255,255,1.00);
    color: #fff;
}

/* Hamburger icon - */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}


/* end nav bar styling */

/* Banner Styling */
#home_banner {
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}

#home_banner h1 {
    position: absolute;
    font-size: 4rem;
    margin-left: 5%;
   /* margin-bottom: 7%;*/
    /*margin-top: 7.5%;*/
	
}

/* carosel styling*/
.carouselImage{
	height: 20em;
}

/*button styling*/
.btn-primary{
	background-color: black;
	font-family: "Bebas Neue", sans-serif;
	color: #2B87FF;
	border-color: #2B87FF;
	border-width: 3px;
}

/* main content styling */
.mainSection {
	padding-top: 3%
}

 

.main h2{
	font-weight: 800;
	font-size: 1.8em;
}

/* footer styling */
footer {text-align: center;
    line-height: 60px;
    background-color: #000;
    color: #FFF;
}

/* photo styling */
.portrait {
    width: 20%;
}

/* home page specific styling */
.homeLinks {
	font-family: "Bebas Neue", sans-serif;
	font-size: 2.5em;
	color: #2B87FF;
	text-align: right;
	 
	line-height: 1em;
}


#uxUi {
	color:#2B87FF;
	
}

#loMa {
	color:#BA00FF;
	
}

#prAd {
	color:#BD012E;
}

.homeBttns {
	height: 25vw;
	align-items:flex-end;
}
.box {
	height: fit-content;
	min-height: 20vw;
}

.homeBoy{
	align-self: stretch;
}

#Red {
	
	font-weight: 400;
	font-size: 25vw;
	line-height: 0.84em;
	padding-left: 0em;
}

#Williams {
	
	font-weight: 400;
	font-size: 25vw;
	line-height: 0.84em;
	padding-left: 0em;
}


/*Media Query Breakpoints*/
/*X-SMALL ONLY*/
@media screen and (min-width:375px){
#home_bg h1 {
    font-size: 1rem;
    bottom: 3%;
    left: 3%;
    }    
}


/*SMALL SIZE ONLY*/
@media screen and (min-width:576px){
#home_bg h1 {
    font-size: 1rem;
    bottom: 3%;
    left: 3%;
    }    
}

/*MEDIUM SIZE ONLY*/
@media (min-width: 768px) {
  #home_bg h1 {font-size: 2rem;
               bottom: 5%;
               left: 3%;
              }
  }


/*LARGE SIZE ONLY*/
@media screen and (min-width:992px){
    #home_bg h1 {
        font-size: 3rem;
        bottom: 5%;
        left: 3%;
        }
}
	
