/* ==============================================
File Name: style.css
Author: Solien
Project Name: ARVEL

File Content:

1. Theme reset stylesheet
2. Theme included fonts
3. Section padding
4. Texts settings(text-align, text-transform)
5. Theme color
6. Theme text color
7. Theme font size
8. Theme font weight
9. Theme buttons
   9.1. Theme buttons media
10. Section title settings (h1, h6, h6:after, p)
   10.1. Section-title h1 when window size small than 768px
11. Demo green home start
		11.1. Home slider-img
		11.2. Home slider-button
		11.3. Home slider-texts
		11.4. Slider texts animation
		11.5. Home social
		11.6. Show slider texts when window size large than 414px
		11.7. Show slider texts when window size large than 320px
12. Demo dark home start,
		12.1. Slider-arrow
		12.2. Home slider-img
		12.3. Show slider texts when window size large than 320px
		12.4. Demo-dark services
		12.5. Demo-dark works
		12.6. Demo-dark fanfucts
		12.7. Demo-dark team
		12.8. Demo-dark pricing
13. About section
14. Services section
15. Works section
16. Fun facts section
17. Team section
18. Pricing section
19. Gontact section
20. Google map
21. Footer section
22. Back to top
23. Page loader
24. Index page
============================================== */




		/* ==============================================
    RESET -->
    =============================================== */
	html, body{ width:100%; max-width: 100%; height:auto; padding:0; margin:0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering:optimizeLegibility; text-rendering: geometricPrecision; }
	body{ overflow-x: hidden !important; overflow-y: scroll; -webkit-tap-highlight-color:rgba(0,0,0,0.3); font-style: normal; font-weight: 400; font-size: 15px; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing:antialiased; line-height: 30px; letter-spacing: 0px; color: #797979;}
	section, .cover{ background-size:cover; background-position: center center; background-repeat: no-repeat; }
	html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{ -webkit-text-size-adjust:none; }
	/* Undragable Images */
	img{display: block; width: 100%; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-user-drag: none; }
	.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,p{ color: inherit; font-variant-ligatures: common-ligatures; padding:0; margin:0; }
	ol, ul{ list-style: none; padding: 0; }
	a, a:hover, a:focus, button, button:hover, button:focus{ text-decoration: none; color: inherit;}
	*{ border:0; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	*, *:hover, *:focus{ outline:none !important; }
	.container{max-width: 1170px;}
	h6{font-size: 14px;}
	section{overflow: hidden;}

		/* ==============================================
		FONTS -->
		=============================================== */
		@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Playfair+Display:400,400i,700');

		.opensans{ font-family: "Open Sans", "PT Sans", sans-serif; }
		.playfair{ font-family: 'Playfair Display', serif;}
    .playfair-italic{ font-family: 'Playfair Display', serif; font-style: italic;}

		/* ==============================================
    SECTION PADDING -->
    =============================================== */
		.s-padding{padding: 120px 0;}

		@media screen and (max-width: 768px){
		.s-padding{padding: 80px 0;}
		}

		/* ==============================================
    TEXTS -->
    =============================================== *//
		.t-left{text-align: left;}
		.uppercase{text-transform: uppercase;}
		.t-center{ text-align: center;}

		/* ==============================================
    THEME COLOR -->
    =============================================== */
		.color-yellow{color: #E5CA00;}
		.color-green{color: #273335;}

		/* ==============================================
    THEME TEXT COLOR -->
    =============================================== */
		.t-color-1{color: #F2F2F2;}
		.t-color-2{color: #FFFFFF;}
		.t-color-3{color: #797979;}
		.t-color-4{color: #484848;}

		/* ==============================================
		THEME FONT SIZE -->
		=============================================== */
		.f-size-13{font-size: 13px;}
		.f-size-14{font-size: 14px;}
		.f-size-16{font-size: 16px;}
		.f-size-18{font-size: 18px;}
		.f-size-20{font-size: 20px;}
		.f-size-24{font-size: 24px;}
		.f-size-40{font-size: 40px;}
		.f-size-48{font-size: 48px;}
		.f-size-60{font-size: 60px;}

		/* ==============================================
		FONT-WEIGHT -->
		=============================================== */
		.f-weight-600{font-weight: 600;}

		/* ==============================================
		BUTTONS -->
		=============================================== */
		.button{color: #FFFFFF; background-color: transparent; text-transform: uppercase; font-size: 13px; font-weight: 700; border: 1px solid #E8E8E8; padding: 11px 60px; border-radius: 50em; transition: all 300ms ease-in-out;}
		.button:hover{color: #484848; background-color: #E5CA00; border: 1px solid #E5CA00;}

		.button-2{color: #484848; background-color: transparent; text-transform: uppercase; font-size: 13px; font-weight: 700; border: 1px solid #E8E8E8; padding: 11px 60px; border-radius: 50em; transition: all 300ms ease-in-out;}
		.button-2:hover{color: #484848; background-color: #E5CA00; border: 1px solid #E5CA00;}

		.button-3{color: #484848; background-color: #E5CA00; text-transform: uppercase; font-size: 13px; font-weight: 700; padding: 11px 60px; border-radius: 50em; transition: all 300ms ease-in-out;}

		/* ==============================================
		button when window size small than 414px -->
		=============================================== */
		@media screen and (max-width: 414px){
			.button{font-size: 11px; padding: 8px 45px;}
			.button-2{font-size: 11px; padding: 8px 45px;}
			.button-3{font-size: 11px; padding: 8px 45px;}
		}

		/* ==============================================
		section title settings (h1, h6, h6:after, p)
		=============================================== */
		/*  */
		.services .services-texts h1, .works .works-texts h1, .team .team-texts h1,.pricing .pricing-texts h1, .contact .contact-texts h1{padding: 40px 0 20px;}
	  .works .works-texts h6::after, .team .team-texts h6::after, .contact .contact-texts h6::after{content: ''; position: absolute; width: 50px; height: 2px; background-color: #797979; top: 35px; left: 50%; margin-left: -25px;}
		.services .services-texts h6, .works .works-texts h6, .team .team-texts h6,.pricing .pricing-texts h6, .contact .contact-texts h6{position: relative;}
		.services .services-texts h6::after, .pricing .pricing-texts h6::after{content: ''; position: absolute; width: 50px; height: 2px; background-color: #E1E1E1; top: 35px; left: 50%; margin-left: -25px;}
		.services .services-texts p, .works .works-texts p, .team .team-texts p,.pricing .pricing-texts p, .contact .contact-texts p{max-width: 831px; margin: 0 auto;}

		/* ==============================================
		section-title h1 when window size small than 768px
		=============================================== */
		@media screen and (max-width: 768px){
			.about .about-texts h1, .services .services-texts h1, .works .works-texts h1, .team .team-texts h1,.pricing .pricing-texts h1, .contact .contact-texts h1{font-size: 36px;}
		}

 /* ==============================================
 DEMO-GREEN HOME START
 =============================================== */
.home-green{ overflow: hidden; position: relative; height: 100vh;}
.slide{position: relative; width: 100%; height: 100vh;  background-repeat: no-repeat; background-size: cover; background-position: center center; }

/* home slider-img */
.image1{ background-image: url(../images/cadillac-paranhos-pilates-2.jpg);}
.image2{ background-image: url(../images/bg-1.jpg);}
.image3{ background-image: url(../images/bg-1.jpg);}

/* home slider-button */
.home-green .slider .slick-dots{position: absolute; right: 30px; top: 50%; margin-top: -100px; display: inline-grid;}
.home-green .slider .slick-dots li{position: relative; display: inline-block; width: 3px; height: 60px; margin: 10px 0px; padding: 0px; cursor: pointer; background-color: #B9B9B9; transition: all 300ms ease-in-out;}
.home-green .slider .slick-dots li:hover{background-color: #E5CA00;}
.home-green .slider .slick-dots li:active{background-color: #E5CA00; opacity: 1;}
.home-green .slider .slick-dots li button{font-size: 0;line-height: 0;display: block;width: 3px;height: 60px;padding: 0;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;}
.home-green .slider li.slick-active button {background-color: #E5CA00;}

/* home slider-texts */
.home-green .slider-texts{top: 50%; position: absolute; max-width: 504px; z-index: 1; webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.home-green .slider .slide .slider-texts h1{padding: 5px 0 30px; }
.home-green .slider-texts p{padding: 0 0 40px 0;}

/* slider texts animation */
.animate-reveal {opacity: 0;-webkit-animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards; -moz-animation: reveal 1s ease-in 1 normal forwards; -o-animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards; animation: reveal 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;}
.animate-first { -webkit-animation-delay: 0; -moz-animation-delay: 0; -o-animation-delay: 0; animation-delay: 0;}
.animate-second { -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; -o-animation-delay: 400ms; animation-delay: 400ms;}
.animate-third { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; }
@-webkit-keyframes reveal {
    0% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%);}
    100% { opacity: 1; -webkit-transform: translateY(-50%)); -moz-transform: translateY(-50%)); -o-transform: translateY(-50%)); transform: translateY(-50%));}
}

@-moz-keyframes reveal {
    0% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%);}
    100% { opacity: 1; -webkit-transform: translateY(-50%)); -moz-transform: translateY(-50%)); -o-transform: translateY(-50%)); transform: translateY(-50%));}
}

@-o-keyframes reveal {
    0% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%);}
    100% { opacity: 1; -webkit-transform: translateY(-50%)); -moz-transform: translateY(-50%)); -o-transform: translateY(-50%)); transform: translateY(-50%));}
}

@keyframes reveal {
    0% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%);}
    100% { opacity: 1; -webkit-transform: translateY(-50%)); -moz-transform: translateY(-50%)); -o-transform: translateY(-50%)); transform: translateY(-50%));}
}

