/*
Use this stylesheet for image styling and special buttons.   Where possible use relative sizing.  Otherwise media-queries.
Use images 1920 x 1080 For full background images  Laptop is 1600 x 900.     1 rem = 16px   12x10rem = 184x160px
Note that the common mobile "viewport" pixel size is  360x640 (not the actual pixels, actual pixels 1080 x 1920 - factor of 3 greater 10x9rem = 0.9x16x3 x(10x9rem) = 432x389 px.)
Bootstrap "small" breakpoint is 576px,  so all mobile formats are less than "small" */

.github{
	height:32px;
	width:34px;
	padding:0;
	background: url(../images/github-light-32.png) no-repeat;
	margin-left:20px;
	margin-top:20px;
}

.github:hover {
	background: url(../images/github-light-32.png) no-repeat;
	box-shadow: .25rem .25rem .25rem black;
}

.linkedin{
	height:32px;
	width:32px;
	padding:0;
	background: url(../images/linkedin-grey-32.png) no-repeat;
	margin-left:25px;
	margin-top:20px;
}

.linkedin:hover {
	background: url(../images/linkedin-lightblue-32.png) no-repeat;
	box-shadow: .25rem .25rem .25rem black;
}

.kaggle{
	height:32px;
	width:32px;
	padding:0;
	background: url(../images/kaggle_grey.png) no-repeat;
	margin-left:20px;
	margin-top:20px;
}

.kaggle:hover {
	background: url(../images/kaggle_blue.png) no-repeat;
	box-shadow: .25rem .25rem .25rem black;
}

.full_width{
	width:100%;
}

.close_icon{
	width:30px;
	height: 30px;
}

/* I'm just going to do this with exact pixes instead of Rem (border isn't included in height/width */
/* Remember the top part is chopped off by the text section */
/* Mobile approx is 16*.9*3*rem_value.   10*9 = approx 432 x 389, 10 x 8 approx 432 x 346 */
/* Desktop is 16*rem_value.   12*10 = 192 x 160, 10 x 8 = 432 x 128 */
#portfolio-button-1 {
	background-image: url(../images/portfolio-1.jpg);  
	background-size:cover;
}

#portfolio-button-2 {
	background-image: url(../images/portfolio-2.jpg);
	background-size:cover;
}

#portfolio-button-3 {
	background-image: url(../images/portfolio-3.jpg);
	background-size:cover;
}

#portfolio-button-4, #portfolio-button-4-XL-only {
	background-image: url(../images/portfolio-4.jpg);
	background-size:cover;
}

#portfolio-button-5 {
	background-image: url(../images/portfolio-5.jpg);
	background-size:cover;
}

#portfolio-button-6 {
	background-image: url(../images/portfolio-6.jpg);
	background-size:cover;
}

#portfolio-button-7 {
	background-image: url(../images/portfolio-7.jpg);
	background-size:cover;
}

#portfolio-button-8 {
	background-image: url(../images/portfolio-8.jpg);
	background-size:cover;
}

/* Things to change on large screens */

@media (min-width: 768px) {
	#portfolio-button-1 {
		background-image: url(../images/portfolio-desktop-1.jpg);  
		background-size:cover;
	}
	
	#portfolio-button-2 {
		background-image: url(../images/portfolio-desktop-2.jpg);
		background-size:cover;
	}
	
	#portfolio-button-3 {
		background-image: url(../images/portfolio-desktop-3.jpg);
		background-size:cover;
	}
	
	#portfolio-button-4, #portfolio-button-4-XL-only {
		background-image: url(../images/portfolio-desktop-4.jpg);
		background-size:cover;
	}
	
	#portfolio-button-5 {
		background-image: url(../images/portfolio-desktop-5.jpg);
		background-size:cover;
	}
	
	#portfolio-button-6 {
		background-image: url(../images/portfolio-desktop-6.jpg);
		background-size:cover;
	}
	
	#portfolio-button-7 {
		background-image: url(../images/portfolio-desktop-7.jpg);
		background-size:cover;
	}
	
	#portfolio-button-8 {
		background-image: url(../images/portfolio-desktop-8.jpg);
		background-size:cover;
	}
}