@charset "UTF-8";


/* ================================================= */
/* mypage__header */
/* ================================================= */
.mypage__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: #0581B8;
	position: fixed;
	top: 0;
	left: 0;
	z-index:9;
}
.mypage__header .header__main {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 85px;
	max-width: 1280px;
	padding: 0 20px;
}
.mypage__header .header__title__block {
	display: flex;
	align-items: center;
}
.mypage__header .header__title {
	display: flex;
	align-items: baseline;
	font-size: 3em;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}
.mypage__header .header__title .sub {
	font-size: .6em;
	border-left: 2px solid rgba(255, 255, 255, .6);
	margin-left: 1em;
	padding-left: 1em;
}


/*.mypage__header .nav__block {
	pointer-events: none;
	visibility: hidden;
}
.after__login .mypage__header .nav__block {
	pointer-events: auto;
	visibility: visible;
}*/


.mypage__header .nav__block {
	display: flex;
}
.mypage__header .nav__block .maypage__nav {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	font-size: 1.4em;
	line-height: 1.1;
	padding-bottom: 10px;
	position: relative;
}
.mypage__header .nav__block .maypage__nav .item .link {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.mypage__header .nav__block .maypage__nav .utility {
	display: flex;
/*	align-items: center;*/
}
.mypage__header .nav__block .maypage__nav .utility .item {
	display: flex;
}
.mypage__header .nav__block .maypage__nav .utility .item+.item {
	margin-left: 10px;
}
.mypage__header .nav__block .maypage__nav .utility .item .link {
	font-weight: 700;
	color: #333;
	text-decoration: none;
	background-color: #fff;
	border-radius: 0 0 .3em .3em;
	padding: .5em 1em;
	transition: .3s;
}
.mypage__header .nav__block .maypage__nav .utility .item.logout .link {
	color: #fff;
	background-color: #E73350;
}

.mypage__header .nav__block .maypage__nav .utility .name {
	font-size: 1.1em;
	font-weight: 700;
	color: #fff;
	margin-left: 20px;
}

.mypage__header .nav__block .maypage__nav .gnav {
	display: flex;
	gap: 10px;
	width: 100%;
}
.mypage__header .nav__block .maypage__nav .gnav .item {
	display: flex;
}
.mypage__header .nav__block .maypage__nav .gnav .item .link {
	display: flex;
	align-items: center;
	width: 100%;
/*	font-size: 1.1em;*/
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background-color: #1a3669;
	border: 1px solid #1A3668;
	padding: .3em 1em;
	transition: .3s;
}
.mypage__header .nav__block .maypage__nav .gnav .item .link .icon {
	font-size: 1.2em;
	margin-left: .5em;
}

.mypage__header .nav__block .maypage__nav .item .link:hover {
	color: #00A7D9;
}
.mypage__header .nav__block .maypage__nav .utility .item.logout .link:hover {
	background-color: #EC644D;
}

.mypage__header .nav__block .maypage__nav .gnav .item.Registration .link {
	background-color: #E94963;
	border: 1px solid #E94963;
}
.mypage__header .nav__block .maypage__nav .item.Registration .link:hover {
	color: #fff;
	background-color: #EC644D;
}
.mypage__header .nav__block .maypage__nav .gnav .item.Reservation .link {
	background-color: #B09271;
	border: 1px solid #B09271;
}
.mypage__header .nav__block .maypage__nav .item.Reservation .link:hover {
	color: #fff;
	background-color: #CEB389;
}


.mypage__header .nav__block .maypage__nav .gnav .item .link.noLink {
	pointer-events: none;
	color: #939393;
	background-color: #c6c6c6;
	border: 1px solid #c6c6c6;
}



.mypage__header .header__logo {
	display: flex;
	justify-content: center;
	width: 100%;
	background-color: #fff;
}
.mypage__header .header__logo .header__logo__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1280px;
	padding: 5px 20px;
}
.mypage__header .header__logo .nippon-foundation {
	width: 27%;
}
.mypage__header .header__logo .logo__block {
	display: grid;
	grid-template-columns: 70% 1fr;
	grid-gap: 0 5%;
	width: 34%;
}
.mypage__header .header__logo .logo__block .logo {
	display: flex;
	align-items: center;
}



