* {
    box-sizing: border-box;
    position: relative;
}

html {
    font-size: 62.5%;
    height: 100%;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}



audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    background-color:#ffffff;
    font-weight:300;
    line-height:2.5rem;
    overflow-x:hidden;
    overflow-y: scroll;
    color:#272727;
    height: 100%;


}

h1
{
    font-size: 2.6rem;
    font-weight:500;
    text-align:center;
}

h2
{
    font-size: 2.2rem;
    font-weight:500;
}

.today-headline
{
    color:#272727;
    text-transform: uppercase;
    margin-top:0;
    margin-bottom:0;
}

.headline-15
{

    margin-top:0;
    margin-bottom:0;
}
.headline-how
{
    margin-top:50px;
    margin-bottom:0;
}

.headline-lets
{
    margin-top:50px;
    margin-bottom:0;
    text-align: center;
}

.mod-corn
{
    background-color: #FFDB6F;

}

.mod-wheat
{
    background-color: #E9E3B4;

}

.mod-rice
{
    background-color: #EEEEEE;
}

.logo
{
    background-image:url('../img/logo.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    width:97px;
    height:56px;

}

.home-link
{
    position:absolute;
    left:20px;
    top:0;
    z-index:10;
}

.wrapper {
    max-width: 1000px;
    width:100%;
    margin: 0 auto;

}



.header-container
{
    padding-top:25px;
    background-color: #282828;
}

.mod-other  .main-container
{
    margin-top:-50px;
}

.main-content
{
    margin-top:50px;
    padding-left:13%;
    padding-right:13%;
}
/* main navigation */

.main-nav,.sub-nav
{
   width:100%;
    text-align:center;
}


.mod-other .main-nav
{
    margin-bottom:50px;
}

.main-nav  ul,.sub-nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;

}

.main-nav  li,.sub-nav li
{
    display:inline-block;
}



.main-nav a {
    display: block;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 200;
    font-size: 1.9rem;
    margin: 19px 44px 0 0;
    position:relative;

}


.main-nav li:last-child a
{
    margin-right:0;
}

.main-nav a:after
{
    content:'';
    position:absolute;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    width:69px;
    height:12px;
}




.main-nav li:nth-child(1) a:hover:after,.main-nav li:nth-child(1) a:active:after,.main-nav li:nth-child(1) a.is-selected:after
{

    top: 28px;
    left: -5px;

    background-image:url('../img/main_nav_line_today_hover.png');

}

