body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video
{
    font: inherit;
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section
{
    display: block;
}
body
{
    line-height: 1;
}
ol,
ul
{
    list-style: none;
}
blockquote,
q
{
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after
{
    content: '';
    content: none;
}

table
{
    border-spacing: 0;
    border-collapse: collapse;
}


body
{
    font-family: 'PT Sans', sans-serif;

    min-height: 740px;

    background: rgb(215, 215, 215);
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
    background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:    -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:     -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:      -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background:         radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
}

b,
strong
{
    font-weight: bold;
}
i,
em
{
    font-style: italic;
}

a
{
    padding: 0 .1em;

    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
    text-decoration: none;

    color: inherit;
    border-radius: .2em;
    background: rgba(255,255,255,.5);
    text-shadow: -1px -1px 2px rgba(100,100,100,.9);
}

a:hover,
a:focus
{
    background: rgba(255,255,255,1);
    text-shadow: -1px -1px 2px rgba(100,100,100,.5);
}


.fallback-message
{
    font-family: sans-serif;
    line-height: 1.3;

    width: 780px;
    margin: 20px auto;
    padding: 10px 10px 0;

    border: 1px solid #e4c652;
    border-radius: 10px;
    background: #eedc94;
}

.fallback-message p
{
    margin-bottom: 10px;
}

.impress-supported .fallback-message
{
    display: none;
}



.step
{
    font-family: 'PT Serif', georgia, serif;
    font-size: 48px;
    line-height: 1.5;

    position: relative;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 900px;
    margin: 20px auto;
    padding: 40px;

        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
}


.impress-enabled .step
{
    margin: 0;

    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
        -ms-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;

    opacity: .04;
}

.impress-enabled .step.active
{
    opacity: 1;
}


.slide
{
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 30px;
    line-height: 36px;

    display: block;

    letter-spacing: -1px;

    color: rgb(6, 50, 61);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
}

.slide q
{
    font-size: 50px;
    line-height: 72px;

    display: block;
    /*margin-top: 100px;*/
}

.slide q strong
{
    white-space: nowrap;
}



#title
{
    padding: 0;
}

#title .try
{
    font-size: 64px;

    position: absolute;
    top: -.5em;
    left: 1.5em;

    -webkit-transform: translateZ(20px);
       -moz-transform: translateZ(20px);
        -ms-transform: translateZ(20px);
         -o-transform: translateZ(20px);
            transform: translateZ(20px);
}

#title h1
{
    font-size: 190px;

    -webkit-transform: translateZ(50px);
       -moz-transform: translateZ(50px);
        -ms-transform: translateZ(50px);
         -o-transform: translateZ(50px);
            transform: translateZ(50px);
}

#title .footnote
{
    font-size: 32px;
}


#big
{
    font-size: 60px;
    line-height: 1;

    z-index: 9999999;

    width: 1200px;

    text-align: center;
}

#big b
{
    font-size: 250px;
    line-height: 250px;

    display: block;
}

#big .thoughts
{
    font-size: 190px;
    line-height: 150px;
}



#cases
{
    font-size: 60px;
    line-height: 1;

    z-index: 9999999;

    width: 1200px;

    text-align: center;
}

#cases b
{
    font-size: 250px;
    line-height: 250px;

    display: block;
}


#cases .thought
{
    font-size: 136px;
    line-height: 150px;
}
.a p
{
    font-size: 136px;
    line-height: 150px;
}



#tiny
{
    width: 500px;

    text-align: center;
}

#ing
{
    width: 900px;
}


#ing b
{
    display: inline-block;

    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
}


#ing.present .positioning
{
    -webkit-transform: translateY(-10px);
       -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
         -o-transform: translateY(-10px);
            transform: translateY(-10px);
}

#ing.present .rotating
{
    -webkit-transition-delay: .25s;
       -moz-transition-delay: .25s;
        -ms-transition-delay: .25s;
         -o-transition-delay: .25s;
            transition-delay: .25s;
    -webkit-transform: rotate(-10deg);
       -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
         -o-transform: rotate(-10deg);
            transform: rotate(-10deg);
}

#ing.present .scaling
{
    -webkit-transition-delay: .5s;
       -moz-transition-delay: .5s;
        -ms-transition-delay: .5s;
         -o-transition-delay: .5s;
            transition-delay: .5s;
    -webkit-transform: scale(.7);
       -moz-transform: scale(.7);
        -ms-transform: scale(.7);
         -o-transform: scale(.7);
            transform: scale(.7);
}

#imagination
{
    width: 600px;
}

#imagination .imagination
{
    font-size: 78px;
}


#source
{
    width: 700px;
    padding-bottom: 300px;

    background-image: url(../img/3.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

#source q
{
    font-size: 60px;
}
#source1
{
    width: 700px;
    padding-bottom: 300px;

    background-image: url(../img/ebay.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}
#source2
{
    width: 700px;
    padding-bottom: 300px;

    background-image: url(../img/flipkart.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}
#source33
{
    width: 700px;
    padding-bottom: 300px;

    background-image: url(../img/phising.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

#source56
{
    width: 700px;
    padding-bottom: 300px;
    background-image: url(../img/rbn.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}
{
    width: 700px;
    padding: 100px 0 200px 0 ;

    background-image: url(../img/hack.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}
#source4
{
    width: 700px;
    padding-bottom: 220px;

    background-image: url(../img/win10.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}
#source5
{
    width: 700px;
    padding-bottom: 300px;

    background-image: url(../img/ubuntu.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

#source1,
#source3,
#source4,
#source5 q
{
    font-size: 60px;
}



#its-in-3d p
{
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d; /* Y U need this Firefox?! */
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}


#its-in-3d span,
#its-in-3d b
{
    display: inline-block;

    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}

#its-in-3d .have
{
    -webkit-transform: translateZ(-40px);
       -moz-transform: translateZ(-40px);
        -ms-transform: translateZ(-40px);
         -o-transform: translateZ(-40px);
            transform: translateZ(-40px);
}

#its-in-3d .you
{
    -webkit-transform: translateZ(20px);
       -moz-transform: translateZ(20px);
        -ms-transform: translateZ(20px);
         -o-transform: translateZ(20px);
            transform: translateZ(20px);
}

#its-in-3d .noticed
{
    -webkit-transform: translateZ(-40px);
       -moz-transform: translateZ(-40px);
        -ms-transform: translateZ(-40px);
         -o-transform: translateZ(-40px);
            transform: translateZ(-40px);
}

#its-in-3d .its
{
    -webkit-transform: translateZ(60px);
       -moz-transform: translateZ(60px);
        -ms-transform: translateZ(60px);
         -o-transform: translateZ(60px);
            transform: translateZ(60px);
}

#its-in-3d .in
{
    -webkit-transform: translateZ(-10px);
       -moz-transform: translateZ(-10px);
        -ms-transform: translateZ(-10px);
         -o-transform: translateZ(-10px);
            transform: translateZ(-10px);
}

#its-in-3d .footnote
{
    font-size: 32px;

    -webkit-transform: translateZ(-10px);
       -moz-transform: translateZ(-10px);
        -ms-transform: translateZ(-10px);
         -o-transform: translateZ(-10px);
            transform: translateZ(-10px);
}

#its-in-3d.present span,
#its-in-3d.present b
{
    -webkit-transform: translateZ(0px);
       -moz-transform: translateZ(0px);
        -ms-transform: translateZ(0px);
         -o-transform: translateZ(0px);
            transform: translateZ(0px);
}


#overview
{
    display: none;
}


.impress-on-overview .step
{
    cursor: pointer;

    opacity: 1;
}



.hint
{
    font-size: 50px;

    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 200px;
    left: 0;

    display: none;

    padding: 20px;

    -webkit-transition: opacity 1s, -webkit-transform .5s 1s;
       -moz-transition: opacity 1s,    -moz-transform .5s 1s;
        -ms-transition: opacity 1s,     -ms-transform .5s 1s;
         -o-transition: opacity 1s,      -o-transform .5s 1s;
            transition: opacity 1s,         transform .5s 1s;
    -webkit-transform: translateY(400px);
       -moz-transform: translateY(400px);
        -ms-transform: translateY(400px);
         -o-transform: translateY(400px);
            transform: translateY(400px);
    text-align: center;

    opacity: 0;
    color: #eee;
    background: rgba(0,0,0,.5);
}


.impress-enabled .hint
{
    display: block;
}


.impress-on-bored .hint
{
    -webkit-transition: opacity 1s 5s, -webkit-transform .5s 4.5s;
       -moz-transition: opacity 1s 5s,    -moz-transform .5s 4.5s;
        -ms-transition: opacity 1s 5s,     -ms-transform .5s 4.5s;
         -o-transition: opacity 1s 5s,      -o-transform .5s 4.5s;
            transition: opacity 1s 5s,         transform .5s 4.5s;
    -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
         -o-transform: translateY(0px);
            transform: translateY(0px);

    opacity: 1;
}

.impress-enabled
{
    pointer-events: none;
}
.impress-enabled #impress
{
    pointer-events: auto;
}
  

.content22 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 35px;
  line-height: 40px;
  font-family: 'Muli';
  color: #ecf0f1;
  height: 160px;
  overflow: hidden;
}

.visible {
  font-weight: 600;
  overflow: hidden;
  height: 40px;
  padding: 0 40px;
}
.visible:before {
  content: '[';
  left: 0;
  line-height: 40px;
}
.visible:after {
  content: ']';
  position: absolute;
  right: 0;
  line-height: 40px;
}
.visible:after, .visible:before {
  position: absolute;
  top: 0;
  color: #16a085;
  font-size: 42px;
  -webkit-animation: 2s linear 0s normal none infinite opacity;
          animation: 2s linear 0s normal none infinite opacity;
}


#jack {
  margin-top: 0;
  padding-left: 110px;
  text-align: left;
  list-style: none;
  -webkit-animation: 6s linear 0s normal none infinite change;
          animation: 6s linear 0s normal none infinite change;
}

#jack li {
  line-height: 40px;
  margin: 0;
}

@-webkit-keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes change {
  0%, 12%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  17%,29% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  34%,46% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  51%,63% {
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
  }
  68%,80% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  85%,97% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
}
@keyframes change {
  0%, 12%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  17%,29% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  34%,46% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  51%,63% {
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
  }
  68%,80% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  85%,97% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
}


.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
    stroke: #4D163D;
    animation-delay: -1;
}

.text-copy:nth-child(2){
    stroke: #840037;
    animation-delay: -2s;
}

.text-copy:nth-child(3){
    stroke: #BD0034;
    animation-delay: -3s;
}

.text-copy:nth-child(4){
    stroke: #BD0034;
    animation-delay: -4s;
}

.text-copy:nth-child(5){
    stroke: #FDB731;
    animation-delay: -5s;
}

@keyframes stroke-offset{
    100% {stroke-dashoffset: -35%;}
}

#earth {
  width: 300px;
  height: 300px;
  margin: 20px auto 0;
  background: url(../img/qq9503.jpg);
  border-radius: 50%;
  background-size: 610px;
  box-shadow: inset 8px 36px 80px 36px rgb(0, 0, 0), inset -6px 0 12px 4px rgba(255, 255, 255, 0.3);
  animation-name: rotate;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 610px 0px;
  }
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0.0; }
}