Pesquisar na Comunidade

Olá....como vão ?? Eu peguei um CSS Multi-Level Menu como modelo na internet, e gostaria de fazer uma modificação !! O menu (no link abaixo) sem estar no Responsive está ocupando mais ou menos a metade da tela. Eu gostaria que ocupasse 100% !! Tentei fazer tal modificação por conta mas não consegui !! Link => CSS Multi-level Menu Alguém por favor poderia me dar uma ajuda ?? Desde já obrigado Carlos

É o seguinte galera... Estou desenvolvendo um site... Peguei um código css na internet para que o background ficasse 100% em qualquer navegador, mas isso não acontece, ele fica na metade da tela. Veja o site: http://testerhecia.ec.cx/ CÓDIGO DO BACKGROUND: background-image: url('../images/background.png'); background-repeat: no-repeat; background-size: 100% 100%; CÓDIGO DO CSS DO SITE: /* reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} ol,ul{list-style:none;margin:0;padding:0;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} table{border-collapse:collapse;border-spacing:0;} /* start editing from here */ a{text-decoration:none;} .txt-rt{text-align:right;}/* text align right */ .txt-lt{text-align:left;}/* text align left */ .txt-center{text-align:center;}/* text align center */ .float-rt{float:right;}/* float right */ .float-lt{float:left;}/* float left */ .clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:absolute;}/* Position Absolute */ .vertical-base{ vertical-align:baseline;}/* vertical align baseline */ .vertical-top{ vertical-align:top;}/* vertical align top */ .underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */ nav.vertical ul li{ display:block;}/* vertical menu */ nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ img{max-width:100%;} /*end reset*/ .wrap { width: 80%; margin: 0px auto; } /* start header */ .header_bg{ background-image: url('../images/header.png'); background-repeat: no-repeat; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; text-align: center; } .header{ padding: 0% 0%; } .logo{ width:185px; margin-top:1.1%; float: left; margin-left:0px; } .logo h1 a{ display: block; } .h_right{ position:relative; float: right; } .menu{ float: left; margin-right: 50px; margin-top: 3.4%; } .menu li{ float: left; margin-right: 10px; } .menu li.active a,.menu li a:hover{ color: #fdcf1c; } .menu li a{ font-size: 0.96em; color: #ffffff; font-family: 'Roboto', sans-serif; margin:0px 15px; font-weight: 300; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /*start search*/ .sb-search { position: absolute; top:-12px; right:0px; width: 0%; min-width: 45px; font-family: 'Roboto', sans-serif; height: 42px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; } .sb-search-input { position: absolute; top: 0; left: 0px; border: none; outline: none; background: #313338; width: 100%; height: 46px; font-family: 'Roboto', sans-serif; margin: 0; z-index: 10; padding: 5px 20px; font-size: 13px; color: #ffffff; } .sb-search-input::-webkit-input-placeholder { color: #ffffff; } .sb-search-input:-moz-placeholder { color: #ffffff; } .sb-search-input::-moz-placeholder { color: #efb480; } .sb-search-input:-ms-input-placeholder { color: #ffffff; } .sb-icon-search,.sb-search-submit { width: 45px; height: 45px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 45px; text-align: center; cursor: pointer; } .sb-search-submit { background: #fff; /* IE needs this */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ opacity: 0; color: transparent; border: none; outline: none; z-index: -1; -webkit-appearance: none; } .sb-icon-search { color: #fff; background: #313338 url('../images/search.png') no-repeat 13px 13px; z-index: 90; } /* Open state */ .sb-search.sb-search-open,.no-js .sb-search { width: 100%; } .sb-search.sb-search-open .sb-icon-search,.no-js .sb-search .sb-icon-search { background: #313338 url('../images/search.png') no-repeat 13px 13px; color: #fff; z-index: 11; } .sb-search.sb-search-open .sb-search-submit,.no-js .sb-search .sb-search-submit { z-index: 90; } /*-- start-smartphone_nav --*/ .nav { display:none; } .nav-item { float:left; *display:inline; zoom:1; } .nav-item a { display:block; } .nav-item a:hover { background: #18BD9B; color: #FFFFFF; } .nav-mobile { display: none; cursor: pointer; position: absolute; top: 5px; left: 5px; background: url(../images/nav_icon.png) 60% 60% no-repeat #313338; height:32px; width: 32px; } .nav-mobile { display:block; } .nav { margin-top:44px; width:100%; } .nav-list { display:none; } .nav-item { width:100%; float:none; } .nav-item a { font-weight:400; background: #313338; padding: 10px; text-transform:uppercase; color:#FFF; -webkit-transition: color .2s linear,background .2s linear; -moz-transition: color .2s linear,background .2s linear; -o-transition: color .2s linear,background .2s linear; transition: color .2s linear,background .2s linear; font-size: 0.8725em; } .nav-inner { display: none; } .nav-active, .nav-active-inner .nav-inner { display:block; } /***************start-service************/ #services{ background:#282A2E; padding:5% 0; } .service-grids{ background:#282A2E; } .service-grids h2{ text-align:center; margin: 0 0 4%; font-size: 1.8em; color: #ffffff; text-transform: uppercase; font-weight: 400; } .middle-grids { margin: 2em 0; } .section { clear: both; padding: 0px; margin: 0px; } .images_1_of_4{ display: block; float:left; margin-left:3%; text-align: center; } .images_1_of_4:first-child { margin-left: 0; } .images_1_of_4 { width: 21.6%; } .images_1_of_4 img{ max-width: 100%; margin-bottom: 23px; border-radius: 30em; -webkit-border-radius: 30em; -o-border-radius: 30em; -moz-border-radius: 30em; padding: 45px; background: #313338; cursor: pointer; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } .images_1_of_4 img:hover{ background: #30554E; } .images_1_of_4 h3 a{ color:#ffffff; font-size:1.5em; font-weight :400; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } .images_1_of_4 h3 a:hover{ color:#25BEA0; } .images_1_of_4 h3 { padding: 0em 0em 0em 0em; } .images_1_of_4 p { padding: 0em 0em 1.5em 0em; } .images_1_of_4 p { font-size:0.875em; color:#C0BEBE; line-height: 1.8em; } .images_1_of_4 .button a{ padding:7px 10px; font-size:0.9em; background:#49CBCD; color : #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } .images_1_of_4 .button a:hover{ background: #296E6F; text-decoration:none; } /***************end-servivice************/ .message { background: url("../images/banner2.jpg") no-repeat; background-size: 100%; padding: 12% 0; text-align: left; } .message h3{ color:#7C7C7C; font-size:4em; font-weight :400; } .message li{ display: inline-block; } .message li a{ color:#ffffff; display:block; font-size:1.5em; font-weight :400; padding: 15px 20px; } /*--- buttons ---*/ body > div.message > div > div { margin-top: 4%; } .span1 { margin: 1% 2% 0 0; float: left; } .span1 i { position:relative; border-left:solid 1px #B0D553; font-size: 1.1em; color: #fff; background:#B0CD3B; padding: 15px 76px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #757575; -moz-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #757575; -o-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #757575; box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #757575; } .span1 i:active { top:3px; background:#B0CD3B; -webkit-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #757575; -moz-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #757575; -o-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #757575; box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #757575; } .span2 { float: left; margin-top: 1%; } .span2 i { position:relative; border-left:solid 1px #25BEA0; font-size: 1.1em; color: #fff; background:#1BBC9D; padding: 15px 76px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #6D6D70; -moz-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #6D6D70; -o-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #6D6D70; box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #6D6D70; } .span2 i:active { top:3px; -webkit-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 2px 0px 0px #18A291, 2px 10px 5px #6D6D70; -moz-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 2px 0px 0px #18A291, 2px 10px 5px #6D6D70; -o-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 2px 0px 0px #18A291, 2px 10px 5px #6D6D70; box-shadow: inset 0px 1px 0px #1BBC9D, 0px 2px 0px 0px #18A291, 2px 10px 5px #6D6D70; } /*--- portfolio ---*/ /***************start portfolio**********/ .container { position: relative; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #filters { margin:3% 1%; padding:0; list-style:none; } #filters li { float:left; } #filters li span { display: block; padding: 10px 30px; text-decoration: none; color: #B9B9B9; cursor: pointer; font-size: 0.85em; text-transform: capitalize; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #filters li span:hover{ background:#EA5A4B; color:#fff; } #filters li span.active { background:#EA5A4B; color:#fff; } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width:23%; margin:1%; margin-bottom: 4%; display:none; float:left; overflow:hidden; } .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; } .portfolio img { width:100%; position: relative; transition: all 300ms!important; -webkit-transition: all 300ms!important; -moz-transition: all 300ms!important; } .portofolio-item h1{ padding: 20px 25px; color: #E8603C; font-size: 1.5em; margin: 1% 0%; } .portfolio-wrapper a{ display:block; } .portfolio-wrapper a span { position: absolute; width: 100%; height: 72%; top: 0px; left: 0px; text-align: center; line-height: 7em; color: #FFF; font-family: 'fontleroybrownregular'; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); font-size: 2em; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; background: rgba(0, 0, 0, 0.61); -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-appearance: none; text-transform: capitalize; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .portfolio-wrapper a:hover span{ opacity: 1; } .portfolio-wrapper a span img{ width:40px; height:40px; } .gallerylist-wrapper a{ display:block; } .gallerylist-wrapper a span { position: absolute; width: 100%; height: 71%; top: 0px; left: 0px; text-align: center; line-height: 6.5em; color: #FFF; font-family: 'fontleroybrownregular'; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); font-size: 2em; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; background: rgba(0, 0, 0, 0.61); -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-appearance: none; text-transform: capitalize; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .gallerylist-wrapper a:hover span{ opacity: 1; } .gallerylist-wrapper a span img{ width:40px; height:40px; } /* #Mobile (Portrait) - Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { #portfoliolist .portfolio { width:48%; margin:1%; } #ads { display:none; } } /* #Mobile (Landscape) - Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { #ads { display:none; } } /* #Clearing */ .white-btn { border-color:#fff; color:#fff; border: 2px solid #FFF; text-decoration: none; } .white-btn:hover { background-color:#fff; color:#2cbdb5; } /* ========================================================= **************************Portfolio************************* ============================================================ */ .typo1 { position:relative; width:100%; height:100%; padding: 5% 0; } .portfolio-bg { position: absolute; height: 100%; width: 100%; z-index:0; } #portfolio .section-title .small-caption, #portfolio .section-title .big-caption { color:#fff; font-size:20px; margin:0 0 10px; text-align:center; } /* Start: Recommended Isotope styles */ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; list-style:none; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /* End: Recommended Isotope styles */ /* disable CSS transitions for containers with infinite scrolling*/ .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #container { margin:0 auto 40px; } .element { width: 280px; height: 252px; float: left; overflow: hidden; position: relative; margin:7.5px; } /**** Example Options ****/ #options { text-align:center; margin:20px 0; } #options ul { margin: 0; list-style: none; display:inline-block; } #options li { float: inline-block; } #options li a { display: block; color: #ffffff; font-size: 1em; font-weight: 300; cursor: pointer; text-align: center; padding: 10px 15px; margin-right: 5px; background: #313338; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } #nivo-lightbox-demo a { padding: 5px 10px; border: 2px solid #ffffff; border-radius: 2em; color: #fff; } #options li a:hover { background: #1BBC9D; } #options li.active { background: #1BBC9D; } .grid figure { margin: 0; position: relative; text-align:center; } .grid figure img { width: 100%; display: block; position: relative; } .grid figcaption { position: absolute; top: 0; left: 0; background: #37bdb5; color: #fff; } .grid figcaption h3 { margin: 20px 0 5px; padding: 0; color: #fff; font-size:16px; line-height:18px; } .grid figcaption h3 a { color:#fff; } .grid figcaption .meta-box { color:#fff; } .grid figcaption span a { font-size:14px; color:#fff; } .grid figcaption span a:hover { color:#fff; } .grid figcaption footer { position:absolute; bottom: 46px; text-align:center; width:100%; } .grid figcaption a.link-gallery, .grid figcaption a.link-p-detail { padding: 6px 10px; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; min-width: 60px; border: 2px solid #FFF; color: #FFF; margin-right: 13px; } .cs-style-5 figure img { z-index: 10; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } .no-touch .cs-style-5 figure:hover img, .cs-style-5 figure.cs-hover img { -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } .cs-style-5 figcaption { height: 100%; width: 100%; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; -moz-transition: -moz-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; } .no-touch .cs-style-5 figure:hover figcaption, .cs-style-5 figure.cs-hover figcaption { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; filter: alpha(opacity=100); } #portfolio .load-more { font-size:20px; padding:15px 25px 18px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; } .heading { color: #ffffff; font-size: 2.5em; font-weight: 400; text-align: center; } #cbp-so-scroller { background: #282A2E; } .span_1_of_4{ display: block; float:left; margin-left:2%; text-align: center; } .span_1_of_4:first-child { margin-left: 0; } .span_1_of_4 { width: 23.5%; } .span_1_of_4 img{ width:100%; cursor: pointer; } /*--- message1 ---*/ .message1 { background: url("../images/banner3.jpg") no-repeat; background-size: 100%; padding: 12% 0; text-align: left; } .message1 h3{ color:#ffffff; font-size:4em; font-weight :400; } .message1 p{ color:#ffffff; font-size:2.5em; font-weight :400; } /*--- message2 ---*/ .message2 { background: url("../images/pic.jpg") no-repeat; background-size: 100%; padding: 11% 0; text-align: left; } .message2 h3{ color:#ffffff; font-size:4em; font-weight :400; } .message2 p{ color:#ffffff; font-size:2.5em; font-weight :400; } /*--- message3 ---*/ .message3 { background: url("../images/banner4.jpg") no-repeat; background-size: 100%; padding: 11% 0; text-align: left; } .message3 h3{ color:#ffffff; font-size:4em; font-weight :400; } .message3 p{ color:#ffffff; font-size:2.5em; font-weight :400; } /*--- pricing ---*/ #pricing > div > h3 { color: #fff; font-size: 2.5em; text-align: center; margin-bottom: 3%; } .span3 { margin: 1% 2% 0 0; float: left; } .span3 i { position:relative; border-left:solid 1px #B0D553; font-size: 1.1em; color: #fff; background:#B0CD3B; padding: 10px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #3A3838; -moz-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #3A3838; -o-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #3A3838; box-shadow: inset 0px 1px 0px #B0CD3B, 0px 5px 0px 0px #95B643, 2px 10px 5px #3A3838; } .span3 i:active { top:3px; background:#B0CD3B; -webkit-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #3A3838; -moz-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #3A3838; -o-box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #3A3838; box-shadow: inset 0px 1px 0px #B0CD3B, 0px 2px 0px 0px #95B643, 2px 10px 5px #3A3838; } .span3 j { position: relative; border-left: solid 1px #FDFDFD; font-size: 1.1em; color: #5A5A5A; background: #E4E4E4; padding: 10px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 5px 0px 0px #C5C5C5, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 5px 0px 0px #C5C5C5, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 5px 0px 0px #C5C5C5, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #D6D6D6, 0px 5px 0px 0px #C5C5C5, 2px 10px 5px #929292; } .span3 j:active { top:3px; background:#E4E4E4; -webkit-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 2px 0px 0px #C5C5C5, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 2px 0px 0px #C5C5C5, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #D6D6D6, 0px 2px 0px 0px #C5C5C5, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #D6D6D6, 0px 2px 0px 0px #C5C5C5, 2px 10px 5px #929292; } .span3 k { position: relative; border-left: solid 1px #74B0A4; font-size: 1.1em; color: #fff; background: #74B0A4; padding: 10px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 5px 0px 0px #A0C3BC, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 5px 0px 0px #A0C3BC, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 5px 0px 0px #A0C3BC, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #A3C3B3, 0px 5px 0px 0px #A0C3BC, 2px 10px 5px #929292; } .span3 k:active { top:3px; background:#74B0A4; -webkit-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 2px 0px 0px #A0C3BC, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 2px 0px 0px #A0C3BC, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #A3C3B3, 0px 2px 0px 0px #A0C3BC, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #A3C3B3, 0px 2px 0px 0px #A0C3BC, 2px 10px 5px #929292; } .span3 l { position: relative; border-left: solid 1px #B6C380; font-size: 1.1em; color: #fff; background: #B6C380; padding: 10px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #C0D178, 0px 5px 0px 0px #A2AF69, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #C0D178, 0px 5px 0px 0px #A2AF69, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #C0D178, 0px 5px 0px 0px #A2AF69, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #C0D178, 0px 5px 0px 0px #A2AF69, 2px 10px 5px #929292; } .span3 l:active { top:3px; background:#B6C380; -webkit-box-shadow: inset 0px 1px 0px #C0D178, 0px 2px 0px 0px #A2AF69, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #C0D178, 0px 2px 0px 0px #A2AF69, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #C0D178, 0px 2px 0px 0px #A2AF69, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #C0D178, 0px 2px 0px 0px #A2AF69, 2px 10px 5px #929292; } .span3 m { position: relative; border-left: solid 1px #424242; font-size: 1.1em; color: #fff; background: #424242; padding: 10px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5p; -webkit-box-shadow: inset 0px 1px 0px #8A8181, 0px 5px 0px 0px #5D5555, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #8A8181, 0px 5px 0px 0px #5D5555, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #8A8181, 0px 5px 0px 0px #5D5555, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #8A8181, 0px 5px 0px 0px #5D5555, 2px 10px 5px #929292; } .span3 m:active { top:3px; background:#424242; -webkit-box-shadow: inset 0px 1px 0px #8A8181, 0px 2px 0px 0px #5D5555, 2px 10px 5px #929292; -moz-box-shadow: inset 0px 1px 0px #8A8181, 0px 2px 0px 0px #5D5555, 2px 10px 5px #929292; -o-box-shadow: inset 0px 1px 0px #8A8181, 0px 2px 0px 0px #5D5555, 2px 10px 5px #929292; box-shadow: inset 0px 1px 0px #8A8181, 0px 2px 0px 0px #5D5555, 2px 10px 5px #929292; } .client{ margin-top: 6%; width: 100%; text-align:center; } .client h3 i { color: #ffffff; font-size: 1.4em; width: 100%; font-weight: 400; text-align: center; margin: 0% 14% 0 17% } .client h3 img { vertical-align: middle; } .img{ float: left; margin: 4% 11% 0 13%; } .img1{ float: right; margin: 4% 14% 0 0; } .data{ float: left; width: 40%; margin-top: 4%; } .data p{ font-size: 0.92355em; color:#C0BEBE; line-height: 1.9em; margin-bottom:3%; } .data p a{ color:#95AC38; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } .data p a:hover{ color:#999; } .background{background-image: url('../images/about.'); background-repeat: no-repeat; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; text-align: center; } /*--- about ---*/ .body { } .about{ } .about h4{ } /* GRID OF Four ============================================================================= */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; } .label_1_of_4{ display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .label_1_of_4:first-child { } .about_1_of_4 { margin: 0 auto; margin-top: 5%; padding: 1%; } .about_1_of_4 img{ cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .about_1_of_4 img:hover{ -webkit-transform: scale(1.1); transform: scale(1.1); } /************start-clock*********/ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, .body { background-image: url('../images/background.png'); background-repeat: no-repeat; background-size: 100%; text-align: center; color: #444; font-size: 16px; font-family: 'Roboto', sans-serif; } .pie-wrapper { display: inline-block; height: 200px; margin: 5% 1% 1%; position: relative; width: 200px; } .pie-wrapper .pie { clip: rect(0, 200px, 200px, 100px); height: 200px; position: absolute; width: 200px; } .pie-wrapper .pie .half-circle { border: 20px solid #3498db; border-radius: 50%; clip: rect(0, 100px, 200px, 0); height: 200px; position: absolute; width: 200px; } .pie-wrapper .label { background: #34495e; border-radius: 50%; color: #ecf0f1; cursor: default; display: block; font-size: 3em; height: 160px; left: 10%; line-height: 3em; position: absolute; text-align: center; top: 10%; width: 160px; } .pie-wrapper .label .smaller { color: #bdc3c7; font-size: .45em; padding-bottom: 20px; vertical-align: super; } .pie-wrapper.style-2 .shadow { border: 20px solid #bdc3c7; border-radius: 50%; height: 100%; width: 100%; } .pie-wrapper.style-2 .label { background: none; color: #7f8c8d; } .pie-wrapper.style-2 .label .smaller { color: #bdc3c7; } .pie-wrapper.progress-30 .pie .right-side { display: none; } .pie-wrapper.progress-30 .pie .half-circle { border-color: #3498db; } .pie-wrapper.progress-30 .pie .left-side { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -ms-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); } .pie-wrapper.progress-60 .pie { clip: rect(auto, auto, auto, auto); } .pie-wrapper.progress-60 .pie .right-side { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pie-wrapper.progress-60 .pie .half-circle { border-color: #9b59b6; } .pie-wrapper.progress-60 .pie .left-side { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } .pie-wrapper.progress-90 .pie { clip: rect(auto, auto, auto, auto); } .pie-wrapper.progress-90 .pie .right-side { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pie-wrapper.progress-90 .pie .half-circle { border-color: #e67e22; } .pie-wrapper.progress-90 .pie .left-side { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -ms-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); } .pie-wrapper.progress-45 .pie .right-side { display: none; } .pie-wrapper.progress-45 .pie .half-circle { border-color: #1abc9c; } .pie-wrapper.progress-45 .pie .left-side { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); } .pie-wrapper.progress-75 .pie { clip: rect(auto, auto, auto, auto); } .pie-wrapper.progress-75 .pie .right-side { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pie-wrapper.progress-75 .pie .half-circle { border-color: #8e44ad; } .pie-wrapper.progress-75 .pie .left-side { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .pie-wrapper.progress-95 .pie { clip: rect(auto, auto, auto, auto); } .pie-wrapper.progress-95 .pie .right-side { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .pie-wrapper.progress-95 .pie .half-circle { border-color: #e74c3c; } .pie-wrapper.progress-95 .pie .left-side { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -ms-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); } #about > div > div.client > div:nth-child(3) > h3 { color: #fff; padding-top: 11%; } #about > div > div.client > div:nth-child(4) > h3 { color: #fff; padding-top: 11%; } #about > div > div.client > div:nth-child(5) > h3 { color: #fff; padding-top: 11%; } #about > div > div.client > div:nth-child(6) > h3 { color: #fff; padding-top: 11%; } #about > div > div.client > div:nth-child(7) > h3 { color: #fff; padding-top: 11%; } /************start-contact*********/ .contact{ background:#282A2E; padding-bottom: 4%; } .form{ float: left; width: 71%; margin: 2% 4% 0 0; display: block; } .form h3{ color: #C5C5C5; font-size: 1.4em; border-bottom: 5px solid #393A3B; margin-bottom: 1%; padding-bottom: 2%; } .para-contact { float:left; display: block; margin: 2% 0; width:25%; } .para-contact h4{ color:#C5C5C5; font-size:1.4em; border-bottom: 5px solid #393A3B; margin-bottom: 6%; padding-bottom: 6%; } .para-contact p{ font-size:0.990em; color:#999999; line-height:2em; margin-top:0.5em; width: 89%; } .contact-form { padding: 2em 0 1em; } .contact h2{ color:#F2F2F2; font-size:2.5em; padding: 2em 0em 0.7em 0em; text-align: center; } .get-intouch-left-address p,.get-intouch-left-address p a{ color: #999999; font-size: 0.95em; line-height:2.3em; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; } .image img { border-radius: 2px; } .get-intouch-left-address p a:hover{ color:#fff; } .contact input[type=text],.contact textarea{ padding: 7px; width: 48%; margin: 2% 2% 0 0; background: #222327; outline: none; color: #959595; font-size:0.92355em; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -webkit-appearance: none; font-family: 'Roboto', sans-serif; border:1px solid #222327; -webkit-appearance: none; } .contact input[type=text]:nth-child(2) { margin-right: 0em; } .contact form textarea{ padding: 7px; display: block; width: 100%; background: #222327; border: none; outline: none; color: #999999; font-size:1em; -webkit-appearance: none; margin-top: 1em; } .contact form textarea{ resize:none; height:180px; } #contact > div > div > div.con > form > div.con-button a:hover{ text-decoration:none; background:#45BDBE; } #contact > div > div.contact-form > div > div.social-icons > p{ font-size: 0.980em; color: #6B598C; font-family: 'Roboto', sans-serif; line-height:2px; margin-top: 3em; } .span4 { float: left; margin-top: 2%; } .span4 i input[type=submit]{ font-family: 'Roboto', sans-serif; position: relative; border: solid 1px #25BEA0; font-size: 1.1em; outline: none; color: #fff; cursor:pointer; background: #1BBC9D; padding: 15px 25px; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; -moz-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; -o-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; } .span4 i input[type=submit]:active { top:3px; -webkit-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; -moz-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; -o-box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; box-shadow: inset 0px 1px 0px #1BBC9D, 0px 5px 0px 0px #18A291, 2px 10px 5px #252525; } #toTop { display: none; text-decoration: none; position: fixed; bottom: 10px; right: 10px; overflow: hidden; width: 44px; height: 44px; border: none; text-indent: 100%; background: url(../images/top_move.png) no-repeat right top; } /***********end-contact*************/ /*--- social ---*/ .social { background: url("../images/banner5.jpg") no-repeat; background-size: 100%; padding: 10% 0; text-align: left; } .social h3{ color:#ffffff; font-size:4em; font-weight :400; } .social p{ color:#ffffff; font-size:2.5em; font-weight :400; } /*---startr-social-icons-set----?*/ .social-icons-set{ float: left; width: 34%; margin: 1.5em 0em 0 0; } .social-icons-set ul li{ display:inline-block; padding: 3px; } .social-icons-set ul li:nth-child(3),.social-icons-set ul li:nth-child(6){ margin-right:0px; } .social-icons-set ul li a{ position: absolute; top:0px; right:0px; width: 0%; min-width: 0px; font-family: 'Roboto', sans-serif; height: 42px; float: right; overflow: hidden; height:40px; width:40px; display:block; background:url(../images/social-icons.png) no-repeat; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .social-icons-set ul li a.facebook{ margin-right:0px; background: url(../images/image-sprit.png) no-repeat -246px 9px #727272; border-radius: 3em; border: 5px solid #transparent; margin-top:2.0%; display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-animation-name: buzz-out; animation-name: buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-set ul li a.facebook:hover{ background: url(../images/image-sprit.png) no-repeat -246px 9px #3c599b; display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-animation-name: buzz-out; animation-name: buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-set ul li a:hover { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-animation-name: buzz-out; animation-name: buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-set ul li a.twitter{ background: url(../images/image-sprit.png) no-repeat 10px 9px #333; border-radius: 3em; border: 5px solid #333; } .social-icons-set ul li a.twitter:hover{ background: url(../images/image-sprit.png) no-repeat 10px 9px #fdcf1c; } .social-icons-set ul li a.vimeo{ background: url(../images/image-sprit.png) no-repeat -33px 8px #333; border-radius: 3em; border: 5px solid #333; } .social-icons-set ul li a.vimeo:hover{ background: url(../images/image-sprit.png) no-repeat -33px 8px #fdcf1c; } .social-icons-set ul li a.rss{ background: url(../images/image-sprit.png) no-repeat -77px 10px #333; border-radius: 3em; border: 5px solid #333; margin-left: 4px; } .social-icons-set ul li a.rss:hover{ background: url(../images/image-sprit.png) no-repeat -77px 10px #fdcf1c; } .social-icons-set ul li a.gplus{ background: url(../images/image-sprit.png) no-repeat -118px 8px #333; border-radius: 3em; border: 5px solid #333; } .social-icons-set ul li a.gplus:hover{ background: url(../images/image-sprit.png) no-repeat -118px 8px #fdcf1c; } .social-icons-set ul li a.pin{ background: url(../images/image-sprit.png) no-repeat -161px 8px #333; border-radius: 3em; border: 5px solid #333; } .social-icons-set ul li a.pin:hover{ background: url(../images/image-sprit.png) no-repeat -161px 8px #fdcf1c; } /*---start-tooltips----*/ /* GRID OF THREE ============================================================================= */ .footer-top{ background: #282A2E; padding:5% 0; } .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; } .col_1_of_3{ display: block; float:left; margin: 1% 0 1% 1.6%; } .col_1_of_3:first-child { margin-left: 0; } .span_1_of_3 { width: 32%; padding:1.5%; } .span_1_of_3 h5{ color:#ffffff; font-size:1.5em; border-bottom: 1px solid #525252; padding-bottom: 3%; margin-bottom: 6%; } .span_1_of_3 h6 span{ color: #999999; font-size: 1em; padding: 0 4% 2%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .span_1_of_3 h6 span:hover{ color: #ffffff; } .span_1_of_3 h6.a{ color: #999999; font-size: 1em; padding: 0 0% 2%; } .span_1_of_3 h6 img{ vertical-align: middle; cursor: pointer; } .span_1_of_3 p { font-size:0.8755em; padding: 6% 0; color: #999999; line-height: 1.9em; } .span_1_of_3 li { display: inline-block; width: 23%; margin:1% 1% 1% 0; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .span_1_of_3 li:hover { opacity: 0.6; } .rodape { position:absolute; bottom:0; width:100%; height:55px; /* Mesma Altura do Rodapé */ background-image: url('../images/header.png'); background-repeat: no-repeat; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; } } .image{ float: left; } .end { float:left; margin-top: 1%; margin-right: 2%; } .end p { font-size:0.92355em; color:#FFFFFF; } .escrever { float:center; margin-top: 5%; margin-right: 0%; color:#FFFFFF; font-size:1.5em; } .copy-right { float:center; margin-top: 0%; margin-right: 2%; } .copy-right p { font-family: 'Roboto', sans-serif; font-size:0.8em; color:#FFFFFF; } .copy-right p a { color:#fdcf1c; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .copy-right p a:hover { color: #ffffff; } /*---start-media-queries---*/ @media only screen and (max-width: 1366px){ .wrap{ width:95%; } #fwslider .title { font-size: 4em; } .sb-search { top: -10px; right: 8px; } .sb-search-input { height: 45px; } .message { padding: 11% 0; } .message2 { padding: 10% 0; } .social { padding: 8.9% 0; } } @media only screen and (max-width: 1280px){ .wrap{ width: 95%; } .message h3 { font-size: 3.5em; } .message { padding: 11% 0; } .span_1_of_4 img { width: 92%; } .span_1_of_4 { width: 23%; } .client h3 i { margin: 0% 10% 0 17%; } #portfoliolist .portfolio { width: 22.9%; } } @media only screen and (max-width: 1024px){ .wrap{ width: 95%; } .sb-search { top: -9px; } .sb-search-input { height: 45px; width: 60%; } .service-grids h2,.portfolio h3,#pricing > div > h3,.heading,.contact h2{ font-size: 1.3em; } .images_1_of_4 h3 a { font-size: 1.2em; } .images_1_of_4 img { padding: 28px; } .message h3,.message1 h3,.message2 h3,.message3 h3 { font-size: 2.5em; } .span1 i { padding: 10px 30px; } .span2 i { padding: 10px 30px; } .portfolio li a { font-size: 0.8755em; } .span_1_of_4 img { width:100%; margin-left: 0%; } .message1 p,.message2 p,.message3 p { font-size: 1.5em; } .client h3 i { margin: 0% 6% 0 6%; font-size: 1em; } .about h4 { font-size: 1.3em; } .about_1_of_4 h3 { font-size: 1em; } .pie-wrapper { height: 140px; width: 140px; } .pie-wrapper .label { font-size: 2em; left: 6%; top: 14%; width: 124px; } .pie-wrapper .pie .half-circle { height: 140px; width: 140px; } .form h3,.para-contact h4 { font-size: 1.2em; } .span4 i input[type=submit] { font-size: 1em; padding: 8px 18px; } .social h3 { font-size: 2.5em; } .social p { font-size: 1.5em; } .social-icons-set { width: 38%; } .social { padding: 9% 0; } #portfoliolist .portfolio { width: 22.3%; } .span3 j { font-size: 0.82355em; padding: 6px 12px; } .span3 k { font-size: 0.82355em; padding: 6px 12px; } .span3 l { font-size: 0.82355em; padding: 6px 12px; } .span3 m { font-size: 0.82355em; padding: 6px 12px; } } @media only screen and (max-width: 768px){ .wrap{ width: 95%; } .h_right { width: 100%; background: #313338; } .logo { padding-bottom: 0%; } .sb-search { top: 0px; } .span_1_of_4 img { width: 100%; margin-left: 4%; } .span_1_of_4 { width: 23%; } #portfoliolist .portfolio { width: 21.5%; } .grid-block { width: 163px; } .client h3 img { width: 34%; } .client h3 i { margin: 0% 4% 0 4%; } .img { margin: 4% 6% 0 13%; } .message2 { padding: 9% 0; } .form { width: 61%; } .para-contact { width: 35%; } .span_1_of_3 h5 { font-size: 1.1em; } .social-icons-set { width: 66%; } .social { padding: 6% 0; } .pie-wrapper { height: 100px; width: 100px; } .pie-wrapper .label { font-size: 2em; left: -10%; top: 0%; width: 124px; } .pie-wrapper .pie .half-circle { height: 100px; width: 100px; } .message { padding: 10% 0; } .sb-search-input { height: 45px; width: 100%; } .menu { display: none; } .nav { display: block; } } @media only screen and (max-width: 640px){ .wrap{ width:95%; } .span1 i { padding: 6px 10px; } .span2 i { padding: 6px 10px; } .message h3, .message1 h3, .message2 h3, .message3 h3 { font-size: 1.5em; } .grid-block { width: 284px; } .span_1_of_4 { width: 50%; } .span_1_of_4 img { margin-bottom: 4%; } .img { margin: 100% 100% 0 100%; } .message1 p, .message2 p, .message3 p { font-size: 1em; } .about_1_of_4 { margin: 0 auto; padding: 1%; } .grid_1_of_4{ margin: 0% 0 0% 0%; } .about_1_of_4 { margin: 0 auto; } #portfoliolist .portfolio { width: 20.7%; } #filters li span { font-size: 0.82355em; padding: 7px 10px; } } @media only screen and (max-width: 480px){ .wrap{ width:95%; } .images_1_of_4 { width: 45.6%; } #options li a { font-size: 0.82355em; padding: 6px 5px; } .service-grids h2, .content-middle h2 , #pricing > div > h3 { font-size: 1.1em; margin-bottom: 5%; } .images_1_of_4 h3 a { font-size: 1.1em; } .message h3, .message1 h3, .message2 h3, .message3 h3,.contact h2 { font-size: 1.2em; } .span1 i { padding: 6px 10px; font-size: 0.82355em; } .span2 i { padding: 6px 10px; font-size: 0.82355em; } .message { padding: 10% 0; } .portfolio li a { padding: 6px 7px; } .grid-block { width: 209px; } .grid_1_of_4{ margin: 2% 0 -1% 0%; } .about_1_of_4 { width: 49%; } .span_1_of_4 img { margin-left: 3%; } .img { margin: 4% 4% 0 6%; } .img1 { margin: 4% 6% 0 0; } .social h3 { font-size: 1.3em; } .social p { font-size: 1em; } .form { width: 100%; } .para-contact { margin: 5% 0; width: 100%; } .para-contact h4 { margin-bottom: 0%; padding-bottom: 3%; } .get-intouch-left-address p, .get-intouch-left-address p a { line-height: 1.5em; } .span4 i input[type=submit] { font-size: 0.82355em; padding: 6px 15px; } .social-icons-set { width: 84%; } .social { padding: 3% 0; } .span_1_of_3 { width: 100%; } .col_1_of_3 { margin: 1% 0 0% 0.6%; } .span_1_of_3 p { padding: 1% 0; } #about > div > div.client > div:nth-child(3) > h3,#about > div > div.client > div:nth-child(4) > h3,#about > div > div.client > div:nth-child(5) > h3,#about > div > div.client > div:nth-child(6) > h3,#about > div > div.client > div:nth-child(7) > h3 { font-size: 0.82355em; } #portfoliolist .portfolio { width: 44.2%; } .portfolio img, .portfolio1 img { margin-bottom: 12%; } } @media only screen and (max-width: 320px){ .wrap{ width:95%; } .message { padding: 8% 0; } .about_1_of_4 { width: 100%; } #about > div > div.section.group > div:nth-child(3) { margin-right: 0; float: right; } #filters li span { padding: 7px 1px; } .images_1_of_4 { width: 95%; } .span_1_of_4 { width: 100%; } .grid-block { width: 274px; } .caption { top: 38px; left: 37px; } .client h3 img { width: 23%; } .img { margin: 4% 4% 0 0%; } .img1 { margin: 4% 0% 0 0; } .cart1 { padding: 2% 31% 22%; } .message1 { padding: 10% 0; } .message2 { padding: 7% 0; } .social-icons-set { display: none; } .image { float: none; text-align: center; margin: 2%; } .copy-right { float: none; text-align: center; } #portfoliolist .portfolio { width: 46.2%; margin-right:11px; } .message3 { padding: 10% 0; } }

Olá pessoal sou novato em programação Web, estou desenvolvendo um site para a empresa mas estou com um problema, não consigo fazer com index se encaixe perfeitamente na tela, de todos os monitores. Gostaria de uma ajuda se possível ou de alguma outra ideia que possa me ajudar, grato desde já ! Segue site(estou testando numa hospedagem gratis): www.liderpro.besaba.com