/*
Theme Name: Galleria Metropolia Child
Theme URI: http://cmsmasters.net/galleria-metropolia-child/
Author: cmsmasters
Author URI: http://cmsmasters.net/
Description: Galleria Metropolia Child Theme
Template: galleria-metropolia
Version: 1.0.0
License:
License URI:
Text Domain: galleria-metropolia-child
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/



.header_mid .header_mid_outer {
    height: 100%;
    position: relative;
    background: #252930;
}

.header_top .header_top_outer {
    height: 100%;
    position: relative;
    background: #252930;
}



.cmsmasters_sale_banner {
	background:url("img/banner.png") no-repeat 0 0;
	display:block;
	width:461px;
	height:269px;
	margin:auto;
	opacity:0;
	visibility:hidden;
	overflow:hidden;
	position:fixed;
	left:auto;
	right:-1px;
	top:auto;
	bottom:300px;
	z-index:9998;
	-webkit-transition:opacity .3s ease-in-out, visibility .3s ease-in-out, bottom 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.1);
	-moz-transition:opacity .3s ease-in-out, visibility .3s ease-in-out, bottom 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.1);
	-ms-transition:opacity .3s ease-in-out, visibility .3s ease-in-out, bottom 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.1);
	-o-transition:opacity .3s ease-in-out, visibility .3s ease-in-out, bottom 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.1);
	transition:opacity .3s ease-in-out, visibility .3s ease-in-out, bottom 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.cmsmasters_sale_banner.cmsmasters_show {
	top:auto;
	bottom:100px;
	opacity:1;
	visibility:visible;
}

.cmsmasters_sale_banner .cmsmasters_button {
	color:black;
	background-color:transparent;
	border-color:black;
	font-size:11px;
	line-height:36px;
	text-transform:uppercase;
	display:inline-block;
	padding:0 30px;
	cursor:pointer;
	position:absolute;
	right:62px;
	bottom:62px;
	border-width:2px;
	border-style:solid;
}

.cmsmasters_sale_banner .cmsmasters_button:hover {
	color:#111018;
	background-color:#fff;
	border-color:#fff;
}

.cmsmasters_close {
	width:35px;
	height:35px;
	cursor:pointer;
	position:absolute;
	right:22px;
	top:17px;
	z-index:9999;
}

.cmsmasters_close:before {
	content:'';
	border-right:35px solid #16202f;
	border-bottom:35px solid transparent;
	position:absolute;
	left:0;
	top:0;
}

.cmsmasters_close_inner {
	display:block;
	width:10px;
	height:10px;
	position:absolute;
	right:5px;
	bottom:20px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}

.cmsmasters_close_inner:before, 
.cmsmasters_close_inner:after {
	content:'';
	background:#ffffff;
	display:block;
	width:1px;
	height:1px;
	margin:auto;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	-webkit-transition:background-color 0.3s ease-in-out;
	-moz-transition:background-color 0.3s ease-in-out;
	-ms-transition:background-color 0.3s ease-in-out;
	-o-transition:background-color 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

.cmsmasters_close:hover .cmsmasters_close_inner:before, 
.cmsmasters_close:hover .cmsmasters_close_inner:after {
	background:#80848c;
}

.cmsmasters_close_inner:before {
	width:100%;
}

.cmsmasters_close_inner:after {
	height:100%;
}

@media only screen and (max-width: 540px) {
	.cmsmasters_sale_banner {
		display:none;
	}
}



item-1, 
.item-2, 
.item-3 {
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 2em;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
  8.3%,25% { left: 25%; opacity: 1; }
  33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: -100%; opacity: 0; }
  41.63%, 58.29% { left: 25%; opacity: 1; }
  66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}