/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 9, 2020, 9:21:26 AM
    Author     : Gašper R.
*/
@media screen and (max-width: 1300px){
    #SpotNewOffer{
        height: 100%;
        left: -10%;
    }
    #NewOfferBottle{
        top: 15%;
        left: 10%;
        position: absolute;
        z-index: 100;
        height: 70%;
        width: auto;
    } 
}
@media screen and (max-width: 1200px){
    #logo{
        height: 140px;
    }

    #spots1{
        position: absolute;
        height: 90%;
        left: -15%;
    }

    #spots3{
        display: none;
    }


    #howItStarts .cow-picture{
        padding-top: 200px;
        text-align: center;
    }
    #howItStarts .cow-picture img{
        height: 330px;
    }
    .button_su_inner, .button_su_inner1{
        width: 135px;
    }

    #ErrorLabel, #ErrorLabel1{
        margin-top: -72px;
        padding-bottom: 25px;
    }
    
    
    .newOffer img{
            width: 50%;
    }
    
    #howItStarts .lisa-1{
        display: none;
    }
    
    .creditCardBox .label2 {
        font-size: 12px;
        margin-left: 46%;
    }
    .userGreeting{
        margin-top: 8.5%;
    }
    .profile-nav li{
        margin-right: 10px;
    }
    .profile-nav li a{
        padding-left: 10px;
        padding-right: 10px;
    }
    .subscriptionDaySelector label{
        width: 15.7%;
        margin-right: 0px;
    }

}

@media screen and (max-width: 1100px){
    #spots2{
        display: none;
    }
    
    #howItWorks .lisa-2{
         display: none;
    }
}

@media screen and (max-width: 991px){
    
    .desktop_summary{
        display: none;
    }
    
    .mobile_summary{
        display: block;
    }
    
    
    #spots1{
        left: 20%;
    }

    #howItStarts .cow-picture{
        padding-top: 80px;
    }

    #faq h3{
        padding-bottom: 30px;
    }

    #footer .footer-image{
        text-align: center;
    }
    #footer .footer-image img{
        height: 70px;
    }
    #footer .footer-links{
        text-align: center;
        margin-top: 20px; 
    }
    #footer .footer-links ul{
        padding: 0 !important;
    }
    #footer .contact-info{
        text-align: center;
    }
    #footer .image-box{
        padding-top: 5px;
        text-align: center;
    }
    #footer .contact-info p{
        color: #000000 !important;
    }
    #footer .contact-info .image-box img:first-of-type{
        margin-right: 0;
    }
    #instagram{
        margin-left: 10px;
    }
    #footer .payment-info{
        text-align: center;
        padding-top: 20px;
    }
    #footer .payment-info img:nth-of-type(2){
        margin-left: 10px;
        margin-right: 0;
    }
    .summary{
        position: relative;
        width: 100%;
    }
    
    #howItWorks{
        padding-bottom: 220px;
    }
    
    #howItWorks .card-img{
            margin-top: 15px;
    }
    
    .newOffer .content{
        top: 155px;
    }
    
    .newOffer{
        padding-bottom: 50px;
    }
    
    .creditCardBox .label2 {
    font-size: 12px;
    margin-left: 54%;
    }
    
    .subpage_select_order .additionalText{
        padding-left: 30px;
    }
    
    #SpotNewOffer{
        display: none;
    }
    #NewOfferBottle{
        display: none;
    } 
    
    .checkoutPageSummary{
        display: none;
    }
    
    .mobile-summary{
        display: block;
        max-width: 100%;
        margin-bottom: 10px;
    }
    
    .mobile-summary-content{
        display: none;
        position: fixed;
        height: 100%;
        background-color: #f1f1f1;
        top: 0;
        left: 0;
        z-index: 9;
        transform: none;
        margin-top: 0px;
        text-align: center;
        width: 100%;
        margin: 0;
        min-height: 100%;
        padding-top: 3vh;
    }
    .navbar-active {
        display: block!important;
    }
    .menu-mobile-open{
        padding: 25px;
        background-color: #ffb0af;
        margin-right: -15px;
    }
    .menu-mobile-open img{
        height: 13px;
    }
    .mobile-logo{
        padding-left: 30px;
        padding-top: 9px;
        padding-bottom: 10px;
    }
    .mobile-logo img{
        max-height: 55px;
    }
    .mobilePrice{
        font-size: 20px;
        padding-top: 25px;
    }
    .mobilePrice p{
        font-size: 14px;
        display: inline;
    }
    .mobilePostNumber{
        padding-top: 25px;
        font-size: 18px;
    }
    .cartSpots{
        display: none;
    }
    .mobilefrequency{
        padding-top: 20px;
    }
    .mobileSummaryRow{
        padding-top: 20px;
        background-color: #ffffff;
        width: 80%;
        margin: 0 auto;
        margin-top: 8px;
        border-radius: 3px;
        color: #000000;
    }
    #ProductListMobile{
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }
    .closeSummary{
        margin-bottom: 10px;
        font-size: 25px;
    }
    .closeSummary img{
        height: 18px;
    }
    .rowTitle{
        padding-top: 15px;
        font-size: 12px;
        color: #a5a5a5;
    }
    #ProductsListMobile{
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }
    
    .bc{
        margin-left: -15px;
    }
    .pricesBox ul{
        font-size: 13px;
    }
    .profile-nav{
        margin-top: 40px;
    }
    .profile-nav li{
        display: block;
        margin-bottom: 10px;
    }

    .profile-nav li a.active-nav{
        padding-bottom: 5px;
    }
    .profile-nav li a{
        padding-left: 0px;
        padding-right: 0px;
    }
    .userGreeting{
        margin-top: 14.5%;
        font-size: 28px;
    }
    #UserSpots{
        display:none;
    }
    .profileBox{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .pro-qty.addOn{
        margin-top: 5%;
    }
    .addOnCard .supplier, .addOnCard .description{
        font-size: 14px;
    }
    .pro-qty input{
        font-size: 25px;
    }
    .productImg{
        width: 50px;
    }
    .subscriptionDaySelector label {
        width: 17.7%;
        font-size: 18px;
    }
}

