/******************************************************************************/

@media screen and (min-width: 1px) and (max-width: 767px) {
div.wrapper.info div.main {
        margin: 20px 10px 0 10px!important;
}

article h2.full {
	margin: 0 15px 11px;
}
span.more-icon:after {
	margin-top: 1em;
}
div.main article h3 {
	margin: 0 15px 11px;
}
div.main .threeColumnText {
		padding: 0 10px;
		margin: 0;
	}

div.wrapper.product div.topics {
   margin: 0 auto 48px;
   width: 320px;
}
 
div.wrapper.info section.articlehead {
        padding: 0!important;
}
 section.articlehead div.storyhead h1 {
        margin: 0px 48px 10px 48px!important;
    }
div.wrapper.info section.articlehead h1 {
        margin: 150px 0 0px 50px;
}
div.wrapper.info section.articlehead div.user {
        margin-left: 10px!important;
}
div.wrapper.info div.main > .text:first-of-type {
	margin: 0;
}
    div.name-date {
	margin: 10px 45px;
    } 

    div.wrapper {
        width: 100%;
    }
    div.main {
	padding-top: 50px!important;
        padding-left: 0;
        padding-right: 0;
    }
    
	div.main > .text {
		margin: 40px 0;
	}
	div.main > .text p {
		font-size: 22px;
	}
	div.main > .threeColumnText {
		margin: 0;
		padding: 0 10px;

	}	
	nav.main {
		font-size: 14px;
	}
    div.main h1 {
        margin: 0 10px 24px;
    }

    /***** Header - Start ********************************************************/
    header.main {
        min-height: 120px;

    }
   header.main a.logo {
        top: 20px;
        left: 12px;
        width: 110px;
        height: 33px;
        background-size: contain;
    }
    header.main nav.main {
        top: 84px;
        left: 10px;
        right: auto;
    }
    div.wrapper.article header.main,
	div.wrapper.project header.main,
	div.wrapper.main-nav header.main,
	div.wrapper.topic header.main {
	position: relative;
	min-height: 70px;
	height: 70px;

	}
div.wrapper.article header.main a.logo,
div.wrapper.project header.main a.logo,
div.wrapper.main-nav header.main a.logo,
div.wrapper.topic header.main a.logo {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 70px;
	height: 70px;
	background: url("../img/logo-square-1.jpg") no-repeat;
	background-size: 70px 70px;
	text-indent: -9999em;
}
div.wrapper.article header.main nav.main,
div.wrapper.project header.main nav.main,
div.wrapper.topic header.main nav.main {
/*	position: absolute;
	top: 45px;
	left: 10px;
	right: auto;
	font-weight: 600;*/
}
    /***** Header - End ********************************************************/

	/**** Footer ****/
	
	div.footer-separator {
		 margin: 0; 
	}
	div.footer {
		padding:  100px 20px 30px 0;
	 	height: 450px;
	}
	div.footer div.box-3 {
		width: 100%;
		height: 150px;
	 	display: block;
	}
	div.footer div.box-3.first {
		padding-left: 3% ;
		width: 100% ;
		height: 100px;

	}
	
	/***  Footer - End **/
	
    /***** Teaser - Start ********************************************************/
    section.teaser {
        width: 100%;
        margin: 0 auto 40px;
    }
    section.teaser.new {
   	    width: 100%;
		background-color: rgba(255, 255, 255, 0.8);
		margin: 0 auto 40px;
		padding-left: 40px;
    }
    section.teaser div.text {
        right: 10px;
        width: 145px;
    }
    section.teaser div.text h1 {
        font-size: 24px;
        line-height: 26px;
    }
    section.teaser div.text p {
        font-size: 14px;
        line-height: 20px;
    }
    section.teaser div.cover {
        width: 243px;
        background-color: rgba(255, 255, 255, 0.9);
    }

    div.wrapper.project section.teaser {
        margin: 0 0 150px;
    }
    div.wrapper.project section.teaser div.images div.clip img {
        width: 100%;
    }
    div.wrapper.project section.teaser div.box {
        top:-110px; 
        left: 50px;
	height: auto;
	width: auto;
        right: 50px;
	display: block;
	min-height: 1px;
        padding: 16px;
    }
    div.wrapper.project section.teaser div.box h1 {
        font-size: 32px;
        line-height: 32px;
    }
    div.wrapper.project section.teaser div.box h2 {
        margin: 0 0 11px;
        font-size: 22px;
        line-height: 24px;
    }
    div.wrapper.project section.teaser div.box hr {
        margin: 16px 0 10px;
    }
    div.wrapper.project section.teaser div.box p {
        line-height: 22px;
    }
    div.wrapper.project section.teaser div.box footer {
        position: relative;
        margin: 24px 0 0;
        padding: 0;
    }
    div.wrapper.project section.teaser div.box footer p.dev-for {
        float: left;
    }
    div.wrapper.project section.teaser div.box footer a.btn {
        margin: 0 12px 10px 0;
    }
    div.wrapper.project section.teaser nav.social {
        position: relative;
        bottom: auto;
    	display: none;
	    left: 0;
        margin: 20px 0 0;
    }
    div.wrapper.project section.teaser nav.social ul {
        text-align: center;
    }
    /***** Teaser - End ********************************************************/

    /***** Article - Start **********************************************************/
    section.articlehead {
        padding: 0!important;
	margin: -70px 0 0 0;
    }
    section.articlehead div.user {
        margin: 0 0 0 10px!important;
    }
    section.articlehead div.storyhead h1 {
		width: auto;
        margin: 0 48px 10px 48px;
        font-size: 32px;
        line-height: 34px;
	}
    section.articlehead h1 {
        width: auto;
        margin: 0 10px 16px;
        font-size: 32px;
        line-height: 34px;
    }
    section.articlehead div.search {
        position: relative;
        top: auto;
        right: auto;
        margin: 20px 0 0;
    }
    section.articlehead nav.social {
        position: relative;
        top: auto;
        right: auto;
        width: 300px;
        margin: 0 10px 24px;
    }
    section.articlehead div.images div.clip img {
        width: 100%;
    }
    section.articlehead nav.social ul {
        text-align: center;
    }
    section.articlehead div.search input[type="text"] {
        width: 300px;
        margin: 0 10px 12px;
    }

    div.main article,
    div.main topic,
    div.main project {
        padding: 0 50px;
    }
    div.wrapper.article div.main {
	padding: 0 0 80px 0;
    }
    div.main info {
	padding: 0 226px!important;
    }
    article p {
        font-size: 20px;
        line-height: 28px;
    }
    article p.important {
  	    width: 100%;
        font-size: 32px;
        line-height: 32px;
        margin: 0 0 16px;
    }
    
   	
	
	article div.col {
		float: none; 	
	}

	article div.col.w-3 {
		width: auto;
		padding: 0 20px;
	}
	article div.col.w-2 {
		width: auto;
		padding: 0 20px;
	}
    article div.images img {
        width: 100%;
    }
    article h2 {
        margin: 0 0 16px;
        font-size: 26px;
        line-height: 30px;
    }
    article h2.full {
        padding: 32px 0 40px;
    }
    div.main article div.feature {
        padding: 32px 0 40px;
    }
    div.main article div.feature div.text {
        float: none;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
     div.main article div.feature div.text p {
        margin: 0 0 20px;
    }
     div.main article  div.feature div.image {
        margin: 0 0 0 10px;
    }
     div.main article  div.feature div.image:last-of-type {
        margin: 0 0 0 10px;
    }
     div.main article  div.feature div.image div.clip {
        height: 145px;
        width: 145px;
    }
     div.main article  div.feature.right div.image {
        margin: 0 10px 0 0;
    }
     div.main article div.feature.right div.image:last-of-type {
        margin: 0 10px 0 0;
    }
   .article-wrapper .clip div.headline h1 {
        font-size: 6vw;
   }
     	/***** Article - End **********************************************************/

    /***** Topics - Start **********************************************************/
    div.topics {
        margin: 0 auto 48px;
        width: 320px;
    }
    div.topics a.topic {
        width: 320px;
		margin: 0 0 0 0;
    }
    div.topics span.topic {
        width: 320px;
        margin: 0 0 0 0;
    }
    div.topics a.topic.w-2 {
        width: 320px;
    }
    div.topics a.topic.w-3 {
        width: 320px;
    }
    div.topics a.topic.w-1-5 {
        width: 320px;
    }
        div.topics span.topic.w-1-5 {
        width: 320px;
    }
    div.topics a.topic.h-2 {
        height: 485px;
    }
    div.topics a.mob-w-2 {
        width: 320px;
    }
    div.topics a.topic div.infos {
        display: block;
        padding: 12px;
    }
    div.topics span.topic div.infos {
        display: block;
        padding: 12px;
    }

   div.topics a.topic div.infos.new {
        margin-right: 32px;
    }    
    
    div.topics a.topic div.infos h1,
    div.topics a.topic div.infos.first h1,
     div.topics a.topic div.infos.new h1 {
        font-size: 20px;
        line-height: 24px;
    }
    div.topics a.topic div.infos p,
    div.topics a.topic div.infos.first p,
     div.topics a.topic div.infos.new p {
        font-size: 14px;
        line-height: 18px;
    }
    
    div.topics span.topic div.infos p {
        font-size: 14px;
        line-height: 18px;
    }
    /***** Topics - End **********************************************************/

    /***** Contact - Start **********************************************************/
    div.contact-box {
        margin: 0 0 96px;
    }
    div.contact-box div.cover {
        width: 210px;
    }
    div.contact-box address {
        font-size: 14px;
        top: 20px;
        left: 12px;
    }
    div.contact-box address p {
        margin: 0 0 12px;
        letter-spacing: -0.4px;
    }
    div.contact-box address p.mail {
        margin-bottom: 8px;
    }
    div.contact-box div.locator {
        left: 235px;
        z-index: 2;
    }
    div.contact-box img {
        position: absolute;
        left: -450px;
    }
    /***** Contact - End **********************************************************/

	/**** Footer ***/
	
	section.contact {
        margin: 0 0 -80px;
        padding: 40px 10px;
    }
	section.contact h1{
        margin-left: 0;
    }
    section.contact div.col {
        width: 100%;
        margin-bottom: 20px;
    }
     section.contact p.phone,
     section.contact p.mail {
        margin: 10px 0 0;
        padding: 0 0 0 48px;
        font-size: 22px;
    }
   
	/**** Footer End ***/
    /***** Teaser-More - Start **********************************************************/
    div.teaser-more {
        width: auto;
        margin: 105px 10px 0;
    }
    div.teaser-more a.article div.image {
        margin: 0 0 10px;
    }
    div.teaser-more a.article div.text {
        width: 100%;
    }
    div.teaser-more a.article div.text h1 {
        font-size: 24px;
        line-height: 28px;
    }
    /***** Teaser-More - End **********************************************************/

    /***** product - Start **********************************************************/
    div.wrapper.product header.main {
        overflow: hidden;
    }
    div.wrapper.product header.main img {
        width: 117%;
    }
    div.wrapper.product header.main h1 {
        left: 10px;
        top: 32px;
        min-width: 300px;
        background-size: 165px auto;
    }
    div.wrapper.product header.main div.teaser-text {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        padding: 10px;
        color: inherit;
        box-sizing: border-box;
    }
    div.wrapper.product header.main div.teaser-text p {
        font-size: 18px;
        line-height: 24px;
    }
    div.wrapper.product header.main div.teaser-text a.btn {
        margin: 0 0 20px;
    }
    div.wrapper.product header.main nav.main {
        left: auto;
        padding: 10px 0;
        line-height: 36px;
        border-top: 1px solid #c2c2c2;
    }
    div.wrapper.product header.main nav.main ul {
        text-align: center;
    }
    div.wrapper.product header.main nav.main ul li {
        margin: 0 16px;
        padding: 0;
    }

    div.wrapper.product section p.sub {
        padding: 0 20px;
    }
    div.wrapper.product section.product-infos div.col {
        float: none;
        margin: 0 auto 50px;
        padding: 52px 0 0;
    }
    div.wrapper.product section.product-infos div.col:last-of-type {
        margin: 0 auto;
    }

    div.wrapper.product section.product-features {
        margin: 0;
    }
    
    
    div.wrapper.product section.product-features div.feature {
        padding: 32px 0 40px;
    }
    div.wrapper.product section.product-features div.feature div.text {
        float: none;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    div.wrapper.product section.product-features div.feature div.text p {
        margin: 0 0 20px;
    }
    div.wrapper.product section.product-features div.feature div.image {
        margin: 0 0 0 10px;
    }
    div.wrapper.product section.product-features div.feature div.image:last-of-type {
        margin: 0 0 0 10px;
    }
    div.wrapper.product section.product-features div.feature div.image div.clip {
        height: 145px;
        width: 145px;
    }
    div.wrapper.product section.product-features div.feature.right div.image {
        margin: 0 10px 0 0;
    }
    div.wrapper.product section.product-features div.feature.right div.image:last-of-type {
        margin: 0 10px 0 0;
    }
    div.wrapper.product section.product-features div.images > img {
        width: 100%;
    }

    div.wrapper.product section.customization div.col {
        width: 100%;
        margin: 0 8px 40px 0;
    }
    div.wrapper.product section.customization div.col img {
        width: 100%;
        margin: 0 0 10px;
    }

    div.wrapper.product section.contact {
        margin: 0 0 0px;
        padding: 40px 10px;
    }
    div.wrapper.product section.contact div.col {
        width: 100%;
    }
    div.wrapper.product section.contact p.phone,
    div.wrapper.product section.contact p.mail {
        margin: 10px 0 0;
        padding: 0 0 0 48px;
        font-size: 22px;
    }
    footer.main {
        font-size: 12px;
        line-height: 20px;
        padding: 10px;
    }
    footer.main a.right {
        float: left;
        clear: both;
        margin: 10px 0 0;
    }
    /***** product - End **********************************************************/
	form#contact .col-left {
		width: 100%;
		float: none;
	
	}

	form#contact .col-right {
		width: 100%;
		float: none;
	}
}


