/*
 * The Main Style System for DaniTix
 *
 * @category  Web Development Framework
 * @package   DaniTix
 * @source    danitix.less
 * @author    Matthew Auld <matthew@danima.com>
 * @copyright 2019 Danima Technologies Inc.
 * @license   W3C https://opensource.org/licenses/W3C
 * @link      https://www.danima.com/
 *
 * @since Monday, September 16th, 2019, 2:12:36 PM
 */

.breakpointMax(@max,@rules){
	@media screen and (max-width:@max){
		@rules();
	}
}

:root{
	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

/* Reset All Objects */
*,
::after,
::before {
	padding:0;
	margin:0;
	box-sizing: border-box;
}

html{
	font-family: 'Open Sans', sans-serif;
	background-color:rgba(128,128,128,0.1);
    // overflow-y: hidden; //remove once full page is made
}

body{
	font-family:'Open Sans',sans-serif;
    //height: 100vh;
}
html, body {
    scroll-behavior: smooth;
}
div.body-container {
	padding:20px 0 40px;

    //min-height:400px;
	min-height:~'calc(100vh - 100px)';
	position:relative;
}

/*
 * Variables
 */

@dani-blue: #3F637C;
@gutter: 30px;

@primary: #3f637c;
@green: #8CB369;
@plight: #719fa0;
@pdark: #364b6d;
@darkblue: #3e637b;
@darkgrey: #4d4d4d;

.mx-auto {
    margin-right: 0 !important;
}

@media screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }
}
.navbar { 
    padding: 0rem 1rem;
}

/************NEW HOME PAGE CSS*************/
.cartBtn {
    background-color: @green;
    font-family: 'Epilogue', sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 200;
    padding: 10px 30px;
    border-radius: 12px;
    border: none;
    margin-top: 1%;
}
.iconInsta {
    margin-right: 1%;
}
.danitixNav li {
    font-family: 'Epilogue', sans-serif;
    margin-top: 7%;
}
.danitixNav a {
    color: @primary;
}
.danitixNav a.navActive{
    color: @green;
    border-bottom: 4px solid @green;
    border-radius: 3px;
    padding-bottom: 40px;
}

a.nav-link {
    margin-bottom: -3%;
}

.danitixNav a.homeActive{
    color: @green;
    border-bottom: 4px solid @green;
    border-radius: 3px;
    padding-bottom: 40px;
    margin-bottom: -4%;
}
.danitixListItems ul {
    margin-left: 16%;
    margin-bottom: .25%;
}
@media screen and (min-width: 1900px) {
    .danitixListItems ul {
        margin-left: 36%;
    }
}
.cartButton {
    margin-right: 1.5%;
}
.logoImg {
    padding-right: 5%;
}
.wholeBg {
    background-image: url("/img/backgroundmain.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.tixContent {
    padding-top: 7%;
    padding-bottom: 8.5%;
}
.logoImg img {
    width: 70%;
    margin-left: 10%;
}
@media only screen and (max-width: 1199px) {
    .logoImg img {
        width: 200px;
    }
}
.navbar {
    box-shadow: 0 4px 4px -4px @plight;
}
.leftContent {
    font-family: 'Epilouge', sans-serif;
}
.leftContent p, .leftContent h2 {
    margin-left: 15%;
}
.leftContent h3 {
    color: @darkblue;
    font-weight: bold;
    font-size: 20px;
    margin-left: 15.5%;
}
.leftContent p {
    color: @darkblue;
    font-size: 14px;
    letter-spacing: 1px;
    width: 80%;
}
.leftContent a {
    color: @darkgrey;
    text-decoration: none;
}
.leftContent h2 {
    color: @pdark;
    font-size: 46px;
    width: 80%;
}
.copyStyle {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-top: 0.3%;
    padding-bottom: 0.3%;
    font-size: 14px;
    background-color: @darkblue;
    text-align:center;
    color: white;
    font-family: 'Epilouge', sans-serif;
    a {
      color:white;
      font-family: 'Epilouge', sans-serif;
    }
}
.getTicketsBtn {
    background-color: @green;
    font-family: 'Epilogue', sans-serif;
    color: white;
    font-size: 16px;
    font-weight: bolder;
    padding: 15px 25px;
    border-radius: 12px;
    text-decoration: none;
    position: absolute;
    margin-left: 14.2%;
    margin-bottom: -7%;
}
.upcomingEventsBtn {
    background-color: transparent;
    font-family: 'Epilogue', sans-serif;
    color: @dani-blue;
    font-size: 16px;
    font-weight: bolder;
    padding: 15px 25px;
    border-radius: 40px;
    border: 2px solid @dani-blue;
    position: absolute;
    left: 36%;
    margin-bottom: -7%;
}
.showImage {
    border-radius: 8px;
    width: 90%;
}
.carousel-inner {
    height: 64vh;
}
.carousel-indicators {
    right: 60.5%;
    bottom: -5%;
    left: -8.5%;
}
.carousel-indicators li {
    height: 12px;
    width: 12px;
    background-color: lightgray;
    margin: 0 10px;
    border-radius: 50%;
    cursor: pointer;
}
.carousel-indicators li.active {
    background-color: @green;
}
.carousel-icon-lg {
    width: 30px;
    height: 30px;
}
@media screen and (min-width: 1600px) {
    .upcomingEventsBtn {
        left: 31%;
    }
    .carousel-indicators {
        bottom: -7%;
        right: 64.5%;
    }
    .showImage {
        width: 85%;
    }
    .carousel-inner {
        height: 63vh;
    }
    .leftContent {
        margin-top: 1%;
    }
    .showImage {
        margin-top: 0%;
    }
    .leftContent h2 {
        font-size: 68px;
    }
}

/************END NEW HOME PAGE CSS*************/

/************ABOUT PAGE********************/
.aboutContent {
    font-family: 'Epilogue', sans-serif; 
    color: @darkgrey;
    margin: 5% 10%;
}

@media screen and (min-width: 1900px) {
    .aboutContent {
        margin: 5% 17%;
    }
}

.aboutContent h2 {
    font-size: 32px;
}
.aboutContent p {
    font-size: 16px;
}
.aboutContent h1 {
    font-size: 70px;
}
.aboutSeperate {
    margin-top: 3%;
    margin-bottom: 3%;
}

#aboutCarousel .carousel-inner {
    margin-top: 6%;
    height: 25vh;
}
/*******END OF ABOUT PAGE******************/

