/* CSS Document */
/*@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);*/

 /* ========== CSS ALLGEMEIN ========== ========== ==========*/
:root {
    --inselHellBlau: #6ca5da;
    --inselGruen: #009870;
    --inselGrau: #677078;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    html,body{
        scroll-behavior:smooth;
    	}

    body {
        background:#009870;
        color:white;
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        overflow-x: hidden;
  } 

    a {
        color:#EDF4ED;
        text-decoration: none;
    }

    area {
        cursor:pointer;
    }

    h1 {
        color: white;
        font-size: 3rem;
    }

    h2 h3{
        color: white;
        font-size: 2rem;
    } 
 	h4{
        color: white;
        font-size: 1.5rem;
    } 

	p {
	color: white;
    font-size: 1.2rem;
    padding: 0.5em 0;
	}

    li{
    list-style: none;   
    }

    footer {

    }
/* ========== CSS Differenziert ========== ========== ==========*/
/* ========== Navigation Header ========== ========== ==========*/
    nav{
    position: relative;
    width: 100%;
    background-color: white;
    min-height: 300px;
	padding-bottom: 230px;
	margin-bottom: 230px;	
    }

.navigations_tier{
	position: absolute;
	z-index: 2222;
	opacity: 0;
}

.navigations_tier_nashorn{
	left:-1rem;
	top:-4.2rem;
	height: 5rem;
}

.navigations_tier_affe{
	left: 1.1rem;
	top:-4.8rem;
	height: 5rem;
}

.navigations_tier_tiger img{
	height: 6rem !important;
	width: auto;
}

.navigations_tier_tiger{
	left:-1rem;
	top:-5.85rem;
	height: 6rem !important;
}

.navigations_tier_croco{
	left: 1.9rem;
	top: -4.8rem;
	height: 5rem;
}

.navigations_tier_giraffe{
	left: 9.325rem;
	top: -4.5rem;
	height: 5rem;
}

.navigations_tier_sloth{
	left:2.8rem;
	top:-4.8rem;
	height: 5rem;
}

.navigations_tier img{
	height: 5rem;
}

.kinderklinikbutton:hover .navigations_tier{
	opacity: 1;
	transition: all ease-in-out 0.3s;
}

#logo_offiziell{
	
	display: flex;
	margin: 1rem auto 5rem auto;
    max-width: 1200px;
	
}

#logo_offiziell img {
	height: 80px;
}
	
    header {
        position: absolute;
		bottom: -200px;
		left:0;
		right:0;
        height: 400px;
        width: 100%;
        max-width: 1200px;
		margin: 0 auto;	
	    font-size: 2.3em;
		transition:all 0.3s;
        text-align: center;
        background-image: url('../bilder/anouk/bearbeitet/quer_poli.jpg');
        background-repeat: no-repeat;    
        background-size: cover;
        background-position: center center;
        background-color: rgba(237,236,236,0.79);
		z-index: 30;
		}
main{
    width: 100%;    
	max-width:1200px;
	 
} 
.logo_header img {
	position: relative;
	top:-1rem;
	width: 50px;
	height: auto;
}
.logo_header_tier img {
	position: absolute;
	left: 15rem;
	top: 5.5rem;
	width: 70px;
	height: auto;
	z-index: 20;
}

.header_img_fixed {
    position: relative;
    left: 4rem;
    top: -8rem;
    background-color: none;
    }

.header_img_fixed img{
    width: 150px;
    height: auto;
}


