/* Add here all your CSS customizations */


.bg-dark { background: #5C2949 !important;}
.bg-danger { background: #B33E41 !important;}
.bg-gray { background: #108387 !important;}
.bg-orange { background: #F47C66 !important;}

.text-gray { color: #108387;}
.text-orange { color: #F47C66;}
.normal { font-weight: 400;}
.bold { font-weight: 700 !important;}
.xs { font-size: 10px !important; }
.small { font-size: 12px !important; }
.lg { font-size: 14px !important; }
.xl { font-size: 16px !important; }

.top-sub-title { font-size: 18px;}
.btn-white { background: transparent; padding: 10px 16px; color: #FFF; border: 2px solid #FFF;}
.btn-white:hover, .btn-white:focus { }
#registration{ text-shadow: 0 0 2px #666;}
label { color: #FFF; font-size: 18px; font-weight: 500;}
input[type='text']{ font-size: 16px !important; text-transform: lowercase !important; border:1px solid #FFF !important; background: transparent; color: #FFF !important; text-shadow: 0 0 2px #666;}
input[type='email']{ font-size: 16px !important; text-transform: lowercase !important; border:1px solid #FFF !important; background: transparent; color: #FFF !important; text-shadow: 0 0 2px #666;}
select{text-transform: capitalize !important; font-size: 16px !important; border:1px solid #FFF !important; background: transparent !important; color: #FFF !important; text-shadow: 0 0 2px #666;}


input[type='text']:hover,input[type='email']:hover, input[type='email']:focus, input[type='text']:focus, select:hover, select:focus{ border:1px solid #FFF !important; box-shadow: 0 0 5px #FFF; background: transparent;}


input[type='text']:valid, input[type='email']:valid, select.changed{ background-color: rgba(179, 62, 65, 0.2);} 

::placeholder { color: #B33E41 !important; text-shadow: none;}

.resp { width: 100% !important;}


.section{ padding-top: 150px !important; padding-bottom: 150px !important;}


.countdown{display:contents; width:100%; min-width:320px; max-width:500px; -webkit-padding-start: 0px; list-style-type:none; position: relative; margin: 0 auto;}
.countdown li{ display: inline-block; background:transparent;  position: relative; border-radius: 6px; border:1px solid #108387; list-style-type:none !important; text-align:center; width: auto !important; padding:15px 15px 0px 15px;}
.countdown li div{color:var(--white); font-weight: 300; text-align:center; font-size:64px; padding:0; margin: 0; line-height: 50px;}
.countdown li span{font-size: 12px; color:var(--light); padding: 5px 0 5px 0; display: block; text-transform: uppercase; margin: 0px auto; width: 100%;}

@media screen and (max-width:900px){
    
  .countdown{width:600px !important;}
    .contdown li{padding:4px 4px 0px 4px;}
    .countdown li div{font-size:24px;  line-height: 30px !important;}
    .countdown li span{font-size: 10px !important; }
    .countdown li div{color:#FFF;}  
}


.pacakge td{ vertical-align: middle;}

.d-md{ visibility: visible;}
.d-sm{display: none;}
@media
	 only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {
        .d-md{ display: none !important;}
        .d-sm{display: inline-block; background: #108387; font-weight: normal; margin-right: 4px; color: #FFF; padding: 0 4px; width: 84px;}
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block; 
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      padding:5px 0 5px 0; 
    }
      
    tr:nth-child(odd) {
      
    }
    
		td {
			/* Behave  like a "row" */
			border: none !important;
			position: relative; text-align: left !important;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left:0;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
        
        /*
		td:nth-of-type(1):before { content: "ID"; }
		td:nth-of-type(2):before { content: "Name"; }
		td:nth-of-type(3):before { content: "Mobile"; }
		td:nth-of-type(4):before { content: "Email"; }
		td:nth-of-type(5):before { content: "Wars of Trek?"; }
		td:nth-of-type(6):before { content: "Secret Alias"; }
		td:nth-of-type(7):before { content: "Date of Birth"; }
		td:nth-of-type(8):before { content: "Dream Vacation City"; }
		td:nth-of-type(9):before { content: "GPA"; }
		td:nth-of-type(10):before { content: "Arbitrary Data"; }
        */
	}