// <weight>: Use a value from 300 to 800
// <uniquifier>: Use a unique and descriptive class name


.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


.cormorant-garamond-<uniquifier> {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body {
	font-family: 'Open Sans';
	height:100%;
	width:100%;
	    margin: 0px;
	background-image: url(img/bg.jpg);
	background-repeat:no-repeat;/*we want to have one single image not a repeated one*/
	background-size:cover;/*this sets the image to fullscreen covering the whole screen*/
	    background-attachment: fixed;
	/*css hack for ie*/
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
	-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}

.main-frame {
    max-width: 800px;
    margin: 0px auto;
    padding: 12px;
}

img.tbilisi {
    max-width: 100%;
	-webkit-box-shadow: 0px 4px 17px 0px rgba(34, 60, 80, 0.2);
	-moz-box-shadow: 0px 4px 17px 0px rgba(34, 60, 80, 0.2);
	box-shadow: 0px 4px 17px 0px rgba(34, 60, 80, 0.2);
}

h1 {
    text-align: center;
    margin: 0px;
    padding: 10px 20px;
    color: #B66A00;
    font-size: 2em;
    font-family: garamond;
}

h2 {
    color: #2C3E50;
    text-align: center;
	font-family: garamond;
}

h3 {
    text-align: center;
	font-family: garamond;
}

img  {
    max-width: 100%;
    clear: both;
}

p {
	    font-family: 'Open Sans';
    text-indent: 24px;
    text-align: justify;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;   
    -webkit-hyphenate-limit-zone: 8%;

    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;  
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;

    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;   
    -ms-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;   
    hyphenate-limit-zone: 8%;
}

p.lead {
    

}

p.invite {
    text-indent: 0px;
    text-align: center;
    display: block;
    background-color: #2C3E50;
    color: antiquewhite;
    padding: 12px;
    border-radius: 12px;
    font-weight: bold;
    margin-bottom: 0px;
}

.progulki {
    background-color: #ffffff4d;
    padding: 12px;
    border-radius: 12px 12px 32px 32px;
    border: 2px solid white;
    -webkit-box-shadow: 0px 4px 12px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 4px 12px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 4px 12px 0px rgba(34, 60, 80, 0.2);
}

.excursion {
    background-color: #ffffff4d;
    padding: 12px;
    border-radius: 24px;
    border: 2px solid white;
    margin: 12px 0 0 0;
	-webkit-box-shadow: 0px 4px 12px 0px rgba(34, 60, 80, 0.2);
	-moz-box-shadow: 0px 4px 12px 0px rgba(34, 60, 80, 0.2);
	box-shadow: 0px 4px 12px 0px rgba(34, 60, 80, 0.2);
}

span.tm
 {
    font-variant: small-caps;
    font-size: 1.2em;
    color: #B66A00;
}

p.telegram {
    display: block;
    text-align: center;
    background-color: #00c2ed;
    padding: 12px;
    border-radius: 24px;
    margin-bottom: 24px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
}

.telegram {
    background-image: url(img/tg.png);
    background-color: #25a0d4;
    padding: 24px 12px 12px 90px;
    border-radius: 32px;
    margin-bottom: 24px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    min-height: 42px;
    background-position: left center;
    background-repeat: no-repeat;
    margin-top: 24px;
    text-align: center;
}

p.telegram a {
    color: #ffffff;
	  text-decoration: none;
}

.telegram a {
    color: #ffffff;
	  text-decoration: none;
}

a.invite-link {
    text-decoration: none;
}

a.tel {
    color: yellow;
}

hr {
    border-top: 2px solid #2C3E50;
    width: 38%;
}