.header_emesg {
	width:100%;
	border:solid 4px #E73350;
	padding:1em;
	font-weight:bold;
	color:#E73350;
	margin:0 auto 2em;
}
.error__text {
	color:#f00;
	color:#bd0000;
	font-weight:bold;
	font-size:15px;
	margin-bottom:0.1em;
}

.err-fld {
	background:#FCAEAE!important;
}

.styleRE {
	cursor:auto;
}

.taL { text-align:left!important; }
.taC { text-align:center!important; }
.taR { text-align:right!important; }

.red { color:#E73350; }

.fwB { font-weight:bold!important; }
.fwN { font-weight:normal!important; }


.mb0 { margin-bottom:0!important; }
.mb5 { margin-bottom:5px!important; }
.mb10 { margin-bottom:10px!important; }
.mb20 { margin-bottom:20px!important; }
.mb30 { margin-bottom:30px!important; }
.mb40 { margin-bottom:40px!important; }
.mb50 { margin-bottom:50px!important; }
.mb60 { margin-bottom:60px!important; }
.mb80 { margin-bottom:80px!important; }

.mt0 { margin-top:0!important; }
.mt5 { margin-top:5px!important; }
.mt10 { margin-top:10px!important; }
.mt20 { margin-top:20px!important; }
.mt30 { margin-top:30px!important; }
.mt40 { margin-top:40px!important; }
.mt50 { margin-top:50px!important; }
.mt60 { margin-top:60px!important; }
.mt80 { margin-top:80px!important; }


section.formBlock {
	margin:0 auto 60px;
}

.btnNext,
.btnBack {
	width:100%;
	display:inline-block;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background-color: #0581B8;
    padding: .5em 2em;
    transition: .3s;
    cursor:pointer;
    text-decoration:none!important;
    text-align:center;
    line-height:1.4;
    border:0;
}
.btnBack {
    background-color: #646E7A;
}
.btnNext:hover,
.btnBack:hover {
	opacity:0.6;
}

.btnLayout {
	margin:auto;
	max-width:800px;
}

.btnLayout.col1 {
	max-width:390px;
}

.btnLayout:after {
	content: "";
	display: block;
	clear: both;
}

.btnLayout div {
	width:390px;
}
.btnLayout div.left {
	float:left;
}
.btnLayout div.right {
	float:right;
}


table.table {
	width:100%;
	margin:0 auto 20px;
	border-collapse: collapse;
}
table.table td{
	border:solid 1px #000;
	border:solid 1px #646E7A;
	
	padding: 0.5em;
}
.table .table_left {
	width:35%;
	vertical-align: middle;
	background-color: #00A7D9;
	background-color: #A0AAB6;
	
	
	font-weight: bold;
	color:#fff;
}
.table .table_right dl.layout {
	display:flex;
	flex-wrap:wrap;
	width:100%;
	align-items:center;
}
.table .table_right dl.layout dt {
	width:20%;
	margin-bottom:0.3em;
}
.table .table_right dl.layout dd {
	width:80%;
	margin-bottom:0.3em;
}

table.table input[type=text],
table.table input[type=email],
table.table input[type=tel],
table.table input[type=password],
table.table textarea,
table.table select {
	padding:0.4em;
	background: #F9F9F9;
	border: solid 1px #ccc;
	border-radius: 3px 3px 3px 3px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
}

table.table input[type=radio],
table.table input[type=checkbox] {
	margin-right:0.3em;
}
table.table input.sht {
	width:10%;
}
table.table input.smid {
	width:20%;
}
table.table input.mid {
	width:52%;
}

table.table input.lng {
	width:98%;
}
table.table textarea {
	width:98%;
	min-height:4em;
}


table.table input[type=tel].keta4 {
	width:5em;
}
table.table input[type=tel].keta2 {
	width:3em;
}
table.table input[type=tel].sht {
	width:6em;
}
table.table input[type=tel].msht {
	width:20em;
}

span.must{
	display:inline-block;
	color:#E73350;
	margin-left:0.5em;
}

span.must.non1stMust {
	display:none;
	margin-left:0;
}


.table .table_right{
	vertical-align: top;
	background:#fff;
}



/* screens smaller than 1240---------------------------------------------------------- */
@media only screen and (max-width:1240px) {
	/*.after__login .mypage__header .nav__block .maypage__nav .utility {
		position: fixed;
		top: 0;
		right: 10px;
	}*/
	/*.after__login .mypage__header .header__main {
		flex-direction: column;
		padding: 2.5em 20px 0;
	}*/
	/*.mypage__header .nav__block .maypage__nav {
		padding: 1em 0 10px 0;
	}*/
}
/* screens smaller than 690---------------------------------------------------------- */
@media only screen and (max-width:690px) {
	.mypage__header .header__main {
		padding: 0 10px;
	}
	.after__login .mypage__header .header__main {
		flex-direction: column;
		justify-content: start;
		padding: 0 10px;
	}
	/*.after__login .mypage__header .header__main {
		flex-direction: column;
		padding: 3em 10px 0;
	}*/
	/*.mypage__header .nav__block .maypage__nav {
		padding: 1em 0 10px 0;
	}*/

	.after__login .mypage__header .header__title__block {
		order: 2;
	}
	.mypage__header .header__title {
		display: flex;
		align-items: baseline;
		font-size: 3em;
		font-weight: 700;
		color: #fff;
		line-height: 1.2;
	}
	.mypage__header .header__title .sub {
		font-size: .6em;
		border-left: 2px solid rgba(255, 255, 255, .6);
		margin-left: 1em;
		padding-left: 1em;
	}

	.mypage__header .nav__block {
		order: 1;
	}
	.mypage__header .nav__block .maypage__nav .utility .item .link {
		padding: .4em 1em;
	}

	.mypage__header .nav__block .maypage__nav .gnav {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 5px;
	}
	.mypage__header .nav__block .maypage__nav .gnav .item .link {
		width: 100%;
		min-height: 4em;
		padding: .2em 0;
	}

	.mypage__header .nav__block .maypage__nav .item .link:hover {
		color: #333;
	}
	.mypage__header .nav__block .maypage__nav .gnav .item .link:hover {
		color: #fff;
	}
	.mypage__header .nav__block .maypage__nav .utility .item.logout .link:hover {
		background-color: #E73350;
	}
	.mypage__header .nav__block .maypage__nav .gnav .item.Registration .link {
		background-color: #E94963;
		border: 1px solid #E94963;
	}
	.mypage__header .nav__block .maypage__nav .item.Registration .link:hover {
		color: #fff;
		background-color: #E94963;
	}
	.mypage__header .nav__block .maypage__nav .gnav .item.Reservation .link {
		background-color: #B09271;
		border: 1px solid #B09271;
	}
	.mypage__header .nav__block .maypage__nav .item.Reservation .link:hover {
		color: #fff;
		background-color: #B09271;
	}



.mypage__header .header__logo .header__logo__inner {
	padding: 5px 10px;
}
.mypage__header .header__logo .nippon-foundation {
	width: 40%;
}
.mypage__header .header__logo .logo__block {
	width: 48%;
}
}



.mypage__wrapper {
	display: flex;
	justify-content: center;
	padding: 60px 20px;
	padding: 40px 20px 60px;
}

.login .mypage__wrapper {
	padding: 60px 20px;
}

.mypage__container {
	width: 100%;
	max-width: 1280px;
}
.after__login .mypage__container {
	font-size: 1.8em;
}

.mypage__section+.mypage__section {
	margin-top: 3em;
}

.mypage__section .contents__block.level01+.contents__block.level01 {
	margin-top: 2em;
}
.mypage__section .contents__block.level02+.contents__block.level02 {
	margin-top: 1.5em;
}
.mypage__section .contents__block.level03+.contents__block.level03 {
	margin-top: 1em;
}
.mypage__section > .contents__block,
.mypage__section > .contents__block > .contents__block,
.mypage__section > .contents__block > .contents__block > .contents__block,
.mypage__section > .contents__block > .contents__block > .contents__block > .contents__block {
	padding-left: .5em;
}
.mypage__section .contents__block.level03 {
	margin-top: 1em;
}

.mypage__section .contents__block .para+.para {
	margin-top: .6em;
}

.contents__title01 {
	font-size: 1.4em;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	background-color: #47517c;
	margin-bottom: 1.2em;
	padding: .5em .6em;
}
.contents__title02 {
	font-size: 1.3em;
	font-weight: 700;
	color: #47517c;
	line-height: 1.2;
	border-left: 5px solid #47517c;
	margin-bottom: .6em;
	padding: .2em 0 .2em .5em;
}
.contents__title03 {
	display: flex;
	align-items: center;
	font-size: 1.2em;
	font-weight: 700;
	color: #47517c;
	line-height: 1.2;
	margin-bottom: .6em;
}
.contents__title03::before {
	content: "";
	width: .8em;
	height: .8em;
	background-color: #47517c;
	border-radius: 100vh;
	margin-right: .3em;
}

/* screens smaller than 1240---------------------------------------------------------- */
@media only screen and (max-width:1240px) {
	.mypage__wrapper {
		padding: 50px 20px;
	}
}
/* screens smaller than 768---------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.mypage__wrapper {
		padding: 40px 20px;
	}
	.after__login .mypage__container {
		font-size: 1.7em;
	}

	table.table {
		max-width:100%;
	}

	label {
		display:inline-block;
		width:auto;
		margin-bottom:0.2em;
	}

	table.table .table_left {
		width:100%;
		vertical-align: middle;
		padding: 2%;
		font-weight: bold;
		margin:0;
	}
	table.table .table_right{
		width:100%;

		padding: 2%;
		vertical-align: top;
		margin:0;
		border-top:0;
	}

	table.table .merge{
		width:100%;

		padding: 2%;
		vertical-align: top;
		margin:0;
		border-top:0;
	}

	table.table thead {
		display:none;
	}
	table.table tbody tr{
		display:block;
		max-width:100%;
	}
	table.table tbody th,
	table.table tbody td{
		display:block;
		/*border:none;*/
		max-width:100%;
	}
	table.table tbody th {
		color:#f36;
		text-align:left;
		background:#fff;
	}
	table.table tbody td {
		margin-left:1em;
	}

	.btnLayout {
		width:90%;
		margin:auto;
		display:block;
		text-align:center;
	}
	.btnLayout div {
		width:100%;
	}
	.btnLayout div+div {
		margin-top:1em;
	}


}
/* screens smaller than 690---------------------------------------------------------- */
@media only screen and (max-width:690px) {
	.login .mypage__wrapper {
		padding: 40px 10px;
		padding: 20px 10px 40px;
	}
	.after__login .mypage__container {
		font-size: 1.6em;
	}

	.mypage__section > .contents__block,
	.mypage__section > .contents__block > .contents__block,
	.mypage__section > .contents__block > .contents__block > .contents__block,
	.mypage__section > .contents__block > .contents__block > .contents__block > .contents__block {
		padding-left: 0;
	}
}





