/*--
	Author: W3Layouts
	Author URL: http://w3layouts.com
	License: Creative Commons Attribution 3.0 Unported
	License URL: http://creativecommons.org/licenses/by/3.0/
--*/
* {
	transition: none;
}

/* banner slider */
.radio {
    display: none;
}

.images {
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.images-inner {
    width: 500%;
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.image-slide {
    width: 20%;
    float: left;
}

.image-slide,
.fake-radio,
.radio-btn {
    transition: all 0.5s ease-out;
}

.fake-radio {
    text-align: center;
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    z-index: 9;
}

/* Move slides overflowed container */
#slide1:checked ~ .images .images-inner {
    margin-left: 0;
}

#slide2:checked ~ .images .images-inner {
    margin-left: -100%;
}

#slide3:checked ~ .images .images-inner {
    margin-left: -200%;
}

/* Color of bullets */
#slide1:checked ~ div .fake-radio .radio-btn:nth-child(1),
#slide2:checked ~ div .fake-radio .radio-btn:nth-child(2),
#slide3:checked ~ div .fake-radio .radio-btn:nth-child(3) {
    background: #F87B9D;
}

.radio-btn {
    width: 10px;
    height: 10px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    display: inline-block !important;
    margin: 0 1px;
    cursor: pointer;
}

/* Color of bullets - END */

/* Text of slides */
#slide1:checked ~ .labels .label:nth-child(1),
#slide2:checked ~ .labels .label:nth-child(2),
#slide3:checked ~ .labels .label:nth-child(3) {
    opacity: 1;
}

.label {
    opacity: 0;
    position: absolute;
}

/* Text of slides - END */

/* Calculate AUTOPLAY for BULLETS */
@keyframes bullet {

    0%,
    33.32333333333334% {
        background: #F87B9D;
    }

    33.333333333333336%,
    100% {
        background: white;
    }
}

#play1:checked ~ div .fake-radio .radio-btn:nth-child(1) {
    animation: bullet 12300ms infinite -1000ms;
}

#play1:checked ~ div .fake-radio .radio-btn:nth-child(2) {
    animation: bullet 12300ms infinite 3100ms;
}

#play1:checked ~ div .fake-radio .radio-btn:nth-child(3) {
    animation: bullet 12300ms infinite 7200ms;
}

/* Calculate AUTOPLAY for BULLETS - END */

/* Calculate AUTOPLAY for SLIDES */
@keyframes slide {

    0%,
    25.203252032520325% {
        margin-left: 0;
    }

    33.333333333333336%,
    58.53658536585366% {
        margin-left: -100%;
    }

    66.66666666666667%,
    91.869918699187% {
        margin-left: -200%;
    }
}

.st-slider > #play1:checked ~ .images .images-inner {
    animation: slide 12300ms infinite;
}

/* Calculate AUTOPLAY for SLIDES - END */
/* //banner slider */


/* background images for banner */
.banner-real-1 {
    background: url(../images/slide2.jpg) no-repeat top;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 700px;
}

