/*
	Theme Name: HTML5 Blank
	Theme URI: http://html5blank.com
	Description: HTML5 Blank WordPress Theme
	Version: 1.4.3
	Author: Todd Motto (@toddmotto)
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font:300 11px/1.4 'Neucha', Helvetica, Arial, sans-serif;
	color:#444;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
	clear:both;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:#444;
	text-decoration:none;
}

a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrap{
		width: 1200px;
		height: auto;
		margin: 0 auto;

	}
/* header */
.header {
	width: 100%;
	height: auto;
	background-image: url("images/pattern-hands.jpg");
	position: relative;
	overflow: hidden;
}


/* logo */
#logo {
	float: left;
	padding: 46px 0px;
	height: auto;
}
#logo img{
	width: 280px;
	height: auto;
}

.logo-title{
	font-size: 20px;
	padding: 15px;
	letter-spacing: 2px;
}

#contact-up{
    float: right;
    padding: 20px 0px;
    width: 20%;
    height: auto;
    font-size: 15px;
    letter-spacing: 2px;
}
	.contact-up-info{
		padding: 5px;
		text-align: center;
	}
	.search-form{
		text-align: center;
	}

	.contact-btns{
		padding: 5px;
		width: 100%;
		height: auto;
		text-align: center;

	}

	.contact-btns a div {
	    display: inline-block;
	    border-radius: 40px;
	    width: 40px;
	    height: 40px;
	    margin: 0px;
	    background-image: url(images/icons/social-icons.png);
	    background-size: 160px 40px;
	    background-repeat: no-repeat;
	    transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	    -webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	}

	.contact-btns a div:hover{
		transform: scale(0.9);
		-webkit-transform: scale(0.9);
	}

	.contact-btns a div#tw-icon{
		background-position: -40px 0;
	}

	.contact-btns a div#gp-icon{
		background-position: -80px 0;
	}

	.contact-btns a div#ma-icon{
		background-position: -120px 0;
	}


#the-wormy-box{
	width: 70px;
	height: 70px;

	position: absolute;
    bottom: -75px;


	/*
	transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);

	transition-delay: 1s;
	-webkit-transition-delay: 1s;
	*/

	z-index: 1;

}

/*
#the-wormy-box.pop-in{
	bottom: 33px;
	transform: scale(1, 1);
}
*/

#the-wormy {
    height: 100%;
    width: 100%;

    background-image: url('images/the-wormy.png');

    position: relative;
}





#fb-popup {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;

    display: none;
    top: 0;
}

#fb-popup.user-liked-already{
	display: none !important;
}

.fb-popup-bg{
    background: url('images/dark-blackboard.jpg');
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

.fb-popup-center {
    width: 300px;
    height: 100%;
    z-index: 2;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    display: table;
}

.fb-popup-center-wrap{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.fb-popup-title {
    color: white;
    font-size: 24px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    padding: 10px;
    text-align: center;
}

.fb-page {
    border: 6px solid white;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

a#fb-popup-close {
    font-size: 24px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}




main{
	position: relative;
	z-index: 2;
	background: white;
}

#main-nav{
    background: rgb(216, 213, 202);
    position: relative;
    z-index: 3;
    height: 46px;
}

nav{
	width: 100%;
	height: auto;
}

nav ul {
	margin: 0;
	padding: 0;
    height: 100%;
}

nav ul li{
    display: block;
    float: left;
    position: relative;
}

nav ul li a {
    display: inline-block;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-align: center;
    letter-spacing: 2px;

    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

nav ul li a {
    padding: 8px 13.5px;
    padding-top: 14px;
}

li{
	position: relative;
}
nav ul li:hover ul{

	max-height: 25em;
	transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);

}
ul.sub-menu{
	position: absolute;
	top: 45px;
	background: #8c8c8c;
	border-top: 1px solid rgba(101, 101, 101, 0.2);
	box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.1);
	width: 100%;
	height: auto;
	max-height: 0;
	transform: rotateX(90deg);
	-webkit-transform: rotateX(90deg);
	list-style-type: none;
	transition: max-height .4s cubic-bezier(0.64, 0.57, 0.67, 1.53);
	-wekbkit-transition: max-height .4s cubic-bezier(0.64, 0.57, 0.67, 1.53);
	z-index: 9999;
	overflow: hidden;
}

ul.sub-menu li{
	float: none;
	display: block;
	width: auto;
	text-align: left;
}

ul.sub-menu li a{
	text-align: left;
	padding: 5px 15.8px;
    padding-top: 11px;
	color: white;
	text-decoration: none;
	font-size: 15px;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
ul.sub-menu li a:hover{
	color: #92cb30;
	background: gray;
}


.title{
	padding: 5px;
	color: #92cb30;
	font-size: 24px;
	font-weight: bold;
}

.subtitle a{
	color: #111;
	text-decoration: none;
}


nav > ul > li:hover > a {
    background: rgba(0, 0, 0, 0.3);
}



.wrapper{
	position: relative;
}

.full-page-wrapper{
	position: relative;
	width: 100%;
	height: auto;
	right: 0%;
	/*
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
	*/
}

.mobile-menu-active{
	overflow: hidden;
}




input.search-input {
    padding: 3px 8px;
	padding-left: 3px;
    width: 156px;
	height: 20px;
    float: left;
    margin-left: 14px;
	border: 1px solid #bfbfbf;
}

input.search-input:focus{
	width: 148px;
	padding-left: 8px;
	border: 1px solid #789c38;
	transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}

button.search-submit {
	background: #8ece1e;
    color: white;
    width: 30px;
    height: 28px;
    border: 1px solid #789c38;
    border-left: 0;
    position: relative;
    float: left;
}

#the-mobile-menu {
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);

	position: fixed;
    height: 100%;
    width: 100%;
    background: url('images/dark-blackboard.jpg');
	padding: 0;
    z-index: 50;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);

}

.mob-menu-row {
    margin-bottom: 5px;
}

#mobile-search {
    margin: 0px 14px;
    height: 40px;
    position: relative;
        margin-bottom: 15px;
}

#mobile-search input[type="search"]{
	background: none;
    border: 2px solid white;
    color: white;
	border-radius: 0px;
    padding: 16px;
    padding-top: 20px;
    margin: 0;
    font-size: 16px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


#mobile-search button.search-submit {
    background: #8ece1e;
    color: white;
    width: 40px;
    height: 40px;
    border: 2px solid #ffffff;
    position: absolute;
    float: left;
    right: 0;
}


.mobile-menu-active #the-mobile-menu{
    transform: translate3d(0%, 0, 0);
    -webkit-transform: translate3d(0%, 0, 0);
    overflow: scroll;
}


.the-mobile-menu.active{
	display: block;
	transform: translateX(0%);
	opacity: 1;
}


#the-mobile-menu ul li,
#the-mobile-menu ul li a{
	width: 100%;
	display: inline-block;
    text-align: center;
    float: none;
    border-bottom: 0;
}

#the-mobile-menu ul li .sub-menu{
    position: relative;
    top: 0;
    float: left;
    border: 0;
    box-shadow: inset 0px -25px 15px -25px rgba(0, 0, 0, 0.36);
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    max-height: 100%;
}

#the-mobile-menu ul.sub-menu li{
	float: left;
	text-align: center;
}

#the-mobile-menu ul.sub-menu li a{
	font-size: 12px;
	text-align: center;
}


#ham-menu{
	display: none;
	width: 54px;
	height: 54px;
	text-align: center;
	background: #8ece1e;
	position: absolute;
	top: 15px;
	right: 15px;

	z-index: 10;

    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
}

#ham-menu:hover{
	background: #52790e;
}

#ham-menu div{
    width: 32px;
    height: 3px;
    background: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 18px;

    border-radius: 5px;

    transition: all .1s ease-out;
    -webkit-transition: all .1s ease-out;
}

#ham-menu:hover div{
	width: 28px;
}

#ham-menu div:nth-child(2){
	top: 27px;
}

#ham-menu div:nth-child(3){
	top: 36px;
}




#ham-close-menu{
	width: 40px;
    height: 40px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 30;
    margin: 14px;
    margin-top: 15px;
    font-size: 24px;
    line-height: 40px;
    border: 2px solid rgb(255, 255, 255);
    float: right;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
}

#fb-menu{
	width: 40px;
    height: 40px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 30;
    margin: 14px;
    margin-top: 15px;
    font-size: 14px;
    line-height: 40px;
    border: 2px solid rgb(255, 255, 255);
    float: left;
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
}







/* THE SOLAR SYSTEM */


#the-solar-system{
	position: absolute;
    background: rgb(7, 15, 36);
    height: 100%;
    top: -100%;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 15;

}

#the-solar-system *{
	opacity: 1;
}


div#the-stars-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.the-stars{
	position: absolute;
	top:0; left:0;
	width: 100%; height: 100%;
	background-size: cover;
    pointer-events: none;
}

.stars-1{ background-image: url('images/solar-system/stars-1.png'); }
.stars-2{ background-image: url('images/solar-system/stars-2.png'); }
.stars-3{ background-image: url('images/solar-system/stars-3.png'); }
.stars-4{ background-image: url('images/solar-system/stars-4.png'); }


#the-solar-system .white-overlay{
	position: absolute;
	bottom: 0; left:0;
	width: 100%;
	height: 25%;
	opacity: 0.2;
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

	pointer-events: none;
	z-index: 1;

}


