@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    overflow-x: hidden;
}
.logo {
    width: 100%;
    max-width: 22%;
}
   
    
    .Citravite-XT-image {
    width: 100%;
    max-width: 63%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
    
    .citrus-text-div {
    color: #fff;
     border-right: none;
        
}
    
    .category {
    line-height: 24px;
    padding: 20px;
}

    
    
.orange-white {
    background-color: #e84c09;
    background-image: linear-gradient(180deg, #e84c09 0%, #e84c09 50%, #fff 50%, #fff 100%);
   padding: 20px;
}
.white-light-orange {
    background-color: #e84c09;
    background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #f3963b 50%, #f3963b 100%);
      padding: 20px;
}

.white-light-orange2 {
    background-color: #f0834b;
    background-image: linear-gradient(180deg, #f0834b 0%, #f0834b 50%, #fff 50%, #fff 100%);
    padding: 20px;
}

.vitamin-c {
    width: 100%;
    max-width: 45%;
    /* margin-top: 48px; */
    padding-top: 50px;
}
 
    
.reference-text {
    font-size: 12px;
    color: #868786;
    margin-top: 171px;
    float: left;
    padding-left: -3px;
    margin-left: -28px;
}   
    
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;   
    
}
    
    
 .msform input, .msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
    width: 100%;
}   
 
 .logo-with-colour {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
    max-width: 101%;
}   
    
    
}

@media only screen and (min-device-width : 1501px) and (max-device-width :2000px) {}

@media only screen and (min-device-width : 1201px) and (max-device-width :1500px) {}