/* Theme Name: Solavei Member - Full Website Description: A complete website theme for Solavei members. Features several different layout options as well as a customizable video feature, welcome message and contact information. Author: Solavei Author URI: http://www.solavei.com/ Version: 1.0.2 */ @font-face { font-family: 'Sean'; src: url('fonts/Hand_Of_Sean.eot'); src: local('☺'), url('fonts/Hand_Of_Sean.woff') format('woff'), url('fonts/Hand_Of_Sean.ttf') format('truetype'), url('fonts/Hand_Of_Sean.svg') format('svg'); font-weight: normal; font-style: normal; } /* Eric Meyer's CSS Reset http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline} html{font-size:62.5%} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} body{line-height:1} ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none} table{border-collapse:collapse;border-spacing:0} /* Selection colours (easy to forget) */ ::selection {background:#659BC5; color:#fff;} ::-moz-selection {background:#659BC5; color:#fff;} img::selection {background:transparent;} img::-moz-selection {background:transparent;} body {-webkit-tap-highlight-color:#659BC5;} /* Alignment & Assistive Text -------------- */ .alignleft {display:block;} .alignright {display:block;} .aligncenter {clear:both; display:block; margin-left:auto; margin-right:auto;} .assistive-text {position:absolute!important; top: -17px; color: #ffffff;} .screen-reader-text {position:absolute!important; left:-9000px; clip:rect(1px 1px 1px 1px); /* IE6, IE7 */ clip:rect(1px, 1px, 1px, 1px);} .page-nav {overflow:hidden;} .page-nav div {float:left; width:auto; margin:12px 6px;} #nav-top {margin:-18px 0 18px; border-bottom:1px dotted #ccc;} .required {color:#c53634;} .clear {display:block; width:100%; height:1px; font-size:1px; line-height:1px; margin:0 0 -1px 0; padding:0; overflow:hidden;} /* Fonts & Colors -------------------------- */ body {color:#333333; background: #EAEAEA; font:13px/18px Helvetica, Arial, sans-serif; } a {color:#7b2b80; text-decoration:none; /*-webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease;*/} a:hover, a:focus {color:#431543; text-decoration:underline;} p a span.arrow {font-size: 15px;} em {font-style:italic;} strong {font-weight:700; color:#ff8f00;} p, ul, ol, dl, h1, h2, h3, h4, h5, h6 {margin-bottom:18px;} ol, ul {margin-left:2em;} ol {list-style:decimal;} ul {list-style:disc;} input:focus {outline: none !important;} h1 {font-size:32px; line-height:1.222222; font-weight:700; color:#7b2c80;} h2 {font-size:24px; line-height:1.222222; font-weight:700; color:#7b2c80;} h3 {font-size:18px; line-height:1.5; color:#7b2c80;} h4 {font-size:16px; line-height:1.5; color:#7b2c80;} h5 {font-size:14px; line-height:1.5; color:#7b2c80;} h6 {font-size:13px; line-height:1.5;} .entry-content h1+ol, .entry-content h1+ul, .entry-content h1+p, .entry-content h2+ol, .entry-content h2+ul, .entry-content h2+p, .entry-content h3+ol, .entry-content h3+ul, .entry-content h3+p, .entry-content h4+ol, .entry-content h4+ul, .entry-content h4+p {margin-top:-15px!important;} .entry-content p+ol, .entry-content p+ul {margin-top:-8px!important;} .entry table td, .entry table th {padding:12px; vertical-align:top;} button, button::-moz-focus-inner, button[disabled]:active, button[disabled] {-webkit-appearance: none; -moz-appearance: none; border: none !important; border-width: 0px; background: none; cursor: pointer; padding: 0px;} #contact-form {margin-top: 20px;} #contact-form input[type="text"] {margin-bottom: 10px; width: 135px; border: 1px solid #cccccc; padding: 5px;} #contact-form input[type="text"]#contact-name {margin-right: 2px;} #contact-form input[type="submit"] {width: 300px; text-align: center; color: #ffffff; font-weight:bold; padding: 10px 0px; -webkit-appearance:none !important; background: #8D257B; border: none !important; letter-spacing: 1px; font-size: 16px; cursor: pointer;} #contact-form input[type="submit"]:hover {background:#ffffff; color: #8D257B;} #contact-form .success {margin: 15px 0px 0px; font-weight: bold; text-align: center; color: #df861f;} #contact-form .errors {font-weight: bold; color: #df861f;} /* Page structure -------------------------- */ .bg {width:1280px; margin: 0px auto; padding:0 0 48px; background: url(img/bg-gradient.jpg) no-repeat center bottom #ffffff;} .home .bg {padding: 0px;} #feature {width: 1000px; margin: 0px auto; padding:50px 0 60px; overflow: hidden;} #content {width: 1000px; margin: 0 auto; clear: both; background:#fff; -webkit-box-shadow: inset 0 0 80px 5px #bbb; box-shadow: inset 0 0 80px 5px #bbb;} .home #content {background: none; -webkit-box-shadow: none; box-shadow: none;} #content .default {padding:0 36px 12px} #content #widgets {overflow:hidden; width: 1000px; padding-bottom: 5px; } .page-header, .single .wp-post-image {margin-bottom:24px; border:8px solid #fff; -webkit-box-shadow: 0 0 3px 0px #ccc; box-shadow: 0 0 3px 0px #ccc;} .default .page-header {margin:0 -36px 24px;} .page-title {margin-bottom:24px;} .page-title small {font-size:.7em; color:#818286; font-weight:400;} .page h1.banner {margin:0 -36px 24px; padding:36px; color:#fff; background:#831a81 url('img/page-header-bk.jpg') bottom left no-repeat;} /* Header & Footer -------------------------- */ #masthead {height: 73px; width: 1000px; margin: 0 auto; overflow:hidden;} #masthead #site-name {float: left; text-indent:-9000px; display: block; width:152px; height:57px; margin:8px 0 0 0; background:transparent url('img/solavei-logo.png');} #masthead nav {float: right; margin: 26px 0 0 0; text-align: right;} #masthead nav li {display: block; float: left; list-style: none;} #masthead nav a {display: block; margin:0 6px; padding:3px 6px; color:#9e9f9e; font-size:15px; font-weight:700;} #sitefoot {overflow:hidden; background:#6d2a6d; color:#fff; height: 55px; padding-top: 37px; width: 1280px; margin: 0px auto;} #sitefoot p {width:1000px; margin: 0 auto; text-align: right; padding-right: 100px;} #sitefoot a {color:#fff;} /* FAQ ---------------------------------------- */ #faq article {margin-bottom:24px; border-bottom:1px dotted #ccc;} #faq h2.entry-title {font-size:15px; margin:0 0 18px; padding:0;} #faq h2.entry-title b {font-size:16px;} #faq h2.entry-title:hover {color:#431543; text-decoration:underline; cursor:pointer;} /* Blog --------------------------------------- */ #blog article {overflow:hidden; margin-bottom:24px; border-bottom:1px dotted #ccc;} #blog .entry-image {display:block; width:230px; float:left; margin-bottom:24px;} #blog .entry-image img {border:8px solid #fff; -webkit-box-shadow: 0 0 3px 0px #ccc; box-shadow: 0 0 3px 0px #ccc;} #blog .entry {width:620px; float:right; margin-top:8px;} #blog h2.entry-title {font-size:20px; margin-bottom:3px;} .entry-meta {color:#7b2c80; margin-bottom:12px; font-size:12px; color:#777;} .single #content {} .single article {} .single .sidebar {float:right; width:277px; margin:0 0 36px -1px; padding:0 0 0 30px; border-left:1px solid #ccc;} .single header {width:1000px; margin-bottom:18px;} .single .entry-title {padding-top:24px!important;} .single .entry-title, .single .entry-meta {margin:0 36px 0;} .single .entry {float:left; width:620px; margin-bottom:30px; border-right:1px solid #ccc;} .single .entry-utility {font-size:12px; color:#777; margin-bottom:36px;} .entry-shares {height:24px; margin:12px 0;} .IN-widget {margin-right:30px;} div.fb-like {position:relative; top:-3px; width:400px;} .sidebar ul {margin:0; list-style:none;} .sidebar ul ul {margin:1.5em;} .sidebar-widget {margin:0 24px 36px 0;} .sidebar .widget-title {margin-bottom:12px; font:400 28px/32px 'Sean';} .sidebar #contact-form input[type="text"] {width:239px;} .sidebar #contact-form input[type="submit"] {width:250px;} .sidebar #contact-form input[type="submit"]:hover {background:#431543; color:#fff;} .flexible-posts li {margin:0 0 12px; border-bottom:1px dotted #ccc;} .flexible-posts h4.title {margin-bottom:0px;} /* Comments ----------------------- */ #comments {overflow:hidden;} #respond p {overflow:hidden;} article.comment {margin-bottom:24px; padding-bottom:12px; border-bottom:1px dotted #ccc;} .comment .children {margin-left:30px;} #comments-title {margin-bottom:12px; padding-bottom:3px; font-size:18px; color:#777; border-bottom:1px solid #ccc;} .comment-meta {margin-bottom:6px;} .comment-author .fn {} .comment-meta a time {} .comment-content p {margin-bottom:6px;} .comment .reply, .comment .edit-link {font-style:italic;} .comment-notes, .form-allowed-tags {font-style:italic; color:#777;} #comments label {float:left; width:80px;} #comments .input-text {float:left; width:auto;} #reply-title {margin-bottom:3px; font-weight:700;} .comment-form-comment {margin-top:18px;} .comment-form-comment label {display:block; width:auto;} .comment-form-comment textarea {display:block; width:95%; clear:both; padding:5px;} /* Option 1 Styles ---------------------------- */ .opt1 #masthead {border-bottom:3px solid #6d2a6d;} .opt1 #feature {margin-bottom:72px;} .opt1 #content {background:transparent url('img/contentBk.png') left bottom repeat-x;} /* Widget Styles ---------------------------- */ .widget {float:left; padding: 30px 20px 0; color: #ffffff;} .widget a {color: #eb8b31; font-weight: bold;} .widget a:hover {color: #ffffff;} #widgets h2.title {color: #ffffff; font-size: 28px; margin-bottom: 20px; line-height: 1.1em; text-align: center; font-family: 'Sean'; text-shadow: 1px 1px 2px #3a133f; font-weight: normal;} #shop-solavei {width: 293px; margin-right: 2px;} #shop-solavei .button {height: 24px; width: 24px; float: left; display: block; position: relative; top: 85px; cursor: pointer;} #shop-solavei .button#prev {background: url('img/icons.png') no-repeat 0px 0px; margin-left: 22px;} #shop-solavei .button#prev:hover {background-position: 0px -26px;} #shop-solavei .button#next {background: url('img/icons.png') no-repeat -26px 0px;} #shop-solavei .button#next:hover {background-position: -26px -26px;} #shop-solavei .bx-wrapper {float: left; width: 200px; height: 200px; overflow: hidden;} #shop-solavei #slider {width: 200px; height: 200px; overflow: hidden; float: left;} #shop-solavei #slider a {display: block; width: 200px; height: 200px;} #about-solavei {width: 293px; margin-right: 2px;} #about-solavei .entry p {font-size: 14px; font-weight: bold; line-height: 1.5em;} #contact-me {color: #ffffff; width: 300px; padding-right: 10px;} #contact-me .entry.vcard {float: left; width: 209px; } #contact-me .avatar, #contact-me .user-photo {border: 3px solid #ffffff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin: 0px 15px 15px 0px; float: left;} #contact-me h2 {float: left; display: block; margin: 0px 15px 20px 0px;} #contact-me h3.name {color: #ffffff; font-size: 18px; font-weight: bold; margin-bottom: 8px;} #contact-me p {margin-bottom: 8px;} #contact-me p.email {background: url(img/icons.png) no-repeat left -139px; padding-left: 20px;} #contact-me p.tel {background: url(img/icons.png) no-repeat left -160px; padding-left: 20px;} #contact-me a.icon {display: block; position: relative; float: left; margin: 6px 8px 25px 0px;} #contact-me a#fb-icon{width: 23px; height: 22px; background: url('img/icons.png') no-repeat 0px -100px;} #contact-me a#fb-icon:hover {background-position: -26px -100px; text-decoration: none;} #contact-me a#fb-icon:focus {text-decoration: none;} #contact-me a#in-icon {width: 22px; height: 22px; background: url('img/icons.png') no-repeat 0px -77px;} #contact-me a#in-icon:hover {background-position: -26px -77px; text-decoration: none;} #contact-me a#in-icon:focus {text-decoration: none;} #contact-form {clear:both;} #contact-form a.enroll-btn {display:block; width:300px; height:46px; margin-left:-6px; text-indent:-9000px; overflow:hidden; background:transparent url('img/enroll-button.png') left top no-repeat;} #contact-form a.enroll-btn:hover {background-position:left bottom;} #contact-form {margin-top: 20px; height: 125px; position: relative;} #contact-form input[type="text"] {margin-bottom: 10px; width: 135px; border: 1px solid #cccccc; padding: 5px;} #contact-form input[type="text"]#contact-name {margin-right: 2px;} #contact-form input[type="submit"] {width: 300px; text-align: center; color: #ffffff; font-weight:bold; padding: 10px 0px; -webkit-appearance:none !important; background: #8D257B; border: none !important; letter-spacing: 1px; font-size: 16px; cursor: pointer;} #contact-form input[type="submit"]:hover {background:#EB8B31; color: #ffffff;} #contact-form .success {margin: 15px 0px 0px; font-weight: bold; text-align: center; color: #df861f;} #contact-form .errors {font-weight: bold; color: #df861f; margin-bottom: 5px;} #twitter a#tw-icon {width: 22px; height: 22px; background: url('img/icons.png') no-repeat 0px -54px; position: relative; float: left; margin: 7px 10px 0px 0px; display: block;} #twitter a#tw-icon:hover {background-position: -26px -54px;} #twitter a#tw-icon:focus {text-decoration: none;} #twitter ul li {margin-bottom: 15px; font-size: 14px; color: #4d4d4d; clear: left;} #twitter h2 a:hover {color:#431543; text-decoration: none;} #twitter img.avatar {float: left; margin: 0px 15px 25px 0px;} /* Home Header Slider Styles ---------------------------- */ #feature .banner {float:left; margin:0 0 0 12px; position: relative;} #feature .banner a img {border:1px solid #ccc;} #feature .banner a:hover img {border:1px solid #EB8B31;} /* #feature .banner .bx-wrapper {height: 400px; width: 450px; overflow: hidden;} #feature .banner #header-slider {height: 400px; overflow: hidden;} #feature .banner #header-slider .slide {height: 400px; width: 450px; overflow: hidden;} #feature .banner #header-slider .slide h2 {color: #7b2c80; font-weight: bold; text-align: center; margin: 0px;} #feature .banner #header-slider .slide h3, #feature .banner #header-slider .slide h3 a {color: #adadad; font-weight: bold; text-align: center; margin: 0; font-size: 16px; line-height: 1em;} #feature .banner #header-slider .slide h3 span {font-size: 18px;} #feature .banner #header-slider .slide a.img {display: block; width: 450px; height: 340px;} #feature .banner #header-pager {text-align: center; position: relative;} #feature .banner #header-pager a {display: inline-block; position: relative; overflow: hidden; height: 0px; width: 12px; padding-top: 12px; background: url(img/icons.png) no-repeat 0 -123px; margin: 0px 2px;} #feature .banner #header-pager a.pager-active, .banner-message #feature .banner #header-pager a:hover {background-position: -14px -123px;} */ /* Banner-Video Styles ---------------------------- */ .banner-video .bg {background: url(img/bg-gradient-banner-video.jpg) no-repeat center bottom #ffffff;} .banner-video #feature .banner {float: left;} .banner-video #feature .banner a#get-started {display: block; width: 115px; height: 28px; background: url('img/orange-button.png') no-repeat 0 0; margin: -53px auto 0px; position: relative;} .banner-video #feature .banner a#get-started:hover {text-decoration: none; background-position: 0 -32px;} .banner-video #feature .video {width: 500px; float: right; margin:0 12px 0 0;} .banner-video #feature .video h2 {color: #ffffff; margin-top: 25px;} /* Full Width Video Styles ---------------------------- */ .video .bg {background: url(img/bg-gradient-video.jpg) no-repeat center bottom #ffffff;} .video #feature {height: 500px; /*background: url('img/video-shadow.png') no-repeat center bottom;*/ padding-bottom: 57px;} .video #feature .video {width: 889px; height: 500px; margin: 0 auto 30px;} /* Banner-Message Styles ---------------------------- */ .banner-message .bg {background: url(img/bg-gradient-banner-message.jpg) no-repeat center bottom #ffffff;} .banner-message #feature .banner a#get-started {display: block; width: 115px; height: 28px; background: url('img/orange-button.png') no-repeat 0 0; margin: -53px auto 0px; position: relative;} .banner-message #feature .banner a#get-started:hover {text-decoration: none; background-position: 0 -32px;} .banner-message #feature .message {width:450px; height:320px; margin:0 12px 0 0; overflow: hidden; float:right; color: #ffffff;} .banner-message #feature .message h1 {font-size: 35px; color: #000000; font-weight: bold; line-height: 1.1em; margin-bottom: 20px;} .banner-message #feature .message p {color: #7f7f7f; font-size: 18px; line-height: 1.3em;} /* How It Works Page Style -------------------------- */ .howitworks .header-wrap{background: url(img/howitworks-header.jpg) no-repeat; width:1000px; height:84px;} .howitworks #howitworks-slider {width: 1000px; height: 447px; position: relative;} .howitworks nav {position: absolute; width: 1000px;} .howitworks nav .arrow {display: block; width: 24px; height: 24px; overflow: hidden; position: relative; top: 38px; } .howitworks nav #prev {float: left; background: url(img/icons.png) no-repeat 0px -187px; margin-left: 30px;} .howitworks nav #prev:hover {background-position: 0px -213px;} .howitworks nav #next {float: right; background: url(img/icons.png) no-repeat -25px -187px; margin-right: 30px;} .howitworks nav #next:hover {background-position: -25px -213px;} .howitworks nav #pager {float: right; margin-right: 30px; position: relative; top: 40px;} .howitworks nav #pager a {color: #ffffff; padding: 1px 6px 0px; font-weight: bold;} .howitworks nav #pager a.pager-active, .howitworks nav #pager a:hover {padding: 1px 5px 0px; border: 1px solid #EB8B31;} .howitworks nav #pager a:focus,.howitworks nav #pager a:hover {text-decoration: none;} .howitworks h1{margin:0; padding:30px 0 0 90px; font-size:25pt; text-shadow: 2px 0px 10px #831b81; color:#fff;} .howitworks h1 span{font-size:10pt; position:relative; top:-14px;} .howitworks h2{margin:0; padding: 50px 0 0 90px; font-weight:normal; font-size: 22px; text-shadow: 2px 0px 6px #000; color: #ffffff;} .howitworks p {margin: 0 0 10px 0;} .howitworks strong {color: #ffffff;} .howitworks ul{margin:0; font-size: 12px; color:#f79422; padding:0 40px;} .howitworks li {color: #ffffff; list-style: none;} .howitworks li a {color:#EB8B31; text-decoration:underline; line-height:16px; display:block; padding-bottom:10px;} .howitworks li a:hover {color: #ffffff;} .howitworks span.trademark {display:inline; font-size:7pt; position:relative; top:-2px;} .howitworks .section {width: 1000px; height: 447px;} .section.one{background: url(img/select-device.jpg) no-repeat;} .section.one ul.item-one{position:relative; top:0px; left:660px; width:230px;} .section.one ul.item-two{position:relative; top:-70px; left:50px; width:230px;} .section.one ul.item-three{position:relative; top:-50px; left:660px; width:230px;} .section.two{background: url(img/become-member.jpg) no-repeat;} .section.two ul.item-one{position:relative; top:-20px; left:650px; width:250px;} .section.two ul.item-two{position:relative; top:-120px; left:50px; width:250px;} .section.two ul.item-three{position:relative; top:-130px; left:650px; width:250px;} .section.three{background: url(img/share.jpg) no-repeat;} .section.three ul.item-one{position:relative; top:-10px; left:660px; width:230px;} .section.three ul.item-two{position:relative; top:-120px; left:50px; width:203px;} .section.three ul.item-three{position:relative; top:-75px; left:660px; width:230px;} .section.four{background: url(img/earn.jpg) no-repeat;} .section.four ul.item-one{position:relative; top:-30px; left:630px; width:300px;} .section.four ul.item-two{position:relative; top:-145px; left:50px; width:240px;} .section.four ul.item-three{position:relative; top:-260px; left:630px; width:280px;} .section.five{background: url(img/get-paid.jpg) no-repeat;} .section.five ul.item-one{position:relative; top:40px; left:670px; width:230px;} .section.five ul.item-two{position:relative; top:-110px; left:50px; width:230px;} /* Our Team page -------------------- */ #content.about {box-shadow:none; background:transparent;} #page-about {padding-top:24px; overflow: hidden; margin-bottom:36px;} #page-about .graphic {float:left; width:350px; height:350px; margin:0 12px 24px; padding:30px 32px; background:transparent url('img/team-avatar-bk.png') no-repeat;} #page-about .graphic h3 {margin-top:24px; font-weight:700;} #page-about .graphic h3 small {font-weight:400;} #page-about .entry-content {float:left; width:480px; margin-left:24px; color:#555; font-size: 15px; line-height:1.5;} #about-title {margin:12px 0 24px;} .about #contact-form {width:625px; height:auto; margin-top:0; margin-bottom:12px;} .about #contact-form form {margin:6px 24px 24px;} .about #contact-form input[type="text"] {width:270px; color:#fff; background:#361b3e; border:1px solid #000; border-bottom:1px solid #682876; border-right:1px solid #682876;} .about #contact-form #contact-name {margin-right:8px!important;} .about #contact-form textarea {width:564px; height:80px; padding:5px; margin-bottom:8px; color:#fff; font-family:sans-serif; font-size:12px; background:#361b3e; border:1px solid #000; border-bottom:1px solid #682876; border-right:1px solid #682876;} .about #contact-form input[type="submit"] {width:150px; clear:both; font-size: 14px; padding: 5px 0;} .about #contact-form input[type="submit"]:hover {} /* Mobile Service Page -------------- */ #page-mobile-service .entry-content {padding:36px 60px 24px; color:#777;} #page-mobile-service .entry-content h2 {font-weight:400; font-size:30px; line-height:1.3; margin:30px 0;} #page-mobile-service img.us-of-a {float:left; display:inline; margin:-30px 42px 0 0;} /* What Is Solavei Page ------------- */ #page-what-is-solavei {overflow:hidden; padding-bottom:36px!important;} #page-what-is-solavei h1.banner {margin-bottom:36px;} #page-what-is-solavei .video {float:left; width:520px; margin-right:48px; padding-bottom:72px; background:transparent url('img/what-is-video-bk.png') center bottom no-repeat;} #page-what-is-solavei .entry-content {float:left; width:340px; color:#777;} #page-what-is-solavei h2 {font-size:18px; margin-bottom:24px;} #page-what-is-solavei strong {font-size:16px; line-height:1.3;} /* iPhone [portrait + landscape] */ @media only screen and (max-device-width: 480px) { .bg, #sitefoot {width: 100%; min-width: 1000px;} #masthead #site-name {margin-left: 50px;} .banner-message #feature .message p {-webkit-text-size-adjust: none !important;} #sitefoot p {-webkit-text-size-adjust: 170% !important; padding: 0px; text-align: center;} } /* iPad [portrait] */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { } /* iPhone [portrait] */ @media only screen and (max-device-width: 480px) and (orientation: portrait) { } /* iPad [landscape] */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { } /* iPhone [landscape] */ @media only screen and (max-device-width: 480px) and (orientation: landscape) { }