/*******************************************************************************************************************************************************/
/*Common for all */
html {
    width: 100%;
    height: 100%;
}

body {
    font-family: Expletus Sans, Trajan Pro;
    /* background: #000000;  /* fallback for old browsers */
    /* background: -webkit-linear-gradient(to right, #434343, #000000);  /* Chrome 10-25, Safari 5.1-6 */
    /* background: linear-gradient(to right, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	
	background: url("/images/star_bg.jpg");
    overflow-x: hidden;
}

/* Classes for fading effect for different pages */
.animate {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.delay {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

/* Modify all anchor tags */
a, .reviewForm a, .new_btn_tray a {
    color: #e9ecef;
    text-decoration: none;
    transition: all 0.4s;
}

/* Remove outline for buttons */
button:focus {
    outline: 0;
}

/* Scrollbar styling */
body::-webkit-scrollbar {
    width: 0.5em;
}
   
body::-webkit-scrollbar-track {
    background: inherit;
}

body::-webkit-scrollbar-thumb {
    border-radius: 0.5em;
    background: #2C3E50;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* Alert messages styling */
.alert {
	text-align: center;
    font-size: 1.2em;
    height: 70px;
    width: 60%;
	margin-top: 80px;
	padding: 10px 50px;
}

/*******************************************************************************************************************************************************/
/* Navbar */
.navbar {
    background: #000;
	font-family: Righteous;
}

/* Fade after scroll */
nav {
    transition: all 0.4s;
}

.navbar.scrolled {
    background: rgba(0, 0, 0, 0.4);
    opacity: 0.9;
}

/* Logo */
.navbar-brand {
    width: 5em;
    padding: 0;
    text-align: center;
    transition: all 1s ease-in-out;
    /* animation: rotation 3s infinite linear; */
}

/* Logo hover effect */
a.navbar-brand:hover {
    transform: rotate3d(1, 1, 1, 360deg); 
}

/* All buttons on the navbar */
.navbar-nav .nav-link {
    width: 13em;
    height: 50px;
    padding: 5px;
    font-size: 1em;
    text-align: center;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFF;
    transition: all 0.4s;
}

/* Skew the nav links */
a.nav-link.galleries {
	transform: skew(30deg);
	margin: auto;
}

/* Un-skew the text inside the nav */
a.nav-link.galleries li {
	transform: skew(-30deg);
}

/* Button hover effects */
a.nav-link.galleries:hover {
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.8);
    background: #e9ecef;
    transition: all 0.4s;
}

/* Navbar toggler icon image */
.navbar-toggler-icon {
    background-image: url("/images/pencil_menu.png");
    transform: rotate(90deg);
} 

/* Active page indicator */
#activePage {
    color: #000;
    background: #e9ecef;
}

/* Rainbow button */
.glow-on-hover {
    width: 13em;
    height: 50px;
    padding: 5px;
    margin-right: 20px;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: #FFF;
    background: inherit;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 0;
    transition: all 0.4s;
}

.glow-on-hover:before {
    content: '';
    top: -2px;
    left:-2px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 5px;
    position: absolute;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(   5px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease-in-out;
    
}

.glow-on-hover:active {
    color: #000;
}

.glow-on-hover:hover {
    letter-spacing: 2px;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

/* Rainbow navbar */
.rainbow_background {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1500% 1500%;
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: darken;

    -webkit-animation: rainbow 10s ease infinite;
    -z-animation: rainbow 10s ease infinite;
    -o-animation: rainbow 10s ease infinite;
    animation: rainbow 10s ease infinite;
}

/*******************************************************************************************************************************************************/
/* Jumbotron */
.jumbotron {
    padding-top: 80px;
    height: 30em;
    text-align: center;
    box-shadow: 0px 8px 10px #98999b;
    background: url("/images/home_new.jpg") center no-repeat;
    background-size: cover;
    background-color: rgba(255,255,255,0.3);
    background-blend-mode: lighten;
}

#jumboName {
	color: rgb(0, 0, 0);
}

/* Page heading */
h1 {
    margin-top: 0.5em;
    font-size: 9em;
    font-family: Spirax, Ink Free;
    letter-spacing: 1px;
    text-shadow: 2px 4px 2px rgba(0, 0, 0, 0.3), 4px 8px 4px rgba(0, 0, 0, 0.1), 6px 12px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.4s;
}

/* Zoom effect for the page heading */
h1:hover {
    transform: scale(1.1);
}

/* Sub heading styling */
.lead {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    font-family: Expletus Sans, Gabriola;
    font-size: 1.2em;
}

/* Horizontal rule styling */
hr {
    width: 100%;
    height: 12px;
	margin-bottom: 0;
    border: 0;
    box-shadow: inset 0 10px 10px -14px rgba(0, 0, 0, 0.8);
}

/*******************************************************************************************************************************************************/
/* Page contents */
/* HOME PAGE ========================================================== */
/* Image cards */
.card {
    height: 25em;
    margin: 10px;
    background: inherit;  
}

/* Card title styling */
.card-title {
    margin: 10px;
    font-size: 3em;
	font-family: Cormorant Unicase;
	font-weight: 500;
    text-align: center;
	color: rgba(0,0,0, 0.75);
}

.card-icon {
	font-size: 6rem;
}
/* Shadow off on hover */
.card-img-overlay:hover .card-title, #giftCard:hover .card-title {
    text-shadow: none;
	color: rgba(0,0,0,255);
	text-shadow: -1px -1px 0 rgba(255,255,255, 0.2), 1px -1px 0 rgba(255,255,255, 0.2), -1px 1px 0 rgba(255,255,255, 0.2), 1px 1px 0 rgba(255,255,255, 0.2);
}

/* Card sub line styling */
.card-text {
    margin: 100px 20px;
    padding: 0 20px;
    display: none;
    font-weight: 700;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    transition: all 0.4s;
}

/* Reveal on hover */
.card-img-overlay:hover .card-text, #giftCard:hover .card-text {
    display: block;
}

/* Card image styling */
.card-img-overlay {
    background-size: cover;
    transition: all 0.4s;
}

/* Zoom effect for cards */
.card-img-overlay:hover {
    color: #000;
    transform: scale(1.05);
    border-radius: 20px;
    box-shadow: 5px 5px 20px rgba(3, 252, 248, 0.6), -5px -5px 20px rgba(3, 252, 248, 0.6),
                5px -5px 20px rgba(3, 252, 248, 0.6), -5px 5px 20px rgba(3, 252, 248, 0.6),
                10px 10px 20px rgba(3, 252, 248, 0.3), -10px -10px 20px rgba(3, 252, 248, 0.3),
                10px -10px 20px rgba(3, 252, 248, 0.3), -10px 10px 20px rgba(3, 252, 248, 0.3);
}

/* Assigning images to each card */
#sketchCard {
    background-image: url("/images/frames.jpg");
    background-position: center;
	background-color: rgba(255,255,255,0.3);
    background-blend-mode: lighten;
}

