/*
Theme Name: Vindimas Viseu
Theme URI:
Description: Theme By Takemedia.
Author: Jorge Oliveira
Author URI: http://takemedia.pt
Version: 2
Tags: takemedia
*/

/* CSS clear */
html{margin: 0;padding: 0;height:100%;}
body{background-color: #F5F5F5;margin: 0;height:100%;font-variant-ligatures: no-common-ligatures;font-size: 14px;min-height: 700px;}
body, input, textarea{color: #222; font-family: 'Dosis', sans-serif; line-height: 1.5; }
h1, h2, h3, h4, h5, h6{font-weight: normal;clear: both;}
hr{background-color: #999;border: 0;height: 1px;margin-bottom: 1.5em;}
pre{font: 11px Monaco, monospace;line-height: 1.5;margin-bottom: 1.5em;}
code{font: 11px Monaco, monospace;}
p{margin: 4px 0 12px 0;}
a{color: #ad355c;text-decoration: none;}
a:hover{color: #532333;}
.clear{clear:both}
.b{font-weight: 700;}

/* CSS top */

h1{font-size: 20px;}
h2{font-size: 26px;margin-top: 25px;font-weight: 700;margin-bottom: 5px;}
.wrapper{min-height:700px;position:relative;min-width: 350px;height: 100%;}
#documentcontent{
    padding-bottom:40px;  /* CSS FOOTER height */
}
.pwidth{max-width:1260px;margin: 0 auto;padding:0 25px;position: relative;}

/* CSS HEDER e MENU */
#header{width: 90%;position: absolute;z-index: 999;height: calc(55% - 200px);background: #532333;padding:100px 5%;background-size: cover;background-position: center;border-bottom: 1px solid #FFF;}
.headercontent{position: relative;margin: 0 auto;}
#header .logo{float:left;padding: 0px 10px 0px 10px;}
#header .logo img{margin-top: 14px;}
.menubar{height: 60px;position: relative;z-index: 999;}
#menu{float: right;font-size: 19px;padding: 0px;margin: 0px;list-style: none;}
.menu-toggle {position: relative;float: right;padding: 7px 10px 4px 10px;background-color: transparent;background-image: none;border: 1px solid transparent;border-radius: 4px;border-color: #ddd;cursor: pointer;margin: 18px 0px 8px 0px;display: none;}
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}
.menu-toggle .icon-bar {display: block;width: 22px;height: 2px;border-radius: 1px;background-color: #888;margin-bottom: 4px;}
.menuiten{float:left;position: relative;font-style: normal;}
.menuiten a{color:#000;display: block;padding: 18px 30px;}
#menu .menuiten:hover{background: #fff;}
#menu .menuiten:hover a{color:#000;}
#header .active{background: #FFF;}
#header .active a{color:#000 !important;}
#header .active a:hover{color:#000;}
.mobile{background-color: rgba(0,0,0,0.8);padding: 10px 25px;top: 60px;right: 0px;position: absolute;display: none;}
.mobile .menuiten{float: none;height: auto;}
.mobile .submenu{position: relative;}
.submenu{list-style: none;position: absolute;background: #fff;padding: 5px 0px;font-size: 12px;display: none;width: 100%;}
#menu .menuiten .submenu a{color:#808183;padding: 4px 18px;}
#menu .menuiten .submenu a:hover{background: #fff;color:#000;font-weight: 700;color:#E40F5B;}
.form_error{background-color: #ffcccc;}
.left{float: left;}
.right{float: right;}
#footer{position:absolute;bottom:0;width:100%;padding:5px 0px;height:25px;font-size: 9px;color:#000;font-style: normal;}
#back-to-top {position: fixed;bottom: 40px;right: 40px;z-index: 9999;width: 32px;height: 32px;text-align: center;line-height: 30px;background: #f5f5f5;color: #444;cursor: pointer;border: 0;border-radius: 2px;text-decoration: none;transition: opacity 0.2s ease-out;opacity: 0;}
#back-to-top:hover {background: #e9ebec;}
#back-to-top.show {opacity: 1;}
#load{position: fixed;width: 100%;height:100%;background-repeat: no-repeat; background-position: center;background-color: #ddd;z-index: 9999;}
#load .uil-ring-css{position: absolute;top:50%;left:50%;margin-top: -120px;margin-left: -120px;}


/* CSS geral */

.shadow{width: 100%;height: 100%;position: absolute;z-index: 0;top:0;left: 0;}
#header .shadow{background: rgba(56,18,46,0.35);}
#header .data{font-size: 30px;}
.highlights .leftevent .shadow{background: rgba(0,0,0,0.55);}
.sublogo{margin-top: 20px;}
.logos{position: absolute;top:20px;}
.lefthead{float: left;width:50%;position: relative;}
.righthead{float: right;width:50%;position: relative;height:100%}
.righthead .arrow{width: 30%;text-align: right;float:right;height:100%;display: flex;
  justify-content: center;
  flex-direction: column;}
.righthead .arrow svg{width:100%;height: auto;}
.firstevent{font-size: 70px;color:#fff;font-weight: 700;}
.events{height: 45%;width: 100%;position: absolute;top:55%;}
.leftevent{width: 40%;float: left;height: calc(100% - 100px);background: #0075b8;padding: 50px 5%;background-size: cover;}
.rightevent{width:40%;float: right;height: calc(100% - 100px);background: #E40F5B;padding: 50px 5%;background-size: cover;}
.secondevent{font-size: 55px;position: relative; color: #fff;}
.events .arrow svg{width: 50%;}
.highlights{padding: 0px;}
.leftevent a{color: #000;}
.highlights .leftevent{padding: 0px;width: 50%;height: 100%;}
.highlights .rightevent{padding: 0px;width: 50%;height: 100%;}
.highlight1{float: left;width:50%;height: 100%;background-size: cover;background-position: center;position: relative;}
.highlight2{float: right;width: 50%;height: 100%;background-size: cover;background-position: center;position: relative;}
.highdes{position: absolute;bottom: 0px;width: 100%;}
.hightitle{background: #fff;width: 90%;padding: 20px 5%;font-weight: 700;font-size: 16px;height: 40px;}
.highdate{width: 90%;padding: 5px 5%;font-size: 22px;color:#fff;}
.rightevent .highlight1{padding: 20px 5%;width: 40%;height: calc(100% - 40px)}
.rightevent .highlight2{padding: 20px 5%;width: 40%;height: calc(100% - 40px)}
.arrow{position: relative;}
.highlights .arrow{float: none;width: 100%;height: auto;text-align: right;}
.highlights .arrow svg{width: 80px;height: auto;}
.data{color:#fff;position: relative;}


.highlight2 .hightitle{background-color: #f9f9f9}

/* CSS mobile */
@media (max-width: 950px){
    
    .secondevent{font-size: 32px;}
}

@media (max-width: 750px){
    .highlights .leftevent{width: 100%;float: none;}
    .highlights .rightevent{width: 100%;float: none;}
    #header .data{font-size: 15px;}
     .firstevent{font-size: 24px;color:#fff;font-weight: 700;}
    
}

@media (max-width: 450px){    
      .firstevent{font-size: 24px;color:#fff;font-weight: 700;}
      .hightitle{font-size: 12px;}
      .righthead .arrow svg{width: 100%;height: auto;}
      #header .data{font-size: 15px;}
}