div#the-planets-scene {
	width: 40vw;
    height: 30vw;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    z-index: 15;
}

#the-planets-scene .layer{
	position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;


}

#the-planets-scene .layer img{
	transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}


#the-planets-scene .layer:hover img{
	transform: scale(1.1);
}

#the-sun{
    width: 12vw;
    height: 12vw;
}

div#pl-mercury {
	width: 2.5vw;
    height: 2.5vw;
	right: 39% !important;
    bottom: -27% !important;
}

div#pl-venus {
    width: 4vw;
    height: 4vw;
	right: 50% !important;
    bottom: 29% !important;
}

div#pl-earth {
	width: 5.5vw;
    height: 5.5vw;
    right: -52% !important;
    bottom: -52% !important;
}

div#pl-earth-moon {
	width: 2vw;
    height: 2vw;
    right: -74% !important;
    bottom: -34% !important;
}

#pl-earth #cloud-scene{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#pl-earth #cloud-scene div{
	width: 55%;
    height: 28%;
    position: relative;
    background-image: url(images/solar-system/planets/the-clouds.png);
    background-size: 100%;

    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;

}

#pl-earth #cloud-scene div:nth-child(1){
    top: 6%;
    left: -3%;
}

#pl-earth #cloud-scene div:nth-child(2){
    top: 17%;
    left: 61%;
	background-position: 0% 50%;
	transition-delay: .04s;
}

#pl-earth #cloud-scene div:nth-child(3){
	top: 3%;
    left: -1%;
	background-position: 0% 100%;
	transition-delay: .06s;
}

#pl-earth:hover #cloud-scene div:nth-child(1){
	left: -33%;
	transform: scale(0.9);
}

#pl-earth:hover #cloud-scene div:nth-child(2){
    left: 87%;
	transform: scale(0.9);
}

#pl-earth:hover #cloud-scene div:nth-child(3){
	left: -22%;
	transform: scale(0.9);
}



div#pl-mars {
    width: 5vw;
    height: 5vw;
	right: -35% !important;
    bottom: 65% !important;
}

div#pl-jupiter {
    width: 7.5vw;
    height: 7.5vw;
    bottom: 109% !important;
    right: 16% !important;
}

div#pl-saturn {
    width: 12vw;
    height: 8vw;
	bottom: 21% !important;
    right: -127% !important;
}

div#pl-uranus {
    width: 5vw;
    height: 5vw;
	right: 92% !important;
    bottom: -53% !important;
}

div#pl-neptune {
    width: 4.7vw;
    height: 4.7vw;
    right: 5% !important;
    bottom: -117% !important;
}

div#pl-pluto {
    width: 1.5vw;
    height: 1.5vw;
    bottom: -112% !important;
    right: 120% !important;
}



.moon-landing {
    position: absolute;
    bottom: 2%;
    right: 2%;
    width: 3vw;
    height: 3vw;
    background-image: url(images/solar-system/planets/asteroid.png);
    z-index: 15;
    font-size: 34px;
    line-height: 61px;
    background-size: 100%;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
    -webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}

.moon-landing span {
    position: absolute;
    top: -45px;
    font-size: 16px;
    line-height: 14px;
    left: 2px;

    transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
    -webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}

.moon-landing:hover span{
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
}

.moon-landing:hover{

	bottom: 1%;

	transform: rotateZ(5deg);
	-webkit-transform: rotateZ(5deg);
}









/* END OF THE SOLAR SYSTEM */









#crafts .section-title{
	background: #75bdd0;
	color: white;
}

#photo .section-title{
	background: rgb(146, 203, 48);
	color: white;
	margin-bottom: 30px;
}

span.white-line {
    height: 1px;
    width: 15%;
    display: inline-block;
    vertical-align: middle;
    margin: 0px 25px;
    border-top: 2px dashed white;
}

.section-float-title,
.section-title{
    padding: 8px 30px;
    padding-top: 12px;
	color: #3a3a3a;
    background: rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
}

.section-float-title{
	position: absolute;
	color: white;
	top: 45px;
    left: 0px;
    width: 100%;
}

.grey{
	background: #615050;
}
.green{
	background: #bdc539;
}
.red, .red2{
    background: #E54028;
    border-bottom: 2px solid #9a2c1b;
}
.blue, .blue2{
    background: #00A1CB;
    border-bottom: 2px solid #007998;
}
.pink {
    background: #d22a63;
    border-bottom: 2px solid #a21f4b;
}
.green2, .green3 {
    background: #61AE24;
    border-bottom: 2px solid #48821b;
}
.orange {
    background: #F18D05;
    border-bottom: 2px solid #bb6e05;
}
.yellow{
	background: #D0D102;
    border-bottom: 2px solid #9a9a02;
}


.blueTR{
	background: rgba(36, 158, 189, 0.47);
}
.pinkTR{
	background: rgba(216, 81, 81, 0.45);
}
.greenTR{
	background: rgba(216, 226, 52, 0.48);
}
.orangeTR{
	background: rgba(218, 153, 39, 0.55);
}
/* sidebar */
#info{

	margin: 0;
	padding: 50px 0px;
	padding-bottom: 70px;
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	background: url('images/dark-blackboard.jpg');

	/*  background-image: url("images/chalkboard1.jpg");
	background-image: url("images/vertical-chalkboard.jpg");
	background-size: cover;
        */
}


#info .full-wrap,
#the-drawing-board{
	transition: transform .4s ease-out;
	-webkit-transition: transform .4s ease-out;
}

#the-drawing-board{
    width: 100%;
    height: 100%;
	position: absolute;
	top:0; left:0;
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
    overflow: hidden;
}

#drawing-board {
	position: absolute;
	width: 100%;
	height: 100% !important;
	top:0; left:0;
}

 #drawing-browser-resized{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    text-align: center;
}

 #drawing-browser-resized div{
	display: table;
	width: 100%;
	height: 100%;
}

 #drawing-browser-resized span{
	display: table-cell;
	vertical-align: middle;
	color:white;
	font-size: 24px;
}

#drawing-chalk-bg,
#drawing-download-board{
	position: absolute;
	top:0; left:0;
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
}

#drawing-download-board{
	opacity: 0;
	z-index: -9999;
}


@keyframes breatheScale {
    0% { opacity: 0.6; }
    40% { opacity: 1; transform: scale(1.05); }
    60% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.6; }
}

@-webkit-keyframes breatheScale {
    0% { opacity: 0.6; }
    40% { opacity: 1; transform: scale(1.15); }
    60% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 0.6; }
}


.draw-btn{
    color: white;
    position: absolute;
    bottom: 15px;
    right: 25px;
    font-size: 18px;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    text-align: center;
    line-height: 50px;
	transition: all .2s ease-out;
	-webkit-transition: all .2s ease-out;
}

.draw-btn#start-drawing{
	animation: breatheScale 2.5s ease infinite forwards;
	-webkit-animation: breatheScale 2.5s ease infinite forwards;
}



.draw-btn:hover{
	border: 2px solid rgba(255, 255, 255, 0.5);
	background: white;
	color: gray;
}

.draw-label {
    position: absolute;
    bottom: 68px;
    color: white;
    z-index: 5;
    right: 50px;
    font-size: 16px;
    width: 49px;
    line-height: 17px;
    transform: scale(1.00) rotateZ(-24deg);
	transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
}

.drawable .draw-label{
    right: 26px;
    bottom: 21px;
    transform: scale(0.00) rotateZ(-124deg);
}


#draw-download-btn{
	opacity: 0;
	transform: scale(0.0);
	-webkit-transform: scale(0.0);
}

.drawable #start-drawing{
	border: 2px solid rgba(255, 255, 255, 0.8);
	background: white;
	color: gray;
	transform: scale(0.8);
	-webkit-transform: scale(0.8);
}

.drawable #draw-download-btn{
	right: 75px;
	opacity: 1;
	transform: scale(0.8);
	-webkit-transform: scale(0.8);
}

.drawable #the-drawing-board{
	transform: translateX(0%);
	-webkit-transform: translateX(0%);
}

.drawable .full-wrap{
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
}


#single-info{
	margin: 0;
	padding: 25px 0px;
	width: 100%;
	height: auto;
	background: url("images/dark-blackboard.jpg");
}

h1{
	margin: 0;
	padding: 10px;
	font-size: 20px;
	color: white;
}
h2{
	margin: 0;
}
a{
	color: white;
}



.info-text{
    float: left;
    padding: 15px 25px;
    width: 870px;
    height: auto;
}

.info-zadaca-text .info-text-image {
    width: 50%;
    margin: 0px auto;
}

.info-text-image{
	width: 100%;
    margin: 15px 0px;
}
.info-text-image img{
    width: 100%;
    height: auto;
    border: 3px solid #ececec;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
.info-text-info{
	float: left;
	width: 100%;
	color: white;
}
.info-text-title{
	margin-top: 15px;
	font-size: 46px;
    line-height: 52px;
	letter-spacing: 2px;
	color: white;

}

#breadcrumbs {
    color: #c3c3c3;
    margin: 0;
    border-bottom: 2px dashed rgba(255,255,255,0.2);
}

#breadcrumbs a:hover{
	color: #92cb30;
}