/*********SIGN UP PAGE********************/
.signUpSection {
    margin: 5% 15%;
    font-family: 'Epilogue', sans-serif;
}
.signUpSection h2 {
    font-size: 32px;
    color: @darkgrey;
}
.signUpSection p {
    font-size: 16px;
    color: @darkgrey;
    margin-bottom: 2%;
}
.signForm input {
    width: 100%;
    margin-bottom: 1.5%;
    border-radius: 6px;
    padding: 2% 4%;
    border: none;
    font-size: 18px;
    background-color: #ededed;
}
.signUp input {
    background-color: @green;
    font-family: 'Epilogue', sans-serif;
    color: white;
    font-size: 16px;
    padding: 15px 50px;
    border-radius: 12px;
    text-decoration: none;
}
.signUp {
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
}
.signUpImage {
    height: 200px;
    width: 100%;
    border: none;
    margin-top: -5%;
    margin-bottom: 3%;
    background-size: contain;
}


/*********END SIGN UP PAGE*****************/

header{
	#top-bar{
		background-color: @dani-blue;
		height: 50px;
		color: #FFF;
		padding-left:@gutter / 2;
		padding-right:@gutter / 2;
		position:relative;
		z-index:1;
		@media(max-width:767px){
			font-size:12pt;
		}
		a{
			color:#FFF;
			text-decoration:none;
			&.telephone{
				font-weight:100;
				font-size:24px;
				@media(max-width:767px){
					font-size:12pt;
				}
			}
			&.sign-in{
				font-weight:100;
				font-size:21px;
				padding-right:12px;
				@media(max-width:767px){
					font-size:12pt;
					padding-right:6px;
				}
			}
			&.sign-up{
				font-weight:bold;
				font-size:21px;
				border-left:3px #FFF solid;
				padding-left:12px;
				@media(max-width:767px){
					font-size:12pt;
					border-left:2px #FFF solid;
					padding-left:6px;
				}
			}
		}
	}

	nav#main-nav{
		height:106px;
		background-color:#FFF;
		box-shadow: 0 3px 10px 2px rgba(0,0,0,.3);
		padding-top:0;
		padding-bottom:0;
		color:@dani-blue;

		@media(max-width:767px){
			height:auto;
		}

		.navbar-brand{

			>img{
				max-width:400px;

				.breakpointMax(1200px,{
					max-width:200px;
				});
			}
		}

		li{
			a{
				color:@dani-blue;
				font-size:36px;
				font-weight:100;
				margin-left:35px;
				margin-right:35px;

				.breakpointMax(1287px,{
					font-size:28px;
					margin-left:0;
					margin-right:15px;
				});

				&.cart{
					background-color:@dani-blue;
					margin-right:@gutter / 2 * -1;
					padding-left:32px;
					position:relative;
					color:#FFF;
					&:before{
						content:"";
						background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNNTUxLjk5MSA2NEgxMjkuMjhsLTguMzI5LTQ0LjQyM0MxMTguODIyIDguMjI2IDEwOC45MTEgMCA5Ny4zNjIgMEgxMkM1LjM3MyAwIDAgNS4zNzMgMCAxMnY4YzAgNi42MjcgNS4zNzMgMTIgMTIgMTJoNzguNzJsNjkuOTI3IDM3Mi45NDZDMTUwLjMwNSA0MTYuMzE0IDE0NCA0MzEuNDIgMTQ0IDQ0OGMwIDM1LjM0NiAyOC42NTQgNjQgNjQgNjRzNjQtMjguNjU0IDY0LTY0YTYzLjY4MSA2My42ODEgMCAwIDAtOC41ODMtMzJoMTQ1LjE2N2E2My42ODEgNjMuNjgxIDAgMCAwLTguNTgzIDMyYzAgMzUuMzQ2IDI4LjY1NCA2NCA2NCA2NCAzNS4zNDYgMCA2NC0yOC42NTQgNjQtNjQgMC0xNy45OTMtNy40MzUtMzQuMjQtMTkuMzg4LTQ1Ljg2OEM1MDYuMDIyIDM5MS44OTEgNDk2Ljc2IDM4NCA0ODUuMzI4IDM4NEgxODkuMjhsLTEyLTY0aDMzMS4zODFjMTEuMzY4IDAgMjEuMTc3LTcuOTc2IDIzLjQ5Ni0xOS4xMDVsNDMuMzMxLTIwOEM1NzguNTkyIDc3Ljk5MSA1NjcuMjE1IDY0IDU1MS45OTEgNjR6TTI0MCA0NDhjMCAxNy42NDUtMTQuMzU1IDMyLTMyIDMycy0zMi0xNC4zNTUtMzItMzIgMTQuMzU1LTMyIDMyLTMyIDMyIDE0LjM1NSAzMiAzMnptMjI0IDMyYy0xNy42NDUgMC0zMi0xNC4zNTUtMzItMzJzMTQuMzU1LTMyIDMyLTMyIDMyIDE0LjM1NSAzMiAzMi0xNC4zNTUgMzItMzIgMzJ6bTM4LjE1Ni0xOTJIMTcxLjI4bC0zNi0xOTJoNDA2Ljg3NmwtNDAgMTkyeiIgLz48L3N2Zz4=');
						width:32px;
						height:32px;
						background-position:center;
						background-size:contain;
						display:inline-block;
						background-repeat:no-repeat;
						margin-right:.5rem;
					}
					&:after{
						content:"";
						display:block;
						background-color:#FFF;
						border-radius:50%;
						width:25px;
						height:25px;
						position:absolute;
						left:-12.5px;
						top:~'calc(50% - 12.5px)';
					}
				}
			}
			&.active{
				a{
					font-weight:bold;
				}
			}
		}
	}

	#slider{
		min-height:800px;
		height:~'calc(100vh - 1px)';
		position:absolute;

		.carousel-inner {
			height: 130vh;
        }
        
        .carousel-icon-lg {
            width: 5px;
            height: 5px;

            @media(max-width:1920px){
                width: 5px;
                height: 5px;
            }
            @media(max-width:1400px){
                width: 5px;
                height: 5px;
            }
        }

		/*@media(max-width:767px){
			height:~'calc(100vh - 50px - 64px)';
		}*/

		&.slide{
			/*background-position:center center;
			background-repeat:no-repeat;
			background-size:cover;
			width:100%;
			height:100%;
			position:absolute;
			padding-left:@gutter / 2;
			padding-right:@gutter / 2;*/

			.get-tickets{
				@media(max-width:767px){
					order:-1;
					opacity:.75;
					font-weight:900;
				}
			}

			.banner{
				background-color:rgba(63,99,124,0.75);
				width:100%;
				/*height:100%;*/
/*				padding:0 0 15px;*/
				margin:0;
				position:absolute;
				bottom:0;
				color:#FFF;

				@media(max-width:767px){
					height:auto;
				}

				h2{
					font-size:2.5em;
					font-weight:900;
					a {
						color:white;
						&:hover {
							text-decoration:none;
						}
					}

					.breakpointMax(1440px, {
						font-size:40px;
					});

					.breakpointMax(768px,{
						font-size:28px;
					});
				}

				.date {
                    font-size:2em;
                    font-weight:bold;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    gap: 1rem;
				}

				.location {
					font-size:1.375em;
					margin:0 0 10px;

					div.text-small {
						font-size:0.75em;
						line-height:1em;
					}
				}
			}
            @media only screen and (max-width: 1199px) {
                .banner {
                    font-size: 0.9em;
                }
            }
		}
	}
}

