body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 100;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow-x: hidden;
}
adhoc,ttl,sublock,context,fun,certs,blog,#warning,loading{
    width:100%;
    position: relative;    
    display:flex;
    align-items: center;
    justify-content: center;
}
ttl{
   padding: 100px 10px 10px 10px;
}
ttl * {
    float:left;
}
ttl.collapsed {
    padding: 40px 10px 10px 10px;
    animation:clpser 1s ease 1;
}
@keyframes clpser{
    from{
        display: inline-block;
        flex-direction: row;        
    }
    to{
        display:initial;
        flex-direction:initial;
    }
}
adhoc {
    width:200px;
    height:200px;
    border-radius: 100px;
    color:rgba(0,0,0,1);
    background: rgba(0,0,0,.0);
    font-size: 44px;
}

adwrap.collapsed {
    width:80px;
    height: 80px;
    position: relative;
}


title *,menu * {
    transition-duration: 1s;
}
adwrap.collapsed adhoc{
    width:80px;
    height:80px;
    font-size: 20px;
    transition-duration: 1s;
    position: absolute;
    top:0;
    left:0;
}
.invert{
    color:rgba(255,255,255,1);
    background: rgba(0,0,0,.7);
    transition-duration:3s;    
}
.bdr {
    border-width: 1px;
    border-style: solid;
}
@keyframes rbw{
    0%{background:rgba(0,0,0,.7);}
    16%{background:rgba(72,0,0,.7);}
    32%{background:rgba(0,72,0,.7);}
    48%{background:rgba(0,0,72,.7);}
    64%{background:rgba(72,0,72,.7);}
    70%{background:rgba(72,72,0,.7);}
    86%{background:rgba(0,72,72,.7);}
    100%{background:rgba(0,0,0,.7);}
}
.show{
    border-top:1px solid rgba(0,0,0,.5);
    color:rgba(0,0,0,.7);
    transition-duration: 1s;
}

subtitle,menu,services,team,contact,compliment,context,uncontent{
    display: inline-block;
    width:584px;
}
subtitle * {
    float:left;
}
subtitle.collapsed {
    font-size: 25px ;
    transition-duration: 1s;
    padding: 0 0 0 10px;
}

subtitle.collapsed suba, subtitle.collapsed subb {
    font-size: 23px;
}
subtitle.collapsed subc {
    font-size: 26px;
}
subtitle.collapsed subd{
    display: none;
}
suba{
    color:rgba(0,0,0,.7);
    font-size: 54px;
}
subb{    
    font-size: 54px;
}
subc{
    width:100%;
    font-size: 60px;
}
subd{
    text-align: right;
    font-size: 26px;    
    margin:10px 0 0px 0;
    padding:10px;
}
subd,menu{
    visibility: hidden;
    color:rgba(0,0,0,0);    
    position: relative;
}
menu.show, subd.show {
    visibility: initial;
}
menu {
    text-align: center;
    font-size: 20px;
    margin:0 0 0 0;
    padding: 10px 0 30px 0;
    text-transform: capitalize;
}
wand{
    position: absolute;
    right:0;
    width: 200px;
}
orb{
    background:rgba(255,100,100,1);
    position: absolute;
    right:-12;
    bottom:-12;
    width:0;
    height:0;
    border-radius:24px;
    z-index: 11;
}
wand.animate {
    animation:3s 1 LL linear;
}
orb.animate{
    animation:3s 1 LO linear;
}
orb.again{
    width: 20px;height:20px; right:100px; top:520px;
    background:rgba(0,0,0,0);
    border:1px solid rgba(255,00,100,.7); 
    visibility: hidden !important;
}
orb.reborn{
    width:20px;
    height:20px;
    transition-duration: 1s;
    background:rgba(0,0,0,0);
    border:1px solid rgba(255,00,100,.7); 
    visibility: hidden;
}
.whirl{
    animation:whirl 1.02s ease;
    animation-iteration-count: 1;
    background: rgba(0,100,43,.3);
    margin:0;
}
@keyframes whirl {
    0%{ margin-top: 9px; background: rgba(0,100,43,.0);}
    30%{margin-top:-7px;background: rgba(43,43,100,.0);}
    60%{margin-top:5px;background: rgba(100,43,43,.0);}
    90%{margin-top:-3px;background:  rgba(0,100,43,.0);}
    100%{margin-top:0px;background:  rgba(0,100,43,.0);}
}
.mhirl{
    animation:mhirl 1.02s ease;
    animation-iteration-count: 1;
    border: 1px solid rgba(0,100,43,.3);
    margin:0;
}
@keyframes mhirl {
    0%{ margin-left: 7px; border:1px solid  rgba(0,100,43,.5);}
    30%{margin-left:-9px; border: 1px solid rgba(43,43,100,.4);}
    70%{margin-left:5px; border: 1px solid rgba(100,43,43,.4);}
    100%{margin-left:-6px; border: 1px solid rgba(0,100,43,.3);}
}

@keyframes LO {
    0%{width: 24px;height:24px; }
    10%{width: 34px;height:34px; right:-17px;top:-17px; }
    20%{width: 14px;height:14px; right:-7px;top:-7px; }
    30%{width: 24px;height:24px; right:-12px;top:-12px; }
    70%{width: 24px;height:24px; right:-12px; top:-12px; }
    90%{width: 14px;height:14px; right:-7px; top:-7px; }
    100%{width: 1px;height:1px; }
}
@keyframes LL {
    0%{ transform:rotate(0deg); }
    25%{ transform:rotate(0deg); }
    50%{ transform:rotate(0deg);}
    75%{ transform:rotate(180deg);}
    100%{ transform:rotate(360deg);}
}
#sv650{
    position: absolute;
    top:-102px;
    left:-2px;
    z-index: 0;
    transform:rotate(173deg);
    width:203px;
    height: 203px;
}
#sv650 path {
    stroke:rgba(0,0,0,0);
    z-index: 1;
}
#sv650 path.animate{    
    stroke-dasharray: 628.5;
    stroke-dashoffset: 628.5;
    animation: stream 3s linear forwards;
}
@keyframes stream {
    from {
        stroke:rgba(0,0,0,1);
    }
    to {
      stroke:rgba(0,0,0,0);
      stroke-dashoffset: 0;
    }
  }
menu a {
    float:left;
}
heavy a, menu a {
    color:rgba(0,0,0,0);
}
heavy.show a,menu.show a{
    
    text-decoration: none;
    font-weight: bold;
    padding:0;
    color:rgba(0,0,0,.7);
}

menu.show a:hover{
    cursor: pointer;
    color:rgba(255,100,100,1);
}

subd.show::before, menu.collapsed::before {
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 5.5px;
    background-color:rgba(0,0,0,.5);
    position: absolute;
    left:-11px;
    top:-5.5px;
}
menu.show::after{
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 5.5px;
    background-color:rgba(0,0,0,.5);
    position: absolute;
    right:-11px;
    top:-5.5px;
}
uncontent{
    display:none;
}
heavy{
    position: relative;
    width:100%;
    left:0;
    bottom:0;
    right:0;
    height: 90px;
    color:rgba(0,0,0,0);
}

heavy.show{
    font-size: 12px;
    background:white;
}
copyright,registration{
    width:60%;
    text-align: center;
    float:left;
    padding: 5px 20%  5px 20%;
}
certs{
    padding: 50px 0 50px 0;
    flex-direction: column;
}
certs img {
    margin: 5px;
}
.q {
    width:24.5%;
}
.h {
    display: none;
    width:16%;
}

team,contact,compliment{
    width:100%;
    float:left;
    padding:5px;
    text-align: justify;
}
nav {
    text-align: right;
    padding: 5px 0 5px 0;
}
services nav {
    font-weight: 100;
}
nav:before{
    content:'+ ';
}
nav:hover{
    cursor:pointer !important;
    color:rgba(255,100,100,1);
}
team {

}
contact {

}
compliment {
    border-radius: 5px;
    margin: 5px 0 5px 0;
    display: 'inline-block';
    text-align: right;
    font-weight: 600;
}
compliment words{
    float:left;
    font-family: 'Handlee', cursive;
    width:100%;
    color:steelblue;
    text-align: left;
    font-weight: 400;
}
compliment words:before,compliment words:after{
    content:'"';
}
mrbl{
    position: absolute;
    width:14px;
    height: 14px;
    border-radius: 17px;
    background:rgba(0,0,0,0);
    border:1px solid limegreen;
    transition-duration: 1s;
}
services ttl, services txt {
    text-align: right;
    width:100%;
    float:left;    
}
services h4, team h4 {
    display:none;
}
services ttl,services nvv, tle star, services star {
    width:100%;
    float: left;
}
context {
    margin-top:10px;
    margin-bottom: 10px;
    padding: 10px 5px 10px 5px;
    border-radius:5px;
    text-align: center;
}
context star {
    margin: 0 40px 0 40px;
    width: 100%;
    float: left;
    font-size: 20px;
    display: contents;
}

