.slider .caroufredsel_wrapper,
.slider .slides { height: 100% !important; }

/* ------------------------------------------------------------ *\
    Responsive Tablet Portrait
\* ------------------------------------------------------------ */

@media ( max-width: 1023px ) {
    html,
    body { min-width: 100%; }

    .shell { width: auto; padding: 0 15px; }
    .shell:after { content: ''; line-height: 0; display: table; clear: both; }

    h1.logo { left: 15px; }

    .navigation { padding-left: 140px; }
    .navigation ul li { padding: 0; }

    .map-buttons { padding: 1px 0 0; }

    a.button-map { display: block; margin-top: 4px; }

    .bannerWrapper { width: 142px; height: 243px; top: 220px; }
    .bannerWrapper .bannerContent,
    .bannerWrapper .banner.myl,
    .bannerWrapper .banner.wp { width: 100%; height: 100%; background-size: 100% 100%; -webkit-background-size: 100% 100%; }
    .bannerWrapper .buttonWrapper,
    .bannerWrapper .banner.wp .buttonWrapper,
    .bannerWrapper .banner.myl .buttonWrapper { width: 87%; bottom: 25px; }
    .bannerWrapper a.button-big { font-size: 14px; line-height: 21px; padding: 5px; background-size: 1px 31px; -webkit-background-size: 1px 31px; }

    .slide-content h2 { font-size: 36px; }
    .slide-content .developer-panel { width: 50%; left: 0; margin: 0; }
    .slide-content .apiLogos { width: 50%; left: 50%; margin: 0; }

    .apiLogos .logos { width: 100%; height: 100%; margin: 0; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; -webkit-background-size: 100% auto; }

    .proScreenRight { width: 50%; left: 0; margin: 0; background-size: 100% auto; -webkit-background-size: 100% auto; }

    .proScreen { width: 50%; left: 50%; margin: 0; background-repeat: no-repeat; background-position: 50% 50%; background-size: 90% auto; -webkit-background-size: 90% auto; }

    .skypeScreenLeft { margin: 10% auto 0; }

    .video,
    .video-content { float: none; display: block; margin: 0 auto; }

    .section-enries { padding: 40px 0 30px; }
    .section-enries ul:after { content: ''; line-height: 0; display: table; clear: both; }
    .section-enries ul .col1 { width: 33.33%; padding: 0 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
    
    .entry-content .details { height: auto; }

    .popularMaps { width: auto; padding: 15px; margin: 0; }
    .popularMaps h3 { text-align: left; margin: 0 0 15px; }
    .popularMaps .mapItem { float: none; display: inline-block; vertical-align: top; }

    .popularMaps .popularSection { font-size: 0; line-height: 0; text-align: center; height: auto; padding-bottom: 15px; margin-right: -5px; }
    .popularMaps .popularSection:after { content: ''; line-height: 0; display: table; clear: both; }

    .popularMaps .popularSection .feed { right: 5px; }
    .popularMaps .popularSection .feed a { line-height: 1.25; }

    .section-logo { padding: 20px 0 10px; }

    .logo-slider ul { font-size: 0; line-height: 0; text-align: center; height: auto; }
    .logo-slider ul li { float: none; display: inline-block; vertical-align: middle; margin: 0 10px 10px; }

    .footer > .shell > ul > li > h3 + ul.left { margin-left: 0; }

    .sidebar { padding-right: 15px; }

    .content { width: auto; float: none; display: block; overflow: hidden; }

    .field,
    .field2,
    .field3,
    .field4,
    .field5,
    .field6,
    .field-textarea { width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

    .form p span,
    .form p span:first-child { width: 45%; }
}

/* ------------------------------------------------------------ *\
    Responsive Mobile Phone
\* ------------------------------------------------------------ */

@media ( max-width: 767px ) {
    .header { height: auto; }
    .header .shell { padding-top: 67px; }

    .navigation { text-align: center; float: none; display: block; padding: 15px 0 5px; }
    .navigation ul { padding: 0 15px; border-top: 1px solid #999; border-bottom: 1px solid #999; margin: 0 -15px; }
    .navigation ul li { float: none; display: inline-block; vertical-align: top; }

    .map-buttons { position: absolute; top: 0; right: 15px; }

    .bannerWrapper { display: none !important; }

    .slider,
    .slide { height: 400px; }

    .pagination { margin-left: -38px; }

    .slider-control { position: absolute; top: 50%; left: 0; right: 0; margin-top: -16px; }
    .slider-control a.slider-arr { width: 32px; height: 32px; top: 0; background-size: 100% 100%; -webkit-background-size: 100% 100%; }

    .slide-content { padding-top: 15px; height: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
    .slide-content h2 { font-size: 24px; line-height: 1.2; }
    .slide-content p { font-size: 16px; line-height: 1.25; }
    .slide-content p br { display: none; }
    .slide-content p.buttons br { display: block; }
    .slide-content a.button-big { line-height: 24px; padding-top: 8px; padding-bottom: 5px; margin-bottom: 5px; background-size: 1px 37px; -webkit-background-size: 1px 37px; }

    .tablet { width: 300px; height: 175px; margin-left: -150px; background-size: 100% 100%; -webkit-background-size: 100% 100%; }
    .tablet-map { width: 169px; height: 112px; top: 15px; left: 63px; }

    .skypeScreenLeft { width: 200px; height: 230px; }

    .slide-content .developer-panel { width: 100%; height: 60%; top: 0; left: 0; border: 0; }
    .slide-content .developer-panel .devInfo { padding: 15px; }
    .slide-content .apiLogos { width: 100%; height: 40%; top: auto; bottom: 0; left: 0; right: 0; border: 0; }

    .apiLogos .logos { background-size: auto 100%; -webkit-background-size: auto 100%; }

    .proScreenRight { width: 100%; height: 50%; top: 0; left: 0; right: 0; border: 0; }
    .proScreenRight .info { padding: 15px; margin: 0; }
    .proScreenRight .info .buttons { padding: 0; margin: 0; }

    .proScreen { width: 100%; height: 50%; top: auto; bottom: 0; left: 0; right: 0; border: 0; background-size: auto 60%; -webkit-background-size: auto 60%; }

    .section-video { padding: 15px 0; }

    .video,
    .video-content { width: 290px; height: auto; }

    .video { background: none; }
    .video iframe { width: 290px; height: 165px; }

    .video-content { padding-top: 22px; }
    .video-content > ul > li { float: none; display: block; padding: 0; }

    .section-enries { padding: 15px 0 0; }
    .section-enries ul .col1 { width: 100%; padding: 0 0 15px; }

    .section-logo { text-align: center; }

    .section-create { padding: 15px 0; }
    .section-create h2 { font-size: 24px; line-height: 1.2; padding: 0 0 10px; }
    .section-create p { padding: 0 0 15px; }
    .section-create p.buttons { padding: 0; }

    .section-create .left,
    .section-create .right { display: block; float: none; margin: 0; }

    .footer { padding: 15px 0 5px; }
    .footer > .shell > ul > li { width: auto; float: none; display: block; padding: 0 0 10px; }
    .footer > .shell > ul > li > ul,
    .footer > .shell > ul > li > ul.left { float: none; display: block; padding: 0; margin: 0; }
    
    .copyright { text-align: center; height: auto; padding: 15px 0; }
    .copyright p { float: none; display: block; padding-bottom: 15px; }

    .copyright .socials { float: none; display: block; padding: 0; }
    .copyright .socials a { float: none; display: inline-block; vertical-align: top; margin: 0 5px; }

    .popularMaps .popularSection { margin: 0 -15px; }
    .popularMaps .popularSection h3 { padding-left: 3px; }

    .page-title { height: auto; padding: 10px 0; }
    .page-title h2 { font-size: 20px; line-height: 24px; }

    .sidebar { width: auto; float: none; display: block; padding-bottom: 15px; }

    .content { overflow: visible; }

    .widget_navigation ul li a:hover, 
    .widget_navigation ul li.active a { background-position: 99% 50%; }

    .form p span, 
    .form p span:first-child { width: auto; float: none; display: block; margin: 0 0 10px; }

    .main { padding: 15px -0px; }
}