img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :focus { outline: none; } body { background: #68bca4; color: #333; font-family: 'Open Sans', Arial, Helvetica, sans-serif; padding: 0; margin: 0;min-width:320px } #container { background: #fff; padding: 40px 0 30px 0; } #content, .wrap { position: relative; display: block; max-width: 1000px; margin: 0 auto; } .wrap { padding: 0 10px } a { text-decoration: none; color: #68bca4 } img, iframe { border: none; } img{display:block;margin:0 auto;height:auto;max-width:100%} .imgLeft { float: left; margin: 0 20px 10px 0; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 0 0 10px 20px;max-width:55% } .clear { clear: both; margin: 0; padding: 0; height: 0; visibility: hidden; border: none; } header { background: #fff; border-bottom: 1px solid #ddd;padding:20px 10px } header .grid{grid-template-columns:200px 1fr;align-items:center} .logo { background: url(/images-design/logo-bg.png) no-repeat; padding: 0; margin: 0; } nav{text-align:right} nav a{display:block} nav ul, footer .col2 ul { padding: 0; margin: 0; } nav li, footer .col2 li { display: inline-block; } nav a { color: #333; padding: 5px; margin:5px } nav .signup, nav .login, .signup { width: 70px; display: inline-block; text-align: center; color: #fff; font-weight: bold; } .signup { background: #68bca4; } .bigbutton { padding: 0.5em; width: 100%; margin: 2em 0 2em 0;box-sizing:border-box } nav .login { background: #feb338; } h1, .pricing { font-family: 'Poller One', cursive; font-size: 2em; font-weight: normal; } .pricing { font-size: 3em; color: #68bca4; text-align: center; display: block; } #sectionOne { background: #edeadb; text-align: center;padding:30px 10px 20px } #sectionOne h1 { color: #f47822;margin:0 } #sectionOne strong { font-family: 'Poller One', cursive; font-size: 1.2em; font-weight: normal; color: #357b73;margin:5px 0;display:block } #sectionOne img { display: block; margin: 1em auto; position: relative;} #sectionOne p { font-size: .9em; color: #5e512e; position: relative; } #sectionTwo { text-align: center; margin: 40px auto; padding: 10px } #sectionTwo .grid{grid-template-columns:1fr 1fr 1fr 1fr} #sectionThree { font-family: 'Poller One', cursive;background: #edeadb; padding: 20px 10px } #sectionThree .grid{grid-template-columns:1fr 1fr;align-items:center} #sectionThree img{display:block;margin:1em 0 1em auto;order:2} #sectionThree h3 { font-size: 2em; font-weight: normal; color: #f47822; } #sectionThree p { font-size: 1.4em; line-height: 1.4em; color: #357b73;} #sectionThree h3, #sectionThree p{margin:2em 0} .halfCol, footer .col1, footer .col2 { display: inline-block; vertical-align: top; width: 49%; } form #submit:hover { cursor: pointer; } #contact { margin-top: 30px; } input { display:block;height: 25px; padding: 5px; margin-bottom: 15px;box-sizing:border-box;width:100% } textarea { font-family: sans-serif; font-size: .9em; width: 100%; height: 100px; padding:5px; margin-bottom: 15px;box-sizing:border-box } #submit { background: #ec5c37; font-size: 1.2em; font-weight: bold; color: #fff; width: 100%; height: 30px; border: none; } footer {color: #fff; } footer .wrap { padding: 20px 10px; position: relative; } .ccpaNotice{padding-bottom:40px !important} footer a { color: #fff; } footer a:hover { color: #ffce34; } footer .col2 { text-align: right; } footer .col2 li a { margin: 5px 0; } .mark img{margin:55px 0 10px auto} #social { margin-top: 40px; } #social a { display: inline-block; width: 30px; height: 30px; margin-right: 5px; } #social .email { background: url(/images-design/social.png) 0 0 no-repeat; } #social .facebook { background: url(/images-design/social.png) -40px 0 no-repeat; } #social .twitter { background: url(/images-design/social.png) -80px 0 no-repeat; } #social .linkedin { background: url(/images-design/social.png) -120px 0 no-repeat; } #social .gplus { background: url(/images-design/social.png) -160px 0 no-repeat; } #social .blog { background: url(/images-design/social.png) -200px 0 no-repeat; } body #chat-client .status button { background: #feb338; color: #fff; } footer .button span { padding: 0 10px 0 20px; } footer .button:hover { color: #fff; } input, textarea { border: 1px solid #ccc; } .mainMessage p { font-size: 20px; } .hide { display: none; } #the-code { font-family: monospace; border: 2px dashed #AAA; background: #CCC; font-size: 1.4em; } .error { color: #FF0000; } .faq { font-size: larger; margin: -3em 0 0 0; } .faq dt, .faq dd { margin: 0 0 0 30px; } .faq dd { margin-bottom: 1em; } .faq dt span, .faq dd span { margin: 0 0 0 -30px; display: inline-block; width: 30px; } .grid{display:grid;grid-gap:10px 20px} .grid.half{grid-template-columns:1fr 1fr} .contact.grid img{order:2} @media(max-width:999px){ #sectionTwo h2 span{display:block} #sectionThree h3 br{display:none} } @media(max-width:767px){ #sectionTwo .grid{grid-template-columns:1fr 1fr} #sectionThree .grid,.grid.half{grid-template-columns:1fr} #sectionThree img{margin:1em auto;order:unset} #sectionTwo h2 span { display: inline } .halfCol{display:block;width:auto} .contact.grid img { order: unset } #sectionThree p,#sectionThree h3{text-align:center} } @media(max-width:600px){ footer .col1,footer .col2{display:block;width:auto;text-align:center} footer a{margin:5px} .mark img{margin:1em auto} } @media(max-width:500px){ #sectionTwo .grid,header .grid { grid-template-columns: 1fr } nav ul{text-align:center} .logo{background-position:center} header .grid{text-align:center} }