/*--------------------------------------------------
* Date : 21.05.2024
* Design : [mutluhasoo@gmail.com]
* Mail : bilgi@eymgayrimenkul.com
* Website : http://www.eymgayrimenkul.com
* --------------------------------------------------
* Description:
* Eym Gayrimenkul Tic. Ltd. Şti.
* Etimesgut/ ANKARA
*---------------------------------------------------*/
/*
TABLE BUILD
1. FONT
2. GENERAL
A. TL ICON
B.
C. PAGE-TITLE
D. BUTTONS
E. POPUP WRAPPER
F. COOKIE
G. TAGIFY
H. ARTICLE MARK
I. UPLOADED
J. TOOLTIPS
K. ACCORDION
L. MULTIPLE SELECT
M. FANCYBOX
N. NOT FOUND CONTENT
O. GENERAL ALL/MORE
P. MESSAGES/IMPORT/WARNING/SUCCESS
R. PAGINATION
S. HORIZONTAL/ VERTICAL TABS
T. GENERAL & SPECIAL WHITE FORM
U. TABLES
V. PROGRESS BAR
Y. SLIDER GROUP***
Z.
3. HEADER
A. TOP INFO
B. HELP CENTER
C. MENU & LOGO
D. OTHER MENU
E. OFFCANVAS CONTACT
4. MAIN CONTENT
A. INFO BANK SEARCH
B.
C.
D.
E. SHOWCASE
F.
G. COUNTER
H. FAQ
I.
J. IMPORTANT DATES
K.
5. ADDITIONAL CONTENT
A.
B.
5. MORE CONTAINER
A. Title
B. Advertisement List
C.
D. Blog Detail
E. File Downloads
F. Share On Social Media
G.
H. Comments ***
I. Membership
J.
K.
L.
M.
N. 404 ERROR
O.
P.
R.
S.
T.
6. FOOTER
A. Title
B. Address
C. List
D. Blog
E. Newsletter
F. Copyright
G. Social Media
H. Scroll Up/ Down
7. RESPONSIVE
A. 100 X 576 (mobile)
B. 576 X 768 (tablet)
C. 768 X 1024 (medium tablet and phone)
D. 1024 X 1199 (large tablet and laptop)
E. 1199 X 1399 (large desktop and wide monitor)
F. 1400 > (larger than 1400px) (large desktop)
G. Print
8. ANIMATION
A. Scroll
B. Slider
C.
D.
*/
/*=================================================
1. FONT
===================================================*/
@import "ey-fonts.css";
@import "ey-library.css";
@import "ey-firnuture.css";
@import "ey-root.css";
/*=================================================
END OF FONT
===================================================*/
/*=================================================
2. GENERAL
===================================================*/
body {
font-family:var(--font-family);
font-size: var(--body-font-size);
color:var(--paragraph-color);
font-weight: 400;
line-height: var(--body-line-height);
margin: 0;
padding: 0;
}
a {
color: var(--secondary-color);
text-decoration: none;
outline: none;
transition: all 0.3s ease-in-out;
}
a:hover,
a:active,
a:focus {
color: var(--primary-color);
}
ul,ol,dl{
list-style: none;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: auto;
}
::selection{
background:var(--primary-background) none repeat scroll 0 0;
color:var(--font-white-color);
}
::-moz-selection{
background:var(--primary-background) none repeat scroll 0 0;
color:var(--font-white-color);
}
/*
--------------------------------------- A. TL ICON ---------------------------------------
*/
.TL-icon{ font-style:normal;}
.TL-icon:before{
font-family:"tlfont", sans-serif;
font-style:normal;
content:"t";
padding:0 3px 0 0;
}
.m2 {
font-size: smaller;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
/*
--------------------------------------- A. TL ICON ---------------------------------------
*/
/*
--------------------------------------- B. X ------------------------------------
*/
/*
--------------------------------------- B. X ------------------------------------
*/
/*
--------------------------------------- C. PAGE-TITLE ------------------------------------
*/
.page-title {
width:100%;
overflow:hidden;
text-align:center;
}
.page-title h2{
font-weight: 700;
font-size: 1.6rem;
line-height: 1.7rem;
color:var(--secondary-color);
position:relative;
margin: 0;
padding-top: 1rem;
}
.page-title h2:before {
background:var(--primary-background);
content:"";
width:11px;
height:11px;
margin:0;
position:absolute;
top:7px;
left:50%;
transform: translate(-50%,-50%);
transition: all 0.2s ease-in-out;
}
.page-title:hover h2::before {background:var(--tertiary-background);}
.page-title span{
color:var(--secondary-color);
font-size: 1rem;
font-weight: 400;
letter-spacing: 1px;
padding: 0;
}
/*
--------------------------------------- C. PAGE-TITLE ------------------------------------
*/
/*
--------------------------------------- D. BUTTONS ---------------------------------------
*/
.btn-generalone {
background:var(--primary-background) none repeat scroll 0 0;
font-size:1rem;
font-weight: 600;
color:var(--font-white-color);
line-height: 43px;
letter-spacing:.02rem;
text-align: center;
border: medium none;
margin-bottom: 0;
padding:0 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
vertical-align: middle;
white-space: nowrap;
position: relative;
z-index: 1;
transition: all 0.3s ease 0s;
touch-action: manipulation;
user-select: none;
}
.btn-generalone span {font-weight: 500;padding-left: .3rem;}
.btn-generalone::after {
font-family: "Font Awesome 5 Pro", serif;
font-weight: lighter;
font-size: 1rem;
content: "\f105";
margin-left: 40px;
}
.btn-generalone::before {
background:var(--btn-general-background-shadow);
content: "";
width: 43px;
height: 43px;
position: absolute;
top: 0;
right: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.btn-generalone:hover::before {width: 100%;}
.btn-generalone:hover,
.btn-generalone:active,
.btn-generalone:focus{color:var(--font-white-color);}
/*
--------------------------------------- D. BUTTONS ---------------------------------------
*/
/*
--------------------------------------- E. POPUP WRAPPER ---------------------------------
*/
#popup-wrapper {font-size: 1rem;color: var(--paragraph-color);line-height: 1.4;width: 100%;max-width: 1295px;/*margin-right:17px !important;*/}
@media (min-width: 1400px){#popup-wrapper{max-width: 1295px;}}
@media (min-width: 1200px) and (max-width: 1399px){#popup-wrapper{ max-width: 1115px;}}
@media (min-width: 992px) and (max-width: 1199px){#popup-wrapper{ max-width: 935px;}}
@media (min-width: 768px) and (max-width: 991px){#popup-wrapper{ max-width: 695px;}}
@media (min-width: 576px) and (max-width: 767px){#popup-wrapper{ max-width: 515px;}}
.max-1140{max-width:1115px !important;}
.max-960{max-width:935px !important;}
.max-720{max-width:695px !important;}
.max-540{max-width:515px !important;}
#popup-wrapper .p-list ol li,
#popup-wrapper .p-list ul li,
#popup-wrapper .p-list ol ul li{font: 400 14px/22px var(--font-family);}
#popup-wrapper .p-list ol li::before,
#popup-wrapper .p-list ol ul li::before {
font: normal normal 1rem/1.2 FontAwesome;
color:var(--primary-color);
vertical-align: middle;
content: "\f068";
display: inline-block;
margin: 0 5px 0;
}
#popup-wrapper .p-list ol,
#popup-wrapper .p-list ol ul{ list-style:none; margin:0 0 25px;}
#popup-wrapper .sub-title {
font-size: 1rem;
color: var(--paragraph-color);
font-weight: 700;
line-height: 1.2;
margin-bottom: 10px;
padding-bottom: 10px;
}
#popup-wrapper .sub-title::after {
background: var(--primary-background) none repeat scroll 0 0;
content: "";
display: block;
height: 3px;
margin: 10px 0 0 0;
width: 25px;
}
#popup-wrapper b:not(.tooltip),
#popup-wrapper strong:not(.tooltip){font-size: 1rem;font-weight: 600;color: var(--paragraph-color);}
#popup-wrapper a{
color:var(--primary-color);
position: relative;
}
#popup-wrapper a:before {
background: var(--primary-background);
border-radius: var(--object-border-radius);
content: "";
width: 0;
height: 1px;
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
transition: width 0.4s linear;
}
#popup-wrapper a:hover:before {
width: 100%;
left: 0;
right: auto;
}
#popup-wrapper a:hover,
#popup-wrapper a:hover{
color:var(--primary-color);
text-decoration: none;
}
/*
--------------------------------------- E. POPUP WRAPPER ---------------------------------
*/
/*
--------------------------------------- F. COOKIE ----------------------------------------
*/
.ey-cookie {
font-family:var(--font-family);
/*font-size:1rem;*/
max-width: 350px;
border-radius: var(--object-border-radius);
position:fixed;
bottom:64px;
left:40px;
padding: 1rem;
box-shadow: 0 4px 12px rgba(23, 34, 52, 0.3);
z-index:999;
}
.ey-cookie-active {
background:var(--cookies-active-color);
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.ey-cookie p {
font-size: 1rem;
font-weight: normal;
color:var(--font-white-color);
line-height: 1.5;
margin: 0;
padding:0;
}
.ey-cookie p b{font-weight: 600;}
.ey-cookie p a {
color:var(--primary-color);
font-size: 1rem;
text-decoration: underline;
margin: 0;
padding:0;
}
.ey-cookie-button {
background: var(--primary-background);
color:var(--font-white-color);
font-weight: normal;
font-size: 1rem;
border: 1px solid var(--primary-border-color);
border-radius: 8px;
display: inline-block;
cursor: pointer;
padding: 3px 18px;
margin:1.3rem 0 0.5rem;
white-space: nowrap;
transition: all 0.3s ease-in-out;
}
.ey-cookie-button:hover{
background: transparent !important;
border-color: var(--primary-border-color);
color: var(--primary-color) !important;
}
@media (max-width:767px) {
.ey-cookie {
flex-direction: column;
padding: 15px;
left: 20px;
}
/*.ey-cookie p,
.ey-cookie p a {font-size:.813rem;}
.ey-cookie-button {
font-size:.8rem;
padding: 3px 14px;
margin:8px 0 0 0;
}*/
}
/*
--------------------------------------- F. COOKIE ----------------------------------------
*/
/*
--------------------------------------- G. TAGIFY ----------------------------------------
*/
.tagify{
display:flex;
align-items:flex-start;
flex-wrap:wrap;
border:1px solid var(--tags-border-color);
padding:0;
line-height:1.4;
cursor:text;
outline:0;
position:relative;
box-sizing:border-box;
transition:.1s;
border-radius: var(--object-border-radius);
font-weight: 300;
}
@keyframes tags--bump{30%{transform:scale(1.2)}}
@keyframes rotateLoader{to{transform:rotate(1turn)}}
.tagify:hover{
border-color:var(--tags-hover-border-color)
}
.tagify.tagify--focus{
transition:0s;
border-color:var(--tags-focus-border-color)
}
.tagify[readonly]:not(.tagify--mix){cursor:default}
.tagify[readonly]:not(.tagify--mix)>.tagify__input{visibility:hidden;width:0;margin:5px 0}
.tagify[readonly]:not(.tagify--mix) .tagify__tag>div{padding:.3em .5em;padding:var(--tag-pad)}
.tagify[readonly]:not(.tagify--mix) .tagify__tag>div::before{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;box-shadow:none;filter:brightness(.95)}
.tagify[readonly] .tagify__tag__removeBtn{display:none}
.tagify--loading .tagify__input::before{content:none}
.tagify--loading .tagify__input::after{content:'';vertical-align:middle;opacity:1;width:.7em;height:.7em;width:var(--loader-size);height:var(--loader-size);border:3px solid;border-color:#eee #bbb #888 transparent;border-radius:var(--circle-border-radius);animation:rotateLoader .4s infinite linear;margin:-2px 0 -2px .5em}
.tagify--loading .tagify__input:empty::after{margin-left:0}
.tagify+input,.tagify+textarea{display:none!important}
.tagify__tag{display:inline-flex;align-items:center;margin:5px 0 5px 5px;position:relative;z-index:1;outline:0;cursor:default;transition:.13s ease-out}
.tagify__tag>div{vertical-align:top;box-sizing:border-box;max-width:100%;padding:.3em .5em;padding:var(--tag-pad,.3em .5em);color:#000;color:var(--tag-text-color,#000);line-height:inherit;border-radius:3rem;white-space:nowrap;transition:.13s ease-out}
.tagify__tag>div>*{
white-space:pre-wrap;
overflow:hidden;
text-overflow:ellipsis;
display:inline-block;
vertical-align:top;
min-width:var(--tag--min-width,1ch);
transition:.8s ease,.1s color
}
.tagify__tag>div>[contenteditable]{outline:0;-webkit-user-select:text;user-select:text;cursor:text;margin:-2px;padding:2px;max-width:350px}
.tagify__tag>div::before{
content:'';
position:absolute;
border-radius:inherit;
left:0;
top:0;
right:0;
bottom:0;
z-index:-1;
pointer-events:none;
transition:120ms ease;
animation:tags--bump .3s ease-out 1;
/*box-shadow:0 0 0 1.1em #e5e5e5 inset;*/
box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-bg,#e5e5e5) inset
}
.tagify__tag:hover:not([readonly]) div::before{top:-2px;right:-2px;bottom:-2px;left:-2px;box-shadow:0 0 0 1.1em #d3e2e2 inset;box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-hover,#d3e2e2) inset}
.tagify__tag--loading{pointer-events:none}
.tagify__tag--loading .tagify__tag__removeBtn{display:none}
.tagify__tag--loading::after{
--loader-size:.4em;
content:'';
vertical-align:middle;
opacity:1;
width:.7em;
height:.7em;
border:3px solid;
border-color:#eee #bbb #888 transparent;
border-radius:var(--circle-border-radius);
animation:rotateLoader .4s infinite linear;
margin:0 .5em 0 -.1em
}
.tagify__tag--flash div::before{animation:none}
.tagify__tag--hide{
width:0!important;
padding-left:0;
padding-right:0;
margin-left:0;
margin-right:0;
opacity:0;
transform:scale(0);
transition:.3s;
pointer-events:none
}
.tagify__tag--hide>div>*{white-space:nowrap}
.tagify__tag.tagify--noAnim>div::before{animation:none}
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span{opacity:.5}
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before{
box-shadow:0 0 0 1.1em rgba(211,148,148,.5) inset!important;
box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-invalid-bg,rgba(211,148,148,.5)) inset!important;
transition:.2s
}
.tagify__tag[readonly] .tagify__tag__removeBtn{display:none}
.tagify__tag[readonly]>div::before{
background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;
box-shadow:none;
filter:brightness(.95)
}
.tagify__tag--editable>div{color:#000;color:var(--tag-text-color--edit,#000)}
.tagify__tag--editable>div::before{box-shadow:0 0 0 2px #d3e2e2 inset!important;box-shadow:0 0 0 2px var(--tag-hover,#d3e2e2) inset!important}
.tagify__tag--editable>.tagify__tag__removeBtn{pointer-events:none}
.tagify__tag--editable>.tagify__tag__removeBtn::after{opacity:0;transform:translateX(100%) translateX(5px)}
.tagify__tag--editable.tagify--invalid>div::before{
box-shadow:0 0 0 2px #d39494 inset!important;
box-shadow:0 0 0 2px var(--tag-invalid-color,#d39494) inset!important
}
.tagify__tag__removeBtn{
background:0 0;
background:var(--tag-remove-btn-bg,none);
color:var(--tag-remove-btn-color,#000);
order:5;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50px;
cursor:pointer;
font:14px/1 Arial;
width:14px;
height:14px;
margin-right:4.66667px;
margin-left:-4.66667px;
overflow:hidden;
transition:.2s ease-out
}
.tagify__tag__removeBtn::after{content:"\00D7";transition:.3s,color 0s}
.tagify__tag__removeBtn:hover{color:var(--font-white-color);background:#27b9c8;(--tag-remove-btn-bg--hover,#c77777)}
.tagify__tag__removeBtn:hover+div>span{opacity:.5}
.tagify__tag__removeBtn:hover+div::before{
box-shadow:0 0 0 1.1em rgba(39,185,200,.3) inset!important;
box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em);
color:#27b9c8;
(--tag-remove-bg,rgba(211,148,148,.3)) inset!important;
transition:box-shadow .2s
}
.tagify:not(.tagify--mix) .tagify__input br{display:none}
.tagify:not(.tagify--mix) .tagify__input *{display:inline;white-space:nowrap}
.tagify__input{
flex-grow:1;
display:inline-block;
min-width:110px;
margin:5px;
padding:.3em .5em;
line-height:inherit;
position:relative;
white-space:pre-wrap;
color:inherit;
box-sizing:inherit
}
.tagify__input:empty::before{transition:.2s ease-out;opacity:1;transform:none;display:inline-block;width:auto}
.tagify--mix .tagify__input:empty::before{display:inline-block}
.tagify__input:focus{outline:0}
.tagify__input:focus::before{transition:.2s ease-out;opacity:0;transform:translatex(6px)}
@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.tagify__input:focus::before{display:none}}
@supports (-ms-ime-align:auto){.tagify__input:focus::before{display:none}}
.tagify__input:focus:empty::before{
transition:.2s ease-out;
opacity:1;
transform:none;
color:var(--placeholder-color-focus);
}
@-moz-document url-prefix(){.tagify__input:focus:empty::after{display:none}}
.tagify__input::before{
content:attr(data-placeholder);
height:1.4em;
line-height:1.4em;
margin:auto 0;
z-index:1;
color:var(--placeholder-color);
white-space:nowrap;
pointer-events:none;
opacity:0;
position:absolute
}
.tagify--mix .tagify__input::before{display:none;position:static;line-height:inherit}
.tagify__input::after{content:attr(data-suggest);display:inline-block;white-space:pre;color:#000;opacity:.3;pointer-events:none;max-width:100px}
.tagify__input .tagify__tag{margin:0}
.tagify__input .tagify__tag>div{padding-top:0;padding-bottom:0}
.tagify--mix{display:block}
.tagify--mix .tagify__input{padding:5px;margin:0;width:100%;height:100%;line-height:1.5}
.tagify--mix .tagify__input::before{height:auto}
.tagify--mix .tagify__input::after{content:none}
.tagify--select::after{
content:'>';
opacity:.5;
position:absolute;
top:50%;
right:0;
bottom:0;
font:16px monospace;
line-height:8px;
height:8px;
pointer-events:none;
transform:translate(-150%,-50%) scaleX(1.2) rotate(90deg);
transition:.2s ease-in-out
}
.tagify--select[aria-expanded=true]::after{transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2)}
.tagify--select .tagify__tag{position:absolute;top:0;right:1.8em;bottom:0}
.tagify--select .tagify__tag div{display:none}
.tagify--select .tagify__input{width:100%}
.tagify--invalid{--tags-border-color:#D39494}
.tagify__dropdown{position:absolute;z-index:9999;transform:translateY(1px);overflow:hidden}
.tagify__dropdown[placement=top]{margin-top:0;transform:translateY(-100%)}
.tagify__dropdown[placement=top] .tagify__dropdown__wrapper{border-top-width:1px;border-bottom-width:0}
.tagify__dropdown[position=text]{box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);font-size:.9em}
.tagify__dropdown[position=text] .tagify__dropdown__wrapper{border-width:1px}
.tagify__dropdown__wrapper{
max-height:300px;
overflow:hidden;
background:var(--background-white);
border-color:var(--tagify-dd-color-primary);
border-top-width:0;
box-shadow:0 2px 4px -2px rgba(0,0,0,.2);
transition:.25s cubic-bezier(0,1,.5,1)
}
.tagify__dropdown__wrapper:hover{overflow:auto}
.tagify__dropdown--initial .tagify__dropdown__wrapper{max-height:20px;transform:translateY(-1em)}
.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper{transform:translateY(2em)}
.tagify__dropdown__item{box-sizing:inherit;padding:.3em .5em;margin:1px;cursor:pointer;border-radius:2px;position:relative;outline:0}
.tagify__dropdown__item--active{background:#3595f6;background:var(--tagify-dd-color-primary);color:var(--font-white-color)}
.tagify__dropdown__item:active{filter:brightness(105%)}
/*
--------------------------------------- G. TAGIFY ----------------------------------------
*/
/*
--------------------------------------- H. ARTICLE MARK ----------------------------------
*/
ul.list-options {
font-family: var(--font-family);
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
ul.list-options li {
background:var(--object-one-color);
font-weight: 400;
font-size: .8rem;
line-height: 1.2;
color: var(--paragraph-color);
border-radius: 3px;
padding: 12px 14px;
margin-bottom: 4px;
}
ul.list-options li span {
font-weight: 400;
font-size: .8rem;
line-height: 1.2;
color: var(--paragraph-color);
}
ul.list-options li i {
margin-right: 12px;
color: var(--primary-color);
}
.general-list ul,
.general-list ol,
.general-list ol * ol,
.general-list ol * ul,
.general-list ul * ul,
.general-list ul * ol{font:400 1rem/1.2 var(--font-family);color:var(--paragraph-color);list-style:none;margin: 0; padding:0;}
.general-list ol li,
.general-list ul li{margin:5px 0; padding-left:20px; position: relative; line-height: 22px;}
.general-list ol li b,
.general-list ol li strong,
.general-list ul li b,
.general-list ul li strong{font-weight: 600;color:var(--paragraph-color);}
.general-list ol li:after,
.general-list ul li:after{content:"\f00c";font-family:"FontAwesome",sans-serif;font-size:1rem;position:absolute;color:var(--primary-color);left:0;top:0;}
.general-list ol * ol li,
.general-list ol * ul li,
.general-list ul * ul li,
.general-list ul * ol li{list-style-type:none; padding-left:15px; position:relative;}
.general-list ol * ol li:after,
.general-list ul * ol li:after{content:"\f111" !important;font-family:'FontAwesome',sans-serif;font-size:9px !important;position:absolute;color:var(--primary-color);left:0;top:0;}
.general-list ul * ul li:after,
.general-list ol * ul li:after{content:"\f068";font-family:'FontAwesome',sans-serif;font-size:14px;position:absolute;color:var(--primary-color);left:0;top:0;}
ul.list {font: 400 1rem/1.2 var(--font-family);color:var(--paragraph-color); padding:0; margin:0; }
ul.list li { margin:5px 0; padding-left:20px; position: relative; line-height: 22px; }
ul.list i { position: absolute; left: 0; top: 5px; }
ul.list.site-color li i { color: var(--primary-color); }
ul.list.site-color li { color: var(--paragraph-color); }
ul.list li:after {content:""; font-family:'FontAwesome',sans-serif;position:absolute;color:var(--primary-color); left:0; top:0; }
/* Ul List Mark */
ul.list-mark{padding:0; margin:0;}
ul.list-mark li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-mark li:after{content:"\f00c"; font-size:14px;}
/* Ul List Arrow */
ul.list-arrow{padding:0; margin:0;}
ul.list-arrow li{list-style-type:none; padding-left:15px; position:relative;}
ul.list-arrow li:after{content:"\f105"; font-size:16px;}
/* Ul List line */
ul.list-line{padding:0; margin:0;}
ul.list-line li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-line li:after{content:"\f068"; font-size:14px;}
/* Ul List line-xs */
ul.list-line-xs{padding:0; margin:0 0 .5rem;}
ul.list-line-xs li{list-style-type:none; padding-left:15px; position:relative;}
ul.list-line-xs li:after{content:"\f068"; font-size:10px;}
/* Ul List Hand */
ul.list-hand{padding:0; margin:0;}
ul.list-hand li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-hand li:after{content:"\f0a4"; font-size:14px;}
/* Ul List Edit */
ul.list-edit{padding:0; margin:0;}
ul.list-edit li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-edit li:after{content:"\f040"; font-size:14px;}
/* Ul List angle double arrow */
ul.list-angle-double{padding:0; margin:0;}
ul.list-angle-double li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-angle-double li:after{content:"\f101"; font-size:16px;}
ul.list-arrow-circle-right{padding:0; margin:0;}
ul.list-arrow-circle-right li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-arrow-circle-right li:after{content:"\f0a9"; font-size:16px;}
ul.list-arrow-circle-o-right{padding:0; margin:0;}
ul.list-arrow-circle-o-right li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-arrow-circle-o-right li:after{content:"\f18e"; font-size:16px;}
ul.list-arrow-right{padding:0; margin:0;}
ul.list-arrow-right li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-arrow-right li:after{content:"\f061"; font-size:16px;}
ul.list-caret-right {padding:0; margin:0;}
ul.list-caret-right li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-caret-right li:after{content:"\f0da"; font-size:16px;}
ul.list-caret-square-o-right {padding:0; margin:0;}
ul.list-caret-square-o-right li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-caret-square-o-right li:after{content:"\f152"; font-size:16px;}
ul.list-chevron-circle-right {padding:0; margin:0;}
ul.list-chevron-circle-right li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-chevron-circle-right li:after{content:"\f138"; font-size:16px;}
ul.list-long-arrow-right {padding:0; margin:0;}
ul.list-long-arrow-right li{list-style-type:none; padding-left:20px; position:relative;}
ul.list-long-arrow-right li:after{content:"\f178"; font-size:16px;}
/*
--------------------------------------- H. ARTICLE MARK ----------------------------------
*/
/*
--------------------------------------- I. UPLOADED --------------------------------------
*/
.news-file{
background-color: var(--background-white);
text-align: center;
border-radius: var(--object-border-radius);
padding: 2rem 1rem;
position: relative;
overflow: hidden;
box-shadow: 0 15px 40px -12px rgb(217,220,232);
}
.mf-wrap input[type="file"] {
font-size: 1rem;
color: var(--object-two-color);
position: absolute;
z-index:1;
top: 8px;
left: 70px;
}
.mf-wrap .button-wrap {
position: relative;
min-height: 40px;
text-align: left;
}
.mf-wrap .new-button {
background-color: var(--primary-background);
font-size: 1rem;
color: var(--font-white-color);
border-radius: var(--object-two-border-radius);
display: inline-block;
margin: 0;
padding: 9px 20px;
cursor: pointer;
position: absolute;
z-index: 2;
}
/*
--------------------------------------- I. UPLOADED --------------------------------------
*/
/*
--------------------------------------- J. TOOLTIPS --------------------------------------
*/
.stips-wrap {
font-family: var(--font-family);
position: relative;
display: inline-block;
/*border-bottom: 1px dotted black;*/
}
.stips-wrap .stext {
background-color:var(--secondary-background);
font-weight: 400;
font-size: .8rem;
line-height: 1.2;
color: var(--font-white-color);
text-align: center;
border-radius: var(--object-border-radius);
min-width:125px;
width: 100%;
padding:5px;
position: absolute;
visibility: hidden;
z-index: 1;
}
.stips-wrap .stext::after {
content: "";
position: absolute;
border-width: 5px;
border-style: solid;
}
/*-------*/
.stips-wrap .stext.stips-top { top: -25px;left: 50%; transform: translate(-50%,-50%);}
.stips-wrap .stext.stips-top::after { top: 100%; left: 50%; margin-left: -5px; border-color: black transparent transparent transparent;}
.stips-wrap .stext.stips-top-one { top:-35px;left: 0;}
.stips-wrap .stext.stips-top-one::after { bottom: -10px; left:15px; border-color: black transparent transparent transparent;}
.stips-wrap .stext.stips-top-two { top: -35px;right: 0; }
.stips-wrap .stext.stips-top-two::after { bottom:-10px; right:15px; border-color: black transparent transparent transparent;}
/*-------*/
.stips-wrap .stext.stips-right { right: -55px; top:50%; transform: translate(50%,-50%); }
.stips-wrap .stext.stips-right::after { right: 98%; top: 50%; margin-top: -5px; border-color: transparent black transparent transparent;}
/*-------*/
.stips-wrap .stext.stips-bottom {bottom:-50px;left: 50%; transform: translate(-50%,-50%); }
.stips-wrap .stext.stips-bottom::after { bottom: 100%; left: 50%; margin-left: -5px; border-color: transparent transparent black transparent;}
/*-------*/
.stips-wrap .stext.stips-left { left:-55px; top: 50%;transform: translate(-50%,-50%); }
.stips-wrap .stext.stips-left::after { left: 99%; top: 50%; margin-top: -5px; border-color: transparent transparent transparent black; }
.stips-wrap:hover .stext {visibility: visible;}
/*
--------------------------------------- J. TOOLTIPS --------------------------------------
*/
/*
--------------------------------------- K. ACCORDION -------------------------------------
*/
.accordion-item{
font-family: var(--font-family);
/*border-top:1px solid var(--border-grey-color) !important;*/
border: none;
/*margin-bottom:1.5rem;
box-shadow:0 0 10px 0 rgba(2,3,51,.1) !important;
border-radius: var(--object-border-radius) !important;*/
}
.accordion-item:last-child {border-bottom:1px solid var(--border-grey-color) !important;}
.accordion-body{font-size: 1rem;line-height: 1.4}
.accordion-body b{font-weight: 600;}
.accordion-button{
color: var(--paragraph-color);
font-size: 1rem;
font-weight: 500;
border-top:1px solid var(--border-grey-color) !important;
width: 100%;
padding:.85rem 2.4rem .85rem .75rem;
position: relative;
/*box-shadow: 0 7px 24px -19px var(--secondary-rgba05-color);*/
}
.accordion-button::after {
background: transparent;
color: var(--secondary-color);
font-size: 1.2rem;
text-align: center;
line-height: 2.7rem;
/*border-radius:var(--object-border-radius);*/
flex-shrink: 0;
width:2.7rem;
height:2.7rem;
margin-left: auto;
position: absolute;
top: 0;
right: 0;
content: "+";
transition: transform .2s ease-in-out;
}
.accordion-button:not(.collapsed)::after {
content: "-";
background-image:none;
transform: none; /*rotate(-180deg)*/
}
button[aria-expanded="true"] {
background: transparent !important;
color: var(--primary-color) !important;
/*border-radius: var(--object-border-radius) var(--object-border-radius) 0 0 !important;
box-shadow: 0 7px 24px -19px rgba(0, 0, 0, 0.5) !important;*/
border-radius:0;
box-shadow: none !important;
transition: 0.3s;
}
button[aria-expanded="true"]::after {
/*background: var(--background-white) !important;*/
color: var(--primary-color);
/*position: relative;
right:0;
border-radius:0 11px 0 0;*/
}
.accordion-button:focus {
z-index: 3;
border-color:inherit;
outline: 0;
box-shadow: none;
}
/*
--------------------------------------- K. ACCORDION -------------------------------------
*/
/*
--------------------------------------- L. MULTIPLE SELECT -------------------------------
*/
#select1,
#select1_ajax {
width: 250px;
padding: 7px 10px;
}
#select2,
#select2_ajax,
#select3_ajax,
#select5,
#select5_ajax,
#select6 {
width: 350px;
height: 36px;
}
#f_dosya,#f_dosyaone{width: 100%; height: 36px;display: block;}
#select4,
#select4_ajax {
width: 350px;
height: 50px;
}
.option_one,
.option_two,
.option_three,
.option_four,
.option_five,
.option_six,
.option_seven,
.option_eight,
.option_nine,
.option_ten,
.option_eleven,
.option_twelve,
.option_thirteen,
.option_fourteen {
}
.group_one,
.group_two,
.group_three {
}
#selectator_mask {
background-color: transparent;
width: 100%;
height: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
}
#selectator_mask.selectator_mask_dimmed {background-color: rgba(0,0,0,0.3);}
/* spinner keyframes */
/* main element */
.selectator_element {
background-color: var(--background-white);
border: 1px solid var(--object-one-color);
box-sizing: border-box;
display: inline-block;
text-decoration: none;
vertical-align: middle;
border-radius: var(--object-border-radius);
width: 100% !important;
}
.selectator_element * {
box-sizing: border-box;
text-decoration: none;
}
.selectator_element img {display: block;}
.selectator_element.multiple {
min-height:45px !important;
/*height: 45px;*/
padding: 4px 30px 4px 5px !important;
}
.selectator_element.single {
height:45px;
padding: 13px 15px !important;
}
.selectator_element.focused {
box-shadow: 0 0 1px var(--primary-background);
z-index: 101;
}
.selectator_element:after {
position: absolute;
cursor: pointer;
content: '\25BC';
font-size:100%;
transform: scaleY(0.75);
right: 12px;
color: var(--secondary-color);
top: 50%;
line-height: 0;
}
.selectator_element.loading:before
.selectator_selected_items .selectator_placeholder {
font-size: 80%;
color: rgba(0,0,0,0.5);
}
.single .selectator_selected_items {display: block;}
.multiple .selectator_selected_items {display: inline;}
.selectator_selected_items .selectator_selected_item {
color: var(--secondary-color);
position: relative;
vertical-align: top;
}
.single .selectator_selected_items .selectator_selected_item {
background-color: transparent;
display: block;
margin: 0;
padding: 0;
font-size: inherit;
text-decoration: none;
}
.multiple .selectator_selected_items .selectator_selected_item {
background-color: var(--object-one-background);
display: inline-block;
margin: 2px 5px 0 0;
padding: 3px 30px 2px 5px;
/*font-size: 80%;*/
border-radius:50px;
border: 1px solid var(--border-grey-color);
}
.selectator_selected_items .selectator_selected_item .selectator_selected_item_left {float: left;}
.single .selectator_selected_items .selectator_selected_item .selectator_selected_item_left {
float: left;
width: 30px;
margin-top: -2px;
margin-right: 7px;
}
.single .selectator_selected_items .selectator_selected_item .selectator_selected_item_left img {
height: 22px;
border-radius: 3px;
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_left {
float: left;
width: 28px;
margin-top: -1px;
margin-left: -2px;
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_left img {
width: 25px;
height: 25px;
border-radius:50px;
}
.single .selectator_selected_items .selectator_selected_item .selectator_selected_item_title {
height: auto;
line-height: 1.3;
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_title {
float: left;
padding-top: 1px;
padding-bottom: 1px;
}
.selectator_selected_items .selectator_selected_item .selectator_selected_item_subtitle {display: none;}
.single .selectator_selected_items .selectator_selected_item .selectator_selected_item_right {
float: right;
background-color: var(--primary-background);
color: var(--font-white-color);
font-weight: bold;
font-size: .9rem;
text-align: center;
line-height: 16px;
border-radius: 6px;
padding: 2px 12px;
margin-right:25px;
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_right {display: none;}
.single .selectator_selected_items .selectator_selected_item .selectator_selected_item_remove {
display: block;
position: absolute;
right: 16px;
cursor: pointer;
font-size: .9rem;
font-weight: bold;
color: var(--secondary-color);
padding: 2px;
line-height: 0;
top: 50%;
transform: scaleX(1.2);
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_remove {
display: inline-block;
font-weight: bold;
color: var(--secondary-color);
margin: 0 0 0 5px;
cursor: pointer;
font-size: .9rem;
line-height: 19px;
vertical-align: top;
border-radius: 0 3px 3px 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding: 7px 7px 4px 5px;
}
.multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_remove:hover {background-color: rgba(0,0,0,0.2);}
.selectator_input,
.selectator_textlength {
border: 0;
display: inline-block;
margin: 0;
background-color: transparent;
font-size: 13px;
outline: none;
}
.multiple .selectator_input,
.multiple .selectator_textlength {
padding: 3px 0 0 0;
margin: 7px 0 2px 5px;
}
.single .selectator_input {
background-color: var(--object-one-background);
color: var(--paragraph-color);
font-size: inherit;
border: 1px solid var(--border-grey-color);
border-bottom: 0;
width: calc(100% + 2px);
padding: 10px 25px;
position: absolute;
bottom: -40px;
left: -1px;
z-index: 101;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.single.options-hidden .selectator_input {
opacity: 0;
position: absolute;
left: -10000px;
}
.single.options-visible .selectator_input {opacity: 1;}
.disable_search .selectator_input {
opacity: 0;
padding: 0 1px 1px 0 !important;
}
.selectator_options {
background-color: var(--background-white);
border: 1px solid var(--border-grey-color);
border-radius: 0 0 3px 3px;
max-height: 250px;
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 101;
overflow-y: scroll;
list-style: none;
position: absolute;
right: -1px;
left: -1px;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.disable_search .selectator_options {border-top: 1px solid var(--border-grey-color);}
.single.disable_search .selectator_options {padding-top: 0;}
.options-hidden .selectator_options {display: none;}
.selectator_options .selectator_group {
padding: 5px;
font-weight: 600;
}
.selectator_options .selectator_option {
color: var(--paragraph-color);
min-height: 36px;
padding: 5px;
cursor: pointer;
}
.selectator_options .selectator_option.selectator_group_option {padding-left: 20px;}
.selectator_options .selectator_option:before,
.selectator_options .selectator_option:after {
content: "";
display: table;
}
.selectator_options .selectator_option:after {clear: both;}
.selectator_options .selectator_option .selectator_option_left {float: left;}
.selectator_options .selectator_option .selectator_option_left img {
width: 30px;
height: 30px;
border-radius:3px;
}
.selectator_options .selectator_option .selectator_option_title {margin-left: 40px;}
.selectator_options .selectator_option .selectator_option_subtitle {
font-size: .9rem;
color: var(--paragraph-color);
margin-top: -4px;
margin-bottom: -1px;
margin-left: 40px;
}
.selectator_options .selectator_option .selectator_option_right {
background-color: var(--primary-background);
color: var(--font-white-color);
font-weight: bold;
font-size: .9rem;
text-align: center;
line-height: 16px;
border-radius: 6px;
float: right;
padding: 2px 12px;
margin-top: 4px;
}
.selectator_options .selectator_option.active {
background-color: var(--primary-background);
color: var(--font-white-color);
}
.selectator_options .selectator_option.active .selectator_option_subtitle {color: var(--white-06-opacity);}
@-moz-keyframes selectator_spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes selectator_spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-o-keyframes selectator_spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes selectator_spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
--------------------------------------- L. MULTIPLE SELECT -------------------------------
*/
/*
--------------------------------------- M. FANCYBOX --------------------------------------
*/
.modal-container {
max-width: 500px;
padding: 0;
margin: 20px 0;
border-radius: .3em;
box-shadow: 0 0.1em 0.4em rgba(0,0,0,.3);
}
.modal-title {
font-weight: 800;
font-size: 2rem;
line-height: 2;
padding: 1rem 0;
}
.modal-body {
max-height: calc(100vh - 230px);
min-height: 50px;
/*padding:0;*/
overflow-y: auto;
}
.modal-footer {
padding: 1rem 0;
text-align: right;
}
p:first-child {margin-top: 0;}
/*
--------------------------------------- M. FANCYBOX --------------------------------------
*/
/*
--------------------------------------- N. NOT FOUND CONTENT -----------------------------
*/
.notfound-wrap{
color: var(--paragraph-color);
min-height:500px;
position: relative;
}
.notfound-wrap svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.notfound-wrap .message-box {
position: absolute;
top: 50%;
left: 5%;
transform: translate(-5%,-50%);
}
.notfound-wrap .message-box h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.2;
margin-bottom:1rem;
}
.notfound-wrap .message-box p {
font-size: 1rem;
font-weight: 400;
color: var(--paragraph-color);
letter-spacing: 1px;
margin: 0;
padding:0;
}
.notfound-wrap .action-link-wrap {margin-top: 3rem;}
/*.notfound-wrap .buttons-con .action-link-wrap a {
background: var(--primary-background);
color: var(--paragraph-color);
font-weight: 600;
font-size:.9rem;
text-decoration: none;
border-radius: var(--object-border-radius);
margin-right: 10px;
padding: 8px 25px;
transition: all 0.3s linear;
cursor: pointer;
}
.notfound-wrap .buttons-con .action-link-wrap a:hover {
background: #5A5C6C;
color: var(--font-white-color);
}*/
#Polygon-1,
#Polygon-2,
#Polygon-3,
#Polygon-4,
#Polygon-4,
#Polygon-5 {animation: float 1s infinite ease-in-out alternate;}
#Polygon-2 {animation-delay: .2s;}
#Polygon-3 {animation-delay: .4s;}
#Polygon-4 {animation-delay: .6s;}
#Polygon-5 {animation-delay: .8s;}
@keyframes float {
100% {
transform: translateY(20px);
}
}
@media (max-width: 450px) {
.notfound-wrap svg {
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -190px;
}
.notfound-wrap .message-box {
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -190px;
text-align: center;
}
}
/*
--------------------------------------- N. NOT FOUND CONTENT -----------------------------
*/
/*
--------------------------------------- O. GENERAL ALL/MORE ------------------------------
*/
.general-more-btn{position:relative;margin:0;}
.general-more-btn a{
color: var(--paragraph-color);
font-size: 1rem;
font-weight: 500;
position:relative;
z-index: 9;
/*bottom: 19px;
right: 15px;*/
display: block;
}
.general-more-btn a:before{
background-color:var(--primary-background);
border-radius:var(--circle-border-radius);
content:'';
width:22px;
height:22px;
position:absolute;
top:0;
left:0;
z-index: -1;
transition:all 300ms ease;
}
.general-more-btn a i {
color: var(--paragraph-color);
font-size:1.55rem;
line-height: .9;
vertical-align: middle;
width: 25px;
margin: 0 0 0 15px;
}
.general-more-btn a:hover{color:var(--paragraph-color);}
.general-more-btn a:hover::before {left: 15px;}
/*
--------------------------------------- O. GENERAL ALL/MORE ------------------------------
*/
/*
--------------------------------------- P. MESSAGES/IMPORT/WARNING/SUCCESS ---------------
*/
/*
*/
.notice {
background: var(--section-two-background);
font-family:var(--font-family);
border-left: 4px solid var(--border-grey-color);
margin: 1em;
padding: 1em 1em 1em 2em;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
position: relative;
}
.notice:before {
background-color: var(--object-one-background);
text-align: center;
line-height: 2rem;
font-weight: 600;
color: var(--font-white-color);
border-radius:var(--full-circle-border-radius);
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
left: -17px;
width: 30px;
height: 30px;
margin-top: -17px;
}
.notice .info {border-color: var(--notice-info);}
.notice .info:before {
content: "i";
background-color: var(--notice-info);
}
.notice .success {border-color: var(--notice-success);}
.notice .success:before {
content: "√";
background-color: var(--notice-success);
}
.notice .warning {border-color: var(--notice-warning);}
.notice .warning:before {
content: "!";
background-color: var(--notice-warning);
}
.notice .error {border-color: var(--notice-error);}
.notice .error:before {
content: "X";
background-color: var(--notice-error);
}
/*
--------------------------------------- P. MESSAGES/IMPORT/WARNING/SUCCESS ---------------
*/
/*
--------------------------------------- R. PAGINATION ------------------------------------
*/
.paginate-customize{
font-size: 1rem;
font-weight: 400;
line-height: 1.2;
color:var(--paragraph-color);
}
ul.pagination{
font: 600 1rem/1.2 var(--font-family);
list-style:none;
margin: 5px 0;
padding-left: 5px;
}
ul.pagination > li{
list-style-type:none;
margin: 5px 0;
padding-left: 5px;
float:left;
display:block;
}
ul.pagination > li > a{ border-radius:var(--object-border-radius) !important;}
ul.pagination > li > a,
ul.pagination > li > span{
color:var(--paragraph-color);
border:1px solid var(--border-grey-color);
border-radius:var(--object-border-radius) !important;
margin:0;
padding:12px 20px;
}
ul.pagination > li.page-item.active > span.page-link {
background-color: var(--primary-background);
border-color: var(--primary-border-color);
}
ul.pagination > li.previous-page > a,
ul.pagination > li.next-page > a{border-radius:var(--object-border-radius);}
ul.pagination > li.page-item > a:hover,
/*ul.pagination > li.page-item > a, */
ul.pagination > li > a:focus,
ul.pagination > li > a:hover,
ul.pagination > li > span:focus,
ul.pagination > li > span:hover{background:var(--primary-background) !important; color:var(--font-white-color); border-color:var(--primary-border-color);}
/*
--------------------------------------- R. PAGINATION ------------------------------------
*/
/*
--------------------------------------- S. HORIZONTAL/ VERTICAL TABS ---------------------
*/
.tab.tab-light{
font-family: var(--font-family);
color: var(--paragraph-color);
}
.nav.nav-tabs {
border-bottom: 1px solid var(--border-grey-color);
display: flex;
justify-content: center;
}
.tab.tab-light .nav-link {
color: var(--paragraph-color);
font-weight: 600;
font-size: .9rem;
border-top-left-radius: var(--object-border-radius);
border-top-right-radius: var(--object-border-radius);
padding: 1rem 1.2rem;
}
.tab.tab-light .nav-tabs .nav-item.show .nav-link,
.tab.tab-light .nav-tabs .nav-link.active {
color: var(--primary-color);
background-color: var(--background-white);
border-color: var(--border-grey-color) var(--border-grey-color) var(--border-white-color);
}
.tab.tab-light .tab-content {
width: 100%;
margin-top:2.5rem;
}
.tab.tab-filter{
font-family: var(--font-family);
color: var(--paragraph-color);
}
ul.nav.nav-filter-tabs li.nav-item{
text-align: center;
margin-right: .313rem;
float: none;
position: relative;
}
ul.nav.nav-filter-tabs li.nav-item:last-child{margin-right:0;}
.nav.nav-filter-tabs {
display: flex;
justify-content: center;
}
.tab.tab-filter .nav-link {
background: var(--background-white);
color: var(--primary-color);
font-weight: 500;
font-size: .9rem;
line-height: .875;
border: 1px solid transparent;
padding: .875rem 1rem;
}
.tab.tab-filter .nav-filter-tabs .nav-item.show .nav-link,
.tab.tab-filter .nav-filter-tabs .nav-link.active {
color: var(--font-white-color);
background-color: var(--primary-background);
border-color: var(--primary-border-color);
}
.tab.tab-filter .nav-filter-tabs .nav-link.active:before {
background-color:var(--primary-background);
content:"";
height:17px;
width:17px;
margin-left:-.5rem;
position:absolute;
bottom:-.5rem;
left:50%;
transform:rotate(45deg);
}
.tab.tab-filter .tab-content {
width: 100%;
margin-top:2.5rem;
}
/*
--------------------------------------- S. HORIZONTAL/ VERTICAL TABS ---------------------
*/
/*
--------------------------------------- T. GENERAL & SPECIAL WHITE FORM ------------------
*/
.special-frm{font-family: var(--font-family);}
.special-frm label {
display: inline-block;
max-width: 100%;
margin-bottom: 20px;
}
.special-frm .label {
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
text-align:left;
color:#e1e1e1;
padding:3px 2px;
margin-bottom: 5px;
display: block;
}
.special-frm .input,
.special-frm .select,
.special-frm .textarea,
.special-frm .radio,
.special-frm .checkbox{
position: relative;
display: block;
}
.special-frm .select:hover select{cursor:pointer;}
.special-frm .select select{background-color: var(--background-white) !important;color: var(--paragraph-color) !important;}
.special-frm .select i {
background: var(--background-white);
width: 5px;
height: 11px;
box-shadow: 0 0 0 5px var(--box-shadow-white-color);
position: absolute;
top: 18px;
right: 10px;
}
.special-frm .select i:after,
.special-frm .select i:before {
content: '';
border-right: 4px solid transparent;
border-left: 4px solid transparent;
position: absolute;
right: 0;
}
.special-frm .select i:after {
border-top: 4px solid #404040;
bottom: 0;
}
.special-frm .select i:before {
border-bottom: 4px solid #404040;
top: 0;
}
.special-frm .select-multiple select {height: auto;}
.special-frm .input input,
.special-frm .select select,
.special-frm .textarea textarea {
background: transparent;
color: var(--font-white-color);
font-size: 1rem;
font-weight: 400;
line-height: 1.2;
border-width: 1px;
border-style: solid;
width: 100%;
height: 45px;
padding: .5rem 1.2rem .5rem .5rem;
display: block;
outline: none;
box-sizing: border-box;
appearance: none;
}
.special-frm .input input,
.special-frm .select select,
.special-frm .textarea textarea,
.special-frm .radio i,
.special-frm .checkbox i{
border-color: var(--font-white-color);
transition: border-color 0.3s;
}
.special-frm .input:hover input,
.special-frm .select:hover select,
.special-frm .textarea:hover textarea,
.special-frm .radio:hover i,
.special-frm .checkbox:hover i{border-color: var(--primary-border-color);}
.special-frm .input input:focus,
.special-frm .select select:focus,
.special-frm .textarea textarea:focus,
.special-frm .radio input:focus + i,
.special-frm .checkbox input:focus + i{border-color: var(--primary-border-color);color: var(--primary-color);}
.special-frm .input input::-moz-placeholder,
.special-frm .select select::-moz-placeholder,
.special-frm .textarea textarea::-moz-placeholder{
color:rgba(219,219,219,1);
font-size: 1rem;
font-weight: 300;
line-height: 1.2;
}
.special-frm .input input:focus::-moz-placeholder,
.special-frm .input input:active::-moz-placeholder,
.special-frm .select select:focus::-moz-placeholder,
.special-frm .select select:active::-moz-placeholder,
.special-frm .textarea textarea:focus::-moz-placeholder,
.special-frm .textarea textarea:active::-moz-placeholder{
color:var(--font-white-color);
font-size: 1rem;
font-weight: 300;
line-height: 1.2;
}
.special-frm .radio input + i:after {background-color: var(--primary-background);}
.special-frm .checkbox input + i:after {color: var(--primary-color);}
.special-frm .radio input:checked + i,
.special-frm .checkbox input:checked + i,
.special-frm .toggle input:checked + i {border-color: var(--primary-border-color);}
.special-frm .rating input:checked ~ label {color: var(--primary-color);}
.special-frm .textarea textarea {
height: auto;
resize: none;
}
.special-frm .textarea-expandable textarea {height: 45px;}
.special-frm .textarea-expandable textarea:focus {height: auto;}
.special-frm .textarea textarea{resize: none;}
.special-frm .radio,
.special-frm .checkbox {
font-size:1rem;
line-height: 27px;
color: var(--font-white-color);
margin-bottom: 4px;
padding-left: 27px;
cursor: pointer;
}
.special-frm .radio:last-child,
.special-frm .checkbox:last-child {margin-bottom: 0;}
.special-frm .radio input,
.special-frm .checkbox input {
position: absolute;
left: -9999px;
}
.special-frm .radio i,
.special-frm .checkbox i {
background:transparent;
border-width: 1px;
border-style: solid;
border-radius:6px;
width: 17px;
height: 17px;
position: absolute;
top: 5px;
left: 0;
display: block;
outline: none;
}
.special-frm .radio i {border-radius: var(--circle-border-radius);}
.special-frm .radio input + i:after,
.special-frm .checkbox input + i:after {
position: absolute;
opacity: 0;
transition: opacity 0.1s;
}
.special-frm .radio input + i:after {
content: '';
top: 5px;
left: 5px;
width: 5px;
height: 5px;
border-radius: var(--circle-border-radius);
}
.special-frm .checkbox input + i:after {
font: normal 12px/16px FontAwesome;
text-align: center;
content: '\f00c';
top: 0;
left: 0;
width: 15px;
height: 15px;
}
.special-frm .radio input:checked + i:after,
.special-frm .checkbox input:checked + i:after {opacity: 1;}
/*.special-frm .inline-group {margin: 0 -30px 20px 0;}*/
.special-frm .inline-group:after {
content: '';
display: table;
clear: both;
}
.special-frm .inline-group .radio,
.special-frm .inline-group .checkbox {
float: left;
margin-right: 30px;
}
.special-frm .inline-group .radio:last-child,
.special-frm .inline-group .checkbox:last-child {margin-bottom: 4px;}
.special-frm .inline-group .radio, .special-frm .inline-group .checkbox{margin-top: 0;}
.special-frm .tooltip {
background: var(--secondary-background);
font-size: .8rem;
line-height: 1.4;
font-weight: 400;
color: var(--font-white-color);
border-radius:var(--object-border-radius);
position: absolute;
left: -9999px;
z-index: 1;
padding:.3rem .5rem .35rem;
opacity: 0;
transition: margin 0.3s, opacity 0.3s;
}
.special-frm .tooltip:after {
content: '';
position: absolute;
}
.special-frm .input input:focus + .tooltip,
.special-frm .textarea textarea:focus + .tooltip {opacity: 1;}
.special-frm .tooltip-top-right {
bottom: 100%;
margin-bottom: 15px;
}
.special-frm .tooltip-top-right:after {
top: 100%;
right: 16px;
border-top: 4px solid var(--border-light);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.special-frm .input input:focus + .tooltip-top-right,
.special-frm .textarea textarea:focus + .tooltip-top-right {
right: 0;
left: auto;
margin-bottom: 5px;
}
.special-frm .tooltip-top-left {
bottom: 100%;
margin-bottom: 15px;
}
.special-frm .tooltip-top-left:after {
top: 100%;
left: 16px;
border-top: 4px solid var(--border-light);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.special-frm .input input:focus + .tooltip-top-left,
.special-frm .textarea textarea:focus + .tooltip-top-left {
right: auto;
left: 0;
margin-bottom: 5px;
}
.special-frm .tooltip-right {
top: 9px;
white-space: nowrap;
margin-left: 15px;
}
.special-frm .tooltip-right:after {
top: 6px;
right: 100%;
border-top: 4px solid transparent;
border-right: 4px solid var(--border-light);
border-bottom: 4px solid transparent;
}
.special-frm .input input:focus + .tooltip-right,
.special-frm .textarea textarea:focus + .tooltip-right {
left: 100%;
margin-left: 5px;
}
.special-frm .tooltip-left {
top: 9px;
white-space: nowrap;
margin-right: 15px;
}
.special-frm .tooltip-left:after {
top: 6px;
left: 100%;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid var(--border-light);
}
.special-frm .input input:focus + .tooltip-left,
.special-frm .textarea textarea:focus + .tooltip-left {
right: 100%;
left: auto;
margin-right: 5px;
}
.special-frm .tooltip-bottom-right {
top: 100%;
margin-top: 15px;
}
.special-frm .tooltip-bottom-right:after {
bottom: 100%;
right: 16px;
border-right: 4px solid transparent;
border-bottom: 4px solid var(--border-light);
border-left: 4px solid transparent;
}
.special-frm .input input:focus + .tooltip-bottom-right,
.special-frm .textarea textarea:focus + .tooltip-bottom-right {
right: 0;
left: auto;
margin-top: 5px;
}
.special-frm .tooltip-bottom-left {
top: 100%;
margin-top: 15px;
}
.special-frm .tooltip-bottom-left:after {
bottom: 100%;
left: 16px;
border-right: 4px solid transparent;
border-bottom: 4px solid var(--border-light);
border-left: 4px solid transparent;
}
.special-frm .input input:focus + .tooltip-bottom-left,
.special-frm .textarea textarea:focus + .tooltip-bottom-left {
right: auto;
left: 0;
margin-top: 5px;
}
.general-frm {font-family: var(--font-family);}
.general-frm a.frm-link {
color: var(--primary-color);
text-decoration: none;
outline: none;
transition: all 0.3s ease-in-out;
}
.general-frm a.frm-link:hover {
color: var(--primary-dark);
transform: scale(1.05);
}
.general-frm label {
display: inline-block;
max-width: 100%;
margin-bottom: 1rem;
}
#filter-wrapper .general-frm label {margin-bottom: auto;}
.general-frm .label {
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
text-align:left;
color:#e1e1e1;
display: block;
padding:3px 2px;
margin-bottom: 5px;
}
.general-frm .input,
.general-frm .select,
.general-frm .textarea,
.general-frm .radio,
.general-frm .checkbox{
position: relative;
display: block;
}
.general-frm .input input:disabled,
.general-frm .select select:disabled,
.general-frm .textarea textarea:disabled,
.general-frm .radio radio:disabled,
.general-frm .checkbox checkbox:disabled{
background-color:var(--object-one-background);
}
.general-frm .select:hover select{cursor:pointer;}
.general-frm .select select{background-color: var(--background-white) !important;color: var(--paragraph-color) !important;}
.general-frm .select i {
background: var(--background-white);
position: absolute;
top: 20px;
right: 10px;
width: 5px;
height: 11px;
box-shadow: 0 0 0 5px var(--box-shadow-white-color);
}
.general-frm .select i:after,
.general-frm .select i:before {
content: '';
position: absolute;
right: 0;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.general-frm .select i:after {
bottom: 0;
border-top: 4px solid #404040;
}
.general-frm .select i:before {
top: 0;
border-bottom: 4px solid #404040;
}
.general-frm .select-multiple select {height: auto;}
.general-frm .input input,
.general-frm .select select,
.general-frm .textarea textarea {
background: transparent;
font-size: 1rem;
font-weight: 400;
line-height: 1.2;
color: var(--paragraph-color);
border-width: 1px;
border-style: solid;
width: 100%;
height: 48px;
padding: .5rem 1.2rem .5rem .5rem;
display: block;
box-sizing: border-box;
outline: none;
appearance: none;
}
.general-frm .input input,
.general-frm .select select,
.general-frm .textarea textarea,
.general-frm .radio i,
.general-frm .checkbox i{
border-color: var(--border-grey-color);
transition: border-color 0.3s;
}
.general-frm .input:hover input,
.general-frm .select:hover select,
.general-frm .textarea:hover textarea,
.general-frm .radio:hover i,
.general-frm .checkbox:hover i{border-color: var(--primary-border-color);}
.general-frm .input input:focus,
.general-frm .select select:focus,
.general-frm .textarea textarea:focus,
.general-frm .radio input:focus + i,
.general-frm .checkbox input:focus + i{border-color: var(--primary-border-color);}
.general-frm .input input::-moz-placeholder,
.general-frm .select select::-moz-placeholder,
.general-frm .textarea textarea::-moz-placeholder{
color:rgba(138,148,164);
font-size: 1rem;
font-weight: 300;
line-height: 1.2;
opacity: 1;
}
.general-frm .input input:focus::-moz-placeholder,
.general-frm .input input:active::-moz-placeholder,
.general-frm .select select:focus::-moz-placeholder,
.general-frm .select select:active::-moz-placeholder,
.general-frm .textarea textarea:focus::-moz-placeholder,
.general-frm .textarea textarea:active::-moz-placeholder{
color:rgba(138,148,164);
font-size: 1rem;
font-weight: 300;
line-height: 1.2;
}
.general-frm .radio input + i:after {background-color: var(--primary-background);}
.general-frm .checkbox input + i:after {color: var(--primary-color);}
.general-frm .radio input:checked + i,
.general-frm .checkbox input:checked + i,
.general-frm .toggle input:checked + i {border-color: var(--primary-border-color);}
.general-frm .rating input:checked ~ label {color: var(--primary-color);}
.general-frm .textarea textarea {
height: auto;
resize: none;
}
.general-frm .textarea-expandable textarea {height: 48px;}
.general-frm .textarea-expandable textarea:focus {height: auto;}
.general-frm .textarea textarea{resize: none;}
.general-frm .radio,
.general-frm .checkbox {
/*margin-bottom: 4px;*/
padding-left: 27px;
font-size: 1rem;
font-weight: 300;
line-height: 27px;
color: #7b7f99;
cursor: pointer;
}
/*.general-frm .radio:last-child,
.general-frm .checkbox:last-child {margin-bottom: 0;}*/
.general-frm .radio input,
.general-frm .checkbox input {
position: absolute;
left: -9999px;
}
.general-frm .radio i,
.general-frm .checkbox i {
background: var(--background-white);
border-width: 1px;
border-style: solid;
width: 17px;
height: 17px;
position: absolute;
top: 5px;
left: 0;
display: block;
outline: none;
}
.general-frm .radio i {border-radius: var(--circle-border-radius);}
.general-frm .radio input + i:after,
.general-frm .checkbox input + i:after {
position: absolute;
opacity: 0;
transition: opacity 0.1s;
}
.general-frm .radio input + i:after {
content: '';
top: 5px;
left: 5px;
width: 5px;
height: 5px;
border-radius: var(--circle-border-radius);
}
.general-frm .checkbox input + i:after {
font: normal 12px/16px FontAwesome;
text-align: center;
content: '\f00c';
top: 0;
left: 0;
width: 15px;
height: 15px;
}
.general-frm .radio input:checked + i:after,
.general-frm .checkbox input:checked + i:after {opacity: 1;}
.general-frm .inline-group:after {
content: '';
display: table;
clear: both;
}
.general-frm .inline-group .radio,
.general-frm .inline-group .checkbox {
float: left;
margin-right: 30px;
}
.general-frm .inline-group .radio,
.general-frm .inline-group .checkbox{margin-top: 0;}
.general-frm .tooltip {
background: var(--secondary-background);
font-size: .8rem;
line-height: 1.4;
font-weight: 400;
color: var(--font-white-color);
border-radius: var(--object-border-radius);
padding:.3rem .75rem .35rem;
position: absolute;
left: -9999px;
z-index: 1;
opacity: 0;
transition: margin 0.3s, opacity 0.3s;
}
.general-frm .tooltip:after {
content: '';
position: absolute;
}
.general-frm .input input:focus + .tooltip,
.general-frm .checkbox input:focus .tooltip,
.general-frm .textarea textarea:focus + .tooltip {opacity: 1;}
.general-frm .tooltip-top-right {
bottom: 100%;
margin-bottom: 15px;
}
.general-frm .tooltip-top-right:after {
top: 100%;
right: 16px;
border-top: 4px solid rgba(0,0,0,0.9);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.general-frm .input input:focus + .tooltip-top-right,
.general-frm .checkbox input:focus .tooltip-top-right,
.general-frm .textarea textarea:focus + .tooltip-top-right {
right: 0;
left: auto;
margin-bottom: 5px;
}
.general-frm .tooltip-top-left {
bottom: 100%;
margin-bottom: 15px;
}
.general-frm .tooltip-top-left:after {
top: 100%;
left: 16px;
border-top: 4px solid rgba(0,0,0,0.9);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.general-frm .input input:focus + .tooltip-top-left,
.general-frm .checkbox input:focus .tooltip-top-left,
.general-frm .textarea textarea:focus + .tooltip-top-left {
right: auto;
left: 0;
margin-bottom: 5px;
}
.general-frm .tooltip-right {
top: 9px;
white-space: nowrap;
margin-left: 15px;
}
.general-frm .tooltip-right:after {
top: 6px;
right: 100%;
border-top: 4px solid transparent;
border-right: 4px solid rgba(0,0,0,0.9);
border-bottom: 4px solid transparent;
}
.general-frm .input input:focus + .tooltip-right,
.general-frm .checkbox input:focus .tooltip-right,
.general-frm .textarea textarea:focus + .tooltip-right {
left: 100%;
margin-left: 5px;
}
.general-frm .tooltip-left {
top: 9px;
white-space: nowrap;
margin-right: 15px;
}
.general-frm .tooltip-left:after {
top: 6px;
left: 100%;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid var(--border-light);
}
.general-frm .input input:focus + .tooltip-left,
.general-frm .checkbox input:focus .tooltip-left,
.general-frm .textarea textarea:focus + .tooltip-left {
right: 100%;
left: auto;
margin-right: 5px;
}
.general-frm .tooltip-bottom-right {
top: 100%;
margin-top: 15px;
}
.general-frm .tooltip-bottom-right:after {
bottom: 100%;
right: 16px;
border-right: 4px solid transparent;
border-bottom: 4px solid var(--border-light);
border-left: 4px solid transparent;
}
.general-frm .input input:focus + .tooltip-bottom-right,
.general-frm .checkbox input:focus .tooltip-bottom-right,
.general-frm .textarea textarea:focus + .tooltip-bottom-right {
right: 0;
left: auto;
margin-top: 5px;
}
.general-frm .tooltip-bottom-left {
top: 100%;
margin-top: 15px;
}
.general-frm .tooltip-bottom-left:after {
bottom: 100%;
left: 16px;
border-right: 4px solid transparent;
border-bottom: 4px solid rgba(0,0,0,0.9);
border-left: 4px solid transparent;
}
.general-frm .input input:focus + .tooltip-bottom-left,
.general-frm .checkbox input:focus .tooltip-bottom-left,
.general-frm .textarea textarea:focus + .tooltip-bottom-left {
right: auto;
left: 0;
margin-top: 5px;
}
.general-frm .radio a,
.general-frm .radio u,
.general-frm .checkbox a,
.general-frm .checkbox u{color: var(--primary-color);text-decoration: none;}
.general-frm [class^="icon-"] {
font-family: FontAwesome,sans-serif;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.general-frm .icon-append,
.general-frm .icon-prepend {
position: absolute;
top: 7px;
width: 36px;
height: 36px;
font-size: 1rem;
line-height: 36px;
text-align: center;
}
.general-frm .icon-append {
right: 5px;
padding-left: 3px;
border-left-width: 1px;
border-left-style: solid;
}
.general-frm .icon-prepend {
left: 5px;
padding-right: 3px;
border-right-width: 1px;
border-right-style: solid;
}
.general-frm .input .icon-prepend + input,
.general-frm .textarea .icon-prepend + textarea {padding-left: 46px;}
.general-frm .input .icon-append + input,
.general-frm .textarea .icon-append + textarea {padding-right: 46px;}
.general-frm .input .icon-prepend + .icon-append + input,
.general-frm .textarea .icon-prepend + .icon-append + textarea {padding-left: 46px;}
.general-frm .input input,
.general-frm .select select,
.general-frm .textarea textarea,
.general-frm .radio i,
.general-frm .checkbox i,
.general-frm .toggle i,
.general-frm .icon-append,
.general-frm .icon-prepend {
border-color: var(--border-grey-color);
transition: border-color 0.3s;
}
.general-frm .toggle i:before {background-color: var(--primary-background);}
.general-frm .rating label {
color: var(--object-one-color);
transition: color 0.3s;
}
/*.general-frm .button {
background-color: var(--primary-background);
opacity: 0.8;
transition: opacity 0.2s;
}
.general-frm .button.button-secondary {background-color: #b3b3b3;}*/
.general-frm .icon-append,
.general-frm .icon-prepend {color:#aeb3c6;}
/*
--------------------------------------- T. GENERAL & SPECIAL WHITE FORM ------------------
*/
/*
--------------------------------------- U. TABLES ----------------------------------------
*/
.table > thead > tr > th,
.table.table-striped > thead > tr > th,
.table.table-bordered > thead > tr > th,
.table.table-hover > thead > tr > th{
font: 600 1rem/1.2 var(--font-family);
color: var(--paragraph-color);
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table.table-striped > thead > tr > th,
.table.table-striped > tbody > tr > th,
.table.table-striped > tfoot > tr > th,
.table.table-striped > thead > tr > td,
.table.table-striped > tbody > tr > td,
.table.table-striped > tfoot > tr > td,
.table.table-bordered > thead > tr > th,
.table.table-bordered > tbody > tr > th,
.table.table-bordered > tfoot > tr > th,
.table.table-bordered > thead > tr > td,
.table.table-bordered > tbody > tr > td,
.table.table-bordered > tfoot > tr > td,
.table.table-hover > thead > tr > th,
.table.table-hover > tbody > tr > th,
.table.table-hover > tfoot > tr > th,
.table.table-hover > thead > tr > td,
.table.table-hover > tbody > tr > td,
.table.table-hover > tfoot > tr > td{
border-top: 1px solid var(--border-grey-color);
color: var(--paragraph-color);
}
.table-benefse {
background: var(--background-white);
text-align: left;
border-collapse: collapse;
width: 100%;
min-width: 526px;
max-width: 100%;
}
.table-benefse th,
.table-benefse td {
color: var(--paragraph-color);
background: var(--background-white);
}
.table-benefse th {
background: var(--object-one-background);
font-size: 14px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: 15px 14px;
}
@media (max-width:991.98px) {
.table-benefse th {
padding-top: 20px;
padding-bottom: 20px;
}
}
.table-benefse td {
padding: 15px 14px;
}
.table-benefse tbody tr:first-child td {
border-top: 0;
}
.table-benefse tr td {
border-bottom: 1px solid var(--border-grey-color);
}
.table-benefse tfoot td {
font-weight: 700;
}
.table-benefse-secondary th {
color: var(--primary-color);
background-color: #292929;
}
* + .table-benefse-responsive {
margin-top: 30px;
}
@media (min-width: 768px) {
* + .table-benefse-responsive {
margin-top: 40px;
}
}
.table-benefse.table-benefse-primary thead th {
color: var(--font-white-color);
background: var(--primary-background);
border: 0;
}
.table-benefse.table-benefse-primary tbody tr:hover td {
background: #f2f3f8;
}
.table-benefse.table-benefse-bordered tr td:first-child {
border-left: 0;
}
.table-benefse.table-benefse-bordered tr td:last-child {
border-right: 0;
}
.table-benefse.table-benefse-bordered td {
border: 1px solid var(--border-grey-color);
}
.table-benefse.table-benefse-bordered tbody > tr:first-of-type > td {
border-top: 0;
}
.table-benefse.table-benefse-striped {
border-bottom: 1px solid #d9d9d9;
}
.table-benefse.table-benefse-striped tbody tr:nth-of-type(odd) td {
background: transparent;
}
.table-benefse.table-benefse-striped tbody tr:nth-of-type(even) td {
background: #f2f3f8;
}
.table-benefse.table-benefse-striped tbody td {
border: 0;
}
.table-benefse.table-benefse-striped tfoot td:not(:first-child) {
border-left: 0;
}
@media (max-width:991.98px) {
.table-benefse-responsive {
display: block;
width: 100%;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-benefse-responsive.table-bordered {
border: 0;
}
}
/*
--------------------------------------- U. TABLES ----------------------------------------
*/
/*
--------------------------------------- V. PROGRESS BAR ----------------------------------
*/
.show-list{ position:relative; top:25px;}
#Survey label{ white-space:normal;}
#Survey .inline-group .radio{ float:none;}
.bg-bar,
.bg-bar-one,
.bg-bar-two,
.bg-bar-three{
background-color:var(--object-one-background);
width:100%;
height:10px;
margin:15px 0;
display:inline-block;
}
.bg-bar-one {border-radius: 3px;}
.bg-bar-two {border-radius: 6px;}
.bg-bar-three {border-radius: 6px; height: 12px;}
.progress-bar,
.progress-bar-one,
.progress-bar-two,
.progress-bar-three{
background:var(--flickr);
height:100%;
padding:0;
box-shadow:none;
transition: width .8s ease;
}
.progress-bar-one {border-radius: 3px; background: var(--yahoo); float: left;}
.progress-bar-two {border-radius: 6px; background: var(--blogger); float: left;}
.progress-bar-three {border-radius: 6px; background: var(--xing); float: left;}
.progress-title{
font: 400 13px/22px var(--font-family);
color:var(--paragraph-color);
position:absolute;
text-align:left;
margin-left:0;
margin-top:-28px;
}
.progress-title > i{margin-right:8px;}
.progress-number,
.progress-type{
font-size: 1rem;
font-weight: 500;
color:var(--paragraph-color);
line-height: 1.2;
float:right;
margin-top:-18px;
position:relative;
top:-10px;
}
/*
--------------------------------------- V. PROGRESS BAR ----------------------------------
*/
/*
--------------------------------------- Y. SLIDER GROUP ----------------------------------
*/
#headline-wrapper{
border-bottom: 4px solid var(--primary-border-color);
margin:0 0 3rem 0;
position: relative;
}
#headline-wrapper.attention {overflow: hidden;}
.ssb{
padding:470px 0;
max-height: 620px;
background-size: cover !important;
background-position: center !important;
/*display: flex;
align-items: center;
position: relative;*/
}
/* =======
* RESETS
* =======*/
.flex-container a:hover,
.flex-slider a:hover {outline: none;}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flex-pauseplay span {text-transform: capitalize;}
/* ===========
* BASE STYLES
* ===========*/
.single-point,
.single1x,
.single2x,
.multiple3x,
.multiple3xs,
.multiple4x,
.multiple5x{
margin: 0;
padding: 0;
}
.single-point .slides > li,
.single1x .slides > li,
.single2x .slides > li,
.multiple3x .slides > li,
.multiple3xs .slides > li,
.multiple4x .slides > li,
.multiple5x .slides >li{
display: none;
-webkit-backface-visibility: hidden;
}
.single-point .slides img,
.single1x .slides img,
.single2x .slides img,
.multiple3x .slides img,
.multiple3xs .slides img,
.multiple4x .slides img,
.multiple5x .slides img{
width: 100%;
display: block;
}
.single-point .slides:after,
.single1x .slides:after,
.single2x .slides:after,
.multiple3x .slides:after,
.multiple3xs .slides:after,
.multiple4x .slides:after,
.multiple5x .slides:after{
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .single-point .slides,
html[xmlns] .single1x .slides,
html[xmlns] .single2x .slides,
html[xmlns] .multiple3x .slides,
html[xmlns] .multiple3xs .slides,
html[xmlns] .multiple4x .slides,
html[xmlns] .multiple5x .slides{display: block;}
* html .single-point .slides,
* html .single1x .slides,
* html .single2x .slides,
* html .multiple3x .slides,
* html .multiple3xs .slides,
* html .multiple4x .slides,
* html .multiple5x .slides{height: 1%;}
.no-js .single-point .slides > li:first-child,
.no-js .single1x .slides > li:first-child,
.no-js .single2x .slides > li:first-child,
.no-js .multiple3x .slides > li:first-child,
.no-js .multiple3xs .slides > li:first-child,
.no-js .multiple4x .slides > li:first-child,
.no-js .multiple5x .slides > li:first-child{display: block;}
/* =============
* DEFAULT THEME
* =============*/
.single-point,
.single1x,
.single2x,
.multiple3x,
.multiple3xs,
.multiple4x,
.multiple5x{
margin: 0;
position: relative;
zoom: 1;
}
.single-point .slides,
.single1x .slides,
.single2x .slides,
.multiple3x .slides,
.multiple3xs .slides,
.multiple4x .slides,
.multiple5x .slides{zoom: 1;}
.single-point .slides img,
.single1x .slides img,
.single2x .slides img,
.multiple3x .slides img,
.multiple3xs .slides img,
.multiple4x .slides img,
.multiple5x .slides img{
height: auto;
-moz-user-select: none;
}
.flex-viewport {
max-height: 2020307px;
transition: all 1s ease;
}
.loading .flex-viewport {max-height: 300px;}
@-moz-document url-prefix() {.loading .flex-viewport {max-height: none;}}
.carousel li {margin-right: 5px;}
.flex-direction-nav {height: 0;}
.flex-direction-nav a {
background: var(--background-white);
text-align: center;
color: var(--secondary-color);
width: 45px;
height: 45px;
line-height: 45px;
margin: -20px 0 0;
border: 1px solid rgba(235,234,234,0);
border-radius: var(--object-border-radius);
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
display: block;
cursor: pointer;
transition: all .3s ease;
}
.flex-direction-nav a:before {
font-family: "Font Awesome 5 Pro", serif;
font-weight: lighter;
font-size: 1.5rem;
display: inline-block;
content: '\f104';
}
.flex-direction-nav a.flex-next:before {content: '\f105';}
.flex-direction-nav .flex-prev {left: -50px;}
.flex-direction-nav .flex-next {right: -50px;}
.flex-direction-nav .flex-disabled {
opacity: 0 !important;
filter: alpha(opacity=0);
cursor: default;
z-index: -1;
}
.flex-pauseplay a {
color: var(--paragraph-color);
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
}
.flex-pauseplay a:before {
font-family: "flexslider-icon", serif;
font-size: 20px;
display: inline-block;
content: '\f004';
}
.flex-pauseplay a:hover {opacity: 1;}
.flex-pauseplay a.flex-play:before {content: '\f003';}
.single1x .flex-control-nav,
.single2x .flex-control-nav,
.single-point .flex-control-nav,
.multiple3x .flex-control-nav,
.multiple3xs .flex-control-nav,
.multiple4x .flex-control-nav,
.multiple5x .flex-control-nav{
width: 100%;
position: absolute;
bottom: 0.37rem;
text-align: center;
z-index: 9;
}
.flex-control-nav li {
margin: 0 .3rem;
zoom: 1;
*display: inline;
display: inline-block;
}
.flex-control-paging li a {
background-color: transparent;
color: var(--font-white-color);
cursor: pointer;
text-indent: -9999px;
width: 45px;
height: 6px;
display: block;
border: 1px solid var(--border-grey-color);
position: relative;
transition: all 0.3s ease-in-out;
}
.flex-control-paging li a::after{
background:none;
content: "";
position: absolute;
width: 45px;
height: 6px;
left:-1px;
top:-1px;
margin-left:0;
margin-top:0;
transition: all 0.2s ease;
}
.flex-control-paging li a.flex-active {
background-color:var(--primary-background);
border: 1px solid var(--primary-border-color);
width: 60px;
}
.flex-control-paging li a:hover {
background-color:var(--primary-background);
border: 1px solid var(--primary-border-color);
}
.flex-control-paging li a.flex-active:hover::after{width: 60px;}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: .7;
cursor: pointer;
-moz-user-select: none;
transition: all 1s ease;
}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
/*------------------------------------- SINGLE 1X */
.single1x .flex-direction-nav a{
background-color:transparent;
text-shadow:none;
box-shadow:none;
text-align: center;
color:var(--font-white-color);
line-height:45px;
border: 1px solid var(--slide-color);
border-radius:0;
width: 45px;
height: 45px;
margin: -20px 0 0;
position: absolute;
top:inherit;
bottom:.75rem;
z-index: 10;
overflow: visible;
opacity:1;
display: block;
cursor: pointer;
transition: all .3s ease;
}
.single1x ul.slides li{position: relative;}
.single1x ul.slides > li::before{
content: "";
background:var(--slide-background);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/*.single1x .flex-viewport {border-radius:var(--object-border-radius);}*/
.single1x .flex-caption {
font-family: var(--font-family);
color: var(--font-white-color);
text-align: left;
width: 100%;
padding: 0 1rem;
position: absolute;
left: 0;
bottom: 20%;
}
.slide-info{max-width: 675px;margin-left: auto;margin-right: auto;text-align: center;}
.slide-info.left-side{margin-left: auto; margin-right: initial; text-align: right;}
.slide-info.right-side{margin-right: auto; margin-left: initial; text-align:left;}
.single1x .flex-caption h2{
font-weight:500;
font-size: 1.7rem;
line-height: 1.2;
color: var(--font-white-color);
text-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
margin: 0;
padding-bottom:.5rem;
}
.single1x .line-circle {
background:transparent;
height: 6px;
width: 25px;
margin: 7px auto 10px;
border: 1px solid var(--border-white-color);
border-radius:var(--object-border-radius);
position: relative;
}
.single1x .line-circle:before {
content: "";
position: absolute;
height: 2px;
width: 50px;
left: -57px;
top: 1px;
background: var(--background-white);
border-radius: var(--object-border-radius);
}
.single1x .line-circle:after {
content: "";
position: absolute;
height: 2px;
width: 50px;
right: -57px;
top: 1px;
background: var(--background-white);
border-radius: var(--object-border-radius);
}
.single1x .flex-caption h3{
font-weight:600;
font-size: 2.5rem;
line-height: 1.2;
color: var(--font-white-color);
margin: 0;
padding-bottom:1rem;
text-shadow: 2px 2px 3px rgb(0 0 0 /50%);
}
.single1x .flex-caption p{
font-weight: 400;
font-size: 1.2rem;
line-height:1.4;
color: var(--font-white-color);
text-shadow: 2px 2px 3px rgb(0 0 0 / 70%);
margin: 0;
padding: 0 0 1rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.single1x .flex-caption p+p {margin-bottom: 0;}
.single1x .flex-direction-nav .flex-prev {
right: 4.8rem;
left: inherit;
border-top-left-radius: var(--object-two-border-radius);
border-bottom-left-radius: var(--object-two-border-radius);
}
.single1x:hover .flex-direction-nav .flex-prev{
opacity: 1;
right: 4.8rem;
}
.single1x .flex-direction-nav .flex-next {
right:2rem;
border-top-right-radius: var(--object-two-border-radius);
border-bottom-right-radius: var(--object-two-border-radius);
}
.single1x:hover .flex-direction-nav .flex-next{
opacity: 1;
right: 2rem;
}
.single1x:hover .flex-direction-nav .flex-next:hover,
.single1x:hover .flex-direction-nav .flex-prev:hover{
background-color:var(--primary-background);
border-color:var(--primary-border-color);
opacity: 1;
}
.single1x .flex-control-nav{
/*background:var(--secondary-rgba05-color);
border-radius:24px;
width:50px;*/
height: fit-content;
padding: 5px 0;
position: absolute;
bottom:12%;
z-index: 9;
}
.single1x .flex-control-paging li a {
background-color:transparent;
color:var(--font-white-color);
line-height:6px;
text-indent:-9999px;
border: 1px solid var(--slide-color);
width:45px;
height:6px;
display: block;
cursor: pointer;
position: relative;
transition: all 0.3s ease-in-out;
}
.single1x .flex-control-paging li a::after {
background: none;
content: "";
width:45px;
height:6px;
position: absolute;
top:-1px;
left:-1px;
margin-left: 0;
margin-top: 0;
transition: all 0.2s ease;
}
.single1x .flex-control-paging li a:hover {
background-color:var(--primary-background);
color:var(--font-white-color);
border: 1px solid var(--primary-border-color);
}
.single1x .flex-control-paging li a.flex-active {
background-color:var(--primary-background);
border: 1px solid var(--primary-border-color);
width: 60px;
}
.single1x .flex-control-paging li a.flex-active::after,
.single1x .flex-control-paging li a:hover::after{background: none;}
.single1x .flex-control-nav li {margin:0 .3rem;}
/*------------------------------------- SINGLE 2X */
.single2x{
background-color: transparent!important;
padding-bottom: 3.1rem;
box-shadow: none;
}
.single2x .flex-direction-nav a{
color: var(--object-one-color);
border: 1px solid var(--border-grey-color);
width: 45px;
height: 45px;
line-height: 45px;
bottom: 0;
top: inherit;
opacity: 1;
}
.single2x .flex-direction-nav .flex-prev{left: 15px;}
.single2x .flex-direction-nav .flex-next{right: 15px;}
.single2x:hover .flex-direction-nav .flex-next:hover,
.single2x:hover .flex-direction-nav .flex-prev:hover{
background-color: var(--primary-background);
border-color: var(--primary-border-color);
opacity: 1;
}
.single2x:hover .flex-direction-nav .flex-prev:hover:before,
.single2x:hover .flex-direction-nav .flex-next:hover:before{color: var(--font-white-color);}
/*------------------------------------- SINGLE 3X */
#news-wrapper .multiple3x{padding-bottom: 3.1rem;}
.multiple3x{padding-bottom: 4rem;box-shadow: none;}
.multiple3x .flex-direction-nav a{
color:var(--object-one-color);
border: 1px solid var(--border-grey-color);
border-radius: 0;
width: 45px;
height: 45px;
line-height: 45px;
bottom: 0;
top: inherit;
opacity: 1;
}
.multiple3x .flex-direction-nav .flex-prev{
left:inherit;
right: 4.8rem;
border-top-left-radius: var(--object-two-border-radius);
border-bottom-left-radius: var(--object-two-border-radius);
}
.multiple3x .flex-direction-nav .flex-next{
right: 2rem;
border-top-right-radius: var(--object-two-border-radius);
border-bottom-right-radius: var(--object-two-border-radius);
}
.multiple3x:hover .flex-direction-nav .flex-next:hover,
.multiple3x:hover .flex-direction-nav .flex-prev:hover{
background-color: var(--primary-background);
border-color: var(--primary-border-color);
opacity: 1;
}
.multiple3x:hover .flex-direction-nav .flex-prev:hover:before,
.multiple3x:hover .flex-direction-nav .flex-next:hover:before{color: var(--font-white-color);}
/*------------------------------------- SINGLE 3XS */
#news-wrapper .multiple3xs{padding-bottom: 3.1rem;}
.multiple3xs{padding-bottom: 4rem;box-shadow: none;}
.multiple3xs .flex-direction-nav a{
color: var(--object-one-color);
border: 1px solid var(--border-grey-color);
width: 45px;
height: 45px;
line-height: 45px;
bottom: 0;
top: inherit;
opacity: 1;
}
.multiple3xs .flex-direction-nav .flex-prev{left: 15px;}
.multiple3xs .flex-direction-nav .flex-next{right: 15px;}
.multiple3xs:hover .flex-direction-nav .flex-next:hover,
.multiple3xs:hover .flex-direction-nav .flex-prev:hover{
background-color: var(--primary-background);
border-color: var(--primary-border-color);
opacity: 1;
}
.multiple3xs:hover .flex-direction-nav .flex-prev:hover:before,
.multiple3xs:hover .flex-direction-nav .flex-next:hover:before{color: var(--font-white-color);}
/*------------------------------------- SINGLE 4X */
.multiple4x{padding-bottom: 4rem;box-shadow: none;display: flex;align-items: center;justify-content: center;}
.multiple4x .flex-direction-nav a{
color:var(--object-one-color);
border: 1px solid var(--border-grey-color);
border-radius: 0;
width: 45px;
height: 45px;
line-height: 45px;
bottom: 0;
top: inherit;
opacity: 1;
}
.multiple4x .flex-direction-nav .flex-prev{
left:inherit;
right: 4.8rem;
border-top-left-radius: var(--object-two-border-radius);
border-bottom-left-radius: var(--object-two-border-radius);
}
.multiple4x .flex-direction-nav .flex-next{
right: 2rem;
border-top-right-radius: var(--object-two-border-radius);
border-bottom-right-radius: var(--object-two-border-radius);
}
.multiple4x:hover .flex-direction-nav .flex-next:hover,
.multiple4x:hover .flex-direction-nav .flex-prev:hover{
background-color: var(--primary-background);
border-color: var(--primary-border-color);
opacity: 1;
}
.multiple4x:hover .flex-direction-nav .flex-prev:hover:before,
.multiple4x:hover .flex-direction-nav .flex-next:hover:before{color: var(--font-white-color);}
/*------------------------------------- SINGLE 5X */
.multiple5x:hover .flex-direction-nav .flex-prev{
opacity: 0.7;
left: 20px;
}
.multiple5x:hover .flex-direction-nav .flex-next{
opacity: 0.7;
right: 20px;
}
.multiple5x:hover .flex-direction-nav .flex-next:hover,
.multiple5x:hover .flex-direction-nav .flex-prev:hover{opacity: 1;}
/*------------------------------------- SINGLE POINT */
.single-point{padding-bottom:3rem;box-shadow: none;}
.single-point .flex-direction-nav a{
color: var(--object-one-color);
border: 1px solid var(--border-grey-color);
width: 45px;
height: 45px;
line-height: 45px;
bottom: 0;
top: inherit;
opacity: 1;
}
.single-point .flex-control-paging li a.flex-active::after,
.single-point .flex-control-paging li a:hover::after{background-color: var(--primary-background);}
.single-point .flex-control-paging li a:hover,
.single-point .flex-control-paging li a.flex-active{border-color: var(--primary-border-color);}
.single-point .flex-direction-nav .flex-prev{left: 15px;}
.single-point .flex-direction-nav .flex-next{right: 15px;}
.single-point:hover .flex-direction-nav .flex-next:hover,
.single-point:hover .flex-direction-nav .flex-prev:hover{
background-color: var(--primary-background);
border-color: var(--primary-border-color);
opacity: 1;
}
.single-point:hover .flex-direction-nav .flex-prev:hover:before,
.single-point:hover .flex-direction-nav .flex-next:hover:before{color: var(--font-white-color);}
/*------------------------------------- HEADLINE THUMB */
/*------------------------------------- HEADLINE ICONS */
/*------------------------------------- HEADLINE ICONS */
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
opacity: 1;
left: 10px;
}
.flex-direction-nav .flex-next {
opacity: 1;
right: 10px;
}
}
/*
--------------------------------------- Y. SLIDER GROUP ----------------------------------
*/
/*=================================================
END OF GENERAL
===================================================*/
/*=================================================
3. HEADER
===================================================*/
#header-wrapper{
width: 100%;
padding: 0;
position:absolute;
z-index: 9999;
}
.topbar-area{
background:var(--primary-background);
border-bottom: 1px solid var(--white-06-opacity);
padding:.75rem 0;
}
.bottombar-area{
background:none;
padding: .5rem 0;
}
/*
--------------------------------------- A. TOP INFO --------------------------------------
*/
ul.topbar-contact {}
ul.topbar-contact li {
color: var(--font-white-color);
font-size: 1rem;
list-style:none;
display:inline-block;
position:relative;
padding:0;
transition: all 0.3s ease-in-out;
}
ul.topbar-contact li:hover,
ul.topbar-contact li:hover i,
ul.topbar-contact li:hover a i,
ul.topbar-contact li:hover a{color:var(--font-muted-white-color);}
ul.topbar-contact li + li{padding-left:1rem;}
ul.topbar-contact li a {color: var(--font-white-color);}
ul.topbar-contact li i {
background: var(--primary-light);
font-size:1rem;
color:var(--font-white-color);
line-height: 34px;
text-align: center;
width: 34px;
height: 34px;
margin-right:.5rem;
transition: all 0.3s ease-in-out;
}
ul.other-menu{
margin: 0;
padding: 0;
list-style: none;
float: right;
}
ul.other-menu li a {
font-family: var(--font-family);
font-weight: 400;
font-size: 1rem;
line-height: 2;
color: var(--font-white-color);
display: inline-block;
}
ul.other-menu li a:hover,
ul.other-menu li a:not(:first-child):hover::before{color: var(--font-muted-white-color);}
ul.other-menu li a i {
font-size: 1rem;
margin-right: .25rem;
}
ul.other-menu li a + a::before {
content: "|";
display: inline-block;
color:var(--font-white-color);
padding:0 .375rem 0 .5rem;
transition: 0.3s ease-in-out;
}
/*
--------------------------------------- A. TOP INFO --------------------------------------
*/
/*
--------------------------------------- B. HELP CENTER -----------------------------------
*/
.help-item {
display: flex;
align-items: center;
min-height: 8.5rem;
}
.help-item:hover .icon,
.help-item:hover .icon i,
.help-item:hover .content h5,
.help-item:hover .content p{transition: all 0.7s ease;}
.help-item .icon {
font-size: 2rem;
color: var(--secondary-color);
line-height: 85px;
text-align: center;
border: 1px dashed var(--border-grey-color);
border-radius: var(--circle-border-radius);
width: 85px;
height: 85px;
margin-right: 1rem;
flex: 0 0 85px;
}
.help-item:hover .icon{border-color: var(--primary-border-color);}
.help-item:hover .icon i{color: var(--tertiary-color);}
.help-item:hover .content h5 {color: var(--primary-color);}
.help-item:hover .content p {color:var(--tertiary-color);}
.help-item .content {flex-grow: 1;}
.help-item .content h5 {
font-size:1.2rem;
color:var(--secondary-color);
font-weight: 500;
margin-bottom: .5rem;
}
.help-item .content p {
font-size:1rem;
color: var(--paragraph-gray-color);
line-height: 1.4;
font-weight: 400;
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;
}
/*
--------------------------------------- B. HELP CENTER -----------------------------------
*/
/*
--------------------------------------- C. MENU & LOGO -----------------------------------
*/
.site-logo{
display: inline-block;
z-index: 999;
}
.site-logo img {
height: auto;
float: left;
}
.site-logo img:last-child{display: none}
.bg-menu{
background-color:transparent;
position: relative;
z-index: 999;
height: auto !important;
display: flex !important;
animation: slide-down 0.7s;
}
.mn-fix{
background:var(--background-white) none repeat scroll 0 0;
box-shadow: 0 9px 38px rgb(0 0 0 / 5%), 0 5px 12px rgb(0 0 0 / 10%);
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1020;
}
.menu-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
/*max-height: 70px;*/
}
.header-item-left {
display: flex;
-webkit-box-flex: 0;
flex: 0 0 21%;
}
.head-menu{position: relative;}
.menu-section{font-family: var(--font-family);list-style: none;margin: 0;padding: 0;}
.header-item-center {
display: flex;
justify-content: end;
-webkit-box-flex: 0;
flex: 1 1 auto !important;
}
.fixed-add{
background:var(--background-white) none repeat scroll 0 0;
position: fixed !important;
top: 0;
right: 0;
left: 0;
box-shadow: 0 9px 38px rgba(0,0,0,.05),0 5px 12px rgba(0,0,0,.1);
}
.header-item-right {
display: flex;
flex: 0 0 23%;
align-items: center;
justify-content: flex-end;
}
/*.header-item-right .menu-icon {
font-size: 1.35rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-left: 1rem;
border: none;
outline: none;
color: #232323;
transition: all 0.3s ease;
}*/
.head-menu > ul > li {
display: inline-block;
line-height: 5.5rem;
margin-left: .5rem;
}
.head-menu > ul > li:first-child{margin-left: 0;}
.head-menu > ul > li > a {
position: relative;
color:var(--font-white-color);
font-size:1.125rem;
font-weight: 500;
line-height: 1.25;
letter-spacing: 1px;
border: none;
outline: none;
text-transform: capitalize;
text-rendering: optimizeLegibility;
transition: all 0.5s ease-in-out;
}
.head-menu > ul > li > a:before {
background-color: var(--background-white);
content: '';
width: 10px;
height: 3px;
border-radius:var(--object-border-radius);
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(50%) scale(1, 0);
transition: transform .4s ease;
transform-origin: left center;
}
@media (max-width: 1199px) {
.head-menu > ul > li > a:before {
display: none;
}
}
.head-menu > ul > li.active > a:before,
.head-menu > ul > li:hover > a:before {
background-color: var(--primary-background);
transform: translateX(-50%) scale(1, 1);
transform-origin: right center;
}
.header-bottom.fixed-add .head-menu > ul > li.active > a:before,
.header-bottom.fixed-add .head-menu > ul > li:hover > a:before {
background-color: var(--background-white);
transform: translateX(-50%) scale(1, 1);
transform-origin: right center;
}
.head-menu > ul > li .menu-subs {
background: var(--background-white);
border-radius:0 0 0.75rem .75rem;
border-top: 3px solid var(--primary-border-color);
position: absolute;
width: 100%;
height: auto;
margin-top:1.75rem;
padding: .5rem;
outline: none;
z-index: 500;
opacity: 0;
visibility: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: all 0.5s ease-in-out;
}
.head-menu > ul > li .menu-subs > ul {list-style:none; margin: 0;padding: 0;}
.head-menu > ul > li .menu-subs > ul > li {line-height: 1;}
.head-menu > ul > li .menu-subs > ul > li > a {
color: var(--paragraph-color);
font-family: inherit;
font-size: 1rem;
font-weight: 400;
line-height: 1.25;
padding: 0.5rem 0;
border: none;
outline: none;
display: block;
/*display: inline-block;*/
text-transform: capitalize;
text-rendering: optimizeLegibility;
position: relative;
transition:all 500ms ease !important;
}
.head-menu > ul > li .menu-subs > ul > li > a:before {
background-color: var(--primary-background);
font-family: "Font Awesome 5 Duotone",serif;
line-height: 0;
border-radius: var(--object-border-radius);
content: "";
opacity: 0;
width: 10px;
height: 2px;
margin-right: 5px;
position: absolute;
top: 50%;
left: 0;
display: inline;
transform: translateY(-50%);
transition:all 500ms ease !important;
}
/*.head-menu > ul > li .menu-subs > ul > li > a:before {
font-family: "Font Awesome 5 Duotone", serif;
display: inline;
text-align: center;
font-size: 24px;
line-height: 0;
border-radius: var(--object-border-radius);
content: "-";
opacity: 0;
margin-right: 5px;
left: 0;
transition:all 500ms ease !important;
}*/
.head-menu > ul > li .menu-column-1 {
min-width: 12rem;
max-width: 15rem;
}
.head-menu > ul > li .menu-subs.menu-mega {
left: 50%;
transform: translateX(-50%);
}
.head-menu > ul > li .menu-subs.menu-mega > .list-item > ul > li {
display: block;
line-height: 1;
padding: 0.5rem 0;
}
.head-menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a {
color: var(--paragraph-color);
font-size: 1rem;
font-weight: 400;
line-height: 1.25;
border: none;
outline: none;
text-rendering: optimizeLegibility;
transition:all 500ms ease !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
}
.head-menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a:before {
background-color: var(--primary-background);
font-family: "Font Awesome 5 Duotone",serif;
/*text-align: center;
font-size: 24px;*/
line-height: 0;
border-radius: var(--object-border-radius);
content: "";
width: 10px;
height: 2px;
margin-right: 5px;
position: absolute;
top: 50%;
left: 0;
opacity: 0;
display: inline;
transform: translateY(-50%);
transition:all 500ms ease !important;
}
.head-menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a:hover::before,
.head-menu > ul > li .menu-subs > ul > li > a:hover::before{opacity: 1;left: .2rem;}
.head-menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a:hover,
.head-menu > ul > li .menu-subs > ul > li > a:hover {color: var(--primary-color);padding-left: 1rem !important;}
.head-menu > ul > li .menu-subs.menu-column-4 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 52rem;
width: 100%;
padding: .4rem;
}
.head-menu > ul > li .menu-subs.menu-column-4 > .list-item {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333%;
flex: 0 0 33.333%;
padding: 0 .2rem;
}
.head-menu > ul > li .menu-subs.menu-column-4 > .list-item ul {
list-style: none;
margin: 0;
padding: 0;
}
.head-menu > ul > li .menu-subs.menu-column-4 > .list-item .title {
font-family: inherit;
font-size: 1rem;
font-weight: 500;
color: var(--primary-color);
line-height: 1;
margin: 0;
padding: 0.5rem 0;
border: none;
outline: none;
text-rendering: optimizeLegibility;
transition: all 0.3s ease-in-out;
}
.head-menu > ul > li .menu-subs.menu-column-4 > .list-item.text-center .title {text-align: center;}
.head-menu > ul > li .menu-subs.menu-column-4 > .list-item img.responsive {
max-width: 100%;
width: 100%;
height: auto;
margin-top: 0.75rem;
-o-object-fit: cover;
object-fit: cover;
vertical-align: middle;
}
/*.header-item-right a:hover, ----BEKLET*/
.head-menu > ul > li:hover > a {color: var(--primary-color) !important;}
@media only screen and (min-width: 993px) {
.head-menu > ul > li.menu-item-has-children:hover .menu-subs {
margin-top: 0.5rem;
opacity: 1;
visibility: visible;
}
}
.menu-mobile-header,
.menu-mobile-trigger {display: none;}
/*----------------------------------*/
@media only screen and (max-width: 1199px) {
.header-item-center {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
.header-item-left, .header-item-right {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.menu-wrapper {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.menu-mobile-trigger {
width: 40px;
height: 40px;
display: flex;
align-items: end;
justify-content: center;
flex-direction: column;
gap: 7px;
cursor: pointer;
}
.menu-mobile-trigger span {
background: var(--font-white-color);
border-radius: var(--object-border-radius);
width: 32px;
height: 2px;
transition: all .5s ease-in-out;
}
/*.menu-mobile-trigger span:nth-child(1) {width:29px;}
.menu-mobile-trigger span:nth-child(2),*/
.menu-mobile-trigger span:nth-child(2) {width:24px;}
.menu-mobile-trigger span:nth-child(3) {width:32px;}
.menu-mobile-trigger:hover span:nth-child(1) {background:var(--primary-background) !important;}
.menu-mobile-trigger:hover span:nth-child(2) {background:var(--tertiary-background) !important;}
.menu-mobile-trigger:hover span:nth-child(3) {background:var(--fourth-background) !important;}
.header-item-right {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.head-menu {
background:var(--secondary-side-background);
position: fixed;
top: 0;
left: 0;
width: 19rem;
height: 100%;
z-index: 1099;
overflow: hidden;
transform: translate(-100%);
transition: all 0.5s ease-in-out;
}
.head-menu.active {
transform: translate(0%);
}
.head-menu > ul > li {
display: block;
line-height: 1;
margin: 0;
}
.head-menu > ul > li > a {
color: var(--font-white-color) !important;
line-height: 3.125rem;
border-bottom:1px solid var(--border-light);
height: 3.125rem;
padding: 0 3.125rem 0 1rem;
display: block;
}
.head-menu > ul > li > a i {
position: absolute;
font-size: 1.25rem;
line-height: 3.125rem;
top: 0;
right: 0;
width: 3.125rem;
height: 3.125rem;
text-align: center;
transform: rotate(-90deg);
}
.head-menu .menu-mobile-header {
background:var(--secondary-side-background);
border-bottom: 1px solid var(--border-light);
position: -webkit-sticky;
position: sticky;
/*position: relative;*/
top: 0;
z-index: 501;
height: 3.125rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.head-menu .menu-mobile-header .menu-mobile-arrow {
font-size: 1.5rem;
color: var(--font-white-color);
text-align: center;
line-height: 2.5rem;
border-right: 1px solid rgba(0, 0, 0, 0.1);
width: 2.5rem;
height: 2.5rem;
display: none;
cursor: pointer;
}
.head-menu .menu-mobile-header.active .menu-mobile-arrow {display: block;}
.head-menu .menu-mobile-header .menu-mobile-title {
font-family: inherit;
color: var(--font-white-color);
font-size: 1rem;
font-weight: 500;
line-height: inherit;
text-transform: capitalize;
text-rendering: optimizeLegibility;
}
.head-menu .menu-mobile-header .menu-mobile-close {
/*background-color: var(--background-white);*/
color: var(--font-white-color);
font-size:1.5rem;
text-align: center;
line-height: 2.5rem;
/*border-radius: 0.75rem;*/
cursor: pointer;
width: 2.5rem;
height: 2.5rem;
/*margin: 0 8px 0 0;*/
}
.head-menu .menu-section {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.head-menu > ul > li .menu-subs {
background-color:var(--secondary-background);
position: absolute;
display: none;
top: 0;
left: 0;
max-width: none;
min-width: auto;
width: 100%;
height: 100%;
margin: 0;
padding:4rem 1rem 1rem;
opacity: 1;
overflow-y: auto;
visibility: visible;
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
-webkit-box-shadow: none;
box-shadow: none;
}
.head-menu > ul > li .menu-subs.menu-mega {
position: absolute;
display: none;
top: 0;
left: 0;
max-width: none;
min-width: auto;
width: 100%;
height: 100%;
margin: 0;
padding:4rem 1rem 1rem;
opacity: 1;
overflow-y: auto;
visibility: visible;
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
-webkit-box-shadow: none;
box-shadow: none;
}
.head-menu > ul > li .menu-subs.active {display: block;}
.head-menu > ul > li .menu-subs.menu-column-4 > .list-item {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
padding: 0;
}
.head-menu > ul > li .menu-subs.menu-column-4 > .list-item img.responsive {margin-top: 0;}
.head-menu > ul > li .menu-subs.menu-column-4 > .list-item.text-center .title {margin-bottom: 1.25rem;}
.head-menu > ul > li .menu-subs.menu-column-4 > .list-item.text-center:last-child .title {margin-bottom: 0;}
.head-menu > ul > li .menu-subs > ul > li > a {display: block;color: var(--font-white-color);}
.head-menu > ul > li .menu-subs.menu-mega > .list-item > ul {margin-bottom: 1rem;}
.head-menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a {display: block;color: var(--font-white-color);}
.overlay {
background: rgba(0, 0, 0, 0.55);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1098;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.overlay.active {
opacity: 1;
visibility: visible;
}
}
/*----------------------------------*/
@-webkit-keyframes slideLeft {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes slideLeft {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@-webkit-keyframes slideRight {
0% {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes slideRight {
0% {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
/*
--------------------------------------- C. MENU & LOGO -----------------------------------
*/
/*
--------------------------------------- D. OTHER MENU ------------------------------------
*/
ul.ctlist-wrap {
display: flex;
align-items: center;
margin-left:1rem;
}
ul.ctlist-wrap li {
position: relative;
margin-left:1.2rem;
}
ul.ctlist-wrap li:nth-last-child(1),ul.ctlist-wrap li:last-child {margin-left: 0;}
ul.ctlist-wrap li:first-child::before {display: none;}
/*ul.ctlist-wrap li a {
color: var(--secondary-color);
font-size: 1rem;
}*/
ul.ctlist-wrap li.header-advert{}
ul.ctlist-wrap li.header-advert a {}
ul.ctlist-wrap li.header-advert a:hover {}
ul.ctlist-wrap li.header-user-menu {
display: flex;
align-items: center;
/*margin-right: 30px;*/
}
ul.ctlist-wrap li.header-user-menu > span {
background:transparent;
color:var(--font-white-color);
font-size: 1.25rem;
line-height: 0;
border: 1px solid var(--border-white-color);
border-radius: 50%;
/*margin-right: 7px;*/
min-width: 40px;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
ul.ctlist-wrap li.header-user-menu span,
ul.ctlist-wrap li.header-user-menu span i {
transition: all 0.5s ease-in-out;
}
ul.ctlist-wrap li.header-user-menu:hover span i {color:var(--tertiary-color);}
ul.ctlist-wrap li.header-user-menu:hover span {border-color:var(--primary-border-color) !important;}
ul.ctlist-wrap li.header-contacts a {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
min-width: 26px;
padding:.7rem;
justify-content: center;
}
ul.ctlist-wrap li.header-contacts a span {
background:var(--font-white-color);
width: 26px;
height: 2px;
border-radius:var(--object-border-radius);
transition: .3s linear;
}
ul.ctlist-wrap li.header-contacts a span:nth-child(2) {width: 23px;}
ul.ctlist-wrap li.header-contacts a span:nth-child(3) {width: 15px;}
ul.ctlist-wrap li.header-contacts a:hover span:nth-child(1) {background:var(--primary-background) !important;}
ul.ctlist-wrap li.header-contacts a:hover span:nth-child(2) {background:var(--tertiary-background) !important;}
ul.ctlist-wrap li.header-contacts a:hover span:nth-child(3) {background:var(--fourth-background) !important;}
/*
--------------------------------------- D. OTHER MENU ------------------------------------
*/
/*
--------------------------------------- E. OFFCANVAS CONTACT -----------------------------
*/
.popup-info {
background: var(--background-white) none repeat scroll 0 0;
width: 465px;
height: 100%;
padding:1.2rem 2rem 1.2rem 1.2rem;
position: fixed;
top: 0;
right: 0;
z-index: 9999;
overflow-y: scroll;
transition: all 0.7s ease 0s;
transform: translateX(100%);
}
.popup-info.active {transform: translateX(15px);}
.close-icon {text-align: right;/*margin-bottom: 2rem;*/}
.close-icon > span {
background: var(--primary-background);
text-align: center;
border-radius: var(--circle-border-radius);
width: 42px;
height: 42px;
padding: .3rem;
cursor: pointer;
display: block;
transition: all 0.5s ease;
}
.close-icon > span:hover{background:var(--tertiary-color);}
.close-icon > span i {
font-size: 1.8rem;
color: var(--font-white-color);
line-height: 1.14;
text-align: center;
}
.popup-info .logo-side{text-align: center;}
.popup-info .logo-side img {max-width:165px;}
h3.side-title{
font-size: 1.375rem;
font-weight: 600;
color:var(--secondary-color);
line-height: 1.4;
margin-bottom: 1.5rem;
position: relative;
}
/*h3.side-title::before {
background:var(--primary-background) none repeat scroll 0 0;
content: "";
border-radius:var(--object-border-radius);
display: block;
height: 3px;
width: 30px;
position: absolute;
bottom: -10px;
transition: all 0.2s ease-in-out;
}
h3.side-title:hover::before{width: 50px;}*/
h3.side-title span{font-weight:400;}
.side-institutional{
font-size: 1rem;
color: var(--paragraph-gray-color);
line-height: 1.4;
font-weight: 400;
/*margin-bottom: 2rem;*/
}
.side-info {
/*border-top: 1px solid var(--primary-border-color);
padding-top:2rem;*/
/*margin-bottom: 2rem;*/
}
ul.side-contact{}
ul.side-contact li{
color:var(--paragraph-gray-color);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 0 0 7px 0;
padding:0;
transform: translateZ(0);
transition: transform .2s ease-out;
}
ul.side-contact li:hover{
color: var(--primary-color);
transform: translateX(7px);
}
ul.side-contact li i {
color:var(--primary-color);
font-size: 1.2rem;
width: 20px;
margin-right: .75rem;
}
/*.side-gallery {
overflow: hidden;
display: flex;
flex-wrap: wrap;
margin: -5px;
}
.side-gallery li {
width: 50%; !*33.3333*!
flex: 0 0 50%; !*33.3333*!
padding: 5px;
}
.side-gallery li > a {display: block;}
.side-gallery img {
width: auto; !*100%*!
border-radius: 5px;
}*/
.offcanvas-overly {
background: var(--secondary-side-background);
position: fixed;
top: 0;
left: 0;
z-index: 999;
height: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
transition: .3s;
}
.offcanvas-overly.active {
opacity: .7;
visibility: visible;
}
.side-social-media {
display: flex;
align-items: center;
justify-content: center;
}
.side-social-media a {
background-color:transparent;
color:var(--primary-color);
font-size:1rem;
text-align: center;
border: 1px solid var(--border-grey-color);
border-radius:50%;
height: 40px;
width: 40px;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 500ms ease;
}
.side-social-media a i {font-size: 1rem;}
.side-social-media a:hover i{color:var(--font-white-color) !important;}
.side-social-media a:hover svg{fill:var(--font-white-color) !important;}
.side-social-media a:after {
background:var(--primary-background);
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 100%;
transition-delay: .1s;
transition-timing-function: ease-in-out;
transition-duration: .4s;
transition-property: all;
opacity: 1;
transform-origin: top;
transform-style: preserve-3d;
transform: scaleY(0);
}
.side-social-media a[media="facebook"]:after {background-color: var(--facebook);}
.side-social-media a[media="twitter"]:after {background-color: var(--font-black-color);}
.side-social-media a[media="instagram"]:after {background: radial-gradient(circle at 30% 107%, var(--instagram-one-color) 0%, var(--instagram-one-color) 5%, var(--instagram-two-color) 45%,var(--instagram-three-color) 60%,var(--instagram-four-color) 90%);}
.side-social-media a[media="linkedin"]:after {background-color: var(--linkedin);}
.side-social-media a[media="youtube"]:after {background-color: var(--youtube);}
.side-social-media a:hover:after {
opacity: 1;
transform: scaleY(1);
}
.side-social-media a+a {margin-left: 10px;}
/*
--------------------------------------- E. OFFCANVAS CONTACT -----------------------------
*/
/*=================================================
END OF HEADER
===================================================*/
/*=================================================
4. MAIN CONTENT
===================================================*/
/*
--------------------------------------- A. INFO BANK SEARCH ------------------------------
*/
#info-wrapper{
position: relative;
margin-top:-7.3rem;
padding: 0 0 4rem 0;
}
#info-wrapper .inside-bg{
background: var(--background-white);
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.06);
min-height: 7.5rem;
padding: 1.75rem 1.5rem 1.2rem;
}
/*
--------------------------------------- A. INFO BANK SEARCH ------------------------------
*/
/*
--------------------------------------- F. SHOWCASE --------------------------------------
*/
#showcase-wrapper {
background-color:var(--background-white);
padding:0 0 3rem 0;
margin: 0;
position: relative;
}
.area-items {position:relative;}
.area-items figure {
margin:0;
position:relative;
overflow:hidden;
}
.area-items figure figcaption {
background-position:center;
background-size:cover;
position:relative;
min-height:375px;
transition:all 5s;
}
.area-items figure figcaption img {display:none;}
.area-items figure figcaption:before {
background:linear-gradient(to bottom,rgba(2,3,7,0) 0,var(--figure-gradient-background) 100%);
content:"";
position:absolute;
width:100%;
height:100%;
/*opacity:0;*/
transition:all .3s;
}
.area-items figure:hover figcaption {
transform:scale(1.5);
}
.area-items figure:hover figcaption:before {opacity:.8;}
.status-wrap {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
.status-wrap span{
color: var(--font-white-color);
font-weight: 300;
font-size: .9rem;
margin-right: .375rem;
padding:.25rem .7rem;
}
.status-wrap span:nth-last-child(1){margin-right: 0;}
.status-wrap span.for-new{background-color: var(--tertiary-background) !important;}
.status-wrap span.for-sale{background-color: var(--fifth-background) !important;}
.status-wrap span.for-rent{background-color: var(--fourth-background) !important;}
.area-items figure h3 {
font-size: .9rem;
color: var(--font-white-color);
font-weight: 400;
line-height: 1.75;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
max-height: 1.75rem;
width: 100%;
margin:0;
padding:0 .75rem;
position:absolute;
bottom:-42px;
/*left:50%;*/
opacity:0;
filter:alpha(opacity=0);
transition:all 1.2s ease;
}
.area-items figure:hover h3{
bottom:26px;
opacity:1;
filter:alpha(opacity=1);
}
.area-items figure h3 ul.extra{
position: relative;
z-index: 1;
}
.area-items figure h3 ul.extra li {
font-size:.9rem;
font-weight: 400;
color: var(--font-white-color);
margin-right: .625rem;
float: left;
align-items: center;
justify-content: center;
display: flex;
}
.area-items figure h3 ul.extra li i{
color:var(--primary-color);
font-size: 1.125rem;
font-weight: 500;
width: 22px;
}
.area-items figure h2 {
font-size: 1.2rem;
color: var(--font-white-color);
font-weight: 600;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
width: 100%;
margin: 0;
padding: 0 .75rem;
position:absolute;
bottom:12px;
transition:all 1s ease;
}
.area-items figure h2 div {
background-color:var(--primary-background);
color: var(--font-white-color);
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
text-shadow: none;
padding: .4rem .65rem;
margin-bottom: .5rem;
display: table;
}
.area-items figure h2 > a{
color:var(--font-white-color);
line-height: 1.75;
white-space: normal;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.area-items figure h2 > a em{font-style: normal; color:var(--primary-color);}
.area-items figure h2 > a:hover{color:var(--primary-color);}
.area-items figure h2 > p {
font-size: 1rem;
font-weight: 300;
color:var(--font-white-color) !important;
line-height: 1.75;
text-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
margin: 0;
padding: 0;
white-space: normal;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.area-items figure h2 > p i {
color:var(--primary-color);
font-size: 1.125rem;
width: 18px;
}
.area-items figure:hover h2{bottom:60px;}
/*
--------------------------------------- F. SHOWCASE --------------------------------------
*/
/*
--------------------------------------- G. FEATURED --------------------------------------
*/
#featured-wrapper {
background-color:var(--section-two-background);
margin:0 0 3rem 0;
padding:2rem 0;
position: relative;
}
article.featured {
min-height: 333px;
margin-top: 1.5rem;
margin-bottom: 2rem;
position: relative;
}
article.featured:hover {
position: relative;
color: initial;
transform: translate3d(0,-20px,0);
}
article.featured .image {
background-position: center;
background-size: cover;
overflow: hidden;
height: 385px;
position: relative;
transition:all 5s;
}
article.featured .image:before {
background:linear-gradient(to bottom,rgba(2,3,7,0) 0,var(--figure-gradient-background) 100%);
content:"";
position:absolute;
width:100%;
height:100%;
/*opacity:0;*/
transition:all .3s;
}
article.featured .image img {
display:block;
width:100%
}
article.featured .inner-wrap {
background-color: var(--background-white);
margin: -2.5rem 1rem 0;
padding: 1.2rem;
position: relative;
}
article.featured .inner-wrap {
transition: color 0.4s linear;
}
article.featured .inner-wrap:after {
background:var(--object-one-background);
content: "";
width: 100%;
height: 1px;
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
}
article.featured .inner-wrap:before {
background: var(--primary-background);
content: "";
width: 0;
height: 1px;
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
z-index: 99;
transition: width 0.4s linear;
}
article.featured .inner-wrap:hover:before {
width: 100%;
left: 0;
right: auto;
}
.inner-wrap ul{}
.inner-wrap ul li{
width: 100%;
margin:0;
padding: 0;
border-bottom: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: relative;
transition: color 0.4s linear;
}
.inner-wrap ul li > span{
font-size: 1.375rem;
color: var(--primary-color);
font-weight: 600;
line-height: 1.4;
display: block;
margin-bottom: .2rem;
}
.inner-wrap ul li a {
font-size:1.2rem;
font-weight: 600;
color: var(--secondary-color);
line-height: 1.75;
margin-bottom:.2rem;
}
.inner-wrap ul li:hover,
.inner-wrap ul li:hover a,
.inner-wrap ul li:hover a:hover{ color:var(--primary-color);}
.inner-wrap ul li:hover a + div{ color:var(--secondary-color);}
.inner-wrap ul li a + div {
font-size: 1rem;
font-weight: 400;
color:var(--secondary-color);
line-height: 1.75;
transition: 0.3s ease-in-out;
}
.inner-wrap ul li a + div i {
color: var(--primary-color);
font-size: 1.125rem;
width: 18px;
}
.featured-tags {
background: var(--background-white);
margin-right: 1rem;
margin-left: 1rem;
padding: 1rem;
position: relative;
}
.featured-tags ul{
position: relative;
z-index: 1;
}
.featured-tags ul li {
font-size:1rem;
font-weight: 400;
color: var(--secondary-color);
margin-right: .625rem;
display: inline-flex;
align-items: center;
}
.featured-tags ul li:last-child{margin-right: 0;}
.featured-tags ul li i{
color:var(--primary-color);
font-size: 1.125rem;
font-weight: 500;
width: 22px;
}
@media(min-width:768px){
article.featured {
transform:translate3d(0,0,0);
transition:all .2s;
}
article.featured:not(.add):hover {
position:relative;
color:initial;
transform:translate3d(0,-20px,0)
}
/*article.featured .image {
height:220px
}*/
}
.featured-pvideo {
width: 46px;
height: 46px;
margin: auto;
position: absolute;
top: 50%;
left: 46%;
cursor: pointer;
border-radius: var(--circle-border-radius);
transition: all .5s;
}
.featured-pvideo { background-color: var(--primary-background); }
.featured-pvideo a {
color: var(--font-white-color);
width: 46px;
height: 46px;
position: absolute;
top: 0;
left: 50%;
padding-left: 5px;
transform: translateX(-50%);
}
.featured-pvideo a i { line-height: 46px; }
.featured-pvideo:hover a { color: var(--primary-color); }
.featured-pvideo:after {
content: '';
width: 100%;
height: 100%;
padding: 0;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
pointer-events: none;
border-radius: var(--circle-border-radius);
box-sizing: content-box;
box-shadow: 0 0 0 2px var(--box-shadow-two-opacity-40);
}
.featured-pvideo:hover{
background: var(--background-white);
color: var(--primary-color);
border-color:transparent !important;
transform:scale(1);
box-shadow:2px 6px 18px transparent !important;
}
.featured-pvideo:hover:after{
animation:featured-veffect 1.3s ease-out 75ms;
}
@-webkit-keyframes featured-veffect{
0%{opacity:0.4}
40%{
opacity:0.6;
box-shadow:0 0 0 2px var(--box-shadow-two-opacity-20), 0 0 10px 10px var(--box-shadow-white-color), 0 0 0 10px var(--box-shadow-two-opacity-60);
}
100%{
transform:scale(1.4);
opacity:0;
box-shadow:0 0 0 2px var(--box-shadow-two-opacity-20), 0 0 10px 10px var(--box-shadow-white-color), 0 0 0 10px var(--box-shadow-two-opacity-60);
}
}
@-moz-keyframes featured-veffect{
0%{opacity:0.4}
40%{
opacity:0.5;
box-shadow:0 0 0 2px var(--box-shadow-two-opacity-20), 0 0 10px 10px var(--box-shadow-white-color), 0 0 0 10px var(--box-shadow-two-opacity-60);
}
100%{
transform:scale(1.4);
opacity:0;
box-shadow:0 0 0 2px var(--box-shadow-two-opacity-20), 0 0 10px 10px var(--box-shadow-white-color), 0 0 0 10px var(--box-shadow-two-opacity-60);
}
}
@keyframes featured-veffect{
0%{opacity:0.4}
40%{
opacity:0.6;
box-shadow:0 0 0 2px var(--box-shadow-two-opacity-20), 0 0 10px 10px var(--box-shadow-white-color), 0 0 0 10px var(--box-shadow-two-opacity-60);
}
100%{
box-shadow:0 0 0 2px var(--box-shadow-two-opacity-20), 0 0 10px 10px var(--box-shadow-white-color), 0 0 0 10px var(--box-shadow-two-opacity-60);
transform:scale(1.4);
opacity:0;
}
}
/*
--------------------------------------- G. FEATURED --------------------------------------
*/
/*
--------------------------------------- X. SERVICES --------------------------------------
*/
#services-wrapper {
background-color:var(--background-white);
padding:0 0 3rem 0;
margin: 0;
position: relative;
}
.sw-primary{padding-right:2.4rem}
@media screen and (max-width: 991px) {
.sw-primary{padding-right:13px;}
}
ol.services { padding-left: 30px; }
ol.services li {
color: var(--paragraph-color);
padding-left: 1.5rem;
margin-top: 1.5rem;
position: relative;
font-size: 1rem;
line-height: 20px;
}
ol.services li span{color: var(--secondary-color);font-weight: 600;}
ol.services li::marker {content: counter(list-item);color:var(--object-one-color);} /* content: counter(list-item) "› " */
ol.services li p{margin: 0;padding: 0;}
ol.services li:before {
content: '';
display: block;
height: 42px;
width: 42px;
border: 2px solid var(--border-grey-color);
position: absolute;
top: -11px;
left: -27px;
}
ol.services li:nth-child(n+1):before {color: var(--tertiary-color);border-color: var(--tertiary-color);}
ol.services li:nth-child(2n+1):before {color: var(--fifth-color);border-color: var(--fifth-color);}
ol.services li:nth-child(3n+1):before {color: var(--fourth-color);border-color: var(--fourth-color);}
ol.services li:nth-child(4n+1):before {color: var(--primary-color);border-color: var(--primary-color);}
.counters {
background: var(--counter-background);
text-align: center;
width: 100%;
padding: 3rem 1rem 3.25rem;
transition: all 300ms ease 0s;
position: relative;
z-index: 99;
display: flex;
justify-content: center;
}
.counters:after {
background-color: var(--primary-background);
position: absolute;
content: '';
height:22px;
width:22px;
top:0;
right:0;
z-index: -1;
transition: all 0.7s ease;
}
.counters:first-child:not(.one){margin-bottom: 1rem;}
/*.counters:hover{background: var(--primary-background);}*/
.counters:hover::after {
height: 100%;
width: 100%;
top: 0;
bottom: 0;
right: 0;
}
.counters:hover .for-icon i,
.counters:hover .for-number,
.counters:hover .for-title{color:var(--font-white-color)}
.counters .for-inner{display: inline-block;}
.counters .for-icon{margin-bottom: 0;}
.counters .for-icon i{
font-size: 3.5rem;
color: var(--primary-color);
transition: all 0.5s ease-in-out;
}
.counters .for-number{
font-size: 2.4rem;
font-weight: 600;
color:var(--secondary-color);
line-height: 1.5;
margin-bottom: .5rem;
}
.counters .for-title {
font-size: 1.125rem;
font-weight: 400;
color: var(--paragraph-color);
line-height: 1.2;
}
.circle-shape{display: flex;align-content:center;align-items: center;position: relative;z-index: 9;}
.circle-shape::before {
background-color: var(--background-white);
content: '';
border-radius:var(--circle-border-radius);
border: 30px solid var(--primary-light);
height: 205px;
width: 205px;
position: absolute;
top: 50%;
right: 0;
z-index: -1;
transform: translate(50%,0%);
}
.counters-thumbnail-circle {
border: 20px solid var(--tertiary-light);
border-radius: var(--circle-border-radius);
width: 100px;
height: 100px;
position: absolute;
bottom: 50%;
right: 0;
z-index: -1;
transform: translate(50%,153%);
}
.counters-thumbnail-circle::before {
background-color: var(--background-white);
content: '';
border-radius:var(--circle-border-radius);
border: 10px solid var(--fourth-light);
height: 44px;
width: 44px;
position: absolute;
top: 50%;
right: 0;
z-index: -1;
transform: translate(-20%,-50%);
}
/*
--------------------------------------- X. SERVICES --------------------------------------
*/
/*
--------------------------------------- X. MULTIPLE --------------------------------------
*/
#whatsapp-wrapper {
background-color: var(--primary-background);
color: var(--font-white-color);
padding: 3rem 0;
margin: 0 0 3rem 0;
position: relative;
}
.whatsapp-head{
font-weight: 400;
font-size: 1.75rem;
line-height: 1.2;
margin: 0;
padding-bottom: .5rem;
}
.whatsapp-body{
display: flex;
align-items: center;
justify-content: end;
}
.whatsapp-body span{
font-weight: 500;
font-size: 1.5rem;
line-height: 1.2;
margin-right: 1.5rem;
}
.btn-call {
background:var(--background-white);
font-size:1rem;
font-weight: 600;
color:var(--primary-color);
line-height: 43px;
letter-spacing:.02rem;
text-align: center;
border: medium none;
margin-bottom: 0;
padding:0 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
vertical-align: middle;
white-space: nowrap;
position: relative;
z-index: 1;
transition: all 0.3s ease 0s;
touch-action: manipulation;
user-select: none;
}
.btn-call span {font-weight: 500;padding-left: .3rem;}
.btn-call::after {
font-family: "Font Awesome 5 Pro", serif;
font-weight: lighter;
font-size: 1rem;
content: "\f105";
margin-left: 40px;
}
.btn-call::before {
background:var(--btn-call-background);
content: "";
width: 43px;
height: 43px;
position: absolute;
top: 0;
right: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.btn-call:hover::before {width: 100%;}
.btn-call:hover,
.btn-call:active,
.btn-call:focus{color:var(--primary-color);}
/*
--------------------------------------- X. MULTIPLE --------------------------------------
*/
/*
--------------------------------------- H. FAQ -------------------------------------------
*/
#faq-wrapper {
background-color:var(--background-white);
padding:0 0 3rem 0;
margin: 0;
position: relative;
}
.fw-primary{padding-right:2.4rem}
@media screen and (max-width: 991px) {
.fw-primary{padding-right:13px;}
}
.faq-image {
position: relative;
display: inline-block;
padding: 2rem 0 0 2rem;
}
.faq-image .shadow-img {
max-width: 100%;
box-shadow: 0 30px 40px rgb(0 0 0 / 20%);
}
.faq-image img {border-radius:var(--object-border-radius);}
.faq-image-wrap img {border-radius:var(--object-border-radius);}
.faq-image:after {
left: 0;
top: 0;
}
.faq-image:after {
background-color: var(--primary-background);
border-radius:var(--object-border-radius);
content: '';
height: 205px;
width: 230px;
position: absolute;
z-index: -1;
}
.faq-thumbnail {
line-height: 1.5;
position: relative;
z-index: 9;
}
.faq-thumbnail:first-child:not(.one){margin-bottom: 1rem;}
.faq-thumbnail .shadow-img {
max-width: 100%;
box-shadow: 0 30px 40px rgb(0 0 0 / 20%);
}
/*.faq-thumbnail img {border-radius:var(--object-border-radius);}*/
.faq-thumbnail.one:after {
background-color: var(--background-white);
content: '';
border-radius:var(--circle-border-radius);
border: 30px solid var(--primary-light);
height: 205px;
width: 205px;
position: absolute;
top: 50%;
left: 0;
z-index: -1;
transform: translate(-50%,-50%);
}
/*.faq-thumbnail.one::before {
background-color: transparent;
content: '';
border-radius: var(--circle-border-radius);
border: 3px solid #86bf77;
height: 90px;
width: 80px;
position: absolute;
right: 35px;
bottom: -40px;
z-index: -1;
}*/
.faq-thumbnail-circle {
border: 20px solid var(--tertiary-light);
border-radius: var(--circle-border-radius);
width: 100px;
height: 100px;
position: absolute;
bottom: 50%;
left: 0;
z-index: -1;
transform: translate(-50%,-50%);
}
/*
--------------------------------------- H. FAQ -------------------------------------------
*/
/*=================================================
END OF MAIN CONTENT
===================================================*/
/*=================================================
6. MORE CONTAINER
===================================================*/
#details-content-wrapper{
font-family: var(--font-family);
padding: 2rem 0;
margin: 0;
}
#details-content-wrapper.inside-bg {
background-color: var(--section-two-background);
width: 100%;
}
/*-------------------------------------------------
6.A Title
---------------------------------------------------*/
#details-title-wrapper{
background-repeat: no-repeat;
background-size: cover;
background-position: center; /* center top */
position: relative;
padding: 250px 0 80px;
text-align: center;
}
#details-title-wrapper.notitle{padding: 255px 0 120px;}
#details-title-wrapper::before {
background:var(--details-title-background);
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.dtw-title {
font-size: 1.6rem;
font-weight: 600;
color:var(--font-white-color);
line-height:1.25;
text-shadow: 2px 2px 3px var(--menu-text-shadow);
display:inline-block;
position:relative;
margin: 0;
padding-top: 1.375rem;
}
.dtw-title:before {
background:var(--primary-background);
content:"";
width:11px;
height:11px;
margin:0;
position:absolute;
top:7px;
left:50%;
transform: translate(-50%,-50%);
transition: all 0.2s ease-in-out;
}
.dtw-title:hover::before {background:var(--tertiary-background);}
ul.dtw-list {
font-size: 1.25rem;
font-weight: 400;
color:var(--font-white-color);
line-height: 2;
padding: 0 15px;
margin-bottom: 0 !important;
position: relative;
}
ul.dtw-list li {
text-shadow: 2px 2px 3px var(--menu-text-shadow);
display:inline-block;
}
ul.dtw-list > li.active {color:var(--primary-color);}
ul.dtw-list > li:not(:last-child)::after {
color: var(--font-white-color);
content: "/";
display: inline-block;
padding: 0 5px;
transition: color .3s ease-in-out;
}
ul.dtw-list > li > a {
color: var(--font-white-color);
text-decoration: none;
}
ul.dtw-list li:hover a,
ul.dtw-list > li:hover::after{ color:var(--primary-color);}
ul.dtw-list li a i {
color: var(--primary-color);
font-size: 1rem;
margin-right: 5px;
}
/*-------------------------------------------------
6.X Advertisement List
---------------------------------------------------*/
#filter-wrapper{
border-bottom: 1px solid var(--border-grey-color);
position: relative;
margin-top: -3rem;
padding: 0 0 2.2rem 0;
}
.filter-result{margin: 1rem 0 .5rem; padding: .5rem .75rem;}
.filter-result b{font-weight: 500;}
.filter-options-bar {
background: var(--background-white);
padding: 1.5rem;
}
.filter-options-bar .general-frm label{margin: 0;}
/*.filter-options-bar .sort {
font-size: 1rem;
color: var(--secondary-color);
font-weight: 500;
line-height: 1.2;
margin: 5px 20px 0 0;
padding: 5px 10px;
float: left;
}*/
a#more-options{font-size:.9rem;color: var(--primary-color);text-decoration: none;}
a#more-options i {
color: var(--primary-color);
font-size: 1rem;
transition: 0.3s ease-in-out;
}
a#more-options:hover,a#more-options:hover i{color: var(--tertiary-color);}
.extended-options-wrapper{margin: 1.5rem 0 0;display: none;}
.filter-display-mode{
}
.filter-display-mode a{
background: transparent;
color: var(--primary-color);
text-align: center;
line-height: 42px;
border: 1px solid var(--primary-border-color);
margin: 0 .3rem;
display: inline-block;
width: 42px;
height: 42px;
}
.filter-display-mode a:last-child{margin: 0;}
.filter-display-mode a:hover {
background: var(--primary-background);
}
.filter-display-mode a i{
font-size: 1rem;
color: var(--primary-color);
transition: 0.3s ease-in-out;
}
.filter-display-mode a:hover i{color: var(--font-white-color)}
.active-view {background: var(--primary-background) !important;}
.active-view i{color: var(--font-white-color) !important;}
.advertise-item {
background: var(--background-white);
margin-bottom: 1.875rem;
position: relative;
z-index: 2;
overflow: hidden;
transition: 0.3s ease-in-out;
}
.advertise-item:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.advertise-image {
background-position: center;
background-size: cover;
overflow: hidden;
height: 245px;
position: relative;
}
.advertise-image::before {
background: var(--background-white);
position: absolute;
content: "";
width: 0;
height: 0;
left: 0;
bottom: 0;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all 0.6s ease;
}
.advertise-image::after {
background: var(--background-white);
position: absolute;
content: "";
width: 0;
height: 0;
right: 0;
top: 0;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all 0.6s ease;
}
.advertise-item:hover .advertise-image::before,
.advertise-item:hover .advertise-image::after {
background: linear-gradient(0,var(--secondary-background),rgb(255 171 74 / 17%));
width: 100%;
height: 100%;
opacity: 0.3;
visibility: visible;
}
.advertise-info{}
.ad-stepone,
.ad-steptwo,
.ad-stepthree{padding:.75rem;}
.advertise-info .ad-stepone a {
font-size:1.2rem;
font-weight: 600;
color: var(--secondary-color);
line-height: 1.75;
white-space: normal;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.advertise-info .ad-stepone a:hover{ color:var(--primary-color);}
.advertise-info .ad-stepone > p {
font-size: 1rem;
font-weight: 400;
color:var(--secondary-color) !important;
line-height: 1.75;
margin: 0;
padding: 0;
white-space: normal;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.advertise-info .ad-stepone > p i {
color:var(--primary-color);
font-size: 1.125rem;
width: 18px;
}
.advertise-info .ad-steptwo{background: var(--extra-background);}
.advertise-info .ad-steptwo ul{
text-align: center;
position: relative;
z-index: 1;
}
.advertise-info .ad-steptwo ul li {
font-size:1rem;
font-weight: 400;
color: var(--secondary-color);
line-height: 2.2;
margin-right: .625rem;
display: inline-flex;
align-items: center;
}
.advertise-info .ad-steptwo ul li:last-child{margin-right: 0;}
.advertise-info .ad-steptwo ul li i{
color:var(--primary-color);
font-size: 1.125rem;
font-weight: 500;
width: 22px;
}
.ad-stepthree{
display: flex;
align-items: center;
justify-content: space-between;
}
.ad-stepthree span {
font-size: 1.375rem;
color: var(--primary-color);
font-weight: 600;
line-height: 1.4;
}
.ad-stepthree ul {display: flex;align-items: center;}
.ad-stepthree ul li {
background-color: var(--extra-background);
border-radius: var(--circle-border-radius);
width: 40px;
height: 40px;
line-height: 40px;
margin-right: .5rem;
text-align: center;
transition: all 0.5s ease-in-out;
}
.ad-stepthree ul li:last-child {margin-right: 0;}
.ad-stepthree ul li a i{
color:var(--primary-color);
font-size: 1rem;
font-weight: 500;
width: 20px;
transition: all 0.5s ease-in-out;
}
.ad-stepthree ul li:hover:nth-child(n+1) {background-color: var(--tertiary-background);}
.ad-stepthree ul li:hover:nth-child(2n+1) {background-color: var(--fifth-background);}
.ad-stepthree ul li:hover:nth-child(3n+1) {background-color: var(--fourth-background);}
.ad-stepthree ul li:hover:nth-child(4n+1) {background-color: var(--primary-background);}
.ad-stepthree ul li:hover i{color: var(--font-white-color);}
/*-------------------------------------------------
6.X Blog
---------------------------------------------------*/
.aside-left {font-family:var(--font-family); }
.aside-left .widget {
background: var(--background-white);
margin-bottom: 1.5rem;
padding:2rem 1.5rem;
}
.aside-left .widget .widget-title {
color: var(--paragraph-color);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
margin-bottom:2.2rem;
padding:0;
position: relative;
}
.aside-left .widget .widget-title span {font-weight: 400;}
/*.aside-left .widget .widget-title::after {
background: var(--primary-background) none repeat scroll 0 0;
content: "";
border-radius:var(--object-border-radius);
display: block;
height: 3px;
width:30px;
position: absolute;
bottom: -10px;
transition: all 0.2s ease-in-out;
}*/
.aside-left .widget .widget-title:hover::after {width:50px;}
.aside-left .widget ul.list-category {
list-style: none;
margin: 0 0 2.5rem;
padding: 0;
}
.aside-left .widget ul.list-category li {
display: flex;
flex: 0 0 100%;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
margin-bottom: .65rem;
padding-right: 3rem;
}
.aside-left .widget ul.list-category li a {
font-size: 1rem;
font-weight: 400;
line-height: 1.65;
color: var(--paragraph-color);
transition: all 0.3s;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aside-left .widget ul.list-category li span{color: var(--primary-color);position: absolute;right: 0;}
.aside-left .widget ul.list-category li:last-child {margin-bottom: 0;}
.aside-left .widget ul.list-category li:hover a,
.aside-left .widget ul.list-category li:hover span {color: var(--primary-color);}
.widget-highlights span{
color:var(--primary-color);
font-size: .9rem;
font-weight: 400;
display: inline-block;
}
.widget-highlights img{
width: 95px;
height: 75px;
margin-right: 8px;
transition: all 0.3s ease-in-out;
}
.widget-highlights span i {
font-size: 1rem;
color: var(--primary-color);
margin-right: 5px;
}
.widget-highlights h6 {
color: var(--paragraph-color);
font-size: 1rem;
line-height: 1.4;
font-weight: 400;
margin: 0;
transition: all 0.4s ease-out 0s;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.widget-highlights h6 a{color:var(--paragraph-color);}
.widget-highlights h6:hover,
.widget-highlights h6 a:hover{color:var(--primary-color);}
.highlights-item{
display: flex;
align-items:center;
margin-bottom: 1rem;
}
.highlights-item:last-child{margin-bottom: 0;}
ul.list-archive{font-family: var(--font-family);}
ul.list-archive li {
background:var(--section-two-background);
margin-bottom: .6rem;
overflow: hidden;
border-radius: var(--object-border-radius);
}
ul.list-archive li a {
color: var(--paragraph-color);
font-size: .9rem;
font-weight: 400;
line-height: 1.3;
padding: 1.1rem 0 1.1rem .8rem;
display: block;
position: relative;
}
ul.list-archive li a span {
background: var(--primary-background);
color: var(--paragraph-color);
font-size: .8rem;
line-height: 1;
text-align: center;
width: 55px;
padding:1.3rem 1rem;
position: absolute;
right: 0;
top: 0;
transition: all 0.3s;
}
ul.list-archive li a:hover{color:var(--primary-color);}
ul.list-archive li a:hover span{color:var(--font-white-color);}
.aside-left .widget.widget-tags ul li {
display: inline-block;
margin-bottom: 8px;
margin-right: 4px;
}
.aside-left .widget.widget-tags ul li a {
background: var(--primary-background);
border: 1px solid transparent;
border-left: 3px solid var(--primary-border-color);
display: block;
padding: .5rem 1rem;
color: var(--font-white-color);
transition: all 0.3s;
}
.aside-left .widget.widget-tags ul li a:hover {
background-color: transparent;
color: var(--primary-color);
border-width:1px 1px 1px 3px;
border-style:solid;
border-color: var(--primary-border-color);
}
.aside-left .widget.widget-tags ul li:last-child {margin-bottom: 0;}
.aside-right {
background: var(--background-white);
margin-bottom: 2rem;
padding: 1.5rem;
position: relative;
}
.aside-right .field-media{margin-bottom: 1.625rem;overflow: hidden;}
.aside-right .field-media img{
width: 100%;
height: auto;
vertical-align: middle;
/*border-radius: var(--object-border-radius);*/
transition: all 0.4s ease-out 0s;
}
.aside-right .field-media:hover img {transform: scale(1.1);}
.aside-right .field-media:hover section.slider img {transform:none;}
ul.aside-tools{
position:absolute;
top:5%;
left:40px;
z-index:1;
}
ul.aside-tools li{
width: 100% !important;
margin: 0 !important;
transform:translateX(-60px);
opacity:0;
filter:alpha(opacity=0);
}
ul.aside-tools li a {
background: var(--secondary-light-color);
color: var(--font-white-color);
font-size: .9rem;
text-align: center;
line-height:30px;
border-radius: var(--full-circle-border-radius);
height:30px;
width:30px;
margin-bottom:.3rem;
display: inline-block;
transition: background-color 0.4s ease-in-out;
}
ul.aside-tools li:hover a{background: var(--primary-background);color:var(--font-white-color);}
.aside-right:hover ul.aside-tools li{
transform:translateX(0);
opacity:1;
filter:alpha(opacity=100);
transition:transform .4s ease;
}
.aside-right:hover ul.aside-tools li:nth-child(1){
transition:transform .4s ease .1s;
}
.aside-right:hover ul.aside-tools li:nth-child(2){
transition:transform .4s ease .2s;
}
.aside-right:hover ul.aside-tools li:nth-child(3){
transition:transform .4s ease .3s;
}
.aside-right:hover ul.aside-tools li:nth-child(4){
transition:transform .4s ease .4s;
}
.aside-right:hover ul.aside-tools li:nth-child(5){
transition:transform .4s ease .5s;
}
.aside-right ul.aside-tools li span[class^="vr"]{
font-size: .9rem;
font-weight: 600;
line-height: 1;
position: absolute;
top: 0;
left: 50%;
transition: all 0.3s;
opacity: 0;
transform: translate(-50%, 0);
}
.aside-right ul.aside-tools li:hover span[class^="vr"]{
color: var(--font-white-color);
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
transform: translate(20px, -1px);
opacity: 1;
}
.aside-right .field-body {
padding: 0;
}
.aside-right .field-body h2.field-title {
font-size: 1.3rem;
font-weight: 600;
line-height: 1.5;
margin:0 0 1.5rem 0;
}
.aside-right .field-body h2.field-title a {
color: var(--paragraph-color);
transition: all ease 500ms;
}
.aside-right .field-body h2.field-title a:hover {color: var(--primary-color);}
.aside-right .field-body .field-content{
font-size: 1rem;
font-weight: 400;
color: var(--paragraph-color);
line-height: 1.5;
/*margin-bottom: 2.5rem;*/
display: block;
}
.aside-right .field-body .field-content strong,
.aside-right .field-body .field-content b{font-weight: 600;}
.aside-right .field-body .field-content a{
color:var(--primary-color);
position: relative;
}
.aside-right .field-body .field-content a:before {
background: var(--primary-background);
content: "";
width: 0;
height: 1px;
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
transition: width 0.4s linear;
}
.aside-right .field-body .field-content a:hover:before {
width: 100%;
left: 0;
right: auto;
}
.aside-right .field-body .field-content a:hover,
.aside-right .field-body .field-content a:hover{
color:var(--primary-color);
text-decoration: none;
}
.aside-right .field-tags {margin-bottom:1.2rem;}
.aside-right .field-tags a {
color: var(--paragraph-color);
font-size: .9rem;
font-weight: 400;
line-height: 1.2;
margin:0 5px;
transition: all 0.3s ease-in-out 0s;
}
.aside-right .field-tags span {
margin-right: 10px;
padding: 5px 0;
display: inline-block;
}
.aside-right .field-tags span:last-child{margin-right: 0;}
.aside-right .field-tags span i{
color: var(--primary-color);
transition: all 0.3s ease-in-out 0s;
}
.aside-right .field-tags span:hover a,
.aside-right .field-tags span:hover i{color: var(--primary-color);}
.aside-right .field-tags span a.aa.default,
.aside-right .field-tags span a.aa.plus,
.aside-right .field-tags span a.aa.minus{
color: var(--paragraph-color);
font-size: .9rem;
font-weight: 600;
border: 1px solid var(--border-grey-color);
border-radius: var(--object-two-border-radius);
margin: 0 5px 0 0;
padding:5px 11px;
cursor: pointer;
}
.aside-right .field-tags span a.aa.default:hover,
.aside-right .field-tags span a.aa.plus:hover,
.aside-right .field-tags span a.aa.minus:hover{
background-color: var(--primary-background);
color: var(--font-white-color);
text-decoration: none;
border:1px solid var(--primary-border-color);
cursor: pointer;
}
.aside-right .field-tags span a.aa.disabled{
background-color: var(--primary-background);
color: var(--font-white-color);
font-size: .8rem;
font-weight: 600;
border: 1px solid var(--primary-border-color);
margin: 0 5px 0 0;
padding:5px 11px;
cursor: pointer;
}
.next-previous-content {
background: var(--background-white);
margin-top: 40px;
margin-bottom: 40px;
position: relative;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.next-content a,
.previous-content a{
transition: all 0.3s ease-in-out 0s;
}
.next-previous-content div {width: 50%; padding:2rem 1.5rem;}
.next-previous-content div a h3 {
color: var(--paragraph-color);
font-size: 1rem;
font-weight: 400;
line-height: 1.2;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.next-previous-content div a span {
color: var(--paragraph-color);
font-size: 1.2rem;
font-weight: 500;
line-height: 1.2;
}
.next-previous-content .previous-content a span i {padding-right: 10px;}
.next-previous-content .next-content a span i {padding-left: 5px;}
.next-previous-content div a span,
.next-previous-content div a span i{transition: all 0.3s ease-in-out 0s;}
.next-previous-content div:hover a span,
.next-previous-content div:hover a span i {color: var(--primary-color);}
.next-previous-content .next-content {text-align: right;}
.next-previous-content:after {
background: var(--object-one-background);
content: "";
width: 1px;
height: 70px;
position: absolute;
top: calc(50% - 35px);
left: calc(50% - 1px);
}
/*-------------------------------------------------
6.X File Downloads
---------------------------------------------------*/
.download-files {font-family: var(--font-family);width:100%;}
.download-files a {
background: var(--secondary-background);
color: var(--font-white-color);
font-size: 1rem;
font-weight: 400;
line-height:1.8 ;
text-align: left;
cursor: pointer;
display: inline-block;
width: 100%;
margin-bottom: 1rem;
padding: .8rem 2.5rem .8rem .8rem;
position: relative;
z-index: 999;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
transition: all 0.4s ease 0s;
}
/*.download-files:nth-child(2n+1) a{background: var(--primary-background);color: var(--paragraph-color);}*/
.download-files:nth-child(n+1) a{background: var(--tertiary-background);color: var(--font-white-color);}
.download-files:nth-child(2n+1) a{background: var(--fifth-background);color: var(--font-white-color);}
.download-files:nth-child(3n+1) a{background: var(--fourth-background);color: var(--font-white-color);}
.download-files:nth-child(4n+1) a{background: var(--primary-background);color: var(--font-white-color);}
.download-files:last-child a {margin-bottom:0;}
/*.download-files a:hover {
background-color: var(--primary-background);
color: var(--paragraph-color);
}
.download-files:nth-child(2n+1) a:hover {background: var(--secondary-background);color:var(--font-white-color);}*/
.download-files:nth-child(4n+1) a:hover{background: var(--tertiary-background) !important;color: var(--font-white-color);}
.download-files:nth-child(3n+1) a:hover{background: var(--fifth-background) !important;color: var(--font-white-color);}
.download-files:nth-child(2n+1) a:hover{background: var(--fourth-background) !important;color: var(--font-white-color);}
.download-files:nth-child(n+1) a:hover{background: var(--primary-background); color: var(--font-white-color);}
.download-files a i {
font-size:1.5rem;
position: absolute;
right:4px;
top: 50%;
transform: translate(-50%,-50%);
}
/*-------------------------------------------------
6.X Share On Social Media
---------------------------------------------------*/
.share-smedia {
display: flex;
justify-content: end;
align-items: center;
}
.share-smedia a {
background-color:var(--object-one-background);
color:var(--secondary-color);
font-size:1rem;
text-align: center;
border-radius:var(--circle-border-radius);
height: 40px;
width: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
transition: all 500ms ease;
position: relative;
z-index: 1;
overflow: hidden;
}
.share-smedia a i {font-size: 1rem;}
.share-smedia a:hover i {color:var(--font-white-color) !important;}
.share-smedia a:hover svg {fill:var(--font-white-color) !important;}
.share-smedia a:after {
background-color:var(--primary-background);
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
opacity: 1;
height: 100%;
transition-delay: .1s;
transition-timing-function: ease-in-out;
transition-duration: .4s;
transition-property: all;
transform-origin: top;
transform-style: preserve-3d;
transform: scaleY(0);
}
.share-smedia a[media="facebook"]:after {background-color:var(--facebook);}
.share-smedia a[media="twitter"]:after {background-color: var(--black-background);}
.share-smedia a[media="instagram"]:after {background: radial-gradient(circle at 30% 107%, var(--instagram-one-color) 0%, var(--instagram-one-color) 5%, var(--instagram-two-color) 45%,var(--instagram-three-color) 60%,var(--instagram-four-color) 90%);}
.share-smedia a[media="linkedin"]:after {background-color:var(--linkedin);}
.share-smedia a[media="youtube"]:after {background-color:var(--youtube);}
.share-smedia a[media="whatsapp"]:after {background-color:var(--whatsapp);}
.share-smedia a[media="telegram"]:after {background-color:var(--telegram);}
.share-smedia a:hover:after {
opacity: 1;
transform: scaleY(1);
}
.share-smedia a+a {margin-left: 10px;}
/*-------------------------------------------------
6.X Comments
---------------------------------------------------*/
.comments-wrap{
background: var(--background-white);
font-family: var(--font-family);
margin:2rem 0;
padding:2rem 1.5rem;
}
div[class="comments-wrap"]:last-child{margin-top: 4rem;}
.comments.full .comments-wrap{margin-top: .75rem;}
.comments-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--paragraph-color);
line-height: 1.2;
margin-bottom: 2.2rem;
padding:0;
position: relative;
}
.comments-title span{font-weight: 400;}
/*.comments-title::after {
background: var(--primary-background) none repeat scroll 0 0;
content: "";
border-radius: var(--object-border-radius);
display: block;
height: 3px;
width: 30px;
position: absolute;
bottom: -10px;
transition: all 0.2s ease-in-out;
}
.comments-title:hover::after {width:50px;}*/
ul.comments-list{
list-style:none;
padding: 1rem 0;
margin: 1.2rem 0;
}
ul.sub-comments {
list-style:none;
margin: 1rem 0;
padding: 0 0 0 3rem;
}
ul.comments-list li{ margin:2px 0 12px; position:relative;}
ul.comments-list article {
/*border-bottom: 2px solid var(--border-grey-color);*/
padding-bottom:2rem;
margin-bottom:2rem;
display: flex;
justify-content: space-between;
align-items: start;
position: relative;
}
ul.comments-list article::before {
border-radius: var(--object-border-radius);
content:"";
display:block;
width:0;
height:2px;
position: absolute;
right: 0;
bottom:-3px;
left: 0;
z-index: 999;
transition: width 0.5s;
}
ul.comments-list article::after {
background-color:var(--object-one-background);
content:"";
display:block;
height:2px;
position: absolute;
right: 0;
bottom:-3px;
left: 0;
transition: width 0.5s;
}
.comments-list article .comments-head {
width: 105px;
overflow: hidden;
}
.comments-list article .comments-head > img {width: 100%;}
.comments-list article .comments-body {padding-left: 1rem;flex-grow: 1;}
.comments-list article .comments-body h3,
.comments-list article .comments-body p {margin: 0;}
.comments-list article .comments-body h3 {
font-size: 1rem;
font-weight: 600;
color: var(--paragraph-color);
margin-bottom:.5rem;
}
.comments-list article .comments-body p {
font-size: 1rem;
font-weight: 400;
color: var(--paragraph-color);
margin-bottom: .5rem;
}
.comments-list article .comments-body .date-line {
font-size: .8rem;
color: var(--date-color);
font-weight: 400;
margin-left:1rem;
}
.btn-reply {
background:transparent;
font-size:.9rem;
font-weight: 400;
color:var(--primary-color);
line-height: 1;
letter-spacing:.02rem;
text-align: center;
border: 1px solid var(--primary-border-color);
margin-bottom: 0;
padding:.65rem;
cursor: pointer;
display: inline-flex;
align-items: center;
vertical-align: middle;
white-space: nowrap;
position: relative;
z-index: 1;
transition: all 0.3s ease 0s;
touch-action: manipulation;
user-select: none;
-moz-user-select: none;
}
.btn-reply span {font-weight: 500;padding-left: .3rem;}
.btn-reply::after {
font-family: "Font Awesome 5 Pro", serif;
color: var(--font-white-color);
font-weight: lighter;
font-size: 1rem;
content: "\f105";
margin-left: 40px;
}
.btn-reply::before {
background:var(--primary-background);
content: "";
width: 38px;
height: 38px;
position: absolute;
top: 50%;
right: 0;
z-index: -1;
transform: translateY(-50%);
transition: all 0.3s ease 0s;
}
.btn-reply:hover::before {width: 100%;}
.btn-reply:hover,
.btn-reply:active,
.btn-reply:focus{color:var(--font-white-color);}
ul.comments-list article:hover img{ opacity:1;}
ul.comments-list article:hover::before {background-color:var(--primary-background);width:100%;}
.like-dislike {
font-family:var(--font-family);
border-top: 1px solid var(--border-grey-color);
margin: .7rem 0 0;
padding: .75rem 0;
}
.accordion-flush .accordion-item .like-dislike{padding:.75rem;}
ul.like-dislike>li {
display:inline-block;
margin: 0 .5rem 0 0;
}
ul.like-dislike>li:last-child {margin-right: 0;}
.like-dislike i {
background-color: var(--primary-transparent-background);
font-size:1rem;
color:var(--primary-color);
line-height: 32px;
text-align: center;
margin-right:.3rem;
width: 32px;
height: 32px;
transition: all 0.5s ease-in-out;
}
.like-dislike a,
.like-dislike a:focus,
.like-dislike a:active {
font-size: 1rem;
font-weight: 400;
color:var(--paragraph-color);
line-height: 1.2;
}
.like-dislike a.active i,
.like-dislike a:hover i,
.like-dislike a:hover i{background-color:var(--primary-background);color: var(--font-white-color);}
/**+.like-dislike {margin-top:25px;}*/
.comments-details-wrap {
border:1px solid var(--border-grey-color);
width:auto;
margin: 0;
padding:5px;
transition: all 0.2s ease-in-out;
}
.comments-details-wrap:hover { border:1px solid var(--primary-border-color);}
.comments-media {
background-color: var(--background-white);
border-radius: 8px;
max-width:150px;
position: relative;
overflow: hidden;
}
.comments-info h5{
font-size: 1rem;
font-weight: 600;
color:var(--paragraph-color);
line-height: 1.2;
margin:0 0 5px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.comments-info a,
.comments-info h5 a {
line-height: 1.5;
color: var(--paragraph-color);
/*display:block;*/
margin-right: .5rem;
transition: all 0.2s ease-in-out;
}
.comments-info i {
color: var(--paragraph-color);
font-size: 1rem;
line-height:1.2;
margin-right: .3rem;
transition: all 0.2s ease-in-out;
}
.comments-info h5 a:hover,
.comments-info a:hover,
.comments-info a:hover i{color: var(--primary-color) !important;}
.comments-media img {
vertical-align: middle;
width: 100%;
height: auto;
display: block;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
transition: all 3s ease 0s;
}
.comments-media:hover img {transform: scale(2);}
.comments.full {
border: 1px solid var(--border-grey-color);
padding: 1rem;
}
/*-------------------------------------------------
6.X Membership
---------------------------------------------------*/
.login-form-box {
background-color: var(--background-white);
padding: 1.5rem;
position: relative;
}
/*=================================================
END OF MORE CONTAINER
===================================================*/
/*=================================================
7. FOOTER
===================================================*/
#footer-wrapper{
background-color:var(--footer-background);
font-family:var(--font-family);
position: relative;
}
.first-line-info{position: relative;padding:0;}
/*-------------------------------------------------
7.A Title
---------------------------------------------------*/
h3.foot-title{
font:normal normal 600 1.375rem/1.5 var(--font-family);
color:var(--font-white-color);
margin-bottom: 2rem;
position: relative;
}
/*h3.foot-title::before {
background:var(--primary-background) none repeat scroll 0 0;
content: "";
border-radius:var(--object-border-radius);
display: block;
height: 3px;
width: 30px;
position: absolute;
bottom: -10px;
transition: all 0.2s ease-in-out;
}
h3.foot-title:hover::before{width: 50px;}*/
h3.foot-title span{font-weight:400;}
/*-------------------------------------------------
7.B Address
---------------------------------------------------*/
ul.site-contact{
margin: 0;
padding: 0;
list-style: none;
}
ul.site-contact li{
color:var(--font-foot-color);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 0 0 7px 0;
padding:0;
transform: translateZ(0);
transition: transform .2s ease-out;
}
ul.site-contact li:hover{
color: var(--primary-color);
transform: translateX(7px);
}
ul.site-contact li i {
color:var(--primary-color);
font-size: 1.2rem;
width: 20px;
margin-right: .75rem;
}
/*-------------------------------------------------
7.C List
---------------------------------------------------*/
ul.foot-list {list-style: none;margin:0;padding:0;font-family:var(--font-family);}
ul.foot-list li{
font-size:1rem;
font-weight: 400;
margin: 0 0 7px 0;
padding: 0 5px;
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
transform: translateZ(0);
transition: transform .2s ease-out;
}
ul.foot-list li::before {
background: var(--primary-background);
border-radius:var(--object-border-radius);
content: "";
position: absolute;
left: 0;
top: 10px;
width: 24px;
height: 1px;
}
ul.foot-list li:hover{transform: translateX(7px);}
ul.foot-list li a{color:var(--font-foot-color);padding-left: 30px;}
ul.foot-list li a:hover{color:var(--primary-color);}
/*-------------------------------------------------
7.D Blog
---------------------------------------------------*/
.blog-item {
font-family: var(--font-family);
display: flex;
align-items:center;
margin-bottom: 1rem;
}
.blog-item:last-child{margin-bottom: 0;}
.blog-item .item-img img{
width:75px;
height: 75px;
margin-right: 8px;
border-radius: var(--circle-border-radius);
transition: all 0.3s ease-in-out;
}
.blog-item .item-info span {
color:var(--primary-color);
font-size: 1rem;
font-weight: 300;
display: inline-block;
}
.blog-item .item-info span i {
font-size: 1rem;
color: var(--primary-color);
margin-right: 5px;
}
.blog-item .item-info h6 {
color: var(--font-foot-color);
font-size: 1rem;
line-height: 1.4;
font-weight: 400;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: all 0.3s ease-out 0s;
}
.blog-item .item-info h6 a{color:var(--font-foot-color);}
.blog-item .item-info h6:hover,
.blog-item .item-info h6 a:hover{color:var(--primary-color);}
a.blog-more-btn {
font-family:var(--font-family);
color: var(--font-foot-color);
font-size: 1rem;
font-weight: 500;
position: absolute;
bottom:0;
right:0;
z-index: 2;
display: block;
}
a.blog-more-btn:before{
background-color:var(--primary-background);
border-radius:var(--circle-border-radius);
content:'';
width:22px;
height:22px;
position:absolute;
top:0;
left:0;
z-index: -1;
transition:all 300ms ease;
}
a.blog-more-btn i {
color: var(--font-foot-color);
font-size:1.55rem;
line-height: .9;
vertical-align: middle;
width: 25px;
margin: 0 0 0 15px;
}
a.blog-more-btn:hover{color:var(--font-foot-color);}
a.blog-more-btn:hover:before {left: 15px;}
/*-------------------------------------------------
7.E Newsletter
---------------------------------------------------*/
.bulten-content {
position: relative;
z-index: 1;
}
.bulten-info{
color:var(--bulten-font-color);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin-bottom: 1.5rem;
}
.bulten-info > p {margin: 0;}
.bulten-info > p > b,
.bulten-info > p > strong {font-weight: 600;}
.bulten-info h3{
font-size:1.5rem;
font-weight: 300;
margin-bottom: 10px;
}
.bulten-info span{
font-weight: bold;
line-height: 1.6rem;
margin-bottom: 0;
}
.bulten-form input {
background-color:transparent;
color:var(--bulten-font-color);
font-size: 1rem;
font-weight: 300;
border: 2px solid var(--bulten-border-color);
border-radius:var(--object-two-border-radius);
width: 100%;
height: 60px;
padding: 0 20px;
outline: 0;
transition: all .4s ease 0s;
}
.bulten-form input:active,
.bulten-form input:focus{
border-color:var(--primary-border-color);
color:var(--primary-color);
}
.bulten-form ::placeholder {color:var(--white-09-opacity);} /* Firefox */
.bulten-form :-ms-input-placeholder {color:var(--white-09-opacity);} /* Internet Explorer 10-11 */
.bulten-form ::-ms-input-placeholder {color:var(--white-09-opacity);} /* Microsoft Edge */
.bulten-content .bulten-form button {
background-color:var(--bulten-button-background);
color:var(--font-white-color);
font-size: 1rem;
border: none;
border-radius: var(--circle-border-radius);
position: absolute;
right:7px;
bottom: 8px;
height: 45px;
width: 45px;
line-height: 45px;
transition: 0.3s;
}
.bulten-content .bulten-form button:hover {background-color:var(--bulten-button-hover-background);}
.bulten-content .bulten-form button i{color:var(--font-white-color);}
/*-------------------------------------------------
7.F Copyright
---------------------------------------------------*/
.second-line-info{
background-color:var(--copyright-background);
font-size: 1rem;
font-weight: 400;
line-height: 1.2;
color:var(--font-foot-color);
padding: 1.2rem 0;
}
/*.copyright p{
font-weight: 400;
font-size: 1rem;
margin: 0;
padding: 0;
}*/
.copyright{width: 100%;}
.copyright a{
color:var(--primary-color);
position: relative;
}
.copyright a:before {
background: var(--tertiary-background);
border-radius: var(--object-border-radius);
content: "";
width: 0;
height: 1px;
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
transition: width 0.4s linear;
}
.copyright a:hover:before {
width: 100%;
left: 0;
right: auto;
}
.copyright a:hover,
.copyright a:hover{
color:var(--tertiary-color);
text-decoration: none;
}
/*-------------------------------------------------
7.G Social Media
---------------------------------------------------*/
ul.ssocial-media{
list-style: none;
padding: 0;
margin:0;
text-align: right;
}
ul.ssocial-media li{
margin-right: 5px !important;
padding: 0 !important;
border:none;
outline:none;
position:relative;
z-index:0;
cursor:pointer;
display:inline-block;
}
ul.ssocial-media li:last-child{margin-right:0 !important;}
ul.ssocial-media li:hover::before {
background:var(--background-white);
box-shadow:none;
opacity:1;
transform:scale(0.7)
}
/*ul.ssocial-media li::after {
content:'';
height:200%;
position:absolute;
top:-50%;
left:-50%;
width:200%
}*/
ul.ssocial-media li::before {
background:none;
border-radius:50%;
content:'';
display:block;
position:absolute;
top:-10px;
right:-10px;
bottom:-10px;
left:-10px;
opacity:0;
z-index:-1;
box-sizing:border-box;
transform:scale(0);
transition-property:transform, opacity;
transition-duration:.25s;
transition-timing-function:cubic-bezier(0.4,0.0,0.2,1);
}
ul.ssocial-media li a {
background-color:var(--background-white);
font-size: 1rem !important;
color:var(--primary-color);
line-height: 40px !important;
border-radius: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
width: 40px;
height: 40px;
display: inline-block;
transition: all 0.3s ease-in-out 0s;
}
ul.ssocial-media li:hover a:hover{color: rgba(255,255,255,1.00);}
ul.ssocial-media li[att*="facebook"]:hover a{
background-color: transparent;
color:var(--facebook) !important;
}
ul.ssocial-media li[att*="facebook"]:hover::before{border:2px solid var(--facebook);}
ul.ssocial-media li[att*="twitter"]:hover a {
background-color: transparent;
color:var(--font-black-color) !important;
}
ul.ssocial-media li[att*="twitter"]:hover a svg{
fill:var(--font-black-color) !important;
}
ul.ssocial-media li[att*="twitter"]:hover::before{border:2px solid var(--font-black-color);}
ul.ssocial-media li[att*="instagram"]:hover a {
background-color: transparent;
color:var(--instagram) !important;
}
ul.ssocial-media li[att*="instagram"]:hover::before{border:2px solid var(--instagram);}
ul.ssocial-media li[att*="google"]:hover a {
background-color: transparent;
color:var(--youtube) !important;
}
ul.ssocial-media li[att*="google"]:hover::before{border:2px solid var(--youtube);}
ul.ssocial-media li[att*="linkedin"]:hover a {
background-color: transparent;
color:var(--linkedin) !important;
}
ul.ssocial-media li[att*="linkedin"]:hover::before{border:2px solid var(--linkedin);}
ul.ssocial-media li[att*="youtube"]:hover a {
background-color: transparent;
color:var(--youtube) !important;
}
ul.ssocial-media li[att*="google"]:hover::before{border:2px solid var(--youtube);}
/*-------------------------------------------------
7.H Scroll Up/ Down
---------------------------------------------------*/
.scroll-up {
color: transparent;
font-size: 0;
text-align: center;
text-decoration: none;
border-top-left-radius: var(--object-two-border-radius);
border-top-right-radius: var(--object-two-border-radius);
line-height: 2.5rem;
width:2.75rem;
height:4.5rem;
padding: 0;
margin-right: 0 !important;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
right: 20px !important;
bottom: 83px;
z-index: 999;
opacity: 1 !important;
box-shadow: 0 0 0 3px var(--primary-background);
transition: all 0.4s ease 0s;
}
.scroll-up::before {
background: var(--primary-background) none repeat scroll 0 0;
box-sizing: content-box;
content: "";
border-top-left-radius: var(--object-two-border-radius);
border-top-right-radius: var(--object-two-border-radius);
width: 100%;
height: 100%;
padding: 2px;
position: absolute;
top: -2px;
left: -2px;
pointer-events: none;
transition: transform 0.2s ease 0s, opacity 0.3s ease 0s;
opacity: 1;
z-index: -1;
}
.scroll-up::after {
font-family: "Font Awesome 5 Pro",serif;
font-size: 1.1rem;
line-height: 3.3;
color: var(--font-white-color);
content: "\f102";
transition: all 0.4s ease 0s;
}
.scroll-up:hover {box-shadow: 0 0 0 3px var(--primary-background);}
.scroll-up:hover::before {
opacity: 0;
transform: scale(1.3);
}
.scroll-up:hover::after {color: var(--primary-color);}
/*=================================================
END OF FOOTER
===================================================*/
/*=================================================
8. RESPONSIVE DESIGN
===================================================*/
/*-------------------------------------------------
8.A 100 X 576 (mobile)
---------------------------------------------------*/
@media screen and (min-width:100px) and (max-width:576px){
.topbar-area div div div:first-child {display: none;}
.site-logo img{max-width: 165px;}
ul.ctlist-wrap li.header-advert,
ul.ctlist-wrap li.header-contacts {display: none;}
ul.ctlist-wrap li.header-user-menu{margin-left: 0;}
#filter-wrapper .general-frm label {margin-bottom:1rem;}
.ssb {padding: 330px 0;}
.single1x .flex-caption{bottom: 26%;}
.single1x .flex-caption h2 {font-size: 1.2rem;}
.single1x .flex-caption h3 {font-size: 1.5rem;}
.single1x .flex-caption P {font-size: .9rem;}
.single1x .flex-control-nav{bottom: 20%;}
.single1x .flex-direction-nav .flex-next,.single1x .flex-direction-nav .flex-prev{bottom: 13%;}
.multiple4x .flex-direction-nav .flex-next,
.multiple4x .flex-direction-nav .flex-prev{bottom:6%;}
.btn-generalone{font-size: .8rem;padding: .65rem;}
.btn-generalone::before{width: 36px;height: 36px;}
.copyright {text-align: center}
ul.ssocial-media {
text-align: center;
margin-top: 1.5rem;
}
}
/*-------------------------------------------------
8.B 576 X 768 (tablet)
---------------------------------------------------*/
@media all and (min-width:576px) and (max-width:768px){
.topbar-area div div div:first-child {display: none;}
.site-logo img{max-width: 185px;}
ul.ctlist-wrap li.header-advert,
ul.ctlist-wrap li.header-contacts {display: none;}
ul.ctlist-wrap li.header-user-menu{margin-left: 0;}
#filter-wrapper .general-frm label {margin-bottom:1rem;}
.ssb {padding: 330px 0;}
.single1x .flex-caption{bottom: 26%;}
.single1x .flex-caption h2 {font-size: 1.4rem;}
.single1x .flex-caption h3 {font-size: 1.7rem;}
.single1x .flex-caption P {font-size: 1rem;}
.single1x .flex-control-nav{bottom: 20%;}
.single1x .flex-direction-nav .flex-next,.single1x .flex-direction-nav .flex-prev{bottom: 13%;}
.multiple4x .flex-direction-nav .flex-next,
.multiple4x .flex-direction-nav .flex-prev{bottom:6%;}
.btn-generalone{font-size: .9rem;padding: .75rem;}
.btn-generalone::before{width: 40px;height: 40px;}
.copyright {text-align: center}
ul.ssocial-media {
text-align: center;
margin-top: 1.5rem;
}
}
/*-------------------------------------------------
8.C 768 X 1024 (medium tablet and phone)
---------------------------------------------------*/
@media all and (min-width:768px) and (max-width:1024px){
.topbar-area div div div:first-child {display: none;}
.site-logo img{max-width: 205px;}
ul.ctlist-wrap li.header-advert,
ul.ctlist-wrap li.header-contacts {display: none;}
ul.ctlist-wrap li.header-user-menu{margin-left: 0;}
.ssb {padding: 330px 0;}
.single1x .flex-caption{bottom: 26%;}
.single1x .flex-caption h2 {font-size: 1.4rem;}
.single1x .flex-caption h3 {font-size: 1.7rem;}
.single1x .flex-caption P {font-size: 1rem;}
.single1x .flex-control-nav{bottom: 20%;}
.single1x .flex-direction-nav .flex-next,.single1x .flex-direction-nav .flex-prev{bottom: 13%;}
.btn-generalone{font-size: .9rem;padding: .75rem;}
.btn-generalone::before{width: 40px;height: 40px;}
}
/*-------------------------------------------------
8.D 1024 X 1199 (large tablet and laptop)
---------------------------------------------------*/
@media all and (min-width:1024px) and (max-width:1199px){
ul.ctlist-wrap li.header-contacts {display: none;}
ul.ctlist-wrap li.header-advert{margin-left: 0;}
.single1x .flex-caption{bottom: 26%;}
.single1x .flex-caption h2 {font-size: 1.4rem;}
.single1x .flex-caption h3 {font-size: 1.7rem;}
.single1x .flex-caption P {font-size: 1rem;}
.single1x .flex-control-nav{bottom: 20%;}
.single1x .flex-direction-nav .flex-next,.single1x .flex-direction-nav .flex-prev{bottom: 13%;}
}
/*-------------------------------------------------
8.E 1199 X 1399 (large desktop and wide monitor)
---------------------------------------------------*/
@media screen and (min-width:1199px) and (max-width:1399px){
.single1x .flex-caption{bottom: 26%;}
.single1x .flex-control-nav{bottom: 20%;}
.single1x .flex-direction-nav .flex-next,.single1x .flex-direction-nav .flex-prev{bottom: 13%;}
}
/*-------------------------------------------------
7.F 1400 > (larger than 1400px) (large desktop)
---------------------------------------------------*/
@media screen and (min-width:1400px){
.single1x .flex-caption{bottom: 26%;}
.single1x .flex-control-nav{bottom: 20%;}
.single1x .flex-direction-nav .flex-next,
.single1x .flex-direction-nav .flex-prev{bottom: 13%;}
}
/*-------------------------------------------------
7.G Print
---------------------------------------------------*/
@media print{
}
/*=================================================
END OF RESPONSIVE DESIGN
===================================================*/
/*=================================================
8. ANIMATION
===================================================*/
.scroll-wrap{position: relative;}
.scroll-downs {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width :34px;
height: 55px;
}
.mousey {
border: 2px solid var(--border-grey-color);
border-radius: var(--object-border-radius);
width: 3px;
padding: .5rem 1rem;
height: 35px;
box-sizing: content-box;
}
.scroller {
background-color:var(--primary-background);
border-radius:4px;
width: 3px;
height: 12px;
animation-name: scroll-effect;
animation-duration: 2.2s;
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
animation-iteration-count: infinite;
}
/*-------------------------------------------------
8.A Scroll
---------------------------------------------------*/
@keyframes scroll-effect {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(30px); opacity: 0;}
}
/*-------------------------------------------------
8.B Slider
---------------------------------------------------*/
.slider-animation {
position: relative;
z-index: 9;
}
.slider-animation > * {
opacity: 0;
visibility: hidden;
animation-name: fadeOutUp;
}
.slider-animation > *:nth-child(1) {
animation-delay: 0.5s;
animation-duration: 0.5s;
}
.slider-animation > *:nth-child(2) {
animation-delay: 1s;
animation-duration: 1s;
}
.slider-animation > *:nth-child(3) {
animation-delay: 1.5s;
animation-duration: 1.5s;
}
.slider-animation > *:nth-child(4) {
animation-delay: 2s;
animation-duration: 2s;
}
.slider-animation > *:nth-child(5) {
animation-delay: 2.5s;
animation-duration: 2.5s;
}
.slider-animation > *:nth-child(6) {
animation-delay: 3s;
animation-duration: 3s;
}
.slider-animation > *:nth-child(7) {
animation-delay: 3.5s;
animation-duration: 3.5s;
}
.slider-animation > *:nth-child(8) {
animation-delay: 4s;
animation-duration: 4s;
}
.slider-animation > *:nth-child(9) {
animation-delay: 4.5s;
animation-duration: 4.5s;
}
.slider-animation > *:nth-child(11) {
animation-delay: 5s;
animation-duration: 5s;
}
.flex-active-slide .slider-animation > * {
opacity: 1;
visibility: visible;
animation-name: fadeInUp;
}
.add-animation {
animation-duration: 1s;
animation-fill-mode: both;
}
/*@keyframes fadeInUp{
0%{opacity:0;transform:translate3d(0,100%,0)}
to{opacity:1;transform:translateZ(0)}
}
.fadeInUp{animation-name:fadeInUp}
@keyframes fadeOutUp{
0%{opacity:1}
to{opacity:0;transform:translate3d(0,-100%,0)}
}
.fadeOutUp{animation-name:fadeOutUp}*/
@keyframes fadeInUp {
0% {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.fadeInUp {
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes fadeOutUp {
0% {
opacity: 1;
}
to {
transform: translateY(-100%);
opacity: 0;
}
}
.fadeOutUp {
animation-name: fadeOutUp;
animation-duration: 1s;
animation-fill-mode: both;
}
/*=================================================
END OF ANIMATION
===================================================*/