@charset "utf-8";

/* ### GLOBAL */
html {}
body { margin: 0; }
.clear:after { content: ""; display: table; clear: both; }

/* ### Typography */
html {
    font-family: 'Open Sans Hebrew', sans-serif;
    font-weight: 400;
    font-size: 100%;
}
h1:lang(en), h2:lang(en), h3:lang(en), h4:lang(en), p:lang(en), span:lang(en), em:lang(en), a:lang(en) {
    font-family: 'Open Sans Hebrew', sans-serif;
}
h1 { font-size: 4.500em; line-height: 1; }
h2 { font-size: 2.750em; line-height: 1; font-weight: 300; }
h3 { font-size: 1.750em; line-height: 1.6; }
h4 { font-size: 1em; line-height: 1; font-weight: 600;}
p  { font-size: 1em; line-height: 1.8; letter-spacing: 0.0184em;}
h1, h2, h3, h4, a { color: #38414b; }
p { color: #858585; }
.bold    {font-weight: 700;}
.light   {font-weight: 300;}
.under   {display: block;}
.upper   {text-transform: uppercase;}
.capital {text-transform: capitalize;}
.center  {text-align: center;}
a {
    color: #3BBBB2;
}
.subby {text-transform: uppercase; letter-spacing: 0.18em;
    color: #3BBBB2;
}
.story h2 {
    position: relative;
    padding: 3.4vh 0;
}
.story h2::after {
    bottom: 0;
    content: "";
    display: block;
    min-height: 6px;
    right: 0;
    background: url(../img/spacer.png) no-repeat bottom right;
    background-size: contain;
    position: absolute;
    width: 2.1vw;
}
.story p {
    padding-top: 2.6vh;
}

/* ### Structure */
/* Preloader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/ripple.gif) center no-repeat #51445F;
}

.section { /*overflow:hidden;  Makes animation look better */
}

/* ### Header */
#header {
    width: 100%;
    box-sizing:border-box;
    top: 0;
    position: absolute;
    z-index: 1;
    padding: 2.1vw 3.4vw;
    }
    #logo {
        float: left;
        text-decoration: none;
        }
        #logo h1 {
        text-transform: uppercase;
        color: rgba(0, 0, 0, 0.12);
        font-size: 1.750em;
        }
        #logo em {
            font-weight: 300;
        }
    #talk {
        float: right;
        height: 2.750em;
        width: auto;
        }
        #talk svg {
            height: inherit;
            width: auto;
            fill: rgba(0, 0, 0, 0.12);
        }
        #talk svg:hover {
            fill: #3bbbb2;
        }
        .fp-viewing-home #talk svg {
            fill: rgba(0, 0, 0, 0.34);
        }

/*fullpage.js*/
#fp-nav.left {left: 3.4vw !important;}
.fp-viewing-0 #fp-nav {display: none !important;}
.slimScrollBar {
    border-radius: 0 !important;
    width: 2px !important;
    background: rgba(0, 0, 0, 0.54) !important;
    opacity: 1 !important;
}

/*Scroller*/
[class*='scroller-'] {
    bottom: 0;
    cursor: pointer;
    display: block;
    height: 3.4vw;
    position: absolute;
    text-align: center;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: all 0.34s ease 0s;
    transition: all 0.34s ease 0s;
    width: 2.1vw;
/*    z-index: 999;*/
}
    .scroller-l {
        left: 9vw;
        position: absolute;
    }
    .scroller-r {
        right: 9vw;
        position: absolute;
    }
    .scroller-c {
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        position: absolute;
    }
    .marrow:first-of-type {
        opacity: 0.87;
    }
    .marrow {
        width: inherit;
        height: auto;
    }
/* Goldy */
.goldy {    }
[class*='wide-'] { float: right; box-sizing: border-box; }
.wide-38 { width: 38.2vw; }
.wide-62 { width: 61.8vw; }
.goldy:after { content: ""; display: table; clear: both; }

/* fifty */
.fifty {    }
[class*='wide-'] { float: right; box-sizing: border-box; }
.wide-50 { width: 50%; display: inline-block;}
.fifty:after { content: ""; display: table; clear: both; }
.nifty { float: right; width: 100%; height: 50%; display: block;  box-sizing: border-box;  }

/* ### Intro Section */
#intro {
    background-image: -webkit-linear-gradient(rgba(100,58,156,0.90), rgba(59,187,178,0.90));
    background-image: linear-gradient(rgba(100,58,156,0.90), rgba(59,187,178,0.90));
}
#intro .inner {
    text-align: left;
    margin-left: 9vw;
    direction: ltr;
    text-align: left;   
