@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin-ext');
:root{
	--main-color: #000;
	--sub-color: #ff7800;
	--main-bg: #000;
	--main-bg-color: #fff;
	--sub-bg: #ff7800;
	--sub-bg-color: #fff;
}

html{
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, a, img, strong, ol, ul, li, form, label, button,
article, aside, details, figcaption, figure, 
footer, header, menu, nav, section{
	padding: 0;
	margin: 0;
	border: 0;
	-webkit-font-smoothing: antialiased;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, menu, nav, section{
	display: block;
}
html{
	font-size: 100%;
	font-size: 16px;
}
body{
	margin: 0;
	text-align: center;
	background: #e2e2e2;
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	color: var(--main-color);
}
p{
	margin-bottom: 30px;
}
ul{
	margin: 0 10px 15px 15px;
	padding: 0 5px;
	list-style-type: circle;
}
li{
	margin: 4px 0 2px 10px;
}
ol{
	margin: 0 10px 15px 15px;
	padding: 0 5px;
	list-style-type: decimal;
}
hr{
	margin: 0 0 15px;
	border: none;
	border-bottom: solid 1px #333;
	height: 1px;
	visibility: visible;
	clear: both;
}
.clear{
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 100%;
	height: 0;
	font-size: 0;
}
a{
	transition: all 0.5s ease;
	color: var(--sub-color);
	text-decoration: underline;
	outline: none;
}
a:hover{
	color: color: var(--main-color);
}

h1, h2, h3, h4, h5{
	margin: 0 0 45px;
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	font-size: 36px;
	color: var(--main-color);
}

h1.title, h2.title{
	position: relative;
	margin: 0 0 50px;
	font-weight: 300;
	font-size: 36px;
	color: var(--main-color);
	text-align: center;
	text-transform: uppercase;
}
h1.title a, h2.title a{
	color: color: var(--main-color);
	text-decoration: none;
}
h1.title a:hover, h2.title a:hover{
	color: var(--sub-color);
}
h2.title span{
	display: block;
	margin: 10px auto 0;
	width: 100%;
	max-width: 600px;
	font-size: 16px;
	color: #777;
	text-transform: none;
}
h3{
	margin: 0 0 30px;
	font-size: 26px;
}
h4{
	margin: 0 0 30px;
	font-size: 22px;
}
h5{
	margin: 0 0 30px;
	font-size: 18px;
}

/*******************
    INPUT ERRORS       
*******************/
.success, .error, .notice{
	display: block;
	margin: 0 0 20px;
	padding: 15px;
	background: #fafafa;
	border-left: solid 3px #fff;
	font-size: 18px;
	clear: both;
	text-align: left;
}
.success{
	border-color: #1abc9c;
	color: #16a085;
}
.error{
	border-color: #e74c3c;
	color: #c0392b;
}
.notice{
	border-color: #95a5a6;
	color: #7f8c8d;
}

/**/
.xajax-error{
	padding: 5px 0 0;
	color: #c0392b;
}
.xajax-error+p input[type="text"],
.xajax-error+p input[type="password"],
.xajax-error+p input[type="tel"],
.xajax-error+p textarea,
.xajax-error+p select,
.xajax-error+p input[type="email"]{
	border-color: #95a5a6;
	color: #c0392b;
}

/*******************
     WINDOW       
*******************/
.window-layer{
	position: absolute;
	left: 0; top: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 8888888;
	width: 100%;
	height: 100%;
}
.window{
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	max-width: 600px;
	background: #fff;
	border-radius: 3px;
	text-align: left;
	-webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.2);
}
.window .window-close{
	position: absolute;
	top: 17px; right: 15px;
	font-weight: normal;
	font-size: 22px;
	line-height: 0;
	color: #bcc2d6;
	cursor: pointer;
}
.window .window-close:hover{
	color: #2c3454;
}
.window .window-head{
	padding: 15px;
	margin-bottom: 15px;
	border-bottom: solid 1px #eee;
	font-size: 20px;
	font-weight: bold;
	color: #53505f;
	cursor: move;
}
.window .window-content{
	padding: 15px;
	font-weight: normal;
}
.window .button-row{
	display: block;
	padding: 15px 0 0;
	border-top: solid 1px #e9ecef;
	text-align: center;
}
.window input.text, .window textarea.text{
	width: 100%;
}

/**/
.btnRow{
	text-align: center;
}
.button, .button2, .button3, a.buttonOk, a.buttonErr, a.buttonNotice{
	display: inline-block;
	padding: 10px 15px;
	background: var(--sub-bg);
	border-radius: 0;
	font-weight: bold;
	font-size: 15px;
	color: var(--sub-bg-color);
	text-decoration: none;
	text-transform: uppercase;
}
.button:hover, .button2:hover, .button3:hover, a.buttonOk:hover, a.buttonErr:hover, a.buttonNotice:hover{
	color: var(--sub-bg-color);
	opacity: 0.9;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}

/******************
***  SITE  ***
****************/
#site{
	margin: 0 auto;
	padding: 60px 0 0;
	width: 100%;
	max-width: 1920px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
	background: #fff;
}
#site .layout{
	position: relative;
	z-index: 1;
	padding: 0 20px;
	width: 100%;
	text-align: center;
	overflow: hidden;
}
#site .layout.drk{
	background: #fafafa;
}
#site .layout .wrp{
	margin: 0 auto;
	padding: 50px 0;
	width: 100%;
	max-width: 1200px;
}
#site #leftSide{
	float: left;
	width: calc(100% - 330px);
	text-align: left;
}
#site #rightSide{
	float: right;
	width: 300px;
	text-align: left;
}


