/*
Theme Name:     Dera Ramen
Theme URI:      https://www.deraramen.be/
Description:    Dera Ramen Theme
Author:         Ontwerpia
Author URI:     http://www.ontwerpia.be
Template:       framework
Version:        2.2
*/

@import url("../framework/style.css");

/* ----------------------------------------------------
	FONT FACE
------------------------------------------------------- */
@font-face {
    font-family: 'Museo Sans100';
    src: url('../dera/fonts/museosans-100-webfont.eot');
    src: url('../dera/fonts/museosans-100-webfont.eot?#iefix') format('embedded-opentype'),
         url('../dera/fonts/museosans-100-webfont.woff') format('woff'),
         url('../dera/fonts/museosans-100-webfont.ttf') format('truetype'),
         url('../dera/fonts/museosans-100-webfont.svg#museo_sans100') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Museo Sans300';
    src: url('../dera/fonts/museosans-300-webfont.eot');
    src: url('../dera/fonts/museosans-300-webfont.eot?#iefix') format('embedded-opentype'),
         url('../dera/fonts/museosans-300-webfont.woff') format('woff'),
         url('../dera/fonts/museosans-300-webfont.ttf') format('truetype'),
         url('../dera/fonts/museosans-300-webfont.svg#museo_sans300') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Museo Sans500';
    src: url('../dera/fonts/museosans-500-webfont.eot');
    src: url('../dera/fonts/museosans-500-webfont.eot?#iefix') format('embedded-opentype'),
         url('../dera/fonts/museosans-500-webfont.woff') format('woff'),
         url('../dera/fonts/museosans-500-webfont.ttf') format('truetype'),
         url('../dera/fonts/museosans-500-webfont.svg#museo_sans500') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Museo Sans700';
    src: url('../dera/fonts/museosans-700-webfont.eot');
    src: url('../dera/fonts/museosans-700-webfont.eot?#iefix') format('embedded-opentype'),
         url('../dera/fonts/museosans-700-webfont.woff') format('woff'),
         url('../dera/fonts/museosans-700-webfont.ttf') format('truetype'),
         url('../dera/fonts/museosans-700-webfont.svg#museo_sans700') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Museo Sans900';
    src: url('../dera/fonts/museosans-900-webfont.eot');
    src: url('../dera/fonts/museosans-900-webfont.eot?#iefix') format('embedded-opentype'),
         url('../dera/fonts/museosans-900-webfont.woff') format('woff'),
         url('../dera/fonts/museosans-900-webfont.ttf') format('truetype'),
         url('../dera/fonts/museosans-900-webfont.svg#museo_sans900') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* ----------------------------------------------------
	GENERAL
------------------------------------------------------- */

body {

	font: 500 14px/21px "Museo Sans300", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;	
	font-smoothing: antialiased;
	
	
}


h1, h2, h3, h4, h5, h6 {
	font-family:"Museo Sans300", Helvetica, Arial, sans-serif;
}

div#logo > .logocontainer {

	padding:0 30px;
	background-color: #fff;	
	width:100%
	
}

#logo {
	
margin-left: -30px;

}

#navigation > ul > li > a {
	font-family:"Museo Sans500", Helvetica, Arial, sans-serif;
}


#footer {
	
	margin: 40px auto 0 auto;
	width:auto;
	
} 

p {
padding: 0 0 5px 0;
}

/* Breadcrumb */

.sub_page_top {
padding-bottom:10px;
	
}

.breadcrumb {
line-height:110%;
	
}

blockquote {
background: url(images/blockquote.png) no-repeat;
padding: 0 0 20px 0px;
color: #9e9e9e;
text-indent: 30px;
}

blockquote p {margin: 15px 0px; background:none; padding:0}

.contentinsert {text-indent:-9999px;position:absolute;float:left;}
	
/* ----------------------------------------------------
	COLOR SKIN
------------------------------------------------------- */