@media screen and (max-width: 768px) {

    .subpage_select_order .select_type_card{
        font-size: 40px;
    }

    .subpage_select_order .additionalText{
        font-size: 14px;   
        padding-left: 10px;
    }
    #mainHeader .mainHeaderContent input {
        width: 72%;
    }

    #mainHeader .mainHeaderContent button {
        width: 28%;
    }

    /* ****MAIN HEADER *** */
    #mainHeader{
        margin-bottom: 40px;
    }
    #logo{
        height: 140px;
    }
    .mainHeaderContent .content-box h1{
        line-height: 1.4;
    }

    #spots2{
        display: none;
    }
    #spots3{
        display: none;
    }


    .circle_box_select_page{
        right: 40px;
    }

    .input-box{
        text-align: center;
    }

    /* ***HOW IT WORKS*** */
    #howItWorks{
        padding-top: 80px;
        padding-bottom: 40px;
    }
    #howItWorks .howItWorksContent h2{
        text-align: center;
    }
    #howItWorks .howItWorksContent .car-box{
        text-align: center;
    }

    #howItWorks .howItWorksContent .car-box img{
        height: 300px;
        margin-top: 50px;
    }
    #howItWorks input{
        width: 72%;
    }
    
    #howItWorks button{
        width: 28%;
    }

    /* ***HOW IT STARTS*** */    
    #howItStarts{
        padding-top: 80px;
        padding-bottom: 40px;
    }
    #howItStarts h2{
        text-align: center;
    }
    #howItStarts .reasons{
        margin-top: 40px;
    }
    #howItStarts .cow-picture{
        padding-top: 40px;
        text-align: center;
    }
    #howItStarts .cow-picture img{
        height: 300px;
    }
    /* ***FAQ*** */
    #faq{
        padding-top: 80px;
        padding-bottom: 40px;
    }
    #faq h3{
        padding-bottom: 25px;
        text-align: center;
    }
    #spots4{
        display: none;
    }

    /* ***FOOTER*** */
    #footer{
        padding-top: 80px;
        padding-bottom: 40px;
    }
    #footer .footer-image{
        text-align: center;
    }
    #footer .footer-image img{
        height: 70px;
    }
    #footer .footer-links{
        text-align: center;
        margin-top: 20px; 
    }
    #footer .footer-links ul{
        padding: 0 !important;
    }
    #footer .contact-info{
        text-align: center;
    }
    #footer .image-box{
        padding-top: 5px;
        text-align: center;
    }
    #footer .contact-info p{
        color: #000000 !important;
    }
    #footer .contact-info .image-box img:first-of-type{
        margin-right: 0;
    }
    #instagram{
        margin-left: 10px;
    }
    #footer .payment-info{
        text-align: center;
        padding-top: 20px;
    }
    #footer .payment-info img:nth-of-type(2){
        margin-left: 10px;
        margin-right: 0;
    }

    .button_su_inner, .button_su_inner1{
        width: 150px;
    }

    #ErrorLabel, #ErrorLabel1{
        width: 76%;
    }
    /* ***SUBPAGE CSS*** */
    #spot{
        right: -10%;
        width: 200px;
    }
    .subpage .logo{
        height: 60px;
    }

    table.dataTable tbody th, table.dataTable tbody td {
        padding: 3px 9px;
        font-size: 10px;
    }

    .dataTables_wrapper{
        overflow: scroll;
    }

    .cartPage .cart-card{
         padding-left: 20px;
        padding-right: 20px;
    }

    .cart-section .frequency label {
        margin-bottom: 0px;
        font-size: 12px;
    }

