/*
Theme Name: 	jpnex2 GEN 2
Theme URI: 		https://www.japanexperterna.se
Description: 	Japanexperterna gen 2 theme
Version: 		1.0
Author: 		Marcus Richert
Author URI: 	http://www.marcusrichert.com
Tags: 			clean
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries
===========================
*/

/* ----------------------------------------------------------------------------------------------------------
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background-color: white;min-width:400px;/* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ }
::selection 		{  }

/* ----------------------------------------------------------------------------------------------------------
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ font-family: Lado, Trebuchet MS, Arial; }

h1                                       {font-family: Oswald, Futura LT, Century Gothic;}

h2 			{ font-family:Rokkitt; }
h3,
h4,
h5,
h6 			{ font-family:Lado, Trebuchet MS, Arial;font-weight:bold; }

/* ----------------------------------------------------------------------------------------------------------
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (min-width:400px) {
    /* Place your styles here for all widths greater than 400px */


}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {
    /* Place your styles here for all widths greater than 400px */

}

/* Neven Savanovvic - Responsive */

/* Smartphones (portrait and landscape) ----------- */


/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* iPhone 6, 7, 8 ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
}












@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */

    .bottomTextContainer2 {
        width: 100%;
    }

    .bottomTextContainer3 {
        width: 100%;
        padding-top: 20px;
        margin-left: 0px;
        font-size: 16px;
    }

    .bottomTable {
			width: 100%;
    margin-right: 0px;
    box-sizing: border-box;
    padding: 10px 50px;
    }

    .footer1 {
			width: 100%;
			font-size: 2.5em;
			text-align: center;
			z-index: 1;
    }

    .bottomMap {
        display: none;
    }

    #blackfooter pre {
        font-size: 2em;
    }

	.bottomTextContainer {
    height: auto;
    width: 100%;
}
	
	#contactInfo {
    width: 100%;
    height: auto;
    top: 0px;
    left: 0;
    position: relative;
		text-align: center;
    padding-bottom: 30px;
}
	
	.footer-full {
    width: 100%;
}
	
	#contactInfo h1 {
    font-size: 5em;
}
	
#contactInfo .smallText {
    font-size: 2.0em;
}
	
	h2.footer-mail {
    font-size: 4em !important;
}
	
	/* Content */
	
	.fullContent {
    padding: 30px 40px 15px 40px;
    width: 100%;
    box-sizing: border-box;
}
	
	.fullContent p {
    margin-bottom: 1em;
    font-size: 3em;
}
	
	.fullContent h3 {
    font-size: 3.5em;
}
	
	.fullContent h1 {
    font-size: 5em;
}
	
	.reseledareBox {
    width: 50%;
		box-sizing: border-box;
    padding: 10px;
}
	
	.reseledareBox .textInBox2 h4 {
    font-size: 3em;
}
	
	.reseledareBox .textInBox2 p {
    font-size: 2.5em;
}
	
		.reseledareBox .textInBox2 .s1 {
    font-size: inherit;
}
	
	.bildpil {
    display: none;
}
	
	/* Cookie notice */
#cn-notice-text {
    font-size: 2.5em;
    display: block;
    margin-bottom: 10px;
}
	a#cn-accept-cookie {
    font-size: 2.5em;
    line-height: 2em;
}
	a#cn-refuse-cookie {
    font-size: 2.5em;
    line-height: 2em;
}
		/* Om Japan */ 
	.bigArticleBoxOverlay1_1 .whiteUnderBox {
    font-size: 1.8em;
}
	.articleTextOnlyContainer {
    font-size: 3em;
}
	.bigArticleBoxOverlay2_1 .redUnderBox {
    font-size: 1.8em;
}
	.articleTextOnlyContainer {
    font-size: 3em;
    margin-bottom: 25px;
}
		.textInBox3 h4 span {
    font-size: 3em;
}
	.textInBox3 span {
    font-size: 3em;
}
	
	.mediumArticleBoxText {
    font-size: 3em;
}
	
	.mediumArticleBoxText h4 {
    font-size: inherit;
}
.mediumArticleBoxText h4 {
    font-size: inherit;
}
.smallArticleBox.brick.smallClass-16 {
    width: 100%;
}
	
	/* Post Page */
	em {
    font-size: inherit;
}
	
	.metaStuff {
    font-size: 1.8em;
    text-align: right;
}
	
	h2 {
    font-size: 5em;
}
	
	td {
    font-size: 3em;
}
	/*
	.frontpageResa {
		width: 100% !important;
    float: left;
    position: relative !important;
    display: block;
    left: inherit !important;
    top: inherit !important;
    padding: 1%;
    background: white;
		height: auto !important;
}*/
	
	span.btitle.white.bshadow {
    font-size: 2.5em;
}
	
	p span {
    font-size: 1em;
}
	/* Boka */
	#fscf_form1 label {
    font-size: 2.5em;
}
	
		#fscf_form1 input {
    font-size: 2.5em;
}
	
	#fscf_form1 input[type="checkbox"], input[type="radio"] {
    width: 40px !important;
    height: 40px !important;
}
	
	#fscf_submit1 {
    width: 35% !important;
    height: 50px !important;
}
	#resaSidebar {
    right: 0;
    width: 100%;
    margin: 0px 0px 15px 0px;
    float: right;
    padding-left: 0;
    background: none;
}
	
	.tighterContainer {
    width: 90%;
}
	.tighterContainer #content {
    width: 100%;
    padding: 0px;
}
	
	#fakta {
    font-size: 2.5em;
}
	
	#fakta .small {
    font-size: 0.9em;
}
	
	.pf-content p {
    font-size: 3em;
}
	
	#bookNow form input[type="submit"] {
    font-size: 2.5em !important;;
    height: auto !important;;
}
	
		#bookNow form select {
    font-size: 2.5em !important;
    height: auto !important;;
}
	
	#content p {
    margin-bottom: 10px;
    font-size: 2.5em;
}
	
	.collapsebutton {
    font-size: 2.5em;
}
	
