/* 
    Created on : 2015-jul-17, 10:00:52
    Author     : emil.hunefalk
*/


/* Tablets (992px and down) */
@media (max-width: 992px) { 

    #main {
        padding: 0 15px;
        box-sizing: border-box; 
    }
    #main p#breadcrumbs { height: auto; }
    #HostingToplistPage .grid02
    {
        display: none;
    }

    .xm-hide { display: none; }
    .xm-fill-width { width: 100%; }
    
    #ArticlePage * { max-width: 100%; height: auto;}

    #wrapper {
        margin-top: 55px;
    }

    #wrapper, .wrapper {        
        max-width: 100%;
    }

    #wrapper, div.wrapper { width: 100% !important; }
    #header, .header-top { display: none; }
    body { background: none; }
    
    #ProviderProfileOverview #main, 
    #BuyingGuidePage #main, 
    #ProviderReviewPage #main, 
    #ProviderUserRatingPage #main, 
    #CouponPage #main, 
    #AdvancedSearchPage .wide, 
    #AdvancedSearchPage #main div.wide,
    #ArticleCategoryHolder #main, 
    #TutorialCategoryOverviewPage #main, 
    #ArticlePage #main, #ArticleCategory #main, 
    #HostingToplistPageHolder #main, 
    #ProviderComparePage #main, 
    #HostingToplistPage #main, 
    #TutorialPage #main, 
    #TutorialCategoryPage #main,
    #TutorialCategoryOverviewPage #main,
    /*#GeoLocatedToplistCountryPage #main, */
    #ContactUsPage .wide
        { 
            border: none;
            box-shadow: none;
            margin: auto;
            width: 100%;
            background: none;
            padding: 0;
            box-sizing: border-box;
        }
        
    #ProviderProfileOverview #main #col-main-new, #BuyingGuidePage #main #col-main-new, #ProviderReviewPage #main #col-main-new, #ArticleCategoryHolder #main #col-main-new, #TutorialCategoryOverviewPage #main #col-main-new, #ArticlePage #main #col-main-new, #ArticleCategory #main #col-main-new, #HostingToplistPageHolder #main #col-main-new
        { 
            width: 100%;
            box-sizing: border-box;
            padding: 0;
        }
        
    #ProviderProfileOverview #main #col-sub-new, #BuyingGuidePage #main #col-sub-new, #ProviderReviewPage #main #col-sub-new, #CouponPage #main #col-sub-new, #ProviderUserRatingPage #col-sub-new, #ArticleCategoryHolder #col-sub-new, #TutorialCategoryOverviewPage #col-sub-new, #ArticlePage #col-sub-new, #ArticleCategory #col-sub-new, #HostingToplistPageHolder #col-sub-new
    {
        background: none;
    }
    
    /*#TutorialPage #col-main-new h1:first-child { margin-top: 25px; }*/
    
    .subnav a.xm-hide { display: none !important;}

    .wrapper-80 {
        width: 100%;
        margin: 0 auto;
        text-align: justify;        
    }

    #home .modal-title {
        position: relative;
        top: 13px;
    }

    #outclick-modal {
        width: 100%;
        white-space: nowrap;
        position: relative;
        overflow:hidden;
    }

    #outclick-modal .provider {        
        transition: 0.4s transform ease-in-out;
        transform: translate3d(0,0,0);
    }

    #outclick-modal:before,
    #outclick-modal:after {
        content: "";
        border-top: 28px solid transparent;
        border-bottom: 28px solid transparent;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);     
        z-index: 15;   
    }

    #outclick-modal:before {
        border-right: 17px solid #333;
        left: 2vw;
    }

    #outclick-modal:after {
        border-left: 17px solid #333;
        right: 2vw;
        top: 50%;
        visibility: visible;
    }

    #outclick-modal .provider {
        width: 80% !important;
        margin: 0 10%;
        float: none;
        display: inline-block;
    }

    #outclick-modal .pros-cons {
        white-space: normal;
    }

    #outclick-modal.step2 .provider {        
        transform: translate3d(-125.5%,0,0);
    }

    #outclick-modal.step3 .provider {        
        transform: translate3d(-251%,0,0);
    }

    #home .wrapper-full-width {
        padding: 15px;
    }

    #home .blue-section p, #home .green-section p, #home .gray-section p {
        font-size: 14px;
    }

    #home .blue-section .underlined-header,
    #home .green-section .underlined-header,
    #home .gray-section .underlined-header {
        text-align: left;
        font-size: 24px;
    }

    a.button-whs-blue,
    a.button-green {
        width: 100%;
        margin: 0;
    }

    .index-hosting-type {
        width: 96%;
        overflow: hidden;
    }
    .index-hosting-type .image {
        width: 100%;
        float: none;
        text-align: center;
        margin-bottom: -25px;
    }

    .index-hosting-type .button
    {
        right: 0;
        bottom: 0;
    }

    img {
        max-width: 100%;
    }

    #home .articletop-img {
        margin-left: 0px;
    }


    #home #article-category-listing .read-more {
        padding: 20px 0 12px;
    }

    .article-overview li
    {
        width: 100%;
        box-sizing: border-box;
    }

    .article-overview .details-comment {
        position: relative;
    }

    /* Footer */


    #footer { 
        background: #333; 
        padding: 0;
        height: auto;
    }

    #footer .footer-cols {
        width: 100%;
        padding: 0;
        min-height: 0;
        border-bottom: 1px solid #fff;
        border-right: 0;

        font-size: 18px;
        font-family: "Open Sans", sans-serif;
    }

    #footer .footer-cols .arrow:before,
    #footer .footer-cols .arrow:after {
        content: "";
        position: absolute;
        right: 15px;
        border-top: 10px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        top: 17px;
    }

    #footer .footer-cols .arrow:before {
        border-top-color: #333;
        top: 13px;
        z-index: 5;
    }

    #footer .footer-cols.active .arrow:before {
        border-top: 0;
        border-bottom: 10px solid #333;
        top: 19px;
    }

    #footer .footer-cols.active .arrow:after {
        border-top: 0;
        border-bottom: 10px solid #fff;
        top: 15px;
    }

    #footer .footer-cols .header {
        text-align: center;
        color: #fff;
        font-weight: normal;
    }

    #footer .footer-cols ul {
        max-height: 0;
        transition: 0.3s max-height ease-in-out;
        transform: translate3d(0,0,0);
        overflow: hidden;
        text-align: center;
        margin: 0;
        background: #eaf0fd;
    }

    #footer .footer-cols.active ul {
        max-height: 195px;
        list-style-type: none;
    }

    #footer .footer-cols ul li {
        margin: 0;
        width: 100%;
        padding: 5px 0;
        border-bottom: 1px solid #c9d3e6;
    }

    #footer .footer-cols ul li a{
        color: #333;
        font-weight: normal;
        font-size: 14px;
    }

    #footer .footer-cols p {
        margin: 0;
        padding: 9px 0 11px;
    }

    #footer-bottom {
        height: auto;
        border: 0;
        font-family: "Open Sans", sans-serif;
    }


    #footer-bottom .wrapper > a {
        display: none;
    }

    #mobile-topnav img {
        height: 39px;
    }

    #buyingguide-widget h3{
        white-space: nowrap;
    }

    #buyingguide-widget {
        width: 100%;
        margin-right: 0;
        height: auto;
        box-sizing: border-box;
        padding-bottom: 60px;
    }

    #ArticlePage #main #col-main-new {
        padding: 0;
    }

    #breadcrumbs {
        max-width: 100%;
    }

    #user-reviews-widget{
        width: 100%;
        box-sizing: border-box;
        padding: 0 0 0 7px;
    }

    #HostingToplistPageHolder #main {
        padding: 0 15px 15px;
    }

    #provider-info {
        padding: 0 15px;
        box-sizing: border-box;;
    }

    #provider-info .subcontent {
        margin: 0;
    }

    #provider-info .tab-holder-second-part {
        padding: 0;
    }
}

@media(max-width: 767px) {    
    #home .articletop-img {
        width: 100%;
        min-height: 385px
    }

    #main #col-sub-new,
    #col-sub-new .WidgetHolder {
        width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Phablets (768px and down) */
@media (max-width: 768px) { 
    .xs-hide { display: none; }
    .xs-show { display: inherit; }
    .xs-fill-width { width: 100%; }

    .article-border-bottom-bg a span.text { width: auto;margin-right: 18px;}
    .red span {width: 198px;background-position-x: 190px;}

    #ProviderProfileOverview #main.wide-layout {
        padding: 0 15px;
    }
}
/* Smaller devices (phones, 360px and down) */
@media (max-width: 360px) { 
    .xxs-hide { display: none; }
    .xxs-show { display: inherit; }
    .xxs-fill-width { width: 100%; }


    body { background: none; }
    .WidgetHolder .widget-content { width: 99%; padding: inherit; box-shadow: none; border: none; }
    
    .article-image-1,
    .article-rightimg .article-intro-content, 
    .article-leftimg .article-intro-content, 
    .articletop-img img, .articletop-img teaser
        { width: 100%; }
    
}
/* Print */
@media print { 
    .print-hide { display: none; }
}