/* basics */


a
{
     cursor: pointer;
     outline: 0;
}
p
{
     padding-top: 13px;
     margin: 0;
}
ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}
.clear
{
     clear: both;
}
.nowrap
{
     white-space: nowrap;
}
.inner
{
     display: inline-block;
     max-width: 700px;
     padding: 0 30px;
}
.center
{
     text-align: center;
}
.block
{
     margin: 0 auto;
     max-width: 760px;
     padding: 0 30px; 
}
.short_block
{
     margin: 0 auto;
     max-width: 590px;
     padding: 0 30px; 
}
.fade:hover
{
     opacity: 0.7;
     transition: all 0.3s ease-in-out;
}

::-webkit-input-placeholder
{
     font: 300 11px/1.8 Roboto, sans-serif;
     color: #777;
	text-transform: uppercase;
	letter-spacing: 2px;
}
::-moz-placeholder
{
     font: 300 11px/1.8 Roboto, sans-serif;
     color: #777;
	text-transform: uppercase;
	letter-spacing: 2px;
}
:-ms-input-placeholder
{  
     font: 300 11px/1.8 Roboto, sans-serif;
     color: #777;
	text-transform: uppercase;
	letter-spacing: 2px;
}
input:-webkit-autofill
{
     -webkit-box-shadow: 0 0 0 1000px white inset;
}
input:invalid
{
    box-shadow: none;
}

.btn
{
     display: inline-block;
     font: 300 14px/1 Roboto, sans-serif;
	color: #333; 
     padding: 12px 17px 13px 17px;
     text-decoration: none;
     text-align: center;
     border: 0;
     background-color: #f1f1f1;
     border-radius: 6px;
     outline: 0;
}
.btn_wide
{
     display: inline-block;
     font: 11px/1 Roboto, sans-serif;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 2px; 
     padding: 13px 18px;
     text-decoration: none;
     text-align: center;
     border: 0;
     background-color: #f1f1f1;
     border-radius: 6px;
     outline: 0;
}
.btn_large
{
     display: inline-block;
     font: 12px/1.6 'Open Sans', sans-serif;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 3px;
	width: 250px;
     padding: 13px 0;
     text-decoration: none;
     text-align: center;
     border: 2px solid #fff;
     transition: .2s;
}
.btn_large:hover
{
     background: rgba(0, 0, 0, 0.4);
}
.btn_icon
{
     display: inline-block;
     padding: 4px 11px 3px 11px;
     text-decoration: none;
     text-align: center;
     background-color: #fff;
     border-radius: 6px;
     outline: 0;
}
.slide_btn_icon
{
     display: inline-block;
     padding: 4px 11px 2px 11px;
     text-decoration: none;
     text-align: center;
     background-color: #252525;
     border-radius: 6px;
     outline: 0;
}
.btn:hover, .btn_wide:hover, .btn_icon:hover
{
     background-color: #f7f7f7;
}
.slide_btn_icon:hover
{
     background-color: #353535;
}
.slide_btn
{
     padding: 13px 0 0 18px;
}



/* fonts */


h1, h2, h3, h4
{
     color: #333;
	text-transform: uppercase;
     margin: 0;
}
h1
{
     font: 19px/1.7 'Open Sans', sans-serif;
     letter-spacing: 1px;
}
h2
{
     font: 19px/1.7 'Open Sans', sans-serif;
     letter-spacing: 2px;
}
h3
{
     font: 300 20px/1.6 'Open Sans', sans-serif;
	color: #fff;
	letter-spacing: 3px;
}
h4
{
     font: 13px/1.6 'Open Sans', sans-serif;
	letter-spacing: 3px;
	color: #fff;
}


code
{
     font: 14px/1.7 Consolas, Monaco, monospace;
     color: #333;
     background-color: #f9f9f9;
     padding: 2px;
     white-space: nowrap;
}