/******************
***  HEADER  ***
****************/
#header{
	transition: 0.5s ease-in-out;
	position: fixed;
	left: 0; top: 0;
	z-index: 100;
	padding: 0 20px;
	width: 100%;
	height: 60px;
	background: var(--main-bg);
}
#header.fixed{
	box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2);
}
#header .wrp{
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 1200px;
	text-align: left;
}
/**/
#logo{
	float: left;
	margin: 0;
	padding: 0;
	font-size: 15px;
}
#logo a{
	display: inline-block;
	padding: 17px 20px 0;
	height: 60px;
	background: var(--sub-bg);
	text-decoration: none;
	text-transform: uppercase;
	color: var(--sub-bg-color);
}
#logo a:hover{
	opacity: 0.8;
}
#logo img{
	width: 150px;
}


/* main */
#menu{
	float: right;
}
#menu ul.main{
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu ul.main > li{
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
}
#menu ul.main > li a{
	transition: 0.5s ease-in-out;
	display: inline-block;
	padding: 18px 10px 0;
	height: 60px;
	font-size: 14px;
	font-weight: bold;
	color: var(--main-bg-color);
	text-decoration: none;
	text-transform: uppercase;
}
#menu ul.main > li:hover > a,
#menu ul.main > li a:hover{
	background: var(--sub-bg);
	color: var(--sub-bg-color);
	opacity: 1;
}
#menu ul.main > li a.active{
	font-weight: bold;
}
/* sub */
#menu ul.sub,
#menu ul.sub2{
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	background: #eee;
}
#menu ul.sub{
	left: 0; top: 100%;
	width: 200px;
    z-index: 100;
}
#menu ul.sub2{
	left: 100%; top: 0;
	width: 200px;
}
#menu ul.main li:hover ul.sub,
#menu ul.sub li:hover ul.sub2{
	display: block;
}
#menu ul.sub > li,
#menu ul.sub2 > li{
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}
#menu ul.sub > li a,
#menu ul.sub2 > li a{
	display: block;
	padding: 10px;
	font-size: 16px;
	font-weight: normal;
	color: #333;
	text-decoration: none;
}
#menu ul.sub > li a:hover,
#menu ul.sub2 > li a:hover{
	opacity: 1;
	background: #eee;
	color: #3498db;
}
#menu ul.sub > li a.active,
#menu ul.sub2 > li a.active{
	font-weight: bold;
	color: #3498db;
}

/**/
#hamburgerMenu{
	display: none;
	transform: rotate(0deg);
	transition: 0.25s ease-in-out;
	position: absolute;
	right: 0px; top: 15px;
	width: 36px;
	height: 27px;
	cursor: pointer;
}
#hamburgerMenu span{
	transform: rotate(0deg);
	transition: 0.25s ease-in-out;
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 5px;
	background: var(--sub-bg);
	border-radius: 6px;
	opacity: 1;
}
#hamburgerMenu span:nth-child(1){
	top: 0px;
}
#hamburgerMenu span:nth-child(2){
	top: 11px;
}
#hamburgerMenu span:nth-child(3){
	top: 22px;
}
#hamburgerMenu.active{
	transform: rotate(90deg);
}
#hamburgerMenu.active span:nth-child(1){
	top: 13px;
	transform: rotate(135deg);
}
#hamburgerMenu.active span:nth-child(2){
	opacity: 0;
	left: -36px;
}
#hamburgerMenu.active span:nth-child(3){
	top: 13px;
	transform: rotate(-135deg);
}


