771 lines
16 KiB
CSS
771 lines
16 KiB
CSS
/* == Preloader Section == */
|
|
#preloader {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999;
|
|
background: #fff;
|
|
box-shadow: inset 0px 0px 250px 0px #aaa;
|
|
}
|
|
.loading {
|
|
line-height: 1;
|
|
text-align: center;
|
|
position: relative;
|
|
top: 30%;
|
|
}
|
|
.loading span{
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 10px;
|
|
border: 1px solid #000;
|
|
background: none #444;
|
|
margin: 0 10px;
|
|
|
|
-webkit-transition: all 0.5s ease-in-out;
|
|
-moz-transition: all 0.5s ease-in-out;
|
|
-ms-transition: all 0.5s ease-in-out;
|
|
-o-transition: all 0.5s ease-in-out;
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
.loading span.done{
|
|
background: none #fff;
|
|
outline: none;
|
|
border-color: #9ecaed;
|
|
width: 30px;
|
|
|
|
box-shadow: 0 0 10px #9ecaed;
|
|
}
|
|
.loading .label {
|
|
color: #000;
|
|
text-transform: uppercase;
|
|
margin: 10px 0;
|
|
font-size: 12px;
|
|
padding-top: 90px;
|
|
}
|
|
|
|
|
|
/* == Typography == */
|
|
body, p{
|
|
font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
|
|
font-size: 18px;
|
|
color: #333;
|
|
}
|
|
p {
|
|
margin: 16px 0;
|
|
line-height: 1.25;
|
|
}
|
|
a{
|
|
color: #333;
|
|
|
|
-webkit-transition: all 0.25s ease-in-out;
|
|
-moz-transition: all 0.25s ease-in-out;
|
|
-ms-transition: all 0.25s ease-in-out;
|
|
-o-transition: all 0.25s ease-in-out;
|
|
transition: all 0.25s ease-in-out;
|
|
}
|
|
a:hover{
|
|
border-bottom: 1px solid #000;
|
|
text-decoration: none;
|
|
}
|
|
h1{
|
|
font-size: 45px;
|
|
font-weight: 200;
|
|
line-height: 1em;
|
|
}
|
|
h2{
|
|
font-size: 40px;
|
|
font-weight: 200;
|
|
line-height: 1;
|
|
margin: 25px 0;
|
|
}
|
|
h5 {
|
|
font-size: 25px;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
margin: 10px 0;
|
|
}
|
|
blockquote {
|
|
font-size: 20px;
|
|
line-height: 1.25em;
|
|
font-style: italic;
|
|
color: #666;
|
|
text-transform: lowercase;
|
|
padding: 20px;
|
|
text-align: right;
|
|
position: relative;
|
|
}
|
|
blockquote:before{
|
|
color: #fff;
|
|
content: "\201C";
|
|
font-size: 5em;
|
|
position:absolute;
|
|
right:5px;
|
|
top: 26px;
|
|
line-height: 0.1em;
|
|
}
|
|
blockquote:after{
|
|
color: #fff;
|
|
content: "\201D";
|
|
font-size: 5em;
|
|
position:absolute;
|
|
left:3px;
|
|
bottom: 0em;
|
|
line-height: 0.1em;
|
|
}
|
|
ul{
|
|
margin-left: 22px;
|
|
}
|
|
ul li {
|
|
line-height: 1.25em;
|
|
margin: 3px 0;
|
|
}
|
|
ul.home{
|
|
list-style-image: url(../images/icons/home.png);
|
|
}
|
|
ul.mail{
|
|
list-style-image: url(../images/icons/mail.png);
|
|
}
|
|
ul.phone{
|
|
list-style-image: url(../images/icons/phone.png);
|
|
}
|
|
ul.file{
|
|
list-style-image: url(../images/icons/file.png);
|
|
}
|
|
ul.gear{
|
|
list-style-image: url(../images/icons/gear.png);
|
|
}
|
|
ul.next{
|
|
list-style-image: url(../images/icons/next.png);
|
|
}
|
|
i {
|
|
display: inline-block;
|
|
width: 20px;
|
|
content: " ";
|
|
height: 1em;
|
|
vertical-align: baseline;
|
|
}
|
|
i.home{
|
|
background: url(../images/icons/home.png) no-repeat center 4px transparent;
|
|
}
|
|
i.mail{
|
|
background: url(../images/icons/mail.png) no-repeat center 4px transparent;
|
|
}
|
|
i.phone{
|
|
background: url(../images/icons/phone.png) no-repeat center 4px transparent;
|
|
}
|
|
i.file{
|
|
background: url(../images/icons/file.png) no-repeat center 4px transparent;
|
|
}
|
|
i.gear{
|
|
background: url(../images/icons/gear.png) no-repeat center 4px transparent;
|
|
}
|
|
i.next{
|
|
background: url(../images/icons/next.png) no-repeat center 4px transparent;
|
|
}
|
|
|
|
|
|
/* == Top Section == */
|
|
html,body{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.header{
|
|
position: absolute;
|
|
top: 10px;
|
|
width: 100%;
|
|
z-index: 9;
|
|
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
|
filter: Alpha(Opacity=100);/* IE 5-7 */
|
|
-moz-opacity: 1; /* Netscape */
|
|
-khtml-opacity: 1; /* Safari 1.x */
|
|
opacity: 1; /* Good browsers */
|
|
|
|
-webkit-transition: all 0.5s ease-in-out;
|
|
-moz-transition: all 0.5s ease-in-out;
|
|
-ms-transition: all 0.5s ease-in-out;
|
|
-o-transition: all 0.5s ease-in-out;
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
.header:after{
|
|
content: " ";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
body.popup .header{
|
|
margin-top: -40px;
|
|
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: Alpha(Opacity=0);/* IE 5-7 */
|
|
-moz-opacity: 0; /* Netscape */
|
|
-khtml-opacity: 0; /* Safari 1.x */
|
|
opacity: 0; /* Good browsers */
|
|
}
|
|
h1#logo a span{
|
|
display: none;
|
|
}
|
|
h1#logo a{
|
|
display: block;
|
|
width: 114px;
|
|
height: 32px;
|
|
background: url(../images/logo.png) no-repeat center center transparent;
|
|
margin: 0 10px;
|
|
}
|
|
h1#logo a:hover{
|
|
border: 0;
|
|
}
|
|
.align-left{
|
|
float: left;
|
|
}
|
|
.align-right{
|
|
float: right;
|
|
}
|
|
#subscriber {
|
|
position: absolute;
|
|
right: 10px;
|
|
}
|
|
a.popup-trigger {
|
|
float: right;
|
|
font-size: 13px;
|
|
text-decoration: none;
|
|
margin-right: 10px;
|
|
color: #fff;
|
|
}
|
|
a.popup-trigger:hover{
|
|
text-decoration: underline;
|
|
}
|
|
.popup-form {
|
|
background: #fff;
|
|
right: 0;
|
|
top: -10px;
|
|
width: 300px;
|
|
}
|
|
.popup-form a.close-popup {
|
|
color: #aaa;
|
|
font-size: 24px;
|
|
text-decoration: none;
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 8px;
|
|
line-height: 0.5em;
|
|
}
|
|
.popup-form a.close-popup:hover{
|
|
color: #333;
|
|
border: 0;
|
|
}
|
|
.popup-form form {
|
|
padding: 22px;
|
|
}
|
|
.popup-form form input{
|
|
width: 87%;
|
|
}
|
|
.popup-form form .btn {
|
|
width: 100%;
|
|
}
|
|
#background{
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/* == Main Page Section== */
|
|
.page{
|
|
position: absolute;
|
|
clip: rect(0px 0px 0px 0px);
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background: none rgba(255,255,255,0.8);
|
|
z-index: 99;
|
|
display: table;
|
|
}
|
|
/* lt IE 9 bug fix */
|
|
.ie7 .page, .ie8 .page{
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY1QzEzMDlENjE2MzExRTM5MTgyRkQ3MTU2QzdBMzkyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjY1QzEzMDlFNjE2MzExRTM5MTgyRkQ3MTU2QzdBMzkyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjVDMTMwOUI2MTYzMTFFMzkxODJGRDcxNTZDN0EzOTIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjVDMTMwOUM2MTYzMTFFMzkxODJGRDcxNTZDN0EzOTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4zwFoKAAAAEElEQVR42mL6////GYAAAwAJ0gPMHnRekwAAAABJRU5ErkJggg==);
|
|
}
|
|
#main-page {
|
|
clip: auto;
|
|
position: fixed;
|
|
background: none transparent;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
z-index: 5;
|
|
}
|
|
#main-page .wrap{
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
padding-bottom: 50px;
|
|
}
|
|
.main-tagline {
|
|
font-family: 'bebas_neueregular', Arial, Helvetica, Sans-serif;
|
|
color: #fff;
|
|
font-size: 224px;
|
|
line-height: 1em;
|
|
padding: 0;
|
|
letter-spacing: -.04em;
|
|
overflow: hidden;
|
|
font-weight: normal;
|
|
text-shadow: 0px 0px 30px rgba(0,0,0,0.3);
|
|
margin: 0;
|
|
|
|
-webkit-transition: all 0.5s ease-in-out;
|
|
-moz-transition: all 0.5s ease-in-out;
|
|
-ms-transition: all 0.5s ease-in-out;
|
|
-o-transition: all 0.5s ease-in-out;
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
body.popup h2.main-tagline{
|
|
padding-bottom: 40px;
|
|
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: Alpha(Opacity=0);/* IE 5-7 */
|
|
-moz-opacity: 0; /* Netscape */
|
|
-khtml-opacity: 0; /* Safari 1.x */
|
|
opacity: 0; /* Good browsers */
|
|
}
|
|
#countdown {
|
|
margin-top: -20px;
|
|
display: block;
|
|
|
|
-webkit-transition: all 0.5s ease-in-out;
|
|
-moz-transition: all 0.5s ease-in-out;
|
|
-ms-transition: all 0.5s ease-in-out;
|
|
-o-transition: all 0.5s ease-in-out;
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
body.popup #countdown{
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
|
filter: Alpha(Opacity=0);/* IE 5-7 */
|
|
-moz-opacity: 0; /* Netscape */
|
|
-khtml-opacity: 0; /* Safari 1.x */
|
|
opacity: 0; /* Good browsers */
|
|
}
|
|
.ds-element {
|
|
color: #fff;
|
|
display: inline-block;
|
|
width: 70px;
|
|
height: 70px;
|
|
border: 2px solid #fff;
|
|
margin: 0px 4px;
|
|
border-radius: 100%;
|
|
}
|
|
.ds-element-value {
|
|
font-size: 30px;
|
|
font-family: 'bebas_neueregular', Arial, Helvetica, Sans-serif;
|
|
margin-top: 2px;
|
|
font-size: 30px;
|
|
}
|
|
.ds-element-title {
|
|
position: relative;
|
|
font-size: 12px;
|
|
top: 42px;
|
|
}
|
|
|
|
|
|
|
|
/* == About & Contact Us Section == */
|
|
a.close-this {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
color: #fff;
|
|
border: 2px solid #fff;
|
|
display: block;
|
|
padding: 0px 10px;
|
|
text-decoration: none;
|
|
font-size: 30px;
|
|
}
|
|
a.close-this:hover{
|
|
border: 2px solid #333;
|
|
color: #333;
|
|
}
|
|
.page-container {
|
|
width: 1003px;
|
|
position: absolute;
|
|
height: 80%;
|
|
top: 10%;
|
|
right: 0;
|
|
}
|
|
.wrap aside {
|
|
float: right;
|
|
width: 305px;
|
|
margin: 0px 17px 0 17px;
|
|
}
|
|
.wrap article{
|
|
float: right;
|
|
width: 600px;
|
|
margin: 0 17px 30px 17px;
|
|
}
|
|
h2.section-title {
|
|
margin-top: 0;
|
|
border-bottom: 3px solid #333;
|
|
padding-bottom: 10px;
|
|
}
|
|
aside iframe {
|
|
height: 383px;
|
|
width: 305px;
|
|
margin-top: 84px;
|
|
}
|
|
/* -- Form Style -- */
|
|
::-webkit-input-placeholder { /* WebKit browsers */
|
|
color: #888;
|
|
}
|
|
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
|
color: #888;
|
|
}
|
|
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
color: #888;
|
|
}
|
|
:-ms-input-placeholder { /* Internet Explorer 10+ */
|
|
color: #888;
|
|
}
|
|
input.textfield{
|
|
font: 18px 'Open Sans', Arial, Helvetica, sans-serif, serif;
|
|
font-weight: normal;
|
|
background: none transparent;
|
|
border: 1px solid #333;
|
|
color: #000;
|
|
outline: none;
|
|
line-height: 1em;
|
|
padding: 7px 15px;
|
|
width: 400px;
|
|
margin: 0 0 10px 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
input.textfield:hover,
|
|
input.textfield:focus{
|
|
outline: none;
|
|
border-color: #9ecaed;
|
|
box-shadow: 0 0 6px #9ecaed;
|
|
}
|
|
|
|
textarea.textarea{
|
|
font: 18px 'Open Sans', Arial, Helvetica, sans-serif, serif;
|
|
font-weight: normal;
|
|
background: none transparent;
|
|
border: 1px solid #333;
|
|
color: #000;
|
|
outline: none;
|
|
line-height: 1em;
|
|
padding: 7px 15px;
|
|
width: 400px;
|
|
height: 100px;
|
|
margin: 0 0 4px 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
textarea.textarea:hover,
|
|
textarea.textarea:focus{
|
|
outline: none;
|
|
border-color: #9ecaed;
|
|
box-shadow: 0 0 6px #9ecaed;
|
|
}
|
|
button::-moz-focus-inner {
|
|
border:0;
|
|
padding:0;
|
|
}
|
|
.btn {
|
|
font: 18px 'Open Sans', Arial, Helvetica, sans-serif, serif;
|
|
font-weight: normal;
|
|
border: 3px solid #333;
|
|
background: none #fff;
|
|
padding: 5px 15px;
|
|
margin: 0;
|
|
color: #333;
|
|
cursor: pointer;
|
|
outline: none 0;
|
|
text-transform: lowercase;
|
|
text-decoration: none;
|
|
|
|
-webkit-transition: all 0.25s ease-in-out;
|
|
-moz-transition: all 0.25s ease-in-out;
|
|
-ms-transition: all 0.25s ease-in-out;
|
|
-o-transition: all 0.25s ease-in-out;
|
|
transition: all 0.25s ease-in-out;
|
|
}
|
|
|
|
.btn:hover{
|
|
background: none #333;
|
|
color: #fff;
|
|
}
|
|
|
|
form .btn {
|
|
width: 432px;
|
|
}
|
|
|
|
.message {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
.error {
|
|
color: #c11;
|
|
display: inline-block;
|
|
padding: 5px 15px;
|
|
}
|
|
.info {
|
|
color: #1c1;
|
|
display: inline-block;
|
|
padding: 5px 15px;
|
|
}
|
|
@keyframes shake{
|
|
0% { transform: translate(3px, 0); }
|
|
50% { transform: translate(-3px, 0); }
|
|
100% { transform: translate(0, 0); }
|
|
}
|
|
@-moz-keyframes shake{
|
|
0% { -moz-transform: translate(3px, 0); }
|
|
50% { -moz-transform: translate(-3px, 0); }
|
|
100% { -moz-transform: translate(0, 0); }
|
|
}
|
|
@-webkit-keyframes shake {
|
|
0% { -webkit-transform: translate(3px, 0); }
|
|
50% { -webkit-transform: translate(-3px, 0); }
|
|
100% { -webkit-transform: translate(0, 0); }
|
|
}
|
|
.shake {
|
|
animation-name: shake;
|
|
animation-duration: 150ms;
|
|
animation-iteration-count: 2;
|
|
animation-timing-function: linear;
|
|
|
|
-moz-animation-name: shake;
|
|
-moz-animation-duration: 150ms;
|
|
-moz-animation-iteration-count: 2;
|
|
-moz-animation-timing-function: linear;
|
|
|
|
-webkit-animation-name: shake;
|
|
-webkit-animation-duration: 150ms;
|
|
-webkit-animation-iteration-count: 2;
|
|
-webkit-animation-timing-function: linear;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* == Footer Section == */
|
|
.nav {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
width: 300px;
|
|
z-index: 105;
|
|
}
|
|
.menu {
|
|
clip: rect(0px 0px auto 0px);
|
|
position: absolute;
|
|
bottom: 43px;
|
|
left: 0;
|
|
margin: 0;
|
|
}
|
|
.menu a{
|
|
font-size: 20px;
|
|
color: #333;
|
|
display: inline-block;
|
|
background: none #fff;
|
|
text-decoration: none;
|
|
padding: 10px 20px;
|
|
margin-bottom: 1px;
|
|
}
|
|
.menu a:hover{
|
|
background: none #333;
|
|
color: #fff;
|
|
border: 0;
|
|
}
|
|
a.nav-trigger{
|
|
display: inline-block;
|
|
width: 56px;
|
|
height: 40px;
|
|
background: url(../images/menu.png) no-repeat center center transparent;
|
|
}
|
|
a.nav-trigger:hover{
|
|
border: 0;
|
|
}
|
|
.nav-wrap {
|
|
width: 56px;
|
|
}
|
|
.nav-wrap.hover a.nav-trigger{
|
|
background-color: #333;
|
|
}
|
|
|
|
footer {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 5px;
|
|
z-index: 999;
|
|
}
|
|
.social-links {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
.social-links li {
|
|
display: inline;
|
|
}
|
|
a.icon {
|
|
display: inline-block;
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
a.icon:hover {
|
|
background-color: #333;
|
|
border: 0;
|
|
}
|
|
a.aim{
|
|
background: url(../images/social_icons/aim.png) no-repeat center center transparent;
|
|
}
|
|
a.amazon{
|
|
background: url(../images/social_icons/amazon.png) no-repeat center center transparent;
|
|
}
|
|
a.behance{
|
|
background: url(../images/social_icons/behance.png) no-repeat center center transparent;
|
|
}
|
|
a.deviantart{
|
|
background: url(../images/social_icons/deviantart.png) no-repeat center center transparent;
|
|
}
|
|
a.dribbble{
|
|
background: url(../images/social_icons/dribbble.png) no-repeat center center transparent;
|
|
}
|
|
a.facebook{
|
|
background: url(../images/social_icons/facebook.png) no-repeat center center transparent;
|
|
}
|
|
a.ffffound{
|
|
background: url(../images/social_icons/ffffound.png) no-repeat center center transparent;
|
|
}
|
|
a.flickr{
|
|
background: url(../images/social_icons/flickr.png) no-repeat center center transparent;
|
|
}
|
|
a.forrst{
|
|
background: url(../images/social_icons/forrst.png) no-repeat center center transparent;
|
|
}
|
|
a.lastfm{
|
|
background: url(../images/social_icons/lastfm.png) no-repeat center center transparent;
|
|
}
|
|
a.picasa{
|
|
background: url(../images/social_icons/picasa.png) no-repeat center center transparent;
|
|
}
|
|
a.pinterest{
|
|
background: url(../images/social_icons/pinterest.png) no-repeat center center transparent;
|
|
}
|
|
a.rss{
|
|
background: url(../images/social_icons/rss.png) no-repeat center center transparent;
|
|
}
|
|
a.skype{
|
|
background: url(../images/social_icons/skype.png) no-repeat center center transparent;
|
|
}
|
|
a.tumblr{
|
|
background: url(../images/social_icons/tumblr.png) no-repeat center center transparent;
|
|
}
|
|
a.twitter{
|
|
background: url(../images/social_icons/twitter.png) no-repeat center center transparent;
|
|
}
|
|
a.vimeo{
|
|
background: url(../images/social_icons/vimeo.png) no-repeat center center transparent;
|
|
}
|
|
a.yahoo{
|
|
background: url(../images/social_icons/yahoo.png) no-repeat center center transparent;
|
|
}
|
|
a.yelp{
|
|
background: url(../images/social_icons/yelp.png) no-repeat center center transparent;
|
|
}
|
|
a.youtube{
|
|
background: url(../images/social_icons/youtube.png) no-repeat center center transparent;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* == Mobile Device Section == */
|
|
|
|
/* ------- iPad Portrait ------- */
|
|
@media screen and (min-width: 641px) and (max-width: 767px),
|
|
screen and (min-device-width: 768px) and (max-device-width: 768px){
|
|
.wrap article {
|
|
width: 500px;
|
|
margin: 0 10px 30px 0;
|
|
}
|
|
.wrap aside {
|
|
width: 215px;
|
|
margin: 0 10px 0 17px;
|
|
}
|
|
aside iframe {
|
|
width: 100%;
|
|
}
|
|
.mCSB_container {
|
|
width: auto;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
/* ------- Smartphone Landscape ------- */
|
|
@media all and (min-width: 480px) and (max-width: 640px){
|
|
.popup-form {
|
|
border-left: 1px solid #aaa;
|
|
border-bottom: 1px solid #aaa;
|
|
border-right: 1px solid #aaa;
|
|
}
|
|
.wrap article {
|
|
width: 430px;
|
|
margin: 0 10px 30px 0;
|
|
}
|
|
.wrap aside {
|
|
width: 150px;
|
|
margin: 0px 17px 0 17px;
|
|
}
|
|
aside iframe {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* ------- Smartphone Portrait ------- */
|
|
@media all and (min-width: 320px) and (max-width: 479px){
|
|
.page-container {
|
|
width: 100%;
|
|
}
|
|
.popup-form {
|
|
border-left: 1px solid #aaa;
|
|
border-bottom: 1px solid #aaa;
|
|
border-right: 1px solid #aaa;
|
|
}
|
|
.main-tagline {
|
|
font-size: 180px;
|
|
}
|
|
.ds-element {
|
|
width: 54px;
|
|
height: 54px;
|
|
}
|
|
.ds-element-value {
|
|
margin-top: 0px;
|
|
font-size: 25px;
|
|
}
|
|
.ds-element-title {
|
|
top: 31px;
|
|
}
|
|
.wrap article {
|
|
float: left;
|
|
width: auto;
|
|
}
|
|
.wrap aside {
|
|
float: left;
|
|
width: auto;
|
|
border-top: 2px solid #333;
|
|
}
|
|
aside iframe {
|
|
margin-top: 14px;
|
|
width: 100%;
|
|
}
|
|
.mCSB_container {
|
|
margin-right: 0;
|
|
}
|
|
textarea.textarea {
|
|
width: 88%;
|
|
}
|
|
input.textfield {
|
|
width: 88%;
|
|
}
|
|
form .btn {
|
|
width: 100%;
|
|
}
|
|
} |