@media screen and (min-width: 375px) and (max-width: 767px) {
    div.wrapper.product section.product-features div.feature div.image div.clip {
        height: 172px;
        width: 172px;
    }
}


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

	
    /***** Topics - Start **********************************************************/
    div.topics {
        margin: 0 auto 48px;
        width: 475px;
    }
    div.topics a.topic {
        width: 235px;
    }

    div.topics span.topic {
	width: 235px;	 
    }
    div.topics a.topic.w-2 {
        width: 475px;
    }
     div.topics a.topic.w-3 {
        width: 475px;
    }
    div.topics a.topic.w-1-5 {
        width: 475px;
    }
    div.topics span.topic.w-1-5 {
        width: 475px;
    }
    div.topics a.topic.h-2 {
        height: 485px;
    }
    div.topics a.mob-w-2 {
        width: 475px;
    }
    div.topics a.mob-w-2 img {
        width: 100%;
        height: auto;
    }
    div.topics a.topic div.infos {
        padding: 20px;
    }
    div.topics a.topic div.infos.new {
        margin: 28px 10% 28px 32px;
    }
    div.topics span.topic div.infos {
        padding: 20px;
    }
    div.topics a.topic div.infos h1 {
        font-size: 20px;
        line-height: 24px;
    }
    div.topics a.topic div.infos p {
        font-size: 14px;
        line-height: 18px;
    }
    div.topics span.topic div.infos p {
        font-size: 14px;
        line-height: 18px;
    }
    /***** Topics - End **********************************************************/

    /***** Contact - Start **********************************************************/
    div.contact-box div.locator {
        left: 315px;
    }
    div.contact-box img {
        left: -370px;
    }
    /***** Contact - End **********************************************************/

    /***** Teaser-More - Start **********************************************************/
    div.teaser-more a.article div.image {
        width: 180px;
    }
    div.teaser-more a.article div.image img {
        width: 100%;
    }
    div.teaser-more a.article div.text {
        float: left;
        width: 57%;
        margin: 0 0 0 10px;
    }
    /***** Teaser-More - End **********************************************************/

    /***** product - Start **********************************************************/
    div.wrapper.product header.main h1 {
        background-size: auto auto;
    }
    div.wrapper.product header.main nav.main ul li {
        margin: 0 32px;
    }
    div.wrapper.product section.product-features div.feature div.image div.clip {
        height: 224px;
        width: 224px;
    }
    div.wrapper.product section.customization div.col img {
        margin: 0 0 20px;
    }
    div.wrapper.product section.customization div.col h3 {
        font-size: 24px;
    }
    div.wrapper.product section.customization div.col p {
        font-size: 18px;
    }
    footer.main {
        font-size: 14px;
    }
    /***** product - End **********************************************************/
}

 
@media screen and (min-width: 1px) and (max-width: 768px) {
	#podcast {
		display: none;
	}
	
