header, nav, main, footer, aside { display: block; }
* { box-sizing: border-box;}


body {
    background-color: white;
    color: rgb(69, 69, 77);
    font-size: large;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

#linemargin {
    margin-left: 10%;
    margin-right: 10%;
}

#fade {background: rgba(250, 250, 250, 0.7);}

main {
    clear: both;
    padding-left: 10%;
    padding-right: 10%;
    display: block;
    /* font-family: 'Hind', sans-serif; */
    /* font-family: 'Kumbh Sans', sans-serif; */
    font-family: 'Montserrat', sans-serif;
    /* font-family: 'Noto Sans', sans-serif; */
    /* font-family: 'Open Sans', sans-serif; */
    /* font-family: 'Noto Sans', sans-serif; */
    /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: 'Poppins', sans-serif; */
    /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
    font-weight: 500;
    line-height: 1.5em;
    font-size: 16px;
}       


main li {margin-bottom: 10px;}

#space {padding: 250px;}

h1 {
    text-align: center;
    /* color: rgb(223, 193, 209); */
    color: rgb(67, 39, 98);
}

h2, h3 {color: rgb(67, 39, 98);}

.leftimg {
    margin-left: 20%;
    margin-right: 20%;
    width: 60%;
    /* display: block; */
}

#clearfloat {
    clear: both;
}

.leftimgfloat {
    float: right;
    margin-left: 50px;
    margin-bottom: 20px;
    /* max-height: 375px; */
    width: 50%;

}



.floatright {
    float: right;
    margin-left: 30px;
    margin-bottom: 30px;

}



#butterfly { 
    /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
    font-family: 'Times New Roman', Times, serif;
    clear: both;
    background-image: url(butterfly.jpg);
	height: 450px;
    background-size: 100% 100%;
    margin-left: 10%;
    margin-right: 10%;
    width: auto;
    background-repeat: no-repeat;
    /* text-align: center; */
    padding-left: 2%;
    padding-right: 2%;
    font-size: 22px;
    font-size: 2.5vw;
    padding-top: 330px;
    color: white;
    line-height: 1.75em;
 }






#kidstext {
    text-align: center;
    color: rgb(67, 39, 98);
    font-family: 'Courier New', Courier, monospace;
}



/* #primrose { 
    padding-top: 50px;
    clear: both;
    background-color: white;
    background-image: url(primrose.png);
    background-position: center;
    background-repeat: no-repeat;

    color: black;
    min-height: 225px;

    font-family: Verdana, Arial, sans-serif;
 } */



/* .firstword {
    color: rgb(67, 39, 98);
    font-weight: bold;
} */

nav { 
    background : none;
    float:right;
    text-align:right;
    width:40%;
    margin-right: 8%;
  }

nav a { 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 16px; 
    text-decoration: none; 
    color: rgb(67, 39, 98);
}

nav ul { list-style-type: none;
    list-style-image: none;}

nav ul{
    padding-top: 83px;
    display: flex;
    justify-content: space-around;
    }

nav a:visited { 
    color: rgb(67, 39, 98); 
}
nav a:hover { color: rgb(223, 193, 209); }
nav a:active { color: rgb(223, 193, 209);}	

#logo {
float:left;
margin-left: 8%;
text-align:left;
width:30%;}

ul {
    /* list-style-image: url(primrosePsych_icon_fin_small.png); */
    list-style: circle;
}


footer { 
    /* background-color: rgb(223, 193, 209); */
    background-color: rgb(67, 39, 98);
    font-size: 1em;
    text-align: center;
    color: white;
    padding-top: 25px;
    padding-bottom: 25px;
    clear: both;
    }

footer a {
    text-decoration: none;
    color: white;
}



/* label { 
    float: left;
    display: block;
    display: inline-block;
    width: 8em;  
    padding-right: 1em;}


input, textarea { 
    margin-bottom: 1em; 
    display: block;
 }  */

/* #mySubmit { 
    display: inline; } */


/* .ourContact {
    float: right;
    font-weight: 500;
    line-height: 1em;
    font-size: 18px;
} */

main a {
    text-decoration: none;
    color: rgb(69, 69, 77);;
}


.map {
    clear: both;
    float: right;
}


