/* fonts */
/* font-family: 'Parisienne', cursive;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Cormorant Garamond', serif; */
/* font-family: 'Nordika Demo'; */
/* color:#737958; */
/* color:  #f7c4aa; */


* {
    box-sizing: border-box;
}

.bordered {
    border: 1px solid #ded7e0;
}


.strong{
    font-weight: bolder;
}

.defultGreen {
    color:#737958;
}

.defultPink {
    color:  #f7c4aa;
}

/* index page */
.small-inner {
    max-width: 1280px;
    margin: 0 auto;
}
.header0 {
    vertical-align: bottom;
    display: flex;
    align-items: flex-end;
    margin: 6em 0 6em 0;
}
.header-left{
    /* background-color: #3ad6d4; */
    vertical-align: bottom;
    text-align: end;
    padding: 40px 60px 2px 40px;
}

.header-icons{
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: inline-block;
    /* margin: 0 20px 0 0; */
    position: relative;
    text-align: end;
    vertical-align: bottom;
}

.header-right{
    /* background-color:yellow; */
    border-left: 4px solid black;
    padding: 0 40px 2px 60px;
    margin-top: 40px;
}

.header-right h1{
    color: #000;
}
.header-p{
    margin: 0;
    padding-bottom: 4px;
    color: rgb(60, 60, 60);
    font-family: 'Futura Lt BT';
}
.header-me{
    margin: 0;
    padding-bottom: 4px;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
}



.header-p a{
    color: #000;
}

@media screen and (max-width: 600px) {
    .header-left{
        display: none;
    }
    .header-right{
        padding: 0 0 0 30px;
    }
}

.futura {
    font-family: Futura;
}



/*index-projects*/

.index-bigbox {
    width: 100%;
    display: block;
}

.thumb-color-box {
    display: inline-block;
    width: 49%;
    /*margin: 1em;*/
    /*padding: 1em;*/
    /*border: 1px red solid;*/
    /*display: block;*/
    position: relative;
}

/*.thumb-box {*/
    /*display: inline-block;*/
    /*width: 30%;*/
    /*margin: 1em;*/
    /*padding: 1em;*/
/*}*/

.thumb-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.thumb-box img {
    width: 100%;
}

.thumb-img {
    /*width: 100%;*/
}





/* index project images */
.zzrow {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
    margin-top:3em;
}

/* index project images - Create four equal columns that sits next to each other */
.zzcolumn {
    -ms-flex: 33%; /* IE10 */
    flex: 33%;
    max-width: 33%;
    padding: 0 10px;
}

.zzcolumn img {
    vertical-align: middle;
    width: 100%;
}



/* index project images - Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .zzcolumn {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }

    .zz-hr {
        margin: 10px 0;
    }
}

/* index project images - Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .zzcolumn {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }

    .thumb-color-box{
        width: 98%;
    }

}

/*...each project...*/
.project-thumb {
    width: 20%;
}
.project-thumb img{
    width: 100%;
    /*height: 300px;*/
}

.one img {
    margin: 0 0 30px 0;
    width: 100%;
    height: 100%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
  }
  
  .one:hover img {
    filter: blur(2px) brightness(60%);
  }
  
  .one :not(img) {
    position: absolute;
    top: 30%;
    z-index: 1;
    color: #ffffff;
    width: 100%;
    text-align: center;
    letter-spacing: 0.2rem;
    opacity: 0;
    -webkit-transition: 0.2s;
    transition: 0.2s;
  }
  
  .one:hover :not(img) {
    opacity: 1;
  }
  
  .one p {
    top: 40%;
  }

/* ******* */
.color-box{
    display: block;
    position: relative;
}


@media (max-width: 600px) {

    .iconVerticalShow {
        display: none;
    }
}

.small-show{
    display: none;
    line-height: 1.4em;
}

.small-show h2{
    font-family: 'Playfair Display', serif;
}

.small-show p{
    font-family: 'Poppins', sans-serif;
    line-height: 2em;
}

@media (max-width: 600px) {
    .small-show{
        display: inline-block;
        /*margin-top: 20px;*/
    }
}


/* ****** */


.white {
    background-color: #fff;
    border: solid 1px rgba(210, 215, 217, 0.75) !important;
}

.bonesLightBlue{
    background-color: #a9e4de;
}

.bonesBlue {
    background-color: #81d8d0;
}

.boneGrey{
    background-color: #999;
}

.black {
    background-color: #000;
}

.chinaLightYellow{
    background-color: 	#fcee21;
}

.chinaYellowCircle{
    background-color: #f8b62d;
}

.chinaLightPurpleCircle{
    background-color: #8A9EDE;
}

.chinaDarkBlue{
    background-color: #23244F;
}

.paris {
    font-family: 'Parisienne', cursive;
}

.josefin {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
}

.garamond{
    font-family: 'Cormorant Garamond', serif;
}

.futura {
    font-family: 'Futura Lt BT';
}


.demo{
    font-family: 'Nordika Demo';
}

.helvetica {
    font-family: Helvetica;
    font-style: normal;
	font-variant: normal;
	font-weight: 400;
}

