/* 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,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:0px;padding:0px;} 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 */ nav.vertical ul li{ display:block;}/* vertical menu */ nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ img{max-width:100%;} body{ background: url(../images/box-bg.png); } /*end reset*/ /*============================= * start-wrap ============================*/ .wrap{ width:80%; margin:0 auto; } /*============================= * start-header ============================*/ .header{ background: url(../images/box1.png) repeat-x; } .header-top{ padding: 41px 0 30px 0; } s .logo{ float:left; margin-top: 0.8em; } .contact-info{ float:right; } .contact-info p{ font-family: 'PT Sans Narrow', sans-serif; font-size: 1.3em; font-weight: 400; color: #3B3B3B; text-transform: uppercase; } .contact-info p a{ color:#1b98b1; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } .contact-info p a:hover{ color:#3B3B3B; } .header-top-nav ul li{ display: inline-block; border-left: 1px solid rgba(85, 85, 85, 0.41); float: left; } .header-top-nav ul li a{ color: #FFF; font-family: 'PT Sans Narrow', sans-serif; font-size: 1.3em; font-weight: 400; text-transform: uppercase; display: block; padding: 11px 95.5px; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } .header-top-nav li.active> a, .header-top-nav li> a:hover { color: #ff9900; background: #454545; } .header-top-nav{ background: url(../images/top-nav-bg.png) repeat-x; } .phone:before{ content: url(../images/phone.png); vertical-align: middle; padding: 0px 5px 0px 0px; } .gpa:before{ content:url(../images/pointer.png); vertical-align: middle; padding: 0px 5px 0px 0px; } /*============================= * start-content ============================*/ .content-grid-pic{ float:left; width:25%; margin-top: 27px; } .content-grid-pic img{ display: block; border-radius: 50%; border: 5px solid #fff; box-shadow: 0px 0px 10px rgba(119, 119, 119, 0.25) } .content-grid-info{ float:right; width: 69.5%; } .content-grid-info h3{ font-family: 'PT Sans Narrow', sans-serif; font-size: 1.8em; font-weight: 400; color: #995c00; text-transform: uppercase; } .content-grid-info p{ font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-size: 0.875em; padding: 5px 0 5px 0; line-height: 1.5em; } .content-grid-info a{ font-family: 'PT Sans Narrow', sans-serif; font-size:1em; font-weight: 400; color: #3B3B3B; text-transform: uppercase; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } .content-grid-info a:hover{ color:#71D6EA; } .content-grid{ float:left; width:33.333%; } .content-grids{ padding: 3.5em 0 3.7em 0; background: url(../images/box.png); margin:0 0 40px 0px; } .start:before{ content: url(../images/quote-1.png); vertical-align: super; padding-right:5px; } .end:after{ content: url(../images/quote-2.png); vertical-align: super; padding-right:5px; } .quit p{ font-family: 'PT Sans Narrow', sans-serif; font-size: 2em; font-weight: 400; color: #3B3B3B; text-transform: uppercase; display: block; width: 60%; text-align: center; margin: 0.5em auto; } /*============================= * start-content-box ============================*/ .content-box-left{ float:left; width:70%; } .content-box-left-topgrid h3{ font-family: 'PT Sans Narrow', sans-serif; font-size: 1.8em; font-weight: 400; color: #995c00; text-transform: uppercase; border-bottom: 1px solid rgba(85, 85, 85, 0.1); padding: 0em 0 0.2em 0; margin: 0px 0px 0.5em 0; } .content-box-left-topgrid p{ font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-size: 0.875em; padding: 5px 0 5px 0; line-height: 1.5em; } .content-box-left-topgrid span{ font-family: 'PT Sans Narrow', sans-serif; font-size: 1.8em; font-weight: 400; color: #3B3B3B; text-transform: uppercase; border-top: 1px solid rgba(85, 85, 85, 0.1); border-bottom: 1px solid rgba(85, 85, 85, 0.1); padding: 1em 0; display: block; width: 80%; text-align: center; margin: 0.5em 0; } .content-box-right{ float:right; width:27%; } .content-box-left-bootomgrid{ width:31.33%; float:left; margin-right:3%; } .content-box-left-bootomgrid h3{ font-family: 'PT Sans Narrow', sans-serif; font-size: 1.3em; font-weight: 400; color: #3B3B3B; text-transform: uppercase; } .content-box-left-bootomgrid p{ font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-size: 0.875em; padding: 0.5em 0; line-height: 1.8em; } .content-box-left-bootomgrid img{ background:#FFF; padding:5px; display:block; width: 93%; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } .content-box-left-bootomgrid:hover img{ background:#71D6EA; } .content-box-left-bootomgrids { padding: 0.5em 0 2em 0; } .lastgrid{ margin:0; } .content-box-right-topgrid h3{ font-family: 'PT Sans Narrow', sans-serif; font-size: 1.8em; font-weight: 400; color: #cc0000; text-transform: uppercase; border-bottom: 1px solid rgba(85, 85, 85, 0.1); padding: 0em 0 5px 0; display: block; margin: 0 0 0.6em 0; } .content-box-right-topgrid h4{ font-family: 'PT Sans Narrow', sans-serif; font-size: 1.3em; font-weight: 400; color: #3B3B3B; text-transform: uppercase; padding: 0.5em 0 0.0em 0; } .content-box-right-topgrid p{ font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-size: 0.875em; padding: 0.5em 0; line-height: 1.5em; } .content-box-right-topgrid a{ font-family: 'PT Sans Narrow', sans-serif; font-size: 1em; font-weight: 400; color: #3B3B3B; text-transform: uppercase; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } .content-box-right-topgrid a:hover{ color:#71D6EA; } .content-box-right-bottomgrid h3{ font-family: 'PT Sans Narrow', sans-serif; font-size: 1.8em; font-weight: 400; color: #71D6EA; text-transform: uppercase; border-bottom: 1px solid rgba(85, 85, 85, 0.1); padding: 1em 0 5px 0; display: block; margin: 0 0 0.6em 0; } .content-box-right-bottomgrid ul li{ display:block; } .content-box-right-bottomgrid ul li a{ font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-size: 0.875em; padding: 0.5em 0; display: inline-block; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } .content-box-right-bottomgrid ul li:before{ content:url(../images/list.png); padding-right:5px; } .content-box-right-bottomgrid ul li a:hover{ color:#71D6EA; } /*-----boxs-----*/ .boxs { background: url(../images/box.png); padding: 1.5em 0 1em 0; margin: 40px 0px 0 0; } .box{ width: 29.33%; float: left; } .box h3{ font-family: 'PT Sans Narrow', sans-serif; font-size: 30px; font-weight: 400; line-height: 2em; margin: 0; text-transform: uppercase; color: #454545; } .box span{ display: block; color: #71D6EA; font-size: 0.875em; font-weight: bold; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .box span:hover,.box p a:hover{ color:#454545; } .box p { font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-size: 0.875em; padding: 5px 0 24px 0; line-height: 1.8em; width: 89%; } .box p a{ font-weight:bold; color: #71D6EA; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; font-family: 'PT Sans Narrow', sans-serif; } .center-box{ border-right: 1px dashed silver; border-left: 1px dashed silver; padding: 0px 40px; margin-right: 40px; } .center-box ul li{ display: block; padding: 0px 0px 10px 0px; } .center-box ul li a{ font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; line-height: 22px; text-transform: uppercase; color: #454545; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; font-family: 'PT Sans Narrow', sans-serif; } .center-box ul li a:hover{ color:#71D6EA; } .center-box ul li:before{ content:url(../images/marker.png); padding: 10px; } .center-box ul{ margin-top:30px; } /*---start-copy-tight-----*/ .copy-tight{ text-align: center; padding: 0px 0px 0.6em 0; } .copy-tight p{ font-family: 'PT Sans Narrow', sans-serif; font-size: 1.3em; font-weight: 400; color: #3B3B3B; text-transform: uppercase; } .copy-tight a{ color: #b36b00; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .copy-tight a:hover{ color: #3B3B3B; } /*---start-about----*/ /*----start-about-----*/ .about-grid{ width: 31.33%; float: left; } .about-grid h3{ font-family: 'PT Sans Narrow', sans-serif; font-size: 30px; font-weight: 400; line-height: 2em; margin: 0; text-transform: uppercase; color: #454545; } .about-grid span{ font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-size: 0.875em; padding: 5px 0 1px 0; line-height: 1.5em; font-weight: bold; display: block; } .about-grid p{ font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-size: 0.875em; padding: 5px 0 10px 0; line-height: 1.8em; } .center-grid1 p{ padding:0px 0px 10px 0px; } .center-grid1 label{ font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; line-height: 22px; text-transform: uppercase; color: #71D6EA; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; font-family: 'PT Sans Narrow', sans-serif; cursor:pointer; } .center-grid1{ margin:0 3%; } .center-grid1 label:hover { color: #454545; } .about-team-left{ float:left; width:25%; } .about-team-right{ float:right; width: 73%; } .about-team-right p{ font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-size: 0.875em; padding: 0px 0 10px 0; line-height: 1.8em; } .client { padding-bottom: 10px; } .about-grids { padding: 10px 0px 0px 0px; } .about-team-left img { -webkit-filter: grayscale(100%); opacity: 5; transition: all 300ms!important; -webkit-transition: all 300ms!important; -moz-transition: all 300ms!important; } .about-team-left img:hover { opacity: 1; -webkit-filter: grayscale(0%); cursor: pointer; } .button1 { font-family: 'PT Sans Narrow', sans-serif; font-size: 20px; font-weight: 400; line-height: 1.2em; text-decoration: none; text-transform: uppercase; margin-right: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-align: center; margin: 0 auto; color: #71D6EA; padding: 12px 0px; } /*---services----*/ .service-content h3{ font-family: 'PT Sans Narrow', sans-serif; font-size: 30px; font-weight: 400; line-height: 2em; margin: 0; text-transform: uppercase; color: #454545; } .service-content ul li{ display: block; } .service-content ul li span{ width: 5%; float: left; font-size: 3em; color: #454545; font-family: 'PT Sans Narrow', sans-serif; } .service-content ul li p{ font-family: Arial, Helvetica, sans-serif; color: #6a6a6a; font-size: 0.875em; padding: 5px 0 10px 0; line-height: 1.8em; } .service-content ul li p a{ font-size: 1.2em; color: #454545; font-family: 'PT Sans Narrow', sans-serif; display: block; } .service-content{ float:left; width: 74.5%; } .service-content ul{ padding-bottom:5px; } .services-sidebar{ float:right; width:23%; } .services-sidebar h3{ font-family: 'PT Sans Narrow', sans-serif; font-size: 30px; font-weight: 400; line-height: 2em; margin: 0; text-transform: uppercase; color: #454545; } .services-sidebar ul li a{ display: block; font-family: 'PT Sans Narrow', sans-serif; font-size: 1em; color: #454545; padding: 2px 0px 5px 0px; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } .services-sidebar ul li a:hover{ color: #71D6EA; } .services-sidebar ul li { border-bottom: 1px dashed rgba(192, 192, 192, 0.33); background: url(../images/marker.png) 0 15px no-repeat; padding: 9px 13px 8px 23px; } .services { padding-top: 10px; } /*---start-gallery---*/ .gallerys { padding-top: 10px; } .gallerys h3{ font-family: 'PT Sans Narrow', sans-serif; font-size: 30px; font-weight: 400; line-height: 2em; margin: 0; text-transform: uppercase; color: #454545; } .gallery-grid{ width: 31.44%; float:left; } .gallery-grid p { font-size: 0.875em; padding: 0.2em 0em 1.2em 0em; color: #6a6a6a; line-height: 1.8em; font-family: Arial, Helvetica, sans-serif; } .gallery-button a { font-family: 'PT Sans Narrow', sans-serif; font-size: 20px; font-weight: 400; line-height: 1.2em; text-decoration: none; text-transform: uppercase; margin-right: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-align: center; margin: 0 auto; color: #71D6EA; padding: 12px 0px; } .gallery-button a:hover { color:#454545; } .grid2{ margin: 0px 20px; } .gallery-grids { margin-bottom: 30px; } .projects-bottom-paination ul li{ display:inline-block; } .projects-bottom-paination{ text-align: center; padding-top: 55px; } .projects-bottom-paination li a{ font: 400 12px/1.2em Arial; color: #5a5a5a; padding: 11px 18px; background: #fff; text-decoration: none; text-shadow: none; border: 1px solid #e9e9e9; margin-top: 16px; } .projects-bottom-paination li.active> a, .projects-bottom-paination li> a:hover { background: #71D6EA; color:#fff; } .gallery-grid h4{ font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; line-height: 22px; text-transform: uppercase; color: #454545; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; font-family: 'PT Sans Narrow', sans-serif; cursor: pointer; padding: 13px 0px 2px 0px; } .gallery-grid h4:hover{ color:#71D6EA; } /*---contect----*/ /* Contact Form ============================================================================= */ .section { clear: both; padding: 0px; margin: 0px; } .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; } .col{ display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child{ margin-left:0; } .span_2_of_3 { width: 63.1%; padding:1.5%; } .span_1_of_3 { width: 29.2%; padding:1.5%; } .span_2_of_3 h3, .span_1_of_3 h3 { font-family: 'PT Sans Narrow', sans-serif; font-size: 30px; font-weight: 400; line-height: 2em; margin: 0; text-transform: uppercase; color: #454545; } .contact-form{ position:relative; padding-bottom:30px; } .contact-form div{ padding:5px 0; } .contact-form span{ display:block; font-size:1em; color: #454545; padding-bottom:5px; font-family: 'PT Sans Narrow', sans-serif; } .contact-form input[type="text"],.contact-form textarea{ padding:8px; display:block; width:98%; border: none; outline:none; color:#464646; font-size:0.8125em; font-family:Arial, Helvetica, sans-serif; border: 1px solid rgba(192, 192, 192, 0.41); -webkit-appearance:none; } .contact-form textarea{ resize:none; height:120px; } .contact-form input[type="submit"]{ font-family: 'PT Sans Narrow', sans-serif; font-size: 20px; font-weight: 400; line-height: 1.2em; text-decoration: none; text-transform: uppercase; margin-right: 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-align: center; margin: 0 auto; color: #71D6EA; border:none; outline: none; background:none; cursor:pointer; } .contact-form input[type="submit"]:hover{ color: #454545; } .contact-form input[type="submit"]:active{ color: #454545; } .company_address{ } .company_address p{ font-size: 0.875em; color: #6a6a6a; line-height: 1.8em; font-family: Arial, Helvetica, sans-serif; } .company_address p span{ text-decoration:underline; color:#454545; cursor:pointer; } .map{ margin-bottom:15px; } /***** Media Quries *****/ @media only screen and (max-width: 1024px) { .wrap{ width:95%; } } /* GO FULL WIDTH AT LESS THAN 800 PIXELS */ @media only screen and (max-width: 800px) { .wrap{ width:95%; } .span_2_of_3 { width:94%; padding:3%; } .col{ margin: 1% 0 1% 0%; } .span_1_of_3 { width:94%; padding:3%; } } /* GO FULL WIDTH AT LESS THAN 640 PIXELS */ @media only screen and (max-width: 640px) and (min-width: 480px) { .wrap{ width:95%; } .span_2_of_3 { width:94%; padding:3%; } .col{ margin: 1% 0 1% 0%; } .span_1_of_3 { width:94%; padding:3%; } .contact-form input[type="text"],.contact-form textarea{ width:97%; } } /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ @media only screen and (max-width: 480px) { .wrap{ width:95%; } .span_2_of_3 { width:90%; padding:5%; } .col { margin: 1% 0 1% 0%; } .span_1_of_3 { width:90%; padding:5%; } .contact-form input[type="text"],.contact-form textarea{ width:92%; } } .contact-footer{ border-top: 1px solid rgba(69, 69, 69, 0.13); padding: 28px 0px 0px 0px; } /*----responsive-design-----*/ @media only screen and (max-width: 1366px) and (min-width: 1280px) { .wrap{ width:90%; } .header-top-nav ul li a { padding: 11px 89px; } .quit p { width: 70%; } .center-box ul li a { font-size: 17px; } .gallery-grid { width: 31.3%; } } @media only screen and (max-width: 1280px) and (min-width: 1024px) { .wrap{ width:90%; } .header-top-nav ul li a { padding: 11px 81px; } .quit p { width: 70%; } .center-box ul li a { font-size: 16px; } .gallery-grid { width: 31.2%; } .boxs { padding: 0.5em 0 0.6em 0; } } @media only screen and (max-width: 1024px) and (min-width: 768px) { .wrap{ width:90%; } .header-top-nav ul li a { padding: 11px 58.5px; } .quit p { width: 70%; } .center-box ul li a { font-size: 16px; } .gallery-grid { width: 30%; } .boxs { padding: 0.5em 0 0em 0; } .quit p { font-size: 1.5em; } .content-grids { padding: 1.5em 0 0.7em 0; } .content-grid-info h3 { font-size: 1.4em; } .content-box-left-topgrid span { font-size: 1.4em; } .box { width:28%; } .box h3 { line-height: 1.2em; padding-bottom:0.2em; } .center-box { margin-right: 40px; } .center-box ul li:nth-child(1){ display:none; } .content-box-left-topgrid p:nth-child(3){ display:none; } .gallery-grid p { padding: 0.2em 0em 0.5em 0em; } .service-content ul li span { height: 81px; } } @media only screen and (max-width: 768px) and (min-width: 640px) { .wrap{ width:90%; } .header-top-nav ul li a { padding: 11px 36px; } .quit p { width: 80%; } .content-grid-info { width: 67.5%; } .center-box ul li a { font-size: 16px; } .gallery-grid { width: 29%; } .quit p { font-size: 1.5em; } .content-grids { padding: 1.5em 0 0.7em 0; } .content-grid-info h3 { font-size: 1.4em; } .content-box-left-topgrid span { font-size: 1.4em; } .box { width:28%; } .box h3 { line-height: 1.2em; padding-bottom:0.2em; } .center-box { margin-right: 40px; } .center-box ul li:nth-child(1){ display:none; } .content-box-left-topgrid p:nth-child(3){ display:none; } .gallery-grid p { padding: 0.2em 0em 0.5em 0em; } .service-content ul li span { height: 81px; } .boxs{ display:none; } .content-box-left-bootomgrid h3 { font-size: 1.1em; } .content-box-right-bottomgrid ul li a { font-size: 0.8em; } .content-box-right-topgrid h3 { font-size: 1.4em; } .content-box-right-bottomgrid h3 { font-size: 1.4em; } .content-box-left-topgrid span { width: 96%; } .content-box-left-topgrid h3 { font-size: 1.4em; } .about-grid { width: 100%; float:none; } .center-grid1 { margin: 0; } .about-team-right { width: 82%; } .about-team-left { width: 17%; } .service-content ul li span { width: 8%; } .projects-bottom-paination { padding:30px 0; } }