/* head & breadcrumb */
#pageTitle.layout{
}
#pageTitle.layout .wrp{
	padding: 15px 0 1px;
}
#pageTitle h2.title, #pageTitle h1.title{
	margin: 0 0 10px;
}
#breadCrumb{
	margin: 0 0 30px;
	font-size: 14px;
	text-align: left;
}
#breadCrumb i{
	margin: 0 8px;
}
#breadCrumb a{
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
}
#breadCrumb a.last{
	font-weight: normal;
	color: #999;
}
#breadCrumb a:hover{
	color: #3498db;
}


/******************
***   FOOTER   ***
****************/
#footer{
	position: relative;
	z-index: 1;
	padding: 0 20px;
	width: 100%;
	background: #eee;
	text-align: center;
	color: #aaa;
}
#footer .wrp{
	margin: 0 auto;
	padding: 40px 0 1px;
	width: 100%;
	max-width: 1200px;
	text-align: left;
}

/**/
#subFooter{
	position: relative;
	z-index: 1;
	padding: 0 20px;
	width: 100%;
	background: var(--main-bg);
	font-size: 12px;
	color: var(--main-bg-color);
	text-align: left;
}
#subFooter .wrp{
	margin: 0 auto;
	padding: 10px 0;
	width: 100%;
	max-width: 1200px;
}
#subFooter .creator{
	float: right;
}
#subFooter .creator a{
	color: #999;
	text-decoration: none;
}

/**/
#scroll2Top{
	display: none;
	transition: all 0.5s ease-out;
	z-index: 10;
	position: fixed;
	bottom: 30px; right: 30px;
	padding: 9px 0 0;
	width: 48px;
	height: 48px;
	background: transparent;
	border: solid 2px #aaa;
	border-radius: 50%;
	font-size: 24px;
	line-height: 0;
	color: #aaa;
	text-align: center;
	cursor: pointer;
}
#scroll2Top:hover{
	border-color: var(--sub-bg);
	color: var(--sub-bg);
}
#scroll2Top.active{
	display: block;
}



/*******************
      PAGER       
*******************/
.sitePager{
	width: 100%;
	position: relative;
	text-align: center;
	clear: both;
}
.sitePager .pagerLink{
	position: absolute;
	top: -4px;
	width: 18%;	
}
.sitePager .leftPager{
	left: 0;
	text-align: left;
	margin-right: 2%;
}
.sitePager .centerPager{
	position: static;
	top: 0;
	width: 60%;
	margin: 0 auto;
	text-align: center;
}
.sitePager .rightPager{
	right: 0;
	text-align: right;
	margin-left: 2%;
}
.sitePager a, 
.sitePager strong {
	border-radius: 3px;
	color: #6f7b8a;
	padding: 5px 10px;
	font-size: 16px;
	text-decoration: none;
	margin-right: 3px;
}
.sitePager strong {
	background: #f3f6f9;	
}
.sitePager .centerPager a:hover{
	background: #e8edf3;
}
.sitePager .leftPager a, 
.sitePager .rightPager a{
	font-size: 26px;
}
.sitePager .leftPager a:hover, 
.sitePager .rightPager a:hover{
	background: #ffffff !important;
	color: #000;
}

/*********************
        BLOG 
*********************/
#blog,
.blogList{
	text-align: left;
}
.blogList .news{
	margin: 0 0 30px;
}
.blogList .news h3{
	margin: 0;
	font-size: 36px;
	font-weight: normal;
}
.blogList .news h3 a{
	color: #333;
	text-decoration: none;
}
.blogList .news h3 a:hover{
	color: #3498db;
}
.blogList .news .date{
	margin: 0 0 10px;
	font-size: 14px;
}
.blogList .news .pic{
	float: left;
	margin: 0 0 10px;
	width: 200px;
}
.blogList .news .pic a{
	text-decoration: none;
}
.blogList .news .pic img{
	width: 100%;
	border: solid 5px #fafafa;
}
.blogList .news .lead{
	color: #777;
}
.blogList .news .lead.withPic{
	float: left;
	padding: 0 0 0 20px;
	width: calc(100% - 200px);
}
.blogList .news .lead a.more{
	margin: 0 0 0 5px;
	font-size: 14px;
	text-decoration: none;
}
.blogList .news .lead a.more:hover{
	text-decoration: underline;
}

