www.gusucode.com > 200套html5精品模板101_150 > 200套html5精品模板101_150/115/css/responsive.css

    @media only screen and (min-width: 980px)  and (max-width: 1199px){


	/*====================== HOME SLIDER ======================*/
	#home_slider .text{
		width: 870px;
	}
	#home_slider .left{
	    width: 450px;
	    padding-left: 150px;
	}
	#home_slider .right{
		width: 270px;
	}


	/*====================== SERVICES ======================*/
	.services > .span3{
		float: none;
		margin-bottom: 50px;
		width: 940px;
	}
	.services .home_services{
		border-right: none;
		padding-right: 0;
	}
	.services .home_services li{
		float: left;
		border: none;
		width: 292px;
		margin-right: 30px;
		border-right: 1px solid #ededed;
	}
	.services .home_services li.last{
		margin-right: 0;
		border-right: none;
	}
	.services > .span9{
		float: none;
		width: 940px;
	}
	.services > .span9 .span6{
		width: 700px;
	}
	.services > .span9 .span2{
		width: 220px;
	}
	.services > .span9 .span2 .box{
		padding: 26px 25px;
	}


	/*====================== LATEST BLOG ======================*/
	.latest-blog .wrapper{
	    margin-top: 10px;
	}
	.latest-blog .wrapper li{
	    font-size: 9px;
	}



	/*====================== BLOG ======================*/
	.entry{
		padding-bottom: 50px;
		margin-bottom: 50px;
	}



	/*====================== copyright ======================*/
    #copyright{
        width: 1000px;
    }

}




@media (min-width: 768px) and (max-width: 979px) {


	/*====================== CONTAINER ======================*/
	.container{
	    padding: 0 20px;
	}


	/*====================== HOME SLIDER ======================*/
	#home_slider .text{width: 654px;}
	#home_slider .left{
	    width: 500px;
	    padding-left: 100px;
	}
	#home_slider .right{width: 250px;}

	
	/*====================== MENU ======================*/
	#menu{display: none;}
	.responsive-menu{
		margin-top: 10px;
		display:block;
		float: right;
		width:75%;
		border: 1px solid #c4c4c4;
	}


	/*====================== SERVICES ======================*/
	.services > .span3{
		float: none;
		margin-bottom: 50px;
		width: 724px;
	}
	.services .home_services{
		border-right: none;
		padding-right: 0;
	}
	.services .home_services li{
		float: left;
		border: none;
		width: 220px;
		margin-right: 30px;
		border-right: 1px solid #ededed;
	}
	.services .home_services li.last{
		margin-right: 0;
		border-right: none;
	}
	.services > .span9{
		float: none;
		width: 724px;
	}
	.services > .span9 .span3{
		float: none;
		width: 724px;
		margin-bottom: 20px;
	}
	.services > .span9 .span6{width: 724px;}
	.services > .span9 .span2{width: 228px;}
	.services > .span9 .span2 .box{padding: 35px 25px;}



	/*====================== PORTFOLIO ======================*/
	.portfolio div a.portfolio-view{
	    margin-left: 0px;
	}
	.portfolio div a.portfolio-link{
	    margin-right: 0px;
	}



	/*====================== LATEST BLOG ======================*/
	.latest-blog .wrapper{
	    margin-top: 10px;
	}
	.latest-blog p{
		margin-top: 7px;
	}



	/*====================== BLOG ======================*/
	.entry{
		padding-bottom: 40px;
		margin-bottom: 40px;
	}



	/*====================== FOOTER ======================*/
	#footer{
		margin-left: -20px;
	}


	/*====================== SOCIAl ======================*/
    #footer .social li a{
    	text-indent: -9999px;
    	background-position: center center !important;
    }


    /*====================== copyright ======================*/
    #copyright{
        width: 764px;
        margin-left: -20px;
    }
    



}



@media (max-width: 767px){

	/*====================== CONTAINER ======================*/
	.container{
	    padding: 0 20px;
	}
	.container > .row > [class*="span"]{margin-bottom: 40px;}



	#page.alignleft,
	#page.alignright,
	#sidebar.alignleft,
	#sidebar.alignright{
		float: none !important;
	}
	#page.span12{
		margin-bottom: 0;
	}



	/*====================== LOGO ======================*/
	.logo{
		margin-bottom: 50px;
		text-align: center;
	}



	/*====================== MENU ======================*/
	#menu{display: none;}
	.responsive-menu{
		display:block;
		float: right;
		width:100%;
		border: 1px solid #c4c4c4;
	}



	/*====================== SLIDER ======================*/
	#home_slider .text,
	#home_slider .num{display:none}
	.flex-direction-nav a {
	    margin-top: 0;
	    top: 30%;
	}



	/*====================== WELCOME ======================*/
	#welcome{
		padding: 40px 0;
	}
	#welcome [class*="span"]{
		display: block;
		padding: 0;
	}
	#welcome h1{
		text-align: left;
		padding: 0 0 25px 0;
		background: none;
	}
	#welcome p{
		padding: 0;
	}



	/*====================== SERVICES ======================*/
	.services .home_services{
		border-right: none;
		padding-right: 0;
	}
	.home_services li img {margin-top: -8px;}
	.services > .span3{margin-bottom: 50px;}
	.services > .span9 .span3{margin-bottom: 20px;}




	/*====================== FEATURES ======================*/
	.features .box {
		margin: 0;
    	margin-top: -1px;
	}
	


	/*====================== PORTFOLIO ======================*/
	.portfolio article{
	    float: left;
	    width: 50%;
	}



	/*====================== BLOG ======================*/
	.entry{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}



	/*====================== COMMENT FORM ======================*/
	#comments-form input[type="text"],
	#comments-form input[type="email"],
	#comments-form input[type="url"]{
	    width: 99% !important;
	}
	#comments-form textarea {
	    width: 98.8% !important;
	}



	/*====================== TEAM ======================*/
	.team [class*="span"]{
		width: 50%;
		float: left !important;
	}




	/*====================== FOOTER ======================*/
	#footer{
		width: 100%;
		margin-left: -20px;
	}
	#footer [class*="span"]{
		margin-bottom: 50px;
	}




    /*====================== copyright ======================*/
    #copyright{
    	width: 100%;
    	padding-left: 20px;
    	padding-right: 20px;
    	margin-left: -20px;
    	text-align: center;
    }
    #copyright p{
    	padding-bottom: 0;
    	float: none !important;
    }
    #copyright ul{
    	padding-top: 10px !important;
    	display: inline-block;
    	float: none !important;
    }





}