@import "reset.css";
@import "standards.css";
@import "grid.css";
@import "nav.css";
@import "foxsimpleslides.css";
@import "foxanimatedintro.css";
@import "type-zoar.css";
@import "colors-zoar.css";


/* SLIDE HERO IMAGE BG: */

/* ANIMATION */
    .animateWhole .slide-hero-image-bg,
    .animateWhole .slide-hero-image-bg-fixed,
    .animateWhole .slide-hero-visibility-on-scroll
    {
        transition: all 0.3s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s;
    }

/* */
	.slide-hero-image-bg,
	.slide-hero-image-bg-fixed
	{
		clear:left;
        position:relative;
		width:100%;
		background-repeat:no-repeat;
        background-position: top center;
        background-size:auto 100%; /* 100% height */
        /* opacity:0; */
	}
    /* */
    .slide-hero-image-bg-cover-top-left{
        background-size:cover; 
        /* background-size:115% auto; */
        background-position: top center;
        /* */
    }
    /* */
    .foxsimpleslide.visited .slide-hero-image-bg-fixed{
        /* background-size:auto 110%; */
    }
    /* */
    .foxsimpleslide.visited .slide-hero-image-bg-cover-top-left
    /* ,
    .foxsimpleslide.visited .slide-hero-image-bg-fixed */
    {
        /* transition: all 4s ease-out 0.3s, visibility 0s linear 0s, z-index 0s linear 0.0s; */
    }
    .slide-hero-image-bg-fixed,
    .slide-hero-visibility-on-scroll
    {
        opacity: 0;
        /* visibility: hidden; */
    }

/* BG INNER */
/* ZOOM IN OUT IMG */
    /* MAIN:*/
    .slide-hero-image-bg{
        overflow: hidden; /* width:100%; */
    }
        /* CHILD: */
        .animateWhole .bg-inner{
            /* IMPROVE: */
            /* transform: scale(1.1); 
            transition: all 8s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s;
            transform-origin: top center; */
        }
        .foxsimpleslide.visited .bg-inner{
            /* transform: scale(1); */
        }
        .bg-inner{
            width:100%;
            height:100%;
            background-size:cover; 
            position:absolute;
            top:0;
            left:0;
        }

/* ABOUT bg & img */
    .about-section .slide-hero-image-bg.extra-bg-color,
    .slide-hero-image-bg.about-img
    {
        z-index: -2;
    }
    .about-section .slide-hero-image-bg.extra-bg-color{
        position:absolute;
        bottom:-160px;
        display:none;
    }
    .slide-hero-image-bg.about-img{
        float:left;
        margin-top:-73px; /* res1680: */ margin-top:-97px;
        margin-bottom:-670px;
        padding-top:75.6%; padding-top:83.33%;
        /* background-image: url('../content/about/about-bg-desktop.png'); */
    }
        .slide-hero-image-bg.about-img .bg-inner{
            background-image: url('../content/about/about-bg-desktop.png'); 
        }


/* FOUNDERS  - PICS */
    .founders-founder-pic{
        height:100%; 
        width:100%; 
    }
    .founders-founder-pic-billy{
        /* margin-left:-1%; */
    }
        .founders-founder-pic-billy .bg-inner{
            background-image: url('../content/founders/billy-alpha-large.png'); 
            background-position:0 0; 
            background-size:auto 100%;
            background-repeat: no-repeat;
        }
    .foxsimpleslide.visited .founders-founder-pic-billy{
        margin-left:0%;
    }
    .founders-founder-pic-albert{
        padding-left:0%;
    }
        .founders-founder-pic-albert .bg-inner{
            background-image: url('../content/founders/albert-alpha-large.png');
            background-position:100% 0;
            background-size:auto 100%;
            background-repeat: no-repeat;
        }
    /* */
    .founder-pic-billy .bg-inner,
    .founder-pic-albert .bg-inner
    {
        background-position:0 0; 
        background-size:auto 100%;
        background-repeat: no-repeat;
        /* background-position: center center; */
    }
    .founder-pic-billy .bg-inner{
        background-image: url('../content/founders/billy-alpha-large.png'); 
        background-position:0 0; 
    }
    .founder-pic-albert .bg-inner{
        background-image: url('../content/founders/albert-alpha-large.png');
        background-position:100% 0;
    }


