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

body{ color:#777; font-family:'Ubuntu',sans-serif}

p{margin:10px 0; line-height:19px}
/* Globals */
a{text-decoration:none; color:#000; font-weight:bold}

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

/* Header */
header{width:100%; max-width:1042px; margin:0px auto}
header a{display:block; margin:20px; font-size:25px; color:white; text-shadow:0 0 7px black}
header a i.fa{vertical-align:middle; color:#FFA500; position:relative}
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}

/* Footer */
footer{width:100%; /* max-width:980px; */ margin:0 auto; background:#222; padding:1.5% 2% 0; text-align:center}

/* 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}
/*COMPUCAST LOGO CSS start-----------------------------*/
.old-ie{display:none}
.cc2:hover{fill:rgba(0,0,0,0.4)}

.compucast{position:relative; margin:0 auto; width:58px; height:64px;  color:black;  border-radius:2px; overflow:hidden; transition:0.5s 1.4s}
.compucast.dark{color:white}
.logo1, .logo2, .old-ie{position:absolute; top:50%; right:10px; margin-top:-13px; opacity:1.5; transition:0s}
.compucast:hover, .compucast_hover{width:225px; background:rgba(0,0,0,0.04); box-shadow:1px 7px 16px -7px rgba(0,0,0,0.3); -moz-box-shadow:1px 7px 16px -7px rgba(0,0,0,0.3); -webkit-box-shadow:1px 7px 16px -7px rgba(0,0,0,0.3); box-shadow:1px 7px 16px -7px rgba(0,0,0,0.3); transition:0.3s 0s}
.dark:hover{/* background:rgba(0,0,0,0.61); */}
.compucast p{position:absolute; left:-200px; margin:0 0 0 10px; line-height:21px; padding:11px 0; font-family:Arial,"Times New Roman",Times,serif; font-size:12px; /* color:rgba(128,128,128,0.26); */ opacity:0; transition:0.5s 1.4s}
.compucast a{font-size:14px; font-weight:bold; color:#000; text-decoration:none}
.compucast:hover p{left:0px; opacity:1; transition:0.4s 0.0s}
.compucast.dark:hover p{color:#AFACAC}
.compucast.dark a{font-size:14px; color:#fff}

/*color classes:colored, white and black*/
.purple{fill:#7F3F98}
.green{fill:#00A14B}
.black1{fill:rgba(0,0,0,1)}
 .black2{fill:rgba(0,0,0,0.5)}
.white1{fill:rgba(255,255,255,1)}
 .white2{fill:rgba(255,255,255,0.5)}
/*COMPUCAST LOGO CSS end-------------------------------*/
/* ================================================== 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){}

/*HOME PAGE*/
header img{
    width: auto !important;
    /* height: auto; */
    float: none !important;
    text-align: center;
    display: block;
    margin: 0 auto;
}
h2{ color:#811515; font-weight:bold;  font-size:30px;  margin:0}

h1{ color:#fff;  text-shadow:1px 1px 1px #000; font-family:'Fjalla One',sans-serif;  font-size:67px;  bottom:0;  z-index:9;  margin:0; text-align: center; }
@media screen and (max-width:1042px){h1{padding:0 2%; font-size:54px; font-size:6.6vw}
}
@media screen and (max-width:767px){h1{font-size:40px; font-size:6.7vw}
h2{font-size:23px; font-size:3.5vw}
}
@media screen and (max-width:600px){h1{font-size:20px; font-size:6.7vw}
h2{font-size:22px; font-size:5.5vw}
}
a{ color:#666}
article{ max-width:1042px;  margin:0 auto;  box-shadow:0px 11px 31px -9px #000;  padding:30px 0 10px}
.dynamic-headers{ max-width:100%;  border-top:25px solid #811515;  border-bottom:10px solid #811515;  margin:0;  position:relative}
.home figure{ margin:0;  display:inline-block;  position:relative;  width:auto;  height:auto;  width:47%;  border:5px solid #fff;  box-shadow:0px 1px 11px 1px #777;vertical-align: top;}
.home figcaption{ position:absolute;  bottom:4px;  width:100%;  text-align:center;  background:#000;  background:rgba(0,0,0,0.49);  padding:2%;  color:#fff}
.home figcaption:after{ content:"\f101";  font-family:fontawesome;  position:relative;  left:6px;  font-size:21px;  top:2px;  line-height:0}
.home table{ margin-bottom:60px; width: 100%;}
.home table div{ display:inline-block;  vertical-align:top;  max-width:50%;  padding-left:3%}
@media screen and (max-width:1042px){article{padding:30px 2% 0px; box-shadow:none}
}

@media screen and (max-width:700px){body{font-size:14px}
}
@media screen and (max-width:600px){ article{padding-top:25px}
.home table{margin-bottom:0px}
.home figure{100%; width:100%; margin-bottom:30px}
.home figure img{max-width:100% !important}
.rslides li img{min-height:180px}
.home table div{max-width:100%}
}
@media screen and (min-width:601px){
.lt-ie9 .home figure{width:30%;}
}