.show-details {
    .details {
        position: relative;
        .details-top {
            text-align: center;
            p {
                margin: 0;
            }
        }
        .return-btn {
            position: relative;
            top: 0;
            right: 0;
        }
    }
    div.shortcut-buttons {
        div.buttons {
            display:flex;
            a {
                display: flex;
                justify-content: center;
                align-items: center;
                padding:5px 15px;
                border: 1px solid @pdark;
                i {
                    font-size:24px;
                }

                span {
                    display:none;
                }

                &.active {
                    background:@pdark;
                    color:white;
                }
            }
            a:not(.active) {
                color: @pdark;
            }
            :first-child {
                border-top-left-radius: 2px;
                border-bottom-left-radius: 2px;
            }
            :last-child {
                border-top-right-radius: 2px;
                border-bottom-right-radius: 2px;
            }
        }
    }
    #select-filter {
        border:1px solid @pdark;
        background:#ffffff;
        font-size:20px;
        color:#000000de;
        padding:5px 15px 4px;
    }
    .showtime-list {
        list-style-type: none;
        margin: 0;
        padding: 0;
        li {
            display: flex;
            border: 1px solid #dfdfdf;
            padding: 15px;
            margin: 0 0 15px;
            justify-content: space-between;
            align-items: center;
            background: #eee;
            border-radius: 2px;
            align-items: center;
            .date-field {
                h2 {
                    margin: 0;
                }
            }
            .time {
                flex-grow: 1;
/*                text-align: center;*/
/*                padding: 0 5px;*/
                text-align: right;
/*                padding: 0 32px 0 5px;*/
                p {
                    margin: 0;
                }
            }
        }
    }
}

