Difference between revisions of "Template:TJUSLS China"

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

Latest revision as of 12:16, 19 July 2016