.main-nav li:nth-child(1) a:active:after,.main-nav li:nth-child(1) a.is-selected:after
{

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

.main-nav li:nth-child(2) a:hover:after,.main-nav li:nth-child(2) a:active:after,.main-nav li:nth-child(2) a.is-selected:after
{

    top: 28px;
    left: -5px;
    background-image:url('../img/main_nav_line_today_hover.png');


}

.main-nav li:nth-child(2) a:active:after,.main-nav li:nth-child(2) a.is-selected:after
{
    background-image:url('../img/main_nav_line_today_active.png');
}


.main-nav li:nth-child(3) a:hover:after,.main-nav li:nth-child(3) a:active:after,.main-nav li:nth-child(3) a.is-selected:after
{

    top: 28px;
    left: -5px;
    width:182px;
    height:12px;
    background-image:url('../img/main_nav_line_thoughts_hover.png');

}

.main-nav li:nth-child(3) a:active:after,.main-nav li:nth-child(3) a.is-selected:after
{
    background-image:url('../img/main_nav_line_thoughts_active.png');
}

.main-nav a:active,.main-nav a.is-selected
{
    font-weight:400;
    letter-spacing:-0.3px;

}

.main-nav li:nth-child(3) a:active,.main-nav li:nth-child(3) a.is-selected
{
    letter-spacing:-0.1px;
}

.img-pre
{
    display:none;
}

.sub-nav-container
{
    margin-bottom:20px;
}


.sub-nav a {
    display: block;
    color: white;
    text-decoration: none;
    font-weight: 200;
    font-size: 1.7rem;
    margin: 50px 0 0 0;
    width:106px;

}

.sub-nav a span
{
    position:absolute;
}


.sub-nav li:last-child a
{
    margin-right:0;
}

.sub-nav li:nth-child(1)
{
    margin-left:-55px;
}

.sub-nav a:after
{
    content:'';
    position:absolute;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    width:74px;
    height:73px;
    top: -86px;
    left:38px;
    background-image:url('../img/sub_nav_dummy.png');
}


.sub-nav li:nth-child(1) a:after
{

    background-image:url('../img/sub_nav_corn_link.png');

}

.sub-nav li:nth-child(1) a:hover:after
{

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



.sub-nav li:nth-child(1) a:active:after,.sub-nav li:nth-child(1) a.is-selected:after,.sub-nav li:nth-child(1) a.is-selected:hover:after
{

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

.sub-nav li:nth-child(1) a:active, .sub-nav li:nth-child(1) a.is-selected
{
color:#e6ac00;
font-weight:400;
}

.sub-nav li:nth-child(2) a:after
{

    top: -86px;
    background-image:url('../img/sub_nav_wheat_link.png');

}

.sub-nav li:nth-child(2) a:hover:after
{

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

.sub-nav li:nth-child(2) a:active:after,.sub-nav li:nth-child(2) a.is-selected:after,.sub-nav li:nth-child(2) a.is-selected:hover:after
{

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

.sub-nav li:nth-child(2) a:active, .sub-nav li:nth-child(2) a.is-selected
{
    color:#cfc054;
    font-weight:400;
}

.sub-nav li:nth-child(2)
{

    top:-15px;
}


.sub-nav li:nth-child(3) a:after
{

    width:74px;
    height:73px;
    background-image:url('../img/sub_nav_rice_link.png');

}

.sub-nav li:nth-child(3) a:hover:after
{

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

.sub-nav li:nth-child(3) a:active:after,.sub-nav li:nth-child(3) a.is-selected:after,.sub-nav li:nth-child(3) a.is-selected:hover:after
{

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

.sub-nav li:nth-child(3) a:active, .sub-nav li:nth-child(3) a.is-selected
{
    color:#f2f1ec;
    font-weight:400;
}





.header-text
{
    width:100%;
    color:#ffffff;
    text-align:center;
    padding:40px 20% 100px 20%;
}


.header-curve
{
    width:100%;
    max-width:1000px;
    height:81px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:top;
    top:3px;
    background-image:url('../img/bogen_top.png');
}


.header-curve:before
{
    position:absolute;
    content:'';
    left:0;
    top:-2px;
    z-index:2;
    width:100%;
    background-color:#282828;
    height:3px;   
}

.header-curve:after
{
    position:absolute;
    content:'';
    left:-1px;
    top:0;
    z-index:2;
    width:2px;
    height:76px;
    background-color:#282828;
    width:2px;   
}


 .header-curve div
{
    position:absolute;
    right:-2px;
    top:0;
    z-index:2;
    width:5px;
    height:76px;
    background-color:#282828;
    
}



.mod-other .header-curve
{
    background-color: #FFFFFF;
}


.mod-corn  .header-curve
{
    background-color: #FFDB6F;

}

.mod-wheat  .header-curve
{
    background-color: #E9E3B4;

}

.mod-rice  .header-curve
{
    background-color: #EEEEEE;

}


.main {
    padding: 0 40px;
}

.main-container-how
{
    background-color:#282828;
    margin-top:80px;
}


.price-container
{
    width:100%;
    text-align:center;

}


.video-container
{

  width:100%;
    background-position:0 80px;
    background-repeat:no-repeat;
    background-size:contain;
    text-align:center;
    margin-top:-40px;
    font-weight:300;
}

.mod-corn .video-container
{
    background-image:url('../img/video-back-corn.png');
}

.mod-wheat .video-container
{
    background-position: center 30px;
    background-image: url('../img/video-back-wheat.png');
    padding-bottom: 120px;
}

.mod-rice .video-container
{
    background-image:url('../img/video-back-rice.png');
    background-position: center 50px;
    padding-bottom: 120px;
}


.today-date
{
    margin-top:10px;
}

.today-price
{
    margin-top:30px;
    margin-bottom:40px;
}

.video-frame
{

   width:88.3%;
    padding:6px;
    margin:0 auto;
}



.mod-corn .video-frame
{
    background-color:#E6AC00;

}

.mod-wheat .video-frame {
     background-color: #cfc054;
 }



.mod-rice .video-frame {
    background-color: #666666;
}

.video-overlay
{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-size:contain;
    background-position:center;
    cursor:pointer;
}

.mod-corn .video-overlay
{
    background-image:url('../img/video-corn-overlay.png');

}

.mod-wheat .video-overlay
{
    background-image:url('../img/video-wheat-overlay.png');

}

.mod-rice .video-overlay
{
    background-image:url('../img/video-rice-overlay.png');

}

.video-content
{
    width:100%;
    height:100%;
}


.year-15-container
{
    margin-top:80px;
}
.mod-wheat .year-15-container,.mod-rice .year-15-container
{
    display:none;
}

.mod-wheat .year-15-container + .video-frame,.mod-rice .year-15-container + .video-frame
{
    display:none;
}



.txt-15
{
    margin-top:10px;
    margin-bottom:40px;
}




.how-container
{

    background-color: #282828;
    color:#ffffff;
    width:100%;
    text-align:center;
}

.description-how1
{
   margin-top:30px;
    margin-bottom:30px;
}
.description-how2
{
    margin-top:50px;
    margin-bottom:30px;
}


.visual-how
{
    max-height:2000px;
    transition:max-height 1s;
    overflow:hidden;
}

#how-switcher
{
    display:none;
}

#how-switcher:checked ~ .visual-how
{
    max-height:0;
}


.image-how
{


    width:87.5%;
    margin:0 auto;

}
.image-how img
{
    max-width:100%;
    height:auto;

}


.arrow-how
{
    margin:30px auto 50px auto;
    width: 26px;
    margin-top:30px;
    height: 18px;
    background-image: url('../img/switcher_on.png');
    cursor:pointer;
    transition:all 1s;
    transform: rotate(180deg);
}

#how-switcher:checked ~  .arrow-how-label .arrow-how
 {
    transform: rotate(0deg);
 }

.lets-graph-frame
{


    width:88.3%;
    text-align:center;
    padding:6px;
    margin:0 auto;

}

.mod-corn .lets-graph-frame
{
    background-color:#E6AC00;
}

.mod-wheat .lets-graph-frame {
    background-color: #cfc054;
}

.mod-rice .lets-graph-frame {
    background-color: #666666;
}



.lets-graph-frame img
{
    max-width:100%;
    height:auto;
}

.description-lets {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align:center;
}

.lets-video-frame,.lets-graph-frame
{
    width:88.3%;
    padding:6px;
    margin:0 auto;
    margin-top:30px;
}





.mod-corn .lets-graph-inner-frame
{
    background-color: #FFDB6F;
}


.mod-wheat .lets-graph-inner-frame
{
     background-color: #E9E3B4;;
}

.mod-rice .lets-graph-inner-frame
{
    background-color: #EEEEEE;
}


.mod-corn .lets-video-frame
{
    background-color:#E6AC00;

}


.mod-wheat .lets-video-frame {
    background-color: #cfc054;
}

.mod-rice .lets-video-frame {
    background-color: #666666;
}



.lets-video-overlay
{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-size:contain;
    background-position:center;
    cursor:pointer;
}




.lets-video-content
{
    width:100%;
    height:100%;
}

.footer-container {
    margin-top: 150px;
    background-color:#282828;
    color:#ffffff;
}

.footer-curve
{
    width:100%;
    max-width:1000px;
    height:75px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:bottom;
    background-image:url('../img/bogen_bottom.png');
    top:-73px;

}

.footer-line
{
   text-align:center;
    margin-top:70px;
}


.mod-corn .footer-line, .mod-wheat .footer-line,.mod-rice .footer-line
{
    margin-bottom:50px;
}


.mod-other .footer-line
{
    margin-top: -40px;
    margin-bottom: 50px;
}

.imprint,.copyright
{
    display:inline-block;
}

.imprint
{
    margin-left:60px;
}

.imprint a
{
    color:#ffffff;
}

.imprint a:hover
{
    text-decoration:none;
}




footer .sub-nav-container
{
    margin-top:-45px;
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   form
   ========================================================================== */
   
#main_wrapper { 
	
	width:50%;
}


#main_wrapper p {
	margin-top:5px;
	
}
/*Form design*/
input[type="text"] {
	
    border: 1px solid #282828;
    height: 25px;
    margin-bottom: 15px;
    padding-left: 5px;
    position: relative;
    width:100%;
	
}
textarea {
    
    border: 1px solid #282828;
    height: 107px;
    margin-bottom: 10px;
    min-height: 110px;
    padding-left: 5px;
    position: relative;
    width:100%;
	
}

input[type="text"]:focus, textarea:focus {
    border: 1px solid #282828;
    
}

label {
	display:block;
	
}
label span {
	color:red;
	font-weight:normal; 
}
input[type=submit] {
	border: 1px solid #282828;
	padding:3px 11px;
	cursor:pointer;
    color:#ffffff;
    background-color:#282828;

}


.submit-wrapper
{
    float: right;

}

.submit-wrapper:after
{
    content:'';
    position:absolute;
    background-image:url('../img/button_shape.svg');
    background-position: 0 -19px;
    background-repeat:no-repeat;
    width: 100%;
    height:30px;
    left:0;
    bottom: -30px;

}

.alert-box {
    color: #555;
    padding: 10px 16px;
    background: #e9ffd9;
    border: 1px solid #282828;
    margin-bottom: 20px
}

.contact-info
{
	margin-bottom:30px;
	
}

.contact-info-svg svg
{
	height: 34px;
	margin-top:5px
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1000px)
{

.header-curve:after,.header-curve div
{

background-color: transparent;
}

}

@media only screen and (max-width: 800px)
{
    #main_wrapper {

        width:100%;
    }


}


@media only screen and (max-width: 768px) {


    .main-nav
    {
        margin-top:50px;
    }

    .image1-how
    {
        width:100%;
        min-height:150px;
    }

    .image2-how
    {
        width:100%;
        min-height:150px;
    }

}



@media only screen and (max-width: 480px) {


    .main {
        padding: 0 10px;
    }


    .logo
    {
        transform:scale(0.8);
    }

    .main-nav a
    {
        margin-right:14px;
    }


    .main-nav
    {
        transform:scale(0.8);
    }
    .sub-nav
    {
        transform:scale(0.9);
    }

    .image-how
    {
        width:100%;
    }

    .header-text
    {
        padding:40px 15% 100px 15%;
    }

    .video-frame
    {
        width:100%;
    }
    .lets-video-frame
    {
        width:100%;
    }
    .lets-graph-frame
    {

        width:100%;
    }

    .image1-how
    {
        width:100%;
        min-height:100px;
    }

    .footer-container
    {
        margin-top:65px;
    }

    footer .sub-nav-container
    {
        margin-top:-25px;
    }

    .main-content {
        margin-top: 50px;
        padding-left: 0;
        padding-right: 0;
    }

    #main_wrapper {

        width:100%;
    }

}