::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

@font-face {
    font-family: zrnic;
    src: local(zrnic), 
        url('/fonts/zrnic.otf') format('opentype'),
        url('/fonts/zrnic.ttf') format('truetype')
        ;
}

nav .icon span {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}

nav .logo { height: 34px; display:none; padding: 3px 5px;}
html,
body {
    font-size: 14px;
    background: url('/images/frenchstucco.png') repeat;
}

body#body {
    font-family: "Helvetica Neue", "Helvetica", "Arial";
    margin: 0px;
    padding: 0px;
    color: #555555;
    min-width: 320px;
}
.ui.horizontal.divider { margin-bottom: 0 !important;}

h1,
h2,
h3,
h4,
h5,
nav .item{
    font-family: "zrnic", "Helvetica Neue", "Helvetica", "Arial";

}

.logos {
    margin-top: 10px;
    text-align: center; font-size:2em;
}
.logos i {
    margin: 0 5px;
}

#body .ui.type.items > .item {
    min-height: 255px;
}

#body .ui.type.items > .item > .image {
    padding: 1em;
    height: 165px;
    vertical-align: middle;
}
.tickerwrap .bx-wrapper .bx-viewport {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border:  0;

    background: transparent;
}
.bx-wrapper .bx-controls-direction a {
background: none;
top: 0;
height: 100%;
width: 5%;
margin:0px;

}
.bx-wrapper .bx-controls-direction a:hover {
background-color: rgba(100,100,100,0.3);
}
.bx-wrapper .bx-prev {
left: 0;
}
.bx-wrapper .bx-next {
right: 0;
}
.disabled{color: #aaa; font-style: normal;}

.noshadow {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.ui.top.sidebar.menu {
    background-color: transparent;
}

.logo_big {
    margin: 10px 0;
    width: 145px;
    max-width: 40%;
    height: auto;
}

ul.nojs.ticker { list-style-type: none; }
.nojs.ticker li { float: left; padding: 5px;}
.nojs.ticker img {max-height: 5em; width: auto;}

ul.slider img {width: 100%;}

ul.nojs.slider { list-style-type: none; overflow: hidden; padding: 0; white-space: nowrap; }
.nojs.slider li {display:none;}
.nojs.slider li:first-child { display:block; padding: 5px;}

.folio img { 
    width: 100%;
    box-sizing: border-box;
    -moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
    border: 5px solid #fff;
    background: #fff;
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}
.folio a img:hover {
    border-color: #FFFAFA;
}
.folio h3 { margin-bottom: 5px;}
.folio .description{ 
    font-size: 0.8rem;
    padding: 5px; 
    text-align: justify;
}
.contact .description {
    font-size: 0.8rem;
}
.folio a {text-decoration: none;}

.contact .content,
.contact .billinfo{
    margin-bottom: 0.7em;
    padding-left: 2em;
    position: relative;
    line-height: 1.5em;
}
.contact .content i { position: absolute; left: 0px; top: 0.25em;}
.contact a { color: #555; text-decoration: none;}
.contact a:hover {text-decoration: underline;}

@-webkit-keyframes finish {
    0% {
        width: 0%;
    }
    40% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}
@-moz-keyframes finish {
    0% {
        width: 0%;
    }
    40% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}
@keyframes finish {
    0% {
        width: 0%;
    }
    40% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}


#body.feed .example .segment {
    max-width: 800px;
}

#body .fixed .launch {
    display: none;
}
#body .designer .icon {
    font-family: 'Basic Icons';
}

#body .fixed.column .sticky-wrapper {
    height: 0px !important;
}


@media only screen and (max-width : 1725px) {
    #body .container {
        width: auto;
        margin-right: 200px;
        margin-left: 200px;
    }
    #body.index .container {
        margin-left: 8em;
        margin-right: 8em;
    }
    #body .sticky-wrapper.stuck .peek {
        margin-left: 0px;
        left: 95px;
    }
    #body.left.pushed .sticky-wrapper .peek {
        padding-left: 275px;
        margin-left: -275px;
    }
    #body.left.pushed .sticky-wrapper.stuck .peek {
        margin-left: 0px;
        padding-left: 275px;
    }
}
@media only screen and (max-width : 1500px) {
    #body.index .icon.header .icon {
        font-size: 3em;
    }
}