#photoCard {
    background-image: url("/images/photo_gallery_new.jpeg");
    background-position: center;
	background-color: rgba(255,255,255,0.3);
    background-blend-mode: lighten;
}

#portCard {
    background-image: url("/images/portrait_new.jpg");
	background-position: center;
	background-color: rgba(255,255,255,0.3);
    background-blend-mode: lighten;
}

#gift {
	height: 12em;
}

#giftCard {
	height: 12em;
    background-image: url("/images/sketch_order.jpg");
	background-size: cover;
	background-position: center;
	background-color: rgba(255,255,255,0.3);
    background-blend-mode: lighten;
}

#giftCard .card-title {
	color: rgba(0,0,0, 0.75);
    font-size: 3em;
    text-align: center;
}

/* Card sub line styling */
#giftCard .card-text {
    margin: 0;
    padding: 0 20px;
    display: none;
    font-weight: 700;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    transition: all 0.4s;
}

/* New Year popup window */
/* New year message hidden button */
.popupButton {
	display: none;
}

/* Modal overlay */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 1s;
  visibility: hidden;
  opacity: 0;
}

/* Show the modal when button pressed */
.overlay:target {
	visibility: visible;
	opacity: 1;
}

/* When custom modal is open, hide the navbar and prevent page scroll */
body.modal-open-custom .navbar {
    display: none !important;
}

