/* QUERIES FOR IPAD/TABLETPC PORTRAIT AND LANDSSCAPE */ @media only screen and (max-width: 1100px), only screen and (min-device-width: 768px) and (max-device-width: 1100px) { /*---------------------------------------------- General ID's or Classes ------------------------------------------------*/ .wrapper { width: 800px; } .wrapperoverlay {width: 800px; } .header_top { width:800px; } .item-thumb .imgoverlay { height:210px; } .entry-content-sidebar { width: 560px; } #maincontent { width: 800px; } .header_content .right_float { display:block;} #pagetitle h2 { left:0px; } #nav ul{ width:800px; } .single-post .entry-thumb { width:500px; } .single-post .entry-info{ width:200px; } .entry-thumb { width:200px; padding:15px; } .entry-info{ width:120px; left:0px; } .wrapper .title{ width:800px; } /*---------------------------------------------- Slider ------------------------------------------------*/ #home .slidermain { width: 800px; } /*---------------------------------------------- Pagetitle ------------------------------------------------*/ .pagebanner.wrapperoverlay { width:800px; margin:30px auto; } .pagebanner strong { top:50%; font-size:16px; padding:15px 150px 15px 50px; } /*---------------------------------------------- Footer ------------------------------------------------*/ footer .footer_bottom { width: 800px; } footer .one_fourth { width: 180px; } .recent-works-widget .widget_thumb { width:55px; height:55px; } .small-meta { width:130px; font-size:11px; } /*---------------------------------------------- Portfolio ------------------------------------------------*/ .columns4 .portfolio-entry { width: 255px; } .columns3 .portfolio-entry { width: 255px; } .columns2 .portfolio-entry { width: 390px; } .columns4 .portfolio-entry .imgoverlay { height:160px; } .columns3 .portfolio-entry .imgoverlay { height:160px; } .columns2 .portfolio-entry .imgoverlay { height:210px; } /*---------------------------------------------- Map ------------------------------------------------*/ #map { width: 100%; height: 250px; } /*---------------------------------------------- Pagination ------------------------------------------------*/ #pagination { width: 300px; } /*---------------------------------------------- Entries ------------------------------------------------*/ #blog .entry-content {width: 780px;} /*---------------------------------------------- Comments ------------------------------------------------*/ #comments { width:500px; } #comments .comment-list { width: 100%; } /*---------------------------------------------- Leave Comments ------------------------------------------------*/ #leavecomment { width:500px; } #leavecomment .leavecomment-form { width: 100%; } /*---------------------------------------------- Columns ------------------------------------------------*/ .one_full { width: 100%; } .one_half { width:390px; } .one_third { width: 260px; } .two_third { width: 520px; } .one_fourth { width: 185px; } .two_fourth { width: 100%; } .three_fourth { width: 100%; } .last { margin-right: 0px; } .columns3 .gallery-entry { width: 262px; } #maincontent .columns4 .portfolio-entry { width: 180px; } #maincontent .columns3 .portfolio-entry { width: 247px; } #maincontent .columns2 .portfolio-entry { width: 383px; } #maincontent .columns4 .portfolio-entry .imgoverlay { height:120px; } #maincontent .columns3 .portfolio-entry .imgoverlay { height:160px; } #maincontent .columns2 .portfolio-entry .imgoverlay { height:230px; } /*---------------------------------------------- FLICKR WIDGET ------------------------------------------------*/ #flickr-widget .flickr-list li { width: 79px !important; } footer #flickr-widget #flickr-list li { width: 89px !important; } /*---------------------------------------------- Pricing Table ------------------------------------------------*/ .col2 .price-col { width: 389px; } .col3 .price-col { width: 259px; } .col4 .price-col { width: 194px; } /*---------------------------------------------- Data Table ------------------------------------------------*/ .col2 .table-col { width: 389px; } .col3 .table-col { width: 259px; } .col4 .table-col { width: 194px; } /*---------------------------------------------- Flex Slider ------------------------------------------------*/ #main .flex-direction-nav li a { width: 20px; height: 20px; top: 10px; } #main .flex-direction-nav li .next {left: 35px;} #main .flex-direction-nav li .prev {left: 10px;} /*---------------------------------------------- jPlayer ------------------------------------------------*/ div.jp-audio div.jp-type-single div.jp-progress-container { width:160px;} .one_third div.jp-audio div.jp-type-single div.jp-progress-container { width:60px; } .one_fourth div.jp-audio div.jp-type-single div.jp-progress-container { width:55%; } /*---------------------------------------------- Social Share ------------------------------------------------*/ .social-fb { margin-right:10px; } .social-tumblr { margin-left:10px; } .social-label { margin:8px 10px 0px 10px; } } /* QUERIES FOR IPHONE/SMARTPHONES */ @media only screen and (max-width: 767px), only screen and (max-device-width: 650px), only screen and (max-width: 767px) { body { overflow-x:hidden; } /*---------------------------------------------- General ID's or Classes ------------------------------------------------*/ .wrapper { width: 600px; padding: 40px 20px 30px 20px ; } .wrapperoverlay {width: 600px; padding: 20px 20px;} .header_top { width:600px; } .header_logo { margin-left:0px; } #maincontent { width: 100%; float:none; } .entry-thumb { width:560px; padding:20px; } .single-post .entry-thumb { width:560px; padding:20px; } .single-post .entry-info{ width:560px; left:0px; top:10px; } .entry-info{ display:none; } .entry-info-mobile {display:block;}. .title { width:600px; } /*---------------------------------------------- Top ------------------------------------------------*/ #top .showhidetop { right: 30px; } /*---------------------------------------------- Nav ------------------------------------------------*/ nav { float: none; } nav ul { display: none; } nav select { display: inline-block ; } .header_content { margin-bottom:25px; } /*---------------------------------------------- Slider ------------------------------------------------*/ #home .slidermain { width: 600px; } /*---------------------------------------------- Footer ------------------------------------------------*/ .footer_bottom .left_float { text-align:center; float:none; } footer .one_fourth { width: 280px; } .small-meta { width:150px; font-size:11px; } /*---------------------------------------------- Portfolio ------------------------------------------------*/ .columns4 .portfolio-entry { width: 290px; } .columns3 .portfolio-entry { width: 290px; } .columns2 .portfolio-entry { width: 290px; } .columns4 .portfolio-entry .imgoverlay { height:160px; } .columns3 .portfolio-entry .imgoverlay { height:160px; } .columns2 .portfolio-entry .imgoverlay { height:160px; } /*---------------------------------------------- Map ------------------------------------------------*/ #map { width: 100%; height: 200px; } /*---------------------------------------------- Pagination ------------------------------------------------*/ #pagination { width: 240px; } /*---------------------------------------------- Entries ------------------------------------------------*/ #blog .entry-content {width:100%;} #blog .entry-meta { width: 100%; text-align: left; } /*---------------------------------------------- Meta Datas ------------------------------------------------*/ .entry-meta { text-align: center !important; margin-bottom: 15px; } .entry-meta div { display: inline-block; margin: 0 5px; } .meta_date { width: 100%; margin: 0 !important; } /*---------------------------------------------- Comments ------------------------------------------------*/ #comments { background-position: center top; padding-top: 30px; width:500px; } #comments .comment-list { width: 100%; } #comments .comment .children { margin-left: 15px; } #commenticon { width: 100%; text-align: center; margin-bottom: 30px; } .single-post #comments { width:550px; } /*---------------------------------------------- Leave Comments ------------------------------------------------*/ #leavecomment { background-position: center top; padding-top: 30px; width:500px; } #leavecomment .leavecomment-form { width: 100%; } #leavecommenticon { width: 100%; text-align: center; margin-bottom: 30px; } .single-post #leavecomment { width:550px; } /*---------------------------------------------- Columns ------------------------------------------------*/ .column { margin-bottom:30px; } .one_full { width: 100%; } .one_half { width: 600px; } .one_third { width: 280px; } .two_third { width: 280px; } .one_fourth { width: 280px; } .two_fourth { width: 600px; } .three_fourth { width: 280px; } .last { margin-right: 0px; } .portfolio-content.one_fourth { width:140px !important; } .portfolio-content.three_fourth { width:410px !important; } .columns3 .gallery-entry { width: 295px; } /*---------------------------------------------- Pricing Table ------------------------------------------------*/ .col2 .price-col { width: 299px; } .col3 .price-col { width: 199px; } .col4 .price-col { width: 149px; } /*---------------------------------------------- Data Table ------------------------------------------------*/ .col2 .table-col { width: 299px; } .col3 .table-col { width: 199px; } .col4 .table-col { width: 149px; } /*---------------------------------------------- 17. Widgets ------------------------------------------------*/ #top .widget { line-height: 30px; } /*---------------------------------------------- FLICKR WIDGET ------------------------------------------------*/ #flickr-widget .flickr-list li { width: 67px !important; } footer #flickr-widget #flickr-list li { width: 67px !important; } /*---------------------------------------------- Flex Slider ------------------------------------------------*/ .flex-caption { display: none; } .flex-direction-nav li a { width: 20px; height: 20px; top: 10px; } .flex-direction-nav li .next {left: 35px;} .flex-direction-nav li .prev {left: 10px;} #home .slidermain .flex-direction-nav li a { top: 50%; margin-top:-20px; } #home .slidermain .flex-direction-nav li .next { right: 0px !important;} #home .slidermain .flex-direction-nav li .prev { left: 0px !important;} /*---------------------------------------------- jPlayer ------------------------------------------------*/ div.jp-audio div.jp-type-single div.jp-progress-container { width:100px;} .one_third div.jp-audio div.jp-type-single div.jp-progress-container { width:100px; } .one_fourth div.jp-audio div.jp-type-single div.jp-progress-container { width:100px; } } /***************************************************************************************************************************************************************************/ /* QUERIES FOR IHONE/SMARTPHONES */ @media only screen and (max-width: 649px), only screen and (max-device-width: 420px), only screen and (max-width: 649px) { body{ overflow-x:hidden; } /*---------------------------------------------- General ID's or Classes ------------------------------------------------*/ .wrapper { width: 350px; padding: 40px 0px 30px 0px; } .wrapperoverlay {width: 350px; padding: 20px 20px;} .header_top { width:350px; } .header_logo { margin-left:0px; } .header_content.right_float { float:none!important; } .header_logo.left_float { float:none!important; } #maincontent { width: 100%; float:none !important; } .entry-content { width: 100%; float:none !important; } #logo img { margin-left:auto; margin-right:auto; } .entry-thumb { width:250px; padding:20px; } .single-post .entry-thumb { width:250px; padding:20px; } .single-post .entry-info{ width:250px; left:0px; top:10px; } .title { width:350px; } .wrapper .title h1{ font-size:34px; } .wrapper .title h1 span{ display:block; top:0; border-width:0px; padding:0px; } .wrapper .subtitle{ margin:0px; } .wrapper .subtitle h3{ font-size:15px; border-width:0px; } .wrapper .title .description{ width:260px; } /*---------------------------------------------- Top ------------------------------------------------*/ #top .showhidetop { right: 30px; } /*---------------------------------------------- Nav ------------------------------------------------*/ nav { float: none !important; } nav ul { display: none; } nav select { display: inline-block; width:350px !important; } footer nav { float: none !important; } footer select { display: none !important; } /*---------------------------------------------- PageTitle ------------------------------------------------*/ #pagetitle .tagline { width: 100%; display: inline-block; margin-left: 0px;} .pagebanner.wrapperoverlay { width:350px; margin:30px auto; } .pagebanner strong { top:12%; font-size:14px; padding:10px 40px 10px 20px; } /*---------------------------------------------- Slider ------------------------------------------------*/ #home .slidermain { width: 350px; } /*---------------------------------------------- Footer ------------------------------------------------*/ footer { margin-bottom: 40px; } footer .footer_bottom { width: 90%; } footer .footer_inner { width: 80%; } footer .footer_bottom div { float: none; margin-bottom: 5px; } .footer_bottom .left_float { text-align:center; float:none; } footer .one_fourth { width: 100%; } .small-meta { width:150px; font-size:11px; } .recent-works-widget .widget_thumb { width:80px; height:80px; } #sidebar #dribbble-list li { width:60px; height:60px; } #sidebar #flickr-list li { width:60px; height:60px; } /*---------------------------------------------- Portfolio ------------------------------------------------*/ .columns4 .portfolio-entry { width: 350px; } .columns3 .portfolio-entry { width: 350px; } .columns2 .portfolio-entry { width: 350px; } .columns4 .portfolio-entry .imgoverlay { height:210px; } .columns3 .portfolio-entry .imgoverlay { height:210px; } .columns2 .portfolio-entry .imgoverlay { height:210px; } #maincontent .columns4 .portfolio-entry { width: 350px; } #maincontent .columns3 .portfolio-entry { width: 350px; } #maincontent .columns2 .portfolio-entry { width: 350px; } #maincontent .columns4 .portfolio-entry .imgoverlay { height:210px; } #maincontent .columns3 .portfolio-entry .imgoverlay { height:210px; } #maincontent .columns2 .portfolio-entry .imgoverlay { height:210px; } .columns3 .gallery-entry { width: 350px; } /*---------------------------------------------- Map ------------------------------------------------*/ #map { width: 100%; height: 200px; } /*---------------------------------------------- Pagination ------------------------------------------------*/ #pagination { width: 240px; } /*---------------------------------------------- Meta Datas ------------------------------------------------*/ .entry-meta { text-align: center !important; margin-bottom: 15px; } .entry-meta div { display: inline-block; margin: 0 5px; } .meta_date { width: 100%; margin: 0 !important; } /*---------------------------------------------- Comments ------------------------------------------------*/ #comments { background-position: center top; padding-top: 30px; width:240px; } #comments .comment-list { width: 100%; } #comments .comment .children { margin-left: 15px; } #commenticon { width: 100%; text-align: center; margin-bottom: 30px; } .single-post #comments .user { width:30px; height:30px; } .single-post #comments { width:240px; } /*---------------------------------------------- Leave Comments ------------------------------------------------*/ #leavecomment { background-position: center top; padding-top: 30px; width:240px; } #leavecomment .leavecomment-form { width: 100%; } #leavecommenticon { width: 100%; text-align: center; margin-bottom: 30px; } .single-post #leavecomment { width:240px; } /*---------------------------------------------- Columns ------------------------------------------------*/ .one_full { width: 100%; } .one_half { width: 100%; } .one_third { width: 100%; } .two_third { width: 100%; } .one_fourth { width: 100%; } .two_fourth { width: 100%; } .three_fourth { width: 100%; } .last { margin-right: 0px; } #maincontent .one_half { width: 100%; } #maincontent .one_third { width: 100%; } #maincontent .two_third { width: 100%; } .portfolio-content.one_fourth { width:140px !important; } .portfolio-content.three_fourth { width:100% !important; } /*---------------------------------------------- Pricing Table ------------------------------------------------*/ .col2 .price-col { width: 350px; } .col3 .price-col { width: 350px; } .col4 .price-col { width: 350px; } .price-col { margin:10px 0px; } /*---------------------------------------------- Data Table ------------------------------------------------*/ .col2 .table-col { width: 350px; } .col3 .table-col { width: 350px; } .col4 .table-col { width: 350px; } /*---------------------------------------------- Superbox ------------------------------------------------*/ .superbox .boxcontent{ float:none; width:100%; text-align:center; } .superbox a.button{ float:none; text-align:center; display:block; margin:20px auto 0px auto !important; } /*---------------------------------------------- Entries ------------------------------------------------*/ #blog .entry { background-position: center top; } #blog .entry-content {width: 100%;} #blog .entry-meta { width: 100%; text-align: left; } /*---------------------------------------------- Caruosel ------------------------------------------------*/ .es-nav-prev { right: 43px; } .es-nav-next { right: 20px; } #notfound span { display:block; position:relative; top:-0px; } /*---------------------------------------------- 17. Widgets ------------------------------------------------*/ #top .widget { line-height: 30px; } /* Twitter Widget ------------------------------------------------*/ #bottom #twitter-widget, #top #twitter-widget { background: url(../images/tweet.png) no-repeat 0px 0px; } /*---------------------------------------------- FLICKR WIDGET ------------------------------------------------*/ #flickr-widget .flickr-list li { width: 67px !important; } footer #flickr-widget #flickr-list li { width: 67px !important; } /*---------------------------------------------- Flex Slider ------------------------------------------------*/ .flex-caption { display: none; } .flex-direction-nav li a { width: 20px; height: 20px; top: 10px; } .flex-direction-nav li .next {left: 35px;} .flex-direction-nav li .prev {left: 10px;} /*---------------------------------------------- jPlayer ------------------------------------------------*/ div.jp-audio div.jp-type-single div.jp-progress-container { width:100px;} .one_third div.jp-audio div.jp-type-single div.jp-progress-container { width:100px; } .one_fourth div.jp-audio div.jp-type-single div.jp-progress-container { width:100px; } } /***************************************************************************************************************************************************************************/ /* QUERIES FOR IHONE/SMARTPHONES */ @media only screen and (max-width: 419px), only screen and (max-device-width: 320px), only screen and (max-width: 419px) { body{ overflow-x:hidden; } /*---------------------------------------------- General ID's or Classes ------------------------------------------------*/ .wrapper { width: 290px; padding: 40px 0px 30px 0px; } .wrapperoverlay {width: 290px; padding: 20px 20px;} .header_top { width:290px; } .header_logo { margin-left:0px; } .header_content.right_float { float:none!important; } .header_logo.left_float { float:none!important; } #maincontent { width: 100%; float:none !important; } .entry-content { width: 100%; float:none !important; } #logo img { margin-left:auto; margin-right:auto; } .entry-thumb { width:250px; padding:20px; } .single-post .entry-thumb { width:250px; padding:20px; } .single-post .entry-info{ width:250px; left:0px; top:10px; } .title { width:290px; } .wrapper .title h1{ font-size:34px; } .wrapper .title h1 span{ display:block; top:0; border-width:0px; padding:0px; } .wrapper .subtitle{ margin:0px; } .wrapper .subtitle h3{ font-size:15px; border-width:0px; } .wrapper .title .description{ width:260px; } /*---------------------------------------------- Top ------------------------------------------------*/ #top .showhidetop { right: 30px; } /*---------------------------------------------- Nav ------------------------------------------------*/ nav { float: none !important; } nav ul { display: none; } nav select { display: inline-block; width:290px !important; } footer nav { float: none !important; } footer select { display: none !important; } /*---------------------------------------------- PageTitle ------------------------------------------------*/ #pagetitle .tagline { width: 100%; display: inline-block; margin-left: 0px;} .pagebanner.wrapperoverlay { width:290px; margin:30px auto; } .pagebanner strong { top:12%; font-size:14px; padding:10px 40px 10px 20px; } /*---------------------------------------------- Slider ------------------------------------------------*/ #home .slidermain { width: 290px; } /*---------------------------------------------- Footer ------------------------------------------------*/ footer { margin-bottom: 40px; } footer .footer_bottom { width: 90%; } footer .footer_inner { width: 80%; } footer .footer_bottom div { float: none; margin-bottom: 5px; } .footer_bottom .left_float { text-align:center; float:none; } footer .one_fourth { width: 100%; } .small-meta { width:150px; font-size:11px; } .recent-works-widget .widget_thumb { width:80px; height:80px; } #sidebar #dribbble-list li { width:60px; height:60px; } #sidebar #flickr-list li { width:60px; height:60px; } /*---------------------------------------------- Portfolio ------------------------------------------------*/ .columns4 .portfolio-entry { width: 290px; } .columns3 .portfolio-entry { width: 290px; } .columns2 .portfolio-entry { width: 290px; } .columns4 .portfolio-entry .imgoverlay { height:160px; } .columns3 .portfolio-entry .imgoverlay { height:160px; } .columns2 .portfolio-entry .imgoverlay { height:160px; } #maincontent .columns4 .portfolio-entry { width: 290px; } #maincontent .columns3 .portfolio-entry { width: 290px; } #maincontent .columns2 .portfolio-entry { width: 290px; } #maincontent .columns4 .portfolio-entry .imgoverlay { height:160px; } #maincontent .columns3 .portfolio-entry .imgoverlay { height:160px; } #maincontent .columns2 .portfolio-entry .imgoverlay { height:160px; } .columns4 .gallery-entry { width: 100%; } /*---------------------------------------------- Map ------------------------------------------------*/ #map { width: 100%; height: 200px; } /*---------------------------------------------- Pagination ------------------------------------------------*/ #pagination { width: 240px; } /*---------------------------------------------- Meta Datas ------------------------------------------------*/ .entry-meta { text-align: center !important; margin-bottom: 15px; } .entry-meta div { display: inline-block; margin: 0 5px; } .meta_date { width: 100%; margin: 0 !important; } /*---------------------------------------------- Comments ------------------------------------------------*/ #comments { background-position: center top; padding-top: 30px; width:240px; } #comments .comment-list { width: 100%; } #comments .comment .children { margin-left: 15px; } #commenticon { width: 100%; text-align: center; margin-bottom: 30px; } .single-post #comments .user { width:30px; height:30px; } .single-post #comments { width:240px; } /*---------------------------------------------- Leave Comments ------------------------------------------------*/ #leavecomment { background-position: center top; padding-top: 30px; width:240px; } #leavecomment .leavecomment-form { width: 100%; } #leavecommenticon { width: 100%; text-align: center; margin-bottom: 30px; } .single-post #leavecomment { width:240px; } /*---------------------------------------------- Columns ------------------------------------------------*/ .one_full { width: 100%; } .one_half { width: 100%; } .one_third { width: 100%; } .two_third { width: 100%; } .one_fourth { width: 100%; } .two_fourth { width: 100%; } .three_fourth { width: 100%; } .last { margin-right: 0px; } #maincontent .one_half { width: 100%; } #maincontent .one_third { width: 100%; } #maincontent .two_third { width: 100%; } .portfolio-content.one_fourth { width:140px !important; } .portfolio-content.three_fourth { width:100% !important; } /*---------------------------------------------- Pricing Table ------------------------------------------------*/ .col2 .price-col { width: 295px; } .col3 .price-col { width: 295px; } .col4 .price-col { width: 295px; } .price-col { margin:10px 0px; } /*---------------------------------------------- Data Table ------------------------------------------------*/ .col2 .table-col { width: 295px; } .col3 .table-col { width: 295px; } .col4 .table-col { width: 295px; } /*---------------------------------------------- Superbox ------------------------------------------------*/ .superbox .boxcontent{ float:none; width:100%; text-align:center; } .superbox a.button{ float:none; text-align:center; display:block; margin:20px auto 0px auto !important; } /*---------------------------------------------- Entries ------------------------------------------------*/ #blog .entry { background-position: center top; } #blog .entry-content {width: 100%;} #blog .entry-meta { width: 100%; text-align: left; } /*---------------------------------------------- Caruosel ------------------------------------------------*/ .es-nav-prev { right: 43px; } .es-nav-next { right: 20px; } #notfound span { display:block; position:relative; top:-0px; } /*---------------------------------------------- 17. Widgets ------------------------------------------------*/ #top .widget { line-height: 30px; } /* Twitter Widget ------------------------------------------------*/ #bottom #twitter-widget, #top #twitter-widget { background: url(../images/tweet.png) no-repeat 0px 0px; } /*---------------------------------------------- FLICKR WIDGET ------------------------------------------------*/ #flickr-widget .flickr-list li { width: 67px !important; } footer #flickr-widget #flickr-list li { width: 67px !important; } /*---------------------------------------------- Flex Slider ------------------------------------------------*/ .flex-caption { display: none; } .flex-direction-nav li a { width: 20px; height: 20px; top: 10px; } .flex-direction-nav li .next {left: 35px;} .flex-direction-nav li .prev {left: 10px;} /*---------------------------------------------- jPlayer ------------------------------------------------*/ div.jp-audio div.jp-type-single div.jp-progress-container { width:100px;} .one_third div.jp-audio div.jp-type-single div.jp-progress-container { width:100px; } .one_fourth div.jp-audio div.jp-type-single div.jp-progress-container { width:100px; } }