.dagtop	h3 {
    font-size: 2.5em;
}
	
	.dagtop h3 span {
    font-size: 0.8em !important;
}
	
	.meals span {
    font-size: 2em;
}
	
	.meals img {
    width: 50px;
}
	
	/* Home Page */
	.bannerNoFlashOverlay2.dbshadow {
    font-size: 2em;
}

	#resorContent .frontpageResa.brick {
    width: 100%;
    position: relative !important;
		top: inherit !important;
		margin-bottom: 20px;
}
	
	#resorContent .frontpageResa2 {
    width: 100%;
    position: relative !important;
		top: inherit !important;
}
	
	.frontpageResa2.brick .textInBox {
}
	
.frontpageResa2.brick .textInBox 	.btitle {
    font-size: 2.5em;
}
	
	.frontpageResa2.brick .textInBox 	.smallInfoText {
    font-size: 2em;
}

	.frontpageResa2.brick .textInBox 	p {
    font-size: 2em;
}
	
	/*  Resor 2 */
	div#whatevs .frontpageResa.brick {
    width: 100% !important;
    position: relative !important;
    top: inherit !important;
		margin-bottom: 20px;
}
	
	div#whatevs .frontpageResa.brick .btitle.white.bshadow {
		font-size: 3em;
	}
	div#whatevs .frontpageResa.brick .btitle2 {
		font-size: 3em;
	}	
	.smallArticleBox {
    width: 100%;
    position: relative !important;
    top: inherit !important;
		margin-bottom: 20px;
}
	.bigArticleBox2 {
    position: relative !important;
    top: inherit !important;
}
	
	.mediumArticleBox {
    width: 100%;
    position: relative !important;
    top: inherit !important;
		margin-bottom: 20px;
}
	
	.bigArticleBox {
    width: 100%;
    position: relative !important;
}
	
	.lastFewArticlesContainer {
    position: relative !important;
    top: inherit !important;
}
	
	.squarethumb {
  width: 100% !important;
    top: inherit !important;
    margin-bottom: 20px !important;
    margin-right: 0px !important;
    margin: 1% !important;
padding-bottom: 40%;
}
.squarethumb .imageCover {
    visibility: visible;
    opacity: 1;
}
.imageCover {
    background-color: transparent;
    top: inherit !important;
}

.rshadow {
    text-shadow: none;
}

.squarethumb .btitle {
    font-size: 2.5em;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.mobile-menu {
    float: right;
    padding: 20px;
    margin-top: 20px;
}

.ns-text {
    max-width: 75%;
    margin: 0 auto;
}

.resor-medium {
    padding-bottom: 50% !important;
}
.resor-large {
    padding-bottom: 50% !important;
}

#logo {
width: 100%;
max-width: 85% !important;
padding-bottom: 25px;
}

.dagtop h3 {
    color: #2D5BC5;
}
.dagtop h3 span {
    color: #000;
}

#flex {
    display: flex;
    flex-direction: column;
}

#flex .second-part-ns {
    order: 1;
}

#flex .first-part-ns {
    order: 2;
}


#flex .resor-3 {
    order: 3;
}

