/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html

-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

  background: transparent;

  border: 0;

  margin: 0;

  padding: 0;

  vertical-align: baseline; }



body {

  line-height: 1; }



h1, h2, h3, h4, h5, h6 {

  clear: both;

  font-weight: normal; }



ol, ul {

  list-style: none; }



blockquote {

  quotes: none; }



blockquote:before, blockquote:after {

  content: '';

  content: none; }



del {

  text-decoration: line-through; }



/* tables still need 'cellspacing="0"' in the markup */

table {

  border-collapse: collapse;

  border-spacing: 0; }



a img {

  border: none; }



/* =Scss Variables

-------------------------------------------------------------- */

/* =Global

-------------------------------------------------------------- */

*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box; }



body {

  background-color:#fff;

  color: #505050;

  font-family: 'Varela Round', sans-serif;

  font-weight: 300;

  font-size: 16px;

  line-height: 1.8;
 

  background-image:url(../img/images.png)

}



/* Headings 

h1, h2, h3, h4, h5, h6 {

  line-height: 1;

  font-weight: 300; }

*/

a {

  text-decoration: none;

  color: #3cb5f9; }



a:hover {

  color: #366f16; }



/* =Template

-------------------------------------------------------------- */

#wrapper {

  width: 100%;

  margin: 0 auto; }



#main {

  xbackground-color: #fff;

  xpadding-top: 140px; }



.container {

  width: 80%;

  margin: 0 auto;

 xpadding-top:50px;

  }

 .container img:hover{

    opacity: 0.9;

    filter: alpha(opacity=90); /* For IE8 and earlier */



} 



section {

  padding: 0px 0; }

  section h1 {

    font-weight:bold;

    margin-bottom: 10px; 

	padding-top: 20px;

	font-size:10pt;

	line-height:15px;

	}

  section p {

    margin-bottom: 30px; }

    section p:last-child {

      margin-bottom: 0; }

  section.color {

    background-color: #111;
	Xbackground-image:url(../img/images2.png);
    HEIGHT:230PX;
    color: #333; }
	section.color_3 {

    background-color: #111;
	xbackground-image:url(../img/images2.png);
    HEIGHT:550PX;
    color: #333; }

.color_2 {

    background-color: #FFF;
	Xbackground-image:url(../94607145c1e2a7a382a882aa5592835a.jpg);

	

    color: #333; }

/* =Info Bar #ffffe6

-------------------------------------------------------------- */

#info-bar {

  background-color: #000000; }

  #info-bar a {

    color: white;

    font-size: 14px;

    text-transform: uppercase;

    display: inline-block;

    margin: 0;

    padding: 10px; }

    #info-bar a:hover {

      background-color: #0793e2; }

  #info-bar span.all-tutorials,

  #info-bar span.back-to-tutorial {

    display: block;

    width: 50%; }

  #info-bar span.all-tutorials {

    float: left;

    text-align: left; }

  #info-bar span.back-to-tutorial {

    float: right;

    text-align: right; }



/* =Header

-------------------------------------------------------------- */

header {

  width: 100%;

  height: 58px;

  overflow: hidden;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 999;

  background-color:#fff;/*rgba(102,0,153,1)*/

  -webkit-transition: height 0.3s;

  -moz-transition: height 0.3s;

  -ms-transition: height 0.3s;

  -o-transition: height 0.3s;

  transition: height 0.3s; 

  xpadding-top:20px;

  line-height: 50px;
  box-shadow:1px 2px 3px #ddd;

 }

  header h1#logo{

    display: inline-block;

    height: 100px;

    line-height: 150px;

    float: left;

    font-family: 'Varela Round', sans-serif;

    font-size: 40px;

    color:#Fff;

    font-weight: 400;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s; 

	width:200px;

	background-image:url(../img/logo.jpg);

	background-repeat:no-repeat;

	text-indent:-1000px;

	

  }

	

  header nav {

    display: inline-block;

    float: right; 

	padding-right:30px;
	border-left:1px solid #ddd;
	
height: 60px;

	}

    header nav a {

      line-height: 30px;

      padding-left: 15px;
	  padding-right:14px;
	  padding-bottom:20px;
	  padding-top:20px;
      xborder-left:1px solid #ddd;
      border-right:1px solid #ddd;
      color: #000;

	  xtext-shadow: 1px 1px #000000;

      xfont-weight: bold;

      font-size: 13px;

      -webkit-transition: all 0.3s;

      -moz-transition: all 0.3s;

      -ms-transition: all 0.3s;

      -o-transition: all 0.3s;

      transition: all 0.3s; }

      header nav a:hover {

        color: #666; 

		border-bottom: 3px solid #ddd;

		xpadding-bottom:3px;

		}

  header.smaller {

    height: 60px;

	 background-color:rgba(255,255,255,1);

	 box-shadow: 0px 2px 3px #888888;

	  xpadding-bottom:10px;

	 }

    header.smaller h1#logo{

      width: 150px;

      height: 100px;

      line-height: 100px;

      font-size: 30px; 

	  xpadding-top:5px;

	  background-image:url(../img/logo_2.png);

	background-repeat:no-repeat;

	text-indent:-1000px;

	  

	  }

    header.smaller nav a {

       line-height: 5px;	

	

	  }





