/*

    .___   
  __| _/____    ____ _____   
 / __ |\__  \  /    \\__  \  
/ /_/ | / __ \|   |  \/ __ \_
\____ |(____  /___|  (____  /
     \/     \/     \/     \/   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");
}
	
	.canvas{
		width:96vw;
		height:100vw;
		margin-left: .3vw;
		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: 15%;
	    height: 1480%;   
		
	    }
		
			figure#toss {
				width: 500%;
		        font-size: 190%;
		        margin-top: 250%;
		        margin-left: -200%;
		        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: 60%;
	    margin-top: 4%;

}

.clicky {
		float: left;
	    width: 33%;
	    height: 60%;
	    margin-top: 4%;
	    border: 2px solid #fff8ee;	 
	    }

	    	.lks {
	    		font-size: 45%;
	    		color: #fff8ee;
	    		text-align: center;	     		
	    	}

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

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

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


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

}


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



.sticky {
	display: block;
	width: 110.8%;
	height: 130%;	
}



		
.texto {
			width: 100%;
			font-size: 100%;
			color: #245f6a;
			}

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

		.reserve {
		font-size: 110%;
	}

	.up {
		font-size: 150%;
		text-decoration: none;
		color: #fff8ee;

	}

	
	.smedia {
		width: 26%;
		height: 14%;
	}

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