/*

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

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

		/*TABLET*/


@media screen and (min-width: 570px) and (max-width: 950px){

	
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@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: 98vw;
  height: 100vw;  
 }

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

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


		 p#action {
		 	color: #fff8ee;
		 	margin-top: .3%;
		 	font-size: 250%;
		 	font-family: georgia;
		 	font-weight: bold;
		 	font-style: italic;
		 	text-align: right;
		 	margin-right: 10%;	 	
		 }

.call {
	  float:left;
	  width: 70%;
	  height: 2.8%;
	  background-color: #4ab6cc;
	  padding: 0;
	  margin: 0;
	  color: white;
	  font-family: georgia;
	  text-align: center;
	  font-size: .8vw;
	  
	 }


		
	/*LOGO AND NAVBAR ROW*/

.logobox {
  display: inline-block;
  float:left;
  width: 40%;
  height: 10.6%; 
  background-color: #fff8ee;   
}
	  
		 img.logo {
		  display: inline;
		  float: left;
		  margin-top: 0;
		  margin-left: 0;
		  width: 47%;
		  height: 23.2%;
		 }


		img.logo-b {
		  display: inline;
		  float: left;
		  margin-top: 15%;
		  margin-left: -12%;
		  width: 45%;
		  height: 60%;
		 }

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



.navbar {
	display: inline-block;
	float: left;
	width: 60%	;
	height: 10.6%;
	background-color: #fff8ee;	
}

button {
	display: none;
}

.navbar a {
display: none;
  float: right;
  font-size: 2vw;
  font-family: georgia;
  color: #0B2539;
  padding: 6vw .1vw;
  text-decoration: none;
  margin-top: .8%;
  margin-right: 4%
}

/* Container for menu & contact in nav bar ONLY*/
.dropdown {
  float: right;
  overflow: hidden;
  margin-top: .8%;
  margin-right: 5%	  
}

	
	/*Characteristics menu & contact in nav bar ONLY*/
	.dropdown .dropbtn {
	  font-size: 2.0vw;  
	  font-family: georgia;
	  border: none;
	  outline: none;
	  color: #0B2539;
	  padding: 6vw .4vw;
	  background-color: inherit;
	  
	  }

			.navbar a:hover, .dropdown:hover .dropbtn {
			 
			}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #255F6B;
	  min-width: 25px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  top: 8vw;
	  z-index: 1;
	}

	.dropdown-content a {
	  float: none;
	  color: #fff8ee;
	  padding: .5vw .5vw;
	  text-decoration: none;
	  display: block;
	  text-align: left;
	}

			.dropdown-content a:hover {
			 	 background-color: maroon;
			}

	.dropdown:hover .dropdown-content {
	  display: block;
	}


/*LINES*/

.lines { 
	float: left;
	margin-top: -.5%;
	width: 100%;
	height: .6%;
}
			
		.ltblue-line {
		float: left;
		background-color: #4ab6cc;
		color: white;
		width: 100%;
		height: 100%;
		text-align: center;    
		}  
			

			/*MAIN SECTION*/

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

	.grid{
	text-align: center;
}


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


	/*	.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: 155%;
	 width: 20%;
	 margin-right: 7%;  
	 margin-top: -5%;
	}

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

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

.pic {
	width: 20.7vw;
	height: 15.74vh;
	box-shadow: 5px 5px 10px #808080;
}

.pac {
	width: 20.7vw;
	height: 15.74vh;
	box-shadow: 5px 5px 10px #808080;
}

.pec {
	width: 20.7vw;
	height: 15.74vh;
	box-shadow: 5px 5px 10px #808080;
}


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

.bot {
width: 100%;
	height: 5.6%;
	text-align: center;
	margin-top: 7vw;
	margin-bottom: 2vw;
	background-color: #fff8ee;
	background-image: url("../img/botfood-tab.jpg"); 
}

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

}