/* 

gris menu #333333
text gris #4d4d4d
gris claro #999999
title verde #357358
verde #409649
fondo #ffffff
fondo 2 #f2f2f2



*/

* {
	font-family: 'Lato', sans-serif;
	color: #4d4d4d;
    line-height: 1.5;
    font-size: 18px;
}
.offer-description br {line-height: 15px}

html {
    scroll-behavior: smooth;
    font-size: 15px;
}

.full-container {
	max-width: 100%;
	width: 100%;
    padding: 0;
    height: 100%;
}

.row {
	padding: 0;
	margin: 0;
}

::-moz-selection, ::selection {
    background-color: #409649;
    color: white;
}

.center {
    text-align: center;
}


p {
    font-size: 1rem;
}

.mb-10, .my-10 {
    margin-bottom: 6rem !important;
}

.mt-10, .my-10 {
    margin-top: 6rem !important;
}

.p-10 {
    padding: 6rem !important;
}


.pt-10 {
    padding-top: 6rem !important;
}

.pb-10 {
    padding-bottom: 6rem !important;
}

.w-90 {
    width: 90% !important;
}

.fade-ac {
    opacity: 0;
}

/**
 * ==================
 *  Nav
 * ==================
 **/

.fixed-top {
	position: sticky;
	position: -webkit-sticky;
}

.fixed-submenu {
    position: fixed;
    width: 100%;
}

.bar {
	height: 0.25rem;
	width: 100%;
	background-color: #357358;
	top: 0;
}

#bar {
	height: 0.25rem;
	width: 0;
	background-color: #357358;
	bottom: 0;
	position: absolute;
}

.nav-sticky {
	box-shadow: 0px 0.2rem 0.5rem rgba(40, 96, 49, 0.8);
}

/**
 * ==================
 *  Rows and Cols
 * ==================
 **/

.card-title {
    color: #357358;
    font-weight: bold;
}

.card-text {
    color: #4d4d4d;
    font-size: 1rem;
}

.card-text-md {
    font-size: 0.85rem;
}

.card-title-sm {
    font-size: 1.2rem;
}

.card-text-sm {
    font-size: 0.7rem;
}

.card-button, .btn-callus {
    background-color: #409649;
    border-color: #409649;
    color: white;
    font-size: 0.8rem;
}

.card-button:hover, .btn-callus:hover {
    background-color: #409649;
    color: white;
}

.btn-callus {
    background-color: #357358;
    border-radius: 5rem;
    border: 3px solid white;
    padding-left: 4rem;
    padding-right: 4rem;
    font-size: 1.5rem;
}

.btn-callus:hover {
    border: 3px solid white;
}

.card-text-lg {
    font-size: 1.5rem;
}

.card-text-description {
    color: #333333;
    font-size: 1.2rem;
}

.card-popup {
    background-color: #f2f2f2;
    box-shadow: -1px 1px 3px #ccc;
    border-radius: 2rem;
}

/*
.card-popup-white {
    background-color: white;
}*/


.card-list li {
    padding: .25rem;
    background-color: transparent;
    border: none;
    font-size: 15px;
}

#card-general-contracting {
    float: right;
}

#card-air-conditioning {
    float: left;
}

.green-bottom-border {
    border-bottom: 20px solid #357358;
}

.offer-body {
    background-color: #f2f2f2;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 2px 3px #ccc;
    border-end-start-radius: 20px ;
    border-end-end-radius: 20px;
	border-bottom-right-radius: 11px;
	border-bottom-left-radius: 11px;
}
.offers .card {  border: none; padding: 10px}
.card-body.offer-body { padding: 0;}

.offer-name {
    color: white;
    background-color: #333333;
    margin: 0;
	padding: 1rem;
}

.offer-description {
    margin: 0;
    font-size: 0.85rem;padding: 1rem;
}

.card-vertical {
    font-size: 1.1rem;
    border-radius: 1rem;
    box-shadow: 1px 2px 3px #ccc;
}