#flex .resor-4 {
    order: 4;
}





}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    .bottomTextContainer2 {
        width: 100%;
    }

    .bottomTextContainer3 {
        width: 100%;
        padding-top: 20px;
        margin-left: 0px;
        font-size: 16px;
    }

    .bottomTable {
			width: 33%;
    margin-right: 0px;
    box-sizing: border-box;
    padding: 10px 50px;
    }

    .footer1 {
			width: 100%;
			font-size: 1.5em;
			text-align: center;
			z-index: 1;
    }

    .bottomMap {
        display: none;
    }

    #blackfooter pre {
        font-size: 1.5em;
    }

	.bottomTextContainer {
    height: auto;
    width: 100%;
}
	
	#contactInfo {
    width: 100%;
    height: auto;
    top: 0px;
    left: 0;
    position: relative;
		text-align: center;
    padding-bottom: 30px;
}
	
	.footer-full {
    width: 100%;
}
	
	#contactInfo h1 {
    font-size: 5em;
}
	
#contactInfo .smallText {
    font-size: 1.5em;
}
	
	h2.footer-mail {
    font-size: 4em !important;
}
	
	/* Content */
	
	.fullContent {
    padding: 30px 40px 15px 40px;
    width: 100%;
    box-sizing: border-box;
}
	
	.fullContent p {
    margin-bottom: 1em;
    font-size: 1.5em;
}
	
	.fullContent h3 {
    font-size: 2em;
}
	
	.fullContent h1 {
    font-size: 3em;
}
	
	.reseledareBox {
    width: 50%;
		box-sizing: border-box;
    padding: 10px;
}
	
	.reseledareBox .textInBox2 h4 {
    font-size: 3em;
}
	
	.reseledareBox .textInBox2 p {
    font-size: 2.5em;
}
	
		.reseledareBox .textInBox2 .s1 {
    font-size: inherit;
}
	
	.bildpil {
    display: none;
}

	/* Cookie notice */
#cn-notice-text {
    font-size: 2.5em;
    display: block;
    margin-bottom: 10px;
}
	a#cn-accept-cookie {
    font-size: 2.5em;
    line-height: 2em;
}
	a#cn-refuse-cookie {
    font-size: 2.5em;
    line-height: 2em;
}



}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
	    .bottomTextContainer2 {
        width: 100%;
    }

    .bottomTextContainer3 {
        width: 100%;
        padding-top: 20px;
        margin-left: 0px;
        font-size: 16px;
    }

    .bottomTable {
			width: 33%;
    margin-right: 0px;
    box-sizing: border-box;
    padding: 10px 50px;
    }

    .footer1 {
			width: 100%;
			font-size: 1.5em;
			text-align: center;
			z-index: 1;
    }

    .bottomMap {
        display: none;
    }

    #blackfooter pre {
        font-size: 1.5em;
    }

	.bottomTextContainer {
    height: auto;
    width: 100%;
}
	
	#contactInfo {
    width: 100%;
    height: auto;
    top: 0px;
    left: 0;
    position: relative;
		text-align: center;
    padding-bottom: 30px;
}
	
	.footer-full {
    width: 100%;
}
	
	#contactInfo h1 {
    font-size: 3em;
}
	
#contactInfo .smallText {
    font-size: 1.5em;
}
	
	h2.footer-mail {
    font-size: 2.5em !important;
}
	
	/* Content */
	
	.fullContent {
    padding: 30px 40px 15px 40px;
    width: 100%;
    box-sizing: border-box;
}
	
	.fullContent p {
    margin-bottom: 1em;
    font-size: 1.5em;
}
	
	.fullContent h3 {
    font-size: 2em;
}
	
	.fullContent h1 {
    font-size: 3em;
}
	
	.reseledareBox {
    width: 50%;
		box-sizing: border-box;
    padding: 10px;
}
	
	.reseledareBox .textInBox2 h4 {
    font-size: 2em;
}
	
	.reseledareBox .textInBox2 p {
    font-size: 1.5em;
}
	
		.reseledareBox .textInBox2 .s1 {
    font-size: inherit;
}
	
	.bildpil {
    display: none;
}
	/* Cookie notice */
#cn-notice-text {
    font-size: 2.5em;
    display: block;
    margin-bottom: 10px;
}
	a#cn-accept-cookie {
    font-size: 2.5em;
    line-height: 2em;
}
	a#cn-refuse-cookie {
    font-size: 2.5em;
    line-height: 2em;
}
	/* Om Japan */ 
	.bigArticleBoxOverlay1_1 .whiteUnderBox {
    font-size: 1.8em;
}
}