Difference between revisions of "Template:Tsinghua-A/css/style"

Line 186: Line 186:
 
.fixed{
 
.fixed{
 
position: fixed;
 
position: fixed;
−
top: 21px;
+
top: 16px;
 
width: 100%;
 
width: 100%;
 
margin: 0 auto;
 
margin: 0 auto;

Revision as of 15:38, 10 October 2018

/*-- Author: W3layouts Author URL: http://w3layouts.com License: Creative Commons Attribution 3.0 Unported License URL: http://creativecommons.org/licenses/by/3.0/ --*/

  •  ::selection {
   background:#666; 
   color:#DDD;

}

  •  ::-webkit-scrollbar {
   width: 8px;

}

  •  ::-webkit-scrollbar-thumb {
   background:rgba(10,10,10,0.4);

} img { 

   user-select:none;

}

body{ 

   min-width:1200px;

margin:0; padding:0; font-family: 'Open Sans', sans-serif; background:#fff; 

   animation: animate 0.7s infinite;
   overflow-x: hidden;

} @keyframes animate{ 

   0%{ cursor: url("../images/dna1.png") 2 2, auto; }
   12.5%{ cursor: url("../images/dna2.png") 2 2, auto; }
   25%{ cursor: url("../images/dna3.png") 2 2, auto; }
   37.5%{ cursor: url("../images/dna4.png") 2 2, auto; }
   50%{ cursor: url("../images/dna5.png") 2 2, auto; }
   62.5%{ cursor: url("../images/dna6.png") 2 2, auto; }
   75%{ cursor: url("../images/dna7.png") 2 2, auto; }
   87.5%{ cursor: url("../images/dna8.png") 2 2, auto; }
   100%{ cursor: url("../images/dna1.png") 2 2, auto; }

} body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } body a:hover{ text-decoration:none; color:0; } p{ margin:0; } ul{ margin:0; padding:0; } .container { padding:0; margin:0; width: 90% } /*--- header-top ----*/ .header-logo{ text-align:center; margin: 5em 0 2.5em 0; } .header-top { background:url(../images/bg.jpg) no-repeat 0px 0px; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; } .header-text { text-align:center; margin-top: 3%; } .header-text h1 { color:#FFFFFF; font-family: 'Open Sans', sans-serif; letter-spacing:2px; font-size:60px; } .header-text span { color:#9F449B; font-size:60px; } .header-sub-text { text-align:center; margin-bottom: 7%; } .header-sub-text h2 { font-family: 'Lato', sans-serif; font-weight:300; color:#FFFFFF; font-size: 60px; } .header-sub-text p { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 21px; color: rgba(255, 255, 255, 0.79); margin-top: 0.8em; } .header-sub-text small { display:block; } .header-top-grids { text-align:center; width: 48%; margin: 0 auto; } .grid-left { text-align:center; } .grid-right { text-align:center; } /*--- header-bottom ----*/ .logo{ float:left; 

   margin-top: 13px;
   margin-left: 40px;

} .logo img.nav-logo{ 

   height: 60px;

} /*--- sicky Nav---*/ /*---- Fixed Navigation ----*/ div.top-nav{ 

   height: 84.42px;

} .top-nav nav{ 

   background-color:#fff;
   height:80px;

} .top-nav ul{ 

   /*height:80px;*/

margin:0; padding:0; text-align:center; 

   background-color:#fff;

} .top-nav > nav > ul > li{ display:inline-block; 

   line-height:80px;

} .top-nav > nav > ul > li > a{ padding:0 1.5em 0 0; display:block; text-decoration:none; color:#333; font-weight:400; font-size:18px; transition:0.5s ease; text-transform:uppercase; } .top-nav > nav > ul > li.active > a{ color:#9F449B; } .top-nav > nav > ul > li > a:hover, .dropdown-menu:hover + a { color:#9F449B; 

   text-decoration:underline;
   font-size: 24px;

transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .fixed{ position: fixed; top: 16px; width: 100%; margin: 0 auto; z-index: 1; } .fixed ul{ transition:.3s; 

   transition-property: box-shadow;
   box-shadow:
       0 4px 5px 0px rgba(0, 0, 0, 0.08),
       0 1px 10px 0px rgba(0, 0, 0, 0.04),
       0 2px 4px -1px rgba(0, 0, 0, 0.3);

} .fixed:hover ul{ 

   box-shadow:
       0 4px 5px 0 rgba(0, 0, 0, 0.14),
       0 1px 10px 0 rgba(0, 0, 0, 0.12),
       0 2px 4px -1px rgba(0, 0, 0, 0.4);

} .nav-palceholder{ margin:0 0 40px 0; } .about-nav, .about-nav1, .about-nav2, .about-nav3, .about-nav4, .about-nav5, .about-nav6, .about-nav label, .about-nav1 label, .about-nav2 label, .about-nav3 label, .about-nav4 label, .about-nav5 label, .about-nav6 label{ cursor:pointer; text-align: center; } /*------ about-nav -----*/ .about-nav, .about-nav1, .about-nav2, .about-nav3, .about-nav4, .about-nav5, .about-nav6{ width:180px; height:180px; display:inline-block; background:url(../images/bha.png) no-repeat 0px 0px; 

   background-position: center;

} .about-nav:hover, .about-nav1:hover, .about-nav2:hover, .about-nav3:hover, .about-nav4:hover, .about-nav5:hover, .about-nav6:hover{ background:url(../images/hoverbg.png) no-repeat 0px 0px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .about-nav label, .about-nav1 label, .about-nav2 label, .about-nav3 label, .about-nav4 label, .about-nav5 label, .about-nav6 label{ color:#FFF; display:block; font-family: 'Lato', sans-serif; font-size:16px; } .about-nav a, .about-nav1 a, .about-nav2 a, .about-nav3 a, .about-nav4 a, .about-nav5 a, .about-nav6 a{ padding-top:3em; display:inline-block; } .about-nav span.nav-icon{ background:url(../images/Hardwareicon.png) no-repeat 0px 0px; } .about-nav1 span.nav-icon1{ background:url(../images/Collaborationicon.png) no-repeat 0px 0px; } .about-nav2 span.nav-icon2{ background:url(../images/HumanPracticeicon.png) no-repeat 0px 0px; } .about-nav3 span.nav-icon3{ background:url(../images/Teamicon.png) no-repeat 0px 0px; } .about-nav4 span.nav-icon4{ background:url(../images/Experimenticon.png) no-repeat 0px 0px; } .about-nav5 span.nav-icon5{ background:url(../images/Modelicon.png) no-repeat 0px 0px; } .about-nav6 span.nav-icon6{ background:url(../images/Attributionicon.png) no-repeat 0px 0px; } .about-nav span.nav-icon, .about-nav1 span.nav-icon1, .about-nav2 span.nav-icon2, .about-nav3 span.nav-icon3, .about-nav4 span.nav-icon4, .about-nav5 span.nav-icon5, .about-nav6 span.nav-icon6{ width:65px; height:72px; display:inline-block; 

   background-size: contain;

} .arrow-grid { width:10%; margin:0 auto; } .arrow a { width:120px; height:120px; margin-bottom: 25%; display:inline-block; background:url(../images/arrow.png) no-repeat 0px 0px; } .arrow a:hover { background:url(../images/arrow1.png) no-repeat 0px 0px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; }

/*--- content ----*/ .row { margin:10% 0; position:relative; } .content-top-grid { text-align:center; font-family: 'Lato', sans-serif; color:#676767; } .content-top-grid sub { width:200px; height:200px; display:inline-block; background:url(../images/1.png) no-repeat 0px 0px; } .content-top-grid:hover span { background:url(../images/2hr.png) no-repeat 0px 0px; } .content-top-grid span { background:url(../images/2.png) no-repeat 0px 0px; width:200px; height:200px; display:inline-block; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .content-top-grid small { background:url(../images/3.png) no-repeat 0px 0px; width:200px; height:200px; display:inline-block; top:0%; right:16%; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .content-top-grid:hover small { background:url(../images/3hr.png) no-repeat 0px 0px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .content-top-grid big { background:url(../images/4.png) no-repeat 0px 0px; width:200px; height:200px; display:inline-block; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .content-top-grid:hover big { background:url(../images/4hr.png) no-repeat 0px 0px; } .content-top-grid h3 { margin-top: 10%; } .content-top-grid p { font-size:16px; font-weight:400; margin-top: 11%; line-height: 28px; } /*--- content-about ----*/ .content-about-text { position:relative; } .content-about h2 { text-align:center; color:#676767; font-family: 'Open Sans', sans-serif; letter-spacing:2px; font-size:45px; margin: 10% 0; } .content-about small { color:#9F449B; font-size:45px; } .content-about span { background:url(../images/aboutbg.png); position:absolute; width:297px; height:114; top: -67%; right: 37%; } .content-about-grid-left img { width:100%; } .content-about-grid-right { padding-left:31px; } .content-about-grid-right p { font-family: 'Lato', sans-serif; font-size: 17px; color: #8D8D8D; line-height: 33px; width: 92%; padding-left:20px; } .learn { margin-top: 17%; padding-left:20px; } .learn a { background: #A957A5; border-bottom: solid 5px #6B2E68; border-radius: 7px; padding:1em 3em; text-align: center; font-family: 'Lato', sans-serif; font-size: 20px; color:#FFFFFF; } .learn a:hover { color:#6B2E68; text-decoration:none; background: transparent; border: solid 2px #6B2E68; border-top: solid 5px #6B2E68; border-radius: 10px; padding:1em 3em; } .content-about-bottom { background:url(../images/quotebg.png) no-repeat 0px 0px; background-size:cover; } .content-about-bottom-text { text-align:center; padding: 8% 0; } .content-about-bottom-text p { font-family: 'Lato', sans-serif; font-size: 44px; color: #FFFFFF; font-weight: 300; margin:2% 0 0 0; } /*--- content-team ----*/ .content-team-text { position: relative; } .content-team-text h2 { text-align: center; color: #676767; font-family: 'Open Sans', sans-serif; letter-spacing: 2px; font-size: 45px; margin: 13% 0; } .content-team small { color: #9F449B; font-size: 45px; } .content-team span { background: url(../images/aboutbg.png); position: absolute; width: 297px; height: 114; top: -67%; right: 37%; } .owl-theme .owl-controls .owl-buttons div{ color: #FFF; display: inline-block; zoom: 1; margin: 5px; padding: 3px 10px; font-size: 12px; width: 72px; height: 72px; } .owl-next{ background: url(../images/right.png) no-repeat 1px 0px; position: absolute; right: 46%; top: -57%; left:50%; } .owl-prev{ background: url(../images/left.png) no-repeat 3px 0px; position: absolute; right: 51%; top: -57%; } .team-left-grid { text-align:center; position:relative; } .team-left-grid img { border-radius:50%; margin-bottom: 15%; } .team-left-grid h2 { color:#484848; font-family: 'Lato', sans-serif; font-size: 26px; } .team-left-grid p { color:#B6B6B6; font-family: 'Lato', sans-serif; font-weight:400; font-size:18px; margin-bottom: 7%; } /*--- team-icons ----*/ .team-icon-grid { text-align:center; width: 34%; margin: 0 auto; } .f-icon { text-align:center; width:48px; height:47px; display:inline-block; background:url(../images/f.png) no-repeat 0px 0px; cursor:pointer; } .f-icon:hover { background:url(../images/fhr.png) no-repeat 0px 0px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .g-icon { text-align:center; width:48px; height:47px; display:inline-block; background:url(../images/g.png) no-repeat 0px 0px; cursor:pointer; } .g-icon:hover { background:url(../images/ghr.png) no-repeat 0px 0px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } /*--- team-icons ----*/ .team-left-grid span { width: 48px; height: 47px; background:url(../images/f.png) no-repeat 0px 0px; position:absolute; top: 107%; right: 55%; } .team-left-grid span:hover { background:url(../images/fhr.png) no-repeat 0px 0px; position:absolute; transition:0.4s; -webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s; } .team-left-grid small { width: 48px; height: 47px; background:url(../images/g.png) no-repeat 0px 0px; position:absolute; top: 107%; right: 34%; } .team-left-grid small:hover { background:url(../images/ghr.png) no-repeat 0px 0px; position:absolute; transition:0.4s; -webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s; }

/*--- content-skills ----*/ .content-skills { margin: 0% 0 8% 0; } .content-skills-text { position: relative; margin-bottom: 10%; } .content-skills-text h2 { text-align: center; color: #676767; font-family: 'Open Sans', sans-serif; letter-spacing: 2px; font-size: 45px; } .content-skills small { color: #9F449B; font-size: 45px; } .content-skills span { background: url(../images/aboutbg.png); position: absolute; width: 297px; height: 114; top: -67%; right: 37%; } .skills { text-align: center; padding: 0 6em; } .progressy1,.progressy2,.progressy3,.progressy4{ width: 95%; background:#F0F0F0; margin-bottom: 2em; } .progress-head h3{ float:left; font-weight:600; margin-bottom: 1em; } .progress-head p.percent{ float:right; margin: 1em 1em 0 0; font-size: 22px; font-weight: 400; color: #B2B2B2; } .progressy1 p{ background:#9F449B; width:85%; height:20px; } .progressy2 p{ background:#9F449B; width:75%; height:20px; } .progressy3 p{ background:#9F449B; width:67%; height:20px; } .progressy4 p{ background:#9F449B; width:80%; height:20px; } .content-services-bottom-text { text-align: center; padding: 8% 0; } .content-services-bottom-text p.bottom-text { font-family: 'Lato', sans-serif; font-size: 44px; color: #FFFFFF; font-weight: 300; padding-top: 1em; width: 44%; margin: 0 auto; } /*--- content-services ----*/ .content-services { background: #EEEEEE; } .services-grid { margin: 10% 0; text-align: center; } .service-grid h2 { font-weight:normal; font-size:5em; } .services-grid p { font-weight: 400; font-size:16px; } .image-grid { text-align:center; } .image-grid img { border-radius:50%; margin: 0 auto; } .services-text { text-align:center; margin:3% 0; } .services-text p { font-family: 'Monda', sans-serif; font-weight: 400; color:#4B4B4B; font-size: 22px; width: 65%; margin: 0 auto; } .services-bottom-text { text-align:center; margin-bottom: 4%; } .services-bottom-text p { color:#777777; font-family: 'Monda', sans-serif; font-weight: 700; } .services-bottom { background: #FFFFFF; padding: 2%; } /*--- content-portfolio ----*/

  • Strip

/*-----------------------------------------------------------------------------------*/ .b-link-stripe{ position:relative; display:inline-block; vertical-align:top; font-family: 'Open Sans', sans-serif; font-weight: 300; overflow:hidden; } .b-link-stripe .b-wrapper{ position: absolute; width: 100%; height:100%; top: 0; left: 0; text-align: center; color: #ffffff; } .b-link-stripe .b-wrapper:hover { background:rgba(50, 70, 81, 0.71);; transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; } /*-----------------------------------------------------------------------------------*/ /*--Animation effects---*/ b-animate-go{ text-decoration:none; } .b-animate{ transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; visibility: hidden; font-size:1.1em; font-weight:700; } .b-animate img{ margin-top:33%; display: -webkit-inline-box; } /* lt-ie9 */ .b-animate-go:hover .b-animate{ visibility:visible; } .b-from-left{ position:relative; left:-100%; } .b-animate-go:hover .b-from-left{ left:0; } span.m_4{ font-size:14px; font-weight:400; } p.m_5 { margin: 2% auto 5%; width: 70%; color: #283A47; font-size: 1.1em; font-weight: 600; line-height: 1.5em; text-align: center; } ul#filters { padding: 0px; text-align: center; }

  1. filters {

margin: 3% 0; padding: 0; list-style: none; text-align: left; }

  1. filters li {

display:inline-block; display: -webkit-inline-box; display: -moz-inline-box; display: -o-inline-box; display: -ms-inline-box; }

  1. filters li span.active,#filters li span {

color: #172F41; text-decoration: none; padding: 0.3em 1.3em; display: block; border: 1px solid #172F41; font-size: 1.15em; font-weight: 500; cursor: pointer; margin: 0 0.3em; border-radius: 6px; }

  1. filters li span.active{

color: #fff; border: 1px solid #9F449B; background: #9F449B; border-radius: 6px; }

  1. filters li span:hover{

border: 1px solid #9F449B; } 

#portfoliolist .portfolio {

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width: 30%; display: none; float: left; overflow: hidden; margin: 3% 0 0% 1%; padding:0; } div#portfoliolist { padding: 0; margin: 1% 0 0 0; } .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; } .portfolio-wrapper img{ width:100%; } .portfolio img { max-width:100%; /*--position: relative;--*/ transition: all 300ms!important; -webkit-transition: all 300ms!important; -moz-transition: all 300ms!important; } .portfolio .label { position: absolute; width: 100%; height:40px; bottom:-40px; } .portfolio .label-bg { background: #22B4B8; width: 100%; height:100%; position: absolute; top:0; left:0; } .portfolio .label-text { color:#fff; position: relative; z-index:500; padding:5px 8px; } .portfolio .text-category { display:block; font-size:9px; font-size: 12px; text-transform:uppercase; } /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before, .clearfix:after, .row:before, .row:after { 

 content: '\0020';
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0; }

.row:after, .clearfix:after { 

 clear: both; }

.row, .clearfix { 

 zoom: 1; }

.clear { 

 clear: both;
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;

} /*----- effects-comman-css------*/ .contenthover{ padding:1em; } .contenthover h3{ color:#FFF; } .contenthover p{ color:#FFF; font-size:0.875em; line-height:1.5em; } /*-----caption ------*/ .tour-caption { display: none; top: 0; width: 100%; position: absolute; background: rgba(86, 93, 103, 0.48); height: 87.17%; text-align: center; } .tour-caption span{ background: url(../images/plus.png) no-repeat; width: 100px; height: 100px; display: block; text-align: center; position: absolute; top: 34%; right: 36%; background-size: 100%; } .portfolio-wrapper { text-decoration: none; text-align: center; } .portfolio-wrapper h3{ margin:0; font-size: 17px; color: #777777; } .portfolio-wrapper p{ color:#222222; margin:0; font-size:1.6em; } .portfolio-wrapper:hover div.tour-caption { display: block; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .tour-caption p{ color:#fff; font-size: 1.5em; margin-top: 39%; } h6.b-animate.b-from-left.b-delay03 { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; color: #CCCCCC; margin: 0; text-align:center; width:100%; } /*--/Animation effects---*/ /*--/top-tours--*/

/*--tour-guides--*/ .guide-caption { display: none; top: 0; width: 95.3%; position: absolute; background: rgba(101, 178, 229, 0.93); height: 86%; text-align: center; } .guide-caption span{ background:url('../images/guide-icons2.png') no-repeat 0px 0px; display:inline-block; margin: 0 0.5em; width:57%; height: 52px; display: block; text-align: center; position: absolute; top: 42%; right: 18%; background-size: 100%; } .image-grid:hover div.guide-caption{ display: block; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .port-text { position: relative; margin: 12% 0; } .port-text h2 { text-align: center; color: #676767; font-family: 'Open Sans', sans-serif; letter-spacing: 2px; font-size: 45px; } .port-text small { color: #9F449B; font-size: 45px; } .port-text span.folio { background: url(../images/portfoliobg.png); position: absolute; width: 369px; height: 114; top: -67%; right: 34%; } .portfolio-buttons { text-align:center; width:40%; margin:0 auto; } .allactive { border: solid 1px #9F449B; background: #9F449B; font-family: 'Lato', sans-serif; font-size: 16px; padding: 4%; text-align: center; border-radius: 6px; } .allactive a { color: white; text-decoration:none; } .allactive a:hover { color: white; text-decoration:none; } .all { background: #FFFFFF; font-family: 'Lato', sans-serif; font-size: 16px; padding: 4%; text-align: center; border-radius: 6px; border: solid 1px #000000; } .all:hover a { color: #FFFFFF; text-decoration:none; } .all:hover {

border: solid 1px #9F449B; background: #9F449B; transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -o-transition: 0.3s all; -ms-transition: 0.3s all; } .portfolio-images 

{

margin: 6% 0; } .portfolio-images img { width:100%; } .portfolio-images h4 { text-align:center; color:#222222; font-size:25px; } .portfolio-images p { text-align:center; color:#777777; font-size:16px; } .content-portfolio form { text-align:center; } .watch-more { margin: 0 auto; width: 18%; } .watch { text-align: center; } .watch a { background: #A957A5; border: solid 2px #FFFFFF; border-radius: 10px; padding: 7% 15%; text-align: center; font-family: 'Lato', sans-serif; font-size: 16px; color:#FFFFFF; } .watch:hover a { color: #A957A5; text-decoration:none; } .watch a:hover { border: solid 2px #9F449B; background:#FFFFFF; transition:0.3s all; -webkit-transition:0.3s all; -moz-transition:0.3s all; -o-transition:0.3s all; -ms-transition:0.3s all; } /*--- content--Get-in-touch ----*/ .Get-in-touch-text { position: relative; margin: 12% 0; } .Get-in-touch-text h2 { text-align: center; color: #676767; font-family: 'Open Sans', sans-serif; letter-spacing: 2px; font-size: 45px; } .watchmore{ text-align:center; margin-top: 5em; } .watchmore a{ background: #A957A5; border-bottom: solid 5px #6B2E68; border-radius: 10px; padding:1em 3em; text-align: center; font-family: 'Lato', sans-serif; font-size: 20px; color: rgba(255, 255, 255, 1); } .watchmore a:hover{ color:#6B2E68; text-decoration:none; background: transparent; border: solid 2px #6B2E68; border-top: solid 5px #6B2E68; border-radius: 10px; padding:1em 3em; } .Get-in-touch{ 

   text-align: center;
   width: 70%;
   margin: 0 auto 4%;

} .email { margin-top:3em; width:42%; } .email a { background: #A957A5; border-bottom: solid 5px #6B2E68; border-radius: 10px; padding:1em 3em; text-align: center; font-family: 'Lato', sans-serif; font-size: 20px; color: rgba(255, 255, 255, 1); }

.email:hover a { color:#6B2E68; text-decoration:none; background: transparent; border: solid 2px #6B2E68; border-top: solid 5px #6B2E68; border-radius: 10px; padding:1em 3em; } ul.contact-info{ 

   color: #222222;
   font-family: 'Lato', sans-serif;
   margin: 8% 0;
   font-size: 21px;
   font-weight: 400;
   list-style-type: none;
   list-style-image: none;
   line-height: 1.6;

} ul.contact-info a{ 

   text-decoration: none;
   color: #3377aa;
   -ms-transition:     all 0.1s ease-out;
   -moz-transition:    all 0.1s ease-out;
   -webkit-transition: all 0.1s ease-out;
   -o-transition:      all 0.1s ease-out;
   transition:         all 0.1s ease-out;

} ul.contact-info a:hover{ 

   color: white;
   background-color: #3377aa;

} .content-Get-in-touch small { color: #9F449B; font-size: 45px; } .content-Get-in-touch span.portfolio { background: url(../images/portfoliobg.png); position: absolute; width: 369px; height: 114; top: -67%; right: 34%; } .Get-in-touch p { font-size:38px; 

   font-weight: 300;

color: #5D5D5D; font-family: 'Lato', sans-serif; } .Get-in-touch h4 { color: #222222; font-family: 'Lato', sans-serif; margin: 16% 0; font-size: 21px; font-weight: 700; } .Get-in-touch span { color: #222222; font-size:20px; font-family: 'Lato', sans-serif; font-weight: 700; display: block; } .Get-in-touch small { color: #222222; font-size:20px; font-family: 'Lato', sans-serif; font-weight: 700; } .Get-in-touch-icons { margin-top: 21%; } .Get-in-touch-icons a span{ width:55px; height:60px; background:url('../images/get-icons.png') no-repeat 0px 0px; display:inline-block; } .Get-in-touch-icons span.icon1{ background-position:-6px 0px; } .Get-in-touch-icons a span.icon1:hover{ background-position:-7px -60px; } .Get-in-touch-icons a span.icon2{ background-position:-79px 0px; } .Get-in-touch-icons a span.icon2:hover{ background-position: -80px -60px; } .Get-in-touch-icons a span.icon3{ background-position:-154px 0px } .Get-in-touch-icons a span.icon3:hover{ background-position: -155px -60px; } .Get-in-touch-icons img { margin-right:6%; } .content-portfolio { text-align: center; padding-bottom: 8%; } .content-portfolio p{ font-size:1.1em; margin-top:8%; } .content-portfolio p a{ color:#9F449B; } .content-portfolio p a:hover{ color:#646064; } /*----- footer ----*/ .footer{ 

   text-align:center;
   padding: 60px 0 0;

} .footer img{ 

   margin: 40px 0 20px;

} /*----- to-top ----*/

  1. toTop {

display: none; text-decoration: none; position: fixed; bottom: 14px; right: 3%; overflow: hidden; width: 40px; height: 40px; border: none; text-indent: 100%; background: url("../images/to-top1.png") no-repeat 0px 0px; }

  1. toTopHover {

width: 40px; height: 40px; display: block; overflow: hidden; float: right; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } p#abstract{ 

   font-size:1.7em;
   text-align:left;
   margin-top:80;

}

ul.dropdown-menu{ 

   border-top-width:0;

transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; 

   opacity:0;
   display:block;
   visibility:hidden;

}

li.dropdown:hover > ul.dropdown-menu, .dropdown-menu:hover{ 

   visibility:visible;
   opacity:1;

}

ul.dropdown-menu li{ 

   font-size:1.2em;
   text-transform:uppercase;
   text-align:left;

}

/*----- responsive-design ------*/ @media (max-width:1024px){ .arrow-grid { width: 20%; } .header-top-grids { margin-left: 38%; } .top-nav > nav > ul > li a { padding: 0 0 0 1.5em; font-size:1.1em; } .content-top-grid p { margin-top: 6%; line-height: 25px; width: 98%; overflow:hidden; height:55px; } .content-about-grid-left img { width: 85%; } .content-about h2 { margin: 7% 0; } .row { margin: 5% 0px; } .about-grid-right{ padding:0; } .content-about-grid-right p { width: 80%; padding-left: 0px; line-height:26px; font-size:15px; } .content-team-text h2 { margin: 9% 0; } .owl-prev,.owl-next{ top: -34%; } .learn { margin-top: 6%; padding-left: 0px; } .learn a { padding: 0.5em 1.5em; } .learn a:hover { padding: 0.5em 1.5em; } .team-left-grid img,.team-left-grid p { margin-bottom: 0%; } .team-icon-grid { width: 13%; padding-top:1em; } .skills-grids { margin: 10% 0; } .skills-grid-first h3 { font-size:19px; padding: 2em 0 0 1.2em; } .content-services-bottom-text p.bottom-text { font-size: 32px; } .services-grids h2 { font-size: 4em; } .services-text p { font-size: 17px; } .port-text { margin: 9% 0; } .tour-caption { height: 85.17%; } .Get-in-touch p { line-height: 27px; } .Get-in-touch h4 { margin: 8% 0; line-height: 28px; } .Get-in-touch-icons { margin-top: 7%; } .email { width: 53%; } } @media (max-width:768px){ .header-top-grids { margin-left: 34%; } .header-bottom-grids { width: 100%; } .about-nav5, .about-nav4 { /*width: 76% !important;*/ } .about-nav3, .about-nav2, .about-nav1, .about-nav { /*width: 49% !important;*/ } .about-nav1,.about-nav { /*margin-left: 0%;*/ } .header-bottom-grids div.left-grid,.header-bottom-grids div.right-grid { width:50%; padding-left:0; padding-right:0; } .left-grid,.right-grid{ float:left; } .top-nav ul { padding-left: 0%; } .top-nav > nav > ul > li a { padding: 0 0 0 1em; font-size: 1em; } .content-top-grid { width: 50%; float:left; } .content-top-grid h3,.content-top-grid p { margin-top: 2%; } .content-about-grid-left { text-align: center; } .content-about-grid-right p { width: 93%; margin: 1em 0 0 1em; } .learn { text-align: center; } .content-about-bottom-text p { font-size: 30px; } .content-team span { right: 30%; } .owl-prev, .owl-next { top: -12%; } .f-icon { width: 80px; } .team-icon-grid { width: 46%; } .team-left-grid span { top: 112%; } .content-skills span { right: 31%; } .progress-head h3 { margin-top: 1.3em; margin-bottom: 0em; font-size:20px; } .progressy1, .progressy2, .progressy3, .progressy4 { margin-bottom: 1em; } .progress-head p.percent { margin: 1em 1em 0.5em 0; } .content-services-bottom-text { padding: 5% 0; } .content-services-bottom-text p.bottom-text { font-size: 27px; width: 74%; } .services-grids { margin: 4% 0; text-align:left; } .service-grid{ float:left; width:23%; } .service-grid h2 { margin-left: 48px; } .service-grid p{ margin: 0px 0 0 50px; } .services-text p { font-size: 14px; width:100%; } .tour-caption { height: 83.17%; } .tour-caption span { top: 28%; right: 22%; } .port-text span.folio { right: 27%; } .portfolio-wrapper p { font-size: 1.2em; } .Get-in-touch-text { margin: 16% 0 9% 0; } .email { width: 100%; text-align: center; margin-bottom: 7%; } .Get-in-touch { margin-bottom: 6%; } .Get-in-touch h4 { margin: 2% 0; font-size: 19px; } .Get-in-touch-icons { margin-top: 4%; text-align: center; } } @media (max-width:640px){ .header-logo img { width: 50%; } .header-logo { margin: 2em 0 0em 0; } .header-sub-text h2 { font-size: 24px; } .header-sub-text p { font-size: 18px; } .header-top-grids { margin-left: 17%; width: 65%; } .about-nav5, .about-nav4 { width: 49% !important; } .about-nav4 a, .about-nav5 a { /*margin-left: 3em;*/ } .header-bottom-grids div.left-grid, .header-bottom-grids div.right-grid { width: 66%; margin-left: 17%; } .top-nav span.menu{ display:none; } .top-nav span.menu:before{ content:url("../images/icon.png") no-repeat 0px 0px; cursor:pointer; text-align: right; width:100%; } .top-nav{ float:none; } .top-nav > nav > ul > li{ display:block; float:none; margin: 0em; } .top-nav > nav > ul > li a{ padding:0.5em; border-bottom:1px solid #999; color:#000; background: rgba(159, 68, 155, 0.24); text-align: center; } .top-nav ul{ display:none; background:rgba(255, 255, 255, 0.44); width:95%; } .top-nav span.menu{ display: block; width:100%; text-align: right; position:relative; padding:1em; } .fixed div.logo{ display:none; } .content-about span { right: 26%; } .content-about h2 { margin: 13% 0 16% 0; } .content-about-grid-left img { width: 71%; } .content-about-grid-right p { width: 98%; overflow: hidden; height: 45px; } .content-about-bottom-text p { font-size: 24px; } .content-team span { right: 23%; } .owl-prev, .owl-next { top: -6%; } .content-skills { margin: 6% 0 8% 0; } .content-skills span { right: 22%; } .progressy1, .progressy2, .progressy3, .progressy4 { margin-bottom: 0em; } .progress-head p.percent { margin: 1em 1em 0em 0; } .content-services-bottom-text p.bottom-text { font-size: 24px; width: 79%; } .service-grid h2,.service-grid p { margin-left: 0px; } .service-grid p { font-size: 1.3em; } .service-grid { width: 25%; font-size: 12px; } .services-text p { font-size: 13px; } .port-text span.folio { right: 17%; }

  1. filters {

margin: 15% 0 4% 0; } .tour-caption { height: 82.17%; } .tour-caption span { width: 56px; top: 34%; right: 36%; } .portfolio-wrapper p { font-size: 1em; } .portfolio-wrapper h3 { font-size: 14px; } .watchmore { margin-top: 3em; } .watchmore a { font-size: 15px; } .content-Get-in-touch span.portfolio { right: 17%; } .email { margin-top: 1em; } .email a { font-size: 16px; } .Get-in-touch p { line-height: 23px; font-size: 17px; overflow: hidden; height: 49px; } } @media (max-width:480px){ .header-logo img { width: 76%; } .header-sub-text h2 { font-size: 18px; margin-top: 9px; } .header-sub-text p { font-size: 16px; overflow: hidden; height: 20px; } .header-top-grids,.header-bottom-grids div.left-grid, .header-bottom-grids div.right-grid { margin-left: 0%; width: 100%; } .about-nav4,.about-nav5,.about-nav3,.about-nav2,.about-nav1,.about-nav{ height: 110px; background-size:88%; } .about-nav4:hover,.about-nav3:hover,.about-nav2:hover,.about-nav1:hover,.about-nav:hover{ background-size: 90%; } .about-nav4 span.nav-icon4,.about-nav5 span.nav-icon5,.about-nav3 span.nav-icon3,.about-nav2 span.nav-icon2,.about-nav1 span.nav-icon1,.about-nav span.nav-icon { width: 33px; height: 30px; background-size: 100%; } .about-nav span.nav-icon,.about-nav1 span.nav-icon1{ margin-left:2.5em; } .about-nav4 a,.about-nav5 a,.about-nav3 a,.about-nav2 a,.about-nav1 a ,.about-nav a{ margin-left: 0em; padding-right: 1em; padding-top: 2em; } .arrow-grid { width: 28%; } .arrow a { height: 70px; background-size:50%; margin-bottom:0; } .arrow a:hover{ background-size:50%; } .content-top-grid { width: 49%; float: left; } .content-top-grid sub { width: 100px; height: 100px; background-size: 100%; } .content-top-grid h3{ margin-top: 3%; font-size: 0.9em; margin-bottom: 0; } .content-top-grid p { font-size:0.8em; margin-top:2%; line-height: 16px; overflow: hidden; height: 33px; } .content-top-grid span { background: url(../images/2.png) no-repeat 0px 0px; width: 100px; height: 100px; background-size: 100%; } .content-top-grid:hover span { background: url(../images/2hr.png) no-repeat 0px 0px; width: 100px; height: 100px; background-size: 100%; } .content-top-grid small { background: url(../images/3.png) no-repeat 0px 0px; width: 100px; height: 100px; background-size: 100%; } .content-top-grid:hover small { background: url(../images/3hr.png) no-repeat 0px 0px; width: 100px; height: 100px; background-size: 100%; } .content-top-grid big { background: url(../images/4.png) no-repeat 0px 0px; width: 100px; height: 100px; background-size: 100%; } .content-top-grid:hover big { background: url(../images/4hr.png) no-repeat 0px 0px; width: 100px; height: 100px; background-size: 100%; } .content-about span{ background: url(../images/edges.png); position: absolute; width: 200px; height: 80; top: -67%; right: 11%; } .content-about-bottom-text img,.content-services-bottom-text img{ width: 33%; } .content-about h2,.content-about small{ font-size: 35px; } .content-about-grid-left img { width: 100%; } .content-about-grid-right p { width: 93%; overflow: hidden; height: 45px; font-size: 1.1em; line-height: 21px; } .learn { margin: 9% 0; } .learn a { font-size: 15px; } .content-about-bottom-text p { font-size: 18px; } .content-team span { background: url(../images/edges.png); position: absolute; width: 200px; height: 80px; top: -43%; right: 8%; } .content-team-text h2 ,.content-team-text small{ font-size: 33px; } .team-left-grid img { width: 100%; } .team-left-grid h2 { font-size: 17px; } .team-left-grid p { font-size: 14px; } .team-icon-grid { width: 86%; } .content-skills span { background: url(../images/edges.png); position: absolute; width: 200px; height: 80px; top: -67%; right: 12%; } .content-skills-text h2,.content-skills-text small{ font-size: 33px; } .progress-head h3 { margin-top: 1em; font-size: 15px; } .progress-head p.percent { margin: 0.5em 1em 0em 0; font-size:18px; } .content-services-bottom-text p.bottom-text { font-size: 18px; width: 93%; } .content-team span { display: none; } .service-grid { width: 50%; font-size: 9px; } .service-grid p { font-size: 1.5em; } .services-text p { font-size: 13px; overflow: hidden; height: 21px; } .services-bottom-text p { font-size: 0.9em; } .port-text span.folio { background: url(../images/edges.png); position: absolute; width: 200px; height: 80px; top: -65%; right: 10%; } .port-text h2,.port-text small{ font-size: 30px; }

  1. filters li span.active, #filters li span {

font-size: 0.7em; } .tour-caption { height: 62.17%; } .tour-caption span { width: 25px; top: 29%; right: 32%; } .portfolio-wrapper p { font-size: 0.8em; } .portfolio-wrapper h3 { font-size: 11px; } .watchmore a { font-size: 11px; } .content-Get-in-touch span.portfolio { background: url(../images/edges.png); position: absolute; width:200px; height: 80px; top: -51%; right: 9%; } .Get-in-touch-text h2,.Get-in-touch-text small{ font-size: 27px; margin-top:20%; } .email a { font-size: 12px; } .Get-in-touch p { font-size: 13px; margin-top: 13%; } .Get-in-touch h4 { line-height:20px; font-size: 13px; } .Get-in-touch span,.Get-in-touch small { font-size: 13px; } }