
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}






/* Style the tab */
.tab {
	position: relative;
	top:560px;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  border-radius:15px;
  width:48%;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #98FB98;
  float: left;
  border: 2px;
  outline: 1px;
  cursor: pointer;
  padding: 10px 8px;
  transition: 0.3s;
  font-size: 14px;
  border-radius:5px;
  border-color: green;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ADD8E6;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
position: relative;
  padding: 1px 2px;
  border: 12px solid #ccc;
  border-top: none;
  top:560px;
  border-radius: 15px: 
  width:48%;
  
  
}




	.img{
		width: 700px;
		height:500px;
	}

    .imgl{
        width: 1160px;
        height:680px;
    }
	.mrq{
		border: 3px solid blue;
		width: 390px;
		height:182px;
		border-radius:20px; 
		position: absolute;
left: 1120px;
	}
    .iframe 
    {
        border: 1px solid black;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -o-border-radius: 30px;
        position: relative;
        overflow: hidden;
		margin-left: 5px;
        width: 700px;
        height: 300px;
    }
    .iframe iframe
    {
        width: 100%;
        height: 100%;
    }


@media only screen 
and (min-device-width : 275px) 
and (max-device-width : 567px) {
	.iframe 
    {
       
       top:200px;
       height: 1200px;
    	width: 1300px;

        border: 2px solid black;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -o-border-radius: 20px;
        position: absolute;
        overflow: hidden;
left: -2000px;
font-size: 30px;

        
    
    }


}
.iframe iframe
    {
        width: 100%;
        height: 100%;
    }
    #speed{

    	-webkit-marquee-speed: slow;
    }



.container{
    margin: 4% auto;
    width: 210px;
    height: 140px;
    position: relative;
    top :-242px;
    perspective: 1000px;
    left :-530;
}
#carousel{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotation 20s infinite linear;
}
#carousel:hover{
    animation-play-state: paused;
}
#carousel figure{
    display: block;
    position: absolute;
    width: 90%;
    height: 78%;
    left: 10px;
    top: 10px;
    background: black;
    overflow: hidden;
    border: solid 5px black;
}
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
#carousel figure:nth-child(10) { transform: rotateY(360deg) translateZ(288px);}

#carousel img{
    -webkit-filter: grayscale(0);
    cursor: pointer;
    transition: all .5s ease;
    width:100%;
}
#carousel img:hover{
    -webkit-filter: grayscale(0);
    transform: scale(1.2,1.2);
}

@keyframes rotation{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }
}




    


        .bounce {
            height: 40px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            
            border-radius: 10px;
        }
        
        .bounce p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(50%);
            -webkit-transform: translateX(50%);
            transform: translateX(50%);
            -moz-animation: bouncing-text 5s linear infinite alternate;
            -webkit-animation: bouncing-text 5s linear infinite alternate;
            animation: bouncing-text 10s linear infinite alternate;
        }
        .bounce h3 {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: left;
            -moz-transform: translateX(50%);
            -webkit-transform: translateX(50%);
            transform: translateX(50%);
            -moz-animation: bouncing-text 5s linear infinite alternate;
            -webkit-animation: bouncing-text 5s linear infinite alternate;
            animation: bouncing-text 10s linear infinite alternate;
            font-size: 21px;
        }
        
        @-moz-keyframes bouncing-text {
            0% {
                -moz-transform: translateX(50%);
            }
            100% {
                -moz-transform: translateX(-50%);
            }
        }
        
        @-webkit-keyframes bouncing-text {
            0% {
                -webkit-transform: translateX(50%);
            }
            100% {
                -webkit-transform: translateX(-50%);
            }
        }
        
        @keyframes bouncing-text {
            0% {
                -moz-transform: translateX(50%);
                -webkit-transform: translateX(50%);
                transform: translateX(50%);
            }
            100% {
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
            }
        }
    

.more-menu{display:none;position:absolute;background:#fff;border:1px solid #999;padding:8px;z-index:9999}
.more-menu a{display:block;padding:4px;text-decoration:none}


/* More menu location fix */
.more-menu{
display:none;
position:absolute;
min-width:180px;
background:#ffffff;
border:1px solid #999;
border-radius:6px;
box-shadow:0 2px 8px rgba(0,0,0,.25);
padding:6px;
z-index:99999;
}
.more-menu a{
display:block;
padding:8px;
}
