@charset "UTF-8";

@import url('../fonts/fonts.css');

::selection {
    background: #f10087;
}

::-moz-selection {
    background: #f10087;
}

/*-------------------------------------------------grain--------------------------------------------------------------*/

@-webkit-keyframes grain {
    0%, 100% {
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    10% {
        -moz-transform: translate(-5%, -10%);
        -ms-transform: translate(-5%, -10%);
        -webkit-transform: translate(-5%, -10%);
        transform: translate(-5%, -10%);
    }
    20% {
        -moz-transform: translate(-15%, 5%);
        -ms-transform: translate(-15%, 5%);
        -webkit-transform: translate(-15%, 5%);
        transform: translate(-15%, 5%);
    }
    30% {
        -moz-transform: translate(7%, -25%);
        -ms-transform: translate(7%, -25%);
        -webkit-transform: translate(7%, -25%);
        transform: translate(7%, -25%);
    }
    40% {
        -moz-transform: translate(-5%, 25%);
        -ms-transform: translate(-5%, 25%);
        -webkit-transform: translate(-5%, 25%);
        transform: translate(-5%, 25%);
    }
    50% {
        -moz-transform: translate(-15%, 10%);
        -ms-transform: translate(-15%, 10%);
        -webkit-transform: translate(-15%, 10%);
        transform: translate(-15%, 10%);
    }
    60% {
        -moz-transform: translate(15%, 0%);
        -ms-transform: translate(15%, 0%);
        -webkit-transform: translate(15%, 0%);
        transform: translate(15%, 0%);
    }
    70% {
        -moz-transform: translate(0%, 15%);
        -ms-transform: translate(0%, 15%);
        -webkit-transform: translate(0%, 15%);
        transform: translate(0%, 15%);
    }
    80% {
        -moz-transform: translate(3%, 35%);
        -ms-transform: translate(3%, 35%);
        -webkit-transform: translate(3%, 35%);
        transform: translate(3%, 35%);
    }
    90% {
        -moz-transform: translate(-10%, 10%);
        -ms-transform: translate(-10%, 10%);
        -webkit-transform: translate(-10%, 10%);
        transform: translate(-10%, 10%);
    }
}

@-moz-keyframes grain {
    0%, 100% {
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    10% {
        -moz-transform: translate(-5%, -10%);
        -ms-transform: translate(-5%, -10%);
        -webkit-transform: translate(-5%, -10%);
        transform: translate(-5%, -10%);
    }
    20% {
        -moz-transform: translate(-15%, 5%);
        -ms-transform: translate(-15%, 5%);
        -webkit-transform: translate(-15%, 5%);
        transform: translate(-15%, 5%);
    }
    30% {
        -moz-transform: translate(7%, -25%);
        -ms-transform: translate(7%, -25%);
        -webkit-transform: translate(7%, -25%);
        transform: translate(7%, -25%);
    }
    40% {
        -moz-transform: translate(-5%, 25%);
        -ms-transform: translate(-5%, 25%);
        -webkit-transform: translate(-5%, 25%);
        transform: translate(-5%, 25%);
    }
    50% {
        -moz-transform: translate(-15%, 10%);
        -ms-transform: translate(-15%, 10%);
        -webkit-transform: translate(-15%, 10%);
        transform: translate(-15%, 10%);
    }
    60% {
        -moz-transform: translate(15%, 0%);
        -ms-transform: translate(15%, 0%);
        -webkit-transform: translate(15%, 0%);
        transform: translate(15%, 0%);
    }
    70% {
        -moz-transform: translate(0%, 15%);
        -ms-transform: translate(0%, 15%);
        -webkit-transform: translate(0%, 15%);
        transform: translate(0%, 15%);
    }
    80% {
        -moz-transform: translate(3%, 35%);
        -ms-transform: translate(3%, 35%);
        -webkit-transform: translate(3%, 35%);
        transform: translate(3%, 35%);
    }
    90% {
        -moz-transform: translate(-10%, 10%);
        -ms-transform: translate(-10%, 10%);
        -webkit-transform: translate(-10%, 10%);
        transform: translate(-10%, 10%);
    }
}

@-ms-keyframes grain {
    0%, 100% {
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    10% {
        -moz-transform: translate(-5%, -10%);
        -ms-transform: translate(-5%, -10%);
        -webkit-transform: translate(-5%, -10%);
        transform: translate(-5%, -10%);
    }
    20% {
        -moz-transform: translate(-15%, 5%);
        -ms-transform: translate(-15%, 5%);
        -webkit-transform: translate(-15%, 5%);
        transform: translate(-15%, 5%);
    }
    30% {
        -moz-transform: translate(7%, -25%);
        -ms-transform: translate(7%, -25%);
        -webkit-transform: translate(7%, -25%);
        transform: translate(7%, -25%);
    }
    40% {
        -moz-transform: translate(-5%, 25%);
        -ms-transform: translate(-5%, 25%);
        -webkit-transform: translate(-5%, 25%);
        transform: translate(-5%, 25%);
    }
    50% {
        -moz-transform: translate(-15%, 10%);
        -ms-transform: translate(-15%, 10%);
        -webkit-transform: translate(-15%, 10%);
        transform: translate(-15%, 10%);
    }
    60% {
        -moz-transform: translate(15%, 0%);
        -ms-transform: translate(15%, 0%);
        -webkit-transform: translate(15%, 0%);
        transform: translate(15%, 0%);
    }
    70% {
        -moz-transform: translate(0%, 15%);
        -ms-transform: translate(0%, 15%);
        -webkit-transform: translate(0%, 15%);
        transform: translate(0%, 15%);
    }
    80% {
        -moz-transform: translate(3%, 35%);
        -ms-transform: translate(3%, 35%);
        -webkit-transform: translate(3%, 35%);
        transform: translate(3%, 35%);
    }
    90% {
        -moz-transform: translate(-10%, 10%);
        -ms-transform: translate(-10%, 10%);
        -webkit-transform: translate(-10%, 10%);
        transform: translate(-10%, 10%);
    }
}

@keyframes grain {
    0%, 100% {
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    10% {
        -moz-transform: translate(-5%, -10%);
        -ms-transform: translate(-5%, -10%);
        -webkit-transform: translate(-5%, -10%);
        transform: translate(-5%, -10%);
    }
    20% {
        -moz-transform: translate(-15%, 5%);
        -ms-transform: translate(-15%, 5%);
        -webkit-transform: translate(-15%, 5%);
        transform: translate(-15%, 5%);
    }
    30% {
        -moz-transform: translate(7%, -25%);
        -ms-transform: translate(7%, -25%);
        -webkit-transform: translate(7%, -25%);
        transform: translate(7%, -25%);
    }
    40% {
        -moz-transform: translate(-5%, 25%);
        -ms-transform: translate(-5%, 25%);
        -webkit-transform: translate(-5%, 25%);
        transform: translate(-5%, 25%);
    }
    50% {
        -moz-transform: translate(-15%, 10%);
        -ms-transform: translate(-15%, 10%);
        -webkit-transform: translate(-15%, 10%);
        transform: translate(-15%, 10%);
    }
    60% {
        -moz-transform: translate(15%, 0%);
        -ms-transform: translate(15%, 0%);
        -webkit-transform: translate(15%, 0%);
        transform: translate(15%, 0%);
    }
    70% {
        -moz-transform: translate(0%, 15%);
        -ms-transform: translate(0%, 15%);
        -webkit-transform: translate(0%, 15%);
        transform: translate(0%, 15%);
    }
    80% {
        -moz-transform: translate(3%, 35%);
        -ms-transform: translate(3%, 35%);
        -webkit-transform: translate(3%, 35%);
        transform: translate(3%, 35%);
    }
    90% {
        -moz-transform: translate(-10%, 10%);
        -ms-transform: translate(-10%, 10%);
        -webkit-transform: translate(-10%, 10%);
        transform: translate(-10%, 10%);
    }
}

.noise > * {
    z-index: 2;
}

.noise {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    min-height: 480px;
    min-width: 420px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .noise {
        display: none;
    }
}

.noise:after {
    -webkit-animation: grain 5s steps(10) infinite;
    -moz-animation: grain 5s steps(10) infinite;
    -ms-animation: grain 5s steps(10) infinite;
    animation: grain 5s steps(10) infinite;
    background: url(../images/noise.png);
    content: "";
    display: block;
    height: 300%;
    left: -100%;
    position: absolute;
    top: -110%;
    width: 300%;
    z-index: 1;
    opacity: 0.9;
}

.first_page > .fp-tableCell, .last_page > .fp-tableCell {
    position: relative;
    overflow: hidden;
}

/*-------------------------------------------------animate.css--------------------------------------------------------*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

/*------------------------------------------------timeline------------------------------------------------------------*/

#menu {
    width: 130px;
    height: auto;
    right: 0;
    top: 50%;
    margin: 20px 4% 20px 20px;
    padding: 0;
    margin-top: -352.5px;
}

@media (max-height: 480px), (max-width: 420px) {
    #menu {
        display: none;
    }
}

#menu li {
    display: block;
    color: #343434;
    background-image: url(../images/timeline.png);
    background-repeat: no-repeat;
    background-position: 105px 26px;
    height: 160px;
    margin-top: -28px;
}

#menu li:first-child {
    margin-top: 0;
}