/* ================================================= */
/* ログイン画面 */
/* ================================================= */
.login .mypage__container {
	display: flex;
	justify-content: center;
	font-size: 1.5em;
	max-width:700px;
}
.login .login__block {
	min-width: 400px;
}
.login .login__input__area {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 1em;
	font-size: 1.2em;
}
.login .login__input__area .title__box {
	display: flex;
	align-items: center;
	font-weight: 700;
}

.login .login__input__area .input__box {
	display: grid;
	grid-template-columns: 1fr 1.5em;
}
.login .login__input__area .input__box .error__text {
	grid-column: 1 / span 2;
	font-size: .9em;
	line-height: 1.4;
}

.login .login__input__area .input__box .input__text {
	padding: .5em;
}
.login .login__input__area .input__box .pass__view__icon {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}


.login .forgot__pass__block {
	text-align: center;
	margin-top: .5em;
}
.login .btn__login__block {
	display: flex;
	justify-content: center;
	margin-top: 3em;
}
.login .btn__login__block .btn__login {
	font-size: 1.4em;
	font-weight: 700;
	color: #fff;
	background-color: #0581B8;
	padding: .5em 2em;
	transition: .3s;
}
.login .btn__login__block .btn__login:hover {
	opacity: .8;
}

/* screens smaller than 690---------------------------------------------------------- */
@media only screen and (max-width:690px) {
	.login .mypage__container {
		font-size: 1.8em;
	}
	.login .login__block {
		min-width: inherit;
		width: 100%;
	}
	.login .login__input__area {
		grid-template-columns: 1fr;
		grid-gap: 0;
	}
	.login .login__input__area .input__box+.title__box {
		margin-top: 1em;
	}
	.login .btn__login__block .btn__login:hover {
		opacity: 1;
	}
}