.low
{
     font: 300 14px/1.7 Roboto, sans-serif;
	color: #333;     
}
.lower
{
     font: 300 13px/1.7 Roboto, sans-serif;
	color: #333;     
}
.mid-low
{
     font: 300 16px/1.7 Roboto, sans-serif;
	color: #333;     
}
.mid
{
     font: 300 16px/1.9 Merriweather, serif;
	color: #333;
}
.high
{
     font: 300 11px/1.7 Roboto, sans-serif;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.higher
{
     font: 300 11px/1.7 Roboto, sans-serif;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.ital
{
     font: 300 italic 13px/1.7 Merriweather, serif;
	color: #333;
}
.large
{
     font: 300 17px/1.7 Merriweather, serif;
	color: #333;
}

.low a, .lower a, .mid-low a, .higher a 
{
     color: #57ad68;
     text-decoration: none;
}
.low a:hover, .lower a:hover, .mid-low a:hover, .higher a:hover
{
     color: #333;
}
.mid a
{
     color: #228b22;
     text-decoration: none;
}
.mid a:hover
{
     color: #333;
}
.high a
{
     color: #777;
     text-decoration: none;
}
.high a:hover
{
     color: #333;
}


.icon, .slide_icon
{
     font-size: 16px;
     color: #555;
     vertical-align: text-top;
}
.slide_icon
{
     color: #ccc;
}


/* lo */


#head_1, #head_2, #head_3, #head_4, #head_5, #head_6, #head_7, #head_8, #head_9, #head_10, #head_11, #head_12, #head_13, #head_14, #head_15, #head_16, #head_17, #head_18
{
     background-size: cover;
     background-image: url('../img/beach.jpg');
     height: 560px;
}
#head_2
{
     background-image: url('../img/radio1.jpg');
}
#head_3
{
     background-image: url('../img/palm.jpg');
}
#head_4
{
     background-image: url('../img/shop.jpg');
}
#head_5
{
     background-image: url('../img/store.jpg');
}
#head_6
{
     background-image: url('../img/jump.jpg');
}
#head_7
{
     background-image: url('../img/tow.jpg');
}
#head_8
{
     background-image: url('../img/sleep.jpg');
}
#head_9
{
     background-image: url('../img/green.jpg');
}
#head_10
{
     background-image: url('../img/beef.jpg');
}
#head_11
{
     background-image: url('../img/dive.jpg');
}
#head_12
{
     background-image: url('../img/jetty.jpg');
}
#head_13
{
     background-image: url('../img/spectrum.jpg');
}
#head_14
{
     background-image: url('../img/road.jpg');
}
#head_15
{
     background-image: url('../img/dock.jpg');
}
#head_16
{
     background-image: url('../img/radio4.jpg');
}
#head_17
{
     background-image: url('../img/bus.jpg');
}
#head_18
{
     background-image: url('../img/wagon.jpg');
}

.front_block
{
     padding: 39px 0 31px 0;
     border-bottom: 1px solid #f3f3f3;
}
.coder
{
     display: inline-block;
     width: 100%;
     font: 14px/1.2 Consolas, Monaco, monospace;
     color: #333;
     border: 0;
     margin: 0;
     background-color: #f9f9f9;
     resize: none;    
}
.large_input
{
     font: 13px/1.6 'open sans', sans-serif;
	color: #333;
	padding: 13px;
	width: 230px;
	border: 1px solid #e3e3e3;
	border-radius: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
     box-shadow: none; 
	outline: 0;
	margin: 0;
}
.shop_table
{
     margin: 9px auto 0 auto;
}
.shop_item
{
     width: 170px;
     text-align: center;
     padding: 10px;
     
}

.also
{
     padding-top: 13px;
     line-height: 2.2;
}


/* head */


.screen
{
     display: none;
     position: fixed;
     top: 0;
     left 0;
     width: 100%;
     height: 100%;
     z-index: 400;
}
.slide
{
     position: fixed;
     top: 0;
     right: -330px;
     width: 330px;
     height: 100%;
     background-color: #252525;
     z-index: 500;
     overflow-y: auto;
}
.slide-toggle
{
     cursor: pointer;     
}
.slide_item, .slide_item_head
{
     display: inline-block;
     font: 300 11px/1.7 Roboto, sans-serif;
	color: #999;
	text-decoration: none;
	padding: 3px 3px 3px 30px;
}
.slide_item
{
	text-transform: uppercase;
	letter-spacing: 2px;
}
.slide_item_head
{
     font-size: 23px;
     color: #d7d7d7;
     padding: 17px 3px 9px 30px;
}
.slide_item:hover, .slide_item_head:hover
{
     color: #f3f3f3;
}

#head
{
     position: fixed;
     top: 0;
     width: 100%;
     height: 48px;
     background-color: #fff;
     z-index: 100;
}
.head_item
{
     float: left;
     font: 300 11px/1 Roboto, sans-serif;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 19px 12px 0 12px;
	height: 35px;
	box-sizing: border-box;
	transition: .2s;
}
.head_img
{
     float: left;
     padding: 7px 16px 0 7px;
}
.head_icon
{
     float: left;
	padding: 15px 14px 0 14px;
	box-sizing: border-box;
}
.head_item_first
{
     padding-left: 0;
}
.head_item:hover
{
     color: #333;
}




/* responsive */


@media screen and (max-width: 990px) 
{
     .body-left
     {
          padding: 30px;
     }
     .body-right
     {
          display: none;
     }
}


.col4, .col8
{
     margin-bottom: 20px;
     text-align: center;
     padding: 20px 0;
}
.col5, .col6, .col7
{
     padding: 20px 0;
}
.col4_front
{
     text-align: left;
     padding: 0;
}
.col8_front
{
     text-align: left;
     padding: 0;
}