#menu li:nth-child(6) {
    background-image: url(../images/timeline_last.png);
    height: 50px;
}

#menu li.active {
    color: #f10087;
}

#menu li a {
    text-decoration: none;
    color: #343434;
    font-family: "ProximaNovaEb";
    font-size: 18px;
}

#menu li.active a:hover {
    color: #f10087;
    cursor: default;
}

#menu li:hover a {
    color: #f10087;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#menu li a,
#menu li.active a {
    display: block;
}

#menu li.active a {
    color: #f10087;
}

#timeline {
    position: absolute;
    right: -25%;
    top: 50%;
    max-height: 100px;
    margin-top: -50px;
}

#timeline span {
    font-family: "ProximaNovaEb";
    font-size: 16px;
    text-transform: uppercase;
}

#timeline div {
    text-align: center;
}

/*---------------------------------------------------triangles_main---------------------------------------------------*/

.triangles_parallax {
    height: 70%;
    width: 100%;
    min-height: 340px;
    white-space: nowrap;
    text-align: center;
    font-size: 0;
}

.triangles_parallax:before {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
}

.triangles_container {
    max-width: 920px;
    min-width: 390px;
    margin: 0 auto;
    padding: 3% 3% 4% 3%;
    /*overflow: hidden;*/
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    height: 90%;
}

/*------------------------------------------------------------*/

.case {
    height: 70%;
    width: 100%;
    min-height: 340px;
    position: relative;
    white-space: nowrap;
    text-align: center;
    font-size: 0;
}

.case:before {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
}

.case_container {
    max-width: 715px;
    max-height: 570px;
    min-width: 390px;
    margin: 0 auto;
    /*padding: 6% 3% 5% 3%;*/
    padding: 4% 3% 5% 3%;
    /* overflow: hidden; */
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    height: 90%;
}

.case_href, .case_href > div, .case_triangle_img, .case_href img {
    height: 100%;
}

.case_href {
    display: inline-block;
    position: relative;
    text-align: center;
}

/*-------------------------------bugfix Mozilla----------------------------------*/
@-moz-document url-prefix() {
    .case_href {
        width: 80%;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .case_href {
        width: 80%;
    }
}

.case_href:before {
    content: " ";
    background-image: url("../images/triangles_border.png");
    display: block;
    position: absolute;
    height: 120%;
    width: 120%;
    top: -7%;
    left: -10%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    opacity: 1;
}

.case_href:hover:before {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0.3;
}

.cases_container {
    height: 100%;
    width: 100%;
}

.case_url {
    height: 100%;
}

.case_triangle_img {
    position: relative;
}

.case_triangle_img > img, .case_triangle_img > svg,  .case_triangle_img > svg #Artboard{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    /*-webkit-filter: grayscale(90%);
    -moz-filter: grayscale(90%);
    -ms-filter: grayscale(90%);
    filter: grayscale(90%); */
}

