@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700|Roboto+Condensed:400,300,700&subset=latin,cyrillic);
@media (min-width: 200px) {
body { margin:0;
  font-family: 'Roboto', sans-serif;
  font-size:14px;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 47%, rgba(246,246,246,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(0%, rgba(237,237,237,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(246,246,246,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 47%, rgba(246,246,246,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 47%, rgba(246,246,246,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 47%, rgba(246,246,246,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 47%, rgba(246,246,246,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 );
}
a {color:#212121; text-decoration:none;}
h1, h2, h3, h4 {font-family: 'Roboto Condensed', sans-serif; text-transform:uppercase; font-weight: normal}
article h1:first-letter, article h2:first-letter{
  color: #333;
  font-size: 28px;
}
article h3:first-letter{
  color: #333;
  font-size: 20px;
}
article a, .contact a, .lastnav a, .copy a{
  color: #1f6eb3;
}
.clear {clear: both;

content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
/* Header */
header hr {border-bottom:1px solid #fff; width:100%; background: rgba(54, 25, 25, .5); margin:0; padding-top:10px;}
header {
	position: relative;
	height: 280px;
	width:100%;
	text-align: center;
  /*
	background-image: url("http://www.arteqo.com/img/template/header_bg.png");
  */
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center top;

-webkit-box-shadow: 0px 1px 1px 0px rgba(133,121,105,1);
-moz-box-shadow: 0px 1px 1px 0px rgba(133,121,105,1);
box-shadow: 0px 1px 1px 0px rgba(133,121,105,1);
/*
background: rgba(231,162,64,1);
background: -moz-linear-gradient(left, rgba(231,162,64,1) 0%, rgba(192,231,64,1) 15%, rgba(0,163,16,1) 33%, rgba(0,128,163,1) 54%, rgba(56,38,223,1) 76%, rgba(147,0,163,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(231,162,64,1)), color-stop(15%, rgba(192,231,64,1)), color-stop(33%, rgba(0,163,16,1)), color-stop(54%, rgba(0,128,163,1)), color-stop(76%, rgba(56,38,223,1)), color-stop(100%, rgba(147,0,163,1)));
background: -webkit-linear-gradient(left, rgba(231,162,64,1) 0%, rgba(192,231,64,1) 15%, rgba(0,163,16,1) 33%, rgba(0,128,163,1) 54%, rgba(56,38,223,1) 76%, rgba(147,0,163,1) 100%);
background: -o-linear-gradient(left, rgba(231,162,64,1) 0%, rgba(192,231,64,1) 15%, rgba(0,163,16,1) 33%, rgba(0,128,163,1) 54%, rgba(56,38,223,1) 76%, rgba(147,0,163,1) 100%);
background: -ms-linear-gradient(left, rgba(231,162,64,1) 0%, rgba(192,231,64,1) 15%, rgba(0,163,16,1) 33%, rgba(0,128,163,1) 54%, rgba(56,38,223,1) 76%, rgba(147,0,163,1) 100%);
background: linear-gradient(to right, rgba(231,162,64,1) 0%, rgba(192,231,64,1) 15%, rgba(0,163,16,1) 33%, rgba(0,128,163,1) 54%, rgba(56,38,223,1) 76%, rgba(147,0,163,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7a240', endColorstr='#9300a3', GradientType=1 );
*/
background: #e91e63; /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-linear-gradient(-45deg,#ff0000,#fff800,#2dc222,deepskyblue,#00ccfa,indigo,#a200bb);
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(-45deg,#ff0000,#fff800,#2dc222,deepskyblue,#00ccfa,indigo,#a200bb);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(-45deg,#ff0000,#fff800,#2dc222,deepskyblue,#00ccfa,indigo,#a200bb);
  /* Standard syntax */
  background: linear-gradient(to -45deg,#ff0000,#fff800,#2dc222,deepskyblue,#00ccfa,indigo,#a200bb);
}
.circle{
  height:90px;
   width:180px;
   border-radius: 0 0 90px 90px;
   -moz-border-radius: 0 0 90px 90px;
   -webkit-border-radius: 0 0 90px 90px;
  position: absolute;
  background: rgba(229,229,229,0.4);
  opacity: 0.2;
  left: 20px;
}
.circle2{
  height:90px;
  width:180px;
  border-radius: 90px 90px 0 0;
  -moz-border-radius: 90px 90px 0 0;
  -webkit-border-radius: 90px 90px 0 0;
  position: absolute;
  background: rgba(229,229,229,0.4);
  opacity: 0.2;
  left: 130px;
  bottom: 0;
}
.circle3{
  border-radius: 50%;
	width: 300px;
	height: 300px;
  position: absolute;
  background: rgba(229,229,229,0.4);
  opacity: 0.2;
  bottom: -50px;
  right: 130px;
}
.circle4{
  height:360px;
  width:180px;
  border-radius: 180px 0  0 180px;
  -moz-border-radius: 180px 0  0 180px;
  -webkit-border-radius: 180px 0  0 180px;
  position: absolute;
  background: rgba(229,229,229,0.4);
  opacity: 0.2;
  bottom: 0;
  right: 0;
}
.circle5{
  height:150px;
   width:300px;
   border-radius: 0 0 300px 300px;
   -moz-border-radius: 0 0 300px 300px;
   -webkit-border-radius: 0 0 300px 300px;
  position: absolute;
  background: rgba(229,229,229,0.4);
  opacity: 0.2;
  right: 360px;
}
header h1 {background: rgba(54, 25, 25, .5); margin:0; padding-top:10px; color:#fff; font-family: 'Roboto Condensed', sans-serif; font-size:26px;}
p.black {background: rgba(54, 25, 25, .5); margin:0; padding-bottom:10px; color:#fff; text-transform: uppercase; font-size:14px; letter-spacing: 5px;}
p.slogan {padding:10px 0; text-transform: uppercase; font-size:13px;}
header p {margin:0;}
.logo { padding-top:20px; height:auto;}
nav.tools {
	max-width:1000px;
	margin: 0 auto;

/*	display: table;
	height: 100px; */

}

nav.tools a.lang {
	float:right;
/*	display: table-cell;
	vertical-align:middle; */
	position: relative;
	top:55px;
	right:0px;
	width: 39px;
	height: 39px;
	background: red;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	margin-left:10px;
	border: 2px solid #fff;
-webkit-box-shadow: 0px 2px 4px 0px rgba(133,121,105,1);
-moz-box-shadow: 0px 2px 4px 0px rgba(133,121,105,1);
box-shadow: 0px 2px 4px 0px rgba(133,121,105,1);

}

nav.tools a.rus {
    background-image: url("http://www.arteqo.com/img/template/rus.png");
    background-repeat: no-repeat;
    position: absolute;
    top: 260px;
    right: 40px;
}
nav.tools a.eng {
    background-image: url("http://www.arteqo.com/img/template/eng.png");
    background-repeat: no-repeat;
    position: absolute;
    top: 260px;
    right: 140px;
}
nav.tools a.lat {
    background-image: url("http://www.arteqo.com/img/template/lat.png");
    background-repeat: no-repeat;
    position: absolute;
    top: 260px;
    right: 90px;
}

nav.tools a.getsite {
	position: absolute;
  top: 230px;
	left: 40px;
	display: table;
	text-align:center;
	float:left;
	width: 94px;
	height: 94px;
	background: #1f6eb3;
	color:#fff;
	-moz-border-radius: 45px;
	-webkit-border-radius: 45px;
	border-radius: 45px;
	border: 1px solid #fff;
-webkit-box-shadow: 0px 2px 4px 0px rgba(133,121,105,1);
-moz-box-shadow: 0px 2px 4px 0px rgba(133,121,105,1);
box-shadow: 0px 2px 4px 0px rgba(133,121,105,1);

}
nav.tools a.getsite span {
	font-family: 'Roboto Condensed', sans-serif;
	text-transform:uppercase;
	height:90px;
	display: table-cell;
	vertical-align:middle;
	font-size: 16px;
}
/* end Header */

/* Navigation */

nav, article { margin: 0 auto;}
/* nav { text-align: center; margin-top:50px;}*/
nav {text-align:center; margin-top:60px;}
nav a {
/*    border: 4px solid rgba(33,33,33,0.3); */
/*
-webkit-box-shadow: inset 0px 0px 0px 5px rgba(33,33,33,0.3);
-moz-box-shadow: inset 0px 0px 0px 5px rgba(33,33,33,0.3);
*/
box-shadow: inset 0px 0px 0px 1px rgba(33,33,33,0.3);
    box-sizing: border-box;
    display: inline-block;
    height: 210px;
    width: 210px;
    margin: 0 50px 0 0;
    padding: 0;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;
    text-align:center;
}

.lastnav { margin: 0 !important;}
nav a.webdev {
    background-image: url("http://www.arteqo.com/img/template/websites.png");
    background-repeat: no-repeat;
	background-size: cover;
}
nav a.market {
    background-image: url("http://www.arteqo.com/img/template/marketing.png");
    background-repeat: no-repeat;
	background-size: cover;
}
nav a.visu {
    background-image: url("http://www.arteqo.com/img/template/visuals.png");
    background-repeat: no-repeat;
	background-size: cover;
}
nav p{margin:0;}
nav a p.nav-icon {
    position: relative;
    top:-30px;
    text-align: center;
}
nav a p.nav-title {
    position: relative;
    text-align: center;
    top:200px;
    text-transform:uppercase;
    color:#212121;
    font-size: 16px;
    font-family: 'Roboto Condensed', sans-serif;
}
.row ul{
  margin: 0;
  padding: 0;
}
.socialicons{
  border-top: 1px solid #e5e5e5;
}
.list-nav{
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}
.nav-title-h3{
  color: #e5e5e5;
  font-size: 16px;
}
@media all and (max-width: 888px) and (min-width: 0px) {
  body nav.menu { max-width:600px; margin-top: -54px; text-align:center; }



  body nav a.webdev, body nav a.market, body nav a.visu, body nav a.moremenu {
      background-image: none;
      background-repeat: no-repeat;
      background-size: cover;
      cursor:pointer;
      background: rgba(255,255,255,1);
      background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
      background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
      background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
      background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
      background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 );
  }


  body nav a {
      height: 100px;
      width: 100px;
      margin: 0 20px 0 0;
  }

  body nav a p.nav-icon {
      position: relative;
      top:25%;
  }
  body nav a p.nav-title {
      position: relative;
      top:35%;
      text-transform:uppercase;
      color:#212121;
      font-weight: 700;
      font-size: 14px;
      font-family: 'Roboto Condensed', sans-serif;
  }

  body nav a.active {background-color: #ff433a;}
  body nav a.active, body nav a.active p.nav-title { color: #fff; }
  body nav.menu{
    float: right;
    position: relative;
    right: 40px;
  }

  body article .half-page {width: calc(100% - 300px); margin-right:50px; float:left; vertical-align:middle; height:210px;}
  body article .half-page-r {width:210px; float:right; }

  body .webdev-big {
  	-webkit-box-shadow: inset 0px 0px 0px 5px rgba(33,33,33,0.3);
  	-moz-box-shadow: inset 0px 0px 0px 5px rgba(33,33,33,0.3);
  	box-shadow: inset 0px 0px 0px 5px rgba(33,33,33,0.3);
  	background-color:#ff433a;
  	height: 210px;
  	width: 210px;
  	text-align:center;
  	box-sizing: border-box;
  	padding: 0px 0 0 0;
  	position: relative;
  	text-decoration: none;
  	text-transform: uppercase;
  	-moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;
  	display: table-cell;
  	vertical-align: middle;
  	color:#fff;
  }

  body .webdev-big a {color:#fff; text-decoration:none; font-size:16px; font-weight:700;}
}
/* inside nav */
body.inside-page nav { max-width:600px; margin-top: -54px; text-align:center; }

span{
  display: block;
}

body.inside-page nav a.webdev, body.inside-page nav a.market, body.inside-page nav a.visu, body.inside-page nav a.moremenu {
    background-image: none;
    background-repeat: no-repeat;
    background-size: cover;
    cursor:pointer;
    background: rgba(255,255,255,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 );
}


body.inside-page nav a {
    height: 100px;
    width: 100px;
    margin: 0 20px 0 0;
}

body.inside-page nav a p.nav-icon {
    position: relative;
    top:25%;
}
body.inside-page nav a p.nav-title {
    position: relative;
    top:35%;
    text-transform:uppercase;
    color:#212121;
    font-size: 14px;
    font-family: 'Roboto Condensed', sans-serif;
}

body.inside-page nav a.active {background-color: #ff433a;}
body.inside-page nav a.active, body.inside-page nav a.active p.nav-title { color: #fff; }


/* fullscreen nav */

.fullNav {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.fullNav-content {
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
    text-align: center;
    height: auto;
/*    top: 25%;
    width: 100%;*/
    margin-top: 70px;
}

.fullNav-content a {
    text-decoration: none;
    font-size: 28px;
    color: #818181;
    display: inline-block;
    transition: 0.3s;
    width: calc(95% / 5);
}

.fullNav a:hover, .fullNav a:focus {
    color: #f1f1f1;
}



@media screen and (max-height: 450px) {
  .fullNav {overflow-y: auto;}
  .fullNav a {font-size: 20px}
  .closebtn {

  }
}




/* end Navigation */

.container{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.hide-menu{
  display: none;
}
article {

}
.breadcrumbs{
  margin-top: 20px;
}
.breadcrumbs a{
  color: #919191;
}
.breadcrumbs a:hover{
  color: #1f6eb3;
}


.inside-page article, p.breadcrumbs {

}

.inside-page article .half-page {width: calc(100% - 300px); margin-right:50px; float:left; vertical-align:middle; height:210px;}
.inside-page article .half-page-r {width:210px; float:right; }

body.inside-page .webdev-big {
	-webkit-box-shadow: inset 0px 0px 0px 5px rgba(33,33,33,0.3);
	-moz-box-shadow: inset 0px 0px 0px 5px rgba(33,33,33,0.3);
	box-shadow: inset 0px 0px 0px 5px rgba(33,33,33,0.3);
	background-color:#ff433a;
	height: 210px;
	width: 210px;
	text-align:center;
	box-sizing: border-box;
	padding: 0px 0 0 0;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	-moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;
	display: table-cell;
	vertical-align: middle;
	color:#fff;
}

body.inside-page .webdev-big a {color:#fff; text-decoration:none; font-size:16px; font-weight:700;}

/* Footer */
footer hr {border-top:1px solid #212121; width:100%;}
footer h1 {text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif; font-size:18px; padding: 20px 0;}
footer p {line-height:24px; font-size:15px; }
footer {text-align:center; background-color:#fff;}
footer div {display: inline-block; vertical-align: text-top; text-align:left; margin-left:50px;}
footer div.logo { width: 250px; text-align:right; }
footer div.contact {text-align:right; margin-right: 50px;}
.logo-footer {width:250px; height:auto; margin-top:50px;}
footer i.margin {margin-right:20px;}
footer i.fa-twitter:hover { color: #00aced;}
footer i.fa-linkedin:hover { color: #007bb6;}
footer i.fa-youtube-play:hover { color: #bb0000;}

}

/* end Footer */

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile
@media (min-width: 200px) {} */

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

/* TEST */


@media all and (max-width: 544px) and (min-width: 0px) {
  footer div.contact {
    display: block;
    width: auto;
    margin: 0;
    text-align: center;
  }
  footer div{
    width: auto;
    text-align: center;
  }
  nav a{
    display: block;
  }
  nav a.webdev, nav a.market{
    margin: 100px auto;
  }
  nav a.visu{
    margin: 0 auto !important;
  }
  .inside-page article, p.breadcrumbs{

  }
  .breadcrumbs{

  }
  article{

  }
}
@media all and (max-width: 768px) and (min-width: 545px) {
  footer div.contact {
    display: inline-block;
    width: auto;
    padding: 0 60px;
  }
  footer div{
    width: auto;
    text-align: center;
  }
  nav a{
    display: block;
  }
  nav a.webdev, nav a.market{
    margin: 100px auto;
  }
  nav a.visu{
    margin: 0 auto !important;
  }
  .logo{
    margin: 0 auto;
    display: block;
  }
  .lastnav{
    text-align: left !important;
  }
  .inside-page article, p.breadcrumbs{

  }
  .breadcrumbs{

  }
  article{

  }
}

@media all and (max-width: 888px) and (min-width: 0px) {
  #form1, #form2{
    width: auto !important;
  }
  .hide-menu{
    display: block;
  }
}


@media all and (max-width: 16000px) and (min-width: 889px) {
  .hide-menu{
    display: none;
  }
}


@media all and (max-width: 992px) and (min-width: 767px) {
    .logo{
    margin: 0 auto;
    display: block;
    }
    .contact {
      display: inline-block;
      width: 250px;
      text-align: right;
    }
    footer div{
      width: auto;
    }
  }
  @media all and (max-width: 1200px) and (min-width: 993px) {
    footer div.contact {

    }
    article{

    }
  }
  /* TEST HIDDEN CLASS */
  .socialicons li, .mob-languages li{
    width: auto !important;
  }

  @media all and (max-width: 888px) and (min-width: 0px) {
    .hidden{
      display: none;
    }
    body.inside-page nav.menu{
      float: right;
      position: relative;
      right: 40px;
    }
  }
  @media all and (max-width: 767px) and (min-width: 0px){
    .overlay-content{
      background-color: transparent !important;
      top: -5% !important;
      left: 0% !important;
      width: 100% !important;
      border: none !important;
      margin: 0 !important;
      transform: scale(0.8) !important;
      position: relative !important;
    }
    @media  (max-device-width: 1000px) and (orientation: landscape) {
      .overlay-content{

      }
    }
    .row ul{
      border: none;
    }
    .overlay-content ul li{
      padding: 10px 0 !important;
    }
    header{
      background: red; /* For browsers that do not support gradients */
        /* For Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(-35deg,#ff0000,#fff800,#12ff00,deepskyblue,#00ccfa,#9300ff,#dd00ff);
        /* For Opera 11.1 to 12.0 */
        background: -o-linear-gradient(-35deg,#ff0000,#fff800,#12ff00,deepskyblue,#00ccfa,#9300ff,#dd00ff);
        /* For Fx 3.6 to 15 */
        background: -moz-linear-gradient(-35deg,#ff0000,#fff800,#12ff00,deepskyblue,#00ccfa,#9300ff,#dd00ff);
        /* Standard syntax */
        background: linear-gradient(to -35deg,#ff0000,#fff800,#12ff00,deepskyblue,#00ccfa,#9300ff,#dd00ff);
    }
  }
  @media all and (max-width: 1600px) and (min-width: 889px) {
    .moremenu{

    }
  }
.breadcrumbs{

}
.inside-page article, p.breadcrumbs{

}
/* Artiom was here */
.tag-list
{
column-count: 5;
list-style: none;
}

.tag-list li::before
{
content: '»';
color: rgb(255,67,60);
font-size: 150%;
}

.html-no-support
{
color: rgb(200,0,0);
}

.browser-support
{
width: 1000px;
margin: auto;
text-align: center;
border-spacing: 0.9em 0;
}

.browser-support caption
{
margin-bottom: 10px;
font-weight: bold;
}

.browser-support th, .browser-support td
{
padding: 10px;
margin: 5px;
border-top-style: solid;
border-width: 1px;
background: rgba(255,255,255,0.5);
}

.browser-support td
{
margin: 0;
border-top-style: none;
border-bottom-style: solid;
}

.browser-support th:nth-child(1), .browser-support td:nth-child(1)
{
border-color: rgb(10,149,82);
}

.browser-support th:nth-child(2), .browser-support td:nth-child(2)
{
border-color: rgb(255,170,0);
}

.browser-support th:nth-child(3), .browser-support td:nth-child(3)
{
border-color: rgb(0,99,206);
}

.browser-support th:nth-child(4), .browser-support td:nth-child(4)
{
border-color: rgb(204,15,22);
}

.browser-support th:nth-child(5), .browser-support td:nth-child(5)
{
border-color: rgb(0,141,188);
}

.att-table
{
padding: 0;
width: 100%;
text-align: center;
}

.att-table td, .att-table th
{
padding: 10px;
background: rgba(255,255,255,0.7);
}


.att-table th
{
background: rgb(255,67,60);
color: rgb(235,235,235);
}

.att-table tr
{
border-bottom: solid 1px rgb(0,87,163);
}

.att-table ul
{
list-style-type: none;
padding: 0;
}

dfn
{
font-weight: bold;
font-style: normal;
}

.web-example
{
max-width: 100%;
}

.listed-web-example
{
width: 100%;
height: 12vw;
object-fit: cover;
}
.listed-web-example-table img
{
padding-top: 1vw
}

.listed-web-example-table td
{
padding-left: 1vw;
padding-right: 1vw;
text-align: center;
width: 33%;
}

footer a
{
-webkit-box-shadow: none;
box-shadow: none;
display: initial;
margin: 0;
text-transform: none;
}

article
{
text-align: initial;
}

article > p > span[style~="border-bottom:"]
{
display: inline;
}

.colour-list
{
padding: 0;
}

.colour-list li
{
display: inline-block;
width: 180px;
height: 180px;
line-height: 180px;
text-align: center;
overflow: hidden;
font-size: 90%;
color: rgb(255,255,255);
box-shadow: inset 0px 0px 0px 1px rgba(33,33,33,0.3);
border-radius: 50%;
margin: 10px;
box-sizing: border-box;
}

.colour-list li a
{
color: rgb(255,255,255);
display: inline-block;
width: 180px;
height: 180px;
line-height: 180px;
border-radius: 50%;
background: rgba(0,0,0,0);
box-shadow: inset 0px 0px 0px 1px rgba(33,33,33,0.3);
transition: background 0.5s;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
text-shadow: 0 0 1px rgb(0,0,0), 0 0 1px rgb(0,0,0), 0 0 1px rgb(0,0,0), 0 0 1px rgb(0,0,0);
}

.colour-list li a:hover
{
transition: background 0.5s;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
background: rgba(0,0,0,0.5);
width: 180px;
height: 180px;
line-height: 180px;
}

.color-example
{
display: block;
margin: auto;
width: 30%;
padding-top: 30%;
border-radius: 50%;
box-shadow: inset 0 0 0 15px rgba(255,255,255,0.3);
margin-top: 20px;
}

.color-example-name
{
display: block;
margin: auto;
width: 30%;
text-align: center;
padding-bottom: 5px;
}

.color-achroma span
{
display: inline-block;
width: 19%;
padding-top: 19%;
border-radius: 50%;
float: right;
margin-top: -20px;
margin-left: 20px;
box-shadow: inset 0 0 0 20px rgb(237,237,237), inset 0 0 0 20px rgb(237,237,237), inset 0 0 0 20px rgb(237,237,237), inset 0 0 0 20px rgb(237,237,237), inset 0 0 0 20px rgb(237,237,237), inset 0 0 0 20px rgb(237,237,237);
}

.combo-analogous span, .combo-mono span, .color-example span
{
display: inline-block;
width: 19%;
padding-top: 19%;
border-radius: 50%;
box-shadow: inset 0 0 0 20px rgb(237,237,237), inset 0 0 0 20px rgb(237,237,237), inset 0 0 0 20px rgb(237,237,237), inset 0 0 0 20px rgb(237,237,237), inset 0 0 0 20px rgb(237,237,237), inset 0 0 0 20px rgb(237,237,237);
}

.combo-analogous-names, .combo-mono-names, .combo-tetradic-names
{
position: relative;
z-index: -9999;
top: -20px;
}

.combo-analogous-names span, .combo-mono-names span
{
display: inline-block;
width: 19%;
text-align: center;
padding-bottom: 5px;
}

.combo-triadic span
{
display: inline-block;
width: 33%;
padding-top: 33%;
border-radius: 50%;
margin-top: -60px;
}

.combo-triadic-names
{
top: -80px;
position: relative;
z-index: 9999;
margin-bottom: -55px;
}

.combo-triadic-names span
{
display: inline-block;
width: 33%;
text-align: center;
padding-bottom: 5px;
}

.combo-tetradic span
{
display: inline-block;
width: 24.6%;
padding-top: 24.6%;
border-radius: 50%;
margin-top: -15px;
}

.combo-tetradic-names span
{
display: inline-block;
width: 24.6%;
text-align: center;
padding-bottom: 5px;
}

.combo-complementary-names
{
top: -80px;
position: relative;
z-index: 9999;
margin-bottom: -75px;
}

.combo-complementary span
{
display: inline-block;
width: 49.6%;
padding-top: 49.6%;
border-radius: 50%;
margin-top: -95px;
}

.combo-complementary-names span
{
display: inline-block;
width: 49.6%;
text-align: center;
padding-bottom: 5px;
}

.combo-compound span
{
display: inline-block;
width: 33%;
padding-top: 33%;
border-radius: 50%;
margin-top: -60px;
}

.combo-compound-names
{
top: -80px;
position: relative;
z-index: 9999;
margin-bottom: -55px;
}

.combo-compound-names span
{
display: inline-block;
width: 33%;
text-align: center;
padding-bottom: 5px;
}

.color-variations span
{
display: inline-block;
width: 9.5%;
padding-top: 9.5%;
border-radius: 50%;
box-shadow: inset 0 0 0 10px rgba(255,255,255,0.3);
}

#tints span
{
box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);
}

meter
{
width: 100%;
height: 20px;
background: rgba(230,230,230,1);
margin-top: 15px;
margin-bottom: 5px;
}

meter::-webkit-meter-bar
{
background: rgba(230,230,230,1);
}

.red::-webkit-meter-bar
{
border-right: solid 1px hsl(10, 75%, 34%);
}

.green::-webkit-meter-bar
{
border-right: solid 1px hsl(79, 62%, 30%);
}

.blue::-webkit-meter-bar
{
border-right: solid 1px hsl(220, 59%, 26%);
}

.cyan::-webkit-meter-bar
{
border-right: solid 1px hsl(177, 79%, 39%);
}

.magenta::-webkit-meter-bar
{
border-right: solid 1px hsl(305, 62%, 59%);
}

.yellow::-webkit-meter-bar
{
border-right: solid 1px hsl(60, 100%, 50%);
}

.key::-webkit-meter-bar
{
border-right: solid 1px hsl(0, 0%, 20%);
}

.red::-webkit-meter-optimum-value
{
border-left: solid 1px hsl(10, 75%, 34%);
background: linear-gradient(to left,
hsl(10, 75%, 74%) 50%, hsl(10, 75%, 64%) 50%,
hsl(10, 75%, 64%) 80%, hsl(10, 75%, 54%) 80%,
hsl(10, 75%, 54%) 95%, hsl(10, 75%, 44%) 95%,
hsl(10, 75%, 44%));
}

.green::-webkit-meter-optimum-value
{
border-left: solid 1px hsl(79, 62%, 30%);
background: linear-gradient(to left,
hsl(79, 62%, 70%) 50%, hsl(79, 62%, 60%) 50%,
hsl(79, 62%, 60%) 80%, hsl(79, 62%, 50%) 80%,
hsl(79, 62%, 50%) 95%, hsl(79, 62%, 40%) 95%,
hsl(79, 62%, 40%));
}

.blue::-webkit-meter-optimum-value
{
border-left: solid 1px hsl(220, 59%, 26%);
background: linear-gradient(to left,
hsl(220, 59%, 66%) 50%, hsl(220, 59%, 56%) 50%,
hsl(220, 59%, 56%) 80%, hsl(220, 59%, 46%) 80%,
hsl(220, 59%, 46%) 95%, hsl(220, 59%, 36%) 95%,
hsl(220, 59%, 36%));
}

.cyan::-webkit-meter-optimum-value
{
border-left: solid 1px hsl(177, 79%, 39%);
background: linear-gradient(to left,
hsl(177, 79%, 79%) 50%, hsl(177, 79%, 69%) 50%,
hsl(177, 79%, 69%) 80%, hsl(177, 79%, 59%) 80%,
hsl(177, 79%, 59%) 95%, hsl(177, 79%, 49%) 95%,
hsl(177, 79%, 49%));
}

.magenta::-webkit-meter-optimum-value
{
border-left: solid 1px hsl(305, 62%, 59%);
background: linear-gradient(to left,
hsl(305, 62%, 79%) 50%, hsl(305, 62%, 69%) 50%,
hsl(305, 62%, 69%) 80%, hsl(305, 62%, 59%) 80%,
hsl(305, 62%, 59%) 95%, hsl(305, 62%, 49%) 95%,
hsl(305, 62%, 49%));
}

.yellow::-webkit-meter-optimum-value
{
border-left: solid 1px hsl(60, 100%, 50%);
background: linear-gradient(to left,
hsl(60, 100%, 80%) 50%, hsl(60, 100%, 70%) 50%,
hsl(60, 100%, 70%) 80%, hsl(60, 100%, 60%) 80%,
hsl(60, 100%, 60%) 95%, hsl(60, 100%, 50%) 95%,
hsl(60, 100%, 50%));
}

.key::-webkit-meter-optimum-value
{
border-left: solid 1px hsl(0, 0%, 20%);
background: linear-gradient(to left,
hsl(0, 0%, 50%) 50%, hsl(0, 0%, 40%) 50%,
hsl(0, 0%, 40%) 80%, hsl(0, 0%, 30%) 80%,
hsl(0, 0%, 30%) 95%, hsl(0, 0%, 20%) 95%,
hsl(0, 0%, 20%));
}

.red
{
border-right: solid 1px hsl(10, 75%, 34%);
}

.green
{
border-right: solid 1px hsl(79, 62%, 30%);
}

.blue
{
border-right: solid 1px hsl(220, 59%, 26%);
}

.cyan
{
border-right: solid 1px hsl(177, 79%, 39%);
}

.magenta
{
border-right: solid 1px hsl(305, 62%, 59%);
}

.yellow
{
border-right: solid 1px hsl(60, 100%, 50%);
}

.key
{
border-right: solid 1px hsl(0, 0%, 20%);
}

.red:-moz-meter-optimum::-moz-meter-bar
{
border-left: solid 1px hsl(10, 75%, 34%);
background: linear-gradient(to left,
hsl(10, 75%, 74%) 50%, hsl(10, 75%, 64%) 50%,
hsl(10, 75%, 64%) 80%, hsl(10, 75%, 54%) 80%,
hsl(10, 75%, 54%) 95%, hsl(10, 75%, 44%) 95%,
hsl(10, 75%, 44%));
}

.green:-moz-meter-optimum::-moz-meter-bar
{
border-left: solid 1px hsl(79, 62%, 30%);
background: linear-gradient(to left,
hsl(79, 62%, 70%) 50%, hsl(79, 62%, 60%) 50%,
hsl(79, 62%, 60%) 80%, hsl(79, 62%, 50%) 80%,
hsl(79, 62%, 50%) 95%, hsl(79, 62%, 40%) 95%,
hsl(79, 62%, 40%));
}

.blue:-moz-meter-optimum::-moz-meter-bar
{
border-left: solid 1px hsl(220, 59%, 26%);
background: linear-gradient(to left,
hsl(220, 59%, 66%) 50%, hsl(220, 59%, 56%) 50%,
hsl(220, 59%, 56%) 80%, hsl(220, 59%, 46%) 80%,
hsl(220, 59%, 46%) 95%, hsl(220, 59%, 36%) 95%,
hsl(220, 59%, 36%));
}

.cyan:-moz-meter-optimum::-moz-meter-bar
{
border-left: solid 1px hsl(177, 79%, 39%);
background: linear-gradient(to left,
hsl(177, 79%, 79%) 50%, hsl(177, 79%, 69%) 50%,
hsl(177, 79%, 69%) 80%, hsl(177, 79%, 59%) 80%,
hsl(177, 79%, 59%) 95%, hsl(177, 79%, 49%) 95%,
hsl(177, 79%, 49%));
}

.magenta:-moz-meter-optimum::-moz-meter-bar
{
border-left: solid 1px hsl(305, 62%, 59%);
background: linear-gradient(to left,
hsl(305, 62%, 79%) 50%, hsl(305, 62%, 69%) 50%,
hsl(305, 62%, 69%) 80%, hsl(305, 62%, 59%) 80%,
hsl(305, 62%, 59%) 95%, hsl(305, 62%, 49%) 95%,
hsl(305, 62%, 49%));
}

.yellow:-moz-meter-optimum::-moz-meter-bar
{
border-left: solid 1px hsl(60, 100%, 50%);
background: linear-gradient(to left,
hsl(60, 100%, 80%) 50%, hsl(60, 100%, 70%) 50%,
hsl(60, 100%, 70%) 80%, hsl(60, 100%, 60%) 80%,
hsl(60, 100%, 60%) 95%, hsl(60, 100%, 50%) 95%,
hsl(60, 100%, 50%));
}

.key:-moz-meter-optimum::-moz-meter-bar
{
border-left: solid 1px hsl(0, 0%, 20%);
background: linear-gradient(to left,
hsl(0, 0%, 50%) 50%, hsl(0, 0%, 40%) 50%,
hsl(0, 0%, 40%) 80%, hsl(0, 0%, 30%) 80%,
hsl(0, 0%, 30%) 95%, hsl(0, 0%, 20%) 95%,
hsl(0, 0%, 20%));
}

@media (max-width: 1200px)
{

meter
{
width: 100%;
height: 60px;
background: rgba(230,230,230,1);
margin-top: 50px;
}

.color-example
{
display: block;
margin: auto;
width: 100%;
padding-top: 30%;
border-radius: 0%;
box-shadow: inset 0 0 0 15px rgba(255,255,255,0.3);
margin-top: 20px;
}

.color-example-name
{
display: block;
margin: auto;
width: 100%;
text-align: center;
padding-bottom: 5px;
}

.color-achroma span
{
width: 29%;
padding-top: 29%;
box-shadow: inset 0 0 0 27px rgb(237,237,237), inset 0 0 0 27px rgb(237,237,237), inset 0 0 0 27px rgb(237,237,237), inset 0 0 0 27px rgb(237,237,237), inset 0 0 0 27px rgb(237,237,237), inset 0 0 0 27px rgb(237,237,237);
}

.combo-analogous span, .combo-mono span, .color-example span
{
display: inline-block;
width: 18.8%;
padding-top: 18.8%;
border-radius: 0%;
box-shadow: none;
}

.combo-analogous-names, .combo-mono-names, .combo-tetradic-names
{
font-size: 200%;
}

.combo-analogous-names span, .combo-mono-names span
{
width: 18.7%;
}

.combo-triadic span
{
width: 32%;
padding-top: 32%;
}

.combo-triadic-names
{
font-size: 200%;
}

.combo-triadic-names span
{
width: 32%;
}

.combo-tetradic span
{
width: 23.6%;
padding-top: 23.6%;
}

.combo-tetradic-names span
{
margin-top: -30px;
width: 23.6%;
}

.combo-complementary-names
{
margin-top: -50px;
font-size: 200%;
}

.combo-complementary span
{
width: 49%;
padding-top: 49%;
}

.combo-complementary-names span
{
width: 49%;
}

.combo-compound span
{
display: inline-block;
width: 32%;
padding-top: 32%;
border-radius: 50%;
margin-top: -60px;
}

.combo-compound-names
{
font-size: 200%;
}

.combo-compound-names span
{
width: 32%;
}

.color-variations span
{
display: inline-block;
width: 18.5%;
padding-top: 18.5%;
border-radius: 100%;
box-shadow: inset 0 0 0 20px rgba(255,255,255,0.3);
}

#tints span
{
box-shadow: inset 0 0 0 20px rgba(0,0,0,0.2);
}

}

/*Artiom is leaving the building*/

/* MODAL */

/* The Overlay (background) */
.overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #222;
    overflow-y: hidden;
    transition: 0.5s;
    font-weight: normal;
}
.overlay-content ul li{
  display: inline-block;
  width: 20%;
  padding: 20px;
}
.desktops{
  color: #FFC107;
  font-size: 20px !important;
  font-weight: lighter;
}
.overlay a:hover{
  color: #999;
}
.fa-meetup{
  font-size: 20px !important;
  color: #ff0057;
}
.line-charts{
  color: #00bcd4;
  font-size: 20px !important;
}
.share-alts{
  color: #4CAF50;
  font-size: 20px !important;
}
.fa-envelope{
  font-size: 20px !important;
  color: #e5e5e5;
}
.spinners{
  font-size: 20px !important;
  color: #2b58fc;
}
.charts{
  font-size: 20px !important;
  color: #5564ba;
}
.objects{
  font-size: 20px !important;
  color: #F44336;
}
.windows{
  font-size: 20px !important;
  color: #607D8B;
}
.laptops{
  font-size: 20px !important;
  color: #c0e740;
}
.servers{
  font-size: 20px !important;
  color: #bd3fca;
}
.hands{
  font-size: 20px !important;
  color: #23ba5f;
}
.html5s{
  font-size: 20px !important;
  color: #0093d0;
}
.fa-globe{
  font-size: 20px !important;
  color: #e5e5e5;
}
.twitters{
  color: #e5e5e5;
}
.fa-youtube{
  color: #e5e5e5;
}
.fa-google-plus{
  color: #e5e5e5;
}
.fa-instagram{
  color: #e5e5e5;
}
.overlay-content {
    top: 50px;
    text-align: center;
    margin: 20px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}
#mobile-contact{
  display: inline-block;
  color: #e5e5e5;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 12px;
    color: #f1f1f1;
    display: block;
    transition: 0.3s;
    cursor: pointer;
}

.overlay a:hover{

}

.overlay .closebtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 30px !important;
    color: #fff;
    z-index: 999;
}
/*
.copy a{
  border-bottom: 2px solid #e5e5e5 !important;
}
*/
.copy a:hover{
  border-bottom: 2px solid #ffffff !important;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay .closebtn {

  }
}

/* BOOTSTRAP TEST */

.col-md-3 img{
  width: 250px;
}
.col-md-4 img{
  width: 250px;
}
.col-md-6 img{
  width: 250px;
}
.col-lg-5 img{
  width: 250px;
}
.col-lg-4 img{
  width: 250px;
}
.col-lg-6 img{
  width: 250px;
}
.col-md-5, .col-md-4, .col-lg-7 h2{
  margin: 0;
}
.col-md-6 a{
  border: 1px solid #2A2222;
  padding: 10px;
}
.col-lg-7 a{
  border-left: 1px solid #2A2222;
  padding: 10px;
}
.col-lg-7 a:hover{
  border: 1px solid #2A2222;
  padding: 10px;
  background-color: #efefef;
}
.col-lg-8 a{
  border: 1px solid #2A2222;
  padding: 10px;
}
.icons .fa{
  color: #e5e5e5;
}
.socialicons .fa{
  font-size: 30px;
}


/* FORM */

textarea, select, input{
  padding: 10px 10px;
  width: 100%;
  box-sizing: border-box;
}
input[type='checkbox'] {
  width: auto;
  padding: 0;
  transform: scale(1.5);
  margin: 20px 10px;
}
.form-terms{
  color: #444;
  display: inline-block;
}
.form-control{
  margin-bottom: 30px;
}
.btn-success{
  margin: 20px 0;
  color: #fff;
  border-radius: 0px !important;
  padding: 20px 60px;
  background-color: #1E8449;
  border: none;
}
.btn-success:hover{
  background-color: #1c7743;
}
#form1{
  width: 500px;
  padding: 0 10px;
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: #fafbfb;
  margin: 0 auto;
  margin-top: 50px;
}
#form1 p{
  padding: 10px 0;
}

#form2{
  width: 500px;
  margin: 0 auto;
  padding: 0 10px;
}
.form-style-8 h1::first-letter{
  color: #e5e5e5;
  font-size: 18px;
}

/* SIDE CONTACT */

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #fff; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */

.sidenav a:hover{
  color: #fff !important;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {

}
.row ul{
  padding: 3px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
/* MAIN PAGE ARTICLE */
.main-article{
  margin-top: 100px;
}
.main-article h1{
  margin: 50px 0;
}
.three-col p{
  border-top: 1px solid #555;
  padding-top: 20px;
}
.main-article .three-col{
  max-width: 33%;
  float: right;
  padding: 20px;
  box-sizing: border-box;
}
.main-article .two-col{
  max-width: 50%;
  float: right;
  padding: 20px;
  box-sizing: border-box;
}
.main-article h2,h3{
  color: #2A2222;
  display: inline-block;
}
.main-article h3{
  vertical-align: super;
}
.main-article .fa{
  color: #3b3968;
  font-size: 32px !important;
  padding-right: 10px;
}
.main-article h1{
  text-align: center;
  color: #2A2222;
  position: relative;
  margin: 50px 0;
}
.main-article h1::before, h1::after {
    display: block;
    height: 2px;
    content: " ";
    width: 25%;
    position: absolute;
    top: 0.53em;
	  z-index: 0;
}
.main-article h1::before {
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(12,13,43,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
    left: 0;
}

.main-article h1::after {
	background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(12,13,43,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
   	right: 0;
   	left: auto;
}
@media all and (max-width: 9000px) and (min-width: 767px){
  .mob-languages li, .socialicons li{
    padding: 20px 0 !important;
  }
  .overlay-content{
    width: 80%;
    top: 45%;
  }
  .overlay-content ul li{
    padding: 5px;
  }
}
@media all and (max-width: 882px) and (min-width: 0px){
  .main-article h2, h3{
    display: block;
  }
}
@media all and (max-width: 767px) and (min-width: 0px){
  .listed-web-example-table td{
    width: auto !important;
    display: block;
  }
  .listed-web-example-table img{
    height: auto;
  }
  .main-article .three-col, .main-article .two-col{
    max-width: 100%;
    float: none;
  }
  .main-article h1::before, h1::after {
      width: 10%;
  }
.overlay-content ul li{
  width: auto;
}
.form-style-8{
  width: auto !important;
}
}
.three-col-wrapper{
  clear: both;
  overflow: hidden;
}
.three-col-wrapper h1{
  font-size: 18px !important;
  text-align: left;
  display: inline-block;
  margin: 0;
}
.three-col-wrapper h1::before, .three-col-wrapper h1::after{
  content: none;
}
.two-col-wrapper{
  margin: 50px 0;
  display: none;
}
.fa-lg-3-icons{
  padding: 20px 10px;
}
footer{
  clear: both;
  background-color: #222;
  color: #e5e5e5;
  padding: 30px 0;
  margin-top: 80px;
}
.copy{
  padding: 50px 10px;
}
footer a{
  color: #e5e5e5;
}
.contact a, .lastnav a, .copy a{
  color: #e5e5e5;
}
.contact a:hover, .lastnav a:hover, .copy a:hover{

}
.contact a::before, .lastnav a::before{
  content: "»";
  color: #0093d0;
  padding-right: 2px;
  margin-right: 10px;
  font-size: 20px;
}
.contact-wrapper{
  position: relative !important;
}
.three-col-wrapper .h1-align-center{
  text-align: center !important;
  display: block !important;
  padding: 20px 0;
  margin: 50px 0;
  font-size: 24px !important;
}
.closesidenavbtn{
  position: absolute;
  top: 14px;
  right: 0;
  margin: 0;
  padding: 0;
  color: #e5e5e5;
  font-size: 30px;
}
/* NEW FORM */
.form-style-8{
    font-family: 'Open Sans Condensed', arial, sans;
    max-width: 500px;
    padding: 30px;
    background: #FFFFFF;
    margin: 50px auto;
}
.form-style-8 h1{
    background: #4D4D4D;
    text-transform: uppercase;
    font-family: 'Open Sans Condensed', sans-serif;
    color: #e5e5e5;
    font-size: 18px;
    font-weight: 100;
    padding: 20px;
    margin: -30px -30px 30px -30px;
}
.form-style-8 input[type="text"],
.form-style-8 input[type="date"],
.form-style-8 input[type="datetime"],
.form-style-8 input[type="email"],
.form-style-8 input[type="number"],
.form-style-8 input[type="search"],
.form-style-8 input[type="time"],
.form-style-8 input[type="url"],
.form-style-8 input[type="password"],
.form-style-8 textarea,
.form-style-8 select
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    display: block;
    width: 100%;
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    margin-bottom: 10px;
    font: 16px Arial, Helvetica, sans-serif;
    height: 45px;
}
.form-style-8 textarea{
    resize:none;
    overflow: hidden;
    height: 100px;
}
.form-style-8 input[type="button"],
.form-style-8 input[type="submit"]{
    -moz-box-shadow: inset 0px 1px 0px 0px #0093d0;
    -webkit-box-shadow: inset 0px 1px 0px 0px #0093d0;
    box-shadow: inset 0px 1px 0px 0px #0093d0;
    background-color: #0093d0;
    border: 1px solid #27A0A0;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 14px;
    padding: 20px 40px;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-appearance: none;
}
.form-style-8 input[type="button"]:hover,
.form-style-8 input[type="submit"]:hover {
    background-color:#0a9ad6;
}
.webdev, .market, .visu, .moremenu, .getsite, .eng, .rus, .lat{
  transition: all .2s ease-in-out;
}
.webdev:hover, .market:hover, .visu:hover, .moremenu:hover, .getsite:hover, .eng:hover, .rus:hover, .lat:hover{
  transform: scale(1.1);
}
/*
header{
  height: 450px;
}
aside.tools a.getsite{
  top: 400px;
}
*/