/* =Footer

-------------------------------------------------------------- */

/* =Extras

-------------------------------------------------------------- */

.clearfix:after {

  visibility: hidden;

  display: block;

  content: "";

  clear: both;

  height: 0; }



/* =Media Queries

-------------------------------------------------------------- */

@media all and (max-width: 660px) {

  /* =Header

  -------------------------------------------------------------- */

  header h1#logo {

    display: block;

    float: none;

    margin: 0 auto;

    height: 100px;

    line-height: 100px;

    text-align: center; }

  header nav {

    display: block;

    float: none;

    height: 50px;

    xtext-align: center;

    xmargin: 0 xauto; }

    header nav a {

      line-height: 50px;

      margin: 0 10px; }

  header.smaller {

    height: 150px; 

	      

	}

    header.smaller h1#logo {

      height: 40px;

      line-height: 40px;

      font-size: 30px; }

    header.smaller nav {

      height: 20px; }

      header.smaller nav a {

        line-height: 35px; } }

@media all and (max-width: 600px) {

  .container {

    width: 100%;

	xpadding-top:20px;

	 }



  #info-bar a {

    display: block; }

  #info-bar span.all-tutorials,

  #info-bar span.back-to-tutorial {

    width: 100%; }

  #info-bar span.all-tutorials,

  #info-bar span.back-to-tutorial {

    float: none;

    text-align: center; }

  #info-bar span.all-tutorials {

    border-bottom: solid 1px #0793e2; } }

/*	

--------------------------------------------------------------

links

*/



.active{

	color:#000;

	border-bottom:3px solid #3ea9cb;
background-color:#eee;
	padding-bottom:20px;
	padding-top:20px;

}

.order{

	background-color:#0a3700;

	color:#FFF;

	padding:10px;

	font-weight:bold;

	

}

a.order:hover{

	color:#fff;

}

/*	

--------------------------------------------------------------

blocks

*/

#block_1{

	display:inline-block;

	width:340px;

	xborder:1px solid #cccccc;

	background:transparent;

	margin:5px;

	xpadding:5px;

	xpadding-top:10px;

	text-align:left;

	float:left;

	xbox-shadow: 1px 1px 1.5px #888888;

	padding-bottom:20px;

	 height:170px;

	 overflow:hidden;

	

	

}

#block_1_1{

	display:inline-block;

	width:640px;

	border-left:1px solid #333;
	padding-left:12px;

	background:transparent;

	margin:5px;

	xpadding:5px;

	xpadding-top:10px;

	text-align:justify;

	float:left;

color:#eee;
	xbox-shadow: 1px 1px 1.5px #888888;
	

	padding-bottom:20px;

	 xheight:170px;

	 xoverflow:hidden;

	

	

}
x#block_1 h1{

	font-size:12pt;

}

block_1 img{

	width:100%;

	position:relative;

}

h1.desc{

	position:relative;

	bottom:100px;

	right:0px;

	font-size:10pt;
	color:#fff;

	

}

h1.desc_2{

	position:relative;

	bottom:100px;

	right:0px;

	font-size:10pt;

	

	

}

