Project

General

Profile

1 36014 argiro.kok
/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */
2
3
/*
4
 * Responsive Style Sheet - Defines base styles for mobile devices
5
 */
6
7
8
/* Responsive Utility Classes
9
----------------------------------------------------------------------------------------------------*/
10
11
.hidden-desktop { display: none; }
12
13
/* Only Phones */
14
@media (max-width: 767px) {
15
	.hidden-desktop { display: block; }
16
	.hidden-phone { display: none; }
17
}
18
19
/* Only Tablets (Portrait) */
20
@media (min-width: 768px) and (max-width: 959px) {
21
	.hidden-desktop { display: block; }
22
	.hidden-tablet { display: none; }
23
}
24
25
26
/* Responsive Content
27
----------------------------------------------------------------------------------------------------*/
28
29
#header-responsive { display: none; }
30
31
32
/* Layout Breakpoints
33
----------------------------------------------------------------------------------------------------*/
34
35
/* All except large Screens */
36
@media (max-width: 1220px) {
37
38
	#banner { display: none; }
39
40
}
41
42
/* Only Phones and Tablets (Portrait) */
43
@media (max-width: 959px) {
44
45
	/* Layout */
46
	#maininner,
47
	#sidebar-a,
48
	#sidebar-b {
49
		width: 100%;
50
		left: auto;
51
		right: auto;
52
	}
53
54
}
55
56
/* Only Tablets (Portrait) and Phones (Landscape) */
57
@media (min-width: 480px) and (max-width: 959px) {
58
59
	/* Layout */
60
	.width16,
61
	.width20,
62
	.width25,
63
	.width40,
64
	.width60,
65
	.width75,
66
	.width80 { width: 50%; }
67
68
	.width50 .width50 { width: 100%; }
69
70
	.sidebars-1 #sidebar-a .width100,
71
	.sidebars-1 #sidebar-b .width100 { width: 50%; }
72
73
	#sidebar-a .width100:nth-child(odd):last-child,
74
	#sidebar-b .width100:nth-child(odd):last-child,
75
	.width20:nth-child(odd):last-child { width: 100%; }
76
77
	.sidebars-2 #sidebar-a,
78
	.sidebars-2 #sidebar-b { width: 50%; }
79
	.sidebars-2.sidebar-b-left:not(.sidebar-a-left) #sidebar-a { float: right; } /* Keep Sidebar order */
80
81
	.grid-gutter > .grid-box:nth-child(n+3) > * { margin-top: 30px; }
82
83
	/* Tools */
84
	.width50 .align-left,
85
	.width50 .alignleft,
86
	.width50 .align-right,
87
	.width50 .alignright {
88
		margin: 0 auto 15px auto;
89
		float: none;
90
	}
91
92
}
93
94
/* Only Phones */
95
@media (max-width: 767px) {
96
97
	/* Layout */
98
	.width33,
99
	.width66 { width: 100%; }
100
101
	/* Header */
102
	#header-responsive { display: block; }
103
104
	#header-responsive .logo,
105
	#header-responsive .searchbox {
106
		display: inline-block;
107
		width: 45%;
108
		vertical-align: middle;
109
	}
110
111
	#header-responsive .logo { margin-right: 10%; }
112
113
	#header-responsive .searchbox {
114
		-moz-box-sizing: border-box;
115
		-webkit-box-sizing: border-box;
116
		box-sizing: border-box;
117
	}
118
119
	/* Menu */
120
	.menu-responsive {
121
		width: 100%;
122
		font-size: 14px;
123
	}
124
125
126
}
127
128
/* Only Phones (Landscape) */
129
@media (min-width: 480px) and (max-width: 767px) {
130
}
131
132
/* Only Phones (Portrait) */
133
@media (max-width: 479px) {
134
135
	/* Base */
136
	body { word-wrap: break-word; }
137
138
	/* Layout */
139
	.width16,
140
	.width20,
141
	.width25,
142
	.width40,
143
	.width50,
144
	.width60,
145
	.width75,
146
	.width80 { width: 100%; }
147
148
	.grid-gutter > .grid-box:nth-child(n+2) > * { margin-top: 30px; }
149
150
	/* Tools */
151
	.align-left,
152
	.alignleft,
153
	.align-right,
154
	.alignright {
155
		margin: 0 auto 15px auto;
156
		float: none;
157
	}
158
159
}
160
161
162
/* Fix Viewport for IE10 Snap Mode
163
----------------------------------------------------------------------------------------------------*/
164
165
@media (max-width: 400px) {
166
	@-ms-viewport{
167
		width: 320px;
168
	}
169
}