/*    .cart-card .cart-section .cart-title h3{
        text-align: center;
    }*/
    
    #howItWorks .card-img{
        position: relative;
        margin: 0 auto;
        display: block;
        margin-top: 75px;
        margin-bottom: -93px;
        max-width: 100%;
    }
    
    .newOffer .content {
        top: 155px;
        position: relative;
        width: 100%;
        top: 50px;
        text-align: center;
    }
    
    .newOffer img {
        width: 60%;
    }

    .newOffer {
        padding-bottom: 65px;
        padding-top: 85px;
    }
    
    .navigation li a{
        font-size: 16px;
    }
    
    input.timestamp{
        margin-left: 0px;
    }
    
    .creditCardBox .cc_tooltip{
        max-width: 100%;
        top: -18px;
        height: 120px;
        width: 200px;
    }
    
    .creditCardBox{
        padding: 10px 0px;
    }
    
    .creditCardBox .label2 {
        margin-left: 18%;
    }
    
    .cart-section .frequency label.breakfasts_box{
        margin-bottom: 15px;
    }
    
    .subpage_select_order h3{
        padding-top: 5vh;
    }
    .new_offer_circle{
        position: relative;
        right: 0;
        margin-top: 30px;
        margin: 0 auto;
    }
    .newOffer .title{
      text-align: center;  
    }
    .noListStyle span{
        width: 50%;
    }
    
    .menu-mobile-open{
        padding: 25px;
        background-color: #ffb0af;
    }
    .menu-mobile-open img{
        height: 13px;
    }
    .mobile-logo{
        padding-left: 5px;
        padding-top: 9px;
        padding-bottom: 10px;
    }
    .mobile-logo img{
        max-height: 55px;
    }
    .mobilePrice{
        font-size: 18px;
        padding-top: 25px;
    }
    .mobilePrice p{
        font-size: 11px;
    }
    
    .cartStep4Page{
        background-color: #ffffff;
        background: none;
    }
    .mobile-grey{
        background-color: #f1f1f1;
        padding-top: 20px;
        padding-bottom: 25px;
    }
    .checkoutSummary{
        width: 100%;
    }
    .bc {
        margin-left: 10px;
        margin-top: 25px;
    }
    .basicData{
        width: 100%;
    }
    #PrivacyPolicy, #ToggleLegalBoxInput{
        width: 50%;
    }
    .cartStep4Page .cart-section .cart-title h3{
        text-align: center;
    }
    .cartStep4Page input{
        font-size: 13px;
        padding-left: 5px;
    }
    .backButton{
        text-align: center;
        margin-bottom: 5px;
        margin-top: 5px;
    }
    .paymentInfo{
        width: 100%;
    }
    .creditCardBox img{
        margin-top: -70px;
        right: 15px;
    }
    .linkBox{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .daySelectorStep3 label{
        width: 40%;
        font-size: 18px;
    }
    .counterDelivery ul{
        display: block;
    }
    .daySelector label{
        width: 25%;
        font-size: 18px;
    }
    .milkFrequency h5, .packageSelect h5{
        font-size: 24px;
    }
    .packageSelect h6{
        font-size: 14px;
    }
    .packageCard label h5{
        font-size: 20px;
    }
    .packageCard .cartPrice{
        font-size: 18px;
    }
    .pro-qty input{
        font-size: 25px;
    }
    .pro-qty .inc{
        line-height: 55px;
    }
    .pro-qty .dec{
        line-height: 45px;
    }
    .productSelect h5{
        font-size: 24px;
    }
    .productSelect h6{
        font-size: 14px;
    }
    .milkFrequency label{
        font-size: 18px;
    }
    .productCard .cartPrice{
        font-size: 18px;
    }
    .productCard label h5{
        font-size: 20px;
    }
    input[name="PaymentType"]{
        width: 50%;
    }
    .cartStep4Page .cart-section .cart-title h3{
        font-size: 24px;
    }
    .checkoutPage{
        margin-bottom: 25px;
    }
    .wholeSummary{
        margin-top: 25px;
    }
    .additionalText{
        margin-bottom: 25px;
    }
    .daySelectorDashboard label{
        width: 60%;
    }
    .daySelectorAddOn label{
        width: 60%;
    }
    .userGreeting{
        font-size: 22px;
    }
}