.info-text-text{

	font-size: 16px;
	letter-spacing: 2px;
	width: 100%;
}

.info-text-text li{
	margin-bottom: 10px;
	font-size: 18px;
}
.info-text-text p:not(.jp-relatedposts-post):first-child:first-letter{
	font-size: 90px;
	float: left;
	margin-top: 28px;
	margin-bottom: 15px;
	margin-left: 0;
	margin-right: 5px;
}

.info-text-text iframe{
	width: 100%;
	border: 1px solid #232323;
}

.info-text-text a{
	text-decoration: underline;
}

.info-text-text a:hover{
	color: #8ece1e;
}

p{
	font-size: 18px;
	line-height: 26px;
}
.info-text-text img{
	padding: 5px;
	width: 100%;
	height: auto;
	border: 5px solid #d8d8d8;

}

.info-text-text img.zoomed{
	position: fixed;
	z-index: 9999;
	top:0;left:0;right:0;bottom:0;
	margin: auto;
	width: 85%;
	transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
}





/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}



.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}


.info-details{
	margin-bottom: 15px;
    padding: 5px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.info-details .date{
	float: left;
	font-size: 16px;
	color: white;
	font-style: italic;
}
.info-details .category{
	padding-left: 10px;
	margin-left: 10px;
	border-left: 1px solid gray;
	display: inline-block;
}
.info-details .category a{
	font-size: 16px;
}


.sidebar{
    margin: 20px 0px;
    float: left;
    width: 330px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 15px;
}

.category-title{
    margin: 0;
    padding: 10px;
    font-size: 40px;
    color: white;
    text-align: center;
    padding-top: 55px;
    letter-spacing: 8px;
    text-transform: uppercase;
    width: 50%;
    margin: 0 auto;
}

h2.category-subtitle {
    width: 50%;
    margin: 0 auto;
    color: white;
    text-align: center;
    margin-bottom: 15px;
    font-size: 26px;
    font-weight: normal;
    letter-spacing: 4px;
    text-transform: uppercase;
}


footer{
    border-top: 2px solid gainsboro;
}

footer .bg-wrap{
    padding: 40px 0px;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
	background: url('images/pattern-hands.jpg');
}

.footer-title {
    padding: 20px 0px;
    font-size: 20px;
    text-align: center;
    color: #444444;
    letter-spacing: 4px;
}

.footer-box{
	padding:15px 0px 0px;
	width: 40%;
	height: auto;
	float: left;
	text-align: center;
	position: relative;

}
.footer-box1{
	padding:15px 0px 20px;
	width: 30%;
	height: auto;
	float: left;
    position: relative;
}
.popular-footer{
	margin: 10px;
	width: 130px;
	height: 130px;
	background-color: black;
	float: left;
}

.footer-box.footer-popular ul {
    padding: 0;
    margin: 0;
    width: 100%;
}

.footer-box.footer-popular ul li {
    width: 130px;
    height: 132px;
    position: relative;
    display: inline-block;
    margin: 0px 5px;
    border: 2px dashed rgba(255, 255, 255, 0.8);
}


.footer-popular a.wpp-post-title {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 50px 10px;
    text-align: center;
    font-size: 12px;

	transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);

}

.footer-box.footer-popular .wpp-thumbnail{
	margin: 0;
	transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}


.footer-box.footer-popular ul li:hover a.wpp-post-title{
	background: rgba(0, 0, 0, 0.8);
}

.footer-box.footer-popular ul li:hover .wpp-thumbnail{
    transform: scale(0.85);
}

.footer-box.footer-popular .wpp-views{
	display: none;
}


	.contact-info{
	    width: 80%;
	    height: auto;
	    float: right;
	}
	.contact-info-icon {
	    float: left;
	    width: 25px;
	    height: 25px;
	    background: url('images/icons/footer-icons.png');
	    background-size: 125px 25px;
	}

	.contact-info-icon.ul{
		background-position: 50px 0px;
	}
	.contact-info-icon.ph{
		background-position: 100px 0px;
	}
	.contact-info-icon.ml{
		background-position: 75px 0px;
	}
	.contact-info-icon.wb{
		background-position: 25px 0px;
	}


	.contact-info-text {
	    float: left;
	    padding: 5px 10px;
	    width: 90%;
	    height: auto;
	    font-size: 14px;
	}

	.contact-info-text a{
		text-decoration: none;
		color: #444;
	}

.copyright {
    padding: 5px;
    width: 100%;
    height: auto;
    font-size: 15px;
    background: rgb(146, 203, 48);
    text-align: center;
    color: white;
}

#the-mobile-menu .copyright{
	background: none;
	font-size: 12px;
}

.info-box {
    padding: 0px 25px;
    float: left;
    width: 25%;
    text-align: center;
}


.info-box-home{
	padding: 25px 40px;
    float: left;
    width: 50%;
}

.info-box .info-box-wraper{
	width: 86%;
	text-align: center;
}

.info-box .info-box-info{
	width: 100%;
	min-height: 200px;
}

.info-box-wraper{

	display: inline-block;
	vertical-align: middle;
	background-size: 200%;
    background-image: url("images/frames.png");

	width: 40%;
	height: auto;

	transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);

}

	.info-box-wraper:hover{
		transform: scale(1.05);
	}
	.info-box-wraper:hover img{
		transform: scale(0.85);
	}


	.ramka1{
            background-position: 0% 0%;
	}
	.ramka2{
            background-position: 100% 0%;
	}
	.ramka3{
            background-position: 0% 100%;
	}
	.ramka4{
            background-position: 100% 100%;
	}
	.info-box-image{
		position: relative;
		top: 7px;

		padding: 42px;
		float: left;
		width: 100%;
		height: auto;

	}
	.info-box-image img{
		width: 100%;
		height: auto;
		border: 3px solid #e4e4e4;

		transition: all 0.3s cubic-bezier(0.34,-0.16, 0.33, 1.77);
		-webkit-transition: all 0.3s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	}

	.info-box-info{
		padding: 0px 5px;
		padding-top: 25px;
		display: inline-block;
		font-size: 13px;
		width: 59%;
		height: auto;
		color: white;
		letter-spacing: 2px;
		vertical-align: middle;
	}
	.info-box-title{
		font-size: 20px;
                text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	}

	.info-box-title:hover{
		color: #92cb30;
	}
	.info-box-text{
		font-size: 16px;

	}
	.info-box-text p {
	    margin-top: 5px;
	    font-size: 14px;
	    line-height: 18px;
	    letter-spacing: 0px;
	    color: #cecece;
	}
	.info-box-text a{
		color: #92cb30;

	}
	.underline-image{
		padding: 30px 0px;
	    padding-top: 0;
	    width: 50%;
	    height: 100%;
	    text-align: center;
	    margin: 0 auto;
	    opacity: 0.9;
	}

#subjects{
    width: 100%;
    height: auto;
    border-bottom: 5px solid white;
    border-top: 5px solid white;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    z-index: 1;
    position: relative;
}

#subjects .bg-wrap{
	background: url('images/inspiration-geometry.png');
    padding: 50px 0px;
}

.subjects-box{
    padding: 60px 5px;
    float: left;
	width: 16.5%;
    height: auto;
    vertical-align: middle;
}
.subjects-box-icon{
    border: 5px solid #d6d6d6;
    border-radius: 100%;
    margin: 0 auto;
    width: 75%;

    margin-bottom: 15px;
    padding: 0;

    transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
    -webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}

.subjects-box-icon:hover{
	transform: scale(1.05);
}

.subjects-box-icon:hover img{

	transform: scale(0.85);

}
.subjects-box-icon img{
	width: 100%;
	height: auto;

	transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}

.subjects-box-info {
    padding: 10;
    text-align: center;
}

.subjects-box-title {
    letter-spacing: 2px;
    font-size: 18px;
    font-weight: bold;
    color: #5a5a5a;
}

#crafts{

	padding: 100px 0px;
	width: 100%;
	height: auto;
	background-image: url("images/pattern-hands.jpg");
	background-attachment: fixed;

        border-top: 1px solid #e8e8e8;
	border-bottom: 1px solid #e8e8e8;

}
.crafts-title-box{
	background: rgba(189, 182, 155, 0.46);
	width: 100%;
	height: auto;
}
.crafts-title{
	padding: 5px 30px;
	font-size: 18px;
	letter-spacing: 3px;
}
.crafts-title a{
	color: black;
	font-weight: normal;
}
.wraper{
	padding-top: 35px;
	width: 100%;
	height: auto;
}

#crafts-carousel{
	margin:0;
	padding: 0;
	list-style: none;
}

.crafts-carousel-wrap{
	margin-top: 25px;
	position: relative;
}

.crafts-carousel-wrap a{
	color: #444;
}

.crafts-carousel-box-wrap{
	margin: 0px 5px;
}

.crafts-carousel-box {
    margin: 20px 0px;

    border: 10px solid #ffffff;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    background: white;

	transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);

	box-sizing: border-box;
	-webkit-box-sizing: border-box;

}

.crafts-carousel-box:hover{
	transform: perspective( 600px ) scale(0.95) rotateX(2deg);
    -webkit-transform: perspective( 600px ) scale(0.95) rotateX(2deg);
    box-shadow: 1px 10px 15px rgba(0, 0, 0, 0.15);
}


.crafts-carousel-box-image img{
	width: 100%;
	height: auto;

}

