/* Author: W3layout Author URL: http://w3layouts.com License: Creative Commons Attribution 3.0 Unported License URL: http://creativecommons.org/licenses/by/3.0/ */ /* 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*/ body { font-family:trebuchet ms, arial, sans-serif; font-size: 100%; background: #ffffff; color:#555555; } .wrap{ margin:0 auto; width:80%; } .wrapper{ padding: 4% 6%; } /* start header*/ .header{ display: block; } .logo{ width:35%; float:left; } .logbtn { display:none; } blink { animation: blinker 0.6s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } .blink-one { animation: blinker-one 1s linear infinite; } @keyframes blinker-one { 0% { opacity: 0; } } .blink-two { animation: blinker-two 1.4s linear infinite; } @keyframes blinker-two { 100% { opacity: 0; } } /*menu*/ .cssmenu { float: right; margin-top: 1%; } .cssmenu > ul > li { display:inline-block; position: relative; } .cssmenu > ul > li.active a{ color:#ffffff; background-color:#00ced1 ; } .cssmenu > ul > li span img { vertical-align: middle; } .cssmenu > ul > li > a { font-weight:bold; color: #555555; display: block; font-size: 15px; line-height: 1.2em; padding: 10px 10px; text-transform: uppercase; -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; } .cssmenu > ul > li > a:hover { background-color:#00ced1 ; color: #ffffff; } .footer-sub input[type="text"]:hover{ border:1px solid #999; } /*--- superfish dropdown menu begin ---*/ .sf-menu {margin:0; padding:0; list-style: none; z-index:90000; position:relative } .sf-menu li{ margin:0; display:inline; position:relative; float:left} .sf-menu li a{ font-weight:bold; display: block; font-size: 15px; line-height: 1.8em; text-transform: uppercase; color: #555555; text-decoration:none; display:block; float:left; line-height:30px; font-size:12px; text-transform:uppercase; width:145px; text-align:center; background:#ffffff; -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; } .sf-menu li a:hover {color:#FFFFFF; text-decoration:none; background:#00ced1 } .sf-menu li a.current{ color:#fff; text-decoration:none; background:url(../images/bg_menu.gif)} .sf-menu ul { position:absolute; top:-999em; width:10em; line-height:1.0; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left:0; top:30px; z-index:99; -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; } /* badge*/.badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: bold; line-height: 1; color: #ffffff; text-align: center; white-space: nowrap; vertical-align: baseline; background-color: #00ced1 ; border-radius: 10px; } .badge:empty { display: none; } /* display with 840px */ .top-nav{ display: none; } .nav_bg{ background: #464646; } .clearfix { height: 40px; width: 100%; font-size: 11pt; font-weight: bold; position: relative; z-index: 9999; } .clearfix ul { padding: 0; margin: 0 auto; display: none; background: #f0f0f0; } .clearfix li { display: block; } .clearfix a { color: #555555; font-size:15px; font-weight:bold; text-transform:uppercase; display: block; width:100%; text-indent: 10px; text-align: left; text-decoration: none; line-height: 40px; -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; } .clearfix li a { border-bottom: 1px solid rgba(90, 85, 73, 0.17); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .clearfix li:last-child a { border-right: 0; } .clearfix a:hover,.clearfix a:active { background: #424242; color:#ffffff; } .clearfix a#pull { font-size: 20px; display: block; width: 100%; position: relative; text-shadow: 0 1px 0 #181717; color: #FFFFFF; background-color: #00ced1 ; } .clearfix a#pull:after { background:url('../images/nav-icon.png')no-repeat; width: 30px; content:""; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; } /* start banner */ .banner{ text-align:center; padding: 4% 0; } .banner h2{ font-family: 'Pontano Sans', sans-serif; line-height: 1.5em; font-size: 3em; color: #666666; text-shadow: 0px 1px 0px #ffffff; } .banner h3{ font-family: 'Shadows Into Light', cursive; line-height: 1.8em; font-size: 2em; color: #00ced1 ; text-shadow: 0px 1px 0px #ffffff; } /* start main */ .main{ display: block; } .content h2{ font-weight:700; line-height: 1.5em; font-size: 1.5em; color: #555555; text-transform: uppercase; padding: 10px 0; border-bottom: 1px solid rgb(209, 209, 209); } /* grids of four */ .grid_1_of_4{ display: block; float:left; margin: 4% 0 4% 4%; } .grid_1_of_4:first-child { margin-left: 0; } .images_1_of_4 { width: 21.99999%; } .images_1_of_4 img{ max-width:100%; display:block; } .images_1_of_4 h3 a{ display:block; margin-top:8%; line-height: 1.5em; font-size: 1.2em; color: #666666; -webkit-text-stroke: 0.2px; font-family: 'Open Sans', sans-serif; -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; } .images_1_of_4 h3 a:hover{ color: #00ced1 ; } h3 a{ display:block; margin-top:8%; line-height: 1.1em; font-size: 1.2em; color: #666666; -webkit-text-stroke: 0.2px; font-family: 'Open Sans', sans-serif; -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; } h3 a.aedit{ display:block; margin-top:8%; line-height: 1.1em; font-size: 1.2em; color: #00ced1; -webkit-text-stroke: 0.2px; font-family: 'Open Sans', sans-serif; -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; } h3 a:hover{ color: #40E0D0 ; } h2 a{ color: #00ced1 ; } h2 a:hover{ color: #40E0D0 ; } h4 a{ font-style: italic; line-height: 1.5em; font-size: 0.8725em; color: #00ced1 ; -webkit-text-stroke: 0.25px; text-transform:capitalize; -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; } h4 a:hover{ color: #555555; } .span_1_of_2{ float:right; } .span_1_of_2 a,.span_1_of_3 a{ margin-top:4%; text-transform:capitalize; font-size: 1em; color:#ffffff; -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; } .span_1_of_2 a:hover,.span_1_of_3 a:hover{ color: #999999; } .images_1_of_4 h4 a{ font-style: italic; line-height: 1.5em; font-size: 0.8725em; color: #00ced1 ; -webkit-text-stroke: 0.25px; text-transform:capitalize; -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; } .images_1_of_4 h4 a:hover{ color: #555555; } /* grids of three */ .grid_1_of_3{ display: block; float:left; margin: 3% 0 0 3%; } .grid_1_of_3:first-child { margin-left: 0; } .images_1_of_3 { width: 31.33333%; } .images_1_of_3 h3.tools_icon{ background: url('../images/tools_icon.png') no-repeat 0px 4px; padding-left: 30px; } .images_1_of_3 h3.wordpress_icon{ background: url('../images/wordpress_icon.png') no-repeat 0px 4px; padding-left: 30px; } .images_1_of_3 h3.facebook_icon{ background: url('../images/facebook_icon.png') no-repeat 0px 4px; padding-left: 30px; } .images_1_of_3 h3.user_icon{ background: url('../images/user_icon.png') no-repeat 0px 4px; padding-left: 30px; } .images_1_of_3 h3.gallery_icon{ background: url('../images/gallery_icon.png') no-repeat 0px 4px; padding-left: 30px; } .images_1_of_3 h3.cog_icon{ background: url('../images/cog_icon.png') no-repeat 0px 4px; padding-left: 30px; } .images_1_of_3 h3{ line-height: 1.5em; font-size: 1.2em; color: #666666; -webkit-text-stroke: 0.2px; font-family: 'Open Sans', sans-serif; } .images_1_of_3 p{ margin-top:4%; font-size: 1em; color:#777777; line-height: 1.8em; font-family: 'Open Sans', sans-serif; } .images_1_of_3 p span{ text-transform:uppercase; } /* start footer */ .footer_bg{ font-family: 'Open Sans', sans-serif; background: #555555 /*url('../images/footer_top.png') repeat-x; */ } .span_1_of_3{ display: block; float:left; margin-left: 4%; } .span_1_of_3:first-child{ margin-left: 0; } .span_1_of_3 { width: 30.33333%; } .span_1_of_3 h3{ font-family:trebuchet ms, arial, sans-serif; font-size: 1.2em; color: #00ced1 ; text-transform: uppercase; text-shadow: 0px 1px 0px rgb(14, 14, 14); -webkit-text-stroke: 0.5px; } .footer_grid{ margin-top: 4%; } .foot_img{ float: left; width:7.33333%; margin-right: 3.333333%; } .foot_text{ float: left; width: 89.33333%; } .foot_img img{ margin-top: 5px; } .foot_text p{ font-size: 1em; color:#ffffff; line-height: 1.5em; } .foot_text p b{ -webkit-text-stroke: 0.2px; letter-spacing: 1px; } .foot_text h4{ font-size: 0.8725em; color:#cccccc; } .span_1_of_3 a h4.mail{ background: url('../images/mail.png') no-repeat 0px 0px; padding-left: 36px; } .span_1_of_3 a h4{ margin-top:4%; text-transform:lowercase; font-size: 1em; color:#ffffff; -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; } .span_1_of_3 a h4.mail:hover{ background: url('../images/mail_h.png') no-repeat 0px 0px; } .span_1_of_3 a h4:hover{ color: #999999; } .span_1_of_3 a h5{ margin-top:4%; text-transform:capitalize; font-size: 1em; color:#ffffff; -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; } .span_1_of_3 a h5.fountain{ background: url('../images/fountain.png') no-repeat 0px 0px; padding-left: 36px; } .span_1_of_3 a h5.fountain:hover{ background: url('../images/fountain_h.png') no-repeat 0px 0px; } .span_1_of_3 a h5:hover{ color: #999999; } h5.call{ background: url('../images/call_h.png') no-repeat 0px 0px; padding-left: 36px; } h5.mail{ background: url('../images/mail_h.png') no-repeat 0px 0px; padding-left: 36px; } h5.home{ background: url('../images/home_h.png') no-repeat 0px 0px; padding-left: 36px; word-wrap: break-word; } h5 a{ margin-top:4%; //text-transform:capitalize; font-size: 1em; color:#555555; -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; } h5 a:hover{ color: #00ced1; } .foot_nav{ margin-top: 8%; } .foot_nav ul li{ float:left; margin-right: 2%; } .foot_nav ul li a{ display: block; } .foot_nav ul li a img:hover{ zoom: 1; filter: alpha(opacity=50); opacity: 0.7; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } /* start footer copy */ .copy{ font-family: 'Open Sans', sans-serif; } .copy p{ text-transform: capitalize; font-size: 0.8725em; color: #555555; line-height: 1.8em; } .copy p a{ color: #00ced1 ; -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 p a:hover{ color: #555555; } /* start portfolio */ .main1{ margin: 4% 0 0; } p.para { margin: 4% 0; font-size: 1em; color: #777777; line-height: 1.8em; font-family: 'Open Sans', sans-serif; } /* start about */ .about_img{ float: left; width: 24.33333%; margin-right: 3.3333%; } .about_img img{ margin-top: 4%; } .about_para{ float: left; width: 72.33333%; } p.para2{ font-size: 1em; color: #777777; line-height: 1.8em; font-family: 'Open Sans', sans-serif; } /* start blog */ .blog_list{ margin-top: 2%; } .blog_list h4 a{ text-transform:capitalize; line-height: 1.5em; font-size: 1.4em; color: #666666; -webkit-text-stroke: 0.2px; font-family: 'Open Sans', sans-serif; -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; } .blog_list h4 a:hover{ color: #00ced1 ; } .blog_list h5{ margin-top: 1%; text-transform:capitalize; line-height: 1.5em; font-size:1em; color: #666666; -webkit-text-stroke: 0.2px; font-family: 'Open Sans', sans-serif; } .blog_list h5 a{ color: #00ced1 ; -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; } .blog_list h5 a:hover{ color: #666666; } .small { margin-top: 1%; text-transform:capitalize; line-height: 1.5em; font-size:1em; color: #666666; -webkit-text-stroke: 0.2px; font-family: 'Open Sans', sans-serif; } .small a{ color: #00ced1; -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; } .small a:hover{ color: #666666; } .blog_para{ padding: 0 2% 0 0%; margin: 2% 0; background-color:#f8f8f8; } .mid-grids-right{ padding:1px 0 1px 5px; } .blog_para p a{ float: left; margin-right: 4%; } .blog_para p a .cusdeal_img{ width:100% } .btn{ color: #ffffff; background: #00ced1 ; display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight:bold; line-height: 1.5em; padding: 12px 24px; text-transform: uppercase; border: none; outline: none; -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; } .btn:hover{ background: #40E0D0; color: #ffffff; } p.para1 { margin: 2% 0; font-size: 1em; color: #777777; line-height: 1.8em; font-family: 'Open Sans', sans-serif; } p.para1 a{ margin-bottom: -7px; } .paraedit p.para ul { list-style: initial; padding-left: 8%; margin: initial; line-height:1.8em; } .paraedit ul{list-style: initial; !important} .paraedit ul{padding-left: 8%; !important} .paraedit ul{margin: initial; !important} .paraedit ul{line-height:1.8em; !important} .paraedit ul{color: #777777; !important} .paraedit p.para li { padding: initial; margin: initial; } .paraedit p.para{ font-size: 1em; color: #777777; line-height: 1.8em; font-family: 'Open Sans', sans-serif; list-style: initial; } .blog_para p a img{ } /***Contact*/ .map{ margin: 4% 0 2%; } form{ margin-top: 2%; } .col{ display: block; } .contact-form{ position:relative; padding-bottom:30px; } .contact-form div{ padding:5px 0; } .contact-form span label{ font-family: 'Open Sans', sans-serif; color: #666666; display: block; font-size: 0.8725em; padding-bottom: 5px; } .contact-form input[type="text"], .contact-form textarea { font-family: 'Open Sans', sans-serif; background: #FFFFFF; border: 1px solid #E7E7E7; color: rgba(85, 81, 81, 0.84); padding: 8px; display: block; width: 98%; outline: none; -webkit-appearance: none; text-transform: none; } .contact-form select { font-family: 'Open Sans', sans-serif; background: #FFFFFF; border: 1px solid #E7E7E7; color: rgba(85, 81, 81, 0.84); padding: 8px; display: block; width: 98%; outline: none; text-transform: capitalize; margin-top:10px; } .contact-form input[type="password"] { font-family: 'Open Sans', sans-serif; background: #FFFFFF ; border: 1px solid #E7E7E7; color: rgba(85, 81, 81, 0.84); padding: 8px; display: block; width: 98%; outline: none; -webkit-appearance: none; text-transform: none; } .contact-form textarea{ resize:none; height:120px; } .contact-form input[type="submit"]{ cursor:pointer; -webkit-appearance: none; color: #ffffff; background: #00ced1 ; display: inline-block; font-family: 'Open Sans', sans-serif; font-weight:bold; font-size: 15px; line-height: 1.5em; padding: 12px 24px; text-transform: uppercase; border: none; outline: none; -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; } .contact-form input[type="submit"]:hover{ background: #40E0D0; font-weight:bold; } .rrr { width:270px; float:right; margin-bottom:15px; } .rrr p{color:#00ced1} .ddd{ float:left; height:60px; } .cat_img{ height:130px; } #monexpire, #yearexpire { width:20%; } .imglist { width:270px; } .mid-grids-right-list { padding-bottom:5px; } #mainslide { width:100%; height:100%; margin-left:0%; margin-top:-70px; } #tableedge { width:19%; } #shoptag { margin-top:-17%; } #gridtag { height:0px; } .smile { width:50% } .module { top:0px; } .ordernow { width:25%; } #header-branch { margin-top:-30px; } #Afl1{ width:50%; } #Afl1 span{ text-align:left; } #Afl1 span h5{ margin-left:20px } #Afl2{ width:50%; text-align:right; } /***** Media Quries *****/ @media only screen and (max-width: 1280px) { .wrap{ width:95%; } #mainslide { width:100%; height:100%; margin-left:0%; } #hvc_history{ display:block; } #vvc_history{ display:none; } #hvc_orderlist{ display:block; } #vvc_orderlist{ display:none; } } @media only screen and (max-width: 1024px) { .wrap{ width:95%; } .wrapper { padding: 2% 4%; } .logo{ width: 30%; float:left; } .cssmenu > ul > li > a { font-size: 15px; line-height: 1.5em; padding: 16px 14px; } .rrr { float:left; width:100%; padding-left:20%; padding-right:20%; } .ddd { width:100%; } .ddd .read_more a { width:49%; } .footer { padding-top:4%; } p.para1 a { margin-bottom: 0px; } #mainslide { width:100%; height:100%; margin-left:0%; } #shoptag { top:0px; } #gridtag { height:0px; } .module { top:0px; } .ordernow { width:25%; } } @media only screen and (max-width: 800px) { .wrap{ width:95%; } .logo{ text-align:center; float:none; width:100%; margin-bottom: 4%; } .cssmenu { display: none; } .sf-menu { display: none; } .top-nav{ display:block; } .foot_nav ul li { margin-right: 0%; } .grid_1_of_4:nth-child(3){ margin-left: 0; } .grid_1_of_4 { display: block; float: left; margin: 4% 0 0 4%; } .images_1_of_4 { width: 47.99999%; } .footer { padding-top:4%; } p.para1 a { margin-bottom: 0px; } .logbtn { display:inline; } .rrr { float:left; width:100%; padding-left:20%; padding-right:20%; } .ddd { width:100%; } .ddd .read_more a { width:49%; } .cat_img{ height:100px; } #mainslide { width:100%; height:100%; margin-left:0%; margin-top:-70px; } #gridtag { height:0px; } #shoptag { top:0px; } .module { top:0px; } #header-branch { margin-top:-90px; } #Afl1{ width:100%; } #Afl1 span{ text-align:center; } #Afl1 span h5{ margin-left:0px } #Afl2{ width:100%; text-align:center; } } @media only screen and (max-width: 640px){ .wrap{ width:95%; } .grid_1_of_4:nth-child(3){ margin-left: 0; } .grid_1_of_4 { display: block; float: left; margin: 4% 0 0 4%; } .images_1_of_4 { width: 47.99999%; } .grid_1_of_3 { float: none; margin: 3% 0; } .images_1_of_3 { width: 99.33333%; } .span_1_of_3 { float: none; margin: 3% 0; } .span_1_of_3 { margin-top: 4%; width: 99.33333%; } .footer_grid { margin-top: 2%; } .foot_nav { margin-top: 2%; } .span_1_of_3 a h4 { margin-top: 2%; } .footer { padding-top:4%; } .logbtn { display:inline; } .blog_para p a{ margin-right: 4%; margin-left:5px; } p.para1 a { margin-bottom: 0px; } .imglist { width:100%; } .mid-grids-right-list { padding:20px; } .btnlist .btn { width:100%; } .cusdeal_img{ height:100%; width:100%; } .cat_img{ height:80px; } #mainslide { width:200%; height:200%; margin-left:-50%; } #gridtag { height:0px; } .smile { width:80%; } #shoptag { top:0px; } } @media only screen and (max-width: 480px) { .wrap{ width:95%; } .span_1_of_3 { margin-top: 4%; } .span_1_of_3 a h4 { margin-top: 0%; } .grid_1_of_4:nth-child(2){ margin-left: 0; } .grid_1_of_4:nth-child(3){ margin-left: 0; } .grid_1_of_4:nth-child(4){ margin-left: 0; } .grid_1_of_4 { display: block; float: left; margin: 4% 0 0 4%; } .images_1_of_4 { width: 99.33333%; } .rrr { float:left; width:100%; padding-left:10%; padding-right:10%; } .ddd { width:100%; } .ddd .read_more a { width:49%; } .footer { padding-top:4%; } .logbtn { display:inline; } #monexpire, #yearexpire { width:50%; } .blog_para p a{ margin-right: 0%; margin-left:5px; } p.para1 a { margin-bottom: 0px; } .cusdeal_img{ height:100%; width:100%; } .cat_img{ height:60px; } #mainslide { width:200%; height:200%; margin-left:-50%; } #tableedge { width:1%; } #shoptag { top:0px; } #gridtag { height:0px; } .ordernow { width:18%; } } @media only screen and (max-width: 380px) { #gridtag { height:0px; } } @media only screen and (max-width: 320px) { .wrap{ width:95%; } .banner h2 { font-size: 2em; } .content h2 { font-size: 1.4em; } .rrr { float:left; width:100%; padding-left:10%; padding-right:10%; } .ddd { width:100%; } .ddd .read_more a { width:49%; } .cat_img{ height:50px; } .footer { padding-top:4%; } .logbtn { display:inline; } #monexpire, #yearexpire { width:50%; } .blog_para p a{ margin-right: 0%; margin-left:5px; } p.para1 a { margin-bottom: 0px; } .cusdeal_img{ width:100%; height:100%; } #mainslide { width:200%; height:200%; margin-left:-50%; margin-top:-90px; } #tableedge { width:1%; } #gridtag { height:0px; } .ordernow { width:20%; } }