/* ================================================================== */

/* m. Media Queries

/* ================================================================== */

@media only screen and (min-width: 1500px) and (max-width: 1800px) {


body {
background-image: url(../imgs/background-ipad.jpg);
background-repeat: repeat-x;
font-size: 1.2em;
}



#main {
padding: 2%;
margin-top: -20px;
width: 60%;
}		

aside {
padding: 2%;
margin-top: -20px;
width: 300px;
}


/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
padding: 0;
border: none;
outline: none;
background-color: #transparent;
font-size: 12px;
}

/* nav-wrap */
#nav-wrap {
position: relative;
letter-spacing: 1px;
z-index: 99999;
margin-top: -110px;
margin-right: 200px;
margin-left: auto;
}

}



@media only screen and (min-width: 1120px) and (max-width: 1500px) {



body {
background-image: url(../imgs/background-ipad.jpg);
background-repeat: repeat-x;
font-size: 1.2em;
}



#main {
padding: 2%;
margin-top: -20px;
width: 60%;
}		

aside {
padding: 2%;
margin-top: -20px;
width: 300px;
}


/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
padding: 0;
border: none;
outline: none;
background-color: #transparent;
font-size: 12px;
}

/* nav-wrap */
#nav-wrap {
position: relative;
letter-spacing: 1px;
z-index: 99999;
margin-top: -100px;
margin-right: 200px;
margin-left: auto;
}

}





/* small screens
--------------------------------------------------------------------- */

body {
background-image: url(../imgs/background-ipad.jpg);
background-repeat: repeat-x;
font-size: 1.1em;
}

h6 {
font-size: 1.2em;
margin-top: -40px;
}

#main {
padding: 2%;
margin-top: -20px;
width:55%;
}		

aside  {
padding: 2%;
margin-right: 30px;
margin-top: -20px;
width: 300px;
zoom: .95; /* all browsers */
-moz-transform: scale(.95);  /* Firefox */
-moz-transform-origin: 0 0}

aside img {
zoom: .83; /* all browsers */
-moz-transform: scale(.83);  /* Firefox */
-moz-transform-origin: 0 0;
}

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
border: none;
outline: none;
background-color: #transparent;
font-size: 11px;
}

/* nav-wrap */
#nav-wrap {
position: relative;
letter-spacing: 1px;
z-index: 99999;
margin-top: -110px;
margin-right: 90px;
margin-left: auto;
}

.mobile-social{
display:none;
}
	
	








/* small screens
--------------------------------------------------------------------- */
@media (min-width: 981px) and (max-width: 1000px) {
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, font, img, ins, kbd, q, s, 
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, 
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td {
width: device-width;
zoom: .98; /* all browsers */
-moz-transform: scale(.98);  /* Firefox */
-moz-transform-origin: 0 0}

body {
background-image: url(../imgs/background-ipad.jpg);
background-repeat: repeat-x;
font-size: 1.1em;
}

h6 {
font-size: 13px;
margin-top: -40px;
}

#main {
padding: 2%;
margin-top: -30px;
width:55%;
}		

aside  {
padding: 2%;
margin-right: 30px;
margin-top: -30px;
width: 300px;
zoom: .95; /* all browsers */
-moz-transform: scale(.95);  /* Firefox */
-moz-transform-origin: 0 0;
margin-left: 5px;}


aside img {
zoom: .63; /* all browsers */
-moz-transform: scale(.63);  /* Firefox */
-moz-transform-origin: 0 0;
}






/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
padding: 0;
border: none;
outline: none;
background-color: #transparent;
font-size: 11px;
}

/* nav-wrap */
#nav-wrap {
position: relative;
letter-spacing: 1px;
z-index: 99999;
margin-top: -95px;
margin-right: 38px;
margin-left: auto;
}

}




/* mobile wide/smaller tablets
---------------------------------------------------------------------- */

@media  (max-width:981px) {
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, font, img, ins, kbd, q, s, 
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, 
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td {

}

body {
background-image: url(../imgs/background-ipad.jpg);
background-repeat: repeat-x;
font-size: 1.9em;
}

h6 {
color: #f8f6f2;
margin-top: -50px;
font-size: 0px;
}	

#wrapper h6 a:link {
color:#f8f6f2;	font-size: 0px;
}    

