html,body {
  margin:0;
  height:100%;
  min-height:100%;
  width:100%;
  -webkit-tap-highlight-color:transparent
}

* {
  position:relative;
  box-sizing:border-box;
  font-family:"Raleway";
}

header {
  top:0px;
  left:0px;
  z-index:99999;
  position:fixed;
  width:100%;
  height:73px;
  background:#FFF;
  border-bottom:3px solid #457
}

nav {
  display:flex;
  justify-content:space-between;
  margin-top:5px;
  height:65px;
  width:100%;
  z-index:9999
}



nav ul.menu, nav ul.menu li{
  padding:0;
  margin:0;
  list-style:none;
}

nav ul.menu li {
  width:120px;
  display:block;
  margin-bottom:15px;
  z-index:1
}

nav ul.menu li:not(:first-child):not(:last-child) {
  left:200%;
  transition:left .5s;
  text-align:right;
}

nav ul.menu li:first-child:before {
  content:"OPEN";
  color:#764;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  background:#FFF;
  margin-top:16px;
  line-height:25px;
  height:25px;
  width:100%;
  display:block;
  float:right;
}


nav ul.menu li:first-child {
  cursor:pointer;
  background:#457;
  border-radius:50%;
  cursor:pointer;
  width:58px;
  margin-left:60px;
  height:57px;
  margin-bottom:20px;
  outline:0;
  opacity:.45;
  transition:opacity .4s
}

nav ul.menu li:first-child:hover {
  opacity:1
}


nav ul.menu li:last-child:before {
  color:#FFF;
  content:"x";
  position:absolute;
  width:58px;
  height:57px;
  line-height:54px;
  text-align:center;
  font-weight:bold;
  font-family:verdana;
  font-size:28px;
  width:100%;
}

nav ul.menu li:last-child {
  background:#457;
  position:absolute;
  border-radius:50%;
  cursor:pointer;
  width:58px;
  top:1px; right:2px;
  height:57px;
  z-index:99;
  display:none;
  outline:0
}


nav ul.menu li:first-child label, nav ul.menu li:last-child label {
  display:block;
  position:absolute;
  top:0px; bottom:0px; left:0px; right:0px;
  cursor:pointer;
}

#openNav {display:none}
#openNav:checked ~ header nav ul.menu li:not(:first-child):not(:last-child) {
  left:0px
}
#openNav:checked ~ header nav ul.menu li:last-child {
  display:block
}

#openNav:checked ~ div.main {
  opacity:.7;
  z-index:-1
}

#openNav:checked ~ div.main2 {
  opacity:.4;
  z-index:-1
}

#openNav:checked ~ h1.pageHead {
  opacity:.4;
  z-index:-1
}

#openNav:checked ~ section {
  opacity:.4;
  z-index:-1
}
#openNav:checked ~ footer {
  opacity:.4;
  z-index:-1
}

#openNav:checked ~ .cta {
  display:none
}

#closeNav {display:none}




nav ul.menu li a {
  display:block;
  padding:10px;
  background:rgb(73,86,122);
  border-top:2px solid #FFF;
  border-left:2px solid #FFF;
  border-bottom:2px solid #FFF;
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
  color:#FFF;
  text-decoration:none;
  font-weight:bold;
  outline:0

}

nav ul.menu li a:hover {
  color:#FFF;
  background-color:#764
}

.LOGO {
  margin-left:5px;
  display:block;
  white-space:nowrap
}

