.ClearFix:before, .ClearFix:after { content:" "; display:table; }
.ClearFix:after { clear:both; }
.ClearFix { *zoom:1; }

html, body { min-width: 320px; }
*,html,body,form { margin:0; padding:0; font-family:'Josefin Sans',sans-serif; }
ul { list-style:none; font-size:0; }
#Wrapper { background:url(/img/Background.png) repeat-x; min-height:1500px; }
#HeaderWrapper { background:url(/img/Header.png) no-repeat; min-height:681px; }
#Header { min-height:681px; background-size:917px 681px; background-position:75% 0; background-repeat:no-repeat; transition:background-image 1s ease; }
#Header.One { background-image:url(/img/Beam1.png); }
#Header.Two { background-image:url(/img/Beam2.png); }
#HeaderInner { max-width:1020px; min-height:681px; margin:0 auto; padding:0 10px; }
#Logo { float:left; width:131px; height:175px; margin:10px 0 0 20px; background:url(/img/Logo.png) no-repeat; background-size:131px 175px; }
#Navigation { float:right; margin-top:55px; }
#Navigation li { display:inline-block; margin-left:55px; }
#Navigation li:first-child { margin:0; }
#Navigation li a { font-size:14px; font-weight:bold; text-transform:uppercase; text-decoration:none; color:#fff; }
#Navigation li a:hover { color: #11a89f; }
#HeaderContent { padding-top:280px; }

