/*! 
 Pharma 1.1.1. ()
8 column layout,
mobile portrait - 1 column media 480px;;
mobile landsdcape- 2 column 480-640px;
table portrait - 3 column 640-768px;
else- 3>8 column 768px-1224px;
Copyright 2018, EMT team

colors:#069 - blue;

*/
* {
    box-sizing: border-box;
}
html {
    font-family:'Open Sans', sans-serif;
}
body {
margin:0;
padding:0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
video {
    display: inline-block;
    vertical-align: baseline;
}
/*
Your framework defines styling for type including headings, body copy/paragraphs, inline text elements (bold, italic, cite, code, variables, etc.) alignments, abbreviations, addresses, block quotes, and lists. Additionally, add transformation styling for uppercase, lowercase, and capitalization.
*/
header {
    background: url(../images/background.jpg) no-repeat
        center center;
    background-size:cover;
    height:50vh;
    margin-bottom: 18px;
}
.logo {
    padding-top 10px;
   
}
section img{
    width:50pxx;
    display:block;
}
html {
    font-size: 12px;
}
body {
    font-family: Open Sans, sans-serif;
    font-size:14px; 
    color:darkblue;
    background-color:#fff;
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a {
  background-color: transparent;
  color: #ccc;
  text-decoration: none;
}
a:active,
a:hover {
    outline:0;
}
a,a:visited {
    text-decoration:underline;
}
abbr[title] {
    font-style:italic;
}
abbr[title]:after {
    content: " (" attr(title) ")";
  }
cite{
    font-style:bold;
    font-size:22px;
    
}
b, strong {
    font-weight: bold;
}
em, italic {
    font-weight: italic;
}
h1 {
    margin:0.58em;
    font-size:1.8em;
}
h2, h3 {
    page-break-after: avoid;
}
.navbar{
    display:contents;
}
.navbar-default {
    
}
.nav-item{}
.nav-pills{}
.nav-link{}
.navbar-brand{}
.navbar-expand{}
.
.flex{
}
.flex-colunm{}


    
}
/*d-(BP)-TYPE
    TYPE = none, inline, inline-block, block, table, table-cell, flex, inline-flex*/

.fixed-bottom{}
.fixed-top{}


/* grid 




*/


.row::after {
    content: "";
    clear: both;
    display: table;
}
.row {
 margin-right: -13px;
 margin-left: -13px;
}
.row no-gutters{}
.container{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
    
}
@media (min-width:480px){
    .container{
        width:465px;
    }
}
@media (min-width:640px){
    container{
        width:620px;
    }
}
@media (min-width:768 ) {
    container:750px;
}  
@media (min-width:1224px){
    container:1200px;
}
.container-resp{
padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.mx-auto{}
/*
col classes 480px column<small grid, 680px<column -medium grid,768<large grid,1224px-xlarge grid,
col-BreakPoint-# number of columns
*/
[class*="col-"] {
    float: left;
    padding: 15px;
    border: none;
}

.col-8{
    width:100%;}
.col-7{
   width:87.5%; 
  
}
.col-6{
    width:75%;
}
.col-5{
   width:62.5; 
}  
.col-4{
    width:50%;
}
.col-3{
    width:37.5%;
}
.col-2{
    width:25%;
}
.col-1{
    width:12.5%;
}
@media (min-width:480px){
    
}
.align-items{
    
}
align-items-end{}
align-items-center{}
align-self{}
align-self-center{}


align-self-DIREC{}
/*DIREC = start, center, end*/
justify-content-ALGN{}
/*ALGN = start, end, center, around, between*/
/* Terry with tables*/
.label {
     border: 1px solid #000;
}
figure {
margin: 1em 40px;
}
figurecaption {
    margin: auto;
    position:inherit;
}
img{
    max-width:100% !important;
    border:0;
    vertical-align: middle;
}
img-fluid{
    
}
img-rounded{
    
}
img-rounded-top{
    
}
img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-circle {
  border-radius: 50%;
}
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
    font-family: inherit;
    font-weight: 400;
    line-height: 1;
    color: inherit
}
h1 small,
h2 small,
h3 small,
h4 small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small{
    font-weight: normal;
    line-height: 0,8;
    color:#777;
}
h1,
h2, 
.h1,
.h2{
    margin:  20px 0 10px;
}
h1 small,
h2 small,
h3 small,
h4 small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small{
    font-size:80%
}
h1, .h1{
    font-size:40px;
    }
h2, .h2{
    font-size:36px;
    }
h3, .h3 {
    font-size:30px;
}
h4, .h4{
    font-size:24px;
}
p { margin: 0 0 10px;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
.text-justify {
  text-align: justify;
}
.text-nowrap {
  white-space: nowrap;
}
.text-muted {
  color: #777;
}
.text-primary{
    color:069;
}
.page-header{
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}
font-weight-normal {
    
}
font-weight-bold{
    
}
.text-muted{}
    
mark, .mark {
   padding: .3em;
   background-color: beige;
}
.list-ustyled {
    
}
.list-inline {
    
}
.item {
    
}


.blockquote {
 padding: 10px 18px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #ccc;
}

.blockqoute-footer, blockquote-small{
  display: block;
  font-size: 75%;
  line-height: 1.28;
  color: #777;
}
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

address {
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.42857143;
}
slider {
    
}
jumbotron{
  padding-top: 3.5rem;
}
mt-4{
    
}

/* #### Mobile Phones Portrait #### 
@media screen and (max-device-width: 480px) and (orientation: portrait){
  */
@media (min-device-width:768px){
    small, 
    .small {
        font-size:75%;
    }
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}
.col-


@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}