/*
Template: Resort - Responsive HTML5 Template
Author: colorsthemes.com
[Table of Contents]
1. Structure
1-1. General
1-2. Spacing
1-3. Position
1-4. Menu
1-5. Sticky Header
1-6. Search Box
1-7. Logo Center
1-8. Header
1-9. TitleLine
1-10. Pagetitle
1-11. Footer
1-12. Copyright
1-13. Back To Top
1-14. Social Icons
1-15. Right Divider
2. Pages
2-1. Flickity Carousel
2-2. Flickity Hero Slider
2-3. Jarallax
2-4. Infinite Scroll
2-5. Isotope Portfolio
2-6. Timeline
2-7. Team
2-8. Fontawesome
2-9. 404
2-10. Blog
2-11. Contact Form
3. Typography
3-1. Highlight
3-2. Text Color
3-3. Badge
3-4. Dropcap
3-5. List Styles
3-6. Alert
3-7. Button
3-8. Testimonial
3-9. Divider
3-10. Forms
4. Components
4-1. Accordion
4-2. Tabs
4-3. Pricing Box
4-4. Card
4-5. Client
4-6. Iconbox
4-7. Photo Align
4-8. Skill Bar
4-9. Chart Box
4-10. Tooltip
4-11. Fakeloader
5. Background
5-1. Bg Colors
5-2. Bg Parallax
5-3. Bg Half
5-4. Overlay Box
5-5. Bg Overwrite
6. Hover Effect
6-1. Image Hover
6-2. Icon Hover
6-3. Link Hover
6-4. Button Hover
El color azul de fondo es 77a8d9
*/
/* ----------------------------------------------------------------------
1-1. General
---------------------------------------------------------------------- */
body {
position: relative;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 0.9rem;
font-weight: 400;
line-height: 1.5;
color: #4c5566;
text-align: left;
overflow-x: hidden;
background: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 0.5rem;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
line-height: 1.2;
color: #333c40;
}
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }
.lead {
font-size: 1.25rem;
font-weight: 300;
}
a {
color: #77a8d9;
text-decoration: none;
}
a:hover {
color: #252525;
text-decoration: underline;
}
a:focus {
outline: none;
cursor: pointer;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
figure { margin: 0; }
img {
vertical-align: middle;
border-style: none;
max-width: 100%;
height: auto;
}
.img-fluid {
max-width: 100%;
height: auto;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
-ms-overflow-style: scrollbar;
background: #fdfdfd;
border: 1px solid #dddddd;
padding: 20px;
}
::selection {
background: #77a8d9;
color: #ffffff;
}
#boxed-wrap {
position: relative;
width: 100%;
overflow: hidden;
}
.form-control {
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 0.9rem;
line-height: 1.5;
color: #888888;
background-color: #f5f5f5;
border: 1px solid transparent;
font-family: sans-serif;
border-radius: 0;
margin-top: 0px;
margin-bottom: 20px;
}
.form-control:focus {
color: #888888;
background-color: #eeeeee;
outline: none;
border: 1px solid #80bdff;
outline: 0;
box-shadow: none;
}
.custom-select {
width: 100%;
color: #888888;
background-color: #f5f5f5;
border: 1px solid transparent;
border-radius: 0;
}
/* ----------------------------------------------------------------------
1-2. Spacing
---------------------------------------------------------------------- */
@media (min-width: 1400px) {
.container { max-width: 1360px; }
}
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }
.mb-110 { margin-bottom: 110px; }
.mb-120 { margin-bottom: 120px; }
.mb-130 { margin-bottom: 130px; }
.mb-140 { margin-bottom: 140px; }
.mb-150 { margin-bottom: 150px; }
.mb-160 { margin-bottom: 160px; }
.mb-170 { margin-bottom: 170px; }
.mb-180 { margin-bottom: 180px; }
.mb-190 { margin-bottom: 190px; }
.mb-200 { margin-bottom: 200px; }
@media (max-width: 991px) {
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 { margin-bottom: 20px; }
.mb--20 { margin-bottom: -20px; }
}
/* ----------------------------------------------------------------------
1-3. Position
---------------------------------------------------------------------- */
/* Margin Top Position */
.mt {
z-index: 5;
border: 10px solid #ffffff;
background: #ffffff;
}
.mt-10 { margin-top: -10px; }
.mt-20 { margin-top: -20px; }
.mt-30 { margin-top: -30px; }
.mt-40 { margin-top: -40px; }
.mt-50 { margin-top: -50px; }
.mt-60 { margin-top: -60px; }
.mt-70 { margin-top: -70px; }
.mt-80 { margin-top: -80px; }
.mt-90 { margin-top: -90px; }
.mt-100 { margin-top: -100px; }
.mt-110 { margin-top: -110px; }
.mt-120 { margin-top: -120px; }
.mt-130 { margin-top: -130px; }
.mt-140 { margin-top: -140px; }
.mt-150 { margin-top: -150px; }
/* ----------------------------------------------------------------------
1-4. Menu
---------------------------------------------------------------------- */
/* Menu Container */
.navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0rem 1rem;
background-color: transparent;
}
.navbar > .container, .navbar > .container-fluid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
}
/* Brand */
.navbar-brand {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-brand:focus, .navbar-brand:hover { text-decoration: none; }
/* Mobile Menu Button */
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
border-color: rgba(0,0,0,0.1);
border: 1px solid transparent;
color: rgba(0,0,0,0.5);
border-radius: 0.25rem;
cursor: pointer;
}
.navbar-toggler:focus, .navbar-toggler:hover { text-decoration: none; }
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* Main Menu */
.navbar-collapse {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.collapse { display: none; }
.collapse.show { display: block; }
.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-nav .nav-link {
padding-right: 0;
padding-left: 0;
display: block;
padding: 1.125rem 0.5rem;
color: #333c40;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.2rem;
padding-left: 0.2rem;
}
}
@media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 1.2rem;
padding-left: 1.2rem;
}
}
.navbar-nav .nav-link:focus, .navbar-nav .nav-link:hover {
text-decoration: none;
color: #77a8d9;
}
.navbar-nav .nav-link.disabled { color: rgba(0,0,0,0.3); }
.navbar-nav .show > .nav-link, .navbar-nav .active > .nav-link, .navbar-nav .nav-link.show, .navbar-nav .nav-link.active { color: #77a8d9; }
/* Dropdown */
.dropup, .dropdown { position: relative; }
.dropdown-toggle::after, .dropup .dropdown-toggle::after {
display: none;
border: none;
}
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
.dropdown-menu {
position: absolute;
top: 95%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0;
margin: 0.125rem 0 0;
font-size: 14px;
color: #ffffff;
text-align: left;
list-style: none;
background-color: #333333;
border: 1px solid transparent;
background-clip: padding-box;
border-radius: 0;
}
.dropdown-menu-right {
right: 0 !important;
left: auto !important;
}
.dropup .dropdown-menu {
margin-top: 0;
margin-bottom: 0.125rem;
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.625rem 0.9375rem;
clear: both;
font-weight: 400;
color: #dddddd;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0;
border-radius: 0;
}
.dropdown-item i { margin-right: 5px; }
.dropdown-item:focus, .dropdown-item:hover {
color: #ffffff;
text-decoration: none;
background-color: #77a8d9;
border-radius: 0px;
}
.dropdown-item.active, .dropdown-item:active {
color: #ffffff;
text-decoration: none;
background-color: #77a8d9;
}
.dropdown-menu.show { display: block; }
.dropdown-header {
display: block;
padding: 0.5rem 1.5rem;
margin-bottom: 0;
font-size: 0.875rem;
color: #868e96;
white-space: nowrap;
}
@media (min-width: 992px) {
.dropdown-menu:after {
position: absolute;
content: '';
top: -14px;
left: 30px;
right: auto;
margin: auto;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #333333;
border-left: 7px solid transparent;
display: block;
}
.dropdown-searchbox .dropdown-menu:after { display: none; }
.dropdown-item { border-bottom: 1px solid rgba(0,0,0,0.3); }
.dropdown-item:last-child { border-bottom: 0; }
.dropdown-divider {
height: 0;
margin: 0;
overflow: hidden;
border-top: 1px solid rgba(0,0,0,0.7);
}
}
/* Mega Menu */
.navbar .container { position: relative; }
.yamm-fw { position: static !important; }
.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
@media (min-width: 992px) {
.yamm-fw .dropdown-menu {
position: absolute;
top: 95%;
}
.yamm-fw .dropdown-menu:after { display: none; }
.yamm-fw .yamm-content .dropdown-item {
border-bottom: none;
white-space: normal !important;
}
.yamm-fw .yamm-content {
padding: 40px 40px 30px;
color: #ffffff;
}
.yamm-fw .yamm-content h4 { color: #ffffff; }
.yamm-fw .yamm-content ul li a {
padding: 5px 5px;
display: block;
color: #ffffff;
}
.yamm-fw .yamm-content ul li:hover { background: #77a8d9; }
.yamm-fw .yamm-content ul li:hover i, .yamm-fw .yamm-content ul li:hover a, .yamm-fw .yamm-content ul li a:hover {
color: #ffffff;
text-decoration: none;
}
.yamm-fw .yamm-content .icon-arrow-list li a { color: #ffffff; }
}
@media (max-width: 991px) {
.yamm-fw .yamm-content {
color: #ffffff;
padding: 10px 10px;
}
.yamm-fw .yamm-content h4 { color: #ffffff; }
.yamm-fw .yamm-content ul li a {
display: block;
color: #ffffff;
text-decoration: none;
}
.yamm-fw .yamm-content ul li:hover i, .yamm-fw .yamm-content ul li:hover a, .yamm-fw .yamm-content ul li a:hover {
color: #77a8d9;
text-decoration: none;
}
.yamm-fw .yamm-content .col-lg-3 { padding: 0 30px; }
}
/* Dropdown - Hover Effect */
@media (min-width: 992px) {
.nav-item > .dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.nav-item:hover > .dropdown-menu {
display: block;
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.nav-item .dropdown-menu:hover {
-webkit-transform: none;
transform: none;
}
}
/* ----------------------------------------------------------------------
1-5. Sticky Header
---------------------------------------------------------------------- */
@media (min-width: 992px) {
.sticked .navbar {
background: rgba(255,255,255,1.0);
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
}
@media (max-width: 991px) {
#header { position: relative !important; }
}
/* ----------------------------------------------------------------------
1-6. Search Box
---------------------------------------------------------------------- */
/* Search Box */
.form-inline {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center;
}
.form-inline .form-control {
display: inline-block;
vertical-align: middle;
margin: 0;
border-right: none;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
padding: 10px;
border: none;
}
.form-inline .form-control:focus { border-right: none; }
.form-inline .btn {
display: inline-block;
width: auto;
vertical-align: middle;
margin: 0;
font-size: 0.9rem;
line-height: 1;
border-radius: 0px;
padding: 13.5px;
border: none;
}
.form-inline .btn:hover, .form-inline .btn:focus, .form-inline .btn:active, .form-inline .btn.active { box-shadow: none; }
.dropdown-searchbox {
margin: 0;
padding: 0;
}
.dropdown2-searchbox {
margin: 0;
padding: 0;
}
.dropdown-searchbox .form-control {
margin-bottom: 0px;
border-radius: 0px;
}
.dropdown-searchbox .dropdown-menu {
background: #ffffff;
padding: 20px;
width: 280px;
border-radius: 0px;
-webkit-box-shadow: 0px 0px 1px #aaaaaa;
box-shadow: 0px 0px 1px #aaaaaa;
}
.dropdown2-searchbox .dropdown-menu {
background: #333333;
padding: 20px;
width: 180px;
border-radius: 0px;
-webkit-box-shadow: 0px 0px 1px #aaaaaa;
box-shadow: 0px 0px 1px #aaaaaa;
}
@media (max-width: 991px) {
#header .dropdown-searchbox { display: none; }
}
/* Search Result */
.search-results { min-height: 500px; }
/* ----------------------------------------------------------------------
1-7. Logo Center
---------------------------------------------------------------------- */
#logo-center {
background: #ffffff;
padding: 30px 0;
}
.logo-center {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
}
.logo-center img {
display: inline-block;
float: none;
}
.no-logo { height: 60px; }
/* ----------------------------------------------------------------------
1-8. Header
---------------------------------------------------------------------- */
#header-wrap { position: relative; }
#header {
position: relative;
z-index: 300;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
background-color: transparent;
}
/* ----------------------------------------------------------------------
1-9. TitleLine
---------------------------------------------------------------------- */
/* TitleLine */
.titleline {
position: relative;
max-width: 50px;
border-top: 1px solid #77a8d9;
margin: 0 auto 20px 0;
}
.titleline-center {
position: relative;
max-width: 50px;
border-top: 1px solid #77a8d9;
margin: 0 auto 20px;
}
.titleline-footer {
position: relative;
max-width: 50px;
border-top: 1px solid #77a8d9;
margin: 0 auto 20px 0;
}
.titleline-icon {
position: relative;
max-width: 100px;
border-top: 1px solid #77a8d9;
margin: 20px auto 20px;
}
.titleline-icon:after {
position: absolute;
top: -10px;
left: 0;
right: 0;
margin: auto;
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
content: '\f141';
font-size: 1.25rem;
line-height: 1;
color: #77a8d9;
text-align: center;
vertical-align: middle;
width: 40px;
height: 20px;
background-color: #ffffff;
}
/* ----------------------------------------------------------------------
1-10. Pagetitle
---------------------------------------------------------------------- */
.pagetitle {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 100px;
background: url("../images/bg/1.jpg");
}
.pagetitle.pagetitle2 { background: url("../images/bg/2.jpg"); }
.pagetitle.pagetitle3 { background: url("../images/bg/3.jpg"); }
.pagetitle.pagetitle4 { background: url("../images/bg/4.jpg"); }
.pagetitle.pagetitle5 { background: url("../images/bg/5.jpg"); }
.pagetitle-overlay {
width: 100%;
height: 100%;
color: #ffffff;
vertical-align: middle;
background-color: #333333;
background-color: rgba(0,0,0,0.7);
min-height: 60px;
margin: 0 auto;
padding-top: 40px;
padding-bottom: 20px;
}
.pagetitle h2 {
text-align: left;
font-weight: normal;
color: #eeeeee;
}
/* Pagetitle Breadcrumb */
.pagetitle .breadcrumb {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
list-style: none;
background-color: transparent;
border-radius: 0.25rem;
}
.pagetitle .breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
padding-left: 0.5rem;
color: #eeeeee;
content: "/";
}
.pagetitle .breadcrumb-item.active { color: #eeeeee; }
.pagetitle .breadcrumb-item a:hover { color: #ffffff; }
/* ----------------------------------------------------------------------
1-11. Footer
---------------------------------------------------------------------- */
/* Footer */
#footer {
position: relative;
width: 100%;
min-height: 100px;
color: #aaaaaa;
background: #293033;
padding: 100px 0 90px;
margin: 0 auto;
z-index: 0;
overflow: hidden;
}
#footer h4 { color: #aaaaaa; }
.footer-logo a img {
max-width: 100%;
height: auto;
margin-bottom: 15px;
}
.footer-list {
padding: 0;
list-style: none;
}
.footer-list li { padding: 8px 2px; }
.footer-list li i {
margin-right: 8px;
color: #aaaaaa;
}
.footer-list li span {
color: #aaaaaa;
font-weight: 700;
}
.footer-list li a { color: #ffffff; }
.footer-list li a:hover {
color: #77a8d9;
text-decoration: none;
}
/* Footer Links */
.footer-links {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
color: #aaaaaa;
}
.footer-links li { margin-right: 10px; }
.footer-links li i { margin-right: 8px; }
.footer-links li a {
text-decoration: none;
color: #dddddd;
}
.footer-links li a:hover, .copyright li a:focus {
cursor: pointer;
text-decoration: none;
color: #77a8d9;
}
/* ----------------------------------------------------------------------
1-12. Copyright
---------------------------------------------------------------------- */
#copyright {
position: relative;
width: 100%;
height: auto;
background: #262b2e;
color: #aaaaaa;
padding: 30px 0px 30px;
}
.copyright {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
color: #aaaaaa;
}
.copyright li { margin-right: 10px; }
.copyright li i { margin-right: 8px; }
.copyright li a {
text-decoration: none;
color: #dddddd;
}
.copyright li a:hover, .copyright li a:focus {
cursor: pointer;
text-decoration: none;
color: #77a8d9;
}
/* ----------------------------------------------------------------------
1-13. Back To Top
---------------------------------------------------------------------- */
#back-to-top {
display: none;
position: fixed;
right: 22px;
bottom: 22px;
z-index: 999999;
text-indent: -9999px;
background-image: url("../images/assets/backtotop.png");
background-repeat: no-repeat;
background-color: #293033;
background-position: left top;
width: 40px;
height: 40px;
border-radius: 0px;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#back-to-top a {
display: block;
width: 40px;
height: 40px;
}
#back-to-top:hover, #back-to-top:focus { background-color: #77a8d9; }
/* ----------------------------------------------------------------------
1-14. Social Icons
---------------------------------------------------------------------- */
.social-icons {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
}
.social-icons > li {
vertical-align: middle;
margin-right: 2px;
}
.social-icons > li a {
display: table;
text-decoration: none;
}
.social-icons > li a i {
display: table-cell;
text-align: center;
vertical-align: middle;
text-shadow: none;
background: rgba(0,0,0,0.3);
color: #ffffff;
font-size: 16px;
line-height: 1;
padding: 12.5px;
width: 41px;
height: 41px;
border: none;
margin: 0;
border-radius: 50%;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.social-icons > li a i:hover {
border: none;
background: #77a8d9;
color: #ffffff;
}
/* Brand */
.social-icons > li a i:hover { background: #000000; }
.social-icons > li a i.fa-500px:hover { background: #58a9de; }
.social-icons > li a i.fa-amazon:hover { background: #ff9900; }
.social-icons > li a i.fa-android:hover { background: #8ec047; }
.social-icons > li a i.fa-apple:hover { background: #B9BFC1; }
.social-icons > li a i.fa-bitbucket:hover { background: #243759; }
.social-icons > li a i.fa-bitbucket-square:hover { background: #243759; }
.social-icons > li a i.fa-cc-paypal:hover { background: #009cde; }
.social-icons > li a i.fa-chrome:hover { background: #757575; }
.social-icons > li a i.fa-delicious:hover { background: #020202; }
.social-icons > li a i.fa-deviantart:hover { background: #c5d200; }
.social-icons > li a i.fa-digg:hover { background: #1d1d1b; }
.social-icons > li a i.fa-dribbble:hover { background: #f665a6; }
.social-icons > li a i.fa-dropbox:hover { background: #7dbce4; }
.social-icons > li a i.fa-drupal:hover { background: #00598e; }
.social-icons > li a i.fa-facebook:hover { background: #425f9b; }
.social-icons > li a i.fa-facebook-f:hover { background: #425f9b; }
.social-icons > li a i.fa-facebook-official:hover { background: #425f9b; }
.social-icons > li a i.fa-facebook-square:hover { background: #425f9b; }
.social-icons > li a i.fa-firefox:hover { background: #484848; }
.social-icons > li a i.fa-flickr:hover { background: #f56ab2; }
.social-icons > li a i.fa-foursquare:hover { background: #0072b1; }
.social-icons > li a i.fa-github:hover { background: #221e1b; }
.social-icons > li a i.fa-github-alt:hover { background: #221e1b; }
.social-icons > li a i.fa-github-square:hover { background: #221e1b; }
.social-icons > li a i.fa-google:hover { background: #4285f4; }
.social-icons > li a i.fa-google-plus:hover { background: #dd4b39; }
.social-icons > li a i.fa-google-plus-square:hover { background: #dd4b39; }
.social-icons > li a i.fa-houzz:hover { background: #7CC04B; }
.social-icons > li a i.fa-instagram:hover { background: #5080a8; }
.social-icons > li a i.fa-lastfm:hover { background: #d41316; }
.social-icons > li a i.fa-lastfm-square:hover { background: #d41316; }
.social-icons > li a i.fa-linkedin:hover { background: #017fb1; }
.social-icons > li a i.fa-linkedin-square:hover { background: #017fb1; }
.social-icons > li a i.fa-odnoklassniki:hover { background: #f48420; }
.social-icons > li a i.fa-odnoklassniki-square:hover { background: #f48420; }
.social-icons > li a i.fa-openid:hover { background: #f78c40; }
.social-icons > li a i.fa-opera:hover { background: #FF1B2D; }
.social-icons > li a i.fa-paypal:hover { background: #009cde; }
.social-icons > li a i.fa-pinterest:hover { background: #9b191e; }
.social-icons > li a i.fa-pinterest-p:hover { background: #9b191e; }
.social-icons > li a i.fa-pinterest-square:hover { background: #9b191e; }
.social-icons > li a i.fa-qq:hover { background: #4297d3; }
.social-icons > li a i.fa-rss:hover { background: #31c5ed; }
.social-icons > li a i.fa-skype:hover { background: #31c5ed; }
.social-icons > li a i.fa-slideshare:hover { background: #4ba3a6; }
.social-icons > li a i.fa-soundcloud:hover { background: #ff3a00; }
.social-icons > li a i.fa-spotify:hover { background: #7bb342; }
.social-icons > li a i.fa-stack-exchange:hover { background: #2f2f2f; }
.social-icons > li a i.fa-stack-overflow:hover { background: #FD9827; }
.social-icons > li a i.fa-stumbleupon:hover { background: #EB4823; }
.social-icons > li a i.fa-stumbleupon-circle:hover { background: #EB4823; }
.social-icons > li a i.fa-trello:hover { background: #0079bf; }
.social-icons > li a i.fa-tumblr:hover { background: #32506d; }
.social-icons > li a i.fa-tumblr-square:hover { background: #32506d; }
.social-icons > li a i.fa-twitter:hover { background: #4facf2; }
.social-icons > li a i.fa-twitter-square:hover { background: #4facf2; }
.social-icons > li a i.fa-vimeo:hover { background: #45bcff; }
.social-icons > li a i.fa-vimeo-square:hover { background: #45bcff; }
.social-icons > li a i.fa-vine:hover { background: #00b389; }
.social-icons > li a i.fa-vk:hover { background: #45668e; }
.social-icons > li a i.fa-wechat:hover { background: #09b507; }
.social-icons > li a i.fa-whatsapp:hover { background: #20B038; }
.social-icons > li a i.fa-windows:hover { background: #00BDF6; }
.social-icons > li a i.fa-wordpress:hover { background: #21759b; }
.social-icons > li a i.fa-xing:hover { background: #005a60; }
.social-icons > li a i.fa-xing-square:hover { background: #005a60; }
.social-icons > li a i.fa-yahoo:hover { background: #7B0099; }
.social-icons > li a i.fa-youtube:hover { background: #db3b3a; }
.social-icons > li a i.fa-youtube-play:hover { background: #db3b3a; }
.social-icons > li a i.fa-youtube-square:hover { background: #db3b3a; }
/* Round */
.social-icons li i {
position: relative;
z-index: 1;
display: inline-block;
cursor: pointer;
overflow: hidden;
-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.social-icons li i:before {
line-height: 1;
display: block;
}
.social-icons li i:hover:before {
-webkit-animation: toTopFromBottom 0.5s forwards;
animation: toTopFromBottom 0.5s forwards;
}
@-webkit-keyframes toTopFromBottom { 49% {
-webkit-transform: translateY(-100%);
}
50% {
opacity: 0;
-webkit-transform: translateY(100%);
}
51% {
opacity: 1;
}
}
@keyframes toTopFromBottom { 49% {
transform: translateY(-100%);
}
50% {
opacity: 0;
transform: translateY(100%);
}
51% {
opacity: 1;
}
}
/* Topbar */
#topbar .social-icons > li {
margin-right: 0;
margin-left: 0;
}
#topbar .social-icons > li a i { border: none; }
#topbar .social-icons > li a i:hover { border: none; }
/* Content */
.social-icons > li a i {
background: #ffffff;
color: #4c5566;
border: none;
}
.social-icons > li a i:hover {
background: #77a8d9;
color: #ffffff;
border: none;
}
/* Footer */
#footer .social-icons > li a i {
border: none;
background: #222222;
color: #ffffff;
}
#footer .social-icons > li a i:hover {
border: none;
background: #77a8d9;
}
/* Copyright */
#copyright .social-icons > li {
margin-right: 0;
margin-left: 0;
}
#copyright .social-icons > li a i { border: none; }
#copyright .social-icons > li a i:hover { border: none; }
/* ----------------------------------------------------------------------
1-15. Right Divider
---------------------------------------------------------------------- */
/* Right Divider */
.r-divider > li:not(:last-child) {
position: relative;
padding-right: 10px !important;
}
.r-divider > li:not(:last-child):before {
position: absolute;
top: -1px;
right: -2px;
color: #aaaaaa;
content: "|";
}
#topbar .r-divider > li:not(:last-child):before {
right: -2px;
color: #aaaaaa;
}
#copyright .r-divider > li:not(:last-child):before {
right: -5px;
color: #aaaaaa;
}
#header-wrap-full #topbar .r-divider > li:not(:last-child):before { color: #ffffff; }
/* ----------------------------------------------------------------------
2-1. Flickity Carousel
---------------------------------------------------------------------- */
/* Default */
.flickity-enabled { position: relative; }
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
.flickity-enabled.is-draggable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* Arrows */
.flickity-prev-next-button {
position: absolute;
top: -30px;
width: 30px;
height: 30px;
cursor: pointer;
border: 1px solid #77a8d9;
background: transparent;
border-radius: 0;
}
.flickity-prev-next-button:hover { background: #77a8d9; }
.flickity-prev-next-button:focus {
outline: none;
box-shadow: 0 0 0 5px #09F;
}
.flickity-prev-next-button:active { opacity: 0.6; }
.flickity-prev-next-button.previous { right: 32px; }
.flickity-prev-next-button.next { right: 0; }
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 0;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 0;
}
.flickity-prev-next-button:disabled {
cursor: auto;
opacity: 0.3;
}
.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow { fill: #77a8d9; }
.flickity-prev-next-button:hover .arrow { fill: #ffffff; }
/* Dots */
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -20px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
border: 1px solid #77a8d9;
background: transparent;
border-radius: 0%;
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected { opacity: 1; }
/* Basic */
.flickity, .flickity-team, .flickity-client, .flickity-testimonial {
position: relative;
padding: 0;
margin: 0 0 50px;
}
.flickity .cell, .flickity-team .cell, .flickity-client .cell, .flickity-testimonial .cell {
width: 100%;
height: auto;
margin-right: 10px; /* separacion imagenes*/
}
/* LazyLoad */
.flickity-lazyload {
position: relative;
padding: 0;
margin: 0 0 50px;
}
.flickity-lazyload .cell {
width: 100%;
height: auto;
margin-right: 0px;
}
.lazyload-image {
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.lazyload-image.flickity-lazyloaded, .lazyload-image.flickity-lazyerror { opacity: 1; }
.image-hover .lazyload-image { opacity: 0; }
.image-hover .lazyload-image.flickity-lazyloaded, .image-hover .lazyload-image.flickity-lazyerror { opacity: 1; }
/* Parallax Horizontal */
.flickity-parallax {
position: relative;
padding: 0;
margin: 0 0 50px;
}
.flickity-parallax .cell {
margin-right: 10px;
overflow: hidden;
}
.flickity-parallax .cell img { display: block; }
/* Sync */
.flickity-sync {
position: relative;
margin: 0;
padding: 0;
margin-right: 10px;
margin-bottom: 10px;
}
.flickity-sync .cell, .flickity-nav .cell {
width: 100%;
height: auto;
}
.flickity-nav {
position: relative;
margin: 0;
padding: 0;
margin-right: 10px;
margin-bottom: 50px;
}
.flickity-nav .cell {
width: 130px;
height: 130px;
margin-right: 10px;
}
/* Sync Vertical */
.flickity-wrapper {
position: relative;
padding: 0;
margin: 0 0 50px;
}
.flickity-vertical-sync {
position: relative;
height: auto;
margin-bottom: 50px;
display: inline-block;
width: 85%;
vertical-align: top;
}
.flickity-vertical-sync .cell {
width: 33.3%;
height: auto;
background: #ffffff;
border-radius: 0;
}
.flickity-vertical-nav {
position: relative;
margin-left: 0px;
max-height: 305px;
overflow-y: scroll;
display: inline-block;
width: 14%;
height: auto;
vertical-align: top;
}
.flickity-vertical-nav .cell {
margin-bottom: 10px;
cursor: pointer;
width: 100%;
height: auto;
}
@media (max-width: 991px) {
.flickity-vertical-sync .cell { width: 100%; }
}
@media (max-width: 767px) {
.flickity-vertical-nav { width: 13%; }
}
/* Columns */
.flickity-1 .cell { width: 100%; }
.flickity-2 .cell { width: 50%; }
.flickity-3 .cell { width: 33.3%; }
.flickity-4 .cell { width: 25%; }
.flickity-5 .cell { width: 20%; }
.flickity-6 .cell { width: 16.6%; }
.flickity-7 .cell { width: 14.2%; }
.flickity-8 .cell { width: 12.5%; }
.flickity-9 .cell { width: 11.1%; }
.flickity-10 .cell { width: 10%; }
.flickity-11 .cell { width: 9%; }
.flickity-12 .cell { width: 8.3%; }
@media (max-width: 991px) {
.flickity-1 .cell { width: 100%; }
.flickity-2 .cell { width: 50%; }
.flickity-3 .cell { width: 50%; }
.flickity-4 .cell, .flickity-5 .cell, .flickity-6 .cell, .flickity-7 .cell, .flickity-8 .cell, .flickity-9 .cell, .flickity-10 .cell, .flickity-11 .cell, .flickity-12 .cell { width: 33.3%; }
}
@media (max-width: 767px) {
.flickity-1 .cell { width: 100%; }
.flickity-2 .cell, .flickity-3 .cell, .flickity-4 .cell, .flickity-5 .cell, .flickity-6 .cell, .flickity-7 .cell, .flickity-8 .cell, .flickity-9 .cell, .flickity-10 .cell, .flickity-11 .cell, .flickity-12 .cell { width: 50%; }
}
/* ----------------------------------------------------------------------
2-2. Flickity Hero Slider
---------------------------------------------------------------------- */
/* Slider */
.flkty-hero-static, .flkty-hero-slider {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: auto;
overflow: hidden;
}
.flkty-hero-static .cell, .flkty-hero-slider .cell {
position: relative;
width: 100%;
height: 600px;
margin: 0;
padding: 0;
background-image: none;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
cursor: default;
}
/* Static Background image */
.slider600-1 { background-image: url("../images/slider/slider600-1.jpg") !important; }
.slider600-2 { background-image: url("../images/slider/slider600-2.jpg") !important; }
.slider600-3 { background-image: url("../images/slider/slider600-3.jpg") !important; }
.flkty-container {
position: relative;
width: 100%;
height: 600px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.flkty-container { max-width: 540px; }
}
@media (min-width: 768px) {
.flkty-container { max-width: 720px; }
}
@media (min-width: 992px) {
.flkty-container { max-width: 960px; }
}
@media (min-width: 1200px) {
.flkty-container { max-width: 1140px; }
}
@media (min-width: 1400px) {
.flkty-container { max-width: 1360px; }
}
/* Slider Arrows */
.flkty-hero-slider .flickity-prev-next-button {
position: absolute;
top: 50%;
width: 100px;
height: 100px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 0;
-webkit-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flkty-hero-slider .flickity-prev-next-button:hover {
background: rgba(255,255,255,0.5);
opacity: 1 !important;
}
.flkty-hero-slider .flickity-prev-next-button:focus {
outline: none;
box-shadow: 0 0 0 5px #09F;
}
.flkty-hero-slider:hover .flickity-prev-next-button { opacity: 0.3; }
.flkty-hero-slider .flickity-prev-next-button:active { opacity: 0.6; }
.flkty-hero-slider .flickity-prev-next-button.previous { left: 0; }
.flkty-hero-slider .flickity-prev-next-button.next { right: 0; }
.flkty-hero-slider .flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 0;
}
.flkty-hero-slider .flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 0;
}
.flkty-hero-slider .flickity-prev-next-button:disabled {
cursor: auto;
opacity: 0.3;
}
.flkty-hero-slider .flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flkty-hero-slider .flickity-prev-next-button .arrow { fill: #ffffff; }
/* Slider Arrows Cursor */
.flkty-hero-slider .flickity-prev-next-button.previous {
width: 10%;
height: 100%;
cursor: url("../images/assets/slider-prev.png"), crosshair;
}
.flkty-hero-slider .flickity-prev-next-button.next {
width: 10%;
height: 100%;
cursor: url("../images/assets/slider-next.png"), crosshair;
}
.flkty-hero-slider .flickity-prev-next-button:hover { background: transparent; }
.flkty-hero-slider .flickity-prev-next-button svg { display: none; }
/* Slider Dots */
.flkty-hero-slider .flickity-page-dots {
position: absolute;
width: 100%;
bottom: 25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flkty-hero-slider .flickity-rtl .flickity-page-dots { direction: rtl; }
.flkty-hero-slider .flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
border: 1px solid #ffffff;
background: transparent;
border-radius: 0%;
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
opacity: 1;
}
/* Background Fade Slide */
.bg-fadein .flickity-slider { transform: none !important; }
.bg-fadein .cell {
left: 0 !important;
z-index: -1;
opacity: 0.3;
-webkit-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.bg-fadein .cell.is-selected {
z-index: 0;
opacity: 1;
}
/* Caption & Image Position */
.flkty-position {
position: absolute;
top: auto;
bottom: auto;
left: auto;
right: auto;
z-index: 10;
text-align: center;
opacity: 0;
}
.flkty-position img {
max-width: 100% !important;
height: auto;
}
.caption-wrap { display: block; }
@media (max-width: 991px) {
.flkty-position {
top: auto;
bottom: auto;
left: 0px !important;
right: 0px !important;
margin: auto !important;
text-align: center !important;
}
.mobile-hidden { display: none; }
}
/* Caption */
.large-white, .large-black, .large-theme {
font-family: 'Open Sans', sans-serif;
display: inline-block;
font-size: 5.0rem;
line-height: 1.6;
font-weight: 900;
padding: 0px 15px;
margin: 0;
}
.medium-white, .medium-black, .medium-theme {
font-family: 'Open Sans', sans-serif;
display: inline-block;
font-size: 3.125rem;
line-height: 1.6;
font-weight: 900;
padding: 0px 15px;
margin: 0;
}
.small-white, .small-black, .small-theme {
display: inline-block;
font-size: 1.125rem;
line-height: 1.6;
padding: 9px 15px;
margin: 0;
}
.large-white, .medium-white, .small-white { color: #ffffff; }
.large-black, .medium-black, .small-black { color: #252525; }
.large-theme, .medium-theme, .small-theme { color: #77a8d9; }
@media (max-width: 991px) {
.large-white, .large-black, .large-theme { font-size: 4.0rem; }
.medium-white, .medium-black, .medium-theme { font-size: 3.0rem; }
.small-white, .small-black, .small-theme { font-size: 1.0rem; }
}
@media (max-width: 767px) {
.large-white, .large-black, .large-theme { font-size: 2.5rem; }
.medium-white, .medium-black, .medium-theme { font-size: 2.5rem; }
.small-white, .small-black, .small-theme { font-size: 0.9rem; }
}
.caption-shadow { text-shadow: 0px 0px 3px rgba(0,0,0,0.3); }
/* Caption Bg */
.flkty-position .bg-white, .flkty-position .bg-gray, .flkty-position .bg-black, .flkty-position .bg-pink, .flkty-position .bg-blue, .flkty-position .bg-aqua, .flkty-position .bg-green, .flkty-position .bg-olive, .flkty-position .bg-yellow, .flkty-position .bg-orange, .flkty-position .bg-red, .flkty-position .bg-theme {
margin-left: 15px;
margin-right: auto;
}
.flkty-position.text-right .bg-white, .flkty-position.text-right .bg-gray, .flkty-position.text-right .bg-black, .flkty-position.text-right .bg-pink, .flkty-position.text-right .bg-blue, .flkty-position.text-right .bg-aqua, .flkty-position.text-right .bg-green, .flkty-position.text-right .bg-olive, .flkty-position.text-right .bg-yellow, .flkty-position.text-right .bg-orange, .flkty-position.text-right .bg-red, .flkty-position.text-right .bg-theme {
margin-left: auto;
margin-right: 15px;
}
@media (max-width: 991px) {
.flkty-position .bg-white, .flkty-position .bg-gray, .flkty-position .bg-black, .flkty-position .bg-pink, .flkty-position .bg-blue, .flkty-position .bg-aqua, .flkty-position .bg-green, .flkty-position .bg-olive, .flkty-position .bg-yellow, .flkty-position .bg-orange, .flkty-position .bg-red, .flkty-position .bg-theme {
margin-left: 15px;
margin-right: 15px;
}
}
/* Btn */
.caption-wrap .btn {
display: inline-block;
margin-top: 25px;
margin-bottom: 15px;
color: #ffffff !important;
border-radius: 5px;
}
.flkty-position .btn {
margin-left: 15px;
margin-right: auto;
}
.flkty-position.text-right .btn {
margin-left: auto;
margin-right: 15px;
}
.flkty-position.text-center .btn {
margin-left: auto;
margin-right: auto;
}
/* Caption Animation */
.is-selected .flkty-fadeIn {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeIn;
}
.is-selected .flkty-fadeInUp {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInUp;
}
.is-selected .flkty-fadeInDown {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInDown;
}
.is-selected .flkty-fadeInLeft {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInLeft;
}
.is-selected .flkty-fadeInRight {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInRight;
}
.is-selected .flkty-bounce {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: bounce;
transform-origin: center bottom;
}
.is-selected .flkty-bounceIn {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: bounceIn;
}
.is-selected .flkty-bounceInUp {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: bounceInUp;
}
.is-selected .flkty-bounceInDown {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: bounceInDown;
}
.is-selected .flkty-bounceInLeft {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: bounceInLeft;
}
.is-selected .flkty-bounceInRight {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: bounceInRight;
}
.is-selected .flkty-zoomIn {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: zoomIn;
}
.is-selected .flkty-zoomInUp {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: zoomInUp;
}
.is-selected .flkty-zoomInDown {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: zoomInDown;
}
.is-selected .flkty-rotateIn {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: rotateIn;
}
.is-selected .flkty-jackInTheBox {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: jackInTheBox;
}
.is-selected .flkty-fadeInUpSmall {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInUpSmall;
}
.is-selected .flkty-fadeInDownSmall {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInDownSmall;
}
.is-selected .flkty-fadeInLeftSmall {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInLeftSmall;
}
.is-selected .flkty-fadeInRightSmall {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: fadeInRightSmall;
}
/* Overlay */
.overlay-black:before, .overlay-white:before, .overlay-theme:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
}
.overlay-black:before {
background: #333333;
background: rgba(0,0,0,0.5);
}
.overlay-white:before {
background: #ffffff;
background: rgba(255,255,255,0.7);
}
.overlay-theme:before {
background: #77a8d9;
background: rgba(119,168,217,0.7);
}
/* ----------------------------------------------------------------------
2-3. Jarallax
---------------------------------------------------------------------- */
/* Jarallax */
.jarallax {
position: relative;
z-index: 0;
min-height: 100px;
}
.jarallax > .jarallax-img {
position: absolute;
object-fit: cover;
font-family: 'object-fit: cover;';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.jarallax600 { min-height: 600px; }
.jarallax1080 { min-height: 1080px; }
/* ----------------------------------------------------------------------
2-4. Infinite Scroll
---------------------------------------------------------------------- */
/* Infinite Scroll */
.scroller-status { display: none; }
.loader-ellips {
position: relative;
font-size: 0.9375rem;
width: 4em;
height: 1em;
margin: 20px auto 20px;
}
.loader-ellips__dot {
position: absolute;
display: block;
width: 1em;
height: 1em;
background: #dddddd;
border-radius: 0.5em;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
.loader-ellips__dot:nth-child(1), .loader-ellips__dot:nth-child(2) { left: 0; }
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }
@keyframes reveal { from {
transform: scale(0.001);
}
to { transform: scale(1); }
}
@keyframes slide { to {
transform: translateX(1.5em)
}
}
.loader-ellips__dot:nth-child(1) { animation-name: reveal; }
.loader-ellips__dot:nth-child(2), .loader-ellips__dot:nth-child(3) { animation-name: slide; }
.loader-ellips__dot:nth-child(4) {
animation-name: reveal;
animation-direction: reverse;
}
/* Load More Button */
.view-more-button { border-radius: 5px !important; }
.pagination-center { text-align: center !important; }
.pagination-center .btn { border: 1px solid rgba(0,0,0,0.1) !important; }
.infinite-scroll-last, .infinite-scroll-error { text-align: center; }
/* ----------------------------------------------------------------------
2-5. Isotope Portfolio
---------------------------------------------------------------------- */
/* Isotope */
.isotope {
margin: 0;
padding: 0;
min-height: 150px;
overflow: hidden;
padding-top: 5px;
margin-bottom: 20px;
}
.isotope:after {
content: '';
display: block;
clear: both;
}
.element-item {
position: relative;
float: left;
color: inherit;
background: transparent;
margin-bottom: 30px;
}
.element-item > * {
margin: 0;
padding: 0;
}
.element-item img {
width: 100%;
height: auto;
}
.grid-row {
margin-right: -15px;
margin-left: -15px;
display: block;
}
.grid-row:before, .grid-row:after {
display: table;
content: " ";
}
.grid-row:after { clear: both; }
.grid-2, .grid-3, .grid-4, .grid-6, .grid-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.grid-2 { width: 20%; }
.grid-3 { width: 25%; }
.grid-4 { width: 33.3%; }
.grid-6 { width: 50%; }
.grid-12 { width: 100%; }
@media (max-width: 991px) {
.grid-2, .grid-3, .grid-4, .grid-6 { width: 33.3%; }
.grid-12 { width: 100%; }
}
@media (max-width: 767px) {
.grid-2, .grid-3, .grid-4, .grid-6 { width: 50%; }
.grid-12 { width: 100%; }
}
@media (max-width: 575px) {
.grid-2, .grid-3, .grid-4, .grid-6, .grid-12 { width: 100%; }
}
/* Grid Grallery */
.isotope-gallery {
margin: 0;
padding: 0;
min-height: 150px;
overflow: hidden;
padding-top: 5px;
margin-bottom: 20px;
display: block;
}
.isotope-gallery:after {
content: '';
display: block;
clear: both;
}
.gallery-item {
position: relative;
float: left;
color: inherit;
background: transparent;
border: none;
width: 25%;
height: auto;
min-height: 1px;
padding: 5px;
}
.gallery-item > * {
margin: 0;
padding: 0;
}
.gallery-item img {
width: 100%;
height: auto;
}
.grid-sizer { width: 25%; }
.grid-width2 {
width: 50%;
height: auto;
}
@media (max-width: 767px) {
.gallery-item {
width: 100%;
margin-bottom: 20px;
}
.grid-sizer { width: 100%; }
.grid-width2 { width: 100%; }
}
/* Button */
.button-group {
margin-bottom: 20px;
text-align: center;
}
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: none;
display: inline-block;
cursor: pointer;
color: inherit;
font-weight: bold;
padding: 7px 14px;
margin-left: 0;
margin-right: 5px;
background: transparent;
border: 1px solid transparent;
border-radius: 0px;
}
.button-group .button:hover {
border: 1px solid transparent;
font-weight: bold;
background: transparent;
color: #77a8d9;
border-radius: 0px;
}
.button-group .button:active, .button-group .button.is-checked {
outline: none;
border: 1px solid transparent;
font-weight: bold;
background: transparent;
color: #77a8d9;
}
/* Image Title */
.image-title {
text-align: left;
padding: 20px 0px 20px;
background: #ffffff;
border: none;
}
/* ----------------------------------------------------------------------
2-6. Timeline
---------------------------------------------------------------------- */
.timeline-left {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
text-align: left;
background: transparent;
margin-bottom: 20px;
padding: 0 40px 0 0;
}
.timeline-right {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
text-align: left;
background: transparent;
margin-bottom: 20px;
padding: 0 0 0 40px;
}
@media (max-width: 991px) {
.timeline-left, .timeline-right { padding: 0; }
}
@media (min-width: 992px) {
.line-center {
position: relative;
overflow: hidden;
}
.line-center:before {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 1px;
height: 100%;
background: #77a8d9;
}
.timeline-left:before {
position: absolute;
top: 0;
bottom: 0;
right: -35px;
margin: auto;
width: 40px;
height: 40px;
font-size: 40px;
line-height: 1;
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
display: block;
text-align: center;
vertical-align: middle;
z-index:100;
content: "\f192";
color: #77a8d9;
background: #ffffff;
border-radius: 50%;
}
.timeline-left:after {
position: absolute;
content: '';
top: 0;
bottom: 0;
right: -30px;
margin: auto;
width: 60px;
height: 1px;
background: #77a8d9;
}
.timeline-right:before {
position: absolute;
top: 0;
bottom: 0;
left: -35px;
margin: auto;
width: 40px;
height: 40px;
font-size: 40px;
line-height: 1;
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
display: block;
text-align: center;
vertical-align: middle;
z-index:100;
content: "\f192";
color: #77a8d9;
background: #ffffff;
border-radius: 50%;
}
.timeline-right:after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: -30px;
margin: auto;
width: 60px;
height: 1px;
background: #77a8d9;
}
}
/* ----------------------------------------------------------------------
2-7. Team
---------------------------------------------------------------------- */
.team {
clear: both;
position: relative;
text-align: center;
background: #fafafa;
margin-bottom: 20px;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.team-content {
padding: 30px 20px;
background: #ffffff;
color: inherit;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.team-content h4 {
color: #333333;
font-weight: bold;
line-height: 1.2;
}
.team-content small {
color: inherit;
font-size: 0.8125rem;
font-weight: normal;
}
.team-content .social-icons {
float: none;
margin-top: 20px;
}
.team-content .social-icons li { margin-bottom: 2px; }
/* ----------------------------------------------------------------------
2-8. Fontawesome
---------------------------------------------------------------------- */
.fontawesome-list { margin-bottom: 20px; }
.fontawesome-list div {
font-size: 11px;
padding-top: 5px;
padding-bottom: 5px;
}
.fontawesome-list div:hover {
background: #f7f7f7;
border-radius: 5px;
}
.fontawesome-list div i {
font-size: 13px;
vertical-align: middle;
margin-right: 10px;
}
/* ----------------------------------------------------------------------
2-9. 404
---------------------------------------------------------------------- */
.not-found {
text-align: center;
padding: 50px 0;
min-height: 300px;
}
.not-found a {
font-size: 9.375rem;
line-height: 1.6;
font-weight: bold;
text-decoration: none;
display: block;
}
/* ----------------------------------------------------------------------
2-10. Blog
---------------------------------------------------------------------- */
.sidebar { margin-bottom: 50px; }
/* Info */
.sidebar-info {
margin: 10px 0;
padding: 0;
list-style: none;
}
.sidebar-info li { padding: 8px 2px; }
.sidebar-info li i {
margin-right: 5px;
font-weight: 600;
}
.sidebar-info li span { font-weight: 600; }
/* List */
.sidebar-list {
padding: 0;
list-style: none;
}
.sidebar-list li {
color: inherit;
padding: 8px 2px;
}
.sidebar-list li i {
margin-right: 8px;
color: #77a8d9;
}
.sidebar-list li span { font-weight: 600; }
/* Tag */
.sidebar-tag {
padding: 0;
list-style: none;
}
.sidebar-tag li {
display: inline-block;
cursor: pointer;
background: #ffffff;
margin: 3px 1px;
border: 1px solid #77a8d9;
border-radius: 0px;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.sidebar-tag li a {
color: #aaaaaa;
padding: 15px 12px;
text-decoration: none;
color: #77a8d9;
line-height: 30px;
font-size: 0.8125rem;
}
.sidebar-tag li:hover {
color: #ffffff;
background: #77a8d9;
}
.sidebar-tag li:hover a { color: #ffffff; }
/* Pagination */
.pagination {
display: -ms-flexbox;
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
color: #77a8d9;
}
.page-item:first-child .page-link {
margin-left: 0;
border-top-left-radius: 0rem;
border-bottom-left-radius: 0rem;
}
.page-item:last-child .page-link {
border-top-right-radius: 0rem;
border-bottom-right-radius: 0rem;
}
.page-item .page-link {
z-index: 2;
color: #77a8d9;
background-color: #ffffff;
border-color: #77a8d9;
}
.page-item .page-link:hover, .page-item.active .page-link {
z-index: 2;
color: #ffffff;
background-color: #77a8d9;
border-color: #77a8d9;
}
/* ----------------------------------------------------------------------
2-11. Contact Form
---------------------------------------------------------------------- */
/* Contactform */
.contactform {
font-family: inherit;
font-size: 0.875rem;
margin: 0 auto;
margin-top: 30px;
}
.contactform textarea { min-height: 150px; }
.contactform .answer { width: 100%; }
.contactform .submit {
width: 170px;
height: 40px;
font-weight: normal;
border-radius: 0;
}
.contactform label.error {
width: 100%;
font-weight: normal;
font-style: italic;
padding: 7px 10px;
margin-bottom: 20px;
border: 1px solid transparent;
color: #b76260;
background-color: #eedad9;
border-radius: 0;
}
.contactform input.error, .contactform select.error, .contactform textarea.error { border: 1px solid rgba(169,68,66,0.3); }
div.error { display: none; }
.contactform span.checkbox, .contactform .checkbox, .contactform .radio { display: inline; }
input.checkbox { border: none; }
.contactform select { margin-bottom: 20px; }
.contactform .form-control, .contactform .form-control:focus, .contactform .custom-select {
color: #888888;
background-color: #f5f5f5;
border: 1px solid transparent;
}
/* Message */
.message, .message2 { margin: 20px auto; }
.contact-success {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
font-weight: bold;
border-radius: 3px;
}
.contact-error {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
font-weight: bold;
border-radius: 3px;
}
@media (max-width: 991px) {
.contactform .col-lg-3, .contactform .col-lg-4, .contactform .col-lg-5, .contactform .col-lg-12 { margin-bottom: 0px; }
}
/* Map */
.map, .map iframe {
position: relative;
width: 100%;
height: 600px;
margin: 0;
padding: 0;
background: #ffffff;
}
.map100, .map100 iframe { height: 100px; }
.map200, .map200 iframe { height: 200px; }
.map300, .map300 iframe { height: 300px; }
.map400, .map400 iframe { height: 400px; }
.map500, .map500 iframe { height: 500px; }
.map600, .map600 iframe { height: 600px; }
.map700, .map700 iframe { height: 700px; }
.map800, .map800 iframe { height: 800px; }
.map900, .map900 iframe { height: 900px; }
.map100, .map1000 iframe { height: 1000px; }
.map1080, .map1080 iframe { height: 1080px; }
/* ----------------------------------------------------------------------
3-1. Highlight
---------------------------------------------------------------------- */
.highlight-white {
background: #ffffff;
padding: 1px 5px;
color: #222222;
}
.highlight-white a { color: #222222; }
.highlight-gray {
background: #8c8c8c;
padding: 1px 5px;
color: #ffffff;
}
.highlight-black {
background: #0c0c0c;
padding: 1px 5px;
color: #ffffff;
}
.highlight-pink {
background: #cc3d85;
padding: 1px 5px;
color: #ffffff;
}
.highlight-blue {
background: #3d85cc;
padding: 1px 5px;
color: #ffffff;
}
.highlight-aqua {
background: #3dcccc;
padding: 1px 5px;
color: #ffffff;
}
.highlight-green {
background: #3dcc85;
padding: 1px 5px;
color: #ffffff;
}
.highlight-olive {
background: #85cc3d;
padding: 1px 5px;
color: #ffffff;
}
.highlight-yellow {
background: #cccc3d;
padding: 1px 5px;
color: #ffffff;
}
.highlight-orange {
background: #cc853d;
padding: 1px 5px;
color: #ffffff;
}
.highlight-red {
background: #cc3d3d;
padding: 1px 5px;
color: #ffffff;
}
.highlight-theme {
background: #77a8d9;
padding: 1px 5px;
color: #ffffff;
}
/* ----------------------------------------------------------------------
3-2. Text Color
---------------------------------------------------------------------- */
.text-white { color: #ffffff !important; }
.text-gray { color: #8c8c8c !important; }
.text-black { color: #0c0c0c !important; }
.text-pink { color: #cc3d85 !important; }
.text-blue { color: #3d85cc !important; }
.text-aqua { color: #3dcccc !important; }
.text-green { color: #3dcc85 !important; }
.text-olive { color: #85cc3d !important; }
.text-yellow { color: #cccc3d !important; }
.text-orange { color: #cc853d !important; }
.text-red { color: #cc3d3d !important; }
.text-theme { color: #77a8d9 !important; }
/* ----------------------------------------------------------------------
3-3. Badge
---------------------------------------------------------------------- */
.badge {
display: inline-block;
padding: 0.2em 0.6em;
font-size: 100%;
margin-left: 10px;
font-weight: 400;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25em;
}
.badge-white {
background: #ffffff;
color: #555555;
border: 1px solid #dddddd;
}
.badge-gray { background: #8c8c8c; }
.badge-black { background: #0c0c0c; }
.badge-pink { background: #cc3d85; }
.badge-blue { background: #3d85cc; }
.badge-aqua { background: #3dcccc; }
.badge-green { background: #3dcc85; }
.badge-olive { background: #85cc3d; }
.badge-yellow { background: #cccc3d; }
.badge-orange { background: #cc853d; }
.badge-red { background: #cc3d3d; }
.badge-theme { background: #77a8d9; }
/* ----------------------------------------------------------------------
3-4. Dropcap
---------------------------------------------------------------------- */
.dropcap {
float: left;
color: inherit;
font-size: 2.4375rem;
line-height: 50px;
font-weight: bold;
padding: 0px 13px;
margin:0px 20px 0 0;
}
.dropcap-theme {
float: left;
color: #ffffff;
font-size: 2.4375rem;
line-height: 50px;
font-weight: bold;
padding: 0px 13px;
margin:0px 20px 0 0;
background: #77a8d9;
}
/* ----------------------------------------------------------------------
3-5. List Styles
---------------------------------------------------------------------- */
ul, ol {
margin-top: 0;
margin-bottom: 10px;
}
ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; }
.list-unstyled {
padding-left: 0;
list-style: none;
line-height: 2.0em;
}
.list-unordered { line-height: 2.0em; }
.list-ordered { line-height: 2.0em; }
.icon-arrow-list {
padding-left: 0;
list-style: none;
line-height: 2.0em;
margin: 10px 0;
}
.icon-arrow-list ul, .icon-arrow-list ul ul { list-style: none; }
.icon-arrow-list li, .icon-arrow-list li a { color: inherit; }
.icon-arrow-list li i {
margin-right: 8px;
color: #77a8d9;
}
.button-list {
padding-left: 0;
list-style: none;
}
.button-list li { display: inline-block; }
/* ----------------------------------------------------------------------
3-6. Alert
---------------------------------------------------------------------- */
/* alert 1 */
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert-dismissible .close { padding: 0.75rem 1.25rem; }
.alert-white {
background-color: #ffffff;
color: rgba(0,0,0,0.8);
}
.alert-white a { color: #222222; }
.alert-gray {
background-color: #8c8c8c;
color: rgba(255,255,255,0.8);
}
.alert-black {
background-color: #0c0c0c;
color: rgba(255,255,255,0.8);
}
.alert-pink {
background-color: #cc3d85;
color: rgba(255,255,255,0.8);
}
.alert-blue {
background-color: #3d85cc;
color: rgba(255,255,255,0.8);
}
.alert-aqua {
background-color: #3dcccc;
color: rgba(255,255,255,0.8);
}
.alert-green {
background-color: #3dcc85;
color: rgba(255,255,255,0.8);
}
.alert-olive {
background-color: #85cc3d;
color: rgba(255,255,255,0.8);
}
.alert-yellow {
background-color: #cccc3d;
color: rgba(255,255,255,0.8);
}
.alert-orange {
background-color: #cc853d;
color: rgba(255,255,255,0.8);
}
.alert-red {
background-color: #cc3d3d;
color: rgba(255,255,255,0.8);
}
.alert-theme {
background-color: #77a8d9;
color: rgba(255,255,255,0.8);
}
/* alert 3 */
.alert3 {
position: relative;
padding: 1.0rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert3.alert-dismissible .close { padding: 1.0rem 1.25rem; }
/* ----------------------------------------------------------------------
3-7. Button
---------------------------------------------------------------------- */
.btn {
position: relative;
font-weight: normal;
font-family: inherit;
overflow: hidden;
text-shadow: none;
vertical-align: middle;
z-index: 1;
margin-bottom: 10px;
border: none;
display: inline-block;
text-align: center;
white-space: nowrap;
cursor: pointer;
border-radius: 4px;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn:focus, .btn:active:focus, .btn.active:focus { outline: 0; }
.btn:hover, .btn:focus {
text-decoration: none;
color: #ffffff;
background-color: #888888;
outline: 0;
box-shadow: none;
-webkit-transition:0.2s linear;
-ms-transition:0.2s linear;
transition:0.2s linear;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
color: #ffffff;
background-color: #888888;
}
.btn-white {
color: #454545;
background: #f5f5f5;
}
.btn-gray {
color: #ffffff;
background: #8c8c8c;
}
.btn-black {
color: #ffffff;
background: #555555;
}
.btn-pink {
color: #ffffff;
background: #cc3d85;
}
.btn-blue {
color: #ffffff;
background: #3d85cc;
}
.btn-aqua {
color: #ffffff;
background: #3dcccc;
}
.btn-green {
color: #ffffff;
background: #3dcc85;
}
.btn-olive {
color: #ffffff;
background: #85cc3d;
}
.btn-yellow {
color: #ffffff;
background: #cccc3d;
}
.btn-orange {
color: #ffffff;
background: #cc853d;
}
.btn-red {
color: #ffffff;
background: #cc3d3d;
}
.btn-theme {
color: #ffffff;
background: #77a8d9;
}
/* btn size */
.btn {
font-size: 14px;
line-height: 14px;
padding: 14px 28px;
}
.btn-lg {
font-size: 18px;
line-height: 18px;
padding: 18px 36px;
}
.btn-sm {
font-size: 12px;
line-height: 12px;
padding: 12px 24px;
}
.btn-xs {
font-size: 8px;
line-height: 8px;
padding: 8px 16px;
}
/* btn arrow icon */
.btn span { margin-left: 42px; }
.btn.btn-lg span { margin-left: 54px; }
.btn.btn-sm span { margin-left: 36px; }
.btn.btn-xs span { margin-left: 24px; }
.btn span i {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: auto;
height: 100%;
background: rgba(0,0,0,0.1);
line-height: 1.6;
}
.btn span i {
font-size: 14px;
line-height: 14px;
padding: 14px 14px;
}
.btn.btn-lg span i {
font-size: 18px;
line-height: 18px;
padding: 18px 18px;
}
.btn.btn-sm span i {
font-size: 12px;
line-height: 12px;
padding: 12px 12px;
}
.btn.btn-xs span i {
font-size: 8px;
line-height: 8px;
padding: 8px 8px;
}
.btn.btn-white span i { color: #252525; }
.btn.btn-white:hover span i { color: #ffffff; }
/* options */
.btn-3d { border-bottom: 4px solid rgba(0,0,0,0.3); }
.btn-round { border-radius: 8px; }
/* button border */
.btn-border { border: 2px solid rgba(0,0,0,0.1) !important; }
/* ----------------------------------------------------------------------
3-8. Testimonial
---------------------------------------------------------------------- */
.testimonial {
position: relative;
background: transparent;
border: 1px solid transparent;
margin-bottom: 20px;
color: #888888;
z-index: 0;
}
.testimonial:before, .testimonial:after {
z-index: -1;
display: block;
position: absolute;
font-family: FontAwesome;
content: "\f10d";
font-style: normal;
font-weight: normal;
line-height: 1;
font-size: 30px;
color: #aaaaaa;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.testimonial:before {
top: 10px;
left: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
text-align: center;
}
.testimonial:after { display: none; }
.testimonial p { padding: 55px 55px 10px; }
.testimonial-author {
position: relative;
width: 100%;
height: auto;
padding: 0px;
text-align: center;
}
.testimonial-author img {
display: inline-block;
width: 80px;
height: 80px;
text-align: left;
margin-right: 10px;
border: 2px solid #ffffff;
border-radius: 50%;
margin-bottom: 12px;
}
.testimonial-author p {
display: inline-block;
vertical-align: middle;
text-align: left;
padding-left: 10px;
font-size: 0.9rem;
font-weight: normal;
margin-bottom: 0;
}
/* Blockquote */
.blockquote {
margin-bottom: 1rem;
font-size: 1.25rem;
}
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 1.09375rem;
border-style: solid;
border-width: 0 0 0 5px;
border-color: #888888;
}
blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child { margin-bottom: 0; }
blockquote footer, blockquote small, blockquote .small {
display: block;
font-size: 80%;
line-height: 1.6;
color: #888888;
}
/* ----------------------------------------------------------------------
3-9. Divider
---------------------------------------------------------------------- */
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #dddddd;
-webkit-box-shadow: 0px 1px 0px #ffffff;
box-shadow: 0px 1px 0px #ffffff;
}
.divider-singleline {
margin-top: 20px;
margin-bottom: 20px;
border-top: 1px solid #dddddd;
}
.divider-doubleline {
margin-top: 20px;
margin-bottom: 20px;
border-top: 4px double #dddddd;
}
.divider-singledotted {
margin-top: 20px;
margin-bottom: 20px;
height: 1px;
background: url("../images/assets/divider-singledotted.png") repeat-x top left;
}
.divider-doubledotted {
margin-top: 20px;
margin-bottom: 20px;
height: 4px;
background: url("../images/assets/divider-doubledotted.png") repeat-x top left;
}
.divider-icon {
background: url("../images/assets/divider-iconline.png") repeat-x left 30px;
width: 100%;
height: auto;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
.divider-icon i {
width: 45px;
height: 45px;
color: #888888;
font-size: 1.25rem;
text-align: center;
vertical-align: middle;
line-height: 45px;
background: #ffffff;
}
/* ----------------------------------------------------------------------
3-10. Forms
---------------------------------------------------------------------- */
/* jQuery UI */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
border: 1px solid rgba(0,0,0,0.2);
background: #77a8d9;
color: #ffffff;
}
.ui-icon-background, .ui-state-active .ui-icon-background { border: rgba(0,0,0,0.3); }
.ui-selectmenu-button.ui-button {
width: 100%;
margin-bottom: 20px;
}
.contactform .ui-spinner {
width: 100%;
margin-bottom: 20px;
}
.contactform .ui-spinner-input {
padding: .222em 0;
margin: .2em 0;
margin-left: .4em;
margin-right: 2em;
border: 1px solid transparent;
}
.contactform .ui-spinner-input:focus { border: 1px solid transparent; }
/* ----------------------------------------------------------------------
4-1. Accordion
---------------------------------------------------------------------- */
/* Accordion */
.accordion-container {
width: 100%;
text-align: left;
margin: 0 auto;
margin-bottom: 20px;
}
.accordion-container h4 {
position: relative;
font-weight: normal;
cursor: pointer;
display: block;
outline: none;
vertical-align: middle;
padding: 10px 15px 10px 55px;
font-size: 0.9rem;
margin: 5px 0 0;
color: inherit;
border-radius: 0;
border: 1px solid transparent;
background: #f5f5f5;
}
.accordion-container h4.active {
color: #ffffff;
background-color: #77a8d9;
border: 1px solid transparent;
font-weight: normal;
border-radius: 0;
box-shadow: none;
}
.accordion-container h4:before {
position: absolute;
display: block;
left: 15px;
top: 7px;
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
content: "\f067";
line-height: 1;
color: inherit;
padding: 5px 7px;
}
.accordion-container h4.active:before {
content: "\f068";
color: #ffffff;
padding: 5px 7px;
}
.accordion-container .accordion-content {
margin: 0 0 5px;
padding: 20px 20px 10px;
border: none;
background-color: #ffffff;
display: none;
border-radius: 0;
}
.accordion-container .accordion-content.opened { display: block; }
/* Accordion 6 */
.accordion-container6 h4 { padding: 10px 20px; }
.accordion-container6 h4:before {
left: auto;
right: 15px;
content: "\f105";
}
.accordion-container6 h4.active:before { content: "\f107"; }
/* Toggle */
.toggle-container {
width: 100%;
text-align: left;
margin: 0 auto;
margin-bottom: 20px;
}
.toggle-container h4 {
position: relative;
font-weight: normal;
cursor: pointer;
display: block;
outline: none;
vertical-align: middle;
padding: 10px 15px 10px 55px;
font-size: 0.9rem;
margin: 5px 0 0;
color: inherit;
border-radius: 0;
border: 1px solid transparent;
background: #fafafa;
}
.toggle-container h4.active {
color: #ffffff;
background-color: #77a8d9;
border: 1px solid transparent;
font-weight: normal;
border-radius: 0;
box-shadow: none;
}
.toggle-container h4:before {
position: absolute;
display: block;
left: 15px;
top: 7px;
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
content: "\f067";
line-height: 1;
color: inherit;
padding: 5px 7px;
}
.toggle-container h4.active:before {
content: "\f068";
color: #ffffff;
padding: 5px 7px;
}
.toggle-container .toggle-content {
margin: 0 0 5px;
padding: 20px 20px 10px;
border: none;
background-color: #ffffff;
display: none;
border-radius: 0;
}
.toggle-container .toggle-content.opened { display: block; }
/* Toggle 6 */
.toggle-container6 h4 { padding: 10px 20px; }
.toggle-container6 h4:before {
left: auto;
right: 15px;
content: "\f105";
}
.toggle-container6 h4.active:before { content: "\f107"; }
/* ----------------------------------------------------------------------
4-2. Tabs
---------------------------------------------------------------------- */
/* Tab */
.tab-container { margin-bottom: 20px; }
.etabs {
margin: 0;
padding: 0;
font-size: 0;
}
.tab {
display: inline-block;
background-color: transparent;
border: none;
margin-right: 0px;
border-radius: 0;
}
.tab a {
font-size: 0.875rem;
font-weight: normal;
line-height: 1.6;
display: block;
padding: 10px 15px;
outline: none;
text-decoration: none;
color: #777777;
border: 1px solid #dddddd;
border-bottom: none;
border-right: none;
position: relative;
top: 1px;
z-index: 10;
margin: 0;
background-color: #fdfdfd;
}
.etabs li:last-child { border-right: 1px solid #dddddd; }
.tab a:hover {
text-decoration: none;
color: #777777;
}
.tab.active {
position: relative;
top: 0px;
padding-top: 0px;
border-color: transparent;
background: transparent;
}
.tab a.active {
font-weight: normal;
color: #77a8d9;
border-bottom: 1px solid #ffffff;
background: #ffffff;
}
.tab-container .panel-container {
position: relative;
background: #ffffff;
border: 1px solid #dddddd;
padding: 30px;
color: #777777;
border-radius: 0;
}
@media (max-width: 991px) {
.tab a { padding: 10px 10px; }
}
/* Tab 4 */
.tab-container4 {
border: 1px solid #dddddd;
background: #eeeeee;
box-shadow: none;
}
.tab-container4 .tab a {
border: none;
background-color: #eeeeee;
}
.tab-container4 .tab a.active { background: #ffffff; }
.tab-container4 .etabs li:last-child { border-right: none; }
.tab-container4 .panel-container { border: none; }
/* Tab On Side */
.tab-side-container {
background: transparent;
border: 1px solid transparent;
min-height: 100px;
margin-bottom: 20px;
color: #777777;
border-radius: 0;
}
.tab-side-container ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
float: left;
border-radius: 0;
}
.tab-side-container ul li {
background: #fdfdfd;
margin-bottom: 0px;
text-align: left;
max-width: 100%;
border: none;
word-break: break-all;
min-width: 130px;
}
.tab-side-container ul li a {
font-size: 0.875rem;
font-weight: normal;
line-height: 1.6;
text-decoration: none;
display: block;
padding: 10px 15px;
outline: none;
color: #777777;
border: 1px solid #dddddd;
border-right: none;
border-bottom: none;
position: relative;
left: 1px;
z-index: 10;
}
.tab-side-container ul li:last-child { border-bottom: 1px solid #dddddd; }
.tab-side-container ul li a i { margin-right: 5px; }
.tab-side-container ul li a:hover { text-decoration: none; }
.tab-side-container ul li.selected-tab {
position: relative;
left: 0px;
background: transparent;
font-weight: normal;
border-radius: 0;
}
.tab-side-container ul li a.selected-tab {
font-weight: normal;
text-decoration: none;
color: #77a8d9;
background: #ffffff;
border-right: 1px solid #ffffff;
}
.tab-side-container .panel-container {
background: #ffffff;
overflow: hidden;
border: 1px solid #dddddd;
padding: 30px;
border-radius: 0;
}
@media (max-width: 991px) {
.tab-side-container { border: none; }
.tab-side-container ul {
float: none;
font-size: 0;
}
.tab-side-container ul li {
min-width: 30px;
display: inline-block;
margin-right: 0px;
border-radius: 0;
}
.tab-side-container ul li a {
left: 0;
top: 1px;
margin: 0;
}
.tab-side-container ul li:last-child {
border-bottom: none;
border-right: 1px solid #dddddd !important;
}
.tab-side-container ul li.selected-tab {
top: 0px;
padding-top: 0px;
border-color: transparent;
}
.tab-side-container ul li a.selected-tab {
border-right: none;
}
.tab-side-container .panel-container {
position: relative;
padding: 30px;
border-top: 1px solid #dddddd;
}
.tab-side-container ul li { min-width: 50px; }
}
/* Tab On Side 4 */
.tab-side-container4 {
background: #eeeeee;
box-shadow: none;
border: none;
border: 1px solid #dddddd;
}
.tab-side-container4 ul li { background: #eeeeee; }
.tab-side-container4 ul li:last-child { border-bottom: none; }
.tab-side-container4 ul li a { border: none; }
.tab-side-container4 ul li a.selected-tab { border-right: none; }
.tab-side-container4 .panel-container { border: none; }
@media (max-width: 991px) {
.tab-side-container4 ul li { margin-bottom: 0; }
.tab-side-container4 ul li a {
border: none;
border-left: none;
}
.tab-side-container4 ul li a.selected-tab {
border-right: none;
border-left: none;
}
}
/* Tab in Reservation */
#reservation-form .reservation-form {
position: relative;
margin: 0 auto;
width: 100%;
height: auto;
padding: 20px 0px 10px;
background: #77a8d9;
border: none;
color: #ffffff;
}
#reservation-form .reservation-form h6 {
font-size: 13px;
color: #ffffff;
}
#reservation-form .tab-side-container4,
#reservation-form .tab-side-container4 ul li a {
left: 0;
background: #333333;
color: #ffffff;
}
#reservation-form .tab-side-container4 {
border: 0;
background: #333333;
}
#reservation-form .tab-side-container ul li a.selected-tab {
color: #ffffff;
border-right: none;
background: #77a8d9;
}
#reservation-form .tab-side-container4 .panel-container {
border: 0;
padding: 20px 30px;
background: #77a8d9;
}
#reservation-form .tab-side-container4 .panel-container .btn-black { background: #333333; }
@media (max-width: 991px) {
#reservation-form .tab-side-container ul li a { top: 0; }
#reservation-form .tab-side-container ul li:last-child { border-right: none !important; }
#reservation-form .tab-side-container ul li a.selected-tab {
border-bottom: none;
}
}
.input-icon { position: relative; }
.input-icon i {
position: absolute;
top: 10px;
right: 10px;
font-size: 17px;
color: #77a8d9;
}
.btn-select {
font-size: 0.875rem;
line-height: 20px;
padding: 9px 12px;
}
#reservation-form .form-control,
#reservation-form .form-control:focus,
#reservation-form .custom-select { background-color: #ffffff; }
/* ----------------------------------------------------------------------
4-3. Pricing Box
---------------------------------------------------------------------- */
.pricingbox {
position: relative;
background: #ffffff;
border: 1px solid transparent;
text-align: center;
margin-bottom: 20px;
border-radius: 0;
overflow: hidden;
z-index: 0;
box-shadow: 0 0 3px #dddddd;
}
.pricingbox:hover { box-shadow: 0 0 10px #dddddd; }
.pricingbox ul {
list-style: none;
padding: 0;
}
.pricingbox ul li {
padding: 15px 0px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.plan {
position: relative;
font-family: inherit;
font-size: 1.5625rem;
font-weight: bold;
color: inherit;
padding: 10px 0px;
border-bottom: 1px solid rgba(0,0,0,0.1);
background: #ffffff;
background: #fdfdfd;
}
.price {
position: relative;
padding: 30px 0px;
border-bottom: 1px solid rgba(0,0,0,0.1);
background: #fafafa;
font-size: 1.5625rem;
font-weight: normal;
color: #77a8d9;
}
.price strong {
font-size: 3.75rem;
font-weight: bold;
margin: 0 5px;
}
.price span {
font-size: 0.875rem;
font-weight: 300;
}
.sign-up {
display: block;
cursor: pointer;
vertical-align: middle;
padding: 20px 0 20px;
}
.sign-up .btn {
border-radius: 5px;
border: 1px solid rgba(0,0,0,0.1) !important;
}
/* even */
.bg-even ul li:nth-child(even) { background: #fdfdfd; }
@media (min-width: 992px) {
/* no margin */
.no-margin {
margin-right: -15px;
margin-left: -15px;
}
/* recommended */
.recommended {
position: relative;
z-index: 205;
margin-top: -30px;
border-left: none;
border-right: none;
-webkit-box-shadow: 0 0 10px 4px rgba(0,0,0,0.1);
box-shadow: 0 0 10px 4px rgba(0,0,0,0.1);
}
.recommended .price { padding: 60px 0px; }
}
/* badge */
.badge-corner {
position: absolute;
top: 15px;
right: -50px;
width: 150px;
display: block;
background: #9FC2D6;
text-align: center;
font-size: 13px;
color: #ffffff;
z-index: 99;
overflow: hidden;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* colors */
.price-white, .price-white span { background: #ffffff; }
.plan-gray, .price-gray {
background: #8c8c8c;
color: #ffffff;
}
.plan-black, .price-black {
background: #444444;
color: #ffffff;
}
.plan-pink, .price-pink {
background: #cc3d85;
color: #ffffff;
}
.plan-blue, .price-blue {
background: #3d85cc;
color: #ffffff;
}
.plan-aqua, .price-aqua {
background: #3dcccc;
color: #ffffff;
}
.plan-green, .price-green {
background: #3dcc85;
color: #ffffff;
}
.plan-olive, .price-olive {
background: #85cc3d;
color: #ffffff;
}
.plan-yellow, .price-yellow {
background: #cccc3d;
color: #ffffff;
}
.plan-orange, .price-orange {
background: #cc853d;
color: #ffffff;
}
.plan-red, .price-red {
background: #cc3d3d;
color: #ffffff;
}
.plan-theme, .price-theme {
background: #77a8d9;
color: #ffffff;
}
/* ----------------------------------------------------------------------
4-4. Card
---------------------------------------------------------------------- */
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: transparent;
background-clip: border-box;
border: 1px solid transparent;
border-radius: 0;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,0.03);
border-bottom: 1px solid rgba(0,0,0,0.125);
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem 0;
}
.card-text {
color: #4c5566;
font-weight: 400;
}
/* Card badge */
.card-badge {
position: absolute;
top: -10px;
right: 10px;
z-index: 10;
padding: 5px 10px;
background: #9FC2D6;
border-radius: 0;
}
.card-badge span {
text-align: center;
font-size: 0.65rem;
line-height: 1.5;
font-weight: bold;
color: #ffffff;
border-radius: 0;
}
/* Card Align */
.card-title { margin-bottom: 0.75rem; }
/* Card Video */
.card-video {
display: block;
background: #000000;
position: relative;
margin: 0;
padding: 0;
}
/* Card Bg */
.bg-transparent { background-color: transparent !important; }
.bg-white { background: #ffffff !important; }
.bg-gray { background: #8c8c8c !important; }
.bg-black { background: #0c0c0c !important; }
.bg-pink { background: #cc3d85 !important; }
.bg-blue { background: #3d85cc !important; }
.bg-aqua { background: #3dcccc !important; }
.bg-green { background: #3dcc85 !important; }
.bg-olive { background: #85cc3d !important; }
.bg-yellow { background: #cccc3d !important; }
.bg-orange { background: #cc853d !important; }
.bg-red { background: #cc3d3d !important; }
.bg-theme { background: #77a8d9 !important; }
/* Bg Opacity */
.bg-opacity0:after, .bg-opacity1:after, .bg-opacity2:after, .bg-opacity3:after, .bg-opacity4:after, .bg-opacity5:after, .bg-opacity6:after, .bg-opacity7:after, .bg-opacity8:after, .bg-opacity9:after, .bg-opacity10:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
vertical-align: middle;
background: #ffffff;
z-index: 0;
}
.bg-opacity0:after { background: rgba(255,255,255,0); }
.bg-opacity1:after { background: rgba(255,255,255,0.1); }
.bg-opacity2:after { background: rgba(255,255,255,0.2); }
.bg-opacity3:after { background: rgba(255,255,255,0.3); }
.bg-opacity4:after { background: rgba(255,255,255,0.4); }
.bg-opacity5:after { background: rgba(255,255,255,0.5); }
.bg-opacity6:after { background: rgba(255,255,255,0.6); }
.bg-opacity7:after { background: rgba(255,255,255,0.7); }
.bg-opacity8:after { background: rgba(255,255,255,0.8); }
.bg-opacity9:after { background: rgba(255,255,255,0.9); }
.bg-opacity10:after { background: rgba(255,255,255,1); }
.bg-opacity-content {
position: relative;
z-index: 1;
}
.card-body.bg-gray, .card-body.bg-black, .card-body.bg-pink, .card-body.bg-blue, .card-body.bg-aqua, .card-body.bg-green, .card-body.bg-olive, .card-body.bg-yellow, .card-body.bg-orange, .card-body.bg-red, .card-body.bg-theme, .card.bg-gray .card-body, .card.bg-black .card-body, .card.bg-pink .card-body, .card.bg-blue .card-body, .card.bg-aqua .card-body, .card.bg-green .card-body, .card.bg-olive .card-body, .card.bg-yellow .card-body, .card.bg-orange .card-body, .card.bg-red .card-body, .card.bg-theme .card-body, .bg-opacity-content .card-body { padding: 1.25rem; }
/* ----------------------------------------------------------------------
4-5. Client
---------------------------------------------------------------------- */
/* Clients Grid */
.cl-grid {
position: relative;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.cl-grid li {
float: left;
position: relative;
width: 100%;
height: auto;
}
.cl-grid li:before {
position: absolute;
content: '';
top: 0;
left: -1px;
height: 100%;
border-left: 1px dashed #cccccc;
}
.cl-grid li:after {
position: absolute;
content: '';
left: 0;
bottom: -1px;
width: 100%;
border-bottom: 1px dashed #cccccc;
}
.cl-grid-1 li { width: 100%; }
.cl-grid-2 li { width: 50%; }
.cl-grid-3 li { width: 33.3%; }
.cl-grid-4 li { width: 25%; }
.cl-grid-5 li { width: 20%; }
.cl-grid-6 li { width: 16.6%; }
.cl-grid-7 li { width: 14.2%; }
.cl-grid-8 li { width: 12.5%; }
.cl-grid-9 li { width: 11.1%; }
.cl-grid-10 li { width: 10%; }
.cl-grid-11 li { width: 9%; }
.cl-grid-12 li { width: 8.3%; }
.cl-grid li img {
width: 100%;
height: auto;
}
@media (max-width: 991px) {
.cl-grid-1 li, .cl-grid-2 li, .cl-grid-3 li, .cl-grid-4 li, .cl-grid-5 li, .cl-grid-6 li, .cl-grid-7 li, .cl-grid-8 li, .cl-grid-9 li, .cl-grid-10 li, .cl-grid-11 li, .cl-grid-12 li { width: 25%; }
}
@media (max-width: 767px) {
.cl-grid-1 li, .cl-grid-2 li, .cl-grid-3 li, .cl-grid-4 li, .cl-grid-5 li, .cl-grid-6 li, .cl-grid-7 li, .cl-grid-8 li, .cl-grid-9 li, .cl-grid-10 li, .cl-grid-11 li, .cl-grid-12 li { width: 33.3%; }
}
@media (max-width: 575px) {
.cl-grid-1 li, .cl-grid-2 li, .cl-grid-3 li, .cl-grid-4 li, .cl-grid-5 li, .cl-grid-6 li, .cl-grid-7 li, .cl-grid-8 li, .cl-grid-9 li, .cl-grid-10 li, .cl-grid-11 li, .cl-grid-12 li { width: 50%; }
}
/* Gallery Grid */
.gl-grid {
position: relative;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.gl-grid li {
float: left;
position: relative;
width: 100%;
height: auto;
background: transparent;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.gl-grid-1 li { width: 100%; }
.gl-grid-2 li { width: 50%; }
.gl-grid-3 li { width: 33.3%; }
.gl-grid-4 li { width: 25%; }
.gl-grid-5 li { width: 20%; }
.gl-grid-6 li { width: 16.6%; }
.gl-grid-7 li { width: 14.2%; }
.gl-grid-8 li { width: 12.5%; }
.gl-grid-9 li { width: 11.1%; }
.gl-grid-10 li { width: 10%; }
.gl-grid-11 li { width: 9%; }
.gl-grid-12 li { width: 8.3%; }
.gl-grid li img {
width: 100%;
height: auto;
position: relative;
display: block;
overflow: hidden;
cursor: pointer;
background: transparent;
border: none;
opacity: 1;
}
.gl-grid li:hover img { opacity: 0.8; }
@media (max-width: 991px) {
.gl-grid-1 li, .gl-grid-2 li, .gl-grid-3 li, .gl-grid-4 li, .gl-grid-5 li, .gl-grid-6 li, .gl-grid-7 li, .gl-grid-8 li, .gl-grid-9 li, .gl-grid-10 li, .gl-grid-11 li, .gl-grid-12 li { width: 25%; }
}
@media (max-width: 767px) {
.gl-grid-1 li, .gl-grid-2 li, .gl-grid-3 li, .gl-grid-4 li, .gl-grid-5 li, .gl-grid-6 li, .gl-grid-7 li, .gl-grid-8 li, .gl-grid-9 li, .gl-grid-10 li, .gl-grid-11 li, .gl-grid-12 li { width: 33.3%; }
}
@media (max-width: 575px) {
.gl-grid-1 li, .gl-grid-2 li, .gl-grid-3 li, .gl-grid-4 li, .gl-grid-5 li, .gl-grid-6 li, .gl-grid-7 li, .gl-grid-8 li, .gl-grid-9 li, .gl-grid-10 li, .gl-grid-11 li, .gl-grid-12 li { width: 50%; }
}
/* ----------------------------------------------------------------------
4-6. Iconbox
---------------------------------------------------------------------- */
/* Text Box */
.textbox {
position: relative;
width: 100%;
height: auto;
padding: 70px 30px 60px;
text-align: center;
background: #fdfdfd;
cursor: default;
margin-bottom: 20px;
border-radius: 0;
box-shadow: 10px 10px 0 #dddddd;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.textbox-icon {
margin: 0px auto 20px;
display: table;
}
.textbox-icon a { text-decoration: none; }
/* Iconbox 2 */
.iconbox2 {
position: relative;
width: 100%;
height: auto;
padding: 70px 30px 60px;
text-align: center;
background: #ffffff;
cursor: default;
border: 1px solid transparent;
margin-bottom: 20px;
border-radius: 0;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.iconbox2-icon {
margin: 0px auto 20px;
display: table;
}
.iconbox2-icon a { text-decoration: none; }
.iconbox2-icon i {
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 50px;
line-height: 50px;
padding-top: 24px;
padding-bottom: 24px;
border: 1px solid transparent;
width: 100px;
height: 100px;
color: #333333;
background: #ffffff;
z-index: 1;
border-radius: 50%;
}
.iconbox2-icon i:before {
line-height: 1;
display: block;
}
.iconbox2-icon i:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
pointer-events: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.iconbox2-icon i:hover {
color: #555555;
background: #ffffff;
}
/* Iconbox 10 */
.iconbox10 {
position: relative;
overflow: hidden;
clear: both;
width: 100%;
height: auto;
padding: 50px 30px 40px;
background: #ffffff;
border: 1px solid transparent;
z-index: 0;
cursor: default;
margin-bottom: 30px;
border-radius: 0;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.iconbox10-bg {
position: absolute;
bottom: 10px;
right: 10px;
z-index: -1;
color: #eeeeee;
font-size: 22.5rem;
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.iconbox10-icon {
float: left;
display: table;
}
.iconbox10-icon i {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 3.125rem;
line-height: 50px;
padding-top: 24px;
padding-bottom: 24px;
border: 1px solid #77a8d9;
width: 100px;
height: 100px;
color: #555555;
background: #ffffff;
border-radius: 50%;
}
.iconbox10-icon i:before {
line-height: 1;
display: block;
}
.iconbox10-icon i:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
pointer-events: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.iconbox10-icon i:hover {
color: #555555;
background: #ffffff;
}
.iconbox10-content {
overflow: hidden;
text-align: left;
padding-left: 30px;
}
@media (max-width: 991px) {
.iconbox10-icon {
float: none;
margin: 0 auto 20px;
text-align: center;
}
.iconbox10-content {
text-align: center;
padding-left: 0;
}
}
@media (max-width: 991px) {
.iconbox10 .link-hover1, .iconbox10 .link-hover6, .iconbox10 .link-hover8 { margin-left: 0; }
.iconbox11 .link-hover1, .iconbox11 .link-hover6, .iconbox11 .link-hover8 { margin-left: 0; }
.iconbox12 .link-hover1, .iconbox12 .link-hover6, .iconbox12 .link-hover8 { margin-left: 0; }
.iconbox13 .link-hover1, .iconbox13 .link-hover6, .iconbox13 .link-hover8 { margin-left: 0; }
.iconbox14 .link-hover1, .iconbox14 .link-hover6, .iconbox14 .link-hover8 { margin-left: 0; }
}
/* ----------------------------------------------------------------------
4-7. Photo Align
---------------------------------------------------------------------- */
.image-align-left {
clear: both;
float:left;
padding: 0 25px 10px 0;
background: transparent;
max-width: 250px;
width: 100%;
height: auto;
}
.image-align-right {
clear: both;
float:right;
padding: 0 0 10px 25px;
background: transparent;
max-width: 250px;
width: 100%;
height: auto;
}
/* ----------------------------------------------------------------------
4-8. Skill Bar
---------------------------------------------------------------------- */
.skillbar-title { margin-bottom: 5px; }
.skillbar {
position: relative;
margin-bottom: 20px;
width: 100%;
height: 5px;
background-color: #fdfdfd;
vertical-align: middle;
border-radius: 20px;
-webkit-transition:0.5s linear;
-ms-transition:0.5s linear;
transition:0.5s linear;
-webkit-transition-property: width, background-color;
-ms-transition-property: width, background-color;
transition-property: width, background-color;
}
@media (max-width: 991px) {
.skillbar { margin-bottom: 40px; }
}
.skillbar-percent {
position: relative;
width: 0;
height: 5px;
background-color: #2b9fd9;
font-size: 0.8125rem;
line-height: 10px;
color: #ffffff;
padding: 0;
text-align: right;
vertical-align: middle;
border-radius: 20px;
-webkit-transition: all 1.0s ease;
-ms-transition: all 1.0s ease;
transition: all 1.0s ease;
}
.skillbar-tooltip {
position: absolute;
top: -30px;
right: 0px;
z-index: 10;
font-size: 0.8125rem;
font-weight: normal;
color: #ffffff;
line-height: 25px;
text-align: center;
width: 50px;
height: 25px;
background: #555555;
text-shadow: none;
border-radius: 20px;
}
.skillbar-tooltip:after {
content: '';
position: absolute;
right: -20px;
left: 0;
bottom: -5px;
margin: auto;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #555555;
}
.skillbar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
.skillbar-white { background-color: #ffffff; }
.skillbar-gray { background-color: #8c8c8c; }
.skillbar-black { background-color: #333333; }
.skillbar-pink { background-color: #cc3d85; }
.skillbar-blue { background-color: #3d85cc; }
.skillbar-aqua { background-color: #3dcccc; }
.skillbar-green { background-color: #3dcc85; }
.skillbar-olive { background-color: #85cc3d; }
.skillbar-yellow { background-color: #cccc3d; }
.skillbar-orange { background-color: #cc853d; }
.skillbar-red { background-color: #cc3d3d; }
.skillbar-theme { background-color: #77a8d9; }
/* ----------------------------------------------------------------------
4-9. Chart Box
---------------------------------------------------------------------- */
.chartbox {
position: relative;
width: 100%;
height: 150px;
margin-bottom: 20px;
background: transparent;
}
.chartbox canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
}
.chartbox .percent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
width: 100%;
height: 30px;
font-size: 30px;
font-weight: 300;
line-height: 1;
text-align: center;
}
.chartbox .percent:after {
content: '%';
margin-left: 5px;
font-size: 16px;
}
.chartbox p {
position: absolute;
top: auto;
bottom: -40px;
left: 0;
right: 0;
margin: auto;
display: block;
width: 100%;
height: 20px;
font-size: 20px;
font-weight: normal;
line-height: 1;
text-align: center;
}
/* no-canvas */
.no-canvas canvas { display: none; }
.no-canvas .percent { font-weight: 600; }
.no-canvas p { bottom: 10px; }
/* no-percent */
.no-percent .percent:after { display: none; }
/* in card */
.card .chartbox { margin-bottom: 50px; }
.card .chartbox .percent, .card .chartbox .percent:after { color: #ffffff; }
.card .padding-tb-30 {
padding-top: 30px;
padding-bottom: 30px;
}
/* ----------------------------------------------------------------------
4-10. Tooltip
---------------------------------------------------------------------- */
/* Tooltip */
.tooltip-inner {
background: rgba(0,0,0,1.0);
border: none;
padding: 10px 20px;
font-size: 0.875rem;
color: #ffffff;
border-radius: 0;
}
/* Popover */
.popover {
padding: 10px 20px;
box-shadow: none;
border-radius: 0;
}
.pointer { cursor: pointer; }
/* ----------------------------------------------------------------------
4-11. Fakeloader
---------------------------------------------------------------------- */
#fakeloader .double-bounce1, #fakeloader .double-bounce2, #fakeloader .container1 > div, #fakeloader .container2 > div, #fakeloader .container3 > div, #fakeloader .dot1, #fakeloader .dot2, #fakeloader .spinner4, #fakeloader .cube1, #fakeloader .cube2, #fakeloader .spinner6 > div, #fakeloader .spinner7 > div { background-color: #77a8d9; }
/* ----------------------------------------------------------------------
5-1. Bg Colors
---------------------------------------------------------------------- */
.bgcolors {
position: relative;
margin: 0 auto;
width: 100%;
min-height: 100px;
padding-top: 100px;
padding-bottom: 100px;
}
.bgcolors-gray { background: #fdfdfd; }
.bgcolors-black {
border: none;
background: #333333;
}
.bgcolors-theme {
border: none;
background: #77a8d9;
}
.bgcolors-slash { background: #fdfdfd url("../images/assets/bg-slash.png") repeat; }
/* ----------------------------------------------------------------------
5-2. Bg Parallax
---------------------------------------------------------------------- */
.bgparallax {
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
overflow: hidden !important;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.bgparallax-black { background-image: url("../images/bg/1.jpg"); }
.bgparallax-white { background-image: url("../images/bg/2.jpg"); }
.bgparallax-theme { background-image: url("../images/bg/3.jpg"); }
.bgparallax-black2 { background-image: url("../images/bg/4.jpg"); }
.bgparallax-white2 { background-image: url("../images/bg/5.jpg"); }
.bgparallax-theme2 { background-image: url("../images/bg/6.jpg"); }
.bgparallax-overlay {
width: 100%;
height: 100%;
padding: 100px 20px;
vertical-align: middle;
}
.bgparallax-overlay-black {
background: #000000;
background: rgba(0,0,0,0.4);
}
.bgparallax-overlay-white {
background: #ffffff;
background: rgba(255,255,255,0.4);
}
.bgparallax-overlay-theme {
background: #77a8d9;
background: rgba(119,168,217,0.4);
}
@media (max-width: 991px) {
.bgparallax .btn { margin-bottom: 0px; }
}
/* ----------------------------------------------------------------------
5-3. Bg Half
---------------------------------------------------------------------- */
.bghalf {
margin: 0;
padding: 0;
position: relative;
background-position: center left;
background-repeat: no-repeat;
-webkit-background-size: 30%;
background-size: 30%;
}
.bghalf-ripios {
margin: 0;
padding:50px;
position: relative;
background-position: center right;
background-repeat: no-repeat;
-webkit-background-size: 50%;
background-size: 50%;
}
.bghalf-ripios2 {
margin: 0;
padding:50px;
position: relative;
background-position: center right;
background-repeat: no-repeat;
-webkit-background-size: 50%;
background-size: 50%;
}
.bghalf-villas {
margin: 50px;
padding:50px;
position: relative;
background-position: center left;
background-repeat: no-repeat;
-webkit-background-size: 30%;
background-size: 30%;
}
.bghalf-restaurante {
margin: 0;
padding:50px;
position: relative;
background-position: center left;
background-repeat: no-repeat;
-webkit-background-size: 50%;
background-size: 50%;
}
.bghalf-nuestroservicios {
margin: 50px;
padding:50px;
position: relative;
background-position: center left;
background-repeat: no-repeat;
-webkit-background-size: 40%;
background-size: 40%;
}
@media (min-width: 992px) {
.bghalf .container-fluid { padding: 0 !important; }
}
@media (max-width: 991px) {
.bghalf .col-md-auto { min-height: 0 !important; }
}
.bghalf-black { background-image: url("../images/portfolio/17.jpg"); }
.bghalf-white { background-image: url("../images/portfolio/17.jpg"); }
.bghalf-nuestroservicios { background-image: url("../images/portfolio/17.jpg"); }
.bghalf-theme { background-image: url("../images/portfolio/17.jpg"); }
.bghalf-villas{ background-image: url("../images/portfolio/thumb55.jpg"); }
.bghalf-ripios{ background-image: url("../images/ripios/23.jpg"); }
.bghalf-ripios2{ background-image: url("../images/ripios/19.jpg"); }
.bghalf-restaurante{ background-image: url("../images/restaurante/2_restaurante.jpg"); }
.bghalf-content {
position: relative;
padding: 100px 50px;
z-index: 1;
}
.bghalf-content-black { background: #333333; }
.bghalf-content-white { background: #ffffff; }
.bghalf-content-theme { background: #77a8d9; }
.bghalf-content-villas{ background: #ededed; }
.bghalf-content-ripios{ background: #ededed; }
.bghalf-content-ripios2{ background: #dfffd6; }
.bghalf-content-restaurante{ background: #ededed; }
/* Skew */
@media (min-width: 992px) {
.skew-left:after {
content: '';
position: absolute;
top: 0;
left: -75px;
right: auto;
margin: auto;
width: 150px;
height: 100%;
z-index: -1;
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}
.skew-right:after {
content: '';
position: absolute;
top: 0;
left: auto;
right: -75px;
margin: auto;
width: 150px;
height: 100%;
z-index: -1;
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}
.bghalf-content-black.skew-left:after { background: #333333; }
.bghalf-content-white.skew-left:after { background: #ffffff; }
.bghalf-content-theme.skew-left:after { background: #77a8d9; }
.bghalf-content-black.skew-right:after { background: #333333; }
.bghalf-content-white.skew-right:after { background: #ffffff; }
.bghalf-content-theme.skew-right:after { background: #77a8d9; }
}
/* Image Position */
.bg-item-center img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
z-index: 5;
max-width: 100%;
height: auto;
}
.bg-item-right img {
position: absolute;
bottom: 0;
right: 100px;
z-index: 5;
max-width: 100%;
height: auto;
}
.bg-item-left img {
position: absolute;
bottom: 0;
left: 100px;
z-index: 5;
max-width: 100%;
height: auto;
}
@media (max-width: 991px) {
.bg-item-center img, .bg-item-right img, .bg-item-left img { display: none; }
}
@media (max-width: 991px) {
.bghalf-black .col-lg-1, .bghalf-black .col-lg-2, .bghalf-black .col-lg-3, .bghalf-black .col-lg-4, .bghalf-black .col-lg-5, .bghalf-black .col-lg-6, .bghalf-black .col-lg-7, .bghalf-black .col-lg-8, .bghalf-black .col-lg-9, .bghalf-black .col-lg-10, .bghalf-black .col-lg-11, .bghalf-black .col-lg-12, .bghalf-white .col-lg-1, .bghalf-white .col-lg-2, .bghalf-white .col-lg-3, .bghalf-white .col-lg-4, .bghalf-white .col-lg-5, .bghalf-white .col-lg-6, .bghalf-white .col-lg-7, .bghalf-white .col-lg-8, .bghalf-white .col-lg-9, .bghalf-white .col-lg-10, .bghalf-white .col-lg-11, .bghalf-white .col-lg-12, .bghalf-theme .col-lg-1, .bghalf-theme .col-lg-2, .bghalf-theme .col-lg-3, .bghalf-theme .col-lg-4, .bghalf-theme .col-lg-5, .bghalf-theme .col-lg-6, .bghalf-theme .col-lg-7, .bghalf-theme .col-lg-8, .bghalf-theme .col-lg-9, .bghalf-theme .col-lg-10, .bghalf-theme .col-lg-11, .bghalf-theme .col-lg-12 { margin-bottom: 0px; }
}
/* ----------------------------------------------------------------------
5-4. Overlay Box
---------------------------------------------------------------------- */
.overlaybox {
margin: 0;
padding: 0;
position: relative;
background-position: bottom right;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: 100%;
padding: 200px 150px 50px 0;
}
.overlaybox-right { padding: 150px 0 50px 150px; }
.overlaybox-villa1 { background-image: url("../images/portfolio/30.jpg"); }
.overlaybox-villa2 { background-image: url("../images/bg/7.jpg"); }
.overlaybox-ripio1 { background-image: url("../images/ripios/7.jpg"); }
.overlaybox-white { background-image: url("../images/bg/7.jpg"); }
.overlaybox-theme { background-image: url("../images/bg/1.jpg"); }
.overlaybox-black { background-image: url("../images/bg/9.jpg"); }
.overlaybox-content {
width: 100%;
height: auto;
z-index: 2;
padding: 50px;
}
@media (min-width: 992px) {
.overlaybox-content {
margin-left: -30px;
margin-right: auto;
}
.overlaybox-right .overlaybox-content {
margin-left: auto;
margin-right: -30px;
}
}
.overlaybox-content-villa1 { background: #77a8d9; }
.overlaybox-content-villa2 { background: #ffffff; }
.overlaybox-content-ripio1 { background: #ffffff; }
.overlaybox-content-white { background: #ffffff; }
.overlaybox-content-theme { background: #77a8d9; }
.overlaybox-content-black { background: #000000; }
@media (max-width: 991px) {
.overlaybox { padding: 100px 20px 100px 0; }
.overlaybox-right { padding: 100px 0 200px 20px; }
}
/* Overlay Box 2 */
.overlaybox2 {
margin: 0;
padding: 0;
position: relative;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
padding: 0 50% 0 0;
}
.overlaybox2.overlaybox-right { padding: 0 0 0 50%; }
.overlaybox-content2 {
width: 100%;
height: auto;
z-index: 2;
padding: 50px;
}
@media (min-width: 992px) {
.overlaybox-content2 {
margin-left: 0px;
margin-right: auto;
}
.overlaybox-right .overlaybox-content2 {
margin-left: auto;
margin-right: 0px;
}
}
@media (max-width: 991px) {
.overlaybox2 { padding: 0 20% 0 0; }
.overlaybox2.overlaybox-right { padding: 0 0 0 20%; }
}
/* Arrows */
.overlaybox-content, .overlaybox-content2 { position: relative; }
.arrow-left, .arrow-right, .arrow-top, .arrow-bottom {
position: absolute;
width: 0;
height: 0;
margin: auto;
z-index: 2;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
.arrow-right {
top: 0;
bottom: 0;
right: -30px;
border-left: 15px solid #ffffff;
}
.arrow-left {
top: 0;
bottom: 0;
left: -30px;
border-right: 15px solid #ffffff;
}
.arrow-top {
left: 0;
right: 0;
top: -30px;
border-bottom: 15px solid #ffffff;
}
.arrow-bottom {
left: 0;
right: 0;
bottom: -30px;
border-top: 15px solid #ffffff;
}
.arrow-right.arrow-white { border-left: 15px solid #ffffff; }
.arrow-left.arrow-white { border-right: 15px solid #ffffff; }
.arrow-top.arrow-white { border-bottom: 15px solid #ffffff; }
.arrow-bottom.arrow-white { border-top: 15px solid #ffffff; }
.arrow-right.arrow-black { border-left: 15px solid #000000; }
.arrow-left.arrow-black { border-right: 15px solid #000000; }
.arrow-top.arrow-black { border-bottom: 15px solid #000000; }
.arrow-bottom.arrow-black { border-top: 15px solid #000000; }
.arrow-right.arrow-theme { border-left: 15px solid #77a8d9; }
.arrow-left.arrow-theme { border-right: 15px solid #77a8d9; }
.arrow-top.arrow-theme { border-bottom: 15px solid #77a8d9; }
.arrow-bottom.arrow-theme { border-top: 15px solid #77a8d9; }
/* ----------------------------------------------------------------------
5-5. Bg Overwrite
---------------------------------------------------------------------- */
/* Text White */
.text-white, .text-white:before, .text-white:after { color: #ffffff !important }
/* Border White */
.border-white, .border-white:before, .border-white:after { border-color: #ffffff !important; }
/* Background White */
.bg-white, .bg-white:before, .bg-white:after { background-color: #ffffff !important; }
/* Border Transparent */
.border-transparent, .border-transparent:before, .border-transparent:after { border-color: transparent !important; }
/* Background Transparent */
.bg-transparent, .bg-transparent:before, .bg-transparent:after { background-color: transparent !important; }
/* Testimonial */
.bgcolors .testimonial, .bgparallax .testimonial { margin-bottom: 0; }
.bgcolors .testimonial-author:after, .bgparallax .testimonial-author:after { display: none; }
/* Pattern */
.bgcolors-gray .titleline-icon:after { background: #fdfdfd; }
.bgcolors-black .titleline-icon:after { background: #333333; }
.bgcolors-theme .titleline-icon:after { background: #77a8d9; }
.bgcolors-slash .titleline-icon:after { background: #fdfdfd url("../images/assets/bg-slash.png") repeat; }
/* Border */
.border-transparent { border: 1px solid transparent !important; }
.border-white { border: 1px solid #ffffff !important; }
.border-gray { border: 1px solid #8c8c8c !important; }
.border-black { border: 1px solid #0c0c0c !important; }
.border-pink { border: 1px solid #cc3d85 !important; }
.border-blue { border: 1px solid #3d85cc !important; }
.border-aqua { border: 1px solid #3dcccc !important; }
.border-green { border: 1px solid #3dcc85 !important; }
.border-olive { border: 1px solid #85cc3d !important; }
.border-yellow { border: 1px solid #cccc3d !important; }
.border-orange { border: 1px solid #cc853d !important; }
.border-red { border: 1px solid #cc3d3d !important; }
.border-theme { border: 1px solid #77a8d9 !important; }
/* ----------------------------------------------------------------------
6-1. Image Hover Effect
---------------------------------------------------------------------- */
/* image-hover-base */
.image-hover-base {
position: relative;
background: #000000;
margin-bottom: 0px;
text-align: center;
cursor: pointer;
z-index: 1;
overflow: hidden;
}
.image-hover-base2 {
position: relative;
background: #000000;
margin-bottom: 0px;
text-align: center;
cursor: pointer;
z-index: 1;
overflow: hidden;
}
.image-hover-base img {
position: relative;
display: block;
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
opacity: 1;
}
.image-hover-base2 img {
position: relative;
display: block;
width: 80%;
height: auto;
max-width: 80%;
max-height: 80%;
opacity: 1;
}
.image-hover-base figcaption {
padding: 2em;
color: #ffffff;
text-transform: none;
font-size: 0.9rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.image-hover-base2 figcaption {
padding: 2em;
color: #e3e3e3;
text-transform: none;
font-size: 0.9rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.image-hover-base figcaption::before, .image-hover-base figcaption::after { pointer-events: none; }
.image-hover-base figcaption, .image-hover-base figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image-hover-base2 figcaption, .image-hover-base2 figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 80%;
}
.image-hover-base figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.image-hover-base figcaption { opacity: 0; }
.image-hover-base:hover figcaption { opacity: 1; width: 80%;
height: 80%;}
.image-hover-base:hover img { opacity: 0.6; }
.image-hover-base h5 { color: #ffffff; }
/* Image Hover 13 */
.image-hover13 { background: #77a8d9; }
.image-hover13 img {
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.05, 1.05, 1);
transform: scale3d(1.05, 1.05, 1);
}
.image-hover13:hover img {
opacity: 0.1;
-webkit-transform: scale(1.2) rotate(1deg);
transform: scale(1.2) rotate(1deg);
}
.image-hover13 h5 {
position: absolute;
top: 0;
left: 0;
margin: 10px 0;
padding: 5px 15px;
text-align: left;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
.image-hover13 p {
position: absolute;
right: 0;
bottom: 0;
margin: 10px 0;
padding: 5px 15px;
text-align: right;
font-weight: 300;
font-size: 13px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
.image-hover13:hover h5,
.image-hover13:hover p {
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* ----------------------------------------------------------------------
6-2. Icon Hover Effect
---------------------------------------------------------------------- */
/* Icon Hover 21 */
.icon-hover21 {
position: relative;
z-index: 1;
display: inline-block;
-webkit-transition: color 1.0s;
transition: color 1.0s;
-webkit-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
}
.icon-hover21:after {
top: 0;
left: 0;
padding: 0;
box-shadow: 0 0 0 3px #77a8d9;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
}
.icon-hover21:hover:after {
-webkit-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
opacity: 0.5;
}
.icon-hover21:hover {
box-shadow: 0 0 0 10px #77a8d9;
color: #77a8d9;
}
/* ----------------------------------------------------------------------
6-3. Link Hover Effect
---------------------------------------------------------------------- */
/* Link Hover10 */
.link-hover10 {
position: relative;
padding: 5px 0;
}
.link-hover10:hover { text-decoration: none; }
.link-hover10::before, .link-hover10::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #77a8d9;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.link-hover10::before { top: 0; }
.link-hover10::after { bottom: 0; }
.link-hover10:hover::before, .link-hover10:hover::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0, 1.54, 0.34, 1);
transition-timing-function: cubic-bezier(0, 1.54, 0.34, 1);
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
/* ----------------------------------------------------------------------
6-4. Button Hover Effect
---------------------------------------------------------------------- */
/* Button Hover4 */
.button-hover4 .button { position: relative; }
.button-hover4 .button::before, .button-hover4 .button::after, .button-hover4 span::before, .button-hover4 span::after {
content: '';
position: absolute;
background: #77a8d9;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.button-hover4 .button::before, .button-hover4 .button::after {
top: 0;
width: 1px;
height: 100%;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}
.button-hover4 .button::before {
left: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.button-hover4 .button::after {
right: 0;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.button-hover4 span::before, .button-hover4 span::after {
left: 0;
width: 100%;
height: 1px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.button-hover4 span::before {
top: 0;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.button-hover4 span::after {
bottom: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.button-hover4 .is-checked::before, .button-hover4 .is-checked::after, .button-hover4 .is-checked span::before, .button-hover4 .is-checked span::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}