/* ----- Majestic Comics Custom CSS ----- */
html, body {} 

.center { margin: 0 auto; text-align:center; width:100%; }

img.profile-image {
  width: 720px;
  height: auto;
  position: relative;
  animation: spin 4s linear infinite, glow 2s ease-in-out alternate infinite;
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5); /* slow glow effect */
}

img.profile-image:hover {
  animation: flip 0.5s ease-out forwards, glow-big 0.25s ease-in-out alternate forwards;
}

@keyframes spin {
  to {
    transform: rotateY(1turn);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 30px 15px rgba(255, 255, 255, 1);
  }
}

@keyframes flip {
  100% {
    transform: rotateY(180deg) scale(-1,1);
  }
}

@keyframes glow-big {
  0% {
    box-shadow: 0 0 50px 20px rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 70px 30px rgba(255, 255, 255, 1);
  }
}

img.profile-image:active {
  animation: glitch 0.1s ease-in-out alternate 5;
}

@keyframes glitch {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9) translate(5px, -5px);
  }
  100% {
    transform: scale(1) translate(-5px, 5px);
  }
}








.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
    font-size: 24px;
}
.uk-section {
    padding-top: 35px;
    padding-bottom: 35px;
}
.footer-text { text-align:left; font-size:14px; }
.footer-logo { position:absolute; right:0; top:-30px; }

.fab { }
div.socialnets { font-size:64px; 
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around; }
a.socialnets { font-size:64px; }
i.socialnets { margin:10px; }
.uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover {
    color: rgba(255,255,255,0.99) ;
    text-decoration: none; }


.uk-card-title {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700; 
	text-transform:uppercase; }

.uk-article-title {
    font-size: 32px;
}





/* ----- QL Base Structure ----- 
#tm-main {
background-image: url(https://majesticcomics.com/images/website/celestialwars-naked.jpg);
background-size: cover; }
.uk-section-default {
    background:transparent;
}
.tm-bottom { background:inherit;
background-image: url(https://majesticcomics.com/images/website/celestialwars-naked.jpg);
background-size: cover; }
.uk-section { background:inherit;
background-image: url(https://majesticcomics.com/images/website/celestialwars-naked.jpg);
background-size: cover; }

.uk-lightbox {
    background-color:green;
    background: url(https://majesticcomics.com/images/website/celestialwars-naked.jpg);
  background-size: cover;
    opacity: 0.5; }

div.logo-ftr { position:absolute; right:0; top:0; width:240px; }

----- */
/* ----- 00 HomeOne Yellow ----- */
div.sg0Wrap { display:flex; flex-flow:row wrap; justify-content:space-around; } 
div.sg0Each { margin:20px 40px; } 
div.sg0Text { text-align:center; font-size:12px; width:64px; }
div.sg0Text>a { color:purple; text-decoration:none; text-decoration: none; }
div.sg0Text { color:purple; text-decoration:none; }
div.sg0Text:hover { color:white; text-decoration:underline; }

fieldset.sg0Fieldset { border:1px solid #ffd966; background-color:rgba(255,217,102,0.1); }
legend.sg0Legend { border: 1px solid #ffd966; background-color:rgba(255, 217, 102, 0.5); } 
div.sg0Each:hover { }

.sg0Link { color:purple; text-decoration:none; }

img.sg0Imag { width:64px; }
img.sg0Imag:hover { width:64px; box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.6); 
    background-color: rgba(255, 255, 255, 0.6); border-radius: 15px;}

/* ----- 01 Persona Green ----- */
fieldset.sg1Fieldset { border:1px solid #93c47d; background-color:rgba(147,196,125,0.1); }
legend.sg1Legend { border: 1px solid #93c47d; background-color:rgba(147,196,125,0.5); } 
div.sg1Each:hover { background-color:rgba(147,196,125,0.5); }	
/* ----- 02 Business Blue ----- */
fieldset.sg2Fieldset { border:1px solid #6fa8dc; background-color:rgba(111,168,220,0.1); }
legend.sg2Legend { border: 1px solid #6fa8dc; background-color:rgba(111,168,220,0.5); } 
div.sg2Each:hover { background-color:rgba(111,168,220,0.5); }
/* ----- 03 Social Purple ----- */
fieldset.sg3Fieldset { border:1px solid #8e7cc3; background-color:rgba(142,124,195,0.1); }
legend.sg3Legend { border: 1px solid #8e7cc3; background-color:rgba(142,124,195,0.5); } 
div.sg3Each:hover { background-color:rgba(142,124,195,0.5); }	
/* ----- 04 Media Red ----- */
fieldset.sg4Fieldset { border:1px solid #cc4125; background-color:rgba(204,65,37,0.1); }
legend.sg4Legend { border: 1px solid #cc4125; background-color:rgb(204,65,37,0.5); } 
div.sg4Each:hover { background-color:rgba(204,65,37,0.5); }	
/* ----- 05 Projects Orange ----- */
fieldset.sg5Fieldset { border:1px solid #f6b26b; background-color:rgba(246,178,107,0.1); }
legend.sg5Legend { border: 1px solid #f6b26b; background-color:rgba(246,178,107,0.5); } 
div.sg5Each:hover { background-color:rgba(246,178,107,0.5); }	
/* ----- 06 Contact Brown ----- */
fieldset.sg6Fieldset { border:1px solid #663300; background-color:rgba(102, 51, 0, 0.3); }
legend.sg6Legend { border: 1px solid #663300; background-color:rgba(102, 51, 0, 0.3); } 
div.sg6Each:hover { background-color:rgba(0,0,0,0.5); }	
/* ----- 07 Private Black ----- */
fieldset.sg7Fieldset { border:1px solid #000000; background-color:rgba(0,0,0,0.1); }
legend.sg7Legend { border: 1px solid #000000; background-color:rgba(0,0,0,0.5); } 
div.sg7Each:hover { background-color:rgba(0,0,0,0.5); }	
/* ----- 09 SysAdmin Grey ----- */
fieldset.sg9Fieldset { border:1px solid #b7b7b7; background-color:rgba(183,183,183,0.1); }
legend.sg9Legend { border: 1px solid #b7b7b7; background-color:rgba(183,183,183,0.5); } 
div.sg9Each:hover { background-color:rgba(183,183,183,0.5); }	


/* ----- Majestic Comics Custom END ----- */