/*
Project Name: Lango - Language Course Html Template
Demo : https://www.theme-house.com/demo/lango/;
Description: Language Course Html Template
Version: 1.0
*/
/* CSS Index
-----------------------------------
01. Button Hover Effect
i)Button Style #one
ii)Button Style #two
iii)Button Style #three
iv)Button Style #four
v)Button Style #five
02. Pricing Table Design
i)Pricing Style #one
ii)Pricing Style #two
iii)Pricing Style #three
iv)Pricing Style #four
v)Pricing Style #five
03. Icon Table Design
i)Icon Style #one
ii)Icon Style #two
iii)Icon Style #three
iv)Icon Style #four
v)Icon Style #five
04. Counter Design
i)counter Style #one
ii)counter Style #two
iii)counter Style #three
iv)counter Style #four
v)counter Style #five
05. Preloader Design
i)Preloader Style #one
ii)Preloader Style #two
iii)Preloader Style #three
iv)Preloader Style #four
v)Preloader Style #five
06. pagination Design
i)pagination Style #one
ii)pagination Style #two
iii)pagination Style #three
iv)pagination Style #four
v)pagination Style #five
07. Timeline Design
i)Timeline Style #one
ii)Timeline Style #two
iii)Timeline Style #three
iv)Timeline Style #four
v)Timeline Style #five
08. Progress Bar Design
i)Progress Bar Style #one
ii)Progress Bar Style #two
iii)Progress Bar Style #three
iv)Progress Bar Style #four
v)Progress Bar Style #five
09. Progress Bar Design
i)Progress Bar Style #one
ii)Progress Bar Style #two
iii)Progress Bar Style #three
iv)Progress Bar Style #four
v)Progress Bar Style #five
10. Tables Design
i)Tables Style #one
ii)Tables Style #two
11. Tab Design
i)Tab Style #one
ii)Tab Style #two
iii)Tab Style #three
iv)Tab Style #four
v)Tab Style #five
12. Accordions Design
i)Accordions Style #one
ii)Accordions Style #two
iii)Accordions Style #three
iv)Accordions Style #four
v)Accordions Style #five
13. Team Design
i)Team Style #one
ii)Team Style #two
iii)Team Style #three
iv)Team Style #four
v)Team Style #five
14. breadcrumb Design
i)breadcrumb Style #one
ii)breadcrumb Style #two
iii)breadcrumb Style #three
iv)breadcrumb Style #four
15. Comment Design
i)Comment Style #one
ii)Comment Style #two
16. Post Design
i)Post Style #one
ii)Post Style #two
17. Grid
18. Tooltip Design
i)Tooltip Style #one
ii)Tooltip Style #two
iii)Tooltip Style #three
19. Alert Design
20. Image Effects Design
i)Image Effects Style #one
ii)Image Effects Style #two
iii)Image Effects Style #three
21. Form Design
i)Image Effects Style #one
ii)Image Effects Style #two
iii)Image Effects Style #three
*/
/* ===========01. Button Hover Effect ===============*/
/* ===i)Button Style #one ===*/
.btn-1{
color: #e74c3c;
font-family:'Archivo', sans-serif;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 15px;
border-radius: 0;
border: 1px solid #01a2a6;
position: relative;
z-index: 1;
transition: all 0.6s ease-out 0.0s;
}
.btn-1:hover,
.btn-1:focus{
color: #fff;
}
.btn-1:before,
.btn-1:after,
.btn-1 span:before,
.btn-1 span:after{
content: "";
background-color: #01a2a6;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 0;
z-index: -1;
transition: all 0.4s ease 0s;
}
.btn-1:after,
.btn-1 span:before{
left: auto;
right: 0;
}
.btn-1 span:before,
.btn-1 span:after{
transition-delay: 0.4s;
}
.btn-1:hover:before,
.btn-1:hover:after,
.btn-1:hover span:before,
.btn-1:hover span:after{
width: 100%;
}
@media only screen and (max-width: 767px){
.btn-1{ margin-bottom: 30px; }
}
/* ===i)Button Style #two ===*/
:root{
--white: #fff;
--color: #772ce8ad;
}
.btn-2{
color: var(--color);
font-family: "Redressed", cursive;
font-size: 24px;
font-weight: 700;
text-transform: capitalize;
letter-spacing: 1px;
padding: 6px 14px;
border: 1px solid #01a2a6;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.5s ease-in-out;
}
.btn-2:hover{
color: var(--white);
text-shadow: 0 0 10px rgba(0,0,0,0.6);
}
.btn-2:before,
.btn-2:after{
content: '';
background: #01a2a6;
width: 50px;
height: 50px;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: -16px;
left: -16px;
transition: 1s ease;
z-index: -1;
}
.btn-2:after{
left: calc(100% + 16px);
top: calc(100% + 16px);
}
.btn-2:hover:before,
.btn-2:hover:after {
height: 410px;
width: 410px;
}
@media only screen and (max-width: 767px){
.btn-2{ margin-bottom: 30px; }
}
/* ===i)Button Style #three ===*/
.btn-3{
color: #513A50;
font-family: 'Archivo', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 8px 15px;
border: 5px solid #01a2a6;
border-radius: 0;
box-shadow: 12px 12px 0 -5px #01a2a6;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.3s ease-in-out;
}
.btn-3:hover{
color: #fff;
box-shadow: 0 0 0 0px #01a2a6;
}
.btn-3:before{
content: "";
background-color: #01a2a6;
height: 140%;
width: 140%;
transform: skew(-50deg);
position: absolute;
top: 50%;
left: 100%;
z-index: -1;
transition: all 0.35s ease 0s;
}
.btn-3:hover:before{
top: -20%;
left: -20%;
}
@media only screen and (max-width: 767px){
.btn-3{ margin-bottom: 30px; }
}
/* ===iv)Button Style #four ===*/
.btn-4{
color:rgba(255,255,255,0.8);
background: #01a2a6;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
text-transform: capitalize;
letter-spacing: 1px;
padding: 13px 25px;
border-radius: 50px 50px/30px 50px;
border: none;
overflow: hidden;
position: relative;
z-index: 1;
transition: all .3s ease-in-out;
}
.btn-4:focus{ color: #fff; }
.btn-4:hover{
color: #fff;
background: transparent;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.btn-4:before,
.btn-4:after{
content: "";
background: #fe4a55;
width: 0;
height: calc(100% - 25px);
position: absolute;
top: 0;
left: 0;
transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
z-index: -1;
}
.btn-4:after{
top: auto;
bottom: 0;
left: auto;
right: 0;
}
.btn-4:hover:before,
.btn-4:hover:after{
width: 100%;
left: 0;
}
.btn-4:hover:after{
top:auto;
bottom: 0;
left: auto;
right: 0;
}
@media only screen and (max-width: 767px){
.btn-4{ margin-bottom: 30px; }
}
/* ===v)Button Style #five ===*/
.btn-5{
color: #333;
background-color: transparent;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 700;
text-transform: capitalize;
letter-spacing: 1px;
padding: 7px 20px;
border-radius: 0;
border: none;
border: 2px solid #01a2a6;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.3s ease 0.1s;
}
.btn-5:focus,
.btn-5:hover{
color: #ba2f8d;
background-color: transparent;
box-shadow: 0 0 10px -3px #ba2f8d;
}
.btn-5:before{
content: '';
background-color: #01a2a6;
height: 100%;
width: 100%;
opacity: 0;
transform: scale(0.5);
transform-origin: left center;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: opacity 0.3s ease 0s,transform 0.3s ease 0s,left 0.3s ease 0.3s;
clip-path: polygon(0 0, 80% 0%, 100% 50%, 80% 100%, 0 100%, 20% 50%);
}
.btn-5:hover:before{
opacity: 1;
transform: scale(1);
left: 100%;
}
@media only screen and (max-width: 767px){
.btn-5{ margin-bottom: 20px; }
}
/* ===========02. Pricing Table Design ===============*/
/* ===i)Pricing Style #one ===*/
:root{ --main-color: #fe4a55; }
.pricingTable-1{
background: #01a2a6;
font-family: 'Open Sans', sans-serif;
text-align: center;
padding: 0 0 40px;
border-radius: 50px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
.pricingTable-1:before{
content:"";
background: #fff;
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 60px;
z-index: -1;
}
.pricingTable-1 .pricingTable-1-header{
color: #fff;
background: #01a2a6;
padding: 20px 10px;
border-radius: 50px 50px 0 0;
text-transform: capitalize;
position: relative;
margin: 0 auto 40px;
}
.pricingTable-1 .pricingTable-1-header:after{
content: "";
background: #01a2a6;
width: 35px;
height: 25px;
transform: translateX(-50%);
position: absolute;
left: 50%;
bottom: -25px;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.pricingTable-1 .title{
font-size: 40px;
font-weight: 500;
text-transform: capitalize;
margin: 0;
}
.pricingTable-1 .pricing-content-1{
text-align: left;
padding: 0;
margin: 0 0 25px;
list-style: none;
display: inline-block;
position: relative;
z-index: 1;
}
.pricingTable-1 .pricing-content-1 li{
color: #01a2a6;
font-size: 16px;
font-weight: 500;
line-height: 35px;
letter-spacing: .5px;
padding: 0 0 0 28px;
margin: 0 0 7px;
position: relative;
}
.pricingTable-1 .pricing-content-1 li:last-child{ margin: 0; }
.pricingTable-1 .pricing-content-1 li:before{
content: "\f00c";
color: var(--main-color);
font-family: "Font Awesome 5 free";
font-weight: 900;
position: absolute;
top: 1px;
left: 0;
}
.pricingTable-1 .pricing-content-1 li.disable:before{ content: "\f00d"; }
.pricingTable-1 .price-value-1{
color: #fff;
font-size: 30px;
font-weight: 500;
text-transform: capitalize;
margin: 0 0 35px;
}
.pricingTable-1 .price-value-1 span{
background: #fe4a55;
padding: 5px 20px;
border-radius: 50px;
display: inline-block;
}
.pricingTable-1 .pricingTable-1-signup a{
color: #fe4a55;
background: #fff;
font-size: 22px;
font-weight: 700;
text-transform: capitalize;
padding: 7px 30px 8px;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
display: inline-block;
transition: all 0.3s ease-in-out;
}
.pricingTable-1 .pricingTable-1-signup a:hover{
color: #fff;
background-color: #fe4a55;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.pricingTable-1.blue{ --main-color: #206DF0; }
.pricingTable-1.orange{ --main-color: #FE6612; }
@media only screen and (max-width: 990px){
.pricingTable-1{ margin: 0 0 40px; }
}
/* ===ii)Pricing Style #two ===*/
.pricingTable-2{
font-family: 'Roboto', sans-serif;
text-align: center;
}
.pricingTable-2 .pricingTable-2-header{
color: #fff;
background-color: #fe4a55;
padding: 30px 20px;
position: relative;
z-index: 1;
-webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
transition: all 0.3s;
}
.pricingTable-2 .pricingTable-2-header:before{
content: '';
background-color: rgba(0,0,0,0.1);
height: 100%;
width: 100%;
opacity: 0;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 50%;
top: 50%;
z-index: -1;
-webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
transition: all 0.3s;
}
.pricingTable-2:hover .pricingTable-2-header:before{
height: 93%;
width: 95%;
opacity: 1;
}
.pricingTable-2 .icon{
font-size: 90px;
line-height: 30px;
margin-bottom: 10px;
}
.pricingTable-2 .title{
font-size: 30px;
font-weight: 600;
text-transform: uppercase;
}
.pricingTable-2 .pricing-content-2{
background-color: #fe4a55
padding: 25px 0 15px;
position: relative;
-webkit-clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
transition: all 0.3s;
}
.pricingTable-2 .pricing-content-2:before{
content: '';
background: radial-gradient(transparent,transparent,rgba(0,0,0,0.05));
height: 100%;
width: 100%;
opacity: 0;
transform: translateX(-50%) translateY(-50%);
position: absolute;
left: 50%;
top: 50%;
z-index: -1;
-webkit-clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
transition: all 0.3s;
}
.pricingTable-2:hover .pricing-content-2:before{
height: 95%;
width: 95%;
opacity: 1;
}
.pricingTable-2 .price-value-1
{
color: #8e44ad;
margin-bottom: 20px;
}
.pricingTable-2 .amount{
font-size: 45px;
font-weight: 700;
line-height: 50px;
display: inline-block;
}
.pricingTable-2 .month{
color: #555;
font-size: 18px;
line-height: 30px;
text-transform: capitalize;
}
.pricingTable-2 .pricing-content-2 ul{
text-align: left;
padding: 0;
margin: 0 0 20px;
list-style: none;
display: inline-block;
}
.pricingTable-2 .pricing-content-2 ul li{
color: #555;
font-size: 18px;
line-height: 40px;
padding-left: 35px;
position: relative;
}
.pricingTable-2 .pricing-content-2 ul li:before{
content: "\f00c";
color: #fff;
background-color: #2ecc71;
font-family: "Font Awesome 5 Free";
font-weight: 900;
text-align: center;
line-height: 25px;
height: 25px;
width: 25px;
border-radius: 50%;
position: absolute;
left: 0;
top: 8px;
}
.pricingTable-2 .pricing-content-2 li.disable:before{
content: '\f00d';
background-color: #fe4a55;
}
.pricingTable-2 .pricingTable-2-signup{
color: #8e44ad;
font-size: 25px;
font-weight: 700;
text-transform: capitalize;
width: 45%;
padding: 5px 15px;
margin: 0 auto;
display: block;
position: relative;
transition: all 0.3s ease 0s;
}
.pricingTable-2 .pricingTable-2-signup:hover{ color: #fff; }
.pricingTable-2 .pricingTable-2-signup:before{
content: '';
background-color: #8e44ad;
height: 100%;
width: 100%;
border-radius: 10px;
transform: scale(0);
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: all 0.3s;
}
.pricingTable-2 .pricingTable-2-signup:hover:before{ transform: scale(1); }
.pricingTable-2.blue .pricingTable-2-header{ background-color: #01a2a6; }
.pricingTable-2.blue .amount,
.pricingTable-2.blue .pricingTable-2-signup{
color: #26c7db;
}
.pricingTable-2.blue .pricingTable-2-signup:hover{ color: #fff; }
.pricingTable-2.blue .pricingTable-2-signup:before{ background-color: #26c7db; }
.pricingTable-2.red .pricingTable-2-header{ background-color: #f43a30; }
.pricingTable-2.red .amount,
.pricingTable-2.red .pricingTable-2-signup{
color: #f43a30;
}
.pricingTable-2.red .pricingTable-2-signup:hover{ color: #fff; }
.pricingTable-2.red .pricingTable-2-signup:before{ background-color: #f43a30; }
@media only screen and (max-width: 990px){
.pricingTable-2{ margin: 0 0 30px; }
}
/* ===iii)Pricing Style #three ===*/
:root{
--main-color: #3c54b1;
--color2: #0c2461;
}
.pricingTable-3{
color: #000;
background: #EDEDED;
font-family: 'Lato', sans-serif;
text-align: center;
overflow: hidden;
position: relative;
z-index: 1;
}
.pricingTable-3:before,
.pricingTable-3:after{
content: "";
background: #fe4a55;
width: 120px;
height: 130px;
position: absolute;
top: 0;
left: -60px;
clip-path: polygon(50% 0%, 100% 64%, 50% 100%, 0% 50%);
}
.pricingTable-3:after{
top: auto;
bottom: 0;
left: auto;
right: -60px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 43%);
}
.pricingTable-3 .pricingTable-3-header{
color: #fff;
background: #01a2a6;
padding: 19px 0;
margin: 0 0 25px;
}
.pricingTable-3 .title{
font-size: 42px;
font-weight: 700;
text-transform: capitalize;
margin: 0;
}
.pricingTable-3 .pricing-content-3{
text-align: left;
padding: 0;
margin: 0 0 20px;
list-style: none;
display: inline-block;
}
.pricingTable-3 .pricing-content-3 li{
color: #333;
font-size: 17px;
font-weight: 500;
text-transform: capitalize;
line-height: 35px;
padding: 0 0 0 25px;
margin: 0 0 5px;
position: relative;
}
.pricingTable-3 .pricing-content-3 li:last-child{ margin: 0; }
.pricingTable-3 .pricing-content-3 li:before{
content: "\f00c";
color: #2a8317;
font-family: "Font Awesome 5 Free";
font-size: 16px;
font-weight: 900;
position: absolute;
top: 2px;
left: 0;
}
.pricingTable-3 .pricing-content-3 li.disable:before{
content: "\f00d";
color: #f32e30;
}
.pricingTable-3 .price-value-3{ margin: 0 0 25px; }
.pricingTable-3 .price-value-3 .amount{
font-size: 45px;
font-weight: 600;
line-height: 45px;
margin-bottom: 5px;
}
.pricingTable-3 .price-value-3 .duration{
font-size: 16px;
font-weight: 400;
display: block;
text-transform: capitalize;
}
.pricingTable-3 .pricingTable-3-signup{
background: #01a2a6;
padding: 19px 0;
}
.pricingTable-3 .pricingTable-3-signup a{
color: #000;
background: #fff;
font-size: 20px;
font-weight: 900;
line-height: 25px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 7px 20px 6px;
border-radius: 50px;
display: inline-block;
transition: all 0.3s ease;
}
.pricingTable-3 .pricingTable-3-signup a:hover{
color: var(--main-color);
text-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
.pricingTable-3.red{
--main-color: #ee3f24;
--color2: #c52a07;
}
.pricingTable-3.purple{
--main-color: #B33771;
--color2: #6D214F;
}
@media only screen and (max-width: 990px){
.pricingTable-3{ margin: 0 0 40px; }
}
/* ===iv)Pricing Style #four ===*/
:root{ --main-color: #fe4a55; }
.pricingTable-4{
background: linear-gradient(to right bottom,transparent 50%, #eee 50%);
font-family: 'Montserrat', sans-serif;
text-align: center;
padding: 60px 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.15);
overflow: hidden;
position: relative;
}
.pricingTable-4:before,
.pricingTable-4:after{
content: "";
background: var(--main-color);
width: 120px;
height: 300px;
transform: rotate(-20deg);
transform-origin: top left;
position: absolute;
top: -20px;
right: -40px;
}
.pricingTable-4:after{
top: auto;
bottom: -25px;
right: auto;
left: -150px;
transform-origin: top right;
}
.pricingTable-4 .pricingTable-4-header{ margin: 0 0 20px; }
.pricingTable-4 .title{
color: var(--main-color);
font-size: 35px;
font-weight: 800;
text-transform: capitalize;
margin: 0;
}
.pricingTable-4 .pricing-content-4{
text-align: left;
padding: 0;
margin: 0 0 35px;
list-style: none;
display: inline-block;
}
.pricingTable-4 .pricing-content-4 li{
color: #666;
font-size: 18px;
line-height: 35px;
padding: 0 10px 0 30px;
margin: 0 0 15px;
position: relative;
}
.pricingTable-4 .pricing-content-4 li:last-child{ margin: 0; }
.pricingTable-4 .pricing-content-4 li:before{
content: "\f00c";
color: #3A7B12;
font-family: "Font Awesome 5 free";
font-weight: 900;
position: absolute;
top: 1px;
left: 0;
}
.pricingTable-4 .pricing-content-4 li.disable:before{
content: "\f00d";
color: #F8444A;
}
.pricingTable-4 .price-value-4{
color: var(--main-color);
font-size: 50px;
font-weight: 800;
line-height: 45px;
margin: 0 0 5px;
}
.pricingTable-4 .pricingTable-4-signup a{
color: #333;
font-size: 23px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.3s;
}
.pricingTable-4 .pricingTable-4-signup a:hover{
color: var(--main-color);
text-shadow: 3px 3px rgba(0,0,0,0.2);
}
.pricingTable-4.orange{ --main-color: #FF4712; }
.pricingTable-4.green{ --main-color: #06AF66; }
@media only screen and (max-width: 990px){
.pricingTable-4{ margin: 0 0 40px; }
}
@media only screen and (max-width: 576px){
.pricingTable-4 .title{ font-size: 30px; }
.pricingTable-4 .pricing-content-4 li{ font-size: 16px; }
}
/* ===v)Pricing Style #five ===*/
.pricingTable-5{
background: #fff;
font-family: 'Outfit', sans-serif;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
position: relative;
z-index: 1;
}
.pricingTable-5 .pricingTable-5-header{
color: #fff;
background-color: #01a2a6;
padding: 20px 20px 25px;
margin: 0 0 43px;
border-radius: 0 0 50% 50%/0 0 100% 100%;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
position: relative;
}
.pricingTable-5 .pricingTable-5-header:before,
.pricingTable-5 .pricingTable-5-header:after{
content: '';
background-color: #01a2a6;
height: 100%;
width: 50%;
border-radius: 0 0 50% 50%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.pricingTable-5 .pricingTable-5-header:after{
left: auto;
right: 0;
}
.pricingTable-5 .title{
font-size: 33px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 0 0 15px;
}
.pricingTable-5 .price-value-5 .amount{
font-size: 40px;
font-weight: 500;
line-height: 40px;
display: block;
}
.pricingTable-5 .price-value-5 .duration{
text-transform: uppercase;
display: block;
}
.pricingTable-5 .pricing-content-5{
padding: 0;
margin: 0 0 40px;
list-style: none;
}
.pricingTable-5 .pricing-content-5 li{
color: #7b7b7b;
font-size: 17px;
line-height: 25px;
text-transform: uppercase;
margin: 0 0 17px;
}
.pricingTable-5 .pricing-content-5 li:last-child{ margin: 0; }
.pricingTable-5 .pricingTable-5-signup{
background-color: #01a2a6;
padding: 10px 10px 8px;
border-radius: 50% 50% 0 0/100% 100% 0 0;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.pricingTable-5 .pricingTable-5-signup a{
color: #fff;
font-size: 23px;
font-weight: 600;
text-transform: uppercase;
transition: all 0.3s ease 0s;
}
.pricingTable-5 .pricingTable-5-signup a:hover{
color: #fff;
letter-spacing: 2px;
text-shadow: 3px 3px 0 rgba(255,255,255,0.2);
}
.pricingTable-5.pink .pricingTable-5-header,
.pricingTable-5.pink .pricingTable-5-header::before,
.pricingTable-5.pink .pricingTable-5-header::after,
.pricingTable-5.pink .pricingTable-5-signup{
background-color: #fe4a55;
}
.pricingTable-5.green .pricingTable-5-header,
.pricingTable-5.green .pricingTable-5-header::before,
.pricingTable-5.green .pricingTable-5-header::after,
.pricingTable-5.green .pricingTable-5-signup{
background-color: #fe4a55;
}
@media only screen and (max-width: 990px){
.pricingTable-5{ margin: 0 0 40px; }
}
/* ===========03. icon design ===============*/
/* ===i)icon Style #one ===*/
.icon-design-one{
margin-top: 20px;
}
.icon-design-one ul {
display: flex;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.icon-design-one ul li {
list-style: none;
margin: 0 15px;
}
.icon-design-one ul li a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background: #01a2a6;
border-radius: 50%;
font-size: 30px;
color: #fff;
transition: .5s;
}
.icon-design-one ul li a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #01a2a6;
transition: .5s;
transform: scale(.9);
z-index: -1;
}
.icon-design-one ul li a:hover:before {
transform: scale(1.1);
box-shadow: 0 0 15px #fe4a55;
}
.icon-design-one ul li a:hover {
color: #fe4a55;
box-shadow: 0 0 5px #fe4a55;
text-shadow: 0 0 5px #fe4a55;
}
/*(ii) icon design two */
.icon-design-two li {
display: inline-block;
margin: 0 15px;
}
.icon-design-two a {
display: block;
width: 50px;
height: 50px;
border: 2px solid #fe4a55;
line-height: 50px;
text-align: center;
font-size: 20px;
border-radius: 50%;
position: relative;
color: #fe4a55;
transition: all .25s;
}
.icon-design-two i {
position: relative;
z-index: 1;
}
.icon-design-two a:before,
.icon-design-two a:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: 50% 50%;
transform: scale(0);
border-radius: 50%;
z-index: -1;
transition: all .25s;
}
.icon-design-two a.active:before,
.icon-design-two a.active:after {
transition: all .25s;
}
.icon-design-two a.active:before,
.icon-design-two a:hover:before {
background: #000;
transform: scale(1.1);
}
.icon-design-two a.active:after {
background: #000;
z-index: -2;
transform: scale(100);
}
.icon-design-two a.active.fb:after {
background: #3b5998;
}
.icon-design-two a.fb:hover,
.icon-design-two a.active.fb {
color: #3b5998;
}
.icon-design-two a.active.twitter:after {
background: #55acee;
}
.icon-design-two a.twitter:hover,
.icon-design-two a.active.twitter {
color: #55acee;
}
.icon-design-two a.active.pinterest:after {
background: #cb2027;
}
.icon-design-two a.pinterest:hover,
.icon-design-two a.active.pinterest {
color: #cb2027;
}
.icon-design-two a.active.gp:after {
background: #dd4b39;
}
.icon-design-two a.gp:hover,
.icon-design-two a.active.gp {
color: #dd4b39;
}
/*(iii) icon design three */
.icon-design-three .circle-icon{
width: 50px;
height: 50px;
border-radius: 50%;
vertical-align: middle;
padding: 16px;
font-size:20px;
color:#fff;
transition:0.2s;
}
.icon-design-three .circle-icon:hover{
border-radius:10%;
transform:rotate(360deg);
}
.icon-design-three .fa-twitter{background-color : #fe4a55;}
.icon-design-three .fa-facebook{background-color : #3b5998;}
.icon-design-three .fa-pinterest{background-color : #cb2027;}
.icon-design-three .fa-linkedin{background-color : #007bb6;}
.icon-design-three .fa-youtube{background-color : #bb0000;}
.icon-design-three .fa-tumblr{background-color : #32506d;}
/*(iv) icon design four */
.icon-design-four ul{
list-style: none;
margin: 0 0 50px;
padding: 0;
}
.icon-design-four li{
display: inline-block;
margin: 0 10px;
text-align: center;
font-size: 24px;
position: relative;
}
.icon-design-four a{
display: block;
text-decoration: none;
position: relative;
z-index: 1;
color: #00aced;
text-shadow: 2px 2px 1px rgba(0,0,0,.4);
transition: all .35s;
}
.icon-design-four li:hover a{
color: #FB5660;
}
.icon-design-four i.fa{
padding-bottom: 10px;
}
/* Effect 2 */
.effect_2 li{
width: 50px;
height: 35px;
border: 2px solid #01a2a6;
position: relative;
}
.effect_2 li:before,
.effect_2 li:after{
position: absolute;
content: "";
width: 0;
background: #01a2a6;
top: 3px;
bottom: 3px;
transition: all .35s;
}
.effect_2 li:before{
left: 3px;
}
.effect_2 li:after{
right: 3px;
}
.effect_2 a{
font-size: 18px;
}
.effect_2 li:hover:before,
.effect_2 li:hover:after{
width: 75%;
}
/*(v) icon design five */
.icon-design-five{
display: flex;
}
.icon-design-five .icons{
width: 50px;
height: 50px;
margin: 0 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 50%;
overflow: hidden;
}
.icon-design-five .icons a{
color: #fe4a55;
}
.icon-design-five .icons i.fab{
padding-top: 6px
}
.icon-design-five .icons::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left,#000,#000);
z-index: -1;
border-radius: 50%;
transform: translate(100%,100%);
transition: all .4s;
}
.icon-design-five .icons:hover::before{
transform: translate(0);
animation: anim .4s linear;
}
/* ===========04. Counter design ===============*/
/* ===i)counter Style #one ===*/
:root{ --color : #01a2a6; }
.counter-1{
color: var(--color);
background: #01a2a6;
font-family: 'Hind', sans-serif;
text-align: center;
width: 200px;
height: 200px;
padding: 40px 10px 25px 24px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
position: relative;
z-index: 1;
}
.counter-1:after{
content: '';
background-color: #fff;
width: calc(100% - 20px);
height: calc(100% - 20px);
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.3);
z-index: -1;
}
.counter-1 .counter-icon{
color:var(--main-color);
font-size: 35px;
margin: 0 0 10px;
}
.counter-1 h3{
color: var(--main-color);
font-size: 19px;
font-weight: 600;
text-transform: capitalize;
margin: 0 0 15px;
}
.counter-1 .counter-value-1{
color: var(--main-color);
font-size: 30px;
font-weight: 700;
line-height: 30px;
display: inline-block;
}
.counter-1.green{ --color: #009432; }
.counter-1.yellow{--color: #F1931A; }
.counter-1.red{ --color: #E44A3D; }
@media screen and (max-width:990px){
.counter-1{ margin-bottom: 40px; }
}
/* ===ii)counter Style #two ===*/
:root{
--white: #fff;
--color1: #01a2a6;
--color2: #01a2a6;
}
.counter-2{
color: #fe4a55;
background: linear-gradient(130deg,#01a2a6,#01a2a6);
font-family: "Signika Negative", sans-serif;
text-align: center;
width: 210px;
height: 210px;
border-radius: 30px 30px;
padding: 46px 10px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.counter-2:before,
.counter-2:after{
content: "";
background: var(--white);
width: calc(100% - 35px);
height: calc(100% - 35px);
border-radius: 15px 15px;
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
z-index: -1;
}
.counter-2:after{
background:#fff;
width: calc(100% - 100px);
height: 100%;
border-radius: 0;
box-shadow: none;
z-index: -2;
}
.counter-2 .counter-icon{
font-size: 30px;
line-height: 30px;
margin: 0 0 15px;
}
.counter-2 h3{
font-size: 18px;
font-weight: 600;
text-transform: capitalize;
margin: 0 0 10px;
}
.counter-2 .counter-value-2{
font-size: 33px;
font-weight: 600;
line-height: 33px;
display: block;
}
.counter.yellow{
--color1: #FF9F01;
--color2: #E18700;
}
.counter.orange{
--color1: #FD6403;
--color2: #E12E02;
}
.counter.blue{
--color1: #28ABE2;
--color2: #0886C4;
}
@media screen and (max-width:990px){
.counter-2{ margin-bottom: 40px; }
}
/* ===iii)counter Style #three ===*/
.counter-3{
padding: 0 30px 50px;
text-align: center;
z-index: 1;
position: relative;
}
.counter-3 .counter-content-3{
padding: 10px 10px 30px;
text-align: center;
color: #fff;
position: relative;
transition: all 0.3s ease 0s;
}
.counter-3 .counter-content-3:before{
content: "";
width: 100%;
height: 100%;
background: #fe4a55;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%);
}
.counter-3 .counter-content-3:after{
content: "";
width: 60px;
height: 80%;
background: #fe4a55;
position: absolute;
bottom: -25px;
left: 0;
z-index: -2;
transform: skewY(40deg);
}
.counter-3 .counter-value-3{
display: block;
font-size: 40px;
font-weight: 600;
margin: 0 -34px 25px -30px;
position: relative;
transition: all 0.3s ease 0s;
}
.counter-3 .counter-value-3:before,
.counter-3 .counter-value-3:after{
content: "";
width: 100%;
height: 100%;
background: #01a2a6;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}
.counter-3 .counter-value-3:after{
width: 20px;
height: 20px;
background: linear-gradient(45deg,transparent 49%, #067298 50%);
top: auto;
bottom: -20px;
-webkit-clip-path: none;
clip-path: none;
}
.counter-3 .title{
font-size: 17px;
text-transform: uppercase;
margin: 0 0 10px 0;
}
.counter-3:hover .title{ text-shadow: 0 0 5px #000; }
.counter-3 .counter-icon{
font-size: 40px;
text-align: left;
margin-left: 20px;
transition: all 0.3s ease 0s;
}
.counter-3:hover .counter-icon{
transform: scale(1.2);
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.counter-3.purple .counter-content-3:before{ background: #fe4a55; }
.counter-3.purple .counter-content-3:after,
.counter-3.purple .counter-value-3:before{ background: #01a2a6; }
.counter-3.purple .counter-value-3:after{ background: linear-gradient(45deg,transparent 49%, #540444 50%); }
.counter-3.red .counter-content-3:before{ background: #f84c4c; }
.counter-3.red .counter-content-3:after,
.counter-3.red .counter-value-3:before{ background: #ae1412; }
.counter-3.red .counter-value-3:after{ background: linear-gradient(45deg,transparent 49%, #770505 50%); }
.counter-3.green .counter-content-3:before{ background: #aee118; }
.counter-3.green .counter-content-3:after,
.counter-3.green .counter-value-3:before{ background: #889539; }
.counter-3.green .counter-value-3:after{ background: linear-gradient(45deg,transparent 49%, #4e5909 50%); }
@media only screen and (max-width: 990px){
.counter-3{ margin-bottom: 30px; }
}
/* ===iv)counter Style #four ===*/
.counter-4{
padding: 20px 0;
text-align: center;
z-index: 1;
position: relative;
}
.counter-4:before{
content: "";
width: 190px;
height: 190px;
border-radius: 50%;
background: linear-gradient(to right bottom,#fe4a55,#ef4a34);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.counter-4 .counter-content-4{
width: 150px;
height: 150px;
border-radius: 50%;
background: #fff;
padding: 35px 25px 30px;
margin: 0 auto;
box-shadow: 0 0 10px #909090, 0 0 0 10px rgba(255,255,255,0.5);
position: relative;
}
.counter-4 .counter-content-4:after{
content: "";
width: 60px;
height: 100px;
background: linear-gradient(to right,#000,#b40f51,#b40f51);
position: absolute;
top: 50%;
left: -39px;
transform: translateY(-50%);
z-index: -1;
-webkit-clip-path: polygon(15% 15%, 100% 0, 100% 100%, 15% 85%);
clip-path: polygon(15% 15%, 100% 0, 100% 100%, 15% 85%);
}
.counter-4 .counter-icon{
width: 50px;
height: 50px;
background: linear-gradient(to right bottom,#b40f51,#ef4a34);
border-radius: 0 10px 10px 0;
box-shadow: 0 0 10px rgba(0,0,0,0.7);
position: absolute;
top: 50%;
left: -30px;
font-size: 30px;
color: #fff;
line-height: 50px;
transform: translateY(-50%) rotate(0);
transition: all 0.3s ease 0s;
}
.counter-4:hover .counter-icon{ transform: translateY(-50%) rotate(360deg); }
.counter-4 .counter-value-4{
display: block;
font-size: 30px;
font-weight: 600;
color: #b40f51;
margin-bottom: 5px;
}
.counter-4 .title{
font-size: 16px;
font-weight: bold;
color: #505050;
letter-spacing: 1px;
text-transform: capitalize;
margin: 0;
}
.counter-4.yellow:before{ background: linear-gradient(to right bottom,#01a2a6,#01a2a6); }
.counter-4.yellow .counter-icon{ background: linear-gradient(to right,#01a2a6,#01a2a6); }
.counter-4.yellow .counter-content-4:after{ background: linear-gradient(to right,#000,#01a2a6,#01a2a6); }
.counter-4.yellow .counter-value-4{ color: #ff9801; }
.counter-4.green:before{ background: linear-gradient(to right bottom,#00a797,#36b54d); }
.counter-4.green .counter-icon{ background: linear-gradient(to right,#00a797,#36b54d); }
.counter-4.green .counter-content-4:after{ background: linear-gradient(to right,#000,#00a797,#00a797); }
.counter-4.green .counter-value-4{ color: #00a797; }
.counter-4.purple:before{ background: linear-gradient(to right bottom,#822f7b,#ab4084); }
.counter-4.purple .counter-icon{ background: linear-gradient(to right,#822f7b,#ab4084); }
.counter-4.purple .counter-content-4:after{ background: linear-gradient(to right,#000,#822f7b,#822f7b); }
.counter-4.purple .counter-value-4{ color: #822f7b; }
@media only screen and (max-width: 990px){
.counter-4{ margin-bottom: 30px; }
}
/* ===v)counter Style #five ===*/
.counter-5{
color: #fff;
font-family: 'Ubuntu', sans-serif;
text-align: center;
width: 210px;
padding: 0 0 77px;
margin: 0 auto;
border-radius: 20px 20px 0 0;
overflow: hidden;
position: relative;
z-index: 1;
}
.counter-5:before{
content: "";
background: #14AEB0;
width: 200px;
height: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
border-radius: 0 0 72px;
transform: translateX(-50%) rotate(45deg);
position: absolute;
bottom: 12px;
left: 50%;
z-index: -1;
}
.counter-5 .counter-content-5{
background-color: #01a2a6;
padding: 15px 10px 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.counter-5 h3{
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 5px 0;
}
.counter-5 .counter-value-5{
font-size: 30px;
font-weight: 600;
}
.counter-5:hover .counter-value-5{ text-shadow: 0 0 4px rgba(0, 0, 0, 0.5) }
.counter-5 .counter-icon{
color: #16C2CE;
background: #fff;
font-size: 33px;
line-height: 56px;
width: 55px;
height: 55px;
border-radius: 50%;
transform: translateX(-50%);
position: absolute;
bottom: 12px;
left: 50%;
transition: all 0.3s;
}
.counter-5:hover .counter-icon{ transform: translateX(-50%) rotateY(360deg); }
.counter-5.red:before{ background: #D84154; }
.counter-5.red .counter-content-5{ background: #F54454; }
.counter-5.red .counter-icon{ color: #F54454; }
.counter-5.blue:before{ background: #105670; }
.counter-5.blue .counter-content-5{ background: #115E8C; }
.counter-5.blue .counter-icon{ color: #115E8C; }
.counter-5.orange:before{ background: #E87D2D; }
.counter-5.orange .counter-content-5{ background: #FA902A; }
.counter-5.orange .counter-icon{ color: #FA902A; }
@media screen and (max-width:990px){
.counter-5{ margin-bottom: 30px; }
}
/* ===========05. Preloader design ===============*/
/* ===i)Preloader Style #one ===*/
:root{
--color1: #01a2a6;
--color2: #fe4a55;
}
.loader-1{
width: 100px;
height: 100px;
border: 3px solid var(--color1);
border-radius: 50%;
position: relative;
animation: rotation 2s linear infinite;
margin: 0 auto;
}
.loader-1:before{
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
border: 3px solid var(--color2);
position: absolute;
left: 10px;
top: 15px;
}
@keyframes rotation{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===ii)Preloader Style #two ===*/
:root{ --color: #01a2a6; }
.loader{
width: 100px;
height: 100px;
margin: 0 auto;
position: relative;
animation: rotateAnim 2s infinite ease;
}
.loader .inner_loader{
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid var(--color);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: translateAnim 2s infinite ease;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.loader .inner_loader:nth-child(1){
top: -25px;
animation: translateAnimTop 2s infinite ease;
}
.loader .inner_loader:nth-child(2){
left: 25px;
animation: translateAnimRight 2s infinite ease;
}
.loader .inner_loader:nth-child(3){
top: 25px;
animation: translateAnimBottom 2s infinite ease;
}
.loader .inner_loader:nth-child(4){
left: -25px;
animation: translateAnimLeft 2s infinite ease;
}
@keyframes rotateAnim{
0% { transform: rotate(0deg); }
25% { transform: rotate(90deg); }
50% { transform: rotate(90deg); }
75% { transform: rotate(180deg); }
100% { transform: rotate(180deg); }
}
@keyframes translateAnimTop{
0% {
background: var(--color);
transform: translateY(0px);
}
25% {
background: var(--color);
transform: translateY(0px);
}
50% {
background: none;
transform: translateY(-20px);
}
75% {
background: none;
transform: translateY(-20px);
}
100% {
background: var(--color);
transform: translateY(0px);
}
}
@keyframes translateAnimBottom{
0% {
background: var(--color);
transform: translateY(0px);
}
25% {
background: var(--color);
transform: translateY(0px);
}
50% {
background: none;
transform: translateY(20px);
}
75% {
background: none;
transform: translateY(20px);
}
100% {
background: var(--color);
transform: translateY(0px);
}
}
@keyframes translateAnimLeft{
0% {
background: var(--color);
transform: translateX(0px);
}
25% {
background: var(--color);
transform: translateX(0px);
}
50% {
background: none;
transform: translateX(-20px);
}
75% {
background: none;
transform: translateX(-20px);
}
100% {
background: var(--color);
transform: translateX(0px);
}
}
@keyframes translateAnimRight{
0% {
background: var(--color);
transform: translateX(0px);
}
25% {
background: var(--color);
transform: translateX(0px);
}
50% {
background: none;
transform: translateX(20px);
}
75% {
background: none;
transform: translateX(20px);
}
100% {
background: var(--color);
transform: translateX(0px);
}
}
/* ===iii)Preloader Style #three ===*/
.loader-3 {
-webkit-mask: repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);
background: radial-gradient(farthest-side at bottom,#01a2a6 0 95%,#0000 0) bottom/0% 0% no-repeat #ddd;
width: 120px;
height: 60px;
border-radius: 200px 200px 0 0;
position: relative;
animation: animate 2s infinite steps(6);
margin: 0 auto;
}
@keyframes animate {
100% { background-size:120% 120% }
}
/* ===iv)Preloader Style #four ===*/
.loader-4{
width: 100px;
height: 70px;
margin: 50px auto;
position: relative;
}
.loader-4 span{
display: block;
width: 5px;
height: 10px;
background: #01a2a6;
position: absolute;
bottom: 0;
animation: loading-1 2.25s infinite ease-in-out;
}
.loader-4 span:nth-child(2){
left: 11px;
animation-delay: .2s;
}
.loader-4 span:nth-child(3){
left: 22px;
animation-delay: .4s;
}
.loader-4 span:nth-child(4){
left: 33px;
animation-delay: .6s;
}
.loader-4 span:nth-child(5){
left: 44px;
animation-delay: .8s;
}
.loader-4 span:nth-child(6){
left: 55px;
animation-delay: 1s;
}
.loader-4 span:nth-child(7){
left: 66px;
animation-delay: 1.2s;
}
.loader-4 span:nth-child(8){
left: 77px;
animation-delay: 1.4s;
}
.loader-4 span:nth-child(9){
left: 88px;
animation-delay: 1.6s;
}
@-webkit-keyframes loading-1{
0%{
height: 10px;
transform: translateY(0px);
background: #ff4d80;
}
25%{
height: 60px;
transform: translateY(15px);
background: #3423a6;
}
50%{
height: 10px;
transform: translateY(-10px);
background: #e29013;
}
100%{
height: 10px;
transform: translateY(0px);
background: #e50926;
}
}
@keyframes loading-1{
0%{
height: 10px;
transform: translateY(0px);
background: #ff4d80;
}
25%{
height: 60px;
transform: translateY(15px);
background: #3423a6;
}
50%{
height: 10px;
transform: translateY(-10px);
background: #e29013;
}
100%{
height: 10px;
transform: translateY(0px);
background: #e50926;
}
}
/* ===v)Preloader Style #five ===*/
:root{
--size: 120;
--speed: 0.65;
}
.loader-5{
height: 120px;
width: 120px;
margin: 30px auto 0;
position: relative;
}
.loader-5 > div{
height: calc(var(--size) * 1px);
width: calc(var(--size) * 1px);
border-radius: 100%;
border: calc(var(--size) / 4 * 1px) solid rgba(0,0,0,0.05);
transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0);
position: absolute;
top: 0;
left: 0;
animation: infinity-spin linear infinite;
animation-duration: calc(var(--speed) * 1s);
}
.loader-5 > div:nth-of-type(1){
--translate: -50;
--translate-2: calc(var(--size) / 8);
}
.loader-5 > div:nth-of-type(2){
--translate: 50;
--translate-2: calc(var(--size) / 8 * -1);
animation-delay: calc(var(--speed) * 1s);
animation-direction: reverse;
}
.loader-5 > div:before{
content: '';
background: linear-gradient(to right,#01a2a6,#01a2a6);
height: calc(var(--size) / 4 * 1px);
width: calc(var(--size) / 4 * 1px);
border-radius: 100%;
position: absolute;
top: 50%;
animation: infinity-vanish calc(var(--speed) * 2s) infinite reverse steps(1);
transform: translate(calc(var(--translate-2) * 2px), calc(var(--translate) * 1%));
}
.loader-5 > div:nth-of-type(1):before{ right: 0; }
.loader-5 > div:nth-of-type(2):before{
transform: translate(calc(var(--size) / 4 * -1px), -50%);
left: 0;
animation-direction: normal;
}
@keyframes infinity-spin{
0%{
transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(0deg);
}
100%{
transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2) * 1px), 0) rotate(360deg);
}
}
@keyframes infinity-vanish{
0%{ opacity: 0; }
50%{ opacity: 1; }
}
/* ===========06. Pagination Design ===============*/
/* ===i)Pagination Style #one ===*/
.pagination-outer-1{ text-align: center; }
.pagination-1{
font-family: 'Raleway', sans-serif;
display: inline-flex;
position: relative;
}
.pagination-1 li a.page-link-1{
color: #01a2a6;
background: transparent;
font-size: 17px;
font-weight: 700;
text-align: center;
line-height: 28px;
height: 35px;
width: 35px;
padding: 0;
margin: 0 7px;
border: 2px solid #01a2a6;
border-radius: 0;
display: block;
position: relative;
z-index: 0;
transition: all 0.5s ease 0s;
}
.pagination-1 li:first-child a.page-link-1,
.pagination-1 li:last-child a.page-link-1{
font-size: 23px;
line-height: 28px;
}
.pagination-1 li a.page-link-1:hover,
.pagination-1 li a.page-link-1:focus,
.pagination-1 li.active a.page-link-1:hover,
.pagination-1 li.active a.page-link-1{
color: #fff;
background: transparent;
border-color: #01a2a6;
border-top-color: transparent;
}
.pagination-1 li a.page-link-1:before{
content: '';
background-color: #01a2a6;
height: 0;
width: 100%;
opacity: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: all 0.5s ease-out 0s;
}
.pagination-1 li a.page-link-1:hover:before,
.pagination-1 li a.page-link-1:focus:before,
.pagination-1 li.active a.page-link-1:hover:before,
.pagination-1 li.active a.page-link-1:before{
height: 100%;
opacity: 1;
}
@media only screen and (max-width: 480px){
.pagination-1{
font-size: 0;
display: inline-block;
}
.pagination-1 li{
display: inline-block;
vertical-align: top;
margin: 0 0 15px;
}
}
/* ===ii)Pagination Style #two ===*/
.pagination-outer-2{ text-align: center; }
.pagination-2{
font-family: 'Poppins', sans-serif;
display: inline-flex;
position: relative;
}
.pagination-2 li a.page-link-2{
color: #42372c;
background: transparent;
font-size: 17px;
font-weight: 500;
text-align: center;
line-height: 35px;
height: 35px;
width: 35px;
padding: 0;
margin: 0 4px;
border: none;
border-radius: 50%;
display: block;
position: relative;
z-index: 0;
transition: all 0.1s ease 0s;
}
.pagination-2 li:first-child a.page-link-2,
.pagination-2 li:last-child a.page-link-2{
font-size: 30px;
line-height: 30px;
}
.pagination-2 li a.page-link-2:hover,
.pagination-2 li a.page-link-2:focus,
.pagination-2 li.active a.page-link-2:hover,
.pagination-2 li.active a.page-link-2{
color: #000;
background: transparent;
}
.pagination-2 li a.page-link-2:before,
.pagination-2 li a.page-link-2:after{
content: '';
background: linear-gradient(transparent 50%,#fe4a55 50%);
border-radius: 50%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.pagination-2 li a.page-link-2:after{
background: linear-gradient(#e2e2e2,#fff);
left: 3px;
top: 3px;
bottom: 3px;
right: 3px;
}
.pagination-2 li a.page-link-2:hover:before,
.pagination-2 li a.page-link-2:focus:before,
.pagination-2 li.active a.page-link-2:hover:before,
.pagination-2 li.active a.page-link-2:before{
background: linear-gradient(transparent 50%,#fe4a55 50%);
transform: rotate(180deg);
}
.pagination-2 li a.page-link-2:hover:after,
.pagination-2 li a.page-link-2:focus:after,
.pagination-2 li.active a.page-link-2:hover:after,
.pagination-2 li.active a.page-link-2:after{
transform: rotate(180deg);
}
@media only screen and (max-width: 480px){
.pagination-2{
font-size: 0;
display: inline-block;
}
.pagination-2 li{
display: inline-block;
vertical-align: top;
margin: 0 0 15px;
}
}
/* ===ii)Pagination Style #three ===*/
.pagination-outer-3{ text-align: center; }
.pagination-3{
font-family: 'Poppins', sans-serif;
display: inline-flex;
position: relative;
}
.pagination-3 li a.page-link-3{
color: #000;
background: repeating-linear-gradient(#01a2a6,#01a2a6 2px,#fff 2px, #fff 4px);
font-size: 17px;
font-weight: 600;
text-align: center;
line-height: 36px;
height: 35px;
width: 35px;
padding: 0;
margin: 0 4px;
border: none;
border-radius: 0;
display: block;
position: relative;
z-index: 0;
transition: all 0.1s ease 0s;
}
.pagination-3 li:first-child a.page-link-3,
.pagination-3 li:last-child a.page-link-3{
font-size: 30px;
line-height: 32.5px;
}
.pagination-3 li a.page-link-3:hover,
.pagination-3 li a.page-link-3:focus,
.pagination-3 li.active a.page-link-3:hover,
.pagination-3 li.active a.page-link-3{
color: #7a54f2;
}
.pagination-3 li a.page-link-3:before{
content: '';
background: #fff;
opacity: 0.8;
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.pagination-3 li a.page-link-3:hover:before,
.pagination-3 li a.page-link-3:focus:before,
.pagination-3 li.active a.page-link-3:hover:before,
.pagination-3 li.active a.page-link-3:before{
border-radius: 50%;
opacity: 1;
transform: scale(0.7);
}
@media only screen and (max-width: 480px){
.pagination-3{
font-size: 0;
display: inline-block;
}
.pagination-3 li{
display: inline-block;
vertical-align: top;
margin: 0 0 15px;
}
}
/* ===ii)Pagination Style #four ===*/
.pagination-outer{ text-align: center; }
.pagination{
font-family: 'Ubuntu', sans-serif;
display: inline-flex;
position: relative;
}
.pagination li a.page-link{
color: #222;
background-color: #fff;
font-size: 20px;
font-weight: 500;
line-height: 30px;
height: 38px;
width: 38px;
padding: 0;
margin: 0 5px;
border: 4px solid #01a2a6;
border-radius: 0;
position: relative;
z-index: 1;
transition: all 0.3s ease 0.1s;
}
.pagination li a.page-link:hover,
.pagination li a.page-link:focus,
.pagination li.active a.page-link:hover,
.pagination li.active a.page-link{
color: #34ace0;
background: #fff;
}
.pagination li a.page-link:before{
content: '';
background: linear-gradient(to right bottom,#01a2a6 50%,transparent 50%);
height: 100%;
width: 100%;
opacity: 0;
transform-origin: top right;
transform: rotate(0);
position: absolute;
right: 0;
top: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.pagination li a.page-link:hover:before,
.pagination li a.page-link:focus:before,
.pagination li.active a.page-link:hover:before,
.pagination li.active a.page-link:before{
opacity: 1;
transform: rotate(45deg) scale(0.7);
}
@media only screen and (max-width: 480px){
.pagination{
font-size: 0;
display: inline-block;
}
.pagination li{
display: inline-block;
vertical-align: top;
margin: 0 0 10px;
}
}
/* ===========07. Timeline Design ===============*/
/* ===i)Timeline Style #one ===*/
.main-timeline-1{
font-family: 'Poppins', sans-serif;
padding: 15px 0;
}
.main-timeline-1:after{
content: '';
display: block;
clear: both;
}
.main-timeline-1 .timeline-1{
width: calc(50% + 1px);
padding: 15px 0 0 15px;
margin: 0 0 20px 5px;
float: right;
position: relative;
z-index: 1;
}
.main-timeline-1 .timeline-content-1{
color: #777;
background-color: #E4EEF0;
min-height: 120px;
padding: 35px 15px 15px 80px;
border-radius: 20px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
display: block;
position: relative;
}
.main-timeline-1 .timeline-content-1:hover{ text-decoration: none; }
.main-timeline-1 .timeline-content-1:before{
content: '';
background-color: #01a2a6;
height: 80%;
width: calc(100% + 15px);
border-radius: inherit;
position: absolute;
left: -15px;
top: -15px;
z-index: -1;
}
.main-timeline-1 .timeline-year-1{
color: #fff;
background-color: #01a2a6;
font-size: 20px;
font-weight: 600;
padding: 5px 5px 7px;
border-radius: 0 0 10px 10px;
position: absolute;
left: 10px;
top: 0;
}
.main-timeline-1 .timeline-icon-1{
color: #777;
font-size: 40px;
transform: translateY(-50%);
position: absolute;
left: 20px;
top: 50%;
}
.main-timeline-1 .title-1{
color: #333;
font-size: 22px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin: 0 0 3px;
}
.main-timeline-1 .description-1{
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
line-height: 23px;
margin: 0;
}
.main-timeline-1 .timeline-1:nth-child(even){
padding: 15px 15px 0 0;
margin: 0 5px 20px 0;
float: left;
}
.main-timeline-1 .timeline-1:nth-child(even) .timeline-content-1{ padding: 35px 80px 15px 15px; }
.main-timeline-1 .timeline-1:nth-child(even) .timeline-content-1::before{
left: auto;
right: -15px;
}
.main-timeline-1 .timeline-1:nth-child(even) .timeline-icon-1{
left: auto;
right: 20px;
}
.main-timeline-1 .timeline-1:nth-child(even) .timeline-year-1{
left: auto;
right: 10px;
}
.main-timeline-1-1 .timeline-1:nth-child(4n+2) .timeline-content-1::before,
.main-timeline-1 .timeline-1:nth-child(4n+2) .timeline-year-1{
background-color: #01a2a6;
}
.main-timeline-1 .timeline-1:nth-child(4n+3) .timeline-content-1::before,
.main-timeline-1 .timeline-1:nth-child(4n+3) .timeline-year-1{
background-color: #01a2a6;
}
.main-timeline-1 .timeline-1:nth-child(4n+4) .timeline-content-1::before,
.main-timeline-1 .timeline-1:nth-child(4n+4) .timeline-year-1{
background-color: #01a2a6;
}
@media screen and (max-width:767px){
.main-timeline-1 .timeline-1,
.main-timeline-1 .timeline-1:nth-child(even){
width: 100%;
margin: 0 0 40px;
}
}
@media screen and (max-width:576px){
.main-timeline-1 .timeline-content-1,
.main-timeline-1 .timeline-1:nth-child(even) .timeline-content-1{
padding: 65px 15px 15px 15px;
}
.main-timeline-1 .timeline-icon-1{
transform: translateY(0);
top: 5px;
left: auto;
right: 15px;
}
.main-timeline-1 .timeline-1:nth-child(even) .timeline-icon-1{
transform: translateY(0);
top: 5px;
right: auto;
left: 15px;
}
}
/* ===ii)Timeline Style #two ===*/
.main-timeline-2{
font-family: 'Poppins', sans-serif;
padding: 15px 0;
position: relative;
}
.main-timeline-2:after{
content: '';
display: block;
clear: both;
}
.main-timeline-2:before{
content: "";
background: #dcdde1;
width: 10px;
height: 100%;
border-radius: 50px;
transform: translateX(-50%);
position: absolute;
top: 0;
left: 50%;
}
.main-timeline-2 .timeline-2{
width: 50.2%;
padding: 0 0 0 50px;
margin: 0 0 35px;
float: right;
position: relative;
}
.main-timeline-2 .timeline-2:before{
content:"";
width: 35px;
height: 35px;
border: 6px solid #01a2a6;
border-radius: 50%;
transform: translateY(-50%);
position: absolute;
top: 50%;
left: -14px;
}
.main-timeline-2 .timeline-content-2{
color: #555;
background-color: #fff;
min-height: 120px;
padding: 15px 15px 15px 100px;
box-shadow: 0 0 15px -3px rgba(0,0,0,0.2);
display: block;
position: relative;
}
.main-timeline-2 .timeline-content-2:hover{ text-decoration: none; }
.main-timeline-2 .timeline-content-2:before,
.main-timeline-2 .timeline-content-2:after{
content: '';
background-color: #01a2a6;
height: 100%;
width: 80px;
position: absolute;
left: 0;
top: 0;
}
.main-timeline-2 .timeline-content-2:after{
height: 40px;
width: 40px;
transform: translateY(-50%) rotate(45deg);
top: 50%;
left: -13px;
}
.main-timeline-2 .timeline-year-2{
color: #01b9e6;
background: #fff;
font-size: 30px;
font-weight: 600;
text-align: center;
line-height: 90px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 10px solid #dcdde1;
box-shadow: 0 0 15px -3px rgba(0,0,0,0.2);
transform: translateY(-50%);
position: absolute;
left: -200px;
top: 50%;
}
.main-timeline-2 .timeline-icon-2{
color: #fff;
font-size: 50px;
transform: translateY(-50%);
position: absolute;
top: 50%;
left: 15px;
z-index: 1;
}
.main-timeline-2 .title-2{
color: #01a2a6;
font-size: 22px;
font-weight: 700;
text-transform: capitalize;
margin: 0 0 3px;
}
.main-timeline-2 .description{
font-size: 13px;
letter-spacing: 1px;
margin: 0;
}
.main-timeline-2 .timeline-2:nth-child(even){
padding: 0 50px 0 0;
float: left;
}
.main-timeline-2 .timeline-2:nth-child(even):before{
left: auto;
right: -16px;
}
.main-timeline-2 .timeline-2:nth-child(even) .timeline-content-2{ padding: 15px 100px 15px 15px; }
.main-timeline-2 .timeline-2:nth-child(even) .timeline-content-2:before{
left: auto;
right: 0;
}
.main-timeline-2 .timeline-2:nth-child(even) .timeline-content-2:after{
left: auto;
right: -13px;
}
.main-timeline-2 .timeline-2:nth-child(even) .timeline-year-2{
left: auto;
right: -200px;
}
.main-timeline-2 .timeline-2:nth-child(even) .timeline-icon-2{
left: auto;
right: 15px;
}
.main-timeline-2 .timeline-2:nth-child(4n+2):before{ border-color: #01a2a6; }
.main-timeline-2 .timeline-2:nth-child(4n+2) .timeline-content-2:before,
.main-timeline-2 .timeline-2:nth-child(4n+2) .timeline-content-2:after{
background-color: #01a2a6;
}
.main-timeline-2 .timeline-2:nth-child(4n+2) .timeline-year-2,
.main-timeline-2 .timeline-2:nth-child(4n+2) .title-2{
color: #01a2a6;
}
.main-timeline-2 .timeline-2:nth-child(4n+3):before{ border-color: #01a2a6; }
.main-timeline-2 .timeline-2:nth-child(4n+3) .timeline-content-2:before,
.main-timeline-2 .timeline-2:nth-child(4n+3) .timeline-content-2:after{
background-color: #01a2a6;
}
.main-timeline-2 .timeline-2:nth-child(4n+3) .timeline-year-2,
.main-timeline-2 .timeline-2:nth-child(4n+3) .title-2{
color: #01a2a6;
}
.main-timeline-2 .timeline-2:nth-child(4n+4):before{ border-color: #01a2a6; }
.main-timeline-2 .timeline-2:nth-child(4n+4) .timeline-content-2:before,
.main-timeline-2 .timeline-2:nth-child(4n+4) .timeline-content-2:after{
background-color: #01a2a6;
}
.main-timeline-2 .timeline-2:nth-child(4n+4) .timeline-year-2,
.main-timeline-2 .timeline-2:nth-child(4n+4) .title-2{
color: #01a2a6;
}
@media screen and (max-width:767px){
.main-timeline-2:before{
transform: translateX(-50%);
left: 17px;
}
.main-timeline-2 .timeline-2,
.main-timeline-2 .timeline-2:nth-child(even){
width: 100%;
padding: 125px 0 0 65px;
}
.main-timeline-2 .timeline-2:before,
.main-timeline-2 .timeline-2:nth-child(even):before{
left: 0;
top: calc(50% + 63px);
}
.main-timeline-2 .timeline-content-2,
.main-timeline-2 .timeline-2:nth-child(even) .timeline-content-2{
padding: 15px 15px 15px 100px;
}
.main-timeline-2 .timeline-content-2:before,
.main-timeline-2 .timeline-2:nth-child(even) .timeline-content-2:before{
right: auto;
left: 0;
}
.main-timeline-2 .timeline-content-2:after,
.main-timeline-2 .timeline-2:nth-child(even) .timeline-content-2:after{
right: auto;
left: -13px;
}
.main-timeline-2 .timeline-year-2,
.main-timeline-2 .timeline-2:nth-child(even) .timeline-year-2{
transform: translateY(0);
right: auto;
left: 0;
top: -125px;
}
.main-timeline-2 .timeline-icon-2,
.main-timeline-2 .timeline-2:nth-child(even) .timeline-icon-2{
right: auto;
left: 15px;
}
}
@media screen and (max-width:576px){
.main-timeline-2 .timeline-2:before,
.main-timeline-2 .timeline-2:nth-child(even):before{
transform: translateY(0);
top: 148px;
}
.main-timeline-2 .timeline-content-2,
.main-timeline-2 .timeline-2:nth-child(even) .timeline-content-2{
padding: 100px 15px 15px;
}
.main-timeline-2 .timeline-content-2:before,
.main-timeline-2 .timeline-2:nth-child(even) .timeline-content-2:before{
width: 100%;
height: 80px;
}
.main-timeline-2 .timeline-content-2:after,
.main-timeline-2 .timeline-2:nth-child(even) .timeline-content-2:after{
transform: translateX(-50%) translateY(0) rotate(45deg);
top: 20px;
left: 7px;
}
.main-timeline-2 .timeline-icon-2,
.main-timeline-2 .timeline-2:nth-child(even) .timeline-icon-2{
transform: translateX(-50%) translateY(0);
left: 50%;
top: 6px;
}
}
/* ===iii)Timeline Style #three ===*/
.main-timeline-3{
font-family: 'Roboto', sans-serif;
position: relative;
}
.main-timeline-3:after{
content: '';
display: block;
clear: both;
}
.main-timeline-3:before{
content: '';
height: 95%;
width: 2px;
border: 2px dashed #a3a3ad;
transform: translateX(-50%);
position: absolute;
left: 50%;
top: 30px;
}
.main-timeline-3 .timeline-3{
width: 50%;
padding: 0 35px 0 27px;
margin: 0 10px 20px 0;
float: left;
}
.main-timeline-3 .timeline-content-3{
background: linear-gradient(#d9d9d9,#01a2a6);
text-align: center;
padding: 15px 115px 15px 40px;
border-radius: 5px;
box-shadow: 0 0 10px -5px rgba(0,0,0,0.6);
display: block;
position: relative;
}
.main-timeline-3 .timeline-content-3:hover{ text-decoration: none; }
.main-timeline-3 .timeline-content-3:before,
.main-timeline-3 .timeline-content-3:after{
content: "";
background: linear-gradient(to bottom,#01a2a6,#01a2a6);
width: 45px;
height: 45px;
transform: rotate(-45deg);
position: absolute;
top: 13px;
right: -58px;
z-index: 1;
}
.main-timeline-3 .timeline-content-3:after{
background: #fff;
transform:rotate(-45deg) scale(0.6);
}
.main-timeline-3 .timeline-icon-3{
color: #fff;
background: linear-gradient(to right,#01a2a6,#01a2a6);
font-size: 23px;
text-align: center;
line-height: 40px;
height: 40px;
width: 40px;
transform: translateY(-50%) rotate(-45deg);
position: absolute;
top: 50%;
left: -20px;
}
.main-timeline-3 .timeline-icon-3 i{ transform: rotate(45deg); }
.main-timeline-3 .timeline-year-3{
color: #fff;
background: linear-gradient(to bottom,#01a2a6,#01a2a6,#01a2a6);
font-size: 32px;
font-weight: 900;
text-align: center;
line-height: 100px;
height: 100%;
width: 100px;
border-radius: 0 0 5px 0;
position: absolute;
right: 0;
top: 0;
}
.main-timeline-3 .timeline-year-3:after{
content: '';
background: linear-gradient(to right bottom,#01a2a6 49%, transparent 50%);
height: 33px;
width: 33px;
position: absolute;
right: -33px;
top: 0;
}
.main-timeline-3 .title-3{
color: #000;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 7px 0;
}
.main-timeline-3 .description-3{
color: #333;
font-size: 15px;
letter-spacing: 1px;
margin: 0;
}
.main-timeline-3 .timeline-3:nth-child(even){
padding: 0 27px 0 35px;
margin: 0 0 20px 10px;
float: right;
}
.main-timeline-3 .timeline-3:nth-child(even) .timeline-content-3{ padding: 15px 40px 15px 115px; }
.main-timeline-3 .timeline-3:nth-child(even) .timeline-content-3:before,
.main-timeline-3 .timeline-3:nth-child(even) .timeline-content-3:after{
right: auto;
left: -58px;
}
.main-timeline-3 .timeline-3:nth-child(even) .timeline-icon-3{
left: auto;
right: -20px;
}
.main-timeline-3 .timeline-3:nth-child(even) .timeline-year-3{
right: auto;
left: 0;
border-radius: 0 0 0 5px;
}
.main-timeline-3 .timeline-3:nth-child(even) .timeline-year-3:after{
transform: rotateY(180deg);
right: auto;
left: -33px;
}
.main-timeline-3 .timeline-3:nth-child(4n+2) .timeline-content-3:before,
.main-timeline-3 .timeline-3:nth-child(4n+2) .timeline-icon-3 {background:linear-gradient(to left,#01a2a6,#01a2a6);}
.main-timeline-3 .timeline-3:nth-child(4n+2) .timeline-year-3 {background:linear-gradient(to bottom,#01a2a6,#01a2a6,#01a2a6);}
.main-timeline-3 .timeline-3:nth-child(4n+2) .timeline-year-3:after{background:linear-gradient(to right bottom, #01a2a6 49%, transparent 50%);}
.main-timeline-3 .timeline-3:nth-child(4n+3) .timeline-content-3:before,
.main-timeline-3 .timeline-3:nth-child(4n+3) .timeline-icon-3 {background:linear-gradient(to bottom,#01a2a6 ,#01a2a6);}
.main-timeline-3 .timeline-3:nth-child(4n+3) .timeline-year-3 {background:linear-gradient(to bottom,#01a2a6,#01a2a6,#01a2a6);}
.main-timeline-3 .timeline-3:nth-child(4n+3) .timeline-year-3:after{background:linear-gradient(to right bottom, #01a2a6 49%, transparent 50%);}
.main-timeline-3 .timeline-3:nth-child(4n+4) .timeline-content-3:before,
.main-timeline-3 .timeline-3:nth-child(4n+4) .timeline-icon-3 {background:linear-gradient(to left,#01a2a6 ,#01a2a6);}
.main-timeline-3 .timeline-3:nth-child(4n+4) .timeline-year-3 {background:linear-gradient(to bottom,#01a2a6,#01a2a6,#01a2a6);}
.main-timeline-3 .timeline-3:nth-child(4n+4) .timeline-year-3:after{background:linear-gradient(to right bottom, #01a2a6 49%, transparent 50%);}
@media screen and (max-width:767px){
.main-timeline-3:before{
left: 17px;
transform: translateX(0);
}
.main-timeline-3 .timeline-3,
.main-timeline-3 .timeline-3:nth-child(even){
width: 100%;
padding: 0 0 27px 40px;
margin: 0 0 30px 0;
}
.main-timeline-3 .timeline-content-3,
.main-timeline-3 .timeline-3:nth-child(even) .timeline-content-3{
padding: 70px 15px 35px 15px;
}
.main-timeline-3 .timeline-content-3:before,
.main-timeline-3 .timeline-content-3:after,
.main-timeline-3 .timeline-3:nth-child(even) .timeline-content-3:before,
.main-timeline-3 .timeline-3:nth-child(even) .timeline-content-3:after{
height: 25px;
width: 25px;
top: 10px;
right: auto;
left: -34px;
}
.main-timeline-3 .timeline-icon-3,
.main-timeline-3 .timeline-3:nth-child(even) .timeline-icon-3{
transform: translateY(0) translateX(50%) rotate(-45deg);
left: auto;
right: 50%;
top: auto;
bottom: -20px;
}
.main-timeline-3 .timeline-year-3,
.main-timeline-3 .timeline-3:nth-child(even) .timeline-year-3{
width: 100%;
height: 50px;
line-height: 50px;
border-radius: 0 5px 5px 5px;
right: auto;
left: 0;
}
.main-timeline-3 .timeline-year:after,
.main-timeline-3 .timeline-3:nth-child(even) .timeline-year-3:after{
height: 20px;
width: 20px;
transform: rotateY(180deg);
right: auto;
left: -20px;
}
}
@media screen and (max-width:576px){
.main-timeline-3 .title-3{ font-size: 18px; }
}
/* ===iv)Timeline Style #four ===*/
.main-timeline-4{
font-family: 'Nunito', sans-serif;
position: relative;
}
.main-timeline-4:after{
content: '';
display: block;
clear: both;
}
.main-timeline-4 .timeline-4{
width: 50%;
padding: 20px 0 0;
margin: 0 10px 0 0;
float: left;
}
.main-timeline-4 .timeline-content-4{
color: #333;
min-height: 90px;
padding: 0 85px 0 0;
display: block;
position: relative;
z-index: 1;
}
.main-timeline-4 .timeline-content-4:hover{ text-decoration: none; }
.main-timeline-4 .timeline-icon-4{
color: #107793;
background-color: #fff;
font-size: 40px;
text-align: center;
line-height: 71px;
height: 70px;
width: 70px;
border-radius: 50%;
border: 2px solid #01a2a6;
margin: 0 0 10px;
position: absolute;
top: -20px;
right: -45px;
}
.main-timeline-4 .timeline-icon-4:before,
.main-timeline-4 .timeline-icon-4:after{
content: '';
background: #01a2a6;
height: 100%;
width: 100%;
border-radius: 50%;
position: absolute;
left: -8px;
top: 1px;
z-index: -1;
}
.main-timeline-4 .timeline-icon-4:after{
height: 40%;
width: 55%;
border-radius: 0;
transform: translateY(-50%);
top: 50%;
left: -55%;
clip-path: polygon(50% 0, 50% 20%, 100% 20%, 100% 80%, 50% 80%, 50% 100%, 0% 50%);
}
.main-timeline-4 .title-4{
color: #01a2a6;
font-size: 22px;
font-weight: 800;
text-transform: uppercase;
margin: 0 0 3px;
}
.main-timeline-4 .description-4{
font-size: 15px;
margin: 0;
}
.main-timeline-4 .timeline-4:nth-child(even){
float: right;
margin: 0 0 0 10px;
}
.main-timeline-4 .timeline-4:nth-child(even) .timeline-content-4{ padding: 0 0 0 85px; }
.main-timeline-4 .timeline-4:nth-child(even) .timeline-icon-4{
right: auto;
left: -45px;
}
.main-timeline-4 .timeline-4:nth-child(even) .timeline-icon-4:before{
left: auto;
right: -8px;
}
.main-timeline-4 .timeline-4:nth-child(even) .timeline-icon-4:after{
transform: translateY(-50%) rotateY(180deg);
left: auto;
right: -55%;
}
.main-timeline-4 .timeline-4:nth-child(4n+2) .timeline-icon-4,
.main-timeline-4 .timeline-4:nth-child(4n+2) .title-4{
color: #01a2a6;
}
.main-timeline-4 .timeline-4:nth-child(4n+2) .timeline-icon-4:before,
.main-timeline-4 .timeline-4:nth-child(4n+2) .timeline-icon-4:after{
background: #01a2a6;
}
.main-timeline-4 .timeline-4:nth-child(4n+3) .timeline-icon-4,
.main-timeline-4 .timeline-4:nth-child(4n+3) .title-4{
color: #01a2a6;
}
.main-timeline-4 .timeline-4:nth-child(4n+3) .timeline-icon-4:before,
.main-timeline-4 .timeline-4:nth-child(4n+3) .timeline-icon-4:after{
background: #01a2a6;
}
.main-timeline-4 .timeline-4:nth-child(4n+4) .timeline-icon-4,
.main-timeline-4 .timeline-4:nth-child(4n+4) .title-4{
color: #01a2a6;
}
.main-timeline-4 .timeline-4:nth-child(4n+4) .timeline-icon-4:before,
.main-timeline-4 .timeline-4:nth-child(4n+4) .timeline-icon-4:after{
background: #01a2a6;
}
@media screen and (max-width:767px){
.main-timeline-4 .timeline-4,
.main-timeline-4 .timeline-4:nth-child(even){
width: 100%;
margin: 0 0 20px 0;
}
.main-timeline-4 .timeline-content-4{
padding: 0 120px 0 0;
min-height: 80px;
}
.main-timeline-4 .timeline-4:nth-child(even) .timeline-content-4{ padding: 0 0 0 120px; }
.main-timeline-4 .timeline-icon-4{ right: 0; }
.main-timeline-4 .timeline-4:nth-child(even) .timeline-icon-4{ left: 0; }
}
@media screen and (max-width:576px){
.main-timeline-4 .timeline-4{ padding-top: 60px; }
.main-timeline-4 .timeline-content-4,
.main-timeline-4 .timeline-4:nth-child(even) .timeline-content-4{
padding: 0;
min-height: auto;
}
.main-timeline-4 .timeline-icon-4{
font-size: 30px;
line-height: 51px;
height: 50px;
width: 50px;
top: -60px;
}
.main-timeline-4 .title-4{ font-size: 20px; }
}
/* ===v)Timeline Style #five ===*/
.main-timeline-5{
font-family: 'Poppins', sans-serif;
position: relative;
}
.main-timeline-5:after{
content: '';
display: block;
clear: both;
}
.main-timeline-5:before{
content: '';
background-color: #01a2a6;
height: 100%;
width: 10px;
border-radius: 10px;
transform: translateX(-50%);
position: absolute;
left: 50%;
top: 0;
}
.main-timeline-5 .timeline-5{
width: 50%;
padding: 0 0 0 70px;
margin: 0 0 0 50px;
float: right;
}
.main-timeline-5 .timeline-content-5{
background: linear-gradient(45deg,#01a2a6,#01a2a6);
min-height: 140px;
padding: 20px 60px 20px 20px;
border-radius: 10px;
box-shadow: 0 0 15px -5px #555;
display: block;
position: relative;
z-index: 1;
}
.main-timeline-5 .timeline-content-5:before,
.main-timeline-5 .timeline-content-5:after{
content: '';
background-color: #01a2a6;
height: 5px;
width: 102px;
border-radius: 10px 0 0 10px;
position: absolute;
left: -102px;
top: 20px;
z-index: -2;
}
.main-timeline-5 .timeline-content-5:after{
background-color: #fff;
width: calc(100% - 10px);
height: calc(100% - 10px);
border-radius: 10px;
top: 5px;
left: 5px;
}
.main-timeline-5 .timeline-content-5:hover{ text-decoration: none; }
.main-timeline-5 .timeline-icon-5{
color: #fff;
font-size: 40px;
text-align: center;
line-height: 63px;
height: 70px;
width: 80px;
overflow: hidden;
position: absolute;
top: 25px;
left: -110px;
z-index: 1;
}
.main-timeline-5 .timeline-icon-5:after{
content: '';
background: linear-gradient(45deg,#01a2a6,#01a2a6);
height: 80px;
width: 80px;
border-radius: 50%;
position: absolute;
left: 0;
top: -13px;
z-index: -1;
}
.main-timeline-5 .title-5{
color: #01a2a6;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 7px 0;
}
.main-timeline-5 .description-5{
color: #555;
font-size: 15px;
letter-spacing: 1px;
text-align: justify;
margin: 0;
}
.main-timeline-5 .timeline-5:nth-child(even){
padding: 0 70px 0 0;
margin: 0 50px 0 0;
float: left;
}
.main-timeline-5 .timeline-5:nth-child(even) .timeline-content-5:before{
border-radius: 0 10px 10px 0;
left: auto;
right: -102px;
}
.main-timeline-5 .timeline-5:nth-child(even) .timeline-icon-5{
left: auto;
right: -110px;
}
.main-timeline-5 .timeline-5:nth-child(4n+2) .timeline-content-5,
.main-timeline-5 .timeline-5:nth-child(4n+2) .timeline-icon-5:after{
background: linear-gradient(45deg,#01a2a6,#01a2a6);
}
.main-timeline-5 .timeline-5:nth-child(4n+2) .title-5{ color: #01a2a6; }
.main-timeline-5 .timeline-5:nth-child(4n+3) .timeline-content-5,
.main-timeline-5 .timeline-5:nth-child(4n+3) .timeline-icon-5:after{
background: linear-gradient(45deg,#01a2a6,#01a2a6);
}
.main-timeline-5 .timeline-5:nth-child(4n+3) .title-5{ color: #01a2a6; }
.main-timeline-5 .timeline-5:nth-child(4n+4) .timeline-content-5,
.main-timeline-5 .timeline-5:nth-child(4n+4) .timeline-icon-5:after{
background: linear-gradient(45deg,#01a2a6,#01a2a6);
}
.main-timeline-5 .timeline-5:nth-child(4n+4) .title-5{ color: #01a2a6; }
@media screen and (max-width:767px){
.main-timeline-5:before{
left: 0;
transform: translateX(0);
}
.main-timeline-5 .timeline-5,
.main-timeline-5 .timeline-5:nth-child(even){
width: 100%;
padding: 60px 0 0 40px;
margin-bottom: 20px;
}
.main-timeline-5 .timeline-content-5,
.main-timeline-5 .timeline-5:nth-child(even) .timeline-content-5{
padding: 60px 20px 20px;
}
.main-timeline-5 .timeline-content-5:before,
.main-timeline-5 .timeline-5:nth-child(even) .timeline-content-5:before{
border-radius: 10px;
width: 96px;
right: auto;
left: -35px;
top: -27px;
}
.main-timeline-5 .timeline-icon-5,
.main-timeline-5 .timeline-5:nth-child(even) .timeline-icon-5{
top: -22px;
left: -10px;
right: auto;
}
}
@media screen and (max-width:567px){
.main-timeline-5 .title-5{ font-size: 18px; }
}
/* ===========08. Progress Bar Design ===============*/
/* ===i)Progress Bar Style #one ===*/
.progress-1{
width: 150px;
height: 150px;
line-height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
overflow: visible;
}
.progress-1:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress-1 > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress-1 .progress-left-1{ left: 0; }
.progress-1 .progress-bar-1{
width: 100%;
height: 100%;
background: none;
border-width: 5px;
border-style: solid;
position: absolute;
top: 0;
}
.progress-1 .progress-left-1 .progress-bar-1{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress-1 .progress-right-1{ right: 0; }
.progress-1 .progress-right-1 .progress-bar-1{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress-1 .inner-circle-1,
.progress-1 .progress-value-1{
width: 60px;
height: 60px;
border-radius: 50%;
border: 5px solid #8e8e8e;
font-size: 18px;
font-weight: bold;
line-height: 50px;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}
.progress-1 .inner-circle-1:after{
content: "";
width: 5px;
height: 60px;
background: #8e8e8e;
margin: 0 auto;
position: absolute;
top: -60px;
left: 0;
right: 0;
z-index: 2;
transition: all 10s linear 0s;
}
.progress-1.blue .progress-bar-1{ border-color: #049dff; }
.progress-1.blue .progress-value-1{ color: #049dff; }
.progress-1.blue .progress-left-1 .progress-bar-1{ animation: loading-2 1.5s linear forwards 1.8s; }
.progress-1.blue .inner-circle-1{ animation: loading-6 3.8s ease forwards; }
.progress-1.yellow .progress-bar-1{ border-color: #fdba04; }
.progress-1.yellow .progress-value-1{ color: #fdba04; }
.progress-1.yellow .progress-left-1 .progress-bar-1{ animation: loading-3 1s linear forwards 1.8s; }
.progress-1.yellow .inner-circle-1{ animation: loading-7 3.8s ease forwards; }
.progress-1.pink .progress-bar-1{ border-color: #ed687c; }
.progress-1.pink .progress-value-1{ color: #ed687c; }
.progress-1.pink .progress-left-1 .progress-bar-1{ animation: loading-4 0.4s linear forwards 1.8s; }
.progress-1.pink .inner-circle-1{ animation: loading-8 3.8s ease forwards; }
.progress-1.green .progress-bar-1{ border-color: #1abc9c; }
.progress-1.green .progress-value-1{ color: #1abc9c; }
.progress-1.green .progress-left-1 .progress-bar-1{ animation: loading-5 1.2s linear forwards 1.8s; }
.progress-1.green .inner-circle-1{ animation: loading-9 3.8s ease forwards; }
@keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
@keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
@keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
@keyframes loading-6{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(324deg);
transform: rotate(324deg);
}
}
@keyframes loading-7{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@keyframes loading-8{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(216deg);
transform: rotate(216deg);
}
}
@keyframes loading-9{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(306deg);
transform: rotate(306deg);
}
}
@media only screen and (max-width: 990px){
.progress-1{ margin-bottom: 20px; }
}
/* ===========08. Progress Bar Design ===============*/
/* ===ii)Progress Bar Style #two ===*/
.progress-2{
width: 150px;
height: 150px;
line-height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress-2:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress-2 > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress-2 .progress-left-2{
left: 0;
}
.progress-2 .progress-bar-2{
width: 100%;
height: 100%;
background: none;
border-width: 2px;
border-style: solid;
position: absolute;
top: 0;
}
.progress-2 .progress-left-2 .progress-bar-2{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress-2 .progress-right-2{
right: 0;
}
.progress-2 .progress-right-2 .progress-bar-2{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress-2 .progress-value-2{
width: 85%;
height: 85%;
border-radius: 50%;
border: 2px solid #ebebeb;
font-size: 32px;
line-height: 125px;
text-align: center;
position: absolute;
top: 7.5%;
left: 7.5%;
}
.progress-2.blue .progress-bar-2{
border-color: #049dff;
}
.progress-2.blue .progress-value-2{
color: #049dff;
}
.progress-2.blue .progress-left-2 .progress-bar-2{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress-2.yellow .progress-bar-2{
border-color: #fdba04;
}
.progress-2.yellow .progress-value-2{
color: #fdba04;
}
.progress-2.yellow .progress-left-2 .progress-bar-2{
animation: loading-3 1s linear forwards 1.8s;
}
.progress-2.pink .progress-bar-2{
border-color: #ed687c;
}
.progress-2.pink .progress-value-2{
color: #ed687c;
}
.progress-2.pink .progress-left-2 .progress-bar-2{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress-2.green .progress-bar-2{
border-color: #1abc9c;
}
.progress-2.green .progress-value-2{
color: #1abc9c;
}
.progress-2.green .progress-left-2 .progress-bar-2{
animation: loading-5 1.2s linear forwards 1.8s;
}
@keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
@keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
@keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
@media only screen and (max-width: 990px){
.progress-2{ margin-bottom: 20px; }
}
/* ===========08. Progress Bar Design ===============*/
/* ===iii)Progress Bar Style #three ===*/
.progress_bar-3{
margin-bottom: 20px;
position: relative;
}
.progress_bar-3 .pro-bar-3{
background:#d3d3d3;
display: block;
width: 100%;
height:25px;
}
.progress_bar-3 .pro-bg-3 {
height:25px;
line-height: 25px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
font-weight: bold;
animation: animate-positive 2s;
}
.progress_bar-3 .pro-value-3{
color: hsl(0, 0%, 98%);
padding: 0 15px;
text-align: center;
float: left;
}
.progress_bar-3 .progress_bar_title-3{
color: hsl(0, 0%, 98%);
}
@-webkit-keyframes animate-positive {
0% { width: 0%;}
}
@keyframes animate-positive {
0% { width:0%; }
}
/* ===========08. Progress Bar Design ===============*/
/* ===iv)Progress Bar Style #four ===*/
.progress-title-4{
font-size: 18px;
font-weight: 700;
color: #000;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 0 30px;
}
.progress-4{
height: 10px;
background: #000;
border-radius: 0;
box-shadow: none;
margin-bottom: 40px;
overflow: visible;
position: relative;
}
.progress-4 .progress-bar-4{
background: #fff;
border-radius: 0;
position: relative;
-webkit-animation: animate-positive 2s;
animation: animate-positive 2s;
}
.progress-4 .progress-bar-4:before{
content: "";
width: 100%;
border-top: 10px double #f95738;
border-right: 25px solid #000;
position: absolute;
top: 0;
left: 0;
}
.progress-4 .progress-value-4{
font-size: 18px;
font-weight: 700;
color: #000;
position: absolute;
top: -32px;
right: -5px;
}
.progress-4.yellow .progress-bar-4:before{ border-top-color: #ecb82d; }
.progress-4.green .progress-bar-4:before{ border-top-color: #65c168; }
.progress-4.blue .progress-bar-4:before{ border-top-color: #165692; }
@-webkit-keyframes animate-positive{
0% { width: 0; }
}
@keyframes animate-positive{
0% { width: 0; }
}
/* ===========08. Progress Bar Design ===============*/
/* ===v)Progress Bar Style #five ===*/
.progress{
height:2px;
border-radius: 0;
box-shadow: none;
line-height: 35px;
background:#d6d6d6;
}
.progressbar-title{
color:#333;
font-size:15px;
margin:5px 0 5px;
}
.progressbar-value{
float: right;
display:block;
}
.progress .progress-bar{
animation: progress 6s;
}
@-webkit-keyframes progress{
0% { width: 0%;}
}
@keyframes progress{
0% { width:0%; }
}
/* ===========10. Table style ===============*/
/* ===i)Table Style #one ===*/
.panel-1{
font-family: 'Raleway', sans-serif;
padding: 0;
border: none;
box-shadow: 0 0 10px rgba(0,0,0,0.08);
}
.panel-1 .panel-heading-1{
background: #535353;
padding: 15px;
border-radius: 0;
}
.panel-1 .panel-heading-1 .btn{
color: #fff;
background-color: #000;
font-size: 14px;
font-weight: 600;
padding: 7px 15px;
border: none;
border-radius: 0;
transition: all 0.3s ease 0s;
}
.panel-1 .panel-heading-1 .btn:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
.panel-1 .panel-heading-1 .form-horizontal .form-group{ margin: 0; }
.panel-1 .panel-heading-1 .form-horizontal label{
color: #fff;
margin-right: 10px;
}
.panel-1 .panel-heading-1 .form-horizontal .form-control{
display: inline-block;
width: 80px;
border: none;
border-radius: 0;
}
.panel-1 .panel-heading-1 .form-horizontal .form-control:focus{
box-shadow: none;
border: none;
}
.panel-1 .panel-body-1{
padding: 0;
border-radius: 0;
}
.panel-1 .panel-body-1 .table thead tr th{
color: #fff;
background: #8D8D8D;
font-size: 17px;
font-weight: 700;
padding: 12px;
border-bottom: none;
}
.panel-1 .panel-body-1 .table thead tr th:nth-of-type(1){ width: 120px; }
.panel-1 .panel-body-1 .table thead tr th:nth-of-type(3){ width: 50%; }
.panel-1 .panel-body-1 .table tbody tr td{
color: #555;
background: #fff;
font-size: 15px;
font-weight: 500;
padding: 13px;
vertical-align: middle;
border-color: #01a2a6;
}
.panel-1 .panel-body-1 .table tbody tr:nth-child(odd) td{ background: #f5f5f5; }
.panel-1 .panel-body-1 .table tbody .action-list{
padding: 0;
margin: 0;
list-style: none;
}
.panel-1 .panel-body-1 .table tbody .action-list li{ display: inline-block; }
.panel-1 .panel-body-1 .table tbody .action-list li a{
color: #fff;
font-size: 13px;
line-height: 28px;
height: 28px;
width: 33px;
padding: 0;
border-radius: 0;
transition: all 0.3s ease 0s;
}
.panel-1 .panel-body-1 .table tbody .action-list li a:hover{ box-shadow: 0 0 5px #ddd; }
.panel-1 .panel-footer-1{
color: #fff;
background: #535353;
font-size: 16px;
line-height: 33px;
padding: 25px 15px;
border-radius: 0;
}
/* ===ii)Table Style #two ===*/
.panel{
padding: 20px;
border-radius: 0;
border: none;
}
.panel .panel-heading{
padding: 0 0 20px 0;
border-radius: 0;
margin: 0;
}
.panel .panel-heading .title{
color: #566787;
font-size: 22px;
font-weight: 400;
text-transform: capitalize;
margin: 6px 0;
}
.panel .panel-heading .title span{ font-weight: 700; }
.panel .panel-heading .search-box{ position: relative; }
.panel .panel-heading .search-box i{
color: #a0a5b1;
font-size: 13px;
position: absolute;
top: 11px;
left: 15px;
}
.panel .panel-heading .search-box .form-control{
padding: 0 0 0 40px;
border-color: #ddd;
border-radius: 20px;
}
.panel .panel-heading .search-box .form-control:focus{
border-color: #3FBAE4;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
.panel .panel-body{ padding: 0; }
.panel .panel-body .table{ margin: 0; }
.panel .table-responsive .table-bordered{ border: 1px solid #ddd; }
.panel .panel-body .table thead tr th{
font-size: 17px;
font-weight: 600;
padding: 12px;
}
.panel .panel-body .table tbody tr td{
color: #555;
font-size: 16px;
padding: 15px 12px;
vertical-align: middle;
}
.panel .panel-body .table tbody .action-list{
padding: 0;
margin: 0;
list-style: none;
}
.panel .panel-body .table tbody .action-list li{
display: inline-block;
margin: 0 5px;
}
.panel .panel-body .table tbody .action-list li a{
color: #03A9F4;
font-size: 16px;
position: relative;
z-index: 1;
transition: all 0.3s ease 0s;
}
.panel .panel-body .table tbody .action-list li a:hover{ text-shadow: 0 0 2px rgba(0,0,0,0.3); }
.panel .panel-body .table tbody .action-list li a.edit{ color: #FFC107; }
.panel .panel-body .table tbody .action-list li a.delete{ color: #E34724; }
.panel .panel-body .table tbody .action-list li a:before,
.panel .panel-body .table tbody .action-list li a:after{
content: attr(data-tip);
color: #fff;
background-color: #111;
font-size: 12px;
padding: 5px 7px;
border-radius: 4px;
text-transform: capitalize;
display: none;
transform: translateX(-50%);
position: absolute;
left: 50%;
top: -32px;
transition: all 0.3s ease 0s;
}
.panel .panel-body .table tbody .action-list li a:after{
content: '';
height: 15px;
width: 15px;
padding: 0;
border-radius: 0;
transform: translateX(-50%) rotate(45deg);
top: -18px;
z-index: -1;
}
.panel .panel-body .table tbody .action-list li a:hover:before,
.panel .panel-body .table tbody .action-list li a:hover:after{
display: block;
}
.panel .panel-footer{
color: #999;
background-color: transparent;
padding: 15px 0 0;
border: none;
}
.panel .panel-footer .col{ line-height: 35px; }
.pagination{ margin: 0; }
.pagination li a{
color: #999;
font-size: 14px;
font-weight: 500;
text-align: center;
line-height: 32px;
width: 30px;
height: 30px;
border-radius: 30px;
padding: 0;
margin: 0 2px;
border: none;
}
/* ===========11. Tab Design===============*/
/* ===i)Tab Style #one ===*/
.tab-1{
font-family: 'Titillium Web', sans-serif;
padding: 15px;
}
.tab-1 .nav-tabs{
padding: 0 10px;
margin: 0;
border: none;
}
.tab-1 .nav-tabs li a{
color: #222;
background: #e7e7e7;
font-size: 18px;
font-weight: 400;
text-align: center;
letter-spacing: 1px;
text-transform: capitalize;
padding: 7px 20px 6px;
margin: 0 5px 3px 0;
border: none;
border-radius: 50px 100px/100px 50px;
position: relative;
z-index: 1;
transition: all 0.3s ease 0.15s;
}
.tab-1 .nav-tabs li a.active,
.tab-1 .nav-tabs li a:hover
{
color: #fff;
background: #01a2a6;
border: none;
}
.tab-1 .nav-tabs li a:before{
content: "";
background: #01a2a6;
height: 13px;
width: 13px;
border-radius: 50%;
border: 2px solid #fff;
transform: scale(0);
position: absolute;
bottom: -4px;
right: 0;
z-index: -1;
transition: all 0.3s ease 0s;
}
.tab-1 .nav-tabs li a.active:before,
.tab-1 .nav-tabs li a:hover:before{
transform: scale(1);
}
.tab-1 .tab-content{
color: #222;
background: #e7e7e7;
font-size: 14px;
letter-spacing: 1px;
line-height: 25px;
padding: 20px;
border-right: 5px solid #01a2a6;
border-bottom: 5px solid #01a2a6;
border-radius: 20px 70px/70px 20px;
position: relative;
}
@media only screen and (max-width: 479px){
.tab-1 .nav-tabs{
padding: 0;
margin: 0 0 10px;
}
.tab-1 .nav-tabs li{
width: 100%;
text-align: center;
}
.tab-1 .nav-tabs li a{ margin: 0 0 5px; }
}
/* ===ii)Tab Style #two ===*/
.tab-2{
font-family: 'Raleway', sans-serif;
padding: 15px;
}
.tab-2 .nav-tabs{
padding: 0 10px;
margin: 0;
border: none;
}
.tab-2 .nav-tabs li a{
color: #333;
background: #fff;
font-size: 16px;
font-weight: 600;
text-align: center;
text-transform: capitalize;
padding: 10px 20px;
margin: 0 10px 5px 0;
border: none;
border-radius: 10px;
box-shadow: 0 0 7px rgba(0,0,0,0.1);
position: relative;
z-index: 1;
transition: all 0.3s ease 0.15s;
}
.tab-2 .nav-tabs li a.active,
.tab-2 .nav-tabs li a:hover{
color: #01a2a6;
background: #fff;
border: none;
box-shadow: 0 -2px 0 2px #01a2a6;
}
.tab-2 .nav-tabs li a:before{
content: "";
background: #01a2a6;
height: 10px;
width: 70%;
border-radius: 15px;
opacity: 0;
transform: translateX(-50%);
position: absolute;
bottom: 15px;
left: 50%;
z-index: -1;
transition: all 0.3s ease-out 0s;
}
.tab-2 .nav-tabs li a.active:before,
.tab-2 .nav-tabs li a:hover:before{
width: 50%;
opacity: 1;
bottom: -7px;
}
.tab-2 .tab-content{
color: #555;
background: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
line-height: 25px;
padding: 20px;
border-radius: 15px;
box-shadow: 0 5px 0 5px #01a2a6;
position: relative;
}
@media only screen and (max-width: 479px){
.tab-2 .nav-tabs{
padding: 0;
margin: 0 0 15px;
}
.tab-2 .nav-tabs li{
width: 100%;
text-align: center;
}
.tab-2 .nav-tabs li a{
margin: 0 0 15px;
border-radius: 10px;
}
}
/* ===iii)Tab Style #three ===*/
.tab-3 .nav-tabs{
border-bottom-color: #f0f0f0;
}
.tab-3 .nav-tabs li{
margin-bottom: 0;
}
.tab-3 .nav-tabs li a{
font-size: 14px;
color: #222;
background: #fff;
border-radius: 0;
padding: 15px;
margin-right: 0;
border: none;
border-top: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
text-transform: uppercase;
position: relative;
transition: all 0.3s ease 0s;
}
.tab-3 .nav-tabs li:last-child a,
.tab-3 .nav-tabs li:last-child a.active{
border-right: 1px solid #f0f0f0 !important;
}
.tab-3 .nav-tabs li a.active,
.tab-3 .nav-tabs li a.active:focus,
.tab-3 .nav-tabs li a.active:hover{
border: none;
border-left: 1px solid #f0f0f0;
color: #666;
}
.tab-3 .nav-tabs li a.active:before,
.tab-3 .nav-tabs li a:before{
content: "";
width: 100%;
position: absolute;
top: 0;
left: 0;
border-top: 4px solid #01a2a6;
opacity: 0;
transition: all 0.5s ease 0s;
}
.tab-3 .nav-tabs li a.active:before,
.tab-3 .nav-tabs li a.active:hover:before{
top: -3px;
opacity: 1;
}
.tab-3 .nav-tabs li a:hover:before{
top: -4px;
opacity: 1;
}
.tab-3 .nav-tabs li a.active:after,
.tab-3 .nav-tabs li a:after{
content: "";
position: absolute;
top: 2px;
left: 45%;
border: 7px solid transparent;
border-top: 7px solid #01a2a6;
opacity: 0;
transition: all 0.5s ease 0s;
}
.tab-3 .nav-tabs li a.active:after,
.tab-3 .nav-tabs li a:hover:after{
top: -1px;
opacity: 1;
}
.tab-3 .tab-content{
font-size: 14px;
color: #222;
line-height: 25px;
padding: 20px;
border: 1px solid #f0f0f0;
border-top: none;
}
/* ===iv)Tab Style #four ===*/
.tab-4 .nav-tabs {
border-bottom:0 none;
}
.tab-4 .nav-tabs li{
margin-right: 10px;
}
.tab-4 .nav-tabs li a{
position: relative;
padding: 15px;
color: #fff;
font-size: 17px;
z-index: 1;
}
.tab-4 .nav-tabs li a:hover{
background:transparent;
border:1px solid transparent;
}
.tab-4 .nav-tabs li a:before{
content: "";
width:100%;
height:100%;
position:absolute;
bottom: 8px;
left:-1px;
font-size:17px;
background: #01a2a6;
border: 1px solid #d3d3d3;
border-bottom: 0px none;
border-radius: 10px 10px 0 0;
transform-origin: left center 0;
transform: perspective(4px) rotateX(2deg);
z-index:-1;
}
.tab-4 .nav-tabs li a.active:before{
background: #fff;
}
.tab-4 .nav-tabs li a.active,
.tab-4 .nav-tabs li a.active:focus,
.tab-4 .nav-tabs li a.active:hover{
border:1px solid transparent;
background:transparent;
color: #444;
z-index: 2;
}
.tab-content .tab-pane{
border: 1px solid #d3d3d3;
padding: 20px;
background:#fff;
line-height: 22px;
}
.tab-content .tab-pane h3{
margin-top: 0;
}
@media only screen and (max-width: 767px) {
.tab-4 .nav-tabs li a{
padding: 15px 10px;
font-size: 14px;
}
.tab-4 .nav-tabs li a:before{
bottom: 6px;
}
}
@media only screen and (max-width: 480px) {
.tab-4 .nav-tabs li{
width:100%;
margin-bottom: 5px;
}
.tab-4 .nav-tabs li a:before{
bottom: 0;
transform: none;
border-bottom: 1px solid #d3d3d3;
}
}
/* ===iv)Tab Style #five ===*/
.tab .nav-tabs{
background: #fff;
border: none;
}
.tab .nav-tabs li{
margin: 0 5px 10px 0;
border: none;
text-align: center;
}
.tab .nav-tabs li a{
padding: 15px 25px;
font-size: 15px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #01a2a6;
border: none;
border-top: 2px solid #003f5b;
border-bottom: 2px solid #003f5b;
margin-right: 0;
border-radius: 0;
position: relative;
transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover{
background: #01a2a6;
border-color: #01a2a6;
}
.tab .nav-tabs li a.active{
background: #fff;
color: #01a2a6;
border: none;
border-top: 2px solid #01a2a6;
border-bottom: 2px solid #01a2a6;
}
.tab .tab-content{
font-size: 15px;
color: #737271;
line-height: 30px;
padding: 10px 0;
}
@media only screen and (max-width: 480px){
.tab .nav-tabs li{ width:100%; }
}
/* ===========12. Accordion Design ===============*/
/* ===i)Accordion Style #one ===*/
.accordion-1 .accordion-item{
border: none;
border-radius: 0;
box-shadow: none;
margin-bottom: 15px;
position: relative;
}
.accordion-1 .accordion-item:before{
content: "";
display: block;
width: 1px;
height: 100%;
border: 1px dashed #6e8898;
top: 25px;
left: 18px;
position: absolute;
}
.accordion-1 .accordion-item:last-child:before{ display: none; }
.accordion-1 .accordion-header{
padding: 0;
border: none;
border-radius: 0;
position: relative;
}
.accordion-1 .accordion-header button{
display: block;
padding: 10px 30px 10px 60px;
margin: 0;
background: #fff;
font-size: 18px;
font-weight: 700;
color: #1d3557;
letter-spacing: 1px;
border-radius: 0;
overflow: hidden;
position: relative;
}
.accordion-1 .accordion-header button:before,
.accordion-1 .accordion-header button.collapsed:before{
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
width: 40px;
height: 100%;
line-height: 40px;
font-size: 17px;
color: #fff;
text-align: center;
background: #01a2a6;
border-radius: 3px;
border: 1px solid #01a2a6;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease 0s;
}
.accordion-1 .accordion-header button.collapsed:before{
content: "\f105";
color: #000;
background: #fff;
border: 1px solid #6e8898;
}
.accordion-1 .accordion-body{
padding: 40px 20px 30px;
margin-left: 40px;
border-top: none;
background: #01a2a6;
font-size: 15px;
color: #fff;
line-height: 28px;
letter-spacing: 1px;
-webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
@media only screen and (max-width: 480px){
.accordion-1 .accordion-body{ padding: 70px 10px; }
}
/* ===ii)Accordion Style #two ===*/
.accordion-2{
padding-left: 80px;
overflow: hidden;
position: relative;
z-index: 1;
}
.accordion-2:before{
content: "";
width: 5px;
height: 100%;
background: #01a2a6;
position: absolute;
top: 0;
left: 22px;
z-index: -1;
}
.accordion-2 .accordion-item{
border: none;
border-radius: 0;
box-shadow: none;
margin-bottom: 15px;
}
.accordion-2 .panel-heading{
padding: 0;
border: none;
border-radius: 0;
}
.accordion-2 .accordion-header button{
display: block;
padding: 10px 30px 15px 0;
background: #fff;
font-size: 18px;
font-weight: bold;
color: #01a2a6;
position: relative;
transition: all 0.5s ease 0s;
}
.accordion-2 .accordion-header button:before{
content: "\f068";
font-family: "Font Awesome 5 Free";
font-weight: 900;
width: 50px;
height: 50px;
line-height: 40px;
border-radius: 50%;
background: #cad5c2;
text-align: center;
font-size: 17px;
color: #01a2a6;
border: 6px solid #01a2a6;
position: absolute;
top: 0;
left: -80px;
}
.accordion-2 .accordion-header button.collapsed:before{
content: "\f067";
background: #fff;
}
.accordion-2 .accordion-body{
padding: 10px 15px;
background: #eee;
border: none;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) inset, 0 1px 2px rgba(255, 255, 255, 0.9);
font-size: 14px;
color: #487677;
line-height: 25px;
}
/* ===iii)Accordion Style #three ===*/
.accordion-3{
padding-left: 76px;
overflow: hidden;
position: relative;
z-index: 1;
}
.accordion-3:before{
content: "";
width: 1px;
height: 90%;
background: #01a2a6;
position: absolute;
top: 0;
left: 22px;
z-index: -1;
}
.accordion-3 .accordion-item{
border: none;
box-shadow: none;
border-radius: 0;
}
.accordion-3 .panel-heading{
padding: 0;
border-radius: 0;
border: none;
}
.accordion-3 .accordion-header button{
display: block;
font-size: 16px;
font-weight: bold;
color: #31162e;
padding: 10px 30px 15px 0;
background: #fff;
position: relative;
transition: all 0.5s ease 0s;
}
.accordion-3 .accordion-header button:before{
content: "\f05b";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 20px;
color: #fff;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #01a2a6;
border: 1px solid #01a2a6;
position: absolute;
top: 0;
left: -74px;
}
.accordion-3 .accordion-header button.collapsed:before{
color: #01a2a6;
background: #fff;
}
.accordion-3 .panel-body{
font-size: 14px;
color: #487677;
line-height: 25px;
padding: 5px 15px 15px 0;
border: none;
}
/* ===iv)Accordion Style #four ===*/
.accordion-4 .accordion-item{
border: none;
box-shadow: none;
border-radius: 30px;
margin-bottom: 15px;
}
.accordion-4 .panel-heading{
padding: 0;
border-radius: 30px;
}
.accordion-4 .accordion-header button{
display: block;
padding: 17px 20px 17px 70px;
background: #f1f1e6;
font-size: 18px;
font-weight: 600;
color: #01a2a6;
border: none;
border-radius: 30px;
position: relative;
transition: all 0.3s ease 0s;
}
.accordion-4 .accordion-header button.collapsed{ color: #242167; }
.accordion-4 .accordion-header button:after,
.accordion-4 .accordion-header button.collapsed:after{
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
width: 55px;
height: 55px;
line-height: 55px;
border-radius: 50%;
background: #01a2a6;
font-size: 25px;
color: #fff;
text-align: center;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease 0s;
}
.accordion-4 .accordion-header button.collapsed:after{ content: "\f105"; }
.accordion-4 .accordion-body{
padding: 20px 0 0 0;
font-size: 14px;
color: #8c8c8c;
line-height: 25px;
border-top: none;
position: relative;
}
.accordion-4 .accordion-body p{
padding: 10px 20px 10px;
margin: 0;
background: #f1f1e6;
border-radius: 15px;
}
/* ===v)Accordion Style #five ===*/
.accordion-5 .accordion-item{
border: none;
box-shadow: none;
border-radius: 0;
margin-bottom: -5px;
}
.accordion-5 .panel-heading{
padding: 0;
border: none;
}
.accordion-5 .accordion-header button{
display: block;
padding: 15px 20px 15px 50px;
background: #fafafa;
font-size: 16px;
font-weight: 600;
color: #01a2a6;
border-top: 1px solid #01a2a6;
position: relative;
transition: all 0.3s ease 0s;
}
.accordion-5 .panel:last-child .accordion-header button{
border-bottom: 1px solid #01a2a6;
}
.accordion-5 .accordion-header button.collapsed{
background: #f3f2eb;
color: #333;
}
.accordion-5 .accordion-header button:before,
.accordion-5 .accordion-header button.collapsed:before,
.accordion-5 .accordion-header button:after,
.accordion-5 .accordion-header button.collapsed:after{
content: "";
width: 16px;
height: 4px;
background: #01a2a6;
position: absolute;
top: 20px;
left: 20px;
transition: all 0.3s ease 0s;
}
.accordion-5 .accordion-header button.collapsed:after{
transform: rotate(90deg);
}
.accordion-5 .accordion-body{
padding: 10px 20px 10px 50px;
background: #01a2a6;
font-size: 14px;
color: #fff;
line-height: 25px;
border-top: none;
}
/* ===========13. Team Design ===============*/
/* ===i)Team Style #one ===*/
.our-team-1{
text-align: center;
overflow: hidden;
position: relative;
}
.our-team-1 img{
width: 100%;
height: auto;
}
.our-team-1 .team-content{
width: 100%;
background: #01a2a6;
color: #fff;
padding: 15px 0 10px 0;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
transition: all 0.3s ease 0s;
}
.our-team-1:hover .team-content{
padding-bottom: 40px;
}
.our-team-1 .team-content:before,
.our-team-1 .team-content:after{
content: "";
width: 60%;
height: 38px;
background: #01a2a6;
position: absolute;
top: -18px;
transform: rotate(15deg);
z-index: -1;
}
.our-team-1 .team-content:before{
left: -3%;
}
.our-team-1 .team-content:after{
right: -3%;
transform: rotate(-15deg);
}
.our-team-1 .title{
font-size: 20px;
font-weight: 600;
text-transform: capitalize;
margin: 0 0 7px 0;
position: relative;
color:#fff;
}
.our-team-1 .title:before,
.our-team-1 .title:after{
content: "";
width: 7px;
height: 93px;
background: #fe4a55;
position: absolute;
top: -78px;
z-index: -2;
transform: rotate(-74deg);
}
.our-team-1 .title:before{
left: 32%;
}
.our-team-1 .title:after{
right: 32%;
transform: rotate(74deg);
}
.our-team-1 .post{
display: block;
font-size: 13px;
text-transform: capitalize;
margin-bottom: 8px;
}
.our-team-1 .social-links{
list-style: none;
padding: 0 0 15px 0;
margin: 0;
position: absolute;
bottom: -40px;
right: 0;
left: 0;
transition: all 0.5s ease 0s;
}
.our-team-1:hover .social-links{
bottom: 0;
}
.our-team-1 .social-links li{
display: inline-block;
}
.our-team-1 .social-links li a{
display: block;
font-size: 16px;
color: #aad6e1;
margin-right: 6px;
transition: all 0.5s ease 0s;
}
.our-team-1 .social-links li:last-child a{
margin-right: 0;
}
.our-team-1 .social-links li a:hover{
color: #ff5543;
}
@media only screen and (max-width: 990px){
.our-team-1{ margin-bottom: 30px; }
.our-team-1 .team-content:before,
.our-team-1 .team-content:after{
height: 50px;
top: -24px;
}
.our-team-1 .title:before,
.our-team-1 .title:after{
top: -85px;
height: 102px;
}
.our-team-1 .title:before{
left: 35%;
}
.our-team-1 .title:after{
right: 35%;
}
}
@media only screen and (max-width: 767px){
.our-team-1 .team-content:before,
.our-team-1 .team-content:after{
height: 75px;
}
.our-team-1 .team-content:before{
transform: rotate(8deg);
}
.our-team-1 .team-content:after{
transform: rotate(-8deg);
}
.our-team-1 .title:before,
.our-team-1 .title:after{
width: 10px;
top: -78px;
height: 102px;
}
.our-team-1 .title:before{
left: 42.5%;
transform: rotate(-82deg);
}
.our-team-1 .title:after{
right: 42.5%;
transform: rotate(82deg);
}
}
@media only screen and (max-width: 480px){
.our-team-1 .title:before,
.our-team-1 .title:after{
top: -83px;
}
}
/* ===ii)Team Style #two ===*/
.our-team-2{
text-align: center;
}
.our-team-2 .pic{
position: relative;
}
.our-team-2 .pic:before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
transition: all 0.3s ease 0s;
}
.our-team-2 .pic:after{
content: "";
width: 90%;
height: 90%;
border: 1px solid #fe4a55;
position: absolute;
top: 5%;
left: 5%;
opacity: 0;
transition: all 0.3s ease 0s;
}
.our-team-2:hover .pic:before,
.our-team-2:hover .pic:after{
opacity: 1;
}
.our-team-2 .pic img{
width: 100%;
height: auto;
}
.our-team-2 .social-links{
width: 100%;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
bottom: 40px;
left: 0;
opacity: 0;
z-index: 1;
transition: all 0.3s ease 0s;
}
.our-team-2:hover .social-links{
opacity: 1;
}
.our-team-2 .social-links li{
display: inline-block;
margin-right: 10px;
}
.our-team-2 .social-links li a{
display: block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
font-size: 15px;
color: #f5f5f6;
border: 1px solid #f5f5f6;
transition: all 0.3s ease 0s;
}
.our-team-2 .social-links li .fa-twitter:hover{
background: #00aced;
border-color: #00aced;
}
.our-team-2 .social-links li .fa-google-plus:hover{
background: #c03c30;
border-color: #c03c30;
}
.our-team-2 .social-links li .fa-linkedin:hover{
background: #0177b5;
border-color: #0177b5;
}
.our-team-2 .social-links li .fa-facebook:hover{
background: #4867aa;
border-color: #4867aa;
}
.our-team-2 .team-content{
padding: 15px 0;
background: #323232;
border-top: 2px solid #d36832;
overflow: hidden;
position: relative;
}
.our-team-2 .team-content:before{
content: "";
width: 100%;
height: 100%;
background: #fe4a55;
position: absolute;
top: -100%;
left: 0;
transition: all 0.3s ease-out 0s;
}
.our-team-2:hover .team-content:before{
top: 0;
}
.our-team-2 .title{
font-size: 24px;
color: #01a2a6;
margin: 0 0 5px;
text-transform: capitalize;
z-index: 1;
position: relative;
transition: all 0.5s ease 0s;
}
.our-team-2 .post{
display: block;
font-size: 14px;
color: #f5f5f6;
text-transform: capitalize;
z-index: 1;
position: relative;
transition: all 0.5s ease 0s;
}
.our-team-2:hover .title,
.our-team-2:hover .post{
color: #fff;
}
@media screen and (max-width: 990px){
.our-team-2{ margin-bottom: 20px; }
}
/* ===iii)Team Style #three ===*/
.our-team-3{
text-align: center;
position: relative;
}
.our-team-3 img{
width: 100%;
height: auto;
}
.our-team-3 .team-content{
width: 100%;
height: auto;
background: #000;
padding: 27px 0;
border-left: 5px solid #fe4a55;
box-shadow: 0 15px 25px 0 rgba(3,7,15,0.1);
position: absolute;
bottom: 0;
right: 0;
transition: all 0.5s ease 0s;
}
.our-team-3:hover .team-content{
background: #01a2a6;
}
.our-team-3 .title{
font-size: 20px;
font-weight: 700;
color: #fff;
text-transform: capitalize;
margin: 0;
transition: all 0.5s ease 0s;
}
.our-team-3:hover .title{
color: #fff;
margin-bottom: 10px;
}
.our-team-3 .post{
display: block;
font-size: 15px;
font-style: italic;
color: #fff;
text-transform: capitalize;
height: 0;
opacity: 0;
transform: scale(0);
transition: all 0.5s ease 0s;
}
.our-team-3:hover .post{
height: 40px;
opacity: 1;
transform: scale(1);
}
.our-team-3 .social{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
transform: translateY(-60%);
transition: all 0.5s ease 0s;
}
.our-team-3:hover .social{
transform: translateY(50%);
opacity: 1;
}
.our-team-3 .social li{
display: inline-block;
}
.our-team-3 .social li a{
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fe4a55;
font-size: 17px;
font-weight: 700;
line-height:40px;
color: #5e3448;
transition: all 0.5s ease 0s;
}
.our-team-3 .social li a:hover{
color: #ecdfbd;
background: #000;
}
@media only screen and (max-width: 990px){
.our-team-3{ margin-bottom: 40px; }
}
/* ===iii)Team Style #four ===*/
.our-team-4{
text-align: center;
margin-bottom: 50px;
position: relative;
}
.our-team-4:after{
content: "";
width: 100%;
height: 100%;
background: linear-gradient(60deg,#01a2a6,#01a2a6);
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
transform: scale(0);
transition: all 0.5s ease 0s;
}
.our-team-4:hover:after{
transform: scale(1);
}
.our-team-4 img{
width: 100%;
height: auto;
}
.our-team-4 .team-content{
width: 75%;
background: #fff;
padding: 30px 0;
margin: 0 auto;
border: 1px solid #eee;
position: absolute;
bottom: -60px;
left: 0;
right: 0;
z-index: 1;
transition: all 0.3s ease 0s;
}
.our-team-4 .title{
font-size: 16px;
font-weight: 700;
color: #444;
text-transform: uppercase;
margin: 0 0 10px 0;
}
.our-team-4 .post{
display: block;
font-size: 13px;
color: #999;
text-transform: capitalize;
}
.our-team-4 .social{
padding: 0;
margin: 0;
list-style: none;
opacity: 0;
transform: scale(0);
transition: all 0.5s ease 0s;
}
.our-team-4:hover .social{
opacity: 1;
transform: scale(1);
}
.our-team-4 .social li{
display: inline-block;
transition: all 0.5s ease 0s;
}
.our-team-4:hover .social li{
margin: 20px 4px 0;
}
.our-team-4 .social li a{
display: block;
width: 30px;
height: 30px;
background: #fe4a55;
font-size:15px;
font-weight: 600;
color: #d7e8ba;
line-height: 30px;
transition: all 0.5s ease 0s;
}
.our-team-4 .social li a:hover{
background: #4da1a9;
color: #fff;
}
@media only screen and (max-width:990px){
.our-team-4{ margin-bottom: 80px; }
}
/* ===========14. breadcrumb Design ===============*/
/* ===i)breadcrumb Style #one ===*/
.breadcrumb{
display: inline-block;
padding: 0;
margin: 0;
border-radius: 5px 25px 25px 5px;
overflow: hidden;
}
.breadcrumb li{
float: left;
margin-right: 3px;
position: relative;
z-index: 1;
}
.breadcrumb li:before{ display: none; }
.breadcrumb li:after{
content: "";
width: 40px;
height: 100%;
background: #01a2a6;
position: absolute;
top: 0;
right: -20px;
z-index: -1;
}
.breadcrumb li:nth-last-child(2):after,
.breadcrumb li:last-child:after{ display: none; }
.breadcrumb li a,
.breadcrumb li:last-child{
display: block;
padding: 8px 15px;
font-size: 14px;
font-weight: bold;
color: #fff;
border-radius: 0 25px 25px 0;
box-shadow: 5px 0 5px -5px #333;
}
.breadcrumb li a{ background: #01a2a6; }
.breadcrumb li:last-child{
background: #ebf3fe;
color: #01a2a6;
margin-right: 0;
}
@media only screen and (max-width: 479px){
.breadcrumb li a,
.breadcrumb li:last-child{ padding: 8px 10px; }
}
@media only screen and (max-width: 359px){
.breadcrumb li a,
.breadcrumb li:last-child{ padding: 8px 7px; }
}
/* ===ii)breadcrumb Style #two ===*/
.breadcrumb-2{
display: inline-block;
padding: 0;
margin: 0;
background: transparent;
overflow: hidden;
}
.breadcrumb-2 li{
float: left;
padding: 8px 15px 8px 50px;
background: #01a2a6;
font-size: 14px;
font-weight: bold;
color: #fff;
position: relative;
}
.breadcrumb-2 li:first-child{ background: #99c6c7; }
.breadcrumb-2 li:last-child{
background: #005a5c;
margin-right: 18px;
}
.breadcrumb-2 li:before{ display: none; }
.breadcrumb-2 li:after{
content: "";
display: block;
border-left: 18px solid #01a2a6;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
position: absolute;
top: 0;
right: -18px;
z-index: 1;
}
.breadcrumb-2 li:first-child:after{ border-left-color: #99c6c7; }
.breadcrumb-2 li:last-child:after{ border-left-color: #005a5c; }
.breadcrumb-2 li a{
font-size: 14px;
font-weight: bold;
color: #fff;
}
@media only screen and (max-width: 479px){
.breadcrumb-2 li{ padding: 8px 15px 8px 30px; }
}
/* ===iii)breadcrumb Style #three ===*/
.breadcrumb-3{
display: inline-block;
padding: 10px 0 0 0;
margin: 0;
border-top: 4px solid #01a2a6;
background: transparent;
overflow: hidden;
border-radius: 0;
position: relative;
}
.breadcrumb-3 li{
float: left;
border: 1px solid rgba(0,0,0,0.1);
font-weight: bold;
text-transform: uppercase;
border-radius: 5px;
margin-right: 10px;
position: relative;
transition: all 0.3s ease 0s;
}
.breadcrumb-3 li:hover{ background: #01a2a6; }
.breadcrumb-3 li:before{ display: none; }
.breadcrumb-3 li:last-child{
color: #fff;
background: #01a2a6;
padding: 3px 15px;
margin-right: 0;
position: relative;
}
.breadcrumb-3 li:last-child:after{
content: "";
width: 5px;
border: 10px solid transparent;
border-top: 10px solid #01a2a6;
margin: 0 auto;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
.breadcrumb-3 li a{
display: block;
padding: 3px 15px;
font-size: 16px;
color: #000;
}
.breadcrumb-3 li:hover a{ color: #fff; }
@media only screen and (max-width: 479px){
.breadcrumb-3 li{ margin-right: 3px; }
.breadcrumb-3 li a,
.breadcrumb-3 li:last-child{
font-size: 14px;
font-weight: normal;
padding: 3px;
}
}
/* ===iv)breadcrumb Style four# ===*/
.breadcrumb-4{
display: inline-block;
padding: 0;
margin: 0;
background: transparent;
overflow: hidden;
}
.breadcrumb-4 li{
float: left;
margin-right: 5px;
border: 2px solid #01a2a6;
border-radius: 10px;
background: #01a2a6;
font-size: 14px;
font-weight: bold;
color: #fff;
position: relative;
}
.breadcrumb-4 li:last-child{
padding: 10px 15px;
background: #fff;
margin-right: 0;
color: #01a2a6;
}
.breadcrumb-4 li:before{
content: "" !important;
width: 20px;
height: 20px;
border-radius: 4px;
background: #01a2a6;
position: absolute;
top: 50%;
right: -13px;
z-index: 1;
transform: translateY(-50%);
}
.breadcrumb-4 li:last-child:before{ display: none; }
.breadcrumb-4 li:after{
content: "";
display: block;
width: 18px;
height: 30px;
border-radius: 7px;
background: #fff;
position: absolute;
top: 50%;
left: -5px;
transform: translateY(-50%);
}
.breadcrumb-4 li:first-child:after{ display: none; }
.breadcrumb-4 li a{
display: block;
padding: 10px 15px 10px 25px;
font-size: 14px;
font-weight: bold;
color: #fff;
}
.breadcrumb-4 li:first-child a{ padding: 10px 15px; }
.breadcrumb-4 li a:hover{ text-decoration: none; }
@media only screen and (max-width: 479px){
.breadcrumb-4 li a{
padding: 7px 7px 7px 11px;
font-size: 12px;
}
.breadcrumb-4 li:last-child,
.breadcrumb-4 li:first-child a{
padding: 7px;
font-size: 12px;
}
.breadcrumb-4 li:before{
width: 15px;
height: 18px;
right: -12px;
}
.breadcrumb-4 li:after{
width: 13px;
height: 22px;
left: -7px;
}
}
/* ===========15. Comment ===============*/
/* ===i)Comment Style #one ===*/
.comment-list {
margin-top: 50px;
}
.comment-group-title h3,
.leave-comment h3 {
font-size: 26px;
margin-bottom: 30px;
color: #1c2045;
font-weight: 600;
position: relative;
display: block;
text-transform: capitalize;
}
.single-comment-box {
margin-bottom: 10px;
position: relative;
-webkit-transition: all 300ms ease 0s;
transition: all 300ms ease 0s;
}
.main-comment {
font-size: 15px;
padding: 0 0 0 90px;
position: relative;
margin-bottom: 30px;
}
.author-image {
border-radius: 50%;
left: 0;
margin-bottom: 20px;
position: absolute;
}
.author-image img {
display: block;
width: 70px;
border-radius: 50%;
}
.comment-text {
padding: 20px;
background: #EEF3FA;
border-radius: 30px;
position: relative;
}
.comment-info:after {
content: '';
height: 0;
width: 0;
position: absolute;
display: block;
border-style: solid;
top: 25px;
border-width: 11px 13px 11px 0;
border-color: transparent #EEF3FA;
left: -12px;
}
.comment-info h4 {
display: inline-block;
color: #1c2045;
text-transform: capitalize;
font-size: 18px;
padding-left: 10px;
font-weight: 600;
}
.comment-info ul {
display: inline-block;
margin: 0 10px;
}
.comment-info ul li {
display: inline-block;
color: #ffa11a;
}
.comment-info p {
display: inline-block;
font-size: 13px;
}
.comment-text-inner {
padding: 10px;
}
.single-comment-box.comment_reply {
padding-left: 83px;
}
.comment-field {
margin-top: 15px;
}
.leave-comment form {
padding: 15px 30px 30px 30px;
background: #EEF3FA none repeat scroll 0 0;
border-radius: 30px;
}
.leave-comment form label {
color: #000;
text-align: left;
display: block;
font-size: 14px;
font-weight: 500;
}
.leave-comment form input {
width: 100%;
padding: 5px 15px;
height: 47px;
border: 0px solid #e3e3e3;
border-radius: 3px;
font-size: 15px;
background: #fff;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.leave-comment form textarea {
width: 100%;
padding: 5px 15px;
height: 140px;
border: 0px solid #e3e3e3;
border-radius: 3px;
font-size: 15px;
background: #fff;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.leave-comment {
margin-top: 50px;
}
.leave-comment h3 {
margin-bottom: 15px
}
.comment-field {
text-align: center
}
.comment-field .theme-btn {
margin-top: 0;
}
/* ===ii)Comment Style #two ===*/
.lango-comment-list {
margin-top: 50px;
}
.single-comment-item {
margin-top: 30px;
}
.single-comment-box {
background: #f9f9f9 none repeat scroll 0 0;
margin-bottom: 10px;
padding: 0 10px 30px;
position: relative;
-webkit-transition: all 300ms ease 0s;
transition: all 300ms ease 0s;
}
.main-comment {
font-size: 14px;
padding: 30px 0 0 100px;
position: relative;
}
.author-image {
border-radius: 50%;
left: 0;
margin-bottom: 20px;
position: absolute;
top: 30px;
}
.author-image img {
border-radius: 50%;
display: block;
width: 80px;
}
.comment-info {
margin-bottom: 10px;
}
.comment-info h4 {
color: #333;
font-size: 17px;
text-transform: capitalize;
}
.comment-info > p {
color: #666;
font-weight: 500;
text-transform: capitalize;
}
.reply {
color: #555;
display: inline-block;
font-size: 14px;
font-style: italic;
font-weight: 600;
margin-top: 5px;
text-decoration: underline;
text-transform: capitalize;
}
.single-comment-box.reply-comment {
margin-left: 100px;
}
.reply:hover{
color: #f26723
}
.lango-leave-comment {
margin-top: 50px;
}
.lango-leave-comment > p{
text-align: center
}
.lango-leave-comment > form {
margin-top: 20px;
text-align: center
}
.lango-leave-comment input[type="text"], .lango-leave-comment input[type="email"] {
background: transparent none repeat scroll 0 0;
border: 1px solid #ddd;
height: 45px;
margin-bottom: 20px;
margin-right: 20px;
margin-top: 0;
padding: 10px 15px;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
width: 45%;
color: #333
}
.lango-leave-comment input[type="email"] {
margin-right: 0;
}
.lango-leave-comment textarea {
border: 1px solid #ddd;
height: 160px;
margin-bottom: 20px;
padding: 5px 15px;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
width: 93%;
color: #333
}
.lango-leave-comment button {
background: #f26723 none repeat scroll 0 0;
border: medium none;
color: #fff;
font-family: "Oswald",sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
padding: 10px 15px;
text-transform: uppercase;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
margin: 0 auto;
display: block
}
.lango-leave-comment button:hover{
background: #212121 none repeat scroll 0 0
}
/* ===========16. Post Design===============*/
/* ===i)Post Style #one ===*/
.single-blog{
margin-bottom: 30px
}
.blog-image img{
width: 100%
}
.blog-text {
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: left;
}
.blog-text > h2 {
font-family: "Oswald",sans-serif;
font-size: 20px;
margin-bottom: 10px;
text-transform: capitalize;
color: #333
}
.blog-meta > p {
color: #888888;
font-style: italic;
}
.blog-text > h2 a:hover{
color: #ff5e18
}
.blog-text > p {
margin-top: 10px;
font-size: 14px;
}
.blog-text > a.bleezy-btn {
margin-top: 20px;
}
.post-1-btn {
background: #01a2a6 none repeat scroll 0 0;
border: 3px solid #01a2a6;
color: #fff;
display: inline-block;
font-family: "Oswald",sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
line-height: 26px;
padding: 5px 10px;
text-transform: uppercase;
}
.post-1-btn:hover{
background: #212121 none repeat scroll 0 0;
border: 3px solid #212121;
color: #fff;
}
/* ===ii)Post Style #two ===*/
.blog-box {
margin-top: 30px
}
.blog-text-left {
padding: 20px 0 0;
}
.date-news {
font-size: 14px;
text-transform: capitalize;
color: #01a2a6;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
}
.blog-text-left h3 {
font-size: 22px;
text-transform: capitalize;
color: #061538;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
line-height: 32px;
margin-top: 10px;
}
.blog-text-right {
text-align: right;
margin-top: 65px;
}
/* ===========17. Grid Css ===============*/
.grid p{
font-size: 14px;
}
.grid h4{
font-size: 22px;
}
/* ===========18. Tooltip Design ===============*/
/* ===i)Tooltip Style #one ===*/
.tooltip-one .toolTip{
color: rgba(0, 0, 0, 0.5);
background: transparent;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 800;
padding: 0;
border: none;
border-radius: 0;
position: relative;
transition: all 0.3s ease;
}
.tooltip-one .toolTip:hover,
.tooltip-one .toolTip:focus{
color: #47c9af;
background: transparent;
outline: none;
}
.tooltip-one .toolTip:before,
.tooltip-one .toolTip:after{
content: attr(data-tip);
color: #01a2a6;
background: #fff;
font-size: 14px;
font-weight: 800;
width: 115px;
white-space: normal;
padding: 13px 10px;
border-radius: 20% 50%/50% 20%;
box-shadow: 0 0 10px -2px rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.tooltip-one .toolTip:after{
content: '';
height: 10px;
width: 10px;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.tooltip-one .toolTip:hover:before,
.tooltip-one .toolTip:hover:after{
opacity: 1;
visibility: visible;
}
.tooltip-one .toolTip.top:before,
.tooltip-one .toolTip.top:after{
transform: translateX(-50%) rotateY(90deg);
position: absolute;
bottom: calc(130% - 4px);
left: 50%;
}
.tooltip-one .toolTip.top:after{
transform: translateX(-50%) rotate(45deg) rotateY(90deg);
bottom: calc(130% - 4px);
}
.tooltip-one .toolTip.top:hover:before{
transform: translateX(-50%) rotateY(0);
bottom: 130%;
}
.tooltip-one .toolTip.top:hover:after{ transform: translateX(-50%) rotate(45deg) rotateY(0); }
.tooltip-one .toolTip.left:before,
.tooltip-one .toolTip.left:after{
transform: translateY(-50%) rotateX(90deg);
position: absolute;
right: calc(140% - 4px);
top: 50%;
}
.tooltip-one .toolTip.left:after{
transform: translateY(-50%) rotate(45deg) rotateX(90deg);
right: calc(140% - 4px);
}
.tooltip-one .toolTip.left:hover:before{
transform: translateY(-50%) rotateX(0);
right: 140%;
}
.tooltip-one .toolTip.left:hover:after{ transform: translateY(-50%) rotate(45deg) rotateX(0); }
.tooltip-one .toolTip.right:before,
.tooltip-one .toolTip.right:after{
transform: translateY(-50%) rotateX(90deg);
position: absolute;
left: calc(140% - 4px);
top: 50%;
}
.tooltip-one .toolTip.right:after{
transform: translateY(-50%) rotate(45deg) rotateX(90deg);
left: calc(140% - 4px);
}
.tooltip-one .toolTip.right:hover:before{
transform: translateY(-50%) rotateX(0);
left: 140%;
}
.tooltip-one .toolTip.right:hover:after{ transform: translateY(-50%) rotate(45deg) rotateX(0); }
.tooltip-one .toolTip.bottom:before,
.tooltip-one .toolTip.bottom:after{
transform: translateX(-50%) rotateY(90deg);
position: absolute;
top: calc(130% - 4px);
left: 50%;
}
.tooltip-one .toolTip.bottom:after{
transform: translateX(-50%) rotate(45deg) rotateY(90deg);
top: calc(130% - 4px);
}
.tooltip-one .toolTip.bottom:hover:before{
transform: translateX(-50%) rotateY(0);
top: 130%;
}
.tooltip-one .toolTip.bottom:hover:after{ transform: translateX(-50%) rotate(45deg) rotateY(0); }
@media only screen and (max-width: 767px){
.tooltip-one .toolTip{ margin: 0 0 20px; }
}
/* ===ii)Tooltip Style #two ===*/
.tooltip-two .toolTip{
color: #273c75;
background: none;
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 20px;
text-transform: capitalize;
padding: 0;
position: relative;
transition: all 0.3s ease;
}
.tooltip-two .toolTip:hover,
.tooltip-two .toolTip:focus{
color: #192a56;
outline: none;
}
.tooltip-two .toolTip:before,
.tooltip-two .toolTip:after{
content: attr(data-tip);
color: #555;
background: #fff;
font-size: 13px;
font-weight: 500;
line-height: 18px;
width: 155px;
padding: 10px 10px;
border: 3px solid #01a2a6;
white-space: pre-wrap;
opacity: 0;
z-index: -100;
transition: all 0.5s ease-in-out;
}
.tooltip-two .toolTip:after{
content: '';
background: linear-gradient(135deg, transparent 50%, #273c75 50%);
padding: 0;
height: 10px;
width: 10px;
border: none;
box-shadow: none;
}
.tooltip-two .toolTip:hover:before,
.tooltip-two .toolTip:hover:after{
opacity: 1;
z-index: 100;
}
.tooltip-two .toolTip.top:before,
.tooltip-two .toolTip.top:after{
transform: translateX(-50%) scale(1.3);
position: absolute;
left: 50%;
bottom: -100%;
}
.tooltip-two .toolTip.top:after{
bottom: calc(100% + 11px);
transform: translateX(-50%) rotate(45deg) scale(0);
}
.tooltip-two .toolTip.top:hover:before{
transform: translateX(-50%) scale(1);
bottom: calc(100% + 15px);
}
.tooltip-two .toolTip.top:hover:after{ transform: translateX(-50%) rotate(45deg) scale(1); }
.tooltip-two .toolTip.bottom:before,
.tooltip-two .toolTip.bottom:after{
transform: translateX(-50%) scale(1.3);
position: absolute;
left: 50%;
top: -100%;
}
.tooltip-two .toolTip.bottom:after{
top: calc(100% + 11px);
transform: translateX(-50%) rotate(-135deg) scale(0);
}
.tooltip-two .toolTip.bottom:hover:before{
transform: translateX(-50%) scale(1);
top: calc(100% + 15px);
}
.tooltip-two .toolTip.bottom:hover:after{ transform: translateX(-50%) rotate(-135deg) scale(1); }
.tooltip-two .toolTip.left:before,
.tooltip-two .toolTip.left:after{
transform: translateY(-50%) scale(1.3);
position: absolute;
top: 50%;
right: -100%;
}
.tooltip-two .toolTip.left:after{
right: calc(100% + 11px);
transform: translateY(-50%) rotate(-45deg) scale(0);
}
.tooltip-two .toolTip.left:hover:before{
transform: translateY(-50%) scale(1);
right: calc(100% + 15px);
}
.tooltip-two .toolTip.left:hover:after{ transform: translateY(-50%) rotate(-45deg) scale(1); }
@media only screen and (max-width: 767px){
.tooltip-two .toolTip{ margin: 0 0 20px; }
}
/* ===iii)Tooltip Style #three ===*/
.tooltip-three .toolTip{
color: #01a2a6;
background: #fff;
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 55px;
height: 55px;
width: 55px;
padding: 0;
border-radius: 50%;
box-shadow: 0 0 0 3px #fff, 0 0 15px rgba(0,0,0,0.2);
position: relative;
transition: all 0.3s ease 0s;
}
.tooltip-three .toolTip:hover,
.tooltip-three .toolTip:focus{
color: #fff;
background: #01a2a6;
outline: none;
}
.tooltip-three .toolTip:before{
content: attr(data-tip);
color: #fff;
background: #fe4a55;
font-size: 13px;
font-weight: 500;
line-height: 18px;
height: 80px;
width: 80px;
padding: 22px 10px;
border-radius: 50%;
white-space: normal;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
.tooltip-three .toolTip:hover:before{
opacity: 1;
visibility: visible;
}
.tooltip-three .toolTip.top:before{
transform: translateX(-50%) scale(0.5);
position: absolute;
left: 50%;
bottom: 0;
}
.tooltip-three .toolTip.top:hover:before{
transform: translateX(-50%) scale(1);
bottom: 85%;
}
.tooltip-three .toolTip.left:before{
transform: translateY(-50%) scale(0.5);
position: absolute;
top: 50%;
right: 0;
}
.tooltip-three .toolTip.left:hover:before{
transform: translateY(-50%) scale(1);
right: 85%;
}
.tooltip-three .toolTip.right:before{
transform: translateY(-50%) scale(0.5);
position: absolute;
top: 50%;
left: 0;
}
.tooltip-three .toolTip.right:hover:before{
transform: translateY(-50%) scale(1);
left: 85%;
}
.tooltip-three .toolTip.bottom:before{
transform: translateX(-50%) scale(0.5);
position: absolute;
left: 50%;
top: 0;
}
.tooltip-three .toolTip.bottom:hover:before{
transform: translateX(-50%) scale(1);
top: 85%;
}
@media only screen and (max-width: 767px){
.tooltip-three .toolTip{ margin: 0 0 20px; }
}
/* ===========19.Alert Design ===============*/
:root {
--infoBlue: #2E86DE;
--infoBlueLight: #EFF6FC;
--successGreen: #329F5D;
--successGreenLight: #EFF7F2;
--errorRed: #C2160A;
--errorRedLight: #FAEDEC;
--warningOrange: #FA7F05;
--warningOrangeLight: #FFF5EB;
--bodyTextColour: #212121;
}
.alert-lango {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
padding: 3rem;
line-height: 1.5;
color: var(--bodyTextColour);
}
.alert-lango .alert {
margin-block: 2.5rem;
padding: 1.25rem;
display: grid;
grid-gap: 1.25rem;
grid-template-columns: max-content auto;
border-radius: 4px;
border-width: 4px;
border-left-style: solid;
transition: 0.12s ease;
position: relative;
overflow: hidden;
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
mix-blend-mode: soft-light;
background: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 56%, rgba(2,0,36,0.1) 82%);
z-index: 1;
}
.alert-lango .icon, .alert-lango .content {
z-index: 2;
}
.alert-lango .icon {
line-height: 1;
}
.alert-title {
font-weight: 700;
margin-bottom: 0.75rem;
}
.alert-content {
max-width: 60ch;
}
&.alert--info {
background-color: var(--infoBlueLight);
border-left-color: var(--infoBlue);
.icon {
color: var(--infoBlue);
}
}
&.alert--success {
background-color: var(--successGreenLight);
border-left-color: var(--successGreen);
.icon {
color: var(--successGreen);
}
}
&.alert--error {
background-color: var(--errorRedLight);
border-left-color: var(--errorRed);
.icon {
color: var(--errorRed);
}
}
&.alert--warning {
background-color: var(--warningOrangeLight);
border-left-color: var(--warningOrange);
.icon {
color: var(--warningOrange);
}
}
}
@media (max-width: 767px) {
.alert {
grid-template-columns: auto;
padding: 1rem;
grid-gap: 0.75rem;
.icon {
font-size: 1.5rem;
}
.alert-title {
margin-bottom: 0.5rem;
}
}
}
/* ===========20. Image Effect ===============*/
/* ===i)Image Effects Style #one ===*/
.image-hover-one {
position: relative;
clear: both;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1000px;
list-style: none;
text-align: center;
}
/* Common style */
.image-hover-one figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 320px;
max-width: 480px;
max-height: 360px;
width: 48%;
height: auto;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.image-hover-one figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
.image-hover-one figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.image-hover-one figure figcaption::before,
.image-hover-one figure figcaption::after {
pointer-events: none;
}
.image-hover-one figure figcaption,
.image-hover-one figure figcaption>a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image-hover-one figure figcaption>a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.image-hover-one figure h2 {
word-spacing: -0.15em;
font-weight: 300;
}
.image-hover-one figure h2 span {
font-weight: 800;
}
.image-hover-one figure h2,
.image-hover-one figure p {
margin: 0;
}
.image-hover-one figure p {
color: #fff;
font-size: 68.5%;
}
/*(i) image hover One */
.image-hover-one-title h4 {
margin-left: 65px;
color: #fff;
}
figure.image-hover-effect-one {
background: -webkit-linear-gradient(-45deg, #EC65B7 0%, #05E0D8 100%);
background: linear-gradient(-45deg, #EC65B7 0%, #05E0D8 100%);
}
figure.image-hover-effect-one img {
opacity: 0.85;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.image-hover-effect-one h2 {
padding: 20px;
width: 50%;
height: 50%;
border: 2px solid #fff;
font-size: 18px;
}
figure.image-hover-effect-one p {
padding: 20px;
width: 50%;
height: 50%;
border: 2px solid #fff;
}
figure.image-hover-effect-one h2 {
padding: 20px;
width: 50%;
height: 50%;
text-align: left;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(10px, 10px, 0);
transform: translate3d(10px, 10px, 0);
}
figure.image-hover-effect-one p {
float: right;
padding: 20px;
text-align: right;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
figure.image-hover-effect-one:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.image-hover-effect-one:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.image-hover-effect-one:hover img {
opacity: 0.6;
}
/*(ii) image hover Two */
.image-hover-two-title h4 {
margin-left: 65px;
color: #333
}
.image-hover-effect-two h2 {
font-size: 18px
}
figure.image-hover-effect-two {
background: -webkit-linear-gradient(-45deg, #000 0%, #fff 100%);
background: linear-gradient(-45deg, #000 0%, #fff 100%);
}
figure.image-hover-effect-two img {
margin: -10px 0 0 -10px;
max-width: none;
width: -webkit-calc(100% + 10px);
width: calc(100% + 10px);
opacity: 0.9;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(10px, 10px, 0);
transform: translate3d(10px, 10px, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.image-hover-effect-two figcaption::before,
figure.image-hover-effect-two p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.image-hover-effect-two figcaption::before {
position: absolute;
right: -100px;
bottom: -100px;
width: 300px;
height: 300px;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 900px rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 0 0 900px rgba(255, 255, 255, 0.2);
content: '';
opacity: 0;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
figure.image-hover-effect-two:hover img {
opacity: 0.6;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.image-hover-effect-two h2 {
text-align: left;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(5px, 5px, 0);
transform: translate3d(5px, 5px, 0);
}
figure.image-hover-effect-two p {
position: absolute;
right: 0;
bottom: 0;
padding: 0 1.5em 1.5em 0;
width: 140px;
text-align: right;
opacity: 0;
-webkit-transform: translate3d(20px, 20px, 0);
transform: translate3d(20px, 20px, 0);
}
figure.image-hover-effect-two:hover figcaption::before {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
figure.image-hover-effect-two:hover h2,
figure.image-hover-effect-two:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*(iii) image hover Three */
.image-hover-three-title h4 {
margin-left: 65px;
color: #333;
}
.image-hover-effect-three h2 {
font-size: 18px
}
figure.image-hover-effect-three {
background: #030c17;
}
figure.image-hover-effect-three img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.image-hover-effect-three figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 2px solid #fff;
box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.4, 1.4, 1);
transform: scale3d(1.4, 1.4, 1);
}
figure.image-hover-effect-three h2 {
margin: 20% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure.image-hover-effect-three p {
padding: 1em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
figure.image-hover-effect-three:hover h2 {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
figure.image-hover-effect-three:hover figcaption::before,
figure.image-hover-effect-three:hover p {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
figure.image-hover-effect-three:hover figcaption {
background-color: rgba(58, 52, 42, 0);
}
figure.image-hover-effect-three:hover img {
opacity: 0.4;
}
/* ===========21. Form Design ===============*/
/*(i)form design one*/
.form-design-one p {
padding-top: 15px;
}
.form-design-one .form-control:focus {
box-shadow: none;
-webkit-box-shadow: none;
-mos-box-shadow: none;
border-color: #ac40ab;
transition: all 1s;
-webkit-transition: all 1s;
-mos-transition: all 1s;
}
/*(ii)form design two*/
.builda-form-two-area {
background: #EEEEEE
}
.form-design-two p {
padding-top: 15px;
}
.form-design-two .form-control {
outline: 0;
border-width: 0 0 1px;
border-color: #CED4DA;
border-radius: 0px;
width: 100%;
}
.form-design-two .form-control:focus {
box-shadow: none;
-webkit-box-shadow: none;
-mos-box-shadow: none;
border-color: #ac40ab;
transition: all 1s;
-webkit-transition: all 1s;
-mos-transition: all 1s;
}
/*(iii)form design three*/
.form-design-three p {
padding-top: 15px;
}
.form-design-three .form-control {
box-shadow: 2px 1px 1px #ac40ab;
outline: 0;
border-width: 0 0 1px;
border-color: #CED4DA;
border-radius: 10px;
width: 100%;
background: #eee;
}
/*(i)Select Option form design One*/
.select-lango select {
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
outline:0;
box-shadow:none;
border:0!important;
background: #5c6664;
background-image: none;
flex: 1;
padding: 0 .5em;
color:#fff;
cursor:pointer;
font-size: 1em;
font-family: 'Open Sans', sans-serif;
}
.select-lango select::-ms-expand {
display: none;
}
.select-lango {
position: relative;
display: flex;
width: 20em;
height: 3em;
line-height: 3;
background: #5c6664;
overflow: hidden;
border-radius: .25em;
}
.select-lango::after {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
padding: 0 1em;
background: #2b2e2e;
cursor:pointer;
pointer-events:none;
transition:.25s all ease;
}
.select-lango:hover::after {
color: #23b499;
}
/*(ii)Select Option form design One*/
/* Job Type Multi Select 1 */
.select2-container--default .select2-selection--single {
height: 37px;
padding:5px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
top: 8px
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
text-transform: capitalize !important;
color: #777 !important
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #01a2a6;
color: #fff;
}
.banner-form-design .form-control:focus {
box-shadow: none;
-webkit-box-shadow: none;
-mos-box-shadow: none;
border-color: #01a2a6 ;
transition: all 1s;
-webkit-transition: all 1s;
-mos-transition: all 1s;
}
/*checkbox*/
.lango-checkbox [type="checkbox"]:checked,
.lango-checkbox [type="checkbox"]:not(:checked) {
position: absolute;
left: -9999px;
}
.lango-checkbox [type="checkbox"]:checked + label,
.lango-checkbox [type="checkbox"]:not(:checked) + label
{
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
.lango-checkbox [type="checkbox"]:checked + label:before,
.lango-checkbox [type="checkbox"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
background: #fff;
}
.lango-checkbox [type="checkbox"]:checked + label:after,
.lango-checkbox [type="checkbox"]:not(:checked) + label:after {
content: '';
width: 8px;
height: 8px;
background: #01a2a6;
position: absolute;
top: 5px;
left: 5px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.lango-checkbox [type="checkbox"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.lango-checkbox [type="checkbox"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
/*radio*/
.lango-radio .custom_radio{
margin: 20px;
}
.lango-radio .custom_radio input[type="radio"]{
display: none;
}
.lango-radio .custom_radio input[type="radio"] + label{
position: relative;
display: inline-block;
padding-left: 1.5em;
margin-right: 2em;
cursor: pointer;
line-height: 1em;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.lango-radio .custom_radio input[type="radio"] + label:before,
.lango-radio .custom_radio input[type="radio"] + label:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
text-align: center;
color: white;
font-family: Times;
border-radius: 50%;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border: 1px solid #ddd;
}
.lango-radio .custom_radio input[type="radio"] + label:before {
-webkit-transition: all .3s ease;
transition: all .3s ease;
box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em white;
}
.lango-radio .custom_radio input[type="radio"] + label:hover:before {
-webkit-transition: all .3s ease;
transition: all .3s ease;
box-shadow: inset 0 0 0 0.3em white, inset 0 0 0 1em #c6c6c6;
}
.lango-radio .custom_radio input[type="radio"]:checked + label:before {
-webkit-transition: all .3s ease;
transition: all .3s ease;
box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em #4CAF50;
}
/*file upload*/
.btn-info1{
background: #01a2a6;
color: #fff;
}