.crafts-box-title{
	padding: 10px;
	font-size: 16px;
	text-align: center;
	height: 70px;
	letter-spacing: 3px;
	display: table;
    width: 100%;
    min-height: 90px;
}

.crafts-box-title-center{
	display: table-cell;
	vertical-align: middle;
}

#crafts .bx-prev,
#crafts .bx-next{
    color: #2d6471;
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 100%;
    text-align: center;
    z-index: 9999;
    line-height: 48px;
    border: 3px solid #75BDCE;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3);

	transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}

#crafts .bx-prev:hover,
#crafts .bx-next:hover{
	transform: perspective( 600px ) scale(1.2) rotateY(25deg);
    -webkit-transform: perspective( 600px ) scale(1.2) rotateY(25deg);
}

#crafts a.bx-prev{
	left: -30px;
}
#crafts a.bx-next{
	right: -30px;
}

.crafts-box-image img {
    width: 100%;
    height: auto;
}

.crafts-box {
    margin: 10px;
    float: left;
    width: 22.9%;
    height: auto;
    border: 10px solid #ffffff;
	position: relative;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    background: white;

	overflow: hidden;

	transition: all 0.1s ease;
	-webkit-transition: all 0.1s ease;



	top:0px;

}

.crafts-box a {
    color: #444;
    font-weight: bold;
}


.crafts-glow{
	pointer-events: none;
	position: absolute;
	width: 140px; height: 140px;
	opacity:0;
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 70%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	top: 20px; left: 20px;

}


.crafts-box a:hover{
	opacity: 1;
}
/*
.crafts-box:hover{
    transform: perspective( 600px ) scale(0.95) rotateX(2deg);
    -webkit-transform: perspective( 600px ) scale(0.95) rotateX(2deg);
    box-shadow: 1px 10px 15px rgba(0, 0, 0, 0.15);

}
*/





#vicovi{

	width: 100%;
	position: relative;
}


.vicovi-box{
	padding: 70px 20px 20px;
	float: left;
	width: 20%;

    height: 360px;

    border-right: 1px solid rgba(255, 255, 255, 0.2);

	transition: all .2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
    -webkit-transition: all .2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}

.vicovi-box-wrap {
    display: table;
    width: 100%;
    height: 100%;
}

.vicovi-box-center-wrap {
    display: table-cell;
    vertical-align: middle;
}



.vicovi-box:nth-child(2){
	background: #d85151;
}

.vicovi-box:nth-child(3){
	background: #249ebd;
}

.vicovi-box:nth-child(4){
	background: #eb5d36;
}

.vicovi-box:nth-child(5){
	background: #92cb30;
}

.vicovi-box:nth-child(6){
	background: #da9927;

    border-right: none;
}

.vicovi-title{
	padding: 10px 0px;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: center;
    color: white;
}

.vicovi-text p {
    font-size: 14px;
    line-height: 20px;
    color: white;
    text-align: center;
    margin: 0;
}

.about-us-box{
	width: 100%;
	height: auto;
	padding: 20px;
	position: relative;

}
.about-us-box-image{
	position: absolute;
	right: 20px;
	bottom: 20px;
	float: left;
	height: auto;

}
.about-us-image img{
	width: 100%;
}
.about-us-box-info{
	float: left;
	padding: 20px;
	width: 100%;


}
.about-us-title {
    padding: 10px 25px;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: bold;
    color: white;
}
.about-us-main-title{
	padding: 5px;
	font-size: 20px;
	font-weight: bold;
	background-color: #92cb30;
	color: white;
}
.about-us-text{
	font-size: 15px;
	color: white;
	letter-spacing: 1px;
}








.rocket-launch{
	position: fixed;
	bottom: 58px;
    right: 10px;
    -webkit-border-radius: 60;
    -moz-border-radius: 60;
    border-radius: 60px;
    font-weight: bold;
    color: #ffffff;
    font-size: 12px;
    background: #e84b4b;
    padding: 4px 15px;
    border: solid #942d2d 1px;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    z-index: 5;
    transition: all .1s ease-out;
    -webkit-transition: all .1s ease-out;
}

.rocket-launch:hover{
	background: #571313;
	text-decoration: none;
	transform: scale(0.95);
}

.rocket-launch.correct{
	background: #3fbf40;
    border: solid #217933 2px;
    transform: scale(1.1);
}

.rocket-launch.correct:hover{
	background: #1f4c1f;
}

.rocket-launch.active{

	z-index: 15;
}

.rocket-to-top {
    position: fixed;
    bottom: -100px;
    right: 70px;
    width: 58px;
    height: 95px;
	z-index: 25;
    overflow: hidden;
    transition: all .25s ease-out;
}

.rocket-to-top.active{
	bottom: 14px;
}
.rocket-to-top.flying{
	height: 122px;
	bottom: 14px;
}

.rocket-to-top.flying .dot{
	opacity: 1;
}

.rocket-to-top.fly-out{
	bottom: 100%;
}

.rocket-to-top:hover{
	bottom: 12px;
}

.rocket{
	width: 100%;
	position: relative;
	background-size: 100%;
}

.rocket-body{
	height: 95px;
	background-image: url('images/rocket-body.png');
}

.rocket-body .dot{
    position: absolute;
    border-radius: 35px;
    cursor: pointer;
    width: 15px;
    height: 15px;
    margin: auto;
    left:0; right:0;
    opacity: 1;
    transition: opacity .05s ease-out;
}

.rocket-body .dot.c1-0,
.rocket-body .dot.c2-0,
.rocket-body .dot.c3-0{
    background: rgba(255, 255, 255, 0.85);
}

.rocket-body .dot.c1-1,
.rocket-body .dot.c2-1,
.rocket-body .dot.c3-1{
	background: rgba(255, 253, 20, 0.85);
}

.rocket-body .dot.c1-2,
.rocket-body .dot.c2-2,
.rocket-body .dot.c3-2{
	background: rgba(255, 48, 48, 0.85);
}

.rocket-body .dot.c1-3,
.rocket-body .dot.c2-3,
.rocket-body .dot.c3-3{
	background: rgba(255, 0, 207, 0.85);
}

.rocket-body .dot.c1-4,
.rocket-body .dot.c2-4,
.rocket-body .dot.c3-4{
    background: rgba(32, 255, 64, 0.85);
}

.rocket-body .dot.c1-5,
.rocket-body .dot.c2-5,
.rocket-body .dot.c3-5{
    background: rgba(32, 76, 255, 0.85);
}



.rocket-body .dot:nth-child(1){
	top: 33px;
    width: 17px;
    height: 17px;
    left: -1px;
}
.rocket-body .dot:nth-child(2){
	top: 59px;
    left: 1px;
    width: 12px;
    height: 12px;
}
.rocket-body .dot:nth-child(3){
	top: 78px;
    left: 4px;
    width: 8.5px;
    height: 8.5px;
}

.rocket-flame{
	height: 24px;
	background-image: url('images/rocket-flame.png');
}






/*------------------------------------*\
    PAGES
\*------------------------------------*/












.classes-title-box
{
	width: 100%;
	height: auto;
	background: rgba(189, 182, 155, 0.46);
}
.classes-title{
	font-size: 16px;
	padding: 5px 30px;
	letter-spacing: 3px;
	color: white;
	text-transform: uppercase;
}
.classes-box{
	padding: 30px;
	float: left;
	width: 25%;
	height: auto;
}
.classes-box-image img{
    width: 100%;
    border: 5px solid rgb(199, 199, 199);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
.classes-box-image:hover{
	background: black;


}





.classes-box-title {
    font-size: 16px;
    font-weight: bold;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    text-align: center;
	width: 100%;
    height: 90px;
    letter-spacing: 2px;
    display: table;
    color: white;
    padding: 5px 15px;
    background: rgba(142, 206, 30, 0.6);
}

.classes-box-title:hover{
	color:  rgb(180, 180, 180);
}

.classes-box-title-center {
    display: table-cell;
    vertical-align: middle;
}


.subjects-box-cat{
	padding: 35px;
    display: inline-block;
    width: 18%;
    height: auto;
    vertical-align: middle;
}

.subjects-box-numbers{
	padding: 0px 20px;
	display: inline-block;
	width: 12%;
	height: auto;
	vertical-align: middle;
	margin-top: 15px;
}
.subjects-box-numbers-icon {
    text-align: center;
    padding-bottom: 5px;
    width: 62px;
	height: 62px;
	margin: 0 auto;
}
.subjects-box-numbers-icon:hover{
	background: rgba(212, 216, 206, 0.63);
	border-radius: 100%
}
.subjects-box-numbers-icon img{
	width: 100%;
    height: auto;
    border: 3px solid rgba(0, 0, 0, 0.68);
    border-radius: 100%;
    padding: 10px;
}

.subjects-box-numbers.active .subjects-box-numbers-icon img{
	background: #92cb30;
}

.subjects-box-numbers-info{
    width: 100%;
    height: auto;
    font-size: 10px;
    margin: 5px 0px;
    line-height: 18px;
    text-align: center;
}
.subjects-box-numbers-info h2{
	padding: 0px 10px;
}
#photo {
    width: 100%;
    height: auto;
	padding: 80px 0px;
    padding-bottom: 150px;
    box-shadow: 0px -2px 15px rgba(0, 0, 0, 0.1);
}
.nikulec{

	width: 100%;
	height: auto;
}