body.red-skin{background:#FF9600; }

body.red-skin ::selection {
background: #FF9600;
}

body.red-skin h2{color: #aa2222; margin:10px 0px}
body.red-skin h3, body.red-skin h4{color: #5B5B5B;margin:10px 0px }


body.red-skin .sidebar_top{background:url(images/skin-red.png) left 0px no-repeat;}
body.red-skin .sidebar_content{background:#808080; }
body.red-skin .sidebar_bottom{background:url(images/skin-red.png) left -122px no-repeat;}
body.red-skin .content_top{background:url(images/skin-red.png) right 0 no-repeat;}
body.red-skin .content_bottom{background:url(images/skin-red.png) right -113px no-repeat;}


/* background curv image */	
body.red-skin .back-curv{background:url(images/back-curv-red.png) center top no-repeat;}
body.red-skin .back-line{background:url(images/back-line-red.png) center top repeat-x;}



body.red-skin .sidebar_content h4, body.red-skin .sidebar_content h5, body.red-skin .sidebar_content h6 {
color: #fff;
}

body.red-skin .widget ul a:hover {
color: #f76900 !important;
}

.sidebar_content, .sidebar_content .box a {
color: #dddddd;
}

.wpb_btn-danger  {
background-color: #aa2222!important;	
}
.wpb_btn-danger:hover  {
background-color: #e77927!important;	
}


.wpb_row {margin-bottom: 15px!important} 


body.red-skin h1 a, body.red-skin h2 a, body.red-skin h3 a, body.red-skin h4 a, body.red-skin h5 a, body.red-skin h6 a {color: #aa2222 !important; } 

/* content links */
body.red-skin h1 a:hover, body.red-skin h2 a:hover, body.red-skin h3 a:hover, body.red-skin h4 a:hover, body.red-skin h5 a:hover, body.red-skin h6 a:hover{ color:#fffff!important; background:#aa2222!important}

/* ----------------------------------------------------
	HOME PAGINA
------------------------------------------------------- */

.wpb_content_element {
margin-bottom: 10px!important;
}

.homebox h2{
font: 100 23px/24px 'Museo Sans500';
text-align:center;
line-height:100%!important;

}

.homebox h3{
font: 100 15px/24px 'Museo Sans300';
text-align:center;
}

.homebox .wpb_button {
margin-bottom:20px;	
}

.homebox ul li {list-style:none;line-height: 2.0;text-align: center;}

.homebox a.button {margin-bottom:5px!important}

.content .box.full-box h4{
display:none;
position:absolute;
}

.wpb_call_to_action.home-cta {
text-align:center;
position: relative;
background-color: #eeeeee;
padding: 20px;
border: 1px solid rgba(68, 68, 68, .21);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;	
}

.home-cta .wpb_call_text {
font: 100 21px/25px 'Museo Sans100';
width:100%!important;	
}

.cta_align_bottom .wpb_button {
margin-top:10px!important;	
}

.home-cta span.wpb_btn-large{
padding: 9px 55px;
color:#fff;
font-size:18px;
border-radius:5px;
background-color:#aa2222;
border:none;
}



/* ----------------------------------------------------
	SLIDER
------------------------------------------------------- */

/* Cycle Slider */


#slider .desc span.title a, #slider .desc span.title span {
padding: 5px;
display: block;
}


#slider .desc span.title, #slider .desc span.title a {
text-decoration: none;
color: #fff;
display: block;
}

#slider .desc h2.title {
background: url(images/slider-text-background.png);
font-size: 24px;
line-height: 100%;
margin: 0 0 10px 0;
}
	
/* Flex Slider */



.flexslider .desc h2.title, .flexslider .desc h2.title a {
font: 100 24px/24px "Museo Sans500", Helvetica, Arial, sans-serif; 
text-decoration: none;
color: #fff;
display: block;
padding: 0px;
}

.flexslider .desc h2.title a, .flexslider .desc h2.title span {
padding: 5px;
display: block;
}

.flexslider .desc h2.title span div{
display: inline;
}

.flexslider .desc h2.title {

background: url(images/slider-text-background.png);
font-size: 24px;
line-height: 100%;
margin: 0 0 10px 0;
}

.flexslider .desc h2.text {
text-transform: uppercase;
padding: 5px;
font: 100 15px "Museo Sans500", Helvetica, Arial, sans-sherif;
line-height: 23px!important;
line-height:23px;
background: url(images/slider-text-background.png);
text-decoration: none;
color: #fff;
display: block;
}

.flex-control-paging li a.flex-active, .flex-control-paging li a:hover {
background: #aa2222;
}

/* ----------------------------------------------------
	PRODUCT PAGINA
------------------------------------------------------- */

.product-intro a.wpb_button_a {

	float:left;
	width:100%;
	text-align:center;	

}

.products-bottom-cta {
	text-align: center;
	padding-top:25px;
}

/* ----------------------------------------------------
	CONTACT FORM
------------------------------------------------------- */

#gform_wrapper_3 {margin-top:35px;}


.gform_wrapper .right_label .gfield_label {

width: 20%!important;

}

/* ----------------------------------------------------
	OFFERTE FORM
------------------------------------------------------- */

#gform_wrapper_2 {margin-top:15px;clear:both;}

#gform_wrapper_2 .gform_footer.right_label{
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 16px;
}


#field_2_9 .gfield_label, #field_2_9 .gfield_label .gfield_required, #field_2_10 .gfield_label, #field_2_10 .gfield_label .gfield_required, #field_2_17 .gfield_label { visibility:hidden;  float:right; position:absolute}

body #gform_wrapper_2 .gform_body li {margin-bottom:10px;}



body #gform_wrapper_2 .gform_footer input[type=submit] {}
                
body #gform_wrapper_2 .gform_footer input[type=submit]:hover {
background-color: ;
                }
               

.gform_wrapper input[type=text], .gform_wrapper input[type=select], .gform_wrapper input[type=textarea]{font-size:14px; box-shadow:inset 0px 1px 1px #fff, inset 0px 2px 2px #F4F4F4;}


#gform_wrapper_2 .gform_footer { height:65px;}

#input_2_9 > li, #input_2_10 > li, #input_2_6 {
	margin: 0 0 5px 0!important;
	font-size: 150%;
}

#field_2_11, #field_2_12, #field_2_16 {
	font-size: 150%;
	margin-top:25px!important;	
}
#field_3_10 .ginput_complex {margin-left: 20%;}

#input_3_10_1_label, #input_3_10_3_label, #input_3_10_5_label {display:none}

#input_3_10_1{margin: 1px 0 9px 1px;}


/* ----------------------------------------------------
	ATTENTION GRABBER
------------------------------------------------------- */

#attentionGrabber, #attentionGrabberWrap #openAttentionGrabber {position:fixed !important}

/* ----------------------------------------------------
	RESPONSIVE CUSTOMIZATION
------------------------------------------------------- */
@media screen and (max-width:770px) {
	
	.responsive .flexslider {
	height:380px!important;

	}
}