/* -----
	Author:			Mohammed Munawar Ahmed
	Company:		Mobifreaks.com
	Company URL:	http://www.mobifreaks.com
	Mail Us:		support@mobifreaks.com 
	License:		Creative Commons 3.0 Unported
	License URL:	http://creativecommons.org/licenses/by/3.0/
	
	Attribution Required:
	User should provide backlink to mobifreaks.com / source page from which you downloaded this mobile template [or] keep the link the text "Design by mobifreaks.com" on the footer
	NOTE: no follow, no index back link will not be considered as a healthy back link. link should be clickable.
----- */


/* -----
reset
----- */



body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td,*{
	margin:0;
	padding:0;
}

:root {
    --install-button-color: #517FA3!important;
}

.instatag-app {
	position:relative;
	margin: 15px 0;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{
	border:0;
}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{
	font:inherit;
}
del,ins{
	text-decoration:none;
}
li{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:bold;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
	font-variant:normal;
}
sup,sub{
	vertical-align:baseline;
}
legend{
	color:#000000;
}

@font-face {
  font-family: 'Billabong';
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/Billabong.ttf") format("truetype"); 
}


a{
	color:#000000;
	text-decoration:none;
}
/*
additional
*/
.clear{
	clear:both;
b}
/* ----- Main Class's ----- */
.header{

	background:#517FA3;
	/*background: rgba(81, 127, 163, .8);*/
	position: fixed;
	width: 100%;
	z-index: 1;
	box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}
.header,
.content,
.footer,
.nav{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;

}
/* ----- Header ----- */
.logo{
	float:left;
	display:inline-block;
	margin-left:5px;
	font-family: 'Cookie', cursive;
	font-family: 'Billabong';
	font-size:2.3em;
	color:#FFF;
}

.logo a{
	display:block;
	padding:10px;
	color:#FFF;
}


.nav2 
{
	text-align:center;
	background:#f9f9f9;
	font-family:Arial, Helvetica, sans-serif;
	}
	
.nav2 li{
	text-transform:capitalize;
	display:block;
	border-bottom:1px dotted #eeeeee;
}
.nav2 a{
	display:block;
	padding:10px;
	color:#0293cc;
}
.nav2 a:hover{
	background:#ffffff;
	color:#517FA3;
}



@media only screen and (max-device-width: 991px) and (min-device-width: 320px) {
	.nav2 {
	text-align:left;
	}
	.nav2 a {
		padding-left: 20px;
	}
}



.blog{
	padding:10px;
	border-bottom:2px solid #eeeeee;
	padding-top:70px;
	background:#ffffff;
}

.blog2{
	padding:10px;
	margin: 0 auto;
/* 	border-bottom:2px solid #eeeeee; */
	padding-top:70px;
	padding-bottom:30px;
	text-align:center;
	color:#000000;
	background:#f9f9f9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
}

.blog h2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
}

.blog2 h2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
}

.blog2 h4{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
}

/* .htitle h2{
}
.blog h2 a{
	color:#0079ce;
} */
.blog-img{
	text-align:center;
	margin:0 auto;
	padding:10px 0 5px 0;
}
.blog-content{
	color:#2d2d2d;
}
.blog-content h3{
	padding:5px 0;
}
.blog-content code{
	overflow:hidden;
	display:block;
	margin:10px;
	padding:10px;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
}
.dark{
	background:#b9d3e8;
	color:#000;
}
.light{
	background:#f9f9f9;
	color:#2d2d2d;
	border:1px solid #dddddd;
}
.blog-content p{
	padding:5px 0;
}
.blog-content p,
.blog-content ul,
.blog-content ol,
.blog-content code,
.blog-content dl{
	line-height:1.8em;
}
.blog-content dt{
	font-weight:bold;
	text-decoration:underline;
	padding-left:10px;
}
.blog-content dd{
	padding-left:30px;
}
.blog-content ul,
.blog-content ol{
	margin:10px 10px 10px 30px;
}
.blog-content ul{
	list-style:disc;
}
.blog-content blockquote{
	background:url(../images/blockquote-down.png) no-repeat;
	margin:5px 0;
	color:#5d5d5d;
	border-top:1px solid #eeeeee; 
	border-bottom:1px solid #eeeeee; 
}
.blog-content blockquote p{
	background:url(../images/blockquote-up.png) no-repeat bottom right;
	font-style:italic;
	padding:10px 40px;
}/* ----- Footer ----- */
.footer{
	display:block;
	padding:10px;
	background:#517FA3;
}
.footer a{
	display:inline-block;
	color:#FFF;
}
.footer p{
	color:#FFF;
	padding:5px;
}
.footer img{
margin:5px;
}
.author a{
	display:inline-block;
	color:#004b7f;
}
.author a:hover{
}
.author{
	font-family:Arial, Helvetica, sans-serif;
	border-top:1px solid #eeeeee;
	text-align:right;
	font-size:12px;
	padding:10px;
	position: absolute;
    z-index: -1;
    margin-top: -60px;
}
/* pagination */
.pagination{
	font-size:12px;
	display:block;
	margin:10px 0 10px 10px;
}
.pagination li{
	display:inline-block;
	margin:0 0 0 5px;
}
.pagination a{
	display:block;
	padding:5px 10px;
	color:#ffffff;
	-moz-border-radius:.3em;
	-webkit-border-radius:.3em;
	border-radius:.3em;
	background:#0079ce;
}
.pagination a:hover{
	background:#008ef1;

}
.pagination .current a{
	color:#0079ce;
	background:none;
}
.pagination .current a:hover{
	color:#008ef1;
}
.pagination img{
	display:inline-block;
}