@media screen and (max-width: 600px) {
    /* ****MAIN HEADER *** */
    #mainHeader{
        margin-bottom: 25px; 
        padding-bottom: 322px;
    }
    #logo{
        height: 70px;
    }
    .mainHeaderContent .content-box{
        padding-top: 60px;
    }
    .mainHeaderContent .content-box h1{
        font-size: 45px;
        line-height: 1.1;
    }
    #mainHeader .mainHeaderContent input{
        width: 72%;
    }
    
    #mainHeader .mainHeaderContent button{
         width: 28%;
    }
    
    #howItWorks button{
         width: 28%;
    }
    .input-box{
        text-align: center;
    }
    #spots2{
        display: block;
        width: 80px;
    }
    #spots3{
        display: none;
    }
   #spots1 {
    display: block;
    height: 244px;
    top: 391px;
}
    #mainHeader .mainHeaderContent #flasa{
        height: 230px;
        position: absolute;
        margin-top: 386px;
        left: 50%;
        width: 88px;
        margin-left: -44px;
    }

    .headerImage1 {
        margin-right: 59px;
        left: 97px;
        top: 370px;
        width: 68px;
    }

    .headerImage2 {
        bottom: -95px;
        right: 78px;
        top: 517px;
        width: 107px;
    }

    .circle_box{
        top: 390px;
        right: 20px;
        width: 130px;
        height: 130px;
    }

    .circle_box .circle_title{
        font-size: 20px;
    }

    .circle_box .circle_text{
        font-size: 16px;
    }
    
    .circle_box_select_page {
        top: -50px;
        right: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        padding: 10px;
    }

    .circle_box_select_page .circle_text{
        font-size: 16px;
    }
    
    .circle_box_select_page .circle_title{
        font-size: 20px;
    }

    /* ***HOW IT WORKS*** */
    #howItWorks{
        padding-top: 80px;
        padding-bottom: 25px;
    }
    #howItWorks .howItWorksContent h2{
        font-size: 40px;
        text-align: center;
    }
    #howItWorks ol{
        line-height: 2;
    }
    ol li:before{
        margin-top: 0px;
        line-height: 25px;
        width: 25px;
        height: 25px;
    }
    #howItWorks input{
        width: 72%;
    }
    #howItWorks .howItWorksContent{
        padding-bottom: 20px;
    }
    #howItWorks .howItWorksContent .car-box{
        text-align: center;
    }
    #howItWorks .howItWorksContent .car-box img{
        height: 170px;
        margin-top: 30px;

    }

    /* ***HOW IT STARTS*** */
    #howItStarts{
        padding-top: 40px;
        padding-bottom: 25px;
    }
    #howItStarts h2{
        font-size: 40px;
        text-align: center;
    }
    #howItStarts .reasons{
        margin-top: 30px;
    }
    #howItStarts .cow-picture{
        padding-top: 30px;
        text-align: center;
    }
    #howItStarts .cow-picture img{
        height: 200px;
    }
    /* ***FAQ*** */
    #faq{
        padding-top: 40px;
        padding-bottom: 25px;
    }
    #faq h3{
        font-size: 40px;
        padding-bottom: 20px;
        text-align: center;
    }
    .faq-section__title{
        padding-left: 5px;
        font-size: 14px;
    }
    .faq-section__content{
        font-size: 14px;
        padding-left: 5px;
        padding-right: 20px;
    }
    .faq-section__opened{
        height: 18px;
        width: 30px; 
    }
    .faq-section__closed{
        height: 18px;
        width: 30px;  
    }
    #spots4{
        display: none;
    }

    /* ***FOOTER*** */
    #footer{
        padding-top: 40px;
        padding-bottom: 25px;
    }
    #footer .footer-image{
        text-align: center;
    }
    #footer .footer-image img{
        height: 70px;
    }
    #footer .footer-links{
        text-align: center;
        margin-top: 20px; 
    }
    #footer .footer-links ul{
        padding: 0 !important;
    }
    #footer .contact-info{
        text-align: center;
    }
    #footer .image-box{
        padding-top: 5px;
        text-align: center;
    }
    #footer .contact-info p{
        color: #000000 !important;
    }
    #footer .contact-info .image-box img:first-of-type{
        margin-right: 0;
    }
    #instagram{
        margin-left: 10px;
    }
    #footer .payment-info{
        text-align: center;
        padding-top: 20px;
    }
    #footer .payment-info img:nth-of-type(2){
        margin-left: 10px;
        margin-right: 0;
    }

    .button_su_inner, .button_su_inner1{
        width: 100%;
    }

    #ErrorLabel, #ErrorLabel1{
        width: 65%;
    }

    .cart-section .daySelector label{
        width: 27.7%;
        margin-top: 0px;
        font-size: 16px;
    }

    .cart-section .milkQuantity label{
        margin-top: 0px;
        font-size: 16px;
    }

    .milkQuantity h5{
        margin-top: 20px;
    }

    .cart-button{
        margin-top: 0px;
        width: 100%;
    }

    .navigation {
        list-style: none;
        float: right;
        margin-right: 0;
        margin-top: 14px;
    }
    
    .cart-section .milkQuantity input[type="radio"]:checked + label:after{
            top: -8px;
    }
    
    .newOffer .title{
        font-size: 40px;
    }
    .newOffer .subtitle{
        font-size: 30px;
    }
    .new_offer_circle{
        height: 130px;
        width: 130px;
        padding-top: 30px;
    }
    .new_offer_circle .circle_text{
        font-size: 18px;
    }
    .new_offer_circle .circle_title{
        font-size: 24px;
    }
    .subscriptionDaySelector label{
        margin-left: 0;
        width: 18.7%;
        font-size: 16px;
    }
    .productCard label h5 {
        font-size: 16px;
    }
}

