@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700&subset=latin,latin-ext);
HTML{ margin: 0px; padding: 0px; font-family: 'Roboto Slab'; }
BODY{ margin: 0px; padding: 0px; position:relative; overflow-x: hidden; min-width: 320px; background-color: #fef200; font-size: 16px; font-weight: 300;  }
a{ text-decoration: none; }
ul,li,h1,h2,h3,h4{ margin: 0px; padding:0px; list-style: none; font-weight: normal; box-sizing: border-box; }
div{ box-sizing: border-box; }
a,button,input,select{ outline: none; }

::-webkit-input-placeholder {   color:    #000;}
:-moz-placeholder {  color:    #000;    opacity:  1;}
::-moz-placeholder {  color:    #000;   opacity:  1;}
:-ms-input-placeholder { color:    #000; }

.wrapper{ position: relative;  width: 100%; max-width: 960px; margin: auto; }
#header{ padding-top: 70px; }
    #header .headerRight{ padding: 0px 0px 0px 0px; text-align: right; }
    #header .contactInfo{ margin: 35px 0px 0px 0px; }
        #header .contactInfo li{ font-weight: 700; display: inline-block; }
        #header .icon{ display: inline-block; width: 25px; height: 25px; background: url("bg/sprite.png"); }
        #header .facebook{ margin: 0px 15px 0px 0px; background-position: 0px 0px; }
        #header .mail{ background-position: -25px 0px; }
    #header .menu{ font-size: 0px; }
        #header .menu li{ display: inline-block; padding: 0px 10px 0px 10px !important; text-align: center; }
        #header .menu li a{ font-size: 18px; padding:0px 1px 2px 1px; line-height: 50px; font-weight: bold; color: #000; }
        #header .menu li a:hover{ background:url("bg/underline.png") center center repeat-x; }
    #logo{ width: 80%; max-width: 490px; }
#content{ padding: 60px 0px 0px 0px; position:relative; }
    #content .toRight{ float: right; padding: 0px; }
    #content article{ margin: 0px 0px 40px 60px; }
    #content article h2{ margin: 0px 0px 20px 0px; padding: 0px 0px 0px 20px; font-size: 24px; font-weight: 700; line-height: 35px; border-bottom:4px solid #000; }
    #content article p{ margin: 0px 0px 30px 20px; line-height: 22px; }
    /* services */
    #content article.services h2{ margin: 0px 0px 40px 0px; }
    .services ul{ margin: 0px 0px 5px 0px; padding: 0px; }
    .services li{ margin: 0px 0px 35px 0px; line-height: 40px; font-size: 14px; font-weight: 700; }
    .services li span{ display: inline-block; margin: 0px 20px 0px 0px; float: left; width: 40px; height: 40px; }
    .services li span i{ display: inline-block; width: 40px; height: 40px; background: url("bg/sprite.png"); }
    .services li span i{ display: none; }
    .services li.fotocopy span i{ background-position: 0px -25px; }
    .services li.print span i{ background-position: -40px -25px; }
    .services li.scan span i{ background-position: -80px -25px; }
    .services li.binding span i{ background-position: -120px -25px; }
    .services li.transcript span i{ background-position: -160px -25px; }
    /* prices */
    #content article.prices h2{ margin: 0px 0px 50px 0px; }
    .prices .group{ margin: 0px 0px 20px 20px; }
    .prices h3{ line-height: 40px; font-size: 16px; font-weight: 700; }
    .prices h3 span{ margin: 0px 30px 0px 0px; float: left; width: 40px; height: 40px; background: url("bg/sprite.png");}
        .prices h3 span{ display: none; }
        .prices h3.copyRB span{ background-position: 0px -25px; }
        .prices h3.binding span{ background-position: -120px -25px; }
        .prices h3.printing span{ background-position: -40px -25px; }
        .prices h3.scaning span{ background-position: -80px -25px; }
    .prices .group ul{ margin: 0px 0px 0px 110px; }
    .prices li{ line-height: 25px; background: url("bg/dots.png"); position: relative; }
    .prices li span{ padding: 0px 5px 0px 0px; background-color:#fef200;}
    .prices li span.price{ padding: 0px 0px 0px 5px; position: absolute; right: 0px; }
    /* contact */
    #content article.contact h2{ margin: 0px 0px 40px 0px; }
    .contact div>div{ padding: 0px !important; }
    .contact .form{ margin: 0px 0px 0px 20px; }
    .contact .input{ margin: 0px 20px 40px 0px;  }
    .contact input, .contact textarea{ padding: 5px 15px 5px 15px; box-sizing: border-box; width: 100%; background-color: #fef200; font-size: 18px; font-family:'Roboto Slab'; border:0px; border-left:2px solid #000; border-top:2px solid #fef200; border-right:2px solid #fef200; border-bottom:2px solid #000; outline: none; }
    .contact input{ height: 35px; }
    .contact textarea{ height: 130px; margin: 0px 0px 0px 0px; resize: none; }
    .contact .submit{ margin: 10px 0px 0px 0px; padding: 15px 25px 15px 25px; background-color: #000; color:#fef200; cursor: pointer; border: 0px; font-size: 18px; font-family: 'Roboto Slab'; }
    .contact .stamp{ position: relative; float: right; padding:20px 25px !important; line-height: 26px; }
    .contact .stamp .aTL{ width: 35px; height: 35px; position: absolute; top: 0px; left: 0px; border-top: 2px solid #000; border-left:2px solid #000; }
    .contact .stamp .aTR{ width: 35px; height: 35px; position: absolute; top: 0px; right: 0px; border-top: 2px solid #000; border-right:2px solid #000;  }
    .contact .stamp .aBL{ width: 35px; height: 35px; position: absolute; bottom: 0px; left: 0px; border-bottom: 2px solid #000; border-left:2px solid #000; }
    .contact .stamp .aBR{ width: 35px; height: 35px; position: absolute; bottom: 0px; right: 0px; border-bottom: 2px solid #000; border-right:2px solid #000;  }
    .contact .stamp .facebook{ float: left; margin: 2px 0px 0px 0px; width: 25px; height: 25px; background: url("bg/sprite.png"); }
	.contact .stamp a{ color:#000; }
    .contact label.error{ display: none !important; }
    .contact input.error, .contact .error{ border-top:2px solid red; border-right:2px solid red; }

    #gMap{ height: 400px; background-color: black; }
	
	#facebookShare{ position:absolute; top:50px; margin:0px 0px 0px 0px; padding:50px 0px 0px 0px; display:inline-block; width:160px; color:#000; }
	#facebookShare span{ float:left; width:50px; height:50px; background:url("bg/sprite.png") 0px -65px; line-height:26px;  }
	
.clear{ clear: both; }

@media (max-width: 991px){
    .hideIt{ display: none; }
    #header .headerRight{ padding: 0px 15px 0px 15px; }
    .contact .stamp{ font-size: 14px; }
}

@media (max-width: 767px){
	#facebookShare{ display:none; }
    BODY{ font-size: 14px; }
    #content article{ margin: 0px 20px 40px 20px; }
    #content .group{ margin: 0px 10px 40px 10px; }
    .prices h3 span{ margin: 0px 20px 0px 0px; }
    .services li span{ margin: 0px 20px 0px 0px; }
    .prices .group ul{ margin: 10px 0px 0px 0px; }
    #content article h2{ width: auto; }
    .contact .form{ margin: 0px 20px 0px 20px; }
    .contact .stamp{ width: 100%; margin: 0px 0px 40px 0px; position: relative; float: left; padding:20px 25px !important; line-height: 26px; }
    .contact .input{ margin-right: 0px; }
    #header{ padding-top: 20px; }
    #logo{ width: 280px; display:block; margin: auto; }
    #header .menu{ margin: 40px 0px 0px 0px; }
    #header .menu li a{ font-size: 16px; }
    .contactInfo{ text-align: center; }
}