body.modal-open-custom {
    overflow: hidden !important;
}


/* Popup window */
.popup {
	position: relative;
	width: 50%;
	margin: 100px auto;
	padding: 30px;
	background: #E0EAFC;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #CFDEF3, #E0EAFC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */	
	border-radius: 10px;
	transition: all 1.5s;
}

/* Popup window content styling */
.popup h2, .popup .popupContent {
    margin-bottom: 0;
    text-align: center;
    font-family: Expletus Sans, Gabriola;
    background: #780206;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #061161, #780206);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #061161, #780206); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Close button styling */
.popup .close {
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-size: 40px;
	font-weight: bold;
	color: #333;
	text-decoration: none;
}

/* Hover effect for close button */
.popup .close:hover {
  color: magenta;
}

/* GALLERY PAGES ===================================================== */
/* Content margin addition */
div.col-8.col-md-4 {
    margin: 20px 0;
}

/* Image thumbnail styling */
.img-thumbnail {
    padding: 0;
    border: none;
    transition: all 0.4s;
} 

/* Individual image */
.myImg {
    width: 100%;
    height: 250px;
    cursor: pointer;
    object-fit: cover;
    overflow: hidden;
    transition: all 0.3s;
}

/* Hover effect for all images */
.myImg:hover {
    opacity: 0.7;
    transform: scale(1.05);
    box-shadow: 5px 5px 10px rgba(207, 207, 207, 0.1), -5px -5px 10px rgba(207, 207, 207, 0.1),
                5px -5px 10px rgba(207, 207, 207, 0.1), -5px 5px 10px rgba(207, 207, 207, 0.1),
                10px 10px 10px rgba(207, 207, 207, 0.1), -10px -10px 10px rgba(207, 207, 207, 0.1),
                10px -10px 10px rgba(207, 207, 207, 0.1), -10px 10px 10px rgba(207, 207, 207, 0.1);
}
  
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Disable scrollbar */
.modal::-webkit-scrollbar {
    width: 0.2em;
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

/* Styling the caption */
#caption {
	margin-top: 20px;
	font-size: 2em;
	text-align: center;
	font-weight: 700;
	background: #00c3ff;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #ffff1c, #00c3ff);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to top, #ffff1c, #00c3ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Styling the description in modal */
#descrip {
	padding: 0 10em;
	margin: 15px 0 50px 0;
	font-size: 1.5em;
	text-align: center;
}

.fa-quote-left, .fa-quote-right {
	font-size: 0.6em;
	vertical-align: top;
}

/* Apply color gradient to descrioption */
#descrip, #descrip > i {
	background: #e65c00;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #F9D423, #e65c00);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #F9D423, #e65c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* The Close Button */
.close {
    position: absolute;
    top: 80px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: all 0.3s;
}

/* Close button hover effect */
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* ORDER PAGE ======================================================== */
/* Section titles */
.tabs {
    height: 2.5em;
    font-family: Righteous, Ink Free;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.2);
    font-size: 3.5em;
	background: #abbaab;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #ffffff, #abbaab);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #ffffff, #abbaab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.4s;
}

/* Section underlines */
.tabs > hr {
    width: 80%;
    box-shadow: inset 0 10px 10px -14px rgba(255, 255, 255, 0.8);
}

/* Image slideshow */
#imageDisplay {
    height: 45em;
    display: block;
	background-color: rgba(0,0,0,0);
    background-image: url("/images/portrait.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 15px ;
    box-shadow: 5px 5px 10px #f0f0f0;
}

/* Info section */
.info {
    color: rgba(255, 255, 255, 0.726);
    text-align: center;
    font-size: 1.5em;
    padding: 0 50px;
    margin-bottom: 400px;
}

