/* max-width and min-width is the size of the screen not the device----------- */
/* max-device-width and min-device-width is the size of the device not the screen----------- */

/* Desktop and Laptop, min-width equals the container size----------- */
/* min-width, the minimum and up----------- */
@media all 
and (min-width: 780px) {

	body {
		font-family: "neulis-neue", sans-serif;
		font-weight: 300 500;
		font-style: normal;
		font-size: 1.5vw; /*sets a font size to the whole site*/
		line-height: 1.5em; /*sets a font height or leading to the whole site*/
		background-color: #FFFFFF;
		color: #3D7BBF;; /*sets a font color to the whole site*/ 
	}

	article {
		clear: both;
	}

	img {
		width: 100%;
	}

	.header img {
		width: 60%;
		float: right;
	}

	.head1 {
		width: 32%;
		float: left;
		background-color: #CF5253;
		padding: 3.27em 4% 6.1em;
		color: #FFFFFF;
		font-size: 1.4em;
		line-height: 2em;
	} 

	.head1 p {
		font-size: 1.5em;
		color: white;
	}

	.head1 img {
		width: 100%;
		padding: 1em 0em
	}


	.mission img {
		padding: 3em 4%;
		width: 32%;
		float: left;
	}

	.head2 {
		width: 60%;
		float: right;
		background-color: #3D7BBF;
		color: #FFFFFF;
	}

	.text1 {
		width: 45%;
		padding: 2em 1% 2em 4%;
		float: left;
	}

	.text2 {
		width: 45%;
		padding: 2em 4% 2em 1%;
		float: right;
	}

	.part2{
		margin: 4em 8em 3em;
	}

	.what {
		width: 27%;
		float: left;
		padding: 0em 3% 7em;
		text-align: center;
	}

	.what img {
		width: 70%;
	}

	.title p {
		font-size: 30px;
		line-height: 1.5em;
		color: #CF5253;
	}

	.what p {
		color: #CF5253;
	}

	.what em {
		color: #3D7BBF;
	}

	.tenny {
		overflow: auto;
	}

	.text {
		width: 32%;
		float: left;
		padding: 1em 4% 0em;
	}

	.text img {
		width: 95%;
		padding: 1em 0em 0em;
	}

	.text h4 {
		font-size: 1.7em;
		font-weight: 500;
		line-height: 1.2em;
		color: #CF5253;
	}

	.text p {
		margin: 1em 0em 0em;
	}

	.color {
		width: 30%;
		float: left;
	}

	.picturez {
		width: 30%;
		float: left;
	}

	.picturez img {
		border-radius: 1.2em 0em 0em 1.2em;
	}

	.team {
		background-color: #CF5253;
		padding: 3em 3em 2em;
		margin: 2.6em 2.6em 0em;
		border-radius: 1.2em 1.2em 0em 0em;
		color: #FFFFFF;
		overflow: auto;
	}

	.team img {
		width: 40%;
	}

	.team p {
		padding: .5em 2% 0em;
	}

	.row1 img {
		width: 100%;
	}

	.row1 {
		margin-top: 1em;
	}

	.row2 img {
		width: 100%;
	}

	.row2 {
		clear: both;
	}

	.one {
		width: 29%;
		float: left;
		padding: 2.1%;
	}

	.two {
		width: 29%;
		float: left;
		padding: 2.1%;
	}

	.three {
		width: 29%;
		float: left;
		padding: 2.1%;
	}


	.support {
		background-color: #3D7BBF;
		padding: 3em 2.6em 5em;
	}

	.support img {
		width: 67%;
	}

	.options {
		padding: 1em 9em 0em;
	}

	.options p {
		color: #FFFFFF;
		font-size: 1.7em;
		line-height: 1.5em;
		padding: .5em;
		text-align: center;
	}

	footer {
		clear: both;
		padding: 1em 5em;
	}

	footer img {
		width: 30%;
	}

}



/* Smartphones (portrait and landscape), max-width equals the min-width of the ipad version, 1 column----------- */
/* max-width, the maximum and less----------- */
@media all 
and (max-width: 780px) {

	body {
		font-family: "neulis-neue", sans-serif;
		font-weight: 300 500;
		font-style: normal bold;
		font-size: 1em; /*sets a font size to the whole site*/
		line-height: 1.5em; /*sets a font height or leading to the whole site*/
		background-color: #FFFFFF;
		color: #3D7BBF;; /*sets a font color to the whole site*/ 
	}

	article {
		clear: both;
	}

	img {
		width: 100%;
	}

	.headimg {
		display: none;
	}

	.header {
		background-color: #CF5253;
		padding: 3em 2em;
		color: #FFFFFF;
	}

	.header img {
		margin-top: 1em;
	}

	.head1 p {
		font-size: 2em;
		color: white;
	}

	.mission {
		width: 100%;
		background-color: #FFFFFF;
	}

	.mission img {
		width: 88%;
		padding: 1em 6%;
	}

	.head2 {
		background-color: #3D7BBF;
		color: #FFFFFF;
		padding: 2em;
	}

	.head2 p {
		margin-top: .5em;
	}


	.part2{
		margin: 1em 3em 1.5em;
	}

	.what {
		text-align: center;
		padding: 1em;
	}

	.what img {
		width: 70%;
	}

	.what h3 {
		color: #CF5253;
	}

	.what p {
		color: #CF5253;
	}

	.what em {
		color: #3D7BBF;
	}

	.text {
		width: 100%;
		background-color: #FFFFFF;
	}

	.tenny {
		padding: 2em;
	}

	.tenny img {
		display: none;
	}

	.text img {
		display: block;
		width: 90%
	}

	.text h4 {
		font-size: 1.7em;
		font-weight: 500;
		line-height: 1.2em;
		color: #CF5253;
	}

	.text p {
		margin: 1em 0em 0em;
	}

	.team {
		background-color: #CF5253;
		padding: 2em;
		margin: 0em 2em;
		border-radius: 1.2em 1.2em 0em 0em;
		color: #FFFFFF;
		display: none;
	}

	.team img {
		width: 70%;
		margin-top: 1em;
		display: none;
	}

	.row1 img {
		width: 100%;
		display: none;
	}

	.row2 img {
		width: 100%;
		display: none;
	}

	.team p {
		display: none;
	}

	

	.support {
		background-color: #3D7BBF;
		padding: 3em 2em;
	}

	.options p {
		color: #FFFFFF;
		font-size: 1em;
		line-height: 1.1em;
		text-align: center;
		margin-top: 1em;
	}

	footer {
		clear: both;
		text-align: center;
		padding: 2em;
	}

	footer img {
		width: 70%;
	}





/* Sizes of different screens */


/* Smartphones (portrait and landscape) ----------- max-width: 500px and less */

/* iPads (portrait and landscape) ----------- 500px–900px */

/* Desktops and laptops ----------- min-width: 900-980px */

/* Large screens ----------- min-width: 980px and up */