.strong {
color: #f8f6f2;
margin-top:10px;
font-size: 0px;
}


#main {
padding: 5%;
margin-top: 30px;
width: 70%;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #f8f6f2;
}		

aside {
padding: 2%;
margin-top: -50px;
width: 80%;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #f8f6f2;
margin-left: 0px;
}



/* mobile navigation
-------------------------------------------------------------------- */
#nav-wrap {
width: 290px;
margin: 0;
position: absolute;
top: -5px;
right: 10px;
}

#nav-wrap > a {
width: 48px;
height: 48px;
text-align: left;
background-color: #FF6600;
position: relative;
border: none;
float: right;
text-shadow: none;
color: transparent;
position: relative;
top: 36px;
right: 36px;
}

#nav-wrap > a:before,
#nav-wrap > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav-wrap > a:after { top: 60%; }

/* toggle buttons */
#nav-wrap:not( :target ) > a:first-of-type,
#nav-wrap:target > a:last-of-type  {
display: block;
}

/* hide menu panel */
#nav-wrap ul#nav {
height: auto;
display: none;
clear: both;
width: auto;
position: relative;
top: 48px;
right: 0px;
}

/* display menu panels */
#nav-wrap:target > ul#nav	{
display: block;
padding: 30px 20px 48px 20px;
background: #1f2024;
clear: both;
border-radius: 3px;
}

ul#nav li {
width: 92%;
display: block;
height: auto;
margin: 0 auto;
text-align: left;
}

ul#nav  li {
border-bottom: 1px solid #2D2E34;
border-bottom-style: dotted;
}

ul#nav li a {
background-image: none;
margin: 0;
padding: 0;
font-size: 17px;
margin: 15px 0;
line-height: 15px; /* reset line-height from 48px */
border: none;
}

/* !!!!!! adds down arrow !!!!!!!!!!!!!!!!!!!! */
ul#nav span:after {
left: 5px;
}

/* Sub Menu */
ul#nav ul {
position: static;
background: none;
width: 100%;
padding-left: 15px !important;

/* for transition */
opacity: 0;
}
ul#nav ul li {
width: 100%;
padding: 0;
display: list-item;
border: none;

/* for transition */
height: 0px;
overflow: hidden;
border-bottom: 1px dotted #595B6A;
}

/*On Hover  */
#nav li:hover > ul li { height: 30px; }
#nav li:hover > ul li:last-child { margin-bottom: 9px; }

/* Sub Menu Anchor links */
#nav ul li a {
white-space: normal;
padding-left: 0px !important;
color:#C0C0C0;
font-weight: bold;
font-size: 17px;
font: 17px/38px 'Roboto', Helvetica, Arial, sans-serif;
line-height: 38px; /* should be the same with li's height */
}
.social-li{
display:none !important;
}
.mobile-social{
display:flex !important;
align-items:center;
justify-content:center;
margin-top:20px;	
}
.mobile-social a{
font-size:18px !important;
color:#fff !important;
display:inline-block!important;
}
.mobile-social a + a{
margin-left:18px;
}
	
#wrapper .mobile-social a:hover{
color:#a1a1a1!important;
}
	
/* # Footer Links
================================================== */

#col1 {
float:left;
width:100%;
position:relative;
left:77%;
}
#col2 {
float:left;
width:100%;
position:relative;
left:77%;
}
#col3 {
float:left;
width:100%;
position:relative;
left:77%;
}
#col4 {
float:left;
width:100%;
position:relative;
left:77%;
}


#col5 {
float:left;
width:100%;
position:relative;
left:25%;
}
#col6 {
float:left;
width:100%;
position:relative;
left:25%;
}


#col7 {
float:left;
width:100%;
left:25%;
position:relative;
}
#col8 {
float: left;
width:100%;
left:25%;
position: relative;
}
}



/* mobile wide/smaller tablets
---------------------------------------------------------------------- */

