:root{
    --main-theme: rgb(237, 134, 51);
    --theme-black: rgba(0, 0, 0, 0.8);
    --theme-purple: rgb(47, 13, 116);
    --theme-maroon: rgb(186, 48, 35);
}

html,body{
	font-family: 'Montserrat', sans-serif;
	width: 100%; height: 100%; margin-left: 0%;
	overflow-x: hidden;overflow-y: auto; scroll-behavior: smooth;  margin: 0;
	padding:0;
    background-color: var(--theme-black);
}

.header{height: 12%; width: 100%; position: fixed; display: flex; z-index: 10; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px)}
.header> .theLogo{width: 15%; height: 100%; margin-left: 2%; display: inline-block;}
.header> .theLogo>img{height: 100%;}
.header> .navigations{width: 50%; margin-left: 5%; height: 100%; display: inline-block;}
.header> .musicBTN{background: var(--main-theme); border: none; border-radius: 25px; margin-left: 5%; font-weight: bolder; padding: 0% 3% 0% 3%; height: 60%; margin-top: 1.5%; cursor: pointer; transition: .3s ease-in-out;}
.header> .musicBTN:hover{scale: 1.05;}
.header> .navigations> ul{display: flex; height: 100%; margin-top: 0%; justify-content: center; color: white;}
.header> .navigations> ul> li{list-style: none; font-weight: bold; margin-top: 5%;
 height: 50%; margin-left: 4%;} 
.header> .navigations> ul> li> a{text-decoration: none; text-align: center;
    transition: all 0.5s ease; width: 100%; color: var(--main-theme-color)}
.header> .navigations> ul> li> .active{border-bottom: 2px solid var(--main-theme);}

.main-nav{display: none}
.open-main-nav{display: none;}

.homeBanner{ width: 100%; height: 80%; margin-top: 7%; display: flex;}
.homeBanner> .twoSides{width: 50%; height: 100%; display: inline-block;}
.homeBanner> .twoSides> h1{color: white; font-size: 80; margin-left:7%;}
.homeBanner> .twoSides> .streams{width: 100%; height: 50%; display: flex;}
.homeBanner> .twoSides> .streams> .imgDiv{width: 40%; margin-left: 7%; height: 100%; border-radius:5px;}
.homeBanner> .twoSides> .streams> .imgDiv> img {width: 100%; height: 100%; border-radius: inherit;}
.homeBanner> .twoSides> .streams> .btnSide{width: 40%; margin-left: -7%; height: 100%;}
.homeBanner> .twoSides> .streams> .btnSide> p{color: var(--main-theme); margin-left: 19%; margin-top: 10em;}
.homeBanner> .twoSides> .streams> .btnSide> .btnHeads{display: flex; height: 20%; display: flex; width: 100%;}
.homeBanner> .twoSides> .streams> .btnSide> .btnHeads> .streamBTN{height: 100%; width: 70%; justify-content: center; align-items: center; border-radius: 25px; background: linear-gradient(to right, var(--main-theme), rgb(67,149,222));
    display: inline-flex; transition: .3s ease-in-out; cursor: pointer;}
.homeBanner> .twoSides> .streams> .btnSide> .btnHeads> .streamBTN:hover{
    scale: 1.1
}
.homeBanner> .twoSides> .streams> .btnSide> .btnHeads> .streamBTN> p{display: inline-block; width: 40%; margin-left: 1%; font-weight: bold;}
.homeBanner> .twoSides> .streams> .btnSide> .btnHeads> .streamBTN> .myIMGS{display: inline-block; width: 25%; margin-left: 1%}
.homeBanner> .twoSides> .streams> .btnSide> .btnHeads> .streamBTN> .myIMGS:nth-child(2){height: 60%;}
.homeBanner> .twoSides> .streams> .btnSide> .btnHeads> .streamBTN> .myIMGS> img{width: 100%; margin: auto;}

.homeBanner> .twoSides> .streams> .btnSide> .btnHeads> .headSets{ display: inline-block;height: 100%; width: 20%; margin-left: 5%}
.homeBanner> .twoSides> .streams> .btnSide> .btnHeads> .headSets> img{height: 100%; width: 100%; object-fit:cover;}