/**/
.rightBox{
	margin: 0 0 30px;
	padding: 0;
	background: #fafafa;
	box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.2);
}
.rightBox h3.title{
	margin: 0;
	padding: 10px 20px;
	background: #eee;
	font-size: 20px;
	color: #333;
	text-align: center;
	text-transform: uppercase;
}
.rightBox .wrap{
	padding: 20px;
}
.rightBox h3.title a{
	color: #333;
	text-decoration: none;
}
.rightBox h3.title a:hover{
	color: #3498db;
}
.rightBox .blogList .news h3{
		font-size: 20px;
	}
.rightBox .blogList .news .pic{
	float: none;
	width: 100%;
}
.rightBox .news .lead.withPic{
	float: none;
	padding: 0;
	width: 100%;
}

/**/
#blogPost{
	width: 100%;
	text-align: left;
}
#blogPost h1.blogTitle{
	margin: 0;
	font-size: 36px;
	font-weight: normal;
}
#blogPost .date{
	margin: 0 0 10px;
	font-size: 14px;
}
#blogPost .lead{
	margin: 0 0 20px;
	font-size: 20px;
	color: #666;
}
#blogPost .description{
	font-size: 17px;
	line-height: 26px;
}
#blogPost .responsiveVideo{
	margin: 0 auto 30px;
	border: solid 5px #fafafa;
	text-align: center;
}
#blogPost .responsiveVideo iframe{
	display: block;
	margin: 0;
}
/**/
#blogPost .mediaPic{
	margin: 0 auto 30px;
	text-align: center;
}
#blogPost .mediaPic img{
	width: auto;
	max-width: 100%;
	border: solid 5px #fafafa;
}
#blogPost .mediaPic figcaption{
	font-size: 14px;
	font-style: italic;
	color: #666;
}
#blogPost .mediaPicLeft{
	margin: 0 20px 20px 0;
	float: left;
	width: auto;
	max-width: 50%;
	max-width: 33.33%;
	text-align: left;
}
#blogPost .mediaPicRight{
	margin: 0 0 20px 20px;
	float: right;
	width: auto;
	max-width: 33.33%;
	text-align: right;
}
#blogPost .mediaGallery{
	display: none;
}



/* Gallery */
.galleryAlbum{
	margin: 0 auto;
	width: 100%;
	max-width: 560px;
	text-align: center;
}
.galleryAlbum .hidden{
	display: none;
}
.galleryAlbum .pic{
	display: inline-block;
	padding: 10px;
	width: 140px;
	overflow: hidden;
}
.galleryAlbum .pic a{
	display: inline-block;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border: solid 5px #fafafa;
	box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.2);
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.galleryAlbum .pic a img{
	display: none;
}
.galleryAlbum .pic a{ transition: all 0.2s; }
.galleryAlbum .pic a:hover{ transform: scale(1.08); }



/* JS social */
#pageShare{
	margin: 0 0 30px;
	text-align: left;
}
#pageShare h3{
	margin: 0 0 10px;
	font-size: 20px;
}
.jssocials-shares {
  margin: 0.2em 0; }

.jssocials-shares * {
  box-sizing: border-box; }

.jssocials-share {
  display: inline-block;
  vertical-align: top;
  margin: 0.3em 0.6em 0.3em 0; }

.jssocials-share:last-child {
  margin-right: 0; }

.jssocials-share-logo {
  width: 1em;
  vertical-align: middle;
  font-size: 1.5em; }

img.jssocials-share-logo {
  width: auto;
  height: 1em; }

.jssocials-share-link {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1; }
  .jssocials-share-link.jssocials-share-link-count {
    padding-top: .2em; }
    .jssocials-share-link.jssocials-share-link-count .jssocials-share-count {
      display: block;
      font-size: .6em;
      margin: 0 -.5em -.8em -.5em; }
  .jssocials-share-link.jssocials-share-no-count {
    padding-top: .5em; }
    .jssocials-share-link.jssocials-share-no-count .jssocials-share-count {
      height: 1em; }

.jssocials-share-label {
  padding-left: 0.3em;
  vertical-align: middle; }

