Team:Georgia State/Dependencies/ResponsiveCSS

From 2014.igem.org

@media (max-width: 1200px) {

.navbar-default .navbar-toggle, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: #fff; padding: 8px 5px 6px 5px; }

.navbar-default .navbar-toggle i { color: #bbb; font-size: 2em; }

.quote-buttons span { margin: 0 2px; }

.flickr-widget ul li { margin-left: 0px; margin-right: 7px; }

.subscribe-widget form input[type="text"] { margin-bottom: 10px; }

.history-content p { max-height: 36px; line-height: 20px; overflow: hidden; }

.projects-carousel { width: 950px!important; } }

@media (max-width: 991px) {

.boxed-page, .boxed-page header { width: 100%; }

.tp-caption a.btn-system { font-size: 6px; padding: 2px 4px; }

.navbar-brand { padding: 25px 15px; }

.navbar-default .navbar-nav { margin: 0 !important; top: 0; }

ul.social-list { float: none !important; text-align: center; }

ul.social-list li { float: none !important; display: inline-block; }

.quote-buttons { text-align: center; }

.copyright-section { text-align: center; }

ul.footer-nav { float: none !important; text-align: center; margin-top: 10px; }

.page-banner { text-align: center; }

ul.breadcrumbs { float: none; }

ul.breadcrumbs li { float: none; display: inline-block; float: left\0/; }

.portfolio-4 .portfolio-item { width: 49.99%!important; padding-left: 15px; padding-right: 15px; margin-bottom: 30px; }

.projects-carousel { width: 100% !important; }

.pricing-tables .pricing-table { width: 50% !important; margin-bottom: 15px; }

.pricing-tables .highlight-plan { margin: 0; }

.pricing-tables .pricing-table.highlight-plan .plan-name { padding: 15px 0; }

.pricing-tables .pricing-table.highlight-plan .plan-signup { padding:25px 0; }

.pricing-tables .pricing-table:hover { top: 0; }

}

@media (max-width: 768px) {

   .contact-details {

display: none; }

.tp-leftarrow, .tp-rightarrow { display: none!important; }

   .tp-caption a.btn-system {

display: none; }

.history-box img { float: none; width: 100%; }

.history-content { float: none; width: 100% !important; }

.history-box span.history-date { right: inherit; left: 15px; }

.portfolio-filter li { margin-bottom: 8px; }

.portfolio-4 .portfolio-item { width: 100%!important; padding-left: 15px; padding-right: 15px; margin-bottom: 20px; }

   .milestone-block {
       margin-bottom: 20px;
       margin-right: 45px;
   }

} @media only screen and (max-width: 479px) {

   .top-bar  {

text-align: center; }

.navbar-default .navbar-nav { padding: 15px 0; }

.show-search, .search-form { display: none; }

   ul.social-list li {

margin: 0 3px; }

ul.social-list li a i { font-size: 0.9em; display: block; width: auto; line-height: 30px; border: none!important; }

ul.social-list li a:hover { background-color: transparent!important; }

ul.social-list li a.facebook:hover { color: #507CBE; }

ul.social-list li a.twitter:hover { color: #63CDF1; }

ul.social-list li a.google:hover { color: #F16261; }

ul.social-list li a.dribbble:hover { color: #E46387; }

ul.social-list li a.linkdin:hover { color: #90CADD; }

ul.social-list li a.tumblr:hover { color: #4D7EA3; }

ul.social-list li a.flickr:hover { color: #E474AF; }

ul.social-list li a.instgram:hover { color: #4D4F54; }

ul.social-list li a.vimeo:hover { color: #87D3E0; }

ul.social-list li a.skype:hover { color: #36C4F3 }

.navbar-default .navbar-toggle { margin-top: 15px; outline: none; }

.navbar-default .navbar-nav > li > a { border: none; padding: 5px 10px; display: block; border: none !important; padding-right: 0; }

.navbar-default .navbar-nav > li > a:after { display: none; }

.navbar-default .navbar-nav > li > a:hover { opacity: 0.7; }

   .navbar-default .navbar-nav > li {

margin-left: 0; display: block; margin-bottom: 5px;

       width: 100%

}

.navbar-default .navbar-nav > li.drop > a { padding-right: 10px; }

.navbar-default .navbar-nav > li.drop > a { border-radius: 2px; }

ul.dropdown, ul.sup-dropdown { opacity: 1!important; position: relative !important; visibility: visible !important; width: 100% !important; top: inherit !important; left: 0 !important; margin-top: 0 !important; background: #fff !important; padding-left: 20px !important; box-shadow: none !important; }

ul.dropdown li, ul.sup-dropdown li { border-top: none; }

   .milestone-block {
       display: block;
       clear: left;
       margin-right: 0;
   }
 
   .btn-system {
       margin-bottom: 10px;
   }
 
   .easyPieChart {
     font-size: 24px;
     font-weight: 400;
     position: relative;
     text-align: center;
     display: inline-block;
     margin: 0 0 20px 0;
     overflow: hidden;
   }
   

}