/*
================================================================
================================================================
================================================================ HEADER
================================================================
================================================================ 
*/
/* different techniques for iPad screening 
@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 ( max-width: 992px ) {
	
	#page-top-module {
		padding:15px 0
	}	
	

}

@media ( max-width: 1101px ) {
	
	#mainmenu{
		display: none;
		z-index:9997; 
	}
	
	#mainmenu{
 		background:#fff url('../img/layout/wbck.png') no-repeat 50% top; 
		
		position:fixed;
		top: 0;
		right:0;
		bottom:0;
		left:0; 
		
		width:100%;
		height:100hv;
		/*min-height:750px;*/
		overflow:auto;
		
		padding:80px 0 60px 0
	}
	
	body.m-open #mainmenu{
		display: block 
	}
	
	#topmenu div.m-left button.menu-toggle{
		z-index:9998
	}
	
	
	#mainmenu ul{
		height:inherit
	}
	
	#mainmenu ul,
	#mainmenu ul li,
	#mainmenu .inr_brdwfb {
		display: block;
		width:100%;
		max-width:100% !important;
		clear:both;
		overflow:hidden;
		padding:0;
		margin:0;
		position:static;
		background:none
	} 
	
	#mainmenu li > a {
		justify-content: start;  
	}
	 
	#mainmenu .inr_brdwfb{
		transform:none;
		max-width:100%;
		padding:20px 
	}
	
	/* ====================== HEADER ==================== */
	
	.container.topw{
		position:relative
	}
	
	.container.topw:before,
	#mainmenu:before{
		content:""; 		
		background: linear-gradient(to right,  #d7d7d7 0%,#ebebeb 15%,#ebebeb 85%,#d7d7d7 100%);
		
		width:100%;
		height:50px;
		 
		position:absolute;
		left:0;
		top:0;
		right:0;
		 
		border:none;
		border-bottom: solid 1px #bababa;
		
		-webkit-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
		box-shadow:0 0 6px rgba(0,0,0,.35);
	}
	
	
	#mainmenu .container.ex .inr_brdwfb a {
		width:  35px;
		height: 35px;
	}
	
	/* ====================== HEADER ==================== */
	
	#topmenu{
		height:50px;
		
		display: flex; 
		align-items: center 
	}
  	
	.menu-toggle{
		display:block
	}
	/*
	#topmenu #mnu_lng {
		margin-right:20px 
	}
	*/
	#mainmenu ul a:hover, 
	#mainmenu ul li.active a{ 
		color: var( --red-color )
	}
	
	#lang-menu-cnt{
		margin-right:20px
	}
	  
	
}
@media ( min-width: 1101px ) {
 	/*
	.container.ex{
		margin:0;
		padding:0;
		width:100% 
	}*/
	
	/* ====================== HEADER ==================== */
	
	#topmenu { 
		border:solid 1px #bababa;
		border-top:0;
		-webkit-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
		box-shadow:0 0 6px rgba(0,0,0,.35);
		padding:0 15px
	}
	
	#topmenu:after{
		content:'';
		display:block;
		/*height:calc( 100% - 4px );
		width:calc( 100% - 8px );*/
		width:100%;
		height:100%;
		position:absolute;
		left:50%;
		top:0;
		transform:translateX(-50%);
		background: linear-gradient(to right,  #d7d7d7 0%,#ebebeb 15%,#ebebeb 85%,#d7d7d7 100%);
		
		z-index:-1
	}
	
	/* ====================== HEADER ==================== */
	
	#mainmenu{
		position: sticky;
		position: -webkit-sticky;
		top: 0; /* required */
		z-index:8900
	}
	
	#mainmenu .container.ex .ex-cnt{
		padding:0;
		display:flex;
		align-items: center;
		position: relative; 
		background: linear-gradient(to bottom,  #ffffff 0%,#e1e1e1 100%); 
		border:solid 1px #c0c0c0;
		border-top-color: #ca464c;
		border-radius:3px;
		box-shadow:0 -1px 8px rgba(0,0,0,.2), 0 3px 6px rgba(0,0,0,.2)
	}
	
	.ex-cnt{
		
	}
	
	#mainmenu .container.ex .inr_brdwfb{
		float:right;
		margin-left:auto;
		margin-right:0;
		padding-right:5px
	}
	
	#mainmenu ul a:hover, 
	#mainmenu ul li.active a{
		background: linear-gradient(to bottom,  #b91f27 0%,#3c3c3c 100%);
		color: white
	}
	
	
}

/*
================================================================
================================================================
================================================================ HOME
================================================================
================================================================ 
*/

@media ( min-width: 992px ) {
	
	#indexslide .container .row.home-row{
		display: flex !important;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.home-row .boxdown{
		border-right:dashed 1px var( --top-module-bkg-color ) 
	}
	
	#main_wide .boxdown:last-child {
		border:none
	}
	 
}

/*
================================================================
================================================================
================================================================ PAGE
================================================================
================================================================ 
*/

@media (min-width: 715px) and (max-width: 992px){
	
  	#page-top-module .ex{ 
		width:33.333%;
		float:left 
	}
	
	#page-top-module .ex.seccboxl{
		width:100%
	}
	
}

@media ( max-width: 715px ) {
	
	#page-top-module {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		margin:auto
	}
 	
	#page-top-module .seccbox:after{
		display:none
	}
}

@media ( max-width: 768px ) {
	
	#topmenu #mnu_lng{
		top:100%;
		right:0;
		left:auto;
		transform: translate( 0, 10px );
		padding:0;
		float:left;
		width:100%;
		max-width:100%;
		box-shadow:0 6px 12px 6px rgba(0,0,0,.35)
	}
	
	#topmenu #mnu_lng li{
		display:block;
		margin:0
	}
	
	#topmenu #mnu_lng li,
	#topmenu #mnu_lng li a {
		font-size:1rem;
		 
	}
	
}

@media ( min-width: 768px ) {
 	
	.cnt_w{
		padding-left:15px;
		padding-right:15px 
	}
}

@media ( min-width: 992px ) {
	
	#page-top-module{
		background:none;
		display: flex; 
		justify-content: space-between;
		margin:0 ;
		position:relative 
	}
	
	#page-top-module .container{ 
		background: var( --top-module-bkg );
		display: flex;  
		align-items: center;
		height: var( --page-top-module-992-height );
		/*flex: 0 0 var( --container-width );*/
	}
	
	#page-top-module::before,
	#page-top-module::after {
		content: " ";
		display:block; 
		height:var( --page-top-module-992-height ); 
		flex: 1;
		background: var( --top-module-bkg-color )
	}
		
	/* ================================= inside ============================ */
	#page-top-module .ex{ 
		width:  25%;
		float: left 
	}
 
	
}
/*
@media screen and (min-width:1200px) {
	#page-top-module .container{ 
		background: linear-gradient(to right,  rgba(0,0,0,.7) 2%,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,rgba(0,0,0,.7) 98%);
	}
}*/