ul.list-shows {
    margin:0;
    padding:0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
        display:block;
        transition: 0.15s;

        a {
            border:1px solid #dfdfdf;
            box-shadow:0 2px 5px 0 rgba(0,0,0,0.2);
            border-radius:2px;
            display:flex;
            flex-direction: column;
            height: 100%;
            &:hover {
                color: @dani-blue;
                .body {
                    background: @primary;
                }
            }
            .body {
                padding:10px;
                background: @plight;
                color: #000000de;
                flex-grow: 1;
                transition: 0.15s;
                h2 {
                    margin:0 0 10px;
                }
                div {
                    font-weight: 300;
                }
            }

        }

        div.image {
            width:100%;
            height:225px;
            background:white no-repeat center center / cover;
        }

        &:hover {
            box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
        }
    }

}

.btn {
    margin: 0;
    text-decoration: none;
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 36px;
    text-align: center;
/*    height: 36px;*/
    height: auto;
    padding: 0 16px;
    transition: 0.15s;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    &:active {
        box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    }
    &:focus {
        box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
        outline: none;
    }
    &.light {
        background: @plight;
        color: #000000;
        &:hover {
            background: @primary;
        }
    }
    &.dark {
        background: @pdark;
        color: #ffffff;
        &:hover {
            background: @plight;
            color: #000000;
        }
    }
    &.primary {
        background: @primary;
        color: #000000;
        &:hover {
            background: @pdark;
        }
    }
    &.small {
        font-size: 12px;
    }
    &.medium {
        font-size: 14px;
    }
    &.large {
        font-size: 16px;
    }
}

#message { margin:0 0 10px;box-shadow:4px 4px 2px 0 rgba(0,0,0,0.25);}
#message .success {background: #E2F1D0 url('/images/icons/check.png') no-repeat 10px center;color:#061A5B; padding: 5px 10px;}
#message .error {background: #FFD9D9 url('/images/icons/delete.png') no-repeat 10px center; color: #800; padding: 5px 10px;}
#message .info {background: #F0F1FF url('/images/icons/information.png') no-repeat 10px center;color: #060C6A; padding: 5px 10px;}
#message .text {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 3em;
    font-weight: bold;
}

.customer-login {
    form {
         label,input:not([type="submit"]), select {
            display: block;
            width: 100%;
            text-align: left;
        }
        input:not([type="submit"]) {
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            padding-left: 5px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
        }
        label {
            font-size: 0.85em;
        }
        select {
            vertical-align:top;
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
            min-height: 27px;
        }
        .validation-error {
            color: red;
            font-size: 12px;
            padding-bottom: 20px;
            &:before {
                content: "↑";
                vertical-align: top;
                line-height: 14px;
                margin-right: 5px;
            }
        }
    }
}