.contact-form {
    max-width: 500px;
    padding: 60px;
    border-radius: 5px;
    display: flex;
}

    .input-fields {
        display: flex;
        flex-direction: column;
        margin-right: 4%;
        width: 100%;
    }
    
    /* .input-fields,
    .msg{
        width: 48%;
    } */
    
    .input-fields .input,
     .msg textarea {
        margin: 10px 0;
        background: transparent;
        border: 0;
        border: 1px solid rgb(69, 69, 77);
        /* border-bottom: 2px solid rgb(69, 69, 77); */
        padding: 10px;
        color: black;
        width: 100%;
    
    }
    
    .btn {
        background: rgb(69, 69, 77);
        /* background: rgb(69, 69, 77); */
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        width: 100%;
        color: #ffffff;
        cursor: pointer;
        text-transform: uppercase;
    }
    
    /* ::-webkit-input-placeholder {
        color: rgb(223, 193, 209);
    }
    
    ::-moz-input-placeholder {
        color: rgb(223, 193, 209);
    }
    
    ::-ms-input-placeholder {
        color: rgb(223, 193, 209);
    } */
    

    

    @media only screen and (max-width: 1150px) {
        #smalllogo{
            height: 274px;
            width: 567px;
            background-image: url('primrosePsych_logo_fin.png');
            margin: auto;
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat; 
        }

        #bigfont {
            font-size: 20px;
            line-height: 1.5em;
            /* padding-right: 55%; */
            /* width: 48%; */
            
        }
        .leftimgfloat {
            float: right;
            margin-left: 50px;
            margin-bottom: 5px;
            /* max-height: 375px; */
            width: 40%;
        
        }




        #logo {
            display: none;
        }
        nav { 
            margin-right: 10%;
            margin-left: 10%;
            float: none; 
            width: 80%; 
            padding-top: 1em;
            padding-bottom: 1em;
            padding-left: 1em;
            padding-right: 1em;}
        nav ul {
            margin: 0;
            padding: 0;	}
        nav li { display: inline-block;}
        .leftimg {float: left;
            margin-left: 10%;}
        #pinkbanner{
            background-color: pink;
            height: 342px;
            width: 100%;
            text-align: right;}
    
        #butterfly { 
            clear: both;
            background-image: url(butterfly.jpg);
            height: 300px;
            background-size: 100% 100%;
            margin-left: 10%;
            margin-right: 10%;
            width: auto;
            background-repeat: no-repeat;
            text-align: center;
            padding-left: 2%;
            padding-right: 2%;
            font-size: 32px;
            font-size: 2.5vw;
            padding-top: 230px;
            color: white;
            line-height: 1.75em;
            }
    
        .map {display: none;}
    
        .contact-form {
            /* border: 2px solid rgb(69, 69, 77); */
            max-width: 500px;
            /* max-height: 625px; */
            margin: 0 auto;
            /* background: rgba(223, 193, 209, 0.2); */
            /* background: rgb(93, 166, 227); */
            padding: 60px;
            border-radius: 5px;
            display: flex;
            /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.13); */
        }
        
        /* nav a { padding-right: 2em; } */
    }
    
    
    
    @media only all and (max-width: 768px) {
        #smalllogo{
            margin-left: 0;
            height: 274px;
            width: auto;
            max-width: 567px;
            background-image: url('primrosePsych_logo_fin.png');
            background-size: 100% 100%;
            margin: auto;
            background-repeat: no-repeat; 
        }

        #bigfont {
            font-size: 20px;
            line-height: 1.5em;
            /* padding-right: 55%; */
            width: 100%;
            text-align: center;
            
        }

        .leftimgfloat {
            display: none;
        
        }

        #pinkbanner{
            background-color: pink;
            height: 400px;
            width: 100%;
            text-align: right;}
    
    
        /* .leftimg {float: left;
            margin-left: 0%;} */
        #logo {
            display: none;
        }
        nav{padding: 0;}
        nav a { 
            display: block; 
            padding: 0.2em;
            font-size: 1.1em;
            border-bottom: 1px #330000 }
        nav ul {
            margin: 0;
            padding: 0;	
            display: block;
            text-align: center;}
        nav li {
            display: block;
            margin: 0;
            padding: 0;	}
            
        #butterfly { 
            clear: both;
            background-image: url(butterfly.jpg);
            height: 200px;
            background-size: 100% 100%;
            margin-left: 10%;
            margin-right: 10%;
            width: auto;
            background-repeat: no-repeat;
            text-align: center;
            padding-left: 11%;
            padding-right: 11%;
            font-size: 32px;
            font-size: 3vw;
            padding-top: 120px;
            color: white;
            line-height: 1.25em;
            }
    
        .map {display: none;}
    
        .contact-form {
            /* border: 2px solid rgb(69, 69, 77); */
            max-width: 500px;
            /* max-height: 625px; */
            margin: 0 auto;
            /* background: rgba(223, 193, 209, 0.2); */
            /* background: rgb(93, 166, 227); */
            padding: 60px;
            border-radius: 5px;
            display: flex;
            /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.13); */
        }
    }