span.kongo{

	display:block;

	background:#111;
	opacity:.7;

	

	height:70px;

	width:100px;

	padding-left:15px;

	xline-height:60px;

	text-transform:uppercase;

}

span.kongo_2{

	width:320px;

	 display:block;

	background:#111;
	opacity:.7;

	color:#fff;

	height:100px;

	width:118px;

	

	text-transform:uppercase;

}	

span.kongo_3{

	width:320px;line-hieght:10px; display:block;

	background:#111;
	opacity:.7;

	color:#fff;

	height:100px;

	width:100px;

	padding-left:15px;

	text-transform:uppercase;

	

}	

span.kongo_4{

	width:320px;display:block;

	background:#111;
	opacity:.7;


	color:#fff;

	height:100px;

	width:100px;

	padding-left:15px;

	

	text-transform:uppercase;

	

}	



#block_1 h2{

	color:#390;

	xborder-bottom:5px solid #ccc;

	xwidth:50px;

	padding:5px;

	margin-left:5px;

}

#block_3 h2{

	color:#390;

	xborder-bottom:5px solid #ccc;

	xwidth:50px;

	padding:5px;

	margin-left:5px;

}

#block_1{

	color:#333;

}

#block_2 h2{

	color:#60F;

}

#block_1 span{

	font-size:10pt;

	padding:10px;

}

#block_3 span{

	font-size:10pt;

	padding:10px;

}

#block_2{

	display:inline-block;

	width:340px;

	border:1px solid #ddd;

	xbackground:#fff;

	margin:5px;

	margin-right:30px;

	xpadding:5px;

	xpadding-top:10px;

	

	float:right;

	xbox-shadow: 1px 1px 1.5px #888888;

	xpadding-bottom:20px;

	height:350px;

	overflow:hidden;

	

	

}

#block_3{

	display:inline-block;

	width:1045px;

	xborder:1px solid #cccccc;

	background:#fff;
	

	margin:5px;

	margin-top:30px;

	margin-bottom:15px;

	xpadding:5px;

	xpadding-top:10px;

	text-align:justify;

	Xfloat:left;

	Xbox-shadow: 1px 1px 1.5px #888888;

	padding-bottom:20px;

	height:350px;

	

}

#block_33{

	display:inline-block;

	width:1045px;

	xborder:1px solid #cccccc;

	xbackground:#fff;
	

	margin:5px;

	margin-top:30px;

	margin-bottom:15px;

	xpadding:5px;

	xpadding-top:10px;

	text-align:justify;

	Xfloat:left;

	Xbox-shadow: 1px 1px 1.5px #888888;

	padding-bottom:20px;

	height:150px;

	

}
#block_333{

	display:inline-block;

	width:1045px;

	xborder:1px solid #cccccc;

	xbackground:#fff;
	

	margin:5px;

	margin-top:30px;

	margin-bottom:15px;

	xpadding:5px;

	xpadding-top:10px;

	text-align:justify;

	Xfloat:left;

	Xbox-shadow: 1px 1px 1.5px #888888;

	padding-bottom:20px;

	height:70px;

	

}
x#block_4{

	display:inline-block;

	width:340px;

	xborder:1px solid #cccccc;

	background:#fff;

	margin:5px;

	xpadding:5px;

	xpadding-top:10px;

	text-align:justify;

	float:left;

	xbox-shadow: 2px 2px 3px #eeeeee;

	xpadding-bottom:20px;

	

	

}

.matryoshka{

	xbackground-image:url(../img/thumb.jpg);

	xbackground-repeat:no-repeat;

	xpadding-top:-400px;



	

}

.pub h3{

		font-weight:bold;

}

.pub li{

	display:block;

	padding-top:3px;

	padding-bottom:4px;

	xpadding-left:15px;

	border-bottom:1px dotted #ccc;

	margin-left:10px;

	width:315px;

	color:#333;



}

.news{

	

	margin-top:15px;

	margin-bottom:15px;

	border-bottom:1px solid #333;

	width:100%;

	

}

.pub a{

	color:#333;

}

.pub li:hover{

	background-color:#eee;

	border-bottom:1px dotted #eee;

}