.customer-my-account {
    form {
         label,input:not([type="submit"]), select {
            display: block;
            width: 100%;
            text-align: left;
        }
        input:not([type="submit"]) {
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            padding-left: 5px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
        }
        label {
            font-size: 0.85em;
        }
        select {
            vertical-align:top;
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
            min-height: 27px;
        }
        .validation-error {
            color: red;
            font-size: 12px;
            padding-bottom: 20px;
            &:before {
                content: "↑";
                vertical-align: top;
                line-height: 14px;
                margin-right: 5px;
            }
        }
    }
    .booking-history {
        .date-booked {
                width: 33.33333%;
                width: ~"calc(100% / 3)";
                text-align: center;
        }
        .confirmation-number {
            width: 33.33333%;
            width: ~"calc(100% / 3)";
            text-align: center;
        }
        .total {
            width: 33.33333%;
            width: ~"calc(100% / 3)";
            text-align: center;
        }
        .booking-legend {
            display: flex;
            text-align: center;
            div {
                width: 33.33333%;
                width: ~"calc(100% / 3)";
                font-weight: bold;
            }
        }
        .booking {
                display: flex;
                flex-wrap: wrap;
            .children {
                width: 100%;
                .legend {
                    display: flex;
                    text-align: center;
                    div {
                        width: 33.33333%;
                        width: ~"calc(100% / 3)";
                        text-align: center;
                    }
                }
                .child {
                    display: flex;
                    text-align: center;
                    div {
                        width: 33.33333%;
                        width: ~"calc(100% / 3)";
                        text-align: center;
                    }
                }
            }
        }
        .booking:nth-child(even) {
            background: #dee2e6;
            border: 1px solid #9c9c9c;
        }
    }
}

.checkout-process-step-1 {
    form.checkout {
        label,input:not([type="submit"]), select {
            display: block;
            width: 100%;
            text-align: left;
        }
        input:not([type="submit"]) {
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            padding-left: 5px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
        }
        label {
            font-size: 0.85em;
        }
        select {
            vertical-align:top;
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
            min-height: 27px;
        }
        .save-above {
            label,input {
                display: inline-block;
                width: auto;
                margin-bottom: 15px;
                font-size: 1em;
            }
            label {
                margin-right: 15px;
            }
        }
    }
}

