/* html5doctor.com Reset v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) - http://cssreset.com 
    html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
    body{line-height:1}
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,canvas{display:block}
    nav ul{list-style:none}
    blockquote,q{quotes:none}
    blockquote:before,blockquote:after,q:before,q:after{content:none}
    a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
    ins{background-color:#ff9;color:#000;text-decoration:none}
    mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
    del{text-decoration:line-through}
    abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
    table{border-collapse:collapse;border-spacing:0}
    hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
    input,select{vertical-align:middle}
    nav ul{list-style:inline}
    
*/

/* ----------  page defaults ---------- */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
text-decoration:none;

}
/*a:link {text-decoration:none;}*/
html {
font-size: 100%;
scroll-behavior: smooth;
}

body {
font-family: Lato, "Segoe UI", "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 14px;
line-height: 21px;
background-color: #e5f6ff; /*#8dbdd8;*/
margin: 0 auto;
}
nav ul li { display: inline-block;}
/* ---------- table styles ---------- */
.cus-pro-tab{ width:100%; border-top:2px #9df solid;}
.cus-pro-tab td, .cus-pro-tab th{ padding:0.2em 0.6em; border-bottom:2px #9df solid; background:#ffffff;}
.cus-pro-tab th{ background:#e5f6ff;border-bottom:2px #9df solid; color:#444444; text-align:left; line-height:1.3em; font-weight: normal;}
.cus-pro-tab thead th{line-height:1.9em;}
.cus-pro-tab td{border-right:2px #9df solid;}
.cus-pro-tab th{border-left:2px #9df solid;}
/* ---------- list styles ---------- */
.zebra {border: 2px solid #9df;}
.zebra li {min-height:2em; padding: 0.2em 0.6em; display:block;}
.zebra li:nth-child(odd) {background-color: #e5f6ff;}
.zebra li:nth-child(even) {background-color: #ffffff;/*border-left: 2px solid #e5f6ff; border-right: 2px solid #e5f6ff;*/}
/* ---------- font styles ---------- */
main {font-size: 16px;}
hr{display:block;height:1px;border:0;border-top: 1px solid #e5f6ff;margin:0.5em 0;padding:0}
h1,h2,h3,hr {
clear: both;
}
#container h1 {
font-size: 36px; line-height: 48px;
padding: 12px 0;  
color: #71b8ff;
text-align:center;
margin-bottom: 2px;
text-shadow: 0px 0px 5px #71b8ff;
}
#starter {
width:100%;
height:520px;
background-image: url('images/homelogo.png');
background-position: center; 
background-repeat: no-repeat;	
}
#container h2, #storehead h2{
font-size: 18px;
line-height: 24px;
min-height: 36px ;
width: 100%;
padding: 4px 4px;
font-weight: bold;
color: #08c;
background-color:transparent;
border-bottom: 2px solid #e5f6ff;
border-top:  2px solid #e5f6ff;
margin-bottom:12px;	
}
#container h2::before, #storehead h2::before {content:"\25A0  ";}

#container h3 {
font-size: 16px;
padding: 0;
color: #08c;
margin-top: 12px;
font-weight: bold;
}

#container h4 {
font-size: 16px;
padding: 0;
color: #08c;
font-weight:bold;
}
h5.titlebox {
font-size: 16px;
height: 22px;
width:100%;
color: #fff;
background-color: #08c;
font-weight:bold;
display: block;
text-align:center;
line-height: 18px;
}
h5.titlebox span{
text-transform: uppercase;	
}
main p {
margin-bottom: 6px; font-size:16px; line-height:24px;
}
main p>a {
color:#08c; font-weight:bold; text-shadow: 0px 0px 5px #55ffff;
}
main p>a:hover {color:#007700; }

ul {

list-style:none;

}
.red {
color: #9b0a0a;

}
.w33, .w33e {width:33.33%;}
.w50, .w50e {width:50%;}
.w45, .w45e {width:48%;}
.w55 {width: 55%; max-width:55%}
.mobile {display:none;}
.tablet {display:none;}
.desktop {display:block;}
.noring {display: block;}
.ring {display: none;}
i {font-family: crammicon; font-style:normal; font-size:24px; speak: none; /*text-transform:lowercase;*/}

/*----------------------------------------*/	
/*-ASIDE --------------------------------*/
/*----------------------------------------*/
aside {
font-size:16px; 
}
	
/*-------- NAVBOX -------------------*/
.navbox {
/*width: 100%;*/
background-color:#08c;
margin: 0 0 12px ;
border-top:10px solid #08c;
border-bottom:10px solid #08c;
border-radius:10px;
}
.navbox a{
color:#08c;
display: block;
background-color: #e5f6ff; 
height: 32px; 
padding: 0;
line-height: 24px; 
text-align: left;
overflow:hidden;
}	
.navbox a:first-child {
background-color:inherit;
color: #ffffff;
height: 22px; 
padding: 0px 20px 4px 14px;
line-height: 18px; 
font-size: 16px;
}	
.navbox a:first-child span {
font-weight:bold;
text-transform: uppercase;
}
/*-------- red box --------*/
.redbox {
background-color: #be1414;
border-top:10px solid #be1414;
border-bottom:10px solid  #be1414;
border-radius:10px;
}
.redbox a{
color: #be1414;
background-color:#fde8e8;
}
div.redbox {
color: #444444;
background-color:#fde8e8;
}	
/*-------- greenbox box --------*/
.greenbox {
background-color:#138535;
border-top:10px solid #138535;
border-bottom:10px solid  #138535;
border-radius:10px;
}
.greenbox a{
color: #138535;
background-color:#e9fcef;
}	
div.greenbox {
color: #444444;
background-color:#e9fcef;
}
/*-- rightbox --*/
.rightbox {
}
.rightbox  a{
padding: 4px 20px 4px 14px;
text-align: right;
border-bottom: 1px solid white;
}
.rightbox  a:first-child {
padding: 0px 20px 4px 14px;
}
.rightbox a:hover {
padding-right:2px;
}
.rightbox a:hover::before {content: none;}
.rightbox a:hover::after {content: "  \25B6"; } 
/*-- laftbox --*/
.leftbox {
}
.leftbox  a{
padding: 4px 0 4px 20px;
text-align: left;
border-bottom: 1px solid white;
}
.leftbox  a:first-child {
padding: 0px 20px 4px 20px;
}
.leftbox a:hover {
padding-left: 2px;
}
.leftbox a:hover::after {content: none;}
.leftbox a:hover::before {content: "\25C0  ";}

.navbox a:first-child:hover{padding-left:20px; padding-right:20px;}
.navbox a:first-child:hover::before {content: none; }
.navbox a:first-child:hover::after {content: none; }
.textbox {
background-color:#e5f6ff;
margin: 0 0 12px ;
border-top:10px solid #08c;
border-bottom:10px solid #08c;
border-radius:10px;
}	
.textbox div {padding: 10px; font-size:14px;}	
/*----------------------------------------*/  	
/*-HEADER --------------------------------*/
/*----------------------------------------*/
header {
color: #55ffff;
width: 100%;
}

#headerlogo {
height: 120px; 
clear:both;
background-image: url(images/logodesktop.png), linear-gradient(to right, white,#08c);
background-repeat: no-repeat, repeat;
background-color: #cccccc;
overflow: hidden;
}

header nav {
overflow:hidden;
background-color: #08c;
height: 32px;
line-height: 32px;
color: white;
width: 100%;
padding: 0;
clear: both;
}
header nav a {opacity:0.7;}
header nav a:hover {opacity:1;}

#langnav {overflow:hidden; background-color: transparent; border: 0; height:40px;padding: 6px 12px;}
#langnav a {float:right;width:40px; height:40px;text-align: center; display:inline-block;}

#shopnav { height:40px; background-color: transparent; padding:6px 20px;}
#shopnav a {float:right; text-align: left;color:white; height:40px; display:inline-block; vertical-align:middle;}
/* #shopnav a:last-child {float:right; text-align: right; padding: 4px 4px; color: white; font-weight: bold; width:120px; overflow: hidden;} */

#sitenav {border-top: 1px solid #75c5d9;border-bottom: 1px solid #75c5d9; height:40px; text-align:left;}
#sitenav a{	
    font-size: 16px;
	font-weight: normal;
	color: white;
	line-height: 38px;
	text-decoration: none;
/*	text-transform: uppercase; */
	display: inline-block;
	padding: 0 16px;
   }

/*----------------------------------------*/	
/*-FOOTER --------------------------------*/
/*----------------------------------------*/
footer {
text-align: center;
background-color: #08c;
color: #ffffff; 
font-size: 14px;
padding-bottom: 40px;
height: 400px;
}

footer a {opacity:0.7; color:inherit;}
footer a:hover {opacity:1;}

footer>div {padding: 24px 0;width:100%;}
footer>div>nav{float: left;width: 25%; height: 160px;}
footer>div>nav>a {text-transform: lowercase;}
footer>div>nav>span {font-weight:bold; text-transform:uppercase;}
footer div a {
font-weight: normal;
color: white;
line-height: 22px;
text-decoration: none;
display: block;
padding: 1px 1px; 
}
footer > nav {
	height:40px; width:100%;
	font-size: 16px;
	color: white;
	line-height: 38px;
	display: inline-block;
	padding: 0 40px;
   }
	

footer>p {text-align:center; padding: 10px 0;}	
footer>p>img {padding:6px; opacity: 0.7}	
footer>p>i {padding:0 10px; opacity: 0.7}
.hideme {
display: none;
}		
/* ---------- add your code below ---------- */
#container {
display: block;
padding:  12px 0 ;
}
#store { 
display: block;
padding:  12px 0 ;

}
main {
float: left;
width: 60%;
margin: 0px; padding:0 18px; border:0;
}
aside { width:20%; margin:0; border:0}
aside.left  { float:left;  padding: 12px 0 0 12px}
aside.right { float:right; padding: 12px 12px 0 0}

#wrapper {
width: 960px;
margin: 0 auto;
background: #ffffff;
}
#wrapper, main, header, footer, aside, {transition: width 1s; }
aside {transition: display 1s;}


/* ---------- container nav ---------- */
.insidenav ul li {background-color: #ff9633;border-radius: 10px; height:40px; margin: 4px 0; width:100%;}
.insidenav ul li a{	float:left; text-align: left; padding-left: 16px; width:100%} 
.insidenav ul li a{	
    width:100%;
    font-size: 16px;
	font-weight: normal;
	color: #ffffff;
	line-height: 40px;
	text-decoration: none;
	display: inline;
   }
.insidenav ul li a:hover {background-color: #6bd089;border-radius: 10px; height:40px;}

.linenav { 
background-color: #e5f6ff;
height: 32px;
width: 100%;
padding: 4px 6px 8px 6px;
clear: both;
border-radius: 10px;
color: #08c;
border: 2px solid #9df;
}
.linenav a{
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	text-decoration: none;
	display: inline;
    padding: 5px 2px;  
	color: #08c;
	}
.linenav a:hover {
color: #ffffff;
}

nav.unibutton {clear:both;}
nav.unibutton a{
	display:block;
	height:40px;
	color:white;
	background-color: #ff9633;
	line-height:40px;
	padding: 0 12px;
	margin: 0 0 10px 0; 
	border-radius: 10px; 
	overflow: hidden;
}
nav.unibutton a:hover {
	background-color: #6bd089;
}
nav.unibutton.inline {clear:none;}
nav.unibutton.inline a{display:inline-block;}
/*-------------------------------*/
.enstore, .rustore, .etstore {
  display:none; 
  }
 .xxstore ul {
  list-style:none;
  } 
.enmobile, .rumobile, .etmobile {
  display:none;
  }
/* micro clearfix */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

/* #### Desktops #### */
@media screen and (min-device-width: 1024px){
  /* some CSS here */
 

@media screen and (min-width: 768px) and (max-width: 959px) {
#wrapper {width: 768px;}
aside.left  {width: 0; display:none}
main        {width:576px;}
aside.right {width:192px;}
.tablet {display: block;} .desktop {display:none;} .mobile {display:none;}
#leftside {width: 70%; margin: 0 auto;}
}  


@media screen and (min-width: 576px) and (max-width: 767px) {
#wrapper { width: 576px; }
#headerlogo {background-image: url(images/logodesktop.png), linear-gradient(to right, white,#08c);}
aside.left { display: none;width: 0}
aside.right  { display: none;width: 0}
.tablet {display: none;} .desktop {display:none;} .mobile {display:block;}
main  { padding: 0 8px; width:100%}
footer {height: 600px;}
footer>div>nav {float: left;width: 50%;text-align:left; padding-left: 40px; margin:10px 0;}
}
	
 	
@media screen and (max-width: 575px) {
#wrapper   { width: 100%; } 
#headerlogo {background-image: url(images/logomobile.png), linear-gradient(to right, white,#08c);}
aside.left { display: none;width: 0}
aside.right  { display: none;width: 0}
main { width: 100%;}

h1 {
font-size: 24px; line-height: 30px;
padding: 0;
}
#starter {
height:320px;
background-image: url('images/homelogom.png');
}
.tablet {display: none;} .desktop {display:none;} .mobile {display:block;}
.w50e, .w33e, .w45e {width:100%;}
footer {height: 600px;}
footer>div>nav {float: left;width: 50%;text-align:left; padding-left: 30px; margin:10px 0;}
} 

@media screen and (max-width: 479px) {
#wrapper   { width: 100%; } 
#headerlogo {background-image: url(images/logomobile.png), linear-gradient(to right, white,#08c);}
aside.left { display: none;width: 0}
aside.right  { display: none;width: 0}
main { width: 100%;}

h1 {
font-size: 24px; line-height: 30px;
padding: 0;
}
#starter {
height:320px;
background-image: url('images/homelogom.png');
}
.tablet {display: none;} .desktop {display:none;} .mobile {display:block;}
.w50e, .w33e, .w45e {width:100%;}
footer { height: 600px;}
footer>div>nav {float: left;width: 50%;text-align:left; padding-left: 20px; margin:10px 0;}
} 

} /*end desktop */

/* #### Tablets Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
  /* some CSS here */
#wrapper {width:100%;} 
} /*end tablet lanndscape*/

