/*
Theme Name: sr
Author: Vlad
*/


body

{
	margin: 0 auto;
	padding: 0;
    background-color: #f1f1f1;
}
iframe {

  width: 100%;
}
audio {max-width: 100%; }
figure { max-width: 100%;} 

.thecategory {
color:#E74949;
font-size: 95%;
font-weight:bold;
}

.thecategory a,.thecategory a:link,.thecategory a:visited,.thecategory a:active
{
color:#E74949;
}
.row1 {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;  
-webkit-column-count: 2; 
    -moz-column-count: 2;
}
.blog-block {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}
a.logoname:link,
a.logoname:visited,
a.logoname:active {font-size: 40px;
  color: #005695;
  margin: 13px 13px 0;
}
a.logoname:hover {font-size: 40px;
  color: #000;
text-decoration:none;
  margin: 13px 13px 0;
}
.blog-post-title
{font-size: 110%;
font-weight:bold;
display: block;
}


.cleared
{
	clear: both;
	margin: 0;
	padding: 0;
	border: none;
	font-size:1px;
}


form
{
	padding:0 !important;
	margin:0 !important;
}
table,td,th,tbody,tr {border:none !important;}
table.position
{
	position: relative;
	table-layout: fixed;
}

.headright
{
	float: right;
}



img {
  height: auto; 
  max-width: 100%;
}

div.Header
{
	min-height: 100px;
	position: relative;
	z-index: 0;
	background-color: #FFF;
	overflow: hidden;
}
.blue {background-color:#7EB1E1}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus
{
	color: #005695;
	background-color: #fff;
	font-weight: bold;
}
.navbar {
	min-height:40px;
	border:none;
	border-radius:0px;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16),0px 2px 10px 0px rgba(0,0,0,0.12) !important;
}
.navbar-inverse .navbar-nav > li > a
{
	color: #f1f1f1;
}

.navbar-inverse .navbar-nav > li > a:hover{
	
	background-color: #fff;
	color: #005695;
	
}
.navbar-inverse .navbar-nav > li > li
{
	display: block;
}


.nav>li>a {
  text-transform: uppercase;
}
.navbar.navbar-default {
  background-color: #363636;
  font-family: 'Open Sans', serif;
  margin-bottom: 0;
  font-weight: 500;
}
.navbar-default .navbar-nav > li > a {
  color: #F5F7FA;
  line-height: 40px;
  text-transform: uppercase;
  font-size: 12px;
}
.navbar > .container .navbar-brand {
  color: #DADADA;
  font-size: 20px;
  margin: 13px 0;
  font-family: 'Roboto Slab', serif;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  border-right: none;
  border-left: none;
}
.navbar {
  border-radius: 0;
}
.navbar-default {
  border: none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #222;
  background-color: transparent;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #fff;
  background-color: #222;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover {
    color: #fff;
    background-color: #222;
  }
}

