Notes

/* SCORPİOL CSS */
/* Scorpiol */

@font-face {
font-family: 'BebasNeueRegular';
font-weight: normal;
font-style: normal;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
body{
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
background: #000;
font-weight: 400;
font-size: 15px;
color: #aa3e03;
overflow-y: scroll;
overflow-x: hidden;
}
.ie7 body{
overflow:hidden;
}
a{
color: #333;
text-decoration: none;
}
.container{
position: relative;
text-align: center;
}
.clr{
clear: both;
}
.container > header{
padding: 30px 30px 10px 20px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: left;
}
.container > header h1{
font-family:font-family:Orbitron;
font-size: 35px;
line-height: 35px;
position: relative;
font-weight: 400;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
padding: 0px 0px 5px 0px;
}
.container > header h1 span{

}
.container > header h2, p.info{
font-size: 16px;
font-style: italic;
color: #f8f8f8;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
/* Header Style */
.bbhh-top{
font-family: Arial, sans-serif;
line-height: 24px;
font-size: 11px;
width: 100%;
background: black;
opacity: 0.9;
text-transform: uppercase;
z-index: 9999;
position: relative;
-moz-box-shadow: 1px 0px 2px #000;
-webkit-box-shadow: 1px 0px 2px #000;
box-shadow: 1px 0px 2px #000;
}
.bbhh-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #ddd;
display: block;
float: left;
}
.bbhh-top a:hover{
color: #fff;
}
.bbhh-top span.right{
float: right;
}
.bbhh-top span.right a{
float: none;
display: inline;
}
p.bbhh-hacker{
display: block;
padding: 15px 0px;
}
p.bbhh-hacker a,
p.bbhh-hacker a.current-xxx,
p.bbhh-hacker a.current-xxx:hover{
display: inline-block;
border: 1px solid #6d0019;
padding: 4px 10px 3px;
font-size: 13px;
line-height: 18px;
margin: 2px 3px;
font-weight: 800;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
color:#fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #a90329;
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
}
p.bbhh-hacker a:hover{
background: #6d0019;
}
p.bbhh-hacker a:active{
background: #6d0019;
background: -moz-linear-gradient(top, #6d0019 0%, #8f0222 56%, #a90329 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d0019), color-stop(56%,#8f0222), color-stop(100%,#a90329));
background: -webkit-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%);
background: -o-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%);
background: -ms-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%);
background: linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%);
-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9);
box-shadow: 0px 1px 1px rgba(255,255,255,0.9);
}
p.bbhh-hacker a.current-xxx,
p.bbhh-hacker a.current-xxx:hover{
color: #A5727D;
background: #6d0019;
}