/* ========== Navigation Buttons ========== ========== ==========*/
.nav_ul{
    display: flex;
    justify-content:space-between;
	flex-wrap: wrap;
    align-items: center;
	margin:0 auto;
    max-width: 1200px;
}
.kinderklinikbutton {
    position: relative;
    display: inline-flex;
    padding: 0;
    margin: 0 0.3rem;
	border-radius: 5px;
	border: solid 0px #3866a3;
	text-decoration: none;
    align-items: center;
    font-family: Verdana;
	font-size: 15px;
	background: linear-gradient(136deg, #00986f 10%, #6ca5da 100%);
	color: white;
    
    cursor: pointer;
}
.kinderklinikbutton:hover {
	background: linear-gradient(136deg, #6ca5da 10%, #00986f 100%);
}
.kinderklinikbutton-text {
	position: relative;
	padding: 12px 30px;
}
.kinderklinikbutton-icon {
	position: relative;
	padding: 12px 20px;
}


 /* ========== Navigation-Kinder ========== ========== ==========*/

.navigation_kinder{
    position: relative;
    height: auto;
    width: 100%;
    margin:6rem 0;
}
.carousel {
    height:350px;
}
.slick-slide {
    width: 400px;
    height:300px;
    text-align: center;
    display:flex;
    align-items: center;
    justify-content: center;
} 
 .slick-slide a{      
    padding:0;
    margin:0;
} 
.slick-slide img {
	 display:inline-block;
	 width:80%;
	 height: 80%;
	 object-fit: cover;
	 padding:0;
	 margin:0;
	 transition:0.2s all ease-in-out;
}
        

 .carousel_bild_container{
	 padding:1rem 0rem;
	 margin:0;
	 display:flex;
	 align-items: center;
	 justify-content: center;
}
.carousel_bild_container a {
	 position: relative;
	 height: 100%;
	 width: 100%;
 }

 .carousel_bild_container a span{
   width: 100%;
   display: flex;
   justify-content: center;
   position: absolute;
   bottom: 60px;
   left: 0;
   background-color: rgba(0,0,0,0.31);
 }

.carousel_bild_container a span h2{
 	color: white;
}
        
.slick-current img {
	 width:100%;
	 height: 100%;
	 object-fit: cover;
	 transition:0.3s all ease-in-out;
}

 .carousel-arrows  {
	 color:#009870;
	 font-size: 70px;
	 position: fixed;         
	 max-width: none;
	 padding-top: 10px;
	 width: 100%;
	 display: flex;
	 justify-content: space-evenly;
}
       
.carousel-nav  {
     color: #009870;
     font-size: 30px;
     position: fixed;         
     max-width: none;
     margin-top: 2px;
     height:6rem;       
}
 .fa-chevron-right .fa-chevron-left  {
     color: #009870;
     font-size: 70px;
     position: fixed;
     border:2px double orange;           
     max-width: none;
     margin-top: 2px;
     padding: 3px;
}
        

/* ========== Wimmelbild ========== ========== ==========*/
  
.kartencontainer {
    margin-bottom:1rem;
    background:none;
    top:0;
}
.bildcontainer {
    display:flex;
	flex-direction:column;
    justify-content: space-between;
    margin-bottom:2rem;
    padding-top:5rem;
}
.bildcontainer img {
    height:320px;
	width:500px;
    margin-right:1rem;
}

/* ========== WIMMELBILD DESIGN ========== ========== ==========*/

    #kk_wimmelbild{
     /*display: flex;*/
        position: relative;
        
    }
    #kk_bild{
     /*width: 60%;*/
        
    }
    #kk_bild img{
/*        display: block;*/
/*        width: 100%;  */
        /*transform: scale(1);*/
        
    }
 
    
    #kk_info{
     /*width: 40%;*/
        position: absolute;
        top: 0;
        left: 0;
    }
    
    area {
        cursor:pointer;
    }

.infoboxen {
    position: absolute;
    top: 0;
    left: 0;
    width: 22rem;
    max-height: 26rem;
    overflow: hidden;
    overflow-y:auto;
    background-color: var( --inselHellBlau );
    padding: 1rem;
    box-shadow: 0 0 1rem 0 black;
}

.infoboxen img {
    display: block;
    max-width: 100%;
}
.link_infoboxen{
	text-decoration: underline;
}

.media {
	position:relative;
	justify-content: center;
	padding-top: 1rem;
	width: 50%;
	height:auto;
}
.audio {
  opacity: 0.5;
  padding: -1rem;
	
}
.bild_virtueller_rundgang {
	position: relative;
	flex-direction: row;
	justify-content: flex-start;
	margin-bottom: 1rem;
	padding-top: 3rem;
	
	
}
.bild_virtueller_rundgang img{
	object-fit: cover;
	width: 100%;
	padding-top: 1rem;
	
}
.close_infobox{
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 2rem;
  	cursor: pointer;
}

