/*!
 * Bootstrap v2.1.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 *
 * Theme Name: Vermn
 * Theme URI: http://www.codegrape.com
 * Description: A Responsive Underconstruction Theme For You
 * Author: Jogres
 * Author URI: http://www.jogres.com
 */

body {
/*font-family: 'Oswald' !important;*/
font-family: 'monainn_webfont' !important;
text-shadow: 4px 4px rgba(0, 0, 0, 0.55) !important;
}

.subscribe p, .header-widget h4 {
    color: #fff;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.55) !important;
}

.logo.dark p, .description.dark p {
    color: #fff;
}

#fb-feed {
    position: static;
    visibility: visible;
    display: inline-block;
    width: 520px;
    height: 250px;
    padding: 0px;
    border: none;
    max-width: 100%;
    min-width: 180px;
    margin-top: 0px;
    margin-bottom: 0px;
    min-height: 200px;
}

div.loader {
    position: fixed;
background: url(../images/search_loader.gif) no-repeat center center;
background-size: 6%;
background-color: #fff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

div#cologo-area {
    position: fixed;
    bottom: 0;
    width: 100%;
    min-height: 50px;
}

.description.dark p {
    font-size:24px !important;
    line-height: 30px;
}

ul#supersized {
    margin: 0;
}

.description.dark p, .time, .time span, .copy.dark {
    text-shadow: 2px 1px #000;
}

input#submit {
    font-size: 14px;
    background: #A27BD6;
    border-radius: 0;
    border: 0;
}

input.emailsubscribe.input-large.email.span4 {
    border: 0;
    border-radius: 0;
}

.subscribe {
    margin-top: 50px;
}

.socmed .twitter a {
    background: url(../images/tt.png)no-repeat center;
    background-size: 100%;
-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.socmed .twitter a:hover {
    background: url(../images/tth.png)no-repeat center;
    background-size: 100%;
}

.socmed .instagram a {
    background: url(../images/ins.png)no-repeat center;
    background-size: 100%;
-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.socmed .instagram a:hover {
    background: url(../images/insh.png)no-repeat center;
    background-size: 100%;
}

.socmed .facebook a {
    background: url(../images/fb.png)no-repeat center;
    background-size: 100%;
-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.socmed .facebook a:hover {
    background: url(../images/fbh.png)no-repeat center;
    background-size: 100%;
}

.socmed .google a {
    background: url(../images/gg.png)no-repeat center;
    background-size: 100%;
-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.socmed .google a:hover {
    background: url(../images/ggh.png)no-repeat center;
    background-size: 100%;
}

.socmed .linkedin a {
    background: url(../images/lin.png)no-repeat center;
    background-size: 100%;
-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.socmed .linkedin a:hover {
    background: url(../images/linh.png)no-repeat center;
    background-size: 100%;
}

.socmed .mail a {
    background: url(../images/mail.png)no-repeat center;
    background-size: 100%;
-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.socmed .mail a:hover {
    background: url(../images/mailh.png)no-repeat center;
    background-size: 100%;
}

.socmed .youtube a {
    background: url(../images/yt.png)no-repeat center;
    background-size: 100%;
-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.socmed .youtube a:hover {
    background: url(../images/yth.png)no-repeat center;
    background-size: 100%;
}

.fancybox-inner {
    overflow-x: hidden !important;
}

@media only screen and (min-width:240px) {
img#cologo {
    width: 200px;
}
div#cologo-area {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 40%;
    min-height: 50px;
}
ul#supersized img {
    max-width: 200% !important;
}
div#cologo-area img {
width: 100%;
}
#contact input, .txtarea {
    width: 90% !important;
}
.logo.dark p {
    font-size: 125px;
}
    }

@media only screen and (min-width:480px){
img#cologo {
padding-top: 0px;
    width: 200px;
}

.logo.dark p {
    font-size: 135px;
}

#contact input, .txtarea {
    width: 320px !important;
    margin-right: 20px;
}

body .container {
    padding-left: 10px;
}
    }

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

.logo.dark p {
    /*font-size: 210px;*/
    /*font-size: 190px;*/

}
    }

@media only screen and (min-width:1000px){
div#cologo-area {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 30%;
    min-height: 50px;
}
}

@media only screen and (min-width:360px){
.small-fb {
display:inline-block !important;
}
.medium-fb, .large-fb {
display:none !important;
}
}

@media only screen and (min-width:768px){
.medium-fb {
display:inline-block !important;
}
.small-fb, .large-fb {
display:none !important;
}
}

@media only screen and (min-width:980px){
.large-fb {
display:inline-block !important;
}
.medium-fb, .small-fb {
display:none !important;
}
}

@media only screen and (min-width:1200px){
.small-fb {
display:inline-block !important;
}
.medium-fb, .large-fb {
display:none !important;
}
}

