/*
 *
 * //////////////////////////////////////////////////////////////////////////////////////////////////////
 *
 * phone landscape and portrait
 *
 */
	@media only screen and (min-device-width: 320px) and (max-device-width: 1136px) and (max-device-height: 640px) and (orientation: landscape), only screen and (max-width: 422px) and (orientation: portrait) , only screen and (max-width: 767px) {
	
	    .visible-desktop { display: none; }
	    
	    body.sticky #content.row-fluid {
		
			margin-top: 0;
		}
        
	    .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.logout { background-color: transparent!important; }
	
	    .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.logout a { color: #006DB1; }
	
	    .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.register { background-color: transparent!important; }
	
	    .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.register a { color: #006DB1; }
	
		.span10 .row-fluid section#content .bodytext { font-family: 'PT Sans', serif; font-size: 20px; margin-top: 15px; color: #262626; line-height: 180%; font-weight: normal; clear: both}
	
	    .span10 .row-fluid section#content article .table { display: block; }
	
	    .span10 .row-fluid section#content article .table .tr { display: block; }
	
	    .span10 .row-fluid section#content article .table .tr .td { display: block; float: left; width: 100%; margin-bottom: 10px; padding: 0; }
	
	    .span10 .row-fluid section#content article .table .tr .td p { margin: 0; padding: 0; }
	
	    .span10 .row-fluid section#content article .table .tr .td.col1 { margin: 0; width: auto; }
	
	    .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li.dropdown ul.thirdLevel { display: none !important; }
	
	    .modal { left: calc( 50% - 160px ); } /* 160 = 320 (modal width) / 2 */
	
	    .modal .modal-body { max-height: 300px; }
	
	    .container { overflow: hidden; }
	
	    .clearDiv { height: 160px; }
	
	    footer { height: 120px; margin: -160px 0 0; }
	
	    .headerpic { display: none; }
	
		#tourenfinder { padding: 20px 20px 30px 20px; }
		
		#tourenfinder h2 { margin-bottom: 10px; }
		
		#tourenfinder hr { margin: 10px 0; }
		
	    #tourenfinder section { border-top: none; margin-bottom: 0; padding-top: 0; }
	    
	    #tourenfinder .btn { width: 100%; font-size: 16px; padding: 8px 0; }
	    
	    #tourenfinder section#activities label.checkbox { height: 40px; }
	    
	    #tourenfinder section#activities label.checkbox figure.picto { width: 32px; height: 32px; }
	    
	    #tourenfinder section#locations .areas label { margin: 10px 0 10px 20px; }
	    
	    #tourenfinder section#locations label span { margin-left: 10px; }
	    
	    #tourenfinder label.checkbox span { font-size: 18px; }
	    
	    #tourenfinder section#additional select { height: 40px; }
	    
	    #tourenfinder section#additional select.couple { margin-bottom: 5px; }
	    
	    #tourenfinder #location_string.span10 { height: 40px; } 
	    
	    article.routeninfos { margin: 20px; }
	    
	    figure.picto.grading::before { font-size: 15px; line-height: 30px; }
	    
	    figure.picto.grading.grading-::before { font-size: 15px; line-height: 33px; }
		
		.helpful-rating .picto-wrap a .picto-box figure.picto { height: 32px; width: 32px; padding-left: 32px; }
		
		.helpful-rating .picto-wrap a .picto-box figure.picto figcaption { height: 32px; width: 32px; }
		
		.helpful-rating .picto-wrap a .picto-box figure.picto.picto-like figcaption,
		.helpful-rating .picto-wrap a .picto-box figure.picto.picto-dislike figcaption { font-size: 22px; line-height: 34px; }
		
		.hikebook-post .picto-wrap a .picto-box figure.picto { height: 32px; width: 32px; padding-left: 32px; }
		
		.hikebook-post .picto-wrap a .picto-box figure.picto figcaption { height: 32px; width: 32px; }
		
		.hikebook-post .picto-wrap a .picto-box figure.picto.picto-like figcaption,
		.hikebook-post .picto-wrap a .picto-box figure.picto.picto-dislike figcaption { font-size: 22px; line-height: 34px; }
		
	    article.routeninfos h2 { margin-top: 20px; }
	    
	    .span10 .row-fluid section#content article.routeninfos .table .tr .td { margin-top: 5px; }
		
		.span10 .row-fluid section#content #my-contact .table { font-size: 16px; }
			
		.span10 .row-fluid section#content .button-wrapper { width: 100%; }
	
	    #myhood_search { margin-top: 5px; }
		
	    form#search-field .input-append input { width: 120% }
	    
	    .span10 .row-fluid section#content .bodytext .subscriptions { flex-wrap: wrap; margin: 20px 0; }
	    
	    .span10 .row-fluid section#content .bodytext .subscriptions .subscription { width: 100%; padding: 0; margin: 0 0 20px 0; }
	    
	    .span10 .row-fluid section#content .bodytext .subscriptions .subscription:before,
	    .span10 .row-fluid section#content .bodytext .subscriptions .subscription.blue:before { content: none; }
	    
	    #shop_modal.modal { top: 50%; transform: translateX(-50%) translateY(-50%); }
	    
	    #shop_modal.modal .modal-body { height: calc(90vh - 145px); max-height: 90vh; }
	    
	    
	    /* -----> */
	    
	    
	    #title { margin: 10px 0 10px 0; }
	    
	    article.infobox { margin: 1px 0 10px 0; padding: 20px; }
	    
	    article.infobox.fullsize { padding: 0; }
	    
	    article.infobox section.text { padding: 25px; }
	    
	    article.infobox section.text a h2 { padding-right: 0; margin-bottom: 20px; }
	    
	    article.infobox section.text .statistics { position: relative; }
	    
	    article.infobox figure.image .img-placeholder { background-size: 25%; }
	    
	    article.commercials { margin: 10px 0; }
	    
	    figure.picto { height: 32px; width: 32px; }
	    
	    .fb-like { margin-bottom: 20px; display: inline-block !important; }
	    
	    .rating-box { width: calc(100% - 40px); display: inherit; margin: 20px auto; float: none; }
	    
	    #tour-rating { margin: 0 20px; }
	    
	    #tour-rating article.infobox { padding: 0; }
	    
	    #hikebook .loadModal { position: relative; }
	    
	    #private_public_profil figure.avatar figcaption { opacity: 1; }
	    
	    #hikebook-teaser.mobile-teaser { background-color: white; padding: 20px; border-radius: 5px; }
	    
	    #hikebook-teaser.mobile-teaser h3 { font-size: 24px; margin: 10px 0 20px 0; }
	    
	    #hikebook-teaser.mobile-teaser ul li { margin: 0; }
	    
	    #hikebook-teaser.mobile-teaser .btn { margin: 10px 0 0 0; width: calc(100% - 30px); background-color: white; text-shadow: none; background-image: none; border: 2px #046cb1 solid; color: #046cb1; }
	    
	    #hikebook-teaser.mobile-teaser .btn:hover { cursor: pointer; }
	    
	    #map article.infobox section.text { padding: 25px; }
	    
	    .span10 .row-fluid section#content div#title { flex-direction: column; }
	    
	    .sorting-wrapper { margin-top: 10px; }
	    
	    .affiliate-title { position: absolute; top: -10px; left: 100px; display: block; font-size: 14px; }
	}
/*
 *
 * //////////////////////////////////////////////////////////////////////////////////////////////////////
 *
 * phone landscape
 *
 */
    @media only screen and (min-device-width: 320px) and (max-device-width: 1136px) and (max-device-height: 640px) and (orientation: landscape) , only screen and (max-width: 767px) {

        .visible-desktop { display: none; }

		body.sticky #content.row-fluid {
		
			margin-top: 0;
		}
		
        .container { width: 440px; }

        .span10 header { height: 70px; z-index: 1000; }
                
        .span10 nav#mainNav button.btn-navbar { float: right; background-color: #7F7F7F; background-image: none; margin-right: -20px; }

		body.sticky .span10 nav#mainNav button.btn-navbar { margin-right: 0; }

        .span10 nav#mainNav { height: auto; width: 100%; margin-bottom: 30px; position: fixed; top: 20px; right: 20px;  margin-top: 0; }
        
        .span10 nav#mainNav div.navbar { padding: 0 20px; }
        
        body.sticky .span10 nav#mainNav { top: 20px; background-color: transparent; }
		
		body.sticky .span10 nav#mainNav #navWrapper { padding: 0; top: 30px; margin-left: 0; }

        .span10 nav#mainNav #navWrapper { position: relative; top: 30px; left: 0px; left: 20px; margin: 0; background-color: white; }

        .span10 nav#mainNav #navWrapper #navTable ul.firstLevel { display: block; width: 100%; }

        .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li { width: auto; background-color: #7F7F7F; display: block; position: relative; }

        .span10 nav#mainNav #navWrapper #navTable { display: block; border-spacing: 0; width: 100%; }

        .span10 nav#mainNav #navWrapper #navTable ul { display: block; width: 100%; margin: 0; }

        .span10 nav#mainNav #navWrapper #navTable ul li { margin: 1px 0; display: list-item; list-style: none; }

        .span10 nav#mainNav #navWrapper #navTable ul li a { text-align: left; }

        .span10 header .span3 figure#logo { width: 270px; margin-top: -25px; }

        .span10 nav#mainNav div.navbar .btn-navbar { display: block; margin-top: 0; }

        .span10 nav#mainNav div.nav-collapse.collapse { height: 0; overflow: hidden; }

        .span10 .row-fluid section#content { width: 100%; float: right; }

        .span10 .row-fluid section#content div.sozialmedia { clear: both ; float: none; padding-top: 10px; }

        .span10 .row-fluid section#rightCol { float: left; width: 100%; margin: 0; }

        .span10 .row-fluid section#content div#slideshow { margin-bottom: 20px; }

        .span10 .row-fluid section#content div#slideshow .carousel-inner { height: 100%; }

        .span10 .row-fluid section#content div#slideshow a.carousel-control.left { background-position: 0 0; top: 90px; }

        .span10 .row-fluid section#content div#slideshow a.carousel-control.right { background-position: -30px 0; top: 90px; }

        .span10 .row-fluid section#content div#slideshow a.carousel-control.left:hover { background-position: 0 0; top: 90px; }

        .span10 .row-fluid section#content div#slideshow a.carousel-control.right:hover { background-position: -30px 0; top: 90px; }

        .span10 .row-fluid section#content div#slideshow .carousel-indicators-wrapper { bottom: 15px; }

        .span10 .row-fluid section#content div#slideshow ol.carousel-indicators li { border-radius: 8px 8px 8px 8px; width: 8px; height: 8px; }

        .span10 .row-fluid section#content div#slideshow .carousel-inner .item .carousel-caption { top: 90px; padding: 0 70px; }

        .span10 .row-fluid section#content div#slideshow .carousel-inner .item .carousel-caption h2 { line-height: 18px; font-size: 18px; }

        .span10 .row-fluid section#content div#slideshow .carousel-inner .item .carousel-caption p { font-size: 16px; line-height: 16px; }
/*
        #tourenfinder { width: 410px; }

        #tourenfinder ul#locations_select span { background:none; float:none; height:auto; width:auto;  }

        #tourenfinder button.location-search i { left: 50%; right: 50%; }

        #tourenfinder button.btn.reset { margin: 20px 10px 0 0; }

        #tourenfinder #location_string.span10 { width: 100%; }

        #tourenfinder button.location-search { margin-bottom: 20px; }
*/
       
        /*.span10 .row-fluid section#content article img { width: 100%; padding-bottom: 10px; }*/

        .span10 .row-fluid section#content article h4 { font-size: 16px; line-height: 125%; width: 100%; }

        .span10 .row-fluid section#content article p { font-size: 16px; line-height: 150%; width: 100%; }

        .span10 .row-fluid section#content article section.textCol { margin: 0; float: none; width: 100%; }

        .span10 .row-fluid section#content article section.textCol h4 { width: 400px; }

        .span10 .row-fluid section#content article section.textCol span.location { width: 400px; }

       /* .span10 .row-fluid section#content article section.textCol p { width: 400px; }*/

        .span10 .row-fluid section#content article .icons { top: 20px; right: 20px; }

        /*.span10 .row-fluid section#content article.routeninfos .icons { top: 0px; right: 0px; }*/

        /*.span10 .row-fluid section#content article div.commercials { margin: 0 0 13px; }*/
        
        .bannerContent { float: none; clear: both; margin: 5px 0 15px 0; }

        #tour_header h1 { width: calc(100% - 40px); }
        
        .span10 .row-fluid section#content .bodytext object.sf_weather { width: 440px; height: 269px; }

        .date.pull-right { float: none; }

        .backToTop { margin-left: 394px; }
        
        #cookie-banner .span10 { width: 100%; padding: 0 5%; }
        
        #cookie-banner .span10 .text-wrapper { padding: 10px 0 0 0; }

    }
 /*
 *

 * //////////////////////////////////////////////////////////////////////////////////////////////////////
 *
 * phone portrait
 *
 */

    @media only screen and (max-width: 422px) and (orientation: portrait)

    {
		body.sticky #content.row-fluid {
		
			margin-top: 0;
		}
		
        h2 { font-family: 'PT Sans', serif; font-size: 24px; margin: 0 0 20px 0; color: #0070AF; line-height: 38px; font-weight: bold; }

        .visible-desktop { display: none; }

        .container { width: 100%; }

        .span10 header { height: 70px; z-index: 0; padding: 0 0 0 20px; }

        .span10 nav#mainNav button.btn-navbar { float: right; background-color: #7F7F7F; background-image: none; margin-right: -20px; }
        
        body.sticky .span10 nav#mainNav button.btn-navbar { margin-right: 0; }

        .span10 nav#mainNav div.navbar { padding: 0 20px; }

        .span10 nav#mainNav { height: auto; width: 100%; margin-bottom: 30px; position: fixed; top: 20px; right: 20px; margin-top: 0px; }

		body.sticky .span10 nav#mainNav { top: 20px; background-color: transparent; }
		
		body.sticky .span10 nav#mainNav #navWrapper { padding: 0; background-color: white; top: 30px; margin-left: 0; }
		
        .span10 nav#mainNav #navWrapper { position: relative; top: 30px; left: 20px; margin: 0; }

        .span10 nav#mainNav #navWrapper #navTable ul.firstLevel { display: block; width: 100%; }

        .span10 nav#mainNav #navWrapper #navTable ul.firstLevel li { width: auto; background-color: #7F7F7F; display: block; position: relative; }

        .span10 nav#mainNav #navWrapper #navTable { display: block; border-spacing: 0; width: 100%; }

        .span10 nav#mainNav #navWrapper #navTable ul { display: block; width: 100%; margin: 0; }

        .span10 nav#mainNav #navWrapper #navTable ul li { margin: 1px 0; display: list-item; list-style: none; }

        .span10 nav#mainNav #navWrapper #navTable ul li a { text-align: left; }

        .span10 header .span3 figure#logo { width: 230px; margin-top: -25px; }

        .span10 nav#mainNav div.navbar .btn-navbar { display: block; margin-top: 0; }

        .span10 nav#mainNav div.nav-collapse.collapse { height: 0; overflow: hidden; }

        .span10 .row-fluid section#content { float: left; width: 100%;}

        .span10 .row-fluid section#content div.sozialmedia { clear: both ; float: none; padding-top: 10px; }

        .span10 .row-fluid section#rightCol.span3 { float: left; width: 100%; margin: 0; }

        .span10 .row-fluid section#content div#slideshow { margin-bottom: 20px; margin-left: 0px; margin-right: 0px; }

        .span10 .row-fluid section#content div#slideshow .carousel-inner { height: 100%; }

        .span10 .row-fluid section#content div#slideshow a.carousel-control.left { width: 15px; height: 30px; background-position: 0 0; top: 70px; display: none; }

        .span10 .row-fluid section#content div#slideshow a.carousel-control.right { width: 15px; height: 30px; background-position: -15px 0; top: 70px; display: none; }

        .span10 .row-fluid section#content div#slideshow a.carousel-control.left:hover { background-position: 0 0; top: 70px; }

        .span10 .row-fluid section#content div#slideshow a.carousel-control.right:hover { background-position: -15px 0; top: 70px; }

        .span10 .row-fluid section#content div#slideshow .carousel-indicators-wrapper { bottom: 10px; }

        .span10 .row-fluid section#content div#slideshow ol.carousel-indicators li { border-radius: 4px 4px 4px 4px; width: 4px; height: 4px; }

        .span10 .row-fluid section#content div#slideshow .carousel-inner .item .carousel-caption { top: 70px; padding: 0 40px; }

        .span10 .row-fluid section#content div#slideshow .carousel-inner .item .carousel-caption h2 { line-height: 12px; font-size: 12px; }

        .span10 .row-fluid section#content div#slideshow .carousel-inner .item .carousel-caption p { font-size: 11px; line-height: 11px; }
/*
        #tourenfinder { width: 100%; margin-bottom: 0px; }

        #tourenfinder button.btn.reset { margin: 20px 10px 20px 0; }

        #tourenfinder button.location-search { margin-bottom: 20px; }

        #tourenfinder button.location-search i { left: 50%; right: 50%; }

        #tourenfinder ul#locations_select span { background:none; float:none; height:auto; width:auto;  }
*/
        .span10 .row-fluid section#content > h1 { padding: 0 20px; } /* home */

        .span10 .row-fluid section#content > p { padding: 0 20px; } /* home */

        .span10 .row-fluid section#content > h2 { padding: 0 20px; } /* home */

        .span10 .row-fluid section#content > ul { padding: 0 20px; } /* home */

        .span10 .row-fluid section#content #breadcrumb { padding: 0 20px; } /* others */

        .span10 .row-fluid section#content > .bodytext { padding: 0 20px; } /* others */

      /*  .span10 .row-fluid section#content article img { width: 100%; padding-bottom: 10px;}*/

        .span10 .row-fluid section#content article h4 { font-size: 16px; line-height: 125%; width: 100%; }

        .span10 .row-fluid section#content article p { font-size: 16px; line-height: 150%; width: 100%; }

        .span10 .row-fluid section#content article section.textCol { margin: 0; float: none; width: 100%; }

        .span10 .row-fluid section#content article section.textCol h4 { width: 100%; }

        .span10 .row-fluid section#content article section.textCol span.location { width: 320px; }

       /* .span10 .row-fluid section#content article section.textCol p { width: 320px; }*/

        .span10 .row-fluid section#content article .icons { top: 20px; right: 20px; }

        /*.span10 .row-fluid section#content article div.commercials { width: 320px; text-align: center; margin: 0 auto; padding: 20px 0; }*/

        .bannerContent { float: none; clear: both; margin: 0; width: 320px; overflow: hidden; }

        .span10 .row-fluid section#content .bodytext object.sf_weather { width: 320px; height: 171px; }

        .date.pull-right { float: none; }

        .date { padding: 0 20px }
		
        #tour_header h1 { width: calc(100% - 40px); padding: 0 20px 0 20px; }

        #tour_header .leadin { width: 280px;  padding: 0 20px 0 20px; }

        .span10 .row-fluid section#content div.publish { padding: 0 20px 0 20px; width: calc(100% - 40px); }

        #load_map_button { margin: 0 0 0 20px; }

        #map_canvas + section { width: 280px;  padding: 0 20px 0 20px; }

        .span10 .row-fluid section#content h2.leadin { padding-left: 20px; } 

        .span10 .row-fluid section#content > .bodytext h2.leadin { padding-left: 0px; } 
        
        .backToTop { margin-left: 20px; }

        footer div.container .span12 #footerText { margin: 0 0 0 10px; }

        footer div.container .span12 #footerIcons { margin: 0 10px 0 0; }

        form#search-field { margin-left: 20px; position: relative; width: 100%; }

        form#search-field .input-append input { width: 100% }

        .loadModalWrapper { padding: 0 20px; }
        
        #cookie-banner .span10 .text-wrapper { padding: 20px 40px 20px 20px; }
        
        #cookie-banner .button { margin: 0 20px 20px 20px; }
        
        #private_public_profil { padding: 0 20px; }
	    
	    #private_public_profil .levelbadges figure { margin: 0 auto; }
	    
	    #private_public_profil .span8 { text-align: center; }
	    
	    #private_public_profil figure.avatar { text-align: center; }
	
	    #private_public_profil figure.avatar img { margin: 0 !important; width: 60%; float: none !important; }
	    
		#private_public_profil figure.avatar figcaption { left: 20%; width: 60%; padding-bottom: 60%; }
		
		#hikebook-teaser.mobile-teaser { margin: 0 20px; }
		
		#tourenfinder { margin: 0 20px; }
		
		#title { margin: 10px 20px 10px 20px; }
		
		article.infobox { margin: 1px 20px 10px 20px; }
		
		article.commercials { margin: 10px 20px; }
		
		.col.span10 h1 { width: calc(100% - 40px); padding: 0 20px; }

    }