/* ========== WIE BITTE ========== ========== ==========*/

.wie_bitte_einleitung{
	padding: 1rem;
	padding-bottom: 2rem;
}

/*Suchbutton*/
.suchfeld {
  	display: flex;
  	flex-direction: row-reverse;
  	margin: 0;
  	padding: 1px;
  	/* background: rgb(241 8 12 / 39%); */
  	align-items: center;
}
.suchbutton{
	/* display: flex; */
	flex-direction: row;
	flex-grow: 2;
	width: 100%;
}
.bild_wiebitte img {
	height:100%;
	width:auto;
    object-fit: cover; 
}

.tb {
  display: flex;
  /* width: 100%; */
  justify-content: space-between;
}

.td {
  /* display: table-cell; */
  /* vertical-align: middle; */
  flex-grow: 5;
  flex-basis: auto;
  background-color: var(--inselGruen);
}

input,
button {
  color: white;
  font-family: Verdana;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
}

#cover {
  position:flex;
  top: 50%;
  left: 0;
  right: 0;
  /* width: 550px; */
  padding: 15px;
  margin: -83px auto 0 auto;
  background-color:rgba(165,178,189,0.63);
  border-radius: 10px;
  box-shadow: 0 12px 20px #009870, 0 0 0 10px rgba(255,255,255,0.59);
  transform: scale(0.8);
}

form {
  /* height: 76px; */
}

input[type="text"] {
  width: 80%;
  padding: 0.5rem 1rem;
  line-height: 2;
  letter-spacing: inherit;
	font-size: 1.5rem;
}

input[type="text"]::placeholder {
  	color: white;
	
}

#s-cover {
  
  margin-left: 35px;
  width: 96px;
  flex-basis: 0;
  flex-grow: 1;
}

button {
  position: relative;
  display: block;
  width: 84px;
  height: 96px;
  cursor: pointer;
}

#s-circle {
  position: relative;
  top: -8px;
  left: 0;
  width: 43px;
  height: 43px;
  margin-top: 0;
  border-width: 15px;
  border: 7px solid #fff;
  background-color: transparent;
  border-radius: 50%;
  transition: 0.5s ease all;
}

button span {
  position: absolute;
  top: 68px;
  left: 43px;
  display: block;
  width: 45px;
  height: 15px;
  background-color: transparent;
  border-radius: 10px;
  transform: rotateZ(52deg);
  transition: 0.5s ease all;
}

button span:before,
button span:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45px;
  height: 15px;
  background-color: #fff;
  border-radius: 10px;
  transform: rotateZ(0);
  transition: 0.5s ease all;
}

#s-cover:hover #s-circle {
  top: -1px;
  width: 67px;
  height: 15px;
  border-width: 0;
  background-color: #fff;
  border-radius: 15px;
}

#s-cover:hover span {
  top: 50%;
  left: 56px;
  width: 25px;
  margin-top: -9px;
  transform: rotateZ(0);
}

#s-cover:hover button span:before {
  bottom: 11px;
  transform: rotateZ(52deg);
}

#s-cover:hover button span:after {
  bottom: -11px;
  transform: rotateZ(-52deg);
}
#s-cover:hover button span:before,
#s-cover:hover button span:after {
  right: -6px;
  width: 40px;
  background-color: #fff;
}


/* ========== Vorbereitung ========== ========= ===========  ==========*/