/* home social */
.home-green .social{position: absolute; left: 30px; bottom: 20px;}
.home-green .social a{color: #FAFAFA; margin-right: 10px; padding: 10px;}
.home-green .social a:hover{color: #E5CA00;}

/* Show slider texts when window size large than 768px */
@media screen and (max-width: 768px){
	.home-green .slider .slide .slider-texts h1{font-size: 50px;}
	.home-green .slider .slide .slider-texts p{max-width: 380px;}
}

/* Show slider texts when window size large than 414px */
@media screen and (max-width: 414px){
	.slick-dots{right: 15px;}
	.cd-auto-hide-header .logo { left: 15px;}
	.home-green .slider .slide .slider-texts h1{padding: 10px 0 20px; font-size: 36px; max-width: 300px;}
	.home-green .slider .slide .slider-texts h6{font-size: 16px;}
	.home-green .slider .slide .slider-texts p{padding: 0 0 20px 0; font-size: 13px; max-width: 300px;}
	.home-green .social{left: 15px;}
	.home-green .social a{margin-right: 20px; padding: 0;}
}

/* Show slider texts when window size large than 320px */
@media screen and (max-width: 320px){
	.home-green .slider .slide .slider-texts h1{padding: 7px 0 15px; font-size: 29px; max-width: 250px;}
	.home-green .slider .slide .slider-texts h6{font-size: 14px;}
	.home-green .slider .slide .slider-texts p{padding: 0 0 20px 0; font-size: 13px; max-width: 250px; line-height: 25px;}
}
/* ==============================================
DEMO-GREEN HOME AND
=============================================== */

/* ==============================================
DEMO-DARK HOME START
=============================================== */
.header-dark{background-color: rgba(0,0,0,1) !important;}
.home-dark{ overflow: hidden; position: relative; height: 100vh;}
.slide{position: relative; width: 100%; height: 100vh;  background-repeat: no-repeat; background-size: cover; background-position: center center; }

/* slider-arrow */
.home-dark .dark-slider .slick-arrow{ width: 30px; height: 100px; position: absolute; top: 50%; margin-top: -20px; left: 0; z-index: 250; background-color: rgba(255,255,255,0.05);  color: #FFFFFF; font-size: 25px; text-align: center; padding: 0; outline: none; transition: all 300ms ease-in-out;}
.home-dark .dark-slider .slick-next{right: 0; left: auto;}
.home-dark .dark-slider .slick-arrow:hover{background-color: rgba(255,255,255,0.1); color: #fff; }

/* home slider-img */
.home-dark .dark-slider .image1{ background-image: url(../images/bg-1.jpg);}
.home-dark .dark-slider .image2{ background-image: url(../images/bg-1.jpg);}

.home-dark .dark-slider .slider-texts{top: 50%; position: relative; z-index: 1; webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.home-dark .dark-slider .slide .slider-texts h6{letter-spacing: 5px;}
.home-dark .dark-slider .slide .slider-texts h1{padding: 0 0 15px; font-size: 72px;}
.home-dark .dark-slider .slider-texts p{padding: 0 0 35px 0; max-width: 577px; margin: 0 auto;}

@media screen and (max-width: 414px){
	.home-dark .dark-slider .slide .slider-texts h1{ font-size: 42px;}
	.home-dark .dark-slider .slide .slider-texts h6{font-size: 14px; letter-spacing: 3px; padding-bottom: 10px;}
	.home-dark .dark-slider .slide .slider-texts p{ font-size: 13px; max-width: 300px;}
}

/* Show slider texts when window size large than 320px */
@media screen and (max-width: 320px){
	.home-dark .dark-slider .slide .slider-texts h1{font-size: 29px;}
	.home-dark .dark-slider .slide .slider-texts h6{font-size: 12px;}
	.home-dark .dark-slider .slide .slider-texts p{font-size: 13px; max-width: 250px; line-height: 25px;}
}

/* demo-dark services */
.dark-services{background-image: url(../images/bg-3.jpg) !important; background-repeat: no-repeat; background-size: cover; background-position: center center;}
/* demo-dark works */
.dark-works .works-items .item-img{background-color: #000 !important;}
/* demo-dark fanfucts */
.dark-fanfucts .fan-items .fan-img{background-color: #000 !important;}
/* demo-dark team */
.dark-team .team-members .member .member-img {position: relative; background-color: #000 !important;}
.dark-team .team-members .member .member-hover .member-hover-social a:hover{color: #000 !important;}
/* demo-dark pricing */
.dark-pricing {background-image: url(../images/pilates-planos.jpg) !important; background-repeat: no-repeat; background-size: cover; background-position: center center; }

.dark-footer{padding: 120px 0 0; background-image: url(../images/pilates-rodape.jpg) !important; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.dark-footer .footer-contact .social a{ background-color: rgba(0,0,0,0.2) !important;}
.dark-footer .newsletter a{background-color: rgba(0,0,0,0.2) !important; border: 1px solid rgba(255,255,255,0.05) !important;}
.dark-footer .footer-bottom .items{ border-top: 1px solid rgba(255,255,255,0.1) !important;}
/* ==============================================
DEMO-DARK HOME AND
=============================================== */

/* ==============================================
ABOUT START
=============================================== */
.about .about-img {padding: 0 35px;}
.about .about-texts {margin: auto;}
.about .about-texts h6::after{content: ''; position: absolute; width: 50px; height: 2px; background-color: #D8D8D8; top: 10px; margin-left: 15px;}
.about .about-texts h1{padding: 10px 0 25px 0;}
.about .about-texts p{max-width: 506px; padding-bottom: 15px;}
.about .about-texts .about-button{margin-top: 15px;}

/* Show about texts and img when window size large than 768px */
@media screen and (max-width: 768px){
  .about .about-img {padding: 0 10px 40px;}
	.about .about-texts h1{padding: 10px 0 15px 0;}
	.about .about-texts .about-button{margin-top: 5px;}

}

/* ==============================================
SERVICES START
=============================================== */
.services{background-image: url(../images/studio-paranhos-pilates.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}

/* services items */
.services .services-items{padding-top: 60px;}
.services .services-items .services-item{padding: 50px 28px; background-color: rgba(104,119,120,0.1); border-radius: 10px; margin: 0 10px; transition: all 300ms ease-in-out;}
.services .services-items .services-item img{width: auto; height: auto; display: inline-block;}
.services .services-items .services-item:hover{ background-color: rgba(120,160,163,0.1);}
.services .slick-arrow{display: none !important;}
.services .services-items .services-item h3{padding: 30px 0 10px 0;}
.services .services-items .services-item p{line-height: 25px;}

/* ==============================================
WORKS START
=============================================== */
/* works items */
.works .works-items{padding: 60px 0 30px 0;}
.works .works-items .item{padding-bottom: 30px;}
.works .works-items .item-img{background-color: #273335;}
.works .works-items .item-description{opacity: 0; position: absolute; position: absolute; top: 50%; margin-top: -25px; left: 0; right: 0; transition: all 700ms ease-in-out;}
.works .works-items .item-description h4{padding-bottom: 3px;}
.works .works-items .item a:hover .item-description{ opacity: 1;}
.works .works-items .item .item-img img{ transition: all 200ms ease-in-out;}
.works .works-items .item a:hover .item-img img{opacity: 0.05;}

/* Show about texts when window size large than 768px */
@media screen and (max-width: 768px){
	.works .works-items{padding: 30px 0 10px 0;}
}

/* ==============================================
FAN FUCTS START
=============================================== */
.fanfucts .fan-items .fan-img{background-color: #273335;}
.fanfucts .fan-items .fan-img img{opacity: 0.1; transition: all 300ms ease-in-out;  }
.fanfucts .fan-items .item:hover img{opacity: 0.4;  }
.fanfucts .fan-items .item {padding: 0;}
.fanfucts .fan-items .item .item-texts{position: absolute; top: 50%; margin-top: -65px; left: 0; right: 0;}
.fanfucts .fan-items .item .item-texts h1::after{content: ''; position: absolute; width: 50px; height: 2px; background-color: #E5CA00; top: 70px; left: 50%; margin-left: -25px;}
.fanfucts .fan-items .item .item-texts h3{padding-top: 40px;}

/* ==============================================
TEAM START
=============================================== */
.team .team-members {padding: 60px 0;}
.team .team-members .member .member-img {position: relative; background-color: #273335;}
.team .team-members .member .member-img img{transition: all 300ms ease-in-out;}
.team .team-members .member:hover img{opacity: 0.05}
.team .team-members .member .member-description h3{padding: 30px 0 10px 0;}

.team .team-members .member .member-hover {opacity: 0; transition: all 300ms ease-in-out;}
.team .team-members .member:hover .member-hover{opacity: 1;}
.team .team-members .member .member-hover .member-hover-text{position: absolute; top: 50%; margin-top: -5px; right: 0; left: 0;}
.team .team-members .member .member-hover .member-hover-social{position: absolute; bottom: 40px;right: 0; left: 0;}
.team .team-members .member .member-hover .member-hover-social a{color: #ffffff; font-size: 17px; padding: 10px; margin: 0 5px; border-radius: 3px; transition: all 300ms ease-in-out;}
.team .team-members .member .member-hover .member-hover-social a:hover{background-color: #E5CA00; color: #484848;}

/* team slider-button */
.team .team-slider .slick-dots{position: absolute; bottom: -18%; width: 100%; text-align: center;}
.team .team-slider .slick-dots li{position: relative; display: inline-block; width: 40px; height: 5px; margin: 0 5px; padding: 0px; cursor: pointer; background-color: #B9B9B9; transition: all 300ms ease-in-out;}
.team .team-slider .slick-dots li:hover{background-color: #E5CA00;}
.team .team-slider .slick-dots li:active{background-color: #E5CA00; opacity: 1;
}
.team .team-slider .slick-dots li:hover{background-color: #E5CA00;}
.team .team-slider .slick-dots li:active{background-color: #E5CA00; opacity: 1;}
.team .team-slider .slick-dots li button{font-size: 0;line-height: 0; display: block; width: 40px; height: 5px; padding: 0;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;}
.team .team-slider li.slick-active button {background-color: #E5CA00;}

/* Show team texts when window size large than 768px */
@media screen and (max-width: 768px){
	.team .team-members {padding: 50px 0 0;}
}

/* ==============================================
PRICING START
=============================================== */
.pricing {background-image: url(../images/pilates-planos.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; }

/* CONTACT START */
.contact { padding-bottom: 30px; }
.contact .contact-wrapper{padding: 45px 0 0;}
.contact .contact-wrapper input, textarea{font-size: 15px; padding: 13px; padding-left: 25px; margin-bottom: 20px;color: #484848; text-transform: uppercase; border: 1px solid #DFDFDF; background-color: #FAFAFA; width: 100%; border-radius: 50em;}
.contact .contact-wrapper textarea{height: 130px; border-radius: 10px;}
.contact .contact-wrapper .form-button{font-size: 15px; padding: 13px; color: #484848; border: none !important; background-color: #E5CA00; text-transform: uppercase; border-radius: 50em; padding: 13px 120px; font-weight: 700; transition: all 300ms ease-in-out;}
.contact .contact-wrapper .form-button:hover{box-shadow: 0 10px 35px -16px #000;}
.contact .contact-wrapper .form-send-button{ margin: 0 auto;}

/* ==============================================
GOOGLE MAP
=============================================== */
#map { width: 100%; height: 500px;  }
#map .gm-style-iw-d h4{font-size: 20px; color: #484848; padding-bottom: 5px;}
#map .gm-style-iw-d p{font-size: 14px;}
#google-map .text { width: 80%; text-align: center; margin: 0 auto; font-family: 'Playfair Display', serif; font-size: 18pt; }
#google-map iframe { width: 100%; }

@media only screen and (max-width: 767px) {

#google-map .text {margin-bottom: 20px;}
}
@media only screen and (min-width: 768px) {

  #google-map .text { width: 49.5%; display: inline-block; vertical-align: middle; text-align: center; font-size: 24pt; line-height: 24pt;  padding: 20px; margin: 0; }
  #google-map iframe { width: 50%; display: inline-block; vertical-align:middle; padding: 0; margin: 0; }
}
/* ==============================================
FOOTER START
=============================================== */
.footer{padding: 120px 0 0; background-image: url(../images/pilates-rodape.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.footer  h3{padding-bottom: 30px;}
.footer ul li a{line-height: 35px; transition: all 300ms ease-in-out;}
.footer ul li a:hover{ color: #E5CA00;}
.footer .footer-contact h4 {padding: 15px 0;}
.footer .footer-contact p{line-height: 25px; max-width: 250px;}
.footer .footer-contact .social{padding-top: 25px;}
.footer .footer-contact .social a{color: #ffffff; font-size: 17px; padding: 10px; margin-right: 10px; border-radius: 3px; background-color: rgba(61,70,72,0.5); transition: all 300ms ease-in-out;}
.footer .footer-contact .social a:hover{background-color: #E5CA00; color: #484848;}
.footer .newsletter p{line-height: 25px; max-width: 207px; padding-bottom: 20px;}
.footer .newsletter input{font-size: 13px; color: #797979; padding: 6px; padding-left: 18px; width: 200px; background-color: #fff; text-transform: uppercase; border-radius: 50em; margin-bottom: 20px;}
.footer .newsletter a{font-size: 13px; color: #ffffff; background-color: rgba(61,70,72,0.5) ;margin-top: 20px; padding: 12px 65px; border: 1px solid #3d4d50; border-radius: 50em; font-weight: 700; transition: all 300ms ease-in-out; }
.footer .newsletter a:hover{background-color: #E5CA00; color: #484848; border: none;}
.footer .footer-bottom{padding: 120px 0 0;}
.footer .footer-bottom .items{padding: 15px 0; border-top: 1px solid #4F5C5E;}
.footer .footer-bottom .items .footer-bottom-left, .footer-bottom-right{padding: 0;}
.footer .footer-bottom .items .footer-bottom-right{text-align: right;}

/* Show footer section when window size large than 991px */
@media screen and (max-width: 991px){
	.footer .footer-about, .footer-resources, .footer-contact{padding-bottom: 30px;}
	.footer h3{padding: 15px 0;}
	.footer .footer-bottom{padding: 60px 15px 0;}
}

/* Show footer section when window size large than 768px */
@media screen and (max-width: 768px){
	.footer{padding: 80px 0 0;}
	.footer .footer-bottom .items .footer-bottom-right{text-align: left;}
}

/* ==============================================
BACK TO TOP START
=============================================== */
.cd-top {
  display: inline-block; height: 50px; width: 50px; position: fixed; bottom: 40px; right: 10px; z-index: 1000; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); overflow: hidden; text-indent: 100%; white-space: nowrap; background: #E5CA00 url(../images/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s, background-color .3s 0s;
transition: opacity .3s 0s, visibility 0s .3s, background-color .3s 0s;
}

.cd-top.cd-top--show,
.cd-top.cd-top--fade-out,
.cd-top:hover {-webkit-transition: opacity .3s 0s, visibility 0s 0s, background-color .3s 0s; transition: opacity .3s 0s, visibility 0s 0s, background-color .3s 0s;}

/* the button becomes visible */
.cd-top.cd-top--show {visibility: visible; opacity: 1;}

/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
.cd-top.cd-top--fade-out {opacity: .4;}
.cd-top:hover {background-color: #E5CA00; opacity: 1;}

@media only screen and (min-width: 768px) {
  .cd-top {right: 20px; bottom: 20px;}
}

@media only screen and (min-width: 1024px) {
  .cd-top {height: 50px; width: 50px; right: 30px; bottom: 30px; border-radius: 5px;}
}

/* ==============================================
PAGE LOADER
=============================================== */
.pageloader{position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: #000; z-index: 1000;}
.pageloader .loader{ position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50% -50%); -webkit-transform: translate(-50% , -50%); transform: translate(-50% -50%); }

/* ==============================================
INDEX PAGE
=============================================== */
.index-page{width: 100%; min-height: 100vh; background-image: url(../images/index-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;}
.index-header .index-logo{padding: 90px 0 40px;}
.index-header .index-logo img{max-width: 98px; margin: 0 auto;}
.index-header .index-header-subtitle h6{font-family: OpenSans-SemiBold; font-size: 13px; letter-spacing: 1px; padding: 25px 0 100px;}
.index-demos .demo {padding-top: 10px;}
.index-demos .demo img{border-radius: 10px;}
.index-demos .demo h6{font-family: OpenSans-SemiBold; font-size: 13px; letter-spacing: 1px; padding-top: 40px; color: #484848;}
.index-demos .demo .demos-img{transition: all 300ms ease-in-out;}
.index-demos .demo a:hover .demos-img{box-shadow: 0px 30px 60px -50px #000; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px);}
.index-page .index-footer{padding: 130px 0 15px;}
.index-page .index-footer h6{letter-spacing: 1px; font-size: 13px; color: #727272;}
.index-page .index-footer h6 i{color: #D70000;}

/* Show index page when window size large than 768px */
@media screen and (max-width: 768px){
	.index-header .index-header-subtitle h6{padding: 25px 0 50px;}
	.index-header .index-logo{padding: 50px 0 30px;}
	.index-demos .demo h6{padding: 20px 0 40px;}
	.index-page .index-footer{padding: 60px 0 15px;}
	.index-page .index-footer h6{font-size: 12px;}
}