.checkout-process-step-2 {
    form.checkout {
        label,input:not([type="submit"]), textarea {
            display: block;
            width: 100%;
            text-align: left;
        }
        input:not([type="submit"]), textarea {
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
        }
        label {
            font-size: 0.85em;
        }
        .buttons {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
    }
}

.checkout-process-step-3 {
    .box {
        p {
            display: block;
            margin-bottom: 5px;
        }
    }
    .list-items {
        .ticket {
            .wrapper {
                background: #e9ecef;
                .image {
                    width: 100%;
                    border: 5px solid #9c9c9c;
                }
                .info {
                    width: 100%;
                    padding: 5px 5px 0 5px;
                    border-left: 1px solid #9c9c9c;
                    border-right: 1px solid #9c9c9c;
                    .seating {
                        margin: 0;
                        img {
                            width: 16px;
                            height: auto;
                            margin-right: 3px;
                        }
                    }
                }
                .pricing {
                    width: 100%;
                    padding: 0px 5px 5px 5px;
                    border-left: 1px solid #9c9c9c;
                    border-right: 1px solid #9c9c9c;
                    display: flex;
                    .price-type {
                        margin-right: 4px;
                    }
                }
            }
        }
    }
    .sub-totals {
        .wrapper {
            background: @plight;
            padding: 5px 5px 0 5px;
            border-top: 2px solid @primary;
            .sub-total {
                display: flex;
                justify-content: space-between;
                .value {
                    padding: 0 5px;
                }
            }
            .promotions {
                display: flex;
                justify-content: space-between;
                .value {
                    padding: 0 5px;
                }
            }
            .taxes {
                display: flex;
                justify-content: space-between;
                .value {
                    padding: 0 5px;
                }
            }
            .fees {
                display: flex;
                justify-content: space-between;
                .value {
                    padding: 0 5px;
                }
            }
        }
    }
    .total {
        .wrapper {
            background: @plight;
            padding: 10px 5px;
            border-top: 1px solid @primary;
            .total {
                display: flex;
                justify-content: space-between;
                .value {
                    padding: 0 5px;
                    font-weight: bold;
                }
            }
        }
    }
}

.checkout-process-step-4 {
    form {
         label,input:not([type="submit"]), select {
            display: block;
            width: 100%;
            text-align: left;
        }
        input:not([type="submit"]) {
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            padding-left: 5px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
        }
        label {
            font-size: 0.85em;
        }
        select {
            vertical-align:top;
            border-left: none;
            border-top: none;
            border-right: none;
            outline: none;
            border-bottom: 1px solid @plight;
            transition: 0.3s;
            margin-bottom: 15px;
            &:focus {
                border-bottom-color: @pdark;
            }
            font-size: 1em;
            min-height: 27px;
        }
        .validation-error {
            color: red;
            font-size: 12px;
            padding-bottom: 20px;
            &:before {
                content: "↑";
                vertical-align: top;
                line-height: 14px;
                margin-right: 5px;
            }
        }
    }
}

.cart-icon {
    display: flex;
    justify-content: flex-end;
    a {
        color: #fff;
        background: @primary;
        margin: 0;
        text-decoration: none;
        border-radius: 2px;
        text-transform: uppercase;
        font-weight: 500;
        line-height: 36px;
        height: 36px;
        padding: 0 16px;
        transition: 0.15s;
        text-align: center;
        font-size: 18px;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        transition: 0.15s;
        &:hover {
            background: @pdark;
        }
    }
}
.cart-icon-desktop {
    display: flex;
    justify-content: flex-end;
    a {
        display: inline-block;
        color: #fff;
        background: @primary;
        margin: 0 0 0 15px;
        text-decoration: none;
        border-radius: 2px;
        text-transform: uppercase;
        font-weight: 500;
        line-height: 36px;
        height: 36px;
        padding: 0 14px;
        transition: 0.15s;
        text-align: center;
        font-size: 18px;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        transition: 0.15s;
        max-width: 46px;
        &:hover {
            background: @pdark;
        }
    }
}

.myaccount-icon {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
    a {
                color: #fff;
        background: @primary;
        margin: 0;
        text-decoration: none;
        border-radius: 2px;
        text-transform: uppercase;
        font-weight: 500;
        line-height: 36px;
        height: 36px;
        padding: 0 16px;
        transition: 0.15s;
        text-align: center;
        font-size: 18px;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        transition: 0.15s;
        &:hover {
            background: @pdark;
        }
    }
}

footer {
	background:@dani-blue;
	padding-top:35px;
	a {
		color:white;
		&:hover {
			color:white;
		}
	}
}

.powered-by-danima {
    background-color: @dani-blue;
    text-align: center;

    &.fixed-bottom-bar {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    a {
        color: #fff;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

.carousel-item {
    background-size: cover;
}

.details-top {
    h1 {
        color: @primary;
        font-weight: bold;
        margin-bottom: 0 !important;
    }
    h2 {
        color: @primary;
        font-weight: 300;
        font-size: 1.9rem;
    }
    .event-details .info {
        .label {
            font-weight: bold;
        }
    }
}
#top-return-button, #top-return-show {
    display: none !important;
}
.card .card-body form button {
    color: white;
}
.input-group button {
    color: black !important;
}
.btn.light, .btn.primary {
    color: white;
}
.btn.primary {
    background: @green;
}
#cart {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.order-summary, .cart-promotions-form {
    h2 {
        color: @primary;
        font-weight: bold;

    }
}
.checkout-process-step-1 .text-left h2 {
    color: @primary;
    font-weight: bold;
}
.checkout-process-step {
    &-3, &-4 {
        h1 {
            color: @primary;
            font-weight: bold;
        }
    }
}
.checkout-process-step-3 .sub-totals .wrapper {
    padding-left: 20px;
    padding-right: 20px;
    border: none;
    background: inherit;
}
.sub-totals {
    margin: 0;
    border: 3px solid #3f637c;
    background-color: #b8c5cf;
    border-radius: 8px;
    .col-12 {
        padding: 0;
    }
    .col-12:first-of-type .wrapper {
        padding-top: 20px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .col-12:nth-of-type(2) .wrapper {
        padding-top: 10px;
        padding-bottom: 20px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .tag {
        font-weight: bold;
    }
    .taxes {
        border-bottom: 2px solid #3f637c;
        padding-bottom: 10px;
    }
    .total {
        display: flex;
        justify-content: space-between;
        .value {
            font-weight: bold;
            padding: 0 5px;
        }
    }
}
@media screen and (max-width: 991px) {
    .show-details .showtime-list li .time {
        padding: 0 5px;
    }
    .showtime-list {    
        .date-field h2 {
            font-size: 1.5rem;
        }
        .show_name, .time {
/*            font-size: 0.7rem;*/
        }
        .show_name {
            margin-left: 1rem !important;
        }
    }
}
@media screen and (max-width:575px) {
    h1 {
        font-size: 2.2rem;
    }
    // h2 {
    //     font-size: 1.7rem;
    // }
    /*.showtime-list {
        .date-field h2 {
            font-size: 1rem;
        }
        .show_name {
            margin-left: 1rem !important;
        }
    }*/
}
.carousel-control-next, .carousel-control-prev {
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
}
@import '/css/less/components/_cart.less';

/* MEDIA QUERIES - MARIO */

/*Smaller Laptop Screens*/
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .getTicketsBtn {
        margin-bottom: -22%;
    }
    .upcomingEventsBtn {
        margin-bottom: -22%;
        left: 47%;
    }
    .carousel-inner {
/*        height: 76vh;*/
    }
    .carousel-indicators {
        right: 51.5%;
        bottom: 3%;
    }
    .leftContent {
        margin-top: 1%;
    }
    .showImage {
        margin-top: 15%;
    }
}

/*Tablets*/
@media screen and (min-width: 481px) and (max-width: 768px) {
    .carousel-inner {
/*        height: 77vh;*/
    }
    .leftContent {
        margin-left: -13%;
    }
    .showImage {
        width: 60%;
        margin-left: 40%;
    }
    .carousel-indicators {
        right: 1.5%;
        left: 1.5%;
        bottom: -8%;
    }
    /*.getTicketsBtn {
        bottom: -60%;
        right: 65%;
    }
    .upcomingEventsBtn {
        bottom: -86.8%;
        left: 17%;
    }*/
    .btn.primary {
/*        margin-bottom: 10%;*/
    }
}
/*Larger Size Phones*/
@media screen and (min-width: 425px) and (max-width: 480px) {
    .leftContent {
        margin-left: -13%;
    }
    .leftContent h2 {
        width: 100%;
    }
    .carousel-inner {
/*        height: 95vh;*/
    }
    /*.getTicketsBtn {
        bottom: -15%;
        right: 50%;
    }
    .upcomingEventsBtn {
        bottom: -15.8%;
        left: 50%;
    }*/
    .carousel-indicators {
        visibility: hidden;
    }
    .showImage {
/*        margin-top: 20%;*/
        width: 100%;
    }
    .logoImg img {
        margin-left: 0;
    }
    .navbar-toggler {
        font-size: 0.8rem;
    }
    .copyStyle {
        font-size: 10px;
    }
    .btn.primary {
/*        margin-bottom: 10%;*/
    }
    .leftContent h2 {
        font-size: 32px;
    }
    .leftContent p {
        width: 100%;
    }
}

/*Medium Size Phones*/
@media screen and (min-width: 375px) and (max-width: 424px) {
    .leftContent {
        margin-left: -13%;
    }
    .leftContent h2 {
        width: 100%;
        font-size: 28px;
    }
    .leftContent p {
        width: 100%;
        line-height: 1.2;
    }
    .carousel-inner {
/*        height: 74vh;*/
    }
    .getTicketsBtn {
        font-size: 10px;
        bottom: -24%;
        right: 50%;
    }
    .upcomingEventsBtn {
        font-size: 10px;
        bottom: -24.8%;
        left: 50%;
        margin-left: 2%;
    }
    .carousel-indicators {
        visibility: hidden;
    }
    .showImage {
/*        margin-top: 30%;*/
        width: 100%;
/*        margin-bottom: -5%;*/
    }
    .logoImg img {
        margin-left: 0;
    }
    .navbar-toggler {
        font-size: 0.8rem;
        margin-left: 85%;
        margin-top: -15%;
    }
    .copyStyle {
        font-size: 10px;
    }
    .btn.primary {
/*        margin-bottom: 10%;*/
    }
}

/*Small Size Phones*/
@media screen and (min-width: 320px) and (max-width: 374px) {
    .leftContent {
        margin-left: -13%;
    }
    .leftContent h2 {
        width: 100%;
    }
    .carousel-inner {
/*        height: 95vh;*/
    }
    .getTicketsBtn {
        bottom: -15%;
        right: 38%;
    }
    .upcomingEventsBtn {
        bottom: -33.8%;
        left: 19%;
    }
    .carousel-indicators {
        visibility: hidden;
    }
    .showImage {
/*        margin-top: 50%;*/
        width: 100%;
    }
    .logoImg img {
        margin-left: -4%;
    }
    .navbar-toggler {
        font-size: 0.8rem;
        margin-left: 85%;
        margin-top: -15%;
    }
    .copyStyle {
        font-size: 10px;
    }
    .btn.primary {
/*        margin-bottom: 10%;*/
    }
}
section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.container {
    max-width: 1400px;
}
#about {
    background-color: #F5F5F5;
    color: @darkgrey;
}
.section-header {
    margin-bottom: 2.5rem;
}
.section-body, .testimonial {
    p {
        line-height: 2;
    }
}
.section-title {
    font-size: 3rem;
    position: relative;
    margin-bottom: 69px;
    line-height: 1;
    &::after {
        position: absolute;
        content: '';
        top: ~'calc(100% + 32px)';
        left: 50%;
        transform: translateX(-50%);
        height: 5px;
        width: 5rem;
        background-color: #8CB369;
        border-radius: 15px;
    }
}
.section-sub-title {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    &.green {
        color: #8CB369;
        font-size: 1.9rem;
    }
}     
#testimonials {
    background-image: linear-gradient(145deg, #3E637B 20%, #456A79 45%, #688E71 100%);
    color: white; 
    .slick-track {
        display: flex;
    }

    .slick-slide {
        height: inherit;
    }
}
#testimonials-wrapper {
    max-width: 1700px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
} 
#testimonials-slider {
    margin-bottom: 90px;
    .slick-prev, .slick-next, .slick-dots li button {
        &:before {
            background-size: cover;
        }   
    }
    .slick-prev, .slick-next {
        top: ~'calc(100% + 70px)';
        transform: unset;
        z-index: 1;
        width: 30px;
        height: 30px;
        &:before {
            background-color: transparent;
            width: 30px;
            height: 30px;
            content: '';
            display: inline-block;
            content: '';
        }
    }
    .slick-prev {
/*        left: 28px;*/
        left: 42%;
        &:before {
            background-image: url('/images/slick-arrow-left.png');
        }
    }
    .slick-next {
/*        right: 44px;*/
        right: 42%;
        &:before {
            background-image: url('/images/slick-arrow-right.png');
        }
    }
    .slick-dots {
        bottom: -98px;
        li button {
            &:before {
                background-image: url('/images/dot.png');
                content: '';
                width: 14px;
                height: 14px;
            }
        }
        li.slick-active button:before {
            background-image: url('/images/dot-active.png');
            content: '';
        }
    }
}
.testimonial {
    position: relative;
    margin: 50px 15px 0;
    padding: 75px 30px 30px;
    background-color: #fff;
    border-radius: 15px;
    color: @darkgrey;
    text-align: center;
    .testimonial-icon {
        position: absolute;
        top: -45px;
        left: 50%;
        transform: translateX(-50%);
    }
    .testimonial-author {
        font-weight: bold;
        font-size: 1.5em;
    }
    .testimonial-author, .testimonial-company {
        text-transform: uppercase;
    }
    .testimonial-quote {
        line-height: 2;
    }
}
@media only screen and (max-width: 991px) {
    section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .section-title {
        font-size: 2.5rem;
    }
    .section-sub-title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        &.green {
            font-size: 1.5rem;
        }
    }
    #testimonials-slider {
        margin-bottom: 3rem;
        .slick-prev, .slick-next {
            top: ~'calc(100% + 19px)';
        }
        .slick-prev {
            left: 30%;
        }
        .slick-next {
            right: 30%;
        }
        .slick-dots {
            bottom: -3rem;
        }
    }
}
@media only screen and (max-width: 767px) {
    section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .section-header {
        margin-bottom: 1rem;
    }
    .section-body, .testimonial {
        p {
            line-height: 1.5;
        }
    }
    .section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
        &::after {
            top: ~'calc(100% + 14px)';
        }
    }
    .section-sub-title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        line-height: 1.2;
        &.green {
            font-size: 1.5rem;
            line-height: 1;
        }
    }
    #testimonials-slider {
        margin-bottom: 4rem;
        .slick-prev, .slick-next {
            display: none !important;
        }
    }
    .testimonial {
        margin-top: 30px;
        margin-left: 2px;
        margin-right: 2px;
        padding: 38px 15px 7px;
        .testimonial-icon {
            top: -30px;
        }
    }
    .slick-slide img {
        width: 60px;
    }
}