.case_href .case_triangle_img > img:first-child {
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    filter: grayscale(1);

    /*background: url(../images/pt.png) repeat fixed 50% 0 transparent;
    padding: 0px 0px 0px 0px;
    position: relative;  */
}

.case_href:hover .case_triangle_img > img:first-child {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    filter: grayscale(0);
}

.case_href .case_triangle_img > svg:last-child {
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.98;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}

.case_href:hover .case_triangle_img > svg:last-child {

    opacity: 0.98;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -o-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);

    /*opacity: 0;*/

    /*-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%); */
}

.case_href:hover .case_triangle_img > svg:last-child #Artboard
{
    fill:#f10087;
}

.name_case {
    font-family: "ProximaNovaEi";
    font-size: 90px;
    color: #F10087;
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    margin-top: 10%;
    line-height: normal;
    position: relative;
    left: 50%;

    -webkit-transform: scale(1) translate(-50%, 0px);
    -moz-transform: scale(1) translate(-50%, 0px);
    -o-transform: scale(1) translate(-50%, 0px);
    -ms-transform: scale(1) translate(-50%, 0px);
    transform: scale(1) translate(-50%, 0px);

    display: table;
    white-space: nowrap;
}

.urbica_font_size {
    white-space: nowrap;
    letter-spacing: -.5px;
}

.case_href:hover .name_case {
    opacity: 0;
    /*-webkit-transform: scale(0) translate(-50%, 0px);
    -moz-transform: scale(0) translate(-50%, 0px);
    -o-transform: scale(0) translate(-50%, 0px);
    -ms-transform: scale(0) translate(-50%, 0px);
    transform: scale(0) translate(50%, 0px);*/
}

.title_case {
    font-family: "ProximaNovaLt";
    font-size: 20px;
    color: White;
    /*text-transform: uppercase;  */
    max-width: 39%;
    margin: 0 auto;
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.case_href:hover .title_case {
    opacity: 0;
}

.title_case_view {
    font-size: 20px;
    color: White;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;

    /*font-family: "ProximaNovaEb";*/
    font-family: "ProximaNovaLt";
    opacity: 0;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-align: center;

    transform: perspective(400px) translate3d(0, 0, -5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg);

    /*border: 2px solid #F10087;
    border-radius: 30px;
    padding: 1.8% 0%;
    background: rgba(241, 0, 135, 0.35);
    max-width: 36%;
    margin-top: -10.5%;*/
}

.title_case_view img {
    display: none;

    /*height: 29.45%;
    width: 29.45%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    /*bottom: -71%;*/
    /*bottom: 0;
    right: 0;
    opacity: 0.8;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;*/
}

.title_case_view span {
    /*position: absolute;
    left: 0;
    right: 0;
    bottom: 15%; */
    position: relative;
    left: 50%;
    top: 46%;
    -webkit-transform: translate(-50%, -46%);
    -ms-transform: translate(-50%, -46%);
    transform: translate(-50%, -46%);
    display: table;

}

.case_href:hover .title_case_view, .title_case_view img:hover {
    opacity: 1;
}

.case_href:hover .title_case_view {
    transform: perspective(400px) translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0);

}

.case_triangle_name {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/*--------------------------------------------------------------*/
.case_info {
    position: absolute;
    bottom: 4%;
    left: 4%;
    font-size: 16px;
    text-align: left;
    max-width: 310px;
    min-width: 195px;
    width: 35%;
}

.case_info > div {
    overflow: hidden;
}

.case_work_period > div {
    float: left;
}

.case_position {

}

.case_year {
    font-family: "ProximaNovaEb";
    font-size: 80px;
    color: #343434;
    letter-spacing: 5px;
}

.case_month {
    font-family: "ProximaNovaEb";
    font-size: 28px;
    color: #343434;
    text-transform: uppercase;
    margin-bottom: -33px;
}

.case_position > div:first-child {
    font-family: "ProximaNovaLt";
    font-size: 20px;
    font-style: italic;
    text-transform: uppercase;
}

.case_position > div:last-child {
    font-family: "ProximaNovaLt";
    font-size: 26px;
    color: #343434;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/*--------------------------------------------------------------------------------------------------------------------*/

.scene {
    padding: 0;
    margin: 0;
    height: 100%;
}

.layer {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.layer > img {
    max-height: 100%;
    margin: 0 auto;
    display: block;
}

#layer1 {
    max-height: 86%;
    max-width: 86%;
    position: relative;
    top: -5.5%;
    right: -15%;
}

#layer2 {
    position: relative;
    left: 0.08%;
}

#layer3 {
    position: relative;
    top: 18%;

    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/*@media (max-height: 768px) {
	#layer3 {
		max-width: 71%;
	}
}   */
#layer4 {
    position: relative;
    right: 0.08%;
}

#layer5 {
    max-height: 86%;
    max-width: 86%;
    position: relative;
    top: 10.5%;
    right: 11%;
}

/*---------------------------------------------------------------------------------------------------------------------*/
/* - Loader - */
.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #313131;
    z-index: 999999;
    overflow: hidden;
}

.loading img.loader {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    -webkit-animation: fadeInUp 0.5s;
    animation: fadeInUp 0.5s;
}