/*
for vertical centering:
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
*/
}
#intro h1 { 
    text-transform: uppercase;
    font-weight: 300;
    color: rgba(0,0,0,0.87);
    font-size: 2.750em;
    }
    #intro h1 b {
        display: block;
        font-weight: 700;
        font-size: 162%;
    }
#intro p {
    margin: 3.4vw 0 0 0;
    color: rgba(0,0,0,0.87);
    font-size: 1.25em;
}
video#bgvid { 
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    z-index: -100;
    background: transparent url(../img/hero.jpg) no-repeat center;
    background-size: cover;
}
.IE video {display: block;} /*IE PreFIX*/

/* ### About & UID Section */

#uid .art {
/*    display: none;*/
    max-height: 100vh;
    background: rgb(255, 255, 255);
/*
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
*/
    overflow: hidden;
    border: 20px solid #fff;
    box-sizing: border-box;
}
    svg#devices {
    /*    width: 100%; height: auto;*/
        overflow: hidden;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
#uid .article {
/*    height: 100vh;*/
/*    position: relative;*/
    background: #fff;
}
    #uid .story {
/*
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
*/
        margin: 14.6vh 9vw 14.6vh 5.6vw;
/*        max-width: 38.2vw;  */
    }
        #uid .story h3 {
            padding-top: 5.6vh;
            padding-bottom: 3.4vh;
            line-height: 1;
        }
        .story .padi {
            padding: 5.6vh 0 2.6vh 0;
        }
        .point p {
            padding-top: 0;
        }
        #uid .story .point {
            float: right;
            padding: 0 1em 0 1em;
        }
        #uid .story .point img {
            width: 32px;
            height: auto;
            opacity: 0.1;
        }


/* ### Focus */
#focus {
    text-align: center;
}

#focus .title {
    width: 38vw;
/*    display: block;*/
    margin: 14.6vh auto;
    text-align: center;
}
#focus .grid { 
    padding: 0 5.6vw;
    box-sizing: border-box;
/*    width: 86vw;*/
/*    height: 61.8vh;*/
}
#focus .grid:after {
    content: "";
    display: table;
    clear: both;
    }
    #focus .box {
        width: 33.33%;
        float: right;
        text-align: center;  
    }
    #focus .box:nth-of-type(2) {
        box-sizing: border-box;
        padding: 0 1.6vw 0 1.6vw;
    }
        #focus .box svg {
            width: auto;
            height: 14.6vh;
        }
        #focus .box h3 {
            margin: 44px 0 28px 0;
        /*    NEED FIX TO VW-VH SIZING*/
        }
        #ethical {
            position: relative;
            bottom: 0;
        }


/* ### Work Section */
#work {
    text-align: center;
}
/*
#work.fp-section,
#work..fp-tableCell {
    height: auto !important;
    min-height: 100%;
}
*/
#work .title {
    margin-top: 14.6vh;
    text-align: center;
}
#work .grid { 
    margin: 14.6vh 3.4vw 3.4vw ;
    overflow: hidden; /* fixing scroll bug */

}

/* ### Contact Section */
#contact .inner {
/*
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);  
    text-align: center;
*/
/*
alternative ver and hor centering
    height: 100%;
    max-height: 100vh;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
*/
}
#contact svg#bolt {
    margin-bottom: 5.6vh;
            width: auto;
        /*    height: 6.8vw;*/
            height: 14.6vh;
}
#contact .story {
    width: 38.2vw; 
    margin: 0 auto;
}
/*#contact .para {padding: 3.4vh 0 3.4vh 0}*/
#contact .story h2::after {
    right: 50%;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
}
#mail {
    width: auto;
    display: block;
    margin: 0 auto;
    text-decoration: none;
    font-size: 1.750em; line-height: 1;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: #3BBBB2;
    border-bottom: 2px solid #eee;
/*    border-radius: 55px;*/
    padding: 1.4em 0;
}
#mail:hover {
    color: #643a9c;
}
#contact-btn {display: none;}

footer {
    width: 100%;
    box-sizing:border-box;
    bottom: 0;
    position: absolute;
    z-index: 1;
    padding: 2.1vh 3.4vw;
    color: rgba(0, 0, 0, 0.12);
/*    background: #EEE;*/
    text-align: left;
}
    footer p {
    float: left;
    color: #ddd;
        
}
    footer a {text-decoration: none;}
    footer span {}
    .social {
        font-size: 0;
        font-size: 0;
        list-style: none;
        float: right;
        margin: 0;
        }
        .social li {
            display: inline-block;
            margin: 0 12px 12px;
            }
            .social a, .social svg {
                display: block;
            }
            .social a {
                height: 44px;
                width: 44px;
            }
            .social svg  {
                height: 100%;
                width: 100%;
                fill: #ddd;
                padding: 5px;
            }
            .social a:hover > .socy {
                fill: #000;
                -webkit-transform: scale(1.25);
                        transform: scale(1.25);
                -webkit-transition: background-color .3s, -webkit-transform .3s ease-out;
                transition: background-color .3s, -webkit-transform .3s ease-out;
                transition: background-color .3s, transform .3s ease-out;
                transition: background-color .3s, transform .3s ease-out, -webkit-transform .3s ease-out;
    }
