/* Theme Name: voyageaucentredesoi Theme URI: adressedevotretheme Author: Apro Author URI: https://voyageaucentredesoi.ca Version: 1 Text Domain: voyageaucentredesoi Template: html5blank-stable */ /* --------*\ \* --------*/ /*couleur précédente: background: rgba(1, 71, 80, 1);*/ @font-face { font-family: 'PetitaBold'; font-style: normal; font-weight: normal; src: local('PetitaBold'), url('PetitaBold.woff') format('woff'); } @font-face { font-family: 'PetitaLight'; font-style: normal; font-weight: normal; src: local('fonts/PetitaLight'), url('fonts/PetitaLight.woff') format('woff'); } @font-face { font-family: 'PetitaMedium'; font-style: normal; font-weight: normal; src: local('PetitaMedium'), url('PetitaMedium.woff') format('woff'); } h1 { /*font-family: 'Monotype Corsiva';*/ /*font-family: 'Dancing Script', cursive;*/ color: white; font-size: 3em; padding: 0 20px; } h1.titre { width: 30%; /*display: right;*/ font-family: 'PetitaLight'; /*font-family: 'Monotype Corsiva';*/ /*font-family: 'CroissantOne';*/ /*background: rgba(1, 68, 80, 1);*/ color: white; /*color: #dbf0f2;*/ font-size: 3em; border-radius: 15px; padding: 20px 20px; /*margin: 0 auto;*/ /*opacity: 1;*/ animation: nav1 1s ease 0s 1 normal forwards; } @keyframes nav1 { 0% { opacity: 0; } 100% {opacity: 1;} } h2 {     font-family: 'PetitaLight'; color: white; font-size: 2em; } article { font-size: 2rem; color: #fff; } /* --------*\ \* --------*/ /*body.home { background: url(img/002Juliewp.jpg) no-repeat fixed center/cover; }**/ /*body.home { background: url(img/Coucher1Wp.jpg) no-repeat fixed center/cover; }*/ .page-id-2 { background: url(img/002Juliewp.jpg) no-repeat fixed center/cover; } /*body.page-id-2 { background: url(img/2chuteswendake.jpg) no-repeat fixed center/cover; }*/ body.page-id-15 { background: url(img/2fleuve1920.jpg) no-repeat fixed center/cover; } body.page-id-43 { background: url(img/2chuteswendake.jpg) no-repeat fixed center/cover; } main: onmouseout { width: 100%; animation: mainB 1500ms ease 1s 1 normal forwards; } @keyframes mainB { 0% {background: rgba(1, 71, 80,.7);} 100% {background: rgba(1, 71, 80,0);} } main:hover { /*display: flex;*/ width: 100%; /*background: url(img/2fleuve1920.jpg) no-repeat fixed center/cover; */ animation: mainA 2000ms ease 0s 1 normal forwards; } @keyframes mainA { 0% {background: rgba(1, 71, 80,0);} 100% {background: rgba(1, 71, 80,0.7);} } section { width: 60%; border-radius: 3rem; padding: 5rem; margin: 0 auto; /*background: rgba(1, 71, 80,.8);*/ /*background:rgba(31, 73, 88, .5);*/ /*height: 50%;*/ /*animation: sectionB 500ms ease 1s 1 normal forwards;*/ } section:hover { width: 60%; border-radius: 3rem; margin: 0 auto; /*background: rgba(1, 71, 80,.8);*/ /*background:rgba(31, 73, 88, .5);*/ /*height: 50%;*/ animation: sectionB 2s ease 0s 1 normal forwards; } @keyframes sectionB { 0% {background: rgba(1, 71, 80,0);} 100% {background: rgba(1, 71, 80,.9);} } .space { /*background:rgba(1, 71, 80, 1);*/ background:rgba(31, 73, 88, 0); width: 100%; height: 800px; } /* --------------------------------*\
\* --------------------------------*/ /* Method 1 */ .sticky { /*float: right;*/ /*background:rgba(1, 71, 80, .9);*/ background: rgba(1, 68, 80, .5); /*background:rgba(31, 73, 88, 0); */ position: fixed; /*display: inline-flex;*/ top: 0px; /*height: 250px;*/ width: 100%; margin: 0 auto; animation: AnimSticky 1300ms ease 0s 1 normal forwards; } @keyframes AnimSticky { 0% {height: 0px; background:rgba(1, 68, 80, .5); /*0% {height: 100%; background:rgba(31, 73, 88, 0);*/ /*0% {background:rgba(1, 68, 80, 0); */ } /*100% {background:rgba(31, 73, 88, 1); */ 100% {height: 200px; background:rgba(1, 68, 80, 1); } } /* Method 2 */ header { color:#fff; /*background:rgba(31, 73, 88, 0);*/ background: rgba(1, 68, 80, 0); /*background: rgba(0, 64, 61,1);*/ position: absolute; /*padding: 100px 0 0 0;*/ width: 100%; display:inline-flex; /*height: 50px;*/ flex-flow: row wrap; top: 70px; /*left:0;*/ z-index: 999; /*display: none;*/ } .cont{ /*background: rgba(1, 68, 80, .5*/ /*height: 50px;*/ width: 50%; margin: 0 auto; z-index: 999; /*animation: AnimSticky 2s ease 0s 1 normal forwards;*/ } .cont1{ /*background: rgba(1, 68, 80, 0);*/ align-items: middle; background: rgba(31, 73, 88, 0); height: 70px; width: 50%; margin: 0 auto; /*animation: sectionA .5s ease 4s 1 normal forwards;*/ } /*@keyframes sectionA { 0% {height: 0;} 100% {height: 200px;} } */ /*.cont11{*/ /*background: rgba(1, 68, 80, 0);*/ /* float: right; background: rgba(31, 73, 88, 0); height: 70px; width: 50%; display: inline-flex; margin: 0 auto;*/ /*animation: sectionA .5s ease 4s 1 normal forwards;*/ /* }*/ /*@keyframes sectionA { 0% {height: 0;} 100% {height: 200px;} } */ /* /Method 2 */ /* Logo */ .logo { float: left; width: 30%; padding: 25px 25px 25px 70px; } /*.logo-img { /*float: right; width: 100%; }*/ /*clear*/ .clear:before, .clear:after { content:' '; display:table; } .clear:after { clear:both; } .clear { *zoom:1; } /* -----*\ NAV \* -----*/ .nav { justify-content: flex-end; display: inline-flex; float: right; flex: 2 auto; width: 60%; /*font-family: 'Monotype Corsiva';*/ /*margin: 30px;*/ padding: 10px; margin: 70px 0 0 0; /*animation: section3 5s ease 2s 1 normal forwards;*/ } @keyframes section3 { 0% {margin: 100px 0 0 0;} 100% {margin: 60px 0 0 0;} } .top { justify-content: flex-end; display: inline-flex; float: right; flex: 2 auto; width: 60%; /*font-family: 'Monotype Corsiva';*/ /*margin: 30px;*/ padding: 10px; /*margin: 70px 0 0 0;*/ /*animation: section3 5s ease 2s 1 normal forwards;*/ } ul { list-style:none; padding:0; margin:0; display:flex; flex-direction: row; } /*ul.sub-menu { background: rgba(0, 64, 61, 1); display: block; width: 90px; font-size: .2em; list-style: none; border-radius: 5px; /*margin: 5px; height: 120px; padding: 10px; }*/ /*li#menu-item-23 { display: inline; font-size: 2em; list-style: none; margin: 50px 0px; }*/ li { display: inline-flex; /*float: right;*/ /*color: #d4fefb; list-style: none;*/ margin: 5px 10px; /*opacity: 1;*/ } /*ul:hover { color: white; }*/ /*li#menu-item-23:hover { text-transform: capitalize; }*/ a { font-family: 'Monotype Corsiva'; /*font-family: 'PetitaLight';*/ /*color: #d4fefb;*/ font-size: 2em; color: #fff; text-transform: lowercase; } a:hover { text-transform: capitalize; color: #fff; } .button1 { /*background: url(http://localhost/vacds1/wp-content/uploads/2019/11/boutonfb.jpg no-repeat fixed center); Facebook*/ width: 35px; height: 35px; float: right; z-index: 999; } .menu-item.current-menu-item > li a{ /*background-color:rgba(0, 64, 61,0); color: rgba(0, 64, 61,0);*/ display: inline-block; list-style: none; opacity: 1; display: : flex; } .menu-item.current-menu-item > a{ /*animation: nav2 .5s ease 750ms 1 normal forwards;*/ display:none; } @keyframes nav2 { 0% { opacity: 1;} 100% {opacity: 0;} } /*a:focus { text-transform: capitalize; /*color: #d4fefb; color: yellow; outline: 0; } a:active { text-transform: capitalize; /*color: #d4fefb,.2; /*color: white; color: red; /*outline: 0; }*/ /* -----*\ NAV \* -----*/ /* --------------------------------*\
\* --------------------------------*/ /* ------*\ main \* ------*/ /*.wrapper { /*background:rgba(1, 71, 80,0);*/ /*background:rgba(31, 73, 88,1);*/ width: 960px; /*font-family: 'Monotype Corsiva';*/ margin: 0 auto; }*/ .contenu { font-family: 'PetitaLight'; /*background:rgba(1, 71, 80, .7); */ /*background:rgba(31, 73, 88, 1); */ width: 60%; color: #fff; font-size: 1.5rem; margin: 0 auto; padding: 10px 50px; border-radius: 3rem; } .contenu:hover { animation: sectionB 2s ease 0s 1 normal forwards; } @keyframes sectionB { 0% {background: rgba(1, 71, 80,0);} 100% {background: rgba(1, 71, 80,.9);} } .contenu1 { /*display: inline-block;*/ font-family: 'PetitaLight'; color: #fff; background:rgba( 1, 71, 80, 1); width: 100%; /*margin: 400px 0px 0;*/ padding: 10px 50px; border-radius: 15px; /*animation: sectionA 5s ease 2s 1 normal forwards;*/ } .contenu11 { background:rgba(0, 64, 61, 0); height: 500px; width: 100%; } .nouveau { background: rgba(1, 71, 80, 1); display: inline-block; width: 100%; border-radius: 10px; padding: 30px; } /*#primary { background: rgba(0, 64, 61,.5); display: inline-block; width: 100%; }*/ td { color: white; font-size: 2em; width: 210px; padding: 10px; } .textInput { width: 500px; border-radius: 10px; } /*-----------*\ ACF form \*-----------*/ .hvr-fade { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); /*box-shadow: 0 0 1px rgba(0, 0, 0, 0);*/ overflow: hidden; -webkit-transition-duration: 2s; transition-duration: 2s; -webkit-transition-property: color, background-color; transition-property: color, background-color; } .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { background-color: red; /*#2098D1;*/ color: white; } div#acf-nom { font-size: 2em; background: red; height: 100px; } div#acf-prenom { font-size: 1.5em; background: blue; height: 100px; } form#post { width: 960px; height: 500px; } #acf_55 { width: 300px; height: 1000px; } #acf_56 { position: top right; width: 300px; height: 100%; } /*-------------*\ /ACF form \*-------------*/ /*-----------*\ FOOTER \*-----------*/ footer { background: rgba(1, 68, 80, 1); width: 100%; display: inline-block; padding: 5px; } .content { width: 960px; padding:20px; margin: 0 auto; } a.button1 { align-items: right; margin: 20px; /*width: 50%;*/ } .facebook { max-width: 50%; } div.link { /*background-color: grey;*/ display: inline-block; align-items: right; /*float: right;*/ width: 100%; /*margin: 0 auto;*/ } div.copyright { align-items: right; /*background: rgba(1, 71, 80, .5);*/ /*text-align: center;*/ /*color: #dbf0f2;*/ width: 100%; font-size: 1.5em; /*margin: 2em, 0;*/ /*margin: 50px auto;*/ } p.copyright { /*background: rgba(1, 71, 80, .5);*/ text-align: center; color: #dbf0f2; width: 100%; font-size: 1.2em; /*margin: 2em, 0;*/ /*margin: 50px 0;*/ } /*-----------*\ /FOOTER \*-----------*/ /* --------*\ \* --------*/ /*------------------------------------*\ RESPONSIVE \*------------------------------------*/ @media only screen and (min-width:320px) { .wrapper { min-width:100%; height: auto margin: 0 auto; } /*nav { opacity: 0; }*/ .logo { min-width: 100%; height: auto margin: 5px; } main { min-width: 320px } .cont{ min-width:100% } section { min-width: 100% } } @media only screen and (min-width:480px) { .wrapper { width:95%; margin: 0 auto; } .cont{ min-width:95% } .logo { width: 90%; margin: 5px; } section { min-width: 100% } } @media only screen and (min-width:600px) { .wrapper { width:90%; margin: 0 auto; } /*a { color: white; opacity: 1; text-transform: lowercase; } nav { opacity: 1; }*/ .logo { width: 80%; } section { min-width: 90% } .cont{ min-width:90% } } @media only screen and (min-width:768px) { .wrapper { width:85%; margin: 0 auto; } section { min-width: 80% } .cont{ min-width:80% } .logo { min-width: 100%; margin: 5px; } } @media only screen and (min-width:960px) { .wrapper { width:80%; margin: 0 auto; } .logo { min-width: 75%; } section { min-width: 70% } .cont{ min-width:70% } } @media only screen and (min-width:1140px) { .wrapper { width:65%; margin: 0 auto; } section { max-width: 60% } .cont{ max-width:60% } .logo { min-width: 40%; margin: 5px; } } @media only screen and (min-width:1280px) { .wrapper { width:50%; margin: 0 auto; } .logo { max-width: 30%; } .cont{ min-width:50% } } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:144dpi) { }