@import url('https://fonts.googleapis.com/css?family=Open+Sans:400');
@import url('https://fonts.googleapis.com/css?family=Raleway:300');

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&family=Roboto&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    background: #FFF;
    text-align: center;
    color: #FFF;
}
.wrapper {
    /* off-white: */
    /* background-color: #f5f5f5; */
    background-color: white;
}
#header {
    background-color: white;
}
/* .logo {
    padding: 2%;
} */
img {
    max-width: 100%;
}
h1.dark, h2.dark {
    color: #1F3457;
}
h1 {
    /* font: 300 1em/1 'Crimson Serif', serif; */
	 font: 300 1em/1, serif; 
	 font-family:Playfair; 
    color: #FFF;
    /* padding: 2%; */
}
h2 {
    font: 100 1em/1 'Roboto', sans-serif;
    color: #97a1af;
    padding: 2%;
}
h3 {
    font: 300 1.2em/1 'Roboto', sans-serif;
    color: #FFF;
    padding: 2%;
}
p {
    padding: 2%;
}
a {
    color: #FFF;
    text-decoration: none;
}
a:hover {
    color: #97a1af;
}


.btn {
    color: #1F3457;
    background-color: #8cc738;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    padding: 20px 40px;
    margin: 15px 0px;
    border: none;
    /* outline: none; */
}
.btn:hover {
    background-color: #83a95c;
}
.form-control {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    padding: 18px 40px;
}
.email {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    width:300px; 
    height: 56px; 
    padding: 10px 15px;

}
.phone {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    width:70px; 
    height: 56px; 
    padding: 10px 15px;
}
.name {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    width:150px; 
    height: 56px; 
    padding: 10px 15px;
}

.message {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    resize: none; 
    width: 310px; 
    height: 100px;
    padding: 10px 15px;
}

/*--- Media Queries (shrink stuff when the browser is smaller ---*/
@media all and (max-width: 900ox){
    h2 {
        font-size: 1.5em;
    }
}
@media all and (min-width: 768px){
    .row {
        display: flex;
        margin: 0;
    }
    /* allow the last column to push right up to the side of the screen */
    [class*="col-"]:last-child {
        margin: 0;
    }
    .col-1 {flex: 1;}
    .col-2 {flex: 2;}
    .col-3 {flex: 3;}
    .col-4 {flex: 4;}
    .col-5 {flex: 5;}
    .col-6 {flex: 6;}
    .col-7 {flex: 7;}
    .col-8 {flex: 8;}
    .col-9 {flex: 9;}
    .col-10 {flex: 10;}
    .col-11 {flex: 11;}
    .col-12 {flex: 12;}
}