Team:SUSTech Shenzhen/css/responsive-css

/* lg */ @media (min-width: 1200px) {

/* Make Navigation Toggle on Desktop Hover */
 .dropdown:hover .dropdown-menu {
     display: block;
     -webkit-animation: fadeInUp 400ms;
     animation: fadeInUp 400ms;
 }

 #portfolio .row {
   margin-left: -10px;
   margin-right: -10px;
 }

}

/* md */ @media (min-width: 992px) and (max-width: 1199px) {

/* Make Navigation Toggle on Desktop Hover */
 .dropdown:hover .dropdown-menu {
     display: block;
     -webkit-animation: fadeInUp 400ms;
     animation: fadeInUp 400ms;
 }

 .navbar-nav > li {
   margin-left: 10px;
 }

 .navbar-collapse {
   padding-left: 0;
   padding-right: 0;
 }

 .recent-work-wrap .recent-work-inner h3 a {
   font-size: 20px;
 }

 .recent-work-wrap .overlay{
   padding: 15px;
 }

 .services-wrap {
   padding: 40px 10px 40px 30px;
 }

 .feature-wrap h2, 
 .single-services h2 {
   font-size: 18px;
 }

 .feature-wrap h3, 
 .single-services h3{
   font-size: 14px;
 }

 .tab-wrap .media .parrent.pull-left{
   clear: both;
   width: 100%;
 }

 .tab-wrap .media .parrent.media-body{
   clear: both;
 }

 #portfolio .row {
   margin-left: -10px;
   margin-right: -10px;
 }

 .recent-work-wrap .overlay .preview{
   line-height: inherit;
 }

 .team-bar .first-arrow {
   width: 21%;
 }

 .team-bar .second-arrow {
   width: 20%;
 }

 .team-bar .third-arrow {
   width: 21%;
 }

 .team-bar .fourth-arrow {
   width: 20%;
 }

 ul.social_icons li{
   margin-right: 0;
 }

}

/* sm */ @media (min-width: 768px) and (max-width: 991px) {

 /* Make Navigation Toggle on Desktop Hover */
 .dropdown:hover .dropdown-menu {
     display: block;
     -webkit-animation: fadeInUp 400ms;
     animation: fadeInUp 400ms;
 }

 .navbar-collapse {
   padding-left: 0;
   padding-right: 0;
 }

 .navbar-nav > li {
   margin-left: 0;
 }

 #main-slider .carousel h1 {
   font-size: 25px;
 }

 #main-slider .carousel h2 {
   font-size: 20px;
 }

 .tab-wrap .media .parrent.pull-left, 
 .media.accordion-inner .pull-left{
   clear: both;
   width: 100%;
 }

 .tab-wrap .media .parrent.media-body, 
 .media.accordion-inner .media-body{
   clear: both;
 }

 .services-wrap {
   padding: 40px 0 40px 30px;
 }

 .recent-work-wrap .overlay{
  padding: 15px;
 }

 .recent-work-wrap .recent-work-inner h3 a {
   font-size: 20px;
 }

 .sinlge-skill{
   width: 150px;
   height: 150px;
 } 

 .sinlge-skill p em {
   font-size: 25px;
 }

 .sinlge-skill p {
   font-size: 16px;
 }

 .team-bar .first-one-arrow {
   width: 2%;
 }

 .team-bar .first-arrow {
   width: 18%;
 }

 .team-bar .second-arrow {
   width: 24%;
 }

 .team-bar .third-arrow {
   width: 15%;
 }

 .team-bar .fourth-arrow {
   width: 20%;
 }

 .blog .blog-item .entry-meta > span a{
   font-size: 10px;
 }

}

/* xs */ @media (max-width: 767px) {

 .container > .navbar-header, .container > .navbar-collapse{
   margin-left: 0;
 }

 .top-number{
   font-size: 14px;
 }

 input.search-form:hover {
   width: 120px;
 }

 .navbar-nav > li {
   padding-bottom: 0;
 }

 #main-slider .carousel h1 {
   font-size: 25px;
 }

 #main-slider .carousel h2 {
   font-size: 16px;
 }

 .feature-wrap h2, 
 .single-services h2 {
   font-size: 18px;
 }

 .feature-wrap h3, 
 .single-services h3{
   font-size: 14px;
 }

 .media.accordion-inner .pull-left, 
 .media.accordion-inner .media-body{
   clear: both;
 }

 .accordion-inner h4 {
   margin-top: 10px;
 }

 .tab-wrap .media .pull-left{
   clear: both;
   width: 100%;
 }

 .tab-wrap .media .media-body{
   clear: both;
 }

 .nav-tabs > li.active > a:after{
   display: none;
 }

 #footer .col-sm-6{
     text-align:center;
 }
 
  #footer .pull-right{
     float: none !important;
 }

 .sinlge-skill {
   margin: 0 auto;
   margin-top: 30px;
   margin-bottom: 30px;
 }

 .team .single-profile-top, 
 .team .single-profile-bottom {
   margin-bottom: 30px;
 }

 .clients-area {
   padding: 60px 0;
 }

 .clients-area h1 {
   font-size: 25px;
 }

 .portfolio-item, 
 #recent-works .col-xs-12.col-sm-4.col-md-3{
   padding:0 15px;
 }

 ul.social_icons li{
   margin-right: 0;
 }

 .blog .blog-item .entry-meta{
   margin-bottom: 20px;
 }

 .blog .blog-item .blog-content h3 {
   margin-bottom: 20px;
 }

 .post_reply_comments {
   padding-left: 20px;
 }
   

}

/* XS Portrait */ @media (max-width: 480px) {

}