Difference between revisions of "Team:WHU-China/css/Home/style.css"

Revision as of 02:39, 16 October 2018 (view source) Talent b (Talk | contribs) ← Older edit		Latest revision as of 10:24, 6 December 2018 (view source) Talent b (Talk | contribs)
Line 155:		Line 155:
	.banner-top2 {		.banner-top2 {
−	background: url(https://static.igem.org/mediawiki/2018/3/3f/T--WHU-China--wiki-home-banner1%281600%29.jpg) no-repeat 0px 0px;	+	background: url(https://static.igem.org/mediawiki/2018/1/18/T--WHU-China--wiki-home-banner311.png) no-repeat 0px 0px;
	background-size: cover;		background-size: cover;
	-webkit-background-size: cover;		-webkit-background-size: cover;

---

Latest revision as of 10:24, 6 December 2018

body{ padding:0; margin:0; background:#fff; position:relative; font-family:"Raleway","Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; } 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; } a:hover{ text-decoration:none; } input[type="button"],input[type="submit"],.contact-form input[type="submit"]{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } h1,h2,h3,h4,h5,h6{ margin:0;

    font-family: 'Raleway', sans-serif;	

} p{ margin:0; } ul{ margin:0!important; padding:0; } label{ margin:0; } img{ width:100%; }

/*-- header --*/

/*-- Index-Page-Styling --*/

header {

   position: absolute;
   z-index: 9;
   width: 100%;
   padding: 2em 0;

} .bg-light {

   background-color: transparent !important;

} .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {

   color: #02c1ee;
   border-bottom: 1px solid #02c1ee;

} .navbar-light .navbar-nav .nav-link {

   color: #fff;
   font-size: 16px;
   letter-spacing: 2px;
   border-bottom: 1px solid #fff;

} li.nav-item {

   padding: 0 15px;

} .dropdown-menu {

   padding: 1rem;

} ul.dropdown-menu li {

   padding: 10px 0;

} ul.dropdown-menu li a {

   font-size: 16px;
   color: #333;
   letter-spacing: 1px;

border-bottom: 1px solid;

   padding-bottom: .2rem;

} ul.dropdown-menu li a:hover { color: #02c1ee; border-bottom: 1px solid; } .navbar-light .navbar-brand {

   font-size: 1.2em;
   color: #02c1ee;
   text-shadow: 2px 2px #ffffff;
   text-decoration: none;
   font-weight: 700;

margin: 0;

   text-transform: uppercase;
   padding: 0;
   letter-spacing: 3px;

} .navbar-expand-lg .navbar-nav .nav-link {

   padding-right: 0;
   padding-left: 0;
   padding-bottom: .2rem;

} .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {

   color: #fff;
   text-shadow: 2px 2px #ffffff;

} .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {

   color: #02c1ee;
   border-bottom: 1px solid #02c1ee;

} .header-top {

   background: rgba(0, 0, 0, 0.5);
   padding: 15px;

} .navbar{ padding: 0; } .header-top p {

   margin: 0;
   color: #eee;
   letter-spacing: 2px;
   font-size: 15px;

} .header-top p i {

   color: #02c1ee;

margin-right: 10px; } .top-right {

   text-align: right;

} /*-- /slider --*/

/*-- banner-top --*/

.banner-top { background: url() no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 780px; }

.banner-top1 { background: url() no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 780px; }

.banner-top2 { background: url() no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 780px; }

.banner-top3 { background: url() no-repeat 0px 0px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -moz-background-size: cover; min-height: 780px; }

.banner-info_agile_w3ls { text-align: center; padding-top: 20em; }

.banner-info_agile_w3ls h3 span,.banner-info_agile_w3ls h2 span { padding: 0 15px; font-weight: 600;

   color: #eee;
   text-decoration: underline;

}

.banner-info_agile_w3ls a { color: #fff; text-decoration: none; padding: 10px 20px; letter-spacing: 3px; font-size: 14px; margin: 1em 0 0em; background: rgba(255, 255, 255, 0.2); display: inline-block; } .banner-info_agile_w3ls a:hover{ color:#000; } .banner-info_agile_w3ls h3,.banner-info_agile_w3ls h2 { font-size: 3em; color: #fff; font-weight: 100; letter-spacing: 1px;

    text-transform: capitalize;

}

.banner-info_agile_w3ls p { font-size: 1em; color: #fff; margin: 1.5em 0; letter-spacing: 6px; }

.banner-info_agile_w3ls i {

   vertical-align: middle;

} .layer{

     background: rgba(37, 37, 37, 0.4);

min-height: 780px; } /*-- //banner-top --*/

/*--social_media_icons_style--*/ .w3_agileits_social_media {

   text-align: center;
   position: absolute;
   left: 4%;
   top: 18em;
   z-index: 99;

} .w3_agileits_social_media ul li {

   list-style: none;
   margin-bottom: 1em;

} .w3_agileits_social_media ul li a {

   display: block;
   color: #fff;
   text-decoration: none;
    font-size: 14px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   line-height: 38px;
   background: transparent;
   box-shadow: 0px 0px 5px #fbfcff;

} .w3_agileits_social_media ul li a:hover {

   color: #02c1ee;

} p.ab {

   text-transform: uppercase;
   color: #fff;
   letter-spacing: 3px;
   font-weight: bold;
   font-size: 14px;
   transform: rotate(-90deg);
   left: -0.4%;

bottom: 20%;

   position: absolute;
   z-index: 99;

} /*--//social_media_icons_style--*/

.thim-click-to-bottom { position: absolute; bottom: 18%;

   left: 49%;
   height: 40px;
   font-size: 40px;
   line-height: 40px;
   -webkit-animation: bounce 2s infinite ease-in-out;
   z-index: 99;

} .thim-click-to-bottom i {

   color: #ddd;

} .rotate a {

   border: 2px solid #ddd;
   font-size: 20px;
   padding: 10px;
   line-height: 65px;

border-radius: 30px;

   text-align: center;

} @-webkit-keyframes bounce { 0%, 20%, 60%, 100% { -ms-transform: translateY(0); } 0%, 20%, 60%, 100% { -o-transform: translateY(0); } 0%, 20%, 60%, 100% { -moz-transform: translateY(0); } 0%, 20%, 60%, 100% { -webkit-transform: translateY(0); }

   40%  { -webkit-transform: translateY(-20px); }

80% { -webkit-transform: translateY(-10px); } } /*-- hover-effect --*/

/*--slider--*/

1. slider2,
2. slider3 {

box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin: 0 auto; }

.rslides_tabs li:first-child { margin-left: 0; }

.rslides_tabs .rslides_here a { background: rgba(255, 255, 255, .1); color: #fff; font-weight: bold; }

.events { list-style: none; }

.callbacks_container { position: relative; float: left; width: 100%; }

.callbacks { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }

.callbacks li { position: absolute; width: 100%; }

.callbacks img { position: relative; z-index: 1; height: auto; border: 0; }

.callbacks .caption { display: block; position: absolute; z-index: 2; font-size: 20px; text-shadow: none; color: #fff; left: 0; right: 0; padding: 10px 20px; margin: 0; max-width: none; top: 10%; text-align: center; }

.callbacks_nav { position: absolute; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); top: 76%; left: 40px; opacity: 0.7; z-index: 3; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 34px; width: 34px; background: url() no-repeat 0px 0px; }

.callbacks_nav.next { left: auto; background: url() no-repeat 0px 0px; right: 47%; }

.callbacks_nav.prev { left: auto; background: url() no-repeat 0px 0px; left: 47%; }

1. slider3-pager a {

display: inline-block; }

1. slider3-pager span {

float: left; }

1. slider3-pager span {

width: 100px; height: 15px; background: #fff; display: inline-block; border-radius: 30em; opacity: 0.6; }

1. slider3-pager .rslides_here a {

background: #FFF; border-radius: 30em; opacity: 1; }

1. slider3-pager a {

padding: 0; }

1. slider3-pager li {

display: inline-block; }

.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; }

.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; }

.rslides li { position: relative; display: block; float: left; }

.rslides img { height: auto; border: 0; }

.callbacks_tabs { list-style: none; position: absolute; top: 44%; right: 4%; padding: 0; margin: 0; display: block; z-index: 99; }

.slider-top span { font-weight: 600; }

.callbacks_tabs li { display: block; margin: 5px 0px; }

/*----*/

.callbacks_tabs a {

   border: 2px solid #fff;
   width: 35px;
   height: 35px;
   line-height: 30px;

border-radius: 50%;

   color: #fff;
   display: block;
   text-align: center;

}

.callbacks_here a { background: #02c1ee;

   border: 2px solid #02c1ee;

} .slider {

   position: relative;

} /*-- //slider --*/

/*-- booking-form--*/ .book-form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */

 color: #9a9797;

} .book-form::-moz-placeholder { /* Firefox 19+ */

 color: #9a9797;

} .book-form::-ms-input-placeholder { /* IE 10+ */

 color: #9a9797;

} .book-form::-moz-placeholder { /* Firefox 18- */

 color: #9a9797;

} .book-form label {

   font-size:15px;
   color: #333;
   text-align: left;
   display: inline-block;
   float: left;
   font-weight: 600;
   margin-bottom: 10px;
   letter-spacing: 1px;

} .book-form label span {

   margin-right: 5px;
   color: #02c1ee;

} .book-form input[type="text"],.book-form input[type="date"],.book-form input[type="text"],.book-form input[type="email"] {

   width: 100%;
   color: #9a9797;
   outline: none;
    font-size: 15px;
   padding: 10px 15px;
   letter-spacing: 1px;
   border: 2px solid #fff;
   -webkit-appearance: none;
   margin-bottom: 1em;
   background: #333;

} .book-form form input[type="submit"] {

   background: #02c1ee;
   color: #FFFFFF;
   border: 2px solid #02c1ee;
   padding: 8px 15px;
   font-size: 15px;

font-weight: 600;

   outline: none;
   -webkit-transition: 0.5s all;
   -moz-transition: 0.5s all;
   -o-transition: 0.5s all;
   -ms-transition: 0.5s all;
   text-transform: uppercase;
   width: 100%;

cursor: pointer;

   letter-spacing: 1px;
   margin-top: 2.3em;
   -webkit-appearance: none;

} select.form-control:not([size]):not([multiple]) {

   height: calc(2.25rem + 10px);

} .book-form { } .book-form p {

   color: #fff;
   font-size: 24px;
   margin-bottom: .8em;
   letter-spacing: 5px;
   word-spacing: 7px;
   text-transform: uppercase;

} .book-form select.form-control {

   outline: none;
   font-size: 15px;
   padding: 7px 10px;
   letter-spacing: 1px;
   width: 100%;
   line-height: 25px;
   background: #333;
   color: #9a9797;
   border: 2px solid #fff;

box-shadow:none!important; } .form-date-w3-agileits.second-agile {

   width: 30%;

} .form-date-w3-agileits.second-agile,.form-time-w3layouts.second-agile,.form-left-agileits-w3layouts.second-agile,.form-left-agileits-w3layouts.bottom-w3ls.second-agile {

   margin-right:0!important;

padding:0!important; } .form-left-agileits-w3layouts.bottom-w3ls {

   padding:0!important;

} .book-form input[type=submit]:hover {

   border: 2px solid #02c1ee;
    color: #02c1ee;
   background: none;

} .form-control {

   border-radius: 0rem; 

} .booking h3 {

   font-size: 22px;
   color: #333;
   letter-spacing: 3px;
   font-weight: 700;
   text-transform: uppercase;

} /*-- //booking-form--*/

/*-- bottom --*/ .bottom {

   background: #02c1ee;

} .bottom-grids h4 {

   font-size: 25px;
   letter-spacing: 5px;
   color: #eee;

} .bottom-grids h3 {

   font-size: 50px;
   color: #eee;
   font-weight: 700;
   letter-spacing: 2px;

text-transform: capitalize; } .bottom-grids .grid1 a {

   font-size: 15px;
    display: inline-block;
   color: #02c1ee;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: 600;
   background: #fff;
   padding: 13px 30px;
   border-radius: 35px;

} .bottom-grids .grid1 a:hover,.welcome-grids a:hover {

   color: #fff;
   background: #333;

} .bottom-grids img {

   border: 4px solid #fff;

} a.arrow-2 {

   font-size: 60px;
   color: #eee;
   margin-top: .8em;
   display: inline-block;
   outline: none;

} /*-- bottom --*/

/*-- welcome --*/ .welcome-grids h4 {

   color: #999;
   text-transform: capitalize;
   font-size: 20px;

} .welcome-grids h3 {

   font-size: 24px;
   color: #333;
   font-weight: 600;
   line-height: 34px;
   letter-spacing: 2px;
   text-transform: uppercase;

} .welcome-grids p {

   color: #555;
   font-size: 15px;
   letter-spacing: 1px;
   line-height: 28px;

} .welcome-grids a {

   font-size: 15px;
   display: inline-block;
   color: #fff;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: 600;
   background: #02c1ee;
   padding: 13px 30px;
   border-radius: 35px;

} .position { padding: 12px;

   border: 4px solid #666;

} .welcome-grid3 img { padding: 12px;

   border: 4px solid #02c1ee;

} h2.heading,h3.heading {

   font-size: 50px;
   text-transform: capitalize;
   font-weight: 600;
   letter-spacing: 5px;
   color: #3a3a3a;

} /*-- welcome --*/

/*-- //services --*/ /*-- mid --*/ .list-inline> li {

   margin: 1.2em 0;
   display: block;
   padding: 0;

} .list-inline> li a{

   display: block; 

} .mid-text-info h4 {

   color: #fff;

font-size: 16px; letter-spacing: 1px;

   line-height: 26px;

} .news-right h4{

   font-size: 26px;
   color: #f39a48;
   letter-spacing: 5px;
   font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);

} .mid-text-info p { margin-top: 0.3em;

   letter-spacing: 1px;
   font-family: initial;
   color: #ccc;
   text-decoration: underline;

} .list-inline> li a img {

   width: 25%;
   border-radius: 50%;
   background: #ffffff;
   padding: .3em;

} .desoSlide-wrapper {

   position: relative;
   text-align: center;
   overflow: hidden;

} .desoSlide-overlay {

   z-index: 10;
   color: #fff;
   font-size: 1em;
   text-align: left;
   font-weight: 300;
   line-height: 2em;
   padding: 2.5em;
   opacity: 0.8 !important;
   filter: alpha(opacity=100);
   background: #02c1ee;
   width: 50% !important;
   position: absolute;
   top: 18% !important;
   left: -50% !important;
   -webkit-transition: .5s all;
   -moz-transition: .5s all;
   transition: .5s all;

} .desoSlide-wrapper img {

   width: 100%;
   background: rgb(255, 255, 255);
   padding: .4em;

} .mid-text-info {

   float: right;
   width: 70%;

} .desoSlide-overlay .btn.btn-primary.play {

   color: #fff;
   font-size:1.4em;

margin-bottom: .5em;

   font-weight: 700;

} .desoSlide-wrapper:hover .desoSlide-overlay { left: 0% !important; } .desoSlide-overlay ul li{ display:block; } .desoSlide-overlay ul li a {

   display: block;

padding: 1em; -moz-opacity: 0.7; opacity: 0.7; } .desoSlide-overlay ul li a:hover { -moz-opacity: 1;

   opacity: 1;

} .desoSlide-overlay ul li a span.glyphicon {

   font-size: 1.3em;
   color: #fff;

} .desoSlide-overlay ul li a h6 {

   font-size: 0.9em;
   color: #fff;
   margin-top: .5em;

} section.middle-sec-agileinfo-w3ls{ background: -webkit-linear-gradient(rgba(23, 22, 23, 0.2), rgba(23, 22, 23, 0.5)), url(../images/banner5.jpg) no-repeat; background: -moz-linear-gradient(rgba(23, 22, 23, 0.2), rgba(23, 22, 23, 0.5)), url(../images/banner5.jpg) no-repeat; background: -ms-linear-gradient(rgba(23, 22, 23, 0.2), rgba(23, 22, 23, 0.5)), url(../images/banner5.jpg) no-repeat; background: linear-gradient(rgba(23, 22, 23, 0.2), rgba(23, 22, 23, 0.5)), url(../images/banner5.jpg) no-repeat; background-size: cover;

} section.middle-sec-agileinfo-w3ls h3.heading{ color: #fff; } /*-- //mid --*/

/*-- //featured_services --*/

.featured_services { text-align: center; }

.w3_agile_services_grid { text-align: left; }

.w3_service_grid_left_grid { width: 120px; height: 120px; border: 1px solid #212121; margin: 0 auto; padding-top: 1em; position: relative; overflow: hidden; }

.w3_service_grid_left_grid img { margin: 0 auto; }

.w3l_service_grid_left h4 { font-size: 1.1em; color: #fff; font-weight: 600; margin: 1em 0; letter-spacing: 3px; line-height: 1.5em; text-transform: uppercase; }

.w3l_service_grid_left p { color: #fff; line-height: 2em; margin-bottom: 1.5em; }

.w3_agile_service_more a { font-size: 1.2em; color: #212121; letter-spacing: 2px; text-decoration: none; }

.w3_agile_service_more a i { padding-left: 1em; color: #48b7ec; }

.w3_agile_service_more a:hover { color: #48b7ec; }

.w3_agile_service_more a:hover i { color: #212121; }

.w3_service_grid_left_grid img { transition: transform 0.5s; transform: scale(1.10); -webkit-transform: scale(1.10); -moz-transform: scale(1.10); -o-transform: scale(1.10); -ms-transform: scale(1.10); }

.w3l_service_grid_left:hover .w3_service_grid_left_grid img { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); }

.w3l_service_grid_left:hover .w3_service_grid_left_grid { border: 1px solid #48b7ec; }

.agile_services_grid_pos { position: absolute; bottom: -13%; left: 6%; width: 55px; height: 55px; background: #02c1ee; border-radius: 50px; border: 2px solid #fff; text-align: center; }

.agile_services_grid_pos i { font-size: 1.3em; color: #fff; line-height: 2.5em; }

.agile_services_grid figure { margin: 0; padding: 0; overflow: hidden; }

/* Rotate */

.hover06 figure img { -ms-transform: rotate(15deg) scale(1.4); -o-transform: rotate(15deg) scale(1.4); -moz-transform: rotate(15deg) scale(1.4); -webkit-transform: rotate(15deg) scale(1.4); transform: rotate(15deg) scale(1.4); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; }

.hover06 figure:hover img, .w3_agile_services_grid:hover .hover06 figure img { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1); -moz-transform: rotate(0) scale(1); -o-transform: rotate(0) scale(1); -ms-transform: rotate(0) scale(1); }

.agile_services_grid { position: relative; }

.w3_agile_services_grid h4 {

   font-size: 1.2em;
   color: #111;
   margin: 2em 0 0.5em;
   letter-spacing: 4px;
   font-weight: 600;
   text-transform: uppercase;

} .w3_agile_services_grid p {

   color: #555;
   font-size: 15px;
   letter-spacing: 1px;
   line-height: 28px;

} .agile_inner_info a {

   font-size: 14px;
   display: inline-block;
   color: #fff;
   letter-spacing: 3px;
   text-transform: uppercase;
   font-weight: 600;
   background: #02c1ee;
   padding: 14px 40px;
   border-radius: 35px;

} .agile_inner_info a:hover {

   background: #333;

} /*-- //featured_services --*/

/*-- team --*/ .team{ } .wthree_head1{ color:#fff; } .agileits_team_grid_figure,.agileits_team_grid_figure_social {

   float: left;

} .agileits_team_grid_figure img {

   border: 5px solid #fff;
   border-radius: 50%;
   margin: 0 auto;
   text-align: center;
    margin-left: 2em;
   width: 130px;
   height: 130px;

} .agileits_team_grid_figure_social{ margin: 2em 0 0 0.5em; } .agileits_team_grid h4{ font-size:1.2em;

   color: #02c1ee;
   font-weight: 600;

margin: 1em 0;

   text-transform: uppercase;
   letter-spacing: 2px;

} .agileits_team_grid h4 span{

   font-size: .7em;
   text-transform: capitalize;
   text-decoration: underline;
   color: #777;

} .agileits_team_grid p{

   color: #555;
   font-size: 15px;
   letter-spacing: 1px;
   line-height: 28px;

} .agileits_team_grid {

   text-align: center;
   padding: 2em 1em;
    border: 1px solid rgba(146, 146, 146, 0.27);

transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .agileits_team_grid:hover {

   background: #222;

transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .w3layouts_banner_info_right ul li,.w3ls_social li{ display:inline-block; } .w3layouts_banner_info_right ul li a,.w3ls_social li a{

   width: 33px;
   height: 33px;
   line-height: 33px;
   color: #fff;
   text-align: center;
   display: inline-block;
   font-size: 11px;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -o-border-radius: 50%;

} a.w3_agile_facebook{ background:#3b5998; } a.agile_twitter{ background:#1da1f2; } a.w3_agile_dribble{ background:#ea4c89; } a.w3_agile_vimeo{ background:#1ab7ea; } a.w3_agile_facebook:hover {

   background: #84a3e3;

} a.agile_twitter:hover{ background:#68b8e9; } a.w3_agile_dribble:hover{ background:#f782af; } a.w3_agile_vimeo:hover{ background:#5acef3; } /*-- //team --*/

/*-- footer --*/ footer {

   background: #57BDFC;

} .footer-grids a {

   color: #fff;
   font-size: 18px;
   letter-spacing: 3px;
   font-weight: 600;
   text-transform: uppercase;

} .footer-grids i {

   color: #02c1ee;
   margin-right: 10px;

} .footer-grids {

   border-bottom: 1px solid #464646;

} /*-- //footer --*/ p.para {

   margin: 0;
   font-size: 0.95em;
   color: #a5a3a3;
   line-height: 2em;
   letter-spacing: 1px;

} .subscribe-grid {

   margin: 0 auto;
   width: 70%;

} .subscribe-grid h5 {

   color: #fff;
   text-transform: capitalize;
   font-size: 19px;
    letter-spacing: 2px;
   font-weight: 600;

} .subscribe-grid p.para{

   color: #aaa;
   font-size: 16px;
   letter-spacing: 1px;
   padding: 1em 0 2em;

text-transform: lowercase; } .subscribe-grid p {

   color: #02c1ee;
   font-size: 16px;
   letter-spacing: 1px;
   padding: 1em 0 2em;

text-transform: capitalize; } .subscribe-grid p span {

   color: #fff;
    font-weight: 600;
   margin: 0 5px;
   text-decoration: underline;

}

.subscribe-grid form { position: relative;

    width: 70%;
   margin: auto;

} .subscribe-grid form:hover input[type="email"] { border: solid 2px rgba(255, 255, 255, 0.14); -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; transition: 0.5s all; }

.subscribe-grid input[type="email"] { display: inline-block;

    background: transparent;

border: solid 2px #32343a; width: 100%; outline: none; padding: 1em 4em 1em 1em; font-size: 1em; color: #fff; border-radius: 0px; letter-spacing: 1px; }

.subscribe-grid i.fa.fa-paper-plane-o { font-size: 1.2em !important; }

.subscribe-grid button.btn1 { color: #fff; border: none; width: 65px; height: 60px; position: absolute; right: 0; bottom: 0; text-align: center; cursor: pointer; background: transparent; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; transition: 0.5s all; }

.subscribe-grid button.btn1:focus { outline: none; }

button.btn1:hover { background: none; color: #ffa200; }

button.btn1:hover i.fa.fa-paper-plane-o { color: #ffa200 !important; } .form-control:focus {

   box-shadow: none;

} /*-- copy right --*/ .copyright{

   background: #1d1d1d;

} .copyright p{ color :#fff;

    font-size: 15px;
   letter-spacing: 2px;
   text-transform: capitalize;

} .copyright p a{ color : #02c1ee; } .copyright p a:hover{ color : #fff; } /*-- //copy right --*/

/*-- inner page banner --*/ .innerpage-banner {

   background: url() no-repeat center;
   background-size: cover;
   min-height: 300px;

}

.layer1{

     background: rgba(37, 37, 37, 0.4);

min-height: 300px; } /*-- //inner page banner --*/

/*-- contact --*/ .w3ls_map iframe { width: 100%; min-height: 320px;

   border: 5px solid #f39a48;
   padding: 5px;

}

.contact_wthreerow, .agileits_mail_grid_right_grid:nth-child(2) { margin-top: 3em; }

.w3l_contact_form { padding-right: 5em; }

.contact_wthreerow h4 {

   color: #333;
   letter-spacing: 1px;
   margin-bottom: 1em;
   font-weight: 600;

}

.w3l_contact_form input[type="text"], .w3l_contact_form input[type="email"], .w3l_contact_form textarea { outline: none;

   width: 100%;
   padding: .9em 1em;
   letter-spacing: 2px;
   font-size: 15px;
   color: #888;

border: none; border: 1px solid #bbb;

   border-left: 4px solid #bbb;

background: none;

   border-radius: 3px;

}

.w3l_contact_form input[type="email"] { margin: 1.5em 0; }

.w3l_contact_form textarea { min-height: 120px; resize: none; margin: 1.5em 0; }

.w3l_contact_form input[type="submit"] {

   outline: none;
   padding: 10px 40px;
   font-size: 16px;
   color: #fff;
   border: none;
   background: #02c1ee;
   text-transform: capitalize;
   font-weight: 600;
   letter-spacing: 2px;

-webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; }

.w3l_contact_form input[type="submit"]:hover { background: #333; color: #fff; }

ul.contact_info li {

   list-style-type: none;
   margin-top: 1em;
   letter-spacing: 1px;
   color: #888;
   font-size: 1em;

}

ul.contact_info li span.fa { color: #fff; background: #02c1ee; width:40px; height:40px; text-align: center; line-height: 40px; border-radius: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; margin-right: 1em; font-size: .9em; }

ul.contact_info li span.left { margin-left: 53px; } ul.contact_info li a {

   color: #888;

text-decoration: none; }

ul.contact_info li a:hover { color: #02c1ee; } .agileits_mail_grid_right_grid p {

   color: #555;
   font-size: 15px;
   letter-spacing: 1px;
   line-height: 28px;
   margin-bottom: 2em;

} .w3-about h4 {

   text-transform: uppercase;
   margin: 0em 0 1em;
   color: #000;
   font-size: 1.4em;
   line-height: 32px;
   text-align: left;
   font-weight: 500;

} .last h4 {

   text-align: center;
   text-transform: capitalize;

}

.about-top p {

   text-align: left;

} .last p {

   text-align: center;

} .middle-img img {

   width: 100%;

} /*-- //contact --*/

/*-- welcome bottom --*/ .welcome-bottom{ background: url(../images/banner5.jpg) no-repeat center; background-size: cover; background-attachment: fixed; } .welcome-bottom h4 {

   font-size: 40px;
   color: #fff;
   letter-spacing: 3px;
   font-weight: 300;
   line-height: 60px;
   text-transform: capitalize;

} .welcome-bottom p {

   font-size: 17px;
   color: #fff;
   letter-spacing: 3px;
   text-transform: capitalize;
   font-style: italic;

border-left: 3px solid #fff; padding-left: 15px; margin-left: 10px; } .welcome-bottom-layer{

     background: rgba(37, 37, 37, 0.4);

} .welcome-bottom a {

   font-size: 15px;
   display: inline-block;
   color: #fff;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: 600;
   background: #02c1ee;
   padding: 13px 30px;
   border-radius: 35px;

} .welcome-bottom a:hover {

   color: #333;
   background: #fff;

}

/*-- //welcome bottom --*/

/*-- testimonials --*/ .agileinfo_team_grid1 {

   padding: 2em 1em;
   border: 2px solid #333;
   border-left: 4px solid #02c1ee;

} .agileinfo_team_grid1_pos {

   position: absolute;
   top: -50%;
   left: 0%;
   width: 40%;
   padding: .3em;
   background: #ffffff;

} .agileinfo_team_grid1_text {

   padding-left: 13em;
   position: relative;

} .agileinfo_team_grid1_text h4 {

   padding: .6em 1em;
   background: #02c1ee;
   color: #ffffff;

float: left;

    letter-spacing: 2px;
   text-align: center;
   font-size: 1em;
   text-transform: capitalize;

} .agileinfo_team_grid1_text h5 {

   font-size: 13px;
   padding: .5em 1em;
   background: #ffffff;
   color: #000;

float: left;

   text-align: center;

} .agileinfo_team_grid1_text p {

   margin: 1em 0 0 0em;
   color: #555;
   line-height: 2em;
   text-align: left;

} .agileinfo_team_grid {

   margin: 2em 0 0;
    float: left;

} .social-nav {

   padding: 0;
   list-style: none;
   display: inline-block;
   margin:2em 0 0;

} .social-nav li {

   display: inline-block;

} .social-nav a {

   display: inline-block;
   float: none;
   width: 30px;
   height: 30px;
   text-decoration: none;
   cursor: pointer;
   text-align: center;
   line-height: 30px;
   background: #000;
   position: relative;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;

} .model-3d-0 a {

   background:#5C5B5B;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;

} .model-3d-0 .front, .model-3d-0 .back {

   width: 30px;
   height: 30px;
   background:#FFDF00;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transform: translateZ(18px);
   -moz-transform: translateZ(18px);
   -ms-transform: translateZ(18px);
   -o-transform: translateZ(18px);
   transform: translateZ(18px);
   -webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
   -ms-backface-visibility: visible;
   -o-backface-visibility: visible;
   backface-visibility: visible;

color:#212121; font-size:12px; } .model-3d-0 .back {

   -webkit-transform: rotateX(90deg) translateZ(18px);
   -moz-transform: rotateX(90deg) translateZ(18px);
   -ms-transform: rotateX(90deg) translateZ(18px);
   -o-transform: rotateX(90deg) translateZ(18px);
   transform: rotateX(90deg) translateZ(18px);
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;

} .twitter .back,.facebook .back,.instagram .back,.pinterest .back{

   background:#fff;

} .model-3d-0 a:hover {

   -webkit-transform: rotateX(-90deg);
   -moz-transform: rotateX(-90deg);
   -ms-transform: rotateX(-90deg);
   -o-transform: rotateX(-90deg);
   transform: rotateX(-90deg);

} .model-3d-0 a:hover .back {

   -webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
   -ms-backface-visibility: visible;
   -o-backface-visibility: visible;
   backface-visibility: visible;

} .w3_agile_social li a i{ color: #212121;

   font-size: 12px;

} /*-- slider --*/

1. slideshow

{ position: relative; overflow: hidden;

margin: 0 auto; max-width:100%;

/* No iOS tap highlight */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

/* No text selection */ -webkit-user-select: none; -moz-user-select: none;

/* No IE10 default touch actions */ -ms-touch-action: none; }

#slideshow .strip { position: relative; }

#slideshow .strip, #slideshow .slide { left: 0; top: 0;

width: 100%; height: 100%; }

#slideshow .strip, #slideshow .slide, #slideshow > button { -webkit-perspective: 1000; -webkit-backface-visibility: hidden; }

#slideshow .slide { position: absolute; display: none; text-align: center; outline: none; }

#slideshow .slide.sticky { display: block; }

#slideshow > button { position: absolute; z-index: 1; bottom: 15%; left: 0%; padding: 0; }

#slideshow button.next { left: auto; right: 90%; }

#slideshow .markers { text-align: right; }

#slideshow ul, #slideshow li { display: block; overflow: hidden;

margin: 0; padding: 0;

list-style: none; }

#slideshow li { float: left; }

#slideshow li + li { margin-left: 10px; }

.advanced #slideshow ul { display: inline-block; }

/* Theme ----------------------------------- */

#slideshow .strip { padding-bottom:33.5%; }

#slideshow button { margin: 0;

background: none; border: 0; cursor: pointer;

-webkit-appearance: none; -moz-appearance: none; outline: none; }

.advanced #slideshow > button { position: absolute; top: 50%;

display: block;

width: 40px; height: 36px;

margin-top: -40px; padding-right: 10px; padding-left: 7px; }

#slideshow > button::-moz-focus-inner { margin: -1px; padding: 0; }

#slideshow > button b { display: block;

width: 50px; height: 50px;

background: #02c1ee url() no-repeat 4px 8px;

text-indent: -10000px; outline: none; }

#slideshow button.next { padding-right: 7px; padding-left: 10px; }

#slideshow button.next b { left: 10px; }

#slideshow button.next b { background: #02c1ee url(../images/next1.png) no-repeat 10px 8px; }

#slideshow .markers { height: 15px; padding: 15px 10px;

text-align: center; font-size: 0.8em; display: none; }

/* Hide buttons when disabled */ #slideshow.disabled > button { display: none; }

#slideshow .markers button { display: inline-block;

padding: 0;

width: 10px; height: 10px;

background: #575757; border-radius: 5px;

text-indent: -10000px; opacity: 0.3; }

#slideshow .markers button { margin-left: 10px; }

#slideshow .markers button.sticky { background-color: #3172dd; opacity: 0.75; }

/* Bigger markers for touch */ #slideshow.touch .markers button { width: 16px; height: 16px;

border-radius: 8px; }

#slideshow.touch .markers button + button { margin-left: 10px; } button.next.disabled{ opacity: .5; } /*-- //slider --*/ /*-- //testimonials --*/

/*-- Pricing --*/

.price-main-info .card-header h4 { color: #f7f7f7;

    font-size: 2em;
   font-weight: 600;
   letter-spacing: 2px;

line-height: 1em; padding-top: 2em; }

.price-main-info .card-header h4 span { display: block; font-weight: 100; }

.price-main-info .card-header { background: url(../images/price.jpg)no-repeat 0px 0px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover; min-height: 192px; }

.price-main-info .card-body { background: #e9e9e9; padding: 2em; }

.pricing-card-title span { font-size: .5em; display: inline-block; color: #000; }

.price-main-info small.text-muted { font-size: 0.5em; }

ul.list-unstyled li { font-size: 14px; color: #7d7d7d; letter-spacing: 1px; line-height: 2.2em; }

.price-main-info h5.card-title { font-size: 2em; color: #1c1c1d; font-weight: 700; }

.btn-outline-primary { color: #000000; background-color: transparent; background-image: none; border-color: #00bce4; font-size: 16px; letter-spacing: 1px; }

.btn-outline-primary:hover { color: #fff; background-color: #00bce4; border-color: #0aa4c5; }

.card-deck .card { padding: 0px; }

.row.prime { margin: 0; }

.price-main-info.card { border-radius: 0; border: none; background: none; } a.price{

   font-size: 13px;
   display: inline-block;
   color: #fff;
   letter-spacing: 1px;
   text-transform: uppercase;
   font-weight: 600;
   background: #02c1ee;
   padding: 11px 30px;
   border-radius: 35px;

} a.price:hover {

   background: #333;

}

/*--// Pricing --*/

/*-- gallery --*/ .galry-grid.galry-text {

   padding: 1em;

} .gallery p {

   font-size: 1.5em;
   color: #fff; 
   letter-spacing: 1px;

} .galry-grid.galry-grid-right {

   padding-left: 1em;

} .galry-grid.glry-one {

   padding-bottom: 1em;

} .galry-text {

   padding: 3em 4.5em;
   background: #02c1ee;
   margin-bottom: 1em;
   text-align: center;

} .galry-grid a {

   display: block;

overflow: hidden;

   position: relative;

} .glry-two.glry-left {

   float: left;
   width: 64.5%;
   margin-right: 1em;
   overflow: hidden;

} .glry-two.glry-right {

   float: left;
   width: 33.1%;

overflow: hidden; } .gallery-grids:nth-child(1) {

   padding: 0;

} .gallery-grids:nth-child(2) {

   padding-right: 0;

} .glly-bottm .glry-two.glry-left {

   margin: 0 0 0 1em;

} .galry-grid.grid-top-rgt {

   margin-bottom: 1.1em;

} a.w3ls-bottom-img {

   margin-top: 1em;
   display: block;

} .w3agile-text {

   background: rgba(0, 0, 0, 0.58);
   position: absolute;
   width: 100%;
   height: 100%;
   bottom: -100%;
   left: 0;

transition:.5s all; } .galry-grid a:hover .w3agile-text{ bottom: 0%; } .w3agile-text h5 {

   font-size: 2.5em;
   color: #fff;
   text-align: center;
   margin-top: 4em;

} .w3agile-text.w3agile-text-small h5 {

   margin-top: 2.2em;
   font-size: 2em;

} .w3agile-text.w3agile-text-small1 h5 {

   margin-top: 3em;

} img.zoom-img{ width:100%; -webkit-transform: scale(1, 1);

   transform: scale(1, 1);

-moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; } .galry-grid a:hover img.zoom-img{ -webkit-transform: scale(1.8); transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 750ms; -moz-transition-duration: 750ms; -ms-transition-duration: 750ms; -o-transition-duration: 750ms; transition-duration: 750ms; overflow: hidden; } /*-- //gallery --*/

/*-- offers --*/ .offer h3 {

   background: #333;
   color: #fff;
   font-size: 22px;
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   border-radius: 50%;

transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .offer h3:hover{ background: #02c1ee; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .offer-grid{ position: relative; } .offer-grid h4{

   font-size: 18px;
   color: #333;
   font-weight: 600;
   line-height: 34px;
   letter-spacing: 2px;
   text-transform: uppercase;

} .offer-grid p{

   color: #555;
   font-size: 15px;
   letter-spacing: 1px;
   line-height: 24px;

} .offer{ position: absolute;

   position: absolute;
   top: -16%;
   right: 5%;
   border: 2px solid #fff;
   border-radius: 50%;

} /*-- offers --*/

/*-- to-top --*/

1. toTop {

   text-decoration: none;
   position: fixed;
   bottom: 30px;
   right: 2%;
   overflow: hidden;
   z-index: 999;
   width: 34px;
   height: 34px;
   border: none;
   text-indent: 100%;
   background: #fff url() no-repeat 1px 1px;
   box-shadow: 0 0 0 20px rgba(123,191,234, 0.32), 0 0 0 10px rgba(255, 255, 255, 0.5);
   border-radius: 50%;

}

1. toTopHover {

   width: 34px;
   height: 34px;

display: block; overflow: hidden; float: right; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } /*-- //to-top --*/

/*-- /Responsive Design --*/

@media(max-width:1440px) { .banner-top,.banner-top1,.banner-top2,.banner-top3,.layer { min-height: 700px; } .banner-info_agile_w3ls { padding-top: 19em; } .w3_agileits_social_media { left: 4.5%; top: 15em; } .bottom-grids h3 { font-size: 47px; } .callbacks_nav.prev { left: 46%; } .callbacks_nav.next { right: 46%; } } @media(max-width:1366px) { .banner-top,.banner-top1,.banner-top2,.banner-top3,.layer { min-height: 660px; } .w3_agileits_social_media { top: 13em; } } @media(max-width:1280px) { .callbacks_nav { top: 80%; } .callbacks_nav.prev { left: 45%; } .callbacks_nav.next { right: 45%; } .thim-click-to-bottom { bottom: 13%; left: 48.7%; } } @media(max-width:1080px) { p.ab { left: -2%; } .bottom-grids h4 { font-size: 22px; letter-spacing: 3px; } .bottom-grids h3 { font-size: 39px; } a.arrow-2 { font-size: 50px; } .welcome-grids h3 { font-size: 22px; letter-spacing: 1px; } .w3_agile_services_grid h4 { font-size: 1.1em; letter-spacing: 3px; } .mid-text-info h4 { font-size: 15px; } .agileits_team_grid_figure img { margin-left: .5em; width: 105px; height: 105px; } .agileits_team_grid p { font-size: 14.5px; letter-spacing: .5px; } .agileinfo_team_grid1_text { padding-left: 10em; } #slideshow button.next { right: 88%; } .price-main-info.card { padding: 0 5px; } .glry-two.glry-left { width: 64%; } ul.contact_info li span.left { margin-left: 0; } } @media(max-width:1024px) { .banner-top,.banner-top1,.banner-top2,.banner-top3,.layer { min-height: 600px; } .thim-click-to-bottom { bottom: 7%; } .callbacks_nav { top: 86%; } p.ab { bottom: 15%; } .banner-info_agile_w3ls { padding-top: 17em; } .banner-info_agile_w3ls h3, .banner-info_agile_w3ls h2 { font-size: 2.8em; letter-spacing: 0px; } .price-main-info .card-header h4 { font-size: 1.8em; letter-spacing: 1px; padding-top: 1.5em; } .price-main-info .card-header { min-height: 170px; } .price-main-info .card-body { padding: 2em 1.5em; } } @media(max-width:991px) { .header-top p { letter-spacing: 1px; font-size: 14px; } .navbar-light .navbar-brand { font-size: 1.1em; } .navbar-light .navbar-toggler { border-color: #fff; background: #02c1ee; } .navbar-toggler { border-radius: 0; } .navbar-nav { background: rgba(0, 0, 0, 0.7); padding: 1em 2em; text-align: center; } .navbar-light .navbar-nav .nav-link { display: inline-block; } li.nav-item { padding: 0 15px 10px; } .bottom-grids h4 { font-size: 20px; letter-spacing: 2px; } .bottom-grids h3 { font-size: 34px; } .agileits_team_grid_figure img { margin-left: 2em; width: 150px; height: 150px; } .footer-grids .col-md-3 { padding: 0; } .desoSlide-overlay { font-size: .8em; padding: 1.5em; width: 80% !important; left: -80% !important; } .footer-grids a { font-size: 16px; letter-spacing: 2px; } .subscribe-grid { width: 100%; } .innerpage-banner,.layer1 { min-height: 250px; } .welcome-bottom h4 { font-size: 32px; letter-spacing: 2px; line-height: 50px; } .agileinfo_team_grid1_text { padding-left: 14em; } .agileinfo_team_grid1_pos { top: -50%; width: 30%; } #slideshow > button { bottom: 0%; } #slideshow button.next { right: 84%; } .galry-text { padding: 2em 1.5em; } .gallery p { font-size: 1.3em; } .glry-two.glry-left { width: 63%; } .w3agile-text h5 { margin-top: 2em; } .w3agile-text.w3agile-text-small h5 { margin-top: 1.8em; font-size: 1.5em; } .w3agile-text.w3agile-text-small1 h5 { margin-top: 1.5em; } .w3l_contact_form { padding-right: 15px; } } @media(max-width:800px) { .banner-info_agile_w3ls h3, .banner-info_agile_w3ls h2 { font-size: 2.5em; letter-spacing: 0px; } .banner-info_agile_w3ls h3 span, .banner-info_agile_w3ls h2 span { padding: 0 0px; } .thim-click-to-bottom { bottom: 12%; left: 47.7%; } .callbacks_nav.prev { left: 42%; } .callbacks_nav.next { right: 42%; } .callbacks_nav { top: 81%; } .bottom-grids h3 { font-size: 29px; } } @media(max-width: 768px) { .w3_agileits_social_media ul li { margin-bottom: .5em; } .w3_agileits_social_media ul li a { font-size: 12px; width: 33px; height: 33px; line-height: 33px; } p.ab { bottom: 19%; left: -5%; } h2.heading, h3.heading { font-size: 45px; letter-spacing: 3px; } } @media(max-width: 736px) { .header-top p { text-align: center; margin: .2em; } header { padding: 1em 0; } .navbar-light .navbar-brand { font-size: .9em; } .banner-info_agile_w3ls h3, .banner-info_agile_w3ls h2 { font-size: 2.2em; letter-spacing: 0px; } .banner-info_agile_w3ls p { font-size: .9em; margin: 1em 0; letter-spacing: 4px; } .banner-top, .banner-top1, .banner-top2, .banner-top3, .layer { min-height: 550px; } .banner-info_agile_w3ls { padding-top: 15em; } p.ab { bottom: 44%; left: -8%; } .w3_agileits_social_media { left: 6.5%; top: 13.5em; } .callbacks_tabs a { width: 30px; height: 30px; font-size: 13px; line-height: 25px; } .callbacks_tabs { top: 39%; } a.arrow-2 { font-size: 30px; margin-top: .2em; } .agile_services_grid_pos { bottom: -15%; left: 5%; } .agileits_team_grid_figure img { margin-left: 1em; width: 120px; height: 120px; } .subscribe-grid p.para { font-size: 15px; } .copyright p { letter-spacing: 1px; } .welcome-bottom h4 { font-size: 28px; letter-spacing: 1px; } .welcome-bottom p { font-size: 15px; } .w3_agile_services_grid h4 { font-size: 1em; } .agileinfo_team_grid1_text { padding-left: 9em; } .agileinfo_team_grid1_text p { font-size: 15px; } #slideshow .strip { padding-bottom: 47.5%; } #slideshow button.next { right: 78%; } .w3agile-text.w3agile-text-small1 h5 { margin-top: 4em; } .w3agile-text h5 { margin-top: 5em; } .w3agile-text h5 { margin-top: 2.5em; } .w3ls_map iframe { min-height: 250px; border: 4px solid #f39a48; } } @media(max-width: 667px) { p.ab { left: -10%; } } @media(max-width:600px) { .banner-info_agile_w3ls { padding: 0 3em; padding-top: 14em; } p.ab { left: -11%; bottom: 42%; } .banner-top, .banner-top1, .banner-top2, .banner-top3, .layer { min-height: 520px; } .thim-click-to-bottom { bottom: 7%; left: 47%; } .callbacks_nav { top: 85%; } .callbacks_nav.prev { left: 41%; } .callbacks_nav.next { right: 41%; } .banner-info_agile_w3ls a { letter-spacing: 2px; font-size: 13px; } .welcome-grids h3 { font-size: 20px; letter-spacing: 0px; } .welcome-grids a { font-size: 14px; letter-spacing: 1px; padding: 11px 30px; } } @media(max-width:568px) { .w3_agileits_social_media { left: 7%; top: 13.5em; } header { padding: 0em 0; } .banner-info_agile_w3ls h3, .banner-info_agile_w3ls h2 { font-size: 2em; } .book-form form input[type="submit"] { margin-top:.3em; } .agileits_team_grids { padding: 0 7em; } .footer-grids .col-md-3 { padding: 0 15px; } h2.heading, h3.heading { font-size: 40px; letter-spacing: 2px; } .innerpage-banner, .layer1 { min-height: 200px; } .offer-grids { padding: 0 4em; } .offer { top: -10%; } .agile_services_grid_pos { bottom: -9%; } } @media(max-width:480px) { p.ab { display: none; } .w3_agileits_social_media { left: 6%; top: 13em; } .banner-info_agile_w3ls { padding: 0 3em; padding-top: 13em; } .bottom-grids h3 { font-size: 25px; } .agileits_team_grids { padding: 0 5em; } .footer-grids a { font-size: 15px; letter-spacing: 1px; } .subscribe-grid p.para { font-size: 14px; } .subscribe-grid h5 { font-size: 17px; letter-spacing: 1px; } .subscribe-grid form { width: 80%; } .thim-click-to-bottom { left: 46%; } .callbacks_nav.prev { left: 38%; } .callbacks_nav.next { right: 38%; } .w3agile-text.w3agile-text-small1 h5 { margin-top: 3em; } } @media(max-width: 414px) { .banner-info_agile_w3ls { padding: 0 2em; padding-top: 13em; } .w3_agileits_social_media { left: 4%; } .agileits_team_grids { padding: 0 4em; } .welcome-grids h4 { font-size: 18px; } .offer-grids { padding: 0 2em; } .agileinfo_team_grid1_pos { width: 60%; position: static; } .agileinfo_team_grid1_text { padding-left: 2em; } #slideshow .strip { padding-bottom: 117%; } #slideshow button.next { right: 69%; } .glry-two.glry-left { width: 96%; float: none; margin: 0; padding: 0; } .glry-two.glry-right { float: none; width: 100%; } .glly-bottm .glry-two.glry-left { margin: 1em 0 0 0em; } .w3agile-text.w3agile-text-small h5 { margin-top: 2.5em; font-size: 2.5em; } .contact_wthreerow h4 { margin-bottom: .8em; font-size: 1.3rem; } ul.contact_info li { font-size: .9em; } } @media(max-width: 384px) { .banner-info_agile_w3ls a { letter-spacing: 1px; font-size: 13px; } .navbar-light .navbar-brand { font-size: .8em; } .banner-info_agile_w3ls h3, .banner-info_agile_w3ls h2 { font-size: 1.8em; } .welcome-grids h3 { font-size: 18px; } .welcome-grids p { font-size: 14px; } h2.heading, h3.heading { font-size: 35px; letter-spacing: 1px; } .news-right h4 { font-size: 25px; letter-spacing: 2px; } .agileits_team_grids { padding: 0 2em; } .welcome-bottom h4 { font-size: 24px; letter-spacing: 1px; line-height: 40px; } #slideshow button.next { right: 65%; } } @media(max-width:375px) { .callbacks_nav.next { right: 37%; } .bottom-grids h3 { font-size: 23px; letter-spacing: 1px; } .welcome-grids h4 { font-size: 17px; } .welcome-grids h3 { font-size: 17px; } .footer-grids a { font-size: 14px; } .subscribe-grid p { font-size: 15px; } .subscribe-grid input[type="email"] { padding: .8em 3em .8em 1em; font-size: .9em; } .subscribe-grid button.btn1 { width: 60px; height: 48px; } .w3agile-text.w3agile-text-small1 h5 { margin-top: 2.5em; } } @media(max-width:320px) { .footer-grids .col-md-3 { padding: 0 8px; } .footer-grids a { font-size: 13px; } .subscribe-grid p.para { font-size: 13.5px; } .subscribe-grid h5 { font-size: 15px; } }}

/*-- //Responsive Design --*/