div.topics a.topic div.infos.new h1 {
	font-size: 24px;
}
div.topics a.topic div.infos.new p.subtitle {
	font-size: 16px;
}
	
section.teaser.new span {
	color: white;
	font-family: "Source Sans Pro";
	font-weight: 700;
	line-height: 50px;
	font-size: 43px;
	display: inline-block;
	padding: 20px 0 10px 20px;
}
section.teaser.new span.bg {
	color: white;
	background-color: rgba(0,0,0,0.5);
	padding: 0 5px;
	
}

section.teaser.new span.sub {
	color: white;
	font-family: "Source Sans Pro";
	line-height: 30px;
	font-weight: 500;
	background-color: rgba(0,0,0,0.5);
	font-size: 18px;
	display: inline-block;
	padding: 0 5px;
	margin: 0px 20px;
}
}

@media screen and (min-width: 1px) and (max-width: 1023px) {
   div.main article {
        padding: 0 50px;
        }
	article p.left {
	margin: 0  0px 30px  0px!important;
	}
	article p.right {
	margin: 0 0px 30px 0px!important;
	text-align: left!important;
	 
	}
	div.main article.callToAction{
		padding: 50px 10px;
		line-height: 32px;
	}
	
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.articlehead {
        padding: 0!important;
		margin: -70px 0 0 0;
    }
    	article h2.full {
 		margin: 0 15px 21px;
 	} 
    section.articlehead.noimg {
    	margin-top: 40px;
    	
    }
    
    article p.right {
	margin: 0 0px 30px 0px!important;
	text-align: right!important;
	 
	}
	 article p.left {
	margin: 0 20px 30px 0px!important;

	 
	}
    section.articlehead div.user {
        margin: 0 0 20px 50px!important;
    }
    section.articlehead div.storyhead h1 {
		width: auto;
        margin: 0 48px 10px 48px;
        font-size: 32px;
        line-height: 34px;
	}
	div.footer-separator {
		 margin: 0 20px; 
	}
	div.footer {
		padding:  100px 20px 30px 20px;
	}
	
   
	wrapper.topic header,
	wrapper.article header
	wrapper.project header {
		display: none;
	}
    div.wrapper {
        width: 100%;
    }
    div.main {
        padding: 0 0 80px;
    }

	div.main > .threeColumnText {
		padding: 0 10px;
		margin: 0;
	}

    /***** Header - Start ********************************************************/
    header.main a.logo {
        left: 48px;
    }
    header.main nav.main {
        right: 48px;
    }
    /***** Header - End ********************************************************/


    /***** Teaser - Start ********************************************************/
    section.teaser {
        width: 100%;
        margin: 0 auto 69px;
    }
    section.teaser.new {
        width: 710px;
        margin: 0 auto 69px;
    }
    section.teaser div.text {
        right: 24px;
        width: 215px;
    }
    section.teaser div.text h1 {
        font-size: 35px;
        line-height: 38px;
    }
    section.teaser div.text p {
        font-size: 16px;
        line-height: 24px;
    }
    section.teaser div.cover {
        width: 343px;
    }

    div.wrapper.project section.teaser div.images div.clip img {
        width: 100%;
    }
    div.wrapper.project section.teaser div.box {
        left: 26px;
        width: 400px;
        min-height: 364px;
        padding: 24px;
    }
    div.wrapper.project section.teaser div.box h1 {
        font-size: 36px;
        line-height: 34px;
    }
    div.wrapper.project section.teaser div.box h2 {
        font-size: 24px;
        line-height: 25px;
    }
    div.wrapper.project section.teaser div.box hr {
        margin: 20px 0 10px;
    }
    div.wrapper.project section.teaser div.box p {
        line-height: 21px;
    }
    div.wrapper.project section.teaser nav.social {
	    left: auto;
	right: 50px;
    }
    /***** Teaser - End ********************************************************/

    /***** Topics - Start **********************************************************/
    div.topics {
        margin: 0 auto 48px;
        width: 700px;
    }
    div.topics a.topic div.infos {
        display: block;
    }
     div.topics a.topic div.infos.new {
       margin: 28px 10% 28px 32px;
    }
    div.topics a.topic.w-3 {
        width: 700px;
    }
    div.topics a.topic.w-1-5 {
        width: 343px;
    }
      div.topics span.topic.w-1-5 {
        width: 343px;
    }
    /***** Topics - End **********************************************************/

    /***** Contact - Start **********************************************************/
    div.contact-box div.locator {
        left: 545px;
        z-index: 2;
    }
    div.contact-box img {
        position: absolute;
        left: -140px;
    }
    /***** Contact - End **********************************************************/

    /***** Article - Start **********************************************************/
  
    section.articlehead div.images div.clip img {
        width: 100%;
    }
    section.articlehead div.search {
        right: 45px;
        top: 0;
    }
    section.articlehead nav.social {
        right: 50px;
        top: 54px;
    }
   div.main article  div.images img {
        width: 100%;
    }
     div.main article h2 {
        padding: 0 16px;
    }
   div.main article div.feature {
        padding: 40px 40px 56px;
    }
     div.main article div.feature div.text {
        width: 100%;
    }
     div.main article div.feature div.image div.clip {
        height: 336px;
        width: 336px;
    }
     
    section.contact {
        margin: 0 0 -80px;
        padding: 105px 40px;
    }
    /***** Article - End **********************************************************/

    /***** product - Start **********************************************************/
    div.wrapper.product header.main {
        overflow: hidden;
    }
    div.wrapper.product header.main img {
        width: 114%;
    }

    div.wrapper.product header.main h1 {
        top: 40px;
        left: 40px;
    }
    div.wrapper.product header.main div.teaser-text {
        left: 40px;
        top: 102px;
        width: 440px;
    }
    div.wrapper.product header.main div.teaser-text p {
        font-size: 20px;
        line-height: 25px;
    }

    div.wrapper.product section.product-infos {
        padding: 56px 0 20px;
    }
    div.wrapper.product section.product-infos div.col {
        width: 50%;
        margin: 0 0 40px;
        padding: 72px 20px 0;
        box-sizing: border-box;
    }
    div.wrapper.product section.product-infos div.col:nth-of-type(2n+1) {
        clear: left;
    }

    div.wrapper.product section.product-features {
        margin: 0;
    }
    div.wrapper.product section.product-features div.feature {
        padding: 40px 40px 56px;
    }
    div.wrapper.product section.product-features div.feature div.text {
        width: auto;
    }
    div.wrapper.product section.product-features div.feature div.image div.clip {
        height: 336px;
        width: 336px;
    }
    div.wrapper.product section.product-features div.images img {
        width: 100%;
    }

    div.wrapper.product section.customization div.col {
        float: left;
        margin: 0 8px 8px 0;
        width: 244px;
    }
    div.wrapper.product section.customization div.col img {
        width: 100%;
    }
    div.wrapper.product section.customization div.col:first-of-type {
        margin-left: 10px;
    }

    div.wrapper.product section.contact {
        margin: 0 0 0px;
        padding: 105px 40px;
    }

    footer.main {
        padding: 0 40px;
    }
    /***** product - End **********************************************************/
	form#contact .col-left {
		width: auto;
		margin: 0 40px;
		float: none;
	
	}

	form#contact .col-right {
		width: auto;
			margin: 0 40px;
		float: none;
	}
	  div.wrapper.product div.topics a.topic div.infos.new {
        margin: 28px 10% 28px 32px;
    }
    
    div.main .threeColumnText {
		padding: 0 10px;
		margin: 0;
	}
}


