#shout_2018_header {
        width: 100%;
        padding-bottom: 50%;


	
    }
    
    .bg-animation {
        position: relative;
        width: 100%;
        background-image: url(https://asset.msi.com/event/2018/shout_2018/images/kv_banner01.jpg);
        background-position: 0 0;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    
   .bg-animation::after {
        width: 100%;
        content: "";
        background-image: url(https://asset.msi.com/event/2018/shout_2018/images/kv_banner03.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        opacity: 1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 1;
        animation-name: opacity-eye;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }
    
    .bg-animation::before {
        width: 100%;
        content: "";
        background-image: url(https://asset.msi.com/event/2018/shout_2018/images/kv_banner04.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        opacity: 1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 1;
        animation-name: opacity-eye;
        animation-duration: 2s;
        animation-delay: 1.5s;
        animation-iteration-count: infinite;
    }
    

    
    @keyframes opacity-eye {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    /*animated scroll arrow animation*/
    
    @-webkit-keyframes fade_move_down {
        0% {
            -webkit-transform: translate(0, -10px) rotate(45deg);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translate(0, 10px) rotate(45deg);
            opacity: 0;
        }
    }
    
    @-moz-keyframes fade_move_down {
        0% {
            -moz-transform: translate(0, -10px) rotate(45deg);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            -moz-transform: translate(0, 10px) rotate(45deg);
            opacity: 0;
        }
    }
    
    @keyframes fade_move_down {
        0% {
            transform: translate(0, -10px) rotate(45deg);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            transform: translate(0, 10px) rotate(45deg);
            opacity: 0;
        }
    }
    
    @keyframes rainbowBorder {
        0% {
            box-shadow: 0 0 5px #ff0000;
        }
        12.5% {
            box-shadow: 0 0 5px #ff9000;
        }
        25% {
            box-shadow: 0 0 5px #feff00;
        }
        37.5% {
            box-shadow: 0 0 5px #1dff00;
        }
        50% {
            box-shadow: 0 0 5px #00ffe6;
        }
        62.5% {
            box-shadow: 0 0 5px #0042ff;
        }
        75% {
            box-shadow: 0 0 5px #e200ff;
        }
        87.8% {
            box-shadow: 0 0 5px #ff00b6;
        }
        100% {
            box-shadow: 0 0 5px #ff0000;
        }
    }
    
    @keyframes rainbowText {
        0% {
            color: #ff0000;
            border: #ff0000 1px solid;
        }
        12.5% {
            color: #ff9000;
            border: #ff9000 1px solid;
        }
        25% {
            color: #feff00;
            border: #feff00 1px solid;
        }
        37.5% {
            color: #1dff00;
            border: #1dff00 1px solid;
        }
        50% {
            color: #00ffe6;
            border: #00ffe6 1px solid;
        }
        62.5% {
            color: #0042ff;
            border: #0042ff 1px solid;
        }
        75% {
            color: #e200ff;
            border: #e200ff 1px solid;
        }
        87.8% {
            color: #ff00b6;
            border: #ff00b6 1px solid;
        }
        100% {
            color: #ff0000;
            border: #ff0000 1px solid;
        }
    }
    
    
@media screen and (max-width:768px) {
#mysticLight_header {
       width: 100%;
        padding-bottom: 50%;
		background-size: cover; 
		height:400px; 
		background-position: 49% 50%;

	
    }
    
    .bg-animation {
        position: relative;
       width: 100%;
        background-image: url(https://asset.msi.com/event/2018/shout_2018/images/kv_banner01.jpg);
        background-repeat: no-repeat;
		
		background-size: cover; 
		height:400px; 
		background-position: 49% 50%;
    }
    
   .bg-animation::after {
       width: 100%;
        content: "";
        background-image: url(https://asset.msi.com/event/2018/shout_2018/images/kv_banner03.jpg);
        background-repeat: no-repeat;
        opacity: 1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 1;
        animation-name: opacity-eye;
        animation-duration: 3s;
        animation-iteration-count: infinite;
		
		background-size: cover; 
		height:400px; 
		background-position: 49% 50%;
    }
    
    .bg-animation::before {
        width: 100%;
        content: "";
        background-image: url(https://asset.msi.com/event/2018/shout_2018/images/kv_banner04.jpg);
        background-repeat: no-repeat;
        opacity: 1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 1;
        animation-name: opacity-eye;
        animation-duration: 2s;
        animation-delay: 1.5s;
        animation-iteration-count: infinite;
		
		
		background-size: cover; 
		height:400px; 
		background-position: 49% 50%;
    }
    
    
    
	}