@charset "UTF-8";
/* CSS Document */

html {margin: 0;
	padding:0;
	background-color:#D41F4A;
	
	}
body{
	margin: 0;
	padding:0;
	background-color: #FFF;
background-image: url(images/flower_about.png);
background-position: right;
background-repeat: no-repeat;
background-size: contain;}
}
	
	.menu-btn {display: none;}
@font-face {
    font-family: Blackjack;
    src: url(fonts/blackjack/blackjack-webfont.ttf), url(fonts/blackjack/blackjack-webfont.woff), url(fonts/blackjack/blackjack-webfont.svg);
}	
@font-face {
	font-family: MyriadHeadline;
src: url(fonts/myriad/Myriad-Web-Pro-Bold_31660.ttf);	
}
@font-face {
	font-family: Myriad;
src: url(fonts/myriad/Myriad-Web-Pro_31664.ttf);
}
	
#logo {background: #FFF; border-radius:8px; padding: 5px; border: 1px solid #D11D48;}
#wrap {max-width: 1024px; margin: 0 auto;}
header {background: rgba(255,255,255,1); height: 80px; margin: 0;border-bottom: 1px solid #D11D48; }
header #logo {float: left; margin: 10px;}
header #logo img {width: 120px;}
header p {margin-top: 55px; float: left; font-family: MyriadHeadline; font-size: 1.1em; color: #D21D48;}
nav {float: right;}
nav ul {list-style-type: none; margin: 30px;}
nav ul li {float: left; padding: 10px; font-family: Blackjack; }
nav ul li a {font-family: Blackjack; color:#D11D48; text-decoration:none; font-size: 1.3em;}
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  z-index: -1;
}
.menu-btn {display: none;}

#about {
width: 100%;
padding: 2%;
margin:0 auto;
overflow: auto;
}
#about h1 {font-family: Blackjack; font-size: 4.5em; color:#FCB42F; margin: 10px;}
#about h2{font-family: MyriadHeadline; font-size:1.2em; color:#D11D48; padding: 5px; margin:5px;}
#about ul {margin: 0 auto; padding: 0; max-width: 800px;}
#about ul li {list-style-type: none; width: 28%; height: auto; float: left; border: 1px solid #D11D48; margin: 2%; background-color: #FFF; border-radius: 5px;}
#about li img {width: 100%;}
#about h3{margin: 0; font-size: 12px; font-family: Myriad; text-align: right; background-color:#D41F4A; padding: 1%; color: #FFF;}
#about p {font-family: Myriad; margin: 8px; color: f1f1f1;}
#about a {text-decoration: none; color:#202020;}







#services h2 {font-family: Blackjack; color:#D21F47; padding:0; margin:8px 0 0 20px; font-size: 2.2em; }
#contact {
	padding: 2%;
overflow: auto;
background-color: rgba(210,32,74,1);
background-image: url(images/background_contact.png);
background-position: right;
background-repeat: no-repeat;
background-size: contain;}

#contact h1 {font-family: MyriadHeadline; font-size: 3em; color: #FFF; margin:2% 0; padding: 0; line-height:.7em;}
#contact span { color:#FBB32D; font-family: Myriad; font-size: .5em; padding: 0;}

form input {border: 1px solid #FFF; background-color: #D2204A; border-radius:8px; width: 35%; padding: 12px; margin:.8%;}
form textarea {background-color: #D2204A; border: 1px solid #FFF; border-radius:8px; padding: 12px; margin:.8%;}
#submit {width: 120px; padding: 5px; font-family: Blackjack; font-size: 1.5em; color:#FFF; border: 1px solid #FFF;}
#submit:hover {background-color:#FAB12C;  color:#D2204A; border: none;}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #FFF;
	font-family: Myriad;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #FFF;
   opacity:  1;
   font-family: Myriad;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #FFF;
   opacity:  1;
   font-family: Myriad;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #FFF;
   font-family: Myriad;
}
input, select, textarea{
    color: #fff;
	font-family: Myriad;
	font-size: 1em;
}

textarea:focus, input:focus {
    color: #FFF;
	font-family: Myriad;
	font-size: 1em;
}
footer {background: #FFF; padding: 0; overflow: auto; margin: 0; border-top: 1px solid #D11D48;}
footer ul {list-style-type: none; float: right; margin: 0; padding-right: 4%;}
footer ul li {font-family: Myriad; font-size: 1.2em; margin:10px 0; color:#333; text-align: right;}
footer h2 {font-family: Blackjack; font-size: 2em; color:#D2204A; margin: 0;}
footer p {width: 100%; color: #333; text-align: center; clear: both; background-color:#FAAE33; margin:0; padding:3px 0; font-family: Myriad;}
footer a {text-decoration: none; color:#FBB32D;}
#vid{width:100%;}

video {  
   width:100%; 
   max-width:300px; 
   height:auto; 
}


 @media only screen and (max-width : 768px) {
	
	
	

	 #about ul {margin: 0 auto; padding: 0; width: 100%;}
         #about ul li {width: 40%; margin: 4%;}
	 #chall_mobile {width: 250px;}
	 #challenge h1 {margin: 0;}
	 #challenge p {margin: 0 auto;}
	 #servwrap {width:90%;}
	  #services h1 {font-size: 3em;}
	 #services h2 { padding:0; margin:0; padding-left: 5px; font-size: 2em;}
	 .icon {width:32px; display:block; float: left; margin: 0; padding: 0;}
	 
 }

 @media only screen and (max-width : 560px) {
	 #about {
margin-top:2%;
overflow: auto;}
	  body{
	margin: 0;
	padding:0;
	}
	 #services h2 {font-size: 1.7em;}
	 #contact h1 {font-size: 2.2em; color: #FFF; margin:2% 0; padding: 0; line-height:.7em;}
	 #about ul {margin: 0 auto; padding: 0; width: 90%;}
	 #about ul li {width: 100%; height: auto; margin-top:20px;}
	 #about p{ margin-top: 10px;}
	 #challenge p {font-size: 1.3em;}
	 #contact h1 {font-size: 2em;}
video{width: 100%;}

 }
  @media only screen and (max-width : 350px) {
	  header p {margin-top: 60px; font-size: .7em; color: #D21D48;}
  }