/*
Theme Name: Roger.is/off
Theme URI: http://roger.is/off
Description: Roger.is Wordpress Theme
Author: Roger Burkhard
Author URI: http://www.roger.is/off
*/

/*------------------------------------------------------
THE BIG FAT RESET
------------------------------------------------------*/

html, body, div, span, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
	margin: 0;
	padding: 0;
}

/*------------------------------------------------------
IMPORT FONTS
------------------------------------------------------*/

@font-face {
    font-family: 'VollkornRegular';
    src: url('Vollkorn-Regular-webfont.eot');
    src: url('styles/fonts/Vollkorn-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('styles/fonts/Vollkorn-Regular-webfont.woff') format('woff'),
         url('styles/fonts/Vollkorn-Regular-webfont.ttf') format('truetype'),
         url('styles/fonts/Vollkorn-Regular-webfont.svg#VollkornRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'VollkornBold';
    src: url('Vollkorn-Bold-webfont.eot');
    src: url('styles/fonts/Vollkorn-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('styles/fonts/Vollkorn-Bold-webfont.woff') format('woff'),
         url('styles/fonts/Vollkorn-Bold-webfont.ttf') format('truetype'),
         url('styles/fonts/Vollkorn-Bold-webfont.svg#VollkornBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'VollkornItalic';
    src: url('Vollkorn-Italic-webfont.eot');
    src: url('styles/fonts/Vollkorn-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('styles/fonts/Vollkorn-Italic-webfont.woff') format('woff'),
         url('styles/fonts/Vollkorn-Italic-webfont.ttf') format('truetype'),
         url('styles/fonts/Vollkorn-Italic-webfont.svg#VollkornItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'VollkornBoldItalic';
    src: url('styles/fonts/Vollkorn-BoldItalic-webfont.eot');
    src: url('styles/fonts/Vollkorn-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('styles/fonts/Vollkorn-BoldItalic-webfont.woff') format('woff'),
         url('styles/fonts/Vollkorn-BoldItalic-webfont.ttf') format('truetype'),
         url('styles/fonts/Vollkorn-BoldItalic-webfont.svg#VollkornBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CharisSILRegular';
    src: url('styles/fonts/CharisSILR-webfont.eot');
    src: url('styles/fonts/CharisSILR-webfont.eot?#iefix') format('embedded-opentype'),
         url('styles/fonts/CharisSILR-webfont.woff') format('woff'),
         url('styles/fonts/CharisSILR-webfont.ttf') format('truetype'),
         url('styles/fonts/CharisSILR-webfont.svg#CharisSILRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CharisSILItalic';
    src: url('styles/fonts/CharisSILI-webfont.eot');
    src: url('styles/fonts/CharisSILI-webfont.eot?#iefix') format('embedded-opentype'),
         url('styles/fonts/CharisSILI-webfont.woff') format('woff'),
         url('styles/fonts/CharisSILI-webfont.ttf') format('truetype'),
         url('styles/fonts/CharisSILI-webfont.svg#CharisSILItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CharisSILBold';
    src: url('styles/fonts/CharisSILB-webfont.eot');
    src: url('styles/fonts/CharisSILB-webfont.eot?#iefix') format('embedded-opentype'),
         url('styles/fonts/CharisSILB-webfont.woff') format('woff'),
         url('styles/fonts/CharisSILB-webfont.ttf') format('truetype'),
         url('styles/fonts/CharisSILB-webfont.svg#CharisSILBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CharisSILBoldItalic';
    src: url('styles/fonts/CharisSILBI-webfont.eot');
    src: url('styles/fonts/CharisSILBI-webfont.eot?#iefix') format('embedded-opentype'),
         url('styles/fonts/CharisSILBI-webfont.woff') format('woff'),
         url('styles/fonts/CharisSILBI-webfont.ttf') format('truetype'),
         url('styles/fonts/CharisSILBI-webfont.svg#CharisSILBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*------------------------------------------------------
GENERAL
------------------------------------------------------*/

html {
	height: 100%;
	background:#F2F2F2;
	padding:10px;
}

body {
	width:100%;
	font: 300 14px/22px 'Open Sans', Helvetica, Arial, Verdana, sans-serif;
	color: #837e73;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

body.mobile {
	font-size:28px !important;
	line-height:35px !important;
}

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

h1 {
	margin: 0;
	padding: 0;
	font: 300 50px/65px 'Open Sans', Helvetica, Arial, Verdana, sans-serif;
	color:#000;
	letter-spacing: -0.5px;
	opacity:0.7;
	font-weight: -1000 !important;
}

body.mobile h1 {
	font-size:50px;
	line-height:60px;
	margin-top:-10px;
	position: relative;
}

h2 {
	margin: 0;
	padding: 0;
	font: 300 30px/35px 'Open Sans', Helvetica, Arial, Verdana, sans-serif;
	color:#000;
	letter-spacing: -0.5px;
	opacity:0.7;
	font-weight: -1000 !important;
}

.mobile h2 {
	font-size:50px;
	line-height:70px;
}


/*------------------------------------------------------
GENERAL LINKS
------------------------------------------------------*/

a {
	outline: none;
	text-decoration: underline;
}

a:hover {
	color: #393630;
}

/* Firefox Hack to elmininate that ugly dotted line */
:focus {
	-moz-outline-style: none;
}

/*
a:active{
	position:relative;
	top:1px;
}*/

a:active.follow_button, .box:active {
	position:relative;
	top:1px;
}

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

img {
	border: none 0;
}

/*------------------------------------------------------
CLEAR
------------------------------------------------------*/

.clear {
	clear: both;
}

.border {
	display:block;
	position: fixed;
	z-index:100;
	background: #fff;
}

.border_top {
	left:0;
	top:0;
	height:20px;
	width: 100%;
}

.border_right {
	right:0;
	top:0;
	height:100%;
	width: 20px;
}

.border_bottom {
	bottom:0;
	left:0;
	height: 20px;
	width: 100%;
}

.border_left {
	left:0;
	top:0;
	width: 20px;
	height: 100%;
}

/*------------------------------------------------------
HOME
------------------------------------------------------*/

.bg_container {
	display: block;
	z-index:2;
	position: fixed;
	right: 0;
	width: 100%;
}

.bg {
	position:fixed;
	height: 100%;
	bottom:0;
	right:0;
	z-index: -1;
	-webkit-transition: width 1s ease, height 1s ease;
	-moz-transition: width 1s ease, height 1s ease;
	right:-100000px;
}

.bg_image_container {
	text-align: right;
	height: 100%;
	position: fixed;
	right: 0;
}

.bg_image_container img {
	position: fixed;
	right: 0;
}

body.mobile .bg_image_container img {
	right:-220px;
}

.centered_box {
	display:block;
	width:80%;
	height:210px;
	top:50%;
	left:50%;
	margin-left:-40%;
	margin-top:-125px;
	position:absolute;
	z-index:2;
	text-align:center;
}

body.mobile .centered_box {
	height: 600px;
	margin-top:-280px;
	left:48%;
}

.centered_box h1 {
	font: 800 100px/110px 'Open Sans',Helvetica,Arial,Verdana,sans-serif;
	text-transform:uppercase;
}

body.mobile .centered_box h1 {
	font: 900 140px/130px 'Open Sans',Helvetica,Arial,Verdana,sans-serif;
}

.centered_box .byline {
	font-size:18px;
	color: #6f6f6f;
	margin-top:14px;
	opacity:0.7;
}

body.mobile .byline {
	font-size:30px;
	line-height:40px;
	font-weight:400;
	padding-bottom:10px;
}

.centered_box a.follow_button {
	display:block;
	width:160px;
	height:34px;
	line-height:36px;
	background:#909090;
	color:#fff;
	text-decoration:none;
	margin:0 auto;
	margin-top:26px;
	cursor: pointer;
}

body.mobile .centered_box a.follow_button {
	font-size:30px !important;
	width: 300px;
	height:50px;
	line-height:50px;
	background:#000;
	padding:15px;
}

/*------------------------------------------------------
WRAPPER
------------------------------------------------------*/

#wrapper {
	display:block;
	width:100%;
}

/*------------------------------------------------------
CONTENT
------------------------------------------------------*/

#content {
	display: none;
	background: #F2F2F2;
	width: 100%;
	z-index:1;
	position: absolute;
}

/*------------------------------------------------------
JOURNAL
------------------------------------------------------*/

.journal {
    display: block;
    margin: 75px auto 75px auto;
    width: 80%;
}

ul.navigation {
	display: block;
	width: 100%;
	list-style:none;
}

ul.navigation li {
	display: block;
	width: 33%;
	float: left;
}

ul.navigation li a {
	font-size:18px;
	color:#aaaaaa;
	text-decoration: none;
	margin-top:10px;
	padding-bottom:5px;
}

body.mobile ul.navigation li a {
	font-size:25px;
}

ul.navigation li a:hover {
	color:#3c3b3b;
	border-bottom:1px solid #aaaaaa;
}

ul.navigation li.column_left {
	text-align: left;
	margin-top:13px;
}

ul.navigation li.column_middle {
	text-align: center;
	font-size: 50px;
	color:#3c3b3b;
}

ul.navigation li.column_middle .title_journal {
	display: block;
	height: 60px;
}

ul.navigation li.column_middle .middle_border {
    background: none repeat scroll 0 0 #3C3B3B;
    clear: both;
    display: block;
    float: none;
    height: 1px;
    margin: 0 auto;
    width: 10%;
}

ul.navigation li.column_right {
	text-align: right;
	margin-top:13px;
}

.overview {
	display: block;
    clear: both;
    width: 100%;
    margin:0 auto;
    padding-top:60px;
}

.overview .col {
	width: 33%;
	float: left;
	position: relative;
}

.overview .clear {
	clear:none;
}

.overview .thumbnail {
	display: block;
	cursor:pointer;
	width: 95%;
	margin-bottom:7%;
	-webkit-box-shadow:3px 3px 3px #d2d2d3; 
	-moz-box-shadow: 3px 3px 3px #d2d2d3; 
	box-shadow:3px 3px 3px #d2d2d3;
	zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=0, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=45, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=90, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=135, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=180, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=225, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=260, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=305, Strength=3);
    text-decoration: none;
}

.overview .thumbnail img {
	position: relative;
}

.overview .thumbnail img.thumbnail_image_color {
	display: none;
	position: absolute;
	left: 0;
	top:0;
}

.thumbnail .summary {
	margin-top:-10px;
	background: #fff;
	padding:10px 20px 20px 20px;
	color: #808080;
	font-size:13px;
	line-height: 24px;
	min-height: 220px;
}

body.mobile .thumbnail .summary {
	font-size:28px !important;
	line-height:35px !important;
	color: #808080;
	padding-bottom:40px;
	min-height:450px;
}


.thumbnail .summary h1 {
	font-size:20px;
	line-height: 30px;
	padding-bottom:10px;
	padding-top:10px;
	color:#676767;
	text-align: center;
}

body.mobile .thumbnail .summary h1 {
	font-size:40px;
	line-height:50px;
	padding-top:40px;
	padding-bottom:40px;
}

.thumbnail .summary .thumbnail_border {
	display: block;
	width: 20%;
	height: 1px;
	background: #AAAAAA;
	margin:0 auto;
	margin-bottom:10px;
}

body.mobile .thumbnail .summary .thumbnail_border {
	margin-bottom:30px;
}

.col3_0 .thumbnail {
	float:left;
}

.col3_1 .thumbnail {
	margin: 0 auto 7% auto;
}

.col3_2 .thumbnail {
	float: right;
}

/*------------------------------------------------------
DETAIL
------------------------------------------------------*/

.detail_page {
	display: none;
}

.detail {
	display: block;
	width: 100%;
	margin: 10px auto 75px auto;
	overflow-x:hidden;
}

.page_detail {
	display: block;
    margin: 0 auto 75px auto;
    padding-top: 40px;
    width: 80%;
}

.page_detail a {
	color:#837E73;
	text-decoration: underline;
}

.page_detail a:hover {
	color:#000;
}

body.mobile .page_detail {
	width: 85%;
}

body.mobile .page_detail {
	padding-top:20px;
}

.page_detail h1 {
	text-align: center;
}

body.mobile .page_detail h1 {
	font-size:80px;
	line-height:90px;
}

.page_detail .border_page_detail {
	display: block;
	height: 1px;
	background: #000;
	width: 5%;
	margin:30px auto 50px auto;
}

.page_detail .subtitle {
	display: block;
	text-align: center;
	margin-bottom:30px;
}

.page_detail .column_left {
	display: block;
	float:left;
	width:45%;
	padding:0 5% 0 0;
}

.page_detail .column_right {
	display: block;
	float:left;
	width:45%;
	padding:0 0 0 5%;
}

.close_detail {
    background: #000 url('images/close.gif') no-repeat left top;
    height: 39px;
    left: 50%;
    margin-left: -20px;
    position: fixed;
    top: 0;
    width: 39px;
    z-index: 1000;
    cursor: pointer;
    display: none;
    text-indent: -10000px;
}

.loader {
    background: #222222 url('images/loader.gif') no-repeat center center;
    height: 39px;
    left: 50%;
    margin-left: -20px;
    position: fixed;
    top: 0;
    width: 39px;
    z-index: 1001;
    cursor: pointer;
    display: none;
}

.snapshots {
	display: block;
	margin-top:55px;
}

.snapshots .col {
	width: 33%;
	text-align: center;
}

.snapshots img {
	margin-bottom:5%;
	border: 5px solid #fff;
}

h2 {
	display: block;
	text-align: center;
	margin-top:50px;
}

/*------------------------------------------------------
ABOUT
------------------------------------------------------*/

.about {
	display:block;
	position: absolute;
	z-index: 2;
	visibility: hidden;
}

.about .column_left, .about .column_middle, .about .column_right {
	display: block;
	width: 33%;
	float: left;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}

.about .column_left {
	margin-left: 5%;
	width: 28%;
}

.about .column_right {
	margin-right: 5%;
	width: 28%;
}

.about .column_middle {
	text-align: center;
}

.about .column_middle img.about_color {
	display: none;
	position: absolute;
}

.about a {
	color:#837E73;
	text-decoration: none;
	border-bottom:1px solid #d9d7d4;
}

.about a:hover {
	color:#3C3B3B;
}

/*------------------------------------------------------
TRIP
------------------------------------------------------*/

.trip {
	display: block;
}

.country_overview {
	display: block;
	width: 100%;
}

.country_overview .column_list {
	display: block;
}

.country_overview .column_list .column {
	display: block;
	width: 33%;
	padding:5% 0;
	float: left;
	color:#fff;
	text-align: center;
}

.country_overview .column_list .column h1 {
	color:#fff;
}

.country_overview .column_list .column.zurich {
	background: #9D7E79;
}

.country_overview .column_list .column.bangkok {
	background: #866d69;
}

.country_overview .column_list .column.indonesia {
	background: #594947;
}

.country_overview .column_list .column.vietnam {
	background: #CCAC95;
}

.country_overview .column_list .column.india {
	background: #a98e7b;
}

.country_overview .column_list .column.australia {
	background: #836e60;
}

.country_overview .column_list .column.new_zealand {
	background: #9A947C;
}

.country_overview .column_list .column.costa_rica {
	background: #827d69;
}

.country_overview .column_list .column.nicaragua {
	background: #615d4f;
}

.country_overview .column_list .column.panama {
	background: #748B83;
}

.country_overview .column_list .column.columbia {
	background: #5e726b;
}

.country_overview .column_list .column.brazil {
	background: #485852;
}

.country_overview .column_list .column.bolivia {
	background: #5B756C;
}

.country_overview .column_list .column.argentina {
	background: #4e635c;
}

.country_overview .column_list .column.zurich2 {
	background: #3e4f49;
}

.border_trip {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    height: 1px;
    margin: 20px auto;
    width: 5%;
}

/*------------------------------------------------------
COMMENTS
------------------------------------------------------*/

.comments .column_left, .comments .column_right {
	display: block;
	width: 50%;
	float: left;
	padding:0;
}

.comments .column_right {
	text-align: right;
}

.comments input {
	width: 81%;
	background: #fff;
	padding:2%;
	font-size:17px;
	border:1px solid #ccc;
	color:#837E73;
}

.comments textarea {
	width: 96%;
	margin-top:20px;
	height: 300px;
	font-size:17px;
	line-height: 22px;
	font: 500 18px/27px 'Open Sans', Helvetica, Arial, Verdana, sans-serif;
	color: #837e73;
	border:1px solid #ccc;
	resize: none;
	padding:2%;
}

.comments .submit {
	display: block;
	width: 30%;
	background: #000;
	color:#fff;
	border:none 0;
	margin:20px auto;
	-webkit-appearance: none;
}

.cool_kidz {
	display: block;
	text-align: center;
	font-size:17px;
	margin-bottom:40px;
}

#comments_done .box {
	display:block;
	width:50%;
	float:left;
	margin-bottom:5%;
}

.comment_single {
	display: block;
	background:#fff;
	cursor:pointer;
	width: 80%;
	padding:5%;
	margin:0 auto;
	-webkit-box-shadow:3px 3px 3px #d2d2d3; 
	-moz-box-shadow: 3px 3px 3px #d2d2d3; 
	box-shadow:3px 3px 3px #d2d2d3;
	zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=0, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=45, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=90, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=135, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=180, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=225, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=260, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#d2d2d3', Direction=305, Strength=3);
}

.author_date {
	display:block;
	text-align:center;
	font-size:small;
	margin-bottom:20px;
}

.comment_author {
	display:block;
	text-align:center;
	font-size:25px;
}

/*------------------------------------------------------
MEDIA QUERIES
------------------------------------------------------*/

@media all and (max-width: 1200px) and (min-width: 0) {
	.overview .col {
		width: 50%;
	}
	.col2_0 .thumbnail {
		float:left !important;
	}

	.col2_1 .thumbnail {
		float:right !important;
	}
	.overview .clear {
		clear:both;
	}
	h1 {
		font-size:40px;
		line-height:55px;
	}
	.page_detail .border_page_detail {
		margin-bottom:30px;
	}
	.centered_box h1 {
		font: 800 100px/110px 'Open Sans',Helvetica,Arial,Verdana,sans-serif;
		text-transform:uppercase;
	}
}

@media all and (max-width: 1000px) and (min-width: 0) {
	h1 {
		font-size:35px;
		line-height:45px;
	}
	.country_overview .column_list .column {
		width: 50%;
	}
	.column_list .clear {
		clear:none;
	}

	.page_detail {
		padding-top:30px;
	}
	.centered_box h1 {
		font: 800 100px/110px 'Open Sans',Helvetica,Arial,Verdana,sans-serif;
		text-transform:uppercase;
	}
}

@media all and (max-width: 800px) and (min-width: 0) {

	.overview .col {
		width: 100%;
	}
	.col .thumbnail {
		float:none !important;
		width: 100% !important;
	}
	h1 {
		font-size:30px;
		line-height:45px;
	}
	.page_detail .column_left, .page_detail .column_right {
		width: 100%;
		padding:0;
		display: inline;
	}

	.about .column_left, .about .column_middle, .about .column_right {
		width: 80%;
		margin: 20px auto 0 auto !important;
		text-align: center;
		float:none;
	}
	.about .column_left {
		margin-top:80px !important;
	}

	.about .column_right {
		padding-bottom:60px;
	}

	.country_overview .column_list .column {
		width: 100%;
	}

	.comments .column_right {
		text-align: left;
		margin-top:20px;
	}

	.comments input {
		width: 96%;
	}

	.page_detail {
		padding-top:0;
	}

	.centered_box h1 {
		font: 800 80px/80px 'Open Sans',Helvetica,Arial,Verdana,sans-serif;
		text-transform:uppercase;
	}
}