#links_vorbereitung{
	 	
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        padding-top: 1rem;
        border-radius: 0.5rem;
}

 #links_vorbereitung a:link {          
		 margin:0.2rem;
		 gap: 1rem;
		 background-color:#00966E;
		 display: flex;
		 flex-wrap: wrap;
		 justify-content: flex-start;
		 text-align:center;
		 padding:1rem;
		 text-transform:uppercase;
		 transition:all ease-in-out 0.3s;
	 border: 0.5px solid white;
		 border-radius: 0.5rem;
           
}

 #links_vorbereitung a:hover{
               
				background: -webkit-linear-gradient(17deg, #009870 0%, #00AE80 47%, #00815F 100%);
				background: -o-linear-gradient(90 deg, #00BE8C 0%, #6CA5DA 47%, rgba(0,0,0 0.1) 100%);
				/*background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(9,0,0,0.6) 47%, rgba(0,0,3) 100%);;*/
                color:white;
}
                /* animierter effekt
                transition:all ease-in-out 0.6s;
            

 


 /*====Bildergalerie 1=====*/ 

.bildergalerie{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
			margin-top: 2rem;
       }
        .bild_container{
            border: 1px solid grey;
            flex-grow: 1;
            height: 30vh;
            padding: 0;
            position: relative;
            overflow: hidden; /*versteckt alles ausserhalb*/
            width: 33%;
        }
        /*bild skalieren*/
        .bild_container img {
            object-fit: cover;
            height: 100%;
            width: 100%;
            transition: all ease-in-out 0.3s;
            
            
        }
        
        .bild_container:hover img {
          transform: scale(1.3);
            transition: all ease-in-out 0.5s;
            /*transform: scale oder rotate für einen effekt*/
        }
        
        
        .bild_container_titel{
            background-color:rgba(0,152,45,0.60);
            border-bottom: 0.2rem solid #009970;
            border-top: 0.2rem solid #009870;
            color: white;
            position: absolute;
            bottom:-5rem;
            padding: 0.5rem;
            left:0;
            width:100%;
            text-align: center;
            transition: all ease-in-out 0.6s;
            
            
        }
        .bild_container:hover .bild_container_titel{
            bottom: 2rem;
            transition: all ease-in-out 0.6s;
        }
        
        
        /*fancybox stylen*/
        .fancybox__caption{
            color:aqua;
            font-size: 2rem;
          
        }
        .fancybox__backdrop{
            background: rgba(100,100,100,0.50);
        }


 /*====BOOKS=====*/

.books_vorbereitung {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1rem;
	padding-bottom: 3rem;
	
}
.books_vorbereitung img{
	height: 50%;
	width: auto;
	object-fit: cover;
}

.spitalfuehrung{
	padding: 1rem;
	padding-bottom: 5rem;
}
.spitalfuehrung a{
	font-size: 15px;
	border-radius: 0.5rem;
  	border: solid 0.5px white;
}

/*====VIDEOS=====*/ 
.video_titel{
	padding-top: 2rem;
}

iframe{
	width: 100%;
}

.videogalerie{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	padding: 2rem;
}

.videocontainer{
	width: 48%;
	margin-bottom: 2rem;
}



/* ========== UNTERHALTUNG ========== ========== ==========  ==========*/

#links_unterhaltung{
	 	
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        padding-top: 1rem;
        border-radius: 0.5rem;
}

 #links_unterhaltung a:link {          
		 margin:0.2rem;
		 gap: 1rem;
		 background-color:#00966E;
		 display: flex;
		 flex-wrap: wrap;
		 justify-content: flex-start;
		 text-align:center;
		 padding:1rem;
		 text-transform:uppercase;
		 transition:all ease-in-out 0.3s;
	 border: 0.5px solid white;
		 border-radius: 0.5rem;
           
}

 #links_unterhaltung a:hover{
               
				background: -webkit-linear-gradient(17deg, #009870 0%, #00AE80 47%, #00815F 100%);
				background: -o-linear-gradient(90 deg, #00BE8C 0%, #6CA5DA 47%, rgba(0,0,0 0.1) 100%);
				/*background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(9,0,0,0.6) 47%, rgba(0,0,3) 100%);;*/
                color:white;
}
                /* animierter effekt
                transition:all ease-in-out 0.6s;
            
/*GAMES*/
.bilder.games{
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1rem;
	padding-bottom: 3rem;
	
}
.bilder.games img{
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1rem;
	padding-bottom: 3rem;
	
}
.video_titel_unterhaltung{
	padding-top: 2rem;
}

iframe{
	width: 100%;
}

.videogalerie_unterhaltung{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2rem;
}

.videocontainer_unterhaltung{
	width: 48%;
	margin-bottom: 2rem;
}
	

 
/*Malvorlagen*/
.platzhalter_unterhaltung img {
	
	flex-direction: row;
    height:25%;
	width:25%;
    margin-left: 5rem;
	padding: 1rem;
    object-fit: cover;
    position: relative;

}

.platzhalter_unterhaltung {
	display: flex;
	flex-direction: row;
}


/* ========== Kontakt ========== ========== ========== ==========*/


.formularabschnitt {
	display: flex;
	flex-direction: row;
	margin:-2px;
	padding-top: 1rem;
	padding-right: 1rem;
	
}
.bild_formular img {
	display: flex;
	flex-wrap: wrap;
    height:350px;
	width:auto;
    object-fit: cover;
	margin: 1rem;
	padding-bottom: 3rem;
}
form {
	margin-left: 0rem;
	margin-right: 3rem;
	width: 80%;
	
	}

.feedback-input {
  color:white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: 1.5rem;
  border-radius: 7px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid white;
  transition: all 0.3s;
  padding: 0.5rem 1rem;
  margin-bottom: 10px;
  width:80%;
  box-sizing: border-box;
  outline:0;
}


.feedback-input:focus { 
	border:2px solid #6ca5da; 
}

textarea {
	color: white;
	font-size: 1.5rem;
	font-family: Helvetica, Arial, sans-serif;
  	height: 150px;
 	line-height: 150%;
  	resize:vertical;
 
}
textarea::placeholder{
	color:white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: 1.5rem;
	line-height: 22px;
	padding: 5px;
	
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 200px;
  background:linear-gradient(136deg, #6ca5da 10%, #00986f 100%);
  border-radius:5px;
  border:0 solid white;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover {
	background: rgb(0,152,112);
background:  linear-gradient(136deg, #00986f 10%, #6ca5da 100%)}








/* ========== google maps ==========*/
.googleabschnitt{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-top: 1rem;
}

#anreise_google{
	height: auto;
	padding: 0.5rem;
	
	
	
}
.text_google{
	margin-top: -1rem;
	margin-left: 0.5rem;
	
}
.iframe_maps{
	margin-top: 1rem;
	width: 100%;
    box-shadow: 0 0 1rem 0 #000000;
	
}


/* ========== Footer ========== ========== ==========*/

footer {
	position: relative;
    max-width: 1200px;
    margin: 0 auto;
	width: 100%;
	padding-top: 1rem;
	border-top: 1px solid white;
}

.footer_div{
    
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.footer_div ul{    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.footer_div a{    
    padding: 1rem 2rem;
    margin: 0 auto;
}
.footer_div a:hover{    
    padding: 1rem 2rem;
    text-decoration:underline;
}

/* ========== Footer Tier ========== ========== ==========*/

.footer_img_fixed {
   	position: absolute;
	background-color: none;  
     
}
.footer_img_fixed_affe img{
    width: 150px;
    height: auto;
}
.footer_img_fixed_affe {
	right: 2rem;
    bottom: 2.3rem;
	
}
.footer_img_fixed_nashorn{
	right: 0.2rem;
    bottom: 2.4rem;
}
.footer_img_fixed_nashorn img{
	width: auto;
    height: 150px;
}
.footer_img_fixed_sloth {
	right: 2rem;
    bottom: 2.1rem;
}
.footer_img_fixed_sloth img {
	width: 150px;
    height: auto;
}
.footer_img_fixed_tiger{
	right: -0.5rem;
    bottom: 2.2rem;
}

.footer_img_fixed_tiger img{
	width: auto;
    height: 160px;
}
.footer_img_fixed_croco{
	right: -0.5rem;
    bottom: 2.2rem;
}

.footer_img_fixed_croco img{
	width: auto;
    height: 160px;
}
.footer_img_fixed_giraffe{
	right: -0.5rem;
    bottom: 2.2rem;
}

.footer_img_fixed_giraffe img{
	width: auto;
    height: 160px;
}




/* ========== Media Screen 600 ========== ========== ==========*/


@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
	
	main{
    width: 100%;    
	max-width:1200px;
	padding: 2rem;
} 
	.footer_div{
    width: 100%;
    display: flex;
    justify-content: space-between;
	flex-direction: column;
}
	.footer_div ul{    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	flex-direction: column;
    text-align: center;
}
	.footer_div li{    
    	padding: 0.2rem 2rem;
		margin: 0rem auto;
}
	/* ========== Nav Head  ========== ========== ==========*/
	
.nav_ul{
    display: flex;
    justify-content:space-between;
	flex-wrap: wrap;
    align-items: center;
	margin:0 auto;
    max-width: 1200px;
	flex-direction: column;
}	
.kinderklinikbutton {
    position: relative;
    display: inline-flex;
    padding: 1rem 2rem ;
    margin: 1rem 0.3rem;
	border-radius: 5px;
	border: solid 0px #3866a3;
	text-decoration: none;
    align-items: center;
    font-family: Verdana;
	font-size: 15px;
	background: linear-gradient(136deg, #00986f 10%, #6ca5da 100%);
	color: white;
	width: 15rem;
    text-align: center;
    cursor: pointer;
	justify-content: center;
}	
	
	
	/* ========== Vorbereitung  ========== ========== ==========*/
	
.videocontainer{
	width: 98%;
	margin-bottom: 2rem;
	
}
	/* ========== Kontakt  ========== ========== ==========*/
	.formularabschnitt {
	display: flex;
	flex-direction: column;
	}
	
	.bild_formular img {
	
    height:300px;
	width:auto;
    object-fit: cover;
	margin: 1rem;
	padding-bottom: 3rem;
}
	
	
}/*heilige Klammer*/




/* ========== Ende CSS  ========== ========== ==========*/

/*Memory Game*/

/** Cards Animations by Animate.css: https://daneden.github.io/animate.css/
$background: #FF9090;
$deck-background: #FFFA62;
$card-background: #FFCF7F;
$card_opend-background: #89C4FF;
$card_match-background: #9BCB3C;
$card_notmatch-background: #EE0E51;

html,
body {
	width: 100%;
	height: 100%
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: $background;
	overflow: hidden;
	font-family: Verdana;
}
.deck {
	width: 345px;
	margin: 0 auto;
	background: $deck-background;
	padding: 16px;
	border-radius: 10px;
	box-shadow: 14px 14px 0 0 #000000;
	
.card {
		height: 75px;
		width: 75px;
		background: $card-background;
		display: inline-block;
		margin: 0 15px 15px 0;
		line-height: 140px;
		font-size: 0;
		color: #ffffff;
		text-align: center;
		border-radius: 8px;
		vertical-align: top;
		cursor: pointer;
		transform: rotateY(180deg);
		transform-style: preserve-3d;
		transition: transform .3s ease;
		font-family: FontAwesome;
		line-height: 75px;

		&:nth-child(4n) {
			margin: 0 0 15px 0;
		}

		&:nth-child(n+13) {
			margin: 0 15px 0 0;

			&:nth-child(4n) {
				margin: 0;
			}
		}

		&.open {
			transform: rotateY(0);
			background: $card_opend-background;
			cursor: default;
		}
		&.show {
			font-size: 33px;
		}

		&.match {
			transform: rotateY(0);
			cursor: default;
			background: $card_match-background;
			font-size: 33px;
		}

		&.notmatch {
			background: $card_notmatch-background;
		}
	}
}
#score-panel {
	text-align: left;
	width: 345px;
	margin-bottom: 10px;
	
	.stars {
		margin: 0;
		padding: 0;
		display: inline-block;
		margin: 0 5px 0 0;
		
		li {
			list-style: none;
			display: inline-block;
		}
	}
	.restart {
		float: right;
		cursor: pointer;
	}
}
::selection {
	background: transparent;
}

.swal2-overlay {
	background-color: rgba(255,255,255,1);
}
**/