pre{
	display:block;
	padding:8.5px;
	margin:0 0 9px;
	font-size:12.025px;
	line-height:18px;
	word-break:break-all;
	word-wrap:break-word;
	white-space:pre;
	white-space:pre-wrap;
	background-color:#f5f5f5;
	border:1px solid #ccc;
	border:1px solid rgba(0,0,0,0.15);
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px
}

textarea#note {
    width:94%;
	height:150px;
	display:block;
	padding:8.5px;
	margin:0 0 9px;
	font-size:14.025px;
	line-height:18px;
	word-break:break-all;
	word-wrap:break-word;
	white-space:pre;
	white-space:pre-wrap;
	background-color:#f5f5f5;
	border:1px solid #ccc;
	border:1px solid rgba(0,0,0,0.15);
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	margin-bottom: 40px;
    margin-top: 40px;
}

textarea#note2 {
    width:94%;
	height:150px;
	display:block;
	padding:8.5px;
	margin:0 0 9px;
	font-size:14.025px;
	line-height:18px;
	word-break:break-all;
	word-wrap:break-word;
	white-space:pre;
	white-space:pre-wrap;
	background-color:#f5f5f5;
	border:1px solid #ccc;
	border:1px solid rgba(0,0,0,0.15);
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	margin-bottom: 40px;
    margin-top: 40px;
}

textarea#note3 {
    width:94%;
	height:150px;
	display:block;
	padding:8.5px;
	margin:0 0 9px;
	font-size:14.025px;
	line-height:18px;
	word-break:break-all;
	word-wrap:break-word;
	white-space:pre;
	white-space:pre-wrap;
	background-color:#f5f5f5;
	border:1px solid #ccc;
	border:1px solid rgba(0,0,0,0.15);
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	margin-bottom: 40px;
    margin-top: 40px;
}

textarea#notesymbol {
    width:94%;
	height:70px;
	display:block;
	padding:8.5px;
	margin:0 0 9px;
	font-size:14.025px;
	line-height:18px;
	word-break:break-all;
	word-wrap:break-word;
	white-space:pre;
	white-space:pre-wrap;
	background-color:#f5f5f5;
	border:1px solid #ccc;
	border:1px solid rgba(0,0,0,0.15);
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px
}

textarea#notesymbol {
    width:94%;
	height:70px;
	display:block;
	padding:8.5px;
	margin:0 0 9px;
	font-size:14.025px;
	line-height:18px;
	word-break:break-all;
	word-wrap:break-word;
	white-space:pre;
	white-space:pre-wrap;
	background-color:#f5f5f5;
	border:1px solid #ccc;
	border:1px solid rgba(0,0,0,0.15);
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px
}

textarea#emoji {
	width: 94%;
    min-height: 500px;
    display: block;
    padding: 8.5px;
    margin: 0 0 9px;
    font-size: 28px;
    line-height: 32px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.15);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

textarea#emoji120 {
	width: 94%;
    min-height: 500px;
    display: block;
    padding: 8.5px;
    margin: 0 0 9px;
    font-size: 28px;
    line-height: 32px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.15);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

textarea#emoji100 {
	width: 94%;
    min-height: 500px;
    display: block;
    padding: 8.5px;
    margin: 0 0 9px;
    font-size: 28px;
    line-height: 32px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.15);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

textarea#emoji70 {
	width: 94%;
    min-height: 500px;
    display: block;
    padding: 8.5px;
    margin: 0 0 9px;
    font-size: 28px;
    line-height: 32px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.15);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