.LOGO span {
  display:inline-block;
  width:60px; height:60px;
  background-repeat:no-repeat;
  background-position:17px center;
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2235px%22%20height%3D%2245px%22%20viewBox%3D%220%200%2035%2045%22%20enable-background%3D%22new%200%200%2035%2045%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20fill-opacity%3D%220.0001%22%20d%3D%22M6%200C4.1%200%202.2%200%200.3%200%20-0.3%2014.5%200.2%2029.8%200.1%2044.7c2.7%200.1%205.4%200%208.1%200%200-6%200-12.1%200-18.1%201.5-0.3%203.1-0.2%204.7-0.2%201.6%200%203.2-0.1%204.6-0.3%202.8-0.4%205.5-1.1%207.8-2%202.4-0.9%204.4-2%206.2-3.6%201.7-1.5%203.2-3.6%203.4-6.4%200.2-1.6-0.1-3.1-0.5-4.4%20-0.4-1.3-1-2.3-1.8-3.1%20-1.6-1.7-3.7-2.9-5.9-3.9%20-4.1-1.7-9-2.4-14.6-2.6C11.4%200%2010.5%200%209.7%200%2018.1%200%2026.6%200%2035%200c0%2014.9%200%2029.8%200%2044.7%20-11.7%200-23.3%200-35%200C0%2029.8%200%2014.9%200%200%202%200%204%200%206%200z%22%2F%3E%3Cpath%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20d%3D%22M6%200c1.2%200%202.5%200%203.7%200%200.8%200%201.7%200%202.5%200.1%205.6%200.2%2010.4%201%2014.6%202.6%202.3%200.9%204.3%202.1%205.9%203.9%200.8%200.8%201.4%201.9%201.8%203.1%200.4%201.3%200.7%202.7%200.5%204.4%20-0.3%202.8-1.7%204.8-3.4%206.4%20-1.8%201.6-3.9%202.7-6.2%203.6%20-2.3%200.9-5%201.6-7.8%202%20-1.4%200.2-3%200.3-4.6%200.3%20-1.6%200-3.2-0.1-4.7%200.2%200%206%200%2012.1%200%2018.1%20-2.7%200-5.5%200-8.1%200%200.2-14.9-0.3-30.1%200.3-44.6C2.2%200%204.1%200%206%200zM8.4%205.6c-0.6%204.8-0.1%2010.3-0.2%2015.4%207.8-0.8%2017.3%200.1%2017.9-8%200-0.5%200.1-1.1%200-1.7%20-0.1-0.3-0.3-0.7-0.5-1C22.7%205.9%2015.8%205.5%208.5%205.5%208.5%205.5%208.5%205.6%208.4%205.6z%22%2F%3E%3Cpath%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20fill-opacity%3D%220.0001%22%20d%3D%22M8.5%205.5c7.3-0.1%2014.2%200.3%2017.1%204.8%200.2%200.3%200.4%200.7%200.5%201%200.1%200.5%200.1%201.2%200%201.7%20-0.6%208.1-10.1%207.3-17.9%208%200.1-5.1-0.3-10.7%200.2-15.4C8.5%205.6%208.5%205.5%208.5%205.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

.LOGO span.first {
  background-color:#457
}

.LOGO span.second {
  background-color:#764
}




.ppp.bottom {
  text-align:center;
  color:#457;
  height:70px;
  font-weight:normal;
  font-size:18px;
  line-height:70px;
  text-decoration:none;
  display:block;
  position:absolute;
  left:0px; right:0px;
  bottom:0px;
  color:#EEE;
}


.main .bg {
        position:absolute;
        top:50%; left:0%;
        bottom:50%; right:0%;
        width:auto;
        height:auto;
        background-position:left center;
        background-size:cover;
        background-repeat:no-repeat;
        -webkit-animation-name: pic; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
        -animation-fill-mode:forwards;
        -animation-delay:.75s;
        animation-name: pic;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-delay:.75s;
        border-top:4px solid #457;
        border-bottom:4px solid #764;
 }

.main .bg label {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}


.main .bg[data-page='index'] {
      background-image:url("###WEBPIMAGE###");
}

.main .bg[data-page='website-consultant'] {
        background-image:url("/images/PIC1.jpg");
}

.main .bg[data-page='website-designer'] {
        background-image:url("/images/PIC3.jpg");
}

.main .bg[data-page='website-marketer'] {
        background-image:url("/images/PIC5.jpg");
}

.main .bg[data-page='website-programmer'] {
        background-image:url("/images/PIC4.jpg");
}

.main .bg[data-page='contact'] {
        background-image:url("/images/PIC2.jpg");
}

.main .bg[data-page='about'] {
        background-image:url("/images/PIC3.jpg");
}



.main {
        position:fixed;
        transition:opacity 1s;
        top:70px;
        left:0px;
        z-index:99;
        width:100%;
        height:175px;
}

.main[data-page="index"] {
        width:100%;
        height:440px;
}



















.main2 {
/*  left:-153px;
  margin-left:50%;*/
  margin:0px auto;
  margin-top:130px;
  margin-bottom:90px;
  width:306px;
  height:306px;
  transition:opacity 1s;
  z-index:100
}


.pcenter {
  text-align:center
}

.center {

        display:flex; flex-wrap:wrap;
        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;
        width:306px;
        height:306px;
        justify-content: center;
        align-items: center;
}


.card {
    -webkit-perspective: 1200px; /* so you get the 3d effect */
    position: relative;
    margin:5px;
    width:143px;
    height:143px;
    display:block;
    cursor:pointer
}

.tile {
    position: absolute;
    border-radius:50%;
    font-size:19px;
    width:143px;
    height:143px;
    display:block;
    cursor:pointer
}




.outside {
    border:1px solid #764;
    color:#FFF;
    text-shadow:1px 1px 1px black;
    line-height:105%;
    cursor:pointer;
}

.outside label {
    cursor:pointer;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.outside label span, .in-bottom span {
  display:inline-block;
  text-align:center;
  width:100%
}

.inside {
    cursor:pointer;
    border:1px solid #764;
    text-align:left;
    font-size:14px;
    line-height:14px;
    width:143px;
    height:143px;
}

.inside label {
    cursor:pointer;
    width:143px;
    height:143px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}



.inside ul, .inside ul li {
  list-style:none;
  margin:1px;
  padding:4px;
  text-align:center;
  font-size:12px
}



.outside label {
  position:absolute;
  top:0px;left:0px;right:0px;bottom:0px
}

.in-bottom a {
    display:flex;
    font-size: 19px;
    text-shadow:1px 1px 1px black;
    align-items: center;
    width:100%;
    height:143px;
}


.card .frontX {
    -webkit-transition-duration: 0.75s;
    -webkit-transform-style: preserve-3d; /* otherwise the perspective gets erased, and you lose the 3d */
    z-index: 2; /* the front needs to be rendered on top of the back */
}

.card .frontY {
    -webkit-transition-duration: 0.75s;
    -webkit-transform-style: preserve-3d; /* otherwise the perspective gets erased, and you lose the 3d */
    z-index: 2; /* the front needs to be rendered on top of the back */
}

.openTop {
    -webkit-transform-origin: 0 0;
    transform-origin:0 0;
}

.openBottom {
    -webkit-transform-origin: 0 bottom;
    transform-origin: 0 bottom;
}

.openLeft {
    -webkit-transform-origin: left 0;
    transform-origin: left 0;
}

.openRight{
    -webkit-transform-origin: right 0;
    transform-origin: right 0;
}


.card .frontX .outside,
.card .frontX .inside {
    position: absolute;
    -webkit-backface-visibility: hidden; /* makes it so that the elements only have a front side */
}

.card .frontY .outside,
.card .frontY .inside {
    position: absolute;
    -webkit-backface-visibility: hidden; /* makes it so that the elements only have a front side */
}

.card .frontX .outside {
    background-color:rgb(73,86,122);
    text-align:center;
}

.card .frontX .inside {
     background:#764;
    -webkit-transform: rotateX(180deg); /* flips the top-inside so its back touches the fronts back */
    color:#FFF;
}

.card .frontY .outside {
    background:#764;
    text-align:center;
}

.card .frontY .inside {
     background:#457;
     color:#FFF;
    -webkit-transform: rotateY(-180deg); /* flips the top-inside so its back touches the fronts back */
}






.in-bottom {
    background: #FFF;
    z-index: 1;
    color:#FFF;
    text-shadow:2px 2px 6px black;
    text-align:center;
    font-size:22px;
    font-weight:bold;
    background-color:#745;
    background-size:744px auto;
    overflow:hidden;
    background-repeat:no-repeat
}

.in-bottom a {
  color:#FFF;
  text-decoration:underline
}


.in-bottom[data-pic='consulting'] {
        -webkit-animation-name: consulting; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 60s; /* Safari 4.0 - 8.0 */
        -animation-iteration-count:infinite;
        animation-name: consulting;
        animation-duration: 60s;
        animation-iteration-count: infinite;
}

@-webkit-keyframes consulting {
    from {background-position:0px 0px}
    50% {background-position:73.4% 0px}
    to {background-position:0px 0px}
}

/* Standard syntax */
@keyframes consulting {
    from {background-position:0px 0px}
    50% {background-position:73.4% 0px}
    to {background-position:0px 0px}
}


.in-bottom[data-pic='designing'] {
        -webkit-animation-name: designing; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 60s; /* Safari 4.0 - 8.0 */
        -animation-iteration-count:infinite;
        animation-name: designing;
        animation-duration: 60s;
        animation-iteration-count: infinite;

}

@-webkit-keyframes designing {
    from {background-position:25% 0px;}
    50% {background-position:right 0px}
    to {background-position:25% 0px}
}

@keyframes designing {
    from {background-position:23% 0px;}
    50% {background-position:right 0px}
    to {background-position:23% 0px}
}





.in-bottom[data-pic='progamming'] {
  background-position:0px bottom;
        -webkit-animation-name: programming; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 60s; /* Safari 4.0 - 8.0 */
        -animation-iteration-count:infinite;
        animation-name: programming;
        animation-duration: 60s;
        animation-iteration-count: infinite;
}


@-webkit-keyframes programming {
    from {background-position:0px bottom}
    50% {background-position:73.4% bottom}
    to {background-position:0px bottom}
}

/* Standard syntax */
@keyframes programming {
    from {background-position:0px bottom}
    50% {background-position:73.4% bottom}
    to {background-position:0px bottom}
}















.in-bottom[data-pic='marketing'] {
        -webkit-animation-name: marketing; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 60s; /* Safari 4.0 - 8.0 */
        -animation-iteration-count:infinite;
        animation-name: marketing;
        animation-duration: 60s;
        animation-iteration-count: infinite;

}

@-webkit-keyframes marketing {
    from {background-position:23% bottom;}
    50% {background-position:right bottom}
    to {background-position:23% bottom}
}

/* Standard syntax */
@keyframes marketing {
    from {background-position:23% bottom;}
    50% {background-position:right bottom}
    to {background-position:23% bottom}
}




























.frontXP:hover {
  -webkit-transform: rotateX(18deg);
}

.frontXN:hover {
  -webkit-transform: rotateX(-18deg);
}

.frontYP:hover {
  -webkit-transform: rotateY(18deg);
}

.frontYN:hover {
  -webkit-transform: rotateY(-18deg);
}


#consulting {display:none}
#consulting:checked ~ .main2 .center .card1 .frontXP{
  -webkit-transform: rotateX(180deg);
}

#designing {display:none}
#designing:checked ~ .main2 .center .card2 .frontYP{
  -webkit-transform: rotateY(180deg);
}

