/*   
Theme Name: site-don
Theme URI: http://site-don.ru
Description: Веб студия Сайт-на-Дону.РФ
Author: Fred
Author URI: http://site-don.ru


font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
*/
@font-face {
    font-family: 'pf_din_text_comp_pro';
    src: url('fonts/pfdintextcomppro-light-webfont.eot');
    src: url('fonts/pfdintextcomppro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pfdintextcomppro-light-webfont.woff2') format('woff2'),
         url('fonts/pfdintextcomppro-light-webfont.woff') format('woff'),
         url('fonts/pfdintextcomppro-light-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'pf_din_text_comp_pro';
    src: url('fonts/pfdintextcomppro-regular-webfont.eot');
    src: url('fonts/pfdintextcomppro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pfdintextcomppro-regular-webfont.woff2') format('woff2'),
         url('fonts/pfdintextcomppro-regular-webfont.woff') format('woff'),
         url('fonts/pfdintextcomppro-regular-webfont.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;

}
@font-face {
    font-family: 'pf_din_text_comp_pro';
    src: url('fonts/pfdintextcomppro-thin-webfont.eot');
    src: url('fonts/pfdintextcomppro-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pfdintextcomppro-thin-webfont.woff2') format('woff2'),
         url('fonts/pfdintextcomppro-thin-webfont.woff') format('woff'),
         url('fonts/pfdintextcomppro-thin-webfont.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;

}

//@import (css) "https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,cyrillic";

//Defines
@fontBase: Arial, sans-serif;
@font: 'pf_din_text_comp_pro', Arial, sans-serif;

@ColorBg: #edf2f3;
@color: #434d56;
@colorBlue: #0071bb;
@colorYellow: #ffde00;
@colorRed: #ff2c28;
@colorLink: #0071bb;

@tablet: 1199px;
@tabletPortrait: 991px;
//@mobile: 767px;
@mobile: 1px;

//functions
.fTranslate(@x:-50%,@y:-50%){
	transform: translate(@x, @y);
	-webkit-transform: translate(@x, @y);
	-moz-transform: translate(@x, @y);
}
.fBoxShadow(@x:0,@y:0,@ss:2px,@sc: rgba(0,0,0,0.2)){
	box-shadow: @x @y @ss @sc;
	-moz-box-shadow: @x @y @ss @sc;
	-webkit-box-shadow: @x @y @ss @sc;
}
.fTransition{
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.fBorderRadius(@count:3px){
	border-radius: @count;
	-moz-border-radius: @count;
	-webkit-border-radius: @count;
}
.fAfter{
	content: "";
	display: block;
	position: absolute;
}
.fclear{ content:""; display: table; clear: both;}
.ul{
	list-style: none; margin: 0; padding: 0;
}


.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{ padding: 0 10px;}
.row{ margin-left: -10px; margin-right: -10px;}

h3, h2{ line-height: 1; margin: 20px 0; padding: 0; font-family: @font; font-weight: 500; text-transform: uppercase;
	span{ color: @colorRed;}
}
h2{ font-size: 2.4em;}
h3{ font-size: 2.8em}


/*================================================
	views
==================================================*/
body.view-fontlarge{
	font-size: 14px;
}
html,body,.container{ min-width: 970px;}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{
	float: left;
}
.col-md-1{ width: 8.33333333%;}
.col-md-2{ width: 16.66666667%;}
.col-md-3{ width: 25%;}
.col-md-4{ width: 33.33333333%;}
.col-md-5{ width: 41.66666667%;}
.col-md-6{ width: 50%;}
.col-md-7{ width: 58.33333333%;}
.col-md-8{ width: 66.66666667%;}
.col-md-9{ width: 75%;}
.col-md-10{ width: 83.33333333%;}
.col-md-11{ width: 91.66666667%;}
.col-md-12{ width: 100%;}
@media (min-width: 1200px){
	.col-lg-1{ width: 8.33333333%;}
	.col-lg-2{ width: 16.66666667%;}
	.col-lg-3{ width: 25%;}
	.col-lg-4{ width: 33.33333333%;}
	.col-lg-5{ width: 41.66666667%;}
	.col-lg-6{ width: 50%;}
	.col-lg-7{ width: 58.33333333%;}
	.col-lg-8{ width: 66.66666667%;}
	.col-lg-9{ width: 75%;}
	.col-lg-10{ width: 83.33333333%;}
	.col-lg-11{ width: 91.66666667%;}
	.col-lg-12{ width: 100%;}
}

/*================================================
	Layout
==================================================*/
#old_browser{ background: @colorYellow; font-family: @fontBase; font-size: 18px; font-weight: bold; text-align: center; padding: 10px;}
body{
	font-size: 10px;
	font-family: @font;
	color: @color;
	background: @ColorBg;
}
a{ 
	.fTransition;
	color: lighten(@colorLink,20%);
	&:hover{
		color: @colorLink;
		text-decoration: none;
	}
}
ul.list-pages{ .ul;
	li{ position: relative; padding-left: 20px;
		margin-bottom: 15px;
		a{
			display: block;
			padding: 5px;
			color: darken(@colorBlue,5%);
			.title{
				font-size: 1.3em;
				font-weight: bold;
				text-decoration: underline;
				display: block;
			}
			.description{
				color: @color;
			}
			&:hover{
				background: @ColorBg;
				.title{ text-decoration: none;}
			}
			&:before{
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -10px;
				content: "\f054";
				display: inline-block;
				font-family: FontAwesome;
				font-size: 20px;
				line-height: 1;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		}
	}
}
.panel-ui{
/*
	height: 50px; 
	line-height: 50px;
*/
	background: @colorBlue;
	padding: 5px 0;
	a.panel-ui-btn{
		display: block;
		line-height: 40px;
		padding: 0 7px;
		vertical-align: middle;
		float: right;
		margin: 0 7px;
		img{ line-height: 40px; vertical-align: middle;}
		&:hover, &.active{
			background: darken(@colorBlue,4%);
			.fBorderRadius(4px);
			.fBoxShadow(@x:0,@y:0,@ss:3px,@sc: rgba(0,0,0,0.3))
		}
	}
	ul{ .ul; text-align: right;
		#cr_version_link{
			
		}
	}
	#cr_version_link{
		display: block;
		line-height: 32px;
		font-size: 15px;
		color: #7fb8dd;
		padding: 0 7px;
		vertical-align: middle;
		float: right;
		margin: 0 7px;
		/* width: 30px; */ height: 30px;
		padding-left: 30px;
		background: url(img/icon-contrast.png) left center no-repeat;
		&:hover, &.active{
			background: url(img/icon-contrast.png) left center no-repeat darken(@colorBlue,4%);
			.fBorderRadius(4px);
			.fBoxShadow(@x:0,@y:0,@ss:3px,@sc: rgba(0,0,0,0.3))
		}
	}
}
header{ padding: 20px 0;
	.logo{
		float: left; display: block; margin-right: 20px;
		@media( max-width: @mobile){
			float: none; text-align: center;
			margin-right: 0;
			margin-bottom: 10px;
			img{ width: 60px; height: auto !important; }
		}
	}
	h1[role="complementary"]{
		font-size: 2.6em;
		font-family: @font;
		font-weight: 500;
		margin-top: 5px;
		@media (max-width: @tablet){
			font-size: 2.1em;
			margin-top: 0;
		}
		@media (max-width: @tabletPortrait){
			font-size: 2.3em;
		}
		@media( max-width: @mobile){
			font-family: @font;
			font-size: 1.8em;
			text-align: center;
		}
	}
	.federacia-btn{
/*
		display: inline-block;
		position: absolute;
		right: 15px;
		color: @color;
		font-size: 2.4em;
		font-family: @font;
		font-weight: 500;
		padding: 20px 0 20px 0;
		line-height: 1em;
		text-decoration: underline;
		&:hover{
			//background: lighten(@colorYellow,20%);
			text-decoration: none;
		}
*/

		
		position: absolute;
		right: 15px;
		display: inline-block;
		color: @color;
		font-size: 2.4em;
		font-family: @font;
		font-weight: 500;
		text-decoration: underline;
		//border-top-right-radius: 0; -moz-border-top-right-radius: 0; -webkit-border-top-right-radius: 0;
		line-height: 1.1em;
		text-align: left;
		@media (max-width: @tablet){
			font-size: 2.1em;
		}
		@media (max-width: @tabletPortrait){
			margin-top: 10px;
			font-size: 2.3em;
			position: relative;
		}
		@media( max-width: @mobile){
			padding: 10px; padding-right: 82px;
			.fBorderRadius(10px);
			//border-top-right-radius: 0; -moz-border-top-right-radius: 0; -webkit-border-top-right-radius: 0;
			min-height: 80px;
			
		}

		&:hover{
			//background: lighten(@colorYellow,20%);
			text-decoration: none;
		}
		
		&:after{
			/*.fAfter;
			width: 60px; height: 60px;
			right: 13px;
			top: 50%;
			margin-top: -30px;
			background: url(img/bg_federation_button.png) center center no-repeat;*/
		}
	}
}
section.page{
	background: #FFF;
	.fBoxShadow(@x:0,@y:0,@ss:3px,@sc: rgba(0,0,0,0.2));
	min-height: 500px;
	
	nav.main{
		background: @colorBlue;
		color: #FFF;
		height: 58px;
		padding: 0 44px;
		margin-left: -24px; margin-right: -24px;
		margin-bottom: 18px;
		position: relative;
		&:after{
			.fAfter;
			left: 24px; right: 24px;
			height: 18px;
			bottom: -18px;
			background: #104d7d;
		}
		canvas{ position: absolute; bottom: -18px;
			&#c-l{
				left: 0;
			}
			&#c-r{
				right: 0;
			}
		}
		@media( max-width: @mobile){
// 			height: auto; padding-bottom: 10px;
		}
		select.responsiveMenuSelect{
			//display: block;
// 			padding: 10px;
			font-size: 2.2em; text-transform: uppercase;
			color: @colorRed;
			font-family: inherit;
			margin: 19px 0;
			font-weight: 400;
		}
		ul.menu{ .ul; // margin-left: -8px; margin-right: -8px;
			li{ display: inline-block;
				&.current-menu-item a{
					border-bottom-color: #000;
					background: @colorRed;
				}
				a{ display: block; height: 58px; line-height: 1em;  vertical-align: middle;
					color: #FFF; position: relative; padding: 19px 8px; /* margin: 0 8px; */ padding-bottom: 15px; border-bottom:4px solid @colorBlue;  font-size: 2.2em; text-transform: uppercase;
					&:hover{
						border-bottom-color: #000;
					}
					@media (max-width: @tabletPortrait){
						font-size: 2em;	
					}
				}
			}
		}
		
		.search{ padding-top: 11px; 
			.form-control{
				font-size: 2.2em; font-weight: 400; font-family: @font;
				border: none; padding: 3px 13px; color: @colorRed;
			}
			.btn-yellow{
				background: @colorYellow;
				color: @colorRed;
				font-size: 20px;
				padding-top: 2px; padding-bottom: 2px;
			}
		}
	}
	.wrapper{
		padding: 20px;
	}
	.content-block{ padding-right: 30px;
		
		.breadcrumbs{ font-size: 1.6em;
			.current{ display: inline-block; margin-right: 5px;}
		}
		article{
			font-family: @fontBase;
			font-size: 14px;
			h3{ font-size: 2em;}
			img{ max-width: 100%; height: auto !important;}
		}
	}
	.carousel{
		.carousel-indicators{
			bottom: 0; left: 10px; margin-left: 0; width: auto;
			li{ width: 19px; height: 19px; .fBorderRadius(@count:50%); border: none; background: #FFF; margin: 0; margin-right: 7px;
				&.active{ background: @colorBlue;}
			}
		}
		.carousel-control{
			bottom: auto; top: 20px; width: 40px; height: 40px;  left: 0; right: auto; background: url(img/slider-controls.png) left top no-repeat;
			filter: none;
			&.left{
				left: 0;
			}
			&.right{ left:41px; background-position: right top;}
		}
		.carousel-caption{
			padding-bottom: 0; text-align: right; font-size: 1.8em; right: 0;
			font-family: @fontBase; bottom: 0; left: 0;
			padding: 15px 30px 15px 80px;
			background: rgba(0,0,0,0.3);
		}
	}
}

.wp-polls{
    background: #edf2f3;
    padding: 20px;
    margin-bottom: 30px;
    .pols-q{
        font-size: 1.2em;
    }
    .wp-polls-ul{
        margin: 0;
        padding: 0;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 20px;
        li{
            display: inline-block;
            margin-right: 15px;
            .checkbox{
                padding-left: 0;
            }
        }
    }
}

.ui-files{
	 background: @ColorBg; padding: 20px;
	 ul.row{ list-style: none; margin: 0; padding: 0; margin-left: -15px; margin-right: -15px;
		 li{
			 margin-bottom: 30px;
			 &.icon-pdf a{
				 background: url(img/icon-pdf.png) left center no-repeat;
			 }
			 &.icon-word a{
				 background: url(img/icon-word.png) left center no-repeat;
			 }
			 &.icon-excel a{
				 background: url(img/icon-excel.png) left center no-repeat;
			 }
			 a{
				 padding-left: 75px; height: 64px; display: table-cell; vertical-align: middle;
				 color: @colorBlue; font-size: 1.4em; font-family: @fontBase;
				 &:hover{ text-decoration: underline;}
			 }
		 }
	 }
}
.date{
		color: lighten(desaturate(@colorBlue,70%),30%);
		//color: #b1c0c9;
		font-size: 20px;
		font-weight: 400;
		line-height: 24px; vertical-align: middle;
		padding-left: 30px;
		background: url(img/icon-date.png) left center no-repeat;
		font-family: @font;
		margin-bottom: 15px;
	}
.ui-events{ margin-bottom: -20px;
	h3{ margin-bottom: 16px;}
	.item{ margin-bottom: 20px;}
	figure{
		margin: 0 -4px;
		margin-bottom: 10px;
		
		img{ max-width: 100%; height: auto !important; border: 4px solid #FFF;}
		a:hover img{ border-color: @colorRed;}
	}
	.date{ font-size: 20px; margin-bottom: 0;}
	a.title{ color: @color; font-size: 1.4em; font-weight: 400; line-height: 1.1em; display: block; margin-top: 10px; font-family: @fontBase;
		&:hover{ color: @colorRed;}
		
	}
	.border{ display: block; border: 1px solid #b1c0c9;}
}
.ui_right_block{
	h3.widgettitle{ margin-top: 0; font-size: 2.3em; margin-bottom: 10px;}
	#menu-svedeniya-ob-obrazovatelnoy-organizatsii{
		margin: 0; padding: 0; list-style: none; font-size: 2.0em; margin-right: -21px;
		li{
/*
		 padding-left: 23px;
		 background: url(img/li-dot-b.png) left center no-repeat;
		 &:nth-of-type(3n+2){
			 background: url(img/li-dot-y.png) left center no-repeat;
		 }
		  &:nth-of-type(3n+3){
			 background: url(img/li-dot.png) left center no-repeat;
		 }
*/
		} 
		a{ display: block; padding: 5px 0; padding-right: 5px; color: desaturate(lighten(@colorBlue,5%),20%); //color: @color;
			
			&:hover{
				background: #edf2f3;
				padding-left: 15px;
				color: @colorBlue;
			}
		}
		li.current-menu-item a{
			background: #edf2f3;
			padding-left: 15px;
			color: @color;
		}
	}
}
#links{
	list-style: none; margin: 0; margin-top: 20px; padding: 20px; background: @ColorBg;
	li{ margin-bottom: 14px; position: relative;
		&:after{ content: ""; display: table; clear: both;}
		figure{
			display: block; width: 84px; height: 84px; margin-right: 15px; text-align: center; vertical-align: middle; background: #FFF; line-height: 84px; vertical-align: middle; .fBorderRadius(@count:50%); overflow: hidden;
			img{ max-width: 80px; max-height: 80px; height: auto !important; width: auto !important; line-height: 84px; vertical-align: middle; }
		}
		a{ font-size: 2em; color: @color; display: block; vertical-align: middle; font-weight: 400; line-height: 1.1em;
			position: absolute; top: 50%; .fTranslate(@x:0,@y:-50%); left: 99px;
			&:hover{ text-decoration: underline;}
		}
	}
}
.albums{
	.title{
		&:after{ .fclear;}
		h3{ float: left;}
		.readmore{ float: right; display: block; font-size: 2.4em; line-height: 1; color: @color; font-weight: 300; margin: 20px 0; text-transform: uppercase; padding-right: 28px; background: url(img/icon-link.png) right center no-repeat;
			span{ color: @colorRed;}
		}
	}
	.item{
		img{ max-width: 100%; height: auto !important;}
	}
}
.ui-view-a{
	display: block;
/*
	width: 270px;
	height: 186px;
*/
	position: relative;
	overflow: hidden;
	text-align: center;
	.mask{
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		overflow: hidden;
		width: 100%;
		
		opacity: 0;
		background-color: rgba(0,0,0,0.4);
		transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;
		.title{
			position: relative;
			font-size: 18px;
			padding: 10px;
			color: #FFF;
			margin-top: 120px;
			
			transform: translateY(-100px); -moz-transform: translateY(-100px); -webkit-transform: translateY(-100px);
			opacity: 0;
			transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
		}
	}
	&:hover{
		.mask{ opacity: 1;}
		.title{
			opacity: 1;
			transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px);
		}
	}
}
.gallery{
	&:after, &:before{
		.fclear;
	}
	
	&.gallery-columns-3{
		margin-left: -10px; margin-right: -10px;
		.gallery-item{
			width: 33.333%;
			float: left;
			box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
			padding: 10px;
			a{ display: block; position: relative;
				&:hover::after{
					.fAfter;
					left: 0; right: 0;
					top: 0; bottom: 0;
					background: rgba(0,0,0,0.3);
				}
			}
			
		}
	}
}
.wp-pagenavi{
	font-size: 15px !important;
	padding-left: 0 !important;
}
.wp-pagenavi a, .wp-pagenavi span.pages, .wp-pagenavi span.extend{
	font-size: 15px !important;
}
footer{
	margin-top: 20px;
	.row > div{ padding: 0 20px !important;}
	padding: 27px 0;
	background: @colorBlue; color: #FFF;
	.name{ font-size: 2.3em; line-height: 1.2em; text-transform: uppercase; font-weight: 400;}
	.fedName{ .name; 
		a{ color: #ffed7f;}
	}
	.adress{ font-size: 2.3em; font-weight: 300; margin-top: -10px;}
	#devlink{ display: block; font-size: 14px; color: #FFF; text-decoration: none; margin-top: 10px;
		img{ max-width: 20px; height: auto !important;}
	}
}