/*Craig Groenewald - Main Page CSS
	Created by Glenn Groenewald - 25th May 2021
*/

body {
	background:#000000;
	position:relative;
}

.btn
{
    display:block;
    border: none;
    outline:none;
	box-shadow:none;
}

.btn:focus
{
    display:block;
    border: none !important;
    outline:0px;
	box-shadow:none;
}

.opaqueWarningBackground{
	background:rgb(255, 193, 7); /*Fallback for no opacity*/
	background:rgb(255, 193, 7, 0.8);
	color:#000000;
}

.opaqueWarningBackgroundWhiteText{
	background:rgb(255, 193, 7); /*Fallback for no opacity*/
	background:rgb(255, 193, 7, 0.8);
	color:#FFFFFF;
}


.opaqueBlackBackground{
	background:(0,0,0); /*Fallback for no opacity*/
	background:rgb(0, 0, 0, 0.8);
	color:#FFFFFF;
}

.pureBlackBackground{
	background:(0,0,0); /*Fallback for no opacity*/
	background:rgb(0, 0, 0, 1);
	color:#FFFFFF;
}



/*Header*/
.landingHeader{
	height:90vh;
	margin-bottom:0;
	padding-right:0;
	padding-top:60vh;
	background: url(../Resources/crg_Landing_Header_2014x1125.png)/* fixed*/;
	/*background-position:center;*/
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: local;
}

@media screen and (max-width:600px){
	#landingH3{
		font-size:16px;
	}
}

/*Navigation bar*/
.navbar-custom{
	background:(0,0,0); /*Fallback for no opacity*/
	background:rgb(0, 0, 0, 0.8);
	color:#FFFFFF;
}

li a{
	color:white;
}

/*Hovering over navbar*/
li a:hover {
	color:#ffc107;
}

/*About Section*/
.aboutWrapper{
	/*min-height:100vh;*/
	color:#000000;
}

.even-columns > * {
	width:100%;
}

.aboutImg{
	min-height:740px;
	width:auto;
	background:url("../Resources/Craig Media24 1.jpg");
	background-size: cover;
	background-repeat:no-repeat;
	background-position:center
}

.aboutLinkTopSpacer{
	margin-top:640px;
}

.aboutPanel{
	min-height:460px;
}


/*Skillset Section*/
.skillsetHeader{
	height:93vh;
	margin-bottom:0;
	padding-right:0;
	padding-top:10vh;
	background: url(../Resources/crg_Skillset_Header1280x720.jpg)/* fixed*/;
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: local;
}

#skillSlideupWrapper{
	display:none;
	position:absolute;
	bottom:0px;
	right:0px;
}

.indexZ10{
	z-index:10;
}

.indexZ-1{
	z-index:-1;
}

.skillSummaryPlaceholder{
	min-height:420px;
	position:relative;
	
}

.skillsetPanel{
	min-height:560px;
}

.carousel-indicators li {
  width: 15px;
  height: 15px;
  margin:0 15px;
  border-radius: 100%;
  background-color:orange;
}

.carousel-control-prev{
	width:30px;
	/*opacity:0.8;*/
}
.carousel-control-next{
	width:30px;
	/*opacity:0.8;*/
}

.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='orange' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='orange' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/*Projects Section*/
.projectsHeader{
	height:93vh;
	margin-bottom:0;
	padding-right:0;
	padding-top:;
	background: url(../Resources/crg_Projects_Header1280x720.jpg)/* fixed*/;
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: local;
}

#projectSlideupWrapper{
	display:none;
	position:absolute;
	bottom:0px;
	right:0px;
}

.projectSummaryPlaceholder{
	min-height:472px;
	position:relative;
}

.projectCard{
	height:400px;
}

/* Changing img holder position, so the overlay will be related to it */

.hoverable-image {
  position: relative;
}

.hover-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: rgba(0, 0, 0, 0.5);
  }

.card:hover .hover-overlay {
    opacity: 1;
  }

@media screen and (max-width:800px) { /*Maybe 991 for large tablet displays*/
	.card:hover .hover-overlay {
    opacity: 1;
	}
  

	.hover-overlay: {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: .5s ease;
    background: rgba(0, 0, 0, 0.5);
	}
}

.pressHecticNine9-btn {
	margin-top:75%;
	margin-bottom:20%;
	margin-right:10%;
	margin-left:-20%;
	height: 25px;
	width:25px;
	z-index:2;
}


/* Create five equal columns that sits next to each other */
.projectColumn {
  flex: 20%;
  max-width: 20%;
  padding: 0 8px;
  margin: 3px;
  text-align: center;
}

.projectColumn img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .projectColumn {
    flex: 20%;
    max-width: 20%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .projectColumn {
    flex: 50%;
    max-width: 50%;
  }
}

/*Awards*/
.awardsWrapper{
	height:100%;
	margin-top:100px;
	margin-bottom:120px;
}

.awardsCard{
	background-color:#000000;
	color:#FFFFFF;
}

/*Contact*/
.contactHeader{
	height:100vh;
	margin-bottom:0;
	padding-right:0;
	padding-top:70vh;
	background: url(../Resources/crg_Contact_Background.png)/* fixed*/;
	/*background-position:center;*/
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: local;
}

.footer{
	background-color:#000000;
	color:#666666;
	height:10px;
}



/*Opacity classes from https://bootstrapcreative.com/pattern/bootstrap-opacity-classes-custom-css/*/
.opacity-0 {
  opacity:0!important;
}
.opacity-1 {
  opacity:0.2!important;
}
.opacity-2 {
  opacity:0.4!important;
}
.opacity-3 {
  opacity:0.6!important;
}
.opacity-4 {
  opacity:.8!important;
}
.opacity-5 {
  opacity:1!important;
}

/* Maybe even support hover opacity shifts */
.opacity-0h5 {
  opacity:0!important;
  transition: opacity .25s ease-in-out!important;
  -moz-transition: opacity .25s ease-in-out!important;
  -webkit-transition: opacity .25s ease-in-out!important;
}
.opacity-0h5:hover {
  opacity:1!important;
}