/* Details section */
.details {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
	font-family: Kurale;
    font-size: 1.5em;
}

.details > ul {
    padding: 0;
    list-style: none;
    line-height: 2.5em;
    font-size: 0.8em;
}

/* Modify form components */
form {
    font-size: 1.4em;
    color: white;
}

/* Form focus styling */
#textAreaInput:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="file"]:focus, input[type="tel"]:focus {
    border-color: rgba(126, 239, 104, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 10px rgba(126, 239, 104, 0.7);
    outline: 0 none;
}

input[type="tel"]:invalid, input[type="email"]:invalid {
	color: red;
}

/* Comment section styling */
.commentSection {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 5px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6) inset, 2px -2px 4px rgba(0, 0, 0, 0.6) inset, -2px 2px 4px rgba(0, 0, 0, 0.6) inset, -2px -2px 4px rgba(0, 0, 0, 0.6) inset;
}

/* User icon styling */
.user {
	line-height: 2em;
	text-align: center;
	font-size: 2.5em;
}

/* Styling each comment */
.comment {
	padding: 15px 0 0 0;
	font-family: Expletus Sans, Maiandra GD;
	text-transform: capitalize;	
}

/* Styling the edit and delete buttons */
.commentButtons {
	padding: 10px;
	text-align: center;
	opacity: 0;
	transition: 0.4s all;
}


/* Show buttons when comment is hovered */
.commentRow:hover .commentButtons {
	opacity: 0.9;
	transform: translateY(15px);
}

/* Buttons for adding instances */
.button {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Span of the button */
.button span {
	color: white;
	position: absolute;
	margin: auto 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Polylines */
.o1 {
	fill: rgba(255, 255, 255, 0);
	transition: all 1s ease-in-out;
}

.o2 {
	stroke: rgba(255, 255, 255, 0.8);
	stroke-dasharray: 20 420;
	stroke-dashoffset: 20;
	transition: all 1s ease-in-out;
}

/* Hoovered effects */
.button:hover .o1 {
	fill: rgba(255, 255, 255, 1);
}
		
.button:hover .o2 {
	stroke-dashoffset: -420;
}

.button:hover span {
	color: black;
}

/* Animation svg */
svg {
	height: 55px;
	width: 150px;
	fill: none;
	stroke-width: 5;
	border-radius: 5px;
}

/* CREATE AND EDIT COMMENT PAGE ======================================*/
/* Create and Edit form styling */
/* Spacing from the top navbar */
.reviewForm {
	padding-top: 50px;
}

/* Placing the form to the center */
.reviewForm .form-control {
	width: 50%;
	margin: 0 auto;
}

/* Adjusting the elements to center */
.reviewForm label, .reviewForm .btn-tray, .reviewForm .upload_option {
	margin: 0 25%;
}

/* Header styling */
.reviewForm h2 {
	margin-top: 40px;
	margin-bottom: 50px;
	color: white;
	text-align: center;
	font-family: Righteous;
	font-size: 3.5em;
	background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	transition: all 0.4s;
}

/* Header hover effect */
.reviewForm h2:hover {
	transform: scale(1.2);
}

/* Style hr to show up white */
.reviewForm hr, .white-hr {
    height: 2px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

/* Hover effect for anchor tag */
.reviewForm a:hover {
	opacity: 0.5;
}

/* Personal picture */
#self {
	margin: auto;
}

/* Space properly */
hr:nth-child(3) {
	margin-top: 78px;
}

/* hr styling around the image */
#self hr {
	overflow: visible;
    height: 30px;
    border-style: solid;
    border-color: white;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

#self hr:before {  
	display: block;
    content: "";
    height: 30px;
    margin-top: -30px;
    border-style: solid;
    border-color: white;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

/* BONUS PAGE ========================================================= */
#colorGame {
    background-image: url("/images/color_game.jpg");
}

#melody {
    background-image: url("/images/color_rings.jpg");
}

#coming {
    background-image: url("/images/coming_soon.jpg");
    background-position: center;
}