.banner-real-2 {
    background: url(../images/slide1.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 700px;
}

.banner-real-3 {
    background: url(../images/slide3.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 700px;
}

/* //background images for banner */

/* banner-text */
div#homepage-slider {
    position: relative;
    z-index: 9;
    padding-top: 70px;
}

.banner-text {
    margin: 0 auto;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.banner-text h1.banner-txt {
    color: #ffffff;
    font-weight: 700;
    font-size: 4.5rem;
    line-height: 5.85rem;
}


.banner-text p.banner-txt1 {
    color: #fff;
    font-size: 1.5rem;
    line-height: 41px;
    font-weight: 400;
    margin: 1.5em auto 0;
}

/* //banner-text */

/* responsive code */

@media screen and (max-width:1366px) {
	.banner-text h1.banner-txt {
		font-size: 3.5rem;
	}
	.banner-text p.banner-txt1 {
		font-size: 1.3rem;
		line-height: 36px;
		margin: 1.3em auto 0;
	}
}
@media screen and (max-width:1280px) {
	.banner-real-1, .banner-real-2, .banner-real-3 {
		min-height: 650px;
	}
}
@media screen and (max-width:1080px) {	
	.banner-real-1, .banner-real-2, .banner-real-3 {
		min-height: 580px;
	}
	.banner-text h1.banner-txt {
		font-size: 3rem;
	}
	.banner-text p.banner-txt1 {
		font-size: 1.1rem;
		line-height: 35px;
		margin: 1.1em auto 0;
	}	
}
@media screen and (max-width:1024px) {
	.banner-text p.banner-txt1 {
		font-size: 1.05rem;
		line-height: 33px;
		margin: 1em auto 0;
	}	
	.banner-real-1, .banner-real-2, .banner-real-3 {
		min-height: 550px;
	}
	
}
@media screen and (max-width:1000px) {
	.banner-real-1, .banner-real-2, .banner-real-3 {
		min-height: 530px;
	}
	.banner-text h1.banner-txt {
		font-size: 2.6rem;
	}	
}
@media screen and (max-width:992px) {
	.banner-real-1, .banner-real-2, .banner-real-3 {
		min-height: 490px;
	}
	.banner-text {
		width: 65%;
	}
}
@media screen and (max-width:800px) {
	a.brand-logo {
		height: 65px;
		line-height: 65px;
	}
	header.W3Layouts, .navbar {
		height: 65px;
	}
	div#homepage-slider, main.W3Layouts-header-index {
		padding-top: 65px;
	}	
}
@media screen and (max-width:768px) {
	.banner-text {
		width: 70%;
	}
}
@media screen and (max-width:700px) {	
	.banner-text {
		width: 75%;
	}
}
@media screen and (max-width:667px) {	
	/*-- index page --*/
	.banner-real-1, .banner-real-2, .banner-real-3 {
		min-height: 460px;
	}
	/*-- /index page --*/	
}
@media screen and (max-width:600px) {
	/*-- index page --*/
	.banner-text h1.banner-txt {
		font-size: 2.4rem;
	}	
	.head-aboutcmp h3 {
		font-size: 25px;
		line-height: 38.5px;
	}
	.head h3 span {
		font-size: 1.8rem;
	}
	.head p {
		font-size: 15.5px;
		line-height: 28px;
	}
	.caption.gray {
		font-size: 25px;
		line-height: 34.6px;
	}
	.real-info-about-more h2 {
		font-size: 32px;
		margin: 0 0 10px 0;
	}
	/*-- /index page --*/
}
@media screen and (max-width:568px) {
	a.brand-logo {
		height: 60px;
		line-height: 60px;
	}
	header.W3Layouts, .navbar {
		height: 60px;
	}
	div#homepage-slider, main.W3Layouts-header-index {
		padding-top: 60px;
	}
	.banner-real-1, .banner-real-2, .banner-real-3 {
		min-height: 460px;
	}
	.banner-text h1.banner-txt {
    line-height: 3.85rem;
}
	.banner-text p.banner-txt1 {
		font-size: 1rem;
		line-height: 30px;
	}	
}
@media screen and (max-width:500px) {
	.banner-real-1, .banner-real-2, .banner-real-3 {
		min-height: 430px;
	}	
	.banner-text h1.banner-txt {
		font-size: 2rem;
		line-height: 2.85rem;
	}
}
@media screen and (max-width:480px) {
	a.brand-logo {
		height: 55px;
		line-height: 55px;
	}
	header.W3Layouts, .navbar {
		height: 55px;
	}
	div#homepage-slider, main.W3Layouts-header-index {
		padding-top: 55px;
	}
	.banner-real-1, .banner-real-2, .banner-real-3 {
		min-height: 400px;
	}	
	.banner-text {
		width: 90%;
	}
	.banner-text h1.banner-txt {
		font-size: 1.9rem;
	}
	.banner-text p.banner-txt1 {
		font-size: 0.95rem;
		line-height: 27px;
	}
}
@media screen and (max-width:436px) {
	.banner-real-1, .banner-real-2, .banner-real-3 {
		min-height: 380px;
	}	
}