Difference between revisions of "Template:TJUSLS China"

Line 1: Line 1:
−
<html>
+
/*
 +
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;
 +
}
  
−
<style>
+
.nav {
−
 
+
    list-style: none;
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
    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;
 +
}
  
−
#sideMenu, #top_title {display:none;}
+
.nav li {
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
    position: relative;
−
body {background-color:white; }
+
}
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
.nav li a.active{
−
 
+
color:#fff;
−
 
+
}
−
/********************************* MENU ********************************/
+
.nav > li > a.parent{
−
/* Wrapper for the menu */
+
}
−
.menu_wrapper {  
+
.nav > li > a.root{
−
width:150px;  
+
}
−
height:100vh;  
+
.nav > li > a.root:hover{
−
position:fixed;  
+
}
−
padding:0px;
+
.nav > li > a.parent:hover{
−
float:left;  
+
}
−
background-color:#f2f2f2;  
+
.nav > li {
−
text-align:left;
+
    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 {
−
/* styling for the menu items */
+
padding: 5px 23px;
−
.menu_item {
+
width: 100%;
−
width:100%;
+
display:block;
−
margin:-2px 0px 0px -20px;
+
−
padding: 10px 10px;
+
−
border-bottom: 1px solid #d3d3d3;
+
−
font-weight:bold;
+
−
color:#000000;  
+
−
cursor: pointer;  
+
 
}
 
}
−
 
+
a.toggleMenu{
−
/* when hovering on a menu item */
+
  padding: 5px 0px;
−
.menu_item:hover {  
+
  color: #fff;
−
color:#000000;  
+
  font-size: 22px;
−
background-color: #72c9b6;
+
  font-weight: 400;
 +
  text-decoration: none;
 +
  text-align: center;
 
}
 
}
−
 
+
.nav {
−
/* decoration icon for the menu buttons*/
+
margin-top: 0;
−
.icon {
+
}
−
float:right;
+
.nav li a {
−
font-size:16px;  
+
  padding: 10px 15px;
−
font-weight:bold;  
+
  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;
 
}
 
}
 
 
−
/* this is the icon for when the content is collapsed */
+
.h_menu4 {
−
.plus::before {
+
float: right;
−
content: "+";  
+
margin-top: 15px;
 +
}
 +
}
 +
@media screen and (max-width: 640px) {
 +
.toggleMenu {
 +
width:100%;
 
}
 
}
−
/* this is the icon for when the content is expanded */
+
}
−
.less::before {
+
@media screen and (max-width: 480px) {
−
content: "–";  
+
.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;
 +
}
  
−
/* styling for the ul that creates the buttons */
+
.main {
−
ul.menu_items {
+
padding: 2%;
−
width:100%;  
+
}
−
margin-left:0px;  
+
.grids_1_of_3{
−
padding:0px;
+
padding: 6% 2%;
−
list-style: none;  
+
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 {
−
/* styling for the li that are the menu items */
+
width: 21.333%;
−
.menu_items li {  
+
}
−
width:90%;  
+
.tool_tip > ul > li {
−
margin-top:-2px;  
+
width: 16.33333%;
−
padding: 15px 0px 15px 15px ;  
+
}
 +
}
 +
@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;
−
border-bottom: 1px solid #d3d3d3; 
 
−
text-align:left;
 
−
font-weight:bold;
 
−
text-decoration:none;
 
−
color:#000000;
 
−
list-style-type:none;
 
−
cursor:pointer;
 
−
-webkit-transition: all 0.4s ease;
 
−
-moz-transition: all 0.4s ease;
 
−
-ms-transition: all 0.4s ease;
 
−
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 
 
}
 
}
−
 
+
.footer_top h2 {
−
.menu_item a {
+
font-size: 2em;
−
width: 100%;
+
−
margin-left: -20px;
+
−
padding: 11px 90px 12px 20px;
+
−
text-decoration: none;
+
−
color:black;
+
 
}
 
}
−
 
+
.span1_of_4 {
−
/* When hovering on a menu item */
+
float: left;
−
.menu_items li:hover {  
+
width: 45.333333%;
−
background-color:#72c9b6;
+
margin: 4% 4% 0 0;
−
color: #000000;
+
 
}
 
}
−
 
+
.span1_of_4:nth-child(2),.span1_of_4:nth-child(4){
−
/* styling for the submenus */
+
margin-right: 0;
−
.submenu {
+
−
width:100%;
+
−
display: none; 
+
−
font-weight:bold;
+
−
cursor:pointer;
+
−
 
+
 
}
 
}
−
 
+
.search input[type="text"] {
−
/* moving the margin for the submenu ul list */
+
width: 75.33333%;
−
ul.submenu {  
+
−
width: 100%;
+
−
margin: 10px 0px -11px 0px;
+
−
list-style: none;
+
 
}
 
}
−
 
+
.footer_btm {
−
/*styling for the submenu buttons */
+
text-align: center;
−
.submenu li {  
+
−
width: 100%;
+
−
margin-left: 10px;
+
−
margin-bottom: 0px;
+
 
}
 
}
−
 
+
.social-icons {
−
 
+
float: none;
−
/* hover state for the submenu buttons */
+
margin-bottom: 4%;
−
.submenu li a {
+
−
width: 100%;  
+
−
padding: 5px 10px;
+
−
display: inline-block;
+
−
border-bottom: 1px solid #d3d3d3;
+
−
background-color:white;
+
−
text-decoration:none;
+
−
color:#000000;  
+
 
}
 
}
−
 
+
.social-icons li {
−
 
+
float: none;
−
 
+
−
.submenu li a:hover  {
+
−
background-color:#000000;
+
−
color: #72c9b6;
+
 
}
 
}
−
 
+
.copy {
−
 
+
float: none;
−
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
+
−
.collapsable_menu_control {  
+
−
width:100%;
+
−
padding: 15px 0px;
+
−
display:none;
+
−
background-color:#000000;
+
−
text-align:center; 
+
−
font-weight:bold;
+
−
color:#72c9b6;
+
−
cursor:pointer;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;  
+
 
}
 
}
−
 
+
.ser-grid-list {
−
/* when hovering on that button */
+
float: left;
−
.collapsable_menu_control:hover {  
+
width: 45.33333%;
−
background-color: #72c9b6;
+
margin-right: 4%;
−
color:#000000;
+
 
}
 
}
−
 
+
.ser-grid-list:nth-child(2),.ser-grid-list:nth-child(4){
−
/********************************* CONTENT OF THE PAGE ********************************/
+
margin-right: 0
−
 
+
−
/* Wrapper for the content */
+
−
.content_wrapper {
+
−
width: 85%;
+
−
margin-left:150px;
+
−
padding:10px 0px;
+
−
float:left;
+
−
background-color:white;
+
 
}
 
}
−
 
+
.da-thumbs li article h3 {
−
/*LAYOUT */
+
font-size: 1em;
−
.column  {  
+
padding: 30px 0 20px 0;
−
padding: 10px 0px;
+
−
float:left;
+
−
background-color:white;  
+
 
}
 
}
−
 
+
h2.style {
−
.full_size {
+
font-size: 2em;
−
width:100%;  
+
 
}
 
}
−
 
+
}
−
.full_size img {  
+
@media only screen and (max-width: 640px){
−
padding: 10px 15px;
+
.wrap{
−
width:96.5%;  
+
width:95%;
 
}
 
}
−
 
+
.testimonial h2 {
−
.half_size {
+
font-size: 2em;
−
width: 50%;  
+
 
}
 
}
−
.half_size img {  
+
.testimonial_text h4 {
−
padding: 10px 15px;
+
font-size: 1.5em;
−
width: 93%;  
+
 
}
 
}
−
 
+
.clients h2 {
−
 
+
font-size: 1.5em;
−
.clear {
+
−
clear:both;
+
 
}
 
}
−
 
+
.clients h3 {
−
.highlight {  
+
width: 66%;
−
width: 90%;
+
−
margin: auto;
+
−
padding: 15px 5px;
+
−
background-color: #f2f2f2;  
+
 
}
 
}
−
 
+
.clients_txt {
−
.judges-will-not-evaluate {
+
padding-bottom: 10%;
−
border: 4px solid #72c9b6;
+
−
display: block;
+
−
margin: 5px 15px;
+
−
width: 95%;
+
−
font-weight:bold;
+
 
}
 
}
−
 
+
.images_1_of_3 {
−
 
+
width: 99.333%;
−
/*STYLING */
+
−
 
+
−
/* styling for the titles */
+
−
.content_wrapper h1, .content_wrapper h2 {
+
−
padding:5px 15px;  
+
−
border-bottom:0px;
+
−
color:#72c9b6;
+
−
 
+
 
}
 
}
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
+
.grid_1_of_3 {
−
padding:5px 15px;
+
margin-left: 0%;
−
border-bottom:0px;
+
−
color: #000000;
+
 
}
 
}
−
 
+
.da-thumbs li article h3 {
−
 
+
font-size: 1em;
−
/* font and text */
+
padding: 10px 0 10px 0;
−
.content_wrapper p {  
+
−
padding:0px 15px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;  
+
 
}
 
}
−
 
+
}
−
/* Links */
+
@media only screen and (max-width: 480px) {
−
.content_wrapper a {  
+
.wrap{
−
font-weight: bold;
+
width:95%;
−
text-decoration: underline;
+
−
text-decoration-color:#72c9b6;
+
−
color: #72c9b6;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
 
}
 
}
−
 
+
.images_1_of_3 {
−
/* hover for the links */
+
width: 99.333%;
−
.content_wrapper a:hover {  
+
margin-top: 4%;
−
text-decoration:none;
+
−
color:#000000;
+
 
}
 
}
−
 
+
.images_1_of_3 h3 {
−
/* non numbered lists */
+
margin: 0;
−
.content_wrapper ul {
+
−
padding:0px 20px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;  
+
 
}
 
}
−
 
+
.grid_1_of_3 {
−
/* numbered lists */
+
margin-left: 0%;
−
.content_wrapper ol {
+
−
padding:0px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;  
+
 
}
 
}
−
 
+
.mid_grid h2 {
−
/* Table */
+
font-size: 1.5em;
−
.content_wrapper table {  
+
-webkit-text-stroke: 1px;
−
width: 97%;  
+
−
margin:15px 10px;
+
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;  
+
 
}
 
}
−
 
+
.mid_grid h3 {
−
/* table cells */
+
font-size: 1em;
−
.content_wrapper  td {  
+
−
padding: 10px;
+
−
vertical-align: text-top;
+
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;  
+
 
}
 
}
−
 
+
.span1_of_3 {
−
/* table headers */
+
margin-top:4%;
−
.content_wrapper th {  
+
width: 99.3333%;
−
padding: 10px;
+
float: none;
−
vertical-align: text-top;  
+
margin-right: 0%;
−
border: 1px solid #d3d3d3;  
+
−
border-collapse: collapse;  
+
−
background-color:#f2f2f2;  
+
 
}
 
}
−
 
+
.testimonial_text h4 {
−
/* Button class */
+
font-size: 1em;
−
.button_click {  
+
−
margin: 10px auto;
+
−
padding: 15px; width:12%; 
+
−
text-align:center;
+
−
font-weight:bold;
+
−
background-color: #72c9b6;
+
−
cursor:pointer; 
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;  
+
 
}
 
}
−
 
+
.clients h3 {
−
/* button class on hover */
+
width: 50%;
−
.button_click:hover {
+
−
background-color:#000000;
+
−
color:#72c9b6;
+
 
}
 
}
−
 
+
.tool_tip > ul > li > ul {
−
/********************************* RESPONSIVE STYLING ********************************/
+
width: 99.33333%;
−
 
+
−
/* IF THE SCREEN IS LESS THAN 1000PX */
+
−
 
+
−
@media only screen and (max-width: 1000px) {
+
−
 
+
−
#content {width:100%; }
+
−
.menu_wrapper {width:15%;}
+
−
.content_wrapper {margin-left: 15%;}
+
−
.menu_item {display:block;}
+
−
.icon {display:none;}
+
−
.highlight {padding:10px 0px;}
+
 
}
 
}
−
 
+
.span1_of_4 {
−
 
+
float: none;
−
/* IF THE SCREEN IS LESS THAN 680PX */
+
width: 99.333333%;
−
 
+
margin: 4% 0% 0 0;
−
@media only screen and (max-width: 680px) {
+
}
−
.collapsable_menu_control { display:block;}
+
.span1_of_4 h2 {
−
.menu_item {display:none;}
+
margin-bottom: 4%;
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
+
}
−
.content_wrapper {width:100%; margin-left:0px;}
+
.search input[type="text"] {
−
.column.half_size {width:100%; }
+
width: 80.33333%;
−
.column img { width: 100%; padding: 5px 0px;}
+
}
−
.icon {display:block;}
+
.ser-grid-list {
−
.highlight {padding:15px 5px;}
+
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 {
−
</style>
+
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;
 +
}
 +
}
  
  
  
  
−
<!--- THIS IS WHERE THE HTML BEGINS --->
+
/* 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; }
  
−
<!-- This tells the browser that your page is responsive -->
+
.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; }
  
−
<head>
+
.mfp-container:before {
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
  content: '';
−
</head>
+
  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; }
  
−
<div class="menu_wrapper" >
+
.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; }
  
−
<div class="collapsable_menu_control"> MENU ▤ </div>
+
.mfp-close,
 +
.mfp-arrow,
 +
.mfp-preloader,
 +
.mfp-counter {
 +
  -webkit-user-select: none;
 +
  -moz-user-select: none;
 +
  user-select: none; }
  
−
<ul id="accordion" class="accordion">
+
.mfp-loading.mfp-figure {
 +
  display: none; }
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:TJUSLS_China">HOME </a> </li>
+
.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; }
  
−
<li class="menu_item"> <div class="icon plus"></div> TEAM
+
.mfp-preloader a {
−
<ul class="submenu">
+
  color: #cccccc; }
−
<li> <a href=" https://2016.igem.org/Team:TJUSLS_China/Team"> Team  </a> </li>
+
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Collaborations">★  Collaborations </a> </li>
+
−
                    </ul>
+
−
                </li>
+
  
−
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
+
.mfp-preloader a:hover {
−
<ul class="submenu">
+
  color: white; }
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Description"> ★  Description </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Design"> ★ Design </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Experiments"> Experiments </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Proof"> ★ Proof of Concept </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Demonstrate"> ★ Demonstrate </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Modeling">  Modeling </a></li>
+
−
                                <li> <a href="https://2016.igem.org/Team:TJUSLS_China/Results"> Results </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Notebook"> Notebook </a></li>
+
−
                    </ul>
+
−
                </li>
+
  
−
<li class="menu_item"> <div class="icon plus"></div> PARTS 
+
.mfp-s-ready .mfp-preloader {
−
<ul class="submenu">
+
  display: none; }
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Parts">Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Basic_Part"> ★ Basic Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Composite_Part"> ★ Composite Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Part_Collection"> ★ Part Collection </a></li>
+
−
                    </ul>
+
−
                </li>
+
  
 +
.mfp-s-error .mfp-content {
 +
  display: none; }
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:TJUSLS_China/Safety"> SAFETY </a> </li>
+
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; }
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:TFJUSLS_China/Attributions">★ ATTRIBUTIONS </a></li>
+
.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; }
  
−
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
+
.mfp-image-holder .mfp-close,
−
<ul class="submenu">
+
.mfp-iframe-holder .mfp-close {
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Human_Practices"> Human Practices </a></li>
+
  color: white;
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/HP/Silver">★ Silver </a></li>
+
  right: -6px;
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/HP/Gold">★ Gold </a></li>
+
  text-align: right;
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Integrated_Practices"> ★ Integrated Practices </a></li>
+
  padding-right: 6px;
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Engagement">★ Engagement </a></li>
+
  width: 100%;
−
                    </ul>
+
  outline:none;
−
                </li>
+
}
  
 +
.mfp-counter {
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
  color: #cccccc;
 +
  font-size: 12px;
 +
  line-height: 18px; }
  
−
<li class="menu_item"> <div class="icon plus"></div> AWARDS
+
.mfp-arrow {
−
<ul class="submenu">
+
  position: absolute;
−
<li><a href="https://2016.igem.org/Team:TJUSLS_China/Entrepreneurship"> ★ Entrepreneurship </a></li>
+
  opacity: 0.65;
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Hardware"> ★ Hardware </a></li>
+
  margin: 0;
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Software">★ Software </a></li>
+
  top: 50%;
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Measurement">★  Measurement </a></li>
+
  margin-top: -55px;
−
<li> <a href="https://2016.igem.org/Team:TJUSLS_China/Model">★ Model </a></li>
+
  padding: 0;
 +
  width: 90px;
 +
  height: 110px;
 +
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  
−
                    </ul>
+
.mfp-arrow:active {
−
                </li>
+
  margin-top: -54px; }
−
</ul>
+
  
−
</div>
+
.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; }
  
−
<div class="content_wrapper">
+
.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; }
  
−
<h1 id="team_name">  </h1>
+
.mfp-iframe-holder .mfp-close {
−
<h4 id="page_name">  </h4>
+
  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;
 +
}
 +
/**
  
−
<script>
+
/**
 +
* Fade-zoom animation for first dialog
 +
*/
  
−
// This is the jquery part of your template. Try not modify any of this code since it makes your menu work.
+
/* 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;
 +
}
 +
/**
  
−
$(document).ready(function() {
+
/**
 +
* Fade-zoom animation for first dialog
 +
*/
  
−
$("#HQ_page").attr('id','');
+
/* 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;
 +
}
  
−
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
 
−
$("#team_name").html( wgPageName );
 
−
}
 
  
−
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 
−
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 
−
}
 
  
−
else {
 
−
// this adds the team's name as an h1
 
−
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
 
  
−
// this adds the page's title as an h4
+
body {
−
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
+
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%;
 +
}
  
−
$('#accordion').find('.menu_item').click(function(){
+
#fwslider .slidePrev {
 +
    background:#000;
 +
    width:50px;
 +
    height:50px;
 +
    position: absolute;
 +
    top:50%;
 +
    left:-50px;
 +
    opacity:0.5;
 +
    z-index: 10;
 +
}
  
−
//Expand or collapse this panel
+
#fwslider .slidePrev span {
−
submenu = $(this).find('.submenu');
+
background-image: url("../images/arrows.png");
−
submenu.toggle();
+
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;
 +
}
  
−
icon = $(this).find('.icon');
+
#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;
 +
}
  
−
if ( !$( submenu ).is(':visible') ) {
+
#fwslider .timers {
−
icon.removeClass("less").addClass("plus");
+
    height:4px;
−
}
+
    position: absolute;
−
else {
+
    bottom:15px;
−
icon.removeClass("plus").addClass("less");
+
    right:0;
−
}
+
    z-index: 3;
 +
}
  
−
//Hide the other panels
+
#fwslider .timer {
−
$(".submenu").not(submenu).hide();
+
    height:4px;
−
$(".icon").not(icon).removeClass("less").addClass("plus");
+
    width:40px;
−
});
+
    background-color: #000;
 +
    float:left;
 +
    margin-right: 10px;
 +
}
  
 +
#fwslider .progress {
 +
    height:4px;
 +
    width:0%;
 +
    background-color: #FC3;
 +
    float:left;
 +
}
  
−
$(".collapsable_menu_control").click(function() {
+
#fwslider .slide_content {
−
$(".menu_item").toggle();
+
    top:0;
−
});
+
    left:0;
 +
    position: absolute;
 +
    width:100%;
 +
    height:100%;
 +
}
  
−
$( window ).resize(function() {
+
#fwslider .slide_content_wrap { /* Slider Text Content Container Style */
−
$(".menu_item").show();
+
    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 ------------------------------- */
  
−
</script>
+
@media only screen and (max-width:719px) {
  
 +
    #fwslider .slide_content_wrap { display:none; }
 +
    #fwslider .timers { display:none; }
 +
    #fwslider .slide_content {cursor: pointer;}
  
−
</html>
+
}

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 */

  1. 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; }

  1. 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 */

  1. 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 ------------------------------- */

  1. fwslider {
   position: relative;
   width:100%;

}

  1. fwslider .slide {
   display: none;
   position: absolute;
   top:0;
   left:0;
   z-index: 0;
   width:100%;

}

  1. fwslider .slide img {
   width:100%;

}

  1. fwslider .slidePrev {
   background:#000;
   width:50px;
   height:50px;
   position: absolute;
   top:50%;
   left:-50px;
   opacity:0.5;
   z-index: 10;

}

  1. 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; }

  1. fwslider .slideNext {
   background:#000;
   width:50px;
   height:50px;
   position: absolute;
   top:50%;
   right:-50px;
   opacity:0.5;
   z-index: 10;

}

  1. 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;

}

  1. fwslider .timers {
   height:4px;
   position: absolute;
   bottom:15px;
   right:0;
   z-index: 3;

}

  1. fwslider .timer {
   height:4px;
   width:40px;
   background-color: #000;
   float:left;
   margin-right: 10px;

}

  1. fwslider .progress {
   height:4px;
   width:0%;
   background-color: #FC3;
   float:left;

}

  1. fwslider .slide_content {
   top:0;
   left:0;
   position: absolute;
   width:100%;
   height:100%;

}

  1. fwslider .slide_content_wrap { /* Slider Text Content Container Style */
   max-width:1280px;
   margin:15% auto;

}

  1. 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; }

  1. 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;}

}