* {

padding: 0px;
margin: 0px;
box-sizing: border-box;

}


@font-face {

font-family: sf-display-bold;
src:url(../fonts/SF-Pro-Display-Bold.otf);/*need this syntax if .css is in a css folder*/

}

@font-face {

font-family: sf-display-regular;
src:url(../fonts/SF-Pro-Display-Regular.otf);/*need this syntax if .css is in a css folder*/

}

@font-face {

font-family: sf-display-medium;
src:url(../fonts/SF-Pro-Display-Medium.otf);/*need this syntax if .css is in a css folder*/

}


form {

background-color: #2276d3;
width: 320px;
height: auto;
padding: 30px;
box-sizing: border-box;
position: relative;
border: 1px solid white;
border-radius: 20px;

}



form h1 {

margin-bottom: 10px;
font-family: "sf-display-bold";
color: #ffffff;
text-align: center;
margin-top: 15px;
font-size: 40px;

}



form p {


text-align: center;
margin-bottom: 30px;
font-family: "sf-display-medium";
font-size: 14px;
color:#ffffff;


}


input {

margin:0px 0px 20px 0px;
text-decoration: none;
color: white;

}


input[type='text']{

padding: 20px;
padding-top:23px;
width: 100%;
font-size: 15px;
background-color: none;
color: white;

}


::placeholder{

color: white;

}

/*submit button settings*/

input[type='submit']{

margin:0px;
margin-top: 25px;
border-radius:50px;
padding: 20px;
padding-top: 23px;
border: 1px solid #a8a8a8;
color:#a8a8a8;
width:100%;
height: auto;
font-size: 15px;
text-align: center;
letter-spacing: .5px;
background-color: rgb(240,240,240);
-webkit-transition: all .5s; /* For Safari 3.1 to 6.0 */
transition: all .2s;
font-family: "sf-display-regular";


}


input[type='submit']:hover {

cursor: pointer;
background-color: #5CAF48;
color: white;
border:1px solid #5CAF48;

	
}

textarea {

resize: none;
width: 100%;
font-size:15px;
padding:15px;
color: white;

}

input[type='text'], textarea{


border: 1px solid white;
background-color: #2276d3;
border-radius: 10px;
font-family: "sf-display-medium";


}

input[type=text]:focus, textarea:focus {

border: 1px solid white;
outline:none;


}


.contact-modal {

height:100%;
width: 100%;
background-color: #2276d3;
z-index:110;
position: fixed;
top:0px;
display: none;
align-content: center;
justify-content: center;
align-items: center;
opacity: 0.98;


}


#formContainer {
	
background-color: none;
height: auto;
-webkit-transition: all .5s; /* For Safari 3.1 to 6.0 */
transition: all .5s;
overflow: hidden;
z-index: 100;
position: relative;
border-radius: 5px;

}

#successMsg {

background-color: #5CAF48;
padding: 30px;
width: 100%;
height: 100%;
text-align: center;
color: white;
position: absolute;
font-family: "sf-display-bold";
border-radius: 5px;
z-index: 10;
display: flex;
align-content: center;
justify-content: center;
align-items: center;


}


#tyTextBox {

background-color: none;

}



/*inside success message*/

#okay-button {

background-color: none;
border: 1px solid white;
padding: 10px;
transition: .2s;
margin-top: 20px;
border-radius: 20px;
transition: all .5s ease;
font-size:12px;
margin-left: 10px;
margin-right: 10px

}



#okay-button:hover {

cursor: pointer;
color: rgb(123,123,123);
background-color: white;

}


#tyTextBox h1 {
 
color:white;
margin-bottom:10px;

}



/*close (x) button settings*/

form .close {


border: none;
padding: 10px 15px;
color: white;
position: absolute;
top: 10px;
right: 10px;
font-family: "sf-display-bold";
font-size: 14px;
transition: .2s ease;
text-transform: uppercase;
letter-spacing: .5px;
background-color: #2276d3;
border-radius: 10px;


}




form .close:hover {
	
cursor: pointer;
color:white;
background-color: #2A4A7A;

}