@media only screen and (max-width : 1050px) {
    #body .fixed .section,
    #body .fixed .title b {
        display: none;
    }
    #body .stripe .header .code.icon {
        display: none;
    }
    #body .fixed .container {
        width: auto;
        margin: 0px auto;
    }
    #body .attached.launch.button {
        display: none;
    }
    #body .fixed .launch {
        display: inline-block;
    }
    #body .sticky-wrapper {
        display: none;
    }
    #body .container {
        width: auto;
        margin: 0% 30px 0px;
    }
}
@media only screen and (max-width : 780px) {
    pre.console {
        height: 150px;
    }
    #body.index .masthead {
        text-align: center;
        padding: 50px 0px 15px;
    }
    #body.index .masthead h1 {
        font-size: 3em;
    }
    #body.index .masthead h1 .icon {
        display: none;
    }
    #body.index .masthead .button {
        font-size: 1.1em;
        margin-bottom: 0.5em;
    }
    #body.index .masthead h2 {
        font-size: 1.25em;
        margin: 0em 0em 1em;
    }
    #body.index .masthead p {
        font-size: 1.35em;
    }
    #body.index .container {
        margin-left: 2em;
        margin-right: 2em;
    }
    #body.index .icon.header .icon {
        font-size: 3em;
    }
    #body .introduction {
        display: block;
    }
    #body .advertisement {
        display: block;
        margin: 1em 0em;
        padding: 0em;
    }
    #body #menu .hide.item {
        display: block;
    }
    #body #menu .item > .icon {
        font-size: 1em !important;
    }
    #body .inverted.advertisement .carbonad {
        height: 109px;
    }
    #body .inverted.advertisement .carbonad-img {
        margin-top: 0px;
    }
    #body #carbonads-container {
        float: none;
    }
    #body .carbonad {
        width: auto;
    }
    #body .carbonad-text,
    #body .carbonad-tag {
        float: none;
        display: block;
        text-align: left;
        margin-left: 160px;
        width: 170px;
    }
}


@media only screen and (max-width : 600px) {
    #body .main.menu .borderless.item {
        display: none;
    }
    #body .fixed .developer,
    #body .fixed .designer,
    #body .fixed .previous,
    #body .fixed .next {
        display: none;
    }
    #body > .tab.segment .tabular.menu {
        display: none;
    }

    #body > .tab.segment .vertical.menu {
        display: block;
    }

    .top.sidebar .item span{
        display: none;
    }
    /*
    .top.sidebar .item:first-child,
    .top.sidebar .item:last-child {
        display: block;
    }*/
}
@media only screen and (max-device-width: 450px) {
    #body .container {
        margin-left: 10px;
        margin-right: 10px;
    }
    .bx-wrapper .bx-viewport,
    .folio img {
        border: 2px solid white;
    }
    .folio .description{ 
        padding: 2px;
    }
}
@media only screen and (min-width : 600px) {
    /*
    .top.sidebar .item{
        display: block;
    }
    .top.sidebar .item:first-child,
    .top.sidebar .item:last-child{
        display: none;
    }*/
}


@media only screen and (min-width : 1725px) {
    #body .container {
        width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
    #body .sticky-wrapper.stuck .peek {
        margin-left: -780px;
    }
    #body.left.pushed .main.menu {
        margin-left: -132px;
    }
}

@media only screen and (min-width : 2300px) {
    #body .container {
        width: 1320px;
    }
    #body .sticky-wrapper.stuck .peek {
        margin-left: -890px;
    }
}



@media only screen and (max-width : 998px) {
    #body.index .main.menu .container {
        width: auto;
        padding: 0% 4%;
    }
    #body.transition .examples {
        width: 100%;
    }
    #body.transition .examples .pointing.below.label {
        display: none;
    }
}
@media only screen and (min-width : 998px) {
    #body.index .main.menu .container {
        width: auto;
        padding: 0% 8%;
    }
    #body .examples {
        margin-right: 400px;
    }
    #body .fixed.column,
    #body .fixed.column .fixed {
        float: right;
        width: 300px;
    }
}
@media only screen and (min-width : 1500px) {
    #body.index .main.menu .container {
        width: auto;
        padding: 0% 13%;
    }
    #body .examples {
        margin-right: 500px;
    }
    #body .fixed.column,
    #body .fixed.column .fixed  {
        float: right;
        width: 400px;
    }
}
@media only screen and (min-width : 1750px) {

}
@media only screen and (min-width : 2000px) {

}