.navbar-default .navbar-nav .current-menu-ancestor a.dropdown-toggle {
  color: #222;
  background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu > li.active > a {
  color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #DADADA;
}
@media (min-width: 768px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.navbar-nav > li > .dropdown-menu {
  padding: 0;
}
.navbar-nav > li > a {
  padding-top: 18px;
  padding-bottom: 18px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}

@media (max-width: 767px) {
  .nav.navbar-nav {
    float: none;
  }
  .navbar > .container .navbar-brand {
    margin: 0;
  }
  .navbar-default .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.logo
{
	display : block;
padding-top: 10px;
}
img .logo 
{
	margin-bottom: 20px;
}


.navbar {
	min-height:40px;
	border:none;
	border-radius:0px;
}
select
{
  width: 80%;
}
.Block  
{
	

}

.Block  a
{
	color: #222;

}

.Block  a:hover
{
	color: #222;
	text-decoration: none;
	
}

.Block li
{

list-style-type: none;
border-bottom: 1px solid #ddd;

}
.Block ul
{
	padding: 0;
	line-height: 18px;
}
.Block ul li {
    list-style: none;
padding-left: 1px;
padding-top: 10px;
padding-bottom: 10px;
margin-top:5px;
}

.blog-post
{
	background-color: #fff;

font-size: 120%;
padding:20px;
margin-bottom:20px;

	border-bottom: 0px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
overflow: hidden;
}
.half
{
	background-color: #fff;
	float: left;
height:550px;
overflow: hidden; 
font-size: 120%;
padding:20px;
margin-bottom:20px;
	width: 100%;
	border-bottom: 0px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
}

.metadata 
{
clear:both;
font-size: 80%;
color: #616161;
font-weight:bold;
}
.metadata a,.metadata a:visited,.metadata a:link
{

font-size: 90%;
color: #616161;
}

.metadata span
{
	margin-right: 7px;
}
.current-menu-item {
	background: #005695;
}

.current-menu-item a {
	color: #fff !important;
}
.item#nav_menu-4 {
font-weight:bold;
}
.item {
    
    padding: 20px;
    border: 1px solid #E6E4E6;
    background-color: #fff;
    font-size: 14px;
    margin-bottom: 20px;

}
.item h3 
{
	background-color: #005695;
	color: #fff;
padding-left: 1px;
padding-top: 10px;
padding-bottom: 10px;

}
.item .category-count
{
	 float: right; 
   color: #222;
    font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    padding: 0 10px;
    margin-right: 7px;
}

.widget-title
{font-size: 13px;}



 


.sticky {
}
.hentry {
  margin: 0;
}

.blog-post a,.half a
{
	color: #005695;

	text-decoration: underline;
}
.blog-post a:hover,.half a:hover
{
	color: #005695;

	text-decoration: none;
}
.meta-tag
{
	margin-bottom: 10px;
}
.post-tag a {
    color: #fff;
    background-color: #aaa;
    border-radius: 0 2px 2px 0;
    display: inline-block;
    font-size: 11px;
    line-height: 13px;
    margin: 0 0 2px 10px;
    padding: 4px 7px 3px;
    position: relative;
    text-transform: uppercase;
}
.post-tag a::before {
    border-top: 10px solid transparent;
    border-right: 8px solid #aaa;
    border-bottom: 10px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}
.post-tag a::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 4px;
    position: absolute;
    top: 8px;
    left: -2px;
    width: 4px;
}

.Block ul {
	display: inline-block;
}
.social-icons {
	display: block;
clear:both;

}
.social-icons ul {
	display: inline-block;
}
.social-icons ul li {
	background: none;
	border: none;
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 4px;
}
.social-icons ul li a {
	width: 30px;
	height: 30px;
	display: block;
	float: left;
background: #7EB1E1;
	text-align: center;
	color: #FFF;
}
.social-icons ul li a:hover { opacity: 0.8 }
.social-icons ul li i {
	font-size: 18px;
	line-height: 30px;
	color: #FFF;

}


.share i {
line-height: 30px;
height: 30px;   
width: 30px;
font-size:14px;
text-align: center;
display: inline-block;
color: #fff;
border-radius: 50%;
}

.share .social-facebook i { background: #5d82d1 }
.share .social-twitter i { background: #40bff5 }
.share .social-gplus i { background: #eb5e4c }
.share .social-vk i { background: #5d7294 }
.share .social-ok i { background: #ed7c20 }
.share .social-lj i { background: #004359 }
.share .social-mailru i { background: #134785 }
.share .social-youtube i { background: #E62117 }

.share {
display: block;
clear:both;
}
.share a:hover { opacity: 0.8 }



.Footer  {
    padding-top: 5px;
    position: relative;
    margin: auto;
}
.Footer .social-icons .social-facebook a {
    background-color: #444;
    color: #fff;

}

.Footer .social-icons .social-twitter a{
    background-color: #444;
    color: #fff;
}

.Footer .social-icons .social-gplus a {
    background-color: #444;
    color: #fff;
}

.Footer .social-icons .social-linkedin a {
    background-color: #444;
    color: #fff;
}


.popular-post {
    margin-bottom: 30px;
}
.popular-post .wp-post-image{
    margin-bottom: 30px;
}

.wp-post-image, footer .wp-post-image {
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 0;
	float: left;
}

.title {
    font-weight: bold;
    text-transform: uppercase;
    color: #545E68;
    font-size: 12px;
}


.post h2
{
	color: #222;
}
.post-body
{
	position: relative;
	padding: 15px;
}


.post
{
	background-color: #fff;
	float: left;
	margin-top: 20px;
	padding: 20px;
	width: 100%;
	border-bottom: 0px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
	margin-bottom: 20px;
}

.article img, img.article
{
	border: solid 1px #ADB8B2;
	margin: 1em;
}

.metadata-icons img
{
	border: none;
	vertical-align: middle;
	margin:2px;
}
.metadata
{
	margin-right: 7px;
font-size:90%;
}

.article table, table.article
{
	border-collapse: collapse;
	margin: 1px;
	width:auto;
}

.article table, table.article .article tr, .article th, .article td
{
	background-color:Transparent;
}

.article th, .article td
{
	padding: 2px;
	border: solid 1px #8C9B94;
	vertical-align: top;
	text-align:left;
}

.article th
{
	text-align:center;
	vertical-align:middle;
	padding: 7px;
}




h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}


h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
  font-size: 120%;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #222;
  text-decoration: none;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
  font-size: 120%;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #222;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
  
  font-size: 18px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #222;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
  
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #222;
}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
  
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #222;
}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
  
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #222;
}



.wp-post-image
{
	max-width: 100%;
	display: block;
	margin: auto;
	float: none;
}
.postthumbnail
{
	display: block;
	margin: auto;
float:left;
margin: 15px 15px 15px 0;
}
.blog-post {
	margin-bottom: 20px;
}




.blockquote p
{
	color:#111609;
	
	font-style: italic;
	font-weight: normal;
	text-align: left;
}

.blockquote
{
	border:solid 1px #BFD397; 
	margin:10px 10px 10px 50px;
	padding:5px 5px 5px 38px;
	background-color:#DEE8C9;
	background-position:left top;
	background-repeat:no-repeat;
}


input[type="reset"], input[type="button"], input[type="submit"] {
    margin-bottom: 30px;
    padding: 10px 20px;
    background-color: #005695;
    border: 0px;
    transition: background-color 0.3s linear 0s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 18px;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    display: inline-block;
    color: #FFFFFF;
}
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover
 {
	background-color: #33363B;
}
.search-form {
	display: block;
	position: relative;
	width: 250px;
	margin: 0;
	padding: 0;
	overflow:hidden;
}
.search-form .screen-reader-text {
	display: none;
}
.search-form .search-field {
	display: inline-block;
	margin: 0;
	width: 100%;
	padding: 0.7em 45px 0.7em 0.7em;
	background: #fff;
	border: 1px solid #7EB1E1;
	font-size: 1.0em;
	color: #333;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
}
.search-form .search-submit {
	position: absolute;
	top: 0;
	bottom: 0;
	color: #fff;
	right: 0;
	border: none;
	background: transparent;
	padding: 10px;
	cursor: pointer;
	background-color: #005695;
	
}
.search-form .search-submit:hover
{
	background-color: #222;
	color: #fff;
	text-decoration: none !important;
}
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
}

#wp-calendar 
{
	empty-cells: show;
	width: 100%;
}
#wp-calendar th {
background: rgba(0, 0, 0, 0.03);
line-height: 20px;
}

#wp-calendar #next a 
{
	padding-right: 10px;
	text-align: right;
}

#wp-calendar #prev a 
{
	padding-left: 10px;
	text-align: left;
}

#wp-calendar a 
{
	display: block;
}


#wp-calendar td 
{
	padding: 3px 0;
	text-align: center;
	text-align: center;
}
td, th
{
	border: 1px solid #EAEAEA;
	padding: 6px 10px;
}

.bypostauthor {
}

.commentbtn
{
	cursor:pointer;
	background-color: #005695;
	color: #fff;
	padding:10px; 
	border: none;
	transition: .1s background-color;


}
.commentbtn .hover, .commentbtn:hover
{
	background-color: #222;
	color: #fff;
	text-decoration: none !important;
}


.Footer
{
	color: #ACACAC;
	background-color: #222;

}


.Footer .Footer-widget
{
		overflow: hidden;
}

 .Footer a
{
	color: #ACACAC;
	text-decoration: none;

}
.Footer li
{
margin-bottom: 15px;
list-style-type: none;

}
.Footer ul
{
	padding: 0;
	line-height: 18px;
}
.Footer ul li {
    list-style: none;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.Footer ul ul {
    padding: 10px;
}
 
.Footer h2
{
	color: #f1f1f1;
}
.Footer .category-count {
    float: right;
    color: #ACACAC;
    font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    padding: 0 10px;
    margin-right: 7px;
}

.page-footer, .page-footer a, .page-footer a:link, .page-footer a:visited, .page-footer a:hover
{

	color:#ACACAC;
	text-decoration:none;

	}

.page-footer
{
	clear: both;
	text-decoration:none;
	text-align: center;
	color:#ACACAC;
	background-color: #000;
	padding: 15px 0px 5px 0px;
}


.contentLayout .content
{
	position: relative;
	margin-left: 50px;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 780px;
}
.contentLayout .content-wide
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 897px;
}

.contentLayout .sidebar1
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 360px;
}



.commentlist, .commentlist li
{
	margin-top: 20px;
	list-style-type: none;
	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.1);
	background-color: #fff;
	padding: 20px;

}

.commentlist li li
{
	margin-left:30px;
}

.commentlist li .avatar
{
	float: right;
	border: 1px solid #eee;
	padding: 2px;
	margin:1px;
	background: #fff;
}

.commentlist li cite
{
	font-size:1.2em;
}

#commentform textarea
{
	width: 100%;
}

img.wp-smiley
{
	border:none;
	margin:0;
	padding:0;
}


.singleleft

{
	float: left;
	line-height: 24px;
	width: 50%;
	padding-right: 24px;
	padding-left: 24px;
	font-size: 18px;
	text-align: left;
	

}
.singleright
{
	float: right;
	line-height: 24px;
	width: 50%;
	font-size: 18px;
	text-align: right;

}



.navigation
{
	border-top: 1px solid rgba(0,0,0,0.05);
	padding: 20px;
	background-color: #f9f9f9;
	float: left;
	width: 100%;
}


.navigation > ul > li > a:active,
.navigation > ul > li > a:link
{line-height:1.2em;text-decoration:underline !important}


.page-numbers {
	display: inline-block;
	padding: 5px 10px;
	margin: 0 2px 0 0;
	border: 1px solid #eee;
	line-height: 1;
	text-decoration: none;
	border-radius: 2px;
	font-weight: 600;
!important
}
.page-numbers.current,
a.page-numbers:hover {
	background: #f9f9f9;
!important
}




.alignright
{
	display: inline;
    	float: right;
	margin: 1em;
	margin-right: 0;
}

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}


