@charset "utf-8";
html {font-size: 62.5%; }
/*include padding etc in size*/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
header, section, footer, aside, nav, main, article, figure {display: block;} 
body {   margin:0 0 0 0; font-size: 1.5em /* bug fix */;}
.body-container {position: relative; width: 100%; max-width: 1400px; /*site width*/ margin: 0 auto; /*centre*/} 	
.img-float-right { float:right;}
.img-float-left { float:left;}
/*MAIN FLEXBOX*/
/*how should main flex work*/
.flex-columns {display: flex; flex-wrap: wrap;flex-direction:row}
.flex-columns-reverse {display: flex; flex-wrap: wrap;flex-direction:row-reverse}

blockquote {margin:0;font-style:italic}
blockquote > p {
  display:inline;
}

blockquote:before { 
    
    font-weight: bold;
    font-size:50px;
  	position: relative;
    top: 20px;
    padding-right:7px;font-family:  Georgia, "Times New Roman", Times, serif;
	line-height:20px !important;content: "\201C";
	color:#285590}
	
	blockquote:after { 
   
    font-weight: bold;
    font-size:50px;
  	position: relative;
    top: 27px;
    padding-left:7px;font-family:  Georgia, "Times New Roman", Times, serif;
	line-height:0px !important;content: "\201D";
	color:#285590
	}
	
.referral {max-width:40%; padding-bottom:15px}


.main {margin:15px 35px 25px 35px;}

/*what  should boxes be in*/
.order-left {order:1;} 
.order-mid {order:2;}
.order-mid-left {order:2;}
.order-mid-right {order:3;}
.order-right {order:4;}

/*box images*/
.box-fit {max-width:100%; max-height:auto;}




/*--------------------------SKIN---------------------------------*/
body {background-color: #285590; color: #444;
    /* background-image:url(../images/skin/medium-paws.png);*/
      line-height: 2.6; font-weight: 300;
      font-family: 'Open Sans', sans-serif;   }

.full-row { margin:0px 0px 0px 0px }

.body-container {background-color: #fff;position: relative; width: 100%; max-width: 1400px; /*site width*/ margin: 0 auto; /*centre*/box-sizing: border-box;
box-shadow: 12px 0 15px -4px #021330, -12px 0 15px -4px #021330;} 			 		  

.padded-row {padding:20px;}
.box-row {padding:8px;}
.border {border-style: solid; border-width: 8px; border-radius: 8px; border-color:#285590; margin:20px 0px 20px 0px; padding:0px 20px 0px 20px} /*used with flex*/
.review-box {padding: 0px 20px 0px 25px; margin:20px 0px 20px 0px}
.border-gold {border-style: solid; border-width: 8px;border-radius: 8px; border-color:#f5c431; margin:20px 0px 20px 0px;  padding:0px 20px 0px 20px} /*used with flex*/
.fullwidth-border {border-style: solid; border-width: 8px; border-color:#666; margin:0px 20px 0px 20px !important}/*used with stand-alone row*/
.centermobile {padding:0px !important; margin-top:0px; max-width:93%;width:100%;height:auto} 
.review-centermobile {padding:0px !important; margin-top:0px; max-width:98%;height:auto} 

/*how many default columns*/
.box2 {flex: 1; min-width: 48%;padding:10px 10px 10px 10px;}
.box3 {flex: 1; min-width: 31%;padding:10px 10px 10px 10px;}
.box4 {flex: 1; min-width: 24%;padding:10px 10px 10px 10px;}
.first2thirds {flex: 1; min-width: 66%;padding:20px 10px 0px 0px;}
.lastthird {flex: 1; min-width: 33%;padding:20px 0px 0px 10px;}
.firstthird {flex: 1; min-width: 33%;padding:20px 10px 0px 0px;}
.last2thirds {flex: 1; min-width: 66%;padding:20px 0px 0px 10px;}
.firsthalf {flex: 1; min-width: 50%;padding:20px 10px 0px 0px;}
.secondhalf {flex: 1; min-width: 50%;padding:20px 0px 0px 10px;}
/*.carousel {padding:0px !important;}*/

/*flexible logo
.logo img {  max-width:100%;max-height:100%; }
.logo  {flex: 1; min-width: 69%; }*/

/*image logo*/
.logo  {background-repeat: no-repeat;width: 100%;height: 0; padding-top: 17.85%;background-size: contain; background-image:url(../images/skin/vita-vitalis-banner.png); }

/*header*/
.flex-header {flex: 1; min-width:: 29%; margin: 20px 20px 0 0; display: flex; flex-wrap: wrap;flex-direction:column; max-height:169px !important}

/*contact info*/
.social-info-facebook-footer {text-align: right; order:1;  max-width: 5.8%; max-height:10%;margin-right:10px }
.social-info-instagram-footer {text-align: right; order:1;  max-width: 10%; max-height:10%;margin-right:10px }
.social-info {text-align: right; order:1;  max-width: 10%; max-height:10%;margin-right:10px }

.header-email {text-align: right;order:2;max-height:22%}
.email-text { font-size:24px;margin-top: 9%;color:#000;/* text colour */}

.header-tel {text-align: right;order:3; max-height:22%}
.tel { font-size:24px;/* text colour */}

/*SAMPLES*/	
.samples { text-align: center; }
audio {max-width: 90% !important; margin: 0 auto; display: block;}


/*footer*/
footer {color:#FFF; background-color:#285590; padding: 0 20px;display:block;}
.footerlink {color: #debb30; }
.footerlink-nofollow {color: #777; }
.footerlink-privacy {color: #999; }
.footerlink-white {color: #FFF; }



/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

p {margin: 10 0 0 0;}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {color: #0a2b61; }
a:hover {color: #debb30; }



h1, h2, h3 {
  color:#0a2b61;/* s colour */
  margin-top: 0;
  margin-bottom: 0px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;}

h1 { font-size: 2.6rem; line-height: 1.2;  letter-spacing: 2px;}
h2 { font-size: 2rem !important; margin-bottom: 1rem !important; line-height: 1.3; letter-spacing: 0rem; }
h3 { font-size: 1.8rem; line-height: 1.3;  letter-spacing: -.1rem; }

/*GENERAL LINKS BEHAVIOUR

a:link, a:visited {color:#000; text-decoration:none}
a:hover, a:active{color:#000; text-decoration:underline}*/

a {color: #0a2b61; font-weight:bold;text-decoration:none}
a:hover { text-decoration:underline  }


/*SPECIFIC LINKS BEHAVIOUR
.navbar a:link {color:#FFF}
.navbar a:visited {color: #FFF}
.navbar a:hover {color: #FFF; text-decoration:underline}
.navbar a:active {color: #FFF}*/

/* Images
––––––––––––––––––––––––––––––––––––––––––––––––– */
.fullwidth-img {width:100%;}
.halfwidth-img {width:50%;margin: auto;display:block; min-width:300px }
.first-para {margin-top:25px}

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {list-style: none;  }
ol {list-style: decimal inside; }
ol, ul {padding-left: 20px; margin-top: 0; }
ul ul, ul ol, ol ol, ol ul {padding-left:20px; font-size: 90%; }
li { }

/* MOBILE*/

/* Larger than phablet */
@media (min-width: 550px) {   
  h1 { font-size: 3.4rem; }
  h2 { font-size: 3.4rem; }
  h3 { font-size: 3.4rem; }
 }

@media (max-width: 780px) { body {line-height: 1.9em !important; font-size: 1.5em font-weight: 300;
       }
	.social-info {text-align: right; order:3;}
                           .header-email {text-align: right;order:1}
						   .header-tel {text-align: right;order:2}
						   .flex-header {flex-direction:row;margin: 0 0 0 0;justify-content:space-around; flex: 1;min-width::320px;}
						   .logo-image {max-width: 99%;}
						   .tel { font-size:24px; margin-top:0% !important}
						   .email-text { font-size:24px; margin-top:0% !important}
						   .logo  {flex: 1; min-width: 99%; background-image:url(../images/skin/mobile-just-logo.png);padding-top: 44% !important; }           .full-row { margin:0px 0px 0px 0px }
						   .border {border-width: 8px;border-radius: 5px; border-color:#0a2b61; margin:0px 0px 0px 0px}   
						        .main {margin:15px 20px 25px 20px}   ;
								                 
<!--@media (max-width: 1024px) { .padded-row {padding:20px;} }   for padding at edges on dark sites ---->


 }

@media (max-width: 600px) {.tel { font-size:20px; margin-top:0% !important}
						   .email-text { font-size:24px; margin-top:0% !important}
.referral {max-width:100%}}
@media (max-width: 700px) {.box2 {min-width: 99%;   padding:10px 10px 10px 10px; }  }
@media (max-width: 690px) {.box2 {min-width: 99%;   padding:10px 10px 10px 10px}  }  
<!--ipad footer bug fix-->
@media (max-width: 700px) {.box3 {min-width: 49%;   padding:10px 10px 10px 10px; }  }
@media (max-width: 690px) {.box3 {min-width: 99%;  padding:10px 10px 10px 10px}  }

@media (max-width: 800px) {.box4 {min-width: 33.33%;padding:10px 10px 10px 10px;}}
@media (max-width: 620px) {.box4 {min-width: 49%;   padding:10px 10px 10px 10px; }  }
@media (max-width: 420px) {.box4 {min-width: 99%;   padding:10px 10px 10px 10px;}  }

@media (max-width: 990px) { 
.flex-columns-reverse {flex-direction:row !important}	
.first2thirds {flex: 1; min-width: 99%;padding:10px 0px 0px 0px !important;}
.lastthird {flex: 1; min-width: 99%;padding:0px 0px 20px 0px !important;}
.firstthird {flex: 1; min-width: 99%;padding:10px 0px 0px 0px !important;}
.last2thirds {flex: 1; min-width: 99%;padding:0px 0px 20px 0px !important;}
.firsthalf {flex: 1; min-width: 99%;padding:10px 0px 0px 0px !important;}
.secondhalf {flex: 1; min-width: 99%;padding:0px 0px 20px 0px !important;}
.centermobile {max-width:93%; margin: auto; display: block; max-height:auto;}
.first-para {margin-top:0px !important}
}



.clearfix:before, .clearfix:after{display: table; content: " ";}
.clearfix:after{ clear: both;}