.az {
    animation:AZ 30s ease alternate infinite;
    animation-iteration-count: infinite;
}
@keyframes AZ {
    0%{  color: rgba(0,0,100,.7);}
    33%{ color: rgba(0,100,0,.7);}
    40%{ color: rgba(100,0,0,.7);}
    66%{ color: rgba(0,0,100,.7);}
    84%{ color: rgba(0,100,100,.7);}
    100%{color: rgba(100,0,0,.7);}
}
.ax{
    animation:AX 30s ease alternate infinite;
    animation-iteration-count: infinite;
}
@keyframes AX {
    0%{opacity:.9;color:black;}
    33%{opacity:1;color:rgba(62, 39, 95, 0.7);}
    40%{opacity:.9;}
    66%{opacity:.7; color:rgb(250, 96, 44);}
    84%{opacity:1; color:rgb(80, 103, 124);}
    100%{opacity:1; color:black;}
}
.av{
    animation:AV 70s ease alternate infinite;
    animation-iteration-count: infinite;
}
@keyframes AV {
    0%{opacity:.9;color:black;}
    33%{opacity:1;color:rgba(61, 54, 68, 0.7);}
    40%{opacity:.9;}
    66%{opacity:.7; color:rgb(128, 48, 48);}
    84%{opacity:1; color:rgb(16, 44, 66);}
    100%{opacity:1; color:black;}
}
.azx {
    animation:AZX 30s ease alternate infinite;
    animation-iteration-count: infinite;
}
@keyframes AZX {
    0%{  color: rgba(144,0,100,.7);}
    33%{ color: rgba(0,144,0,.7);}
    40%{ color: rgba(100,0,0,.7);}
    66%{ color: rgba(0,0,144,.7);}
    84%{ color: rgba(144,100,100,.7);}
    100%{color: rgba(100,144,0,.7);}
}
.axx{
    animation:AXX 30s ease alternate infinite;
    animation-iteration-count: infinite;
}
@keyframes AXX {
    0%{opacity:.9;color:rgb(40,60,144);}
    33%{opacity:1;color:rgba(62, 39, 95, 0.7);}
    40%{opacity:.9; color:rgba(68,68,68,1);}
    66%{opacity:.7; color:rgb(150, 66, 0);}
    84%{opacity:1; color:rgb(68, 96, 124);}
    100%{opacity:1; color:rgb(40,60,144);}
}
.avx{
    animation:AVX 70s ease alternate infinite;
    animation-iteration-count: infinite;
}
@keyframes AVX {
    0%{opacity:.9;color:rgb(144,96,112);}
    33%{opacity:1;color:rgba(61, 144, 68, 0.7);}
    40%{opacity:.9;}
    66%{opacity:.7; color:rgb(128, 48, 144);}
    84%{opacity:1; color:rgb(16, 144, 66);}
    100%{opacity:1; color:rgb(144,96,112);}
}

.nz {
    animation:NZ 30s ease alternate infinite;
    animation-iteration-count: infinite;
}
@keyframes NZ {
    0%{  color: rgba(0,0,100,.7);}
    33%{ color: rgba(0,100,0,.7);}
    40%{ color: rgba(100,0,0,.7);}
    66%{ color: rgba(0,0,100,.7);}
    84%{ color: rgba(0,100,100,.7);}
    100%{color: rgba(100,0,0,.7);}
}
.nx{
    animation:NX 30s ease alternate infinite;
    animation-iteration-count: infinite;
}
@keyframes NX {
    0%{opacity:.9;color:black;}
    33%{opacity:1;color:rgba(80,0,191,.7);}
    40%{opacity:.9;}
    66%{opacity:.7; color:coral;}
    84%{opacity:1; color:steelblue;}
    100%{opacity:1; color:black;}
}
.nv{
    animation:NV 70s ease alternate infinite;
    animation-iteration-count: infinite;
}
nav.active{
    font-weight: 600;
}
@keyframes NV {
    0%{opacity:.9;color:black;}
    33%{opacity:1;color:rgba(90,0,200,.7);}
    40%{opacity:.9;}
    66%{opacity:.7; color:coral;}
    84%{opacity:1; color:steelblue;}
    100%{opacity:1; color:black;}
}