/* CONTACT */
    .slide-hero-image-bg.slide-hero-image-bg-cover-top-left.contact-bg-img{
        padding-top:52%;
    }
        .slide-hero-image-bg.slide-hero-image-bg-cover-top-left.contact-bg-img .bg-inner{
            background-image: url('../content/contact/contact.png');  
        }

/* */
    .slide-hero-image-bg.bg-pos-top-left,
    .slide-hero-image-bg-fixed.bg-pos-top-left
    {
        background-position: top left;
    }
    /* */
	.slide-hero-image-bg-fixed{
		position:fixed;
		z-index: -1; /* z-index: 0; */
        /* transition: all 0.3s ease-out 0.3s, visibility 0.3s linear 0s, z-index 0s linear 0.0s; */
        top:0px;
            /* left:0; 
            top:250px; */
	}
	.activeSlide .slide-hero-image-bg,
	.activeSlide .slide-hero-image-bg-fixed
	{
		opacity:1;
	}
    .activeSlide .slide-hero-image-bg-fixed{
        /* visibility: visible; */
    }
    /* set-visible-150h-lower */
    .activeSlide .slide-hero-image-bg.set-visible-150h-lower{
        opacity:0;
    }
    #darkgray2-mode .activeSlide .slide-hero-image-bg.set-visible-150h-lower{
        opacity:1;
    }


/* Loading */

    .loading{
        position: absolute;
        top:50%;
        left:43.75%;
        width:12.5%;
        padding-top:calc(12.5% * 0.1404);
        /* TEST 3D  background: black; */
        opacity: 0;
        transition: all 0.3s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; 
    }
    .loading-visible .loading{
        position: absolute;
        top:50%;
        left:43.75%;
        width:12.5%;
        padding-top:calc(12.5% * 0.1404);
        /* TEST 3D  background: black; */
        opacity: 1;
    }
        .loading .loading-graphics-text{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
        }
        /* 3D: */
        .loading .loading-graphics-text{
            transform: perspective(0px) rotateY(0deg) rotateX(0deg) rotateZ(16deg) skewX(30deg);
        }
        /* Graphics: */
            .loading .loading-graphics{
            }
                .loading .loading-graphics .item{
                    position:absolute;
                    top:0;
                    left:0;
                    width:14%;
                    height: 100%;
                    border-radius:1000px;
                    background-color:none;
                    /* for BG change: */
                    transition: all 0.4s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; 
                }
                .loading .loading-graphics .item:nth-child(1){
                    /* left:-4%; */
                    width:52%;
                }
                .loading .loading-graphics .item:nth-child(2){
                    left:62%;
                }
                .loading .loading-graphics .item:nth-child(3){
                    left:86%;
                }
            /* Animate */
                @keyframes loading-item1 {
                    0% {
                    }
                    25% {
                        left:0%;
                        width:62%;
                    }
                    50% {
                    }
                    75% {
                        left:0%;
                        width:14%;
                    }
                    100% {
                    }
                }
                .loading .loading-graphics .item:nth-child(1){  /* infinite */
                    animation:loading-item1 1.5s infinite; /*, moveRight1 2s steps(2) infinite alternate;*/
                    /* animation-timing-function: linear; */
                    /* animation-fill-mode: forwards; */
                }
                @keyframes loading-item2 {
                    0% {
                    }
                    50% {
                        left:72%; left:76%;
                        width:28%;
                    }
                    50% {
                    }
                    75% {
                        left:0%;
                        width:24%;
                    }
                    100% {
                    }
                }
                .loading .loading-graphics .item:nth-child(2){  /* infinite */
                    animation:loading-item2 1.5s infinite;
                }
                @keyframes loading-item3 {
                    0% {
                    }
                    25% {
                    }
                    50% {
                        left:86%;
                        width:14%;
                    }
                    75% {
                        left:34%;
                        width:62%;
                    }
                    100% {
                    }
                }
                .loading .loading-graphics .item:nth-child(3){  /* infinite */
                    animation:loading-item3 1.5s infinite;
                }
        /* Text: */
            .loading .loading-text{
            }


/* LISTS (ul li): */
    ul{
    }
        ul .check-with-border{
            position: absolute;
            top:18px;
            left:0;
            width:20px;
            height:20px;
            border:1px solid;
border-color:#105CDF;
        }
            ul .check-with-border .check{
                opacity: 0.5;
            }
                ul .check-with-border .check-part-left,
                ul .check-with-border .check-part-right
                {
                    position: absolute;
                    height:4px;   
background:#105CDF;
                }
                ul .check-with-border .check-part-left{
                    top:8px;
                    left:3px;
                    width:15px;
                    transform:rotate(45deg);
                }
                ul .check-with-border .check-part-right{
                    top:5px;
                    left:11px;
                    width:25px;
                    transform:rotate(-45deg);   
                }


