/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
	
	font-family: 'Lato', sans-serif;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

button#ihavecookiesBtn {
    margin-left: 0px !important;
}
/* Cookie Dialog */
#gdpr-cookie-message {
    position: fixed;
    right: 30px;
    bottom: 30px;
    max-width: 375px;
    background-color:#d41345;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 6px 6px rgba(0,0,0,0.25);
    margin-left: 30px;
    font-family: system-ui;
}
#gdpr-cookie-message h4 {
    color: #eee;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}
#gdpr-cookie-message h5 {
    color:#eee;
  font-family:Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}
#gdpr-cookie-message p, #gdpr-cookie-message ul {
    color: white;
    font-size: 15px;
    line-height: 1.5em;
}
#gdpr-cookie-message p:last-child {
    margin-bottom: 0;
    text-align: right;
}
#gdpr-cookie-message li {
    width: 49%;
    display: inline-block;
}
#gdpr-cookie-message a {
    color: #eee;
    text-decoration: none;
    font-size: 15px;
    padding-bottom: 2px;
    border-bottom: 1px dotted rgba(255,255,255,0.75);
    transition: all 0.3s ease-in;
}
#gdpr-cookie-message a:hover {
    color: white;
    border-bottom-color: var(--red);
    transition: all 0.3s ease-in;
}
#gdpr-cookie-message button,
button#ihavecookiesBtn {
    border: none;
    background: #000;
    color: white;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 15px;
    padding: 7px;
    border-radius: 3px;
    margin-left: 15px;
    cursor: pointer;
    transition: all 0.3s ease-in;
}
#gdpr-cookie-message button:hover {
    background: #000;
   color: white;
    transition: all 0.3s ease-in;
}
button#gdpr-cookie-advanced {
    background: #000;
    color: #fff;
}
#gdpr-cookie-message button:disabled {
    opacity: 0.3;
}
#gdpr-cookie-message input[type="checkbox"] {
    float: none;
    margin-top: 0;
    margin-right: 5px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.vai{border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;

    background: transparent;

    /* inherit font & color from ancestor */
    color: inherit;
    font: inherit;

    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
    line-height: normal;

    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;

    /* Corrects inability to style clickable `input` types in iOS */
    -webkit-appearance: none;}
a{color:#222; text-decoration:none}
header{position:fixed; top:0; left:0; width:100%; background:rgba(255,255,255,0.95); z-index:9}
header .logo{float:left; width:50%; background:#d41345; padding:15px 30px; box-sizing:border-box; text-align:right;}
header .logo img{height:30px}
#p_menu{position:absolute; left:50%; top:0px; height:30px; line-height:30px; margin:15px; text-align:center; font-size:0.8em;}
#box_menu{position:fixed; top:0px; right:0px; width:50%; height:100vh; background:rgba(0,0,0,0.90); padding:100px 60px; overflow-y: scroll; box-sizing:border-box; text-align:left;
-webkit-overflow-scrolling: touch;  -webkit-transition: -webkit-transform 0.7s;  -moz-transition: -moz-transform 0.7s;  transition: transform 0.7s;  -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);  transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);   -webkit-transform: translateX(100%);-moz-transform: translateX(100%);-ms-transform: translateX(100%); -o-transform: translateX(100%);transform: translateX(100%); z-index:8;
}
.add-top{float:left; margin-top:20px!important;}
#datepicker{padding: 0 5px!important; box-sizing:border-box}
#box_menu .tabella{ display:table; box-sizing:border-box; width:100%; height:100%;}
#box_menu .tabella .cella{vertical-align:middle; display:table-cell; }
#box_menu .tabella .cella nav{float:left; width:100%;}
#box_menu .tabella .cella nav ul{float:left; width:100%; margin:0; padding:0; list-style:none}
#box_menu .tabella .cella nav ul li{float:left; width:100%; line-height:40px}
#box_menu .tabella .cella nav ul li a{color:#fff; font-size:1.84em; font-family: 'Playfair Display', serif; margin: 0; padding:0;  font-weight: normal;}
#box_menu .tabella .cella nav ul li a:hover, #box_menu a.sel{color:#d41345!important; }
#box_menu.open{-webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%);  transform: translateX(0%);}