/* responsive for navigation bar*/
@media only screen and (max-width: 1199px) {
    .logoImg {
        padding-right: 0;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }
    .danitixNav a.navActive {
        padding-bottom: 26px;
    }
}
@media only screen and (max-width: 991px) {
    .navbar {
        padding: 1rem;
    }
    .logoImg img {
        margin-left: 0;
    }
    .danitixNav {
        li {
            margin-top: 0.5rem;
        }
        a.navActive {
            padding-bottom: 8px;
            width: fit-content;
            margin-bottom: 0.5rem;
        }
    }
    a.nav-link {
        margin-bottom: 0;
    }
    .cartBtn {
        margin-bottom: 1rem;
    }
    .uk-navbar-item img {
        width: 46px;
    }
}

/* responsive for slider of banner*/
.slide-buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    a.get-tickets {
        position: relative;
        left: unset;
    }
}
.getTicketsBtn {
    padding: 12px 16px;
}    
.upcomingEventsBtn {
    padding: 10px 16px;
}
@media only screen and (max-width: 1199px) {
    .carousel-indicators {
        margin-right: 10%;
    }
}
@media only screen and (max-width: 991px) {
    .carousel-item {
        padding-right: 0.5rem;
    }
    .slide-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    .getTicketsBtn, .upcomingEventsBtn {
        margin-bottom: 0;
        margin-left: 0;
    }
    .leftContent {
        margin-left: 0;
        h2, h3, p {
            margin-left: 0;
        }
    }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    .showImage {
        margin-top: -112px;
    }
}
@media only screen and (max-width: 767px) {
    main {
        padding-bottom: 32px;
    }
    .carousel-inner {
        height: auto;
        min-height: 670px;
    }
    .leftContent h2 {
        font-size: 28px;
    }
    .slide-buttons {
        margin-bottom: 1rem;
    }
    .getTicketsBtn, .upcomingEventsBtn {
        bottom: unset;
        right: unset;
    }
}
/*tickets page*/
.show-details .showtime-list li {
    gap: 1rem;
}
@media only screen and (max-width: 767px) {
    .show-details .showtime-list li {
        gap: 0.5rem;
        flex-direction: column;
        padding: 0.5rem;
    }
}

#no-show {
    display: flex;
    align-items: center;
}