/* ARTICLE SETUP */
@media screen and (max-width: 40em) {
	.article-icon span {
		display: none;
	}
	.related {
		font-size: 80%;
	}
}
/* COMPONENT */
@media screen and (max-width: 47em) {
	.title, .content {
		font-size: 70%;
	}

	.article-demos a {
		font-size: 80%;
	}

	.intro-effect-side .title {
		width: 100%;
		padding: 0 1em;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.intro-effect-side.modify .bg-img::before {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.intro-effect-side .bg-img::after {
		border-left-width: 0px;
		border-right-width: 0px;
		right: 0px;
		left: 0px;
		background: rgba(255,255,255,0.1);
	}

	.intro-effect-side.modify .bg-img::after {
		background: rgba(255,255,255,0.8);
	}

	.intro-effect-sidefixed .content {
		width: 100%;
		margin-left: auto;
	}

	.intro-effect-sidefixed .bg-img::after {
		width: 95%;
	}

}
@media screen and (max-width: 27em) {
	.intro-effect-jam3 .content {
		padding: 0 2em 5em;
	}

	.intro-effect-grid .grid li h2 {
		display: none;
	}

	.intro-effect-push .header .title {
		top: 60px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.title{
		font-size: 50%;
	}
  .content {
    font-size: 75%;
  }
	button.trigger::after {
		font-size: 40%;
	}
}

/*      ----------------------------------  CUSTOM SETUP ------------------------------------------- */
/*  MOBILE SCREEN */
@media only screen 

  and (max-width: 736px)  {
    .sponser { display: none; }
    #brand a img{width: 60%;}
    .intro-effect-grid .grid li h2{ display: none; }
    #container article .infographic{overflow: hidden; margin: 0 0 10% 0;}
    #social-media-buttons a{margin: 0 5px 0 0;}
    #container article .infographic .wrapper p.hint, #container article .infographic .wrapper .dashboard p.graphic_key{display: none;}
    #container article .infographic .wrapper h2:before{width: 200px;height: auto;overflow: hidden;}
    #container article .infographic .wrapper h2{font-size: 16px;}
    #container article .infographic .wrapper p.btn.comparison{width: 155px; margin: 40px auto 0 auto;}
    #container article .infographic .wrapper p.btn.comparison a{font-size: 11px!important;}
    #graphic_01 .st23, #graphic_01 .st19{font-size: 19px!important;}
    #SVG_graphic02{
        transform: rotate(90deg) translate(-270px,-320px) scale(0.98);
    }
    .intro-effect-grid .grid { height: 70% }
    #graphic_02 .swich{ height: 330px;width: 100%; }
    .btn.trade a { display: block; width: 30%; text-align: center;}
    .intro-effect-grid.modify .title {transform: translateX(-50%) translateY(33vh);}
    /*.intro-effect-grid.modify .title { transform:translateX(-50%) translateY(220%); }
    .page1 .intro-effect-grid.modify .title { transform:translateX(-50%) translateY(140%); }
    .page2 .intro-effect-grid.modify .title { transform:translateX(-50%) translateY(240%); }
    .page5 .intro-effect-grid.modify .title, .page6 .intro-effect-grid.modify .title { transform:translateX(-50%) translateY(190%); }*/
    /*#text_graphic02 .continent_tags text{
        transform: rotate(-90deg) translate(0px,0px) scale(1.98);
        transform-origin: 50% 50%;
    }*/
    #container article .infographic .countrySheet h1{font-size: 32px;}
    footer .credits p{line-height: 15px;}
    #graphic_01 .tradeModeStuff.key{width: 74px;}
    .content > div:not(.title) .halfBlock { width: 65% }
    .intro-effect-grid.modify .grid li:before { color: #fff; position: absolute; font-size: 2em; font-family: 'Playfair Display', serif; font-weight: 700;} 
    .intro-effect-grid.modify .grid li:first-child:before { content: '1'; bottom: 0; left: 10%; }
    .intro-effect-grid.modify .grid li:nth-child(2):before { content: '2'; top: 0; right: 10%; }
    .intro-effect-grid.modify .grid li:nth-child(3):before { content: '3'; bottom: 0; right: 10%; }
    .intro-effect-grid.modify .grid li:nth-child(4):before { content: '4'; bottom: 0; right: 10%; }
    .intro-effect-grid.modify .grid li:nth-child(5):before { content: '5'; top: 0; left: 10%; }
    .intro-effect-grid.modify .grid li:nth-child(6):before { content: '6'; bottom: 0; left: 10%; }
    .content > div:not(.title) .halfBlock {
        width: 100%;
        float: none;
        margin: 0;
    }
    #text_graphic02 .continent_tags .tag01{  
        transform: rotate(90deg) translate(270px, -100px) scale(-1);
        font-size: 200%;
    }
    #text_graphic02 .continent_tags .tag02{  
        transform: rotate(90deg) translate(270px, -190px) scale(-1);
        font-size: 200%;
    }
    #text_graphic02 .continent_tags .tag03{  
        transform: rotate(90deg) translate(270px, -580px) scale(-1);
        font-size: 200%;
    }
    #text_graphic02 .continent_tags .tag05{  
        transform: rotate(90deg) translate(270px, -390px) scale(-1);
        font-size: 200%;
    }
    
    #text_graphic02 .continent_tags .tag04{  
        transform: rotate(90deg) translate(270px, -700px) scale(-1);
        font-size: 200%;
    }
    .content blockquote { margin:0; padding: 0;}
   .content blockquote::before, .content blockquote::after{ margin: 20px 0; }
   .half-pic1, .half-pic2, .half-text { width: 100% !important; float: initial !important; }
   .half-text { margin-left:0; }
   .article-hangzhou-1 a { font-size: 0.6em; }
   .article-hangzhou.inside { width: 100%; margin: 0; height: 100%; background: #f0f8ff; padding: 20px 0;  }
   .article-hangzhou.inside a{ display: block; text-align: center; }
   #social-media-buttons a { height: 20px; width: 20px;  }
   .flexslider-nav { display: none; }
    input[type=checkbox] {
       position: absolute;
       top: -9999px;
       left: -9999px;
    }
  .white .menu { 
      display: block;
    position: absolute;
    top: 18px;
    right: 7px;
      cursor: pointer;
      text-indent: -9999px;
      background: url('../svg/menu.svg') 5px 6px no-repeat;
      background-size: 55%;
      width: 30px;
      height: 30px;
    }
.intro-effect-grid .grid li:nth-child(5) {
  background-image: url(../img/5-m.jpg);
}
.intro-effect-grid .grid li:nth-child(6) {
  background-image: url(../img/thumbs/6-tumb-m.png);
  background-position: left 0 top 0;
}
.tooltips { border-bottom: 0; }
.tooltips .tooltips-content, .tooltips:hover .tooltips-content { display: none; }
    /* Default State */
    .article-hangzhou.inside {
    display: none;

    }

    /* Toggled State */
    input[type=checkbox]:checked ~ .article-hangzhou.inside {
       display: block;
    }
    input[type=checkbox]:checked ~ .menu  { background: url('../svg/menu-close.svg') 5px 6px no-repeat;background-size: 75%; }
    .half-leader .half-text { padding: 0 20px;  }
    .popup-leader { top: 100px; left: 10%; width: 80%; height: 80%; }
    .popup-pic { width: 50%;}
    .popup-text {margin-left: 50%; padding: 20px 3% 20px 3%;}
    .bg-img .d-bg { display: none; }
    .bg-img .m-bg { display: block !important; }
}
/*  TABLET SCREEN */
@media (max-width: 768px){
    #container article .infographic .countrySheet .column{width: 207px;}
    #container article .infographic .countrySheet .column .country {width: 190px;}
    #graphic_03 .grap03_chart.world{width: 230px;}
    .desktop_cont{display: none!important;}
    .mobile_cont{display: block!important;}

}