/* #### Generated By: http://www.cufonfonts.com #### */

    @font-face {
    font-family: 'Gelion Regular Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Regular Italic'), url('/fonts/Gelion Regular Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gelion Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Regular'), url('/fonts/Gelion Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gelion Light';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Light'), url('/fonts/Gelion Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gelion Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Light Italic'), url('/fonts/Gelion Light Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gelion Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Medium Italic'), url('/fonts/Gelion Medium Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gelion Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Medium'), url('/fonts/Gelion Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gelion Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Bold Italic'), url('/fonts/Gelion Bold Italic.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Gelion Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Gelion Bold'), url('/fonts/Gelion Bold.woff') format('woff');
    }

body{
	background-color:#001729;
	  	background: -webkit-linear-gradient(to bottom left, #001729, #33185e);
  		background: -moz-linear-gradient(to bottom left, #001729, #33185e);
  		background: linear-gradient(to bottom left, #001729, #33185e);
  		background-repeat: no-repeat;
  font-family: 'Gelion Regular', sans-serif!important;
}
body p{color: white; font-size:1rem;font-family: 'Gelion Regular', sans-serif;}

.container{max-width:1280px; margin:auto;}

/*Nav overrides*/
.navbar{background-color:transparent!important;}
.navbar a{color:white;}
.navbar a:hover{color:#c08cf1;}
.navbar-brand{color:#FFF; font-size:1.6rem;}
.navbar-collapse{flex-grow:0;}

.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(192,140,241, 0.5)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler {
  border:none;
  display:contents;
} 

/*Animated burger menu STARTS*/
.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#c08cf1;
  stroke-width:5.5;
  stroke-linecap:round;
}
.ham1 .top {
  stroke-dasharray: 40 139;
}
.ham1 .bottom {
  stroke-dasharray: 40 180;
}
.ham1.active .top {
  stroke-dashoffset: -98px;
}
.ham1.active .bottom {
  stroke-dashoffset: -138px;
}
/*Animated burger menu ENDS*/

/*Back to top*/
#toTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #8255c9; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 38px; /* Increase font size */
  opacity:0.7;
}
/*Back to top ENDS*/

.spacer{margin-bottom:40px;}

/*ALL OF THESE STYLES ARE FOR XS VIEWPORT*/

/*Font Styling*/
h1,h2,h3,h4{
  color:#5de8c9; 
  text-align:center;
  font-family: 'Gelion Regular', sans-serif;
}

h1{
  font-size:3rem;
  font-family: 'Gelion Regular', sans-serif; 
  text-align:left!important;
  line-height: 3rem;
  margin-top:15px!important;
  margin-bottom:15px!important;
}

.intro{
	font-size:1.125rem;
	font-family: 'Gelion Light', sans-serif;
	line-height:1.6rem;
}

h2{
  font-size:1.8rem!important;
  font-family: 'Gelion Regular'!important; 
  margin-top:45px!important;
}

h3{
  background:#00cbac; 
  border-radius: 12px 12px 12px 0; 
  padding: 12px; 
  color:#303030; 
  font-family: 'Gelion Medium'; 
  font-size:1.2rem; 
  margin:24px 12px; 
  text-align:center;
}

/*Buttons*/
.btn-primary {
  background: #7145b9!important;
  	background: linear-gradient(#7145b9, #c08cf1)!important;
    font-family: 'Gelion Regular', sans-serif;
}
.btn-primary:hover{
  background: #5de8c9!important;
  border:3px solid #5de8c9!important;
  --bs-btn-hover-color:#001729;
  font-family: 'Gelion Regular', sans-serif;
}

.btn{
	min-width: 100%;
	height:54px; 
	border:3px solid #c08cf1; 
	border-radius: 12px 12px 12px 0px;
	background: transparent;
  color: white;
  margin: 25px 30px 0px 0!important;
  padding: 0 60px 0 60px;
  font-family: 'Gelion Regular', sans-serif;
}

.btn-secondary{
  --bs-btn-hover-bg:white;
  --bs-btn-hover-border-color:white;
  --bs-btn-hover-color:#001729;
  --bs-btn-active-bg:transparent;
  --bs-btn-active-border-color:#5de8c9!important;
  --bs-btn-active-color:white;
}

.pfolio button.btn.btn-secondary.btn-lg{min-width:50%; height:44px;font-family: 'Gelion Regular', sans-serif;}

button.tertiary{background:transparent!important; color:#303030; border:none!important; font-family: 'Gelion Regular', sans-serif;}

/*Site Colours*/

/*Logo*/
.navbar-brand.logoCol a{color:#c08cf1;}
 
.skills_tab{
  background: #071622;
    background: -webkit-linear-gradient(to left, #00caee, #6f31d2);
    background:    -moz-linear-gradient(to left, #00caee, #6f31d2);
    background:         linear-gradient(to left, #00caee, #6f31d2);
    border-radius:12px 12px 12px 0px;
    text-align:center;
    line-height: 1rem;
    margin-bottom:30px;
}

/*Portfolio*/
.pfolio_tab{border-radius: 12px 12px 12px 0;}
.pfolio .btn{ margin:35px 0 45px 0;}
.overlay-sim-text-2{border-radius:12px 12px 12px 0;}
.overlay-sim-text-2 h4{margin-top:13%;}

/*Modal Styles*/
.modal-body p{font-size:1.125rem; color:#303030; margin-top:0;font-family: 'Gelion Regular', sans-serif;}

.modal-header{align-items:flex-start!important;font-family: 'Gelion Regular', sans-serif;}

.first{background-color:#caf1e8; padding-top:20px;}

h5.modal-title {
    font-size: 2.2rem;
    font-family: 'Gelion Regular', sans-serif;
}

.modal-intro p{/*font-size:1.3rem;*/color:#2d3d49;}

p.section-heading{font-size:24px; margin-bottom: 10px; line-height: 1.9rem;font-family: 'Gelion Regular', sans-serif;}

.mhd-clr{color:#7145b9;}

.sideInfo{
    padding:10px 12px;
    border-bottom:1px solid #e5e5e5;
    margin-bottom:30px;
    font-weight: 600;
  }

.sideInfo p{
  font-size:18px;
  margin-top:0!important;
  display: inline;
  font-family: 'Gelion Regular', sans-serif;
}

.sideInfo h3{
  margin-bottom:0; 
  margin-top:0!important;
  margin-left:0!important;
  text-transform: capitalize;
  text-align:left;
  color:#7145b9;
  font-size:20px;
  background:none!important;
  padding:0!important;
  font-family:'Gelion Regular';
  display: inline;
}

/*Modal Styles ENDS*/

.row.aboutTabs{width:99%; margin:auto;}

#contact{padding-bottom:40px;}
#contact p{text-align:left;font-family: 'Gelion Regular', sans-serif;}
footer{padding:40px; color:white; border-top:1px solid #7145b9;}

@media only screen and (min-width: 769px) { /*Get the bloody hover description to sit properly*/
   .overlay-sim-text-2 h4{margin-top:17%;}
}

@media only screen and (min-width: 768px) {
	h1{
		font-size:5.125rem!important;
		line-height: 5rem;
		margin-bottom:40px;
		margin-top:35px!important;
	}
  h2{
    font-size:3.125rem!important;
    line-height: 3rem;
    margin-bottom:50px;
    margin-top:140px!important;
  }
	.intro{
		font-size:2.375rem!important;
		line-height:3.2rem;
		margin-bottom: 30px;
    margin-top:10px;
	}

	/*Buttons*/
	.btn{
		min-width: 190px;
    margin: 35px 30px 45px 0;
	 }

   /*Portfolio and Modal styles*/
   .modal-body{padding:0;}
   .pfolio button.btn.btn-secondary.btn-lg{min-width:190px; height:54px;}

   h5.modal-title {
    font-size: 1.875rem;
  }

   /*Portfolio and Modal styles ENDS*/

   .skills_tab{margin-bottom:0;}

   .btm-gap{margin-bottom:40px;}

   .modal{
      --bs-modal-width:auto!important;/*makes modal width window span 100% on desktop*/
      --bs-modal-header-padding:2rem 2rem!important;/*makes modal header padding bigger*/
    }

   .sideInfo{
      padding: 0 30px;
      margin-bottom:0;
    }
    .sideInfo p{
      display: block;
    }

    .sideInfo h3{
      display: block;
    }

    #contact p{text-align:center;}

}
/*
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
	h1{font-size:5.125rem!important;}
	.intro{font-size:2.375rem!important;}
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
	h1{font-size:5.125rem!important;}
	.intro{font-size:2.375rem!important;}
 }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { 
	h1{font-size:5.125rem!important;}
	.intro{font-size:2.375rem!important;}
 }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { 
	h1{font-size:5.125rem!important;}
	.intro{font-size:2.375rem!important;}
 }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { 
	h1{font-size:5.125rem!important;}
	.intro{font-size:2.375rem!important;}
 }