@media only screen  and (max-width: 485px) {
html {zoom:0.45;}

@-viewport {
width: 320px;
max-width: 485px;
-moz-transform-origin: 0 0
}

label,
legend {
font-size: 9px;
}
	
.main-title ~ p,
.main-title ~ ul,
.main-title ~ li {
    font-size: 1rem;
}

body, p {
padding-top: 10px;
background-image: url(../imgs/background-mobile.jpg);
background-repeat: repeat-x;
font-size: 1.8em;
}

h6 {
color: #f8f6f2;
margin-top: -10px;
font-size: 0px;
}	

#wrapper h6 a:link {
color:#f8f6f2;	
font-size: 0px;
}    


.strong {
color: #f8f6f2;
margin-top:10px;
font-size: 0px;
}


#main {
padding: 5%;
margin-top: 40px;
width: 85%;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #f8f6f2;
margin-left: -25px;
}	

aside {
padding: 2%;
margin-top: 10px;
width: 85%;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #f8f6f2;     
margin-left: 3px;
}


input[type="text"],
input[type="password"],
input[type="email"],
input, textarea, 
select,
option {
font-size: 0.9em;

}

/* mobile navigation
-------------------------------------------------------------------- */
#nav-wrap {
width: 390px;
margin: 0;
position: absolute;
top: -5px;
right: 30px;
}

#nav-wrap > a {
width: 48px;
height: 48px;
text-align: left;
background-color: #FF6600;
position: relative;
border: none;
float: right;
text-shadow: none;
color: transparent;
position: relative;
top: 36px;
right: 36px;
}

#nav-wrap > a:before,
#nav-wrap > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav-wrap > a:after { top: 60%; }

/* toggle buttons */
#nav-wrap:not( :target ) > a:first-of-type,
#nav-wrap:target > a:last-of-type  {
display: block;
}

/* hide menu panel */
#nav-wrap ul#nav {
height: auto;
display: none;
clear: both;
width: auto;
position: relative;
top: 48px;
right: 0px;
}

/* display menu panels */
#nav-wrap:target > ul#nav	{
display: block;
padding: 30px 20px 48px 20px;
background: #1f2024;
clear: both;
border-radius: 3px;
}

ul#nav li {
width: 92%;
display: block;
height: auto;
margin: 0 auto;
text-align: left;
}

ul#nav  li {
border-bottom: 1px solid #2D2E34;
border-bottom-style: dotted;
}

ul#nav li a {
background-image: none;
margin: 0;
padding: 0;
font-size: 17px;
margin: 15px 0;
line-height: 15px; /* reset line-height from 48px */
border: none;
}

/* !!!!!! adds down arrow !!!!!!!!!!!!!!!!!!!! */
ul#nav span:after {
left: 5px;
}

/* Sub Menu */
ul#nav ul {
position: static;
background: none;
width: 100%;
padding-left: 15px !important;

/* for transition */
opacity: 0;
}
ul#nav ul li {
width: 100%;
padding: 0;
display: list-item;
border: none;

/* for transition */
height: 0px;
overflow: hidden;
border-bottom: 1px dotted #595B6A;
}

/*On Hover  */
#nav li:hover > ul li { height: 30px; }
#nav li:hover > ul li:last-child { margin-bottom: 9px; }

/* Sub Menu Anchor links */
#nav ul li a {
white-space: normal;
padding-left: 0px !important;
color:#C0C0C0;
font-weight: bold;
font-size: 17px;
font: 17px/38px 'Roboto', Helvetica, Arial, sans-serif;
line-height: 38px; /* should be the same with li's height */
}



/* # Footer Links
================================================== */

#col1 {
float:left;
width:100%;
position:relative;
left:77%;
}
#col2 {
float:left;
width:100%;
position:relative;
left:77%;
}
#col3 {
float:left;
width:100%;
position:relative;
left:77%;
}
#col4 {
float:left;
width:100%;
position:relative;
left:77%;
}

#col5 {
float:left;
width:100%;
position:relative;
left:25%;
}
#col6 {
float:left;
width:100%;
position:relative;
left:25%;
}

#col7 {
float:left;
width:100%;
left:25%;
position:relative;
}
#col8 {
float: left;
width:100%;
left:25%;
position: relative;
}
}