@charset "utf-8";
/* CSS Document */

body{
	background-color: #fff;
    font-size: 14px;
    color: #333;
    font-family: 'Montserrat', sans-serif;
}

a:active,a:visited,a:focus,a:hover{ text-decoration: none; }

#sthoverbuttons *{box-sizing: content-box;-moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box;}
/****** LAYOUT ******/
div#wrapper { position: relative; width: 100%; min-height: 100vh; margin: 0px auto; overflow: hidden;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
}

div#intro{
	position: fixed;
	top: 70%;
	left: 50%;
	transform: translate(-50%,-50%);
    cursor: pointer;
    text-align: center;
}
div#intro h1{
    margin: 0;
    padding: 10px 20px;
    background-color: rgba(255,255,255,0.5);
    font-size: 20px;
    font-weight: 300;
    text-transform: capitalize;
    color: #000;
    white-space: nowrap;
}
div#intro .btn{
    margin-right: 10px;
    border-radius: 50%;
}
div#project-list{
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 8%;
}
div#project-list:after{
    content: '';
    display: block;
    clear: both;
}
div#project-list div#intro{
    text-align: left;
}
div#project-list div#intro h1{
    font-size: 18px;
    text-align: center;
    padding: 0px 20px;
}

div#project-list .project-left{
    float: left;
    width: 0%;
}
div#project-list .project-left h1{
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}
div#project-list .project-center{
	margin-left:1px;
    float: left;
    width: 100%;
}
div#project-list .project-right{
    float: right;
    width: 20%;
}
div#project-list .row{
    margin-left: -2px;
    margin-right: -2px;
}
div#project-list [class^="col"]{
    padding-left: 2px;
    padding-right: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
}

div#project-list .project-center [class^="col"]{
    padding-left: 2px;
    padding-right: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
}

div#project-list .project-center .title-m{
	display: none;
	margin-top: 0px;
	font-size: 18px;
}
div#project-list .box-work{
    height: 230px;
}
div#project-list .box-work img{ opacity: 0;}
div#project-list .box-work a{
    display: block;
    position: absolute;
    top: 0px; left: 2px; right: 2px; bottom: 0px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cb-slideshow{ 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
    list-style: none;
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}
.cb-slideshow li:nth-child(1) span {
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}

div#loading{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; cursor: pointer; }
div#loading-center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); cursor: pointer; }
div#loading #svg-1{ display: block; margin: 0px auto; height: 300px; padding: 5px; margin-bottom: 100px; }
div#loading #svg-2{ display: block; margin: 0px auto; height: 50px; animation: updownR 1s infinite;}
div#loading #svg-2 path{ fill: #fff685; }
div#loading #svg-1 .cls-1 {
    fill: rgba(255, 246, 133,0);
    animation: draw 10s infinite;
}
@keyframes draw {
    50% {
        stroke-dashoffset: 0; fill: rgba(255, 246, 133,1);
    }
}
@keyframes updownR {
    0%{
        transform: translateY(0px);
        animation-timing-function: cubic-bezier(0,.50,.50,1);
    }
    50%{
        transform: translateY(-50px);
        animation-timing-function: cubic-bezier(.50,0,1,.50) ;
    }
}

header#header {position: relative; width: 100%; top: 70px; text-align: center; visibility: hidden; opacity: 0;}
div.languages{ position: absolute; right: 10px; top: 10px; }
div#banner{float: left;}
div#banner.fixed{ position: absolute; top: 0px; left: 0px; right: 0px;}
div#banner #site-logo{}
div#banner img{height: 80px;}
div#banner .site-title {height: 0px; margin:0;text-indent: -9999px;}
div#social{float: right;}
div#social .btn{ position: relative; width: 43px; height: 43px; line-height: 30px; background-color: #fff; margin-left: 20px;
    font-size: 22px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 2px solid #333;
}
div#social .btn:before{ content: ''; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px;
    border: 2px solid #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
}
div#social .btn:first-child{ margin-left: 0px; }
div#social .btn:hover{ background: #333; color: #fff; }

