/*

    .___   
  __| _/____    ____ _____   
 / __ |\__  \  /    \\__  \  
/ /_/ | / __ \|   |  \/ __ \_
\____ |(____  /___|  (____  /
     \/     \/     \/     \/   Design Meets Art.
 
 */


/*M E D I A    C A L L S*/

/*SMARTPHONE*/

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

@font-face {
  font-family:"sarge";
  src: url("srgt6pack.ttf") format("truetype");
}

@font-face {
  font-family:"champs";
    src: url('../img/champs.ttf') format('truetype');
}
	
	.canvas{
		width:95.9vw;
		height:100vw;
		margin-left: .5vw;
		margin-top: 2.2vw;
		background-color: #fff8ee;
	}

	.call{
		height: 8.5%;
	}

	p#action {
		font-size: 450%;
		margin-top: 2%;
	}

	figure#toss {
		width: 200%;
        font-size: 240%;
        margin-top: 190%;
        margin-left: -67%;
        transform: rotate(270deg);
        	-moz-transform: rotate(270deg);
			-ms-transform: rotate(270deg);
			-o-transform: rotate(270deg);
			-webkit-transform: rotate(270deg); 															
        font-family: sarge;
        color: #39828f;
        text-align: center;
     }

     .ltbox {
 		float: left;
 		background-color: #4ab6cc;
 		width: 30%;
 		height: 8.5%;
 		
 	}


			 	figure#box1 {
			 		float: left;
			 		width: 20%;
			 		height: 60%;
			 		margin-top: 6.5%;
			 		
			 		background-color: #245f6a; 		
			 	}
			 	figure#box2 {
			 		float: left;
			 		width: 20%;
			 		height: 60%;
			 		margin-top: 6.5%;
			 		background-color: #fbda95;
			 	}
			 	figure#box3 {
			 		float: left;
			 		width: 20%;
			 		height: 60%;
			 		margin-top: 6.5%;
			 		background-color: #6FCADC;
			 	}
			 	figure#box4 {
			 		float: left;
			 		width: 20%;
			 		height: 60%;
			 		margin-top: 6.5%;
			 		background-color: #afd275;
			 	}
			 	figure#box5 {
			 		float: left;
			 		width: 20%;
			 		height: 60%;
			 		margin-top: 6.5%;
			 		background-color: #e7717d;
			 	}

 	.logobox {	  
	  float:left;
	  width: 60%;
	  height: 15.6%; 
	 }

	 img.logo {
		  float: left;
		  margin-top: 0;
		  margin-left: 1%;
		  width: 48%;
		  height: 10.2%;
		}

	img.logo-b {
		  float: left;
		  margin-left: -10%;
		  margin-top: 16%;
		  width: 41%;
		  height: 37%;
		 }

	.icon {
			display: inline-block;
			float:right;
			margin-right: 10%;
			margin-top: 6%;
			width: 16%;
		}

 	.navbar {
 		display: inline-block;
		float: left;
 		height: 15.6%;
 		width: 40%; 		
 	}

 	.navbar a {
 		display: none;
 	}

 	.dropdown .dropbtn {
	  display: none;
	}

	.lines { 
		float: left;
		margin-top: -.5%;
		width: 100%;
		height: 1.5%;
	}
	

/*MAIN SECTION*/

.grid:after, .grid:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

	.grid{
	text-align: center;
	background-color: #fff8ee;
	}


article.new-0 {
	float: left;
	 width: 15%;
	 margin-right: 5%;
	 margin-top: 4%;
	 text-align: center;	
}
	.texty{
		width: 105%;
		margin-top: 50%;
	}


		.toss {
	        width: 100%;
	        font-size: 100%;
	        margin-top: 75%;
	        font-family: sarge;
	        
			color: #39828f;	
	        
	        transform: rotate(270deg);
	        	-moz-transform: rotate(270deg);
				-ms-transform: rotate(270deg);
				-o-transform: rotate(270deg);
				-webkit-transform: rotate(270deg);			        
		}  

article.new-1 {
	float: left;
	 font-size: 100%;
	 width: 20%;
	 margin-right: 7%;  
	 margin-top: 2%;
	}

article.new-2 {
	float: left;
	font-size: 100%;
	 width: 20%;
	 margin-right: 7%;  
	 margin-top: 2%;
	}

article.new-3 {
	float: left;
	font-size: 100%;
	 width: 20%;
	 margin-top: 2%;
	}

.pic {
	width: 10.7vw;
	width: 10.74vh;
	box-shadow: 5px 5px 10px #808080;
}

.pac, .pec {
	width: 10.7vw;
	width: 10.74vh;
	box-shadow: 5px 5px 10px #808080;	
}


.grid:after {
  content: "";
  display: table;
  clear: both;
  margin-bottom: 2.8%;
}

.bot {
	width: 100%;
	height: 8.6%;
	text-align: center;
	margin-top:  5vw;
	margin-bottom: 3vw;
	background-image: url("../img/bot-bar-mob.jpg"); 
	
}

span {
	font-family: champs;
	font-weight: bold;
}

}