body{
    background: whitesmoke;
    margin-top: 70px;
}

@font-face 
{font-family:"bellerose";
src: url("fonts/bellerose.eot");
src: 
url("fonts/bellerose.woff") format("woff"),
url("fonts/bellerose.ttf") format("opentype"),
url("fonts/bellerose.svg#bellerose") format("svg");
}

@media only screen and (max-width: 700px) {
    .h1 {
        font-size: 18px;
    }
}

@media only screen and (max-width: 420px) {
    .h1 {
        font-size: 11px;
    }
}

@media only screen and (max-width: 1100px) {
    .h2 {
        margin-top: 30px;
        font-size: 15px;
    }
}



@media only screen and (max-width: 1100px) {
    .h4 {
        font-size: 16px;
    }
}

@media only screen and (max-width: 700px) {
    .h4 {
        font-size: 14px;
    }
}

@media only screen and (max-width: 490px) {
    .h4 {
        font-size: 8px;
    }
}


@media only screen and (max-width: 700px) {
    .h5 {
        font-size: 12px;
    }
}

@media only screen and (max-width: 420px) {
    .h5 {
        font-size: 7px;
    }
}




.navbar-inverse{
    padding-top: 5px;
    padding-bottom: 10px;
    background: #0a6be7;
    color: white;
    
    }

.nav.navbar-nav.navbar-right li a {
    color: white;
}

.nav.navbar-nav.navbar-right li a:hover {
    color: black;
}

.navbar .navbar-brand {
  padding-top: 10px;
  color: white; 
}
.navbar .navbar-brand img {
  height: 45px;
}

.dropdown-submenu{
    background: #0a6be7;
}


.slide{
    margin-left: -15px;
    margin-right: -15px;
}


.quote{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color:  rgba(255,255,255,0.2);
    
}


#firstquote{
    
    padding-top: 150px;
    padding-bottom: 150px;
    font: italic serif;
    font-size: xx-large;
    color: white;
    background-color: #ff7f4a;
}



#firstparaouter{
    font-family: monospace;
    font-style:  oblique;
    margin-top: 15px;
    background: rgba(0,0,0,0.7);
    color: white;
    width: 50%;
}




#firstparainner{
    padding: 25px;
}


.thumbnail{
    margin-top: 15px;
}


.thumbnail2{
    width: 350px;
    height: 235px !important;
}

.thumbnail3{
    height: 100% !important;
}




#secondquote{
    padding-top: 150px;
    padding-bottom: 150px;
    font: italic serif;
    font-size: xx-large;
    color: white;
    background-color: cornflowerblue;
}




.secondparaouter{
    font-family: monospace;
    font-style:  oblique;
    margin-top: 15px;
    background: rgba(0,0,255,0.1);
    height: 240px;
    min-height: 200px;
    min-width: 290px;
    width: 350px;
    color: black;
}


@media only screen and (max-width: 800px) {
    .secondparaouter{
        height: 200px;
        margin-top: 5px;
        padding: 5px;
    }
}



#thirdquote{
   
    padding-top: 150px;
    padding-bottom: 150px;
    font: italic serif;
    font-size: xx-large;
    color: white;
    background-color: #69bc69;
}



.listouter{
    
    background: url(../images/indexbottom1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    font-size: xx-large;
}

.listinner{
    text-align: center;
    padding-top: 200px;
    padding-bottom: 200px;
    font-size: xx-large;
    font-family: monospace; 
    background: rgba(0,0,0,0.7);
}


@media only screen and (max-width: 1200px) {
    .listinner {
        font-size: 26px;
    }
}

@media only screen and (max-width: 922px) {
    .listinner {
        font-size: 22px;
    }
}

@media only screen and (max-width: 768px) {
    .listinner {
        font-size: 20px;
    }
}

@media only screen and (max-width: 600px) {
    .listinner {
        font-size: 18px;
    }
}

@media only screen and (max-width: 500px) {
    .listinner {
        font-size: 16px;
    }
}

@media only screen and (max-width: 400px) {
    .listinner {
        font-size: 14px;
    }
}

@media only screen and (max-width: 350px) {
    .listinner {
        font-size: 12px;
    }
}



#forthquote{
  
    padding-top: 150px;
    padding-bottom: 150px;
    font: italic serif;
    font-size: xx-large;
    color: white;
    background-color: #ff7070;
}



footer{ 
      height: auto;
      align-content: center;
      background-color: #0a6be7;
      color:#fff;   
      font-size:14px;
}

#footerimg{
    background-color: #0a6be7;
    width: 150px;
    height: 50px;
    margin-top: 10px;
    }

@media only screen and (max-width: 1200px) {
    #footerimg{
        
        margin-top: 0px;
    }
}    
    
    
#footertext{
    background-color: #0a6be7;
    color:#fff;  
    text-align: right; 
    margin-top: 30px; 
    
}

@media only screen and (max-width: 1200px) {
    #footertext{
       
        color: #fff;
        text-align: center;
        margin-left: 0px;
        margin-top: 0px;
    }
}

#subscribe{
    background-color: #0a6be7;
    float: right; 
    font-family: 'bellerose'; 
    font-size: 25px; 
    margin-top: 10px;
}

@media only screen and (max-width: 1200px) {
    #subscribe {
        text-align: center;
        margin-top: 0px;
    }
}

a, a:hover, a:active, a:visited, a:focus {
    text-decoration:none;
}

.fa{
  padding: 12px;
  font-size: 23px;
  width: 42px;
  text-align: center;
  text-decoration: none;
  margin: 5px 5px;
  border-radius: 50%;
}


.fa-facebook, .fa-facebook:visited{
  text-decoration: none;  
  background: #3B5998;
  color: white;
}

.fa-facebook:hover{
  text-decoration: none;
  background: white;
  color: #3B5998;
}


.fa-google, .fa-google:visited{
  text-decoration: none;  
  background: #dd4b39;
  color: white;
}

.fa-google:hover {
  text-decoration: none;
  background: white;
  color: #dd4b39;
}


.fa-linkedin, .fa-linkedin:visited {
    text-decoration: none;
  background: #007bb5;
  color: white;
}

.fa-linkedin:hover {
    text-decoration: none;
    background: white;
  color: #007bb5;
}


.fa-youtube, .fa-youtube:visited {
    text-decoration: none;
  background: #bb0000;
  color: white;
}

.fa-youtube:hover {
    text-decoration: none;
  background: white;
  color: #bb0000;
}