/* Media Queries */
@media screen and (max-width: 767px) {
.container > header{
text-align: center;
}
p.bbhh-hacker {
position: relative;
top: auto;
left: auto;
}
}
.toxic-phantom{
background:transparent;
color:#fff;
border:1px solid #333;
box-shadow:0px 9px 15px white;
position:fixed;
left:20px;
z-index:10;
top:1;
padding:20px;
border-radius:10px;
opacity:0.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
}
.toxic-phantom:hover {
-webkit-animation:tremer 0.2s linear infinite;
-moz-animation:tremer 0.2s linear infinite;
-o-animation:tremer 0.2s linear infinite;
animation:tremer 0.2s linear infinite;
}
.arie{
background:transparent;
opacity:0.8;
color:#fff;
border:none;
position:fixed;
left:20px;
z-index:10;
top:1;
padding:20px;
}
.arie:hover {
-webkit-animation:tremer 0.2s linear infinite;
-moz-animation:tremer 0.2s linear infinite;
-o-animation:tremer 0.2s linear infinite;
animation:tremer 0.2s linear infinite;
}
.hacked {
font-size: 35px;
font-weight: bold;
color: black;
}
.neon{
color:white;
text-shadow: 0 0 5px red,0 0 10px red, 0 0 30px orange, 0 0 45px yellow, 0 0 60px red;
}
table{
background:transparent;
border:none;
}
h2{
z-index: 1;
top: 10%; font-family:Orbitron;
width:auto;
text-align: center;
text-shadow: 0 0 3px purple;
transition: 1000ms linear 0s;
-webkit-transition: 1000ms linear 0s;
-webkit-animation: blink 3s infinite;
animation: blink 3s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
h2:hover,h2:focus{
color:gold;
text-shadow: 0 0 20px #0F0;
}
h2:first-line{
font-size: 150%;
}
h3{
z-index: 1;
font-family:Orbitron;
width:auto;
text-shadow: 0 0 3px #0F0; transition: 1000ms linear 0s;
-webkit-transition: 1000ms linear 0s;
-webkit-animation: blink 3s infinite;
animation: blink 3s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
h3:hover,h3:focus{
color:white;
text-shadow: 0 0 30px #0F0;
}
h3:first-line{
font-size: 100%;
}
@-webkit-keyframes blink {
0% {text-shadow: 0 0 1px #0F0;}
5%{text-shadow: 0 0 5px #0F0;}
10%{text-shadow: 0 0 10px #0F0;}
15%{text-shadow: 0 0 11px #0F0;}
20%{text-shadow: 0 0 12px #0F0;}
25%{text-shadow: 0 0 13px #0F0;}
30%{text-shadow: 0 0 14px #0F0;}
35%{text-shadow: 0 0 15px #0F0;}
40%{text-shadow: 0 0 16px #0F0;}
45%{text-shadow: 0 0 17px #0F0;}
50% {text-shadow: 0 0 18px #0F0;}
60% {text-shadow: 0 0 17x #0F0;}
70% {text-shadow: 0 0 16x #0F0;}
80% {text-shadow: 0 0 13 #0F0;}
90% {text-shadow: 0 0 10px #0F0;}
100% {text-shadow: 0 0 1px #0F0;}
}
@keyframes blink {
0% {text-shadow: 0 0 1px #0F0;}
5%{text-shadow: 0 0 5px #0F0;}
10%{text-shadow: 0 0 10px #0F0;}
15%{text-shadow: 0 0 11px #0F0;}
20%{text-shadow: 0 0 12px #0F0;}
25%{text-shadow: 0 0 13px #0F0;}
30%{text-shadow: 0 0 14px #0F0;}
35%{text-shadow: 0 0 15px #0F0;}
40%{text-shadow: 0 0 16px #0F0;}
45%{text-shadow: 0 0 17px #0F0;}
50% {text-shadow: 0 0 18px #0F0;}
60% {text-shadow: 0 0 17x #0F0;}
70% {text-shadow: 0 0 16x #0F0;}
80% {text-shadow: 0 0 13 #0F0;}
90% {text-shadow: 0 0 10px #0F0;}
100% {text-shadow: 0 0 1px #0F0;}
}
@keyframes tremer {
0% {transform: rotate(3deg);}
50% {transform: rotate(-3deg);}
100% {transform: rotate(3deg);}
}
@-o-keyframes tremer {
0% {-o-transform: rotate(3deg);}
50% {-o-transform: rotate(-3deg);}
100% {-o-transform: rotate(3deg);}
}
@-moz-keyframes tremer {
0% {-moz-transform: rotate(3deg);}
50% {-moz-transform: rotate(-3deg);}
100% {-moz-transform: rotate(3deg);}
}
@-webkit-keyframes tremer {
0% {-webkit-transform: rotate(3deg);}
50% {-webkit-transform: rotate(-3deg);}
100% {-webkit-transform: rotate(3deg);}
}

/* Social */
@keyframes mymove { 0% {top:130px;} 50% {top:150px;} 100% {top:130px;} }
@-moz-keyframes mymove { 0% {top:130px;} 50% {top:135px;} 100% {top:130px;} }
@-webkit-keyframes mymove { 0% {top:130px;} 50% {top:140px;} 100% {top:130px;} }
@-o-keyframes mymove { 0% {top:130px;} 50% {top:135px;} 100% {top:130px;} }
#buttons{
width:80px; margin-top:10px; float:right; position:absolute; right:20px;
animation:mymove 0.5s ease 5s 7;
-moz-animation:mymove 0.5s ease 5s 7;
-webkit-animation:mymove 0.5s ease 5s 7;
-o-animation:mymove 0.5s ease 5s 7;
}
#fb,#g1,#tw,fb{
float:left;
margin:0 5px;
width:60px;
height:63px;
text-align:center;
margin-bottom:10px;
padding:7px 2px;
border:2px solid green;
background:#222;
border-radius:10px;
}
#fb span {
width:50px !important
}
#fb .fb_iframe_widget iframe{
position:relative
}
.bbhh-slideshow,
.bbhh-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.bbhh-slideshow:after {
content: '';
background: transparent url(https://googledrive.com/host/0B7THSYiNCrqJbW5WYklNQWI4cm8) repeat top left;
}
.bbhh-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.bbhh-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.bbhh-slideshow li div h3 {
font-family:Orbitron;
font-size: 120px;
color:#000;
padding: 0 30px;
line-height: 120px;
text-shadow: 0 0 3px #0F0; transition: 1000ms linear 0s;
-webkit-transition: 1000ms linear 0s;
-webkit-animation: blink 3s infinite;
animation: blink 3s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.bbhh-slideshow li:nth-child(1) span {
background-image: url(http://anti-ddos-protection.com/wp-content/uploads/2015/03/laptop-hacker.jpg)
}
.bbhh-slideshow li:nth-child(2) span {
background-image: url(https://s3.amazonaws.com/auteurs_production/images/film/who-am-i-no-system-is-safe/w1280/who-am-i-no-system-is-safe.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.bbhh-slideshow li:nth-child(3) span {
background-image: url(http://static.hdw.eweb4.com/media/wallpapers_1920x1080/anime/1/1/gas-mask-anime-hd-wallpaper-1920x1080-1271.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.bbhh-slideshow li:nth-child(4) span {
background-image: url(https://lh5.googleusercontent.com/-TYXvwEBIw2s/U5xP6NOM1gI/AAAAAAAAACQ/8YBrAmkyhKs/w1920-h1200/hoodies-in-the-rain-photography-hd-wallpaper-1920x1200-2546.png);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.bbhh-slideshow li:nth-child(5) span {
background-image: url(https://mudfireandbarbedwire.files.wordpress.com/2014/06/anonymous_mask_sunglasses_man_wallpaper_1680x1_by_muhammadabdulbasit-d6lid4q.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.bbhh-slideshow li:nth-child(6) span {
background-image: url(http://i.amz.mshcdn.com/-AN4-7bMpkzAugoKazGo_g06weA=/1200x627/2014%2F04%2F04%2F48%2FCyberhackin.5856f.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.bbhh-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.bbhh-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.bbhh-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.bbhh-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.bbhh-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .bbhh-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.bbhh-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.bbhh-slideshow li div h3 { font-size: 50px }
}