/* Default tab style */

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'stroke7pixeden';
	src:url('../fonts/stroke7pixeden/stroke7pixeden.eot?u58ytb');
	src:url('../fonts/stroke7pixeden/stroke7pixeden.eot?#iefixu58ytb') format('embedded-opentype'),
		url('../fonts/stroke7pixeden/stroke7pixeden.woff?u58ytb') format('woff'),
		url('../fonts/stroke7pixeden/stroke7pixeden.ttf?u58ytb') format('truetype'),
		url('../fonts/stroke7pixeden/stroke7pixeden.svg?u58ytb#stroke7pixeden') format('svg');
}

.tabs {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	font-weight: 300;
	font-size: 16px;;
}

/* Nav */
.tabs nav {
	text-align: center;
}

.tabs nav ul {
	position: relative;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
	list-style: none;
	-ms-box-orient: horizontal;
	-ms-box-pack: center;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
}

.tabs nav ul li {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0;
	text-align: center;
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.tabs nav a {
	position: relative;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 2.5;
}

.tabs nav a span {
	vertical-align: middle;
	font-size: 22px;
}

.tabs nav li.tab-current a {
	color: #74777b;
}

.tabs nav li.tab-current a:hover {
    text-decoration: none;}

.tabs nav a:focus {
	outline: none;
}

/* Icons */
.icon::before {
	z-index: 10;
	display: inline-block;
	margin: 0 0.4em 0 0;
	vertical-align: middle;
	text-transform: none;
	font-weight: normal;
	font-variant: normal;
	font-size: 19px;
	font-family: 'stroke7pixeden';
	line-height: 1;
	speak: none;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-upload::before {
	content: "\e68a";
}
.icon-tools::before {
	content: "\e60a";
}
.icon-plane::before {
	content: "\e625";
}
.icon-joy::before {
	content: "\e6a4";
}
.icon-plug::before {
	content: "\e69a";
}
.icon-home::before {
	content: "\e648";
}
.icon-gift::before {
	content: "\e652";
}
.icon-display::before {
	content: "\e65e";
}
.icon-date::before {
	content: "\e660";
}
.icon-config::before {
	content: "\e666";
}
.icon-coffee::before {
	content: "\e669";
}
.icon-camera::before {
	content: "\e66f";
}
.icon-box::before {
	content: "\e674";
}

/* Content */
.content-wrap {
	position: relative;
}

.content-wrap section {
	display: none;
	margin: 0 auto;
	padding: 1em;
	max-width: 1200px;
	text-align: left;
}

.content-wrap section.content-current {
	display: block;
}

.content-wrap section p {
	margin: 0;
	padding: 0.75em 0;
	color: rgba(40,44,42,0.05);
	font-weight: 900;
	font-size: 4em;
	line-height: 1;
}

/* Fallback */
.no-js .content-wrap section {
	display: block;
	padding-bottom: 2em;
	border-bottom: 1px solid rgba(255,255,255,0.6);
}

.no-flexbox nav ul {
	display: block;
}

.no-flexbox nav ul li {
	min-width: 15%;
	display: inline-block;
}

@media screen and (max-width: 58em) {
	.tabs nav a.icon span {
		display: none;
	}
	.tabs nav a:before {
		margin-right: 0;
	}
}






/* others */

#masonry {
  column-count: 2;
  column-gap: 1em;
}

@media(min-width: 30em) {
  #masonry {
    column-count: 3;
    column-gap: 1em;
  }
}

@media(min-width: 40em) {
  #masonry {
    column-count: 4;
    column-gap: 1em;
  }
}

@media(min-width: 60em) {
  #masonry {
    column-count: 5;
    column-gap: 1em;
  }
}

@media(min-width: 75em) {
  #masonry {
    column-count: 6;
    column-gap: 1em;
  }
}

.items {
  background-color: none;
  display: inline-block;
  margin: 0 0 1em 0;
  width: 100%;
  cursor: pointer;
}

.items img {
  max-width: 100%;
  height: auto;
  width: 100%;
  margin-bottom: -4px;
  
  /*idk why but this fix stuff*/
}