div#cologo-area img {
width: 100%;
}
    

body {
	font-family: 'Bebas', Arial, sans-serif;
	width:100%;
	height:100%;
	margin: 0;
	}
	
.nav-content{
	padding-top: 30px;
}
.nav-content:{
	left: 0px;
	opacity: 1;
}
.nav-content a{
	text-align: left;
	display: block;
	font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
	text-decoration: none;
	border: 8px solid #fff;
	padding: 2%;
	font-size: 40px;
	text-shadow: 0px 0px 10px rgba(255,255,255,0.9);
	color: rgba(255,255,255,0.1);
	line-height: 66px;
	margin: 0 0 20px 0;
	outline: none;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
	-webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; 
	background-clip: padding-box;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.nav-content a:hover{
	box-shadow: 1px 3px 7px rgba(0,0,0,0.25);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	color: rgba(255,255,255,0.9);
	border: 8px solid #000;
}

/* Main Items */
.with-slideshow a{
	background: url(../images/background/01.png) no-repeat center center;
	margin: 0 0 30px;
}
.without-slideshow a{
	background: url(../images/background/12.png) no-repeat center center;
	margin: 0 0 30px;
}
.light-pattern a{
	background: url(../images/background/09.png) no-repeat center center;
	margin: 0 0 30px;
}
.dark-pattern a{
	background: url(../images/background/13.png) no-repeat center center;
	margin: 0 0 30px;
}

.header-light {
    background: rgba(0,0,0,0.7);
}
.header-dark {
    background: rgba(255,255,255,0.3);
}
.header {
	color: #fff;
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	display: block;
}
.header-widget {
	margin: 30px auto;
	position: relative;
	color: #fff;
}
.header-widget h4 {
	text-align: center;
	margin-bottom: 10px;
}
.header-content {
	display: none;
}
.subscribe {
	margin-bottom: 30px;
	position: relative;
	display: block;
    text-align: center;
}
.subscribe p{
	font-size: 14px;
	margin-bottom: 10px;
}
.emailsubscribe {
	color: #aaa!important;
}
.done {
	font-family: 'Arial', sans-serif;
	font-size: 14px;
	height: 40px;
	background-color: #fff;
	color: #000;
	margin-bottom: 30px;
	padding: 10px 0;
	display: none;
	position: relative;
    text-align: center;
	border-radius: 5px;
}
#twitter-feed {
	font-family: Arial;
	font-size: 12px;
	list-style: none;
	line-height:1.5;
	margin-bottom: 30px;
}
#twitter-feed ul.tweet_list {
	height:10em;
	overflow-y:hidden;
}
#twitter-feed .tweet_list li {
	height: 100%;
      }