.jssocials-share-count-box {
  display: inline-block;
  height: 1.5em;
  padding: 0 0.3em;
  line-height: 1;
  vertical-align: middle;
  cursor: default; }
  .jssocials-share-count-box.jssocials-share-no-count {
    display: none; }

.jssocials-share-count {
  line-height: 1.5em;
  vertical-align: middle; }
/* flat */
.jssocials-share-twitter .jssocials-share-link {
  background: #00aced; }
  .jssocials-share-twitter .jssocials-share-link:hover {
    background: #0087ba; }

.jssocials-share-facebook .jssocials-share-link {
  background: #3b5998; }
  .jssocials-share-facebook .jssocials-share-link:hover {
    background: #2d4373; }

.jssocials-share-googleplus .jssocials-share-link {
  background: #dd4b39; }
  .jssocials-share-googleplus .jssocials-share-link:hover {
    background: #c23321; }

.jssocials-share-linkedin .jssocials-share-link {
  background: #007bb6; }
  .jssocials-share-linkedin .jssocials-share-link:hover {
    background: #005983; }

.jssocials-share-pinterest .jssocials-share-link {
  background: #cb2027; }
  .jssocials-share-pinterest .jssocials-share-link:hover {
    background: #9f191f; }

.jssocials-share-email .jssocials-share-link {
  background: #3490F3; }
  .jssocials-share-email .jssocials-share-link:hover {
    background: #0e76e6; }

.jssocials-share-stumbleupon .jssocials-share-link {
  background: #eb4823; }
  .jssocials-share-stumbleupon .jssocials-share-link:hover {
    background: #c93412; }

.jssocials-share-whatsapp .jssocials-share-link {
  background: #29a628; }
  .jssocials-share-whatsapp .jssocials-share-link:hover {
    background: #1f7d1e; }

.jssocials-share-telegram .jssocials-share-link {
  background: #2ca5e0; }
  .jssocials-share-telegram .jssocials-share-link:hover {
    background: #1c88bd; }

.jssocials-share-line .jssocials-share-link {
  background: #25af00; }
  .jssocials-share-line .jssocials-share-link:hover {
    background: #1a7c00; }

.jssocials-share-viber .jssocials-share-link {
  background: #7b519d; }
  .jssocials-share-viber .jssocials-share-link:hover {
    background: #61407b; }

.jssocials-share-pocket .jssocials-share-link {
  background: #ef4056; }
  .jssocials-share-pocket .jssocials-share-link:hover {
    background: #e9132e; }

.jssocials-share-messenger .jssocials-share-link {
  background: #0084ff; }
  .jssocials-share-messenger .jssocials-share-link:hover {
    background: #006acc; }

.jssocials-share-vkontakte .jssocials-share-link {
  background: #45668e; }
  .jssocials-share-vkontakte .jssocials-share-link:hover {
    background: #344d6c; }

.jssocials-share-link {
  padding: .5em .6em;
  color: #fff;
  -webkit-transition: background 200ms ease-in-out, border-color 200ms ease-in-out;
          transition: background 200ms ease-in-out, border-color 200ms ease-in-out; }
  .jssocials-share-link:hover, .jssocials-share-link:focus, .jssocials-share-link:active {
    color: #fff; }

.jssocials-share-count-box {
  position: relative;
  height: 2.5em;
  padding: 0 .3em;
  margin-left: 0.3em;
  background: #f5f5f5;
  -webkit-transition: background 200ms ease-in-out, border-color 200ms ease-in-out;
          transition: background 200ms ease-in-out, border-color 200ms ease-in-out; }
  .jssocials-share-count-box:hover {
    background: gainsboro; }
    .jssocials-share-count-box:hover:after {
      border-color: transparent gainsboro transparent transparent; }
  .jssocials-share-count-box:after {
    content: "";
    display: block;
    position: absolute;
    top: 0.85em;
    left: -0.3em;
    width: 0;
    height: 0;
    border-width: 0.4em 0.4em 0.4em 0;
    border-style: solid;
    border-color: transparent #f5f5f5 transparent transparent;
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
    -webkit-transition: background 200ms ease-in-out, border-color 200ms ease-in-out;
            transition: background 200ms ease-in-out, border-color 200ms ease-in-out; }
  .jssocials-share-count-box .jssocials-share-count {
    line-height: 2.5em;
    color: #444; }

/*******************
     GRID       
*******************/
.col input.text, .col textarea.text,
.col-sm input.text, .col-sm textarea.text,
.col-md input.text, .col-md textarea.text,
.col-lg input.text, .col-lg textarea.text,
.col-xl input.text, .col-xl textarea.text{
	width: 100%;
}
.row{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -20px 20px;
}
.row:after{ content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-sm-auto, .col-sm-1, .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-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-md-auto, .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, .col-md,
.col-lg-auto, .col-lg-1, .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-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-xl-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl{
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 20px;
	padding-left: 20px;
}
.col{
	flex-basis: 0;
	flex-grow: 1;
	max-width: 100%;
}
.col-auto{
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}
.col-1{
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}
.col-2{
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}
.col-3{
	flex: 0 0 25%;
	max-width: 25%;
}
.col-4{
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.col-5{
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}
.col-6{
	flex: 0 0 50%;
	max-width: 50%;
}
.col-7{
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}
.col-8{
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}
.col-9{
	flex: 0 0 75%;
	max-width: 75%;
}
.col-10{
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}
.col-11{
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}
.col-12{
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 576px){
	.col-sm{
		flex-basis: 0;
		flex-grow: 1;
		max-width: 100%;
	}
	.col-sm-auto{
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.col-sm-1{
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-sm-2{
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-sm-3{
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-sm-4{
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-sm-5{
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-sm-6{
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-sm-7{
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-sm-8{
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-sm-9{
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-sm-10{
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-sm-11{
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-sm-12{
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 768px){
	.col-md-order-1{
		order: 1;
	}
	.col-md-order-2{
		order: 2;
	}
	.col-md-order-3{
		order: 2;
	}
	.col-md{
		flex-basis: 0;
		flex-grow: 1;
		max-width: 100%;
	}
	.col-md-auto{
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.col-md-1{
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-md-2{
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-md-3{
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-md-4{
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-md-5{
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-md-6{
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-md-7{
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-md-8{
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-md-9{
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-md-10{
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-md-11{
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-md-12{
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 992px){
	.col-lg{
		flex-basis: 0;
		flex-grow: 1;
		max-width: 100%;
	}
	.col-lg-auto{
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.col-lg-1{
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-lg-2{
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-lg-3{
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-lg-4{
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-lg-5{
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-lg-6{
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-lg-7{
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-lg-8{
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-lg-9{
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-lg-10{
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-lg-11{
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-lg-12{
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 1200px){
	.col-xl{
		flex-basis: 0;
		flex-grow: 1;
		max-width: 100%;
	}
	.col-xl-auto{
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.col-xl-1{
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}
	.col-xl-2{
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}
	.col-xl-3{
		flex: 0 0 25%;
		max-width: 25%;
	}
	.col-xl-4{
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.col-xl-5{
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.col-xl-6{
		flex: 0 0 50%;
		max-width: 50%;
	}
	.col-xl-7{
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.col-xl-8{
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.col-xl-9{
		flex: 0 0 75%;
		max-width: 75%;
	}
	.col-xl-10{
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}
	.col-xl-11{
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}
	.col-xl-12{
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/**/
table.rsp{
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
	border: 1px solid #ddd;
	border-collapse: collapse;
}
table.rsp tr{
	padding: 5px;
	background-color: #fafafa;
	border: 1px solid #eee;
	
}
table.rsp th{
	padding: 10px;
	font-size: 17px;
	text-transform: uppercase;
	text-align: left;
}
table.rsp td{
	padding: 10px;
	text-align: left;
}
@media screen and (max-width: 767px){
	table.rsp{
		border: 0;
	}
  	table.rsp thead{
		border: none;
		clip: rect(0 0 0 0);
		
		margin: -1px;
		padding: 0;
		overflow: hidden;
		
		position: absolute;
		width: 1px;
		height: 1px;
	}
	table.rsp tr{
		display: block;
		width: 100%;
		margin-bottom: 10px;
		border-bottom: 3px solid #eee;
	}
	table.rsp td{
		display: block;
		border-bottom: 1px solid #eee;
		font-size: 15px;
		text-align: right;
	}
	table.rsp td::before{
		content: attr(data-label);
		float: left;
		width: 40%;
		font-weight: bold;
		text-transform: uppercase;
		text-align: left;
	}
	table.rsp td div{
		display: block;
		float: right;
		width: 60%;
	}
	table.rsp td:after{ content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
	table.rsp td:last-child{
		border-bottom: 0;
	}
}


/*******************
   FORM ELEMENTS       
*******************/
input.checkbox{
    position:relative;
    top: 3px;
	margin-right: 5px;
	cursor: pointer;
}
input, select, textarea, button{
	outline: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}
input.text, textarea.text, select.select{
	transition: all 0.3s ease;
	padding: 8px 12px;
	background: #fff;
	border: solid 1px #ddd;
	font-size: 15px;
	color: #2c3454;
}
input.text:focus, textarea.text:focus, select.select:focus{
	border: 1px solid #bbb;
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);
}
input.disabled, select.disabled{
    background: #eee;
    color: #777;
}
label.label{
	font-size: 16px;
}
input.text + .i{
	display: block;
	margin: 5px 0 0;
	font-size: 12px;
	font-style: italic;
	color: #bcc2d6;
}

/* input checkbox/radio */
input[type="checkbox"].styled,
input[type="radio"].styled{
	visibility: hidden;
	display: none;
	margin: 0 0 0 -9999px;
}
input[type="checkbox"].styled + label,
input[type="radio"].styled + label{
	display: inline-block;
	margin: 0 0 3px;
	font-size: 16px;
	cursor: pointer;
}
input[type="checkbox"].styled + label:before,
input[type="radio"].styled + label:before{
	content: '';
	display: inline-block;
	margin: -1px 10px 0 0;
	padding: 0;
    width: 16px;
    height: 16px;
    background: #fff;
	border: solid 1px #ddd;
    vertical-align: middle;
    cursor: pointer;
	text-decoration: none;
}
input[type="radio"].styled + label:before{
	border-radius: 50%;
}
input[type="checkbox"].styled + label:hover:before,
input[type="radio"].styled + label:hover:before{
	border: solid 1px #1DBB2A;
}
input[type="checkbox"].styled:checked + label:before,
input[type="radio"].styled:checked + label:before{
	background: #099612;
	border-color: #099612;
}


#regform,
#contactform{
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
	text-align: left;
}
#contactform .col{
	margin-bottom: 10px;
}

/**/
#start{
	position: relative;
}
#start img.bg{
	width: 100%;
}

#start .l{
	padding: 0 20px;
	width: 100%;
	max-width: 400px;
	position: absolute;
	top: 25%;
	left:0; right: 0; margin: auto;
}
#start .l .pic{
	position: relative;
	margin: 0 0 60px;
	width: 100%;
	padding: 20px 50px;
	border: solid 2px rgba(255, 255, 255, 0.7);
}
#start .pic img{
	width: 100%;
}
#start a{
	display: inine-block;
	padding: 10px 30px;
	background: #ff7800;
	border: solid 2px #ff7800;
	font-size: 14px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}
#start a:hover{
	background: transparent;
	color: #ff7800;
}


/***************************************/


/**/
#renderOpen .box{
	display: block;
	margin: 0;
	text-decoration: none;
}
#renderOpen .box .pic{
	margin: 0 auto 20px;
}
#renderOpen .box .pic{
	width: auto;
	max-width: 100%;
}

/**/
#whyOpen .box2{
	margin: 0 0 30px;
	font-size: 14px;
	color: #777;
}
#whyOpen .box2 i{
	display: block;
	margin: 0 0 10px;
	font-size: 32px;
	color: var(--sub-color);
	vertical-align: middle;
}
#whyOpen .box2 .pic{
	margin: 0 0 10px;
	text-align: center;
}
#whyOpen .box2 .pic img{
	width: 36px;
}
/**/
#whatOpen .box2{
	margin: 0 0 30px;
	font-size: 14px;
	color: #777;
}
#whatOpen .box2 i{
	display: block;
	margin: 0 0 10px;
	font-size: 32px;
	color: var(--sub-color);
	vertical-align: middle;
}
/**/
#workingOpen .box2{
	position: relative;
	margin: 0 0 30px;
	font-size: 14px;
	color: #777;
}
#workingOpen .box2 h3{
	margin: 0 0 10px;
	font-size: 18px;
}
#workingOpen .box2 p{
	font-size: 14px;
}
#workingOpen .howright{
	position: absolute;
	top: 3px; right: -20px;
	font-size: 24px;
	color: #999;
}


/**/
#compatibleOpen img{
	transition: all 0.7s ease;
	margin: 0 10px 20px;
	height: 50px;
	-webkit-filter: grayscale(100%);
}
#compatibleOpen img:hover{
	-webkit-filter: grayscale(0);
    filter: grayscale(0);
}