/* Small Logo */

    .small-logo-imgs{
        clear:left; float: left;
        width:100%;
        margin:10px -29px 0 0;
/* margin-top:0; */
        padding-bottom:25px;
/* padding-bottom:6px; */
    }
    .larger-logo{
    }
        .small-logo-img{
            margin-right:29px;
            margin-bottom:25px;
            float:left;
            height:36px;
        }
        .larger-logo .small-logo-img{
            height:100px;
        }


/* Medium-icon */

    .medium-icon{
        position: absolute;
        z-index:-1;
        top:-20px;
        left:50%;
        width:480px;
        height:300px;
        margin-left:-240px;
        background-size: cover;
        background-position:top center;
    }
        .medium-icon1{
            background-image: url('../content/about/icon1a.png'); 
        }
        .medium-icon2{
            background-image: url('../content/about/icon2a.png'); 
        }
        .medium-icon3{
            background-image: url('../content/about/icon3a.png'); 
        }


/* Thumbs */

    .thumb,
    .author-thumb span{
        background-size: cover;
        position: relative;
        display: block;
    }
    .author-thumb{
        width:50%;
        padding-top:50%;
        margin:11px 0 0 0px;
        transition: all 0.25s linear 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; 
    }
    a:hover .author-thumb,
    .article-page .author-thumb
    {
        border-radius: 0;
    }
    .article-page a:hover .author-thumb{
        border-radius:0;
    }

        .author-thumb span{
            top:0;
            left:0;
            position: absolute;
            width:100%;
            height: 100%;
        }

    /* Work thumb: */
    .columns1.work-thumbs{
        margin-top:24px;
    }
        .work-thumbs .col1:nth-child(even):not(.click-for-more-bottom){
            padding-left:0;
        }
            .work-thumbs .col1:nth-child(even) .work-thumb{
                padding-top:calc(64.95% * 1.5);
            }
            .work-thumb{
                width:100%; 
                max-width: 1000px;
                padding-top:64.95%;
            }
                .work-thumb-content{
                    background-position: 0% 0%; 
                    background-repeat:no-repeat;
                    background-size:100% auto;
                    /* */
                    position: absolute;
                    width:100%;
                    height:100%;
                    bottom: 0;
                }
                .work-thumbs .col1:nth-child(even) .work-thumb-content{
                    height:66.66%;
                }
                    .work-thumb-img-bg-cont2{
                        position: absolute;
                        width:100%;
                        height:100%;
                        bottom:0;
                        overflow: hidden;
                    }
                        .work-thumb-img-bg-cont{
                            transform:rotate(-33deg);
                            position: absolute;
                            width:100%;
                            height:100%;
                            left:-26.6%;
                            top:-33%;
                            overflow: hidden;
                            /* IMPROVE: */
                            /* border-bottom:1px solid; */
                        }
                            .work-thumb-img-bg{
                                transform:rotate(33deg);
                                background-position: 0% 0%; 
                                background-repeat:no-repeat;
                                background-size:100% auto; /* background-size:480px auto; */ 
                                position: absolute;
                                width:100%;
                                height:100%;
                                top: 50%;
                                left:10.75%;
                            }
                    .work-thumb-slash-bg{
                        position: absolute;
                        width:100%;
                        height: 100%;
                        bottom: 0;
background: url('../img/work/slash-nobg.png') 0% 100% no-repeat; /* slash-nobg */
                        background-size:1000px auto;
                    }
                        .work-thumb-text{
                            position: absolute;
                            /* width:100%; */ width:calc(100% - 40px);
                            bottom:-50px; /* =0 */ bottom:-15px;
                            left:40px;
                            
                        }
                        .work-thumb-text p{
                            margin-right: 140px;
                            margin-bottom: 19px;
                        }
                        .work-thumb-text p,
                        .work-thumb-text h3
                        {
                            position:relative;
                            z-index:1;
                        }


