/*
Theme Name: You and I
*/

html, body, div, ul, li, h1, h2, h3, p {margin:0; padding:0;}
body {font-family: 'Open Sans', sans-serif; font-size:15px; font-weight:400; color:#383838; text-align:center;}
div {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
img {border:0px;}
p {margin-bottom:10px;}
a {text-decoration:none;}
strong, b {font-weight:700;}
#top-bar-wrap {padding:5px 0; background:#9e0d21; text-align:right;}
#top-bar {margin:0 auto; max-width:1000px; overflow:hidden;}
#top-bar .col {float:left; width:50%;}
#top-bar .col1 {text-align:left;}
#top-bar .social a {display:inline-block; padding:10px 5px 0 5px;}
#top-bar .col2 {text-align:right;}
#top-bar .col2 a {display:inline-block; padding-left:35px; font-size:1.8em; color:#ffaf5f; background:url(/wp-content/uploads/2016/02/phone.png) no-repeat center left; background-size:25px;}
#top-bar .menu-m {display:none;}
.menu-m ul {display:none; width:80%; text-align:left; position:absolute; top:60px; left:0;}
.menu-m ul a {display:block; padding:15px 10px; background:#585858; color:#fff; border-top:1px solid #a8a8a8;}
.menu-m .sub-menu {display:none; position:relative; top:0; width:100%;}
.menu-m .sub-menu a {background:#383838; padding-left:25px;}
.menu-m #menu-btn {display:block; width:50px; height:50px; background:url(/wp-content/uploads/2016/02/m-menu-btn.png) no-repeat center; cursor:pointer;}
.top, .menu-header, .main1, .main2, .main3, .focus, .post, .footer-main {margin:0 auto; max-width:1000px;}
.top {padding-top:10px; /*background:url(/wp-content/uploads/2016/01/happy_couple_2.jpg) top right no-repeat;*/ text-align:left; position:relative; z-index:1; overflow:hidden;}
.top #logo {width:100%; max-width:425px;}
.top .slogan1 {margin-top:10px; padding-left:5px; max-width:320px; font-size:1.7em; font-weight:800; color:#C04800; text-transform:uppercase;}
.top .slogan1 span {color:#f89a49;}
.top .slogan2 {margin:10px 0 15px 0; font-size:2.5em; font-weight:300; color:#989898;}
.top .slogan2 span {padding-right:5px; font-weight:400; color:#888;}
.top .blog-btn {position:absolute; bottom:0; right:40%; z-index:2; width:120px; height:98px; background:url(/wp-content/uploads/2016/02/whats-new.png) no-repeat center; background-size:cover; overflow:hidden;}
.top .blog-btn a {display:block; padding:15px 0 25px 0; font-size:1.2em; font-weight:700; color:#fff; word-spacing:120px; text-align:center;}
.top img.slide {max-width:498px; max-height:500px; position:absolute; bottom:0; right:0; opacity:0; z-index:-1;}
.top img.slide1 {opacity:1.0;}
.top-mini {padding:10px 0 10px 10px; background:none;}
.top-mini #logo {max-width:325px;}
.top-mini .logo-wrap {float:left; width:50%;}
.top-mini .slogan {float:left; width:50%; padding-top:25px;}
#menu-wrap {background:#C04800;}
#menu-wrap .licence {display:none; padding:5px 0; color:#f8f8f8;}
.menu li {display:inline-block; width:19.6%; list-style:none; position:relative;}
/*.menu li a.active {background:#f89a49; color:#9e0d21;}*/
.menu li a {display:block; padding:15px 0; font-weight:700; color:#fff; text-align:center;}
.menu li a:hover {background:#f89a49; color:#9e0d21;}
.menu-item-13 a {background:#9e0d21;}
.menu-item-13 a:hover {background:#f89a49;}
.menu .sub-menu {display:none; position:absolute; width:100%; background:#C04800; -webkit-box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.5); box-shadow: 3px 5px 5px 0px rgba(0,0,0,0.5);}
.menu .sub-menu li {display:inline;}
.menu .sub-menu li a {display:block; padding:15px 0;}
.menu .sub-menu li a:hover {background:#f89a49;}
.menu .current-menu-item a {background:#f89a49; color:#9e0d21;}
.main1 {padding:30px 0 25px 0; overflow:hidden;}
.main1 h1 {margin-bottom:15px; font-size:1.9em; color:#585858; text-align:left;}
.main1 h2 {margin-bottom:15px; font-size:1.5em; color:#d87a29; text-align:left;}
.main1 .p-head {margin-top:20px; font-size:1.2em; font-weight:700; color:#d87a29;}
.main1 p {text-align:left;}
.main1 p a, .main1 li a {color:#C04800; text-decoration:none;}
.main1 p a:hover, .main1 li a:hover {text-decoration:underline;}
.main1 .a-btn {display:inline-block; margin:10px 0; padding:15px 25px; background:#C04800; font-size:1.2em; font-weight:700; color:#fff; letter-spacing:.80px; border-radius:5px;}
.main1 .a-btn:hover {background:#9e0d21; text-decoration:none;}
.main1 .row {margin-bottom:30px;}
.main1 ul {text-align:left;}
.main1 li {list-style-position:inside; padding:5px 1px;}
.main1 .form {margin:20px 0; width:50%;}
.main1 .level_2 {padding-left:20px;}
.focus-wrap {padding:25px 0 30px 0; background:#e8e8e8; text-align:left;}
.focus .p-head {font-size:1.3em; font-weight:700; color:#d87a29; text-align:center;}
.form li {list-style:none; padding:10px 0;}
.form label {display:block; margin:1px 2px; font-weight:700;}
.form li div, .form select {padding:5px; border:2px solid #a8a8a8;}
.form li div input, .form textarea {width:98%; border:0; font-size:1em;}
.form textarea {height:10em; resize:none;}
.form select {margin-bottom:20px;}
.form .short {max-width:250px;}
.form .short input {max-width:245px;}
.form .radio label, .form .check label {display:inline-block; padding:0 10px 20px 0; font-weight:400;}
.form .radio b, .form .check b {display:block; margin-bottom:10px;}
.form .btn {padding:15px 25px; background:#C04800; font-size:1.2em; font-weight:700; color:#fff; letter-spacing:.80px; border:0; border-radius:5px; -moz-appearance: none; -webkit-appearance: none; appearance: none;}
.form .btn:hover {background:#9e0d21;}
.form .err {padding-left:10px; color:#F00;}
.form .err2 {color:#F00;}
.form #url {display:none;}
.form .sent-icon {padding-left:20px; background:url(/wp-content/uploads/2016/02/check-icon.png) no-repeat center left;}
.form .loader {display:inline-block; width:32px; height:32px; background:url(/wp-content/uploads/2016/02/loader.gif) no-repeat center;}
.main2 {padding:35px 0 25px 0; overflow:hidden;}
.main2 .col {float:left; margin:1% 0 1% 2%; overflow:hidden;}
.main2 .col1 {margin-left:0; width:73%; text-align:left;}
.main2 .col1 .row {padding-bottom:10px; overflow:hidden;}
.main2 .col1 .row a {display:block; font-weight:700; color:#C04800;}
.main2 .col1 .row a:hover {text-decoration:underline;}
.main2 .col1 img {margin:0 10px 5px 0; width:35%; float:left;}
.main2 .col2 {width:25%; padding-bottom:15px; background:#ffaf5f; border-radius:5px;}
.main2 .col2 .col-head {margin:20px; font-size:1.3em; font-weight:700; color:#9e0d21; text-align:center;}
.main2 .col2 a {display:block; margin:30px 20px; padding:30px 20px; font-size:1.3em; color:#ffffff; background:#C04800; border-radius:5px;}
.main2 .col2 a:hover {background:#9e0d21;}
.main3-wrap {padding:25px 0; background:#585858; overflow:hidden;}
.main3 .col {float:left; margin:3% 0 1% 9.5%; width:27%; text-align:center;}
.main3 .col1 {margin-left:0;}
.main3 .col strong {display:block; margin:5px 0; font-size:1.5em; color:#ffaf5f;}
.main3 .col p {color:#f8f8f8; text-align:justify;}

.post {padding:30px 0 50px 0; text-align:left;}
.post h1 {margin-bottom:15px; font-size:1.9em; color:#585858; text-align:left;}
.post h2 {font-size:1.5em; color:#d87a29; text-align:left;}
.post h3 {font-size:1.3em; color:#585858;}
.post a {color:#d05810;}
.post h2 a {color:#d87a29;}
.post .entry-meta {margin-bottom:5px; font-size:.9em; color:#757575;}
.post .entry-content, .post .entry-summary {margin-bottom:5px;}
.post .entry-utility {margin-bottom:10px; font-size:.9em; color:#757575;}
.post #submit {padding:10px 20px; background:#C04800; font-size:1.1em; font-weight:700; color:#fff; letter-spacing:.80px; border:0; border-radius:5px;}
.post #submit:hover {background:#9e0d21;}
.post .form-label {margin-bottom:2px;}
.post .form-input, .post .form-textarea {margin-bottom:10px; padding:8px 5px; width:50%; border:2px solid #d8d8d8;}
.post .form-input input, .post textarea {border:0px; width:98%;}
.post #comments-list {margin-bottom:30px;}

.bottom {height:104px; background:#e8e8e8 url(/wp-content/uploads/2016/02/bottom_circles.png) repeat-x center bottom;}
#footer {padding:35px 0; background:#282828; font-size:.8em; color:#989898; overflow:hidden;}
#footer .col {float:left;}
#footer .col1 {width:65%; text-align:left;}
#footer .col2 {width:35%; text-align:right;}
#footer li {list-style:none; display:inline-block; padding:0 10px 20px 0;}
#footer li a {color:#d8d8d8;}
#footer li a:hover {text-decoration:underline;}
#footer .col2 a {color:#989898;}
#footer .social {margin-bottom:15px;}
#footer .social a {display:inline-block; margin-left:10px;}
#footer .social span {padding-right:20px;}

@media only screen and (max-width: 1000px) {
	.top, .menu-header, .main1, .main2, .main3, .post, .footer-main {max-width:98%;}
	.top-mini .slogan2 {font-size:2.4em;}
	.top .blog-btn {right:35%;}
}
@media only screen and (max-width: 875px) {
	/*.top {background-size:398px auto; background-position:bottom right;}*/
	.top img.slide {max-width:398px; top:auto; bottom:0;}
	.top-mini .slogan2 {font-size:2.2em;}
	.top .blog-btn {right:33%;}
}
@media only screen and (max-width: 768px) {
	/*.top {background-size:298px auto;}*/
	.top img.slide {max-width:298px;}
	.top-mini .slogan2 {font-size:2em;}
	.top .blog-btn {right:27%;}
}
@media only screen and (max-width: 640px) {
	#top-bar-wrap {position:fixed; width:100%; z-index:3;}
	#top-bar .col1 {width:25%;}
	#top-bar .col2 {width:75%;}
	#top-bar .col2 a {font-size:1.8em; margin-top:5px; padding-right:10px; background-size:24px;}
	.top {padding-top:70px; /*background-image:none;*/ text-align:center;}
	.top img {max-width:320px;}
	.top img.slide {display:none;}
	.top .slogan1 {margin:10px auto;}
	.top .slogan2 {font-size:1.9em;}
	.top-mini .logo-wrap, .top-mini .slogan {float:none; width:auto;}
	.top .blog-btn {display:none;}
	#top-bar .social {display:none;}
	#top-bar .menu-m {display:block;}
	.menu-header {display:none;}
	#menu-wrap .licence {display:block;}
	.main1 h1, .main1 h2, .post h1, .post h2, .post h3 {text-align:center;}
	.main1 p {text-align:justify;}
	.main1 .form {width:auto;}
	.post .form-input, .post .form-textarea {width:auto;}
	.main2 .col, .main3 .col, #footer .col {width:auto; margin:20px 10px; float:none;}
	.main2 .col1 {text-align:center;}
	.main2 .col1 .row {padding-bottom:20px;}
	.main2 .col1 .row p {text-align:justify;}
	.main2 .col1 img {float:none; width:100%; max-width:565px;}
	.main3 .col {padding-bottom:20px;}
	#footer .col1, #footer .col2 {text-align:center;}
}