.homeBanner> .twoSides> .slidesContainer{height: 100%; width: 100%; display: flex; position: relative}
.homeBanner> .twoSides> .slidesContainer> .behindDiv{width: 40%; height: 40%; margin-top: 30%; position: absolute; background: rgb(17, 23, 39); border-radius: 5px; margin-left: 5%; z-index: 2; transition: .3s ease-in-out;}
.homeBanner> .twoSides> .slidesContainer> .behindDiv> img{height: 100%; width: 100%; border-radius: inherit;}
.homeBanner> .twoSides> .slidesContainer> .frontDiv{width: 50%; height: 60%; margin-top: 20%; position: absolute; background: rgb(17, 23, 39); border-radius: 5px; margin-left: 25%; z-index: 5; display: flex; transition: .3s ease-in-out; }
.homeBanner> .twoSides> .slidesContainer> .frontDiv> img{height: 100%; width: 100%; border-radius: inherit;}
.homeBanner> .twoSides> .slidesContainer> .notOnQueue {visibility: hidden; opacity: 0;}
.homeBanner> .twoSides> .slidesContainer> .behindDiv:hover{cursor: pointer; scale: 1.1;}
.homeBanner> .twoSides> .slidesContainer> .frontDiv:hover{cursor: pointer; scale: 1.1;}
.homeBanner> .twoSides> .slidesContainer> .frontDiv:before{
    content: '';  position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-55%, -45%);
    width: 140%; height: 120%; border-radius: 50%;
    background: radial-gradient(transparent, var(--main-theme), transparent, transparent);
}
.homeBanner> .twoSides> .slidesContainer> .moveUpFront{ animation-duration: 1s; animation-name: swirvIn; }
.homeBanner> .twoSides> .slidesContainer> .moveToBack{ animation-duration: 1s; animation-name: shrinkOut; }
.homeBanner> .twoSides> .slidesContainer> .moveUpFront:before{
    content: '';  position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-55%, -45%);
    width: 140%; height: 120%; border-radius: 50%;
    background: radial-gradient(transparent, var(--main-theme), transparent, transparent);
}

@keyframes swirvIn {0% { width: 40%; height: 40%;} 50% { width: 45%; height: 50%; margin-left: -5%;} 100% {width: 50%; height: 60%; margin-top: 20%; margin-left: 25%; z-index: 5;display: flex; }}
@keyframes shrinkOut {0% { width: 50%; height: 60%; opacity: 1;} 50% { width: 40%; height: 40%; margin-left: 35%; opacity: 0.2;} 100% { width: 40%; height: 40%; z-index: 2; scale: 0.3; margin-left: 25%; opacity: 0;}}


.aboutDiv{width: 90%; margin-left: 5%; display: flex;}
.aboutDiv> .twoDivs{width: 50%; display: inline-block; margin-top: 1%; color: white;}
.aboutDiv> .twoDivs > p{width: 70%; color: var(--main-theme);}
.aboutDiv> .twoDivs > .picDiv> {width: 200px; height: 200px; margin-left: 5%;}
.aboutDiv> .twoDivs > .picDiv> img{width: 200px; height: 200px;}

.headingDiv{width: 90%; height: 5%; border-bottom: 2px solid var(--main-theme); margin-top: 10%; margin-left: 5%; justify-content: center; align-items: center; display: flex;}
.headingDiv> h1{border-bottom: 6px solid var(--main-theme); color: white; min-width: 10%; max-width: 30%; text-align: center;}

.highlightDiv{height: 65%; width: 25%; margin: 1% 0% 0% 1%; display: inline-block; background: var(--main-theme);}
.highlightDiv> .photoDiv{width: 100%; height: 60%}
.highlightDiv> .photoDiv> img{width: 100%; height: 100%;}
.highlightDiv> h3{text-align: center;}
.highlightDiv> p{padding: 0% 5% 0% 5%}
.newsDiv> .event1{height: 70%; margin-top: auto;}
.newsDiv> .event2{height: 80%; margin-top: auto;}

.servHead{ margin-left: 5%; color: white; margin-top: 3%;}
.servicesContainer{width: 100%; max-height: 100%;}
.servicesContainer> .service{width: 26%; height: 8.5em; margin-bottom: 2%; border-radius: 5px; background: var(--main-theme); margin-left: 5%; display:inline-block; overflow: hidden;}
.servicesContainer> .service> h3{color: white; font-size: 110%; margin-left: 5%; font-weight: bolder;}
.servicesContainer> .service> p{color: white; margin-left: 5%;}

.headIcons{height: 20%; width: 100%; margin: 2% 0% 0% 0%; display: flex; justify-content: center; justify-items: center;}
.headIcons> .divsInside{ width: 10%; height: 100%; margin-left: 3%}
.headIcons> .divsInside > img{height: 100%; width: 100%; object-fit: contain;}
/* #myPodcast{width: 100%; height: 30%;} */
    /* .inHere{width: 50%; border: 1px solid red;} */

.podcastDiv{width: 25%; height: 30%; margin:1% 0% 0% 1%; border-radius: 5px; position: relative;; display: inline-block}
.podcastDiv > img{height: 100%; width: 100%; border-radius: inherit;}
.podcastDiv > .playYoutube{position: absolute; top: 42.5%; margin-left: 42.5%; width: 15%; height: 15%}
.podcastDiv > .playYoutube> img{width: 100%; height: 100%;}

