/* version 1.0.1 */
/*------------------------------------------------------------------
[Table of contents]
1. Form Elements
2. Buttons
3. Social Media
3.a.) social-media-element-1
3.b.) social-media-element-2
3.c.) social-media-element-3
3.d.) social-media-element-4
3.e.) social-media-element-5
3.f.) social-media-element-6
4. Blockquote
4.a.) blockquote-element-1
4.b.) blockquote-element-2
4.c.) blockquote-element-3
4.d.) blockquote-element-4
4.e.) blockquote-element-5
4.f.) blockquote-element-6
5. Tables
6. Divider
7. Headings
7.a.) heading-element-1
7.b.) heading-element-2
7.c.) heading-element-3
7.d.) heading-element-4
7.e.) heading-element-5
7.f.) heading-element-6
7.g.) heading-element-7
7.h.) heading-element-8
8. Blog Container
8.a.) blog-container-1
8.b.) blog-container-2
8.c.) blog-container-3
8.d.) blog-container-4
8.e.) blog-container-5
8.f.) blog-container-6
9. Testimonial
9.a.) testimonial-container-1
9.b.) testimonial-container-2
9.c.) testimonial-container-3
9.d.) testimonial-container-4
10. Frames
10.a.) frame-container-1
10.b.) frame-container-2
10.c.) frame-container-3
10.d.) frame-container-4
10.e.) frame-container-5
11. Portfolio Element
11.a.) portfolio-type-1
11.b.) portfolio-type-2
11.c.) portfolio-filter-2
11.d.) portfolio-type-3
11.e.) portfolio-type-4
11.f.) portfolio-type-5
12. Team Element
12.a.) team-element-1
12.b.) team-element-2
13. Progress Bar
13.a.) progress-bar-1
13.b.) progress-bar-2
13.c.) progress-bar-3
13.e.) progress-bar-4
14. Tabs
14.a.) tabs-element-1
14.b.) tabs-element-2
14.c.) tabs-element-3
14.d.) tabs-element-4
14.e.) tabs-element-5
14.f.) tabs-element-6
14.g.) tabs-element-7
14.h.) tabs-element-8
14.i.) tabs-element-9
14.j.) tabs-element-10
15. Tour
15.a.) tour-element-1
15.b.) tour-element-2
15.c.) tour-element-3
15.d.) tour-element-4
15.e.) tour-element-5
15.f.) tour-element-6
15.g.) tour-element-7
15.h.) tour-element-8
16. Bulleted List
16.a.) bulleted-list-style-1
16.b.) bulleted-list-style-2
16.c.) custom-bullet-1
16.d.) custom-bullet-2
16.e.) custom-bullet-3
17. Media Element
17.a.) media-element-1
17.b.) media-element-2
17.c.) media-element-3
17.d.) media-element-4
17.e.) media-element-5
17.f.) media-element-6
17.g.) media-element-7
17.h.) media-element-8
17.i.) media-element-9
18. Highlight Heading
18.a.) highligh-heading-1
18.b.) highligh-heading-2
18.c.) highligh-heading-3
18.d.) highligh-heading-4
19. Tooltip
20. Boxed Elements
20.a.) iconbox-1
20.b.) iconbox-2
20.c.) iconbox-3
20.d.) iconbox-4
20.e.) iconbox-5
20.f.) iconbox-6
20.g.) iconbox-7
20.h.) iconbox-8
20.i.) iconbox-9
20.j.) iconbox-10
20.k.) iconbox-11
20.l.) iconbox-12
20.m.) iconbox-13
20.n.) iconbox-14
20.o.) iconbox-15
20.p.) iconbox-16
20.q.) iconbox-17
20.r.) iconbox-18
20.s.) iconbox-19
20.t.) iconbox-20
20.u.) iconbox-21
22.v.) iconbox-22
21. Accordion
21.a.) accordion-element-1
21.b.) accordion-element-2
21.c.) accordion-element-3
21.d.) accordion-element-4
22. Message Box
22.a.) message-box-1
22.b.) message-box-2
22.c.) message-box-3
22.d.) message-box-4
22.e.) message-box-5
22.f.) message-box-6
23. Grid Element
24. Logo Element
24.a.) logo-element-1
24.b.) logo-element-2
24.c.) logo-element-3
24.d.) logo-element-4
24.e.) logo-element-5
24.f.) logo-element-6
25. Loop Elements
25.a.) loop-logo-element-1
25.b.) loop-logo-element-2
25.c.) loop-logo-element-3
26. Counter
26.a.) counter-element-1
26.b.) counter-element-2
26.c.) counter-element-3
26.d.) counter-element-3
27. Percentage Counter
27.a.) percentage-counter-element-1
27.b.) percentage-counter-element-2
28. Google Map
28.a.) google-map-element-1
28.b.) google-map-element-2
28.c.) google-map-element-3
29. Callout Container
29.a.) callout-container-element-1
29.b.) callout-container-element-2
29.c.) callout-container-element-3
30. Price Table
30.a.) price-table-element-1
30.b.) price-table-element-2
31. Call To Action
31.a.) call-to-action-element-1
31.b.) call-to-action-element-2
31.c.) call-to-action-element-3
31.d.) call-to-action-element-4
31.e.) call-to-action-element-4
32. Dropcap Element
32.a.) dropcap-element-1
32.b.) dropcap-element-2
32.c.) dropcap-element-3
32.d.) dropcap-element-4
32.e.) dropcap-element-5
32.f.) dropcap-element-6
32.g.) dropcap-element-7
32.h.) dropcap-element-8
32.i.) dropcap-element-9
33. Icon Button
33.a.) icon-button-element-1
34. Image Frame
34.a.) img-frame-element-1
34.b.) img-frame-element-2
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
1. Form Elements
-------------------------------------------------------------------*/
[role="button"] {
cursor: pointer;
}
fieldset {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
min-width: 0;
border: 0;
}
label {
display: inline-block;
max-width: 100%;
font-weight: bold;
}
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="radio"],
input[type="checkbox"] {
margin-top: 4px;
margin-top: 1px \9;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
line-height: normal;
}
input[type="file"] {
display: block;
}
input[type="range"] {
display: block;
width: 100%;
}
select[multiple],
select[size] {
height: auto;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
output {
display: block;
}
.theme-form {
display: block;
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
width: 100%;
height: 46px;
border: 1px solid;
border-color: #ebebeb;
background-color: #ffffff;
background-image: none;
font-weight: 400;
}
.theme-form:focus {
outline: 0;
border-color: #c2c2c2;
background-color: #fffeef;
}
.theme-form::-moz-placeholder {
color: rgba(0,0,0,0.5);
opacity: 1;
}
.theme-form:-ms-input-placeholder {
color: rgba(0,0,0,0.5);
}
.theme-form::-webkit-input-placeholder {
color: rgba(0,0,0,0.5);
}
.theme-form[disabled],
.theme-form[readonly],
fieldset[disabled] .theme-form {
background-color: #eeeeee;
opacity: 1;
}
.theme-form[disabled],
fieldset[disabled] .theme-form {
cursor: not-allowed;
}
textarea.theme-form {
height: auto;
}
input[type="search"] {
-webkit-appearance: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"].theme-form,
input[type="time"].theme-form,
input[type="datetime-local"].theme-form,
input[type="month"].theme-form {
line-height: 46px;
}
}
.form-group {
margin-bottom: 20px;
}
.radio,
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
margin-bottom: 0;
padding-left: 20px;
min-height: 20px;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
position: relative;
display: inline-block;
margin-bottom: 0;
padding-left: 20px;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
cursor: not-allowed;
}
.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
cursor: not-allowed;
}
/*------------------------------------------------------------------
2. Button
-------------------------------------------------------------------*/
.btn {
position: relative;
display: inline-block;
margin-right: 10px;
margin-bottom: 0;
margin-bottom: 10px;
padding-top: 14px;
padding-right: 30px;
padding-bottom: 14px;
padding-left: 30px;
border: none;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
background-image: none;
vertical-align: middle;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
white-space: nowrap;
font-weight: normal;
font-weight: 700;
font-size: 14px;
line-height: 20px;
cursor: pointer;
-ms-touch-action: manipulation;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-flex{
display: inline-flex;
}
.btn-icon .icon
.btn:hover{
text-decoration: none;
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
-webkit-box-shadow: none;
box-shadow: none;
opacity: 0.65;
filter: alpha(opacity=65);
cursor: not-allowed;
}
a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none;
}
.btn-styles {
background-color: transparent;
color: #363636;
}
.btn-styles:hover,
.btn-styles:active,
.btn-styles:focus{
background-color: transparent;
color: #555;
}
.btn-styles:active{
background-image: none;
}
.btn-md {
padding-top: 8px;
padding-right: 25px;
padding-bottom: 8px;
padding-left: 25px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
}
.btn-sm {
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-size: 12px;
}
.btn-block {
width: 100%;
}
.btn-icon{
padding-right: 18px;
}
.btn-icon .icon{
margin-left: 8px;
}
.btn-md.btn-icon{
padding-right: 13px;
}
.btn-sm.btn-icon{
padding-right: 13px;
}
.btn-icon-left{
padding-right: 30px;
padding-left: 18px;
}
.btn-md.btn-icon-left{
padding-right: 25px;
padding-left: 13px;
}
.btn-sm.btn-icon-left{
padding-right: 20px;
padding-left: 13px;
}
.btn-icon-left .icon{
margin-right: 8px;
margin-left: 0;
}
.btn-icon .icon{
display: inline-block;
margin-top: -2px;
margin-bottom: -2px;
vertical-align: middle;
}
.btn-flex.btn-icon .icon{
margin-top: 0;
margin-bottom: 0;
}
.btn-icon-adv{
overflow: hidden;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.btn-icon-adv span{
float: left;
padding-top: 14px;
padding-right: 10px;
padding-bottom: 14px;
padding-left: 30px;
}
.btn-md.btn-icon-adv span{
padding-top: 8px;
padding-right: 10px;
padding-bottom: 8px;
padding-left: 25px;
}
.btn-sm.btn-icon-adv span{
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 25px;
}
.btn-icon-adv-left span{
padding-top: 14px;
padding-right: 30px;
padding-bottom: 14px;
padding-left: 10px;
}
.btn-md.btn-icon-adv-left span{
padding-top: 8px;
padding-right: 25px;
padding-bottom: 8px;
padding-left: 10px;
}
.btn-sm.btn-icon-adv-left span{
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 10px;
}
.btn-icon-adv .icon{
float: left;
width: 48px;
height: 48px;
background-color: rgba(0,0,0,0.2);
text-align: center;
font-size: 18px;
}
.btn-icon-adv .icon:before{
line-height: 48px;
}
.btn-md.btn-icon-adv .icon{
width: 36px;
height: 36px;
font-size: inherit;
}
.btn-md.btn-icon-adv .icon:before{
line-height: 36px;
}
.btn-sm.btn-icon-adv .icon{
width: 30px;
height: 30px;
font-size: inherit;
}
.btn-sm.btn-icon-adv .icon:before{
line-height: 30px;
}
.btn-icon-adv-2{
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.btn-icon-adv-2 span{
float: left;
padding-top: 14px;
padding-right: 0;
padding-bottom: 14px;
padding-left: 30px;
}
.btn-md.btn-icon-adv-2 span{
padding-top: 8px;
padding-right: 0;
padding-bottom: 8px;
padding-left: 25px;
}
.btn-sm.btn-icon-adv-2 span{
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 20px;
}
.btn-icon-adv-2 .icon{
float: left;
margin-top: 9px;
margin-right: 10px;
margin-bottom: 9px;
margin-left: 10px;
width: 30px;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: rgba(0,0,0,0.2);
}
.btn-icon-adv-2 .icon:before{
line-height: 30px;
}
.btn-md.btn-icon-adv-2 .icon{
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 10px;
width: 26px;
height: 26px;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
}
.btn-md.btn-icon-adv-2 .icon:before{
line-height: 26px;
}
.btn-sm.btn-icon-adv-2 .icon{
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 10px;
width: 20px;
height: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.btn-sm.btn-icon-adv-2 .icon:before{
line-height: 20px;
}
.btn-icon-adv-2-left span{
padding-top: 14px;
padding-right: 30px;
padding-bottom: 14px;
padding-left: 0;
}
.btn-md.btn-icon-adv-2-left span{
padding-top: 8px;
padding-right: 25px;
padding-bottom: 8px;
padding-left: 0;
}
.btn-sm.btn-icon-adv-2-left span{
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 0;
}
.btn-md.btn-icon-adv-2-left .icon{
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 5px;
}
.btn-sm.btn-icon-adv-2-left .icon{
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 5px;
}
.btn-shadow{
-webkit-box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.25);
box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.25);
}
.btn-border:after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 3px solid;
border-color: #363636;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
content: '';
}
.btn-border:hover:after{
border-color: #555;
}
.btn-md.btn-border:after{
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
}
.btn-sm.btn-border:after{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.btn-md.btn-icon-adv-2.btn-border .icon{
margin-top: 7px;
margin-right: 7px;
margin-bottom: 7px;
margin-left: 10px;
width: 22px;
height: 22px;
}
.btn-md.btn-icon-adv-2.btn-border .icon:before{
line-height: 22px;
}
.btn-md.btn-icon-adv-2-left.btn-border .icon{
margin-top: 7px;
margin-right: 10px;
margin-bottom: 7px;
margin-left: 7px;
}
.btn-sm.btn-icon-adv-2.btn-border .icon{
margin-top: 7px;
margin-right: 7px;
margin-bottom: 7px;
margin-left: 10px;
width: 16px;
height: 16px;
font-size: 10px;
}
.btn-sm.btn-icon-adv-2.btn-border .icon:before{
line-height: 16px;
}
.btn-sm.btn-icon-adv-2-left.btn-border .icon{
margin-top: 7px;
margin-right: 10px;
margin-bottom: 7px;
margin-left: 7px;
}
.btn-border.btn-shadow{
-webkit-box-shadow: inset 0px -6px 0px 0px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0px -6px 0px 0px rgba(0,0,0,0.25);
box-shadow: inset 0px -6px 0px 0px rgba(0,0,0,0.25);
}
/*------------------------------------------------------------------
3. Social Media
-------------------------------------------------------------------*/
.social-media-element-full{
display: block;
width: 100%;
}
/* 3.a.) social-media-element-1 */
.social-media-element-1{
display: inline-block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
min-width: 180px;
text-decoration: none !important;
}
.social-media-element-1 i{
position: relative;
float: left;
width: 50px;
height: 50px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 26px;
}
.social-media-element-1 i:before{
line-height: 50px;
}
.social-media-element-1:hover i{
background-color: #585858;
}
.social-media-element-1 i:after{
position: absolute;
top: 10px;
right: -20px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 20px;
border-top-color: #363636;
border-right-width: 20px;
border-right-color: transparent;
border-bottom-width: 0;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.social-media-element-1:hover i:after{
border-top-color: #585858;
}
.social-media-element-1 .content{
display: block;
margin-left: 80px;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
line-height: 20px;
}
.social-media-element-1 .content .title{
display: block;
color: #363636;
letter-spacing: 0;
font-weight: 700;
font-size: 16px;
}
.social-media-element-1 .content .slogan{
color: rgba(54, 54, 54, 0.8);
}
/* 3.b.) social-media-element-2 */
.social-media-element-2{
display: inline-block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
min-width: 120px;
text-decoration: none !important;
}
.social-media-element-2 i{
position: relative;
float: left;
width: 40px;
height: 40px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 22px;
}
.social-media-element-2 i:before{
line-height: 40px;
}
.social-media-element-2:hover i{
background-color: #585858;
}
.social-media-element-2 i:after{
position: absolute;
top: 10px;
right: -15px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 15px;
border-top-color: #363636;
border-right-width: 15px;
border-right-color: transparent;
border-bottom-width: 0;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.social-media-element-2:hover i:after{
border-top-color: #585858;
}
.social-media-element-2 .content{
display: block;
margin-left: 60px;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
line-height: 20px;
}
.social-media-element-2 .content .title{
display: block;
color: rgba(54, 54, 54, 0.8);
letter-spacing: 0;
font-weight: 700;
font-size: 14px;
}
/* 3.c.) social-media-element-3 */
.social-media-element-3{
display: inline-block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 10px;
min-width: 200px;
background-color: #ebebeb;
text-decoration: none !important;
}
.social-media-element-3 i{
position: relative;
float: left;
width: 50px;
height: 50px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 26px;
}
.social-media-element-3 i:before{
line-height: 50px;
}
.social-media-element-3:hover i{
background-color: #585858;
}
.social-media-element-3 .content{
display: block;
margin-left: 70px;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
line-height: 20px;
}
.social-media-element-3 .content .title{
display: block;
color: #363636;
letter-spacing: 0;
font-weight: 700;
font-size: 16px;
}
.social-media-element-3 .content .slogan{
color: rgba(54, 54, 54, 0.8);
}
/* 3.d.) social-media-element-4 */
.social-media-element-4{
display: inline-block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 10px;
min-width: 200px;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: #ebebeb;
text-decoration: none !important;
}
.social-media-element-4 i{
position: relative;
float: left;
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 26px;
}
.social-media-element-4 i:before{
line-height: 50px;
}
.social-media-element-4:hover i{
background-color: #585858;
}
.social-media-element-4 .content{
display: block;
margin-left: 60px;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
line-height: 20px;
}
.social-media-element-4 .content .title{
display: block;
color: #363636;
letter-spacing: 0;
font-weight: 700;
font-size: 16px;
}
.social-media-element-4 .content .slogan{
color: rgba(54, 54, 54, 0.8);
}
/* 3.e.) social-media-element-5 */
.social-media-element-5{
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
width: 100%;
background-color: #363636;
text-decoration: none !important;
}
.social-media-element-5 .contentWrap{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 65px;
padding-right: 0;
padding-bottom: 65px;
padding-left: 0;
}
.social-media-element-5 i{
position: relative;
float: left;
width: 50px;
height: 50px;
background-color: rgba(255,255,255,0.2);
color: #fff;
text-align: center;
font-size: 26px;
}
.social-media-element-5 i:before{
line-height: 50px;
}
.social-media-element-5 i:after{
position: absolute;
top: 10px;
right: -20px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 20px;
border-top-color: rgba(255,255,255,0.2);
border-right-width: 20px;
border-right-color: transparent;
border-bottom-width: 0;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.social-media-element-5 .content{
display: block;
margin-left: 80px;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
line-height: 20px;
}
.social-media-element-5 .content .title{
display: block;
color: #fff;
letter-spacing: 0;
font-weight: 700;
font-size: 16px;
}
.social-media-element-5 .content .slogan{
color: #fff;
}
/* 3.f.) social-media-element-6 */
.social-media-element-6{
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
width: 100%;
background-color: #363636;
text-decoration: none !important;
}
.social-media-element-6 .contentWrap{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 100px;
padding-right: 20px;
padding-bottom: 100px;
padding-left: 20px;
}
.social-media-element-6 i{
position: relative;
float: left;
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(255,255,255,0.2);
color: #fff;
text-align: center;
font-size: 30px;
}
.social-media-element-6 i:before{
line-height: 60px;
}
.social-media-element-6:hover i{
-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
}
.social-media-element-6 .content{
display: block;
margin-left: 80px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
line-height: 20px;
}
.social-media-element-6 .content .title{
display: block;
color: #fff;
letter-spacing: 0;
font-weight: 700;
font-size: 16px;
}
.social-media-element-6 .content .slogan{
color: #fff;
}
/*------------------------------------------------------------------
4. Blockquote
-------------------------------------------------------------------*/
.blockquote{
margin-bottom: 20px;
}
.blockquote cite:before{
content: "— ";
}
/* 4.a.) blockquote-element-1 */
.blockquote-element-1{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 25px;
border: 1px solid;
border-color: #ccc !important;
border-left: 5px solid;
}
.blockquote-element-1 .iconWrap{
display: inline-block;
margin-bottom: 10px;
}
.blockquote-element-1 .icon{
display: block;
height: 30px;
color: #ccc;
font-size: 50px;
line-height: 30px;
}
.blockquote-element-1 .icon:before{
line-height: 30px;
}
.blockquote-element-1 p{
color: #ccc;
font-weight: 300;
font-style: italic;
font-size: 18px;
}
.blockquote-element-1 cite{
font-weight: 400;
font-style: normal;
font-size: 13px;
}
/* 4.b.) blockquote-element-2 */
.blockquote-element-2{
position: relative;
padding-top: 60px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border: 1px solid;
border-color: #ccc;
text-align: center;
}
.blockquote-element-2 .iconWrap{
position: absolute;
top: 0;
left: 50%;
display: block;
margin-top: -30px;
margin-right: 0;
margin-bottom: 10px;
margin-left: -30px;
width: 60px;
height: 60px;
background-color: #ccc;
}
.blockquote-element-2:hover .iconWrap{
background-color: #363636;
}
.blockquote-element-2 .icon{
position: absolute;
top: 20px;
left: 0;
display: block;
width: 60px;
height: 60px;
color: #fff;
text-align: center;
font-size: 50px;
line-height: 60px;
}
.blockquote-element-2 .icon:before{
line-height: 60px;
}
.blockquote-element-2 p{
color: #ccc;
font-weight: 300;
font-style: italic;
font-size: 18px;
}
.blockquote-element-2 cite{
font-weight: 400;
font-style: normal;
font-size: 13px;
}
/* 4.c.) blockquote-element-3 */
.blockquote-element-3{
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 0;
border: 1px solid;
border-color: #ccc;
}
.blockquote-element-3 p{
margin-left: 100px;
color: #ccc;
font-weight: 300;
font-style: italic;
font-size: 18px;
}
.blockquote-element-3 cite{
margin-left: 100px;
font-weight: 400;
font-style: normal;
font-size: 13px;
}
.blockquote-element-3 .iconWrap{
position: absolute;
top: 20px;
left: 20px;
}
.blockquote-element-3 .icon{
display: block;
width: 60px;
height: 60px;
color: #ccc;
text-align: center;
font-size: 65px;
line-height: 60px;
}
.blockquote-element-3 .icon:before{
line-height: 60px;
}
/* 4.d.) blockquote-element-4 */
.blockquote-element-4{
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 0;
border: 1px solid;
border-color: #ccc;
border-top: none;
}
.blockquote-element-4:before{
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 5px;
background-color: #363636;
content: "";
}
.blockquote-element-4:after{
position: absolute;
top: 0;
left: 30px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 30px;
border-right-color: #363636;
border-bottom-width: 30px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.blockquote-element-4 p{
margin-left: 100px;
color: #ccc;
font-weight: 300;
font-style: italic;
font-size: 18px;
}
.blockquote-element-4 cite{
margin-left: 100px;
font-weight: 400;
font-style: normal;
font-size: 13px;
}
/* 4.e.) blockquote-element-5 */
.blockquote-element-5{
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 0;
border: 1px solid;
border-color: #ccc;
-webkit-border-radius: 63px;
-moz-border-radius: 63px;
border-radius: 63px;
}
.blockquote-element-5 p{
margin-left: 100px;
color: #ccc;
font-weight: 300;
font-style: italic;
font-size: 18px;
}
.blockquote-element-5 cite{
margin-left: 100px;
font-weight: 400;
font-style: normal;
font-size: 13px;
}
.blockquote-element-5 .iconWrap{
position: absolute;
top: 20px;
left: 20px;
}
.blockquote-element-5 .icon{
display: block;
width: 60px;
height: 60px;
color: #ccc;
text-align: center;
font-size: 65px;
line-height: 60px;
}
.blockquote-element-5 .icon:before{
line-height: 60px;
}
/* 4.f.) blockquote-element-6 */
.blockquote-element-6{
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 0;
min-height: 130px;
border: 1px solid;
border-color: #ccc;
-webkit-border-radius: 65px;
-moz-border-radius: 65px;
border-radius: 65px;
}
.blockquote-element-6 p{
margin-right: 30px;
margin-left: 130px;
color: rgba(54, 54, 54, 0.8);
font-weight: 300;
font-style: italic;
font-size: 18px;
}
.blockquote-element-6 cite{
margin-left: 130px;
font-weight: 400;
font-style: normal;
font-size: 13px;
}
.blockquote-element-6 .iconWrap{
position: absolute;
top: 20px;
left: 20px;
}
.blockquote-element-6 .icon{
display: block;
width: 90px;
height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 50px;
line-height: 90px;
}
.blockquote-element-6 .icon:before{
line-height: 90px;
}
/*------------------------------------------------------------------
5. Tables
-------------------------------------------------------------------*/
.table {
margin-bottom: 20px;
max-width: 100%;
width: 100%;
background-color: #f0f0f0;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
vertical-align: top;
line-height: 20px;
}
.table > thead > tr > th {
border-bottom: 2px solid;
border-bottom-color: #e1e1e1;
vertical-align: bottom;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
}
.table > tbody + tbody {
border-top: 2px solid;
border-top-color: #e1e1e1;
}
.table {
background-color: #ffffff;
}
.table > tbody > tr:nth-of-type(odd) {
background-color: #fafafa;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
border-color: #dddddd !important;
border-left-width: 1px;
border-left-style: solid;
}
.table > thead > tr > th:first-child,
.table > tbody > tr > th:first-child,
.table > tfoot > tr > th:first-child,
.table > thead > tr > td:first-child,
.table > tbody > tr > td:first-child,
.table > tfoot > tr > td:first-child{
border-left: none;
}
.table .empty{
background-color: #fff;
}
.mini-table tr{
display: block;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.mini-table th,
.mini-table td{
display: block;
padding-top: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
border: none !important;
}
/*------------------------------------------------------------------
6. Divider
-------------------------------------------------------------------*/
.divider{
display: block;
}
.divider-40{
height: 40px;
}
.divider-30{
height: 30px;
}
.divider-20{
height: 20px;
}
.divider-10{
height: 10px;
}
.divider-5{
height: 5px;
}
.divider-3{
height: 3px;
}
.divider-1{
height: 1px;
}
@media only screen and (max-width: 991px) {
.divider-responsive-fix{
height: 0;
}
}
/*------------------------------------------------------------------
7. Headings
-------------------------------------------------------------------*/
.heading-element{
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
/* 7.a.) heading-element-1 */
.heading-element-1 .sep-element{
position: relative;
display: table-cell;
width: 50%;
height: 1px;
vertical-align: middle;
}
.heading-element-1 .sep-line{
position: relative;
top: 1px;
display: block;
width: 100%;
height: 1px;
border-color: #ebebeb;
border-top-width: 1px;
border-top-style: solid;
}
.heading-element-1.heading-element-1-align-left .sep-element-1{
display: none;
}
.heading-element-1.heading-element-1-align-right .sep-element-2{
display: none;
}
.heading-element-1.heading-element-1-align-left .sep-element,
.heading-element-1.heading-element-1-align-right .sep-element{
width: 100%;
}
.heading-element-1 h4{
display: table-cell;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
white-space: pre;
font-weight: 700;
font-size: 24px;
line-height: 34px;
}
/* 7.b.) heading-element-2 */
.heading-element-2{
position: relative;
border-color: #ebebeb;
border-bottom-width: 1px;
border-bottom-style: solid;
text-align: center;
}
.heading-element-2:after{
position: absolute;
bottom: -2px;
left: 50%;
display: block;
margin-left: -50px;
width: 100px;
height: 3px;
background-color: #363636;
content: "";
}
.heading-element-2 h4{
display: inline-block;
margin-bottom: 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 24px;
line-height: 30px;
}
.heading-element-2.heading-element-2-align-left{
text-align: left;
}
.heading-element-2.heading-element-2-align-left:after{
left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.heading-element-2.heading-element-2-align-right{
text-align: right;
}
.heading-element-2.heading-element-2-align-right:after{
right: 0;
left: auto;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
/* 7.c.) heading-element-3 */
.heading-element-3{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
width: 50%;
text-align: center;
}
.heading-element-3 .sep-element{
position: relative;
display: table-cell;
width: 50%;
height: 1px;
vertical-align: middle;
}
.heading-element-3 .sep-line{
position: relative;
top: 1px;
display: block;
width: 100%;
height: 1px;
border-color: #ebebeb;
border-top-width: 1px;
border-top-style: solid;
}
.heading-element-3 h4{
display: table-cell;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
white-space: pre;
font-weight: 700;
font-size: 30px;
line-height: 44px;
}
.heading-element-3 .heading-subtitle{
display: block;
margin-top: 20px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 300;
font-size: 18px;
}
/* 7.d.) heading-element-4 */
.heading-element-4{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
width: 50%;
text-align: center;
}
.heading-element-4 h4{
position: relative;
display: block;
margin-bottom: 20px;
padding-bottom: 10px;
border-color: #ebebeb;
border-bottom-width: 1px;
border-bottom-style: solid;
font-weight: 700;
font-size: 30px;
line-height: 40px;
}
.heading-element-4 h4:after{
position: absolute;
bottom: -2px;
left: 50%;
display: block;
margin-left: -50px;
width: 100px;
height: 3px;
background-color: #363636;
content: "";
}
.heading-element-4 .heading-subtitle{
display: block;
margin-top: 20px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 300;
font-size: 18px;
}
/* 7.e.) heading-element-5 */
.heading-element-5{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-bottom: 20px;
margin-left: auto;
width: 100%;
text-align: center;
}
.heading-element-5 h4{
font-weight: 700;
font-size: 30px;
line-height: 40px;
}
.heading-element-5 h4 span{
display: inline-block;
padding-top: 0;
padding-right: 8px;
padding-bottom: 0;
padding-left: 8px;
background-color: #363636;
color: #fff;
}
.heading-element-5 .sep-element{
position: relative;
display: inline-block;
margin-top: 20px;
width: 30%;
height: 1px;
background-color: #ebebeb;
}
.heading-element-5 .sep-element:after{
position: absolute;
bottom: -1px;
left: 50%;
display: block;
margin-left: -50px;
width: 100px;
height: 3px;
background-color: #363636;
content: "";
}
/* 7.f.) heading-element-6 */
.heading-element-6{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
width: 100%;
text-align: center;
}
.heading-element-6 .subtitle{
display: inline-block;
margin-bottom: 10px;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: #363636;
color: #fff;
font-weight: 400;
font-size: 18px;
}
.heading-element-6 h4{
text-transform: uppercase;
font-weight: 700;
font-size: 30px;
line-height: 40px;
}
.heading-element-6 .sep-element{
position: relative;
display: inline-block;
margin-top: 15px;
width: 30%;
height: 1px;
background-color: #ebebeb;
}
.heading-element-6 .sep-element:after{
position: absolute;
bottom: -1px;
left: 50%;
display: block;
margin-left: -50px;
width: 100px;
height: 3px;
background-color: #363636;
content: "";
}
/* 7.g.) heading-element-7 */
.heading-element-7{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
width: 100%;
background-color: #f0f0f0;
text-align: center;
}
.heading-element-7 h4{
display: inline-block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
background-color: #363636;
color: #fff;
font-size: 24px;
line-height: 36px;
}
.heading-element-7.heading-element-7-align-left{
text-align: left;
}
.heading-element-7.heading-element-7-align-right{
text-align: right;
}
/* 7.h.) heading-element-8 */
.heading-element-8 .sep-element{
position: relative;
display: table-cell;
width: 50%;
height: 1px;
vertical-align: middle;
}
.heading-element-8 .sep-line{
position: relative;
top: 1px;
display: block;
width: 100%;
height: 1px;
border-color: #ebebeb;
border-top-width: 1px;
border-top-style: solid;
}
.heading-element-8.heading-element-1-align-left .sep-element-1{
display: none;
}
.heading-element-8.heading-element-1-align-right .sep-element-2{
display: none;
}
.heading-element-8.heading-element-1-align-left .sep-element,
.heading-element-8.heading-element-1-align-right .sep-element{
width: 100%;
}
.heading-element-8 h4{
display: table-cell;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
white-space: pre;
font-weight: 700;
font-size: 24px;
line-height: 40px;
}
.heading-element-8 h4 span{
display: inline-block;
padding-top: 0;
padding-right: 8px;
padding-bottom: 0;
padding-left: 8px;
background-color: #363636;
color: #fff;
}
/*------------------------------------------------------------------
8. Blog Container
-------------------------------------------------------------------*/
.blog-container{
margin-bottom: 20px;
}
.blog-container .btn{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.blog-container .featured-image img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.blog-container .video-container{
position: relative;
overflow: hidden;
height: 0;
}
.blog-container.blog-container-img-ratio-16x9 .video-container{
padding-top: 56.25%;
}
.blog-container.blog-container-img-ratio-3x2 .video-container{
padding-top: 66.66%;
}
.blog-container.blog-container-img-ratio-4x3 .video-container{
padding-top: 75%;
}
.blog-container.blog-container-img-ratio-1x1 .video-container{
padding-top: 100%;
}
.blog-container.blog-container-img-ratio-3x4 .video-container{
padding-top: 133.33%;
}
.blog-container.blog-container-img-ratio-2x3 .video-container{
padding-top: 150%;
}
.blog-container .video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.blog-container-post-meta{
line-height: 20px;
}
.blog-container-post-meta ul{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.blog-container-post-meta ul li{
display: inline-block;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
}
.blog-container-post-meta ul li .icon{
display: inline-block;
color: #363636;
vertical-align: middle;
font-size: 16px;
}
.blog-container-post-meta ul li a{
color: rgba(54, 54, 54, 0.8);
text-decoration: underline;
font-weight: 400;
}
.blog-container-post-meta ul li a:hover{
color: #363636;
text-decoration: none;
}
.blog-container-post-meta ul li:first-child{
padding-left: 0;
border: none;
}
.no-padding-blog-container{
position: relative;
background-color: #fff;
}
.no-padding-blog-container div[class^='col-xs'],
.no-padding-blog-container div[class*=' col-xs'],
.no-padding-blog-container div[class^='col-sm'],
.no-padding-blog-container div[class*=' col-sm'],
.no-padding-blog-container div[class^='col-md'],
.no-padding-blog-container div[class*=' col-md'],
.no-padding-blog-container div[class^='col-lg'],
.no-padding-blog-container div[class*=' col-lg']{
padding-right: 0;
padding-left: 0;
}
.no-padding-blog-container .blog-container{
background-color: transparent !important;
}
.no-padding-blog-container:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border: 1px solid;
border-color: #ebebeb;
content: '';
}
.no-padding-blog-container .no-padding-blog-containerWrap{
position: relative;
z-index: 9;
overflow: hidden;
}
@media only screen and (max-width: 991px) {
.no-padding-blog-container .no-padding-blog-containerWrap{
overflow: inherit;
}
}
.no-padding-blog-container .blog-container .blog-container-content{
border: none;
}
.no-padding-blog-container .blog-container {
position: relative;
margin-bottom: -99999px !important;
padding-bottom: 99999px !important;
}
@media only screen and (max-width: 991px) {
.no-padding-blog-container .blog-container {
margin-bottom: 0;
padding-bottom: 0;
}
}
.no-padding-blog-container .blog-container:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
content: '';
}
@media only screen and (max-width: 991px) {
.no-padding-blog-container .blog-container:after {
display: none;
}
}
.blog-container .no-featured-image{
position: relative;
}
.blog-container .no-featured-image:before{
display: block;
width: 100%;
content: "";
}
.blog-container.blog-container-img-ratio-16x9 .no-featured-image:before{
padding-top: 56.25%;
}
.blog-container.blog-container-img-ratio-3x2 .no-featured-image:before{
padding-top: 66.66%;
}
.blog-container.blog-container-img-ratio-4x3 .no-featured-image:before{
padding-top: 75%;
}
.blog-container.blog-container-img-ratio-1x1 .no-featured-image:before{
padding-top: 100%;
}
.blog-container.blog-container-img-ratio-3x4 .no-featured-image:before{
padding-top: 133.33%;
}
.blog-container.blog-container-img-ratio-2x3 .no-featured-image:before{
padding-top: 150%;
}
/* 8.a.) blog-container-1 */
.blog-container-1 .featured-image{
position: relative;
}
.blog-container-1 .no-featured-image{
background-color: #ebebeb;
}
.blog-container-1 .no-image-label{
position: absolute;
top: 50%;
margin-top: -20px;
width: 100%;
text-align: center;
line-height: 40px;
}
.blog-container-1 .no-image-label span{
display: inline-block;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
background-color: #fff;
color: #ebebeb;
text-transform: uppercase;
font-weight: 700;
font-size: 24px;
}
.blog-container-1 .dateWrap{
position: absolute;
bottom: -40px;
left: 50%;
margin-left: -45px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #fff;
}
.blog-container-1 .date{
position: relative;
display: block;
overflow: hidden;
width: 70px;
height: 70px;
background-color: #585858;
color: #fff;
}
.blog-container-1:hover .date{
background-color: #363636;
}
.blog-container-1 .date .num{
position: absolute;
right: -10px;
bottom: -15px;
display: block;
width: 70px;
height: 70px;
text-align: center;
font-weight: 700;
font-size: 60px;
line-height: 70px;
}
.blog-container-1 .date .month{
position: absolute;
width: 70px;
height: 30px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
line-height: 30px;
}
.blog-container-1 .blog-container-content{
padding-top: 60px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
border-color: #ebebeb;
border-right-width: 1px;
border-right-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-left-width: 1px;
border-left-style: solid;
background-color: #fff;
text-align: center;
}
.blog-container-1 .blog-container-text{
margin-bottom: 30px;
}
.blog-container-1 .blog-container-title a{
color: #363636;
}
.blog-container-1:hover .blog-container-title a{
color: #363636;
text-decoration: underline;
}
/* 8.b.) blog-container-2 */
.blog-container-2 .featured-image{
position: relative;
}
.blog-container-2 .no-featured-image{
background-color: #ebebeb;
}
.blog-container-2 .no-image-label{
position: absolute;
top: 20px;
right: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 120px;
height: 120px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
color: #ebebeb;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
font-weight: 700;
font-size: 18px;
line-height: 100px;
}
.blog-container-2 .blog-container-content{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 130px;
border-color: #ebebeb;
border-right-width: 1px;
border-right-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-left-width: 1px;
border-left-style: solid;
background-color: #fff;
}
.col-md-3 .blog-container-2 .blog-container-content{
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 110px;
}
.blog-container-2 .post-type-date{
position: absolute;
bottom: -80px;
left: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #fff;
}
.col-md-3 .blog-container-2 .post-type-date{
left: 10px;
}
.blog-container-2 .post-type-date .icon{
display: block;
width: 70px;
height: 70px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 45px;
}
.blog-container-2 .post-type-date .icon:before{
text-align: center;
line-height: 70px;
}
.blog-container-2 .post-type-date .date{
position: relative;
display: block;
overflow: hidden;
width: 70px;
height: 70px;
background-color: #585858;
color: #fff;
}
.blog-container-2 .post-type-date .date .num{
position: absolute;
right: -10px;
bottom: -15px;
display: block;
width: 70px;
height: 70px;
text-align: center;
font-weight: 700;
font-size: 60px;
line-height: 70px;
}
.blog-container-2 .post-type-date .date .month{
position: absolute;
width: 70px;
height: 30px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
line-height: 30px;
}
.blog-container-2 .blog-container-title a{
color: #363636;
}
.blog-container-2:hover .blog-container-title a{
color: #363636;
text-decoration: underline;
}
.blog-container-2 .blog-container-post-meta ul{
padding-top: 10px;
}
/* 8.c.) blog-container-3 */
.blog-container-3{
position: relative;
background-color: #fff;
}
.blog-container-3:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border: 1px solid;
border-color: #ebebeb;
content: '';
}
.blog-container-3 .featured-image{
position: relative;
z-index: 9;
float: left;
width: 50%;
}
.blog-container-3 .video-containerWrap{
position: relative;
z-index: 9;
float: left;
width: 50%;
}
.blog-container-3 .no-featured-image{
z-index: 9;
display: block;
float: left;
width: 50%;
background-color: #ebebeb;
}
.blog-container-3 .no-image-label{
position: absolute;
top: 50%;
margin-top: -20px;
width: 100%;
text-align: center;
line-height: 40px;
}
.blog-container-3 .no-image-label span{
display: inline-block;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
background-color: #fff;
color: #ebebeb;
text-transform: uppercase;
font-weight: 700;
font-size: 24px;
}
.blog-container-3 .blog-container-content{
position: relative;
z-index: 9;
float: left;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
width: 50%;
}
.blog-container-3 .blog-container-content-part-1{
margin-bottom: 10px;
padding-bottom: 15px;
border-color: #ebebeb;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.blog-container-3 .posted-by a{
color: rgba(54, 54, 54, 0.8);
text-decoration: underline;
font-weight: 700;
}
.blog-container-3 .posted-by a:hover{
color: #363636;
text-decoration: none;
}
.blog-container-3 .blog-container-post-meta ul{
padding-top: 10px;
}
.blog-container-3 .blog-container-post-meta ul li{
display: inline;
}
.blog-container-3 .dateWrap{
float: right;
}
.blog-container-3 .date{
position: relative;
display: block;
overflow: hidden;
width: 70px;
height: 70px;
background-color: #585858;
color: #fff;
}
.blog-container-3:hover .date{
background-color: #363636;
}
.blog-container-3 .date .num{
position: absolute;
right: -10px;
bottom: -15px;
display: block;
width: 70px;
height: 70px;
text-align: center;
font-weight: 700;
font-size: 60px;
line-height: 70px;
}
.blog-container-3 .date .month{
position: absolute;
width: 70px;
height: 30px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
line-height: 30px;
}
.blog-container-3 .blog-container-title a{
color: #363636;
}
.blog-container-3:hover .blog-container-title a{
color: #363636;
text-decoration: underline;
}
/* 8.d.) blog-container-4 */
.blog-container-4{
background-color: #fff;
}
.blog-container-4 .featured-image{
position: relative;
}
.blog-container-4 .no-featured-image{
background-color: #ebebeb;
}
.blog-container-4 .no-image-label{
position: absolute;
top: 20px;
left: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 90px;
height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
color: #ebebeb;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
font-weight: 700;
line-height: 70px;
}
.blog-container-4 .dateWrap{
position: absolute;
right: 10px;
bottom: -20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #fff;
}
.blog-container-4 .date{
position: relative;
display: block;
overflow: hidden;
width: 70px;
height: 70px;
background-color: #585858;
color: #fff;
}
.blog-container-4:hover .date{
background-color: #363636;
}
.blog-container-4 .date .num{
position: absolute;
right: -10px;
bottom: -15px;
display: block;
width: 70px;
height: 70px;
text-align: center;
font-weight: 700;
font-size: 60px;
line-height: 70px;
}
.blog-container-4 .date .month{
position: absolute;
width: 70px;
height: 30px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
line-height: 30px;
}
.blog-container-4 .blog-container-content{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-color: #ebebeb;
border-right-width: 1px;
border-right-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-left-width: 1px;
border-left-style: solid;
}
.blog-container-4 .blog-container-title{
line-height: 20px;
}
.blog-container-4 .blog-container-title a{
color: #363636;
}
.blog-container-4:hover .blog-container-title a{
color: #363636;
text-decoration: underline;
}
/* 8.e.) blog-container-5 */
.blog-container-5{
position: relative;
padding-bottom: 10px;
border-color: #ebebeb;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.blog-container-5 .blog-container-content{
margin-left: 90px;
}
.blog-container-5 .dateWrap{
position: absolute;
top: 0;
left: 0;
}
.blog-container-5 .date{
position: relative;
display: block;
overflow: hidden;
width: 70px;
height: 70px;
background-color: #585858;
color: #fff;
}
.blog-container-5:hover .date{
background-color: #363636;
}
.blog-container-5 .date .num{
position: absolute;
right: -10px;
bottom: -15px;
display: block;
width: 70px;
height: 70px;
text-align: center;
font-weight: 700;
font-size: 60px;
line-height: 70px;
}
.blog-container-5 .date .month{
position: absolute;
width: 70px;
height: 30px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
line-height: 30px;
}
.blog-container-5 .blog-container-post-meta{
margin-bottom: 10px;
}
.blog-container-5 .blog-container-title a{
color: #363636;
}
.blog-container-5:hover .blog-container-title a{
color: #363636;
text-decoration: underline;
}
/* 8.f.) blog-container-6 */
.blog-container-6 .featured-image{
position: relative;
}
.blog-container-6 .no-featured-image{
background-color: #ebebeb;
}
.blog-container-6 .no-image-label{
position: absolute;
top: 20px;
left: 20px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 90px;
height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
color: #ebebeb;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
font-weight: 700;
line-height: 70px;
}
.blog-container-6 .blog-container-content{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-color: #ebebeb;
border-right-width: 1px;
border-right-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-left-width: 1px;
border-left-style: solid;
}
.blog-container-6 .blog-container-content .icon{
display: inline-block;
margin-top: -2px;
margin-right: 3px;
margin-bottom: -2px;
color: #959595;
vertical-align: middle;
}
.blog-container-6 .blog-container-title a{
color: #363636;
}
.blog-container-6:hover .blog-container-title a{
color: #363636;
text-decoration: underline;
}
/*------------------------------------------------------------------
9. Testimonial
-------------------------------------------------------------------*/
.testimonial-container{
margin-bottom: 20px;
}
/* 9.a.) testimonial-container-1 */
.testimonial-container-1{
margin-top: 65px;
border-color: #ebebeb;
border-top: 3px solid;
text-align: center;
line-height: 20px;
background-color: #fff;
}
.testimonial-container-1:hover{
border-top-color: #363636;
}
.testimonial-container-1 .testimonial-containerWrap{
position: relative;
padding-top: 80px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
border-top: none;
}
.testimonial-container-1 .image{
position: absolute;
top: -65px;
left: 50%;
display: block;
margin-left: -65px;
width: 130px;
height: 130px;
}
.testimonial-container-1 .image img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
border: 5px solid;
border-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.testimonial-container-1 .image i{
position: absolute;
right: -20px;
bottom: 0;
display: block;
width: 55px;
height: 55px;
border: 5px solid;
border-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 24px;
}
.testimonial-container-1:hover .image i{
background-color: #959595;
}
.testimonial-container-1 .image i:before{
line-height: 45px;
}
.testimonial-container-1 p{
color: #363636;
font-style: italic;
}
.testimonial-container-1:hover p{
color: #363636;
}
.testimonial-container-1 .title{
padding-top: 10px;
color: #363636;
font-weight: 700;
font-size: 18px;
}
.testimonial-container-1 .description{
color: #959595;
text-transform: uppercase;
font-size: 12px;
}
/* 9.b.) testimonial-container-2 */
.testimonial-container-2{
position: relative;
margin-bottom: 50px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
border-color: #ebebeb;
border-bottom: 3px solid;
background-color: #fafafa;
}
.testimonial-container-2:hover{
border-color: #363636;
}
.testimonial-container-2 .header{
position: relative;
margin-right: -20px;
padding-top: 15px;
padding-right: 100px;
padding-bottom: 15px;
padding-left: 100px;
min-height: 80px;
background-color: #ccc;
}
.testimonial-container-2 .image{
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
}
.testimonial-container-2 .image img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.testimonial-container-2 i{
position: absolute;
top: 0;
right: 0;
display: block;
width: 80px;
height: 80px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 32px;
}
.testimonial-container-2 i:before{
line-height: 80px;
}
.testimonial-container-2 .content{
margin-top: 15px;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
color: #363636;
}
.testimonial-container-2:hover .content{
color: #363636;
}
.testimonial-container-2:after{
position: absolute;
bottom: -40px;
left: 30px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 40px;
border-right-color: #fafafa;
border-bottom-width: 40px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.testimonial-container-2 .title{
color: #363636;
font-weight: 700;
font-size: 18px;
}
.testimonial-container-2 .description{
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
}
/* 9.c.) testimonial-container-3 */
.testimonial-container-3{
position: relative;
margin-top: 65px;
padding-top: 90px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
text-align: center;
}
.testimonial-container-3 .image{
position: absolute;
top: -65px;
left: 50%;
display: block;
margin-left: -65px;
width: 130px;
height: 130px;
}
.testimonial-container-3 .image img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
border: 5px solid;
border-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.testimonial-container-3 .image i{
position: absolute;
right: -20px;
bottom: 0;
display: block;
width: 55px;
height: 55px;
border: 5px solid;
border-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 24px;
}
.testimonial-container-3:hover .image i{
background-color: #959595;
}
.testimonial-container-3 .image i:before{
line-height: 45px;
}
.testimonial-container-3 p{
color: #fff;
font-style: italic;
font-size: 16px;
}
.testimonial-container-3 .titleWrap{
display: block;
padding-top: 10px;
}
.testimonial-container-3 .title{
display: inline;
color: #fff;
font-weight: 700;
font-size: 18px;
}
.testimonial-container-3 .description{
display: inline;
margin-left: 5px;
color: #ebebeb;
text-transform: uppercase;
font-size: 12px;
}
/* 9.d.) testimonial-container-4 */
.testimonial-container-4{
margin-bottom: 20px;
}
.testimonial-container-4 .testimonial-content{
position: relative;
margin-bottom: 10px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 70px;
border-color: #ebebeb;
border-bottom: 3px solid;
background-color: #fafafa;
color: #363636;
}
.testimonial-container-4:hover .testimonial-content{
border-color: #363636;
}
.testimonial-container-4 .testimonial-content:before{
position: absolute;
right: 0;
bottom: -40px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 40px;
border-right-color: #fafafa;
border-bottom-width: 40px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.testimonial-container-4 .testimonial-content p{
font-style: italic;
}
.testimonial-container-4 .testimonial-content .icon{
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 24px;
}
.testimonial-container-4:hover .testimonial-content .icon{
background-color: #959595;
}
.testimonial-container-4 .testimonial-content .icon:before{
line-height: 50px;
}
.testimonial-container-4 .testimonial-image{
float: left;
margin-right: 10px;
width: 60px;
}
.testimonial-container-4 .testimonial-image img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.testimonial-container-4 .testimonial-title{
display: block;
margin-top: 20px;
color: #363636;
font-weight: 700;
}
.testimonial-container-4 .testimonial-description{
color: #363636;
text-transform: uppercase;
font-weight: 400;
font-size: 12px;
}
/*------------------------------------------------------------------
10. Frames
-------------------------------------------------------------------*/
.frame-container{
margin-bottom: 20px;
}
.frame-container > img:last-child,
.frame-container > p:last-child,
.frame-container > table:last-child,
.frame-container > div:last-child{
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
}
/* 10.a.) frame-container-1 */
.frame-container-1{
display: block;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
background-color: #fff;
}
/* 10.b.) frame-container-2 */
.frame-container-2{
display: block;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #fff;
}
/* 10.c.) frame-container-3 */
.frame-container-3{
display: block;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border: 1px dashed;
border-color: #ebebeb;
background-color: #fff;
}
/* 10.d.) frame-container-4 */
.frame-container-4{
display: block;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border: 3px dashed;
border-color: #ebebeb;
background-color: #fff;
}
/* 10.e.) frame-container-5 */
.frame-container-5{
display: block;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid;
border-color: #ebebeb;
background-color: #fff;
}
/*------------------------------------------------------------------
11. Portfolio Element
-------------------------------------------------------------------*/
.portfolio-container{
margin-bottom: 20px;
}
.megafolio-container{
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.mega-entry{
position: absolute;
z-index: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mega-entry .mega-entry-innerwrap{
position: relative;
z-index: 2;
overflow: visible;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.ie8 .mega-entry,
.ie8 .mega-entry .mega-entry-innerwrap,
.ie9 .mega-entry,
.ie9 .mega-entry .mega-entry-innerwrap{
overflow: hidden;
}
.mega-entry-innerwrap.pagetop{
-webkit-transform-origin: 50% 0% 0;
-moz-transform-origin: 50% 0% 0;
transform-origin: 50% 0% 0;
}
.mega-entry-innerwrap.pagebottom{
-webkit-transform-origin: 50% 100% 0;
-moz-transform-origin: 50% 100% 0;
transform-origin: 50% 100% 0;
}
.mega-entry-innerwrap.pagemiddle{
-webkit-transform-origin: 50% 50% 0;
-moz-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
/** IE HACKS **/
.ieimg{
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
width: 100%;
}
.filter_padder{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 0;
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
width: 100%;
}
.filter_wrapper{
position: relative;
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
min-height: 50px;
border: 1px solid;
border-color: #ebebeb;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.filter_wrapper.portfolio-filter-left{
float: left;
}
.filter_wrapper.portfolio-filter-right{
float: right;
}
.filter{
float: left;
margin-top: -1px;
margin-right: 0;
margin-bottom: -1px;
margin-left: 0;
padding-top: 14px;
padding-right: 20px;
padding-bottom: 14px;
padding-left: 20px;
color: rgba(54, 54, 54, 0.8);
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
cursor: pointer;
}
.filter:hover, .filter.selected{
background-color: #363636;
color: #fff;
}
@media only screen and (max-width: 991px) {
.filter_wrapper.floated {
float: none;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
}
@media only screen and (max-width: 991px) {
.filter{
float: none;
margin-right: 0px;
text-align: center;
line-height: 30px;
}
}
.addmore-btnWrap .btn{
margin-top: 40px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.addmore-btnWrap .btn-border:after{
border-color: #363636;
}
.addmore-btnWrap.addmore-btn-centered{
text-align: center;
}
.addmore-btnWrap.addmore-btn-right{
text-align: right;
}
.portfolio-grayscale-out .mega-entry .mega-entry-innerwrap:before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,#greyscale");
opacity: 1;
}
.portfolio-grayscale-out .mega-entry:hover .mega-entry-innerwrap:before{
opacity: 0;
}
.portfolio-grayscale-in .mega-entry .mega-entry-innerwrap:before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,#greyscale");
opacity: 0;
}
.portfolio-grayscale-in .mega-entry:hover .mega-entry-innerwrap:before{
opacity: 1;
}
.portfolio-gradient-mask .mega-entry .mega-entry-innerwrap:before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.6) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,0.6)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.6) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.6) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.6) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
}
.portfolio-gradient-mask .mega-entry:hover .mega-entry-innerwrap:before{
opacity: 0;
}
/* 11.a.) portfolio-type-1 */
.portfolio-type-1 .mega-entry:hover{
z-index: 9 !important;
}
.portfolio-type-1 .mega-entry:hover .mega-entry-innerwrap{
-webkit-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
}
.portfolio-type-1 .megafolio-container-link{
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.portfolio-type-1 .megafolio-container-caption{
position: absolute;
bottom: 0;
left: 0;
display: block;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
width: 100%;
background-color: #3d7cbe;
color: #fff;
line-height: 20px;
}
.portfolio-type-1.portfolio-caption-in .megafolio-container-caption{
opacity: 0;
}
.portfolio-type-1.portfolio-caption-in .mega-entry:hover .megafolio-container-caption{
opacity: 1;
}
.portfolio-type-1 .mega-entry:nth-of-type(odd) .megafolio-container-caption{
background-color: #e42127;
}
.portfolio-type-1 .megafolio-container-title{
color: #fff;
text-decoration: none !important;
font-weight: 700;
display: inline-block;
font-size: 16px;
}
.portfolio-type-1 .megafolio-container-categories{
text-transform: uppercase;
font-size: 13px;
}
.portfolio-type-1 .megafolio-container-categories a{
color: rgba(255,255,255,0.8);
font-weight: 400;
}
/* 11.b.) portfolio-type-2 */
.portfolio-type-2 .mega-entry:hover{
z-index: 9 !important;
}
.portfolio-type-2 .mega-entry:hover .mega-entry-innerwrap{
-webkit-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
}
.portfolio-type-2 .megafolio-container-link{
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.portfolio-type-2 .megafolio-container-caption{
position: absolute;
bottom: 0;
left: 0;
display: block;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
width: 100%;
background: #252525;
background: -moz-linear-gradient(left, #363636 0%, #252525 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #363636), color-stop(100%, #252525));
background: -webkit-linear-gradient(left, #363636 0%, #252525 100%);
background: -o-linear-gradient(left, #363636 0%, #252525 100%);
background: -ms-linear-gradient(left, #363636 0%, #252525 100%);
background: linear-gradient(to right, #363636 0%, #252525 100%);
color: #fff;
text-align: center;
line-height: 24px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#252525', GradientType=1 );
}
.portfolio-type-2 .mega-entry:hover .megafolio-container-caption{
background: #fff;
color: #363636;
}
.portfolio-type-2 .megafolio-container-title{
color: #fff;
text-decoration: none !important;
font-weight: 700;
font-size: 16px;
}
.portfolio-type-2 .mega-entry:hover .megafolio-container-title{
color: #363636;
}
.portfolio-type-2 .megafolio-container-categories a{
color: rgba(255,255,255,0.8);
font-weight: 400;
}
.portfolio-type-2 .mega-entry:hover .megafolio-container-categories a{
color: #363636;
}
.portfolio-type-2 .mega-entry:hover .megafolio-container-categories a:hover{
color: #252525;
}
/* 11.c.) portfolio-filter-2 */
.portfolio-filter-2 .filter_wrapper{
border: 3px solid;
border-color: #363636;
}
.portfolio-filter-2 .filter{
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
}
/* 11.d.) portfolio-type-3 */
.portfolio-type-3 .mega-entry:hover{
z-index: 9 !important;
}
.portfolio-type-3 .mega-entry:hover .mega-entry-innerwrap{
-webkit-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
}
.portfolio-type-3 .megafolio-container-caption{
position: absolute;
bottom: 0;
left: 0;
padding-top: 25px;
padding-right: 20px;
padding-bottom: 25px;
padding-left: 20px;
width: 100%;
background-color: #363636;
color: #fff;
line-height: 20px;
opacity: 0;
}
.portfolio-type-3 .mega-entry:hover .megafolio-container-caption{
opacity: 1;
}
.portfolio-type-3 .megafolio-container-title{
display: inline-block;
color: #fff;
text-decoration: none !important;
font-weight: 700;
font-size: 16px;
}
.portfolio-type-3 .megafolio-container-categories{
display: inline-block;
margin-left: 7px;
padding-left: 10px;
border-color: rgba(255,255,255,0.2) !important;
border-left-width: 1px;
border-left-style: solid;
}
.portfolio-type-3 .megafolio-container-categories a{
color: rgba(255,255,255,0.8);
}
.portfolio-type-3 .megafolio-container-link{
position: absolute;
top: -20px;
right: 20px;
display: block;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #959595;
color: #fff;
text-align: center;
text-decoration: none !important;
font-size: 20px;
}
.portfolio-type-3 .megafolio-container-link:hover{
background-color: #ccc;
}
.portfolio-type-3 .megafolio-container-link .icon:before{
line-height: 40px;
}
.portfolio-type-3 .megafolio-container-lightbox{
position: absolute;
top: -20px;
right: 20px;
display: block;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #959595;
color: #fff;
text-align: center;
text-decoration: none !important;
font-size: 20px;
}
.portfolio-type-3 .megafolio-container-lightbox:hover{
background-color: #ccc;
}
.portfolio-type-3 .megafolio-container-lightbox .icon:before{
line-height: 40px;
}
.portfolio-type-3 .m-c-l-l .megafolio-container-link{
right: 70px;
}
/* 11.e.) portfolio-type-4 */
.portfolio-type-4 .mega-entry:hover{
z-index: 9 !important;
}
.portfolio-type-4 .mega-entry:hover .mega-entry-innerwrap{
-webkit-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
}
.portfolio-type-4 .megafolio-container-link{
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.portfolio-type-4 .megafolio-container-caption{
position: absolute;
bottom: 0;
left: 0;
display: block;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
width: 100%;
background: #252525;
background: -moz-linear-gradient(left, #363636 0%, #252525 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, #363636), color-stop(100%, #252525));
background: -webkit-linear-gradient(left, #363636 0%, #252525 100%);
background: -o-linear-gradient(left, #363636 0%, #252525 100%);
background: -ms-linear-gradient(left, #363636 0%, #252525 100%);
background: linear-gradient(to right, #363636 0%, #252525 100%);
color: #fff;
line-height: 24px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#252525', GradientType=1 );
}
.portfolio-type-4 .mega-entry:hover .megafolio-container-caption{
background: #fff;
color: #363636;
}
.portfolio-type-4 .megafolio-container-title{
color: #fff;
text-decoration: none !important;
font-weight: 700;
font-size: 16px;
}
.portfolio-type-4 .mega-entry:hover .megafolio-container-title{
color: #363636;
}
.portfolio-type-4 .megafolio-container-categories a{
color: rgba(255,255,255,0.8);
}
.portfolio-type-4 .mega-entry:hover .megafolio-container-categories a{
color: #363636;
}
.portfolio-type-4 .mega-entry:hover .megafolio-container-categories a:hover{
color: #252525;
}
/* 11.f.) portfolio-type-5 */
.portfolio-type-5 .portfolio-item{
margin-bottom: 30px;
}
.portfolio-type-5 .portfolio-item:hover{
-webkit-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.3);
}
.portfolio-type-5 .portfolio-item img{
position: relative;
z-index: 1;
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.portfolio-container-image{
position: relative;
display: block;
border:solid 5px #f2f2f2;
}
.portfolio-container-image:after{
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
content: "";
opacity: 0;
}
.portfolio-type-5 .portfolio-item:hover .portfolio-container-image:after{
opacity: 1;
}
.img-portfolio-container-element-nav{
position: absolute;
top: 50%;
left: 50%;
z-index: 9;
display: block;
margin-top: -35px;
margin-right: 0;
margin-bottom: 0;
margin-left: -70px;
opacity: 0;
}
.img-portfolio-container-element-nav.img-portfolio-container-element-nav-1{
margin-top: -35px;
margin-right: 0;
margin-bottom: 0;
margin-left: -35px;
}
.portfolio-type-5 .portfolio-item:hover .img-portfolio-container-element-nav{
opacity: 1;
}
.img-portfolio-container-element-nav a{
display: inline-block;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff !important;
text-align: center;
text-decoration: none !important;
font-size: 24px;
}
.img-portfolio-container-element-nav a .icon{
display: block;
}
.img-portfolio-container-element-nav a.img-portfolio-container-link .icon{
margin-top: -1px;
margin-left: 2px;
}
.img-portfolio-container-element-nav a .icon:before{
line-height: 50px;
}
.img-portfolio-container-element-nav a:hover{
background-color: #959595;
}
.portfolio-type-5 .portfolio-item .portfolio-container-caption{
display: block;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #106dd4;
color: #fff;
line-height: 20px;
}
.portfolio-type-5 .portfolio-item .portfolio-container-title{
display: inline-block;
color: #fff;
text-decoration: none !important;
font-weight: 500;
font-size: 16px;
}
.portfolio-type-5 .portfolio-item .portfolio-container-categories{
text-transform: uppercase;
font-size: 13px;
}
.portfolio-type-5 .portfolio-item .portfolio-container-categories a{
color: #fff;
font-weight: 400;
}
/*------------------------------------------------------------------
12. Team Element
-------------------------------------------------------------------*/
.team-element{
margin-bottom: 20px;
}
.team-element svg{
display: block;
width: 0;
height: 0;
}
/* 12.a.) team-element-1 */
.team-element-1 .item{
float: left;
overflow: hidden;
width: 100%;
background-color: #fff;
}
@media (min-width: 992px) {
.team-element-1 .item{
width: 50%;
}
}
.team-element-1 .item:hover{
background-color: #363636;
}
.team-element-1 .item .team-element-image{
float: left;
width: 50%;
}
.team-element-1 .item img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.team-element-1 .item .team-element-content{
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
width: 50%;
color: #363636;
}
.team-element-1 .item:hover .team-element-content{
color: #fff;
}
.team-element-1 .item .team-element-contentWrap{
position: relative;
padding-top: 30px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
text-align: center;
line-height: 20px;
}
.team-element-1 .item .team-element-contentWrap:after{
position: absolute;
top: 30px;
left: -40px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 40px;
border-right-color: #fff;
border-bottom-width: 40px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.team-element-1 .item.item-right .team-element-contentWrap:after{
position: absolute;
top: 30px;
right: -40px;
left: auto;
width: 0;
height: 0;
border-style: solid;
border-top-width: 40px;
border-top-color: #fff;
border-right-width: 40px;
border-right-color: transparent !important;
border-bottom-width: 0;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.team-element-1 .item:hover .team-element-contentWrap:after{
border-right-color: #363636;
}
.team-element-1 .item.item-right:hover .team-element-contentWrap:after{
border-top-color: #363636;
}
.team-element-1 .title{
margin-bottom: 15px;
color: #363636;
font-weight: 700;
font-size: 18px;
}
.team-element-1 .item:hover .title{
color: #fff;
}
.team-element-1 .subtitle{
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.team-element-1 .item:hover .subtitle{
color: #fff;
}
.team-element-1 .sep-element{
display: inline-block;
margin-bottom: 15px;
width: 70px;
height: 3px;
background-color: #363636;
}
.team-element-1 .item:hover .sep-element{
background-color: #fff;
}
.team-element-1 .team-element-btn{
display: inline-block;
padding-top: 10px;
color: #363636;
text-decoration: none !important;
font-weight: 700;
}
.team-element-1 .item:hover .team-element-btn{
color: #fff;
}
.team-element-1 .team-element-btn i{
margin-left: 7px;
vertical-align: middle;
}
.team-element-1.item-image-grayscale-hover .item:hover img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
.team-element-1 .team-element-social-media ul{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.team-element-1 .team-element-social-media li{
display: inline-block;
margin-top: 5px;
margin-right: 2px;
}
.team-element-1 .team-element-social-media li:last-child{
margin-right: 0;
}
.team-element-1 .team-element-social-media .icon{
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid;
border-color: transparent;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #363636;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 18px;
}
.team-element-1 .team-element-social-media .icon:before{
line-height: 28px;
}
.team-element-1 .item:hover .team-element-social-media .icon{
background-color: #959595;
}
/* 12.b.) team-element-2 */
.team-element-2 .item .team-element-image{
position: relative;
}
.team-element-2 .item .team-element-image img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.team-element-2 .team-element-social-media ul{
position: absolute;
top: 0;
left: 0;
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
min-width: 50px;
height: 100%;
background-color: #363636;
opacity: 0;
}
.team-element-2 .team-element-image:hover .team-element-social-media ul{
opacity: 1;
}
.team-element-2 .team-element-social-media li{
display: block;
margin-bottom: 10px;
}
.team-element-2 .team-element-social-media li:last-child{
margin-right: 0;
}
.team-element-2 .team-element-social-media .icon{
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid;
border-color: transparent;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: #959595;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 18px;
}
.team-element-2 .team-element-social-media .icon:before{
line-height: 28px;
}
.team-element-2 .team-element-content{
padding-top: 20px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
color: #363636;
line-height: 20px;
}
.team-element-2 .title{
color: #363636;
font-weight: 700;
font-size: 24px;
line-height: 30px;
}
.team-element-2 .subtitle{
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.team-element-2 .sep-element{
display: inline-block;
margin-bottom: 15px;
width: 70px;
height: 3px;
background-color: #363636;
}
/*------------------------------------------------------------------
13. Progress Bar
-------------------------------------------------------------------*/
.progress-bar{
margin-bottom: 20px;
}
/* 13.a.) progress-bar-1 */
.progress-bar-1 {
position: relative;
}
.progress-bar-1:after{
position: absolute;
top: 30px;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 1px;
background-color: #ebebeb;
content: "";
}
.progress-bar-1 > .progress-barWrap {
position: relative;
z-index: 9;
display: block;
height: 50px;
}
.progress-bar-1 .progress-bar-counter{
position: absolute;
top: 0;
right: 0;
display: block;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: #fff;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
font-weight: 400;
font-size: 13px;
line-height: 20px;
}
.progress-bar-1.progress-bar-animation .progress-bar-counter{
display: none;
}
.progress-bar-1 .progress-bar-bar{
display: block;
padding-top: 30px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.progress-bar-1 .progress-bar-bar span{
display: block;
height: 20px;
background-color: #363636;
}
.progress-bar-1 .progress-bar-label{
position: absolute;
top: 0;
left: 0;
z-index: 10;
text-transform: uppercase;
font-weight: 300;
}
/* 13.b.) progress-bar-2 */
.progress-bar-2 {
position: relative;
}
.progress-bar-2:after{
position: absolute;
top: 30px;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 15px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ebebeb;
background-color: #fafafa;
content: "";
}
.progress-bar-2 > .progress-barWrap {
position: relative;
z-index: 9;
display: block;
height: 50px;
}
.progress-bar-2 .progress-bar-counter{
position: absolute;
top: 0;
right: 0;
display: block;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: #959595;
color: #fff;
font-weight: 400;
font-size: 13px;
line-height: 20px;
}
.progress-bar-2 .progress-bar-counter:after{
position: absolute;
bottom: -9px;
left: 9px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 9px;
border-right-color: #959595;
border-bottom-width: 9px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.progress-bar-2.progress-bar-animation .progress-bar-counter{
display: none;
}
.progress-bar-2 .progress-bar-bar{
display: block;
padding-top: 30px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.progress-bar-2 .progress-bar-bar span{
display: block;
height: 15px;
background-color: #363636;
}
.progress-bar-2 .progress-bar-label{
position: absolute;
top: 0;
left: 0;
z-index: 10;
text-transform: uppercase;
font-weight: 300;
}
/* 13.c.) progress-bar-3 */
.progress-bar-3 {
position: relative;
}
.progress-bar-3:after{
position: absolute;
top: 30px;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 18px;
border: 1px solid;
border-color: #ebebeb;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #fff;
content: "";
}
.progress-bar-3 > .progress-barWrap {
position: relative;
z-index: 9;
display: block;
height: 50px;
}
.progress-bar-3 .progress-bar-counter{
position: absolute;
top: 0;
right: 0;
display: block;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: #fff;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
font-weight: 400;
font-size: 13px;
line-height: 20px;
}
.progress-bar-3 .progress-bar-bar{
display: block;
padding-top: 33px;
padding-right: 3px;
padding-bottom: 0;
padding-left: 3px;
}
.progress-bar-3 .progress-bar-bar span{
display: block;
height: 12px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius: 6px;
background-color: #363636;
}
.progress-bar-3 .progress-bar-label{
position: absolute;
top: 0;
left: 0;
z-index: 10;
text-transform: uppercase;
font-weight: 300;
}
/* 13.e.) progress-bar-4 */
.progress-bar-4 {
width: 100%;
border: 1px solid;
border-color: #ebebeb;
line-height: 20px;
}
.progress-bar-4 td{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.progress-bar-4 .progress-bar-holder{
display: block;
width: 100%;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: #fafafa;
}
.progress-bar-4 .progress-barWrap {
display: block;
height: 16px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
background-color: #363636;
}
.progress-bar-4 .progress-bar-counter{
width: 50px;
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
color: #959595;
text-align: center;
font-weight: 400;
}
.progress-bar-4 .progress-bar-label{
width: 160px;
border-color: #ebebeb !important;
border-right-width: 1px;
border-right-style: solid;
color: #959595;
text-transform: uppercase;
font-weight: 400;
}
/*------------------------------------------------------------------
14. Tabs
-------------------------------------------------------------------*/
.tabsWrap{
margin-bottom: 20px;
}
.tabsWrap ul.tabs{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.tabsWrap ul.tabs li{
display: inline-block;
}
/* 14.a.) tabs-element-1 */
.tabs-element-1 ul.tabs{
padding-left: 20px;
}
.tabs-element-1 ul.tabs li{
margin-right: 7px;
}
.tabs-element-1 ul.tabs li a{
display: block;
padding-top: 18px;
padding-right: 18px;
padding-bottom: 18px;
padding-left: 18px;
border: 1px solid;
border-color: #ebebeb;
border-bottom: none;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tabs-element-1 ul.tabs li.active a{
border-color: transparent;
-webkit-border-top-left-radius: 12px;
-moz-border-radius-topleft: 12px;
border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-moz-border-radius-topright: 12px;
border-top-right-radius: 12px;
background-color: #363636;
color: #fff;
}
.tabs-element-1 .panel{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
}
/* 14.b.) tabs-element-2 */
.tabs-element-2 ul.tabs{
padding-left: 20px;
}
.tabs-element-2 ul.tabs li{
margin-right: 7px;
}
.tabs-element-2 ul.tabs li a{
display: block;
padding-top: 18px;
padding-right: 18px;
padding-bottom: 18px;
padding-left: 18px;
border: 1px solid;
border-color: #ebebeb;
border-bottom: none;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tabs-element-2 ul.tabs li.active a{
border-color: transparent;
background-color: #363636;
color: #fff;
}
.tabs-element-2 .panel{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
}
/* 14.c.) tabs-element-3 */
.tabs-element-3 ul.tabs{
margin-bottom: 0;
}
.tabs-element-3 ul.tabs li{
margin-right: 7px;
margin-bottom: 10px;
}
.tabs-element-3 ul.tabs li a{
display: block;
padding-top: 9px;
padding-right: 18px;
padding-bottom: 9px;
padding-left: 18px;
border: 1px solid;
border-color: #ebebeb;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tabs-element-3 ul.tabs li.active a{
border-color: transparent;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #363636;
color: #fff;
}
.tabs-element-3 .panel{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
}
/* 14.d.) tabs-element-4 */
.tabs-element-4 ul.tabs{
margin-bottom: 0;
}
.tabs-element-4 ul.tabs li{
margin-right: 7px;
margin-bottom: 10px;
}
.tabs-element-4 ul.tabs li a{
position: relative;
display: block;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tabs-element-4 ul.tabs li a:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid;
border-color: #ebebeb;
content: '';
}
.tabs-element-4 ul.tabs li.active a{
}
.tabs-element-4 ul.tabs li a .icon{
position: relative;
z-index: 1;
display: inline-block;
width: 40px;
height: 40px;
background-color: #959595;
color: #fff;
text-align: center;
font-size: 20px;
}
.tabs-element-4 ul.tabs li a .icon:before{
vertical-align: middle;
line-height: 40px;
}
.tabs-element-4 ul.tabs li a span{
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 10px;
}
.tabs-element-4 ul.tabs li.active a .icon{
background-color: #363636;
}
.tabs-element-4 .panel{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
}
/* 14.e.) tabs-element-5 */
.tabs-element-5 ul.tabs{
margin-bottom: 0;
}
.tabs-element-5 ul.tabs li{
margin-right: 7px;
margin-bottom: 10px;
}
.tabs-element-5 ul.tabs li a{
display: block;
padding-top: 9px;
padding-right: 18px;
padding-bottom: 9px;
padding-left: 18px;
border: 1px solid;
border-color: #ebebeb;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tabs-element-5 ul.tabs li a{
color: #252525;
}
.tabs-element-5 ul.tabs li.active a{
border-color: transparent;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #363636;
background: -moz-linear-gradient(top, #363636 0%, #252525 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #363636), color-stop(100%, #252525));
background: -webkit-linear-gradient(top, #363636 0%, #252525 100%);
background: -o-linear-gradient(top, #363636 0%, #252525 100%);
background: -ms-linear-gradient(top, #363636 0%, #252525 100%);
background: linear-gradient(to bottom, #363636 0%, #252525 100%);
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#252525', GradientType=0 );
}
.tabs-element-5 .panel{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
}
/* 14.f.) tabs-element-6 */
.tabs-element-6 ul.tabs{
border: 1px solid;
border-color: #ebebeb;
border-bottom: none;
background-color: #fafafa;
}
.tabs-element-6 ul.tabs li{
margin-right: 7px;
}
.tabs-element-6 ul.tabs li a{
display: block;
margin-bottom: -1px;
padding-top: 18px;
padding-right: 18px;
padding-bottom: 18px;
padding-left: 18px;
border-color: transparent;
border-right-width: 1px;
border-right-style: solid;
border-left-width: 1px;
border-left-style: solid;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tabs-element-6 ul.tabs li:first-child a{
border-left: none;
}
.tabs-element-6 ul.tabs li.active a{
border-color: #ebebeb !important;
background-color: #fff;
}
.tabs-element-6 .panel{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
}
/* 14.g.) tabs-element-7 */
.tabs-element-7 ul.tabs{
margin-bottom: 0;
}
.tabs-element-7 ul.tabs li{
margin-right: 7px;
margin-bottom: 10px;
}
.tabs-element-7 ul.tabs li a{
display: block;
padding-top: 9px;
padding-right: 19px;
padding-bottom: 9px;
padding-left: 9px;
border: 1px solid;
border-color: #ebebeb;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tabs-element-7 ul.tabs li a .icon{
display: inline-block;
margin-right: 10px;
width: 30px;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #959595;
color: #fff;
text-align: center;
font-size: 18px;
}
.tabs-element-7 ul.tabs li a .icon:before{
vertical-align: middle;
line-height: 30px;
}
.tabs-element-7 ul.tabs li.active a .icon{
background-color: #363636;
}
.tabs-element-7 .panel{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
}
/* 14.h.) tabs-element-8 */
.tabs-element-8 ul.tabs{
margin-bottom: 0;
}
.tabs-element-8 ul.tabs li{
margin-right: 7px;
margin-bottom: 15px;
}
.tabs-element-8 ul.tabs li a{
position: relative;
display: block;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tabs-element-8 ul.tabs li a:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid;
border-color: #ebebeb;
content: '';
}
.tabs-element-8 ul.tabs li a .icon{
position: relative;
z-index: 1;
display: inline-block;
width: 40px;
height: 40px;
background-color: #959595;
color: #fff;
text-align: center;
font-size: 20px;
}
.tabs-element-8 ul.tabs li a .icon:before{
vertical-align: middle;
line-height: 40px;
}
.tabs-element-8 ul.tabs li a .icon:after{
position: absolute;
bottom: -10px;
left: 10px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 10px;
border-right-color: #959595;
border-bottom-width: 10px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.tabs-element-8 ul.tabs li a span{
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 10px;
}
.tabs-element-8 ul.tabs li.active a .icon{
background-color: #363636;
}
.tabs-element-8 ul.tabs li.active a .icon:after{
border-right-color: #363636;
}
.tabs-element-8 .panel{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
}
/* 14.i.) tabs-element-9 */
.tabs-element-9 ul.tabs{
padding-top: 110px;
padding-left: 25px;
background-color: transparent;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.tabs-element-9 ul.tabs li{
margin-top: 10px;
margin-right: 7px;
}
.tabs-element-9 ul.tabs li a{
position: relative;
display: block;
background-color: #fff;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
opacity: 0.9;
}
.tabs-element-9 ul.tabs li a{
color: #252525;
}
.tabs-element-9 ul.tabs li a .icon{
position: relative;
z-index: 1;
display: inline-block;
width: 40px;
height: 40px;
background-color: #959595;
color: #fff;
text-align: center;
font-size: 20px;
}
.tabs-element-9 ul.tabs li a .icon:before{
vertical-align: middle;
line-height: 40px;
}
.tabs-element-9 ul.tabs li a span{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.tabs-element-9 ul.tabs li.active a{
opacity: 1;
}
.tabs-element-9 ul.tabs li.active a .icon{
background-color: #363636;
}
.tabs-element-9 .panel{
padding-top: 25px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
border: 1px solid;
border-color: #ebebeb;
border-top: 0;
background-color: #fff;
}
/* 14.j.) tabs-element-10 */
.tabs-element-10 ul.tabs{
text-align: center;
}
.tabs-element-10 ul.tabs li{
display: inline-block;
padding-top: 0;
padding-right: 7px;
padding-bottom: 50px;
padding-left: 7px;
}
.tabs-element-10 ul.tabs li a{
position: relative;
display: block;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
min-width: 200px;
background-color: #ebebeb;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
}
.tabs-element-10 ul.tabs li a:after{
position: absolute;
bottom: -20px;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 20px;
border-right-color: #ebebeb;
border-bottom-width: 20px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.tabs-element-10 ul.tabs li a .icon{
position: relative;
display: block;
max-height: 54px;
color: #252525;
text-align: center;
font-size: 54px;
line-height: 54px;
}
.tabs-element-10 ul.tabs li a span{
display: inline-block;
padding-top: 10px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.tabs-element-10 ul.tabs li.active a{
background-color: #363636;
color: #fff;
}
.tabs-element-10 ul.tabs li.active a .icon{
color: #fff;
}
.tabs-element-10 ul.tabs li.active a:after{
border-right-color: #363636;
}
.tabs-element-10 .tabs-title{
display: block;
margin-bottom: 50px;
color: #363636;
text-align: center;
font-weight: 700;
font-size: 30px;
line-height: 1;
}
.tabs-element-10 .tabs-sep-element{
position: relative;
display: block;
margin-right: auto;
margin-bottom: 55px;
margin-left: auto;
width: 100%;
height: 1px;
background-color: #ebebeb;
}
.tabs-element-10 .tabs-sep-element .icon{
position: absolute;
top: -35px;
left: 50%;
display: block;
margin-left: -35px;
width: 70px;
height: 70px;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 40px;
}
.tabs-element-10 .tabs-sep-element .icon:before{
line-height: 70px;
}
/*------------------------------------------------------------------
15. Tour
-------------------------------------------------------------------*/
.tour-nav-20 ul.tabs{
width: 20% !important;
}
.tour-nav-20 .panel{
width: 80% !important;
}
.tour-nav-25 ul.tabs{
width: 25% !important;
}
.tour-nav-25 .panel{
width: 75% !important;
}
.tour-nav-35 ul.tabs{
width: 35% !important;
}
.tour-nav-35 .panel{
width: 65% !important;
}
.tour-nav-40 ul.tabs{
width: 40% !important;
}
.tour-nav-40 .panel{
width: 60% !important;
}
/* 15.a.) tour-element-1 */
.tour-element-1 ul.tabs{
float: left;
width: 30%;
}
.tour-element-1 ul.tabs li{
display: block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
}
.tour-element-1 ul.tabs li a{
display: block;
padding-top: 18px;
padding-right: 18px;
padding-bottom: 18px;
padding-left: 18px;
border: 1px solid;
border-color: #ebebeb;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tour-element-1 ul.tabs li.active a{
border-color: transparent;
-webkit-border-top-left-radius: 12px;
-moz-border-radius-topleft: 12px;
border-top-left-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-moz-border-radius-bottomleft: 12px;
border-bottom-left-radius: 12px;
background-color: #363636;
color: #fff;
}
.tour-element-1 .panel{
float: left;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
width: 70%;
border: 1px solid;
border-color: #ebebeb;
}
/* 15.b.) tour-element-2 */
.tour-element-2 ul.tabs{
float: left;
width: 30%;
}
.tour-element-2 ul.tabs li{
display: block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
}
.tour-element-2 ul.tabs li a{
display: block;
padding-top: 18px;
padding-right: 18px;
padding-bottom: 18px;
padding-left: 18px;
border: 1px solid;
border-color: #ebebeb;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tour-element-2 ul.tabs li.active a{
border-color: transparent;
background: #363636;
background: -moz-linear-gradient(top, #363636 0%, #252525 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #363636), color-stop(100%, #252525));
background: -webkit-linear-gradient(top, #363636 0%, #252525 100%);
background: -o-linear-gradient(top, #363636 0%, #252525 100%);
background: -ms-linear-gradient(top, #363636 0%, #252525 100%);
background: linear-gradient(to bottom, #363636 0%, #252525 100%);
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#252525', GradientType=0 );
}
.tour-element-2 .panel{
float: left;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
width: 70%;
border: 1px solid;
border-color: #ebebeb;
}
/* 15.c.) tour-element-3 */
.tour-element-3 ul.tabs{
float: left;
width: 30%;
}
.tour-element-3 ul.tabs li{
display: block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
}
.tour-element-3 ul.tabs li a{
display: block;
padding-top: 9px;
padding-right: 18px;
padding-bottom: 9px;
padding-left: 18px;
border: 1px solid;
border-color: #ebebeb;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tour-element-3 ul.tabs li.active a{
border-color: #363636;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #363636;
color: #fff;
}
.tour-element-3 .panel{
float: left;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
width: 70%;
border: 1px solid;
border-color: #ebebeb;
}
/* 15.d.) tour-element-4 */
.tour-element-4{
border: 1px solid;
border-color: #ebebeb;
background-color: #fafafa;
}
.tour-element-4 ul.tabs{
float: left;
width: 30%;
}
.tour-element-4 ul.tabs li{
display: block;
}
.tour-element-4 ul.tabs li a{
position: relative;
z-index: 1;
display: block;
margin-top: -1px;
margin-right: -1px;
padding-top: 18px;
padding-right: 18px;
padding-bottom: 18px;
padding-left: 18px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: transparent;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: transparent;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tour-element-4 ul.tabs li.active a{
border-top-color: #ebebeb;
border-bottom-color: #ebebeb;
background-color: #fff;
}
.tour-element-4 .panel{
position: relative;
float: left;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
width: 70%;
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
background-color: #fff;
}
/* 15.e.) tour-element-5 */
.tour-element-5{
border: 1px solid;
border-color: #ebebeb;
background-color: #fafafa;
}
.tour-element-5 ul.tabs{
float: left;
width: 30%;
}
.tour-element-5 ul.tabs li{
display: block;
}
.tour-element-5 ul.tabs li a{
position: relative;
z-index: 1;
display: block;
margin-top: -1px;
margin-right: -1px;
padding-top: 13px;
padding-right: 13px;
padding-bottom: 13px;
padding-left: 13px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: transparent;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: transparent;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tour-element-5 ul.tabs li a span{
display: table;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
}
.tour-element-5 ul.tabs li.active a{
border-top-color: #ebebeb;
border-bottom-color: #ebebeb;
background-color: #fff;
}
.tour-element-5 ul.tabs li a .icon{
display: block;
float: left;
margin-right: 10px;
width: 30px;
height: 30px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 20px;
}
.tour-element-5 ul.tabs li a .icon:before{
line-height: 30px;
}
.tour-element-5 ul.tabs li.active a .icon{
background-color: #959595;
}
.tour-element-5 .panel{
position: relative;
float: left;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
width: 70%;
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
background-color: #fff;
}
/* 15.f.) tour-element-6 */
.tour-element-6 ul.tabs{
float: left;
width: 30%;
}
.tour-element-6 ul.tabs li{
display: block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
}
.tour-element-6 ul.tabs li a{
display: block;
padding-top: 9px;
padding-right: 9px;
padding-bottom: 9px;
padding-left: 9px;
border: 1px solid;
border-color: #ebebeb;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tour-element-6 ul.tabs li a span{
display: table;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
}
.tour-element-6 ul.tabs li.active a{
}
.tour-element-6 ul.tabs li a .icon{
display: block;
float: left;
margin-right: 10px;
width: 30px;
height: 30px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 20px;
}
.tour-element-6 ul.tabs li a .icon:before{
line-height: 30px;
}
.tour-element-6 ul.tabs li.active a .icon{
background-color: #959595;
}
.tour-element-6 .panel{
float: left;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
width: 70%;
border: 1px solid;
border-color: #ebebeb;
}
/* 15.g.) tour-element-7 */
.tour-element-7 ul.tabs{
float: left;
width: 30%;
}
.tour-element-7 ul.tabs li{
display: block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
}
.tour-element-7 ul.tabs li a{
display: block;
padding-top: 9px;
padding-right: 9px;
padding-bottom: 9px;
padding-left: 9px;
border: 1px solid;
border-color: #ebebeb;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tour-element-7 ul.tabs li a span{
display: table;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
}
.tour-element-7 ul.tabs li a .icon{
display: block;
float: left;
margin-right: 10px;
width: 30px;
height: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 18px;
}
.tour-element-7 ul.tabs li a .icon:before{
line-height: 30px;
}
.tour-element-7 ul.tabs li.active a .icon{
background-color: #959595;
}
.tour-element-7 .panel{
float: left;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
width: 70%;
border: 1px solid;
border-color: #ebebeb;
}
/* 15.h.) tour-element-8 */
.tour-element-8 ul.tabs{
float: left;
width: 30%;
}
.tour-element-8 ul.tabs li{
display: block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
}
.tour-element-8 ul.tabs li a{
position: relative;
display: block;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #363636;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
line-height: 20px;
}
.tour-element-8 ul.tabs li a:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid;
border-color: #ebebeb;
content: '';
}
.tour-element-8 ul.tabs li a span{
display: table;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.tour-element-8 ul.tabs li a .icon{
position: relative;
z-index: 1;
float: left;
width: 40px;
height: 40px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 20px;
}
.tour-element-8 ul.tabs li a .icon:before{
line-height: 40px;
}
.tour-element-8 ul.tabs li.active a .icon{
background-color: #959595;
}
.tour-element-8 .panel{
float: left;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
width: 70%;
border: 1px solid;
border-color: #ebebeb;
}
/*------------------------------------------------------------------
16. Bulleted List
-------------------------------------------------------------------*/
.bulleted-list{
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style: none;
line-height: 20px;
}
.bulleted-list a{
color: #363636;
}
.bulleted-list a:hover{
color: #363636;
}
.bulleted-list i{
margin-right: 10px;
color: #959595;
}
.bulleted-list-50 li{
padding-top: 15px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
}
.bulleted-list-40 li{
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.bulleted-list-30 li{
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
}
.bulleted-list-ordered span{
display: inline-block;
margin-right: 10px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background-color: #ebebeb;
color: #363636;
text-align: center;
line-height: 20px;
}
.bulleted-list-ordered li:hover span{
background-color: #ccc;
color: #363636;
}
.bulleted-list-50.bulleted-list-ordered li{
padding-top: 13px;
padding-right: 0;
padding-bottom: 13px;
padding-left: 0;
}
.bulleted-list-40.bulleted-list-ordered li{
padding-top: 8px;
padding-right: 0;
padding-bottom: 8px;
padding-left: 0;
}
.bulleted-list-30.bulleted-list-ordered li{
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 0;
}
.bulleted-list-ordered a{
display: inline-block;
}
.bulleted-list .icon{
display: inline-block;
box-sizing: content-box;
margin-top: -4px;
margin-bottom: -4px;
vertical-align: middle;
}
.bulleted-list-icon-style-1 .icon{
font-size: 18px;
}
.bulleted-list-iconWrap .bulleted-iconWrap{
display: table-cell;
}
.bulleted-list-iconWrap .bulleted-contentWrap{
display: table-cell;
vertical-align: top;
}
/* 16.a.) bulleted-list-style-1 */
.bulleted-list-style-1{
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ebebeb;
}
.bulleted-list-style-1 li{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ebebeb;
}
/* 16.b.) bulleted-list-style-2 */
.bulleted-list-style-2 li{
position: relative;
}
.bulleted-list-style-2 li:after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 40px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ebebeb;
content: '';
}
/* 16.c.) custom-bullet-1 */
.custom-bullet-1 .icon{
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-color: #ebebeb;
text-align: center;
}
.custom-bullet-1 .icon:before{
line-height: 20px;
}
.custom-bullet-1 li:hover .icon{
border-color: #ccc;
}
/* 16.d.) custom-bullet-2 */
.custom-bullet-2 .icon{
display: inline-block;
width: 22px;
height: 22px;
border: 1px solid;
border-color: #ebebeb;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
color: #959595;
text-align: center;
}
.custom-bullet-2 .icon:before{
line-height: 22px;
}
.custom-bullet-2 li:hover .icon{
color: #ccc;
}
/* 16.e.) custom-bullet-3 */
.custom-bullet-3 .icon{
display: inline-block;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background-color: #ebebeb;
color: #fff;
text-align: center;
}
.custom-bullet-3 .icon:before{
line-height: 24px;
}
.custom-bullet-3 li:hover .icon{
background-color: #ccc;
}
.bulleted-list-50.custom-bullet-3 li{
padding-top: 13px;
padding-right: 0;
padding-bottom: 13px;
padding-left: 0;
}
.bulleted-list-40.custom-bullet-3 li{
padding-top: 8px;
padding-right: 0;
padding-bottom: 8px;
padding-left: 0;
}
.bulleted-list-30.custom-bullet-3 li{
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 0;
}
/*------------------------------------------------------------------
17. Media Element
-------------------------------------------------------------------*/
.media-element{
margin-bottom: 20px;
}
/* 17.a.) media-element-1 */
.media-element-1{
background-color: #fafafa;
}
.media-element-1 .col{
float: left;
width: 100%;
}
@media (min-width: 992px) {
.media-element-1 .col{
width: 50%;
}
}
.media-element-1-row-2 .itemWrap{
position: relative;
float: left;
width: 100%;
}
@media (min-width: 992px) {
.media-element-1-row-2 .itemWrap{
width: 50%;
}
}
.media-element-1-row-2 .itemWrap:after {
display: block;
padding-top: 100%;
content: '';
}
.media-element-1-row-2 .itemWrap .item {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin-top: 0;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0;
}
@media (min-width: 992px) {
.column-02 .media-element-1-row-2 .itemWrap:last-child .item{
margin-right: 0;
}
}
.media-element-1-row-1 .itemWrap{
position: relative;
width: 100%;
}
.media-element-1-row-1 .itemWrap:after {
display: block;
padding-top: 50%;
content: '';
}
.media-element-1-row-1 .itemWrap .item {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
margin-top: 0;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0;
}
.column-02 .media-element-1-row-1 .itemWrap:last-child .item{
margin-right: 0;
}
@media (min-width: 992px) {
.media-element-last-row .itemWrap .item{
margin-bottom: 0;
}
}
.media-element-1 .item.background-image{
background-attachment: scroll;
background-position: 50% 49%;
background-size: cover;
background-repeat: no-repeat;
}
.media-element-1 .media-element-1-link{
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
display: block;
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
text-decoration: none !important;
font-size: 40px;
opacity: 0;
}
.media-element-1 .media-element-1-link:hover{
background-color: #959595;
}
.media-element-1 .media-element-1-link .icon:before{
display: block;
margin-top: -1px;
margin-left: 1px;
width: 50px;
height: 50px;
line-height: 50px;
}
.media-element-1 .item:hover .media-element-1-link{
opacity: 1;
}
.media-element-1 .media-element-1-caption{
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
width: 100%;
}
.media-element-1 .media-element-1-caption .title{
display: table;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: #363636;
color: #fff;
text-transform: uppercase;
font-weight: 700;
line-height: 24px;
}
.media-element-1 .item:hover .media-element-1-caption .title{
background-color: #959595;
}
.media-element-1 .media-element-1-caption .description{
display: inline-block;
margin-top: 5px;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: #959595;
color: #fff;
line-height: 20px;
}
.media-element-1 .media-element-1-hover-effect{
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
opacity: 1;
}
.media-element-1 .item:hover .media-element-1-hover-effect{
opacity: 0;
}
@media (max-width: 991px) {
.media-element-1 .text-content:after{
padding-top: inherit;
}
.media-element-1 .text-content .item{
position: relative;
}
}
.media-element-1 .text-content .item{
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
}
.media-element-1 .highligh-heading-2{
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
font-weight: 700;
font-size: 48px;
line-height: 60px;
}
/* 17.b.) media-element-2 */
.media-element-2{
background-color: #fafafa;
}
.media-element-2 .col{
float: left;
width: 100%;
}
@media (min-width: 992px) {
.media-element-2 .col{
width: 50%;
}
}
.media-element-2-row-2 .itemWrap{
position: relative;
float: left;
width: 100%;
}
@media (min-width: 992px) {
.media-element-2-row-2 .itemWrap{
width: 50%;
}
}
.media-element-2-row-2 .itemWrap:after {
display: block;
padding-top: 100%;
content: '';
}
.media-element-2-row-2 .itemWrap .item {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin-top: 0;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 0;
}
@media (min-width: 992px) {
.column-02 .media-element-2-row-2 .itemWrap:last-child .item{
margin-right: 0;
}
}
.media-element-2-row-1 .itemWrap{
position: relative;
width: 100%;
}
.media-element-2-row-1 .itemWrap:after {
display: block;
padding-top: 50%;
content: '';
}
.media-element-2-row-1 .itemWrap .item {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
margin-top: 0;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 0;
}
.column-02 .media-element-2-row-1 .itemWrap:last-child .item{
margin-right: 0;
}
@media (min-width: 992px) {
.media-element-last-row .itemWrap .item{
margin-bottom: 0;
}
}
.media-element-2 .item.background-image{
background-attachment: scroll;
background-position: 50% 49%;
background-size: cover;
background-repeat: no-repeat;
}
.media-element-2 .media-element-2-link{
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
display: block;
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
text-decoration: none !important;
font-size: 40px;
opacity: 0;
}
.media-element-2 .media-element-2-link:hover{
background-color: #959595;
}
.media-element-2 .media-element-2-link .icon:before{
display: block;
margin-top: -1px;
margin-left: 1px;
width: 50px;
height: 50px;
line-height: 50px;
}
.media-element-2 .item:hover .media-element-2-link{
opacity: 1;
}
.media-element-2 .media-element-2-caption{
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
width: 100%;
}
.media-element-2 .media-element-2-caption .title{
display: table;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: #363636;
color: #fff;
text-transform: uppercase;
font-weight: 700;
line-height: 24px;
}
.media-element-2 .item:hover .media-element-2-caption .title{
background-color: #959595;
}
.media-element-2 .media-element-2-caption .description{
display: inline-block;
margin-top: 5px;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: #959595;
color: #fff;
line-height: 20px;
}
.media-element-2 .media-element-2-hover-effect{
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
opacity: 1;
}
.media-element-2 .item:hover .media-element-2-hover-effect{
opacity: 0;
}
@media (max-width: 991px) {
.media-element-2 .text-content:after{
padding-top: inherit;
}
.media-element-2 .text-content .item{
position: relative;
}
}
.media-element-2 .text-content .item{
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
}
.media-element-2 .highligh-heading-2{
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
font-weight: 700;
font-size: 48px;
line-height: 60px;
}
/* 17.c.) media-element-3 */
.media-element-3 img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.media-element-3 .media-elementWrap{
position: relative;
}
.media-element-3 .media-element-3-link{
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
display: block;
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
text-decoration: none !important;
font-size: 40px;
line-height: 50px;
opacity: 0;
}
.media-element-3 .media-element-3-link:hover{
background-color: #959595;
}
.media-element-3 .media-element-3-link .icon:before{
display: block;
margin-top: -1px;
margin-left: 1px;
width: 50px;
height: 50px;
line-height: 50px;
}
.media-element-3 .media-elementWrap:hover .media-element-3-link{
opacity: 1;
}
.media-element-3 .media-element-3-caption{
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
width: 100%;
}
.media-element-3 .media-element-3-caption .title{
display: table;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: #363636;
color: #fff;
text-transform: uppercase;
font-weight: 700;
line-height: 24px;
}
.media-element-3 .media-elementWrap:hover .media-element-3-caption .title{
background-color: #959595;
}
.media-element-3 .media-element-3-caption .description{
display: inline-block;
margin-top: 5px;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
background-color: #959595;
color: #fff;
line-height: 20px;
}
.media-element-3 .media-element-3-hover-effect{
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
opacity: 1;
}
.media-element-3 .media-elementWrap:hover .media-element-3-hover-effect{
opacity: 0;
}
/* 17.d.) media-element-4 */
.media-element-4 .media-elementWrap{
position: relative;
}
.media-element-4 img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.media-element-4 .media-element-4-content{
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
margin-left: 70px;
background-color: #fff;
text-align: center;
}
.media-element-4 .media-element-4-content .title{
margin-bottom: 15px;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
background-color: #363636;
color: #fff;
text-transform: uppercase;
font-size: 16px;
line-height: 20px;
}
.media-element-4 .media-elementWrap:hover .media-element-4-content .title{
background-color: #363636;
}
.media-element-4 .media-element-4-content .description{
display: block;
margin-top: 0;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
}
.media-element-4 .media-element-4-content .btn{
margin-right: 0;
}
.media-element-4 .media-element-4-hover-effect{
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(54,54,54,0);
background: -moz-linear-gradient(top, rgba(54,54,54,0) 0%, rgba(54,54,54,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(54,54,54,0)), color-stop(100%, rgba(54,54,54,1)));
background: -webkit-linear-gradient(top, rgba(54,54,54,0) 0%, rgba(54,54,54,1) 100%);
background: -o-linear-gradient(top, rgba(54,54,54,0) 0%, rgba(54,54,54,1) 100%);
background: -ms-linear-gradient(top, rgba(54,54,54,0) 0%, rgba(54,54,54,1) 100%);
background: linear-gradient(to bottom, rgba(54,54,54,0) 0%, rgba(54,54,54,1) 100%);
opacity: 1;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#363636', GradientType=0 );
}
.media-element-4 .media-elementWrap:hover .media-element-4-hover-effect{
opacity: 0;
}
/* 17.e.) media-element-5 */
.media-element-5 .media-elementWrap{
position: relative;
}
.media-element-5 img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.media-element-5 .media-element-content{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
text-align: center;
}
.media-element-5 .media-element-content table{
width: 100%;
height: 100%;
}
.media-element-5 .media-element-content table h4{
display: inline-block;
margin-bottom: 20px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
background-color: #363636;
color: #fff;
font-size: 24px;
line-height: 30px;
}
.media-element-5 .media-element-content table .sep-element{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
width: 80px;
height: 3px;
background-color: #fff;
}
.media-element-5 .media-element-content .btn{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.media-element-5 .media-element-5-hover-effect{
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(54,54,54,0);
background: -moz-linear-gradient(top, rgba(54,54,54,0) 0%, rgba(54,54,54,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(54,54,54,0)), color-stop(100%, rgba(54,54,54,1)));
background: -webkit-linear-gradient(top, rgba(54,54,54,0) 0%, rgba(54,54,54,1) 100%);
background: -o-linear-gradient(top, rgba(54,54,54,0) 0%, rgba(54,54,54,1) 100%);
background: -ms-linear-gradient(top, rgba(54,54,54,0) 0%, rgba(54,54,54,1) 100%);
background: linear-gradient(to bottom, rgba(54,54,54,0) 0%, rgba(54,54,54,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#363636', GradientType=0 );
}
.media-element-5 .media-elementWrap:hover .media-element-5-hover-effect{
background: rgba(149,149,149,0);
background: -moz-linear-gradient(top, rgba(149,149,149,0) 0%, rgba(149,149,149,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(149,149,149,0)), color-stop(100%, rgba(149,149,149,1)));
background: -webkit-linear-gradient(top, rgba(149,149,149,0) 0%, rgba(149,149,149,1) 100%);
background: -o-linear-gradient(top, rgba(149,149,149,0) 0%, rgba(149,149,149,1) 100%);
background: -ms-linear-gradient(top, rgba(149,149,149,0) 0%, rgba(149,149,149,1) 100%);
background: linear-gradient(to bottom, rgba(149,149,149,0) 0%, rgba(149,149,149,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#959595', GradientType=0 );
}
/* 17.f.) media-element-6 */
.media-element-6{
padding-top: 30px;
padding-right: 30%;
padding-bottom: 30px;
padding-left: 30px;
border: 1px solid;
border-color: #ebebeb;
background-color: #fff;
background-position: right bottom;
background-repeat: no-repeat;
}
.media-element-6 h4{
margin-bottom: 20px;
}
.media-element-6 .sep-element{
display: block;
margin-bottom: 20px;
width: 100px;
height: 3px;
background-color: #363636;
}
.media-element-6 .description{
margin-bottom: 20px;
}
.media-element-6 .btn{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
/* 17.g.) media-element-7 */
.media-element-7{
position: relative;
}
.media-element-7:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border: 1px solid;
border-color: #ebebeb;
content: '';
}
.media-element-7Wrap{
position: relative;
z-index: 9;
}
.media-element-7 img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.media-element-7-featured-image{
float: none;
width: 100%;
}
@media (min-width: 992px){
.media-element-7-featured-image{
float: left;
width: 33.3%;
}
}
.media-element-7-content{
float: none;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
width: 100%;
}
@media (min-width: 992px){
.media-element-7-content{
float: left;
width: 33.3%;
}
}
.media-element-7-content h4{
margin-bottom: 20px;
}
.media-element-7-content .sep-element{
display: block;
margin-bottom: 20px;
width: 100px;
height: 3px;
background-color: #363636;
}
.media-element-7-content .description{
margin-bottom: 20px;
}
.media-element-7-content .btn{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.media-element-7-gallery{
float: none;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
width: 100%;
list-style: none;
}
@media (min-width: 992px){
.media-element-7-gallery{
float: left;
width: 33.3%;
}
}
.media-element-7-gallery li{
float: left;
width: 50%;
}
/* 17.h.) media-element-8 */
.media-element-8{
position: relative;
display: block;
}
.media-element-8 img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.media-element-8 .media-element-content{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
text-align: center;
}
.media-element-8 .media-element-content table{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
.media-element-8 .media-element-content table h4{
display: inline-block;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
font-size: 16px;
line-height: 20px;
}
/* 17.i.) media-element-9 */
.media-element-9{
position: relative;
background-color: #fff;
}
.media-element-9:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border: 1px solid;
border-color: #ebebeb;
content: '';
}
.media-element-9 .media-elementWrap{
position: relative;
z-index: 9;
}
.media-element-9 .btn{
margin-bottom: 0;
margin-left: 0;
background-color: #ebebeb;
}
.media-element-9 .media-element-image{
float: none;
width: 100%;
}
@media (min-width: 992px){
.media-element-9 .media-element-image{
float: left;
}
}
.media-element-9 .media-element-image img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.media-element-9 .media-element-content{
float: none;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
width: 100%;
}
@media (min-width: 992px){
.media-element-9 .media-element-content{
float: left;
}
}
@media (min-width: 992px){
.media-element-9.media-element-40-60 .media-element-image{
width: 40%;
}
.media-element-9.media-element-40-60 .media-element-content{
width: 60%;
}
.media-element-9.media-element-50-50 .media-element-image{
width: 50%;
}
.media-element-9.media-element-50-50 .media-element-content{
width: 50%;
}
.media-element-9.media-element-45-55 .media-element-image{
width: 45%;
}
.media-element-9.media-element-45-55 .media-element-content{
width: 55%;
}
}
/*------------------------------------------------------------------
18. Highlight Heading
-------------------------------------------------------------------*/
.highligh-heading{
display: inline-block;
padding-top: 0;
padding-right: 3px;
padding-bottom: 0;
padding-left: 3px;
background-color: #363636;
color: #fff !important;
}
/* 18.a.) highligh-heading-1 */
.highligh-heading-1{
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
font-weight: 700;
font-size: 54px;
line-height: 70px;
}
/* 18.b.) highligh-heading-2 */
.highligh-heading-2{
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
font-weight: 700;
font-size: 48px;
line-height: 60px;
}
/* 18.c.) highligh-heading-3 */
.highligh-heading-3{
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
font-weight: 700;
font-size: 36px;
line-height: 50px;
}
/* 18.d.) highligh-heading-4 */
.highligh-heading-4{
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
font-weight: 700;
font-size: 30px;
line-height: 40px;
}
/*------------------------------------------------------------------
19. Tooltip
-------------------------------------------------------------------*/
.tooltip{
position: relative;
border-bottom: 1px dotted #363636;
text-align: center;
cursor: help;
}
.tooltip .tooltip-container{
position: absolute;
bottom: 100%;
left: 0;
display: block;
margin-bottom: 5px;
width: auto;
background-color: #363636;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
color: #fff;
white-space: nowrap;
font-size: 13px;
opacity: 0;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
pointer-events: none;
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}
.tooltip .tooltip-container span{
display: block;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;
}
.tooltip .tooltip-container:before{
position: absolute;
bottom: -20px;
left: 0;
display: block;
width: 100%;
height: 20px;
content: " ";
}
.tooltip .tooltip-container:after{
position: absolute;
bottom: -10px;
left: 10px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 10px;
border-top-color: #363636;
border-right-width: 10px;
border-right-color: transparent;
border-bottom-width: 0;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.tooltip:hover .tooltip-container{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
pointer-events: auto;
}
.lte8 .tooltip .tooltip-container{
display: none;
}
.lte8 .tooltip:hover .tooltip-container{
display: block;
}
.tooltip-image{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 250px !important;
}
.tooltip-image span{
position: absolute;
bottom: 20px;
left: 20px;
background-color: #363636;
}
.tooltip-image img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
/*------------------------------------------------------------------
20. Boxed Elements
-------------------------------------------------------------------*/
.boxed-element{
margin-bottom: 20px;
padding-bottom: 0.01px;
}
.boxed-element .iconbox-sep-element{
display: table;
width: 100px;
height: 3px;
}
.boxed-element.box-centered .iconbox-sep-element{
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.boxed-element .iconbox-description{
margin-bottom: 10px;
}
.boxed-element .iconbox-description p{
color:rgba(54, 54, 54, 0.8);
}
.boxed-element .btn{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.boxed-element.box-centered{
text-align: center;
}
.boxed-element .iconbox-img img{
display: block;
max-width: 100% !important;
width: 1em;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: inherit;
}
.boxed-element .iconbox-align{
display: inline-block;
}
.boxed-element .iconbox-design{
position: relative;
}
.boxed-element .iconbox-counter{
position: relative;
display: block;
width: 90px;
height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
}
.boxed-element .iconbox-counter span{
position: absolute;
right: -15px;
bottom: -10px;
display: block;
width: 90px;
height: 90px;
font-weight: 700;
font-size: 60px;
line-height: 90px;
}
.boxed-element .iconbox-counter-2{
position: relative;
display: block;
overflow: hidden;
width: 80px;
height: 80px;
background-color: #363636;
color: #fff;
text-align: center;
}
.boxed-element .iconbox-counter-2 span{
position: absolute;
right: -15px;
bottom: -20px;
display: block;
width: 80px;
height: 80px;
font-weight: 700;
font-size: 60px;
line-height: 80px;
}
.boxed-element .iconbox-counter-3{
position: relative;
display: block;
overflow: hidden;
width: 70px;
height: 70px;
background-color: #363636;
color: #fff;
text-align: center;
}
.boxed-element .iconbox-counter-3 span{
position: absolute;
right: -10px;
bottom: -15px;
display: block;
width: 70px;
height: 70px;
font-weight: 700;
font-size: 60px;
line-height: 70px;
}
.boxed-element .iconbox-counter-4{
position: relative;
display: block;
width: 70px;
height: 70px;
background-color: #363636;
color: #fff;
text-align: center;
}
.boxed-element .iconbox-counter-4 span{
position: absolute;
display: block;
width: 70px;
height: 70px;
font-weight: 700;
font-size: 60px;
line-height: 70px;
}
.boxed-element .iconbox-default{
display: table-cell;
vertical-align: middle;
}
.box-lefted .iconbox-header{
display: table-cell;
vertical-align: middle;
}
.box-righted{
text-align: right;
}
.box-righted .iconbox-header{
display: table-cell;
vertical-align: middle;
width: 100%;
}
.box-righted .iconbox-default{
display: table-cell;
vertical-align: middle;
width: 100%;
}
.box-lefted .iconbox-header .iconbox-title{
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
.box-righted .iconbox-header .iconbox-title{
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
.box-lefted .iconWrap{
margin-right: 10px;
}
.box-righted .iconWrap{
margin-left: 10px;
}
.boxed-element .iconbox-left{
display: table-cell;
vertical-align: top;
}
.boxed-element .iconbox-right{
display: table-cell;
vertical-align: top;
}
.boxed-element .iconbox-container{
display: table-cell;
vertical-align: middle;
}
.iconbox-left .iconWrap{
margin-right: 10px;
}
/* 20.a.) iconbox-1 */
.iconbox-1 .iconbox-title{
font-weight: 700;
}
.iconbox-1 .btn{
background-color: #ebebeb;
}
.iconbox-1 .iconbox-header{
margin-bottom: 20px;
}
.iconbox-1 .iconbox-sep-element{
background-color: #363636;
}
.iconbox-1:hover .iconbox-sep-element{
background-color: #959595;
}
.iconbox-1 .iconbox-top{
margin-bottom: 20px;
}
.iconbox-1 .iconbox-design{
display: block;
margin-top: 4px;
margin-right: 4px;
margin-bottom: 4px;
margin-left: 4px;
width: 90px;
height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 50px;
}
.iconbox-1 .iconbox-design i:before{
line-height: 90px;
}
.iconbox-1 .iconbox-extradesign{
display: block;
border: 1px solid;
border-color: #363636;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.iconbox-1:hover .iconbox-design{
background-color: #959595;
}
.iconbox-1:hover .iconbox-extradesign{
border-color: #959595;
}
.iconbox-1 .iconbox-img{
position: relative;
display: block;
margin-top: 4px;
margin-right: 4px;
margin-bottom: 4px;
margin-left: 4px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
width: 90px;
height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
font-size: 50px;
}
.iconbox-1:hover .iconbox-img{
background-color: #959595;
}
.iconbox-1 .btn{
margin-top: 10px;
background-color: #ebebeb;
}
.iconbox-1:hover .btn{
background-color: #ccc;
}
/* 20.b.) iconbox-2 */
.iconbox-2 .iconbox-img{
font-size: 140px;
}
.iconbox-2 .iconbox-top{
margin-bottom: 10px;
}
/* 20.c.) iconbox-3 */
.iconbox-3 .iconbox-title{
font-size: 18px;
}
.iconbox-3 .iconbox-top{
margin-bottom: 10px;
}
.iconbox-3 .btn{
margin-top: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-transform: none;
font-size: 14px;
}
/* 20.d.) iconbox-4 */
.iconbox-4 .iconbox-title{
font-size: 18px;
}
.iconbox-4 .btn{
margin-top: 10px;
}
.iconbox-4 .iconbox-img{
display: block;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
font-size: 190px;
}
.iconbox-4 .iconbox-top{
margin-bottom: 10px;
}
.iconbox-4 .iconbox-img-count{
position: relative;
}
.iconbox-4 .iconbox-img-count span{
position: absolute;
top: 50%;
left: -30px;
display: block;
margin-top: -30px;
width: 60px;
height: 60px;
border: 5px solid;
border-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 24px;
line-height: 50px;
}
.iconbox-4:hover .iconbox-img-count span{
background-color: #959595;
}
/* 20.e.) iconbox-5 */
.iconbox-5 .iconbox-design{
display: block;
width: 100px;
height: 100px;
color: #363636;
font-size: 80px;
}
.iconbox-5 .iconbox-header{
margin-bottom: 20px;
}
.iconbox-5 .iconbox-sep-element{
background-color: #363636;
}
.iconbox-5:hover .iconbox-sep-element{
background-color: #959595;
}
.iconbox-5 .iconbox-design i:before{
line-height: 100px;
}
.iconbox-5 .iconbox-img{
position: relative;
display: block;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 100px;
height: 100px;
font-size: 80px;
}
.iconbox-5 .iconbox-count{
position: relative;
}
.iconbox-5 .iconbox-count span{
position: absolute;
top: 0;
right: -40px;
display: block;
width: 40px;
height: 40px;
border: 3px solid;
border-color: #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 18px;
line-height: 34px;
}
.iconbox-5:hover .iconbox-count span{
border-color: #ebebeb;
background-color: #959595;
color: #fff;
}
.iconbox-5 .btn{
margin-top: 10px;
background-color: #ebebeb;
}
.iconbox-5:hover .btn{
background-color: #ccc;
}
/* 20.f.) iconbox-6 */
.iconbox-6 .iconbox-design{
display: block;
}
.iconbox-6 .iconbox-design .icon{
width: 30px;
height: 30px;
color: #363636;
font-size: 30px;
}
.iconbox-6 .iconbox-design .icon:before{
line-height: 30px;
}
.iconbox-6 .iconbox-header .iconbox-title{
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
}
.iconbox-6 .iconbox-img{
position: relative;
display: block;
width: 30px;
height: 30px;
font-size: 30px;
}
/* 20.g.) iconbox-7 */
.iconbox-7 .iconbox-design{
display: block;
width: 40px;
height: 40px;
background-color: #363636;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 24px;
line-height: 40px;
}
.iconbox-7 .iconbox-design i::before{
line-height: 40px;
}
.iconbox-7 .iconbox-design.extra-element:after{
position: absolute;
bottom: -10px;
left: 10px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 10px;
border-right-color: #363636;
border-bottom-width: 10px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.iconbox-7 .iconbox-header .iconbox-title{
font-size: 18px;
}
.iconbox-7 .iconbox-description{
margin-top: 5px;
}
/* 20.h.) iconbox-8 */
.iconbox-8 .iconbox-design{
display: block;
width: 40px;
height: 40px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 30px;
}
.iconbox-8 .iconbox-design i:before{
line-height: 40px;
}
.iconbox-8 .iconbox-design.extra-element:after{
position: absolute;
bottom: -10px;
left: 10px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 10px;
border-right-color: #363636;
border-bottom-width: 10px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.iconbox-8 .iconbox-header .iconbox-title{
font-size: 18px;
}
.iconbox-8 .iconbox-description{
margin-top: 5px;
}
/* 20.i.) iconbox-9 */
.iconbox-9 .iconbox-img{
position: relative;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
width: 40px;
height: 40px;
background-color: #363636;
font-size: 30px;
}
.iconbox-9 .iconbox-img.extra-element:after{
position: absolute;
bottom: -10px;
left: 10px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 10px;
border-right-color: #363636;
border-bottom-width: 10px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.iconbox-9 .iconbox-header .iconbox-title{
font-size: 18px;
}
.iconbox-9 .iconbox-description{
margin-top: 5px;
}
/* 20.j.) iconbox-10 */
.iconbox-10 .iconbox-design{
display: block;
width: 30px;
height: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 18px;
}
.iconbox-10 .iconbox-design i{
}
.iconbox-10 .iconbox-design i:before{
line-height: 30px;
}
.iconbox-10 .iconbox-container .iconbox-title{
font-size: 18px;
}
.iconbox-10 .iconbox-img{
position: relative;
display: block;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
width: 30px;
height: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
font-size: 18px;
}
/* 20.k.) iconbox-11 */
.iconbox-11 .iconbox-header .iconbox-title{
font-size: 18px;
}
.iconbox-11 .iconbox-img{
font-size: 80px;
}
.iconbox-11 .iconbox-right .iconWrap{
margin-left: 20px;
}
.iconbox-11 .iconbox-left .iconWrap{
margin-right: 20px;
}
/* 20.l.) iconbox-12 */
.iconbox-12 .iconbox-header .iconbox-title{
font-size: 18px;
}
.iconbox-12 .iconbox-right .iconWrap{
margin-left: 20px;
}
.iconbox-12 .iconbox-left .iconWrap{
margin-right: 20px;
}
/* 20.m.) iconbox-13 */
.iconbox-13 .iconbox-header .iconbox-title{
font-size: 18px;
}
.iconbox-13 .iconbox-right .iconWrap{
margin-left: 20px;
}
.iconbox-13 .iconbox-left .iconWrap{
margin-right: 20px;
}
.iconbox-13 .iconbox-design{
display: block;
margin-top: 4px;
margin-right: 4px;
margin-bottom: 4px;
margin-left: 4px;
width: 80px;
height: 80px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 45px;
}
.iconbox-13 .iconbox-design i:before{
line-height: 80px;
}
.iconbox-13 .iconbox-extradesign{
display: block;
border: 1px solid;
border-color: #363636;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.iconbox-13:hover .iconbox-design{
background-color: #959595;
}
.iconbox-13:hover .iconbox-extradesign{
border-color: #959595;
}
/* 20.n.) iconbox-14 */
.iconbox-14 .iconbox-header .iconbox-title{
font-size: 18px;
}
.iconbox-14 .iconbox-right .iconWrap{
margin-left: 20px;
}
.iconbox-14 .iconbox-left .iconWrap{
margin-right: 20px;
}
.iconbox-14 .iconbox-design{
display: block;
width: 80px;
height: 80px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 50px;
}
.iconbox-14 .iconbox-design i:before{
line-height: 80px;
}
.iconbox-14 .iconbox-design.extra-element:after{
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 20px;
border-right-color: #363636;
border-bottom-width: 20px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.iconbox-14 .iconbox-img{
position: relative;
display: block;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
width: 80px;
height: 80px;
background-color: #363636;
font-size: 50px;
}
.iconbox-14 .iconbox-img.extra-element:after{
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 20px;
border-right-color: #363636;
border-bottom-width: 20px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
/* 20.o.) iconbox-15 */
.iconbox-15{
position: relative;
margin-top: 35px;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
border: 1px solid;
border-color: #ebebeb;
}
.iconbox-15 .iconWrap{
position: absolute;
top: -35px;
right: 30px;
}
.iconbox-15.box-lefted .iconWrap{
right: auto;
left: 30px;
}
.iconbox-15 .iconbox-header .iconbox-title{
font-size: 18px;
}
.iconbox-15 .iconbox-design{
display: block;
width: 70px;
height: 70px;
background-color: #e42127;
color: #fff;
text-align: center;
font-size: 40px;
line-height: 70px;
}
.iconbox-15 .iconbox-design i:before{
line-height: 70px;
}
.iconbox-15 .iconbox-img{
position: relative;
display: block;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
width: 70px;
height: 70px;
background-color: #363636;
font-size: 40px;
}
.iconbox-15 .iconbox-description{
margin-bottom: 20px;
}
.iconbox-15 .btn{
margin-bottom: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
text-transform: none;
font-size: 14px;
}
/* 20.p.) iconbox-16 */
.iconbox-16{
position: relative;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
border: 1px solid;
border-color: #ebebeb;
background-color: #fff;
}
.iconbox-16 .iconbox-left .iconWrap{
margin-right: 20px;
}
.iconbox-16 .iconbox-header .iconbox-title{
font-size: 18px;
}
.iconbox-16 .iconbox-design{
display: block;
width: 70px;
height: 70px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 40px;
line-height: 70px;
}
.iconbox-16 .iconbox-design i:before{
line-height: 70px;
}
.iconbox-16 .iconbox-img{
position: relative;
display: block;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
width: 70px;
height: 70px;
background-color: #363636;
font-size: 40px;
}
/* 20.q.) iconbox-17 */
.iconbox-17{
position: relative;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
border: 1px solid;
border-color: #ebebeb;
}
.iconbox-17 .iconbox-design{
display: block;
width: 70px;
height: 70px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 40px;
}
.iconbox-17 .iconbox-design i:before{
line-height: 70px;
}
.iconbox-17 .iconbox-left .iconWrap{
margin-right: 20px;
}
.iconbox-17 .iconbox-header .iconbox-title{
font-size: 18px;
}
/* 20.r.) iconbox-18 */
.iconbox-18{
position: relative;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
border: 1px solid;
border-color: #ebebeb;
}
.iconbox-18 .iconbox-img{
position: relative;
display: block;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
width: 70px;
height: 70px;
background-color: #363636;
font-size: 40px;
}
.iconbox-18 .iconbox-img.extra-element:after{
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 20px;
border-right-color: #363636;
border-bottom-width: 20px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.iconbox-18 .iconbox-design{
display: block;
width: 70px;
height: 70px;
background-color: #363636;
color: #fff;
text-align: center;
font-size: 40px;
}
.iconbox-18 .iconbox-design i:before{
line-height: 70px;
}
.iconbox-18 .iconbox-design.extra-element:after{
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 20px;
border-right-color: #363636;
border-bottom-width: 20px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.iconbox-18 .iconbox-left .iconWrap{
margin-right: 20px;
}
.iconbox-18 .iconbox-header .iconbox-title{
font-size: 18px;
}
/* 20.s.) iconbox-19 */
.iconbox-19{
padding-top: 30px;
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
border: 1px solid;
border-color: transparent;
background-color: #363636;
color: #fff;
}
.iconbox-19:hover{
border-color: #ebebeb;
background-color: #fafafa;
color: #363636;
}
.iconbox-19 .iconbox-counter{
background-color: #252525;
color: #363636;
}
.iconbox-19:hover .iconbox-counter{
background-color: #363636;
color: #fafafa;
}
.iconbox-19 .iconbox-title{
color: #fff;
font-size: 18px;
}
.iconbox-19:hover .iconbox-title{
color: #252525;
}
.iconbox-19 .iconbox-top{
margin-bottom: 10px;
}
.iconbox-19 .btn{
margin-top: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
color: #fff;
text-transform: none;
font-size: 14px;
}
.iconbox-19:hover .btn{
color: #363636;
}
.iconbox-19 .iconbox-header{
margin-bottom: 20px;
}
.iconbox-19 .iconbox-sep-element{
background-color: #fff;
}
.iconbox-19:hover .iconbox-sep-element{
background-color: #959595;
}
/* 20.t.) iconbox-20 */
.iconbox-20{
padding-top: 40px;
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
border: 1px solid;
border-color: transparent;
background-color: #363636;
color: #fff;
}
.iconbox-20:hover{
border-color: #ebebeb;
background-color: #fafafa;
color: #363636;
}
.iconbox-20 .iconbox-counter-3{
background-color: #252525;
color: #363636;
}
.iconbox-20:hover .iconbox-counter-3{
background-color: #363636;
color: #fafafa;
}
.iconbox-20 .iconbox-title{
color: #fff;
font-size: 18px;
}
.iconbox-20:hover .iconbox-title{
color: #252525;
}
.iconbox-20 .iconbox-top{
margin-bottom: 20px;
}
.iconbox-20 .btn{
margin-top: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
color: #fff;
text-transform: none;
font-size: 14px;
}
.iconbox-20:hover .btn{
color: #363636;
}
.iconbox-20 .iconbox-header{
margin-bottom: 20px;
}
.iconbox-20 .iconbox-sep-element{
background-color: #fff;
}
.iconbox-20:hover .iconbox-sep-element{
background-color: #959595;
}
/* 20.u.) iconbox-21 */
.iconbox-21{
padding-top: 42px;
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
border: 1px solid;
border-color: transparent;
background-color: #363636;
color: #fff;
}
.iconbox-21:hover{
border-color: #ebebeb;
background-color: #fafafa;
color: #363636;
}
.iconbox-21 .iconbox-design{
display: block;
width: 70px;
height: 70px;
background-color: #252525;
color: #fff;
text-align: center;
font-size: 40px;
}
.iconbox-21 .iconbox-design i:before{
line-height: 70px;
}
.iconbox-21:hover .iconbox-design{
background-color: #363636;
}
.iconbox-21 .iconbox-design.extra-element:after{
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 20px;
border-right-color: #252525;
border-bottom-width: 20px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.iconbox-21:hover .iconbox-design.extra-element:after{
border-right-color: #363636;
}
.iconbox-21 .iconbox-title{
color: #fff;
font-size: 18px;
}
.iconbox-21:hover .iconbox-title{
color: #252525;
}
.iconbox-21 .iconbox-top{
margin-bottom: 22px;
}
.iconbox-21 .btn{
margin-top: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
color: #fff;
text-transform: none;
font-size: 14px;
}
.iconbox-21:hover .btn{
color: #363636;
}
.iconbox-21 .iconbox-header{
margin-bottom: 20px;
}
.iconbox-21 .iconbox-sep-element{
background-color: #fff;
}
.iconbox-21:hover .iconbox-sep-element{
background-color: #959595;
}
/* 20.v.) iconbox-22 */
.iconbox-22{
padding-top: 42px;
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
border: 1px solid;
border-color: transparent;
background-color: #363636;
color: #fff;
}
.iconbox-22:hover{
border-color: #ebebeb;
background-color: #fafafa;
color: #363636;
}
.iconbox-22 .iconbox-title{
color: #fff;
font-size: 18px;
}
.iconbox-22:hover .iconbox-title{
color: #252525;
}
.iconbox-22 .iconbox-top{
margin-bottom: 22px;
}
.iconbox-22 .btn{
margin-top: 10px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
color: #fff;
text-transform: none;
font-size: 14px;
}
.iconbox-22:hover .btn{
color: #363636;
}
.iconbox-22 .iconbox-header{
margin-bottom: 20px;
}
.iconbox-22 .iconbox-sep-element{
background-color: #fff;
}
.iconbox-22:hover .iconbox-sep-element{
background-color: #959595;
}
.iconbox-22 .iconbox-img{
position: relative;
display: block;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
width: 70px;
height: 70px;
background-color: #252525;
font-size: 40px;
}
.iconbox-22 .iconbox-img.extra-element:after{
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 20px;
border-right-color: #252525;
border-bottom-width: 20px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.iconbox-22:hover .iconbox-img{
background-color: #363636;
}
.iconbox-22:hover .iconbox-img.extra-element:after{
border-right-color: #363636;
}
/*------------------------------------------------------------------
21. Accordion
-------------------------------------------------------------------*/
.accordion-element{
margin-bottom: 20px;
}
.accordion-element .panel-title{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.accordion-element .panel-title > a{
position: relative;
display: block;
padding-top: 13px;
padding-right: 20px;
padding-bottom: 13px;
padding-left: 20px;
text-decoration: none !important;
line-height: 24px;
}
.accordion-element .panel-title > a .icon-accordion-element{
position: absolute;
}
.accordion-element .panel-collapse{ }
.accordion-element .panel-body{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.accordion-element .icon-accordion-element-1:before{
content: "\e0f1";
}
.accordion-element .collapsed .icon-accordion-element-1:before{
margin-left: 1px;
content: "\e0f0";
}
.accordion-element .icon-accordion-element-2:before{
content: "\e0f6";
}
.accordion-element .collapsed .icon-accordion-element-2:before{
margin-left: 1px;
content: "\e0f5";
}
.accordion-element .collapse {
display: none;
}
.accordion-element .collapse.in {
display: block;
}
.accordion-element .collapsing {
position: relative;
overflow: hidden;
height: 0;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-property: height, visibility;
-o-transition-property: height, visibility;
transition-property: height, visibility;
}
/* 21.a.) accordion-element-1 */
.accordion-element-1 .panel{
margin-bottom: 3px;
}
.accordion-element-1 .panel-title a{
padding-top: 13px;
padding-right: 54px;
padding-bottom: 13px;
padding-left: 20px;
border: 1px solid;
border-color: #ebebeb;
border-bottom: none;
color: #959595;
}
.accordion-element-1 .panel-title a.collapsed{
border-color: transparent;
background-color: #fafafa;
color: #363636;
}
.accordion-element-1 .panel-title > a .icon-accordion-element{
top: 13px;
right: 20px;
width: 24px;
height: 24px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #959595;
color: #fff;
text-align: center;
font-size: 20px;
}
.accordion-element-1 .panel-title > a .icon-accordion-element:before{
line-height: 24px;
}
.accordion-element-1 .panel-title > a.collapsed .icon-accordion-element{
background-color: #363636;
}
.accordion-element-1 .panel-collapse{
border: 1px solid;
border-color: #ebebeb;
border-top: none;
}
/* 21.b.) accordion-element-2 */
.accordion-element-2 .panel{
margin-bottom: 3px;
}
.accordion-element-2 .panel-title a{
padding-top: 13px;
padding-right: 60px;
padding-bottom: 13px;
padding-left: 20px;
border: 1px solid transparent;
border-top: none;
color: #959595;
}
.accordion-element-2 .panel-title a.collapsed{
border-color: #ebebeb;
background-color: #fafafa;
color: #363636;
}
.accordion-element-2 .panel-title > a .icon-accordion-element{
top: 0;
right: 0;
width: 50px;
height: 50px;
background-color: transparent;
color: #363636;
text-align: center;
font-size: 26px;
}
.accordion-element-2 .panel-title > a .icon-accordion-element:before{
line-height: 50px;
}
.accordion-element-2 .panel-title > a.collapsed .icon-accordion-element{
background-color: #ccc;
color: #fff;
}
/* 21.c.) accordion-element-3 */
.accordion-element-3 .panel{
margin-bottom: 10px;
}
.accordion-element-3 .panel-title a{
padding-top: 13px;
padding-right: 20px;
padding-bottom: 13px;
padding-left: 54px;
background-color: #363636;
color: #fff;
}
.accordion-element-3 .panel-title a.collapsed{
border-color: transparent;
background-color: #fafafa;
color: #363636;
}
.accordion-element-3 .panel-title > a .icon-accordion-element{
top: 13px;
left: 20px;
width: 24px;
height: 24px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
color: #363636;
text-align: center;
font-size: 20px;
}
.accordion-element-3 .panel-title > a .icon-accordion-element:before{
line-height: 24px;
}
.accordion-element-3 .panel-title > a.collapsed .icon-accordion-element{
background-color: #363636;
color: #fff;
}
.accordion-element-3 .panel-collapse{
background-color: #363636;
color: #fff;
}
/* 21.d.) accordion-element-4 */
.accordion-element-4 .panel{
margin-bottom: 10px;
}
.accordion-element-4 .panel-title a{
padding-top: 15px;
padding-right: 54px;
padding-bottom: 15px;
padding-left: 20px;
background-color: #fafafa;
color: #959595;
line-height: 20px;
}
.accordion-element-4 .panel-title a.collapsed{
border-color: transparent;
background-color: #fafafa;
color: #363636;
}
.accordion-element-4 .panel-title > a .icon-accordion-element{
top: 13px;
right: 20px;
width: 20px;
height: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #959595;
color: #fff;
text-align: center;
font-size: 18px;
}
.accordion-element-4 .panel-title > a .icon-accordion-element:before{
line-height: 20px;
}
.accordion-element-4 .panel-title > a.collapsed .icon-accordion-element{
background-color: #363636;
}
.accordion-element-4 .panel-body{
margin-top: 3px;
background-color: #fafafa;
}
/*------------------------------------------------------------------
22. Message Box
-------------------------------------------------------------------*/
.message-box{
position: relative;
margin-bottom: 20px;
line-height: 20px;
}
/* 22.a.) message-box-1 */
.message-box-1.message-box-info{
border: 2px solid #adcede;
background-color: #d9edf7;
color: #31708f;
}
.message-box-1.message-box-info a{
color: #31708f;
}
.message-box-1.message-box-info .box-icon{
color: #adcede;
}
.message-box-1.message-box-info .cancel-btn{
color: #adcede;
}
.message-box-1.message-box-error{
border: 2px solid #d9b2b2;
background-color: #f2dede;
color: #a94442;
}
.message-box-1.message-box-error a{
color: #a94442;
}
.message-box-1.message-box-error .box-icon{
color: #d9b2b2;
}
.message-box-1.message-box-error .cancel-btn{
color: #d9b2b2;
}
.message-box-1.message-box-success{
border: 2px solid #b8d6ab;
background-color: #dff0d8;
color: #3c763d;
}
.message-box-1.message-box-success a{
color: #3c763d;
}
.message-box-1.message-box-success .box-icon{
color: #b8d6ab;
}
.message-box-1.message-box-success .cancel-btn{
color: #b8d6ab;
}
.message-box-1.message-box-warning{
border: 2px solid #e3dbb6;
background-color: #fcf8e3;
color: #8a6d3b;
}
.message-box-1.message-box-warning a{
color: #8a6d3b;
}
.message-box-1.message-box-warning .box-icon{
color: #e3dbb6;
}
.message-box-1.message-box-warning .cancel-btn{
color: #e3dbb6;
}
.message-box-1 .box-icon{
display: block;
float: left;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
text-align: center;
font-size: 20px;
}
.message-box-1 .box-icon:before{
line-height: 40px;
}
.message-box-1 p{
display: table;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;
}
.message-box-1 .cancel-btn{
position: absolute;
top: 10px;
right: 12px;
display: block;
width: 10px;
height: 10px;
text-align: center;
text-decoration: none !important;
font-size: 16px;
line-height: 10px;
}
.message-box-1 .cancel-btn .icon{
display: block;
width: 10px;
height: 10px;
}
.message-box-1 .cancel-btn .icon:before{
line-height: 10px;
}
/* 22.b.) message-box-2 */
.message-box-2{
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
}
.message-box-2.message-box-info{
border: 1px solid #adcede;
background-color: #d9edf7;
color: #31708f;
}
.message-box-2.message-box-info a{
color: #31708f;
}
.message-box-2.message-box-info .box-icon{
color: #adcede;
}
.message-box-2.message-box-info .cancel-btn{
color: #adcede;
}
.message-box-2.message-box-error{
border: 1px solid #d9b2b2;
background-color: #f2dede;
color: #a94442;
}
.message-box-2.message-box-error a{
color: #a94442;
}
.message-box-2.message-box-error .box-icon{
color: #d9b2b2;
}
.message-box-2.message-box-error .cancel-btn{
color: #d9b2b2;
}
.message-box-2.message-box-success{
border: 1px solid #b8d6ab;
background-color: #dff0d8;
color: #3c763d;
}
.message-box-2.message-box-success a{
color: #3c763d;
}
.message-box-2.message-box-success .box-icon{
color: #b8d6ab;
}
.message-box-2.message-box-success .cancel-btn{
color: #b8d6ab;
}
.message-box-2.message-box-warning{
border: 1px solid #e3dbb6;
background-color: #fcf8e3;
color: #8a6d3b;
}
.message-box-2.message-box-warning a{
color: #8a6d3b;
}
.message-box-2.message-box-warning .box-icon{
color: #e3dbb6;
}
.message-box-2.message-box-warning .cancel-btn{
color: #e3dbb6;
}
.message-box-2 .box-icon{
display: block;
float: left;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
text-align: center;
font-size: 20px;
}
.message-box-2 .box-icon:before{
line-height: 40px;
}
.message-box-2 p{
display: table;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;
}
.message-box-2 .cancel-btn{
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
height: 20px;
text-align: center;
text-decoration: none !important;
font-size: 22px;
line-height: 20px;
}
.message-box-2 .cancel-btn .icon{
display: block;
width: 20px;
height: 20px;
}
.message-box-2 .cancel-btn .icon:before{
line-height: 20px;
}
/* 22.c.) message-box-3 */
.message-box-3{
padding-top: 20px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 20px;
min-height: 100px;
}
.message-box-3.message-box-info{
border: 2px solid #adcede;
background-color: #d9edf7;
color: #31708f;
}
.message-box-3.message-box-info h4{
color: #31708f;
}
.message-box-3.message-box-info a{
color: #31708f;
}
.message-box-3.message-box-info .box-icon{
background-color: #adcede;
color: #fff;
}
.message-box-3.message-box-info .cancel-btn{
border-color: #adcede;
color: #adcede;
}
.message-box-3.message-box-error{
border: 2px solid #d9b2b2;
background-color: #f2dede;
color: #a94442;
}
.message-box-3.message-box-error h4{
color: #a94442;
}
.message-box-3.message-box-error a{
color: #a94442;
}
.message-box-3.message-box-error .box-icon{
background-color: #d9b2b2;
color: #fff;
}
.message-box-3.message-box-error .cancel-btn{
border-color: #d9b2b2;
color: #d9b2b2;
}
.message-box-3.message-box-success{
border: 2px solid #b8d6ab;
background-color: #dff0d8;
color: #3c763d;
}
.message-box-3.message-box-success h4{
color: #3c763d;
}
.message-box-3.message-box-success a{
color: #3c763d;
}
.message-box-3.message-box-success .box-icon{
background-color: #b8d6ab;
color: #fff;
}
.message-box-3.message-box-success .cancel-btn{
border-color: #b8d6ab;
color: #b8d6ab;
}
.message-box-3.message-box-warning{
border: 2px solid #e3dbb6;
background-color: #fcf8e3;
color: #8a6d3b;
}
.message-box-3.message-box-warning h4{
color: #8a6d3b;
}
.message-box-3.message-box-warning a{
color: #8a6d3b;
}
.message-box-3.message-box-warning .box-icon{
background-color: #e3dbb6;
color: #fff;
}
.message-box-3.message-box-warning .cancel-btn{
border-color: #e3dbb6;
color: #e3dbb6;
}
.message-box-3 .box-icon{
display: block;
float: left;
margin-right: 20px;
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
font-size: 24px;
}
.message-box-3 .box-icon:before{
line-height: 60px;
}
.message-box-3 .message-box-content{
display: table;
}
.message-box-3 .cancel-btn{
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
height: 20px;
border: 1px solid;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
text-decoration: none !important;
font-size: 16px;
line-height: 20px;
}
.message-box-3 .cancel-btn .icon{
display: block;
width: 18px;
height: 18px;
}
.message-box-3 .cancel-btn .icon:before{
line-height: 18px;
}
/* 22.d.) message-box-4 */
.message-box-4{
padding-top: 20px;
padding-right: 50px;
padding-bottom: 10px;
padding-left: 20px;
min-height: 130px;
-webkit-border-radius: 65px;
-moz-border-radius: 65px;
border-radius: 65px;
}
.message-box-4.message-box-info{
border: 1px solid #adcede;
background-color: #d9edf7;
color: #31708f;
}
.message-box-4.message-box-info h4{
color: #31708f;
}
.message-box-4.message-box-info a{
color: #adcede;
}
.message-box-4.message-box-info .box-icon{
background-color: #adcede;
color: #fff;
}
.message-box-4.message-box-info .cancel-btn{
border-color: #adcede;
}
.message-box-4.message-box-error{
border: 1px solid #d9b2b2;
background-color: #f2dede;
color: #a94442;
}
.message-box-4.message-box-error h4{
color: #a94442;
}
.message-box-4.message-box-error a{
color: #d9b2b2;
}
.message-box-4.message-box-error .box-icon{
background-color: #d9b2b2;
color: #fff;
}
.message-box-4.message-box-error .cancel-btn{
border-color: #d9b2b2;
}
.message-box-4.message-box-success{
border: 1px solid #b8d6ab;
background-color: #dff0d8;
color: #3c763d;
}
.message-box-4.message-box-success h4{
color: #3c763d;
}
.message-box-4.message-box-success a{
color: #b8d6ab;
}
.message-box-4.message-box-success .box-icon{
background-color: #b8d6ab;
color: #fff;
}
.message-box-4.message-box-success .cancel-btn{
border-color: #b8d6ab;
}
.message-box-4.message-box-warning{
border: 1px solid #e3dbb6;
background-color: #fcf8e3;
color: #8a6d3b;
}
.message-box-4.message-box-warning h4{
color: #8a6d3b;
}
.message-box-4.message-box-warning a{
color: #e3dbb6;
}
.message-box-4.message-box-warning .box-icon{
background-color: #e3dbb6;
color: #fff;
}
.message-box-4.message-box-warning .cancel-btn{
border-color: #e3dbb6;
}
.message-box-4 .box-icon{
display: block;
float: left;
margin-top: 15px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 0;
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
font-size: 24px;
}
.message-box-4 .box-icon:before{
line-height: 60px;
}
.message-box-4 .message-box-content{
display: table;
}
.message-box-4 .cancel-btn{
position: absolute;
top: 20px;
right: 30px;
display: block;
width: 20px;
height: 20px;
text-align: center;
text-decoration: none !important;
font-size: 22px;
line-height: 20px;
}
.message-box-4 .cancel-btn .icon{
display: block;
width: 20px;
height: 20px;
}
.message-box-4 .cancel-btn .icon:before{
line-height: 20px;
}
/* 22.e.) message-box-5 */
.message-box-5{
padding-top: 20px;
padding-right: 50px;
padding-bottom: 10px;
padding-left: 20px;
min-height: 130px;
-webkit-border-radius: 65px;
-moz-border-radius: 65px;
border-radius: 65px;
}
.message-box-5.message-box-info{
border: 1px solid #adcede;
background-color: #fff;
color: #31708f;
}
.message-box-5.message-box-info h4{
color: #31708f;
}
.message-box-5.message-box-info a{
color: #adcede;
}
.message-box-5.message-box-info .box-icon{
background-color: #adcede;
color: #fff;
}
.message-box-5.message-box-info .cancel-btn{
border-color: #adcede;
}
.message-box-5.message-box-error{
border: 1px solid #d9b2b2;
background-color: #fff;
color: #a94442;
}
.message-box-5.message-box-error h4{
color: #a94442;
}
.message-box-5.message-box-error a{
color: #d9b2b2;
}
.message-box-5.message-box-error .box-icon{
background-color: #d9b2b2;
color: #fff;
}
.message-box-5.message-box-error .cancel-btn{
border-color: #d9b2b2;
}
.message-box-5.message-box-success{
border: 1px solid #b8d6ab;
background-color: #fff;
color: #3c763d;
}
.message-box-5.message-box-success h4{
color: #3c763d;
}
.message-box-5.message-box-success a{
color: #b8d6ab;
}
.message-box-5.message-box-success .box-icon{
background-color: #b8d6ab;
color: #fff;
}
.message-box-5.message-box-success .cancel-btn{
border-color: #b8d6ab;
}
.message-box-5.message-box-warning{
border: 1px solid #e3dbb6;
background-color: #fff;
color: #8a6d3b;
}
.message-box-5.message-box-warning h4{
color: #8a6d3b;
}
.message-box-5.message-box-warning a{
color: #e3dbb6;
}
.message-box-5.message-box-warning .box-icon{
background-color: #e3dbb6;
color: #fff;
}
.message-box-5.message-box-warning .cancel-btn{
border-color: #e3dbb6;
}
.message-box-5 .box-icon{
display: block;
float: left;
margin-top: 15px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 0;
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
font-size: 24px;
}
.message-box-5 .box-icon:before{
line-height: 60px;
}
.message-box-5 .message-box-content{
display: table;
}
.message-box-5 .cancel-btn{
position: absolute;
top: 20px;
right: 30px;
display: block;
width: 20px;
height: 20px;
text-align: center;
text-decoration: none !important;
font-size: 22px;
line-height: 20px;
}
.message-box-5 .cancel-btn .icon{
display: block;
width: 20px;
height: 20px;
}
.message-box-5 .cancel-btn .icon:before{
line-height: 20px;
}
/* 22.f.) message-box-6 */
.message-box-6{
}
.message-box-6.message-box-info{
border: 1px solid #adcede;
background-color: #d9edf7;
color: #31708f;
}
.message-box-6.message-box-info h4{
color: #31708f;
}
.message-box-6.message-box-info a{
color: #adcede;
}
.message-box-6.message-box-info .box-icon{
background-color: #adcede;
color: #fff;
}
.message-box-6.message-box-info .cancel-btn{
border-color: #adcede;
}
.message-box-6.message-box-info .message-box-content{
border-color: #adcede;
}
.message-box-6.message-box-error{
border: 1px solid #d9b2b2;
background-color: #f2dede;
color: #a94442;
}
.message-box-6.message-box-error h4{
color: #a94442;
}
.message-box-6.message-box-error a{
color: #d9b2b2;
}
.message-box-6.message-box-error .box-icon{
background-color: #d9b2b2;
color: #fff;
}
.message-box-6.message-box-error .cancel-btn{
border-color: #d9b2b2;
}
.message-box-6.message-box-error .message-box-content{
border-color: #d9b2b2;
}
.message-box-6.message-box-success{
border: 1px solid #b8d6ab;
background-color: #dff0d8;
color: #3c763d;
}
.message-box-6.message-box-success h4{
color: #3c763d;
}
.message-box-6.message-box-success a{
color: #b8d6ab;
}
.message-box-6.message-box-success .box-icon{
background-color: #b8d6ab;
color: #fff;
}
.message-box-6.message-box-success .cancel-btn{
border-color: #b8d6ab;
}
.message-box-6.message-box-success .message-box-content{
border-color: #b8d6ab;
}
.message-box-6.message-box-warning{
border: 1px solid #e3dbb6;
background-color: #fcf8e3;
color: #8a6d3b;
}
.message-box-6.message-box-warning h4{
color: #8a6d3b;
}
.message-box-6.message-box-warning a{
color: #e3dbb6;
}
.message-box-6.message-box-warning .box-icon{
background-color: #e3dbb6;
color: #fff;
}
.message-box-6.message-box-warning .cancel-btn{
border-color: #e3dbb6;
}
.message-box-6.message-box-warning .message-box-content{
border-color: #e3dbb6;
}
.message-box-6 .box-icon{
display: block;
float: left;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
font-size: 24px;
}
.message-box-6 .box-icon:before{
line-height: 60px;
}
.message-box-6 .message-box-content{
display: table;
padding-top: 20px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 20px;
border-left-width: 1px;
border-left-style: solid;
}
.message-box-6 .cancel-btn{
position: absolute;
top: 10px;
right: 10px;
display: block;
width: 20px;
height: 20px;
border: 1px solid;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
text-decoration: none !important;
font-size: 16px;
line-height: 20px;
}
.message-box-6 .cancel-btn .icon{
display: block;
width: 18px;
height: 18px;
}
.message-box-6 .cancel-btn .icon:before{
line-height: 18px;
}
/*------------------------------------------------------------------
23. Grid Element
-------------------------------------------------------------------*/
.grid-element{
margin-bottom: 20px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ebebeb;
}
@media (min-width: 992px){
.grid-element{
border: none;
}
}
.grid-element .grid-element-col{
float: left;
width: 100%;
}
.grid-element .grid-element-item{
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
border: 1px solid;
border-color: #ebebeb;
border-top: 0;
}
.grid-element .grid-element-item > a,
.grid-element .grid-element-item > span,
.grid-element .grid-element-item > table,
.grid-element .grid-element-item > p,
.grid-element .grid-element-item > div{
margin-bottom: 0 !important;
}
@media (min-width: 992px){
.grid-element .grid-element-item{
border-left: 0;
}
}
@media (min-width: 992px){
.grid-element .grid-element-row:last-child .grid-element-item{
border-bottom-color: transparent;
}
.grid-element .grid-element-row .last-in-row .grid-element-item{
border-right-color: transparent;
}
}
@media (min-width: 992px){
.grid-element-2 .grid-element-col{
width: 50%;
}
.grid-element-3 .grid-element-col{
width: 33.3%;
}
.grid-element-4 .grid-element-col{
width: 25%;
}
.grid-element-5 .grid-element-col{
width: 20%;
}
.grid-element-6 .grid-element-col{
width: 16.6%;
}
}
.grid-element .grid-element-item.grid-element-item-custom-1{
padding-top: 30px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
}
/*------------------------------------------------------------------
24. Logo Element
-------------------------------------------------------------------*/
.logo-element{
margin-bottom: 20px;
}
.logo-element svg {
display: block;
width: 0;
height: 0;
}
.logo-element .logo-element-col{
float: left;
width: 100%;
}
@media (min-width: 992px){
.logo-element-cols-1 .logo-element-col{
width: 100%;
}
.logo-element-cols-2 .logo-element-col{
width: 50%;
}
.logo-element-cols-3 .logo-element-col{
width: 33.3%;
}
.logo-element-cols-4 .logo-element-col{
width: 25%;
}
.logo-element-cols-5 .logo-element-col{
width: 20%;
}
.logo-element-cols-6 .logo-element-col{
width: 16.6%;
}
}
/* 24.a.) logo-element-1 */
.logo-element-1 .grid-element-item{
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.logo-element-1 .logo-element-item-link{
position: relative;
display: block;
}
.logo-element-1 .logo-element-item-link .logo-element-imgWrap{
display: block;
background-color: #fff;
}
.logo-element-1 .logo-element-item-link .logo-element-hover{
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
}
.logo-element-1 .logo-element-item-link:hover .logo-element-hover{
-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
opacity: 1;
}
.logo-element-1 .logo-element-item-link .logo-element-img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.logo-element-1.logo-element-grayscale .logo-element-imgWrap .logo-element-img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
/* 24.b.) logo-element-2 */
.logo-element-2 .grid-element-item{
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.logo-element-2 .logo-element-item-link{
position: relative;
display: block;
text-decoration: none !important;
}
.logo-element-2 .logo-element-item-link .logo-element-imgWrap{
display: block;
background-color: #fff;
}
.logo-element-2 .logo-element-item-link .logo-element-hover{
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
}
.logo-element-2 .logo-element-item-link:hover .logo-element-hover{
-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
opacity: 1;
}
.logo-element-2 .logo-element-item-link .logo-element-hover{
text-align: center;
line-height: 20px;
}
.logo-element-2 .logo-element-item-link .logo-element-hover .logo-element-item-title{
display: block;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
color: #363636;
text-decoration: underline;
text-transform: uppercase;
font-weight: 700;
}
.logo-element-2 .logo-element-item-link .logo-element-hover .logo-element-item-description{
display: block;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
color: #959595;
font-weight: 400;
}
.logo-element-2 .logo-element-item-link .logo-element-img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.logo-element-2.logo-element-grayscale .logo-element-imgWrap .logo-element-img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
/* 24.c.) logo-element-3 */
.logo-element-3 .logo-element-item{
border: 1px solid;
border-color: #ebebeb !important;
}
@media (min-width: 992px){
.logo-element-3 .logo-element-item{
border-top: none;
border-bottom: none;
border-left: none;
}
.logo-element-3 .logo-element-col:first-child .logo-element-item{
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
}
}
.logo-element-3 .logo-element-item-link{
position: relative;
display: block;
text-decoration: none !important;
}
.logo-element-3 .logo-element-item-link .logo-element-imgWrap{
display: block;
background-color: #fff;
}
.logo-element-3 .logo-element-item-link .logo-element-hover{
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
}
.logo-element-3 .logo-element-item-link:hover .logo-element-hover{
-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
opacity: 1;
}
.logo-element-3 .logo-element-item-link .logo-element-img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.logo-element-3.logo-element-grayscale .logo-element-imgWrap .logo-element-img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
/* 24.d.) logo-element-4 */
.logo-element-4 .logo-element-item{
border: 1px solid;
border-color: #ebebeb !important;
}
@media (min-width: 992px){
.logo-element-4 .logo-element-item{
border-top: none;
border-bottom: none;
border-left: none;
}
.logo-element-4 .logo-element-col:first-child .logo-element-item{
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
}
}
.logo-element-4 .logo-element-item-link{
position: relative;
display: block;
text-decoration: none !important;
}
.logo-element-4 .logo-element-item-link .logo-element-imgWrap{
display: block;
background-color: #fff;
}
.logo-element-4 .logo-element-item-link .logo-element-hover{
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
}
.logo-element-4 .logo-element-item-link:hover .logo-element-hover{
-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
opacity: 1;
}
.logo-element-4 .logo-element-item-link .logo-element-hover{
text-align: center;
line-height: 20px;
}
.logo-element-4 .logo-element-item-link .logo-element-hover .logo-element-item-title{
display: block;
margin-top: 15px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
color: #363636;
text-decoration: underline;
text-transform: uppercase;
font-weight: 700;
}
.logo-element-4 .logo-element-item-link .logo-element-hover .logo-element-item-description{
display: block;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
color: #959595;
font-weight: 400;
}
.logo-element-4 .logo-element-item-link .logo-element-img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.logo-element-4.logo-element-grayscale .logo-element-imgWrap .logo-element-img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
/* 24.e.) logo-element-5 */
.logo-element-5{
margin-bottom: 0;
}
.logo-element-5 .logo-element-item{
display: block;
margin-bottom: 20px;
/*border: 1px solid;
border-color: #ebebeb;
background-color: #fff;*/
text-align:center;
}
.logo-element-5 .logo-element-item:hover{
/*-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);*/
}
.logo-element-5 .logo-element-item .logo-element-img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.logo-element-5.logo-element-grayscale .logo-element-img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
.logo-element-5.logo-element-grayscale .logo-element-item:hover .logo-element-img{
-webkit-filter: grayscale(0);
-webkit-filter: grayscale(0);
filter: grayscale(0);
filter: none;
}
/* 24.d.) logo-element-6 */
.logo-element-6 .logo-element-item{
border: 1px solid;
border-color: #ebebeb !important;
}
@media (min-width: 992px){
.logo-element-6 .logo-element-item{
border-left: none;
}
.logo-element-6 .logo-element-col:first-child .logo-element-item{
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
}
}
.logo-element-6 .logo-element-item-link{
position: relative;
display: block;
text-decoration: none !important;
}
.logo-element-6 .logo-element-item-link .logo-element-imgWrap{
display: block;
background-color: #fff;
}
.logo-element-6 .logo-element-item-link .logo-element-hover{
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
}
.logo-element-6 .logo-element-item-link:hover .logo-element-hover{
-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
opacity: 1;
}
.logo-element-6 .logo-element-item-link .logo-element-hover{
text-align: center;
line-height: 20px;
}
.logo-element-6 .logo-element-item-link .logo-element-hover .logo-element-item-title{
display: block;
margin-top: 15px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
color: #363636;
text-decoration: underline;
text-transform: uppercase;
font-weight: 700;
}
.logo-element-6 .logo-element-item-link .logo-element-hover .logo-element-item-description{
display: block;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
color: #959595;
font-weight: 400;
}
.logo-element-6 .logo-element-item-link .logo-element-img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.logo-element-6.logo-element-grayscale .logo-element-imgWrap .logo-element-img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
/*------------------------------------------------------------------
25. Loop Elements
-------------------------------------------------------------------*/
.owl-carousel .item {
display: block;
width: 100%;
}
.loop-element{
margin-bottom: 20px;
}
/* added */
.loop-element-pagination{
position: relative;
z-index: 1;
}
.loop-element-pagination .loop-element-dots{
padding-top: 25px;
padding-right: 0;
padding-bottom: 25px;
padding-left: 0;
line-height: 20px;
}
.loop-element-pagination .loop-element-dots .owl-dot{
display: inline-block;
width: 10px;
height: 10px;
background-color: #959595;
cursor: pointer;
}
.loop-element-pagination .loop-element-dots .owl-dot.active{
background-color: #363636;
}
.loop-element-pagination-left{
float: left;
}
.loop-element-pagination-left .loop-element-dots .owl-dot{
margin-right: 5px;
}
.loop-element-pagination-right{
float: right;
}
.loop-element-pagination-right .loop-element-dots .owl-dot{
margin-left: 5px;
}
.loop-element-pagination-center{
float: none;
text-align: center;
}
.loop-element-pagination-center .loop-element-dots .owl-dot{
margin-right: 2px;
margin-left: 3px;
}
.loop-element-nav-btn .loop-element-nav > div{
display: inline-block;
width: 36px;
height: 36px;
background-color: #959595;
color: #fff;
text-align: center;
font-size: 20px;
cursor: pointer;
}
.loop-element-nav-btn .loop-element-nav > div .icon:before{
line-height: 36px;
}
.loop-element-nav-btn .loop-element-nav > div:hover{
background-color: #363636;
color: #ebebeb;
}
.loop-element-nav-btn .loop-element-nav{
padding-top: 16px;
padding-right: 0;
padding-bottom: 16px;
padding-left: 0;
}
.loop-element-nav-btn-left{
float: left;
}
.loop-element-nav-btn-left .loop-element-nav > div{
margin-right: 10px;
}
.loop-element-nav-btn-right{
float: right;
}
.loop-element-nav-btn-right .loop-element-nav > div{
margin-left: 10px;
}
.loop-element-nav-btn-center{
float: none;
text-align: center;
}
.loop-element-nav-btn-center .loop-element-nav > div{
margin-top: 0;
margin-right: 5px;
margin-bottom: 0;
margin-left: 5px;
}
.loop-element .loop-element-carouselWrap{
position: relative;
}
.loop-element-carouselWrap .arrow-nav{
position: absolute;
top: 50%;
display: block;
margin-top: -25px;
width: 50px;
height: 50px;
background-color: #959595;
color: #fff;
text-align: center;
text-decoration: none !important;
font-size: 28px;
cursor: pointer;
}
.loop-element-carouselWrap .arrow-nav .icon:before{
line-height: 50px;
}
.loop-element-carouselWrap .arrow-nav:hover{
background-color: #363636;
color: #ebebeb;
}
.loop-element-carouselWrap .arrow-prev-nav{
left: -70px;
}
.loop-element-carouselWrap .arrow-next-nav{
right: -70px;
}
/* 25.a.) loop-logo-element-1 */
.loop-logo-element-1 .item{
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
}
.loop-logo-element-1 .logo-element-item{
display: block;
border: 1px solid;
border-color: #ebebeb;
background-color: #fff;
}
.loop-logo-element-1 .logo-element-item .logo-element-img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.loop-logo-element-1.logo-element-grayscale .logo-element-img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
.loop-logo-element-1.logo-element-grayscale .logo-element-item:hover .logo-element-img{
-webkit-filter: grayscale(0);
-webkit-filter: grayscale(0);
filter: grayscale(0);
filter: none;
}
.loop-logo-element-1 svg {
display: block;
width: 0;
height: 0;
}
/* 25.b.) loop-logo-element-2 */
.loop-logo-element-2{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ebebeb;
}
.loop-logo-element-2 .logo-element-item{
border: 1px solid;
border-color: #ebebeb !important;
}
.loop-logo-element-2 .logo-element-item{
border-top: none;
border-right: none;
border-bottom: none;
}
.loop-logo-element-2 .logo-element-item-link{
position: relative;
display: block;
text-decoration: none !important;
}
.loop-logo-element-2 .logo-element-item-link .logo-element-imgWrap{
display: block;
background-color: #fff;
}
.loop-logo-element-2 .logo-element-item-link .logo-element-hover{
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
}
.loop-logo-element-2 .logo-element-item-link:hover .logo-element-hover{
opacity: 1;
}
.loop-logo-element-2 .logo-element-item-link .logo-element-img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.loop-logo-element-2.logo-element-grayscale .logo-element-imgWrap .logo-element-img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
.loop-logo-element-2 svg {
display: block;
width: 0;
height: 0;
}
/* 25.c.) loop-logo-element-3 */
.loop-logo-element-3{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ebebeb !important;
}
.loop-logo-element-3 .logo-element-item{
border: 1px solid;
border-color: #ebebeb !important;
}
.loop-logo-element-3 .logo-element-item{
border-top: none;
border-right: none;
border-bottom: none;
}
.loop-logo-element-3 .logo-element-item-link{
position: relative;
display: block;
text-decoration: none !important;
}
.loop-logo-element-3 .logo-element-item-link .logo-element-imgWrap{
display: block;
background-color: #fff;
}
.loop-logo-element-3 .logo-element-item-link .logo-element-hover{
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
}
.loop-logo-element-3 .logo-element-item-link:hover .logo-element-hover{
opacity: 1;
}
.loop-logo-element-3 .logo-element-item-link .logo-element-hover{
text-align: center;
line-height: 20px;
}
.loop-logo-element-3 .logo-element-item-link .logo-element-hover .logo-element-item-title{
display: block;
margin-top: 15px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
color: #363636;
text-decoration: underline;
text-transform: uppercase;
font-weight: 700;
}
.loop-logo-element-3 .logo-element-item-link .logo-element-hover .logo-element-item-description{
display: block;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
color: #959595;
font-weight: 400;
}
.loop-logo-element-3 .logo-element-item-link .logo-element-img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.loop-logo-element-3.logo-element-grayscale .logo-element-imgWrap .logo-element-img{
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(#greyscale);
filter: gray;
}
.loop-logo-element-3 svg {
display: block;
width: 0;
height: 0;
}
/*------------------------------------------------------------------
26. Counter
-------------------------------------------------------------------*/
.counter-element{
margin-bottom: 20px;
width: 100%;
}
/* 26.a.) counter-element-1 */
.counter-element-1{
padding-top: 50px;
padding-right: 25px;
padding-bottom: 50px;
padding-left: 25px;
border: 1px solid;
border-color: #ebebeb;
background-color: #fff;
}
.counter-element-1 .counter-element-title .sep-element{
position: relative;
display: table-cell;
width: 50%;
height: 1px;
vertical-align: middle;
}
.counter-element-1 .counter-element-title .sep-line{
position: relative;
top: 1px;
display: block;
width: 100%;
height: 1px;
border-color: #363636;
border-top-width: 1px;
border-top-style: solid;
}
.counter-element-1 .counter-element-title{
margin-top: 15px;
}
.counter-element-1 .counter-element-title h4{
display: table-cell;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
color: #363636;
text-transform: uppercase;
white-space: pre;
font-weight: 700;
font-size: 14px;
}
.counter-element-1 .icon-counterWrap{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.counter-element-1 .icon-counterWrap .icon{
display: block;
float: left;
margin-right: 10px;
height: 80px;
color: #106dd4;
text-align: center;
font-size: 72px;
line-height: 80px;
}
.counter-element-1 .icon-counterWrap .icon:before{
line-height: 80px;
}
.counter-element-1 .icon-counterWrap .counterWrap{
display: block;
float: left;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
border: 1px solid;
border-color: #106dd4;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
border-radius: 80px;
}
.counter-element-1 .icon-counterWrap .counterWrap .counter{
display: block;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
min-width: 70px;
width: auto;
height: 70px;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: #106dd4;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 44px;
line-height: 70px;
}
/* 26.b.) counter-element-2 */
.counter-element-2{
padding-top: 40px;
padding-right: 10px;
padding-bottom: 40px;
padding-left: 10px;
border: 1px solid;
border-color: #ebebeb;
background-color: #fff;
}
.counter-element-2 .counter-elementWrap{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.counter-element-2 .icon{
float: left;
width: auto;
height: 60px;
color: #363636;
font-size: 60px;
line-height: 60px;
}
.counter-element-2 .icon:before{
line-height: 60px;
}
.counter-element-2 .title-counterWrap{
float: left;
margin-left: 10px;
padding-left: 10px;
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
}
.counter-element-2 .title-counterWrap .counter{
color: #363636;
font-weight: 700;
font-size: 36px;
line-height: 40px;
}
.counter-element-2 .title-counterWrap h4{
margin-bottom: 0;
color: #363636;
font-weight: 400;
font-size: 14px;
}
/* 26.c.) counter-element-3 */
.counter-element-3{
background-color: #363636;
color: #fff;
text-align: center;
}
.counter-element-3:hover{
background-color: #959595;
}
.counter-element-3 .icon{
color: #fff;
}
.counter-element-3 h4{
margin-bottom: 20px;
color: #fff;
font-weight: 400;
font-size: 14px;
}
.counter-element-3 .counter{
display: inline-block;
margin-top: 20px;
font-weight: 700;
font-size: 44px;
line-height: 50px;
}
.counter-element-3 .icon{
display: block;
width: 100%;
height: 100px;
background-color: rgba(0,0,0,0.1);
font-size: 60px;
line-height: 100px;
}
.counter-element-3 .icon:before{
line-height: 100px;
}
/* 26.d.) counter-element-3 */
.counter-element-4{
padding-top: 60px;
padding-right: 10px;
padding-bottom: 60px;
padding-left: 10px;
background-color: #363636;
color: #fff;
text-align: center;
}
.counter-element-4:hover{
background-color: #959595;
}
.counter-element-4 h4{
margin-top: 20px;
margin-bottom: 5px;
color: #fff;
font-weight: 700;
font-size: 24px;
}
.counter-element-4 .counter{
display: inline-block;
font-weight: 700;
font-size: 48px;
line-height: 50px;
}
.counter-element-4 .counter-element-description{
text-transform: uppercase;
letter-spacing: 1px;
}
.counter-element-4 .counter-element-sep-element{
display: table;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 100px;
height: 3px;
background-color: #fff;
}
/*------------------------------------------------------------------
27. Percentage Counter
-------------------------------------------------------------------*/
.percentage-counter-element{
margin-bottom: 20px;
text-align: center;
}
.percentage-counter-element .chart{
position: relative;
display: inline-block;
}
.percentage-counter-element canvas {
position: absolute;
top: 0;
left: 0;
}
.percentage-counter-element .percent{
position: relative;
z-index: 2;
display: inline-block;
}
.percentage-counter-element h4{
margin-top: 20px;
margin-bottom: 0;
}
.percentage-counter-element p{
margin-top: 10px;
}
/* 27.a.) percentage-counter-element-1 */
.percentage-counter-element-1 .chart{
width: 160px;
height: 160px;
}
.percentage-counter-element-1 .percent{
color: #363636;
font-weight: 700;
font-size: 44px;
line-height: 160px;
}
.percentage-counter-element-1 h4{
color: #363636;
}
/* 27.b.) percentage-counter-element-2 */
.percentage-counter-element-2 .chart{
width: 160px;
height: 160px;
}
.percentage-counter-element-2 .percent{
color: #363636;
font-weight: 700;
font-size: 36px;
line-height: 160px;
}
.percentage-counter-element-2 h4{
color: #363636;
}
/*------------------------------------------------------------------
28. Google Map
-------------------------------------------------------------------*/
.google-map-element{
position: relative;
margin-bottom: 20px;
}
.google-map-element .google-map-element-caption{
position: absolute;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
width: 280px;
background-color: #fff;
-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.05);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.05);
}
/* 28.a.) google-map-element-1 */
.google-map-element-1 .map-1{
position: relative;
display: block;
height: 500px;
}
/* 28.b.) google-map-element-2 */
.google-map-element-2 .map-2{
position: relative;
display: block;
height: 500px;
}
.google-map-element-2 .google-map-element-caption{
right: 30px;
bottom: 30px;
}
/* 28.c.) google-map-element-3 */
.google-map-element-3 .map-3{
position: relative;
display: block;
height: 300px;
}
/*------------------------------------------------------------------
29. Callout Container
-------------------------------------------------------------------*/
.callout-container-element{
margin-bottom: 20px;
}
/* 29.a.) callout-container-element-1 */
.callout-container-element-1{
position: relative;
height: 600px;
background-attachment: scroll;
background-position: 50% 49%;
background-size: cover;
background-repeat: no-repeat;
}
.callout-container-element-1 .callout-container-element-title{
position: absolute;
top: 0;
left: 0;
padding-top: 15px;
padding-right: 30px;
padding-bottom: 15px;
padding-left: 30px;
width: 100%;
background-color: rgba(0,0,0,0.3);
color: #fff;
text-align: center;
font-size: 30px;
line-height: 40px;
}
@media (min-width: 992px){
.callout-container-element-1 .callout-container-element-title{
width: auto;
text-align: right;
}
}
.callout-container-element-1 .callout-container-element-caption{
position: absolute;
right: 0;
bottom: 0;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
width: 100%;
background-color: rgba(0,0,0,0.3);
color: #fff;
}
@media (min-width: 992px){
.callout-container-element-1 .callout-container-element-caption{
width: 35%;
}
}
.callout-container-element-1 .callout-container-element-caption h4{
color: #fff;
font-size: 36px;
line-height: 40px;
}
/* 29.b.) callout-container-element-2 */
.callout-container-element-2{
position: relative;
height: 600px;
background-attachment: scroll;
background-position: 50% 49%;
background-size: cover;
background-repeat: no-repeat;
}
.callout-container-element-2 .callout-container-element-title{
position: absolute;
top: 0;
left: 0;
padding-top: 15px;
padding-right: 30px;
padding-bottom: 15px;
padding-left: 30px;
width: 100%;
background-color: rgba(0,0,0,0.3);
color: #fff;
text-align: center;
font-size: 30px;
line-height: 40px;
}
@media (min-width: 992px){
.callout-container-element-2 .callout-container-element-title{
width: 28%;
text-align: right;
}
}
.callout-container-element-2 .callout-container-element-caption{
position: absolute;
right: 0;
bottom: 0;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
width: 100%;
background-color: rgba(0,0,0,0.3);
color: #fff;
}
@media (min-width: 992px){
.callout-container-element-2 .callout-container-element-caption{
width: 35%;
}
}
.callout-container-element-2 .callout-container-element-caption h4{
color: #fff;
font-size: 36px;
line-height: 40px;
}
/* 29.c.) callout-container-element-3 */
.callout-container-element-3.row-custom-styles-1{
margin-right: 0;
margin-left: 0;
padding-top: 130px;
padding-right: 30px;
padding-bottom: 130px;
padding-left: 30px;
}
@media (min-width: 992px){
.callout-container-element-3.row-custom-styles-1{
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 100px;
}
}
.callout-container-element-3.row-custom-styles-2{
padding-top: 130px;
padding-bottom: 130px;
}
@media (min-width: 992px){
.callout-container-element-3.row-custom-styles-2{
margin-right: 0;
margin-left: 0;
}
}
.callout-container-element-3 .row-col-custom-styles-1{
padding-right: 0;
padding-left: 0;
}
.callout-container-element-3 .row-col-custom-styles-2{
}
@media (min-width: 992px){
.callout-container-element-3 .row-col-custom-styles-2{
padding-right: 30px;
padding-left: 0;
}
}
.callout-container-element-3 .callout-container-elementWrap{
background-color: #fff;
-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.05);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.05);
}
.callout-container-element-3 .callout-container-elementWrap .btn{
margin-bottom: 0;
}
.callout-container-element-3 .callout-container-elementWrap .callout-container-element-image{
float: none;
width: 100%;
}
@media (min-width: 992px){
.callout-container-element-3 .callout-container-elementWrap .callout-container-element-image{
float: left;
}
}
.callout-container-element-3 .callout-container-elementWrap .callout-container-element-image img{
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.callout-container-element-3 .callout-container-elementWrap .callout-container-element-content{
float: none;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
width: 100%;
}
@media (min-width: 992px){
.callout-container-element-3 .callout-container-elementWrap .callout-container-element-content{
float: left;
}
}
@media (min-width: 992px){
.callout-container-element-3 .callout-container-elementWrap.callout-container-element-40-60 .callout-container-element-image{
width: 40%;
}
}
@media (min-width: 992px){
.callout-container-element-3 .callout-container-elementWrap.callout-container-element-40-60 .callout-container-element-content{
width: 60%;
}
}
/*------------------------------------------------------------------
30. Price Table
-------------------------------------------------------------------*/
.price-table-element{
margin-bottom: 20px;
background-color: #fff;
}
/* 30.a.) price-table-element-1 */
.price-table-element-1{
border: 3px solid;
border-color: #ebebeb;
text-align: center;
}
.price-table-element-1.price-table-element-active{
border-color: #959595;
}
.price-table-element-1 h4{
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
color: #363636;
}
.price-table-element-1.price-table-element-active h4{
color: #959595;
}
.price-table-element-1 .price-table-element-price{
display: inline-block;
margin-bottom: 30px;
padding-top: 35px;
padding-right: 0;
padding-bottom: 35px;
padding-left: 0;
width: 140px;
height: 140px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
}
.price-table-element-1.price-table-element-active .price-table-element-price{
background-color: #959595;
}
.price-table-element-1 .price-table-element-unit{
display: block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
font-size: 12px;
line-height: 20px;
}
.price-table-element-1 .price-table-element-amount{
display: block;
text-transform: uppercase;
font-weight: 700;
font-size: 48px;
line-height: 50px;
}
.price-table-element-1 .price-table-element-list-btn{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-top: 1px dashed;
border-top-color: #ebebeb;
background-color: #fafafa;
}
.price-table-element-1 .price-table-element-list-btn ul{
margin-top: 0;
margin-right: 0;
margin-bottom: 20px;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.price-table-element-1 .price-table-element-list-btn ul li{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ebebeb;
list-style: none;
line-height: 20px;
}
.price-table-element-1 .price-table-element-list-btn .btn{
margin-right: 0;
}
/* 30.b.) price-table-element-2 */
.price-table-element-2 .price-table-elementWrap{
text-align: center;
}
.price-table-element-2.price-table-element-active .price-table-elementWrap{
margin-top: -5px;
margin-right: -5px;
margin-bottom: -5px;
margin-left: -5px;
border: 5px solid;
border-color: #363636;
}
.price-table-element-2 h4{
display: inline-block;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
color: #363636;
}
.price-table-element-2 .price-table-element-price{
display: block;
margin-bottom: 15px;
padding-top: 15px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
color: #363636;
line-height: 20px;
}
.price-table-element-2.price-table-element-active .price-table-element-price{
background-color: #363636;
color: #fff;
}
.price-table-element-2 .price-table-element-unit{
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
font-size: 12px;
line-height: 20px;
}
.price-table-element-2 .price-table-element-amount{
font-weight: 700;
font-size: 30px;
line-height: 30px;
}
.price-table-element-2 .price-table-element-icon{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
width: 90px;
height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
font-size: 50px;
}
.price-table-element-2.price-table-element-active .price-table-element-icon{
background-color: #363636;
}
.price-table-element-2 .price-table-element-icon:before{
line-height: 90px;
}
.price-table-element-2 ul{
margin-top: 0;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.price-table-element-2 ul li{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ebebeb;
list-style: none;
line-height: 20px;
}
.price-table-element-2 .price-table-element-btn{
padding-top: 15px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
background-color: #fafafa;
}
.price-table-element-2 .price-table-element-btn .btn{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
/*------------------------------------------------------------------
31. Call To Action
-------------------------------------------------------------------*/
.call-to-action-element{
margin-bottom: 20px;
}
/* 31.a.) call-to-action-element-1 */
.call-to-action-element-1{
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
min-height: 130px;
border: 1px solid;
border-color: #ebebeb;
}
.call-to-action-element-1 .ctae-icon{
float: left;
padding-top: 0;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;
}
.call-to-action-element-1 .ctae-icon i{
position: relative;
display: block;
width: 80px;
height: 80px;
background-color: #585858;
color: #fff;
text-align: center;
font-size: 50px;
line-height: 80px;
}
.call-to-action-element-1 .ctae-icon i:before{
line-height: 80px;
}
.call-to-action-element-1 .ctae-icon i:after{
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 20px;
border-right-color: #585858;
border-bottom-width: 20px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
.call-to-action-element-1 .ctae-content{
margin-right: 33.3%;
margin-left: 140px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 30px;
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
}
.min-width-1480 .call-to-action-element-1 .ctae-content{
margin-right: 25%;
}
.call-to-action-element-1 .btn{
position: absolute;
top: 40px;
right: 40px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.call-to-action-element-1 .ctae-content .title{
display: block;
color: #363636;
font-weight: 700;
font-size: 24px;
}
.call-to-action-element-1 .ctae-content .sub-title{
display: block;
text-transform: uppercase;
font-weight: 400;
font-size: 24px;
}
@media only screen and (max-width: 991px) {
.call-to-action-element-1{
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.call-to-action-element-1 .ctae-icon-wrap{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.call-to-action-element-1 .ctae-icon{
float: none;
padding-top: 20px;
padding-right: 0;
padding-bottom: 40px;
padding-left: 0;
}
.call-to-action-element-1 .ctae-content{
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
border-color: #ebebeb;
border-top-width: 1px;
border-top-style: solid;
border-left: none;
text-align: center;
}
.call-to-action-element-1 .btn{
position: relative;
top: inherit;
right: inherit;
margin-top: 20px;
}
}
/* 31.b.) call-to-action-element-2 */
.call-to-action-element-2{
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
min-height: 130px;
border: 1px solid;
border-color: #ebebeb;
-webkit-border-radius: 65px;
-moz-border-radius: 65px;
border-radius: 65px;
}
.call-to-action-element-2 .ctae-icon{
float: left;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
padding-left: 30px;
}
.call-to-action-element-2 .ctae-icon i{
position: relative;
display: block;
width: 80px;
height: 80px;
border: 1px solid;
border-color: #ebebeb;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #363636;
text-align: center;
font-size: 50px;
line-height: 80px;
}
.call-to-action-element-2 .ctae-icon i:before{
line-height: 80px;
}
.call-to-action-element-2 .ctae-content{
margin-right: 33.3%;
margin-left: 140px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 30px;
border-color: #ebebeb !important;
border-left-width: 1px;
border-left-style: solid;
}
.min-width-1480 .call-to-action-element-2 .ctae-content{
margin-right: 25%;
}
.call-to-action-element-2 .btn{
position: absolute;
top: 40px;
right: 40px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.call-to-action-element-2 .ctae-content .title{
display: block;
color: #363636;
font-weight: 700;
font-size: 24px;
}
.call-to-action-element-2 .ctae-content .sub-title{
display: block;
text-transform: uppercase;
font-weight: 400;
font-size: 24px;
}
@media only screen and (max-width: 991px) {
.call-to-action-element-2{
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.call-to-action-element-2 .ctae-icon-wrap{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.call-to-action-element-2 .ctae-icon{
float: none;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
}
.call-to-action-element-2 .ctae-content{
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
border-color: #ebebeb;
border-top-width: 1px;
border-top-style: solid;
border-left: none;
text-align: center;
}
.call-to-action-element-2 .btn{
position: relative;
top: inherit;
right: inherit;
margin-top: 20px;
}
}
/* 31.c.) call-to-action-element-3 */
.call-to-action-element-3{
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
min-height: 110px;
background-color: #363636;
}
.call-to-action-element-3 .ctae-content{
position: relative;
padding-top: 25px;
padding-right: 20px;
padding-bottom: 25px;
padding-left: 20px;
border: 1px solid;
border-color: rgba(255,255,255,0.2);
}
.call-to-action-element-3 .ctae-content .title{
display: block;
color: #fff;
font-weight: 700;
font-size: 24px;
line-height: 30px;
}
@media (min-width: 992px){
.call-to-action-element-3 .ctae-content .title{
margin-right: 33.3%;
}
.min-width-1480 .call-to-action-element-3 .ctae-content .title{
margin-right: 25%;
}
}
.call-to-action-element-3 .btn{
margin-top: 20px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
@media (min-width: 992px){
.call-to-action-element-3 .btn{
position: absolute;
top: 15px;
right: 15px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
}
/* 31.d.) call-to-action-element-4 */
.call-to-action-element-4{
position: relative;
}
@media (min-width: 992px){
.call-to-action-element-4 .ctae-imageWrap{
float: left;
width: 23%;
}
.min-width-1480 .call-to-action-element-4 .ctae-imageWrap{
width: 18.8%;
}
.min-width-1480 .row-layout-1200 .call-to-action-element-4 .ctae-imageWrap{
width: 23%;
}
}
.call-to-action-element-4 .ctae-image{
position: relative;
background-attachment: scroll;
background-position: 50% 49%;
background-size: cover;
background-repeat: no-repeat;
}
.call-to-action-element-4 .ctae-image:before {
display: block;
padding-top: 42%;
width: 100%;
content: "";
}
.call-to-action-element-4 .ctae-contentWrap{
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
background-color: #363636;
line-height: 20px;
}
@media (min-width: 992px){
.call-to-action-element-4 .ctae-contentWrap{
float: left;
padding-left: 0;
width: 77%;
}
.min-width-1480 .call-to-action-element-4 .ctae-contentWrap{
width: 81.2%;
}
.min-width-1480 .row-layout-1200 .call-to-action-element-4 .ctae-contentWrap{
width: 77%;
}
}
.call-to-action-element-4 .ctae-content{
position: relative;
padding-top: 19px;
padding-right: 20px;
padding-bottom: 19px;
padding-left: 20px;
border: 1px solid;
border-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 992px){
.call-to-action-element-4 .ctae-content{
border-left: none;
}
}
.call-to-action-element-4 .ctae-content .title{
display: block;
color: #fff;
font-weight: 700;
font-size: 18px;
}
@media (min-width: 992px){
.call-to-action-element-4 .ctae-content .title{
margin-right: 33.3%;
}
.min-width-1480 .call-to-action-element-4 .ctae-content .title{
margin-right: 25%;
}
}
.call-to-action-element-4 .ctae-content .sub-title{
display: block;
color: rgba(255,255,255,0.8);
}
@media (min-width: 992px){
.call-to-action-element-4 .ctae-content .sub-title{
margin-right: 33.3%;
}
.min-width-1480 .call-to-action-element-4 .ctae-content .sub-title{
margin-right: 25%;
}
}
.call-to-action-element-4 .btn{
margin-top: 20px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
@media (min-width: 992px){
.call-to-action-element-4 .btn{
position: absolute;
top: 15px;
right: 15px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
}
/* 31.e.) call-to-action-element-4 */
.call-to-action-element-5{
position: relative;
margin-top: 20px;
margin-right: 0;
margin-bottom: 20px;
margin-left: 0;
}
@media (min-width: 992px){
.call-to-action-element-5 .ctae-imageWrap{
float: left;
width: 23%;
}
.min-width-1480 .call-to-action-element-5 .ctae-imageWrap{
width: 18.8%;
}
}
.call-to-action-element-5 .ctae-image{
position: relative;
background-attachment: scroll;
background-position: 50% 49%;
background-size: cover;
background-repeat: no-repeat;
}
.call-to-action-element-5 .ctae-image:before {
display: block;
padding-top: 42%;
width: 100%;
content: "";
}
@media (min-width: 992px){
.call-to-action-element-5 .ctae-contentWrap{
float: left;
width: 77%;
}
.min-width-1480 .call-to-action-element-5 .ctae-contentWrap{
width: 81.2%;
}
}
.call-to-action-element-5.ctae-no-image .ctae-contentWrap{
width: 100% !important;
}
.call-to-action-element-5 .ctae-content{
position: relative;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
line-height: 35px;
}
.call-to-action-element-5.ctae-no-image .ctae-content{
padding-left: 0 !important;
}
@media (min-width: 992px){
.call-to-action-element-5 .ctae-content{
padding-left: 30px;
}
}
.call-to-action-element-5 .ctae-content .title{
display: block;
color: #fff;
font-weight: 700;
font-size: 24px;
}
@media (min-width: 992px){
.call-to-action-element-5 .ctae-content .title{
margin-right: 33.3%;
}
.min-width-1480 .call-to-action-element-5 .ctae-content .title{
margin-right: 25%;
}
}
.call-to-action-element-5 .ctae-content .sub-title{
display: block;
color: rgba(255,255,255,0.8);
text-transform: uppercase;
font-weight: 400;
font-size: 24px;
}
@media (min-width: 992px){
.call-to-action-element-5 .ctae-content .sub-title{
margin-right: 33.3%;
}
.min-width-1480 .call-to-action-element-5 .ctae-content .sub-title{
margin-right: 25%;
}
}
.call-to-action-element-5 .btn{
margin-top: 20px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
@media (min-width: 992px){
.call-to-action-element-5 .btn{
position: absolute;
top: 30px;
right: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
}
/*------------------------------------------------------------------
32. Dropcap Element
-------------------------------------------------------------------*/
.dropcap-element{
position: relative;
display: block;
float: left;
overflow: hidden;
margin-top: 5px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 0;
width: 60px;
height: 60px;
}
.dropcap-element span{
display: block;
width: 60px;
height: 60px;
text-align: center;
font-weight: 700;
font-size: 60px;
line-height: 60px;
}
/* 32.a.) dropcap-element-1 */
.dropcap-element-1{
background-color: #106dd4;
color: #fff;
}
.dropcap-element-1 span{
position: absolute;
right: -10px;
bottom: -5px;
font-size: 72px;
}
/* 32.b.) dropcap-element-2 */
.dropcap-element-2{
background-color: #363636;
color: #fff;
}
.dropcap-element-2 span{
position: absolute;
bottom: -5px;
font-size: 72px;
}
/* 32.c.) dropcap-element-3 */
.dropcap-element-3{
background-color: #363636;
color: #fff;
}
/* 32.d.) dropcap-element-4 */
.dropcap-element-4{
color: #363636;
}
.dropcap-element-4:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border: 2px solid;
border-color: #363636;
content: '';
}
.dropcap-element-4 span{
position: absolute;
right: -10px;
bottom: -5px;
font-size: 72px;
}
/* 32.e.) dropcap-element-5 */
.dropcap-element-5{
color: #363636;
}
.dropcap-element-5:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border: 2px solid;
border-color: #363636;
content: '';
}
.dropcap-element-5 span{
position: absolute;
bottom: -5px;
font-size: 72px;
}
/* 32.f.) dropcap-element-6 */
.dropcap-element-6{
color: #363636;
}
.dropcap-element-6:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border: 2px solid;
border-color: #363636;
content: '';
}
/* 32.g.) dropcap-element-7 */
.dropcap-element-7{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff;
}
.dropcap-element-7 span{
font-size: 50px;
}
/* 32.h.) dropcap-element-8 */
.dropcap-element-8{
background-color: #363636;
color: #363636;
}
.dropcap-element-8:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
content: '';
}
.dropcap-element-8 span{
position: absolute;
bottom: -5px;
z-index: 9;
font-size: 60px;
}
/* 32.i.) dropcap-element-9 */
.dropcap-element-9{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #363636;
}
.dropcap-element-9:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border: 2px solid;
border-color: #363636;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
content: '';
}
.dropcap-element-9 span{
font-size: 50px;
}
/*------------------------------------------------------------------
33. Icon Button
-------------------------------------------------------------------*/
.icon-button-element{
display: inline-block;
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
min-width: 150px;
}
.icon-button-element-full{
display: block;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
width: 100%;
}
/* 33.a.) icon-button-element-1 */
.icon-button-element-1{
padding-top: 40px;
padding-right: 0;
padding-bottom: 40px;
padding-left: 0;
background-color: #363636;
text-align: center;
text-decoration: none !important;
line-height: 20px;
}
.icon-button-element-1 span{
display: block;
margin-top: 10px;
width: 100%;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 16px;
}
.icon-button-element-1 .icon.icon-button-icon-style-1{
display: inline-block;
width: 70px;
height: 70px;
color: #fff;
font-size: 50px;
}
.icon-button-element-1 .icon.icon-button-icon-style-1:before{
line-height: 70px;
}
.icon-button-element-1 .icon.icon-button-icon-style-2{
display: inline-block;
width: 70px;
height: 70px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(0,0,0,0.2);
color: #fff;
font-size: 40px;
}
.icon-button-element-1 .icon.icon-button-icon-style-2:before{
line-height: 70px;
}
.icon-button-element-1 .icon.icon-button-icon-style-3{
position: relative;
display: inline-block;
margin-bottom: 10px;
width: 60px;
height: 60px;
background-color: rgba(0,0,0,0.2);
color: #fff;
font-size: 40px;
}
.icon-button-element-1 .icon.icon-button-icon-style-3:before{
line-height: 60px;
}
.icon-button-element-1 .icon.icon-button-icon-style-3:after{
position: absolute;
bottom: -15px;
left: 15px;
width: 0;
height: 0;
border-style: solid;
border-top-width: 0;
border-top-color: transparent;
border-right-width: 15px;
border-right-color: rgba(0,0,0,0.2);
border-bottom-width: 15px;
border-bottom-color: transparent;
border-left-width: 0;
border-left-color: transparent;
content: "";
}
/*------------------------------------------------------------------
34. Image Frame
-------------------------------------------------------------------*/
.img-frame-element {
margin-bottom: 20px;
}
.img-frame-element img{
position: relative;
z-index: 1;
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
.img-frame-elementWrap{
position: relative;
}
.img-frame-elementWrap:after{
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
content: "";
opacity: 0;
}
.img-frame-element:hover .img-frame-elementWrap:after{
opacity: 1;
}
.img-frame-element-nav{
position: absolute;
top: 50%;
left: 50%;
z-index: 9;
display: block;
margin-top: -35px;
margin-right: 0;
margin-bottom: 0;
margin-left: -70px;
opacity: 0;
}
.img-frame-element-nav.img-frame-element-nav-1{
margin-top: -35px;
margin-right: 0;
margin-bottom: 0;
margin-left: -35px;
}
.img-frame-element:hover .img-frame-element-nav{
opacity: 1;
}
.img-frame-element-nav a{
display: inline-block;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #363636;
color: #fff !important;
text-align: center;
text-decoration: none !important;
font-size: 24px;
}
.img-frame-element-nav a .icon{
display: block;
}
.img-frame-element-nav a.img-frame-link .icon{
margin-top: -1px;
margin-left: 2px;
}
.img-frame-element-nav a .icon:before{
line-height: 50px;
}
.img-frame-element-nav a:hover{
background-color: #959595;
}
/* 34.a.) img-frame-element-1 */
.img-frame-element-1{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #ebebeb;
}
/* 34.b.) img-frame-element-2 */
.img-frame-element-2{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #fff;
}
/*------------------------------------------------------------------
35. Separating Element
-------------------------------------------------------------------*/
.separating-element{
display: table;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 0;
width: 100px;
height: 3px;
background-color: #363636;
}
.separating-element.separating-element-centered{
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.separating-element.separating-element-centered{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: auto;
}
.icon-element .icon{
display: inline-block;
box-sizing: content-box;
margin-top: -4px;
margin-bottom: -4px;
color: #363636;
vertical-align: middle;
font-size: 18px;
}