@font-face {
    font-family: 'quantik_font';
    src: url('./fonts/FaktFlipboard-Light.woff');
    src: url('./fonts/FaktFlipboard-Light.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'quantik_font';
    src: url('./fonts/FaktFlipboard-Medium.woff');
    src: url('./fonts/FaktFlipboard-Medium.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'quantik_font';
    src: url('./fonts/FaktFlipboard-Normal.woff');
    src: url('./fonts/FaktFlipboard-Normal.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'quantik_font';
    src: url('./fonts/FaktFlipboard-SemiBold.woff');
    src: url('./fonts/FaktFlipboard-SemiBold.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'quantik_font_two';
    src: url('./fonts/FaktFlipboardSmCon-Medium.woff');
    src: url('./fonts/FaktFlipboardSmCon-Medium.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'quantik_font_two';
    src: url('./fonts/FaktFlipboardSmCon-Normal.woff');
    src: url('./fonts/FaktFlipboardSmCon-Normal.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'quantik_font_three';
    src: url('./fonts/TiemposHeadlineWeb-Medium-32cacefe.woff');
    src: url('./fonts/TiemposHeadlineWeb-Medium-32cacefe.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'quantik_font_three';
    src: url('./fonts/TiemposTextWeb-Regular-778a301d.woff');
    src: url('./fonts/TiemposTextWeb-Regular-778a301d.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

.quantik_light {
    font-family: 'quantik_font' !important;
    font-weight: 200 !important;
}

.quantik_logo {
    height: 100px;
    width: auto !important;
}

.menu_container {
    margin-top: 10px;
}

.ui.secondary.menu .active.item {
    background: none;
}

.ui.secondary.menu .item {
    color: #878688;
    background: none;
    -webkit-transition: color 0.3s ease;  
    -moz-transition: color 0.3s ease; 
    -o-transition: color 0.3s ease; 
    -ms-transition: color 0.3s ease; 
    transition: color 0.3s ease;
}

.ui.secondary.menu .item:hover {
    color: #000000 !important;
    background: none !important;
}

.main_menu_bg {
    background-image: url('../img/main_menu_bg.png');
    background-size: 100%;
    height: 300px;
    text-align: center;
    line-height: 45px;
    font-size: 30px;
    color: white;
    font-family: 'quantik_font_three';
    font-weight: 200;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
}

.main_text_special {
    font-family: 'quantik_font_two';
    font-weight: 100;
    font-size: 34px;
}

.main_menu_bg p {
    font-size: 1em;
    flex-grow: 1;
}

.menu {
    background-color: rgba(255, 255, 255, 0.93) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-transition: box-shadow 0.35s;
    transition: box-shadow 0.35s;
}

.menu_shadow {
    -webkit-transition: box-shadow 0.35s;
    transition: box-shadow 0.35s;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.44) !important;
}

.papers {
    background-image: url('../img/papers_bg.png');
    height: 200px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 2% auto;
}

.papers p {
    text-align: center;
    padding: 50px;
    padding-top: 6%;
    //font-family: 'quantik_font';
    font-weight: 100;
}

.papers.product p {
    text-align: center;
    padding: 50px;
    padding-top: 7%;
    font-family: 'quantik_font';
    font-weight: 200;
}

.picture {
    height: 200px;
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    position: relative;
    cursor: pointer;
}

.containers {
    background-image: url('../img/containers.png');
    background-size: 100%;
    background-position: center center;
}

.species {
    background-image: url('../img/species.png');
    background-size: 100%;
    background-position: center center;
}

.title {
    height: 5%;
    text-align: center;
    //font-family: 'quantik_font';
    font-weight: 100;
    border-bottom-color: #878688;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding: 2%;
}

.title_two {
    height: 5%;
    text-align: left;
    //font-family: 'quantik_font';
    font-weight: 100;
    padding-top: 2%;
}

.text {
    text-align: justify;
    padding: 50px;
    padding-top: 6%;
    //font-family: 'quantik_font';
    font-weight: 100;
    padding: 0;
    padding-top: 2%;
    line-height: 25px;
}

.push {
    height: 50px;
}

.push_two {
    height: 136px;
}

.cards_container {
    margin-top: 4% !important;
}

.center {
    text-align: center;
}

.ferias_container {
    margin-top: 5% !important;
}

.ferias {
    height: 130px;
    margin-top: 20px !important;
    background-size: auto 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.ferias_computer {
    height: 100px;
    margin: 20px auto;
    width: 70%;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
}

.anuga {
    background-image: url('../img/anuga.png');
}

.fi {
    background-image: url('../img/fi.png');
}

.sial {
    background-image: url('../img/sial.png');
}

.gul {
    background-image: url('../img/gul.png');
}

.about_banner {
    height: 80px;
    background-image: url('../img/about.png');
    background-size: 100%;
    background-position: center center;
    border-radius: 5px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.ui.four.cards>.card {
    height: 330px;
}

.card_text {
    //font-family: 'quantik_font';
    font-weight: 100;
    text-align: center;
    flex-grow: 1 !important;
    border: none !important;
}

.direction {
    font-family: 'quantik_font';
    font-weight: 200;
    font-size: 0.9em;
}

.direction_two {
    font-family: 'quantik_font';
    font-weight: 200;
    font-size: 0.9em;
}

.sub_contact {
    font-family: 'quantik_font';
    font-weight: 200;
    font-size: 0.8em;
}

.sub {
    font-family: 'quantik_font';
    font-weight: 300;
    font-size: 0.8em;
}

.card_title {
    //font-family: 'quantik_font';
    font-weight: 100;
    text-align: center;
    flex-grow: 0 !important;
}

.image {
    flex-grow: 1 !important;
    background-color: white !important;
}

.ui.cards a.card:hover, .ui.link.card:hover, .ui.link.cards .card:hover, a.ui.card:hover {
    box-shadow: 0 4px 20px 0 #BCBDBD, 0 0 0 1px #D4D4D5;
}

figure.effect-sadie figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(to bottom, rgba(125, 87, 148, 0) 0%, rgba(64, 44, 76, 0.64) 65%);
	background: linear-gradient(to bottom, rgba(125, 87, 148, 0) 0%, rgba(64, 44, 76, 0.64) 65%);
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
	position: absolute;
	top: 50%;
	//left: 37%;
	width: 100%;
	color: rgba(255, 255, 255, 0);;
	-webkit-transition: -webkit-transform 0.35s, color 0.35s;
	transition: transform 0.35s, color 0.35s;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
        font-family: 'quantik_font' !important;
        font-weight: 400;
        font-size: 30px;
}

figure.effect-sadie h2.about {
    left: 25%;
}

figure.effect-sadie h2.product {
    left: 33%;
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
	color: #fff;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,5px,0);
	transform: translate3d(0,-50%,0) translate3d(0,5px,0);
        text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.72);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.contact_container {
    height: 400px;
    width: 260px;
    background-color: rgba(255, 255, 255, 0.93) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    border-radius: 10px;
    z-index: 1;
    -ms-transform: translate(100%, 40%);
    transform: translate(100%, 40%);
    -webkit-transform: translate(100%, 40%);
    -webkit-box-shadow: 0px 4px 34px 3px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 4px 34px 3px rgba(0,0,0,0.32);
    box-shadow: 0px 4px 34px 3px rgba(0,0,0,0.32);
    padding: 1%;
}

.contact_logo {
    height: 60px;
    width: auto;
    margin: 0 auto;
    display: block;
    margin-top: 10%;
    margin-bottom: 10%;
}

#slide_menu {
    display: none;
}

#menu {
    display: block;
}

.map_class {
    height:100%;
    width:100%;
}

.pusher {
    height: 100px;
}

.menu_contact {
    -webkit-box-shadow: 0px 2px 10px 3px rgba(0, 0, 0, 0.13) !important;
    -moz-box-shadow: 0px 2px 10px 3px rgba(0, 0, 0, 0.13) !important;
    box-shadow: 0px 2px 10px 3px rgba(0, 0, 0, 0.13) !important;
}

@media only screen and (max-width: 480px) {
    .papers {
        background-image: url('../img/papers_mobile.png') !important;
        height: 200px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
        margin: 9% auto;
    }
    
    .papers.product p {
        text-align: center;
        padding: 50px;
        padding-top: 13%;
        font-family: 'quantik_font';
        font-weight: 200;
    }
    
    .ferias {
        height: 130px;
        margin-top: 20px !important;
        background-size: 100% auto;
        background-position: center center;
        background-repeat: no-repeat;
    }
    
    .about_banner {
        background-size: auto 100%;
    }
    
    .main_menu_bg {
        background-size: auto 100%;
    }
    
    .main_menu_bg p {
        font-size: 0.8em;
    }
    
    #slide_menu {
        display: block;
    }
    
    #menu {
        display: none;
    }
    
    .push_two {
        height: 38px;
    }
    
    img.quantik_logo {
        margin: 0 auto !important;
    }
    .map_class {
        height:50%;
        width:100%;
    }
    
    .contact_container {
        height: 50%;
        width: 100%;
        background-color: rgba(255, 255, 249, 0.93) !important;
        position: relative;
        z-index: 1;
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -webkit-box-shadow: 0px 4px 34px 3px rgba(0, 0, 0, 0.32);
        -moz-box-shadow: 0px 4px 34px 3px rgba(0, 0, 0, 0.32);
        box-shadow: 0px 4px 34px 3px rgba(0, 0, 0, 0.32);
        padding: 5%;
        overflow: scroll;
    }
    
    .contact_logo {
        margin-top: 15%;
    }
    
    .index {
        height: 245px;
    }
    
    .index p {
        text-align: justify;
        padding: 10%;
    }
    
    .picture {
        background-size: auto 100%;
    }
    
    figure.effect-sadie h2 .about {
        left: 25%;
    }
    
    figure.effect-sadie h2 .product {
        left: 33%;
    }
    
}