#programming {display:none}
#programming:checked ~ .main2 .center .card3 .frontYN{
  -webkit-transform: rotateY(-180deg);
}

#marketing {display:none}
#marketing:checked ~ .main2 .center .card4 .frontXN{
  -webkit-transform: rotateX(-180deg);
}


  #marketing:checked ~ .main2 {
    z-index:99999
  }
  #consulting:checked ~ .main2 {
    z-index:99999
  }
  #designing:checked ~ .main2 {
    z-index:99999
  }
  #programming:checked ~ .main2 {
    z-index:99999
  }



.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}



@-webkit-keyframes pic {
    from {top:50%;bottom:50%}
    to {top:0%;bottom:0%; }
}

/* Standard syntax */
@keyframes pic {
    from {top:50%;bottom:50%}
    to {top:0%;bottom:0%; }
}



.flex {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between
}

.fcol {
  width:50%;
}


.fcol:first-child {
 padding-right:20px
}

.fcol:last-child {
 padding-left:20px
}

.fcol.pright {
 padding-right:20px;
}

.fcol.pleft {
  padding-left:20px;
}

















section {
  height:auto;
  z-index:200;
  min-height:600px;
  background-color:#FFF
}

.pageHead {
  font-size:calc(23px + 4vw);
  font-weight:bold;
  position:absolute;
  white-space:nowrap;
  top:-180px;
  color:#457;
  left:0px;
  right:0px;
  height:175px;
  z-index:999;
  text-align:center;
  line-height:175px;
  margin:0; padding:0;
}