/* ================================================= */
/* マイページトップ */
/* ================================================= */
.mypage__home .entry__information {
	display: flex;
	justify-content: center;
}
.mypage__home .registration__block {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mypage__home .entry__information .information__main .name__block {
	font-size: 1.5em;
	font-weight: 700;
	margin-bottom: 1em;
}
.mypage__home .registration__block .btn__Registration {
	width:100%;
	font-size: 1.7em;
	font-weight: 700;
	color: #fff;
	text-align:center;
	text-decoration: none;
	background-color: #666;
	border: 3px solid #333;
	/*border-radius: .5em;*/
	padding: .5em 1em;
	transition: .3s;
}
.mypage__home .registration__block .btn__Registration:hover {
	opacity: .8;
}
.mypage__home .registration__block .btn__Registration.new {
	background-color: #EC644D;
	border: 3px solid #E94C38;
}
.mypage__home .registration__block .btn__Registration.edit {
	background-color: #3a98cb;
	border: 3px solid #0581B8;
}



.mypage__home .Updates__container {
	display: grid;
	grid-template-columns: auto 1fr;
	border-top: 5px solid #ddd;
	border-bottom: 5px solid #ddd;
	border-right: 5px solid #ddd;
}
.mypage__home .Updates__container .Updates__title {
	display: flex;
	align-items: center;
	font-size: 1.2em;
	font-weight: 700;
	background-color: #ddd;
	padding: 1em;
}
.mypage__home .Updates__container .Updates__contents {
	height: 10em;
	overflow-x: hidden;
	overflow-y: scroll;
}
.mypage__home .Updates__container .Updates__contents__list {
	padding: 20px;
}
.mypage__home .Updates__container .list__block {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 2em;
}
.mypage__home .Updates__container .list__block+.list__block {
	border-top: 2px dashed #ccc;
	margin-top: .5em;
	padding-top: .5em;
}
.mypage__home .Updates__container .list__block .date {
	font-weight: 700;
}


.mypage__home .home__contents__menu .contents__menu__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 0 20px;
}
.mypage__home .home__contents__menu .contents__menu__list .contents__menu__box {
	display: flex;
}
.mypage__home .home__contents__menu .contents__menu__list .contents__menu {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-weight: 700;
	color: #fff;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	background-color: #00AA8C;
	padding: .5em;
	transition: .3s;
}

