/* =================== sitetech.style ==================== */
/* */
#header .top {padding: 10px 0;border-bottom: 1px solid #e1e1e1;}
#header .bottom {padding: 15px 0;text-align: right}
#header .bottom .sub-menu {display: inline-block;}
#header .bottom .sub-menu .item {float: left;}
#header .bottom .sub-menu .item+.item {margin-left: 30px;}
#header .bottom .sub-menu .item .link {
display: block;
font-size: 14px;
line-height: 20px;
font-weight: bold;
color: #898989;
}
#header .bottom .sub-menu .item .link:hover {color: #3c3eb0;}
@media (max-width: 959px) {
#header .bottom {padding: 15px 0;}
#header .top {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
}
#header .navigation ul.main {float: none;}
#header .navigation li.main .link {font-family: Arial, sans-serif;}
#header .navigation li.main+li.main {margin-left: 25px;}
#header .navigation li.main>.link {
position: relative;margin: 0;
padding: 10px 5px;
font-size: 18px;line-height: 20px;color: #252525;
font-weight: bold;
height: auto;border: none;box-shadow: none;
z-index: 150;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
#header .navigation li.main:hover>.link, #header .navigation li.main.active>.link {color:#3c3eb0;}
#header .navigation ul.sub-1 {
position: absolute;
padding: 5px 10px;
left: 0px;bottom: initial;top: 100%;
min-width: 230px;visibility: hidden;
-webkit-transform: translateY(150px) scale(0);
-o-transform: translateY(150px) scale(0);
transform: translateY(150px) scale(0);
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
background: rgba(255, 255, 255, 1);
box-shadow: 1px 1px 2px #ccc, -1px 1px 2px #959595;
}
#header .navigation li.sub-1 {
position: relative;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
#header .navigation li.sub-1:nth-child(n+2) {border-top: 1px solid #e1e1e1;}
#header .navigation li.sub-1:before {
content:'\f105';
font-family: FontAwesome;
opacity: 0;visibility: visible;
display: block;position: absolute;
left: 0px;top: 10px;font-size: 13px;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
#header .navigation li.sub-1>.link {
padding: 10px 10px 10px 5px;
font-size: 13px;line-height: 20px;color: #000;
white-space: nowrap;
font-weight: bold;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
#header .navigation li.main:hover>ul.sub-1 {
-webkit-animation: dropMenu .5s ease-in-out forwards;
-moz-animation: dropMenu .5s ease-in-out forwards;
animation: dropMenu .5s ease-in-out forwards;
}
#header .navigation li.sub-1:hover {padding-left: 10px;}
#header .navigation li.sub-1:hover:before {opacity: 1;visibility: visible;color: #3c3eb0;}
#header .navigation li.sub-1>.link:hover {color: #3c3eb0;}
@media (max-width: 959px) {#header .middle {padding: 8px 0;}}
@media (min-width: 479px) and (max-width: 959px) {#header .middle {padding: 35px 0 8px 0;}}
@media (max-width: 479px) {
#header {padding: 10px 0;}
#header .social-2,#header .info {display: none;}
#header .hgroup {margin-bottom: 10px;}
}
@keyframes dropMenu {
0% {
-webkit-transform: translateY(150px) scale(1);
-o-transform: translateY(150px) scale(1);
transform: translateY(150px) scale(1);
}
100% {
z-index: 1000;
visibility: visible;
-webkit-transform: translateY(0) scale(1);
-o-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
}
/* */
/* */
/* 1. panel */
.projects .panel-head .label {
display: inline-block;
position: relative;
padding: 10px 20px 10px 35px;
background: #3b3eaf;
font-size: 14px;line-height: 20px;
color: #fff;cursor: pointer;
}
.projects .panel-head .label:before {
content: '\f03a';
font-family: FontAwesome;
display: block;
position: absolute;
left: 10px;bottom: initial;
top: 10px;font-weight: normal;
}
.list-cat .item .link {position: relative;display: block;padding: 10px 10px;font-size: 14px;line-height: 20px;color: #252525;}
.list-cat .item .link:hover {color: #3b3eaf;}
@media (min-width: 1200px) {.list-cat .item .link {padding: 10px 10px;}}
@media (min-width: 959px) {
.projects .panel-head .label {display: none;}
.list-cat .item {float: left;}
.list-cat .item+.item {margin-left: 20px;}
.list-cat .item .link:before {
content: '';
display: block;
position: absolute;
width: 100%;height: 2px;
background: #3b3eaf;
left: 0px;bottom: initial;
top: -1px;display: none;
}
.list-cat .item .link:hover:before {display: block;}
.list-cat .item.active .link:before {display: block;}
.list-cat .item.active .link {color: #3b3eaf;}
}
@media (max-width: 959px) {
.projects .panel-head .label {display: inline-block;}
.list-cat {box-shadow: 0px 0px 0px 1px #e1e1e1;background: #ebebeb;display: none;}
.list-cat .item:last-child {display: none;}
.list-cat .item .link {padding: 10px 10px 10px 0px;}
.list-cat .item .link:hover {color: #3b3eaf;}
}
@media (min-width: 599px) and (max-width: 959px) {
.list-cat .item {float: left;width: 50%;padding: 0 15px;}
.list-cat .item .link {padding: 10px 0;}
.list-cat .item:nth-child(n+3) .link {border-top: 1px dashed #898989}
}
@media (max-width: 599px) {
.list-cat {padding: 0 10px;}
.list-cat .item:nth-child(n+2) .link {border-top: 1px dashed #898989;}
}
/* 1.1. article-related */
.article-related .list .item {position: relative;padding-left: 17px;}
.article-related .list .item:before {
content:'';
display: block;
position: absolute;
border-left: 6px solid #464646;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
left: 0px;top: 5px;
}
.article-related .list .item .link {font-size: 14px;line-height: 20px;color: #252525;}
.article-related .list .item:hover:before {border-left-color: #a51e22}
.article-related .list .item:hover .link {color: #a51e22;}
/* 1.2. product-related */
.product-related {}
.categories li.main {}
.categories li.main .link {}
.categories li:hover .link:hover {}
.categories a.main {}
.categories a.main:before {}
.categories li.main:nth-child(n+2)>a.main {}
.categories li.main:hover a.main:before {}
.aside .tags .list .item {}
.aside .tags .list .item .link {}
.aside .tags .list .item .link:hover {}
.aside .form {}
.aside .form .text {}
.aside .form .btn {}
.sale-products .panel-head {}
@media (max-width: 1200px) {}
.sale-products .panel-head .form .text {}
.sale-products .panel-head .form .text::-webkit-input-placeholder {}
.sale-products .panel-head .form .text::-moz-placeholder {}
.sale-products .panel-head .form .text:-ms-input-placeholder {}
.sale-products .panel-head .form .text:-moz-placeholder {}
.sale-products .panel-head .form .btn {}
.sale-products .panel-head .description {}
@media (max-width: 479px) {}
.featured-products .panel-head {}
@media (max-width: 1200px) {}
.featured-products .panel-head .description {}
/* 2. heading */
.heading-1 {position: relative;padding: 10px 10px 10px 15px;font-size: 16px;line-height: 20px;color: #252525;border-bottom: 2px solid #3b3eaf;}
.heading-1 {padding-left: 50px;}
.heading-1:after {
content: '\f1ea';
font-family: FontAwesome;
display: block;
position: absolute;
z-index: 100;
height: 40px;width: 40px;
line-height: 40px;
color: #fff;text-align: center;
background: #3b3eaf;
left: 0px;top: initial;
bottom: 0px;
}
.cat-heading {font-size: 24px;line-height: 26px;color: #252525;}
/* 3. slide */
.slide-1 .uk-slidenav {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-style: solid;border-color: #fff;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
.slide-1 .uk-slidenav:before {content:''}
.slide-1 .uk-slidenav-previous {border-width: 0px 0px 2px 2px;}
.slide-1 .uk-slidenav-next {border-width: 2px 2px 0px 0px}
.slide-2 {position: relative;}
.slide-2 .control {position: absolute;right: 0px;bottom: initial;}
.slide-2 .control .uk-slidenav {display: block;}
.slide-2 .uk-slidenav-previous {left: 0px;}
.slide-2 .uk-slidenav-next {right: 0px;}
.index-slide {position: relative;}
.index-slide .uk-slidenav {
width: 50px;height: 50px;
line-height: 50px;
font-size: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .5);
color: #3b3eaf;
}
.index-slide .uk-slideshow .item .inner {
position: absolute;
width: 100%;height: 100%;
z-index: 200;top: 0px;left: 0px;
color: #fff;
}
.index-slide .inner .article {
width: 100%;
padding: 10px 30px 10px 0;
position: absolute;
background: rgba(60, 62, 176, .5);
left: 0px;top: initial;bottom: 30px;
}
.index-slide .inner .article .content {font-size: 16px;line-height: 24px;font-weight: bold;text-align: right;}
.index-slide .inner .article .readmore span {
display: inline-block;
text-transform: uppercase;
line-height: 24px;font-size: 18px;
color: #fff;
background: rgba(255, 255,255, .3);
padding: 15px 50px;
border-radius: 25px;
}
@media (min-width: 1200px) {
.index-slide .uk-slidenav-previous {left: 0px;}
.index-slide .uk-slidenav-next {right: 0px;}
}
/* 4. articles */
[class*=article-] {}
[class*=article-] .title .link {-webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
[class*=article-] .title .link:hover {color: #3b3eaf;}
[class*=article-] .time {color: #898989;}
[class*=article-] .time .icon {color: #3b3eaf;font-size: 16px;}
[class*=article-] .description {font-size: 14px;line-height: 18px;color: #252525;}
[class*=article-] .description p {margin: 0;}
.article-1 {}
.article-1 .thumb {position: relative;overflow: hidden;}
.article-1 .thumb>.image {
height: 165px;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.article-1 .thumb .info {
width: 100%;
position: absolute;
left: 0px;top: initial;
bottom: 0;z-index: 100;
-webkit-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.article-1 .title {
padding: 10px 10px;
background: rgba(17, 17, 17, .5);
font-size: 14px;line-height: 20px;
}
.article-1 .title .link {color: #fff;}
.article-1 .thumb:hover .info {
-webkit-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.article-1 .thumb:hover>.image {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.article-2 .thumb .link {height: 165px;}
.article-2 .title {font-size: 18px;line-height: 22px;}
.article-2 .title .link {color: #252525;}
.article-related .article-2 .title {font-size: 14px;line-height: 20px;font-weight: bold;}
.article-detail {font-family: Arial, sans-serif;font-size: 14px;line-height: 20px;color: #252525;}
.article-detail h1, .article-detail h2, .article-detail h3, .article-detail h4, .article-detail h5, .article-detail h6 {font-family: Arial, sans-serif;}
.article-detail h1.title {font-size: 22px;line-height: 26px;color: #252525;font-weight: bold;}
.article-detail .description {}
/* 9. contacts */
.contact-map {height: 310px;}
.contact .company {font-size: 13px;line-height: 24px;color: #252525;}
.contacts .form .text {
display: block;
padding: 5px 10px 5px 15px;
border: 1px solid #e1e1e1;
font-size: 14px;line-height: 20px;
color: #000;
}
.contacts .form .text::-webkit-input-placeholder {font-size: 12px;line-height: 18px;color: #898989;}
.contacts .form .text::-moz-placeholder {font-size: 12px;line-height: 18px;color: #898989;}
.contacts .form .text:-ms-input-placeholder {font-size: 12px;line-height: 18px;color: #898989;}
.contacts .form .text:-moz-placeholder {font-size: 12px;line-height: 18px;color: #898989;}
.contacts .form input.text {height: 42px;}
.contacts .form textarea.text {height: 135px;}
.contacts .form .btn {
display: inline-block;
padding: 10px 45px;
background: #3b3eaf;
font-size: 14px;line-height: 20px;
color: #fff;border: none;
font-weight: bold;
cursor: pointer;
}
@media (min-width: 767px) and (max-width: 959px) {
.contacts .form .uk-grid >* {width: 100%;}
}
.contact .heading-5 {font-size: 20px;line-height: 24px;color: #3b3eaf;}
.contact .list .item {font-size: 13px;line-height: 20px;font-weight: bold;}
.contact .list .item .link {color: #252525;}
.contact .follow .print {
display: block;
margin-left: 20px;
width: 21px;height: 19px;
background: url(../img/icon_print.png) 0% 0% no-repeat;
}
/* */
.footer-social li {float: left;}
.footer-social li+li {margin-left: 5px;}
.footer-social a {
display: block;
position: relative;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: #3b5998;
font-size: 12px;
color: #fff;
border: 1px solid #fff;
}
.footer-social .twitter a {background: #55acee;}
.footer-social .google a {background: #e02f2f;}
.footer-social .youtube a {background: #cf2200;}