/*
Theme Name: WP Islamrat
*/
body{font-family: akagi-pro, sans-serif; font-weight: 400; font-style: normal;}
h1{font-size: 30px; padding-top: 20px; padding-bottom: 20px;}
a{ color: black; }
a:hover{ color: lightgrey; }
.video{margin-bottom: 50px; margin-top: 50px; z-index: 3; display: flex; justify-content: center; align-items: center;}
.wrapper{width: 100%; display: flex; align-items: center; justify-content: center;}
.mobile{display: none;}
.calligraphie{ width: 45px; height: 120px; margin-right: 15px; margin-bottom: 8px;}
#frame{display: none; margin-top: -110px; margin-left: 300px; width: 360px; border-radius: 4px; color: lightgrey; background-color: white; z-index: 10;}
#close{display: none; width: 20px; margin-left: 310px; margin-top: -98px; z-index: 30; position: absolute;}
/*#frame-mobile{display: none; margin-top: -110px; margin-left: 300px; width: 360px; border-radius: 4px; color: lightgrey; background-color: white;}*/
.slider-button{position: relative; padding-top: 30px;}
.banner{max-width: 100%; height: auto;}

/************/
/* Parallax */  
/************/
#parallax-image{ background-image: url("https://www.islamrat.de/wp-content/uploads/2020/06/wallpaperOg-scaled.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: -10px; z-index: -10; height: 550px;}
.parallax-image2{ background-image: url("https://www.islamrat.de/wp-content/uploads/2020/06/yaallah-transparent.jpg"); height: auto; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
#parallax-islam{background-image: url("https://www.islamrat.de/wp-content/uploads/2020/06/shutterstock_122541487-4-scaled.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -10; height: 500px;}   
.parallax-slider{background-image: url("https://www.islamrat.de/wp-content/uploads/2020/05/quranGroß.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -10; height: 550px;}
#parallax-koran{background-image: url("https://www.islamrat.de/wp-content/uploads/2020/07/koran-scaled-e1595246188620.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -10; height: 500px;} 
#parallax-moschee{background-image: url("https://www.islamrat.de/wp-content/uploads/2020/07/tom.jpeg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -10; height: 500px;}  
#parallax-mohammad{background-image: url("https://www.islamrat.de/wp-content/uploads/2020/07/yesilkubbe-scaled.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -10; height: 500px;}
#parallax-ramadan{background-image: url("https://www.islamrat.de/wp-content/uploads/2020/07/ramadan1-scaled-e1595246469146.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -10; height: 500px;}
#parallax-feste{background-image: url("https://www.islamrat.de/wp-content/uploads/2020/07/fest.jpeg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -10; height: 500px;}  


/**********/
/* Buttons */
/**********/
.BtnText{color: black; position: absolute; z-index: 3; }
.BtnText-sm{color: black; position: absolute; z-index: 3; font-size: 10px;}
.arrowButton{cursor: pointer; width: 240px; height: 90px; z-index: 2; }
.arrowbtnText{color: black; position: absolute; z-index: 3; margin-top: -70px; margin-left: 25px; text-align: center; font-size: 16px;}
.arrowbtnText-small{color: black; position: absolute; z-index: 3; margin-top: -45px; margin-left: 25px; font-size: 14px; text-align: center;}


/*********+++++**/
/* Image-Button */
/***************/
#logoHacUmre{ width: 90px; position: relative; }
#logoPlural{ width: 120px;}
#logoBemuf{width: 120px;}
#logoHasene{width: 120px;}
#logoUkba{width: 120px;}



/*******************************/
/*         Responsives         */
/*******************************/

/* IPhone SE*/
@media (max-width: 325px){
  .calligraphie{ height: 120px; width: 40px; margin: 0px 20px 5px;}
  .wrapper h1{ font-size: 22px; padding-top: 0px;}
  h2{ font-size: 20px;}
  .mobile{display: block;}
  .desktop{display: none;}
  
   

}

/* Mobil Iphone 8 (375 x 667) */
@media (max-width: 375px){
	.koorp{background-color: white; height: auto; padding-top: 20px;}   
	div#parallax-image a .myButton { color: black;  z-index: 11; width: 290px; height: 110px; position: relative;}   
	div#parallax-image a .myButton #rectangle {width: 290px; height: 110px; margin-left: 30px; position: relative; background: white; z-index: 10;}
	div#parallax-image a .myButton #right-triangle { width: 0px; height: 0px; border-left: 30px solid white; border-top: 55px solid transparent; border-bottom: 55px solid transparent; z-index: 10; margin-left: 220px; margin-top: -110px;}
	div#parallax-image a .myButton .BtnText{color: red; margin-left:20px; margin-top: 30px; position: absolute; z-index: 20; }
	.parallax-image2{ background-image: url(css/yaallah_320px.jpg); }
	.wrapper h1{ font-size: 24px; padding-top: 0px;}
  h2{ font-size: 22px;}
	.calligraphie{margin-left: -5px;}
  	.desktop{display: none;}
  .mobile{display:block;}
  #frame{margin-top: 0px; margin-left: 0px;}
   #close{margin: 5px;}
}



/* Mobil IPhone 8 Plus (414 x 736)*/
@media (max-width: 414px){
	a .myButton { color: black;  z-index: 11; width: 290px; height: 110px; position: relative;}   
	a .myButton #rectangle {width: 290px; height: 110px; margin-left: 30px; position: relative; background: white; z-index: 10;}
	a .myButton #right-triangle { width: 0px; height: 0px; border-left: 30px solid white; border-top: 55px solid transparent; border-bottom: 55px solid transparent; z-index: 10; margin-left: 220px; margin-top: -110px;}
	a .myButton .BtnText{color: red; margin-left:20px; margin-top: 30px; position: absolute; z-index: 20; }
	.parallax-image2{ background-image: url(css/yaallah_320px.jpg);}
	.wrapper h1{ font-size: 30px; padding-top: 0px;}
  	h2{ font-size: 28px;}
	.calligraphie{margin-left: -10px;}
  	.desktop{display: none;}
  .mobile{display:block;}
    #frame{margin-top: 0px; margin-left: 0px;}
   #close{margin: 5px;}
 
}

@media (max-width: 600px){
	.wrapper h1{ font-size: 30px; padding-top: 0px;}
	.font-size: 14px;
  	.icons{ width: 20px; }
  .desktop{display: none;}
  .mobile{display:block;}
 
}

  
/* IPad / IPad Mini */  
@media (max-width: 768px){
  .wrapper h1{ font-size: 30px; padding-top: 0px;}
  .icons{ width: 18px; }
  .desktop{display: none;}
  .mobile{display:block;}
  
}


/* Ipad Pro 10 Zoll */
@media (max-width: 834px){
	.wrapper h1{ font-size: 30px; padding-top: 0px;}
	.icons{ width: 20px; }
  .desktop{display:none;}
  .mobile{display:block;}
  
}

/* Ipad Pro 12 Zoll */  
@media (max-width: 1219px){
	.wrapper h1{ font-size: 30px; padding-top: 0px;}
  	.icons{ width: 20px; }
  .desktop{display: none;}
  .mobile{display:block;}
  .grid-4{display: none;}
  #parallax-image{ background-image: url("https://www.islamrat.de/wp-content/uploads/2020/06/wallpaperOg-scaled.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: -10px; z-index: -10; height: 550px;}

}
  

  
@media (min-width: 1219px){
  
	.wrapper h1{ font-size: 30px; padding-top: 0px;}
	.icons{ width: 25px; }
  .desktop{display: block;}
  .mobile{display:none;}
  .navbar-nav .ml-auto .nav-item a{font-size: 14px;}
  
}

/* Microsoft Edge Windows */
@media (min-width: 1920px){
	.wrapper h1{ font-size: 30px; padding-top: 0px;}
  .icons{ width: 25px; }
 .desktop{display: block;}
  .mobile{display:none;}
  .navbar-nav .ml-auto .nav-item a{font-size: 14px;}
  #parallax-image{ height: 600px;}
    .slider-button{padding-top: 90px;}
    .arrowbtnText{font-size: 20px;}
.arrowbtnText-small{font-size: 18px;}
}