.nikulec-title{
	width: 100%;
	height: auto;
	padding: 5px 30px;
	font-size: 18px;
	background: rgba(189, 182, 155, 0.46);
	letter-spacing: 3px;
}

.photo-box{
    position: relative;
    float: left;
    width: 200px;
    height: 200px;
    border: 6px solid rgb(146, 203, 48);
    border-radius: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: 50% 50%;
    perspective: 600px;
    transform: perspective(600px) rotateX(0deg);

    transition: all .2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
    -webkit-transition: all .2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}

.photo-box:hover{
	transform: perspective(600px) scale(1.05);
}

.photo-image-box{
	position: absolute;
	top:0; left:0;
	width: 100%;
	height: 100%;
}

.photo-box:active{
	transform: perspective(600px) scale(0.85);
}

.photo-box:hover .box-overlay{
	transform: scale(0.95);
    background: rgba(0, 0, 0, 0.6);
}


.photo-box:nth-child(1){
	top: 110px;
    width: 160px;
    height: 160px;
}
.photo-box:nth-child(2){
	top: 50px;
	width: 180px;
    height: 180px;
}
.photo-box:nth-child(3){
	top: 90px;
    width: 190px;
    height: 190px;
}
.photo-box:nth-child(4){
	top: 40px;
}
.photo-box:nth-child(5){
	top: 80px;
    width: 190px;
    height: 190px;
    left: 3px;
}
.box-overlay{
	position: absolute;
	top:0; left:0;
	width:100%; height:100%;
	border-radius: 100%;
	opacity: 1;
	transform: scale(1);
    background: rgba(255, 255, 255, 0.2);

	transition: all .2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all .2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
}
.zoom-icon{
	width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: scale(0.0);

	transition: all .3s cubic-bezier(0.34,-0.16, 0.33, 1.77);
	-webkit-transition: all .3s cubic-bezier(0.34,-0.16, 0.33, 1.77);

}

.photo-box:hover .zoom-icon{
	transform: scale(0.8);
	opacity: 1;
}

.box-title{
	padding: 65px;
	font-size: 20px;
	text-align: center;
	color: #464444;
	font-weight: bold;

}

.photo6{
	top: 20px;
	background-image:  url("images/gasenica.png");
	background-color: white;
	background-size: cover;
	background-position: 50% 50%;
}


.galerija-sliki{
	display: none;
}




#games{
		margin: 0;
		width: 100%;
		height: auto;
		background-image: url("images/chalkboard1.png");
		background-size: cover;
}

	.sidebar-box .games-box {
	    width: 100%;
	    padding: 0;
	    margin: 10px 0px;
	    float: none;
	}

	.games-box{
	    padding: 20px 10px;
		position: relative;
		float: left;
		width: 25%;
		height: auto;
		margin-bottom: 15px;
	}

	.games-box-image {

		width: 100%;
		height: auto;
		float: left;
		overflow: hidden;
		text-align: center;
		cursor: default;
		background: white;
		position: relative;

	}
	.games-box-image.overlay {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0;
		padding: 50px 20px;
	}
	.games-box-image  img{

		display: block;
		position: relative;
		max-width: none;
		width: calc(100% + 20px);
		-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
		transition: opacity 0.35s, transform 0.35s;
		-webkit-transform: translate3d(-10px,0,0);
		transform: translate3d(-10px,0,0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;

	}
	.games-box-image:hover img{

	opacity: 0.4;
	filter: alpha(opacity=40);
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);

	}

	.games-box-image .games-box-title{
	    text-transform: uppercase;
	    color: black;
	    text-align: center;
	    position: relative;
	    font-size: 16px;
		width: 100%;
	    height: 70px;
		display: table;
	    overflow: hidden;
	    padding: 5px 10px;
	    background-color: transparent;
	    letter-spacing: 2px;
	}

	.games-box-image .games-box-title-center{
		display: table-cell;
		vertical-align: middle;
	}

	.games-box-image .games-box-title:after {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: 4px;
	  background: #92cb30;
	  content: '';
	  -webkit-transition: -webkit-transform 0.35s;
	  transition: transform 0.35s;
	  -webkit-transform: translate3d(-100%,0,0);
	  transform: translate3d(-100%,0,0);
	}
		.games-box-image:hover .games-box-title:after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}


.single-igri #contact-up,
.single-igri #logo,
.single-igri #the-wormy-box,
.single-igri #contact,
.single-igri .rocket-launch,
.single-igri .rocket-to-top,
.single-igri header .wrap:first-child{
	display: none;
}

.single-igri header #main-nav .wrap{
	display: block;
}










	.single-zadaca{
		text-align: center;
	}
	.single-zadaca img{
		border: 5px solid rgb(235, 234, 234);
		width: 35%;
		height: auto;
	}
	.single-zadaca-btns {

		padding: 25px;
		text-align: center;
	}
	.single-zadaca-btns a{
		padding: 5px 35px;
		padding-top: 8px;
		border: 2px solid white;
		font-size: 16px;
		margin: 0px 10px;
		transition: all .2s ease-out;
		-webkit-transition: all .2s ease-out;
	}
	.single-zadaca-btns a:hover{
		background-color: rgba(142, 206, 30, 0.77);
	}





.pagination {
    padding: 25px;
    text-align: center;
}

.pagination a,
.pagination span{
    font-size: 16px;
    display: inline-block;
    padding: 1px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    margin: 0px 3px;
    width: 30px;
    padding-top: 5px;
}

.pagination span{
    background: #009688;
    color: white;
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.pagination a:hover{
	background: gray;
}


.social-buttons-wrap{
	padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.social-buttons-wrap ul{
	list-style: none;
	margin:0;
	padding:0;
	height: 21px;
}


.social-buttons-wrap ul li {
    float: left;
    position: relative;
    margin-right: 3px;
	font-size: 16px;
	margin:0;
	padding: 0px 5px;
	color: #92cb30;
}

.social-buttons-wrap ul li:first-child{
	bottom: 2px;
}

.social-buttons-wrap ul li#fblike,
.social-buttons-wrap ul li#fbsend{
	bottom: 2px;
}





.the-tags-wrap {
    margin-top: 0px;
    padding: 15px 25px;
    background: rgba(97, 123, 53, 0.45);
    border-top: 1px solid rgba(0, 0, 0, 0.5);
	font-weight: bold;
    font-size: 14px;
    color: white;
	letter-spacing: 2px;
}

.the-tags-wrap a{
	font-weight: normal;
}
.the-tags-wrap a:hover{
	color: #8ece1e;
}



.related-posts {
    background: rgba(0, 0, 0, 0.3);
	padding: 25px;
	color: white;
}

.related-posts h3 {
    margin: 0;
    font-size: 16px;
}

.related-posts #gallery-1 .gallery-item {
	width: 32%;
    margin-right: 15px;
}

.related-posts #gallery-1 img {
    border: 3px solid #cfcfcf;
    width: 100%;
    height: auto;
}

.related-posts #gallery-1 .gallery-item:last-of-type {
    margin-right: 0;
}

.related-posts #gallery-1 .gallery-caption {
    margin-left: 0;
    font-size: 16px;
    line-height: 20px;
    margin-top: 8px;
}



.the-fb-comments {
    background: rgba(0, 0, 0, 0.45);
    padding: 5px 17px;
}




.white-btn{
	padding: 5px 20px;
	border: 3px solid white;
	font-size: 18px;
	margin: 0px auto;
	margin-top: 15px;
	display: inline-block;

	transition: all .2s ease-out;
	-webkit-transition: all .2s ease-out;
}

.white-btn:hover{
	background-color: rgba(142, 206, 30, 0.77);
}




#post-404{
	text-align: center;
}

#post-404 #info {
    padding: 180px 0px;
}


/* THE 404 */
.error404{
	background: rgb(7, 15, 36);
}

.error404 #the-wormy-box{
	display: none;
}

.error404 header,
.error404 #main-nav,
.error404 #info,
.error404 main,
.error404 footer,
.error404 .copyright,
.error404 footer .bg-wrap,
.error404 .footer-title{
	background: none;
	border: none;
	color: white;
}