outbound{
    float:right;
}
outbound img {
    filter:saturate(0%) contrast(200%);
}

post {
    float:left;
    width: 265px;
    height: 210px;
    background-size: cover;
    margin:10px;
    padding:10px 0 10px 0;
    border-radius: 5px;
    /*box-shadow: 1px 2px 10px 2px rgb(142, 105, 119);*/
}
post p {
    padding:5px;
    background:rgba(255,255,255,.9);
    color:rgba(0,50,100,1);;
}
/*
post::before{
    content:'';
    width:17px;
    height: 17px;
    border-radius: 8.5px;
    margin-top: -17.5px;
    margin-left:-8.5px;
    background:rgba(255,00,100,1);
    position: absolute;
}
*/
post a {
    color:rgba(255,00,100,1);
    background: rgba(255,255,255,.9);
    margin: 10px 0 0 0;
    padding:5px 10px 5px 10px;
    text-align: center;
    text-decoration: none;
    float: right;
}
team nvv {
    float:left;
    padding-top: 10px;
}
team cit, team cou {
    width:45%;
    float:left;
    text-align: left;
    padding: 5 5 5 0px;
}
team cou{
    text-align: right;
}
team cit::before {
    content:' · ';
    border-radius: 7px;
    color:rgba(0,0,0,.7);
}
team loc star {
    padding: 0 5px 0 5px;
}


  team nvv {
    border:1px solid rgba(0,0,0,.5);
    border-radius: 5px;
    margin:10px 0 10px 0;
    padding-bottom:10px;
  }
  star img {
      width:60px;
      height: auto;
      margin: 5px  40% 5px 40%;
  }
  addr,phone, email {
      font-size: 14px;
      width:100%;
      float:left;
  }
  phone {
    font-size: 22px;
}
  
  form{
      display: inline-block;
      width:100%;
  }
  input,select,textarea {
    margin:10px 0 10px 0;
    padding: 5px;
    width: 100%;
    font-family: quicksand,sans-serif;
    color:steelblue;
    outline: none;
    background: rgba(0,0,0,0);
    font-size:15.7px;
    border-width: 1px;
  }
  
  input[type=submit]{
      margin:10px 0 0 0;
      background: black;
      color:white;
  }
  input[type=submit]:hover{
      cursor: pointer;
  }
  o{
    position: fixed;
    border-radius: 10px;
}

fun {
    display: none;
    font-family: 'Handlee', cursive;
}
fun here a {
    color:white;
    border-radius:5px;
    font-size: 20px;
    margin: 0 5px 0 5px;
    padding:5px 10px 5px 10px;
    text-decoration: none;
}
fun here a:hover{
    cursor:pointer;
}
mc,subc {
    width:100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .collapsed mc, .collapsed subc {
    justify-content: initial;
}
blog {
    flex-direction: column;
}
blog outbound a {
    font-family: 'Handlee','Cursive';
    text-decoration: none;
    font-weight: 600;
}
@media all and (max-width: 600px) {
    body{
        overflow-x:initial;
    }
    subtitle,menu,services,team,contact,compliment,context{
        width:90%;
    }
    uncontent{
        width:100%;
    }
    ttl.collapsed{
        padding:0 0 10px 0;
    }
    subtitle.collapsed{
        padding: 0 0 0 20px;
    }
    subtitle.collapsed{

    }
    uncontent {
        width:100%;
    }
    suba,subb{
        font-size: 27px;
    }
    subc{
        font-size: 30px;
    }
    suba.collapsed,subb.collapsed{
        font-size: 20px !important;
    }
    subd {
        font-size: 20px;
    }
    heavy{
        width: 100%;
        display: inline-block;
        bottom:0;
        padding:3px;
        font-size: 10px;
        background:white;
        align-self: flex-end;
    }
    outbound{
        padding:3px;
    }
    outbound img {
        height:25px;
        padding:5px;
    }
    star {
        margin:0 !important;
        width:initial;
        float:none;
    }
    context{
        border-radius: 5px;
        margin:10px 0 10px 0;
        padding:10px 5px 10px 5px;
    }
    tle {
        width: 100%;
        float: left;
        border-bottom: 1px solid rgba(0,0,0,.5);
    }
    fun{
        display:inline-block;
    }
    fun * {
        display: inline-block;
        float:left;
    }
    fun here a {
        font-size: 14px;
        margin:5px;
    }
  }