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

html {margin: 0;
	padding:0;
	background-color:#D41F4A;
	
	}
body{
	margin: 0;
	padding:0;
	background:url(images/collage.jpg);
	background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;}
	
	
	.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;}
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;
}

#about {
	padding: 2%;
margin-top:459px;
overflow: auto;
background-color: rgba(255,255,255,1);
background-image: url(images/flower_about.png);
background-position: right;
background-repeat: no-repeat;
background-size: contain;}
#about h1 {font-family: Blackjack; font-size: 4.5em; color:#FCB42F; margin: 10px;}
#about p{font-family: MyriadHeadline; font-size:1.6em; color:#D11D48; width: 70%; line-height: 36px;}
#about ul {margin: 0; padding: 0;}
#about ul li {list-style-type: none; max-width: 200px; float: left; padding:4px; border: 1px solid #D11D48; margin: 1.5%;}
#about li img {width: 100%;}
#challenge {background-color:rgba(255,222,116,.85); padding: 4% 2%;}
#challenge h1 {float: left; font-family: Blackjack;  font-size: 2.5em; color:#FFF;}
#challenge p {font-family: Myriad; color:#D21F48; font-size: 1.5em; line-height: 1.3em; width: 90%;}
#challenge p span {font-family: Blackjack;  font-size: 1.2em;}
#services {background-color: #FFF; padding: 2%; overflow: auto;}
#services h1 {font-family: Blackjack; color: #D21F48; font-size: 4em; margin: 0;}
#servwrap {width:60%; margin: 0 auto;}

button.accordion {
    border: 1px solid #F8B436;
	background-color: rgba(255,255,255,1);
	border-radius: 8px;
    cursor: pointer;
    padding: 5px;
    width: 100%;
	margin: 1.5%;
    text-align: left;
    outline: none;
    transition: 0.4s;
}
button.accordion h2 {float: left;}
.icon {width:50px; display:block; float: left; margin: 0; padding: 0;}

button.accordion.active, button.accordion:hover {
    background-color: #FEDF74;
}

button.accordion:after {
    content: '+';
    font-size: 2em;
    color: #D21F47;
    float: right;
    margin: 8px;
}

button.accordion.active:after {
    content: "-";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}
.panel ul {list-style-type:none; width: 100%; margin:1%; padding: 0;}
.panel ul li {width: 46%; float: left; font-family: Myriad; color:#333; padding: 1.5%; font-size: 1.1em;}


#services h2 {font-family: Blackjack; color:#D21F47; padding:0; margin:8px 0 0 20px; font-size: 2.2em; }

#promo {
	padding: 2%;
}

#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;}

video {
    max-width: 100%;
    height: auto;
}
#promos #wrap ul {width: 100%; margin: 0; padding: 0; list-style-type: none;}
#promos #wrap ul li {width: 45%; padding: 2.25%; float: left; }

#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;}
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;}

 @media only screen and (max-width : 768px) {
	
	
	
	 #about h1 {font-size: 3.5em;}
	 #about p{font-size:1.4em; color:#D11D48; width: 90%; line-height: 30px; margin: 0 auto;}
	 #about ul {margin: 0 auto; padding: 0; max-width: 450px;}
	 #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;}
         #promos #wrap ul li {width: 460px; padding: 2%; float: none; margin:0 auto;}
	 
 }

 @media only screen and (max-width : 480px) {
	 #about {
margin-top:102%;
overflow: auto;}
	  body{
	margin: 0;
	padding:0;
	background:url(images/collage_mobile.jpg);
	background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
	background-size:contain;
	}
	 #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; max-width: 480px;}
	 #about ul li {width: 40%; height: auto;}
	 #about h1 {font-size: 2.3em;}
	 #about p {font-size: 1.3em;}
	 #challenge p {font-size: 1.3em;}
	 #contact h1 {font-size: 2em;}
#promos #wrap ul li {width: 96%; padding: 2%; float: none; margin:0 auto;}
 }
  @media only screen and (max-width : 350px) {
	  header p {margin-top: 60px; font-size: .7em; color: #D21D48;}
  }