.hidden {
    visibility: hidden;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

/* ==================================================================================================================== */
/* ==================================================================================================================== */
/* ==================================================================================================================== */
body {
    -webkit-font-smoothing: antialiased;
    font-family: "ProximaNovaLt", sans-serif !important;
    font-size: 18px;
    color: #bcbcbc;
    overflow: hidden;
}

body.body-animated {
    -webkit-animation: fadeIn 0.7s;
    animation: fadeIn 0.7s;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

/*-------------------------------------------------------------------------------------------------------------------*/
.section, .first_page > .fp-tableCell, .last_page > .fp-tableCell {
    min-width: 420px;
    min-height: 480px;
}

html, body {
    min-width: 420px;
}

/*-------------------------------------------------------------------------------------------------------------------*/
.main-navigation, .line_wrapper.first_part {
    height: 10%;
    min-height: 60px;
}

nav ul {
    z-index: 99999;
    position: relative;
    margin: 0;
}

nav ul li {
    display: block;
    font-size: 26px;
    font-weight: 800;
    padding: 0 10px;
    line-height: 26px;
}

nav ul.lang li {
    padding-right: 0;
}

nav ul li:first-child {
    padding-left: 0;
}

nav ul li:last-child {
    padding-right: 0;
}

nav ul li a {
    color: #c2c2c2;
    letter-spacing: 1px;
    font-family: "ProximaNovaEb";
    font-size: 18px;
    text-transform: uppercase;
}

.first_page .container-fluid {
    padding: 2% 4% 0% 4%;
    overflow: hidden;
    height: 100%;
}

.container-fluid > div {
    padding: 0 0;
}

/*---------------------------------------------------------------------------------------------------------------------*/
.line_wrapper {
    width: 100%;
    height: 20%;
    text-align: center;
    min-height: 80px;
}

.line {
    width: 1px;
    height: 100%;
    background: #c2c2c2;
    margin: 0 auto;
}

.first_page .line {
    /*height: calc(100% - 26px - 26px);      */
}

.point_href {
    display: block;
    position: relative;
    z-index: 2;
    width: 26px;
    height: 26px;
    margin: 0 auto;
}

.point_icon, .point_href svg {
    display: block;
    position: relative;
    width: inherit;
    height: inherit;
}

.point_href:hover svg path {
    fill: #f10087;
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;

}

.point_icon:before {
    content: " ";
    background: url(../images/circule_act.png) center center;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    background-size: contain;
    margin: 0 auto;
    display: block;
    animation-name: spin;

    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: table;
}

@-ms-keyframes spin {
    from {
        height: 26px;
        width: 26px;
        opacity: 0.9;
    }
    to {
        height: 48px;
        width: 48px;
        opacity: 0.1;
    }
}

@-moz-keyframes spin {
    from {
        height: 26px;
        width: 26px;
        opacity: 0.9;
    }
    to {
        height: 48px;
        width: 48px;
        opacity: 0.1;
    }
}

@-webkit-keyframes spin {
    from {
        height: 26px;
        width: 26px;
        opacity: 0.9;
    }
    to {
        height: 48px;
        width: 48px;
        opacity: 0.1;
    }
}

@keyframes spin {
    from {
        height: 26px;
        width: 26px;
        opacity: 0.9;
    }
    to {
        height: 48px;
        width: 48px;
        opacity: 0.1;
    }
}

.point_text {
    margin-bottom: 1.5%;
    font-weight: 100;
    font-family: "ProximaNovaTh";
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.first_page .point_text, .last_page .point_text {
    font-size: 22px;
}

.point_text a {
    font-size: 18px;
}

@media (max-width: 960px),(max-height: 600px) {
    .point_href {
        height: 22px;
        width: 22px;
    }

    @-ms-keyframes spin {
        from {
            height: 22px;
            width: 22px;
            opacity: 0.9;
        }
        to {
            height: 42px;
            width: 42px;
            opacity: 0.1;
        }
    }

    @-moz-keyframes spin {
        from {
            height: 22px;
            width: 22px;
            opacity: 0.9;
        }
        to {
            height: 42px;
            width: 42px;
            opacity: 0.1;
        }
    }

    @-webkit-keyframes spin {
        from {
            height: 22px;
            width: 22px;
            opacity: 0.9;
        }
        to {
            height: 42px;
            width: 42px;
            opacity: 0.1;
        }
    }

    @keyframes spin {
        from {
            height: 22px;
            width: 22px;
            opacity: 0.9;
        }
        to {
            height: 42px;
            width: 42px;
            opacity: 0.1;
        }
    }

}

@media (max-width: 480px),(max-height: 320px) {
    .point_href {
        height: 22px;
        width: 22px;
    }
}

/*-----------------------------------------------------last_slide-----------------------------------------------------*/

.last_page .case {
    height: 90%;
}

.last_page .case_container {
    width: 100%;
    padding: 0;
    vertical-align: bottom;
    max-width: 100%;
    max-height: 810px;
    min-height: 530px;
}

.last_page .case_href:before, .last_page .case_href:hover:before {
    display: none;
}

.last_page .case_href .case_triangle_img > img:first-child {
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    filter: grayscale(0);
}

.last_page .case_position {

}

.last_page .case_position > div:last-child {
    line-height: 24px;
}

.last_page .case_position > div:last-child a {
    color: white;
    font-family: "ProximaNovaTh";
    font-size: 20px;
    text-transform: lowercase;
}

.last_page .case_position + div a {
    color: #f10087;
    letter-spacing: 1px;
    font-family: "ProximaNovaEb";
    font-size: 18px;
    text-transform: uppercase;
}

.last_page .case_position > div:last-child a:hover {
    color: #f10087;
}

/*.last_page .line
{
	height: 75%;
}

.last_page .point_text
{
	height: 25%;
	margin-top: 1.5%;
	margin-bottom: 0;
} */

.last_page .case_position > div:first-child {
    line-height: 24px;
}

.last_page .case_info {
    width: 100%;
    bottom: 19%;
}

.last_page .case_info > div:first-child {
    margin-bottom: 8%;
}

.last_page .case_info > div:first-child a {
    font-family: "ProximaNovaEb";
    font-size: 28px;
    text-transform: uppercase;
    color: #f10087;
}

.last_page .name_case {
    /*display: none;*/

    font-family: "ProximaNovaEi";
    font-size: 90px;
    color: white;
    opacity: 1;
    margin-top: 36%;
    /* text-transform: uppercase;*/
    white-space: nowrap;
    letter-spacing: -.5px;
}

.last_page .case_href:hover .name_case {
    opacity: 1;
    -webkit-transform: translate(-50%, 0%) translate3d(0%, 0px, 0px);
    -moz-transform: translate(-50%, 0%) translate3d(0%, 0px, 0px);
    -o-transform: translate(-50%, 0%) translate3d(0%, 0px, 0px);
    -ms-transform: translate(-50%, 0%) translate3d(0%, 0px, 0px);
    transform: translate(-50%, 0%) translate3d(0%, 0px, 0px);
}

.last_page .case_info > div {
    overflow: visible;
}

@-moz-document url-prefix() {
    .last_page .case_triangle_name {
        width: 44%;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .last_page .case_triangle_name {
        width: 44%;
    }
}

.case_triangle_fb {
    font-size: 20px;
    color: White;
    font-family: "ProximaNovaEb";
    opacity: 1;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.case_triangle_fb a {

    z-index: 2;
}

.case_triangle_fb img, .case_triangle_fb img + svg {
    height: auto;
    width: 29.45%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: -11%;
    right: 0;
    z-index: 2;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.case_triangle_fb img + svg {
    height: 30px;
    width: 30px;
    bottom: -7.3%;
    fill: white;
}

.case_triangle_fb img + svg:hover {
    fill: #f10087;
}

@keyframes spinTr {
	from {
		transform: scale(0.9);
    opacity: 0.65;
	}
	to {
		transform: scale(0.2);
    opacity: 0;
  }
}

@-ms-keyframes spinTr {
  from {
		transform: scale(0.9);
    opacity: 0.65;
	}
	to {
		transform: scale(0.2);
    opacity: 0;
  }
}

@-moz-keyframes spinTr {
  from {
		transform: scale(0.9);
    opacity: 0.65;
	}
	to {
		transform: scale(0.2);
    opacity: 0;
  }
}

@-webkit-keyframes spinTr {
  from {
		transform: scale(0.9);
    opacity: 0.65;
	}
	to {
		transform: scale(0.2);
    opacity: 0;
  }
}

.anim_triangle_fb {
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: -11%;
  right: 0;

  width: 74.45%;
  height: 48.55%;
}

.anim_triangle_fb polygon
{
   stroke: white;
}

.anim_triangle_fb.one {
  animation: spinTr 4s infinite linear;
}
.anim_triangle_fb.two {
  animation: spinTr 3s infinite linear;
}
.anim_triangle_fb.three {
  animation: spinTr 2s infinite linear;
}


/*.case_triangle_fb a > img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.case_triangle_fb a:hover > img:first-child   {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}*/


/*.case_triangle_fb a > img:first-child {
    -webkit-transform: perspective(500px) rotateY(0deg);
    -moz-transform: perspective(500px) rotateY(0deg);
    -o-transform: perspective(500px) rotateY(0deg);
    -ms-transform: perspective(500px) rotateY(0deg);
    transform: perspective(500px) rotateY(0deg);
}*/

/*.case_triangle_fb a:hover > img:first-child {
    -webkit-transform: perspective(500px) rotateY(360deg);
    -moz-transform: perspective(500px) rotateY(360deg);
    -o-transform: perspective(500px) rotateY(360deg);
    -ms-transform: perspective(500px) rotateY(360deg);
    transform: perspective(500px) rotateY(360deg);

}*/

.last_menu li a {
    color: white !important;
}

.last_menu li a:hover {
    color: #f10087 !important;
}

@media (max-width: 860px) {
    .last_menu {
        display: none;
    }
}

/*--------------------------------------------------------------------------------------------------------------------*/
/* - Links - */
a {
    text-decoration: none;
    color: #c2c2c2;
    font-size: 16px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a:hover {
    text-decoration: none !important;
    color: #f10087;
}

a:active, a:focus {
    outline: none;
    text-decoration: none;
    color: #f10087;
}

/* - Form elements - */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    box-shadow: 0px;
    -webkit-box-shadow: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-shadow: none;
    font-weight: light;
    -webkit-font-smoothing: antialiased;
}

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

input[type="submit"], input[type="button"] {
    -webkit-font-smoothing: antialiased;
    border: 0;
}

input[type="submit"]:focus, input[type="button"]:focus {
    outline: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

button:focus,
button:active {
    outline: none !important;
    border: none !important;
}

/* - Pre and code - */
pre, code, var, kbd, samp, tt, dir, listing, plaintext, xmp, abbr, acronym, q {
    font-size: 14px;
    word-break: normal;
    border: 0;
}

/* - Text aligns classes - */
.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-justify {
    text-align: justify !important;
}

/* - Text transform classes - */
.text-caps {
    text-transform: uppercase !important;
}

.text-italic {
    font-style: italic;
}

.text-lowercase {
    text-transform: none !important;
}

.list-reset, ul.breadcrumb, ul.instagram-widget, nav ul, .mobile-navigation ul,
.blog-post-single-content ul, ul.masonry-wrap, ul.grid-wrap, ul.fullscreen-wrap {
    padding-left: 0;
    list-style: none;
}

/* - Block behaviors */
.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.vertical-middle, .vertical-bottom {
    display: table;
}

.vertical-middle > *, .vertical-bottom > * {
    display: table-cell;
    float: none;
}

.vertical-middle > * {
    vertical-align: middle;
}

.vertical-bottom > * {
    vertical-align: bottom;
}

@media (min-width: 993px) {
    .vertical-middle-desktop, .vertical-bottom-desktop {
        display: table;
    }

    .vertical-middle-desktop > *, .vertical-bottom-desktop > * {
        display: table-cell;
        float: none;
    }

    .vertical-middle-desktop > * {
        vertical-align: middle;
    }

    .vertical-bottom-desktop > * {
        vertical-align: bottom;
    }
}

/* - Clear - */
.clear {
    clear: both;
}

/* - Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

.scale_06 {
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
}

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

/*--------------------------------------------------modal-------------------------------------------------------------*/
/*.blur {
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-ms-filter: blur(5px);
	-o-filter: blur(5px);
	filter: blur(5px);
}*/

svg {
    max-width: 100%;
}

.cd-main-content {
    position: relative;
    width: 100%;
    height: 100vh;
    display: table;
}

.cd-main-content .center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.cd-modal {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    -webkit-transition: visibility 0s 0.6s;
    -moz-transition: visibility 0s 0.6s;
    transition: visibility 0s 0.6s;

    white-space: nowrap;
    text-align: center;
    font-size: 0;
}

.cd-svg-bg {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    /*height: 90%;
    width: 90%;*/
    height: 100%;
    width: 100%;
}

.cd-modal:before {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
}

.cd-modal svg {
    position: relative;
    top: 0;
    left: 0;
}

.cd-modal svg > path {
    fill: #009ae7;
}

.cd-modal .modal-close {
    /* 'X' icon */
    /*background: rgba(241, 0, 135, .1);*/
    background: transparent;
    position: absolute;
    z-index: 1000;
    top: 0;
    right: 0;
    height: 50px;
    width: 50px;
    /* image replacement */
    overflow: hidden;
    /*text-indent: 100%;*/
    white-space: nowrap;
    /* Force hardware acceleration*/
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    /*-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
    -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
    transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;*/
}

.cd-modal .modal-close:hover {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background: rgb(241, 0, 135);
}

.cd-modal .modal-close:hover svg line {
    stroke: white;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.cd-modal.modal-is-visible {
    visibility: visible;
    -webkit-transition: visibility 0s 0s;
    -moz-transition: visibility 0s 0s;
    transition: visibility 0s 0s;
}

.cd-modal.modal-is-visible .modal-close {
    visibility: visible;
    opacity: 1;
    /*-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
    -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
    transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.cd-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    top: -100%;

    /*height: 100vh;*/
    /*overflow-y: auto;*/
    /*padding: 3em 5% 4em;*/
    opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: opacity 0.3s 0s, -webkit-transform 0.3s 0s;
    -moz-transition: opacity 0.3s 0s, -moz-transform 0.3s 0s;
    transition: opacity 0.3s 0s, transform 0.3s 0s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    white-space: nowrap;
    text-align: center;
    font-size: 0;
}

.cd-modal-content:before {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
}

.cd-modal-content > div {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    /*height: 90%;
    width: 90%;*/
    height: 100%;
    width: 100%;
}

.cd-modal-content p {
    color: #f2f2f2;
    line-height: 1.6;
    margin: 2em 0;
}

.modal-is-visible .cd-modal-content {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-overflow-scrolling: touch;
    -webkit-transition: opacity 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
    -moz-transition: opacity 0.3s 0.3s, -moz-transform 0.3s 0.3s;
    transition: opacity 0.3s 0.3s, transform 0.3s 0.3s;
}

.cd-modal-content p {
    font-size: 2.4rem;
}

.owl-controls {
    height: 50px !important;
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -25px;
}

.owl-controls {
    text-align: center;
    -webkit-tap-highlight-color: transparent
}

.owl-controls .owl-nav [class*=owl-] {
    width: 50px;
    height: 50px;
    display: inline-block;
    cursor: pointer;
}

.owl-prev {
    position: absolute;
    left: 0;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.owl-controls .owl-nav svg, .cd-modal .modal-close svg {
    height: 50px;
    width: 50px;
    padding: 10px 10px 10px 16px;
}

.cd-modal .modal-close > svg {
    padding: 13.5px;
}

.owl-next {
    position: absolute;
    right: 0;
}

.owl-controls .owl-nav [class*=owl-] {
    background: rgba(241, 0, 135, .15);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.owl-controls .owl-nav [class*=owl-]:hover {
    background: rgba(241, 0, 135, .8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.owl-controls .owl-nav [class*=owl-]:hover svg rect {
    fill: white;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.owl-controls .owl-nav .disabled {
    opacity: .5;
    cursor: default
}

/* --------------------------------

 Cover Layer - hide main content when modal is fired

-------------------------------- */
.cd-cover-layer {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.3s 0.3s, visibility 0s 0.6s;
    -moz-transition: opacity 0.3s 0.3s, visibility 0s 0.6s;
    transition: opacity 0.3s 0.3s, visibility 0s 0.6s;
}

.cd-cover-layer.modal-is-visible {
    opacity: .7;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s;
}

/*--------------------------------------------------------------------------------------------------------------------*/
.cd-quick-view {
    /*max-width: 900px;*/
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: left, top, width;
    z-index: 1001;
}

.cd-quick-view:after {
    content: "";
    display: table;
    clear: both;
}

.cd-quick-view > div {
    height: 100%;
    position: relative;
    display: inline-block;
    float: left;
    text-align: left;
}

.cd-slider-wrapper {
    width: 62%;
    background: url("../images/gray_patter.png");
    position: relative;
}

.cd-item-info {
    width: 38%;
    padding: 4% 3% 4% 3%;
}

@media (max-width: 767px), (max-height: 600px) {
    .cd-quick-view > div.cd-item-info {
        display: none;
    }

    .cd-quick-view > div.cd-slider-wrapper {
        width: 100%;
        display: block;
    }
}

.cd-slider-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

/*------------------------------------------------*/
.cd-item-info span {
    color: white;
}

.modal_info_desc_case, .modal_info_tech_case {
    font-size: 16px;
}

.modal_info_desc_case > span {
    margin-bottom: 40px;
    display: block;
}

.modal_info_name_case span {
    font-family: "ProximaNovaEb";
    font-size: 46px;
}

.modal_line_title {
    width: 50px;
    height: 1px;
    background: #f10087;
    margin: 30px 0 40px;
}

@media (max-height: 800px) {
    .modal_info_name_case span {
        font-size: 36px;
    }

    .modal_line_title {
        margin: 15px 0 20px;
    }

    .modal_info_desc_case > span {
        margin-bottom: 20px;
    }
}

.modal_info_tech_case {
    position: absolute;
    bottom: 5%;
}

.modal_info_url_case a {
    color: white;
    font-family: "ProximaNovaEb";
}

.modal_info_url_case a:hover {
    color: #f10087;
}

.modal_info_tech_case div:first-child span {
    font-family: "ProximaNovaEb";
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
    z-index: 0;
}

.owl-carousel .owl-animated-out {
    z-index: 1;
}

.owl-carousel .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

/*
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
    display: none;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    /* position relative and z-index fix webkit rendering fonts issue */
    position: relative;
    z-index: 1;
    white-space: normal;
    vertical-align: middle;
}

.cd-slider-wrapper div {
    height: 100%;
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.owl-carousel.owl-loaded {
    display: inline-block;
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block;
}

.owl-carousel.owl-hidden {
    opacity: 0;
}

.owl-carousel .owl-refresh .owl-item {
    display: none;
}

.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    white-space: nowrap;
    text-align: center;
    font-size: 0;
}

.owl-carousel .owl-item:before {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
}

.owl-carousel .owl-item img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    text-align: left;
    -webkit-transform-style: preserve-3d;

    -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}

.owl-carousel.owl-text-select-on .owl-item {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.owl-carousel .owl-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab;
}

.owl-carousel.owl-rtl {
    direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
    float: right;
}

/* No Js */
.no-js .owl-carousel {
    display: block;
}

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    -ms-transition: opacity 400ms ease;
    -o-transition: opacity 400ms ease;
    transition: opacity 400ms ease;
}

.owl-carousel .owl-item img {
    transform-style: preserve-3d;
}

/*-------------------------------------------------responsive---------------------------------------------------------*/

@media (max-width: 1280px) {
    .triangles_container {
        height: 85%;
    }
}

@media (max-width: 1152px) {
    .triangles_container {
        height: 80%;
    }
}

@media (max-width: 1024px) {
    .triangles_container {
        height: 75%;
    }
}

@media (max-width: 980px) {
    .triangles_container {
        height: 71%;
    }

    .point_text a, .first_page .point_text {
        font-size: 18px;
    }

    nav ul li a, .last_page .case_position + div a {
        font-size: 16px;
    }

    .modal_info_name_case span {
        font-size: 36px;
    }

    .modal_info_desc_case, .modal_info_tech_case {
        font-size: 14px;
    }

    .modal_info_desc_case > span {
        margin-bottom: 20px;
    }

    .modal_info_tech_case span {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .triangles_container {
        height: 68%;
    }

    .point_text a {
        font-size: 16px;
    }

    nav ul li a, .last_page .case_position + div a {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .triangles_container {
        height: 57%;
    }

    .point_text, .first_page .point_text, nav ul li a, .last_page .case_position + div a {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .triangles_container {
        height: 52%;
    }
}

@media (max-width: 420px), (max-height: 480px) {

    #layer3 {
        max-width: 80%;
    }
}

/*------------------------------*/

@media (max-width: 1600px) {
    .case_container {
        height: 90%;
    }
}

@media (max-width: 1440px) {
    .case_container {
        height: 80%;
    }
}

@media (max-width: 1360px) {
    .case_container {
        height: 75%;
    }
}

@media (max-width: 1280px) {
    .case_container {
        height: 70%;
    }
}

@media (max-width: 1152px) {
    .case_container {
        height: 67%;
    }
}

@media (max-width: 1024px) {
    .case_container {
        height: 63%;
    }
}

@media (max-width: 980px) {
    .case_container {
        height: 60%;
    }
}

@media (max-width: 900px) {
    .case_container {
        height: 55%;
    }
}

@media (max-width: 800px) {
    .case_container {
        height: 50%;
    }
}

@media (max-width: 768px) {
    .case_container {
        height: 48%;
    }
}

@media (max-width: 548px) {
    .case_container {
        height: 45.5%;
    }
}

@media (max-width: 480px) {
    .case_container {
        height: 43.5%;
    }
}

@media (max-width: 420px) {
    .case_container {
        height: 40%;
    }
}

/*--------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 1280px) {
    .name_case {
        font-size: 80px;
    }

    .last_page .name_case {
        font-size: 80px;
    }

    .case_year {
        font-size: 70px;
        line-height: 1.55;
    }

    .case_month, .last_page .case_info > div:first-child a {
        font-size: 24px;
    }

    .last_page .case_info > div:first-child {
        margin-bottom: 6%;
    }

    .case_position > div:last-child {
        font-size: 24px;
    }

    .case_position > div:first-child {
        font-size: 18px;
    }

    .title_case, .title_case_view {
        font-size: 20px;
    }

    #menu li a {
        font-size: 18px;
    }

}

@media (max-width: 1152px) {
    .name_case {
        font-size: 76px;
    }

    .last_page .name_case {
        font-size: 76px;
    }

    .title_case, .title_case_view {
        font-size: 19px;
    }

    .case_year {
        font-size: 65px;
        line-height: 1.7;
    }

    .case_month, .last_page .case_info > div:first-child a {
        font-size: 22px;
    }

    .case_position > div:first-child {
        font-size: 18px;
    }

    .case_position > div:last-child {
        font-size: 22px;
    }

    #menu li a {
        font-size: 18px;
    }

    .case_triangle_name {
    }

}

@media (max-width: 1024px), (max-height: 768px) {
    .name_case {
        font-size: 72px;
    }

    .last_page .name_case {
        font-size: 72px;
        margin-top: 36%;
    }

    .case_year {
        font-size: 60px;
        line-height: 1.7;
        letter-spacing: 3px;
    }

    .case_month, .last_page .case_info > div:first-child a {
        font-size: 20px;
    }

    .case_position > div:first-child {
        font-size: 16px;
    }

    .case_position > div:last-child {
        font-size: 20px;
    }

    .title_case, .title_case_view {
        font-size: 18px;
        /*max-width: 180px;*/
    }

    .last_page .case_info > div:first-child {
        margin-bottom: 3%;
    }

    #menu {
        width: 110px;
    }

    #menu li {
        background-position: 85px 26px;
    }

    #menu li a {
        font-size: 18px;
    }

    #timeline {
        right: -24%;
    }

}

@media (max-height: 700px) {
    .name_case {
        font-size: 66px;
    }

    .last_page .name_case {
        font-size: 66px;
    }

    .title_case, .title_case_view {
        font-size: 16px;
    }
}

@media (max-height: 600px) {
    .name_case {
        font-size: 48px;
    }

    .last_page .name_case {
        font-size: 54px;
    }

    .title_case, .title_case_view {
        font-size: 14px;
    }
}

@media (max-height: 500px) {
    .name_case {
        font-size: 44px;
    }

    .last_page .name_case {
        font-size: 50px;
        margin-top: 40%;
    }
}

@media (max-width: 980px) {
    .name_case {
        font-size: 68px;
    }

    .last_page .name_case {
        font-size: 68px;
    }

    .title_case, .title_case_view {
        font-size: 16px;
    }

    .case_year {
        font-size: 60px;
        line-height: 1.7;
        letter-spacing: 3px;
    }

    .case_month, .last_page .case_info > div:first-child a {
        font-size: 20px;
    }

    .case_position > div:last-child {
        font-size: 18px;
    }

}

@media (max-width: 800px) {
    .name_case {
        font-size: 64px;
    }

    .last_page .name_case {
        font-size: 64px;
        margin-top: 38%;
    }

    .title_case, .title_case_view {
        font-size: 14px;
        /*max-width: 160px;*/
    }

    .case_year {
        font-size: 55px;
    }

    .case_month, .last_page .case_info > div:first-child a {
        font-size: 20px;
    }

    .case_position > div:first-child {
        font-size: 16px;
    }

    .case_position > div:last-child, .last_page .case_position > div:last-child a {
        font-size: 18px;
        letter-spacing: 0.5px;
    }

    .last_page .case_info {
        bottom: 4%;
    }

    .last_page .case_info > div:first-child {
        margin-bottom: 3%;
    }

    #menu {
        width: 95px;
    }

    #menu li {
        background-position: 70px 20px;
    }

    #menu li a {
        font-size: 16px;
    }

    #timeline {
        right: -23%;
    }

    #timeline span {
        font-size: 14px;
    }
}

@media (max-width: 640px) {

    .name_case {
        font-size: 58px;
    }

    .last_page .name_case {
        font-size: 58px;
        margin-top: 40.5%;
    }

    #menu {
        width: 85px;
    }

    #menu li {
        background-position: 60px 17px;
    }

    #menu li a {
        font-size: 14px;
    }

    #timeline {
        right: -22%;
    }

    #timeline span {
        font-size: 14px;
    }
}