/* #### Tablets Portrait #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
  /* some CSS here */
#wrapper {width:100%;} 
aside.left  {display: none; width: 0}
aside.right {display: block;width:25%}
main {width: 72%}
.tablet {display: block;} .desktop {display:none;} .mobile {display:none;}
#leftside {width: 70%; margin: 0 auto;}
} /*end tablet portrait*/

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 640px) and (orientation: portrait){
  /* some CSS here */
.tablet {display: none;} .desktop {display:none;} .mobile {display:block;}
.noring {display: none;} .ring {display: block;} 
#wrapper   { width: 100%; } 
#headerlogo {background-image: url(images/logomobile.png), linear-gradient(to right, white,#08c);}
aside.left   { display: none;width: 0}
aside.right  { display: none;width: 0}
main { width: 100%;}

h1 {
font-size: 24px; line-height: 30px;
padding: 0;
}
#starter {
height:320px;
background-image: url('images/homelogom.png');
}
.w50e, .w33e, .w45e {width:100%;}
footer {height:600px;}
footer>div>nav {float: left;width: 50%;text-align:left; padding-left: 20px; margin:10px 0;}
  } /*end mobile portrait*/
  
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
.tablet {display: none;} .desktop {display:none;} .mobile {display:block;} 
.noring {display: none;} .ring {display: block;}
#wrapper   { width: 100%; } 
aside.left { display: none;width: 0}
aside.right  { display: none;width: 0}
main { width: 100%;}
#leftside {width: 70%; margin: 0 auto;}
h1 {
font-size: 24px; line-height: 30px;
padding: 0;
}
#starter {
height:320px;
background-image: url('images/homelogom.png');
}
footer {height:600px;}
footer>div>nav {float: left;width: 50%;text-align:left; padding-left: 20px; margin:10px 0;}
} /*end mobile landscape*/  

/* FONTS 
@font-face {
  font-family: Lato;
  src: url(fonts/Lato-Regular.woff);
  font-weight: normal;
}
@font-face {
  font-family: Lato;
  src: url(fonts/Lato-Bold.woff);
  font-weight: bold;
}
@font-face {
  font-family: Lato;
  src: url(fonts/Lato-Italic.woff);
  font-weight: normal;
  font-style: italic;
}
*/
@font-face {
  font-family: crammicon;
  src: url(fonts/crammicon.woff);
  font-weight: normal;
}