.pageHead span {
  display:block;
  position:absolute;
  bottom:-46px;
  width:100%;
  left:0px;
  font-size:18px
}


section:hover {
  z-index:10000
}

section:not([data-page="index"]) {
  margin-top:260px
}


.main:not([data-page="index"]) .ppp {
  display:none
}



section, footer {
  font-size:16px;
  line-height:150%;
  width:100%;
  max-width:1080px;
  margin:0px auto;
  padding:16px
}


h1 {
  color:#234;
  text-align:center;
  margin-top:0; padding-top:0;
  font-size:28px;
  line-height:28px
}

h2 {
  color:#234;
  text-align:center;
  font-size:22px;
  line-height:24px;
  margin-top:35px;
  margin-bottom:35px;
}

a {
  color:#745;
  font-weight:bold
}

b {
  color:#234;
  font-weight:bold
}

.nbr {
  white-space:nowrap
}


footer {
  background-color:#457;
  color:#FFF;
  text-align:center;
  line-height:20px;
  height:auto;
  width:auto;
  z-index:99999;
  padding-bottom:80px;
  padding-top:30px
}

footer h3.ppp {
  color:#FFF;
  font-size:30px;
  font-weight:bold;
  margin:0px; padding:0px;
  margin-bottom:20px;
  line-height:30px
}