.items.active {
  animation-name: active-in;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.items.active:before {
  content: "+";
  transform: rotate(45deg);
  font-size: 48px;
  color: white;
  position: absolute;
  top: 20px;
  right: 20px;
  background-color:rgba(0,0,0,0.85);
  border-radius: 50%;
  width:48px;
  height:48px;
  text-align:center;
  line-height:48px;
  z-index:12;
}

.items.active img {
  animation-name: active-in-img;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}


@keyframes active-in {
  0% {
    opacity:1;
    background-color:white;
  }
  
  50% {
    opacity:0;
    background-color:rgba(0,0,0,0.90);
  }
  
  100% {
    opacity: 1;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.90);
  }
}

@keyframes active-in-img {
  0% {
    opacity:1;
    transform:translate(0%, 0%);
    top: 0;
    left: 0;
    max-width: 100%;
  }
  49% {
    opacity:0;
    transform: translate(0%, -50%);
  }
  50% {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
  }
  100% {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  width: auto;
  max-height: 95vh;
  opacity:1;
  }
}

/* others end*/




/* snow*/



	
    .header{
        margin: 0 0 30px;
	
        background: url(../img/snow-bg.png) center;
		-webkit-animation: animate-snow 9s linear infinite;
		-moz-animation: animate-snow 9s linear infinite;
		-ms-animation: animate-snow 9s linear infinite;
		animation: animate-snow 9s linear infinite;		
    }
	
	@-webkit-keyframes animate-snow
	{
		0% { background-position: center 0, 0 0;}
		100% { background-position: center 885px, 0 0;}
	}

	@-moz-keyframes animate-snow
	{
		0% { background-position: center 0, 0 0;}
		100% { background-position: center 885px, 0 0;}
	}
	
	@-ms-keyframes animate-snow
	{
		0% { background-position: center 0, 0 0;}
		100% { background-position: center 885px, 0 0;}
	}		

	@keyframes animate-snow
	{
		0% { background-position: center 0, 0 0;}
		100% { background-position: center 885px, 0 0;}
	}	
	
   /* .wrapper{
        width: 100%;
		height: auto;
		margin: auto;
		overflow: hidden;
		 position: relative; 
	 background: url(../img/wrapper-bg.png) no-repeat center bottom;
    }	*/
 
	@-moz-keyframes animate-drop {
	   
		0% {opacity:0;-moz-transform: translate(0, -315px);}
		100% {opacity:1;-moz-transform: translate(0, 0);}
	}

	@-webkit-keyframes animate-drop {
	   
		0% {opacity:0;-webkit-transform: translate(0, -315px);}
		100% {opacity:1;-webkit-transform: translate(0, 0);}
	}
	
	@-ms-keyframes animate-drop {
	   
		0% {opacity:0;-ms-transform: translate(0, -315px);}
		100% {opacity:1;-ms-transform: translate(0, 0);}
	}

	@keyframes animate-drop {
	   
		0% {opacity:0;transform: translate(0, -315px);}
		100% {opacity:1;transform: translate(0, 0);}
	}  	
    




/* snow end*/


.footer-bottom {
    background-color: #fff;
    min-height: 30px;
    width: 100%;
}
.copyright {
    color: #000;
    line-height: 4px;
    min-height: 30px;
    padding: 4px 0;
	font-size:15px;
}
.design {
    color: #000;
    line-height: 4px;
    min-height: 30px;
    padding: 4px 0;
    text-align: right;
	font-size:15px;
}
.design a {
    color: #000;
}

.flow {height:755px !important;}

@media screen and (max-width: 767px) {
	
	.footer-bottom {
    background-color: #fff;
    min-height: 30px;
    width: 100%;
}
.copyright {
    color: #000;
    line-height: 10px;
    min-height: 30px;
    padding: 10px 0;
	font-size:15px;
	   text-align: center !important;
}
.design {
    color: #000;
    line-height: 10px;
    min-height: 30px;
    padding: 10px 0;
    text-align: center !important;
	font-size:15px;
}
.design a {
    color: #000;
}

.flow {height: 500px !important;}

.mar1 h4 {
    margin-top: 11px;
    font-size: 15px;
}	

.st-head {
    font-size: 20px;
}

.social {
    font-size: 21px;
  
    color: #fff;
    margin-top: 6px;
}

}