.Slogan { color:#fff; text-transform:uppercase; font-weight:bold; }
.Slogan span { display:block; }
.Slogan span.Top { font-size:25px; text-shadow:2px 2px 1px #000; }
.Slogan span.Bottom { font-size:53px; line-height:54px; text-shadow:3px 3px 3px #000; }

.Divider1 { max-width:450px; margin:30px 0; height:10px; background-size:318px 10px; background:url(/img/Divider1.png) center center no-repeat; }
.Divider2 { max-width:450px; margin:30px 0; height:12px; background-size:118px 12px; background:url(/img/Divider2.png) center center no-repeat; }
.Divider3 { height:11px; margin:30px 0 60px 0; background-size:118px 11px; background:url(/img/Divider3.png) center center no-repeat;  }

.TextBig { font-size:15px; line-height:23px; color:#fff; text-transform:uppercase; font-weight:bold; max-width:464px; }
.TextSmall { font-size:15px; line-height:20px; color:#fff; max-width:460px; }

.ScrollDown { text-align:center; height:29px; padding:30px 0; margin-bottom: -50px; }
.ScrollDown a { display:inline-block; width:61px; height:29px; background-size:61px 29px; background-repeat:no-repeat; background-position:center center; font-size:0; }
.ScrollDownLight a { background-image:url(/img/ScrollDownLight.png); }
.ScrollDownDark { background-color:#fff; }
.ScrollDownDark a { background-image:url(/img/ScrollDownDark.png); }

#MainContent {}

.Portfolio { max-width:1020px; margin:0 auto; padding:120px 10px 0; }
.Portfolio h2 { float:left; color:#d7b578; text-transform:uppercase; text-shadow:2px 2px 2px #000; }
.Portfolio p { margin-top: -13px; margin-bottom: 20px; line-height: 25px; float:right; width:290px; height:21px; margin-right:-10px; padding:11px; background-size:290px 43px; background:url(/img/Proud.png) center center no-repeat; color:#fff; text-align:center; }

.RefGrid { clear:both; padding-top:30px; margin:0 auto; font-size:0; }
.GridItem { margin-bottom:28px; padding:5px; overflow:hidden; background-color:#fff; font-size:0; }
.GridItem>div { padding:5px; border:2px solid #35414e; cursor:pointer; }
.GridItem span { display:block; max-width:276px; margin-top:5px; overflow:hidden; font-size:15px; }
.GridItem a { display:inline-block; max-width:276px; margin:0; padding:0; overflow:hidden; font-size:15px; font-weight:bold; text-decoration:none; color:#3bb; }
.GridItem a:hover { text-decoration:underline; }
.RefImg { width:276px; background-repeat:no-repeat; background-position:center center; }

.ServicesWrapper { padding-bottom:100px; background-color:#fff; padding-top: 120px; }
.Services { max-width:1020px; margin:0 auto; padding:0 10px; text-align:center; }
.Services h2 { float:left; color:#021021; text-transform:uppercase; }
.Services p { color:#a58346; text-align:center; margin:20px 0 55px 0; /*font-weight:bold;*/ font-size:16px; }
.Services p.Expertise { line-height: 25px; float:right; width:290px; height:21px; margin-right:-10px; margin-top: -11px; padding:11px; background-size:290px 43px; background:url(/img/Expertise.png) center center no-repeat; color:#021021; text-align:center; }
.Services ul.Expertise { list-style-type:none; margin:0 auto; display:block; }
.Services ul.Expertise li { display:inline-block; margin-right:60px; margin-bottom: 20px; text-align:left; vertical-align:top; }
.Services ul.Expertise li.One { width:230px; }
.Services ul.Expertise li.Two { width:200px; }
.Services ul.Expertise li.Three { width:240px; }
.Services ul.Expertise li.Four { width:170px; }
.Services ul.Expertise li span { display:block; font-size:25px; font-weight:bold; color:#caab74; text-align:center; background:url(/img/ExpertiseCrown.png) center bottom no-repeat; background-size:111px 15px; padding-bottom:20px; margin-bottom:7px; }
.Services ul.Expertise li:last-child { margin:0; }
.Services ul.Expertise li h3 { display:inline-block; font-size:18px; font-weight:bold; text-transform:uppercase; white-space:nowrap; text-align:left; border-bottom:2px solid #caab74; margin-bottom:22px; padding-bottom:11px; }
.Services ul.Expertise li p { margin:0; font-size:16px; line-height:24px; text-align:left; color:#021021; }

div.Designing { text-align:center; }
ul.Designing { display:block; margin:0 auto; }
ul.Designing>li { background-position:center 40px; background-size:287px 147px; background-repeat:no-repeat; width:287px; display:inline-block; vertical-align:top; text-align:center; margin-right:72px; }
ul.Designing>li:last-child { margin:0; }
ul.Designing>li.VisualIdentity { background-image:url(/img/VisualIdentity.png); }
ul.Designing>li.GraphicDesign { background-image:url(/img/GraphicDesign.png); }
ul.Designing>li.WebDesign { background-image:url(/img/WebDesign.png); }
ul.Designing>li>h3 { font-size:24px; font-weight:bold; color:#021021; text-transform:uppercase; }
ul.Designing>li>ul { padding:185px 0 0 0; }
ul.Designing>li>ul>li { font-size:16px; line-height:24px; color:#021021; }

.Contact { background-color:#13a89e; width:100%; }
.Contact .Divider { margin-top:-29px; height:48px; background:url(/img/Divider4.png) repeat-x; }
.Contact .Content { max-width:1000px; margin:0 auto; padding:100px 0 0 0; }
.Contact .Content h3 { font-size:30px; color:#fff; font-weight:bold; text-transform:uppercase; margin-bottom:38px; }
.Contact .Content p.Info { float:left; font-size:14px; line-height:20px; color:#fff; background:url(/img/HandsOnContact.png) 0 0 no-repeat; background-size:124px 134px; padding:22px 20px 0 167px; max-width:275px; }

.Contact .Content div.Form { float:right; vertical-align:top; max-width:386px; margin-right: -3px; width:100%; }
.Contact .Content div.Form span { display:block; padding:22px 0 15px 0; font-size:14px; line-height:20px; color:#fff; font-weight:bold; }
.Contact .Content div.Form .Left { float:left; width:340px; min-height: 170px; background-color:#b9e5e2; padding:6px 20px 10px 20px; box-sizing:border-box; }
.Contact .Content div.Form .Left input[type="text"], .Contact .Content div.Form textarea { display:block; outline:none; color:#021021; padding:5px; width:100%; box-sizing:border-box; background-color:transparent; border-color:#13a89e; border-style:solid; border-width:0 0 1px 0; }
.Contact .Content div.Form .Left textarea { height:65px; }
.Contact .Content div.Form .Left input.Url { display:none; }
.Contact .Content div.Form .Right { float:left; font-size:0; }

.Contact .Content div.Form .Right input[type="submit"] { background:url(/img/Submit.png) center center no-repeat; background-size:45px 170px; width:45px; height:170px;
	border-style:solid; border-color:#13a89e; border-width:0 0 0 1px; outline:none; font-size:0; cursor:pointer; transition:background-image 300ms ease;
}
.Contact .Content div.Form .Right input[type="submit"]:hover { background-image:url(/img/SubmitHover.png); }

#captcha_img, #captcha_change {
    width: 75px;
    height: 30px;
    margin-right: 6px;
}
.form-element {
    display: flex;
    padding-top: 6px;
}
@media screen and (max-width:1000px) {
	.Contact .Content div.Form { float:left; margin-left:167px; }
}

.Divider5 { height:10px; margin:60px 0 40px 0; background:url(/img/Divider5.png) center center no-repeat; background-size:318px 10px; }

.FooterWrapper { background-color:#13a89e; padding-bottom:100px; }
.Footer { max-width:1000px; margin:0 auto; }
.Footer ul { margin-left:167px; }
.Footer ul li { display:inline-block; color:#fff; font-size:14px; line-height:18px; vertical-align:bottom; width:50%; }
.Footer a { color:#fff; text-decoration:underline; }
.Footer a:hover { text-decoration:none; }
.Footer span { color:#021021; }

@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {

	#Logo { background-image:url(/img/Logo@2x.png); }

}

.FixedHeader { display: none; background-color: #000; background: url(/img/Header.png), url(/img/Background.png); overflow: auto; width: 100%; position: fixed; z-index: 999; background-repeat: no-repeat, repeat-x; }
.FixedHeader .HeaderWrapper { width: 100%; max-width: 1060px; overflow: auto; padding: 20px; margin: 0 auto; box-sizing: border-box; }
.FixedHeader .Logo { cursor: pointer; float: left; background: url(../img/Logo_fixedHeader.png) no-repeat; width: 43px; height: 56px; background-size: contain; }
.FixedHeader ul { overflow: auto; float: right; margin-top: 20px; }
.FixedHeader li { float: left; margin-left: 55px; }
.FixedHeader ul li a { display: block; font-size: 14px; font-weight: bold; text-transform: uppercase; text-decoration: none; color: #fff; transition: color ease 0.2s; }
.FixedHeader ul li.active a { color: #11a89f; }
.FixedHeader ul li a:hover { color: #11a89f; }

@media (max-width: 1024px) {
    ul.Designing > li.WebDesign { margin-top: 60px; }
}

@media (max-width: 1020px) {
    .Contact .Content p.Info { float: none; margin: 0 auto 20px; }
    .Contact .Content div.Form { float: none; margin: 0 auto; }
}

@media (max-width: 950px)  {
    #Header { background-size: contain; }
    #HeaderContent { padding-top: 80%; margin: 0 auto; max-width: 470px; }
    .Footer ul li { max-width: 335px; width: 100%; display: block; margin: 0 auto 20px; padding: 0 20px; box-sizing: border-box; }
    .Footer ul { margin: 0; }
}

@media (min-width: 675px) and (max-width: 869px) {
    .Services ul.Expertise li { width: 38% !important; margin-right: 16%; margin-bottom: 60px; }
    .Services ul.Expertise li:nth-child(2n+2) { margin-right: 0; }
    
}

@media (max-width: 737px) {
    ul.Designing > li { width: 100%; }
    ul.Designing > li.VisualIdentity { margin-right: 0; margin-bottom: 40px; }
    ul.Designing > li.GraphicDesign { margin-right: 0; }
}

@media (max-width: 674px) {
    .Services ul.Expertise li { width: 260px !important; display: block !important; margin: 0 auto 20px !important; }
    .Services ul.Expertise li h3 { text-align: center; width: 100%; }
    .Services h2 { display: block; float: none; margin: 0 auto 20px; }
    .Services p.Expertise { float: none; display: block; margin: 0 auto; padding: 11px 0; }
    .Services p { margin: 25px auto 30px; }
    .Portfolio h2 { display: block; float: none; text-align: center; margin: 0 auto 20px; }
    .Portfolio p { display: block; float: none; margin: 0 auto 25px; padding: 11px 0; }
    .Contact .Content h3 { display: block; text-align: center; }
    .Contact .Content p.Info { float: none; margin: 0 auto 20px; padding: 170px 0 0 0; background-position: center top; }
}

@media (max-width: 570px) {
    #HeaderInner { padding: 0 20px; }
    #Navigation { margin-top: 30px; }
    #Navigation li { display: block; margin: 0 auto 15px !important; }
    .FixedHeader ul { margin: 0; }
    .FixedHeader li { margin: 0 auto 10px; float: none; }
    .FixedHeader li:last-child { margin: 0; }
    .Slogan span.Top { font-size: 16px; }
    .Slogan span.Bottom { font-size: 32px; }
    .TextBig { font-size: 15px; }
    #Header { background-position: -60px 150px; background-size: 120%; }
    #HeaderContent { padding-top: 110%; }
}

@media (max-width: 460px) {
    #HeaderContent { padding-top: 130%; }
}

@media (max-width: 432px) {
    .Contact .Content div.Form { padding: 0 20px; width: 100%; box-sizing: border-box; }
    .Contact .Content div.Form .Left { max-width: 340px; min-width: 235px; width: 83%; }
}

@media (max-width: 350px) {
    #HeaderContent { padding-top: 150%; }
}