footer a {
  color:inherit;
  font-weight:bold
}

footer .footya {
  padding:20px
}

footer .footya a{
  padding:5px;
  display:inline-block
}

form {
  padding:0; margin:0
}

input, textarea {
  width:100%;
  height:40px;
  font-size:16px;
  padding:12px;
  border:0;
  border-bottom:3px solid #457;
  border-radius:12px;
  outline:0;
  margin-bottom:10px;
  background:#EEE
}

input[type=submit] {
  margin:0px auto;
  padding:0;
  width:200px;
  display:block;
  color:#FFF;
  border-radius:8px;
  font-weight:bold;
  background:#457
}


/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/raleway-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Raleway'), local('Raleway-Regular'),
       url('fonts/raleway-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/raleway-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/raleway-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/raleway-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/raleway-v11-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}


.cList {
  margin:8px;
  padding: 8px;
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
  font-size:14px;
  list-style-position: outside;
  column-gap: 2.5em;
}

.cList li {
  line-height:15px;
  margin-bottom:10px
}



.BLOG {
 min-height:400px;
 font-size:14px
}

.BLOG h4 {
  text-align:center;
  font-size:18px
}

.BLOG .fcol {
  border:3px solid #eee;
  padding:15px;
  margin-bottom:15px;

}

.checkout {
  text-align:center
}

.checkOut a{
  display:inline-block;
  margin:10px;
}


a.blink {
  background-image:url("//res.cloudinary.com/ptopp/image/upload/v1507230863/BLINKS_tljtnk.png");
  background-repeat:no-repeat;
  width:28px; height:28px;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
  border-radius:50%;
  transition:all .2s;
  opacity:.4;
}

a.blink.fb {
  background-position:-11px -6px
}

a.blink.blog {
  background-position:-46px -6px
}

a.blink.gmb {
  background-position: -93px -9px
}

a.blink.gms {
  background-position: -120px -10px
}

a.blink.grmb {
  background-position: -120px -1px;
  background-size:179px 30px;
  background-color:#FFF;
}

a.blink.fbr {
  background-position: -204px -6px
}

a.blink:hover {
  opacity:1
}


input:read-only, textarea:read-only {
  background-color:grey;
  color:white
}