/* Smartphone portrait  320 */


/* 480 is iphone 4, 568px is iphone 5  landscape 
 dus dit is van iphone staand 320 tot iphone 5 landscapre 568
*/
@media screen and (min-width: 0px) and (max-width: 568px) {
    .testdiv{background-color: darkblue;}
    
    h1{    font-size: 24px; line-height: 24px; }
    h2{ font-size: 18px; line-height: 23px;  }
    
    .agent-item { width: 180px; margin: 10px 0 0 0; } 
    #agent-infokader { position:relative; top: 0; left: 0; border-top: 6px solid #FF530B; border-left: 0; border-radius: 0; padding: 20px 0 0px 0;}
/*    #agents-fullmap { height: auto; }*/
/*    #agents-fullmap iframe { height: 200px!important; }*/
    #agent-about { position: relative; float: left; border-radius: 0; width: 252px; margin: 0; padding: 20px; } 
    #agent-map{ position: relative; float: left; height: 250px; width: 300px; }
    #agent-overview{ position: relative; float: left; width: 300px; }
    .bg-overlappend-sidebars{ display:none; } 
    .banner-preview{ display:none; } 
    .banner-text{ width: 250px; top: 30px; left: 30px; } 
    .banner-foto { display: none !important; } 
    #banner { height: 220px; border-top: 4px solid #ccc; }
    .centered{ width: 300px; }
    .content{ }
    .content#inhoud{ height: auto; }
    #contact-location{ width: 290px; height: 260px; }
    #contactadresgegevens{ width: 270px; margin-left: 0; height: 360px;}
    #contact-bottom{ padding: 20px 0 0 0; width: 100%; }
    #contact-form { width: 100%; }
    #contact-form-left{ width: 100%; }
    #contact-form-right{ width: 100%; padding-top: 20px;}
    #contact-form textarea { width: 100%; }
    #contact-form .input-line { width: 100%; }
    #contact-form .input-line input { width: 130px; }
    #contact-title{ top: 7px; }
/*    #footer #contact{ background: #fff url(../../images/bg-footer.jpg) repeat-x; margin : 0 0 0 -10px; width: 310px; padding: 0 0 30px 10px; }*/
    #footer #contact{ background: #fff url(../../images/bg-footer.jpg) repeat-x; margin : 0 0 0 -10px; width: 310px; padding: 0 0 30px 10px; }
    #chenshong-intro{  width: 300px; padding: 30px 0 20px 0; margin: 0; overflow: hidden; }
    #chenshong-intro a:link, #chenshong-intro a:active, #chenshong-intro a:visited, #chenshong-intro a:hover { font-size: 18px; background: url(../../images/arrow.png) no-repeat 270px center; } 
    #chenshong-intro img { width: 298px; height:  auto; }
    #footer #copyright{  width: 300px;  margin : 0 0 0 -10px; padding: 10px 10px 15px 10px; font-size: 10px; -webkit-text-size-adjust: none; }
    #footer #copyright a{   font-size: 10px; }
    #footerlinks { position: relative!important; float:  left; text-align: left; top: 0px!important;}
    #footer #sitelinks {  width: 300px; padding: 0 0 20px 0; }
    #footer #sitelinks .sitelinks-column, #footer #sitelinks .sitelinks-column.first  { margin: 0; padding: 0 0 20px; width: 150px; border:0; }
    #footer h2 { padding-bottom: 10px; } 
    #inhoud{ width: 300px; } 
    
    #kruimelpad, #kruimelpadvergroot { width: 280px; border-top: 4px solid #ccc;  text-align: left; padding: 0 0 0 20px;}
    #kruimelpadvergroot { background-position: left -20px; height: 460px; } 
    
    #nieuws-icon-container{ padding: 30px 0 0 0; }
    #nieuws-list-container{ padding: 30px 0 0 0; }
    #nieuws-archive { display: none; }
    #nieuws-left{ padding: 0 0 10px 0; width: 100%; }
    #nieuws-right{  width: 100%; color: #333!important; }
    .nieuwitem-icon .right .title {   color: #333!important; }
    .nieuwitem-icon .right .text {   color: #333!important; }
    
    #nieuws-latest .nieuwitem-icon{ display: none; } 
    #nieuwsitem-list #jumpMenu { display: block; width: 100%; }
    #oranjebalk{     height: auto;    width: 300px;   padding: 0; background: #fff url(../../images/bg-oranjebalk.png) no-repeat 0 0;     } 
    #oranjebalk .block .block-titel{ background: url(../../images/arrow-white.png) no-repeat  244px 7px; font-size: 20px; }  
    #oranjebalk .block .block-text{ display:none; }  
    #oranjebalk .block .block-link{ display:none;  } 
    #oranjebalk .block { padding: 0; margin: 0; width: 280px; padding: 15px 0 0 20px; border-top: 1px solid #fff; } 
    .product-item-right, .product-item-left { width: 100%; } 
    .product-item-left { padding: 0 0 30px 0; }
    .product-item-left img { width: 240px; } 
    #product-image { top: 160px; width: 260px; background: #fff; border-radius: 5px; height: 200px; }
    #product-image img{ width: 220px;  }
    #product-informatie-kort { top: 60px; left:30px; width: 240px; border-top: 1px solid #666; padding-top: 25px;}
    #product-informatie-kort h1 { color: #fff; margin: 0; }
    .product-informatie-kort-text{ display: none; }
    .product-informatie-agent{ display: none; }
    .product-informatie-pdf{ display: none; }
    #product-moreimages{ width: 260px; }
    .product-zoom{ left: 240px; }
    .taalhuidig { display: none; }
    #topcontainer{ height: 160px; } 
    #talen #vlaggen{ background: #fff;    }
    #talen #talenkiezer { background-color: #fff; }
    #welkomtekst  { position: relative;    float: left; width: 280px;     padding: 0; left: 0; top: 0; padding: 25px 10px 25px 10px; font-size: 13px;    -webkit-text-size-adjust: none; }
    .vervolgpagina#inhoud { width: 280px!important; -webkit-text-size-adjust: none;  }
    .vervolgpagina#oranjebalk { display: none; }
    .tabblad-inhoud-text { width: 220px; padding: 20px;} 
    .vervolgpagina#inhoud-product{ width: 290px!important; -webkit-text-size-adjust: none;  }
    .vervolgpagina#inhoud-product .tabblad-inhoud-text { width: 230px; padding: 20px;} 
    
    
    .logo{     position: relative; float: left; top: 0px; left: 0px;  margin: 30px 0 0 30px; width: 280px; height: 110px; background:  url(../../images/logo-klein.png) no-repeat ;    }
    .menuuitklappen{ position: absolute; top: 100px; right: 0px; width: 40px; height: 40px; background: #ccc url(../../images/smartphonemenu.png) no-repeat center center; border-radius: 5px 5px 0 0;  }
    #menu .menuitem, #menu li {  width: 100%; padding: 0; top: 0; text-align: center;  height: 35px; line-height: 35px;}
    #menu .menuitem {  border-bottom: 1px solid #ccc; }
    #menu {  position:relative; float: left; width: 100%; padding: 0; margin: 0;  left: 0; top: 0;    display: none;  border-top: 1px solid #ccc;   } 
    #menu li:hover .submenu{        display: none;    }    
    #menu li { background: none; height: auto;}
    #menu .submenu{ display: none; top: 0; left: 0; width: 100%; position: relative; float: left; height: auto;  border-radius: 0; border-bottom: 0px; padding: 0; margin: 0; text-align: center; background: #ddd; }
    #menu .submenu li, #menu .submenu .submenuitem { position: relative; float: left; width: 100%; }
    #topcontainer{ height: auto; }
    #bannercontainer{
        display: none !important;
    }
    .twitter-home{padding: 0; margin: 20px 0 10px !important;}
    .adres-home{padding:32px 0;}
        .contact-adresblock{ width:238px; margin-top: 20px; margin-left:0!important;margin-right: 0!important; }

}

/* Smartphone landscape 4 en 5  480 - 568 */
@media screen and (min-width: 480px) and (max-width: 568px) {

    h1{    font-size: 28px; line-height: 30px; }
    h2{ font-size: 22px; line-height: 26px;  }
    
    .agent-item { width: 340px; } 
    #agent-infokader { width: 440px; height: 170px; }
    .agent-contactinfo { width: 300px!important; }
    #agent-about { width: 432px; margin: 0;} 
    #agent-map{ width: 480px; background-color: #A5BFDD; background-position: top right;}
    #agent-overview{  width: 480px; }
    .banner-text{ width: 400px; top: 30px; left: 30px; } 
    #banner { height: 190px; }
    .centered{ width: 480px; }
    #chenshong-intro{ display: none; }
    #contact-form .input-line input { width: 230px; }
    #contact-location{ width: 460px; height: 260px; margin-right: -20px; }
    #contactadresgegevens{ width: 100%;  }
    .contact-adresblock{ width: 400px; margin-top: 20px;  }
    .contact-adresblock .phone, .contact-adresblock .mail{ float: right;  }
/*    #footer #contact{ background: #fff url(../../images/bg-footer.jpg) repeat-x; margin : 0 0 0 -100px; width: 470px; padding: 0 0px 30px 110px; }*/
    #footer #contact{ background: #fff url(../../images/bg-footer.jpg) repeat-x; margin : 0 0 0 -100px; width: 470px; padding: 0 0px 30px 110px; }
    #footer #copyright{  width: 470px; font-size: 10px; margin : 0 0 0 -100px; padding: 10px 0px 15px 110px; }
    #footer #sitelinks { padding-left: 10px; width: 450px; }
    #footer #sitelinks .sitelinks-column, #footer #sitelinks .sitelinks-column.first  { margin: 0; padding: 0 0 20px; width: 150px; border:0; }
    #footer #sitelinks .sitelinks-column.first { display: none; } 
    #kruimelpad, #kruimelpadvergroot { width: 460px;  }
    #kruimelpadvergroot { background: url(../../images/bg-banner3.jpg) no-repeat left -20px;   }
    #oranjebalk{ width: 480px;      } 
    #oranjebalk .block .block-titel{ background: url(../../images/arrow-white.png) no-repeat  420px 7px;  width: 460px;}  
    #oranjebalk .block {  width: 460px; } 
    .product-item-right { width: 260px; margin-left: 30px; }
    .product-item-left {  width: 100px; padding: 0 0 30px 0; }
    .product-item-left img { width: 100px; } 
    #product-image { top: 160px; width: 440px; background: #fff; border-radius: 5px; height: 200px; }
    #product-image img{ width: 240px; left: 100px;  top: 10px; }
    .product-zoom{ left: 420px; }
    #product-informatie-kort{ width: 420px; }
    #menu .menuitem{  font-size: 13px;  } 
    #nieuws-icon-container{ padding: 30px 0 30px 0; width: 230px; margin-left: 10px;}
    #nieuws-list-container{ padding: 30px 0 30px 0; width: 190px; margin-left: 30px; }
    .nieuwitem-icon { width: 240px; height: 80px; overflow: hidden; }
    .nieuwitem-icon .left { width: 90px; }
    .nieuwitem-icon .left img { width: 70px; } 
    .nieuwitem-icon .right, .nieuwitem-icon .right .title, .nieuwitem-icon .right .text { width: 150px; } 
    #welkomtekst  { width: 460px;     }
    .vervolgpagina#inhoud-product{ width: 460px!important; -webkit-text-size-adjust: none;  }
    .vervolgpagina#inhoud-product .tabblad-inhoud-text { width: 400px; padding: 20px; } 
    .vervolgpagina#inhoud-product #tabblad-container {  margin-left: 10px;} 
    .vervolgpagina#inhoud { width: 440px!important; }
    .tabblad-inhoud-text { width: 380px; } 
    #bannercontainer{
        display: none !important;
    }
    .twitter-home{padding: 0; margin: 20px 0 10px !important;}
    .adres-home{padding:32px 0;}
}