/*  common.css                                            */
/* Designed on laptop with 1900 x 900 pixel resolution    */
/* Top position: Sets the top edge position in % of containing element. Negative values are allowed */
/* misc start                                             */
/* typical screen sizes                                   */
   /* Iphones */
   /*  original 2G, 3G, 3GS  series   320 x 480  */
   /*  4, 4s      640 x 960                      */
   /*  5 series  640 x 1136                      */
   /*  6, 6s, 7, 8  series  750 x 1334           */
   /*  6+, 6s+, 7+, 8+ series 1242 x 2208        */
   /*  X, Xs series  1125 × 2436                 */
   /*  Xr series  828 x 1792                     */
   /*  Xs max series 1242 x 2688                 */
   /*                                            */
   /* Android phones                             */
   /*  350 x 790                                 */
   /*  750 x 1334                                */
   /*  1080 x 1920                               */
   /*  1440 x 2960                               */
   /*                                            */
   /* Inner window size                          */
   /*    my laptop: 1712w x 833h               1883w  */
   /*    san's laptop 1198w x 585h             1317w  */
   /*    my phone (landscape): 803w x 390h      883w  */
   /*    san's phone (landscape): 592w x 336h   651w  */
   /*    my phone (portrait):  412w x 722h      453w  */
   /*    san's phone (portrait): 360w x 512h    396w  */ 
/***************************************************************************/
/*                                                                         */
/***************************************************************************/

/************   Global definitions    **************************************/

@font-face { font-family: Qwigley-Regular; src: url('../fonts/Qwigley-Regular.ttf') }
@font-face { font-family: bubblerone-regular; src: url('../fonts/bubblerone-regular.ttf') }

