@media screen and (max-width:1279px) {
.header {
position: absolute;
padding: 0
}
.main_menu {
position: fixed;
background-image: linear-gradient(to right, #621676, #fff);
width: 100%;
right: -100%;
top: 0;
z-index: 1;
padding: 100px 15px;
transition: all .5s;
height: 100vh
}
.main_menu.active {
right: 0;
z-index: 0
}
.main_menu.active li {
float: none;
padding: 20px
}
.main_menu {
flex-direction: column;
}
.social-icon ul {
margin: 0;
}
.social-icon li {
float: left !important;
padding: 0 10px !important;
}
.social-icon ul li a img {
width: 35px !important;
height: 35px;
}
.hamburger {
display: block!important;
z-index: 2;
position: absolute!important;
right: 0;
top: 50%;
}
.hamburger.active {
margin-top: -15px
}
.hamburger .toggle-buton {
width: 100%;
height: 6px;
background-color: #df610e;
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
border-radius: 5px
}
.hamburger .toggle-buton:before {
content: "";
width: 100%;
height: 6px;
background-color: #df610e;
position: absolute;
top: -13px;
right: 0;
transition: all .5s;
border-radius: 5px
}
.hamburger .toggle-buton:after {
content: "";
width: 100%;
height: 6px;
background-color: #df610e;
position: absolute;
bottom: -13px;
right: 0;
transition: all .5s;
border-radius: 5px
}
.hamburger.active .toggle-buton:before {
transform: rotate(45deg);
top: 13px
}
.hamburger.active .toggle-buton:after {
transform: rotate(135deg)
}
.hamburger.active .toggle-buton {
background-color: transparent
}
a.logo img {
width: 150px
}
.main_menu li a:hover {
color: #d0692c
}
.main-slider {
height: auto
}
.main-slider .slick-slide img {
width: 100%
}
.main-slider .slick-slide video {
top: 50%;
left: 0;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%
}
iframe.embed-player.slide-media {
width: 100%!important;
height: 100%!important;
left: 0!important;
position: absolute
}
.videoWrapper {
position: relative;
padding-bottom: 50.25%;
padding-top: 25px;
height: 0
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.eventInfo img {
height: 220px
}
}
@media screen and (max-width:500px) {
.Intro {
bottom: 20px
}
.Intro h1 {
font-size: 30px!important;
line-height: 32px!important;
letter-spacing: 5px!important
}
.item.video a {
font-size: 14px;
bottom: 22px;
transform: translateX(-50%)
}
.eventInfo img {
width: 100%;
height: auto
}
.footerMenu a {
font-size: 12px!important;
padding: 0 4px
}
}
@media screen and (max-width:900px) {
h1 {
font-size: 40px!important;
line-height: 50px!important;
letter-spacing: 10px!important
}
.SignForm {
width: 100%;
text-align: center
}
.SignForm input {
margin: 10px 0!important;
width: 100%!important
}
.carousel-inner img {
width: 100%
}
.eventInfo::after,
.slick-dots {
display: none!important
}
.MobileApp {
flex-direction: column
}
.Mobile img {
width: 100%
}
.downloadLinks {
margin-top: 0;
text-align: center
}
.downloadLinks ul {
display: inline-block
}
.downloadLinks li {
width: 50%
}
.InfoBoxOuter {
display: inline-grid
}
.InfoBox {
margin-bottom: 80px
}
.InfoBox h4 {
margin-top: 30px
}
.FooterContent {
padding-top: 0;
flex-direction: column
}
.FooterLogo img {
width: 100%
}
.socialmedia a {
padding: 0 8px
}
.footerMenu a {
display: inline-block;
font-size: 16px;
line-height: 20px
}
.address p {
padding-top: 0
}
.slick-next,
.slick-prev {
top: 35%
}
.mainBanner {
height: auto
}
.slick-slide img {
width: 100%
}
.Intro {
bottom: 30px
}
.FooterData {
text-align: center
}
.videoWrapper {
position: relative;
padding-bottom: 50.25%;
padding-top: 25px;
height: 0
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.eventInfo img {
height: 300px
}
}
@media screen and (min-width:576px) and (max-width:900px) {
h1 {
font-size: 50px!important;
line-height: 50px!important;
letter-spacing: 10px!important
}
.eventInfo {
max-width: 50%;
flex: 50%
}
.MobileApp {
flex-direction: initial
}
.InfoBoxOuter {
flex-direction: column
}
.InfoBox {
margin-bottom: 80px;
flex: 0 0 16.4%
}
.FooterData {
max-width: 100%;
text-align: center
}
.address {
margin-bottom: 45px
}
}
@media screen and (min-width:901px) and (max-width:1400px) {
.SignForm {
width: 90%
}
.SignForm input.email {
width: 30%
}
.InfoBox {
max-width: 200px;
height: 200px
}
.info-overlay {
width: 185px;
height: 185px;
margin: -2px -17px
}
.overlayImg {
margin: 58px auto
}
.overlayImg img {
width: 100%
}
.footerMenu a {
font-size: 16px
}
.SignForm form {
display: inline-flex;
align-items: center;
width: 100%
}
.address p {
font-size: 13px
}
}
@media screen and (min-width:901px) and (max-width:1000px) {
.services .container {
max-width: 900px!important
}
}
@media screen and (min-width:1101px) and (max-width:1300px) {
a.logo img {
width: 175px
}
.ResponsiveMenu {
padding: 0;
margin-left: -30px
}
.main_menu li {
padding: 0 10px
}
.main_menu li a {
font-size: 13px
}
.eventInfo img {
height: 300px
}
.main_menu li {
padding: 0 10px;
}
.social-icon ul li {
padding: 0 3px;
}
.social-icon ul li a img {
width: 32px !important;
height: 32px;
}
}
@media screen and (min-width:1301px) and (max-width:1400px) {
a.logo img {
width: 200px
}
.ResponsiveMenu {
padding: 0
}
.main_menu li {
padding: 0 15px
}
.eventInfo img {
height: 300px
}
.main_menu li {
padding: 0 5px;
}
.social-icon ul li {
padding: 0 2px;
}
.social-icon ul li a img {
width: 32px !important;
height: 32px;
}
}
@media screen and (min-width:1401px) and (max-width:1599px) {
a.logo img {
width: 200px
}
.ResponsiveMenu {
padding: 0
}
.main_menu li {
padding: 0 15px
}
.SignForm {
width: 77%
}
.eventInfo img {
height: 350px
}
}
@media screen and (min-width:1279px) and (max-width:1599px)
{
.social-icon ul li a img {
width: 30px !important;
height: 30px;
}
}