#twitter-feed a {
	color: #aaa;
	text-decoration: none;
	-o-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	-ms-transition:all .3s;
}
#twitter-feed a:hover {
	color: #00d2ff;
}
.twitter-feed,
.query {
	font: 120% Georgia, serif;
	color: #FFF;
}
.tweet_list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: hidden;
}
.tweet_list li {
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0.5em;
	list-style-type: none;
}
.tweet_list li a {
	color: #0C717A;
}
.tweet_list .tweet_avatar {
	padding-right: .5em; float: left;
}
.tweet_list .tweet_avatar img {
	vertical-align: none;
	margin-top: 5px;
}
.flickr-thumbs { margin: 0 auto 30px; padding: 0 15px; overflow: hidden; }
.flickr-thumbs li { list-style: none; float: left; margin: 5px; padding: 3px; background: #eee; -moz-box-shadow: 0 0 4px #444; -webkit-box-shadow: 0 0 2px #000; -o-box-shadow: 0 0 2px #000; }
.flickr-thumbs li a { }
.flickr-thumbs li img { display: block; }
.flickr-thumbs li a img { border: none; width:50px; opacity:1; transition:all 200ms linear 0s;}
.flickr-thumbs li a img:hover { opacity:0.8; transition:all 200ms linear 0s;}
.close-header {
	position:absolute;
	cursor: pointer;
	width: 35px;
	margin: 0 0 0 auto;
	padding: 0;
	position: relative;
	display: none;
}
.open-header {
	position:absolute;
	cursor: pointer;
	width: 35px;
	margin: 0 0 0 auto;
	padding: 0;
	position: relative;
	display: block;
}
.light {
	color: #666;
}
.dark {
	color: #fff;
}
.logo {
	margin: 0 0 20px;
	position: relative;
	display: inherit;
	font-size: 210px;
	line-height: 220px;
}
.description, .countdown, .socmed {
	/*margin-bottom: 20px;*/
	margin-bottom: 55px;
}
.description, .countdown {
	font-size: 14px;
	position: relative;
	display: block;
	line-height: 18px;
}
.time span {
	font-size: 50px;
	line-height: 65px;
}
.slash {
	margin: 0 4px;
	display: inline;
}
.socmed {
	max-width: 340px;
	position: relative;
	display: block;
	overflow: hidden;
}
.vimeo a, .instagram a, .mail a, .pinterest a, .google a, .twitter a,.facebook a,.tumblr a,.dribbble a,.linkedin a,.rss a,.delicious a,.devianart a,.digg a,.digg2 a,.flickr a,.lastfm a,.myspace a,.picasa a,.sharethis a,.skype a,.twitter2 a,.vimeo a,.youtube a,.yahoo a,.yahoo2 a,.wikipedia a {
	float:left;
	background:url(../images/socmed.png) no-repeat left bottom;
	text-indent:8000px;
	width:32px;
	height:32px;
	margin-right:10px;
	-o-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	-ms-transition:all .3s;
}
.twitter a:hover,.facebook a:hover,.tumblr a:hover,.dribbble a:hover,.linkedin a:hover,.rss a:hover,.delicious a:hover,.devianart a:hover,.digg a:hover,.digg2 a:hover,.flickr a:hover,.lastfm a:hover,.myspace a:hover,.picasa a:hover,.sharethis a:hover,.skype a:hover,.twitter2 a:hover,.vimeo a:hover,.youtube a:hover,.yahoo a:hover,.yahoo2 a:hover,.wikipedia a:hover {
	background:url(../images/socmed.png) no-repeat left top;
}
.twitter,.twitter a{background-position:-0px bottom}
.twitter a:hover{background-position:-0px top}
.twitter2,.twitter2 a{background-position:-528px bottom}
.twitter2 a:hover{background-position:-528px top}
.facebook,.facebook a{background-position:-33px bottom}
.facebook a:hover{background-position:-33px top}
.tumblr,.tumblr a{background-position:-66px bottom}
.tumblr a:hover{background-position:-66px top}
.dribbble,.dribbble a{background-position:-99px bottom}
.dribbble a:hover{background-position:-99px top}
.linkedin,.linkedin a{background-position:-133px bottom}
.linkedin a:hover{background-position:-133px top}
.rss,.rss a{background-position:-166px bottom}
.rss a:hover{background-position:-166px top}
.delicious,.delicious a{background-position:-199px bottom}
.delicious a:hover{background-position:-199px top}
.devianart,.devianart a{background-position:-233px bottom}
.devianart a:hover{background-position:-233px top}
.digg,.digg a{background-position:-266px bottom}
.digg a:hover{background-position:-266px top}
.digg2,.digg2 a{background-position:-299px bottom}
.digg2 a:hover{background-position:-299px top}
.flickr,.flickr a{background-position:-331px bottom}
.flickr a:hover{background-position:-331px top}
.lastfm,.lastfm a{background-position:-364px bottom}
.lastfm a:hover{background-position:-364px top}
.myspace,.myspace a{background-position:-397px bottom}
.myspace a:hover{background-position:-397px top}
.picasa,.picasa a{background-position:-431px bottom}
.picasa a:hover{background-position:-431px top}
.sharethis,.sharethis a{background-position:-464px bottom}
.sharethis a:hover{background-position:-464px top}
.skype,.skype a{background-position:-497px bottom}
.skype a:hover{background-position:-497px top}
.vimeo,.vimeo a{background-position:-562px bottom}
.vimeo a:hover{background-position:-562px top}
.youtube,.youtube a{background-position:-594px bottom}
.youtube a:hover{background-position:-594px top}
.yahoo,.yahoo a{background-position:-628px bottom}
.yahoo a:hover{background-position:-628px top}
.yahoo2,.yahoo2 a{background-position:-662px bottom}
.yahoo2 a:hover{background-position:-662px top}
.wikipedia,.wikipedia a{background-position:-694px bottom}
.wikipedia a:hover{background-position:-694px top}

.copy {
	width: 100%;
	position: relative;
	display: block;
	margin-bottom: 40px;
}
.copy a {
	text-decoration: none;
	-o-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	-ms-transition:all .3s;
}
.dark a {
	color: #fff;
}
.light a {
	color: #666;
}
.copy a:hover {
	color:#00d2ff;
}

/* #Media Queries
================================================== */
	
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 976px) {

.twitter-feed ul {
	padding: 0 100px;
}

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 976px) {
.twitter-feed ul {
	padding: 0 100px;
}

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

.twitter-feed ul {
	padding: 0 30px;
}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 480px) {
.logo {
	font-size: 100px;
	line-height: 140px;
}	
.slash {
	margin: 0 15px;
}
	}
	

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file 
		Just create a "fonts" folder at the root, 
		copy your FontName into code below and remove
		comment brackets */
		
/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/