a:link {color: #fff;}     /* visited link    */
a:visited {color: #fff;}  /* mouse over link */
a:hover {color: #fff;}    /* selected link   */
a:active {color: #fff;}   /* active link     */

.pspec1 {
    font-family: 'Qwigley-Regular';
    font-size: 3vw;
    color: white;
}


.l {
  text-align-last: left;
}

.c {
  text-align-last: center;
}

.j {
  text-align-last: justify;
}

.r {
  text-align-last: right;
}
/***************************************************************************/
/* Code after this media test will execute only if screen width is less    */
/* than the max width defined in the media statement                       */
/***************************************************************************/

@media only screen and (max-width: 3200px) {
/* All attributes from previous media query will be retained          */
/* Only attributes defined in this section will be overridden         */

.container {
    position: relative;
    width: 100%;
    max-width: 1700px;

}

.container img{
    z-index: 1;
    max-width: 100%;
}

/**   Logo definitions   ***************************************************/

.logoimg {
    content: url(http://blackberryvines.com/bv/images/20190712_183840logo1_92px_oval.png);
    position: absolute;
    display: block;
    width: 8vw;
    height: auto;
    z-index: 1;
    top: .5vw;
    left:19.5vw; 
      }

.logo1 {
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    position: absolute;
    font-size: 7.2vw;          
    top: .3vw;                 
    left: 20.5vw;   
      }

.logo2 {
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
     position: absolute;
    font-size: 7.2vw;          
    top: 3.3vw;               
    left: 21.5vw;   
      }

/*   Header definitions   **************************************************/

.header {
    z-index: 2;
    color: #4d0026;
    font-family: 'Qwigley-Regular';
     position: absolute;
    font-size: 9vw;           /* 9% of view port width   */
    top: .3vw;                 /* 2% of view port width   */
    left: 27vw;               /* 31% of view port width  */
      }
      
.header2 {
    z-index: 2;
    color: #4d0026;
    font-family: 'Qwigley-Regular';
     position: absolute;
    font-size: 2vw;           /* 2% of container width   */
    top: 2.5vw;              
    left: 37vw    /* 31.6% of 1650   =  */
      }
      
.label1 {
    position: absolute;
    z-index: 3;
    color: #4d0026;
    font-family: 'Qwigley-Regular';
    font-size: 3vw;
    top: 7vw;
    left: 57vw; 
      }

.label2 {
    position: absolute;
    z-index: 2;
    color: #4d0026;
    font-family: 'Qwigley-Regular';
    font-size: 4vw;
    top: 11vw;
    left: 38vw; 
      }
.phone1 {
    position: absolute;
    z-index: 2;
    color: #4d0026;
    font-family: 'Qwigley-Regular';
    font-size: 2.5vw;
    top: 9vw;
    left: 56vw; 
      }

.overlay1 {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 3vw;
    top: 10vw;
    left: 4.5vw;
      }

.overlay2 {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 3vw;
    top: 17vw;
    left: 4.5vw;
      }

.overlay2b {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 3vw;
    top: 24vw;
    left: 4.5vw;
      }

.overlay2c {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 3vw;
    top: 31vw;
    left: 4.5vw;
      }
        
.overlay3{
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 3vw;
    top: 38vw;
    left: 4.5vw;
      }

.overlay4{
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 3vw;
    top:38vw;
/*    top:45vw;     */
    left: 4.5vw;
      }
      
/* Overlay5 is used for the text box in About, Plant, Prop   */      
.overlay5{
    position: absolute;
    z-index: 3;
    color: #fff;
    padding: 10px;
    background: rgba(70, 70, 49, 0.6);
    width: 50%;
    height: 60%;
    overflow: scroll;
/*    font-family: 'Qwigley-Regular';    */
/*    font-family: 'bubblerone-regular';   */
    font-family: sans-serif;         
    font-size: 1.5vw;
    top: 27%;
    left: 32%; 
    }
 
 /* Overlay6 is used for the text box in About, Plant, Prop   */      
.overlay6{
    position: absolute;
    z-index: 3;
    color: #fff;
    padding: 10px;
    background: rgba(70, 70, 49, 0.6);
    width: 50%;
    height: 65%;
    overflow: scroll;
/*    font-family: 'Qwigley-Regular';    */
/*    font-family: 'bubblerone-regular';   */
    font-family: sans-serif;         
    font-size: 1.5vw;
    top: 27%;
    left: 32%; 
    }
    
div.container div.overlay6 div.img5{
    float: right;
    }

/*  Contact page related definitions   ***************************/
.contactheader {
    z-index: 1;
    color: #4d0026;
    font-family: 'Qwigley-Regular';
     position: absolute;
    font-size: 7vw;
    top: .1vw;    
    left: 3vw;   
      }

.contactlabel1 {
    position: absolute;
    z-index: 2;
    color: #4d0026;
    font-family: 'Qwigley-Regular';
    font-size: 3vw;
    top: 5.1vw;
    left: 35vw; 
      }
.coverlay1 {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 2.5vw;
    top: 5.6vw;
    left: 4.5vw;
      }

.coverlay2 {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 2.5vw;
    top: 8.5vw;
    left: 4.5vw;
      }

.coverlay2b {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 2.5vw;
    top: 11.3vw;
    left: 4.5vw;
      }
      
.coverlay2c {
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 2.5vw;
    top: 14.3vw;
    left: 4.5vw;
      }
      
.coverlay3{
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 2.5vw;
    top: 17.3vw;
    left: 4.5vw;
      }

.coverlay4{
    position: absolute;
    z-index: 2;
    color: #fff;
    font-family: 'Qwigley-Regular';
    font-size: 2.5vw;
    top: 17.3vw;
/*    top: 20.3vw;    */
    left: 4.5vw;
      }
}

/***************************************************************************/
/*                                                                         */
/***************************************************************************/

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

/* All attributes from previous media query will be retained          */
/* Only attributes defined in this section will be overridden         */

.container {  
    max-width: 1600px;
 }

.container img{
    z-index: 1;
    max-width: 100%;
}
#form-div{
	    background-color: #576780;
}   
}

/***************************************************************************/
/*                                                                         */
/***************************************************************************/

@media only screen and (max-width: 1352px) {
/* All attributes from previous media query will be retained          */
/* Only attributes defined in this section will be overridden         */

.container {
    max-width: 1352px; /* height will be 750px                        */
}
#form-div{
	    background-color: #576780;
}   
}

/***************************************************************************/
/*                                                                         */
/***************************************************************************/

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

/* All attributes from previous media query will be retained          */
/* Only attributes defined in this section will be overridden         */

.container {
    max-width: 805px; /* height will be 350px                        */
}
#form-div{
	    background-color: #576780;
}   
}

/***************************************************************************/
/*                                                                         */
/***************************************************************************/

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

/* All attributes from previous media query will be retained          */
/* Only attributes defined in this section will be overridden         */

.container {
    max-width: 415px; /* height will be 350px                        */

}
#form-div{
	    background-color: #576780;
}   
}