.mypage__home .home__contents__menu .contents__menu__list .contents__menu.sand {
	background-color: #B09271;
}

.mypage__home .home__contents__menu .contents__menu__list .contents__menu:hover {
	opacity: .8;
}
.mypage__home .home__contents__menu .contents__menu__list .contents__menu .icon {
	margin-left: .3em;
}

.mypage__home .home__contents__menu .contents__menu__list .noLink {
	pointer-events: none;
	color: #939393!important;
	background-color: #c6c6c6!important;
	border: 1px solid #c6c6c6!important;
}


.draftArea {
	padding:1em;
	background:#FCC03F;
	margin:-20px auto 40px;
	text-align:center;
}
.draftArea input[type=checkbox]{
	margin-right:0.3em;
}


/* screens smaller than 768---------------------------------------------------------- */
@media only screen and (max-width:768px) {
	.mypage__home .Updates__container {
		display: grid;
		grid-template-columns: 1fr;
		border: 5px solid #ddd;
	}
	.mypage__home .Updates__container .Updates__title {
		font-size: 1.1em;
		padding: .5em;
	}

	.mypage__home .home__contents__menu .contents__menu__list {
		grid-template-columns: 1fr;
		grid-gap: 20px;
	}
	.mypage__home .home__contents__menu .contents__menu__list .contents__menu {
		padding: 1em;
	}
	.table .table_right dl.layout dt {
		width:40%;
	}
	.table .table_right dl.layout dd {
		width:60%;
	}
}
/* screens smaller than 690---------------------------------------------------------- */
@media only screen and (max-width:690px) {
	.mypage__home .Updates__container .Updates__contents__list {
		padding: 10px;
	}
	.mypage__home .Updates__container .list__block {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: .5em;
	}
	.mypage__home .Updates__container .list__block+.list__block {
		margin-top: .8em;
		padding-top: .8em;
	}
	table.table select {
		width:98%;
	}
	table.table select.sht {
		width:5em;
	}

	select {
		max-width:98%;
	}
}





