* { box-sizing:border-box; -moz-box-sizing:border-box; }

body { background: #859DA8; color: #FFFFFF;}


/* Globals */
a { text-decoration:none; color: #000; font-weight:bold; }

.clickable { cursor:pointer; display:block; }
.clearfix:before { content:" "; display:table; }
.clearfix:after { content:" "; display:table; clear:both; }

/* Header */
header { width:100%; max-width:980px; margin:13px auto;

}
header a { display:block; margin:20px; font-size:25px; color:white; text-shadow:0 0 7px black; }
header a i.fab { vertical-align:middle; color: #FFA500; position:relative;  font-size:2em;}
header a i.fa-html5:after { content: "\f13b"; color: darkorange; width: 0.4em; display: block; overflow: hidden; position: absolute; top: 0; text-shadow:none; }


/* Nav */
nav { width:100%; max-width:980px; margin:13px auto; background: #A6B7BF; }
nav > ul { list-style:none; padding:0.5em; margin:0; }
nav > ul > li { display:inline-block; transition:background 0.25s; cursor:pointer; }
nav > ul > li.selected,
nav > ul > li:hover { background: #FFA500; }
nav > ul > li:hover > ul { display:block; }
nav > ul > li > a { display:inline-block; padding:0.5em; }
nav > ul > li > ul { display:none; list-style:none; padding:0 0.3em 0.3em; margin:0; position:absolute; background: rgba(255, 165, 0, 0.78); border-top:none; z-index:3; }
nav > ul > li > ul > li { transition:background 0.25s; }
nav > ul > li > ul > li:hover { background: #FFA500; }
nav > ul > li > ul > li > a { display:inline-block; padding:0.5em; }

/* Main section layouts */
section { width:100%; max-width:980px; margin:13px auto; padding:0; }
section article { width:100%; display:inline-block; background: #A6B7BF; padding:0 2em 1em; }
section.sidebar article { width:70%; }
section.sidebar aside { width:30%; float:right; background: #A6B7BF; padding:0 2em 1em; overflow:auto; }

/* Blog */
section .blogitem { border-bottom:1px solid #8AA1AC; }
section .blogitem img { vertical-align:top; float:left; margin:0 0.7em 0.7em 0; }
section .blogitem .date { font-style:italic; }
section .blogitem .category { border:1px solid gray; background:lightgray; border-radius:0.5em; font-size:0.9em; padding:0.1em 0.3em; }

/* Gallery */
#gallery-categories { list-style: none; padding: 0; margin: 0; }
#gallery-categories li { width: 50%; display: block; margin: 0; padding: 1em; float:left; }
#gallery-categories li a { position: relative; display:block; }
#gallery-categories li a span { position: absolute; right: 0; bottom: 0; background:darkgray; background: rgba(128, 128, 128, 0.75); padding: 0.4em; color: white; }
#gallery-categories li a img { display:block; width:100%; height:auto; }

#gallery-pager { position:relative; }
#gallery-pager ul { list-style: none; padding: 0 0 40px 0; margin: 0 0 -40px 0; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; }
#gallery-pager ul li { display:inline-block; margin:0.2em; border:1px solid transparent; }
#gallery-pager ul li.rslides_here { border-color:#fff; box-shadow: 0px 0px 7px 2px #7D868A; }
#gallery-pager ul li a { display: block; }
#gallery-pager ul li a img { display: block; }
#gallery-pager .prev { position:absolute; left:-0.3em; width:1em; height:1em; bottom:50%; margin-bottom:-0.5em; font-size:2em; z-index:2; font-family: FontAwesome; }
#gallery-pager .next { position:absolute; right:-0.3em; width:1em; height:1em; bottom:50%; margin-bottom:-0.5em; font-size:2em; z-index:2; font-family: FontAwesome; }
#gallery-pager ul.js::-webkit-scrollbar { display: none; }

#gallery-photos { position:relative; }
#gallery-photos ul li:active,
#gallery-photos ul li:target { display:block!important; }
#gallery-photos .prev { position:absolute; left:-0.3em; width:1em; height:1em; top:50%; margin-top:-0.5em; bottom:0; font-size:3em; z-index:2; font-family: FontAwesome; }
#gallery-photos .next { position:absolute; right:-0.3em; width:1em; height:1em; top:50%; margin-top:-0.5em; bottom:0; font-size:3em; z-index:2; font-family: FontAwesome; }


/*Contact form */

.form {margin-top:25px; /*background:rgba(255, 255, 255, 0.75);*/ transition:3s; transition: 0.3s;}
	::-webkit-input-placeholder {color:#A8A8A8;}
	:-moz-placeholder {color:#A8A8A8;}
	::-moz-placeholder {color:#A8A8A8;}
	:-ms-input-placeholder {color:#A8A8A8;}

.form ul {padding:0 !important;}
.form ul li {padding-left:0 !important; }
.form ul li:before {display:none;}
.form input{padding: 5px 2%;}
.form .inputText{ width: 100%; }		
.form img{ border: none !important;border-radius: 3px;margin: 0px !important;padding: 1px 0px 2px 0px; position: absolute;top: 0px; right: 0; width:100px !important; }
.form input, .form select, .form textarea {outline: 0; border: none; background-color: #E1E6EA; padding: 6px 2%;margin: 0;border-right: none;  font-size: 17px; margin-bottom: 20px; transition: 0.3s;
/* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); */ box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.11);   -moz-box-shadow:inset 1px 1px 6px rgba(0, 0, 0, 0.11);  -webkit-box-shadow:inset 1px 1px 6px rgba(0, 0, 0, 0.11); }
.form textarea{ margin-top: 5px; padding:5px 1%; width:100%; height:70px; resize:vertical; }	
/*.form input[type="radio"], .form input[type="checkbox"]  {border: none !important; background:none !important; -moz-box-shadow:none !important;  -webkit-box-shadow:none !important;  box-shadow:none !important;}*/

.form button, .form  input[type="submit"] { position:relative; width:100%; border:none; line-height: 35px; font-size: 18px; font-weight: 400; cursor:pointer;  border-radius:2px;  text-transform:uppercase; font-family: 'Oswald', sans-serif;  margin-top: -9px; outline: 0;color: #fff; background: #f50f0f; cursor: pointer; vertical-align: top; transition: 0.4s, margin-top 0.0s;}		

.form button:hover, .form  input[type="submit"]:hover  { background: #D81515; }			
.form button:active , .form  input[type="submit"]:active {}
.form button:after {content: "\f054";font-family: FontAwesome;position: absolute;right: 10px;top: 2px;font-size: 17px;color: #fff;}	

.form label {display: none ; margin-top: -20px; color:#53320C}
	.catcha {  height: 32px;  }
.form img { box-shadow: none;  -moz-box-shadow: none;  -webkit-box-shadow: none;    margin-top: 5px !important; box-shadow: 1px 1px 6px #BDBABA;}
	.inputsFull {padding:0; list-style:none !important}
	.inputsFull label {margin-top:10px;}
	.inputsFull li {width:47.5%; float:left;}
		/*.inputsFull li:nth-child(odd) {margin-left:5%; }*/
	
	/* FORM VALIDATION */
	div.formErrors{ display:none !important;}
	
	.error{background: url(/templates/client/images/asterisc.png) no-repeat right -29px !important; background-color: #F50F0F !important; color:white; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.29); transition:0.3s, background-color 0.3s !important;
	box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.26); -moz-box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.26); -webkit-box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.26);}
	.error::-webkit-input-placeholder {color:#fff;}
	.error:-moz-placeholder {color:#fff;}
	.error::-moz-placeholder {color:#fff;}
	.error:-ms-input-placeholder {color:#fff;}
	
	.required {background: url(/templates/client/images/asterisc.png) no-repeat right 2px; }
	.form label.error  {display: none !important;}
	.form select.required {background-position:right 29px top 1px; }
	.form select.error {  background-position:right 29px top -30px !important;}
	.form textarea.error{background: url(/templates/client/images/asterisc.png) no-repeat right -30px ;}
	
	/* FORM HIGHLIGHT */
	.highlight{ }
		.highlight label{ text-shadow:1px 1px 10px black;}
		.highlight-selected{ background-color:#FF0;}

@media screen and (max-width: 700px) {	
	.inputsFull li {width:100% !important; margin:0 !important;}	
	.form button {margin-top:0px;}
}


/* Footer */
footer { width:100%; max-width:980px; margin:13px auto 30px; background: #A6B7BF; text-align:center; }

/* Compucast Logo CSS */
span.compucast { font-family:sans-serif; display:inline-block; overflow:hidden; white-space:nowrap; position:relative; padding:0.5em 1.45em; width:0; color:transparent; transition:0.5s; text-align:center; border-radius:1em; line-height:1em; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
span.compucast a {color:black; font-weight:bold;}
span.compucast:before,
span.compucast:after { content:""; width:1em; height:1em; display:inline-block; border-radius:1em; transition:0.5s; position:absolute; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); top:0.3em; }
span.compucast:before { border:0.2em solid #66459C; border-right-color:transparent; left:0.4em; }
span.compucast:after { border:0.2em solid #219A31; border-left-color:transparent; right:0.4em; }
span.compucast.hover,
span.compucast:hover { width:18.8em; color:gray; background:white; background:rgba(255,255,255,0.8); }
span.compucast.hover a,
span.compucast:hover a { color:black; }
span.compucast.hover:before,
span.compucast.hover:after,
span.compucast:hover:before,
span.compucast:hover:after { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); }

/* ResponsiveSlides */
ul.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }
ul.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; }
ul.rslides li:first-child { position: relative; display: block; float: left; }
ul.rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }

/* ================================================== Media Queries ================================================== */

/* Landscape phones and smaller */
@media (max-width:550px) {
	header { text-align:center; }

	nav > ul:before { content:"[ MENU ]"; text-align:center; display:block; cursor:pointer; font-weight:bold; padding:0.5em 0.5em 1em; }
	nav > ul:hover > li,
	nav > ul.selected > li { display:inline-block; }
	nav > ul > li { display:none; width:50%; position:relative; }
	nav > ul > li > a { width:100%; }
	nav > ul > li > ul { width:100%; }

	section article { padding:0 1em 1em; }
	section.sidebar article { width:100%; }
	section.sidebar aside { width:100%; float:none; padding:0 1em; }

	footer { text-align:center; }
}

/* Portrait tablets and minis */
@media (max-width:767px) {
}

/* Landscape tablets */
@media (min-width:768px) and (max-width:979px) {
}