.error404 #main-nav > .wrap > nav > ul > li:nth-child(1) {
    left: 5px; top: 135px;
    transform: rotateZ(11deg) scale(1.2); -webkit-transform: rotateZ(11deg) scale(1.2);
}
.error404 #main-nav > .wrap > nav > ul > li:nth-child(2) {
    left: 22px; top: 55px;
    transform: rotateZ(-15deg) scale(0.7); -webkit-transform: rotateZ(-15deg) scale(0.7);
}
.error404 #main-nav > .wrap > nav > ul > li:nth-child(3) {
    left: 73px; top: 0px;
    transform: rotateZ(7deg) scale(0.85); -webkit-transform: rotateZ(7deg) scale(0.85);
}
.error404 #main-nav > .wrap > nav > ul > li:nth-child(4) {
    left: -5px; top: 76px;
    transform: rotateZ(-5deg); -webkit-transform: rotateZ(-5deg);
}
.error404 #main-nav > .wrap > nav > ul > li:nth-child(5) {
    left: 0px; top: 30px;
    transform: rotateZ(15deg) scale(0.8); -webkit-transform: rotateZ(15deg) scale(0.8);
}
.error404 #main-nav > .wrap > nav > ul > li:nth-child(6) {
    top: -45px; left: -30px;
    transform: rotateZ(-15deg) scale(1.05); -webkit-transform: rotateZ(-15deg) scale(1.05);
}
.error404 #main-nav > .wrap > nav > ul > li:nth-child(7) {
    left: -30px; top: 0px;
    transform: rotateZ(5deg) scale(0.7); -webkit-transform: rotateZ(5deg) scale(0.7);
}
.error404 #main-nav > .wrap > nav > ul > li:nth-child(8) {
    left: -30px; top: 60px;
    transform: rotateZ(-15deg) scale(1.2); -webkit-transform: rotateZ(-15deg) scale(1.2);
}
.error404 #main-nav > .wrap > nav > ul > li:nth-child(9) {
    left: 0px; top: 10px;
    transform: rotateZ(6deg) scale(0.6); -webkit-transform: rotateZ(6deg) scale(0.6);
}

 .error404 #contact-up{
	transform: rotateZ(16deg) scale(0.6);
	-webkit-transform: rotateZ(16deg) scale(0.6);
 }

.error404 #footer-social{
	bottom: 85px;
    transform: rotateZ(-15deg) scale(1.2);
    -webkit-transform: rotateZ(-15deg) scale(1.2);
}

.error404 .footer-popular{
	-webkit-transform: rotateZ(14deg) scale(0.6);
	transform: rotateZ(14deg) scale(0.6);
    bottom: 35px;
}

.error404 #footer-kontakt{
	bottom: 40px;
    transform: rotateZ(-5deg) scale(0.9);
    -webkit-transform: rotateZ(-5deg) scale(0.9);
}

.error404 #logo{
    transform: rotateZ(5deg) scale(0.9);
    -webkit-transform: rotateZ(5deg) scale(0.9);
}

.error404 .pretitle-404{
	margin: 0;
	padding: 0;
    font-size: 2em;
}

.error404 .title-404{
	margin: 0;
	padding: 0;
    font-size: 4em;
    letter-spacing: 4px;
}


#single-info .wrap{
	position: relative;
}

.sidebar-box{
    margin-bottom: 15px;
    border-bottom: 2px dashed #da9927;
    overflow: hidden;
}


.sidebar-box ul{
	margin: 0;
	padding: 10px 0px;
	list-style: none;
}

.sidebar-box a:hover{
	color: #92cb30;
}


.ad-box-underinfo {
    width: 89%;
    margin: 0 auto;
    margin-top: 40px;
}

.ad-box.ad-header {
	text-align: center;
    float: left;
    width: calc(80% - 280px);
}

.ad-box.ad-header img {
    width: 65%;
    margin-top: 15px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
}

.ad-box.ad-header img:hover {
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.ad-box-300{
	width: 300px;
	height: 250px;
	background: white;
	text-align: center;
	line-height: 250px;
}

.sidebar-title {
    border-bottom: 3px dashed #da9927;
    font-size: 26px;
    padding-left: 10px;
    padding-bottom: 3px;
    color: white;
}


.sidebar-box a.wpp-post-title {
    font-size: 14px;
    padding: 5px;
    vertical-align: middle;
}

.sidebar-box .wpp-list li {
    margin: 2px 0px;
    padding: 5px 0px;
    background: #181919;
}

.sidebar-box .wpp-list .wpp-views{
	display: none;
}








/*------------------------------------*\
    SOBIRAJ PODAROCI GAME
\*------------------------------------*/

.game-wrap{
	width: 900px;
	margin: 0 auto;
}

.game-lifes{
	float: right;
	margin-right: 15px;
}

.game-lifes ul {
    margin: 3px;
}

.game-lifes ul li{
	display: inline;
	font-size: 18px;
	margin: 0px 2px;
	color: red;
}

.game-points{
	float: right;
	color: white;
	font-size: 24px;
}

.game-header-info{
	float: left;
	color: white;
	font-size: 24px;
}

.game-menu {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(123, 34, 49, 0.9);
    z-index: 15;
}

.game-table{
	display: table;
	width: 100%;
	height: 100%;
}

.game-table-center{
	display: table-cell;
	vertical-align: middle;
}

.game-over{
	display: none;
}

.game-menu div{
	margin: 5px auto;
}

.game-title h1 {
    font-size: 34px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.game-menu .game-intro {
    width: 60%;
    font-size: 18px;
    color: white;
    margin-bottom: 16px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

span#game-menu-chorap,
span#game-menu-nikulche {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background-image: url('images/sobiraj-podaroci/gifts.png');
	background-size: 100px 40px;
}

span#game-menu-chorap {
    background-position: 120px 20px;
}

span#game-menu-nikulche {
    background-position: 120px 0px;
}

.game-menu .game-start-btn {
    display: inline-block;
    margin: 0 5px;
}

.game-start-btn button {
    position: relative;
    padding: 10px 30px;
    padding-top: 12px;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 14px;
    border: 2px solid #01af52;
    color: white;
    background: #009646;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    margin-top: 10px;
    outline: none;
    transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
    -webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);   
}

.game-start-btn button span.btn-label {
    transform: scale(1);
    display: inline-block;
    
    transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
    -webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);     
}

.game-start-btn button:hover{
	background: #00c35b;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
}


.game-start-btn button.loading span.btn-label{
	transform: scale(0);
}

.game-start-btn button.loading .cssload-loader{
	transform: scale(1);
}


.game-leaderboard{
	display: none;
}

.game-menu .game-ldr-box {
    width: 330px;
    height: 330px;
    background: rgb(255, 255, 255);
    box-shadow: 0px 20px 20px -18px rgba(0, 0, 0, 0.5);
    border: 2px solid #006f34;
    background: #009646;  
}

.game-menu .game-ldr-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    height: 100%;
    overflow-y: scroll;    
}

.game-menu .game-ldr-box ul li{
    padding: 5px;
    font-size: 14px;
    background: #009646;
    border-bottom: 2px solid #01af52;
    color: white;
}

.game-menu .game-ldr-box li.your-rank {
    background: #960050;
    font-weight: bold;
    font-size: 16px;
}

.game-menu .game-ldr-box ul li span{
	float: left;
}

span.ldr-pos {
    width: 25px;
    text-align: center;
}

span.ldr-name {
    width: calc(100% - 70px);
}

span.ldr-pts {
    width: 45px;
    text-align: center;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.3);    
}



.game-menu .cssload-loader {
    position: absolute;
    left: calc(50% - 18px);
    width: 27px;
    height: 27px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    perspective: 460px;
    
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    
    transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
    -webkit-transition: all 0.2s cubic-bezier(0.34,-0.16, 0.33, 1.77);
    
    transition-delay: .2s;
    -webkit-transition-delay: .2s;
    
}

.cssload-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;	
}

.cssload-inner.cssload-one {
	left: 0%;
	top: 0%;
	animation: cssload-rotate-one 1.15s linear infinite;
		-o-animation: cssload-rotate-one 1.15s linear infinite;
		-ms-animation: cssload-rotate-one 1.15s linear infinite;
		-webkit-animation: cssload-rotate-one 1.15s linear infinite;
		-moz-animation: cssload-rotate-one 1.15s linear infinite;
	border-bottom: 2px solid rgba(255,255,255,0.99);
}

.cssload-inner.cssload-two {
	right: 0%;
	top: 0%;
	animation: cssload-rotate-two 1.15s linear infinite;
		-o-animation: cssload-rotate-two 1.15s linear infinite;
		-ms-animation: cssload-rotate-two 1.15s linear infinite;
		-webkit-animation: cssload-rotate-two 1.15s linear infinite;
		-moz-animation: cssload-rotate-two 1.15s linear infinite;
	border-right: 2px solid rgb(255,255,255);
}

.cssload-inner.cssload-three {
	right: 0%;
	bottom: 0%;
	animation: cssload-rotate-three 1.15s linear infinite;
		-o-animation: cssload-rotate-three 1.15s linear infinite;
		-ms-animation: cssload-rotate-three 1.15s linear infinite;
		-webkit-animation: cssload-rotate-three 1.15s linear infinite;
		-moz-animation: cssload-rotate-three 1.15s linear infinite;
	border-top: 2px solid rgb(255,255,255);
}







