/*

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

@font-face {
  font-family:"champs";
    src: url('../img/champs.ttf') format('truetype');
}

.canvas {  
  width: 100vw;
  height: 100vw;
  background-color: #fff8ee;  
 }

																								
	.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: 3%;
	width: 15%;
}


.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: 2.3vw;
  font-family: georgia;
  color: #0B2539;
  padding: 6vw .1vw;
  text-decoration: none;
  margin-top: .5%;
  margin-right: 4%
}

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

	
	/*Characteristics menu & contact in nav bar ONLY*/
	.dropdown .dropbtn {
	  font-size: 2.3vw;  
	  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*/


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

	.graphic-one {				/*holds figure; invisible*/
		display: inline-block;
	    float: left;
	    width: 30%;
	    height: 100%;   
	    background-color: #fff8ee;
		
	    }
		
	 		/*rotated side text*/

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


.case {
		float: left;
	    width: 70%;
	    height: 96%;
	    margin-top: 4%;
	    background-color: #fff8ee;
		font-size: 3vw;
		color: white;
		text-align: center
		background-color: #fff8ee;
	}	

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

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