img { border-radius: 3px; } button, .button { border-style: solid; border-width: 1px; cursor: pointer; margin: 0 0 1.25em; position: relative; text-decoration: none; text-align: center; display: inline-block; padding-top: 0.75em; padding-right: 1.5em; padding-bottom: 0.8125em; padding-left: 1.5em; background-color: #334252; border-color: #1e2731; color: #ffffff; font-weight: normal; font-size: 1em; line-height: 1; font-style: normal; } button:hover, button:focus, .button:hover, .button:focus { background-color: #293542; color: #ffffff; } bordercolor { height: 5px; display: block; background-color: #293542; } logo img { margin: 50px 0px 60px 0px; max-width: 200px; } ul a { color: #525252; } ul a:hover { color: #293542; } #menubar { margin-top: 65px; padding: 0; float: right; z-index: 1; } #menubar li { display: inline; margin-left: 30px; list-style: none; } #menubar li a { display: block; text-decoration: none; display: inline; color: #525252; white-space: nowrap; } #menubar li a:hover , #menubar li:hover { color: #293542; } #menubar li ul { margin: 30px 0px 0px -130px; padding: 20px 50px; border-radius: 3px; position: absolute; visibility: hidden; background: #293542; display: inline; z-index: 2; text-align: center; } #menubar li ul li { float: none; margin: 0px; display: inline; } #menubar li ul li a { padding: 0px; margin: 0px; text-align: center; z-index: 2; color: #ffffff; } #menubar li ul li a:hover { color: #117d67; } bord { display: block; height: 10px; background-color: #ffffff; } #menubar li a#active { color: #334252; border-bottom: 1px solid #3f5266; } li#active { color: #3f5266; border-bottom: 1px solid #3f5266; } #active1 { color: #3f5266; } lin { height: 1px; margin: 10px -50px; background-color: #3f5266; display: block; } #slider , #slider img { border-radius: 3px; overflow: hidden; z-index: 1; } .slideshow-wrapper { min-height: 355px; } .orbit-timer { display: none; } whatido { margin-top: 50px; display: block; text-align: center; padding-bottom: 340px; border-bottom: 1px solid #e8e8e8; } box { display: block; margin-top: 25px; text-align: left; } box img { width: 40px; margin-bottom: 20px; } box h1 { font-size: 20px; color: #525252; } work { display: block; margin-top: 50px; padding-bottom: 70px; text-align: center; border-bottom: 1px solid #e8e8e8; } work h1 { font-size: 35px; margin-bottom: 50px; color: #293542; } work a:hover { opacity: .7; } certificates { display: block; margin-top: 50px; padding-bottom: 0px; text-align: center; } certificates h1 { font-size: 35px; margin-bottom: 30px; color: #293542; } certificates img { opacity: .5; background-color: #f6f4f6; border-radius: 5px; border: 2px solid #f6f4f6; } certificates img:hover { opacity: 1; } footer { display: block; margin-top: 100px; border-top: 1px solid #e7e7e7; background-color: #f6f5f6; } social a { line-height: 35px; } foot { text-align: right; padding: 20px 0px; display: block; border-top: 1px solid #e8e7e8; font-size: 12px; color: #cccccc; } foot img { width: 5%; margin-top: -3px; opacity: .4; } foot img:hover { opacity: 1; } /* social icon */ .social { padding: 8px 14px; border-radius: 3px; background-color: #dddddd; transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -o-transition: all .6s; color: #ffffff; } .social:hover { transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s; color: #ffffff; } .facebook:hover { background-color: #3B5998; } .twitter:hover { background-color: #55ACEE; } .google:hover { background-color: #DC4E41; } .linkedin:hover { background-color: #0077B5; } /* work page & single work page */ works { text-align: center; display: block; padding-bottom: 30px; } works h1 { line-height: 20px; font-size: 30px; margin-top: 20px; text-align: left; } works small { font-size: 15px; display: block; padding-bottom: 20px; border-bottom: 1px solid #e7e6e7; margin-bottom: 70px; color: #293542; text-align: left; } works img:hover { opacity: .7; transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s; } works p { font-size: 15px; line-height: 20px; text-align: left; } line { display: block; height: 1px; margin: 10px 0px; background-color: #e7e5e7; } usernext { text-align: center; margin-top: 90px; padding-top: 20px; display: block; border-top: 1px solid #e7e6e7; } social1 { line-height: 35px; display: block; text-align: right; } works h4 { text-align: left; } works h5 { border-bottom: 1px dotted #e7e5e7; padding-bottom: 8px; text-align: left; } .clearing-featured-img img { margin-bottom: 20px; } .clearing-featured-img img:hover { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } /* About page */ about { display: block; padding-bottom: 30px; text-align: center; } about li { margin-bottom: 20px; } about h1 { line-height: 20px; font-size: 30px; margin-top: 20px; text-align: left; } about small { font-size: 15px; display: block; padding-bottom: 20px; border-bottom: 1px solid #e7e6e7; margin-bottom: 70px; color: #293542; text-align: left; } about h5 { font-size: 25px; margin-top: 40px; text-align: center; line-height: 10px; } about small1 { font-size: 15px; display: block; padding-bottom: 20px; border-bottom: 1px solid #e7e6e7; margin-bottom: 25px; color: #19bc9b; text-align: center; } about p { font-size: 15px; line-height: 20px; text-align: center; } /* Contact page */ contact { display: block; padding-bottom: 30px; } #contact-area { margin-top: 25px; } #contact-area input, #contact-area textarea { padding: 5px; width: 300px; font-family: Helvetica, sans-serif; margin: 0px 0px 10px 0px; border: 2px solid #ccc; } #contact-area textarea:focus, #contact-area input:focus { border: 2px solid #900; } #contact-area input.submit-button { width: 100px; float: right; } clabel { float: left; text-align: right; margin-right: 15px; width: 100px; padding-top: 5px; } contact h1 { line-height: 20px; font-size: 30px; margin-top: 20px; text-align: left; } contact small { font-size: 15px; display: block; padding-bottom: 20px; border-bottom: 1px solid #e7e6e7; margin-bottom: 50px; color: #293542; text-align: left; } contact h5 { font-size: 15px; padding-bottom: 20px; margin-bottom: 20px; margin-top: 40px; border-bottom: 1px solid #e7e6e7; } contact small1 { font-size: 15px; display: block; padding-bottom: 20px; border-bottom: 1px solid #e7e6e7; margin-bottom: 25px; color: #19bc9b; text-align: center; } contact p { font-size: 15px; line-height: 20px; text-align: left; } /* Elements page */ elements { display: block; padding-bottom: 30px; } elements h1 { line-height: 20px; font-size: 30px; margin-top: 20px; text-align: left; } body{ background-color: #f6f5f6; } elements small { font-size: 15px; display: block; padding-bottom: 20px; border-bottom: 1px solid #e7e6e7; margin-bottom: 50px; color: #293542; text-align: left; } elements h5 { font-weight: bold; } line1 { display: block; height: 1px; margin: 40px 0px; background-color: #e7e5e7; } elements .clearing-thumbs img { width: 200px; } elements .clearing-thumbs img:hover { opacity: .7; } /* Responsive */ @media only screen and (max-width: 850px) and (min-width: 768px) { logo img { width: 150px; padding-top: 10px; } #menubar li { margin-left: 20px; } whatido { padding-bottom: 400px; } .slideshow-wrapper { min-height: 300px; } } @media only screen and (max-width: 767px) and (min-width: 500px) { logo { text-align: center; display: block; margin-top: -30px; } #menubar li a#active { border: 0px; padding: 5px 10px; border-radius: 3px; background-color: #293542; color: #ffffff; } #menubar { margin-top: -25px; margin-bottom: 20px; float: none; text-align: center; } #menubar li { margin: 0px 10px; } #menubar li a { display: block; text-decoration: none; display: inline; line-height: 40px; } #menubar li ul { margin: 40px 0px 0px -130px; padding: 10px 50px; } whatido { border: 0px; } work { border-top: 1px solid #e8e7e8; padding-top: 40px; } footer { padding-top: 0px; } footer h4 { margin-top: 50px; } about li { margin-bottom: 30px; } .slideshow-wrapper { min-height: 200px; } foot img { width: 9%; } } @media only screen and (max-width: 499px) { logo { text-align: center; display: block; margin-top: -30px; } #menubar li a#active { border: 0px; padding: 5px 10px; border-radius: 3px; background-color: #293542; color: #ffffff; } #menubar { margin-top: -35px; margin-bottom: 20px; float: none; text-align: center; } #menubar li { margin: 0px 7px; } #menubar li a { display: block; text-decoration: none; display: inline; line-height: 40px; } #menubar li ul { margin: 40px 0px 0px -115px; padding: 10px 30px; } whatido { border: 0px; margin: 0px; } box { text-align: center; } box img { display: inline; width: 30px; margin-right: 10px; margin-bottom: 9px; } box h1 { display: inline; } work { border-top: 1px solid #e8e7e8; padding-top: 20px; padding-bottom: 20px; } clients { margin-top: 20px; } footer { padding-top: 0px; margin-top: 30px; text-align: center; } footer h4 { margin-top: 30px; } foot { text-align: center; margin-top: 10px; } foot img { width: 13%; } about li { margin-bottom: 30px; } #slider .orbit-caption , .orbit-prev , .orbit-next { display: none; } .slideshow-wrapper { min-height: 100px; } social1 { margin-top: 15px; } works small { margin-bottom: 40px; } usernext { margin-top: 0px; padding-top: 40px; } lin { height: 1px; margin: 0px -30px; } elements .clearing-thumbs img { width: 150px; } #contact-area input, #contact-area textarea { padding: 5px; width: 471px; font-family: Helvetica, sans-serif; font-size: 1.4em; margin: 0px 0px 10px 0px; border: 2px solid #ccc; } } /* Animation */ .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight}