@charset "utf-8";


/*--------------------------------------------------------------------
* 
* Project:      xcort24 - z page
* Version:      0.0.7
* Last change:  08.09.2017
*
--------------------------------------------------------------------*/

*{margin:0;padding:0}
html,body{height:100%;min-width:320px;font-size:100%;font-family:sans-serif}

	@media only screen and (min-width:768px)
	{
		.z_cont__but{opacity:0;-webkit-transition:opacity .3s .7s ease;-moz-transition:opacity .3s .7s ease;-o-transition:opacity .3s .7s ease;transition:opacity .3s .7s ease}
		.is-active .z_cont__but{opacity:1}
		.z_bgn{background:url(../i/zzn.png) 25% 63% no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;
		-webkit-transition:filter .7s .3s ease;
		-moz-transition:filter .7s .3s ease;-o-transition:filter .7s .3s ease;transition:filter .7s .3s ease}
		.z_bg__in{opacity:0;background:url(../i/zzn.png) 0 0 no-repeat;-webkit-transition:opacity .3s ease;-moz-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.is-active .z_bg{-webkit-filter:blur(0);filter:blur(0)}
		.is-active .z_bg__in{opacity:1}
		
		@keyframes shimmer {
  0% {
    background-position: 30% 50%;
    filter: brightness(100%);
  }
  50% {
    background-position: 75% 37%;
    filter: brightness(180%);
  }
  100% {
    background-position: 30% 50%;
    filter: brightness(100%);
  }
}

.z_but {
  animation: shimmer 3s infinite;
   animation-duration: 3s;
}

		
		.z_but{position:relative;width:376px;height:328px;overflow:hidden;background:url(../i/butn.png) no-repeat;-webkit-background-size:100% auto;-moz-background-size:100% auto;background-size:100% auto;text-indent:-9999px}
		.z_but:hover:before{opacity:1}.z_cont{z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}
		.z_cont__but{position:absolute;bottom:7.3em;left:55em;right:0;margin:auto}
		.z_bgn{z-index:1;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}
		.z_bg__inn{
			position:absolute;
			top:0;
			left:0;
			width:2560px;
			height:2356px;
}
		
	}
@media only screen and (max-width: 768px) {
	
			@keyframes shimmer {
  0% {

    filter: brightness(110%);
  }
  50% {

    filter: brightness(180%);
  }
  100% {
    
    filter: brightness(110%);
  }
}

.z_but {
  animation: shimmer 2s infinite;
}
	
  .z_cont__but {
    position: absolute;
    bottom: -41px;
    right: -67px;
    transform: translateX(-50%);
    opacity: 1; /* По умолчанию показываем на мобильных устройствах */
    transition: opacity 0.3s 0.7s ease;
  }

  .is-active .z_cont__but {
    opacity: 1;
  }

  .z_bgn {
    background: url(../i/zznm.png) center center no-repeat;
    background-size: cover;
    transition: filter 0.7s 0.3s ease;
  }

  .z_bg__in {
    opacity: 0;
    background: url(../i/zznm.png) center center no-repeat;
    transition: opacity 0.3s ease;
  }

  .is-active .z_bg__in {
    opacity: 1;
  }

.z_but{
	position:absolute;
	width:30%;height:30%;overflow:hidden;
	background:url(../i/butn.png) no-repeat;
	-webkit-background-size:100% auto;-moz-background-size:100% auto;background-size:100% auto;text-indent:-9999px;
	}

  .z_but:hover:before {
    opacity: 1;
  }

  .z_cont {
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }

  .z_bgn {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }

		.z_bg__inn{
			position:absolute;
			top:0;
			left:0;
			width:640px;
			height:1136px;
}
		@media only screen and (min-width:768px) and (orientation:portrait){
			.z_cont__but{top:86%}
		}
		.ie8 .z_bg{display:none}
		.ie8 .z_cont{background:url(../i/zzn.png) 3% 63% no-repeat}
		.ie8 .z_but{position:absolute;top:50%;left:0;right:0;width:100px;height:auto;margin:auto;padding:20px;border:4px solid #ffd93d;color:#fff;background:#190305;text-align:center;text-indent:0;text-decoration:none;text-transform:uppercase}
		.ie8 .z_but:hover{background:#650303}.ie8 .z_but:before{display:none}
		a:active, /* активная/посещенная ссылка */
		a:hover,  /* при наведении */
		a {
			text-decoration: none;
			border:none;
			background:none;
			-webkit-tap-highlight-color: transparent;
		}