@media screen and (max-width: 420px) {
    #ErrorLabel, #ErrorLabel1{
        margin-top: -55px;
    }
    .noListStyle span{
        width: 65%;
    }
    .circle_box{
        top: 400px;
    }
    .headerImage1{
        top: 390px;
    }
    #spots1{
        top: 400px;
    }
    #mainHeader .mainHeaderContent #flasa{
        margin-top: 410px;
    }
    .headerImage2{
        top: 520px;
    }
    .mobilePrice p{
        font-size: 11px;
        display: block;
    }
    .mobilePrice{
        padding-top: 18px;
    }
    .subscriptionDaySelector label{
        margin-bottom: 15px;
        width: 23%;
    }
        
}
@media screen and (max-width: 375px) {
    #ErrorLabel, #ErrorLabel1{
        margin-top: -72px;
    }
    .circle_box{
        top: 445px;
    }
    .headerImage1 {
        top: 452px;
    }
    #spots1 {
        top: 450px;
    }
    #mainHeader .mainHeaderContent #flasa {
        margin-top: 480px;
    }
    .headerImage2 {
        top: 520px;
    }
    .navigation li a {
        font-size: 13px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media screen and (max-width: 350px){
    #mainHeader{
        margin-bottom: 25px; 
    }
/*    #mainHeader .mainHeaderContent #flasa{
        margin-top: 350px;
    }*/

    #howItWorks{
        padding-top: 65px;
        padding-bottom: 25px;
    }

    ol li:before{
        margin-top: 0px;
        line-height: 35px;
        width: 25px;
        height: 25px;
    }
    .circle_box_select_page {
        top: -30px;
    }
}