/* Spec. buttons: */

    /* Linkedin bio link */
    .linkedin-bio-link{
        background: url('../img/linkedin-darkblue.png') 50% 50% no-repeat;
        /* background: url('../img/linkedin-darkblue-darker.png') 50% 50% no-repeat; */
        background-position:50% 50%;
        background-repeat:no-repeat;
        background-size:100% auto!important;
        text-indent:-2000px;
        padding-top:15px;
        margin-left:1px;
        overflow: hidden;
        width: 100px;
        height:26px;
        position: relative;
        display: block;
    }

    /* Repeat Intro */
    .hp-slide .cta-repeat{
        cursor:pointer;
        position: absolute;
        top:25%;
        left:50%;
        margin:-18px 0 0 -19px;
        border-radius:100%; /* for hover spacing */
        opacity:0;
        transition: all 0.5s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; 
        width:38px;
        z-index: 100;
/* Fix */
display: none;
    }
    .hp-slide.graphics-stage3 .cta-repeat{
        opacity:1;
    }
    .hp-slide .cta-repeat:hover{
        transform:rotate(360deg);
    }
        .hp-slide .cta-repeat .inner{
            position: relative;
            width:36px; width:18px;
            height:36px;
            border-top-left-radius: 36px;
            border-bottom-left-radius: 36px;
            border:1px solid;
            border-right:none; /* z-index: 3; */
            transition: all 0.75s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s; 
        }
            .hp-slide .cta-repeat .inner:before{
                content:'';
                position:absolute;
                left:100%;
                top:50%;
                width:100%;
                height:50%;
                border-bottom-right-radius: 100%;
                border-right:1px solid; border-bottom:1px solid; /* box-shadow: 0px 300px 0px 300px blue; */
            }
            .cta-repeat .arrow{
                position:absolute;
                left:100%; margin-left:-5px;
            }
                .cta-repeat .arrow .arrow-part-left,
                .cta-repeat .arrow .arrow-part-right
                {
                    position:absolute;
                    width:7px;
                    height:1px;
                }
                .cta-repeat .arrow .arrow-part-left{
                    transform:rotate(45deg);
                    margin:-3px 0 0 0;
                }
                .cta-repeat .arrow .arrow-part-right{
                    transform:rotate(-45deg);
                    margin:1px 0 0 0;
                }


/* CONTENT */

/* Insights */

    .articles-section .insight{
        margin-bottom:53px;
        clear:left; float: left;
    }
    .articles-section .insight:last-child{
        /* margin-bottom:0px; */
    }
    

/* RESPONSIVE: */


/* 1400: */

    @media screen and (max-width:1400px)
    {
        /* ABOUT img*/
        .slide-hero-image-bg.about-img{
            padding-top:100%;
        }
    }

/* 1280 */
    @media screen and (max-width:1280px)
    {
        /* ABOUT img*/
        .about-section .slide-hero-image-bg.extra-bg-color{
            display:block;
        }
    /* Work thumb: */
        .work-thumb-text p{
            margin-right: 70px;
        }
    }

/* 1100: */

    @media screen and (max-width:1100px)
    {
    /* ABOUT img*/
        .slide-hero-image-bg.about-img{
            padding-top:120%;
            margin-bottom:-450px;
        }
    /* FOUNDERS  - PICS */
        .founders-founder-pic-billy .bg-inner,
        .founder-pic-billy .bg-inner
        {
            left:-15%;
        }
        .founders-founder-pic-albert .bg-inner,
        .founder-pic-albert .bg-inner
        {
            left:15%;
        }
    }

/* 900: */

    @media screen and (max-width:900px)
    {
    /* SLIDE HERO IMAGE BG: */
        .slide-hero-image-bg,
        .slide-hero-image-bg-fixed
        {
            background-position: top right;
        }
        .slide-hero-image-bg.bg-pos-top-right,
        .slide-hero-image-bg-fixed.bg-pos-top-right
        {
            background-position: top left!important;
        }
        /* .left-min50p-res900{
            left:-50%;
        } */
    /* FOUNDERS  - PICS */
        .founders-founder-pic-billy .bg-inner,
        .founder-pic-billy .bg-inner
        {
            left:-30%;
        }
        .founders-founder-pic-albert .bg-inner,
        .founder-pic-albert .bg-inner
        {
            left:30%;
        }
    /* Work thumb: */
        .work-thumb-text p{
            /* margin-right: 0px; */
        }
        .work-thumbs .col1{
/* Fix */
margin-top:50px;
        }
        .work-thumbs .work-thumb,
        .work-thumbs .col1:nth-child(even) .work-thumb
        {
            padding-top:calc(64.95% * 1);
        }
        .work-thumbs .col1:nth-child(even) .work-thumb-content{
            height:100%;
        }
    }