@media (max-width: 540px) {

    .name_case {
        font-size: 56px;
    }

    #menu {
        width: 75px;
    }

    #menu li {
        background-position: 50px 15px;
    }

    #menu li a {
        font-size: 12px;
    }

    #timeline {
        display: none;
    }

}

@media (max-height: 768px) {
    #menu {
        width: 105px;
        margin-top: -186.5px;
    }

    #menu li {
        height: 94px;
        background-position: 80px 27px;
    }

    #timeline {
        right: -24%;
    }

    #menu li a {
        font-size: 14px;
        padding-top: 7px;
    }

    #menu li:nth-child(6) {
        height: 43px;
    }
}

/*---------------------------------1024*720---------------------------------------------------------*/

@media (width: 1024px) and (height: 768px) {
    .case_container {
        height: 75%;
    }
}

/*---------------------------------1024*720---------------------------------------------------------*/

@media (width: 1024px) and (height: 720px) {
    .case_container {
        height: 85%;
    }
}

/*---------------------------------960*600---------------------------------------------------------*/

@media (max-width: 960px) and (max-height: 600px) {
    .case_container {
        height: 80%;
    }
}

/*---------------------------------iphone6+---------------------------------------------------------------------------*/

@media (max-width: 736px) and (max-height: 414px) {
    .case_container {
        height: 85%;
    }

    .name_case {
        font-size: 50px;
    }

    .title_case, .title_case_view {
        font-size: 14px;
    }

    .case_triangle_name {
    }

    .case_year {
        font-size: 50px;
        line-height: 1.9;
    }

    .case_month, .last_page .case_info > div:first-child a {
        font-size: 18px;
    }

    .case_position > div:first-child {
        font-size: 16px;
    }

    .case_position > div:last-child {
        font-size: 16px;
        letter-spacing: 0.5px;
    }

    .case_info {
        bottom: 4%;
        max-width: 250px;
    }

}

