form#form_2itechSR {
}
.row-2itechSR{ background: #95CDBB;
padding: 2rem 1rem 3.5rem;
box-sizing: border-box;
display:flex;
flex-wrap:wrap;
justify-content: space-around;
color:#fff;
align-items: center;
font-size: 125%;
}
.row-2itechSR div {
min-width: 35%;
}
form#form_2itechSR label{ font-size:inherit} 
form#form_2itechSR select   {
background: #fff;
color: #4a4a4a;
font-size: inherit;
}
button#btn_2itechSR{
margin: 0 0 0 5px;
font-size: inherit;
cursor: pointer;
width: auto;
border-radius: 3px ;
border: none!important;
background: #333366!important;
padding: 10px 32px!important;
align-self: flex-end;
}.event-content * {
margin: 0;
}
.eventDate, .eventDate a {
background-color: #ce3c9d !important;
color: white !important;
}
#styleForm { margin-top: 25px;
text-align: center;  margin: auto;
}
#datepicker .ui-widget.ui-widget-content {
border: 1px solid #c5c5c5;
padding: 20px;
border-radius: 20px;
width: 100%!important;
}
.event-card{
transition: all .5s ease-in-out;
border-radius: 20px 20px 0 0;
}
.event-card:hover{
background-position:center top!important;
}
.flex {
display: flex;
flex-direction: row;
justify-content: space-around;
}
input[type="checkbox"].cities {
-webkit-appearance: auto;
}
.labelStyle {
margin-left: -5px;
color: #333366;
font-weight: 600;
font-size: 16px;
}
#resetButton {
margin-top: 15px;
display: flex;
justify-content: start;
}
.apply {
color: white;
background-color: #333366;
text-transform: capitalize;
border-radius: 4px;
font-size: 15px;
}
#centered {
display: flex;
justify-content: center;
}
.events-grid { margin-top: 25px;
margin-bottom: 25px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 25px 2% ; }
article.hoverEffect {
background-color: #EDEFF7;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 300px;
max-width: 100%;
border-radius: 0 0 20px 20px;
margin-left: 0 auto; 
}
.hoverEffect header {
background-color: #ededed;
height: 150px;
display: flex;
align-items: center;
}
article.hoverEffect header img {
max-width: 100%;
height: 35%;
margin-left: auto;
margin-right: auto;
display: block;
}
.register{
text-align: left;
}
.registerBtn {
background-color: #CE3C9D; padding: 10px 15px;
border-radius: 5px;
color: white;
margin: 5px;
display:inline-block;
}
.hoverEffect h3 { }
.eventBody {
min-height: 150px;
padding:1rem;
}
.eventBody span{display: block}
.eventBody .h3 { margin-bottom:10px;
font-family: Trebuchet MS,Helvetica,sans-serif!important;
font-size: 18px;
font-weight: 600;
color: #3B2A7F!important;
}
.city,#city {
font-weight: 500;
margin-bottom : 10px;
}
.date,#date {
color: #CE3C9D;
font-weight: bold;
margin-bottom: 10px;
}
.event-content {
text-align: left;
}
.event-content p.content{
line-height: 1.2;
margin-bottom: 1rem;
} @media screen and (min-width: 1200px) and (max-width: 1400px) {
#styleForm div {
display: flex;
flex-wrap: wrap;
}
#styleForm div label {
margin-top: -10px;
}
.cities {
margin-bottom: 10px;
}
#centered {
justify-content: center;
}
}
@media screen and (min-width: 900px) and (max-width: 1200px) {
.events-grid {
grid-template-columns: 1fr minmax(200px, 1fr);
width: 100%;
margin: 0 auto;
}
.cities a {
padding: 5px 10px;
display: block;
}
#styleForm div {
display: flex;
flex-wrap: wrap;
}
#styleForm div label {
margin-top: -10px;
}
.cities {
margin-bottom: 10px;
}
.event-content {
margin-top: 15px;
display: block;
}
#second {
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 660px) and (max-width: 900px) {
.events-grid {
grid-template-columns: 1fr minmax(200px, 1fr);
width: 100%;
margin: 0 auto;
}
.cities a {
padding: 5px 10px;
display: block;
}
#styleForm div {
display: flex;
flex-wrap: wrap;
}
#styleForm div label {
margin-top: -10px;
}
#resetForm {
margin-bottom: 10px;
}
.event-content {
margin-top: 15px;
display: block;
}
#second {
text-align: center;
margin-left: auto;
margin-right: auto;
}
} @media screen and (min-width: 480px) and (max-width: 660px) {
#styleForm {
background-color: #EDEFF7;
text-align: center;
padding: 15px;
max-width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: column;
}
#resetButton {
margin-top: 0;
justify-content: center;
margin-top: 15px;
margin-bottom: 25px;
}
.event-content {
margin-top: 15px;
display: block;
}
.flex {
display: flex;
flex-direction: column;
text-align: start;
}
.cities {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.events-grid{
padding: 10% 10% 5% 10%;
display: grid;
margin: 0 auto;
grid-auto-rows: minmax(200px, auto);
grid-template-columns: repeat(1 ,1fr);
grid-gap: 25px;
}
#second {
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 260px) and (max-width: 480px) {
#styleForm {
max-width: 100%;
height: auto;
}
.flex {
display: flex;
flex-direction: column;
text-align: start;
}
.cities {
width: 50%;
margin-left: auto;
margin-right: auto;
}
#resetButton {
justify-content: center;
}
#centered {
justify-content: center;
margin-top: 25px;
}
.events-grid{
padding: 10% 10% 5% 10%;
display: grid;
margin: 0 auto;
grid-auto-rows: minmax(200px, auto);
grid-template-columns: repeat(1 ,1fr);
grid-gap: 25px;
}
.event-content {
margin-top: 15px;
display: block;
}
#second {
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
.dp-highlight, .dp-highlight a {
background: #333366!important;
color: #FFF!important;
}
.dateEvents{
background-color: #f2f8f8!important;
color: #777!important;
width: 150px !important;
height: 25px;
margin-top: 10px;
}
#datepicker {
display: flex;
justify-content: center;
}
#dateInputContainer div {
display: flex;
}
#dateInputContainer div p {
margin: 5px;
margin-top: 15px;
}
#dateInputContainer {
display: flex;
margin-bottom: 30px;
flex-wrap: wrap;
}
@media screen and (min-width: 500px) {
.ui-datepicker {
width: 60em !important;
}
}
@media screen and (max-width: 500px) {
.ui-datepicker-multi .ui-datepicker-group {
float: none !important;
}
}
.ui-state-default {
text-align: center !important;
background-color: white !important;
border: none !important;
}
.ui-widget-header{
background-color: white !important;
border: none !important;
}
.ui-datepicker-prev-hover, .ui-datepicker-next-hover {
background-color: white !important;
}
.hiddenEvents {
display: none !important;
}
.ui-datepicker.ui-datepicker-multi {
min-width: 90%;
}
.ui-state-active {
color: #454545 !important;
}
#resetDatepicker {
margin-top: 15px;
background-color: #114673;
color: #EDEFF7;
border: none;
border-radius: 5px;
padding: 5px;
}
.ui-datepicker-month, .ui-datepicker-year, .ui-datepicker-calendar, .labelStyle, #resetDatepicker {
font-family: 'Trebuchet MS', Arial, sans-serif !important;
}
#noEvent {
display: none;
font-family: Trebuchet MS,Helvetica,sans-serif !important;
font-size: 18px;
font-weight: 600;
color: #3B2A7F !important;
text-align: center;
margin-top: 20px;
}
#distanceBox {
margin-top: 30px;
}