.newsDiv{margin-left: 1%; width: 94%; display: block;margin-top: 3%; position: relative}
.newsDiv> .galleryContainer{margin-left: 2%;width: 100%; display: flex;margin-top: 0%}
.newsDiv> .galleryContainer>.MenuPic> .picDiv{width: 100%; height: 40em; margin-top: 1%;;}
.newsDiv> .galleryContainer>.MenuPic> .picDiv> a> img{height: 250px; width: 100%}
.newsDiv> .galleryContainer>.MenuPic> h4{margin-top: 0.5%; color: #020b0a}
.newsDiv> .galleryContainer>.MenuPic> p{margin-top: -2%; color: #748a98; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.MenuPicHD{border-bottom: 2px solid var(--main-theme); height:25px; width: 100%; margin-top: 0%; margin-bottom: 1%;}
.MenuPicHD> .MenuPicHeader{height: 100%; min-width: 22%; max-width: 50%; text-align:center; background-color: var(--main-theme); margin-top: 0%}
.MenuPicHeader> p{color: white; margin-top: 0%; font-weight: bold;}

.sliderPics{height: 260px; width: 100%}
.MenuPic> h4{margin-top: 0.5%; color: white}
.MenuPic> p{margin-top: -2%; color: #748a98}

.myIframe{ position:absolute; display: none; top:15%; margin-left: 50%; transform: translateX(-50%); width: 50%; height: 80%; z-index: 12;}
.myIframe> .close{width: 40px; height: 40px; border: 1px solid black; margin: 1% 0% 1% 1%; border-radius: 50%; text-align: center; position: absolute; float: right; right: 1%;}  
.myIframe> .close> img{height: 100%; width: 100%; border-radius: 50%;}

.montywoodSection{width: 80%; margin-left: 10%; height: 60%; margin-top: 5%; display: flex;}
.montywoodSection> .dividedDivs{width: 50%; height: 100%; display: inline-block; }
.montywoodSection> .dividedDivs> .montyLogo{ width: 40%; height: 25%; }
.montywoodSection> .dividedDivs> .montyLogo> img{height: 100%;}
.montywoodSection> .dividedDivs> h1{color: white; font-weight:lighter; font-size: 3em; margin-top: 0.5em;}
.montywoodSection> .dividedDivs> button{color: black; background: #74c54f; border-radius: 25px; margin-top: 1em; border: none; padding: 2% 4% 2% 4%;}
.montywoodSection> .dividedDivs> .downloadDiv{width: 60%; position: relative; height: 100%; margin-left: 5%;}
.montywoodSection> .dividedDivs> .downloadDiv> .circle {height: 50%; width: 80%;border-radius: 50%;
    box-shadow: 0px 0px 75px rgb(237, 134, 51); background: rgba(237, 134, 51, 0.4); position: absolute; transform: translateY(50%) translateX(10%)}
.montywoodSection> .dividedDivs> .downloadDiv> .phoneCell{ z-index: 2;height: 100%; position: absolute; width: 70%; transform: translateX(20%);} 
.montywoodSection> .dividedDivs> .downloadDiv> .phoneCell> img{height: 100%; width: 100%;}
.montywoodSection> .dividedDivs> .downloadDiv> .downLinks{position: absolute;z-index: 2; width: 60%; bottom: 0%; height: 50%; margin-left: -4em;}
.montywoodSection> .dividedDivs> .downloadDiv> .downLinks> div{height: 30%; width: 100%; margin-top: 3%;}
.montywoodSection> .dividedDivs> .downloadDiv> .downLinks> div> img{height: 100%; width: 100%;}

.showContainer{width: 30%; height: 20%; z-index: 3; position: relative; background: rgba(237, 134, 51,0.4); border-radius: 5px; display: inline-flex; margin: 2% 0% 0% 2.3%}
.showContainer> p{position: absolute; background: #999; font-weight: bold; color: white; padding: 0% 1% 0% 1%;}
.showContainer> .contacting{position:absolute; background: white;display: block; border-radius: 50%; height: 30px; width: 30px; bottom: 1%; right: 2%; }
.showContainer> .contacting:nth-last-child(1){right: 12%;}
.showContainer> .contacting> img{width: 100%; height: 100%; border-radius: inherit;}
.showContainer> .picsSide{width: 40%; height: 100%; border-top-left-radius:5px; border-bottom-left-radius: 5px; display:inline-block}
.showContainer> .picsSide> .picDiv{width: 100%; height: 100%; border-top-left-radius:5px; border-bottom-left-radius: 5px;}
.showContainer> .picsSide> .picDiv > img{width: 100%; height: 100%; border-top-left-radius:5px; border-bottom-left-radius: 5px;}
.showContainer> .contentside{width: 60%; height: 100%; border-top-right-radius:5px; border-bottom-right-radius: 5px; display:inline-block}
.showContainer> .contentside> .showTime{ min-width: 40%; max-width: 80%; background: var(--main-theme); color: black; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; height: 20%; margin-left: 50%; transform: translateX(-50%);}
.showContainer> .contentside> .showTime> p{margin-top: 0.2%; text-align: center;}
.showContainer> .contentside> h3{ text-align: center; color: white;}
.showContainer> .contentside> p{text-align: center; color: white; margin-top: -1em;}
.doughnut{position: relative; margin-top: -10%; margin-bottom: -20%; z-index: 0;}
.mydoughnut{ border-radius: 50%; position: relative; height:60%; margin-left: 50%; width:35%; transform: translateX(-50%);
    background: radial-gradient(var(--main-theme), var(--theme-maroon), var(--theme-purple), transparent, transparent);
    /* background: radial-gradient(transparent, var(--main-theme), var(--theme-maroon), transparent, transparent, transparent, transparent); */
}
.partispation{ width: 90%; z-index: 4; display: block; position: relative; height: 90%; margin: 4% 0% 0% 5%;}
.partispation> .participationDevid{width: 100%; height: 80%; }
.partispation> .participationDevid:nth-child(1){height: 20%;}
.partispation> .participationDevid> h2{color: white; font-size: 27; text-align: center;}
.partispation> .participationDevid> p{color: rgb(237, 134, 51);}
.partispation> #chartdiv{background: rgba(255, 255, 255, 0.3); border-radius: 5px;}

.eventContainer{width: 25%; margin: 2% 0% 2% 6%; height: 50%; display: inline-block;} 
.eventContainer:hover{opacity: 0.5;} 
.eventContainer> .imgDiv{width: 100%; height: 90%}
.eventContainer> .imgDiv> img{ width: 100%; height: 100%; object-fit: cover;}
.eventContainer> .infoDiv{width: 100%; height: 10%; background: rgb(237, 134, 51);}
.eventContainer> .infoDiv> p{ text-align: center;  font-weight: bold; margin-top: 1%;}

.slide-arrow{ position: absolute; cursor: pointer;top: 50%; font-size: 35px; margin-top: -15px; border-radius: 0 3px 3px 0; }
.prev-arrow{left: -40px;width: 0; height: 0; border-left: 0 solid transparent; border-right: 15px solid #4798b6; 
    border-top: 10px solid transparent; border-bottom: 10px solid transparent;  
}
.next-arrow{ right: -40px; width: 0; height: 0; border-right: 0 solid transparent;border-left: 15px solid #4798b6; 
    border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}

.popupBack{width: 100%; display: none; height: 100%;top: 0%; background: rgba(0, 0, 0, 0.8); position: absolute; z-index: 10;}
.popUp{width: 30%; max-height: 90%;display: none; margin-left: 50%; top: 5%; transform: translateX(-50%); border-radius: 5px; background: rgb(237, 134, 51); position: absolute; z-index: 11;}
.popUp> h2{color: white; text-align: center}
.popUp> p{color: black; text-align: center}
.popUp> form> .submitionInputs{width: 90%;outline: none; border: none; height: 45px; margin: 1% 0% 2% 5%; border-radius: 5px;}
.popUp> form> label{margin-left: 5%; margin-top: 2%;}
.popUp> form> button{border: none; border-radius: 15px; margin: 5% 0% 1% 50%; transform: translateX(-50%); padding: 2% 3% 2% 3%; text-align: center; font-size: large;}
.popUp> .close{width: 40px; height: 40px; border: 1px solid black; margin: 1% 0% 1% 1%; border-radius: 50%; text-align: center; position: absolute; float: right;}
.popUp> .close> img{width: 100%; height: 100%; border-radius: 50%;}
.popUpPresenter{background: var(--main-theme); width: 50%; display: none; min-height: 50%; max-height: 90%; overflow-y: auto; margin-left: 25%; position: absolute; top: 5%; z-index: 11; border-radius: 5px;}
.popUpPresenter> h2{text-align: center; color: white;} 
.popUpPresenter> h3{text-align: center;} 
.popUpPresenter> .theIMG{width: 40%; height: 15em; transform: translateX(-50%); margin-left: 50%}
.popUpPresenter> .theIMG > img {width: 100%; height: 100%; object-fit:fill;}
.popUpPresenter> p{padding: 0% 2% 0% 2%;} 
.popUpPresenter> .close{width: 40px; height: 40px; border: 1px solid black; margin: 1% 0% 1% 1%; border-radius: 50%; text-align: center; position: sticky; float: right; right: 1%;}
.popUpPresenter> .close> img{width: 100%; height: 100%; border-radius: 50%;}

.MycontactUS{width: 70%; margin-left: 15%;}
.background {display: flex; min-height: 10vh; width: 100%; margin-top: 6%; margin-bottom: 1%;}
.container {/*flex: 0 1 700px;*//*margin: auto;*/padding: 5px; margin-top: 0%;width: 100%; }
.screen {position: relative;background: rgba(255, 255, 255, .1); margin-top: 0%; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);border-radius: 15px; width: 100%;}

.screen:after {content: '';display: block;position: absolute;top: 0;left: 1px;right: 10px;bottom: 0;border-radius: 15px;box-shadow: 0 7px 40px rgba(0, 0, 0, .4);z-index: -1;}
.screen-header {display: flex;align-items: center;/* width: 95.4%;*/padding: 10px 20px;background: rgba(255, 255, 255, .1); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
	border-top-left-radius: 15px;border-top-right-radius: 15px;}
.screen-header-left {margin-right: auto;}
.screen-header-button {display: inline-block;width: 8px;height: 8px;margin-right: 3px;border-radius: 8px;background: white;}

.screen-header-button.close {background: #ed1c6f;}
.screen-header-button.maximize { background: #e8e925;}
.screen-header-button.minimize {background: #74c54f;}

.screen-body {display: flex;}
.screen-body-item {flex: 1;padding: 50px;}
.screen-body-item.left {display: flex;flex-direction: column;}
.app-title:after {content: '';display: block;position: absolute;left: 0;bottom: -10px;width: 25px;height: 4px;background: #ea1d}

.app-contact> h3{color: white; text-align: center;}
.app-contact> address{color: white; text-align: center;}
.app-contact> p{color: white; text-align: center;}

.app-form-group {margin-bottom: 15px;}
.app-form-group.message {margin-top: 40px}
.app-form-group.buttons {margin-bottom: 0;text-align: right;}
.app-form-button {font-family: 'Body1';background: rgb(237, 134, 51);border: none;color: white;font-size: 14px;cursor: pointer;outline: none;
 border-radius: 12px;}
.app-form-control {width: 100%;padding: 10px 0;background: none;border: none;border-bottom: 1px solid white;color: #ddd;font-size: 14px;text-transform: uppercase;
	outline: none;transition: border-color .2s; border-radius: 0px; } 

::-webkit-input-placeholder{font-family: "Body1"; color:#999}


footer{height: 10%; width: 100%; border-top: 2px solid whitesmoke; margin-top: 3%; display: flex; position: sticky; top: 100%;}
footer> .mydivs{width: 33.3%;  display: inline-block; height: 100%; align-items: center; display: flex;justify-content: center;}
footer> .mydivs> p{text-align: center; color: white;}
footer> .mydivs> p> a{color: var(--main-theme);}
.heart{display:inline-block; width: 200px; aspect-ratio: 1; border-image: radial-gradient(red 69%,white 70%) 84.5% fill/100%;
    clip-path: polygon(-41% 0,50% 91%, 141% 0);}
footer> .mydivs> address{text-align: center; color: white; margin-top: 2%;}
footer> .mydivs> .socials{width: 40px; height: 40px; margin-left: 3%; border-radius: 25%; margin-top: 2%}
footer> .mydivs> .socials> img{width: 100%; height: 100%; border-radius: inherit}

.main-nav {display: none;position: fixed;top: 0;right: 0;left: 0;bottom: 0;text-align: center;background: rgba(0,0,0,0.3);opacity: 0;z-index: 80;visibility: hidden;transition: all .375s;}
.main-nav.is-open {opacity: 1;z-index: 100;visibility: visible; height: 2000%;}
/* Yellow band effect */
.main-nav::before {content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 10%;background: rgb(0, 0, 0);transform-origin: 0 0;transform: skew(-14deg) translateX(-120%);transition: all .275s .1s;}
.main-nav.is-open::before {transform: skew(-5deg) translateX(0) }

/* Skewing effect on menu links */
.main-nav ul {display: inline-flex;flex-direction: column; margin-top: 20%; /* Should be 100%, but we have a notice message :D */align-items: flex-end;justify-content: center;transform: translateX(-40%) skew(-8deg);}
.main-nav li {display: block;margin: .5rem 0;text-align: right;transform: skew(0deg);}

/* Apparition effect on links */
.main-nav a {opacity: 0;transform: translateY(-10px)}
.main-nav.is-Close a {opacity: 0;transform: translateY(-10px);}
.main-nav.is-open a {opacity: 1;transform: translateY(0);}
.main-nav li:nth-child(1) a {transition: all 275ms 175ms}
.main-nav li:nth-child(2) a {transition: all 275ms 225ms}
.main-nav li:nth-child(3) a {transition: all 275ms 275ms}
.main-nav li:nth-child(4) a {transition: all 275ms 325ms}
.main-nav li:nth-child(5) a {transition: all 275ms 375ms}
/*.belowParallaxss{top: 40vh; }*/
/* Decoration */
.main-nav ul,
.main-nav li {list-style: none;padding: 0; }
.main-nav a {display: block;padding: 12px 0; color: white;font-size: 1.4em;text-decoration: none;font-weight: bold;}
.main-nav >ul> li> a:hover{color: var(--main-theme)}
.main-nav >ul> li> .active{color: var(--main-theme)}
/* Burger Style: @see: https://codepen.io/CreativeJuiz/full/oMZNXy */
.open-main-nav {display: none; position: absolute;top: 1px;padding-top: 20px;right: 15px;z-index: 200;background: transparent;border: 0;cursor: pointer;}
.open-main-nav:focus {outline: none;}
.burger {position: relative;display: none;width: 28px;height: 4px;margin: 0 auto;background: white;transform: skew(5deg);transition: all .275s;}
.burger:after,
.burger:before {content: '';display: none;height: 100%;background: white;transition: all .275s;}
.burger:after {transform: translateY(-12px) translateX(-2px) skew(-20deg);}
.burger:before {transform: translateY(-16px) skew(-10deg);}
/* Toggle State part */
.is-open .burger {transform: skew(5deg) translateY(-8px) rotate(-45deg);}
.is-open .burger:before {transform: translateY(0px) skew(-10deg) rotate(75deg);}
.is-open .burger:after {transform: translateY(-12px) translateX(10px) skew(-20deg);opacity: 0;}
/* MENU Text part */
.burger-text {display: none;font-size: .675rem;letter-spacing: .05em;margin-top: .5em;text-transform: uppercase;font-weight: 500;text-align: center;color: white;}


@media only screen and (max-width: 600px) {
    .header{height: 8%; width: 100%}
    .header> .navigations{display: none;}
    .header> .musicBTN{margin-left: 20%; font-weight:normal; padding: 0% 1% 0% 1%; margin-top: 4%;}
  
    .main-nav {display: block;}
    .open-main-nav {display: block}
    .burger {display: block;}
    .burger:after,
    .burger:before {display: block;}
    .burger-text {display: block;}

    .myIframe{width: 80%; height: 40%;}

    .homeBanner{height: 100%; display: block; margin-top: 20%;}
    .homeBanner> .twoSides{width: 98%; margin-left: 1%; height: 50%; display: block}
    .homeBanner> .twoSides> h1{ font-size: 30; margin-left:7%;}

    .homeBanner> .twoSides> .streams{width: 100%; height: 70%; display: flex}
    .homeBanner> .twoSides> .streams> .imgDiv{width: 50%; margin-left: 3%;}
    .homeBanner> .twoSides> .streams> .btnSide{width: 65%; margin-left: -20%}
    .homeBanner> .twoSides> .streams> .btnSide> p{margin-left: 35%; margin-top: 11em;}

    .homeBanner> .twoSides> .slidesContainer> .behindDiv{width: 40%; height: 50%; margin-top: 30%; margin-left: 5%}
    .homeBanner> .twoSides> .slidesContainer> .frontDiv{width: 65%; height: 70%; margin-top: 20%; margin-left: 33%}

    .aboutDiv{width: 96%; margin-left: 2%; margin-top: -3%; display: block;}
    .aboutDiv> .twoDivs{width: 100%;}
    .aboutDiv> .twoDivs > p{width: 100%}
    /* .newsDiv{margin-top: 10%} */

    .popUpPresenter{width: 95%; margin-left: 5;}
    .popUpPresenter> .theIMG{width: 70%; height: 15em;}

    .headingDiv{margin-top: 25%;}
    .headingDiv> h1{min-width: 10%; max-width: 70%; font-size: 30;}
    .showContainer{width: 95%; height: 15%; margin: 2% 0% 0% 2.5%}
    .showContainer> .contentside> .showTime{ min-width: 40%; max-width: 90%;}
    .doughnut{ margin-top: -40%; margin-bottom: -40%; z-index: 0;}
    .mydoughnut{height:43%; width:90%;}    

    .partispation{ width: 95%; z-index: 4; display: block; position: relative; height: 63%; margin: 2% 0% 0% 2.5%;}
    /* .partispation> .participationDevid{width: 100%; height: 50%; display: inline-block} */
    .partispation> .participationDevid{width: 100%; height: 80%; }
    .partispation> .participationDevid:nth-child(1){height: 20%;}
    .partispation> .participationDevid> h2{color: white; font-size: 25;}

    .headIcons{height: 10%; width: 98%; margin: 3% 0% 0% 1%;}
    .headIcons> .divsInside{ width: 20%; height: 100%; margin-left: 3%}

    .eventContainer{width: 95%; margin: 3% 0% 2% 2.5%; height: 30%;}

    .popUp{width: 90%; max-height: 120%; overflow-y: auto;}

    .montywoodSection{width: 96%; margin-left: 2%; height: 70%; margin-top: 5%; display: block;}
    .montywoodSection> .dividedDivs:nth-child(1){width: 100%; height: 40%}
    .montywoodSection> .dividedDivs{width: 100%; height: 60%}
    .montywoodSection> .dividedDivs> .montyLogo{ width: 100%; height: 25%}
    .montywoodSection> .dividedDivs> h1{font-size: 2em; margin-top: 0.2em;}
    .montywoodSection> .dividedDivs> button{padding: 2% 4% 2% 4%;}
    .montywoodSection> .dividedDivs> .downloadDiv{width: 65%; margin-left: 30%}

    .servicesContainer{width: 100%; max-height: 270%;}
    .servicesContainer> .service{width: 96%; height: 8em; margin-top: 2%; margin-left: 2%;}
    .servicesContainer> .service> h3{ font-size: 16}

    .MycontactUS{width: 96%; margin-left: 2%}
    .background {display: block; min-height: 10vh; width: 100%}
    .screen-body {display: block}
    .app-form-button {font-size: 17px;}


    footer{height: 8%; width: 96%; margin-left: 2%; margin-top: 3%; display: inline-block; position: unset; bottom: 0%;}
    footer> .mydivs{width: 100%;}
    footer> .mydivs> p{margin-top: -1%;}
    footer> .mydivs> address{margin-top: -2em;}
}

@media only screen and (min-width: 600px) and (max-width: 980px) {
    .header{height: 8%}
    .header> .navigations{margin-left: 2%; width: 60%;}
    .header> .musicBTN{padding: 0% 1% 0% 1%; margin-left: 2%;}

    .homeBanner{height: 40%; margin-top: 15%;}
    .homeBanner> .twoSides> h1{font-size: 50;}
    .homeBanner> .twoSides> .streams> .imgDiv{width: 50%}
    .homeBanner> .twoSides> .streams> .btnSide{width: 50%; margin-left: -15%}
    .homeBanner> .twoSides> .streams> .btnSide> p{margin-left: 30%; margin-top: 7em;}
    .homeBanner> .twoSides> .slidesContainer> .frontDiv{width: 65%}
    .myIframe{width: 60%; height: 40%;}

    /* .sliderPics{height: 200px;} */
    /* .newsDiv> .galleryContainer>.MenuPic> .picDiv> a> img{height: 130px;} */

    .aboutDiv> .twoDivs > p{width: 94%;}
    .montywoodSection{height: 35%;}
    .montywoodSection> .dividedDivs> .downloadDiv{width: 85%;}
    .showContainer{width: 45.5%; height: 10%; margin: 2% 0% 0% 3%}
    .showContainer> .picsSide{width: 32%}
    .doughnut{position: relative; margin-top: -40%; margin-bottom: -38%} 
    .mydoughnut{height:60%;  width:90%;}
    .partispation{ height: 50%}
    .partispation> .participationDevid{width: 100%; height: 70%;}
    .partispation> .participationDevid:nth-child(1){height: 30%;}

    .headingDiv> h1{margin-bottom: 0%; max-width: 50%;}
    .eventContainer{height: 20%;} 

    .MycontactUS{width: 90%; margin-left: 5%;}
    .background {margin-bottom: 0%;min-height: 10vh;}
    .servicesContainer{max-height: 100%;}
    .servicesContainer> .service{height: 12em}
    .popUp{width: 60%; height: unset; min-height: 40%;}
    .popUpPresenter{width: 60%;}
    .popUpPresenter> .theIMG{width: 50%;}
}


@media only screen and (max-height: 600px)and (orientation: landscape) {

    .header{height: 15%}
    .header> .navigations{display: none;}
    .header> .musicBTN{margin-left: 20%;}
    .main-nav {display: block; overflow-y: auto;}
    .open-main-nav {display: block}
    .main-nav ul { margin-top: 1%;}
    .burger {display: block;}
    .burger:after,
    .burger:before {display: block;}
    .burger-text {display: block;}

    .homeBanner{height: 120%; margin-top: 8%}
    .montywoodSection{height: 100%}
    .popUp{ max-height: 200%}

    .myIframe{height: 90%; top: 2%;}

    .headingDiv{margin-top: 12%;}
    .headingDiv> h1{margin-bottom: 5%;}
    
    .podcastDiv{height: 40%}
    .eventContainer{height: 50%;}
    .servicesContainer{max-height: 350%;}
    .servicesContainer> .service{width: 40%; height: 9em; margin-left:6.5%;}
    .showContainer{height: 32%;}
    .doughnut{margin-top: -20%; margin-bottom: -20%}
    .mydoughnut{height:100%;width:50%;}

    .partispation{height: 120%;}
    .partispation> .participationDevid{width: 100%; height: 85%;}
    .partispation> .participationDevid:nth-child(1){height: 15%;}
    footer{height: 17%;}

}

















































.element-slideInLeft{
  animation: slideInLeft ease 0.5s; animation-iteration-count: 1;
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideInLeft ease 0.5s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}
.element-slideInRight{
  animation: slideInRight ease 0.5s; animation-iteration-count: 1;
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideInRight ease 0.5s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}
.element-slideInTop{animation: slideInTop ease 0.3s; animation-iteration-count: 1; 
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideInTop ease 0.3s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}
.element-slideInBottom{animation: slideInBottom ease 0.3s; animation-iteration-count: 1;
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideInBottom ease 0.3s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}
.element-slideOutLeft{
  animation: slideOutLeft ease 0.15s; animation-iteration-count: 1;
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideOutLeft ease 0.15s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}
.element-slideOutRight{
  animation: slideOutRight ease 0.15s; animation-iteration-count: 1;
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideOutRight ease 0.15s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}
.element-slideOutTop{animation: slideOutTop ease 0.15s; animation-iteration-count: 1; 
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideOutTop ease 0.15s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}
.element-slideOutBottom{animation: slideOutBottom ease 0.15s; animation-iteration-count: 1;
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideOutBottom ease 0.15s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}

.element-slideInTopLeft{animation: slideInTopLeft ease 0.3s; animation-iteration-count: 1; 
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideInTopLeft ease 0.3s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}
.element-slideInTopRight{animation: slideInTopRight ease 0.3s; animation-iteration-count: 1; 
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideInTopRight ease 0.3s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}
.element-slideInBottomRight{animation: slideInBottomRight ease 0.3s; animation-iteration-count: 1; 
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideInBottomRight ease 0.3s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}
.element-slideInBottomLeft{animation: slideInBottomLeft ease 0.3s; animation-iteration-count: 1; 
  transform-origin: 50% 50%; animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: slideInBottomLeft ease 0.3s; -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
}


@keyframes slideInLeft{
  0% { opacity:0; transform:  translate(-50px,0px)  ;}
  100% { opacity:1; transform:  translate(0px,0px)  ;}
}
@keyframes slideInRight{
  0% { opacity:0; transform:  translate(50px,0px)  ;}
  100% { opacity:1; transform:  translate(0px,0px)  ;}
}
@keyframes slideInTop {
	0% { opacity:0; -webkit-transform:  translate(0px,-50px) ; }
	80% { opacity:0.8; -webkit-transform:  translate(0px,2px) ;}
	100% { opacity:1; -webkit-transform:  translate(0px,0px) ; }
}
@-webkit-keyframes slideInTop {
  0% { opacity:0; -webkit-transform:  translate(0px,-50px) ; }
  80% { opacity:0.8; -webkit-transform:  translate(0px,2px) ;}
  100% { opacity:1; -webkit-transform:  translate(0px,0px) ; }
} 
@keyframes slideInBottom {
	0% { opacity:0; -webkit-transform:  translate(0px,50px) ; }
	/*80% { opacity:0.8; -webkit-transform:  translate(0px,-2px) ;}*/
	100% { opacity:1; -webkit-transform:  translate(0px,0px) ; }
}
@-webkit-keyframes slideInBottom {
  0% { opacity:0; -webkit-transform:  translate(0px,50px) ; }
  /*80% { opacity:0.8; -webkit-transform:  translate(0px,-2px) ;}*/
  100% { opacity:1; -webkit-transform:  translate(0px,0px) ; }
}
@keyframes slideOutLeft {
  0% { opacity:1; -webkit-transform:  translate(0px,0px) ; }
  100% { opacity:0; -webkit-transform:  translate(-25px,0px) ; }
}
@-webkit-keyframes slideOutLeft {
  0% { opacity:1; -webkit-transform:  translate(0px,0px) ; }
  100% { opacity:0; -webkit-transform:  translate(-25px,0px) ; }
}
@keyframes slideOutRight {
  0% { opacity:1; -webkit-transform:  translate(0px,0px); }
  100% { opacity:0; -webkit-transform:  translate(25px,0px); }
} 
@-webkit-keyframes slideOutRight {
  0% { opacity:1; -webkit-transform:  translate(0px,0px); }
  100% { opacity:0; -webkit-transform:  translate(25px,0px); }
} 
@keyframes slideOutTop {
  0% { opacity:1; -webkit-transform:  translate(0px,0px) ; }
  100% { opacity:0; -webkit-transform:  translate(0px,-25px) ; }
}  
@-webkit-keyframes slideOutTop {
  0% { opacity:1; -webkit-transform:  translate(0px,0px) ; }
  100% { opacity:0; -webkit-transform:  translate(0px,-25px) ; }
} 
@keyframes slideOutBottom {
  0% { opacity:1; -webkit-transform:  translate(0px,0px) ; }
  100% { opacity:0; -webkit-transform:  translate(0px,50px) ; }
} 
@-webkit-keyframes slideOutBottom {
  0% { opacity:1; -webkit-transform:  translate(0px,0px) ; }
  100% { opacity:0; -webkit-transform:  translate(0px,50px) ; }
} 

@keyframes slideInTopLeft{
  0% { opacity:0; transform:  translate(-50px,-50px) /*skew(40deg,40deg)*/  ;}
  100% { opacity:1; transform:  translate(0px,0px)  ;}
}
@keyframes slideInTopRight{
	0% { opacity:0; transform:  translate(50px,-50px) /*skew(140deg,140deg)*/ ;}
	100% { opacity:1; transform:  translate(0px,0px);}
}
@keyframes slideInBottomRight{
	0% { opacity:0; transform:  translate(50px,50px); }
	100% { opacity:1; transform:  translate(0px,0px); }
}
@keyframes slideInBottomLeft{
	0% { opacity:0; transform:  translate(-50px,-50px); }
	100% { opacity:1; transform:  translate(0px,0px); }
}
@keyframes slideOutTopLeft{
	0% { opacity:1; transform: translate(0px,0px);}
	100% { opacity:0; transform:  translate(-50px,-50px),skew(40deg,40deg); }
  }
  @keyframes slideOutTopRight{
	  0% { opacity:1; transform: translate(0px,0px);}
	  100% { opacity:0; transform: translate(50px,-50px)/*skew(-40deg,-40deg)*/; }
  }
@keyframes slideOutBottomRight{
	0% { opacity:1; transform: translate(0px,0px);}
	100% { opacity:0; transform: translate(50px,50px); }
}
@keyframes slideOutBottomLeft{
	0% { opacity:1; transform: translate(0px,0px) ;}
	100% { opacity:0; transform:  translate(-50px,50px); }
}