textarea#emoji50 {
	width: 94%;
    min-height: 500px;
    display: block;
    padding: 8.5px;
    margin: 0 0 9px;
    font-size: 28px;
    line-height: 32px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.15);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

@media only screen and (max-device-width: 991px) and (min-device-width: 320px) {
	textarea#emoji100 {
	min-height: 100vh;
	}
	textarea#emoji120 {
	min-height: 120vh;
	}
	
	textarea#emoji70 {
	min-height: 70vh;
	}
	
	textarea#emoji50 {
	min-height: 50vh;
	}
}

.nav {
	width: 188px;
	min-width: 188px;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    right: -320px;
    padding: 15px 20px;
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    transition: right 0.3s;
    /*background: #517fa3;*/
	background:#234a69;
    z-index: 2000;
}


.nav-toggle {
   /* position: absolute;*/
  /* right: 320px;*/
    position: fixed;
	right: 0px;
	/*top: 15px;*/
    padding: 0 0.8em;
   /* background: inherit;*/
    color: #ffffff;
    cursor: pointer;
    font-size: 2em;
    line-height: 1;
    z-index: 1001;
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}



.nav-toggle:after {
    content: '\2261';
    text-decoration: none;
}



.nav-toggle:hover {
    color: #f4f4f4;
}



[id='nav-toggle'] {
    position: absolute;
    display: none;
}



[id='nav-toggle']:checked ~ .nav > .nav-toggle {
    left: auto;
    right: 2px;
    top: 15px;
}



[id='nav-toggle']:checked ~ .nav {
    right: 0;
    box-shadow:-4px 0px 10px 0px rgba(0,0,0, 0.3);
    -moz-box-shadow:-4px 0px 10px 0px rgba(0,0,0, 0.3);
    -webkit-box-shadow:-4px 0px 10px 0px rgba(0,0,0, 0.3);
    overflow-y: auto;
}



[id='nav-toggle']:checked ~ main > article {
    -webkit-transform: translateX(-320px);
    -moz-transform: translateX(-320px);
    transform: translateX(-320px);
}


[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
    content: '\2715';
}



body {
    -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
    to {
      padding: 0;
    }
}


@media screen and (min-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
}

@media screen and (max-width: 320px) {
    html,
    body {
      margin: 0;
      overflow-x: hidden;
    }
    .nav {
     /* width: 100%;*/
      box-shadow: none
    }
}



.nav h2 {
    width: 90%;
    padding: 0;
    margin: 10px 0;
    text-align: center;
    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
    font-size: 1.3em;
    line-height: 1.3em;
    opacity: 0;
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}

.nav h2 a {
    color: #dadada;
    text-decoration: none;
    text-transform: uppercase;
}


[id='nav-toggle']:checked ~ .nav h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}


.nav > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
	padding-top: 30px;
}

.nav > ul > li {
    line-height: 1.5;
    opacity: 0;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    -webkit-transition: opacity .5s .05s, -webkit-transform .5s .05s;
    -moz-transition: opacity .5s .05s, -moz-transform .5s .05s;
    -ms-transition: opacity .5s .05s, -ms-transform .5s .05s;
    transition: opacity .5s .05s, transform .5s .05s;
}

.letters > ul > li {
    width: 33%;
    float: left;
	line-height: 2;
}

.nav a {
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    color: #ffffff;
}
	

[id='nav-toggle']:checked ~ .nav > ul > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}




.nav > ul > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    color: #ffffff;
    width: 100%;
    text-decoration: none;
    /* плавный переход */
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
}



.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
    color: white;
    padding-left: 15px;
}




.nav > ul > li > a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

.nav > ul > li > a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #82a8c5;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}


.nav > ul > li > a:hover:before {
    width: 100%;
    /*background: #c1d8e9;*/
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}

.nav > ul > li > a:hover:after {
    width: 100%;
    background: transparent;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

html {
	scroll-behavior:smooth;
}

.btn-copy {
    text-transform: uppercase;
    transition: all 0.3s;
    font-size: 16px;
    /* font-weight: 800; */
    color: #fff;
    margin: 0;
    letter-spacing: 2px;
    padding: 10px 15px 7px 15px;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.25);
    margin: -10px 15px 30px 15px;
    border: 1px solid#7da2bf;
    background-color: #517fa3;
	cursor: pointer;
}

.btn-align {
	text-align:center;
	
}

@media (max-width: 800px) {
#buttonsContainer {
    top: 50%!important;
	top: 50%;
	bottom:400px!important;
}
}