/*

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

@media screen and (min-width: 951px) {
}


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

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


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


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

 	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: .7%;
	 	font-size: 150%;
	 	font-family: georgia;
	 	font-weight: bold;
	 	font-style: italic;
	 	text-align: right;
	 	margin-right: 10%;	 	
	 }

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


	/*LOGO AND NAVBAR ROW*/

	.logobox {
	  float:left;
	  width: 50%;
	  height: 5.6%; 
	  background-color: #fff8ee; 
	  
	  
	}
	  
		 img.logo {
	
		  float: left;
		  margin-top: -.3%;
		  margin-left: 1%;
		  width: 19%;
		  height: 20.2%;
		 }

		 img.logo-b {
	
		  float: left;
		  margin-top: 5.5%;
		  margin-left: -5%;
		  width: 20%;
		  height: 85%;
		 }

	.icon {
		display: none;
	}
	

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

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

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

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

	.4avbar 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: 7vw;
	  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*/

	.graphic-one {
		float: left;
	    width: 15%;
	    height: 100%;   
		
	    }
		
			figure#toss {
				width: 225%;
		        font-size: 250%;
		        margin-top: 120%;
		        margin-left: -60%;
		        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: 80%;
	    height: 50%;
	    margin-top: 2%;

}

.clicky {
		float: left;
	    width: 33%;
	    height: 60%;
	    border: 2px solid #fff8ee;	 
	    text-align: center;		 
	    }

	    	.clickword {
	    		font-size: 185%;
	    		color: #fff8ee;
	    		text-align: center;	     		
	    	}

.clicky:hover {
	border: 2px solid blue;
}

.pikky {
	float: left;
	width: 98.5%;
	height: 45%;
	opacity: 90%;
	margin-top: .5%;
	border: 4px solid teal;
	background-image: url("../img/group2.jpg");
	background-position: 10% 50%;
	background-size: 100% 170%;

}

.lkpic {
	width: 65%;
	height: 60%;
	opacity: 60%;
}

.case-two  {
		float: left;
	    width: 70%;
	    height: 40%;
	    margin-top: -1%;
}



.sticky {
	float: left;
	display: block;
	width: 112.5%;
	height: 130%;	
	text-align: center;
	color: #fff8ee;
	margin-top: 6.5%;
}


.addy {
	font-size: 200%;
	color: #fff8ee;
	text-align: center;
}

		
.texto {
		width: 100%;
		font-size: 180%;
		color: #fff8ee;
		text-align: center;
		}

span {
	color: #245f6a;
	font-weight: bold;			
}

.reserve {
		font-size: 200%;
		color: #fff8ee;
		text-align: center;
	}

	.up {
		font-size: 180%;
		text-decoration: none;
		color: #fff8ee;
		text-align: center;

	}

	
	.smedia {
		width: 15%;
		height: 18%;
		}

	   

}