﻿.up-side-nav .search-section .search .max-width-container {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 15px;

    box-sizing: border-box;
}

main section .banner {
    overflow: hidden;
    background-color: #000;
    position: relative;
}

main section .banner-wrapper {
    overflow: hidden;
}

main section .banner img {
    max-width: 100%;
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 1;
    height: 100vh;
}

main section .banner {
    height: 100vh;
    background-size: cover;
}

main section .banner .spur-2 {
    width: 125vh;
    height: 100vh;
    background: #000000;
    position: absolute;
    bottom: 10%;
    left: 15%;
    transform: skew(-35deg) translate(-50%,10%);
    z-index: 1;
    opacity: 0.3;
}

main section .banner .spur-3 {
    display: none;
}

main section .banner .banner-text {
    position: absolute;
    z-index: 1;
    text-align: left;
    bottom: 120px;
    left: 70px;
    max-width: 469px;
}

main section .banner .banner-text h3  {
	background-color: unset;
	border: none;	
	
}

main section .banner .banner-text h3 span {
    color: #ffffff;
    font-weight: 300;
    font-family: 'Roboto';
    font-size: 35px;

}

.slick-slider {
    margin-bottom: 0 !important;
}

.slick-list {
    display: block !important;
}

.slick-dots li.slick-active button:before {
    color: #da2128 !important;
}

.slick-dots li button:before {
    color: #ffffff !important;
		font-size: 25px !important;
}

.slick-dots {
    left: 135px;
    /* top: 650px; */
    transform: translate(-50%, -50%);
	bottom:30px;
}


.slick-dots li {
    margin: 0 10px !important;
}

main section .sub-banner {
    background: #32323b;
    max-width: 100%;
    height: 500px;
}

main section .sub-banner img {
    position: relative;
    text-align: center;
    z-index: 1;
    left: 815px;
}

main section .sub-banner .banner-text {
    position: absolute;
    z-index: 1;
    top: 265px;
    left: 100px;
    text-align: center;
}

main section .sub-banner .banner-text h3 {
    color: #ffffff;
    font-weight: 700;
    font-family: 'Roboto';
    font-size: 50px;
}

main .mid-layout {
    padding: 30px 0;
    background: #ededed;
}

main .flex-data-container {
    display: flex;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
}

main .flex-item {
    width: 250px;
    margin: 50px 125px;
    text-align: center;
}

main .mid-layout .flex-item img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

main .flex-item p {
    font-family: 'Roboto';
    font-weight: 400;
    color: #575756;
    text-align: center;
    margin: 20px 0;
}

main .mid-layout .flex-data-container .flex-item p span {
    color: #575756;
}

main .mid-layout .flex-data-container .flex-item .big {
    color: #575756;
    text-align:center;
    font-size: 2.2vw;
}

main .flex-data-1 {
    min-height: 100px;
}

main .flex-data-2 {
    min-height: 200px;
}

main .mid-layout .flex-data-2 .middle-fig {
    padding-top: 15px;
}

main .flex-data-3 {
    min-height: 300px;
}

main .mid-layout .col {
   text-align: center;
    position: relative;
    bottom: 30px;
}

main .mid-layout .col .btn {
    font-weight: 700;
    font-size: 16px;
    font-family: 'Roboto';
    background-color: #d53b39;
    border: 1px solid #d53b39;
    color: #fff;
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    transition: all 0.25s;
}

main .mid-layout .col .btn:hover {
    background-color: #fff;
    border: 1px solid #d53b39;
    color: #d53b39;
    transition: all 0.25s;
}

@media screen and (max-width: 1700px) {
    main section .banner .banner-text {
        /**top: 475px;**/
		max-width: 445px;
		width: 100%;
	}

    
main section .banner .spur-3 {left: 42%;}

    /* .slick-dots {top: 75%;} */

}

@media screen and (max-width: 1600px) {
    main section .banner .spur-2 {
        bottom: 10%;
        left: 11%;
    }


    main section .banner .banner-text {
         /* top: 480px; */
    }

}

