.container-heart {
position: relative;
width: 100%;
height: auto;
}
.responsive-heart {
  width: 3.1875em;
  height: 2.75em;
}

.linear-txt-gradient {
                background: linear-gradient(#cc4444,#1a1a44, #cc4444, #1a1a44);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
border: 6px solid red;
border-style: dotted;
  border-radius: 10px;
  margin: -0.1em 4.8em;
 }

h1 {
position: absolute;
margin: -.1em -1.8em;
padding:0em;
top: 0.1em;
left: 37%;
font-size: 4.4vw;
font-family: Arial, Helvetica, sans-serif, cursive;
background: linear-gradient(to right,  #ff0044, #f20d66,#f53d84, #f42574, #f20d66, #ff0044);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
}

h2 {
position: absolute;
top: 1.4em;
left: 42%;
margin: -1.2em -2.6em;
font-size: 3.6vw;
font-family: Arial, Helvetica, sans-serif, cursive;
background: linear-gradient(to right, #2a01f4, #f20d66, #6666ff, #ff00ff, #6666ff, #ff00ff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
color: transparent;
}

h3 {
position: absolute;
top: 2em;
padding: 1.4em;
left: 4%;
margin: .22em 0.1em;
font-size: 3.6vw;
font-family: Arial, Helvetica, sans-serif, cursive;
}

h4 {
position: absolute;
top: -1.4em;
left: 33%;
margin: -1.4em -9.4em;
font-size: 3.1vw;
font-family: Arial, Helvetica, sans-serif, cursive;
}
 #blink {
                font-size: 20px;
                font-weight: bold;
                color: #ccffff;
                transition: 0.5s;
 }
.blink1 {
animation: blinker 2.8s linear infinite;
color: #ccffff;
font-size: 3.4vw;
font-weight: 600;
font-family: sans-serif;        
}
@keyframes blinker {
50% {
opacity: 0;
}
}


.blink_xmas {
  animation: blink 3s ease-in infinite;
}

@keyframes blink {
  0% {
    color: red;
  }
  50% {
    color: green;
  }
  100% {
    color: red;

  }
}




mark1 { 
background-color: #ffd6dd;
color: black;
}

main {
position: relative;
width: 100%;
height: auto;
display: inline-block;
}

.responsiveBorderContainer14 {
min-width:13.4em; 
max-width: 100%;
height:auto; 
min-border: 0.25em;
max-border: 0.3125em;
}
.responsiveBorderContainer14 .responsiveBar {
float:left; 
width:13.3em;
height: 1.4em; 
background:#cdff88;     
font-size: 3.8vw;
font-weight: 900;
font-family: sans-serif;
margin: 7.8em 5.525em;
padding: 0.4em;
border-radius: 4em;
color: #e21828;
}

h5 {
position: absolute;
top: 2.8em;
left: 22%;
margin: 2.2em -1.6em;
font-size: 4.0vw;
font-family: Arial, Helvetica, sans-serif, cursive;
}

h6 {
position: absolute;
top: 4.2em;
left:20%;
margin: -2.4em -1.8em;
padding: 1.4em;
font-size: 3.1vw;
font-family: Arial, Helvetica, sans-serif, cursive;
}

.poster {
float: left;
width: 57%;
border:0;
padding:0;
}

#float { 
width: 25em; 
height: 12em; 
background: white; 
float: inherit; 
} 

.yc-1a{
 background-color: #004d4d;
}

.yc-1{
 background-color: #000099;
}
.yc-2{
 background-color: ##00001a;
}

.YC-text-shadow1{
	text-shadow: .2px .6px .4px red;
    color: #ccffff;
}

.YC-text-shadow{
	text-shadow: .2px .6px .4px red;
    color: #ffff44;
}

.menu {
width: 100%;
border:0;
margin:0;
padding:0;
position: relative;
overflow: hidden;
margin-Top:2em
}

body {font-family: Verdana, sans-serif; margin:0;}
.ycSlides {display: none}
img {vertical-align: middle;}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 2.4em;
width: 6.4em;
margin: auto;
font-size: 2.6vw;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-wrap: normal;
background-color:  #ccffff;
border-radius: 22%;
display: inline-block;
transition: background-color 0.4s ease;
}

.active, .dot:hover {
background-color:  yellow;
font-size: 2.8vw;
text-align:center
}

@-webkit-keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

hr { 
border: 4px solid blue; 
}
.demoslide {
width:100%; 
float: right;                                                                                                                       
right: -1.1em;
height:12em;
margin-Top:-9.1em; 
padding-bottom: 0; 
overflow:hidden; 
position:relative;
}

.turning-demoslide 
img{ position:absolute;
animation:turning-demoslide 57s infinite; 
opacity:0; 
max-width:100%;
width: 44%; 
height: auto;
margin:-40px;
padding: 60px;
}

@keyframes turning-demoslide {5%{opacity:1;} 10%{opacity:0;}}
.turning-demoslide img:nth-child(19){animation-delay:0s;}
.turning-demoslide img:nth-child(18){animation-delay:3s;}
.turning-demoslide img:nth-child(17){animation-delay:6s;}
.turning-demoslide img:nth-child(16){animation-delay:9s;}
.turning-demoslide img:nth-child(15){animation-delay:12s;}
.turning-demoslide img:nth-child(14){animation-delay:15s;}
.turning-demoslide img:nth-child(13){animation-delay:18s;}
.turning-demoslide img:nth-child(12){animation-delay:21s;}
.turning-demoslide img:nth-child(11){animation-delay:24s;}
.turning-demoslide img:nth-child(10){animation-delay:27s;}
.turning-demoslide img:nth-child(9){animation-delay:30s;}
.turning-demoslide img:nth-child(8){animation-delay:33s;}
.turning-demoslide img:nth-child(7){animation-delay:36s;}
.turning-demoslide img:nth-child(6){animation-delay:39s;}
.turning-demoslide img:nth-child(5){animation-delay:42s;}
.turning-demoslide img:nth-child(4){animation-delay:45s;}
.turning-demoslide img:nth-child(3){animation-delay:48s;}
.turning-demoslide img:nth-child(2){animation-delay:51s;}
.turning-demoslide img:nth-child(1){animation-delay:54s;}



/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/* The device with borders */
.smartphone {
position: relative;
width: 360px;
height: 640px;
margin: auto;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}
  
/* The horizontal line on the top of the device */
.smartphone:before {
content: '';
display: block;
width: 60px;
height: 5px;
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -50%);
background: #333;
border-radius: 10px;
  }
  
/* The circle on the bottom of the device */
  .smartphone:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -65px;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 50%;
  }
  
  /* The screen (or content) of the device */
  .smartphone .content {
    width: 360px;
    height: 640px;
    background: white;
  }

@media only screen and (min-width: 960px) {
}
@media only screen and (min-width: 1440px) {
}
@media only screen and (min-width: 2000px) {
}
@media only screen and (max-device-width: 480px) {
}
@media only screen and (device-width: 768px) {
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}
@media only screen and (min-width: 768px) and (max-width: 2000px) {
}
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}

@media only screen and (min-width: 768px) and (max-width: 2000px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}