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


/*Contact form*/
::placeholder {color: #455560 !important; opacity: 1;}
:-ms-input-placeholder {color: #455560 !important;}
::-ms-input-placeholder {color: #455560 !important;}
select{display: inline-block; /*width: auto !important;*/ padding: 15px; vertical-align: middle; background: #fafafa url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center; background-color: #fafafa; background-image: none\9; background-size: 15px 15px; -moz-appearance: none; -webkit-appearance: none;  border: 1px solid #eee; width:100% }
select option, select{font-size: 16px !important;} 
select option{padding: 3px 0 !important}
input, textarea{padding: 15px 2%; width: 96%; border: 1px solid #eee; font-size: 16px; background: #fafafa; color: #142131; font-family: 'Be Vietnam Pro'}
input[type="submit"]{width: auto; color: #fff;  background: #455560; border-radius: 500px;  border: 2px solid #455560; font-size: 16px; text-transform: uppercase; padding: 0 35px; line-height:46px; letter-spacing:1px; font-weight: 600;}
input[type="submit"]:hover{color: #000; border: 2px solid #68c8c6; background: #68c8c6}
label{font-weight:bold}
.wpcf7 form.sent .wpcf7-response-output{color: #68c8c6; border: 1px solid #68c8c6}
.wpcf7-form-control-wrap input, .wpcf7-form-control-wrap textarea{margin:10px 0}


.uk-navbar-toggle-icon svg, .uk-offcanvas-close svg{ width: 35px; height: 35px;}
.uk-navbar-toggle-icon svg:hover, .uk-offcanvas-close svg:hover{color: #000}
.uk-navbar{padding:0 20px}



/*Hompage page*/
.clientstory .el-item{position: relative; overflow: hidden;  border:0 !important}
.clientstory .el-item img{-moz-transition: all 0.3s; -webkit-transition: all 0.3s;  transition: all 0.3s; width: 100%;}
.clientstory .el-item:hover img.el-image{transition: transform .2s; transform: scale(1.1); -webkit-transform:scale(1.1); transition-duration: .3s; transition-timing-function: ease-out; transition-property: opacity,transform,filter;}
.clientstory .el-item:hover h3{ color: #000 !important; line-height: 1.1; padding-bottom: 10px}
.clientstory .el-item:hover .el-meta{ color: #000 !important}
.clientstory .uk-card-body{ position: absolute;  z-index: 1; top: 0; left: 0; width: 100%; height: 100%; padding-top: 50%; padding-left: 30px; background: rgba(0,0,0,0.14); -webkit-transition: opacity linear 300ms; transition: opacity linear 300ms; opacity: 0;}
.clientstory .el-item:hover .uk-card-body{opacity: 1}
.clientstory .uk-card-body h2{color:#000}
.clientstory .uk-card-body h3, .clientstory .uk-card-body .uk-h4{transform: translateX(-50px); transition: .3s ease-out}
.clientstory .uk-card-body h3{font-size: 2em;}
.clientstory .el-item:hover .uk-card-body h3, .clientstory .el-item:hover .uk-card-body .uk-h4{transform: translateX(0);}
.clientstory .uk-position-cover{background: rgba(0,0,0,0); z-index: 2;}

.hmstory-overlay h2, .hmstory-overlay .el-meta{color:#000; margin-top: 0 !important}

.scrolldown a{padding:20px 10px}
.scrolldown svg{width:35px; height: 35px;}


/*Client story*/
.show-more{padding-top: 30px}
.no-website{padding-top: 30px}
.show-more .uk-accordion-title{font-weight: normal; position: relative; height: 40px; text-decoration: none;}
.show-more .uk-accordion-title:before{; margin-left: 0; float: left; display:none}
.show-more .uk-open > .uk-accordion-title{color: #455560}
.show-more .uk-accordion-title:after{-webkit-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; content: ""; display: block; width: 100px; margin-left: 0; height: 1px; background: #455560; position: absolute; bottom: 0; left: 0;}
.show-more .uk-accordion-title:hover:after{width: 0;}
.show-more .uk-accordion-title:focus:after{width: 130px;}
.show-more .uk-accordion-content{ width: 100%; overflow: hidden; clear: both; height: 100%}
.show-more .uk-accordion-title:focus{ color: #455560;}


/*Hero*/
.words-wrapper {font-size: 6.5em; font-weight: bold; color:#000 !important}
.words-wrapper .words {display: inline-grid; padding: 0 10px; border-radius: 6px; color: #000; background: #fff}
.words-wrapper .words span {grid-area: 1/1; display: none;}
.words-wrapper .words span.current { display: block;}

/* Footer */






/*404 page*/

@media (min-width: 960px) and (max-width:1400px){

}


@media (max-width:960px){
.words-wrapper{font-size:3.5em}
}


@media (max-width:600px){
	.words-wrapper{font-size:2.5em}
}