html,
body {width: 100%;
      overflow-x: hidden; 
      }

img {width: 100%;
     }

/****************** NAVIGATION BAR  **********************/

#header nav {padding-bottom: 15px;
             padding-top: 15px;
             }

#header a {color: white;
           font-family: 'Ubuntu', sans-serif;
           }

#header .navbar {background: #0070c0;
                 }

#header ul {text-align: center;
            }

.navbar-brand {font-weight: 100;
               }

/****************** LANDING PAGE  **********************/

#intro {background-color: white;
        }

.title {padding: 100px 3% 0% 3%;
        margin: 0;
        text-align: center;
        text-transform: uppercase;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        margin: 0;
        font-size: 3em;
        color: #0070c0;
        }

.title2 {padding: 50px 3% 0% 3%;
        margin: 0;
        text-align: center;
        text-transform: uppercase;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        margin: 0;
        font-size: 3em;
        color: #0070c0;
        }

#logo {background-image: url('images/banner.jpg');
       background-size: cover;
       background-position: center center;
       background-repeat: no-repeat;
       height: 100vh;
       width: 100vw;
       padding-top: 130px;
       }

/****************** GREEN TEXT BOXES  **********************/

#about p {color: whitesmoke;
          background-color: #086413;
          padding: 10%;
          margin: 0;
          font-family: 'Ubuntu', sans-serif;
          background: rgb(19,175,37);
          background: radial-gradient(circle, rgba(19,175,37,1) 0%, rgba(8,100,19,1) 98%);
          font-size: 1.4em;
          line-height: 1.8em;
          }

/****************** AWARD  **********************/

#award {background-color: #0070c0;
        font-family: 'Ubuntu', sans-serif;
        }

.meat {padding: 10vw;
       }

.side {padding: 5%;}



/****************** COVERAGE TYPES  **********************/

#coverages {background-color: white;
            }

#boardbox {margin: 5%;
           }

#boardbox img {padding: 1%;
               transition: .8s;
               }

#board1 a, 
#board2 a, 
#board3 a,
#board4 a,
#board5 a,
#board6 a {outline: none;}

#boardbox img:hover {opacity: 0.7;
                     }
#board1 {padding: 0;}
#board2 {padding: 0;}
#board3 {padding: 0;}
#board4 {padding: 0;}
#board5 {padding: 0;}
#board6 {padding: 0;}

/****************** CARRIER LINKS  **********************/

#carriers {background-color: #cce9ff;
            }

.nav_box {padding: 5% 10%;
          }

.quicklinks {display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox;      /* TWEENER - IE 10 */
            display: -webkit-flex;     /* NEW - Chrome */
            display:flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            }

.link {display: block;
       text-align: center;
       margin: 0.5%; 
       padding: 1%;
       border: solid thin;
       border-color: #0070c0;
       max-width:134px;
       font-family: 'Ubuntu', sans-serif;
       }

.link p {padding-bottom: 5px;
         font-family: 'lato', sans-serif;
         color: white; 
        }

p.site {color: #0070c0;
       margin: 0;
       padding: 0; 
       font-size: 1.1em;
       }

p.call {color: #007055; 
       margin: 0; 
       padding: 0; 
       font-size: 1em;
       }

/****************** AGENTS SECTION  **********************/

#agent {margin: 0% 5%;
        }

.bio {font-family: 'Ubuntu', sans-serif;
      }

.name {font-weight: bold;
       font-size: 1.3em;
       padding-top: 3%;
       font-family: 'Ubuntu', sans-serif;
       }

.thumbnail {margin: 5%;
                }

/****************** CONTACT  **********************/

#footer {padding: 15% 5% 5% 5%;
         background-color: #0070c0;
         }

#footer h2 {padding-top: 5%;
            }

iframe {width: 100%;
         }

i {color: white;
   }

#footer a {color: #333; 
           }

/****************** COVERAGE PAGES  **********************/

.portfolio-modal .modal-content {padding: 100px 0;
                                 min-height: 100%;
                                 border: 0;
                                 border-radius: 0;
                                 text-align: center;
                                 background-clip: border-box;
                                 box-shadow: none;
                                 }

.modal-body p {text-align: left;
               font-family: 'Ubuntu', sans-serif;
               font-size: 1em;
               color: black;
               padding: 1% 2%;
               line-height: 1.8em;
               }

.portfolio-modal .modal-content img {margin-bottom: 2%;
                                    }

.portfolio-modal .modal-content .item-details {margin: 30px 0;
                                                }

.portfolio-modal .close-modal {position: absolute;
                                top: 25px;
                                right: 25px;
                                width: 75px;
                                height: 75px;
                                background-color: transparent;
                                cursor: pointer;
                                }

.portfolio-modal .close-modal:hover {opacity: .3;
                                    }

.portfolio-modal .close-modal .lr {z-index: 1051;
                                    width: 1px;
                                    height: 75px;
                                    margin-left: 35px;
                                    background-color: black;
                                    -webkit-transform: rotate(45deg);
                                    -ms-transform: rotate(45deg);
                                    transform: rotate(45deg);
                                    }

.portfolio-modal .close-modal .lr .rl {z-index: 1052;
                                        width: 1px;
                                        height: 75px;
                                        background-color: black;
                                        -webkit-transform: rotate(90deg);
                                        -ms-transform: rotate(90deg);
                                        transform: rotate(90deg);
                                        }

.portfolio-modal .modal-backdrop {display: none;
                                  opacity: 0;    
                                  }

button {margin-top: 5%;
        display:inline-block;
        text-align: center;
        }


.headline {font-family: 'Ubuntu', sans-serif;
           color: #0070c0;
           margin-top: 0;
           font-size: 8vw;
           }

.quote_link {font-weight: 500;
             font-size: 3.5vw;
             color: #0070c0;
             padding-top: 2%;
             font-family: 'Ubuntu', sans-serif;
             }

.modal-icon {color: black;
             }


/****************** BREAKPOINTS  **********************/

@media (max-width: 480px) {#contactbox {display: block;
                                        text-align: center;}
                           }
@media (max-width: 480px) {.thumbnail {margin: 0;}
                           }

@media (min-width: 768px) {#about {font-size: 1.3em;}
                           }
@media (max-width: 768px) {.nav_box {padding: 10% 2%;}
                           }
@media (min-width: 768px) {.modal-body p {font-size: 1.3em;}
                           }
@media (max-width: 768px) {#agent {margin: 0;}
                           }
@media (min-width: 768px) {.meat {padding: 10vw;
                                  display: flex;
                                  justify-content: center;
                                  align-items: center;
                                  }
    .side {padding: 0;}
                           }

@media only screen and (min-width : 992px) {#about {font-size: 1.4em;}
                                            }
@media only screen and (min-width : 992px) {.modal-body p {font-size: 1.6em;}
                                            }

@media only screen and (min-width : 992px) {#textButton {display: none;}
                                            }
@media only screen and (min-width : 993px) {#logo {background-attachment: fixed;}
                                            }

@media only screen and (min-width : 1200px) {.quote_link{font-size: 2.1vw;}
                                             }
@media only screen and (min-width : 1200px) {.headline {font-size: 80px;}
                                             }