nav#navbar{ display: inline-block; padding-top: 10px;}
nav#navbar > ul{ display:block !important; }
nav#navbar ul{list-style: none; margin: 0px; padding: 0px; text-align: center;}
nav#navbar ul li{position: relative; display: inline-block; padding: 0px 20px;}
nav#navbar ul li a{ position: relative; display: block; font-size: 18px; width: 100px; color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.7); text-transform: lowercase; font-weight: 300; text-align: center;}
nav#navbar ul li a:before{content: ''; display: inline-block; position: absolute; border-left: 6px solid transparent ; border-right:6px solid transparent ; border-top: 6px solid rgba(255,255,255,0.7); bottom: -7px; left: 50%; margin-left: -6px;}
nav#navbar ul li.active > a, nav#navbar ul li:hover > a{ font-weight: 600; color: rgba(255,255,255,1); border-bottom: 1px solid rgba(255,255,255,1);}
nav#navbar ul li.active > a:before, nav#navbar ul li:hover > a:before{border-top: 6px solid rgba(255,255,255,1);}
nav#navbar ul ul:before{content: ''; display: inline-block; position: absolute; border-left: 7px solid transparent ; border-right:7px solid transparent ; border-bottom: 7px solid rgba(0,0,0,0.2); top: -6px; left: 23px;}
nav#navbar ul ul:after{content: ''; display: inline-block; position: absolute; border-left: 6px solid transparent ; border-right:6px solid transparent ; border-bottom: 6px solid #fff; top: -5px; left: 24px;}
nav#navbar ul ul ul:before{content: ''; display: inline-block; position: absolute; border-top: 7px solid transparent ; border-bottom:7px solid transparent ; border-right: 7px solid rgba(0,0,0,0.2); left: -13px; top: 12px;}
nav#navbar ul ul ul:after{content: ''; display: inline-block; position: absolute; border-top: 6px solid transparent ; border-bottom:6px solid transparent ; border-right: 6px solid #fff; left: -12px; top: 13px;}

nav#navbar ul ul, nav#navbar ul ul ul{position: absolute;display: none; top: 100%;left: 10px;width: 265px;height: auto; margin:0; background-color: rgba(255,255,255,1); box-shadow: 1px 1px 2px #333; z-index: 30;}
nav#navbar ul ul ul{top: 0px; left: 265px; z-index: 40;}
nav#navbar ul ul li{width: 100%; padding: 0px; border-top: 1px dotted #edc897; box-shadow: none !important; background-color: #fff; background: none;}
nav#navbar ul ul li:first-child{border-top: none;}
nav#navbar ul ul li a{font-size: 14px;color: #333; font-weight: 400; border: 0px; text-align: left; padding: 7px 10px 7px 10px; background: none; }
nav#navbar ul ul li a:hover{color: #f00;}
nav#navbar ul li:hover > ul{display: block;-webkit-animation-name: fadeInUpSmall;animation-name: fadeInUpSmall;}
nav#navbar ul ul li:hover > ul{display: block; -webkit-animation-name: fadeInRightSmall;animation-name: fadeInRightSmall;}

section#page-wrapper{position: relative; visibility: hidden; opacity: 0; z-index: 10;}

div#home{ position: relative; padding-right: 390px; }
div.slick-video{ overflow: hidden; }
div.slick-video .slick-prev{ width: 30px; height: 30px; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; }
div.slick-video .slick-prev:before{  font-size: 30px; }
div.slick-video:hover .slick-prev{ left: 15px; opacity: 1; }
div.slick-video .slick-next{ width: 30px; height: 30px; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; }
div.slick-video .slick-next:before{  font-size: 30px; }
div.slick-video:hover .slick-next{ right: 15px; opacity: 1; }

div.slick-work{ overflow: hidden; }
div.slick-work .slick-prev{ width: 30px; height: 30px; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; }
div.slick-work .slick-prev:before{  font-size: 30px; }
div.slick-work:hover .slick-prev{ left: 15px; opacity: 1; }
div.slick-work .slick-next{ width: 30px; height: 30px; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; }
div.slick-work .slick-next:before{  font-size: 30px; }
div.slick-work:hover .slick-next{ right: 15px; opacity: 1; }
div.slick-work.slick-dotted.slick-slider{ padding-bottom: 30px; }
div.slick-work .slick-dots{ bottom: -5px; }

