/*

    .___   
  __| _/____    ____ _____   
 / __ |\__  \  /    \\__  \  
/ /_/ | / __ \|   |  \/ __ \_
\____ |(____  /___|  (____  /
     \/     \/     \/     \/   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("../img/srgt6pack.ttf") format("truetype");
}

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

	}
	.call{
		height: 8.5%;
	}

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


     .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%; 
	  background-color: #fff8ee; 
	  
	}

	 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%;
 		background-color: #fff8ee;	
 	}

 	.navbar a {
 		display: none;
 	}

 	.dropdown .dropbtn {
	  display: none;
	}

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

/*MAIN SECTION*/

section#back {
		float: left;
	    width: 100%;
	    height: 148%;  		/* tablet 141px* Mobile 151px*/
	    background-color: #fff8ee;
	}

	.graphic-one {
		float: left;
	    width: 30%;
	    height: 148%;		
	    }
		
			figure#toss {
				width: 300%;
		        font-size: 220%;
		        margin-top: 110%;
		        margin-left: -117%;
		        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;
		     }


.case {
		float: left;
	    width: 70%;
	    height: 140%;
	    margin-top: 4%;
	    background-color: #fff8ee;
		font-size: 1vw;
		color: white;
	}	

		
	 .addy {
	 	font-size: 400%;
	 	font-family: champs;
	 }

   
	img {
		  width: 80%;
		  height: 40%;
		  }
	
	   
}