.zz-hr {
    margin: 90px 0;
}

.zz-icon {
    width: 90px;
    height:90px;
    opacity:0.7;
    fill:#F7C4AA;
    background: url("../../images/circle_000.svg") no-repeat;
    vertical-align: middle;
    text-align: center;
}

.zz-icon i{
    top:20%;
    color:white;
    vertical-align: middle;
    text-align: center;
}

.Torange {
    color: #FF9501;
}

.smart-purple{
    color:#8d40d4;
}

.smart-blue {
    color:#68C4DD;
}

.chinayellow {
    color: #f8b62d;
}


.colorSmartEdgeBlue{
    background-color:  #3ad6d4;
}

.colorSmartEdgePurple{
    background-color:  #8d40d4;
}

.colorSmartLightPurple{
    background-color: #8A9EDE;
}


.zz-block{
    display: block;
}

.zz-f-b-i {
    font-family: 'Futura Md BT';
    font-weight: bold;
    font-style: italic;
}

.zz-f-b {
        font-family: 'Futura BdCn BT';
        font-weight: bold;
        font-style: normal;
}

.bones-logo {
    padding-top:40px;
}    

.zz-box {
    width: 36%;
}  

.zz-box img{
    width: 100%;
}

.mac-box {
    width: 70%;
}

.mac-box img{
    width: 100%;
}

.circle{
    width: 20%;
    margin: 0 0;
    padding: 10px 10px;
}

.dot {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 16px 0;
}

.padding-right {
    padding-right:2em;
}

.front-v-line {
    border-left: solid 1px rgba(210, 215, 217, 0.75);
    /* margin: 0 0 2em 0; */
    padding: 0 0 0 2em;
}


/* ***** */
/*..ipad screen..*/

.pad {
    width: 308px;
    height: 650px;
    position:relative;
    border: 40px solid #f2eaff;
    border-width: 67px 9px;
    border-radius: 40px;
    margin: 50px auto;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

.pad iframe {
    border: 0;
    width: 100%;
    height: 100%;
    background-color:#000;
}


.pad .padview {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0px 3px 0 #000, 0px 4px 0 #000, 0px 5px 0 #000, 0px 7px 0 #000, 0px 10px 20px #000;
}

/* ***** */



/* for iframe iphone */
.phone {
    width: 800px;
    height: 560px;
    position:relative;
    border: 40px solid #121212;
    border-width: 55px 7px;
    border-radius: 40px;
    margin: 50px auto;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

.phone iframe {
    border: 0;
    width: 100%;
    height: 100%;
    background-color:#000;
}


.phone .phoneview {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0px 3px 0 #000, 0px 4px 0 #000, 0px 5px 0 #000, 0px 7px 0 #000, 0px 10px 20px #000;
}


@media screen and (max-width: 400px) {
    .zz-box {
        width: 80%;
    }
    .dot {
        width: 60px;
        height: 60px;
    }
    .circle p{
        font-size: 0.6em
    }

    .front-v-line{
        border-left: none;
        padding: 0.5em 0 0.5em 2em;
    }

    .mac-box {
        width: 100%;
    }

    /* .phone {
        height: 600px;
    } */
}


/* dl dd dt * main.css line 2887 */
dl {
    line-height:3em;
}
dt {
    font-weight: bold;
    text-align: right;
    float: left;
    clear: left;
}

dd {
    display: block;
    -webkit-margin-start: 80px;
    font-weight: 200;
    padding-right: 20px;
} 



/* ... HERE zz-image-grid... */

.zz-card{
    height: 500px;
    background-color: yellowgreen;
}

.zz-row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

        /* Create four equal columns that sits next to each other */
.zz-column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    /* max-width: 25%; */
    padding: 0 10px;
}

.zz-column img {
    margin-top: 8px;
    vertical-align: middle;
}

        /* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .zz-column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

        /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}
/* ...END zz-image-grid... */





/* .... HERE gallery ..... */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fff;
    /*box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);*/
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}
.gallery-item {
    flex-basis: 32.7%;
    margin-bottom: 20px;
    opacity: 1;
    cursor: pointer;
    display: none;
}

.show {
    display: block;
    }

    
.gallery-item:hover {
    opacity: 0.9;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-content {
    font-size: .8em;
}

.lightbox {
    position: fixed;
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    overflow: auto;
    top: 0;
    left: 0;
}
.lightbox-content {
    position: relative;
    width: 40%;
    /*height: 70%;*/
    margin: 5% auto;
}
.lightbox-content img {
    border-radius: 7px;
    box-shadow: 0 0 3px 0 rgba(225, 225, 225, .25);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 7px;
    top: 45%;
    cursor: pointer;
}
.lightbox-prev {
    left: 0;
}
.lightbox-next {
    right: 0;
}
.lightbox-prev:hover,
.lightbox-next:hover {
    opacity: .8;
}



.img-board {
    border:1px solid rgba(204, 216, 255, 0.66);
}

#sdLogo {
    width: 100%;
}

.comfortaa {
    font-family: 'Comfortaa', cursive;
}


/* smartDelivery */
/*persona*/