.video-container {position:relative;padding-bottom:53.92%; height:0; overflow:hidden;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.video-container iframe, .video-container object, .video-container embed {position:absolute;top:0;left:0;width:100%;height:100%;}
.video-container a{position: absolute; width: 50px; height: 50px; line-height: 50px; background-color: #fff; text-align: center; font-size: 20px;
    border-radius: 50%; color: #f00; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}
.video-container a i{ margin-left: 5px; }

.work-wrap{ width: 380px; }
div.box-work { overflow: hidden; }
div.box-work a{ display: block; position: relative; }
div.box-work a:after{ content:''; position: relative; display: none; width: 100%; padding: 20px 0px; background-color: #007dc5; z-index: 10;}
div.box-work h3{ position: absolute; bottom: 0px; color: #333; font-weight: 600; font-size: 14px; text-transform: uppercase; padding: 10px 5px; text-align: right;
    margin: 0px; width: 100%;
    z-index: 5;
}
div.box-work h3 .text{
    position: relative;
    z-index: 5;
	color: #dedede;
}
div.box-work h3 .shadow{
    content: '';
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 1;
    width: auto;
    background-color: rgba(255,255,255,0.5);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
div.box-work a:hover h3 .shadow{ width: 100%; }
div.box-work img{margin: 0px auto; width: 100%; transition: all .5s ease; -webkit-transition: all .5s ease;}
div.box-work:hover img{transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2);}

.about-image{ float: left; margin-right: 30px; margin-bottom: 20px; max-width: 350px; }

form#frm-contact{ display: block; max-width: 500px; margin: 0px auto; }
form#frm-contact input,
form#frm-contact textarea{ color: #000; background-color: rgba(255,255,255,0.5) }
form#frm-contact input::-webkit-input-placeholder {font-size: 14px; color:#333;}
form#frm-contact input:-moz-placeholder {font-size: 14px; color:#333;}
form#frm-contact input::-moz-placeholder {font-size: 14px; color:#333;}
form#frm-contact input:-ms-input-placeholder {font-size: 14px; color:#333;}
form#frm-contact textarea::-webkit-input-placeholder {font-size: 14px; color:#333;}
form#frm-contact textarea:-moz-placeholder {font-size: 14px; color:#333;}
form#frm-contact textarea::-moz-placeholder {font-size: 14px; color:#333;}
form#frm-contact textarea:-ms-input-placeholder {font-size: 14px; color:#333;}
form#frm-contact .form-group{ position: relative; }
form#frm-contact .formError{ right: 0px !important; top: 0px !important; left: auto !important; margin-top: 0px !important; }
form#frm-contact .formErrorArrow{ display: none !important; }

div.box-news{}
div.box-news .wrap{ position: relative; float: left; width: 100%;}
div.box-news .image{position: relative; text-align: center; margin-bottom: 0px; overflow: hidden; }
div.box-news .image[class*="col"]{margin-right: 15px; margin-bottom: 0px;}
div.box-news img{margin: 0px auto; width: 100%; transition: all .5s ease; -webkit-transition: all .5s ease;}
div.box-news:hover .image{border-color: #ff0000; }
div.box-news .image:hover img{transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2);}
div.box-news .name{margin-top: 0px; font-weight: 400; font-size: 15px; line-height: 20px; text-align: center; text-transform: uppercase;}
div.box-news .name a{color: #fff;}
div.box-news:hover .name a{ font-weight: 600; }

div.box-news .info{ padding: 10px 10px 0px; border: 1px solid #ccc; border-top: 0px;}

div.box-news .date{color: #999; margin-bottom: 5px; font-size: 14px;}
div.box-news .date span{margin-right: 10px;}
div.box-news .date i{color: #ffae00; margin-right: 5px;}
div.box-news .desc{text-align: justify; font-weight: 300; color: #f2f2f2; margin-bottom: 10px; font-size: 13px;}
div.box-news .more{text-align: center; margin-bottom: 5px;}
div.box-news .more a{ font-weight: 400; color: #fff; text-transform: uppercase; border-top: 1px solid #ccc;}
div.box-news .more a span{ display: block; width: 50px; text-align: center; font-size: 7px; color: #fff;}
div.box-news .more a span i{ display: inline-block; padding: 0px 2px; transition: all .3s ease; -webkit-transition: all .3s ease; }
div.box-news:hover .more a span i{padding: 0px 4px;}
div.box-news:after{content: ''; display: block; clear: both;}

div.slick-post-large{ margin-bottom: 15px; }
div.slick-post-thumb .slick-slide div{ padding: 0px 5px; }
div.slick-post-thumb .slick-slide:focus,
div.slick-post-thumb .slick-slide:active{ outline: none; }

div.slick-post-other{ overflow: hidden; }
div.slick-post-other .slick-prev{ width: 30px; height: 30px; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; }
div.slick-post-other .slick-prev:before{  font-size: 30px; }
div.slick-post-other:hover .slick-prev{ left: 15px; opacity: 1; }
div.slick-post-other .slick-next{ width: 30px; height: 30px; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; }
div.slick-post-other .slick-next:before{  font-size: 30px; }
div.slick-post-other:hover .slick-next{ right: 15px; opacity: 1; }

ul.pagination{margin: 0px 0px 30px 0px;}
ul.pagination li.active a, ul.pagination li a:hover{color: #fff; border-color: #333 !important; background-color: #333 !important;}
ul.pagination a{color: #222;padding: 6px 14px;}

ul.other-nav{list-style: square; margin: 0px; padding-left: 30px;}
ul.other-nav a{display: block; padding: 2px 0px; color: #fff;}
ul.other-nav a:hover{ font-weight: 600; }
ul.other-nav i{font-size: 12px; font-weight: 400;}


footer#footer{ position: fixed; width:100%; bottom: 30px; color: #fff; padding: 10px 15px; z-index: 10; background-color: rgba(255,255,255,.5);}
footer#footer h4{ float: left; margin-right: 30px; font-size: 16px;}
footer#footer ul{ list-style: none; margin: 0; padding: 0; float: right; margin-right: 50px; }
footer#footer ul li a{ display: block; padding: 8px 15px; font-weight: 600;}

body#index-site footer#footer{ text-align: center; background: transparent;}
body#index-site footer#footer h4,
body#index-site footer#footer ul{ display: none; }

@media (min-width:992px){
    header#header #btn-menu{ display: none; }
	section#page-wrapper{}
    .fix-document{ position: absolute; top: 0px; bottom: 0px;}
    .fix-document .scrollbar-inner{ position: absolute; top: 0px; bottom: 0px; width: 100%; }
    .work-wrap{ position: absolute; right: 0px; top: 0px; }
}

@media (min-width: 1200px){
    .container{ width: 1200px; }
}

@media (min-width: 1400px){
    .container{ width: 1349px; }
    .modal-dialog{width: 70%;}
}

@media (min-width: 1500px){
    .container{ width: 1450px; }
}

@media (max-width: 1366px){
    .container-fuild{padding-left: 15px; padding-right: 15px;}
}
@media (min-width:992px) and (max-width: 1199px){
}

@media (max-width: 1199px){
    div#home {
        padding-right: 306px;
    }
    .work-wrap{ width: 301px; }
    div#project-list .project-right{
    	display: none;
    }
    div#project-list .project-left{
    	width: 25%;
    }
    div#project-list .project-center{
    	width: 75%;
    }
}

@media (max-width: 991px){

    div#loading #svg-1{ height: 250px; }

    div.scroll-wrapper.scrollbar-inner{ position: relative !important; }
    div#wrapper{ height: auto; overflow: visible; }
    header#header{position: relative; top: auto; padding: 70px 0px 0px; }
    header#header #btn-menu{ position: absolute; left: 15px; top: -60px; font-size: 14px; padding: 8px 12px; z-index: 2; font-weight: 400; z-index: 1040; display: block;
        border: 1px solid #fff;
        color: #fff;
        background-color: rgba(49,49,49,0.3);
    }
    div#banner{ float: none; text-align: center; }
    div#banner #site-logo{ display: inline-block; margin: 0px auto; }
    nav#navbar{display: none !important;}
    div#social{ position: absolute; right: 20px; top: -60px;}
    div#social .btn {
        position: relative;
        width: 36px;
        height: 36px;
        line-height: 25px;
        background-color: #fff;
        margin-left: 20px;
        font-size: 18px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        border: 2px solid #333;
        padding: 5px;
    }
    div#social .btn:before {
        top: -4px;
        right: -4px;
        bottom: -4px;
        left: -4px;
    }
    section#page-wrapper{ position: relative;}
    div#home{ padding-right: 0px; }
    .slick-video{ margin-bottom: 10px; }
    .work-wrap{ width: 100%;}
    .slick-work{ margin-left: -5px; margin-right: -5px; }
    .slick-work .box-work{ padding: 0px 5px; }

    div#project-list .project-left{
    	width: 33.333333%;
    }
    div#project-list .project-center{
    	width: 66.666666%;
    }

}

@media (min-width:768px) and (max-width: 991px){
}

@media (min-width:481px) and (max-width: 767px){
}

@media (min-width: 768px){
	/*
    div#project-list .box-work:nth-child(24n+1){
        width: 40%;
    }
    div#project-list .box-work:nth-child(24n+2){
        width: 30%;
    }
    div#project-list .box-work:nth-child(24n+3){
        width: 30%;
    }
    
    div#project-list .box-work:nth-child(24n+4){
        width: 33.333333%;
    }
    div#project-list .box-work:nth-child(24n+5){
        width: 33.333333%;
    }
    div#project-list .box-work:nth-child(24n+6){
        width: 33.333333%;
    }
    
    div#project-list .box-work:nth-child(24n+7){
        width: 20%;
    }
    div#project-list .box-work:nth-child(24n+8){
        width: 40%;
    }
    div#project-list .box-work:nth-child(24n+9){
        width: 40%;
    }
    
    div#project-list .box-work:nth-child(24n+10){
        width: 40%;
    }
    div#project-list .box-work:nth-child(24n+11){
        width: 40%;
    }
    div#project-list .box-work:nth-child(24n+12){
        width: 20%;
    }
    
    div#project-list .box-work:nth-child(24n+13){
        width: 30%;
    }
    div#project-list .box-work:nth-child(24n+14){
        width: 40%;
    }
    div#project-list .box-work:nth-child(24n+15){
        width: 30%;
    }
    
    div#project-list .box-work:nth-child(24n+16){
        width: 25%;
    }
    div#project-list .box-work:nth-child(24n+17){
        width: 25%;
    }
    div#project-list .box-work:nth-child(24n+18){
        width: 50%;
    }
    
    div#project-list .box-work:nth-child(24n+19){
        width: 50%;
    }
    div#project-list .box-work:nth-child(24n+20){
        width: 30%;
    }
    div#project-list .box-work:nth-child(24n+21){
        width: 20%;
    }
    
    div#project-list .box-work:nth-child(24n+22){
        width: 40%;
    }
    div#project-list .box-work:nth-child(24n+23){
        width: 35%;
    }
    div#project-list .box-work:nth-child(24n+24){
        width: 25%;
    }*/
    div#project-list .box-work:nth-child(12n + 1) {
	    width: 35%;
	}
	div#project-list .box-work:nth-child(12n + 2) {
	    width: 20%;
	}
	div#project-list .box-work:nth-child(12n + 3) {
	    width: 25%;
	}
	div#project-list .box-work:nth-child(12n + 4) {
	    width: 20%;
	}
	div#project-list .box-work:nth-child(12n + 5) {
	    width: 20%;
	}
	div#project-list .box-work:nth-child(12n + 6) {
	    width: 20%;
	}
	div#project-list .box-work:nth-child(12n + 7) {
	    width: 25%;
	}
	div#project-list .box-work:nth-child(12n + 8) {
	    width: 35%;
	}
	div#project-list .box-work:nth-child(12n + 9) {
	    width: 20%;
	}
	div#project-list .box-work:nth-child(12n + 10) {
	    width: 35%;
	}
	div#project-list .box-work:nth-child(12n + 11) {
	    width: 20%;
	}
	div#project-list .box-work:nth-child(12n + 12) {
	    width: 25%;
	}

}

@media (max-width: 767px){
}

@media (max-width: 619px){
    div#loading #svg-1{ height: 200px; }
    div#loading #svg-2{ height: 40px; }
    .about-image{ float: none; margin-right: 0px; max-width: 100%; }
    .about-image img{ width: 100%; }

    div#project-list .project-left{
    	display: none;
    }
    div#project-list .project-center{
    	width: 100%;
    }
    div#project-list .project-center .title-m{
    	display: block;
    }
}

@media (max-width: 520px){
	footer#footer { text-align: center; }
    footer#footer h4{
    	float: left;
    	margin-right: 0px;
    	text-align: center;
    }
}

@media (max-width: 500px){
}

@media (max-width: 480px){
    div#loading #svg-1{ height: 150px; }
    div#loading #svg-2{ height: 30px; }
    div.box-news{ float: none; width: 100%; max-width: 350px; margin: 0px auto 30px;}
    div.box-news .image{width: 100%; padding: 0px;}

    .video-container{ padding-bottom: 67%; }
}

@media (min-width: 401px){
}

@media (max-width: 480px){
    

}

@media (max-width: 350px){
}