Team:TMMU-China/css/style

@import url("https://2017.igem.org/Team:TMMU-China/css/base.css"); @import url("https://2017.igem.org/Team:TMMU-China/css/skeleton.css"); @import url("https://2017.igem.org/Team:TMMU-China/css/prettyPhoto.css"); @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);

/* =============================================== 

			Alphabetics class & id name

================================================== */

a{text-decoration:none;} a, .blogsmall a, .gallery-home a,

  1. gallery-wrapper a{

color:#333; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; 

 	-webkit-transition:.5s;
	 transition:.5s;

} a:hover, .blogsmall a:hover, .gallery-home a:hover,

  1. gallery-wrapper a:hover{

color:#CE5252; }


/* body */ body{background:url(T--TMMU-China--bg.jpg) top center fixed; overflow-x:hidden; margin:40px 0 40px 0;}


/* blockquote */ blockquote.pos-left{ float:left; width:50%; margin:10px 20px 5px 0;} blockquote.pos-right{ float:right; width:50%; margin:10px 0 5px 20px;}


/* blog */

  1. bloglist{ margin-top:-10px; margin:0; padding:0;}
  2. bloglist li{margin-bottom:20px; list-style:none; background:url(../images/dotwhite50.png); line-height:1.7em; border-bottom:solid 1px #ddd; padding-bottom:40px;}

.blog-header .by{display:inline-block; float:left; background:url(../images/icon-user.png) left center no-repeat; padding-left:24px;} .blog-header .cat{ display:inline-block; float:left; background:url(../images/icon-folder.png) left center no-repeat; padding-left:24px;} .blog-header .news-date{ display:inline-block; float:left; background:url(../images/icon-folder.png) left center no-repeat; padding-left:24px;}

  1. bloglist h1 a, #blogread h1 a{font-size:24px; font-weight:500; color:#333;}
  2. bloglist h1 a:hover, #blogread h1 a:hover{color:#777;}
  3. bloglist li img, #blogread img{width:100%;}
  4. bloglist li iframe{ margin:10px 0 10px 0; width:640px; height:360px;}
  5. bloglist h1, #blogread h1{ letter-spacing:-1px; margin-bottom:5px; line-height:.5em;}

.blog-header{ font-size:11px; margin:0 0 5px 0;} .blog-header span{ display:inline-block; margin:0 20px 0 0;}

  1. bloglist .blog-content{padding-left:65px;}
  2. bloglist .date{ font-family:'Open Sans'; width:50px; background:#CE5252; font-weight:700; text-align:center; float:left; color:#fff; height:50px; padding-top:10px; margin-top:5px; position:absolute; }
  3. bloglist .date .day{font-family:'Open Sans'; font-size:24px; display:block; color:#fff;}

.blog-header {text-transform:uppercase; font-size:11px;} .blog-header .comment-count{ background:url(../images/icon-comment.png) left center no-repeat; display:inline-block; padding-left:24px;} .pic-blog{margin:10px 0 10px 0;} .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} /* blog comment */

  1. blog-comment h5{margin-bottom:5px;}
  2. blog-comment ul, #blog-comment li{list-style:none; margin-left:-30px; padding-left:0;}
  3. blog-comment li{min-height:70px; padding-bottom:10px; margin-bottom:10px; padding-bottom:20px; border-bottom: solid 1px #eee;}
  4. blog-comment li .avatar{position:absolute; margin-top:5px;}
  5. blog-comment .comment{ margin-left:85px; }
  6. blog-comment li{min-height:70px; font-size:14px; line-height:1.6em; }
  7. blog-comment li li{ margin-left:55px; padding-bottom:0px; margin-top:20px; padding-top:10px; border-top: solid 1px #eee; border-bottom:none;}
  8. blog-comment li li .avatar{position:absolute; }
  9. blog-comment li li .comment{ }

.comment-info {margin-left:85px; margin-bottom:5px;} .comment-info span{display:inline-block;} .comment-info .c_name{font-weight:700; color:#333;} .comment-info .c_reply{ float:right; padding-left:20px; margin-left:20px; border-left:solid 1px #ddd; font-size:12px;} .comment-info .c_date{ float:right; font-size:12px;}


/* blog list (homepage) */ .blogsmall .thumb{float:left; margin-right:10px; margin-top:5px; } .blogsmall .date{ font-family:'Open Sans'; width:50px; background:#CE5252; font-weight:700; text-align:center; float:left; color:#fff; height:50px; padding-top:10px; position:absolute; } .blogsmall .date .day{font-family:'Open Sans'; font-size:24px; display:block; color:#fff;} .blogsmall .thumbnail{width:60px; height:60px; margin-left:50px; float:left; position:absolute; } .blogsmall li{border-bottom:solid 1px #DDD; padding-bottom:20px; margin-bottom:15px;} .blogsmall li.first{padding-top:0px;} .blogsmall .story{float:left; margin-left:20px; padding-left:110px;} .blogsmall h5{font-family:Arial, Helvetica, sans-serif; font-size:13px;}


/* button */ a.btn{padding:5px 10px 5px 10px; background:#CE5252; color:#fff; margin-left:5px; display:inline-block; font-weight:600; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);} a.btn:hover{color:#CE5252; background:#eee;} /* -- dark color */ a.btn.dark{background:#555; color:#ddd;} a.btn.dark:hover{color:#555; background:#ddd;} /* -- light color */ a.btn.light{background:#ddd; color:#555;} a.btn.light:hover{color:#ddd; background:#555;} /* -- size */ .medium{font-size:16px;} .big{font-size:22px;}


/* code */ code{ color:#646464; display:block; background:#f5f5f5; font-size:12px; padding:10px 20px 10px 20px; border:solid 1px #ddd; border-left-width:3px; margin-top:10px; margin-bottom:10px; font-family:"Courier New", Courier, monospace;}


/* comment form */

  1. commentform label{ display:block;}
  2. commentform input{width:290px; display:block; margin-bottom:10px; padding:5px; border:none; border:solid 1px #ddd; background:#f8f8f8; font-size:15px;}
  3. commentform input:focus{border:solid 1px #999; background:#fff;}
  4. commentform textarea{width:97%; padding:5px; border:solid 1px #ddd; background:#f8f8f8; height:150px; margin-bottom:10px; font-size:15px;}
  5. commentform textarea:focus{border:solid 1px #999; background:#fff;}
  6. commentform input.btn{ color:#FFF; background:#BD4242; padding:3px 10px 3px 10px; margin:10px 0 0 0px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:11px; -moz-border-radius:0px; -webkit-border-radius:0px; border:none;}
  7. commentform input.button:hover{background:#CCC; color:#333;}


/* contact form */

  1. contact label{ display:block;}
  2. contact input{width:290px; display:block; margin-bottom:10px; padding:5px; border:none; border:solid 1px #ddd; background:#f8f8f8; font-size:15px;}
  3. contact input:focus{border:solid 1px #999; background:#fff;}
  4. contact textarea{width:97%; padding:5px; border:solid 1px #ddd; background:#f8f8f8; height:150px; margin-bottom:10px; font-size:15px;}
  5. contact textarea:focus{border:solid 1px #999; background:#fff;}
  6. contact input.btn{ color:#FFF; background:#BD4242; padding:3px 10px 3px 10px; margin:10px 0 0 0px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:11px; -moz-border-radius:0px; -webkit-border-radius:0px; border:none;}
  7. contact input.button:hover{background:#CCC; color:#333;}
  8. send {width:100px !important;font-size: 12px;border:1px solid black;cursor:pointer;cursor:hand;}
  9. btnsubmit { text-align:right; }

.error { width:280px; background:#FCD8DC; padding:2px 10px 2px 10px; display: none;color:#C03; font-size:12px;} .success { display: none; padding:2px 10px 2px 10px; background:#E5EAD4; color:#333; width:280px; font-size:12px;} .error img { vertical-align:top; }

  1. contact #name, #contact #email{width:290px;}

.map{margin-bottom:30px;} .map iframe{width:280px; height:280px;}


/* mainmenu - columns */ .container .column{margin-bottom:20px;} .container .columns{margin-bottom:20px;}


/* footer */

  1. footer a{color:#CE5252;}
  2. footer a:hover{color:#FFF;}
  3. footer{ margin:0 auto; color:#fff; padding:30px 10px 10px 10px; background:#3A3A3A; display:table; -moz-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15); margin-bottom:-20px;}
  4. footer-2{background:#303030; padding:10px; margin:0 auto; display:table; font-size:12px; text-align:center;}
  5. footer-2 .column, #footer-2 .columns{margin-bottom:0;}
  6. footer-2 a{color:#777;}
  7. footer-2 a:hover{color:#FFF;}
  8. footer{ color:#bbb; font-size:12px;}
  9. footer h5{ color:#fff; text-transform:uppercase; font-size:12px; font-weight:800; margin-bottom:10px;}


/* gallery (homepage) */ .gallery-home img{ width:100%;} .gallery-home .info{ margin-bottom:20px;} .gallery-home .pic_hover, .four-cols .pic_hover{ position:absolute; background:url(../images/hover-1.png) center no-repeat #333; width:220px; height:165px;} .three-cols .pic_hover{ position:absolute; background:url(../images/hover-1.png) center no-repeat #333; width:300px; height:225px;} .two-cols .pic_hover{ position:absolute; background:url(../images/hover-1.png) center no-repeat #333; width:460px; height:345px;}


.four-cols img {width:220px; height:165px;} .three-cols img {width:300px; height:225px;} .two-cols img{width:460px; height:345px;}


@media only screen and (min-width: 768px) and (max-width: 959px) { .gallery-home .pic_hover, .four-cols .pic_hover{ width:172px; height:129px;} .three-cols .pic_hover{width:236px; height:177px;} .two-cols .pic_hover{width:364px; height:273px;}

.four-cols img{ width:172px; height:129px;} .three-cols img{width:236px; height:177px;} .two-cols img{width:364px; height:273px;}

} @media only screen and (max-width: 767px) { .four-cols img, .three-cols img, .two-cols img{ width:300px; height:225px; } .gallery-home .pic_hover, .four-cols .pic_hover, .three-cols .pic_hover, .two-cols .pic_hover{ width:300px; height:225px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .four-cols img, .three-cols img, .two-cols img{ width:420px; height:315px; } .gallery-home .pic_hover, .four-cols .pic_hover, .three-cols .pic_hover, .two-cols .pic_hover{ width:420px; height:315px;} }



  1. gallery-wrapper{}
  2. gallery-wrapper img{width:100%;}

.gallery-home h6, #gallery-wrapper h6{ font-family:Arial, Helvetica, sans-serif; border-bottom:solid 1px #ddd; padding-bottom:5px; margin-bottom:5px; font-size:12px;}

/* header */

  1. header{ display:table; margin-top:18px; margin-bottom:-30px;}


/* heading */ h1{letter-spacing:-2px;} h2{letter-spacing:-2px;} h3{letter-spacing:-1.5px;} h4{letter-spacing:-.5px;}


/**** Isotope filtering ****/

.isotope-item { 

 z-index: 2;

}

.isotope-hidden.isotope-item { 

 pointer-events: none;
 z-index: 1;

}

.isotope, .isotope .isotope-item { 

 /* change duration value to whatever you like */
 -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
         transition-duration: 0.8s;

}

.isotope { 

 -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
         transition-property: height, width;

}

.isotope .isotope-item { 

 -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
         transition-property:         transform, opacity;

}


.features img{ display:block; margin:0 auto; } .features { text-align:center;}


  1. filters{margin-bottom:-30px; font-size:12px; text-transform:uppercase;}
  2. filters li{display:inline-block; margin-right:20px; }
  3. filters a{color:#333; padding:2px 5px 2px 5px;}
  4. filters a.selected{ background:#CE5252; color:#fff;}

/* list styles */ .check_list,.plus_list,.min_list,.circle_list,.square_list,.cross_list,.arrow_list{ padding-left:20px; margin-bottom:0;} .check_list{ background:url(../images/list-check.png) left center no-repeat;} .plus_list{ background:url(../images/list-plus.png) left center no-repeat;} .min_list{ background:url(../images/list-min.png) left center no-repeat;} .circle_list{ background:url(../images/list-circle.png) left center no-repeat;} .square_list{ background:url(../images/list-square.png) left center no-repeat;} .cross_list{ background:url(../images/list-cross.png) left center no-repeat;} .arrow_list{ background:url(../images/list-arrow.png) left center no-repeat;}


/* logo */

  1. logo{ margin-bottom:20px;}


/* mainmenu ================================================== */

  1. mainmenu {font-family:'Open Sans', sans-serif; margin-top:10px;}
  2. mainmenu ul li a:link, #mainmenu ul li a:visited{color: #555;}
  3. mainmenu ul li ul li a:link, #mainmenu ul li ul li a:visited{color: #333;}
  4. mainmenu ul li a:hover, #mainmenu ul li a.current{ background:#fff;color:#CE5252;}
  5. mainmenu ul{margin: 0; padding:0; float:right; list-style-type: none;}
  6. mainmenu ul li{position: relative;display: inline;float: left;z-index:100;font-size:13px; padding-bottom:20px; font-weight:600; text-transform:uppercase;}
  7. mainmenu ul li a{display: block; padding: 2px 15px 4px 15px; text-decoration: none;}
  8. mainmenu ul li.active a{padding: 2px 15px 7px 15px; }
  9. mainmenu ul li.home a{padding-left:0px;}
  • html #mainmenu ul li a{display: inline-block;}
  1. mainmenu ul li ul{

position: absolute; top:24px !important; left: 0px; display: block; visibility: hidden; padding:0px !important;margin-top:20px !important;}

  1. mainmenu ul li ul {border-top:solid 2px #CE5252;}
  2. mainmenu ul li ul li{display: list-item;float:none; margin-bottom:0px; border-bottom:solid 1px #ddd; padding-bottom:0; font-weight:500;}
  3. mainmenu ul li ul li ul{left: 191px !important;top: -1px !important;padding-top:0px !important;}
  4. mainmenu ul li ul li a{width: 150px;padding:5px 10px 5px 10px; border-bottom:none;

border-top-width:0px;background:#fff;}

  1. mainmenu ul li ul li a:hover{background:#CE5252; color:#ffffff;}

.arrowDown{position: absolute;top: 7px;right: 2px;} .arrowRight{position: absolute;top: 7px;right: 2px;}


/* message box */ .msgbox{ color:#555; display:block; padding:20px 20px 20px 70px;font-size:14px; margin-bottom:0px; margin-bottom:10px;} .msg-success,.msg-warning,.msg-error,.msg-info{-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} .msg-success{ background:url(../images/msg-icon-success.png) 20px center no-repeat #E5EAD4;} .msg-warning{ background:url(../images/msg-icon-warning.png) 20px center no-repeat #F4E8BC;} .msg-error{ background:url(../images/msg-icon-error.png) 20px center no-repeat #FCD8DC;} .msg-info{ background:url(../images/msg-icon-info.png) 20px center no-repeat #CCDFE8;}


/* page description */ .page-description{ font-size:24px; font-weight:300; letter-spacing:0px; padding:20px 0 20px 0; text-align:center; border:solid 1px #ddd; border-left:none; border-right:none; line-height:32px; font-family:"Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;}


/* pic position */ .pic-center{ display:block; text-align:center; margin:0 auto;}


/* select nav (combo menu for small screen) */ .selectnav{ display:none; font-size:14px;}


/* services */

  1. services .one-third{ border-bottom:solid 1px #ddd; padding-bottom:20px; margin-bottom:20px;}
  2. services h4{text-align: center; margin:10px 0 10px 0; padding:2px 0 4px 0; background: #eee; border:solid 1px #ddd;}

/* slideshow */

  1. slider{ background:#fff; margin-bottom:30px;}
  2. slider .text{ position:absolute; height:290px; z-index:20; margin:100px 0 0 0px;}
  3. slider h1{font-weight:700; font-size:64px; background:#CE5252; display:inline-block; color:#fff; letter-spacing:-5px; text-align:right; padding:10px 30px 12px 30px; margin:0; font-family:}
  4. slider .info{ background:#FFF; padding:20px; padding-left:40px; width:320px; font-weight:600;}
  5. slider .btn{ padding-left:40px; background:#333; color:#fff;}

.list-slider{ background:url(../images/slider-list.png) repeat-x top; z-index:100; position:relative; top:7px; height:7px;} .slide-desc{position:absolute; right:0px; bottom:30px; width:430px; padding:25px 35px 40px 35px; background-image: url(../images/transparent-slide.png); } .nojs .slide-desc{visibility:hidden;} .nojs #slider-2 {overflow:hidden;}

  1. slider-2{list-style-type:none; margin:0; padding:0; height:376px; }
  2. slider-2 li{width:1000px;}

/* -- slideshow pager */

  1. slider .slidenav{ position:absolute; z-index:100;}
  2. slider .slidenav a{background: #ddd; display:block;float:left;font-size:0px;width:186px;height:6px; outline-style:none; padding:0px;outline-width:medium; margin:1px; }
  3. slider .slidenav .activeSlide {background:#CE5252;}

/* -- button arrow slideshow */

  1. slideArrow{width:940px; height:42px; position:absolute; top:190px; z-index:20}

.nojs #slideArrow{visibility:hidden;}

  1. prevslide{display:block; background-image:url(../images/btn-prev.png); background-repeat:no-repeat; width:42px; height:42px; position:absolute; top:10px; left:20px}
  2. prevslide:hover{background-position:0 -42px;}
  3. nextslide{display:block; background-image:url(../images/btn-next.png); background-repeat:no-repeat; width:42px; height:42px; position:absolute; top:10px; right:20px}
  4. nextslide:hover{background-position:0 -42px;}
  5. prevslide,#nextslide{top:170px;}
  6. slider .slidenav a:hover{

background:#CE5252; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s; }


/* special box */ .special{ font-size:20px; font-weight:600; padding:20px; background:#eee; display:block; line-height:1.4em; margin-bottom:20px; }


/* social icons */

  1. social-icons img{margin-left:5px;}


/* subheader */

  1. subheader .container .sixteen{ height:150px; background:url(../images/bgsubheader.jpg) top center no-repeat; }
  2. subheader h1{display:inline-block; float:right; font-size:52px; background:#CE5252; padding:10px 30px 10px 30px; color:#FFF; font-weight:700; letter-spacing:-3px; margin-top:40px; margin-right:0px;}


/* table */ table{ width:100%; border-collapse:collapse; margin-top:10px;} table td{ border:solid 1px #ddd;} thead td{font-family:'Open Sans',Arial, Helvetica, sans-serif; padding:10px; background:#f5f5f5; color:#333;} tbody td{ padding:10px;} thead{font-weight:bold;}


/* totop plugin */

  1. toTop { z-index:1000; display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px; background:url(../images/ui.totop.png) no-repeat left top;}
  2. toTopHover {background:url(../images/ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;}
  3. toTop:active, #toTop:focus {outline:none;}


/* team member */

  1. team_member .four{ text-align:center; }

.team_photo{border:solid 1px #ddd; text-align:center; margin-bottom:10px;} .team_desc{ font-style:italic; margin-bottom:10px;}


/* twitter */

  1. twitter li{background:url(../images/twitter.png) top left no-repeat; padding-left:40px;}
  2. twitter a{color:#777;}
  3. twitter span a{color:#CE5252;}



/* tabs */

  1. tab-content .list-wrap { border:solid 1px #ddd; }
  2. tab-content ul { list-style: none; }
  3. tab-content ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
  4. tab-content ul li a:hover { background: #555; color: white; }
  5. tab-content ul li:last-child a { border: none; }
  6. tab-content .nav { overflow: hidden; margin-bottom:0px; }
  7. tab-content .nav li { float: left; margin: 0 5px 0 0;}
  8. tab-content .nav li.last { margin-right: 0; }
  9. tab-content .nav li a {display: block; padding: 5px 10px 5px 10px; background: #eaeaea; color: #999; font-size: 14px; text-align: center; border: 0; }
  10. tab-content li a.current,#tab-content li a.current:hover { background-color: #555 !important; color: #fff; font-weight:600;}
  11. tab-content .nav li a:hover, #tab-content .nav li a:focus { background: #333;}

.tab-content{display:none; background:#fff; } .tab-content .inner{padding:20px;}


/* title */ .title{ background:url(../images/bg-title.png) center repeat-x; margin-bottom:20px;} /*.title span{ padding:2px 30px 2px 10px; background:url(../images/corner.png) right bottom no-repeat #555; color:#fff;}*/ .title span,.title-2 span{background:#fff; padding-right:10px;} .title-2{ background:url(../images/bg-title.png) center repeat-x; margin-bottom:0px;}


/* toggle */ .toggle li{ margin-bottom:10px; border:solid 1px #ddd; } .toggle li h1{-moz-user-select: none; -html-user-select: none; user-select: none; color:#555; margin:0; font-size:14px; padding:0px 20px 0px 50px; font-weight:700; display:block; letter-spacing:normal;} .toggle li .acc_active:hover{ color:#777; background:url(../images/icon-slide-plus.png) 10px center no-repeat; padding-left:70px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; 

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

.toggle li .acc_noactive:hover{ color:#777; background:url(../images/icon-slide-min.png) 10px center no-repeat; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; 

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

.toggle .ac-content{display:none; background:#f5f5f5;padding:20px;} .acc_active{background:url(../images/icon-slide-plus.png) 10px center no-repeat #f5f5f5; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; 

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

.acc_noactive{background:url(../images/icon-slide-min.png) 10px center no-repeat #f5f5f5;}


/* widget */ .widget{margin-bottom:30px;} .widget h5.widget-title{ font-family:Arial, Helvetica, sans-serif; font-size:13px; border-bottom:solid 1px #ddd; padding-bottom:7px; margin-bottom:7px;} .widget .categories li { padding-left:20px; background:url(../images/list-arrow.png) left 2px no-repeat; border-bottom:solid 1px #eee; padding-bottom:7px; margin-bottom:5px;} .widget .comments li { padding-left:20px; background:url(../images/list-arrow.png) left 2px no-repeat; border-bottom:solid 1px #eee; padding-bottom:7px; margin-bottom:5px;} .widget .tags li{display:inline-block; margin-right:3px; margin-bottom:5px; font-size:11px; text-transform:uppercase;} .widget .tags li a{background:url(../images/corner-1.png) right center #CE5252 no-repeat; padding:2px 18px 2px 8px; color:#fff;} .widget .tags li a:hover{background:url(../images/corner-1.png) right center #555 no-repeat; }

/* wrapper */

  1. wrapper{ margin:0 auto; padding:0 10px 0 10px; background:#fff; display:table; -moz-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);}


/* Media Queries ================================================== */

/* #Tablet (Portrait) ================================================== */ 

   /* Note: Design for a width of 768px */
   @media only screen and (min-width: 768px) and (max-width: 959px) {
       .container { width: 768px; }

#slider-2 img,#slider-2{ width: 748px; height:307px; } #slider .slidenav a{ width:148px;} #slider .text{ position:absolute; height:290px; z-index:20; margin:70px 0 0 0px;} #bloglist li iframe{width:508px; height:286px;} .map iframe{width:220px;} 

   }


/* #Mobile (Portrait) ================================================== */ 

   /* Note: Design for a width of 320px */
   @media only screen and (max-width: 767px) {
       .container { width: 300px; }

#slider-2 img,#slider-2{ width: 300px; height:120px; } #slider h1, #slider .info, #slider .btn, #slider .slidenav{ display:none;} .selectnav{ display:block; width:100%; margin-bottom:60px; margin-top:-20px;} #nav{ display:none;} #logo{text-align:center;} #bloglist li iframe{width:300px; height:169px;} #subheader h1{ font-size:40px;} .map iframe{width:300px;} 

   }


/* #Mobile (Landscape) ================================================== */ 

   /* Note: Design for a width of 480px */
   @media only screen and (min-width: 480px) and (max-width: 767px) {
       .container { width: 420px; }

#slider-2 img,#slider-2{ width: 420px; height:168px;} #slider h1, #slider .info, #slider .btn, #slider .slidenav{ display:none;} .selectnav{ display:block; width:100%; margin-bottom:60px; margin-top:-20px;} #nav{ display:none;} #logo{text-align:center;} #bloglist li iframe{width:420px; height:236px;} #subheader h1{ font-size:46px;} .map iframe{width:420px;} 

   }