@media screen and (max-width: 1500px){
    main section .banner .spur-3 {left: 42%;}
}


@media screen and (max-width: 1440px) {
    main section .banner .spur-2 {
        bottom: 10%;
        left: 10px;
    }


    main section .banner .banner-text {
      /* top: 400px; */

    }

    .slick-dots {
        /* top: 650px; */
    }

}

@media screen and (max-width: 1380px) {
   
}

@media screen and (max-width: 1350px) {
   
}

@media screen and (max-width: 1315px) {


}

@media screen and (max-width: 1280px) {

    main section .banner .spur-2 {
        width: 100vh;
        bottom: 10%;
        left: 18%;
    }


    main section .banner .banner-text h3 {font-size: 36px;}

    main .content-area .table-wrapper .row-wrapper .cell-wrapper:nth-child(2) {padding: 0px 30px 30px 50px;}

    .slick-dots {
        /* top: 670px; */
    }
}

@media screen and (max-width:1180px) {

    main .mid-layout .flex-data-container .flex-item .big {
        font-size: 2.5vw;
    }
}

@media screen and (max-width: 1080px) {

    main section .banner .banner-text h3 {
        font-size: 35px;
    }
    
}


@media screen and (max-width: 1024px) {
    main section .banner .banner-text h3 {
        font-size: 25px;
    }
}

@media screen and (max-width: 960px) {

    main .flex-item { margin: 50px 100px; }

}

@media screen and (max-width: 840px) {
    main section .banner .spur-2 {
        width: 90vh;
        bottom: 10%;
        left: 15%;
    }

    main section .banner .banner-text h3 {font-size: 30px;}
    
    main .flex-item {
        margin: 50px 0;
    }
	
	/* .slick-dots{top:660px;} */

}

@media screen and (orientation: landscape) and (max-width: 900px){
	main section .banner .banner-text {
      top: 135px;
    }
}

@media screen and (max-width: 769px) {
    

    main section .banner img {
        height: 100vh;
    }


    main section .banner .banner-text h3, main section .banner .banner-text h3 span {
        font-size: 25px;
    }

	.slick-dots li button:before {
		font-size: 18px !important;
	}

    main .mid-layout .flex-data-container .flex-item .big {
        font-size: 3.8vw;
    }

    main section .banner .spur-2 {
        width: 115vh;
        height: 100vh;
        bottom: 10%;
        left: -1%;
    }


}


@media screen and (max-width: 640px) {
    main section .banner .banner-text h3 {
        font-size: 25px;
        position: relative;
        left: 0 !important;
    }

    main .flex-data-container {
        display: grid;
    }

    main .mid-layout .flex-data-container .flex-item .big {
        font-size: 35px;
    }

}

@media screen and (max-width: 540px) {

}

@media screen and (max-width: 512px) {
   
}

@media screen and (max-width: 480px) {
    main section .banner .spur-2 {
        width: 90vh;
        height: 100vh;
        bottom: 10%;
        left: -1%;
    }

    main section .banner .banner-text h3 span {font-size: 32px; } 

	

    main section .banner-wrapper {
        overflow: hidden;
    }

    .slick-dots {left: 108px;}
    main section .banner .banner-text {
        /* top: 350px; */
        left: 35px;
        max-width: 350px;
    }
	

}

@media screen and (max-width: 415px) {
    .slick-dots li button:before {
        font-size: 22px !important;
    }

}

@media screen and (max-width: 375px) {

    .slick-dots {left: 73px;}
     main section .banner .banner-text{max-width:300px;}

}

@media screen and (max-width: 360px) {
   
    main section .banner .banner-text h3 span {font-size: 30px; }
    main section .banner .banner-text {
         /* top: 315px; */
        left: 40px;
    }

    .slick-dots {
        left: 80px;
        /* top:615px; */
    }
}

@media screen and (max-width: 320px) {
    main section .banner .banner-text h3 span {
        font-size: 25px;
    }

    main section .banner .banner-text {
        max-width: 250px;
    }
}


