Line 1: | Line 1: | ||
− | + | /* | |
+ | 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: 'Source Sans Pro', sans-serif; | ||
+ | font-size: 100%; | ||
+ | background: #ffffff; | ||
+ | } | ||
+ | .wrap{ | ||
+ | margin:0 auto; | ||
+ | width:80%; | ||
+ | } | ||
+ | /* start header */ | ||
+ | .header_bg{ | ||
+ | background: #000000; | ||
+ | } | ||
+ | .header{ | ||
+ | padding: 2%; | ||
+ | } | ||
+ | .logo{ | ||
+ | float: left; | ||
+ | } | ||
+ | /* start h_menu */ | ||
+ | .header_bottom_right{ | ||
+ | float:right; | ||
+ | } | ||
+ | .h_menu4 { | ||
+ | float: right; | ||
+ | margin-top: 4px; | ||
+ | } | ||
+ | .toggleMenu { | ||
+ | display: none; | ||
+ | background:#ff530d; | ||
+ | width: 100%; | ||
+ | color: #FFF; | ||
+ | font-size: 1.5em; | ||
+ | } | ||
− | + | .nav { | |
− | + | list-style: none; | |
− | + | margin-top: 0.5em; | |
+ | } | ||
+ | .nav:before, | ||
+ | .nav:after { | ||
+ | content: " "; | ||
+ | display: table; | ||
+ | } | ||
+ | .nav:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | .nav ul { | ||
+ | list-style: none; | ||
+ | width: 13em; | ||
+ | z-index:888; | ||
+ | } | ||
+ | .nav li a { | ||
+ | display: block; | ||
+ | padding: 10px 15px; | ||
+ | color: #C4C4C4; | ||
+ | font-size: 1.1em; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: 400; | ||
+ | -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-decoration: none; | ||
+ | } | ||
+ | .nav li{ | ||
+ | |||
+ | } | ||
+ | .nav li a:hover { | ||
+ | color:#fff; | ||
+ | } | ||
− | # | + | .nav li { |
− | + | position: relative; | |
− | + | } | |
− | + | .nav li a.active{ | |
− | + | color:#fff; | |
− | + | } | |
− | + | .nav > li > a.parent{ | |
− | + | } | |
− | + | .nav > li > a.root{ | |
− | + | } | |
− | + | .nav > li > a.root:hover{ | |
− | + | } | |
− | + | .nav > li > a.parent:hover{ | |
− | + | } | |
− | + | .nav > li { | |
− | text-align: | + | float:left; |
+ | |||
+ | } | ||
+ | .nav > li.hover > ul { | ||
+ | left:-1px; | ||
+ | top:40px; | ||
+ | } | ||
+ | .nav li li.hover ul { | ||
+ | left: 100%; | ||
+ | -webkit-transition: background .2s linear; | ||
+ | -moz-transition: background .2s linear; | ||
+ | -ms-transition: background .2s linear; | ||
+ | -o-transition: background .2s linear; | ||
+ | transition: background .2s linear; | ||
+ | } | ||
+ | .nav > li > li > a{ | ||
+ | font-size: 0.85em; | ||
+ | padding: 10px 20px; | ||
+ | display: block; | ||
+ | color: #555; | ||
+ | background: #fff; | ||
+ | position: relative; | ||
+ | z-index: 9999; | ||
+ | font-weight: normal; | ||
+ | -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; | ||
+ | width: 100%; | ||
+ | text-decoration: none; | ||
+ | margin: 0; | ||
+ | text-transform: lowercase; | ||
+ | } | ||
+ | .nav li li { | ||
+ | border-top:none; | ||
+ | } | ||
+ | .nav li li:hover{ | ||
+ | border-top:none; | ||
+ | } | ||
+ | .nav li li a{ | ||
+ | border-bottom: 1px solid rgb(34, 33, 33); | ||
+ | text-transform: uppercase; | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | color: #ffffff; | ||
+ | font-size: 14px; | ||
+ | background: #000000; | ||
+ | padding: 12px; | ||
+ | display: block; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .nav li li a:hover{ | ||
+ | background: #FFFFFF; | ||
+ | color: #000000; | ||
+ | } | ||
+ | .nav > li > ul { | ||
+ | position: absolute; | ||
+ | left: -9999px; | ||
+ | padding: 0; | ||
+ | z-index: 9999; | ||
+ | background:#fff; | ||
+ | } | ||
+ | /***** Media Quries *****/ | ||
+ | @media screen and (max-width: 800px) { | ||
+ | .h_logo4{ | ||
+ | text-align:center; | ||
+ | float: none; | ||
+ | margin: 4% 0; | ||
} | } | ||
− | + | .toggleMenu { | |
− | + | padding: 5px 23px; | |
− | . | + | width: 100%; |
− | + | display:block; | |
− | + | ||
− | padding: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | a.toggleMenu{ | |
− | + | padding: 5px 0px; | |
− | + | color: #fff; | |
− | + | font-size: 22px; | |
− | + | font-weight: 400; | |
+ | text-decoration: none; | ||
+ | text-align: center; | ||
} | } | ||
− | + | .nav { | |
− | + | margin-top: 0; | |
− | . | + | } |
− | float:right; | + | .nav li a { |
− | + | padding: 10px 15px; | |
− | + | background-color: #453E3E; | |
+ | } | ||
+ | .nav { | ||
+ | background:#fff; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .active { | ||
+ | display: block; | ||
+ | } | ||
+ | .nav > li { | ||
+ | float: none; | ||
+ | } | ||
+ | .nav > li > .parent { | ||
+ | background-position: 95% 50% !important; | ||
+ | } | ||
+ | .nav ul { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .nav > li.hover > ul , .nav li li.hover ul { | ||
+ | position: static; | ||
+ | } | ||
+ | .header_bottom_right { | ||
+ | float: right; | ||
+ | width: 77%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .h_menu4 { | ||
+ | width: 40%; | ||
+ | } | ||
+ | .toggleMenu{ | ||
+ | background-color: #202227; | ||
} | } | ||
− | + | .h_menu4 { | |
− | + | float: right; | |
− | + | margin-top: 15px; | |
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 640px) { | ||
+ | .toggleMenu { | ||
+ | width:100%; | ||
} | } | ||
− | + | } | |
− | . | + | @media screen and (max-width: 480px) { |
− | + | .toggleMenu { | |
− | } | + | width:100%; |
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 320px) { | ||
+ | .toggleMenu { | ||
+ | width:100%; | ||
+ | } | ||
+ | .h_menu4 { | ||
+ | width: 100%; | ||
+ | float:none; | ||
+ | } | ||
+ | .nav { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | /* start main */ | ||
+ | .main_bg{ | ||
+ | background: #ffffff; | ||
+ | } | ||
− | /* | + | .main { |
− | + | padding: 2%; | |
− | + | } | |
− | + | .grids_1_of_3{ | |
− | + | padding: 6% 2%; | |
− | + | text-align:center; | |
+ | } | ||
+ | .grid_1_of_3{ | ||
+ | display: block; | ||
+ | float:left; | ||
+ | margin-left: 4%; | ||
+ | } | ||
+ | .grid_1_of_3:first-child { | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | .images_1_of_3 { | ||
+ | width: 30.333%; | ||
+ | } | ||
+ | .images_1_of_3 img{ | ||
+ | border-radius: 50%; | ||
+ | -webkit-border-radius: 50%; | ||
+ | -moz-border-radius: 50%; | ||
+ | -o-border-radius: 50%; | ||
+ | } | ||
+ | .images_1_of_3 h3{ | ||
+ | color: #000000; | ||
+ | text-transform: uppercase; | ||
+ | margin-top: 0.8em; | ||
+ | margin-bottom: 0.4em; | ||
+ | font-size: 2em; | ||
+ | font-weight: normal; | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | line-height: 1.8em; | ||
+ | -webkit-text-stroke: 2px; | ||
+ | letter-spacing: 1px; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .images_1_of_3 h3:hover{ | ||
+ | color: #febd17; | ||
+ | } | ||
+ | .images_1_of_3 p { | ||
+ | color: #000000; | ||
+ | line-height: 1.8em; | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | /* start top_mid_bg */ | ||
+ | .top_grid_bg{ | ||
+ | background: url('../images/bg1.jpg') no-repeat; | ||
+ | background-size: 100%; | ||
+ | } | ||
+ | .top_grid{ | ||
+ | padding:6% 2%; | ||
+ | } | ||
+ | .top_grid_text{ | ||
+ | float: left; | ||
+ | } | ||
+ | .top_grid_text h2{ | ||
+ | color: #ffffff; | ||
+ | text-transform: capitalize; | ||
+ | font-size: 2em; | ||
+ | font-weight: normal; | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | .top_grid_btn{ | ||
+ | float:right; | ||
+ | } | ||
+ | .top_grid_btn .btn{ | ||
+ | padding: 12px 30px; | ||
+ | border: 1px solid #ffffff; | ||
+ | display: block; | ||
+ | font-size: 1em; | ||
+ | text-transform: uppercase; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .top_grid_btn .btn:hover{ | ||
+ | background: #ffffff; | ||
+ | color:#000000; | ||
+ | } | ||
+ | /* top_grid_portolio */ | ||
+ | .top_grid_gallery{ | ||
+ | margin-top: 4%; | ||
+ | } | ||
+ | .top_grid_portfoli{ | ||
+ | margin-right: 3.6666666%; | ||
+ | } | ||
+ | .da-thumbs li ,.da-thumbs li img { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | } | ||
+ | .da-thumbs li { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .da-thumbs li article { | ||
+ | position: absolute; | ||
+ | background-image:url(../images/image_hover.png); | ||
+ | background-repeat:repeat; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | .da-thumbs li article.da-animate { | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease-in-out; | ||
+ | -o-transition: all 0.2s ease-in-out; | ||
+ | -ms-transition: all 0.2s ease-in-out; | ||
+ | transition: all 0.2s ease-in-out; | ||
+ | } | ||
+ | /* Initial state classes: */ | ||
+ | .da-slideFromTop { | ||
+ | left: 0px; | ||
+ | top: -100%; | ||
+ | } | ||
+ | .da-slideFromBottom { | ||
+ | left: 0px; | ||
+ | top: 100%; | ||
+ | } | ||
+ | .da-slideFromLeft { | ||
+ | top: 0px; | ||
+ | left: -100%; | ||
+ | } | ||
+ | .da-slideFromRight { | ||
+ | top: 0px; | ||
+ | left: 100%; | ||
+ | } | ||
+ | /* Final state classes: */ | ||
+ | .da-slideTop { | ||
+ | top: 0px; | ||
+ | } | ||
+ | .da-slideLeft { | ||
+ | left: 0px; | ||
+ | } | ||
+ | .da-thumbs li article a { | ||
+ | color:#fff; | ||
+ | padding:20px; | ||
+ | display:block; | ||
+ | } | ||
+ | .da-thumbs { | ||
+ | text-align:center; | ||
+ | } | ||
+ | .da-thumbs li article h3{ | ||
+ | color:#fff; | ||
+ | font-size:1.5em; | ||
+ | text-transform:capitalize; | ||
+ | padding: 80px 0 20px 0; | ||
+ | } | ||
+ | .da-thumbs li article em{ | ||
+ | margin-bottom:10px; | ||
+ | color:#fff; | ||
+ | display:block; | ||
+ | } | ||
+ | .da-thumbs li article span{ | ||
+ | display:inline-block; | ||
+ | } | ||
+ | span.link_post{ | ||
+ | display:block; | ||
+ | width:35px; | ||
+ | height:35px; | ||
+ | background-color:#febd17; | ||
+ | cursor:pointer; | ||
+ | background-image:url(../images/link_post_icon.png); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:center; | ||
+ | margin-right:10px; | ||
+ | border-radius:4px; | ||
+ | -webkit-border-radius:4px; | ||
+ | -moz-border-radius:4px; | ||
+ | -o-border-radius:4px; | ||
+ | } | ||
+ | span.zoom{ | ||
+ | overflow:hidden; | ||
+ | display:block; | ||
+ | width:35px; | ||
+ | height:35px; | ||
+ | background-color:#febd17; | ||
+ | cursor:pointer; | ||
+ | background-image:url(../images/zoom_icon.png); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:center; | ||
+ | margin-left:10px; | ||
+ | border-radius:4px; | ||
+ | -webkit-border-radius:4px; | ||
+ | -moz-border-radius:4px; | ||
+ | -o-border-radius:4px; | ||
+ | } | ||
+ | .portfolio_2col article h3{ | ||
+ | padding-top:70px !important; | ||
+ | } | ||
+ | /* Image Grid */ | ||
+ | .image_grid { | ||
+ | float:left; | ||
+ | overflow:hidden; | ||
+ | position:relative; | ||
+ | } | ||
+ | .image_grid li{ | ||
+ | float: left; | ||
+ | line-height: 18px; | ||
+ | color: #686f74; | ||
+ | list-style:none; | ||
+ | overflow:hidden; | ||
+ | text-align:center; | ||
+ | } | ||
+ | /* start mid_grid_bg */ | ||
+ | .mid_grid_bg{ | ||
+ | background:#ffffff; | ||
+ | } | ||
+ | .mid_grid{ | ||
+ | padding: 6% 2%; | ||
+ | } | ||
+ | .mid_grid h2{ | ||
+ | color: #202227; | ||
+ | text-transform: capitalize; | ||
+ | font-size: 2.5em; | ||
+ | -webkit-text-stroke: 2px; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | .mid_grid h3{ | ||
+ | color: #777777; | ||
+ | text-transform: capitalize; | ||
+ | font-size: 1.5em; | ||
+ | margin: 2% 0; | ||
+ | } | ||
+ | .mid_grid h3 a{ | ||
+ | color: #202227; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | .mid_grid h3 a:hover{ | ||
+ | color: #555555; | ||
+ | } | ||
+ | .mid_grid .btn{ | ||
+ | margin-top:8px; | ||
+ | padding: 12px 30px; | ||
+ | border: 1px solid #ffffff; | ||
+ | background:#202227; | ||
+ | display: inline-block; | ||
+ | font-size: 1em; | ||
+ | text-transform: uppercase; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .mid_grid .btn:hover{ | ||
+ | background: #000000; | ||
+ | } | ||
+ | .mid_grid_left{ | ||
+ | float:left; | ||
+ | width: 56.333333%; | ||
+ | margin-right: 4%; | ||
+ | } | ||
+ | .mid_grid_right{ | ||
+ | float:right; | ||
+ | width:38.333333%; | ||
+ | } | ||
+ | /* start btm_grid */ | ||
+ | .btm_grid_bg{ | ||
+ | background: url('../images/bg2.jpg') no-repeat; | ||
+ | background-size: cover; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | } | ||
+ | .btm_grid{ | ||
+ | padding:6% 2%; | ||
+ | } | ||
+ | .btm_grid h2 { | ||
+ | color: #ffffff; | ||
+ | text-transform: capitalize; | ||
+ | font-size: 2em; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | .btm_grid h3{ | ||
+ | color: #ffffff; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 1em; | ||
+ | margin: 8% 0 4%; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .btm_grid h3:hover{ | ||
+ | color: rgba(255, 255, 255, 0.69); | ||
+ | } | ||
+ | .btm_grid p{ | ||
+ | margin-top:10%; | ||
+ | color: rgba(255, 255, 255, 0.69); | ||
+ | line-height: 1.6em; | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | .span_of_3 { | ||
+ | margin-top: 3%; | ||
+ | } | ||
+ | .span1_of_3 { | ||
+ | width: 30.3333%; | ||
+ | float: left; | ||
+ | margin-right: 4%; | ||
+ | } | ||
+ | .span1_of_3:nth-child(3){ | ||
+ | margin-right: 0; | ||
+ | } | ||
+ | .span_of_3 h3.style{ | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | .span_of_3 h4{ | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .span_of_3 h4.divider{ | ||
+ | position: absolute; | ||
+ | background: url('../images/divider.png') no-repeat; | ||
+ | width: 40px; | ||
+ | height: 10px; | ||
+ | } | ||
+ | /* start testimonial */ | ||
+ | .testimonial_bg{ | ||
+ | background: #f4f4f4; | ||
+ | } | ||
+ | .testimonial{ | ||
+ | padding:6% 2%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .testimonial h2 { | ||
+ | color: #202226; | ||
+ | text-transform: capitalize; | ||
+ | font-size: 3em; | ||
+ | } | ||
+ | .testimonial h3{ | ||
+ | color: #A5A5A5; | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | .testimonial_text{ | ||
+ | margin:4% 0; | ||
+ | background: #ffffff; | ||
+ | padding:4% 8%; | ||
+ | position: relative; | ||
+ | } | ||
+ | .testimonial_text h4{ | ||
+ | color: #BBBBBB; | ||
+ | font-size: 2em; | ||
+ | } | ||
+ | .testimonial_text:after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border: 20px solid #FFFFFF; | ||
+ | border-bottom: 0 solid rgba(0, 0, 0, 0)!important; | ||
+ | border-right: 15px solid rgba(0, 0, 0, 0)!important; | ||
+ | border-left: 15px solid rgba(0, 0, 0, 0)!important; | ||
+ | left: 50%; | ||
+ | bottom: -20px; | ||
+ | margin-left: -10px; | ||
+ | } | ||
+ | .client_btn{ | ||
+ | margin-bottom: 4%; | ||
+ | } | ||
+ | .client_btn a{ | ||
+ | display: inline-block; | ||
+ | text-transform: capitalize; | ||
+ | font-size: 1.2em; | ||
+ | padding: 8px 28px; | ||
+ | color: #ffffff; | ||
+ | background: #34BCEB; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | border-radius: 30px; | ||
+ | -webkit-border-radius: 30px; | ||
+ | -moz-border-radius:30px; | ||
+ | -o-border-radius:30px; | ||
+ | } | ||
+ | .client_btn a:hover{ | ||
+ | background: #159ECD; | ||
+ | } | ||
+ | .client_pic ul li{ | ||
+ | display: inline-block; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | .client_pic ul li a img{ | ||
+ | margin-bottom: -4px; | ||
+ | } | ||
+ | .client_pic ul li a.active{ | ||
+ | border-bottom: 5px solid #FEBD17; | ||
+ | } | ||
+ | .client_pic ul li a{ | ||
+ | display:block; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .client_pic ul li a:hover{ | ||
+ | border-bottom: 5px solid #FEBD17; | ||
+ | } | ||
+ | /* start clients */ | ||
+ | .clients_bg{ | ||
+ | background: #ffffff; | ||
+ | } | ||
+ | .clients{ | ||
+ | padding:6% 2%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .clients_txt{ | ||
+ | padding-bottom: 4%; | ||
+ | } | ||
+ | .clients h2{ | ||
+ | color: #2E2E2E; | ||
+ | font-size: 1.8em; | ||
+ | text-transform: uppercase; | ||
+ | padding: 15px 0 0px 0px; | ||
+ | float: left; | ||
+ | } | ||
+ | .clients h3{ | ||
+ | float: right; | ||
+ | width: 82%; | ||
+ | background: url(../images/hd-bg.png) 0% 73% repeat-x; | ||
+ | display: inline-block; | ||
+ | padding: 10px; | ||
+ | height: 15px; | ||
+ | margin-top: 12px; | ||
+ | } | ||
+ | /* start tooltip */ | ||
+ | .tool_tip1 { | ||
+ | margin: 4% 0; | ||
+ | } | ||
+ | .tt-wrapper{ | ||
+ | padding:4% 0 10% 0; | ||
+ | } | ||
+ | .tt-wrapper li:first-child{ | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | .tt-wrapper li{ | ||
+ | float: left; | ||
+ | margin-left: 4%; | ||
+ | width:16.77777%; | ||
+ | } | ||
+ | .tt-wrapper li a{ | ||
+ | display: block; | ||
+ | outline: none; | ||
+ | position: relative; | ||
+ | height: 60px; | ||
+ | } | ||
+ | .tt-wrapper li .tt-sample{ | ||
+ | background-position: 0px 0px; | ||
+ | } | ||
+ | .tt-wrapper li a span{ | ||
+ | text-transform:uppercase; | ||
+ | width: 100px; | ||
+ | height: auto; | ||
+ | line-height: 20px; | ||
+ | padding: 10px; | ||
+ | left: 50%; | ||
+ | margin-left: -64px; | ||
+ | font-weight: normal; | ||
+ | font-size: 14px; | ||
+ | color: #ffffff; | ||
+ | text-align: center; | ||
+ | border: 4px solid #000; | ||
+ | background:#000000; | ||
+ | text-indent: 0px; | ||
+ | border-radius: 5px; | ||
+ | position: absolute; | ||
+ | pointer-events: none; | ||
+ | bottom: 100px; | ||
+ | opacity: 0; | ||
+ | box-shadow: 1px 1px 2px rgba(0,0,0,0.1); | ||
+ | -webkit-transition: all 0.3s ease-in-out; | ||
+ | -moz-transition: all 0.3s ease-in-out; | ||
+ | -o-transition: all 0.3s ease-in-out; | ||
+ | -ms-transition: all 0.3s ease-in-out; | ||
+ | transition: all 0.3s ease-in-out; | ||
+ | } | ||
+ | .tt-wrapper li a span:before, | ||
+ | .tt-wrapper li a span:after{ | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | bottom: -15px; | ||
+ | left: 50%; | ||
+ | margin-left: -9px; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-left: 10px solid transparent; | ||
+ | border-right: 10px solid transparent; | ||
+ | border-top: 10px solid rgba(0,0,0,0.1); | ||
+ | } | ||
+ | .tt-wrapper li a span:after{ | ||
+ | bottom: -14px; | ||
+ | margin-left: -10px; | ||
+ | border-top: 10px solid #000; | ||
+ | } | ||
+ | .tt-wrapper li a:hover span{ | ||
+ | opacity: 0.9; | ||
+ | bottom: 70px; | ||
+ | } | ||
+ | |||
+ | /* start products */ | ||
+ | .products_bg{ | ||
+ | background: #f1f1f1; | ||
+ | } | ||
+ | .products{ | ||
+ | padding:6% 2%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .products h2{ | ||
+ | background: #000000; | ||
+ | font-size: 1.4em; | ||
+ | color: #ffffff; | ||
+ | padding: 10px; | ||
+ | display: inline-block; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | .products_of_3{ | ||
+ | display:block; | ||
+ | margin-top: 4%; | ||
+ | } | ||
+ | .product1_of_3{ | ||
+ | float: left; | ||
+ | width: 25.3333%; | ||
+ | padding: 2%; | ||
+ | margin-right: 4%; | ||
+ | background: #ffffff; | ||
+ | } | ||
+ | .product1_of_3 h3{ | ||
+ | font-size: 1.2em; | ||
+ | color: #000000; | ||
+ | text-transform: capitalize; | ||
+ | -webkit-text-stroke: 0.5px; | ||
+ | margin: 4% 0; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .product1_of_3 h3:hover{ | ||
+ | color: #febd17; | ||
+ | } | ||
+ | .product1_of_3 h4{ | ||
+ | font-size: 1.2em; | ||
+ | color: #28AAD6; | ||
+ | -webkit-text-stroke: 0.5px; | ||
+ | } | ||
+ | /* start footer_top */ | ||
+ | .footer_top_bg{ | ||
+ | background: #febd17; | ||
+ | } | ||
+ | .footer_top{ | ||
+ | padding:6% 2%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .footer_top h2{ | ||
+ | color: #FFFFFF; | ||
+ | font-size: 2.5em; | ||
+ | } | ||
+ | .footer_top h2 a{ | ||
+ | color: #FFFFFF; | ||
+ | text-decoration:underline; | ||
+ | } | ||
+ | .footer_top h2 a:hover{ | ||
+ | text-decoration:none; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | /* start footer */ | ||
+ | .footer_bg{ | ||
+ | background: #000000; | ||
+ | } | ||
+ | .footer{ | ||
+ | padding:6% 2%; | ||
+ | } | ||
+ | .span1_of_4{ | ||
+ | float:left; | ||
+ | width: 20.3333333%; | ||
+ | margin-right: 4%; | ||
+ | } | ||
+ | .span1_of_4 h2{ | ||
+ | font-size: 1.2em; | ||
+ | color: #ffffff; | ||
+ | text-transform:uppercase; | ||
+ | margin-bottom: 8%; | ||
+ | } | ||
+ | .f_nav1 li{ | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .f_nav1 li a{ | ||
+ | display: block; | ||
+ | color: #ABABAB; | ||
+ | line-height: 1.8em; | ||
+ | font-size: 1em; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .f_nav1 li a:hover{ | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | .f_nav2 li{ | ||
+ | margin:10px 5px 0 0; | ||
+ | display: inline-block; | ||
+ | background: #222222; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | border-radius:2px; | ||
+ | -webkit-border-radius:2px; | ||
+ | -moz-border-radius:2px; | ||
+ | -o-border-radius:2px; | ||
+ | } | ||
+ | .f_nav2 li:hover{ | ||
+ | background: #333333; | ||
+ | } | ||
+ | .f_nav2 li a{ | ||
+ | display: block; | ||
+ | color: #ABABAB; | ||
+ | font-size: 1em; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | p.f_para{ | ||
+ | color: #ABABAB; | ||
+ | line-height: 1.8em; | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | /*search*/ | ||
+ | .search{ | ||
+ | margin-top:8%; | ||
+ | position: relative; | ||
+ | background: #ffffff; | ||
+ | border-radius:4px; | ||
+ | -webkit-border-radius:4px; | ||
+ | -moz-border-radius:4px; | ||
+ | -o-border-radius:4px; | ||
+ | } | ||
+ | .search input[type="text"]{ | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | padding:10px 16px; | ||
+ | outline: none; | ||
+ | color: #5a5a5a; | ||
+ | background: none; | ||
+ | border: none; | ||
+ | width: 68.33333%; | ||
+ | line-height: 1.5em; | ||
+ | position: relative; | ||
+ | font-size: 1em; | ||
+ | text-transform: capitalize; | ||
+ | } | ||
+ | .search input[type="submit"]{ | ||
+ | background: url('../images/search1.png') no-repeat 8px 12px; | ||
+ | padding: 10px 0px; | ||
+ | border: none; | ||
+ | cursor: pointer; | ||
+ | width: 14.33%; | ||
+ | line-height: 1.5em; | ||
+ | outline: none; | ||
+ | position: absolute; | ||
+ | } | ||
+ | .search input[type="submit"]:hover { | ||
+ | background:url('../images/search1_h.png') no-repeat 8px 12px; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .footer_btm{ | ||
+ | margin-top:4%; | ||
+ | border-top: 6px solid #222222; | ||
+ | padding-top: 4%; | ||
+ | } | ||
+ | .copy{ | ||
+ | float:left; | ||
+ | } | ||
+ | .copy p{ | ||
+ | font-size: 1em; | ||
+ | text-transform:uppercase; | ||
+ | color: #B9B9B9; | ||
+ | } | ||
+ | .copy p span{ | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | .copy p a{ | ||
+ | color:#ffffff; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .copy p a:hover{ | ||
+ | color: #B9B9B9; | ||
+ | } | ||
+ | /*---top-social-icons-----*/ | ||
+ | .social-icons { | ||
+ | float: right; | ||
+ | } | ||
+ | .social-icons li{ | ||
+ | float:left; | ||
+ | margin-right:10px; | ||
+ | display:inline-block; | ||
+ | } | ||
+ | .social-icons li a { | ||
+ | height: 16px; | ||
+ | width: 18px; | ||
+ | display: block; | ||
+ | background:url(../images/social_icons.png); | ||
+ | } | ||
+ | .social-icons li:first-child a{ | ||
+ | background:url(../images/social_icons.png) 0% 0%; | ||
+ | } | ||
+ | .social-icons li:first-child a:hover{ | ||
+ | background: url(../images/social_icons.png) 0% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(2) a{ | ||
+ | background: url(../images/social_icons.png) 8% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(2) a:hover{ | ||
+ | background: url(../images/social_icons.png) 8% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(3) a{ | ||
+ | background: url(../images/social_icons.png) 24% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(3) a:hover{ | ||
+ | background: url(../images/social_icons.png) 24% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(4) a{ | ||
+ | background: url(../images/social_icons.png) 32% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(4) a:hover{ | ||
+ | background: url(../images/social_icons.png) 32% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(5) a{ | ||
+ | background: url(../images/social_icons.png) 40% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(5) a:hover{ | ||
+ | background: url(../images/social_icons.png) 40% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(6) a{ | ||
+ | background: url(../images/social_icons.png) 49% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(6) a:hover{ | ||
+ | background: url(../images/social_icons.png) 49% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(7) a{ | ||
+ | background: url(../images/social_icons.png) 56% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(7) a:hover{ | ||
+ | background: url(../images/social_icons.png) 56% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(8) a{ | ||
+ | background: url(../images/social_icons.png) 66% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(8) a:hover{ | ||
+ | background: url(../images/social_icons.png) 66% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(9) a{ | ||
+ | background: url(../images/social_icons.png) 74% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(9) a:hover{ | ||
+ | background: url(../images/social_icons.png) 74% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(10) a{ | ||
+ | background: url(../images/social_icons.png) 83% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(10) a:hover{ | ||
+ | background: url(../images/social_icons.png) 83% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(11) a{ | ||
+ | background: url(../images/social_icons.png) 92% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(11) a:hover{ | ||
+ | background: url(../images/social_icons.png) 92% 90%; | ||
+ | } | ||
+ | .social-icons li:nth-child(12) a{ | ||
+ | background: url(../images/social_icons.png) 100% 0%; | ||
+ | } | ||
+ | .social-icons li:nth-child(12) a:hover{ | ||
+ | background: url(../images/social_icons.png) 100% 90%; | ||
+ | } | ||
+ | /* start portfolio */ | ||
+ | .grids_1_of_3_btm{ | ||
+ | text-align:center; | ||
+ | margin-bottom: 4%; | ||
+ | } | ||
+ | /* start service*/ | ||
+ | .ser-main{ | ||
+ | display: block; | ||
+ | margin: 4% 0; | ||
+ | } | ||
+ | .ser-grid{ | ||
+ | float:right; | ||
+ | } | ||
+ | .ser-grid-list:nth-last-child(2){ | ||
+ | margin-right: 0; | ||
+ | } | ||
+ | .ser-grid-list{ | ||
+ | float: left; | ||
+ | width: 21.33333%; | ||
+ | margin-right: 4%; | ||
+ | } | ||
+ | .ser-grid-list img{ | ||
+ | margin-top:15px; | ||
+ | } | ||
+ | .ser-grid-list p{ | ||
+ | margin: 8% 0; | ||
+ | } | ||
+ | .ser-para { | ||
+ | margin: 2% 0; | ||
+ | } | ||
+ | h2.style{ | ||
+ | color: #202226; | ||
+ | text-transform: capitalize; | ||
+ | font-size: 3em; | ||
+ | letter-spacing: -1px; | ||
+ | } | ||
+ | p.para{ | ||
+ | color: #000000; | ||
+ | line-height: 1.8em; | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | .btn_s { | ||
+ | padding: 12px 30px; | ||
+ | border: 1px solid #ffffff; | ||
+ | background: #202227; | ||
+ | display: inline-block; | ||
+ | font-size: 1em; | ||
+ | text-transform: uppercase; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .btn_s:hover { | ||
+ | background: #000000; | ||
+ | } | ||
+ | /* start staff */ | ||
+ | .staff h3 { | ||
+ | margin-top:4%; | ||
+ | color: #000000; | ||
+ | text-transform: capitalize; | ||
+ | font-size: 1.5em; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .staff h3:hover { | ||
+ | color: #79C378; | ||
+ | } | ||
+ | /* start blog */ | ||
+ | .blog { | ||
+ | padding: 2%; | ||
+ | } | ||
+ | .blog_list{ | ||
+ | margin-top: 2%; | ||
+ | } | ||
+ | .blog_list h5{ | ||
+ | text-transform:capitalize; | ||
+ | line-height: 1.5em; | ||
+ | font-size:1.4em; | ||
+ | color: #202227; | ||
+ | -webkit-text-stroke: 0.2px; | ||
+ | } | ||
+ | .blog_list h5 a{ | ||
+ | color: #febd17; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .blog_list h5 a:hover{ | ||
+ | color: #202227; | ||
+ | } | ||
+ | .blog_para{ | ||
+ | margin: 2% 0; | ||
+ | } | ||
+ | .blog_para p a{ | ||
+ | float: left; | ||
+ | margin-right: 4%; | ||
+ | } | ||
+ | .blog_para p a img{ | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | .read_more1{ | ||
+ | margin-top: 2%; | ||
+ | } | ||
+ | /***Contact*/ | ||
+ | .contact{ | ||
+ | padding:4% 2%; | ||
+ | } | ||
+ | .map{ | ||
+ | margin: 2% 0; | ||
+ | } | ||
+ | .col{ | ||
+ | display: block; | ||
+ | } | ||
+ | .contact-form{ | ||
+ | position:relative; | ||
+ | } | ||
+ | .contact-form div{ | ||
+ | padding:5px 0; | ||
+ | } | ||
+ | .contact-form span label{ | ||
+ | color: #202227; | ||
+ | display: block; | ||
+ | font-size: 1em; | ||
+ | padding-bottom: 5px; | ||
+ | } | ||
+ | .contact-form input[type="text"], .contact-form textarea { | ||
+ | font-family: 'Source Sans Pro', 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: capitalize; | ||
+ | } | ||
+ | .contact-form textarea{ | ||
+ | resize:none; | ||
+ | height:120px; | ||
+ | } | ||
+ | .contact-form input[type="submit"]{ | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | cursor:pointer; | ||
+ | -webkit-appearance: none; | ||
+ | padding: 12px 30px; | ||
+ | border: 1px solid #ffffff; | ||
+ | background: #202227; | ||
+ | display: inline-block; | ||
+ | font-size: 1em; | ||
+ | text-transform: uppercase; | ||
+ | color: #ffffff; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .contact-form input[type="submit"]:hover{ | ||
+ | background: #000000; | ||
+ | } | ||
+ | /* start feature */ | ||
+ | .top_grid_bg1{ | ||
+ | background: #ffffff | ||
+ | } | ||
+ | .top_grid_btn1 { | ||
+ | float: right; | ||
+ | } | ||
+ | .top_grid_btn1 .btn { | ||
+ | padding: 12px 30px; | ||
+ | border: 1px solid #202227; | ||
+ | display: block; | ||
+ | font-size: 1em; | ||
+ | text-transform: uppercase; | ||
+ | color: #202227; | ||
+ | -webkit-transition: 0.9s; | ||
+ | -moz-transition: 0.9s; | ||
+ | -o-transition: 0.9s; | ||
+ | transition: 0.9s; | ||
+ | } | ||
+ | .top_grid_btn1 .btn:hover{ | ||
+ | background: #202227; | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | /***** Media Quries *****/ | ||
+ | @media only screen and (max-width: 1366px) { | ||
+ | .wrap{ | ||
+ | width:95%; | ||
+ | } | ||
+ | #fwslider .title { | ||
+ | margin-left: 8%; | ||
+ | } | ||
+ | #fwslider .description { | ||
+ | margin-left: 8%; | ||
} | } | ||
− | + | .image_grid { | |
− | + | width: 21.333%; | |
− | . | + | } |
− | width: | + | .tool_tip > ul > li { |
− | margin- | + | width: 16.33333%; |
− | padding: | + | } |
+ | } | ||
+ | @media only screen and (max-width: 1280px) { | ||
+ | .wrap{ | ||
+ | width:95%; | ||
+ | } | ||
+ | .image_grid { | ||
+ | width: 21.333%; | ||
+ | } | ||
+ | .tool_tip > ul > li { | ||
+ | width: 16.33333%; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (max-width: 1024px) { | ||
+ | .wrap{ | ||
+ | width:95%; | ||
+ | } | ||
+ | .tool_tip > ul > li > ul { | ||
+ | margin-left: -50px; | ||
+ | } | ||
+ | .clients h3 { | ||
+ | width: 76%; | ||
+ | } | ||
+ | .search input[type="text"] { | ||
+ | width: 60.33333%; | ||
+ | } | ||
+ | .search input[type="submit"] { | ||
+ | background: url('../images/search1.png') no-repeat 4px 12px; | ||
+ | } | ||
+ | .search input[type="submit"]:hover { | ||
+ | background: url('../images/search1_h.png') no-repeat 4px 12px; | ||
+ | } | ||
+ | .images_1_of_3 h3 { | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (max-width: 800px) { | ||
+ | .wrap{ | ||
+ | width:95%; | ||
+ | } | ||
+ | .search input[type="text"] { | ||
+ | padding: 8px 16px; | ||
+ | } | ||
+ | .logo { | ||
+ | text-align:center; | ||
+ | } | ||
+ | .top-nav{ | ||
display:block; | display:block; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .footer_top h2 { | |
− | . | + | font-size: 2em; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .span1_of_4 { | |
− | + | float: left; | |
− | . | + | width: 45.333333%; |
− | + | margin: 4% 4% 0 0; | |
− | + | ||
} | } | ||
− | + | .span1_of_4:nth-child(2),.span1_of_4:nth-child(4){ | |
− | + | margin-right: 0; | |
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .search input[type="text"] { | |
− | + | width: 75.33333%; | |
− | + | ||
− | width: | + | |
− | + | ||
− | + | ||
} | } | ||
− | + | .footer_btm { | |
− | + | text-align: center; | |
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .social-icons { | |
− | + | float: none; | |
− | + | margin-bottom: 4%; | |
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .social-icons li { | |
− | + | float: none; | |
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
} | } | ||
− | + | .copy { | |
− | + | float: none; | |
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .ser-grid-list { | |
− | + | float: left; | |
− | . | + | width: 45.33333%; |
− | + | margin-right: 4%; | |
− | + | ||
} | } | ||
− | + | .ser-grid-list:nth-child(2),.ser-grid-list:nth-child(4){ | |
− | + | margin-right: 0 | |
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .da-thumbs li article h3 { | |
− | + | font-size: 1em; | |
− | . | + | padding: 30px 0 20px 0; |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | h2.style { | |
− | . | + | font-size: 2em; |
− | + | ||
} | } | ||
− | + | } | |
− | . | + | @media only screen and (max-width: 640px){ |
− | + | .wrap{ | |
− | width: | + | width:95%; |
} | } | ||
− | + | .testimonial h2 { | |
− | . | + | font-size: 2em; |
− | + | ||
} | } | ||
− | . | + | .testimonial_text h4 { |
− | + | font-size: 1.5em; | |
− | + | ||
} | } | ||
− | + | .clients h2 { | |
− | + | font-size: 1.5em; | |
− | . | + | |
− | + | ||
} | } | ||
− | + | .clients h3 { | |
− | . | + | width: 66%; |
− | width: | + | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .clients_txt { | |
− | . | + | padding-bottom: 10%; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .images_1_of_3 { | |
− | + | width: 99.333%; | |
− | + | ||
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .grid_1_of_3 { |
− | + | margin-left: 0%; | |
− | + | ||
− | + | ||
} | } | ||
− | + | .da-thumbs li article h3 { | |
− | + | font-size: 1em; | |
− | + | padding: 10px 0 10px 0; | |
− | . | + | |
− | + | ||
− | font-size: | + | |
− | + | ||
} | } | ||
− | + | } | |
− | + | @media only screen and (max-width: 480px) { | |
− | . | + | .wrap{ |
− | + | width:95%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .images_1_of_3 { | |
− | + | width: 99.333%; | |
− | . | + | margin-top: 4%; |
− | + | ||
− | + | ||
} | } | ||
− | + | .images_1_of_3 h3 { | |
− | + | margin: 0; | |
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .grid_1_of_3 { | |
− | + | margin-left: 0%; | |
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .mid_grid h2 { | |
− | + | font-size: 1.5em; | |
− | . | + | -webkit-text-stroke: 1px; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .mid_grid h3 { | |
− | + | font-size: 1em; | |
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .span1_of_3 { | |
− | + | margin-top:4%; | |
− | . | + | width: 99.3333%; |
− | + | float: none; | |
− | + | margin-right: 0%; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .testimonial_text h4 { | |
− | + | font-size: 1em; | |
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | font- | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .clients h3 { | |
− | + | width: 50%; | |
− | . | + | |
− | + | ||
− | + | ||
} | } | ||
− | + | .tool_tip > ul > li > ul { | |
− | + | width: 99.33333%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .span1_of_4 { | |
− | + | float: none; | |
− | + | width: 99.333333%; | |
− | + | margin: 4% 0% 0 0; | |
− | + | } | |
− | + | .span1_of_4 h2 { | |
− | + | margin-bottom: 4%; | |
− | + | } | |
− | + | .search input[type="text"] { | |
− | + | width: 80.33333%; | |
− | + | } | |
− | + | .ser-grid-list { | |
− | + | float: left; | |
+ | width: 99.33333%; | ||
+ | margin-right: 0%; | ||
+ | } | ||
+ | .ser-grid-list p { | ||
+ | margin: 4% 0; | ||
+ | } | ||
+ | .tt-wrapper li a span { | ||
+ | left: 36%; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (max-width: 320px) { | ||
+ | .wrap{ | ||
+ | width:95%; | ||
} | } | ||
− | + | .top_grid_text { | |
− | + | float: none; | |
+ | text-align:center; | ||
+ | } | ||
+ | .top_grid_btn { | ||
+ | float: none; | ||
+ | text-align:center; | ||
+ | margin: 4% 0; | ||
+ | } | ||
+ | .mid_grid_left { | ||
+ | float: none; | ||
+ | width: 99.333333%; | ||
+ | margin-right: 0%; | ||
+ | } | ||
+ | .mid_grid_right { | ||
+ | margin-top:4%; | ||
+ | float: none; | ||
+ | width: 99.333333%; | ||
+ | } | ||
+ | .clients h3 { | ||
+ | display: none; | ||
+ | } | ||
+ | .search input[type="text"] { | ||
+ | width: 74.33333%; | ||
+ | } | ||
+ | .client_pic ul li { | ||
+ | display: inline-block; | ||
+ | margin-right: 4px; | ||
+ | width: 17.3333%; | ||
+ | } | ||
+ | .logo { | ||
+ | float: none; | ||
+ | } | ||
+ | .h_menu4 { | ||
+ | margin: 0 0 5px 0; | ||
+ | } | ||
+ | .tt-wrapper li a span { | ||
+ | width: 87px; | ||
+ | line-height: 15px; | ||
+ | padding: 6px; | ||
+ | font-size: 13px; | ||
+ | border: 2px solid #000; | ||
+ | bottom: 100px; | ||
+ | } | ||
+ | .tt-wrapper li a span:after { | ||
+ | bottom: -12px; | ||
+ | margin-left: 3px; | ||
+ | } | ||
+ | } | ||
− | + | /* Magnific Popup CSS */ | |
+ | .mfp-bg { | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | z-index: 1042; | ||
+ | overflow: hidden; | ||
+ | position: fixed; | ||
+ | background: #0b0b0b; | ||
+ | opacity: 0.9; | ||
+ | filter: alpha(opacity=80); } | ||
+ | .mfp-wrap { | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | z-index: 1043; | ||
+ | position: fixed; | ||
+ | outline: none !important; | ||
+ | -webkit-backface-visibility: hidden; } | ||
− | + | .mfp-container { | |
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | padding: 0 8px; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; } | ||
− | + | .mfp-container:before { | |
− | + | content: ''; | |
− | + | display: inline-block; | |
+ | height: 100%; | ||
+ | vertical-align: middle; } | ||
+ | .mfp-align-top .mfp-container:before { | ||
+ | display: none; } | ||
+ | .mfp-content { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
+ | margin: 0 auto; | ||
+ | text-align: left; | ||
+ | z-index: 1045; } | ||
+ | .mfp-inline-holder .mfp-content, | ||
+ | .mfp-ajax-holder .mfp-content { | ||
+ | width: 100%; | ||
+ | cursor: auto; } | ||
− | + | .mfp-ajax-cur { | |
+ | cursor: progress; } | ||
+ | .mfp-zoom-out-cur, | ||
+ | .mfp-zoom-out-cur .mfp-image-holder .mfp-close { | ||
+ | cursor: -moz-zoom-out; | ||
+ | cursor: -webkit-zoom-out; | ||
+ | cursor: zoom-out; } | ||
+ | .mfp-zoom { | ||
+ | cursor: pointer; | ||
+ | cursor: -webkit-zoom-in; | ||
+ | cursor: -moz-zoom-in; | ||
+ | cursor: zoom-in; } | ||
+ | .mfp-auto-cursor .mfp-content { | ||
+ | cursor: auto; } | ||
− | + | .mfp-close, | |
+ | .mfp-arrow, | ||
+ | .mfp-preloader, | ||
+ | .mfp-counter { | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | user-select: none; } | ||
− | + | .mfp-loading.mfp-figure { | |
+ | display: none; } | ||
− | + | .mfp-hide { | |
+ | display: none !important; } | ||
+ | .mfp-preloader { | ||
+ | color: #cccccc; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | width: auto; | ||
+ | text-align: center; | ||
+ | margin-top: -0.8em; | ||
+ | left: 8px; | ||
+ | right: 8px; | ||
+ | z-index: 1044; } | ||
− | + | .mfp-preloader a { | |
− | + | color: #cccccc; } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .mfp-preloader a:hover { | |
− | + | color: white; } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .mfp-s-ready .mfp-preloader { | |
− | + | display: none; } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .mfp-s-error .mfp-content { | ||
+ | display: none; } | ||
− | + | button.mfp-close, | |
+ | button.mfp-arrow { | ||
+ | overflow: visible; | ||
+ | cursor: pointer; | ||
+ | background: transparent; | ||
+ | border: 0; | ||
+ | -webkit-appearance: none; | ||
+ | display: block; | ||
+ | padding: 0; | ||
+ | z-index: 1046; } | ||
+ | button::-moz-focus-inner { | ||
+ | padding: 0; | ||
+ | border: 0; } | ||
− | + | .mfp-close { | |
+ | width:30px; | ||
+ | height:30px; | ||
+ | line-height: 44px; | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | text-decoration: none; | ||
+ | text-align: center; | ||
+ | opacity: 0.65; | ||
+ | padding: 0 0 18px 10px; | ||
+ | color: white; | ||
+ | font-style: normal; | ||
+ | font-size: 28px; | ||
+ | outline:none; | ||
+ | } | ||
+ | .mfp-close:hover, .mfp-close:focus { | ||
+ | opacity: 9; } | ||
+ | .mfp-close:active { | ||
+ | top: 0px; } | ||
+ | .mfp-close-btn-in .mfp-close { | ||
+ | color: #333333; } | ||
− | + | .mfp-image-holder .mfp-close, | |
− | + | .mfp-iframe-holder .mfp-close { | |
− | + | color: white; | |
− | + | right: -6px; | |
− | + | text-align: right; | |
− | + | padding-right: 6px; | |
− | + | width: 100%; | |
− | + | outline:none; | |
− | + | } | |
+ | .mfp-counter { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | color: #cccccc; | ||
+ | font-size: 12px; | ||
+ | line-height: 18px; } | ||
− | + | .mfp-arrow { | |
− | + | position: absolute; | |
− | + | opacity: 0.65; | |
− | + | margin: 0; | |
− | + | top: 50%; | |
− | + | margin-top: -55px; | |
− | + | padding: 0; | |
+ | width: 90px; | ||
+ | height: 110px; | ||
+ | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } | ||
− | + | .mfp-arrow:active { | |
− | + | margin-top: -54px; } | |
− | + | ||
− | + | .mfp-arrow:hover, | |
+ | .mfp-arrow:focus { | ||
+ | opacity: 1; } | ||
+ | .mfp-arrow:before, .mfp-arrow:after, | ||
+ | .mfp-arrow .mfp-b, | ||
+ | .mfp-arrow .mfp-a { | ||
+ | content: ''; | ||
+ | display: block; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | margin-top: 35px; | ||
+ | margin-left: 35px; | ||
+ | border: medium inset transparent; } | ||
+ | .mfp-arrow:after, | ||
+ | .mfp-arrow .mfp-a { | ||
+ | border-top-width: 13px; | ||
+ | border-bottom-width: 13px; | ||
+ | top: 8px; } | ||
+ | .mfp-arrow:before, | ||
+ | .mfp-arrow .mfp-b { | ||
+ | border-top-width: 21px; | ||
+ | border-bottom-width: 21px; } | ||
+ | .mfp-arrow-left { | ||
+ | left: 0; } | ||
+ | .mfp-arrow-left:after, | ||
+ | .mfp-arrow-left .mfp-a { | ||
+ | border-right: 17px solid white; | ||
+ | margin-left: 31px; } | ||
+ | .mfp-arrow-left:before, | ||
+ | .mfp-arrow-left .mfp-b { | ||
+ | margin-left: 25px; | ||
+ | border-right: 27px solid #3f3f3f; } | ||
+ | .mfp-arrow-right { | ||
+ | right: 0; } | ||
+ | .mfp-arrow-right:after, | ||
+ | .mfp-arrow-right .mfp-a { | ||
+ | border-left: 17px solid white; | ||
+ | margin-left: 39px; } | ||
+ | .mfp-arrow-right:before, | ||
+ | .mfp-arrow-right .mfp-b { | ||
+ | border-left: 27px solid #3f3f3f; } | ||
+ | .mfp-iframe-holder { | ||
+ | padding-top: 40px; | ||
+ | padding-bottom: 40px; } | ||
− | + | .mfp-iframe-holder .mfp-content { | |
+ | line-height: 0; | ||
+ | width: 100%; | ||
+ | max-width: 900px; } | ||
+ | .mfp-iframe-scaler { | ||
+ | width: 100%; | ||
+ | height: 0; | ||
+ | overflow: hidden; | ||
+ | padding-top: 56.25%; } | ||
+ | .mfp-iframe-scaler iframe { | ||
+ | position: absolute; | ||
+ | display: block; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | ||
+ | background: black; } | ||
− | + | .mfp-iframe-holder .mfp-close { | |
− | + | top: -40px; } | |
+ | /* Main image in popup */ | ||
+ | img.mfp-img { | ||
+ | width: auto; | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | display: block; | ||
+ | line-height: 0; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | padding: 40px 0 40px; | ||
+ | margin: 0 auto; } | ||
+ | /* The shadow behind the image */ | ||
+ | .mfp-figure:after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 40px; | ||
+ | bottom: 40px; | ||
+ | display: block; | ||
+ | right: 0; | ||
+ | width: auto; | ||
+ | height: auto; | ||
+ | z-index: -1; | ||
+ | box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | ||
+ | background: #444444; } | ||
+ | .mfp-figure { | ||
+ | line-height: 0; } | ||
+ | .mfp-bottom-bar { | ||
+ | margin-top: -36px; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | cursor: auto; } | ||
+ | .mfp-title { | ||
+ | text-align: left; | ||
+ | line-height: 18px; | ||
+ | color: #f3f3f3; | ||
+ | word-break: break-word; | ||
+ | padding-right: 36px; } | ||
+ | .mfp-figure small { | ||
+ | color: #bdbdbd; | ||
+ | display: block; | ||
+ | font-size: 12px; | ||
+ | line-height: 14px; } | ||
+ | .mfp-image-holder .mfp-content { | ||
+ | max-width: 100%; } | ||
+ | .mfp-gallery .mfp-image-holder .mfp-figure { | ||
+ | cursor: pointer; } | ||
+ | /******** Plans List *******/ | ||
+ | /* Styles for dialog window */ | ||
+ | #small-dialog { | ||
+ | background: white; | ||
+ | padding: 20px 30px; | ||
+ | text-align: left; | ||
+ | max-width: 400px; | ||
+ | margin: 40px auto; | ||
+ | position: relative; | ||
+ | border-radius:2px; | ||
+ | -webkit-border-radius:2px; | ||
+ | -moz-border-radius:2px; | ||
+ | -o-border-radius:2px; | ||
+ | } | ||
+ | /** | ||
− | + | /** | |
+ | * Fade-zoom animation for first dialog | ||
+ | */ | ||
− | // | + | /* start state */ |
+ | .my-mfp-zoom-in #small-dialog { | ||
+ | opacity: 0; | ||
+ | -webkit-transition: all 0.2s ease-in-out; | ||
+ | -moz-transition: all 0.2s ease-in-out; | ||
+ | -o-transition: all 0.2s ease-in-out; | ||
+ | transition: all 0.2s ease-in-out; | ||
+ | -webkit-transform: scale(0.8); | ||
+ | -moz-transform: scale(0.8); | ||
+ | -ms-transform: scale(0.8); | ||
+ | -o-transform: scale(0.8); | ||
+ | transform: scale(0.8); | ||
+ | } | ||
+ | /* animate in */ | ||
+ | .my-mfp-zoom-in.mfp-ready #small-dialog { | ||
+ | opacity: 1; | ||
+ | -webkit-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -ms-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | /* animate out */ | ||
+ | .my-mfp-zoom-in.mfp-removing #small-dialog{ | ||
+ | -webkit-transform: scale(0.8); | ||
+ | -moz-transform: scale(0.8); | ||
+ | -ms-transform: scale(0.8); | ||
+ | -o-transform: scale(0.8); | ||
+ | transform: scale(0.8); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | /* Dark overlay, start state */ | ||
+ | .my-mfp-zoom-in.mfp-bg { | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity 0.3s ease-out; | ||
+ | -moz-transition: opacity 0.3s ease-out; | ||
+ | -o-transition: opacity 0.3s ease-out; | ||
+ | transition: opacity 0.3s ease-out; | ||
+ | } | ||
+ | /* animate in */ | ||
+ | .my-mfp-zoom-in.mfp-ready.mfp-bg { | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | /* animate out */ | ||
+ | .my-mfp-zoom-in.mfp-removing.mfp-bg{ | ||
+ | opacity: 0; | ||
+ | } | ||
+ | /* pop_up */ | ||
+ | .pop_up h2{ | ||
+ | text-transform: capitalize; | ||
+ | font-size: 2em; | ||
+ | color: #202227; | ||
+ | margin-bottom: 2%; | ||
+ | } | ||
+ | .pop_up p{ | ||
+ | font-size: 1em; | ||
+ | color: #555555; | ||
+ | line-height: 1.8em; | ||
+ | } | ||
+ | #small-dialog1{ | ||
+ | background: white; | ||
+ | padding: 20px 30px; | ||
+ | text-align: left; | ||
+ | max-width: 400px; | ||
+ | margin: 40px auto; | ||
+ | position: relative; | ||
+ | border-radius:2px; | ||
+ | -webkit-border-radius:2px; | ||
+ | -moz-border-radius:2px; | ||
+ | -o-border-radius:2px; | ||
+ | } | ||
+ | /** | ||
− | + | /** | |
+ | * Fade-zoom animation for first dialog | ||
+ | */ | ||
− | + | /* start state */ | |
− | + | .my-mfp-zoom-in #small-dialog1 { | |
+ | opacity: 0; | ||
+ | -webkit-transition: all 0.2s ease-in-out; | ||
+ | -moz-transition: all 0.2s ease-in-out; | ||
+ | -o-transition: all 0.2s ease-in-out; | ||
+ | transition: all 0.2s ease-in-out; | ||
+ | -webkit-transform: scale(0.8); | ||
+ | -moz-transform: scale(0.8); | ||
+ | -ms-transform: scale(0.8); | ||
+ | -o-transform: scale(0.8); | ||
+ | transform: scale(0.8); | ||
+ | } | ||
+ | /* animate in */ | ||
+ | .my-mfp-zoom-in.mfp-ready #small-dialog1 { | ||
+ | opacity: 1; | ||
+ | -webkit-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -ms-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | /* animate out */ | ||
+ | .my-mfp-zoom-in.mfp-removing #small-dialog1{ | ||
+ | -webkit-transform: scale(0.8); | ||
+ | -moz-transform: scale(0.8); | ||
+ | -ms-transform: scale(0.8); | ||
+ | -o-transform: scale(0.8); | ||
+ | transform: scale(0.8); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | /* start state */ | ||
+ | #small-dialog2{ | ||
+ | background: white; | ||
+ | padding: 20px 30px; | ||
+ | text-align: left; | ||
+ | max-width: 400px; | ||
+ | margin: 40px auto; | ||
+ | position: relative; | ||
+ | border-radius:2px; | ||
+ | -webkit-border-radius:2px; | ||
+ | -moz-border-radius:2px; | ||
+ | -o-border-radius:2px; | ||
+ | } | ||
+ | /** | ||
+ | .my-mfp-zoom-in #small-dialog2{ | ||
+ | opacity: 0; | ||
+ | -webkit-transition: all 0.2s ease-in-out; | ||
+ | -moz-transition: all 0.2s ease-in-out; | ||
+ | -o-transition: all 0.2s ease-in-out; | ||
+ | transition: all 0.2s ease-in-out; | ||
+ | -webkit-transform: scale(0.8); | ||
+ | -moz-transform: scale(0.8); | ||
+ | -ms-transform: scale(0.8); | ||
+ | -o-transform: scale(0.8); | ||
+ | transform: scale(0.8); | ||
+ | } | ||
+ | /* animate in */ | ||
+ | .my-mfp-zoom-in.mfp-ready #small-dialog2 { | ||
+ | opacity: 1; | ||
+ | -webkit-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -ms-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | /* animate out */ | ||
+ | .my-mfp-zoom-in.mfp-removing #small-dialog2{ | ||
+ | -webkit-transform: scale(0.8); | ||
+ | -moz-transform: scale(0.8); | ||
+ | -ms-transform: scale(0.8); | ||
+ | -o-transform: scale(0.8); | ||
+ | transform: scale(0.8); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | .pop_up p a{ | ||
+ | font-size: 1em; | ||
+ | color: #555555; | ||
+ | line-height: 1.8em; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | body { | |
− | + | font-family: 'Source Sans Pro', sans-serif; | |
− | + | font-size: 100%; | |
+ | background: #ffffff; | ||
+ | } | ||
+ | /* ------------------------------- 3. Slider Styles ------------------------------- */ | ||
+ | #fwslider { | ||
+ | position: relative; | ||
+ | width:100%; | ||
+ | } | ||
+ | #fwslider .slide { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | z-index: 0; | ||
+ | width:100%; | ||
+ | } | ||
+ | #fwslider .slide img { | ||
+ | width:100%; | ||
+ | } | ||
− | + | #fwslider .slidePrev { | |
+ | background:#000; | ||
+ | width:50px; | ||
+ | height:50px; | ||
+ | position: absolute; | ||
+ | top:50%; | ||
+ | left:-50px; | ||
+ | opacity:0.5; | ||
+ | z-index: 10; | ||
+ | } | ||
− | + | #fwslider .slidePrev span { | |
− | + | background-image: url("../images/arrows.png"); | |
− | + | width: 45px; | |
+ | height: 45px; | ||
+ | float: left; | ||
+ | background-position: -10% 50%; | ||
+ | background-repeat: no-repeat; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | #fwslider .slideNext { | ||
+ | background:#000; | ||
+ | width:50px; | ||
+ | height:50px; | ||
+ | position: absolute; | ||
+ | top:50%; | ||
+ | right:-50px; | ||
+ | opacity:0.5; | ||
+ | z-index: 10; | ||
+ | } | ||
− | + | #fwslider .slideNext span { | |
+ | background-image:url("../images/arrows.png"); | ||
+ | width:45px; | ||
+ | height:45px; | ||
+ | float:left; | ||
+ | background-position:90% 50%; | ||
+ | background-repeat: no-repeat; | ||
+ | cursor: pointer; | ||
+ | } | ||
− | + | #fwslider .timers { | |
− | + | height:4px; | |
− | + | position: absolute; | |
− | + | bottom:15px; | |
− | + | right:0; | |
− | + | z-index: 3; | |
+ | } | ||
− | + | #fwslider .timer { | |
− | + | height:4px; | |
− | + | width:40px; | |
− | + | background-color: #000; | |
+ | float:left; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | #fwslider .progress { | ||
+ | height:4px; | ||
+ | width:0%; | ||
+ | background-color: #FC3; | ||
+ | float:left; | ||
+ | } | ||
− | + | #fwslider .slide_content { | |
− | + | top:0; | |
− | + | left:0; | |
+ | position: absolute; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | } | ||
− | + | #fwslider .slide_content_wrap { /* Slider Text Content Container Style */ | |
− | + | max-width:1280px; | |
− | + | margin:15% auto; | |
+ | } | ||
+ | #fwslider .title { /* Slider Title Style */ | ||
+ | margin-left:4%; | ||
+ | text-transform: capitalize; | ||
+ | opacity: 0; | ||
+ | color: #fff; | ||
+ | font-size: 3em; | ||
+ | background: #febd17; | ||
+ | padding: 16px 40px; | ||
+ | float: left; | ||
+ | font-style: normal; | ||
+ | font-weight: 400; | ||
+ | -webkit-text-stroke: 0px; | ||
+ | border-radius:4px; | ||
+ | -webkit-border-radius:4px; | ||
+ | -moz-border-radius:4px; | ||
+ | -o-border-radius:4px; | ||
+ | } | ||
− | }) | + | #fwslider .description { /* Slider Description Style */ |
+ | margin-left:4%; | ||
+ | opacity: 0; | ||
+ | color:#ffffff; | ||
+ | font-size:18px; | ||
+ | background:#000000; | ||
+ | padding:10px; | ||
+ | clear:both; | ||
+ | float:left; | ||
+ | margin-top:20px; | ||
+ | line-height:24px; | ||
+ | font-style: normal; | ||
+ | font-weight: 400; | ||
+ | border-radius:4px; | ||
+ | -webkit-border-radius:4px; | ||
+ | -moz-border-radius:4px; | ||
+ | -o-border-radius:4px; | ||
+ | } | ||
+ | /* ------------------------------- 4. Media Query Max Width 1300, Min Width 720 ------------------------------- */ | ||
+ | @media only screen and (min-width:720px) and (max-width: 1300px) { | ||
+ | #fwslider .slide_content_wrap { margin-left:50px; margin-top:15%;} | ||
+ | #fwslider .title { font-size:26px; } | ||
+ | #fwslider .description { font-size:12px;} | ||
+ | } | ||
+ | /* ------------------------------- 5. Media Query Max Width 719 ------------------------------- */ | ||
− | + | @media only screen and (max-width:719px) { | |
+ | #fwslider .slide_content_wrap { display:none; } | ||
+ | #fwslider .timers { display:none; } | ||
+ | #fwslider .slide_content {cursor: pointer;} | ||
− | + | } |
Revision as of 02:28, 18 July 2016
/* 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: 'Source Sans Pro', sans-serif; font-size: 100%; background: #ffffff; } .wrap{ margin:0 auto; width:80%; } /* start header */ .header_bg{ background: #000000; } .header{ padding: 2%; } .logo{ float: left; } /* start h_menu */ .header_bottom_right{ float:right; } .h_menu4 { float: right; margin-top: 4px; } .toggleMenu {
display: none;
background:#ff530d; width: 100%; color: #FFF; font-size: 1.5em; }
.nav {
list-style: none; margin-top: 0.5em;
} .nav:before, .nav:after {
content: " "; display: table;
} .nav:after {
clear: both;
} .nav ul {
list-style: none;
width: 13em; z-index:888; } .nav li a { display: block; padding: 10px 15px; color: #C4C4C4; font-size: 1.1em; text-transform: uppercase; font-weight: 400; -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-decoration: none; } .nav li{
} .nav li a:hover { color:#fff; }
.nav li {
position: relative;
} .nav li a.active{ color:#fff; } .nav > li > a.parent{ } .nav > li > a.root{ } .nav > li > a.root:hover{ } .nav > li > a.parent:hover{ } .nav > li {
float:left;
} .nav > li.hover > ul {
left:-1px; top:40px;
} .nav li li.hover ul {
left: 100%; -webkit-transition: background .2s linear;
-moz-transition: background .2s linear; -ms-transition: background .2s linear; -o-transition: background .2s linear; transition: background .2s linear; } .nav > li > li > a{ font-size: 0.85em; padding: 10px 20px; display: block; color: #555; background: #fff; position: relative; z-index: 9999; font-weight: normal; -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; width: 100%; text-decoration: none; margin: 0; text-transform: lowercase; } .nav li li { border-top:none; } .nav li li:hover{ border-top:none; } .nav li li a{ border-bottom: 1px solid rgb(34, 33, 33);
text-transform: uppercase; font-family: 'Source Sans Pro', sans-serif; color: #ffffff; font-size: 14px; background: #000000; padding: 12px; display: block; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s;
} .nav li li a:hover{ background: #FFFFFF;
color: #000000;
} .nav > li > ul {
position: absolute; left: -9999px; padding: 0; z-index: 9999; background:#fff;
} /***** Media Quries *****/ @media screen and (max-width: 800px) { .h_logo4{ text-align:center; float: none; margin: 4% 0; } .toggleMenu { padding: 5px 23px; width: 100%; display:block; } a.toggleMenu{ padding: 5px 0px;
color: #fff; font-size: 22px; font-weight: 400; text-decoration: none; text-align: center;
} .nav { margin-top: 0; } .nav li a { padding: 10px 15px;
background-color: #453E3E;
} .nav { background:#fff; width: 100%; }
.active { display: block; } .nav > li { float: none; } .nav > li > .parent { background-position: 95% 50% !important; } .nav ul { display: block; width: 100%; } .nav > li.hover > ul , .nav li li.hover ul { position: static; }
.header_bottom_right { float: right; width: 77%; text-align: center; } .h_menu4 { width: 40%; } .toggleMenu{ background-color: #202227; }
.h_menu4 { float: right; margin-top: 15px; } } @media screen and (max-width: 640px) { .toggleMenu { width:100%; } } @media screen and (max-width: 480px) { .toggleMenu { width:100%; } } @media screen and (max-width: 320px) { .toggleMenu { width:100%; } .h_menu4 {
width: 100%; float:none;
} .nav {
width: 100%;
} } /* start main */ .main_bg{ background: #ffffff; }
.main { padding: 2%; } .grids_1_of_3{ padding: 6% 2%; text-align:center; } .grid_1_of_3{ display: block; float:left; margin-left: 4%; } .grid_1_of_3:first-child { margin-left: 0; } .images_1_of_3 { width: 30.333%; } .images_1_of_3 img{ border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; } .images_1_of_3 h3{ color: #000000; text-transform: uppercase; margin-top: 0.8em; margin-bottom: 0.4em; font-size: 2em; font-weight: normal; font-family: 'Source Sans Pro', sans-serif; line-height: 1.8em; -webkit-text-stroke: 2px; letter-spacing: 1px; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .images_1_of_3 h3:hover{ color: #febd17; } .images_1_of_3 p { color: #000000; line-height: 1.8em; font-family: 'Source Sans Pro', sans-serif; font-size: 1em; } /* start top_mid_bg */ .top_grid_bg{ background: url('../images/bg1.jpg') no-repeat; background-size: 100%; } .top_grid{ padding:6% 2%; } .top_grid_text{ float: left; } .top_grid_text h2{ color: #ffffff; text-transform: capitalize; font-size: 2em; font-weight: normal; font-family: 'Source Sans Pro', sans-serif; letter-spacing: 1px; } .top_grid_btn{ float:right; } .top_grid_btn .btn{ padding: 12px 30px; border: 1px solid #ffffff; display: block; font-size: 1em; text-transform: uppercase; color: #ffffff; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .top_grid_btn .btn:hover{ background: #ffffff; color:#000000; } /* top_grid_portolio */ .top_grid_gallery{ margin-top: 4%; } .top_grid_portfoli{ margin-right: 3.6666666%; } .da-thumbs li ,.da-thumbs li img { display: block; position: relative; } .da-thumbs li { overflow: hidden; } .da-thumbs li article { position: absolute; background-image:url(../images/image_hover.png); background-repeat:repeat; width: 100%; height: 100%; } .da-thumbs li article.da-animate { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* Initial state classes: */ .da-slideFromTop { left: 0px; top: -100%; } .da-slideFromBottom { left: 0px; top: 100%; } .da-slideFromLeft { top: 0px; left: -100%; } .da-slideFromRight { top: 0px; left: 100%; } /* Final state classes: */ .da-slideTop { top: 0px; } .da-slideLeft { left: 0px; } .da-thumbs li article a { color:#fff; padding:20px; display:block; } .da-thumbs { text-align:center; } .da-thumbs li article h3{ color:#fff; font-size:1.5em; text-transform:capitalize; padding: 80px 0 20px 0; } .da-thumbs li article em{ margin-bottom:10px; color:#fff; display:block; } .da-thumbs li article span{ display:inline-block; } span.link_post{ display:block; width:35px; height:35px; background-color:#febd17; cursor:pointer; background-image:url(../images/link_post_icon.png); background-repeat:no-repeat; background-position:center; margin-right:10px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; } span.zoom{ overflow:hidden; display:block; width:35px; height:35px; background-color:#febd17; cursor:pointer; background-image:url(../images/zoom_icon.png); background-repeat:no-repeat; background-position:center; margin-left:10px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; } .portfolio_2col article h3{ padding-top:70px !important; } /* Image Grid */ .image_grid { float:left; overflow:hidden; position:relative; } .image_grid li{ float: left; line-height: 18px; color: #686f74; list-style:none; overflow:hidden; text-align:center; } /* start mid_grid_bg */ .mid_grid_bg{ background:#ffffff; } .mid_grid{ padding: 6% 2%; } .mid_grid h2{ color: #202227; text-transform: capitalize; font-size: 2.5em; -webkit-text-stroke: 2px; letter-spacing: 1px; } .mid_grid h3{ color: #777777; text-transform: capitalize; font-size: 1.5em; margin: 2% 0; } .mid_grid h3 a{ color: #202227; text-transform: uppercase; } .mid_grid h3 a:hover{ color: #555555; } .mid_grid .btn{ margin-top:8px; padding: 12px 30px; border: 1px solid #ffffff; background:#202227; display: inline-block; font-size: 1em; text-transform: uppercase; color: #ffffff; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .mid_grid .btn:hover{ background: #000000; } .mid_grid_left{ float:left; width: 56.333333%; margin-right: 4%; } .mid_grid_right{ float:right; width:38.333333%; } /* start btm_grid */ .btm_grid_bg{ background: url('../images/bg2.jpg') no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .btm_grid{ padding:6% 2%; } .btm_grid h2 { color: #ffffff; text-transform: capitalize; font-size: 2em; letter-spacing: 1px; } .btm_grid h3{ color: #ffffff; text-transform: uppercase; font-size: 1em; margin: 8% 0 4%; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .btm_grid h3:hover{ color: rgba(255, 255, 255, 0.69); } .btm_grid p{ margin-top:10%; color: rgba(255, 255, 255, 0.69); line-height: 1.6em; font-size: 1em; } .span_of_3 { margin-top: 3%; } .span1_of_3 { width: 30.3333%; float: left; margin-right: 4%; } .span1_of_3:nth-child(3){ margin-right: 0; } .span_of_3 h3.style{ opacity: 0.5; } .span_of_3 h4{ position: relative; display: inline-block; } .span_of_3 h4.divider{ position: absolute; background: url('../images/divider.png') no-repeat; width: 40px; height: 10px; } /* start testimonial */ .testimonial_bg{ background: #f4f4f4; } .testimonial{ padding:6% 2%; text-align: center; } .testimonial h2 { color: #202226; text-transform: capitalize; font-size: 3em; } .testimonial h3{ color: #A5A5A5; font-size: 1.5em; } .testimonial_text{ margin:4% 0; background: #ffffff; padding:4% 8%; position: relative; } .testimonial_text h4{ color: #BBBBBB; font-size: 2em; } .testimonial_text:after { content: ; position: absolute; width: 0; height: 0; border: 20px solid #FFFFFF; border-bottom: 0 solid rgba(0, 0, 0, 0)!important; border-right: 15px solid rgba(0, 0, 0, 0)!important; border-left: 15px solid rgba(0, 0, 0, 0)!important; left: 50%; bottom: -20px; margin-left: -10px; } .client_btn{ margin-bottom: 4%; } .client_btn a{ display: inline-block; text-transform: capitalize; font-size: 1.2em; padding: 8px 28px; color: #ffffff; background: #34BCEB; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius:30px; -o-border-radius:30px; } .client_btn a:hover{ background: #159ECD; } .client_pic ul li{ display: inline-block; margin-right: 10px; } .client_pic ul li a img{ margin-bottom: -4px; } .client_pic ul li a.active{ border-bottom: 5px solid #FEBD17; } .client_pic ul li a{ display:block; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .client_pic ul li a:hover{ border-bottom: 5px solid #FEBD17; } /* start clients */ .clients_bg{ background: #ffffff; } .clients{ padding:6% 2%; text-align: center; } .clients_txt{ padding-bottom: 4%; } .clients h2{ color: #2E2E2E; font-size: 1.8em; text-transform: uppercase; padding: 15px 0 0px 0px; float: left; } .clients h3{ float: right; width: 82%; background: url(../images/hd-bg.png) 0% 73% repeat-x; display: inline-block; padding: 10px; height: 15px; margin-top: 12px; } /* start tooltip */ .tool_tip1 { margin: 4% 0; } .tt-wrapper{ padding:4% 0 10% 0; } .tt-wrapper li:first-child{ margin-left: 0; } .tt-wrapper li{ float: left; margin-left: 4%; width:16.77777%; } .tt-wrapper li a{ display: block; outline: none; position: relative; height: 60px; } .tt-wrapper li .tt-sample{
background-position: 0px 0px;
} .tt-wrapper li a span{ text-transform:uppercase; width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-weight: normal; font-size: 14px; color: #ffffff; text-align: center; border: 4px solid #000; background:#000000; text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tt-wrapper li a span:before, .tt-wrapper li a span:after{ content: ; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1); } .tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #000; } .tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; }
/* start products */ .products_bg{ background: #f1f1f1; } .products{ padding:6% 2%; text-align: center; } .products h2{ background: #000000; font-size: 1.4em; color: #ffffff; padding: 10px; display: inline-block; text-transform: uppercase; } .products_of_3{ display:block; margin-top: 4%; } .product1_of_3{ float: left; width: 25.3333%; padding: 2%; margin-right: 4%; background: #ffffff; } .product1_of_3 h3{ font-size: 1.2em; color: #000000; text-transform: capitalize; -webkit-text-stroke: 0.5px; margin: 4% 0; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .product1_of_3 h3:hover{ color: #febd17; } .product1_of_3 h4{ font-size: 1.2em; color: #28AAD6; -webkit-text-stroke: 0.5px; } /* start footer_top */ .footer_top_bg{ background: #febd17; } .footer_top{ padding:6% 2%; text-align: center; } .footer_top h2{ color: #FFFFFF; font-size: 2.5em; } .footer_top h2 a{ color: #FFFFFF; text-decoration:underline; } .footer_top h2 a:hover{ text-decoration:none; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } /* start footer */ .footer_bg{ background: #000000; } .footer{ padding:6% 2%; } .span1_of_4{ float:left; width: 20.3333333%; margin-right: 4%; } .span1_of_4 h2{ font-size: 1.2em; color: #ffffff; text-transform:uppercase; margin-bottom: 8%; } .f_nav1 li{ display: inline-block; } .f_nav1 li a{ display: block; color: #ABABAB; line-height: 1.8em; font-size: 1em; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .f_nav1 li a:hover{ color: #ffffff; } .f_nav2 li{ margin:10px 5px 0 0; display: inline-block; background: #222222; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .f_nav2 li:hover{ background: #333333; } .f_nav2 li a{ display: block; color: #ABABAB; font-size: 1em; padding: 10px; } p.f_para{ color: #ABABAB; line-height: 1.8em; font-size: 1em; } /*search*/ .search{ margin-top:8%; position: relative; background: #ffffff; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; } .search input[type="text"]{ font-family: 'Source Sans Pro', sans-serif; padding:10px 16px; outline: none; color: #5a5a5a; background: none; border: none; width: 68.33333%; line-height: 1.5em; position: relative; font-size: 1em; text-transform: capitalize; } .search input[type="submit"]{ background: url('../images/search1.png') no-repeat 8px 12px; padding: 10px 0px; border: none; cursor: pointer; width: 14.33%; line-height: 1.5em; outline: none; position: absolute; } .search input[type="submit"]:hover { background:url('../images/search1_h.png') no-repeat 8px 12px; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .footer_btm{ margin-top:4%; border-top: 6px solid #222222; padding-top: 4%; } .copy{ float:left; } .copy p{ font-size: 1em; text-transform:uppercase; color: #B9B9B9; } .copy p span{ color: #ffffff; } .copy p a{ color:#ffffff; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .copy p a:hover{ color: #B9B9B9; } /*---top-social-icons-----*/ .social-icons { float: right; } .social-icons li{ float:left; margin-right:10px; display:inline-block; } .social-icons li a { height: 16px; width: 18px; display: block; background:url(../images/social_icons.png); } .social-icons li:first-child a{ background:url(../images/social_icons.png) 0% 0%; } .social-icons li:first-child a:hover{ background: url(../images/social_icons.png) 0% 90%; } .social-icons li:nth-child(2) a{ background: url(../images/social_icons.png) 8% 0%; } .social-icons li:nth-child(2) a:hover{ background: url(../images/social_icons.png) 8% 90%; } .social-icons li:nth-child(3) a{ background: url(../images/social_icons.png) 24% 0%; } .social-icons li:nth-child(3) a:hover{ background: url(../images/social_icons.png) 24% 90%; } .social-icons li:nth-child(4) a{ background: url(../images/social_icons.png) 32% 0%; } .social-icons li:nth-child(4) a:hover{ background: url(../images/social_icons.png) 32% 90%; } .social-icons li:nth-child(5) a{ background: url(../images/social_icons.png) 40% 0%; } .social-icons li:nth-child(5) a:hover{ background: url(../images/social_icons.png) 40% 90%; } .social-icons li:nth-child(6) a{ background: url(../images/social_icons.png) 49% 0%; } .social-icons li:nth-child(6) a:hover{ background: url(../images/social_icons.png) 49% 90%; } .social-icons li:nth-child(7) a{ background: url(../images/social_icons.png) 56% 0%; } .social-icons li:nth-child(7) a:hover{ background: url(../images/social_icons.png) 56% 90%; } .social-icons li:nth-child(8) a{ background: url(../images/social_icons.png) 66% 0%; } .social-icons li:nth-child(8) a:hover{ background: url(../images/social_icons.png) 66% 90%; } .social-icons li:nth-child(9) a{ background: url(../images/social_icons.png) 74% 0%; } .social-icons li:nth-child(9) a:hover{ background: url(../images/social_icons.png) 74% 90%; } .social-icons li:nth-child(10) a{ background: url(../images/social_icons.png) 83% 0%; } .social-icons li:nth-child(10) a:hover{ background: url(../images/social_icons.png) 83% 90%; } .social-icons li:nth-child(11) a{ background: url(../images/social_icons.png) 92% 0%; } .social-icons li:nth-child(11) a:hover{ background: url(../images/social_icons.png) 92% 90%; } .social-icons li:nth-child(12) a{ background: url(../images/social_icons.png) 100% 0%; } .social-icons li:nth-child(12) a:hover{ background: url(../images/social_icons.png) 100% 90%; } /* start portfolio */ .grids_1_of_3_btm{ text-align:center; margin-bottom: 4%; } /* start service*/ .ser-main{ display: block; margin: 4% 0; } .ser-grid{ float:right; } .ser-grid-list:nth-last-child(2){ margin-right: 0; } .ser-grid-list{ float: left; width: 21.33333%; margin-right: 4%; } .ser-grid-list img{ margin-top:15px; } .ser-grid-list p{ margin: 8% 0; } .ser-para { margin: 2% 0; } h2.style{ color: #202226; text-transform: capitalize; font-size: 3em; letter-spacing: -1px; } p.para{ color: #000000; line-height: 1.8em; font-size: 1em; } .btn_s { padding: 12px 30px; border: 1px solid #ffffff; background: #202227; display: inline-block; font-size: 1em; text-transform: uppercase; color: #ffffff; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .btn_s:hover { background: #000000; } /* start staff */ .staff h3 { margin-top:4%; color: #000000; text-transform: capitalize; font-size: 1.5em; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .staff h3:hover { color: #79C378; } /* start blog */ .blog { padding: 2%; } .blog_list{ margin-top: 2%; } .blog_list h5{ text-transform:capitalize; line-height: 1.5em; font-size:1.4em; color: #202227; -webkit-text-stroke: 0.2px; } .blog_list h5 a{ color: #febd17; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .blog_list h5 a:hover{ color: #202227; } .blog_para{ margin: 2% 0; } .blog_para p a{ float: left; margin-right: 4%; } .blog_para p a img{ margin-top: 10px; } .read_more1{ margin-top: 2%; } /***Contact*/ .contact{ padding:4% 2%; } .map{ margin: 2% 0; } .col{ display: block; } .contact-form{ position:relative; } .contact-form div{ padding:5px 0; } .contact-form span label{ color: #202227; display: block; font-size: 1em; padding-bottom: 5px; } .contact-form input[type="text"], .contact-form textarea { font-family: 'Source Sans Pro', 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: capitalize; } .contact-form textarea{ resize:none; height:120px; } .contact-form input[type="submit"]{ font-family: 'Source Sans Pro', sans-serif; cursor:pointer; -webkit-appearance: none; padding: 12px 30px; border: 1px solid #ffffff; background: #202227; display: inline-block; font-size: 1em; text-transform: uppercase; color: #ffffff; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .contact-form input[type="submit"]:hover{ background: #000000; } /* start feature */ .top_grid_bg1{ background: #ffffff } .top_grid_btn1 { float: right; } .top_grid_btn1 .btn { padding: 12px 30px; border: 1px solid #202227; display: block; font-size: 1em; text-transform: uppercase; color: #202227; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .top_grid_btn1 .btn:hover{ background: #202227; color:#ffffff; } /***** Media Quries *****/ @media only screen and (max-width: 1366px) { .wrap{ width:95%; } #fwslider .title { margin-left: 8%; } #fwslider .description { margin-left: 8%; } .image_grid { width: 21.333%; } .tool_tip > ul > li { width: 16.33333%; } } @media only screen and (max-width: 1280px) { .wrap{ width:95%; } .image_grid { width: 21.333%; } .tool_tip > ul > li { width: 16.33333%; } } @media only screen and (max-width: 1024px) { .wrap{ width:95%; } .tool_tip > ul > li > ul { margin-left: -50px; } .clients h3 { width: 76%; } .search input[type="text"] { width: 60.33333%; } .search input[type="submit"] { background: url('../images/search1.png') no-repeat 4px 12px; } .search input[type="submit"]:hover { background: url('../images/search1_h.png') no-repeat 4px 12px; } .images_1_of_3 h3 { font-size: 1.5em; } } @media only screen and (max-width: 800px) { .wrap{ width:95%; } .search input[type="text"] { padding: 8px 16px; } .logo { text-align:center; } .top-nav{ display:block; } .footer_top h2 { font-size: 2em; } .span1_of_4 { float: left; width: 45.333333%; margin: 4% 4% 0 0; } .span1_of_4:nth-child(2),.span1_of_4:nth-child(4){ margin-right: 0; } .search input[type="text"] { width: 75.33333%; } .footer_btm { text-align: center; } .social-icons { float: none; margin-bottom: 4%; } .social-icons li { float: none; } .copy { float: none; } .ser-grid-list { float: left; width: 45.33333%; margin-right: 4%; } .ser-grid-list:nth-child(2),.ser-grid-list:nth-child(4){ margin-right: 0 } .da-thumbs li article h3 { font-size: 1em; padding: 30px 0 20px 0; } h2.style { font-size: 2em; } } @media only screen and (max-width: 640px){ .wrap{ width:95%; } .testimonial h2 { font-size: 2em; } .testimonial_text h4 { font-size: 1.5em; } .clients h2 { font-size: 1.5em; } .clients h3 { width: 66%; } .clients_txt { padding-bottom: 10%; } .images_1_of_3 { width: 99.333%; } .grid_1_of_3 { margin-left: 0%; } .da-thumbs li article h3 { font-size: 1em; padding: 10px 0 10px 0; } } @media only screen and (max-width: 480px) { .wrap{ width:95%; } .images_1_of_3 { width: 99.333%; margin-top: 4%; } .images_1_of_3 h3 { margin: 0; } .grid_1_of_3 { margin-left: 0%; } .mid_grid h2 { font-size: 1.5em; -webkit-text-stroke: 1px; } .mid_grid h3 { font-size: 1em; } .span1_of_3 { margin-top:4%; width: 99.3333%; float: none; margin-right: 0%; } .testimonial_text h4 { font-size: 1em; } .clients h3 { width: 50%; } .tool_tip > ul > li > ul { width: 99.33333%; } .span1_of_4 { float: none; width: 99.333333%; margin: 4% 0% 0 0; } .span1_of_4 h2 { margin-bottom: 4%; } .search input[type="text"] { width: 80.33333%; } .ser-grid-list { float: left; width: 99.33333%; margin-right: 0%; } .ser-grid-list p { margin: 4% 0; } .tt-wrapper li a span { left: 36%; } } @media only screen and (max-width: 320px) { .wrap{ width:95%; } .top_grid_text { float: none; text-align:center; } .top_grid_btn { float: none; text-align:center; margin: 4% 0; } .mid_grid_left { float: none; width: 99.333333%; margin-right: 0%; } .mid_grid_right { margin-top:4%; float: none; width: 99.333333%; } .clients h3 { display: none; } .search input[type="text"] { width: 74.33333%; } .client_pic ul li { display: inline-block; margin-right: 4px; width: 17.3333%; } .logo { float: none; } .h_menu4 {
margin: 0 0 5px 0;
} .tt-wrapper li a span {
width: 87px; line-height: 15px; padding: 6px; font-size: 13px; border: 2px solid #000; bottom: 100px;
} .tt-wrapper li a span:after { bottom: -12px; margin-left: 3px; } }
/* Magnific Popup CSS */
.mfp-bg {
font-family: 'Source Sans Pro', sans-serif;
top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.9; filter: alpha(opacity=80); }
.mfp-wrap {
top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.mfp-container:before {
content: ; display: inline-block; height: 100%; vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%; cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; }
.mfp-zoom {
cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none; -moz-user-select: none; user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #cccccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; }
.mfp-preloader a {
color: #cccccc; }
.mfp-preloader a:hover {
color: white; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close, button.mfp-arrow {
overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; padding: 0; z-index: 1046; }
button::-moz-focus-inner {
padding: 0; border: 0; }
.mfp-close {
width:30px; height:30px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: white; font-style: normal; font-size: 28px; outline:none; } .mfp-close:hover, .mfp-close:focus { opacity: 9; } .mfp-close:active { top: 0px; }
.mfp-close-btn-in .mfp-close {
color: #333333; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
color: white; right: -6px; text-align: right; padding-right: 6px; width: 100%; outline:none; }
.mfp-counter {
position: absolute; top: 0; right: 0; color: #cccccc; font-size: 12px; line-height: 18px; }
.mfp-arrow {
position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
content: ; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; }
.mfp-arrow:after, .mfp-arrow .mfp-a {
border-top-width: 13px; border-bottom-width: 13px; top: 8px; }
.mfp-arrow:before, .mfp-arrow .mfp-b {
border-top-width: 21px; border-bottom-width: 21px; }
.mfp-arrow-left {
left: 0; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid white; margin-left: 31px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #3f3f3f; }
.mfp-arrow-right {
right: 0; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid white; margin-left: 39px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #3f3f3f; }
.mfp-iframe-holder {
padding-top: 40px; padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0; width: 100%; max-width: 900px; }
.mfp-iframe-scaler {
width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: black; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
/* Main image in popup */ img.mfp-img {
width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }
/* The shadow behind the image */ .mfp-figure:after {
content: ; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444444; }
.mfp-figure {
line-height: 0; }
.mfp-bottom-bar {
margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; }
.mfp-title {
text-align: left; line-height: 18px; color: #f3f3f3; word-break: break-word; padding-right: 36px; }
.mfp-figure small {
color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
/******** Plans List *******/ /* Styles for dialog window */
- small-dialog {
background: white; padding: 20px 30px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } /**
/**
* Fade-zoom animation for first dialog */
/* start state */ .my-mfp-zoom-in #small-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* Dark overlay, start state */ .my-mfp-zoom-in.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.9;
} /* animate out */ .my-mfp-zoom-in.mfp-removing.mfp-bg{
opacity: 0;
} /* pop_up */ .pop_up h2{ text-transform: capitalize; font-size: 2em; color: #202227; margin-bottom: 2%; } .pop_up p{ font-size: 1em; color: #555555; line-height: 1.8em; }
- small-dialog1{
background: white; padding: 20px 30px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } /**
/**
* Fade-zoom animation for first dialog */
/* start state */ .my-mfp-zoom-in #small-dialog1 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog1 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog1{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* start state */
- small-dialog2{
background: white; padding: 20px 30px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } /** .my-mfp-zoom-in #small-dialog2{ opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog2 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog2{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } .pop_up p a{ font-size: 1em; color: #555555; line-height: 1.8em; }
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
background: #ffffff;
}
/* ------------------------------- 3. Slider Styles ------------------------------- */
- fwslider {
position: relative; width:100%;
}
- fwslider .slide {
display: none; position: absolute; top:0; left:0; z-index: 0; width:100%;
}
- fwslider .slide img {
width:100%;
}
- fwslider .slidePrev {
background:#000; width:50px; height:50px; position: absolute; top:50%; left:-50px; opacity:0.5; z-index: 10;
}
- fwslider .slidePrev span {
background-image: url("../images/arrows.png"); width: 45px; height: 45px; float: left; background-position: -10% 50%; background-repeat: no-repeat; cursor: pointer; }
- fwslider .slideNext {
background:#000; width:50px; height:50px; position: absolute; top:50%; right:-50px; opacity:0.5; z-index: 10;
}
- fwslider .slideNext span {
background-image:url("../images/arrows.png"); width:45px; height:45px; float:left; background-position:90% 50%; background-repeat: no-repeat; cursor: pointer;
}
- fwslider .timers {
height:4px; position: absolute; bottom:15px; right:0; z-index: 3;
}
- fwslider .timer {
height:4px; width:40px; background-color: #000; float:left; margin-right: 10px;
}
- fwslider .progress {
height:4px; width:0%; background-color: #FC3; float:left;
}
- fwslider .slide_content {
top:0; left:0; position: absolute; width:100%; height:100%;
}
- fwslider .slide_content_wrap { /* Slider Text Content Container Style */
max-width:1280px; margin:15% auto;
}
- fwslider .title { /* Slider Title Style */
margin-left:4%; text-transform: capitalize; opacity: 0; color: #fff; font-size: 3em; background: #febd17; padding: 16px 40px; float: left; font-style: normal; font-weight: 400; -webkit-text-stroke: 0px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; }
- fwslider .description { /* Slider Description Style */
margin-left:4%;
opacity: 0; color:#ffffff; font-size:18px; background:#000000; padding:10px; clear:both; float:left; margin-top:20px; line-height:24px; font-style: normal; font-weight: 400;
border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; } /* ------------------------------- 4. Media Query Max Width 1300, Min Width 720 ------------------------------- */ @media only screen and (min-width:720px) and (max-width: 1300px) {
#fwslider .slide_content_wrap { margin-left:50px; margin-top:15%;} #fwslider .title { font-size:26px; } #fwslider .description { font-size:12px;}
}
/* ------------------------------- 5. Media Query Max Width 719 ------------------------------- */
@media only screen and (max-width:719px) {
#fwslider .slide_content_wrap { display:none; } #fwslider .timers { display:none; } #fwslider .slide_content {cursor: pointer;}
}