.card-vertical-header {
    background-color: #357358;
    height: 10rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding-top: 10%;
}

.card-vertical-header img{
    height: 80%;
} 


.card-vertical-body {
    background-color: white;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.air-scrubber-card {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    box-shadow: 1px 1px 5px #ccc;
}

.air-scrubber-card {
    border-radius: auto;
    background-color: rgba(255, 255, 255, 0.7);
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    box-shadow: 1px 1px 5px #ccc;
}
.air-scrubber-card p {
    font-size: 16px !important;
    font-weight: 600;
color: #000;}

.as-list {
    padding: auto;
    margin-left: 0rem;
}

.as-img {
    border-radius: auto;
}

.card-energy-efficiency {
    background-position: left;
	background-repeat: no-repeat;
    background-size: cover;
    min-height: 23rem;
}
.card-energy-efficiency row {width: 75%}

.card-energy-efficiency h4, .card-energy-efficiency p {
    color: white;
}

.card-toggle {
    background-color: #357358;
    color: white;
}

.card-toggle p {
    color: white;
    margin: 0;
    padding: 0;
    line-height: 2rem;
}

.air-conditioning-card h4 {
    font-size: 1.2rem;
}

.air-conditioning-card p {
    font-size: 0.9rem;
}

.airconditioner.list-group .list-group-item {
    font-size: 0.9rem;
    padding: 0;
}

/**
 * ==================
 *  Services
 * ==================Shockoe170986
 **/

.btn-sections {
    color: white;
    padding: 0.8rem;
    position: relative;
    padding: 0.5rem 0 0.5rem 0;
    margin: 0;
    line-height: 1rem;
}

.btn-sections a, .btn-sections a:hover {
    color: white;
    font-size: 0.8rem;
}



/**
 * ==================
 *  Portraits
 * ==================
 **/

.align-content-center {
-ms-flex-line-pack: center!important;
align-content: center!important;
margin-top: auto !important;
margin-bottom: auto !important;
}
.portrait h1, .portrait h4 a{
    color: white;
}

.portrait {
    height: 250px;
}

.portrait h1 {
    font-size: 1.5rem;
}

.static-portrait {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.green-hover {
    position: relative;
    z-index: 2;
    background: rgba(40, 96, 49, 0.8);
    transition: opacity 200ms ease-in-out;
    border-radius: 4px;
    margin:0;
    padding: 0;
}

.dark-hover {
    position: relative;
    z-index: 2;
    background: rgba(33, 33, 33, 0.3);
    transition: opacity 200ms ease-in-out;
    border-radius: 4px;
    margin:0;
    padding: 0;
}

.dark-md-hover {
    display: flex;
    justify-content: center;
    z-index: 2;
    background: rgba(255, 255, 255, 0.2);
    transition: opacity 200ms ease-in-out;
    border-radius: 4px;
    margin: -15px 0 0 -15px;
}

.about-portrait {
    min-height: 80rem;
    background-position: center top;
}

.contact-portrait {
    min-height: 40rem;
}


.contact-portrait h3, .contact-portrait p {
    color: white;
}

.font-size-lg {
    font-size: 3rem;
}

.font-size-sm {
    font-size: 0.8rem;
}

.subtitle {
    color: white;
    font-size: 3rem;
    font-family: 'Amiri', serif;
}

.card-free {
    margin: auto;
    margin-top: 2rem;
    max-width: 225px;
}

.card-free .card-vertical-body p {
    font-size: 0.8rem;
}

/**
 * ==================
 *  Backgrounds
 * ==================
 **/

.bg-gray {
    background-color: #f2f2f2;
}

.bg-darkgray {
    background-color: #ddd;
}

.bg-hero {
    background-size: cover;
    background-position: center;
    color: white;
    min-height: 30rem;
}

.bg-dark {
    background-color: #333333;
}

/**
 * ==================
 *  Menu
 * ==================
 **/
.menu-item {
    font-weight: bold;
}

.menu-item li a {
    font-size: 0.85rem;
}

.menu-item li a:hover {
    color: #409649 !important;
}

.active-menu-item, .active-menu-item:hover {
    color: #409649 !important;
}

.phone {
    color: #999999;
}

/**
 * ==================
 *  Footer
 * ==================
 **/
footer {
    background-color: #357358;
    color: white;
}

footer ul li a {
    color: white;
    font-size: 0.85rem;
}

footer ul li a:hover {
    color: white;
}

/**
 * ==================
 *  Sections
 * ==================
 **/
.section {
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
}

.section2 {
    background-position: bottom right;
    background-repeat: no-repeat;
}

.img-cert {
    height: 80px;
}

.contact-text {
    color: white;
}

.bg-contact {
    background-image: url(../images/contact/contact-1.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.team-container {
    position: relative;
    border-radius: 1rem;
}

.middle {
    background: rgba(40, 96, 49, 0.85);
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
}

.middle .text {
    position: relative;
    color: white;
    font-size: 16px;
    padding: 14px 10px;
    margin-top: auto;
    margin-bottom: auto;
}


.middle .text p {
    color: white;
    font-size: 14px;
    line-height: 22px;
}
  
.team-container:hover .image {
    opacity: 0.3;
}

.team-container:hover .middle {
    opacity: 1;
}


.team-pic, .middle {
    border-radius: 0rem;
    box-shadow: 1px 1px 3px #ccc;
}
.team-desc{
	font-size: 14px
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    right: -1rem;
    position: absolute;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    left: -1rem;
    position: absolute;
}

.testimonial-title {
    color: #357358;
}

.card-annual-maintenance {
    background-color: white;
    border-radius: 1rem;
    border: 2px solid white;
    min-height: 215px;
    box-shadow: 1px 1px 3px #ccc;
    max-width: 225px;
    margin: auto;
}

.card-annual-maintenance-img {
    background-color: #357358;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.card-annual-maintenance-img img {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.card-annual-maintenance p {
    font-size: 1.2rem;
}

.bg-annualpreventative {
    background-image: url(../images/services/services-5.jpg);
    background-size: auto 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-color: #f2f2f2;
}

.bg-generalcontrating {
    background-image: url(../images/services/services-6.jpg);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-offers {
    background-image: url(../images/financing/financing.jpg);
    background-size: cover;
    background-position: left bottom;
    background-repeat: no-repeat;
    min-height: 460px;
}

.bg-contact {
    background-image: url(../images/contact/contact-1.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.bg-about {
    background-image: url(../images/about/about-1.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.bg-creatingcomfortable {
    background-image: url(../images/home/home-1.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.bg-whyus {
    background-image: url(../images/home/home-4.jpg);
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
}

.bg-airscrubber {
    background-image: url(../images/services/services-2bg.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.bg-whatcanyouexpect {
    background-image: url(../images/services/services-4.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 550px;
} 

.bg-mobile-whyus {
    background-image: url(../images/home/home-4.jpg);
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
    background-color: #ccc;
    height: 264px;
}

.bg-mobile-home-1 {
    background-image: url(../images/home/home-1.jpg);
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-color: #ccc;
    height: 264px;
    display: block;
}

.gc-list-item {
    font-size: 1rem;
}

.credits-btn {
    width: 100%;
}

.portrait-image {
    position: relative;
}

.portrait-image .portrait-data-md {
    position: absolute;
}

.sm-text, .sm-text p {
    font-size: 0.85rem;
}

#offers-section-title {
    top: 30%;
}

.testimonial {
    padding: 3rem !important;
}

.hdiv {
    position: absolute;
    background-color: white;
    width: 1px;
    height: 60%;
    top: 20%;
    right: 0;
}

.br-white {
    border-right: 1px solid white;
}

.air-scrubber-card p.text-left {
    font-size: 0.9rem;
}
.btn-accordion{
	display: inline-flex;
	padding: 0;
}
.btn-accordion.btn-link:hover, .btn-accordion.btn-link:focus, .btn-accordion.btn-link:active, .btn-accordion.btn-link {
	text-decoration: none !important;
	box-shadow: none !important;
}
.btn-accordion.btn-link:hover {
	text-decoration: none !important;
	box-shadow: none !important;
	background-color: #295944;
}
.btn-accordion.btn-link p {padding-left: 0px; transition: .5s}
.btn-accordion.btn-link:hover p {padding-left: 20px}

.callBtn { display: none; position: absolute; }

.link-white a {color: #FFFFFF; transition: .3s}
.link-white a:hover {color: #007bff; text-decoration: underline}

.external-link h3 {}

.containervideoYT {
     position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.videoYT {
     position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.familyPhoto {background-image: url(../images/about/2017-2018-Photos-Maui-family.jpg); background-size: cover; background-position: top center;min-height: 400px;}
.aboutCopy {}

.ourTeamText p {padding-left: 40%; float: right; text-align: right}
.ourTeamText h3 {text-align: right}
.ourTeamText a {float: right;}
.aboutUsImg {background-image: url(../images/about/Absolute-AC-About-Us-Pic.jpg); background-size: cover; background-position: top center;min-height: 450px;}

/**
 * ==================
 *  Media
 * ==================
 **/

/*sm*/
@media (max-width:575px) {
	.containervideoYT {
    padding-bottom: 56.25%;
}
	.hdiv {width: 0px}
	.callBtn { 
	display: block;
	position: fixed;
	z-index: 20;
	bottom: 20px;
    right: 15px;
    -webkit-box-shadow: -2px 2px 4px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: -2px 2px 4px 0px rgba(0,0,0,0.4);
    box-shadow: -2px 2px 4px 0px rgba(0,0,0,0.4);
    background-color: #357358;
    padding: 2px 10px;
    border-radius: 20px;
    border: 2px solid #fff;
	}
	.callBtn a{color: #FFFFFF; font-size: 16px; font-weight: 600;}
	#airscrubber .col-sm-12 {min-height: 70px}
	.fixed-submenu {
    position: relative;
		top: 0px !important;
    width: 100%;
}
	.bg-offers {
		background-image: url(../images/financing/financing-mobile.png);
        min-height: 300px;
		background-size: contain;
    background-position: right bottom;
    }
	
	.bg-creatingcomfortable {
    background-image: url(../images/home/home-1.jpg);
    background-size: 160%;
	background-position: -40px bottom;
	min-height: 290px}
	
	.bg-whyus {
    min-height: 120px;
		    background-size: 175%;
    background-position: 80% center;
}
	
	.portrait h1 {
    font-size: 1.8rem;
}
    .middle .text p {
        color: white;
        font-size: 15px;
        line-height: 21px;
    }

    .order-sm-1, .order-md-1 {
        order: 1 !important;
    }

    .order-sm-2, .order-md-2 {
        order: 2 !important;
    }

    .text-sm-center {
        text-align: center !important;
    }

    .bb-white-submenu-xs {
        border-bottom: 1px solid white;
    }

    .bg-sections.bg-sm {
        background-image: none;
    }

    .hideInMobile {
        display: none;
    }

    .card-toggle p {
        color: white;
        margin: 0;
        padding: 0;
        font-size: 0.8rem;
        line-height: 1rem;
    }

    .ml-0{
        margin-left: 0 !important;
    }
	.card-energy-efficiency {
    background-position: right;
	background-repeat: no-repeat;
    background-size: cover;
    min-height: 23rem;
}
.card-energy-efficiency row {width: 100%}
	.external-link a {font-size: 16px !important}
	
	.ourTeamText p {padding-left: 0; float: none; text-align: center}
.ourTeamText h3 {text-align: center; margin-top: 30px}
.ourTeamText a {float: none; margin-left: auto; margin-right: auto}
	.ourTeamText {text-align: center}
	.aboutUsImg {min-height: 280px;}
}

/*some BG sections */
@media (min-width: 576px) and (max-width: 991px) {
    .bg-creatingcomfortable {
        min-height: 330px;
		    background-size: 120%;
    }
	.bg-whyus {
    min-height: 170px;
		background-size: 110%;
    background-position: center;
}
	.bg-offers {
        min-height: 250px;
		background-size: 80%;
    background-position: 10% bottom;
    }
	.aboutUsImg {min-height: 360px;}
}

@media (min-width: 576px) {
    .static-portrait.center-right {
        background-position: center right;
    }

    .bb-white-submenu-sm {
        border-bottom: 1px solid white;
    }

    .sm-hidden {
        display: none;
    }
}

@media (max-width: 474px) {
    #mobilewhyus {
        text-align: right;
    }

    .btn-callus {
        font-size: 1rem;
    }

    #offers-section-title {
        top: 10%;
    }

    .carousel .carousel-control-prev,.carousel .carousel-control-next {
        display: none;
    }

    .testimonial {
        padding: 1rem !important;
    }

    .static-portrait.center-right {
        background-position: center right;
    }
}

/*md*/

@media (min-width: 768px) {
	#airscrubber .col-sm-12 {min-height: 70px}
    .br-white-md {
        border-right: 1px solid white;
    }

    .as-img {
        border-radius: 0;
    }

    .portrait-text-lg h1 {
        font-size: 1.8rem;
    }

    .bg-whatcanyouexpect {
        min-height: 250px;
    }

    .hidden-sm-min {
        display: none;
    }
}

@media (max-width: 768px) {
    .card-title-sm {
        font-size: 1.2rem;
    }
    
    .card-text-sm {
        font-size: 1rem;
    }

    .card-popup-white {
        background-color: white;
    }

    .bt-white-submenu {
        border-top: 1px solid white;
    }

    .bb-white-submenu {
        border-bottom: 1px solid white;
    }

    .card-free .card-vertical-body p {
        font-size: 0.8rem;
    }

    .card-free .card-vertical-header {
        height: 8rem;
    }
}

@media (max-width: 767px) {
    .bg-offers, .bg-whatcanyouexpect {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .bg-sections.bg-md {
        background-image: none;
    }

    .as-img {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    .mt-xs-3 {
        margin-top: 1rem !important;
    }
    

    .mt-sm-3 {
        margin-top: 1.5rem;
    }

    .text-md-center, .text-sm-center {
        text-align: center;
    }

    .sm-full {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .bg-contact {
        background-position: right bottom;
    }

    .bg-about {
        background-position: center top;
    }

    .card-popup {
        width: 100%;
    }

    .carousel-control-next {
        right: -2rem;
    }
    
    .carousel-control-prev {
        left: -2rem;
    }

    .title-hidden {
        display: none;
    }
}

/*lg*/

@media (min-width: 992px) {
    .bg-whatcanyouexpect, .bg-creatingcomfortable {
        min-height: 550px;
    }

    .bg-whyus {
        min-height: 300px;
    }

    .md-hidden {
        display: none;
    }

    .portrait-text-lg h1 {
        font-size: 2.5rem;
    }

    .portrait-image .portrait-data {
        position: absolute;
        top: 10%;
        left: 0;
    }

    .lg-hidden {
        display: none;
    }

    .lg-hdiv {
        height: 40%;
        top: 30%;
    }

    .bb-white-submenu-sm {
        border-bottom: none;
    }

    .ml-lg-10, .mx-lg-10 {
        margin-left: 6rem!important;
    }

    .mt-xl-10 {
        margin-top: 6rem !important;
    }

    .mb-xl-10 {
        margin-bottom: 6rem !important;
    }

    .title-lg-hide {
        display: none;
    }
}



@media (max-width: 991px) {


    

    .bg-whatcanyouexpect {
        min-height: 200px;
    }

    .bg-sections.bg-lg {
        background-image: none;
    }

    .sm-text, .sm-text p {
        font-size: 1rem;
    }

    .portrait-image .portrait-data-md {
        position: absolute;
        top: 10%;
        left: 0;
    }

    .xlg-hidden {
        display: none;
    }

    .air-scrubber-card {
        border-top-left-radius: auto;
        border-bottom-left-radius: auto;
        box-shadow: 1px 1px 5px #ccc;
        border-radius: 1rem;
    }

    .as-list {
        padding: 3rem;
        margin-left: 3rem;
    }

    .navbar-brand img {
        height: 24px;
        margin-left: 2rem;
    }

    .subtitle-home-hide {
        display: none;
    }

    
}



/*xl*/
@media (min-width: 1200px) {
    .ml-xl-10, .mx-xl-10 {
        margin-left: 6rem!important;
    }

    .mt-xl-10 {
        margin-top: 6rem !important;
    }

    .mb-xl-10 {
        margin-bottom: 6rem !important;
    }

    .gc-list-item {
        font-size: 0.8rem;
    }
	.bg-offers {
		background-size: 75%;}
	.portrait-image .portrait-data { top: 13%; }
.aboutCopy.sm-text, .aboutCopy.sm-text p { font-size: 1rem;}
	
	.portrait-data { padding: 0 10%}
}
   

/*4k*/
@media (min-width:2000px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 90%;
}
	.sm-text, .sm-text p {font-size: 1.4rem;}
	.familyPhoto {    min-height: 650px; }
	.middle .text p {font-size: 24px; line-height: 32px;}
	.offer-description { font-size: 1.4rem;  }
	.h5, h5 { font-size: 1.8rem;}
    
}


/**
 * ==================
 *  Animation
 * ==================
 **/

 @keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	
	50% {
		opacity: 1;
	}
}

.zoomIn {
	animation: zoomIn 3s normal forwards;
}


@keyframes zoomOut {
	from {
		opacity: 1;
	}
	
	50% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	
	to {
		opacity: 0;
	}
}

.zoomOut {
	animation: zoomIn 3s normal forwards;
}


.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

.slideOutRight {
    -moz-animation: slideOutRight 2s forwards;
    -webkit-animation: slideOutRight 2s forwards;
    animation: slideOutRight 2s forwards;
}

.slideOutLeft {
    -moz-animation: slideOutLeft 2s forwards;
    -webkit-animation: slideOutLeft 2s forwards;
    animation: slideOutLeft 2s forwards;
}

.slideInLeft {
    -moz-animation: slideInLeft 2s forwards;
    -webkit-animation: slideInLeft 2s forwards;
    animation: slideInLeft 2s forwards;
}

.slideInRight {
    -moz-animation: slideInRight 2s forwards;
    -webkit-animation: slideInRight 2s forwards;
    animation: slideInRight 2s forwards;
}


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

@keyframes slideInLeft {
    from {
      transform: translate3d(-20%, 0, 0);
      visibility: hidden;
    }
  
    to {
      visibility: visible;
      transform: translate3d(0, 0, 0);
    }
}


@keyframes slideInRight {
    from {
      transform: translate3d(0, 0, 0);
      visibility: hidden;
    }
  
    to {
      visibility: visible;
      transform: translate3d(-20%, 0, 0);
    }
}


@media only screen and (max-width: 768px) {
    @keyframes slideOutLeft {
        from {
          transform: translate3d(0, 0, 0);
          visibility: hidden;
        }
      
        to {
          visibility: visible;
          transform: translate3d(0, 0, 0);
        }
    }

    @keyframes slideOutRight {
        from {
          transform: translate3d(0, 0, 0);
          visibility: hidden;
        }
      
        to {
          visibility: visible;
          transform: translate3d(0, 0, 0);
        }
    }
}

@media only screen and (min-width: 769px) {
    @keyframes slideOutRight {
        from {
          transform: translate3d(0, 0, 0);
          visibility: hidden;
        }
      
        to {
          visibility: visible;
          transform: translate3d(20%, 0, 0);
        }
    }
    
    @keyframes slideOutLeft {
        from {
          transform: translate3d(0, 0, 0);
          visibility: hidden;
        }
      
        to {
          visibility: visible;
          transform: translate3d(-20%, 0, 0);
        }
    }
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}