#box_menu .tabella .cella nav ul li ul{margin:0px 20px 20px 20px}
#box_menu .tabella .cella nav ul li ul li a{color:#fff; font-size:1em; font-family: 'Playfair Display', serif; margin: 0; padding:0;  font-weight: normal;}

#book_now{position:absolute; right:0px; top:0px;  margin:15px; text-align:center; font-size:1em}
#book_now a{display:inline-block; margin:0 10px}

#slider{float:left; width:100%; height:90vh; min-height:500px; padding:5% 2%; box-sizing:border-box}
.contenuto{float:left; width:100%;  margin-top:60px; }

.focus{display:inline-block; padding:4px 8px; box-sizing:border-box; background:#d41345; font-size:0.8em; color:#fff }
.focus:hover{background:#222; color:#fff}
.add-top{margin-top:30px;}
.focus_rosa{display:inline-block; padding:8px 16px; box-sizing:border-box; background:#d41345;  color:#fff }
.focus_rosa:hover{background:#222; color:#fff}


.text_focus{color:#d41345; font-size:1.5em;  }

.intro{float:left; width:100%; min-height:600px; height:100vh; position:relative}
.box_foto{float:left; width:50%; min-height:600px; height:100vh; position:relative}
.box_testo{float:left; width:50%; min-height:600px; height:100vh; background:#FFF;display:table; padding:60px; box-sizing:border-box; position:relative;}
.cella{vertical-align:middle; display:table-cell; }
.paragrafo{margin:0 auto; width:100%; max-width:500px;}

.formatta{line-height:1.8em;}
.scroll{position:absolute; bottom:70px; left:50%; width:30px; height:auto; margin: 0 0 0 -15px; text-align:center}
.scroll img{width:30px;}

.box_testo_lungo{float:left; width:100%; background:#FFF; padding:5% 0px; box-sizing:border-box;}





.scroll a {
  
}
.scroll a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


.detail_room{float:left; width:100%; min-height:600px; height:100vh; }
.box_testo_room{float:left; width:50%; min-height:600px; height:100vh;display:table; box-sizing:border-box}
.box_foto_scroll{float:left; width:50%; min-height:600px; height:100vh; overflow:scroll; padding-top:60px; box-sizing:border-box}
.box_foto_scroll ul{float:left; width:100%; padding:0; margin:0;}
.box_foto_scroll ul li{float:left; width:100%; padding:0; margin:0px 0px 1px 0px;}
.box_foto_scroll ul li:last-child{margin-bottom:0px;}
.box_foto_scroll ul li img{float:left; width:100%; padding:0; margin:0;}





section{float:left; width:100%; height:auto; padding:5% 0px; box-sizing:border-box; }
section.ticket{ background:#222;  color:#fff}
.rooms{float:left; width:100%; }
.rooms ul{float:left; width:100%; height:auto; margin:0; padding:0; }
.rooms ul li{float:left; width:100%; height:auto; margin:0; }
.rooms ul li .testo{float:left; width:50%; height:50vh; margin:0; padding:0; display:table; }
.rooms ul li .testo .cella{ padding:5% 30px; box-sizing:border-box;}
.rooms ul li .foto{float:right; width:50%; height:50vh; magin:0; padding:0;}
.rooms ul li:nth-child(2n) .testo{float:right; }
.rooms ul li:nth-child(2n) .foto{float:left;}

.room_gallery{float:left; width:100%; margin:0; padding:5% 0%; background:#efefef;}
 .room_gallery ul{float:left; width:100%; margin:0; padding:0; list-style:none; background:#efefef;}
 .room_gallery ul li{float:left; width:100%; margin:0; padding:5% 0%; box-sizing:border-box} 
 .room_gallery ul li img{float:left; width:100%;}

.offers{float:left; width:100%;}
.offers ul{float:left; width:100%; height:auto; margin:0; padding:0; }
.offers ul li{float:left; width:100%; height:auto; margin:0;}
.offers ul li .testo{float:right; width:50%; height:50vh; min-height:500px; margin:0; padding:0; display:table; text-align:left}
.offers ul li .testo .cella{ padding:5% 30px; box-sizing:border-box;  }
.offers ul li .foto{float:left; width:50%; height:50vh; margin:0; min-height:500px; padding-top:1px; background:#fff; box-sizing:border-box}

.offers ul li .foto .contenuto_foto{ width:100%; height:100%;}



.offers ul li:nth-child(2n) .testo{background:#efefef}
.offers ul li:nth-child(2n) .foto{float:left;}








#map{position:relative; width:100%; height:100%; background:#d41345; z-index:1}

.contact{float:left; width:100%; min-height:600px; height:100vh; margin-bottom:1px }
.contact a{color:#fff}
.box_mappa{float:left; width:50%; min-height:600px; height:100vh;}
.box_testone{float:left; width:50%; min-height:600px; height:100vh; background:#d41345; color:#fff;display:table; padding:60px; box-sizing:border-box;}
.cella{vertical-align:middle; display:table-cell; }

.container{margin:0 auto; width:100%; max-width:1400px;}
.container_foto {margin:0 auto; width:100%; max-width:1800px;}
.foto_full{float:left; width:100%; height:100vh;  padding:60px; box-sizing:border-box; display:table;}
.foto_full .blocco{display:table-cell; vertical-align:bottom}

footer{float:left; width:100%; background:#fff; padding:3% 0px 0px 0px; box-sizing:border-box; font-size:0.8em; color:#999; }
footer a{color:#999}
footer .logo_footer img{height:30px}
footer ul{margin:0; padding:0; text-transform:uppercase}
footer .disclaimer{float:left; width:100%; background:#fff; margin-top:3%; background:#eee; line-height:40px;}
footer .design{text-align:right}

.t-right{text-align:right}
.t-center{text-align:center}

button{margin:0; padding:0;}

#slider{float:left; width:100%; height:90vh; min-height:500px; padding:5% 2%; box-sizing:border-box}
.Wallop-item{float:left; width:100%; height:90vh; min-height:400px; display:table; padding:5% 2%; box-sizing:border-box}
.testo_hp{opacity: 0;visibility: hidden;-webkit-transform: translateY(50px) ;transform: translateY(50px) ;-webkit-transition: opacity 0.5s, -webkit-transform 0.5s, visibility 0s 0.5s;transition: opacity 0.5s, transform 0.5s, visibility 0s 0.5s;width:100%; display:table-cell; vertical-align:bottom;  color:#fff; text-align:center}

.Wallop-item--current .testo_hp {opacity: 1; visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s;}

.testo_hp h2{font-size:3em; text-shadow: 2px 2px 2px #000000;}
.testo_hp p{font-size:1.6em; margin-bottom:20px; text-shadow: 2px 2px 2px #000;}
.pulsante_hp a{ display:inline-block; background:#7b8fa8; color:#fff; height:40px; color:#fff; line-height:40px; text-align:center; padding:0 10px}
.t_link{ display:inline-block; background:#7b8fa8; color:#fff; height:30px; color:#fff; line-height:30px; text-align:center; padding:0 10px; margin:10px 0px}


.distance{font-size:0.8em;}



section.booking{background:#d41345; color:#fff; text-align:center; padding:20px 20px 30px 20px;box-sizing: border-box}
  .col_lunga{float:left; width:18%; padding:0% 1%;}
  .col_corta{float:left; width:13%; padding:0% 1%;}

section.booking .col input[type=text], section.booking .col select{height:40px;line-height:40px;padding:0; margin:0; border:none; width:100%}
section.booking .col label{float:left; width:100%; height:35px;line-height:35px;}
section.booking .vai{float:left; width:100%; height:40px; line-height:40px; margin-top:35px; background:#000; color:#fff}









.rooms_type{float:left; width:100%;  padding:1.5%; box-sizing:border-box; background:#efefef}
.rooms_type ul{float:left; width:100%; margin:0; padding:0; list-style:none }
.rooms_type ul li{float:left; width:98%; margin:1.5%; box-sizing:border-box }
.rooms_type ul li img{float:left; width:100%; }


/* ==========================================================================
   ANIMAZIONE MENU MOBILE
   ========================================================================== */

.c-hamburger { display: inline-block;  position: relative;  overflow: hidden;  margin: 0;  padding: 0;  width: 30px; height: 30px;  font-size: 0;  text-indent: -9999px;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  box-shadow: none;  border-radius: none;  border: none; cursor: pointer;-webkit-transition: background 0.3s;transition: background 0.3s;background:none; top:-5px;}
.c-hamburger:focus { outline: none;}
.c-hamburger span { display: block;  position: absolute; top: 13px; left: 3px; right: 3px; height: 4px; background: #000;}
.c-hamburger span::before,.c-hamburger span::after {  position: absolute;  display: block; left: 0;  width: 100%; height: 4px; background-color: #000; content:"";}
.c-hamburger span::before {top: -7px;}
.c-hamburger span::after {bottom: -7px;}
.c-hamburger--rot { background-color: none;}
.c-hamburger--rot span {-webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s;}
.c-hamburger--rot.is-active span {-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg); transform: rotate(90deg);}

.mailing{float:left; width:100%; text-align:center}
.offerta, .offerta a{color:#fff}

@media only screen and (max-width: 960px) {

.intro{height:auto;}
.box_foto{ width:100%; height:80vh; margin-top:60px;}
.box_testo{width:100%; height:auto; padding:5%; }
.paragrafo{width:100%; max-width:none;}





.detail_room{height:auto; margin-top:60px; min-height:auto; padding:0px}
.box_testo_room{width:100%; height:auto; padding:5%; min-height:auto; }
.box_foto_scroll{float:left; width:100%; min-height:auto; height:auto; overflow:none; margin:0; padding:0;}
.box_foto_scroll ul li{float:left; width:100%; padding:0; margin:2px 0px;}
.box_foto_scroll ul li:last-child{margin:2px 0px 0px 0px;}
.box_foto_scroll ul li img{float:left; width:100%; padding:0; margin:0;}






header{position:fixed; top:0; left:0; width:100%; background:#3CF}
header .logo{float:left; width:100%; background:#d41345; padding:15px 10px; box-sizing:border-box}
header .logo img{float:left; height:30px}

section{ padding:5% 0px;}

.foto_full{height:80vh;}
.scroll{display:none}

#p_menu{ left: auto; right:0px;  }
#box_menu{width:100%; padding:140px 5%; text-align:center;box-sizing:border-box}

#book_now{position:absolute; top:70px; left:0; right:0px;  width:100%; box-sizing:border-box; margin:0px; text-align:left;}
#book_now a{color:#fff}




.c-hamburger span {  background: #fff;}
.c-hamburger span::before,.c-hamburger span::after {   background-color: #fff; }
.eti_menu{display:none}

footer{ line-height:2em; padding:20px 0px 0px 0px;}
footer .logo_footer{float:left; width:100%; }
footer .logo_footer img{height:25px}
footer ul{margin:10px 0px; padding:0; list-style: none; }

.focus{display:inline-block; padding:8px 16px;  margin:0 auto;  text-align:center ; line-height:1.4em }

.focus_rosa{display:inline-block; width:auto; margin:0 auto;  text-align:center }
footer .disclaimer{float:left; width:100%; background:#fff; margin-top:20px; background:#eee; line-height:20px; font-size:0.7em; text-align:center}
footer .design{text-align:center}





.intro{ min-height:auto}
.box_foto{min-height:auto}
.box_testo{min-height:auto}


.box_testo_lungo{padding:5% 0px;}

#box_menu .tabella .cella nav ul li ul{margin:0px 0px 10px 0px}
#box_menu .tabella .cella nav ul li ul li a{color:#fff; font-size:1em; font-family: 'Playfair Display', serif; margin: 0; padding:0;  font-weight: normal;}

.rooms ul li .testo{float:left; width:100%; height:auto; margin:0; padding:0; display:table; text-align:center}
.rooms ul li .testo .cella{width:100%; padding:5%; box-sizing:border-box}
.rooms ul li .foto{float:left; width:100%; height:50vh; margin:0; padding:0;}
.rooms ul li:nth-child(2n) .testo{float:left; text-align:center}

.offers{float:left; width:100%; }
.offers ul{float:left; width:100%; height:auto; margin:0; padding:0; }
.offers ul li{float:left; width:100%; height:auto; margin:0; }
.offers ul li .testo{float:left; width:100%; height:auto; min-height:auto; margin:0; padding:0; display:table;}
.offers ul li .testo .cella{ width:100%; padding:5%; box-sizing:border-box}
.offers ul li .foto{float:left; width:100%; height:50vh; min-height:auto; margin:0; padding:0;}






.contact{float:left; width:100%; min-height:auto; height:auto;}
.box_mappa{float:left; width:100%; height:80vh;}
.box_testone{float:left; width:100%; min-height:auto; height:auto; padding:5%; text-align:center; margin-top:61px;}


section.booking{ padding:20px 0px 30px 0px;}
  .col_lunga{float:left; width:98%; padding:2% 1%}
  .col_corta{float:left; width:48%; padding:2% 1%}
section.booking .col input[type=text], section.booking .col select{float:left; width:100%;}
section.booking .vai{float:left; width:100%; height:50px;line-height:50px; margin-top:2%; background:#000; color:#fff}



	






}


@media only screen and (max-width: 768px) {
	footer{ 
	text-align:center;}
	}




/* #BASE TYPOGRAPHY
================================================== */

/*
=================================================
	Basic text sizing
=================================================
	Set your main font size for paragraph

	Reference
	62.5%  => 10px
	68.8%  => 11px
	75%    => 12px
	81.3%  => 13px
	87.5%  => 14px
	100%   => 16px
	112.5% => 18px
	125%   => 20px

*/



/*
Using a Traditional scale: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
	if base is 16:
	h1 = 48 pixels → 48 ÷ 16 = 3 em
	h2 = 36 pixels → 36 ÷ 16 = 2.25 em
	h3 = 24 pixels → 24 ÷ 16 = 1.5 em
	h4 = 21 pixels → 21 ÷ 16 = 1.3125 em
	h5 = 18 pixels → 18 ÷ 16 = 1.125 em
	h6 = 16 pixels → 16 ÷ 16 = 1 em
*/
h1, h2, h3, h4, h5, h6 {font-family: 'Playfair Display', serif; margin: 0; padding:0;  font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 3em; line-height: 1.15em; }
h2 { font-size: 2.25em; line-height: 1.2em; }
h3 { font-size: 1.5em; line-height: 1.25em;}
h4 { font-size: 1.3125em; line-height: 1.3em; }
h5 { font-size: 1.125em; line-height: 1.35em; }
h6 { font-size: 1em; line-height: 1.4em; }







/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait + Landscape)




/* #Base 960 Grid
================================================== */

.container { 
	width: 1120px; 
	margin: 0 auto; 
}

.row { float:left; 
     width:100%;
	margin:10px 0px;	
}

.column, .columns { 
	float: left; 
	margin: 0 10px;
}

.container .column,
	.container .columns                         { margin-left: 10px; margin-right: 10px;  }
	.column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
	.column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
	.alpha.omega                                { margin-left: 0; margin-right: 0; }


/*****************************
16 Column
((960/16) - 20) = 40
*****************************/





/* Base Grid */
.container .one.column,
.container .one.columns                     { width: 50px;  }
.container .two.columns                     { width: 120px; }
.container .three.columns                   { width: 190px; }
.container .four.columns                    { width: 260px; }
.container .five.columns                    { width: 330px; }
.container .six.columns                     { width: 400px; }
.container .seven.columns                   { width: 470px; }
.container .eight.columns                   { width: 540px; }
.container .nine.columns                    { width: 610px; }
.container .ten.columns                     { width: 680px; }
.container .eleven.columns                  { width: 750px; }
.container .twelve.columns                  { width: 820px; }
.container .thirteen.columns                { width: 890px; }
.container .fourteen.columns                { width: 960px; }
.container .fifteen.columns                 { width: 1030px; }
.container .sixteen.columns                 { width: 1100px; }

.container .one-half.column          	    { width: 540px; } /* ((960/2) - 20) = 460 */
.container .one-third.column                { width: 353.333px; } /* ((960/3) - 20) = 300 */
.container .two-thirds.column               { width: 726.666px; } /* (((960/3) *2) - 20) = 620 */
.container .one-quarter.column              { width: 260px; } /* ((960/4) - 20) = 220 */
.container .three-quarters.column           { width: 820px; } /* (((960/4) *3) - 20) = 700 */
.container .one-fifth.column              	{ width: 204px; } /* ((960/5) - 20) = 172 */
.container .two-fifths.column              	{ width: 428px; } /* (((960/5) *2) - 20) = 364 */
.container .three-fifths.column             { width: 652px; } /* (((960/5) *3) - 20) = 556 */
.container .four-fifths.column              { width: 876px; } /* (((960/5) *4) - 20) = 748 */

/* Offsets */
.container .offset-by-one                   { padding-left: 70px;  }
.container .offset-by-two                   { padding-left: 140px; }
.container .offset-by-three                 { padding-left: 210px; }
.container .offset-by-four                  { padding-left: 280px; }
.container .offset-by-five                  { padding-left: 350px; }
.container .offset-by-six                   { padding-left: 420px; }
.container .offset-by-seven                 { padding-left: 490px; }
.container .offset-by-eight                 { padding-left: 560px; }
.container .offset-by-nine                  { padding-left: 630px; }
.container .offset-by-ten                   { padding-left: 700px; }
.container .offset-by-eleven                { padding-left: 770px; }
.container .offset-by-twelve                { padding-left: 840px; }
.container .offset-by-thirteen              { padding-left: 910px; }
.container .offset-by-fourteen              { padding-left: 980px; }
.container .offset-by-fifteen               { padding-left: 1050px; }











/*****************************
16 Column
((960/16) - 20) = 40
*****************************/
@media only screen and (min-width: 959px) and (max-width: 1200px) {
	
.container { 
	width: 960px; 
	margin: 0 auto; 
}	
	
	
/* Base Grid */
.container .one.column,
.container .one.columns                     { width: 40px;  }
.container .two.columns                     { width: 100px; }
.container .three.columns                   { width: 160px; }
.container .four.columns                    { width: 220px; }
.container .five.columns                    { width: 280px; }
.container .six.columns                     { width: 340px; }
.container .seven.columns                   { width: 400px; }
.container .eight.columns                   { width: 460px; }
.container .nine.columns                    { width: 520px; }
.container .ten.columns                     { width: 580px; }
.container .eleven.columns                  { width: 640px; }
.container .twelve.columns                  { width: 700px; }
.container .thirteen.columns                { width: 760px; }
.container .fourteen.columns                { width: 820px; }
.container .fifteen.columns                 { width: 880px; }
.container .sixteen.columns                 { width: 940px; }

.container .one-half.column          	    { width: 460px; } /* ((960/2) - 20) = 460 */
.container .one-third.column                { width: 300px; } /* ((960/3) - 20) = 300 */
.container .two-thirds.column               { width: 620px; } /* (((960/3) *2) - 20) = 620 */
.container .one-quarter.column              { width: 220px; } /* ((960/4) - 20) = 220 */
.container .three-quarters.column           { width: 700px; } /* (((960/4) *3) - 20) = 700 */
.container .one-fifth.column              	{ width: 172px; } /* ((960/5) - 20) = 172 */
.container .two-fifths.column              	{ width: 364px; } /* (((960/5) *2) - 20) = 364 */
.container .three-fifths.column             { width: 556px; } /* (((960/5) *3) - 20) = 556 */
.container .four-fifths.column              { width: 748px; } /* (((960/5) *4) - 20) = 748 */

/* Offsets */
.container .offset-by-one                   { padding-left: 60px;  }
.container .offset-by-two                   { padding-left: 120px; }
.container .offset-by-three                 { padding-left: 180px; }
.container .offset-by-four                  { padding-left: 240px; }
.container .offset-by-five                  { padding-left: 300px; }
.container .offset-by-six                   { padding-left: 360px; }
.container .offset-by-seven                 { padding-left: 420px; }
.container .offset-by-eight                 { padding-left: 480px; }
.container .offset-by-nine                  { padding-left: 540px; }
.container .offset-by-ten                   { padding-left: 600px; }
.container .offset-by-eleven                { padding-left: 660px; }
.container .offset-by-twelve                { padding-left: 720px; }
.container .offset-by-thirteen              { padding-left: 780px; }
.container .offset-by-fourteen              { padding-left: 840px; }
.container .offset-by-fifteen               { padding-left: 900px; }
}


/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

/*****************************
16 Column
((768/16) - 20) = 28
*****************************/

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container                                  { width: 768px; }
	
	.container .one.column,
	.container .one.columns                     { width: 28px; }
	.container .two.columns                     { width: 76px; }
	.container .three.columns                   { width: 124px; }
	.container .four.columns                    { width: 172px; }
	.container .five.columns                    { width: 220px; }
	.container .six.columns                     { width: 268px; }
	.container .seven.columns                   { width: 316px; }
	.container .eight.columns                   { width: 364px; }
	.container .nine.columns                    { width: 412px; }
	.container .ten.columns                     { width: 460px; }
	.container .eleven.columns                  { width: 508px; }
	.container .twelve.columns                  { width: 556px; }
	.container .thirteen.columns                { width: 604px; }
	.container .fourteen.columns                { width: 652px; }
	.container .fifteen.columns                 { width: 700px; }
	.container .sixteen.columns                 { width: 748px; }
	
	.container .one-half.column          	    { width: 364px; } /* ((768/2) - 20) = 364 */
	.container .one-third.column                { width: 236px; } /* ((768/3) - 20) = 236 */
	.container .two-thirds.column               { width: 492px; } /* (((768/3) *2) - 20) = 492 */
	.container .one-quarter.column              { width: 172px; } /* ((768/4) - 20) = 172 */
	.container .three-quarters.column           { width: 556px; } /* (((768/4) *3) - 20) = 556 */
	.container .one-fifth.column              	{ width: 133.6px; } /* ((768/5) - 20) = 133.6 */
	.container .two-fifths.column              	{ width: 287.2px; } /* (((768/5) *2) - 20) = 287.2 */
	.container .three-fifths.column             { width: 440.8px; } /* (((768/5) *3) - 20) = 440.8 */
	.container .four-fifths.column              { width: 594.4px; } /* (((768/5) *4) - 20) = 594.4 */

	/* Offsets */
	.container .offset-by-one                   { padding-left: 48px; }
	.container .offset-by-two                   { padding-left: 96px; }
	.container .offset-by-three                 { padding-left: 144px; }
	.container .offset-by-four                  { padding-left: 192px; }
	.container .offset-by-five                  { padding-left: 240px; }
	.container .offset-by-six                   { padding-left: 288px; }
	.container .offset-by-seven                 { padding-left: 336px; }
	.container .offset-by-eight                 { padding-left: 384px; }
	.container .offset-by-nine                  { padding-left: 432px; }
	.container .offset-by-ten                   { padding-left: 480px; }
	.container .offset-by-eleven                { padding-left: 528px; }
	.container .offset-by-twelve                { padding-left: 576px; }
	.container .offset-by-thirteen              { padding-left: 624px; }
	.container .offset-by-fourteen              { padding-left: 672px; }
	.container .offset-by-fifteen               { padding-left: 720px; }
}

/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
	
	.container { width: 100%; padding: 0 20px; box-sizing:border-box }
	.container .columns,
	.container .column { margin: 0}

	.container .one.column,
	.container .one.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns,
	.container .thirteen.columns,
	.container .fourteen.columns,
	.container .fifteen.columns,
	.container .sixteen.columns,
	.container .one-half.column,
	.container .one-third.column,
	.container .two-thirds.column,
	.container .one-quarter.column,
	.container .three-quarters.column, 
	.container .one-fifth.column,  
	.container .two-fifths.column,  
	.container .three-fifths.column,  
	.container .four-fifths.column { width: 100%; }

	/* Offsets */
	.container .offset-by-one,
	.container .offset-by-two,
	.container .offset-by-three,
	.container .offset-by-four,
	.container .offset-by-five,
	.container .offset-by-six,
	.container .offset-by-seven,
	.container .offset-by-eight,
	.container .offset-by-nine,
	.container .offset-by-ten,
	.container .offset-by-eleven,
	.container .offset-by-twelve,
	.container .offset-by-thirteen,
	.container .offset-by-fourteen,
	.container .offset-by-fifteen { padding-left: 0; }

}





/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}