/*--------------------------------------------iphone6+Portrait--------------------------------------------------------*/

@media (max-width: 414px) and (max-height: 736px) {
    .case_container {
        height: 55%;
    }

    .name_case {
        font-size: 50px;
    }

    .title_case, .title_case_view {
        font-size: 14px;
    }

    .case_triangle_name {
    }

    .case_year {
        font-size: 50px;
        line-height: 1.9;
    }

    .case_month, .last_page .case_info > div:first-child a {
        font-size: 18px;
    }

    .last_page .case_position > div:last-child {
        line-height: 18px;
    }

    .case_position > div:first-child {
        font-size: 16px;
    }

    .case_position > div:last-child {
        font-size: 16px;
        letter-spacing: 0.5px;
    }

    .case_info {
        bottom: 2%;
        max-width: 195px;
    }

}

/*---------------------------------iphone5---------------------------------------------------------*/

@media (max-width: 568px) and (max-height: 320px),(max-height: 568px) and (max-width: 320px) {
    .case_container {
        height: 62%;
    }

    .name_case {
        font-size: 45px !important;
    }

    .last_page .name_case {
        font-size: 55px !important;
    }

    .title_case, .title_case_view {
        font-size: 14px;
    }

    .case_triangle_name {
    }

    .case_year {
        font-size: 40px;
        line-height: 2.25;
    }

    .case_month, .last_page .case_info > div:first-child a {
        font-size: 16px;
    }

    .last_page .case_position > div:last-child {
        line-height: 16px;
    }

    .case_position > div:first-child {
        font-size: 13px;
    }

    .case_position > div:last-child {
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .case_info {
        max-width: 195px;
    }

}

/*-----------------------------------------------------------------------------------------------------*/