.aligncenter {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 10px !important;

}


.alignright img, img.alignright
{
	display: inline;
    	float: right;
	margin: 1em;
	margin-right: 0;
}

.alignleft img, img.alignleft
{
	margin: 1em;
	margin-left: 0;
	margin-top: 0;
}

.wp-caption
{
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
}

.wp-caption img
{
	margin: 0;
	padding: 0;
	border: 0 none;
max-width: 100%;
}



.wp-caption-text
{
	font-size: 10pt;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
color: #008080;
font-weight:bold;
}


.hidden
{
	display: none;
}



#wp-calendar #next a 
{
	padding-right: 10px;
	text-align: right;
}

#wp-calendar #prev a 
{
	padding-left: 10px;
	text-align: left;
}

#wp-calendar a 
{
	display: block;
}

#wp-calendar caption 
{
	text-align: center;
	width: 100%;
}

#wp-calendar td 
{
	padding: 3px 0;
	text-align: center;
}



.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; 
}



.gallery {
	margin-bottom: 30px;
}
.gallery-item {
	float: left;
	margin: 0 4px 4px 0;
	overflow: hidden;
	position: relative;
}
.gallery-columns-1 .gallery-item {
	max-width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
}
.gallery-columns-3 .gallery-item {
	max-width: 30%;
}
.gallery-columns-4 .gallery-item {
	max-width: 20%;
}
.gallery-columns-5 .gallery-item {
	max-width: 18%;
}
.gallery-columns-6 .gallery-item {
	max-width: 15%;
}
.gallery-columns-7 .gallery-item {
	max-width: 12%;
}
.gallery-columns-8 .gallery-item {
	max-width: 10%;
}
.gallery-columns-9 .gallery-item {
	max-width: 8%;
}
.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) {
	margin-right: 0;
}
.gallery-columns-1.gallery-size-medium figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-1.gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-2.gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1),
.gallery-columns-3.gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) {
	clear: left;
}
.gallery-caption {

	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	max-height: 50%;
	opacity: 0;
	padding: 6px 8px;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
	width: 100%;
}
.gallery-caption:before {
	content: "";
	height: 100%;
	min-height: 49px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}



/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%;
  }
  .row-offcanvas-left.active {
    left: 50%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;
    margin-left: 12px;
  }
}