/* ### SVG's */

/* SVG Style */
svg .draw {
    fill: none;
    stroke-miterlimit: 10;
}
svg .draw.strong {
    stroke-width: 16;
}
svg .draw.thick {
    stroke-width: 4;
}
svg .draw.thin {
    stroke-width: 2;
}
svg .draw.skinny {
    stroke-width: 1;
}

/* SVG Draw Animation */
.in-view svg .draw {
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-name: draw;
            animation-name: draw;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
@-webkit-keyframes draw {
    to {
    stroke-dashoffset: 0;
    }
}
@keyframes draw {
    to {
    stroke-dashoffset: 0;
    }
}
 svg#devices .fill {
    opacity: 0;
}
svg .fill {
       opacity: 0;
}
.in-view svg .fill {
    opacity: 0;
    -webkit-animation-name: show;
            animation-name: show;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes show {
    to {
    opacity: 1;
    }
}
@keyframes show {
    to {
    opacity: 1;
    }
} 
/* ### SVG Specific Settings */
/*Bolt icon*/
svg#bolt path {
    stroke-dasharray: 343.121;
    stroke-dashoffset: 343.121;
}
/*Ruler icon*/
svg#ruler path.draw, svg#molecule path.draw, svg#content path.draw, svg#bolt path.draw {
    -webkit-animation-duration: 1300ms;
            animation-duration: 1300ms;
    -webkit-animation-delay: 500ms;
            animation-delay: 500ms;
}
svg#ruler path:nth-of-type(1) {
    stroke-dasharray: 698.622;
    stroke-dashoffset: 698.622;

}
svg#ruler path:nth-of-type(2) {
    stroke-dasharray: 463.226;
    stroke-dashoffset: 463.226;
}
/*Molecule icon*/
svg#molecule path:nth-of-type(1) {
}
svg#molecule path:nth-of-type(2) {
    stroke-dasharray: 942.604;
    stroke-dashoffset: 942.604;
}
svg#molecule path:nth-of-type(3) {
    stroke-dasharray: 186.233;
    stroke-dashoffset: 186.233;
}
/*Content icon*/
svg#content path:nth-of-type(1) {
    stroke-dasharray: 804.361;
    stroke-dashoffset: 804.361;
}
svg#content path:nth-of-type(2) {
    stroke-dasharray: 236;
    stroke-dashoffset: 236;
}

svg#appicon path:nth-of-type(1) {
    stroke-dasharray: 17657.6;
    stroke-dashoffset: 17657.6;
}
svg#appicon path:nth-of-type(2) {
    stroke-dasharray: 2583.06;
    stroke-dashoffset: 2583.06;
}
/*Devices*/
svg#devices path:nth-of-type(1) {
}
svg#devices path:nth-of-type(2) {
    stroke-dasharray: 5159.48;
    stroke-dashoffset: 5159.48;
}
svg#devices path:nth-of-type(3) {
}
svg#devices path:nth-of-type(4) {
    stroke-dasharray: 1861.38;
    stroke-dashoffset: 1861.38;
}
svg#devices path:nth-of-type(5) {
    stroke-dasharray: 2797.61;
    stroke-dashoffset: 2797.61;
}
svg#devices path:nth-of-type(6) {
    stroke-dasharray: 1079.15;
    stroke-dashoffset: 1079.15;
}

/* ### Animations */

.active .delay0 {
    -webkit-animation-delay: 200ms; 
    animation-delay: 200ms;
}
.active .delay1 {
    -webkit-animation-delay: 400ms; 
    animation-delay: 400ms;
}
.active .delay2 {
    -webkit-animation-delay: 600ms; 
    animation-delay: 600ms;
}
.active .delay3 {
    -webkit-animation-delay: 800ms; 
    animation-delay: 800ms;
}
.active .delay4 {
    -webkit-animation-delay: 1000ms; 
    animation-delay: 1000ms;
}
.active .delay5 {
    -webkit-animation-delay: 1500ms; 
    animation-delay: 1500ms;
}
.active .fast {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}

.active .fadeInUp {
    -webkit-animation-timing-function: 1s cubic-bezier(0.7, 0, 0.3, 1) 0s;
            animation-timing-function: 1s cubic-bezier(0.7, 0, 0.3, 1) 0s;
}

.IE svg path {
    stroke-dasharray: 0!important;;
    stroke-dashoffset: 0!important;;
}