/* 600: */

    @media screen and (max-width:600px)
    {
    /* SLIDE HERO IMAGE BG: */
    /* ABOUT img*/
        .slide-hero-image-bg.about-img{
            /* padding-top:100%; */
            margin-top:0px;
            margin-bottom:-150px;
        }
/* CONTACT */
    .slide-hero-image-bg.slide-hero-image-bg-cover-top-left.contact-bg-img{
        padding-top:101%;
    }
        .slide-hero-image-bg.slide-hero-image-bg-cover-top-left.contact-bg-img .bg-inner{
            background-position:50% 50%;
        }
    /* FOUNDERS  - PICS */
        /* */ 
        .founder-pic-billy .bg-inner,
        .founder-pic-albert .bg-inner,
        .founders-founder-pic-billy .bg-inner,
        .founders-founder-pic-albert .bg-inner
        {
            left:0%;
            background-size:112% auto;
            background-position: 0 100%;
        }
        .founders-founder-pic-albert .bg-inner{
            background-position:100% 0;
        }
        .founder-pic-albert .bg-inner{
            background-position: 100% 100%;
        }
    /* Work thumb: */
    }






/* ALBC Changes */
.img200w {
        width:48% ;
}

.img400w  {
	width:80% ;
}
.txtcenter {
	text-align:center;
	text-align: -webkit-center;
}
#ppselect {

    width: 231px;
    padding: 10px 0px 10px 5px;
    font-family: 'bold', arial;
    background: none;
    color: white;
    font-size: 17px;
    margin-top: 28px;
    border: none;
    background-color: darkblue;
}
.social a {
color:white;
transition: all 0.3s ease-out 0s, visibility 0s linear 0s, z-index 0s linear 0.0s;
}
body#white1-mode .social a:hover {
color: #2161A1;
}

body#white1-mode .social a{
    color: #141518;
}

body#darkgray1-mode .social a:hover {
   color: #195999;
  }

body#brightblue1-mode .social a:hover {
    color: #233CFF;
}

body#mediumgray1-mode .social a:hover {
     color: #00A5FF;   
}
body#darkblue1-mode .social a:hover {
     color:     #243CFF;

}
table.gloss thead{
    border-bottom:1px solid #000;
}
table.gloss td {
    vertical-align:top;
    padding:5px;
}
table.gloss tbody td:first-child {
    font-weight:bold;
    width:28%;
}
table.gloss tbody tr {
    border-bottom:1px solid #ddd
}
table.gloss tbody td.subrow {
    background-color:#eee;
}
table.gloss thead td {
    font-weight:bold;
    color: #888;

}
table.gloss p.margtop10 {
    margin-top:10px;
}
.margt10 {
	margin-top:10px;
}

.marg10 {
	margin:10px 0;
}

  pre {
        background-color: #000;
        padding: 1em;
        overflow: auto;
      }
      code {
        font-family: Consolas, monospace;
        color: #fff;
        border-radius: 4px;
        padding: 2px;
        white-space: pre-wrap;
      }



.imgmidh {
    height: 250px;
}

.imgcont {
   text-align:center;
}
.imgcont * {
    margin-bottom:10px;
}
.imgcont iframe, .imgcont img{
    margin-top:10px;
}
.imgcont p {

   color: grey;
}

#white1-mode .col1 .summ a:hover {
    color: white;
    box-shadow: inset 0 -32px 0 #233cff;
}

#white1-mode .col1 .summ a.pink:hover {
    color: black;
    box-shadow: inset 0 -32px 0 #fb98ad;
}
#white1-mode .col1 a.pink {
    box-shadow: inset 0 -2px 0 #fb98ad;
}

.refs ul li {
    padding: 10px 0 5px 0px;
    font-size:16px;
}

.article-page hr {
    margin-top:25px;
}
.walletconnect{
position: fixed;
    z-index: 99;
    font-size: 17.5px;
    font-family: 'sans', arial;
    color: white;
    background: green;
    right: 20px;
    padding: 5px 10px;
    border-radius: 20px;
    bottom: 72px;
	display:none;
}


.walletconnect.done {
   display:none;
}

.walletconnect img {
	    width: 20px;
    position: absolute;
    top: 8px;
    }