@keyframes cssload-rotate-one {
	0% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-one {
	0% {
		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-one {
	0% {
		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-one {
	0% {
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-one {
	0% {
		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
	}
}

@keyframes cssload-rotate-two {
	0% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-two {
	0% {
		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-two {
	0% {
		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-two {
	0% {
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-two {
	0% {
		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
	}
}

@keyframes cssload-rotate-three {
	0% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-o-keyframes cssload-rotate-three {
	0% {
		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-ms-keyframes cssload-rotate-three {
	0% {
		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-webkit-keyframes cssload-rotate-three {
	0% {
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}

@-moz-keyframes cssload-rotate-three {
	0% {
		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
	}
	100% {
		-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
	}
}














.game-total-points {
    display: inline-block;
    font-size: 42px;
    background: white;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    line-height: 105px;
    font-weight: bold;
    border: 4px solid #61ae24;
}

.game-total-points-label {
    font-size: 24px;
    color: white;
    margin: 0;
    line-height: 10px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}

.game-floor{
	width: 900px;
	height: 35px;
	position: absolute;
	bottom: 0;
	background: url('images/sobiraj-podaroci/floor.png');
	z-index: 3;
}

.game-floor-revert{
	width: 900px;
	height: 35px;
	transform: translateX(20%) scaleX(-1);
	opacity: 0.7;
	position: absolute;
	bottom: 0;
	z-index: 2;
	background: url('images/sobiraj-podaroci/floor.png');
}

.game-trees .game-tree{
	width: 60px;
	height: 99px;
	background: url('images/sobiraj-podaroci/tree.png');
	position: absolute;
	background-size: cover;
	bottom: 15px;
	left: 50%;
    z-index: 3;
}

.game-trees .game-tree:nth-child(1){
    bottom: 25px;
    left: 14%;
    width: 70px;
    height: 112px;	
}

.game-trees .game-tree:nth-child(2){
    bottom: 23px;
    left: 79%;
    width: 80px;
    height: 129px;	
}

.game-trees .game-tree:nth-child(3){
	bottom: 12px;
    left: 32%;
    width: 50px;
    height: 85px;	
}

.game-snowman{
    width: 120px;
    height: 120px;
    position: absolute;
    left: 69%;
    bottom: 6px;
    z-index: 5;
    background: url(images/sobiraj-podaroci/snowman.png);
    background-size: cover;
}

.game-santa{
	width: 100px;
    height: 110px;
    position: absolute;
    left: 20%;
    bottom: 6px;
    z-index: 5;
    background: url(images/sobiraj-podaroci/santa.png);
    background-size: cover;
}



#game-container{
	width: 900px;
	height: 450px;
	border: 4px solid white;
	margin: 20px auto;
	position: relative;
	overflow: hidden;
    box-shadow: 0px 50px 35px -35px rgba(0, 0, 0, 0.5);
    
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bfabea+1,8f74e0+100 */
	background: rgb(191,171,234); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(191,171,234,1) 1%, rgba(143,116,224,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(191,171,234,1) 1%,rgba(143,116,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(191,171,234,1) 1%,rgba(143,116,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfabea', endColorstr='#8f74e0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	cursor: url('images/sobiraj-podaroci/cursor-bag.png'), auto;
	
}

.snowy-layer{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.gift-box{
	width: 35px;
	height: 35px;
	top: -80px;
	left: 25%;
	background-image: url('images/sobiraj-podaroci/gifts.png');
	background-size: 175px 70px;
	position: absolute;
	z-index: 15;
	cursor: url('images/sobiraj-podaroci/cursor-bag-pick.png'), auto;
}

.gift-box:hover{
	transform: perspective(600px) scale(1.05) rotateZ(5deg);
	-webkit-transform: perspective(600px) scale(1.05) rotateZ(5deg);
}

.gift-box.gift-1{
	background-position: 0px 0px;
}

.gift-box.gift-2{
	background-position: 140px 35px;
}

.gift-box.gift-3{
	background-position: 70px 0px;
}

.gift-box.gift-4{
	background-position: 105px 0px;
}

.gift-box.gift-5{
	background-position: 0px 35px;
}

.gift-box.gift-6{
	background-position: 140px 0px;
}

.gift-box.gift-7{
	background-position: 70px 35px;
}

.gift-box.gift-8{
	background-position: 105px 35px;
}

.gift-box.gift-9{
	background-position: 35px 0px;
}

.gift-box.gift-10{
	background-position: 35px 35px;
}



.gift-box div{
    border-radius: 100%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    background: rgb(255, 255, 255);
    border: 2px solid #bb0029;
    margin-top: 35px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
















/* KREATIVNO PAKETCHE PAGE */



#kp-full-article .underline-image {
    padding: 0;
}

#kp-full-article #info{
	overflow: initial;
}

.kp-main-image{
	text-align: center;
}

.kp-main-image img {
    width: 60%;
    height: auto;
    margin: 0 auto;
    border: 5px solid white;
    box-shadow: 0px 45px 20px -40px black;
}

.kp-intro, .kp-intro-social {
    width: 60%;
    margin: 0 auto;
    color: white;
    text-align: center;
}

.kp-row.kp-intro ul {
    margin: 0;
    margin-bottom: 25px;
    padding: 0;
}

.kp-row.kp-intro ul li {
    display: inline-block;
    padding: 8px 20px;
    margin: 2px;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
    font-size: 18px;
}

.kp-row.kp-intro ul li:nth-child(1){
	background: #d22a63;
}
.kp-row.kp-intro ul li:nth-child(2){
	background: #f18d05;
}
.kp-row.kp-intro ul li:nth-child(3){
	background: #00a1cb;
}
.kp-row.kp-intro ul li:nth-child(4){
	background: #61ae24;
}

.kp-intro p {
    font-size: 24px;
    line-height: 32px;
    margin-top: 0px;
    margin-bottom: 25px;    
}

#kp-info{
	padding: 50px 0px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ededed+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.kp-col-center {
    width: 85%;
    padding: 25px;
    color: #464646;
    float: right;
}

.kp-col-center ul li {
    margin-bottom: 5px;
}

.kp-col-dark{
	color: white;
}

.kp-row {
    padding: 10px 0px;
}

.kp-col{
	width: 50%;
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	font-size: 1.6em;
}

.kp-col-image{
	text-align: center;
}

.kp-col-image img{
    width: 80%;
}

.kp-col h2 {
    font-size: 1em;
    margin: 10px 0px;
}

.kp-col-image-2 {
    text-align: center;
    width: 80%;
    float: right;
}

.kp-col-image-2 img{
	width: 90%;
}

#kp-order-form .submit-wrap .nf-element {
    padding: 10px 40px;
    background: #61ae24;
    border: 0;
    border-bottom: 2px solid #44751d;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#kp-order-form .nf-form-cont {
    width: 80%;
    margin: 0 auto;
    padding: 20px 40px;
    border: 3px solid #dadada;
    background: rgb(255, 255, 255);
    box-shadow: 0px 30px 35px -25px black;
}

#kp-order-form .nf-form-title h3 {
    color: white;
    background: #61ae24;
    padding: 5px 15px;
    font-size: 1em;
    margin-bottom: 0;
}

#kp-order-form .nf-form-fields-required {
    padding: 5px 15px;
    font-size: 14px;
    background: #dadada;
    color: #212121;
    margin-bottom: 10px;
}

#kp-order-form .nf-field-label {
    font-size: 14px;
    margin-bottom: 5px;
}

#kp-order-form .nf-after-field .nf-error-msg {
    margin-right: 10px;
    font-size: 12px;
}

#kp-order-form .nf-field-description p {
    font-size: 14px;
    line-height: 18px;
}

#kp-order-form .nf-field-container, #kp-order-form #ninja_forms_required_items{
	margin-bottom: 15px;
}

#kp-order-form .nf-element {
    font-size: 14px;
    padding: 5px;
    padding-left: 10px;
}

#kp-order-form .nf-field-element ul li {
    display: inline-block;
    margin: 2px;
    margin-left: 10px;
    font-size: 14px;
    background: #61ae24;
    color: white;
    padding: 2px 10px !important;
}



/*------------------------------------*\
    IMAGES
\*------------------------------------*/



/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/



/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media (max-width: 460px){

}


@media (max-width: 768px){

	h1.info-text-title,
	h1.category-title {
	    font-size: 2.8em;
	    line-height: 1.2em;
        letter-spacing: 2px;
        padding-top: 15px;
	}

	p {
	    font-size: 18px;
	    line-height: 26px;
	    letter-spacing: 1px;
	}

	.about-us-box,
	.about-us-box-info,
	#contact{
		padding: 0;
	}

	.about-us-box-info{
		margin: 15px 0px;
	}

	.underline-image {
    	padding: 20px 0px;
    }


	#fb-popup {
		display: none !important;
	}

	#main-nav, #the-wormy, .photo6, .vicovi-box:nth-child(6), #contact-up,
	.rocket-launch, .rocket-to-top, #the-wormy-box, span.white-line, .drawing-controls, .ad-header{
		display: none;
	}


	#crafts a.bx-prev{
		left: 0px;
	}
	#crafts a.bx-next{
		right: 0px;
	}

	#crafts .bx-prev:hover, #crafts .bx-next:hover{
		transform: scale(1);
		-webkit-transform: scale(1);
		z-index: 999;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}


	#logo {
	    padding: 15px 0px;
	    width: 190px;
	}

	#logo img{
		width: 100%;
	}

	#ham-menu{
		display: block;
	}

	.wrap{
		width: 100%;
		padding: 0 20px;
	}

	.info-box-home,
	.info-box{
		width: 100%;
		height: auto;
		padding: 0px 25px;
	}

	.info-box-wraper,
	.info-box-info{
		width: 100%;
		text-align: center;
	}
	.info-box-info{
		padding-top: 5px;
	}

	.info-box-home .info-box-image img{
		transform: scale(0.75);
	}





	#subjects{
		padding: 0px;
	}

	.subjects-box-title {
    	letter-spacing: 1px;
    	font-size: 12px;
    }

	.subjects-box{
	    width: 50%;
	    height: auto;
	    padding: 15px 0;
	}

	.section-title{
	    font-size: 18px;
	    margin-bottom: 20px;
	}

	#crafts{
		text-align: center;
	}

	.crafts-box{
	    width: 44%;
	    float: none;
	    display: inline-block;
	    vertical-align: top;
		margin: 15px 5px;
	}

	.crafts-carousel-box:hover{
		transform: scale(1);
		-webkit-transform: scale(1);
	}

	.crafts-box-title{
    	height: 110px;
	}

	#photo{
    	text-align: center;
    	padding-bottom: 80px;
	}

	.photo-box{
		width: 160px;
		height: 160px;
		float: none;
		display: inline-block;
	}

	.photo-box:nth-child(1) {
	    top: 20px;
	    right: 30px;
	}

	.photo-box:nth-child(2) {
	    top: 10px;
	    left: 40px;
	    width: 170px;
	    height: 170px;
	}

	.photo-box:nth-child(3) {
	    top: 5px;
	    right: 15px;
	}

	.photo-box:nth-child(4) {
	    top: 5px;
	    left: 30px;
	}

	.photo-box:nth-child(5) {
	    top: 5px;
	    left: 10px;
	}

	.photo-box:nth-child(6){
		display: none;
	}

	.vicovi-box {
	    width: 50%;
	    height: 360px;
	    text-align: center;
	}

	.vicovi-text p {
	    font-size: 14px;
	    line-height: 18px;
	    color: white;
	}

	.info-text {
	    padding: 0;
	    width: 100%;
	}

	.info-zadaca-text .info-text-image{
		width: 100%;
	}

	.social-buttons-wrap ul{
		height: auto;
	}

	.social-buttons-wrap ul li {
		float: none;
	    display: inline-block;
	    width: 100%;
	    font-size: 16px;
	    margin: 4px 0px;
	    padding: 0px 15px;
	}

	.sidebar, .ad-box-300, .contact-info{
	    width: 100%;
	}

	.sidebar-box{
		margin: 10px auto;
	}



	.subjects-box-cat{
		width: 100%;
	}

	.subjects-box-icon{
		width: 50%;
	}

	.subjects-box-numbers{
		padding: 0;
		margin: 0;
		width: 32%;
	}

	section#subjects-wrap {
	    padding-bottom: 25px;
		text-align: center;
	}

	.classes-box, .games-box{
	    width: 49%;
	    padding: 5px;
	    display: inline-block;
	    float: none;
	    margin-bottom: 0px;
	}

	.games-box-title{
		font-size: 12px;
		height: 50px;
		padding: 5px 10px;
	}

	.classes-box-title {
    	font-size: 12px;
    }

    .pagination a, .pagination span{
	    margin-bottom: 10px;
    }




    .single-zadaca-btns a{
		display: block;
		margin-bottom: 25px;
	}

	.related-posts, .the-tags-wrap{
	    padding: 15px;
	}

	.related-posts #gallery-1 .gallery-item{
		margin-right: 5px;
	}

	.single-zadaca img{
		width: 100%;
	}

	.footer-box1, .footer-box{
		width: 100%;
		float: none;
	}


	.footer-box.footer-popular ul li {
    	width: 30%;
    	height: 132px;
    }

    .footer-popular a.wpp-post-title{
	    padding: 30px 10px;
    }

    #footer-kontakt{
	    display: none;
    }
    
    
    .kp-main-image img {
    	width: 90%;
    }
    .kp-col{
	    width: 100%;
    }
    .kp-col-center {
    	width: 100%;
    	padding: 10px;
    }
    
    #kp-order-form div#nf-form-3-cont {
    	width: 100%;
    }
    
    

}