@media screen and (min-width: 1024px) and (max-width: 1269px) {
	div.main article {
	padding: 0 226px;
	}
	 
	article h2.full {
 		margin: 0 15px 21px;
 	} 
   	div.footer-separator {
		 margin: 0 40px; 
	}
	div.footer {
		padding:  100px 40px 30px 40px;
	}
 
	 div.wrapper {
        width: 100%;
    }
    div.main {
        padding: 0 0 80px;
    }

    /***** Teaser - Start ********************************************************/
    section.teaser {
        width: 1024px;
    }
    section.teaser.new {
        width: 900px;
        margin: 0 auto 69px;
    }
    
section.teaser.new span {
	color: white;
	font-family: "Source Sans Pro";
	font-weight: 700;
	line-height: 60px;
	font-size: 53px;
	display: inline-block;
	padding: 20px 0 10px 20px;
}
section.teaser.new span.bg {
	color: white;
	background-color: rgba(0,0,0,0.5);
	padding: 0 5px;
	
}

section.teaser.new span.sub {
	color: white;
	font-family: "Source Sans Pro";
	line-height: 35px;
	font-weight: 500;
	background-color: rgba(0,0,0,0.5);
		font-size: 24px;
	display: inline-block;
	padding: 0 5px;
	margin: 5px 20px;
} 
    div.wrapper.project section.teaser div.images div.clip img {
        width: 100%;
    }
    div.wrapper.project section.teaser div.box {
       // left: 26px;
       // min-height: 364px;
      //  padding: 24px;
    }
    div.wrapper.project section.teaser div.box h1 {
        font-size: 36px;
        line-height: 34px;
    }
    div.wrapper.project section.teaser div.box h2 {
        font-size: 24px;
        line-height: 25px;
    }
    div.wrapper.project section.teaser div.box hr {
        margin: 20px 0 10px;
    }
    div.wrapper.project section.teaser div.box p {
        line-height: 21px;
    }
    div.wrapper.project section.teaser nav.social {
    //    left: 598px;
    }
    /***** Teaser - End ********************************************************/


    /***** Topics - Start **********************************************************/
    div.topics {
        width: 1024px;
        margin: 0 auto 48px;
    }
    div.topics a.topic {
        width: 330px;
    }
    div.topics span.topic {
        width: 330px;
    }
    div.topics a.topic.w-2 {
        width: 676px;
    }
    
    div.topics a.topic.w-1-5 {
        width: 503px;
    }
        div.topics span.topic.w-1-5 {
        width: 503px;
    }
    div.topics a.topic.w-3 {
        width: 1019px;
    }
    div.topics a.topic.h-2 {

    }
    div.topics a.mob-w-2 {

    }
    div.topics a.topic div.infos {
       // display: block;
    }
    /***** Topics - End **********************************************************/


    /***** Article - Start **********************************************************/
    div.main .threeColumnText { 
	padding: 40px 50px 0 50px;
    }
    section.articlehead div.images div.clip img {
        width: 100%;
    }
    section.articlehead div.search {
        right: 45px;
        top: 0;
    }
    section.articlehead nav.social {
        right: 50px;
        top: 54px;
    }
    div.main article  div.images img {
        width: 100%;
    }
    div.main article div.feature {
        padding: 40px;
    }

  
     div.main article div.images img {
        width: 100%;
    }
    
    /***** Article - End **********************************************************/

    /***** product - Start **********************************************************/

    div.wrapper.product header.main {
        overflow: hidden;
    }
    div.wrapper.product header.main img {
        width: 114%;
    }
    div.wrapper.product section.product-infos div.col {
        width: 226px;
    }
    div.wrapper.product section.product-infos div.col:first-of-type {
        margin-left: 16px;
    }

    div.wrapper.product section.product-features {
        margin: 0;
    }
    div.wrapper.product section.product-features div.feature {
        padding: 40px;
    }

    div.wrapper.product section.product-features div.feature div.image div.clip {
        height: 292px;
        width: 292px;
    }
    div.wrapper.product section.product-features div.images img {
        width: 100%;
    }

    div.wrapper.product section.customization div.col {
        float: left;
        margin: 0 8px 8px 0;
        width: 308px;
    }
    div.wrapper.product section.customization div.col img {
        width: 100%;
    }
    div.wrapper.product section.customization div.col:first-of-type {
        margin-left: 40px;
    }

    div.wrapper.product section.contact {
        margin: 0px;
        padding: 105px 40px;
    }

    footer.main {
        padding: 0 40px;
    }
    /***** product - End **********************************************************/
	form#contact .col-left {
		width: 100%;
		float: none;
	
	}

	form#contact .col-right {
		width: 100%;
		float: none;
	}
}