.page__GF .venue__info__block {
/*	display: flex;
	flex-direction: column;
	align-items: center;*/
	padding-bottom: 1em;
}
.page__GF .venue__info__block .venue__info__title {
	font-size: 1.2em;
	font-weight: 700;
}

.page__GF .venue__info__block .venue__info__main {
	padding: 1em 0 2em;
}
.page__GF .venue__info__block .venue__info__main .info__title {
	font-size: 1.1em;
/*	font-weight: 700;*/
	margin-bottom: 1em;
}
.page__GF .venue__info__block .venue__info__main .detail__list {
	font-size: .9em;
}
.page__GF .venue__info__block .venue__info__main .detail__list li+li {
	margin-top: .3em;
}
.page__GF .venue__info__block .venue__info__main .detail__list li.tel a {
	pointer-events: none;
	color: #333;
	text-decoration: none;
}
.page__GF .venue__info__block .venue__info__main .detail__list li.map {
	display: flex;
	margin-top: 2em;
}
.page__GF .venue__info__block .venue__info__main .detail__list li.map a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 300px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background-color: #005C6D;
	padding: .8em 1.2em;
	transition: .3s;
}
.page__GF .venue__info__block .venue__info__main .detail__list li.map a:hover {
	opacity: .8;
}
.page__GF .venue__info__block .venue__info__main .detail__list li.map a .icon {
	margin-left: .8em;
}

.page__GF .venue__info__block .access__detail {
	display: flex;
	font-size: .9em;
	line-height: 1.5;
}
.page__GF .venue__info__block .access__detail .access__detail__inner {
	border: 1px solid #A0AAB6;
	padding: 1em 1.5em;
}
/* screens smaller than 690---------------------------------------------------------- */
@media only screen and (max-width:690px) {
.page__GF .venue__info__block .venue__info__main .detail__list {
	font-size: 1.1m;
}
.page__GF .venue__info__block .venue__info__main .detail__list li.map a {
	max-width: inherit;
	padding: 1.2em 0em;
}
.page__GF .venue__info__block .venue__info__main .detail__list li.map a:hover {
	opacity: 1;
}
}





/* screens smaller than 1240---------------------------------------------------------- */
@media only screen and (max-width:1240px) {
}
/* screens smaller than 1080---------------------------------------------------------- */
@media only screen and (max-width:1080px) {
}
/* screens smaller than 768---------------------------------------------------------- */
@media only screen and (max-width:768px) {
}
/* screens smaller than 690---------------------------------------------------------- */
@media only screen and (max-width:690px) {
}