/* 34 Responsive Grid System Multi-state, responsive CSS grid system Developer : Kemal Yılmaz URL : http://34grid.com Contact : http://kemalyilmaz.com : http://twitter.com/xkema : http://www.facebook.com/pages/34Grid/401562963236958 Version : 1.0 LICENSED UNDER Creative Commons Attribution 3.0 Unported License. */ /* ===================================== DESKTOP, LARGE SCREENS ==== */ @media only screen and (min-width: 1200px) { /* user styles goes here */ } /* =========================================== DESKTOP < 1200px ==== */ @media only screen and (max-width: 1280px) { /* autogenerated styles */ .col_12 { width:14.6666666667%; } .col_12c { width: 81.3333333333%; } /* user styles goes here */ .flex-caption {width: 35%;} .flex-caption h2 {font-size: 40px;} } /* ============================================= IPAD LANDSCAPE ==== */ @media only screen and (max-width: 1024px) { /* autogenerated styles */ .col_6 { width:31.3333333333%; } .col_8 { width:23%; } .col_9 { width:31.3333333333%; } .col_10 { width:18%; } .col_12 { width:23%; } .col_6c { width: 64.6666666667%; } .col_8c { width: 73%; } .col_9c { width: 64.6666666667%; } .col_10c { width: 78%; } .col_12c { width: 73%; } /* user styles goes here */ .col2 {margin-right: 10px;} } /* ============================================== IPAD PORTRAIT ==== */ @media handheld, only screen and (max-width: 768px) { /* autogenerated styles */ .col_4 { width:48%; } .col_6 { width:48%; } .col_8 { width:48%; } .col_9 { width:98%; } .col_10 { width:48%; } .col_12 { width:31.3333333333%; } .col_4c { width: 48%; } .col_6c { width: 48%; } .col_8c { width: 48%; } .col_9c { width: 98%; } .col_10c { width: 48%; } .col_12c { width: 64.6666666667%; } /* user styles goes here */ .wraper-service-home li{ margin-bottom: 20px;} .flex-caption{ display: none;} nav ul{ display:none;} nav ul li a span{ display: none;} nav .selectnav { display: block !important;border:1px solid #d4d4d4;float:left;margin: 30px 0;width: 100%;height: 30px;} #main-navigation {float: none;} .searchform input[type="text"] {width: 150px;} .searchform .searchbutton {width: 80px;} .title-page-breadcrumb {padding: 5px 0;} .breadcrumbs {padding: 5px 0; } .breadcrumbs ul {float: none; } .col2{width: 360px;margin-left: 1%; margin-right:0;} .view-col2:hover .content{width: 360px;} ul.portfolio {width: auto;} } /* =========================================== IPHONE LANDSCAPE ==== */ @media handheld, only screen and (max-width: 480px) { /* autogenerated styles */ .col_2 { width:98%; } .col_3 { width:98%; } .col_4 { width:98%; } .col_5 { width:98%; } .col_6 { width:98%; } .col_7 { width:98%; } .col_8 { width:98%; } .col_10 { width:98%; } .col_11 { width:98%; } .col_12 { width:48%; } .col_2c { width: 98%; } .col_3c { width: 98%; } .col_4c { width: 98%; } .col_5c { width: 98%; } .col_6c { width: 98%; } .col_7c { width: 98%; } .col_8c { width: 98%; } .col_10c { width: 98%; } .col_11c { width: 98%; } .col_12c { width: 48%; } /* user styles goes here */ ul.jBar-social {float: none;text-align: center;} ul.jBar-social li:first-child { margin-left: 0;} } /* ============================================ IPHONE PORTRAIT ==== */ @media handheld, only screen and (max-width: 320px) { /* autogenerated styles */ /* reset .container width and max-width (in case user defines an explicit #id for her/his .container classes) */ .container { width: 100% !important; max-width: 100% !important; } .col_1, .col_2, .col_3, .col_3c, .col_4, .col_4c, .col_5, .col_5c, .col_6, .col_6c, .col_7, .col_7c, .col_8, .col_8c, .col_9, .col_9c, .col_10, .col_10c, .col_11, .col_11c, .col_12, .col_12c { width : 92%; margin-left : 0%; margin-right : 0%; padding-left : 4%; padding-right : 4%; } /* user styles goes here */ .col2, .col3, .col4 {width: 295px;margin-left: 3%;} .view-col2:hover .content, .view-col3:hover .content, .view-col4:hover .content{width: 295px; top:10%; height: 170px;} ul.portfolio {width: auto;} } /* ============================================ SO SMALL PHONES ==== */ @media handheld, only screen and (max-width: 240px) { /* user styles goes here */ } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (min-width: 320px) and (max-width: 767px) { .plan_title{ width:100%; float:left; padding: 10px 0; } .plan_price{ width:100%; border-top:none !important; float:left; padding: 10px 0; } .plan_more{ display: block; clear: both; } .plan_buy{ padding: 10px; } .plan > dd { height: 0; overflow: hidden; padding:0 !important; opacity: 0; filter: alpha(opacity=0); /* IE6-IE8 */ -webkit-transition: opacity 0.9s ease-in-out; -moz-transition: opacity 0.9s ease-in-out; -o-transition: opacity 0.9s ease-in-out; -ms-transition: opacity 0.9s ease-in-out; transition: opacity 0.9s ease-in-out; } .plan:target > dd{ padding: 10px 5px !important; height: auto; opacity: 1; filter: alpha(opacity=100); /* IE6-IE8 */ } .title-page-breadcrumb {text-align: center} .breadcrumbs ul {text-align: center;} .logo {background-position: center center !important;} } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { #pricing_plan4,#pricing_plan3,#pricing_plan2,#pricing_plan1{ width: 100%; } .plan_title{ width:auto; float:none; } .plan_price{ width:auto; float:none; border-top: 1px solid #F83333; } .plan_more{ display: none; } .plan > dd { padding: 10px 5px !important; height:auto; opacity: 1; filter: alpha(opacity=1); /* IE6-IE8 */ -webkit-transition: opacity 0.9s ease-in-out; -moz-transition: opacity 0.9s ease-in-out; -o-transition: opacity 0.9s ease-in-out; -ms-transition: opacity 0.9s ease-in-out; transition: opacity 0.9s ease-in-out; } }