File: /home/slyfwmm/foar/wp-content/themes/flexfit/framework/css/responsive.css
/* ----------------------------------------------------- */
/* Tablet (Portrait) */
/* ----------------------------------------------------- */
/* Width of 768px */
/* ----------------------------------------------------- */
/* ############################################################################################## */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* ############################################################################################## */
/* ----------------------------------------------------- */
/* General & Home */
/* ----------------------------------------------------- */
#background{
-webkit-background-size: 2550px 1650px;
-webkit-transform:translate3d(0,0,0)
}
#wrap{
width:708px
}
#headerwrap, #header, #nav{
width:768px;
}
.work-carousel, .post-carousel{
width:470px !important;
}
#breadcrumb{
display:none;
}
#content-full{
width:708px;
}
#content-part{
width: 460px;
}
#sidebar{
width:215px !important;
}
/* ----------------------------------------------------- */
/* Slider */
/* ----------------------------------------------------- */
#home-slider, html body #home-slider .slides li{
width:768px !important;
height:290px !important;
overflow: hidden !important;
}
#home-slider li img{
width:768px;
height:auto;
}
#home-slider .flex-direction-nav a {
top: 128px;
}
#home-slider .flex-direction-nav .flex-next {
right: 0px;
}
#home-slider .flex-direction-nav .flex-prev {
left: 0px;
}
#home-slider .flex-direction-nav .flex-next span, #home-slider .flex-direction-nav li .flex-prev span{
display:none;
}
#home-slider .slide-title{
font-size:24px;
line-height:30px;
margin-bottom:20px;
font-weight:300;
}
.custom-table {
display: table;
width: 100%;
height: 290px;
}
.custom-table-cell {
display: table-cell;
vertical-align: middle;
}
/* ----------------------------------------------------- */
.option2 .slide-caption{
position: absolute;
bottom:20px;
left:30px;
width:688px;
font-size:12px;
height:20px;
padding:10px 10px;
color:#ffffff;
background: rgba(80, 80, 80, 0.6);
text-align: center;
}
/* ----------------------------------------------------- */
.option3 .slide-caption{
width:310px;
position: absolute;
top:0px;
left:70px;
}
.option3 .slide-content{
display:none;
}
.option3 .slide-shortcontent{
display:block;
}
/* ----------------------------------------------------- */
.option4 .slide-caption{
width:310px;
position: absolute;
top:0px;
right:70px;
}
.option4 .slide-content{
display:none;
}
.option4 .slide-shortcontent{
display:block;
}
/* ----------------------------------------------------- */
.option5{
height:290px;
width:708px;
}
.option5 .slide-caption{
width:630px;
top:10px;
left:70px;
}
.option5 .slide-content{
display:none;
}
.option5 .slide-shortcontent{
display:block;
}
/* ----------------------------------------------------- */
.option6 .slide-caption, .option6 iframe{
width:768px;
height:290px;
}
/* ----------------------------------------------------- */
/* Work */
/* ----------------------------------------------------- */
#container{
width:728px !important;
}
.project-sidebar-right #container{
width:490px !important;
}
#work-slider, #work-slider a, #work-slider li a .zoom{
width:708px;
height:308px;
}
#work-slider img{
max-width:708px;
max-height:308px;
}
#work-slider .flex-direction-nav a{
top:130px !important;
}
.single-project iframe{
width:708px;
height:399px;
}
.work-detail-description{
width:470px;
}
.work-item{
width:162px;
height:160px;
}
.work-item img, .work-item a .zoom{
width:162px;
height:105px;
}
.work-item h4{
padding:0;
}
.work-item h4 .work-subtitle{
display:none;
}
.work-item.col2{
width:344px;
height:268px;
}
.work-item.col2 img, .work-item.col2 a .zoom{
width:344px;
height:214px;
}
.work-item.col2 h4 .work-subtitle{
display: block;
}
.work-item.col3{
width:222px;
height:214px;
}
.work-item.col3 img, .work-item.col3 a .zoom{
width:222px;
height:159px;
}
.work-item.col3 h4 .work-subtitle{
display: block;
}
/* ----------------------------------------------------- */
/* Posts */
/* ----------------------------------------------------- */
.post-thumb img, .post-entry .post-thumb .zoom, .post-entry.singlepost .post-thumb .zoom{
width:460px;
height:172px;
}
.post-entry .post-thumb a{
height:177px;
}
/* ----------------------------------------------------- */
/* Comments */
/* ----------------------------------------------------- */
#commentform input, #commentform textarea{
width:440px !important;
margin-bottom:10px;
}
#respond, #commentform{
width:460px;
margin-bottom:40px;
}
#commentform p, #commentform label, .comment-form-email{
width:240px !important;
float: none !important;
margin:0 !important;
padding:0 !important;
}
#respond #commentform #submit{
width:auto !important;
}
#commentform span, .comment-notes{
display:none !important;
}
/* ----------------------------------------------------- */
.page-contact .three_fourth, .page-contact .one_fourth{
float: none;
width:708px !important;
}
#footer .triangle{
left:376px;
}
#footer #footerlogo, #footer .widget{
width:162px;
}
/* ----------------------------------------------------- */
/* Shortcodes */
/* ----------------------------------------------------- */
.hr3{
width:768px;
}
.google_map{
width:708px !important;
height:auto;
}
.google_map.full{
width:768px !important;
height:auto;
margin:0px -30px 30px -30px;
}
.gallery-item{
width:100%;
}
.gallery-item img{
width:70%;
height:auto;
}
.video-embed .iframe{
max-width:100%;
}
.pricing-table.col-2, .pricing-table.col-3, .pricing-table.col-4, .pricing-table.col-5{
width:708px;
}
.pricing-table.col-2 .plan{
float:left;
width:350px;
display: block;
}
.pricing-table.col-3 .plan{
float:left;
width:233px;
display: block;
}
.pricing-table.col-4 .plan{
float:left;
width:174px;
display: block;
}
.pricing-table.col-5 .plan{
float:left;
width:139px;
display: block;
}
/* Columns */
.one_half, #content-part .one_half { width: 48%; }
.one_third, #content-part .one_third { width: 30.66%; }
.two_third, #content-part .two_third { width: 65.33%; }
.one_fourth, #content-part .one_fourth { width: 22%; }
.three_fourth, #content-part .three_fourth { width: 74%; }
.one_fifth, #content-part .one_fifth { width: 16.8%; }
.two_fifth, #content-part .two_fifth { width: 37.6%; }
.one_half,
.one_third,
.two_third,
.three_fourth,
.one_fourth,
.one_fifth,
.two_fifth,
.three_fifth,
.four_fifth,
.one_sixth,
.five_sixth {
position: relative;
margin-right: 4%;
margin-bottom: 20px;
float: left;
}
/* ############################################################################################## */
}
/* ############################################################################################## */
/* ############################################################################################## */
/* Mobile Portrait */
@media only screen and (max-width: 767px) {
/* ############################################################################################## */
/* ----------------------------------------------------- */
/* General & Home */
/* ----------------------------------------------------- */
#background{
-webkit-background-size: 2550px 1650px;
-webkit-transform:translate3d(0,0,0)
}
#wrap{
width:280px;
padding:20px 20px 0px 20px;
}
#headerwrap{
margin: 0 auto 30px auto;
border-top:5px solid #efefef;
}
#headerwrap, #header, #nav{
width:320px;
}
html body #social{
width:320px;
float: none;
}
html body #social{
display:none;
}
html body #logo{
display:block !important;
width:320px;
text-align: center;
margin:30px 0 50px 0px !important;
padding:0;
}
#logo img{
margin:0;
padding:0;
max-width:320px;
}
html body #callus{
position: absolute !important;
bottom:60px !important;
right: 0 !important;
width:320px;
height:20px;
text-align: center !important;
margin:0px 0 0px 0 !important;
}
#nav .searchform{
display: none;
}
#breadcrumb{
display:none;
}
#content, #content-full{
width:280px;
padding:0;
margin:0;
}
#content-part{
width: 280px;
float: none;
margin:0px 0 40px 0;
padding:0;
}
#subtitle{
margin:10px 0 40px 0;
padding:0;
}
#sidebar{
width:100% !important;
float: none;
margin:0px !important;
padding:0 !important;
}
#nav{
background: #ed7811;
filter: none; /* IE6-9 */
}
#nav .select-menu {
display: inline-block;
margin:10px 20px;
width:280px;
background: #ed7811;
color:#ffffff;
padding: 5px;
font-size: 12px;
line-height:21px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
#nav ul { display: none; }
/* ----------------------------------------------------- */
#latestwork .teasertext{
width:100%;
display:block;
float: none;
}
#latestwork .work-carousel{
max-width:280px !important;
margin:20px 0 0 0;
overflow: hidden !important;
}
#latestposts .teasertext{
width:100%;
display:block;
float: none;
}
#latestposts .post-carousel{
max-width:280px !important;
margin:20px 0 0 0;
overflow: hidden !important;
}
/* ----------------------------------------------------- */
/* Slider */
/* ----------------------------------------------------- */
#home-slider{
margin:-20px 0 20px -20px;
}
#home-slider, html body #home-slider .slides li{
width:320px !important;
height:121px !important;
overflow: hidden !important;
}
#home-slider li img{
width:320px;
height:auto;
}
#home-slider .flex-direction-nav a {
top: 50px;
}
#home-slider .flex-direction-nav .flex-next {
right: 0px;
}
#home-slider .flex-direction-nav .flex-prev {
left: 0px;
}
#home-slider .flex-direction-nav .flex-next span, #home-slider .flex-direction-nav li .flex-prev span{
display:none;
}
#home-slider .slide-title{
font-size:18px !important;
line-height:24px;
font-weight:300;
}
.custom-table {
margin:0;
padding:0;
display: table;
width: 100%;
height: 121px;
}
.custom-table-cell {
display: table-cell;
vertical-align: middle;
}
/* ----------------------------------------------------- */
.option2 .slide-caption{
display:none;
}
/* ----------------------------------------------------- */
.option3 .slide-caption{
display:none;
}
.option3 .slide-content{
display:none;
}
.option3 .slide-shortcontent{
display:none;
}
/* ----------------------------------------------------- */
.option4 .slide-caption{
display:none;
}
.option4 .slide-content{
display:none;
}
.option4 .slide-shortcontent{
display:none;
}
/* ----------------------------------------------------- */
.option5{
width:200px;
}
.option5 .slide-caption{
width:200px;
top:10px;
left:70px;
}
.option5 .slide-content{
display:none;
}
.option5 .slide-shortcontent{
display:none;
}
/* ----------------------------------------------------- */
.option6 .slide-caption, .option6 iframe{
width:320px;
height:121px;
}
/* ----------------------------------------------------- */
/* Work */
/* ----------------------------------------------------- */
#filters{
position: relative;
top:0;
left:0;
margin:20px 0 -20px -10px;
}
#filters li a{
margin:0 0 10px 0;
}
#sidebar.project-sidebar-right{
float:none;
}
#page, #container, #content-part.project-sidebar-right #container{
width:280px;
float: none !important;
}
#container .work-item{
margin:10px 30px 10px 30px !important;
}
#container .work-item.col2{
width:280px;
height:230px !important;
margin:10px 0 10px 0 !important;
}
#container .work-item.col2 img{
width:280px;
height:auto;
}
#container .work-item.col2 a .zoom{
width:280px;
height:174px;
}
#container .work-item.col3{
width:280px;
height:256px !important;
margin:10px 0 10px 0 !important;
}
#container .work-item.col3 img{
width:280px;
height:auto;
}
#container .work-item.col3 a .zoom{
width:280px;
height:201px;
}
#work-slider, #work-slider a, #work-slider li a .zoom{
width:280px;
height:122px;
}
#work-slider img{
max-width:280px;
max-height:122px;
}
#work-slider .flex-direction-nav a{
top:36px !important;
}
/* ----------------------------------------------------- */
.posts-nav{
margin:0;
top:0;
}
.single-project iframe{
width:280px;
height:180px;
}
.work-detail-description, .work-detail-link{
width:280px;
float: none;
margin:0;
}
/* ----------------------------------------------------- */
/* Posts */
/* ----------------------------------------------------- */
.post-thumb img, .post-entry .post-thumb .zoom, .post-entry.singlepost .post-thumb .zoom{
width:280px;
height:105px;
}
.post-entry .post-thumb a{
height:110px;
}
/* ----------------------------------------------------- */
/* Comments */
/* ----------------------------------------------------- */
#commentform input, #commentform textarea{
width:260px !important;
margin-bottom:10px;
}
#respond, #commentform{
width:260px;
margin-bottom:40px;
}
#commentform p, #commentform label, .comment-form-email{
width:130px !important;
float: none !important;
margin:0 !important;
padding:0 !important;
}
#respond #commentform #submit{
width:auto !important;
}
#commentform span, .comment-notes{
display:none !important;
}
#contactform{
width:280px;
}
#contactform input{
width:258px;
}
#commentform input, #commentform textarea, #contactform textarea{
width:258px !important;
margin-bottom:10px;
}
/* ----------------------------------------------------- */
/* Footer */
/* ----------------------------------------------------- */
#footer .triangle{
left:150px;
}
#footerwrap{
margin:30px -20px 0 -20px !important;
}
#footer .widget, #footer #footerlogo{
width:100%;
float: none;
margin-bottom:40px;
}
#toTop{
visibility: hidden;
}
/* ----------------------------------------------------- */
/* Shortcodes */
/* ----------------------------------------------------- */
.hr3{
width:320px;
margin:30px -20px;
}
.video-embed .iframe{
max-width:100%;
}
.google_map{
width:280px !important;
height:auto;
}
.google_map.full{
width:320px !important;
height:auto;
margin:-20px -30px 30px -20px;
}
.gallery a img, a img.size-medium, a img.size-thumbnail{
padding:5px;
}
.gallery-item img{
width:60%;
height:auto;
}
.pricing-table.col-2, .pricing-table.col-3, .pricing-table.col-4, .pricing-table.col-5{
width:280px;
}
.pricing-table.col-2 .plan{
float:none;
width:280px;
display: block;
margin-bottom:30px;
}
.pricing-table.col-3 .plan{
float:none;
width:280px;
display: block;
margin-bottom:30px;
}
.pricing-table.col-4 .plan{
float:none;
width:280px;
display: block;
margin-bottom:30px;
}
.pricing-table.col-5 .plan{
float:none;
width:280px;
display: block;
margin-bottom:30px;
}
.pricing-table .plan{
border-left:1px solid #e6e6e6 !important;
}
.pricing-table .plan.featured{
border-left:5px solid #e6e6e6 !important;
}
ul.tabNavigation li a {
padding:6px 8px;
font-size:11px;
}
.one_half, #content-part .one_half { width: 100%; margin: 0 0 25px; }
.one_third, #content-part .one_third { width: 100%; margin: 0 0 25px; }
.two_third, #content-part .two_third { width: 100%; margin: 0 0 25px; }
.one_fourth, #content-part .one_fourth { width: 100%; margin: 0 0 25px; }
.three_fourth, #content-part .three_fourth { width: 100%; margin: 0 0 25px; }
.one_fifth, #content-part .one_fifth { width: 100%; margin: 0 0 25px; }
.two_fifth, #content-part .two_fifth { width: 100%; margin: 0 0 25px; }
/* ----------------------------------------------------- */
/* ############################################################################################## */
}
/* ############################################################################################## */
/* ############################################################################################## */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* ############################################################################################## */
/* ----------------------------------------------------- */
/* General & Home */
/* ----------------------------------------------------- */
#wrap{
width:420px;
padding:20px 20px 0px 20px;
}
#headerwrap{
margin: 0 auto 30px auto;
}
#headerwrap, #header, #nav{
width:460px;
}
#social{
display:none;
}
html body #logo{
display:block !important;
width:460px;
text-align: center;
margin:30px 0 50px 0px !important;
padding:0;
}
#logo img{
margin:0;
padding:0;
max-width:460px;
}
html body #callus{
position: absolute !important;
bottom:60px !important;
right: 0 !important;
width:460px;
height:20px;
text-align: center !important;
margin:0px 0 0px 0 !important;
}
#nav .searchform{
display: none;
}
#breadcrumb{
display:none;
}
#content, #content-full{
width:420px;
padding:0;
margin:0;
float: none !important;
}
#content-part{
width: 420px;
float: none !important;
margin:0px 0 40px 0;
padding:0;
}
#subtitle{
width:420px !important;
margin:10px 0 40px 0;
padding:0;
}
#sidebar, #sidebar.sidebar-left, #sidebar.sidebar-right{
margin:0;
padding:0;
position: relative;
float: none;
width:420px !important;
}
#nav{
background: #ed7811;
}
#nav .select-menu {
display: inline-block;
margin:10px 20px;
width:420px;
background: #ed7811;
color:#ffffff;
padding: 5px;
font-size: 12px;
line-height:21px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
#nav ul { display: none; }
/* ----------------------------------------------------- */
#latestwork .teasertext{
width:100%;
display:block;
float: none;
}
#latestwork .work-carousel{
max-width:420px !important;
margin:20px 0 0 0;
overflow: hidden !important;
}
#latestposts .teasertext{
width:100%;
display:block;
float: none;
}
#latestposts .post-carousel{
max-width:420px !important;
margin:20px 0 0 0;
overflow: hidden !important;
}
/* ----------------------------------------------------- */
/* Slider */
/* ----------------------------------------------------- */
#home-slider{
margin:-20px 0 20px -20px;
}
#home-slider, html body #home-slider .slides li{
width:460px !important;
height:174px !important;
overflow: hidden !important;
}
#home-slider li img{
width:460px;
height:auto;
}
#home-slider .flex-direction-nav a {
top: 74px;
}
#home-slider .flex-direction-nav .flex-next {
right: 0px;
}
#home-slider .flex-direction-nav .flex-prev {
left: 0px;
}
#home-slider .flex-direction-nav .flex-next span, #home-slider .flex-direction-nav li .flex-prev span{
display:none;
}
#home-slider .slide-title{
font-size:18px !important;
line-height:24px;
font-weight:300;
margin:0 0 10px 0 !important;
}
.custom-table {
margin:0;
padding:0;
display: table;
width: 100%;
height: 174px;
}
.custom-table-cell {
display: table-cell;
vertical-align: middle;
}
/* ----------------------------------------------------- */
.option2 .slide-caption{
display:none;
}
/* ----------------------------------------------------- */
.option3 .slide-caption{
display:block;
width:200px;
left:60px !important;
}
.option3 .slide-content{
display:none;
}
.option3 .slide-shortcontent{
display:none;
}
/* ----------------------------------------------------- */
html body .option4 .slide-caption{
display:block;
width:200px;
left: 220px !important;
}
.option4 .slide-content{
display:none;
}
.option4 .slide-shortcontent{
display:none;
}
/* ----------------------------------------------------- */
#home-slider .option5 .slide-title{
font-size:22px !important;
line-height:24px;
font-weight:300;
text-align: center;
margin:0 0 0px 0 !important;
}
.option5 .slide-caption{
width:320px;
top:0px;
left:70px;
}
.option5 .slide-content{
display:none;
}
.option5 .slide-shortcontent{
display:none;
font-size:11px;
line-height:19px;
}
/* ----------------------------------------------------- */
.option6 .slide-caption, .option6 iframe{
width:460px;
height:171px;
}
/* ----------------------------------------------------- */
/* Work */
/* ----------------------------------------------------- */
#filters{
position: relative;
top:0;
left:0;
margin:20px 0 -20px -10px;
}
#filters li a{
margin:0 0 10px 0;
}
#sidebar.project-sidebar-right{
float:none;
}
#page, #container, #content-part.project-sidebar-right #container{
width:420px;
float: none !important;
}
#container .work-item{
width:190px;
height:178px;
margin:0 10px 20px 10px !important;
}
#container .work-item img{
width:190px;
height:auto;
}
#container .work-item a .zoom{
width:190px;
height:124px;
}
#container .work-item.col2{
width:420px;
height:316px !important;
margin:10px 0 10px 0 !important;
}
#container .work-item.col2 img{
width:420px;
height:auto;
}
#container .work-item.col2 a .zoom{
width:420px;
height:261px;
}
#container .work-item.col3{
width:190px;
height:190px !important;
margin:0 10px 20px 10px !important;
}
#container .work-item.col3 img{
width:190px;
height:auto;
}
#container .work-item.col3 a .zoom{
width:190px;
height:136px;
}
#work-slider, #work-slider a, #work-slider li a .zoom{
width:420px;
height:183px;
}
#work-slider img{
max-width:420px;
max-height:183px;
}
#work-slider .flex-direction-nav a{
top:66px !important;
}
/* ----------------------------------------------------- */
.posts-nav{
margin:0;
top:0;
}
.single-project iframe{
width:420px;
height:240px;
}
.work-detail-description, .work-detail-link{
width:420px;
float: none;
margin:0;
}
/* ----------------------------------------------------- */
/* Posts */
/* ----------------------------------------------------- */
.post-thumb img, .post-entry .post-thumb .zoom, .post-entry.singlepost .post-thumb .zoom{
width:420px;
height:158px;
}
.post-entry .post-thumb a{
height:163px;
}
/* ----------------------------------------------------- */
/* Comments */
/* ----------------------------------------------------- */
html body #commentform input, html body #commentform textarea{
width:396px !important;
margin-bottom:10px;
}
html body #respond, html body#commentform{
width:420px;
margin-bottom:40px;
}
html body #commentform p, html body #commentform label, html body .comment-form-email{
width:200px !important;
float: none !important;
margin:0 !important;
padding:0 !important;
}
#respond #commentform #submit{
width:auto !important;
}
#commentform span, .comment-notes{
display:none !important;
}
#contactform{
width:396px;
}
#contactform input{
width:274px;
}
#commentform input, #commentform textarea, #contactform textarea{
width:274px !important;
margin-bottom:10px;
}
/* ----------------------------------------------------- */
/* Footer */
/* ----------------------------------------------------- */
#footer .triangle{
left:220px;
}
#footerwrap{
margin:30px -20px 0 -20px !important;
}
#footer .widget, #footer #footerlogo{
width:100%;
float: none;
margin-bottom:40px;
}
#toTop{
visibility: hidden;
}
/* ----------------------------------------------------- */
/* Shortcodes */
/* ----------------------------------------------------- */
.hr3{
width:460px;
margin:30px -20px;
}
.video-embed .iframe{
max-width:100%;
}
.google_map{
width:420px !important;
height:auto;
}
.google_map.full{
width:460px !important;
height:auto;
margin:-20px -30px 30px -20px;
}
.gallery a img, a img.size-medium, a img.size-thumbnail{
padding:5px;
}
.gallery-item img{
width:60%;
height:auto;
}
.pricing-table.col-2, .pricing-table.col-3, .pricing-table.col-4, .pricing-table.col-5{
width:280px;
}
.pricing-table.col-2 .plan{
float:none;
width:420px;
display: block;
margin-bottom:30px;
}
.pricing-table.col-3 .plan{
float:none;
width:420px;
display: block;
margin-bottom:30px;
}
.pricing-table.col-4 .plan{
float:none;
width:420px;
display: block;
margin-bottom:30px;
}
.pricing-table.col-5 .plan{
float:none;
width:420px;
display: block;
margin-bottom:30px;
}
.pricing-table .plan{
border-left:1px solid #e6e6e6 !important;
}
.pricing-table .plan.featured{
border-left:5px solid #e6e6e6 !important;
}
ul.tabNavigation li a {
padding:6px 8px;
font-size:11px;
}
.one_half, #content-part .one_half { width: 100%; margin: 0 0 25px; }
.one_third, #content-part .one_third { width: 100%; margin: 0 0 25px; }
.two_third, #content-part .two_third { width: 100%; margin: 0 0 25px; }
.one_fourth, #content-part .one_fourth { width: 100%; margin: 0 0 25px; }
.three_fourth, #content-part .three_fourth { width: 100%; margin: 0 0 25px; }
.one_fifth, #content-part .one_fifth { width: 100%; margin: 0 0 25px; }
.two_fifth, #content-part .two_fifth { width: 100%; margin: 0 0 25px; }
/* ############################################################################################## */
}
/* ############################################################################################## */