@media (min-width: 540px) and (max-width: 768px){

	.info-box-home,
	.info-box {
	    width: 50%;
	    height: auto;
	}

}


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1024px) {

	#main-nav, #the-wormy, .photo6, .vicovi-box:nth-child(6), #contact-up, .ad-header{
		display: none;
	}


        #the-mobile-menu{
            width: 40%;
            transform: translate3d(250%, 0, 0);
            -webkit-transform: translate3d(250%, 0, 0);
        }
        .mobile-menu-active #the-mobile-menu {
            transform: translate3d(150%, 0, 0);
            -webkit-transform: translate3d(150%, 0, 0);
            overflow: scroll;
        }

	#logo {
	    padding: 15px 0px;
	    width: 190px;
	}

	#logo img{
		width: 100%;
	}

	#ham-menu{
		display: block;
	}



	.wrap{
		width: 100%;
		padding: 0 15px;
	}

	#crafts a.bx-prev{
	left: 0px;
	}
	#crafts a.bx-next{
		right: 0px;
	}

	.info-box-home {
		width: 50%;
		height: auto;
		text-align: center;
		padding: 5px 10px;
	}

	.info-box-info{
		width: 100%;
	    min-height: 140px;
        padding: 5px 40px;
		text-align: center;
		display: block;
	}

	.info-box-wraper{
		margin-bottom: 15px;
	}

	.info-box-image{
		padding: 35px;
	}

	.info-box{
		padding: 0px 10px;
	}

	.info-box .info-box-info {
	    min-height: 70px;
	    padding-top: 10px;
        padding: 0;
	}

	.info-box-title {
	    font-size: 14px;
	    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	}




	#subjects{
		padding: 0px;
	}

	.subjects-box{
		width: 33.33334%;
		height: auto;
	}



	.crafts-box{
		width: 47.2%;
	}


	.photo-box{
            width: 160px;
            height: 160px;
	}

	.photo-box:nth-child(5){
            top: 50px;
	}

	.vicovi-box{
            width: 25%;
            height: 360px;
	}

        .contact-info{
            width: 95%;
        }


}

@media (min-width: 769px) and (max-width: 890px) {
    .info-text{
        width: 100%;
        padding: 15px 0px;
    }
}


@media (min-width: 891px) and (max-width: 1024px) {

    .info-text{
        width: 513px;
    }

}

@media (min-width: 1024px) and (max-width: 1220px) {


	.wrap{
		width: 960px;
	}

	nav ul li a {
	    padding: 10px 7.55px;
	    padding-top: 15px;
	    font-size: 14px;
	}

	ul.sub-menu li a{
	    padding: 5px 10px;
	    font-size: 12px;
	}

	#contact-up{
	    width: 24%;
	}

	.info-box-home {
		padding: 25px 15px;
	}

	.photo-box{
		width: 170px;
		height: 170px;
	}

	.photo-box:nth-child(1) {
	    width: 140px;
	    height: 140px;
	}

	.photo-box:nth-child(2) {
	    width: 150px;
	    height: 150px;
	}

	.photo-box:nth-child(3) {
	    width: 160px;
	    height: 160px;
	}

	.photo-box:nth-child(5) {
	    width: 170px;
	    height: 170px;
	}



	#vicovi{
		height: 370px;
	}

	.footer-box.footer-popular ul li {
	    width: 110px;
	    height: 112px;
	}
	.footer-popular a.wpp-post-title{
		padding: 40px 10px;
	}

	.info-box .info-box-info {
	    min-height: 100px;
	    padding-top: 10px;
	}
	.info-box-text{
		display: none;
	}
	.info-box-title {
	    font-size: 14px;
	    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	}

	.info-text{
		width: 630px;
	}

	.classes-box-title{
		font-size: 14px;
		height: 70px;
	}

}




/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}


/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}


	header,footer,.category-title,
	.underline-image,.single-zadaca-btns,.clear,.zadaca-title-wrap,
	.info-meta, .info-footer, .sidebar, .rocket-launch, .rocket-to-top, #the-solar-system, #the-mobile-menu, #main-nav{
		display: none;
	}

	.info-text, .info-text-image{
		margin: 0; padding: 0;
		float: none;
		width: 100%;
		height: auto;
	}

	.info-text img{
		border: 0;
		float: none;
	}

	#info, #single-info{
		padding: 0;
	}

	.wrap{
		width: 100%;
	}

	.single-zadaca img{
		width: 100%;
		border: none;
	}
}

/*------------------------------------*\
    PAGE GRADINKA
\*------------------------------------*/

.page-gradinka .hero-banner {
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	height: 70vh;
}

.page-gradinka .full-wrap {
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.page-gradinka .hero-banner-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	height: 100%;
	color: white;
	max-width: 690px;
	margin: auto;
	text-align: center;
	width: 100%;
}

.page-gradinka .hero-banner-content p {
	font-size: 25px;
	line-height: 35px;
	margin: 10px 0px;
}

.page-gradinka .under-hero {
	padding: 50px 0;
}

.page-gradinka .under-hero-content {
	text-align: center;
}

.page-gradinka .under-hero img {
	max-width: 600px;
	width: 100%;
}

.page-gradinka .left-right .wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 30px;
	justify-content: space-between;
}

@media screen and (min-width: 768px) {

	.page-gradinka .left-right .wrap {
		flex-direction: row;
	}
}

.page-gradinka .left-right .wrap:last-child {
	display: block;
	padding: 30px;
}

.page-gradinka .left-right .wrap .img,
.page-gradinka .left-right .wrap .text {
	width: 100%;
}

@media screen and (max-width: 768px) {

	.page-gradinka .left-right .wrap .img {
		order: 1;
	}
}

@media screen and (min-width: 768px) {

	.page-gradinka .left-right .wrap .img,
	.page-gradinka .left-right .wrap .text {
		width: 48%;
	}
}

.page-gradinka .left-right .wrap .text ul li {
	font-size: 18px;
	line-height: 26px;
}