#carousel {
    position: relative;
    width:100%;
    margin:0 auto;
    /*background:url(http://www.highcharts.com/samples/graphics/sand.png);*/
}

#slides {
    overflow: hidden;
    position: relative;
    width: 100%;
    /*height: 400px;*/
}

#slides ul {
    list-style: none;
    width:100%;
    margin: 0;
    padding: 0;
    position: relative;
}

#slides li {
    width:100%;
    float:left;
    text-align: center;
    position: relative;
    font-family:'Poppins', sans-serif;
}

/* Styling for prev and next buttons */
.btn-bar{
    margin: 0 auto;
    display: block;
    position: absolute;
    top: 30%;
    left: 0;
    width: 98%;
}

#buttons {
    padding:0 0 5px 0;
    vertical-align: center;
}

#buttons a {
    text-align:center;
    display:block;
    font-size:30px;
    outline:0;
    margin:0 0;
    color:#8d40d4;
    text-decoration:none;
    padding:9px;
    width:20px;
}


#prev {
    float: left;
}

#next {
    float: right;
}

a#prev:hover, a#next:hover {
    color:lightslategray;
}

#slides {
    width: 90%;
}

.quote-phrase, .quote-author {
    font-family:'Poppins', sans-serif;
    font-weight:200;
    display: table-cell;
    vertical-align: middle;
    padding: 5px 20px;
}

.quote-phrase {
    font-size:20px;
    color:#000;
}

.quote-marks {
    font-size:30px;
    padding:0 3px 3px;
    position:inherit;
}

.quote-author {
    font-style:normal;
    font-size:20px;
    color: #8d40d4;
    font-weight:400;
    height: 30px;
    padding-bottom: 40px;
}

.quoteContainer, .authorContainer {
    display: table;
    width: 100%;
}
/**** persona end */

@media (max-width: 767px) {
    .gallery-container {
        width: 100%;
    }
    .gallery-item {
        flex-basis: 49.80%;
        margin-bottom: 3px;
    }
    .lightbox-content {
        width: 80%;
        height: 60%;
        margin: 15% auto;
    }
}
@media (max-width: 480px) {
    .gallery-item {
        flex-basis: 100%;
        margin-bottom: 1px;
    }
    .lightbox-content {
        width: 90%;
        margin: 20% auto;
    }
}
/* ...END Gallery.... */


@media screen and (max-width: 1680px) {

    .ZZ-sm-none {
        display: none;
        background-color:red;
    }

}

/* weee ** weee ** weee ** weee */
.wPic {
    position:relative;
    height: 500px;
}

/*.wBottom {*/
/*    outline: 6px solid red;*/
/*}*/

/*.wTop {*/
/*    outline: 6px solid yellow;*/
/*}*/

/*.wBottomX {*/
/*    position:absolute;*/
/*    !*height: 400px;*!*/
/*    !*width:290px;*!*/
/*    margin-top: 0;*/
/*    margin-left:0;*/
/*    -webkit-transition: opacity 0.3s ease-in-out;*/
/*    -moz-transition: opacity 0.3s ease-in-out;*/
/*    -o-transition: opacity 0.3s ease-in-out;*/
/*    transition: opacity 0.3s ease-in-out;*/
/*}*/

/*.wTopX {*/
/*    position:absolute;*/
/*    !*height: 400px;*!*/
/*    !*width:290px;*!*/
/*    margin-top: 0;*/
/*    margin-left:0;*/
/*    -webkit-transition: opacity 0.3s ease-in-out;*/
/*    -moz-transition: opacity 0.3s ease-in-out;*/
/*    -o-transition: opacity 0.3s ease-in-out;*/
/*    transition: opacity 0.3s ease-in-out;*/
/*}*/

/*.wTopX :hover {*/
/*    opacity:0;*/
/*}*/

/*.wBottomX img {*/
/*    position:absolute;*/
/*    !*height: 400px;*!*/
/*    !*width:290px;*!*/
/*    margin-top: 0;*/
/*    margin-left:0;*/
/*    -webkit-transition: opacity 0.3s ease-in-out;*/
/*    -moz-transition: opacity 0.3s ease-in-out;*/
/*    -o-transition: opacity 0.3s ease-in-out;*/
/*    transition: opacity 0.3s ease-in-out;*/
/*}*/

/*.wTopX img {*/
/*    position:absolute;*/
/*    !*height: 400px;*!*/
/*    !*width:290px;*!*/
/*    margin-top: 0;*/
/*    margin-left:0;*/
/*    -webkit-transition: opacity 0.3s ease-in-out;*/
/*    -moz-transition: opacity 0.3s ease-in-out;*/
/*    -o-transition: opacity 0.3s ease-in-out;*/
/*    transition: opacity 0.3s ease-in-out;*/
/*}*/

/*.wTopX img  :hover {*/
/*    opacity:0;*/
/*}*/



.wPic img {
    position:absolute;
    /*height: 400px;*/
    /*width:290px;*/
    margin-top: 0;
    margin-left:0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.wPic img .wTop :hover {
    opacity:0;
}

.wPic img.wTop:hover {
    opacity:0;
}

/** weee ** weee ** weee ** weee ** weee **/