/* COLOR GUESSING GAME =============================================== */
/* Body of the game html */
#guessColor {
	margin: 0;
	background-color: #232323;
}

/* Each square in the grid */
.square {
	width: 30%;
	margin: 1.66%;
	border-radius: 15%;
	padding-bottom: 30%;
	background: purple;
	float: left;
	transition: background 0.6s;
	-webkit-transition: background 0.6s;
	-moz-transition: background 0.6s;
}

/* Container of the grid */
#container {
	margin: 20px auto;
	max-width: 600px;
}

/* Title banner */
#gameTitle {
	text-align: center;
	line-height: 1.1;
    font-weight: normal;
    font-size: 4em;
	color: white;
	background: steelblue;
	margin: 0;
	text-transform: uppercase;
    padding: 20px 0;
    font-family: Philosopher, Trajan Pro;
    transform: none;
}

#gameInstruction {
	text-align: center;
    font-weight: normal;
    font-size: 2em;
	color: white;
	background: steelblue;
	margin: 0;
    padding: 10px 0;
    font-family: Philosopher, Trajan Pro;
    transform: none;
}

/* Span displaying the color to be guessed */
#colorDisplay {
	font-size: 150%;
}

/* Disclaimer */
#message {
	display: inline-block;
	width: 20%;
}

/* Strip below the title banner */
#stripe {
	background: white;
	height: 30px;
	text-align: center;
	color: black;
}

/* Mode selection highlighter */
.selected {
	color: white;
	background: steelblue;
}

/* Button styling */
.gameButton {
	border: none;
	background: none;
	text-transform: uppercase;
	height: 100%;
	font-weight: 700;
	color: steelblue;
	letter-spacing: 1px;
	font-size: inherit;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	outline: none;
}

/* Hovering effect on the buttons */
.gameButton:hover {
	color: white;
	background: steelblue;
}

/* COLOURED CIRCLES ========================================================= */
/* Game page html */
#gamePage {
	width: 100%;
	height: 100%;
	/* To fix the position, doesn't scroll */
	clip: auto;
	position: absolute;
	overflow: hidden;
	background: black;
}

/* Body of the html */
#canvasBody {
	height: 100%;
	margin: 0;
	background: black;
}

/* Canvas for animation */
#myCanvas {
	width: 100%;
	height: 80%;
	background: black;
}

/* Disclaimer */
h4 {
	font-family: Graduate;
	text-align: center;
	color: rgba(255, 255, 255, 0.74);
}

/*******************************************************************************************************************************************************/
/* Footer */
footer {
    margin-top: 20px;
	/* position: sticky;
    bottom: 0;
	width: 100%; */
}

.social_links {
    border-radius: 50%;
    transition: all 0.8s ease-in-out;
}

.social_links:hover {
    cursor: pointer;
    box-shadow: 2px 2px 10px #fff, -2px -2px 10px #fff, 2px -2px 10px #fff, -2px 2px 10px #fff,
                4px 4px 10px rgba(255, 255, 255, 0.6),  -4px -4px 10px rgba(255, 255, 255, 0.6), 
                4px -4px 10px rgba(255, 255, 255, 0.6),  -4px 4px 10px rgba(255, 255, 255, 0.6);
    /* transform: rotate(360deg); */
}

.social_links img {
    width: 60px;
    height: 60px;
}

.copyright {
    margin-top: 15px;
    text-align: center;
    color: rgba(233,236,239,0.5);
    transition: all 0.4s;
}

.copyright:hover {
    color: #e9ecef;
}

.copyright:last-child {
    text-align: right;
}

/*******************************************************************************************************************************************************/
/* Media queries */
/* Navbar button */
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* Home page */
@media screen and (max-width: 1530px) {
    h1 {
        font-size: 7em;
    }

    .card-title {
        font-size: 3em;
    }
	
	.card-text {
		padding: 0; 
	} 
}

/* Fade effect for pages */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
}

/* Rainbow navbar */
@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

/* Modal image display */
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
	
	.popup{
    	width: 70%;
  }
}

/* Logo Rotation */
@keyframes rotation {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(359deg);
    }
}