/*
    Author: B2 Media
    Author URI: http://www.b2-media.de/
*/

@import "urlaub_natur_shortcodes.css";
@import "urlaub_natur_menu.css";

@import "fontello.css";
@import "animate.css";
@import "magnific-popup.css";


/****************************************************************************
    Table of Content
***************************************************************************


SOME BASIC CLASSES
    1- body
    2-container
    3-site
    4-section
    5-grid
    6-width section
    7-headings tag
    8-form elements
    9-parallax section


/* 1- START  FRAMEWORK*/
body{ margin:0px; padding:0px; overflow-x:hidden; background-color: #fff; }
body.urlaub_natur_boxed_img{ background-image: url(../img/slide/img1.jpg) !important; background-size: cover; background-attachment: fixed; }
body.urlaub_natur_boxed_pattern{ background-image: url(../img/patterns/img1.jpg) !important; background-attachment: fixed; }

/* 2 - CONTAINER */
.urlaub_natur_container{ width:1200px; margin:auto; padding: 0px;  }
.urlaub_natur_clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.urlaub_natur_clearboth { display: block; clear: both;}
.urlaub_natur_margin-top { margin-top: 50px; }



/* 3- START urlaub_natur_SITE*/
.urlaub_natur_site{ float: left; width: 100%; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; }
.urlaub_natur_site > .urlaub_natur_site_fullwidth{ float: left; width: 100%; background-color: #fff; }
.urlaub_natur_site > .urlaub_natur_site_boxed{ width:1220px; margin:auto; padding: 0px; background-color: #fff; }
/*START urlaub_natur_SITE*/



/* 4 - START SECTION*/
.urlaub_natur_section{ width: 100%; float: left; }
/*.urlaub_natur_section.urlaub_natur_imgparallax{ background: url(../img/img3.jpg) 50% 0 fixed; background-size: cover;}*/
/*END SECTION*/



/* 5 - START GRID*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{ margin:10px; float:left; display:inline; }
.grid.nomargin{ margin: 0px; padding: 10px; }
.grid.percentage{ margin: 0px; padding: 0px; }
.grid_12.percentage {width:100%;}
.grid_6.percentage {width:50%;}
.grid_4.percentage {width:33.33%;}
.grid_2.percentage {width:16%;}
.grid_3.percentage {width:25%;}
.grid_8.percentage {width:66.66%;}
.grid_9.percentage {width:75%;}
/*size*/
.grid_1 {width:80px;}
.grid_2 {width:180px;}
.grid_3 {width:280px;}
.grid_4 {width:380px;}
.grid_5 {width:480px;}
.grid_6 {width:578px;}
.grid_7 {width:680px;}
.grid_8 {width:780px;}
.grid_9 {width:880px;}
.grid_10 {width:980px;}
.grid_11 {width:1080px;}
.grid_12 {width:1180px;}
/*END GRID*/



/* 6 - START NIKDARKWIDTHPERCENTAGE*/
.urlaub_natur_width_percentage1{ width: 1% !important; }
.urlaub_natur_width_percentage10{ width: 10% !important; }
.urlaub_natur_width_percentage20{ width: 20% !important; }
.urlaub_natur_width_percentage25{ width: 25% !important; }
.urlaub_natur_width_percentage30{ width: 30% !important; }
.urlaub_natur_width_percentage40{ width: 40% !important; }
.urlaub_natur_width_percentage45{ width: 45% !important; }
.urlaub_natur_width_percentage50{ width: 50% !important; }
.urlaub_natur_width_percentage60{ width: 60% !important; }
.urlaub_natur_width_percentage70{ width: 70% !important; }
.urlaub_natur_width_percentage80{ width: 80% !important; }
.urlaub_natur_width_percentage90{ width: 90% !important; }
.urlaub_natur_width_percentage100{ width: 100% !important; }
/*END NIKDARKWIDTHPERCENTAGE*/


/* 6.5 - START NIKDARKWIDTHFIX*/
.urlaub_natur_width_fix_50{ width: 50px; }
.urlaub_natur_width_fix_100{ width: 100px; }
.urlaub_natur_width_fix_200{ width: 200px; }
/*END NIKDARKWIDTHFIX*/



/* 7 - START TEXT*/
p,h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px; font-weight: normal; }
/*font*/
h1,h2,h3,h4,h5,h6{ font-family: 'Lato', sans-serif; color: #3c3f46; clear:both; }
h1.subtitle,h2.subtitle,h3.subtitle,h4.subtitle,h5.subtitle,h6.subtitle,input[type="text"].subtitle,input[type="email"].subtitle,textarea.subtitle,select.subtitle, span.subtitle{ font-family: 'Lato', sans-serif; color:#585252; }
h1.signature,h2.signature,h3.signature,h4.signature,h5.signature,h6.signature, span.signature{ font-family: 'Montez', cursive; }
/*color*/
p.white,h1.white,h2.white,h3.white,h4.white,h5.white,h6.white,a.white,i.white,span.white, input[type="text"].white, input[type="email"].white, textarea.white, input[type="submit"].white, select.white{ color:#ffffff; }

p.grey,h1.grey,h2.grey,h3.grey,h4.grey,h5.grey,h6.grey,a.grey,i.grey,span.grey, input[type="text"].grey, input[type="email"].grey, textarea.grey, input[type="submit"].grey, select.grey, pre.grey{ color:#585252; }
p.grey2,h1.grey2,h2.grey2,h3.grey2,h4.grey2,h5.grey2,h6.grey2,a.grey2,i.grey2,span.grey2, input[type="text"].grey2, textarea.grey2, input[type="submit"].grey2, select.grey2, pre.grey2{ color:#f1f1f1; }
p.greydark,h1.greydark,h2.greydark,h3.greydark,h4.greydark,h5.greydark,h6.greydark,a.greydark,i.greydark,span.greydark, input[type="text"].greydark, textarea.greydark, input[type="submit"].greydark, select.greydark{ color:#3c3f46; }
p.greydark2,h1.greydark2,h2.greydark2,h3.greydark2,h4.greydark2,h5.greydark2,h6.greydark2,a.greydark2,i.greydark2,span.greydark2, input[type="text"].greydark2, textarea.greydark2, input[type="submit"].greydark2, select.greydark2{ color:#353b3d; }
p.green,h1.green,h2.green,h3.green,h4.green,h5.green,h6.green,a.green,i.green,span.green, input[type="text"].green, textarea.green, input[type="submit"].green, select.green{ color:#76b38f; }
p.blue,h1.blue,h2.blue,h3.blue,h4.blue,h5.blue,h6.blue,a.blue,i.blue,span.blue, input[type="text"].blue, textarea.blue, input[type="submit"].blue, select.blue{ color:#6088a4; }
p.violet,h1.violet,h2.violet,h3.violet,h4.violet,h5.violet,h6.violet,a.violet,i.violet,span.violet, input[type="text"].violet, textarea.violet, input[type="submit"].violet, select.violet{ color:#8784a0; }
p.yellow,h1.yellow,h2.yellow,h3.yellow,h4.yellow,h5.yellow,h6.yellow,a.yellow,i.yellow,span.yellow, input[type="text"].yellow, textarea.yellow, input[type="submit"].yellow, select.yellow{ color:#d0c28d; }
p.orange,h1.orange,h2.orange,h3.orange,h4.orange,h5.orange,h6.orange,a.orange,i.orange,span.orange, input[type="text"].orange, textarea.orange, input[type="submit"].orange, select.orange{ color:#d3b49d; }
p.orange2,h1.orange2,h2.orange2,h3.orange2,h4.orange2,h5.orange2,h6.orange2,a.orange2,i.orange2,span.orange2, input[type="text"].orange2, textarea.orange2, input[type="submit"].orange2, select.orange2{ color:#e4c7b2; }

p.red,h1.red,h2.red,h3.red,h4.red,h5.red,h6.red,a.red,i.red,span.red, input[type="text"].red, textarea.red, input[type="submit"].red, select.red{ color:#bd7880; }

.white > p { color:#ffffff!important; }
.greydark > p { color:#3c3f46!important; }
.green > p { color:#76b38f!important; }

/*align*/
p.center,h1.center,h2.center,h3.center,h4.center,h5.center,h6.center{ text-align: center; }
p.right,h1.right,h2.right,h3.right,h4.right,h5.right,h6.right, span.right{ float: right; }
/*size*/
p{ font-size:15px; line-height: 22px; color:#3c3f46; font-family: 'Lato', sans-serif; }
h1{ font-size: 36px; line-height: 40px; }
h1.extrasize{ font-size: 47px; line-height: 49px; }
h2{ font-size: 27px; line-height: 32px; }
h3{ font-size: 22px; line-height: 25px; }
h4{ font-size: 18px; line-height: 20px; }
h5{ font-size: 15px; line-height: 18px; }
h6{ font-size: 13px; line-height: 15px; }
a{ text-decoration: none; color: #3c3f46; }
/*pre*/
pre{ overflow: auto; float: left; width: 100%; margin:0px; padding: 0px; }
pre p{ font-family: monospace; font-size: 13px; line-height: 22px; }
/*END TEXT*/



/* 8 - START FORMELEMENTS*/
input[type="text"]{ border: 0px 
    solid #CCCCCC; outline: 0; padding-right: 220px; }
input[type="email"]{ border: 0px 
    solid #CCCCCC; outline: 0; padding-right: 220px; }
textarea{ float: left; border: 0; outline: 0; }
select{ float: left; border: 0; outline: 0; width: 100%; -webkit-appearance: none; cursor: pointer; -webkit-border-radius: 0px;}
input[type="submit"]{ cursor: pointer; outline: 0; border: 0; -webkit-appearance: none; -webkit-border-radius: 0px; }
/*size*/
input[type="text"].small, input[type="tel"].small, input[type="email"].small, textarea.small { font-size: 15px; width: 90%; padding: 10px 5%; }
input[type="text"].medium, textarea.medium { font-size: 17px; width: 90%; padding: 10px 5%; }
input[type="text"].big, textarea.big { font-size: 17px; width: 80%; padding: 15px 10%; }

/*size select*/
select.small { font-size: 15px; padding: 10px 5%; }
select.medium { font-size: 17px; padding: 10px 5%; }
select.big { font-size: 17px; padding: 15px 10%; }
/*icon*/
.urlaub_natur_icon_select:after { content: '\e8c9'; font-family: 'fontello'; position: absolute; font-size: 20px; top: 10px; right: 20px; color: #3c3f46; cursor: none; }
.urlaub_natur_icon_text:after { content: '\e873'; font-family: 'fontello'; position: absolute; font-size: 15px; top: 13px; right: 20px; color: #3c3f46; cursor: none; }
.urlaub_natur_icon_date:after { content: '\eb24'; font-family: 'fontello'; position: absolute; font-size: 15px; top: 13px; right: 20px; color: #3c3f46; cursor: none; }
.urlaub_natur_icon_select:after { content: '\e8c9'; font-family: 'fontello'; position: absolute; font-size: 20px; top: 10px; right: 30px; color: #3c3f46; cursor: none; }
.urlaub_natur_icon_msg:after { content: '\e915'; font-family: 'fontello'; position: absolute; font-size: 15px; top: 13px; right: 20px; color: #3c3f46; cursor: none; }
.urlaub_natur_icon_mail:after { content: '\e826'; font-family: 'fontello'; position: absolute; font-size: 15px; top: 13px; right: 20px; color: #3c3f46; cursor: none; }
/*END FORMELEMENTS*/




/*********************************************CUSTOM FOR CAMPING*************************************************************/

/* 9 - START CLASS FOR PARALLAX SECTION*/
.urlaub_natur_parallaxx_img2 { background:  linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent), url(../../../../wp-content/themes/Urlaub_Natur/img/fallback-urlaub-reisen-naturnah-natur.jpg) 50% 0 fixed; background-size:cover; background-repeat: no-repeat;}
/*END CLASS FOR PARALLAX SECTION*/

.urlaub_natur_fallback_img { background: url(../../../../wp-content/themes/Urlaub_Natur/img/fallback-urlaub-reisen-single.jpg) center; background-size:cover; background-repeat: no-repeat;}
/*END CLASS FOR PARALLAX SECTION*/


.reisekarte {min-width: 100%; min-height: 350px;}
.reisekarte_lastseen {min-width: 100%; min-height: 200px;}

/*START CUSTOM CLASS TO AVOID INLINE CSS*/
.urlaub_natur_width60 { width: 60px; }
.urlaub_natur_width50 { width: 50px; }

.urlaub_natur_copyrightlogo { background-image:url(../img/footer/copyright.jpg); background-size:95px; background-repeat:no-repeat; background-position:left; }
.urlaub_natur_facebook { background-color:#5977b8; box-shadow:0px 0px 0px 0px #4c67a1;  }
/*END CUSTOM CLASS TO AVOID INLINE CSS*/



.search-btn-size {width:100px!important;  font-size:13px!important; float:right; height:40px!important}
.search-form-size {width:200px!important; float:right; height:40px!important; margin: 0!important;padding: 0 10px!important;}



/* ACF */
.acf-label {
    float: left;
}

.tab-search {
    width: 75%!important;
}


.callout {
    position: absolute;
    right: 6%;
    bottom: 3em;
    z-index: 1;
    text-align: center;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    width: 9em;
    height: 9em;
    overflow: hidden;
    border-radius: 500px;
    background: #76b38f;
    text-rendering: optimizeLegibility;
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    transition-duration: .2s;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.37, 1.47);
    font-size: .5rem;
    -webkit-filter: drop-shadow(2px 4px 10px rgba(42, 45, 52, 0.3));
    filter:drop-shadow(2px 4px 10px rgba(42, 45, 52, 0.3))
}

@media screen and (min-width: 40em) {
    .callout {
        font-size:.875rem
    }
}

@media screen and (min-width: 64em) {
    .callout {
        font-size: 1.25rem;
        right: auto;
        left: 50%;
        margin-left:25%
    }
}

.callout:hover, .callout:active, .callout:focus, .callout:focus-within {
    -webkit-transform: rotate(0deg) scale(1.2);
    transform:rotate(0deg) scale(1.2)
}

.callout--left {
    right: auto;
    left: 6%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    display:none
}

@media screen and (min-width: 28.75em) {
    .callout--left {
        display:block
    }
}

@media screen and (min-width: 64em) {
    .callout--left {
        right: 50%;
        left: auto;
        margin-left: auto;
        margin-right:25%
    }
}

.callout__link {
    border-radius: 500px;
    overflow: hidden;
    display: block;
    padding: 0 15%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    line-height: 1.2;
    font-size:.888888889em
}

.callout__fl {
    color: #2a2d34;
    font-weight:700
}

.callout__fl + .callout__sl {
    margin-top: .5em;
    max-width: 100%;
    font-weight:normal
}

.callout__sl {
    color: #fff;
    font-weight:700
}

@media screen and (min-width: 47.5em) {
    .hero--has-search .callout {
        left: auto;
        right:4%
    }

    .hero--has-search .callout--left {
        right: auto;
        left:4%
    }
}

@media screen and (min-width: 100em) {
    .hero--has-search .callout {
        margin-left:30%
    }

    .hero--has-search .callout--left {
        margin-left: auto;
        margin-right:30%
    }
}