/**
 * grade-B.css
 *
 * This file styles to mobile portrait pages
 *
 * @author    Mark de Mol
 * @version   1.0
 */
 
@media (max-device-width:1023px) and (orientation:portrait),(max-device-width:767px) and (orientation:landscape)
{

/*===================  toegevoegd door kosmas  =================== */

.row > div {
    margin: 0px auto;
    max-width: 1200px;
    padding: 0px 0px;
    position: relative;
}

/* =================== top  =================== */

.row.full-site-width .master-slider .ms-slide .ms-layer.ms-caption > p {
    font-size: 30px;
    margin-top: -1% !important;
}

/* =================== einde top ===================  */

/* =================== menu  =================== */
.row > div > div.group > .margin > .padding > .article > .margin > .padding > ul.menu {
    float: left;
    padding-left: 0px;
}


/* =================== einde menu  =================== */

/* =================== content ===================  */

.content .item-text {
    padding-left: 15px;
    padding-top: 17px;
    padding-bottom: 40px;
    float: right;
}

.item-form {
    padding-left: 26px;
    padding-top: 30px;
    padding-bottom: 33px;
    float: right;
}

.row.content {
	background-image:url(/site/media/images/achtergrond-ipad.png);
	background-repeat:no-repeat;
	background-position: -110px 0px;
}
.input-wrap .input div.prefix ~ input {
    padding-left: 13px;
    border-radius: 0px !important;
}
.input-wrap .input input, .input-wrap .input textarea {
   border-radius: 0px !important;
}
.input textarea {
   border-radius: 0px !important;
}


.lichtgrijs > div > .group > .margin > .padding > .article {
	width:50% !important;
}
.lichtgrijs .item-image {
    padding-left: 0px;
}
.lichtgrijs .item-image img,.lichtgrijs .item-video img{
    display: block;
    margin-left: auto;
    margin-right: auto;
	width:100%;
}

.article.item-image > .margin > .padding > .item-image-wrapper.text-location-3 > .image {
    float: left;
    width: 100%;
}
.lichtgrijs_referentie .article.item-image:nth-child(odd) > .margin > .padding > .item-image-wrapper > .item-image-text {
    padding: 0px 0px 0px 0px !important;
}
.lichtgrijs_referentie .article.item-image > .margin > .padding > .item-image-wrapper > .item-image-text {
    width: 100%;
    padding: 0px 0px 0px 0px !important;
}
.lichtgrijs_referentie .item-image:nth-child(even) {
    padding-top: 22px;
    padding-bottom: 22px;
    padding-left: 44px;
}
.lichtgrijs_referentie .article:nth-child(2n+1) {
    clear: both;
}
.lichtgrijs_referentie a {
    padding-right: 95px;
}

.row.lichtgrijs {
    background-color: #EDEDED;
    padding-top: 35px;
    padding-bottom: 45px;
}
/* =================== einde content  =================== */

/* =================== footer  =================== */
.row.webdesign ul {
    text-align: left !important;
}
.footer .item-text {
	width:50% !important;
}
.footer .group .article:nth-child(3),
.footer .group .article:nth-child(4) {
    padding-top: 30px;
	padding-left:0px !important;
}
/* =================== einde footer  =================== */

/*=================== einde toegevoegd door kosmas =================== */

	#devicegrade { 
		z-index:20;
	}
	
	#devicegrade > div:after { 
		content: "B";
		width:100%;
		height:100px;
	} 
	
	/*
	* width of all the groups
	*/
	.group.width-100{
		width:100%;
	}
	
	.group.width-95{
		width:100%;
	}
	
	.group.width-90{
		width:100%;
	}
	
	.group.width-85{
		width:100%;
	}
	
	.group.width-80{
		width:100%;
	}
	
	.group.width-75{
		width:75%;
	}
	
	.group.width-70{
		width:70%;
	}
	
	.group.width-66{
		width:66.6%;
	}
	
	.group.width-65{
		width:65%;
	}
	
	.group.width-60{
		width:60%;
	}
	
	.group.width-55{
		width:55%;
	}
	
	.group.width-50{
		width:50%;
	}
	
	.group.width-45{
		width:45%;
	}
	
	.group.width-40{
		width:40%;
	}
	
	.group.width-35{
		width:35%;
	}
	
	.group.width-33{
		width:33.3%;
	}
	
	.group.width-30{
		width:30%;
	}
	
	.group.width-25{
		width:25%;
	}
	
	.group.width-20{
		width:25%;
	}
	
	.group.width-15{
		width:25%;
	}
	
	.group.width-10{
		width:25%;
	}
	
	
	/*
	* custom
	*/
	
	body {
		margin-top:0px;	
	}
	
	h1 {
		margin-top:0;	
	}
	.row.header > div,
	.row.menu > div {
		padding: 0 0px;	
	}
	
	.row.header,
	.row.menu  {
		z-index:10;
		top:0;
	}

	.row.menu {
		top:109px;	

	}
	
	.row.header > div > .logo {
		width:72%;
		padding-top:25px;	
		padding-bottom:0;
		
	}	
	
	.row.header > div > .information {
		width:28%;
	}

	.row.header > div > .information .phone-numbers {
		background:none;
		border-radius:0;	
		color:#8b4c6b;
		height:auto;
		padding-bottom:0;
	}
	
	.row.header > div > .information .phone-numbers p {
		text-align:center;	
	}
	
	.row.full-site-width .master-slider .ms-slide .ms-layer.ms-caption {
		top:21% !important;	
		right:6.5% !important;
	}
	
	.row.webdesign > div > .group > .margin > .padding {
		padding-right:50px;	
	}
			
	.circle-purple {
		height:170px;	
	}
	
	.circle-purple > .circle {
		height:160px;
	}
	
	blockquote {
		padding:25px 20px;	
	}
	
	.row.middelpaars .circle-purple {
		padding-left:0;
		padding-right:0;	
	}
	
	.row.middelpaars .circle-purple > .circle {
		height:165px;
		width:180px;
	}
	.row.middelpaars .article > .margin > .padding >p {
		margin:0;	
	}
	
	.row.purple-lines > div > .group .article > .margin {
		padding-right:15px;
	}
	
	.row.purple-lines > div > .group .article > .margin > .padding {
		padding-right:15px;
	}
	
	.circle-purple {
		padding-left:7%;
		padding-right:7%;
		margin-bottom:0;
	}
	
	.row.socialmedia .group .article.width-5,
	.row.socialmedia .group .article.width-10,
	.row.socialmedia .group .article.width-15 {
		width:20%;
	}
	
	.row.socialmedia .group .article.width-20,
	.row.socialmedia .group .article.width-25,
	.row.socialmedia .group .article.width-30,
	.row.socialmedia .group .article.width-33,
	.row.socialmedia .group .article.width-40,
	.row.socialmedia .group .article.width-45,
	.row.socialmedia .group .article.width-50,
	.row.socialmedia .group .article.width-55,
	.row.socialmedia .group .article.width-60,
	.row.socialmedia .group .article.width-65,
	.row.socialmedia .group .article.width-66,
	.row.socialmedia .group .article.width-70,
	.row.socialmedia .group .article.width-75,
	.row.socialmedia .group .article.width-80,
	.row.socialmedia .group .article.width-85,
	.row.socialmedia .group .article.width-90,
	.row.socialmedia .group .article.width-95,
	.row.socialmedia .group .article.width-100 {
		width:80%;
	}
	
	.row.paars.menu.fixed {
		top: 109px;
	}
	
	
	
	
	
	
	
	
	
	
	
	
}