/******************************************************************************/

@media screen and (min-width: 1024px) and (max-width: 1148px) {
   div.main article div.feature div.image div.clip {
        height: 292px;
        width: 292px;
    }
}
@media screen and (min-width: 1149px) and (max-width: 1269px) {
   div.main article div.feature div.image div.clip {
        height: 336px;
        width: 336px;
    }
}

@media screen and (min-width: 1px) and (max-width: 375px) {

div.wrapper.info section.articlehead h1 {
        margin: 120px 0 0px 25px;
	font-size: 20px;
}

   div.main article,
    div.main topic,
    div.main project {
        padding: 0 20px;
    }

    div.main > .text p {
	font-size: 16px;
    }
}

@media screen and (min-width: 376px) and (max-width: 414px) {

   div.wrapper.project section.teaser div.box {
	left: 0px;
	right: 0px;
	top: -50px;
	
   }

   div.main .moodImage {
  	margin: 0;
   }
   div.main > .text:first-of-type {
	margin: 120px 0 20px 0;
   }
   .main-cases-carousel-infobox h1 {
   	font-size: 8vw;
   	line-height: 8vw;
   }
}

@media screen and (min-width: 1px) and (max-width: 320px) {
  div.wrapper.project section.teaser div.box {
        left: 0px;
        right: 0px;
        top: -50px;
        
   }
   div.main .moodImage {
  	margin: 0;
   }
   div.main > .text:first-of-type {
        margin: 160px 0 10px 0;
   }
}

@media screen and (min-width: 1px) and (max-width: 420px) {
  div.wrapper.article div.images img {
	margin-top: 70px;
  }
  div.main article div.aboutTheAuthor {
	padding-bottom: 30px;
	padding-top: 30px;
	width: 90%;
	margin: 0px 0 16px 0;
	border-left: none;
	border-top: 2px solid gray;
	border-bottom: 2px solid gray;
	display: block;
	float: none;
	clear: both;
 
    		
}

}

@media screen and (min-width: 320px) and (max-width: 375px) {
  div.wrapper.project section.teaser div.box {
        left: 0px;
        right: 0px;
        top: -50px;
        
   }
   section.articlehead div.user div.name-date {
	margin: 0;
	padding: 10px 0 10px 10px;
   }
   section.articlehead div.storyhead h1 {
	margin: 0 5px 0 5px;
	padding: 20px 20px;
   }
   div.main .moodImage {
  	margin: 0;
   }
   div.main > .text:first-of-type {
        margin: 120px 0 20px 0;
   }
}